[Feat 0000] 浅蓝色粉尘、通风首页开发

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

@@ -1,281 +1,70 @@
 <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>
-    </div>
-    <div class="dane-content">
-      <slot>
-        <ContentNew style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
-      </slot>
-    </div>
-  </div>
+  <!-- 新版模块 -->
+  <component
+    :is="getModuleComponent(showStyle)"
+    :style="style"
+    :title="moduleName"
+    :visible="visible"
+    :class="{ 'cursor-pointer': !!moduleData.to }"
+    @close="$emit('close')"
+    @click="redirectTo"
+  >
+    <slot>
+      <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
+      <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+    </slot>
+  </component>
 </template>
-
-<script setup lang="ts">
-import ContentNew from './content-New.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-2';
-  }
-  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;
+<script lang="ts" setup>
+  import Header from './header.vue';
+  import Content from '../components/content.vue';
+  import ModuleLeft from './moduleLeft-warn.vue';
+  import ModuleBottom from './moduleBottom-warn.vue';
+  import { computed, ref } from 'vue';
+  import { openWindow } from '/@/utils';
+  import { getFormattedText } from '../../hooks/helper';
+  import ModuleMiniWarn from './moduleMini-warn.vue';
+  // import { ModuleProps } from '../types';
+
+  const props = defineProps<{
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
+    deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  defineEmits(['close', 'click']);
+
+  const { header } = props.moduleData;
+  const selectedData = ref();
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position;
+  });
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  function getModuleComponent({ size, position }) {
+    const [__, width] = size.match(/width:([0-9]+)px/) || [];
+    const [___, height] = size.match(/height:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return ModuleBottom;
     }
-
-    .common-navR {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
+    if (parseInt(height) > 400) {
+      return ModuleLeft;
     }
+    return ModuleMiniWarn;
   }
 
-  .dane-content {
-    height: calc(100% - 38px);
-    box-sizing: border-box;
-    border-top: none;
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(getFormattedText(selectedData.value, to));
   }
-}
-.left-1 {
-  background: var(--image-Left1) no-repeat;
-  background-size: 100% 100%;
-  margin-left: 35px;
-}
-.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%;
-  margin-left: -32px;
-}
-.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>
+</script>

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

@@ -8,7 +8,7 @@
     <div class="dane-content">
       <div class="common-navR">
         <!-- 下拉框 -->
-        <div class="common-navR-select" v-if="header.show && header.selector.show">
+        <div class="flex-grow-1" v-if="header.show && header.selector.show">
           <a-select
             style="width: 350px; font-size: 16px"
             size="small"
@@ -19,7 +19,7 @@
             @change="selectHandler"
           />
         </div>
-        <div v-if="header.show && header.slot.show">
+        <div class="flex-basis-100px flex-grow-1" v-if="header.show && header.slot.show">
           {{ getFormattedText(selectedDevice, header.slot.value) }}
         </div>
       </div>
@@ -31,196 +31,196 @@
 </template>
 
 <script setup lang="ts">
