[Feat 0000]火灾新首页开发

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

@@ -79,7 +79,6 @@ const daneClass = computed(() => {
   // return 'dane-m';
   return 'dane-m'; // 默认返回顶部模块
 });
-
 //切换时间选项
 // function onChange(value, dateString) {
 //   console.log('Selected Time: ', value);

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

@@ -42,6 +42,7 @@ import LeftHeader2 from './originalNew/leftHeader2.vue';
 import RightHeader1 from './originalNew/rightHeader1.vue';
 import RightHeader2 from './originalNew/rightHeader2.vue';
 import RightHeader3 from './originalNew/rightHeader3.vue';
+import ModuleTopFire from './originalNew/moduleTopFire.vue';
 // import { ModuleProps } from '../types';
 
 const props = defineProps<{
@@ -77,7 +78,10 @@ function getModuleComponent({ size, position, headerPosition }) {
   // if (position.includes('bottom')) {
   //   return ModuleBottom;
   // }
-  if (headerPosition === 'centerTop') {
+  if (headerPosition === 'centerTop' && props.deviceType === 'New_fire') {
+    return ModuleTopFire; // 中心位置使用顶部模块
+  }
+  if (headerPosition === 'centerTop' && props.deviceType !== 'New_fire') {
     return ModuleTop;
   }
   if (headerPosition === 'centerBottom') {

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

@@ -34,8 +34,7 @@
         </template>
         <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
         <template v-if="config.name === 'chart'">
-          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config" :chart-data="config.data" />
-          <CustomChart v-else class="content__module" :chart-config="config.config" :chart-data="config.data" />
+          <CustomChart class="content__module" style="margin-bottom: 20px" :chart-config="config.config" :chart-data="config.data" />
         </template>
         <!-- 通常列表部分 -->
         <template v-if="config.name === 'list'">

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

@@ -1,33 +1,28 @@
 
 <template>
   <div v-if="visible" class="module-content">
-    <div class="left-solt"></div>
+    <div class="left-solt">
+      <div class="left-img"></div>
+      <div class="left-title">智能注浆系统</div>
+    </div>
     <div class="center-solt">
-      <div class="data-item">
-        <img class="data-icon" src="@/assets/images/vent/homeNew/zonghui.png" />
-        <div class="data-content">
-          <div class="title">总回风量(m³/min)</div>
-          <div class="air-num air-num1">25870</div>
-        </div>
+      <div class="left-content">
+        <div class="img-left"></div>
+        <div class="title-left">监测区域</div>
       </div>
-      <div class="divider"></div>
-      <div class="data-item">
-        <img class="data-icon" src="@/assets/images/vent/homeNew/zongjin.png" />
-        <div class="data-content">
-          <div class="title">总进风量(m³/min)</div>
-          <div class="air-num air-num2">24989</div>
-        </div>
+      <div class="center-content">
+        <div class="center-top">自燃倾向性等级：容易自燃</div>
+        <div class="center-bottom">低风险</div>
       </div>
-      <div class="divider"></div>
-      <div class="data-item">
-        <img class="data-icon" src="@/assets/images/vent/homeNew/jihua.png" />
-        <div class="data-content">
-          <div class="title">计划风量(m³/min)</div>
-          <div class="air-num air-num3">348</div>
-        </div>
+      <div class="right-content">
+        <div class="title-right">火灾风险</div>
+        <div class="img-right"></div>
       </div>
     </div>
-    <div class="right-solt"></div>
+    <div class="right-solt">
+      <div class="right-img"></div>
+      <div class="right-title">智能注氮系统</div>
+    </div>
   </div>
 </template>
 
@@ -40,7 +35,7 @@ const emit = defineEmits(['close', 'click']);
 @import '/@/design/theme.less';
 
 .module-content {
-  background: url('@/assets/images/vent/homeNew/content.png') no-repeat;
+  background: url('@/assets/images/fireNew/3-1.png') no-repeat;
   background-size: 100% 100%;
   color: #fff;
   box-sizing: border-box;
@@ -52,72 +47,115 @@ const emit = defineEmits(['close', 'click']);
 }
 
 .left-solt {
-  left: 8%;
-  top: 13%;
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-  position: absolute;
-  background: url('@/assets/images/vent/homeNew/Top-left.png') no-repeat;
-  background-size: 100% 100%;
+  width: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .left-img {
+    left: 4%;
+    top: 2%;
+    width: 75px;
+    height: 75px;
+    cursor: pointer;
+    position: absolute;
+    background: url('@/assets/images/fireNew/3-4.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .left-title {
+    left: 3%;
+    top: 85px;
+    font-size: 13px;
+    font-family: 'douyuFont';
+    font-weight: bold;
+    color: #fff;
+    position: absolute;
+  }
 }
 
 .right-solt {
-  right: 8%;
-  top: 13%;
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-  position: absolute;
-  background: url('@/assets/images/vent/homeNew/Top-right.png') no-repeat;
-  background-size: 100% 100%;
+  width: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .right-img {
+    right: 4%;
+    top: 2%;
+    width: 75px;
+    height: 75px;
+    cursor: pointer;
+    position: absolute;
+    background: url('@/assets/images/fireNew/3-5.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .right-title {
+    right: 3%;
+    top: 85px;
+    font-size: 13px;
+    font-family: 'douyuFont';
+    font-weight: bold;
+    color: #fff;
+    position: absolute;
+  }
 }
-
 .center-solt {
   display: flex;
-  position: absolute;
-  left: 15%;
-  bottom: 50%;
-  width: 70%;
-  height: 60%;
   align-items: center;
-  justify-content: space-around;
+  width: 100%;
+}
+
+/* 左侧区域 */
+.left-content {
+  display: flex;
+  align-items: center; /* 垂直居中对齐 */
+}
+.img-left {
+  width: 50px; /* 图片尺寸 */
+  height: 50px;
+  margin-right: 8px; /* 图片文字间距 */
+  background: url('@/assets/images/fireNew/3-3.png') no-repeat center; /* 替换为实际图片路径 */
+  background-size: contain;
 }
 
-.data-item {
-  left: 10%;
+/* 右侧区域 */
+.right-content {
   display: flex;
   align-items: center;
-  gap: 5px;
-  .data-icon {
-    width: 60px;
-    height: 100%;
-  }
-  .data-content {
-    display: flex;
-    flex-direction: column;
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      color: #999999;
-    }
-    .air-num {
-      font-size: 25px;
-    }
-  }
 }
-.air-num1 {
-  color: #4ca8d5;
+.img-right {
+  width: 50px;
+  height: 50px;
+  margin-left: -10px;
+  background: url('@/assets/images/fireNew/3-2.png') no-repeat center; /* 替换为实际图片路径 */
+  background-size: contain;
+}
+
+/* 中间区域 */
+.center-content {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 330px;
+}
+/* 文字样式 */
+.title-left {
+  width: 100px;
+  font-size: 20px;
 }
-.air-num2 {
-  color: #b9f3fc;
+.title-right {
+  width: 100px;
+  font-size: 20px;
 }
-.air-num3 {
-  color: #4ad1cc;
+.center-top {
+  margin-bottom: 14px;
+  font-size: 20px;
+  margin-left: -18px;
 }
-.divider {
-  width: 1px;
-  height: 40px;
-  background: url('@/assets/images/vent/homeNew/Top-divider.png') no-repeat;
+.center-bottom {
+  font-size: 30px;
+  color: #52b4e5; /* 红色字体 */
+  font-weight: bold;
+  letter-spacing: 15px;
+  margin-bottom: 18px;
 }
 </style>

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

@@ -572,11 +572,11 @@ export const testConfigNewFire: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '40%',
+            basis: '35%',
           },
           {
             name: 'chart',
-            basis: '60%',
+            basis: '65%',
           },
         ],
       },
@@ -611,7 +611,7 @@ export const testConfigNewFire: Config[] = [
           series: [
             {
               label: '${strinstallpos}',
-              readFrom: 'fibreTemperatureArr',
+              readFrom: 'fibreTemperature',
               xprop: 'pos',
               yprop: 'value',
             },
@@ -726,7 +726,6 @@ export const testConfigNewFire: Config[] = [
           {
             name: 'list',
             basis: '60%',
-            pageType: 'New_fire',
           },
         ],
       },
@@ -872,8 +871,8 @@ export const testConfigNewFire: Config[] = [
     },
   },
   {
-    deviceType: '',
-    moduleName: '',
+    deviceType: 'New_fire',
+    moduleName: '顶部标题',
     pageType: 'New_fire',
     moduleData: {
       header: {

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

@@ -27,6 +27,15 @@
       :data="data"
       :visible="true"
     />
+    <ModuleNew
+      v-if="cfgTop"
+      :show-style="cfgTop.showStyle"
+      :module-data="cfgTop.moduleData"
+      :module-name="cfgTop.moduleName"
+      :device-type="cfgTop.deviceType"
+      :data="data"
+      :visible="true"
+    />
     <ModuleFireNewDual
       v-if="cfgA && cfgB"
       :show-style="cfgA.showStyle"
@@ -46,9 +55,11 @@ import { computed, onMounted, onUnmounted } from 'vue';
 // import { CaretDownOutlined } from '@ant-design/icons-vue';
 import NewNav from './components/originalNew/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';
@@ -73,9 +84,16 @@ const cfgTop = computed<any>(() =>
   })
 );
 const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData } = useInitPage('火灾预警系统');
+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({