[Mod 0000]首页样式修改

src/components/Configurable/detail/MiniBoard.vue

@@ -25,7 +25,7 @@
     </template>
     <template v-else-if="layout === 'val-top'">
       <slot name="value">
-        <div class="mini-board__value" :class="`mini-board__value_${type}`">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`" :title="value">
           {{ value }}
         </div>
       </slot>
@@ -42,7 +42,7 @@
         </div>
       </slot>
       <slot name="value">
-        <div class="mini-board__value" :class="`mini-board__value_${type}`">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`" :title="value">
           {{ value }}
         </div>
       </slot>
@@ -118,6 +118,8 @@
     --image-board-bg-H-pre: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-pre.svg');
     --image-board-bg-H-tem: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-tem.svg');
     --image-board-bg-content-H: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-content-H.png');
+    --image-board-bg-I-label: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-I-label.png');
+    --image-board-bg-I-value: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-I-value.png');
 
     height: 50px;
     line-height: 25px;
@@ -454,4 +456,37 @@
     max-width: 100%;
     margin-bottom: 5px;
   }
+
+  .mini-board_I {
+    width: 170px;
+    height: auto;
+    margin-top: 10px;
+  }
+
+  .mini-board__label_I {
+    width: 100%;
+    height: 53px;
+    color: #000000;
+    font-size: 14px;
+    font-weight: 800;
+    background-image: var(--image-board-bg-I-label);
+    background-size: 100% 100%;
+    padding-top: 23px;
+  }
+  .mini-board__value_I {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    color: #2b6ff0;
+    font-size: 16px;
+    font-weight: 500;
+    font-family: 'DDIN-Bold';
+    padding: 0 13px;
+    background-image: var(--image-board-bg-I-value);
+    background-size: 100% 100%;
+    white-space: nowrap;
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+    margin-bottom: -4px;
+  }
 </style>

src/components/Configurable/preset/BoardTable.vue

