测试问题修改，厨房数据总览接口对接

src/views/kitchen/dashboard/SubGroup.vue

@@ -6,22 +6,20 @@
           <div class="card-panel-text">健康证管理</div>
           <div style="width: 100%;height: 80px;display: flex;">
             <div class="sub-panel" style="border-color: #00D9CB;background: linear-gradient(to right,#E7FBFA,#FFFFFF);">
-              <div class="sub-panel-title">正常</div>
+              <div class="sub-panel-title">{{healthCertificateCount[0].name}}</div>
-              <div>
+              <div><count-to :start-val="0" :end-val="healthCertificateCount[0].count" :duration="2000" class="card-panel-num" /></div>
-                <count-to :start-val="0" :end-val="topData.num1" :duration="2000" class="card-panel-num" />
-              </div>
             </div>
             <div class="sub-panel" style="border-color: #F1E482;background: linear-gradient(to right,#FDFCF3,#FFFFFF);">
-              <div class="sub-panel-title">缺失</div>
+              <div class="sub-panel-title">{{healthCertificateCount[1].name}}</div>
-              <div><count-to :start-val="0" :end-val="topData.num2" :duration="2000" class="card-panel-num" /></div>
+              <div><count-to :start-val="0" :end-val="healthCertificateCount[1].count" :duration="2000" class="card-panel-num" /></div>
             </div>
             <div class="sub-panel" style="border-color: #FFAF35;background: linear-gradient(to right,#FFF7EB,#FFFFFF);">
-              <div class="sub-panel-title">临期</div>
+              <div class="sub-panel-title">{{healthCertificateCount[2].name}}</div>
-              <div><count-to :start-val="0" :end-val="topData.num3" :duration="2000" class="card-panel-num" /></div>
+              <div><count-to :start-val="0" :end-val="healthCertificateCount[2].count" :duration="2000" class="card-panel-num" /></div>
             </div>
             <div class="sub-panel" style="border-color: #FF6161;background: linear-gradient(to right,#FFF0F0,#FFFFFF);">
-              <div class="sub-panel-title">过期</div>
+              <div class="sub-panel-title">{{healthCertificateCount[3].name}}</div>
-              <div><count-to :start-val="0" :end-val="topData.num4" :duration="2000" class="card-panel-num" /></div>
+              <div><count-to :start-val="0" :end-val="healthCertificateCount[3].count" :duration="2000" class="card-panel-num" /></div>
             </div> 
           </div>
         </div> 
@@ -30,19 +28,19 @@
     <el-col :span="12" class="card-panel-col">
       <div class="card-panel"> 
         <div class="card-panel-description">
-          <div class="card-panel-text">健康证管理</div>
+          <div class="card-panel-text">报警记录</div>
           <div style="width: 100%;height: 80px;display: flex;">
             <div class="sub-panel2" style="border-color: #F1E482;background: linear-gradient(to right,#FDFCF3,#FFFFFF);">
-              <div class="sub-panel-title">环境报警记录</div>
+              <div class="sub-panel-title">{{alarmLog[0].name}}</div>
-              <div><count-to :start-val="0" :end-val="topData.num2" :duration="2000" class="card-panel-num" /></div>
+              <div><count-to :start-val="0" :end-val="alarmLog[0].count" :duration="2000" class="card-panel-num" /></div>
             </div>
             <div class="sub-panel2" style="border-color: #FFAF35;background: linear-gradient(to right,#FFF7EB,#FFFFFF);">
-              <div class="sub-panel-title">门禁报警记录</div>
+              <div class="sub-panel-title">{{alarmLog[1].name}}</div>
-              <div><count-to :start-val="0" :end-val="topData.num3" :duration="2000" class="card-panel-num" /></div>
+              <div><count-to :start-val="0" :end-val="alarmLog[1].count" :duration="2000" class="card-panel-num" /></div>
             </div>
             <div class="sub-panel2" style="border-color: #FF6161;background: linear-gradient(to right,#FFF0F0,#FFFFFF);">
-              <div class="sub-panel-title">监控报警记录</div>
+              <div class="sub-panel-title">{{alarmLog[2].name}}</div>
-              <div><count-to :start-val="0" :end-val="topData.num4" :duration="2000" class="card-panel-num" /></div>
+              <div><count-to :start-val="0" :end-val="alarmLog[2].count" :duration="2000" class="card-panel-num" /></div>
             </div>
           </div> 
         </div> 