-import ContentFireNew from './content-FireNew.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 position = props.showStyle.position;
-  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';
-  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,
-  }
-);
+  import ContentFireNew from './content-FireNew.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 position = props.showStyle.position;
+    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';
+    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';
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-@{theme-deepblue} {
-  .dane-bd {
-    --image-Content: url('@/assets/images/fireNew/4-3.png');
-    --image-Select: url('@/assets/images/fireNew/5.png');
+  @import '/@/design/theme.less';
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
-}
-
-.dane-bd {
-  --image-Select: url('@/assets/images/fireNew/5.png');
-  --image-Content: url('@/assets/images/fireNew/4-3.png');
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-
-  .dane-title {
-    width: 94%;
-    height: 40px;
-    text-align: center;
-    padding-top: 9px;
-
-    .common-navL {
-      position: relative;
-      align-items: center;
-      color: #fff;
-      font-size: 13px;
-      font-weight: bold;
-      font-family: 'douyuFont';
+  @{theme-deepblue} {
+    .dane-bd {
+      --image-Content: url('@/assets/images/fireNew/4-3.png');
+      --image-Select: url('@/assets/images/fireNew/5.png');
     }
   }
 
-  .dane-content {
-    height: calc(100% - 38px);
-    box-sizing: border-box;
-    border-top: none;
-    .common-navR {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--image-Select) no-repeat;
-      background-size: 100% 100%;
-      width: 87%;
-      margin-left: 30px;
+  .dane-bd {
+    --image-Select: url('@/assets/images/fireNew/5.png');
+    --image-Content: url('@/assets/images/fireNew/4-3.png');
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+
+    .dane-title {
+      width: 94%;
+      height: 40px;
+      text-align: center;
+      padding-top: 9px;
+
+      .common-navL {
+        position: relative;
+        align-items: center;
+        color: #fff;
+        font-size: 13px;
+        font-weight: bold;
+        font-family: 'douyuFont';
+      }
+    }
+
+    .dane-content {
+      height: calc(100% - 38px);
+      box-sizing: border-box;
+      border-top: none;
+      .common-navR {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--image-Select) no-repeat;
+        background-size: 100% 100%;
+        width: 87%;
+        margin-left: 30px;
+      }
     }
   }
-}
-.dane-m {
-  background: var(--image-Content) 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;
-}
+  .dane-m {
+    background: var(--image-Content) 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/blue/components/moduleLeft-warn.vue

@@ -10,101 +10,101 @@
   </div>
 </template>
 <script lang="ts" setup>
-const props = defineProps<{
-  deviceType: string;
-  title: string;
-  visible: boolean;
-}>();
-const emit = defineEmits(['close', 'click']);
-const deviceType = props.deviceType;
+  const props = defineProps<{
+    deviceType: string;
+    title: string;
+    visible: boolean;
+  }>();
+  const emit = defineEmits(['close', 'click']);
+  const deviceType = props.deviceType;
 
-function closeModel() {
-  emit('close');
-}
-function clickHandler() {
-  emit('click');
-}
+  function closeModel() {
+    emit('close');
+  }
+  function clickHandler() {
+    emit('click');
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@{theme-deepblue} {
+  @{theme-deepblue} {
+    .module-content {
+      --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/model_original_title_bg.png');
+    }
+  }
+  .module-content1 {
+    --bg-height: 28px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    padding: 15px 15px 0px 15px;
+  }
   .module-content {
-    --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/model_original_title_bg.png');
+    --bg-height: 28px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    background: url('@/assets/images/home-warn/2-1.png') no-repeat;
+    background-size: 100% 100%;
+    padding: 15px 15px 0px 15px;
   }
-}
-.module-content1 {
-  --bg-height: 28px;
-  color: #fff;
-  box-sizing: border-box;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  padding: 15px 15px 0px 15px;
-}
-.module-content {
-  --bg-height: 28px;
-  color: #fff;
-  box-sizing: border-box;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  background: url('@/assets/images/home-warn/2-1.png') no-repeat;
-  background-size: 100% 100%;
-  padding: 15px 15px 0px 15px;
-}
 
-.module-content__title__expand {
-  width: 100%;
-  text-align: center;
-  font-weight: bold;
-  font-size: 16px;
-  line-height: 0px;
-}
+  .module-content__title__expand {
+    width: 100%;
+    text-align: center;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 0px;
+  }
 
-// .module-content__title {
-//   width: 50%;
-//   height: var(--bg-height);
-//   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
-//   background-size: 100% 100%;
-//   position: relative;
-//   text-align: right;
-//   padding: 4px 10% 0 0;
-// }
+  // .module-content__title {
+  //   width: 50%;
+  //   height: var(--bg-height);
+  //   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
+  //   background-size: 100% 100%;
+  //   position: relative;
+  //   text-align: right;
+  //   padding: 4px 10% 0 0;
+  // }
 
-// 固定在父容器右上角的按钮图标
-// .action-btn {
-//   width: 18px;
-//   height: 18px;
-//   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
-//   position: absolute;
-//   right: 0;
-//   top: 0;
-// }
-// .close-btn {
-//   transform: rotate(-90deg);
-// }
+  // 固定在父容器右上角的按钮图标
+  // .action-btn {
+  //   width: 18px;
+  //   height: 18px;
+  //   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
+  //   position: absolute;
+  //   right: 0;
+  //   top: 0;
+  // }
+  // .close-btn {
+  //   transform: rotate(-90deg);
+  // }
 
-.module-slot {
-  height: calc(100% - 46px);
-  width: 100%;
-  backdrop-filter: blur(5px);
-  margin-top: 26px;
-}
+  .module-slot {
+    height: calc(100% - 46px);
+    width: 100%;
+    backdrop-filter: blur(5px);
+    margin-top: 26px;
+  }
 
-// Transition动画相关
-.v-enter-active,
-.v-leave-active {
-  transition: all 0.3s ease;
-}
+  // Transition动画相关
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
 
-.v-enter-from,
-.v-leave-to {
-  // opacity: 1;
-  transform: translateX(-100%);
-  // transform: scaleY(0);
-  // transform-origin: center top;
-}
+  .v-enter-from,
+  .v-leave-to {
+    // opacity: 1;
+    transform: translateX(-100%);
+    // transform: scaleY(0);
+    // transform-origin: center top;
+  }
 </style>

src/views/vent/home/configurable/blue/components/moduleMini-warn.vue

@@ -0,0 +1,111 @@
+<template>
+  <div v-if="visible" :class="deviceType === 'warnInfo' ? 'module-content1' : 'module-content'">
+    <div v-if="title" class="module-content__title__expand">
+      <span class="action-btn close-btn" @click="closeModel"></span>
+      <span @click="clickHandler">{{ title }}</span>
+    </div>
+    <div class="module-slot">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  const props = defineProps<{
+    deviceType: string;
+    title: string;
+    visible: boolean;
+  }>();
+  const emit = defineEmits(['close', 'click']);
+  const deviceType = props.deviceType;
+
+  function closeModel() {
+    emit('close');
+  }
+  function clickHandler() {
+    emit('click');
+  }
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .module-content {
+      --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/model_original_title_bg.png');
+    }
+  }
+  .module-content1 {
+    --bg-height: 28px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    padding: 15px 15px 0px 15px;
+  }
+  .module-content {
+    --image-Content: url('/src/assets/images/fireNew/4-3.png');
+    --bg-height: 28px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    background: var(--image-Content) no-repeat;
+    background-size: 100% 100%;
+    padding: 15px 15px 0px 15px;
+  }
+
+  .module-content__title__expand {
+    width: 100%;
+    text-align: center;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 0px;
+  }
+
+  // .module-content__title {
+  //   width: 50%;
+  //   height: var(--bg-height);
+  //   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
+  //   background-size: 100% 100%;
+  //   position: relative;
+  //   text-align: right;
+  //   padding: 4px 10% 0 0;
+  // }
+
+  // 固定在父容器右上角的按钮图标
+  // .action-btn {
+  //   width: 18px;
+  //   height: 18px;
+  //   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
+  //   position: absolute;
+  //   right: 0;
+  //   top: 0;
+  // }
+  // .close-btn {
+  //   transform: rotate(-90deg);
+  // }
+
+  .module-slot {
+    height: calc(100% - 46px);
+    width: 100%;
+    backdrop-filter: blur(5px);
+    margin-top: 26px;
+  }
+
+  // Transition动画相关
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  .v-enter-from,
+  .v-leave-to {
+    // opacity: 1;
+    transform: translateX(-100%);
+    // transform: scaleY(0);
+    // transform-origin: center top;
+  }
+</style>

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

@@ -9,15 +9,14 @@
         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 />
+        <!-- <EyeFilled /> -->
       </a-button>
     </div>
     <div class="top-bg">
       <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
       <NewNav :Title="mainTitle" />
     </div>
-    <div class="left-t"> </div>
-    <div class="right-t"> </div>
+    <!-- <ModuleDustNew -->
     <ModuleDustNew
       v-for="cfg in configs"
       :key="cfg.deviceType"
@@ -31,158 +30,159 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-// import { CaretDownOutlined } from '@ant-design/icons-vue';
-import NewNav from './components/NewNavFire.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('dustAllMineWarn').join(','),
-    }).then(updateData);
+  import { onMounted, onUnmounted } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  import ModuleDustNew from './components/ModuleDustNew.vue';
+  import NewNav from './components/NewNavFire.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('dustAllMineWarn').join(','),
+      }).then(updateData);
+    });
+    setInterval(() => {
+      getDisHome({
+        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
+      }).then(updateData);
+    }, 2000);
   });
