deviceManager/src/views/business/fireInternet/hiddenDanger/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>{{index1Data.checkRadio ? Number((index1Data.checkRadio)*100).toFixed(2) : '0'}}%</p>
                        </div>
                      </div>
                  </div>
                  <div class="contain2" v-if="bt">
                    <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" v-loading="loading2">
            <div class="card_right">
              <el-card class="box-card card2" v-if="zxt">
                <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">
                <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-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-form-item class="right">
                  <el-button plain size="mini" @click="resetQuery">重置</el-button>
                  <el-button type="primary"  size="mini" @click="handleQuery" style="margin-top:4px">搜索</el-button>
                </el-form-item>
                <br>
                <el-button
                  plain
                  size="mini"
                  :loading="exportLoading"
                  @click="handleExport"
                  v-hasPermi="['system:admin:export']"
                >导出</el-button>
              </el-form>
            </div>
            <el-table :data="adminList"  :default-sort = "{prop: 'alarmTime', order: 'descending'}" border style="margin-top:20px">
              <el-table-column label="序号" align="left" prop="id"  show-overflow-tooltip />
              <el-table-column label="单位名称" align="left" prop="companyName" show-overflow-tooltip />
              <el-table-column label="报告时间" align="left" prop="alarmTime" sortable show-overflow-tooltip />
              <el-table-column label="报告数据" align="left" prop="property"  show-overflow-tooltip />
              <el-table-column label="报告内容" align="left" prop="deviceName"  show-overflow-tooltip />
              <el-table-column label="操作" align="left" class-name="small-padding fixed-width" >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    class="lans"
                    @click="getOne(scope.row)"
                    >查看详情</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    class="lans"
                    @click="jump(scope.row)"
                    v-hasPermi="['system:admin:edit']"
                  >跳转至工单</el-button>
                </template>
              </el-table-column>
            </el-table>
             <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.current"
                :limit.sync="queryParams.size"
                @pagination="getList"
              />
          </el-col>
      </el-row>
    </div>
    <!-- 详情对话框 -->
      <el-dialog
        :title="title"
        :visible.sync="open"
        width="600px"
        append-to-body
        :before-close="cancel"
        :close-on-click-modal="false"
      >
        <el-form ref="form" :model="form" label-width="auto">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工单序号：" prop="id">
                <span>{{form.id}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位名称：" prop="companyName">
                <span>{{form.companyName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报告时间：" prop="alarmTime">
                <span>{{form.alarmTime}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报告数据：" prop="property">
                <span>{{form.property || "--"}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报告内容：" prop="deviceName">
                <span>{{form.deviceName || "--"}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理状态：" prop="alarmStatus">
                <span>{{form.alarmStatus}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理人：" prop="updateBy">
                <span>{{form.updateBy || "--"}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理时间：" prop="updateTime">
                <span>{{form.updateTime || "--"}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理内容：" prop="checkContent">
                <span>{{form.checkContent || "--"}}</span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="误报：" prop="isAlarm">
                <span>{{form.isAlarm}}</span>
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
      </el-dialog>

    <!-- 导出-->
    <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 { getWorkOrder } from "@/api/business/OM/workMange";
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 {
      bt:false,
      zxt:false,
      img:require('@/assets/images/3.png'),
      title:"隐患处理情况",
      index1Data:{},//饼图
      index2Data:[],//折线图
      index3Data:[],//table
      // 遮罩层
      loading1: true,
      loading2: true,
      loading3: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      open: false,
      t:null,
      timeList:[],
      queryParams:{
        type:1,
        current:1,
        size:10,
        companyCode:undefined,
        status:undefined,
      },
      queryParams2:{
        type:1,
        current:1,
        size:10,
        startTime:getThisDateBeforMonth(),
        endTime:YearMonthDate(),
      },

      dataZ:[],//折线图
      // 公司列表
      companyList: [],
      // 日期范围
      dateRange: [],
      adminList:[],
      form:{}
    };
  },
  created(){
    this.init()
    this.getList()
  },
  /* type=2&bigDeviceType=1&isLine=1
   type 1隐患2告警
   bigDeviceType1火系统 2 水系统 3rtu 4电气火灾 5 视频监控
   isLine 0离线 1在线 */
  methods: {
    init(){
        /* 饼图 */
        collectTbAlarm(this.queryParams).then(response =>{
          this.index1Data = response.data
          this.bt = true
          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:"#FF9721"})
            this.zxt = true
            this.loading2 = false
          }
        })
        /* 公司列表 */
        this.queryParams.status = undefined
        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;
      })
    },
    /** 跳转至工单 */
    jump(row){
      this.$router.push({
        path: '/OM/business/OM/workMange',
        query: {
          id: row.workId,
          type:1
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.type = undefined;
      this.queryParams.current = 1;
      this.queryParams.size = 10;
      this.queryParams.status = undefined;
      this.queryParams.startTime = undefined;
      this.queryParams.endTime = 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()
      })
    },
    //查看详情
    getOne(row) {
      this.title = "详情信息";
      this.form = JSON.parse(JSON.stringify(row));
      getWorkOrder({"id":row.workId,size:1,current:1}).then(res=>{
        if(res.data.records.length>0){
          let data = res.data.records[0]
          this.form.checkContent = data.clnr
          this.form.updateBy = data.czPeople
          this.form.updateTime = data.czTime
          this.form.isAlarm = row.isAlarm == false ? "否"  :  row.isAlarm == true ?  "是" : "--"
          this.form.alarmStatus = data.clzt == '0' ? "未处理" : data.clzt == '1' ? "已处理:通过" : "已处理:未通过"
        }
        this.open = true;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
  }
}
</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: #D7000F;//滚动条颜色
    }
    .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>
<style>


</style>