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

src/hooks/vent/useSvgAnimation.ts

@@ -51,10 +51,11 @@ export function useSvgAnimation(elementInfo: Map<string, { key: string; transfor
   const animateElement = (elementId: string, toEnd: boolean, duration = 3000, progress = 1) => {
     const el = animationElements.get(elementId);
     const info = elementInfo.get(elementId);
+    progress = _.clamp(progress, 0, 1);
 
     if (el && info && info.transforms.length > 1) {
-      const endTransform = _.nth(info.transforms, Math.floor(info.transforms.length * progress));
-      const startTransform = _.nth(info.transforms, -Math.ceil(info.transforms.length * progress));
+      const endTransform = info.transforms[Math.floor((info.transforms.length - 1) * progress)];
+      const startTransform = info.transforms[Math.floor((info.transforms.length - 1) * (1 - progress))];
       el.style.transition = `transform ${duration}ms`;
       el.setAttribute('transform', toEnd ? endTransform : startTransform);
     }

src/views/vent/home/colliery/components/wind-monitor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="windMonitor">
-    <div class="title-top" @click="getDetail">风量监测111</div>
+    <div class="title-top" @click="getDetail">风量监测</div>
     <div class="wind-contents">
       <div class="wind-bar" ref="windBar"></div>
     </div>
@@ -259,7 +259,7 @@ watch(
         echartData.xdata.push(el.strinstallpos);
         echartData.ydata.push(el.readData.m3);
       } else {
-        echartData.xdata.push('0');
+        echartData.xdata.push(el.strinstallpos);
         echartData.ydata.push('0');
       }
     });

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

@@ -119,7 +119,7 @@
           <AIChat class="content__module" />
         </template>
         <template v-if="config.name === 'device_alarm'">
-          <DeviceAlarm class="content__module" :devicedata="config.data" />
+          <DeviceAlarm class="content__module" :devicedata="config.data" :config="config.config" />
         </template>
         <template v-if="config.name === 'measure_detail'">
           <MeasureDetail
@@ -141,359 +141,359 @@
   </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 ComplexListNew from './detail/ComplexList-New.vue';
-import GalleryList from './detail/GalleryList.vue';
-import CustomTable from './detail/CustomTable-New.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 CustomTabs from './preset/CustomTabs.vue';
-import AIChat from '/@/components/AIChat/MiniChat.vue';
-import DeviceAlarm from './preset/DeviceAlarm.vue';
-import MiniBoardNew from './detail/MiniBoard-New.vue';
-import CustomTableNew from './detail/CustomTable-New.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 ComplexListNew from './detail/ComplexList-New.vue';
+  import GalleryList from './detail/GalleryList.vue';
+  import CustomTable from './detail/CustomTable-New.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 CustomTabs from './preset/CustomTabs.vue';
+  import AIChat from '/@/components/AIChat/MiniChat.vue';
+  import DeviceAlarm from './preset/DeviceAlarm.vue';
+  import MiniBoardNew from './detail/MiniBoard-New.vue';
+  import CustomTableNew from './detail/CustomTable-New.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 tabs = clone(props.moduleData.tabs) || [];
-  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 tabs = clone(props.moduleData.tabs) || [];
+    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, firstListItem.trans),
-                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, i.trans),
-                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);
-
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-          galleryItems: getItems(data, cfg.galleryItems),
-        });
-        break;
-      }
-      case 'tabs': {
-        const cfg = tabs.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);
 
-        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),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
-        } else {
+          break;
+        }
+        case 'complex_list': {
+          const cfg = complex_list.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({
             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),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
+            galleryItems: getItems(data, cfg.galleryItems),
           });
+          break;
         }
-        break;
-      }
-      case 'chart': {
-        const cfg = chart.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+        case 'tabs': {
+          const cfg = tabs.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 'chart': {
+          const cfg = chart.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,
+            config: cfg,
+            data,
+          });
+          break;
+        }
+        case 'table': {
+          const cfg = table.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...item,
-          data,
-          config: cfg,
-        });
-        break;
+          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;
-}
-.image__background {
-  width: 35%;
-  height: 61%;
-  left: 30%;
-}
-.content__module {
-  // margin-top: 5px;
-  // margin-bottom: 5px;
-  width: 100%;
-  height: 100%;
-}
-.content__module1 {
-  background: url('@/assets/images/vent/homeNew/databg/4.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  height: 129px;
-  margin-top: 20%;
-}
-.content__moduleFire {
-  width: 100%;
-  height: 100%;
-  margin-left: -24% !important;
-}
-.content__module_dust {
-  background: url('@/assets/images/vent/homeNew/bottomBg.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-  padding: 0 34px;
-}
-// .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;
+  }
+  .image__background {
+    width: 35%;
+    height: 61%;
+    left: 30%;
+  }
+  .content__module {
+    // margin-top: 5px;
+    // margin-bottom: 5px;
+    width: 100%;
+    height: 100%;
+  }
+  .content__module1 {
+    background: url('@/assets/images/vent/homeNew/databg/4.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    height: 129px;
+    margin-top: 20%;
+  }
+  .content__moduleFire {
+    width: 100%;
+    height: 100%;
+    margin-left: -24% !important;
+  }
+  .content__module_dust {
+    background: url('@/assets/images/vent/homeNew/bottomBg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    padding: 0 34px;
+  }
+  // .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/content.vue

@@ -111,7 +111,7 @@
           <AIChat class="content__module" />
         </template>
         <template v-if="config.name === 'device_alarm'">
-          <DeviceAlarm class="content__module" :devicedata="config.data" />
+          <DeviceAlarm class="content__module" :devicedata="config.data" :config="config.config" />
         </template>
         <!-- lxh -->
         <template v-if="config.name === 'select_cs'">

src/views/vent/home/configurable/components/preset/DeviceAlarm.vue

@@ -31,9 +31,26 @@
 <script lang="ts" setup>
   import { reactive, defineProps, watch } from 'vue';
   import { getAssetURL } from '/@/utils/ui';
-  let props = defineProps({
-    devicedata: Object,
-  });
+  let props = withDefaults(
+    defineProps<{
+      devicedata: Object;
+      config: {
+        /** 忽略报警数，即报警数设为0 */
+        ignoreWarning: Boolean;
+        ignoreClosed: Boolean;
+        ignoreCount: Boolean;
+        ignoreKeywords: Array<string>;
+      };
+    }>(),
+    {
+      config: () => ({
+        ignoreWarning: false,
+        ignoreClosed: false,
+        ignoreCount: false,
+        ignoreKeywords: [],
+      }),
+    }
+  );
   let iconsMonitor = reactive({
     fanmain: {
       url: getAssetURL('vent/alarm-icons/zhushan.png'),
@@ -221,13 +238,23 @@
     () => props.devicedata,
     (val) => {
       Object.keys(iconsMonitor).forEach((el) => {
-        if (val && val[el]) {
+        if (val && val[el] && !props.config.ignoreKeywords.includes(el)) {
           iconsMonitor[el].level = val[el].maxLevel;
           iconsMonitor[el]['text'] = val[el].name;
           // iconsMonitor[el]['count'] = val[el].count;
           iconsMonitor[el].allCount = val[el].totalcount;
           iconsMonitor[el].warnCount = val[el].count;
           iconsMonitor[el].closeCount = val[el].netstatus;
+
+          if (props.config.ignoreWarning) {
+            iconsMonitor[el].warnCount = 0;
+          }
+          if (props.config.ignoreClosed) {
+            iconsMonitor[el].closeCount = 0;
+          }
+          if (props.config.ignoreCount) {
+            iconsMonitor[el].allCount = 0;
+          }
         }
       });
     },

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

@@ -346,9 +346,9 @@ export const testConfigVent: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=windrect',
     },
     showStyle: {
-      size: 'width:460px;height:260px;',
+      size: 'width:505px;height:260px;',
       version: '原版',
-      position: 'bottom:0px;left:15px;',
+      position: 'bottom:15px;left:420px;',
     },
   },
   {
@@ -428,7 +428,7 @@ export const testConfigVent: Config[] = [
     showStyle: {
       size: 'width:460px;height:260px;',
       version: '原版',
-      position: 'bottom:0px;left:495px;',
+      position: 'bottom:15px;left:940px;',
     },
   },
   {
@@ -511,96 +511,10 @@ export const testConfigVent: Config[] = [
     showStyle: {
       size: 'width:460px;height:260px;',
       version: '原版',
-      position: 'bottom:0px;left:975px;',
+      position: 'bottom:15px;right:15px;',
     },
   },
-  //  {
-  //     // deviceType: 'warn',
-  //     // moduleName: '预警监测',
-  //     deviceType: '',
-  //     moduleName: '智能通风Deepseek',
-  //     pageType: 'vent',
-  //     moduleData: {
-  //       header: {
-  //         show: true,
-  //         readFrom: '',
-  //         selector: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //         slot: {
-  //           show: true,
-  //           value: '网络异常：${warn[0].netstatus.val}',
-  //         },
-  //       },
-  //       background: {
-  //         show: false,
-  //         type: 'video',
-  //         link: '',
-  //       },
-  //       layout: {
-  //         direction: 'row',
-  //         items: [
-  //           {
-  //             // name: 'list',
-  //             name: 'ai_chat',
-  //             basis: '100%',
-  //           },
-  //         ],
-  //       },
-  //       board: [],
-  //       list: [
-  //         {
-  //           type: 'timeline',
-  //           readFrom: 'warn[0]',
-  //           items: [
-  //             {
-  //               label: '报警',
-  //               value: '${alarm.val}',
-  //               info: '',
-  //               color: 'red',
-  //             },
-  //             {
-  //               label: '重大风险预警',
-  //               value: '${red.val}',
-  //               info: '',
-  //               color: 'red',
-  //             },
-  //             {
-  //               label: '较大风险预警',
-  //               value: '${orange.val}',
-  //               info: '',
-  //               color: 'orange',
-  //             },
-  //             {
-  //               label: '一般风险预警',
-  //               value: '${yellow.val}',
-  //               info: '',
-  //               color: 'yellow',
-  //             },
-  //             {
-  //               label: '低风险预警',
-  //               value: '${blue.val}',
-  //               info: '',
-  //               color: 'blue',
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //       preset: [{ readFrom: '' }],
-  //       table: [],
-  //       gallery: [],
-  //       chart: [],
-  //       gallery_list: [],
-  //       complex_list: [],
-  //       to: '/monitorChannel/monitor-alarm-home',
-  //     },
-  //     showStyle: {
-  //       size: 'width:390px;height:260px;',
-  //       version: '原版',
-  //       position: 'top:855px;left:15px',
-  //     },
-  //   },
+
 ];
 
 export const testConfigDust: Config[] = [
@@ -1088,7 +1002,7 @@ export const testConfigDustGreen: Config[] = [
       // mock: BDdustMock,
     },
     showStyle: {
-      size: 'width:420px;height:780px;',
+      size: 'width:420px;height:815px;',
       version: '新版',
       position: 'top:0px;left:15px',
     },
@@ -2048,7 +1962,7 @@ export const testConfigFireGreen: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:420px;height:350px;',
+      size: 'width:420px;height:400px;',
       version: '原版',
       position: 'top:415px;left:15px;',
     },
@@ -2915,7 +2829,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      // mock: BDfireMock,
+     to:'/ventilate/warn/home',
     },
     showStyle: {
       size: 'width:420px;height:400px;',
@@ -2966,7 +2880,7 @@ export const testConfigFusionGreen: Config[] = [
           readFrom: 'deviceWarn',
           listOption: {
             fanmain: {
-              url: getThemifyImagesURL(),
+              url: getThemifyImagesURL('vent/alarm-icons/zfj.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -2976,7 +2890,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'fanmain_close',
             },
             fanlocal: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/jbfj.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -2986,7 +2900,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'fanlocal_close',
             },
             bundletube: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/sgjc.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -2996,7 +2910,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'bundletube_close',
             },
             fanlocaldp: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/jbfj-db.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3006,7 +2920,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'fanlocaldp_close',
             },
             gate: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/fm-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3016,7 +2930,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'gate_close',
             },
             window: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/fc-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3026,7 +2940,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'window_close',
             },
             windrect: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/dscf-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3036,7 +2950,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'windrect_close',
             },
             forcFan: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/yf-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3046,7 +2960,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'forcFan_close',
             },
             spray: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/pl-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3056,7 +2970,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'spray_close',
             },
             dustdev: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/pf-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3066,7 +2980,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'dustdev_close',
             },
             nitrogen: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/zd-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3076,7 +2990,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'nitrogen_close',
             },
             pulping: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/zj-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3086,7 +3000,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'pulping_close',
             },
             atomizing: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/pw-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3096,7 +3010,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'atomizing_close',
             },
             dustsensor: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/cgq-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3106,7 +3020,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'dustsensor_close',
             },
             gas: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/ccb-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3116,7 +3030,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'gas_close',
             },
             pump: {
-              url: getThemifyImagesURL('vent/alarm-icons/wasibeng.png'),
+              url: getThemifyImagesURL('vent/alarm-icons/ccb-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3126,7 +3040,7 @@ export const testConfigFusionGreen: Config[] = [
               closeCount: 'pump_close',
             },
             modelsensor: {
-              url: getThemifyImagesURL('vent/alarm-icons/cf.png'),
+              url: getThemifyImagesURL('vent/alarm-icons/cf-green.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -3138,10 +3052,10 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      // mock: BDfireMock,
+     to:'/device/warn/home',
     },
     showStyle: {
-      size: 'width:420px;height:350px;',
+      size: 'width:420px;height:400px;',
       version: '原版',
       position: 'top:415px;left:15px',
     },
@@ -3220,7 +3134,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      // mock: BDfireMock,
+      to:'/fire/warn/home',
     },
     showStyle: {
       size: 'width:420px;height:400px;',
@@ -3316,10 +3230,10 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      // mock: BDfireMock,
+     to:'/dust/warn/home',
     },
     showStyle: {
-      size: 'width:420px;height:350px;',
+      size: 'width:420px;height:400px;',
       version: '原版',
       position: 'top:415px;right:15px',
     },
@@ -3384,7 +3298,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      // mock: BDfireMock,
+       to:'/gas/warn/home',
     },
     showStyle: {
       size: 'width:990px;height:170px;',

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

@@ -75,7 +75,7 @@
   import { computed, onMounted, onUnmounted, ref } from 'vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import { getAlarmRecord, getDeviceSys } from './configurable.api';
-  import { testConfigTSFire } from './configurable.data.tashan';
+  // import { testConfigTSFire } from './configurable.data.tashan';
   import ModuleCommon from './components/ModuleCommon.vue';
   import ModuleCommonDual from './components/ModuleCommonDual.vue';
   // import Three3D from './components/three3D.vue';
@@ -99,10 +99,11 @@
     sgZbAlarmNum: 0,
     yjjbLevelStr: '-',
   });
