传感器监测-图表添加

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

@@ -8,8 +8,7 @@
         <template v-else-if="activeKey == '1' && deviceType">
           <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :dataSource="dataSource"
             design-scope="device_monitor" :isShowPagination="false" :isShowActionColumn="true" title="设备监测"
-            :form-config="deviceType =='safetymonitor' ? formConfig : undefined"
-            :scroll="scroll">
+            :form-config="deviceType == 'safetymonitor' ? formConfig : undefined" :scroll="scroll">
             <template #filterCell="{ column, record }">
               <template v-if="deviceType.startsWith('gate')">
                 <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
@@ -71,29 +70,62 @@
             </template>
           </MonitorTable>
         </template>
+        <!-- 图表 -->
+        <div style="width:100%;height:280px;margin: 20px 0px;">
+          <BarAndLine v-if="deviceType == 'windrect'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
+            :chartsColumns="chartsColumnsRect" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else-if="deviceType == 'fanlocal'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
+            :chartsColumns="chartsColumnsFan" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else-if="deviceType == 'fanmain'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
+            :chartsColumns="chartsColumnsMain" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else-if="deviceType == 'fiber'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
+            :chartsColumns="chartsColumnsFiber" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else-if="deviceType == 'obfurage'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
+            :chartsColumns="chartsColumnsObf" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else-if="deviceType == 'bundletube'" xAxisPropType="strname" :dataSource="dataSource"
+            height="100%" :chartsColumns="chartsColumnsBun" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else xAxisPropType="strname" :dataSource="dataSource" height="100%"
+            :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
+        </div>
+
       </a-tab-pane>
       <a-tab-pane key="2" tab="历史数据">
         <div class="tab-item">
           <HistoryTable ref="historyTable" v-if="activeKey == '2'" :columns-type="`${deviceType}`"
-            :device-type="deviceType"
-            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
-            designScope="device-history" :scroll="scroll" />
+            :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
+            designScope="device-history" :scroll="scroll" @change="changeHis" />
+        </div>
+        <!-- 图表 -->
+        <div v-if="alive" style="width:100%;height:280px;margin: 20px 0px;">
+
+          <BarAndLine v-if="deviceType == 'windrect'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
+            height="100%" :chartsColumns="chartsColumnsRect" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else-if="deviceType == 'fanlocal'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
+            height="100%" :chartsColumns="chartsColumnsFan" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else-if="deviceType == 'fanmain'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
+            height="100%" :chartsColumns="chartsColumnsMain" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else-if="deviceType == 'fiber'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
+            height="100%" :chartsColumns="chartsColumnsFiber" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else-if="deviceType == 'obfurage'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
+            height="100%" :chartsColumns="chartsColumnsObf" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else-if="deviceType == 'bundletube'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
+            height="100%" :chartsColumns="chartsColumnsBun" chartsType="" :option="echartsOption" />
+          <BarAndLine v-else xAxisPropType="gdevicename" :dataSource="dataSourceHis" height="100%"
+            :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
         </div>
       </a-tab-pane>
       <a-tab-pane key="3" tab="报警历史">
         <div class="tab-item">
           <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" columns-type="alarm"
-            :device-type="deviceType"
-            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })" :scroll="scroll"
-            designScope="alarm-history" />
+            :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
+            :scroll="scroll" designScope="alarm-history" />
         </div>
       </a-tab-pane>
       <a-tab-pane key="4" tab="操作历史" v-if="deviceType !== 'safetymonitor'">
         <div class="tab-item">
-          <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'"
-            columns-type="operatorhistory" :device-type="deviceType"
-            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })" :scroll="scroll"
-            designScope="operator-history" />
+          <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" columns-type="operatorhistory"
+            :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
+            :scroll="scroll" designScope="operator-history" />
         </div>
       </a-tab-pane>
     </a-tabs>
@@ -101,7 +133,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, shallowRef, defineProps } from 'vue'
+import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, nextTick } from 'vue'
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
 import { list, getDeviceList } from './safety.api'
 import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
 import HistoryTable from '../comment/HistoryTable.vue';
@@ -110,9 +143,24 @@ import MonitorTable from '../comment/MonitorTable.vue';
 import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
 import { Progress } from 'ant-design-vue';
 import { useRouter } from 'vue-router';
