1. 修复飞行巡检模块中有效率异常详情弹出框无法正常显示的bug； 2.优化各异常类型的折线图配置项生成逻辑；

riku

2024-01-05 72085226bc9f82a9129b8fbcd17fab1edf9ef270

 src/views/exception/components/CompDialogDetail.vue

@@ -6,16 +6,19 @@
import index from '@/utils/exception_common_function/index.js'
import DustLineChart from '@/views/exception/components/DustLineChart.vue'
import historyApi from '@/api/historyApi.js'
import exceptionProxy from '../exceptionProxy'

export default {
  props: {
    // 表格的一行数据
    row: {
      type: Object,
      default: {}
      default: () => {
        return {}
      }
    },
    // 对话框是否显示
    dialogTableVisible: {
    visible: {
      type: Boolean,
      default: false
    }
@@ -23,21 +26,11 @@
  components: {
    DustLineChart
  },
  emits: ['update:dialogTableVisible'],
  computed: {
    dialogTableVisible: {
      get() {
        return this.dialogTableVisible
      },
      set(value) {
        this.$emit('update:dialogTableVisible', value)
      }
    }
  },
  emits: ['update:visible'],
  watch: {
    row: {
      handler(newValue) {
        this.display()
        this.display(newValue)
      },
      deep: true
    }
@@ -57,27 +50,30 @@
        lineChart: false
      },


      // 标记位
      flag: {
        // 数据加载时 上下条按钮不能再点击
        banTouch: 0,
        banTouch: 0
      },

      isPreCantouch:false,
      isNextCantouch:false

    }
  },

  mounted() {},
  methods: {
    display() {
    dialogChange(value) {
      this.$emit('update:visible', value)
    },
    async display(row) {
      // 折线图加载中效果
      this.loading.lineChart = true
      // 表格数据
      this.getExceptionTableDataByCurrenrRow(this.row)
      await this.getExceptionTableDataByCurrenrRow(row)

      // 折线图数据
      this.setLineChart(this.row)
      await this.setLineChart(row)
    },

    /**
@@ -116,14 +112,10 @@
      const beforeAndAfterTime = index.before45AndAfter45(beginTime, endTime)
      // 请求整段时间段的颗粒物浓度数据
     

      // 对请求回的数据进行划分
      const chartParams = await this.organizeLineChartsOptionParams(beforeAndAfterTime, this.row)
      this.lineChartOption = exceptionOption.setExceptionChartOption(chartParams)

      this.lineChartOption = exceptionOption.setExceptionChartOption2(chartParams)
    },



    /**
     * 构建折线图的配置项的参数
@@ -134,9 +126,6 @@
      time_point,
      { name, beginTime, endTime, exception, exceptionType }
    ) {
      // 折线图加载中效果
      this.loading.lineChart = true

      // 请求整段颗粒物浓度的数据
      const response = await historyApi.queryHistoryData({
        siteName: name,
@@ -162,9 +151,12 @@
      xData = timeAndValue['xAxis']
      yData = timeAndValue['yAxis']

      // 提取异常起始时间点在整个区间内的数据索引
      let beginIndex = xData.findIndex((item) => item === beginTime)
      let endIndex = xData.findIndex((item) => item === endTime)
      const exceptionArea = exceptionProxy.getExceptionArea(
        beginTime,
        endTime,
        this.historyData,
        exceptionType
      )

      this.flag.banTouch = 0
      this.loading.lineChart = false
@@ -173,13 +165,8 @@
      return {
        xData,
        yData,
        exceptionBeginTime: beginTime,
        exceptionEndTime: endTime,
        beginIndex,
        endIndex,
        exceptionArea,
        exceptionName: exception,
        areaObj: '',
        lineColor: '',
        exceptionType
      }
    },
@@ -199,9 +186,12 @@
          mnCode: mnCode,
          dutyCompany: dutyCompany,
          lst: abnormalTimeTenMinute[i],
          yData: ''
          dustValue: ''
        })
      }
    },
    tableRowClassName({ row }) {
      return row.flag == 'N' ? 'normal-row' : 'abnormal-row'
    }
  }
}
@@ -210,14 +200,14 @@
<template>
  <el-dialog
    class="exception-dialog"
    v-model="dialogTableVisible"
    :model-value="visible"
    @open="dialogChange(true)"
    @close="dialogChange(false)"
    draggable
    align-center
    height="700px"
    width="700px"
  >


    <!-- 头 -->
    <template #header>
      <div class="diag-head">
@@ -231,7 +221,6 @@
          </div>
        </div>
      </div>
      

      <!-- <div class="chart-jump-button">
        <el-button
@@ -249,17 +238,20 @@
          >下条异常</el-button
        >
      </div> -->


    </template>


    <!-- 图形 -->
    <DustLineChart :option="lineChartOption" v-loading="loading.lineChart"></DustLineChart>

    <!-- 表格 -->
    <div>
      <el-table :data="historyData" size="default" height="200" border>
      <el-table
        :data="historyData"
        size="default"
        height="200"
        border
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          type="index"
          label="序号"
@@ -269,7 +261,7 @@
        ></el-table-column>

        <el-table-column prop="lst" label="采集时间" align="center" show-overflow-tooltip />
        <el-table-column prop="yData" label="TSP(mg/m³)" align="center" show-overflow-tooltip />
        <el-table-column prop="dustValue" label="TSP(mg/m³)" align="center" show-overflow-tooltip />
        <el-table-column prop="flag" label="数据标识" align="center" show-overflow-tooltip />
      </el-table>
    </div>
@@ -299,13 +291,18 @@
        >
      </div>
    </template>


  </el-dialog>
</template>

<style scoped>
<style>
/* 查看详情对话框模块的样式 */
.el-table .normal-row {
}

.el-table .abnormal-row {
  /* background-color: var(--el-color-danger-light-5); */
  color: var(--el-color-danger);
}

.diag-head {
  /* 对话框头部区域 */