feat(生产看板): 添加班组选择功能并集成生产数据接口

src/api/vis/productionDailyDashboard.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request';
+
+// 班组生产日综合看板-当日生产情况、数量、重量
+export async function getTeamProductionDayDataOne(teamId) {
+  const res = await request.get(`/dataScreen/getTeamProductionDayDataOne/${teamId}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 班组生产日综合看板-生产工单进度
+export async function getTeamProductionDayDataThree(teamId) {
+  const res = await request.get(`/dataScreen/getTeamProductionDayDataThree/${teamId}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 班组生产日综合看板-各工序在岗人数、设备实时状态-按工序、产品生产数量top10、各产品合格率
+export async function getTeamProductionDayDataTwo(teamId) {
+  const res = await request.get(`/dataScreen/getTeamProductionDayDataTwo/${teamId}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 班组生产日综合看板-各工序在岗人数、设备实时状态-按工序、产品生产数量top10、各产品合格率
+export async function queryTeamListByCurrentUserid() {
+  const res = await request.get(`/dataScreen/queryTeamListByCurrentUserid`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/bpm/vis-page/productionDailyDashboard.vue

@@ -8,7 +8,22 @@
   >
     <div class="box-container" v-cloak>
       <div class="box-header">
-        <div class="logo"></div>
+        <div class="logo">
+          <el-select
+              style="width: 100%"
+              v-model="teamId"
+              placeholder="请选择"
+              @change="changeTeam"
+            >
+              <el-option
+                v-for="item in teamList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+        </div>
         <div class="title">班组生产日综合看板</div>
         <div class="time">
           <div class="time-display">
@@ -43,21 +58,21 @@
                 <div class="unit-box">
                   <span class="unit">十万</span>
                   <div class="digit-box">
-                    <span class="digit">{{ countDigits[0] }}</span>
+                    <span class="digit">{{ productionData.transformQuantity[0] }}</span>
                   </div>
                 </div>
                 <!-- 万位 -->
                 <div class="unit-box">
                   <span class="unit">万</span>
                   <div class="digit-box">
-                    <span class="digit">{{ countDigits[1] }}</span>
+                    <span class="digit">{{ productionData.transformQuantity[1] }}</span>
                   </div>
                 </div>
                 <!-- 千位 -->
                 <div class="unit-box">
                   <span class="unit">千</span>
                   <div class="digit-box">
-                    <span class="digit">{{ countDigits[2] }}</span>
+                    <span class="digit">{{ productionData.transformQuantity[2] }}</span>
                   </div>
                 </div>
                 <!-- 千位分隔符 -->
@@ -66,21 +81,21 @@
                 <div class="unit-box">
                   <span class="unit"></span>
                   <div class="digit-box">
-                    <span class="digit">{{ countDigits[3] }}</span>
+                    <span class="digit">{{ productionData.transformQuantity[3] }}</span>
                   </div>
                 </div>
                 <!-- 十位 -->
                 <div class="unit-box">
                   <span class="unit"></span>
                   <div class="digit-box">
-                    <span class="digit">{{ countDigits[4] }}</span>
+                    <span class="digit">{{ productionData.transformQuantity[4] }}</span>
                   </div>
                 </div>
                 <!-- 个位 -->
                 <div class="unit-box">
                   <span class="unit"></span>
                   <div class="digit-box">
-                    <span class="digit">{{ countDigits[5] }}</span>
+                    <span class="digit">{{ productionData.transformQuantity[5] }}</span>
                   </div>
                 </div>
               </div>
@@ -94,10 +109,12 @@
                   <div class="stat-info">
                     <div class="stat-label">要求生产总数量：</div>
                     <div
-                      ><span class="stat-value">44</span
-                      ><span class="stat-dw"
+                      ><span class="stat-value">{{ productionData.totalQuantity }}</span
+                      >
+                      <!-- <span class="stat-dw"
                         >（{{ productionUnit }}）</span
-                      ></div
+                      > -->
+                      </div
                     >
                   </div>
                 </div>
@@ -107,7 +124,7 @@
                   </div>
                   <div class="stat-info">
                     <div class="stat-label">生产达成率：</div>
-                    <div><span class="stat-value">58.8%</span></div>
+                    <div><span class="stat-value">{{ productionData.quantityAchievementRate || 0 }}%</span></div>
                   </div>
                 </div>
               </div>
@@ -163,16 +180,16 @@
                 >
                 <div class="content-box">
                   <div class="box-item">
-                    <div class="item-img">23</div>
+                    <div class="item-img">{{ productionData.delayNumber }}</div>
                     <div class="item-text">已延期生产单数</div>
                   </div>
                   <div class="box-item">
-                    <div class="item-img">58%</div>
-                    <div class="item-text">生产达成率</div>
+                    <div class="item-img">{{ productionData.passRate || 0 }}%</div>
+                    <div class="item-text">产品合格率</div>
                   </div>
                   <div class="box-item">
-                    <div class="item-img">11</div>
-                    <div class="item-text">待生产单数</div>
+                    <div class="item-img">{{ productionData.noPassRate || 0 }}</div>
+                    <div class="item-text">不合格数量</div>
                   </div>
                 </div>
               </div>
@@ -210,38 +227,37 @@
                       :key="`fixed-${item.id}`"
                       class="table-row state-red"
                     >
-                      <td class="table-cell">{{ item.id }}</td>
-                      <td class="table-cell">{{ item.name }}</td>
-                      <td class="table-cell">{{ item.yqsl }}</td>
-                      <td class="table-cell">{{ item.ywcsl }}</td>
-                      <td class="table-cell">{{ item.scdcl }}</td>
-                      <td class="table-cell">{{ item.kstime }}</td>
-                      <td class="table-cell">{{ item.jstime }}</td>
-                      <td class="table-cell">{{ item.dom }}</td>
+                      <td class="table-cell">{{ item.productionOrderNumber }}</td>
+                      <td class="table-cell">{{ item.productName }}</td>
+                      <td class="table-cell">{{ item.requestProductionQuantity }}</td>
+                      <td class="table-cell">{{ item.completedQuantity }}</td>
+                      <td class="table-cell">{{ item.productionAchievementRate }}</td>
+                      <td class="table-cell">{{ item.plannedStartTime }}</td>
+                      <td class="table-cell">{{ item.plannedEndTime }}</td>
+                      <td class="table-cell">{{ item.currentProcess }}</td>
                     </tr>
 
                     <!-- 非红色行（State=N） -->
                     <tr
                       v-for="item in scrollRows"
-                      :key="`scroll-${item.id}`"
+                      :key="`scroll-${item.productionOrderNumber}`"
                       class="table-row"
                     >
-                      <td class="table-cell">{{ item.id }}</td>
-                      <td class="table-cell">{{ item.name }}</td>
-                      <td class="table-cell">{{ item.yqsl }}</td>
-                      <td class="table-cell">{{ item.ywcsl }}</td>
-                      <td class="table-cell">{{ item.scdcl }}</td>
-                      <td class="table-cell">{{ item.kstime }}</td>
-                      <td class="table-cell">{{ item.jstime }}</td>
-                      <td class="table-cell">{{ item.dom }}</td>
-                    </tr>
-
-                    <!-- 无数据时显示占位 -->
-                    <tr v-if="fixedRows.length === 0 && scrollRows.length === 0">
-                      <td colspan="8" class="empty-cell"> 暂无生产工单数据 </td>
+                      <td class="table-cell">{{ item.productionOrderNumber }}</td>
+                      <td class="table-cell">{{ item.productName }}</td>
+                      <td class="table-cell">{{ item.requestProductionQuantity }}</td>
+                      <td class="table-cell">{{ item.completedQuantity }}</td>
+                      <td class="table-cell">{{ item.productionAchievementRate }}</td>
+                      <td class="table-cell">{{ item.plannedStartTime }}</td>
+                      <td class="table-cell">{{ item.plannedEndTime }}</td>
+                      <td class="table-cell">{{ item.currentProcess }}</td>
                     </tr>
                   </tbody>
                 </table>
+                <!-- 无数据时显示占位 -->
+                <div v-if="fixedRows.length === 0 && scrollRows.length === 0">
+                  <div class="empty-cell"> 暂无生产工单数据 </div>
+                </div>
               </div>
             </div>
           </div>
@@ -262,21 +278,21 @@
                 <div class="unit-box">
                   <span class="unit">十万</span>
                   <div class="digit-box">
-                    <span class="digit">{{ weightDigits[0] }}</span>
+                    <span class="digit">{{ productionData.transformWeight[0] }}</span>
                   </div>
                 </div>
                 <!-- 万位 -->
                 <div class="unit-box">
                   <span class="unit">万</span>
                   <div class="digit-box">
-                    <span class="digit">{{ weightDigits[1] }}</span>
+                    <span class="digit">{{ productionData.transformWeight[1] }}</span>
                   </div>
                 </div>
                 <!-- 千位 -->
                 <div class="unit-box">
                   <span class="unit">千</span>
                   <div class="digit-box">
-                    <span class="digit">{{ weightDigits[2] }}</span>
+                    <span class="digit">{{ productionData.transformWeight[2] }}</span>
                   </div>
                 </div>
                 <!-- 千位分隔符 -->
@@ -285,21 +301,21 @@
                 <div class="unit-box">
                   <span class="unit"></span>
                   <div class="digit-box">
-                    <span class="digit">{{ weightDigits[3] }}</span>
+                    <span class="digit">{{ productionData.transformWeight[3] }}</span>
                   </div>
                 </div>
                 <!-- 十位 -->
                 <div class="unit-box">
                   <span class="unit"></span>
                   <div class="digit-box">
-                    <span class="digit">{{ weightDigits[4] }}</span>
+                    <span class="digit">{{ productionData.transformWeight[4] }}</span>
                   </div>
                 </div>
                 <!-- 个位 -->
                 <div class="unit-box">
                   <span class="unit"></span>
                   <div class="digit-box">
-                    <span class="digit">{{ weightDigits[5] }}</span>
+                    <span class="digit">{{ productionData.transformWeight[5] }}</span>
                   </div>
                 </div>
               </div>
@@ -312,8 +328,11 @@
                   <div class="stat-info">
                     <div class="stat-label">目标生产重量：</div>
                     <div
-                      ><span class="stat-value">{{ targetWeight }}</span
-                      ><span class="stat-dw">（{{ weightUnit }}）</span></div
+                      >
+                      <span class="stat-value">{{ productionData.totalWeight }}</span
+                      >
+                      <!-- <span class="stat-dw">（{{ weightUnit }}）</span> -->
+                      </div
                     >
                   </div>
                 </div>
@@ -325,8 +344,8 @@
                     <div class="stat-label">重量达成率：</div>
                     <div
                       ><span class="stat-value">{{
-                        weightCompletionRate
-                      }}</span></div
+                        productionData.weightAchievementRate || 0
+                      }}%</span></div
                     >
                   </div>
                 </div>
@@ -375,6 +394,7 @@
 import * as echarts from 'echarts';
 import { component as VueFullscreen } from 'vue-fullscreen';
 import { toggleFullscreen } from 'ele-admin';
+import { getTeamProductionDayDataOne, getTeamProductionDayDataThree, getTeamProductionDayDataTwo, queryTeamListByCurrentUserid } from '@/api/vis/productionDailyDashboard';
 
 export default {
   name: 'DashboardFramework',
@@ -385,13 +405,13 @@ export default {
     contentWidth() {
       return this.$store.state.theme.contentWidth || '100%';
     },
-    // 固定行：红色行（State=Y）
+    // 固定行：红色行（State=Y）是否已延期（0：否；1：是）
     fixedRows() {
-      return this.tableData.filter((item) => item.State === 'Y');
+      return this.tableData.filter((item) => item.isDelayed == 1);
     },
     // 非红色行：State=N
     scrollRows() {
-      return this.tableData.filter((item) => item.State === 'N');
+      return this.tableData.filter((item) => item.isDelayed == 0);
     },
     // 重量达成率计算
     weightCompletionRate() {
@@ -432,24 +452,10 @@ export default {
       date: '',
       time: '',
       week: '',
+      teamId: '',
 
       // 生产工单表格数据
-      tableData: [
-        { id: 1, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'Y' },
-        { id: 2, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'N' },
-        { id: 3, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'N' },
-        { id: 4, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'N' },
-        { id: 5, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'N' },
-        { id: 6, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'Y' },
-        { id: 7, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'N' },
-        { id: 8, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'Y' },
-        { id: 9, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'Y' },
-        { id: 10, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'Y' },
-        { id: 11, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'Y' },
-        { id: 12, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'Y' },
-        { id: 13, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'N' },
-        { id: 14, name: '项目A', yqsl: '23', ywcsl: '12', scdcl: '10%', kstime: '2023-09-01', jstime: '2023-09-01', dom: '3', State: 'N' },
-      ],
+      tableData: [],
 
       // 动态数据源
       productionCount: 588, // 当日生产数量（核心数据）
@@ -469,38 +475,35 @@ export default {
       deviceChartInstance: null, // 设备状态ECharts实例
       productChartInstance: null, // 产品TOP10图表实例
       qualificationChartInstance: null, // 合格率图表实例
+
+      productionData: {
+        quantity: 0, // 当日生产数量（核心数据）
+        weight: 0, // 当日生产重量（核心数据）
+        transformQuantity: 0, // 转换后的生产数量
+        transformWeight: 0, // 转换后的生产重量
+        delayNumber: 0,
+        noPassRate: 0,
+        passRate: 0,
+        quantity: 0,
+        quantityAchievementRate: 0,
+        totalQuantity: 0,
+        totalWeight: 0,
+        weight: 0,
+        weightAchievementRate: 0
+      },
+
       // 工序在岗人数数据
-      processPersonnelData: [
-        { name: '冲压工序', value: 28 },
-        { name: '焊接工序', value: 15 },
-        { name: '组装工序', value: 32 },
-        { name: '检测工序', value: 10 }
-      ],
+      processPersonnelData: [],
       // 设备实时状态数据
-      deviceStatusData: [
-        { name: '运行中', value: 25 },
-        { name: '待机', value: 10 },
-        { name: '故障', value: 5 },
-        { name: '维护中', value: 3 }
-      ],
+      deviceStatusData: [],
       // 产品生产数量TOP10数据
-      productTop10Data: [
-        { name: '产品A-01', value: 985 },
-        { name: '产品B-03', value: 860 },
-        { name: '产品C-02', value: 752 },
-        { name: '产品D-05', value: 628 },
-        { name: '产品E-01', value: 590 },
-        { name: '产品F-04', value: 485 },
-        { name: '产品G-02', value: 376 },
-        { name: '产品H-01', value: 290 },
-        { name: '产品I-03', value: 215 },
-        { name: '产品J-02', value: 180 }
-      ],
+      productTop10Data: [],
       // 各产品合格率数据
       qualificationRateData: {
-        productNames: ['产品一', '产品二', '产品三', '产品四', '产品五', '产品六', '产品七'],
-        rates: [90, 98, 85, 95, 96, 99, 97] // 合格率（%）
-      }
+        productNames: [],
+        rates: [] // 合格率（%）
+      },
+      teamList: []
     };
   },
   created() {
@@ -508,15 +511,16 @@ export default {
     this.updateTimer = setInterval(this.updateTime, 1000);
   },
   mounted() {
-    this.formatNumber(this.productionCount, 'count');
-    this.formatNumber(this.productionWeight, 'weight');
-    this.sortTableData(); // 排序Y状态数据置顶
+    this.queryTeamList();
+    // this.formatNumber(this.productionCount, 'count');
+    // this.formatNumber(this.productionWeight, 'weight');
+    // this.sortTableData(); // 排序Y状态数据置顶
 
     this.$nextTick(() => {
-      this.initProcessPersonnelChart();
-      this.initDeviceStatusChart();
-      this.initProductTop10Chart();
-      this.initQualificationRateChart();
+      // this.initProcessPersonnelChart();
+      // this.initDeviceStatusChart();
+      // this.initProductTop10Chart();
+      // this.initQualificationRateChart();
       this.isFlag = true;
 
       // 窗口 resize 时仅处理图表缩放
@@ -551,11 +555,91 @@ export default {
     });
   },
   methods: {
+    // 查询当前用户所属班组
+    queryTeamList() {
+      queryTeamListByCurrentUserid().then((res) => {
+        console.log(res);
+        // if (res) {
+        if (!res ||res.length == 0) {
+          this.$message({
+            message: '当前用户没有所属班组',
+            type: 'warning'
+          });
+          return;
+        }
+        this.teamList = res;
+        this.teamId = res[0].id;
+        this.getTeamProductionDayDataOneData();
+        this.getTeamProductionDayDataTwoData();
+        this.getTeamProductionDayDataThreeData();
+      }).catch((error) => {
+        console.error('获取班组列表失败:', error);
+      });
+    },
+    // 选择班组
+    changeTeam() {
+      this.getTeamProductionDayDataOneData();
+      this.getTeamProductionDayDataTwoData();
+      this.getTeamProductionDayDataThreeData();
+    },
+    // 班组生产日综合看板-当日生产情况、数量、重量
+    getTeamProductionDayDataOneData() {
+      getTeamProductionDayDataOne(this.teamId).then((res) => {
+        console.log(res);
+        res.transformQuantity = this.formatNumber(res.quantity);
+        res.transformWeight = this.formatNumber(res.weight);
+        this.productionData = res;
+      }).catch((error) => {
+        console.error('获取班组生产日综合看板-当日生产情况、数量、重量失败:', error);
+      });
+    },
+    // 生产工单进度
+    getTeamProductionDayDataThreeData() {
+      getTeamProductionDayDataThree(this.teamId).then((res) => {
+        console.log(res);
+        this.tableData = res;
+        this.sortTableData(); // 排序Y状态数据置顶
+      }).catch((error) => {
+        console.error('获取班组生产日综合看板-生产工单进度失败:', error);
+      });
+    },
+    // 
+    getTeamProductionDayDataTwoData() {
+      getTeamProductionDayDataTwo(this.teamId).then((res) => {
+        console.log(res.eachProcessOnDutyNum);
+        // this.processPersonnelData = res.eachProcessOnDutyNum;
+        this.processPersonnelData = res.eachProcessOnDutyNum.map((item) => {
+          return {
+            name: item.name,
+            value: item.value
+          }
+        });
+        this.productTop10Data = res.produceTop10;
+        this.deviceStatusData = res.eachProcessEquipmentNum;
+        const product = {
+          productNames: [],
+          rates: []
+        }
+        res.productQualificationRate.forEach((item) => {
+          product.productNames.push(item.name);
+          product.rates.push(item.value);
+        });
+        this.qualificationRateData = product;
+        this.$nextTick(() => {
+          this.initProcessPersonnelChart();
+          this.initDeviceStatusChart();
+          this.initProductTop10Chart();
+          this.initQualificationRateChart();
+        });
+      }).catch((error) => {
+        console.error('获取班组生产日综合看板-各产品前10名失败:', error);
+      });
+    },
     // 表格数据排序 - State为"Y"的置顶
     sortTableData() {
       this.tableData.sort((a, b) => {
-        if (a.State === 'Y' && b.State !== 'Y') return -1;
-        if (a.State !== 'Y' && b.State === 'Y') return 1;
+        if (a.isDelayed == 1 && b.isDelayed !== 1) return -1;
+        if (a.isDelayed !== 1 && b.isDelayed == 1) return 1;
         return 0;
       });
     },
@@ -575,18 +659,19 @@ export default {
     },
 
     // 格式化数字为6位数组（补零）
-    formatNumber(num, target) {
+    formatNumber(num) {
       const paddedStr = num.toString().padStart(6, '0');
       const digits = paddedStr.split('').map(Number);
-      this[target === 'count' ? 'countDigits' : 'weightDigits'] = digits;
+      return digits;
     },
 
     // 工序在岗人数饼图
     initProcessPersonnelChart() {
       const chartDom = this.$refs.processPersonnelChart;
       if (!chartDom) return;
-
+      console.log('processPersonnelData~~~', this.processPersonnelData);
       this.processChartInstance = echarts.init(chartDom);
+      console.log('processChartInstance~~~', this.processChartInstance);
       const totalPersonnel = this.processPersonnelData.reduce((sum, item) => sum + item.value, 0);
       const option = {
         backgroundColor: 'transparent',
@@ -600,15 +685,25 @@ export default {
           padding: 10
         },
         legend: {
+          type: 'scroll',
           orient: 'vertical',
           right: 20,
           top: 'center',
+          bottom: 20,
           textStyle: { color: '#e9ecef', fontSize: 12, padding: [0, 8] },
           itemWidth: 12,
           itemHeight: 10,
-          itemGap: 20,
+          itemGap: 10,
           formatter: '{name}',
-          align: 'left'
+          align: 'left',
+          scrollDataIndex: 0,
+          pageButtonItemGap: 5,
+          pageButtonPosition: 'end',
+          pageFormatter: '{current}/{total}',
+          pageIconColor: '#e9ecef',
+          pageIconInactiveColor: '#6c757d',
+          pageIconSize: [15, 15],
+          pageTextStyle: { color: '#e9ecef', fontSize: 12 }
         },
         series: [{
           name: '在岗人数',
@@ -630,7 +725,13 @@ export default {
             }
           },
           data: this.processPersonnelData,
-          color: ['#1163fb', '#14cdc9', '#f9bb19', '#712ed2', '#ec4899', '#06b6d4', '#6b7280']
+          color: [
+            '#1163fb', '#14cdc9', '#f9bb19', '#712ed2', '#ec4899', '#06b6d4', '#6b7280','#e74c3c', '#f39c12', '#f1c40f', '#2ecc71', '#3498db', '#9b59b6',
+            '#e67e22', '#e91e63', '#c0392b', '#d35400', '#16a085', '#f4d03f',
+            '#1abc9c', '#4caf50', '#2980b9', '#8e44ad', '#ad1457', '#512da8',
+            '#ff5722', '#d84315', '#ff9800', '#f57c00', '#388e3c', '#03a9f4',
+            '#0277bd', '#673ab7', '#ff1744', '#795548', '#607d8b', '#3f51b5'
+          ]
         }]
       };
       this.processChartInstance.setOption(option);
@@ -655,15 +756,25 @@ export default {
           padding: 10
         },
         legend: {
+          type: 'scroll',
           orient: 'vertical',
           right: 20,
           top: 'center',
+          bottom: 20,
           textStyle: { color: '#e9ecef', fontSize: 12, padding: [0, 8] },
           itemWidth: 12,
           itemHeight: 10,
-          itemGap: 20,
+          itemGap: 15,
           formatter: '{name}',
-          align: 'left'
+          align: 'left',
+          scrollDataIndex: 0,
+          pageButtonItemGap: 5,
+          pageButtonPosition: 'end',
+          pageFormatter: '{current}/{total}',
+          pageIconColor: '#e9ecef',
+          pageIconInactiveColor: '#6c757d',
+          pageIconSize: [15, 15],
+          pageTextStyle: { color: '#e9ecef', fontSize: 12 }
         },
         series: [{
           name: '设备状态',
@@ -685,7 +796,13 @@ export default {
             }
           },
           data: this.deviceStatusData,
-          color: ['#1163fb', '#14cdc9', '#ff4d4f', '#f9bb19']
+          color: [
+            '#1163fb', '#14cdc9', '#f9bb19', '#712ed2', '#ec4899', '#06b6d4', '#6b7280','#e74c3c', '#f39c12', '#f1c40f', '#2ecc71', '#3498db', '#9b59b6',
+            '#e67e22', '#e91e63', '#c0392b', '#d35400', '#16a085', '#f4d03f',
+            '#1abc9c', '#4caf50', '#2980b9', '#8e44ad', '#ad1457', '#512da8',
+            '#ff5722', '#d84315', '#ff9800', '#f57c00', '#388e3c', '#03a9f4',
+            '#0277bd', '#673ab7', '#ff1744', '#795548', '#607d8b', '#3f51b5'
+          ]
         }]
       };
       this.deviceChartInstance.setOption(option);
@@ -771,7 +888,7 @@ export default {
 
       this.qualificationChartInstance = echarts.init(chartDom);
       const { productNames, rates } = this.qualificationRateData;
-
+      console.log('qualificationRateData~~~', productNames, rates);
       const option = {
         backgroundColor: 'transparent',
         grid: { left: '2%', right: '2%', bottom: '12%', top: '10%', containLabel: true },
@@ -805,8 +922,8 @@ export default {
         },
         yAxis: {
           type: 'value',
-          min: 80,
-          max: 100,
+          // min: 0,
+          // max: 100,
           axisLabel: { color: '#ccc', fontSize: 12, formatter: '{value}%' },
           axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
           splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
@@ -877,6 +994,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+      padding-left: 1rem;
     }
 
     .title {
@@ -983,7 +1101,7 @@ export default {
           }
 
           .card-title {
-            font-size: clamp(0.85rem, 1.5vw, 0.95rem);
+            font-size: clamp(1rem, 1.8vw,1.4rem);
             letter-spacing: 0.05rem;
           }
         }
@@ -998,15 +1116,15 @@ export default {
         }
 
         .number-display {
-  flex: 3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  box-sizing: border-box;
-  overflow: hidden;
-  // 关键新增：增加顶部外边距，与顶部拉开距离
-  margin-top: 0.8rem; 
+          flex: 3;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          box-sizing: border-box;
+          overflow: hidden;
+          // 关键新增：增加顶部外边距，与顶部拉开距离
+          margin-top: 0.8rem; 
         }
 
         .card-stats {
@@ -1129,7 +1247,7 @@ export default {
             }
 
             .card-title {
-              font-size: clamp(0.85rem, 1.5vw, 0.95rem);
+              font-size: clamp(1rem, 1.8vw, 1.4rem);
               letter-spacing: 0.05rem;
             }
           }
@@ -1232,7 +1350,7 @@ export default {
             }
 
             .card-title {
-              font-size: clamp(0.85rem, 1.5vw, 0.95rem);
+              font-size: clamp(1rem, 1.8vw, 1.4rem);
               letter-spacing: 0.05rem;
             }
           }