[Mod 0000] 修改张家峁系统概览样式

src/assets/images/vent/home/selfIgnition/install-bundle-monitor.svg

@@ -0,0 +1,17 @@
+<svg id="组_16859" data-name="组 16859" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.961" height="20.961" viewBox="0 0 20.961 20.961">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cb5fd"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="椭圆_2583" data-name="椭圆 2583" d="M10.481,1.5a8.983,8.983,0,1,0,8.983,8.983A8.994,8.994,0,0,0,10.481,1.5m0-1.5A10.481,10.481,0,1,1,0,10.481,10.481,10.481,0,0,1,10.481,0Z" transform="translate(0)" fill="url(#linear-gradient)"/>
+  <path id="路径_55457" data-name="路径 55457" d="M4.124.572A2.994,2.994,0,1,0,7.118,3.566,3,3,0,0,0,4.124.572m0-.749A3.743,3.743,0,1,1,.381,3.566,3.743,3.743,0,0,1,4.124-.177Z" transform="translate(3.184 1.409)" fill="url(#linear-gradient)"/>
+  <path id="椭圆_2585" data-name="椭圆 2585" d="M2.994.749A2.246,2.246,0,1,0,5.24,2.994,2.248,2.248,0,0,0,2.994.749m0-.749A2.994,2.994,0,1,1,0,2.994,2.994,2.994,0,0,1,2.994,0Z" transform="translate(10.481 1.497)" fill="url(#linear-gradient)"/>
+  <path id="路径_55458" data-name="路径 55458" d="M2.895.271a2.6,2.6,0,1,0,2.6,2.6,2.606,2.606,0,0,0-2.6-2.6m0-.749A3.352,3.352,0,1,1-.457,2.874,3.352,3.352,0,0,1,2.895-.478Z" transform="translate(7.765 7.606)" fill="url(#linear-gradient)"/>
+  <path id="椭圆_2586" data-name="椭圆 2586" d="M2.994.749A2.246,2.246,0,1,0,5.24,2.994,2.248,2.248,0,0,0,2.994.749m0-.749A2.994,2.994,0,1,1,0,2.994,2.994,2.994,0,0,1,2.994,0Z" transform="translate(13.475 5.989)" fill="url(#linear-gradient)"/>
+  <path id="路径_55454" data-name="路径 55454" d="M2.819.325A2.565,2.565,0,1,0,5.384,2.889,2.567,2.567,0,0,0,2.819.325m0-.749A3.313,3.313,0,1,1-.494,2.889,3.313,3.313,0,0,1,2.819-.424Z" transform="translate(8.793 14.124)" fill="url(#linear-gradient)"/>
+  <path id="路径_55455" data-name="路径 55455" d="M2.31.047A2.469,2.469,0,1,0,4.779,2.516,2.472,2.472,0,0,0,2.31.047m0-.749A3.218,3.218,0,1,1-.908,2.516,3.218,3.218,0,0,1,2.31-.7Z" transform="translate(4.04 12.68)" fill="url(#linear-gradient)"/>
+  <path id="路径_55456" data-name="路径 55456" d="M2.465.047A2.625,2.625,0,1,0,5.089,2.671,2.628,2.628,0,0,0,2.465.047m0-.749A3.373,3.373,0,1,1-.908,2.671,3.373,3.373,0,0,1,2.465-.7Z" transform="translate(1.046 7.43)" fill="url(#linear-gradient)"/>
+  <path id="路径_55459" data-name="路径 55459" d="M1.879.14A2.246,2.246,0,1,0,4.125,2.386,2.248,2.248,0,0,0,1.879.14m0-.749A2.994,2.994,0,1,1-1.115,2.386,2.994,2.994,0,0,1,1.879-.608Z" transform="translate(14.28 11.773)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/vent/home/selfIgnition/install-fiber-temperature.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.312" height="20.647" viewBox="0 0 21.312 20.647">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cfff1"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_13890" data-name="组 13890" transform="translate(-0.001 0)">
+    <path id="路径_55460" data-name="路径 55460" d="M-18841.469,4263.646l.326-.476c-.389-.264-9.5-6.474-12.777-7.424l-.158.553C-18850.887,4257.225-18841.564,4263.582-18841.469,4263.646Z" transform="translate(18854.078 -4250.118)" fill="url(#linear-gradient)"/>
+    <path id="路径_55461" data-name="路径 55461" d="M-18842.934,4261.309l.352-.458-11.754-9.04-.352.457Z" transform="translate(18856.445 -4248.205)" fill="url(#linear-gradient)"/>
+    <path id="路径_55464" data-name="路径 55464" d="M.359,0,0,.452,11.6,9.64l.357-.452Z" transform="matrix(-0.996, 0.087, -0.087, -0.996, 14.117, 13.578)" fill="url(#linear-gradient)"/>
+    <path id="路径_55463" data-name="路径 55463" d="M.351,0,0,.457,11.754,9.5l.352-.458Z" transform="matrix(-0.998, -0.07, 0.07, -0.998, 14.696, 13.515)" fill="url(#linear-gradient)"/>
+    <path id="路径_55465" data-name="路径 55465" d="M.351,0,0,.457,11.754,9.5l.352-.458Z" transform="translate(15.109 13.502) rotate(-172)" fill="url(#linear-gradient)"/>
+    <path id="路径_55462" data-name="路径 55462" d="M.4,0,0,.415c2.518,2.435,9.159,9.07,9.64,10.52l.548-.182a10.385,10.385,0,0,0-1.83-2.534c-.834-.962-1.952-2.167-3.321-3.582C2.707,2.232.423.022.4,0Z" transform="matrix(-0.998, -0.07, 0.07, -0.998, 14.091, 11.619)" fill="url(#linear-gradient)"/>
+    <g id="组_13474" data-name="组 13474" transform="translate(23.037 17.144) rotate(135)">
+      <path id="路径_55456" data-name="路径 55456" d="M2.255,0H.26C.117,0,0,.314,0,.7V3.051H2.515V.7C2.515.314,2.4,0,2.255,0Z" transform="translate(2.439 0)" fill="url(#linear-gradient)"/>
+      <path id="路径_55459" data-name="路径 55459" d="M4.382,0H.506C.227,0,0,.314,0,.7V3.051H4.888V.7C4.888.314,4.662,0,4.382,0Z" transform="translate(1.252 8.158)" fill="url(#linear-gradient)"/>
+      <path id="路径_55458" data-name="路径 55458" d="M.863,0l.543,2.463H0l.009.011L2.686,5.73l-.6-2.356H3.512ZM.029,2.477H1.423l0-.008L.889.055l2.6,3.306H2.071l.587,2.314-2.63-3.2Z" transform="translate(1.944 3.612)" fill="url(#linear-gradient)"/>
+      <path id="路径_55454" data-name="路径 55454" d="M7.233,7.168a.094.094,0,0,1-.085.1H.1a.094.094,0,0,1-.085-.1s-.027-1.06,0-1.411C.081,4.859.423,3.1.481,2.2c0,0,0,0,0,0,.637-.755,1.6-.947,1.807-1.819A.451.451,0,0,1,2.7,0H4.542a.451.451,0,0,1,.414.375c.211.872,1.17,1.063,1.807,1.819,0,0,0,0,0,0,.059.9.4,2.662.47,3.559C7.26,6.108,7.233,7.168,7.233,7.168Z" transform="translate(0 2.646)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

src/assets/images/vent/home/selfIgnition/install-sealed-monitor.svg

