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

src/layouts/default/header/components/weatherBroadcast.vue

@@ -7,7 +7,7 @@
     </a-badge> -->
       <div style="display: flex; flex-direction: row" class="btn-header">
         <img :src="parseWeatherData(weatherObj.text)" class="weather-icon" />
-        <span class="unit">{{ weatherObj.pressure }}hPa</span>
+        <span class="unit">{{ weatherObj.pressure }}&nbsp;hPa</span>
         <FileSearchOutlined style="font-size: 18px; color: #fff; line-height: 50px" />
       </div>
     </div>

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

@@ -96,6 +96,7 @@ export interface ModuleData {
       /** 分区大小 */
       basis: string;
       overflow?: boolean;
+      pageType?: string;
     }[];
   };
   board?: ModuleDataBoard[];

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

@@ -0,0 +1,297 @@
+<template>
+  <div class="dane-bd" :style="style">
+    <div v-if="moduleName" class="dane-title" :class="daneClass">
+      <div class="common-navL" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo"
+        ><span class="title">{{ moduleName }}</span></div
+      >
+
+      <div class="common-navR">
+        <!-- 下拉框 -->
+        <div class="common-navR-select" v-if="header.show && header.selector.show">
+          <a-select
+            style="width: 140px"
+            size="small"
+            placeholder="请选择"
+            v-model:value="selectedDeviceID"
+            allowClear
+            :options="options"
+            @change="selectHandler"
+          />
+        </div>
+        <div v-if="header.show && header.slot.show">
+          {{ getFormattedText(selectedDevice, header.slot.value) }}
+        </div>
+        <!-- 日期组件 -->
+        <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
+          <a-range-picker
+            size="small"
+            style="width: 140px"
+            :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm"
+            :placeholder="['开始时间', '结束时间']"
+            @change="onChange"
+            @ok="onOk"
+          />
+        </div> -->
+        <!-- 开关组件 -->
+        <!-- <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
+            <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
+            <a-switch v-model:checked="checked" />
+            <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
+          </div> -->
+      </div>
+    </div>
+    <div class="dane-content">
+      <slot>
+        <Content style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Content from './content.vue';
+import { defineProps, defineEmits, computed, watch } from 'vue';
+import { useInitModule } from '../hooks/useInit';
+import { getFormattedText } from '../hooks/helper';
+import { openWindow } from '/@/utils';
+// import { ModuleProps } from '../types';
+
+const props = defineProps<{
+  /** 配置的详细模块信息 */
+  moduleData: any;
+  /** 配置的详细样式信息 */
+  showStyle: any;
+  /** 该模块配置中的设备标识符 */
+  deviceType: string;
+  /** api返回的数据 */
+  data: any;
+  moduleName: string;
+  visible: boolean;
+}>();
+const emit = defineEmits(['close', 'select']);
+
+const { header } = props.moduleData;
+
+const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  return size + position;
+});
+
+// 根据配置里的定位判断应该使用哪个module组件
+const daneClass = computed(() => {
+  const headerPosition = props.showStyle.headerPosition;
+  const size = props.showStyle.size;
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  // if (position.includes('bottom') || parseInt(width) > 800) {
+  //   return 'dane-w';
+  // }
+  // if (position.includes('left')) {
+  //   return 'dane-m';
+  // }
+  // if (position.includes('right')) {
+  //   return 'dane-m';
+  // }
+  // return 'dane-m';
+  if (headerPosition === 'leftTop') {
+    return 'left-1';
+  }
+  if (headerPosition === 'leftCenter') {
+    return 'left-2';
+  }
+  if (headerPosition === 'leftBottom') {
+    return 'left-3';
+  }
+  if (headerPosition === 'rightTop') {
+    return 'right-1';
+  }
+  if (headerPosition === 'rightCenter') {
+    return 'right-1';
+  }
+  if (headerPosition === 'rightBottom') {
+    return 'right-3';
+  }
+  if (headerPosition === 'centerBottom') {
+    return 'center-Bottom';
+  }
+  return 'dane-m'; // 默认返回顶部模块
+});
+
+//切换时间选项
+// function onChange(value, dateString) {
+//   console.log('Selected Time: ', value);
+//   console.log('Formatted Selected Time: ', dateString);
+// }
+// function onOk(val) {
+//   console.log('onOk: ', val);
+// }
+
+//下拉框选项切换
+function selectHandler(id) {
+  selectedDeviceID.value = id;
+  emit('select', selectedDevice);
+}
+
+function redirectTo() {
+  const { to } = props.moduleData;
+  if (!to) return;
+  openWindow(to);
+}
+
+watch(
+  () => props.data,
+  (d) => {
+    init(d);
+    selectedDeviceID.value = options.value[0]?.value;
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
+<style scoped lang="less">
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .dane-bd {
+    --image-Left1: url('@/assets/images/vent/homeNew/left1.png');
+    --image-Left2: url('@/assets/images/vent/homeNew/left2.png');
+    --image-Left3: url('@/assets/images/vent/homeNew/left3.png');
+    --image-Right1: url('@/assets/images/vent/homeNew/right1.png');
+    --image-Right2: url('@/assets/images/vent/homeNew/right2.png');
+    --image-Right3: url('@/assets/images/vent/homeNew/right3.png');
+    --image-CenterBottom: url('@/assets/images/vent/homeNew/center-Bottom.png');
+  }
+}
+
+.dane-bd {
+  --image-Left1: url('@/assets/images/vent/homeNew/left1.png');
+  --image-Left2: url('@/assets/images/vent/homeNew/left2.png');
+  --image-Left3: url('@/assets/images/vent/homeNew/left3.png');
+  --image-Right1: url('@/assets/images/vent/homeNew/right1.png');
+  --image-Right2: url('@/assets/images/vent/homeNew/right2.png');
+  --image-Right3: url('@/assets/images/vent/homeNew/right3.png');
+  --image-CenterBottom: url('@/assets/images/vent/homeNew/center-Bottom.png');
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+
+  .dane-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 40px;
+    padding: 0 40px 15px 20px;
+
+    .common-navL {
+      display: flex;
+      position: relative;
+      align-items: center;
+      color: #fff;
+      font-size: 14px;
+    }
+
+    .common-navR {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+
+  .dane-content {
+    height: calc(100% - 38px);
+    box-sizing: border-box;
+    border-top: none;
+  }
+}
+.left-1 {
+  background: var(--image-Left1) no-repeat;
+  background-size: 100% 100%;
+}
+.left-2 {
+  background: var(--image-Left2) no-repeat;
+  background-size: 100% 100%;
+}
+.left-3 {
+  background: var(--image-Left3) no-repeat;
+  background-size: 100% 100%;
+}
+.right-1 {
+  background: var(--image-Right1) no-repeat;
+  background-size: 100% 100%;
+}
+.right-2 {
+  background: var(--image-Right2) no-repeat;
+  background-size: 100% 100%;
+}
+.right-3 {
+  background: var(--image-Right3) no-repeat;
+  background-size: 100% 100%;
+}
+
+.center-Bottom {
+  background: var(--image-CenterBottom) no-repeat;
+  background-size: 100% 100%;
+}
+:deep(.zxm-select-selector) {
+  height: 22px !important;
+  border: none !important;
+  // background-color: rgb(15 64 88) !important;
+  background-color: transparent !important;
+  color: #8087a1 !important;
+}
+
+:deep(.zxm-select-selection-placeholder) {
+  color: #8087a1 !important;
+}
+
+:deep(.zxm-select-arrow) {
+  color: #8087a1 !important;
+}
+
+:deep(.zxm-picker) {
+  border: none !important;
+  background-color: rgb(15 64 88) !important;
+  box-shadow: none;
+  color: #a1dff8 !important;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #a1dff8 !important;
+  text-align: center !important;
+}
+
+:deep(.zxm-picker-separator) {
+  color: #a1dff8 !important;
+}
+
+:deep(.zxm-picker-active-bar) {
+  display: none !important;
+}
+
+:deep(.zxm-picker-suffix) {
+  color: #a1dff8 !important;
+}
+
+:deep(.zxm-switch) {
+  min-width: 48px !important;
+}
+
+:deep(.zxm-switch-checked) {
+  background-color: rgb(15 64 89) !important;
+}
+
+:deep(.zxm-switch-handle::before) {
+  background-color: rgb(33 179 247) !important;
+}
+
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
+</style>

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

@@ -0,0 +1,287 @@
+<template>
+  <div class="dane-bd" :style="style">
+    <div v-if="moduleName" class="dane-title" :class="daneClass">
+      <div class="common-navL" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo"
+        ><span class="title">{{ moduleName }}</span></div
+      >
+
+      <div class="common-navR">
+        <!-- 下拉框 -->
+        <div class="common-navR-select" v-if="header.show && header.selector.show">
+          <a-select
+            style="width: 140px"
+            size="small"
+            placeholder="请选择"
+            v-model:value="selectedDeviceID"
+            allowClear
+            :options="options"
+            @change="selectHandler"
+          />
+        </div>
+        <div v-if="header.show && header.slot.show">
+          {{ getFormattedText(selectedDevice, header.slot.value) }}
+        </div>
+        <!-- 日期组件 -->
+        <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
+          <a-range-picker
+            size="small"
+            style="width: 140px"
+            :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm"
+            :placeholder="['开始时间', '结束时间']"
+            @change="onChange"
+            @ok="onOk"
+          />
+        </div> -->
+        <!-- 开关组件 -->
+        <!-- <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
+            <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
+            <a-switch v-model:checked="checked" />
+            <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
+          </div> -->
+      </div>
+    </div>
+    <div class="dane-content">
+      <slot>
+        <Content style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Content from './content.vue';
+import { defineProps, defineEmits, computed, watch } from 'vue';
+import { useInitModule } from '../hooks/useInit';
+import { getFormattedText } from '../hooks/helper';
+import { openWindow } from '/@/utils';
+// import { ModuleProps } from '../types';
+
+const props = defineProps<{
+  /** 配置的详细模块信息 */
+  moduleData: any;
+  /** 配置的详细样式信息 */
+  showStyle: any;
+  /** 该模块配置中的设备标识符 */
+  deviceType: string;
+  /** api返回的数据 */
+  data: any;
+  moduleName: string;
+  visible: boolean;
+}>();
+const emit = defineEmits(['close', 'select']);
+
+const { header } = props.moduleData;
+
+const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  return size + position;
+});
+
+// 根据配置里的定位判断应该使用哪个module组件
+const daneClass = computed(() => {
+  const headerPosition = props.showStyle.headerPosition;
+  const size = props.showStyle.size;
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  // if (position.includes('bottom') || parseInt(width) > 800) {
+  //   return 'dane-w';
+  // }
+  // if (position.includes('left')) {
+  //   return 'dane-m';
+  // }
+  // if (position.includes('right')) {
+  //   return 'dane-m';
+  // }
+  // return 'dane-m';
+  if (headerPosition === 'leftTop') {
+    return 'left-1';
+  }
+  if (headerPosition === 'leftCenter') {
+    return 'left-2';
+  }
+  if (headerPosition === 'leftBottom') {
+    return 'left-3';
+  }
+  if (headerPosition === 'rightTop') {
+    return 'right-1';
+  }
+  if (headerPosition === 'rightCenter') {
+    return 'right-1';
+  }
+  if (headerPosition === 'rightBottom') {
+    return 'right-3';
+  }
+  return 'dane-m'; // 默认返回顶部模块
+});
+
+//切换时间选项
+// function onChange(value, dateString) {
+//   console.log('Selected Time: ', value);
+//   console.log('Formatted Selected Time: ', dateString);
+// }
+// function onOk(val) {
+//   console.log('onOk: ', val);
+// }
+
+//下拉框选项切换
+function selectHandler(id) {
+  selectedDeviceID.value = id;
+  emit('select', selectedDevice);
+}
+
+function redirectTo() {
+  const { to } = props.moduleData;
+  if (!to) return;
+  openWindow(to);
+}
+
+watch(
+  () => props.data,
+  (d) => {
+    init(d);
+    selectedDeviceID.value = options.value[0]?.value;
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
+<style scoped lang="less">
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .dane-bd {
+    --image-Left1: url('@/assets/images/vent/homeNew/left1.png');
+    --image-Left2: url('@/assets/images/vent/homeNew/left2.png');
+    --image-Left3: url('@/assets/images/vent/homeNew/left3.png');
+    --image-Right1: url('@/assets/images/vent/homeNew/right1.png');
+    --image-Right2: url('@/assets/images/vent/homeNew/right2.png');
+    --image-Right3: url('@/assets/images/vent/homeNew/right3.png');
+  }
+}
+
+.dane-bd {
+  --image-Left1: url('@/assets/images/vent/homeNew/left1.png');
+  --image-Left2: url('@/assets/images/vent/homeNew/left2.png');
+  --image-Left3: url('@/assets/images/vent/homeNew/left3.png');
+  --image-Right1: url('@/assets/images/vent/homeNew/right1.png');
+  --image-Right2: url('@/assets/images/vent/homeNew/right2.png');
+  --image-Right3: url('@/assets/images/vent/homeNew/right3.png');
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+
+  .dane-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 40px;
+    padding: 0 40px 15px 20px;
+
+    .common-navL {
+      display: flex;
+      position: relative;
+      align-items: center;
+      color: #fff;
+      font-size: 14px;
+    }
+
+    .common-navR {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+
+  .dane-content {
+    height: calc(100% - 38px);
+    box-sizing: border-box;
+    border-top: none;
+  }
+}
+.left-1 {
+  background: var(--image-Left1) no-repeat;
+  background-size: 100% 100%;
+}
+.left-2 {
+  background: var(--image-Left2) no-repeat;
+  background-size: 100% 100%;
+}
+.left-3 {
+  background: var(--image-Left3) no-repeat;
+  background-size: 100% 100%;
+}
+.right-1 {
+  background: var(--image-Right1) no-repeat;
+  background-size: 100% 100%;
+}
+.right-2 {
+  background: var(--image-Right2) no-repeat;
+  background-size: 100% 100%;
+}
+.right-3 {
+  background: var(--image-Right3) no-repeat;
+  background-size: 100% 100%;
+}
+:deep(.zxm-select-selector) {
+  height: 22px !important;
+  border: none !important;
+  // background-color: rgb(15 64 88) !important;
+  background-color: transparent !important;
+  color: #8087a1 !important;
+}
+
+:deep(.zxm-select-selection-placeholder) {
+  color: #8087a1 !important;
+}
+
+:deep(.zxm-select-arrow) {
+  color: #8087a1 !important;
+}
+
+:deep(.zxm-picker) {
+  border: none !important;
+  background-color: rgb(15 64 88) !important;
+  box-shadow: none;
+  color: #a1dff8 !important;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #a1dff8 !important;
+  text-align: center !important;
+}
+
+:deep(.zxm-picker-separator) {
+  color: #a1dff8 !important;
+}
+
+:deep(.zxm-picker-active-bar) {
+  display: none !important;
+}
+
+:deep(.zxm-picker-suffix) {
+  color: #a1dff8 !important;
+}
+
+:deep(.zxm-switch) {
+  min-width: 48px !important;
+}
+
+:deep(.zxm-switch-checked) {
+  background-color: rgb(15 64 89) !important;
+}
+
+:deep(.zxm-switch-handle::before) {
+  background-color: rgb(33 179 247) !important;
+}
+
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
+</style>

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

@@ -0,0 +1,281 @@
+<template>
+  <div class="dane-bd" :style="style">
+    <div class="dane-title" :class="daneClass">
+      <div class="common-navL">
+        <span :class="{ deactived: index === 1 }" @click="index = 0">
+          {{ moduleNameA }}
+        </span>
+        <span class="ml-5px mr-5px">|</span>
+        <span :class="{ deactived: index === 0 }" @click="index = 1">
+          {{ moduleNameB }}
+        </span>
+      </div>
+
+      <div class="common-navR">
+        <!-- 下拉框 -->
+        <div class="common-navR-select" v-if="index === 0 && headerA.show && headerA.selector.show">
+          <a-select
+            style="width: 140px"
+            size="small"
+            placeholder="请选择"
+            v-model:value="selectedDeviceIDA"
+            allowClear
+            :options="optionsA"
+            @change="selectHandlerA"
+          />
+        </div>
+        <div class="common-navR-select" v-if="index === 1 && headerB.show && headerB.selector.show">
+          <a-select
+            style="width: 140px"
+            size="small"
+            placeholder="请选择"
+            v-model:value="selectedDeviceIDB"
+            allowClear
+            :options="optionsB"
+            @change="selectHandlerB"
+          />
+        </div>
+        <!-- 日期组件 -->
+        <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
+          <a-range-picker
+            size="small"
+            style="width: 140px"
+            :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm"
+            :placeholder="['开始时间', '结束时间']"
+            @change="onChange"
+            @ok="onOk"
+          />
+        </div> -->
+        <!-- 开关组件 -->
+        <!-- <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
+            <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
+            <a-switch v-model:checked="checked" />
+            <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
+          </div> -->
+      </div>
+    </div>
+    <div class="dane-content">
+      <slot>
+        <Content v-if="index === 0" style="height: 100%" :moduleData="moduleDataA" :data="selectedDeviceA" />
+        <Content v-if="index === 1" style="height: 100%" :moduleData="moduleDataB" :data="selectedDeviceB" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Content from './content.vue';
+import { defineProps, defineEmits, computed, ref, watch } from 'vue';
+import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
+import { useInitModule } from '../hooks/useInit';
+
+const props = defineProps<{
+  moduleDataA: ModuleData;
+  moduleNameA: string;
+  deviceTypeA: string;
+  moduleDataB: ModuleData;
+  moduleNameB: string;
+  deviceTypeB: string;
+  showStyle: ShowStyle;
+  visible: boolean;
+  data: any;
+}>();
+const emit = defineEmits(['close', 'select']);
+
+const index = ref(0);
+
+const headerA = props.moduleDataA.header;
+const headerB = props.moduleDataB.header;
+
+const {
+  selectedDeviceID: selectedDeviceIDA,
+  selectedDevice: selectedDeviceA,
+  options: optionsA,
+  init: initA,
+} = useInitModule(props.deviceTypeA, props.moduleDataA);
+const {
+  selectedDeviceID: selectedDeviceIDB,
+  selectedDevice: selectedDeviceB,
+  options: optionsB,
+  init: initB,
+} = useInitModule(props.deviceTypeB, props.moduleDataB);
+
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  return size + position;
+});
+
+// 根据配置里的定位判断应该使用哪个module组件
+const daneClass = computed(() => {
+  const headerPosition = props.showStyle.headerPosition;
+  const size = props.showStyle.size;
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  // if (position.includes('bottom') || parseInt(width) > 800) {
+  //   return 'dane-w';
+  // }
+  // if (position.includes('left')) {
+  //   return 'dane-m';
+  // }
+  // if (position.includes('right')) {
+  //   return 'dane-m';
+  // }
+  if (headerPosition === 'centerBottom') {
+    return 'center-Bottom';
+  }
+  return 'dane-m'; // 默认返回顶部模块
+});
+
+//切换时间选项
+// function onChange(value, dateString) {
+//   console.log('Selected Time: ', value);
+//   console.log('Formatted Selected Time: ', dateString);
+// }
+// function onOk(val) {
+//   console.log('onOk: ', val);
+// }
+
+//下拉框选项切换
+function selectHandlerA(id) {
+  selectedDeviceIDA.value = id;
+  emit('select', selectedDeviceA);
+}
+function selectHandlerB(id) {
+  selectedDeviceIDB.value = id;
+  emit('select', selectedDeviceB);
+}
+
+watch(
+  () => props.data,
+  (d) => {
+    initA(d);
+    initB(d);
+    selectedDeviceIDA.value = optionsA.value[0]?.value;
+    selectedDeviceIDB.value = optionsB.value[0]?.value;
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
+<style scoped lang="less">
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .dane-bd {
+    --image-CenterBottom: url('@/assets/images/vent/homeNew/center-Bottom.png');
+  }
+}
+
+.dane-bd {
+  --image-CenterBottom: url('@/assets/images/vent/homeNew/center-Bottom.png');
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: 100% auto;
+  z-index: 2;
+  .dane-title {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 34px;
+    padding: 0 40px 15px 20px;
+    .common-navL {
+      display: flex;
+      position: relative;
+      align-items: center;
+      color: #fff;
+      font-size: 14px;
+
+      .common-navR {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    }
+  }
+  .dane-content {
+    height: calc(100% - 34px);
+    box-sizing: border-box;
+    background: url('@/assets/images/vent/homeNew/bottomBg.png') no-repeat;
+    background-size: 100% 100%;
+    border-top: none;
+  }
+}
+
+.center-Bottom {
+  background: var(--image-CenterBottom) no-repeat;
+  background-size: 100% 100%;
+}
+.dane-m {
+  background-image: var(--image-MidBottom);
+  background-size: 100% 100%;
+}
+
+.deactived {
+  cursor: pointer;
+  color: #8087a1;
+}
+
+:deep(.zxm-select-selector) {
+  height: 22px !important;
+  border: none !important;
+  // background-color: rgb(15 64 88) !important;
+  background-color: transparent !important;
+  color: #8087a1 !important;
+}
+
+:deep(.zxm-select-selection-placeholder) {
+  color: #8087a1 !important;
+}
+
+:deep(.zxm-select-arrow) {
+  color: #8087a1 !important;
+}
+
+:deep(.zxm-picker) {
+  border: none !important;
+  background-color: rgb(15 64 88) !important;
+  box-shadow: none;
+  color: #a1dff8 !important;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #a1dff8 !important;
+  text-align: center !important;
+}
+
+:deep(.zxm-picker-separator) {
+  color: #a1dff8 !important;
+}
+
+:deep(.zxm-picker-active-bar) {
+  display: none !important;
+}
+
+:deep(.zxm-picker-suffix) {
+  color: #a1dff8 !important;
+}
+
+:deep(.zxm-switch) {
+  min-width: 48px !important;
+}
+
+:deep(.zxm-switch-checked) {
+  background-color: rgb(15 64 89) !important;
+}
+
+:deep(.zxm-switch-handle::before) {
+  background-color: rgb(33 179 247) !important;
+}
+
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
+</style>

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

@@ -48,7 +48,8 @@
         </template>
         <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
         <template v-if="config.name === 'chart'">
-          <CustomChart class="content__module" :chart-config="config.config" :chart-data="config.data" />
+          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config" :chart-data="config.data" />
+          <CustomChart v-else class="content__module" :chart-config="config.config" :chart-data="config.data" />
         </template>
         <!-- 通常列表部分 -->
         <template v-if="config.name === 'list'">
@@ -82,7 +83,13 @@
           <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
         </template>
         <template v-if="config.name === 'blast_delta'">
-          <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
+          <BlastDelta
+            v-if="config.pageType === 'New_fire'"
+            class="content__moduleFire"
+            :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }"
+          />
+          <BlastDelta v-else class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
         </template>
         <template v-if="config.name === 'qh_curve'">
           <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
@@ -413,6 +420,18 @@ const layoutConfig = computed(() => {
   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%;
+}
 // .content__module:first-of-type {
 //   margin-top: 0;
 // }

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

@@ -20,383 +20,383 @@
   </div>
 </template>
 <script lang="ts" setup>
-  withDefaults(
-    defineProps<{
-      listConfig: {
-        value: string;
-        color: string;
-        label: string;
-        info: string;
-      }[];
-      /** A B C D E F G */
-      type: string;
-    }>(),
-    {
-      listConfig: () => [],
-      type: 'A',
-    }
-  );
+withDefaults(
+  defineProps<{
+    listConfig: {
+      value: string;
+      color: string;
+      label: string;
+      info: string;
+    }[];
+    /** A B C D E F G */
+    type: string;
+  }>(),
+  {
+    listConfig: () => [],
+    type: 'A',
+  }
+);
 
-  //   defineEmits(['click']);
+//   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @import '/@/design/theme.less';
-  /* Timeline 相关的样式 */
-
-  @{theme-deepblue} {
-    .list {
-      --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
-      --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
-      --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
-      --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
-      --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
-      --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
-      --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
-      --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
-      --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
-      --image-list_bg_h: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_h.png);
-      --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.png');
-    }
-  }
+@import '/@/design/theme.less';
+@import '/@/design/theme.less';
+/* Timeline 相关的样式 */
 
+@{theme-deepblue} {
   .list {
-    --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
-    --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
-    --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
-    --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
-    --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
-    --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
-    --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
-    --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
-    --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
-    --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
-    --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
-    --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
-    --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
-    padding: 5px 20px;
-    position: relative;
-    background-repeat: no-repeat;
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100%;
-    background-image: var(--image-list_bg_default);
-  }
+    --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
+    --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
+    --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
+    --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
+    --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
+    --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
+    --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
+    --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
+    --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
+    --image-list_bg_h: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_h.png);
+    --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.png');
+  }
+}
 
