suojin
/
smartpark-front
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mock真是数据渲染

Browse Source
dev
zhangqun 3 years ago
parent 98404adf37
commit 9201d5e6b5
2 changed files with 394 additions and 300 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 143
      src/api/source/total.js
  2. 551
      src/views/garden/generalizePatternNew.vue

143
src/api/source/total.js
Unescape View File

@ -474,11 +474,27 @@ export const getPlaneInfo = (date) => {
}; };
//访客 //访客
export const getGardenAndApprove = (date) => { export const getGardenAndApprove = (date) => {
return request({ if (isMock) {
url: "/epiHome/epidemicback/getGardenAndApprove", return new Promise((reslove) => {
method: "get", reslove({
params: { date }, "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) => { export const getRepair = (date) => {
return request({ if (isMock) {
url: "/epiHome/epidemicback/getRepair", return new Promise((reslove) => {
method: "get", reslove({
params: { date }, "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) => { export const getShare = (date) => {
return request({ if (isMock) {
url: "/epiHome/epidemicback/getShare", return new Promise((reslove) => {
method: "get", reslove({
params: { date }, "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) => { export const getCarInfo = (date) => {
return request({ if (isMock) {
url: "/epiHome/epidemicback/getCarInfo", return new Promise((reslove) => {
method: "get", reslove({
params: { date }, "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) => { export const getGardenEat = (date) => {
return request({ if (isMock) {
url: "/epiHome/epidemicback/getGardenEat", return new Promise((reslove) => {
method: "get", reslove({
params: { date }, "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 分区域运行 //防疫要求-每日情况//0 正常 1 封闭运行 2 分区域运行
export const getReportByDate = (date) => { export const getReportByDate = (date) => {

551
src/views/garden/generalizePatternNew.vue
Unescape View File

@ -79,14 +79,22 @@
<div class="flex-center-between"> <div class="flex-center-between">
<div class="flex-center">昨日本场<span class="big_txt blue" style="margin:0 0.03rem;">{{ planeInfo.placeNum <div class="flex-center">昨日本场<span class="big_txt blue" style="margin:0 0.03rem;">{{ planeInfo.placeNum
}}</span>次</div> }}</span>次</div>
<div class="yellow"> <div v-if="((((planeInfo.placeNum - prePlaneInfo.placeNum) / prePlaneInfo.placeNum) * 100) >= 0)" class="yellow">
<img src="../../../public/img/monitoring/electricity/up.png" /> 11% <img src="../../../public/img/monitoring/electricity/up.png" /> {{(((planeInfo.placeNum - prePlaneInfo.placeNum) / prePlaneInfo.placeNum) * 100).toFixed(1)}}%
</div>
<div v-else class="green">
<img src="../../../public/img/monitoring/electricity/down.png" /> {{(((planeInfo.placeNum - prePlaneInfo.placeNum) / prePlaneInfo.placeNum) * 100).toFixed(1)}}%
</div> </div>
</div> </div>
<div class="flex-center-between"> <div class="flex-center-between">
<div class="flex-center">昨日区域<span class="big_txt blue" style="margin:0 0.03rem;">{{ planeInfo.areaNum <div class="flex-center">昨日区域<span class="big_txt blue" style="margin:0 0.03rem;">{{ planeInfo.areaNum
}}</span>次</div> }}</span>次</div>
<div class="green"><img src="../../../public/img/monitoring/electricity/down.png" /> 20%</div> <div v-if="((((planeInfo.areaNum - prePlaneInfo.areaNum) / prePlaneInfo.areaNum) * 100) > 0)" class="yellow">
<img src="../../../public/img/monitoring/electricity/up.png" /> {{(((planeInfo.areaNum - prePlaneInfo.areaNum) / prePlaneInfo.areaNum) * 100).toFixed(1)}}%
</div>
<div v-else class="green">
<img src="../../../public/img/monitoring/electricity/down.png" /> {{(((planeInfo.areaNum - prePlaneInfo.areaNum) / prePlaneInfo.areaNum) * 100).toFixed(1)}}%
</div>
</div> </div>
</div> </div>
</div> </div>
@ -119,7 +127,7 @@
<div style="width:1.1rem;"> <div style="width:1.1rem;">
<div class="flex-center green"> <div class="flex-center green">
<img src="../../../public/img/home/h_m_icon2.png" /> <img src="../../../public/img/home/h_m_icon2.png" />
<div class="big_txt">1060</div> <div class="big_txt">{{ gardenAndApprove.Garden }}</div>
</div> </div>
<div>已入园</div> <div>已入园</div>
</div> </div>
@ -127,7 +135,7 @@
<div style="width:1.1rem;"> <div style="width:1.1rem;">
<div class="flex-center blue"> <div class="flex-center blue">
<img src="../../../public/img/home/h_m_icon3.png" /> <img src="../../../public/img/home/h_m_icon3.png" />
<div class="big_txt">205</div> <div class="big_txt">{{ gardenAndApprove.Approve }}</div>
</div> </div>
<div>申请次数</div> <div>申请次数</div>
</div> </div>
@ -231,35 +239,19 @@
<div class="right"> <div class="right">
<div class="right_title flex-center" style="margin-top:0.13rem;"><i></i>车辆资源</div> <div class="right_title flex-center" style="margin-top:0.13rem;"><i></i>车辆资源</div>
<div class="car_box"> <div class="car_box">
<div class="flex-center-between"> <div class="flex-center-around">
<div>胶<br />州</div> <div>胶<br />州</div>
<div> <div :key="('carinfo'+i)" v-for="(value,key,i) in cardInfo['胶州']">
<div class="blue"><span class="big_txt">4</span>辆</div> <div :class="(i==0?'blue' : i == 1 ? 'green' : 'yellow')"><span class="big_txt">{{value}}</span>辆</div>
<div>7座及以下</div> <div>{{key}}</div>
</div>
<div>
<div class="green"><span class="big_txt">3</span>辆</div>
<div>7座及以下</div>
</div>
<div>
<div class="yellow"><span class="big_txt">2</span>辆</div>
<div>7座及以下</div>
</div> </div>
</div> </div>
<div style="height:1px;background: #2A3C5F;margin:0.08rem;"></div> <div style="height:1px;background: #2A3C5F;margin:0.08rem;"></div>
<div class="flex-center-between"> <div class="flex-center-around">
<div>流<br />亭</div> <div>流<br />亭</div>
<div> <div :key="('carinfo_lt'+i)" v-for="(value,key,i) in cardInfo['流亭']">
<div class="blue"><span class="big_txt">4</span>辆</div> <div :class="(i==0?'blue' : i == 1 ? 'green' : 'yellow')"><span class="big_txt">{{value}}</span>辆</div>
<div>7座及以下</div> <div>{{key}}</div>
</div>
<div>
<div class="green"><span class="big_txt">3</span>辆</div>
<div>7座及以下</div>
</div>
<div>
<div class="yellow"><span class="big_txt">2</span>辆</div>
<div>7座及以下</div>
</div> </div>
</div> </div>
</div> </div>
@ -280,7 +272,7 @@
<div class="title flex-center" style="margin-top:0.09rem;margin-left:0.32rem;"><img <div class="title flex-center" style="margin-top:0.09rem;margin-left:0.32rem;"><img
src="../../../public/img/home/h_r_icon5.png" style="width: 0.17rem" />防疫要求</div> src="../../../public/img/home/h_r_icon5.png" style="width: 0.17rem" />防疫要求</div>
<div class="fy_box" :title="reportFangyi.content"> <div class="fy_box" :title="reportFangyi.content">
{{reportFangyi.content}} {{ reportFangyi.content }}
</div> </div>
</div> </div>
</div> </div>
@ -341,7 +333,10 @@ export default {
weatherData: {}, //天气 weatherData: {}, //天气
echartsColors: ["#4A92FF", "#48CB96", "#08B6F3", "#FFC976", "#7D55FF", "#BFBFBF"],//图表色值 echartsColors: ["#4A92FF", "#48CB96", "#08B6F3", "#FFC976", "#7D55FF", "#BFBFBF"],//图表色值
currentDate: dateFormat(new Date(), 'yyyy-MM-dd'), currentDate: dateFormat(new Date(), 'yyyy-MM-dd'),
prePlaneInfo:{},//前一天
planeInfo: {},//航班 planeInfo: {},//航班
gardenAndApprove: {},//访客
cardInfo:{},//车辆资源
ywDevice: { ywDevice: {
电: { 电: {
code: "0100", code: "0100",
@ -427,18 +422,25 @@ export default {
// getCodeByDate(this.currentDate).then((res) => { // 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) => { getPlaneInfo(this.currentDate).then((res) => {
this.planeInfo = res.result; this.planeInfo = res.result;
}) })
//访客 //访客
getGardenAndApprove(this.currentDate).then((res) => { getGardenAndApprove(this.currentDate).then((res) => {
this.gardenAndApprove = res.result;
}) })
this.getGxzy();//共享资源 this.getGxzy();//共享资源
//车辆资源 //车辆资源
getCarInfo(this.currentDate).then((res) => { getCarInfo(this.currentDate).then((res) => {
this.cardInfo = res.result;
}) })
//今日就餐 //今日就餐
getGardenEat(this.currentDate).then((res) => { getGardenEat(this.currentDate).then((res) => {
@ -457,49 +459,47 @@ export default {
getGxzy() { getGxzy() {
//共享资源 //共享资源
getShare(this.currentDate).then((res) => { getShare(this.currentDate).then((res) => {
let objData = res.result;
}) var myChart = this.$echarts.init(document.getElementById("radar1"));
var myChart = this.$echarts.init(document.getElementById("radar1")); myChart.setOption({
myChart.setOption({ color: ['#2BF7AC', '#07A6FF'],
color: ['#2BF7AC', '#07A6FF'], tooltip: {
tooltip: { trigger: 'item'
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)',
}, },
nameGap: 8 radar: {
}, indicator: [
series: [ { name: '车位', max: 257 },
{ { name: '地下车位', max: 67 },
name: 'Budget vs spending', { name: '会议情况', max: 50 },
type: 'radar', { name: '洗车机', max: 50 },
areaStyle: { { name: '充电桩', max: 50 },
color: 'rgba(0,255,157,0.3)' { name: '健身器材', max: 50 }
}, ],
data: [ center: ['50%', '56%'],
{ radius: 50,
value: [4200, 3000, 20000, 35000, 50000, 18000], axisName: {
name: '共享资源' 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() { getDoor() {
@ -602,244 +602,245 @@ export default {
//园区就餐 //园区就餐
getJiuCan() { getJiuCan() {
getGardenEat(this.currentDate).then((res) => { getGardenEat(this.currentDate).then((res) => {
let objData = res.result;
}) var myChart = this.$echarts.init(document.getElementById("rightBar3"));
var myChart = this.$echarts.init(document.getElementById("rightBar3")); myChart.setOption({
myChart.setOption({ tooltip: {
tooltip: { trigger: 'axis',
trigger: 'axis', axisPointer: {
axisPointer: { type: 'shadow'
type: 'shadow' }
} },
}, grid: {
grid: { top: '10%',
top: '10%', left: '3%',
left: '3%', right: '3%',
right: '3%', bottom: '3%',
bottom: '3%', containLabel: true
containLabel: true },
}, yAxis: [
yAxis: [ {
{ type: 'category',
type: 'category', axisLine: {
axisLine: { show: true,
show: true, lineStyle: { color: "rgba(255,255,255,0.2)" },
lineStyle: { color: "rgba(255,255,255,0.2)" }, },
}, axisTick: {
axisTick: { inside: true,
inside: true, lineStyle: { color: "rgba(255,255,255,0.2)" },
lineStyle: { color: "rgba(255,255,255,0.2)" }, },
}, axisLabel: {
axisLabel: { interval: 0,
interval: 0, color: "rgba(255,255,255,0.7)",
color: "rgba(255,255,255,0.7)", },
}, data: ['流亭园区', '行政', '塔台', '业务区运行'],
data: ['流亭园区', '行政', '塔台', '业务区运行'], }
} ],
], xAxis: [
xAxis: [ {
{ type: 'value',
type: 'value', splitLine: { show: false },
splitLine: { show: false }, axisTick: {
axisTick: { show: true,
show: true, inside: true,
inside: true, length: 3,
length: 3, lineStyle: { color: "rgba(255,255,255,0.2)" },
lineStyle: { color: "rgba(255,255,255,0.2)" }, },
}, axisLine: {
axisLine: { show: true,
show: true, lineStyle: { color: "rgba(255,255,255,0.2)" },
lineStyle: { color: "rgba(255,255,255,0.2)" }, },
}, axisLabel: {
axisLabel: { color: "rgba(255,255,255,0.7)",
color: "rgba(255,255,255,0.7)", },
}, }
} ],
], series: [
series: [ {
{ name: '就餐人员',
name: '今日园区就餐', type: 'bar',
type: 'bar', barWidth: 18,
barWidth: 18, emphasis: {
emphasis: { focus: 'series'
focus: 'series' },
}, label: {
label: { show: true,
show: true, position: 'right',
position: 'right', color: 'rgba(255,255,255,0.8)',
color: 'rgba(255,255,255,0.8)', fontFamily: 'Impact',
fontFamily: 'Impact', fontSize: 14
fontSize: 14 },
}, markPoint: {
markPoint: { symbol: 'triangle',
symbol: 'triangle', symbolRotate: 180,
symbolRotate: 180, symbolSize: 6,
symbolSize: 6, symbolOffset: [0, -12],
symbolOffset: [0, -15], 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: [ data: [
{ {
xAxis: 61, yAxis: '流亭园区', itemStyle: { name: '流亭园区', value: objData.Garden, itemStyle: {
color: '#48CB96' color: '#48CB96'
} }
}, },
{ {
xAxis: 53, yAxis: '行政', itemStyle: { name: '行政', value: objData.XZ, itemStyle: {
color: '#4A92FF' color: '#4A92FF'
} }
}, },
{ {
xAxis: 15, yAxis: '塔台', itemStyle: { name: '塔台', value: objData.TT, itemStyle: {
color: '#7D55FF' color: '#7D55FF'
} }
}, },
{ {
xAxis: 15, yAxis: '业务区运行', itemStyle: { name: '业务区运行', value: objData.YW, itemStyle: {
color: '#FFC976' 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() { getBx() {
getRepair(this.currentDate).then((res) => { getRepair(this.currentDate).then((res) => {
let objData = res.result;
}) var myChart = this.$echarts.init(document.getElementById("rightBar1"));
var myChart = this.$echarts.init(document.getElementById("rightBar1")); myChart.setOption({
myChart.setOption({ color: ['#EB6877', '#4A92FF', '#48CB96'],
color: ['#EB6877', '#4A92FF', '#48CB96'], tooltip: {
tooltip: { trigger: 'axis',
trigger: 'axis', axisPointer: {
axisPointer: { type: 'shadow'
type: 'shadow' }
} },
}, grid: {
grid: { top: '15%',
top: '15%', left: '3%',
left: '3%', right: '3%',
right: '3%', bottom: '15%',
bottom: '15%', containLabel: true
containLabel: true },
}, yAxis: [
yAxis: [ {
{ type: 'category',
type: 'category', axisLine: {
axisLine: { show: true,
show: true, lineStyle: { color: "rgba(255,255,255,0.2)" },
lineStyle: { color: "rgba(255,255,255,0.2)" }, },
}, axisTick: {
axisTick: { inside: true,
inside: true, lineStyle: { color: "rgba(255,255,255,0.2)" },
lineStyle: { color: "rgba(255,255,255,0.2)" }, },
}, axisLabel: {
axisLabel: { interval: 0,
interval: 0, color: "rgba(255,255,255,0.7)",
color: "rgba(255,255,255,0.7)", },
}, data: ['上报', '完成', '遗留'],
data: ['上报', '完成', '遗留'], }
} ],
], xAxis: [
xAxis: [ {
{ type: 'value',
type: 'value', splitLine: { show: false },
splitLine: { show: false }, axisTick: {
axisTick: { show: true,
show: true, inside: true,
inside: true, length: 3,
length: 3, lineStyle: { color: "rgba(255,255,255,0.2)" },
lineStyle: { color: "rgba(255,255,255,0.2)" }, },
}, axisLine: {
axisLine: { show: true,
show: true, lineStyle: { color: "rgba(255,255,255,0.2)" },
lineStyle: { color: "rgba(255,255,255,0.2)" }, },
}, axisLabel: {
axisLabel: { color: "rgba(255,255,255,0.7)",
color: "rgba(255,255,255,0.7)", },
}, }
} ],
], series: [
series: [ {
{ name: '当日报修情况',
name: '当日报修情况', type: 'bar',
type: 'bar', barWidth: 18,
barWidth: 18, emphasis: {
emphasis: { focus: 'series'
focus: 'series' },
}, label: {
label: { show: true,
show: true, position: 'right',
position: 'right', color: 'rgba(255,255,255,0.8)',
color: 'rgba(255,255,255,0.8)', fontFamily: 'Impact',
fontFamily: 'Impact', fontSize: 14
fontSize: 14 },
}, markPoint: {
markPoint: { symbol: 'triangle',
symbol: 'triangle', symbolRotate: 180,
symbolRotate: 180, symbolSize: 6,
symbolSize: 6, symbolOffset: [0, -12],
symbolOffset: [0, -15], data: [
{
xAxis: objData.escalation, yAxis: '上报', itemStyle: {
color: '#4A92FF'
}
},
{
xAxis: objData.complete, yAxis: '完成', itemStyle: {
color: '#48CB96'
}
},
{
xAxis: objData.legacy, yAxis: '遗留', itemStyle: {
color: '#EB6877'
}
}
]
},
data: [ data: [
{ {
xAxis: 61, yAxis: '上报', itemStyle: { name: '上报', value: '61', itemStyle: {
color: '#4A92FF' color: '#4A92FF'
} }
}, },
{ {
xAxis: 53, yAxis: '完成', itemStyle: { name: '完成', value: '53', itemStyle: {
color: '#48CB96' color: '#48CB96'
} }
}, },
{ {
xAxis: 15, yAxis: '遗留', itemStyle: { name: '遗留', value: '15', itemStyle: {
color: '#EB6877' 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 { .car_box {
width: 2.28rem; width: 2.28rem;
height: 0.79rem; // height: 0.79rem;
text-align: center; text-align: center;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 0.05rem; border-radius: 0.05rem;

Write Preview
Loading…
Cancel
Save