diff --git a/src/views/kitchen/dashboard/SubGroup.vue b/src/views/kitchen/dashboard/SubGroup.vue index ecdbea33..73adfd33 100644 --- a/src/views/kitchen/dashboard/SubGroup.vue +++ b/src/views/kitchen/dashboard/SubGroup.vue @@ -5,24 +5,25 @@
健康证管理
-
-
正常
-
{{topData.num1}}
+
+
正常
+
+ +
-
-
缺失
-
{{topData.num2}}
+
+
缺失
+
-
-
临期
-
{{topData.num3}}
+
+
临期
+
-
-
过期
-
{{topData.num4}}
+
+
过期
+
-
- +
@@ -31,20 +32,19 @@
健康证管理
-
-
环境报警记录
-
{{topData.num1}}
+
+
环境报警记录
+
-
-
门禁报警记录
-
{{topData.num2}}
+
+
门禁报警记录
+
+
+
+
监控报警记录
+
-
-
监控报警记录
-
{{topData.num3}}
-
-
@@ -119,12 +119,28 @@ export default { } .card-panel-num { - font-size: 28px; + font-size: 20px; color: #000; } } - + .sub-panel{ + width: 22%; + height: 60px; + border-left: 3px solid #666; + padding: 4px; + padding-left: 10px; + } + .sub-panel2{ + width: 32%; + height: 60px; + border-left: 3px solid #666; + padding: 4px; + padding-left: 10px; + } + .sub-panel-title{ + font-weight: normal;margin-bottom: 10px; + } } diff --git a/src/views/kitchen/index.vue b/src/views/kitchen/index.vue index d204f746..3f502950 100644 --- a/src/views/kitchen/index.vue +++ b/src/views/kitchen/index.vue @@ -4,71 +4,53 @@ -
-
-
食堂订单及销量趋势
-
- - 近7日 - 近30日 - -
-
-
-
+ - +
+
+
设备状态数据分析
+
+
+
+
+
+
留样数据分析
+
+
+
- - - + + +
+
+ 环境告警 + 查看详情> +
+
+
+ +
@@ -128,6 +110,7 @@ export default { myCharts2:null, myCharts3:null, myCharts4:null, + myCharts5:null, } }, mounted(){ @@ -136,6 +119,7 @@ export default { this.InitEChartsTwo() this.InitEChartsThree() this.InitEChartsFour() + this.InitEChartsFive() window.addEventListener('transitionend', this.$_sidebarResizeHandler) }, methods: { @@ -147,6 +131,7 @@ export default { this.myCharts2.resize(); this.myCharts3.resize(); this.myCharts4.resize(); + this.myCharts5.resize(); }, 500); } }, @@ -161,124 +146,141 @@ export default { this.myCharts1.resize(); }, InitEChartsOne() { - let chartData=[] - // let weekDate=["周一","周二","周三","周四","周五","周六","周日"] - let weekDate=[] - let monthDate = [] - let xDate = [] - let salesData = [] - let orderData = [] - getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => { - chartData = response.data; - chartData.forEach((item,index)=>{ - weekDate.push(item.weekday) - monthDate.push(item.orderDate) - salesData.push(item.salesValue) - orderData.push(item.orderValue) - }) - if(this.type1==1){ - xDate= weekDate - }else{ - xDate = monthDate - } + 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 m2R2Data = [ + { + value: 240, + legendname: "正常", + name: "正常 240", + itemStyle: { color: "#69ADF8" }, + }, + { + value: 120, + legendname: "离线", + name: "离线 120", + itemStyle: { color: "#F3A56D" }, + } + ]; + var option = { - // title: { - // text: "食品经营情况", - // }, - tooltip: { - trigger: "axis", - }, - legend: { - data: ["销售额", "订单量"], - icon:"rect", - bottom: "0%", - }, - grid: { - left: "5%", - right: "5%", - top: "20%", - bottom: "10%", - containLabel: true, - }, - color: ["#4FA7FF", "#58F5CE"], - calculable: true, - xAxis: [ + title: [ { - type: "category", - boundaryGap: false, - data: xDate, + text: sumNum + "个", + subtext: "设备总数", + textStyle: { + fontSize: 22, + color: "black", + }, + subtextStyle: { + fontSize: 14, + color: "black", + }, + textAlign: "center", + x: "48%", + y: "44%", }, ], - yAxis: { - name: "销售额/订单量", - type: "value", + 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 }, series: [ { - name: "销售额", - type: "line", - areaStyle: { + name: "标题", + type: "pie", + center: ["50%", "50%"], + // radius: ["55%", "75%"], + radius: [90, 120], + clockwise: false, //饼图的扇区是否是顺时针排布 + avoidLabelOverlap: false, + roseType: "radius", + label: { normal: { - type: "default", - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(79, 167, 255, 1)", - }, - { - offset: 1, - color: "rgba(79, 167, 255, 1)", - }, - ], - false - ), + show: false, + position: "outter", + formatter: function (parms) { + return parms.data.legendname; + }, }, }, - smooth: true, - itemStyle: { - normal: { areaStyle: { type: "default" } }, - }, - data: salesData, - }, - { - name: "订单量", - type: "line", - areaStyle: { + labelLine: { normal: { - type: "default", - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(92, 255, 214, 1)", - }, - { - offset: 1, - color: "rgba(92, 255, 214, 1)", - }, - ], - false - ), + length: 5, + length2: 3, + smooth: true, }, }, - smooth: true, - itemStyle: { normal: { areaStyle: { type: "default" } } }, - data: orderData, + data: m2R2Data, }, ], - }; - this.myCharts1 = echarts.init(document.querySelector('#lineChartOne')); - this.myCharts1.setOption(option) - }); + }; + this.myCharts1 = echarts.init(document.querySelector('#barChartOne')); + this.myCharts1.setOption(option) + // 根据页面大小自动响应图表大小 + // window.addEventListener("resize4", function () { + // myCharts1.resize(); + // }); + // }); }, changType2(e){ console.log(this.type2) @@ -286,124 +288,140 @@ export default { this.myCharts2.resize(); }, InitEChartsTwo() { - let chartData=[] - // let weekDate=["周一","周二","周三","周四","周五","周六","周日"] - let weekDate=[] - let monthDate = [] - let xDate = [] - let salesData = [] - let orderData = [] - getSupermarketOrderAndSalesTrendApi({type:this.type2}).then((response) => { - chartData = response.data; - chartData.forEach((item,index)=>{ - weekDate.push(item.weekday) - monthDate.push(item.orderDate) - salesData.push(item.salesValue) - orderData.push(item.orderValue) - }) - if(this.type2==1){ - xDate= weekDate - }else{ - xDate = monthDate - } + 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 m2R2Data = [ + { + value: 310, + legendname: "合格", + name: "合格 310", + itemStyle: { color: "#5085f2" }, + }, + { + value: 335, + legendname: "不合格", + name: "不合格 335", + itemStyle: { color: "#fdb301" }, + } + ]; + var option = { - // title: { - // text: "食品经营情况", - // }, - tooltip: { - trigger: "axis", - }, - legend: { - data: ["销售额", "订单量"], - icon:"rect", - bottom: "0%", - }, - grid: { - left: "5%", - right: "5%", - top: "20%", - bottom: "10%", - containLabel: true, - }, - color: ["#4FA7FF", "#58F5CE"], - calculable: true, - xAxis: [ + title: [ { - type: "category", - boundaryGap: false, - data: xDate, + text: "留样总数", + subtext: sumNum + "个", + textStyle: { + fontSize: 20, + color: "black", + }, + subtextStyle: { + fontSize: 20, + color: "black", + }, + textAlign: "center", + x: "48%", + y: "44%", }, ], - yAxis: { - name: "销售额/订单量", - type: "value", + 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 }, series: [ { - name: "销售额", - type: "line", - areaStyle: { + name: "标题", + type: "pie", + center: ["50%", "50%"], + radius: ["55%", "75%"], + clockwise: false, //饼图的扇区是否是顺时针排布 + avoidLabelOverlap: false, + label: { normal: { - type: "default", - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(79, 167, 255, 1)", - }, - { - offset: 1, - color: "rgba(79, 167, 255, 1)", - }, - ], - false - ), + show: false, + position: "outter", + formatter: function (parms) { + return parms.data.legendname; + }, }, }, - smooth: true, - itemStyle: { - normal: { areaStyle: { type: "default" } }, - }, - data: salesData, - }, - { - name: "订单量", - type: "line", - areaStyle: { + + labelLine: { normal: { - type: "default", - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(92, 255, 214, 1)", - }, - { - offset: 1, - color: "rgba(92, 255, 214, 1)", - }, - ], - false - ), + length: 5, + length2: 3, + smooth: true, }, }, - smooth: true, - itemStyle: { normal: { areaStyle: { type: "default" } } }, - data: orderData, + data: m2R2Data, }, ], - }; - this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo')); + }; + this.myCharts2 = echarts.init(document.querySelector('#barChartTwo')); this.myCharts2.setOption(option) - }); + // 根据页面大小自动响应图表大小 + // window.addEventListener("resize4", function () { + // myCharts2.resize(); + // }); + // }); }, InitEChartsThree() { var getName = []; @@ -580,11 +598,11 @@ export default { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, - color: "rgb(0, 111, 104, 1)", + color: "rgb(0, 217, 203, 1)", }, { offset: 1, - color: "rgb(0, 111, 104, 1)", + color: "rgb(0, 217, 203, 1)", }, ]), }, @@ -600,13 +618,13 @@ export default { data: getMax, itemStyle: { normal: { - color: "rgba(224, 233, 255, 1)", + color: "rgba(242, 252, 250, 1)", barBorderRadius: 30, }, }, }, ], - }; + }; this.myCharts3 = echarts.init(document.querySelector('#lineChartThree')); this.myCharts3.setOption(option) // // 根据页面大小自动响应图表大小 @@ -614,153 +632,427 @@ export default { // myCharts3.resize(); // }); }); - }, - changType3(e){ - console.log(this.type3) - this.InitEChartsFour() - this.myCharts4.resize(); - }, + }, InitEChartsFour() { + var getName = []; + var getValue = []; var chartData=[] - getProportionOfOrderTypesApi({type:this.type3}).then((response) => { + getThisMonthSDishSalesRankingApi().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 m2R2Data = [ - // { - // value: 310, - // legendname: "种类02", - // name: "种类02 310", - // itemStyle: { color: "#5085f2" }, - // }, - // { - // value: 335, - // legendname: "种类05", - // name: "种类05 335", - // itemStyle: { color: "#f2719a" }, - // }, - // { - // value: 335, - // legendname: "种类08", - // name: "种类08 335", - // itemStyle: { color: "#fdb301" }, - // } - // ]; - + 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 = { - title: [ - { - text: "订单总数", - subtext: sumNum + "个", - textStyle: { - fontSize: 20, - color: "black", - }, - subtextStyle: { - fontSize: 20, - color: "black", - }, - textAlign: "center", - x: "34.5%", - y: "44%", - }, - ], + backgroundColor: "#fff", + grid: { + left: "10%", + right: "2%", + bottom: "2%", + top: "10%", + containLabel: true, + }, tooltip: { - trigger: "item", - formatter: function (parms) { - var str = - parms.seriesName + - "
" + - parms.marker + - "" + - parms.data.legendname + - "
" + - "数量：" + - parms.data.value + - "
" + - "占比：" + - parms.percent + - "%"; - return str; + trigger: "axis", + axisPointer: { + type: "none", + }, + formatter: function (params) { + return params[0].name + " : " + params[0].value; }, }, - legend: { - type: "scroll", - orient: "vertical", - left: "70%", - align: "left", - top: "middle", - textStyle: { - color: "#8C8C8C", - }, - height: 250, + xAxis: { + show: false, + type: "value", }, - series: [ + yAxis: [ { - name: "标题", - type: "pie", - center: ["35%", "50%"], - radius: ["65%", "90%"], - clockwise: false, //饼图的扇区是否是顺时针排布 - avoidLabelOverlap: false, - label: { - normal: { - show: false, - position: "outter", - formatter: function (parms) { - return parms.data.legendname; + 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", }, }, }, - labelLine: { - normal: { - length: 5, - length2: 3, - smooth: true, + splitLine: { + show: false, + }, + 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] + ); + }, + }, + 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)", + }, + ]), + }, + }, + barWidth: 14, + data: getValue, + }, + { + name: "背景", + type: "bar", + barWidth: 14, + barGap: "-100%", + data: getMax, + itemStyle: { + normal: { + color: "rgba(255, 247, 234, 1)", + barBorderRadius: 30, }, }, - data: m2R2Data, }, ], }; - this.myCharts4 = echarts.init(document.querySelector('#barChartFour')); + this.myCharts4 = echarts.init(document.querySelector('#lineChartFour')); this.myCharts4.setOption(option) - // 根据页面大小自动响应图表大小 - // window.addEventListener("resize4", function () { + // // 根据页面大小自动响应图表大小 + // 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", + }, + 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 (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, + }, + { + 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)", + }, + { + 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, + }, + }, + }, + ], + }; + this.myCharts5 = echarts.init(document.querySelector('#lineChartFive')); + this.myCharts5.setOption(option) + // // 根据页面大小自动响应图表大小 + // window.addEventListener("resize3", function () { + // myCharts5.resize(); + // }); + }); + }, } }