station-test-ui/src/views/alarm/alarmRecords/index.vue

<template>
  <div class="dashboard-editor-container">
    <!-- 设备数量 -->
    <div class="layout-1">
      <el-row :gutter="8">
        <el-col class="gutter-row item item1" :span="4" >
         <a href="javascript:void(0);" @click="handleSearchByGrade(0)"> 
           <div class="gutter-box" :style="item1Style">
            <div class="today-add">
              <span>所有告警</span>
            </div>
            <div class="count">
              <div>
                <span class="number">
                  <i class="el-icon-loading" v-if="showLoading"></i>
                  <countTo v-else :startVal="startVal" :endVal="total" :duration="duration"></countTo>
                </span>
              </div>
              <span class="text">告警总数</span>
            </div>
          </div>
          </a>
        </el-col>
        <el-col class="gutter-row item item2" :span="4" >
          <a href="javascript:void(0);" @click="handleSearchByGrade(1)"> 
          <div class="gutter-box" :style="item2Style">
            <div class="today-add">
              <span >设备校准告警</span>
              <el-tooltip :enterable="false" effect="light" placement="top">
                <div slot="content">{{this.alarmGradeText[1]}}</div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="count">
              <span class="number">
                <i class="el-icon-loading" v-if="showLoading"></i>
                <countTo v-else :startVal="startVal" :endVal="alarmCount.first" :duration="duration"></countTo>
              </span>
              <span class="text">告警数量</span>
            </div>
            <div class="level-text">
                <span class="level-text-left">紧急程度：</span>
                <span class="level-text-right">非常紧急</span>
            </div>
          </div></a>
        </el-col>
        <el-col class="gutter-row item item3" :span="4" >
          <a href="javascript:void(0);" @click="handleSearchByGrade(2)"> 
          <div class="gutter-box" :style="item3Style">
            <div class="today-add">
              <span>硬件故障告警</span>
              <el-tooltip :enterable="false" effect="light" placement="top">
                <div slot="content">{{this.alarmGradeText[2]}}</div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="count">
              <span class="number">
                <i class="el-icon-loading" v-if="showLoading"></i>
                <countTo
                  v-else
                  :startVal="startVal"
                  :endVal="alarmCount.second"
                  :duration="duration"
                ></countTo>
              </span>
              <span class="text">告警数量</span>
            </div>
            <div class="level-text">
                <span class="level-text-left">紧急程度：</span>
                <span class="level-text-right">紧急</span>
            </div>
          </div></a>
        </el-col>
        <el-col class="gutter-row item item4" :span="4" >
          <a href="javascript:void(0);" @click="handleSearchByGrade(3)"> 
          <div class="gutter-box" :style="item4Style">
            <div class="today-add">
              <span>设备流量告警</span>
              <el-tooltip :enterable="false" effect="light" placement="top">
                <div slot="content">{{this.alarmGradeText[3]}}</div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="count">
              <span class="number">
                <i class="el-icon-loading" v-if="showLoading"></i>
                <countTo
                  v-else
                  :startVal="startVal"
                  :endVal="alarmCount.third"
                  :duration="duration"
                ></countTo>
              </span>
              <span class="text">告警数量</span>
            </div>
            <div class="level-text">
                <span class="level-text-left">紧急程度：</span>
                <span class="level-text-right">一般</span>
            </div>
          </div></a>
        </el-col>
        <el-col class="gutter-row item item5" :span="4" >
           <a href="javascript:void(0);" @click="handleSearchByGrade(4)"> 
          <div class="gutter-box" :style="item5Style">
            <div class="today-add">
              <span>其他告警</span>
              <el-tooltip :enterable="false" effect="light" placement="top">
                <div slot="content">{{this.alarmGradeText[4]}}</div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="count">
              <span class="number">
                <i class="el-icon-loading" v-if="showLoading"></i>
                <countTo
                  v-else
                  :startVal="startVal"
                  :endVal="alarmCount.fourth"
                  :duration="duration"
                ></countTo>
              </span>
              <span class="text">告警数量</span>
            </div>
            <div class="level-text">
                <span class="level-text-left">紧急程度：</span>
                <span class="level-text-right">较低</span>
            </div>
          </div></a>
        </el-col>
      </el-row>
    </div>
    <div class="layout-2 app-container">
     
     <!-- 搜索栏 -->
    <searchbar
      :url="url"
      @dataChange="setTableData"
      :searchReason="searchReason"
    />

      
    <el-table
      ref="multipleTable"
      :data="data"
      tooltip-effect="dark"
      style="width: 100%"
      v-loading="loading"
      border
      fit
      @selection-change="handleSelectMulti"
      :highlight-current-row="highlight"
      @row-click="rowClick"
      @cell-click="cellClick"
    >
      <el-table-column type="selection" align="center" width="55" />
      <!-- <el-table-column prop="alarm_reason" align="center" label="告警原因 ">
        <template slot-scope="data">
            <el-tooltip  effect="light" :enterable="false" :disabled="data.row.sub_device_no ==null"  :content="data.row.sub_device_no" placement="top">
                <el-tag  effect="dark" :color='alarmGrade[data.row.grade]["color"]'>{{ data.row.alarm_reason }}</el-tag>
            </el-tooltip>
        </template>
      </el-table-column> -->
      <el-table-column prop="device_number" align="center" sortable label="设备编号" />
      <el-table-column prop="device_name" align="center" sortable label="设备名称" />
      <el-table-column prop="alarm_type" align="center"  sortable label="告警类型 "/>
      <el-table-column prop="reason_text" align="center" sortable  label="告警原因 "/>
      <el-table-column prop="start_time_text" align="center" sortable label="告警开始时间" />
      <!-- <el-table-column prop="end_time_text" align="center" width="160" label="告警结束时间" /> -->
      <!-- <el-table-column prop="state" align="center" label="告警状态" /> -->
      <el-table-column prop="comment" align="center" min-width="180" label="备注" />
      <el-table-column label="操作" width="130" align="center">
        <template slot-scope="record">
  
          <el-tooltip  effect="light" :enterable="false" content="设备详情" placement="top">
              <el-button type="primary" icon="el-icon-view"  @click="viewAlarmDetail(record.row.id)" />
          </el-tooltip>
          <!-- <el-tooltip effect="light" :enterable="false" content="历史心跳" placement="top">
              <el-button type="primary" icon="el-icon-data-line"  @click="alarmAnalysis(record.row.asset_no)" />
          </el-tooltip> -->
          

          
        </template>
      </el-table-column>
    </el-table>
    
        <div class="selected-operate">
          <el-row>
            <el-col :span="8">
              <!-- <el-button
              :disabled="selectedIds.length<=0"
              type="info" 
              @click="init()"
              >处理告警</el-button> -->
              
              <el-button
              :loading="downloadLoading"
              type="info" 
              @click="exportAlarmList()"
              >导出</el-button>
              <el-button
              @click="clearSelectedIds()"
              >清空选中</el-button>
            </el-col>
            <el-col :span="16">
              <el-pagination
                background
                class="pagination-container"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paginate.current"
                
                :page-sizes="paginate.sizes"
                :page-size="paginate.limit"
                :layout="paginate.layout"
                :total="paginate.total"
              />
            </el-col>
          </el-row>
        </div>
   
    <view-dialog 
    :detailVisible="detailVisible" 
    @sendVal="closeDialog" 
    :alarmId="alarmId"
    />

     <analysis-dialog 
      :analysisVisible="analysisVisible" 
      @sendVal="closeDialog" 
      :assetNo="assetNo"
    />
    <export-dialog 
      :exportVisible="exportVisible" 
      @sendVal="closeDialog" 
      @exportCallback="exportAlarmByType"
    />
    </div>

  </div>