-  setInterval(() => {
-    getDisHome({
-      dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
-    }).then(updateData);
-  }, 2000);
-});
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 
-function redirectTo(url) {
-  window.open(url);
-}
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @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');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
   }
-}
 
-.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;
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+    }
+  }
 
-  .top-bg {
+  .company-home {
+    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
     width: 100%;
-    height: 56px;
-    background: var(--image-modal-top) no-repeat center;
-    position: absolute;
-    z-index: 1;
-    .main-title {
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+
+    .top-bg {
+      width: 100%;
       height: 56px;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      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;
+      }
     }
-    .top-nav {
+    .left-t {
       position: absolute;
-      top: 0;
-      width: 880px;
+      width: 28%;
       height: 100%;
-      display: flex;
-      justify-content: flex-start;
+      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+      z-index: 0;
+    }
+    .right-t {
+      position: absolute;
+      width: 172%;
+      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;
     }
   }
-  .left-t {
-    position: absolute;
-    width: 28%;
-    height: 100%;
-    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-    z-index: 0;
-  }
-  .right-t {
-    position: absolute;
-    width: 172%;
-    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;
   }
-}
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

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

@@ -51,173 +51,173 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted } from 'vue';
-// import { CaretDownOutlined } from '@ant-design/icons-vue';
-import NewNav from './components/NewNavFire.vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import ModuleNew from './components/ModuleNew.vue';
-import ModuleFireNew from './components/ModuleFireNew.vue';
-import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-// import { BDFireMock } from './mock';
-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 && index !== 5;
-  })
-);
-const cfgA = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 3;
-  })
-);
-const cfgB = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 4;
-  })
-);
-const cfgTop = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 5;
-  })
-);
-const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData /** updateEnhancedConfigs */ } = useInitPage('火灾预警系统');
-let interval: number | undefined;
-onMounted(() => {
-  // fetchConfigs('New_fire').then(() => {
-  //   configs.value = testConfigNewFire;
-  //   Promise.resolve(BDFireMock).then(updateData);
-  // });
-  // setInterval(() => {
-  //   Promise.resolve(BDFireMock).then(updateData);
-  // }, 2000);
-  fetchConfigs('New_fire').then(() => {
-    configs.value = testConfigNewFire;
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
+  import { computed, onMounted, onUnmounted } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  import NewNav from './components/NewNavFire.vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import ModuleNew from './components/ModuleNew.vue';
+  import ModuleFireNew from './components/ModuleFireNew.vue';
+  import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  // import { BDFireMock } from './mock';
+  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 && index !== 5;
+    })
+  );
+  const cfgA = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 3;
+    })
+  );
+  const cfgB = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 4;
+    })
+  );
+  const cfgTop = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 5;
+    })
+  );
+  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData /** updateEnhancedConfigs */ } = useInitPage('火灾预警系统');
+  let interval: number | undefined;
+  onMounted(() => {
+    // fetchConfigs('New_fire').then(() => {
+    //   configs.value = testConfigNewFire;
+    //   Promise.resolve(BDFireMock).then(updateData);
+    // });
+    // setInterval(() => {
+    //   Promise.resolve(BDFireMock).then(updateData);
+    // }, 2000);
+    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);
   });
