src/assets/images/overHaul/leafgPage/high-risk-icon1.svg

@@ -0,0 +1,4 @@
+<svg id="红" xmlns="http://www.w3.org/2000/svg" width="45.871" height="45.848" viewBox="0 0 45.871 45.848">
+  <path id="路径_56324" data-name="路径 56324" d="M26.52,2.56A22.924,22.924,0,1,0,49.455,25.472,22.933,22.933,0,0,0,26.52,2.56Zm0,42.476A19.563,19.563,0,1,1,46.083,25.472,19.557,19.557,0,0,1,26.52,45.036Z" transform="translate(-3.584 -2.56)" fill="red"/>
+  <path id="路径_56325" data-name="路径 56325" d="M299.113,249.055c-.023.023-.046.069-.092.092l-14.736,13.674a1.311,1.311,0,0,1-.3.185,2.067,2.067,0,0,1-.716.139,1.131,1.131,0,0,1-.878-.346.934.934,0,0,1-.277-.855.329.329,0,0,1,.046-.139l3.234-8.2H279.5a1.21,1.21,0,0,1-1.109-.508.858.858,0,0,1,.092-1.016c.023-.023.023-.046.046-.069l12.565-13.05a.83.83,0,0,1,.231-.162,2.123,2.123,0,0,1,.855-.208,1.219,1.219,0,0,1,.9.346,1.291,1.291,0,0,1,.323,1.086v.069l-1.686,7.322,6.537.046h.069a1.187,1.187,0,0,1,.97.531A1.136,1.136,0,0,1,299.113,249.055Z" transform="translate(-265.876 -227.944)" fill="red"/>
+</svg>

src/assets/images/overHaul/leafgPage/icon-top1.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.095" height="19.73" viewBox="0 0 24.095 19.73">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#6ea0ff"/>
+      <stop offset="1" stop-color="#2b6ff0"/>
+    </linearGradient>
+  </defs>
+  <g id="内" style="isolation: isolate">
+    <g id="组_13974" data-name="组 13974" transform="translate(0 0)" style="isolation: isolate">
+      <path id="路径_55620" data-name="路径 55620" d="M535.97,489.242h-3.76V472.009h10.044v-2.5h3.87v2.5H556.3V486.69a2.363,2.363,0,0,1-.727,1.756,2.432,2.432,0,0,1-1.771.714h-4.582l.823-2.251h1.921a.624.624,0,0,0,.439-.178.592.592,0,0,0,.192-.452l.027-11.718h-6.5v.576l-.687,1.372h2.992l3.155,8.919h-3.869l-2.772-7.9-3.924,7.9H537.15l5.1-10.291v-.576H535.97Z" transform="translate(-532.21 -469.512)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

src/assets/images/overHaul/leafgPage/icon-top2.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23.617" height="19.732" viewBox="0 0 23.617 19.732">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#6ea0ff"/>
+      <stop offset="1" stop-color="#2b6ff0"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_56338" data-name="路径 56338" d="M384.985,483.255l1.04-2.354h4.461l.493-2.327h-2.135l-2.49-8.238h3.722l1.56,5.146,1.587-7.5H385.5l1.97-4.351H391.5l-.766,1.642h7.307l-4.105,17.98h-8.949Zm16.968.055h-3.394V463.578h3.394Zm4.817-17.6,1.834,15.9h-3.393l-1.834-15.9Z" transform="translate(-384.985 -463.578)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/overHaul/leafgPage/icon-top3.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23.938" height="27.482" viewBox="0 0 23.938 27.482">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#6ea0ff"/>
+      <stop offset="1" stop-color="#2b6ff0"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_56337" data-name="路径 56337" d="M144.411,73.822H127.543c-.015.511-.027,1.1-.03,1.643h16.918C144.429,74.874,144.42,74.265,144.411,73.822Zm-4.776-7.454a8.207,8.207,0,0,0-1.788-.659v-1.4a.313.313,0,0,0-.313-.313h-2.964a.313.313,0,0,0-.313.313v1.354a8.147,8.147,0,0,0-1.729.579,8.742,8.742,0,0,0-4.153,4.153,8.984,8.984,0,0,0-.375.922h15.934A8.8,8.8,0,0,0,139.635,66.367Zm-3.585,24.115a3.476,3.476,0,0,0,3.476-3.476h-6.952A3.476,3.476,0,0,0,136.049,90.482Zm11.169-6.538-2.5-3.012a1.236,1.236,0,0,1-.281-.786V76.216H127.511l.006,4.023a1.233,1.233,0,0,1-.269.774l-2.376,2.95a1.2,1.2,0,0,0,.866,1.968h20.627A1.206,1.206,0,0,0,147.219,83.945Z" transform="translate(-124.081 -63.5)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/overHaul/leafgPage/info-card-icon.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.136" height="20.105" viewBox="0 0 16.136 20.105">
+  <defs>
+    <linearGradient id="linear-gradient" x1="1" y1="0.5" x2="0" y2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="0.427" stop-color="#fff"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="路径_56335" x="0" y="4.566" width="16.136" height="15.539" filterUnits="userSpaceOnUse">
+      <feOffset dy="3" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feFlood flood-opacity="0.161"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <linearGradient id="linear-gradient-2" x1="1" y1="0.5" x2="0" y2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#0070ff"/>
+      <stop offset="1" stop-color="#0070ff" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="路径_56335-2" x="0" y="0" width="16.136" height="18.133" filterUnits="userSpaceOnUse">
+      <feOffset dy="3" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1.5" result="blur-2"/>
+      <feFlood flood-opacity="0.161"/>
+      <feComposite operator="in" in2="blur-2"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="组_16754" data-name="组 16754" transform="translate(-13.932 -12.896)">
+    <g id="组_16728" data-name="组 16728">
+      <g id="组_16771" data-name="组 16771" transform="translate(25.567 14.396) rotate(90)">
+        <g transform="matrix(0, -1, 1, 0, -1.5, 11.64)" filter="url(#路径_56335)">
+          <path id="路径_56335-3" data-name="路径 56335" d="M0,0H2.849a.727.727,0,0,1,.514.213L6.411,3.26a.435.435,0,0,1,0,.615L3.363,6.922a.727.727,0,0,1-.514.213H0Z" transform="translate(11.64 6.07) rotate(90)" opacity="0.7" fill="url(#linear-gradient)"/>
+        </g>
+        <g transform="matrix(0, -1, 1, 0, -1.5, 11.64)" filter="url(#路径_56335-2)">
+          <path id="路径_56335-4" data-name="路径 56335" d="M0,0H5.444a.727.727,0,0,1,.514.213L9.006,3.26a.435.435,0,0,1,0,.615L5.958,6.922a.727.727,0,0,1-.514.213H0Z" transform="translate(11.64 1.5) rotate(90)" fill="url(#linear-gradient-2)"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/images/overHaul/leafgPage/info-card-icon1.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#6ea0ff"/>
+      <stop offset="1" stop-color="#2c70f0"/>
+    </linearGradient>
+  </defs>
+  <path id="多边形_7" data-name="多边形 7" d="M8,0l2.32,5.68L16,8l-5.68,2.32L8,16,5.68,10.32,0,8,5.68,5.68Z" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/overHaul/leafgPage/low-risk-icon1.svg

