feat:设备首页完成

src/views/home/yuxin.vue

@@ -138,7 +138,7 @@
         <!-- 右侧区域 -->
         <div class="right-section">
 
-          <!-- 月运行率趋势图 -->
+          <!-- 月运行率趋势 -->
           <div class="panel chart-panel">
             <div class="panel-title">
               <div class="panel-icon"></div>
@@ -149,14 +149,14 @@
             </div>
           </div>
 
-          <!-- 月运行率趋势图2 -->
+          <!-- 月故障率趋势图 -->
           <div class="panel chart-panel">
             <div class="panel-title">
               <div class="panel-icon"></div>
-              月运行率趋势图
+              月故障率趋势图
             </div>
             <div class="chart-container">
-              <trend-chart :option="monthRunRateOption2" height="100%" />
+              <trend-chart :option="monthFaultRateOption" height="100%" />
             </div>
           </div>
 
@@ -184,16 +184,42 @@ import TrendChart from './components/TrendChart.vue'
 import StatCard from './components/StatCard.vue'
 import { deviceIndexStatistics } from '@/api/main/index.js'
 
-
-// 默认周 x 轴数据（无真实数据时的占位）
-const weekDays = ['第1周', '第2周', '第3周', '第4周']
-
 // 固定场站列表
 const FIXED_STATIONS = ['5#站', '6#站', '7#站']
 
 // 固定 12 个月份的 x 轴标签
 const MONTHS_12 = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
 
+// 获取当月所有天数（1日 ~ 28/29/30/31日）
+function getCurrentMonthDays() {
+  const now = new Date()
+  const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate()
+  return Array.from({ length: daysInMonth }, (_, i) => (i + 1) + '日')
+}
+
+// 将 API 数据（dateTime="2026-05-15"）格式化为当月日报图 xData + seriesConfig
+function formatDayTrendData(list, valueKey, colors) {
+  const valueField = valueKey || 'rate'
+  const DAYS = getCurrentMonthDays()
+  const stationMap = {}
+
+  list.forEach((item) => {
+    const station = item.stationName
+    const day = parseInt(item.dateTime.split('-')[2])             // "2026-05-15" → 15
+    const dayLabel = DAYS[day - 1]                                // 15 → "15日"
+    if (!stationMap[station]) stationMap[station] = {}
+    stationMap[station][dayLabel] = item[valueField]
+  })
+
+  const seriesConfig = FIXED_STATIONS.map((name, idx) => ({
+    name,
+    data: DAYS.map((d) => stationMap[name]?.[d] ?? 0),
+    color: colors[idx % colors.length]
+  }))
+
+  return { xData: DAYS, seriesConfig }
+}
+
 // 将 API 数据 [{stationName, dateTime, rate}] 格式化为 chart 所需的 xData(固定12月) + seriesConfig
 // 始终按 FIXED_STATIONS 顺序输出，无数据月份补 0
 function formatTrendData(list, valueKey, colors) {
@@ -290,14 +316,14 @@ export default {
         { label: '7#场站', value: 'station-7' }
       ],
       statsCardList: [
-        { label: '设备总数', value: 350, unit: '台', key: 'totalNum', bgimg: require('@/assets/pcs/runDevice.png'), valueColor: '#409EFF', icon: 'el-icon-monitor', iconColor: '#409EFF', iconBg: '#ecf5ff'},
-        { label: '运行数', value: 345, unit: '台', key: 'runNum', bgimg: require('@/assets/pcs/successInfo.png'), valueColor: '#67C23A', icon: 'el-icon-play', iconColor: '#67C23A', iconBg: '#ecf5ff'},
-        { label: '维修数', value: 1189, unit: '台', key: 'malfunctionNum', bgimg: require('@/assets/pcs/faultDevice.png'), valueColor: '#E6A23C', icon: 'el-icon-maintenance', iconColor: '#E6A23C', iconBg: '#ecf5ff'},
+        { label: '设备总数', value: 0, unit: '台', key: 'totalNum', bgimg: require('@/assets/pcs/runDevice.png'), valueColor: '#409EFF', icon: 'el-icon-monitor', iconColor: '#409EFF', iconBg: '#ecf5ff'},
+        { label: '运行数', value: 0, unit: '台', key: 'runNum', bgimg: require('@/assets/pcs/successInfo.png'), valueColor: '#67C23A', icon: 'el-icon-play', iconColor: '#67C23A', iconBg: '#ecf5ff'},
+        { label: '维修数', value: 0, unit: '台', key: 'malfunctionNum', bgimg: require('@/assets/pcs/faultDevice.png'), valueColor: '#E6A23C', icon: 'el-icon-maintenance', iconColor: '#E6A23C', iconBg: '#ecf5ff'},
       ],
       yearRunRateOption: {},
       monthRunRateOption: {},
       yearFaultRateOption: {},
-      monthRunRateOption2: {},
+      monthFaultRateOption: {},
       yearRepairCountOption: {},
       monthRepairCountOption: {}
     }
@@ -371,19 +397,20 @@ export default {
         ], '%')
       }
 
