deviceManager/src/views/business/fireInternet/fireAlarm/fireMonitoring/index.vue

<template>
  <div class="app-container home" >
    <div id="main" >
      <el-row :gutter="4">
          <el-col :span="12" v-loading="loading1">
            <div class="card_left">
              <el-col :span="24">
              <el-card class="box-card card1">
                <span class="title">
                  <el-image
                    class="imgTitle"
                    :src="img"
                    ></el-image>
                  <p>{{title}}</p>
                </span>
                <div class="contain">
                    <div>
                      <span>总数</span>
                      <div>
                        <p>{{index1Data.total}}</p>
                      </div>
                    </div>
                    <div>
                      <span>已处理</span>
                      <div>
                        <p>{{index1Data.checkCount}}</p>
                      </div>
                    </div>
                    <div>
                      <span>未处理</span>
                      <div>
                        <p>{{index1Data.noCheckCount}}</p>
                      </div>
                    </div>
                    <div>
                      <span>处置率</span>
                      <div>
                        <p v-loading="loading1">{{index1Data.checkRadio ? Number((index1Data.checkRadio)*100).toFixed(2) : '0'}}%</p>
                      </div>
                    </div>
                </div>
                <div class="contain2">
                  <div class="wrap">
                    <index1 :resData="index1Data.checkRadio"
                      :dataMap="index1Data.checkRadio"
                      color="#80FFA5"
                      :size="21"
                      :with="16"
                      :tick="false" style="width:100%;" alt="饼图" />
                    <p>处置率</p>
                  </div>
                </div>
              </el-card>
              </el-col>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card_right">
              <el-card class="box-card card2"  v-loading="loading2">
                <div class="contain">
                  <index2
                  :resData="index2Data"
                  style="width:100%;height:40vh;" alt="折线图" />
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="24" v-loading="loading3">
            <div class="card_bottom">
              <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
                <el-form-item label="单位名称：" prop="companyCode">
                  <el-select
                    v-model="queryParams.companyCode"
                    placeholder="请选择单位名称"
                    clearable
                    size="small"
                    style="width: 160px"
                  >
                    <el-option
                      v-for="dict in companyList"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="处理状态：" >
                  <el-select v-model="queryParams.status" style="width: 160px" placeholder="请选择处理状态" clearable size="small">
                    <el-option label="未处理" :value="0"/>
                    <el-option label="已处理" :value="1"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="时间:" label-width="50px">
                  <el-date-picker style="vertical-align: middle;width:340px"
                    v-model="dateRange"
                    size="small"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-top:4px">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="mini"
                  :loading="exportLoading"
                  @click="handleExport"
                  v-hasPermi="['system:admin:export']"
                >导出</el-button>
              </el-form>
            </div>
            <el-table :data="adminList" height="calc(100vh - 67vh)" :default-sort = "{prop: 'alarmTime', order: 'descending'}">
              <el-table-column label="序号" align="center" prop="id"  show-overflow-tooltip />
              <el-table-column label="单位名称" align="center" prop="companyName" show-overflow-tooltip />
              <el-table-column label="报告时间" align="center" prop="alarmTime" sortable  show-overflow-tooltip />
              <el-table-column label="报告数据" align="center" prop="property"  show-overflow-tooltip />
              <el-table-column label="报告内容" align="center" prop="deviceName"  show-overflow-tooltip />
              <el-table-column label="处理状态" align="center"  show-overflow-tooltip >
                <template slot-scope="scope">
                  <span :class="scope.row.alarmStatus == 0 ? 'color-red' : 'color-green'">{{ scope.row.alarmStatus == 0 ? '未处理':scope.row.alarmStatus ==1 ? '已处理':'' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="处理人" align="center" prop="updateBy"  show-overflow-tooltip />
              <el-table-column label="处理时间" align="center" prop="updateTime"  show-overflow-tooltip />
            </el-table>
          </el-col>
      </el-row>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />
    <!-- 导出-->
    <a href="" download="" id="xz" style="position: absolute;z-index: -1;opacity: 0;"></a>
  </div>
</template>

<script>

import {  getTbAlarmCollectIcoDetail, exportTbAlarm ,getTbAlarm, collectTbAlarm } from "@/api/business/OM/eventCenter";
import { listChannel } from "@/api/system/product";
import index1 from "@/views/components/fireInternetInfo/index1";
import index2 from "@/views/components/fireInternetInfo/index2";
import { BASEPATH } from "@/assets/js/common.js";
import { getThisDateBeforMonth, YearMonthDate } from "@/assets/js/dataFormate.js";
export default {
  name: "index",
  components: {
		index1,index2
  },
  data() {
    return {
      img:require('@/assets/images/1.gif'),
      title:"火警监控告警处理情况",
      index1Data:{},//饼图
      index2Data:[],//折线图
      index3Data:[],//table
      // 遮罩层
      loading1: true,
      loading2: true,
      loading3: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      open: false,
      t:null,
      timeList:[],
      queryParams:{
        bigDeviceType:1,
        current:1,
        size:10,
        companyCode:undefined,
        status:undefined,
      },
      queryParams2:{
        type:2,
        bigDeviceType:1,
        current:1,
        size:10,
        // startTime:"2022-01-18 00:00:00",
        // endTime:"2022-04-18 00:00:00",
        startTime:getThisDateBeforMonth(),
        endTime:YearMonthDate(),
      },
      dataZ:[],//折线图
      // 公司列表
      companyList: [],
      // 日期范围
      dateRange: [],
      adminList:[]
    };
  },
  created(){
    this.init()
    this.getList()
  },
   /* type=2&bigDeviceType=1&isLine=1
   type 1隐患2告警
   bigDeviceType1火系统 2 水系统 3rtu 4电气火灾 5 视频监控
    */
  methods: {
    init(){
        /* 饼图 */
        collectTbAlarm(this.queryParams).then(response =>{
          this.index1Data = response.data
          this.loading1 = false
        })
        /* 折线图 */
        getTbAlarmCollectIcoDetail(this.queryParams2).then(response =>{
          let data = response.data
          let lineData = []
          let total = []
          let checkCount = []
          total[0] = {data:[],name:undefined}
          checkCount[0] = {data:[],name:undefined}
          if(data){
            for (let i = 0; i < data.length; i++) {
              lineData.push(data[i].time);
              total[0].data.push(data[i].list.checkCount + data[i].list.noCheckCount)
              checkCount[0].data.push(data[i].list.checkCount)
            }
            total[0].name = "告警总数"
            checkCount[0].name = "处理次数"
            this.index2Data.push(total[0],checkCount[0],lineData)
            this.index2Data.push({name:"火警监控告警处理情况跟踪",color:"#FF2416"})
          }
          this.loading2 = false
        })
        /* 公司列表 */
        listChannel(this.queryParams).then(response => {
          if(response.data.records.length>0){
            this.companyList = response.data.records.map(val =>{
              return {
                dictValue:val.ownerId,
                dictLabel:val.ownerName,
                address:val.ownerAddress,
              }
            })
          }
        });
    },
    getList(){
      this.loading3 = true
      if(this.dateRange.length>0){
        this.queryParams.startTime = this.dateRange[0]
        this.queryParams.endTime = this.dateRange[1]
      }
      getTbAlarm(this.queryParams).then(response =>{
        this.adminList = response.data.records
        this.total = response.data.total;
        this.loading3 = false;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.current = 1;
      this.queryParams.size = 10;
      this.queryParams.startTime = undefined;
      this.queryParams.endTime = undefined;
      this.queryParams.status = undefined;
      this.queryParams.companyCode = undefined;
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      let queryParams = {...this.queryParams};
      delete queryParams.current
      delete queryParams.size
      this.exportLoading = true;
      exportTbAlarm(queryParams).then(response =>{
        this.exportLoading = false;
        document.getElementById("xz").href = BASEPATH() + response.data
        document.getElementById("xz").download = response.data
        document.getElementById("xz").click()
      })
    },


  }
}
</script>

<style scoped lang="scss">
  ::-webkit-scrollbar-track
  {
    background: #fff;
    border-radius: 0;

  }

  ::-webkit-scrollbar
  {
    -webkit-appearance: none;
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb
  {
      cursor: pointer;
      border-radius: 5px;
      background: rgba(0,0,0,.25);
      transition: color .2s ease;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    margin-top:20px;
  }
  #main{
    margin-top:-20px;
    .box-card{
      .h2{
        text-align: center;
        margin:0 auto;
        display: block;
        font-size: 1.2em;
        background-image: -webkit-linear-gradient(bottom, #00adce, #000);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

      }
    }
    .card_left{
      .card1{
        height:43vh;
        .title{
          width:100%;
          display: block;
          text-align: left !important;
          .imgTitle{
            width:5%;
            display: inline-block;
            vertical-align: middle;
          }
          p{
            display: inline-block;
            vertical-align: middle;
            margin-left:2%;
            font-size:1.4vw;
          }
        }
        .contain{
          margin-top:0.5vh;
          width:58%;
          display: inline-block;
          vertical-align: top;
          div{
            height:7.8vh;
            span{
              font-size: 1vw;
              vertical-align: middle;
              width:4vw;
              text-align: left;
              display: inline-block;
            }
            div{
              width:212px;
              height:6vh;
              vertical-align: middle;
              background:url("../../../../../assets/images/operation_item.png") no-repeat right center;
              display: inline-block;
              p{
                font-size: 1.4vw;
                vertical-align: top;
                margin:1vh 0 0 3vh;
              }
            }
          }
        }
        .contain2{
          margin-top:-2.5rem;
          vertical-align: top;
          width:42%;
          display: inline-block;
          p{
            text-align: center;
            font-size: 1.4rem;
            margin:-2vh 0 0 0%;
          }
        }
      }
    }
    .card_right{
      .card2{
        height:43vh;
      }
    }
    .card_bottom{
      padding-top:10px;
      margin-bottom:-10px
    }
  }

 ::v-deep {
    .el-table__body-wrapper::-webkit-scrollbar {
      /*width: 0;宽度为0隐藏*/
      width: 4px;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 6px;
      height: 50px;
      background: rgba(40, 190, 252, .6);//滚动条颜色
    }
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      background: #eee;//滚动条背景色
    }
}

</style>