|
|
|
|
@ -1,8 +1,9 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="jsc">
|
|
|
|
|
<div class="jscT">
|
|
|
|
|
<img src="../../assets/jsc/logo.png" alt="">
|
|
|
|
|
<span @click='todashboard'>进入后台</span>
|
|
|
|
|
<img src="../../assets/jsc/logo.png" alt="">
|
|
|
|
|
<span></span>
|
|
|
|
|
<span @click='todashboard'>{{nowYear}}-进入后台</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="jscB" v-if='showChart'>
|
|
|
|
|
<div class="jscL">
|
|
|
|
|
@ -59,7 +60,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="jscMb" style="height:80%">
|
|
|
|
|
<echartsMap ref="echartsMap"></echartsMap>
|
|
|
|
|
<echartsMap v-if="showMap" ref="echartsMap" :mapData='mapList'></echartsMap>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -67,7 +68,7 @@
|
|
|
|
|
<div style="height:30%" class='jscR1'>
|
|
|
|
|
<div class='comtitle'>
|
|
|
|
|
<img src="../../assets/jsc/icon4.png" alt="">
|
|
|
|
|
月度访视
|
|
|
|
|
镇街道访视
|
|
|
|
|
</div>
|
|
|
|
|
<div class="jscL2chart">
|
|
|
|
|
<echartsLine ref="echartsLine1" :rotate="60" :lineDataX='monthX' :lineDataY='monthY'></echartsLine>
|
|
|
|
|
@ -104,7 +105,13 @@
|
|
|
|
|
import CountTo from 'vue-count-to'
|
|
|
|
|
import {
|
|
|
|
|
getChartsHome
|
|
|
|
|
} from "../../api/dashboard.js"
|
|
|
|
|
} from "../../api/dashboard.js"
|
|
|
|
|
import {
|
|
|
|
|
getparameter
|
|
|
|
|
} from "@/api/system/dictionary";
|
|
|
|
|
import {
|
|
|
|
|
index
|
|
|
|
|
} from "@/api/system/baseForm.js"
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
echartsMap,
|
|
|
|
|
@ -114,7 +121,19 @@
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
showChart:false,
|
|
|
|
|
showChart:false,
|
|
|
|
|
showMap:false,
|
|
|
|
|
nowYear:"",
|
|
|
|
|
select: {
|
|
|
|
|
page_size: 5,
|
|
|
|
|
page: 1,
|
|
|
|
|
street: '',
|
|
|
|
|
name: '',
|
|
|
|
|
table_name: 'records',
|
|
|
|
|
show_relation: ['admin', 'department'],
|
|
|
|
|
total: 0
|
|
|
|
|
},
|
|
|
|
|
mapList:[],
|
|
|
|
|
radiusType1: ['40%', '60%'],
|
|
|
|
|
radiusType: '50%',
|
|
|
|
|
ageX: [],
|
|
|
|
|
@ -187,11 +206,16 @@
|
|
|
|
|
icon: require('../../assets/jsc/icon_img2.png'),
|
|
|
|
|
text: '多重',
|
|
|
|
|
num: 0
|
|
|
|
|
}, {
|
|
|
|
|
icon: require('../../assets/jsc/icon_img2.png'),
|
|
|
|
|
text: '重残',
|
|
|
|
|
num: 0
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
let that = this
|
|
|
|
|
let that = this
|
|
|
|
|
this.nowYear = new Date().getFullYear() + '年度'
|
|
|
|
|
this.setRem()
|
|
|
|
|
window.onresize = function() {
|
|
|
|
|
that.setRem()
|
|
|
|
|
@ -202,7 +226,9 @@
|
|
|
|
|
that.$refs.echartsPie.resetCharts()
|
|
|
|
|
that.$refs.echartsPie1.resetCharts()
|
|
|
|
|
}
|
|
|
|
|
this.loadData()
|
|
|
|
|
this.loadData()
|
|
|
|
|
this.getLabel()
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
todashboard(){
|
|
|
|
|
@ -219,11 +245,12 @@
|
|
|
|
|
window.$size = rem / 100;
|
|
|
|
|
document.documentElement.style.fontSize = rem + "px";
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
loadData(){
|
|
|
|
|
getChartsHome().then(res=>{
|
|
|
|
|
// 总量
|
|
|
|
|
this.jscMtList[0].num = res.total.year_total
|
|
|
|
|
this.jscMtList[1].num = res.total.year_total - res.total.lastyear_total
|
|
|
|
|
this.jscMtList[1].num = res.total.year_inc_total
|
|
|
|
|
this.jscMtList[2].num = res.total.year_des_total
|
|
|
|
|
this.jscMtList[3].num = res.total.year_viewrecords
|
|
|
|
|
// 年龄
|
|
|
|
|
@ -250,6 +277,12 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 重残
|
|
|
|
|
for(var type1 of this.jscL1typeList){
|
|
|
|
|
if(type1.text=='重残'){
|
|
|
|
|
type1.num = res.serious.disabilitytype_1+res.serious.disabilitytype_2
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 性别
|
|
|
|
|
this.sexData[0].value = res.sex_total['man']
|
|
|
|
|
this.sexData[1].value = res.sex_total['woman']
|
|
|
|
|
@ -260,19 +293,90 @@
|
|
|
|
|
value:street.total
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 月度访视
|
|
|
|
|
// 镇街道 月度访视
|
|
|
|
|
for(var view of res.viewrecords){
|
|
|
|
|
this.monthX.push(view.month)
|
|
|
|
|
let value = view.value=='茅山旅游度假区'?'茅山':view.value
|
|
|
|
|
this.monthX.push(value)
|
|
|
|
|
this.monthY.push(view.total)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.showChart = true
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
async getLabel() {
|
|
|
|
|
await getparameter({
|
|
|
|
|
number:'streetList'
|
|
|
|
|
}).then(res=>{
|
|
|
|
|
res.detail.forEach((m,index)=>{
|
|
|
|
|
this.getMapData(m.value,index,res.detail.length-1)
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
async getMapData(street,index1,length) {
|
|
|
|
|
// this.mapList = []
|
|
|
|
|
// this.map.remove(this.marker)
|
|
|
|
|
let res = await index({
|
|
|
|
|
page_size: this.select.page_size,
|
|
|
|
|
page: this.select.page,
|
|
|
|
|
table_name: this.select.table_name,
|
|
|
|
|
show_relation: this.select.show_relation,
|
|
|
|
|
filter: [{
|
|
|
|
|
"key": "street",
|
|
|
|
|
"op": "eq",
|
|
|
|
|
"value": street
|
|
|
|
|
}],
|
|
|
|
|
})
|
|
|
|
|
this.select.total = res.total
|
|
|
|
|
this.mapList.push(...res.data)
|
|
|
|
|
if(index1==length){
|
|
|
|
|
this.getLocations()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
getLocations(){
|
|
|
|
|
let _data = []
|
|
|
|
|
let _nolng = [] //只有地址没有经纬度
|
|
|
|
|
for (var k of this.mapList) {
|
|
|
|
|
if (k.longitude && k.latitude) {
|
|
|
|
|
k.coord = [k.longitude,k.latitude]
|
|
|
|
|
_data.push(k)
|
|
|
|
|
} else {
|
|
|
|
|
if (k.reside == null || k.reside == '') {
|
|
|
|
|
// return
|
|
|
|
|
} else {
|
|
|
|
|
_nolng.push(k)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.mapList = _data
|
|
|
|
|
var geocoder = null
|
|
|
|
|
let that = this
|
|
|
|
|
AMap.plugin("AMap.Geocoder", function() {
|
|
|
|
|
geocoder = new AMap.Geocoder({
|
|
|
|
|
city: '常州' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
|
|
})
|
|
|
|
|
_nolng.map((k, index) => {
|
|
|
|
|
geocoder.getLocation(k.reside, function(status, result) {
|
|
|
|
|
if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// result中对应详细地理坐标信息
|
|
|
|
|
k.longitude = result.geocodes[0].location.lng
|
|
|
|
|
k.latitude = result.geocodes[0].location.lat
|
|
|
|
|
k.coord = [result.geocodes[0].location.lng,result.geocodes[0].location.lat]
|
|
|
|
|
}
|
|
|
|
|
if (index == _nolng.length - 1) {
|
|
|
|
|
that.mapList.push(..._nolng)
|
|
|
|
|
that.showMap = true
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
// this.$refs.echartsMap.mapData = that.mapList
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
@ -360,7 +464,7 @@
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
width: 100%;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
padding: 0 .2rem
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -371,8 +475,9 @@
|
|
|
|
|
margin-top: 0.05rem;
|
|
|
|
|
margin-bottom: 0.1rem;
|
|
|
|
|
background: url(../../assets/jsc/li_type.png) no-repeat left top;
|
|
|
|
|
background-size: 100% auto;
|
|
|
|
|
padding: .15rem
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: .15rem;
|
|
|
|
|
min-width: 32%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.jscL1type img {
|
|
|
|
|
|
