From 758915c2b5094a4445e4f16664f1698ddac63312 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Thu, 7 Sep 2023 09:02:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E6=BB=A1=E6=84=8F=E5=BA=A6?=
 =?UTF-8?q?=E8=87=AA=E6=9F=A5=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 .../{jcjy.png => basicEducation.png}          | Bin
 .../{whss.png => culturalFacility.png}        | Bin
 .../{sthj.png => ecologicalEnv.png}           | Bin
 .../satisfaction/{bysy.png => medical.png}    | Bin
 .../{lysy.png => oldPeopleProvide.png}        | Bin
 .../{shjz.png => socialAssistance.png}        | Bin
 .../{shza.png => socialSecurity.png}          | Bin
 .../{tyss.png => sportsFacility.png}          | Bin
 .../communitySelfInsp/formList.vue            | 165 ++++
 .../satisfaction/communitySelfInsp/index.vue  | 850 +++++++++---------
 11 files changed, 577 insertions(+), 440 deletions(-)
 rename src/assets/img/satisfaction/{jcjy.png => basicEducation.png} (100%)
 rename src/assets/img/satisfaction/{whss.png => culturalFacility.png} (100%)
 rename src/assets/img/satisfaction/{sthj.png => ecologicalEnv.png} (100%)
 rename src/assets/img/satisfaction/{bysy.png => medical.png} (100%)
 rename src/assets/img/satisfaction/{lysy.png => oldPeopleProvide.png} (100%)
 rename src/assets/img/satisfaction/{shjz.png => socialAssistance.png} (100%)
 rename src/assets/img/satisfaction/{shza.png => socialSecurity.png} (100%)
 rename src/assets/img/satisfaction/{tyss.png => sportsFacility.png} (100%)
 create mode 100644 src/views/modules/satisfaction/communitySelfInsp/formList.vue

diff --git a/.env.development b/.env.development
index 65bdf2296..03346099c 100644
--- a/.env.development
+++ b/.env.development
@@ -1,7 +1,7 @@
 NODE_ENV=development
 
 VUE_APP_API_SERVER =  http://192.168.1.144/api
-# VUE_APP_API_SERVER =  http://118.190.150.119:41080/api
+# VUE_APP_API_SERVER =  http://219.146.91.110:30801/api
 # VUE_APP_API_SERVER =  https://epmet-yantai.elinkservice.cn/api
 # VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
 # VUE_APP_API_SERVER =   https://epmet-cloud.elinkservice.cn/api
diff --git a/src/assets/img/satisfaction/jcjy.png b/src/assets/img/satisfaction/basicEducation.png
similarity index 100%
rename from src/assets/img/satisfaction/jcjy.png
rename to src/assets/img/satisfaction/basicEducation.png
diff --git a/src/assets/img/satisfaction/whss.png b/src/assets/img/satisfaction/culturalFacility.png
similarity index 100%
rename from src/assets/img/satisfaction/whss.png
rename to src/assets/img/satisfaction/culturalFacility.png
diff --git a/src/assets/img/satisfaction/sthj.png b/src/assets/img/satisfaction/ecologicalEnv.png
similarity index 100%
rename from src/assets/img/satisfaction/sthj.png
rename to src/assets/img/satisfaction/ecologicalEnv.png
diff --git a/src/assets/img/satisfaction/bysy.png b/src/assets/img/satisfaction/medical.png
similarity index 100%
rename from src/assets/img/satisfaction/bysy.png
rename to src/assets/img/satisfaction/medical.png
diff --git a/src/assets/img/satisfaction/lysy.png b/src/assets/img/satisfaction/oldPeopleProvide.png
similarity index 100%
rename from src/assets/img/satisfaction/lysy.png
rename to src/assets/img/satisfaction/oldPeopleProvide.png
diff --git a/src/assets/img/satisfaction/shjz.png b/src/assets/img/satisfaction/socialAssistance.png
similarity index 100%
rename from src/assets/img/satisfaction/shjz.png
rename to src/assets/img/satisfaction/socialAssistance.png
diff --git a/src/assets/img/satisfaction/shza.png b/src/assets/img/satisfaction/socialSecurity.png
similarity index 100%
rename from src/assets/img/satisfaction/shza.png
rename to src/assets/img/satisfaction/socialSecurity.png
diff --git a/src/assets/img/satisfaction/tyss.png b/src/assets/img/satisfaction/sportsFacility.png
similarity index 100%
rename from src/assets/img/satisfaction/tyss.png
rename to src/assets/img/satisfaction/sportsFacility.png
diff --git a/src/views/modules/satisfaction/communitySelfInsp/formList.vue b/src/views/modules/satisfaction/communitySelfInsp/formList.vue
new file mode 100644
index 000000000..639f7cea8
--- /dev/null
+++ b/src/views/modules/satisfaction/communitySelfInsp/formList.vue
@@ -0,0 +1,165 @@
+<template>
+    <div style="margin-top:10px">
+        <el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'">
+            <el-form-item label="不满意类目" prop="startTime">
+                <el-select v-model="formData.satisfactionCategory" placeholder="请输入" size="small"
+                    class="u-item-width-normal" clearable>
+                    <el-option v-for="item in dicts.satisfaction_category" :key="item.value" :label="item.label"
+                        :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="不满意等级" prop="startTime">
+                <el-select v-model="formData.satisfactionLevel" placeholder="请输入" size="small" class="u-item-width-normal"
+                    clearable>
+                    <el-option v-for="item in dicts.satisfaction_level" :key="item.value" :label="item.label"
+                        :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+
+        <el-table class="m-table-item" :data="tableData" style="width: 100%">
+            <el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column>
+            <el-table-column label="填写时间" prop="createdTime" header-align="center" align="center" type="index"
+                width="100"></el-table-column>
+            <el-table-column label="姓名" prop="reporterName" header-align="center" align="center" type="index"
+                width="50"></el-table-column>
+            <el-table-column label="联系电话" prop="reporterMobile" header-align="center" align="center" type="index"
+                width="80"></el-table-column>
+            <el-table-column label="回访方式" prop="followUpWay" header-align="center" align="center" type="index"
+                width="100"></el-table-column>
+            <el-table-column label="文化设施" prop="evaCulturalFacility" header-align="center" align="center" type="index"
+                width="80"></el-table-column>
+            <el-table-column label="体育设施" prop="evaSportsFacility" header-align="center" align="center" type="index"
+                width="80"></el-table-column>
+            <el-table-column label="生态环境" prop="evaEcologicalEnv" header-align="center" align="center" type="index"
+                width="80"></el-table-column>
+            <el-table-column label="社会治安" prop="evaSocialSecurity" header-align="center" align="center" type="index"
+                width="80"></el-table-column>
+            <el-table-column label="社会救助" prop="evaSocialAssistance" header-align="center" align="center" type="index"
+                width="80"></el-table-column>
+            <el-table-column label="老有所养" prop="evaOldPeopleProvid" header-align="center" align="center" type="index"
+                width="80"></el-table-column>
+            <el-table-column label="基础教育" prop="evaBasicEducation" header-align="center" align="center" type="index"
+                width="80"></el-table-column>
+            <el-table-column label="病有所医" prop="evaMedical" header-align="center" align="center" type="index"
+                width="80"></el-table-column>
+            <el-table-column label="回访状态" prop="followUpStatus" header-align="center" align="center" type="index"
+                width="80"></el-table-column>
+            <el-table-column fixed="right" label="操作" align="center" width="220">
+                <template slot-scope="scope">
+                    <el-button @click="handleDetail(scope.row)" type="text" size="small">查看</el-button>
+                    <el-button @click="handleEdit(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";
+
+export default {
+    //数据
+    data() {
+        return {
+            formData: {
+                inspRecordId: '',
+                satisfactionCategory: '',
+                satisfactionLevel: ''
+            },
+            pageNo: 1,
+            pageSize: 20,
+            total: 0,
+            tableData: [],
+            dicts: {
+                satisfaction_category: [],
+                satisfaction_level: []
+            }
+        };
+    },
+    //创建前
+    created() {},
+    async mounted() {
+      await  this.getDicts()
+      await this.getTableData()
+        if (this.satisfactionCategoryStr) {
+            this.formData.satisfactionCategory = this.satisfactionCategoryStr
+        }
+    },
+    //方法
+    methods: {
+        async getDicts() {
+            try {
+                const requests = [
+                    this.$http.post("sys/dict/data/dictlist", {
+                        dictType: "satisfaction_category",
+                    }),
+
+                    this.$http.post("sys/dict/data/dictlist", {
+                        dictType: "satisfaction_level",
+                    }),
+                ];
+                const dictKeys = ['satisfaction_category', 'satisfaction_level']; // 对应的键名
+                const results = await Promise.all(requests);
+                results.forEach((result, index) => {
+                    if (result.data.code === 0) {
+                        this.dicts[dictKeys[index]].push(...result.data.data);
+                    } else {
+                        console.log(`获取${dictKeys[index]}失败: ${result.data.msg}`);
+                    }
+                });
+            } catch (error) {
+                console.log("获取字典失败: ", error);
+            }
+        },
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+            this.pageSize = val;
+            this.getTableData();
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+            this.pageNo = val;
+            this.getTableData();
+        },
+        async getTableData() {
+            try {
+                let params = {
+                    ...this.formData,
+                    pageNo: this.currentPage,
+                    pageSize: this.pageSize,
+                };
+                let url = '/governance/satisfaction/communitySelfInsp/inspResult/list'
+                const { data, code, msg } = await requestGet(url, params)
+                if (code == 0) {
+                    this.tableData = data.data;
+                    this.total = data.total;
+                } else {
+                    console.log(err);
+                }
+            } catch (err) {
+                console.log(err);
+            }
+        },
+    },
+    //子组件注册
+    components: {},
+    //计算
+    computed: {},
+    props: {
+        satisfactionCategoryStr: {
+            type: String,
+            default: ' '
+        }
+    },
+    //监听
+    watch: {},
+}
+</script>
+<style lang="scss"></style>
diff --git a/src/views/modules/satisfaction/communitySelfInsp/index.vue b/src/views/modules/satisfaction/communitySelfInsp/index.vue
index f9ee0ad49..7067a8b9f 100644
--- a/src/views/modules/satisfaction/communitySelfInsp/index.vue
+++ b/src/views/modules/satisfaction/communitySelfInsp/index.vue
@@ -1,457 +1,412 @@
+
 <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-input
-                v-model="formData.name"
-                placeholder="请输入"
-                size="small"
-                class="u-item-width-normal"
-                clearable
-              ></el-input>
-            </el-form-item>
-            <div style="float: right; margin-top:5px">
-                <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="resetSearch"
-                  >重置</el-button>
-            </div>
-          </el-form>
-         
-        </div>
-  
-        <div class="m-table">
-          <div class="div_btn">
-            <el-button
-              type="primary"
-              size="small"
-              class="diy-button--white el-button--default"
-              >生成本月社区自查问卷表</el-button
-            >
-          </div>
-          <div   class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
-            <div>本月已参与调研人数 500人</div>
-            <section class="content_box">
-                <div class="left">
-                    <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
-                    <div class="left_right">
-                        <div>85.12</div>
-                        <div>综合得分</div>
+        <div>
+            <div class="m-search">
+                <el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'">
+                    <el-form-item label="自评周期">
+                        <!-- <el-input v-model="formData.name" placeholder="请输入" size="small" class="u-item-width-normal"
+                            clearable></el-input> -->
+                            <el-date-picker v-model="formData.period" type="date" value-format="yyyy-MM"
+                                placeholder="选择日期" style="width: 202px" clearable>
+                            </el-date-picker>
+                    </el-form-item>
+                    <div style="float: right; margin-top:5px">
+                        <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="resetSearch">重置</el-button>
                     </div>
+                </el-form>
+
+            </div>
+
+            <div class="m-table">
+                <div class="div_btn">
+                    <el-button type="primary" size="small"
+                        class="diy-button--white el-button--default">生成本月社区自查问卷表</el-button>
                 </div>
-                <div class="right">
-                    <div class="box">
-                        <div class="card">
-                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
-                        <div class="right_right">
-                            <div>85.12</div>
-                            <div>综合得分</div>
-                        </div>
-                         </div>
-                    </div>
-                    <div class="box">
-                        <div class="card">
-                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
-                        <div class="right_right">
-                            <div>85.12</div>
-                            <div>综合得分</div>
+                <div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
+                    <div>本月已参与调研人数 500人</div>
+                    <section class="content_box">
+                        <div class="left">
+                            <img src="../../../../assets/img/satisfaction/zhdf.png" alt="Image">
+                            <div class="left_right">
+                                <div>85.12</div>
+                                <div>综合得分</div>
+                            </div>
                         </div>
-                         </div>
-                    </div>
+                        <div class="right">
+                            <div class="box" v-for="(item, index) in score" :key="index">
+                                <div class="card">
+                                    <img :src="item.imgUrl" alt="Image">
+                                    <div class="right_right">
+                                        <div>{{ item.score }}</div>
+                                        <div>{{ item.satisfactionCategoryName }}</div>
+                                    </div>
+                                </div>
+                            </div>
 
-                    <div class="box">
-                        <div class="card">
-                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
-                        <div class="right_right">
-                            <div>85.12</div>
-                            <div>综合得分</div>
-                        </div>
-                         </div>
-                    </div>
-                    <div class="box">
-                        <div class="card">
-                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
-                        <div class="right_right">
-                            <div>85.12</div>
-                            <div>综合得分</div>
-                        </div>
-                         </div>
-                    </div>
-                    <div class="box">
-                        <div class="card">
-                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
-                        <div class="right_right">
-                            <div>85.12</div>
-                            <div>综合得分</div>
-                        </div>
-                         </div>
-                    </div>
-                    <div class="box">
-                        <div class="card">
-                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
-                        <div class="right_right">
-                            <div>85.12</div>
-                            <div>综合得分</div>
                         </div>
-                         </div>
-                    </div>
-                    <div class="box">
-                        <div class="card">
-                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
-                        <div class="right_right">
-                            <div>85.12</div>
-                            <div>综合得分</div>
-                        </div>
-                         </div>
-                    </div>
-                    <div class="box">
-                        <div class="card">
-                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
-                        <div class="right_right">
-                            <div>85.12</div>
-                            <div>综合得分</div>
-                        </div>
-                         </div>
-                    </div>
+                    </section>
+                    <div id="myCharts"></div>
+                </div>
+                <div>
+
                 </div>
-            </section>
-            <div id="myCharts" ></div>
-         </div>
-          <div>
-            <!-- <el-pagination
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-              :current-page.sync="pageNo"
-              :page-sizes="[20, 50, 100, 200]"
-              :page-size="parseInt(pageSize)"
-              layout="sizes, prev, pager, next, total"
-              :total="total"
-            >
-            </el-pagination> -->
-          </div>
+            </div>
         </div>
-      </div>
-      <!-- <el-dialog
-        v-if="showAdd"
-        :visible.sync="showAdd"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :title="addDiaTitle"
-        :modal-append-to-body="false"
-        width="720px"
-        top="5vh"
-        class="dialog-h"
-        @closed="showAdd = false"
-      >
-        <add-form
-          ref="ref_add_form"
-          @handleComfirm="handleComfirm"
-          @handleClose="handleClose"
-        ></add-form>
-      </el-dialog> -->
+        <el-dialog v-if="showFormList" :visible.sync="showFormList" :close-on-click-modal="false"
+            :close-on-press-escape="false" title="社区自查列表" :modal-append-to-body="false" width="820px" top="5vh"
+            class="dialog-h" @closed="showFormList = false">
+            <form-list ref="ref_add_form" @handleClose="handleClose"
+                :satisfactionCategoryStr="satisfactionCategoryStr"></form-list>
+        </el-dialog>
     </div>
-  </template>
+</template>
     
-      <script>
-  import { requestPost } from "@/js/dai/request";
-  import nextTick from "dai-js/tools/nextTick";
-  import { mapGetters } from "vuex";
-  import axios from "axios";
-  import * as echarts from 'echarts'
-//   import addForm from "./addForm";
-  
-  export default {
-    components: {  },
-  
-    data() {
-      return {
-        searchH: 20,
-        formData: {
-            name: "",
-            idNum: "",
-            gender: "",
-            birthdayStart: "",
-            birthdayEnd: "",
-            cultureLevel: "",
-            postType: "",
-            hireDateFrom: "",
-            hireDateEnd: ""
-        },
-      
-        multiSelection: [], // 多选结果
-        importLoading: false,
-  
-        dicts: {
-          educationList: [],
-          nationList: [],
-          public_welfare_post_type:[]
-        }, //字典对象
-
-        myChart:{},
+<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'
+import formList from "./formList";
 
-    
+export default {
+    components: { formList },
 
-        option: {
-            tooltip: {
-                trigger: 'axis'
-            },
-            legend: {
-                data: ['满意', '基本满意', '不满意'],
-                bottom: '10%',
-                icon: 'rect',
-                itemWidth: 20,
-                itemHeight: 5,
-                itemGap: 20,
-            },
-            grid: {
-                left: '3%',
-                right: '4%',
-                bottom: '25%',
-                containLabel: true
+    data() {
+        return {
+            searchH: 20,
+            showFormList: false,
+            formData: {
+                period:"",
+                inspRecordId:""
             },
-            toolbox: {},
-          
 
-            xAxis: {
-                type: 'category',
-                boundaryGap: true, 
-                data: ['文化设施', '体育设施', '生态环境', '社会治安', '社会救助', '老有所养', '基础教育','病有所医'],
-            },
-            yAxis: {
-                type: 'value',
-                scale: true,
-                name: '单位(个)',
-            },
-            series: [
-                {
-                    name: '满意',
-                    type: 'bar',
-                    data: [120, 132, 101, 134, 90, 230, 210, 210],
-                    barWidth: 16, // 设置柱子宽度
-                    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"
-                    }
+            multiSelection: [], // 多选结果
+            importLoading: false,
+
+            dicts: {
+                satisfaction_category: []
+            }, //字典对象
+
+            myChart: {},
+            option: {
+                tooltip: {
+                    trigger: 'axis'
                 },
-                {
-                    name: '基本满意',
-                    type: 'bar',
-                    data: [220, 182, 191, 234, 290, 330, 310,210],
-                    barWidth: 16,  // 设置柱子宽度
-                    barCategoryGap: 0,
-                    itemStyle: {
-                        color: new echarts.graphic.LinearGradient(
-                            0, 0, 0, 1,
-                            [
-                                {offset: 0, color: '#3ca267'}, // 从顶部开始
-                                {offset: 1, color: '#82cca0'}   // 到底部结束
-                            ]
-                        )
+                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: 16, // 设置柱子宽度
+                        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"
+                        }
                     },
-                    showBackground: true,
-                    backgroundStyle: {
+                    {
+                        name: '基本满意',
+                        type: 'bar',
+                        data: [],
+                        barWidth: 16,  // 设置柱子宽度
+                        barCategoryGap: 0,
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    { offset: 0, color: '#3ca267' }, // 从顶部开始
+                                    { offset: 1, color: '#82cca0' }   // 到底部结束
+                                ]
+                            )
+                        },
+                        showBackground: true,
+                        backgroundStyle: {
                             color: '#fafbfc',
-                            opacity:"0.5"
-                    }
-                },
-                {
-                    name: '不满意',
-                    type: 'bar',
-                    data: [150, 232, 201, 154, 190, 330, 410,210],
-                    barWidth: 16,  // 设置柱子宽度
-                    barCategoryGap: 0,
-                    itemStyle: {
-                        color: new echarts.graphic.LinearGradient(
-                            0, 0, 0, 1,
-                            [
-                                {offset: 0, color: '#edb42d'}, // 从顶部开始
-                                {offset: 1, color: '#ffd981'}   // 到底部结束
-                            ]
-                        )
+                            opacity: "0.5"
+                        }
                     },
-                    showBackground: true,
-                    backgroundStyle: {
+                    {
+                        name: '不满意',
+                        type: 'bar',
+                        data: [],
+                        barWidth: 16,  // 设置柱子宽度
+                        barCategoryGap: 0,
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    { offset: 0, color: '#edb42d' }, // 从顶部开始
+                                    { offset: 1, color: '#ffd981' }   // 到底部结束
+                                ]
+                            )
+                        },
+                        showBackground: true,
+                        backgroundStyle: {
                             color: '#fafbfc',
-                            opacity:"0.5"
+                            opacity: "0.5"
+                        }
                     }
-                }
-            ]
-}
+                ]
+            },
+            satisfactionCategoryName: [],
+            satisfactionCategory: [],
+            score: [],
 
-      };
+        };
     },
 
     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"]),
+        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 created() {
-      await this.getDicts();
-    },
-    mounted() {
-      this.user = this.$store.state.user;
-      this.agencyId = this.user.agencyId;
-      this.getTableData();
-      this.$nextTick(()=>{
-        this.initEcharts()
-      })
+    async mounted() {
+        this.user = this.$store.state.user;
+        this.agencyId = this.user.agencyId;
+        await this.getDicts();
+        await this.getTableData();
+        await this.initEcharts()
     },
     methods: {
-      // --------------------------------------字典------------------------------------------
-      async getDicts() {
-        try {
-          const requests = [
-            this.$http.post("sys/dict/data/nation", {
-              formCode: "resi_base_info",
-            }),
-            this.$http.post("sys/dict/data/education", {
-              formCode: "resi_base_info",
-            }),
-            this.$http.post("sys/dict/data/education", {
-              formCode: "public_welfare_post_type",
-            }),
-            
-          ];
-          const dictKeys = ["nationList", "educationList",'public_welfare_post_type']; // 对应的键名
-  
-          const results = await Promise.all(requests);
-          results.forEach((result, index) => {
-            if (result.data.code === 0) {
-              this.dicts[dictKeys[index]].push(...result.data.data);
-            } else {
-              console.log(`获取${dictKeys[index]}失败: ${result.data.msg}`);
+        // --------------------------------------字典------------------------------------------
+        async getDicts() {
+            try {
+                const requests = [
+                    this.$http.post("sys/dict/data/dictlist", {
+                        dictType: "satisfaction_category",
+                    }),
+
+                ];
+                const dictKeys = ['satisfaction_category']; // 对应的键名
+
+                const results = await Promise.all(requests);
+                results.forEach((result, index) => {
+                    if (result.data.code === 0) {
+                        this.dicts[dictKeys[index]].push(...result.data.data);
+                    } else {
+                        console.log(`获取${dictKeys[index]}失败: ${result.data.msg}`);
+                    }
+                });
+            } catch (error) {
+                console.log("获取字典失败: ", error);
             }
-          });
-        } catch (error) {
-          console.log("获取字典失败: ", error);
-        }
-      },
-  
-      binaryText(value){
-         let text = ''
-         text = this.binaryOptionList.filter(item=>item.value == value)[0].label
-         return text || "--"
-      },
-      // ------------------------------------事件------------------------------------------
-      checkNumberInput(){
-          if (isNaN(this.formData.retirementAmount)) {
-          this.$message.error('请输入数字');
-          this.formData.retirementAmount = '';
-          } else {
-          this.formData.retirementAmount = parseFloat(this.formData.retirementAmount);
-          }
-      },
-      initEcharts(){
-        this.myChart = echarts.init(document.getElementById('myCharts'));
-        this.myChart.setOption(this.option)
-        window.addEventListener('resize', this.handleWindowResize);
-
-      },
-      handleWindowResize () {
-      if (this.myChart) {
-        console.log(this.myChart);
-        this.myChart.resize();
-      }
-    },
-      // 搜索事件
-      handleSearch(val) {
-        console.log(this.formData);
-        this.pageNo = 1;
-        this.getTableData();
-      },
-  
-     
-      //   查看详情触发事件
-      async handleDetail(row) {
-        this.addDiaTitle = "详情";
-        this.formType = "detail";
-        this.showAdd = true;
-        this.$nextTick(() => {
-          this.$refs.ref_add_form.initForm("detail", row);
-        });
-      },
-  
-      //   获取列表
-      async getTableData() {
-        this.tableLoading = true;
-        const url = "/actual/base/resiCategorized/publicWelfarePost/page";
-  
-        const { pageSize, pageNo, formData } = this;
-        const { data, code, msg } = await requestPost(url, {
-          pageSize,
-          pageNo,
-          ...formData,
-        });
-        this.tableLoading = false;
-        if (code === 0) {
-          this.total = data.total || 0;
-          this.tableData = data.list;
-        } else {
-          this.$message.error(msg);
-        }
-      },
-   
-      //   重置
-      resetSearch() {
-        this.formData = {};
-  
-        this.pageNo = 1;
-        this.getTableData();
-      },
+        },
+
+
+        // ------------------------------------事件------------------------------------------
+        initEcharts() {
+            this.myChart = echarts.init(document.getElementById('myCharts'));
+            this.myChart.setOption(this.option)
+            let than = this
+            this.myChart.on('click', function (params) {
+                // console.log(params.name);   // 柱子对应的类目名
+                // console.log(params.data);   // 柱子的数据
+                // console.log(params.seriesName); // 对应的系列名称
+                than.handelClickChart(params.name)
+            });
+
+            window.addEventListener('resize', this.handleWindowResize);
+
+        },
+        handleWindowResize() {
+            if (this.myChart) {
+                this.myChart.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);
+            this.getTableData();
+        },
+
+        //   获取列表
+        async getTableData() {
+            this.tableLoading = true;
+            this.tableData = [
+                {
+                    satisfactionCategory: "culturalFacility",
+                    satisfactionCategoryName: "文化设施",
+                    score: "20",
+                    badQty: 40,
+                    goodQty: 20,
+                    veryGoodQty: 30
+                },
+                {
+                    satisfactionCategory: "sportsFacility",
+                    satisfactionCategoryName: "体育设施",
+                    score: "50",
+                    badQty: 40,
+                    goodQty: 20,
+                    veryGoodQty: 30
+                },
+                {
+                    satisfactionCategory: "ecologicalEnv",
+                    satisfactionCategoryName: "生态环境",
+                    score: "50",
+                    badQty: 40,
+                    goodQty: 20,
+                    veryGoodQty: 30
+                },
+                {
+                    satisfactionCategory: "socialSecurity",
+                    satisfactionCategoryName: "社会治安",
+                    score: "50",
+                    badQty: 40,
+                    goodQty: 20,
+                    veryGoodQty: 30
+                },
+                {
+                    satisfactionCategory: "socialAssistance",
+                    satisfactionCategoryName: "社会救助",
+                    score: "50",
+                    badQty: 40,
+                    goodQty: 20,
+                    veryGoodQty: 30
+                },
+                {
+                    satisfactionCategory: "oldPeopleProvide",
+                    satisfactionCategoryName: "老有所养",
+                    score: "50",
+                    badQty: 40,
+                    goodQty: 20,
+                    veryGoodQty: 30
+                },
+                {
+                    satisfactionCategory: "basicEducation",
+                    satisfactionCategoryName: "基础教育",
+                    score: "50",
+                    badQty: 40,
+                    goodQty: 20,
+                    veryGoodQty: 30
+                },
+                {
+                    satisfactionCategory: "medical",
+                    satisfactionCategoryName: "病有所医",
+                    score: "50",
+                    badQty: 40,
+                    goodQty: 20,
+                    veryGoodQty: 30
+                }
+            ]
+            const allowedCategories = this.dicts.satisfaction_category.map(item => item.value)
+            this.tableData.forEach(item => {
+                if (allowedCategories.includes(item.satisfactionCategory)) {
+                    this.option.series[0].data.push(item.veryGoodQty)
+                    this.option.series[1].data.push(item.goodQty)
+                    this.option.series[2].data.push(item.badQty)
+                    this.option.xAxis.data.push(item.satisfactionCategoryName)
+                    this.satisfactionCategory.push(item.satisfactionCategory)
+                    this.score.push({ score: item.score, satisfactionCategoryName: item.satisfactionCategoryName, imgUrl: require(`../../../../assets/img/satisfaction/${item.satisfactionCategory}.png`) });
+                }
+            });
+            console.log(this.score, '综合得分');
+            // const url = "/governance/satisfaction/communitySelfInsp/stats/synthesis";
+
+            // const { pageSize, pageNo, formData } = this;
+            // const { data, code, msg } = await requestGet(url, {...formData});
+            // this.tableLoading = false;
+            // if (code === 0) {
+            //   this.total = data.total || 0;
+            //   this.tableData = data.categoryDatas;
+            //   const allowedCategories = this.dicts.satisfaction_category.map(item => item.value)
+            // this.tableData.forEach(item => {
+            //     if (allowedCategories.includes(item.satisfactionCategory)) {
+            //         this.option.series[0].data.push(item.veryGoodQty)
+            //         this.option.series[1].data.push(item.goodQty)
+            //         this.option.series[2].data.push(item.badQty)
+            //         this.option.xAxis.data.push(item.satisfactionCategoryName)
+            //         this.satisfactionCategory.push(item.satisfactionCategory)
+            //         this.score.push({ score: item.score, satisfactionCategoryName: item.satisfactionCategoryName, imgUrl: require(`../../../../assets/img/satisfaction/${item.satisfactionCategory}.png`) });
+            //     }
+            // });
+            // } else {
+            //   this.$message.error(msg);
+            // }
+        },
+
+        //   重置
+        resetSearch() {
+            this.formData = {};
+            this.getTableData();
+        },
     },
-  
+
     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 > * {
+};
+</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{
+}
+
+.m-table-item {
     display: flex;
     flex-direction: column;
-  }
-  .content_box{
+}
+
+.content_box {
     display: flex;
     height: 160px;
     margin-top: 24px;
-    .left{
+
+    .left {
         background: #f7faff;
         margin-right: 10px;
         min-width: 300px;
@@ -459,50 +414,67 @@
         align-items: center;
         justify-content: center;
         border-radius: 5px;
-         img{
+
+        img {
             margin-right: 8px;
-         }
-         .left_right{
-            display: flex;
-            flex-direction: column;
-         }
+        }
     }
-    img{
+
+    img {
         width: 50px;
         height: 50px;
         margin-right: 15px;
 
     }
-    .right{
-        flex:1;
+
+    .left_right,
+    .right_right {
         display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-        .box{
+        flex-direction: column;
+
+        :nth-child(1) {
+            font-size: 18px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #333333;
+        }
+
+        :nth-child(2) {
+            font-size: 14px;
+            font-family: PingFang SC;
+            color: #333333;
+            opacity: 0.6;
+        }
+    }
+
+    .right {
+        flex: 1;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+
+        .box {
             height: 75px;
-            width: 24%;
             margin: 0 10px 10px 0;
-            .card{
+
+            .card {
                 background: #f7faff;
                 width: 100%;
                 height: 100%;
                 display: flex;
                 align-items: center;
-                border-radius: 5px;  
+                border-radius: 5px;
                 padding: 20px;
                 box-sizing: border-box;
-            .right_right{
-                display: flex;
-                flex-direction: column; 
+
             }
         }
-        }
     }
-  }
-  #myCharts{
+}
+
+#myCharts {
     width: 100%;
     flex: 1;
-  }
-  </style>
+}
+</style>
     
     
\ No newline at end of file