From 89acfd6e65807453da3e501bff320fc214f6b118 Mon Sep 17 00:00:00 2001
From: Lou <luzhiping@qqyjz.com>
Date: Thu, 18 Jan 2024 17:48:48 +0800
Subject: [PATCH] 居民监管、住房管理添加饼状图
---
src/views/propertySupervision/houseHoldSupervision.vue | 92 ++++++++++++++++++++++
src/views/propertySupervision/residentSupervision.vue | 102 +++++++++++++++++++++++++
2 files changed, 191 insertions(+), 3 deletions(-)
diff --git a/src/views/propertySupervision/houseHoldSupervision.vue b/src/views/propertySupervision/houseHoldSupervision.vue
index 2682abc..a54c951 100644
--- a/src/views/propertySupervision/houseHoldSupervision.vue
+++ b/src/views/propertySupervision/houseHoldSupervision.vue
@@ -24,7 +24,13 @@
@click="manageLabel(row)">标签
</el-button>
</template> -->
+
+ <template slot="menuLeft">
+ <div class="echarts-wrap">
+ <div class="echarts-item" id="echarts"></div>
+ </div>
+ </template>
<template slot-scope="{row, size}" slot="phone">
@@ -130,6 +136,11 @@
import func from "@/util/func"
// import householdManager from "./components/householdManager"
import Qs from "qs"
+ import * as echarts from 'echarts';
+ import {
+ getTreeList
+} from '@/api/label/label'
+
export default {
components: {
// householdManager
@@ -476,7 +487,8 @@
formslot: true,
span: 24,
}
- ]
+ ],
+ labelCountList:[]
}
}
},
@@ -512,7 +524,9 @@
}
}
},
- mounted() {},
+ mounted() {
+ this.getLabelCount()
+ },
methods: {
onsubmit() {
@@ -795,7 +809,72 @@
},
showStringDispose(row, type) {
row[type] = !row[type]
+ },
+
+ getLabelCount(){
+ getTreeList().then(res => {
+ const data = res.data.data
+ let list = data[1].children;
+ this.labelCountList = list;
+ this.$nextTick(()=>{
+ this.setEchartsOption(list)
+ })
+ })
+ },
+
+ setEchartsOption(data){
+ let option = {
+ // title: {
+ // text:"房屋",
+ // left: 'center',
+ // top:20,
+ // },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'horizontal',
+ left: 'right',
+ top: 'bottom',
+ },
+ // labelLine: {
+ // length: 15,
+ // length2: 0,
+ // maxSurfaceAngle: 80
+ // },
+ series: [
+ {
+ type: 'pie',
+ radius: '50%',
+ data: [],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ };
+ let myEchart = document.getElementById('echarts'); //获取类名
+ let myCharts = echarts.init(myEchart);
+ for(let i = 0,ii = data.length;i<ii;i++){
+ option.series[0].data.push({
+ name:data[i].name,
+ value:data[i].count,
+ id:data[i].id
+ });
+ option && myCharts.setOption(option);
+ myCharts.on('click',(params)=>{
+ console.log(params)
+ this.query.labelId = params.data.id;
+ this.onLoad(this.page, this.query)
+ })
+ }
+
}
+
}
}
</script>
@@ -812,4 +891,13 @@
.box .el-scrollbar__wrap {
overflow: scroll;
}
+ .echarts-wrap{
+ display: flex;
+ padding:0 30px;
+ justify-content: center
+ }
+ .echarts-item{
+ width:100%;
+ height:300px;
+ }
</style>
\ No newline at end of file
diff --git a/src/views/propertySupervision/residentSupervision.vue b/src/views/propertySupervision/residentSupervision.vue
index c83d43a..b671a4d 100644
--- a/src/views/propertySupervision/residentSupervision.vue
+++ b/src/views/propertySupervision/residentSupervision.vue
@@ -2,12 +2,21 @@
<el-row>
<el-col :span="24">
<basic-container>
+
+
+
<avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud"
v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
:before-open="beforeOpen" :page.sync="page" @search-change="searchChange" @search-reset="searchReset"
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
@refresh-change="refreshChange" @on-load="onLoad">
+ <template slot="menuLeft">
+ <div class="echarts-wrap">
+ <div class="echarts-item" v-for="(i,k) in labelCountList" :key="k"></div>
+ </div>
+ </template>
+
<template slot-scope="{row, size}" slot="menu">
<el-button :size="size" type="text" icon="el-icon-circle-plus-outline" v-if="permission.househould_manager"
@click="manageLabel(row)">标签
@@ -108,6 +117,10 @@
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import Qs from "qs"
+ import * as echarts from 'echarts';
+ import {
+ getTreeList
+} from '@/api/label/label'
export default {
@@ -743,6 +756,9 @@
currentLabel: {},
currentRow: {},
householdLabelList: [],
+
+ labelCountList:[]
+
}
},
watch: {
@@ -836,7 +852,10 @@
}
}
},
- mounted() {},
+ mounted() {
+ this.getLabelCount();
+
+ },
methods: {
init(row) {
console.log(JSON.stringify(row))
@@ -1078,6 +1097,76 @@
showStringDispose(row, type) {
row[type] = !row[type]
+ },
+
+ getLabelCount(){
+ getTreeList().then(res => {
+ const data = res.data.data
+ let list = data[0].children;
+ this.labelCountList = list;
+ this.$nextTick(()=>{
+ this.setEchartsOption(list)
+ })
+ })
+ },
+
+ setEchartsOption(data){
+ let option = {
+ title: {
+ text:"",
+ left: 'center',
+ top:20,
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'horizontal',
+ left: 'center',
+ top: 70,
+ },
+ labelLine: {
+ length: 15,
+ length2: 0,
+ maxSurfaceAngle: 80
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: '35%',
+ data: [],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ };
+ let myEchart = document.getElementsByClassName('echarts-item'); //获取类名
+ for(let i = 0,ii = data.length;i<ii;i++){
+ let myCharts = echarts.init(myEchart[i]);
+ option.title.text = data[i].name;
+ let series = [];
+ for(let k = 0,kk = data[i].children.length;k<kk;k++){
+ series.push({
+ value:data[i].children[k].count,
+ name:data[i].children[k].name,
+ id:data[i].children[k].id,
+ })
+ }
+ option.legend.type = series.length > 4?"scroll":"plain"
+ option.series[0].data = series;
+ option && myCharts.setOption(option);
+ myCharts.on('click',(params)=>{
+ console.log(params)
+ this.query.labelId = params.data.id;
+ this.onLoad(this.page, this.query)
+ })
+ }
+
}
}
}
@@ -1118,4 +1207,15 @@
.box .el-scrollbar__wrap {
overflow: scroll;
}
+
+ .echarts-wrap{
+ display: flex;
+ flex-wrap: wrap;
+ padding:0 30px;
+ }
+ .echarts-item{
+ width:320px;
+ height:400px;
+ margin:0 30px 30px 0;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3