-  setInterval(() => {
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
-  }, 2000);
-});
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 
-function redirectTo(url) {
-  window.open(url);
-}
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @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/fireNew/1.png');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
   }
-}
 
-.company-home {
-  --image-modal-top: url('@/assets/images/fireNew/1.png');
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: url('@/assets/images/fireNew/FireBj.png') no-repeat center;
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/fireNew/1.png');
+    }
+  }
 
-  .top-bg {
+  .company-home {
+    --image-modal-top: url('@/assets/images/fireNew/1.png');
     width: 100%;
-    height: 56px;
-    background: var(--image-modal-top) no-repeat center;
-    position: absolute;
-    z-index: 1;
-    .main-title {
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: url('@/assets/images/fireNew/FireBj.png') no-repeat center;
+
+    .top-bg {
+      width: 100%;
       height: 56px;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      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;
+      }
     }
-    .top-nav {
+    .left-t {
       position: absolute;
-      top: 0;
-      width: 880px;
+      width: 28%;
       height: 100%;
-      display: flex;
-      justify-content: flex-start;
+      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+      z-index: 0;
+    }
+    .right-t {
+      position: absolute;
+      width: 172%;
+      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;
     }
   }
-  .left-t {
-    position: absolute;
-    width: 28%;
-    height: 100%;
-    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-    z-index: 0;
-  }
-  .right-t {
-    position: absolute;
-    width: 172%;
-    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;
   }
-}
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

src/views/vent/home/configurable/blue/ventNew.vue

@@ -9,158 +9,154 @@
       <!-- <div class="main-title">{{ mainTitle }}</div> -->
       <NewNav :Title="mainTitle" />
     </div>
-    <div class="left-t"> </div>
-    <div class="right-t"> </div>
-    <template v-if="isNew">
-      <ModuleNew
-        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"
-      />
-    </template>
+    <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 { onMounted, onUnmounted } from 'vue';
-// import { CaretDownOutlined } from '@ant-design/icons-vue';
-// import MonitorCenter from './components/MonitorCenter.vue';
-import NewNav from './components/NewNavFire.vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import ModuleNew from './components/ModuleNew.vue';
-// import { useRoute } from 'vue-router';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-import { getHomeData } from '../configurable.api';
-// import { useRoute } from 'vue-router';
-import { testConfigVentNew } from '../configurable.data';
-const { configs, isNew, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage('一通三防智能管控平台');
-// const route = useRoute();
-let interval: number | undefined;
+  import { onMounted, onUnmounted } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  // import MonitorCenter from './components/MonitorCenter.vue';
+  import NewNav from './components/NewNavFire.vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import ModuleDustNew from './components/ModuleDustNew.vue';
+  // import { useRoute } from 'vue-router';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getHomeData } from '../configurable.api';
+  // import { useRoute } from 'vue-router';
+  import { testConfigVentNew } from '../configurable.data';
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('一通三防智能管控平台');
+  // const route = useRoute();
+  let interval: number | undefined;
 
-onMounted(() => {
-  fetchConfigs('vent').then(() => {
+  onMounted(() => {
+    // fetchConfigs('vent_new').then(() => {
     configs.value = testConfigVentNew;
-    updateEnhancedConfigs(configs.value);
+    // updateEnhancedConfigs(configs.value);
 
     getHomeData({}).then(updateData);
+    // });
+    setInterval(() => {
+      getHomeData({}).then(updateData);
+    }, 60000);
   });
-  setInterval(() => {
-    getHomeData({}).then(updateData);
-  }, 60000);
-});
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @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');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
   }
-}
 
-.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;
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+    }
+  }
 
