From 9201d5e6b5e415a297e21eaac9644fcaaee95524 Mon Sep 17 00:00:00 2001 From: zhangqun <179111901@qq.com> Date: Fri, 9 Dec 2022 18:00:26 +0800 Subject: [PATCH] =?UTF-8?q?mock=E7=9C=9F=E6=98=AF=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/source/total.js | 143 +++++- src/views/garden/generalizePatternNew.vue | 551 +++++++++++----------- 2 files changed, 394 insertions(+), 300 deletions(-) diff --git a/src/api/source/total.js b/src/api/source/total.js index c608e3b..26d0d0a 100644 --- a/src/api/source/total.js +++ b/src/api/source/total.js @@ -474,11 +474,27 @@ export const getPlaneInfo = (date) => { }; //访客 export const getGardenAndApprove = (date) => { - return request({ - url: "/epiHome/epidemicback/getGardenAndApprove", - method: "get", - params: { date }, - }); + if (isMock) { + return new Promise((reslove) => { + reslove({ + "success": true, + "message": "获取入园、申请人数成功", + "code": 200, + "result": { + "Garden": 128, + "Approve": 88 + }, + "timestamp": 1670575547152 + }) + }) + } + else { + return request({ + url: "/epiHome/getGardenAndApprove", + method: "get", + params: { date }, + }); + } }; /** * 运行保障 @@ -2162,35 +2178,112 @@ export const getPersonByJ = (date) => { }; //当日报修情况 export const getRepair = (date) => { - return request({ - url: "/epiHome/epidemicback/getRepair", - method: "get", - params: { date }, - }); + if (isMock) { + return new Promise((reslove) => { + reslove({ + "success": true, + "message": "获取当日保修情况成功", + "code": 200, + "result": { + "legacy": 15, + "escalation": 61, + "complete": 53 + }, + "timestamp": 1670575462396 + }) + }) + } + else { + return request({ + url: "/epiHome/getRepair", + method: "get", + params: { date }, + }); + } }; //共享资源 export const getShare = (date) => { - return request({ - url: "/epiHome/epidemicback/getShare", - method: "get", - params: { date }, - }); + if (isMock) { + return new Promise((reslove) => { + reslove({ + "success": true, + "message": "获取共享资源成功", + "code": 200, + "result": { + "underCar": 4, + "car": 5, + "washCar": 2, + "pile": 5, + "exercise": 5, + "meeting": 7 + }, + "timestamp": 1670575582418 + }) + }) + } + else { + return request({ + url: "/epiHome/getShare", + method: "get", + params: { date }, + }); + } }; //车辆资源 export const getCarInfo = (date) => { - return request({ - url: "/epiHome/epidemicback/getCarInfo", - method: "get", - params: { date }, - }); + if (isMock) { + return new Promise((reslove) => { + reslove({ + "success": true, + "message": "获取车辆情况总人数成功", + "code": 200, + "result": { + "胶州": { + "7座及以下": 10, + "17-20座": 3, + "52座": 1 + }, + "流亭": { + "7座及以下": 1 + } + }, + "timestamp": 1669703427438 + }) + }) + } + else { + return request({ + url: "/epiHome/getCarInfo", + method: "get", + params: { date }, + }); + } }; //今日就餐情况 export const getGardenEat = (date) => { - return request({ - url: "/epiHome/epidemicback/getGardenEat", - method: "get", - params: { date }, - }); + if (isMock) { + return new Promise((reslove) => { + reslove({ + "success": true, + "message": "获取今日园区就餐成功", + "code": 200, + "result": { + "TT": 19, + "Garden": 57, + "XZ": 57, + "YW": 51 + }, + "timestamp": 1670575594189 + }) + }) + } + else { + return request({ + url: "/epiHome/getGardenEat", + method: "get", + params: { date }, + }); + } }; //防疫要求-每日情况//0 正常 1 封闭运行 2 分区域运行 export const getReportByDate = (date) => { diff --git a/src/views/garden/generalizePatternNew.vue b/src/views/garden/generalizePatternNew.vue index 33bb83b..6893f17 100644 --- a/src/views/garden/generalizePatternNew.vue +++ b/src/views/garden/generalizePatternNew.vue @@ -79,14 +79,22 @@
昨日本场{{ planeInfo.placeNum }}
-
- 11% +
+ {{(((planeInfo.placeNum - prePlaneInfo.placeNum) / prePlaneInfo.placeNum) * 100).toFixed(1)}}% +
+
+ {{(((planeInfo.placeNum - prePlaneInfo.placeNum) / prePlaneInfo.placeNum) * 100).toFixed(1)}}%
昨日区域{{ planeInfo.areaNum }}
-
20%
+
+ {{(((planeInfo.areaNum - prePlaneInfo.areaNum) / prePlaneInfo.areaNum) * 100).toFixed(1)}}% +
+
+ {{(((planeInfo.areaNum - prePlaneInfo.areaNum) / prePlaneInfo.areaNum) * 100).toFixed(1)}}% +
@@ -119,7 +127,7 @@
-
1060
+
{{ gardenAndApprove.Garden }}
已入园
@@ -127,7 +135,7 @@
-
205
+
{{ gardenAndApprove.Approve }}
申请次数
@@ -231,35 +239,19 @@
车辆资源
-
+

