
<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-dd" placeholder="开始时间"
                          style="width: 202px" clearable>
                      </el-date-picker>
                           至  
                      <el-date-picker v-model="formData.queryDateEnd" type="date" value-format="yyyy-MM-dd" 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>{{ report.streetName }}{{ report.period }}</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%">
              <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%">
              <el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
              <el-table-column prop="mobile" 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="addressMobileData" border class="m-table-item" style="width: 100%" >
              <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="mobile" 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>
              <h1 style="font-size: 24px; font-weight: bold;"> 四、工作改进举措 </h1>
              <h2 style="font-size: 20px; font-weight: bold;"> 一是机制要“优”</h2>
              <h2 style="font-size: 20px; font-weight: bold;"> 二是质量要“高”</h2>
              <h2 style="font-size: 20px; font-weight: bold;"> 三是分流要“准”</h2>
              <h2 style="font-size: 20px; font-weight: bold;"> 四是流程要“亚”</h2>
              <h2 style="font-size: 20px; font-weight: bold;"> 五是沟通要“多</h2>
              <h2 style="font-size: 20px; font-weight: bold;"> 六是模板要“精"</h2>
            </div>
          </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:{
            streetName:"",
            overallOperation:"",
            geoStatis:"",
            departHotline:"",
            hotDemand:"",
          },

          addressData:[],
          mobileData:[],
          addressMobileData:[],

          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;
      },
      // 搜索事件
      async handleSearch(val) {
          console.log(this.formData);
          // 清空数据
          this.cleanReportData();
          await this.getTableData();
          await this.initEcharts();
      },

      cleanReportData(){
          console.log("刷新数据");
          this.report={}
          this.addressData=[]
          this.mobileData=[]
          this.addressMobileData=[]

          this.categoryChartOption.series[0].data=[];
          this.categoryChartOption.xAxis.data=[];

          this.categoryPieOption.series[0].data=[];

          this.communityOption.xAxis[0].data=[];
          this.communityOption.series[0].data=[];
          this.communityOption.series[1].data=[];

          this.departOption.xAxis[0].data=[];
          this.departOption.series[0].data=[];
          this.departOption.series[1].data=[];

          this.hotlineChartOption.xAxis.data=[];
          this.hotlineChartOption.series[0].data=[];
      },

      //   重置
      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 = {
                  name: key,
                  value: value
              };
              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);
            });

            this.addressData = this.report.addressEvent
              ? this.report.addressEvent.map(item => {
                  return item;
                })
              : [];

              this.mobileData = this.report.mobileEvent
              ? this.report.mobileEvent.map(item => {
                  return item;
                })
              : [];

              this.addressMobileData = this.report.addressMobileEvents
              ? this.report.addressMobileEvents.map(item => {
                  return item;
                })
              : [];
        },
  },

  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>
  
  