主风机故障诊断-更新

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

@@ -0,0 +1,187 @@
+<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>{{ `${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 :deviceId="deviceID" :deviceType="deviceType" :Type="'tempZw'" :addData="selectData.tempzw"  :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>
+        </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>
+        </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>
+        </div>
+      </div>
+       <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>
+        </div>
+      </div>
+       <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>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { 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 $emit = defineEmits(['handlerClose'])
+
+
+//弹窗关闭
+function handleCancel() {
+  $emit('handlerClose', false)
+}
+
+watch(() => props.isShowModal, (newV, oldV) => {
+  visible.value = newV
+})
+
+watch(() => props.rightColumns, (newV, oldV) => {
+  if (newV.length) {
+    let dataList: any[] = []
+    console.log(newV, 'new===')
+    newV.forEach((el) => {
+      if (el.dataIndex.startsWith('Fan')) {
+        if (props.warningMonitorRowIndex == 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') {
+          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') {
+          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=newV.length - dataList.length
+    console.log(dataList, 'dataList===')
+  }
+}, { 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>

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

@@ -0,0 +1,296 @@
+<template>
+  <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" />
+      <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" />
+      <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
+          }}</a-select-option>
+      </a-select>
+    </div>
+    <div ref="echartline" class="echart-line"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs';
+import { ref, reactive, onMounted, nextTick, watch } from 'vue'
+import * as echarts from 'echarts';
+import { listdays } from '../main.api'
+
+let props = defineProps({
+  deviceId: {
+    type: String
+  },
+  deviceType: {
+    type: String
+  },
+  Type: {
+    type: String
+  },
+  addData: {
+    type: String
+  },
+  legendName: {
+    type: String
+  },
+  echartColor:{
+    type:String
+  }
+})
+
+let skipOption = ref<any[]>([
+  { label: '1秒', value: '1' },
+  { label: '5秒', value: '2' },
+  { label: '10秒', value: '3' },
+  { label: '30秒', value: '4' },
+  { label: '1分钟', value: '5' },
+  { label: '10分钟', value: '6' },
+  { label: '30分钟', value: '7' },
+  { label: '1小时', value: '8' },
+  { label: '1天', value: '9' },
+])
+let historyParams = reactive({
+  skip: '8',
+  startTime: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
+  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+  interval: '1h',
+})
+let echartline = ref(null)
+let xData = ref<any[]>([])
+let yData = ref<any[]>([])
+
+function changeStart(val){
+  historyParams.startTime=val
+  getData()
+}
+function changeEnd(val){
+  historyParams.endTime=val
+  getData()
+}
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(echartline.value);
+    let option = {
+      grid: {
+        top: '22%',
+        left: '5%',
+        bottom: '13%',
+        right: '5%',
+        //   containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+      },
+      legend: {
+        align: 'left',
+        right: 'center',
+        top: '10',
+        type: 'plain',
+        textStyle: {
+          color: '#7ec7ff',
+          fontSize: 14,
+        },
+        // icon:'rect',
+        itemGap: 25,
+        itemWidth: 18,
+        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+        data: [
+          {
+            name: props.legendName,
+          },
+        ],
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            // formatter: '{value}',
+            fontSize: 14,
+            margin: 20,
+            textStyle: {
+              color: '#b3b8cc',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(48, 98, 162,.4)',
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          data: xData.value,
+        },
+      ],
+      yAxis: [
+        {
+          boundaryGap: false,
+          type: 'value',
+          // max: props.maxY,
+          // min: props.minY,
+          axisLabel: {
+            textStyle: {
+              color: '#b3b8cc',
+            },
+            formatter: '{value}',
+          },
+          name: '',
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 10,
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(48, 98, 162,.4)',
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(48, 98, 162,.4)',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: props.legendName,
+          type: 'line',
+          smooth: true,
+          symbol: 'none',
+          zlevel: 3,
+          itemStyle: {
+            color: props.echartColor,
+            borderColor: props.echartColor,
+          },
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: props.echartColor,
+            },
+          },
+          data: yData.value,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+async function getData() {
+  let res = await listdays({ ttime_begin: historyParams.startTime, ttime_end: historyParams.endTime, strtype: props.deviceType, gdeviceid: props.deviceId, skip: historyParams.skip, pageSize: 100, pageNo: 1 })
+  let data = res.datalist.records
+  xData.value = res.xlist
+  if (props.Type == 'tempZw') {
+    yData.value = data.map(el => el.readData.tempzw)
+  } else if (props.Type == 'tempDj') {
+    yData.value = data.map(el => el.readData.tempDj)
+  } else if (props.Type == 'Dl') {
+    yData.value = data.map(el => el.readData.dl)
+  } else if (props.Type == 'Dy') {
+    yData.value = data.map(el => el.readData.dy)
+  } else if (props.Type == 'jxzd') {
+    yData.value = data.map(el => el.readData.jxzd)
+  } else if (props.Type == 'czzd') {
+    yData.value = data.map(el => el.readData.czzd)
+  }
+  getOption()
+}
+
+watch(() => props.addData, (newV, oldV) => {
+  if (yData.value.length) {
+    yData.value.push(newV)
+    yData.value.shift()
+  }
+  getOption()
+})
+onMounted(() => {
+  getData()
+})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+.faultEchartLine {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.box-search {
+  width: 100%;
+  height: 30px;
+}
+
+.echart-line {
+  width: 100%;
+  height: calc(100% - 30px);
+}
+
+.@{ventSpace}-picker {
+  background: #00000017 !important;
+  border: 1px solid @vent-form-item-border !important;
+
+  input,
+  .@{ventSpace}-select-selection-item,
+  .@{ventSpace}-picker-suffix {
+    color: #fff !important;
+  }
+
+  .@{ventSpace}-select-selection-placeholder {
+    color: #b7b7b7 !important;
+  }
+}
+
+.@{ventSpace}-picker-separator {
+  color: #fff !important;
+}
+
+:deep(.@{ventSpace}-select-dropdown) {
+  color: #000 !important;
+
+  .@{ventSpace}-select-item {
+    color: #000 !important;
+  }
+}
+
+:deep(.@{ventSpace}-picker-input > input) {
+  color: #fff !important;
+}
+
+:deep(.@{ventSpace}-picker-suffix) {
+  color: #fff !important;
+}
+
+:deep(.@{ventSpace}-select-selector) {
+  color: #fff !important;
+  background: #00000017 !important;
+  border: 1px solid @vent-form-item-border !important;
+}
+
+:deep(.@{ventSpace}-select-arrow) {
+  color: #fff !important;
+}
+</style>

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

@@ -0,0 +1,110 @@
+<template>
+  <div ref="faultPie" class="faultPie"></div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue'
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  //正常测点
+  normalNum: {
+    type: Number
+  },
+  //异常测点
+  abnormalNum: {
+    type: Number
+  }
+})
+let faultPie = ref(null)
+
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(faultPie.value);
+    let option = {
+      tooltip: {
+        trigger: "item",
+        formatter: "{b} : {c}",
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+      },
+
+      // 图例移到右边（竖排）
+      legend: {
+        right: 'center',
+        top: "bottom",
+        type: 'plain',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        // icon:'rect',
+        itemGap: 10,
+        itemWidth: 10,
+        // icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+      },
+
+      series: [
+        {
+          name: "",
+          type: "pie",
+          radius: ["50%", "75%"],
+          center: ["50%", "47%"],  // ⭐ 为让位图例，整体饼图左移
+          label: {
+            color: "#fff",
+            fontSize: 12,
+            show: false
+          },
+
+          data: [
+            {
+              name: '正常测点',
+              value: props.normalNum || 0,
+              itemStyle: {
+                borderRadius: 10, // ⭐ 扇形圆角
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                  { offset: 0, color: '#14ee59' },
+                  { offset: 1, color: '#14ee59' },
+                ]),
+                shadowBlur: 18,
+                shadowColor: "rgba(0,0,0,0.25)",
+              },
+            },
+            {
+              name: '异常测点',
+              value: props.abnormalNum || 0,
+              itemStyle: {
+                borderRadius: 10, // ⭐ 扇形圆角
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                  { offset: 0, color: '#f20707' },
+                  { offset: 1, color: '#f20707' },
+                ]),
+                shadowBlur: 18,
+                shadowColor: "rgba(0,0,0,0.25)",
+              },
+            }
+          ],
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+onMounted(() => {
+  getOption()
+})
+</script>
+
+<style lang="less" scoped>
+.faultPie {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/vent/monitorManager/mainFanMonitor/main.api.ts

@@ -14,6 +14,7 @@ enum Api {
   pointMonitor = '/monitor/onedevice',
   getFaultDiagnosis = '/monitor/getFaultDiagnosis',
   exportMonitorData = '/ventanaly-device/monitor/exportDeviceMonitorData',
+  listdays = '/safety/ventanalyMonitorData/listdays'
 }
 /**
  * 导出api
@@ -46,6 +47,11 @@ export const pathList = (params) => defHttp.get({ url: Api.pathList, params });
  */
 export const deviceList = (params) => defHttp.get({ url: Api.deviceList, params });
 
+/**
+ * 历史数据
+ */
+export const listdays = (params) => defHttp.get({ url: Api.listdays, params });
+
 // 风机曲线方程
 export const lineList = (params) => defHttp.get({ url: Api.lineList, params });