From 5558db3d9ed676f0698fc757df391413b2a87bae Mon Sep 17 00:00:00 2001 From: jiangyy Date: Thu, 21 Apr 2022 17:20:07 +0800 Subject: [PATCH 1/4] 11 --- src/views/modules/base/community/buildTable.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/views/modules/base/community/buildTable.vue b/src/views/modules/base/community/buildTable.vue index 4edc6b48..dc67bf6a 100644 --- a/src/views/modules/base/community/buildTable.vue +++ b/src/views/modules/base/community/buildTable.vue @@ -92,6 +92,9 @@ + + From 0b355cccb2b5a6140915cc2480b0068fd0f10554 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Fri, 22 Apr 2022 11:00:02 +0800 Subject: [PATCH 2/4] 111 --- src/router/index.js | 5 + .../visual/basicinfo/basicInfoCommunity.vue | 3 + .../basicinfo/houseStatic/houseStatic.vue | 1099 +++++++++++++++++ .../visual/basicinfo/houseStatic/options.js | 176 +++ 4 files changed, 1283 insertions(+) create mode 100644 src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue create mode 100644 src/views/modules/visual/basicinfo/houseStatic/options.js diff --git a/src/router/index.js b/src/router/index.js index 866ee5f0..a39738d7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -239,6 +239,11 @@ router.beforeEach((to, from, next) => { name: "人员类别分析", id: "5fwaefwaefawef5", }, + { + url: "/visual/basicinfo/houseStatic/houseStatic", + name: "人房概览统计", + id: "5fwaefwaefawef6", + }, ], }, { diff --git a/src/views/modules/visual/basicinfo/basicInfoCommunity.vue b/src/views/modules/visual/basicinfo/basicInfoCommunity.vue index 7cd5384b..4cc2f402 100644 --- a/src/views/modules/visual/basicinfo/basicInfoCommunity.vue +++ b/src/views/modules/visual/basicinfo/basicInfoCommunity.vue @@ -184,6 +184,8 @@ export default { if (this.selBuildingId) { await this.loadRoom() + } else { + this.roomArray = [] } }, @@ -250,6 +252,7 @@ export default { //点击用户 handleClickUser (userId) { + this.handleCloseAllUser() this.$emit('toSubAgency', 'people', userId, "") }, //获取右侧infolist数据 diff --git a/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue b/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue new file mode 100644 index 00000000..d4fe6613 --- /dev/null +++ b/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue @@ -0,0 +1,1099 @@ + + + + + + diff --git a/src/views/modules/visual/basicinfo/houseStatic/options.js b/src/views/modules/visual/basicinfo/houseStatic/options.js new file mode 100644 index 00000000..ba0ddd33 --- /dev/null +++ b/src/views/modules/visual/basicinfo/houseStatic/options.js @@ -0,0 +1,176 @@ + +export function pieOption (_charts) { + const center= ['50%', '50%'] + return { + title: { + text: '0', + top: 125, + left: 196, + textAlign: 'center', + textStyle: { + width: '100%', + fontSize: 32, + color: '#FFFFFF', + fontWeight: 400, + align: 'center' + }, + itemGap: 5, + subtext: '总数', + subtextStyle: { + fontSize: 16, + color: '#fff', + fontWeight: 400, + align: 'center' + } + }, + tooltip: { + show: false + }, + legend: { + top: 500, + bottom: 0, + itemWidth: 20, + itemHeight: 10, + textStyle: { + color: '#D2E7FF', + fontSize: 16, + lineHeight: 20, + }, + + }, + series: [ + // 外侧圆环 + { + type: 'pie', + // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 + startAngle: 90, + hoverAnimation: false, + // tooltip: { + // }, + center: center, + left: 'left', + radius: ['60%', '70%'], + width: 400, + label: { + show: false + }, + labelLine: { + show: false + }, + data: [{ + value: 480, + itemStyle: { + color: 'rgba(40, 101, 250, 0)', + width:0, + borderColor: 'rgba(40, 101, 250, 0.5)', + borderWidth: 1, + borderType: 'dotted' + } + } + ] + }, + + // 突出的 + { + hoverAnimation: false, + type: 'pie', + center: center, + radius: ['40%', '60%'], + avoidLabelOverlap: false, + selectedMode: 'single', + left: 'left', + width: 400, + startAngle: 90, + label: { + // show: false, + position: 'outside', + alignTo: 'edge', + // formatter: '{a|{c}}\n\n{name|{b}}', + formatter: '{a|{c}}\n{r|}\n{name|{b}}', + minMargin: 5, + edgeDistance: 1, + lineHeight: 15, + color: '#fff', + fontSize: 12, + // distanceToLabelLine: -60, + rich: { + name: { + padding: [0, 6, 0, 6] + }, + a: { + fontSize: 30, + color: '#fff', + padding: [0, 6, 6, 6] + }, + r: { + backgroundColor: 'auto', + borderRadius: 6, + width: 6, + height: 6, + // padding: [3, 3, 0, -12] + } + } + }, + labelLine: { + show: false, + smooth: 0.2, + length: 30, + length2: 0, + maxSurfaceAngle: 80 + }, + labelLayout: function (params) { + + const isLeft = params.labelRect.x < _charts.getWidth() / 2; + const points = params.labelLinePoints; + // Update the end point. + if (points) { + points[2][0] = isLeft + ? params.labelRect.x + : params.labelRect.x + params.labelRect.width; + } + + return { + labelLinePoints: points + }; + }, + itemStyle: { + + }, + data: [], + + }, + // 中间圆环 + { + type: 'pie', + // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 + startAngle: 90, + hoverAnimation: false, + center: center, + left: 'left', + width: 400, + // tooltip: { + // }, + radius: ['0%', '25%'], + label: { + + show: false + + }, + labelLine: { + show: false + + }, + data: [ + { + value: 360, + itemStyle: { + color: 'rgba(8, 37, 134, 1)', + } + } + ] + }, + ] + + } + } + \ No newline at end of file From 6c14ae5d890ac17d85ad6bce948cfb022feb8deb Mon Sep 17 00:00:00 2001 From: jiangyy Date: Sun, 24 Apr 2022 17:37:41 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E4=BA=BA=E6=88=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/shuju/logo1.png | Bin 0 -> 417 bytes .../scss/modules/visual/houseStatic.scss | 324 ++++ .../basicinfo/houseStatic/houseStatic.vue | 1344 +++++------------ .../visual/basicinfo/houseStatic/options.js | 92 +- .../basicinfo/houseStatic/userOptions.js | 182 +++ .../visual/communityGovern/typeAnalyze.vue | 4 +- 6 files changed, 958 insertions(+), 988 deletions(-) create mode 100644 src/assets/img/shuju/logo1.png create mode 100644 src/assets/scss/modules/visual/houseStatic.scss create mode 100644 src/views/modules/visual/basicinfo/houseStatic/userOptions.js diff --git a/src/assets/img/shuju/logo1.png b/src/assets/img/shuju/logo1.png new file mode 100644 index 0000000000000000000000000000000000000000..1297692bc1014e52bd8d2be72fef9477560b6a85 GIT binary patch literal 417 zcmV;S0bc%zP)Px$TS-JgR5(w?lRqfNK^(?EPbh`*XRsJ7lm&${kr>IJT~Z2@Nla`q%cMw@7|3R! z-kB0v6ejF=^OC_=S2w)f`@2`aQf|C^?sLyQ_ne3fGaCZdfVx2P4lGOBNZP6*z$>6F zvi>TmIxR2*^hSX9lA6*2Pl5gj@K#dGzXQ*Ku86~DNeyWo9s*+#;I*XoR6r;8)u{j` zfGS`e_>y!KYe!;j%xuI1o`7#)#rJU35=na@xBzHo$3Qc10yKK?iwD;NpTL99 zw^UMhK2&Drt~3i&`jcmX9bjLQgBA=k>j4IVdBC~6b5Q`h4tN1{Ml#uyG?l+*W(&Y- zME~f377G}-l++ObT_nTNM=`UkziyJ|OwvFA+yW*ez^rrl=7aw;;0I71IWZ%tFL3A{ zY&@dR{g&a4q}BlFNNAK>5zn!Jo^12m%h00000 LNkvXXu0mjfdK9e5 literal 0 HcmV?d00001 diff --git a/src/assets/scss/modules/visual/houseStatic.scss b/src/assets/scss/modules/visual/houseStatic.scss new file mode 100644 index 00000000..b2985d0a --- /dev/null +++ b/src/assets/scss/modules/visual/houseStatic.scss @@ -0,0 +1,324 @@ +.card-title { + + display: flex; + align-items: center; + cursor: pointer; + .title-icon { + display: block; + width: 46px; + height: 34px; + box-sizing: border-box; + margin-right: 6px; + } + ::v-deep .el-dropdown { + font-size: 18px; + color: #fff; + font-weight: 800; + } + .title-time { + display: flex; + align-items: center; + box-sizing: border-box; + margin-left: 30px; + font-size: 14px; + color: #fff; + .title-time-label { + margin-right: 10px; + } + ::v-deep .el-date-editor--month { + width: 100px; + .el-input__inner { + width: 100px; + height: 24px; + box-sizing: border-box; + padding: 0; + font-size: 14px; + color: #fff; + line-height: 24px; + text-align: center; + background: #06186d; + border: 1px solid #1a64cc; + border-radius: 2px; + } + .el-input__prefix { + display: none; + } + .el-input__suffix { + right: 0; + .el-input__icon { + line-height: 24px; + } + } + } + } + .title-label { + font-size: 20px; + font-weight: 800; + ::v-deep .el-input { + width: 180px; + .el-input__inner { + font-size: 18px; + // font-weight: 800; + color: #fff; + background: #06186d; + border: 1px solid #1a64cc; + } + .el-icon-arrow-down::before { + content: "\e790"; + } + } + } +} +.card-left-title { + margin-top: 20px; + position: relative; + padding-left: 40px; + font-size: 16px; + font-weight: 500; + color: #fff; +} +.card-left-title::after { + content: ""; + position: absolute; + top: 5%; + left: 20px; + width: 12px; + height: 12px; + box-sizing: border-box; + + background: #2865fa; + border-radius: 50%; +} +.card-echart { + min-height: 500px; + display: flex; + margin-top: 10px; + height: 100%; + .card-left { + position: relative; + flex-grow:0; + flex-shrink:0; + width:50%; + + height: 100%; + .div-chart{ + display: flex; + width: 100%; + .echart-wr{ + flex-shrink: 0; + height: 420px; + width: 70%; + } + .div-tip{ + flex-shrink: 0; + width: 30%; + display: flex; + flex-direction: column; + justify-content: center; + margin-left:20px; + margin-top: -23px; + + display: flex; + justify-content: center; + + .legend_item { + margin-top: 30px; + .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; + } + + } + + } + + .div-tip2{ + flex-shrink: 0; + width: 30%; + display: flex; + flex-direction: column; + justify-content: center; + margin-left:20px; + margin-top: -23px; + + display: flex; + justify-content: center; + .cz-tip{ + display: flex; + justify-content: flex-start; + margin-top: 30px; + + .cz-tip-dot { + margin-top:2px; + width: 20px; + height: 10px; + background: #1B51FF; + border-radius: 4px; + } + + >span{ + margin-left:10px; + } + } + + .ld-tip{ + display: flex; + justify-content: flex-start; + margin-top: 30px; + + .ld-tip-dot{ + margin-top:2px; + width: 20px; + height: 10px; + background: #00E5ED; + border-radius: 4px; + } + >span{ + margin-left:10px; + } + } + + + + } + } + + .pie-table{ + margin-top:0px; + display: flex; + justify-content: center; + align-items:center; + + + } + + .loading-status{ + width: 100%; + display: flex; + justify-content: center; + margin-top: 500px; + + + } + } + +} + +.card-table{ + margin:37px 70px 0; + + .table_item{ + padding:31px 60px 36px 30px; + + .item_name{ + + font-size: 18px; + font-family: PingFang SC; + font-weight: bold; + color: #FFFFFF; + + >img{ + width:25px; + height:14px; + padding-right: 10px; + } + } + + .item_name:hover{ + cursor: pointer; + } + + .item_data{ + margin-top:31px; + display: flex; + justify-content: space-between; + } + + .item_left{ + align-items: center; + display: flex; + justify-content: space-around; + + } + .item_right{ + align-items: center; + display: flex; + justify-content: space-around; + // margin-left:250px; + } + + } + + .item_dark{ + background: #082586; + opacity: 0.85; + } +} + +.pie-table-total{ + margin-left:60px; + .pie-table-total-count{ + text-align: center; + font-size: 40px; + font-family: PingFang SC; + font-weight: bold; + color: #FFFFFF; + } + + .zz{ + font-size: 35px; + font-family: PingFang SC; + font-weight: bold; + color: #FAC126; + } + + .cz{ + font-size: 35px; + font-family: PingFang SC; + font-weight: bold; + color: #45D97F; + } + + .xz{ + font-size: 35px; + font-family: PingFang SC; + font-weight: bold; + color: #2865FA; + } + + .pie-table-title{ + margin-top:7px; + text-align: center; + font-size:10px; + font-family: PingFang SC; + font-weight: 400; + color: #FFFFFF; + min-width:62px; + } + + .table-table-title{ + margin-top:2px; + } +} + +.pie-table-line{ + margin-left:60px; + height:30px; + width:1px; + background-color: #1797FF; + opacity: 0.5; +} + +.table-table-line{ + +} + diff --git a/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue b/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue index d4fe6613..4ca90aff 100644 --- a/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue +++ b/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue @@ -5,118 +5,160 @@
- 人房概览统计   - - + 人房概览统计 +
+
本级人房概览数据统计
+
-
党员年龄统计
-
-
- - - -
-
-
-
-
- {{ item.name }} -
-
-
{{item.value}}
-
{{ item.radio }}
-
-
+
+ + +
+
+
{{item.name}}
+
-
- 导出 -
-
- - +
-
党员学历统计
-
-
- - - +
+ + +
+
+
+ 常住人口数 +
+
+
+ 流动人口数 +
-
-
-
-
-
{{item.name}}
-
-
+
+ +
+
+
{{userData.userTotal}}
+
居民总数
+
+
+
+
{{userData.czUserTotal}}
+
常住人口数
+
+
{{userData.ldUserTotal}}
+
流动人口数
+
+
-
- 导出 + +
+ 加载中
-
- - +
+ +
下级人房概览数据统计
+ +
+
+
+ + {{item.orgName}} +
+ +
+
+
+
{{houseData.houseTotal}}
+
房屋总数
+
+
+
+
{{houseData.zzHouseTotal}}
+
0.0%
+
自住房屋数
+
+
+
{{houseData.czHouseTotal}}
+
20%
+
出租房屋数
+
+
+
{{houseData.xzHouseTotal}}
+
99.0%
+
闲置房屋数
+
+
+
+
+
{{userData.userTotal}}
+
居民总数
+
+
+
+
{{userData.czUserTotal}}
+
0.00%
+
常住人口数
+
+
+
{{userData.ldUserTotal}}
+
99.99%
+
流动人口数
+
+
@@ -132,7 +174,9 @@ import screenTable from "../../components/screen-table/index"; import cptCard from "@/views/modules/visual/cpts/card"; import nextTick from "dai-js/tools/nextTick"; import screenEchartsFrame from "../../components/screen-echarts-frame"; -import { pieOption } from './options' +import ScreenLoading from "@/views/modules/visual/components/screen-loading"; +import { housePieOption } from './options' +import { userPieOption } from './userOptions' import * as echarts from 'echarts'; export default { @@ -140,355 +184,280 @@ export default { components: { cptCard, screenTable, - screenEchartsFrame + screenEchartsFrame, + ScreenLoading }, data () { return { - headerList: [ - { title: "序号", coulmn: 'index' }, - { title: "姓名", coulmn: 'name' }, - { title: "年龄", coulmn: 'age' }, - { title: "手机号码", coulmn: 'mobile' } - ], - headerStyle: [ - { - width: '50px' - }, + dataLoading: true, + orgId: '', + orgType: '', + + housePieChartS: null, + housePieChart: '', + housePieOption: {}, + housePieInitState: false, + houseData: { + orgId: '',//组织、网格、小区Id + orgType: '',//组织、网格、小区类型 agency grid village + houseTotal: 198000,//房屋总数 + zzHouseTotal: 2000,//房屋自住总数 + zzHouseRatio: '90%',//房屋自住总数占比（保留两位小数，带百分号的） + czHouseTotal: 30,//房屋出租总数 + czHouseRatio: '5%',//房屋出租总数占比（保留两位小数，带百分号的） + xzHouseTotal: 200,//房屋闲置总数 + xzHouseRatio: '70%',//房屋闲置总数占比（保留两位小数，带百分号的） + }, + houseColorArray: ['#FAC126', '#3DDA83', '#2865FA'], + housePieData: [], + + legendArray: [ { - 'min-width': '100px' + name: '自住房屋数', + url: require('../../../../../assets/img/shuju/measure/huang@2x.png') }, { - 'min-width': '100px' + name: '出租房屋数', + url: require('../../../../../assets/img/shuju/measure/lv@2x.png') }, { - 'min-width': '160px' + name: '闲置房屋数', + url: require('../../../../../assets/img/shuju/measure/lan@2x.png') } ], - headerEduList: [ - { title: "序号", coulmn: 'index' }, - { title: "姓名", coulmn: 'name' }, - { title: "学历", coulmn: 'education' }, - { title: "手机号码", coulmn: 'mobile' } - ], - tableData: [ - // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], - ], - noInit: false, - noEduInit: false, - selectAgency: null, - ageTotalCount: 0, - eduTotalCount: 0, - propTree: [], - value2: '', - visibleAgeLoading: true, - visibleLoading: true, - agencyId: '', - orgType: '', - ageCode: '', - eduCode: '', - pageNo: 1, - pageSize: 10, - agePageNo: 1, - agePageSize: 10, - total: 0, - ageTotal: 0, - eduItem: [ - { - name: '小学', - value: 0, - color: 'rgba(27, 81, 255, 1)' - }, { - name: '初中', - value: 1, - color: 'rgba(0, 229, 237, 1)' - }, { - name: '高中', - value: 2, - color: 'rgba(120, 0, 255, 1)' - }, { - name: '中专', - value: 3, - color: 'rgba(255, 120, 0, 1)' - }, { - name: '大专', - value: 4, - color: 'rgba(255, 186, 0, 1)' - }, { - name: '本科', - value: 5, - color: 'rgba(22, 215, 131, 1)' - }, { - name: '硕士', - value: 6, - color: 'rgba(42, 0, 255, 1)' - }, { - name: '博士', - value: 7, - color: 'rgba(198, 0, 255, 1)' - }, { - name: '其他', - value: 8, - color: 'rgba(255, 42, 0, 1)' - } - ], - ageItem: [ + + userPieChartS: null, + userPieChart: '', + userPieOption: {}, + userPieInitState: false, + userData: { + orgId: '',//组织、网格、小区Id + orgType: '',//组织、网格、小区类型 agency grid village + userTotal: 198000,//居民总数 + czUserTotal: 2000,//常住居民总数 + czUserRatio: '90%',//常住居民总数占比 + ldUserTotal: 30,//流动居民总数 + ldUserRatio: '5%',//流动居民总数占比 + + }, + userColorArray: ['#1B51FF', '#00E5ED'], + userPieData: [], + + subList: [ { - name: '50岁以下', - value: 1, - color: 'rgba(27, 81, 255, 1)' - }, { - name: '50-59岁', - value: 2, - color: 'rgba(0, 229, 237, 1)' - }, { - name: '60-69岁', - value: 3, - color: 'rgba(120, 0, 255, 1)' - }, { - name: '70-79岁', - value: 4, - color: 'rgba(255, 120, 0, 1)' - }, { - name: '80岁以上', - value: 5, - color: 'rgba(255, 186, 0, 1)' + orgId: '', } - ], - ageList: [], - eduList: [], - pieAgeChartS: null, - pieEduChartSs: null, - pieAgeOptions: null, - pieEduOptions: null + ] + }; }, async mounted () { - await nextTick(100); - await this.getAgencyList() - this.getAgeCount(this.$store.state.user.agencyId, 'agency') - this.getEduCount(this.$store.state.user.agencyId, 'agency') - // this.initAgeCharts() - // this.initEduCharts() - this.getAgeList(this.$store.state.user.agencyId, 'agency') - this.getEduList(this.$store.state.user.agencyId, 'agency') - // this.initChartType() + this.dataLoading = true + await this.getApiData() + this.dataLoading = false }, methods: { - pieInitOk (dom) { + async getApiData () { + + + await this.getHousechart() + await this.getUserchart() + await this.getSubuserhouselist() + + this.getHousePie() + this.getUserPie() + }, + housePieInitOk (dom) { console.log('pie准备好了', dom) - this.pieAgeChartS = dom - // this.pieInitState = true + this.housePieChartS = dom + this.housePieInitState = true }, - pieInitOks (dom) { - console.log('pies准备好了', dom) - this.pieEduChartS = dom - // this.pieInitState = true + userPieInitOk (dom) { + console.log('pie准备好了', dom) + this.userPieChartS = dom + this.userPieInitState = true }, - initAgeCharts () { - // const eId = document.getElementById('echartOrg') - // let _charts = echarts.init(eId) - let option = { + + async getHousechart (node, resolve) { + if (this.$refs.housePieChart) { + this.$refs.housePieChart.showLoading() } - this.pieAgeOptions = pieOption(this.pieAgeChartS) - this.clickAgePie(0) - let fun = params => { - this.clickAgePie(params.dataIndex) - } - this.$refs.ageChart.handleClick(fun) - // option && this.$refs.pieChart.setOption(option); + const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/housechart"; + // const url = '/gov/org/house/housechart' + let params = { + orgId: this.orgId, + orgType: this.orgType + }; + const { data, code, msg } = await requestPost(url, params); + if (code === 0) { + // this.houseData = data + if (this.$refs.housePieChart) { + this.$refs.housePieChart.hideLoading() + } + + + } else { + this.houseData = {} + this.$message.error(msg); + } }, - initEduCharts () { - // const eId = document.getElementById('echartOrg') - // let _charts = echarts.init(eId) - let option = { + getHousePie () { + if (this.housePieInitState) { + this.assignHousePieChart() + } else { + setTimeout(() => { + this.getHousePie() + }, 500) } - let legend = { - show: true, - orient: 'vertical', - top: '20%', - right: 0, - textStyle: { - width: 90, - color: '#fff', - rich: { - a: { - width: 90 - } - } - }, - formatter: name => { - for (let a = 0; a < this.eduItem.length; a++) { - // this.data 这个数据中有名称和次数 - if (this.eduItem[a].name === name) { - //两个名称进行对比，取出对应的次数 - let params1 = name + "\n"; //然后return你需要的legend格式即可 - console.log(params1); - let tmp = params1.split("\n"); - let res = "" + params1; - for (let i in tmp) { - res = res.replace(tmp[i], ""); - } - return res + params1; - } + }, + assignHousePieChart () { + + if (this.houseData) { + this.$refs.housePieChart.setNoData(false) + this.$refs.housePieChart.clear() + this.housePieData = [] + + const _that = this + // 获取pieChart配置 + this.housePieOption = housePieOption(this.housePieChartS) + // let maxValue = this.housePieData[0].total + // let maxIndex = 0 + + let obj1 = { + name: '自住房屋数', + value: 20.1, + selected: true + } + let obj2 = { + name: '出租房屋数', + value: 20.3 + } + let obj3 = { + name: '闲置房屋数', + value: 20 + } + + this.housePieData.push(obj1) + this.housePieData.push(obj2) + this.housePieData.push(obj3) + + this.housePieOption.title.text = this.houseData.houseTotal + this.housePieOption.series[1].itemStyle = { + color: function (params) { + return _that.houseColorArray[params.dataIndex] } } + + let fun = function (params) { + _that.clickHousePie(params.dataIndex) + + } + this.$refs.housePieChart.handleClick(fun) + this.clickHousePie(0) + } else { + this.$refs.housePieChart.setNoData(true) } - this.pieEduOptions = pieOption(this.pieEduChartS) - this.pieEduOptions.legend = { ...legend } - // this.pieEduOptions.series[1].width = 400 - this.clickEduPie(0) - let fun = params => { - this.clickEduPie(params.dataIndex) + }, + + async getUserchart (node, resolve) { + if (this.$refs.userPieChart) { + this.$refs.userPieChart.showLoading() + } + const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/userchart"; + // const url = '/epmetuser/icresiuser/userchart' + let params = { + orgId: this.orgId, + orgType: this.orgType + }; + const { data, code, msg } = await requestPost(url, params); + if (code === 0) { + // this.userData = data + if (this.$refs.userPieChart) { + this.$refs.userPieChart.hideLoading() + } + } else { + this.userData = {} + this.$message.error(msg); } - this.$refs.eduChart.handleClick(fun) - // this.noInit = true - // option && this.$refs.pieChart.setOption(option); + }, + getUserPie () { + if (this.userPieInitState) { + this.assignUserPieChart() + } else { + setTimeout(() => { + this.getUserPie() + }, 500) + } }, - initChartType () { - const eId = document.getElementById('echartType') - let _charts = echarts.init(eId) + assignUserPieChart () { + + if (this.userData) { + this.$refs.userPieChart.setNoData(false) + this.$refs.userPieChart.clear() + this.userPieData = [] + + const _that = this + // 获取pieChart配置 + this.userPieOption = userPieOption(this.userPieChartS) + // let maxValue = this.userPieData[0].total + // let maxIndex = 0 + + let obj1 = { + name: '常住人口数', + value: 20.1, + selected: true + } + let obj2 = { + name: '流动人口树', + value: 20.3 + } - let option = { - tooltip: { - trigger: 'item' - }, - legend: { - show: true, - orient: 'vertical', - top: '20%', - right: 0, - textStyle: { - width: 90, - color: '#fff', - rich: { - a: { - width: 90 - } - } - }, - formatter: name => { - for (let a = 0; a < this.eduItem.length; a++) { - // this.data 这个数据中有名称和次数 - if (this.eduItem[a].name === name) { - //两个名称进行对比，取出对应的次数 - let params1 = name + "\n"; //然后return你需要的legend格式即可 - console.log(params1); - let tmp = params1.split("\n"); - let res = "" + params1; - for (let i in tmp) { - res = res.replace(tmp[i], ""); - } - return res + params1; - } - } - } - }, - title: { - text: '12000', //图形标题，配置在中间对应效果图的80% - subtext: '总数', - left: 196, - top: "center", - textAlign: 'center', - textStyle: { - color: "#fff", - fontSize: 28, - align: "center" - }, - subtextStyle: { - fontSize: 16, - color: '#fff', - align: 'center' - } - }, - series: [ - { - // name: 'Access From', - type: 'pie', - // center: ['50%', '50%'], - radius: ['40%', '60%'], - avoidLabelOverlap: true, - // top: top + '%', - // height: '80%', - // left: 0, - width: 400, - label: { - position: 'outside', - alignTo: 'edge', - formatter: '{a|{c}}\n{r|}\n{name|{b}}', - minMargin: 5, - edgeDistance: 20, - lineHeight: 15, - color: '#fff', - fontSize: 15, - rich: { - name: { - padding: [0, 6, 0, 6] - }, - a: { - fontSize: 15, - color: '#fff', - padding: [0, 6, 0, 6] - }, - r: { - backgroundColor: 'auto', - borderRadius: 6, - width: 6, - height: 6, - // padding: [3, 3, 0, -12] - } - } - }, - emphasis: { - label: { - show: true, - fontSize: '14', - fontWeight: 'bold' - } - }, - labelLine: { - show: true, - length: 20, - length2: 0, - maxSurfaceAngle: 80 - }, - labelLayout: function (params) { - const isLeft = params.labelRect.x < _charts.getWidth() / 2; - const points = params.labelLinePoints; - // Update the end point. - points[2][0] = isLeft - ? params.labelRect.x - : params.labelRect.x + params.labelRect.width; - return { - labelLinePoints: points - }; - }, - data: this.eduItem + this.userPieData.push(obj1) + this.userPieData.push(obj2) + + this.userPieOption.title.text = this.userData.userTotal + this.userPieOption.series[1].itemStyle = { + color: function (params) { + return _that.userColorArray[params.dataIndex] } - ] - } - option && _charts.setOption(option); + } + let fun = function (params) { + _that.clickUserPie(params.dataIndex) + + } + this.$refs.userPieChart.handleClick(fun) + this.clickUserPie(0) + } else { + this.$refs.userPieChart.setNoData(true) + } }, - clickAgePie (seriesIndex) { - let _code = '' - let isClick = false - console.log('seriesIndex---', seriesIndex) - this.ageItem.forEach((element, index) => { - if (index === seriesIndex) { - _code = element.code - if (!this.noInit) isClick = false - else { - element.isClick = !element.isClick - isClick = element.isClick - } + async getSubuserhouselist (node, resolve) { + const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/subuserhouselist"; + // const url = '/gov/org/house/subuserhouselist' + let params = { + orgId: this.orgId, + orgType: this.orgType + }; + const { data, code, msg } = await requestPost(url, params); + if (code === 0) { + this.subList = data + + } else { + } + }, + + async clickHousePie (seriesIndex) { + this.housePieData.forEach((element, index) => { + if (index === seriesIndex) { element.label = { show: true, @@ -500,9 +469,9 @@ export default { } }; - console.log('zlcm', element) + console.log('zhilma') + } else { - element.isClick = false element.label = { show: false, @@ -518,34 +487,15 @@ export default { } }); - this.ageCode = isClick && _code || '' - this.pieAgeOptions.title.text = this.ageTotalCount - this.pieAgeOptions.series[1].data = this.ageItem - // this.$refs.pieChart.hideLoading() - this.$refs.ageChart.setOption(this.pieAgeOptions) - if (this.noInit) { - const _arr = this.selectAgency[this.selectAgency.length - 1].split('-') - const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid' - console.log('zlcm---isClick', isClick) - this.agePageNo = 1 - this.getAgeList(_arr[0], orgType, isClick && _code || '') - } - this.noInit = true + this.housePieOption.series[1].data = this.housePieData + // this.$refs.housePieChart.hideLoading() + this.$refs.housePieChart.setOption(this.housePieOption) + }, - clickEduPie (seriesIndex) { - let _code = '' - let isClick = false - this.eduItem.forEach((element, index) => { + async clickUserPie (seriesIndex) { + this.userPieData.forEach((element, index) => { if (index === seriesIndex) { - _code = element.code - - if (!this.noEduInit) isClick = false - else { - element.isClick = !element.isClick - isClick = element.isClick - } - element.label = { show: true, @@ -557,9 +507,9 @@ export default { } }; - console.log('zlcm') + console.log('zhilma') + } else { - element.isClick = false element.label = { show: false, @@ -575,275 +525,23 @@ export default { } }); - this.eduCode = isClick && _code || '' - this.pieEduOptions.title.text = this.eduTotalCount - this.pieEduOptions.series[1].data = this.eduItem - // this.$refs.pieChart.hideLoading() - this.$refs.eduChart.setOption(this.pieEduOptions) - if (this.noEduInit) { - const _arr = this.selectAgency[this.selectAgency.length - 1].split('-') - const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid' - this.pageNo = 1 - this.getEduList(_arr[0], orgType, isClick && _code || '') - } - this.noEduInit = true + this.userPieOption.series[1].data = this.userPieData + // this.$refs.userPieChart.hideLoading() + this.$refs.userPieChart.setOption(this.userPieOption) - - }, - async getAgeCount (orgId, orgType) { - const url = "/epmetuser/icresiuser/partymemberagestatistics"; - let params = { - orgId, - orgType - }; - const { data, code, msg } = await requestPost(url, params); - if (code === 0) { - const colorList = [ - { - name: '50岁以下', - value: 1, - color: '#FAC126' - }, { - name: '50-59岁', - value: 2, - color: '#3DDA83' - }, { - name: '60-69岁', - value: 3, - color: '#A800FF' - }, { - name: '70-79岁', - value: 4, - color: '#2865FA' - }, { - name: '80岁以上', - value: 5, - color: '#00DAD2' - } - ] - this.ageItem = data.map((item, index) => { - return { - ...item, - name: item.label, - isClick: false, - itemStyle: { - color: colorList[index].color - } - } - }) - this.ageTotalCount = 0 - data.forEach(item => { - this.ageTotalCount += Number(item.value) - }) - this.initAgeCharts() - } else { - } - }, - async getEduCount (orgId, orgType) { - const url = "/epmetuser/icresiuser/partymembereducationstatistics"; - let params = { - orgId, - orgType - }; - const { data, code, msg } = await requestPost(url, params); - if (code === 0) { - this.eduItem = data.map(item => { - return { - ...item, - name: item.label, - isClick: false - } - }) - this.eduTotalCount = 0 - data.forEach(item => { - this.eduTotalCount += Number(item.value) - }) - this.initEduCharts() - } else { - } + // this.getTable() }, - async getAgeList (orgId, orgType, _code) { - this.visibleAgeLoading = true - const url = "/epmetuser/icresiuser/partymemberagelist"; - let params = { - orgId, - orgType, - code: _code || '', - pageNo: this.agePageNo, - pageSize: this.agePageSize - }; - const { data, code, msg } = await requestPost(url, params); - if (code === 0) { - this.ageList = data.list.map((item, index) => { - return { - ...item, - index: index + 1 - } - }) - this.ageTotal = data.total - } else { - this.$message.error(msg) - } - // if (_code == 0 || _code) this.noInit = true - this.visibleAgeLoading = false - }, - async getEduList (orgId, orgType, _code) { - this.visibleLoading = true - const url = "/epmetuser/icresiuser/partymembereducationlist"; - let params = { - orgId, - orgType, - code: _code || '', - pageNo: this.pageNo, - pageSize: this.pageSize - }; - const { data, code, msg } = await requestPost(url, params); - if (code === 0) { - this.eduList = data.list.map((item, index) => { - return { - ...item, - index: index + 1 - } - }) - this.total = data.total - } else { - this.$message.error(msg) - } - this.visibleLoading = false - }, - async getAgencyList (node, resolve) { - // const url = "/gov/org/customeragency/staffinagencylist"; - const url = '/gov/org/customeragency/agencygridtree' - // let params = { - // agencyId: this.$store.state.user.agencyId, - // }; - const { data, code, msg } = await requestPost(url); - if (code === 0) { - console.log('data-org----o', data) - this.selectAgency = [`${data.agencyId}-${data.level}`] - this.orgType = data.level - this.agencyId = data.agencyId - let arr = [] - arr.push(data) - this.propTree = arr && this.getTreeData(arr) + hancleToSubAgency (item) { + + this.orgId = item.orgId + this.orgType = item.orgType + this.getApiData() + + } + + - } else { - } - }, - getTreeData (data) { - if (!Array.isArray(data)) return [] - let arr = data.map(item => { - let _item = {} - if (item.subAgencyList) { - if (item.subAgencyList.length === 0) { - _item = { - label: item.agencyName, - value: item.agencyId + '-' + item.level, - level: item.level, - children: undefined - } - } else _item = { - label: item.agencyName, - value: item.agencyId + '-' + item.level, - level: item.level, - children: this.getTreeData(item.subAgencyList) - } - } else { - _item = { - label: item.agencyName, - value: item.agencyId + '-' + item.level, - level: item.level, - } - } - return _item - }) - return arr - }, - handleClickRow (val) { - console.log('click-row----', val) - this.$router.push({ - path: `/main-shuju/visual-basicinfo-people/${val.userId}`, - }); - }, - handleCascader (val) { - console.log('val-vvv', val) - const _arr = val[val.length - 1].split('-') - const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid' - this.agencyId = _arr[0] - this.orgType = orgType - this.noInit = false - this.noEduInit = false - this.getAgeCount(_arr[0], orgType) - this.getEduCount(_arr[0], orgType) - this.getAgeList(_arr[0], orgType) - this.getEduList(_arr[0], orgType) - }, - getCheckedNodes (val) { - console.log('val-nnn', val) - }, - lazyLoad (node, resolve) { - setTimeout(() => { - this.getAgeList(node, resolve) - }, 500) - }, - pageSizeChangeHandleAge (val) { - this.agePageNo = 1 - this.agePageSize = val - this.getAgeList(this.agencyId, this.orgType, this.ageCode) - }, - pageCurrentChangeHandleAge (val) { - this.agePageNo = val - this.getAgeList(this.agencyId, this.orgType, this.ageCode) - }, - pageSizeChangeHandleNew (val) { - this.pageNo = 1; - this.pageSize = val; - this.getEduList(this.agencyId, this.orgType, this.eduCode) - }, - pageCurrentChangeHandleNew (val) { - this.pageNo = val; - this.getEduList(this.agencyId, this.orgType, this.eduCode) - }, - async handleExport (type) { - const urls = { - age: '/epmetuser/icresiuser/partymemberagelist/export', - edu: '/epmetuser/icresiuser/partymembereducationlist/export' - } - const _arr = this.selectAgency[this.selectAgency.length - 1].split('-') - const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid' - let params = { - orgId: _arr[0], - orgType: orgType, - code: type == 'age' ? this.ageCode : this.eduCode, - } - // .post('epmetuser/icresiuser/exportExcel', params) - await this.$http({ - method: 'POST', - url: urls[type], - responseType: 'blob', - data: params - }) - .then(res => { - console.log('resllll', res) - let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]) - console.log('filename', fileName) - let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) - var url = window.URL.createObjectURL(blob) - var aLink = document.createElement('a') - aLink.style.display = 'none' - aLink.href = url - aLink.setAttribute('download', fileName) - document.body.appendChild(aLink) - aLink.click() - document.body.removeChild(aLink) //下载完成移除元素 - window.URL.revokeObjectURL(url) //释放掉blob对象 - }) - .catch((err) => { - console.log('获取导出失败', err) - return this.$message.error('网络错误') - }) - }, }, }; @@ -853,247 +551,9 @@ export default { src="@/assets/scss/modules/visual/warning.scss" scoped > - + + diff --git a/src/views/modules/visual/basicinfo/houseStatic/options.js b/src/views/modules/visual/basicinfo/houseStatic/options.js index ba0ddd33..7b841c76 100644 --- a/src/views/modules/visual/basicinfo/houseStatic/options.js +++ b/src/views/modules/visual/basicinfo/houseStatic/options.js @@ -1,56 +1,51 @@ -export function pieOption (_charts) { - const center= ['50%', '50%'] +export function housePieOption (_charts) { + const center= ['50%', '200px'] return { title: { text: '0', - top: 125, - left: 196, - textAlign: 'center', + top: 170, + left: 'center', textStyle: { width: '100%', - fontSize: 32, + fontSize: 30, color: '#FFFFFF', - fontWeight: 400, - align: 'center' + fontWeight: 400 }, itemGap: 5, - subtext: '总数', + subtext: '房屋总数', subtextStyle: { - fontSize: 16, + fontSize: 20, color: '#fff', - fontWeight: 400, - align: 'center' + fontWeight: 400 } }, tooltip: { show: false }, - legend: { - top: 500, - bottom: 0, - itemWidth: 20, - itemHeight: 10, - textStyle: { - color: '#D2E7FF', - fontSize: 16, - lineHeight: 20, - }, + // legend: { + // top: 500, + // bottom: 0, + // itemWidth: 20, + // itemHeight: 10, + // textStyle: { + // color: '#D2E7FF', + // fontSize: 16, + // lineHeight: 20, + // }, - }, + // }, series: [ // 外侧圆环 { type: 'pie', // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 - startAngle: 90, + startAngle: 0, hoverAnimation: false, // tooltip: { // }, center: center, - left: 'left', - radius: ['60%', '70%'], - width: 400, + radius: ['61%', '61.3%'], label: { show: false }, @@ -58,7 +53,7 @@ export function pieOption (_charts) { show: false }, data: [{ - value: 480, + value: 360, itemStyle: { color: 'rgba(40, 101, 250, 0)', width:0, @@ -73,14 +68,16 @@ export function pieOption (_charts) { // 突出的 { hoverAnimation: false, + // name: 'Access From', type: 'pie', center: center, - radius: ['40%', '60%'], + radius: ['40%', '54%'], avoidLabelOverlap: false, + // top: top + '%', + // height: '80%', selectedMode: 'single', - left: 'left', - width: 400, - startAngle: 90, + left: 'center', + width: 480, label: { // show: false, position: 'outside', @@ -91,14 +88,14 @@ export function pieOption (_charts) { edgeDistance: 1, lineHeight: 15, color: '#fff', - fontSize: 12, + fontSize: 10, // distanceToLabelLine: -60, rich: { name: { padding: [0, 6, 0, 6] }, a: { - fontSize: 30, + fontSize: 25, color: '#fff', padding: [0, 6, 6, 6] }, @@ -114,7 +111,7 @@ export function pieOption (_charts) { labelLine: { show: false, smooth: 0.2, - length: 30, + length: 50, length2: 0, maxSurfaceAngle: 80 }, @@ -134,7 +131,13 @@ export function pieOption (_charts) { }; }, itemStyle: { - + // color:function(params) { + // //自定义颜色 + // var colorList = [ + // '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463', + // ]; + // return colorList[params.dataIndex] + // } }, data: [], @@ -143,30 +146,31 @@ export function pieOption (_charts) { { type: 'pie', // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 - startAngle: 90, + startAngle: 0, hoverAnimation: false, center: center, - left: 'left', - width: 400, // tooltip: { // }, - radius: ['0%', '25%'], + radius: ['0%', '27%'], label: { show: false }, labelLine: { + show: false }, - data: [ - { - value: 360, - itemStyle: { + data: [{ + value: 360, + itemStyle: { + normal: { color: 'rgba(8, 37, 134, 1)', + } } + } ] }, ] diff --git a/src/views/modules/visual/basicinfo/houseStatic/userOptions.js b/src/views/modules/visual/basicinfo/houseStatic/userOptions.js new file mode 100644 index 00000000..f251cf4e --- /dev/null +++ b/src/views/modules/visual/basicinfo/houseStatic/userOptions.js @@ -0,0 +1,182 @@ + +export function userPieOption (_charts) { + const center= ['50%', '200px'] + return { + title: { + text: '0', + top: 170, + left: 'center', + textStyle: { + width: '100%', + fontSize: 30, + color: '#FFFFFF', + fontWeight: 400 + }, + itemGap: 5, + subtext: '房屋总数', + subtextStyle: { + fontSize: 20, + color: '#fff', + fontWeight: 400 + } + }, + tooltip: { + show: false + }, + // legend: { + // orient: 'vertical', + // right: 0, + // top: 200, + // bottom: 20, + // itemWidth: 20, + // itemHeight: 10, + // textStyle: { + // color: '#D2E7FF', + // fontSize: 16, + // lineHeight: 20, + // }, + + // }, + series: [ + // 外侧圆环 + { + type: 'pie', + // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 + startAngle: 0, + hoverAnimation: false, + // tooltip: { + // }, + center: center, + radius: ['61%', '61.3%'], + label: { + show: false + }, + labelLine: { + show: false + }, + data: [{ + value: 360, + itemStyle: { + color: 'rgba(40, 101, 250, 0)', + width:0, + borderColor: 'rgba(40, 101, 250, 0.5)', + borderWidth: 1, + borderType: 'dotted' + } + } + ] + }, + + // 突出的 + { + hoverAnimation: false, + // name: 'Access From', + type: 'pie', + center: center, + radius: ['40%', '54%'], + avoidLabelOverlap: false, + // top: top + '%', + // height: '80%', + selectedMode: 'single', + left: 'center', + width: 480, + label: { + // show: false, + position: 'outside', + alignTo: 'edge', + // formatter: '{a|{c}}\n\n{name|{b}}', + formatter: '{a|{c}}\n{r|}\n{name|{b}}', + minMargin: 5, + edgeDistance: 1, + lineHeight: 15, + color: '#fff', + fontSize: 10, + // distanceToLabelLine: -60, + rich: { + name: { + padding: [0, 6, 0, 6] + }, + a: { + fontSize: 25, + color: '#fff', + padding: [0, 6, 6, 6] + }, + r: { + backgroundColor: 'auto', + borderRadius: 6, + width: 6, + height: 6, + // padding: [3, 3, 0, -12] + } + } + }, + labelLine: { + show: false, + smooth: 0.2, + length: 50, + length2: 0, + maxSurfaceAngle: 80 + }, + labelLayout: function (params) { + + const isLeft = params.labelRect.x < _charts.getWidth() / 2; + const points = params.labelLinePoints; + // Update the end point. + if (points) { + points[2][0] = isLeft + ? params.labelRect.x + : params.labelRect.x + params.labelRect.width; + } + + return { + labelLinePoints: points + }; + }, + itemStyle: { + // color:function(params) { + // //自定义颜色 + // var colorList = [ + // '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463', + // ]; + // return colorList[params.dataIndex] + // } + }, + data: [], + + }, + // 中间圆环 + { + type: 'pie', + // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 + startAngle: 0, + hoverAnimation: false, + center: center, + // tooltip: { + // }, + radius: ['0%', '27%'], + label: { + + show: false + + }, + labelLine: { + + show: false + + }, + data: [{ + value: 360, + itemStyle: { + normal: { + color: 'rgba(8, 37, 134, 1)', + + } + } + } + ] + }, + ] + + } + } + \ No newline at end of file diff --git a/src/views/modules/visual/communityGovern/typeAnalyze.vue b/src/views/modules/visual/communityGovern/typeAnalyze.vue index 7466c3d5..d5ec1516 100644 --- a/src/views/modules/visual/communityGovern/typeAnalyze.vue +++ b/src/views/modules/visual/communityGovern/typeAnalyze.vue @@ -76,7 +76,7 @@