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

src/views/vent/comment/history/HistoryTable.vue

@@ -1,17 +1,19 @@
 <template>
-  <BasicTable ref="historyTable" @register="register" :data-source="data">
-    <template #bodyCell="{ column, record }">
-      <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">
-        {{ record.warnFlag == '0' ? '正常' : '报警' }}
-      </a-tag>
-      <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">
-        {{ record.netStatus == '0' ? '断开' : '连接' }}
-      </a-tag>
-    </template>
-    <template #form-submitBefore>
-      <a-button type="primary" preIcon="ant-design:search-outlined" @click="search">查询</a-button>
-    </template>
-  </BasicTable>
+  <div class="history-table">
+    <BasicTable ref="historyTable" @register="register" :data-source="data">
+      <template #bodyCell="{ column, record }">
+        <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">
+          {{ record.warnFlag == '0' ? '正常' : '报警' }}
+        </a-tag>
+        <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">
+          {{ record.netStatus == '0' ? '断开' : '连接' }}
+        </a-tag>
+      </template>
+      <template #form-submitBefore>
+        <a-button type="primary" preIcon="ant-design:search-outlined" @click="search">查询</a-button>
+      </template>
+    </BasicTable>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -215,11 +217,69 @@
 
   onMounted(async () => {
     await fetchDevice();
-    initTable([deviceInfo.value.deviceType as string, props.columnsCode], deviceOptions.value, dictOptions.value);
+    // 生成所有需要查询的表头编码，例如 forcFan_auto 对应 forcFan_auto_history、forcFan_history 这两个
+    const codes: string[] = [];
+    if (deviceInfo.value.deviceType) {
+      const arr = (deviceInfo.value.deviceType as string).split('_');
+      while (arr.length) {
+        codes.push(arr.join('_').concat('_history'));
+        arr.pop();
+      }
+    }
+    // 如此，例如deviceType为forcFan_auto， 则查询表头按 forcFan_auto_history、forcFan_history、columnsCode 为顺序
+    initTable(codes.concat(props.columnsCode), deviceOptions.value, dictOptions.value);
     search();
   });
 </script>
 
 <style scoped lang="less">
   @import '/@/design/vent/color.less';
+
+  :deep(.@{ventSpace}-table-body) {
+    height: auto !important;
+  }
+  :deep(.zxm-picker) {
+    height: 30px !important;
+  }
+  .history-table {
+    width: 100%;
+    :deep(.jeecg-basic-table-form-container) {
+      .@{ventSpace}-form {
+        padding: 0 !important;
+        border: none !important;
+        margin-bottom: 0 !important;
+        .@{ventSpace}-picker,
+        .@{ventSpace}-select-selector {
+          width: 100% !important;
+          background: #00000017;
+          border: 1px solid #b7b7b7;
+          input,
+          .@{ventSpace}-select-selection-item,
+          .@{ventSpace}-picker-suffix {
+            color: #fff;
+          }
+          .@{ventSpace}-select-selection-placeholder {
+            color: #ffffffaa;
+          }
+        }
+      }
+      .@{ventSpace}-table-title {
+        min-height: 0 !important;
+      }
+    }
+    .pagination-box {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .page-num {
+        border: 1px solid #0090d8;
+        padding: 4px 8px;
+        margin-right: 5px;
+        color: #0090d8;
+      }
+      .btn {
+        margin-right: 10px;
+      }
+    }
+  }
 </style>

src/views/vent/comment/history/history.data.ts

@@ -64,7 +64,7 @@ export const getDefaultSchemas: (dictCode: any[], deviceOptions: any[]) => FormS
     component: 'Select',
     required: Boolean(dictOptions.length),
     show: Boolean(dictOptions.length),
-    defaultValue: dictOptions[0].value,
+    defaultValue: dictOptions[0] ? dictOptions[0].value : '',
     componentProps: {
       options: dictOptions,
       // onChange: (e, option) => {

src/views/vent/home/billboard/billboard.data.ts

@@ -147,23 +147,21 @@ export const GAS_STATUS_HEADER_CONFIG = [
 ];
 
 // 综合监测相关的内容配置项
-export const SUMMARY_HEADER_CONFIG = [
-  {
-    label: '风险分析',
-    prop: 'level',
-    type: 'to-bottom-right',
-  },
-];
+export const SUMMARY_HEADER_CONFIG = {
+  label: '风险分析',
+  prop: 'synthesizeS.levelstatus',
+  type: 'to-bottom-right',
+};
 
 // 综合监测表格列配置
 export const SUMMARY_COLUMN = [
   {
     name: '监测类别',
-    prop: 'typeName',
+    prop: 'label',
   },
   {
     name: '风险等级',
-    prop: 'warnLevelStr',
+    prop: 'value',
   },
 ];
 
@@ -221,12 +219,73 @@ export const DEFAULT_TEST_DATA = {
     zongjinfeng: '/', //总进风
   },
   sys_warndata: {
-    levels: 0,
-    fire: '0',
-    sb: '0',
-    ws: '0',
-    fc: '0',
-    tf: '0',
+    info: {
+      sysInfo: {
+        ventS: {
+          maxLevel: 0,
+          netstatus: 0,
+          code: 'ventS',
+          levelstatus: '低风险',
+          maxLevel_str: '正常',
+          name: '通风',
+          count: 0,
+          status: '正常',
+          maxLevel_status: '低风险',
+        },
+        fireS: {
+          maxLevel: 0,
+          code: 'fireS',
+          maxLevel_str: '正常',
+          count: 0,
+          netstatus: 1,
+          levelstatus: '低风险',
+          name: '防灭火',
+          status: '正常',
+          maxLevel_status: '低风险',
+        },
+        synthesizeS: {
+          maxLevel: 0,
+          netstatus: 1,
+          code: 'synthesizeS',
+          levelstatus: '低风险',
+          maxLevel_str: '正常',
+          name: '综合',
+          count: 0,
+          status: '正常',
+          maxLevel_status: '低风险',
+        },
+        dustS: {
+          maxLevel: 0,
+          netstatus: 0,
+          code: 'dustS',
+          levelstatus: '低风险',
+          maxLevel_str: '正常',
+          name: '防尘',
+          count: 0,
+          status: '正常',
+          maxLevel_status: '低风险',
+        },
+        gasS: {
+          maxLevel: 0,
+          netstatus: 0,
+          code: 'gasS',
+          levelstatus: '低风险',
+          maxLevel_str: '正常',
+          devices: [],
+          name: '瓦斯',
+          count: 0,
+          status: '正常',
+          maxLevel_status: '低风险',
+        },
+        deviceWarnInfo: {
+          maxLevel: 101,
+          levelstatus: '低风险',
+          maxLevel_str: '低风险预警',
+          status: '异常',
+          devMaxlevel_status: '低风险预警',
+        },
+      },
+    },
   },
   orgname: '/',
   orgcode: '/',

src/views/vent/home/billboard/components/Summary.vue

@@ -1,17 +1,18 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <Row justify="space-around">
-    <Col v-for="(item, i) in SUMMARY_HEADER_CONFIG" :key="`svvhbcgs${i}`" :span="10">
-      <LargeBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
-    </Col>
+    <!-- <Col> -->
+    <LargeBoard :label="SUMMARY_HEADER_CONFIG.label" :value="headerData" :type="SUMMARY_HEADER_CONFIG.type" />
+    <!-- </Col> -->
   </Row>
   <CommonTable class="mt-10px" :columns="SUMMARY_COLUMN" :data="tableData" />
 </template>
 <script lang="ts" setup>
-  import { Row, Col } from 'ant-design-vue';
+  import _ from 'lodash-es';
+  import { Row } from 'ant-design-vue';
   import { SUMMARY_HEADER_CONFIG, SUMMARY_COLUMN, DEFAULT_TEST_DATA, BillboardType } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
-  import { watch, shallowRef } from 'vue';
+  import { watch, shallowRef, ref } from 'vue';
   import CommonTable from './CommonTable.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -24,11 +25,13 @@
     }
   );
 
