对飞行巡检和审核辅助对话框逻辑写成组件

zmc

2023-12-08 9c1d136e4f5ed9b5bce100147edbb52486da985a

 src/views/exception/components/CompDialogDetail.vue

@@ -1,31 +1,39 @@
<!-- 点击 ”查看详细” 的对话框 -->
<!-- 上一条下一条由子组件传递给父组件，父组件监听信号 -->

<script>
import exceptionOption from '@/utils/chartFunction/exceptionOption.js'
import index from '@/utils/exception_common_function/index.js'
import DustLineChart from '@/views/exception/components/DustLineChart.vue'
import historyApi from '@/api/historyApi.js'

import lineChartFunc from '@/utils/chartFunction/lineChart.js'
import time from '@/utils/time.js'
export default {
  props: {
    // 表格的一行数据
    row: {
      type: Object,
      default: {}
      default() {
        return {}
      }
    },
    // 对话框是否显示
    dialogTableVisible: {
      type: Boolean,
      default: false
    },
    buttonDisabled: {
      type: Object,
      default() {
        return { pre: false, next: false }
      }
    }
  },
  components: {
    DustLineChart
  },
  emits: ['update:dialogTableVisible'],
  emits: ['update:dialogTableVisible', 'getPreRowData', 'getNextRowData'],
  computed: {
    dialogTableVisible: {
    visible: {
      get() {
        return this.dialogTableVisible
      },
@@ -36,7 +44,7 @@
  },
  watch: {
    row: {
      handler(newValue) {
      handler() {
        this.display()
      },
      deep: true
@@ -48,33 +56,34 @@
      historyData: [],
      //  折线图配置项
      lineChartOption: {},

      // 按钮，图形加载中
      loading: {
        // 上一条按钮
        preButton: false,
        // 下一条按钮
        afterButton: false,
        nextButton: false,
        // 折线图
        lineChart: false
      },


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

      isPreCantouch:false,
      isNextCantouch:false

      isPreCanTouch: false,
      isNextCanTouch: false
    }
  },

  mounted() {},
  methods: {
    display() {
    async display() {
      // 表格数据
      this.getExceptionTableDataByCurrenrRow(this.row)
      await this.getExceptionTableDataByCurrentRow(this.row)

      // 折线图数据
      this.setLineChart(this.row)
@@ -85,15 +94,23 @@
     * @param： 点位名称，异常开始时间，异常结束时间
     * @returns：
     */
    async getExceptionTableDataByCurrenrRow({ name, beginTime, endTime, exceptionType }) {
    async getExceptionTableDataByCurrentRow({ name, exceptionType, beginTime, endTime }) {
      if (!name || !beginTime || !endTime) {
        return
      }
      console.log('异常为', exceptionType)
      // 数据缺失异常时，构造表格数据
      if (this.exceptionType == '0') {
        this.setOfflineTbleData(this.row)
      if (exceptionType == '0') {
        this.setOfflineTableData(this.row)
        return
      }
      // 有效率异常时 设置折线图加载中效果
      if (exceptionType == '8') {
        this.loading.lineChart = true
      }

      this.loading.preButton = true
      this.loading.nextButton = true

      // 根据异常的点位名称、开始、结束时间，查询该时段的颗粒物浓度数据
      const response = await historyApi.queryHistoryData({
@@ -103,6 +120,12 @@
      })
      //  异常表格得到数据
      this.historyData = response.data.data

      this.flag.pre = false
      this.flag.next = false

      this.loading.preButton = false
      this.loading.nextButton = false
    },

    /* ***********************************************************************************  折线图 */
@@ -111,19 +134,20 @@
     * @param：
     * @returns：
     */
    async setLineChart({ beginTime, endTime }) {
    async setLineChart({ exception, exceptionType, beginTime, endTime }) {
      if (exceptionType == '8') {
        this.validProcess(this.historyData, { exception, exceptionType, beginTime, endTime })
        this.loading.lineChart = false
        return
      }
      // 计算异常区间的前后45分钟
      const beforeAndAfterTime = index.before45AndAfter45(beginTime, endTime)
      // 请求整段时间段的颗粒物浓度数据
     

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

    },



    /**
     * 构建折线图的配置项的参数
@@ -187,7 +211,7 @@
    /**
     * description：数据缺失异常时，设置的表格数据
     */
    setOfflineTbleData({ name, mnCode, dutyCompany, beginTime, endTime }) {
    setOfflineTableData({ name, mnCode, dutyCompany, beginTime, endTime }) {
      // 无数据时的时间数组 时间相差15分钟
      const abnormalTimeTenMinute = index.descFiftyTime(beginTime, endTime)

@@ -202,6 +226,65 @@
          yData: ''
        })
      }
    },
    /**
     * 有效率异常 设置折线图配置项
     * @param：
     * @returns：
     */
    validProcess(historyData, { exception, exceptionType, beginTime, endTime }) {
      // x轴数据
      let xData = time.ascTime(beginTime, endTime, 15)
      // y轴数据
      let yData = []
      xData.forEach((item) => {
        // 查找该时间的数据
        let r = lineChartFunc.findDate(historyData, item)
        if (r) {
          yData.push(r.dustValue)
        } else {
          yData.push(null)
        }
      })
      // 得到有效数据的时间点
      let DataTime = time.validTime(historyData)
      let rangeTime = time.getMissingDays(xData[0], xData[xData.length - 1], DataTime, 15)
      console.log('无数据时间', rangeTime)
      // 得到背景区间的配置
      let areaObj = lineChartFunc.getMarkArea(rangeTime, '异常')
      let lineColor = []
      // 传入参数
      this.lineChartOption = exceptionOption.setExceptionChartOption({
        xData,
        yData,
        exceptionBeginTime: beginTime,
        exceptionEndTime: endTime,
        beginIndex: '',
        endIndex: '',
        exceptionName: exception,
        areaObj,
        lineColor,
        exceptionType
      })
    },

    /**
     * 点击“上一条”
     * @param：
     * @returns：
     */
    clickPre() {
      this.flag.pre = true
      this.$emit('getPreRowData')
    },
    /**
     * 点击“下一条”
     * @param：
     * @returns：
     */
    clickNext() {
      this.flag.next = true
      this.$emit('getNextRowData')
    }
  }
}
@@ -210,14 +293,12 @@
<template>
  <el-dialog
    class="exception-dialog"
    v-model="dialogTableVisible"
    v-model="visible"
    draggable
    align-center
    height="700px"
    width="700px"
  >


    <!-- 头 -->
    <template #header>
      <div class="diag-head">
@@ -231,28 +312,25 @@
          </div>
        </div>
      </div>
      

      <!-- <div class="chart-jump-button">
      <div class="chart-jump-button">
        <el-button
          type="danger"
          :loading="loading.preButton"
          :disabled="isPreCantouch || flag.banTouch"
          @click="getNextRowData"
          :loading="flag.pre && loading.preButton"
          :disabled="buttonDisabled.pre"
          @click="clickPre"
          >上条异常</el-button
        >

        <el-button
          type="danger"
          :loading="loading.afterButton"
          :disabled="isNextCantouch || flag.banTouch"
          @click="getPreviousRowData"
          :loading="flag.next && loading.nextButton"
          :disabled="buttonDisabled.next"
          @click="clickNext"
          >下条异常</el-button
        >
      </div> -->


      </div>
    </template>


    <!-- 图形 -->
    <DustLineChart :option="lineChartOption" v-loading="loading.lineChart"></DustLineChart>
@@ -277,7 +355,7 @@
    <template #footer>
      <div class="dialog-footer">
        <el-tag type="success" class="mx-1" effect="dark" round
          ><span class="table-line-lable" v-show="row.exceptionType == '0'">缺失数据： </span>
          ><span v-show="row.exceptionType == '0'">缺失数据： </span>
          <span
            v-show="
              row.exceptionType == '1' ||
@@ -291,7 +369,7 @@
            "
            >异常数据：</span
          >
          <span class="table-line-num">{{ historyData.length }}条</span>
          <span class="table-line-num">{{ historyData?.length }}条</span>
          <span v-show="row.exceptionType == '0'"> (逻辑计算)</span>
        </el-tag>
        <el-text v-show="row.exceptionType == '8'" type="warning" class="dialog-footer-text"
@@ -299,14 +377,11 @@
        >
      </div>
    </template>


  </el-dialog>
</template>

<style scoped>
/* 查看详情对话框模块的样式 */

.diag-head {
  /* 对话框头部区域 */
  min-height: 200px;
@@ -332,9 +407,6 @@
}

.mx-1 {
  /* position: absolute;
  left: 10px;
  bottom: 10px; */
  justify-content: flex-start;
}
.dialog-footer {