cpp/cpp-ui/src/views/abnormalAlarm/index.vue

<template>
  <div class="app-container position-r">
    <div class="dark-el-input dark-el-button">
      <el-form ref="queryForm" size="small" :inline="true" popper-class="cpp-popper">
        <el-form-item label="时间">
          <el-date-picker
            :clearable="false"
            v-model="dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:45:00']" popper-class="cpp-popper"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item label="场站名称">
          <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper">
            <el-option
              v-for="item in stationList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="告警类型">
          <el-select v-model="alarmType" clearable popper-class="cpp-popper">
            <el-option
              v-for="item in alarmTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="beforeQuery">查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 5px" icon="el-icon-download" @click="exportFile">导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="top-badge position-a" style="top: 20px;right: 2vw;">
      <el-badge v-loading="loading" :value="this.alarmNum">
        <img src="../../assets/images/svg/remind.svg" width="30px"/>
      </el-badge>
    </div>
    <div class="dark-el-button">
      <el-button type="primary" @click="acknowledgeByStationCode">全部确认
      </el-button>
    </div>
    <div style="padding-top: 10px">
      <vxe-table
        ref="xTable"
        align="center"
        class="mytable-style"
        auto-resize
        border
        height="calc(60vh)"
        resizable
        export-config
        highlight-current-row
        show-overflow
        :data="tableData"
        :loading="loading"
        :radio-config="{trigger: 'row'}">
        <vxe-table-column field="stationCode" title="所属场站" :formatter="stationCodeFormat"></vxe-table-column>
        <vxe-table-column field="startTime" title="开始时间"></vxe-table-column>
        <vxe-table-column field="endTime" title="结束时间"></vxe-table-column>
        <vxe-table-column field="alarmType" title="告警类型" :formatter="alarmTypeFormat"></vxe-table-column>
        <vxe-table-column field="msg" title="告警描述"></vxe-table-column>
        <vxe-table-column field="voltage" title="操作人"></vxe-table-column>
        <vxe-table-column field="" title="操作">
          <template v-slot="{ row }">
            <svg-icon v-if="row.status !== 0" slot="prefix" h icon-class="alarm1" class="el-input__icon input-icon"/>
            <svg-icon v-if="row.status === 0" slot="prefix" viewBox="0 0 5 5" icon-class="alarm2"
                      class="el-input__icon input-icon"
                      @click="acknowledge(row)"/>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
        background
        :loading="loading"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="total"
        @page-change="handlePageChange"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
      </vxe-pager>
    </div>
  </div>
</template>

<script>
export default {
  name: 'inverterinfo',
  data() {
    return {
      alarmType: '',
      alarmTypes: [
        {
          label: "站端通道告警",
          value: "E1"
        },
        {
          label: "站端上报告警",
          value: "E2"
        },
        {
          label: "站端硬件报警",
          value: "E3"
        },
        {
          label: "中心解析告警",
          value: "E4"
        },
        {
          label: "通用告警",
          value: "E5"
        }
      ],
      dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 5 * 1000 * 60],
      total: 0,
      sortOrder: 'asc',
      pageSize: 15,
      currentPage: 1,
      stationList: [],
      stationCode: [],
      searchForm: {},
      tableData: [],
      loading: false,
      alarmNum: 0,
      // 日期使用
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() >=  new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1
        }
      },
    }
  },
  created() {
    // 获取场站下拉列表
    this.getStationCode()
  },
  mounted() {

  },
  computed: {},
  methods: {
    exportFile(){
      this.$refs.xTable.exportData({
        filename: '告警管理' + new Date().getTime(),
        type: 'csv',
        isHeader: true,
        isFooter: true,
        data: this.tableData
      })
    },
    beforeQuery() {
      this.currentPage = 1
      this.pageSize = 10
      this.dataQuery()
    },
    stationCodeFormat({cellValue, row, column}) {
      const item = this.stationList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    alarmTypeFormat({cellValue, row, column}) {
      const item = this.alarmTypes.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.dataQuery();
    },
    dataQuery() {
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      if (endTime <= startTime) {
        this.$message.error("开始时间不能大于结束时间")
        return
      }

      this.loading = true
      let queryParams = {
        "currentPage": this.currentPage,
        "pageSize": this.pageSize,
        "stationCode": this.stationCode,
        "alarmType": this.alarmType,
        "startTime": startTime,
        "endTime": endTime
      }

      this.$axios.get('/abnormalAlarm/getByTimeBetweenAndAlarmTypeAndStationCode', {params: queryParams}).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total

        this.$axios.get('/abnormalAlarm/getCountByStatusAndStationCode', {
          params: {
            "status": 0,
            "stationCode": this.stationCode,
          }
        }).then(response => {
          this.alarmNum = response.data
          this.loading = false
        })
      }).catch(() => {
        this.loading = false
      })
    },
    async getStationCode() {
      await this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
        if (this.stationList.length > 0) {
          // 默认查全部
          this.stationList.push({value: 'all', label: '全部'})
          const sortItems = (arr, sortValue) => {
            return arr.sort((a, b) => {
              if (a.value === sortValue) {
                return -1;
              }
              if (b.value === sortValue) {
                return 1;
              }
              return a.value - b.value; // 示例：按id升序排序
            });
          };
          const sortValue = 'all';
          const sortedItems = sortItems(this.stationList, sortValue);
          this.stationList = sortedItems
          this.stationCode = this.stationList[0].value
          this.dataQuery()
        }
      })
    },
    acknowledgeByStationCode() {
      this.$confirm('是否确认对 【场站：' + this.formatStation(this.stationCode) + '】 进行"全部确认"操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('/abnormalAlarm/acknowledgeByStationCode', {
          params: {
            "stationCode": this.stationCode,
          }
        }).then(response => {
          this.beforeQuery()
          this.$message.info("确认成功！")

        }).catch(() => {
          this.loading = false
        })
      })
    },
    acknowledge(row) {
      this.$confirm('是否对【' + row.msg + '】进行确认操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.status = 1
        this.$axios.post('/abnormalAlarm/updateStatus1', row).then(response => {
          this.$message.info("【" + row.msg + "】 已确认！")
          this.beforeQuery()
        }).catch(() => {
          this.loading = false
        })
      })
    },
    formatStation(stationCode) {
      let name = '未知场站名称'
      this.stationList.forEach(s => {
        if (stationCode == s.value) {
          name = s.label
          return
        }
      })
      return name
    },
  }
}
</script>