-import { formConfig } from './safety.data'
+import { formConfig, chartsColumnsreal, chartsColumnsRect, chartsColumnsFan, chartsColumnsMain, chartsColumnsFiber, chartsColumnsObf, chartsColumnsBun } from './safety.data'
+
+
 // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
 
+const echartsOption = {
+  grid: {
+    top: '60px',
+    left: '10px',
+    right: '25px',
+    bottom: '5%',
+    containLabel: true,
+  },
+  toolbox: {
+    feature: {},
+  },
+};
+let alive = ref(true)
 
 type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
 
@@ -124,7 +172,7 @@ const props = defineProps({
 })
 
 const scroll = {
-  y: 1000
+  y: 360
 }
 const monitorTable = ref()
 const historyTable = ref()
@@ -137,14 +185,27 @@ const activeKey = ref('1'); // tab key
 const dataSource = shallowRef([]) // 实时监测数据
 const deviceType = ref('') // 监测设备类型
 
+let dataSourceHis = shallowRef([])//历史数据
+
+//历史数据
+async function changeHis(data) {
+  alive.value = false
+  nextTick(() => {
+    dataSourceHis = data
+    alive.value = true
+
+  })
+
+}
+
 async function tabChange(activeKeyVal) {
   activeKey.value = activeKeyVal;
-  if(activeKey.value != '1'){
+  if (activeKey.value != '1') {
     if (timer != undefined) {
       clearTimeout(timer);
       timer = undefined;
     }
-  }else{
+  } else {
     timer = null
     await getMonitor(true)
   }
@@ -161,7 +222,7 @@ function getMonitor(flag?) {
         if (timer) {
           getMonitor();
         }
-      }, flag ? 0: 1000);
+      }, flag ? 0 : 1000);
     }
   }
 };
@@ -174,7 +235,7 @@ async function getDataSource() {
       const readData = data.readData;
       return Object.assign(data, readData);
     });
-  }else{
+  } else {
     dataSource.value = []
   }
 }
