样式优化

src/views/iot/runoverview/components/StatusDistributionChart.vue

@@ -23,12 +23,17 @@
       </div>
       <div class="chart-panel__side">
         <div class="chart-panel__side-title">{{ t('DataCollection.RunOverview.summaryTitle') }}</div>
-        <Echart :options="pieOption" height="320px" />
+        <div class="chart-panel__summary-layout">
-        <div class="chart-panel__legend">
+<!--          <div class="chart-panel__pie">
-          <div v-for="item in summary" :key="item.status" class="chart-panel__legend-item">
+            <Echart :options="pieOption" height="280px" />
-            <span class="dot" :style="{ background: statusColors[item.status] }"></span>
+          </div>&ndash;&gt;-->
-            <span class="label">{{ statusLabelMap[item.status] }}</span>
+        <Echart :options="pieOption" height="280px" />
-            <span class="value">{{ item.percent.toFixed(2) }}% ({{ item.hours.toFixed(2) }}h)</span>
+          <div class="chart-panel__legend">
+            <div v-for="item in summary" :key="item.status" class="chart-panel__legend-item">
+              <span class="dot" :style="{ background: statusColors[item.status] }"></span>
+              <span class="label">{{ statusLabelMap[item.status] }}</span>
+              <span class="value">{{ item.percent.toFixed(2) }}% ({{ item.hours.toFixed(2) }}h)</span>
+            </div>
           </div>
         </div>
       </div>
@@ -198,20 +203,34 @@ const pieOption = computed<EChartsOption>(() => ({
 }
 
 .chart-panel__side {
-  padding: 8px 8px 0;
+  padding: 8px 12px 0;
+}
+
+.chart-panel__summary-layout {
+  display: grid;
+  grid-template-columns: minmax(180px, 220px) minmax(180px, 1fr);
+  align-items: center;
+  gap: 8px 16px;
+  min-height: 280px;
+}
+
+.chart-panel__pie {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .chart-panel__legend {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 14px;
-  margin-top: -8px;
+  justify-content: center;
 }
 
 .chart-panel__legend-item {
   display: grid;
-  grid-template-columns: 12px 1fr auto;
+  grid-template-columns: 12px 52px 1fr;
-  gap: 8px;
+  gap: 10px;
   align-items: center;
   color: #344054;
   font-size: 13px;
@@ -230,11 +249,22 @@ const pieOption = computed<EChartsOption>(() => ({
 .value {
   color: #101828;
   font-weight: 600;
+  text-align: left;
 }
 
 @media (max-width: 1100px) {
   .chart-panel__body {
     grid-template-columns: 1fr;
   }
+
+  .chart-panel__summary-layout {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  .chart-panel__legend {
+    width: 100%;
+    max-width: 320px;
+  }
 }
 </style>