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

src/views/vent/deviceManager/configurationTable/types.ts

@@ -54,6 +54,8 @@ export interface ModuleData {
       show: boolean;
       /** 展示的内容，formatter 格式 */
       value: string;
+      /** 翻译依据，formatter 格式 */
+      trans?: Record<string, string>;
     };
     /** 右侧插槽的配置 */
     slot: {
@@ -148,7 +150,7 @@ export interface ModuleDataBoard extends ReadFrom {
 
 export interface ModuleDataList extends ReadFrom {
   /** 列表预设的背景类型 */
-  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J';
+  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */
@@ -282,13 +284,15 @@ export interface ModuleDataPreset extends ReadFrom {
 
 export interface ModuleDataComplexList extends ReadFrom {
   /** 列表预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */
   items: {
     /** 列表项标题，formatter 格式 */
     title: string;
+    /** 翻译依据，formatter 格式 */
+    trans?: Record<string, string>;
     contents: Array<
       {
         /** 列表项指定颜色，根据类型不同会有各自的样式 */

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

@@ -96,284 +96,284 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue';
-import {
-  CommonItem,
-  Config,
-  // ModuleDataBoard,
-  // ModuleDataChart,
-  // ModuleDataList,
-  // ModuleDataPreset,
-  // ModuleDataTable,
-} from '../../../deviceManager/configurationTable/types';
-import MiniBoard from './detail/MiniBoard.vue';
-import TimelineList from './detail/TimelineList.vue';
-import TimelineListNew from './detail/TimelineListNew.vue';
-import CustomList from './detail/CustomList.vue';
-import CustomGallery from './detail/CustomGallery.vue';
-import ComplexList from './detail/ComplexList.vue';
-import GalleryList from './detail/GalleryList.vue';
-import CustomTable from './detail/CustomTable.vue';
-import CustomChart from './detail/CustomChart.vue';
-import { clone } from 'lodash-es';
-import { getData, getFormattedText } from '../hooks/helper';
-import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-import QHCurve from './preset/QHCurve.vue';
-import MeasureDetail from './preset/MeasureDetail.vue';
-import AIChat from '/@/components/AIChat/MiniChat.vue';
-import DeviceAlarm from './preset/DeviceAlarm.vue';
-// import FIreWarn from './preset/FIreWarn.vue';
-// import FIreControl from './preset/FIreControl.vue';
+  import { computed } from 'vue';
+  import {
+    CommonItem,
+    Config,
+    // ModuleDataBoard,
+    // ModuleDataChart,
+    // ModuleDataList,
+    // ModuleDataPreset,
+    // ModuleDataTable,
+  } from '../../../deviceManager/configurationTable/types';
+  import MiniBoard from './detail/MiniBoard.vue';
+  import TimelineList from './detail/TimelineList.vue';
+  import TimelineListNew from './detail/TimelineListNew.vue';
+  import CustomList from './detail/CustomList.vue';
+  import CustomGallery from './detail/CustomGallery.vue';
+  import ComplexList from './detail/ComplexList.vue';
+  import GalleryList from './detail/GalleryList.vue';
+  import CustomTable from './detail/CustomTable.vue';
+  import CustomChart from './detail/CustomChart.vue';
+  import { clone } from 'lodash-es';
+  import { getData, getFormattedText } from '../hooks/helper';
+  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+  import QHCurve from './preset/QHCurve.vue';
+  import MeasureDetail from './preset/MeasureDetail.vue';
+  import AIChat from '/@/components/AIChat/MiniChat.vue';
+  import DeviceAlarm from './preset/DeviceAlarm.vue';
+  // import FIreWarn from './preset/FIreWarn.vue';
+  // import FIreControl from './preset/FIreControl.vue';
 
-const props = defineProps<{
-  data: any;
-  moduleData: Config['moduleData'];
-}>();
+  const props = defineProps<{
+    data: any;
+    moduleData: Config['moduleData'];
+  }>();
 
-const { background, layout } = props.moduleData;
+  const { background, layout } = props.moduleData;
 
-// 获取当原始配置带 items 项时的最终 items 配置
-function getItems(raw, items: CommonItem[]) {
-  return items.map((i) => {
-    return {
-      ...i,
-      label: getFormattedText(raw, i.label, i.trans),
-      value: getFormattedText(raw, i.value, i.trans),
-    };
-  });
-}
-
-// 获取当 List 组件配置带 items 项时的最终 items 配置
-function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-  if (mapFromData && Array.isArray(raw)) {
-    return raw.map((data) => {
-      const item = items[0];
+  // 获取当原始配置带 items 项时的最终 items 配置
+  function getItems(raw, items: CommonItem[]) {
+    return items.map((i) => {
       return {
-        ...item,
-        label: getFormattedText(data, item.label, item.trans),
-        value: getFormattedText(data, item.value, item.trans),
+        ...i,
+        label: getFormattedText(raw, i.label, i.trans),
+        value: getFormattedText(raw, i.value, i.trans),
       };
     });
   }
-  return getItems(raw, items);
-}
-
-/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
-const layoutConfig = computed(() => {
-  const refData = props.data;
-  const board = clone(props.moduleData.board) || [];
-  const list = clone(props.moduleData.list) || [];
-  const gallery = clone(props.moduleData.gallery) || [];
-  const complex_list = clone(props.moduleData.complex_list) || [];
-  const gallery_list = clone(props.moduleData.gallery_list) || [];
-  const chart = clone(props.moduleData.chart) || [];
-  const table = clone(props.moduleData.table) || [];
-  const preset = clone(props.moduleData.preset) || [];
-
-  return layout.items.reduce((arr: any[], item) => {
-    switch (item.name) {
-      case 'board': {
-        const cfg = board.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          overflow: true,
+  // 获取当 List 组件配置带 items 项时的最终 items 配置
+  function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+    if (mapFromData && Array.isArray(raw)) {
+      return raw.map((data) => {
+        const item = items[0];
+        return {
           ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'list': {
-        const cfg = list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          label: getFormattedText(data, item.label, item.trans),
+          value: getFormattedText(data, item.value, item.trans),
+        };
+      });
+    }
+    return getItems(raw, items);
+  }
 
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getListItems(data, cfg.items, cfg.mapFromData),
-        });
-        break;
-      }
-      case 'gallery': {
-        const cfg = gallery.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+  /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
+  const layoutConfig = computed(() => {
+    const refData = props.data;
+    const board = clone(props.moduleData.board) || [];
+    const list = clone(props.moduleData.list) || [];
+    const gallery = clone(props.moduleData.gallery) || [];
+    const complex_list = clone(props.moduleData.complex_list) || [];
+    const gallery_list = clone(props.moduleData.gallery_list) || [];
+    const chart = clone(props.moduleData.chart) || [];
+    const table = clone(props.moduleData.table) || [];
+    const preset = clone(props.moduleData.preset) || [];
 
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'complex_list': {
-        const cfg = complex_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+    return layout.items.reduce((arr: any[], item) => {
+      switch (item.name) {
+        case 'board': {
+          const cfg = board.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: (data || []).map((d) => {
-              return {
-                title: getFormattedText(d, firstListItem.title),
-                contents: firstListItem.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(d, e.label, e.trans),
-                    value: getFormattedText(d, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
-        } else {
+          break;
+        }
+        case 'list': {
+          const cfg = list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: cfg.items.map((i) => {
-              return {
-                title: getFormattedText(data, i.title),
-                contents: i.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label, e.trans),
-                    value: getFormattedText(data, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getListItems(data, cfg.items, cfg.mapFromData),
           });
+          break;
         }
-        break;
-      }
-      case 'gallery_list': {
-        const cfg = gallery_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+        case 'gallery': {
+          const cfg = gallery.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-          galleryItems: getItems(data, cfg.galleryItems),
-        });
-        break;
-      }
-      case 'chart': {
-        const cfg = chart.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: getItems(data, cfg.items),
+          });
+          break;
+        }
+        case 'complex_list': {
+          const cfg = complex_list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...item,
-          config: cfg,
-          data,
-        });
-        break;
-      }
-      case 'table': {
-        const cfg = table.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          if (cfg.mapFromData) {
+            const firstListItem = cfg.items[0];
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: (data || []).map((d) => {
+                return {
+                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                  contents: firstListItem.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(d, e.label, e.trans),
+                      value: getFormattedText(d, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          } else {
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: cfg.items.map((i) => {
+                return {
+                  title: getFormattedText(data, i.title, i.trans),
+                  contents: i.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(data, e.label, e.trans),
+                      value: getFormattedText(data, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          }
+          break;
+        }
+        case 'gallery_list': {
+          const cfg = gallery_list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...cfg,
-          ...item,
-          columns: cfg.columns,
-          data,
-        });
-        break;
-      }
-      default: {
-        const cfg = preset.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: getItems(data, cfg.items),
+            galleryItems: getItems(data, cfg.galleryItems),
+          });
+          break;
+        }
+        case 'chart': {
+          const cfg = chart.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...item,
-          data,
-          config: cfg,
-        });
-        break;
+          arr.push({
+            ...item,
+            config: cfg,
+            data,
+          });
+          break;
+        }
+        case 'table': {
+          const cfg = table.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
+          arr.push({
+            ...cfg,
+            ...item,
+            columns: cfg.columns,
+            data,
+          });
+          break;
+        }
+        default: {
+          const cfg = preset.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
+          arr.push({
+            ...item,
+            data,
+            config: cfg,
+          });
+          break;
+        }
       }
-    }
-    return arr;
-  }, []);
-});
+      return arr;
+    }, []);
+  });
 </script>
 <style lang="less" scoped>
-@import '@/design/theme.less';
+  @import '@/design/theme.less';
 
-.content {
-  height: calc(100% - 30px);
-  position: relative;
-  // z-index: -2;
-  display: flex;
-  flex-direction: column;
-}
-.content__background {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-}
-.content__module {
-  // margin-top: 5px;
-  // margin-bottom: 5px;
-  width: 100%;
-  height: 100%;
-}
-// .content__module:first-of-type {
-//   margin-top: 0;
-// }
-// .content__module:last-of-type {
-//   margin-bottom: 0;
-// }
-::-webkit-scrollbar {
-  width: 5px !important;
-}
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
+  .content {
+    height: calc(100% - 30px);
+    position: relative;
+    // z-index: -2;
+    display: flex;
+    flex-direction: column;
+  }
+  .content__background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+  }
+  .content__module {
+    // margin-top: 5px;
+    // margin-bottom: 5px;
+    width: 100%;
+    height: 100%;
+  }
+  // .content__module:first-of-type {
+  //   margin-top: 0;
+  // }
+  // .content__module:last-of-type {
+  //   margin-bottom: 0;
+  // }
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
 
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  /* background-color: transparent; */
-  color: #fff;
-}
-:deep(.zxm-select-arrow) {
-  color: #fff;
-}
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
-:deep(.zxm-select-selection-placeholder) {
-  color: #fff !important;
-}
-:deep(.dialog-overlay) {
-  width: 100%;
-  height: 100%;
-  position: unset;
-  box-shadow: unset;
-}
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    /* background-color: transparent; */
+    color: #fff;
+  }
+  :deep(.zxm-select-arrow) {
+    color: #fff;
+  }
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+  :deep(.zxm-select-selection-placeholder) {
+    color: #fff !important;
+  }
+  :deep(.dialog-overlay) {
+    width: 100%;
+    height: 100%;
+    position: unset;
+    box-shadow: unset;
+  }
 
-::-webkit-scrollbar {
-  width: 5px !important;
-}
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
 </style>

src/views/vent/home/configurable/components/detail/CustomList.vue

@@ -74,6 +74,7 @@
     --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
     --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
     --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
+    --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
     padding: 5px 20px;
     position: relative;
     background-repeat: no-repeat;
@@ -343,6 +344,18 @@
     align-items: center;
     padding: 0 20px 0 15px;
   }
+  .list_K {
+    background: unset;
+    padding: 0 5px 0 10px;
+  }
+  .list-item__content_K {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px;
+    margin: 4px 0;
+    background-image: var(--image-linear-gradient-3);
+  }
 
   .list-item__label {
     flex-basis: 55%;

src/views/vent/home/configurable/hooks/useInit.ts

@@ -256,7 +256,7 @@ export function useInitModule(deviceType: Config['deviceType'], moduleData: Conf
       });
       options.value = devices.value.map((e) => {
         return {
-          label: getFormattedText(e, header.selector.value),
+          label: getFormattedText(e, header.selector.value, header.selector.trans),
           value: e.id,
         };
       });

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

@@ -9,11 +9,11 @@
       <div v-if="!route.query.embed" class="top-bg">
         <div class="main-title">{{ mainTitle }}</div>
       </div>
-      <a class="ant-dropdown-link module-dropdown" @click.prevent="showBar = !showBar">
+      <!-- <a class="ant-dropdown-link module-dropdown" @click.prevent="showBar = !showBar">
         全矿井通风检测
         <CaretDownOutlined />
-      </a>
-      <MonitorBar v-if="showBar" class="module-monitor-bar" :is-data-real-time="isDataRealTime" :data="data" />
+      </a> -->
+      <!-- <MonitorBar v-if="showBar" class="module-monitor-bar" :is-data-real-time="isDataRealTime" :data="data" /> -->
       <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
         <template #overlay>
         </template>
@@ -64,13 +64,13 @@
           </div>
         </div>
       </template>
-      <div
+      <!-- <div
         v-if="sysDataType === 'all'"
         :class="{ 'realtime-mode': isDataRealTime }"
         alt="切换数据模式"
         class="switch-button report-mode right-525px"
         @click="switchDataMode"
-      ></div>
+      ></div> -->
       <div class="switch-button icon-goto right-475px" @click="goMicroApp()"></div>
     </template>
   </div>
@@ -78,7 +78,7 @@
 <script lang="ts" setup>
   import { onMounted, onUnmounted, ref, watch } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
-  import MonitorBar from './components/MonitorBar.vue';
+  // import MonitorBar from './components/MonitorBar.vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
@@ -96,13 +96,13 @@
   const route = useRoute();
   const router = useRouter();
   const isDataRealTime = ref(sysDataType === 'monitor');
-  const showBar = ref(true);
+  // const showBar = ref(true);
   let interval: number | undefined;
 
-  function switchDataMode() {
-    isDataRealTime.value = !isDataRealTime.value;
-    refresh();
-  }
+  // function switchDataMode() {
+  //   isDataRealTime.value = !isDataRealTime.value;
+  //   refresh();
+  // }
 
   function refresh() {
     fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
@@ -147,7 +147,12 @@
 
   function initInterval() {
     setInterval(() => {
-      list({}).then(updateData);
+      list({
+        types: configs.value
+          .filter((e) => e.deviceType)
+          .map((e) => e.deviceType)
+          .join(','),
+      }).then(updateData);
     }, 60000);
   }
 

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

@@ -0,0 +1,879 @@
+<template>
+  <div class="monitor-container">
+    <div id="FlowSensor" class="FlowSensor-box" style="position: absolute; display: none">
+      <!-- <div class="elementContent" v-if="selectData['deviceType'].startsWith('pump_under') || selectData['deviceType'] == 'pump_n12m2pq'">
+        <fourBorderBg>
+          <template v-for="(item, index) in modelMonitor" :key="index">
+            <div class="gas-monitor-row">
+              <div class="title">{{ item.title }}</div>
+              <div class="value">{{ selectData[item.code] ? selectData[item.code] : '-' }}</div>
+            </div>
+          </template>
+        </fourBorderBg>
+      </div> -->
+    </div>
+    <!-- 布尔台新瓦斯泵模型上的数据 -->
+    <div class="elementContent" style="position: absolute; display: none">
+      <div v-for="(tag, index) in modelMonitorTags" :key="index" :id="tag.domId" class="modal-monitor-box">
+        <div class="title">{{ tag.title }}</div>
+        <div
+          v-if="tag.type == 'sign'"
+          class="signal-round"
+          :class="{ 'signal-round-gry': selectData[tag.code] != 1, 'signal-round-run': selectData[tag.code] == 1 }"
+        ></div>
+        <div v-else class="value">{{ selectData[tag.code] }}</div>
+      </div>
+    </div>
+    <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
+    <ModuleCommon
+      v-for="cfg in configs"
+      :key="cfg.deviceType"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="selectData"
+      :visible="true"
+    />
+    <div class="lr left-box"></div>
+    <div class="lr right-box"></div>
+    <div ref="playerRef" class="player-box"></div>
+  </div>
+  <!-- <DetailModal @register="register" :device-type="deviceType" :device-id="deviceId" /> -->
+  <PasswordModal
+    :modal-is-show="passwordModalIsShow"
+    modal-title="密码检验"
+    :modal-type="handlerType"
+    @handle-ok="handleOK"
+    @handle-cancel="handleCancel"
+  />
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, defineProps, watch, inject, nextTick, computed } from 'vue';
+  // import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
+  import { setModelType, playAnimate } from '../gasPump.threejs';
+  import { getModelMonitorTags } from '../gasPump.data';
+  // import { useModal } from '/@/components/Modal';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import PasswordModal from '../../comment/components/PasswordModal.vue';
+  import { message } from 'ant-design-vue';
+  // import { useCamera } from '/@/hooks/system/useCamera';
+  // import { Config } from '../../../deviceManager/configurationTable/types';
+  // import DetailModal from './DetailModal.vue';
+  import { set } from 'lodash-es';
+  import { list } from '../gasPump.api';
+  import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
+
+  const { configs: rawConfigs, fetchConfigs } = useInitConfigs();
+
+  const globalConfig = inject<any>('globalConfig');
+
+  const props = defineProps<{ deviceId: string; deviceType: string }>();
+  // const [register, { openModal }] = useModal();
+  const modelMonitorTags = getModelMonitorTags();
+  const loading = ref(false);
+  const passwordModalIsShow = ref(false);
+  const handlerType = ref('');
+  const playerRef = ref();
+
+  // 监测数据
+  const selectData = ref<any>({});
+
+  // const { getCamera, removeCamera } = useCamera();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      return new Promise((resolve) => {
+        timer = setTimeout(
+          async () => {
+            const data = await getDataSource();
+            selectData.value = data;
+            playAnimate(data);
+            // Object.assign(selectData, data);
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor();
+            loading.value = false;
+          },
+          flag ? 0 : 1000
+        );
+      });
+    }
+  }
+
+  async function getDataSource() {
+    const res = await list({
+      devicetype: 'gasdrainage',
+      pagetype: 'normal',
+    });
+    const datalist = res.msgTxt[0]['datalist'];
+
+    const result = datalist.reduce((obj, e) => {
+      return set(obj, e.readData.id, e);
+    }, {});
+    return result;
+  }
+
+  function handler(passWord, paramcode) {
+    let value = '';
+    if (paramcode == 'ykjdqh') {
+      value = selectData.value['ykjdqh'] == '1' ? '2' : '1';
+    }
+    if (paramcode == 'jxmsqh') {
+      value = selectData.value['jxmsqh'] == '1' ? '2' : '1';
+    }
+    const data = {
+      deviceid: selectData.value['deviceID'],
+      devicetype: selectData.value['deviceType'],
+      paramcode: paramcode,
+      password: passWord,
+      value: value,
+    };
+    deviceControlApi(data)
+      .then(() => {
+        if (globalConfig.History_Type == 'remote') {
+          message.success('指令已下发至生产管控平台成功！');
+        } else {
+          message.success('指令已下发成功！');
+        }
+      })
+      .catch(() => {
+        message.success('控制异常');
+      });
+  }
+
+  function handleOK(passWord, handlerState) {
+    handler(passWord, handlerState);
+    passwordModalIsShow.value = false;
+    handlerType.value = '';
+  }
+
+  function handleCancel() {
+    passwordModalIsShow.value = false;
+    handlerType.value = '';
+  }
+
+  const configs = computed(() => {
+    return rawConfigs.value.filter((c) => c.deviceType === props.deviceId);
+  });
+
+  watch(
+    () => props.deviceType,
+    () => {
+      // removeCamera();
+      nextTick(async () => {
+        if (props.deviceType == 'pump_over') {
+          setModelType('gasPump');
+        } else if (props.deviceType?.startsWith('pump_under') || props.deviceType == 'pump_n12m2pq') {
+          setModelType('gasPumpUnder');
+        }
+      });
+    }
+  );
+  // watch(
+  //   () => props.deviceId,
+  //   async (deviceID) => {
+  //     removeCamera();
+  //     if (deviceID) await getCamera(deviceID, playerRef.value);
+  //   }
+  // );
+
+  onMounted(async () => {
+    timer = null;
+    await getMonitor(true);
+    fetchConfigs('gasPumpMonitor');
+    // if (selectData && selectData['deviceID']) await getCamera(selectData['deviceID'], playerRef.value);
+  });
+
+  // onBeforeUnmount(() => {
+  //   removeCamera();
+  // });
+
+  onUnmounted(() => {
+    // removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  });
+
+  // const rawConfigs = ref<Config[]>([
+  //   {
+  //     deviceType: '1709773229143920641',
+  //     moduleName: '瓦斯泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701001传感器的值',
+  //               value: '${701001.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:300px;',
+  //       version: '原版',
+  //       position: 'top:30px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773229143920641',
+  //     moduleName: '注水泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701001传感器的值',
+  //               value: '${701001.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:200px;',
+  //       version: '原版',
+  //       position: 'top:340px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773229143920641',
+  //     moduleName: '排水泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701001传感器的值',
+  //               value: '${701001.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:200px;',
+  //       version: '原版',
+  //       position: 'top:550px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773229143920641',
+  //     moduleName: '泵站检测详情',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701001传感器的值',
+  //               value: '${701001.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:490px;',
+  //       version: '原版',
+  //       position: 'top:30px;right:0px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773300489031682',
+  //     moduleName: '瓦斯泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701004传感器的值',
+  //               value: '${701004.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:300px;',
+  //       version: '原版',
+  //       position: 'top:30px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773300489031682',
+  //     moduleName: '注水泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701004传感器的值',
+  //               value: '${701004.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:200px;',
+  //       version: '原版',
+  //       position: 'top:340px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773300489031682',
+  //     moduleName: '排水泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701004传感器的值',
+  //               value: '${701004.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:200px;',
+  //       version: '原版',
+  //       position: 'top:550px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773300489031682',
+  //     moduleName: '泵站检测详情',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701004传感器的值',
+  //               value: '${701004.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:490px;',
+  //       version: '原版',
+  //       position: 'top:30px;right:0px;',
+  //     },
+  //   },
+  // ]);
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
+
+  .elementContent {
+    :deep(.main-container) {
+      display: flex;
+      flex-wrap: wrap;
+      width: 690px;
+      padding: 10px 12px 10px 15px;
+      border: 1px solid #d3e1ff33;
+      background-color: #061c2a55;
+      box-shadow: 0 0 15px #3b567f55;
+      background-color: #38383833;
+      .gas-monitor-row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        color: #fff;
+        line-height: 32px;
+        .title {
+          width: 250px;
+          color: #baeaff;
+        }
+        .value {
+          width: 80px;
+          color: #efae05;
+        }
+      }
+    }
+  }
+  .modal-monitor-box {
+    background-color: #000;
+    color: #fff;
+    padding: 0 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .title {
+      margin-right: 5px;
+    }
+    .signal-round {
+      margin-left: 5px;
+    }
+    .value {
+      width: 30px;
+      color: #efae05;
+    }
+  }
+  .device-state {
+    width: 100%;
+    position: absolute;
+    top: 20px;
+    color: #e90000;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+  }
+
+  .lr {
+    margin-top: 0 !important;
+  }
+  .left-box {
+    width: 360px !important;
+    direction: rtl;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100% - 60px);
+    margin-top: 30px !important;
+
+    .left-container {
+      direction: ltr;
+    }
+  }
+  .right-box {
+    width: 350px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    .environment-monitor {
+      .item {
+        flex: 1;
+        margin: 0 5px;
+        .title {
+          color: #7ae5ff;
+          text-align: center;
+          margin-bottom: 2px;
+        }
+        .num {
+          width: 100%;
+          height: 30px;
+          text-align: center;
+          border-top: 2px solid #50c8fc;
+          border-radius: 4px;
+          background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
+        }
+      }
+    }
+    .pool-box {
+      width: 327px;
+      height: 65px;
+      padding: 0 5px;
+      background: url('/@/assets/images/vent/pump1.png') no-repeat;
+      background-size: cover;
+      background-origin: content-box;
+      margin-top: 2px;
+      .num {
+        color: aqua;
+      }
+      .center {
+        padding-right: 5px;
+      }
+    }
+  }
+  .player-box {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    padding: 0 20px 0 20px;
+    z-index: 9999;
+    display: flex;
+    align-items: end;
+    bottom: 80px;
+    :deep(#LivePlayerBox) {
+      display: flex;
+      justify-content: end;
+    }
+  }
+
+  .input-box {
+    width: calc(100%);
+    display: flex;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    .input-item {
+      width: calc(50% - 8px);
+      padding: 0 2px;
+
+      &:nth-child(2n) {
+        margin-left: 4px;
+      }
+    }
+  }
+  .btn-group {
+    display: flex;
+    justify-content: space-around;
+    .btn-item {
+      width: 82px;
+      text-align: center;
+    }
+  }
+  .top-btn {
+    .btn-group {
+      margin-bottom: 8px;
+      .btn-item {
+        width: calc(50% - 16px);
+        margin: 0 4px;
+      }
+    }
+    .control-item {
+      margin-left: 10px;
+      margin-bottom: 8px;
+      display: flex;
+      .control-title {
+        width: 80px;
+        color: var(--vent-font-action-link);
+      }
+      .control-container {
+        display: flex;
+      }
+    }
+  }
+  .btn-box {
+    display: flex;
+    .btn {
+      padding: 0 8px !important;
+      margin: 0 2px;
+    }
+  }
+  .state-header {
+    display: flex;
+    color: var(--vent-font-action-link);
+    .header-item {
+      width: 25%;
+      text-align: center;
+    }
+  }
+  .device-row {
+    display: flex;
+    margin-top: 10px;
+    .state {
+      width: 25%;
+      text-align: center;
+      font-size: 13px;
+    }
+  }
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+  }
+  :deep(.list-item__background) {
+    background-image: linear-gradient(to right, #39deff15, #3977e500) !important;
+    line-height: 30px !important;
+    height: 30px !important;
+  }
+</style>

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

@@ -515,6 +515,9 @@ export function getComponent() {
     case 'sdmtjtcctrk': // 布尔台
       gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeCC.vue'));
       return gasPumpHome;
+    case 'sdmtjtbdmk': // 保德
+      gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeBD.vue'));
+      return gasPumpHome;
     default:
       gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHome.vue'));
       return gasPumpHome;

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

@@ -243,6 +243,7 @@
 </script>
 <style lang="less" scoped>
   @import '/@/design/vent/modal.less';
+  @import '/@/design/theme.less';
   @ventSpace: zxm;
 
   :deep(.@{ventSpace}-tabs-tabpane-active) {
@@ -335,7 +336,7 @@
       align-items: center;
       font-size: 14px;
 
-      color: var(--color-9);
+      color: var(--vent-font-color);
       cursor: pointer;
       margin: 0 3px;