<template>
  <div class="data-watch">
    <el-card class="box-card">
      <div class="lcl-title">报警记录</div>
      <div class="mt20">
        <el-select v-model="selectValue" placeholder="请选择" class="mr10">
          <!-- <el-option
            v-for="item in radarSelectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> -->
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="medium"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button size="medium">生成曲线</el-button>
      </div>
    </el-card>
    <el-card class="mt10 box-card">
      <div class="lcl-title">内部位报警记录表</div>
      <div class="mt10" id=" radar-table">
        <el-table
          :data="alarmList"
          border
          stripe
          style="width: 100%"
          :header-cell-style="{
            textAlign: 'center',
            height: '20px',
          }"
          :row-style="{ height: '20px' }"
        >
          <el-table-column
            label="监测编号"
            align="center"
            prop="alarmMonNumber"
          />
          <el-table-column label="监测值-a" align="center" prop="alarmValueA" />
          <el-table-column label="监测值-b" align="center" prop="alarmValueB" />
          <el-table-column label="监测值-c" align="center" prop="alarmValueC" />
          <el-table-column
            label="报警时间"
            align="center"
            prop="alarmTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.alarmTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="报警解除时间"
            align="center"
            prop="alarmResTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{
                parseTime(scope.row.alarmResTime, "{y}-{m}-{d}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="报警解除时长"
            align="center"
            prop="alarmResHours"
          />
          <el-table-column label="报警级别" align="center" prop="alarmLevel">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.slope_alarm_level"
                :value="Number(scope.row.monType)"
              />
            </template>
          </el-table-column>
          <el-table-column label="是否报警 " align="center" prop="alarmIfRes">
            <template slot-scope="scope">
              <span v-if="scope.row.alarmIfRes == 0">否</span>
              <span v-if="scope.row.alarmIfRes == 1">是</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template>
              <el-button size="mini" type="text" icon="el-icon-edit"
                >解除报警</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
// import { defineComponent } from "@vue/composition-api";
import { dataAlarm } from "@/api/lclApi/lclapi";
export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        monNumber: null,
        monValue: null,
        monValueAll: null,
        monAlarmStatus: null,
        monType: 2,
      },
      // 总条数
      total: 0,
      alarmList: [
        {
          createTime: "2023-03-11 19:06:20",
          updateTime: "2023-03-11 08:38:13",
          monStatus: 0,
          pointName: 0,
          id: 14,
          monNumber: "2#沉降仪",
          monValueA: "0.2",
          monValueB: "0.21",
          monAlarmStatus: 0,
          monDept: "10m/20m",
        },
      ],
      selectValue: "ss",
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getList();
    });
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      dataAlarm(this.queryParams).then((res) => {
        if (res && res.code === 200 && res.rows) {
          this.alarmList = res.rows;
          this.total = res.total;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.data-watch {
  width: 100%;
  min-height: 100%;
  // border-radius: 10px;
  // background-color: teal;
  .box-card {
    width: 100%;
    .lcl-title {
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
      position: relative;
      padding-left: 10px;
      &:before {
        content: "";
        position: absolute;
        left: 0px;
        top: 4px;
        width: 6px;
        height: 22px;
        background: #0d85f4;
      }
    }
  }
}
</style>