|
@@ -12,11 +12,11 @@
|
|
<option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
|
|
<option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
|
|
</select> -->
|
|
</select> -->
|
|
<select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
|
|
<select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
|
|
- <option value="">选择市</option>
|
|
|
|
|
|
+ <option value="">全部市</option>
|
|
<option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
|
|
<option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
|
|
</select>
|
|
</select>
|
|
<select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
|
|
<select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
|
|
- <option value="">选择区/县</option>
|
|
|
|
|
|
+ <option value="">全部区/县</option>
|
|
<option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
|
|
<option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
|
|
</select>
|
|
</select>
|
|
<a-icon
|
|
<a-icon
|
|
@@ -37,6 +37,11 @@
|
|
<div id="con2" style="width: 100%;height: 100%;"></div>
|
|
<div id="con2" style="width: 100%;height: 100%;"></div>
|
|
</dv-border-box-13>
|
|
</dv-border-box-13>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div>
|
|
|
|
+ <dv-border-box-13>
|
|
|
|
+ <div id="con4" style="width: 100%;height: 100%;"></div>
|
|
|
|
+ </dv-border-box-13>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="b-middle">
|
|
<div class="b-middle">
|
|
<div>
|
|
<div>
|
|
@@ -51,6 +56,10 @@
|
|
<dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
|
|
<dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
|
|
<div class="total-label">用户总数</div>
|
|
<div class="total-label">用户总数</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div>
|
|
|
|
+ <dv-digital-flop :config="dwTotal" style="width:100%;height:50px;" />
|
|
|
|
+ <div class="total-label">试点单位数</div>
|
|
|
|
+ </div>
|
|
<div>
|
|
<div>
|
|
<dv-digital-flop :config="devTotal" style="width:100%;height:50px;" />
|
|
<dv-digital-flop :config="devTotal" style="width:100%;height:50px;" />
|
|
<div class="total-label">设备总数</div>
|
|
<div class="total-label">设备总数</div>
|
|
@@ -67,7 +76,12 @@
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<dv-border-box-13>
|
|
<dv-border-box-13>
|
|
- <div id="con4" style="width: 100%;height: 100%;"></div>
|
|
|
|
|
|
+ <div id="con5" style="width: 100%;height: 100%;"></div>
|
|
|
|
+ </dv-border-box-13>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <dv-border-box-13>
|
|
|
|
+ <div id="con5" style="width: 100%;height: 100%;"></div>
|
|
</dv-border-box-13>
|
|
</dv-border-box-13>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -98,7 +112,7 @@ export default {
|
|
return {
|
|
return {
|
|
queryParam: {
|
|
queryParam: {
|
|
provinceCode: '610000', // 省
|
|
provinceCode: '610000', // 省
|
|
- cityCode: '610100', // 市
|
|
|
|
|
|
+ cityCode: '', // 市
|
|
districtCode: '' // 区
|
|
districtCode: '' // 区
|
|
},
|
|
},
|
|
addrProvinceList: [{
|
|
addrProvinceList: [{
|
|
@@ -146,6 +160,11 @@ export default {
|
|
content: '{nt}',
|
|
content: '{nt}',
|
|
formatter: this.formatter
|
|
formatter: this.formatter
|
|
},
|
|
},
|
|
|
|
+ dwTotal: {
|
|
|
|
+ number: [],
|
|
|
|
+ content: '{nt}',
|
|
|
|
+ formatter: this.formatter
|
|
|
|
+ },
|
|
isMapFull: false,
|
|
isMapFull: false,
|
|
map: null, // 地图对象
|
|
map: null, // 地图对象
|
|
markerLayer: null, // 地图点标记对象
|
|
markerLayer: null, // 地图点标记对象
|
|
@@ -187,11 +206,14 @@ export default {
|
|
},
|
|
},
|
|
// 获取区县列表
|
|
// 获取区县列表
|
|
getAreaList (e) {
|
|
getAreaList (e) {
|
|
- if (e.target.value == '') return
|
|
|
|
|
|
+ if (e.target.value == '') {
|
|
|
|
+ this.initChart()
|
|
|
|
+ return
|
|
|
|
+ }
|
|
this.addrDistrictList = []
|
|
this.addrDistrictList = []
|
|
this.queryParam.districtCode = ''
|
|
this.queryParam.districtCode = ''
|
|
- this.initChart()
|
|
|
|
this.getAreaListRequest(e.target.value)
|
|
this.getAreaListRequest(e.target.value)
|
|
|
|
+ this.initChart()
|
|
},
|
|
},
|
|
getAreaListRequest (val) {
|
|
getAreaListRequest (val) {
|
|
getDistrictByCity({
|
|
getDistrictByCity({
|
|
@@ -263,7 +285,6 @@ export default {
|
|
content: '{nt}',
|
|
content: '{nt}',
|
|
formatter: this.formatter
|
|
formatter: this.formatter
|
|
}
|
|
}
|
|
- console.log(this.userTotal, data, '获取用户总数')
|
|
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 获取设备总数
|
|
// 获取设备总数
|
|
@@ -501,7 +522,8 @@ export default {
|
|
series: [{
|
|
series: [{
|
|
type: 'pie',
|
|
type: 'pie',
|
|
radius: ['30%', '50%'],
|
|
radius: ['30%', '50%'],
|
|
- startAngle: -Math.PI / 8,
|
|
|
|
|
|
+ startAngle: 75,
|
|
|
|
+ top: 50,
|
|
avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
|
|
avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
|
|
label: {
|
|
label: {
|
|
normal: {
|
|
normal: {
|
|
@@ -515,7 +537,7 @@ export default {
|
|
rich: {
|
|
rich: {
|
|
name: {
|
|
name: {
|
|
fontSize: 12,
|
|
fontSize: 12,
|
|
- padding: [0, 10, 0, 4],
|
|
|
|
|
|
+ padding: [0, 4, 0, 4],
|
|
color: '#999'
|
|
color: '#999'
|
|
},
|
|
},
|
|
value: {
|
|
value: {
|
|
@@ -528,28 +550,29 @@ export default {
|
|
labelLine: {
|
|
labelLine: {
|
|
normal: {
|
|
normal: {
|
|
length: 20,
|
|
length: 20,
|
|
- length2: 60,
|
|
|
|
|
|
+ length2: 70,
|
|
lineStyle: {
|
|
lineStyle: {
|
|
color: '#e6e6e6'
|
|
color: '#e6e6e6'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- data: [{
|
|
|
|
- name: '居民小区',
|
|
|
|
- value: 49
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: '公共机构',
|
|
|
|
- value: 32
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: '学校',
|
|
|
|
- value: 14
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: '企业',
|
|
|
|
- value: 5
|
|
|
|
- }
|
|
|
|
|
|
+ data: [
|
|
|
|
+ {
|
|
|
|
+ name: '居民小区',
|
|
|
|
+ value: 49
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '学校',
|
|
|
|
+ value: 14
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '公共机构',
|
|
|
|
+ value: 32
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '企业',
|
|
|
|
+ value: 5
|
|
|
|
+ }
|
|
],
|
|
],
|
|
insideLabel: {
|
|
insideLabel: {
|
|
show: true
|
|
show: true
|
|
@@ -606,8 +629,8 @@ export default {
|
|
itemStyle: {
|
|
itemStyle: {
|
|
color: '#37a2da',
|
|
color: '#37a2da',
|
|
shadowColor: '#246d91',
|
|
shadowColor: '#246d91',
|
|
- shadowOffsetX: 10,
|
|
|
|
- shadowOffsetY: -1
|
|
|
|
|
|
+ shadowOffsetX: 8,
|
|
|
|
+ shadowOffsetY: 0
|
|
}
|
|
}
|
|
}]
|
|
}]
|
|
}
|
|
}
|
|
@@ -796,7 +819,9 @@ export default {
|
|
next(vm => {
|
|
next(vm => {
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
vm.initChart()
|
|
vm.initChart()
|
|
- vm.getAreaListRequest(vm.queryParam.cityCode)
|
|
|
|
|
|
+ if (vm.queryParam.cityCode != '') {
|
|
|
|
+ vm.getAreaListRequest(vm.queryParam.cityCode)
|
|
|
|
+ }
|
|
}, 150)
|
|
}, 150)
|
|
})
|
|
})
|
|
},
|
|
},
|
|
@@ -877,7 +902,7 @@ export default {
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
> div{
|
|
> div{
|
|
- height: 400px;
|
|
|
|
|
|
+ height: 33.3%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -900,11 +925,9 @@ export default {
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
height: 100%;
|
|
-
|
|
|
|
>div {
|
|
>div {
|
|
- width: 40%;
|
|
|
|
|
|
+ width: 30%;
|
|
}
|
|
}
|
|
-
|
|
|
|
.total-label {
|
|
.total-label {
|
|
color: #fff;
|
|
color: #fff;
|
|
text-align: center;
|
|
text-align: center;
|