소스 검색

[Feat 0000] 韩咀: 1.新增新得多灾预警融合页面;2:首页新增外部漏风率

hongrunxia 2 주 전
부모
커밋
cd2ca79ad0

+ 4 - 1
src/layouts/default/header/components/MessageBroadcast.vue

@@ -50,6 +50,7 @@
   import { useUserStore } from '/@/store/modules/user';
   import { useGlobSetting } from '/@/hooks/setting';
   import SpeakVoice from './notify/speakVoice';
+  import dayjs from 'dayjs';
 
   export default defineComponent({
     name: 'VoiceBroadcast',
@@ -104,12 +105,14 @@
       }
 
       function onWebSocketMessage(data) {
-        // console.log('WebSocket 监测消息--------------》', data);
+        console.log('WebSocket 监测消息--------------》', data);
         if (data.topic === 'warn' || data.cmd === 'user') {
           if (isBroad.value) {
             const messageText = data['warndata'];
             // const messageText = '这是一个测试';
             speakVoice.handleReply(messageText);
+            const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
+            console.log(time + '语音播报开始报警------>', data);
           }
           if (!isShowWarningBroad.value) {
             isWarningDot.value = true;

+ 4 - 2
src/layouts/default/header/components/VoiceBroadcast.vue

@@ -57,6 +57,7 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import SpeakVoice from './notify/speakVoice';
   import { useDrag } from '@/hooks/event/useDrag';
+  import dayjs from 'dayjs';
   export default defineComponent({
     name: 'VoiceBroadcast',
     components: { Icon, Tooltip, Badge, SoundOutlined, BellOutlined, WarningOutlined },
@@ -73,7 +74,6 @@
       const isBroad = ref(true);
       const isWarningDot = ref(false);
       const broadcastList = ref([]);
-
       function showWarningBroad() {
         isShowWarningBroad.value = !isShowWarningBroad.value;
         if (isShowWarningBroad.value) {
@@ -115,13 +115,15 @@
       }
 
       async function onWebSocketMessage(data) {
-        // console.log('WebSocket 监测消息--------------》', data);
+        console.log('WebSocket 监测消息--------------》', data);
         if (data.topic === 'warn' || data.cmd === 'user') {
           if (isBroad.value) {
             await speakVoice.getSpeechCnVoices();
             const messageText = data['warndata'];
             // const messageText = '这是一个测试';
             speakVoice.handleReply(messageText);
+            const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
+            console.log(time + '语音播报开始报警------>', data);
           }
           if (!isShowWarningBroad.value) {
             isWarningDot.value = true;

+ 2 - 1
src/layouts/default/layout.data.ts

@@ -1,6 +1,7 @@
 export const noHeadeLink = ['/micro-vent-3dModal/dashboard/analysis', '/model3D/home', '/fileManager/cad-viewer'];
 export const noSiderLink = ['/fileManager/cad-viewer', '/micro-vent-3dModal/dashboard/bd/fire', '/micro-vent-3dModal/dashboard/bd/dust'];
-export const noChatLink = ['/micro-vent-3dModal/modelchannel/model3D/home'];
+// export const noChatLink = ['/micro-vent-3dModal/modelchannel/model3D/home'];
+export const noChatLink = [];
 export const noContentLink = ['/micro-vent-3dModal/modelchannel/model3D/home'];
 export const ThemeModel = {
   theme5_5: {

+ 10 - 1
src/views/vent/home/colliery/index.vue

@@ -126,8 +126,8 @@
     { name: '计划风量(m³/min)', isShow: true, valList: [] },
     // { name: '有效风量(m³/min)', isShow: true, valList: [] },
     // { name: '等积孔(m²)', isShow: true, valList: [] },
-    // { name: '外部漏风率', isShow: false, val: 0 },
     { name: '有效风量率', isShow: false, val: '0%' },
+    { name: '外部漏风率', isShow: false, val: 0 },
   ]);
   let nowTimeYear = ref('');
   let nowTimeWeek = ref('');
@@ -197,7 +197,16 @@
                   return { val: el };
                 })
             : [];
+        // 有效风量率
         navList[3].val = `${res.midinfo[0].sysinfo.useM3Perent}%` || '--';
+
+        // 外部漏风率
+        navList[4].val =
+          (
+            ((Number(res.midinfo[0].sysdata.zongfengliang) - Number(res.midinfo[0].sysdata.zongjinfeng)) /
+              Number(res.midinfo[0].sysdata.zongfengliang)) *
+            100
+          ).toFixed(1) + '%';
       }
       flList.value = res.windrect || res.sys_wind;
 

+ 5 - 4
src/views/vent/monitorManager/alarmMonitor/common.data.ts

@@ -30,16 +30,17 @@ export const typeMenuList = [{ name: '内因火灾' }, { name: '外因火灾' },
 export const typeMenuListTf = [{ name: '通风监测' }, { name: '巷道阻力分析' }];
 //瓦斯监测菜单列表
 export function getMonitorComponent() {
-  const { sysOrgCode } = useGlobSetting();
+  // const { sysOrgCode } = useGlobSetting();
+  const sysOrgCode = 'sdmtjtbdmk';
   let typeMenuListGas;
   switch (sysOrgCode) {
     case 'sdmtjtbetmk': //布尔台
       typeMenuListGas = [{ name: '预警监测' }, { name: '预警指标' }, { name: '瓦斯参数' }];
       return typeMenuListGas;
-      case 'sdmtjtbdmk': //宝德
-      typeMenuListGas = [{ name: '预警监测' },{ name: '管道故障诊断' }, { name: '预警指标' }];
+    case 'sdmtjtbdmk': //宝德
+      typeMenuListGas = [{ name: '预警监测' }, { name: '管道故障诊断' }, { name: '预警指标' }];
       return typeMenuListGas;
-    default:  
+    default:
       typeMenuListGas = [{ name: '预警监测' }, { name: '预警指标' }];
       // typeMenuListGas = [{ name: '预警监测' },{ name: '管道故障诊断' }, { name: '预警指标' }];
       return typeMenuListGas;

+ 11 - 2
src/views/vent/monitorManager/alarmMonitor/index.vue

@@ -553,8 +553,17 @@
     centerData.sb = res.info.deviceWarnInfo.maxLevel;
     centerData.fc = res.info.sysInfo.dustS.maxLevel;
     centerData.riskLevel = res.info.riskLevel;
-    Levels =Object.assign({},await getDisasterProportion())
-    centerData.levels =  Levels.level>0 && Levels.level<= 1 ? 101 :  Levels.level>1 && Levels.level<= 2 ? 102 :  Levels.level>2 &&  Levels.level <= 3 ? 103 : Levels.level>3 &&Levels.level <= 4 ? 104 : 0;
+    Levels = Object.assign({}, await getDisasterProportion());
+    centerData.levels =
+      Levels.level > 0 && Levels.level <= 1
+        ? 101
+        : Levels.level > 1 && Levels.level <= 2
+        ? 102
+        : Levels.level > 2 && Levels.level <= 3
+        ? 103
+        : Levels.level > 3 && Levels.level <= 4
+        ? 104
+        : 0;
 
     Object.keys(iconsMonitor).forEach((el) => {
       if (res.info.devicekindInfo[el]) {

+ 1554 - 329
src/views/vent/monitorManager/alarmMonitor/index1.vue

@@ -1,384 +1,1609 @@
 <template>
+  <customHeader>预警监测管控系统</customHeader>
   <div class="sensor-container">
-    <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
-      <a-tab-pane key="1" tab="实时预警">
-        <div class="box-bg table-box" style="margin-bottom: 10px">
-          <label style="color: #fff">设备类型:</label>
-          <MonitorTable
-            ref="SensorMonitorRef"
-            columnsType="alarm_history"
-            :dataSource="dataSource"
-            design-scope="alarm"
-            @select-row="getSelectRow"
-            :formConfi="formConfig"
-            title="传感器监测"
-          >
-            <template #filterCell="{ 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>
-          </MonitorTable>
-        </div>
-        <div class="charts-box box-bg">
-          <BarAndLine
-            v-if="chartsColumns.length > 0"
-            :chartsColumnsType="selectData.deviceType"
-            xAxisPropType="readTime"
-            :dataSource="detailDataSource"
-            height="100%"
-            :chartsColumns="chartsColumns"
-            chartsType="detail"
-            :option="echartsOption"
-            @refresh="refreshEchatrs"
-          />
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="实时报警">
-        <div class="tab-item table-box box-bg padding-0">
-          <HistoryTable columns-type="modelsensor" device-type="modelsensor" @change="historyDataSourceChange" designScope="modelsensor-history" />
-        </div>
-        <div class="charts-box box-bg">
-          <BarAndLine
-            v-if="chartsColumns.length > 0"
-            :chartsColumnsType="selectData.deviceType"
-            xAxisPropType="gcreatetime"
-            :dataSource="historyDataSource"
-            height="100%"
+    <div class="lr left-box">
+      <ventBox1>
+        <template #title>
+          <div v-if="showToggle == 'all'" class="icon-toggle" @click="handlerToggle">
+            <img v-if="monitor" src="@/assets/images/vent/monitor-toggle.png" alt="" />
+            <img v-else src="@/assets/images/vent/report-toggle.png" alt="" />
+          </div>
+          <div class="monitor-title" @click="showModal('vent')">通风监测预警</div>
+        </template>
+        <template #container>
+          <!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
+          <div class="vent-param">
+            <div class="light-group">
+              <div class="param-item">
+                <div class="param">
+                  <div class="param-icon">
+                    <div class="param-title">总进风量</div>
+                    <div class="param-unit">(m³/min)</div>
+                  </div>
+
+                  <div class="param-val-box">
+                    <div class="param-val-icon"></div>
+                    <div class="param-val">{{ windData.jf || 0 }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="param-item">
+                <div class="param">
+                  <div class="param-icon">
+                    <div class="param-title">总回风量</div>
+                    <div class="param-unit">(m³/min)</div>
+                  </div>
+                  <div class="param-val-box">
+                    <div class="param-val-icon"></div>
+                    <div class="param-val">{{ windData.hf || 0 }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="param-item">
+                <div class="param">
+                  <div class="param-icon">
+                    <div class="param-title">总需风量</div>
+                    <div class="param-unit">(m³/min)</div>
+                  </div>
+                  <div class="param-val-box">
+                    <div class="param-val-icon"></div>
+                    <div class="param-val">{{ windData.xf || 0 }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
+          <BarSingle
+            :xAxisData="xAxisData"
+            :dataSource="windData.levels"
+            height="225px"
             :chartsColumns="chartsColumns"
-            chartsType="history"
-            :option="echartsOption1"
-            @refresh="refreshEchatrs"
+            :option="option"
+            :color="colors"
+            :fontColor="fontColor"
           />
+        </template>
+      </ventBox1>
+      <ventBox1 class="vent-margin-t-10">
+        <template #title>
+          <div class="monitor-title" @click="showModal('sbyj')">设备监测预警</div>
+        </template>
+        <template #container>
+          <div class="icons-box" @mouseleave="resetScroll">
+            <template v-for="(item, key) in iconsMonitor" :key="key">
+              <div class="icon-item" v-if="item.text">
+                <div class="wrapper">
+                  {{ item.text }}
+                </div>
+                <div></div>
+                <img :src="item.url" :alt="item.text" />
+                <div class="level-text">
+                  <div class="all-count">
+                    <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
+                    <span class="num-count">{{ item.allCount || 0 }}</span>
+                  </div>
+                  <div class="warn-count">
+                    <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
+                    <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ item.warnCount || 0 }}</span>
+                  </div>
+                  <div class="close-count">
+                    <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
+                    <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ item.closeCount || 0 }}</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </ventBox1>
+    </div>
+    <div class="center-box">
+      <div class="echart-warn-grade">
+        <warnGradeEchart :echartData="Levels" />
+      </div>
+      <div class="btn-warn-grade">
+        <!-- <a-button type="primary" size="small" @click="warnGradeClick">风险等级划分标准</a-button> -->
+      </div>
+      <div class="animation-box">
+        <canvas class="rain"></canvas>
+        <div
+          class="bottom"
+          :class="{
+            bottom1: centerData.levels == 101 || centerData.levels == 0 || centerData.levels == 10000,
+            bottom2: centerData.levels == 102,
+            bottom3: centerData.levels == 103,
+            bottom4: centerData.levels == 104,
+            bottom5: centerData.levels == 201,
+          }"
+        >
+          <div class="animation1">
+            <div class="ball"></div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="375.334" height="77.559" viewBox="0 0 375.334 77.559" style="opacity: 0.5">
+              <g id="组_14135" data-name="组 14135" transform="translate(-755.058 -139.886)">
+                <path
+                  id="椭圆_2595"
+                  data-name="椭圆 2595"
+                  d="M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z"
+                  transform="translate(755.808 140.636)"
+                  fill="#28a6ff"
+                  opacity="0.7"
+                />
+              </g>
+            </svg>
+          </div>
+          <div class="animation2">
+            <div class="ball1"></div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="414.878" height="91.7" viewBox="0 0 414.878 91.7">
+              <g id="组_14136" data-name="组 14136" transform="translate(-721.822 -158.273)">
+                <path
+                  id="椭圆_2595"
+                  data-name="椭圆 2595"
+                  d="M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z"
+                  transform="translate(722.572 159.023)"
+                  fill="#3dd8ff"
+                  opacity="0.5"
+                />
+              </g>
+            </svg>
+          </div>
+          <div class="text-box">
+            <div class="text1">{{
+              centerData.levels == 0
+                ? '低风险'
+                : centerData.levels == 101
+                ? '低风险'
+                : centerData.levels == 102
+                ? '一般风险'
+                : centerData.levels == 103
+                ? '较大风险'
+                : centerData.levels == 104
+                ? '重大风险'
+                : centerData.levels == 201
+                ? '报警'
+                : '未连接'
+            }}</div>
+
+            <div class="text2">{{ centerData.riskLevel !== undefined && centerData.riskLevel !== null ? centerData.riskLevel : '-' }}</div>
+            <div class="text3">风险得分</div>
+          </div>
+          <div class="icon-animation" @click="warnGradeClick"></div>
         </div>
-      </a-tab-pane>
-      <a-tab-pane key="3" tab="报警历史">
-        <div class="tab-item box-bg">
-          <AlarmHistoryTable columns-type="alarm" device-type="modelsensor" :device-list-api="baseList" designScope="alarm-history" />
+
+        <div class="total-item-monitor-box">
+          <div class="item item1">
+            <div class="icon-box">
+              <div class="icon"></div>
+            </div>
+            <div class="item-monitor-box">
+              <span class="title">火灾监测预警</span>
+              <span :class="centerData.fire != 0 && centerData.fire != 101 ? 'value1' : 'value'">{{
+                centerData.fire == 0
+                  ? '低风险'
+                  : centerData.fire == 101
+                  ? '低风险'
+                  : centerData.fire == 102
+                  ? '一般风险'
+                  : centerData.fire == 103
+                  ? '较大风险'
+                  : centerData.fire == 104
+                  ? '重大风险'
+                  : centerData.fire == 201
+                  ? '报警'
+                  : centerData.fire
+              }}</span>
+            </div>
+          </div>
+          <div class="item item2">
+            <div class="icon-box">
+              <div class="icon"></div>
+            </div>
+            <div class="item-monitor-box">
+              <span class="title">设备监测预警</span>
+              <span :class="centerData.sb != 0 && centerData.sb != 101 ? 'value1' : 'value'">{{
+                centerData.sb == 0
+                  ? '低风险'
+                  : centerData.sb == 101
+                  ? '低风险'
+                  : centerData.sb == 102
+                  ? '一般风险'
+                  : centerData.sb == 103
+                  ? '较大风险'
+                  : centerData.sb == 104
+                  ? '重大风险'
+                  : centerData.sb == 201
+                  ? '报警'
+                  : centerData.sb
+              }}</span>
+            </div>
+          </div>
+          <div class="item item5">
+            <div class="icon-box">
+              <div class="icon"></div>
+            </div>
+            <div class="item-monitor-box">
+              <span class="title">通风监测预警</span>
+              <span :class="centerData.tf !== 0 && centerData.tf !== 101 ? 'value1' : 'value'">{{
+                centerData.tf == 0
+                  ? '低风险'
+                  : centerData.tf == 101
+                  ? '低风险'
+                  : centerData.tf == 102
+                  ? '一般风险'
+                  : centerData.tf == 103
+                  ? '较大风险'
+                  : centerData.tf == 104
+                  ? '重大风险'
+                  : centerData.tf == 201
+                  ? '报警'
+                  : centerData.tf
+              }}</span>
+            </div>
+          </div>
         </div>
-      </a-tab-pane>
-    </a-tabs>
-    <div class="title-text">
-      {{ selectData.strname }}
+      </div>
     </div>
+    <div class="lr right-box">
+      <ventBox1>
+        <template #title>
+          <div class="monitor-title" @click="showModal('fire')">内因火灾监测预警</div>
+        </template>
+        <template #container>
+          <div class="fire-box fire-inner-box">
+            <div class="icon"></div>
+            <div class="container">
+              <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
+                <div class="box-item">
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.value1 ? item.value1 : '--' }}</div
+                  >
+                  <div class="title">监测位置</div>
+                </div>
+
+                <div class="box-item">
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.warnLevel || '-' }}
+                  </div>
+                  <div class="title">预警等级</div>
+                </div>
+                <div class="box-item1">
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.smokeJd || '-' }}
+                  </div>
+                  <div class="title">煤自燃阶段</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ventBox1>
+      <ventBox1 class="vent-margin-t-10">
+        <template #title>
+          <div class="monitor-title" @click="showModal('fire')">外因火灾监测预警</div>
+        </template>
+        <template #container>
+          <div class="fire-box fire-outer-box">
+            <div class="icon"></div>
+            <div class="container">
+              <div class="data-box1" v-for="(item, index) in fireMonitor" :key="index">
+                <div class="box-item">
+                  <!-- <div class="value1"> {{ !item.value ? '-' : item.value == '正常' ? '低风险' : item.value }} </div> -->
+                  <div class="title">{{ item.title }}</div>
+                  <div class="value1"> {{ !item.value ? '低风险' : item.value == '正常' ? '低风险' : item.value }} </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ventBox1>
+    </div>
+    <!-- 风险等级弹窗 -->
+    <a-modal v-model:visible="visibleGrade" width="850px" :footer="null" :title="titleGrade" centered destroyOnClose>
+      <warnGradeInfo />
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-  import BarAndLine from '/@/components/chart/BarAndLine.vue';
-  import { onBeforeMount, ref, onMounted, onUnmounted, toRaw, reactive, nextTick } from 'vue';
-  import MonitorTable from '../comment/MonitorTable.vue';
-  import HistoryTable from '../comment/HistoryTable.vue';
-  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-  import { warningList } from './alarm.api';
-  import { formConfig } from './alarm.data';
-  import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
-
-  const SensorMonitorRef = ref();
-  const deviceBaseList = ref([]);
-  const activeKey = ref('1');
-  const deviceKind = ref('');
-  const deviceTypeOption = ref([]);
-  // 默认初始是第一行
-  const selectRowIndex = ref(0);
-  const dataSource = ref([]);
-  const detailDataSource = ref<any[]>([]);
-  const historyDataSource = ref<any[]>([]);
-  const chartsColumns = ref<any[]>([]);
-
-  const echartsOption = {
-    grid: {
-      top: '20%',
-      left: '10px',
-      right: '5px',
-      bottom: '5%',
-      containLabel: true,
-    },
-    toolbox: {
-      feature: {},
-    },
-  };
+  import { ref, onMounted, onUnmounted, reactive, computed } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { rainBg } from '/@/utils/ui.js';
+  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { getDisasterProportion } from '../../deviceManager/riskSetting/riskSetting.api';
+  import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor } from './alarm.data';
+  import { getTotalList, sysTypeWarnList } from './alarm.api';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import BarSingle from '../../../../components/chart/BarSingle.vue';
+  import warnGradeEchart from './common/warnGradeEchart.vue';
+  import warnGradeInfo from './common/warnGradeInfo.vue';
+
+  let monitor = ref(true);
+  let toggleData = reactive({});
+  let router = useRouter();
+  let warnLevels = ref('');
+  let Levels = reactive({});
+  const warnNumMap = new Map([
+    ['fire', 0],
+    ['dust', 0],
+    ['vent', 0],
+    ['gas', 0],
+  ]);
 
-  const selectData = reactive({
-    strname: '',
-    deviceType: '',
-    deviceID: '',
+  const resetScroll = (e: Event) => {
+    if (e.target && e.target) (e.target as Element).scrollTop = 0;
+  };
+  let windData = reactive({
+    levels: {},
+    jf: 0,
+    hf: 0,
+    xf: 0,
+  }); //通风监测数据
+  let dustData = reactive({
+    //粉尘监测数据
+    levels: {},
+  });
+  let centerData = reactive({
+    fire: 0,
+    tf: 0,
+    ws: 0,
+    sb: 0,
+    fc: 0,
+    levels: 0,
+    riskLevel: '-',
   });
+  //瓦斯
+  let gasMonitor = reactive<any[]>([]);
+  let gasData = {
+    sums: 0,
+    sums1: 0,
+  };
+  let fireMonitor1 = ref<any[]>([]);
+  let visibleGrade = ref(false); //控制风险等级弹窗显示与隐藏
+  let titleGrade = ref(''); //风险等级弹窗标题
+  let showToggle = ref('report');
 
-  const tabChange = (activeKeyVal) => {
-    activeKey.value = activeKeyVal;
+  //点击切换实时\报表数据
+  let handlerToggle = () => {
+    monitor.value = !monitor.value;
+    windData.jf = monitor.value ? toggleData.ventInfo.zongjinfeng : toggleData.ventInfo.totalIntM3;
+    windData.hf = monitor.value ? toggleData.ventInfo.zonghuifeng : toggleData.ventInfo.totalRetM3;
+  };
+  //风险等级点击
+  let warnGradeClick = () => {
+    visibleGrade.value = true;
+    titleGrade.value = '风险等级信息';
   };
+  //跳转详情
+  function showModal(data) {
+    switch (data) {
+      case 'vent':
+        router.push('/ventilate/warn/home');
+        break;
+      case 'fire':
+        router.push('/fire/warn/home');
+        break;
+      case 'dust':
+        router.push('/dust/warn/home');
+        break;
+      case 'gas':
+        router.push('/gas/warn/home');
+        break;
+      case 'sbyj':
+        // router.push('/device/warn/home');
+        router.push('/device/warn/home');
+        break;
+    }
+  }
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
-  const getMonitor = (flag = false) => {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(
-        async () => {
-          await getDataSource();
-          if (timer) {
-            timer = null;
-          }
-          getMonitor();
-        },
-        flag ? 0 : 1000
-      );
-    }
-  };
+  function getMonitor(flag = false) {
+    timer = setTimeout(
+      async () => {
+        // await getDataSource();
+        await getList();
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      },
+      flag ? 0 : 10000
+    );
+  }
 
-  const getDataSource = async () => {
-    const res = await warningList({});
-    dataSource.value = res.list.records || [];
-    // if(dataSource.value.length > 0){
-    //   dataSource.value.map((data: any) => {
-    //     const readData = data.readData;
-    //     data = Object.assign(data, readData);
-    //     return data;
-    //   });
-    // }
-  };
+  // 获取预警数据
+  async function getList() {
+    const res = await getTotalList({});
+    console.log(res, '预警数据--------------');
+    // fireMonitor1.value.length = 0;
+    toggleData = Object.assign({}, res);
+    windData.levels = res.info.sysInfo.ventS.levels;
+    windData.levels['blue'] = warnNumMap.get('vent');
+    if (showToggle.value == 'monitor') {
+      windData.jf = res.ventInfo.zongjinfeng;
+      windData.hf = res.ventInfo.zonghuifeng;
+    } else if (showToggle.value == 'report') {
+      windData.jf = res.ventInfo.totalIntM3;
+      windData.hf = res.ventInfo.totalRetM3;
+    } else {
+      windData.jf = monitor.value ? res.ventInfo.zongjinfeng : res.ventInfo.totalIntM3;
+      windData.hf = monitor.value ? res.ventInfo.zonghuifeng : res.ventInfo.totalRetM3;
+    }
+    windData.xf = res.ventInfo.xufengliang;
+    dustData.levels = res.info.sysInfo.dustS.levels;
+    dustData.levels['blue'] = warnNumMap.get('dust');
+    centerData.fire = res.info.sysInfo.fireS.maxLevel;
+    centerData.tf = res.info.sysInfo.ventS.maxLevel;
+    centerData.ws = res.info.sysInfo.gasS.maxLevel;
+    centerData.sb = res.info.deviceWarnInfo.maxLevel;
+    centerData.fc = res.info.sysInfo.dustS.maxLevel;
+    centerData.riskLevel = res.info.riskLevel;
+    Levels = Object.assign({}, await getDisasterProportion());
+    centerData.levels =
+      Levels.level > 0 && Levels.level <= 1
+        ? 101
+        : Levels.level > 1 && Levels.level <= 2
+        ? 102
+        : Levels.level > 2 && Levels.level <= 3
+        ? 103
+        : Levels.level > 3 && Levels.level <= 4
+        ? 104
+        : 0;
 
-  const getSelectRow = (selectRow, index) => {
-    if (!selectRow) return;
-    selectRowIndex.value = index;
-    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
-    Object.assign(selectData, selectRow, baseData);
-    if (selectData.deviceType) {
-      if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
+    Object.keys(iconsMonitor).forEach((el) => {
+      if (res.info.devicekindInfo[el]) {
+        // iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
+        iconsMonitor[el].text = res.info.devicekindInfo[el].name;
+        iconsMonitor[el].allCount = res.info.devicekindInfo[el].totalcount;
+        iconsMonitor[el].warnCount = res.info.devicekindInfo[el].count;
+        iconsMonitor[el].closeCount = res.info.devicekindInfo[el].netstatus;
       }
-      if (activeKey.value === '1') detailDataSource.value = [];
-      if (activeKey.value === '2') historyDataSource.value = [];
-      handleChange(selectData.deviceType);
-    }
-  };
+    });
+    fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
+        ? '正常'
+        : ''
+      : '';
+    fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.smokeval &&
+        res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel &&
+        res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel == '0'
+        ? '正常'
+        : ''
+      : '';
 
-  function handleChange(type) {
-    if (type === 'modelsensor_multi') {
-      chartsColumns.value = [
-        {
-          legend: '气压值',
-          seriesName: '(Pa)',
-          ymax: 50,
-          yname: 'Pa',
-          linetype: 'bar',
-          yaxispos: 'left',
-          color: '#37BCF2',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'pa',
-        },
-        {
-          legend: '温度',
-          seriesName: '(℃)',
-          ymax: 50,
-          yname: '℃',
-          linetype: 'bar',
-          yaxispos: 'right',
-          color: '#FC4327',
-          sort: 2,
-          xRotate: 0,
-          dataIndex: 'temperature',
-        },
-      ];
-    } else if (type === 'modelsensor_smoke') {
-      chartsColumns.value = [
-        {
-          legend: '烟雾浓度',
-          seriesName: '(%)',
-          ymax: 20,
-          yname: '%',
-          linetype: 'bar',
-          yaxispos: 'left',
-          color: '#37BCF2',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'windSpeed',
-        },
-      ];
-    } else if (type === 'modelsensor_speed') {
-      chartsColumns.value = [
-        {
-          legend: '风速',
-          seriesName: '(m/s)',
-          ymax: 20,
-          yname: 'm/s',
-          linetype: 'bar',
-          yaxispos: 'left',
-          color: '#37BCF2',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'windSpeed',
-        },
-      ];
-    } else if (type === 'modelsensor_gas') {
-      chartsColumns.value = [
-        {
-          legend: '甲烷',
-          seriesName: '(%)',
-          ymax: 20,
-          yname: '%',
-          linetype: 'bar',
-          yaxispos: 'left',
-          color: '#37BCF2',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'windSpeed',
-        },
-      ];
-    }
+    fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.fireval &&
+        res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel &&
+        res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel == '0'
+        ? '正常'
+        : ''
+      : '';
 
-    console.log('[ type ] >', type, chartsColumns.value);
-  }
+    fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.coval && res.info.sysInfo.fireS.summaryInfo.external.coval.value
+        ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
+        : ''
+      : '';
 
-  function refreshEchatrs() {
-    timer = null;
-    getMonitor();
-    console.log('echarts 刷新');
+    if (res.bundletubeInfo && res.bundletubeInfo.msgTxt.length != 0 && res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
+      const moniterList: any[] = [];
+      res.bundletubeInfo.msgTxt[0].datalist.forEach((el, ind) => {
+        moniterList.push({
+          warnLevel: el.syswarnLevel_str,
+          smokeJd: el.syswarnLevel_des,
+          value1: el.strinstallpos,
+        });
+      });
+      fireMonitor1.value = moniterList;
+    } else {
+      fireMonitor1.value = [];
+    }
+    gasMonitor.length = 0;
+    gasData.sums = 0;
+    gasData.sums1 = 0;
+    res.info.sysInfo.gasS.devices.forEach((el) => {
+      gasData.sums += el.gasNumber;
+      gasData.sums1 += el.pumpNumber;
+      gasMonitor.push({ label: el.systemname, value: el.gasNumber, value1: el.pumpNumber });
+    });
   }
 
-  function historyDataSourceChange(dataSource) {
-    historyDataSource.value = dataSource;
-    if (historyDataSource.value.length > 0) handleChange(historyDataSource.value[0].gdevicetype);
+  function getLevelNum() {
+    return new Promise(async (resolve) => {
+      const typeArr = ['fire', 'dust', 'vent', 'gas'];
+      for (let i = 0; i < typeArr.length; i++) {
+        const type = typeArr[i];
+        const result = await sysTypeWarnList({ type });
+        warnNumMap.set(type, result['length']);
+      }
+      resolve(null);
+    });
   }
 
   onMounted(async () => {
-    getMonitor(true);
+    const { sysOrgCode, sysDataType } = useGlobSetting();
+    warnLevels.value = sysOrgCode;
+    showToggle.value = sysDataType || 'report';
+    await getLevelNum();
+    await getMonitor(true);
+    rainBg('rain', 'animation-box');
   });
 
   onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
+    clearTimeout(timer);
+    timer = undefined;
   });
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/vent/modal.less';
-  .padding-0 {
-    padding: 10px 0 !important;
-  }
-  .sensor-container {
-    position: relative;
-    top: 65px;
-    padding: 10px;
-    z-index: 999;
-    max-height: calc(100vh - 150px);
-    .@{ventSpace}-tabs {
-      max-height: calc(100vh - 100px);
-      .tab-item {
-        max-height: calc(100vh - 170px);
-        overflow-y: auto;
-      }
-    }
-    .title-text {
-      position: absolute;
-      top: -14px;
-      left: 0;
-      width: 100%;
-      text-align: center;
-      color: #fff;
-    }
-    .table-box {
-      height: calc(60vh - 150px);
-      padding: 20px 10px;
-      overflow-y: auto;
-    }
+  @import '/@/design/vent/color.less';
+  @a: 370px; // 椭圆x轴半径(长半径)
+  @b: 107px; // 椭圆y轴半径(短半径)
+  @s: 40; // 坐标点的数目(数目越大,动画越精细)
 
-    .box-bg {
-      border: 1px solid #4d7ad855;
-      border-radius: 2px;
-      // background-color: #001d3055;
-      -webkit-backdrop-filter: blur(8px);
-      backdrop-filter: blur(8px);
-      box-shadow: 0 0 10px #5984e055 inset;
-      background-color: #00b3ff12;
-    }
-    .charts-box {
-      height: calc(40vh - 80px);
-      padding: 5px 10px;
-      margin-top: 10px;
+  @bg: #e6e2df;
+
+  .loop(@index) when (@index < @s + 1) {
+    .loop((@index + 1));
+    @keyframeSel: @index * 100% ./ @s;
+
+    @{keyframeSel} {
+      transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
     }
   }
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    height: 100%;
-  }
-  :deep(.@{ventSpace}-tabs-card) {
-    .@{ventSpace}-tabs-tab {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
-      border-color: #74e9fe;
-      border-radius: 0%;
-      &:hover {
-        color: #64d5ff;
-      }
+
+  @{theme-deepblue} {
+    .sensor-container {
+      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+      --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
+      // --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/box-top-bg.png');
+      --image-fire-bg-top: url('/@/assets/images/themify/deepblue/vent/fire-bg-top.png');
+      --image-icon-bottom-bg: url('/@/assets/images/themify/deepblue/vent/icon-bottom-bg.png');
+      --image-outer-icon: url('/@/assets/images/themify/deepblue/vent/outer-icon.svg');
+      --image-inner-icon: url('/@/assets/images/themify/deepblue/vent/inner-icon.svg');
+      --image-box-bottom-bg: none;
+      // --image-box-bottom-bg: url('/@/assets/images/themify/deepblue/vent/box-bottom-bg.png');
+      --image-center-bg: url('/@/assets/images/themify/deepblue/vent/alarm/center-bg.png');
+      --image-warning-bg: url('/@/assets/images/themify/deepblue/vent/alarm/warning-bg.png');
+      --image-warning-icon-bg1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg1.png');
+      --image-warning-icon-bg-a1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a1.png');
+      --image-warning-icon-bg2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg2.png');
+      --image-warning-icon-bg-a2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a2.png');
+      --image-warning-icon-bg3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg3.png');
+      --image-warning-icon-bg-a3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a3.png');
+      --image-warning-icon-bg4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg4.png');
+      --image-warning-icon-bg-a4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a4.png');
+      --image-warning-icon-bg5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg5.png');
+      --image-warning-icon-bg-a5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a5.png');
+      --image-bottom1: url('/@/assets/images/themify/deepblue/vent/alarm/bottom1.png');
+      --image-bottom: url('/@/assets/images/themify/deepblue/vent/alarm/bottom.png');
+      --image-icon-bg: url('/@/assets/images/themify/deepblue/vent/alarm/icon-bg.png');
+      --image-icon-animation: url('/@/assets/images/themify/deepblue/vent/alarm/icon-animation.png');
+      --image-data-bg: url('/@/assets/images/themify/deepblue/vent/alarm/data-bg.png');
+      --image-icon-fire: url('/@/assets/images/themify/deepblue/vent/alarm/icon-fire.svg');
+      --image-icon-device: url('/@/assets/images/themify/deepblue/vent/alarm/icon-device.svg');
+      --image-icon-dust: url('/@/assets/images/themify/deepblue/vent/alarm/icon-dust.svg');
+      --image-icon-gas: url('/@/assets/images/themify/deepblue/vent/alarm/icon-gas.svg');
+      --image-icon-vent: url('/@/assets/images/themify/deepblue/vent/alarm/icon-vent.svg');
+      --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+      --image-plane: url('/@/assets/images/themify/deepblue/vent/plane.png');
+      --image-small-bg1: url('/@/assets/images/themify/deepblue/vent/small-bg1.png');
+      --image-plane1: url('/@/assets/images/themify/deepblue/vent/plane1.png');
+      --container-color: #0e223b;
+      // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
+      --container-image: none;
     }
-    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-      color: aqua;
+
+    .sensor-container {
+      .center-box {
+        position: relative;
+      }
     }
-    .@{ventSpace}-tabs-nav::before {
-      border-color: #74e9fe;
+  }
+
+  .sensor-container {
+    --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
+    --image-box-top-bg: url('/@/assets/images/vent/box-top-bg.png');
+    --image-fire-bg-top: url('/@/assets/images/vent/fire-bg-top.png');
+    --image-icon-bottom-bg: url('/@/assets/images/vent/icon-bottom-bg.png');
+    --image-outer-icon: url('/@/assets/images/vent/outer-icon.svg');
+    --image-inner-icon: url('/@/assets/images/vent/inner-icon.svg');
+    --image-box-bottom-bg: url('/@/assets/images/vent/box-bottom-bg.png');
+    --image-center-bg: url('/@/assets/images/vent/alarm/center-bg.png');
+    --image-warning-bg: url('/@/assets/images/vent/alarm/warning-bg.png');
+    --image-warning-icon-bg1: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
+    --image-warning-icon-bg-a1: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
+    --image-warning-icon-bg2: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
+    --image-warning-icon-bg-a2: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
+    --image-warning-icon-bg3: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
+    --image-warning-icon-bg-a3: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
+    --image-warning-icon-bg4: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
+    --image-warning-icon-bg-a4: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
+    --image-warning-icon-bg5: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
+    --image-warning-icon-bg-a5: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
+    --image-bottom1: url('/@/assets/images/vent/alarm/bottom1.png');
+    --image-bottom: url('/@/assets/images/vent/alarm/bottom.png');
+    --image-icon-bg: url('/@/assets/images/vent/alarm/icon-bg.png');
+    --image-icon-animation: url('/@/assets/images/vent/alarm/icon-animation.png');
+    --image-data-bg: url('/@/assets/images/vent/alarm/data-bg.png');
+    --image-icon-fire: url('/@/assets/images/vent/alarm/icon-fire.svg');
+    --image-icon-device: url('/@/assets/images/vent/alarm/icon-device.svg');
+    --image-icon-dust: url('/@/assets/images/vent/alarm/icon-dust.svg');
+    --image-icon-gas: url('/@/assets/images/vent/alarm/icon-gas.svg');
+    --image-icon-vent: url('/@/assets/images/vent/alarm/icon-vent.svg');
+    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+    --image-plane: url('/@/assets/images/vent/plane.png');
+    --image-small-bg1: url('/@/assets/images/vent/small-bg1.png');
+    --image-plane1: url('/@/assets/images/vent/plane1.png');
+    --container-color: #00213236;
+    --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+    width: 100%;
+    height: calc(100% - 86px);
+    display: flex;
+    position: relative;
+    top: 78px;
+
+    .lr {
+      width: 650px;
+      height: 100%;
+
+      // background-color: #ffffff10;
     }
-    .@{ventSpace}-picker,
-    .@{ventSpace}-select-selector {
-      width: 100% !important;
-      background: #00000017 !important;
-      border: 1px solid @vent-form-item-border !important;
-      input,
-      .@{ventSpace}-select-selection-item,
-      .@{ventSpace}-picker-suffix {
-        color: #fff !important;
+
+    .left-box {
+      .vent-param {
+        width: 100%;
+        margin-top: 10px;
+
+        .light-group {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          position: relative;
+
+          .param-item {
+            width: 150px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: reactive;
+
+            .icon {
+              display: block;
+              position: absolute;
+              top: -5px;
+            }
+
+            .param {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+
+              .param-icon {
+                width: 121px;
+                height: 69px;
+                background: var(--image-vent-param-bg);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                top: -20px;
+                margin-top: 10px;
+
+                .param-title {
+                  position: relative;
+                  top: -4px;
+                }
+
+                .param-unit {
+                  position: relative;
+                  top: -2px;
+                  font-size: 12px;
+                }
+              }
+
+              .param-val-box {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                top: -20px;
+
+                .param-val-icon {
+                  width: 2px;
+                  height: 15px;
+                  background: #00d8ff;
+                  position: relative;
+
+                  &::after {
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    width: 6px;
+                    height: 6px;
+                    border-radius: 3px;
+                    background: #00d8ff;
+                    bottom: -2px;
+                    left: -2px;
+                  }
+                }
+
+                .param-val {
+                  position: relative;
+                  font-family: 'douyuFont';
+                  // color: #20dbfd;
+                  text-shadow: 0 0 25px #00d8ff;
+                  font-size: 13px;
+                  border: 1px solid #40b7f3;
+                  padding: 5px 30px 2px 30px;
+                  top: 2px;
+
+                  &::after {
+                    width: calc(100% - 4px);
+                    height: calc(100% - 4px);
+                    content: '';
+                    position: absolute;
+                    top: 2px;
+                    left: 2px;
+                    display: block;
+                    border: 1px solid #006ea6;
+                  }
+                }
+              }
+            }
+          }
+        }
       }
-      .@{ventSpace}-select-selection-placeholder {
-        color: #b7b7b7 !important;
+
+      .icons-box {
+        height: 365px;
+        overflow-y: hidden;
+
+        &:hover {
+          overflow-y: auto;
+          overflow-x: auto;
+        }
+
+        .icon-item {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 3px;
+
+          &:nth-child(even) {
+            padding-right: 0px;
+          }
+
+          .level-text {
+            width: 245px;
+            display: flex;
+            justify-content: space-around;
+            position: absolute;
+            top: 48px;
+            left: 180px;
+            color: #ffffffe0;
+            font-size: 13px;
+            text-align: center;
+            letter-spacing: 1px;
+
+            .num-count,
+            .num-count1 {
+              font-family: 'douyuFont';
+              font-size: 12px;
+            }
+
+            .warn-count,
+            .close-count {
+              .num-count {
+                color: #ffffffe0;
+              }
+
+              .num-count1 {
+                color: #ff0000;
+              }
+            }
+          }
+
+          img {
+            width: 427px;
+            height: 79px;
+          }
+        }
+
+        .wrapper {
+          position: absolute;
+          top: 48px;
+          left: 112px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
+        }
       }
-    }
-    .@{ventSpace}-pagination-next,
-    .action,
-    .@{ventSpace}-select-arrow,
-    .@{ventSpace}-picker-separator {
-      color: #fff !important;
-    }
-    .@{ventSpace}-table-cell-row-hover {
-      background: #264d8833 !important;
-    }
-    .@{ventSpace}-table-row-selected {
-      background: #00c0a311 !important;
-      td {
-        background-color: #00000000 !important;
+
+      @keyframes move {
+        0% {
+          transform: translateY(0px);
+        }
+
+        100% {
+          transform: translateY(-269px);
+        }
       }
-    }
-    .@{ventSpace}-table-thead {
-      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-      background: #3d9dd45d !important;
-
-      & > tr > th,
-      .@{ventSpace}-table-column-title {
-        // color: #70f9fc !important;
-        border-color: #84f2ff !important;
-        border-left: none !important;
-        border-right: none !important;
-        padding: 7px;
+
+      @keyframes move1 {
+        0% {
+          transform: translateY(0px);
+        }
       }
     }
 
-    .@{ventSpace}-table-tbody {
-      tr > td {
-        padding: 12px;
+    .center-box {
+      position: relative;
+      width: calc(100% - 710px);
+      // background-color: #ffffff10;
+      margin: 0 8px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+
+      .echart-warn-grade {
+        position: absolute;
+        left: -10px;
+        top: 10px;
+        width: 400px;
+        height: 200px;
+      }
+
+      .btn-warn-grade {
+        position: absolute;
+        right: 30px;
+        top: 10px;
+      }
+      .animation-box {
+        height: fit-content;
+        flex: 1;
+        margin-bottom: 10px;
+        margin-top: 120px;
+        background: var(--image-center-bg) no-repeat;
+        background-size: contain;
+        background-position: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        top: 45px;
+
+        .rain {
+          position: absolute;
+        }
+
+        .bottom {
+          width: 528px;
+          height: 395px;
+          background-repeat: no-repeat;
+          position: absolute;
+          z-index: 999;
+
+          &::before {
+            content: '';
+            width: 325px;
+            height: 379px;
+            position: absolute;
+            left: 105px;
+            top: -60px;
+            background: var(--image-warning-bg) no-repeat;
+          }
+
+          .animation1 {
+            width: 390px;
+            height: 78px;
+            position: absolute;
+            top: -30px;
+            left: 80px;
+            z-index: 999;
+
+            // animation: rotate3 3s linear infinite;
+            .ball {
+              position: absolute;
+              width: 12px;
+              height: 12px;
+              background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+              border-radius: 6px;
+              background-size: cover;
+              offset-path: path(
+                'M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
+              );
+              animation: 10s linear 0s infinite alternate ball;
+            }
+          }
+
+          .animation2 {
+            width: 430px;
+            height: 92px;
+            position: absolute;
+            top: 0px;
+            left: 60px;
+            z-index: 999;
+
+            // animation: rotate4 3s linear infinite;
+            .ball1 {
+              position: absolute;
+              width: 12px;
+              height: 12px;
+              background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+              border-radius: 6px;
+              background-size: cover;
+              offset-path: path(
+                'M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
+              );
+              animation: 10s linear 0s infinite alternate ball1;
+            }
+          }
+
+          .text-box {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            color: var(--vent-font-color);
+            align-items: center;
+            margin-top: 30px;
+
+            .text1 {
+              font-size: 26px;
+              font-weight: 600;
+              letter-spacing: 2px;
+              padding-top: 20px;
+              position: relative;
+              top: 30px;
+              // margin-bottom: 10px;
+            }
+
+            .text2 {
+              font-size: 20px;
+              color: #ffffffdd;
+              font-weight: 600;
+              margin-top: 10px;
+              position: relative;
+              top: 30px;
+            }
+
+            .text3 {
+              font-size: 16px;
+              color: #ffffffdd;
+              margin-top: 10px;
+              position: relative;
+              top: 20px;
+            }
+          }
+
+          .icon-animation {
+            width: 178px;
+            height: 208px;
+            margin: 0 auto;
+            top: -130px;
+            left: 4px;
+            position: relative;
+            animation: 0.5s linear 0s infinite alternate iconMove;
+          }
+        }
+
+        .bottom1 {
+          background-image: var(--image-warning-icon-bg1);
+
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a1);
+          }
+
+          .text-box {
+            .text1 {
+              color: #00d8ff;
+            }
+          }
+        }
+
+        .bottom2 {
+          background-image: var(--image-warning-icon-bg2);
+
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a2);
+          }
+
+          .text-box {
+            .text1 {
+              color: #fcfc22;
+            }
+          }
+        }
+
+        .bottom3 {
+          background-image: var(--image-warning-icon-bg3);
+
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a3);
+          }
+
+          .text-box {
+            .text1 {
+              color: #ff7010;
+            }
+          }
+        }
+
+        .bottom4 {
+          background-image: var(--image-warning-icon-bg4);
+
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a4);
+          }
+
+          .text-box {
+            .text1 {
+              color: #df4e43;
+            }
+          }
+        }
+
+        .bottom5 {
+          background-image: var(--image-warning-icon-bg5);
+
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a5);
+          }
+
+          .text-box {
+            .text1 {
+              color: #ff2313;
+              // animation: color-blink 1s infinite;
+            }
+
+            // @keyframes color-blink {
+            //   0% { color: red; }
+            //   50% { color: blue; }
+            //   100% { color: red; }
+            // }
+          }
+        }
+
+        .total-item-monitor-box {
+          width: 100%;
+          height: 237px;
+          position: relative;
+          top: 180px;
+          left: 265px;
+          background: var(--image-bottom1) no-repeat;
+          background-size: contain;
+
+          &::after {
+            content: '';
+            width: 750px;
+            height: 750px;
+            position: absolute;
+            transform-style: preserve-3d;
+            transform: translateX(0%) translateY(0%) rotateX(72deg);
+            background: var(--image-bottom);
+            animation: rotate1 3s linear infinite;
+            top: -200px;
+            left: -180px;
+          }
+
+          .item {
+            position: absolute;
+
+            // width: 107px;
+            // height: 107px;
+            // left: 120px;
+            // top: 115px;
+            // animation: red-ball 10s linear infinite;
+            .icon-box {
+              width: 100px;
+              height: 100px;
+
+              position: relative;
+              z-index: 0;
+
+              &::before {
+                position: absolute;
+                content: '';
+                width: 105px;
+                height: 68px;
+                top: 15px;
+                z-index: -1;
+                background: var(--image-icon-bg) no-repeat;
+              }
+
+              &::after {
+                position: absolute;
+                content: '';
+                width: 71px;
+                height: 71px;
+                top: 26px;
+                left: 14px;
+                z-index: 1;
+                background: var(--image-icon-animation) no-repeat;
+                transform: translateX(0%) rotateX(70deg);
+                animation: rotate2 2s linear infinite;
+              }
+
+              .icon {
+                width: 100px;
+                height: 100px;
+                background-repeat: no-repeat;
+                background-position: top center;
+                position: relative;
+                top: 5px;
+              }
+            }
+
+            .item-monitor-box {
+              color: var(--vent-font-color);
+              position: relative;
+              top: -135px;
+              left: -20px;
+              font-weight: 600;
+              // background: #06020066;
+              padding: 5px 20px 8px 20px;
+
+              &::before {
+                position: absolute;
+                content: '';
+                width: 196px;
+                height: 48px;
+                left: -20px;
+                top: -10px;
+                background: var(--image-data-bg);
+              }
+
+              .value {
+                color: #2bdcff;
+                margin-left: 20px;
+              }
+
+              .value1 {
+                font-size: 16px;
+                font-weight: 800;
+                margin-top: 6px;
+                margin-left: 10px;
+                color: #ff0000;
+                animation: color-blink 1s infinite;
+              }
+
+              @keyframes color-blink {
+                0% {
+                  color: red;
+                }
+
+                50% {
+                  color: rgb(198, 0, 0);
+                }
+
+                100% {
+                  color: rgb(255, 18, 18);
+                }
+              }
+            }
+          }
+
+          .item1 {
+            top: 230px;
+            left: 150px;
+
+            .icon {
+              background-image: var(--image-icon-fire);
+            }
+          }
+
+          .item2 {
+            top: 185px;
+            left: -120px;
+
+            .icon {
+              background-image: var(--image-icon-device);
+            }
+          }
+
+          .item3 {
+            top: 185px;
+            left: 420px;
+
+            .icon {
+              background-image: var(--image-icon-dust);
+            }
+          }
+
+          .item4 {
+            top: 20px;
+            left: 390px;
+
+            .icon {
+              background-image: var(--image-icon-gas);
+            }
+
+            .item-monitor-box {
+              top: -155px;
+
+              &::before {
+                top: 10px;
+              }
+            }
+          }
+
+          .item5 {
+            top: 185px;
+            left: 420px;
+
+            .icon {
+              background-image: var(--image-icon-vent);
+            }
+          }
+        }
+
+        @keyframes iconMove {
+          100% {
+            opacity: 0;
+          }
+        }
+
+        @keyframes rotate1 {
+          0% {
+            transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
+          }
+
+          100% {
+            transform: translateX(0%) rotateX(72deg) rotateZ(0);
+          }
+        }
+
+        @keyframes rotate2 {
+          0% {
+            transform: translateX(0%) rotateX(70deg) rotateZ(0);
+          }
+
+          100% {
+            transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
+          }
+        }
+
+        @keyframes rotate3 {
+          0% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(0);
+          }
+
+          100% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+          }
+        }
+
+        @keyframes rotate4 {
+          100% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(0);
+          }
+
+          0% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+          }
+        }
+
+        @keyframes ball {
+          100% {
+            offset-distance: 100%;
+          }
+
+          0% {
+            offset-distance: 0%;
+          }
+        }
+
+        @keyframes ball1 {
+          0% {
+            offset-distance: 100%;
+          }
+
+          100% {
+            offset-distance: 0%;
+          }
+        }
       }
     }
-    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
-      background-color: #26648855 !important;
+
+    .right-box {
+      .fire-box {
+        width: 100%;
+        height: 360px;
+        padding: 0 10px;
+        padding-top: 40px;
+        .icon {
+          width: 405px;
+          height: 48px;
+          text-align: center;
+          background: var(--image-plane) no-repeat;
+          background-size: 100%;
+          background-position: bottom;
+          position: relative;
+          margin: 0 auto;
+
+          &::after {
+            position: absolute;
+            content: '';
+            width: 50px;
+            height: 50px;
+            top: -35px;
+            left: 180px;
+            // background: var(--image-inner-icon) no-repeat;
+          }
+          &::before {
+            position: absolute;
+            content: '';
+            width: 82px;
+            height: 36px;
+            background: var(--image-icon-bottom-bg);
+            left: 160px;
+            top: -5px;
+          }
+        }
+        .container {
+          height: 250px;
+          overflow-y: auto;
+          margin-top: 10px;
+          .data-box {
+            display: flex;
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+            margin: 10px auto;
+            position: relative;
+            background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
+            .box-item {
+              width: 100%;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              padding: 0 20px;
+
+              .value {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                color: #2bdcff;
+                margin-bottom: 5px;
+              }
+
+              .value1 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: rgb(145, 230, 9);
+              }
+
+              .value2 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                // color: rgb(0, 242, 255);
+                color: #ffff35;
+              }
+
+              .value3 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                // color: #ffff35;
+                color: #ff0000;
+              }
+
+              .value4 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ffbe69;
+              }
+
+              .value5 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff6f00;
+              }
+
+              .value6 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff0000;
+              }
+
+              .title {
+                font-size: 13px;
+              }
+            }
+
+            .box-item1 {
+              width: 50%;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              padding: 0 20px;
+
+              .value {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                color: #2bdcff;
+                margin-bottom: 5px;
+              }
+
+              .value1 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: rgb(145, 230, 9);
+              }
+
+              .value2 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                // color: rgb(0, 242, 255);
+                color: #ffff35;
+              }
+
+              .value3 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                // color: #ffff35;
+                color: #ff0000;
+              }
+
+              .value4 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ffbe69;
+              }
+
+              .value5 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff6f00;
+              }
+
+              .value6 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff0000;
+              }
+
+              .title {
+                font-size: 13px;
+              }
+            }
+          }
+          .data-box1 {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+            margin: 10px auto;
+            position: relative;
+            background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
+            .box-item {
+              width: 300px;
+              height: 50px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              .title {
+                font-size: 16px;
+                font-weight: 600;
+              }
+              .value {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                color: #2bdcff;
+                margin-bottom: 5px;
+              }
+
+              .value1 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: rgb(145, 230, 9);
+              }
+
+              .value2 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                // color: rgb(0, 242, 255);
+                color: #ffff35;
+              }
+
+              .value3 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                // color: #ffff35;
+                color: #ff0000;
+              }
+
+              .value4 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ffbe69;
+              }
+
+              .value5 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff6f00;
+              }
+
+              .value6 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff0000;
+              }
+            }
+          }
+        }
+      }
+      .fire-inner-box {
+        .icon {
+          &::after {
+            background: var(--image-inner-icon) no-repeat;
+          }
+        }
+      }
+      .fire-outer-box {
+        .icon {
+          &::after {
+            background: var(--image-outer-icon) no-repeat;
+          }
+        }
+      }
     }
 
