-
-
-
-
- 微网格信息
+ style="position: absolute;right:1200px;bottom:394px;z-index: 100;padding:6px 20px 20px 0;font-size: 21px;color: #fff;height: 310px;display: flex;flex-direction: column;justify-content:space-around; align-items: center;background: rgba(0, 27, 37, 0.83);overflow: hidden;">
+
+
+ 
微网格信息
微网格信息
x
-
-
+
+
>
@@ -44,67 +41,79 @@
+ style="position: absolute;right: 609px;bottom: 250px;z-index: 100;padding:20px;font-size: 20px;color: #fff;height: 500px;width: 550px;display: flex;flex-direction: column; box-sizing:border-box"
+ class="imageBg">
-
-
- {{ microgridObj.firstTitle || "--" }}
+
+
-
+ {{ microgridObj.microgridName || "--" }}
x
+
- 微网格长：{{ microgridObj.leader }}
+ 描述范围： {{ microgridObj.address }}
-
- 性别：{{ microgridObj.gender }}
+
+
+
-
+ 楼座数（层数）{{ microgridObj.buildingNum || 0 }}
+
+
+ 居民户数：{{ microgridObj.houseNum || 0 }}
+
+
+ 居民人数：{{ microgridObj.resiNum || 0 }}
+
+
+ 党员人数：{{ microgridObj.dangyuanNum || 0 }}
+
- 电话：{{ microgridObj.phone }}
-
-
- 住址：{{ microgridObj.address }}
-
-
-
-
@@ -176,7 +185,7 @@ import shibeiJson from './shibei.json';
import shibeiJson1 from './shibei1.json';
import maskJson from './markerJson.json';
-import { getScreenHouseStatistics, getScreenUserStatistics, getScreenHouseList, getScreenUserList } from "../../api/hulianApi"
+import { getScreenHouseStatistics, getScreenUserStatistics, getScreenHouseList, getScreenUserList, getSearchByGridId, getSearchByGridIdDetail } from "../../api/hulianApi"
const md5 = require('blueimp-md5');
let myMap;
@@ -200,7 +209,6 @@ export default {
name: "screen-center",
data() {
return {
- colorList: ["#F84E2D", "#1372EC", "#44DEA3", "#FFC544", "#6C44FF"],
attrAndColor: [],
hoveredStateId: null,
@@ -224,214 +232,10 @@ export default {
layersIndex: 1,
showFirst: false,
showMicrogridDetails: false,
- microgridArr: [
- {
- value: 1,
- label: "第一微网格"
- },
- {
- value: 2,
- label: "第二微网格"
- },
- {
- value: 3,
- label: "第三微网格"
- },
- {
- value: 4,
- label: "第四微网格"
- },
- {
- value: 5,
- label: "第五微网格"
- },
- {
- value: 6,
- label: "第六微网格"
- },
- ],
+ microgridArr: [],
microgridIndex: 0,
microgridObj: {
- firstTitle: "",
- leader: "张俊凯",
- gender: "男",
- phone: "15623523200",
- address: "市北区",
- secondTitle: "包干房屋",
- total: 37,
- list: [
- {
- value: 1,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 2,
- label: "市北区敦化路53号4号楼2单元202"
- },
- {
- value: 3,
- label: "市北区山东路168号时代国际广场1402号"
- },
- {
- value: 4,
- label: "市北区山东路120号玫瑰花园6号楼3单元506"
- },
- {
- value: 5,
- label: "市北区南宁路32号2单元501"
- },
- {
- value: 6,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 7,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 8,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 9,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 10,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 11,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 12,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 13,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 14,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 15,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 16,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 17,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 18,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 19,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 20,
- label: "市北区台柳路12号4单元101"
- },
- ]
- },
- microgridObjCopy: {
- firstTitle: "",
- leader: "张俊凯",
- gender: "男",
- phone: "15623523200",
- address: "市北区",
- secondTitle: "包干房屋",
- total: 37,
- list: [
- {
- value: 1,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 2,
- label: "市北区敦化路53号4号楼2单元202"
- },
- {
- value: 3,
- label: "市北区山东路168号时代国际广场1402号"
- },
- {
- value: 4,
- label: "市北区山东路120号玫瑰花园6号楼3单元506"
- },
- {
- value: 5,
- label: "市北区南宁路32号2单元501"
- },
- {
- value: 6,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 7,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 8,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 9,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 10,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 11,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 12,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 13,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 14,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 15,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 16,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 17,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 18,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 19,
- label: "市北区台柳路12号4单元101"
- },
- {
- value: 20,
- label: "市北区台柳路12号4单元101"
- },
- ]
+
},
lightStyle: {
style: "amap://styles/whitesmoke",
@@ -487,14 +291,16 @@ export default {
},
total: 0,
pageNo: 1,
- pageSize: 10,
+ pageSize: 9,
agencyId: "",
level: "",
selAgency: [],
showResiTable: false,
resiList: [],
showHouseTable: false,
- houseList: []
+ houseList: [],
+ active: 'all',
+ dyTotal:0
}
},
mounted() {
@@ -546,6 +352,16 @@ export default {
}
},
methods: {
+ handleClickTabs(val){
+ this.active = val
+ if(val == 'all' || val == 'dy'){
+ this.getScreenUserList()
+
+ }else{
+ this.resiList = []
+ }
+
+ },
selectType(value, label) {
// if (value === this.buttonIndex) {
// this.buttonIndex = 0
@@ -566,29 +382,30 @@ export default {
} else if (value == 2) {
this.getScreenHouseStatistics()
- } else if (value == 3) {
-
+ } else if (value == 3 && this.level == 'community') {
+ this.getDangzhibuDot()
}
},
initDot(data) {
console.log(data, '点位数据');
scene.addImage("dotBto", require("../../assets/images/map/dotBg.png"));
+ //textOffset改为动态的 this.buttonIndex == 3 [10,60] 否则就是 [-30 60]
dotBgLayer = new PointLayer({
zIndex: 21,
})
.source(data)
.shape('count', 'text')
.color("#fff")
- .size(16)
+ .size(14)
.style({
strokeWidth: 3,
strokeOpacity: 0.1,
fontWeight: '500',
stroke: "#000",
- textOffset: [0, 45],
- raisingHeight: 300,
+ textOffset: this.buttonIndex === 3 ? [10, 60] : [-30, 60],
+ raisingHeight: 700,
heightfixed: true,
- textAnchor: "center"
+ textAnchor: "center-left",
});
scene.addLayer(dotBgLayer);
@@ -597,11 +414,10 @@ export default {
})
.source(data)
.shape("dotBto")
- .size(80)
+ .size(100)
.style({
- // offsets: [15, 260],
layerType: "fillImage",
- raisingHeight: 300,
+ raisingHeight: 700,
heightfixed: true
});
scene.addLayer(dotLayer);
@@ -625,11 +441,16 @@ export default {
this.selAgencyId = e.feature.properties.subId
if (e.feature.properties.type == 'resi') {
this.getScreenUserList()
+ this.getDyTotal()
this.showResiTable = true
} else if (e.feature.properties.type == 'house') {
this.getScreenHouseList()
this.showHouseTable = true
+ } else if (e.feature.properties.type == 'dangzhibu') {
+ this.getSearchByGridId(e.feature.properties.subId)
+ this.showFirst = true
}
+
// const htmlString = `
//
- {{ microgridObj.secondTitle || "--" }}
+
+
+ 微网格力量
- 总数：{{ microgridObj.total || "--" }}户
-
-
-
- {{ item.value }}
-
-
- {{ item.label }}
-
+ style="width: 484px;overflow-x: clip; text-overflow:ellipsis;white-space: nowrap;padding: 0 20px;box-sizing: border-box;">
+
+
党小组组长： --
+ 楼组长： --
+ 公益岗： --
+ 街道包联干部： --
+ 社区包联干部： --
-
-
-
-
人员信息 x
+
+
全部
+
+
+ 党员（{{ dyTotal ||0 }}）
+ 公益岗（0
+ ）
+
+ 先锋队伍（0
+ ）
+
+ 红色合伙人（0
+ ）
+
+
+ style="width: 531px;display: flex;align-items: center;justify-content:center;height: 350px;">
暂无数据~
//
${e.feature.properties.type == 'resi' ? '居民信息' : '房屋信息'}
@@ -667,13 +488,31 @@ export default {
dotBgLayer.on("unmousemove", (e) => { });
},
+ async getDyTotal() {
+ let params = {
+ agencyId: this.selAgencyId || '1175270520603930625',
+ level: this.level == 'street' ? 'community' : this.level == 'community' ? 'grid' : 'street',
+ pageSize: this.pageSize,
+ pageNo: this.pageNo,
+ dangyuan:'1'
+ }
+ console.log(params);
+ const { data, msg, code } = await getScreenUserList(params)
+ if (code == 0) {
+ this.dyTotal = data.total
+ } else {
+ console.log(msg);
+ }
+ },
async getScreenUserList() {
let params = {
- agencyId: this.selAgencyId,
+ agencyId: this.selAgencyId || '1175270520603930625',
level: this.level == 'street' ? 'community' : this.level == 'community' ? 'grid' : 'street',
pageSize: this.pageSize,
- pageNo: this.pageNo
+ pageNo: this.pageNo,
+ dangyuan:this.active == 'dy'?'1':''
}
+ console.log(params);
const { data, msg, code } = await getScreenUserList(params)
if (code == 0) {
this.resiList = data.list
@@ -697,6 +536,8 @@ export default {
console.log(msg);
}
},
+
+
async getScreenHouseStatistics() {
let params = {
agencyId: this.agencyId || '1175270520603930625',
@@ -707,7 +548,6 @@ export default {
let obj = {
type: 'FeatureCollection',
features: data,
- name: 'ccc'
}
if (this.level) {
obj.features.forEach(f => {
@@ -814,6 +654,30 @@ export default {
console.log(msg);
}
},
+
+ getDangzhibuDot() {
+ console.log(this.selAgency);
+ let obj = {
+ type: 'FeatureCollection',
+ features: this.selAgency,
+ }
+ obj.features.forEach(f => {
+ f.type = 'Feature';
+ f.properties = {};
+ f.geometry = {};
+ f.properties.name = '党支部';
+ f.properties.type = 'dangzhibu';
+ f.properties.subId = f.subId;
+ f.properties.count = `${f.subName}党支部`;
+ f.geometry.type = "Point";
+ f.geometry.coordinates = [...JSON.parse(f.subCenterMark)[0]];
+ delete f.agencyName;
+ delete f.agencyId;
+ delete f.count;
+
+ });
+ this.initDot(obj)
+ },
initialization() {
this.agencyId = '';
this.level = '';
@@ -879,22 +743,22 @@ export default {
styleConfig = lightStyle;
}
- lineLayerBig = new LineLayer({
- zIndex: 6,
- name: "line2",
- })
- .source(shibeiJson1)
- .shape("wall")
- .size(50)
- .color('rgb(163, 255, 245)')
- .style({
- opacity: 1,
- raisingHeight: 600,
- sourceColor:'rgb(0, 153, 188,0.5)',
- targetColor:'rgb(0, 153, 188)',
- linearDir:'algin',
-
- })
+ // lineLayerBig = new LineLayer({
+ // zIndex: 6,
+ // name: "line2",
+ // })
+ // .source(shibeiJson1)
+ // .shape("wall")
+ // .size(50)
+ // .color('rgb(163, 255, 245)')
+ // .style({
+ // opacity: 1,
+ // raisingHeight: 600,
+ // sourceColor: 'rgb(0, 153, 188,0.5)',
+ // targetColor: 'rgb(0, 153, 188)',
+ // linearDir: 'algin',
+
+ // })
// scene.addLayer(lineLayerBig);
// 画区域面积
polygonLayer = new PolygonLayer({
@@ -913,8 +777,8 @@ export default {
opacity: 0.8,
heightfixed: true,
raisingHeight: 300,
- sourceColor:'#4ee8fc',
- targetColor:'#00284e',
+ sourceColor: '#4ee8fc',
+ targetColor: '#00284e',
});
scene.addLayer(polygonLayer);
@@ -1077,10 +941,32 @@ export default {
this.showFirst = false
this.showMicrogridDetails = false
},
- microgridDetails(item) {
+ async microgridDetails(item) {
+ await this.getSearchByGridIdDetail(item.id)
this.showMicrogridDetails = true
- this.microgridIndex = item.value
- this.microgridObj.firstTitle = item.label
+ this.microgridIndex = item.id
+ },
+ async getSearchByGridId(id) {
+ let params = {
+ gridId:id// "1224135071215190018",
+ }
+ const { data, msg, code } = await getSearchByGridId(params)
+ if (code == 0) {
+ this.microgridArr = data
+ } else {
+ console.log(msg);
+ }
+ },
+ async getSearchByGridIdDetail(id) {
+ let params = {
+ microGridId: id,
+ }
+ const { data, msg, code } = await getSearchByGridIdDetail(params)
+ if (code == 0) {
+ this.microgridObj = { ...data }
+ } else {
+ console.log(msg);
+ }
},
handleCurrentChange(val) {
@@ -1146,6 +1032,25 @@ export default {
background-repeat: no-repeat;
}
+.imageBg {
+ background-image: url('@/assets/images/map/popupBg.png');
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+.titleBg {
+ background: url('@/assets/icon/title-content-half.png');
+ background-size: 67% 100%;
+ background-repeat: no-repeat;
+}
+
+.label {
+ font-size: 22px;
+ font-family: Alibaba PuHuiTi;
+ font-weight: 400;
+ color: #BDE8FF;
+}
+
.resiTitle {
background: url('@/assets/icon/title-content-half.png');
background-size: 67% 100%;
@@ -1202,11 +1107,74 @@ export default {
.el-pagination.is-background .el-pager li {
background-color: #1e7b9d;
}
-::v-deep .l7-popup .l7-popup-content .l7-popup-content__panel{
+
+::v-deep .l7-popup .l7-popup-content .l7-popup-content__panel {
white-space: initial;
}
::v-deep .el-pagination.is-background .btn-prev {
background-color: #1e7b9d;
}
+
+.after {
+ position: relative;
+
+}
+
+.after::after {
+ content: "";
+ height: 2px;
+ width: 100%;
+ position: absolute;
+ top: -14px;
+ left: 0;
+ height: 4px;
+ background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.tabs {
+ margin-bottom: 10px;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ white-space: nowrap;
+ width: 539px;
+ height: 49px;
+ &::-webkit-scrollbar {
+ /*滚动条整体样式*/
+ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+ height: 2px;
+ }
+ &::-webkit-scrollbar-thumb {
+ /*滚动条里面小方块*/
+ background: linear-gradient(-90deg, #09b8e5 0%, #09f0e3 99%);
+ border-radius: 3px;
+ }
+ &::-webkit-scrollbar-track {
+ /*滚动条里面轨道*/
+ // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+ background: #428ba2;
+ border-radius: 3px;
+ }
+ .item {
+ display: inline-block;
+ color: #fff;
+ width: fit-content;
+ font-size: 16px;
+ height: 30px;
+ padding: 0 10px;
+ box-sizing: border-box;
+ line-height: 30px;
+ text-align: center;
+ margin-top: 10px;
+ cursor: pointer;
+ color: #FFFFFF;
+ }
+
+ .item-active {
+ background: linear-gradient(to top, #0d82b0, #035f83);
+ font-weight: 400;
+
+ }
+}
+
\ No newline at end of file
diff --git a/src/views/screenHeader.vue b/src/views/screenHeader.vue
index 66c6811..134ded4 100644
--- a/src/views/screenHeader.vue
+++ b/src/views/screenHeader.vue
@@ -65,7 +65,7 @@ img {
display: flex;
}
.main-title {
- margin-left: 15vw;
+ margin-left: 16vw;
position: relative;
.title-img {
@@ -112,8 +112,11 @@ img {
}
.subtitle-right1 {
margin-left: 111px;
+ width: 788px;
}
.subtitle-right2 {
- margin-left: 176px;
+ margin-left: 221px;
+ margin-right: 182px;
+ width: 756px;
}
diff --git a/src/views/screenLeft/left1.vue b/src/views/screenLeft/left1.vue
index 4cb639e..7e6c19a 100644
--- a/src/views/screenLeft/left1.vue
+++ b/src/views/screenLeft/left1.vue
@@ -45,17 +45,19 @@
-
地物
- 房子
- 居民
+ 地物
+ 房子（{{ houseTotal }}）
+
+ 居民（{{ resiTotal }}）
+
-
X
+ x
+
// import { getOrgTree } from "api/index"
import { mapGetters } from 'vuex'
-import { getStreetUserStatistics, getStreeHouseStatistics, getStreeHouseTypeStatistics, getStreetUserTypeStatistics,getStructTree } from "../../api/hulianApi"
+import { getStreetUserStatistics, getStreeHouseStatistics, getStreeHouseTypeStatistics, getStreetUserTypeStatistics, getStructTree } from "../../api/hulianApi"
import * as echarts from 'echarts';
import screenOrgTree from '../../components/screen-org-tree'
export default {
@@ -157,7 +159,9 @@ export default {
charsData: [],
showCharts: false,
charts: null,
- treeList: []
+ treeList: [],
+ houseTotal: '',
+ resiTotal: ''
}
},
computed: {
@@ -199,7 +203,7 @@ export default {
let params = {
agencyId: this.shibeiAId
}
- const { data, code, msg } = await getStructTree( params)
+ const { data, code, msg } = await getStructTree(params)
if (code === 0) {
this.treeList = data
// if (data.length > 0) {
@@ -211,7 +215,7 @@ export default {
}
},
- onClickNode(){
+ onClickNode() {
},
goShowDlzz() {
@@ -225,6 +229,7 @@ export default {
const { data, msg, code } = await getStreetUserStatistics(params)
if (code == 0) {
this.dataListResi = data.map(item => [item.streetName, item.count, '查看'])
+ this.resiTotal = data.reduce((sum, item) => sum + item.count, 0);
if (this.dataListResi.length === 0) {
this.noData = true
}
@@ -237,6 +242,7 @@ export default {
const { data, msg, code } = await getStreeHouseStatistics(params)
if (code == 0) {
this.dataListResult = data.map(item => [item.name, item.count, '查看'])
+ this.houseTotal = data.reduce((sum, item) => sum + item.count, 0);
this.houseList = data
if (this.dataListResult.length === 0) {
this.noDataH = true
@@ -262,10 +268,10 @@ export default {
handleLook(item) {
let str = item[0]
let id = this.houseList.filter(item => item.name == str)[0].streeId
- if (id && this.active == 2) {
+ if (id && this.active == 'house') {
this.getStreeHouseTypeStatistics(id)
- } else if (id && this.active == 3) { } {
- this.getStreetUserTypeStatistics(id)
+ } else if (id && this.active == 'resi') {
+ this.getStreetUserTypeStatistics(id)
}
},
async getStreeHouseTypeStatistics(id) {
@@ -346,18 +352,28 @@ export default {
fontFamily: "微软雅黑"
}
},
+ // label已经有了现在需要加上labelLine线条
series: [
{
type: "pie",
- radius: ["30%", "50%"],
+ radius: ["20%", "40%"],
center: ["50%", "30%"],//饼状图位置
label: {
- show: false,
- position: 'center'
+ show: true,
+ position: 'outside',
+ formatter(param) {
+ return param.name + param.value;
+ },
+ fontSize: 12,
+ fontWeight: 'bold',
+ color: '#fff'
},
- label: {
- show: false,
- position: 'center'
+ labelLine: {
+ show: true,
+ length: 10, // 设置线条的长度
+ lineStyle: {
+ color: '#fff'
+ }
},
emphasis: {
label: {
@@ -366,9 +382,6 @@ export default {
fontWeight: 'bold'
}
},
- labelLine: {
- show: false
- },
data: this.charsData
}
]
@@ -516,14 +529,13 @@ export default {
.item {
color: #fff;
- width: 100px;
+ width: 140px;
height: 30px;
line-height: 30px;
text-align: center;
background: linear-gradient(to top, #0174a2, #025b7d);
margin-left: 10px;
margin-top: 10px;
- font-size: 300;
cursor: pointer;
}
@@ -540,6 +552,7 @@ export default {
color: #A3B9DA;
font-size: 16px;
height: 192px;
+ margin-top: 38px;
.item {
display: flex;
diff --git a/src/views/screenRight/right2.vue b/src/views/screenRight/right2.vue
index 2cd2255..dd75a94 100644
--- a/src/views/screenRight/right2.vue
+++ b/src/views/screenRight/right2.vue
@@ -43,7 +43,7 @@
- 加载中...
+ 加载中...
@@ -136,13 +136,20 @@ export default {
}
},
computed: {
- ...mapGetters(["shibeiAId"]),
+ ...mapGetters(["shibeiAId","shibeiAgencyType"]),
},
watch: {
shibeiAId: {
handler() {
+ if (this.shibeiAgencyType == 'street') {
+ this.headerList[1].title = '社区'
+ } else if (this.shibeiAgencyType == 'community') {
+ this.headerList[1].title = '网格'
+ } else if (this.shibeiAgencyType == 'district') {
+ this.headerList[1].title = '街道'
+ }
// if (this.shibeiAId !== "") {
- this.getData();
+ this.getData();
// }
},
immediate: true,
@@ -154,7 +161,7 @@ export default {
methods: {
getLineChart() {
const params = {};
- params.deptId = this.shibeiAId || '1175270520603930625' ;
+ params.deptId = this.shibeiAId || '1175270520603930625';
const currentDate = new Date();
params.yearMonth = currentDate.getFullYear()
this.lineChartFlag = false;
@@ -213,7 +220,7 @@ export default {
if (res.code == 0) {
this.dataListResult = []
this.dataListResult = res.data.map((item, index) => [index + 1, item.deptName, item.closedRatio, item.responseRatio, item.satisfiedRatio])
- console.log(this.dataListResult );
+ console.log(this.dataListResult);
if (this.dataListResult.length === 0) {
this.noData = true
}
@@ -246,11 +253,11 @@ export default {
this.xylTotal = xylTotal.data.find(item => item.name === '按期响应').value;
const xylValue = xylTotal.data.find(item => item.name === '按期响应').total;
- this.xylProportion = this.calculateProportion(this.xylTotal,xylValue );
+ this.xylProportion = this.calculateProportion(this.xylTotal, xylValue);
this.hflTotal = hflTotal.data.find(item => item.name === '按时回复').value;
const hflValue = hflTotal.data.find(item => item.name === '按时回复').total;
- this.hflProportion = this.calculateProportion(this.hflTotal,hflValue );
+ this.hflProportion = this.calculateProportion(this.hflTotal, hflValue);
const hflProportion = parseFloat(this.hflProportion) || 0;
const xylProportion = parseFloat(this.xylProportion) || 0;
@@ -284,7 +291,7 @@ export default {
lineInitOk() {
this.lineInitState = true;
},
-
+
// 获取饼状图
async getPieChart() {
this.$refs.pieChart.clear();
@@ -292,7 +299,7 @@ export default {
this.pieOption = pieOption();
this.pieOption.title.text = this.proportion + '%'
this.pieOption.series[1].data[0].value = this.proportion;
- this.pieOption.series[1].data[1].value = 100 - this.proportion ;
+ this.pieOption.series[1].data[1].value = 100 - this.proportion;
this.$refs.pieChart.setOption(this.pieOption);
},
getLine() {
diff --git a/src/views/screenRight/right3.vue b/src/views/screenRight/right3.vue
index 83a0d90..882853a 100644
--- a/src/views/screenRight/right3.vue
+++ b/src/views/screenRight/right3.vue
@@ -195,6 +195,13 @@ export default {
},
shibeiAId: {
handler() {
+ if(this.shibeiAgencyType == 'street'){
+ this.headerList[0].title = '社区'
+ }else if (this.shibeiAgencyType == 'community'){
+ this.headerList[0].title = '网格'
+ }else if(this.shibeiAgencyType == 'district'){
+ this.headerList[0].title = '街道'
+ }
// if (this.shibeiAId != '') {
this.getItemdailystatis()
this.getCategoryAnalysis()
@@ -208,7 +215,7 @@ export default {
}
},
computed: {
- ...mapGetters(['shibeiAId'])
+ ...mapGetters(['shibeiAId','shibeiAgencyType'])
},
methods: {
@@ -357,16 +364,33 @@ export default {
type: "pie",
center: ["50%", "30%"],//饼状图位置
radius: ["20%", "40%"],
+ // label: {
+ // show: true,
+ // },
+ // labelLine: {
+ // normal: {
+ // lineStyle: {
+ // color: 'rgba(255, 255, 255, 0.3)'
+ // },
+ // smooth: 0.2,
+ // length: "10"
+ // }
+ // },
label: {
show: true,
+ position: 'outside',
+ formatter(param) {
+ return param.name + param.value;
+ },
+ fontSize: 14,
+ fontWeight: 'bold',
+ color: '#fff'
},
labelLine: {
- normal: {
- lineStyle: {
- color: 'rgba(255, 255, 255, 0.3)'
- },
- smooth: 0.2,
- length: "10"
+ show: true,
+ length: 10, // 设置线条的长度
+ lineStyle: {
+ color: '#fff'
}
},
data: this.charData
@@ -437,15 +461,28 @@ export default {
series: [
{
type: "pie",
- radius: ["30%", "50%"],
+ radius: ["20%", "40%"],
center: ["50%", "30%"],//饼状图位置
label: {
show: false,
position: 'center'
},
label: {
- show: false,
- position: 'center'
+ show: true,
+ position: 'outside',
+ formatter(param) {
+ return param.name + param.value;
+ },
+ fontSize: 10,
+ // fontWeight: 'bold',
+ color: '#fff'
+ },
+ labelLine: {
+ show: true,
+ length: 10, // 设置线条的长度
+ lineStyle: {
+ color: '#fff'
+ }
},
emphasis: {
label: {
@@ -454,9 +491,6 @@ export default {
fontWeight: 'bold'
}
},
- labelLine: {
- show: false
- },
data: this.charsData
}
]