You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
508 lines
16 KiB
508 lines
16 KiB
2 years ago
|
<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>
|
||
|
|
|
||
|
|
|