@@ -206,6 +267,7 @@ onUnmounted(() => {
   margin-top: 20px;
   display: flex;
   justify-content: center;
+
   .tabs-box {
     width: calc(100% - 12px) !important;
     bottom: 3px !important;
@@ -364,58 +426,70 @@ onUnmounted(() => {
   background-color: #ffffff11;
   overflow-y: auto;
 }
+
 :deep(.@{ventSpace}-tabs-card) {
   .@{ventSpace}-tabs-tab {
     background: linear-gradient(#2cd1ff55, #1eb0ff55);
     border-color: #74e9fe;
     border-radius: 0%;
+
     &:hover {
       color: #64d5ff;
     }
   }
+
   .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
     color: aqua;
   }
+
   .@{ventSpace}-tabs-nav::before {
     border-color: #74e9fe;
   }
+
   .@{ventSpace}-picker,
   .@{ventSpace}-select-selector {
     width: 100% !important;
     background: #00000017 !important;
     border: 1px solid @vent-form-item-boder !important;
+
     input,
     .@{ventSpace}-select-selection-item,
     .@{ventSpace}-picker-suffix {
       color: #fff !important;
     }
+
     .@{ventSpace}-select-selection-placeholder {
       color: #b7b7b7 !important;
     }
   }
+
   .@{ventSpace}-pagination-next,
   .action,
   .@{ventSpace}-select-arrow,
   .@{ventSpace}-picker-separator {
     color: #fff !important;
   }
+
   .@{ventSpace}-table-cell-row-hover {
     background: #264d8833 !important;
   }
+
   .@{ventSpace}-table-row-selected {
-    background: #00c0a311  !important;
+    background: #00c0a311 !important;
+
     td {
       background-color: #00000000 !important;
     }
   }
+
   .@{ventSpace}-table-thead {
     // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-    background: #3d9dd45d!important;
+    background: #3d9dd45d !important;
 
-    & > tr > th,
+    &>tr>th,
     .@{ventSpace}-table-column-title {
       // color: #70f9fc !important;
-      border-color: #84f2ff  !important;
+      border-color: #84f2ff !important;
       border-left: none !important;
       border-right: none !important;
       padding: 7px;
@@ -423,20 +497,21 @@ onUnmounted(() => {
   }
 
   .@{ventSpace}-table-tbody {
-    tr > td {
+    tr>td {
       padding: 12px;
     }
   }
-  .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
+
+  .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
     background-color: #26648855 !important;
   }
 
   .jeecg-basic-table-row__striped {
+
     // background: #97efff11 !important;
     td {
       background-color: #97efff11 !important;
     }
   }
 }
-
 </style>

src/views/vent/monitorManager/safetyMonitor/safety.data.ts

@@ -35,3 +35,195 @@ export const formConfig = {
   ],
 };
 
+//测风装置
+export const chartsColumnsRect = [
+  {
+    legend: '风量',
+    seriesName: '(m³/min)',
+    ymax: 10000,
+    yname: 'm³/min',
+    linetype: 'bar',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'm3',
+  },
+  {
+    legend: '气源压力',
+    seriesName: '(MPa)',
+    ymax: 50,
+    yname: 'MPa',
+    linetype: 'line',
+    yaxispos: 'right',
+    color: '#FC4327',
+    sort: 2,
+    xRotate: 0,
+    dataIndex: 'sourcePressure',
+  },
+];
+
+//局部风机
+export const chartsColumnsFan = [
+  {
+    legend: '风筒风量1',
+    seriesName: '(m³/min)',
+    ymax: 1000,
+    yname: 'm³/min',
+    linetype: 'bar',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'windQuantity1',
+  },
+  {
+    legend: '风筒风量2',
+    seriesName: '(m³/min)',
+    ymax: 1000,
+    yname: 'm³/min',
+    linetype: 'line',
+    yaxispos: 'right',
+    color: '#FC4327',
+    sort: 2,
+    xRotate: 0,
+    dataIndex: 'windQuantity2',
+  },
+];
+//主风
+export const chartsColumnsMain = [
+  {
+    legend: '风量',
+    seriesName: '(m³/min)',
+    ymax: 1000,
+    yname: 'm³/min',
+    linetype: 'bar',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'windQuantity1',
+  },
+  {
+    legend: '频率',
+    seriesName: '(Hz)',
+    ymax: 1000,
+    yname: 'Hz',
+    linetype: 'line',
+    yaxispos: 'right',
+    color: '#FC4327',
+    sort: 2,
+    xRotate: 0,
+    dataIndex: 'windQuantity2',
+  },
+];
+//光钎测温
+export const chartsColumnsFiber = [
+  {
+    legend: '最高温度',
+    seriesName: '(°C)',
+    ymax: 100,
+    yname: '°C',
+    linetype: 'bar',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'fmax',
+  },
+  {
+    legend: '平均温度',
+    seriesName: '(°C)',
+    ymax: 100,
+    yname: '°C',
+    linetype: 'line',
+    yaxispos: 'right',
+    color: '#FC4327',
+    sort: 2,
+    xRotate: 0,
+    dataIndex: 'favg',
+  },
+];
+//密闭
+export const chartsColumnsObf = [
+  {
+    legend: '温度',
+    seriesName: '(°C)',
+    ymax: 100,
+    yname: '°C',
+    linetype: 'bar',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'temperature',
+  },
+  {
+    legend: 'O2浓度',
+    seriesName: '(%)',
+    ymax: 100,
+    yname: '%',
+    linetype: 'line',
+    yaxispos: 'right',
+    color: '#FC4327',
+    sort: 2,
+    xRotate: 0,
+    dataIndex: 'o2val',
+  },
+];
+
+//束管
+
+export const chartsColumnsBun = [
+  {
+    legend: 'CO浓度',
+    seriesName: '(%)',
+    ymax: 100,
+    yname: '%',
+    linetype: 'bar',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'coval',
+  },
+  {
+    legend: 'CO2浓度',
+    seriesName: '(%)',
+    ymax: 100,
+    yname: '%',
+    linetype: 'line',
+    yaxispos: 'right',
+    color: '#FC4327',
+    sort: 2,
+    xRotate: 0,
+    dataIndex: 'co2val',
+  },
+];
+
+export const chartsColumnsreal = [
+  {
+    legend: '压差',
+    seriesName: '(Pa)',
+    ymax: 100,
+    yname: 'Pa',
+    linetype: 'bar',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'frontRearDP',
+  },
+  {
+    legend: '气源压力',
+    seriesName: '(MPa)',
+    ymax: 50,
+    yname: 'MPa',
+    linetype: 'line',
+    yaxispos: 'right',
+    color: '#FC4327',
+    sort: 2,
+    xRotate: 0,
+    dataIndex: 'sourcePressure',
+  },
+];