@@ -222,7 +222,12 @@
         let newValue = item.value;
         if (match && match[1]) {
           const fieldKey = match[1];
-          newValue = rowData[fieldKey] !== undefined ? rowData[fieldKey] : item.value;
+          const resolvedValue = get(rowData, fieldKey);
+          
+          // 如果解析出的值不为 undefined/null，则使用解析后的值，否则保留原模板字符串或默认值
+          if (!isNil(resolvedValue)) {
+            newValue = resolvedValue;
+          }
         }
         
         return {
@@ -261,8 +266,8 @@ const riskMap = {
 };
 const riskColorMap = {
   '1': StatusColorEnum.blue, // 蓝
-  '2': StatusColorEnum.gold, // 金
-  '3': StatusColorEnum.purple, // 紫
+  '2': StatusColorEnum.yellow, // 黄
+  '3': StatusColorEnum.gold, // 金
   '4': StatusColorEnum.red, // 红
 };
 

src/components/Configurable/types.ts

@@ -147,7 +147,7 @@ export interface CommonItem {
 
 export interface ModuleDataBoard extends ReadFrom {
   /** 展示牌预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top' | 'new-top' | 'new1-top' | 'new2-top' | 'new3-top';
   /** 核心配置，每个展示牌对应一项 */

src/views/dashboard/SealedGoaf/configurable.data.sealedGoaf.ts

@@ -1083,6 +1083,19 @@ export const testConfigSealedMine: Config[] = [
                 { label: '温度(℃)', value: '${temperatureOut}' },
               ],
             },
+            {
+              type: 'I',
+              layout: 'val-top',
+              title: '预警',
+              items: [
+                { label: '闭内自燃发火隐患等级', value: '${fireAlarm.alarmName}' },
+                { label: '闭外自燃发火隐患等级', value: '${fireAlarmOut.alarmName}' },
+                { label: '爆炸预警等级', value: '${explosionAlarm.alarmName}' },
+                { label: '压差隐患等级', value: '${sourcePressureAlarm.alarmName}' },
+                { label: '是否漏风', value: '${leakageAlarm.alarmName}' },
+                { label: '密闭启封判定', value: '${unsealAlarm.alarmName}' },
+              ],
+            },
           ],
           table: {
             type: 'D',

src/views/system/cadFile/components/GoafPopup.vue

@@ -3,39 +3,55 @@
     <!-- 加载状态 -->
     <div v-if="loading" class="loading">加载中...</div>
 
-    <!-- 固定监测数据展示 -->
-    <div v-else class="record-list">
-      <div class="record-item">
-        <span class="label">CO(ppm)</span>
-        <span class="value">{{ monitorData.coVal || '--' }}</span>
+    <!-- 内容区域 -->
+    <div v-else class="content-wrapper">
+      <!-- 固定监测数据展示 -->
+      <div class="record-list">
+        <div class="record-item">
+          <div class="label">CO(ppm)</div>
+          <div class="value">{{ monitorData.coVal || '--' }}</div>
+        </div>
+        <div class="record-item">
+          <div class="label">CO₂(%)</div>
+          <div class="value">{{ monitorData.co2Val || '--' }}</div>
+        </div>
+        <div class="record-item">
+          <div class="label">CH₄(%)</div>
+          <div class="value">{{ monitorData.ch4Val || '--' }}</div>
+        </div>
+        <div class="record-item">
+          <div class="label">C₂H₂(ppm)</div>
+          <div class="value">{{ monitorData.c2h2Val || '--' }}</div>
+        </div>
+        <div class="record-item">
+          <div class="label">C₂H₄(ppm)</div>
+          <div class="value">{{ monitorData.c2h4Val || '--' }}</div>
+        </div>
+        <div class="record-item">
+          <div class="label">O₂(%)</div>
+          <div class="value">{{ monitorData.o2Val || '--' }}</div>
+        </div>
+        <div class="record-item">
+          <div class="label">温度(℃)</div>
+          <div class="value">{{ monitorData.temperature || '--' }}</div>
+        </div>
+        <div class="record-item">
+          <div class="label">压差(Pa)</div>
+          <div class="value">{{ monitorData.sourcePressure || '--' }}</div>
+        </div>
       </div>
-      <div class="record-item">
-        <span class="label">CO₂(%)</span>
-        <span class="value">{{ monitorData.co2Val || '--' }}</span>
-      </div>
-      <div class="record-item">
-        <span class="label">CH₄(%)</span>
-        <span class="value">{{ monitorData.ch4Val || '--' }}</span>
-      </div>
-      <div class="record-item">
-        <span class="label">C₂H₂(ppm)</span>
-        <span class="value">{{ monitorData.c2h2Val || '--' }}</span>
-      </div>
-      <div class="record-item">
-        <span class="label">C₂H₄(ppm)</span>
-        <span class="value">{{ monitorData.c2h4Val || '--' }}</span>
-      </div>
-      <div class="record-item">
-        <span class="label">O₂(%)</span>
-        <span class="value">{{ monitorData.o2Val || '--' }}</span>
-      </div>
-      <div class="record-item">
-        <span class="label">温度(℃)</span>
-        <span class="value">{{ monitorData.temperature || '--' }}</span>
-      </div>
-      <div class="record-item">
-        <span class="label">压差(Pa)</span>
-        <span class="value">{{ monitorData.sourcePressure || '--' }}</span>
+
+      <!-- 爆炸三角形图表 -->
+      <div class="chart-section">
+        <div class="chart-title">爆炸三角形</div>
+        <div class="chart-box">
+          <BlastDelta
+            :posMonitor="monitorData"
+            :canvas-size="{ width: 420, height: 149 }"
+            :legendStyle="{ left: '50%', top: '10px' }"
+            text-color="#000"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -45,6 +61,7 @@
 import { ref, onMounted, onUnmounted } from 'vue';
 import { getGoafData } from '../cad.api';
 import { message } from 'ant-design-vue';
+import BlastDelta from '/@/components/Configurable/preset/BlastDelta.vue';
 
 interface Props {
   data: Record<string, any>;
@@ -67,6 +84,7 @@ const monitorData = ref({
   o2Val: '',
   sourcePressure: '',
   temperature: '',
+  btTriBlast: '',
 });
 
 // 获取数据方法（抽取出来复用）
@@ -95,6 +113,7 @@ const fetchData = async () => {
       o2Val: data.o2Val,
       sourcePressure: data.sourcePressure,
       temperature: data.temperature,
+      btTriBlast: data.btTriBlast,
     };
   } catch (err) {
     message.error(`获取监测数据失败：${(err as Error).message}`);
@@ -127,11 +146,19 @@ onUnmounted(() => {
 <style scoped>
 .goaf-popup-container {
   font-family: sans-serif;
-  width: 700px;
-  max-height: 500px;
+  width: 500px;
+  max-height: 600px;
   border-radius: 8px;
-  padding: 12px;
+  padding-top: 10px;
+  /* background: #fff; */
 }
+
+/* .content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+} */
+
 .loading {
   color: #000;
   font-size: 14px;
@@ -142,47 +169,75 @@ onUnmounted(() => {
 .record-list {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  background-color: #dceefb;
+  padding: 10px;
+  border-radius: 4px;
 }
 
 .record-item {
+  height: 80px;
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   align-items: center;
   padding: 0;
   box-sizing: border-box;
-  min-height: 50px;
+  min-height: 60px;
+  background-image: url(/src/assets/images/sealedGoaf/board-bg-details.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 
 
 .label {
-  flex-shrink: 0; /* 防止标签被挤压 */
+  height: 30px;
+  width: 100%;
+  flex-shrink: 0;
   font-size: 14px;
-  width: 160px;
-  height: 100%;
-  color: #53657a;
-  background-color: #f5f5f5;
-  padding-left: 10px;
-  text-align: left;
-  font-weight: 700;
+  color: #000;
+  text-align: center;
   display: flex;
   align-items: center;
-  border: 1px solid #ddd;
+  justify-content: center;
 }
 
 .value {
-  width:100%;
-  height: 100%;
-  font-size: 13px;
-  color: #000;
-  background-color: #f5f5f5;
-  padding-right: 8px;
-  word-break: break-all; /* 超长内容换行，避免溢出 */
-  border: 1px solid #ddd;
+  width: 100%;
+  height: 50px;
+  font-size: 16px;
+  color: #2b6ff0;
+  word-break: break-all;
   border-left: none;
   display: flex;
   align-items: center;
-  padding-left: 10px;
+  justify-content: center;
+}
+
+/* 图表区域样式 */
+.chart-section {
+  margin-top: 10px;
+  border-radius: 4px;
+  padding: 4px 10px;
+  background: #dceefb;
+}
+
+.chart-title {
+  font-size: 14px;
+  color: #000;
+  text-align: left;
+}
+
+.chart-box {
+  width: 100%;
+  height: 200px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+:deep(.legend-label) {
+  font-size: 15px;
+  color: #000;
 }
 
 .no-data {
@@ -190,6 +245,6 @@ onUnmounted(() => {
   font-size: 12px;
   text-align: center;
   padding: 10px 0;
-  grid-column: 1 / 4; /* 无数据时跨三列居中 */
+  grid-column: 1 / 4;
 }
-</style>
+</style>