mky-vent-base/src/views/vent/monitorManager/mainFanMonitor/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" />
      </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; color: #f50707">{{ `${index + 1}.` }}</span>
            <span style="color: #f50707">{{ 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="'tempZw'"
            :addData="tempzwValue"
            :legendName="'轴温'"
            :echartColor="'#ff0000'"
          />
        </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="'tempDj'"
            :addData="tempdjValue"
            :legendName="'电机温度'"
            :echartColor="'#2ec1dd'"
          />
        </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'"
          />
        </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'"
          />
        </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="'jxzd'"
            :addData="jxzdValue"
            :legendName="'径向振动'"
            :echartColor="'#0fcb74'"
          />
        </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="'czzd'"
            :addData="czzdValue"
            :legendName="'垂直振动'"
            :echartColor="'#00a9ff'"
          />
        </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 tempzwValue = computed(() => {
    return {
      y: props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Tempzw'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Tempzw'] : '',
      x: props.selectData['tTime'].substring(props.selectData['tTime'].lastIndexOf(' ')),
    };
  }); //实时轴温
  let tempdjValue = computed(() => {
    return {
      y: props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Tempdj'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Tempdj'] : '',
      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 jxzdValue = computed(() => {
    return {
      y: props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Jxzd'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Jxzd'] : '',
      x: props.selectData['tTime'].substring(props.selectData['tTime'].lastIndexOf(' ')),
    };
  }); //实时径向振动
  let czzdValue = computed(() => {
    return {
      y: props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Czzd'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Czzd'] : '',
      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年8月13日  14:25:37   供风不足，疑似矿井阻力异常' },
          { label: '2025年8月13日  15:05:30  径向振动幅度增大，疑似轴承故障' },
        ];
      } else if (newV == 1) {
        faultList.value = [
          { label: '2025年8月13日  14:25:37   供风不足，疑似矿井阻力异常' },
          { label: '2025年8月13日  15:05:30  径向振动幅度增大，疑似轴承故障' },
        ];
      } else {
        faultList.value = [
          { label: '2025年8月13日  14:25:37   供风不足，疑似矿井阻力异常' },
          { label: '2025年8月13日  15:05:30  径向振动幅度增大，疑似轴承故障' },
        ];
      }
      abnormalNum.value = faultList.value.length;
      normalNum.value = 45;
    },
    { immediate: true }
  );
</script>

<style lang="less" scoped>
  .basic-top {
    width: calc(100% - 30px);
    height: 200px;
    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: 400px;
    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>