epmet-work-pc-chengyang/src/views/modules/satisfaction/communitySelfInsp/index.vue

<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.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"
                        @click="handleCreateMonthlySurvey">生成本月社区自查问卷表</el-button>
                </div>
                <div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
                    <div>本月已参与调研人数 {{ personQty }}人</div>
                    <section class="content_box">
                        <div class="left">
                            <img src="../../../../assets/img/satisfaction/zhdf.png" alt="Image">
                            <div class="left_right">
                                <div>{{ synthesisScore }}</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>
                    </section>
                    <div id="myCharts"></div>
                </div>
                <div>
                </div>
            </div>
        </div>
        <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"
                @handelDetail="handelDetail" @handelFollowUpList="handelFollowUpList" :period="formData.period" :seriesName="seriesName" :inspRecordId="formData.inspRecordId"></form-list>
            <el-dialog width="920px" class="dialog-h" title="社区自查报告详情" :close-on-click-modal="false"
                v-if="showFollowUpDetail" :visible.sync="showFollowUpDetail" append-to-body>
                <follow-Detail :period="formData.period" :inspResultId="inspResultId" @handleClose="showFollowUpDetail = false"></follow-Detail>
            </el-dialog>
            <el-dialog width="820px" class="dialog-h" title="回访记录" :close-on-click-modal="false" v-if="showFollowUpList"
                :visible.sync="showFollowUpList" append-to-body>
                <follow-list :id="inspResultId"></follow-list>
            </el-dialog>
        </el-dialog>
        <el-dialog title="调查问卷" :visible.sync="showTduckImage" width="550px">
            <el-image :src="qrCodeImgUrl">
                <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                </div>
            </el-image>
            <div>
                <span>问卷链接：</span> {{ questionnaireUrl }}
            </div>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { requestPost, requestGet } from "@/js/dai/request";
import { mapGetters } from "vuex";
import * as echarts from "echarts";
import formList from "./formList";
import followList from "./followList";
import followDetail from "./followUpDetail";
import util from "@js/util.js";

export default {
    components: { formList, followList, followDetail },

    data() {
        return {
            searchH: 20,

            formData: {
                period: "",//月份
                inspRecordId: "",
            },

            multiSelection: [], // 多选结果

            dicts: {
                satisfaction_category: [],
            }, //字典对象

            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,
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: false
                    },
                    data: [], // 请将yourDataArray替换为您的x轴数据数组
                    splitLine: {
                        show: true,
                        lineStyle: {
                            width: 60, // 设置阴影的宽度
                            color: "#000",
                            opacity: 0
                        },
                        // 控制间隔，这里设置为2表示左右两侧有间隔，可以根据需要调整
                    },

                },


                yAxis: {
                    type: "value",
                    name: "单位(个)",
                    min: 0,

                },
                series: [
                    {
                        name: "满意",
                        type: "bar",
                        data: [],
                        barWidth: 16, // 设置柱子宽度
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: "#2c7cf2" }, // 从顶部开始
                                { offset: 1, color: "#80b3ff" }, // 到底部结束
                            ]),
                        },
                    },
                    {
                        name: "基本满意",
                        type: "bar",
                        data: [],
                        barWidth: 16, // 设置柱子宽度
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: "#3ca267" }, // 从顶部开始
                                { offset: 1, color: "#82cca0" }, // 到底部结束
                            ]),
                        },
                    },
                    {
                        name: "不满意",
                        type: "bar",
                        data: [],
                        barWidth: 16, // 设置柱子宽度
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: "#edb42d" }, // 从顶部开始
                                { offset: 1, color: "#ffd981" }, // 到底部结束
                            ]),
                        },
                    },
                ],
            },

            satisfactionCategory: [],//类目
            satisfactionCategoryName: [],
            score: [], //综合得分

            showFormList: false, //自查列表弹框
            showFollowUpDetail: false,//自查列表中查看弹框
            showFollowUpList: false,//回访记录弹框
            showTduckImage: false,

            qrCodeImgUrl: '',//生成二维码图片链接
            questionnaireUrl: '',
            synthesisScore: '',
            personQty: '',

            inspResultId:""
        };
    },

    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.getDicts();
        await this.getTableData();
        this.$nextTick(() => {
            this.initEcharts();
        })
    },
    created() {
        let date = new Date()
        this.formData.period = util.formatDate(date, 'yyyy-MM')
    },
    activated() {
        this.handleWindowResize()
    },
    methods: {
        // ------------------------------------字典------------------------------------------
        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);
            }
        },
        // ------------------------------------事件------------------------------------------
        handelDetail(id) {
            this.showFollowUpDetail = true;
            this.inspResultId = id
        },
        handelFollowUpList(id) {
            this.showFollowUpList = true;
            this.inspResultId = id
        },
        async handleCreateMonthlySurvey() {
            try {
                let url = '/governance/satisfaction/communitySelfInsp/generateQuestionnaire'
                const { data, code } = await requestPost(url)
                if (code == 0) {
                    this.showTduckImage = true
                    this.qrCodeImgUrl = data.qrCodeImgUrl
                    this.questionnaireUrl = data.questionnaireUrl
                }
            } catch (err) {
                console.log(err);
            }
        },
        initEcharts() {
            this.myChart = echarts.init(document.getElementById("myCharts"));
            this.myChart.setOption(this.option);
            let than = this;
            this.myChart.on("click", function (params) {
                than.handelClickChart(params.name,params.seriesName);
            });
            window.addEventListener("resize", this.handleWindowResize);
        },
        handleWindowResize() {
            if (this.myChart) {
                this.myChart.resize();
            }
        },
        handelClickChart(name,seriesName) {
            this.showFormList = true;
            this.satisfactionCategoryStr = this.dicts.satisfaction_category.filter(
                (item) => item.label == name
            )[0].value;
           this.seriesName = seriesName == '满意'?'veryGood':seriesName == '基本满意'?'good':'bad';
        },
        handleClose() {
            this.showFormList = false;
            this.showFollowUpDetail = false
        },
        // 搜索事件
        handleSearch(val) {
            this.getTableData();
        },

        //   获取列表
        async getTableData() {
            const url = "/governance/satisfaction/communitySelfInsp/stats/synthesis";
            const { formData } = this;
            const { data, code, msg } = await requestGet(url, { ...formData });
            this.tableLoading = false;
            if (code === 0) {
                this.total = data.total || 0;
                this.score = []
                this.tableData = data.categoryDatas;
                this.formData.inspRecordId = data.inspRecordId;
                this.synthesisScore = data.synthesisScore;
                this.personQty = data.personQty
                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>* {
    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;
        }
    }

    img {
        width: 50px;
        height: 50px;
        margin-right: 15px;
    }

    .left_right,
    .right_right {
        display: flex;
        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;
            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;
            }
        }
    }
}

#myCharts {
    width: 100%;
    flex: 1;
}
</style>