-  const headerData = shallowRef({});
-  const tableData = shallowRef<BillboardType['gasInfo']['gasTypeList']>([]);
+  const headerData = ref('/');
+  const tableData = shallowRef<any[]>([]);
 
   function fetchData() {
-    const info = props.data.gasInfo || DEFAULT_TEST_DATA.gasInfo;
+    const info = props.data.sys_warndata;
+    if (!info) return;
+    const sysInfo = info.info.sysInfo;
     const trans = {
       0: '低风险',
       101: '低风险',
@@ -36,18 +39,31 @@
       103: '较大风险',
       104: '重大风险',
       201: '报警',
-      1001: '网络断开',
     };
-    headerData.value = {
-      gasWarnLevel: trans[info.gasWarnLevel],
-      gasJudgeLevel: '低风险',
-    };
-    tableData.value = info.gasTypeList.map((e) => {
-      return {
-        ...e,
-        warnLevelStr: trans[e.warnLevel],
-      };
-    });
+    headerData.value = _.get(sysInfo, SUMMARY_HEADER_CONFIG.prop, '/');
+    // 配合 SUMMARY_COLUMN 生成数据
+    tableData.value = [
+      {
+        label: '火灾监测',
+        value: _.get(trans, _.get(sysInfo, ['fireS', 'maxLevel'], 0)),
+      },
+      {
+        label: '设备监测',
+        value: _.get(trans, _.get(sysInfo, ['deviceWarnInfo', 'maxLevel'], 0)),
+      },
+      {
+        label: '瓦斯监测',
+        value: _.get(trans, _.get(sysInfo, ['gasS', 'maxLevel'], 0)),
+      },
+      {
+        label: '粉尘监测',
+        value: _.get(trans, _.get(sysInfo, ['dustS', 'maxLevel'], 0)),
+      },
+      {
+        label: '通风监测',
+        value: _.get(trans, _.get(sysInfo, ['ventS', 'maxLevel'], 0)),
+      },
+    ];
   }
 
   watch(
@@ -58,4 +74,14 @@
     { immediate: true }
   );
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .value104 {
+    color: #ff0000;
+  }
+  .value103 {
+    color: #ff8800;
+  }
+  .value102 {
+    color: #ffff00;
+  }
+</style>

src/views/vent/home/billboard/components/VentilationStatus.vue

@@ -71,7 +71,7 @@
   // 过滤不合法的值，小于5000的视为传感器出错
   function filterBadValue(val: number | string) {
     const valid = parseInt(val) > 5000;
-    return valid ? val : '/';
+    return valid ? val.toString() : '/';
   }
 
   watch(

src/views/vent/home/billboard/index.vue

@@ -5,10 +5,13 @@
       <div class="main-title">{{ mainTitle }}</div>
     </div>
     <a-row class="company-content" :gutter="10">
-      <a-col v-for="(item, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
+      <!-- <a-col v-for="(item, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
         <BaseCard :title="item.orgname || '/'" @open="openHandler(item.ip)">
           <component :is="componentMap[billboardType]" :data="item" />
         </BaseCard>
+      </a-col> -->
+      <a-col v-for="(render, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
+        <component :is="render" />
       </a-col>
     </a-row>
     <!-- <div v-if="showBtn" style="position: absolute; top: 0; left: 0">
@@ -33,10 +36,9 @@
    * 支持的看板类型如下：'DustStatus'、'FireStatus'、'FileOverview'、'VentilationStatus'、'GasStatus'、'Summary'
    *
    */
-  import { computed, onMounted, ref } from 'vue';
+  import { VNode, computed, h, onMounted, ref } from 'vue';
   import BaseCard from './components/BaseCard.vue';
   import ArrowButton from './components/ArrowButton.vue';
-  import { BillboardType } from './billboard.data';
   // import { useRoute } from 'vue-router';
   import { getSummary } from './billboard.api';
   import { useSSO } from '/@/hooks/vent/useSSO';
@@ -64,24 +66,30 @@
     FireStatus,
     Summary,
   };
-  // 组件Map，不同type需要跳转到不同的矿端页面
-  const routePathMap = {
-    DustStatus: '/dust/warn/home',
-    FileOverview: '/fileManager/fileDetail/home',
-    VentilationStatus: '/micro-vent-3dModal/dashboard/analysis',
-    GasStatus: '/gas/warn/home',
-    FireStatus: '/fire/warn/home',
-    Summary: undefined,
-  };
 
   const mainTitle = '国能神东一通三防管控平台';
 
   // 看板相关的基础配置
-  const billboards = ref<BillboardType[]>([]);
+  const billboards = ref<(() => VNode)[]>([]);
 
   function fetchBillboards() {
     getSummary().then((r) => {
-      billboards.value = r;
+      billboards.value = r.map((el) => {
+        return () =>
+          h(
+            BaseCard,
+            {
+              title: el.orgname || '/',
+              onOpen: () => openHandler(el.ip),
+            },
+            {
+              default: () =>
+                h(componentMap[props.billboardType], {
+                  data: el,
+                }),
+            }
+          );
+      });
     });
   }
 
@@ -104,6 +112,15 @@
   // const billboardType = ref('DustStatus');
   // const showBtn = ref(true);
 
+  // 组件Map，不同type需要跳转到不同的矿端页面
+  const routePathMap = {
+    DustStatus: '/dust/warn/home',
+    FileOverview: '/fileManager/fileDetail/home',
+    VentilationStatus: '/micro-vent-3dModal/dashboard/analysis',
+    GasStatus: '/gas/warn/home',
+    FireStatus: '/fire/warn/home',
+    Summary: undefined,
+  };
   // 页面跳转
   function openHandler(ip: string) {
     const url = `http://${ip}:8092/login`;

src/views/vent/home/clique/components/risk-warn.vue

@@ -3,7 +3,7 @@
     <div class="risk-title">{{ riskTitle }}</div>
     <div class="risk-select">
       <a-select style="width: 388px" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect">
-        <a-select-option v-for="item in selectList" :value="item.value">{{ item.label }} </a-select-option>
+        <a-select-option v-for="item in selectList" :key="item.value" :value="item.value">{{ item.label }} </a-select-option>
       </a-select>
     </div>
     <div class="risk-content">
@@ -57,7 +57,7 @@
               </div>
               <div class="item-monitor-box">
                 <span class="title">火灾监测</span>
-                <span class="value" :class="`value${centerData.tf}`">{{ parseLevel(centerData.fire) }}</span>
+                <span class="value" :class="`value${centerData.fire}`">{{ parseLevel(centerData.fire) }}</span>
               </div>
             </div>
             <div class="item item2">
@@ -66,7 +66,7 @@
               </div>
               <div class="item-monitor-box">
                 <span class="title">设备监测</span>
-                <span class="value" :class="`value${centerData.tf}`">{{ parseLevel(centerData.sb) }}</span>
+                <span class="value" :class="`value${centerData.sb}`">{{ parseLevel(centerData.sb) }}</span>
               </div>
             </div>
             <div class="item item3">
@@ -75,7 +75,7 @@
               </div>
               <div class="item-monitor-box">
                 <span class="title">瓦斯监测</span>
-                <span class="value" :class="`value${centerData.tf}`">{{ parseLevel(centerData.ws) }}</span>
+                <span class="value" :class="`value${centerData.ws}`">{{ parseLevel(centerData.ws) }}</span>
                 <!-- <div class="">
                                     <span class="title">矿井瓦斯鉴定等级监测</span>
                                     <span class="value">低瓦斯</span>
@@ -88,7 +88,7 @@
               </div>
               <div class="item-monitor-box">
                 <span class="title">粉尘监测</span>
-                <span class="value" :class="`value${centerData.tf}`">{{ parseLevel(centerData.fc) }}</span>
+                <span class="value" :class="`value${centerData.fc}`">{{ parseLevel(centerData.fc) }}</span>
               </div>
             </div>
             <div class="item item5">
@@ -181,7 +181,7 @@
     }
   );
 
