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

src/design/vent/color.less

@@ -24,4 +24,6 @@
 @vent-gas-primary-bg: #0091ff;
 @vent-gas-primary-trasparent-bg: #0091ff12;
 // vent/gas 模块下的客制ListItem组件背景色
-@vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
+@vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
+@vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff55, #0091ff55);
+@vent-configurable-home-light-border: #3df6ff;

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

@@ -11,7 +11,7 @@
         </BaseCard>
       </a-col>
     </a-row>
-    <div style="position: absolute; top: 0; left: 0">
+    <div v-if="showBtn" style="position: absolute; top: 0; left: 0">
       <a-button @click="billboardType = 'dust'">切换粉尘看板</a-button>
       <a-button @click="billboardType = 'fire'">切换火灾看板</a-button>
       <a-button @click="billboardType = 'file'">切换文件看板</a-button>
@@ -23,13 +23,16 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, ref } from 'vue';
+  import { computed, onMounted, ref } from 'vue';
   import BaseCard from './components/BaseCard.vue';
   import ArrowButton from './components/ArrowButton.vue';
   import { BILLBOARDS, COMPONENTS_MAP } from './billboard.data';
+  import { useRoute } from 'vue-router';
   // import mapComponent from './components/3Dmap/index.vue';
 
-  const mainTitle = computed(() => '国家能源神东煤炭集团');
+  const route = useRoute();
+
+  const mainTitle = computed(() => '煤炭集团');
 
   // 一页最多支持几个看板项
   const billboards = ref(BILLBOARDS); // for test
@@ -46,6 +49,14 @@
   }
 
   const billboardType = ref('dust');
+  const showBtn = ref(true);
+
+  onMounted(() => {
+    if (route.query.type) {
+      billboardType.value = route.query.type as string;
+      showBtn.value = false;
+    }
+  });
 </script>
 <style lang="less" scoped>
   @font-face {

src/views/vent/home/configurable/components/AirVolumeMonitor.vue

@@ -9,11 +9,17 @@
     </div>
   </CostumeHeader>
   <Bar
+    :option="chartOption"
     series-prop-type="valueA"
     x-axis-prop-type="x"
     :chart-data="[
       { valueA: 1, valueB: 1, x: 2 },
       { valueA: 1, valueB: 1, x: 4 },
+      { valueA: 1, valueB: 1, x: 4 },
+      { valueA: 1, valueB: 1, x: 4 },
+      { valueA: 2, valueB: 2, x: 4 },
+      { valueA: 3, valueB: 1, x: 4 },
+      { valueA: 1, valueB: 1, x: 4 },
     ]"
     height="250px"
   />
@@ -28,6 +34,7 @@
   import CostumeHeader from './CostumeHeader.vue';
   import { RightCircleOutlined } from '@ant-design/icons-vue';
   import Bar from '/@/components/chart/Bar.vue';
+  import { EChartsOption, graphic } from 'echarts';
   // import MiniBoard from './MiniBoard.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -72,6 +79,36 @@
     });
   }
 
+  // 图表相关
+  const chartOption: EChartsOption = {
+    yAxis: {
+      splitLine: {
+        lineStyle: {
+          color: '#ffffff',
+          opacity: 0.3,
+        },
+      },
+    },
+    series: [
+      {
+        name: 'bar',
+        type: 'bar',
+        itemStyle: {
+          color: new graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#0091ffff' },
+            { offset: 1, color: '#0091ff44' },
+          ]),
+          borderRadius: [50, 50, 0, 0],
+        },
+        barWidth: 20,
+        data: [],
+      },
+    ],
+    textStyle: {
+      color: '#fff',
+    },
+  };
+
   onMounted(() => {
     fetchConfig();
   });

src/views/vent/home/configurable/components/DeviceWarning.vue

@@ -1,20 +1,26 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <CostumeHeader>
-    <template #select></template>
+    <template #select>
+      <!-- 填写空的div以覆盖默认的选择框 -->
+      <div></div>
+    </template>
     <div class="w-200px flex flex-items-center">
       <RightCircleOutlined class="w-30px" />
       <div class="flex-grow-1">
         网络断开
-        {{ warns.length }}
+        <span> {{ warns.length }}条 </span>
       </div>
     </div>
   </CostumeHeader>
