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

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;

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;

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: {

src/layouts/default/sider/bottomSider2.vue

@@ -39,17 +39,35 @@
               }"
             ></span>
             <span v-if="!isFold" class="btn-text">历史对话</span>
-            <a-list style="width: 110px" :split="false" :data-source="historySessions" class="custom-list">
+            <a-list style="width: 110px" :split="false" :data-source="historySessions" :scroll="200" class="custom-list">
               <template #renderItem="{ item }">
                 <a-list-item
                   :style="{
-                    padding: '5px 0 0 10px',
+                    padding: '8px 10px 0 8px',
                     color: '#5e7081',
-                    fontSize: '12px',
+                    fontSize: '10px',
+                    position: 'relative', // 新增定位
                   }"
                   @click="sessionsHistory(item.id)"
                 >
-                  {{ item.title ? item.title : '新会话' }}
+                  <!-- 新增flex布局容器 -->
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div v-if="editingId !== item.id" class="text-container">
+                      <span class="edit-text">{{ item.title || '新会话' }}</span>
+                      <edit-outlined class="edit-icon" @click="startEditing(item)" />
+                    </div>
+
+                    <!-- 输入框 -->
+                    <a-input
+                      size="small"
+                      v-else
+                      v-model:value="editText"
+                      v-focus
+                      @blur="handleSave(item)"
+                      @keyup.enter="handleSave(item)"
+                      class="edit-input"
+                    />
+                  </div>
                 </a-list-item>
               </template>
             </a-list>
@@ -79,7 +97,6 @@
                   </div>
                 </div>
               </div>
-              <!-- </div> -->
             </div>
             <!-- 文本输入区域 -->
             <div v-if="spinning" class="thinking-area">
@@ -110,6 +127,7 @@
 <script lang="ts" setup>
 import { ref, onMounted, unref, nextTick, computed } from 'vue';
 import { useUserStore } from '/@/store/modules/user';
+import { EditOutlined } from '@ant-design/icons-vue';
 // 响应式变量声明
 const dialogVisible = ref(false);
 const isFold = ref(false); // 是否折叠
@@ -121,6 +139,12 @@ const session_id = ref(''); // 会话id
 const hasCreated = ref(false); // 标志位，防止重复调用create接口
 const hasAdd = ref(false); // 标志位，防止重复调用create接口
 const userStore = useUserStore(); //获取用户信息