@@ -59,10 +57,14 @@ export default {
     CountTo
   },
   props: {
-    topData: {
+    healthCertificateCount: {
-      type: Object,
+      type: Array,
-      default: {}
+      default: []
-    }
+    },
+    alarmLog: {
+      type: Array,
+      default: []
+    },
   },
   methods: {
     

src/views/kitchen/environment/alarmRecord/index.vue

@@ -90,6 +90,12 @@ export default {
     };
   },
   created() { 
+    // this.getList();
+  },
+  mounted(){
+    if(this.$route.query.activeName){
+      this.activeName = this.$route.query.activeName
+    } 
     this.getList();
   },
   methods: { 

src/views/kitchen/index.vue

@@ -3,7 +3,7 @@
     <panel-group :topData="topAreaOptions"/>
     <el-row>
         <el-col :span="18">
-            <sub-group :topData="subTopAreaOptions"/>
+            <sub-group :healthCertificateCount="healthCertificateCount" :alarmLog="alarmLog"/>
 
         </el-col>
         <el-col :span="6">
@@ -55,7 +55,7 @@
             <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;height: 24px;">报警数据分析</div> 
             <div style="width: 100%;text-align: center;position: relative;">
               <span>员工违规</span>
-              <span style="position: absolute;right: 10px;font-size: 14px;color: #00D9CB;">查看详情></span>
+              <span style="position: absolute;right: 10px;font-size: 14px;color: #00D9CB;" @click="goList">查看详情></span>
             </div> 
             <div id="lineChartThree" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>  
           </div>
@@ -63,8 +63,8 @@
        <el-col :span="8">
           <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> 
             <div style="width: 100%;text-align: center;position: relative;margin-top: 24px;">
-              <span>员工违规</span>
+              <span>环境警告</span>
-              <span style="position: absolute;right: 10px;font-size: 14px;color: #FFBD57;">查看详情></span>
+              <span style="position: absolute;right: 10px;font-size: 14px;color: #FFBD57;" @click="goList2">查看详情></span>
             </div>  
             <div id="lineChartFour" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>  
           </div>
@@ -73,7 +73,7 @@
           <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> 
             <div style="width: 100%;text-align: center;position: relative;margin-top: 24px;">
               <span>环境告警</span>
-              <span style="position: absolute;right: 10px;font-size: 14px;color: #F35C5C;">查看详情></span>
+              <span style="position: absolute;right: 10px;font-size: 14px;color: #F35C5C;" @click="goList">查看详情></span>
             </div>  
             <div id="lineChartFive" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>  
           </div>
@@ -123,12 +123,45 @@ export default {
           "lastDate": "2025-05-15"
         }
       ],
-      subTopAreaOptions:{  
+      alarmLog:[
-          "num1": 1, 
+        {
-          "num2": 2, 
+            "name": "门禁报警记录",
-          "num3": 3, 
+            "count": 0,
-          "num4": 4, 
+            "percentage": 0.0
         },
+        {
+            "name": "监控报警记录",
+            "count": 0,
+            "percentage": 0.0
+        },
+        {
+            "name": "环境报警记录",
+            "count": 0,
+            "percentage": 0.0
+        }
+      ],
+      healthCertificateCount:[
+        {
+            "name": "正常",
+            "count": 0,
+            "percentage": 0.0
+        },
+        {
+            "name": "缺失",
+            "count": 0,
+            "percentage": 0.0
+        },
+        {
+            "name": "临期",
+            "count": 0,
+            "percentage": 0.0
+        },
+        {
+            "name": "过期",
+            "count": 0,
+            "percentage": 0.0
+        }
+      ],
       dateRange1:[new Date(),new Date()],
       dateRange2:[new Date(),new Date()],
       pickerOptions: {
@@ -158,6 +191,7 @@ export default {
             }
         }]
       },
+      informationData:{},
       myCharts1:null,
       myCharts2:null,
       myCharts3:null,
