|
|
|
|
|
|
|
|
|
<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-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="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" 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"></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></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></follow-list>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import { requestPost, requestGet } from "@/js/dai/request";
|
|
|
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
|
|
|
import { mapGetters } from "vuex";
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import formList from "./formList";
|
|
|
|
|
import followList from "./followList";
|
|
|
|
|
import followDetail from "./followUpDetail";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: { formList, followList,followDetail },
|
|
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
searchH: 20,
|
|
|
|
|
showFormList: false,
|
|
|
|
|
formData: {
|
|
|
|
|
period: "",
|
|
|
|
|
inspRecordId: "",
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
multiSelection: [], // 多选结果
|
|
|
|
|
importLoading: false,
|
|
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
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",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
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: [],
|
|
|
|
|
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",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
satisfactionCategoryName: [],
|
|
|
|
|
satisfactionCategory: [],
|
|
|
|
|
score: [],
|
|
|
|
|
|
|
|
|
|
showFollowUpDetail: false,
|
|
|
|
|
showFollowUpList: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
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();
|
|
|
|
|
await this.initEcharts();
|
|
|
|
|
},
|
|
|
|
|
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() {
|
|
|
|
|
this.showFollowUpDetail = true;
|
|
|
|
|
},
|
|
|
|
|
handelFollowUpList() {
|
|
|
|
|
this.showFollowUpList = true;
|
|
|
|
|
},
|
|
|
|
|
// ------------------------------------事件------------------------------------------
|
|
|
|
|
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>* {
|
|
|
|
|
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>
|
|
|
|
|
|
|
|
|
|
|
