From b529c7e20fa8e9d50b4212154a46f69c05f16301 Mon Sep 17 00:00:00 2001 From: zzyuan <781948537@qq.com> Date: Wed, 25 Jun 2025 17:40:24 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E9=97=AE=E9=A2=98=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=EF=BC=8C=E5=8E=A8=E6=88=BF=E6=95=B0=E6=8D=AE=E6=80=BB?= =?UTF-8?q?=E8=A7=88=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/kitchen/dashboard/SubGroup.vue | 44 +- .../kitchen/environment/alarmRecord/index.vue | 6 + src/views/kitchen/index.vue | 1816 +++++++++-------- 3 files changed, 955 insertions(+), 911 deletions(-) diff --git a/src/views/kitchen/dashboard/SubGroup.vue b/src/views/kitchen/dashboard/SubGroup.vue index 73adfd33..5447d0bd 100644 --- a/src/views/kitchen/dashboard/SubGroup.vue +++ b/src/views/kitchen/dashboard/SubGroup.vue @@ -6,22 +6,20 @@
健康证管理
-
正常
-
- -
+
{{healthCertificateCount[0].name}}
+
-
缺失
-
+
{{healthCertificateCount[1].name}}
+
-
临期
-
+
{{healthCertificateCount[2].name}}
+
-
过期
-
+
{{healthCertificateCount[3].name}}
+
@@ -30,19 +28,19 @@
-
健康证管理
+
报警记录
-
环境报警记录
-
+
{{alarmLog[0].name}}
+
-
门禁报警记录
-
+
{{alarmLog[1].name}}
+
-
监控报警记录
-
+
{{alarmLog[2].name}}
+
@@ -59,10 +57,14 @@ export default { CountTo }, props: { - topData: { - type: Object, - default: {} - } + healthCertificateCount: { + type: Array, + default: [] + }, + alarmLog: { + type: Array, + default: [] + }, }, methods: { diff --git a/src/views/kitchen/environment/alarmRecord/index.vue b/src/views/kitchen/environment/alarmRecord/index.vue index 14860704..1e7f2b3e 100644 --- a/src/views/kitchen/environment/alarmRecord/index.vue +++ b/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: { diff --git a/src/views/kitchen/index.vue b/src/views/kitchen/index.vue index 1094019e..889679aa 100644 --- a/src/views/kitchen/index.vue +++ b/src/views/kitchen/index.vue @@ -3,7 +3,7 @@ - + @@ -55,7 +55,7 @@
报警数据分析
员工违规 - 查看详情> + 查看详情>
@@ -63,8 +63,8 @@
- 员工违规 - 查看详情> + 环境警告 + 查看详情>
@@ -73,7 +73,7 @@
环境告警 - 查看详情> + 查看详情>
@@ -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,155 +253,144 @@ 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; - 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) - // }) + console.log(this.informationData.deviceStatus) + var chartData=this.informationData.deviceStatus; + var m2R2Data = [] + var sumNum = 0 + 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" }, + } + } + 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 m2R2Data = [ - { - value: 240, - legendname: "正常", - name: "正常 240", - itemStyle: { color: "#69ADF8" }, + var option = { + title: [ + { + text: sumNum + "个", + subtext: "设备总数", + textStyle: { + fontSize: 22, + color: "black", }, - { - value: 120, - legendname: "离线", - name: "离线 120", - itemStyle: { color: "#F3A56D" }, - } - ]; - - var option = { - title: [ - { - text: sumNum + "个", - subtext: "设备总数", - textStyle: { - fontSize: 22, - color: "black", - }, - subtextStyle: { - fontSize: 14, - color: "black", - }, - textAlign: "center", - x: "48%", - y: "44%", - }, - ], - tooltip: { - trigger: "item", - formatter: function (parms) { - var str = - parms.seriesName + - "
" + - parms.marker + - "" + - parms.data.legendname + - "
" + - "数量：" + - parms.data.value + - "
" + - "占比：" + - parms.percent + - "%"; - return str; - }, + subtextStyle: { + fontSize: 14, + color: "black", }, - legend: { - type: "scroll", - align: "left", - bottom: "2%", - let:"middle", - textStyle: { - color: "#8C8C8C", - }, - height: 50, - width:300, - formatter: function (name) { - let data = option.series[0].data; - let total = 0; - let tarValue; - for (let i = 0; i < data.length; i++) { - total += data[i].value; - if (data[i].name == name) { - tarValue = data[i].value; - } - } - let v = tarValue; - let p = Math.round((tarValue / total) * 100); //占比 - return `${name} (${p}%)`; + textAlign: "center", + x: "48%", + y: "44%", + }, + ], + tooltip: { + trigger: "item", + formatter: function (parms) { + var str = + parms.seriesName + + "
" + + parms.marker + + "" + + parms.data.legendname + + "
" + + "数量：" + + parms.data.value + + "
" + + "占比：" + + parms.percent + + "%"; + return str; + }, + }, + legend: { + type: "scroll", + align: "left", + bottom: "2%", + let:"middle", + textStyle: { + color: "#8C8C8C", + }, + height: 50, + width:300, + formatter: function (name) { + let data = option.series[0].data; + let total = 0; + let tarValue; + for (let i = 0; i < data.length; i++) { + total += data[i].value; + if (data[i].name == name) { + tarValue = data[i].value; } - }, - series: [ - { - name: "标题", - type: "pie", - center: ["50%", "50%"], - // radius: ["55%", "75%"], - radius: [90, 120], - clockwise: false, //饼图的扇区是否是顺时针排布 - avoidLabelOverlap: false, - roseType: "radius", - label: { - normal: { - show: false, - position: "outter", - formatter: function (parms) { - return parms.data.legendname; - }, - }, + } + let v = tarValue; + let p = Math.round((tarValue / total) * 100); //占比 + return `${name} (${p}%)`; + } + }, + series: [ + { + name: "标题", + type: "pie", + center: ["50%", "50%"], + // radius: ["55%", "75%"], + radius: [90, 120], + clockwise: false, //饼图的扇区是否是顺时针排布 + avoidLabelOverlap: false, + roseType: "radius", + label: { + normal: { + show: false, + position: "outter", + formatter: function (parms) { + return parms.data.legendname; }, - labelLine: { - normal: { - length: 5, - length2: 3, - smooth: true, - }, - }, - data: m2R2Data, }, - ], - }; - this.myCharts1 = echarts.init(document.querySelector('#barChartOne')); - this.myCharts1.setOption(option) - // 根据页面大小自动响应图表大小 - // window.addEventListener("resize4", function () { - // myCharts1.resize(); - // }); - // }); + }, + labelLine: { + normal: { + length: 5, + length2: 3, + smooth: true, + }, + }, + data: m2R2Data, + }, + ], + }; + this.myCharts1 = echarts.init(document.querySelector('#barChartOne')); + this.myCharts1.setOption(option) + // 根据页面大小自动响应图表大小 + // window.addEventListener("resize4", function () { + // myCharts1.resize(); + // }); }, changDate2(){ this.InitEChartsTwo() @@ -355,786 +398,779 @@ export default { }, InitEChartsTwo() { console.log(this.dateRange2) - var chartData=[] - // getProportionOfOrderTypesApi({type:this.type3}).then((response) => { - // chartData = response.data; - 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 chartData=this.informationData.sampleRetention; + var m2R2Data = [] + var sumNum = 0 + 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" }, + } + } + 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 m2R2Data = [ + // { + // value: 310, + // legendname: "合格", + // name: "合格 310", + // itemStyle: { color: "#5085f2" }, + // }, + // { + // value: 335, + // legendname: "不合格", + // name: "不合格 335", + // itemStyle: { color: "#fdb301" }, + // } + // ]; - var option = { - title: [ - { - text: "留样总数", - subtext: sumNum + "个", - textStyle: { - fontSize: 20, - color: "black", - }, - subtextStyle: { - fontSize: 20, - color: "black", - }, - textAlign: "center", - x: "48%", - y: "44%", - }, - ], - tooltip: { - trigger: "item", - formatter: function (parms) { - var str = - parms.seriesName + - "
" + - parms.marker + - "" + - parms.data.legendname + - "
" + - "数量：" + - parms.data.value + - "
" + - "占比：" + - parms.percent + - "%"; - return str; - }, + var option = { + title: [ + { + text: "留样总数", + subtext: sumNum + "个", + textStyle: { + fontSize: 20, + color: "black", }, - legend: { - type: "scroll", - align: "left", - bottom: "2%", - let:"middle", - textStyle: { - color: "#8C8C8C", - }, - height: 50, - width:300, - formatter: function (name) { - let data = option.series[0].data; - let total = 0; - let tarValue; - for (let i = 0; i < data.length; i++) { - total += data[i].value; - if (data[i].name == name) { - tarValue = data[i].value; - } - } - let v = tarValue; - let p = Math.round((tarValue / total) * 100); //占比 - return `${name} (${p}%)`; + subtextStyle: { + fontSize: 20, + color: "black", + }, + textAlign: "center", + x: "48%", + y: "44%", + }, + ], + tooltip: { + trigger: "item", + formatter: function (parms) { + var str = + parms.seriesName + + "
" + + parms.marker + + "" + + parms.data.legendname + + "
" + + "数量：" + + parms.data.value + + "
" + + "占比：" + + parms.percent + + "%"; + return str; + }, + }, + legend: { + type: "scroll", + align: "left", + bottom: "2%", + let:"middle", + textStyle: { + color: "#8C8C8C", + }, + height: 50, + width:300, + formatter: function (name) { + let data = option.series[0].data; + let total = 0; + let tarValue; + for (let i = 0; i < data.length; i++) { + total += data[i].value; + if (data[i].name == name) { + tarValue = data[i].value; } - }, - series: [ - { - name: "标题", - type: "pie", - center: ["50%", "50%"], - radius: ["55%", "75%"], - clockwise: false, //饼图的扇区是否是顺时针排布 - avoidLabelOverlap: false, - label: { - normal: { - show: false, - position: "outter", - formatter: function (parms) { - return parms.data.legendname; - }, - }, + } + let v = tarValue; + let p = Math.round((tarValue / total) * 100); //占比 + return `${name} (${p}%)`; + } + }, + series: [ + { + name: "标题", + type: "pie", + center: ["50%", "50%"], + radius: ["55%", "75%"], + clockwise: false, //饼图的扇区是否是顺时针排布 + avoidLabelOverlap: false, + label: { + normal: { + show: false, + position: "outter", + formatter: function (parms) { + return parms.data.legendname; }, - - labelLine: { - normal: { - length: 5, - length2: 3, - smooth: true, - }, - }, - data: m2R2Data, }, - ], - }; - this.myCharts2 = echarts.init(document.querySelector('#barChartTwo')); - this.myCharts2.setOption(option) - // 根据页面大小自动响应图表大小 - // window.addEventListener("resize4", function () { - // myCharts2.resize(); - // }); - // }); + }, + + labelLine: { + normal: { + length: 5, + length2: 3, + smooth: true, + }, + }, + data: m2R2Data, + }, + ], + }; + this.myCharts2 = echarts.init(document.querySelector('#barChartTwo')); + this.myCharts2.setOption(option) + // 根据页面大小自动响应图表大小 + // window.addEventListener("resize4", function () { + // myCharts2.resize(); + // }); }, InitEChartsThree() { var getName = []; var getValue = []; - var chartData=[] - getThisMonthSDishSalesRankingApi().then((response) => { - chartData = response.data; - chartData.forEach((item,index)=>{ - getName.push(item.name) - getValue.push(item.num) - }) - var max = Math.max.apply(null, getValue); - var getMax = []; - for (var i = 0; i < getName.length; i++) { - getMax.push(max+20); - } - var option = { - backgroundColor: "#fff", - grid: { - left: "10%", - right: "2%", - bottom: "2%", - top: "10%", - containLabel: true, - }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "none", + var chartData = this.informationData.employeeViolation; + chartData.forEach((item,index)=>{ + getName.push(item.name) + getValue.push(item.count) + }) + var max = Math.max.apply(null, getValue); + var getMax = []; + for (var i = 0; i < getName.length; i++) { + getMax.push(max+20); + } + var option = { + backgroundColor: "#fff", + grid: { + left: "10%", + right: "2%", + bottom: "2%", + top: "10%", + containLabel: true, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + formatter: function (params) { + return params[0].name + " : " + params[0].value; + }, + }, + xAxis: { + show: false, + type: "value", + }, + yAxis: [ + { + type: "category", + inverse: true, + offset: 100, + axisLabel: { + show: true, + align: "left", + textStyle: { + color: "#66cc00", }, - formatter: function (params) { - return params[0].name + " : " + params[0].value; + formatter: function (value, index) { + var num = ""; + var str = ""; + var no = "NO."; + num = index + 1; + if (index === 0) { + str = " {num1|" + num + "} {title1|" + value + "}"; + } else if (index === 1) { + str = " {num2|" + num + "} {title2|" + value + "}"; + } else if (index === 2) { + str = " {num3|" + num + "} {title3|" + value + "}"; + } else { + str = " {num|" + num + "} {title|" + value + "}"; + } + return str; + }, + rich: { + no: { + color: "#333", + fontSize: 14, + }, + no1: { + color: "#333", + fontSize: 14, + }, + no2: { + color: "#333", + fontSize: 14, + }, + no3: { + color: "#333", + fontSize: 14, + }, + num: { + color: "#fff", + backgroundColor: "#5281F8", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + num1: { + color: "#fff", + backgroundColor: "#EDA54F", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + num2: { + color: "#fff", + backgroundColor: "#EDA54F", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + num3: { + color: "#fff", + backgroundColor: "#EDA54F", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + title: { + color: "#333333", + }, + title1: { + color: "#333333", + }, + title2: { + color: "#333333", + }, + title3: { + color: "#333333", + }, }, }, - xAxis: { + splitLine: { show: false, - type: "value", }, - yAxis: [ - { - type: "category", - inverse: true, - offset: 100, - axisLabel: { - show: true, - align: "left", - textStyle: { - color: "#66cc00", - }, - formatter: function (value, index) { - var num = ""; - var str = ""; - var no = "NO."; - num = index + 1; - if (index === 0) { - str = " {num1|" + num + "} {title1|" + value + "}"; - } else if (index === 1) { - str = " {num2|" + num + "} {title2|" + value + "}"; - } else if (index === 2) { - str = " {num3|" + num + "} {title3|" + value + "}"; - } else { - str = " {num|" + num + "} {title|" + value + "}"; - } - return str; - }, - rich: { - no: { - color: "#333", - fontSize: 14, - }, - no1: { - color: "#333", - fontSize: 14, - }, - no2: { - color: "#333", - fontSize: 14, - }, - no3: { - color: "#333", - fontSize: 14, - }, - num: { - color: "#fff", - backgroundColor: "#5281F8", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - num1: { - color: "#fff", - backgroundColor: "#EDA54F", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - num2: { - color: "#fff", - backgroundColor: "#EDA54F", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - num3: { - color: "#fff", - backgroundColor: "#EDA54F", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - title: { - color: "#333333", - }, - title1: { - color: "#333333", - }, - title2: { - color: "#333333", - }, - title3: { - color: "#333333", - }, - }, - }, - splitLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLine: { - show: false, - }, - data: getName, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + data: getName, + }, + { + type: "category", + inverse: true, + offset: -50, + axisTick: "none", + axisLine: "none", + show: true, + axisLabel: { + interval: 0, + color: "#666", + align: "left", + margin: 20, + fontSize: 13, + formatter: function (value, index) { + return ( + getValue[index] + ); }, - { - type: "category", - inverse: true, - offset: -50, - axisTick: "none", - axisLine: "none", - show: true, - axisLabel: { - interval: 0, - color: "#666", - align: "left", - margin: 20, - fontSize: 13, - formatter: function (value, index) { - return ( - getValue[index] - ); + }, + data: getValue, + }, + ], + series: [ + { + name: "值", + type: "bar", + zlevel: 1, + itemStyle: { + normal: { + barBorderRadius: 30, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "rgb(0, 217, 203, 1)", }, - }, - data: getValue, - }, - ], - series: [ - { - name: "值", - type: "bar", - zlevel: 1, - itemStyle: { - normal: { - barBorderRadius: 30, - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - offset: 0, - color: "rgb(0, 217, 203, 1)", - }, - { - offset: 1, - color: "rgb(0, 217, 203, 1)", - }, - ]), + { + offset: 1, + color: "rgb(0, 217, 203, 1)", }, - }, - barWidth: 14, - data: getValue, + ]), }, - { - name: "背景", - type: "bar", - barWidth: 14, - barGap: "-100%", - data: getMax, - itemStyle: { - normal: { - color: "rgba(242, 252, 250, 1)", - barBorderRadius: 30, - }, - }, + }, + barWidth: 14, + data: getValue, + }, + { + name: "背景", + type: "bar", + barWidth: 14, + barGap: "-100%", + data: getMax, + itemStyle: { + normal: { + color: "rgba(242, 252, 250, 1)", + barBorderRadius: 30, }, - ], - }; - this.myCharts3 = echarts.init(document.querySelector('#lineChartThree')); - this.myCharts3.setOption(option) - // // 根据页面大小自动响应图表大小 - // window.addEventListener("resize3", function () { - // myCharts3.resize(); - // }); - }); + }, + }, + ], + }; + this.myCharts3 = echarts.init(document.querySelector('#lineChartThree')); + this.myCharts3.setOption(option) + // // 根据页面大小自动响应图表大小 + // window.addEventListener("resize3", function () { + // myCharts3.resize(); + // }); }, InitEChartsFour() { var getName = []; var getValue = []; - var chartData=[] - getThisMonthSDishSalesRankingApi().then((response) => { - chartData = response.data; - chartData.forEach((item,index)=>{ - getName.push(item.name) - getValue.push(item.num) - }) - var max = Math.max.apply(null, getValue); - var getMax = []; - for (var i = 0; i < getName.length; i++) { - getMax.push(max+20); - } - var option = { - backgroundColor: "#fff", - grid: { - left: "10%", - right: "2%", - bottom: "2%", - top: "10%", - containLabel: true, - }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "none", + var chartData = this.informationData.environmentalWarning; + chartData.forEach((item,index)=>{ + getName.push(item.name) + getValue.push(item.count) + }) + var max = Math.max.apply(null, getValue); + var getMax = []; + for (var i = 0; i < getName.length; i++) { + getMax.push(max+20); + } + var option = { + backgroundColor: "#fff", + grid: { + left: "10%", + right: "2%", + bottom: "2%", + top: "10%", + containLabel: true, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + formatter: function (params) { + return params[0].name + " : " + params[0].value; + }, + }, + xAxis: { + show: false, + type: "value", + }, + yAxis: [ + { + type: "category", + inverse: true, + offset: 160, + axisLabel: { + show: true, + align: "left", + textStyle: { + color: "#66cc00", }, - formatter: function (params) { - return params[0].name + " : " + params[0].value; + formatter: function (value, index) { + var num = ""; + var str = ""; + var no = "NO."; + num = index + 1; + if (index === 0) { + str = " {num1|" + num + "} {title1|" + value + "}"; + } else if (index === 1) { + str = " {num2|" + num + "} {title2|" + value + "}"; + } else if (index === 2) { + str = " {num3|" + num + "} {title3|" + value + "}"; + } else { + str = " {num|" + num + "} {title|" + value + "}"; + } + return str; + }, + rich: { + no: { + color: "#333", + fontSize: 14, + }, + no1: { + color: "#333", + fontSize: 14, + }, + no2: { + color: "#333", + fontSize: 14, + }, + no3: { + color: "#333", + fontSize: 14, + }, + num: { + color: "#fff", + backgroundColor: "#5281F8", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + num1: { + color: "#fff", + backgroundColor: "#EDA54F", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + num2: { + color: "#fff", + backgroundColor: "#EDA54F", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + num3: { + color: "#fff", + backgroundColor: "#EDA54F", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + title: { + color: "#333333", + }, + title1: { + color: "#333333", + }, + title2: { + color: "#333333", + }, + title3: { + color: "#333333", + }, }, }, - xAxis: { + splitLine: { show: false, - type: "value", }, - yAxis: [ - { - type: "category", - inverse: true, - offset: 100, - axisLabel: { - show: true, - align: "left", - textStyle: { - color: "#66cc00", - }, - formatter: function (value, index) { - var num = ""; - var str = ""; - var no = "NO."; - num = index + 1; - if (index === 0) { - str = " {num1|" + num + "} {title1|" + value + "}"; - } else if (index === 1) { - str = " {num2|" + num + "} {title2|" + value + "}"; - } else if (index === 2) { - str = " {num3|" + num + "} {title3|" + value + "}"; - } else { - str = " {num|" + num + "} {title|" + value + "}"; - } - return str; - }, - rich: { - no: { - color: "#333", - fontSize: 14, - }, - no1: { - color: "#333", - fontSize: 14, - }, - no2: { - color: "#333", - fontSize: 14, - }, - no3: { - color: "#333", - fontSize: 14, - }, - num: { - color: "#fff", - backgroundColor: "#5281F8", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - num1: { - color: "#fff", - backgroundColor: "#EDA54F", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - num2: { - color: "#fff", - backgroundColor: "#EDA54F", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - num3: { - color: "#fff", - backgroundColor: "#EDA54F", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - title: { - color: "#333333", - }, - title1: { - color: "#333333", - }, - title2: { - color: "#333333", - }, - title3: { - color: "#333333", - }, - }, - }, - splitLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLine: { - show: false, - }, - data: getName, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + data: getName, + }, + { + type: "category", + inverse: true, + offset: -50, + axisTick: "none", + axisLine: "none", + show: true, + axisLabel: { + interval: 0, + color: "#666", + align: "left", + margin: 20, + fontSize: 13, + formatter: function (value, index) { + return ( + getValue[index] + ); }, - { - type: "category", - inverse: true, - offset: -50, - axisTick: "none", - axisLine: "none", - show: true, - axisLabel: { - interval: 0, - color: "#666", - align: "left", - margin: 20, - fontSize: 13, - formatter: function (value, index) { - return ( - getValue[index] - ); + }, + data: getValue, + }, + ], + series: [ + { + name: "值", + type: "bar", + zlevel: 1, + itemStyle: { + normal: { + barBorderRadius: 30, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "rgb(255, 179, 63, 1)", }, - }, - data: getValue, - }, - ], - series: [ - { - name: "值", - type: "bar", - zlevel: 1, - itemStyle: { - normal: { - barBorderRadius: 30, - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - offset: 0, - color: "rgb(255, 179, 63, 1)", - }, - { - offset: 1, - color: "rgb(255, 179, 63, 1)", - }, - ]), + { + offset: 1, + color: "rgb(255, 179, 63, 1)", }, - }, - barWidth: 14, - data: getValue, + ]), }, - { - name: "背景", - type: "bar", - barWidth: 14, - barGap: "-100%", - data: getMax, - itemStyle: { - normal: { - color: "rgba(255, 247, 234, 1)", - barBorderRadius: 30, - }, - }, + }, + barWidth: 14, + data: getValue, + }, + { + name: "背景", + type: "bar", + barWidth: 14, + barGap: "-100%", + data: getMax, + itemStyle: { + normal: { + color: "rgba(255, 247, 234, 1)", + barBorderRadius: 30, }, - ], - }; - this.myCharts4 = echarts.init(document.querySelector('#lineChartFour')); - this.myCharts4.setOption(option) - // // 根据页面大小自动响应图表大小 - // window.addEventListener("resize3", function () { - // myCharts4.resize(); - // }); - }); + }, + }, + ], + }; + this.myCharts4 = echarts.init(document.querySelector('#lineChartFour')); + this.myCharts4.setOption(option) + // // 根据页面大小自动响应图表大小 + // window.addEventListener("resize3", function () { + // myCharts4.resize(); + // }); }, InitEChartsFive() { var getName = []; var getValue = []; - var chartData=[] - getThisMonthSDishSalesRankingApi().then((response) => { - chartData = response.data; - chartData.forEach((item,index)=>{ - getName.push(item.name) - getValue.push(item.num) - }) - var max = Math.max.apply(null, getValue); - var getMax = []; - for (var i = 0; i < getName.length; i++) { - getMax.push(max+20); - } - var option = { - backgroundColor: "#fff", - grid: { - left: "10%", - right: "2%", - bottom: "2%", - top: "10%", - containLabel: true, - }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "none", + var chartData = this.informationData.environmentalAlarm; + chartData.forEach((item,index)=>{ + getName.push(item.name) + getValue.push(item.count) + }) + var max = Math.max.apply(null, getValue); + var getMax = []; + for (var i = 0; i < getName.length; i++) { + getMax.push(max+20); + } + var option = { + backgroundColor: "#fff", + grid: { + left: "10%", + right: "2%", + bottom: "2%", + top: "10%", + containLabel: true, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + formatter: function (params) { + return params[0].name + " : " + params[0].value; + }, + }, + xAxis: { + show: false, + type: "value", + }, + yAxis: [ + { + type: "category", + inverse: true, + offset: 120, + axisLabel: { + show: true, + align: "left", + textStyle: { + color: "#66cc00", }, - formatter: function (params) { - return params[0].name + " : " + params[0].value; + formatter: function (value, index) { + var num = ""; + var str = ""; + var no = "NO."; + num = index + 1; + if (index === 0) { + str = " {num1|" + num + "} {title1|" + value + "}"; + } else if (index === 1) { + str = " {num2|" + num + "} {title2|" + value + "}"; + } else if (index === 2) { + str = " {num3|" + num + "} {title3|" + value + "}"; + } else { + str = " {num|" + num + "} {title|" + value + "}"; + } + return str; + }, + rich: { + no: { + color: "#333", + fontSize: 14, + }, + no1: { + color: "#333", + fontSize: 14, + }, + no2: { + color: "#333", + fontSize: 14, + }, + no3: { + color: "#333", + fontSize: 14, + }, + num: { + color: "#fff", + backgroundColor: "#5281F8", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + num1: { + color: "#fff", + backgroundColor: "#EDA54F", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + num2: { + color: "#fff", + backgroundColor: "#EDA54F", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + num3: { + color: "#fff", + backgroundColor: "#EDA54F", + width: 20, + height: 20, + fontSize: 14, + align: "center", + borderRadius: 100, + }, + title: { + color: "#333333", + }, + title1: { + color: "#333333", + }, + title2: { + color: "#333333", + }, + title3: { + color: "#333333", + }, }, }, - xAxis: { + splitLine: { show: false, - type: "value", }, - yAxis: [ - { - type: "category", - inverse: true, - offset: 100, - axisLabel: { - show: true, - align: "left", - textStyle: { - color: "#66cc00", - }, - formatter: function (value, index) { - var num = ""; - var str = ""; - var no = "NO."; - num = index + 1; - if (index === 0) { - str = " {num1|" + num + "} {title1|" + value + "}"; - } else if (index === 1) { - str = " {num2|" + num + "} {title2|" + value + "}"; - } else if (index === 2) { - str = " {num3|" + num + "} {title3|" + value + "}"; - } else { - str = " {num|" + num + "} {title|" + value + "}"; - } - return str; - }, - rich: { - no: { - color: "#333", - fontSize: 14, - }, - no1: { - color: "#333", - fontSize: 14, - }, - no2: { - color: "#333", - fontSize: 14, - }, - no3: { - color: "#333", - fontSize: 14, - }, - num: { - color: "#fff", - backgroundColor: "#5281F8", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - num1: { - color: "#fff", - backgroundColor: "#EDA54F", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - num2: { - color: "#fff", - backgroundColor: "#EDA54F", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - num3: { - color: "#fff", - backgroundColor: "#EDA54F", - width: 20, - height: 20, - fontSize: 14, - align: "center", - borderRadius: 100, - }, - title: { - color: "#333333", - }, - title1: { - color: "#333333", - }, - title2: { - color: "#333333", - }, - title3: { - color: "#333333", - }, - }, - }, - splitLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLine: { - show: false, - }, - data: getName, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + data: getName, + }, + { + type: "category", + inverse: true, + offset: -50, + axisTick: "none", + axisLine: "none", + show: true, + axisLabel: { + interval: 0, + color: "#666", + align: "left", + margin: 20, + fontSize: 13, + formatter: function (value, index) { + return ( + getValue[index] + ); }, - { - type: "category", - inverse: true, - offset: -50, - axisTick: "none", - axisLine: "none", - show: true, - axisLabel: { - interval: 0, - color: "#666", - align: "left", - margin: 20, - fontSize: 13, - formatter: function (value, index) { - return ( - getValue[index] - ); + }, + data: getValue, + }, + ], + series: [ + { + name: "值", + type: "bar", + zlevel: 1, + itemStyle: { + normal: { + barBorderRadius: 30, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "rgb(255, 97, 97, 1)", }, - }, - data: getValue, - }, - ], - series: [ - { - name: "值", - type: "bar", - zlevel: 1, - itemStyle: { - normal: { - barBorderRadius: 30, - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - offset: 0, - color: "rgb(255, 97, 97, 1)", - }, - { - offset: 1, - color: "rgb(255, 97, 97, 1)", - }, - ]), + { + offset: 1, + color: "rgb(255, 97, 97, 1)", }, - }, - barWidth: 14, - data: getValue, + ]), }, - { - name: "背景", - type: "bar", - barWidth: 14, - barGap: "-100%", - data: getMax, - itemStyle: { - normal: { - color: "rgba(255, 238, 238, 1)", - barBorderRadius: 30, - }, - }, + }, + barWidth: 14, + data: getValue, + }, + { + name: "背景", + type: "bar", + barWidth: 14, + barGap: "-100%", + data: getMax, + itemStyle: { + normal: { + color: "rgba(255, 238, 238, 1)", + barBorderRadius: 30, }, - ], - }; - this.myCharts5 = echarts.init(document.querySelector('#lineChartFive')); - this.myCharts5.setOption(option) - // // 根据页面大小自动响应图表大小 - // window.addEventListener("resize3", function () { - // myCharts5.resize(); - // }); - }); + }, + }, + ], + }; + this.myCharts5 = echarts.init(document.querySelector('#lineChartFive')); + this.myCharts5.setOption(option) + // // 根据页面大小自动响应图表大小 + // 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