zmc
2023-10-12 f3acb8ce787f3df0eda633031473be4e6a9ff448
src/views/ExceedingFume.vue
@@ -20,8 +20,9 @@
        <el-button
          type="primary"
          plain
          @click="showTable"
          style="margin-left: 20px"
          :loading="button.queryButton"
          @click="showTable"
          >查询</el-button
        >
@@ -44,7 +45,7 @@
      </div>
      <div style="display: flex; justify-content: right; margin-right: 40px">
        <span class="collapse-header-text">
          静安区 {{ beginTime }} —— {{ endTime }} 油烟检测异常信息汇总</span
          静安区 {{ beginTime }} —— {{ endTime }} 油烟监测异常信息汇总</span
        >
      </div>
      <br />
@@ -93,15 +94,20 @@
                <div class="box-card-label">
                  <el-scrollbar>
                    <span class="box-card-label">店铺数量:</span>
                    <span class="box-card-label">异常店铺占比:</span>
                    <span style="font-size: 20px"
                      >{{ exception0.length }} /{{ shopsTotal }}</span
                      >{{ exception0.length }} /{{ shopsTotal }}
                      </span
                    >
                    <span style="margin-left: 150px; font-size: 14px">
                      占比:{{
                        ((exception0.length / shopsTotal) * 100).toFixed(1)
                      }}%</span
                    <span style="font-size: 17px">
                      ({{
                        ((exception0.length/shopsTotal)*100).toFixed(1)
                      }}%)</span
                    >
                    {{  shopsTotal}}
                    <span class="right-text">
                      异常数占比:{{  ((exception0Num/exceptionAllNum) * 100).toFixed(1) }}%
                    </span>
                  </el-scrollbar>
                </div>
@@ -148,15 +154,18 @@
                </div>
                <div class="box-card-label">
                  <el-scrollbar>
                    <span class="box-card-label">店铺数量:</span>
                    <span class="box-card-label">异常店铺占比:</span>
                    <span style="font-size: 20px"
                      >{{ exception1.length }} /{{ shopsTotal }}</span
                    >
                    <span style="margin-left: 150px; font-size: 14px">
                      占比:{{
                        ((exception1.length / shopsTotal) * 100).toFixed(1)
                      }}%</span
                    <span style="font-size: 17px">
                      ({{
                        ((exception1.length/shopsTotal)*100).toFixed(1)
                      }}%)</span
                    >
                    <span class="right-text">
                      异常数占比:{{  ((exception1Num/exceptionAllNum) * 100).toFixed(1) }}%
                    </span>
                  </el-scrollbar>
                </div>
@@ -199,20 +208,23 @@
                      margin-top: 5px;
                      margin-left: 4px;
                    "
                    >掉线</span
                    >联网异常</span
                  >
                </div>
                <div class="box-card-label">
                  <el-scrollbar>
                    <span class="box-card-label">店铺数量:</span>
                    <span class="box-card-label">异常店铺占比:</span>
                    <span style="font-size: 20px"
                      >{{ exception2.length }} /{{ shopsTotal }}</span
                    >
                    <span style="margin-left: 150px; font-size: 14px">
                      占比:{{
                        ((exception2.length / shopsTotal) * 100).toFixed(1)
                      }}%</span
                    <span style="font-size: 17px">
                      ({{
                        (((exception2.length)/shopsTotal)*100).toFixed(1)
                      }}%)</span
                    >
                    <span class="right-text">
                      异常数占比:{{ connectException  }}%
                    </span>
                  </el-scrollbar>
                </div>
                <hr />
@@ -251,6 +263,7 @@
  <el-card class="table-page" v-show="!isNoData">
    <el-table
      ref="tableH"
      size="small"
      v-loading="loading"
      :data="displayData"
      style="width: 100%"
@@ -259,7 +272,7 @@
      :cell-class-name="tableCellClassName"
 
    >
      <el-table-column prop="diName" label="店铺名称">
      <el-table-column prop="diName" label="店铺名称" align="center">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.diName">
            <div class="cell ellipsis">{{ row.diName }}</div>
@@ -267,7 +280,7 @@
        </template>
      </el-table-column>
      <el-table-column prop="devId" label="设备编号">
      <el-table-column prop="devId" label="设备编号" align="center">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.devId">
            <div class="cell ellipsis">{{ row.devId }}</div>
