[Mod 0000]矿端首页调整

src/views/dashboard/Overhaul/components/LeafPage.vue

@@ -1,278 +1,277 @@
 <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="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 class="btn" @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 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 class="warning-statistics">
-          <div class="statistics-header">
-            <div class="title">预警统计</div>
-            <div class="btn-group">
-              <!-- <button class="btn">预警级别</button> -->
-            </div>
+      </div>
+
+      <!-- 预警统计 -->
+      <div class="warning-statistics">
+        <div class="statistics-header">
+          <div class="title">预警统计</div>
+          <div class="btn-group">
+            <!-- <button class="btn">预警级别</button> -->
           </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="statistics-content">
+          <div class="stat-item high-risk">
+            <div class="icon">
+              <div class="icon-top"></div>
+              <div class="icon-bottom"></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 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="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 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="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 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 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 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>
+        <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="risk-level" 
-                    :style="{ backgroundColor: getAlarmColor(item.alarmLevel), color: '#fff' }"
+                    class="col-value" 
+                    :style="{ color: getColValueColor(col, item) }"
                   >
-                    {{ getRiskText(item.alarmLevel) }}
+
+                    <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>
-                <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>
+            <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="(col, colIndex) in dataColumns" 
-                    :key="colIndex" 
-                    class="data-col"
+                    v-for="(ind, indIndex) in indicatorColumns" 
+                    :key="'inner-' + indIndex" 
+                    class="indicator-item"
                   >
-                    <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 class="label">{{ ind.label }}:</div>
+                    <!-- 墙内数据直接取 item[key]，例如 item.coVal -->
+                    <div class="value" :title="getDataValue(item, ind.key)">{{ getDataValue(item, ind.key) }} {{ ind.unit }}</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 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-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 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" :title="getDataValue(item, ind.key + 'Out')">{{ getDataValue(item, ind.key + 'Out') }} {{ ind.unit }}</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-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 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 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 v-if="res.key == 'alarmLevel'" :title="getRiskText(item.alarmLevel)" class="value">{{ getRiskText(item.alarmLevel) }}</div>
+                    <div v-else class="value" :title="getDataValue(item, res.key)">{{ getDataValue(item, res.key) }}</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 class="abnormal-alarm">
+        <div class="alarm-header">
+          <div class="title">异常超限报警</div>
+          <div class="btn-group">
+            <!-- <button class="btn">收起图表</button> -->
           </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 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 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>
 </template>
 
@@ -348,8 +347,8 @@
 
   // 3. 预警结果配置
   const resultColumns = [
-    { label: '数据来源', value: '最近2天' }, // 静态数据可以直接写死在配置里，或者从 item 取
-    { label: '预警结果', value: '异常' },     // 这里假设是静态展示，如果是动态可改为 key: 'resultStatus'
+    { label: '数据来源', key: 'readTime' ,value: '最近2天' }, // 静态数据可以直接写死在配置里，或者从 item 取
+    { label: '预警结果', key: 'alarmLevel', value: '异常' },     // 这里假设是静态展示，如果是动态可改为 key: 'resultStatus'
   ];
 
   // 4. 异常超限报警配置
@@ -601,44 +600,6 @@
   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;
@@ -670,6 +631,15 @@
   flex-direction: column;
   justify-content: space-between;
   padding: 8px 10px 8px 50px;
+
+  .btn {
+    color: #fff;
+    background-color: #2b6ff0;
+
+    &:hover {
+      background-color: #397af3;
+    }
+  }
 }
 .info-border {
   position: absolute;
@@ -1163,6 +1133,14 @@
   border-radius: 4px;
   margin-bottom: 8px;
   padding: 0 4px;
+   .value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    flex: 1;
+    text-align: right;
+   }
 }
 
 /* 预警结果只有两行，用来占位的 item */