-  function parseLevel(lv: string) {
+  function parseLevel(lv: string | number) {
     const l = parseInt(lv);
     switch (l) {
       case 0:

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

@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script lang="ts" name="system-user" setup>
+<script lang="ts" setup>
   //ts语法
   import { watchEffect, ref, watch, defineExpose, inject, nextTick } from 'vue';
   import { FormSchema } from '/@/components/Form/index';
@@ -108,6 +108,7 @@
       return props.columnsType;
     },
     async (newVal) => {
+      debugger;
       if (!newVal) return;
       if (historyTable.value) getForm().resetFields();
       await getDeviceList();

src/views/vent/monitorManager/compressor/components/nitrogenHistory.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="nitrogen-history">
-    <!-- <HistoryTable columns-type="nitrogen" device-type="nitrogen" :sys-id="deviceId" designScope="nitrogen_auto_history" :scroll="{ y: 650 }" /> -->
-    <HistoryTable device-code="nitrogen" dict-code="nitrogen_dict" columns-code="nitrogen_auto_history" />
+    <HistoryTable columns-type="nitrogen" device-type="nitrogen" :sys-id="deviceId" designScope="nitrogen_auto_history" :scroll="{ y: 650 }" />
+    <!-- <HistoryTable device-code="nitrogen" dict-code="nitrogen_dict" columns-code="nitrogen_auto_history" /> -->
   </div>
 </template>
 <script setup lang="ts">
-  // import HistoryTable from '../../comment/HistoryTable.vue';
-  import HistoryTable from '/@/views/vent/comment/history/HistoryTable.vue';
+  import HistoryTable from '../../comment/HistoryTable.vue';
+  // import HistoryTable from '/@/views/vent/comment/history/HistoryTable.vue';
   const props = defineProps({
     deviceType: {
       type: String,

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

@@ -591,8 +591,11 @@ async function getDataSource() {
       }
     } else {
       let resultData, searchForm;
-      const formData = monitorTable.value.getForm()
+      if(monitorTable.value){
+        const formData = monitorTable.value.getForm()
         searchForm = formData.getFieldsValue()
+      }
+      
       if (monitorTable.value) {
         if (deviceType.value.startsWith('safetymonitor')) {     
           resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } })
@@ -646,14 +649,15 @@ async function getDataSource() {
             }
           } else {
             let tableData: any[] = []
-            data.forEach(el => {
+            let noNetData: any[] = []
+            data.filter(el => {
               if (el.netStatus == 1) {
-                tableData.splice(0, 0, el);
+                tableData.push(el)
               } else {
-                tableData.push(el);
+                noNetData.push(el)
               }
             })
-            dataSource.value = tableData.reverse()
+            dataSource.value = [...tableData, ...noNetData]
           }
         } else {
           dataSource.value = []

src/views/vent/monitorManager/deviceMonitor/components/device/modal/blastDelta.vue

@@ -1,491 +1,492 @@
 <template>
-    <div class="blastDelta">
-        <div class="blast-title">爆炸三角形</div>
-        <div ref="coord" class="coords">
-            <div class="coord-lineY">
-                <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff', }"
-                    v-for="item in 10" :key="item"></div>
-            </div>
-            <div class="coord-labelY">
-                <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10"
-                    :key="ind">{{ ind == 0 ? maxY : '' }}</div>
-            </div>
-            <div class="coord-lineX">
-                <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff', }"
-                    v-for="item in 10" :key="item"></div>
-            </div>
-            <div class="coord-labelX">
-                <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10"
-                    :key="ind">{{ ind == 9 ? maxX : '' }}</div>
-            </div>
-            <div class="line-AB" :style="{ width: 'calc(100% - 15px)', height: 'calc(100% - 10px)' }">
-                <canvas id="myCanvas" width="250" height="245"></canvas>
-            </div>
-            <div class="line-legend">
-                <div class="legend-ite" v-for="ite in 4" :key="ite"></div>
-            </div>
-            <div class="legend-name">
-                <div class="item-name" v-for="item in legendList" :key="item">{{ item.name }}</div>
-            </div>
-        </div>
+  <div class="blastDelta">
+    <div class="blast-title">爆炸三角形</div>
+    <div ref="coord" class="coords">
+      <div class="coord-lineY">
+        <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
+      </div>
+      <div class="coord-labelY">
+        <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind == 0 ? maxY : '' }}</div>
+      </div>
+      <div class="coord-lineX">
+        <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
+      </div>
+      <div class="coord-labelX">
+        <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind == 9 ? maxX : '' }}</div>
+      </div>
+      <div class="line-AB" :style="{ width: 'calc(100% - 15px)', height: 'calc(100% - 10px)' }">
+        <canvas id="myCanvas" width="250" height="245"></canvas>
+      </div>
+      <div class="line-legend">
+        <div class="legend-ite" v-for="ite in 4" :key="ite"></div>
+      </div>
+      <div class="legend-name">
+        <div class="item-name" v-for="item in legendList" :key="item">{{ item.name }}</div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, watch, } from 'vue'
+  import { ref, reactive, onMounted, watch } from 'vue';
 
-let props = defineProps({
+  let props = defineProps({
     posMonitor: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    }
-})
-let coord = ref(null)
-let lengY = ref(0)
-//与x,y轴相交最大值坐标
-let maxY = ref(0)
-let maxX = ref(0)
-let maxY1 = ref(0)
-let maxX1 = ref(0)
-
-//A点坐标
-let coordinateA = reactive({
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  });
+  let coord = ref(null);
+  let lengY = ref(0);
+  //与x,y轴相交最大值坐标
+  let maxY = ref(0);
+  let maxX = ref(0);
+  let maxY1 = ref(0);
+  let maxX1 = ref(0);
+
+  //A点坐标
+  let coordinateA = reactive({
     x: 0,
     y: 0,
-})
-//B点坐标
-let coordinateB = reactive({
+  });
+  //B点坐标
+  let coordinateB = reactive({
     x: 0,
     y: 0,
-})
-//E点坐标
-let coordinateE = reactive({
+  });
+  //E点坐标
+  let coordinateE = reactive({
     x: 0,
     y: 0,
-})
-//F点坐标
-let coordinateF = reactive({
+  });
+  //F点坐标
+  let coordinateF = reactive({
     x: 0,
     y: 0,
-})
-//G点坐标
-let coordinateG = reactive({
+  });
+  //G点坐标
+  let coordinateG = reactive({
     x: 0,
     y: 0,
-})
+  });
 