@@ -0,0 +1,10 @@
+<svg id="组_13897" data-name="组 13897" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.08" height="21.08" viewBox="0 0 21.08 21.08">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cb5fd"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_55289" data-name="路径 55289" d="M74.54,64A10.54,10.54,0,1,0,85.08,74.54,10.541,10.541,0,0,0,74.54,64Zm6.387,16.927a9.014,9.014,0,1,1,1.936-2.873A9,9,0,0,1,80.927,80.927Z" transform="translate(-64 -64)" fill="url(#linear-gradient)"/>
+  <path id="路径_55290" data-name="路径 55290" d="M200.31,192.8a7.51,7.51,0,1,0,7.51,7.51A7.509,7.509,0,0,0,200.31,192.8Zm-.753,13.467a5.889,5.889,0,0,1-1.583-.426,6,6,0,0,1-3.621-4.778h1.5a4.519,4.519,0,0,0,3.7,3.7Zm0-10.411a4.519,4.519,0,0,0-3.7,3.7h-1.5a5.888,5.888,0,0,1,.426-1.583,6,6,0,0,1,4.778-3.621Zm6.284,6.79a6,6,0,0,1-4.778,3.621v-1.5a4.519,4.519,0,0,0,3.7-3.7h1.5A5.889,5.889,0,0,1,205.841,202.646Zm.426-3.089h-1.5a4.519,4.519,0,0,0-3.7-3.7v-1.5a5.889,5.889,0,0,1,1.583.426,6.03,6.03,0,0,1,3.195,3.195A5.889,5.889,0,0,1,206.267,199.557Z" transform="translate(-189.77 -189.77)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/vent/home/selfIgnition/install-wind-speed.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.211" height="20.099" viewBox="0 0 20.211 20.099">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cfff1"/>
+      <stop offset="1" stop-color="#ccedff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_58056" data-name="路径 58056" d="M15.25,1.189a4.4,4.4,0,0,0-4.356,3.794.8.8,0,0,0-.023.172l-.023.268H10.9a.852.852,0,0,0,1.641,0h.013l.023-.2a2.683,2.683,0,1,1,2.653,3.062H3.911a.861.861,0,1,0,0,1.722h11.58v0a4.411,4.411,0,0,0-.241-8.818ZM3.915,6.724H7.869V6.7A3.355,3.355,0,0,0,7.543,0H7.507A3.34,3.34,0,0,0,4.179,3.318V3.6h.034a.852.852,0,0,0,.792.6.82.82,0,0,0,.615-.232A.962.962,0,0,0,5.855,3.6h.028V3.365A1.641,1.641,0,1,1,7.524,5H3.911a.852.852,0,1,0,0,1.7Zm-2.5,4.809a.852.852,0,1,0,.862.852.867.867,0,0,0-.852-.852Zm0-3.26a.852.852,0,1,0,.862.852.875.875,0,0,0-.852-.852Zm0-3.27a.852.852,0,1,0,.862.862A.869.869,0,0,0,1.412,5Zm11.426,6.564v-.023H3.911a.861.861,0,1,0,0,1.722h8.5a2.061,2.061,0,1,1-2.054,2.063V15.1h-.034a.869.869,0,0,0-.792-.607H9.5a.852.852,0,0,0-.815.607H8.65v.266a3.779,3.779,0,0,0,3.57,3.736h.213a3.734,3.734,0,0,0,2.514-.967,3.779,3.779,0,0,0-2.106-6.564Z" transform="translate(-0.071 0.501)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/vent/home/selfIgnition/level-safety-gradient.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25.087" height="29.743" viewBox="0 0 25.087 29.743">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#ecfaff"/>
+      <stop offset="1" stop-color="#2cb6ff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_58060" data-name="路径 58060" d="M88.886,28.337s-12.045-4.2-12.045-11.593V4.293L88.886,0l12.042,4.293V16.745c0,7.4-12.045,11.587-12.045,11.587Zm-.495-16.309,2.128-4.946h-.336l-7.065,7.786h6.54l-2.19,6v.387h.161l7.322-9.224Zm0,0" transform="translate(-76.341 0.531)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/vent/home/selfIgnition/level-safety.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.832" height="14.462" viewBox="0 0 11.832 14.462">
+  <path id="路径_58049" data-name="路径 58049" d="M139.7,44.113a.625.625,0,0,0-.362-.23l-5.423-1.216-5.39,1.216a.61.61,0,0,0-.394.23.7.7,0,0,0-.131.394v6.574a4.151,4.151,0,0,0,.46,1.873,4.063,4.063,0,0,0,1.282,1.413l4.174,2.761,4.174-2.761a3.91,3.91,0,0,0,1.742-3.287V44.507a.7.7,0,0,0-.131-.394Zm-1.183,6.968a2.79,2.79,0,0,1-.3,1.249,2.4,2.4,0,0,1-.855.953l-3.418,2.3V49.24h-4.634V45.033l4.6-1.019V49.24h4.6Z" transform="translate(-128 -42.667)" fill="#ff3823"/>
+</svg>

src/assets/images/vent/home/selfIgnition/level-warning-gradient.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42.959" height="42.835" viewBox="0 0 42.959 42.835">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#ecfaff"/>
+      <stop offset="1" stop-color="#2cb6ff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_58058" data-name="路径 58058" d="M23.32,38.8h-3.03V24.77a14.42,14.42,0,1,1,28.839,0V38.8H23.322ZM35.754,16.162,28.641,27.876H34.33l-1.424,8.786,7.113-11.715H34.33ZM46.663,3.292a1.406,1.406,0,0,1,.511,1.915L44.617,9.653,42.2,8.254l2.556-4.446a1.391,1.391,0,0,1,1.9-.516h.008ZM34.706,0a1.462,1.462,0,0,1,1.513,1.411V6.45H33.194V1.408A1.462,1.462,0,0,1,34.706,0ZM22.758,3.292a1.394,1.394,0,0,1,1.906.511l2.557,4.446-2.416,1.4L22.246,5.2a1.4,1.4,0,0,1,.511-1.91Zm-8.748,8.786a1.391,1.391,0,0,1,1.905-.511l4.43,2.57-1.394,2.426L14.52,13.989a1.4,1.4,0,0,1-.511-1.911Zm41.4,0a1.406,1.406,0,0,1-.511,1.915l-4.428,2.566-1.394-2.427,4.428-2.569a1.394,1.394,0,0,1,1.9.506s0,0,0,.008ZM15.35,38.8H54.075a1.517,1.517,0,1,1,0,3.034H15.35a1.517,1.517,0,1,1,0-3.034Z" transform="translate(-13.23 0.5)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/vent/home/selfIgnition/level-warning.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.627" viewBox="0 0 13.607 13.627">
+  <path id="路径_58046" data-name="路径 58046" d="M16.916,12.639h-.987V8.068a4.7,4.7,0,1,1,9.394,0v4.57H16.916Zm4.05-7.374L18.649,9.08H20.5l-.464,2.862,2.317-3.816H20.5l.464-2.862Zm3.553-4.192a.458.458,0,0,1,.166.624l-.833,1.448-.787-.456L23.9,1.24a.453.453,0,0,1,.618-.168h0ZM20.625,0a.476.476,0,0,1,.493.46V2.1h-.985V.459A.476.476,0,0,1,20.625,0ZM16.733,1.072a.454.454,0,0,1,.621.166l.833,1.448-.787.456-.834-1.449a.456.456,0,0,1,.167-.622ZM13.884,3.934a.453.453,0,0,1,.621-.166l1.443.837-.454.79L14.05,4.557a.456.456,0,0,1-.166-.622Zm13.485,0a.458.458,0,0,1-.167.624l-1.442.836-.454-.79,1.442-.837a.454.454,0,0,1,.619.165s0,0,0,0Zm-13.049,8.7H26.934a.494.494,0,1,1,0,.988H14.32a.494.494,0,1,1,0-.988Z" transform="translate(-13.822)" fill="#ff3823"/>
+</svg>

src/views/vent/home/selfIgnition/components/ManualView.vue

@@ -2,7 +2,7 @@
   <div class="ignition-view manual-view">
     <!-- 左：人工录入 -->
     <ModuleCommon
-      :show-style="panelShowStyle(23, 105, 335, 934)"
+      :show-style="panelShowStyle(20, 132, 353, 907)"
       :module-data="EMPTY_MODULE_DATA"
       module-name="人工录入"
       device-type="ignition_manual_input"
@@ -11,10 +11,6 @@
     >
       <div class="manual-form">
         <div class="form-toolbar">
-          <div class="target-row">
-            <span class="target-label">评价对象：</span>
-            <PanelSelect v-model="manageSystemId" :options="sceneSelectOptions" @update:model-value="loadLatest" />
-          </div>
           <div class="eval-type-tabs">
             <span :class="{ active: evalType === 1 }" @click="changeEvalType(1)">采前评价</span>
             <span :class="{ active: evalType === 2 }" @click="changeEvalType(2)">采中评价</span>
@@ -66,7 +62,7 @@
 
     <!-- 右：评价结果 -->
     <ModuleCommon
-      :show-style="panelShowStyle(1523, 105, 337, 934)"
+      :show-style="panelShowStyle(1545, 132, 353, 907)"
       :module-data="EMPTY_MODULE_DATA"
       module-name="评价结果"
       device-type="ignition_evaluation_result"
@@ -116,99 +112,42 @@
             <span>{{ item.colorName }}</span>
           </div>
         </div>
-
-        <div class="suggestion-box">
-          <span class="suggestion-icon"></span>
-          <p>{{ resultSuggestion }}</p>
-        </div>
-
-        <button class="action-button report-button" :disabled="!hasEvaluation" @click="showReport = true">查看评价报告</button>
       </div>
     </ModuleCommon>
-
-    <Transition name="ignition-fade">
-      <div v-if="showReport" class="report-mask" @click.self="showReport = false">
-        <div class="report-dialog">
-          <div class="report-title">自然发火安全评价报告</div>
-          <div class="report-body">
-            <div class="report-row"
-              ><span>评价对象</span><em>{{ resultTarget }}</em></div
-            >
-            <div class="report-row"
-              ><span>评价类型</span><em>{{ evalTypeText }}</em></div
-            >
-            <div class="report-row"
-              ><span>安全评价得分</span><em>{{ resultScore }}</em></div
-            >
-            <div class="report-row"
-              ><span>风险等级</span><em :style="{ color: resultRiskColor }">{{ resultTagText }}</em></div
-            >
-            <div class="report-row"
-              ><span>数据时间</span><em>{{ resultTime }}</em></div
-            >
-            <div class="report-row"><span>数据来源</span><em>人工录入</em></div>
-            <div class="report-suggestion">
-              <span class="suggestion-icon"></span>
-              <p>{{ resultSuggestion }}</p>
-            </div>
-          </div>
-          <button class="action-button report-close" @click="showReport = false">关闭</button>
-        </div>
-      </div>
-    </Transition>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed, onMounted, reactive, ref } from 'vue';
-  import { useRoute } from 'vue-router';
+  import { computed, onMounted, reactive, ref, watch } from 'vue';
   import ModuleCommon from '../../configurable/components/ModuleCommon.vue';
   import PanelSelect from './PanelSelect.vue';
   import { EMPTY_MODULE_DATA, panelShowStyle } from '../utils';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import {
-    calculateSafetyEvaluation,
-    getSafetyEvaluationByScene,
-    getSafetyItemOptions,
-    getSafetySceneList,
-    saveSafetyEvaluation,
-  } from '../safetyEvaluation.api';
-  import { EVAL_RISK_LEVELS, EVAL_RISK_MAP, FIELD_BY_CODE, FALLBACK_SAFETY_ITEMS, FALLBACK_SCENE } from '../evaluation.config';
-  import type { SafetyEvaluationEntity, SafetyItem, SafetyScene } from '../evaluation.config';
-
-  const route = useRoute();
+  import { calculateSafetyEvaluation, getSafetyEvaluationByScene, getSafetyItemOptions, saveSafetyEvaluation } from '../safetyEvaluation.api';
+  import { EVAL_RISK_LEVELS, EVAL_RISK_MAP, FIELD_BY_CODE, FALLBACK_SAFETY_ITEMS } from '../evaluation.config';
+  import type { SafetyEvaluationEntity, SafetyItem } from '../evaluation.config';
+
+  const props = defineProps<{
+    manageSystemId: string;
+    sceneName?: string;
+  }>();
   const { createMessage } = useMessage();
 
   const levels = EVAL_RISK_LEVELS;
   const items = ref<SafetyItem[]>([]);
