|
|
@ -105,6 +105,15 @@ import nextTick from 'dai-js/tools/nextTick' |
|
|
|
const transparent = 'rgba(2, 2, 2, 0)' |
|
|
|
const polygonColorArray = [ '#f59701', '#0067b6', '#e70014', '#8fc41e', '#00a1be' ] |
|
|
|
const colorArray = [ '#1B51FF', '#00E5ED', '#7800FF', '#16D783', '#FF7800', '#FFBA00', '#FFD685', '#2A00FF', '#C600FF', '#FF2A00'] |
|
|
|
const legendList = [ |
|
|
|
{ name: '#e70014', icon: require('../../../../../assets/img/shuju/volunteer4.png') }, |
|
|
|
{ name: '#f59701', icon: require('../../../../../assets/img/shuju/volunteer5.png') }, |
|
|
|
{ name: '#8fc41e', icon: require('../../../../../assets/img/shuju/volunteer7.png') }, |
|
|
|
{ name: '#00a1be', icon: require('../../../../../assets/img/shuju/volunteer8.png') }, |
|
|
|
{ name: '#0067b6', icon: require('../../../../../assets/img/shuju/volunteer9.png') }, |
|
|
|
{ name: '', icon: require('../../../../../assets/img/shuju/volunteer1.png') } |
|
|
|
] |
|
|
|
const defaultLegendIcon = require('../../../../../assets/img/shuju/volunteer1.png') |
|
|
|
export default { |
|
|
|
name: "duoyuanfuwufenxi", |
|
|
|
data () { |
|
|
@ -142,7 +151,8 @@ export default { |
|
|
|
list: [], |
|
|
|
pageSize: 10, |
|
|
|
pageNo: 1, |
|
|
|
total: 0 |
|
|
|
total: 0, |
|
|
|
categoryCode: '' |
|
|
|
}, |
|
|
|
// 地图相关数据 |
|
|
|
isfirstInit: true, // 记录是否是首次加载地图 |
|
|
@ -150,11 +160,11 @@ export default { |
|
|
|
distributionsList: [], |
|
|
|
legendArray: [], |
|
|
|
iconUrlArray: [ |
|
|
|
require('../../../../../assets/img/shuju/volunteer9.png'), // 其他 |
|
|
|
require('../../../../../assets/img/shuju/volunteer4.png'), // 文化队伍 |
|
|
|
require('../../../../../assets/img/shuju/volunteer5.png'), // 楼委会 |
|
|
|
require('../../../../../assets/img/shuju/volunteer7.png'), // 老友俱乐部 |
|
|
|
require('../../../../../assets/img/shuju/volunteer8.png'), // 治安巡逻 |
|
|
|
require('../../../../../assets/img/shuju/volunteer5.png'), // 楼委会 |
|
|
|
require('../../../../../assets/img/shuju/volunteer9.png'), // 其他 |
|
|
|
require('../../../../../assets/img/shuju/volunteer1.png'), // 采集员 |
|
|
|
require('../../../../../assets/img/shuju/volunteer2.png'), // 代办员 |
|
|
|
require('../../../../../assets/img/shuju/volunteer3.png'), // 能人达人 |
|
|
@ -217,10 +227,10 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
// 加载列表数据 |
|
|
|
async getTable (categoryCode = '') { |
|
|
|
async getTable () { |
|
|
|
const url = "/heart/iccommunityselforganization/category-list" |
|
|
|
const params = { |
|
|
|
categoryCode: categoryCode, |
|
|
|
categoryCode: this.categoryCode, |
|
|
|
pageNo: this.demand.pageNo, |
|
|
|
pageSize: this.demand.pageSize |
|
|
|
} |
|
|
@ -278,18 +288,18 @@ export default { |
|
|
|
|
|
|
|
this.pieData.forEach((item, index) => { |
|
|
|
this.pieTotal = this.pieTotal + item.value |
|
|
|
if (item.value > maxValue) { |
|
|
|
maxValue = item.value |
|
|
|
maxIndex = index |
|
|
|
item.selected = true |
|
|
|
} else if (index !== 0) { |
|
|
|
item.selected = false |
|
|
|
} |
|
|
|
// if (item.value > maxValue) { |
|
|
|
// maxValue = item.value |
|
|
|
// maxIndex = index |
|
|
|
// item.selected = true |
|
|
|
// } else if (index !== 0) { |
|
|
|
// item.selected = false |
|
|
|
// } |
|
|
|
}) |
|
|
|
|
|
|
|
this.pieOption.title.text = this.pieTotal |
|
|
|
|
|
|
|
this.clickPie(maxIndex) |
|
|
|
this.clickPie() // this.clickPie(maxIndex) |
|
|
|
|
|
|
|
let fun = function (params) { |
|
|
|
_that.clickPie(params.dataIndex) |
|
|
@ -309,8 +319,10 @@ export default { |
|
|
|
opacity: 1, |
|
|
|
} |
|
|
|
} |
|
|
|
this.categoryCode = element.code |
|
|
|
this.demand.pageNo = 1 |
|
|
|
this.getTable(element.code) |
|
|
|
this.getTable() |
|
|
|
this.getMapData() |
|
|
|
} else { |
|
|
|
element.label = { |
|
|
|
show: false, |
|
|
@ -368,27 +380,58 @@ export default { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
}, |
|
|
|
getLegendIcon (color) { |
|
|
|
let icon = '' |
|
|
|
legendList.forEach(item => { |
|
|
|
if (item.name == color) { |
|
|
|
icon = item.icon |
|
|
|
} |
|
|
|
}) |
|
|
|
if (!icon) { |
|
|
|
icon = defaultLegendIcon |
|
|
|
} |
|
|
|
return icon |
|
|
|
}, |
|
|
|
getLegendIconIndex (color) { |
|
|
|
let iconIndex = 0 |
|
|
|
this.iconUrlList.forEach((item, index) => { |
|
|
|
if (color == item.color) { |
|
|
|
iconIndex = index |
|
|
|
} |
|
|
|
}) |
|
|
|
return iconIndex |
|
|
|
}, |
|
|
|
async getMapData () { |
|
|
|
this.legendArray = [] |
|
|
|
this.pieData.forEach((item, index) => { |
|
|
|
let ob = { |
|
|
|
optionValue: item.code, |
|
|
|
optionLabel: item.name, |
|
|
|
url: index < this.iconUrlArray.length ? this.iconUrlArray[index] : this.iconUrlArray[0] |
|
|
|
url: this.getLegendIcon(item.color) |
|
|
|
} |
|
|
|
this.legendArray.push(ob) |
|
|
|
}) |
|
|
|
const url = '/heart/iccommunityselforganization/coordinate-list' |
|
|
|
const params = { |
|
|
|
categoryCode: '' |
|
|
|
categoryCode: this.categoryCode |
|
|
|
} |
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
|
if (code === 0) { |
|
|
|
if (this.isfirstInit) { |
|
|
|
this.iconUrlArray = [] |
|
|
|
this.iconUrlList = [] |
|
|
|
data.list.forEach(item => { |
|
|
|
this.iconUrlArray.push(this.getLegendIcon(item.color)) |
|
|
|
this.iconUrlList.push(item) |
|
|
|
}) |
|
|
|
} |
|
|
|
this.distributionsList = [] |
|
|
|
data.list.forEach((item, index) => { |
|
|
|
item.urlIndex = index < this.iconUrlArray.length ? index : 0 |
|
|
|
if (index === 0) { |
|
|
|
item.latitude = "36.07394505338441" |
|
|
|
item.longitude = "120.3868167667315" |
|
|
|
} |
|
|
|
item.urlIndex = this.getLegendIconIndex(item.color) |
|
|
|
// if (index === 0) { |
|
|
|
// item.latitude = "36.07394505338441" |
|
|
|
// item.longitude = "120.3868167667315" |
|
|
|
// } |
|
|
|
this.distributionsList.push(item) |
|
|
|
}) |
|
|
|
// this.distributionsList = data.list |
|
|
|