deviceManager/src/views/business/fireInternet/monthReport/index.vue

<template>
  <div class="app-container">
    <!-- 查询对话框 -->
    <el-dialog :title="title" :visible.sync="open1" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
        <el-row>
          <el-col :span="14">
            <el-form-item label="开始日期" prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                type="date"
                placeholder="选择开始日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                type="date"
                placeholder="选择结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="使用单位" prop="companyCode">
              <el-select v-model="form.companyCode"  placeholder="请选择使用单位">
                <el-option
                  v-for="item in companyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel" plain>取 消</el-button>
      </div>
    </el-dialog>
    <!-- 报告对话框 -->
    <el-dialog :title="title" :visible.sync="open2" width="600px"   append-to-body :before-close="cancel" :close-on-click-modal="false">
      <div class="exportBox" style="height:600px;overflow-y: scroll;">
          <div class="exportContainer" id="printArea" ref="print">
              <h3 style="text-align:center">
                  <span id="companyName"><strong>{{companyListSelect.name}}</strong></span><strong>工作月报分析</strong>
              </h3>
              <h4 style="text-align:center;margin-top:10px;">
                  <span id="staticTime" v-if="form.startTime && form.endTime"><strong>{{form.startTime}}日 到 {{form.endTime}}日</strong></span>
              </h4>
              <section class="">
                  <h4 class="big-tit"><strong>1.单位信息</strong></h4>
                  <table width="100%" border="1" style="text-align: center;border-collapse: collapse; border-spacing: 0;">
                      <tr>
                          <td>单位名称</td>
                          <td>单位地址</td>
                      </tr>
                      <tbody id="companyData">
                        <tr>
                          <td>{{companyListSelect.name}}</td>
                          <td>{{companyListSelect.address}}</td>
                        </tr>
                      </tbody>
                  </table>
                  <p class="table-sub" style="text-align:center">表1：单位信息统计表</p>
              </section>
              <section class="section">
                  <h4 class="big-tit"><strong>2.设备类型统计信息</strong></h4>
                  <div>
                      <table width="100%" border="1" style="text-align: center;border-collapse: collapse;border-spacing: 0;">
                          <tr>
                              <td>设备类型名称</td>
                              <td>数量</td>
                          </tr>
                          <tbody id="typeList">
                            <tr v-for="(item,index) in DeviceTypeCollectList" :key="index">
                              <td>{{item.deviceTypeS}}</td>
                              <td>{{item.deviceCount}}</td>
                            </tr>
                          </tbody>
                      </table>
                      <p class="table-sub" style="text-align:center">表2：设备类型统计信息表</p>
                  </div>
              </section>


              <!-- 告警处理start -->
              <section class="alarm-handing">
                  <h4 class="big-tit"><strong>3.告警处理情况统计</strong></h4>
                  <div>
                      <h4 class="big-tit">3.1 水系统告警处理统计</h4>
                      <table width="100%" border="1" style="text-align: center;border-collapse: collapse;border-spacing: 0;">
                          <tr>
                              <td>总数</td>
                              <td>已处理数</td>
                              <td>未处理数</td>
                              <td>处理率</td>
                          </tr>
                          <tbody id="water_statistics">
                            <tr>
                              <td>{{waterList.total}}</td>
                              <td>{{waterList.checkCount}}</td>
                              <td>{{waterList.noCheckCount}}</td>
                              <td>{{Number((waterList.checkRadio)*100).toFixed(2)}}%</td>
                            </tr>
                          </tbody>
                      </table>
                      <p class="table-sub" style="text-align:center">表3-1：水系统告警处理折线图</p>
                      <!-- <div id="waterChart1" class="innerChart"></div> -->
                      <!-- <img id="waterChart1_img" style="width:100%;display:none;"> -->
                      <index :resData1="WDataZ" :resData2="WDataZC" style="width:100%" alt="折线图" id="z1"  v-if="z1" />
                      <div class="waterSummary" style=" padding: 15px;
                      line-height: 1.5;
                      margin:20px 0 20px;
                      background: rgb(170, 170, 170);border:1px solid rgb(170, 170, 170)">
                          目前数据反应：水系统告警报告数量：<span id="waterCount">{{waterList.total}}</span>条。报告数量良好。<br> 提示：
                          <span id="waterTips" v-if="waterList.total>=100">有一定的火系统隐患或存在系统故障，需要排查。</span>
                          <span id="waterTips" v-if="waterList.total<100">消防水设备状态良好，需要保持。</span>
                      </div>

                  </div>
                  <div>
                      <h4 class="big-tit">3.2 火系统告警处理统计</h4>
                      <table width="100%" border="1" style="text-align: center;border-collapse: collapse;border-spacing: 0;">
                          <tr>
                              <td>告警总数</td>
                              <td>已处理数</td>
                              <td>未处理数</td>
                              <td>处理率</td>
                          </tr>
                          <tbody id="fire_statistics">
                            <tr>
                              <td>{{fireList.total}}</td>
                              <td>{{fireList.checkCount}}</td>
                              <td>{{fireList.noCheckCount}}</td>
                              <td>{{Number((fireList.checkRadio)*100).toFixed(2)}}%</td>
                            </tr>
                          </tbody>
                      </table>
                      <p class="table-sub" style="text-align:center">表3-2：水系统告警处理统计表</p>
                      <!-- <div id="fireChart1" class="innerChart"></div>
                      <img id="fireChart1_img" style="width:100%;display:none;"> -->
                      <index :resData1="HDataZ" :resData2="WDataZC" style="width:100%" alt="折线图" id="z2" v-if="z2" />
                      <div class="fireSummary" style=" padding: 15px;
                      line-height: 1.5;
                      margin:20px 0 0px;
                      background: rgb(170, 170, 170);border:1px solid rgb(170, 170, 170)">
                      目前数据反应：火系统告警报告数量：<span id="waterCount">{{fireList.total}}</span>条。报告数量良好。<br> 提示：
                          <span id="waterTips" v-if="fireList.total>=100">有一定的火系统隐患或存在系统故障，需要排查。</span>
                          <span id="waterTips" v-if="fireList.total<100">消防水设备状态良好，需要保持。</span>
                      </div>
                  </div>

              </section>
              <!-- 告警处理end -->


              <!-- 设备离线情况统计start -->
              <section class="device-only">
                  <h4 class="big-tit"><strong>4.设备离线情况统计</strong></h4>
                  <div>
                      <h4 class="big-tit">4.1 水系统设备离线情况统计</h4>
                      <table width="100%" border="1" style="text-align: center;border-collapse: collapse;border-spacing: 0;">
                          <tr>
                              <td>总数</td>
                              <td>已处理数</td>
                              <td>未处理数</td>
                              <td>处理率</td>
                          </tr>
                          <tbody id="waterDeviceOnly">
                            <tr>
                              <td>{{DeviceTypeNolingW.total}}</td>
                              <td>{{DeviceTypeNolingW.checkCount}}</td>
                              <td>{{DeviceTypeNolingW.noCheckCount}}</td>
                              <td>{{Number((DeviceTypeNolingW.checkRadio)*100).toFixed(2)}}%</td>
                            </tr>
                          </tbody>
                      </table>
                      <p class="table-sub" style="text-align:center">表4-1：水系统设备离线情况统计表</p>
                      <!-- <div id="waterOnlyChart" class="innerChart"></div>
                      <img id="waterOnlyChart_img" style="width:100%;display:none;"> -->
                      <index :resData1="WDataZL" :resData2="WDataZC" style="width:100%" alt="折线图" id="z3" v-if="z3" />
                      <div class="waterOnlySummary" style=" padding: 15px;
                      line-height: 1.5;
                      margin:20px 0 20px;
                      background: rgb(170, 170, 170);border:1px solid rgb(170, 170, 170)">
                      目前数据反应：水系统离线告警报告数量：<span id="waterCount">{{DeviceTypeNolingW.total}}</span>条。报告数量良好。<br> 提示：
                          <span id="waterTips" v-if="DeviceTypeNolingW.total>=100">有一定的火系统隐患或存在系统故障，需要排查。</span>
                          <span id="waterTips" v-if="DeviceTypeNolingW.total<100">消防水设备状态良好，需要保持。</span>
                      </div>

                  </div>
                  <div>
                      <h4 class="big-tit">4.2 火系统设备离线情况统计</h4>
                      <table width="100%" border="1" style="text-align: center;border-collapse: collapse;border-spacing: 0;">
                          <tr>
                              <td>告警总数</td>
                              <td>已处理数</td>
                              <td>未处理数</td>
                              <td>处理率</td>
                          </tr>
                          <tbody id="fireOnly">
                            <tr>
                              <td>{{DeviceTypeNolingH.total}}</td>
                              <td>{{DeviceTypeNolingH.checkCount}}</td>
                              <td>{{DeviceTypeNolingH.noCheckCount}}</td>
                              <td>{{Number((DeviceTypeNolingH.checkRadio)*100).toFixed(2)}}%</td>
                            </tr>
                          </tbody>
                      </table>
                      <p class="table-sub" style="text-align:center">表4-2：火系统设备离线情况统计表</p>
                      <!-- <div id="fireOnlyChart" class="innerChart"></div>
                      <img id="fireOnlyChart_img" style="width:100%;display:none;"> -->
                      <index :resData1="HDataZL" :resData2="WDataZC" style="width:100%" alt="折线图" id="z4" v-if="z4" />
                      <div class="fireOnlySummary" style=" padding: 15px;
                      line-height: 1.5;
                      margin:20px 0 20px;
                      background: rgb(170, 170, 170);border:1px solid rgb(170, 170, 170)">
                          目前数据反应：火系统离线告警报告数量：<span id="waterCount">{{DeviceTypeNolingH.total}}</span>条。报告数量良好。<br> 提示：
                          <span id="waterTips" v-if="DeviceTypeNolingH.total>=100">有一定的火系统隐患或存在系统故障，需要排查。</span>
                          <span id="waterTips" v-if="DeviceTypeNolingH.total<100">消防水设备状态良好，需要保持。</span>
                      </div>
                  </div>

                  <!-- <div>
                      <h4 class="big-tit">4.3 烟感设备离线情况统计</h4>
                      <table width="100%" border="1" style="text-align: center;border-collapse: collapse;border-spacing: 0;">
                          <tr>
                              <td>告警总数</td>
                              <td>已处理数</td>
                              <td>未处理数</td>
                              <td>处理率</td>
                          </tr>
                          <tbody id="smokeOnly"></tbody>
                      </table>
                      <p class="table-sub" style="text-align:center">表4-3：烟感设备离线情况统计表</p>
                      <div id="smokeOnlyChart" class="innerChart"></div>
                      <img id="smokeOnlyChart_img" style="width:100%;display:none;">
                      <div class="smokeOnlySummary" style=" padding: 15px;
                      line-height: 1.5;
                      margin:20px 0 0px;
                      background: rgb(170, 170, 170);border:1px solid rgb(170, 170, 170)">
                      </div>
                  </div> -->
              </section>
              <!-- 设备离线情况统计end -->

              <section class="section">
                  <h4 class="big-tit"><strong>5.分析结论</strong></h4>
                  <div style=" padding: 15px;
                  line-height: 1.5;
                  margin:20px 0 20px;
                  background: rgb(170, 170, 170);border:1px solid rgb(170, 170, 170)">
                      <div class="waterSummary">
                        目前数据反应：统计时段内水系统告警报告数量：{{waterList.total}}条。报告数量良好。
                        提示：<span id="waterTips" v-if="waterList.total>=100">有一定的火系统隐患或存在系统故障，需要排查。</span>
                          <span id="waterTips" v-if="waterList.total<100">消防水设备状态良好，需要保持。</span>
                      </div>
                      <div class="waterOnlySummary">
                        目前数据反应：统计时段内火系统告警报告数量：{{fireList.total}}条。报告数量良好。
                        提示：<span id="waterTips" v-if="fireList.total>=100">有一定的火系统隐患或存在系统故障，需要排查。</span>
                          <span id="waterTips" v-if="fireList.total<100">消防水设备状态良好，需要保持。</span>
                      </div>
                      <div class="fireOnlySummary">
                        目前数据反应：统计时段内水系统离线告警报告数量：{{DeviceTypeNolingW.total}}条。报告数量良好。
                        提示：<span id="waterTips" v-if="DeviceTypeNolingW.total>=100">有一定的火系统隐患或存在系统故障，需要排查。</span>
                          <span id="waterTips" v-if="DeviceTypeNolingW.total<100">消防水设备状态良好，需要保持。</span>
                      </div>
                      <div class="smokeOnlySummary">
                        目前数据反应：统计时段内火系统离线告警报告数量：{{DeviceTypeNolingH.total}}条。报告数量良好。
                        提示：<span id="waterTips" v-if="DeviceTypeNolingH.total>=100">有一定的火系统隐患或存在系统故障，需要排查。</span>
                          <span id="waterTips" v-if="DeviceTypeNolingH.total<100">消防水设备状态良好，需要保持。</span>
                      </div>

                  </div>

              </section>


          </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleExport">打印</el-button>
        <el-button @click="cancel" plain>取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { DeviceTypeCollect, DeviceTypeStatus, DeviceTypeStatusCollectIco} from "@/api/business/deviceMange";
