From e967743716623a42a0c0fc903afb88e8659ae0f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=98=E7=AB=8B=E6=A0=87?= <2658037827@qq.com> Date: Thu, 21 Sep 2023 17:04:22 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=BB=A1=E6=84=8F=E5=BA=A6?= =?UTF-8?q?=E8=AF=84=E4=BB=B7=E9=A6=96=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/EventSituation/index.vue | 51 ++-- .../modules/EventStatistics/index.vue | 170 +++++++------- .../modules/PersonnelPortrait/index.vue | 151 ++++++++---- .../modules/PotentialPeople/index.vue | 44 +++- .../modules/RiskStatistics/index.vue | 57 ++++- .../modules/SelfTrend/index.vue | 178 +++++++------- .../modules/TypesOfDissatisfaction/index.vue | 218 +++++++++++------- 7 files changed, 537 insertions(+), 332 deletions(-) diff --git a/src/views/dataBoard/satisfactionEval/modules/EventSituation/index.vue b/src/views/dataBoard/satisfactionEval/modules/EventSituation/index.vue index 857169aa3..e904dd399 100644 --- a/src/views/dataBoard/satisfactionEval/modules/EventSituation/index.vue +++ b/src/views/dataBoard/satisfactionEval/modules/EventSituation/index.vue @@ -4,29 +4,29 @@
- {{ curMonth }} 月 + {{ $moment(curMonth.monthTime).format('M') }} 月
事件总数
-
52
+
{{curMonth.sumNum}}
处理中
-
13
+
{{curMonth.processNum}}
已办结
-
28
+
{{curMonth.closedNum}}
-
{{ item.month }}月
-
{{ item.num }}
-
{{ item.env }}事件数
+
{{ $moment(item.monthTime).format('M') }}月
+
{{ item.sumNum?item.sumNum:'--' }}
+
{{ item.type?item.type+'事件数':'--' }}
@@ -41,18 +41,30 @@ export default { curMonth: '' } }, + watch: { + "$store.state.chooseArea.chooseName"(val) { + if (val.orgId) { + this.getData(); + } + } + }, mounted() { - this.curMonth = new Date().getMonth() - 0 + 1 - let eventList = [] - for (let i = 4; i >= 0; i--) { - eventList.push({ - month: this.curMonth - 1 - i, - num: 10, - env: 11, - }) + if (this.$store.state.chooseArea.chooseName.orgId) { + this.getData(); } - this.eventList = eventList }, + methods: { + getData() { + let params = { + level: this.$store.state.chooseArea.chooseName.level, + orgId: this.$store.state.chooseArea.chooseName.orgId + } + this.$http.get('/governance/satisfactionOverview/do12345MonthGroup?'+this.$paramsFormat(params)).then(({data: {data}}) => { + this.curMonth = data.filter(item => item.monthTime === this.$moment().format('YYYY-MM'))[0] + this.eventList = data.filter(item => item.monthTime !== this.$moment().format('YYYY-MM')) + }) + } + } } @@ -70,12 +82,14 @@ export default { text-align: center; letter-spacing: 5px; } + .current { display: flex; align-items: center; justify-content: space-between; padding: 20px 60px 15px 50px; } + .cur-month { font-size: 18px; font-weight: 400; @@ -96,8 +110,10 @@ export default { .cur-month-list { display: flex; + .cur-month-item { margin-left: 71px; + .txt { font-size: 16px; font-weight: 400; @@ -130,6 +146,7 @@ export default { background: linear-gradient(-90deg, rgba(14, 121, 213, 0.10) 0%, rgba(17, 124, 213, 0) 100%); padding: 20px; margin-bottom: 28px; + .his-month-item { flex: 1; position: relative; @@ -147,9 +164,11 @@ export default { } + &:last-child:after { display: none; } + .month { font-size: 14px; font-weight: 400; diff --git a/src/views/dataBoard/satisfactionEval/modules/EventStatistics/index.vue b/src/views/dataBoard/satisfactionEval/modules/EventStatistics/index.vue index efb5493ed..92a60bae3 100644 --- a/src/views/dataBoard/satisfactionEval/modules/EventStatistics/index.vue +++ b/src/views/dataBoard/satisfactionEval/modules/EventStatistics/index.vue @@ -14,19 +14,88 @@ export default { } }, + + watch: { + "$store.state.chooseArea.chooseName"(val) { + if (val.orgId) { + this.getData(); + } + } + }, mounted() { - this.initCharts() + if (this.$store.state.chooseArea.chooseName.orgId) { + this.getData(); + } }, methods: { - initCharts() { + getData() { + let params = { + level: this.$store.state.chooseArea.chooseName.level, + orgId: this.$store.state.chooseArea.chooseName.orgId, + } + params = this.$paramsFormat(params) + this.$http.get('/governance/satisfactionOverview/childSatisfactionGroup?' + params).then(({data: {data}}) => { + this.initCharts(data) + }) + }, + initCharts({orgList,series}) { let div = document.getElementById('eventStatisticsChart'); this.myChart = echarts.init(div); - let xData = ['XX社区第一网格','XX社区第二网格','XX社区第三网格','XX社区第四网格',]; - let tq1 = [12, 20, 30, 60]; - let tq2 = [10, 50, 50, 27]; - let tq3 = [300, 90, 48, 39]; - const max = Math.max(...tq1, ...tq2, ...tq3) + let xData = orgList; + let color = [[ + { + offset: 0, + color: 'rgba(152, 72, 255, 0)' + }, + { + offset: 1, + color: '#A962FF' + } + ], [ + { + offset: 0, + color: 'rgba(255, 228, 102, 0)' // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(255, 228, 102, 1)' // 100% 处的颜色 + } + ], [ + { + offset: 0, + color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色 + } + ]] + let seriesArray = series.map((item, index) => { + return { + name: item.name, + type: 'bar', + barWidth: 14, + itemStyle: { + opacity: 1, + color: new echarts.graphic.LinearGradient( + 0, + 1, + 0, + 0, + color[index], + false + ) + }, + data: item.data, + } + }) + console.log(seriesArray) + let num = [] + series.forEach(item => { + num.push(...item.data) + }) + const max = Math.max(...num) let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100) var option = { @@ -43,8 +112,8 @@ export default { }, tooltip: { trigger: 'axis', - backgroundColor: 'rgba(13, 64, 71, 0.50)', - borderColor: 'rgba(143, 225, 252, 0.60)', + backgroundColor: 'rgba(13,33,71,0.5)', + borderColor: 'rgba(143,174,252,0.6)', padding: 8, textStyle: { color: '#fff', @@ -62,7 +131,7 @@ export default { }, legend: { // icon: 'circle', - data: ['12345投诉', '省满意度调查', '社区满意度自查'], + data: series.map(item => item.name), itemGap: 20, itemWidth: 6, itemHeight: 6, @@ -148,86 +217,7 @@ export default { } ], series: [ - { - name: '12345投诉', - type: 'bar', - barWidth: 14, - itemStyle: { - opacity: 1, - color: new echarts.graphic.LinearGradient( - 0, - 1, - 0, - 0, - [ - { - offset: 0, - color: 'rgba(152, 72, 255, 0)' // 0% 处的颜色 - }, - { - offset: 1, - color: '#A962FF' // 100% 处的颜色 - } - ], - false - ) - }, - data: tq1, - }, - { - name: '省满意度调查', - type: 'bar', - barWidth: 14, - itemStyle: { - // lenged文本 - opacity: 1, // 这个是 透明度 - color: new echarts.graphic.LinearGradient( - 0, - 1, - 0, - 0, - [ - { - offset: 0, - color: 'rgba(255, 228, 102, 0)' // 0% 处的颜色 - }, - { - offset: 1, - color: 'rgba(255, 228, 102, 1)' // 100% 处的颜色 - } - ], - false - ) - }, - data: tq2, //data.values - }, - { - name: '社区满意度自查', - type: 'bar', - barWidth: 14, - itemStyle: { - // lenged文本 - opacity: 1, // 这个是 透明度 - color: new echarts.graphic.LinearGradient( - 0, - 1, - 0, - 0, - [ - { - offset: 0, - color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色 - }, - { - offset: 1, - color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色 - } - ], - false - ) - }, - data: tq3, //data.values - }, + ...seriesArray, { name: '', type: 'bar', diff --git a/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue b/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue index 37a8a6960..6ffd06d18 100644 --- a/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue +++ b/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue @@ -3,7 +3,7 @@
不满意人员画像
- +
-
第一网格
-
30-40岁
-
流动人员
-
月收入5000以下
-
专科
-
已婚
-
男
+
+
{{ gridName }}
+
+
+
{{ ageClassification }}
+
+
+
{{ residentTagName }}
+
+
+
{{ monthIncomeLevel }}
+
+
+
{{ cultureLevel }}
+
+
+
{{ marriageName }}
+
+
+
{{ gender==='1'?'男':gender==='2'?'女':gender==='0'?'未知':'' }}
+
-
按画像匹配到同类： 372人
+
按画像匹配到同类： {{matchPeopleNum?matchPeopleNum:0}}人
@@ -38,47 +52,68 @@ export default { components: {Tabs}, data() { return { - resultType: 1, + resultType: 'provinceAndSelf', resultTypeList: [{ label: ' 按省调查/社区自查结果', - value: 1 + value: 'provinceAndSelf' }, { label: '按12345热线投诉结果', - value: 2 + value: '12345' }], typeCondition: 1, - typeConditionList: [ - { - label: '基础教育', - value: 1 - }, { - label: '病有所医', - value: 2 - }, { - label: '老有所养', - value: 3 - }, { - label: '文化设施', - value: 4 - }, { - label: '生态环境', - value: 5 - }, { - label: '体育设施', - value: 6 - }, { - label: '社会救助', - value: 7 - }, - ], + typeConditionList: [], + gender: "", + marriageName: "", + ageClassification: "", + cultureLevel: "", + gridName: "", + monthIncomeLevel: "", + residentTagName: "", + matchPeopleNum: 0 + } + }, + watch: { + "$store.state.chooseArea.chooseName"(val) { + if (val.orgId) { + this.getDisKey() + } } }, mounted() { + if (this.$store.state.chooseArea.chooseName.orgId) { + this.getDisKey() + } }, methods: { - resultTypeChange() { - + resultTypeChange(val) { + this.resultType = val + this.getData() + }, + getDisKey() { + this.$http.post('/sys/dict/data/dictlist', {'dictType': 'satisfaction_category'}).then(({data: {data}}) => { + this.typeCondition = data[0].value + this.typeConditionList = data + this.getData(); + }) + }, + getData() { + let params = { + level: this.$store.state.chooseArea.chooseName.level, + orgId: this.$store.state.chooseArea.chooseName.orgId, + queryType: this.resultType, + category: this.typeCondition, + } + this.$http.get('/governance/satisfactionOverview/satisfactionCrowdPortrait?' + this.$paramsFormat(params)).then(({data: {data}}) => { + this.gender = data.gender; + this.marriageName = data.marriageName; + this.ageClassification = data.ageClassification; + this.cultureLevel = data.cultureLevel; + this.gridName = data.gridName; + this.monthIncomeLevel = data.monthIncomeLevel; + this.residentTagName = data.residentTagName; + this.matchPeopleNum = data.matchPeopleNum; + }) } } } @@ -131,6 +166,7 @@ $purple: #6642fd; background: url("@/assets/images/manyidu/hx_bg.png") no-repeat center; margin: 0 auto; cursor: pointer; + .tag { position: absolute; width: 76px; @@ -138,6 +174,7 @@ $purple: #6642fd; display: flex; align-items: center; justify-content: center; + .text { width: 60px; height: 60px; @@ -149,6 +186,7 @@ $purple: #6642fd; justify-content: center; border-radius: 50%; } + &:after { content: ""; opacity: .3; @@ -159,92 +197,114 @@ $purple: #6642fd; border-radius: 50%; } + &:nth-of-type(1) { left: 162px; top: 0; } + &:nth-of-type(2) { left: 297px; top: 73px; } + &:nth-of-type(3) { left: 316px; top: 203px; } + &:nth-of-type(4) { left: 228px; top: 269px; } + &:nth-of-type(5) { left: 77px; top: 257px; } + &:nth-of-type(6) { left: 0px; top: 158px; } + &:nth-of-type(7) { left: 48px; top: 57px; } } + .yellow { .text { - background: $yellow; + background: $yellow; } + &:after { background: $yellow; } } + .blue { .text { - background: $blue; + background: $blue; } + &:after { background: $blue; } } + .red { .text { - background: $red; + background: $red; } + &:after { background: $red; } } + .light { .text { - background: $light; + background: $light; } + &:after { background: $light; } } + .green { .text { - background: $green; + background: $green; } + &:after { background: $green; } } + .orange { .text { - background: $orange; + background: $orange; } + &:after { background: $orange; } } + .purple { .text { - background: $purple; + background: $purple; } + &:after { background: $purple; } } } + .btn { width: 240px; height: 46px; @@ -260,6 +320,7 @@ $purple: #6642fd; padding: 0 20px; margin: 33px auto 0; cursor: pointer; + span { font-size: 18px; } diff --git a/src/views/dataBoard/satisfactionEval/modules/PotentialPeople/index.vue b/src/views/dataBoard/satisfactionEval/modules/PotentialPeople/index.vue index b2d785622..abe79d71c 100644 --- a/src/views/dataBoard/satisfactionEval/modules/PotentialPeople/index.vue +++ b/src/views/dataBoard/satisfactionEval/modules/PotentialPeople/index.vue @@ -8,7 +8,7 @@ 事件未解决
上报人数 -
78人
+
{{ unSolvedNum ? unSolvedNum : 0 }}人
@@ -18,7 +18,7 @@ 需求未满足
人数
-
128人
+
{{ unFinishNum ? unFinishNum : 0 }}人
@@ -28,14 +28,47 @@ 应享未享
服务人数
-
527人
+
{{ noServiceNum ? noServiceNum : 0 }}人
@@ -51,8 +84,9 @@ export default { text-align: center; flex: 1; border: 1px solid rgba(28, 67, 111, 0.22); - background: linear-gradient(0deg, rgba(31, 121, 255, 0.22) 0%, rgba(31,121,255,0) 100%); + background: linear-gradient(0deg, rgba(31, 121, 255, 0.22) 0%, rgba(31, 121, 255, 0) 100%); padding: 26px 0 31px; + .icon { width: 86px; height: 86px; diff --git a/src/views/dataBoard/satisfactionEval/modules/RiskStatistics/index.vue b/src/views/dataBoard/satisfactionEval/modules/RiskStatistics/index.vue index 526e08dd2..99b09ecd4 100644 --- a/src/views/dataBoard/satisfactionEval/modules/RiskStatistics/index.vue +++ b/src/views/dataBoard/satisfactionEval/modules/RiskStatistics/index.vue @@ -10,7 +10,7 @@ 12345热线
投诉人数 -
7 人
+
{{event12345Num?event12345Num:0}} 人
@@ -23,7 +23,7 @@ 省满意度调查
不满意人数 -
7 人
+
{{provinceSatisfactionNum?provinceSatisfactionNum:0}} 人
@@ -36,7 +36,7 @@ 社区满意度自评
不满意人数 -
7 人
+
{{selfInspectNum?selfInspectNum:0}} 人
@@ -46,28 +46,28 @@ 本月回访
次数 -
112 人
+
{{followMonthNum?followMonthNum:0}} 人
本月回访消除
风险人员数
-
112 人
+
{{followMonthNotRiskyNum?followMonthNotRiskyNum:0}} 人
累计回访
次数
-
112 人
+
{{followSumNum?followSumNum:0}} 人
累计回访消除
风险人员数
-
112 人
+
{{followNotRiskyNum?followNotRiskyNum:0}} 人
@@ -76,7 +76,48 @@ diff --git a/src/views/dataBoard/satisfactionEval/modules/SelfTrend/index.vue b/src/views/dataBoard/satisfactionEval/modules/SelfTrend/index.vue index b7c81fb1f..9cb614f1d 100644 --- a/src/views/dataBoard/satisfactionEval/modules/SelfTrend/index.vue +++ b/src/views/dataBoard/satisfactionEval/modules/SelfTrend/index.vue @@ -28,25 +28,82 @@ export default { }], } }, + watch: { + "$store.state.chooseArea.chooseName"(val) { + if (val.orgId) { + this.getData(); + } + } + }, mounted() { - this.initCharts() + if (this.$store.state.chooseArea.chooseName.orgId) { + this.getData(); + } }, methods: { - trendTypeChange(data) { - + trendTypeChange(val) { + if (val !== this.trendType) { + this.trendType = val + this.getData() + } }, - initCharts() { + getData() { + let params = { + level: this.$store.state.chooseArea.chooseName.level, + orgId: this.$store.state.chooseArea.chooseName.orgId, + } + let url = '/governance/satisfactionOverview/notSatisfactionTrend' + if (this.trendType === 2) { + url = '/governance/satisfactionOverview/selfInspectMonthTrend' + } + params = this.$paramsFormat(params) + this.$http.get(url + '?' + params).then(({data: {data}}) => { + this.initCharts(data) + }) + }, + initCharts({monthTimes, series}) { let div = document.getElementById('selfTrendChart'); this.myChart = echarts.init(div); - let xData = ['2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09']; - let tq1 = [12, 20, 30, 60, 49, 18, 90, 48, 39, 30, 27, 40, 48, 39, 27, 49]; - let tq2 = [10, 50, 50, 27, 49, 58, 80, 80, 19, 60, 30, 30, 49, 18, 90, 20]; - let tq3 = [300, 90, 48, 39, 30, 27, 49, 18, 90, 39, 27, 49, 30, 100, 49, 100]; - const max = Math.max(...tq1, ...tq2, ...tq3) + let xData = monthTimes; + let color = ['#F95619', '#F9E066', '#25F0F6'] + let seriesArray = series.map((item, index) => { + return { + name: item.name, + type: 'line', + showAllSymbol: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + normal: { + color: color[index], + }, + }, + label: { + show: false, + position: 'top', + textStyle: { + color: color[index], + }, + }, + itemStyle: { + color: color[index], + borderColor: color[index], + borderWidth: 2, + }, + data: item.data, + } + }) + console.log(seriesArray) + let num = [] + series.forEach(item => { + num.push(...item.data) + }) + const max = Math.max(...num) let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100) var option = { + title: { show: false, text: '', @@ -58,10 +115,28 @@ export default { fontSize: 18, }, }, - + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(13,33,71,0.5)', + borderColor: 'rgba(143,174,252,0.6)', + padding: 8, + textStyle: { + color: '#fff', + }, + formatter: function (params) { + console.log(params) + var res = '

' + params[0].name + '

' + for (var i = 0; i < params.length; i++) { + if (params[i].seriesName != "") { + res += '

' + params[i].seriesName + ':' + params[i].data + '

' + } + } + return res; + }, + }, legend: { // icon: 'circle', - data: ['12345投诉事件数', '省调查不满意数', '社区自查不满意数'], + data: series.map(item => item.name), itemGap: 20, itemWidth: 16, itemHeight: 6, @@ -142,84 +217,9 @@ export default { ], series: [ + ...seriesArray, { - name: '12345投诉事件数', - type: 'line', - showAllSymbol: true, - symbol: 'circle', - symbolSize: 6, - lineStyle: { - normal: { - color: '#F95619', - }, - }, - label: { - show: false, - position: 'top', - textStyle: { - color: '#F95619', - }, - }, - itemStyle: { - color: '#F95619', - borderColor: '#F95619', - borderWidth: 2, - }, - data: tq1, - }, - { - name: '省调查不满意数', - type: 'line', - showAllSymbol: true, - symbol: 'circle', - symbolSize: 6, - lineStyle: { - normal: { - color: '#F9E066', - }, - }, - label: { - show: false, - position: 'top', - textStyle: { - color: '#F9E066', - }, - }, - itemStyle: { - color: '#F9E066', - borderColor: '#F9E066', - borderWidth: 2, - }, - data: tq2, //data.values - }, - { - name: '社区自查不满意数', - type: 'line', - yIndex: 0, - showAllSymbol: true, - symbol: 'circle', - symbolSize: 6, - lineStyle: { - normal: { - color: '#25F0F6', - }, - }, - label: { - show: false, - position: 'top', - textStyle: { - color: '#25F0F6', - }, - }, - itemStyle: { - color: '#25F0F6', - borderColor: '#25F0F6', - borderWidth: 2, - }, - data: tq3, //data.values - }, - { - // name: '占位背景', + name: '', type: 'bar', itemStyle: { normal: { @@ -235,7 +235,7 @@ export default { }, ], }; - this.myChart.setOption(option); + this.myChart.setOption(option, true); window.addEventListener("resize", () => this.myChart.resize()); }, } diff --git a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue index 145a5f068..57d90f0d6 100644 --- a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue +++ b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue @@ -1,15 +1,19 @@