+const editingId = ref<number | null>(null);
+const editText = ref('');
+interface ListItem {
+  id: number;
+  title?: string;
+}
 let userId = unref(userStore.getUserInfo).id;
 // const userId = ref(0);
 type MessageItem = {
@@ -133,6 +157,15 @@ const messageList = ref<MessageItem[]>([]);
 const sortedMessages = computed(() => {
   return messageList.value.sort((a, b) => a.timestamp - b.timestamp);
 });
+const vFocus = {
+  mounted: (el: HTMLElement) => el.querySelector('input')?.focus(),
+};
+const scrollToBottom = () => {
+  const dialogArea = document.querySelector('.dialog-area');
+  if (dialogArea) {
+    dialogArea.scrollTop = dialogArea.scrollHeight;
+  }
+};
 
 const openMenu = () => {
   dialogVisible.value = !dialogVisible.value;
@@ -164,6 +197,35 @@ async function addNew() {
   session_id.value = data.id;
   messageList.value = [];
 }
+//编辑标题
+const startEditing = (item: ListItem) => {
+  editingId.value = item.id;
+  editText.value = item.title || '';
+};
+
+// 保存修改
+const handleSave = async (item: ListItem) => {
+  const params = {
+    chat_session_id: item.id,
+    new_title: editText.value,
+  };
+  try {
+    let response = await fetch('http://182.92.126.35:6005/sessions/change_title', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(params),
+    });
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    item.title = editText.value;
+  } catch (error) {
+    console.error('保存失败:', error);
+  }
+  editingId.value = null;
+};
 //获取消息列表
 async function handleSend() {
   if (session_id.value === '') {
@@ -228,54 +290,97 @@ async function sendMessage() {
   }
 }
 //发送消息  流式响应
-async function sendMessage1() {
-  spinning.value = true;
-  // 添加用户消息
+const sendMessage1 = async () => {
+  spinning.value = true; // 开始加载
   messageList.value.push({
     id: `user_${Date.now()}`,
     type: 'user',
     content: inputText.value,
     timestamp: Date.now(),
   });
+
+  // 构造请求参数
   const params = {
-    chat_session_id: session_id.value,
+    chat_session_id: session_id.value, // 替换为实际的会话 ID
     prompt: inputText.value,
     ref_file_ids: [],
     thinking_enabled: false,
   };
   inputText.value = ''; // 清空输入框
-  //将用户输入的内容发送到后端
   try {
-    // 将用户输入的内容发送到后端;
-    let response = await fetch('http://182.92.126.35:6005/chat_stream', {
+    // 发送 POST 请求
+    const response = await fetch('http://182.92.126.35:6005/chat_stream', {
       method: 'POST',
       headers: {
-        'Content-Type': 'text/event-stream; charset=utf-8',
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify(params),
     });
 
+    // 检查响应是否成功
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
-    const data = await response.json();
-    const assistantReply = data.reply.content; // 获取助手回复
-    systemMessage.value = assistantReply;
-    // 添加系统回答
+
+    // 获取可读流
+    const reader = response.body.getReader();
+
+    // 创建一条新的消息对象
+    const newMessage = {
+      id: `response_${Date.now()}`,
+      type: 'response', // 消息类型
+      content: '',
+      timestamp: Date.now(), // 时间戳用来排序
+    };
+
+    // 将新消息添加到消息列表
+    messageList.value.push(newMessage);
+
+    // 读取流式数据
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        console.log('Stream complete');
+        break;
+      }
+
+      // 将流数据转换为字符串
+      const chunk = new TextDecoder().decode(value);
+      console.log('Received chunk:', chunk);
+      const jsonRegex = /{.*?}/g;
+      const matches = chunk.match(jsonRegex);
+      if (matches) {
+        matches.forEach((match) => {
+          try {
+            const data = JSON.parse(match);
+            if (data.type === 'text') {
+              // 找到当前消息对象并更新 content
+              const targetMessage = messageList.value.find((msg) => msg.id === newMessage.id);
+              if (targetMessage) {
+                targetMessage.content += data.content; // 追加内容
+                scrollToBottom();
+              }
+            }
+          } catch (error) {
+            console.error('Failed to parse JSON:', error);
+          }
+        });
+      }
+    }
+  } catch (error) {
+    // 请求失败时设置系统消息
+    systemMessage.value = '服务器异常';
     messageList.value.push({
       id: `system_${Date.now()}`,
       type: 'system',
       content: systemMessage.value,
       timestamp: Date.now(),
     });
-  } catch (error) {
-    // 请求失败时设置系统消息为"服务器异常"
-    systemMessage.value = '服务器异常';
     console.error('请求失败:', error);
   } finally {
-    spinning.value = false; // 无论请求成功与否，都停止加载指示器
+    spinning.value = false; // 停止加载
   }
-}
+};
 //创建标题
 async function createSessionTitle({ session_id, title }) {
   const params = {
@@ -293,11 +398,15 @@ async function createSessionTitle({ session_id, title }) {
 }
 //获取会话历史
 async function sessionsHistoryList() {
-  let response = await fetch(`http://182.92.126.35:6005/sessions/?user_id=${userId}`, {
-    method: 'get',
+  const params = {
+    user_id: userId,
+  };
+  let response = await fetch(`http://182.92.126.35:6005/sessions`, {
+    method: 'post',
     headers: {
       'Content-Type': 'application/json',
     },
+    body: JSON.stringify(params),
   });
   const data = await response.json();
   historySessions.value = data.chat_sessions;
@@ -390,9 +499,6 @@ onMounted(() => {
     border-radius: 4px;
   }
 }
-::v-deep .zxm-list-item {
-  white-space: normal; /* 禁止文本换行 */
-}
 ::v-deep .zxm-list-items {
   color: #1890ff;
 }
@@ -400,6 +506,30 @@ onMounted(() => {
   text-decoration: underline;
   color: #1890ff !important;
 }
+.text-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+.text-ellipsis {
+  flex: 1;
+}
+.edit-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.edit-icon {
+  flex-shrink: 0;
+  cursor: pointer;
+  margin-left: auto;
+}
+.edit-input {
+  font-size: 10px;
+}
 .trigger-button {
   position: fixed;
   bottom: 10px;
@@ -607,7 +737,7 @@ onMounted(() => {
 }
 .loading-wrapper,
 .content-wrapper {
-  min-height: 40px; /* 避免高度塌陷 */
+  min-height: 40px;
 }
 .message-item.user {
   margin-bottom: 50px;

src/views/vent/bundle/bundleMonitorTable/bundle-table.data.ts

@@ -1296,3 +1296,100 @@ export const Cctrkcolumns: BasicColumn[] = [
     align: 'center',
   },
 ];
+export const wlmlcolumns: BasicColumn[] = [
+  {
+    title: '设备号',
+    width: 60,
+    align: 'center',
+    dataIndex: 'xh',
+  },
+  {
+    title: '设备名称',
+    width: 100,
+    align: 'center',
+    dataIndex: 'sbmc',
+    key: 'sbmc',
+  },
+  {
+    title: '管路编号',
+    width: 60,
+    align: 'center',
+    dataIndex: 'glbh',
+    key: 'glbh',
+  },
+  {
+    title: '管路名称',
+    width: 60,
+    align: 'center',
+    dataIndex: 'glmc',
+    key: 'glmc',
+  },
+  {
+    title: '分析次数',
+    dataIndex: 'fxcs',
+    key: 'fxcs',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'O₂(%)',
+    dataIndex: 'o2_ave',
+    key: 'o2_ave',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: 'CO₂(%)',
+    dataIndex: 'co2_ave',
+    key: 'co2_ave',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: 'CO(PPM)',
+    dataIndex: 'co_ave',
+    key: 'co_ave',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: 'CH₄(%)',
+    dataIndex: 'ch4_ave',
+    key: 'ch4_ave',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: 'N₂(%)',
+    dataIndex: 'n2_ave',
+    key: 'n2_ave',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: 'C₂H₂(PPM)',
+    dataIndex: 'c2h2_ave',
+    key: 'c2h2_ave',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: 'C₂H₄(PPM)',
+    dataIndex: 'c2h4_ave',
+    key: 'c2h4_ave',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '煤自燃阶段',
+    dataIndex: 'internalFireWarnLevel',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    align: 'center',
+  },
+];

src/views/vent/bundle/bundleMonitorTable/index.vue

@@ -50,7 +50,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed, shallowRef, reactive, nextTick } from 'vue';
-import { columns, Hjtcolumns, Bdcolumns, Bltcolumns, Sgtcolumns, Yjlcolumns, Cctrkcolumns } from './bundle-table.data';
+import { columns, Hjtcolumns, Bdcolumns, Bltcolumns, Sgtcolumns, Yjlcolumns, Cctrkcolumns, wlmlcolumns } from './bundle-table.data';
 import { getBundleInfoList, getAllFileList, getAllFileListById } from './bundle-table.api';
 import customHeader from '/@/components/vent/customHeader.vue';
 // import { blastDelta } from './modal/blastDelta.vue';
@@ -96,6 +96,8 @@ const computedColumns = computed(() => {
       return Yjlcolumns; // 榆家梁对应的列配置
     case 'sdmtjtcctrk':
       return Cctrkcolumns; // 寸草塔二矿对应的列配置
+    case 'sdmtjtwlmlmk':
+      return wlmlcolumns; // 乌兰木伦对应的列配置
     default:
       return columns; // 默认情况下返回的列配置
   }
@@ -656,6 +658,44 @@ function updateChart(data: any) {
             type: 'bar',
           },
         ];
+      case 'sdmtjtwlmlmk':
+        return [
+          {
+            name: 'O₂平均值',
+            data: o2AveValues,
+            type: 'bar',
+          },
+          {
+            name: 'N₂平均值',
+            data: n2AveValues,
+            type: 'bar',
+          },
+          {
+            name: 'CO平均值',
+            data: coAveValues,
+            type: 'bar',
+          },
+          {
+            name: 'CO₂平均值',
+            data: co2AveValues,
+            type: 'bar',
+          },
+          {
+            name: 'CH₄平均值',
+            data: ch4AveValues,
+            type: 'bar',
+          },
+          {
+            name: 'C₂H₄平均值',
+            data: c2h4AveValues,
+            type: 'bar',
+          },
+          {
+            name: 'C₂H₂平均值',
+            data: c2h2AveValues,
+            type: 'bar',
+          },
+        ];
       default:
         return [
           {

src/views/vent/bundleSpy/bundleSpyTable/bundleSpy-table.data.ts

@@ -907,3 +907,101 @@ export const Cctrkcolumns: BasicColumn[] = [
     align: 'center',
   },
 ];
+export const Wlmlcolumns: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    dataIndex: 'xh',
+    key: 'xh',
+  },
+  {
+    title: '地点名称',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '氧气(%)',
+    dataIndex: 'o2_ave',
+    key: 'o2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'N氮气(%)',
+    dataIndex: 'n2_ave',
+    key: 'n2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '一氧化碳(ppm)',
+    dataIndex: 'co_ave',
+    key: 'co_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '二氧化碳(%)',
+    dataIndex: 'co2_ave',
+    key: 'co2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '甲烷(%)',
+    dataIndex: 'ch4_ave',
+    key: 'ch4_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '乙烷(ppm)',
+    dataIndex: 'c2h6_ave',
+    key: 'c2h6_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '乙烯(ppm)',
+    dataIndex: 'c2h4_ave',
+    key: 'c2h4_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '乙炔(ppm)',
+    dataIndex: 'c2h2_ave',
+    key: 'c2h2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '化验日期',
+    dataIndex: 'qyfxsj',
+    key: 'qyfxsj',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '备注',
+    dataIndex: 'smark',
+    key: 'smark',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '煤自燃阶段',
+    dataIndex: 'internalFireWarnLevel',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    align: 'center',
+  },
+];

src/views/vent/bundleSpy/bundleSpyTable/index.vue

@@ -44,7 +44,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed, reactive, shallowRef } from 'vue';
-import { columns, Hjtcolumns, Bdcolumns, Bltcolumns, Sgtcolumns, Yjlcolumns, Cctrkcolumns } from './bundleSpy-table.data';
+import { columns, Hjtcolumns, Bdcolumns, Bltcolumns, Sgtcolumns, Yjlcolumns, Cctrkcolumns, Wlmlcolumns } from './bundleSpy-table.data';
 import { getbundleSpyInfoList, getAllFileList, getAllFileListById } from './bundleSpy-table.api';
 import customHeader from '/@/components/vent/customHeader.vue';
 import * as echarts from 'echarts';
@@ -88,6 +88,8 @@ const computedColumns = computed(() => {
       return Yjlcolumns; // 榆家梁对应的列配置
     case 'sdmtjtcctrk':
       return Cctrkcolumns; // 寸草塔二矿对应的列配置
+    case 'sdmtjtwlmlmk':
+      return Wlmlcolumns; // 乌兰木伦对应的列配置
     default:
       return columns; // 默认情况下返回的列配置
   }
@@ -363,6 +365,58 @@ function updateChart(data: any) {
             type: 'bar',
           },
         ];
+      case 'sdmtjtwlmlmk':
+        return [
+          {
+            name: 'O₂',
+            data: o2AveValues,
+            yAxisIndex: 0,
+            type: 'bar',
+          },
+          {
+            name: 'N₂',
+            data: n2AveValues,
+            yAxisIndex: 0,
+            type: 'bar',
+          },
+
+          {
+            name: 'CO',
+            data: coAveValues,
+            yAxisIndex: 1,
+            type: 'bar',
+          },
+          {
+            name: 'CO₂',
+            data: co2AveValues,
+            yAxisIndex: 1,
+            type: 'bar',
+          },
+          {
+            name: 'CH₄',
+            data: ch4AveValues,
+            yAxisIndex: 1,
+            type: 'bar',
+          },
+          {
+            name: 'C2H6',
+            data: c2h6AveValues,
+            yAxisIndex: 1,
+            type: 'bar',
+          },
+          {
+            name: 'C₂H₄',
+            data: c2h4AveValues,
+            type: 'bar',
+            yAxisIndex: 1,
+          },
+          {
+            name: 'C₂H₂',
+            data: c2h2AveValues,
+            type: 'bar',
+            yAxisIndex: 1,
+          },
+        ];
       default:
         return [
           {

src/views/vent/dust/dustMonitorTable/dust-table.data.ts

@@ -703,6 +703,64 @@ export const Cctrkcolumns = [
     align: 'center',
   },
 ];
+export const Wlmlcolumns = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    dataIndex: 'xh',
+  },
+  {
+    title: '测定地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+    width: 150,
+    align: 'center',
+  },
+
+  {
+    title: '作业环境(工序)',
+    dataIndex: 'zyhj',
+    key: 'zyhj',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '粉尘浓度(mg/m³)',
+    width: 100,
+    align: 'center',
+    children: [
+      {
+        title: '总尘',
+        dataIndex: 'sc_zcds',
+        key: 'sc_zcds',
+        width: 80,
+        align: 'center',
+      },
+      {
+        title: '呼尘',
+        dataIndex: 'sc_hcds',
+        key: 'sc_hcds',
+        width: 80,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: '测尘员',
+    dataIndex: 'ccy',
+    key: 'ccy',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '备注',
+    dataIndex: 'smark',
+    key: 'smark',
+    width: 80,
+    align: 'center',
+  },
+];
 //监测字段
 export const fieldMapping = {
   sc_zcds: '总尘-作业工序-生产(短时间监测浓度，mg/m³)',
@@ -758,6 +816,10 @@ export const fieldCctrkMapping = {
   zcrxnd: '总尘容许浓度(短时间监测浓度，mg/m³)',
   hcrxnd: '呼尘容许浓度(短时间监测浓度，mg/m³)',
 };
+export const fieldWlmlMapping = {
+  sc_zcds: '总尘(粉尘浓度，mg/m³)',
+  sc_hcds: '呼尘(粉尘浓度，mg/m³)',
+};
 // 检测地点
 export const dataColumns = [
   {
@@ -1045,6 +1107,37 @@ export const dataCctrkColumns = [
     key: 'zyhj',
   },
 ];
+export const dataWlmlColumns = [
+  {
+    title: '监测字段',
+    align: 'center',
+    dataIndex: 'key',
+    key: 'key',
+    width: 100,
+    customRender: ({ text }) => fieldWlmlMapping[text] || text,
+  },
+  {
+    title: '最大值',
+    dataIndex: 'value',
+    align: 'center',
+    width: 100,
+    key: 'value',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '监测地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '作业环境(工序)',
+    dataIndex: 'zyhj',
+    key: 'zyhj',
+  },
+];
 // 当日情况粉尘情况分析
 export const AllDataColumns = [
   {
@@ -1346,3 +1439,34 @@ export const AllDataCctrkColumns = [
     key: 'zyhj',
   },
 ];
+export const AllDataWlmlColumns = [
+  {
+    title: '监测字段',
+    align: 'center',
+    dataIndex: 'key',
+    key: 'key',
+    width: 100,
+    customRender: ({ text }) => fieldWlmlMapping[text] || text,
+  },
+  {
+    title: '最大值',
+    dataIndex: 'value',
+    align: 'center',
+    width: 100,
+    key: 'value',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '监测地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '作业环境(工序)',
+    dataIndex: 'zyhj',
+    key: 'zyhj',
+  },
+];

src/views/vent/dust/dustMonitorTable/index.vue

@@ -71,6 +71,7 @@ import {
   Bltcolumns,
   Sgtcolumns,
   Yjlcolumns,
+  Wlmlcolumns,
   Cctrkcolumns,
   dataColumns,
   dataDltColumns,
@@ -81,6 +82,7 @@ import {
   dataSgtColumns,
   dataYjlColumns,
   dataCctrkColumns,
+  dataWlmlColumns,
   AllDataColumns,
   AllDataDltColumns,
   AllDataSwColumns,
@@ -90,6 +92,7 @@ import {
   AllDataSgtColumns,
   AllDataYjlColumns,
   AllDataCctrkColumns,
+  AllDataWlmlColumns,
 } from './dust-table.data';
 import { getDustInfoList, getAllFileList, getAllFileListById } from './dsut-table.api';
 import customHeader from '/@/components/vent/customHeader.vue';
@@ -140,6 +143,8 @@ const computedColumns = computed(() => {
       return Yjlcolumns; // 榆家梁对应的列配置
     case 'sdmtjtcctrk':
       return Cctrkcolumns; // 寸草塔二矿对应的列配置
+    case 'sdmtjtwlmlmk':
+      return Wlmlcolumns; // 乌兰木伦对应的列配置
     default:
       return columns; // 默认情况下返回的列配置
   }
@@ -164,6 +169,8 @@ const AllDataComputedColumns = computed(() => {
       return AllDataYjlColumns; // 榆家梁对应的列配置
     case 'sdmtjtcctrk':
       return AllDataCctrkColumns; // 寸草塔二矿对应的列配置
+    case 'sdmtjtwlmlmk':
+      return AllDataWlmlColumns; // 乌兰木伦对应的列配置
     default:
       return AllDataColumns; // 默认情况下返回的列配置
   }
@@ -188,6 +195,8 @@ const DataComputedColumns = computed(() => {
       return dataYjlColumns; // 榆家梁对应的列配置
     case 'sdmtjtcctrk':
       return dataCctrkColumns; // 寸草塔二矿对应的列配置
+    case 'sdmtjtwlmlmk':
+      return dataWlmlColumns; // 乌兰木伦对应的列配置
     default:
       return dataColumns; // 默认情况下返回的列配置
   }
@@ -258,7 +267,7 @@ function processTableData(data: any) {
     const SwMaxValues = [
       { key: 'zcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
       { key: 'hcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
-    ];  
+    ];
     const HjtMaxValues = [
       { key: 'sc_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
       { key: 'sc_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
@@ -285,6 +294,10 @@ function processTableData(data: any) {
       { key: 'zcrxnd', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
       { key: 'hcrxnd', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
     ];
+    const WlmlMaxValues = [
+      { key: 'sc_zcds', value: -Infinity, gz: '', jcdd: '', scgy: '' },
+      { key: 'sc_hcds', value: -Infinity, gz: '', jcdd: '', scgy: '' },
+    ];
     items.forEach((item: any) => {
       maxValues.forEach((maxValue) => {
         if (item[maxValue.key] > maxValue.value) {
@@ -357,6 +370,14 @@ function processTableData(data: any) {
           maxValue.gzcs = item.gzcs;
         }
       });
+      WlmlMaxValues.forEach((maxValue) => {
+        if (item[maxValue.key] > maxValue.value) {
+          maxValue.value = item[maxValue.key];
+          maxValue.gz = item.gz;
+          maxValue.jcdd = item.jcdd;
+          maxValue.scgy = item.zyjh;
+        }
+      });
     });
     switch (sysOrgCode) {
       case 'sdmtjtbetmk':
@@ -377,6 +398,8 @@ function processTableData(data: any) {
         return YjlMaxValues; // 榆家梁对应的列配置
       case 'sdmtjtcctrk':
         return CctrkMaxValues; // 寸草塔二矿对应的列配置
+      case 'sdmtjtwlmlmk':
+        return WlmlMaxValues; // 乌兰木伦对应的列配置
       default:
         return maxValues; // 默认情况下返回的列配置
     }
@@ -438,6 +461,10 @@ function processTableData(data: any) {
     { key: 'zcrxnd', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
     { key: 'hcrxnd', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
   ];
+  const overallWlmlMaxValues = [
+    { key: 'sc_zcds', value: -Infinity, gz: '', jcdd: '', scgy: '' },
+    { key: 'sc_hcds', value: -Infinity, gz: '', jcdd: '', scgy: '' },
+  ];
   data.forEach((item: any) => {
     overallMaxValues.forEach((maxValue) => {
       if (item[maxValue.key] > maxValue.value) {
@@ -511,6 +538,14 @@ function processTableData(data: any) {
         maxValue.gzcs = item.gzcs;
       }
     });
+    overallWlmlMaxValues.forEach((maxValue) => {
+      if (item[maxValue.key] > maxValue.value) {
+        maxValue.value = item[maxValue.key];
+        maxValue.gz = item.gz;
+        maxValue.jcdd = item.jcdd;
+        maxValue.scgy = item.zyjh;
+      }
+    });
   });
   AllMaxValues = computed(() => {
     switch (sysOrgCode) {
@@ -532,6 +567,8 @@ function processTableData(data: any) {
         return overallYjlMaxValues; // 榆家梁对应的列配置
       case 'sdmtjtcctrk':
         return overallCctrkMaxValues; // 寸草塔二矿对应的列配置
+      case 'sdmtjtwlmlmk':
+        return overallWlmlMaxValues; // 乌兰木伦对应的列配置
       default:
         return overallMaxValues; // 默认情况下返回的列配置
     }

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;
 

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;

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]) {

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;
       }
     }
   }

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>

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']

src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHomeCC.vue

@@ -135,8 +135,8 @@
                         v-else
                         :class="{
                           'signal-round': true,
-                          'signal-round-run': selectData[selectData[valveKey + state.code]] == '1',
-                          'signal-round-gry': selectData[selectData[valveKey + state.code]] != '1',
+                          'signal-round-run': selectData[valveKey + state.code] == '1',
+                          'signal-round-gry': selectData[valveKey + state.code] != '1',
                         }"
                       ></span>
                     </div>
@@ -197,7 +197,7 @@
 <script setup lang="ts">
   import { ref, onMounted, onUnmounted, reactive, defineProps, watch, inject, nextTick, onBeforeUnmount } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import { setModelType } from '../gasPump.threejs';
+  import { setModelType, playAnimate } from '../gasPump.threejs';
   import { getMonitorData, devicePropertyType, getModelMonitorTags } from '../gasPump.data';
   // import { leftMonitor, rightMonitor, modelMonitor, detailCtrl } from '../gasPump.dataCc2_2';
   import { list } from '../gasPump.api';
@@ -252,6 +252,7 @@
             if (props.deviceId) {
               const data = await getDataSource(props.deviceId);
               selectData.value = data;
+              playAnimate(data);
             }
             if (timer) {
               timer = null;
@@ -268,235 +269,6 @@
 
   async function getDataSource(systemID) {
     const res = await list({ devicetype: props.deviceType, ids: systemID });
-    // const res = {
-    //   cmd: 'monitordata',
-    //   msgTxt: [
-    //     {
-    //       datalist: [
-    //         {
-    //           msgType: null,
-    //           deviceID: '1773155914577469442',
-    //           strname: '22煤瓦斯泵站',
-    //           strinstallpos: '22煤瓦斯泵站',
-    //           fsectarea: 'null',
-    //           stationname: '22煤瓦斯泵站',
-    //           stationtype: 'redis',
-    //           deviceType: 'pump_under',
-    //           typeName: '地下瓦斯泵站',
-    //           netStatus: 1,
-    //           warnFlag: 0,
-    //           warnLevel: 0,
-    //           warnLevel_str: '正常',
-    //           syswarnLevel: null,
-    //           syswarnLevel_str: null,
-    //           syswarnLevel_des: null,
-    //           warnTime: null,
-    //           readTime: '2025-03-03 15:09:59',
-    //           warnDes: '',
-    //           frontGateOpenCtrl: null,
-    //           rearGateOpenCtrl: null,
-    //           readData: {
-    //             FeedSG101_Ib: '0',
-    //             Starter4_CloseAllow: '0',
-    //             FeedSG101_Ic: '0',
-    //             TemperatureSensor_TemperatureLowAlarm: '0',
-    //             SubmarinePump_MOT_AvgVoltage: '0',
-    //             VSL_LiquidLevelSensor_Level: '0',
-    //             GVL_CloseLimit: '0',
-    //             FeedSG102_Uca: '1242',
-    //             FeedSG102_CBStatus: '1',
-    //             Starter1_SwitchOffOutput: '0',
-    //             FeedSG101_Ia: '0',
-    //             CentrifugalPump2_GVL1_CloseLimit: '1',
-    //             Starter2_RunTimerOpen: '0',
-    //             Starter5_Uab: '0',
-    //             CentrifugalPump1_MOT_PhaseBTemp: '16',
-    //             CentrifugalPump2_GVL1_OpenFail: '0',
-    //             CentrifugalPump1_GVL1_CloseFail: '0',
-    //             CentrifugalPump2_GVL2_OnOutput: '0',
-    //             SubmarinePump2_MOT_Power: '0',
-    //             CentrifugalPump1_MOT_Ic: '0',
-    //             SubmarinePump2_MOT_AvgVoltage: '1121',
-    //             CentrifugalPump2_PU_InterlockReady: '1',
-    //             CentrifugalPump1_MOT_Ib: '0',
-    //             T101_HighVoltSwitch_Temp: '0',
-    //             CentrifugalPump2_PU_Healthy: '1',
-    //             CentrifugalPump1_PU_InterlockStarting: '0',
-    //             SubmarinePump2_PU_Healthy: '1',
-    //             CentrifugalPump1_PU_InterlockStoping: '0',
-    //             SubmarinePump2_MOT_OpenFail: '0',
-    //             CentrifugalPump2_GVL2_CloseFail: '0',
-    //             T101_LowVoltSwith_Current: '0',
-    //             CentrifugalPump2_GVL2_CtrlMode: '0',
-    //             Starter2_RunTimerClose: '0',
-    //             CentrifugalPump1_MOT_OpenFail: '0',
-    //             CentrifugalPump2_MOT_OpenFail: '0',
-    //             Starter2_SwitchOnOutput: '0',
-    //             SubmarinePump1_PU_Healthy: '1',
-    //             CentrifugalPump2_GVL2_CloseLimit: '1',
-    //             CentrifugalPump2_MOT_BackAxleOverTempAlarm: '1',
-    //             GVL_CloseFail: '0',
-    //             CentrifugalPump2_MOT_PhaseBTempAlarm: '0',
-    //             CentrifugalPump2_MOT_PhaseBTemp: '16',
-    //             CentrifugalPump2_GVL1_CloseFail: '0',
-    //             T102_CBStatus: '1',
-    //             SubmarinePump_MOT_OpenFail: '0',
-    //             FeedSG101_CBStatus: '0',
-    //             CentrifugalPump1_MOT_PhaseBTempAlarm: '0',
-    //             FanPre: '-5.0',
-    //             CentrifugalPump2_GVL2_OffOutput: '0',
-    //             Starter5_PLCState: '1',
-    //             CentrifugalPump1_GVL1_CloseLimit: '1',
-    //             FeedSG102_Healthy: '1',
-    //             PumpStopAlarm1: '1',
-    //             FeedSG101_ControlState: '0',
-    //             SubmarinePump_MOT_Power: '0',
-    //             Starter5_CloseAllow: '0',
-    //             CentrifugalPump2_GVL2_CloseReady: '1',
-    //             Starter2_SwitchOnNoReturn: '0',
-    //             CentrifugalPump2_PU_InterlockStoping: '0',
-    //             Starter5_SwitchOnNoReturn: '0',
-    //             T102_HighVoltSwitch_Temp: '49',
-    //             CentrifugalPump1_GVL1_OnOutput: '0',
-    //             Starter1_RunTimerClose: '0',
-    //             GVL_OpenLimit: '0',
-    //             CentrifugalPump1_MOT_BackAxleTemp: '870',
-    //             GVL_OpenFail: '1',
-    //             Starter1_CBStatus: '0',
-    //             CentrifugalPump1_GVL1_OpenLimit: '0',
-    //             CentrifugalPump2_GVL1_CtrlMode: '0',
-    //             CentrifugalPump1_GVL1_OffOutput: '0',
-    //             CentrifugalPump1_MOT_FrontAxleTemp: '870',
-    //             CentrifugalPump2_PU_InterlockStop: '0',
-    //             Starter4_SwitchOffOutput: '0',
-    //             CentrifugalPump2_GVL1_OnOutput: '0',
-    //             CentrifugalPump2_GVL2_OpenFail: '0',
-    //             CentrifugalPump2_PU_HMIStart: '0',
-    //             CentrifugalPump1_MOT_BackAxleOverTempAlarm: '1',
-    //             CentrifugalPump2_GVL2_OpenLimit: '0',
-    //             CentrifugalPump1_PU_InterlockStartFail: '0',
-    //             CentrifugalPump2_GVL2_Healthy: '0',
-    //             SubmarinePump2_MOT_Ic: '0',
-    //             SubmarinePump2_MOT_Ib: '0',
-    //             SubmarinePump2_MOT_Ia: '0',
-    //             Starter3_PLCState: '1',
-    //             CentrifugalPump1_GVL2_OffOutput: '0',
-    //             CentrifugalPump1_PU_Healthy: '0',
-    //             Starter4_SwitchOnOutput: '0',
-    //             FeedSG101_Uca: '0',
-    //             sign: '0',
-    //             T102_HighVoltSwitch_Current: '0',
-    //             CentrifugalPump1_MOT_PhaseATempAlarm: '2',
-    //             CentrifugalPump1_MOT_PhaseATemp: '16',
-    //             CentrifugalPump2_PU_InterlockStart: '0',
-    //             CentrifugalPump2_MOT_FrontAxleTemp: '870',
-    //             GVL_OnOutput: '1',
-    //             Starter3_CBStatus: '0',
-    //             CentrifugalPump1_GVL2_CtrlMode: '0',
-    //             SubmarinePump3_PU_Healthy: '1',
-    //             FeedSG102_ControlState: '1',
-    //             FeedSG101_Healthy: '0',
-    //             VSL_LiquidLevelSensor_HighWaterAlarm: '0',
-    //             CentrifugalPump1_GVL2_OpenFail: '0',
-    //             Starter5_OpenFail: '0',
-    //             Reset: '0',
-    //             GVL_OffOutput: '0',
-    //             Starter2_SwitchOffOutput: '0',
-    //             Starter5_SwitchOffOutput: '0',
-    //             CentrifugalPump1_GVL2_OnOutput: '0',
-    //             FeedSG102_Ic: '0',
-    //             Starter1_PLCState: '1',
-    //             CentrifugalPump1_GVL1_Healthy: '0',
-    //             CentrifugalPump2_MOT_PhaseATempAlarm: '2',
-    //             CentrifugalPump1_MOT_Power: '0',
-    //             CentrifugalPump1_MOT_FrontAxleOverTempAlarm: '1',
-    //             Starter1_SwitchOnOutput: '0',
-    //             CentrifugalPump1_MOT_PhaseCTemp: '16',
-    //             Starter4_CBStatus: '0',
-    //             CentrifugalPump2_GVL1_Healthy: '0',
-    //             T101_LowVoltSwith_SysVoltage: '0',
-    //             CentrifugalPump2_GVL1_OpenLimit: '0',
-    //             FeedSG102_Ia: '0',
-    //             TemperatureSensor_Temp: '8700',
-    //             FeedSG102_Ib: '0',
-    //             FeedSG101_CloseReady: '0',
-    //             Starter3_CloseAllow: '0',
-    //             CentrifugalPump1_GVL1_CtrlMode: '0',
-    //             CentrifugalPump1_MOT_AvgVoltage: '0',
-    //             GVL_CtrlMode: '0',
-    //             CentrifugalPump1_GVL2_CloseLimit: '1',
-    //             SubmarinePump_MOT_Ic: '0',
-    //             CentrifugalPump1_GVL2_CloseFail: '0',
-    //             CentrifugalPump1_GVL2_OpenLimit: '0',
-    //             SubmarinePump_MOT_Ib: '0',
-    //             FeedSG102_CloseReady: '1',
-    //             SubmarinePump_MOT_Ia: '0',
-    //             CentrifugalPump2_PU_InterlockStartFail: '0',
-    //             Starter3_SwitchOffOutput: '0',
-    //             T102_LowVoltSwith_Current: '0',
-    //             CentrifugalPump1_PU_InterlockReady: '0',
-    //             CentrifugalPump2_MOT_AvgVoltage: '1141',
-    //             CentrifugalPump1_GVL1_CloseReady: '0',
-    //             TemperatureSensor_TemperatureHighAlarm: '1',
-    //             Starter2_CBStatus: '0',
-    //             Starter2_PLCState: '1',
-    //             Starter3_SwitchOnOutput: '0',
-    //             Starter1_RunTimerOpen: '0',
-    //             CentrifugalPump2_PU_InterlockStarting: '0',
-    //             CentrifugalPump2_MOT_PhaseCTemp: '16',
-    //             Starter5_Ia: '0',
-    //             CentrifugalPump2_MOT_Ia: '0',
-    //             CentrifugalPump2_MOT_Ib: '0',
-    //             T102_LowVoltSwith_SysVoltage: '1135',
-    //             Starter5_Ic: '0',
-    //             CentrifugalPump1_MOT_Ia: '0',
-    //             Starter5_Ib: '0',
-    //             Starter5_CBStatus: '0',
-    //             T102_HighVoltSwitch_SysVoltage: '9978',
-    //             CentrifugalPump1_MOT_PhaseCTempAlarm: '0',
-    //             T101_CBStatus: '0',
-    //             Starter1_SwitchOnNoReturn: '0',
-    //             CentrifugalPump2_MOT_Ic: '0',
-    //             GVL_Healthy: '1',
-    //             VSL_LiquidLevelSensor_LowWaterAlarm: '1',
-    //             Starter4_PLCState: '1',
-    //             T101_HighVoltSwitch_Current: '0',
-    //             CentrifugalPump2_MOT_BackAxleTemp: '882',
-    //             CentrifugalPump2_GVL1_OffOutput: '0',
-    //             Starter5_SwitchOnOutput: '0',
-    //             CentrifugalPump2_MOT_FrontAxleOverTempAlarm: '1',
-    //             CentrifugalPump2_PU_HMIStop: '0',
-    //             isRun: '-2',
-    //             CentrifugalPump2_MOT_PhaseATemp: '16',
-    //             CentrifugalPump1_GVL2_Healthy: '0',
-    //             CentrifugalPump1_GVL1_OpenFail: '0',
-    //             T101_HighVoltSwitch_SysVoltage: '0',
-    //           },
-    //           readDataDes: null,
-    //           summaryHour: [],
-    //           summaryDay: [],
-    //           history: [],
-    //           dayhistory: [],
-    //           totalInfo: null,
-    //           sign: null,
-    //           cameras: [],
-    //           links: [],
-    //           avgParam: {},
-    //           other1: null,
-    //           other2: null,
-    //           other3: null,
-    //           remarkInfo: null,
-    //           linkInfo: null,
-    //           addrIndex: null,
-    //           warnLogNotOkCount: 0,
-    //           otherInfo: null,
-    //           orderNum: 0,
-    //         },
-    //       ],
-    //       type: 'pump_under',
-    //     },
-    //   ],
-    // };
     const result = res.msgTxt[0]['datalist'][0];
     Object.assign(result, result['readData']);
     return result;

src/views/vent/monitorManager/gasPumpMonitor/gasPump.data.ts

@@ -295,152 +295,223 @@ export const modelMonitor = [
 
 export const getModelMonitorTags = () => {
   const { sysOrgCode } = useGlobSetting();
-  // const sysOrgCode = 'sdmtjtcctrk';
-  if (sysOrgCode !== 'sdmtjtcctrk') {
-    return [
-      {
-        domId: 'jsf1',
-        title: '进水阀1#',
-        code: 'CentrifugalPump1_WaterInValve1_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-5.26, 0.28, 0.6],
-      },
-      {
-        domId: 'jsf2',
-        title: '进水阀2#',
-        code: 'CentrifugalPump2_WaterInValve1_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-8.75, 0.3, 0.6],
-      },
-      {
-        domId: 'csf1',
-        title: '出水阀1#',
-        code: 'CentrifugalPump1_WaterOutValve2_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-5.74, 0.35, 0.27],
-      },
-      {
-        domId: 'csf2',
-        title: '出水阀2#',
-        code: 'CentrifugalPump2_WaterOutValve2_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-9.42, 0.35, 0.3],
-      },
-      {
-        domId: 'jqf1',
-        title: '进气阀1#',
-        code: 'CentrifugalPump1_AirInValve1_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-4.41, 1.28, 0.03],
-      },
-      {
-        domId: 'jqf2',
-        title: '进气阀2#',
-        code: 'CentrifugalPump2_AirInValve1_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-7.7, 1.31, -0.14],
-      },
-      {
-        domId: 'cqf1',
-        title: '出气阀1#',
-        code: 'CentrifugalPump1_AirOutValve2_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-6.2, 1.55, 0.06],
-      },
-      {
-        domId: 'cqf2',
-        title: '出气阀2#',
-        code: 'CentrifugalPump2_AirOutValve2_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-9.58, 1.55, -0.13],
-      },
-    ];
-  } else {
-    return [
-      {
-        domId: 'jsf1',
-        title: '进水阀1#',
-        code: 'CentrifugalPump1_WaterInValve1_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-5.26, 0.28, 0.6],
-      },
-      {
-        domId: 'jsf2',
-        title: '进水阀2#',
-        code: 'CentrifugalPump2_WaterInValve1_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-8.75, 0.3, 0.6],
-      },
-      {
-        domId: 'csf1',
-        title: '出水阀1#',
-        code: 'CentrifugalPump1_WaterOutValve2_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-5.74, 0.35, 0.27],
-      },
-      {
-        domId: 'csf2',
-        title: '出水阀2#',
-        code: 'CentrifugalPump2_WaterOutValve2_OpenLimit',
-        type: 'sign',
-        // value: '0',
-        position: [-9.42, 0.35, 0.3],
-      },
-      {
-        domId: 'jqf1',
-        title: '进气阀1#开度',
-        code: 'CentrifugalPump1_AirInValve1_OpenLimit',
-        type: 'value',
-        // value: '0',
-        position: [-4.41, 1.28, 0.03],
-      },
-      {
-        domId: 'jqf2',
-        title: '进气阀2#开度',
-        code: 'CentrifugalPump2_AirInValve1_OpenLimit',
-        type: 'value',
-        // value: '0',
-        position: [-7.7, 1.31, -0.14],
-      },
-      {
-        domId: 'cqf1',
-        title: '出气阀1#开度',
-        code: 'CentrifugalPump1_AirOutValve2_OpenLimit',
-        type: 'value',
-        // value: '0',
-        position: [-6.2, 1.55, 0.06],
-      },
-      {
-        domId: 'cqf2',
-        title: '出气阀2#开度',
-        code: 'CentrifugalPump2_AirOutValve2_OpenLimit',
-        type: 'value',
-        // value: '0',
-        position: [-9.58, 1.55, -0.13],
-      },
-    ];
+  // const sysOrgCode = 'sdmtjtcctmk';
+  switch (sysOrgCode) {
+    case 'sdmtjtcctmk': // 寸草塔1
+      return [
+        {
+          domId: 'jsf1',
+          title: '进水阀1#',
+          code: 'DRS13_GVL1_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-5.26, 0.28, 0.6],
+        },
+        {
+          domId: 'jsf2',
+          title: '进水阀2#',
+          code: 'DRS13_GVL2_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-8.75, 0.3, 0.6],
+        },
+        {
+          domId: 'csf1',
+          title: '出水阀1#',
+          code: 'DRS13_GVL1_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-5.74, 0.35, 0.27],
+        },
+        {
+          domId: 'csf2',
+          title: '出水阀2#',
+          code: 'DRS13_GVL2_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-9.42, 0.35, 0.3],
+        },
+        {
+          domId: 'jqf1',
+          title: '进气阀1#开度',
+          code: 'DRS13_GVL4_OpenLimit',
+          type: 'value',
+          // value: '0',
+          position: [-4.41, 1.28, 0.03],
+        },
+        {
+          domId: 'jqf2',
+          title: '进气阀2#开度',
+          code: 'DRS13_GVL6_OpenLimit',
+          type: 'value',
+          // value: '0',
+          position: [-7.7, 1.31, -0.14],
+        },
+        {
+          domId: 'cqf1',
+          title: '出气阀1#开度',
+          code: 'DRS13_GVL43_OpenLimit',
+          type: 'value',
+          // value: '0',
+          position: [-6.2, 1.55, 0.06],
+        },
+        {
+          domId: 'cqf2',
+          title: '出气阀2#开度',
+          code: 'DRS13_GVL5_OpenLimit',
+          type: 'value',
+          // value: '0',
+          position: [-9.58, 1.55, -0.13],
+        },
+      ];
+    case 'sdmtjtcctrk': // 布尔台
+      return [
+        {
+          domId: 'jsf1',
+          title: '进水阀1#',
+          code: 'CentrifugalPump1_WaterInValve1_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-5.26, 0.28, 0.6],
+        },
+        {
+          domId: 'jsf2',
+          title: '进水阀2#',
+          code: 'CentrifugalPump2_WaterInValve1_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-8.75, 0.3, 0.6],
+        },
+        {
+          domId: 'csf1',
+          title: '出水阀1#',
+          code: 'CentrifugalPump1_WaterOutValve2_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-5.74, 0.35, 0.27],
+        },
+        {
+          domId: 'csf2',
+          title: '出水阀2#',
+          code: 'CentrifugalPump2_WaterOutValve2_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-9.42, 0.35, 0.3],
+        },
+        {
+          domId: 'jqf1',
+          title: '进气阀1#开度',
+          code: 'CentrifugalPump1_AirInValve1_OpenLimit',
+          type: 'value',
+          // value: '0',
+          position: [-4.41, 1.28, 0.03],
+        },
+        {
+          domId: 'jqf2',
+          title: '进气阀2#开度',
+          code: 'CentrifugalPump2_AirInValve1_OpenLimit',
+          type: 'value',
+          // value: '0',
+          position: [-7.7, 1.31, -0.14],
+        },
+        {
+          domId: 'cqf1',
+          title: '出气阀1#开度',
+          code: 'CentrifugalPump1_AirOutValve2_OpenLimit',
+          type: 'value',
+          // value: '0',
+          position: [-6.2, 1.55, 0.06],
+        },
+        {
+          domId: 'cqf2',
+          title: '出气阀2#开度',
+          code: 'CentrifugalPump2_AirOutValve2_OpenLimit',
+          type: 'value',
+          // value: '0',
+          position: [-9.58, 1.55, -0.13],
+        },
+      ];
+    default:
+      return [
+        {
+          domId: 'jsf1',
+          title: '进水阀1#',
+          code: 'CentrifugalPump1_WaterInValve1_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-5.26, 0.28, 0.6],
+        },
+        {
+          domId: 'jsf2',
+          title: '进水阀2#',
+          code: 'CentrifugalPump2_WaterInValve1_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-8.75, 0.3, 0.6],
+        },
+        {
+          domId: 'csf1',
+          title: '出水阀1#',
+          code: 'CentrifugalPump1_WaterOutValve2_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-5.74, 0.35, 0.27],
+        },
+        {
+          domId: 'csf2',
+          title: '出水阀2#',
+          code: 'CentrifugalPump2_WaterOutValve2_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-9.42, 0.35, 0.3],
+        },
+        {
+          domId: 'jqf1',
+          title: '进气阀1#',
+          code: 'CentrifugalPump1_AirInValve1_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-4.41, 1.28, 0.03],
+        },
+        {
+          domId: 'jqf2',
+          title: '进气阀2#',
+          code: 'CentrifugalPump2_AirInValve1_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-7.7, 1.31, -0.14],
+        },
+        {
+          domId: 'cqf1',
+          title: '出气阀1#',
+          code: 'CentrifugalPump1_AirOutValve2_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-6.2, 1.55, 0.06],
+        },
+        {
+          domId: 'cqf2',
+          title: '出气阀2#',
+          code: 'CentrifugalPump2_AirOutValve2_OpenLimit',
+          type: 'sign',
+          // value: '0',
+          position: [-9.58, 1.55, -0.13],
+        },
+      ];
   }
 };
 
 export function getComponent() {
   const { sysOrgCode } = useGlobSetting();
-  // const sysOrgCode = 'sdmtjtcctrk';
+  // const sysOrgCode = 'sdmtjtcctmk';
   let gasPumpHome;
   switch (sysOrgCode) {
     case 'sdmtjtbetmk': // 布尔台
       gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHome.vue'));
       return gasPumpHome;
+    case 'sdmtjtcctmk': // 寸草塔1
+      gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeCC.vue'));
+      return gasPumpHome;
     case 'sdmtjtcctrk': // 布尔台
       gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeCC.vue'));
       return gasPumpHome;
@@ -451,8 +522,8 @@ export function getComponent() {
 }
 
 export async function getMonitorData(deviceType) {
-  const { sysOrgCode } = useGlobSetting();
-  // const sysOrgCode = 'sdmtjtcctrk';
+  // const { sysOrgCode } = useGlobSetting();
+  const sysOrgCode = 'sdmtjtcctmk';
   switch (sysOrgCode) {
     case 'sdmtjtcctmk':
       return await import('./gasPump.dataCc');

src/views/vent/monitorManager/gasPumpMonitor/gasPump.dataCc.ts

@@ -151,17 +151,17 @@ export const rightMonitor = [
     children: [
       {
         title: '注水阀',
-        key: ['PD13_SG1', 'PD13_SG2'],
+        key: ['DRS13_GVL1', 'DRS13_GVL2'],
         childTitle: ['1#注水阀', '2#注水阀'],
       },
       {
         title: '抽气阀',
-        key: ['PD13_SG4', 'PD13_SG6'],
+        key: ['DRS13_GVL4', 'DRS13_GVL6'],
         childTitle: ['1#抽气阀', '2#抽气阀'],
       },
       {
         title: '排气阀',
-        key: ['PD13_SG3', 'PD13_SG5'],
+        key: ['DRS13_GVL3', 'DRS13_GVL5'],
         childTitle: ['1#排气阀', '2#排气阀'],
       },
     ],
@@ -169,12 +169,12 @@ export const rightMonitor = [
       {
         title: '开启',
         type: '',
-        code: '_HMIOpen',
+        code: '_OpenLimit',
       },
       {
         title: '停止',
         type: '',
-        code: '_HMIStop',
+        code: '_CloseLimit',
       },
       {
         title: '健康',
@@ -189,50 +189,50 @@ export const rightMonitor = [
       },
     ],
   },
-  {
-    type: 'list',
-    title: '瓦斯泵回路监测',
-    stateHeader: [],
-    children: [
-      {
-        title: '',
-        childTitle: ['1回路', '2回路', '3回路', '4回路'],
-        key: ['PD13_SG1_Loop1', 'PD13_SG1_Loop2', 'PD13_SG1_Loop3', 'PD13_SG1_Loop4'],
-        list: [
-          {
-            title: '运行状态',
-            code: '_Status',
-            type: 'sign',
-          },
-          {
-            title: '回路电压(V)',
-            code: '_SysVoltage',
-            type: '',
-          },
-          {
-            title: '额定电流(A)',
-            code: '_RatedCurrent',
-            type: '',
-          },
-          {
-            title: 'A相电流(A)',
-            code: '_Ia',
-            type: '',
-          },
-          {
-            title: 'B相电流(A)',
-            code: '_Ib',
-            type: '',
-          },
-          {
-            title: 'C相电流(A)',
-            code: '_Ic',
-            type: '',
-          },
-        ],
-      },
-    ],
-  },
+  // {
+  //   type: 'list',
+  //   title: '瓦斯泵回路监测',
+  //   stateHeader: [],
+  //   children: [
+  //     {
+  //       title: '',
+  //       childTitle: ['1回路', '2回路', '3回路', '4回路'],
+  //       key: ['PD13_SG1_Loop1', 'PD13_SG1_Loop2', 'PD13_SG1_Loop3', 'PD13_SG1_Loop4'],
+  //       list: [
+  //         {
+  //           title: '运行状态',
+  //           code: '_Status',
+  //           type: 'sign',
+  //         },
+  //         {
+  //           title: '回路电压(V)',
+  //           code: '_SysVoltage',
+  //           type: '',
+  //         },
+  //         {
+  //           title: '额定电流(A)',
+  //           code: '_RatedCurrent',
+  //           type: '',
+  //         },
+  //         {
+  //           title: 'A相电流(A)',
+  //           code: '_Ia',
+  //           type: '',
+  //         },
+  //         {
+  //           title: 'B相电流(A)',
+  //           code: '_Ib',
+  //           type: '',
+  //         },
+  //         {
+  //           title: 'C相电流(A)',
+  //           code: '_Ic',
+  //           type: '',
+  //         },
+  //       ],
+  //     },
+  //   ],
+  // },
 ];
 
 export const detailCtrl = [
@@ -282,11 +282,11 @@ export const detailCtrl = [
   {
     title: '泵站控制',
     type: [
-      {
-        title: '瓦斯泵',
-        childTitle: ['1#瓦斯泵', '2#瓦斯泵'],
-        key: ['PD13_Starter201', 'PD13_Starter202'],
-      },
+      // {
+      //   title: '瓦斯泵',
+      //   childTitle: ['1#瓦斯泵', '2#瓦斯泵'],
+      //   key: ['PD13_Starter201', 'PD13_Starter202'],
+      // },
       {
         title: '排水泵',
         childTitle: ['1#排水泵', '2#排水泵'],
@@ -319,17 +319,17 @@ export const detailCtrl = [
       {
         title: '注水阀',
         childTitle: ['1#注水阀', '2#注水阀'],
-        key: ['PD13_SG1', 'PD13_SG2'],
+        key: ['DRS13_GVL1', 'DRS13_GVL2'],
       },
       {
         title: '抽气阀',
         childTitle: ['1#抽气阀', '2#抽气阀'],
-        key: ['PD13_SG4', 'PD13_SG6'],
+        key: ['DRS13_GVL4', 'DRS13_GVL6'],
       },
       {
         title: '排气阀',
         childTitle: ['1#排气阀', '2#排气阀'],
-        key: ['PD13_SG3', 'PD13_SG5'],
+        key: ['DRS13_GVL3', 'DRS13_GVL5'],
       },
     ],
     items: [
@@ -349,4 +349,47 @@ export const detailCtrl = [
   },
 ];
 
-export const modelMonitor = [];
+export const modelMonitor = [
+  {
+    title: '泵站输入管道内工混流量(m³/min)',
+    code: 'mixedTraffic',
+  },
+  {
+    title: '泵站内瓦斯(%CH₄)',
+    code: 'gas2',
+  },
+  {
+    title: '泵站输入管道内标况流量(m³/min)',
+    code: 'standardTraffic',
+  },
+  {
+    title: '泵站输入管道内瓦斯（%CH₄)',
+    code: 'gas3',
+  },
+  {
+    title: '泵站输入管道内工混累计(m³)',
+    code: 'totalGasDrainage',
+  },
+
+  {
+    title: '泵站管道输出瓦斯(%CH₄)',
+    code: 'gas4',
+  },
+  {
+    title: '泵站输入管道内一氧化碳(ppm)',
+    code: 'coVal',
+  },
+
+  {
+    title: '泵站管路出口30米处瓦斯(%CH₄)',
+    code: 'gas1',
+  },
+  {
+    title: '泵站内温度(℃)',
+    code: 'temp',
+  },
+  {
+    title: '泵站输入管道内温度(℃)',
+    code: 'pipeTemp',
+  },
+];

src/views/vent/monitorManager/gasPumpMonitor/gasPump.threejs.under.ts

@@ -92,7 +92,7 @@ class gasPumpUnder {
   };
 
   /** 根据各个泵的状态控制动画 */
-  handleAnimation(monitorData: any) {
+  handleAnimation(monitorData?: any) {
     if (!monitorData) return;
 
     this.airInA?.hideElement();
@@ -112,8 +112,8 @@ class gasPumpUnder {
     this.waterOutR?.hideElement();
     this.waterOutL?.hideElement();
     // 进气动画控制
-    const jqf1Open = this.modelMonitorTags.find((e) => e.domId === 'jqf1' && monitorData[e.code] > 0);
-    const jqf2Open = this.modelMonitorTags.find((e) => e.domId === 'jqf2' && monitorData[e.code] > 0);
+    const jqf1Open = this.modelMonitorTags.find((e) => e.domId === 'jqf1' && parseInt(monitorData[e.code]) > 0);
+    const jqf2Open = this.modelMonitorTags.find((e) => e.domId === 'jqf2' && parseInt(monitorData[e.code]) > 0);
 
     if (jqf1Open && jqf2Open) {
       this.airInB?.showElement();
@@ -128,8 +128,8 @@ class gasPumpUnder {
     }
 
     // 出气动画控制
-    const cqf1Open = this.modelMonitorTags.find((e) => e.domId === 'cqf1' && monitorData[e.code] > 0);
-    const cqf2Open = this.modelMonitorTags.find((e) => e.domId === 'cqf2' && monitorData[e.code] > 0);
+    const cqf1Open = this.modelMonitorTags.find((e) => e.domId === 'cqf1' && parseInt(monitorData[e.code]) > 0);
+    const cqf2Open = this.modelMonitorTags.find((e) => e.domId === 'cqf2' && parseInt(monitorData[e.code]) > 0);
 
     if (cqf1Open && cqf2Open) {
       this.airOutB?.showElement();
@@ -144,8 +144,8 @@ class gasPumpUnder {
     }
 
     // 进水动画控制
-    const jsf1Open = this.modelMonitorTags.find((e) => e.domId === 'jsf1' && monitorData[e.code] == 1);
-    const jsf2Open = this.modelMonitorTags.find((e) => e.domId === 'jsf2' && monitorData[e.code] == 1);
+    const jsf1Open = this.modelMonitorTags.find((e) => e.domId === 'jsf1' && parseInt(monitorData[e.code]) == 1);
+    const jsf2Open = this.modelMonitorTags.find((e) => e.domId === 'jsf2' && parseInt(monitorData[e.code]) == 1);
 
     if (jsf1Open && jsf2Open) {
       this.waterInB?.showElement();
@@ -160,8 +160,8 @@ class gasPumpUnder {
     }
 
     // 出水动画控制
-    const csf1Open = this.modelMonitorTags.find((e) => e.domId === 'csf1' && monitorData[e.code] == 1);
-    const csf2Open = this.modelMonitorTags.find((e) => e.domId === 'csf2' && monitorData[e.code] == 1);
+    const csf1Open = this.modelMonitorTags.find((e) => e.domId === 'csf1' && parseInt(monitorData[e.code]) == 1);
+    const csf2Open = this.modelMonitorTags.find((e) => e.domId === 'csf2' && parseInt(monitorData[e.code]) == 1);
 
     if (csf1Open && csf2Open) {
       this.waterOutB?.showElement();