import { collectTbAlarm, getTbAlarmCollectIco } from "@/api/business/OM/eventCenter";

import { listChannel } from "@/api/system/product";
import { timestampToTime } from "@/assets/js/dataFormate.js";
import index from "@/views/components/monthReport/index";
import print from "print-js";
export default {
  name: "admin",
  components: {
		index
  },
  data() {
    return {
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 参数表格数据
      adminList: [],
      // 弹出层标题
      title: "工作报告",
      // 是否显示弹出层
      open1: true,
      open2: false,
      // // 查询参数
      queryParams: {
        current: 1,
        size: 100,
        startTime:undefined,
        endTime:undefined
      },
      // 表单参数
      form: {
        startTime:undefined,
        endTime:undefined,
        companyCode:undefined,
        companyName:undefined
      },


      //单位列表 =>表单
      companyList:[

      ],
      //单位选中
      companyListSelect:{
        id:undefined,
        name:undefined,
        address:undefined
      },
      // 表单校验
      rules: {
        startTime: [
          { required: true, message: "开始日期不能为空", trigger: ["blur",'change'] }
        ],
        endTime: [
          { required: true, message: "结束日期不能为空", trigger: ["blur",'change'] }
        ],
        companyCode: [
          { required: true, message: "使用单位不能为空", trigger: ["blur",'change']}
        ],
      },

      //报表内容
      DeviceTypeCollectList:[],DeviceTypeNolingW:[],DeviceTypeNolingH:[],//设备汇总 水货离线
      waterList:{},fireList:{},//系统警告汇总
      WDataZ:[],HDataZ:[],WDataZL:[],HDataZL:[],//系统警告汇总折线图
      WDataZC:{color1:'#ed3f35',color2:'rgba(237,63,53, 0.4)',color3:'rgba(237,63,53, 0.1)'},
      z1:false,
      z2:false,
      z3:false,
      z4:false,

    };
  },
  created() {
    this.company();//初始化单位选项
  },
  methods: {
    //强制el-input刷新
    onInput(){
        this.$forceUpdate();
    },
    // 取消按钮
    cancel() {
      this.$router.push({path:'/index'});
    },
    // 表单重置
    reset() {
      this.form = {
        ids: undefined,
        name: undefined,
        topChannelName: undefined,
      };
      this.resetForm("form");
    },
    /** 打印按钮操作 */
    handleExport() {
        this.$print(this.$refs.print) // 使用
    },
    /** 公司下拉列表 */
    company(){
      listChannel(this.queryParams).then(response => {
        if(response.data.records.length>0){
          this.companyList = response.data.records.map(val =>{
            return {
              id:val.ownerId,
              name:val.ownerName,
              address:val.ownerAddress,
            }
          })
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      if(this.form.startTime){
        this.form.startTime = timestampToTime(this.form.startTime)
        this.queryParams.startTime = this.form.startTime
      }
      if(this.form.endTime){
        this.form.endTime = timestampToTime(this.form.endTime)
        this.queryParams.endTime = this.form.endTime
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.open1 = false
          this.open2 = true
          for(let i = 0; i<this.companyList.length;i++){
            if(this.companyList[i].id == this.form.companyCode){
              this.companyListSelect.id = this.companyList[i].id
              this.companyListSelect.name = this.companyList[i].name
              this.companyListSelect.address = this.companyList[i].address
              this.getList()
            }
          }
          this.company()
        }
      });
    },
    /* 报告数据 */
    getList(){
      let params = this.queryParams
      params.type = 2
      params.bigDeviceType = 2
      this.deviceTongji(params)
      this.tongji(params)
      this.zxt(params)
      setTimeout(()=>{
        params.bigDeviceType = 1
        params.isLine = 1
        this.tongji(params)
        this.zxt(params)
        this.DeviceTypeStatusTongji(params)
      },500)
      setTimeout(()=>{
        this.lxZxt(params)
      },1000)
      setTimeout(()=>{
        params.bigDeviceType = 2
        this.DeviceTypeStatusTongji(params)
        this.lxZxt(params)
      },2500)
      setTimeout(()=>{
        params.bigDeviceType = 3
        this.DeviceTypeStatusTongji(params)
      },5000)
    },
    /* 设备类型统计  以下接口参数
        type 1隐患2告警
        bigDeviceType1火系统 2 水系统 3rtu 4电气火灾 5 视频监控
        isLine 0离线 1在线*/
      deviceTongji(params){//总设备数
        DeviceTypeCollect(params).then(response =>{
          if(response.data){
            // if(params.isLine && params.isLine == 0){
            //   this.DeviceTypeCollectListNoList = response.data
            // }else{
              this.DeviceTypeCollectList = response.data
            // }
          }
        })
      },
      DeviceTypeStatusTongji(params){//离线
        DeviceTypeStatus(params).then(response =>{
          if(response.data){
            if(params.bigDeviceType == 1){
              this.DeviceTypeNolingH = response.data
            }else if(params.bigDeviceType == 2){
              this.DeviceTypeNolingW = response.data
            }
            // else{
            //   this.DeviceTypeNolingH = response.data
            // }

          }
        })
      },
      /* 告警列表统计 */
        tongji(params){
          collectTbAlarm(params).then(response =>{
            if(response.data){
              if(params.type == 2 && params.bigDeviceType == 2){
                this.waterList = response.data
              }else if(params.type == 2 && params.bigDeviceType == 1){
                this.fireList = response.data
              }
            }
          })
        },
        /* 折线图 */
        zxt(params){
          getTbAlarmCollectIco(params).then(response =>{
            let arr = []
            let data = response.data;
            let text1 = params.bigDeviceType
            let findText1 = text1 == 1 ? "火系统" : text1 == 2 ? "水系统" : text1 == 3 ? "rtu" : text1 == 4 ? "电气火灾" : "视频监控"
            let seriesData = [];
            for (let i = 0; i < data[0].list.length; i++) {
              if((data[0].list[i]).deviceTypeS == findText1){
                seriesData = {data:[],name:undefined};
                seriesData.name = findText1;
              }
              for (let a = 0; a < data.length; a++) {
                if((data[a].list[i]).deviceTypeS == findText1){
                  seriesData.data.push((data[a].list[i]).deviceCount);
                }
              }
            }
            let lineData = [];
            let date = new Date();
            for (let i = 0; i < data.length; i++) {
              // lineData.push(
              //   date.getFullYear() +
              //     "-" +
              //     Number(date.getMonth() + 1) +
              //     "-" +
              //     data[i].time
              // );
              lineData.push(
                  data[i].time
              );
            }
            arr.push(seriesData,lineData)
            if(params.type == 2 && params.bigDeviceType == 2){
                this.WDataZ = arr
                setTimeout(()=>{
                  this.z1 = true
                },1)
            }else if(params.type == 2 && params.bigDeviceType == 1){
              this.HDataZ = arr
              setTimeout(()=>{
                this.z2 = true
              },1)
            }
          })
        },
        /* 离线设备折线图 */
        lxZxt(params){
          DeviceTypeStatusCollectIco(params).then(response =>{
            let arr = []
            let data = response.data;
            let text1 = params.bigDeviceType
            let findText1 = text1 == 1 ? "火系统" : text1 == 2 ? "水系统" : text1 == 3 ? "rtu" : text1 == 4 ? "电气火灾" : "视频监控"
            let seriesData = [];
            for (let i = 0; i < data[0].list.length; i++) {
              if((data[0].list[i]).deviceTypeS == findText1){
                seriesData = {data:[],name:undefined};
                seriesData.name = findText1;
              }
              for (let a = 0; a < data.length; a++) {
                if((data[a].list[i]).deviceTypeS == findText1){
                  seriesData.data.push((data[a].list[i]).deviceCount);
                }
              }
            }
            let lineData = [];
            let date = new Date();
            for (let i = 0; i < data.length; i++) {
              lineData.push(

                  data[i].time
              );
            }
            arr.push(seriesData,lineData)
            if( params.bigDeviceType == 2){
                this.WDataZL = arr
                this.z3 = true
            }else if(params.bigDeviceType == 1){
                this.HDataZL = arr
                this.z4 = true
            }
          })
        }


  }
};
</script>
<style lang="scss" scoped>

  ::-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;
  }
</style>