主风机故障诊断详情修改-提交

src/views/vent/monitorManager/mainFanMonitor/components/deviceFaultDetailModal.vue

@@ -19,37 +19,49 @@
       <div class="basic-content">
         <div class="basic-title">轴温监测曲线</div>
         <div class="echart-box">
-          <faultEchartLine :deviceId="deviceID" :deviceType="deviceType" :Type="'tempZw'" :addData="selectData.tempzw"  :legendName="'轴温'" :echartColor="'#ff0000'"></faultEchartLine>
+          <faultEchartLine :warningMonitorRowIndex="warningMonitorRowIndex" :deviceId="deviceID"
+            :deviceType="deviceType" :Type="'tempZw'" :addData="tempzwValue" :legendName="'轴温'"
+            :echartColor="'#ff0000'"></faultEchartLine>
         </div>
       </div>
       <div class="basic-content">
         <div class="basic-title">电机温度监测曲线</div>
         <div class="echart-box">
-          <faultEchartLine :deviceId="deviceID" :deviceType="deviceType" :Type="'tempDj'" :addData="selectData.tempDj" :legendName="'电机温度'" :echartColor="'#2ec1dd'"></faultEchartLine>
+          <faultEchartLine :warningMonitorRowIndex="warningMonitorRowIndex" :deviceId="deviceID"
+            :deviceType="deviceType" :Type="'tempDj'" :addData="tempdjValue" :legendName="'电机温度'"
+            :echartColor="'#2ec1dd'"></faultEchartLine>
         </div>
       </div>
       <div class="basic-content">
         <div class="basic-title">电流监测曲线</div>
         <div class="echart-box">
-          <faultEchartLine :deviceId="deviceID" :deviceType="deviceType" :Type="'Dl'" :addData="selectData.dl" :legendName="'电流'" :echartColor="'#fbc21c'"></faultEchartLine>
+          <faultEchartLine :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 :deviceId="deviceID" :deviceType="deviceType" :Type="'Dy'" :addData="selectData.dy" :legendName="'电压'" :echartColor="'#259745'"></faultEchartLine>
+          <faultEchartLine :warningMonitorRowIndex="warningMonitorRowIndex" :deviceId="deviceID"
+            :deviceType="deviceType" :Type="'Dy'" :addData="dyValue" :legendName="'电压'" :echartColor="'#259745'">
+          </faultEchartLine>
         </div>
       </div>
-       <div class="basic-content">
+      <div class="basic-content">
         <div class="basic-title">径向振动监测曲线</div>
         <div class="echart-box">
-          <faultEchartLine :deviceId="deviceID" :deviceType="deviceType" :Type="'jxzd'" :addData="selectData.jxzd" :legendName="'径向振动'" :echartColor="'#0fcb74'" ></faultEchartLine>
+          <faultEchartLine :warningMonitorRowIndex="warningMonitorRowIndex" :deviceId="deviceID"
+            :deviceType="deviceType" :Type="'jxzd'" :addData="jxzdValue" :legendName="'径向振动'" :echartColor="'#0fcb74'">
+          </faultEchartLine>
         </div>
       </div>
-       <div class="basic-content">
+      <div class="basic-content">
         <div class="basic-title">垂直振动监测曲线</div>
         <div class="echart-box">
-          <faultEchartLine :deviceId="deviceID" :deviceType="deviceType" :Type="'czzd'" :addData="selectData.czzd" :legendName="'垂直振动'" :echartColor="'#00a9ff'"></faultEchartLine>
+          <faultEchartLine :warningMonitorRowIndex="warningMonitorRowIndex" :deviceId="deviceID"
+            :deviceType="deviceType" :Type="'czzd'" :addData="czzdValue" :legendName="'垂直振动'" :echartColor="'#00a9ff'">
+          </faultEchartLine>
         </div>
       </div>
     </div>
@@ -57,14 +69,16 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
+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
   },
@@ -74,19 +88,39 @@ let props = defineProps({
   selectData: {
     type: Object as any
   },
-  deviceID:{
-    type:String
+  deviceID: {
+    type: String
   },
-  deviceType:{
-    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 faultList = ref<any[]>([])//异常信息列表
+let normalNum = ref(0)//正常测点数量
+let abnormalNum = ref(0)//
+
+let tempzwValue = computed(() => {
+  return props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Tempzw'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Tempzw'] : ''
+}) //实时轴温
+let tempdjValue = computed(() => {
+  return props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Tempdj'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Tempdj'] : ''
+}) //实时电机温度
+let dlValue = computed(() => {
+  return props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Dl'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Dl'] : ''
+}) //实时电流
+let dyValue = computed(() => {
+  return props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Dy'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Dy'] : ''
+}) //实时电压
+let jxzdValue = computed(() => {
+  return props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Jxzd'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Jxzd'] : ''
+}) //实时径向振动
+let czzdValue = computed(() => {
+  return props.warningMonitorRowIndex == 0 ? props.selectData['Fan1Czzd'] : props.warningMonitorRowIndex == 1 ? props.selectData['Fan2Czzd'] : ''
+}) //实时垂直振动
+
 let $emit = defineEmits(['handlerClose'])
 
 