@@ -0,0 +1,4 @@
+<svg id="组_16819" data-name="组 16819" xmlns="http://www.w3.org/2000/svg" width="45.871" height="45.848" viewBox="0 0 45.871 45.848">
+  <path id="路径_56324" data-name="路径 56324" d="M26.52,2.56A22.924,22.924,0,1,0,49.455,25.472,22.933,22.933,0,0,0,26.52,2.56Zm0,42.476A19.563,19.563,0,1,1,46.083,25.472,19.557,19.557,0,0,1,26.52,45.036Z" transform="translate(-3.584 -2.56)" fill="#0070ff"/>
+  <path id="路径_56325" data-name="路径 56325" d="M299.113,249.055c-.023.023-.046.069-.092.092l-14.736,13.674a1.311,1.311,0,0,1-.3.185,2.067,2.067,0,0,1-.716.139,1.131,1.131,0,0,1-.878-.346.934.934,0,0,1-.277-.855.329.329,0,0,1,.046-.139l3.234-8.2H279.5a1.21,1.21,0,0,1-1.109-.508.858.858,0,0,1,.092-1.016c.023-.023.023-.046.046-.069l12.565-13.05a.83.83,0,0,1,.231-.162,2.123,2.123,0,0,1,.855-.208,1.219,1.219,0,0,1,.9.346,1.291,1.291,0,0,1,.323,1.086v.069l-1.686,7.322,6.537.046h.069a1.187,1.187,0,0,1,.97.531A1.136,1.136,0,0,1,299.113,249.055Z" transform="translate(-265.876 -227.944)" fill="#0070ff"/>
+</svg>

src/assets/images/overHaul/leafgPage/medium-risk-icon1.svg

@@ -0,0 +1,4 @@
+<svg id="橙" xmlns="http://www.w3.org/2000/svg" width="45.871" height="45.848" viewBox="0 0 45.871 45.848">
+  <path id="路径_56324" data-name="路径 56324" d="M26.52,2.56A22.924,22.924,0,1,0,49.455,25.472,22.933,22.933,0,0,0,26.52,2.56Zm0,42.476A19.563,19.563,0,1,1,46.083,25.472,19.557,19.557,0,0,1,26.52,45.036Z" transform="translate(-3.584 -2.56)" fill="#f70"/>
+  <path id="路径_56325" data-name="路径 56325" d="M299.113,249.055c-.023.023-.046.069-.092.092l-14.736,13.674a1.311,1.311,0,0,1-.3.185,2.067,2.067,0,0,1-.716.139,1.131,1.131,0,0,1-.878-.346.934.934,0,0,1-.277-.855.329.329,0,0,1,.046-.139l3.234-8.2H279.5a1.21,1.21,0,0,1-1.109-.508.858.858,0,0,1,.092-1.016c.023-.023.023-.046.046-.069l12.565-13.05a.83.83,0,0,1,.231-.162,2.123,2.123,0,0,1,.855-.208,1.219,1.219,0,0,1,.9.346,1.291,1.291,0,0,1,.323,1.086v.069l-1.686,7.322,6.537.046h.069a1.187,1.187,0,0,1,.97.531A1.136,1.136,0,0,1,299.113,249.055Z" transform="translate(-265.876 -227.944)" fill="#f70"/>
+</svg>

src/assets/images/overHaul/leafgPage/normal-risk-icon1.svg

@@ -0,0 +1,4 @@
+<svg id="黄" xmlns="http://www.w3.org/2000/svg" width="45.871" height="45.848" viewBox="0 0 45.871 45.848">
+  <path id="路径_56324" data-name="路径 56324" d="M26.52,2.56A22.924,22.924,0,1,0,49.455,25.472,22.933,22.933,0,0,0,26.52,2.56Zm0,42.476A19.563,19.563,0,1,1,46.083,25.472,19.557,19.557,0,0,1,26.52,45.036Z" transform="translate(-3.584 -2.56)" fill="#d5c702"/>
+  <path id="路径_56325" data-name="路径 56325" d="M299.113,249.055c-.023.023-.046.069-.092.092l-14.736,13.674a1.311,1.311,0,0,1-.3.185,2.067,2.067,0,0,1-.716.139,1.131,1.131,0,0,1-.878-.346.934.934,0,0,1-.277-.855.329.329,0,0,1,.046-.139l3.234-8.2H279.5a1.21,1.21,0,0,1-1.109-.508.858.858,0,0,1,.092-1.016c.023-.023.023-.046.046-.069l12.565-13.05a.83.83,0,0,1,.231-.162,2.123,2.123,0,0,1,.855-.208,1.219,1.219,0,0,1,.9.346,1.291,1.291,0,0,1,.323,1.086v.069l-1.686,7.322,6.537.046h.069a1.187,1.187,0,0,1,.97.531A1.136,1.136,0,0,1,299.113,249.055Z" transform="translate(-265.876 -227.944)" fill="#d5c702"/>
+</svg>

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/Overhaul/components/LeafPage.vue