-    .jeecg-basic-table-row__striped {
-      // background: #97efff11 !important;
-      td {
-        background-color: #97efff11 !important;
+    .monitor-title {
+      cursor: pointer;
+    }
+    .icon-toggle {
+      position: absolute;
+      left: 18px;
+      top: 6px;
+      img {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
       }
     }
   }

+ 3 - 3
src/views/vent/monitorManager/compressor/components/nitrogenHome_bet.vue

@@ -6,7 +6,7 @@
     style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
   >
     <a-spin :spinning="loading" />
-    <template>
+    <template v-if="monitorDataGroupNum">
       <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
         <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
           <div class="title">
@@ -91,7 +91,7 @@
       <div v-if="monitorNetStatus == 0" class="device-state">网络断开</div>
       <div class="top-box">
         <!-- 左边监测数据 -->
-        <div class="lr-box left-box">
+        <div class="lr-box left-box" v-if="monitorDataGroupNum">
           <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
             <ventBox1>
               <template #title>
@@ -183,7 +183,7 @@
         </div>
         <!-- 右边控制状态 -->
         <div class="lr-box right-box">
-          <ventBox1>
+          <ventBox1 v-if="monitorDataGroupNum">
             <template #title>
               <div>远程控制</div>
             </template>

+ 29 - 26
src/views/vent/monitorManager/deviceMonitor/components/device/device.data.ts

@@ -54,9 +54,9 @@ export function getMonitorComponent() {
     case 'sdmtjthlgmk': //哈拉沟
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.hlg.vue'));
       break;
-    case 'sdmtjtcctmk': // 寸草塔
-      FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.cct.vue'));
-      break;
+    // case 'sdmtjtcctmk': // 寸草塔
+    //   FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.cct.vue'));
+    //   break;
     case 'shsddlsjh': //沙吉海
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.sjh.vue'));
       break;
@@ -67,6 +67,7 @@ export function getMonitorComponent() {
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal-Gx.vue'));
       break;
     case 'sdmtjtyjlmk': //榆家梁
+    case 'sdmtjtcctmk': //榆家梁
     case 'sdmtjtswmk': //上湾
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.sw.vue'));
       break;
@@ -419,28 +420,6 @@ export const ballvalveColumns: BasicColumn[] = [
   },
 ];
 
-export const noDetailArr = ['nitrogen', 'forcFan']; // 前端详情的,
-// 棋盘井球阀监测数据只有温度
-export const haveDetailArr = [
-  'windrect',
-  'window',
-  'gate',
-  'fanlocal',
-  'fanmain',
-  'fiber',
-  'bundletube',
-  'gaspatrol',
-  // 'dusting', // 保德要求去掉
-  // 'ballvalve',
-  'pump',
-  'safetymonitor',
-  'nitrogen',
-  'atomizing',
-  'firemon',
-  'forcFan',
-  'pulping',
-];
-
 export const locationFormConfig = {
   labelAlign: 'left',
   showAdvancedButton: false,
@@ -514,6 +493,30 @@ export const vehicleFormConfig = {
     span: 4,
   },
 };
+
+export const noDetailArr = ['nitrogen', 'forcFan']; // 前端详情的,
+// 棋盘井球阀监测数据只有温度
+export const haveDetailArr = [
+  'windrect',
+  'window',
+  'gate',
+  'fanlocal',
+  'fanmain',
+  'fiber',
+  'bundletube',
+  'gaspatrol',
+  // 'dusting', // 保德要求去掉
+  // 'ballvalve',
+  'pump',
+  'safetymonitor',
+  'nitrogen',
+  'atomizing',
+  'firemon',
+  'forcFan',
+  'pulping',
+  'door',
+];
+// 有操作记录的设备类型
 export const haveHandlerArr = [
   'windrect',
   'window',
@@ -527,7 +530,6 @@ export const haveHandlerArr = [
   'spray',
   'dustdev',
   'gate_linkdlfm',
-  'door',
   // 'firemon',
 ]; // table无操作
 export const noWarningArr = [
@@ -544,6 +546,7 @@ export const noWarningArr = [
 ]; // 无预警详情的
 export const haveSysDetailArr = ['forcFan', 'pulping']; //有场景详情的
 // export const haveSysDetailArr = ['']; //有场景详情的
+
 export const noHistoryArr = () =>
   History_Type['type'] == 'remote'
     ? ['surface_history', 'majorpath', 'gasDayReport', 'dustDayReport', 'bundleDayReport', 'bundleSpyDayReport', 'gasDay', 'gate_linkdlfm']