@@ -275,21 +288,30 @@
        </template>
      </el-table-column>
      <el-table-column prop="exception" label="异常分类">
      <el-table-column prop="diSupplier" label="供应商" align="center">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.diSupplier">
            <div class="cell ellipsis">{{ row.diSupplier }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="exception" label="异常分类" align="center">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.exception">
            <div class="cell ellipsis">{{ row.exception }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="异常类型">
      <el-table-column label="异常类型" align="center">
        <template #default="{ row }">
          <span v-if="row.exceptionType == '0'">油烟数据超标</span>
          <span v-else-if="row.exceptionType == '1'">疑似供电异常</span>
          <span v-else-if="row.exceptionType == '2'">掉线</span>
        </template>
      </el-table-column>
      <el-table-column prop="region" label="地区">
      <el-table-column prop="region" label="地区" align="center">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.region">
            <div class="cell ellipsis">{{ row.region }}</div>
@@ -297,21 +319,21 @@
        </template>
      </el-table-column>
      <el-table-column prop="beginTime" label="开始时间">
      <el-table-column prop="beginTime" label="开始时间" align="center">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.beginTime">
            <div class="cell ellipsis">{{ row.beginTime }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间">
      <el-table-column prop="endTime" label="结束时间" align="center">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.endTime">
            <div class="cell ellipsis">{{ row.endTime }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作">
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            type="primary"
@@ -349,6 +371,7 @@
            {{ rowEndTime }}
          </div>
        </div>
        <div class="dialog-button-position">
          <el-button
            type="danger"
@@ -387,6 +410,7 @@
      <ExceptionTypeLineChart
        :option="option"
        :is-open-dialog="centerDialogVisible"
        v-loading="chartLoading"
      ></ExceptionTypeLineChart>
      <!--  -->
@@ -397,13 +421,25 @@
          border
          style="margin-top: 25px"
        >
          <el-table-column fixed prop="diName" label="店铺名称" />
          <el-table-column prop="mvStatCode" label="设备编号" />
          <el-table-column prop="mvDataTime" label="采集时间" />
         <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
          fixed
          :index="indexMethod"
        ></el-table-column>
          <el-table-column fixed prop="diName" label="店铺名称"  show-overflow-tooltip/>
          <el-table-column prop="mvStatCode" label="设备编号" align="center" show-overflow-tooltip/>
          <el-table-column prop="diSupplier" label="供应商" align="center" show-overflow-tooltip/>
          <el-table-column prop="mvDataTime" label="采集时间" align="center" show-overflow-tooltip/>
          <el-table-column
            prop="mvFumeConcentration2"
            label="油烟浓度(mg/m³)"
            align="center"
            show-overflow-tooltip
          />
        </el-table>
      </div>
@@ -428,6 +464,7 @@
import ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';
import ExceptionText from '../sfc/ExceptionText.vue';
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
import axiosInstanceInstance from '../utils/request.js';
@@ -451,6 +488,11 @@
  },
  data() {
    return {
      exception0Num:0,
      exception1Num:0,
      exception2Num:0,
      // 折线图加载中
      chartLoading:false,
      button:{
        // 查询按钮
        queryButton:false,
@@ -498,7 +540,8 @@
      rowEndTime: '',
      // 异常的设备编号
      rowMvStatCode: '',
      // 供应商
      rowDiSupplier:'',
      // 表格的一行数据
      rowTable: [],
      //拼接的所有数据
@@ -610,7 +653,21 @@
      window.addEventListener('resize', this.updateChart);
    }
  },
  computed:{
    exceptionAllNum(){
      let sum = this.exception0Num+this.exception1Num+this.exception2Num
      return sum == 0?1:sum
    },
    connectException(){
      let sum = this.exception0Num+this.exception1Num+this.exception2Num
      if(sum == 0){
        return 0
      }
      else{
        return (100 - ((exception0Num/sum) * 100) - ((exception1Num/sum) * 100)).toFixed(1)
      }
    }
  },
  mounted() {
    // 从接口获取店铺名称 给级联下拉框
    this.getDeviceInfo();
@@ -622,9 +679,15 @@
    window.addEventListener('resize', this.updateChart);
  },
  methods: {
    // 功能:对话框表格序号递增
    // 时间:2023-8-17
    indexMethod(index) {
      return index + 1 ;
    },
    // 功能:改变表格某个单元格的颜色
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
     if(columnIndex == 3){
     if(columnIndex == 4){
        if (row.exceptionType == '0') {
          return 'exceeding-row';
        } else if (row.exceptionType == '1') {
@@ -770,6 +833,7 @@
      this.rowBeginTime = this.displayData[index].beginTime;
      this.rowEndTime = this.displayData[index].endTime;
      this.rowMvStatCode = this.displayData[index].devId;
      this.rowDiSupplier = this.displayData[index].diSupplier
    },
    //功能: 供电异常和掉线时的表格数据
@@ -786,6 +850,7 @@
        this.exceedingData.push({
          mvStatCode: this.rowMvStatCode,
          diName: this.rowShopName,
          diSupplier:this.rowDiSupplier,
          mvDataTime: abnormalTimeTenMinute[i],
          mvFumeConcentration2: ''
        });
@@ -806,7 +871,7 @@
    getNextRowData() {
      // 不是表格的第一行
      if (this.selectedRowIndex !== 0) {
        // 设置上下条按钮不可点击
        // 点击过程中 锁住上下条按钮  在设置完图形配置项后解锁
        this.banTouch = 1
        //得到上一行数据索引
@@ -833,22 +898,16 @@
            this.drawChartTest();
            this.exceptionTotal = this.exceedingData.length;
            this.button.afterButton = false
            this.banTouch = 0
          });
      }
      // //表格的第一行,则上一条无数据
      // else {
      //   console.log(null);
      // }
    },
    // 获取获取表格下一行数据
    getPreviousRowData() {
      // 不是表格的第一行
      if (this.selectedRowIndex < this.displayData.length - 1) {
        // 设置上下条按钮不可点击
        // 点击过程中 锁住上下条按钮  在设置完图形配置项后解锁
        this.banTouch = 1
        //得到上一行数据索引
@@ -876,15 +935,8 @@
            this.drawChartTest();
            this.exceptionTotal = this.exceedingData.length;
            this.button.preButton = false
            this.banTouch = 0
          });
      }
      //表格的第一行,则上一条无数据
      // else {
      //   console.log(null);
      // }
    },
    // ‘查看详情’ 弹出框部分
@@ -910,6 +962,7 @@
      if (this.drawerData.endTime) {
        params['endTime'] = this.drawerData.endTime;
      }
      axiosInstanceInstance
        .get('/fume/exceed', { params: params })
        .then((response) => {
@@ -943,6 +996,7 @@
      }
      this.loading = true;
      this.button.queryButton = true
      axiosInstanceInstance
        .get('/fume/abnormalthree', { params: params })
        .then((response) => {
@@ -1296,6 +1350,7 @@
          ]
        };
      }
      this.banTouch = 0
    },
    // 功能:点击 ‘查看详情’, ‘下一条’按钮时会 先逻辑计算。最后展示图形
@@ -1329,6 +1384,8 @@
        beforeAndAfterTime[2]
      );
      // 折线图加载中效果
      this.chartLoading = true
      // 请求前半段
      axiosInstanceInstance
        .get('/fume/history', { params: paramsBefore })
@@ -1445,6 +1502,7 @@
                  endIndex
                );
              }
              this.chartLoading = false
            });
        });
    },
