mky-vent-base/src/views/vent/monitorManager/fanLocalMonitor/components/deviceFaultDetailModal.vue

<template>
  <a-modal v-model:visible="visible" width="1200px" :title="title" centered destroyOnClose :footer="null"
    @cancel="handleCancel">
    <div class="basic-top">
      <div class="top-l">
        <faultEchartPie :normalNum="normalNum" :abnormalNum="abnormalNum"></faultEchartPie>
      </div>
      <div class="top-r">
        <div class="basic-title">异常测点信息</div>
        <div class="list-r">
          <div class="list-item" v-for="(item, index) in faultList" :key="index">
            <span style="margin-right: 5px;">{{ `${index + 1}.` }}</span>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="basic-bot">
      <div class="basic-content">
        <div class="basic-title">风速监测曲线</div>
        <div class="echart-box">
          <faultEchartLine :selectData="selectData" :warningMonitorRowIndex="warningMonitorRowIndex"
            :deviceId="deviceID" :deviceType="deviceType" :Type="'windSpeed'" :addData="windsValue" :legendName="'风速'"
            :echartColor="'#ff0000'"></faultEchartLine>
        </div>
      </div>
      <div class="basic-content">
        <div class="basic-title">风量监测曲线</div>
        <div class="echart-box">
          <faultEchartLine :selectData="selectData" :warningMonitorRowIndex="warningMonitorRowIndex"
            :deviceId="deviceID" :deviceType="deviceType" :Type="'wind'" :addData="windValue" :legendName="'风量'"
            :echartColor="'#2ec1dd'"></faultEchartLine>
        </div>
      </div>
      <div class="basic-content">
        <div class="basic-title">电流监测曲线</div>
        <div class="echart-box">
          <faultEchartLine :selectData="selectData" :warningMonitorRowIndex="warningMonitorRowIndex"
            :deviceId="deviceID" :deviceType="deviceType" :Type="'Dl'" :addData="dlValue" :legendName="'电流'"
            :echartColor="'#fbc21c'">
          </faultEchartLine>
        </div>
      </div>
      <div class="basic-content">
        <div class="basic-title">电压监测曲线</div>
        <div class="echart-box">
          <faultEchartLine :selectData="selectData" :warningMonitorRowIndex="warningMonitorRowIndex"
            :deviceId="deviceID" :deviceType="deviceType" :Type="'Dy'" :addData="dyValue" :legendName="'电压'"
            :echartColor="'#259745'">
          </faultEchartLine>
        </div>
      </div>
      <div class="basic-content">
        <div class="basic-title">瓦斯浓度监测曲线</div>
        <div class="echart-box">
          <faultEchartLine :selectData="selectData" :warningMonitorRowIndex="warningMonitorRowIndex"
            :deviceId="deviceID" :deviceType="deviceType" :Type="'wsnd'" :addData="wsndValue" :legendName="'瓦斯浓度'"
            :echartColor="'#0fcb74'">
          </faultEchartLine>
        </div>
      </div>
      <div class="basic-content">
        <div class="basic-title">振动监测曲线</div>
        <div class="echart-box">
          <faultEchartLine :selectData="selectData" :warningMonitorRowIndex="warningMonitorRowIndex"
            :deviceId="deviceID" :deviceType="deviceType" :Type="'Zd'" :addData="zdValue" :legendName="'振动'"
            :echartColor="'#00a9ff'">
          </faultEchartLine>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import faultEchartPie from './faultEchartPie.vue'
import faultEchartLine from './faultEchartLine.vue'

let props = defineProps({
  //是否显示弹窗
  isShowModal: {
    type: Boolean
  },
  //当前激活风机索引
  warningMonitorRowIndex: {
    type: Number
  },
  rightColumns: {
    type: Array as any
  },
  selectData: {
    type: Object as any
  },
  deviceID: {
    type: String
  },
  deviceType: {
    type: String
  }
})

let visible = ref(false)
let title = ref('风机故障诊断分析')
let faultList = ref<any[]>([])//异常信息列表
let normalNum = ref(0)//正常测点数量
let abnormalNum = ref(0)//

