[Feat 0000]蓝色新火灾、粉尘首页开发

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,384 @@
   </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;
+  margin-left: 73px;
+}
+.list-item_I {
+  width: 155px;
+  height: 57px;
+  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>