- 新增
- 导出
@@ -103,7 +103,7 @@
:http-request="uploadFile">
导入
+ type="red">导入 -->
diff --git a/src/views/modules/communityService/ninePlaces/places/placesForm.vue b/src/views/modules/communityService/ninePlaces/places/placesForm.vue
index 0a18ea448..44fa73cc7 100644
--- a/src/views/modules/communityService/ninePlaces/places/placesForm.vue
+++ b/src/views/modules/communityService/ninePlaces/places/placesForm.vue
@@ -196,15 +196,15 @@ export default {
},
async addPlace () {
- // const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码
- // if (regPhone.test(this.formData.mobile) === false) {
- // this.btnDisable = false
- // this.$message({
- // type: 'warning',
- // message: '请输入正确的手机号码'
- // })
- // return false;
- // }
+ const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码
+ if (regPhone.test(this.formData.mobile) === false) {
+ this.btnDisable = false
+ this.$message({
+ type: 'warning',
+ message: '请输入正确的手机号码'
+ })
+ return false;
+ }
let url = ''
diff --git a/src/views/modules/visual/communityGovern/distributionAnalyze.vue b/src/views/modules/visual/communityGovern/distributionAnalyze.vue
index c4e04f5ca..965bd177b 100644
--- a/src/views/modules/visual/communityGovern/distributionAnalyze.vue
+++ b/src/views/modules/visual/communityGovern/distributionAnalyze.vue
@@ -1,59 +1,60 @@
- 
- 事件分类分析
-
-
- 事件分类分析
-
-
-
-
+
@@ -103,6 +110,7 @@ import { requestPost } from "@/js/dai/request";
import screenTable from "../components/screen-table/index";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";
+import screenMap from "@/views/modules/visual/components/screen-map";
import * as echarts from 'echarts';
export default {
@@ -110,8 +118,9 @@ export default {
components: {
cptCard,
screenTable,
+ screenMap
},
- data() {
+ data () {
return {
warningList: [],
headerList: [
@@ -135,16 +144,62 @@ export default {
total: 0,
activeIndex: 0,
activeLevel: "1",
+
+ //地图相关数据
+ isfirstInit: true,//记录是否是首次加载地图
+ agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
+ unitMapList: [],
+ unitMapList1: [
+ {
+ type: '党建楼宇',
+ name: '建联单位1',
+ latitude: 36.062227,
+ longitude: 120.389455,
+ },
+ {
+ type: '党建楼宇',
+ name: '建联单位2',
+ latitude: 36.082227,
+ longitude: 120.389455,
+ },
+ {
+ type: '机关直属部门',
+ name: '建联单位3',
+ latitude: 36.062227,
+ longitude: 120.379455,
+ },
+ {
+ type: '两新党建',
+ name: '建联单位4',
+ latitude: 36.082227,
+ longitude: 120.379455,
+ },
+ {
+ type: '辖区单位',
+ name: '建联单位5',
+ latitude: 36.092227,
+ longitude: 120.379455,
+ },
+ {
+ type: '其他',
+ name: '建联单位6',
+ latitude: 36.102227,
+ longitude: 120.379455,
+ }
+ ],
};
},
- async mounted() {
+ async mounted () {
await nextTick(100);
this.initCharts()
this.initCount()
this.getBuildingwarnlist();
+
+ await this.getWorkUserInfo()
+ await this.getMapUnitList()
},
methods: {
- initCharts() {
+ initCharts () {
const eId = document.getElementById('echartService')
let _charts = echarts.init(eId)
let option = {
@@ -192,21 +247,21 @@ export default {
fontWeight: 'bold'
}
},
-
+
data: [
- {
- value: 104,
- name: '党员',
+ {
+ value: 104,
+ name: '党员',
itemStyle: {
color: 'rgba(26, 178, 255, 1)'
- }
+ }
},
- {
- value: 735,
- name: '居民',
+ {
+ value: 735,
+ name: '居民',
itemStyle: {
color: 'rgba(250, 193, 38, 1)'
- }
+ }
}
]
}
@@ -215,7 +270,7 @@ export default {
option && _charts.setOption(option);
},
- initCount() {
+ initCount () {
const eId = document.getElementById('echartCount')
let _charts = echarts.init(eId)
let option = {
@@ -266,21 +321,21 @@ export default {
fontWeight: 'bold'
}
},
-
+
data: [
- {
- value: 1048,
- name: '党员',
+ {
+ value: 1048,
+ name: '党员',
itemStyle: {
color: 'rgba(26, 178, 255, 1)'
- }
+ }
},
- {
- value: 735,
- name: '居民',
+ {
+ value: 735,
+ name: '居民',
itemStyle: {
color: 'rgba(250, 193, 38, 1)'
- }
+ }
}
]
}
@@ -289,15 +344,15 @@ export default {
option && _charts.setOption(option);
},
-
- onClickList(index, level) {
+
+ onClickList (index, level) {
this.activeIndex = index;
this.activeLevel = level;
this.pageNo = 1;
this.getUserwarnlist();
},
//具体人员列表
- async getUserwarnlist() {
+ async getUserwarnlist () {
const { activeIndex, activeLevel, warningList } = this;
const reqItem = warningList[activeIndex];
let tableData = [];
@@ -323,7 +378,7 @@ export default {
}
},
// 【人员预警】 楼宇预警数量列表
- async getBuildingwarnlist() {
+ async getBuildingwarnlist () {
const url = "/epmetuser/statsresiwarn/buildingwarnlist";
let params = {
agencyId: this.$store.state.user.agencyId,
@@ -336,14 +391,109 @@ export default {
} else {
}
},
- pageSizeChangeHandleNew(val) {
+ pageSizeChangeHandleNew (val) {
this.pageNo = 1;
this.pageSize = val;
},
- pageCurrentChangeHandleNew(val) {
+ pageCurrentChangeHandleNew (val) {
this.pageNo = val;
this.getUserwarnlist();
},
+
+ // 获取当前管理员信息
+ getWorkUserInfo () {
+ const url = '/epmetuser/customerstaff/staffbasicinfo'
+ let params = {}
+ window.app.ajax.post(
+ url,
+ params,
+ (data, rspMsg) => {
+ 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'
+ }
+
+ },
+ (rspMsg, data) => {
+ this.$message.error(rspMsg)
+ }
+ )
+
+ },
+
+ //获取联建单位分布图
+ async getMapUnitList () {
+ // const url = "/heart/icpartyunit/distribution"
+ const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
+
+ let params = {
+ agencyId: this.$store.state.user.agencyId
+ }
+
+ const { data, code, msg } = await requestPost(url, params)
+
+ if (code === 0) {
+ // this.unitMapList = data
+ this.unitMapList = this.unitMapList1
+
+ this.unitMapList.forEach(item => {
+
+ if (item.type === '党建楼宇') {
+ item.urlIndex = 0
+ } else if (item.type === '两新党建') {
+ item.urlIndex = 1
+ } else if (item.type === '辖区单位') {
+ item.urlIndex = 2
+ } else if (item.type === '机关直属部门') {
+ item.urlIndex = 3
+ } else if (item.type === '其他') {
+ item.urlIndex = 4
+ }
+ });
+
+
+ this.iconUrlArray = [
+ require('../../../../assets/img/shuju/measure/ly@2x.png'),//未处理
+ require('../../../../assets/img/shuju/measure/jgzs@2x.png'),//已处理
+ require('../../../../assets/img/shuju/measure/lxdj@2x.png'),//已处理
+ require('../../../../assets/img/shuju/measure/xq@2x.png'),//已处理
+ require('../../../../assets/img/shuju/measure/qita.png')//已处理
+ ]
+
+
+ //第一次加载完置为false
+ 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, null, null, this.unitMapList, this.iconUrlArray, null)
+ } else {
+ this.$refs.map.refreshMap(null, this.unitMapList)
+
+ }
+ },
+
+ //点击项目
+ clickProject (feature) {
+ console.log('标注信息', feature.values_.properties)
+ },
},
};
@@ -383,12 +533,11 @@ export default {
color: #fff;
font-weight: 800;
}
-
}
.card-echart {
display: flex;
margin-top: 40px;
-
+
.card-left {
position: relative;
flex: 1;
@@ -432,7 +581,8 @@ export default {
box-sizing: border-box;
margin-top: 20px;
// padding-left: 192px;
- background: url('../../../../assets/img/shuju/measure/dangyuan.png') center no-repeat;
+ background: url("../../../../assets/img/shuju/measure/dangyuan.png") center
+ no-repeat;
background-size: cover;
.card-count-content {
position: relative;
@@ -447,14 +597,14 @@ export default {
.card-count-label {
margin-top: 6px;
font-size: 16px;
- color: rgba(255, 255, 255, .72);
+ color: rgba(255, 255, 255, 0.72);
}
}
.card-count-content::after {
position: absolute;
top: 50%;
left: 0;
- content: '';
+ content: "";
width: 1px;
height: 50px;
margin-top: -25px;
@@ -462,7 +612,8 @@ export default {
}
}
.card-count-item:last-child {
- background: url('../../../../assets/img/shuju/measure/jumin.png') center no-repeat;
+ background: url("../../../../assets/img/shuju/measure/jumin.png") center
+ no-repeat;
}
}
@@ -472,6 +623,7 @@ export default {
flex-wrap: wrap;
padding-top: 10px;
padding-bottom: 20px;
+
.map-tips-item {
display: flex;
align-items: center;
@@ -482,7 +634,7 @@ export default {
height: 10px;
box-sizing: border-box;
margin-right: 10px;
- background: #DD2719;
+ background: #dd2719;
border-radius: 2px;
}
.map-tips-label {
@@ -492,4 +644,17 @@ export default {
}
}
+.card-wr-map {
+ height: calc(100vh - 110px);
+
+ .card-map {
+ width: 100%;
+ height: calc(100vh - 255px);
+
+ .map {
+ width: 100%;
+ height: 100%;
+ }
+ }
+}
+
+ 项目分布分析
-
+ 项目分布分析
-
-
-
+
+
+
不同事件类别在不同时间段的变化和分布
+
+
+
+
+
+
+
-
-
-
-
-
-
+
-
-
-
+
+
@@ -69,8 +70,9 @@ 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 { pieOption } from './typePieOption.js'
+import screenMap from "@/views/modules/visual/components/screen-map";
+import { lineOption } from './distributionLineOption.js'
+import * as echarts from 'echarts'
export default {
@@ -79,77 +81,6 @@ export default {
return {
showNoData: false,
timer: null,
- pieChartS: null,
- pieChart: '',
- pieOption: {},
- pieInitState: false,
- pieTotal: 0,
- colorArray: [],
- pieData: [
- { total: 1048, categoryName: '城市管理', color: '#1B51FF', selected: true },
- { total: 735, categoryName: '为民服务', color: '#00E5ED' },
- { total: 580, categoryName: '安全监管', color: '#7800FF' },
- { total: 484, categoryName: '民政', color: '#16D783' },
- { total: 300, categoryName: '环境保护', color: '#FF7800' },
- { total: 1049, categoryName: '建设管理', color: '#FFBA00' },
- { total: 735, categoryName: '街道吹哨部门报到', color: '#FFD685' },
- { total: 580, categoryName: '社会治安综合', color: '#2A00FF' },
- { total: 484, categoryName: '公安交通管理', color: '#C600FF' },
- { total: 300, categoryName: '卫生计生监管执法', color: '#FF2A00' },
- { total: 484, categoryName: '民生', color: '#3DDA83' },
- { total: 300, categoryName: '街道安全', color: '#FAC126' }
- ],
-
- agencyId: '',
- dateId: '',
- categoryCode: '',
- demand: {
- loading: true,
- colList: [
- {
- align: "center",
- width: "5%",
- },
- {
- align: "center",
- width: "10%",
- },
- {
- align: "center",
- width: "10%",
- },
- {
- align: "center",
- width: "10%",
- },
- {
- align: "center",
- width: "10%",
- },
- {
- align: "center",
- width: "5%",
- },
- {
- align: "center",
- width: "20%",
- },
- {
- align: "center",
- width: "10%",
- },
- {
- align: "center",
- width: "10%",
- },
- ],
- header: ["序号", "项目编号", "类别", "反映渠道", "所属网格", "状态", "项目标题", "转成项目时间", "操作"],
- list: [],
- pageSize: 10,
- pageNo: 1,
- total: 0,
-
- },
casOptions: [],
agencyIdArray: [],
@@ -164,6 +95,94 @@ export default {
checkStrictly: true
},
+ lineChart: '',
+ lineOption: {},
+ lineInitState: false,
+ lineColorArray: [],
+ xaxis: [],
+ series: [],
+ legend: [],
+ lineData: [820, 932, 901, 934, 1290, 1330, 1320],
+ lineList: [
+ {
+ time: '4:00',
+ categoryList: [
+ {
+ categoryCode: '001',
+ count: 100,
+ color: '#1B51FF',
+ name: '分类1'
+ },
+ {
+ categoryCode: '002',
+ count: 200,
+ color: '#00E5ED',
+ name: '分类2'
+ }
+ ]
+ },
+ {
+ time: '5:00',
+ categoryList: [
+ {
+ categoryCode: '001',
+ count: 20,
+ color: '#1B51FF',
+ name: '分类1'
+ },
+ {
+ categoryCode: '002',
+ count: 400,
+ color: '#00E5ED',
+ name: '分类2'
+ }
+ ]
+ },
+ {
+ time: '6:00',
+ categoryList: [
+ {
+ categoryCode: '001',
+ count: 50,
+ color: '#1B51FF',
+ name: '分类1'
+ },
+ {
+ categoryCode: '002',
+ count: 10,
+ color: '#00E5ED',
+ name: '分类2'
+ }
+ ]
+ }
+ ],
+
+ 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
+
};
},
// mixins: [animate]
@@ -175,19 +194,51 @@ export default {
this.userId = this.uid;
this.initData()
await this.getAgencylist()//获取组织级别
+ await this.loadOrgData()
this.getApiData();
},
methods: {
initData () {
- var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
- this.dateId = new Date(time); // 获取的是前一天日期
+ let yesterday = new Date((new Date).getTime() - 24 * 60 * 60 * 1000)
+
+ let year = yesterday.getFullYear()
+ let month = yesterday.getMonth() + 1 //月
+ let day = yesterday.getDate() //日
+
+ var days = new Date(year, month, 0);
+ days = days.getDate(); //获取当前月的天数
+ var year2 = year;
+ var month2 = parseInt(month) - 1;
+ if (month2 == 0) {
+ year2 = parseInt(year2) - 1;
+ month2 = 12;
+ }
+ var day2 = day;
+ var days2 = new Date(year2, month2, 0);
+ days2 = days2.getDate();
+ if (day2 > days2) {
+ day2 = days2;
+ }
+ if (month2 < 10) {
+ month2 = '0' + month2;
+ }
+ var t2 = year2 + '-' + month2 + '-' + day2;
+ var t1 = year + '-' + month + '-' + day;
+ // let t3 = formate(t2, style);
+
+ this.timeRange = [t2, t1]
+
+ },
+ handleSelectChange () {
+ this.getApiData();
},
+
async getApiData () {
- await this.getPie()
- await this.getTable();
+ await this.getLine()
+ await this.loadMapData();
},
async getAgencylist () {
@@ -219,181 +270,264 @@ 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'
+ }
- pieInitOk (dom) {
- console.log('pie准备好了', dom)
- this.pieChartS = dom
- this.pieInitState = true
+ 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 = []
+ }
- },
- getPie () {
- if (this.pieInitState) {
- this.getPieChart()
} else {
- setTimeout(() => {
- this.getPie()
- }, 500)
+ this.$message.error(msg)
}
+
},
- // 获取饼状图
- async getPieChart () {
- this.$refs.pieChart.clear()
- this.pieTotal = 0
+
+ async loadMapData () {
+ this.$refs.lineChart.clear()
+
const _that = this
- // this.$refs.pieChart.showLoading()
- // const url ="/data/aggregator/project/projectcategorylist";
- const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectcategorylist";
+ // this.$refs.lineChart.showLoading()
+ // const url ="/gov/project/project/projectdistributionanalysisright";
+ const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/projectdistributionanalysisright";
let params = {
- agencyId: this.agencyId,
- dateId: this.dateId,
+ 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);
- // 获取pieChart配置
if (code === 0) {
- // 获取pieChart配置
- this.pieOption = pieOption(this.pieChartS)
- if (data && data.length > 0) {
- // this.pieData = data
-
- } else {
- this.pieData = [{ total: 0, categoryName: '无分类', color: '#00E5ED' }]
+ this.legendArray = []
+ if (data.above) {
+ this.under = data.under
+ this.legendArray.push(
+ {
+ color: this.colorArray[0],
+ name: data.under + '以下'
+ }
+ )
}
- let maxValue = this.pieData[0].total
- let maxIndex = 0
- this.pieData[0].selected = true
- this.pieData.forEach((item, index) => {
- item.name = item.categoryName
- item.value = item.total
- this.colorArray.push(item.color)
- 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 (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
+ }
- this.pieOption.title.text = this.pieTotal
- this.pieOption.series[1].itemStyle = {
- color: function (params) {
- return _that.colorArray[params.dataIndex]
}
- }
+ });
- let fun = function (params) {
- _that.clickPie(params.dataIndex)
+ console.log(this.mapList)
+ this.loadMap()
+ this.isfirstInit = false
- _that.categoryCode = _that.pieData[params.dataIndex].categoryCode
- _that.getTable()
- }
- this.$refs.pieChart.handleClick(fun)
- this.clickPie(maxIndex)
} else {
this.$message.error(msg);
}
-
},
- clickPie (seriesIndex) {
- this.pieData.forEach((element, index) => {
- if (index === seriesIndex) {
- element.label = {
- show: true,
-
- };
- element.labelLine = {
- show: true,
- lineStyle: {
- opacity: 1,
- }
+ loadMap () {
- };
- console.log('zhilma')
+ 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)
- } else {
- element.label = {
- show: false,
-
- };
- element.labelLine = {
- show: false,
- lineStyle: {
- opacity: 0,
- color: 'rgba(255,255,255,0)'
- }
- };
+ }
+ },
- }
- });
- this.pieOption.series[1].data = this.pieData
- // this.$refs.pieChart.hideLoading()
- this.$refs.pieChart.setOption(this.pieOption)
- },
+ lineInitOk (dom) {
- handleChangeAgency (value) {
- this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
- this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
- this.getApiData()
- console.log(this.agencyIdArray)
+ this.lineInitState = true
+
+ },
+ getLine () {
+ if (this.lineInitState) {
+ this.getLineChart()
+ } else {
+ setTimeout(() => {
+ this.getLine()
+ }, 500)
+ }
},
+ // 获取折线图
+ async getLineChart () {
+ this.$refs.lineChart.clear()
- //加载组织数据
- async getTable () {
- // const url = "/data/aggregator/project/categoryprojectlist";
- const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/categoryprojectlist";
+ const _that = this
+ // this.$refs.lineChart.showLoading()
+ // const url ="/gov/project/project/projectdistributionanalysisleft";
+ const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/projectdistributionanalysisleft";
let params = {
- dateId: this.dateId,
- agencyId: this.agencyId,
- categoryCode: this.categoryCode,
- pageNo: this.demand.pageNo,
- pageSize: this.demand.pageSize,
- isPage: true
+ 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);
- this.demand.loading = false;
if (code === 0) {
- this.demand.total = data.total;
- this.demand.list = data.list.map((item) => {
- //楼院小组:issue； 项目立项:agency 事件上报:resi_event【也可控制点击查看时里边三个按钮的显示】
- item.originShow = item.origin === 'issue' ? '楼院小组' : item.origin === 'agency' ? '项目立项' : '事件上报'
- //状态:待处理 pending，已结案closed
- item.statusShow = item.status === 'pending' ? '待处理' : '已结案'
- return [
- { type: "index" },
- item.projectCode,
- item.categoryNames.join(','),
- item.originShow,
- item.gridName,
- item.statusShow,
- item.title,
- item.time,
- { type: "operate", list: ["查看"] },
- ];
- });
+ // 获取pieChart配置
+ this.lineOption = lineOption()
+
+ if (data && data.length > 0) {
+
+ this.loadCategoryData()
+
+ } else {
+
+ }
+ this.$refs.lineChart.setOption(this.lineOption, true)
+ this.$refs.lineChart.setOption({
+ xAxis: { data: this.xaxis },
+ legend: { data: this.legend },
+ series: this.series
+ }, true)
+
+
} else {
this.$message.error(msg);
}
+
+ },
+
+ //解析折线图数据
+ loadCategoryData () {
+
+ this.xaxis = []
+ this.series = []
+ this.legend = []
+ let num = this.lineList[0].categoryList.length
+
+ let dataArray = new Array(num)
+ //遍历每个分类
+ this.lineList[0].categoryList.forEach((categoryItem, index) => {
+ this.legend.push(categoryItem.name)
+ dataArray[index] = []
+
+ });
+
+ //遍历每个时间
+ this.lineList.forEach(item => {
+ this.xaxis.push(item.time)
+
+ //遍历每个分类
+ item.categoryList.forEach((categoryItem, index) => {
+ dataArray[index].push(categoryItem.count)
+ });
+
+ });
+
+ //遍历第一组的分类
+ this.lineList[0].categoryList.forEach((categoryItem, index) => {
+
+ let object = {
+ name: categoryItem.name,
+ type: 'line',
+ barWidth: 15,
+ areaStyle: {},
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(
+ 0, 1, 0, 0,
+ [
+ { offset: 0, color: 'rgba(121, 55, 255, 0)' },
+ { offset: 1, color: categoryItem.color }
+ ]
+ )
+ },
+ data: dataArray[index]
+ }
+
+ this.series.push(object)
+
+
+ });
+
},
- handlePageNoChange_demand (val) {
- this.demand.pageNo = val;
- this.getTable();
+ handleChangeAgency (value) {
+ this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
+ this.orgId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
+ this.getApiData()
+
},
+
+
toUserInfo (uid) {
this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
},
@@ -406,12 +540,15 @@ export default {
},
},
- computed: {},
+ computed: {
+
+ },
components: {
cptCard,
cptTb,
screenEchartsFrame,
+ screenMap
},
watch: {
diff --git a/src/views/modules/visual/communityGovern/distributionLineOption.js b/src/views/modules/visual/communityGovern/distributionLineOption.js
index ef7dec010..ac8970267 100644
--- a/src/views/modules/visual/communityGovern/distributionLineOption.js
+++ b/src/views/modules/visual/communityGovern/distributionLineOption.js
@@ -2,7 +2,18 @@ import * as echarts from 'echarts'
export function lineOption () {
return {
-
+ legend: {
+ textStyle: {
+ color: '#D2E7FF',
+ fontSize: 16,
+
+ },
+ itemWidth: 20,
+ itemHeight: 10,
+ // top: 350,
+ bottom: 0,
+ data: []
+ },
xAxis: {
type: 'category',
// boundaryGap: false,
@@ -51,21 +62,22 @@ export function lineOption () {
}
},
series: [
- {
- name: '项目数',
- type: 'line',
- barWidth: 15,
- areaStyle: {},
- itemStyle: {
- color: new echarts.graphic.LinearGradient(
- 0, 1, 0, 0,
- [
- { offset: 0, color: 'rgba(121, 55, 255, 0)' },
- { offset: 1, color: '#6339FF' }
- ]
- )
- }
- },
+ // {
+ // name: '项目数',
+ // type: 'line',
+ // barWidth: 15,
+ // areaStyle: {},
+ // itemStyle: {
+ // color: new echarts.graphic.LinearGradient(
+ // 0, 1, 0, 0,
+ // [
+ // { offset: 0, color: 'rgba(121, 55, 255, 0)' },
+ // { offset: 1, color: '#6339FF' }
+ // ]
+ // )
+ // },
+ // data: [120, 132, 101, 134, 90, 230, 210]
+ // },
// {
// data: [820, 932, 901, 934, 1290, 1330, 1320],
// type: 'line',
diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue
index da631cf24..a151cf589 100644
--- a/src/views/modules/visual/communityGovern/processAnalyze.vue
+++ b/src/views/modules/visual/communityGovern/processAnalyze.vue
@@ -45,6 +45,20 @@
+
+
+ {{item.name}}
+
+
+
+ ![]()
+
+ {{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 840629157..b86fc0e93 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 20ee5fadd..c2648b0ad 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)
}
});
diff --git a/src/views/modules/visual/measure/volunteer.vue b/src/views/modules/visual/measure/volunteer.vue
index 3f2728f29..8850c5402 100644
--- a/src/views/modules/visual/measure/volunteer.vue
+++ b/src/views/modules/visual/measure/volunteer.vue
@@ -2,7 +2,8 @@
-
+
- 
+
+
志愿者服务情况
@@ -26,11 +27,12 @@
-
+
-
+
@@ -51,17 +53,19 @@
-
+
-
+
-
+
+
多元化治理平面图
@@ -91,7 +95,10 @@
- 这里是地图容器
+