-let legendList = ref<any[]>([
-    { name: '不爆炸' },
-    { name: '可燃气体不足' },
-    { name: '可爆炸' },
-    { name: '氧气不足' },
-])
+  let legendList = ref<any[]>([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
 
-
-function getAreas() {
+  function getAreas() {
     if (coord.value) {
-        let width = coord.value.offsetWidth
-        let height = coord.value.offsetHeight
-        lengY.value = Math.ceil((height - 10) / 10)
+      let width = coord.value.offsetWidth;
+      let height = coord.value.offsetHeight;
+      lengY.value = Math.ceil((height - 10) / 10);
     }
-
-}
-//根据A,B,E,G等点坐标绘制爆炸三角形
-function getBlast() {
-    maxY.value = getCoordABY(0)
-    maxX.value = getCoordABX(0)
+  }
+  //根据A,B,E,G等点坐标绘制爆炸三角形
+  function getBlast() {
+    maxY.value = getCoordABY(0);
+    maxX.value = getCoordABX(0);
     // 获取canvas元素
     let canvas = document.getElementById('myCanvas');
     let ctx = canvas.getContext('2d');
-    let scalcY = canvas.height / maxY.value
-    let scalcX = canvas.width / maxX.value
+    let scalcY = canvas.height / maxY.value;
+    let scalcX = canvas.width / maxX.value;
 
     //绘制AB点线条
     ctx.beginPath();
-    ctx.moveTo(coordinateA.x * scalcX, canvas.height - (coordinateA.y * scalcY)); // 开始绘制的点
-    ctx.lineTo(coordinateB.x * scalcX, canvas.height - (coordinateB.y * scalcY)); // 结束绘制的点
+    ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+    ctx.lineTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 结束绘制的点
     ctx.strokeStyle = '#000';
     ctx.stroke(); // 进行绘制
 
-
     //绘制AE线条
     ctx.beginPath();
-    ctx.moveTo(coordinateA.x * scalcX, canvas.height - (coordinateA.y * scalcY)); // 开始绘制的点
-    ctx.lineTo(coordinateE.x * scalcX, canvas.height - (coordinateE.y * scalcY)); // 结束绘制的点
+    ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+    ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
     ctx.strokeStyle = '#000';
     ctx.stroke(); // 进行绘制
 
     //绘制BE线条
     ctx.beginPath();
-    ctx.moveTo(coordinateB.x * scalcX, canvas.height - (coordinateB.y * scalcY)); // 开始绘制的点
-    ctx.lineTo(coordinateE.x * scalcX, canvas.height - (coordinateE.y * scalcY)); // 结束绘制的点
+    ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
+    ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
     ctx.strokeStyle = '#000';
     ctx.stroke(); // 进行绘制
 
     //绘制A点与坐标轴连线
     ctx.beginPath();
-    ctx.moveTo(0, canvas.height - (maxY.value * scalcY)); // 开始绘制的点
-    ctx.lineTo(coordinateA.x * scalcX, canvas.height - (coordinateA.y * scalcY)); // 结束绘制的点
+    ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
+    ctx.lineTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 结束绘制的点
     ctx.strokeStyle = '#000';
     ctx.stroke(); // 进行绘制
 
     //绘制B点与坐标轴连线
     ctx.beginPath();
-    ctx.moveTo(coordinateB.x * scalcX, canvas.height - (coordinateB.y * scalcY)); // 开始绘制的点
+    ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
     ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
     ctx.strokeStyle = '#000';
     ctx.stroke(); // 进行绘制
 
     //绘制E,F线条
     ctx.beginPath();
-    ctx.moveTo(coordinateE.x * scalcX, canvas.height - (coordinateE.y * scalcY)); // 开始绘制的点
-    ctx.lineTo(coordinateF.x * scalcX, canvas.height - (coordinateF.y * scalcY)); // 结束绘制的点
+    ctx.moveTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 开始绘制的点
+    ctx.lineTo(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY); // 结束绘制的点
     ctx.strokeStyle = '#000';
     ctx.stroke(); // 进行绘制
 
     //绘制GE线条
     ctx.beginPath();
-    ctx.moveTo(coordinateG.x * scalcX, canvas.height - (coordinateG.y * scalcY)); // 开始绘制的点
-    ctx.lineTo(coordinateE.x * scalcX, canvas.height - (coordinateE.y * scalcY)); // 结束绘制的点
+    ctx.moveTo(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY); // 开始绘制的点
+    ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
     ctx.strokeStyle = '#000';
     ctx.stroke(); // 进行绘制
 
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     let pointData = [
-        {
-            arr: [
-                { x: coordinateG.x * scalcX, y: canvas.height - (coordinateG.y * scalcY) },//G
-                { x: coordinateE.x * scalcX, y: canvas.height - (coordinateE.y * scalcY) },//E
-                { x: coordinateA.x * scalcX, y: canvas.height - (coordinateA.y * scalcY) },//A
-                { x: 0, y: canvas.height - (maxY.value * scalcY) }
-            ],
-            color: 'rgb(1, 127, 2, .9)',
-        },
-        {
-            arr: [
-                { x: 0, y: canvas.height },//原点
-                { x: coordinateF.x * scalcX, y: canvas.height - (coordinateF.y * scalcY) },//F
-                { x: coordinateE.x * scalcX, y: canvas.height - (coordinateE.y * scalcY) },//E
-                { x: coordinateG.x * scalcX, y: canvas.height - (coordinateG.y * scalcY) },//G
-            ],
-            color: 'rgb(127, 254, 2, .9)',
-        },
-        {
-            arr: [
-                { x: coordinateF.x * scalcX, y: canvas.height - (coordinateF.y * scalcY) },//F
-                { x: maxX.value * scalcX, y: canvas.height },
-                { x: coordinateB.x * scalcX, y: canvas.height - (coordinateB.y * scalcY) },//B
-                { x: coordinateE.x * scalcX, y: canvas.height - (coordinateE.y * scalcY) },//E
-            ],
-            color: 'rgb(255, 255, 0, .9)',
-        },
-        {
-            arr: [
-                { x: coordinateE.x * scalcX, y: canvas.height - (coordinateE.y * scalcY) },//E
-                { x: coordinateB.x * scalcX, y: canvas.height - (coordinateB.y * scalcY) },//B
-                { x: coordinateA.x * scalcX, y: canvas.height - (coordinateA.y * scalcY) },//A
-            ],
-            color: 'rgb(255, 0, 0, .9)',
-        },
-    ]
+      {
+        arr: [
+          { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
+          { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+          { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
+          { x: 0, y: canvas.height - maxY.value * scalcY },
+        ],
+        color: 'rgb(1, 127, 2, .9)',
+      },
+      {
+        arr: [
+          { x: 0, y: canvas.height }, //原点
+          { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
+          { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+          { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
+        ],
+        color: 'rgb(127, 254, 2, .9)',
+      },
+      {
+        arr: [
+          { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
+          { x: maxX.value * scalcX, y: canvas.height },
+          { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
+          { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        ],
+        color: 'rgb(255, 255, 0, .9)',
+      },
+      {
+        arr: [
+          { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+          { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
+          { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
+        ],
+        color: 'rgb(255, 0, 0, .9)',
+      },
+    ];
 
     pointData.forEach((item, index) => {
-        ctx.beginPath();
-        ctx.moveTo(item.arr[0].x, item.arr[0].y);
-        item.arr.forEach((items, ind) => {
-            if (ind != 0) {
-                ctx.lineTo(item.arr[ind].x, item.arr[ind].y)
-            }
-        });
-        ctx.closePath();
-        ctx.fillStyle = item.color;
-        ctx.fill();
-        ctx.strokeStyle = "transparent";
-        ctx.lineWidth = 1;
-        ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(item.arr[0].x, item.arr[0].y);
+      item.arr.forEach((items, ind) => {
+        if (ind != 0) {
+          ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+        }
+      });
+      ctx.closePath();
+      ctx.fillStyle = item.color;
+      ctx.fill();
+      ctx.strokeStyle = 'transparent';
+      ctx.lineWidth = 1;
+      ctx.stroke();
     });
 
     // 标记点A
     ctx.beginPath();
-    ctx.arc(coordinateA.x * scalcX, canvas.height - (coordinateA.y * scalcY), 1, 0, 2 * Math.PI);
-    ctx.fillStyle = "#eee";
+    ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
     ctx.fill();
     // 在点附近添加文字
-    ctx.font = "12px Arial";
-    ctx.fillStyle = "#fff";
-    ctx.fillText("A", coordinateA.x * scalcX + 10, canvas.height - (coordinateA.y * scalcY)); // 文字位置略微偏上，以便于文字与点对齐
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
 
     //标记点B
     ctx.beginPath();
-    ctx.arc(coordinateB.x * scalcX, canvas.height - (coordinateB.y * scalcY), 1, 0, 2 * Math.PI);
-    ctx.fillStyle = "#eee";
+    ctx.arc(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
     ctx.fill();
     // 在点附近添加文字
-    ctx.font = "12px Arial";
-    ctx.fillStyle = "#fff";
-    ctx.fillText("B", coordinateB.x * scalcX + 10, canvas.height - (coordinateB.y * scalcY)); // 文字位置略微偏上，以便于文字与点对齐
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('B', coordinateB.x * scalcX + 10, canvas.height - coordinateB.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
 
     //标记点E
     ctx.beginPath();
-    ctx.arc(coordinateE.x * scalcX, canvas.height - (coordinateE.y * scalcY), 1, 0, 2 * Math.PI);
-    ctx.fillStyle = "#eee";
+    ctx.arc(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
     ctx.fill();
     // 在点附近添加文字
-    ctx.font = "12px Arial";
-    ctx.fillStyle = "#fff";
-    ctx.fillText("E", coordinateE.x * scalcX + 5, canvas.height - (coordinateE.y * scalcY) + 10); // 文字位置略微偏上，以便于文字与点对齐
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('E', coordinateE.x * scalcX + 5, canvas.height - coordinateE.y * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
 
     //标记点G
     ctx.beginPath();
-    ctx.arc(coordinateG.x * scalcX, canvas.height - (coordinateG.y * scalcY), 1, 0, 2 * Math.PI);
-    ctx.fillStyle = "#eee";
+    ctx.arc(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
     ctx.fill();
     // 在点附近添加文字
-    ctx.font = "12px Arial";
-    ctx.fillStyle = "#fff";
-    ctx.fillText("G", coordinateG.x * scalcX + 5, canvas.height - (coordinateG.y * scalcY)); // 文字位置略微偏上，以便于文字与点对齐
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('G', coordinateG.x * scalcX + 5, canvas.height - coordinateG.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
     //标记点F
     ctx.beginPath();
-    ctx.arc(coordinateF.x * scalcX, canvas.height - (coordinateF.y * scalcY), 1, 0, 2 * Math.PI);
-    ctx.fillStyle = "#eee";
+    ctx.arc(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
     ctx.fill();
     // 在点附近添加文字
-    ctx.font = "12px Arial";
-    ctx.fillStyle = "#fff";
-    ctx.fillText("F", coordinateF.x * scalcX + 10, canvas.height - (coordinateF.y * scalcY) - 10); // 文字位置略微偏上，以便于文字与点对齐
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('F', coordinateF.x * scalcX + 10, canvas.height - coordinateF.y * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
     //标记点
     ctx.beginPath();
-    ctx.arc(maxX1.value * scalcX, canvas.height - (maxY1.value * scalcY), 5, 0, 2 * Math.PI);
-    ctx.fillStyle = "blue";
+    ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+    ctx.fillStyle = 'blue';
     ctx.fill();
     // 在点附近添加文字
-    ctx.font = "12px Arial";
-    ctx.fillStyle = "#fff";
-    ctx.fillText("", maxX1.value * scalcX + 10, canvas.height - (maxY1.value * scalcY) - 10); // 文字位置略微偏上，以便于文字与点对齐
-}
-//绘制不爆炸三角形
-function getUnblast() {
-    maxY.value = 21
-    maxX.value = 100
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+  }
+  //绘制不爆炸三角形
+  function getUnblast() {
+    maxY.value = 21;
+    maxX.value = 100;
     // 获取canvas元素
     let canvas = document.getElementById('myCanvas');
     let ctx = canvas.getContext('2d');
-    let scalcY = canvas.height / maxY.value
-    let scalcX = canvas.width / maxX.value
+    let scalcY = canvas.height / maxY.value;
+    let scalcX = canvas.width / maxX.value;
 
     //绘制AB点线条
     ctx.beginPath();
-    ctx.moveTo(0, canvas.height - (maxY.value * scalcY)); // 开始绘制的点
+    ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
     ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
     ctx.strokeStyle = '#000';
     ctx.stroke(); // 进行绘制
 
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     let pointData = [
-        {
-            arr: [
-                { x: 0, y: canvas.height },//原点
-                { x: 0, y: canvas.height - (maxY.value * scalcY) },//A
-                { x: maxX.value * scalcX, y: canvas.height },//B
-            ],
-            color: 'rgb(127, 254, 2, .9)',
-        },
-    ]
+      {
+        arr: [
+          { x: 0, y: canvas.height }, //原点
+          { x: 0, y: canvas.height - maxY.value * scalcY }, //A
+          { x: maxX.value * scalcX, y: canvas.height }, //B
+        ],
+        color: 'rgb(127, 254, 2, .9)',
+      },
+    ];
 
     pointData.forEach((item, index) => {
-        ctx.beginPath();
-        ctx.moveTo(item.arr[0].x, item.arr[0].y);
-        item.arr.forEach((items, ind) => {
-            if (ind != 0) {
-                ctx.lineTo(item.arr[ind].x, item.arr[ind].y)
-            }
-        });
-        ctx.closePath();
-        ctx.fillStyle = item.color;
-        ctx.fill();
-        ctx.strokeStyle = "transparent";
-        ctx.lineWidth = 1;
-        ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(item.arr[0].x, item.arr[0].y);
+      item.arr.forEach((items, ind) => {
+        if (ind != 0) {
+          ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+        }
+      });
+      ctx.closePath();
+      ctx.fillStyle = item.color;
+      ctx.fill();
+      ctx.strokeStyle = 'transparent';
+      ctx.lineWidth = 1;
+      ctx.stroke();
     });
 
     // 标记点A
     ctx.beginPath();
-    ctx.arc(0, canvas.height - (maxY.value * scalcY), 1, 0, 2 * Math.PI);
-    ctx.fillStyle = "#eee";
+    ctx.arc(0, canvas.height - maxY.value * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
     ctx.fill();
     // 在点附近添加文字
-    ctx.font = "12px Arial";
-    ctx.fillStyle = "#fff";
-    ctx.fillText("A", 10, canvas.height - (maxY.value * scalcY) + 10); // 文字位置略微偏上，以便于文字与点对齐
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('A', 10, canvas.height - maxY.value * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
     // 标记点B
     ctx.beginPath();
     ctx.arc(maxX.value * scalcX, canvas.height, 1, 0, 2 * Math.PI);
-    ctx.fillStyle = "#eee";
+    ctx.fillStyle = '#eee';
     ctx.fill();
     // 在点附近添加文字
-    ctx.font = "12px Arial";
-    ctx.fillStyle = "#fff";
-    ctx.fillText("B", maxX.value * scalcX - 10, canvas.height - 10); // 文字位置略微偏上，以便于文字与点对齐
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('B', maxX.value * scalcX - 10, canvas.height - 10); // 文字位置略微偏上，以便于文字与点对齐
     //标记点
     ctx.beginPath();
-    ctx.arc(maxX1.value * scalcX, canvas.height - (maxY1.value * scalcY), 5, 0, 2 * Math.PI);
-    ctx.fillStyle = "blue";
+    ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+    ctx.fillStyle = 'blue';
     ctx.fill();
     // 在点附近添加文字
-    ctx.font = "12px Arial";
-    ctx.fillStyle = "#fff";
-    ctx.fillText("", maxX1.value * scalcX + 10, canvas.height - (maxY1.value * scalcY) - 10); // 文字位置略微偏上，以便于文字与点对齐
-}
-//根据横坐标获取直线AB纵坐标
-function getCoordABY(params) {
-    return Math.ceil(((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params - parseFloat(coordinateA.x) * parseFloat(coordinateB.y) + parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) / (parseFloat(coordinateB.x) - parseFloat(coordinateA.x)))
-}
-//根据纵坐标获取直线AB横坐标
-function getCoordABX(params1) {
-    return Math.floor(((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 + parseFloat(coordinateA.x) * parseFloat(coordinateB.y) - parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) / (parseFloat(coordinateB.y) - parseFloat(coordinateA.y)))
-}
-
-watch(() => props.posMonitor, (newV, oldV) => {
-    maxY1.value =parseFloat(newV.o2val) 
-    maxX1.value = parseFloat(newV.coval)* 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val)*0.0001 + parseFloat(newV.chval)*0.0001
-    let btTriBlasts = JSON.parse(newV.btTriBlast)
-    coordinateA.x = btTriBlasts.A_x
-    coordinateA.y = btTriBlasts.A_y
-    coordinateB.x = btTriBlasts.B_x
-    coordinateB.y = btTriBlasts.B_y
-    coordinateE.x = btTriBlasts.E_x
-    coordinateE.y = btTriBlasts.E_y
-    coordinateF.x = btTriBlasts.F_x
-    coordinateF.y = btTriBlasts.F_y
-    coordinateG.x = btTriBlasts.G_x
-    coordinateG.y = btTriBlasts.G_y
-    if (!((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) || (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1) {
-        getUnblast()
-    } else {
-        getBlast()
-    }
-}, { deep: true })
-
-onMounted(() => {
-    getAreas()
-})
-
-
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+  }
+  //根据横坐标获取直线AB纵坐标
+  function getCoordABY(params) {
+    return Math.ceil(
+      ((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params -
+        parseFloat(coordinateA.x) * parseFloat(coordinateB.y) +
+        parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+        (parseFloat(coordinateB.x) - parseFloat(coordinateA.x))
+    );
+  }
+  //根据纵坐标获取直线AB横坐标
+  function getCoordABX(params1) {
+    return Math.floor(
+      ((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 +
+        parseFloat(coordinateA.x) * parseFloat(coordinateB.y) -
+        parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+        (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
+    );
+  }
+
+  watch(
+    () => props.posMonitor,
+    (newV, oldV) => {
+      maxY1.value = parseFloat(newV.o2val);
+      maxX1.value = parseFloat(newV.coval) * 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val) * 0.0001 + parseFloat(newV.chval) * 0.0001;
+      let btTriBlasts = JSON.parse(newV.btTriBlast);
+      coordinateA.x = btTriBlasts.A_x;
+      coordinateA.y = btTriBlasts.A_y;
+      coordinateB.x = btTriBlasts.B_x;
+      coordinateB.y = btTriBlasts.B_y;
+      coordinateE.x = btTriBlasts.E_x;
+      coordinateE.y = btTriBlasts.E_y;
+      coordinateF.x = btTriBlasts.F_x;
+      coordinateF.y = btTriBlasts.F_y;
+      coordinateG.x = btTriBlasts.G_x;
+      coordinateG.y = btTriBlasts.G_y;
+      if (
+        !((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) ||
+        (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1
+      ) {
+        getUnblast();
+      } else {
+        getBlast();
+      }
+    },
+    { deep: true }
+  );
+
+  onMounted(() => {
+    getAreas();
+  });
 </script>
 
 <style lang="less" scoped>
-.blastDelta {
+  .blastDelta {
     position: relative;
     width: 100%;
     height: 100%;
 
     .blast-title {
-        position: absolute;
-        left: 50%;
-        top: 24px;
-        transform: translate(-50%, 0);
-        font-size: 12px;
-        color: #fff;
+      position: absolute;
+      left: 50%;
+      top: 24px;
+      transform: translate(-50%, 0);
+      font-size: 12px;
+      color: #fff;
     }
 
     .coords {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 80%;
+      height: 80%;
+      border-left: 1px solid #006c9d;
+      border-bottom: 1px solid #006c9d;
+      transform: translate(-50%, -50%);
+
+      .coord-lineY {
         position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 80%;
-        height: 80%;
-        border-left: 1px solid #006c9d;
-        border-bottom: 1px solid #006c9d;
-        transform: translate(-50%, -50%);
-
-        .coord-lineY {
-            position: absolute;
-            left: -5px;
-            top: 10px;
-            width: 5px;
-            height: calc(100% - 10px);
-        }
+        left: -5px;
+        top: 10px;
+        width: 5px;
+        height: calc(100% - 10px);
+      }
 
-        .coord-labelY {
-            position: absolute;
-            left: -25px;
-            top: -5px;
-            width: 20px;
-            height: 100%;
-        }
-
-        .coord-lineX {
-            display: flex;
-            position: absolute;
-            bottom: -5px;
-            right: 10px;
-            width: calc(100% - 10px);
-            height: 5px;
-        }
-
-        .coord-labelX {
-            display: flex;
-            justify-content: flex-end;
-            position: absolute;
-            bottom: -25px;
-            left: -5px;
-            width: 100%;
-            height: 20px;
-        }
+      .coord-labelY {
+        position: absolute;
+        left: -25px;
+        top: -5px;
+        width: 20px;
+        height: 100%;
+      }
+
+      .coord-lineX {
+        display: flex;
+        position: absolute;
+        bottom: -5px;
+        right: 10px;
+        width: calc(100% - 10px);
+        height: 5px;
+      }
+
+      .coord-labelX {
+        display: flex;
+        justify-content: flex-end;
+        position: absolute;
+        bottom: -25px;
+        left: -5px;
+        width: 100%;
+        height: 20px;
+      }
 
-        .line-AB {
-            position: absolute;
-            left: 0;
-            top: 10px;
-        }
+      .line-AB {
+        position: absolute;
+        left: 0;
+        top: 10px;
+      }
 
-        .line-legend {
-            position: absolute;
-            right: 80px;
-            top: 20px;
-            width: 20px;
-            height: 80px;
-
-            .legend-ite {
-                width: 20px;
-                height: 20px;
-
-                &:nth-child(1) {
-                    background-color: #7ffe02;
-                }
-
-                &:nth-child(2) {
-                    background-color: #017f02;
-                }
-
-                &:nth-child(3) {
-                    background-color: #ff0000;
-                }
-
-                &:nth-child(4) {
-                    background-color: #ffff00;
-                }
-            }
+      .line-legend {
+        position: absolute;
+        right: 80px;
+        top: 20px;
+        width: 20px;
+        height: 80px;
+
+        .legend-ite {
+          width: 20px;
+          height: 20px;
+
+          &:nth-child(1) {
+            background-color: #7ffe02;
+          }
+
+          &:nth-child(2) {
+            background-color: #017f02;
+          }
+
+          &:nth-child(3) {
+            background-color: #ff0000;
+          }
+
+          &:nth-child(4) {
+            background-color: #ffff00;
+          }
         }
+      }
 
-        .legend-name {
-            position: absolute;
-            right: 0;
-            top: 20px;
-            height: 80px;
-
-            .item-name {
-                height: 20px;
-                line-height: 20px;
-                font-size: 10px;
-                color: #fff;
-                letter-spacing: 2px;
-            }
+      .legend-name {
+        position: absolute;
+        right: 0;
+        top: 20px;
+        height: 80px;
+
+        .item-name {
+          height: 20px;
+          line-height: 20px;
+          font-size: 10px;
+          color: #fff;
+          letter-spacing: 2px;
         }
-
-
+      }
     }
-}
-</style>
+  }
+</style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/bundle.modal.vue

@@ -1,10 +1,21 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情 ${currentTime}`" width="1200px" @ok="handleOk"
-    @cancel="handleCancel" wrapClassName="bundle-modal">
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    :title="`束管监测详情 ${currentTime}`"
+    width="1200px"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    wrapClassName="bundle-modal"
+  >
     <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>
@@ -17,8 +28,7 @@
             </div>
             <div class="item-container">
               <div class="title">一氧化碳</div>
-              <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-'
-                }} <span>ppm</span> </div>
+              <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-' }} <span>ppm</span> </div>
             </div>
           </div>
           <div class="top-item">
@@ -27,8 +37,7 @@
             </div>
             <div class="item-container">
               <div class="title">二氧化碳</div>
-              <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val :
-                '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -37,8 +46,7 @@
             </div>
             <div class="item-container">
               <div class="title">甲烷</div>
-              <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval :
-                '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -47,8 +55,7 @@
             </div>
             <div class="item-container">
               <div class="title">乙烯</div>
-              <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val :
-                '-' }} <span>ppm</span></div>
+              <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val : '-' }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -57,8 +64,7 @@
             </div>
             <div class="item-container">
               <div class="title">乙炔</div>
-              <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-'
-                }} <span>ppm</span></div>
+              <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-' }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -67,8 +73,7 @@
             </div>
             <div class="item-container">
               <div class="title">氧气</div>
-              <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-'
-                }} <span>%</span></div>
+              <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item warning-box">
@@ -91,11 +96,20 @@
           </div>
         </div>
         <div class="right-bottom">
-          <span class="base-title">设备监测曲线&nbsp; <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' :
-            '' }}</span></span>
+          <span class="base-title"
+            >设备监测曲线&nbsp; <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' : '' }}</span></span
+          >
           <div class="echarts-box">
-            <BarAndLine class="echarts-line" xAxisPropType="time" :dataSource="historyList" height="100%" width="65%"
-              :chartsColumns="chartsColumns" :option="echatsOption" chartsType="listMonitor" />
+            <BarAndLine
+              class="echarts-line"
+              xAxisPropType="time"
+              :dataSource="historyList"
+              height="100%"
+              width="65%"
+              :chartsColumns="chartsColumns"
+              :option="echatsOption"
+              chartsType="listMonitor"
+            />
 
             <!-- 爆炸三角形 -->
             <div style="width: 35%; height: 100%; margin: 0px auto">
@@ -108,382 +122,396 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import blastDelta from './blastDelta.vue';
-import { SvgIcon } from '/@/components/Icon';
-import dayjs from 'dayjs';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { chartsColumnList } from '../device.data';
-import { listdays, getHistoryData } from '../device.api';
-
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, blastDelta },
-  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('');
-    const deviceList = ref<any[]>([]);
-    const historyList = ref<any[]>([]);
-    const posList = ref<any[]>([]);
-    const posMonitor = shallowRef({});
-
-    const echatsOption = {
-      grid: {
-        top: '29%',
-        left: '3',
-        right: '45',
-        bottom: '3%',
-        containLabel: true,
-      },
-      toolbox: {
-        feature: {},
-      },
-    };
-
-    const chartsColumnArr = getTableHeaderColumns('bundletube_chart');
-    const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
-
-    const [register, { setModalProps, closeModal }] = useModalInner();
-
-    function handleVisibleChange(visible) {
-      if (visible) {
+  import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import blastDelta from './blastDelta.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import dayjs from 'dayjs';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { chartsColumnList } from '../device.data';
+  import { listdays, getHistoryData } from '../device.api';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, blastDelta },
+    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('');
+      const deviceList = ref<any[]>([]);
+      const historyList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
+
+      const echatsOption = {
+        grid: {
+          top: '29%',
+          left: '3',
+          right: '45',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumnArr = getTableHeaderColumns('bundletube_chart');
+      const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
+
+      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);
+        getListdays();
       }
-    }
 
-    // 选择监测
-    function selectDevice(id) {
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-      setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id;
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-      getListdays();
-    }
-
-    function handleOk(e) {
-      e.preventDefault();
-      closeModal();
-    }
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-    function handleCancel(e) {
-      e.preventDefault();
-      closeModal();
-    }
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-    //获取历史数据
-    async function getListdays() {
-      if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
-        const ttime_begin = dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD hh:mm:ss');
-        const ttime_end = dayjs(new Date().getTime()).format('YYYY-MM-DD hh:mm:ss');
-        const pageNo = 1;
-        const pageSize = 100;
-        const skip = 8;
-        const strtype = 'bundletube_auto';
-        let res = await listdays({ ttime_begin, ttime_end, pageNo, pageSize, skip, strtype, gdeviceid: activeDeviceID.value });
-        console.log(res, '束管历史数据');
-        let data = res.datalist.records;
-        if (data.length != 0) {
-          data.forEach((el) => {
-            Object.assign(el, el.readData);
+      //获取历史数据
+      async function getListdays() {
+        if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
+          // const ttime_begin = dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD hh:mm:ss');
+          // const ttime_end = dayjs(new Date().getTime()).format('YYYY-MM-DD hh:mm:ss');
+          const ttime_begin = dayjs().startOf('date').format('YYYY-MM-DD hh:mm:ss');
+          const ttime_end = dayjs().format('YYYY-MM-DD hh:mm:ss');
+          const pageNo = 1;
+          const pageSize = 100;
+          const skip = 8;
+          const strtype = posMonitor.value.deviceType;
+          let res = await listdays({
+            ttime_begin,
+            ttime_end,
+            pageNo,
+            pageSize,
+            skip,
+            strtype,
+            column: 'createTime',
+            gdeviceid: activeDeviceID.value,
           });
+          console.log(res, '束管历史数据');
+          let data = res.datalist.records;
+          if (data.length != 0) {
+            data.forEach((el) => {
+              Object.assign(el, el.readData);
+            });
+          }
+          historyList.value = data;
+        } else {
+          const params = {
+            pageNum: 1,
+            pageSize: 100,
+            startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD hh:mm:ss'),
+            endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD hh:mm:ss'),
+            deviceId: activeDeviceID.value,
+            interval: '1h',
+            isEmployee: true,
+          };
+          const result = await getHistoryData({ ...params });
+          if (result['records'].length != 0) {
+            result['records'].forEach((el) => {
+              el.ch2val = el.C2H4;
+              el.chval = el.C2H2;
+              el.co2val = el.CO2;
+              el.coval = el.CO;
+              el.gasval = el.CH4;
+              el.o2val = el.O2;
+            });
+          }
+          historyList.value = result['records'];
         }
-        historyList.value = data;
-      } else {
-        const params = {
-          pageNum: 1,
-          pageSize: 100,
-          startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD hh:mm:ss'),
-          endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD hh:mm:ss'),
-          deviceId: activeDeviceID.value,
-          interval: '1h',
-          isEmployee: true,
-        };
-        const result = await getHistoryData({ ...params });
-        if (result['records'].length != 0) {
-          result['records'].forEach(el => {
-            el.ch2val = el.C2H4
-            el.chval = el.C2H2
-            el.co2val = el.CO2
-            el.coval = el.CO
-            el.gasval = el.CH4
-            el.o2val = el.O2
-          })
-        }
-        historyList.value = result['records'];
       }
 
-    }
-
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      // if (newActiveID != oldActiveID) {
-      //   activeDeviceID.value = newActiveID as string;
-      // }
-      activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-      deviceList.value = newDataSource?.filter((item: any, index) => {
-        if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-          // activeDeviceID.value = item.deviceID;
-          posMonitor.value = Object.assign(item, item.readData);
-
-        }
-        item.readTime = item.readTime?.substring(11);
-        return item;
+      watch(
+        [() => props.dataSource, () => props.activeID],
+        ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+          // if (newActiveID != oldActiveID) {
+          //   activeDeviceID.value = newActiveID as string;
+          // }
+          activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+          deviceList.value = newDataSource?.filter((item: any, index) => {
+            if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+              // activeDeviceID.value = item.deviceID;
+              posMonitor.value = Object.assign(item, item.readData);
+            }
+            item.readTime = item.readTime?.substring(11);
+            return item;
+          });
+          debugger;
+        },
+        { immediate: true }
+      );
+      onMounted(() => {
+        getListdays();
       });
-    }, { immediate: true });
-    onMounted(() => {
-      getListdays();
-    })
-    return {
-      register,
-      model: modelRef,
-      currentTime,
-      handleVisibleChange,
-      selectDevice,
-      handleOk,
-      handleCancel,
-      deviceList,
-      historyList,
-      activeDeviceID,
-      posMonitor,
-      echatsOption,
-      posList,
-      chartsColumns,
-    };
-  },
-});
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        historyList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+      };
+    },
+  });
 </script>
 <style lang="less">
-.bundle-modal {
-  .zxm-modal {
-    top: 30px !important;
+  .bundle-modal {
+    .zxm-modal {
+      top: 30px !important;
+    }
   }
-}
 </style>
 
 <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;
-      flex-wrap: wrap;
-      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: 220px;
-        height: 100px;
+      .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: 20px;
-        margin: 10px 0;
-
-        .icon {
-          margin-right: 10px;
-          margin-top: 5px;
-          color: #fdb146;
-        }
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-bottom: 10px;
 
-        .item-container {
-          width: 110px;
+        .top-item {
+          width: 220px;
+          height: 100px;
           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: 20px;
+          margin: 10px 0;
+
+          .icon {
+            margin-right: 10px;
+            margin-top: 5px;
+            color: #fdb146;
           }
 
-          .title {
-            font-size: 18px;
-          }
+          .item-container {
+            width: 110px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            div {
+              text-align: 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;
+            .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;
 
-          :deep(.icon-style) {
-            width: auto;
-            color: #fdb146;
+            :deep(.icon-style) {
+              width: auto;
+              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: 500px;
-        height: 250px;
-      }
+        .table-box {
+          position: relative;
+          width: 500px;
+          height: 250px;
+        }
 
-      .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: 320px;
-        position: relative;
-        display: flex;
-        justify-content: space-between;
+        .echarts-box {
+          width: 100%;
+          height: 320px;
+          position: relative;
+          display: flex;
+          justify-content: space-between;
 
-        .echarts-line {
-          width: calc(100% + 80px);
-          position: absolute;
+          .echarts-line {
+            width: calc(100% + 80px);
+            position: absolute;
+          }
         }
       }
     }
   }
-}
 
-: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/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>
@@ -82,7 +85,7 @@
   import { formatNum } from '/@/utils/ventutil';
 
   export default defineComponent({
-    components: { BasicModal, BarAndLine, SvgIcon},
+    components: { BasicModal, BarAndLine, SvgIcon },
     props: {
       dataSource: { type: Array },
       activeID: { type: String },
@@ -114,7 +117,7 @@
         {
           legend: '测点温度',
           seriesName: '(℃)',
-          ymax: 200,
+          ymax: 100,
           yname: '℃',
           linetype: 'line',
           yaxispos: 'left',
@@ -223,7 +226,7 @@
         history,
         chartsColumns,
         columns,
-        formatNum
+        formatNum,
       };
     },
   });
@@ -381,10 +384,10 @@
           position: relative;
           width: 100%;
           height: 250px;
-          :deep(.zxm-table-wrapper){
+          :deep(.zxm-table-wrapper) {
             height: 220px !important;
             background: #ffffff05 !important;
-            border-bottom: 1px solid #91E9FE80 !important;
+            border-bottom: 1px solid #91e9fe80 !important;
           }
         }
 

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.hlg.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>
@@ -38,8 +41,14 @@
         <div class="right-bottom">
           <span class="base-title">测点监测曲线</span>
           <div class="echarts-box">
-            <BarAndLine xAxisPropType="Section_AlarmTemp" :dataSource="posList1" height="100%"
-              :chartsColumns="chartsColumns" :option="echatsOption" chartsType="listMonitor" />
+            <BarAndLine
+              xAxisPropType="Section_AlarmTemp"
+              :dataSource="posList1"
+              height="100%"
+              :chartsColumns="chartsColumns"
+              :option="echatsOption"
+              chartsType="listMonitor"
+            />
           </div>
         </div>
       </div>
@@ -91,7 +100,7 @@
         {
           legend: '测点报警温度',
           seriesName: '(℃)',
-          ymax: 200,
+          ymax: 100,
           yname: '℃',
           linetype: 'line',
           yaxispos: 'left',
@@ -231,7 +240,7 @@
         columns,
         warnLevels,
         maxTemp,
-        formatNum
+        formatNum,
         // warningConfig,
       };
     },
@@ -392,10 +401,10 @@
           // width: 500px;
           width: 100%;
           height: 250px;
-          :deep(.zxm-table-wrapper){
+          :deep(.zxm-table-wrapper) {
             height: 220px !important;
             background: #ffffff05 !important;
-            border-bottom: 1px solid #91E9FE80 !important;
+            border-bottom: 1px solid #91e9fe80 !important;
           }
         }
 

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.sjh.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>
@@ -63,8 +66,14 @@
         <div class="right-bottom">
           <span class="base-title">测点监测曲线</span>
           <div class="echarts-box">
-            <BarAndLine xAxisPropType="tempmax" :dataSource="posList1" height="100%" :chartsColumns="chartsColumns"
-              :option="echatsOption" chartsType="listMonitor" />
+            <BarAndLine
+              xAxisPropType="tempmax"
+              :dataSource="posList1"
+              height="100%"
+              :chartsColumns="chartsColumns"
+              :option="echatsOption"
+              chartsType="listMonitor"
+            />
           </div>
         </div>
       </div>
@@ -113,7 +122,7 @@
         {
           legend: '测点报警温度',
           seriesName: '(℃)',
-          ymax: 200,
+          ymax: 100,
           yname: '℃',
           linetype: 'line',
           yaxispos: 'left',
@@ -249,7 +258,7 @@
         posList1,
         chartsColumns,
         columns,
-        formatNum
+        formatNum,
         // warningConfig,
       };
     },
@@ -408,10 +417,10 @@
           position: relative;
           width: 100%;
           height: 250px;
-          :deep(.zxm-table-wrapper){
+          :deep(.zxm-table-wrapper) {
             height: 220px !important;
             background: #ffffff05 !important;
-            border-bottom: 1px solid #91E9FE80 !important;
+            border-bottom: 1px solid #91e9fe80 !important;
           }
         }
 

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

@@ -127,7 +127,7 @@
         {
           legend: '测点报警温度',
           seriesName: '(℃)',
-          ymax: 200,
+          ymax: 100,
           yname: '℃',
           linetype: 'line',
           yaxispos: 'left',
@@ -442,10 +442,10 @@
           position: relative;
           width: 500px;
           height: 250px;
-          :deep(.zxm-table-wrapper){
+          :deep(.zxm-table-wrapper) {
             height: 220px !important;
             background: #ffffff05 !important;
-            border-bottom: 1px solid #91E9FE80 !important;
+            border-bottom: 1px solid #91e9fe80 !important;
           }
         }
 

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

@@ -99,7 +99,7 @@
                 <a-table :columns="sensorColumns" :data-source="pageData.sensorDataList" :pagination="false" size="small" >
                   <template #bodyCell="{ column, record }">
                     <div v-if="column.dataIndex == 'action'">
-                       <a @click="goLocation(record.deviceID, record)">定位</a>
+                       <a @click="goLocation('device', record.deviceID, record)">定位</a>
                     </div>
                   </template>
                 </a-table>
@@ -114,10 +114,10 @@
                   <template #bodyCell="{ column, record }">
                     <div v-if="column.dataIndex == 'level'">
                       <span class="signal-round"
-                        :class="{ 'signal-round-red': record['level'] == 1, 'signal-round-orange': record['level'] == 2, 'signal-round-yellow': record['level'] == 3 }"></span>
+                        :class="{ 'signal-round-red': (record['level'] == 104 || record['level'] == 201), 'signal-round-orange': record['level'] == 103, 'signal-round-yellow': record['level'] == 102 }"></span>
                     </div>
                     <div v-if="column.dataIndex == 'action'">
-                      <a @click="goLocation(record.deviceID, record)">定位</a>
+                      <a @click="goLocation('device', record.deviceID, record)">定位</a>
                     </div>
                   </template>
                 </a-table>
@@ -160,7 +160,7 @@
                 <a-table :columns="columns" :data-source="tableDate" :pagination="false" size="small" >
                   <template #bodyCell="{ column, record }">
                     <div v-if="column.dataIndex == 'action'">
-                      <a @click="goLocation(record.deviceID, record)">定位</a>
+                      <a @click="goLocation(record['nTunID'] ? 'tunnel': 'device',record.deviceID, record)">定位</a>
                     </div>
                   </template>
                 </a-table>
@@ -233,7 +233,7 @@
 import { ref, onMounted, onUnmounted, defineEmits, defineProps, watch, reactive } from 'vue';
 import { Icon as SvgIcon } from '/@/components/Icon';
 import { BorderBox11, BorderBox1, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import { sensorColumns, networkColumns, warningColumns, deviceTab, SensorType, NetworkType, windowColumns, gateColumns, WindowType, GateType, solveTimesData } from './network.data'
+import { sensorColumns, networkColumns, warningColumns, deviceTab, SensorType, NetworkType, windowColumns, gateColumns, WindowType, WarningType, GateType, solveTimesData } from './network.data'
 import dayjs from 'dayjs'
 import { formatNum } from '/@/utils/ventutil'
 import { getActions } from '/@/qiankun/state';
@@ -260,7 +260,7 @@ const pageData = reactive({
   networkDataList: <NetworkType[]>[],
   gateDataList: <GateType[]>[],
   windowDataList: <WindowType[]>[],
-  warningDataList: []
+  warningDataList:<WarningType[]>[]
 })
 
 const show = ref(false)
@@ -324,6 +324,7 @@ function analyzePageResult(resultData){
   const networkDataList = <NetworkType[]>[]
   const gateDataList = <GateType[]>[]
   const windowDataList = <WindowType[]>[]
+  const warningDataList = <WarningType[]>[]
   
   if(resultData['solutionresult']){
     
@@ -379,6 +380,8 @@ function analyzePageResult(resultData){
         windowDataList.push(obj)
       }
 
+    
+
     if(solutionresult['MaxHPaths']){
       maxPaths.value = solutionresult['MaxHPaths']
     }
@@ -396,8 +399,16 @@ function analyzePageResult(resultData){
     }))
 
   }
-  
-  
+  if (resultData['warns'] && resultData['warns'].length > 0) {
+    resultData['warns'].forEach((item => {
+      const obj = {
+        deviceID: item['deviceid'],
+        pos: item['pos'] != null ? item['pos'] : '-', //地点
+        level: item['level'] != null ? item['level'].toFixed(2) : '-', //等级
+      }
+      warningDataList.push(obj)
+    }))
+  } 
   // const solutionresult = JSON.parse(result['result'])
   
   // if (solutionresult) {
@@ -406,7 +417,7 @@ function analyzePageResult(resultData){
   // }
   
   pageData.sensorDataList = sensorDataList
-  // pageData.warningDataList = result['warns']
+  pageData.warningDataList = warningDataList
   pageData.networkDataList = networkDataList
   pageData.gateDataList = gateDataList
   pageData.windowDataList = windowDataList
@@ -432,9 +443,9 @@ function setTable(code) {
   }
 }
 
-function goLocation(id: string, record:any) {
+function goLocation(type:string ,id: string, record:any) {
   console.log(id, record)
-  actions.setGlobalState({ locationId: id, locationObj: null, pageObj: null });
+  actions.setGlobalState({ locationObj: { pageType: type, deviceid: id }, pageObj: null });
 }
 
 watch(() => props.pageResult, (newData) => {
@@ -877,27 +888,27 @@ onUnmounted(() => {
           backdrop-filter: blur(5px);
         }
       }
-      .position11 {
+      .position1 {
         top: 128px;
         left: 120px;
       }
 
-      .position10 {
+      .position2 {
         top: 130px;
         left: 0px;
       }
 
-      .position9 {
+      .position3 {
         top: 52px;
         left: 100px;
       }
 
-      .position8 {
+      .position4 {
         top: 132px;
         left: 270px;
       }
 
-      .position7 {
+      .position5 {
         top: 128px;
         left: 420px;
       }
@@ -907,27 +918,27 @@ onUnmounted(() => {
         left: 320px;
       }
 
-      .position5 {
+      .position7 {
         top: 120px;
         left: 580px;
       }
 
-      .position4 {
+      .position8 {
         top: 123px;
         left: 690px;
       }
 
-      .position3 {
+      .position9 {
         top: 103px;
         left: 830px;
       }
 
-      .position2 {
+      .position10 {
         top: 90px;
         left: 740px;
       }
 
-      .position1 {
+      .position11 {
         top: 80px;
         left: 535px;
       }

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

@@ -7,6 +7,7 @@ export type SensorType = {
 
 export type NetworkType = {
   nTunID: string;
+  deviceID: string;
   strName: string;
   dHFric: number; // 摩擦阻力
   dHLocal: number; //局部阻力
@@ -18,6 +19,7 @@ export type NetworkType = {
 
 export type GateType = {
   nGateID: string;
+  deviceID: string;
   strName: string;
   data_dHDiff: number; //风门风压
   data_dQ_min: number; //风门漏风率
@@ -26,12 +28,19 @@ export type GateType = {
 
 export type WindowType = {
   nWindowID: string;
+  deviceID: string;
   strName: string;
   data_dHDiff: number; //风门风压
   data_dQ_min: number; //风门漏风率
   data_dQ_s: number; //风门漏风量
 };
 
+export type WarningType = {
+  deviceID: string;
+  pos: string;
+  level: number; //报警等级
+};
+
 let sensor1 = Number(7.78).toFixed(2),
   sensor2 = Number(1).toFixed(2),
   sensor3 = Number(0.53).toFixed(2),
@@ -309,29 +318,17 @@ export const networkData = () => {
 export const warningColumns: BasicColumn[] = [
   {
     title: '位置',
-    dataIndex: 'location',
+    dataIndex: 'pos',
     width: 180,
     align: 'center',
   },
   {
-    title: '类型',
-    dataIndex: 'type',
-    width: 100,
-    align: 'center',
-  },
-  {
     title: '等级',
     dataIndex: 'level',
     width: 70,
     align: 'center',
   },
   {
-    title: '信息',
-    dataIndex: 'msg',
-    width: 120,
-    align: 'center',
-  },
-  {
     title: '操作',
     dataIndex: 'action',
     width: 80,

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

@@ -72,7 +72,6 @@
       actions.setGlobalState({ pageObj: { pageType: 'home' } });
     }
     actions.onGlobalStateChange((newState) => {
-      debugger;
       for (const key in newState) {
         if (key === 'pageObj') {
           const pageObj = newState[key];

src/views/vent/monitorManager/nitrogen/components/nitrogenHistory.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="nitrogen-history">
-    <!-- <HistoryTable columns-type="forcFan" device-type="forcFan" designScope="forcFan_history" :scroll="{ y: 650 }" /> -->
+    <!-- <HistoryTable columns-type="forcFan" device-type="forcFan" designScope="forcFan_history" /> -->
     <HistoryTable device-code="forcFan" dict-code="forcFan_dict" columns-code="forcFan_history" />
   </div>
 </template>
 <script setup lang="ts">
-  // import HistoryTable from '../../comment/HistoryTable.vue';
+  // import HistoryTable from '/@/views/vent/monitorManager/comment/HistoryTable.vue';
   import HistoryTable from '/@/views/vent/comment/history/HistoryTable.vue';
 </script>
 <style lang="less" scoped>