From d99e70438fd015ab178c0b63fdeb651565fffa97 Mon Sep 17 00:00:00 2001
From: duanliangtao <dlt0099>
Date: Sat, 9 Sep 2023 16:05:37 +0800
Subject: [PATCH] =?UTF-8?q?12345=E6=9C=88=E5=BA=A6=E7=83=AD=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/goverhotline/index.vue | 655 +++++++++++++++++++++++
 1 file changed, 655 insertions(+)
 create mode 100644 src/views/modules/goverhotline/index.vue

diff --git a/src/views/modules/goverhotline/index.vue b/src/views/modules/goverhotline/index.vue
new file mode 100644
index 000000000..dabbbcc81
--- /dev/null
+++ b/src/views/modules/goverhotline/index.vue
@@ -0,0 +1,655 @@
+
+<template>
+  <div class="g-main">
+      <div>
+          <div class="m-search">
+              <el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'">
+                  <el-form-item label="统计时间">
+                      <el-date-picker v-model="formData.queryDateStart" type="date" value-format="yyyy-MM" placeholder="开始时间"
+                          style="width: 202px" clearable>
+                      </el-date-picker>
+                           至  
+                      <el-date-picker v-model="formData.queryDateEnd" type="date" value-format="yyyy-MM" placeholder="结束时间"
+                          style="width: 202px" clearable>
+                      </el-date-picker>
+                  </el-form-item>
+                  <el-button style="margin-left: 30px" size="small" type="primary "
+                      @click="handleSearch">查询</el-button>
+                  <el-button style="margin-left: 10px" is-plain class="diy-button--white el-button--default"
+                      size="small" @click="exportReport">导出</el-button>
+              </el-form>
+
+          </div>
+
+          <div class="m-table">
+            <div  style="text-align: center;">
+              <h1>海伦路街道2023年1月1日至6月31日</h1>
+              <h1>政务热线运行情况分析报告</h1>
+            </div>
+            <div>
+              <h1 style="font-size: 24px; font-weight: bold;"> 一、总体运行情况 </h1>
+              <p style="font-size: 16px; line-height: 1.5; margin-top: 10px; text-indent: 2em;">
+                {{ report.overallOperation }}
+              </p>
+              <h1 style="text-align: center;font-size: 20px;">行业领域分布情况</h1>
+              <div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
+                <div id="categoryChart"></div>
+                <div id="categoryPie"></div>
+              </div>
+            </div>
+
+            <div>
+              <h1 style="font-size: 24px; font-weight: bold;"> 二、工单情况分析 </h1>
+              <h2 style="font-size: 20px; font-weight: bold;"> (一）地域统计分析 </h2>
+              <p style="font-size: 16px; line-height: 1.5; margin-top: 10px; text-indent: 2em;">
+                {{ report.geoStatis }}
+              </p>
+              <h1 style="text-align: center;font-size: 20px;">各社区问题数量及占比</h1>
+              <div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
+                <div id="communityChart"></div>
+              </div>
+
+
+              <h2 style="font-size: 20px; font-weight: bold;"> (二）科室热线分布分析 </h2>
+              <p style="font-size: 16px; line-height: 1.5; margin-top: 10px; text-indent: 2em;">
+                {{ report.departHotline }}
+              </p>
+              <h1 style="text-align: center;font-size: 20px;">科室热线分布情况</h1>
+              <div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
+                <div id="departChart"></div>
+              </div>
+
+              <h2 style="font-size: 20px; font-weight: bold;"> (三）热点诉求及区域分析 </h2>
+              <p style="font-size: 16px; line-height: 1.5; margin-top: 10px; text-indent: 2em;">
+                {{ report.hotDemand }}
+              </p>
+              <h1 style="text-align: center;font-size: 20px;">热线诉求热点问题前十</h1>
+              <div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
+                <div id="hotlineChart"></div>
+              </div>
+
+            </div>
+
+
+            <div>
+              <h1 style="font-size: 24px; font-weight: bold;"> 三、存在主要问题 </h1>
+              <h2 style="font-size: 20px; font-weight: bold;"> (一）同地点同类型事件重复投诉 </h2>
+            </div>
+
+            <!-- <el-table :data="addressData" border class="m-table-item" style="width: 100%" :height="maxTableHeight">
+              <el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
+              <el-table-column prop="address" align="center" label="地点" :show-overflow-tooltip="true"></el-table-column>
+              <el-table-column prop="amount" align="center" label="投诉次数" :show-overflow-tooltip="true"></el-table-column>
+              <el-table-column prop="content" align="center" label="投诉内容" :show-overflow-tooltip="true"></el-table-column>
+            </el-table> -->
+
+            <div>
+              <h2 style="font-size: 20px; font-weight: bold;"> (二）同一人员重复投诉</h2>
+            </div>
+
+            <!-- <el-table :data="mobileData" border class="m-table-item" style="width: 100%" :height="maxTableHeight">
+              <el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
+              <el-table-column prop="address" align="center" label="联系方式" :show-overflow-tooltip="true"></el-table-column>
+              <el-table-column prop="amount" align="center" label="投诉次数" :show-overflow-tooltip="true"></el-table-column>
+              <el-table-column prop="content" align="center" label="投诉内容" :show-overflow-tooltip="true"></el-table-column>
+            </el-table> -->
+
+          </div>
+      </div>
+    
+     
+  </div>
+</template>
+<script>
+import { requestPost, requestGet } from "@/js/dai/request";
+import nextTick from "dai-js/tools/nextTick";
+import { mapGetters } from "vuex";
+import axios from "axios";
+import * as echarts from "echarts";
+
+export default {
+  components: {},
+
+  data() {
+      return {
+          searchH: 20,
+      
+          formData: {
+            queryDateStart: "",
+            queryDateEnd: "",
+          },
+
+          // 内容字段
+          report:{
+            overallOperation:"",
+            geoStatis:"",
+            departHotline:"",
+            hotDemand:""
+          },
+          addressData:{},
+          mobileData:{},
+
+          categoryChart: {},
+          categoryPie: {},
+          communityChart: {},
+          departChart: {},
+          hotlineChart: {},
+
+
+          categoryChartOption: {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['工单数量'],
+                    bottom: '10%',
+                    icon: 'rect',
+                    itemWidth: 20,
+                    itemHeight: 5,
+                    itemGap: 20,
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '25%',
+                    containLabel: true
+                },
+                toolbox: {},
+
+
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: true,
+                    data: [],
+                },
+                yAxis: {
+                    type: 'value',
+                    name: '单位(个)',
+                    min: 0,
+                },
+                series: [
+                    {
+                        name: '工单数量',
+                        type: 'bar',
+                        data: [],
+                        barWidth: 36, // 设置柱子宽度
+                        barCategoryGap: 0, // 设置柱子间的间隔为0
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    { offset: 0, color: '#2c7cf2' }, // 从顶部开始
+                                    { offset: 1, color: '#80b3ff' } // 到底部结束
+                                ]
+                            )
+                        },
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: '#fafbfc',
+                            opacity: "0.5"
+                        }
+                    },
+                ]
+            },
+      
+          categoryPieOption:{
+            tooltip: {
+              trigger: 'item'
+            },
+            legend: {
+              type: 'scroll',
+              bottom: 0,
+            },
+            series: [
+              {
+                name: '数量',
+                type: 'pie',
+                radius: '80%',
+                data: [
+                  
+                ],
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+                }
+              }
+            ]
+          },
+          
+          communityOption : {
+            color: ['#5470C6', '#91CC75'],
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'cross'
+              }
+            },
+            grid: {
+              right: '20%'
+            },
+            toolbox: {
+              feature: {
+                dataView: { show: true, readOnly: false },
+                restore: { show: true },
+                saveAsImage: { show: true }
+              }
+            },
+            legend: {
+              data: ['数量', '占比']
+            },
+            xAxis: [
+              {
+                type: 'category',
+                axisTick: {
+                  alignWithLabel: true
+                },
+                data: [],
+              }
+            ],
+            yAxis: [
+              {
+                type: 'value',
+                name: '占比',
+                position: 'right',
+                alignTicks: true,
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#91CC75'
+                  }
+                },
+                axisLabel: {
+                  formatter: '{value} %'
+                }
+              },
+              {
+                type: 'value',
+                name: '数量',
+                position: 'left',
+                alignTicks: true,
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#5470C6'
+                  }
+                },
+                axisLabel: {
+                  formatter: '{value} 件'
+                }
+              }
+            ],
+            series: [
+              {
+                name: '数量',
+                type: 'bar',
+                barWidth: 36, // 设置柱子宽度
+                data: [
+
+                ]
+              },
+              {
+                name: '占比',
+                type: 'line',
+                yAxisIndex: 1,
+                data: [
+
+                ]
+              }
+            ]
+          },
+
+          departOption : {
+            color: ['#5470C6', '#91CC75'],
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'cross'
+              }
+            },
+            grid: {
+              right: '20%'
+            },
+            toolbox: {
+              feature: {
+                dataView: { show: true, readOnly: false },
+                restore: { show: true },
+                saveAsImage: { show: true }
+              }
+            },
+            legend: {
+              data: ['数量', '占比']
+            },
+            xAxis: [
+              {
+                type: 'category',
+                axisTick: {
+                  alignWithLabel: true
+                },
+                data: [],
+              }
+            ],
+            yAxis: [
+              {
+                type: 'value',
+                name: '占比',
+                position: 'right',
+                alignTicks: true,
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#5470C6'
+                  }
+                },
+                axisLabel: {
+                  formatter: '{value} %'
+                }
+              },
+              {
+                type: 'value',
+                name: '数量',
+                position: 'left',
+                alignTicks: true,
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#00264D'
+                  }
+                },
+                axisLabel: {
+                  formatter: '{value} 件'
+                }
+              }
+            ],
+            series: [
+              {
+                name: '数量',
+                type: 'bar',
+                barWidth: 36, // 设置柱子宽度
+                itemStyle: {
+                    normal: {
+                        // 定制显示（按顺序）
+                        color: function(params) { 
+                            var colorList = ['#00BFFF', '#800080', '#008080', '#FF8C00', '#FF3333', '#6600CC', '#00FF00', '#4682B4', '#282828', '#FF4500']; 
+                            return colorList[params.dataIndex] 
+                        }
+                    },
+                },
+                data: [
+
+                ]
+              },
+              {
+                name: '占比',
+                type: 'line',
+                yAxisIndex: 1,
+                data: [
+
+                ]
+              }
+            ]
+          },
+
+          hotlineChartOption: {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['工单数量'],
+                    bottom: '10%',
+                    icon: 'rect',
+                    itemWidth: 20,
+                    itemHeight: 5,
+                    itemGap: 20,
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '25%',
+                    containLabel: true
+                },
+                toolbox: {},
+
+
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: true,
+                    data: [],
+                },
+                yAxis: {
+                    type: 'value',
+                    name: '单位(个)',
+                    min: 0,
+                },
+                series: [
+                    {
+                        name: '工单数量',
+                        type: 'bar',
+                        data: [],
+                        barWidth: 36, // 设置柱子宽度
+                        barCategoryGap: 0, // 设置柱子间的间隔为0
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    { offset: 0, color: '#2c7cf2' }, // 从顶部开始
+                                    { offset: 1, color: '#80b3ff' } // 到底部结束
+                                ]
+                            )
+                        },
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: '#fafbfc',
+                            opacity: "0.5"
+                        }
+                    },
+                ]
+            },
+    };
+  },
+
+  computed: {
+      maxTableHeight() {
+          const h = this.clientHeight - this.searchH - 330 + this.iframeHeight;
+          const _h = this.clientHeight - 330 - this.searchH;
+          return this.$store.state.inIframe ? h : _h;
+      },
+      ...mapGetters(["clientHeight", "iframeHeight"]),
+  },
+  watch: {},
+  async mounted() {
+      this.user = this.$store.state.user;
+      this.agencyId = this.user.agencyId;
+      await this.getTableData();
+      await this.initEcharts();
+  },
+  methods: {
+      initEcharts() {
+          this.categoryChart = echarts.init(document.getElementById("categoryChart"));
+          this.categoryChart.setOption(this.categoryChartOption);
+          let than = this;
+          this.categoryChart.on("click", function (params) {
+              than.handelClickChart(params.name);
+          });
+
+          this.categoryPie= echarts.init(document.getElementById("categoryPie"));
+          this.categoryPie.setOption(this.categoryPieOption);
+          this.categoryPie.on("click", function (params) {
+              than.handelClickChart(params.name);
+          });
+
+          this.communityChart= echarts.init(document.getElementById("communityChart"));
+          this.communityChart.setOption(this.communityOption);
+          this.communityChart.on("click", function (params) {
+              than.handelClickChart(params.name);
+          });
+
+
+          this.departChart= echarts.init(document.getElementById("departChart"));
+          this.departChart.setOption(this.departOption);
+          this.departChart.on("click", function (params) {
+              than.handelClickChart(params.name);
+          });
+
+          this.hotlineChart= echarts.init(document.getElementById("hotlineChart"));
+          this.hotlineChart.setOption(this.hotlineChartOption);
+          this.hotlineChart.on("click", function (params) {
+              than.handelClickChart(params.name);
+          });
+
+
+          window.addEventListener("resize", this.handleWindowResize);
+
+          console.log("图表加载")
+      },
+      handleWindowResize() {
+          if (this.categoryChart) {
+              this.categoryChart.resize();
+          }
+          if (this.categoryPie) {
+              this.categoryPie.resize();
+          }
+      },
+      handelClickChart(name) {
+          this.showFormList = true;
+          this.satisfactionCategoryStr = this.dicts.satisfaction_category.filter(
+              (item) => item.label == name
+          )[0].value;
+      },
+      handleClose() {
+          this.showFormList = false;
+      },
+      // 搜索事件
+      handleSearch(val) {
+          console.log(this.formData);
+      },
+
+      //   重置
+      exportReport() {
+          this.formData = {};
+      },
+
+      //   获取分类
+      async getTableData() {
+
+            const url = '/governance/dwdEvent/report';
+            const {formData } = this;
+            const { data, code, msg } = await requestPost(url, {
+              ...formData
+            });
+            if (code != 0) {
+              this.$message.error(msg);
+              return;
+            } 
+            if (!data) {
+                return;
+            }
+
+            this.report = data;
+            console.log(this.report)
+
+            this.tableLoading = true;
+
+            //获取分类
+            Object.keys(this.report.categoryCount).forEach((key) => {
+              const value = this.report.categoryCount[key];
+
+              this.categoryChartOption.series[0].data.push(value);
+              this.categoryChartOption.xAxis.data.push(key);
+
+              const jsonObject = {
+                  address: key,
+                  amount: key,
+                  content:key
+              };
+              this.categoryPieOption.series[0].data.push(jsonObject);
+
+            });
+
+            // 获取社区
+            Object.keys(this.report.communityCount).forEach((key) => {
+              const value = this.report.communityCount[key];
+
+              this.communityOption.xAxis[0].data.push(key);
+              this.communityOption.series[0].data.push(value/this.report.totalEvent*100);
+              this.communityOption.series[1].data.push(value);
+
+            });
+
+            // 获取科室
+            Object.keys(this.report.departCount).forEach((key) => {
+              const value = this.report.departCount[key];
+
+              this.departOption.xAxis[0].data.push(key);
+              this.departOption.series[0].data.push(value/this.report.totalEvent*100);
+              this.departOption.series[1].data.push(value);
+
+            });
+
+
+            // 获取热点诉求及区域分析
+            Object.keys(this.report.subCategoryCount).forEach((key) => {
+              const value = this.report.subCategoryCount[key];
+
+              this.hotlineChartOption.xAxis.data.push(key);
+              this.hotlineChartOption.series[0].data.push(value);
+            });
+        },
+  },
+
+  props: {},
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/scss/buttonstyle.scss";
+@import "@/assets/scss/modules/management/list-main.scss";
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+
+.div_btn_left>* {
+  margin-right: 10px;
+}
+
+.m-table-item {
+  display: flex;
+  flex-direction: column;
+}
+
+
+#categoryChart {
+    width: 100%;
+    flex: 1;
+}
+
+#categoryPie {
+    width: 100%;
+    flex: 1;
+}
+
+#communityChart {
+    width: 100%;
+    flex: 1;
+}
+
+#departChart {
+    width: 100%;
+    flex: 1;
+}
+
+#hotlineChart {
+    width: 100%;
+    flex: 1;
+}
+
+.centered-title {
+  text-align: center; /* 将文本水平居中对齐 */
+  font-size: 28px; /* 设置标题字体大小 */
+  font-weight: bold; /* 设置标题加粗 */
+  color: #333; /* 设置标题颜色 */
+  margin-bottom: 20px; /* 设置标题与下方内容的间距 */
+}
+
+</style>
+  
+  
\ No newline at end of file