From e7516b492fcc1dc7630d710a44317efd0657c424 Mon Sep 17 00:00:00 2001 From: 13176889840 <13176889840@163.com> Date: Tue, 14 Dec 2021 16:42:34 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E6=8E=AA=E6=96=BD=E5=88=86?= =?UTF-8?q?=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visual/components/screen-table/index.vue | 3 + src/views/modules/visual/measure/service.vue | 144 +++++++++--------- .../modules/visual/measure/volunteer.vue | 6 +- 3 files changed, 78 insertions(+), 75 deletions(-) diff --git a/src/views/modules/visual/components/screen-table/index.vue b/src/views/modules/visual/components/screen-table/index.vue index 9d1861ac..bfc00da9 100644 --- a/src/views/modules/visual/components/screen-table/index.vue +++ b/src/views/modules/visual/components/screen-table/index.vue @@ -251,6 +251,9 @@ export default { text-align: center; width: calc(100% / 5); cursor: pointer; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; .more { font-size: 18px; font-weight: 400; diff --git a/src/views/modules/visual/measure/service.vue b/src/views/modules/visual/measure/service.vue index cf0a52a3..24b5f820 100644 --- a/src/views/modules/visual/measure/service.vue +++ b/src/views/modules/visual/measure/service.vue @@ -9,7 +9,8 @@ :options="propTree" :props="{ checkStrictly: true }" :show-all-levels="false" - clearable @change="handleCascader"> + clearable + @change="handleCascader">
@@ -178,6 +179,7 @@ export default { { title: "服务方", coulmn: 'serviceName' }, { title: "服务时间", coulmn: 'wantServiceTime' }, ], + categoryList: {}, timeRange: '', tableData: [ // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], @@ -193,6 +195,13 @@ export default { detailInfo: {} }; }, + watch: { + timeRange(val) { + console.log('val-www', val) + if (!val) return false + this.handleCascader(this.selectAgency) + } + }, async mounted() { this.initTime() await nextTick(100); @@ -214,6 +223,38 @@ export default { axisPointer: { // Use axis to trigger tooltip type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' + }, + backgroundColor: 'transprant', + borderColor: 'transprant', + textStyle: { + color: '#fff' + }, + formatter: params => { + let res; + let arr = [] + let total = 0 + const xName = params[0].axisValue + this.categoryList.forEach(item => { + if (item.categoryName === xName) { + arr = item.detail + total = item.total + } + }) + let title = `
${xName}分类需求${total}个
` + let desc = '' + let unit = '个' + arr.forEach(item => { + if (item.legendCode == 'volunteer') unit = '名' + else unit = '个' + if (item.legendCode == 'unfinished') { + desc += `
尚有 ${item.serviceDemandTotal} 个需求未完成
` + }else { + desc += `
共 ${item.totalService} ${unit} ${item.legendName} 完成需求 ${item.serviceDemandTotal} 个
` + } + + }) + res= title + desc + return res } }, legend: { @@ -232,7 +273,11 @@ export default { xAxis: { type: 'category', axisLabel: { - color: '#fff' + color: '#fff', + interval: 0 + }, + axisTick: { + interval: 0 }, data: xData }, @@ -247,76 +292,13 @@ export default { // axisLine: false }, series: yData - // [ - // { - // name: '区域化党建单位', - // type: 'bar', - // stack: 'total', - // // barWidth: 20, - // label: { - // show: true - // }, - // emphasis: { - // focus: 'series' - // }, - // data: [320, 302, 301, 334, 390, 330, 320] - // }, - // { - // name: '社会组织', - // type: 'bar', - // stack: 'total', - // // barWidth: 20, - // label: { - // show: true - // }, - // emphasis: { - // focus: 'series' - // }, - // data: [120, 132, 101, 134, 90, 230, 210] - // }, - // { - // name: '社区自组织', - // type: 'bar', - // stack: 'total', - // // barWidth: 20, - // label: { - // show: true - // }, - // emphasis: { - // focus: 'series' - // }, - // data: [220, 182, 191, 234, 290, 330, 310] - // }, - // { - // name: '志愿者', - // type: 'bar', - // stack: 'total', - // // barWidth: 20, - // label: { - // show: true - // }, - // emphasis: { - // focus: 'series' - // }, - // data: [150, 212, 201, 154, 190, 330, 410] - // }, - // { - // name: '未完成', - // type: 'bar', - // stack: 'total', - // // barWidth: 20, - // label: { - // show: true - // }, - // emphasis: { - // focus: 'series' - // }, - // data: [820, 832, 901, 934, 1290, 1330, 1320] - // } - // ] + }; option && _charts.setOption(option); + _charts.on('click', params => { + this.clickBar(params) + }) }, async getServicePie(orgId, orgType) { @@ -331,6 +313,7 @@ export default { if (code === 0) { console.log('pie-data', data) const { categoryList, legend } = data + this.categoryList = categoryList let xData = categoryList.map(item => item.categoryName) let yData = [] yData = legend.map(item => { @@ -475,6 +458,18 @@ export default { return y + '-' + m + '-' + d }, + clickBar(params) { + console.log('params---p', params) + let code = '' + this.categoryList.forEach(item => { + if (item.categoryName == params.name) code = item.categoryCode + }) + if (code) { + const _arr = this.selectAgency[this.selectAgency.length - 1].split('-') + const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' + this.getServiceList(_arr[0], orgType, code) + } + }, async handleLook(val) { // this.detailId = val.id @@ -484,16 +479,21 @@ export default { }, handleCascader(val) { console.log('val-vvv', val) - const _arr = val[val.length - 1].split('-') - const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' - this.getServiceList(_arr[0], orgType) + if (val.length > 0) { + const _arr = val[val.length - 1].split('-') + const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' + this.getServicePie(_arr[0], orgType) + } + }, pageSizeChangeHandleNew(val) { this.pageNo = 1; this.pageSize = val; + this.handleCascader(this.selectAgency) }, pageCurrentChangeHandleNew(val) { this.pageNo = val; + this.handleCascader(this.selectAgency) }, }, }; diff --git a/src/views/modules/visual/measure/volunteer.vue b/src/views/modules/visual/measure/volunteer.vue index c4447dce..603a82da 100644 --- a/src/views/modules/visual/measure/volunteer.vue +++ b/src/views/modules/visual/measure/volunteer.vue @@ -596,14 +596,14 @@ export default { } .card-wr-map { - height: calc(100vh - 140px); + height: calc(100vh - 150px); text-align: center; .card-map { margin-top: 10px; width: 100%; - height: calc(100vh - 285px); - // height: calc(100vh - 295px); + // height: calc(100vh - 285px); + height: calc(100vh - 315px); .map { width: 100%;