-  const scenes = ref<SafetyScene[]>([]);
-  const manageSystemId = ref('');
   const evalType = ref(1);
   const formValues = reactive<Record<string, string>>({});
   const collapsed = reactive<Record<string, boolean>>({});
   const evaluation = ref<SafetyEvaluationEntity | null>(null);
   const loadingOptions = ref(false);
-  const loadingScenes = ref(false);
   const previewing = ref(false);
   const submitting = ref(false);
-  const showReport = ref(false);
 
   const busy = computed(() => loadingOptions.value || previewing.value || submitting.value);
 
-  const sceneSelectOptions = computed(() =>
-    scenes.value.map((scene) => ({
-      label: scene.systemname,
-      value: scene.id,
-      score: 0,
-    }))
-  );
-
-  const selectedScene = computed(() => scenes.value.find((scene) => scene.id === manageSystemId.value));
-
   const targetName = computed(() => {
-    const scene = selectedScene.value;
-    if (!scene) return '未选择评价对象';
-    const name = scene.systemname;
+    const name = props.sceneName || '';
+    if (!name) return '未选择评价对象';
     return name.endsWith('工作面') || name.endsWith('采空区') ? name : `${name}工作面`;
   });
 
@@ -230,15 +169,12 @@
     return groups.filter((group) => group.fields.length);
   });
 
-  const hasEvaluation = computed(() => !!evaluation.value);
   const resultLevel = computed(() => evaluation.value?.riskLevel || '');
   const resultLevelMeta = computed(() => EVAL_RISK_MAP[resultLevel.value] || null);
   const resultRiskColor = computed(() => resultLevelMeta.value?.color || '#3df6ff');
   const resultTagText = computed(() => resultLevel.value || '未评价');
   const resultTarget = computed(() => evaluation.value?.workfaceName || targetName.value);
   const resultTime = computed(() => evaluation.value?.createTime || '--');
-  const resultSuggestion = computed(() => resultLevelMeta.value?.suggestion || '请完成左侧指标选择并提交评价。');
-  const evalTypeText = computed(() => (evalType.value === 1 ? '采前评价' : '采中评价'));
 
   const resultScore = computed(() => {
     const value = evaluation.value?.totalScore;
@@ -306,28 +242,6 @@
     }
   }
 
