Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/views/system/user/user.data.ts

@@ -299,7 +299,6 @@ export const formSchema: FormSchema[] = [
     componentProps: {
       dictCode: 'districtTeam',
       placeholder: '请选择区队',
-      stringToNumber: true,
     },
   },
   {

src/views/vent/gas/gasPipeNet/gasPipeNet.api.ts

@@ -1,100 +1,24 @@
 import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
-  addGasMainApproval = '/ventanaly-jingtaifengliang/productionApprovalController/addGasMainApproval',
-  addGasMainpipesystem = '/ventanaly-jingtaifengliang/productionApprovalController/addGasMainpipesystem',
-  addGasPumpstation = '/ventanaly-jingtaifengliang/productionApprovalController/addGasPumpstation',
-  deleteGasMain = '/ventanaly-jingtaifengliang/productionApprovalController/deleteGasMain',
-  deleteGasMainpipesystem = '/ventanaly-jingtaifengliang/productionApprovalController/deleteGasMainpipesystem',
-  deleteGasPumpstation = '/ventanaly-jingtaifengliang/productionApprovalController/deleteGasPumpstation',
-  getGasMainAllInfo = '/ventanaly-jingtaifengliang/productionApprovalController/getGasMainAllInfo',
-  getGasMainpipesystemAllInfo = '/ventanaly-jingtaifengliang/productionApprovalController/getGasMainpipesystemAllInfo',
-  getGasPumpstationAllInfo = '/ventanaly-jingtaifengliang/productionApprovalController/getGasPumpstationAllInfo',
-  updateGasMain = '/ventanaly-jingtaifengliang/productionApprovalController/updateGasMain',
-  updateGasMainpipesystem = '/ventanaly-jingtaifengliang/productionApprovalController/updateGasMainpipesystem',
-  updateGasPumpstation = '/ventanaly-jingtaifengliang/productionApprovalController/updateGasPumpstation',
+  list = '/monitor/system',
+  baseList = '/safety/ventanalyManageSystem/list',
+  deviceList = '/safety/ventanalyManageSystem/linkdevicelist',
 }
-
-// const addGasMainApproval = (data) => {
-//   return defHttp.post({
-//     url: Api.addGasMainApproval,
-//     params: data,
-//   });
-// };
-
-// const addGasMainpipesystem = (data) => {
-//   return defHttp.post({
-//     url: Api.addGasMainpipesystem,
-//     params: data,
-//   });
-// };
-
-// const addGasPumpstation = (data) => {
-//   return defHttp.post({
-//     url: Api.addGasPumpstation,
-//     params: data,
-//   });
-// };
-
-export const deleteGasMain = (data) => {
-  return defHttp.post({
-    url: Api.deleteGasMain,
-    params: data,
-  });
-};
-
-export const deleteGasMainpipesystem = (data) => {
-  return defHttp.post({
-    url: Api.deleteGasMainpipesystem,
-    params: data,
-  });
-};
-
-export const deleteGasPumpstation = (data) => {
-  return defHttp.post({
-    url: Api.deleteGasPumpstation,
-    params: data,
-  });
-};
-
-export const getGasMainAllInfo = (data) => {
-  return defHttp.post({
-    url: Api.getGasMainAllInfo,
-    params: data,
-  });
-};
-
-export const getGasMainpipesystemAllInfo = (data) => {
-  return defHttp.post({
-    url: Api.getGasMainpipesystemAllInfo,
-    params: data,
-  });
-};
-
-export const getGasPumpstationAllInfo = (data) => {
-  return defHttp.post({
-    url: Api.getGasPumpstationAllInfo,
-    params: data,
-  });
-};
-
-export const updateGasMain = (data) => {
-  return defHttp.post({
-    url: data.id ? Api.updateGasMain : Api.addGasMainApproval,
-    params: data,
-  });
-};
-
-export const updateGasMainpipesystem = (data) => {
-  return defHttp.post({
-    url: data.id ? Api.updateGasMainpipesystem : Api.addGasMainpipesystem,
-    params: data,
-  });
-};
-
-export const updateGasPumpstation = (data) => {
-  return defHttp.post({
-    url: data.id ? Api.updateGasPumpstation : Api.addGasPumpstation,
-    params: data,
-  });
-};
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });
+
+/**
+ * 关联设备列表接口
+ * @param params
+ */
+export const deviceList = (params) => defHttp.get({ url: Api.deviceList, params });

src/views/vent/gas/gasPipeNet/index.vue

@@ -26,9 +26,49 @@
       <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 175, scroll, 0)">
         <DvBorderBox8 class="dv_border_8 p-5px" :dur="5" :style="{ height: `${scroll.y + 128}px` }">
           <a-tabs class="tabs-box" v-model:activeKey="activeKey">
-            <a-tab-pane key="1" tab="瓦斯管道监测"> <GasPipeTable :deviceType="deviceType" :dataSource="[]" :scroll="scroll" /> </a-tab-pane>
+            <a-tab-pane key="1" tab="瓦斯管道监测">
+              <GasPipeTable :scroll="scroll" @locate="goLocation($event)" />
+            </a-tab-pane>
             <!-- <a-tab-pane key="2" tab="瓦斯网络解算" disabled> 1212312312313321 </a-tab-pane> -->