-      // ========== 月运行率趋势图 — byList ==========
-      if (res.byList && res.byList.length) {
-        const { xData: x2, seriesConfig: sc2 } = formatTrendData(res.byList, 'rate', palette)
+      // ========== 月运行率趋势图 — ryxlList（X轴=当月天数）==========
+      const daysOfMonth = getCurrentMonthDays()
+      if (res.ryxlList && res.ryxlList.length) {
+        const { xData: x2, seriesConfig: sc2 } = formatDayTrendData(res.ryxlList, 'rate', palette)
         this.monthRunRateOption = makeMultiLineOption(x2, sc2, '%')
       } else {
-        this.monthRunRateOption = makeMultiLineOption(MONTHS_12, [
-          { name: '暂无数据', data: new Array(12).fill(0), color: '#8ba3c7' }
+        this.monthRunRateOption = makeMultiLineOption(daysOfMonth, [
+          { name: '暂无数据', data: new Array(daysOfMonth.length).fill(0), color: '#8ba3c7' }
         ], '%')
       }
 
-      // ========== 年故障率趋势图 — gzwxList ==========
-      if (res.gzwxList && res.gzwxList.length) {
-        const { xData: x3, seriesConfig: sc3 } = formatTrendData(res.gzwxList, 'rate', ['#f87171', '#facc15', '#8ba3c7'])
+      // ========== 年故障率趋势图 — ngzlList ==========
+      if (res.ngzlList && res.ngzlList.length) {
+        const { xData: x3, seriesConfig: sc3 } = formatTrendData(res.ngzlList, 'rate', ['#f87171', '#facc15', '#8ba3c7'])
         this.yearFaultRateOption = makeMultiLineOption(x3, sc3, '%')
       } else {
         this.yearFaultRateOption = makeMultiLineOption(MONTHS_12, [
@@ -391,25 +418,35 @@ export default {
         ], '%')
       }
 
-      // ========== 月运行率趋势图2（暂用模拟，后续可接入其他数据源）==========
-      this.monthRunRateOption2 = makeMultiLineOption(MONTHS_12, [
-        { name: '暂无数据', data: new Array(12).fill(0), color: '#a78bfa' }
-      ], '%')
-
-      // ========== 年维修次数趋势图 — jhwxList ==========
-      if (res.jhwxList && res.jhwxList.length) {
-        const { xData: x5, seriesConfig: sc5 } = formatTrendData(res.jhwxList, 'rate', ['#f87171', '#facc15', '#3b82f6'])
-        this.yearRepairCountOption = makeMultiLineOption(x5, sc5, '次')
+      // ========== 月故障率趋势图（暂用模拟，后续可接入其他数据源）==========
+      if(res.rgzList && res.rgzList.length) {
+        const { xData: x4, seriesConfig: sc4 } = formatDayTrendData(res.rgzList, 'rate', ['#f87171', '#facc15', '#8ba3c7'])
+        this.monthFaultRateOption = makeMultiLineOption(x4, sc4, '%')
+      } else {
+        this.monthFaultRateOption = makeMultiLineOption(daysOfMonth, [
+            { name: '暂无数据', data: new Array(daysOfMonth.length).fill(0), color: '#a78bfa' }
+        ], '%')
+      }
+      
+      // ========== 年维修次数趋势图 — ngzlList ==========
+      if (res.ngzlList && res.ngzlList.length) {
+        const { xData: x5, seriesConfig: sc5 } = formatTrendData(res.ngzlList, 'rate', ['#f87171', '#facc15', '#3b82f6'])
+        this.yearRepairCountOption = makeMultiLineOption(x5, sc5, '%')
       } else {
         this.yearRepairCountOption = makeMultiLineOption(MONTHS_12, [
           { name: '暂无数据', data: new Array(12).fill(0), color: '#8ba3c7' }
-        ], '次')
+        ], '%')
       }
 
-      // ========== 月维修次数趋势图（暂用默认占位）==========
-      this.monthRepairCountOption = makeMultiLineOption(MONTHS_12, [
-        { name: '暂无数据', data: new Array(12).fill(0), color: '#f87171' }
-      ], '次')
+      // ========== 月维修次数趋势图（暂用默认占位，X轴=当月天数）==========
+      if(res.rgzList && res.rgzList.length) {
+        const { xData: x6, seriesConfig: sc6 } = formatDayTrendData(res.rgzList, 'rate', ['#f87171', '#facc15', '#8ba3c7'])
+        this.monthRepairCountOption = makeMultiLineOption(x6, sc6, '%')    
+      } else {
+        this.monthRepairCountOption = makeMultiLineOption(daysOfMonth, [
+            { name: '暂无数据', data: new Array(daysOfMonth.length).fill(0), color: '#a78bfa' }
+        ], '%')
+      }
     },
   }
 }
@@ -422,7 +459,7 @@ export default {
 
   .scroll-wrapper {
     width: 100%;
-    height: 100%;
+    min-height: 100vh;
     background:
       radial-gradient(ellipse at top, rgba(13, 45, 110, 0.3) 0%, transparent 50%),
       radial-gradient(ellipse at bottom, rgba(8, 25, 65, 0.5) 0%, transparent 50%),