|
@@ -1,71 +1,92 @@
|
|
<template>
|
|
<template>
|
|
<div class="dataView-content">
|
|
<div class="dataView-content">
|
|
<div class="data-header">
|
|
<div class="data-header">
|
|
- <dv-border-box-5 :color="['rgba(115, 164, 255, 0.3)', 'rgba(0,125,255,0.2)']">
|
|
|
|
- 智享亿家投递大数据
|
|
|
|
- </dv-border-box-5>
|
|
|
|
- <dv-decoration-3 style="width:25%;height:30px;" />
|
|
|
|
- <dv-border-box-5 :color="['rgba(46, 77, 255, 0.2)', 'rgba(0,125,255,0.2)']" :reverse="true">
|
|
|
|
- <div>区域</div>
|
|
|
|
- <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
|
|
|
|
- <option value="">省</option>
|
|
|
|
- <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
|
|
|
|
- </select> -->
|
|
|
|
- <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
|
|
|
|
- <option value="">全部市</option>
|
|
|
|
- <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
|
|
|
|
- </select>
|
|
|
|
- <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
|
|
|
|
- <option value="">全部区/县</option>
|
|
|
|
- <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
|
|
|
|
- </select>
|
|
|
|
- <a-icon
|
|
|
|
- @click="isFullscreenMap"
|
|
|
|
- :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
|
|
|
|
- :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
|
|
|
|
- </dv-border-box-5>
|
|
|
|
- </div>
|
|
|
|
- <div class="data-body">
|
|
|
|
- <div class="b-left">
|
|
|
|
|
|
+ <div class="total-block">
|
|
<div>
|
|
<div>
|
|
- <dv-border-box-13>
|
|
|
|
- <div id="con1" style="width: 100%;height: 100%;"></div>
|
|
|
|
- </dv-border-box-13>
|
|
|
|
|
|
+ <div class="total-label"><i class="cor1" v-for="item in 3" :key="item">|</i>用户总数</div>
|
|
|
|
+ <div class="total-value cor1">{{ userTotal }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- <dv-border-box-13>
|
|
|
|
- <div id="con2" style="width: 100%;height: 100%;"></div>
|
|
|
|
- </dv-border-box-13>
|
|
|
|
|
|
+ <div class="total-label"><i class="cor2" v-for="item in 3" :key="item">|</i>试点单位数</div>
|
|
|
|
+ <div class="total-value cor2">{{ dwTotal }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- <dv-border-box-13>
|
|
|
|
- <div id="con4" style="width: 100%;height: 100%;"></div>
|
|
|
|
- </dv-border-box-13>
|
|
|
|
|
|
+ <div class="total-label"><i class="cor3" v-for="item in 3" :key="item">|</i>设备总数</div>
|
|
|
|
+ <div class="total-value cor3">{{ devTotal }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="page-title">
|
|
|
|
+ <!-- 智享亿家投递大数据 -->
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <div class="border-box-content">
|
|
|
|
+ <div>区域</div>
|
|
|
|
+ <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
|
|
|
|
+ <option value="">省</option>
|
|
|
|
+ <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
|
|
|
|
+ </select> -->
|
|
|
|
+ <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
|
|
|
|
+ <option value="">全部</option>
|
|
|
|
+ <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
|
|
|
|
+ </select>
|
|
|
|
+ <!-- <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
|
|
|
|
+ <option value="">全部区/县</option>
|
|
|
|
+ <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
|
|
|
|
+ </select> -->
|
|
|
|
+ <a-icon
|
|
|
|
+ @click="isFullscreenMap"
|
|
|
|
+ :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
|
|
|
|
+ :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="data-body">
|
|
<div class="b-middle">
|
|
<div class="b-middle">
|
|
<div>
|
|
<div>
|
|
<dv-border-box-8 style="padding: 10px;">
|
|
<dv-border-box-8 style="padding: 10px;">
|
|
- <div id="map" :style="{height: '100%'}"></div>
|
|
|
|
- </dv-border-box-8>
|
|
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- <dv-border-box-12>
|
|
|
|
- <div class="total-block">
|
|
|
|
- <div>
|
|
|
|
- <dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
|
|
|
|
- <div class="total-label">用户总数</div>
|
|
|
|
|
|
+ <div class="lajiliang">
|
|
|
|
+ <div class="laji-title">垃圾产生量</div>
|
|
|
|
+ <div class="laji-item">
|
|
|
|
+ <div class="cor1">可回收垃圾</div>
|
|
|
|
+ <div>1000 吨</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="laji-item">
|
|
|
|
+ <div class="cor2">其它垃圾</div>
|
|
|
|
+ <div>1000 吨</div>
|
|
</div>
|
|
</div>
|
|
- <div>
|
|
|
|
- <dv-digital-flop :config="dwTotal" style="width:100%;height:50px;" />
|
|
|
|
- <div class="total-label">试点单位数</div>
|
|
|
|
|
|
+ <div class="laji-item">
|
|
|
|
+ <div class="cor3">厨余垃圾</div>
|
|
|
|
+ <div>1000 吨</div>
|
|
</div>
|
|
</div>
|
|
- <div>
|
|
|
|
- <dv-digital-flop :config="devTotal" style="width:100%;height:50px;" />
|
|
|
|
- <div class="total-label">设备总数</div>
|
|
|
|
|
|
+ <div class="laji-item">
|
|
|
|
+ <div class="cor4">建筑垃圾</div>
|
|
|
|
+ <div>1000 吨</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="laji-item">
|
|
|
|
+ <div class="cor5">有害垃圾</div>
|
|
|
|
+ <div>1000 吨</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="laji-total">共计<span>5000</span>吨</div>
|
|
</div>
|
|
</div>
|
|
- </dv-border-box-12>
|
|
|
|
|
|
+ <div id="map" :style="{height: '100%'}"></div>
|
|
|
|
+ </dv-border-box-8>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <div>
|
|
|
|
+ <dv-border-box-13>
|
|
|
|
+ <div id="con1" style="width: 100%;height: 100%;"></div>
|
|
|
|
+ </dv-border-box-13>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <dv-border-box-13>
|
|
|
|
+ <div id="con2" style="width: 100%;height: 100%;"></div>
|
|
|
|
+ </dv-border-box-13>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <dv-border-box-13>
|
|
|
|
+ <div id="con4" style="width: 100%;height: 100%;"></div>
|
|
|
|
+ </dv-border-box-13>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="b-right">
|
|
<div class="b-right">
|
|
@@ -150,21 +171,9 @@ export default {
|
|
chart2: null,
|
|
chart2: null,
|
|
chart3: null,
|
|
chart3: null,
|
|
chart4: null,
|
|
chart4: null,
|
|
- userTotal: {
|
|
|
|
- number: [],
|
|
|
|
- content: '{nt}',
|
|
|
|
- formatter: this.formatter
|
|
|
|
- },
|
|
|
|
- devTotal: {
|
|
|
|
- number: [],
|
|
|
|
- content: '{nt}',
|
|
|
|
- formatter: this.formatter
|
|
|
|
- },
|
|
|
|
- dwTotal: {
|
|
|
|
- number: [],
|
|
|
|
- content: '{nt}',
|
|
|
|
- formatter: this.formatter
|
|
|
|
- },
|
|
|
|
|
|
+ userTotal: 0,
|
|
|
|
+ devTotal: 0,
|
|
|
|
+ dwTotal: 0,
|
|
isMapFull: false,
|
|
isMapFull: false,
|
|
map: null, // 地图对象
|
|
map: null, // 地图对象
|
|
markerLayer: null, // 地图点标记对象
|
|
markerLayer: null, // 地图点标记对象
|
|
@@ -278,13 +287,7 @@ export default {
|
|
'districtCode': this.queryParam.districtCode
|
|
'districtCode': this.queryParam.districtCode
|
|
}).then(res => {
|
|
}).then(res => {
|
|
const data = res.data || 0
|
|
const data = res.data || 0
|
|
- const arr = []
|
|
|
|
- arr.push(data)
|
|
|
|
- this.userTotal = {
|
|
|
|
- number: arr,
|
|
|
|
- content: '{nt}',
|
|
|
|
- formatter: this.formatter
|
|
|
|
- }
|
|
|
|
|
|
+ this.userTotal = data
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 获取设备总数
|
|
// 获取设备总数
|
|
@@ -295,13 +298,7 @@ export default {
|
|
'districtCode': this.queryParam.districtCode
|
|
'districtCode': this.queryParam.districtCode
|
|
}).then(res => {
|
|
}).then(res => {
|
|
const data = res.data || 0
|
|
const data = res.data || 0
|
|
- const arr = []
|
|
|
|
- arr.push(data)
|
|
|
|
- this.devTotal = {
|
|
|
|
- number: arr,
|
|
|
|
- content: '{nt}',
|
|
|
|
- formatter: this.formatter
|
|
|
|
- }
|
|
|
|
|
|
+ this.devTotal = data
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 获取新用户注册量
|
|
// 获取新用户注册量
|
|
@@ -849,25 +846,60 @@ export default {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
-
|
|
|
|
|
|
+ background-image: url(../../assets/headBg.png);
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-position: center center;
|
|
|
|
+ background-size: auto 80%;
|
|
|
|
+ padding: 10px 0 0;
|
|
|
|
+ .total-block {
|
|
|
|
+ width: 35%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ >div {
|
|
|
|
+ width: 30%;
|
|
|
|
+ padding-right: 10px;
|
|
|
|
+ }
|
|
|
|
+ .total-label {
|
|
|
|
+ color: #fff;
|
|
|
|
+ text-align: left;
|
|
|
|
+ display: flex;
|
|
|
|
+ i{
|
|
|
|
+ transform: rotate(330deg);
|
|
|
|
+ display: inline-block;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ margin: 0 1px;
|
|
|
|
+ &:last-child{
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .total-value{
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ .cor1{
|
|
|
|
+ color: #00ff84;
|
|
|
|
+ }
|
|
|
|
+ .cor2{
|
|
|
|
+ color: #d7ff00;
|
|
|
|
+ }
|
|
|
|
+ .cor3{
|
|
|
|
+ color: #00c0ff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .page-title{
|
|
|
|
+ width: 50%;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ color: #00aaff;
|
|
|
|
+ font-size: 32px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
>div {
|
|
>div {
|
|
- height: 80px;
|
|
|
|
- line-height: 80px;
|
|
|
|
-
|
|
|
|
- &:first-child {
|
|
|
|
- width: 40%;
|
|
|
|
- color: #b3dcf5;
|
|
|
|
- padding-right: 10%;
|
|
|
|
- .border-box-content {
|
|
|
|
- font-size: 30px;
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
|
|
+ padding: 15px;
|
|
&:last-child {
|
|
&:last-child {
|
|
- width: 35%;
|
|
|
|
|
|
+ width: 25%;
|
|
color: #0ed3ff;
|
|
color: #0ed3ff;
|
|
-
|
|
|
|
.border-box-content {
|
|
.border-box-content {
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -879,11 +911,11 @@ export default {
|
|
select {
|
|
select {
|
|
background: #021931;
|
|
background: #021931;
|
|
border: 1px solid #3e566d;
|
|
border: 1px solid #3e566d;
|
|
- min-width: 20%;
|
|
|
|
- padding: 2px 10px;
|
|
|
|
|
|
+ min-width: 30%;
|
|
|
|
+ padding: 2px 20px;
|
|
margin: 0 10px;
|
|
margin: 0 10px;
|
|
box-shadow: inset 0 0 2px #69b2ff;
|
|
box-shadow: inset 0 0 2px #69b2ff;
|
|
- border-radius: 6px;
|
|
|
|
|
|
+ border-radius: 60px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -893,8 +925,7 @@ export default {
|
|
.data-body {
|
|
.data-body {
|
|
flex-grow: 1;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
display: flex;
|
|
-
|
|
|
|
- .b-left,
|
|
|
|
|
|
+ padding: 0 15px 15px;
|
|
.b-right {
|
|
.b-right {
|
|
width: 25%;
|
|
width: 25%;
|
|
display: flex;
|
|
display: flex;
|
|
@@ -902,37 +933,75 @@ export default {
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
> div{
|
|
> div{
|
|
- height: 33.3%;
|
|
|
|
|
|
+ height: 33%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.b-middle {
|
|
.b-middle {
|
|
- width: 50%;
|
|
|
|
|
|
+ width: 75%;
|
|
padding: 5px;
|
|
padding: 5px;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
>div {
|
|
>div {
|
|
&:first-child {
|
|
&:first-child {
|
|
- height: 80%;
|
|
|
|
|
|
+ height: 66%;
|
|
|
|
+ .lajiliang{
|
|
|
|
+ width: 23%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ padding: 15px;
|
|
|
|
+ background: rgba(255,255,255,0.3);
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ left: 20px;
|
|
|
|
+ top: 20px;
|
|
|
|
+ z-index: 1000;
|
|
|
|
+ color: #fff;
|
|
|
|
+ .laji-title{
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 0 0 10px;
|
|
|
|
+ }
|
|
|
|
+ .laji-item{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ margin: 15px 0;
|
|
|
|
+ > div{
|
|
|
|
+ &:first-child{
|
|
|
|
+ border-radius: 30px;
|
|
|
|
+ padding: 2px 10px;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ width: 50%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .cor1{
|
|
|
|
+ background-color: #c2523f;
|
|
|
|
+ }
|
|
|
|
+ .cor2{
|
|
|
|
+ background-color: #c59b16;
|
|
|
|
+ }
|
|
|
|
+ .cor3{
|
|
|
|
+ background-color: #7561af;
|
|
|
|
+ }
|
|
|
|
+ .cor4{
|
|
|
|
+ background-color: #418ec6;
|
|
|
|
+ }
|
|
|
|
+ .cor5{
|
|
|
|
+ background-color: #20ce7a;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
&:last-child {
|
|
- height: 20%;
|
|
|
|
-
|
|
|
|
- .total-block {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- height: 100%;
|
|
|
|
- >div {
|
|
|
|
- width: 30%;
|
|
|
|
- }
|
|
|
|
- .total-label {
|
|
|
|
- color: #fff;
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ height: 33%;
|
|
|
|
+ display: flex;
|
|
|
|
+ > div{
|
|
|
|
+ width: 33.3%;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|