-            <a-tab-pane key="3" tab="管道阀门监控"> <GasPipeTable :deviceType="deviceType" :dataSource="[]" :scroll="scroll" /> </a-tab-pane>
+            <a-tab-pane key="3" tab="管道阀门监控">
+              <MonitorTable
+                ref="monitorTable"
+                columnsType="gasvalve_monitor"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="true"
+                :isShowSelect="false"
+                title="设备监测"
+                :scroll="{ y: scroll.y - 30 }"
+              >
+                <template #action="{ record }">
+                  <TableAction
+                    :actions="{
+                      label: '定位',
+                      onClick: goLocation.bind(null, record),
+                    }"
+                  />
+                </template>
+                <template #filterCell="{ column, record }">
+                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
+                    {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+                  >
+                  <template v-else-if="column.dataIndex === 'warnLevel'">
+                    <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
+                    <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
+                    <a-tag v-else-if="record.warnLevel == '103'" color="#FF5812">较大风险</a-tag>
+                    <a-tag v-else-if="record.warnLevel == '104'" color="#FF5812">重大风险</a-tag>
+                    <a-tag v-else-if="record.warnLevel == '201'" color="#FF0000">报警</a-tag>
+                    <a-tag v-else-if="record.warnLevel == '10000'" color="#FF5812">数据超限</a-tag>
+                    <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
+                    <a-tag v-else color="green">正常</a-tag>
+                  </template>
+                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                    record.netStatus == '0' ? '断开' : '连接'
+                  }}</a-tag>
+                </template>
+              </MonitorTable>
+            </a-tab-pane>
           </a-tabs>
         </DvBorderBox8>
       </div>
@@ -39,16 +79,73 @@
 <script setup lang="ts">
   import CustomHeader from '/@/components/vent/customHeader.vue';
   import { setDivHeight } from '/@/utils/event';
-  import { ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
   import ModuleCommon from '../../home/configurable/components/ModuleCommon.vue';
   import { moduleConfigs } from './gasPipeNet.data';
   import GasPipeTable from '../../monitorManager/comment/GasPipeTable.vue';
+  import MonitorTable from '../../monitorManager/comment/MonitorTable.vue';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getTableList, list } from './gasPipeNet.api';
+  import { get } from 'lodash-es';
+  import { getActions } from '/@/qiankun/state';
+  import { TableAction } from '/@/components/Table';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
 
   const scroll = ref<{ x: true; y: number }>({ x: true, y: 202 });
   const activeKey = ref('1');
-  const deviceType = 'gaspipe';
+
+  const dataSource = ref<any[]>([]);
+
+  // 查询关联设备列表
+  async function getDataSource() {
+    const data = await list({ devicetype: 'gasvalve', pagetype: 'normal' });
+    dataSource.value = get(data, 'msgTxt[0].datalist', []).map((e) => {
+      return {
+        ...e,
+        ...e.readData,
+      };
+    });
+  }
+
+  async function getDeviceList(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'all' });
+
+    const result = res.msgTxt;
+    const deviceArr: DeviceType[] = [];
+    result.forEach((item) => {
+      const data = item['datalist'].forEach((data: any) => {
+        const readData = data.readData;
+        Object.assign(data, readData);
+      });
+      if (item.type != 'sys') {
+        deviceArr.unshift({
+          deviceType: item.type,
+          deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+          datalist: data,
+        });
+      }
+    });
+    dataSource.value = deviceArr;
+  }
+
+  async function getSysDataSource() {
+    const res = await getTableList({ strtype: 'sys_gaspipenet', pagetype: 'normal' });
+
+    getDeviceList(get(res, 'records[0].id', ''));
+  }
+
+  const actions = getActions();
+  function goLocation(record) {
+    // debugger;
+    actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
+  }
+
+  onMounted(() => {
+    getSysDataSource();
+    getDataSource();
+  });
 </script>
 
 <style scoped lang="less">

src/views/vent/monitorManager/alarmMonitor/common/echartLine.vue

@@ -5,340 +5,340 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, ref, nextTick, reactive, watch } from 'vue';
-import * as echarts from 'echarts';
+  import { defineProps, ref, nextTick, reactive, watch } from 'vue';
+  import * as echarts from 'echarts';
 
