测试问题修改,厨房数据总览接口对接
This commit is contained in:
parent
e868769d65
commit
b529c7e20f
|
|
@ -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: {
|
||||
|
||||
|
|
|
|||
|
|
@ -90,6 +90,12 @@ export default {
|
|||
};
|
||||
},
|
||||
created() {
|
||||
// this.getList();
|
||||
},
|
||||
mounted(){
|
||||
if(this.$route.query.activeName){
|
||||
this.activeName = this.$route.query.activeName
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue