12345报告分析二级页面调整

src/views/modules/goverhotline/followDetail.vue

@@ -0,0 +1,142 @@
+
+<template>
+    <div class='g-main dialog-h-content'>
+        <el-row type="flex" justify="" class="f-top24">
+            <el-col :span="24" class="f-flex f-align_item"><span class="label">街道：</span>
+                <div class="f-flex1">{{detailObj.streetName || '--'}}</div>
+            </el-col>
+        </el-row>
+        <el-row type="flex" justify="" class="f-top24">
+            <el-col :span="24" class="f-flex f-align_item"><span class="label">社区：</span>
+                <div class="f-flex1">{{detailObj.communityName || '--'}}</div>
+            </el-col>
+        </el-row>
+        <el-row type="flex" justify="" class="f-top24">
+            <el-col :span="24" class="f-flex f-align_item"><span class="label">姓名：</span>
+                <div class="f-flex1">{{detailObj.name || '--'}}</div>
+            </el-col>
+        </el-row>
+        <el-row type="flex" justify="" class="f-top24">
+            <el-col :span="24" class="f-flex f-align_item"><span class="label">回访电话：</span>
+                <div class="f-flex1">{{detailObj.mobile || '--'}}</div>
+            </el-col>
+        </el-row>
+        <el-row type="flex" justify="" class="f-top24">
+            <el-col :span="24" class="f-flex f-align_item"><span class="label">领域：</span>
+                <div class="f-flex1">{{detailObj.scopeName || '--'}}</div>
+            </el-col>
+        </el-row>
+        <el-row type="flex" justify="" class="f-top24">
+            <el-col :span="24" class="f-flex f-align_item"><span class="label">问题：</span>
+                <div class="f-flex1">{{detailObj.problemDesc || '--'}}</div>
+            </el-col>
+        </el-row>
+        <el-row type="flex" justify="" class="f-top24">
+            <el-col :span="24" class="f-flex f-align_item"><span class="label">是否完成：</span>
+                <div class="f-flex1">
+                   <el-radio v-model="formData.completeFlag" :label="0" :disabled="disabled" >正在推进</el-radio>
+                   <el-radio v-model="formData.completeFlag" :label="1" :disabled="disabled" >已完成</el-radio>
+                   <el-radio v-model="formData.completeFlag" :label="2" :disabled="disabled" >已完成并取消风险标记</el-radio>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row type="flex" justify="" class="f-top24">
+            <el-col :span="24" class="f-flex f-align_item"><span class="label">组织类型：</span>
+                <div class="f-flex1">
+                   <el-radio v-model="formData.orgCategoryCode" label="province" :disabled="disabled">省</el-radio>
+                   <el-radio v-model="formData.orgCategoryCode" label="city" :disabled="disabled">市</el-radio>
+                   <el-radio v-model="formData.orgCategoryCode" label="district" :disabled="disabled">区</el-radio>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row type="flex" justify="" class="f-top24">
+            <el-col :span="24" class="f-flex f-align_item"><span class="label">完成时限：</span>
+                <div class="f-flex1">
+                    <el-date-picker v-model="formData.completeTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
+                            style="width: 202px" clearable :disabled="disabled">
+                        </el-date-picker>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row type="flex" justify="" class="f-top24">
+            <el-col :span="24" class="f-flex f-align_item"><span class="label">备注：</span>
+                <div class="f-flex1" >
+                    <el-input
+                      type="textarea"
+                      :rows="3"
+                      style="width: 300px;"
+                      placeholder="请输入内容"
+                      v-model="formData.remark"
+                      :disabled="disabled"
+                      >
+                    </el-input> 
+                </div>
+            </el-col>
+        </el-row>
+        <div class="div_btn f-flex" style="justify-content: end;">
+            <el-button size="small" @click="handleCancle">取 消</el-button>
+            <el-button
+                size="small"
+                type="primary"
+                @click="handleComfirm"
+                >提 交</el-button
+            >
+    </div>
+    </div>
+</template>
+   
+<script>
+export default {
+    data() {
+        return {
+            evaCulturalFacility: 'bad',
+            formData:{
+                completeTime:'',
+                remark:'',
+                orgCategoryCode:'',
+                completeFlag:""
+            },
+            disabled:false
+        };
+    },
+    props: {
+        detailObj: {
+            type: Object,
+            default: () => {}
+        },
+        formType:{
+            type:String,
+            default:''
+        }
+    },
+    created() { 
+        this.formData = {...this.detailObj}
+        this.disabled = this.formType == 'detail' ? true : false
+    },
+    methods: {
+        handleCancle(){
+            this.$emit('handleCancle')
+        },
+        handleComfirm(){
+            this.$emit('handleComfirm',this.formData)
+        }
+    },
+    components: {},
+    computed: {},
+    watch: {},
+}
+</script>
+   
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/management/list-main.scss";
+@import "@/assets/scss/modules/management/form-main.scss";
+h3 {
+    text-align: center;
+}
+
+.label {
+    width: 100px;
+    margin-right: 10px;
+    text-align: right;
+}</style>
+   

src/views/modules/goverhotline/formList.vue

@@ -0,0 +1,143 @@
+<template>
+    <div style="margin-top:10px">
+        <el-table class="m-table-item" :data="tableData" style="width: 100%" border>
+            <el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column>
+            <el-table-column label="所属网格" prop="gridName" header-align="center" align="center" show-overflow-tooltip
+                width="150"></el-table-column>
+            <el-table-column label="接收时间" prop="happenTime" header-align="center" align="center" show-overflow-tooltip
+                width="150"></el-table-column>
+            <el-table-column label="问题描述" prop="eventContent" header-align="center" align="center" :show-overflow-tooltip="true"  width="200"></el-table-column>
+            <el-table-column prop="voiceList" align="center" width="80" label="语音">
+                        <template slot-scope="scope">
+                            <img @click="handleShowVoice(scope.row.voiceList[0].url)" class="img-voice"
+                                v-if="scope.row.voiceList && scope.row.voiceList.length > 0"
+                                src="@/assets/img/icon-voice.png" />
+                            <span v-else></span>
+                        </template>
+                    </el-table-column>
+            <el-table-column label="办结时限" prop="timeLimit" header-align="center" align="center" width="150"
+                show-overflow-tooltip></el-table-column>
+            <el-table-column label="联系人" prop="name" header-align="center" align="center" show-overflow-tooltip
+                width="100"></el-table-column>
+            <el-table-column label="联系电话" prop="mobile" header-align="center" align="center" show-overflow-tooltip
+            width="100"></el-table-column>
+            <el-table-column prop="status" align="center" label="状态" width="80" :show-overflow-tooltip="true">
+                        <template slot-scope="scope">
+                            <span v-if="scope.row.status === 'processing'">处理中</span>
+                            <span v-else-if="scope.row.status === 'closed_case'">已完成</span>
+                            <span v-else>--</span>
+                        </template>
+                    </el-table-column>
+            <el-table-column label="操作" align="center" width="100">
+                <template slot-scope="scope">
+                    <el-button @click="handelClickDetail(scope.row)" type="text" size="small">查看</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div>
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
+                :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total"
+                :total="total"></el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+import { requestPost, requestGet } from "@/js/dai/request";
+import { completeList } from "@/js/columns/constants";
+export default {
+    //数据
+    data() {
+        return {
+            formData: {
+                gridId: "",
+                sourceType: "",
+                eventContent: "",
+                name: "",
+                mobile: "",
+                startTime: "",
+                endTime: "",
+                limitStartTime: "",
+                limitEndTime: "",
+                status: "",
+                firstIdList: [],
+                secondIdList: [],
+                workOrderNum: "",
+                departId:""
+            },
+            pageNo: 0,
+            pageSize: 20,
+            total: 0,
+            tableData: [],
+        };
+    },
+    //创建前
+    created() { },
+    async mounted() {
+        await this.getTableData()
+    },
+    //方法
+    methods: {
+
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+            this.pageSize = val;
+            this.getTableData();
+        },
+        handelClickDetail(row) {
+            this.$emit('handelClickDetail', row);
+        },
+        handlClickEdit(row){
+            this.$emit('handelClickEdit', row);
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+            this.pageNo = val;
+            this.getTableData();
+        },
+        async getTableData() {
+            try {
+                const url = "/governance/dwdEvent/list";
+                if(this.recId){
+                    this.formData.secondIdList = [this.recId];
+                }
+
+                if(this.departId){
+                    this.formData.departId = this.departId;
+                }
+
+                const { pageSize, pageNo, formData } = this;
+                const { data, code, msg } = await requestPost(url, {
+                    pageSize,
+                    pageNo,
+                    ...formData,
+                });
+                if (code == 0) {
+                    this.tableData = data.list;
+                    this.total = data.total;
+                } else {
+                    console.log(err);
+                }
+            } catch (err) {
+                console.log(err);
+            }
+        },
+    },
+    //子组件注册
+    components: {},
+    //计算
+    computed: {},
+    props: {
+        recId:{
+            type:String,
+            default:''
+        },
+        departId:{
+            type:String,
+            default:''
+        }
+    },
+    //监听
+    watch: {},
+}
+</script>
+<style lang="scss"></style>

src/views/modules/goverhotline/index.vue

@@ -71,7 +71,7 @@
                 </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 id="departChart"></div>
                 </div>
               </div>
               <div v-else class="no-data">
@@ -102,7 +102,7 @@
               <h2 style="font-size: 20px; font-weight: bold;"> (一）同地点同类型事件重复投诉 </h2>
             </div>
 
-            <el-table :data="addressData" border class="m-table-item" style="width: 100%">
+            <el-table :data="addressData" border class="m-table-item" style="width: 100%" @row-click="clickAddressData">
               <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>
@@ -137,6 +137,38 @@
          
       </div>
     
+      <el-dialog
+        v-if="showFormList"
+        :visible.sync="showFormList"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="12345问题列表"
+        :modal-append-to-body="false"
+        width="60%"
+        top="5vh"
+        class="dialog-h"
+        @closed="showFormList = false"
+      >
+        <form-list
+          ref="ref_form_list"
+          @handleClose="handleClose"
+          :recId="recId"
+          :departId="departId"
+          @handelClickDetail="handelClickDetail"
+        ></form-list>
+        <el-dialog
+          width="60%"
+          class="dialog-h"
+          title="12345事件详情"
+          :close-on-click-modal="false"
+          v-if="showFormDetail"
+          :visible.sync="showFormDetail"
+          append-to-body
+        >
+        <event-info ref="eleEditForm" :pageType="pageType" :eventId="eventId" :eventDetailData="eventDetailData"
+              @handleClose="handleClose" @handleOk="handleOk" @dialogOk="handleEditSuccess" />
+      </el-dialog>
+    </el-dialog>
      
   </div>
 </template>
@@ -147,8 +179,13 @@ import { mapGetters } from "vuex";
 import axios from "axios";
 import * as echarts from "echarts";
 
+import formList from "./formList";
+import util from "@js/util.js";
+import followDetail from "./followDetail";
+import eventInfo from "../shequzhili/event/cpts/event-info";
+
 export default {
-  components: {},
+  components: {formList, followDetail,eventInfo},
 
   data() {
       return {
@@ -182,7 +219,17 @@ export default {
           communityCountShow:false,
           departCountShow:false,
           subCategoryCountShow:false,
-         
+
+          showFormList: false,
+          showFormDetail: false,
+
+          recId: "",
+          departId:"",
+
+          eventId: "",
+          eventDetailData: {},
+          pageType: "info", 
+
 
 
           categoryChartOption: {
@@ -205,7 +252,6 @@ export default {
                 },
                 toolbox: {},
 
-
                 xAxis: {
                     type: 'category',
                     boundaryGap: true,
@@ -522,37 +568,40 @@ export default {
             this.categoryChart.setOption(this.categoryChartOption);
             let than = this;
             this.categoryChart.on("click", function (params) {
-                than.handelClickChart(params.name);
+              than.handelClickChart(params);
             });
 
             this.categoryPie= echarts.init(document.getElementById("categoryPie"));
             this.categoryPie.setOption(this.categoryPieOption);
             this.categoryPie.on("click", function (params) {
-                than.handelClickChart(params.name);
+              than.handelClickChart(params);
             });
           }
 
           if(this.communityCountShow){
             this.communityChart= echarts.init(document.getElementById("communityChart"));
             this.communityChart.setOption(this.communityOption);
+            let than = this;
             this.communityChart.on("click", function (params) {
-                than.handelClickChart(params.name);
+              than.handelClickChart(params);
             });
           }
           
           if(this.departCountShow){
             this.departChart= echarts.init(document.getElementById("departChart"));
             this.departChart.setOption(this.departOption);
+            let than = this;
             this.departChart.on("click", function (params) {
-                than.handelClickChart(params.name);
+              than.handelClickDepartChart(params);
           });
           }
 
           if(this.subCategoryCountShow){
             this.hotlineChart= echarts.init(document.getElementById("hotlineChart"));
             this.hotlineChart.setOption(this.hotlineChartOption);
+            let than = this;
             this.hotlineChart.on("click", function (params) {
-                than.handelClickChart(params.name);
+                than.handelClickChart(params);
             });
           }
 
@@ -568,15 +617,54 @@ export default {
               this.categoryPie.resize();
           }
       },
-      handelClickChart(name) {
+      handelClickChart(params) {
+          this.showFormList = true;
+          this.departId ='';
+          this.recId = params.data.id;
+      },
+      handelClickDepartChart(params) {
           this.showFormList = true;
-          this.satisfactionCategoryStr = this.dicts.satisfaction_category.filter(
+          this.recId ='';
-              (item) => item.label == name
+          this.departId = params.data.id;
-          )[0].value;
       },
       handleClose() {
           this.showFormList = false;
       },
+
+      async handelClickDetail(row) {
+          this.eventId = row.icEventId;
+            const url = "/governance/icEvent/detail";
+            const { data, code, msg } = await requestPost(url, {
+                icEventId: this.eventId,
+            });
+            if (code != 0) {
+                this.$message.error(msg);
+            } else {
+                this.eventDetailData = { ...data };
+                this.pageType = "info";
+                this.showFormDetail = true;
+            }
+      },
+
+      handleClose() {
+            this.showFormDetail = false;
+            this.pageType = "list";
+            this.eventId = "";
+            this.getTableData();
+        },
+        handleOk() {
+          this.showFormDetail = false;
+            this.pageType = "list";
+            this.eventId = "";
+            this.pageNo = 1;
+            this.getTableData();
+        },
+
+        handleEditSuccess() {
+            this.handleClose();
+            this.getTableData();
+        },
+        
       // 搜索事件
       async handleSearch(val) {
           console.log(this.formData);
@@ -632,20 +720,28 @@ export default {
             }
 
             this.report = data;
-            console.log(this.report)
 
             this.tableLoading = true;
 
             //获取分类
             Object.keys(this.report.categoryCount).forEach((key) => {
-              const value = this.report.categoryCount[key];
+              const category = this.report.categoryCount[key];
+
+              // this.categoryChartOption.series[0].data.push(category.count);
+              this.categoryChartOption.xAxis.data.push(category.name);
+
+              const recObject = {
+                  id: category.id,
+                  value: category.count
+              };
+              this.categoryChartOption.series[0].data.push(recObject);
+
 
-              this.categoryChartOption.series[0].data.push(value);
-              this.categoryChartOption.xAxis.data.push(key);
 
               const jsonObject = {
-                  name: key,
+                  id: category.id,
-                  value: value
+                  name: category.name,
+                  value: category.count
               };
               this.categoryPieOption.series[0].data.push(jsonObject);
 
@@ -653,31 +749,46 @@ export default {
 
             // 获取社区
             Object.keys(this.report.communityCount).forEach((key) => {
-              const value = this.report.communityCount[key];
+              const community = this.report.communityCount[key];
 
-              this.communityOption.xAxis[0].data.push(key);
+              this.communityOption.xAxis[0].data.push(community.name);
-              this.communityOption.series[0].data.push(value/this.report.totalEvent*100);
+              const recObject = {
-              this.communityOption.series[1].data.push(value);
+                  id: community.id,
+                  value: community.count/this.report.totalEvent*100
+              };
+              this.communityOption.series[0].data.push(recObject);
+
+            
+              this.communityOption.series[1].data.push(community.count);
 
             });
 
             // 获取科室
             Object.keys(this.report.departCount).forEach((key) => {
-              const value = this.report.departCount[key];
+              const depart = this.report.departCount[key];
 
-              this.departOption.xAxis[0].data.push(key);
+              this.departOption.xAxis[0].data.push(depart.name);
-              this.departOption.series[0].data.push(value/this.report.totalEvent*100);
+              const recObject = {
-              this.departOption.series[1].data.push(value);
+                  id: depart.id,
+                  value: depart.count/this.report.totalEvent*100
+              };
+              this.departOption.series[0].data.push(recObject);
 
-            });
+              
+              this.departOption.series[1].data.push(depart.count);
 
+            });
 
             // 获取热点诉求及区域分析
             Object.keys(this.report.subCategoryCount).forEach((key) => {
-              const value = this.report.subCategoryCount[key];
+              const subcategory = this.report.subCategoryCount[key];
+              this.hotlineChartOption.xAxis.data.push(subcategory.name);
 
-              this.hotlineChartOption.xAxis.data.push(key);
+              const recObject = {
-              this.hotlineChartOption.series[0].data.push(value);
+                  id: subcategory.id,
+                  value: subcategory.count
+              };
+              this.hotlineChartOption.series[0].data.push(recObject);
             });
 
             this.addressData = this.report.addressEvent
@@ -698,12 +809,11 @@ export default {
                 })
               : [];
 
-
+              if (this.report && this.report.categoryCount && Object.keys(this.report.categoryCount).length > 0) {
-              if (this.report && this.report. categoryCount && Object.keys(this.report. categoryCount).length > 0) {
                 this.categoryCountShow = true;
               }
 
-              if (this.report && this.report. communityCount && Object.keys(this.report. communityCount).length > 0) {
+              if (this.report && this.report.communityCount && Object.keys(this.report.communityCount).length > 0) {
                 this.communityCountShow = true;
               }
               
@@ -715,6 +825,11 @@ export default {
                 this.subCategoryCountShow = true;
               }
         },
+
+        clickAddressData(row, column){
+         console.log("============clickAddressData============"); 
+         console.log(row);
+        }
   },
 
   props: {},