</template>

<script>
import countTo from "vue-count-to";
import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
import { parseTime } from '@/utils'
import Searchbar from '../search/Searchbar';
import viewDialog from "../component/viewDialog"
import analysisDialog from "../component/analysisDialog"
import exportAlarm from "../component/exportAlarm"
import exportDialog from "../component/exportDialog"
import { action } from '@/directive/permission/index.js'
export default {
  name: "alarm_realtimeAlarm",
  mixins: [rlListOperate,exportAlarm],
  directives: { action },
  components: {
    countTo,
    Searchbar,
    viewDialog,
    analysisDialog,
    exportDialog
  },
 
  data() {
    return {
      duration: 3000,
      showLoading: true,
      showAddLoading: true,
      detailVisible:false,
      analysisVisible:false,
      exportVisible:false,
      alarmId:'',
      startVal: 0,
      assetNo:'',
      queryParam:{},
      alarmGrade:[],
      alarmGradeText:{
        1:'计量器具校准失效提前告警',
        2:'硬件故障告警',
        3:'液压泵中流量卡的有效期管理跟报警提醒',
        4:'其他告警提醒',
      },
      searchReason:[],
      alarmCount: {
        first: 13,
        second : 17,
        third: 22,
        fourth: 28,
      },

      item1Style: { "background-color": "#32c5d2" },
      item2Style: { "background-color": "#4caf50" },
      item3Style: { "background-color": "#7ba7bd" },
      item4Style: { "background-color": "#e7505a" },
      item5Style: { "background-color": "#e7505a" },
      url: "alarmRecords",
      
    };
  },
  computed: {
    total: function() {
      return (
        this.alarmCount.first +
        this.alarmCount.second +
        this.alarmCount.third +
        this.alarmCount.fourth 
      );
    },
    online: function() {
      return this.statusCount.alarm + this.statusCount.normal;
    }
  },
  created(){
    
  },
  mounted() {
    this.alarmGradeCount([])
    this.initAlarmNotice()
    let alarmGrade = this.$appConfig["alarmGrade"];
    this.alarmGrade=alarmGrade
    this.item1Style = { "background-color": alarmGrade[0]["color"] };
    this.item2Style = { "background-color": alarmGrade[1]["color"] };
    this.item3Style = { "background-color": alarmGrade[2]["color"] };
    this.item4Style = { "background-color": alarmGrade[3]["color"] };
    this.item5Style = { "background-color": alarmGrade[4]["color"] };
    // Object.keys(alarmGrade).forEach((k) => {
    //     console.log(alarmGrade[k])
    // })
  },
  methods: {
    async initAlarmNotice(){
      let that=this
      let gradeNotice=[]
      await this.$http.post("sysDictData/getOptions", { type: "alarmGradeNotice" }).then(resp => {
          Object.keys(resp.data).forEach((k) => {
                let item=resp.data[k]
                gradeNotice[item.value]=item.remark
        })
      });
      await this.$http.post("sysDictData/getOptions", { type: "AlarmReason" }).then(resp => {
        let gradeArr=[]
        Object.keys(resp.data).forEach((k) => {
                let item=resp.data[k]
                if(gradeArr[item.remark]){
                  gradeArr[item.remark]+='或'+item.text
                }else{
                  gradeArr[item.remark]=item.text
                }
        })
        let res=[]
        for (let i = 1; i <= 4; i++) {
            if(gradeNotice['grade'+i]){
                 res[i]=gradeNotice['grade'+i]
            }else if(gradeArr[i]){
                  res[i]=gradeArr[i]
            }else{
                  res[i]='暂未定义'
            }
        }
        // that.alarmGradeText=res
      });

    },
    formatLoginTime(time) {
      return parseTime(time)
    },
    alarmGradeCount(alarm_reason){
        var self = this;
        var query =JSON.parse(JSON.stringify(this.queryParam))
        query.alarm_reason=alarm_reason
        query.grade = ''
            self.alarmCount.first = 45;
            self.alarmCount.second = 32;
            self.alarmCount.third = 42;
            self.alarmCount.fourth = 32;
            self.showLoading = false;
        // 查询状态数据
        // this.$http.get("alarm/alarmGradeCount/realtime",{ params: query }).then(function(resp) {
        //   if (resp.code == 10000) {
        //     self.alarmCount.first = resp.data[1];
        //     self.alarmCount.second = resp.data[2];
        //     self.alarmCount.third = resp.data[3];
        //     self.alarmCount.fourth = resp.data[4];
        //     self.showLoading = false;
        //   }
        // });
    },
    /**
     * 监听搜索组件中查出的数据
     */
    setTableData(data,queryParam,paginate,isGradeSearch) {
      this.data = data
      this.queryParam = queryParam
      if(isGradeSearch){
        this.alarmGradeCount([])
      }else{
        this.alarmGradeCount(this.queryParam.alarm_reason)
      }
      
      this.paginate=paginate
    },
    viewAlarmDetail(alarm_id){
      this.alarmId=alarm_id;
      this.detailVisible=true;
    },
    alarmAnalysis(asset_no){
      this.assetNo=asset_no;
      this.analysisVisible=true;
    },
    closeDialog(){
      this.detailVisible=false;
      this.analysisVisible=false;
      this.exportVisible=false
    },
    handleSearchByGrade(level){
        let search_reason=[]
        if(level==0){
          search_reason['grade']=''
          search_reason['alarm_reason']=[]
          this.searchReason=search_reason
          return 
        }
        search_reason['grade']=level
         let alarm_reason=[]
        this.$http.post("sysDictData/getOptions", { type: "AlarmReason" }).then(resp => {
          
          let level_arr=[]
          Object.keys(resp.data).forEach((k) => {
                  let item=resp.data[k]
                  level_arr.push(item.remark)
                  if(item.remark==level){
                    alarm_reason.push(item.value)
                  }
          })
          if(level_arr.indexOf(level)<0){
            this.$http.post("sysDictData/getOptions", { type: "alarmGradeNotice" }).then(resp => {
 
                let key='grade'+level;
                Object.keys(resp.data).forEach((k) => {
                      let gradeArr=resp.data[k]
                      if(gradeArr.value==key){
                          alarm_reason=gradeArr.text.split('&')
                      }
                })
                search_reason['alarm_reason']=alarm_reason
                this.searchReason=search_reason
            });
          }else{
            search_reason['alarm_reason']=alarm_reason
             this.searchReason=search_reason

          }
         
        })
      
      


    },
    clearSelectedIds(){
      // this.selectedIds = []
      this.$refs.multipleTable.clearSelection();
    },
    exportAlarmList(){
      if(this.selectedIds.length<=0 ){
        this.exportExcelForAll(0);
      }else{
        this.exportVisible=true;
      }
      
    },
    exportAlarmByType(val){
      if(val=='all'){
        this.exportExcelForAll(0);
      }else{
        this.exportExcelBySelectIds(this.selectedIds);
      }
      this.exportVisible=false;
    }

    
  },

  
};
</script>

<style lang='scss' scoped>
@import "./alarm.scss";
</style>