From 44cca237efc727b20d44a8c5599a837b572d6e3a Mon Sep 17 00:00:00 2001 From: jiangyy Date: Mon, 24 Jan 2022 13:54:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE-=E6=88=BF=E9=97=B4=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scss/modules/visual/basicInfoMain.scss | 6 +- .../visual/basicinfo/basicInfoCommunity.vue | 51 +- .../visual/basicinfo/basicInfoMain.vue | 2 +- .../communityGovern/resiPieOption copy.js | 179 ++++++ .../visual/communityGovern/resiPieOption.js | 2 +- .../visual/communityGovern/resibuzz copy.vue | 523 ++++++++++++++++++ 6 files changed, 735 insertions(+), 28 deletions(-) create mode 100644 src/views/modules/visual/communityGovern/resiPieOption copy.js create mode 100644 src/views/modules/visual/communityGovern/resibuzz copy.vue diff --git a/src/assets/scss/modules/visual/basicInfoMain.scss b/src/assets/scss/modules/visual/basicInfoMain.scss index e8298340..cfc5e25b 100644 --- a/src/assets/scss/modules/visual/basicInfoMain.scss +++ b/src/assets/scss/modules/visual/basicInfoMain.scss @@ -246,9 +246,9 @@ justify-content: flex-start; margin: 0 21px 0 21px; - .item:hover { - cursor: pointer; - } + // .item:hover { + // cursor: pointer; + // } .item_sel { box-shadow: 0 0 10px inset #1a5afd; } diff --git a/src/views/modules/visual/basicinfo/basicInfoCommunity.vue b/src/views/modules/visual/basicinfo/basicInfoCommunity.vue index 46e4c4d4..26759f5b 100644 --- a/src/views/modules/visual/basicinfo/basicInfoCommunity.vue +++ b/src/views/modules/visual/basicinfo/basicInfoCommunity.vue @@ -140,7 +140,7 @@ export default { this.selBuildingId = this.buildingArray[index].buildingId this.selBuildingName = this.buildingArray[index].buildingName - + this.roomLoaded = false await this.loadRoom() this.roomLoaded = true @@ -152,12 +152,16 @@ export default { this.selHouseId = this.roomArray[index].houseId this.selHouseName = this.roomArray[index].houseName - // this.$emit('refreshInfoList', this.selHouseId, 'room') + // this.$emit('refreshInfoList', this.selHouseId, 'room')- }, //点击全部成员 async handleShowAllUser (selIndex) { // this.startLoading() - await this.loadUser(this.roomArray[selIndex].houseId, selIndex) + + if ((selIndex === 0 || selIndex) && !this.roomArray[selIndex].showAllUser) { + await this.loadUser(this.roomArray[selIndex].houseId, selIndex) + } + this.roomArray.forEach((element, index) => { let obj = JSON.parse(JSON.stringify(element)) @@ -208,6 +212,7 @@ export default { this.selBuildingId = this.buildingArray[0].buildingId this.selBuildingName = this.buildingArray[0].buildingName + } else { this.selBuildingId = '' this.selBuildingName = '' @@ -230,39 +235,39 @@ export default { const { data, code, msg } = await requestPost(url, params) if (code === 0) { - this.roomArray = data - if (this.roomArray.length > 0) { + if (data.length > 0) { + + data.forEach((roomItem, index) => { + roomItem.showAllUser = false - this.roomArray.forEach(roomItem => { - let iconArrayShow = JSON.parse(JSON.stringify(roomItem.categoryList)) - let iconArray = [] + let categoryList = JSON.parse(JSON.stringify(roomItem.categoryList)) - if (iconArrayShow.length > 0) { - if (iconArrayShow[0].isSpecial === '1') {//第一个图标是党员 + roomItem.iconArrayShow = [] + + if (categoryList.length > 0) { + if (categoryList[0].isSpecial === '1') {//第一个图标是党员 roomItem.isParty = true - roomItem.partyUrl = iconArrayShow[0].iconUrl - iconArrayShow.shift();//删除第一个数据 + roomItem.partyUrl = categoryList[0].iconUrl + categoryList.shift();//删除第一个数据 } else { roomItem.isParty = false } - } - if (iconArrayShow.length > 4) {//去前四个 - for (let i = 0; i < 4; i++) { - iconArray.push(iconArrayShow[i]) + + let iconNum = categoryList.length > 4 ? 4 : categoryList.length + + for (let i = 0; i < iconNum; i++) { + roomItem.iconArrayShow.push(categoryList[i]) } - } else { - iconArray = iconArrayShow } - this.$nextTick(() => { - // ref_tree 元素的ref value 绑定的node-key - roomItem.iconArrayShow = iconArray - }); - roomItem.showAllUser = false }); + this.$nextTick(() => { + this.roomArray = [...data] + }); + } diff --git a/src/views/modules/visual/basicinfo/basicInfoMain.vue b/src/views/modules/visual/basicinfo/basicInfoMain.vue index adae7b0e..f387de43 100644 --- a/src/views/modules/visual/basicinfo/basicInfoMain.vue +++ b/src/views/modules/visual/basicinfo/basicInfoMain.vue @@ -307,7 +307,7 @@ const vueGis = { //子组件点击房间，刷新右侧list refreshInfoList (selId, type) { - this.orgId = houselIdseId + this.orgId = selId this.level = '' }, diff --git a/src/views/modules/visual/communityGovern/resiPieOption copy.js b/src/views/modules/visual/communityGovern/resiPieOption copy.js new file mode 100644 index 00000000..7d195966 --- /dev/null +++ b/src/views/modules/visual/communityGovern/resiPieOption copy.js @@ -0,0 +1,179 @@ + +export function pieOption (_charts) { +const center= ['50%', '250px'] + return { + title: { + text: '0', + top: 220, + left: 'center', + textStyle: { + width: '100%', + fontSize: 32, + color: '#FFFFFF', + fontWeight: 400 + }, + itemGap: 5, + subtext: '总数', + subtextStyle: { + fontSize: 20, + color: '#fff', + fontWeight: 400 + } + }, + 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: 0, + hoverAnimation: false, + // tooltip: { + // }, + center: center, + radius: ['55%', '55.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%', '60%'], + avoidLabelOverlap: false, + // top: top + '%', + // height: '80%', + selectedMode: 'single', + left: 'center', + width: 400, + 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: -20, + 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: { + // 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%', '25%'], + label: { + + show: false + + }, + labelLine: { + + show: false + + }, + data: [{ + value: 360, + itemStyle: { + normal: { + color: 'rgba(8, 37, 134, 1)', + + } + } + } + ] + }, + ] + + } +} diff --git a/src/views/modules/visual/communityGovern/resiPieOption.js b/src/views/modules/visual/communityGovern/resiPieOption.js index 7d195966..7c66d041 100644 --- a/src/views/modules/visual/communityGovern/resiPieOption.js +++ b/src/views/modules/visual/communityGovern/resiPieOption.js @@ -79,7 +79,7 @@ const center= ['50%', '250px'] left: 'center', width: 400, label: { - // show: false, + show: true, position: 'outside', alignTo: 'edge', // formatter: '{a|{c}}\n\n{name|{b}}', diff --git a/src/views/modules/visual/communityGovern/resibuzz copy.vue b/src/views/modules/visual/communityGovern/resibuzz copy.vue new file mode 100644 index 00000000..9722a69b --- /dev/null +++ b/src/views/modules/visual/communityGovern/resibuzz copy.vue @@ -0,0 +1,523 @@ + + + + + + +