-  .list_A {
-    padding-left: 5px;
-  }
-  .list-item__content_A {
-    background-repeat: no-repeat;
-    background-image: @vent-gas-list-item-bg-img;
-    // padding: 5px 10px;
-    display: flex;
-  }
-  .list-item__icon_A {
-    background-repeat: no-repeat;
-    width: 25px;
-    height: 29px;
-    background-image: var(--image-triangle_icon);
-  }
+.list {
+  --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
+  --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
+  --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
+  --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
+  --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
+  --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
+  --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
+  --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
+  --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
+  --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
+  --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
+  --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
+  --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
+  padding: 5px 20px;
+  position: relative;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  background-image: var(--image-list_bg_default);
+}
 
-  .list-item__content_B {
-    background-repeat: no-repeat;
-    padding: 5px 10px 10px 10px;
-    display: flex;
-    background-position: left bottom;
-    background-size: 100% auto;
-    background-image: var(--image-list_bg_b);
-  }
-  .list__image_B {
-    width: 77px;
-    height: 77px;
-    background-repeat: no-repeat;
-    background-image: var(--image-deco_1);
-    background-size: auto;
-    margin-right: 20px;
-  }
+.list_A {
+  padding-left: 5px;
+}
+.list-item__content_A {
+  background-repeat: no-repeat;
+  background-image: @vent-gas-list-item-bg-img;
+  // padding: 5px 10px;
+  display: flex;
+}
+.list-item__icon_A {
+  background-repeat: no-repeat;
+  width: 25px;
+  height: 29px;
+  background-image: var(--image-triangle_icon);
+}
 
-  .list_C {
-    background: none;
-  }
-  .list-item__content_C {
-    height: 60px;
-    background-repeat: no-repeat;
-    padding: 25px 50px 0 50px;
-    display: flex;
-    background-position: center;
-    background-size: 100% 100%;
-    background-image: var(--image-list_bg_c);
-    margin-bottom: 10px;
-    text-align: center;
-  }
-  .list-item__content_C > div {
-    flex-basis: 33.3%;
-  }
+.list-item__content_B {
+  background-repeat: no-repeat;
+  padding: 5px 10px 10px 10px;
+  display: flex;
+  background-position: left bottom;
+  background-size: 100% auto;
+  background-image: var(--image-list_bg_b);
+}
+.list__image_B {
+  width: 77px;
+  height: 77px;
+  background-repeat: no-repeat;
+  background-image: var(--image-deco_1);
+  background-size: auto;
+  margin-right: 20px;
+}
 