-let props = defineProps({
-  echartDataGq: {
-    type: Object,
-  },
-  maxY: {
-    type: Number,
-  },
-  minY:{
-    type: Number,
-  },
-  echartDw: {
-    type: String,
-  },
-  echartDw1: {
-    type: String,
-  },
-  gridV: {
-    type: Object,
-    default: () => {
-      return {
-        top: '15%',
-        left: '2%',
-        bottom: '6%',
-        right: '2%',
-        containLabel: true,
-      };
+  let props = defineProps({
+    echartDataGq: {
+      type: Object,
     },
-  },
-  // //报警历史交点坐标
-  // pointHisWarnData:{
-  //   type:Object,
-  //   default:()=>{
-  //     return {}
-  //   }
-  // }
-});
-//获取dom元素节点
-let line = ref<any>();
-let echartDataGqs = reactive({});
-watch(
-  () => props.echartDataGq,
-  (data) => {
-    echartDataGqs = Object.assign({}, data);
-    getOption();
-  },
-  { immediate: true, deep: true }
-);
-function getOption() {
-  nextTick(() => {
-    let myChart = echarts.init(line.value);
-    let option = {
-      grid: props.gridV,
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: 'rgba(0, 0, 0, .6)',
-        textStyle: {
-          color: '#fff',
-          fontSize: 12,
-        },
+    maxY: {
+      type: Number,
+    },
+    minY: {
+      type: Number,
+    },
+    echartDw: {
+      type: String,
+    },
+    echartDw1: {
+      type: String,
+    },
+    gridV: {
+      type: Object,
+      default: () => {
+        return {
+          top: '15%',
+          left: '35',
+          bottom: '6%',
+          right: '2%',
+          containLabel: true,
+        };
       },
-      legend: {
-        align: 'left',
-        right: 'center',
-        top: '-20',
-        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: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
-          },
-          {
-            name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
-          },
-          {
-            name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
-          },
-          {
-            name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
+    },
+    // //报警历史交点坐标
+    // pointHisWarnData:{
+    //   type:Object,
+    //   default:()=>{
+    //     return {}
+    //   }
+    // }
+  });
+  //获取dom元素节点
+  let line = ref<any>();
+  let echartDataGqs = reactive({});
+  watch(
+    () => props.echartDataGq,
+    (data) => {
+      echartDataGqs = Object.assign({}, data);
+      getOption();
+    },
+    { immediate: true, deep: true }
+  );
+  function getOption() {
+    nextTick(() => {
+      let myChart = echarts.init(line.value);
+      let option = {
+        grid: props.gridV,
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 0, 0, .6)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
           },
-        ],
-      },
-      xAxis: [
-        {
-          type: 'category',
-          boundaryGap: false,
-          axisLabel: {
-            // formatter: '{value}',
+        },
+        legend: {
+          align: 'left',
+          right: 'center',
+          top: '-20',
+          type: 'plain',
+          textStyle: {
+            color: '#7ec7ff',
             fontSize: 14,
-            margin: 20,
-            textStyle: {
-              color: '#b3b8cc',
+          },
+          // 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: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
+            },
+            {
+              name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
             },
-            formatter: function (params) {
-              let newParamsName = ref(''); // 最终拼接成的字符串
-              let paramsNameNumber = ref(params.length); // 实际标签的个数
-              let provideNumber = ref(10); // 每行能显示的字的个数
-              let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value); // 换行的话，需要显示几行，向上取整
-              /**
-               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-               */
-              // 条件等同于rowNumber>1
-              if (paramsNameNumber.value > provideNumber.value) {
-                /** 循环每一行,p表示行 */
-                for (var p = 0; p < rowNumber; p++) {
-                  var tempStr = ''; // 表示每一次截取的字符串
-                  var start = p * provideNumber.value; // 开始截取的位置
-                  var end = start + provideNumber.value; // 结束截取的位置
-                  // 此处特殊处理最后一行的索引值
-                  if (p == rowNumber - 1) {
-                    // 最后一次不换行
-                    tempStr = params.substring(start, paramsNameNumber.value);
-                  } else {
-                    // 每一次拼接字符串并换行
-                    tempStr = params.substring(start, end) + '\n';
+            {
+              name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
+            },
+            {
+              name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
+            },
+          ],
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisLabel: {
+              // formatter: '{value}',
+              fontSize: 14,
+              margin: 20,
+              textStyle: {
+                color: '#b3b8cc',
+              },
+              formatter: function (params) {
+                let newParamsName = ref(''); // 最终拼接成的字符串
+                let paramsNameNumber = ref(params.length); // 实际标签的个数
+                let provideNumber = ref(10); // 每行能显示的字的个数
+                let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value); // 换行的话，需要显示几行，向上取整
+                /**
+                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+                 */
+                // 条件等同于rowNumber>1
+                if (paramsNameNumber.value > provideNumber.value) {
+                  /** 循环每一行,p表示行 */
+                  for (var p = 0; p < rowNumber; p++) {
+                    var tempStr = ''; // 表示每一次截取的字符串
+                    var start = p * provideNumber.value; // 开始截取的位置
+                    var end = start + provideNumber.value; // 结束截取的位置
+                    // 此处特殊处理最后一行的索引值
+                    if (p == rowNumber - 1) {
+                      // 最后一次不换行
+                      tempStr = params.substring(start, paramsNameNumber.value);
+                    } else {
+                      // 每一次拼接字符串并换行
+                      tempStr = params.substring(start, end) + '\n';
+                    }
+                    newParamsName.value += tempStr; // 最终拼成的字符串
                   }
-                  newParamsName.value += tempStr; // 最终拼成的字符串
+                } else {
+                  // 将旧标签的值赋给新标签
+                  newParamsName.value = params;
                 }
-              } else {
-                // 将旧标签的值赋给新标签
-                newParamsName.value = params;
-              }
-              //将最终的字符串返回
-              return newParamsName.value;
+                //将最终的字符串返回
+                return newParamsName.value;
+              },
             },
-          },
-          axisLine: {
-            lineStyle: {
-              // color: 'rgba(14, 53, 95)',
-              color: '#244a94',
+            axisLine: {
+              lineStyle: {
+                // color: 'rgba(14, 53, 95)',
+                color: '#244a94',
+              },
             },
-          },
-          splitLine: {
-            show: false,
-            //   lineStyle: {
-            //     color: '#243753',
-            //   },
-          },
-          axisTick: {
-            show: false,
-          },
-          data: echartDataGqs.xData ? echartDataGqs.xData : [],
-        },
-      ],
-      yAxis: [
-        {
-          boundaryGap: false,
-          type: 'value',
-          max: props.maxY,
-          min:props.minY,
-          axisLabel: {
-            textStyle: {
-              color: '#b3b8cc',
+            splitLine: {
+              show: false,
+              //   lineStyle: {
+              //     color: '#243753',
+              //   },
             },
-            formatter: '{value}',
-          },
-          name: props.echartDw,
-          nameTextStyle: {
-            color: '#fff',
-            fontSize: 12,
-            lineHeight: 10,
-          },
-          splitLine: {
-            lineStyle: {
-              // color: 'rgba(14, 53, 95)',
-              color: '#0d2973',
+            axisTick: {
+              show: false,
             },
+            data: echartDataGqs.xData ? echartDataGqs.xData : [],
           },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              // color: 'rgba(14, 53, 95)',
-              color: '#244a94',
+        ],
+        yAxis: [
+          {
+            boundaryGap: false,
+            type: 'value',
+            max: props.maxY,
+            min: props.minY,
+            axisLabel: {
+              textStyle: {
+                color: '#b3b8cc',
+              },
+              formatter: '{value}',
+            },
+            name: props.echartDw,
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 12,
+              lineHeight: 10,
+            },
+            splitLine: {
+              lineStyle: {
+                // color: 'rgba(14, 53, 95)',
+                color: '#0d2973',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                // color: 'rgba(14, 53, 95)',
+                color: '#244a94',
+              },
+            },
+            axisTick: {
+              show: false,
             },
           },
-          axisTick: {
-            show: false,
-          },
-        },
-        // {
-        //   boundaryGap: false,
-        //   type: 'value',
-        //   max: props.maxY,
-        //   min:props.minY,
-        //   axisLabel: {
-        //     textStyle: {
-        //       color: '#b3b8cc',
-        //     },
-        //     formatter: '{value}',
-        //   },
-        //   name: props.echartDw1,
-        //   nameTextStyle: {
-        //     color: '#fff',
-        //     fontSize: 12,
-        //     lineHeight: 10,
-        //   },
-        //   splitLine: {
-        //     lineStyle: {
-        //       color: 'rgba(14, 53, 95)',
-        //     },
-        //   },
-        //   axisLine: {
-        //     show: true,
-        //     lineStyle: {
-        //       color: 'rgba(14, 53, 95)',
-        //     },
-        //   },
-        //   axisTick: {
-        //     show: false,
-        //   },
-        // },
-      ],
-      series: [
-        {
-          name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
-          type: 'line',
-
-          // markPoint: {
-          //   symbol: 'circle',
-          //   data: [
-          //     {
-          //       coord: [345.44, 94250.0],
-          //       name: '交点',
+          // {
+          //   boundaryGap: false,
+          //   type: 'value',
+          //   max: props.maxY,
+          //   min:props.minY,
+          //   axisLabel: {
+          //     textStyle: {
+          //       color: '#b3b8cc',
           //     },
-
-          //   ],
-          //   symbolSize: 10,
-          //   itemStyle: {
-          //     color: '#19a3df',
-          //     borderColor: '#a3c8d8',
+          //     formatter: '{value}',
           //   },
-          //   label: {
-          //     fontSize: 10,
+          //   name: props.echartDw1,
+          //   nameTextStyle: {
           //     color: '#fff',
+          //     fontSize: 12,
+          //     lineHeight: 10,
+          //   },
+          //   splitLine: {
+          //     lineStyle: {
+          //       color: 'rgba(14, 53, 95)',
+          //     },
+          //   },
+          //   axisLine: {
+          //     show: true,
+          //     lineStyle: {
+          //       color: 'rgba(14, 53, 95)',
+          //     },
+          //   },
+          //   axisTick: {
+          //     show: false,
           //   },
           // },
-          smooth: true,
-          symbol: 'none',
-          zlevel: 3,
-          itemStyle: {
-            color: '#ff0000',
-            borderColor: '#ff0000',
-          },
-          lineStyle: {
-            normal: {
-              width: 2,
+        ],
+        series: [
+          {
+            name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
+            type: 'line',
+
+            // markPoint: {
+            //   symbol: 'circle',
+            //   data: [
+            //     {
+            //       coord: [345.44, 94250.0],
+            //       name: '交点',
+            //     },
+
+            //   ],
+            //   symbolSize: 10,
+            //   itemStyle: {
+            //     color: '#19a3df',
+            //     borderColor: '#a3c8d8',
+            //   },
+            //   label: {
+            //     fontSize: 10,
+            //     color: '#fff',
+            //   },
+            // },
+            smooth: true,
+            symbol: 'none',
+            zlevel: 3,
+            itemStyle: {
               color: '#ff0000',
+              borderColor: '#ff0000',
             },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#ff0000',
+              },
+            },
+            data: echartDataGqs.maxData ? echartDataGqs.maxData.data : [],
           },
-          data: echartDataGqs.maxData ? echartDataGqs.maxData.data : [],
-        },
-        {
-          name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
-          type: 'line',
-          smooth: true,
-          symbol: 'none',
-          zlevel: 3,
-          itemStyle: {
-            color: '#4fffad',
-            borderColor: '#a3c8d8',
-          },
-          lineStyle: {
-            normal: {
-              width: 2,
+          {
+            name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            zlevel: 3,
+            itemStyle: {
               color: '#4fffad',
+              borderColor: '#a3c8d8',
             },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#4fffad',
+              },
+            },
+            data: echartDataGqs.minData ? echartDataGqs.minData.data : [],
           },
-          data: echartDataGqs.minData ? echartDataGqs.minData.data : [],
-        },
-        {
-          name: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
-          type: 'line',
-          smooth: true,
-          symbol: 'none',
-          zlevel: 3,
-          itemStyle: {
-            color: '#fc8452',
-            borderColor: '#a3c8d8',
-          },
-          lineStyle: {
-            normal: {
-              width: 2,
+          {
+            name: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            zlevel: 3,
+            itemStyle: {
               color: '#fc8452',
+              borderColor: '#a3c8d8',
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#fc8452',
+              },
             },
-          },
 
-          data: echartDataGqs.avgData ? echartDataGqs.avgData.data : [],
-        },
-        {
-          name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
-          type: 'line',
-          smooth: true,
-          symbol: 'none',
-          zlevel: 3,
-          itemStyle: {
-            color: '#fc8452',
-            borderColor: '#a3c8d8',
+            data: echartDataGqs.avgData ? echartDataGqs.avgData.data : [],
           },
-          lineStyle: {
-            normal: {
-              width: 2,
+          {
+            name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            zlevel: 3,
+            itemStyle: {
               color: '#fc8452',
+              borderColor: '#a3c8d8',
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#fc8452',
+              },
             },
-          },
 
-          data: echartDataGqs.curData ? echartDataGqs.curData.data : [],
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
+            data: echartDataGqs.curData ? echartDataGqs.curData.data : [],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
 </script>
 
 <style scoped lang="less">
-.echartLine {
-  width: 100%;
-  height: 100%;
-
-  .line {
+  .echartLine {
     width: 100%;
     height: 100%;
+
+    .line {
+      width: 100%;
+      height: 100%;
+    }
   }
-}
 </style>

src/views/vent/monitorManager/comment/DeviceEcharts.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="charts-container">
     <a-select ref="select" v-model:value="chartsType" size="small" style="position: absolute; z-index: 99; top: 2px; left: 2px; width: 98px">
-      <!-- <a-select-option value="listMonitor">实时监测</a-select-option> -->
       <a-select-option value="history">历史记录</a-select-option>
+      <a-select-option value="listMonitor">实时监测</a-select-option>
       <!-- <a-select-option value="detail">详情监测</a-select-option> -->
     </a-select>
 
-    <!-- <div class="charts-box" v-if="chartsType === 'listMonitor'" style="position: absolute; top: 20px">
+    <div class="charts-box" v-if="chartsType === 'listMonitor'" style="position: absolute; top: 20px">
       <BarAndLine
         :chartsColumnsType="chartsColumnsType"
         :xAxisPropType="xAxisPropType"
@@ -14,9 +14,9 @@
         height="100%"
         chartsType="listMonitor"
         :option="echartsOption"
-        :chartsColumns="chartsColumns"
+        :chartsColumns="chartsColumnList"
       />
-    </div> -->
+    </div>
     <div class="charts-box" v-if="chartsType === 'detail' && deviceListApi">
       <Select
         :options="options"
@@ -33,7 +33,7 @@
         height="100%"
         :option="echartsOption2"
         chartsType="detail"
-        :chartsColumns="chartsColumns"
+        :chartsColumns="chartsColumnList"
       />
     </div>
     <div class="charts-box" v-else-if="chartsType === 'history'">
@@ -129,7 +129,7 @@
         :option="echartsOption1"
         chartsType="history"
         style="margin-top: 20px"
-        :chartsColumns="chartsColumns"
+        :chartsColumns="chartsColumnList"
       />
     </div>
   </div>
@@ -140,6 +140,7 @@
   import dayjs from 'dayjs';
   import { defHttp } from '/@/utils/http/axios';
   import { Select, Pagination } from 'ant-design-vue';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 
   export default defineComponent({
     name: 'DeviceEcharts',
@@ -196,6 +197,7 @@
         skip: '8',
         interval: '1h',
       });
+      const chartsColumnList = props.chartsColumns ? props.chartsColumns : getTableHeaderColumns(props.chartsColumnsType);
       const resultXAxisPropType = ref('');
       const resultDataSource = ref<any[]>([]);
       const detailDataSource = ref<any[]>([]);
@@ -206,7 +208,7 @@
         grid: {
           top: '60px',
           left: '10px',
-          right: props.chartsColumns.length * 15 + 'px',
+          right: chartsColumnList.length * 15 + 'px',
           bottom: '5%',
           containLabel: true,
         },
@@ -223,7 +225,7 @@
         grid: {
           top: '70px',
           left: '10px',
-          right: props.chartsColumns.length * 15 + 'px',
+          right: chartsColumnList.length * 15 + 'px',
           bottom: '45px',
           containLabel: true,
         },
@@ -238,7 +240,7 @@
         grid: {
           top: '70px',
           left: '10px',
-          right: props.chartsColumns.length * 15 + 'px',
+          right: chartsColumnList.length * 15 + 'px',
           bottom: '2%',
           containLabel: true,
         },
@@ -364,6 +366,7 @@
         onChange,
         globalConfig,
         stationType,
+        chartsColumnList,
       };
     },
   });

src/views/vent/monitorManager/comment/GasPipeTable.vue

@@ -1,7 +1,7 @@
 <template>
   <MonitorTable
     ref="monitorTable"
-    :columnsType="`${deviceType}_monitor`"
+    columnsType="gaspipe_monitor"
     :dataSource="dataSource"
     design-scope="device_monitor"
     :isShowActionColumn="true"
@@ -13,7 +13,7 @@
       <TableAction
         :actions="[
           {
-            label: '啥来着？',
+            label: '详情',
             onClick: (e) => deviceEdit(e, 'reportInfo', record),
           },
           {
@@ -42,7 +42,7 @@
       </a-tag>
     </template>
   </MonitorTable>
-  <DeviceBaseInfo @register="registerModal" :device-type="deviceType" />
+  <DeviceBaseInfo @register="registerModal" device-type="gaspipe" />
 </template>
 
 <script lang="ts" setup>
@@ -50,11 +50,12 @@
   import DeviceBaseInfo from './components/DeviceBaseInfo.vue';
   import { TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
-  //   import { ref } from 'vue';
+  import { onMounted } from 'vue';
+  import { getGasDeviceInfo } from './comment.api';
+  import { ref } from 'vue';
+  import { get } from 'lodash-es';
 
   defineProps<{
-    deviceType: string;
-    dataSource: any[];
     scroll: { y: number };
   }>();
 
@@ -69,4 +70,16 @@
       deviceId: record['deviceID'],
     });
   }
+
+  const dataSource = ref<any[]>([]);
+
+  function getDataSource() {
+    getGasDeviceInfo({ devicetype: 'gasmonitor', pagetype: 'normal' }).then((res) => {
+      dataSource.value = get(res, 'msgTxt[0].datalist');
+    });
+  }
+
+  onMounted(() => {
+    getDataSource();
+  });
 </script>

src/views/vent/monitorManager/comment/comment.api.ts

@@ -8,6 +8,7 @@ enum Api {
   sysInput = '/safety/ventanalyManageSystem/input',
   getInfo = '/safety/reportLocalData/queryReportData',
   getFileList = '/safety/reportLocalData/list',
+  getGasDeviceInfo = '/monitor/getGasDeviceInfo',
 }
 
 /**
@@ -27,3 +28,4 @@ export const sysList = (params) => defHttp.get({ url: Api.sysList, params });
 export const sysInput = (params) => defHttp.put({ url: Api.sysInput, params });
 export const getInfoList = (params) => defHttp.post({ url: Api.getInfo, params });
 export const getAllFileList = (params) => defHttp.get({ url: Api.getFileList, params });
+export const getGasDeviceInfo = (params) => defHttp.post({ url: Api.getGasDeviceInfo, params });

src/views/vent/monitorManager/deviceMonitor/components/device/device.data.ts

@@ -61,6 +61,8 @@ export function getMonitorComponent() {
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.sjh.vue'));
       break;
     case 'sdmtjtbdmk': //保德
+    case 'sdmtjtdltmk': //大柳塔
+    case 'sdmtjtdltmkhjtj': //活鸡兔
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.bd.vue'));
       break;
     case 'sdmtjtbetmk': //布尔台
@@ -546,6 +548,8 @@ export const noWarningArr = [
   'substation_normal',
 ]; // 无预警详情的
 export const haveSysDetailArr = ['forcFan', 'pulping']; //有场景详情的
+
+export const haveHistoryEcharts = ['majorpath', 'gasmonitor']; // 有历史曲线的
 // export const haveSysDetailArr = ['']; //有场景详情的
 // 无定位
 export const noLocationArr = () => {

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -547,10 +547,17 @@
                 <HistoryBall :dataSource="dataSource"></HistoryBall>
               </template>
               <template v-else-if="deviceType.startsWith('fanmain')">
-                <HistoryTableNew class="w-100% h-100%" :device-code="`${deviceType}`" :scroll="scroll" dict-code="fan_dict" />
+                <!-- HistoryTableNew 没有监测deviceType 进行动态查询表头导致数据不显示 -->
+                <!-- <HistoryTableNew class="w-100% h-100%" :device-code="`${deviceType}`" :scroll="scroll"
+                  dict-code="fan_dict" /> -->
+                  <HistoryTable ref="historyTable" :columns-type="`${deviceType}`"
+                  :device-type="deviceType" designScope="device-history" :scroll="scroll" />
               </template>
               <template v-else-if="deviceType.startsWith('fanlocal')">
-                <HistoryTableNew class="w-100% hM-100%" :device-code="`${deviceType}`" :scroll="scroll" dict-code="fanlocal_dict" />
+                <!-- HistoryTableNew 没有监测deviceType 进行动态查询表头导致数据不显示 -->
+                <!-- <HistoryTableNew class="w-100% h-100%" :device-code="`${deviceType}`" :scroll="scroll" dict-code="fanlocal_dict" /> -->
+                 <HistoryTable ref="historyTable" :columns-type="`${deviceType}`"
+                  :device-type="deviceType" designScope="device-history" :scroll="scroll" />
               </template>
               <template v-else>
                 <HistoryTable
@@ -564,9 +571,17 @@
               </template>
             </div>
           </a-tab-pane>
-          <a-tab-pane key="5" tab="历史曲线" v-if="deviceType.startsWith('majorpath')">
+          <a-tab-pane key="5" :tab="deviceType.startsWith('gasmonitor') ? '曲线监测': '历史曲线'" v-if="haveHistoryEcharts.find((item) => deviceType.startsWith(item))">
             <div class="tab-item">
-              <HistoryTableMajorPath class="w-100% h-100%" :sysId="`${systemID}`" :scroll="scroll" columnsType="sys_majorpath" type="chart" />
+              <HistoryTableMajorPath v-if="deviceType.startsWith('majorpath')" class="w-100% h-100%" :sysId="`${systemID}`" :scroll="scroll" columnsType="sys_majorpath" type="chart" />
+              <DeviceEcharts
+                chartsColumnsType="gasmonitor_chart"
+                xAxisPropType="strname"
+                height="300px"
+                :dataSource="dataSource"
+                :device-list-api="list.bind(null, { devicetype: 'gasmonitor', pagetype: 'normal' })"
+                device-type="gasmonitor"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="3" tab="报警历史" v-if="!noWarningArr.find((item) => deviceType.startsWith(item))">
@@ -649,6 +664,7 @@
     getMonitorComponent,
     vehicleFormConfig,
     noLocationArr,
+    haveHistoryEcharts
   } from './device.data';
   import mainPath from './modal/mainPath.vue';
   import { formConfig } from '../../../safetyMonitor/safety.data';

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.bd.vue

@@ -1,10 +1,13 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk"
-    @cancel="handleCancel">
+  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item"
-          :class="{ 'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
           <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
@@ -53,8 +56,7 @@
         <div class="right-bottom">
           <span class="base-title">测点监测曲线</span>
           <div class="echarts-box">
-            <BarAndLine xAxisPropType="pos" :dataSource="posList" height="100%" :chartsColumns="chartsColumns"
-              :option="echatsOption" />
+            <BarAndLine xAxisPropType="pos" :dataSource="posList" height="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
           </div>
         </div>
         <div class="right-center">
@@ -68,367 +70,367 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { SvgIcon } from '/@/components/Icon';
-import dayjs from 'dayjs';
-import { formatNum } from '/@/utils/ventutil';
-
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon },
-  props: {
-    dataSource: { type: Array },
-    activeID: { type: String },
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref<any>('');
-    const deviceList = ref<any[]>([]);
-    const posList = ref<any[]>([]);
-    const history = ref<any[]>([]);
-    const posMonitor = shallowRef({});
-
-    const echatsOption = {
-      grid: {
-        top: '20%',
-        left: '2px',
-        right: '10px',
-        bottom: '3%',
-        containLabel: true,
-      },
-      toolbox: {
-        feature: {},
-      },
-    };
-
-    const chartsColumns = [
-      {
-        legend: '测点温度',
-        seriesName: '(℃)',
-        ymax: 100,
-        yname: '℃',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'value',
-      },
-    ];
-    const columns = [
-      {
-        title: '位置',
-        dataIndex: 'position',
-        align: 'center',
-        customRender: ({ index }) => {
-          return `测点${index}`;
+  import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import dayjs from 'dayjs';
+  import { formatNum } from '/@/utils/ventutil';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref<any>('');
+      const deviceList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const history = ref<any[]>([]);
+      const posMonitor = shallowRef({});
+
+      const echatsOption = {
+        grid: {
+          top: '20%',
+          left: '2px',
+          right: '10px',
+          bottom: '3%',
+          containLabel: true,
         },
-      },
-      {
-        title: '最高温度(℃)',
-        dataIndex: 'fmax',
-        align: 'center',
-      },
-      {
-        title: '平均温度(℃)',
-        dataIndex: 'favg',
-        align: 'center',
-      },
-      {
-        title: '最低温度(℃)',
-        dataIndex: 'fmin',
-        align: 'center',
-      },
-      {
-        title: '时间',
-        dataIndex: 'time',
-        align: 'center',
-        width: 200,
-      },
-    ];
-
-    const [register, { setModalProps, closeModal }] = useModalInner();
-
-    function handleVisibleChange(visible) {
-      if (visible) {
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumns = [
+        {
+          legend: '测点温度',
+          seriesName: '(℃)',
+          ymax: 100,
+          yname: '℃',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'value',
+        },
+      ];
+      const columns = [
+        {
+          title: '位置',
+          dataIndex: 'position',
+          align: 'center',
+          customRender: ({ index }) => {
+            return `测点${index}`;
+          },
+        },
+        {
+          title: '最高温度(℃)',
+          dataIndex: 'fmax',
+          align: 'center',
+        },
+        {
+          title: '平均温度(℃)',
+          dataIndex: 'favg',
+          align: 'center',
+        },
+        {
+          title: '最低温度(℃)',
+          dataIndex: 'fmin',
+          align: 'center',
+        },
+        {
+          title: '时间',
+          dataIndex: 'time',
+          align: 'center',
+          width: 200,
+        },
+      ];
+
+      const [register, { setModalProps, closeModal }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
       }
-    }
-
-    // 选择监测
-    function selectDevice(id) {
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-      setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id;
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-    }
 
-    function handleOk(e) {
-      e.preventDefault();
-      closeModal();
-    }
-
-    function handleCancel(e) {
-      e.preventDefault();
-      closeModal();
-    }
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      console.log(newDataSource, 'newDataSource--------------');
-      deviceList.value = newDataSource as any[];
-      if (newActiveID != oldActiveID) {
-        activeDeviceID.value = newActiveID as string;
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
       }
-      // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-      newDataSource?.forEach((item: any, index) => {
-        if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-          history.value = item.history;
-          posMonitor.value = item.readData;
-          if (item.readData.fibreTemperature) {
-            const list = JSON.parse(item.readData.fibreTemperature);
-            if (list.length > 0) posList.value = list;
-          }
+
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        console.log(newDataSource, 'newDataSource--------------');
+        deviceList.value = newDataSource as any[];
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
         }
+        // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        newDataSource?.forEach((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            history.value = item.history;
+            posMonitor.value = item.readData;
+            if (item.readData.fibreTemperature) {
+              const list = JSON.parse(item.readData.fibreTemperature);
+              if (list.length > 0) posList.value = list;
+            }
+          }
+        });
       });
-    });
-
-    return {
-      register,
-      model: modelRef,
-      currentTime,
-      handleVisibleChange,
-      selectDevice,
-      handleOk,
-      handleCancel,
-      deviceList,
-      activeDeviceID,
-      posMonitor,
-      echatsOption,
-      posList,
-      history,
-      chartsColumns,
-      columns,
-      formatNum,
-    };
-  },
-});
+
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        history,
+        chartsColumns,
+        columns,
+        formatNum,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-.fiber-modal {
-  width: 100%;
-  height: 650px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  .modal-left {
-    width: 200px;
-    height: 100%;
-    overflow-y: auto;
-    background: #ffffff11;
-    padding: 5px;
-    border-radius: 5px;
-
-    .active-device-title {
-      color: aqua;
-    }
+  .fiber-modal {
+    width: 100%;
+    height: 650px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .modal-left {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+
+      .active-device-title {
+        color: aqua;
+      }
 
-    .link-item {
-      position: relative;
-      cursor: pointer;
-      line-height: 30px;
-      padding-left: 30px;
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
 
-      span:hover {
-        color: #89ffff;
-      }
+        span:hover {
+          color: #89ffff;
+        }
 
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 8px;
-        height: 8px;
-        top: 12px;
-        left: 10px;
-        transform: rotateZ(45deg) skew(10deg, 10deg);
-        background: #45d3fd;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
+        }
       }
     }
-  }
 
-  .modal-right {
-    width: calc(100% - 220px);
-    overflow-y: auto;
-
-    .base-title {
-      line-height: 32px;
-      position: relative;
-      padding-left: 20px;
-
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 4px;
-        height: 12px;
-        top: 4px;
-        left: 10px;
-        background: #45d3fd;
-        border-radius: 4px;
-      }
-    }
+    .modal-right {
+      width: calc(100% - 220px);
+      overflow-y: auto;
 
-    .right-top {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      margin-bottom: 10px;
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 20px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 10px;
+          background: #45d3fd;
+          border-radius: 4px;
+        }
+      }
 
-      .top-item {
-        width: 200px;
-        height: 80px;
+      .right-top {
         display: flex;
         flex-direction: row;
-        justify-content: center;
-        border: 1px solid rgba(25, 237, 255, 0.4);
-        box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
-        background: rgba(0, 0, 0, 0.06666666666666667);
-        padding-top: 16px;
-
-        .icon {
-          margin-right: 10px;
-          margin-top: 5px;
-          color: #fdb146;
-        }
+        justify-content: space-between;
+        margin-bottom: 10px;
 
-        .item-container {
-          width: 100px;
+        .top-item {
+          width: 200px;
+          height: 80px;
           display: flex;
-          flex-direction: column;
+          flex-direction: row;
           justify-content: center;
-
-          div {
-            text-align: center;
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
+          padding-top: 16px;
+
+          .icon {
+            margin-right: 10px;
+            margin-top: 5px;
+            color: #fdb146;
           }
 
-          .title {
-            font-size: 18px;
-          }
+          .item-container {
+            width: 100px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
 
-          .value {
-            text-shadow: 0 0 25px #00fbfe;
-            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-            font-style: normal;
-            background-size: cover;
-            font-family: electronicFont;
-            font-size: 30px;
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            position: relative;
-            top: -8px;
-
-            span {
-              font-family: Arial, Helvetica, sans-serif;
+            div {
+              text-align: center;
+            }
+
+            .title {
               font-size: 18px;
-              color: aliceblue;
+            }
+
+            .value {
+              text-shadow: 0 0 25px #00fbfe;
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+              font-style: normal;
+              background-size: cover;
+              font-family: electronicFont;
+              font-size: 30px;
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+              position: relative;
+              top: -8px;
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 18px;
+                color: aliceblue;
+              }
             }
           }
         }
-      }
 
-      .warning-box {
-        padding-top: 0px;
+        .warning-box {
+          padding-top: 0px;
 
-        .icon {
-          margin-top: 20px;
+          .icon {
+            margin-top: 20px;
 
-          .icon-style {
-            color: #fdb146;
+            .icon-style {
+              color: #fdb146;
+            }
           }
-        }
 
-        .warning-value {
-          font-size: 18px;
-          color: #61ddb1;
+          .warning-value {
+            font-size: 18px;
+            color: #61ddb1;
+          }
         }
       }
-    }
 
-    .right-center {
-      margin-top: 20px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+      .right-center {
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
 
-      .table-box {
-        position: relative;
-        width: 100%;
-        height: 250px;
+        .table-box {
+          position: relative;
+          width: 100%;
+          height: 250px;
 
-        :deep(.zxm-table-wrapper) {
-          height: 220px !important;
-          background: #ffffff05 !important;
-          border-bottom: 1px solid #91e9fe80 !important;
+          :deep(.zxm-table-wrapper) {
+            height: 220px !important;
+            background: #ffffff05 !important;
+            border-bottom: 1px solid #91e9fe80 !important;
+          }
         }
-      }
 
-      .warning-box {
-        width: calc(100% - 520px);
+        .warning-box {
+          width: calc(100% - 520px);
 
-        .warning-container {
-          width: 100%;
-          height: convert;
-          background: #009acd00;
+          .warning-container {
+            width: 100%;
+            height: convert;
+            background: #009acd00;
 
-          :deep(.dv-scroll-board) {
-            .row-item {
-              height: 40px !important;
-              line-height: 40px !important;
-            }
+            :deep(.dv-scroll-board) {
+              .row-item {
+                height: 40px !important;
+                line-height: 40px !important;
+              }
 
-            .header-item {
-              border-top: 1px solid #91e9fe !important;
-              border-bottom: 1px solid #91e9fe !important;
+              .header-item {
+                border-top: 1px solid #91e9fe !important;
+                border-bottom: 1px solid #91e9fe !important;
+              }
             }
           }
         }
       }
-    }
 
-    .right-bottom {
-      margin-top: 20px;
+      .right-bottom {
+        margin-top: 20px;
 
-      .echarts-box {
-        width: 100%;
-        height: 230px;
+        .echarts-box {
+          width: 100%;
+          height: 230px;
+        }
       }
     }
   }
-}
 
-:deep(.zxm-table-body) {
-  border: 1px solid rgba(57, 232, 255, 0.2) !important;
+  :deep(.zxm-table-body) {
+    border: 1px solid rgba(57, 232, 255, 0.2) !important;
 
-  .zxm-table-tbody>tr>td {
-    border: none !important;
+    .zxm-table-tbody > tr > td {
+      border: none !important;
+    }
   }
-}
 
-:deep(.zxm-table-cell) {
-  border-right: none !important;
-}
+  :deep(.zxm-table-cell) {
+    border-right: none !important;
+  }
 </style>

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

@@ -47,6 +47,8 @@
         </div>
       </div>
       <div class="top-right row">
+        <div v-if="hasPermission('window:zhldkz')" class="button-box" @click="setControl('autoRun', '开启自主调控')">开启自主调控</div>
+        <div v-if="hasPermission('window:zhldkz')" class="button-box" @click="setControl('autoStop', '关闭自主调控')">关闭自主调控</div>
         <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea(7)">风窗自主调控</div>
         <div v-if="hasPermission('window:gasldkz')" class="button-box" @click="setArea('ldkzStart')">瓦斯超限调控开启</div>
         <div v-if="hasPermission('window:controlFull')" class="button-box" @click="setArea(5)">一键全开</div>
@@ -529,7 +531,11 @@
         data.value = value;
       } else {
         data.paramcode = handlerState;
-        data.value = value;
+        if (handlerState == 'autoRun' || handlerState == 'autoStop') {
+          data.value = null;
+        } else {
+          data.value = value;
+        }
       }
       deviceControlApi(handlerState == 3 ? params : data)
         .then((res) => {

src/views/vent/monitorManager/windowMonitor/window.threejs.ts

@@ -9,7 +9,7 @@ import sdFc_4 from './shuangdaoFcHj.threejs'; // sdFc_4 双道-带门-卷闸
 import sdFc_2 from './shuangdaoFcSw.threejs'; // sdFc_2 单道-带小门-2个窗
 import sdFc_5 from './shuangdaoFcYjl.threejs'; // sdFc_5 双道-小门(侧边下)-小窗（榆家梁）
 import ddFc_4 from './dandaoFcBd1.threejs'; // ddFc_2 单道-一个小窗两列扇叶
-import ddFc_2 from './dandaoFcBd2.threejs'; // ddFc_2 单道-一个小窗两列扇叶
+import ddFc_2 from './dandaoFcBd2.threejs'; // ddFc_2 单道-一个大窗两列竖型扇叶
 import ddFc_6 from './dandaoFcHjt.threejs'; // ddFc_6 单道-大窗1列扇叶(活鸡兔)
 import ddFc_7 from './dandaoFcBd3.threejs'; // ddFc_6 单道-大窗1列扇叶(活鸡兔)
 import { animateCamera } from '/@/utils/threejs/util';