let windsValue = computed(() => {
  return {
    y: props.warningMonitorRowIndex == 0 ? props.selectData['Fan1WindSpeed'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2WindSpeed'] : '',
    x: props.selectData['tTime'].substring(props.selectData['tTime'].lastIndexOf(' '))
  }
}) //实时风速
let windValue = computed(() => {
  return {
    y: props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Wind'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Wind'] : '',
    x: props.selectData['tTime'].substring(props.selectData['tTime'].lastIndexOf(' '))
  }

}) //实时风量
let dlValue = computed(() => {
  return {
    y: props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Dl'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Dl'] : '',
    x: props.selectData['tTime'].substring(props.selectData['tTime'].lastIndexOf(' '))
  }

}) //实时电流
let dyValue = computed(() => {
  return {
    y: props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Dy'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Dy'] : '',
    x: props.selectData['tTime'].substring(props.selectData['tTime'].lastIndexOf(' '))
  }

}) //实时电压
let wsndValue = computed(() => {
  return {
    y: props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Wsnd'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Wsnd'] : '',
    x: props.selectData['tTime'].substring(props.selectData['tTime'].lastIndexOf(' '))
  }

}) //实时瓦斯浓度
let zdValue = computed(() => {
  return {
    y: props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Zd'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Zd'] : '',
    x: props.selectData['tTime'].substring(props.selectData['tTime'].lastIndexOf(' '))
  }

}) //实时振动

let $emit = defineEmits(['handlerClose'])


//弹窗关闭
function handleCancel() {
  $emit('handlerClose', false)
}

watch(() => props.isShowModal, (newV, oldV) => {
  visible.value = newV
})

watch(() => props.warningMonitorRowIndex, (newV, oldV) => {
  // if (props.rightColumns.length) {
  //   let dataList: any[] = []
  //   props.rightColumns.forEach((el) => {
  //     if (el.dataIndex.startsWith('Fan')) {
  //       if (newV == 0 && props.selectData[el.dataIndex.replace('Fan', 'Fan1')] != undefined) {
  //         dataList.push({ label: el.title })
  //       } else if (newV == 1 && props.selectData[el.dataIndex.replace('Fan', 'Fan2')] != undefined && props.selectData[el.dataIndex.replace('Fan', 'Fan2')] != '0') {
  //         dataList.push({ label: el.title })
  //       } else if (newV == 2 && props.selectData[el.dataIndex.replace('Fan', 'Fan3')] != undefined && props.selectData[el.dataIndex.replace('Fan', 'Fan3')] != '0') {
  //         dataList.push({ label: el.title })
  //       }
  //     } else {
  //       if (props.selectData[el.dataIndex] != undefined && props.selectData[el.dataIndex] != '0') {
  //         dataList.push({ label: el.title })
  //       }
  //     }
  //   })
  //   faultList.value = dataList
  //   abnormalNum.value = dataList.length
  //   normalNum.value = props.rightColumns.length - dataList.length
  //   console.log(dataList, 'dataList===')
  // }
  if (newV == 0) {
    faultList.value = [
      { label: '2025年7月12日,风速超限' },
      { label: '2025年7月21日,风量波动' },
      { label: '2025年8月4日,轴温偏高' },
      { label: '2025年8月17日,径向振动过大' },
      { label: '2025年8月23日,油温高' },
      { label: '2025年8月26日,电机故障' },
    ]
  } else if (newV == 1) {
    faultList.value = [
      { label: '2025年8月2日,风速超限' },
      { label: '2025年8月11日,振动过高' },
      { label: '2025年8月24日,轴温偏高' },
      { label: '2025年9月17日,径向振动过大' },
      { label: '2025年9月23日,油温高' },
      { label: '2025年9月26日,蝶阀故障' },
    ]
  } else {
    faultList.value = [
      { label: '2025年8月2日,风门故障' },
      { label: '2025年8月11日,风量波动' },
      { label: '2025年8月24日,轴温偏高' },
      { label: '2025年9月17日,径向振动过大' },
      { label: '2025年9月23日,变频故障反馈' },
      { label: '2025年9月26日,电机故障' },
    ]
  }
  abnormalNum.value = faultList.value.length
  normalNum.value = Math.ceil(Math.random() * 10)
}, { immediate: true })
</script>

<style lang="less" scoped>
.basic-top {
  width: calc(100% - 30px);
  height: 220px;
  margin: 10px;
  display: flex;

  .top-l {
    width: 320px;
    margin-right: 10px;
  }

  .top-r {
    width: calc(100% - 330px);
  }

  .list-r {
    height: calc(100% - 25px);
    padding: 0px 10px;
    box-sizing: border-box;
    overflow-y: auto;
    border: 1px solid #3062a2;
  }

  .list-item {
    margin: 5px 0px;
  }
}

.basic-title {
  height: 20px;
  line-height: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.basic-bot {
  width: calc(100% - 30px);
  height: 600px;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow-y: auto;

  .basic-content {
    width: calc(50% - 5px);
    height: 240px;
    margin-bottom: 10px;
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid #3062a2;
  }

  .echart-box {
    height: calc(100% - 25px);
  }
}
</style>