社区自查报告页面

src/views/modules/base/residentManagement/publicWelfarePost/addForm.vue

@@ -219,8 +219,6 @@
                     </el-col>
                 </el-row>
 
-
-
                 <el-row>
                     <el-col :span="24">
                         <div class="info-prop" v-if="formType == 'detail'">
@@ -358,7 +356,7 @@ export default {
             await this.getDetail(this.scopeId);
         },
         async getDetail(categorizedResiId) {
-            const url = `/actual/base/residentPartyMemberInfo/detail/${categorizedResiId}`;
+            const url = `/actual/base/publicWelfarePost/detail/${categorizedResiId}`;
             const { data, code, msg } = await requestGet(url);
             if (code === 0) {
                 this.formData = { ...data };

src/views/modules/satisfaction/communitySelfInsp/index.vue

@@ -0,0 +1,508 @@
+<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>
+                <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>
+                         </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>
+                </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>
+      <!-- <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> -->
+    </div>
+  </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:{},
+
+    
+
+        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
+            },
+            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"
+                    }
+                },
+                {
+                    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'}   // 到底部结束
+                            ]
+                        )
+                    },
+                    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'}   // 到底部结束
+                            ]
+                        )
+                    },
+                    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 created() {
+      await this.getDicts();
+    },
+    mounted() {
+      this.user = this.$store.state.user;
+      this.agencyId = this.user.agencyId;
+      this.getTableData();
+      this.$nextTick(()=>{
+        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}`);
+            }
+          });
+        } 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();
+      },
+    },
+  
+    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;
+  }
+  .content_box{
+    display: flex;
+    height: 160px;
+    margin-top: 24px;
+    .left{
+        background: #f7faff;
+        margin-right: 10px;
+        min-width: 300px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 5px;
+         img{
+            margin-right: 8px;
+         }
+         .left_right{
+            display: flex;
+            flex-direction: column;
+         }
+    }
+    img{
+        width: 50px;
+        height: 50px;
+        margin-right: 15px;
+
+    }
+    .right{
+        flex:1;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        .box{
+            height: 75px;
+            width: 24%;
+            margin: 0 10px 10px 0;
+            .card{
+                background: #f7faff;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                border-radius: 5px;  
+                padding: 20px;
+                box-sizing: border-box;
+            .right_right{
+                display: flex;
+                flex-direction: column; 
+            }
+        }
+        }
+    }
+  }
+  #myCharts{
+    width: 100%;
+    flex: 1;
+  }
+  </style>
+    
+