@@ -99,18 +133,18 @@ watch(() => props.isShowModal, (newV, oldV) => {
   visible.value = newV
 })
 
-watch(() => props.rightColumns, (newV, oldV) => {
-  if (newV.length) {
+watch(() => props.warningMonitorRowIndex, (newV, oldV) => {
+  if (props.rightColumns.length) {
     let dataList: any[] = []
     console.log(newV, 'new===')
-    newV.forEach((el) => {
+    props.rightColumns.forEach((el) => {
       if (el.dataIndex.startsWith('Fan')) {
-        if (props.warningMonitorRowIndex == 0 && props.selectData[el.dataIndex.replace('Fan', 'Fan1')] == '0') {
+        if (newV == 0 && props.selectData[el.dataIndex.replace('Fan', 'Fan1')] == '0') {
           //&& props.selectData[el.dataIndex.replace('Fan', 'Fan1')] != undefined
           dataList.push({ label: el.title })
-        } else if (props.warningMonitorRowIndex == 1 && props.selectData[el.dataIndex.replace('Fan', 'Fan2')] != undefined && props.selectData[el.dataIndex.replace('Fan', 'Fan2')] != '0') {
+        } 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 (props.warningMonitorRowIndex == 2 && props.selectData[el.dataIndex.replace('Fan', 'Fan3')] != undefined && props.selectData[el.dataIndex.replace('Fan', 'Fan3')] != '0') {
+        } 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 {
@@ -120,8 +154,8 @@ watch(() => props.rightColumns, (newV, oldV) => {
       }
     })
     faultList.value = dataList
-    abnormalNum.value=dataList.length
-    normalNum.value=newV.length - dataList.length
+    abnormalNum.value = dataList.length
+    normalNum.value = props.rightColumns.length - dataList.length
     console.log(dataList, 'dataList===')
   }
 }, { immediate: true })
@@ -171,6 +205,7 @@ watch(() => props.rightColumns, (newV, oldV) => {
   justify-content: space-between;
   flex-wrap: wrap;
   overflow-y: auto;
+
   .basic-content {
     width: calc(50% - 5px);
     height: 240px;

src/views/vent/monitorManager/mainFanMonitor/components/faultEchartLine.vue

@@ -2,9 +2,11 @@
   <div class="faultEchartLine">
     <div class="box-search">
       <a-date-picker v-model:value="historyParams.startTime" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="开始时间"
-        size="small" :showTime="true" style="position: absolute; z-index: 99; left: 0px; width: 170px; top: 2px" @change="changeStart" />
+        size="small" :showTime="true" style="position: absolute; z-index: 99; left: 0px; width: 170px; top: 2px"
+        @change="changeStart" />
       <a-date-picker v-model:value="historyParams.endTime" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="结束时间"
-        size="small" :showTime="true" style="position: absolute; z-index: 99; left: 175px; width: 170px; top: 2px" @change="changeEnd" />
+        size="small" :showTime="true" style="position: absolute; z-index: 99; left: 175px; width: 170px; top: 2px"
+        @change="changeEnd" />
       <a-select ref="select" v-model:value="historyParams.interval" placeholder="请选择间隔时间" size="small"
         style="position: absolute; z-index: 99; top: 2px; left: 350px; width: 150px">
         <a-select-option v-for="(item, index) in skipOption" :key="index" :value="item.value">{{ item.label
@@ -22,6 +24,10 @@ import * as echarts from 'echarts';
 import { listdays } from '../main.api'
 
 let props = defineProps({
+  //当前激活风机索引
+  warningMonitorRowIndex: {
+    type: Number
+  },
   deviceId: {
     type: String
   },
@@ -37,8 +43,8 @@ let props = defineProps({
   legendName: {
     type: String
   },
-  echartColor:{
-    type:String
+  echartColor: {
+    type: String
   }
 })
 
@@ -63,12 +69,12 @@ let echartline = ref(null)
 let xData = ref<any[]>([])
 let yData = ref<any[]>([])
 
-function changeStart(val){
-  historyParams.startTime=val
+function changeStart(val) {
+  historyParams.startTime = val
   getData()
 }
-function changeEnd(val){
-  historyParams.endTime=val
+function changeEnd(val) {
+  historyParams.endTime = val
   getData()
 }
 function getOption() {
@@ -202,28 +208,30 @@ async function getData() {
   let data = res.datalist.records
   xData.value = res.xlist
   if (props.Type == 'tempZw') {
-    yData.value = data.map(el => el.readData.tempzw)
+    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Tempzw) : data.map(el => el.readData.Fan2Tempzw)
   } else if (props.Type == 'tempDj') {
-    yData.value = data.map(el => el.readData.tempDj)
+    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Tempdj) : data.map(el => el.readData.Fan2Tempdj)
   } else if (props.Type == 'Dl') {
-    yData.value = data.map(el => el.readData.dl)
+    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Dl) : data.map(el => el.readData.Fan2Dl)
   } else if (props.Type == 'Dy') {
-    yData.value = data.map(el => el.readData.dy)
+    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Dy) : data.map(el => el.readData.Fan2Dy)
   } else if (props.Type == 'jxzd') {
-    yData.value = data.map(el => el.readData.jxzd)
+    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Jxzd) : data.map(el => el.readData.Fan2Jxzd)
   } else if (props.Type == 'czzd') {
-    yData.value = data.map(el => el.readData.czzd)
+    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Czzd) : data.map(el => el.readData.Fan2Czzd)
   }
   getOption()
 }
 
 watch(() => props.addData, (newV, oldV) => {
-  if (yData.value.length) {
+  if (yData.value.length>=10) {
     yData.value.push(newV)
     yData.value.shift()
+  } else {
+    yData.value.push(newV)
   }
   getOption()
-})
+}, { immediate: true })
 onMounted(() => {
   getData()
 })

src/views/vent/monitorManager/mainFanMonitor/index.vue

@@ -17,7 +17,7 @@
   <div class="scene-box" style="z-index: 999">
     <div class="title-text" style="position: absolute; z-index: 9999; width: 100%; text-align: center">{{
       selectData.supplyAirAddr || selectData.strinstallpos || selectData.stationname
-      }}</div>
+    }}</div>
 
     <div v-if="hasPermission('btn:show')" class="top-box control-group">
       <div style="width: 100%; display: flex; justify-content: center">
@@ -83,7 +83,7 @@
         </div>
       </div>
       <div class="data-item" style="margin-top: 8px">
-        <div class="item-header" @click="handlerFaultDetail">设备故障诊断与分析预警</div>
+        <div class="item-header">设备故障诊断与分析预警</div>
         <div class="item-container">
           <div class="tab">
             <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }"
@@ -96,7 +96,8 @@
               class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 2 }"
               @click="selectDevice('warningMonitorRowIndex', 2)">3#风机</div>
           </div>
-          <div class="container-group">
+          <div class="detail-btn"  @click="handlerFaultDetail">内容详情</div>
+          <div class="container-group-r">
             <div class="warning-group">
               <template v-if="deviceType">
                 <div class="warning-item" v-for="(state, index) in rightColumns" :key="index">
@@ -181,7 +182,7 @@
                       <div class="vent-margin-l-8">{{
                         selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] == '0' ? '正常' :
                           '异常'
-                        }}</div>
+                      }}</div>
                     </div>
                   </div>
                 </div>
@@ -206,7 +207,7 @@
             <div class="electric-box">
               <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">
                 {{
-                item.title }}</div>
+                  item.title }}</div>
             </div>
             <div class="fault-group">
               <template v-if="deviceType">
@@ -238,7 +239,7 @@
             <div class="electric-box">
               <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">
                 {{
-                item.title }}</div>
+                  item.title }}</div>
             </div>
             <div class="fault-group">
               <template v-if="deviceType">
@@ -558,7 +559,9 @@
   <DeviceBaseInfo @register="registerModalDeviceEdit" :device-type="selectData['deviceType']" />
   <setValueSetting @register="registerModalDeviceSet" :deviceType="deviceType" @show-set-modal="showSetModal" />
   <!-- 设备故障诊断详情 -->
-  <deviceFaultDetailModal :isShowModal="isShowModal" :warningMonitorRowIndex="warningMonitorRowIndex" :rightColumns="rightColumns" :selectData="selectData" :deviceID="currentRoute['query']['id']" :deviceType="deviceType"  @handlerClose="handlerClose"></deviceFaultDetailModal>
+  <deviceFaultDetailModal :isShowModal="isShowModal" :warningMonitorRowIndex="warningMonitorRowIndex"
+    :rightColumns="rightColumns" :selectData="selectData" :deviceID="currentRoute['query']['id']"
+    :deviceType="deviceType" @handlerClose="handlerClose"></deviceFaultDetailModal>
 </template>
 
 <script setup lang="ts">
@@ -808,8 +811,6 @@ const echatsOption = {
 
 watch(deviceType, (type) => {
   rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as [];
-  console.log('rightColumns', rightColumns.value);
-
   if (rightColumns.value && rightColumns.value.length < 1) {
     rightColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_right') as [];
   }
@@ -1713,6 +1714,24 @@ onUnmounted(() => {
   --container-group-bg: linear-gradient(to right, #007bff22, #2081ff05);
 }
 
+
+.detail-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  margin: 5px 0px;
+  background: url('@/assets/images/vent/detail-btn.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+
+.detail-btn:active {
+  background: url('@/assets/images/vent/detail-btn-active.png') no-repeat;
+  background-size: 100% 100%;
+}
+
 .faultbg {
   margin-top: 20px;
   background: url('/@/assets/images/vent/fault1.png') no-repeat;
@@ -1939,6 +1958,16 @@ onUnmounted(() => {
         overflow-y: auto;
       }
 
+      .container-group-r {
+        width: 314px;
+        margin: 0px 4px;
+        padding: 10px 0;
+        min-height: 422px;
+        background: var(--container-group-bg);
+        max-height: 430px;
+        overflow-y: auto;
+      }
+
       .container-group-l {
         .container-item {
           width: 100%;