diff --git a/src/assets/scss/modules/visual/distributionAnalyze.scss b/src/assets/scss/modules/visual/distributionAnalyze.scss
index 5962bd08..77731553 100644
--- a/src/assets/scss/modules/visual/distributionAnalyze.scss
+++ b/src/assets/scss/modules/visual/distributionAnalyze.scss
@@ -119,7 +119,7 @@
height: calc(100vh - 230px);
.g-l {
- width: 50%;
+ width: 40%;
height: calc(100vh - 290px);
.echart-line {
@@ -138,7 +138,56 @@
}
.g-r {
- width: 50%;
- height: calc(100vh - 290px);
+ width: 60%;
+ height: calc(100vh - 250px);
+
+ .r-map {
+ position: relative;
+ height: calc(100vh - 250px - 50px);
+ width: 100%;
+
+ .map {
+ height: 100%;
+ width: 100%;
+ }
+ }
+
+ .r-legend {
+ display: flex;
+ justify-content: center;
+ margin-top: 24px;
+ align-items: center;
+
+ .legend_item {
+ margin-left: 40px;
+ display: flex;
+ align-items: center;
+
+ > span {
+ margin-left: 11px;
+ font-size: 16px;
+ font-family: PingFang SC;
+ font-weight: 400;
+ color: #d2e7ff;
+ }
+
+ .color {
+ width: 20px;
+ height: 10px;
+
+ border-radius: 4px;
+ }
+
+ .color0 {
+ background: #dd2719;
+ }
+ .color1 {
+ background: #edbe00;
+ }
+ .color2 {
+ background: #00e5ed;
+ }
+ }
+ }
}
}
diff --git a/src/assets/scss/modules/visual/processAnalyze.scss b/src/assets/scss/modules/visual/processAnalyze.scss
index 2f228f2e..0cd1f822 100644
--- a/src/assets/scss/modules/visual/processAnalyze.scss
+++ b/src/assets/scss/modules/visual/processAnalyze.scss
@@ -77,6 +77,7 @@
width: 100px;
}
.g-pie {
+ position: relative;
}
}
.l_bottom {
@@ -209,6 +210,10 @@
background-color: #082586;
}
}
+
+ .r-status:hover {
+ cursor: pointer;
+ }
}
.r-legend {
@@ -231,9 +236,6 @@
color: #d2e7ff;
}
}
- .r-legend:hover {
- cursor: pointer;
- }
}
.echart-wr {
@@ -242,10 +244,52 @@
text-align: center;
position: relative;
width: 500px;
- height: 100%;
+ // height: 100%;
box-sizing: border-box;
- .echart-org {
- width: 100%;
- height: 90%;
+}
+
+.g-pie {
+ position: relative;
+ .pie-legend {
+ margin-left: 30px;
+ margin-top: -40px;
+ display: flex;
+ justify-content: center;
+
+ .legend_item {
+ .item_name {
+ margin-left: 5px;
+ font-size: 10px;
+ font-family: PingFang SC;
+ font-weight: 500;
+ color: #eff0f1;
+ }
+ > img {
+ margin-top: -10px;
+ width: 80px;
+ height: 10px;
+ }
+ .item_num {
+ .item_count {
+ font-size: 17px;
+ font-family: PingFang SC;
+ font-weight: 500;
+ color: #ffffff;
+ }
+
+ .item_percent {
+ margin-left: 12px;
+ font-size: 8px;
+ font-family: PingFang SC;
+ font-weight: 300;
+ color: #ffffff;
+ line-height: 18px;
+ }
+ }
+ }
+
+ .item_last {
+ margin-left: 50px;
+ }
}
}
diff --git a/src/views/modules/visual/communityGovern/distributionAnalyze.vue b/src/views/modules/visual/communityGovern/distributionAnalyze.vue
index f75fa2f6..965bd177 100644
--- a/src/views/modules/visual/communityGovern/distributionAnalyze.vue
+++ b/src/views/modules/visual/communityGovern/distributionAnalyze.vue
@@ -41,10 +41,23 @@
ref="lineChart">
-
@@ -57,7 +70,7 @@ import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";
import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
-
+import screenMap from "@/views/modules/visual/components/screen-map";
import { lineOption } from './distributionLineOption.js'
import * as echarts from 'echarts'
@@ -144,11 +157,31 @@ export default {
}
],
-
timeRange: [],
orgId: '',
-
+ isfirstInit: true,
+ mapList: [
+ {
+ orgId: '3115fc83f1db431008a73c553eef1eb5',
+ count: 169
+ },
+ {
+ orgId: '7e57419e6afcdc910d08124c0a1b4eb9',
+ count: 149
+ },
+ {
+ orgId: 'e56ac695b01d9eed8723bde718071df5',
+ count: 219
+ }
+ ],
+ agencyInfo: {},
+ subAgencyArray: [],
+ colorArray: ['#DD2719', '#EDBE00', '#00E5ED'],
+ colorFillArray: ['rgba(221, 39, 25, 0.24)', 'rgba(237, 190, 0, 0.25)', 'rgba(0, 229, 237, 0.16)'],
+ legendArray: [],
+ under: null,
+ above: null
};
},
@@ -161,6 +194,7 @@ export default {
this.userId = this.uid;
this.initData()
await this.getAgencylist()//获取组织级别
+ await this.loadOrgData()
this.getApiData();
},
@@ -204,7 +238,7 @@ export default {
async getApiData () {
await this.getLine()
- // await this.getTable();
+ await this.loadMapData();
},
async getAgencylist () {
@@ -236,9 +270,148 @@ export default {
this.getApiData()
},
+ //加载组织数据
+ async loadOrgData () {
+ const url = "/gov/org/agency/maporg"
+ // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
+ let params = {
+ orgId: this.orgId,
+ level: 'agency'
+ }
+
+ const { data, code, msg } = await requestPost(url, params)
+
+ if (code === 0) {
+
+ this.agencyInfo = data
+ if (!data.latitude) {
+ this.agencyInfo.latitude = 36.072227
+ }
+ if (!data.longitude) {
+ this.agencyInfo.longitude = 120.389455
+ }
+ if (!data.level) {
+ this.agencyInfo.level = 'street'
+ }
+ this.subAgencyArray = []
+ if (data.children && data.children.length > 0) {
+ this.subAgencyArray = data.children
+ } else {
+ this.subAgencyArray = []
+ }
+
+ } else {
+ this.$message.error(msg)
+ }
+
+ },
+
+ async loadMapData () {
+ this.$refs.lineChart.clear()
+
+ const _that = this
+ // this.$refs.lineChart.showLoading()
+ // const url ="/gov/project/project/projectdistributionanalysisright";
+ const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/projectdistributionanalysisright";
+ let params = {
+ orgId: this.orgId,
+ startDate: this.timeRange.length > 0 && this.timeRange[0] || '',
+ endDate: this.timeRange.length > 0 && this.timeRange[1] || ''
+ };
+
+ const { data, code, msg } = await requestPost(url, params);
+
+ if (code === 0) {
+ this.legendArray = []
+ if (data.above) {
+ this.under = data.under
+ this.legendArray.push(
+ {
+ color: this.colorArray[0],
+ name: data.under + '以下'
+ }
+ )
+ }
+
+ if (data.above) {
+ this.above = data.above
+ this.legendArray.push(
+ {
+ color: this.colorArray[1],
+ name: data.under + '-' + data.above
+ }
+ )
+ this.legendArray.push(
+ {
+ color: this.colorArray[2],
+ name: data.above + '以上'
+ }
+ )
+ }
+ if (data.list && data.list.length > 0) {
+ // this.mapList = data.list
+
+
+ } else {
+ this.mapList = []
+ }
+
+ this.mapList.forEach(item => {
+ // debugger
+ for (let i = 0; i < this.subAgencyArray.length; i++) {
+ let agencyItem = this.subAgencyArray[i]
+ if (item.orgId === agencyItem.id) {
+ item.longitude = agencyItem.longitude
+ item.latitude = agencyItem.latitude
+ item.coordinates = agencyItem.coordinates
+
+ if (this.under) {
+ if (item.count < this.under || item.count === this.under) {
+ item.color = this.colorArray[0]
+ item.fillColor = this.colorFillArray[0]
+ }
+
+ if (this.above) {
+ if (item.count > this.under && item.count < this.above) {
+ item.color = this.colorArray[1]
+ item.fillColor = this.colorFillArray[1]
+ } else {
+ item.color = this.colorArray[2]
+ item.fillColor = this.colorFillArray[2]
+ }
+ }
+ }
+ break
+ }
+
+ }
+
+ });
+
+ console.log(this.mapList)
+ this.loadMap()
+ this.isfirstInit = false
+
+ } else {
+ this.$message.error(msg);
+ }
+ },
+
+ loadMap () {
+
+ if (this.isfirstInit) {
+ //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
+ this.$refs.map.loadMap(this.agencyInfo, this.mapList, null, null, null, null,)
+ } else {
+ this.$refs.map.refreshMap(this.mapList, null)
+
+
+ }
+ },
+
lineInitOk (dom) {
- console.log('line准备好了', dom)
+
this.lineInitState = true
@@ -291,10 +464,9 @@ export default {
this.$message.error(msg);
}
-
},
- //解析
+ //解析折线图数据
loadCategoryData () {
this.xaxis = []
@@ -345,15 +517,14 @@ export default {
});
- console.log(this.series)
+
},
handleChangeAgency (value) {
-
this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
this.orgId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
this.getApiData()
- console.log(this.agencyIdArray)
+
},
@@ -369,12 +540,15 @@ export default {
},
},
- computed: {},
+ computed: {
+
+ },
components: {
cptCard,
cptTb,
screenEchartsFrame,
+ screenMap
},
watch: {
diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue
index da631cf2..a151cf58 100644
--- a/src/views/modules/visual/communityGovern/processAnalyze.vue
+++ b/src/views/modules/visual/communityGovern/processAnalyze.vue
@@ -45,6 +45,20 @@
+
+
+
+
{{item.name}}
+
![]()
+
+ {{item.count}}
+ {{item.percent}}
+
+
+
@@ -126,6 +140,21 @@ export default {
],
+ legendArray: [
+ {
+ name: '未结案',
+ count: 120,
+ percent: '25.0%',
+ url: require('../../../../assets/img/shuju/measure/huang@2x.png')
+ },
+ {
+ name: '已结案',
+ count: 351,
+ percent: '50.0%',
+ url: require('../../../../assets/img/shuju/measure/lv@2x.png')
+ }
+ ],
+
dateId: '',
agencyId: '',
status: 'pending',//状态:待处理 pending，结案closed
diff --git a/src/views/modules/visual/communityGovern/processPieOption.js b/src/views/modules/visual/communityGovern/processPieOption.js
index 84062915..b86fc0e9 100644
--- a/src/views/modules/visual/communityGovern/processPieOption.js
+++ b/src/views/modules/visual/communityGovern/processPieOption.js
@@ -23,18 +23,18 @@ const center= ['50%', '200px']
tooltip: {
show: false
},
- legend: {
- top: 350,
- bottom: 0,
- itemWidth: 20,
- itemHeight: 10,
- textStyle: {
- color: '#D2E7FF',
- fontSize: 16,
- lineHeight: 20,
- },
+ // legend: {
+ // top: 350,
+ // bottom: 0,
+ // itemWidth: 20,
+ // itemHeight: 10,
+ // textStyle: {
+ // color: '#D2E7FF',
+ // fontSize: 16,
+ // lineHeight: 20,
+ // },
- },
+ // },
series: [
// 外侧圆环
{
diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue
index 20ee5fad..c2648b0a 100644
--- a/src/views/modules/visual/components/screen-map/index.vue
+++ b/src/views/modules/visual/components/screen-map/index.vue
@@ -66,14 +66,14 @@ var polygonStyleFunction = (function () {
return new Style({
fill: new Fill({
// color: [255, 255, 255, 0.3]
- color: polygonColorArray[feature.values_.index - 1]
+ color: feature.values_.fillColor
}),
stroke: new Stroke({
- color: polygonColorArray[feature.values_.index - 1],
- width: 3
+ color: feature.values_.color,
+ width: 2
}),
- text: createTextStyle(feature)
+ // text: createTextStyle(feature)
});;
};
})()
@@ -142,7 +142,7 @@ const vueGis = {
},
methods: {
- //加载地图
+ //加载地图:地图基本信息，多边形区域信息，多边形icon
loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray, iconTextStyle) {
this.mapInfo = mapInfo
this.polygonArray = polygonArray
@@ -203,26 +203,22 @@ const vueGis = {
//加载多边形
loadPolygon () {
+
polygonSource.clear()//清空多边形标注
let featureData = []//多边形数据数据
- if (polygonArray && polygonArray.length > 0) {//判断是否存在下级标注
+
+ if (this.polygonArray && this.polygonArray.length > 0) {//判断是否存在下级标注
let oneData = {}
- polygonArray.forEach(polygonItem => {
+ this.polygonArray.forEach(polygonItem => {
if (polygonItem.coordinates && polygonItem.coordinates !== '') {//如果有坐标
- let urlNum = this.getRndBetween(1, 3)
oneData = {
type: 'Feature',
- id: polygonItem.id,
- properties: {
- id: polygonItem.id,
- level: polygonItem.level,
- name: polygonItem.name,
- index: urlNum//颜色随机的索引
- },
+
+ properties: { ...polygonItem },
geometry: {
type: 'Polygon',
coordinates: [],
@@ -231,19 +227,19 @@ const vueGis = {
let coorArray = polygonItem.coordinates.split(',')//坐标数组
let itemArray = []//单个点位的[lon,lat]，数组
- let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
+ let tempPolygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
coorArray.forEach((item, index) => {
itemArray.push(item)
if (index % 2 == 0) {//偶
} else {//奇
- polygonArray.push(itemArray)
+ tempPolygonArray.push(itemArray)
itemArray = []
}
});
- oneData.geometry.coordinates.push(polygonArray)
+ oneData.geometry.coordinates.push(tempPolygonArray)
featureData.push(oneData)
}
});