-
-
4
-
7座及以下
-
-
-
3
-
7座及以下
-
-
-
2
-
7座及以下
+
+
{{value}}
+
{{key}}
-
+

-
-
4
-
7座及以下
-
-
-
3
-
7座及以下
-
-
-
2
-
7座及以下
+
+
{{value}}
+
{{key}}
@@ -280,7 +272,7 @@
防疫要求
- {{reportFangyi.content}} + {{ reportFangyi.content }}
@@ -341,7 +333,10 @@ export default { weatherData: {}, //天气 echartsColors: ["#4A92FF", "#48CB96", "#08B6F3", "#FFC976", "#7D55FF", "#BFBFBF"],//图表色值 currentDate: dateFormat(new Date(), 'yyyy-MM-dd'), + prePlaneInfo:{},//前一天 planeInfo: {},//航班 + gardenAndApprove: {},//访客 + cardInfo:{},//车辆资源 ywDevice: { 电: { code: "0100", @@ -427,18 +422,25 @@ export default { // getCodeByDate(this.currentDate).then((res) => { // }) - //航班 + //航班 - 前一天和今天 + let dd = new Date(this.currentDate); + dd.setDate(dd.getDate() - 1); + getPlaneInfo(dateFormat(new Date(dd), 'yyyy-MM-dd')).then((res) => { + res.result.placeNum = 170; + res.result.areaNum = 600; + this.prePlaneInfo = res.result; + }) getPlaneInfo(this.currentDate).then((res) => { this.planeInfo = res.result; }) //访客 getGardenAndApprove(this.currentDate).then((res) => { - + this.gardenAndApprove = res.result; }) this.getGxzy();//共享资源 //车辆资源 getCarInfo(this.currentDate).then((res) => { - + this.cardInfo = res.result; }) //今日就餐 getGardenEat(this.currentDate).then((res) => { @@ -457,49 +459,47 @@ export default { getGxzy() { //共享资源 getShare(this.currentDate).then((res) => { - - }) - var myChart = this.$echarts.init(document.getElementById("radar1")); - myChart.setOption({ - color: ['#2BF7AC', '#07A6FF'], - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - radar: { - indicator: [ - { name: '车位', max: 6500 }, - { name: '地下车位', max: 16000 }, - { name: '会议情况', max: 30000 }, - { name: '洗车机', max: 38000 }, - { name: '充电桩', max: 52000 }, - { name: '健身器材', max: 25000 } - ], - center: ['50%', '56%'], - radius: 50, - axisName: { - color: 'rgba(255,255,255,0.7)', + let objData = res.result; + var myChart = this.$echarts.init(document.getElementById("radar1")); + myChart.setOption({ + color: ['#2BF7AC', '#07A6FF'], + tooltip: { + trigger: 'item' }, - nameGap: 8 - }, - series: [ - { - name: 'Budget vs spending', - type: 'radar', - areaStyle: { - color: 'rgba(0,255,157,0.3)' - }, - data: [ - { - value: [4200, 3000, 20000, 35000, 50000, 18000], - name: '共享资源' - }, - ] + radar: { + indicator: [ + { name: '车位', max: 257 }, + { name: '地下车位', max: 67 }, + { name: '会议情况', max: 50 }, + { name: '洗车机', max: 50 }, + { name: '充电桩', max: 50 }, + { name: '健身器材', max: 50 } + ], + center: ['50%', '56%'], + radius: 50, + axisName: { + color: 'rgba(255,255,255,0.7)', + }, + nameGap: 8 }, - ] + series: [ + { + name: 'Budget vs spending', + type: 'radar', + areaStyle: { + color: 'rgba(0,255,157,0.3)' + }, + data: [ + { + value: [objData.car, objData.underCar, objData.meeting, objData.washCar, objData.pile, objData.exercise], + name: '共享资源' + }, + ] + }, + ] + }) }) + }, //门禁 getDoor() { @@ -602,244 +602,245 @@ export default { //园区就餐 getJiuCan() { getGardenEat(this.currentDate).then((res) => { - - }) - var myChart = this.$echarts.init(document.getElementById("rightBar3")); - myChart.setOption({ - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - grid: { - top: '10%', - left: '3%', - right: '3%', - bottom: '3%', - containLabel: true - }, - yAxis: [ - { - type: 'category', - axisLine: { - show: true, - lineStyle: { color: "rgba(255,255,255,0.2)" }, - }, - axisTick: { - inside: true, - lineStyle: { color: "rgba(255,255,255,0.2)" }, - }, - axisLabel: { - interval: 0, - color: "rgba(255,255,255,0.7)", - }, - data: ['流亭园区', '行政', '塔台', '业务区运行'], - } - ], - xAxis: [ - { - type: 'value', - splitLine: { show: false }, - axisTick: { - show: true, - inside: true, - length: 3, - lineStyle: { color: "rgba(255,255,255,0.2)" }, - }, - axisLine: { - show: true, - lineStyle: { color: "rgba(255,255,255,0.2)" }, - }, - axisLabel: { - color: "rgba(255,255,255,0.7)", - }, - } - ], - series: [ - { - name: '今日园区就餐', - type: 'bar', - barWidth: 18, - emphasis: { - focus: 'series' - }, - label: { - show: true, - position: 'right', - color: 'rgba(255,255,255,0.8)', - fontFamily: 'Impact', - fontSize: 14 - }, - markPoint: { - symbol: 'triangle', - symbolRotate: 180, - symbolSize: 6, - symbolOffset: [0, -15], + let objData = res.result; + var myChart = this.$echarts.init(document.getElementById("rightBar3")); + myChart.setOption({ + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + top: '10%', + left: '3%', + right: '3%', + bottom: '3%', + containLabel: true + }, + yAxis: [ + { + type: 'category', + axisLine: { + show: true, + lineStyle: { color: "rgba(255,255,255,0.2)" }, + }, + axisTick: { + inside: true, + lineStyle: { color: "rgba(255,255,255,0.2)" }, + }, + axisLabel: { + interval: 0, + color: "rgba(255,255,255,0.7)", + }, + data: ['流亭园区', '行政', '塔台', '业务区运行'], + } + ], + xAxis: [ + { + type: 'value', + splitLine: { show: false }, + axisTick: { + show: true, + inside: true, + length: 3, + lineStyle: { color: "rgba(255,255,255,0.2)" }, + }, + axisLine: { + show: true, + lineStyle: { color: "rgba(255,255,255,0.2)" }, + }, + axisLabel: { + color: "rgba(255,255,255,0.7)", + }, + } + ], + series: [ + { + name: '就餐人员', + type: 'bar', + barWidth: 18, + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: 'right', + color: 'rgba(255,255,255,0.8)', + fontFamily: 'Impact', + fontSize: 14 + }, + markPoint: { + symbol: 'triangle', + symbolRotate: 180, + symbolSize: 6, + symbolOffset: [0, -12], + data: [ + { + xAxis: objData.Garden, yAxis: '流亭园区', itemStyle: { + color: '#48CB96' + } + }, + { + xAxis: objData.XZ, yAxis: '行政', itemStyle: { + color: '#4A92FF' + } + }, + { + xAxis: objData.TT, yAxis: '塔台', itemStyle: { + color: '#7D55FF' + } + }, + { + xAxis: objData.YW, yAxis: '业务区运行', itemStyle: { + color: '#FFC976' + } + } + ] + }, data: [ { - xAxis: 61, yAxis: '流亭园区', itemStyle: { + name: '流亭园区', value: objData.Garden, itemStyle: { color: '#48CB96' } }, { - xAxis: 53, yAxis: '行政', itemStyle: { + name: '行政', value: objData.XZ, itemStyle: { color: '#4A92FF' } }, { - xAxis: 15, yAxis: '塔台', itemStyle: { + name: '塔台', value: objData.TT, itemStyle: { color: '#7D55FF' } }, { - xAxis: 15, yAxis: '业务区运行', itemStyle: { + name: '业务区运行', value: objData.YW, itemStyle: { color: '#FFC976' } - } + }, ] }, - data: [ - { - name: '流亭园区', value: '61', itemStyle: { - color: '#48CB96' - } - }, - { - name: '行政', value: '53', itemStyle: { - color: '#4A92FF' - } - }, - { - name: '塔台', value: '15', itemStyle: { - color: '#7D55FF' - } - }, - { - name: '业务区运行', value: '15', itemStyle: { - color: '#FFC976' - } - }, - ] - }, - ] + ] + }) }) + }, //报修 getBx() { getRepair(this.currentDate).then((res) => { - - }) - var myChart = this.$echarts.init(document.getElementById("rightBar1")); - myChart.setOption({ - color: ['#EB6877', '#4A92FF', '#48CB96'], - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - grid: { - top: '15%', - left: '3%', - right: '3%', - bottom: '15%', - containLabel: true - }, - yAxis: [ - { - type: 'category', - axisLine: { - show: true, - lineStyle: { color: "rgba(255,255,255,0.2)" }, - }, - axisTick: { - inside: true, - lineStyle: { color: "rgba(255,255,255,0.2)" }, - }, - axisLabel: { - interval: 0, - color: "rgba(255,255,255,0.7)", - }, - data: ['上报', '完成', '遗留'], - } - ], - xAxis: [ - { - type: 'value', - splitLine: { show: false }, - axisTick: { - show: true, - inside: true, - length: 3, - lineStyle: { color: "rgba(255,255,255,0.2)" }, - }, - axisLine: { - show: true, - lineStyle: { color: "rgba(255,255,255,0.2)" }, - }, - axisLabel: { - color: "rgba(255,255,255,0.7)", - }, - } - ], - series: [ - { - name: '当日报修情况', - type: 'bar', - barWidth: 18, - emphasis: { - focus: 'series' - }, - label: { - show: true, - position: 'right', - color: 'rgba(255,255,255,0.8)', - fontFamily: 'Impact', - fontSize: 14 - }, - markPoint: { - symbol: 'triangle', - symbolRotate: 180, - symbolSize: 6, - symbolOffset: [0, -15], + let objData = res.result; + var myChart = this.$echarts.init(document.getElementById("rightBar1")); + myChart.setOption({ + color: ['#EB6877', '#4A92FF', '#48CB96'], + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + top: '15%', + left: '3%', + right: '3%', + bottom: '15%', + containLabel: true + }, + yAxis: [ + { + type: 'category', + axisLine: { + show: true, + lineStyle: { color: "rgba(255,255,255,0.2)" }, + }, + axisTick: { + inside: true, + lineStyle: { color: "rgba(255,255,255,0.2)" }, + }, + axisLabel: { + interval: 0, + color: "rgba(255,255,255,0.7)", + }, + data: ['上报', '完成', '遗留'], + } + ], + xAxis: [ + { + type: 'value', + splitLine: { show: false }, + axisTick: { + show: true, + inside: true, + length: 3, + lineStyle: { color: "rgba(255,255,255,0.2)" }, + }, + axisLine: { + show: true, + lineStyle: { color: "rgba(255,255,255,0.2)" }, + }, + axisLabel: { + color: "rgba(255,255,255,0.7)", + }, + } + ], + series: [ + { + name: '当日报修情况', + type: 'bar', + barWidth: 18, + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: 'right', + color: 'rgba(255,255,255,0.8)', + fontFamily: 'Impact', + fontSize: 14 + }, + markPoint: { + symbol: 'triangle', + symbolRotate: 180, + symbolSize: 6, + symbolOffset: [0, -12], + data: [ + { + xAxis: objData.escalation, yAxis: '上报', itemStyle: { + color: '#4A92FF' + } + }, + { + xAxis: objData.complete, yAxis: '完成', itemStyle: { + color: '#48CB96' + } + }, + { + xAxis: objData.legacy, yAxis: '遗留', itemStyle: { + color: '#EB6877' + } + } + ] + }, data: [ { - xAxis: 61, yAxis: '上报', itemStyle: { + name: '上报', value: '61', itemStyle: { color: '#4A92FF' } }, { - xAxis: 53, yAxis: '完成', itemStyle: { + name: '完成', value: '53', itemStyle: { color: '#48CB96' } }, { - xAxis: 15, yAxis: '遗留', itemStyle: { + name: '遗留', value: '15', itemStyle: { color: '#EB6877' } - } + }, ] }, - data: [ - { - name: '上报', value: '61', itemStyle: { - color: '#4A92FF' - } - }, - { - name: '完成', value: '53', itemStyle: { - color: '#48CB96' - } - }, - { - name: '遗留', value: '15', itemStyle: { - color: '#EB6877' - } - }, - ] - }, - ] + ] + }) }) }, // 运行保障人员 @@ -1819,7 +1820,7 @@ export default { .car_box { width: 2.28rem; - height: 0.79rem; + // height: 0.79rem; text-align: center; background: rgba(0, 0, 0, 0.1); border-radius: 0.05rem;