[Feat 0000]火灾首页确实资源修改

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

@@ -135,7 +135,7 @@ watch(
   z-index: 2;
 
   .dane-title {
-    width: 100%;
+    width: 94%;
     height: 40px;
     text-align: center;
     padding-top: 9px;
@@ -144,7 +144,8 @@ watch(
       position: relative;
       align-items: center;
       color: #fff;
-      font-size: 15px;
+      font-size: 13px;
+      font-weight: bold;
       font-family: 'douyuFont';
     }
   }

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

@@ -106,6 +106,9 @@ const daneClass = computed(() => {
   if (headerPosition === 'centerBottom') {
     return 'center-Bottom';
   }
+  if (headerPosition === 'centerTop') {
+    return 'center-Top';
+  }
   return 'dane-m'; // 默认返回顶部模块
 });
 
@@ -152,11 +155,13 @@ watch(
 @{theme-deepblue} {
   .dane-bd {
     --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
+    --image-CenterTop: url('@/assets/images/fireNew/3-1.png');
   }
 }
 
 .dane-bd {
   --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
+  --image-CenterTop: url('@/assets/images/fireNew/3-1.png');
   position: absolute;
   width: 100%;
   height: 100%;
@@ -197,7 +202,10 @@ watch(
     border-top: none;
   }
 }
-
+.center-Top {
+  background: var(--image-CenterTop) no-repeat;
+  background-size: 100% 100%;
+}
 .center-Bottom {
   background: var(--image-CenterBottom) no-repeat;
   background-size: 100% 100%;

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

@@ -0,0 +1,89 @@
+<template>
+  <!-- 原版模块 -->
+  <component
+    :is="getModuleComponent(showStyle)"
+    :style="style"
+    :title="moduleName"
+    :visible="visible"
+    :class="{ 'cursor-pointer': !!moduleData.to }"
+    @close="$emit('close')"
+    @click="redirectTo"
+    class="component-module"
+  >
+    <slot>
+      <!-- <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" /> -->
+      <component
+        :is="getHeaderComponent(showStyle.headerPosition)"
+        :deviceType="deviceType"
+        :moduleData="moduleData"
+        :data="data"
+        @select="selectedData = $event"
+      />
+      <Content :style="{ height: header.show ? 'calc(100% - 45px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+    </slot>
+  </component>
+</template>
+<script lang="ts" setup>
+import Header from './header.vue';
+import Content from './content.vue';
+import ModuleTop from './originalNew/moduleTop.vue';
+import { computed, ref } from 'vue';
+import { openWindow } from '/@/utils';
+import { getFormattedText } from '../hooks/helper';
+// 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;
+  // const headerPosition = props.showStyle.headerPosition;
+  return size + position;
+});
+
+// 根据配置里的定位判断应该使用哪个module组件
+function getModuleComponent({ size, position, headerPosition }) {
+  // const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  // if (position.includes('top') && parseInt(width) > 800) {
+  //   return ModuleTop;
+  // }
+  // if (position.includes('bottom')) {
+  //   return ModuleBottom;
+  // }
+  if (headerPosition === 'centerTop') {
+    return ModuleTop;
+  }
+  // if (position.includes('left')) {
+  //   return ModuleLeft;
+  // }
+  // if (position.includes('right')) {
+  //   return ModuleLeft;
+  // }
+  return ModuleTop;
+}
+function getHeaderComponent(headerType) {
+  return Header; // 默认返回顶部模块
+}
+function redirectTo() {
+  const { to } = props.moduleData;
+  if (!to) return;
+  openWindow(getFormattedText(selectedData.value, to));
+}
+</script>
+<style scoped>
+</style>>

src/views/vent/home/configurable/components/detail/CustomTable-fire.vue

@@ -57,7 +57,6 @@ function get(o, p) {
   .table__content {
     --image-content-label: url('/@/assets/images/fireNew/11-1.png');
     --image-content-back: url('/@/assets/images/fireNew/11-2.png');
-    --image-content-text: url('/@/assets/images/fireNew/11-3.png');
   }
 }
 

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

@@ -572,11 +572,11 @@ export const testConfigNewFire: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '30%',
+            basis: '40%',
           },
           {
             name: 'chart',
-            basis: '70%',
+            basis: '60%',
           },
         ],
       },
@@ -870,6 +870,54 @@ export const testConfigNewFire: Config[] = [
     },
   },
   {
+    deviceType: '',
+    moduleName: '',
+    pageType: 'New_fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'tabs',
+            basis: '65%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      table: [],
+      preset: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      chart: [],
+      to: '',
+    },
+    showStyle: {
+      size: 'width:980px;height:120px;',
+      version: '保德',
+      position: 'top:85px;left:460px;',
+      headerPosition: 'centerTop',
+    },
+  },
+  {
     deviceType: 'dsArray',
     moduleName: '变电硐室防灭火监控系统',
     pageType: 'New_fire',

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

@@ -27,6 +27,16 @@
       :data="data"
       :visible="true"
     />
+    <!-- <ModuleFireNewTop
+      v-for="cfg in cfgTop"
+      :key="cfg.deviceType"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="data"
+      :visible="true"
+    /> -->
     <ModuleFireNewDual
       v-if="cfgA && cfgB"
       :show-style="cfgA.showStyle"
@@ -46,6 +56,7 @@ import { computed, onMounted, onUnmounted } from 'vue';
 // import { CaretDownOutlined } from '@ant-design/icons-vue';
 import NewNav from './components/originalNew/NewNav.vue';
 import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleFireNewTop from './components/ModuleFireNewTop.vue';
 import ModuleFireNew from './components/ModuleFireNew.vue';
 import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
 import VentModal from '/@/components/vent/micro/ventModal.vue';
@@ -54,7 +65,7 @@ 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;
+    return index !== 4 && index !== 3 && index !== 5;
   })
 );
 const cfgA = computed<any>(() =>
@@ -67,6 +78,11 @@ const cfgB = computed<any>(() =>
     return index === 4;
   })
 );
+const cfgTop = computed<any>(() =>
+  configs.value.find((_, index) => {
+    return index === 5;
+  })
+);
 const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
 const { mainTitle, data, updateData } = useInitPage('火灾预警系统');
 let interval: number | undefined;