-  .top-bg {
+  .company-home {
+    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
     width: 100%;
-    height: 56px;
-    background: var(--image-modal-top) no-repeat center;
-    position: absolute;
-    z-index: 1;
-    .main-title {
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+
+    .top-bg {
+      width: 100%;
       height: 56px;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      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;
+      }
     }
-    .top-nav {
+    .left-t {
       position: absolute;
-      top: 0;
-      width: 880px;
+      width: 28%;
       height: 100%;
-      display: flex;
-      justify-content: flex-start;
+      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+      z-index: 0;
+    }
+    .right-t {
+      position: absolute;
+      width: 172%;
+      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;
     }
   }
-  .left-t {
-    position: absolute;
-    width: 28%;
-    height: 100%;
-    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-    z-index: 0;
-  }
-  .right-t {
-    position: absolute;
-    width: 172%;
-    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;
   }
-}
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

src/views/vent/home/configurable/blue/warnMonitor.vue

@@ -5,7 +5,7 @@
     </div>
     <template v-if="!route.query.deviceType">
       <div class="main-container">
-        <ModuleOriginal
+        <ModuleDustNew
           v-for="(cfg, index) in configs"
           :key="cfg.deviceType + index"
           :show-style="cfg.showStyle"
@@ -24,162 +24,161 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import ModuleOriginal from './components/ModuleWarnMonitor.vue';
-import CenterAreaWarn from './components/center-area-warn.vue';
-import { useRoute } from 'vue-router';
-import { useGlobSetting } from '/@/hooks/setting';
-import { testConfigWarnMonitor } from '../configurable.data';
-import NewNav from './components/NewNavFire.vue';
-import { getTotal, getDisasterProportion } from '../configurable.api';
-const { title = '智能通风管控系统' } = useGlobSetting();
-const { configs, fetchConfigs } = useInitConfigs();
-const { data, updateData } = useInitPage(title);
-const route = useRoute();
-const paramData = reactive<any>({});
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag = false) {
-  timer = setTimeout(
-    async () => {
-      getTotal({}).then(updateData);
-      getCenterList();
-      if (timer) {
-        timer = null;
-      }
-      getMonitor();
-    },
-    flag ? 0 : 20000
-  );
-}
-async function getCenterList() {
-  let res = await getTotal({});
-  paramData.fire = res.info.sysInfo.fireS.maxLevel;
-  paramData.tf = res.info.sysInfo.ventS.maxLevel;
-  paramData.ws = res.info.sysInfo.gasS.maxLevel;
-  paramData.sb = res.info.deviceWarnInfo.maxLevel;
-  paramData.fc = res.info.sysInfo.dustS.maxLevel;
-  paramData.riskLevel = res.info.riskLevel;
-  let Levels = Object.assign({}, await getDisasterProportion({}));
-  paramData.levels =
-    Levels.level > 0 && Levels.level <= 1
-      ? 101
-      : Levels.level > 1 && Levels.level <= 2
-      ? 102
-      : Levels.level > 2 && Levels.level <= 3
-      ? 103
-      : Levels.level > 3 && Levels.level <= 4
-      ? 104
-      : 0;
-  paramData.riskData = [
-    { name: '通风', value: Levels.vent },
-    { name: '火灾', value: Levels.fire },
-    { name: '瓦斯', value: Levels.gas },
-    { name: '粉尘', value: Levels.dust },
-  ];
-}
-onMounted(() => {
-  fetchConfigs('fusion-warn-green').then(() => {
-    configs.value = testConfigWarnMonitor;
-    // updateEnhancedConfigs(configs.value);
-    // Promise.resolve(BDFireMock).then(updateData);
-    getMonitor(true);
+  import { onMounted, onUnmounted, reactive, ref } from 'vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import ModuleDustNew from './components/ModuleDustNew.vue';
+  import CenterAreaWarn from './components/center-area-warn.vue';
+  import { useRoute } from 'vue-router';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { testConfigWarnMonitor } from '../configurable.data';
+  import NewNav from './components/NewNavFire.vue';
+  import { getTotal, getDisasterProportion } from '../configurable.api';
+  const { title = '智能通风管控系统' } = useGlobSetting();
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { data, updateData } = useInitPage(title);
+  const route = useRoute();
+  const paramData = reactive<any>({});
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag = false) {
+    timer = setTimeout(
+      async () => {
+        getTotal({}).then(updateData);
+        getCenterList();
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      },
+      flag ? 0 : 20000
+    );
+  }
+  async function getCenterList() {
+    let res = await getTotal({});
+    paramData.fire = res.info.sysInfo.fireS.maxLevel;
+    paramData.tf = res.info.sysInfo.ventS.maxLevel;
+    paramData.ws = res.info.sysInfo.gasS.maxLevel;
+    paramData.sb = res.info.deviceWarnInfo.maxLevel;
+    paramData.fc = res.info.sysInfo.dustS.maxLevel;
+    paramData.riskLevel = res.info.riskLevel;
+    let Levels = Object.assign({}, await getDisasterProportion({}));
+    paramData.levels =
+      Levels.level > 0 && Levels.level <= 1
+        ? 101
+        : Levels.level > 1 && Levels.level <= 2
+        ? 102
+        : Levels.level > 2 && Levels.level <= 3
+        ? 103
+        : Levels.level > 3 && Levels.level <= 4
+        ? 104
+        : 0;
+    paramData.riskData = [
+      { name: '通风', value: Levels.vent },
+      { name: '火灾', value: Levels.fire },
+      { name: '瓦斯', value: Levels.gas },
+      { name: '粉尘', value: Levels.dust },
+    ];
+  }
+  onMounted(() => {
+    fetchConfigs('fusion-warn-green').then(() => {
+      configs.value = testConfigWarnMonitor;
+      // updateEnhancedConfigs(configs.value);
+      // Promise.resolve(BDFireMock).then(updateData);
+      getMonitor(true);
+    });
   });
-});
 
-onUnmounted(() => {
-  clearTimeout(timer);
-  timer = undefined;
-});
+  onUnmounted(() => {
+    clearTimeout(timer);
+    timer = undefined;
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-
-.fusion-home {
-  width: 100%;
-  height: 100%;
-  position: relative;
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
 
-  .top-bg {
+  .fusion-home {
     width: 100%;
-    height: 56px;
-    background: url('@/assets/images/home-warn/1-1.png') no-repeat center;
-    position: absolute;
-    z-index: 1;
-    .main-title {
+    height: 100%;
+    position: relative;
+
+    .top-bg {
+      width: 100%;
       height: 56px;
-      color: #fff;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    .top-nav {
+      background: url('@/assets/images/home-warn/1-1.png') no-repeat center;
       position: absolute;
-      top: 0;
-      width: 880px;
-      height: 100%;
-      display: flex;
-      justify-content: flex-start;
+      z-index: 1;
+      .main-title {
+        height: 56px;
+        color: #fff;
+        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;
+      }
     }
-  }
-  .main-container {
-    width: 100%;
-    height: 100%;
-    background: url('@/assets/images/home-warn/bg.png') no-repeat;
-    background-size: 100% 100%;
-    .left-area {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 420px;
+    .main-container {
+      width: 100%;
       height: 100%;
-      padding: 15px;
-      box-sizing: border-box;
-      overflow-y: auto;
-    }
+      background: url('@/assets/images/home-warn/bg.png') no-repeat;
+      background-size: 100% 100%;
+      .left-area {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 420px;
+        height: 100%;
+        padding: 15px;
+        box-sizing: border-box;
+        overflow-y: auto;
+      }
 
-    .bottom-area {
-      position: absolute;
-      left: 435px;
-      bottom: 0;
-      width: calc(100% - 435px);
-      height: 290px;
-      padding: 15px;
-      box-sizing: border-box;
+      .bottom-area {
+        position: absolute;
+        left: 435px;
+        bottom: 0;
+        width: calc(100% - 435px);
+        height: 290px;
+        padding: 15px;
+        box-sizing: border-box;
+      }
+
+      .right-area {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        width: 420px;
+        height: calc(100% - 305px);
+        padding: 15px 15px 0px 15px;
+        box-sizing: border-box;
+        overflow-y: auto;
+      }
     }
 
-    .right-area {
+    .center-area {
       position: absolute;
-      right: 0px;
-      top: 0px;
-      width: 420px;
-      height: calc(100% - 305px);
-      padding: 15px 15px 0px 15px;
-      box-sizing: border-box;
-      overflow-y: auto;
+      left: 450px;
+      top: 0;
+      width: calc(100% - 900px);
+      height: calc(100% - 270px);
     }
   }
 
-  .center-area {
-    position: absolute;
-    left: 450px;
-    top: 0;
-    width: calc(100% - 900px);
-    height: calc(100% - 270px);
+  :deep(.loading-box) {
+    position: unset;
   }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
 </style>
-