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

This commit is contained in:
zzyuan 2025-06-25 17:40:24 +08:00
parent e868769d65
commit b529c7e20f
3 changed files with 955 additions and 911 deletions

View File

@ -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>
<count-to :start-val="0" :end-val="topData.num1" :duration="2000" class="card-panel-num" />
</div>
<div class="sub-panel-title">{{healthCertificateCount[0].name}}</div>
<div><count-to :start-val="0" :end-val="healthCertificateCount[0].count" :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><count-to :start-val="0" :end-val="topData.num2" :duration="2000" class="card-panel-num" /></div>
<div class="sub-panel-title">{{healthCertificateCount[1].name}}</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><count-to :start-val="0" :end-val="topData.num3" :duration="2000" class="card-panel-num" /></div>
<div class="sub-panel-title">{{healthCertificateCount[2].name}}</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><count-to :start-val="0" :end-val="topData.num4" :duration="2000" class="card-panel-num" /></div>
<div class="sub-panel-title">{{healthCertificateCount[3].name}}</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><count-to :start-val="0" :end-val="topData.num2" :duration="2000" class="card-panel-num" /></div>
<div class="sub-panel-title">{{alarmLog[0].name}}</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><count-to :start-val="0" :end-val="topData.num3" :duration="2000" class="card-panel-num" /></div>
<div class="sub-panel-title">{{alarmLog[1].name}}</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><count-to :start-val="0" :end-val="topData.num4" :duration="2000" class="card-panel-num" /></div>
<div class="sub-panel-title">{{alarmLog[2].name}}</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: {
type: Object,
default: {}
}
healthCertificateCount: {
type: Array,
default: []
},
alarmLog: {
type: Array,
default: []
},
},
methods: {

View File

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

View File

@ -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 style="position: absolute;right: 10px;font-size: 14px;color: #FFBD57;">查看详情></span>
<span>环境警告</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:{
"num1": 1,
"num2": 2,
"num3": 3,
"num4": 4,
alarmLog:[
{
"name": "门禁报警记录",
"count": 0,
"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=[]
// getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
// chartData = response.data;
console.log(this.informationData.deviceStatus)
var chartData=this.informationData.deviceStatus;
var m2R2Data = []
var sumNum = 0
// chartData.forEach((item,index)=>{
// let obj = {}
// sumNum=sumNum+item.num
// if(index==0){
// obj = {
// value: item.num,
// legendname: item.name,
// name: item.name+' '+ item.num,
// 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",
chartData.forEach((item,index)=>{
let obj = {}
sumNum=sumNum+item.count
if(index==0){
obj = {
value: item.count,
legendname: item.name,
name: item.name+' '+ item.count,
itemStyle: { color: "#69ADF8" },
},
{
value: 120,
legendname: "离线",
name: "离线 120",
}
}
if(index==1){
obj = {
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=[]
// getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
// chartData = response.data;
var chartData=this.informationData.sampleRetention;
var m2R2Data = []
var sumNum = 0
// chartData.forEach((item,index)=>{
// let obj = {}
// sumNum=sumNum+item.num
// if(index==0){
// obj = {
// value: item.num,
// legendname: item.name,
// name: item.name+' '+ item.num,
// 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",
chartData.forEach((item,index)=>{
let obj = {}
sumNum=sumNum+item.count
if(index==0){
obj = {
value: item.count,
legendname: item.name,
name: item.name+' '+ item.count,
itemStyle: { color: "#5085f2" },
},
{
value: 335,
legendname: "不合格",
name: "不合格 335",
}
}
if(index==1){
obj = {
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=[]
getThisMonthSDishSalesRankingApi().then((response) => {
chartData = response.data;
var chartData = this.informationData.employeeViolation;
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=[]
getThisMonthSDishSalesRankingApi().then((response) => {
chartData = response.data;
var chartData = this.informationData.environmentalWarning;
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=[]
getThisMonthSDishSalesRankingApi().then((response) => {
chartData = response.data;
var chartData = this.informationData.environmentalAlarm;
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