设备状态饼图优化：有故障只显示故障项，无故障显示"故障0"

  - DeviceStatusPie: 新增activeFaults/pieData/panelData计算属性，有故障时饼图和右侧面板只显示故障项，无故障时显示绿色整
  圆并在中间显示"故障0"，右侧只显示正常
  - DeviceStatusPie: 中心文字颜色改为纯色#00ff88，去除渐变
  - DeviceStatusTabs: 信号机默认mock数据正常值改为980
  - mock/api.js: 信号机故障值设为0用于测试无故障状态

src/components/ui/DeviceStatusDonutChart.vue

@@ -218,7 +218,7 @@ export default {
 }
 
 .main-number {
-    color: #8392b4; /* 图3中数字4的灰色调 */
+    color: #8392b4;
     font-weight: bold;
     font-family: Arial, sans-serif;
     line-height: 1;

src/components/ui/DeviceStatusPie.vue

@@ -4,7 +4,7 @@
     <div class="tech-pie-chart">
       <div class="chart-ring"></div>
       <svg class="pie-svg" viewBox="0 0 500 500">
-        <circle class="pie-segment" v-for="(item, index) in chartData" :key="index"
+        <circle class="pie-segment" v-for="(item, index) in pieData" :key="index"
           ref="segments"
           cx="250" cy="250" r="210"
         />
@@ -13,11 +13,15 @@
         <div class="center-total">{{ centerTitle || total }}</div>
         <div class="center-label">{{ centerSubTitle || '设备总数' }}</div>
       </div>
+      <div class="chart-center" v-else-if="activeFaults.length === 0">
+        <div class="center-total">0</div>
+        <div class="center-label">故障</div>
+      </div>
     </div>
 
     <!-- 右侧数据面板 -->
     <div class="status-panel">
-      <div class="status-item" v-for="(item, index) in chartData" :key="index">
+      <div class="status-item" v-for="(item, index) in panelData" :key="index">
         <div class="status-dot" :style="{ background: item.color }"></div>
         <div class="status-text">{{ item.name }}</div>
         <div class="status-num" :style="{ color: item.color }">{{ item.value }}</div>
@@ -57,6 +61,28 @@ export default {
   computed: {
     total() {
       return this.chartData.reduce((sum, item) => sum + Number(item.value), 0);
+    },
+    // 过滤出故障项（名称不含"正常"且值大于0）
+    activeFaults() {
+      return this.chartData.filter(item => item.name.indexOf('正常') === -1 && Number(item.value) > 0);
+    },
+    // 故障总数
+    totalFaults() {
+      return this.activeFaults.reduce((sum, item) => sum + Number(item.value), 0);
+    },
+    // 饼图实际渲染的数据
+    pieData() {
+      if (this.activeFaults.length > 0) {
+        return this.activeFaults;
+      }
+      // 无故障时，用正常项的颜色画整圆
+      const normalItem = this.chartData.find(item => item.name.indexOf('正常') !== -1);
+      return [{ name: '正常', value: 1, color: normalItem ? normalItem.color : '#A0E551' }];
+    },
+    // 右侧面板：有故障显示故障项，无故障只显示正常项
+    panelData() {
+      if (this.activeFaults.length > 0) return this.activeFaults;
+      return this.chartData.filter(item => item.name.indexOf('正常') !== -1);
     }
   },
   watch: {
@@ -76,10 +102,11 @@ export default {
       const segments = this.$refs.segments;
       if (!segments || !segments.length) return;
 
-      const total = this.total || 1;
+      const data = this.pieData;
+      const total = data.reduce((sum, item) => sum + Number(item.value), 0) || 1;
       let currentOffset = 0;
 
-      this.chartData.forEach((item, index) => {
+      data.forEach((item, index) => {
         const segment = segments[index];
         if (!segment) return;
         const percent = item.value / total;
@@ -180,9 +207,7 @@ export default {
 .center-total {
   font-size: clamp(16px, 3vh, 36px);
   font-weight: 700;
-  background: linear-gradient(90deg, #00ff88, #ff2255);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: #00ff88;
 }
 .center-label {
   font-size: clamp(10px, 1.2vh, 14px);

src/components/ui/DeviceStatusTabs.vue

@@ -25,8 +25,8 @@ const defaultMockStatusData = {
     centerTitle: '98%',
     centerSubTitle: '980/1000',
     chartData: [
-        { name: '正常', value: 1, color: '#A0E551' }, 
-        { name: '故障', value: 0, color: '#D03030' } 
+        { name: '正常', value: 980, color: '#A0E551' },
+        { name: '故障', value: 0, color: '#D03030' }
     ]
   },
   'detectorStatus': {

src/mock/api.js

@@ -1003,7 +1003,7 @@ export async function apiGetDeviceFaultStatus() {
 
   // 从在线数据推算故障数，每次波动
   const smTotal = sm.chartData[0].value + sm.chartData[1].value
-  const smFault = _fluctuate(sm.chartData[1].value, 3)
+  const smFault = 0  // 信号机无故障，用于测试无故障状态
   const dtTotal = dt.chartData[0].value + dt.chartData[1].value
   const dtFault = _fluctuate(dt.chartData[1].value, 5)
   const camTotal = cam.chartData[0].value + cam.chartData[1].value