-
党员年龄统计
-
-
-
-
-
-
-
-
+
- {{ item.name }}
-
-
-
- {{item.value}}
- {{ item.radio }}
-
+
-
-
+
+ ![]()
{{item.name}}
+
-
-
-
+
+
+
+
+
+
+
+
+ {{houseData.houseTotal}}
+ 房屋总数
+
+
+ {{houseData.zzHouseTotal}}
+ 自住房屋数
+
+
+ {{houseData.czHouseTotal}}
+ 出租房屋数
+
+ {{houseData.xzHouseTotal}}
+ 闲置房屋数
+
+ 加载中
+
-
党员学历统计
-
-
-
-
-
+
+
-
+
+ 常住人口数
+
+
+
+ 流动人口数
+
-
+
+
-
+
-
-
- {{item.name}}
-
+
-
+
+
+ {{userData.userTotal}}
+ 居民总数
+
+
+ {{userData.czUserTotal}}
+ 常住人口数
+
+
{{userData.ldUserTotal}}
+ 流动人口数
+
- 导出
+
+
+ 加载中
-
-
+
+
-
-
+
+
+ 下级人房概览数据统计
+
+
+
+
@@ -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 @@
+ 
+ {{item.orgName}}
+
+
+
+ {{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%
+ 流动人口数
+