+
   onMounted(() => {
     let alarmLogData = [];
     fetchConfigs('ts_fire').then(() => {
-      configs.value = testConfigTSFire;
+      // configs.value = testConfigTSFire;
       getDeviceSys({
         devicetype: 'sys',
         type: 'all',

src/views/vent/home/configurable/green/common-green.vue

@@ -3,18 +3,10 @@
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
       <div class="main-container">
-        <div class="left-area">
-          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-          <ModuleOriginal v-for="cfg in configsLeft" :key="cfg.deviceType" :show-style="cfg.showStyle"
-            :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
-            :visible="true" />
-        </div>
-        <div class="bottom-area">
-          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-          <ModuleOriginal v-for="cfg in configsBottom" :key="cfg.deviceType" :show-style="cfg.showStyle"
-            :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
-            :visible="true" />
-        </div>
+        <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+        <ModuleOriginal 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="data"
+          :visible="true" />
         <div class="right-area">
           <greenRightTag />
         </div>
@@ -45,14 +37,6 @@ const route = useRoute();
 
 let interval: number | undefined;
 let configs = ref<any[]>([]);
-
-let configsLeft = computed(() => {
-  return configs.value.filter((v) => v.showStyle.position.includes('top'));
-});
-let configsBottom = computed(() => {
-  return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
-});
-
 function refresh() {
   fetchConfigs('vent').then(() => {
     configs.value = testConfigVent;
@@ -155,78 +139,6 @@ onUnmounted(() => {
   .main-container {
     width: 100%;
     height: 100%;
-
-    .left-area {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 420px;
-      height: 100%;
-      padding: 15px;
-      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-      overflow-y: auto;
-    }
-
-    .bottom-area {
-      position: absolute;
-      left: 435px;
-      bottom: 0;
-      width: calc(100% - 435px);
-      height: 290px;
-      padding: 15px;
-      background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-    }
-
-    .right-area {
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      width: 120px;
-      height: calc(100% - 305px);
-    }
-  }
-
-  .module-dropdown {
-    padding: 5px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 60px;
-    right: 480px;
-  }
-
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
-
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: @vent-configurable-dropdown;
-    border: none;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-  }
-
-  .realtime-mode {
-    background-image: var(--image-monitor-realtime);
-  }
-
-  .module-monitor-bar {
-    position: absolute;
-    top: 100px;
-    width: 1000px;
-    height: 200px;
-    left: calc(50% - 500px);
   }
 }
 

src/views/vent/home/configurable/green/components/CustomTable-green.vue

@@ -73,7 +73,7 @@
     padding: 5px 0;
 
     .table__content_label {
-      width: 390px;
+      width: 375px;
       height: 32px;
       display: flex;
       justify-content: space-around;
@@ -112,7 +112,7 @@
 
     .table__content_list {
       height: calc(100% - 32px);
-      width: 390px;
+      width: 375px;
       display: flex;
       flex-direction: column;
       padding: 5px 0;

src/views/vent/home/configurable/green/components/center-area-green.vue

@@ -9,7 +9,7 @@
             </div>
             <div class="dust-warn">
                 <div class="dust-icon"></div>
-                <div class="item-content">
+                <div class="item-content" @click="showModal('dust')">
                     <div class="ite-label">粉尘监测预警</div>
                     <div class="ite-val">{{ paramDatas.fc == 0
                         ? '低风险'
@@ -28,7 +28,7 @@
             </div>
             <div class="vent-warn">
                 <div class="vent-icon"></div>
-                <div class="item-content">
+                <div class="item-content"  @click="showModal('vent')">
                     <div class="ite-label">通风监测预警</div>
                     <div class="ite-val">{{ paramDatas.tf == 0
                         ? '低风险'
@@ -48,7 +48,7 @@
             <div class="gas-warn">
                 <div class="gas-icon"></div>
                 <div class="item-content1">
-                    <div class="ite-content">
+                    <div class="ite-content" @click="showModal('gas')">
                         <div class="ite-label">瓦斯监测预警</div>
                         <div class="ite-val">{{ paramDatas.ws == 0
                             ? '低风险'
@@ -72,7 +72,7 @@
             </div>
             <div class="device-warn">
                 <div class="device-icon"></div>
-                <div class="item-content">
+                <div class="item-content" @click="showModal('sbyj')">
                     <div class="ite-label">设备监测预警</div>
                     <div class="ite-val">{{ paramDatas.sb == 0
                         ? '低风险'
@@ -91,7 +91,7 @@
             </div>
             <div class="fire-warn">
                 <div class="fire-icon"></div>
-                <div class="item-content">
+                <div class="item-content" @click="showModal('fire')" >
                     <div class="ite-label">火灾监测预警</div>
                     <div class="ite-val">{{ paramDatas.fire == 0
                         ? '低风险'
@@ -110,14 +110,14 @@
             </div>
             <div class="db-warn">
                 <div class="db-icon"></div>
-                <div class="item-content">
+                <div class="item-content" @click="showModal('Minepressure')">
                     <div class="ite-label">顶板</div>
                     <div class="ite-val">低风险</div>
                 </div>
             </div>
             <div class="sz-warn">
                 <div class="sz-icon"></div>
-                <div class="item-content">
+                <div class="item-content" @click="showModal('waterLevel')">
                     <div class="ite-label">水灾</div>
                     <div class="ite-val">低风险</div>
                 </div>
@@ -131,6 +131,7 @@
 
 <script lang="ts" setup>
 import { reactive, watch } from 'vue'
+ import { useRouter } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
 import RiskWarnLevel from './dz-risk.vue'
 let props = defineProps({
@@ -141,12 +142,42 @@ let props = defineProps({
         }
     }
 })
+
+let router = useRouter();
 let paramDatas = reactive<any>({})
 const { sysOrgCode, sysDataType } = useGlobSetting();
 
+//跳转详情
+  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 'waterLevel':
+        console.log('waterLevel');
+        router.push('/warn/waterLevel/home');
+        break;
+      case 'gas':
+        router.push('/gas/warn/home');
+        break;
+      case 'sbyj':
+        router.push('/device/warn/home');
+        break;
+      case 'Minepressure':
+        router.push('/monitorChannel/monitor-Minepressure');
+        break;
+    }
+  }
+
 watch(() => props.paramData, (newV, oldV) => {
-    paramDatas =newV
-}, { immediate: true,deep:true })
+    paramDatas = newV
+}, { immediate: true, deep: true })
 </script>
 
 <style lang="less" scoped>
@@ -185,22 +216,24 @@ watch(() => props.paramData, (newV, oldV) => {
     .container {
         position: relative;
         width: 100%;
-        height: calc(100% - 25px);
-        margin-top: 25px;
+        height: calc(100% - 30px);
+        margin-top: 60px;
         background: var(--image-model_container_img) no-repeat center;
         background-size: 100% 100%;
     }
-.risk-echartbox{
-       position: absolute;
-    left: 18px;
-    top: -52px;
-    width: 220px;
-    height: 170px;
-}
+
+    .risk-echartbox {
+        position: absolute;
+        left: 0px;
+        top: -72px;
+        width: 220px;
+        height: 170px;
+    }
+
     .risk-score {
         position: absolute;
         left: 50%;
-        top: -46px;
+        top: -65px;
         transform: translate(-44%, 0);
         width: 206px;
         height: 60px;
@@ -243,8 +276,8 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .gas-warn {
         position: absolute;
-        left: 414px;
-        top: 416px;
+      left: 420px;
+    top: 436px;
         width: 132px;
         height: 108px;
         background: var(--image-model_gas_warn) no-repeat;
@@ -263,7 +296,7 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .fire-warn {
         position: absolute;
-        right: 142px;
+           right: 178px;
         top: 58px;
         width: 132px;
         height: 108px;
@@ -283,7 +316,7 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .sz-warn {
         position: absolute;
-        right: -2px;
+        right:34px;
         top: 136px;
         width: 132px;
         height: 108px;
@@ -314,18 +347,16 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .ite-label {
         text-align: center;
-        margin-bottom: 8px;
+        margin-bottom: 10px;
         padding-top: 4px;
         font-size: 12px;
     }
 
     .ite-val {
         width: 100%;
-        position: absolute;
         text-align: center;
         font-family: 'douyuFont';
         font-size: 12px;
-        bottom: 2px;
     }
 
     .ite-content {

src/views/vent/home/configurable/green/components/dz-card.vue

@@ -4,20 +4,26 @@
       <div class="gas-item">
         <div class="detail-box">
           <div class="detail-container">
-            <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
-              <div class="item-box">
-                <div class="item-box-label">{{ titleLeft.address }}</div>
-                <div class="item-box-val">{{ item.value1 || '-' }}</div>
-              </div>
-              <div class="item-box">
-                <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
-                <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
-              </div>
-              <div class="item-box">
-                <div class="item-box-label">{{ titleLeft.smoke }}</div>
-                <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
+
+            <vue3-seamless-scroll hover-stop="true" :list="infoData.dataOn" :hover="true" :step="0.18"
+              class="seamless-warp">
+              <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
+                <div class="item-box">
+                  <div class="item-box-label">{{ titleLeft.address }}</div>
+                  <div class="item-box-val">{{ item.value1 || '-' }}</div>
+                </div>
+                <div class="item-box">
+                  <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
+                  <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
+                </div>
+                <div class="item-box">
+                  <div class="item-box-label">{{ titleLeft.smoke }}</div>
+                  <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
+                </div>
               </div>
-            </div>
+            </vue3-seamless-scroll>
+
+
           </div>
         </div>
       </div>
@@ -51,6 +57,7 @@
 
 <script lang="ts" setup>
 import { ref, reactive, watch } from 'vue';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 
 let props = defineProps({
   titleLeft: {
@@ -107,6 +114,7 @@ watch(
   position: absolute;
   left: 0;
   top: 86px;
+
   .gas-box {
     display: flex;
     justify-content: center;
@@ -135,7 +143,12 @@ watch(
 
         .detail-container {
           height: 100%;
-          overflow-y: auto;
+          //overflow-y: auto;
+          .seamless-warp {
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+          }
 
           .detail-item {
             width: 100%;
@@ -186,6 +199,7 @@ watch(
     }
   }
 }
+
 .dzCard1 {
   --image-model_gas_item: url('@/assets/images/home-green/900.png');
   --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
@@ -205,6 +219,7 @@ watch(
       width: 50%;
       height: 100%;
       margin: 0px 5px;
+
       &:nth-child(1) {
         background: var(--image-model_fire_item) no-repeat;
         background-size: 100% 100%;
@@ -214,6 +229,7 @@ watch(
         background: var(--image-model_fire_item) no-repeat;
         background-size: 100% 100%;
       }
+
       .detail-box {
         position: relative;
         height: 100%;
@@ -222,6 +238,7 @@ watch(
         .detail-container {
           height: 100%;
           overflow-y: hidden;
+
           &:hover {
             overflow-y: auto;
           }

src/views/vent/home/configurable/green/components/dz-list.vue

@@ -14,6 +14,7 @@
               : {}
           "
         >
+          <!-- <img :src="item.url" :alt="item.text" /> -->
           <div class="level-text">
             <div class="all-count">
               <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
@@ -77,6 +78,7 @@ watch(
     --image-model_icon-item: url('@/assets/images/themify/deepblue/home-container/configurable/1600.png');
   }
 }
+
 .dz-list {
   --image-model_icon-item: url('@/assets/images/home-green/1600.png');
   width: 100%;
@@ -141,11 +143,15 @@ watch(
     }
 
     img {
-      width: 100%;
-      height: 60px;
+      width: 50px;
+      height: 50px;
+      position: absolute;
+      left: 18px;
+      top: -18px;
     }
   }
 }
+
 .icons-box1 {
   width: 100%;
   height: 90%;
@@ -155,6 +161,7 @@ watch(
   overflow-y: hidden;
   padding: 5px;
   box-sizing: border-box;
+
   &:hover {
     overflow-y: auto;
   }
@@ -178,6 +185,7 @@ watch(
       font-size: 14px;
       text-align: center;
       letter-spacing: 1px;
+
       .num-count,
       .num-count1 {
         font-family: 'douyuFont';
@@ -195,6 +203,7 @@ watch(
         }
       }
     }
+
     img {
       width: 100%;
       height: 60px;

src/views/vent/home/configurable/green/components/header-green.vue

@@ -81,7 +81,8 @@
   .costume-header {
     height: 30px;
     /* background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity)); */
-    background:url('../../../../../assets/images/home-green/green-select-bg.png') no-repeat;
+    /* background:url('../../../../../assets/images/home-green/green-select-bg.png') no-repeat; */
+    background:url('@/assets/images/home-green/green-select-bg.png') no-repeat;
     background-size:100% 100%;
   }
   .costume-header_left {

src/views/vent/home/configurable/green/vent-Green.vue

@@ -76,7 +76,8 @@ onUnmounted(() => { });
   --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
 
   width: 100%;
-  height: calc(100% - 52px);
+  // height: calc(100% - 52px);
+  height: 100%;
   color: @white;
   position: relative;
   background: #181b24;

src/views/vent/monitorManager/gateMonitor/components/gateDualSVG.vue

@@ -6,10 +6,9 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1980px"
+    width="1920px"
     height="1080"
-    style="position: relative; left: -30px; top: -180px"
-    viewBox="0 0 1920 1080"
+    viewBox="0 230 1920 1080"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">

src/views/vent/monitorManager/gateMonitor/components/gateSVG.vue

@@ -6,10 +6,9 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1980px"
+    width="1920px"
     height="1080"
-    style="position: relative; left: -20px; top: -150px"
-    viewBox="0 0 1920 1080"
+    viewBox="0 230 1920 1080"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">

src/views/vent/monitorManager/gateMonitor/components/gateTripleSVG.vue

@@ -6,10 +6,9 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1980px"
+    width="1920px"
     height="1080"
-    style="position: relative; left: -20px; top: -150px"
-    viewBox="0 0 1920 1080"
+    viewBox="0 230 1920 1080"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">

src/views/vent/monitorManager/windowMonitor/components/windowDualSVG.vue

@@ -6,10 +6,9 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1980px"
+    width="1920px"
     height="1080"
-    style="position: relative; left: -30px; top: -180px"
-    viewBox="0 0 1920 1080"
+    viewBox="0 230 1920 1080"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">
@@ -1322,6 +1321,7 @@
 <script setup lang="ts">
   import { onMounted, defineExpose } from 'vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
+  import _ from 'lodash';
 
   // 元素信息（常量数据，使用Map）
   const elementInfo = new Map([
@@ -2277,23 +2277,41 @@
 
   /** 根据SVG的使用场景播放动画 */
   function animate(data: any) {
+    console.log('debug data', data.OpenDegree, data.OpenDegree1, data.OpenDegree2);
     // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
-    if (data.OpenDegree || data.OpenDegree1) {
-      triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false);
-    } else {
-      triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
+    // 开度 / 最大开度 = 动画进度
+    if (data.OpenDegree) {
+      const progress = _.round(data.OpenDegree / 90, 2);
+      if (progress > 0) {
+        triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false, 3000, progress);
+      } else {
+        triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
+      }
     }
 
+    if (data.OpenDegree1) {
+      const progress = _.round(data.OpenDegree1 / 90, 2);
+      if (progress > 0) {
+        triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false, 3000, progress);
+      } else {
+        triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
+      }
+    }
     if (data.OpenDegree2) {
-      triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false);
-    } else {
-      triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], true);
+      const progress = _.round(data.OpenDegree2 / 90, 2);
+      if (progress > 0) {
+        triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false, 3000, progress);
+      } else {
+        triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], true);
+      }
     }
-
     // if (data.OpenDegree3) {
-    //   triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false);
-    // } else {
-    //   triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
+    //   const progress = _.round(data.OpenDegree3 / 90, 2);
+    //   if (progress > 0) {
+    //     triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false, 3000, progress);
+    //   } else {
+    //     triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
+    //   }
     // }
   }
 

src/views/vent/monitorManager/windowMonitor/components/windowSVG.vue

@@ -6,10 +6,9 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1980px"
+    width="1920px"
     height="1080"
-    style="position: relative; left: -30px; top: -180px"
-    viewBox="0 0 1920 1080"
+    viewBox="0 230 1920 1080"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">
@@ -1147,6 +1146,7 @@
 <script setup lang="ts">
   import { onMounted, defineExpose } from 'vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
+  import _ from 'lodash';
 
   // 元素信息（常量数据，使用Map）
   const elementInfo = new Map([
@@ -1635,9 +1635,10 @@
   /** 根据SVG的使用场景播放动画 */
   function animate(data: any, maxarea) {
     // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
-    const isOpen = parseFloat(data.forntArea) / parseFloat(maxarea);
-    if (isOpen > 0) {
-      triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false);
+    // 当前面积 / 最大面积 = 风窗开度 = 动画进度
+    const progress = _.round(Math.max(parseFloat(data.forntArea) / parseFloat(maxarea), 1), 2);
+    if (progress > 0) {
+      triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false, 3000, progress);
     } else {
       triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], true);
     }

src/views/vent/monitorManager/windrectMonitor/components/entryThree.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+    <a-spin :spinning="loading" />
+    <div id="window3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  defineProps<{ loading: boolean }>();
+</script>

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

@@ -1,8 +1,5 @@
 <template>
-  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
-    <a-spin :spinning="loading" />
-    <div id="window3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
-  </div>
+  <component ref="modelRef" :loading="loading" :is="modelComponent" />
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center row">
@@ -151,794 +148,804 @@
 </template>
 
 <script setup lang="ts">
-import DeviceEcharts from '../comment/DeviceEcharts.vue';
-import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import MonitorTable from '../comment/MonitorTable.vue';
-import ModalTable from './components/modalTable.vue';
-import HandleModal from './components/modal.vue';
-import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-import ResultTable from './components/resultTable.vue';
-import HistoryTable from '../comment/HistoryTable.vue';
-import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-import AlarmNumTable from '../comment/AlarmNumTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import { deviceControlApi } from '/@/api/vent/index';
-import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
-import { list, pathList, deviceList, testWind, exportXls, resetWind, getRegulation } from './windrect.api';
-import { message, Progress } from 'ant-design-vue';
-import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { setDivHeight } from '/@/utils/event';
-import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-import { useRouter } from 'vue-router';
-import { useModal } from '/@/components/Modal';
-import { useCamera } from '/@/hooks/system/useCamera';
-import { usePermission } from '/@/hooks/web/usePermission';
-import { useGlobSetting } from '/@/hooks/setting';
-import { device } from '../../gas/gasPipeNet/gasPipeNet.api';
-const { hasPermission } = usePermission();
-
-const globalConfig = inject('globalConfig');
-
-const { sysOrgCode } = useGlobSetting();
-const { currentRoute } = useRouter();
-
-const MonitorDataTable = ref();
-const scroll = reactive({
-  y: 230,
-});
-const modalType = ref('');
-const modalIsShow = ref(false);
-const modalTable = ref();
-const runNum = ref(5); //设备运行数量
-const criticalPathList = ref([]);
-const playerRef = ref();
-const activeKey = ref('1');
-const loading = ref(false);
-// 默认初始是第一行
-const selectRowIndex = ref(-1);
-// 监测数据
-const selectData = reactive({
-  deviceID: '',
-  deviceType: '',
-  strname: '',
-  dataDh: '-', //压差
-  dataDtestq: '-', //测试风量
-  // sourcePressure: '-', //气源压力
-  dataDequivalarea: '-',
-  netStatus: '0', //通信状态
-  fault: '气源压力超限',
-  sign: -1,
-  sensorRight: 0,
-  sensorMiddle: 1,
-  sensorLeft: 0,
-});
-const deviceType = ref('windrect');
-const deviceId = ref('');
-const chartsColumnArr = getTableHeaderColumns('windrect_chart');
-const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
-
-// const dataSource = computed(() => {
-//   const data = [...getRecordList()] || [];
-//   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
-//   addMonitorText(selectData);
-//   return data;
-// });
-
-const dataSource = ref([]);
-const [regModal, { openModal }] = useModal();
-
-const { getCamera, removeCamera } = useCamera();
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-  if (activeKeyVal == 1) {
-    nextTick(() => {
-      MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
-    });
-  }
-};
-
-// 设备数据
-const controlType = ref(1);
-//表单赋值
-const [registerModal, { setModalProps, closeModal }] = useModalInner();
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-// function getMonitor(flag?) {
-//   if (Object.prototype.toString.call(timer) === '[object Null]') {
-//     timer = setTimeout(
-//       () => {
-//         list({ devicetype: deviceType.value, pagetype: 'normal' }).then((res) => {
-//           if (res && res.msgTxt[0]) {
-//             // dataSource.value = res.msgTxt[0].datalist || [];
-//             const getData = res.msgTxt[0].datalist || [];
-//             getData.forEach((data) => {
-//               if (data.regulation) {
-//                 getRegulationList(data.regulation);
-//               }
-//             });
-//             dataSource.value = getData;
-//             if (dataSource.value.length > 0) {
-//               dataSource.value.forEach((data: any) => {
-//                 const readData = data.readData;
-//                 data = Object.assign(data, readData);
-//               });
-//               if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
-//                 // 初始打开页面
-//                 if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
-//                   MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
-//                 } else {
-//                   MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
-//                 }
-//               }
-//               const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-//               Object.assign(selectData, data);
-//               addMonitorText(selectData);
-
-//               palyAnimation(selectData);
-//             }
-//           }
-//           if (timer) {
-//             timer = null;
-//           }
-//           getMonitor();
-//         });
-//       },
-//       flag ? 0 : 1000
-//     );
-//   }
-// }
-// function getRegulationList(data) {
-//   getRegulation().then((res) => {
-//     if (res) {
-//       const regulation = res.find((item) => item.id == data);
-//       data.regulation = regulation;
-//       data.fmin = data.regulation.fmin;
-//       data.fmax = data.regulation.fmax;
-//     }
-//   });
-// }
-// 缓存
-let allRegulations: any[] | null = null;
-
-async function getMonitor(flag?: boolean) {
-  if (timer === null) {
-    timer = setTimeout(
-      async () => {
-        try {
-          // 1. 获取监控列表数据
-          const res = await list({
-            devicetype: deviceType.value,
-            pagetype: 'normal',
-          });
-          if (res?.msgTxt[0]) {
-            const rawData = res.msgTxt[0].datalist || [];
-            const processedData = [...rawData];
-
-            // 首次请求获取去所有regulation数据
-            if (allRegulations === null) {
-              const regulationRes = await getRegulation({
-                deviceKind: deviceType.value,
-              });
-              allRegulations = regulationRes || [];
-            }
-            // 根据id创建一个映射表
-            const regulationMap = new Map();
-            allRegulations.forEach((reg) => {
-              regulationMap.set(reg.id, reg);
+  import DeviceEcharts from '../comment/DeviceEcharts.vue';
+  import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import ModalTable from './components/modalTable.vue';
+  import HandleModal from './components/modal.vue';
+  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
+  import ResultTable from './components/resultTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import AlarmNumTable from '../comment/AlarmNumTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
+  import { list, pathList, deviceList, testWind, exportXls, resetWind, getRegulation } from './windrect.api';
+  import { message, Progress } from 'ant-design-vue';
+  import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { setDivHeight } from '/@/utils/event';
+  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+  import { useRouter } from 'vue-router';
+  import { useModal } from '/@/components/Modal';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { device } from '../../gas/gasPipeNet/gasPipeNet.api';
+  import { getModelComponent } from './windrect.data';
+  const { hasPermission } = usePermission();
+
+  const globalConfig = inject<any>('globalConfig');
+
+  const { sysOrgCode } = useGlobSetting();
+  const { currentRoute } = useRouter();
+  const modelRef = ref();
+  /** 模型对应的组件，根据实际情况分为二维三维 */
+  const modelComponent = getModelComponent(true, sysOrgCode);
+
+  const MonitorDataTable = ref();
+  const scroll = reactive({
+    y: 230,
+  });
+  const modalType = ref('');
+  const modalIsShow = ref(false);
+  const modalTable = ref();
+  const runNum = ref(5); //设备运行数量
+  const criticalPathList = ref([]);
+  const playerRef = ref();
+  const activeKey = ref('1');
+  const loading = ref(false);
+  // 默认初始是第一行
+  const selectRowIndex = ref(-1);
+  // 监测数据
+  const selectData = reactive({
+    deviceID: '',
+    deviceType: '',
+    strname: '',
+    dataDh: '-', //压差
+    dataDtestq: '-', //测试风量
+    // sourcePressure: '-', //气源压力
+    dataDequivalarea: '-',
+    netStatus: '0', //通信状态
+    fault: '气源压力超限',
+    sign: -1,
+    sensorRight: 0,
+    sensorMiddle: 1,
+    sensorLeft: 0,
+  });
+  const deviceType = ref('windrect');
+  const deviceId = ref('');
+  const chartsColumnArr = getTableHeaderColumns('windrect_chart');
+  const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
+
+  // const dataSource = computed(() => {
+  //   const data = [...getRecordList()] || [];
+  //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
+  //   addMonitorText(selectData);
+  //   return data;
+  // });
+
+  const dataSource = ref([]);
+  const [regModal, { openModal }] = useModal();
+
+  const { getCamera, removeCamera } = useCamera();
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+    if (activeKeyVal == 1) {
+      nextTick(() => {
+        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+      });
+    }
+  };
+
+  // 设备数据
+  const controlType = ref(1);
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  // function getMonitor(flag?) {
+  //   if (Object.prototype.toString.call(timer) === '[object Null]') {
+  //     timer = setTimeout(
+  //       () => {
+  //         list({ devicetype: deviceType.value, pagetype: 'normal' }).then((res) => {
+  //           if (res && res.msgTxt[0]) {
+  //             // dataSource.value = res.msgTxt[0].datalist || [];
+  //             const getData = res.msgTxt[0].datalist || [];
+  //             getData.forEach((data) => {
+  //               if (data.regulation) {
+  //                 getRegulationList(data.regulation);
+  //               }
+  //             });
+  //             dataSource.value = getData;
+  //             if (dataSource.value.length > 0) {
+  //               dataSource.value.forEach((data: any) => {
+  //                 const readData = data.readData;
+  //                 data = Object.assign(data, readData);
+  //               });
+  //               if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
+  //                 // 初始打开页面
+  //                 if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
+  //                   MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
+  //                 } else {
+  //                   MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
+  //                 }
+  //               }
+  //               const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+  //               Object.assign(selectData, data);
+  //               addMonitorText(selectData);
+
+  //               palyAnimation(selectData);
+  //             }
+  //           }
+  //           if (timer) {
+  //             timer = null;
+  //           }
+  //           getMonitor();
+  //         });
+  //       },
+  //       flag ? 0 : 1000
+  //     );
+  //   }
+  // }
+  // function getRegulationList(data) {
+  //   getRegulation().then((res) => {
+  //     if (res) {
+  //       const regulation = res.find((item) => item.id == data);
+  //       data.regulation = regulation;
+  //       data.fmin = data.regulation.fmin;
+  //       data.fmax = data.regulation.fmax;
+  //     }
+  //   });
+  // }
+  // 缓存
+  let allRegulations: any[] | null = null;
+
+  async function getMonitor(flag?: boolean) {
+    if (timer === null) {
+      timer = setTimeout(
+        async () => {
+          try {
+            // 1. 获取监控列表数据
+            const res = await list({
+              devicetype: deviceType.value,
+              pagetype: 'normal',
             });
-            // 对regulation字段进行替换
-            processedData.forEach((data) => {
-              if (data.regulation) {
-                const reg = regulationMap.get(data.regulation);
-                if (reg) {
-                  data.regulation = reg; // 替换为完整对象
-                  data.fmin = reg.fmin;
-                  data.fmax = reg.fmax;
+            if (res?.msgTxt[0]) {
+              const rawData = res.msgTxt[0].datalist || [];
+              const processedData = [...rawData];
+
+              // 首次请求获取去所有regulation数据
+              if (allRegulations === null) {
+                const regulationRes = await getRegulation({
+                  deviceKind: deviceType.value,
+                });
+                allRegulations = regulationRes || [];
+              }
+              // 根据id创建一个映射表
+              const regulationMap = new Map();
+              allRegulations.forEach((reg) => {
+                regulationMap.set(reg.id, reg);
+              });
+              // 对regulation字段进行替换
+              processedData.forEach((data) => {
+                if (data.regulation) {
+                  const reg = regulationMap.get(data.regulation);
+                  if (reg) {
+                    data.regulation = reg; // 替换为完整对象
+                    data.fmin = reg.fmin;
+                    data.fmax = reg.fmax;
+                  }
                 }
+              });
+              dataSource.value = processedData;
+              if (dataSource.value.length > 0) {
+                await processReadData(processedData);
+                await handleInitialSelection();
               }
-            });
-            dataSource.value = processedData;
-            if (dataSource.value.length > 0) {
-              await processReadData(processedData);
-              await handleInitialSelection();
             }
+          } catch (error) {
+            console.error('Error', error);
+          } finally {
+            timer = null;
+            getMonitor(flag);
           }
-        } catch (error) {
-          console.error('Error', error);
-        } finally {
-          timer = null;
-          getMonitor(false);
-        }
-      },
-      flag ? 0 : 1000
-    );
+        },
+        flag ? 0 : 1000
+      );
+    }
   }
-}
-
-// async function getRegulationList(regulationId: string, data: any) {
-//   const res = await getRegulation();
-//   if (res) {
-//     const regulation = res.find((item) => item.id === regulationId);
-//     if (regulation) {
-//       data.regulation = regulation;
-//       data.fmin = regulation.fmin;
-//       data.fmax = regulation.fmax;
-//     }
-//   }
-// }
-
-async function processReadData(data: any[]) {
-  const promises = data
-    .filter((item) => item.readData)
-    .map(async (item) => {
-      item.readData && Object.assign(item, item.readData);
-    });
-  await Promise.all(promises);
-}
-
-async function handleInitialSelection() {
-  if (dataSource.value.length > 0) {
-    const selectedData = toRaw(dataSource.value[selectRowIndex.value]);
-    Object.assign(selectData, selectedData);
-    addMonitorText(selectData);
-    palyAnimation(selectedData);
+
+  // async function getRegulationList(regulationId: string, data: any) {
+  //   const res = await getRegulation();
+  //   if (res) {
+  //     const regulation = res.find((item) => item.id === regulationId);
+  //     if (regulation) {
+  //       data.regulation = regulation;
+  //       data.fmin = regulation.fmin;
+  //       data.fmax = regulation.fmax;
+  //     }
+  //   }
+  // }
+
+  async function processReadData(data: any[]) {
+    const promises = data
+      .filter((item) => item.readData)
+      .map(async (item) => {
+        item.readData && Object.assign(item, item.readData);
+      });
+    await Promise.all(promises);
   }
-}
-let deviceRunState = '',
-  tanTouRunState = '';
-// 根据3个点位分别执行动画
-function palyAnimation(selectData) {
-  if (selectData.deviceType == 'windrect_normal') {
-    if (selectData['apparatusRun'] == 1) {
-      const flag = selectData.sign == '0' ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
-      if (flag) play(flag);
-    } else {
-      const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
-      if (flag) play(flag, true);
+
+  async function handleInitialSelection() {
+    if (dataSource.value.length > 0) {
+      const selectedData = toRaw(dataSource.value[selectRowIndex.value]);
+      Object.assign(selectData, selectedData);
+      addMonitorText(selectData);
+      palyAnimation(selectedData);
     }
   }
-  // 运行中是0，运行到达是1
-  if (selectData.deviceType == 'windrect_rect_single') {
-    if (selectData['apparatusRun'] == 1) {
-      // 镜头指向横杆
-      // if(!deviceRunState && !tanTouRunState)playCamera('start')
-      // 正在执行或是开始执行
-
-      //开始执行时，
-      // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束
-
-      // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
-      // 2. 探头左移play('left')
-      // 3. 探头右移play('right')
-      // 4. 横杆向中位移动，探头在右边
-      // 5. 探头移到中间play('middle')
-      // 6. 探头移到左边play('left')
-      // 7. 横杆向低位移动，探头在左边
-      // 8. 探头移到中间play('middle')
-      // 9. 探头右移play('right')
-      // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-      if (selectData['poleIncipient'] == 1) {
-        // 横杆在高位，开始执行 或是 执行结束
-        if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
-          // 1. 开始执行
-          deviceRunState = 'up';
-          tanTouRunState = 'middle';
-          play('up', true);
-          play('middle', true);
-        }
-        if (deviceRunState == 'up-m') {
-          play('up', true);
-          play('middle', true);
-          deviceRunState = '';
-          tanTouRunState = '';
-          playCamera('end');
-        }
-        // 初始已经在运行
+  let deviceRunState = '',
+    tanTouRunState = '';
+  // 根据3个点位分别执行动画
+  function palyAnimation(selectData) {
+    if (selectData.deviceType == 'windrect_normal') {
+      if (selectData['apparatusRun'] == 1) {
+        const flag = selectData.sign == '0' ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
+        if (flag) play(flag);
+      } else {
+        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
+        if (flag) play(flag, true);
+      }
+    }
+    // 运行中是0，运行到达是1
+    if (selectData.deviceType == 'windrect_rect_single') {
+      if (selectData['apparatusRun'] == 1) {
+        // 镜头指向横杆
+        // if(!deviceRunState && !tanTouRunState)playCamera('start')
+        // 正在执行或是开始执行
+
+        //开始执行时，
+        // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束
+
+        // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
+        // 2. 探头左移play('left')
+        // 3. 探头右移play('right')
+        // 4. 横杆向中位移动，探头在右边
+        // 5. 探头移到中间play('middle')
+        // 6. 探头移到左边play('left')
+        // 7. 横杆向低位移动，探头在左边
+        // 8. 探头移到中间play('middle')
+        // 9. 探头右移play('right')
+        // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
+        if (selectData['poleIncipient'] == 1) {
+          // 横杆在高位，开始执行 或是 执行结束
+          if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
+            // 1. 开始执行
+            deviceRunState = 'up';
+            tanTouRunState = 'middle';
+            play('up', true);
+            play('middle', true);
+          }
+          if (deviceRunState == 'up-m') {
+            play('up', true);
+            play('middle', true);
+            deviceRunState = '';
+            tanTouRunState = '';
+            playCamera('end');
+          }
+          // 初始已经在运行
 
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //2.探头左移play('left')
-          if (tanTouRunState == 'middle') {
-            tanTouRunState = 'left-m';
-            play('left');
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //2.探头左移play('left')
+            if (tanTouRunState == 'middle') {
+              tanTouRunState = 'left-m';
+              play('left');
+            }
+            //3. 探头右移play('right')
+            if (tanTouRunState == 'left') {
+              tanTouRunState = 'right-m';
+              play('right');
+            }
           }
-          //3. 探头右移play('right')
-          if (tanTouRunState == 'left') {
-            tanTouRunState = 'right-m';
-            play('right');
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
+            if (!tanTouRunState || tanTouRunState == 'left-m') {
+              play('left', true);
+            }
           }
-        }
-        if (selectData.sensorLeft == 1) {
-          tanTouRunState = 'left';
-          if (!tanTouRunState || tanTouRunState == 'left-m') {
-            play('left', true);
+          if (selectData.sensorRight == 1) {
+            tanTouRunState = 'right';
+            if (!tanTouRunState || tanTouRunState == 'right-m') {
+              play('right', true);
+            }
           }
-        }
-        if (selectData.sensorRight == 1) {
-          tanTouRunState = 'right';
-          if (!tanTouRunState || tanTouRunState == 'right-m') {
+        } else if (selectData['poleMiddle'] == 1) {
+          if (deviceRunState == 'center-m') {
+            play('center', true);
+            deviceRunState = 'center';
+            tanTouRunState = 'right';
+            play('right', true);
+          }
+          if (!deviceRunState) {
+            deviceRunState = 'center';
+            play('center', true);
+          }
+          if (!tanTouRunState) {
             play('right', true);
           }
-        }
-      } else if (selectData['poleMiddle'] == 1) {
-        if (deviceRunState == 'center-m') {
-          play('center', true);
-          deviceRunState = 'center';
-          tanTouRunState = 'right';
-          play('right', true);
-        }
-        if (!deviceRunState) {
-          deviceRunState = 'center';
-          play('center', true);
-        }
-        if (!tanTouRunState) {
-          play('right', true);
-        }
 
-        // 横杆在中位
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //5. 探头移到中间play('middle')
-          if (tanTouRunState == 'right') {
-            tanTouRunState = 'middle-m';
-            play('middle');
+          // 横杆在中位
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //5. 探头移到中间play('middle')
+            if (tanTouRunState == 'right') {
+              tanTouRunState = 'middle-m';
+              play('middle');
+            }
+            //6. 探头移到左边play('left')
+            if (tanTouRunState == 'middle') {
+              tanTouRunState = 'left-m';
+              play('left');
+            }
           }
-          //6. 探头移到左边play('left')
-          if (tanTouRunState == 'middle') {
-            tanTouRunState = 'left-m';
-            play('left');
+          if (selectData.sensorMiddle == 1) {
+            tanTouRunState = 'middle';
+            if (!tanTouRunState || tanTouRunState == 'middle-m') {
+              play('middle', true);
+            }
           }
-        }
-        if (selectData.sensorMiddle == 1) {
-          tanTouRunState = 'middle';
-          if (!tanTouRunState || tanTouRunState == 'middle-m') {
-            play('middle', true);
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
+            if (!tanTouRunState || tanTouRunState == 'left-m') {
+              play('left', true);
+            }
           }
-        }
-        if (selectData.sensorLeft == 1) {
-          tanTouRunState = 'left';
-          if (!tanTouRunState || tanTouRunState == 'left-m') {
+        } else if (selectData['poleNether'] == 1) {
+          if (deviceRunState == 'down-m') {
+            play('down', true);
+            deviceRunState = 'down';
+            tanTouRunState = 'left';
             play('left', true);
           }
-        }
-      } else if (selectData['poleNether'] == 1) {
-        if (deviceRunState == 'down-m') {
-          play('down', true);
-          deviceRunState = 'down';
-          tanTouRunState = 'left';
-          play('left', true);
-        }
-        if (!deviceRunState) {
-          play('down', true);
-          deviceRunState = 'down';
-        }
-        if (!tanTouRunState) {
-          play('left', true);
-        }
-        // 横杆在低位
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //8. 探头移到中间play('middle')
-          if (tanTouRunState == 'left') {
-            tanTouRunState = 'left-middle-m';
-            play('middle');
+          if (!deviceRunState) {
+            play('down', true);
+            deviceRunState = 'down';
           }
-          //9. 探头右移play('right')
-          if (tanTouRunState == 'middle1') {
-            tanTouRunState = 'right-m';
-            play('right');
+          if (!tanTouRunState) {
+            play('left', true);
           }
-          // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-          if (tanTouRunState == 'right') {
-            tanTouRunState = 'right-middle-m';
-            play('middle');
+          // 横杆在低位
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //8. 探头移到中间play('middle')
+            if (tanTouRunState == 'left') {
+              tanTouRunState = 'left-middle-m';
+              play('middle');
+            }
+            //9. 探头右移play('right')
+            if (tanTouRunState == 'middle1') {
+              tanTouRunState = 'right-m';
+              play('right');
+            }
+            // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
+            if (tanTouRunState == 'right') {
+              tanTouRunState = 'right-middle-m';
+              play('middle');
+            }
           }
-        }
 
-        if (selectData.sensorMiddle == 1) {
-          if (tanTouRunState == 'left-middle-m') tanTouRunState = 'middle1';
-          if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2';
+          if (selectData.sensorMiddle == 1) {
+            if (tanTouRunState == 'left-middle-m') tanTouRunState = 'middle1';
+            if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2';
 
-          if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
-            play('middle', true);
+            if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
+              play('middle', true);
+            }
           }
-        }
 
-        if (selectData.sensorRight == 1) {
-          tanTouRunState = 'right';
-          if (!tanTouRunState || tanTouRunState == 'right-m') {
-            play('right', true);
+          if (selectData.sensorRight == 1) {
+            tanTouRunState = 'right';
+            if (!tanTouRunState || tanTouRunState == 'right-m') {
+              play('right', true);
+            }
+          }
+        } else {
+          // 横杆正在运行
+          if (deviceRunState == 'up') {
+            deviceRunState = 'center-m';
+            play('center');
+          }
+          if (deviceRunState == 'center') {
+            deviceRunState = 'down-m';
+            play('down');
+          }
+          if (deviceRunState == 'down') {
+            deviceRunState = 'up-m';
+            play('up');
           }
         }
-      } else {
-        // 横杆正在运行
-        if (deviceRunState == 'up') {
-          deviceRunState = 'center-m';
-          play('center');
-        }
-        if (deviceRunState == 'center') {
-          deviceRunState = 'down-m';
-          play('down');
-        }
-        if (deviceRunState == 'down') {
-          deviceRunState = 'up-m';
-          play('up');
-        }
-      }
 
-      // //正在执行时
+        // //正在执行时
 
-      // // 判断上中下是否都为0
-      // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
-      //   // 判断是否有前一个状态值，有的话执行
-      //   //没有前一个状态
+        // // 判断上中下是否都为0
+        // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
+        //   // 判断是否有前一个状态值，有的话执行
+        //   //没有前一个状态
 
-      //   //有前一个状态
+        //   //有前一个状态
 
-      //   // 横杆前状态在上位时，横杆中位移动，探头在右边
+        //   // 横杆前状态在上位时，横杆中位移动，探头在右边
 
-      //   // 横杆前状态在中位时，横杆下位移动，探头在左边
+        //   // 横杆前状态在中位时，横杆下位移动，探头在左边
 
-      //   // 横杆前状态在下位时，横杆上位移动，探头在中间
+        //   // 横杆前状态在下位时，横杆上位移动，探头在中间
 
-      // }else{
-      //   // 判断当前动画停在固定位置
-      //   if(selectData['poleIncipient'] == 1) {
-      //     // 滑杆停在上面，探头在中间
+        // }else{
+        //   // 判断当前动画停在固定位置
+        //   if(selectData['poleIncipient'] == 1) {
+        //     // 滑杆停在上面，探头在中间
 
-      //   }else if (selectData['poleMiddle'] == 1) {
-      //     // 滑杆停在中间面，初始探头在右边
+        //   }else if (selectData['poleMiddle'] == 1) {
+        //     // 滑杆停在中间面，初始探头在右边
 
-      //   } else if (selectData['poleNether'] == 1) {
-      //     // 滑杆停在下面，初始探头在左边
+        //   } else if (selectData['poleNether'] == 1) {
+        //     // 滑杆停在下面，初始探头在左边
 
-      //   }
-      // }
-    } else {
-      // if(selectData['poleIncipient'] == 1){
-      //   deviceRunState = ''
-      //   tanTouRunState = ''
-      // }
+        //   }
+        // }
+      } else {
+        // if(selectData['poleIncipient'] == 1){
+        //   deviceRunState = ''
+        //   tanTouRunState = ''
+        // }
+      }
+    }
+
+    if (selectData.deviceType == 'windrect_rect') {
+      if (selectData['apparatusRun'] == 1) {
+        const flag = selectData.sign == '0' ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null;
+        if (flag) play(flag);
+      } else {
+        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == '0' ? 'up' : null;
+        if (flag) play(flag, true);
+      }
     }
-  }
 
-  if (selectData.deviceType == 'windrect_rect') {
-    if (selectData['apparatusRun'] == 1) {
-      const flag = selectData.sign == '0' ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null;
-      if (flag) play(flag);
-    } else {
-      const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == '0' ? 'up' : null;
-      if (flag) play(flag, true);
+    if (selectData.deviceType == 'windrect_ds') {
+      // 添加svg动画
+      modelRef.value?.animate?.();
+      if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
+        if (!deviceRunState) {
+          deviceRunState = 'start';
+          play('down');
+        }
+      } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
+        deviceRunState = '';
+        play('up');
+      }
     }
   }
 
-  if (selectData.deviceType == 'windrect_ds') {
-    if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
-      if (!deviceRunState) {
-        deviceRunState = 'start';
+  // 自测动画方法
+  function testPlay(flag) {
+    if (selectData.deviceType == 'windrect_rect') {
+      setTimeout(() => {
+        play('center');
+      }, 0);
+      setTimeout(() => {
         play('down');
+      }, 4000);
+      setTimeout(() => {
+        play('up');
+      }, 10000);
+    }
+    if (selectData.deviceType == 'windrect_normal') {
+      setTimeout(() => {
+        play('up');
+      }, 0);
+      setTimeout(() => {
+        play('center');
+      }, 10000);
+      setTimeout(() => {
+        play('down');
+      }, 18000);
+      setTimeout(() => {
+        play('up');
+      }, 21000);
+    }
+    if (selectData.deviceType == 'windrect_ds') {
+      play('moni');
+    }
+  }
+
+  function clearPlay() {
+    modalType.value = 'autoClear';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
+  }
+
+  function startRun() {
+    modalType.value = 'sing';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
+  }
+  // 切换检测数据
+  async function getSelectRow(selectRow, index) {
+    if (selectRow) {
+      loading.value = true;
+      selectRowIndex.value = index;
+      Object.assign(selectData, selectRow);
+      let type = '';
+      if (selectRow['modelType']) {
+        type = selectRow['modelType'];
+        // debugger;
+      } else {
+        if (selectRow.deviceType.startsWith('windrect_rect')) {
+          type = 'lmWindRect';
+        }
+        if (selectRow.deviceType.startsWith('windrect_normal')) {
+          type = 'zdWindRect';
+        }
+        if (selectRow.deviceType.startsWith('windrect_rect_single')) {
+          type = 'lmWindSide';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds')) {
+          type = 'dsWindRect_move';
+          // type = 'duisheFixed';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_four')) {
+          //windrect_ds_two
+          type = 'dsWindRect_four';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_two')) {
+          type = 'dsWindRect_two';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
+          type = 'duisheFixed';
+        }
+        if (
+          selectRow.deviceType.startsWith('windrect_dd') ||
+          selectRow.deviceType == 'windrect_safety' ||
+          selectRow.deviceType == 'windrect_sensor'
+        ) {
+          type = 'ddWindSide';
+        }
       }
-    } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
+
+      // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
+      await setModelType(type);
+      loading.value = false;
       deviceRunState = '';
-      play('up');
+      tanTouRunState = '';
+      await getCamera(selectRow.deviceID, playerRef.value);
     }
   }
-}
-
-// 自测动画方法
-function testPlay(flag) {
-  if (selectData.deviceType == 'windrect_rect') {
-    setTimeout(() => {
-      play('center');
-    }, 0);
-    setTimeout(() => {
-      play('down');
-    }, 4000);
-    setTimeout(() => {
-      play('up');
-    }, 10000);
-  }
-  if (selectData.deviceType == 'windrect_normal') {
-    setTimeout(() => {
-      play('up');
-    }, 0);
-    setTimeout(() => {
-      play('center');
-    }, 10000);
-    setTimeout(() => {
-      play('down');
-    }, 18000);
-    setTimeout(() => {
-      play('up');
-    }, 21000);
+
+  /* 一键测风 */
+  function handleOk() {
+    modalType.value = 'multiple';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
   }
-  if (selectData.deviceType == 'windrect_ds') {
-    play('moni');
+
+  /* 打开一键测风弹窗 */
+  function openModel() {
+    setModalProps({ visible: true });
   }
-}
 
-function clearPlay() {
-  modalType.value = 'autoClear';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  function resetHandle() {
+    modalType.value = 'resetWind';
+    modalIsShow.value = true;
   }
-}
 
-function startRun() {
-  modalType.value = 'sing';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  function exportExcel(id) {
+    exportXls({ testid: id });
   }
-}
-// 切换检测数据
-async function getSelectRow(selectRow, index) {
-  if (selectRow) {
-    loading.value = true;
-    selectRowIndex.value = index;
-    Object.assign(selectData, selectRow);
-    let type = '';
-    if (selectRow['modelType']) {
-      type = selectRow['modelType'];
-      // debugger;
-    } else {
-      if (selectRow.deviceType.startsWith('windrect_rect')) {
-        type = 'lmWindRect';
-      }
-      if (selectRow.deviceType.startsWith('windrect_normal')) {
-        type = 'zdWindRect';
-      }
-      if (selectRow.deviceType.startsWith('windrect_rect_single')) {
-        type = 'lmWindSide';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds')) {
-        type = 'dsWindRect_move';
-        // type = 'duisheFixed';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_four')) {
-        //windrect_ds_two
-        type = 'dsWindRect_four';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_two')) {
-        type = 'dsWindRect_two';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
-        type = 'duisheFixed';
-      }
-      if (selectRow.deviceType.startsWith('windrect_dd') || selectRow.deviceType == 'windrect_safety' || selectRow.deviceType == 'windrect_sensor') {
-        type = 'ddWindSide';
-      }
-    }
 
-    // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
-    await setModelType(type);
-    loading.value = false;
-    deviceRunState = '';
-    tanTouRunState = '';
-    await getCamera(selectRow.deviceID, playerRef.value);
+  /* 关闭一键测风弹窗 */
+  function handleCancel() {
+    setModalProps({ visible: false });
+    modalTable.value.clearSelectedRowKeys();
   }
-}
-
-/* 一键测风 */
-function handleOk() {
-  modalType.value = 'multiple';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+
+  /* 关闭一键测风控制*/
+  function handleCancelControl() {
+    modalIsShow.value = false;
   }
-}
-
-/* 打开一键测风弹窗 */
-function openModel() {
-  setModalProps({ visible: true });
-}
-
-function resetHandle() {
-  modalType.value = 'resetWind';
-  modalIsShow.value = true;
-}
-
-function exportExcel(id) {
-  exportXls({ testid: id });
-}
-
-/* 关闭一键测风弹窗 */
-function handleCancel() {
-  setModalProps({ visible: false });
-  modalTable.value.clearSelectedRowKeys();
-}
-
-/* 关闭一键测风控制*/
-function handleCancelControl() {
-  modalIsShow.value = false;
-}
-
-function controlDevice(passWord, type) {
-  try {
-    if (type == 'sing') {
-      testWind({
-        ids: [selectData.deviceID],
-        maxnum: 1000,
-        windnum: 1,
-        password: passWord || globalConfig?.simulatedPassword,
-      }).then((res) => {
-        if (res && res.success === false) {
-          message.error(res.message);
-        } else {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+
+  function controlDevice(passWord, type) {
+    try {
+      if (type == 'sing') {
+        testWind({
+          ids: [selectData.deviceID],
+          maxnum: 1000,
+          windnum: 1,
+          password: passWord || globalConfig?.simulatedPassword,
+        }).then((res) => {
+          if (res && res.success === false) {
+            message.error(res.message);
           } else {
-            message.success('指令已下发成功！');
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           }
-        }
-        modalIsShow.value = false;
-      });
-    } else if (type == 'multiple') {
-      const ids = toRaw(modalTable.value.selectedRowKeys);
-      testWind({
-        ids: ids,
-        maxnum: 1000,
-        windnum: modalTable.value.selectedRowKeys.length,
-        password: passWord || globalConfig?.simulatedPassword,
-      }).then((res) => {
-        if (res && res.success === false) {
-          message.error(res.message);
-        } else {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+          modalIsShow.value = false;
+        });
+      } else if (type == 'multiple') {
+        const ids = toRaw(modalTable.value.selectedRowKeys);
+        testWind({
+          ids: ids,
+          maxnum: 1000,
+          windnum: modalTable.value.selectedRowKeys.length,
+          password: passWord || globalConfig?.simulatedPassword,
+        }).then((res) => {
+          if (res && res.success === false) {
+            message.error(res.message);
           } else {
-            message.success('指令已下发成功！');
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           }
-        }
-        modalIsShow.value = false;
-        setModalProps({ visible: false });
-        modalTable.value.clearSelectedRowKeys();
-      });
-    } else if (type == 'autoClear') {
-      const data = {
-        deviceid: selectData.deviceID,
-        devicetype: selectData.deviceType,
-        paramcode: 'autoClear',
-        value: null,
-        password: passWord || globalConfig?.simulatedPassword,
-        masterComputer: selectData.masterComputer,
-      };
-      deviceControlApi(data).then((res) => {
-        // 模拟时开启
-        if (res.success) {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+          modalIsShow.value = false;
+          setModalProps({ visible: false });
+          modalTable.value.clearSelectedRowKeys();
+        });
+      } else if (type == 'autoClear') {
+        const data = {
+          deviceid: selectData.deviceID,
+          devicetype: selectData.deviceType,
+          paramcode: 'autoClear',
+          value: null,
+          password: passWord || globalConfig?.simulatedPassword,
+          masterComputer: selectData.masterComputer,
+        };
+        deviceControlApi(data).then((res) => {
+          // 模拟时开启
+          if (res.success) {
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           } else {
-            message.success('指令已下发成功！');
+            message.error(res.message);
           }
-        } else {
-          message.error(res.message);
-        }
+          modalIsShow.value = false;
+        });
+      } else if (type == 'resetWind') {
+        resetWind({}).then((res: any) => {
+          message.info(res);
+        });
         modalIsShow.value = false;
-      });
-    } else if (type == 'resetWind') {
-      resetWind({}).then((res: any) => {
-        message.info(res);
-      });
+      }
+    } catch (error) {
+      message.error('测风失败，请联系管理员。。。');
       modalIsShow.value = false;
     }
-  } catch (error) {
-    message.error('测风失败，请联系管理员。。。');
-    modalIsShow.value = false;
   }
-}
 
-/** 避灾路线上的测风装置 */
-async function getPathList() {
-  const pathArr = await pathList({});
-  criticalPathList.value = pathArr.records.filter((item) => {
-    return item.strsystype == 3;
-  });
-}
-
-/* 根据路线选择测风装置 */
-function selectCriticalPath(pathId) {
-  deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
-    const ids: string[] = [];
-    res.records.forEach((item) => {
-      ids.push(item.id);
+  /** 避灾路线上的测风装置 */
+  async function getPathList() {
+    const pathArr = await pathList({});
+    criticalPathList.value = pathArr.records.filter((item) => {
+      return item.strsystype == 3;
     });
-    if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
-  });
-}
+  }
 
-function deviceEdit(e: Event, type: string, record) {
-  e.stopPropagation();
-  openModal(true, {
-    type,
-    deviceId: record['deviceID'],
+  /* 根据路线选择测风装置 */
+  function selectCriticalPath(pathId) {
+    deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
+      const ids: string[] = [];
+      res.records.forEach((item) => {
+        ids.push(item.id);
+      });
+      if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
+    });
+  }
+
+  function deviceEdit(e: Event, type: string, record) {
+    e.stopPropagation();
+    openModal(true, {
+      type,
+      deviceId: record['deviceID'],
+    });
+  }
+
+  onBeforeMount(() => {
+    getPathList();
   });
-}
-
-onBeforeMount(() => {
-  getPathList();
-});
-
-onMounted(async () => {
-  // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
-  // loading.value = true;
-  // mountedThree(playerDom).then(async () => {
-  //   getMonitor(true);
-  //   // loading.value = false;
-  // });
-  const { query } = unref(currentRoute);
-  if (query['deviceType']) deviceType.value = query['deviceType'] as string;
-  loading.value = true;
-  mountedThree(null).then(async () => {
-    await getMonitor(true);
-    loading.value = false;
+
+  onMounted(async () => {
+    // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
+    // loading.value = true;
+    // mountedThree(playerDom).then(async () => {
+    //   getMonitor(true);
+    //   // loading.value = false;
+    // });
+    const { query } = unref(currentRoute);
+    if (query['deviceType']) deviceType.value = query['deviceType'] as string;
+    loading.value = true;
+    mountedThree(null).then(async () => {
+      await getMonitor(true);
+      loading.value = false;
+    });
   });
-});
 
-onUnmounted(() => {
-  removeCamera();
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-  destroy();
-});
+  onUnmounted(() => {
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    destroy();
+  });
 </script>
 <style scoped lang="less">
-@import '/@/design/theme.less';
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-}
-.scene-box {
-  .bottom-tabs-box {
-    height: 350px;
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
   }
-}
-.head-line {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  .button-box {
-    position: relative;
-    padding: 5px;
-    border: 1px transparent solid;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    height: 34px;
-    border: 1px solid var(--vent-base-border);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--vent-font-color);
-    padding: 0 15px;
-    cursor: pointer;
-    pointer-events: auto;
-    &:hover {
-      background: var(--vent-device-manager-control-btn-hover);
+  .scene-box {
+    .bottom-tabs-box {
+      height: 350px;
     }
-    &::before {
-      width: calc(100% - 6px);
-      height: 26px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit; /*important*/
-      background: var(--vent-device-manager-control-btn);
+  }
+  .head-line {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .button-box {
+      position: relative;
+      padding: 5px;
+      border: 1px transparent solid;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      height: 34px;
+      border: 1px solid var(--vent-base-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--vent-font-color);
+      padding: 0 15px;
+      cursor: pointer;
+      pointer-events: auto;
+      &:hover {
+        background: var(--vent-device-manager-control-btn-hover);
+      }
+      &::before {
+        width: calc(100% - 6px);
+        height: 26px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit; /*important*/
+        background: var(--vent-device-manager-control-btn);
+      }
     }
   }
-}
-:deep(.@{ventSpace}-picker-datetime-panel) {
-  height: 200px !important;
-  overflow-y: auto !important;
-}
+  :deep(.@{ventSpace}-picker-datetime-panel) {
+    height: 200px !important;
+    overflow-y: auto !important;
+  }
 </style>

src/views/vent/monitorManager/windrectMonitor/windrect.data.ts

@@ -2,6 +2,7 @@ import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { rules } from '/@/utils/helper/validator';
 import { reactive } from 'vue';
+import { defineAsyncComponent } from 'vue';
 
 export const resultColumns: BasicColumn[] = [
   // {
@@ -427,3 +428,16 @@ export const option = {
     rotate: 40,
   },
 };
+export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: string) {
+  // @ts-ignore
+  return defineAsyncComponent(() => {
+    if (!is2DModel) return import('./components/entryThree.vue');
+    switch (sysOrgCode) {
+      // case '000000':
+      // return import('./components/scanSVG.vue');
+      default:
+        // return import('./components/fixedSVG.vue');
+        return import('./components/scanSVG.vue');
+    }
+  });
+}