@@ -167,11 +201,7 @@ export default {
   },
   mounted(){
     this.getTopData()
-    this.InitEChartsOne()
+    
-    this.InitEChartsTwo()
-    this.InitEChartsThree()
-    this.InitEChartsFour()
-    this.InitEChartsFive()
     window.addEventListener('transitionend', this.$_sidebarResizeHandler) 
   },
   methods: {
@@ -189,7 +219,31 @@ export default {
     },
     getTopData(){ 
       getHomePageInfoApi({}).then((response) => {
-          // this.topAreaOptions = response.data.data; 
+        this.informationData = response.data;
+        this.topAreaOptions = [{
+          "num": response.data.staffCount,
+          "name": "人员总数", 
+        },{
+          "num": response.data.deviceCount, 
+          "name": "设备总数（个）", 
+        },
+        {
+          "num": response.data.todayWarningCount, 
+          "name": "今日预警数（个）", 
+        },
+        {
+          "num": response.data.historicalWarningCount, 
+          "name": "历史预警数（个）", 
+        }]
+        this.alarmLog = response.data.alarmLog;
+        this.healthCertificateCount = response.data.healthCertificateCount;
+        this.InitEChartsOne()
+        this.InitEChartsTwo()
+        this.InitEChartsThree()
+        this.InitEChartsFour()
+        this.InitEChartsFive()
+
+
       }); 
     },
     changDate1(){ 
@@ -199,55 +253,45 @@ export default {
     InitEChartsOne() {
       console.log(this.dateRange1)
       console.log(this.formatDate(this.dateRange1[0]))
-      var chartData=[]
+      console.log(this.informationData.deviceStatus)
-      // getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
+      var chartData=this.informationData.deviceStatus;
-          // chartData = response.data;
       var m2R2Data = []
       var sumNum = 0
-          // chartData.forEach((item,index)=>{
+      chartData.forEach((item,index)=>{
-          //   let obj = {}
+        let obj = {}
-          //   sumNum=sumNum+item.num
+        sumNum=sumNum+item.count
-          //   if(index==0){
+        if(index==0){
-          //     obj = {
+          obj = {
-          //       value: item.num,
+            value: item.count,
-          //       legendname: item.name,
+            legendname: item.name,
-          //       name: item.name+' '+  item.num,
+            name: item.name+' '+  item.count,
-          //       itemStyle: { color: "#5085f2" },
-          //     }
-          //   }
-          //   if(index==1){
-          //     obj = {
-          //       value: item.num,
-          //       legendname: item.name,
-          //       name: item.name+' '+  item.num,
-          //       itemStyle: { color: "#f2719a" },
-          //     }
-          //   }
-          //   if(index==2){
-          //     obj = {
-          //       value: item.num,
-          //       legendname: item.name,
-          //       name: item.name+' '+  item.num,
-          //       itemStyle: { color: "#fdb301" },
-          //     }
-          //   }
-          //   m2R2Data.push(obj)
-          // }) 
-
-          var m2R2Data = [
-            {
-              value: 240,
-              legendname: "正常",
-              name: "正常  240",
             itemStyle: { color: "#69ADF8" },
-            },
+          }
-            {
+        }
-              value: 120,
+        if(index==1){
-              legendname: "离线",
+          obj = {
-              name: "离线  120",
+            value: item.count,
+            legendname: item.name,
+            name: item.name+' '+  item.count,
             itemStyle: { color: "#F3A56D" },
           }
-          ];
+        }
+        m2R2Data.push(obj)
+      })  
+      // var m2R2Data = [
+      //   {
+      //     value: 240,
+      //     legendname: "在线",
+      //     name: "在线  240",
+      //     itemStyle: { color: "#69ADF8" },
+      //   },
+      //   {
+      //     value: 120,
+      //     legendname: "离线",
+      //     name: "离线  120",
+      //     itemStyle: { color: "#F3A56D" },
+      //   }
+      // ];
 
       var option = {
         title: [
@@ -347,7 +391,6 @@ export default {
       // window.addEventListener("resize4", function () {
       //     myCharts1.resize();
       // }); 
-      // });
     },
     changDate2(){
       this.InitEChartsTwo()
@@ -355,55 +398,53 @@ export default {
     },
     InitEChartsTwo() {
       console.log(this.dateRange2)
-       var chartData=[]
+      var chartData=this.informationData.sampleRetention;
-      // getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
-          // chartData = response.data;
       var m2R2Data = []
       var sumNum = 0
-          // chartData.forEach((item,index)=>{
+      chartData.forEach((item,index)=>{
-          //   let obj = {}
+        let obj = {}
-          //   sumNum=sumNum+item.num
+        sumNum=sumNum+item.count
-          //   if(index==0){
+        if(index==0){
-          //     obj = {
+          obj = {
-          //       value: item.num,
+            value: item.count,
-          //       legendname: item.name,
+            legendname: item.name,
-          //       name: item.name+' '+  item.num,
+            name: item.name+' '+  item.count,
-          //       itemStyle: { color: "#5085f2" },
-          //     }
-          //   }
-          //   if(index==1){
-          //     obj = {
-          //       value: item.num,
-          //       legendname: item.name,
-          //       name: item.name+' '+  item.num,
-          //       itemStyle: { color: "#f2719a" },
-          //     }
-          //   }
-          //   if(index==2){
-          //     obj = {
-          //       value: item.num,
-          //       legendname: item.name,
-          //       name: item.name+' '+  item.num,
-          //       itemStyle: { color: "#fdb301" },
-          //     }
-          //   }
-          //   m2R2Data.push(obj)
-          // }) 
-
-          var m2R2Data = [
-            {
-              value: 310,
-              legendname: "合格",
-              name: "合格  310",
             itemStyle: { color: "#5085f2" },
-            },
+          }
-            {
+        }
-              value: 335,
+        if(index==1){
-              legendname: "不合格",
+          obj = {
-              name: "不合格  335",
+            value: item.count,
+            legendname: item.name,
+            name: item.name+' '+  item.count,
+            itemStyle: { color: "#f2719a" },
+          }
+        }
+        if(index==2){
+          obj = {
+            value: item.count,
+            legendname: item.name,
+            name: item.name+' '+  item.count,
             itemStyle: { color: "#fdb301" },
           }
-          ];
+        }
+        m2R2Data.push(obj)
+      }) 
+
+      // var m2R2Data = [
+      //   {
+      //     value: 310,
+      //     legendname: "合格",
+      //     name: "合格  310",
+      //     itemStyle: { color: "#5085f2" },
+      //   },
+      //   {
+      //     value: 335,
+      //     legendname: "不合格",
+      //     name: "不合格  335",
+      //     itemStyle: { color: "#fdb301" },
+      //   }
+      // ];
 
       var option = {
         title: [
@@ -502,17 +543,14 @@ export default {
       // window.addEventListener("resize4", function () {
       //     myCharts2.resize();
       // }); 
-      // });
     },
     InitEChartsThree() { 
       var getName = [];
       var getValue = [];
-      var chartData=[]
+      var chartData = this.informationData.employeeViolation;
-      getThisMonthSDishSalesRankingApi().then((response) => {
-          chartData = response.data;
       chartData.forEach((item,index)=>{
         getName.push(item.name)
-            getValue.push(item.num) 
+        getValue.push(item.count) 
       })  
       var max = Math.max.apply(null, getValue);
       var getMax = [];
@@ -712,17 +750,14 @@ export default {
       // window.addEventListener("resize3", function () {
       //     myCharts3.resize();
       // }); 
-      }); 
     }, 
     InitEChartsFour() {
       var getName = [];
       var getValue = [];
-      var chartData=[]
+      var chartData = this.informationData.environmentalWarning;
-      getThisMonthSDishSalesRankingApi().then((response) => {
-          chartData = response.data;
       chartData.forEach((item,index)=>{
         getName.push(item.name)
-            getValue.push(item.num) 
+        getValue.push(item.count) 
       })  
       var max = Math.max.apply(null, getValue);
       var getMax = [];
@@ -755,7 +790,7 @@ export default {
           {
             type: "category",
             inverse: true,
-                offset: 100, 
+            offset: 160, 
             axisLabel: {
               show: true,
               align: "left",
@@ -922,17 +957,14 @@ export default {
       // window.addEventListener("resize3", function () {
       //     myCharts4.resize();
       // }); 
-      }); 
     },
     InitEChartsFive() {
       var getName = [];
       var getValue = [];
-      var chartData=[]
+      var chartData = this.informationData.environmentalAlarm;
-      getThisMonthSDishSalesRankingApi().then((response) => {
-          chartData = response.data;
       chartData.forEach((item,index)=>{
         getName.push(item.name)
-            getValue.push(item.num) 
+        getValue.push(item.count) 
       })  
       var max = Math.max.apply(null, getValue);
       var getMax = [];
@@ -965,7 +997,7 @@ export default {
           {
             type: "category",
             inverse: true,
-                offset: 100, 
+            offset: 120, 
             axisLabel: {
               show: true,
               align: "left",
@@ -1132,9 +1164,13 @@ export default {
       // window.addEventListener("resize3", function () {
       //     myCharts5.resize();
       // }); 
-      }); 
     },
-
+    goList(){
+      this.$router.push({ path: "/kitchen/environment/alarmRecord",query: {activeName:6}});
+    },
+    goList2(){
+      this.$router.push({ path: "/kitchen/environment/alarmRecord",query: {activeName:5}});
+    },
     //日期
     formatDate(date) {
         // 格式化为 YYYY-MM-DD