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
Split 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) => {
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) => {

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

@ -79,14 +79,22 @@
<div class="flex-center-between">
<div class="flex-center">昨日本场<span class="big_txt blue" style="margin:0 0.03rem;">{{ planeInfo.placeNum
}}</span>次</div>
<div class="yellow">
<img src="../../../public/img/monitoring/electricity/up.png" /> 11%
<div v-if="((((planeInfo.placeNum - prePlaneInfo.placeNum) / prePlaneInfo.placeNum) * 100) >= 0)" class="yellow">
<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 class="flex-center-between">
<div class="flex-center">昨日区域<span class="big_txt blue" style="margin:0 0.03rem;">{{ planeInfo.areaNum
}}</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>
@ -119,7 +127,7 @@
<div style="width:1.1rem;">
<div class="flex-center green">
<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>
@ -127,7 +135,7 @@
<div style="width:1.1rem;">
<div class="flex-center blue">
<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>
@ -231,35 +239,19 @@
<div class="right">
<div class="right_title flex-center" style="margin-top:0.13rem;"><i></i>车辆资源</div>
<div class="car_box">
<div class="flex-center-between">
<div class="flex-center-around">
<div>胶<br />州</div>
<div>
<div class="blue"><span class="big_txt">4</span>辆</div>
<div>7座及以下</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 :key="('carinfo'+i)" v-for="(value,key,i) in cardInfo['胶州']">
<div :class="(i==0?'blue' : i == 1 ? 'green' : 'yellow')"><span class="big_txt">{{value}}</span>辆</div>
<div>{{key}}</div>
</div>
</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>
<div class="blue"><span class="big_txt">4</span>辆</div>
<div>7座及以下</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 :key="('carinfo_lt'+i)" v-for="(value,key,i) in cardInfo['流亭']">
<div :class="(i==0?'blue' : i == 1 ? 'green' : 'yellow')"><span class="big_txt">{{value}}</span>辆</div>
<div>{{key}}</div>
</div>
</div>
</div>
@ -280,7 +272,7 @@
<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>
<div class="fy_box" :title="reportFangyi.content">
{{reportFangyi.content}}
{{ reportFangyi.content }}
</div>
</div>
</div>
@ -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;

Write Preview
Loading…
Cancel
Save