-  <Timeline>
-    <TimelineItem v-for="(item, i) in warns" :key="`svvhccdw-${i}`">
-      {{ item.label }}
-    </TimelineItem>
-  </Timeline>
+  <div>
+    <div v-for="(item, i) in warns" :key="`svvhccdw-${i}`" class="flex items-center timeline-item">
+      <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`"></div>
+      <div class="timeline-item__dot"></div>
+      <div class="timeline-item__label">{{ item.label }}</div>
+      <div :class="`timeline-item__value_${item.color}`">{{ item.count }}</div>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue';
@@ -23,7 +29,6 @@
   import CostumeHeader from './CostumeHeader.vue';
   import { RightCircleOutlined } from '@ant-design/icons-vue';
   // import MiniBoard from './MiniBoard.vue';
-  import { Timeline, TimelineItem } from 'ant-design-vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
@@ -48,6 +53,22 @@
     {
       label: 'test',
       count: 0,
+      color: 'red',
+    },
+    {
+      label: 'test',
+      count: 0,
+      color: 'yellow',
+    },
+    {
+      label: 'test',
+      count: 0,
+      color: 'green',
+    },
+    {
+      label: 'test',
+      count: 0,
+      color: 'blue',
     },
   ]);
   // 获取全部局扇的数据，并以选项格式返回给 Header 消费
@@ -70,4 +91,60 @@
     // fetchConfig();
   });
 </script>
-<style scoped></style>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .timeline-item {
+    height: 60px;
+  }
+  .timeline-item__icon_red {
+    background-image: url('@/assets/images/home-container/warn-icon.png');
+  }
+  .timeline-item__icon_yellow {
+    background-image: url('@/assets/images/home-container/warn-icon1.png');
+  }
+  .timeline-item__icon_green {
+    background-image: url('@/assets/images/home-container/warn-icon2.png');
+  }
+  .timeline-item__icon_blue {
+    background-image: url('@/assets/images/home-container/warn-icon3.png');
+  }
+  .timeline-item__icon {
+    width: 54px;
+    height: 45px;
+    margin: 0 50px 0 50px;
+  }
+  .timeline-item__dot {
+    width: 10px;
+    height: 10px;
+    margin: 0 50px 0 0;
+    background-color: @vent-gas-primary-bg;
+    border-radius: 5px;
+    position: relative;
+  }
+  .timeline-item__dot::before {
+    content: '';
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    border: 1px solid @vent-gas-tab-border;
+  }
+  .timeline-item__label {
+    width: 150px;
+  }
+  .timeline-item__value_red {
+    color: red;
+  }
+  .timeline-item__value_yellow {
+    color: yellow;
+  }
+  .timeline-item__value_green {
+    color: green;
+  }
+  .timeline-item__value_blue {
+    color: blue;
+  }
+</style>

src/views/vent/home/configurable/components/MonitorCenter.vue

@@ -0,0 +1,136 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="monitor-center">
+    <div class="flex">
+      <div class="w-50% text-center">
+        <span>总供风量</span>
+        <p class="monitor-center__primary_text">123123</p>
+
+        <Pie
+          :option="chartOption"
+          :chart-data="[
+            {
+              value: 70,
+              name: 'A',
+            },
+            {
+              value: 30,
+              name: 'B',
+            },
+          ]"
+          height="100px"
+        />
+      </div>
+      <div class="w-50% text-center">
+        <span>总需风量</span>
+        <p class="monitor-center__primary_text">123123</p>
+
+        <Pie
+          :option="chartOption"
+          :chart-data="[
+            {
+              value: 70,
+              name: 'A',
+            },
+            {
+              value: 30,
+              name: 'B',
+            },
+          ]"
+          height="100px"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
+  import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
+  import Pie from '/@/components/chart/Pie.vue';
+  import { EChartsOption } from 'echarts';
+  // import mapComponent from './components/3Dmap/index.vue';
+
+  // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
+  const devicekind = 'fanlocal';
+
+  const configs = ref<{ prop: string; label: string }[]>([]);
+  function fetchConfig() {
+    cfgList({
+      deviceType: 'devicekind',
+    }).then(({ records }) => {
+      const moduleData = JSON.parse(records[0]?.moduleData);
+      configs.value = Object.keys(moduleData).map((k) => {
+        return {
+          prop: k,
+          label: moduleData[k],
+        };
+      });
+    });
+  }
+
+  const devices = ref<any[]>([]);
+  const selectedDevice = ref<any>({});
+  function selectDeviceByID(id: string) {
+    selectedDevice.value = devices.value.find((e) => {
+      return e.id === id;
+    });
+  }
+  // 获取全部局扇的数据，并以选项格式返回给 Header 消费
+  function fetchOptions() {
+    return list({
+      devicekind,
+    }).then(({ records }) => {
+      devices.value = records;
+      selectDeviceByID(records[0]?.id);
+      return records.map((e) => {
+        return {
+          label: e.strinstallpos,
+          key: e.id,
+        };
+      });
+    });
+  }
+
+  // 图标相关
+  const chartOption: EChartsOption = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '75%'],
+        center: ['50%', '55%'],
+        data: [],
+        labelLine: { show: false },
+        label: {
+          show: false,
+          // formatter: '{b} \n ({d}%)',
+          // color: '#B1B9D3',
+        },
+        itemStyle: {
+          shadowBlur: 20,
+          shadowColor: '#259bcf',
+        },
+      },
+    ],
+    color: ['#d9a1ff', '#00d1ff', '#82fe78'],
+  };
+
+  onMounted(() => {
+    fetchConfig();
+  });
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .monitor-center__primary_text {
+    font-size: 20px;
+    color: @vent-gas-primary-text;
+  }
+
+  .monitor-center {
+    width: 200px;
+    background-image: @vent-configurable-home-bg-img;
+    border-top: 2px solid @vent-configurable-home-light-border;
+    color: @white;
+  }
+</style>

src/views/vent/home/configurable/components/VentilateAnalysis.vue

@@ -8,6 +8,20 @@
       </div>
     </div>
   </CostumeHeader>
+  <Pie
+    :option="chartOption"
+    :chart-data="[
+      {
+        value: 70,
+        name: 'A',
+      },
+      {
+        value: 30,
+        name: 'B',
+      },
+    ]"
+    height="170px"
+  />
   <div class="flex justify-around mt-10px">
     <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" layout="label-top" type="D" />
   </div>
@@ -19,6 +33,8 @@
   import CostumeHeader from './CostumeHeader.vue';
   import { RightCircleOutlined } from '@ant-design/icons-vue';
   import MiniBoard from './MiniBoard.vue';
+  import Pie from '/@/components/chart/Pie.vue';
+  import { EChartsOption } from 'echarts';
   // import mapComponent from './components/3Dmap/index.vue';
 
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
@@ -62,6 +78,29 @@
     });
   }
 
+  // 图标相关
+  const chartOption: EChartsOption = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '75%'],
+        center: ['50%', '55%'],
+        data: [],
+        labelLine: { show: false },
+        label: {
+          show: false,
+          // formatter: '{b} \n ({d}%)',
+          // color: '#B1B9D3',
+        },
+        itemStyle: {
+          shadowBlur: 20,
+          shadowColor: '#259bcf',
+        },
+      },
+    ],
+    color: ['#d9a1ff', '#00d1ff', '#82fe78'],
+  };
+
   onMounted(() => {
     fetchConfig();
   });

src/views/vent/home/configurable/components/WorkSurface.vue

@@ -9,6 +9,7 @@
     </div>
   </CostumeHeader>
   <LineMulti
+    :option="chartOption"
     :prop-type-arr="
       new Map([
         ['valueA', '值A'],
@@ -17,8 +18,12 @@
     "
     x-axis-prop-type="x"
     :chart-data="[
-      { valueA: 1, valueB: 1, x: 2 },
+      { valueA: 1, valueB: 3, x: 2 },
+      { valueA: 2, valueB: 1, x: 3 },
       { valueA: 1, valueB: 1, x: 4 },
+      { valueA: 3, valueB: 2, x: 5 },
+      { valueA: 2, valueB: 1, x: 6 },
+      { valueA: 1, valueB: 2, x: 7 },
     ]"
     height="170px"
   />
@@ -34,6 +39,7 @@
   import { RightCircleOutlined } from '@ant-design/icons-vue';
   import MiniBoard from './MiniBoard.vue';
   import LineMulti from '/@/components/chart/LineMulti.vue';
+  import { EChartsOption } from 'echarts';
   // import mapComponent from './components/3Dmap/index.vue';
 
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
@@ -77,6 +83,33 @@
     });
   }
 
+  // 图表相关
+  const chartOption: EChartsOption = {
+    legend: {
+      top: 10,
+      right: 10,
+      textStyle: {
+        color: '#fff',
+      },
+    },
+    grid: {
+      top: 40,
+      height: '60%',
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          color: '#fff',
+          opacity: 0.3,
+        },
+      },
+    },
+    textStyle: {
+      color: '#fff',
+    },
+  };
+
   onMounted(() => {
     fetchConfig();
   });

src/views/vent/home/configurable/components/moduleBottom.vue

@@ -78,7 +78,7 @@
     .module-slot {
       height: calc(100% - 33px);
       width: 100%;
-      background-color: #259ccf60;
+      background-color: #259ccf22;
     }
   }
 

src/views/vent/home/configurable/components/moduleRight.vue

@@ -80,7 +80,7 @@
     .module-slot {
       height: calc(100% - 33px);
       width: 100%;
-      background-color: #259ccf60;
+      background-color: #259ccf22;
     }
   }
 

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

@@ -8,7 +8,9 @@
         全矿井通风检测
         <CaretDownOutlined />
       </a>
-      <template #overlay> <span class="color-#fff">全矿井通风检测</span> </template>
+      <template #overlay>
+        <MonitorCenter />
+      </template>
     </a-dropdown>
     <ModuleLeft class="module-left top-70px" title="局部通风机监测">
       <SubVentilate />
@@ -46,6 +48,7 @@
   import VentilateAnalysis from './components/VentilateAnalysis.vue';
   import WorkSurface from './components/WorkSurface.vue';
   import DeviceWarning from './components/DeviceWarning.vue';
+  import MonitorCenter from './components/MonitorCenter.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const mainTitle = ref('智能通风管控系统');
@@ -59,13 +62,13 @@
   .company-home {
     width: 100%;
     height: 100%;
-    color: #fff;
+    color: @white;
     position: relative;
 
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('../../../../assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
+      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {

src/views/vent/monitorManager/alarmMonitor/common.data.ts

@@ -185,13 +185,20 @@ export const tabList = [
   ];
   export const tabLists = [
     { id: 0, label: '烟雾传感器监测', details: '设备类型名称' },
-    { id: 1, label: '火焰传感器监测', details: '设备类型名称' },
+    { id: 1, label: '温度传感器监测', details: '设备类型名称' },
     { id: 2, label: '自动喷淋灭火装置监测', details: '设备类型名称' },
-    { id: 2, label: '温度传感器监测', details: '设备类型名称' },
+    { id: 3, label: '火焰传感器监测', details: '设备类型名称' },
   ];
   //外因火灾-传感器table列
 export const columns = [
     { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
     { rowIndex: 2, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
     { rowIndex: 3, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
+  ];
+  //外因火灾-烟雾传感器table列
+export const columnsSmoke = [
+    { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
+    { rowIndex: 2, dataIndex: 'val', title: '值', type: '1', align: 'center' },
+    { rowIndex: 3, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
+    { rowIndex: 4, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
   ];

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

@@ -44,99 +44,51 @@
           <span class="details">{{ `${items.details}>>` }}</span>
         </div>
         <div class="content">
-          <a-table
-            v-if="index == 0"
-            ref="table"
-            size="small"
-            :scroll="{ x: 0, y: 273 }"
-            :columns="columns"
-            :data-source="monitorlistYw"
-            :pagination="false"
-          >
+          <a-table v-if="index == 0" ref="table" size="small" :scroll="{ x: 0, y: 273 }" :columns="columnsSmoke"
+            :data-source="monitorlistYw" :pagination="false">
             <span slot="action" slot-scope="text, record"></span>
           </a-table>
-          <a-table
-            v-if="index == 1"
-            ref="table1"
-            size="small"
-            :columns="columns"
-            :data-source="monitorlistHy"
-            :pagination="false"
-            :scroll="{ y: 273 }"
-          >
+          <a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
+            :pagination="false" :scroll="{ y: 273 }">
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
-          <a-table
-            v-if="index == 2"
-            ref="table"
-            size="small"
-            :scroll="{ y: 273 }"
-            :columns="columns"
-            :data-source="monitorlistPl"
-            :pagination="false"
-          >
+          <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: 273 }" :columns="columns"
+            :data-source="monitorlistPl" :pagination="false">
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
         </div>
       </div>
     </div>
-
     <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
-      <div class="content-box" v-for="(items, index) in tabLists" :key="index">
+      <div v-for="(items, index) in tabLists" :class="index != 2 && index != 3 ? 'content-box' : 'content-boxs'"
+        :key="index">
         <div class="title">
           <span class="title-label">{{ items.label }}</span>
           <span class="details">{{ `${items.details}>>` }}</span>
         </div>
         <div class="content">
-          <a-table
-            v-if="index == 0"
-            ref="table"
-            size="small"
-            :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
-            :columns="columns"
-            :data-source="monitorlistYw"
-            :pagination="false"
-          >
+          <a-table v-if="index == 0" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
+            :columns="columnsSmoke" :data-source="monitorlistYw" :pagination="false">
             <span slot="action" slot-scope="text, record"></span>
           </a-table>
-          <a-table
-            v-if="index == 1"
-            ref="table1"
-            size="small"
-            :columns="columns"
-            :data-source="monitorlistHy"
-            :pagination="false"
-            :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
-          >
+
+          <a-table v-if="index == 1" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
+            :columns="columnsSmoke" :data-source="monitorlistWd" :pagination="false">
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
-          <a-table
-            v-if="index == 2"
-            ref="table"
-            size="small"
-            :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
-            :columns="columns"
-            :data-source="monitorlistPl"
-            :pagination="false"
-          >
+          <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
+            :columns="columns" :data-source="monitorlistPl" :pagination="false">
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
-
-          <a-table
-            v-if="index == 3"
-            ref="table"
-            size="small"
-            :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
-            :columns="columns"
-            :data-source="monitorlistWd"
-            :pagination="false"
-          >
+          <a-table v-if="index == 3" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
+            :pagination="false" :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }">
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
         </div>
       </div>
     </div>
-    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
+      v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
       <div class="footer-title">
         <div class="echart-label">光钎测温系统实时温度监测</div>
       </div>
@@ -144,7 +96,8 @@
         <echartLine2 :echartDataWd="echartDataWd" />
       </div>
     </div>
-    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
+      v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
       <div class="footer-title">
         <div class="echart-label">光钎测温系统实时温度监测</div>
       </div>
@@ -157,12 +110,8 @@
     <div class="content-s" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
       <div class="title-b">采空区密闭参数</div>
       <div class="card-btn">
-        <div
-          :class="activeIndex == index ? 'content-box1' : 'content-box'"
-          v-for="(item, index) in mbList"
-          :key="index"
-          @click="btnClick(item, index)"
-        >
+        <div :class="activeIndex == index ? 'content-box1' : 'content-box'" v-for="(item, index) in mbList" :key="index"
+          @click="btnClick(item, index)">
           <div class="btn-label">
             <span>{{ item.label }}</span>
             <span>{{ item.dw }}</span>
@@ -194,827 +143,919 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, reactive, watch, defineProps } from 'vue';
-  import { topOutList, tabList, tabLists, columns } from '../common.data';
-  import imgUrl from '../../../../../assets/images/fire/pie.png';
-  import echartLine2 from './echartLine2.vue';
-  import echartLine1 from './echartLine1.vue';
-
-  let props = defineProps({
-    listData: Object,
-    strType: String,
-  });
-
-  //束管监测-顶部区域数据
-  let topContent = reactive({
-    temperature: '0',
-    position: '',
-    time: '',
-    warn: '',
-  });
-  //束管监测当前密闭参数激活选项
-  let activeIndex = ref(0);
-  //束管监测当前激活密闭参数类型
-  let type = ref('O₂');
-  //束管监测密闭参数列表
-  let mbList = reactive([
-    {
-      label: 'O₂',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: 0,
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CO',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: 0,
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CO₂',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: 0,
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CH₄',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: 0,
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'C₂H₂',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: 0,
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'C₂H₄',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: 0,
-      time1: '',
-      address: '',
-    },
-  ]);
-  let echartDataSg1 = reactive({
-    xData: [],
-    yData: [],
-    lengedData: 'O₂',
-    lengedDataName: '(%)',
-  });
-  let echartDataSgList = reactive<any[]>([]);
-
-  //外因火灾温度监测-图表数据
-  let echartDataWd = reactive({
-    xData: [],
-    maxData: {
-      data: [],
-      lengedData: '实时温度',
-    },
-  });
-
-  //烟雾传感器列表数据
-  let monitorlistYw = reactive([]);
-
-  //火焰传感器列表数据
-  let monitorlistHy = reactive([]);
-
-  //喷淋装置列表数据
-  let monitorlistPl = reactive([]);
-
-  //温度传感器列表数据
-  let monitorlistWd = reactive([]);
-
-  //束管监测密闭参数选项切换
-  function btnClick(item, ind) {
-    activeIndex.value = ind;
-    type.value = item.label;
-    echartDataSg1.xData.length = 0;
-    echartDataSg1.yData.length = 0;
-    echartDataSg1.lengedData = type.value;
-    echartDataSg1.lengedDataName = item.dw;
-
-    switch (type.value) {
-      case 'O₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.o2val);
-        });
-        break;
-      case 'C₂H₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.ch2val);
-        });
-        break;
-      case 'CO':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.coval);
-        });
-        break;
-      case 'CH₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.chval);
-        });
-        break;
-      case 'CO₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.co2val);
-        });
-        break;
-      case 'C₂H₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.gasval);
-        });
-        break;
-    }
+import { ref, computed, reactive, watch, defineProps } from 'vue';
+import { topOutList, tabList, tabLists, columns, columnsSmoke } from '../common.data';
+import imgUrl from '../../../../../assets/images/fire/pie.png';
+import echartLine2 from './echartLine2.vue';
+import echartLine1 from './echartLine1.vue';
+
+let props = defineProps({
+  listData: Object,
+  strType: String,
+});
+
+//束管监测-顶部区域数据
+let topContent = reactive({
+  temperature: '0',
+  position: '',
+  time: '',
+  warn: '',
+});
+//束管监测当前密闭参数激活选项
+let activeIndex = ref(0);
+//束管监测当前激活密闭参数类型
+let type = ref('O₂');
+//束管监测密闭参数列表
+let mbList = reactive([
+  {
+    label: 'O₂',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CO',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CO₂',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CH₄',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'C₂H₂',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'C₂H₄',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+]);
+let echartDataSg1 = reactive({
+  xData: [],
+  yData: [],
+  lengedData: 'O₂',
+  lengedDataName: '(%)',
+});
+let echartDataSgList = reactive<any[]>([]);
+
+//外因火灾温度监测-图表数据
+let echartDataWd = reactive({
+  xData: [],
+  maxData: {
+    data: [],
+    lengedData: '实时温度',
+  },
+});
+
+//烟雾传感器列表数据
+let monitorlistYw = reactive([]);
+
+//火焰传感器列表数据
+let monitorlistHy = reactive([]);
+
+//喷淋装置列表数据
+let monitorlistPl = reactive([]);
+
+//温度传感器列表数据
+let monitorlistWd = reactive([]);
+
+//束管监测密闭参数选项切换
+function btnClick(item, ind) {
+  activeIndex.value = ind;
+  type.value = item.label;
+  echartDataSg1.xData.length = 0;
+  echartDataSg1.yData.length = 0;
+  echartDataSg1.lengedData = type.value;
+  echartDataSg1.lengedDataName = item.dw;
+
+  switch (type.value) {
+    case 'O₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.o2val);
+      });
+      break;
+    case 'C₂H₄':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.ch2val);
+      });
+      break;
+    case 'CO':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.coval);
+      });
+      break;
+    case 'CH₄':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.chval);
+      });
+      break;
+    case 'CO₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.co2val);
+      });
+      break;
+    case 'C₂H₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.gasval);
+      });
+      break;
   }
+}
+
+watch(
+  () => props.listData,
+  (val) => {
+    console.log(val, 'val---------------');
+    props.listData = val;
+    if (JSON.stringify(val) != '{}') {
+      echartDataSg1.xData.length = 0;
+      echartDataSg1.yData.length = 0;
+      echartDataSgList.length = 0;
+      echartDataWd.xData.length = 0;
+      echartDataWd.maxData.data.length = 0;
+      monitorlistYw.length = 0;
+      monitorlistHy.length = 0;
+      monitorlistPl.length = 0;
+      monitorlistWd.length = 0;
+      if (val.fiber.length != 0) {
+        topOutList[0].value = val.fiber[0].readData.fmax;
+        topOutList[1].value = val.fiber[0].readData.fmin;
+        topOutList[2].value = val.fiber[0].readData.favg;
+        topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常';
+        JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
+          echartDataWd.xData.push(el.pos);
+          echartDataWd.maxData.data.push(el.value);
+        });
+      } else {
+        topOutList[0].value = '--';
+        topOutList[1].value = '--';
+        topOutList[2].value = '--';
+        topOutList[3].text = '正常';
+      }
 
-  watch(
-    () => props.listData,
-    (val) => {
-      console.log(val, 'val---------------');
-      props.listData = val;
-      if (JSON.stringify(val) != '{}') {
-        echartDataSg1.xData.length = 0;
-        echartDataSg1.yData.length = 0;
-        echartDataSgList.length = 0;
-        echartDataWd.xData.length = 0;
-        echartDataWd.maxData.data.length = 0;
-        monitorlistYw.length = 0;
-        monitorlistHy.length = 0;
-        monitorlistPl.length = 0;
-        monitorlistWd.length = 0;
-        if (val.fiber.length != 0) {
-          topOutList[0].value = val.fiber[0].readData.fmax;
-          topOutList[1].value = val.fiber[0].readData.fmin;
-          topOutList[2].value = val.fiber[0].readData.favg;
-          topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常';
-          JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
-            echartDataWd.xData.push(el.pos);
-            echartDataWd.maxData.data.push(el.value);
-          });
-        } else {
-          topOutList[0].value = '--';
-          topOutList[1].value = '--';
-          topOutList[2].value = '--';
-          topOutList[3].text = '正常';
-        }
-
-        if (val.bundletube.length != 0) {
-          topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
-          topContent.position = val.bundletube[0].strinstallpos || '--';
-          topContent.time = val.bundletube[0].readTime || '--';
-          topContent.warn =
-            val.bundletube[0].warnLevel == 0
-              ? '正常'
-              : val.bundletube[0].warnLevel == 101
+      if (val.bundletube.length != 0) {
+        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+        topContent.position = val.bundletube[0].strinstallpos || '--';
+        topContent.time = val.bundletube[0].readTime || '--';
+        topContent.warn =
+          val.bundletube[0].warnLevel == 0
+            ? '正常'
+            : val.bundletube[0].warnLevel == 101
               ? '较低风险'
               : val.bundletube[0].warnLevel == 102
-              ? '低风险'
-              : val.bundletube[0].warnLevel == 103
-              ? '中风险'
-              : val.bundletube[0].warnLevel == 104
-              ? '高风险'
-              : val.bundletube[0].warnLevel == 201
-              ? '报警'
-              : '正常';
-          val.bundletube[0].history.forEach((v) => {
-            echartDataSg1.xData.push(v.time);
-            if (echartDataSg1.lengedData == 'O₂') {
-              echartDataSg1.yData.push(v.o2val);
-            } else if (echartDataSg1.lengedData == 'C₂H₄') {
-              echartDataSg1.yData.push(v.ch2val);
-            } else if (echartDataSg1.lengedData == 'CO') {
-              echartDataSg1.yData.push(v.coval);
-            } else if (echartDataSg1.lengedData == 'CH₄') {
-              echartDataSg1.yData.push(v.chval);
-            } else if (echartDataSg1.lengedData == 'CO₂') {
-              echartDataSg1.yData.push(v.co2val);
-            } else if (echartDataSg1.lengedData == 'C₂H₂') {
-              echartDataSg1.yData.push(v.gasval);
-            }
-            echartDataSgList.push(v);
-          });
-        } else {
-          topContent.temperature = '--';
-          topContent.position = '--';
-          topContent.time = '--';
-          topContent.warn = '正常';
-        }
+                ? '低风险'
+                : val.bundletube[0].warnLevel == 103
+                  ? '中风险'
+                  : val.bundletube[0].warnLevel == 104
+                    ? '高风险'
+                    : val.bundletube[0].warnLevel == 201
+                      ? '报警'
+                      : '正常';
+        val.bundletube[0].history.forEach((v) => {
+          echartDataSg1.xData.push(v.time);
+          if (echartDataSg1.lengedData == 'O₂') {
+            echartDataSg1.yData.push(v.o2val);
+          } else if (echartDataSg1.lengedData == 'C₂H₄') {
+            echartDataSg1.yData.push(v.ch2val);
+          } else if (echartDataSg1.lengedData == 'CO') {
+            echartDataSg1.yData.push(v.coval);
+          } else if (echartDataSg1.lengedData == 'CH₄') {
+            echartDataSg1.yData.push(v.chval);
+          } else if (echartDataSg1.lengedData == 'CO₂') {
+            echartDataSg1.yData.push(v.co2val);
+          } else if (echartDataSg1.lengedData == 'C₂H₂') {
+            echartDataSg1.yData.push(v.gasval);
+          }
+          echartDataSgList.push(v);
+        });
+      } else {
+        topContent.temperature = '--';
+        topContent.position = '--';
+        topContent.time = '--';
+        topContent.warn = '正常';
+      }
 
-        if (val.smoke.length != 0) {
-          val.smoke.forEach((el) => {
-            monitorlistYw.push(el);
-          });
-        }
+      if (val.smoke.length != 0) {
+        val.smoke.forEach((el) => {
+          monitorlistYw.push({ strinstallpos: el.strinstallpos, val: el.readData.smokeval, warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str, readTime: el.readTime });
+        });
+      }
 
-        if (val.fire.length != 0) {
-          val.fire.forEach((el) => {
-            monitorlistHy.push(el);
-          });
-        }
+      if (val.fire.length != 0) {
 
-        if (val.spray.length != 0) {
-          val.spray.forEach((el) => {
-            monitorlistPl.push(el);
-          });
-        }
+        val.fire.forEach((el) => {
+          monitorlistHy.push(el);
+        });
+      }
 
-        if (val.temperature.length != 0) {
-          val.temperature.forEach((el) => {
-            monitorlistWd.push(el);
-          });
-        }
+      if (val.spray.length != 0) {
+        val.spray.forEach((el) => {
+          monitorlistPl.push(el);
+        });
+      }
+
+      if (val.temperature.length != 0) {
+        val.temperature.forEach((el) => {
+          monitorlistWd.push({ strinstallpos: el.strinstallpos, val: el.readData.temperature, warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str, readTime: el.readTime });
+        });
       }
-    },
-    { immediate: true, deep: true }
-  );
+    }
+  },
+  { immediate: true, deep: true }
+);
 </script>
 
 <style lang="less" scoped>
-  .mainWell {
+.mainWell {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+
+  .work-nav {
+    height: 15%;
     width: 100%;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-    overflow-y: auto;
-
-    .work-nav {
-      height: 15%;
-      width: 100%;
-      margin-bottom: 20px;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
+    margin-bottom: 20px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .nav {
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
       align-items: center;
 
-      .nav {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+      &:nth-child(1) {
+        flex: 1;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
 
-        &:nth-child(1) {
-          flex: 1;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
+      &:nth-child(2) {
+        flex: 1;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
 
-        &:nth-child(2) {
-          flex: 1;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
+      &:nth-child(3) {
+        flex: 1;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
 
-        &:nth-child(3) {
-          flex: 1;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
+      &:nth-child(4) {
+        flex: 1.2;
+        color: #b3b8cc;
+        font-size: 16px;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
 
-        &:nth-child(4) {
-          flex: 1.2;
-          color: #b3b8cc;
-          font-size: 16px;
+      &:nth-child(5) {
+        flex: 0.8;
+        color: #2b87ff;
+        font-size: 14px;
+        height: 100%;
+      }
+
+      .pic {
+        width: 26%;
+        height: 84%;
+
+        img {
+          width: 100%;
           height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
         }
+      }
 
-        &:nth-child(5) {
-          flex: 0.8;
-          color: #2b87ff;
+      .content {
+        height: 84%;
+        margin-left: 15px;
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        span {
           font-size: 14px;
-          height: 100%;
-        }
 
-        .pic {
-          width: 26%;
-          height: 84%;
+          &:nth-child(1) {
+            padding: 5px 0px;
+            color: #b3b8cc;
+          }
 
-          img {
-            width: 100%;
-            height: 100%;
+          &:nth-child(2) {
+            font-family: 'douyuFont';
+            font-size: 16px;
+            color: #3df6ff;
           }
         }
+      }
+    }
 
-        .content {
-          height: 84%;
-          margin-left: 15px;
-          color: #fff;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-
-          span {
-            font-size: 14px;
+    .nav:nth-child(1) .pic {
+      background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
+      background-size: 50% 50%;
+    }
 
-            &:nth-child(1) {
-              padding: 5px 0px;
-              color: #b3b8cc;
-            }
+    .nav:nth-child(2) .pic {
+      background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
+      background-size: 50% 50%;
+    }
 
-            &:nth-child(2) {
-              font-family: 'douyuFont';
-              font-size: 16px;
-              color: #3df6ff;
-            }
-          }
-        }
-      }
+    .nav:nth-child(3) .pic {
+      background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+      background-size: 50% 50%;
+    }
 
-      .nav:nth-child(1) .pic {
-        background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
-        background-size: 50% 50%;
-      }
+    .content-box {
+      display: flex;
 
-      .nav:nth-child(2) .pic {
-        background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
-        background-size: 50% 50%;
+      &:nth-child(1) {
+        justify-content: space-around;
+        align-items: center;
+        flex: 2;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
       }
 
-      .nav:nth-child(3) .pic {
-        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-        background-size: 50% 50%;
+      &:nth-child(2) {
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
       }
 
-      .content-box {
-        display: flex;
+      .contents {
+        height: 73%;
 
         &:nth-child(1) {
-          justify-content: space-around;
+          width: 40%;
+          display: flex;
+          justify-content: center;
           align-items: center;
-          flex: 2;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+
+          img {
+            position: relative;
+            width: 23%;
+            height: 100%;
+            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+            background-size: 50% 50%;
+          }
+
+          .text {
+            font-family: 'douyuFont';
+            font-size: 28px;
+            margin: 0px 15px;
+            color: #3df6ff;
+          }
+
+          .dw {
+            font-size: 14px;
+            color: #b3b8cc;
+          }
         }
 
         &:nth-child(2) {
-          flex: 1;
-          justify-content: center;
-          align-items: center;
-          height: 100%;
-        }
+          width: 60%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
 
-        .contents {
-          height: 73%;
+          .text {
+            font-size: 18px;
 
-          &:nth-child(1) {
-            width: 40%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            img {
-              position: relative;
-              width: 23%;
-              height: 100%;
-              background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-              background-size: 50% 50%;
+            .text-label {
+              color: #b3b8cc;
+              font-weight: bold;
             }
 
-            .text {
+            .text-value {
               font-family: 'douyuFont';
-              font-size: 28px;
-              margin: 0px 15px;
               color: #3df6ff;
-            }
-
-            .dw {
-              font-size: 14px;
-              color: #b3b8cc;
-            }
-          }
-
-          &:nth-child(2) {
-            width: 60%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-
-            .text {
-              font-size: 18px;
-
-              .text-label {
-                color: #b3b8cc;
-                font-weight: bold;
-              }
-
-              .text-value {
-                font-family: 'douyuFont';
-                color: #3df6ff;
-                margin-left: 10px;
-              }
+              margin-left: 10px;
             }
           }
         }
+      }
 
-        .text1 {
-          font-size: 16px;
-          color: #b3b8cc;
-          font-weight: bold;
-        }
+      .text1 {
+        font-size: 16px;
+        color: #b3b8cc;
+        font-weight: bold;
       }
     }
+  }
+
+  .center-box {
+    height: 47%;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-    .center-box {
-      height: 47%;
-      margin-bottom: 20px;
+    .content-box {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
+      flex-direction: column;
+      width: 32%;
+      height: 100%;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
 
-      .content-box {
+      &:nth-child(2) {
+        margin: 0px 20px;
+      }
+
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
         display: flex;
-        flex-direction: column;
-        width: 32%;
-        height: 100%;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
+        justify-content: space-between;
+        align-items: center;
 
-        &:nth-child(2) {
-          margin: 0px 20px;
+        .title-label {
+          // font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
         }
 
-        .title {
-          width: 100%;
-          height: 40px;
-          padding: 0px 15px;
-          margin-bottom: 10px;
-          border-bottom: 1px solid #0c3c88;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .title-label {
-            // font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
-          }
-
-          .details {
-            font-size: 14px;
-            color: #1f81df;
-          }
+        .details {
+          font-size: 14px;
+          color: #1f81df;
         }
+      }
 
-        .content {
-          height: calc(100% - 40px);
-          margin-bottom: 10px;
-        }
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
       }
     }
+  }
 
-    .center-box1 {
-      height: 70%;
-      margin-bottom: 20px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
+  .center-box1 {
+    height: 70%;
+    // margin-bottom: 20px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
 
-      .content-box {
-        display: flex;
-        flex-direction: column;
-        width: calc(50% - 10px);
-        height: calc(50% - 10px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-
-        &:nth-child(1) {
-          margin: 0px 20px 20px 0px;
-        }
+    .content-box {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(70% - 10px);
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
 
-        &:nth-child(3) {
-          margin: 0px 20px 0px 0px;
-        }
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
 
-        .title {
-          width: 100%;
-          height: 40px;
-          padding: 0px 15px;
-          margin-bottom: 10px;
-          border-bottom: 1px solid #0c3c88;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+      &:nth-child(3) {
+        margin: 0px 20px 0px 0px;
+      }
 
-          .title-label {
-            font-size: 16px;
-            color: #fff;
-          }
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-          .details {
-            font-size: 14px;
-            color: #1f81df;
-          }
+        .title-label {
+          font-size: 16px;
+          color: #fff;
         }
 
-        .content {
-          height: calc(100% - 40px);
-          margin-bottom: 10px;
+        .details {
+          font-size: 14px;
+          color: #1f81df;
         }
       }
+
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
+      }
     }
 
-    .center-box2 {
-      height: 100%;
+    .content-boxs {
       display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
-
-      .content-box {
-        display: flex;
-        flex-direction: column;
-        width: calc(50% - 10px);
-        height: calc(50% - 10px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-
-        &:nth-child(1) {
-          margin: 0px 20px 20px 0px;
-        }
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(30% - 30px);
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
 
-        &:nth-child(3) {
-          margin: 0px 20px 0px 0px;
-        }
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
 
-        .title {
-          width: 100%;
-          height: 40px;
-          padding: 0px 15px;
-          margin-bottom: 10px;
-          border-bottom: 1px solid #0c3c88;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+      &:nth-child(3) {
+        margin: 0px 20px 20px 0px;
+      }
 
-          .title-label {
-            font-size: 16px;
-            color: #fff;
-          }
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-          .details {
-            font-size: 14px;
-            color: #1f81df;
-          }
+        .title-label {
+          font-size: 16px;
+          color: #fff;
         }
 
-        .content {
-          height: calc(100% - 40px);
-          margin-bottom: 10px;
+        .details {
+          font-size: 14px;
+          color: #1f81df;
         }
       }
+
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
+      }
     }
+  }
+
+  .center-box2 {
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
 
-    .footer-box {
-      height: calc(38% - 40px);
-      padding: 10px;
+    .content-box {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(70% - 10px);
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
       background-size: 100% 100%;
-      box-sizing: border-box;
-      .footer-title {
-        height: 30px;
+
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
+
+      &:nth-child(3) {
+        margin: 0px 20px 0px 0px;
+      }
+
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-items: center;
 
-        .echart-label {
-          font-family: 'douyuFont';
-          font-size: 14px;
+        .title-label {
+          font-size: 16px;
           color: #fff;
         }
+
+        .details {
+          font-size: 14px;
+          color: #1f81df;
+        }
       }
 
-      .echart-content {
-        height: calc(100% - 30px);
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
       }
     }
 
-    .footer-box1 {
-      height: calc(30% - 20px);
-      padding: 10px 15px;
+    .content-boxs {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(30% - 30px);
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
       background-size: 100% 100%;
-      box-sizing: border-box;
-      .footer-title {
-        height: 30px;
+
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
+
+      &:nth-child(3) {
+        margin: 0px 20px 20px 0px;
+      }
+
+
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-items: center;
 
-        .echart-label {
-          font-family: 'douyuFont';
+        .title-label {
           font-size: 16px;
           color: #fff;
         }
+
+        .details {
+          font-size: 14px;
+          color: #1f81df;
+        }
       }
 
-      .echart-content {
-        height: calc(100% - 30px);
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
       }
     }
+  }
 
-    .content-s {
-      width: 100%;
-      height: 608px;
-      padding: 10px;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-      box-sizing: border-box;
+  .footer-box {
+    height: calc(38% - 40px);
+    padding: 10px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
 
-      .title-b {
-        height: 30px;
-        line-height: 30px;
+    .footer-title {
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .echart-label {
         font-family: 'douyuFont';
         font-size: 14px;
         color: #fff;
       }
+    }
 
-      .card-btn {
-        height: 28%;
-        margin-bottom: 10px;
-        display: flex;
-        justify-content: space-between;
+    .echart-content {
+      height: calc(100% - 30px);
+    }
+  }
 
-        .content-box {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: url('../../../../../assets/images/fire/1.png') no-repeat center;
-          background-size: 100% 100%;
-          cursor: pointer;
+  .footer-box1 {
+    height: calc(30% - 20px);
+    padding: 10px 15px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
 
-          .btn-label {
-            position: absolute;
-            left: 50%;
-            top: 0;
-            transform: translate(-50%);
-            font-size: 16px;
-            color: #fff;
-          }
+    .footer-title {
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
 
-          .box-item {
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 89%;
-            height: 16%;
-            padding: 0px 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-            background-size: 100% 100%;
-
-            .text-t {
-              width: 17%;
-              color: #fff;
-              font-size: 12px;
-            }
+      .echart-label {
+        font-family: 'douyuFont';
+        font-size: 16px;
+        color: #fff;
+      }
+    }
 
-            .text-v {
-              width: 83%;
-              font-family: 'douyuFont';
-              font-size: 10px;
-              color: #3df6ff;
-              display: flex;
-              justify-content: flex-end;
-            }
-          }
+    .echart-content {
+      height: calc(100% - 30px);
+    }
+  }
 
-          .box-item1 {
-            top: 24%;
-          }
+  .content-s {
+    width: 100%;
+    height: 608px;
+    padding: 10px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
 
-          .box-item2 {
-            top: 50%;
-          }
+    .title-b {
+      height: 30px;
+      line-height: 30px;
+      font-family: 'douyuFont';
+      font-size: 14px;
+      color: #fff;
+    }
 
-          .box-item3 {
-            top: 75%;
-          }
+    .card-btn {
+      height: 28%;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .content-box {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
+
+        .btn-label {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%);
+          font-size: 16px;
+          color: #fff;
         }
 
-        .content-box1 {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+        .box-item {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          width: 89%;
+          height: 16%;
+          padding: 0px 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
           background-size: 100% 100%;
-          cursor: pointer;
 
-          .btn-label {
-            position: absolute;
-            left: 50%;
-            top: 0;
-            transform: translate(-50%);
-            font-size: 16px;
+          .text-t {
+            width: 17%;
             color: #fff;
+            font-size: 12px;
           }
 
-          .box-item {
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 89%;
-            height: 16%;
-            padding: 0px 10px;
+          .text-v {
+            width: 83%;
+            font-family: 'douyuFont';
+            font-size: 10px;
+            color: #3df6ff;
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-            background-size: 100% 100%;
-
-            .text-t {
-              width: 17%;
-              color: #fff;
-              font-size: 12px;
-            }
-
-            .text-v {
-              width: 83%;
-              font-family: 'douyuFont';
-              font-size: 10px;
-              color: #3df6ff;
-              display: flex;
-              justify-content: flex-end;
-            }
+            justify-content: flex-end;
           }
+        }
 
-          .box-item1 {
-            top: 19%;
-          }
+        .box-item1 {
+          top: 24%;
+        }
 
-          .box-item2 {
-            top: 41%;
-          }
+        .box-item2 {
+          top: 50%;
+        }
 
-          .box-item3 {
-            top: 63%;
-          }
+        .box-item3 {
+          top: 75%;
         }
       }
 
-      .echart-box {
-        height: calc(72% - 41px);
-        border: 1px solid #114aac;
+      .content-box1 {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
 
-        .title-f {
-          height: 40px;
+        .btn-label {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%);
+          font-size: 16px;
+          color: #fff;
+        }
+
+        .box-item {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          width: 89%;
+          height: 16%;
           padding: 0px 10px;
-          box-sizing: border-box;
           display: flex;
           justify-content: space-between;
           align-items: center;
+          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+          background-size: 100% 100%;
 
-          .title-text {
-            font-family: 'douyuFont';
-            font-size: 14px;
+          .text-t {
+            width: 17%;
             color: #fff;
+            font-size: 12px;
+          }
+
+          .text-v {
+            width: 83%;
+            font-family: 'douyuFont';
+            font-size: 10px;
+            color: #3df6ff;
+            display: flex;
+            justify-content: flex-end;
           }
         }
 
-        .echarts-box {
-          height: calc(100% - 40px);
+        .box-item1 {
+          top: 19%;
+        }
+
+        .box-item2 {
+          top: 41%;
+        }
+
+        .box-item3 {
+          top: 63%;
         }
       }
     }
+
+    .echart-box {
+      height: calc(72% - 41px);
+      border: 1px solid #114aac;
+
+      .title-f {
+        height: 40px;
+        padding: 0px 10px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-text {
+          font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+
+      .echarts-box {
+        height: calc(100% - 40px);
+      }
+    }
   }
+}
 </style>

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

@@ -1,12 +1,286 @@
 <template>
-    <div class="blastDelta" >
-        <div class="coord"></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">{{ maxY - Math.floor(maxY / 10) * ind }}</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">{{ Math.floor(maxX / 10) + Math.floor(maxX / 10) * ind }}</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,reactice} from 'vue'
+import { ref, reactive, onMounted, watch, } from 'vue'
 
+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)
+//A点坐标
+let coordinateA = reactive({
+    x: 0,
+    y: 0,
+})
+//B点坐标
+let coordinateB = reactive({
+    x: 0,
+    y: 0,
+})
+//E点坐标
+let coordinateE = reactive({
+    x: 0,
+    y: 0,
+})
+//F点坐标
+let coordinateF = reactive({
+    x: 0,
+    y: 0,
+})
+//G点坐标
+let coordinateG = reactive({
+    x: 0,
+    y: 0,
+})
+
+let legendList = ref<any[]>([
+    { name: '不爆炸' },
+    { name: '可燃气体不足' },
+    { name: '可爆炸' },
+    { name: '氧气不足' },
+])
+
+
+function getAreas() {
+    if (coord.value) {
+        let width = coord.value.offsetWidth
+        let height = coord.value.offsetHeight
+        lengY.value = Math.ceil((height - 10) / 10)
+    }
+
+}
+//根据A,B,E,G等点坐标绘制图形
+function getLIne() {
+    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
+
+    //绘制AB点线条
+    ctx.beginPath();
+    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.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.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.strokeStyle = '#000';
+    ctx.stroke(); // 进行绘制
+
+    //绘制B点与坐标轴连线
+    ctx.beginPath();
+    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.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.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)',
+        },
+    ]
+
+    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();
+    });
+
+    // 标记点A
+    ctx.beginPath();
+    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", 20, 10); // 文字位置略微偏上，以便于文字与点对齐
+
+    //标记点B
+    ctx.beginPath();
+    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", 50, 40); // 文字位置略微偏上，以便于文字与点对齐
+
+    //标记点E
+    ctx.beginPath();
+    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", 20, 140); // 文字位置略微偏上，以便于文字与点对齐
+
+    //标记点G
+    ctx.beginPath();
+    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", 0, 120); // 文字位置略微偏上，以便于文字与点对齐
+    //标记点F
+    ctx.beginPath();
+    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", 30, 240); // 文字位置略微偏上，以便于文字与点对齐
+}
+//根据横坐标获取直线AB纵坐标
+function getCoordABY(params) {
+    return Math.ceil(((coordinateB.y - coordinateA.y) * params - coordinateA.x * coordinateB.y + coordinateB.x * coordinateA.y) / (coordinateB.x - coordinateA.x))
+}
+//根据纵坐标获取直线AB横坐标
+function getCoordABX(params1) {
+    return Math.ceil(((coordinateB.x - coordinateA.x) * params1 + coordinateA.x * coordinateB.y - coordinateB.x * coordinateA.y) / (coordinateB.y - coordinateA.y))
+}
+
+watch(() => props.posMonitor, (newV, oldV) => {
+    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
+    getLIne()
+
+}, { deep: true })
+
+onMounted(() => {
+    getAreas()
+})
 
 
 </script>
@@ -16,16 +290,110 @@ import {ref,reactice} from 'vue'
     position: relative;
     width: 100%;
     height: 100%;
+    .blast-title{
+        position: absolute;
+        left: 50%;
+        top: 24px;
+        transform: translate(-50%,0);
+        font-size: 12px;
+        color: #fff;
+    }
 
-    .coord {
+    .coords {
         position: absolute;
         left: 50%;
         top: 50%;
-        width: 90%;
+        width: 80%;
         height: 80%;
-        border-left: 1px solid #0079ff;
-        border-bottom: 1px solid #0079ff;
-        transform: translate(-50%, -50%)
+        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);
+        }
+
+        .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-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;
+            }
+        }
+
+
     }
 }
 </style>

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

@@ -97,7 +97,7 @@
               :chartsColumns="chartsColumns" :option="echatsOption" chartsType="listMonitor" />
             <!-- 爆炸三角形 -->
             <div style="width:35%;height:100%">
-              <blastDelta></blastDelta>
+              <blastDelta :posMonitor="posMonitor"></blastDelta>
             </div>
           </div>
         </div>

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

@@ -22,7 +22,7 @@
                 design-scope="modelsensor_monitor"
                 @select-row="getSelectRow"
                 :deviceType="deviceKind"
-                :scroll="{ y: chartsColumns.length > 0 ? 300 : 600 }"
+                :scroll="{ y: chartsColumns.length > 0 ? 600 : 600 }"
                 size="''"
                 title="传感器监测"
               >
@@ -36,7 +36,8 @@
                 </template>
               </MonitorTable>
             </div>
-            <div class="charts-box" v-if="chartsColumns.length > 0">
+            <!-- v-if="chartsColumns.length > 0" -->
+            <div class="charts-box" v-if="false">
               <BarAndLine
                 :chartsColumnsType="selectData.deviceType"
                 xAxisPropType="readTime"

src/views/vent/reportManager/comment/NormalTable.vue

@@ -19,7 +19,7 @@
       </template>
     </BasicTable>
     <DeviceModal :editID="editID" :reportId="reportId" :reportLogHis="reportLogHis" :fileType="fileType"
-      @register="registerModal" :addOredit="addOredit"  @saveOrUpdate="saveOrUpdate" />
+      @register="registerModal" :addOredit="addOredit" @saveOrUpdate="saveOrUpdate" />
     <!-- 报表或模板上传弹窗 -->
     <tempUpload :visibleUp="visibleUp" @resetUpload="resetUpload"></tempUpload>
 
@@ -37,14 +37,14 @@ import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 import { useListPage } from '/@/hooks/system/useListPage';
 
 const props = defineProps({
- 
+
   searchParam: {
     type: Object,
     default: () => {
       return {}
     }
   },
-  
+
   //下载文件接口
   downLoad: {
     type: Function,
@@ -129,6 +129,11 @@ const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useList
     actionColumn: {
       width: 180,
     },
+    //自定义默认排序
+    defSort: {
+      column: 'createTime',
+      order: 'desc',
+    },
     beforeFetch: (params) => {
       return Object.assign(params, { column: 'createTime', ...searchParams });
     },

src/views/vent/reportManager/reportManager.data.ts

@@ -17,6 +17,7 @@ export const columns: BasicColumn[] = [
       title: '创建日期',
       dataIndex: 'createTime',
       width: 160,
+      // sorter:true,
     },
   
     {