@@ -1,2 +1,1312 @@
-<template>LEAF</template>
-<script setup lang="ts"></script>
+<template>
+  <div class="dashboard-container">
+
+    <!-- 主体内容 -->
+    <div class="main-content">
+      <!-- 内容区域 -->
+      <div class="content-area">
+        <!-- 顶部信息卡片 -->
+        <div class="top-info">
+          <div class="info-card">
+              <div class="card-title">
+                <div class="info-details">
+                  <div class="label">{{ basicInfo.mineName }}</div>
+                  <!-- <div class="value">西川煤矿分公司</div> -->
+                  <div class="tag" :style="{ backgroundColor: getAlarmColor(basicInfo.alarmLevel), color: '#fff' }">{{ getRiskText(basicInfo.alarmLevel) }}</div>
+                </div>
+                <div>
+                  <a-button type="primary" @click="handleGoToPageQuery('/warningAnalysis/connectAnalysis')">数据看板</a-button>
+                </div>
+                <div class="info-border">
+                  <div class="info-border-icon"></div>
+                  <div class="info-border-line"></div>
+                  <div class="info-border-icon"></div>
+                </div>
+              </div>
+
+              <div class="card-details">
+                 <div
+                    v-for="item in basicInfoColumns"
+                    :key="item.key"
+                    class="info-card-item"
+                  >
+                    <div class="card-label">{{ item.label }}</div>
+                     <div class="card-value-wrapper">
+                      <span 
+                        v-if="['accessStatus', 'status', 'gasLevelName', 'alarmLevel', 'gjMineStatus'].includes(item.key)"
+                        class="status-dot" 
+                        :style="{ backgroundColor: getBasicInfoColor(item.key),boxShadow: `0 0 10px ${getBasicInfoColor(item.key)}` }"
+                      ></span>
+                      
+                      <span 
+                        class="card-value-text" 
+                        :style="{ color: getBasicInfoColor(item.key) }"
+                      >
+                        {{ getBasicInfoValue(item.key) }}
+                      </span>
+                    </div>
+                    <div class="card-border">
+                      <div class="card-border-icon"></div>
+                      <div class="card-border-line"></div>
+                    </div>
+                  </div>
+              </div>
+            </div>
+
+        </div>
+
+        <!-- 预警统计 -->
+        <div class="warning-statistics">
+          <div class="statistics-header">
+            <div class="title">预警统计</div>
+            <div class="btn-group">
+              <!-- <button class="btn">预警级别</button> -->
+            </div>
+          </div>
+          <div class="statistics-content">
+            <div class="stat-item high-risk">
+              <div class="icon">
+                <div class="icon-top"></div>
+                <div class="icon-bottom"></div>
+              </div>
+              <div class="text">高风险<span class="text-sub">（需立即处理）</span></div>
+              <div class="count">{{ alarmStatistics.alarm4 }}</div>
+            </div>
+            <div class="stat-item medium-risk">
+              <div class="icon">
+                <div class="icon-top"></div>
+                <div class="icon-bottom"></div>
+              </div>
+              <div class="text">较高风险<span class="text-sub">（需立即处理）</span></div>
+              <div class="count">{{ alarmStatistics.alarm3 }}</div>
+            </div>
+            <div class="stat-item normal-risk">
+              <div class="icon">
+                <div class="icon-top"></div>
+                <div class="icon-bottom"></div>
+              </div>
+              <div class="text">一般风险<span class="text-sub">（需立即处理）</span></div>
+              <div class="count">{{ alarmStatistics.alarm2 }}</div>
+            </div>
+            <div class="stat-item low-risk">
+              <div class="icon">
+                <div class="icon-top"></div>
+                <div class="icon-bottom"></div>
+              </div>
+              <div class="text">低风险<span class="text-sub">（需立即处理）</span></div>
+              <div class="count">{{ alarmStatistics.alarm1 }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 预警数据详情 -->
+        <div class="warning-details">
+          <div class="details-header">
+            <div class="title">预警数据详情</div>
+            <div class="btn-group">
+              <button class="btn"  @click="collapseAll">收起所有分组</button>
+              <button class="btn"  @click="expandAll">展开详情</button>
+            </div>
+          </div>
+          <div class="details-content">
+            <!-- 第一个预警项 -->
+            <div 
+              v-for="(item, index) in goafMonitorData" 
+              :key="index" 
+              class="warning-item"
+            >
+              <div class="item-header">
+                <div class="header-left">
+                  <div class="icon"></div>
+                  <div class="name">老空区密闭名称: {{ item.devicePos }}</div>
+                  <div 
+                    class="risk-level" 
+                    :style="{ backgroundColor: getAlarmColor(item.alarmLevel), color: '#fff' }"
+                  >
+                    {{ getRiskText(item.alarmLevel) }}
+                  </div>
+                </div>
+                <a-button 
+                  class="expand-btn"
+                  @click="toggleExpand(index)"
+                >
+                  {{ isExpanded(index) ? '收起' : '展开' }}
+                  <div class="arrow-icon-wrapper">
+                    <div class="arrow-icon" :class="{ 'rotate': isExpanded(index) }"></div>
+                  </div>
+                </a-button>
+              </div>
+              <div class="item-body">
+                <div class="data-row">
+                  <div 
+                    v-for="(col, colIndex) in dataColumns" 
+                    :key="colIndex" 
+                    class="data-col"
+                  >
+                    <div class="col-title">{{ col.label }}</div>
+                    <div 
+                      class="col-value" 
+                      :style="{ color: getColValueColor(col, item) }"
+                    >
+
+                      <span 
+                        v-if="col.type !== 'text'" 
+                        class="status-dot" 
+                        :style="{ 
+                          backgroundColor: getColValueColor(col, item), 
+                          boxShadow: `0 0 10px ${getColValueColor(col, item)}`
+                        }"
+                      ></span>
+                      {{ getColDisplayText(col, item) }}
+                    </div>
+                    <div class="col-icon"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="monitoring-indicators" v-show="isExpanded(index)">
+                <div class="indicator-group">
+                  <div class="group-title">
+                    <div class="title-icon-top"></div>
+                    <div class="title-icon-bottom"></div>
+                    <div class="title-content">
+                      密闭墙内<br />
+                      监测指标
+                    </div>
+                  </div>
+                  <div class="indicator-area">
+                    <div 
+                      v-for="(ind, indIndex) in indicatorColumns" 
+                      :key="'inner-' + indIndex" 
+                      class="indicator-item"
+                    >
+                      <div class="label">{{ ind.label }}:</div>
+                      <!-- 墙内数据直接取 item[key]，例如 item.coVal -->
+                      <div class="value">{{ getDataValue(item, ind.key) }} {{ ind.unit }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="indicator-group">
+                  <div class="group-title">
+                    <div class="title-icon-top icon-outer"></div>
+                    <div class="title-icon-bottom"></div>
+                    <div class="title-content">
+                      密闭墙外<br />
+                      监测指标
+                    </div>
+                  </div>
+                  <div class="indicator-area">
+                    <div 
+                      v-for="(ind, indIndex) in indicatorColumns" 
+                      :key="'outer-' + indIndex" 
+                      class="indicator-item"
+                    >
+                      <div class="label">{{ ind.label }}:</div>
+                      <!-- 墙外数据+ Out item[key]，例如 item.coValOut -->
+                      <div class="value">{{ getDataValue(item, ind.key + 'Out') }} {{ ind.unit }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="indicator-group">
+                  <div class="group-title">
+                    <div class="title-icon-top icon-result"></div>
+                    <div class="title-icon-bottom"></div>
+                    <div class="title-content">
+                      预警结果  
+                    </div>
+                  </div>
+                  <div class="indicator-area indicator-result"> 
+                    <div 
+                      v-for="(res, resIndex) in resultColumns" 
+                      :key="'result-' + resIndex" 
+                      class="indicator-item"
+                    >
+                      <div class="label">{{ res.label }}:</div>
+                      <div class="value">{{ res.value }}</div>
+                    </div>
+                    <!-- 需要占位符以保持网格对齐，保留一个空的 placeholder -->
+                    <div class="indicator-item placeholder-item"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 异常超限报警 -->
+        <div class="abnormal-alarm">
+          <div class="alarm-header">
+            <div class="title">异常超限报警</div>
+            <div class="btn-group">
+              <!-- <button class="btn">收起图表</button> -->
+            </div>
+          </div>
+          <div class="alarm-content">
+            <div 
+              v-for="(alarm, index) in alarmColumns" 
+              :key="index" 
+              class="alarm-item"
+            >
+              <div class="alarm-name">{{ alarm.label }}</div>
+              <div class="alarm-count">{{ mineAlarmData[alarm.key] ?? '-' }}</div>
+              <div class="alarm-border">
+                <div class="alarm-border-icon"></div>
+                <div class="alarm-border-line"></div>
+              </div>
+              <div class="alarm-border-bottom"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 历史数据折线图 -->
+        <div class="historical-data">
+          <div class="chart-header">
+            <div class="title">历史数据分析图表</div>
+            <div class="btn-group">
+              <button class="btn" @click="toggleChartVisibility">
+                {{ isChartVisible ? '收起图表' : '展开图表' }}
+              </button>
+            </div>
+          </div>
+          <div class="chart-content" v-show="isChartVisible">
+            <ConnectAnalysis ref="connectAnalysisRef"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useRouter, useRoute } from 'vue-router';
+  import { useAppStore } from '/@/store/modules/app';
+  import { computed, ref, watch, onMounted, nextTick } from 'vue';
+  import { useMineDepartmentStore } from '/@/store/modules/mine';
+  import { getGoafAlarmNum, getGoafData, getMineData, getProvinceAlarm } from '../overhaul.api';
+  import { StatusColorEnum } from '/@/enums/jeecgEnum';
+  import ConnectAnalysis from '/@/views/analysis/warningAnalysis/connectAnalysis/index.vue';
+  
+
+  const appStore = useAppStore();
+  const mineStore = useMineDepartmentStore();
+
+  // 路由实例
+  const router = useRouter();
+  const route = useRoute();
+
+    // 1. 定义数据类型接口
+  interface GoafMonitorItem {
+    devicePos?: string;
+    [key: string]: any; // 允许其他动态属性
+  }
+
+    /**
+   * 风险等级映射配置
+   */
+  const RISK_LEVEL_MAP: Record<string, { text: string; color: string }> = {
+    '4': { text: '高风险', color: StatusColorEnum.red },
+    '3': { text: '较高风险', color: StatusColorEnum.gold },
+    '2': { text: '一般风险', color: StatusColorEnum.yellow },
+    '1': { text: '低风险', color: StatusColorEnum.blue },
+    '0': { text: '无风险', color: '#333' }, // 假设 0 为无风险或默认
+  };
+
+  // 顶部的基础信息部分
+  const basicInfoColumns = [
+    { label: '组织机构', key: 'parentArea' },
+    { label: '瓦斯等级', key: 'gasLevelName' },
+    { label: '煤层自燃倾向性', key: 'coalSeamLevel' },
+    { label: '生产状态', key: 'gjMineStatus' },
+    { label: '预警结果', key: 'alarmLevel' },
+    { label: '预警时间', key: 'createTime' },
+    { label: '持续时间', key: 'chixuTime' },
+    { label: '接入状态', key: 'accessStatus' },
+    { label: '数据联网状态', key: 'status' },
+    { label: '设备数量', key: 'accessGoafNum' },
+  ];
+
+  // 1. 预警数据详情 - 顶部指标列配置
+  const dataColumns = [
+    { label: '闭内自燃发火隐患', key: 'fireAlarm.alarmName', colorKey: 'fireAlarm.alarmLevel', type: 'alarm'  },
+    { label: '闭外自燃发火隐患', key: 'fireAlarmOut.alarmName', colorKey: 'fireAlarmOut.alarmLevel', type: 'alarm'  },
+    { label: '爆炸三角', key: 'explosionAlarm.alarmName', colorKey: 'explosionAlarm.alarmLevel', type: 'alarm'  },
+    { label: '压差预警', key: 'sourcePressureAlarm.alarmName', colorKey: 'sourcePressureAlarm.alarmLevel', type: 'alarm'  },
+    { label: '漏风状态判定', key: 'leakageAlarm.alarmName', colorKey: 'leakageAlarm.alarmLevel', type: 'alarm'  },
+    { label: '设备状态', key: 'linkStatus', type: 'status' },
+    { label: '检查时间', key: 'readTime',type: 'text' },
+  ];
+
+  // 2. 监测指标通用配置 (用于墙内和墙外)
+  const indicatorColumns = [
+    { label: 'CO', key: 'coVal', unit: 'ppm' },
+    { label: 'CO2', key: 'co2Val', unit: '%' },
+    { label: 'CH4', key: 'ch4Val', unit: '%' },
+    { label: 'O2', key: 'o2Val', unit: '%' },
+    { label: 'C2H2', key: 'c2h2Val', unit: 'ppm' },
+    { label: 'C2H4', key: 'c2h4Val', unit: 'ppm' },
+    { label: '温度', key: 'temperature', unit: '°C' },
+  ];
+
+  // 3. 预警结果配置
+  const resultColumns = [
+    { label: '数据来源', value: '最近2天' }, // 静态数据可以直接写死在配置里，或者从 item 取
+    { label: '预警结果', value: '异常' },     // 这里假设是静态展示，如果是动态可改为 key: 'resultStatus'
+  ];
+
+  // 4. 异常超限报警配置
+  const alarmColumns = [
+    { label: '甲烷超限', key: 'ch4Val' },
+    { label: '氧气超限', key: 'o2Val' },
+    { label: '一氧化碳超限', key: 'coVal' },
+    { label: '二氧化碳超限', key: 'co2Val' },
+    { label: '乙烯超限', key: 'c2h4Val' },
+    { label: '乙炔超限', key: 'c2h2Val' },
+    { label: '压差超限', key: 'sourcePressure' },
+    { label: '温度超限', key: 'temperature' },
+  ];
+  const basicInfo = ref<any>({});  //煤矿基础信息数据
+  const alarmStatistics = ref<any>({});  //预警统计数据
+  const goafMonitorData = ref<GoafMonitorItem[]>([]); //密闭监测详情数据
+  const mineAlarmData = ref<any>({}); // 煤矿预警数据
+
+  const connectAnalysisRef = ref<any>(null); // 连接分析组件实例
+  const isChartVisible = ref(true); // 控制图表显示/隐藏的状态
+
+  // 1. 用于存储展开状态的索引集合 (key: index, value: boolean)
+  const expandedIndices = ref<Record<number, boolean>>({});
+
+  // 2. 切换展开/收起状态的方法
+  const toggleExpand = (index: number) => {
+    expandedIndices.value[index] = !expandedIndices.value[index];
+  };
+
+  // 3. 判断是否展开
+  const isExpanded = (index: number) => {
+    return !!expandedIndices.value[index];
+  };
+   // 4. 展开所有详情
+  const expandAll = () => {
+    goafMonitorData.value.forEach((_, index) => {
+      expandedIndices.value[index] = true;
+    });
+  };
+
+  // 5. 收起所有分组
+  const collapseAll = () => {
+    // 清空对象即可，或者遍历设为 false
+    expandedIndices.value = {}; 
+  };
+  // 切换图表显示状态
+  const toggleChartVisibility = () => {
+    isChartVisible.value = !isChartVisible.value;
+  };
+   /**
+   * 获取设备状态信息 (文本和颜色)
+   * @param status 0: 断开, 1: 正常
+   */
+  const getlinkStatusInfo = (status?: number | string) => {
+    if (status === 1 || status === '1') {
+      return { text: '正常', color: '#52c41a' }; // 绿色
+    }
+    return { text: '断开', color: '#ff4d4f' }; // 红色
+  };
+    /**
+   * 获取列显示的文本
+   */
+  const getColDisplayText = (col: any, item: any) => {
+    const rawValue = getDataValue(item, col.key);
+    
+    if (col.type === 'status') {
+      return getlinkStatusInfo(rawValue).text;
+    }
+    
+    // 默认直接返回原始值或经过 getDataValue 处理后的值
+    return rawValue;
+  };
+
+  /**
+   * 获取列显示的颜色
+   */
+  const getColValueColor = (col: any, item: any) => {
+    // 如果是报警类型，使用原有的报警颜色逻辑
+    if (col.type === 'alarm' && col.colorKey) {
+      return getAlarmColor(getDataValue(item, col.colorKey));
+    }
+    
+    // 如果是设备状态类型，使用状态颜色逻辑
+    if (col.type === 'status') {
+      return getlinkStatusInfo(getDataValue(item, col.key)).color;
+    }
+    
+    // 默认黑色
+    return '#333';
+  };
+   /**
+   * 获取风险等级对应的文本
+   * @param level 报警级别 '1', '2', '3', '4'
+   */
+  const getRiskText = (level?: string | number) => {
+    if (!level && level !== 0) return '-';
+    return RISK_LEVEL_MAP[String(level)]?.text || '未知';
+  };
+  /**
+   * 根据点分字符串路径获取对象值 (例如: 'fireAlarm.alarmName')
+   * @param item 数据对象
+   * @param path 路径字符串
+   * @param defaultValue 默认值
+   */
+  const getDataValue = (item: any, path: string, defaultValue: string = '-') => {
+    if (!item || !path) return defaultValue;
+    const val = path.split('.').reduce((acc, part) => acc && acc[part], item);
+    return val ?? defaultValue;
+  };
+  /**
+   * 获取报警颜色
+   * @param level 报警级别 '1', '2', '3', '4'
+   */
+  const getAlarmColor = (level?: string | number) => {
+    if (!level && level !== 0) return '#333'; // 默认颜色
+    return RISK_LEVEL_MAP[String(level)]?.color;
+  };
+
+  
+  /**
+   * 获取基础信息的显示内容（包含文本和颜色）
+   */
+  const getBasicInfoDisplay = (key: string) => {
+    const value = basicInfo.value[key];
+    
+    // 默认返回黑色文本
+    const defaultResult = { text: value ?? '-', color: '#333' };
+
+    if (key === 'accessStatus') {
+      // 1: 已接入 (绿色), 其他: 未接入 (红色)
+      return value === 1 
+        ? { text: '已接入', color: '#52c41a' } 
+        : { text: '未接入', color: StatusColorEnum.red };
+    }
+    
+    if (key === 'status') {
+      // 1: 在线 (绿色), 其他: 离线 (红色)
+      return value === 1 
+        ? { text: '在线', color: '#52c41a' } 
+        : { text: '离线', color: StatusColorEnum.red };
+    }
+    
+    if (key === 'alarmLevel') {
+      // 根据风险等级获取颜色
+      const levelStr = String(value);
+      const riskInfo = RISK_LEVEL_MAP[levelStr];
+      if (riskInfo) {
+        return { text: riskInfo.text, color: riskInfo.color };
+      }
+      return { text: '未知', color: '#333' };
+    }
+
+    if (key === 'gasLevelName') {
+      // 瓦斯等级特殊处理
+      const val = String(value);
+      if (val.includes('低瓦斯')) {
+        return { text: val, color: StatusColorEnum.blue }; // 蓝色
+      } else if (val.includes('高瓦斯')) {
+        return { text: val, color: StatusColorEnum.gold }; // 橙色/金色
+      } else if (val.includes('突出')) {
+        return { text: val, color: StatusColorEnum.red }; // 红色
+      }
+      return { text: val, color: '#333' };
+    }
+
+    if (key === 'gjMineStatus') {
+      // 生产状态特殊处理
+      const val = String(value);
+      if (val.includes('正常生产')) {
+        return { text: val, color: '#52c41a' }; // 绿色
+      } else if (val.includes('拟建')) {
+        return { text: val, color: StatusColorEnum.blue }; // 蓝色
+      } else {
+        // 其余状态均显示绿色
+        return { text: val, color: StatusColorEnum.red }; 
+      }
+    }
+
+
+    return defaultResult;
+  };
+
+  /**
+   * 获取基础信息值的文本（兼容旧逻辑，如果只需要文本）
+   */
+  const getBasicInfoValue = (key: string) => {
+    return getBasicInfoDisplay(key).text;
+  };
+
+  /**
+   * 获取基础信息值的颜色
+   */
+  const getBasicInfoColor = (key: string) => {
+    return getBasicInfoDisplay(key).color;
+  };
+
+
+  /**
+   * 通用页面跳转方法
+   * @param record 当前行数据
+   * @param path 目标路径
+   */
+  function handleGoToPageQuery(path: string) {
+
+    router.push({
+      path,
+    }).catch(err => {
+      console.error('跳转失败:', err);
+    });
+  }
+
+  async function fetchLeafData() {
+    try {
+      // 异步获取所有接口数据（并行请求提升性能）
+      const [goafAlarmNum, goafData, mineData, alarmData ] = await Promise.all([
+        getGoafAlarmNum(appStore.simpleMapParams), // 预警统计
+        getGoafData(appStore.simpleMapParams), // 密闭监测数据
+        getMineData(appStore.simpleMapParams), // 煤矿基础信息数据
+        getProvinceAlarm(appStore.simpleMapParams),  // 预警信息列表
+      ]);
+      alarmStatistics.value = goafAlarmNum[0];
+      goafMonitorData.value = goafData.records;
+      basicInfo.value = mineData.records[0];
+      mineAlarmData.value = alarmData.records[0];
+
+      nextTick(() => {
+        if (connectAnalysisRef.value && typeof connectAnalysisRef.value.generateChart === 'function') {
+          connectAnalysisRef.value.generateChart();
+        }
+      });
+
+    } catch (error) {
+      console.error('数据获取/配置更新失败：', error);
+    }
+  }
+  onMounted(() => {
+    fetchLeafData();
+    console.log('当前页面的参数：', mineStore.getRoot);
+  });
+
+// 页面逻辑代码
+</script>
+
+<style scoped>
+.dashboard-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: scroll;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  background-color: #1a3d72;
+  color: white;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sidebar {
+  width: 200px;
+  background-color: #1a3d72;
+  color: white;
+  padding: 20px 0;
+}
+
+.menu-item {
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.menu-item:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.menu-item.active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.content-area {
+  flex: 1;
+  padding: 20px;
+  background-color: #f0f8ff;
+}
+
+.top-info {
+  width: 100%;
+  height: 200px;
+  margin-bottom: 20px;
+}
+
+.info-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  background-image: url('/@/assets/images/overHaul/leafgPage/info-card-bg.png');
+  background-repeat: no-repeat;
+  background-size: 100%;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.card-title {
+  width: 20%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 8px 10px 8px 50px;
+}
+.info-border {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  .info-border-icon {
+    width: 16px;
+    height: 16px;
+    background-image: url('/@/assets/images/overHaul/leafgPage/info-card-icon1.svg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+  }
+  .info-border-line {
+    width: 1px;
+    height: 95px;
+    border-left: 2px dotted #397af3;
+    margin-left: 7px;
+  }
+}
+.info-details {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 8px 0;
+  
+  .label {
+    font-size: 16px;
+    color: #000;
+  }
+
+  .value {
+    font-size: 16px;
+    color: #000;
+  }
+
+  .tag {
+    width: fit-content;
+    height: 24px;
+    padding: 2px 8px;
+    border-radius: 15px;
+    font-size: 12px;
+    background-color: #ff6b6b;
+    color: white;
+  }
+}
+
+.card-details {
+  width: 80%;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+}
+.info-card-item {
+  max-width: 245px;
+  height: 70px;
+  position: relative;
+  padding: 8px 10px 8px 40px;;
+  background-color: #f1f7ff;
+  border-radius: 4px;
+  text-align: left;
+}
+.card-border {
+  width: 20px;
+  height: 50px;
+  position: absolute;
+  top: 14px;
+  left: 15px;
+
+  .card-border-icon{
+    width: 16px;
+    height: 16px;
+    background-image: url('/@/assets/images/overHaul/leafgPage/info-card-icon.svg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+  }
+  .card-border-line{
+    width: 1px;
+    height: 30px;
+    border-left: 2px dotted #397af3;
+    margin-left: 7px;
+  }
+}
+
+.card-label {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.card-value-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+
+}
+
+.card-value-text {
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+}
+
+
+
+.warning-statistics {
+  background-color: #ffffff;
+  margin-bottom: 20px;
+  padding: 10px 12px;
+  border-radius: 4px;
+}
+
+.statistics-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.btn-group {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  color: #2b6ff0;
+  padding: 6px 12px;
+  border: 1px solid #2b6ff0;
+  border-radius: 4px;
+  background-color: #E9F0FE;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.btn:hover {
+  background-color: #f5f5f5;
+}
+
+.statistics-content {
+  display: flex;
+  gap: 50px;
+}
+
+.stat-item {
+  flex: 1;
+  padding: 16px 50px 10px 90px;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  background-image: url('/@/assets/images/overHaul/leafgPage/high-risk-bg.png');
+  background-repeat: no-repeat;
+  background-size: 100%;
+
+  .icon {
+    position: absolute;
+    top: 15px;
+    left: 20px;
+  }
+  .text {
+    font-size: 16px;
+    color: #000;
+    font-weight: bold;
+    .text-sub {
+      font-size: 12px;
+      color: #989587;
+    }
+  }
+  .count {
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .icon-top{
+    width: 40px;
+    height: 40px;
+    background-image: url('/@/assets/images/overHaul/leafgPage/high-risk-icon1.svg');
+    background-repeat: no-repeat;
+    background-size: 100%;;
+  }
+  .icon-bottom{
+    width: 40px;
+    height: 20px;
+    background-image: url('/@/assets/images/overHaul/leafgPage/high-risk-icon2.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    margin-top: -5px;
+  }
+}
+
+.stat-item.high-risk {
+  background-image: url('/@/assets/images/overHaul/leafgPage/high-risk-bg.png');
+  .icon-top {
+    background-image: url('/@/assets/images/overHaul/leafgPage/high-risk-icon1.svg');
+  }
+  .icon-bottom {
+    background-image: url('/@/assets/images/overHaul/leafgPage/high-risk-icon2.png');
+  }
+  .count {
+    color: #FF0000;
+  }
+}
+
+.stat-item.medium-risk {
+  background-image: url('/@/assets/images/overHaul/leafgPage/medium-risk-bg.png');
+  .icon-top {
+    background-image: url('/@/assets/images/overHaul/leafgPage/medium-risk-icon1.svg');
+  }
+  .icon-bottom {
+    background-image: url('/@/assets/images/overHaul/leafgPage/medium-risk-icon2.png');
+  }
+  .count {
+    color: #FF7700;
+  }
+}
+
+.stat-item.normal-risk {
+  background-image: url('/@/assets/images/overHaul/leafgPage/normal-risk-bg.png');
+  .icon-top {
+    background-image: url('/@/assets/images/overHaul/leafgPage/normal-risk-icon1.svg');
+  }
+  .icon-bottom {
+    background-image: url('/@/assets/images/overHaul/leafgPage/normal-risk-icon2.png');
+  }
+  .count {
+    color: #D5C702;
+  }
+}
+
+.stat-item.low-risk {
+  background-image: url('/@/assets/images/overHaul/leafgPage/low-risk-bg.png');
+  .icon-top {
+    background-image: url('/@/assets/images/overHaul/leafgPage/low-risk-icon1.svg');
+  }
+  .icon-bottom {
+    background-image: url('/@/assets/images/overHaul/leafgPage/low-risk-icon2.png');
+  }
+  .count {
+    color: #0070FF;
+  }
+}
+
+.warning-details {
+  background-color: #ffffff;
+  margin-bottom: 20px;
+  padding: 10px 12px;
+  border-radius: 4px;
+}
+
+.details-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.warning-item {
+  margin-bottom: 20px;
+  background-color: rgba(218, 234, 251, 0.5);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 10px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid rgba(43, 111, 240, 0.2); 
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    background-image: url('/@/assets/images/overHaul/leafgPage/info-card-icon1.svg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+  .name {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin: 0 15px 0px 5px;
+  }
+
+  .risk-level {
+    width: fit-content;
+    height: 24px;
+    padding: 2px 8px;
+    border-radius: 15px;
+    font-size: 12px;
+    background-color: #ff6b6b;
+    color: white;
+  }
+
+  
+  .header-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .expand-btn {
+    color: #2b6ff0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 12px;
+    border: 1px solid #2b6ff0;
+    border-radius: 4px;
+    background-color: #E9F0FE;
+    cursor: pointer;
+    font-size: 12px;
+  }
+
+  .expand-btn:hover {
+    color: #1a5cc8;
+  }
+
+  .arrow-icon-wrapper {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    display: inline-block;
+  }
+
+  .arrow-icon {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-image: url('/@/assets/images/overHaul/leafgPage/icon-down.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    transition: transform 0.3s ease;
+  }
+
+  .arrow-icon.rotate {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+
+
+}
+
+.data-row {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.data-col {
+  width: 100%;
+  height: 80px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center ;
+  padding: 0 16px 0 30px;
+  background-image: url('/@/assets/images/overHaul/leafgPage/warning-item-bg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border-radius: 4px;
+  font-size: 12px;
+
+  .col-title {
+    color: #000;
+    font-size: 14px;
+    margin-bottom: 5px;
+  }
+  .col-value {
+    color: #000;
+    font-size: 14px;
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      display: inline-block;
+    }
+  }
+  .col-icon {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 18px;
+    height: 18px;
+    background-image: url('/@/assets/images/overHaul/leafgPage/info-card-icon.svg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+}
+
+.monitoring-indicators {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.indicator-group {
+  display: flex;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  min-width: 0;
+  flex: 1;
+}
+
+.indicator-group:nth-child(1) {
+  flex: 4;
+}
+
+.indicator-group:nth-child(2) {
+  flex: 4;
+}
+
+.indicator-group:nth-child(3) {
+  flex: 2;
+}
+
+.group-title {
+  width: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+  color: #000;
+  background-color: rgba(192, 222, 255, 0.6);
+
+  .title-icon-top {
+    width: 30px;
+    height: 30px;
+    background-image: url('/@/assets/images/overHaul/leafgPage/icon-top1.svg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    margin-bottom: -5px;
+  }
+  .icon-outer{
+    background-image: url('/@/assets/images/overHaul/leafgPage/icon-top2.svg');
+  }
+  .icon-result{ 
+    background-image: url('/@/assets/images/overHaul/leafgPage/icon-top3.svg');
+  }
+  .title-icon-bottom{
+    width: 50px;
+    height: 23px;
+    background-image: url('/@/assets/images/overHaul/leafgPage/icon-bottom.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+}
+
+.indicator-area {
+  width: calc(100% - 120px);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  padding: 10px 16px;
+
+}
+.indicator-result {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.indicator-item {
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: space-between;
+  background: linear-gradient(90deg, rgba(192, 222, 255, 0.5) 0%, rgba(192, 222, 255, 0.2) 100%);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+
+/* 预警结果只有两行，用来占位的 item */
+.placeholder-item {
+  visibility: hidden;
+  height: 30px;
+  margin-bottom: 8px;
+  background: transparent;
+  pointer-events: none;
+}
+
+.indicator-result .indicator-item:last-of-type {
+   margin-bottom: 8px; 
+}
+
+.indicator-item:last-child {
+  border-bottom: none;
+}
+
+
+.abnormal-alarm {
+  background-color: #fff;
+  margin-bottom: 20px;
+  padding: 10px 12px;
+  border-radius: 4px;
+}
+
+.alarm-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.alarm-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.alarm-item {
+  flex: 1;
+  min-width: 120px;
+  height: 70px;
+  position: relative;
+  padding: 8px 10px 8px 40px;;
+  background-color: rgba(215, 233, 253, 0.9);
+  border-radius: 4px;
+  text-align: left;
+}
+
+.alarm-name {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.alarm-count {
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+}
+.alarm-border {
+  width: 20px;
+  height: 50px;
+  position: absolute;
+  top: 14px;
+  left: 15px;
+
+  .alarm-border-icon{
+    width: 16px;
+    height: 16px;
+    background-image: url('/@/assets/images/overHaul/leafgPage/info-card-icon.svg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+  }
+  .alarm-border-line{
+    width: 1px;
+    height: 30px;
+    border-left: 2px dotted #397af3;
+    margin-left: 7px;
+  }
+}
+.alarm-border-bottom{ 
+  width: 30px;
+  height: 30px;
+  background-image: url('/@/assets/images/overHaul/leafgPage/alarm-card-icon.png');
+  background-repeat: no-repeat;
+  background-size: 100%;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+.historical-data {
+  background-color: #fff;
+  margin-bottom: 20px;
+  padding: 10px 12px;
+  border-radius: 4px;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chart-content {
+  padding: 0;
+  height: 600px; 
+  overflow: hidden;
+  position: relative;
+}
+
+/* 深度选择器：重置 ConnectAnalysis 的样式以适配嵌入环境 */
+:deep(.connectAnalysis) {
+  margin: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.filter-area) {
+  display: none;
+}
+
+:deep(.echart-box) {
+  /* 让图表区域占据剩余所有高度 */
+  flex: 1;
+  height: auto !important;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+:deep(.echart-content) {
+  flex: 1;
+  height: auto !important;
+  min-height: 300px;
+}
+</style>

src/views/dashboard/Overhaul/overhaul.api.ts

@@ -0,0 +1,53 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  getCoalSeamFireNum = '/province/homeData/getCoalSeamFireNum',
+  getMineProductionStatusNum = '/province/homeData/getMineProductionStatusNum',
+  getOverLimitNum = '/province/homeData/getOverLimitNum',
+  getGoafAlarmNum = '/province/homeData/getGoafAlarmNum',
+  getGoafAlarmLevel = '/province/homeData/getGoafAlarmLevel',
+  getGoafAccessCount = '/province/mineData/getGoafAccessCount',
+  getGoafData = '/province/device/getGoafData',
+  getGoafStatusNum = '/province/homeData/getGoafStatusNum',
+  getProvinceAlarm = '/province/alarm/getProvinceAlarm',
+  getMineData = '/province/mineData/getMineData',
+}
+
+// 执法处风险统计
+export const getGoafAlarmNum = (params) =>
+  defHttp.post(
+    {
+      url: Api.getGoafAlarmNum,
+      params,
+    },
+    {
+      joinParamsToUrl: true,
+    }
+  );
+
+// 查询密闭监测数据
+export function getGoafData(params: any) {
+    return defHttp.post({ url: Api.getGoafData, params }, { joinParamsToUrl: true });
+}
+
+// 获取煤矿数据
+export const getMineData = (params) =>
+  defHttp.post({
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    url: Api.getMineData,
+    params,
+  });
+
+
+//查询预警数据
+export const getProvinceAlarm = (params) =>
+  defHttp.post(
+    {
+      url: Api.getProvinceAlarm,
+      params: {
+        alarmType: 'overLimitAlarm',
+        ...params,
+      },
+    },
+    { joinParamsToUrl: true }
+  );

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>