-  async function loadScenes() {
-    loadingScenes.value = true;
-    try {
-      const res: any = await getSafetySceneList();
-      const records = res?.records || res?.result?.records || [];
-      const list: SafetyScene[] = records.map((record: any) => ({
-        id: String(record.id ?? record.deviceID ?? ''),
-        systemname: record.systemname || record.name || record.sysname || '未命名场景',
-      }));
-      scenes.value = list.length ? list : [{ ...FALLBACK_SCENE }];
-    } catch {
-      scenes.value = [{ ...FALLBACK_SCENE }];
-    } finally {
-      loadingScenes.value = false;
-      const queryScene = (route.query.systemID || route.query.manageSystemId || route.query.sceneId) as string;
-      if (queryScene && !scenes.value.some((scene) => scene.id === queryScene)) {
-        scenes.value.unshift({ id: queryScene, systemname: '当前场景' });
-      }
-      manageSystemId.value = queryScene || scenes.value[0]?.id || '';
-    }
-  }
-
   function applyEvaluation(entity: SafetyEvaluationEntity) {
     if (!entity) return;
     evaluation.value = {
@@ -345,11 +259,11 @@
 
   async function loadLatest() {
     evaluation.value = null;
-    if (!manageSystemId.value) {
+    if (!props.manageSystemId) {
       return;
     }
     try {
-      const res: any = await getSafetyEvaluationByScene(manageSystemId.value);
+      const res: any = await getSafetyEvaluationByScene(props.manageSystemId);
       const data = res?.result ?? res;
       const entity = evalType.value === 2 ? data?.miningEval : data?.beforeEval;
       if (entity) {
@@ -362,6 +276,14 @@
     }
   }
 
+  watch(
+    () => props.manageSystemId,
+    () => {
+      evaluation.value = null;
+      loadLatest();
+    }
+  );
+
   function changeEvalType(type: number) {
     if (evalType.value === type) return;
     evalType.value = type;
@@ -374,8 +296,8 @@
       evalType: evalType.value,
       workfaceName: targetName.value,
     };
-    if (manageSystemId.value) {
-      payload.manageSystemId = manageSystemId.value;
+    if (props.manageSystemId) {
+      payload.manageSystemId = props.manageSystemId;
     }
     visibleItems.value.forEach((item) => {
       const field = FIELD_BY_CODE[item.code];
@@ -435,7 +357,6 @@
 
   onMounted(async () => {
     await loadItems();
-    await loadScenes();
     await loadLatest();
   });
 </script>
@@ -689,16 +610,18 @@
   .result-panel {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    justify-content: space-evenly;
     height: 100%;
-    padding: 8px 12px 12px;
+    padding: 10px 12px 14px;
     box-sizing: border-box;
   }
 
   .result-top {
+    display: flex;
     flex: none;
-    height: 165px;
-    padding-top: 10px;
+    flex-direction: column;
+    justify-content: center;
+    height: 180px;
     box-sizing: border-box;
     background: url('@/assets/images/vent/home/selfIgnition/result-top-bg.png') no-repeat center / 100% 100%;
   }
@@ -737,7 +660,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-top: 16px;
+    margin-top: 26px;
     padding: 0 18px;
   }
 
@@ -784,8 +707,8 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 2px;
-    padding: 10px 14px;
+    gap: 4px;
+    padding: 12px 16px;
     border-left: 1px solid rgba(61, 246, 255, 0.16);
     border-right: 1px solid rgba(61, 246, 255, 0.16);
     background: rgba(7, 42, 70, 0.62);
@@ -795,7 +718,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 38px;
+    height: 46px;
     color: #fff;
     font-size: 15px;
     letter-spacing: 0.5px;
@@ -810,7 +733,6 @@
 
   .level-table {
     flex: none;
-    padding-top: 2px;
   }
 
   .level-head,
@@ -821,7 +743,7 @@
   }
 
   .level-head {
-    height: 34px;
+    height: 40px;
     border: 1px solid rgba(61, 246, 255, 0.4);
     border-radius: 4px;
     color: #3df6ff;
@@ -843,7 +765,7 @@
 
   .level-row {
     position: relative;
-    height: 38px;
+    height: 50px;
     color: #e8f8ff;
     font-size: 14px;
     background: url('@/assets/images/vent/home/selfIgnition/result-row-glow.png') no-repeat center bottom / 100% 10px;
@@ -881,45 +803,6 @@
     }
   }
 
-  .suggestion-box {
-    position: relative;
-    flex: 1;
-    min-height: 0;
-    padding: 14px 16px 14px 34px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    border: 1px solid rgba(61, 246, 255, 0.4);
-    background: url('@/assets/images/vent/home/selfIgnition/result-block-bg.png') no-repeat center / 100% 100%;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(61, 246, 255, 0.35);
-      border-radius: 2px;
-    }
-
-    p {
-      margin: 0;
-      color: #fff;
-      font-size: 15px;
-      line-height: 30px;
-      letter-spacing: 0.5px;
-    }
-  }
-
-  .suggestion-icon {
-    position: absolute;
-    left: 16px;
-    top: 20px;
-    width: 9px;
-    height: 9px;
-    background: #f5222d;
-    box-shadow: 0 0 9px rgba(245, 34, 45, 0.85);
-    transform: rotate(45deg);
-  }
-
   .action-button {
     position: relative;
     flex: none;
@@ -963,82 +846,4 @@
       pointer-events: none;
     }
   }
-
-  .report-dialog {
-    width: 540px;
-    padding: 22px 26px 24px;
-    box-sizing: border-box;
-    border: 1px solid rgba(61, 246, 255, 0.75);
-    background: linear-gradient(180deg, #0b3a5e 0%, #071d33 100%);
-    box-shadow: 0 0 40px rgba(61, 246, 255, 0.35);
-  }
-
-  .report-title {
-    padding-bottom: 14px;
-    border-bottom: 1px solid rgba(61, 246, 255, 0.3);
-    color: #3df6ff;
-    font-family: 'douyuFont', sans-serif;
-    font-size: 20px;
-    letter-spacing: 2px;
-    text-align: center;
-  }
-
-  .report-body {
-    padding: 16px 0;
-  }
-
-  .report-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 36px;
-    color: #cfefff;
-    font-size: 14px;
-
-    em {
-      color: #fff;
-      font-style: normal;
-      font-size: 15px;
-    }
-  }
-
-  .report-suggestion {
-    position: relative;
-    margin-top: 12px;
-    padding: 14px 16px 14px 34px;
-    border: 1px solid rgba(61, 246, 255, 0.3);
-    background: rgba(7, 42, 70, 0.7);
-
-    p {
-      margin: 0;
-      color: #fff;
-      font-size: 14px;
-      line-height: 26px;
-    }
-  }
-
-  .report-close {
-    margin-top: 4px;
-  }
-
-  .report-mask {
-    position: absolute;
-    inset: 0;
-    z-index: 100;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(2, 10, 20, 0.72);
-    backdrop-filter: blur(3px);
-  }
-
-  .ignition-fade-enter-active,
-  .ignition-fade-leave-active {
-    transition: opacity 0.2s ease;
-  }
-
-  .ignition-fade-enter-from,
-  .ignition-fade-leave-to {
-    opacity: 0;
-  }
 </style>

src/views/vent/home/selfIgnition/components/MonitorView.vue

@@ -2,7 +2,7 @@
   <div class="ignition-view monitor-view">
     <!-- 左上：自然发火阶段 -->
     <ModuleCommon
-      :show-style="panelShowStyle(20, 77, 380, 330)"
+      :show-style="panelShowStyle(20, 132, 353, 275)"
       :module-data="EMPTY_MODULE_DATA"
       module-name="自然发火阶段"
       device-type="ignition_fire_stage"
@@ -21,7 +21,7 @@
     <!-- 左中：光纤测温 -->
     <ModuleCommon
       class="fiber-module"
-      :show-style="panelShowStyle(20, 425, 380, 237)"
+      :show-style="panelShowStyle(20, 425, 353, 237)"
       :module-data="EMPTY_MODULE_DATA"
       module-name="光纤测温"
       device-type="ignition_fiber_temperature"
@@ -29,13 +29,13 @@
       :visible="true"
     >
       <div class="fiber-panel">
-        <FiberTemperatureChart :data="FIBER_CHART_DATA" :active="active" />
+        <FiberTemperatureChart :data="fiberData" :active="active" />
       </div>
     </ModuleCommon>
 
     <!-- 右上：传感器监测 -->
     <ModuleCommon
-      :show-style="panelShowStyle(1519, 77, 379, 330)"
+      :show-style="panelShowStyle(1545, 132, 353, 275)"
       :module-data="EMPTY_MODULE_DATA"
       module-name="传感器监测"
       device-type="ignition_sensor_monitor"
@@ -43,7 +43,7 @@
       :visible="true"
     >
       <div class="sensor-panel">
-        <div v-for="group in SENSOR_GROUPS" :key="group.name" class="sensor-group">
+        <div v-for="group in sensorGroups" :key="group.name" class="sensor-group">
           <div class="sensor-group-title">{{ group.name }}</div>
           <div v-for="row in group.rows" :key="row.label" class="sensor-row">
             <span>{{ row.label }}：</span>
@@ -55,7 +55,7 @@
 
     <!-- 右中：预警处置意见 -->
     <ModuleCommon
-      :show-style="panelShowStyle(1519, 425, 379, 237)"
+      :show-style="panelShowStyle(1545, 425, 353, 237)"
       :module-data="EMPTY_MODULE_DATA"
       module-name="预警处置意见"
       device-type="ignition_alert_advice"
@@ -91,8 +91,8 @@
             <span>乙烷</span>
             <span>乙炔</span>
           </div>
-          <div ref="bundleBodyRef" class="table-body">
-            <div v-for="(row, index) in pagedBundleRows" :key="`${row.deviceNo}-${bundlePage}-${index}`" class="table-row">
+          <div class="table-body">
+            <div v-for="(row, index) in bundleRows" :key="`${row.deviceNo}-${index}`" class="table-row">
               <span>{{ row.deviceNo }}</span>
               <span>{{ row.o2 }}</span>
               <span>{{ row.n2 }}</span>
@@ -105,9 +105,6 @@
             </div>
           </div>
         </div>
-        <div class="table-pager">
-          <i v-for="page in totalPages" :key="page" :class="{ active: page === bundlePage }" @click="changeBundlePage(page)"></i>
-        </div>
       </div>
     </ModuleCommon>
 
@@ -132,8 +129,8 @@
             <span>温度</span>
             <span>压差</span>
           </div>
-          <div ref="deviceBodyRef" class="table-body">
-            <div v-for="(row, index) in pagedDeviceRows" :key="`${row.deviceNo}-${devicePage}-${index}`" class="table-row">
+          <div class="table-body">
+            <div v-for="(row, index) in deviceRows" :key="`${row.deviceNo}-${index}`" class="table-row">
               <span>{{ row.deviceNo }}</span>
               <span>{{ row.o2 }}</span>
               <span>{{ row.co }}</span>
@@ -144,60 +141,69 @@
             </div>
           </div>
         </div>
-        <div class="table-pager">
-          <i v-for="page in totalPages" :key="page" :class="{ active: page === devicePage }" @click="changeDevicePage(page)"></i>
-        </div>
       </div>
     </ModuleCommon>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed, nextTick, ref } from 'vue';
   import ModuleCommon from '../../configurable/components/ModuleCommon.vue';
   import FiberTemperatureChart from './FiberTemperatureChart.vue';
   import { EMPTY_MODULE_DATA, panelShowStyle } from '../utils';
+  import { computed } from 'vue';
   import { ALERT_ADVICE, BUNDLE_MONITOR_ROWS, DEVICE_MONITOR_ROWS, FIBER_CHART_DATA, NATURAL_FIRE_STAGE, SENSOR_GROUPS } from '../data';
 
-  defineProps<{
+  const props = defineProps<{
     active?: boolean;
+    manageSystemId?: string;
+    sceneName?: string;
   }>();
 
   const emit = defineEmits<{
     (event: 'view-evaluation'): void;
   }>();
 
-  const PAGE_SIZE = 8;
-  const bundlePage = ref(1);
-  const devicePage = ref(1);
-  const bundleBodyRef = ref<HTMLElement>();
-  const deviceBodyRef = ref<HTMLElement>();
+  const sceneSeed = computed(() => {
+    const key = `${props.manageSystemId || ''}|${props.sceneName || ''}`;
+    let hash = 0;
+    for (let i = 0; i < key.length; i++) {
+      hash = (hash * 31 + key.charCodeAt(i)) >>> 0;
+    }
+    return hash;
+  });
 
-  const totalPages = computed(() => Math.max(1, Math.ceil(BUNDLE_MONITOR_ROWS.length / PAGE_SIZE)));
+  function rotate<T>(list: T[], offset: number): T[] {
+    if (!list.length) return list;
+    const start = offset % list.length;
+    return [...list.slice(start), ...list.slice(0, start)];
+  }
 
-  const pagedBundleRows = computed(() => {
-    const start = (bundlePage.value - 1) * PAGE_SIZE;
-    return BUNDLE_MONITOR_ROWS.slice(start, start + PAGE_SIZE);
-  });
+  const sensorGroups = computed(() => rotate(SENSOR_GROUPS, sceneSeed.value % Math.max(1, SENSOR_GROUPS.length)));
 
-  const pagedDeviceRows = computed(() => {
-    const start = (devicePage.value - 1) * PAGE_SIZE;
-    return DEVICE_MONITOR_ROWS.slice(start, start + PAGE_SIZE);
+  const bundleRows = computed(() => {
+    const rows = rotate(BUNDLE_MONITOR_ROWS, sceneSeed.value % Math.max(1, BUNDLE_MONITOR_ROWS.length));
+    return rows.map((row, index) => ({
+      ...row,
+      o2: (Number(row.o2) + ((sceneSeed.value + index) % 3) * 0.01).toFixed(2),
+    }));
   });
 
-  function changeBundlePage(page: number) {
-    bundlePage.value = page;
-    nextTick(() => {
-      if (bundleBodyRef.value) bundleBodyRef.value.scrollTop = 0;
-    });
-  }
+  const deviceRows = computed(() => {
+    const rows = rotate(DEVICE_MONITOR_ROWS, sceneSeed.value % Math.max(1, DEVICE_MONITOR_ROWS.length));
+    return rows.map((row, index) => ({
+      ...row,
+      temp: (Number(row.temp) + ((sceneSeed.value + index) % 3) * 0.1).toFixed(1),
+    }));
+  });
 
-  function changeDevicePage(page: number) {
-    devicePage.value = page;
-    nextTick(() => {
-      if (deviceBodyRef.value) deviceBodyRef.value.scrollTop = 0;
-    });
-  }
+  const fiberData = computed(() => {
+    const delta = (sceneSeed.value % 7) * 12;
+    return {
+      ...FIBER_CHART_DATA,
+      solid: FIBER_CHART_DATA.solid.map((value) => Math.min(1000, value + delta)),
+      dashed: FIBER_CHART_DATA.dashed.map((value) => Math.min(1000, value + delta)),
+    };
+  });
 </script>
 
 <style lang="less" scoped>
@@ -296,10 +302,30 @@
   .sensor-panel {
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 8px;
     height: 100%;
-    padding: 10px 14px;
+    padding: 4px 14px;
     box-sizing: border-box;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(61, 246, 255, 0.75) transparent;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background: linear-gradient(180deg, #3df6ff 0%, #0d7fc1 100%);
+    }
+  }
+
+  .sensor-group {
+    flex: none;
   }
 
   .sensor-group-title {
@@ -394,8 +420,24 @@
     flex: 1;
     min-height: 0;
     flex-direction: column;
-    border: 1px solid rgba(61, 246, 255, 0.4);
+    overflow-y: auto;
+    border: 1px solid rgba(61, 246, 255, 0.55);
     background: rgba(6, 30, 52, 0.2);
+    scrollbar-width: thin;
+    scrollbar-color: rgba(61, 246, 255, 0.75) transparent;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background: linear-gradient(180deg, #3df6ff 0%, #0d7fc1 100%);
+    }
   }
 
   .table-head,
@@ -406,40 +448,31 @@
   }
 
   .table-head {
+    position: sticky;
+    top: 0;
+    z-index: 1;
     flex: none;
-    height: 38px;
-    border-bottom: 1px solid rgba(61, 246, 255, 0.35);
-    background: linear-gradient(180deg, #0d3b58 0%, #0a2c48 100%);
+    height: 39px;
+    box-sizing: border-box;
+    border-bottom: 1px solid rgba(61, 246, 255, 0.5);
+    background: #062441;
     color: #3df6ff;
-    font-size: 14px;
-    letter-spacing: 0.5px;
+    font-size: 15px;
+    font-weight: 500;
+    letter-spacing: 1px;
   }
 
   .table-body {
-    flex: 1;
     min-height: 0;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar {
-      width: 8px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: rgba(61, 246, 255, 0.08);
-    }
-
-    &::-webkit-scrollbar-thumb {
-      border-radius: 4px;
-      background: linear-gradient(180deg, #3df6ff 0%, #0d7fc1 100%);
-    }
   }
 
   .table-row {
-    height: 50px;
-    border-top: 1px solid rgba(61, 246, 255, 0.1);
-    background: #0b3355;
+    height: 42px;
+    box-sizing: border-box;
+    border-top: 1px solid rgba(61, 246, 255, 0.14);
+    background: #093354;
     color: #fff;
-    font-size: 14px;
+    font-size: 15px;
 
     &:nth-child(even) {
       background: #0d4167;
@@ -537,28 +570,4 @@
       width: 15%;
     }
   }
-
-  .table-pager {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    height: 24px;
-    flex: none;
-
-    i {
-      width: 6px;
-      height: 6px;
-      border-radius: 1px;
-      background: rgba(61, 246, 255, 0.35);
-      cursor: pointer;
-      transition: all 0.2s;
-
-      &.active {
-        width: 16px;
-        background: #3df6ff;
-        box-shadow: 0 0 8px rgba(61, 246, 255, 0.85);
-      }
-    }
-  }
 </style>

src/views/vent/home/selfIgnition/components/OverviewView.vue

@@ -3,7 +3,7 @@
     <!-- 左：矿井采空区概览 -->
     <ModuleCommon
       class="overview-module"
-      :show-style="panelShowStyle(20, 114, 353, 456)"
+      :show-style="panelShowStyle(20, 114, 393, 456)"
       :module-data="EMPTY_MODULE_DATA"
       module-name="矿井采空区概览"
       device-type="ignition_goaf_overview"
@@ -24,16 +24,23 @@
     <!-- 左下：安装设备情况 -->
     <ModuleCommon
       class="install-module"
-      :show-style="panelShowStyle(20, 602, 353, 456)"
+      :show-style="panelShowStyle(20, 602, 393, 456)"
       :module-data="EMPTY_MODULE_DATA"
       module-name="安装设备情况"
       device-type="ignition_device_install"
       :data="{}"
       :visible="true"
     >
-      <div class="install-panel" :style="{ '--install-count': devices.length }">
-        <div v-for="device in devices" :key="device.name" class="install-item">
-          <span class="install-square"></span>
+      <div class="install-panel">
+        <div
+          v-for="(device, index) in devices"
+          :key="`${device.name}-${index}`"
+          class="install-item"
+          :class="index % 2 === 0 ? 'is-blue' : 'is-green'"
+        >
+          <span class="install-icon">
+            <img v-if="deviceIcon(device.name)" :src="deviceIcon(device.name)" alt="" />
+          </span>
           <span class="install-name">{{ device.name }}</span>
           <span class="install-metric"
             >安装：<em>{{ device.installed }}</em
@@ -47,28 +54,10 @@
       </div>
     </ModuleCommon>
 
-    <!-- 中下：整体预警等级 -->
-    <ModuleCommon
-      class="overall-module"
-      :show-style="panelShowStyle(413, 722, 343, 336)"
-      :module-data="EMPTY_MODULE_DATA"
-      module-name="矿井采空区整体预警等级"
-      device-type="ignition_overall_warning"
-      :data="{}"
-      :visible="true"
-    >
-      <div class="overall-panel">
-        <div class="overall-level" :style="{ color: overall.color }">{{ overall.levelText }} {{ overall.levelName }}</div>
-        <div class="overall-bar"></div>
-        <div class="overall-label">系统采空区总预警</div>
-        <div class="overall-total" :style="{ color: overall.color }">{{ overall.total }}</div>
-      </div>
-    </ModuleCommon>
-
     <!-- 右下：分级预警表 -->
     <ModuleCommon
       class="table-module"
-      :show-style="panelShowStyle(793, 722, 1105, 336)"
+      :show-style="panelShowStyle(433, 722, 1465, 336)"
       :module-data="EMPTY_MODULE_DATA"
       module-name="矿井采空区分级预警"
       device-type="ignition_warning_table"
@@ -82,6 +71,7 @@
             <span class="col-name">采空区名称</span>
             <span class="col-seam">所属煤层</span>
             <span class="col-level">预警等级</span>
+            <span class="col-safety">安全评价等级</span>
             <span class="col-status">状态</span>
           </div>
           <div class="table-body">
@@ -89,8 +79,18 @@
               <span class="col-index">{{ row.id }}</span>
               <span class="col-name">{{ row.name }}</span>
               <span class="col-seam">{{ row.seam }}</span>
-              <span class="col-level">{{ row.level }}</span>
-              <span class="col-status">{{ row.status }}</span>
+              <span class="col-level level-cell">
+                <img class="level-icon warning-icon" :src="warningLevelIcon" alt="" />
+                <span>{{ row.level }}</span>
+              </span>
+              <span class="col-safety level-cell">
+                <img class="level-icon safety-icon" :src="safetyLevelIcon" alt="" />
+                <span>{{ row.level }}</span>
+              </span>
+              <span class="col-status status-cell">
+                <i class="status-dot" :class="statusDotClass(row.status)"></i>
+                <span>{{ row.status }}</span>
+              </span>
             </div>
             <div v-for="n in emptyRowCount" :key="`empty-${n}`" class="table-row table-row-empty"></div>
           </div>
@@ -104,15 +104,40 @@
   import { computed } from 'vue';
   import ModuleCommon from '../../configurable/components/ModuleCommon.vue';
   import { EMPTY_MODULE_DATA, panelShowStyle } from '../utils';
-  import type { DeviceInstallItem, GoafOverviewItem, OverallWarning, WarningRow } from '../data';
+  import type { DeviceInstallItem, GoafOverviewItem, WarningRow } from '../data';
+  import bundleMonitorIcon from '@/assets/images/vent/home/selfIgnition/install-bundle-monitor.svg';
+  import fiberTemperatureIcon from '@/assets/images/vent/home/selfIgnition/install-fiber-temperature.svg';
+  import sealedMonitorIcon from '@/assets/images/vent/home/selfIgnition/install-sealed-monitor.svg';
+  import windSpeedIcon from '@/assets/images/vent/home/selfIgnition/install-wind-speed.svg';
+  import windVolumeIcon from '@/assets/images/vent/home/selfIgnition/install-wind-volume.svg';
+  import warningLevelIcon from '@/assets/images/vent/home/selfIgnition/level-warning.svg';
+  import safetyLevelIcon from '@/assets/images/vent/home/selfIgnition/level-safety.svg';
 
   const props = defineProps<{
     overview: GoafOverviewItem[];
     devices: DeviceInstallItem[];
-    overall: OverallWarning;
     warnings: WarningRow[];
   }>();
 
+  const DEVICE_ICONS: Record<string, string> = {
+    束管监测: bundleMonitorIcon,
+    光纤测温: fiberTemperatureIcon,
+    密闭监测: sealedMonitorIcon,
+    风速传感器: windSpeedIcon,
+    风量传感器: windVolumeIcon,
+  };
+
+  function deviceIcon(name: string) {
+    return DEVICE_ICONS[name] || '';
+  }
+
+  function statusDotClass(status: string) {
+    if (status === '回采中') return 'is-running';
+    if (status === '回撤中') return 'is-retreating';
+    if (status === '停产') return 'is-stopped';
+    return 'is-closed';
+  }
+
   // 表体固定 5 行视口，数据不足时用空行补足；超过 5 行时在表体内部滚动
   const emptyRowCount = computed(() => Math.max(0, 5 - props.warnings.length));
 </script>
@@ -125,7 +150,6 @@
 
   :deep(.overview-module .box1-center),
   :deep(.install-module .box1-center),
-  :deep(.overall-module .box1-center),
   :deep(.table-module .box1-center) {
     height: calc(100% - 35px) !important;
   }
@@ -212,11 +236,10 @@
   }
 
   .install-panel {
-    position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: 0;
+    padding: 12px 0 8px;
     box-sizing: border-box;
     overflow-x: hidden;
     overflow-y: auto;
@@ -235,134 +258,95 @@
       border-radius: 4px;
       background: linear-gradient(180deg, #3df6ff 0%, #0d7fc1 100%);
     }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 18px;
-      width: 1px;
-      height: calc(var(--install-count, 5) * 71px);
-      background: linear-gradient(180deg, rgba(61, 246, 255, 0), rgba(61, 246, 255, 0.7), rgba(61, 246, 255, 0));
-    }
   }
 
   .install-item {
-    position: relative;
+    --install-icon-bg: url('@/assets/images/vent/home/selfIgnition/install-icon-blue.png');
+    --install-name-bg: url('@/assets/images/vent/home/selfIgnition/install-name-blue.png');
+    --install-metric-bg: url('@/assets/images/vent/home/selfIgnition/install-metric-blue.png');
+
     display: flex;
     align-items: center;
     flex: none;
-    height: 71px;
-    min-height: 0;
-    gap: 8px;
-    padding: 0 4px 0 39px;
+    height: 69px;
+    padding: 0 20px 0 12px;
     box-sizing: border-box;
-    background: transparent;
-
-    &:not(:last-child)::after {
-      content: '';
-      position: absolute;
-      left: 18px;
-      right: 16px;
-      bottom: 0;
-      height: 1px;
-      background: rgba(61, 246, 255, 0.18);
+
+    &.is-green {
+      --install-icon-bg: url('@/assets/images/vent/home/selfIgnition/install-icon-green.png');
+      --install-name-bg: url('@/assets/images/vent/home/selfIgnition/install-name-green.png');
+      --install-metric-bg: url('@/assets/images/vent/home/selfIgnition/install-metric-green.png');
     }
   }
 
-  .install-square {
-    position: absolute;
-    left: 14px;
-    top: 50%;
-    width: 10px;
-    height: 10px;
-    margin-top: -5px;
-    background: linear-gradient(135deg, #b3fff5, #17b7ff);
-    box-shadow: 0 0 9px rgba(61, 246, 255, 0.9);
+  .install-icon {
+    position: relative;
+    z-index: 4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 40px;
+    width: 40px;
+    height: 35px;
+    margin-right: -32px;
+    background: var(--install-icon-bg) no-repeat center / 100% 100%;
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   .install-name {
-    width: 103px;
-    flex: none;
+    position: relative;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    flex: 0 0 124px;
+    height: 34px;
+    padding-left: 34px;
+    box-sizing: border-box;
+    background: var(--install-name-bg) no-repeat center / 100% 100%;
     color: #fff;
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 600;
+    letter-spacing: 0;
+    white-space: nowrap;
   }
 
   .install-metric {
-    flex: 1;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    flex: 1 1 0;
+    min-width: 0;
+    height: 34px;
+    margin-left: -9px;
+    padding-left: 16px;
+    box-sizing: border-box;
+    background: var(--install-metric-bg) no-repeat center / 100% 100%;
     color: #eefcff;
     font-size: 15px;
     font-weight: 500;
     white-space: nowrap;
 
-    &:nth-of-type(3) {
-      flex: 0 0 102px;
+    & + & {
+      z-index: 2;
     }
 
     em {
-      margin-left: -2px;
+      margin: 0 2px;
       color: #3df6ff;
       font-family: Arial, sans-serif;
       font-style: italic;
       font-size: 18px;
       font-weight: 700;
+      line-height: 1;
       text-shadow: 0 0 5px rgba(61, 246, 255, 0.45);
     }
   }
 
-  .overall-panel {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    height: 100%;
-    padding: 32px 14px 0;
-    box-sizing: border-box;
-  }
-
-  .overall-level {
-    font-size: 42px;
-    font-weight: 500;
-    line-height: 42px;
-    letter-spacing: 4px;
-    white-space: nowrap;
-    text-shadow: 0 0 8px rgba(255, 157, 28, 0.28);
-  }
-
-  .overall-bar {
-    width: 278px;
-    height: 25px;
-    margin-top: 21px;
-    background: url('@/assets/images/vent/home/selfIgnition/overall-bar-glow.png') no-repeat center bottom / 100% 100%;
-  }
-
-  .overall-label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 285px;
-    height: 56px;
-    margin-top: 30px;
-    color: #fff;
-    font-size: 17px;
-    line-height: 1;
-    letter-spacing: 1px;
-    background: url('@/assets/images/vent/home/selfIgnition/overall-label-bg.png') no-repeat center / 100% 100%;
-  }
-
-  .overall-total {
-    display: inline-block;
-    margin-top: 24px;
-    font-family: 'douyuFont', sans-serif;
-    font-size: 36px;
-    line-height: 1;
-    text-shadow: 0 0 14px currentColor;
-    letter-spacing: 6px;
-    transform: translateX(-3px) scaleX(1.45);
-    transform-origin: center;
-  }
-
   .warning-table-panel {
     display: flex;
     flex-direction: column;
@@ -435,23 +419,80 @@
   }
 
   .col-index {
-    width: 16.7%;
+    width: 8%;
   }
 
   .col-name {
-    width: 22.9%;
+    width: 21%;
   }
 
   .col-seam {
-    width: 15.5%;
+    width: 17%;
   }
 
   .col-level {
-    width: 24.6%;
+    width: 18%;
+  }
+
+  .col-safety {
+    width: 18%;
   }
 
   .col-status {
-    width: 14.6%;
+    width: 18%;
+  }
+
+  .level-cell,
+  .status-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    min-width: 0;
+  }
+
+  .level-icon {
+    flex: none;
+    object-fit: contain;
+  }
+
+  .warning-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .safety-icon {
+    width: 12px;
+    height: 15px;
+  }
+
+  .status-cell {
+    gap: 8px;
+  }
+
+  .status-dot {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--dot-color);
+    box-shadow: 0 0 8px var(--dot-color);
+
+    &.is-running {
+      --dot-color: #3df6a3;
+    }
+
+    &.is-retreating {
+      --dot-color: #3fa9ff;
+    }
+
+    &.is-stopped {
+      --dot-color: #a6a6a6;
+    }
+
+    &.is-closed {
+      --dot-color: #71808f;
+    }
   }
 
   /* 表格面板较宽，使用短边框图拉伸，保证顶部/底部装饰点居中 */

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

@@ -104,7 +104,6 @@ export const GOAF_OVERVIEW: GoafOverviewItem[] = [
   { label: '回撤工作面采空区数', value: 4 },
   { label: '回采工作面采空区数', value: 12 },
   { label: '停产工作面采空区数', value: 6 },
-  { label: '停产工作面采空区数', value: 6 },
 ];
 
 export const INSTALLED_DEVICES: DeviceInstallItem[] = [
@@ -113,8 +112,6 @@ export const INSTALLED_DEVICES: DeviceInstallItem[] = [
   { name: '密闭监测', installed: 15, running: 13 },
   { name: '风速传感器', installed: 15, running: 13 },
   { name: '风量传感器', installed: 15, running: 13 },
-  { name: '风速传感器', installed: 15, running: 13 },
-  { name: '风量传感器', installed: 15, running: 13 },
 ];
 
 export const OVERALL_WARNING: OverallWarning = {

src/views/vent/home/selfIgnition/index.vue

@@ -14,50 +14,41 @@
         </div>
       </div>
 
+      <!-- 设备监测/人工录入共用的场景选择 -->
+      <div v-if="activeTab > 0" class="scene-toolbar">
+        <span class="scene-toolbar-label">场景选择：</span>
+        <PanelSelect v-model="manageSystemId" :options="sceneOptions" />
+      </div>
+
       <!-- 系统概览 -->
-      <OverviewView v-show="activeTab === 0" :overview="data.overview" :devices="data.devices" :overall="data.overall" :warnings="data.warnings" />
+      <OverviewView v-show="activeTab === 0" :overview="data.overview" :devices="data.devices" :warnings="data.warnings" />
 
       <!-- 设备实时监测与分析 -->
-      <MonitorView v-show="activeTab === 1" :active="activeTab === 1" @view-evaluation="activeTab = 2" />
+      <MonitorView
+        v-show="activeTab === 1"
+        :active="activeTab === 1"
+        :manage-system-id="manageSystemId"
+        :scene-name="selectedSceneName"
+        @view-evaluation="activeTab = 2"
+      />
 
       <!-- 人工录入与分析 -->
-      <ManualView v-show="activeTab === 2" />
+      <ManualView v-show="activeTab === 2" :manage-system-id="manageSystemId" :scene-name="selectedSceneName" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
+  import { computed, onMounted, onUnmounted, ref } from 'vue';
   import { useRoute } from 'vue-router';
   import OverviewView from './components/OverviewView.vue';
   import MonitorView from './components/MonitorView.vue';
   import ManualView from './components/ManualView.vue';
+  import PanelSelect from './components/PanelSelect.vue';
   import { createSelfIgnitionData } from './data';
-  import { noHeadeLink } from '/@/layouts/default/layout.data';
-
-  // 与其他 configurable 首页一致：把当前路由登记到布局的“无 header”白名单。
-  // 页面懒加载时 header 可能已经渲染，因此再用页面级 class 兜底隐藏，不修改公共组件。
-  const PAGE_PATH = '/fire/monitor/selfIgnition';
-  if (!noHeadeLink.includes(PAGE_PATH)) {
-    noHeadeLink.push(PAGE_PATH);
-  }
-
-  const PAGE_CLASS = 'self-ignition-page';
-  // HMR 会先后触发新旧实例的挂载/卸载，用实例标记避免旧实例把新实例的样式类移除
-  const PAGE_INSTANCE = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-
-  function mountPageClass() {
-    document.documentElement.dataset.selfIgnitionPage = PAGE_INSTANCE;
-    document.documentElement.classList.add(PAGE_CLASS);
-  }
-
-  function unmountPageClass() {
-    if (document.documentElement.dataset.selfIgnitionPage !== PAGE_INSTANCE) return;
-    document.documentElement.classList.remove(PAGE_CLASS);
-    delete document.documentElement.dataset.selfIgnitionPage;
-  }
-
-  mountPageClass();
+  import { getSafetySceneList } from './safetyEvaluation.api';
+  import { FALLBACK_SCENE } from './evaluation.config';
+  import type { SafetyScene } from './evaluation.config';
 
   const route = useRoute();
   const rootRef = ref<HTMLElement>();
@@ -67,12 +58,24 @@
   const pageTitle = '张家峁煤自燃监测预警';
   const tabs = ['系统概览', '设备实时监测与分析', '人工录入与分析'];
   const data = ref(createSelfIgnitionData());
+  const scenes = ref<SafetyScene[]>([]);
+  const manageSystemId = ref('');
 
   let resizeObserver: ResizeObserver | undefined;
   let dataInterval: number | undefined;
 
   const isEmbed = computed(() => !!route.query.embed);
 
+  const sceneOptions = computed(() =>
+    scenes.value.map((scene) => ({
+      label: scene.systemname,
+      value: scene.id,
+      score: 0,
+    }))
+  );
+
+  const selectedSceneName = computed(() => scenes.value.find((scene) => scene.id === manageSystemId.value)?.systemname || '');
+
   const stageStyle = computed(() => ({
     transform: `translate(-50%, -50%) scale(${scaleX.value}, ${scaleY.value})`,
   }));
@@ -102,13 +105,37 @@
     data.value = createSelfIgnitionData();
   }
 
+  async function loadScenes() {
+    try {
+      const res: any = await getSafetySceneList();
+      let records = res?.records || res?.result?.records || [];
+      // 测试环境没有采空区场景时，回退到全部场景
+      if (!records.length) {
+        const allRes: any = await getSafetySceneList({ pagetype: 'normal' });
+        records = allRes?.records || allRes?.result?.records || [];
+      }
+      const list: SafetyScene[] = records.map((record: any) => ({
+        id: String(record.id ?? record.deviceID ?? ''),
+        systemname: record.systemname || record.name || record.sysname || '未命名场景',
+      }));
+      scenes.value = list.length ? list : [{ ...FALLBACK_SCENE }];
+    } catch {
+      scenes.value = [{ ...FALLBACK_SCENE }];
+    }
+    const queryScene = (route.query.systemID || route.query.manageSystemId || route.query.sceneId) as string;
+    if (queryScene && !scenes.value.some((scene) => scene.id === queryScene)) {
+      scenes.value.unshift({ id: queryScene, systemname: '当前场景' });
+    }
+    manageSystemId.value = queryScene || scenes.value[0]?.id || '';
+  }
+
   function initDataInterval() {
     clearInterval(dataInterval);
     dataInterval = window.setInterval(refresh, 60000);
   }
 
   onMounted(() => {
-    mountPageClass();
+    void loadScenes();
     initDataInterval();
     updateScale();
     if (typeof ResizeObserver !== 'undefined' && rootRef.value) {
@@ -118,16 +145,7 @@
     window.addEventListener('resize', updateScale);
   });
 
-  onActivated(() => {
-    mountPageClass();
-  });
-
-  onDeactivated(() => {
-    unmountPageClass();
-  });
-
   onUnmounted(() => {
-    unmountPageClass();
     clearInterval(dataInterval);
     resizeObserver?.disconnect();
     window.removeEventListener('resize', updateScale);
@@ -226,6 +244,33 @@
     }
   }
 
+  .scene-toolbar {
+    position: absolute;
+    left: 20px;
+    top: 64px;
+    z-index: 6;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 353px;
+    height: 68px;
+    box-sizing: border-box;
+  }
+
+  .scene-toolbar-label {
+    flex: none;
+    color: #d9f7ff;
+    font-size: 15px;
+    white-space: nowrap;
+  }
+
+  :deep(.scene-toolbar .ignition-select) {
+    flex: 1;
+    min-width: 0;
+    width: auto;
+    height: 32px;
+  }
+
   :deep(.box1-top .title) {
     color: #fff;
     font-size: 16px;
@@ -240,15 +285,3 @@
     background-image: none;
   }
 </style>
-
-<style lang="less">
-  // 本页面全屏展示：隐藏布局顶部栏和左下角悬浮菜单，右侧操作栏保留
-  html.self-ignition-page {
-    .jeecg-layout-header,
-    .bottom-side,
-    .menu-show-icon,
-    .ai-assistant-float {
-      display: none !important;
-    }
-  }
-</style>

src/views/vent/home/selfIgnition/safetyEvaluation.api.ts

@@ -41,5 +41,6 @@ export const deleteSafetyEvaluation = (id: string) => defHttp.get({ url: Api.rem
 /** 按场景查询最新采前/采中评价 */
 export const getSafetyEvaluationByScene = (sceneId: string) => defHttp.get({ url: Api.getByScene, params: { sceneId } });
 
-/** 采空区场景列表，用于评价对象绑定 */
-export const getSafetySceneList = () => defHttp.get({ url: Api.sceneList, params: { strtype: 'sys_surface_caimei', pagetype: 'normal' } });
+/** 采空区场景列表，用于评价对象绑定；不传参数时默认查采空区场景 */
+export const getSafetySceneList = (params?: Record<string, any>) =>
+  defHttp.get({ url: Api.sceneList, params: params ?? { strtype: 'sys_surface_caimei', pagetype: 'normal' } });