更新

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

@@ -4409,3 +4409,691 @@ export let menuList: any[] = [
   { name: '火灾预警', MenuItemList: [] },
   { name: '粉尘预警', MenuItemList: [] },
 ]
+export const testConfigBDFire: Config[] = [
+  {
+    deviceType: 'fireManageInfo',
+    moduleName: '重点区域风险监测',
+    pageType: 'BD_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:440px;height:300px;',
+      version: '保德',
+      position: 'top:170px;left:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '开采煤层自燃发火特性',
+    pageType: 'BD_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:440px;height:130px;',
+      version: '保德',
+      position: 'top:480px;left:10px;',
+    },
+  },
+  {
+    deviceType: 'pdArray',
+    moduleName: '带式输送机防灭火监控系统',
+    pageType: 'BD_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:440px;height:300px;',
+      version: '保德',
+      position: 'top:620px;left:10px;',
+    },
+  },
+  {
+    deviceType: 'sgGxObj',
+    moduleName: '工作面束管监测',
+    pageType: 'BD_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%',
+          },
+        ],
+      },
+      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:980px;height:300px;',
+      version: '保德',
+      position: 'bottom:8px;left:470px',
+    },
+  },
+  {
+    deviceType: 'sgGxObj',
+    moduleName: '工作面光纤监测',
+    pageType: 'BD_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:980px;height:280px;',
+      version: '保德',
+      position: 'bottom:8px;left:470px',
+    },
+  },
+  {
+    deviceType: 'obfObj',
+    moduleName: '密闭采空区监测区域',
+    pageType: 'BD_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:440px;height:230px;',
+      version: '保德',
+      position: 'top:170px;right:10px;',
+    },
+  },
+  {
+    deviceType: 'dsArray',
+    moduleName: '变电硐室防灭火监控系统',
+    pageType: 'BD_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:440px;height:240px;',
+      version: '保德',
+      position: 'top:410px;right:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '安全监控系统',
+    pageType: 'BD_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: [],
+      mock: {
+        aqjkArray: [
+          {
+            strinstallpos: '安全监控A',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+          {
+            strinstallpos: '安全监控B',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+          {
+            strinstallpos: '安全监控C',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+          {
+            strinstallpos: '安全监控D',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:440px;height:260px;',
+      version: '保德',
+      position: 'top:660px;right:10px;',
+    },
+  },
+];

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

@@ -0,0 +1,290 @@
+<template>
+  <div class="dane-bd" :style="style" :class="daneClass">
+    <div v-if="moduleName" class="dane-title">
+      <div class="common-navL" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">{{ moduleName }}</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-green.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';
+  });
+
+  //切换时间选项
+  // 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);
+      if (!selectedDeviceID.value) {
+        selectedDeviceID.value = options.value[0]?.value;
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+</script>
+
+<style scoped lang="less">
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .dane-bd {
+      --image-module-title: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/module-title.png');
+      --image-common-border: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border.png');
+      --image-common-border2: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border2.png');
+      --image-module-title-long: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/module-title-long.png');
+    }
+  }
+
+  .dane-bd {
+    --image-module-title: url('@/assets/images/home-container/configurable/firehome/module-title.png');
+    --image-common-border: url('@/assets/images/home-container/configurable/firehome/common-border.png');
+    --image-common-border2: url('@/assets/images/home-container/configurable/firehome/common-border2.png');
+    --image-module-title-long: url('@/assets/images/home-container/configurable/firehome/module-title-long.png');
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: var(--image-module-title);
+    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: 38px;
+      padding: 0 40px 0 50px;
+
+      .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;
+      }
+
+      // .common-navR-switch {
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: space-around;
+      //   width: 90%;
+
+      //   .status-text {
+      //     color: #1fb3f7;
+      //     font-size: 14px;
+      //   }
+
+      //   .status-text1 {
+      //     color: #a1dff8;
+      //     font-size: 14px;
+      //   }
+      // }
+    }
+
+    .dane-content {
+      height: calc(100% - 38px);
+      // border-image: linear-gradient(#1dabeb, #1dabeb22);
+      border-image: var(--vent-configurable-module-border-bd) 30;
+      // border-left: 1px;
+      // border-right: 1px;
+      border-width: 2px;
+      border-style: solid;
+      box-sizing: border-box;
+      border-top: none;
+      background-image: linear-gradient(#000723 94%, #1dabeb11);
+    }
+  }
+
+  .dane-l {
+    background: var(--image-common-border) no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-m {
+    // background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-s {
+    background: var(--image-common-border2) no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-w {
+    background-image: var(--image-module-title-long);
+    background-size: 100% 37px;
+  }
+
+  :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/green/components/moduleDual-green.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="dane-bd" :style="style" :class="daneClass">
+    <div class="dane-title">
+      <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-green.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 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';
+  });
+
+  //切换时间选项
+  // 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);
+      if (!selectedDeviceIDA.value) selectedDeviceIDA.value = optionsA.value[0]?.value;
+      if (!selectedDeviceIDB.value) selectedDeviceIDB.value = optionsB.value[0]?.value;
+    },
+    {
+      immediate: true,
+    }
+  );
+</script>
+
+<style scoped lang="less">
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .dane-bd {
+      --image-module-title: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/module-title.png');
+      --image-common-border: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border.png');
+      --image-common-border2: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border2.png');
+      --image-module-title-long: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/module-title-long.png');
+    }
+  }
+
+  .dane-bd {
+    --image-module-title: url('@/assets/images/home-container/configurable/firehome/module-title.png');
+    --image-common-border: url('@/assets/images/home-container/configurable/firehome/common-border.png');
+    --image-common-border2: url('@/assets/images/home-container/configurable/firehome/common-border2.png');
+    --image-module-title-long: url('@/assets/images/home-container/configurable/firehome/module-title-long.png');
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: var(--image-module-title);
+    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 0 50px;
+
+      .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;
+      }
+
+      // .common-navR-switch {
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: space-around;
+      //   width: 90%;
+
+      //   .status-text {
+      //     color: #1fb3f7;
+      //     font-size: 14px;
+      //   }
+
+      //   .status-text1 {
+      //     color: #a1dff8;
+      //     font-size: 14px;
+      //   }
+      // }
+    }
+
+    .dane-content {
+      height: calc(100% - 34px);
+      // border-image: linear-gradient(#1dabeb, #1dabeb22);
+      border-image: var(--vent-configurable-module-border-bd) 30;
+      // border-left: 1px;
+      // border-right: 1px;
+      border-width: 2px;
+      border-style: solid;
+      box-sizing: border-box;
+      border-top: none;
+      background-image: linear-gradient(#000723 94%, #1dabeb11);
+    }
+  }
+
+  .dane-l {
+    background: var(--image-common-border) no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-m {
+    // background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-s {
+    background: var(--image-common-border2) no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-w {
+    background-image: var(--image-module-title-long);
+    background-size: 100% 37px;
+  }
+
+  .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/green/fire-green.vue

@@ -2,8 +2,8 @@
   <div class="fire-green">
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
-        <div v-if="!route.query.embed" class="top-bg">
-        <greenNav :activeIndex="activeIndex"/>
+      <div v-if="!route.query.embed" class="top-bg">
+        <greenNav :activeIndex="activeIndex" />
       </div>
       <div class="main-container">
         <ModuleOriginal v-for="(cfg, index) in configs" :key="cfg.deviceType + index" :show-style="cfg.showStyle"
@@ -18,7 +18,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted,ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import greenNav from './components/green-nav.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
@@ -31,12 +31,11 @@ const { title = '智能通风管控系统' } = useGlobSetting();
 const { configs, fetchConfigs } = useInitConfigs();
 const { data, updateData } = useInitPage(title);
 const route = useRoute();
-let activeIndex=ref(2)
+let activeIndex = ref(2)
 let interval: number | undefined;
 onMounted(() => {
   fetchConfigs('fire-green').then(() => {
     configs.value = testConfigFireGreen;
-    // updateEnhancedConfigs(configs.value);
 
     Promise.resolve(BDFireMock).then(updateData);
     // getHomeData({}).then(updateData);
@@ -63,9 +62,10 @@ onUnmounted(() => {
 .fire-green {
   --image-model_left-area: url('@/assets/images/home-green/green-bd-left.png');
   --image-model_bottom-area: url('@/assets/images/home-green/green-bd-bottom.png');
-   width: 100%;
+  width: 100%;
   height: 100%;
   position: relative;
+
   .top-bg {
     width: 100%;
     height: 96px;

src/views/vent/home/configurable/green/fire1.vue

@@ -0,0 +1,286 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="fire-green">
+    <div class="top-bg">
+      <greenNav :activeIndex="activeIndex" />
+    </div>
+ <div class="main-container">
+    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+    <div class="left-t">
+      <div class="tcontent-area">
+        <div class="tcontent-l">
+          <div>监测</div>
+          <div>区域</div>
+        </div>
+        <div class="tcontent-c">
+          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
+            {{ data.fireAllMineWarn }}
+          </div>
+          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
+        </div>
+        <div class="tcontent-r">
+          <div>火灾</div>
+          <div>风险</div>
+        </div>
+      </div>
+    </div>
+    <div class="right-t">
+      <div class="tcontent-l" @click="redirectTo('/grout-home?mock-login=1')">
+        <div>智能注浆系统</div>
+      </div>
+      <div class="tcontent-r" @click="redirectTo('/nitrogen-home?mock-login=1')">
+        <div>智能注氮系统</div>
+      </div>
+    </div>
+    <ModuleGreen 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" />
+    <ModuleDual 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>
+  
+    <!-- <div style="width: calc(100% - 928px); height: 544px; position: absolute; left: 464px; top: 96px">
+      <VentModal />
+    </div> -->
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import greenNav from './components/green-nav.vue';
+import ModuleGreen from './components/module-green.vue';
+import ModuleDual from './components/moduleDual-green.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 { testConfigBDFire } from '../configurable.data';
+// import { getToken } from '/@/utils/auth';
+let activeIndex = ref(2)
+
+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('BD_fire').then(() => {
+    configs.value = testConfigBDFire;
+    Promise.resolve(BDFireMock).then(updateData);
+    // 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} {
+  .fire-green {
+    --image-bg: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/bg.png');
+    --image-fire-title: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/fire-title.png);
+    --image-qkjaq: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/qkjaq.png');
+    --image-common-border2: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border2.png');
+    --image-znzjxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/znzjxt.png);
+    --image-znzdxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/znzdxt.png);
+  }
+}
+
+.fire-green {
+  --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
+  --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
+  --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
+  --image-common-border2: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
+  --image-znzjxt: url(/@/assets/images/home-container/configurable/firehome/znzjxt.png);
+  --image-znzdxt: url(/@/assets/images/home-container/configurable/firehome/znzdxt.png);
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+
+  .top-bg {
+    width: 100%;
+    height: 96px;
+    position: absolute;
+    z-index: 1;
+  }
+  .main-container {
+    position: absolute;
+    top: 96px;
+    width: calc(100% - 30px);
+    height: calc(100% - 96px);
+    margin: 0px 15px;
+    box-sizing: border-box;
+    border: 1px solid red;
+  }
+
+  .module-dropdown {
+    padding: 10px;
+    background-image: linear-gradient(to bottom, #036886, #072a40);
+    border-bottom: 2px solid #3df6ff;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+
+  .module-dropdown-original {
+    padding: 10px;
+    background-image: linear-gradient(to bottom, #036886, #072a40);
+    border-bottom: 2px solid #3df6ff;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+
+  .module-trigger-button {
+    color: @vent-font-color;
+    background-image: linear-gradient(to bottom, #036886, #072a40);
+    border: none;
+    border-bottom: 2px solid #3df6ff;
+  }
+}
+
+.left-t {
+  position: absolute;
+  height: 115px;
+  top: 50px;
+  left: 10px;
+  width: 440px;
+  background-image: var(--image-qkjaq);
+  // background-color: #000723;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+
+  .tcontent-area {
+    display: flex;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 70px;
+    padding: 0 15px;
+    transform: translate(0, -40%);
+
+    .tcontent-l {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #9da5aa;
+      font-size: 14px;
+      font-weight: bold;
+      letter-spacing: 2px;
+    }
+
+    .tcontent-c {
+      display: flex;
+      flex: 3;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
+    .tcontent-r {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #9da5aa;
+      font-size: 14px;
+      font-weight: bold;
+      letter-spacing: 2px;
+    }
+  }
+}
+
+.right-t {
+  position: absolute;
+  // height: 160px;
+  height: 115px;
+  right: 10px;
+  top: 50px;
+  width: 440px;
+  background-image: var(--image-common-border2);
+  background-color: #000723;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .tcontent-l {
+    flex: 1;
+    height: 100%;
+    font-size: 16px;
+    font-weight: bold;
+    background-image: var(--image-znzjxt);
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    text-align: center;
+    padding-top: 85px;
+  }
+
+  .tcontent-r {
+    flex: 1;
+    height: 100%;
+    font-size: 16px;
+    font-weight: bold;
+    background-image: var(--image-znzdxt);
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    text-align: center;
+    padding-top: 85px;
+  }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+</style>