@@ -1543,6 +1601,41 @@
        .then((result) => {
          this.exception2 = result.data.data;
        });
        /* 异常数量 */
        axiosInstanceInstance
        .get('/fume/exceptionnum', {
          params: {
            exceptionType: '0',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception0Num = result.data.data;
        });
        axiosInstanceInstance
        .get('/fume/exceptionnum', {
          params: {
            exceptionType: '1',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception1Num = result.data.data;
        });
        axiosInstanceInstance
        .get('/fume/exceptionnum', {
          params: {
            exceptionType: '2',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception2Num = result.data.data;
        });
    },
    // 页面加载时默认展示7天异常表数据
@@ -1553,7 +1646,7 @@
      params['beginTime'] = this.beginTime;
      params['endTime'] = this.endTime;
      axiosInstanceInstance
        .get('/fume/abnormalone', { params: params })
        .get('/fume/abnormalthree', { params: params })
        .then((response) => {
          if (response.data.data.length == 0) {
            ElMessage('该时段无数据');
@@ -1639,9 +1732,16 @@
  font-size: 14px;
  white-space: nowrap;
}
.right-text {
  /* float :right; */
  /* text-align: right; */
  margin-left:80px;
}
:deep().el-card {
  border-radius: 9px;
}
/* ‘查看详情’ 的弹出框高度调整 */
:deep().el-dialog {
  height: 98%;
@@ -1719,10 +1819,6 @@
.el-table {
  color: #000000;
}
/* 表格的内边距 */
:deep().el-table .el-table__cell {
  padding: 2px;
}