-  .list_D {
-    background-image: var(--image-list_bg_defflip);
-  }
-  .list__wrapper_D {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .list-item__icon_D {
-    display: none;
-  }
-  .list-item_D {
-    flex-basis: 25%;
-    height: 60px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: auto 100%;
-    background-image: var(--image-list_bg_d);
-    text-align: center;
-    margin-bottom: 10px;
-  }
-  .list-item__content_D {
-    line-height: 30px;
-  }
-  .list-item__value_D {
-    font-weight: bold;
-  }
+.list_C {
+  background: none;
+}
+.list-item__content_C {
+  height: 60px;
+  background-repeat: no-repeat;
+  padding: 25px 50px 0 50px;
+  display: flex;
+  background-position: center;
+  background-size: 100% 100%;
+  background-image: var(--image-list_bg_c);
+  margin-bottom: 10px;
+  text-align: center;
+}
+.list-item__content_C > div {
+  flex-basis: 33.3%;
+}
 
-  .list_E {
-    background-image: var(--image-list_bg_defflip);
-  }
-  .list__wrapper_E {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .list-item__icon_E {
-    display: none;
-  }
-  .list-item_E {
-    flex-basis: 25%;
-    height: 70px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: auto 100%;
-    background-image: var(--image-list_bg_e);
-    text-align: center;
-    margin: 5px 0px;
-    padding-top: 32px;
-    font-size: 12px;
-  }
+.list_D {
+  background-image: var(--image-list_bg_defflip);
+}
+.list__wrapper_D {
+  display: flex;
+  flex-wrap: wrap;
+}
+.list-item__icon_D {
+  display: none;
+}
+.list-item_D {
+  flex-basis: 25%;
+  height: 60px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 100%;
+  background-image: var(--image-list_bg_d);
+  text-align: center;
+  margin-bottom: 10px;
+}
+.list-item__content_D {
+  line-height: 30px;
+}
+.list-item__value_D {
+  font-weight: bold;
+}
 
-  .list_F {
-    background: none;
-  }
-  .list-item__content_F {
-    height: 40px;
-    background-repeat: no-repeat;
-    padding: 0 50px 0 50px;
-    display: flex;
-    background-position: center;
-    background-size: 100% auto;
-    background-image: var(--image-list);
-    margin-top: 10px;
-    text-align: center;
-  }
-  .list-item__content_F > div {
-    flex-basis: 33.3%;
-  }
+.list_E {
+  background-image: var(--image-list_bg_defflip);
+}
+.list__wrapper_E {
+  display: flex;
+  flex-wrap: wrap;
+}
+.list-item__icon_E {
+  display: none;
+}
+.list-item_E {
+  flex-basis: 25%;
+  height: 70px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 100%;
+  background-image: var(--image-list_bg_e);
+  text-align: center;
+  margin: 5px 0px;
+  padding-top: 32px;
+  font-size: 12px;
+}
 
-  .list_G {
-    background: none;
-  }
-  .list__wrapper_G {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-  .list-item_G {
-    width: 130px;
-    height: 80px;
-    align-items: center;
-    text-align: center;
-    border: 1px solid rgba(25, 237, 255, 0.4);
-    box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
-    background: rgba(0, 0, 0, 0.1);
-    margin: 5px 10px;
-  }
-  .list-item__content_G {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-  .list-item__content_G > .list-item__label {
-    width: 60px;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    font-size: 20px;
-    line-height: 80px;
-  }
-  .list-item__content_G > .list-item__info {
-    width: 70px;
-    height: 30px;
-    line-height: 30px;
-    right: 0;
-    position: absolute;
-  }
-  .list-item__content_G > .list-item__value {
-    width: 70px;
-    height: 50px;
-    line-height: 50px;
-    top: 30px;
-    right: 0;
-    position: absolute;
-    text-shadow: 0 0 25px #00fbfe;
-    background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-    font-style: normal;
-    background-size: cover;
-    font-family: electronicFont;
-    font-size: 30px;
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 18px;
-    color: aliceblue;
-  }
+.list_F {
+  background: none;
+}
+.list-item__content_F {
+  height: 40px;
+  background-repeat: no-repeat;
+  padding: 0 50px 0 50px;
+  display: flex;
+  background-position: center;
+  background-size: 100% auto;
+  background-image: var(--image-list);
+  margin-top: 10px;
+  text-align: center;
+}
+.list-item__content_F > div {
+  flex-basis: 33.3%;
+}
 
-  .list_H {
-    background: none;
-  }
-  .list-item__content_H {
-    height: 50px;
-    background-repeat: no-repeat;
-    padding: 20px 50px 0 50px;
-    display: flex;
-    background-position: bottom;
-    background-size: 100% auto;
-    background-image: var(--image-list_bg_h);
-    margin-bottom: 10px;
-    text-align: center;
-  }
-  .list-item__content_H > div {
-    flex-basis: 33.3%;
-  }
+.list_G {
+  background: none;
+}
+.list__wrapper_G {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.list-item_G {
+  width: 130px;
+  height: 80px;
+  align-items: center;
+  text-align: center;
+  border: 1px solid rgba(25, 237, 255, 0.4);
+  box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+  background: rgba(0, 0, 0, 0.1);
+  margin: 5px 10px;
+}
+.list-item__content_G {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.list-item__content_G > .list-item__label {
+  width: 60px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  font-size: 20px;
+  line-height: 80px;
+}
+.list-item__content_G > .list-item__info {
+  width: 70px;
+  height: 30px;
+  line-height: 30px;
+  right: 0;
+  position: absolute;
+}
+.list-item__content_G > .list-item__value {
+  width: 70px;
+  height: 50px;
+  line-height: 50px;
+  top: 30px;
+  right: 0;
+  position: absolute;
+  text-shadow: 0 0 25px #00fbfe;
+  background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+  font-style: normal;
+  background-size: cover;
+  font-family: electronicFont;
+  font-size: 30px;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 18px;
+  color: aliceblue;
+}
 
-  .list_I {
-    background: none;
-  }
-  .list__wrapper_I {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-  .list-item_I {
-    width: 160px;
-    height: 63px;
-    align-items: center;
-    text-align: center;
-    background-image: var(--image-list_bg_i);
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-    margin: 5px 10px;
-  }
-  .list-item__content_I {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-  .list-item__content_I > .list-item__label {
-    width: 60px;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    font-size: 20px;
-    line-height: 63px;
-    color: #009bff;
-  }
-  .list-item__content_I > .list-item__info {
-    height: 50%;
-    left: 70px;
-    position: absolute;
-  }
-  .list-item__content_I > .list-item__value {
-    top: 50%;
-    height: 50%;
-    left: 70px;
-    position: absolute;
-    font-size: 18px;
-  }
-  .list_J {
-    background: unset;
-    padding: 0 5px 0 10px;
-  }
-  .list-item_J {
-    width: 312px;
-    height: 57px;
-    align-items: center;
-    text-align: center;
-    background-image: var(--image-list_bg_j);
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-    margin: 5px 10px;
-  }
-  .list-item__content_J {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20px 0 15px;
-  }
-  .list_K {
-    background: unset;
-    padding: 0 5px 0 10px;
-  }
-  .list__wrapper_K {
-    height: 100%;
-  }
-  .list-item__content_K {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 5px;
-    margin: 4px 0;
-    background-image: var(--image-linear-gradient-3);
+.list_H {
+  background: none;
+}
+.list-item__content_H {
+  height: 50px;
+  background-repeat: no-repeat;
+  padding: 20px 50px 0 50px;
+  display: flex;
+  background-position: bottom;
+  background-size: 100% auto;
+  background-image: var(--image-list_bg_h);
+  margin-bottom: 10px;
+  text-align: center;
+}
+.list-item__content_H > div {
+  flex-basis: 33.3%;
+}
 
-    .list-item__value {
-      flex-basis: unset;
-    }
-    .list-item__label {
-      flex-basis: unset;
-    }
-    .list-item__info {
-      display: none;
-    }
-  }
+.list_I {
+  background: none;
+}
+.list__wrapper_I {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.list-item_I {
+  width: 160px;
+  height: 63px;
+  align-items: center;
+  text-align: center;
+  background-image: var(--image-list_bg_i);
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin: 5px 10px;
+}
+.list-item__content_I {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.list-item__content_I > .list-item__label {
+  width: 60px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  font-size: 20px;
+  line-height: 63px;
+  color: #009bff;
+}
+.list-item__content_I > .list-item__info {
+  height: 50%;
+  left: 70px;
+  position: absolute;
+}
+.list-item__content_I > .list-item__value {
+  top: 50%;
+  height: 50%;
+  left: 70px;
+  position: absolute;
+  font-size: 18px;
+}
+.list_J {
+  background: unset;
+  padding: 0 5px 0 10px;
+}
+.list-item_J {
+  width: 312px;
+  height: 57px;
+  align-items: center;
+  text-align: center;
+  background-image: var(--image-list_bg_j);
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin: 5px 10px;
+}
+.list-item__content_J {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px 0 15px;
+}
+.list_K {
+  background: unset;
+  padding: 0 5px 0 10px;
+}
+.list__wrapper_K {
+  height: 100%;
+}
+.list-item__content_K {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+  margin: 4px 0;
+  background-image: var(--image-linear-gradient-3);
 
-  .list-item__label {
-    flex-basis: 55%;
-  }
-  .list-item__info {
-    flex-grow: 1;
-  }
   .list-item__value {
-    flex-basis: 30%;
-  }
-  .list-item__value_red {
-    color: red;
-  }
-  .list-item__value_orange {
-    color: orange;
+    flex-basis: unset;
   }
-  .list-item__value_yellow {
-    color: yellow;
-  }
-  .list-item__value_green {
-    color: yellowgreen;
-  }
-  .list-item__value_blue {
-    color: @vent-table-action-link;
-  }
-  .list-item__value_white {
-    color: white;
+  .list-item__label {
+    flex-basis: unset;
   }
-  .gallery-item__value_lightblue {
-    color: @vent-configurable-home-light-border;
+  .list-item__info {
+    display: none;
   }
+}
+
+.list-item__label {
+  flex-basis: 55%;
+}
+.list-item__info {
+  flex-grow: 1;
+}
+.list-item__value {
+  flex-basis: 30%;
+}
+.list-item__value_red {
+  color: red;
+}
+.list-item__value_orange {
+  color: orange;
+}
+.list-item__value_yellow {
+  color: yellow;
+}
+.list-item__value_green {
+  color: yellowgreen;
+}
+.list-item__value_blue {
+  color: @vent-table-action-link;
+}
+.list-item__value_white {
+  color: white;
+}
+.gallery-item__value_lightblue {
+  color: @vent-configurable-home-light-border;
+}
 </style>

src/views/vent/home/configurable/components/originalNew/NewNav.vue

@@ -6,7 +6,7 @@
     <div class="nav-menu">
       <div class="nav-menu-left">
         <div v-for="(item, index) in leftMenus" :key="index">
-          <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuClick(index)">
+          <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuClick({ item, index })">
             <div style="color: #ddd">{{ item.name }}</div>
 
             <div v-if="activeIndex == index && isShowMenuItem" class="nav-menu-item">
@@ -46,14 +46,14 @@
         </div>
       </div>
     </div>
-    <div class="userInfo">
+    <!-- <div class="userInfo">
       <div class="userName">admin</div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-
+import { useRouter } from 'vue-router';
 let props = defineProps({
   Title: {
     type: String,
@@ -63,39 +63,32 @@ let props = defineProps({
 
 let menuList = ref<any[]>([
   {
-    name: '灾害预警',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
-  },
-  {
     name: '智能通风',
     MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
   },
   {
     name: '火灾监控',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+    // MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+    targatUrl: '/configurable/fireNew/home',
   },
   {
     name: '粉尘监控',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+    // MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+    targatUrl: '/configurable/dustNew/home',
   },
   {
     name: '瓦斯监控',
     MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
   },
   {
-    index: 5,
-    name: '综合管控',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
-  },
-  {
-    name: '综合业务管理',
+    name: '灾害预警',
     MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
   },
 ]); //一级菜单列表
 let activeIndex = ref(0); //当前激活menu索引
 let activeIndexL = ref(0); //当前激活menu索引
 let activeIndexR = ref(null); //当前激活menu索引
-
+const router = useRouter();
 let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
 let isShowMenuItemL = ref(false); //是否显示menuItem下拉选项菜单
 let isShowMenuItemR = ref(false); //是否显示menuItem下拉选项菜单
@@ -120,9 +113,10 @@ function menuItemRightClick(index) {
   menuItemActive.value = index;
   isShowMenuItemL.value = false;
 }
-function menuClick(index) {
-  activeIndex.value = index;
+function menuClick(data) {
+  activeIndex.value = data.index;
   isShowMenuItem.value = !isShowMenuItem.value;
+  router.push({ path: data.item.targatUrl });
 }
 function menuItemClick(index) {
   menuItemActive.value = index;

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

@@ -0,0 +1,1127 @@
+import { Config } from '../../deviceManager/configurationTable/types';
+export const testConfigNewDust: Config[] = [
+  {
+    deviceType: 'dustManageInfo',
+    moduleName: '工作面风险监测',
+    pageType: 'New_dust',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'gallery',
+            basis: '30%',
+          },
+          {
+            name: 'complex_list',
+            basis: '70%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [
+        {
+          type: 'I',
+          readFrom: 'dustManageInfo',
+          items: [
+            {
+              label: '',
+              value: '${totalNum}',
+              color: 'white',
+            },
+            {
+              label: '低风险',
+              value: '${dfxNum}',
+              color: 'lightblue',
+            },
+            {
+              label: '一般风险',
+              value: '${ybNum}',
+              color: 'lightblue',
+            },
+            {
+              label: '较大风险',
+              value: '${jdNum}',
+              color: 'lightblue',
+            },
+            {
+              label: '重大风险',
+              value: '${zdNum}',
+              color: 'lightblue',
+            },
+          ],
+        },
+      ],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [
+        {
+          type: 'E',
+          readFrom: 'dustManageInfo.sysList',
+          mapFromData: true,
+          items: [
+            {
+              title: '${sysNamme}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${warnLevel}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '最高粉尘浓度',
+                  value: '${maxVal}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:493px;',
+      version: '保德',
+      position: 'top:65px;left:10px;',
+      headerPosition: 'leftTop',
+    },
+  },
+  {
+    deviceType: 'atomizing',
+    moduleName: '喷雾设备信息',
+    pageType: 'New_dust',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          columns: [
+            {
+              name: '设备名称',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '排污状态',
+              prop: 'airStatus_str',
+            },
+            {
+              name: '应用场景',
+              prop: 'appScenes_str',
+            },
+            {
+              name: '喷雾状态',
+              prop: 'stateSpray_str',
+            },
+          ],
+          readFrom: 'atomizingArray',
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:415px;height:360px;',
+      version: '保德',
+      position: 'bottom:40px;left:10px;',
+      headerPosition: 'leftBottom',
+    },
+  },
+  {
+    deviceType: 'dustDustGraph',
+    moduleName: '综放工作面粉尘浓度',
+    pageType: 'New_dust',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+            pageType: 'New_dust',
+          },
+        ],
+      },
+      board: [],
+      chart: [
+        {
+          type: 'line_area',
+          readFrom: '',
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '浓度', position: 'left' }],
+          series: [
+            {
+              label: '${strinstallpos}',
+              readFrom: 'historyList',
+              xprop: 'time',
+              yprop: 'dustval',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:930px;height:280px;',
+      version: '保德',
+      position: 'bottom:8px;left:497px',
+      headerPosition: 'centerBottom',
+    },
+  },
+  {
+    deviceType: 'atomObj',
+    moduleName: '智能喷雾降尘装置',
+    pageType: 'New_dust',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'gallery',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [
+        {
+          type: 'E',
+          readFrom: 'atomObj',
+          items: [
+            {
+              label: '设备总数',
+              value: '${totalNum}',
+              color: 'blue',
+            },
+            {
+              label: '喷雾开启数',
+              value: '${atomOpenNum}',
+              color: 'blue',
+            },
+            {
+              label: '连网数量',
+              value: '${openNum}',
+              color: 'blue',
+            },
+            {
+              label: '断网数量',
+              value: '${breakNum}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      to: 'http://10.248.210.154:8801',
+    },
+    showStyle: {
+      size: 'width:440px;height:300px;',
+      version: '保德',
+      position: 'top:60px;right:10px;',
+      headerPosition: 'rightTop',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '煤尘爆炸性',
+    pageType: 'New_dust',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '${name}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'board',
+            basis: '99%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'E',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '火焰长度',
+              value: '>400mm',
+            },
+            {
+              label: '抑制煤层爆炸最低岩粉量',
+              value: '85%',
+            },
+            {
+              label: '鉴定结论',
+              value: '有煤层爆炸性',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:425px;height:260px;',
+      version: '保德',
+      position: 'top:370px;right:10px;',
+      headerPosition: 'rightCenter',
+    },
+  },
+  {
+    deviceType: 'devGbsb',
+    moduleName: '隔爆设施管理台账',
+    pageType: 'New_dust',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          readFrom: 'devGbsb',
+          columns: [
+            {
+              name: '地点',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '吊挂位置',
+              prop: 'addr',
+            },
+            {
+              name: '性质',
+              prop: 'kind',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:430px;height:280px;',
+      version: '保德',
+      position: 'bottom:20px;right:10px;',
+      headerPosition: 'rightBottom',
+    },
+  },
+];
+
+export const testConfigNewFire: Config[] = [
+  {
+    deviceType: 'fireManageInfo',
+    moduleName: '重点区域风险监测',
+    pageType: 'New_fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '50%',
+          },
+          {
+            name: 'complex_list',
+            basis: '50%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'H',
+          readFrom: 'fireManageInfo',
+          layout: 'label-top',
+          items: [
+            {
+              label: '内因风险等级',
+              value: '${nyWarnLevel}',
+            },
+            {
+              label: '外因风险等级',
+              value: '${wyWarnLevel}',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [
+        {
+          type: 'D',
+          readFrom: 'fireManageInfo.sysList',
+          mapFromData: true,
+          items: [
+            {
+              title: '${sysNamme}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${warnLevel}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '最高温度',
+                  value: '${maxVal}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:430px;height:280px;',
+      version: '原版',
+      position: 'top:60px;left:0;',
+      headerPosition: 'leftTop',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '开采煤层自燃发火特性',
+    pageType: 'New_fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          readFrom: 'mockTable',
+          columns: [
+            {
+              name: '煤层',
+              prop: 'a',
+            },
+            {
+              name: '自燃倾向性',
+              prop: 'b',
+            },
+            {
+              name: '最短发火期',
+              prop: 'c',
+            },
+            {
+              name: '最小推进速度',
+              prop: 'd',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        mockTable: [
+          {
+            a: '8煤',
+            b: '自燃',
+            c: '123天',
+            d: '0.87md',
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:417px;height:280px;',
+      version: '原版',
+      position: 'top:350px;left:0;',
+      headerPosition: 'leftCenter',
+    },
+  },
+  {
+    deviceType: 'pdArray',
+    moduleName: '带式输送机防灭火监控系统',
+    pageType: 'New_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${systemname}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '35%',
+          },
+          {
+            name: 'chart',
+            basis: '65%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'F',
+          layout: 'val-top',
+          readFrom: 'arrayCount',
+          items: [
+            {
+              label: '光纤预警',
+              value: '${[0].val}℃',
+            },
+            {
+              label: '一氧化碳预警',
+              value: '${[1].val}ppm',
+            },
+            {
+              label: '烟雾预警',
+              value: '${[2].val}',
+            },
+          ],
+        },
+      ],
+      chart: [
+        {
+          type: 'line_smooth',
+          readFrom: 'arrayFiber',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          series: [
+            {
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:430px;height:280px;',
+      version: '新版',
+      position: 'top:640px;left:0;',
+      headerPosition: 'leftBottom',
+    },
+  },
+  {
+    deviceType: 'sgGxObj',
+    moduleName: '工作面束管监测',
+    pageType: 'New_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: 'devSgjc',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'list',
+            basis: '60%',
+          },
+          {
+            name: 'blast_delta',
+            basis: '40%',
+            pageType: 'New_fire',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          type: 'I',
+          readFrom: '',
+          items: [
+            {
+              label: 'CO',
+              value: '${coVal}',
+              color: 'blue',
+              info: '一氧化碳',
+            },
+            {
+              label: 'CO₂',
+              value: '${co2Val}',
+              color: 'blue',
+              info: '二氧化碳',
+            },
+            {
+              label: 'CH₄',
+              value: '${ch4Val}',
+              color: 'blue',
+              info: '甲烷',
+            },
+            {
+              label: 'C₂H₂',
+              value: '${c2h2Val}',
+              color: 'blue',
+              info: '乙炔',
+            },
+            {
+              // label: 'C₂H₄',
+              label: 'O₂',
+              value: '${o2Val}',
+              color: 'blue',
+              info: '氧气',
+            },
+            {
+              // label: 'O₂',
+              label: 'C₂H₄',
+              value: '${c2h4Val}',
+              color: 'blue',
+              info: '乙烯',
+            },
+            {
+              label: '温度',
+              value: '--',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '风险',
+              value: '${warnLevel}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+    },
+    showStyle: {
+      size: 'width:920px;height:310px;',
+      version: '保德',
+      position: 'bottom:8px;left:500px',
+      headerPosition: 'centerBottom',
+    },
+  },
+  {
+    deviceType: 'sgGxObj',
+    moduleName: '工作面光纤监测',
+    pageType: 'New_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: 'devGxcw',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [
+        {
+          type: 'line_smooth',
+          readFrom: '',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          series: [
+            {
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:920px;height: 310px;',
+      version: '保德',
+      position: 'bottom:8px;left:500px',
+      headerPosition: 'centerBottom',
+    },
+  },
+  {
+    deviceType: 'obfObj',
+    moduleName: '密闭采空区监测区域',
+    pageType: 'New_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: 'obfObjModded',
+        selector: {
+          show: true,
+          value: '${objType}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [
+        {
+          type: 'bar_cylinder',
+          readFrom: '',
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '', position: 'left' }],
+          series: [
+            {
+              readFrom: 'arrayDev',
+              xprop: 'strinstallpos',
+              yprop: 'val',
+              label: '',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:430px;height:280px;',
+      version: '原版',
+      position: 'top:60px;right:0;',
+      headerPosition: 'rightTop',
+    },
+  },
+  {
+    deviceType: 'dsArray',
+    moduleName: '变电硐室防灭火监控系统',
+    pageType: 'New_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${systemname}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      // chart: [
+      //   {
+      //     type: 'line_bar',
+      //     readFrom: 'dsArray',
+      //     xAxis: [
+      //       {
+      //         label: 'null',
+      //       },
+      //     ],
+      //     yAxis: [
+      //       {
+      //         label: 'A',
+      //         align: 'left',
+      //       },
+      //       {
+      //         label: 'A',
+      //         align: 'left',
+      //       },
+      //     ],
+      //     series: [
+      //       {
+      //         label: 'A',
+      //         prop: 'top',
+      //       },
+      //       {
+      //         label: 'B',
+      //         prop: 'bot',
+      //       },
+      //     ],
+      //   },
+      // ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          type: 'H',
+          readFrom: 'arrayCount',
+          items: [
+            {
+              label: '光纤预警',
+              info: '最高温度',
+              value: '${[0].val}℃',
+              color: 'blue',
+            },
+            {
+              label: '一氧化碳预警',
+              info: '最高浓度',
+              value: '${[1].val}ppm',
+              color: 'blue',
+            },
+            {
+              label: '烟雾预警',
+              info: '最高浓度',
+              value: '${[2].val}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:425px;height:280px;',
+      version: '新版',
+      position: 'top:350px;right:0;',
+      headerPosition: 'rightCenter',
+    },
+  },
+  {
+    deviceType: 'aqjkArray',
+    moduleName: '安全监控系统',
+    pageType: 'New_fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          readFrom: 'aqjkArray',
+          columns: [
+            {
+              name: '测点位置',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '温度',
+              prop: 'nowVal',
+            },
+            {
+              name: '预警级别',
+              prop: 'warnLevel',
+            },
+            // {
+            //   name: '时间',
+            //   prop: 'time',
+            // },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:430px;height:280px;',
+      version: '新版',
+      position: 'top:640px;right:0;',
+      headerPosition: 'rightBottom',
+    },
+  },
+];

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

@@ -0,0 +1,189 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+      <VentModal />
+      <a-button
+        type="primary"
+        shape="circle"
+        style="width: 34px; height: 34px; position: absolute; right: 5px; bottom: 5px; z-index: 5"
+        @click="redirectTo('/micro-vent-3dModal/dashboard/analysis?type=model3D&deviceType=model3D')"
+      >
+        <EyeFilled />
+      </a-button>
+    </div>
+    <div class="top-bg">
+      <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
+      <!-- <div class="main-title">{{ mainTitle }}</div> -->
+      <NewNav :Title="mainTitle" />
+    </div>
+    <div class="left-t"> </div>
+    <div class="right-t"> </div>
+    <ModuleDustNew
+      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>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted } from 'vue';
+// import { CaretDownOutlined } from '@ant-design/icons-vue';
+import NewNav from './components/originalNew/NewNav.vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleDustNew from './components/ModuleDustNew.vue';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+import { getDisHome } from './configurable.api';
+import { EyeFilled } from '@ant-design/icons-vue';
+import { testConfigNewDust } from './configurable.data.New';
+const cfgs = computed(() =>
+  configs.value.filter((_, index) => {
+    return index !== 4 && index !== 3;
+  })
+);
+const cfgA = computed<any>(() =>
+  configs.value.find((_, index) => {
+    return index === 3;
+  })
+);
+const cfgB = computed<any>(() =>
+  configs.value.find((_, index) => {
+    return index === 4;
+  })
+);
+const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('粉尘预警系统');
+let interval: number | undefined;
+onMounted(() => {
+  fetchConfigs('New_dust').then(() => {
+    configs.value = testConfigNewDust;
+    getDisHome({
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    }).then(updateData);
+  });
+  setInterval(() => {
+    getDisHome({
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    }).then(updateData);
+  }, 2000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+
+function redirectTo(url) {
+  window.open(url);
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+@{theme-deepblue} {
+  .company-home {
+    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+  }
+}
+
+.company-home {
+  --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+
+  .top-bg {
+    width: 100%;
+    height: 56px;
+    background: var(--image-modal-top) no-repeat center;
+    position: absolute;
+    z-index: 1;
+    .main-title {
+      height: 56px;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .top-nav {
+      position: absolute;
+      top: 0;
+      width: 880px;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
+  .left-t {
+    position: absolute;
+    width: 33%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+    z-index: 0;
+  }
+  .right-t {
+    position: absolute;
+    width: 167%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+    z-index: 0;
+  }
+  // .module-left {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   left: 0;
+  // }
+  // .module-right {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   right: 0;
+  // }
+  // .module-bottom {
+  //   position: absolute;
+  //   width: 1000px;
+  //   height: 280px;
+  // }
+  .module-dropdown {
+    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-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;
+  }
+}
+:deep(.loading-box) {
+  position: unset;
+}
+</style>

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

@@ -0,0 +1,202 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+      <VentModal />
+      <a-button
+        type="primary"
+        shape="circle"
+        style="width: 34px; height: 34px; position: absolute; right: 5px; bottom: 5px; z-index: 5"
+        @click="redirectTo('/micro-vent-3dModal/dashboard/analysis?type=model3D&deviceType=model3D')"
+      >
+        <EyeFilled />
+      </a-button>
+    </div>
+    <div class="top-bg">
+      <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
+      <!-- <div class="main-title">{{ mainTitle }}</div> -->
+      <NewNav :Title="mainTitle" />
+    </div>
+    <div class="left-t"> </div>
+    <div class="right-t"> </div>
+    <ModuleFireNew
+      v-for="cfg in cfgs"
+      :key="cfg.deviceType"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="data"
+      :visible="true"
+    />
+    <ModuleFireNewDual
+      v-if="cfgA && cfgB"
+      :show-style="cfgA.showStyle"
+      :module-data-a="cfgA.moduleData"
+      :module-name-a="cfgA.moduleName"
+      :device-type-a="cfgA.deviceType"
+      :module-data-b="cfgB.moduleData"
+      :module-name-b="cfgB.moduleName"
+      :device-type-b="cfgB.deviceType"
+      :data="data"
+      :visible="true"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted } from 'vue';
+// import { CaretDownOutlined } from '@ant-design/icons-vue';
+import NewNav from './components/originalNew/NewNav.vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleFireNew from './components/ModuleFireNew.vue';
+import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+import { getDisHome } from './configurable.api';
+import { EyeFilled } from '@ant-design/icons-vue';
+import { testConfigNewFire } from './configurable.data.New';
+const cfgs = computed(() =>
+  configs.value.filter((_, index) => {
+    return index !== 4 && index !== 3;
+  })
+);
+const cfgA = computed<any>(() =>
+  configs.value.find((_, index) => {
+    return index === 3;
+  })
+);
+const cfgB = computed<any>(() =>
+  configs.value.find((_, index) => {
+    return index === 4;
+  })
+);
+const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('火灾预警系统');
+let interval: number | undefined;
+onMounted(() => {
+  fetchConfigs('New_fire').then(() => {
+    configs.value = testConfigNewFire;
+    getDisHome({
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    }).then(updateData);
+  });
+  setInterval(() => {
+    getDisHome({
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    }).then(updateData);
+  }, 2000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+
+function redirectTo(url) {
+  window.open(url);
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+@{theme-deepblue} {
+  .company-home {
+    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+  }
+}
+
+.company-home {
+  --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+
+  .top-bg {
+    width: 100%;
+    height: 56px;
+    background: var(--image-modal-top) no-repeat center;
+    position: absolute;
+    z-index: 1;
+    .main-title {
+      height: 56px;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .top-nav {
+      position: absolute;
+      top: 0;
+      width: 880px;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
+  .left-t {
+    position: absolute;
+    width: 33%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+    z-index: 0;
+  }
+  .right-t {
+    position: absolute;
+    width: 167%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+    z-index: 0;
+  }
+  // .module-left {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   left: 0;
+  // }
+  // .module-right {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   right: 0;
+  // }
+  // .module-bottom {
+  //   position: absolute;
+  //   width: 1000px;
+  //   height: 280px;
+  // }
+  .module-dropdown {
+    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-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;
+  }
+}
+:deep(.loading-box) {
+  position: unset;
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/common/measurePoint copy.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="content">
+    <div v-if="shown === 'default'" class="content-item">
+      <div class="card-content" v-for="(item, index) in cards" :key="`vmac${index}`">
+        <div class="item-l">
+          <div class="label-l">{{ item.label }}</div>
+          <div class="value-l">{{ item.value }}</div>
+        </div>
+        <div class="item-r">
+          <div class="content-r" v-for="el in item.listR" :key="el.id">
+            <span>{{ `${el.label} : ` }}</span>
+            <span
+              :class="{
+                'status-f': el.label.includes('状态') && el.value == 1,
+                'status-l': el.label.includes('状态') && el.value == 0,
+              }"
+            >
+              {{ el.label.includes('状态') ? (el.value == 1 ? '异常' : el.value == 0 ? '正常' : el.value) : el.value }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="shown === 'chart'" class="chart-item">
+      <div v-for="(item, index) in charts" :key="`acmt${index}`" class="chart-content">
+        <div class="text-center">
+          {{ item.label }}
+        </div>
+        <PredictionCurve :style="{ width: chartWidth || '474px' }" style="height: 300px; margin: 15px" :chart="item" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import BaseTab from '../../../gas/components/tab/baseTab.vue';
+  import PredictionCurve from './predictionCurve.vue';
+
+  // well i know this is trash but the time is reaching
+  defineProps<{
+    cards: { label: string; value: any; listR: { id: number; label: string; dw: string; value: any }[] }[];
+    charts: {
+      label: string;
+      time: Date;
+      data: [number, number, number, number];
+    }[];
+    title: string;
+    timeout?: number;
+    chartWidth?: string;
+  }>();
+
+  const shown = ref('default');
+  // const chartsConfig = ref<
+  //   {
+  //     label: string;
+  //     /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
+  //     indexMark: number;
+  //     x: string[];
+  //     y1: number[];
+  //     y2: number[];
+  //     y3: number[];
+  //     y4: number[];
+  //   }[]
+  // >([]);
+
+  // watch(
+  //   () => props.charts,
+  //   () => {
+  //     const arr = new Array(20).fill(0);
+  //     props.charts.forEach((el, i) => {
+  //       if (chartsConfig.value[i]) {
+  //         // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
+  //         // 那么应该按先进后出的队列模式更新数据了
+  //         const val = chartsConfig.value[i];
+  //         if (val.indexMark === 20) {
+  //           val.x.shift();
+  //           val.y1.shift();
+  //           val.y2.shift();
+  //           val.y3.shift();
+  //           val.y4.shift();
+  //           val.indexMark = 19;
+  //         }
+  //         val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
+  //         val.y1[val.indexMark] = el.data[0];
+  //         val.y2[val.indexMark] = el.data[1];
+  //         val.y3[val.indexMark] = el.data[2];
+  //         val.y4[val.indexMark] = el.data[3];
+  //         // 指针向后移动1
+  //         val.indexMark += 1;
+  //       } else {
+  //         // 更新配置
+  //         // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
+  //         const startFrom = moment(el.time);
+  //         chartsConfig.value[i] = {
+  //           label: el.label,
+  //           indexMark: 1,
+  //           x: arr.map(() => {
+  //             const str = startFrom.format('HH:mm:ss');
+  //             startFrom.add(props.timeout || 3000);
+  //             return str;
+  //           }),
+  //           y1: arr.map(() => {
+  //             return el.data[0];
+  //           }),
+  //           y2: arr.map(() => {
+  //             return el.data[1];
+  //           }),
+  //           y3: arr.map(() => {
+  //             return el.data[2];
+  //           }),
+  //           y4: arr.map(() => {
+  //             return el.data[3];
+  //           }),
+  //         };
+  //       }
+  //     });
+  //   },
+  //   { immediate: true, deep: true }
+  // );
+</script>
+<style lang="less">
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .content {
+      --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
+      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
+    }
+  }
+  .content {
+    --image-bot-area: url('/@/assets/images/fire/bot-area.png');
+    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
+    height: 100%;
+    color: var(--vent-font-color);
+
+    .title {
+      height: 30px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .text {
+        font-family: 'douyuFont';
+        font-size: 14px;
+      }
+    }
+
+    .content-item {
+      display: flex;
+      // justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+
+      .card-content {
+        position: relative;
+        width: 30%;
+        height: 128px;
+        margin: 0px 15px 15px 15px;
+        background: var(--image-bot-area) no-repeat center;
+        background-size: 100% 100%;
+
+        .item-l {
+          position: absolute;
+          left: 32px;
+          top: 50%;
+          transform: translate(0, -50%);
+          width: 89px;
+          height: 98px;
+          background: var(--image-bot-area1) no-repeat center;
+
+          .label-l {
+            position: absolute;
+            left: 50%;
+            top: 7px;
+            color: var(--vent-font-color);
+            font-size: 14px;
+            transform: translate(-50%, 0);
+          }
+
+          .value-l {
+            position: absolute;
+            left: 50%;
+            top: 50px;
+            transform: translate(-50%, 0);
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: var(--vent-table-action-link);
+          }
+        }
+
+        .item-r {
+          position: absolute;
+          left: 132px;
+          top: 50%;
+          transform: translate(0, -50%);
+          height: 128px;
+          padding: 5px 0px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          box-sizing: border-box;
+
+          .content-r {
+            display: flex;
+
+            span {
+              font-size: 14px;
+              color: var(--vent-font-color);
+
+              &:first-child {
+                display: inline-block;
+                width: 68px;
+              }
+
+              &:last-child {
+                display: inline-block;
+                width: calc(100% - 68px);
+              }
+            }
+
+            .status-f {
+              color: #ff0000;
+            }
+
+            .status-l {
+              color: var(--vent-table-action-link);
+            }
+          }
+        }
+      }
+    }
+
+    .chart-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+
+      .chart-content {
+        // border: 1px solid var(--vent-base-border);
+        box-shadow: inset 0px 0px 10px 1px var(--vent-modal-box-shadow);
+        padding: 10px 0;
+        margin: 0 5px 5px 5px;
+      }
+    }
+  }
+</style>

src/views/vent/monitorManager/compressor/components/nitrogenHome_dltj.vue

@@ -720,12 +720,19 @@
     { immediate: true }
   );
 
+  watch(
+    () => props.deviceId,
+    async (deviceId) => {
+      if (deviceId) await getCamera(deviceId, playerRef.value);
+    }
+  );
+
   onMounted(async () => {
     await getMonitor(true);
     await mountedThree().then(() => {
       loading.value = false;
     });
-    await getCamera(props.deviceId, playerRef.value);
+    // await getCamera(props.deviceId, playerRef.value);
   });
 
   onUnmounted(() => {

src/views/vent/monitorManager/gateMonitor/gate.threejs.noStation.ts

@@ -81,6 +81,7 @@ class FmNoStation {
     const textArr = [
       {
         text: `远程控制自动风门`,
+        // text: `${selectData.strinstallpos}`,
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',

src/views/vent/monitorManager/gateMonitor/gate.threejs.qd.ts

@@ -4,6 +4,7 @@ import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 import UseThree from '../../../../utils/threejs/useThree';
 import { drawHot } from '/@/utils/threejs/util';
 import { useAppStore } from '/@/store/modules/app';
+import { useGlobSetting } from '/@/hooks/setting';
 
 // import * as dat from 'dat.gui';
 // const gui = new dat.GUI();
@@ -70,6 +71,7 @@ class Fm3 {
 
   /* 添加监控数据 */
   addMonitorText(selectData) {
+    const { sysOrgCode } = useGlobSetting();
     if (!this.group) {
       return;
     }
@@ -83,11 +85,11 @@ class Fm3 {
 
     const textArr = [
       {
-        text: `远程控制自动风门`,
+        text: `${sysOrgCode == 'zlnxnywwek' ? selectData.strinstallpos : '远程控制自动风门'}`, //王洼二矿需要特殊处理
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 120,
+        x: sysOrgCode == 'zlnxnywwek' ? (450 - selectData.strinstallpos.length * 22) / 2 : 120,
         y: 100,
       },
       {

src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

@@ -5,8 +5,12 @@ import Fm3 from './gate.threejs.qd';
 import FmXR from './gate.threejs.xr';
 import Fm2 from './gate.threejs.three';
 import FmTwoSs from './gate.threejs.two.ss';
+import FmThreeTl from './gate.threejs.three.tl';
+import FmDc from './gate.threejs.window';
+import FmDcHJG from './gate.threejs.window.hjg';
 import { animateCamera } from '/@/utils/threejs/util';
 import useEvent from '../../../../utils/threejs/useEvent';
+import { getDictItemsByCode } from '/@/utils/dict';
 import { useGlobSetting } from '/@/hooks/setting';
 
 // 模型对象、 文字对象
@@ -17,6 +21,7 @@ let model,
   fmXr: FmXR, //行人风门
   fmTwoSs, //
   fmThreeTl, // 三道推拉
+  fmWindowHjg, // 带风窗
   fmWindow, // 带风窗
   group: THREE.Object3D,
   fmType = '',
@@ -56,6 +61,8 @@ const startAnimation = () => {
       fmTwoSs?.mouseUpModel.call(fmTwoSs);
     } else if (fmType === 'fmWindow') {
       fmWindow.mouseUpModel.call(fmWindow);
+    } else if (fmType === 'fmWindowHjg') {
+      fmWindowHjg.mouseUpModel();
     }
   });
 };
@@ -78,6 +85,8 @@ const mouseEvent = (event) => {
         fmThreeTl?.mousedownModel.call(fmThreeTl, intersects);
       } else if (fmType === 'fmWindow' && fmWindow) {
         fmWindow.mousedownModel.call(fmWindow, intersects);
+      } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+        fmWindowHjg.mousedownModel(intersects);
       }
     });
     console.log('摄像头控制信息', model.orbitControls, model.camera);
@@ -99,6 +108,8 @@ export const addMonitorText = (selectData) => {
     fmThreeTl?.addMonitorText.call(fmThreeTl, selectData);
   } else if (fmType === 'fmWindow' && fmWindow) {
     fmWindow.addMonitorText.call(fmWindow, selectData);
+  } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+    fmWindowHjg.addMonitorText(selectData);
   }
 };
 
@@ -121,6 +132,8 @@ export const play = (handlerState, flag?) => {
     return fm2.play.call(fm2, handlerState, flag);
   } else if (fmType === 'fmWindow' && fmWindow) {
     return fmWindow.play.call(fmWindow, handlerState, flag);
+  } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+    return fmWindowHjg.play.call(fmWindowHjg, handlerState, flag);
   } else if (fmType === 'fm3' && fm3) {
     return fm3.play.call(fm3, handlerState, flag);
   } else if (fmType === 'fmXr' && fmXr) {
@@ -132,26 +145,22 @@ export const play = (handlerState, flag?) => {
   }
 };
 
-export const playWindow = (rotationParam, flag) => {
-  if (fmType === 'fmWindow' && fmWindow) {
-    return fmWindow.playWindow.call(fmWindow, rotationParam, flag);
-  }
-};
+// export const playWindow = (rotationParam, flag) => {
+//   if (fmType === 'fmWindow' && fmWindow) {
+//     return fmWindow.playWindow.call(fmWindow, rotationParam, flag);
+//   } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+//     return fmWindowHjg.playWindow.call(fmWindowHjg, rotationParam, flag);
+//   }
+// };
 
 export function computePlay(data, maxarea, isFirst = false) {
   // 前门后窗  rearPresentValue1
   // 前门前窗 frontPresentValue1
   // 后门后窗 rearPresentValue2
   // 后门前窗 frontPresentValue2
-  // if (data.OpenDegree1 || data.OpenDegree2) {
-  //   maxarea = 90;
-  //   rotationParam.frontDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree1);
-  //   rotationParam.backDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree2);
-  //   rotationParam.frontDeg1 = (90 / maxarea) * Number(data.OpenDegree1) || 0;
-  //   rotationParam.backDeg1 = (90 / maxarea) * Number(data.OpenDegree2) || 0;
-  //   fm2.playWindow.call(fm3, rotationParam, 1);
-  //   fm2.playWindow.call(fm3, rotationParam, 2);
-  // }
+  // data['frontArea'] = 70;
+  // data['rearArea'] = 40;
+
   if (data.rearPresentValue1 || data.frontPresentValue1 || data.rearPresentValue2 || data.frontPresentValue2) {
     maxarea = 90;
     rotationParam.frontLeftDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.frontPresentValue1);
@@ -162,10 +171,31 @@ export function computePlay(data, maxarea, isFirst = false) {
     rotationParam.backRightDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearPresentValue2);
     rotationParam.backLeftDeg1 = (90 / maxarea) * Number(data.frontPresentValue2) || 0;
     rotationParam.backRightDeg1 = (90 / maxarea) * Number(data.rearPresentValue2) || 0;
-    fmWindow.playWindow(rotationParam, 1);
-    fmWindow.playWindow(rotationParam, 2);
-    fmWindow.playWindow(rotationParam, 3);
-    fmWindow.playWindow(rotationParam, 4);
+
+    // rotationParam.backLeftDeg1 = 90;
+
+    if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+      fmWindowHjg.playWindow(rotationParam, 1);
+      fmWindowHjg.playWindow(rotationParam, 2);
+      fmWindowHjg.playWindow(rotationParam, 3);
+      fmWindowHjg.playWindow(rotationParam, 4);
+    }
+  } else if (data.frontArea && data.rearArea) {
+    maxarea = 90;
+    rotationParam.frontLeftDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.frontArea);
+    rotationParam.frontRightDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.frontArea);
+    rotationParam.frontLeftDeg1 = (90 / maxarea) * Number(data.frontArea) || 0;
+    rotationParam.frontRightDeg1 = (90 / maxarea) * Number(data.frontArea) || 0;
+    rotationParam.backLeftDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearArea);
+    rotationParam.backRightDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearArea);
+    rotationParam.backLeftDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
+    rotationParam.backRightDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
+    if (fmType === 'fmWindow' && fmWindow) {
+      fmWindow.playWindow(rotationParam, 1);
+      fmWindow.playWindow(rotationParam, 2);
+      fmWindow.playWindow(rotationParam, 3);
+      fmWindow.playWindow(rotationParam, 4);
+    }
   }
 }
 
@@ -268,6 +298,35 @@ export const setModelType = (type) => {
           0.6
         );
       }, 300);
+    } else if (fmType === 'fmWindowHjg' && fmWindowHjg && fmWindowHjg.group) {
+      if (fmWindowHjg.clipActionArr.frontDoor && fmWindowHjg.clipActionArr.backDoor) {
+        fmWindowHjg.clipActionArr.frontDoor.reset();
+        fmWindowHjg.clipActionArr.frontDoor.time = 0.5;
+        fmWindowHjg.clipActionArr.backDoor.reset();
+        fmWindowHjg.clipActionArr.backDoor.time = 0.5;
+
+        fmWindowHjg.clipActionArr.frontDoor.stop();
+        fmWindowHjg.clipActionArr.backDoor.stop();
+      }
+
+      model.startAnimation = fmWindowHjg.render.bind(fmWindowHjg);
+      model.scene.remove(group);
+      group = fmWindowHjg.group;
+      const oldCameraPosition = { x: -761, y: 569, z: 871 };
+      setTimeout(async () => {
+        resolve(null);
+        model.scene.add(fmWindowHjg.group);
+        const position = { x: -2.28, y: -0.91, z: -5.68 };
+
+        await animateCamera(
+          oldCameraPosition,
+          { x: -2.27, y: -0.91, z: -5.67 },
+          { x: 66.257, y: 57.539, z: 94.313 },
+          { x: position.x, y: position.y, z: position.z },
+          model,
+          0.6
+        );
+      }, 300);
     } else if (fmType === 'fmThreeTl' && fmThreeTl && fmThreeTl.group) {
       if (fmThreeTl.clipActionArr.frontDoor && fmThreeTl.clipActionArr.backDoor && fmThreeTl.clipActionArr.centerDoor) {
         fmThreeTl.clipActionArr.frontDoor.reset();
@@ -423,8 +482,8 @@ export const initCameraCanvas = async (playerVal1) => {
 
 export const mountedThree = (playerDom) => {
   const { sysOrgCode } = useGlobSetting();
+  debugger;
   // const sysOrgCode = 'gsgszdek';
-
   return new Promise(async (resolve) => {
     model = new UseThree('#damper3D', '', '#deviceDetail');
     model.setEnvMap('test1.hdr');
@@ -440,42 +499,95 @@ export const mountedThree = (playerDom) => {
         const FmTwoYj = await import('./gate.threejs.two.yj');
         if (FmTwoYj) fmTwoSs = new FmTwoYj.default(model);
         fmTwoSs.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
         break;
-      case 'zmjthjg':
+      case 'zmjthjg': //黄家沟
         const FmNoSubStation = await import('./gate.threejs.noStation');
         if (FmNoSubStation) fm3 = new FmNoSubStation.default(model);
         if (fm3) fm3.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
         break;
-      case 'gsgszdek':
-        const FmDc = await import('./gate.threejs.window');
-        if (FmDc) fmWindow = new FmDc.default(model);
-        if (fmWindow) fmWindow.mountedThree(playerDom);
+      case 'gsgszdek': //大海则
+        fmWindowHjg = new FmDc(model);
+        if (fmWindowHjg) fmWindowHjg.mountedThree(playerDom);
         fm3 = new Fm3(model);
         fm3.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
         break;
-      case 'sdmtjtbltmk':
+      case 'sdmtjtbltmk': //补连塔
         fm3 = new Fm3(model);
         fm3.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
+        // 三道门
+        fmThreeTl = new FmThreeTl(model);
+        if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
         break;
       default:
-        fm3 = new Fm3(model);
-        fm3.mountedThree(playerDom);
-        fmTwoSs = new FmTwoSs(model);
-        fmTwoSs.mountedThree(playerDom);
-        fm2 = new Fm2(model);
-        fm2.mountedThree(playerDom);
-        break;
+        debugger;
+        // 根据字典加载模型
+        const dictCodes = getDictItemsByCode('gateStyle');
+        if (dictCodes.length > 0) {
+          for (let i = 0; i < dictCodes.length; i++) {
+            const dict = dictCodes[i];
+            switch (dict.value) {
+              case 'fmXr':
+                fmXr = new FmXR(model);
+                fmXr.mountedThree(playerDom);
+                break;
+              case 'fmYy':
+                fm1 = new Fm1(model);
+                fm1.mountedThree(playerDom);
+                break;
+              case 'gate_qd':
+                fm3 = new Fm3(model);
+                await fm3.mountedThree();
+                break;
+              case 'fmSs':
+                fmTwoSs = new FmTwoSs(model);
+                await fmTwoSs.mountedThree();
+                break;
+              case 'fmtl3':
+                fmThreeTl = new FmThreeTl(model);
+                await fmThreeTl.mountedThree();
+                break;
+              case 'fmSs3':
+                fm2 = new Fm2(model);
+                await fm2.mountedThree();
+                break;
+              case 'fm_fc_hjg':
+                fmWindowHjg = new FmDcHJG(model);
+                await fmWindowHjg.mountedThree();
+                break;
+              case 'fm_fc':
+                fmWindow = new FmDc(model);
+                await fmWindow.mountedThree();
+                break;
+            }
+          }
+          resolve(null);
+        } else {
+          fm3 = new Fm3(model);
+          fm3.mountedThree(playerDom);
+          fmTwoSs = new FmTwoSs(model);
+          fmTwoSs.mountedThree(playerDom);
+          fm2 = new Fm2(model);
+          fm2.mountedThree(playerDom);
+          // 三道门
+          fmThreeTl = new FmThreeTl(model);
+          if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
+          fmXr = new FmXR(model);
+          fmXr.mountedThree(playerDom);
+          // 液压风门
+          fm1 = new Fm1(model);
+          fm1.mountedThree(playerDom);
+          resolve(null);
+          break;
+        }
     }
-    // 三道门
-    const FmThreeTl = await import('./gate.threejs.three.tl');
-    if (FmThreeTl) fmThreeTl = new FmThreeTl.default(model);
-    if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
-    // 行人风门
-    fmXr = new FmXR(model);
-    fmXr.mountedThree(playerDom);
-    fm1 = new Fm1(model);
-    fm1.mountedThree(playerDom);
-    resolve(null);
 
     model.animate();
     startAnimation();
@@ -490,6 +602,7 @@ export const destroy = () => {
     if (fm3) fm3.destroy();
     if (fmXr) fmXr.destroy();
     if (fmTwoSs) fmTwoSs.destroy();
+    if (fmWindowHjg) fmWindowHjg.destroy();
     if (fmWindow) fmWindow.destroy();
     if (fmThreeTl) fmThreeTl.destroy();
     fm1 = null;
@@ -497,6 +610,7 @@ export const destroy = () => {
     fm3 = null;
     fmXr = null;
     fmWindow = null;
+    fmWindowHjg = null;
     fmThreeTl = null;
     fmTwoSs = null;
     group = null;

src/views/vent/monitorManager/gateMonitor/gate.threejs.window.hjg.ts

@@ -0,0 +1,543 @@
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
+import gsap from 'gsap';
+import { drawHot } from '/@/utils/threejs/util';
+import { useAppStore } from '/@/store/modules/app';
+
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class FmDcHJG {
+  modelName = 'fmDc';
+  model; //
+  group;
+  isLRAnimation = true; // 是否开启左右摇摆动画
+  direction = 1; // 摇摆方向
+  animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
+  player1;
+  player2;
+  deviceDetailCSS3D;
+  playerStartClickTime1 = new Date().getTime();
+  playerStartClickTime2 = new Date().getTime();
+
+  fmClock = new THREE.Clock();
+  mixers: THREE.AnimationMixer | undefined;
+  appStore = useAppStore();
+
+  // backLeftDamperOpenMesh;
+  // backLeftDamperClosedMesh;
+  // frontLeftDamperOpenMesh;
+  // frontLeftDamperClosedMesh;
+  // backRightDamperOpenMesh;
+  // backRightDamperClosedMesh;
+  // frontRightDamperOpenMesh;
+  // frontRightDamperClosedMesh;
+
+  clipActionArr = {
+    frontDoor: null as unknown as THREE.AnimationAction,
+    backDoor: null as unknown as THREE.AnimationAction,
+  };
+  windowsActionArr = {
+    frontLeftWindow: <THREE.Mesh[]>[],
+    backLeftWindow: <THREE.Mesh[]>[],
+    frontRightWindow: <THREE.Mesh[]>[],
+    backRightWindow: <THREE.Mesh[]>[],
+  };
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {}
+  // 重置摄像头
+  resetCamera() {
+    this.model.camera.far = 274;
+    this.model.orbitControls?.update();
+    this.model.camera.updateProjectionMatrix();
+  }
+  // 设置模型位置
+  setModalPosition() {
+    this.group?.scale.set(22, 22, 22);
+    this.group?.position.set(-20, 20, 9);
+  }
+
+  /* 添加监控数据 */
+  addMonitorText(selectData) {
+    if (!this.group) {
+      return;
+    }
+    const screenDownText = VENT_PARAM['modalText']
+      ? VENT_PARAM['modalText']
+      : History_Type['type'] == 'remote'
+      ? `国能神东煤炭集团监制`
+      : '煤炭科学技术研究院有限公司研制';
+
+    const screenDownTextX = 80 - (screenDownText.length - 10) * 6;
+
+    const textArr = [
+      {
+        text: `远程控制自动风门`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 120,
+        y: 100,
+      },
+      {
+        text: `净通行高度(m):`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 155,
+      },
+      {
+        text: `${selectData.fclearheight ? selectData.fclearheight : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 290,
+        y: 155,
+      },
+      {
+        text: `净通行宽度(m): `,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 215,
+      },
+      {
+        text: ` ${selectData.fclearwidth ? selectData.fclearwidth : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 215,
+      },
+      {
+        text: `故障诊断:`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 275,
+      },
+      {
+        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 275,
+      },
+      {
+        text: screenDownText,
+        font: 'normal 28px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: screenDownTextX,
+        y: 325,
+      },
+    ];
+    //
+    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+      textMap.colorSpace = THREE.SRGBColorSpace;
+      const textMaterial = new THREE.MeshBasicMaterial({
+        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
+        map: textMap, // 设置纹理贴图
+        transparent: true,
+        side: THREE.FrontSide, // 这里是双面渲染的意思
+      });
+      textMaterial.blending = THREE.CustomBlending;
+      const monitorPlane = this.group.getObjectByName('monitorText');
+      if (monitorPlane) {
+        monitorPlane.material = textMaterial;
+      } else {
+        const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
+        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
+        planeMesh.name = 'monitorText';
+        planeMesh.scale.set(0.002, 0.002, 0.002);
+        planeMesh.position.set(4.025, 0.67, -0.27);
+        this.group.add(planeMesh);
+      }
+      textMap.dispose();
+    });
+  }
+
+  /** 添加热点 */
+  drawHots() {
+    const hotPositions = [
+      { x: -0.37, y: 0.26, z: -0.32 },
+      { x: 0.28, y: -0.2, z: -0.43 },
+      { x: 0.55, y: -0.22, z: -0.38 },
+    ];
+    for (let i = 0; i < 3; i++) {
+      const hotPoint = drawHot(0.1);
+      const position = hotPositions[i];
+      hotPoint.scale.set(0.1, 0.1, 0.1);
+      hotPoint.position.set(position.x, position.y, position.z);
+      hotPoint.name = 'hotPoint' + i;
+      this.group?.add(hotPoint);
+    }
+  }
+
+  /* 风门动画 */
+  render() {
+    if (!this.model) {
+      return;
+    }
+
+    if (this.mixers && this.fmClock.running) {
+      this.mixers.update(2);
+    }
+  }
+
+  /* 点击风窗，风窗全屏 */
+  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
+    if (this.animationTimer) {
+      clearTimeout(this.animationTimer);
+      this.animationTimer = null;
+    }
+  }
+
+  mouseUpModel() {}
+
+  /* 提取风门序列帧，初始化前后门动画 */
+  initAnimation() {
+    const fmGroup = this.group?.getObjectByName('fm-window-hjg');
+    if (fmGroup) {
+      const tracks = fmGroup.animations[0].tracks;
+      const fontTracks: any[] = [],
+        backTracks: any[] = [];
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        if (track.name.includes('_1')) {
+          fontTracks.push(track);
+        } else {
+          backTracks.push(track);
+        }
+      }
+      const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
+      // const frontGroup = parentGroup.getObjectByName('FengMen2');
+      // const backGroup = parentGroup.getObjectByName('FengMen1');
+      this.mixers = new THREE.AnimationMixer(parentGroup);
+
+      const frontDoor = new THREE.AnimationClip('frontDoor', 2.5, fontTracks);
+      const frontClipAction = this.mixers.clipAction(frontDoor, parentGroup);
+      frontClipAction.clampWhenFinished = true;
+      frontClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.frontDoor = frontClipAction;
+
+      const backDoor = new THREE.AnimationClip('backDoor', 2.5, backTracks);
+      const backClipAction = this.mixers.clipAction(backDoor, parentGroup);
+      backClipAction.clampWhenFinished = true;
+      backClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.backDoor = backClipAction;
+    }
+    // 编写风窗
+  }
+  /* 提取风门序列帧，初始化前后门动画 */
+  initWindowAnimation() {
+    const meshArr01: THREE.Object3D[] = []; //front left
+    const meshArr02: THREE.Object3D[] = []; //front right
+    const meshArr03: THREE.Object3D[] = []; //back left
+    const meshArr04: THREE.Object3D[] = []; //back right
+    const windowGroup = new THREE.Group();
+    windowGroup.name = 'hiddenGroup';
+    const fmGroup = this.group?.getObjectByName('fm-window-hjg');
+    const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
+    const frontGroup = parentGroup.getObjectByName('FengMen2');
+    const backGroup = parentGroup.getObjectByName('FengMen');
+    const frontLeftObj = frontGroup.getObjectByName('FengMen_L_1');
+    const frontRightObj = frontGroup.getObjectByName('FengMen_R_1');
+    const backLeftObj = backGroup.getObjectByName('FengMen_L');
+    const backRightObj = backGroup.getObjectByName('FengMen_R');
+    frontLeftObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr01.push(obj);
+      }
+    });
+    frontRightObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr02.push(obj);
+      }
+    });
+    backLeftObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr03.push(obj);
+      }
+    });
+    backRightObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr04.push(obj);
+      }
+    });
+
+    this.windowsActionArr.frontLeftWindow = meshArr01;
+    this.windowsActionArr.frontRightWindow = meshArr02;
+    this.windowsActionArr.backLeftWindow = meshArr03;
+    this.windowsActionArr.backRightWindow = meshArr04;
+    this.group?.add(windowGroup);
+  }
+
+  deviceDetailCard(position = { x: 0, y: 0, z: 0 }) {
+    const element = document.getElementById('deviceCard') as HTMLElement;
+    if (element) {
+      this.deviceDetailCSS3D = new CSS2DObject(element);
+      this.deviceDetailCSS3D.name = 'deviceCard';
+      this.deviceDetailCSS3D.position.set(position.x, position.y, position.z);
+      this.deviceDetailCSS3D.visible = false;
+      // this.model.scene.add(this.deviceDetailCSS3D);
+      this.group.add(this.deviceDetailCSS3D);
+    }
+  }
+
+  // 播放动画
+  play(handlerState, timeScale = 0.01) {
+    let handler = () => {};
+    if (this.clipActionArr.frontDoor && this.clipActionArr.backDoor) {
+      switch (handlerState) {
+        case 1: // 打开前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset();
+            this.clipActionArr.frontDoor.time = 0;
+            this.clipActionArr.frontDoor.timeScale = timeScale;
+            // this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+
+            // 显示打开前门文字
+            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = true;
+            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = false;
+          };
+          break;
+        case 2: // 关闭前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset(); //
+            this.clipActionArr.frontDoor.time = 2.5;
+            this.clipActionArr.frontDoor.timeScale = -timeScale;
+            // this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+
+            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
+            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;
+          };
+          break;
+        case 3: // 打开后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 0;
+            this.clipActionArr.backDoor.timeScale = timeScale;
+            // this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+
+            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = true;
+            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = false;
+          };
+          break;
+        case 4: // 关闭后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 2.5;
+            this.clipActionArr.backDoor.timeScale = -timeScale;
+            // this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+
+            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
+            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = true;
+          };
+          break;
+        default:
+      }
+      handler();
+    }
+  }
+
+  playWindow(rotationParam, flag) {
+    if (
+      this.windowsActionArr.frontLeftWindow.length <= 0 ||
+      this.windowsActionArr.frontRightWindow.length <= 0 ||
+      this.windowsActionArr.backLeftWindow.length <= 0 ||
+      this.windowsActionArr.backRightWindow.length <= 0
+    ) {
+      return;
+    }
+    if (flag === 1) {
+      // 前门左风窗动画
+      this.windowsActionArr.frontLeftWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.frontLeftDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.frontLeftDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 2) {
+      // 后门左风窗动画
+      this.windowsActionArr.backLeftWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.backLeftDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.backLeftDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 3) {
+      // 前门右风窗动画
+      this.windowsActionArr.frontRightWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.frontRightDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.frontRightDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 4) {
+      // 后门右风窗动画
+      this.windowsActionArr.backRightWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.backRightDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.backRightDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 0) {
+      (
+        [
+          ...this.windowsActionArr.frontLeftWindow,
+          ...this.windowsActionArr.frontRightWindow,
+          ...this.windowsActionArr.backLeftWindow,
+          ...this.windowsActionArr.backRightWindow,
+        ] as THREE.Mesh[]
+      ).forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: 0,
+          overwrite: true,
+        });
+      });
+    }
+  }
+
+  async initCamera(dom1) {
+    const videoPlayer1 = dom1;
+    this.player1 = dom1;
+    let monitorPlane: THREE.Mesh | null = null;
+    if (!videoPlayer1) {
+      const textArr = [
+        {
+          text: `无信号输入`,
+          font: 'normal 40px Arial',
+          color: '#009900',
+          strokeStyle: '#002200',
+          x: 170,
+          y: 40,
+        },
+      ];
+      const canvas = await getTextCanvas(320, 180, '', 'noSinge.png');
+
+      let textMaterial: THREE.MeshBasicMaterial | null = null;
+      if (canvas) {
+        const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+        textMaterial = new THREE.MeshBasicMaterial({
+          map: textMap, // 设置纹理贴图
+          transparent: true,
+          side: THREE.DoubleSide, // 这里是双面渲染的意思
+        });
+        textMaterial.blending = THREE.CustomBlending;
+
+        const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
+        monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
+
+        textMaterial.dispose();
+        planeGeometry.dispose();
+        textMap.dispose();
+      }
+    }
+    const player1 = this.group.getObjectByName('player1');
+    if (player1) {
+      this.model.clearMesh(player1);
+      this.group.remove(player1);
+    }
+    const noPlayer1 = this.group.getObjectByName('noPlayer1');
+    if (noPlayer1) {
+      this.model.clearMesh(noPlayer1);
+      this.group.remove(noPlayer1);
+    }
+    if (!videoPlayer1 && videoPlayer1 === null) {
+      if (monitorPlane && !this.group.getObjectByName('noPlayer1')) {
+        const planeMesh = monitorPlane.clone();
+        planeMesh.name = 'noPlayer1';
+        planeMesh.scale.set(0.0085, 0.0055, 0.012);
+        planeMesh.position.set(-3.64, 0.01, -0.41);
+        this.group?.add(planeMesh.clone());
+      }
+    } else if (videoPlayer1) {
+      try {
+        const mesh = renderVideo(this.group, videoPlayer1, 'player1');
+        if (mesh) {
+          mesh?.scale.set(-0.0275, 0.028, 1);
+          mesh?.position.set(-3.643, 0.02, -0.4);
+          mesh.rotation.y = -Math.PI;
+          this.group.add(mesh);
+        }
+      } catch (error) {
+        console.log('视频信号异常');
+      }
+    }
+  }
+
+  mountedThree(playerDom) {
+    this.group = new THREE.Object3D();
+    this.group.name = this.modelName;
+    return new Promise((resolve) => {
+      this.model.setGLTFModel(['fm-window-hjg'], this.group).then(() => {
+        console.log('带风窗风门模型----->', this.group);
+        this.setModalPosition();
+        // 初始化左右摇摆动画;
+        this.initAnimation();
+        this.initWindowAnimation();
+        // this.drawHots();
+        this.addLight();
+        // this.deviceDetailCard();
+        this.model.animate();
+
+        resolve(this.model);
+      });
+    });
+  }
+
+  destroy() {
+    if (this.model) {
+      if (this.mixers) {
+        this.mixers.uncacheClip(this.clipActionArr.frontDoor.getClip());
+        this.mixers.uncacheClip(this.clipActionArr.backDoor.getClip());
+        this.mixers.uncacheAction(this.clipActionArr.frontDoor.getClip(), this.group);
+        this.mixers.uncacheAction(this.clipActionArr.backDoor.getClip(), this.group);
+        this.mixers.uncacheRoot(this.group);
+
+        if (this.model.animations[0]) this.model.animations[0].tracks = [];
+      }
+      this.model.clearGroup(this.group);
+      this.clipActionArr.backDoor = undefined;
+      this.clipActionArr.frontDoor = undefined;
+
+      this.windowsActionArr.frontWindow = undefined;
+      this.windowsActionArr.backWindow = undefined;
+
+      this.mixers = undefined;
+    }
+  }
+}
+export default FmDcHJG;

src/views/vent/monitorManager/gateMonitor/gate.threejs.window.ts

@@ -98,7 +98,7 @@ class FmDc {
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 290,
+        x: 295,
         y: 155,
       },
       {
@@ -114,7 +114,7 @@ class FmDc {
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 280,
+        x: 290,
         y: 215,
       },
       {
@@ -130,7 +130,7 @@ class FmDc {
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 280,
+        x: 290,
         y: 275,
       },
       {
@@ -139,7 +139,7 @@ class FmDc {
         color: '#00FF00',
         strokeStyle: '#007400',
         x: screenDownTextX,
-        y: 325,
+        y: 320,
       },
     ];
     //
@@ -215,13 +215,13 @@ class FmDc {
         backTracks: any[] = [];
       for (let i = 0; i < tracks.length; i++) {
         const track = tracks[i];
-        if (track.name.includes('_1')) {
+        if (track.name.includes('Men_1') || track.name.includes('Men_2')) {
           fontTracks.push(track);
-        } else {
+        } else if (track.name.includes('Men_3') || track.name.includes('Men_4')) {
           backTracks.push(track);
         }
       }
-      const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
+      const parentGroup = fmGroup.getObjectByName('QiDongTiaoJieFengMen_1');
       // const frontGroup = parentGroup.getObjectByName('FengMen2');
       // const backGroup = parentGroup.getObjectByName('FengMen1');
       this.mixers = new THREE.AnimationMixer(parentGroup);
@@ -249,13 +249,13 @@ class FmDc {
     const windowGroup = new THREE.Group();
     windowGroup.name = 'hiddenGroup';
     const fmGroup = this.group?.getObjectByName('fm-window');
-    const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
-    const frontGroup = parentGroup.getObjectByName('FengMen2');
-    const backGroup = parentGroup.getObjectByName('FengMen');
-    const frontLeftObj = frontGroup.getObjectByName('FengMen_L_1');
-    const frontRightObj = frontGroup.getObjectByName('FengMen_R_1');
-    const backLeftObj = backGroup.getObjectByName('FengMen_L');
-    const backRightObj = backGroup.getObjectByName('FengMen_R');
+    const parentGroup = fmGroup.getObjectByName('QiDongTiaoJieFengMen_1');
+    const frontGroup = parentGroup.getObjectByName('FengMen_1');
+    const backGroup = parentGroup.getObjectByName('FengMen_2');
+    const frontLeftObj = frontGroup.getObjectByName('Men_2').getObjectByName('shanye_2');
+    const frontRightObj = frontGroup.getObjectByName('Men_1').getObjectByName('shanye_1');
+    const backLeftObj = backGroup.getObjectByName('Men_4').getObjectByName('shanye_4');
+    const backRightObj = backGroup.getObjectByName('Men_3').getObjectByName('shanye_3');
     frontLeftObj.traverse((obj) => {
       if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
         obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);

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

@@ -31,8 +31,10 @@
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(4)">关闭后门</div>
         <div v-if="hasPermission('btn:totalControl') || selectData['isShowGatesContrl']" class="button-box" @click="playAnimation(5)">同时打开</div>
         <div v-if="hasPermission('btn:totalControl') || selectData['isShowGatesContrl']" class="button-box" @click="playAnimation(6)">同时关闭</div>
-        <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(10)">A窗控制</div>
-        <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(11)">B窗控制</div>
+        <template v-if="selectData['gateStyle'] && selectData['gateStyle'].includes('fm_fc')">
+          <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(10)">A窗控制</div>
+          <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(11)">B窗控制</div>
+        </template>
       </div>
       <!-- 控制模式 -->
       <div class="top-right row" v-if="hasPermission('btn:remote')">
@@ -317,7 +319,7 @@
   import AlarmHistoryTableHj from './components/AlarmHistoryTableHj.vue';
   import HandleModal from './modal.vue';
   import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-  import { mountedThree, addMonitorText, play, destroy, setModelType, computePlay, playWindow } from './gate.threejs';
+  import { mountedThree, addMonitorText, play, destroy, setModelType, computePlay } from './gate.threejs';
   import { deviceControlApi } from '/@/api/vent/index';
   import { message } from 'ant-design-vue';
   import { list, getTableList, cameraList, cameraAddrList } from './gate.api';
@@ -332,6 +334,7 @@
   import { getDictItems } from '/@/api/common/api';
   import { render } from '/@/utils/common/renderUtils';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { getDictItemsByCode } from '/@/utils/dict';
 
   const { hasPermission } = usePermission();
   const { sysOrgCode } = useGlobSetting();
@@ -472,27 +475,62 @@
     frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
     rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
     midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
-    // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
+
     let type;
-    if (selectData['doorUse'] == 2) {
-      type = 'fmXr';
+    const dictCodes = getDictItemsByCode('gateStyle');
+    if (selectData && dictCodes && dictCodes.length > 0) {
+      const gateStyle = selectData['gateStyle'];
+      switch (gateStyle) {
+        case 'gate_qd':
+          type = 'fm3';
+          break;
+        case 'fmSs':
+          type = 'fm3';
+          break;
+        case 'fmtl3':
+          type = 'fmThreeTl';
+          break;
+        case 'fmSs':
+          type = 'fmTwoSs';
+          break;
+        case 'fm_fc':
+          type = 'fmWindow';
+          break;
+        case 'fmXr':
+          type = 'fmXr';
+          break;
+        case 'fmYy':
+          type = 'fm1';
+          break;
+        case 'fmSs3':
+          type = 'fm2';
+          break;
+        case 'fm_fc_hjg':
+          type = 'fmWindowHjg';
+          break;
+      }
     } else {
-      if (selectData.deviceType == 'gate_ss') {
-        type = 'fm2';
-        // type = 'fmWindow';
-      } else if (selectData.deviceType == 'gate_qd' || selectData.deviceType == 'gate_normal') {
-        type = 'fm3';
-      } else if (selectData.deviceType == 'gate_ss_two' || selectData.deviceType == 'gate_ss_two1') {
-        type = 'fmTwoSs';
-      } else if (selectData.deviceType == 'gate_nomal3' || selectData.ndoorcount == '3') {
+      type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
+      if (selectData['doorUse'] == 2) {
+        type = 'fmXr';
+      } else if (selectData.ndoorcount == '3' || selectData.deviceType == 'gate_nomal3') {
         type = 'fmThreeTl';
-      } else if (selectData.deviceType == 'gate_tj') {
-        type = 'fmWindow';
       } else {
-        type = 'fm1'; // 液压
+        if (selectData.deviceType == 'gate_ss') {
+          type = 'fm2';
+          // type = 'fmWindow';
+        } else if (selectData.deviceType == 'gate_qd' || selectData.deviceType == 'gate_normal') {
+          type = 'fm3';
+        } else if (selectData.deviceType == 'gate_ss_two' || selectData.deviceType == 'gate_ss_two1') {
+          type = 'fmTwoSs';
+        } else if (selectData.deviceType == 'gate_tj') {
+          type = 'fmWindow';
+        } else {
+          type = 'fm1'; // 液压
+        }
       }
     }
-
+    debugger;
     setModelType(type).then(async () => {
       addMonitorText(selectData);
       loading.value = false;
@@ -861,7 +899,7 @@
   function monitorAnimation(selectData) {
     const timeScale = 0.005;
     // 带风窗 风窗动画
-    playWindowAnimation(selectData);
+    if (selectData['gateStyle'] && selectData['gateStyle'].includes('fm_fc')) playWindowAnimation(selectData);
 
     if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
       isFrontOpenRunning = true;
@@ -996,19 +1034,24 @@
     modelList.value = await getDictItems('gateModel');
     loading.value = true;
     const playerDom = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
-    mountedThree(playerDom).then(async () => {
-      if (sysOrgCode != 'zmhjhzmy') {
-        await getMonitor(true);
-        loading.value = false;
-      } else {
-        // 韩咀无风门设备,只有报警历史数据,无其他数据
-        setModelType('fm1').then(async () => {
+    debugger;
+    mountedThree(playerDom)
+      .then(async () => {
+        if (sysOrgCode != 'zmhjhzmy') {
+          await getMonitor(true);
           loading.value = false;
-          dataSource.value = [];
-          addMonitorText(selectData);
-        });
-      }
-    });
+        } else {
+          // 韩咀无风门设备,只有报警历史数据,无其他数据
+          setModelType('fm1').then(async () => {
+            loading.value = false;
+            dataSource.value = [];
+            addMonitorText(selectData);
+          });
+        }
+      })
+      .catch(() => {
+        debugger;
+      });
   });
 
   onBeforeUnmount(() => {

src/views/vent/monitorManager/mainFanMonitor/mainWind.xj.threejs.ts

@@ -549,7 +549,7 @@ class mainXjWindRect {
       if (plane) {
         if (flag == 'open') {
           gsap.to(plane.position, {
-            z: -70,
+            z: -1085.796,
             duration: duration / 2,
             overwrite: true,
             onComplete: function () {
@@ -558,7 +558,7 @@ class mainXjWindRect {
           });
         } else {
           gsap.to(plane.position, {
-            z: 30,
+            z: -544.701, //-1085.796
             duration: duration / 2,
             overwrite: true,
             onComplete: function () {
@@ -794,8 +794,8 @@ class mainXjWindRect {
         //挡板
         this.frontPlane = gltf[0]?.getObjectByName('ChaBan')?.getObjectByName('ChaBan_ban_pCube8') as THREE.Mesh;
         this.backPlane = gltf[0]?.getObjectByName('ChaBan1')?.getObjectByName('ChaBan1_ban_pCube8') as THREE.Mesh;
-        if (this.frontPlane) this.frontPlane.position.setZ(30);
-        if (this.backPlane) this.backPlane.position.setZ(30);
+        if (this.frontPlane) this.frontPlane.position.setZ(-544.701);
+        if (this.backPlane) this.backPlane.position.setZ(-544.701);
 
         const loader = new THREE.TextureLoader();
         this.airTexture = loader.load('/model/img/air.png');

src/views/vent/monitorManager/windowMonitor/shuangdaoFc.threejs.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 import gsap from 'gsap';
+import { useGlobSetting } from '/@/hooks/setting';
 
 class sdFc_1 {
   model;
@@ -51,6 +52,7 @@ class sdFc_1 {
   }
 
   addMonitorText(selectData) {
+    const { sysOrgCode } = useGlobSetting();
     if (!this.group) {
       return;
     }
@@ -63,11 +65,11 @@ class sdFc_1 {
     const screenDownTextX = 120 - (screenDownText.length - 10) * 6;
     const textArr = [
       {
-        text: `远程定量调节自动风窗`,
+        text: `${sysOrgCode == 'zlnxnywwek' ? selectData.strinstallpos : '远程控制自动风门'}`, //王洼二矿需要特殊处理
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 95,
+        x: sysOrgCode == 'zlnxnywwek' ? (450 - selectData.strinstallpos.length * 22) / 2 : 120,
         y: 97,
       },
       {

src/views/vent/monitorManager/windrectMonitor/duishe.threejs.ts

@@ -2,6 +2,7 @@ import * as THREE from 'three';
 
 import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 import gsap from 'gsap';
+import { useGlobSetting } from '/@/hooks/setting';
 // import * as dat from 'dat.gui';
 // const gui = new dat.GUI();
 // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
@@ -84,13 +85,14 @@ class dsWindRect {
     if (!this.group) {
       return;
     }
+    const { sysOrgCode } = useGlobSetting();
     const textArr = [
       {
-        text: `扫描式测风装置`,
+        text: `${sysOrgCode == 'zlnxnywwek' ? selectData.strinstallpos : '远程控制自动风门'}`, //王洼二矿需要特殊处理
         font: 'normal 32px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 140,
+        x: sysOrgCode == 'zlnxnywwek' ? (380 - selectData.strinstallpos.length * 22) / 2 : 120,
         y: 75,
       },
       {

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

@@ -18,14 +18,14 @@
           nodeParam.id == '1600000000000000001'
             ? '报表分析'
             : nodeParam.id == '1500000000000000002'
-              ? '报表分析'
-              : nodeParam.id == '1500000000000000003'
-                ? '色谱仪分析'
-                : nodeParam.id == '1400000000000000003' || nodeParam.id == '1400000000000000002'
-                  ? '报表分析'
-                  : ''
+            ? '报表分析'
+            : nodeParam.id == '1500000000000000003'
+            ? '色谱仪分析'
+            : nodeParam.id == '1400000000000000003' || nodeParam.id == '1400000000000000002'
+            ? '报表分析'
+            : ''
         }}</a>
-        <a class="table-action-link"  v-if="hasPermission('editPermiss:return')" @click="handlePermission(record)">权限编辑</a>
+        <a class="table-action-link" v-if="hasPermission('editPermiss:return')" @click="handlePermission(record)">权限编辑</a>
       </template>
 
       <template #bodyCell="{ column, record }">
@@ -39,8 +39,7 @@
       <a-form :model="formStateTj" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
         <a-form-item label="选择审批" :rules="[{ required: true, message: '请选择是否提交' }]">
           <a-select v-model:value="formStateTj.file" style="width: 260px">
-            <a-select-option v-for="file in fileList" :key="file.label" :value="file.value">{{ file.label
-              }}</a-select-option>
+            <a-select-option v-for="file in fileList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
           </a-select>
         </a-form-item>
       </a-form>
@@ -51,20 +50,22 @@
     </a-modal>
     <!-- 审批-撤销申请弹窗 -->
     <a-modal v-model:visible="visibleCx" centered :width="600" title="撤销申请" @ok="handleCxOk" @cancel="handleCxCancel">
-      <a-textarea v-model:value="revokeDes" placeholder="请输入撤回原因..." :rows="4"
-        style="width: 96%; margin: 10px; background-color: transparent; color: #fff" />
+      <a-textarea
+        v-model:value="revokeDes"
+        placeholder="请输入撤回原因..."
+        :rows="4"
+        style="width: 96%; margin: 10px; background-color: transparent; color: #fff"
+      />
     </a-modal>
     <!-- 权限编辑弹窗 -->
-    <a-modal v-model:visible="visiblePermission" width="450px" :footer="null" :title="titlePermission" centered
-      destroyOnClose>
+    <a-modal v-model:visible="visiblePermission" width="450px" :footer="null" :title="titlePermission" centered destroyOnClose>
       <a-form :model="formStateQx" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" autocomplete="off">
         <a-form-item label="选择权限：">
-          <JDictSelectTag v-model:value="formStateQx.filePerm" placeholder="请选择权限" dictCode="file_perm"
-            style="width: 240px" />
+          <JDictSelectTag v-model:value="formStateQx.filePerm" placeholder="请选择权限" dictCode="file_perm" style="width: 240px" />
         </a-form-item>
         <div class="opertion-btn">
           <a-button type="primary" @click="confirmQx">确定</a-button>
-          <a-button type="success" style="margin-left:10px" @click="cancelQx">取消</a-button>
+          <a-button type="success" style="margin-left: 10px" @click="cancelQx">取消</a-button>
         </div>
       </a-form>
     </a-modal>
@@ -72,421 +73,420 @@
 </template>
 
 <script lang="ts" name="system-user" setup>
-//ts语法
-import { ref, provide, reactive, toRaw, defineExpose, unref } from 'vue';
-import { BasicTable, TableAction } from '/@/components/Table';
-import DeviceModal from './DeviceModal.vue';
-import CADModal from './CADModal.vue';
-import HistorySp from './HistorySp.vue';
-import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-import { useModal } from '/@/components/Modal';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { useListPage } from '/@/hooks/system/useListPage';
-import { commit,updataFileParam } from '../fileDetail/fileDetail.api';
-import { historicFlowNew, getHighlightImgNew, getTodoTask, getCancelNew } from './comment.api';
-import { message } from 'ant-design-vue';
-import { useUserStore } from '/@/store/modules/user';
-import { useRouter } from 'vue-router';
-import { usePermission } from '/@/hooks/web/usePermission';
+  //ts语法
+  import { ref, provide, reactive, toRaw, defineExpose, unref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import DeviceModal from './DeviceModal.vue';
+  import CADModal from './CADModal.vue';
+  import HistorySp from './HistorySp.vue';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import { useModal } from '/@/components/Modal';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { commit, updataFileParam } from '../fileDetail/fileDetail.api';
+  import { historicFlowNew, getHighlightImgNew, getTodoTask, getCancelNew } from './comment.api';
+  import { message } from 'ant-design-vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useRouter } from 'vue-router';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
-const props = defineProps({
-  //文件审批-提交信息
-  submitInfo: {
-    type: Array,
-    default: () => {
-      return [];
+  const props = defineProps({
+    //文件审批-提交信息
+    submitInfo: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    //各矿参数
+    selfParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    //查询参数
+    searchParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
-  },
-  //各矿参数
-  selfParam: {
-    type: Object,
-    default: () => {
-      return {};
+    //菜单树传递参数
+    nodeParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
-  },
-  //查询参数
-  searchParam: {
-    type: Object,
-    default: () => {
-      return {};
+    columnsType: {
+      type: String,
+      // required: true,
     },
-  },
-  //菜单树传递参数
-  nodeParam: {
-    type: Object,
-    default: () => {
-      return {};
+    columns: {
+      type: Array,
+      // required: true,
+      default: () => [],
     },
-  },
-  columnsType: {
-    type: String,
-    // required: true,
-  },
-  columns: {
-    type: Array,
-    // required: true,
-    default: () => [],
-  },
 
-  list: {
-    type: Function,
-    required: true,
-  },
-  //下载文件接口
-  downLoad: {
-    type: Function,
-    required: true,
-  },
+    list: {
+      type: Function,
+      required: true,
+    },
+    //下载文件接口
+    downLoad: {
+      type: Function,
+      required: true,
+    },
 
-  deleteById: {
-    type: Function,
-    required: true,
-  },
-  pointList: {
-    type: Function,
-    // required: true,
-  },
-  designScope: {
-    type: String,
-  },
-  title: {
-    type: String,
-  },
-});
-const { hasPermission } = usePermission();
-let router = useRouter(); //路由
-let resetTable = ref(0);
-let fileType = ref(''); //文件类型
-let editID = ref(0); //文件ID
-const isUpdate = ref(false);
-const record = reactive<Record<string, any>>({});
-provide('formData', record);
-const [registerDeviceModal, { openModal, closeModal }] = useModal();
-const columnList = getTableHeaderColumns(props.columnsType);
-//是否显示文件审批弹窗
-let visibleTj = ref(false);
-//文件审批-弹窗参数
-let formStateTj = reactive({
-  file: '',
-  id: '',
-});
-//文件审批-提交信息弹窗下拉选项数据
-let fileList = reactive<any[]>([]);
-//审批详情弹窗数据
-let visibleSp = ref(false);
-let titleSp = ref('审批详情');
-//审批详情历史数据
-let historySpList = reactive<any[]>([]);
-let imgSrc = ref('');
-//审批-是否显示撤回/驳回按钮
-let isShow = ref(true);
-//审批通过/驳回参数信息
-let spInfo = reactive({});
+    deleteById: {
+      type: Function,
+      required: true,
+    },
+    pointList: {
+      type: Function,
+      // required: true,
+    },
+    designScope: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+  });
+  const { hasPermission } = usePermission();
+  let router = useRouter(); //路由
+  let resetTable = ref(0);
+  let fileType = ref(''); //文件类型
+  let editID = ref(0); //文件ID
+  const isUpdate = ref(false);
+  const record = reactive<Record<string, any>>({});
+  provide('formData', record);
+  const [registerDeviceModal, { openModal, closeModal }] = useModal();
+  const columnList = getTableHeaderColumns(props.columnsType);
+  //是否显示文件审批弹窗
+  let visibleTj = ref(false);
+  //文件审批-弹窗参数
+  let formStateTj = reactive({
+    file: '',
+    id: '',
+  });
+  //文件审批-提交信息弹窗下拉选项数据
+  let fileList = reactive<any[]>([]);
+  //审批详情弹窗数据
+  let visibleSp = ref(false);
+  let titleSp = ref('审批详情');
+  //审批详情历史数据
+  let historySpList = reactive<any[]>([]);
+  let imgSrc = ref('');
+  //审批-是否显示撤回/驳回按钮
+  let isShow = ref(true);
+  //审批通过/驳回参数信息
+  let spInfo = reactive({});
 
-//审批-撤销
-let visibleCx = ref(false);
-let revokeDes = ref('');
-let cxInfo = reactive({});
+  //审批-撤销
+  let visibleCx = ref(false);
+  let revokeDes = ref('');
+  let cxInfo = reactive({});
 
-//权限编辑弹窗信息
-let visiblePermission = ref(false)
-let titlePermission = ref('权限编辑')
-let formStateQx = reactive({
-  filePerm: ''
-})
-let permissionId = ref('')
+  //权限编辑弹窗信息
+  let visiblePermission = ref(false);
+  let titlePermission = ref('权限编辑');
+  let formStateQx = reactive({
+    filePerm: '',
+  });
+  let permissionId = ref('');
 
-let userStore = useUserStore(); //获取用户信息
-let userName = unref(userStore.getUserInfo).username;
+  let userStore = useUserStore(); //获取用户信息
+  let userName = unref(userStore.getUserInfo).username;
 
-// 列表页面公共参数、方法
-const { tableContext, doRequest } = useListPage({
-  designScope: props.designScope,
-  tableProps: {
-    title: props.title,
-    api: props.list,
-    columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
-    // size: 'small',
-    bordered: false,
-    scroll: { y: 620 },
-    // formConfig: {
-    //   // labelWidth: 100,
-    //   labelAlign: 'left',
-    //   labelCol: {
-    //     xs: 24,
-    //     sm: 24,
-    //     md: 24,
-    //     lg: 9,
-    //     xl: 7,
-    //     xxl: 5,
-    //   },
-    //   schemas: props.searchFormSchema as any[],
-    // },
-    striped: true,
-    showIndexColumn: true, //是否显示序列号
-    // actionColumn: {
-    //   width: 200,
-    // },
-    showActionColumn: false,
-    useSearchForm: false, //不使用查询条件
-    // pagination: false, //不使用分页组件
-    beforeFetch: (params) => {
-      params.parentId = props.nodeParam.id ? props.nodeParam.id : '';
-      params.selectFlag = props.nodeParam.id ? false : true;
-      params.likeFileName = props.searchParam.fileName ? props.searchParam.fileName : '';
-      params.fileSuffix = props.searchParam.fileType ? '.' + props.searchParam.fileType : '';
-      params.bpmStatus = props.selfParam.bpmStatus ? props.selfParam.bpmStatus : '';
-      params.sysOrgCode = props.selfParam.sysOrgCode ? props.selfParam.sysOrgCode : '';
+  // 列表页面公共参数、方法
+  const { tableContext, doRequest } = useListPage({
+    designScope: props.designScope,
+    tableProps: {
+      title: props.title,
+      api: props.list,
+      columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
+      // size: 'small',
+      bordered: false,
+      scroll: { y: 620 },
+      // formConfig: {
+      //   // labelWidth: 100,
+      //   labelAlign: 'left',
+      //   labelCol: {
+      //     xs: 24,
+      //     sm: 24,
+      //     md: 24,
+      //     lg: 9,
+      //     xl: 7,
+      //     xxl: 5,
+      //   },
+      //   schemas: props.searchFormSchema as any[],
+      // },
+      striped: true,
+      showIndexColumn: true, //是否显示序列号
+      // actionColumn: {
+      //   width: 200,
+      // },
+      showActionColumn: false,
+      useSearchForm: false, //不使用查询条件
+      // pagination: false, //不使用分页组件
+      beforeFetch: (params) => {
+        params.parentId = props.nodeParam.id ? props.nodeParam.id : '';
+        params.selectFlag = props.nodeParam.id ? false : true;
+        params.likeFileName = props.searchParam.fileName ? props.searchParam.fileName : '';
+        params.fileSuffix = props.searchParam.fileType ? '.' + props.searchParam.fileType : '';
+        params.bpmStatus = props.selfParam.bpmStatus ? props.selfParam.bpmStatus : '';
+        params.sysOrgCode = props.selfParam.sysOrgCode ? props.selfParam.sysOrgCode : '';
+      },
     },
-  },
-});
-
-//注册table数据
-const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
-// 审批提交
-function handleTo(data) {
-  visibleTj.value = true;
-  fileList.length = 0;
-  props.submitInfo.forEach((el) => {
-    fileList.push({ label: el.name, value: el.id });
   });
-  formStateTj.id = data.id;
-}
-//确认提交
-async function handleTjOk() {
-  if (formStateTj.file) {
-    let res = await commit({ procDefId: formStateTj.file, tableId: formStateTj.id, firstGateway: true });
-    if (res == '提交成功') {
+
+  //注册table数据
+  const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
+  // 审批提交
+  function handleTo(data) {
+    visibleTj.value = true;
+    fileList.length = 0;
+    props.submitInfo.forEach((el) => {
+      fileList.push({ label: el.name, value: el.id });
+    });
+    formStateTj.id = data.id;
+  }
+  //确认提交
+  async function handleTjOk() {
+    if (formStateTj.file) {
+      let res = await commit({ procDefId: formStateTj.file, tableId: formStateTj.id, firstGateway: true });
+      if (res == '提交成功') {
+        message.success(res);
+        visibleTj.value = false;
+        resetTable.value = new Date().getTime();
+      } else {
+        message.warning(res.message);
+      }
+    } else {
+      message.warning('请先选择要提交的文件!');
+    }
+  }
+  //取消提交
+  function handleTjCancel() {
+    formStateTj.file = '';
+    visibleTj.value = false;
+  }
+  //审批详情点击
+  function handleSpDetail(data) {
+    visibleSp.value = true;
+    getTodoTaskShow({ tableId: data.id, tableName: data.tableName });
+    getHistoricFlowNewList({ tableId: data.id, tableName: data.tableName });
+    getHighlightImgNewList({ tableId: data.id, tableName: data.tableName });
+  }
+  //审批详情-审批历史列表
+  async function getHistoricFlowNewList(params) {
+    historySpList.length = 0;
+    let res = await historicFlowNew({ ...params });
+    if (res.length != 0) {
+      res.forEach((el) => {
+        historySpList.push({
+          name: el.name,
+          username: el.assignees[0].username,
+          deleteReason: el.deleteReason,
+          comment: el.comment,
+          startTime: el.startTime,
+          endTime: el.endTime,
+          status: el.assignees[0].isExecutor ? '已处理' : '待处理',
+        });
+      });
+    }
+  }
+  //审批详情-流程轨迹
+  async function getHighlightImgNewList(params) {
+    let res = await getHighlightImgNew({ ...params });
+    let imageUrl = window.URL.createObjectURL(res);
+    imgSrc.value = imageUrl;
+  }
+  //判断是否显示撤回/驳回按钮
+  async function getTodoTaskShow(params) {
+    let res = await getTodoTask({ ...params });
+    spInfo = Object.assign({}, res);
+    if (res.result) {
+      isShow.value = true;
+    } else {
+      isShow.value = false;
+    }
+  }
+  //审批通过/驳回弹窗关闭
+  function spClose() {
+    visibleSp.value = false;
+    resetTable.value = new Date().getTime();
+  }
+  //审批-撤回提交
+  function handleSpRevoke(data) {
+    visibleCx.value = true;
+    cxInfo = Object.assign({}, data);
+  }
+  //审批-撤销-确定
+  async function handleCxOk() {
+    let res = await getCancelNew({ reason: revokeDes.value, tableId: cxInfo.id, tableName: cxInfo.tableName });
+    if (res == '操作成功') {
       message.success(res);
-      visibleTj.value = false;
-      resetTable.value = new Date().getTime();
     } else {
       message.warning(res.message);
     }
-  } else {
-    message.warning('请先选择要提交的文件!');
+    visibleCx.value = false;
+    revokeDes.value = '';
+    resetTable.value = new Date().getTime();
   }
-}
-//取消提交
-function handleTjCancel() {
-  formStateTj.file = '';
-  visibleTj.value = false;
-}
-//审批详情点击
-function handleSpDetail(data) {
-  visibleSp.value = true;
-  getTodoTaskShow({ tableId: data.id, tableName: data.tableName });
-  getHistoricFlowNewList({ tableId: data.id, tableName: data.tableName });
-  getHighlightImgNewList({ tableId: data.id, tableName: data.tableName });
-}
-//审批详情-审批历史列表
-async function getHistoricFlowNewList(params) {
-  historySpList.length = 0;
-  let res = await historicFlowNew({ ...params });
-  if (res.length != 0) {
-    res.forEach((el) => {
-      historySpList.push({
-        name: el.name,
-        username: el.assignees[0].username,
-        deleteReason: el.deleteReason,
-        comment: el.comment,
-        startTime: el.startTime,
-        endTime: el.endTime,
-        status: el.assignees[0].isExecutor ? '已处理' : '待处理',
+  //审批-撤销-取消
+  function handleCxCancel() {
+    revokeDes.value = '';
+    visibleCx.value = false;
+  }
+  /**
+   * 编辑事件
+   */
+  function handleEdit(data) {
+    isUpdate.value = true;
+    Object.assign(record, toRaw(data));
+    let index = record.fileSuffix.indexOf('.');
+    fileType.value = record.fileSuffix.substring(index + 1);
+    editID.value = record.id;
+
+    // 根据文件后缀名打开不同的模态框
+    if (['.dwg', '.mxcad'].includes(data.fileSuffix)) {
+      openCADModal(true, {
+        record,
       });
-    });
+    } else {
+      openModal(true, {
+        record,
+      });
+    }
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await props.deleteById({ id: record.id }, reload);
+  }
+  //权限编辑
+  function handlePermission(record) {
+    visiblePermission.value = true;
+    formStateQx.filePerm = record.filePerm;
+    permissionId.value = record.id;
   }
-}
-//审批详情-流程轨迹
-async function getHighlightImgNewList(params) {
-  let res = await getHighlightImgNew({ ...params });
-  let imageUrl = window.URL.createObjectURL(res);
-  imgSrc.value = imageUrl;
-}
-//判断是否显示撤回/驳回按钮
-async function getTodoTaskShow(params) {
-  let res = await getTodoTask({ ...params });
-  spInfo = Object.assign({}, res);
-  if (res.result) {
-    isShow.value = true;
-  } else {
-    isShow.value = false;
+  //编辑权限-确定
+  async function confirmQx() {
+    await updataFileParam({ id: permissionId.value, filePerm: formStateQx.filePerm }, reload);
+    visiblePermission.value = false;
   }
-}
-//审批通过/驳回弹窗关闭
-function spClose() {
-  visibleSp.value = false;
-  resetTable.value = new Date().getTime();
-}
-//审批-撤回提交
-function handleSpRevoke(data) {
-  visibleCx.value = true;
-  cxInfo = Object.assign({}, data);
-}
-//审批-撤销-确定
-async function handleCxOk() {
-  let res = await getCancelNew({ reason: revokeDes.value, tableId: cxInfo.id, tableName: cxInfo.tableName });
-  if (res == '操作成功') {
-    message.success(res);
-  } else {
-    message.warning(res.message);
+  //编辑权限-取消
+  function cancelQx() {
+    visiblePermission.value = false;
+    formStateQx.filePerm = '';
   }
-  visibleCx.value = false;
-  revokeDes.value = '';
-  resetTable.value = new Date().getTime();
-}
-//审批-撤销-取消
-function handleCxCancel() {
-  revokeDes.value = '';
-  visibleCx.value = false;
-}
-/**
- * 编辑事件
- */
-function handleEdit(data) {
-  isUpdate.value = true;
-  Object.assign(record, toRaw(data));
-  let index = record.fileSuffix.indexOf('.');
-  fileType.value = record.fileSuffix.substring(index + 1);
-  editID.value = record.id;
 
-  // 根据文件后缀名打开不同的模态框
-  if (['.dwg', '.mxcad'].includes(data.fileSuffix)) {
-    openCADModal(true, {
-      record,
-    });
-  } else {
-    openModal(true, {
-      record,
+  //下载文件
+  function handleDownLoad(record) {
+    props.downLoad({ id: record.id }).then((res) => {
+      let filename = `${record.fileName}`;
+      downFilePublic(res, filename);
     });
   }
-}
-
-/**
- * 删除事件
- */
-async function handleDelete(record) {
-  await props.deleteById({ id: record.id }, reload);
-}
-//权限编辑
-function handlePermission(record) {
-  visiblePermission.value = true
-  formStateQx.filePerm = record.filePerm  
-  permissionId.value = record.id
-}
-//编辑权限-确定
-async function confirmQx() {
-  await updataFileParam({ id: permissionId.value, filePerm: formStateQx.filePerm },reload)
-  visiblePermission.value = false
-}
-//编辑权限-取消
-function cancelQx() {
-  visiblePermission.value = false
-  formStateQx.filePerm = ''
-}
-
-//下载文件
-function handleDownLoad(record) {
-  props.downLoad({ id: record.id }).then((res) => {
-    let filename = `${record.fileName}`;
-    downFilePublic(res, filename);
-  });
-}
-// 下载公用方法
-function downFilePublic(content, fileName) {
-  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
-  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-  // IE10以上支持blob但是依然不支持download
-  if ('download' in document.createElement('a')) {
-    // 支持a标签download的浏览器
-    const link = document.createElement('a'); // 创建a标签
-    link.download = fileName; // a标签添加属性
-    link.style.display = 'none';
-    link.href = URL.createObjectURL(blob);
-    document.body.appendChild(link);
-    link.click(); // 执行下载
-    URL.revokeObjectURL(link.href); // 释放url
-    document.body.removeChild(link); // 释放标签
-  } else {
-    // 其他浏览器
-    navigator.msSaveBlob(blob, fileName);
+  // 下载公用方法
+  function downFilePublic(content, fileName) {
+    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
+    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+    // IE10以上支持blob但是依然不支持download
+    if ('download' in document.createElement('a')) {
+      // 支持a标签download的浏览器
+      const link = document.createElement('a'); // 创建a标签
+      link.download = fileName; // a标签添加属性
+      link.style.display = 'none';
+      link.href = URL.createObjectURL(blob);
+      document.body.appendChild(link);
+      link.click(); // 执行下载
+      URL.revokeObjectURL(link.href); // 释放url
+      document.body.removeChild(link); // 释放标签
+    } else {
+      // 其他浏览器
+      navigator.msSaveBlob(blob, fileName);
+    }
   }
-}
 
-//报表监测跳转
-function handlerJc(data) {
-  switch (data) {
-    case '1600000000000000001':
-      //粉尘报表
-      router.push('/dustDayReport/home');
-      break;
-    case '1500000000000000002':
-      //束管日报
-      router.push('/bundleDayReport/home');
-      break;
-    case '1500000000000000003':
-      //束管色谱仪
-      router.push('/bundleSpyDayReport/home');
-      break;
-    case '1400000000000000002':
-      //瓦斯日报巡检分析
-      router.push('/gas/gasDayReport/home');
-      break;
-    case '1400000000000000003':
-      //瓦斯日报巡检分析
-      router.push('/gas/gasDayReport/home');
-      break;
+  //报表监测跳转
+  function handlerJc(data) {
+    switch (data) {
+      case '1600000000000000001':
+        //粉尘报表
+        router.push('/dustDayReport/home');
+        break;
+      case '1500000000000000002':
+        //束管日报
+        router.push('/bundleDayReport/home');
+        break;
+      case '1500000000000000003':
+        //束管色谱仪
+        router.push('/bundleSpyDayReport/home');
+        break;
+      case '1400000000000000002':
+        //瓦斯日报巡检分析
+        router.push('/gas/gasDayReport/home');
+        break;
+      case '1400000000000000003':
+        //瓦斯日报巡检分析
+        router.push('/gas/gasDayReport/home');
+        break;
+    }
   }
-}
-// CAD预览相关的逻辑
-const [registerCADModal, { openModal: openCADModal }] = useModal();
+  // CAD预览相关的逻辑
+  const [registerCADModal, { openModal: openCADModal }] = useModal();
 
-defineExpose({
-  doRequest,
-});
+  defineExpose({
+    doRequest,
+  });
 </script>
 
 <style scoped lang="less">
-@ventSpace: zxm;
-
-@vent-table-no-hover: #00bfff10;
+  @ventSpace: zxm;
 
-:deep(.@{ventSpace}-table-cell-row-hover) {
-  background: #264d8833 !important;
-}
+  @vent-table-no-hover: #00bfff10;
 
-:deep(.@{ventSpace}-table-row-selected) {
-  background: #268bc522 !important;
-}
+  :deep(.@{ventSpace}-table-cell-row-hover) {
+    background: #264d8833 !important;
+  }
 
-:deep(.@{ventSpace}-table-tbody > tr > td) {
-  background-color: #0dc3ff05;
-}
+  :deep(.@{ventSpace}-table-row-selected) {
+    background: #268bc522 !important;
+  }
 
-:deep(.jeecg-basic-table-row__striped) {
-  td {
-    background-color: @vent-table-no-hover !important;
+  :deep(.@{ventSpace}-table-tbody > tr > td) {
+    background-color: #0dc3ff05;
   }
-}
 
-::v-deep .zxm-table-title {
-  display: none;
-}
+  :deep(.jeecg-basic-table-row__striped) {
+    td {
+      background-color: @vent-table-no-hover !important;
+    }
+  }
 
-.zxm-form {
-  padding: 20px 0px !important;
-  box-sizing: border-box;
-}
+  ::v-deep .zxm-table-title {
+    display: none;
+  }
 
-.opertion-btn {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  padding: 0px 20px;
+  .zxm-form {
+    padding: 20px 0px !important;
+    box-sizing: border-box;
+  }
 
-}
+  .opertion-btn {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    padding: 0px 20px;
+  }
 
-a[disabled] {
-  color: #ccc;
-}
+  a[disabled] {
+    color: #ccc;
+  }
 </style>