|
|
|
@ -1,59 +1,59 @@ |
|
|
|
|
|
|
|
<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.periodStart" type="month" 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-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" action="uploadUlr" |
|
|
|
:limit="1" :accept="'.xls,.xlsx'" :with-credentials="true" :show-file-list="false" |
|
|
|
:auto-upload="true" :before-upload="beforeExcelUpload" :http-request="uploadHttpRequest"> |
|
|
|
<el-button type="primary" size="small" class="diy-button--white el-button--default" |
|
|
|
:loading="importLoading">导入</el-button> |
|
|
|
</el-upload> |
|
|
|
<el-button type="primary" style="margin-left:10px" size="small" |
|
|
|
class="diy-button--white el-button--default" @click="handleExportModule">下载模板</el-button> |
|
|
|
</div> |
|
|
|
<el-radio-group v-model="formData.orgCategoryCode" @change="handelChangeCategory" style="margin: 20px 0 0;"> |
|
|
|
<el-radio-button label="province">省满意度调查</el-radio-button> |
|
|
|
<el-radio-button label="city">市满意度调查</el-radio-button> |
|
|
|
<el-radio-button label="district">区满意度调查</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
<div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }"> |
|
|
|
<div id="myCharts"></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_form_list" @handleClose="handleClose" :satisfactionCategoryStr="satisfactionCategoryStr" |
|
|
|
:formObj="formData" @handelClickDetail="handelClickDetail" |
|
|
|
@handelClickEdit="handelClickEdit"></form-list> |
|
|
|
<el-dialog width="820px" class="dialog-h" title="省满意度调查详情" :close-on-click-modal="false" |
|
|
|
v-if="showProvinceFollowUpDetail" :visible.sync="showProvinceFollowUpDetail" append-to-body> |
|
|
|
<follow-detail :detailObj="detailObj" :formType="formType" |
|
|
|
@handleCancle="showProvinceFollowUpDetail = false" @handleComfirm="handleComfirm"></follow-detail> |
|
|
|
</el-dialog> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
<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.periodStart" type="month" 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-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" action="uploadUlr" |
|
|
|
:limit="1" :accept="'.xls,.xlsx'" :with-credentials="true" :show-file-list="false" |
|
|
|
:auto-upload="true" :before-upload="beforeExcelUpload" :http-request="uploadHttpRequest"> |
|
|
|
<el-button type="primary" size="small" class="diy-button--white el-button--default" |
|
|
|
:loading="importLoading">导入</el-button> |
|
|
|
</el-upload> |
|
|
|
<el-button type="primary" style="margin-left:10px" size="small" |
|
|
|
class="diy-button--white el-button--default" @click="handleExportModule">下载模板</el-button> |
|
|
|
</div> |
|
|
|
<el-radio-group v-model="formData.orgCategoryCode" @change="handelChangeCategory" style="margin: 20px 0 0;"> |
|
|
|
<el-radio-button label="province">省满意度调查</el-radio-button> |
|
|
|
<el-radio-button label="city">市满意度调查</el-radio-button> |
|
|
|
<el-radio-button label="district">区满意度调查</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
<div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }"> |
|
|
|
<div id="myCharts"></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_form_list" @handleClose="handleClose" :satisfactionCategoryStr="satisfactionCategoryStr" |
|
|
|
:formObj="formData" @handelClickDetail="handelClickDetail" |
|
|
|
@handelClickEdit="handelClickEdit"></form-list> |
|
|
|
<el-dialog width="820px" class="dialog-h" title="省满意度调查详情" :close-on-click-modal="false" |
|
|
|
v-if="showProvinceFollowUpDetail" :visible.sync="showProvinceFollowUpDetail" append-to-body> |
|
|
|
<follow-detail :detailObj="detailObj" :formType="formType" |
|
|
|
@handleCancle="showProvinceFollowUpDetail = false" @handleComfirm="handleComfirm"></follow-detail> |
|
|
|
</el-dialog> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
import { requestPost, requestGet } from "@/js/dai/request"; |
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
@ -63,313 +63,313 @@ import formList from "./formList"; |
|
|
|
import util from "@js/util.js"; |
|
|
|
import followDetail from "./followDetail" |
|
|
|
export default { |
|
|
|
components: { formList, followDetail }, |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
searchH: 20, |
|
|
|
showFormList: false, |
|
|
|
formData: { |
|
|
|
periodStart: "", |
|
|
|
orgCategoryCode:"province" |
|
|
|
}, |
|
|
|
|
|
|
|
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: 24, // 设置柱子宽度 |
|
|
|
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" |
|
|
|
} |
|
|
|
}, |
|
|
|
] |
|
|
|
}, |
|
|
|
satisfactionCategoryName: [], |
|
|
|
satisfactionCategory: [], |
|
|
|
score: [], |
|
|
|
showProvinceFollowUpDetail: false, |
|
|
|
|
|
|
|
detailObj: {}, |
|
|
|
|
|
|
|
formType: '' |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
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"]), |
|
|
|
}, |
|
|
|
created() { |
|
|
|
let date = new Date() |
|
|
|
this.formData.periodStart = util.formatDate(date, 'yyyy-MM') |
|
|
|
}, |
|
|
|
|
|
|
|
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); |
|
|
|
} |
|
|
|
}, |
|
|
|
// ------------------------------------事件------------------------------------------ |
|
|
|
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) |
|
|
|
}); |
|
|
|
|
|
|
|
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 |
|
|
|
}, |
|
|
|
handelClickDetail(row) { |
|
|
|
this.formType = 'detail' |
|
|
|
this.showProvinceFollowUpDetail = true |
|
|
|
this.detailObj = row || {} |
|
|
|
}, |
|
|
|
handelClickEdit(row) { |
|
|
|
this.formType = 'edit' |
|
|
|
this.showProvinceFollowUpDetail = true |
|
|
|
this.detailObj = row || {} |
|
|
|
}, |
|
|
|
handelChangeCategory(){ |
|
|
|
this.getTableData() |
|
|
|
}, |
|
|
|
handleComfirm(form) { |
|
|
|
this.showProvinceFollowUpDetail = false |
|
|
|
this.save(form) |
|
|
|
}, |
|
|
|
async save(form) { |
|
|
|
try { |
|
|
|
const url = '/governance/provinceEvaluationRecord/updateInfo' |
|
|
|
form.periodName = null |
|
|
|
const { code } = await requestPost(url, form) |
|
|
|
if (code == 0) { |
|
|
|
this.getTableData() |
|
|
|
this.$refs['ref_form_list'].getTableData() |
|
|
|
this.$message.success('保存成功') |
|
|
|
this.showProvinceFollowUpDetail = false |
|
|
|
} |
|
|
|
} catch (err) { |
|
|
|
console.log(err); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 搜索事件 |
|
|
|
handleSearch(val) { |
|
|
|
console.log(this.formData); |
|
|
|
this.getTableData(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取列表 |
|
|
|
async getTableData() { |
|
|
|
try { |
|
|
|
const allowedCategories = this.dicts.satisfaction_category.map(item => item.value) |
|
|
|
const { data } = await this.$http.post( |
|
|
|
`/governance/provinceEvaluationRecord/staticPeopleNum`, |
|
|
|
{ ...this.formData } |
|
|
|
); |
|
|
|
this.option.series[0].data = [] |
|
|
|
this.option.xAxis.data = [] |
|
|
|
this.tableData = data |
|
|
|
this.tableData.forEach(item => { |
|
|
|
if (allowedCategories.includes(item.scopeId)) { |
|
|
|
this.option.series[0].data.push(item.peopleNum) |
|
|
|
this.option.xAxis.data.push(item.scopeName) |
|
|
|
} |
|
|
|
}); |
|
|
|
this.myChart.setOption(this.option) |
|
|
|
} catch (error) { |
|
|
|
console.log(error); |
|
|
|
} |
|
|
|
}, |
|
|
|
async handleExportModule() { |
|
|
|
let url = "/governance/provinceEvaluationRecord/provinceStatis/downloadImportTemplate"; |
|
|
|
let params = {}; |
|
|
|
await this.$http({ |
|
|
|
method: "get", |
|
|
|
url, |
|
|
|
responseType: "blob", |
|
|
|
data: params, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
console.log("res----dddd", res); |
|
|
|
// this.download(res.data, title + '.xls') |
|
|
|
if (res.headers["content-disposition"]) { |
|
|
|
let fileName = window.decodeURI( |
|
|
|
res.headers["content-disposition"].split(";")[1].split("=")[1] |
|
|
|
); |
|
|
|
console.log("filename", fileName); |
|
|
|
let blob = new Blob([res.data], { |
|
|
|
type: "application/vnd.ms-excel", |
|
|
|
}); |
|
|
|
var url = window.URL.createObjectURL(blob); |
|
|
|
var aLink = document.createElement("a"); |
|
|
|
aLink.style.display = "none"; |
|
|
|
aLink.href = url; |
|
|
|
aLink.setAttribute("download", fileName); |
|
|
|
document.body.appendChild(aLink); |
|
|
|
aLink.click(); |
|
|
|
document.body.removeChild(aLink); //下载完成移除元素 |
|
|
|
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|
|
|
} else this.$message.error("下载失败"); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log("err", err); |
|
|
|
return this.$message.error("网络错误"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
beforeExcelUpload(file) { |
|
|
|
console.log("file", file); |
|
|
|
const isType = file.type === "application/vnd.ms-excel"; |
|
|
|
const isTypeComputer = |
|
|
|
file.type === |
|
|
|
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; |
|
|
|
const fileType = isType || isTypeComputer; |
|
|
|
const isLt1M = file.size / 1024 / 1024 < 10; |
|
|
|
if (!fileType) { |
|
|
|
this.$message.error("上传文件只能是xls/xlsx格式！"); |
|
|
|
} |
|
|
|
|
|
|
|
if (!isLt1M) { |
|
|
|
this.$message.error("上传文件大小不能超过 10MB!"); |
|
|
|
} |
|
|
|
return fileType && isLt1M; |
|
|
|
}, |
|
|
|
async uploadHttpRequest(file) { |
|
|
|
this.$message({ |
|
|
|
showClose: true, |
|
|
|
dangerouslyUseHTMLString: true, |
|
|
|
message: |
|
|
|
"导入中，请到系统管理-<a id='clickA' style='cursor: pointer;'>导入记录</a>中查看进度", |
|
|
|
duration: 3000, |
|
|
|
}); |
|
|
|
let than = this; |
|
|
|
document.getElementById("clickA").addEventListener("click", function () { |
|
|
|
than.$router.replace("/main/importRecord-index"); |
|
|
|
}); |
|
|
|
const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加 |
|
|
|
formData.append("file", file.file); //添加文件对象 |
|
|
|
formData.append("orgCategory",than.formData.orgCategoryCode); //添加文件对象 |
|
|
|
await this.$http |
|
|
|
.post(`/governance/provinceEvaluationRecord/importDataByExcel`, formData) |
|
|
|
.then((res) => { |
|
|
|
console.log("res-up", res); |
|
|
|
if (res.data.code == 0 && res.data.msg == "success") { |
|
|
|
this.$message.success("导入成功"); |
|
|
|
this.getTableData(); |
|
|
|
this.$refs.upload.clearFiles(); |
|
|
|
} else this.$message.error(res.data.msg); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log("失败", err); |
|
|
|
file.onError(); //上传失败的文件会从文件列表中删除 |
|
|
|
this.$message.error('导入失败') |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 重置 |
|
|
|
resetSearch() { |
|
|
|
this.formData = {}; |
|
|
|
this.getTableData(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
activated() { |
|
|
|
this.handleWindowResize() |
|
|
|
}, |
|
|
|
props: {}, |
|
|
|
components: { formList, followDetail }, |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
searchH: 20, |
|
|
|
showFormList: false, |
|
|
|
formData: { |
|
|
|
periodStart: "", |
|
|
|
orgCategoryCode:"province" |
|
|
|
}, |
|
|
|
|
|
|
|
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: 24, // 设置柱子宽度 |
|
|
|
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" |
|
|
|
} |
|
|
|
}, |
|
|
|
] |
|
|
|
}, |
|
|
|
satisfactionCategoryName: [], |
|
|
|
satisfactionCategory: [], |
|
|
|
score: [], |
|
|
|
showProvinceFollowUpDetail: false, |
|
|
|
|
|
|
|
detailObj: {}, |
|
|
|
|
|
|
|
formType: '' |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
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"]), |
|
|
|
}, |
|
|
|
created() { |
|
|
|
let date = new Date() |
|
|
|
this.formData.periodStart = util.formatDate(date, 'yyyy-MM') |
|
|
|
}, |
|
|
|
|
|
|
|
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); |
|
|
|
} |
|
|
|
}, |
|
|
|
// ------------------------------------事件------------------------------------------ |
|
|
|
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) |
|
|
|
}); |
|
|
|
|
|
|
|
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 |
|
|
|
}, |
|
|
|
handelClickDetail(row) { |
|
|
|
this.formType = 'detail' |
|
|
|
this.showProvinceFollowUpDetail = true |
|
|
|
this.detailObj = row || {} |
|
|
|
}, |
|
|
|
handelClickEdit(row) { |
|
|
|
this.formType = 'edit' |
|
|
|
this.showProvinceFollowUpDetail = true |
|
|
|
this.detailObj = row || {} |
|
|
|
}, |
|
|
|
handelChangeCategory(){ |
|
|
|
this.getTableData() |
|
|
|
}, |
|
|
|
handleComfirm(form) { |
|
|
|
this.showProvinceFollowUpDetail = false |
|
|
|
this.save(form) |
|
|
|
}, |
|
|
|
async save(form) { |
|
|
|
try { |
|
|
|
const url = '/governance/provinceEvaluationRecord/updateInfo' |
|
|
|
form.periodName = null |
|
|
|
const { code } = await requestPost(url, form) |
|
|
|
if (code == 0) { |
|
|
|
this.getTableData() |
|
|
|
this.$refs['ref_form_list'].getTableData() |
|
|
|
this.$message.success('保存成功') |
|
|
|
this.showProvinceFollowUpDetail = false |
|
|
|
} |
|
|
|
} catch (err) { |
|
|
|
console.log(err); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 搜索事件 |
|
|
|
handleSearch(val) { |
|
|
|
console.log(this.formData); |
|
|
|
this.getTableData(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取列表 |
|
|
|
async getTableData() { |
|
|
|
try { |
|
|
|
const allowedCategories = this.dicts.satisfaction_category.map(item => item.value) |
|
|
|
const { data } = await this.$http.post( |
|
|
|
`/governance/provinceEvaluationRecord/staticPeopleNum`, |
|
|
|
{ ...this.formData } |
|
|
|
); |
|
|
|
this.option.series[0].data = [] |
|
|
|
this.option.xAxis.data = [] |
|
|
|
this.tableData = data |
|
|
|
this.tableData.forEach(item => { |
|
|
|
if (allowedCategories.includes(item.scopeId)) { |
|
|
|
this.option.series[0].data.push(item.peopleNum) |
|
|
|
this.option.xAxis.data.push(item.scopeName) |
|
|
|
} |
|
|
|
}); |
|
|
|
this.myChart.setOption(this.option) |
|
|
|
} catch (error) { |
|
|
|
console.log(error); |
|
|
|
} |
|
|
|
}, |
|
|
|
async handleExportModule() { |
|
|
|
let url = "/governance/provinceEvaluationRecord/provinceStatis/downloadImportTemplate"; |
|
|
|
let params = {}; |
|
|
|
await this.$http({ |
|
|
|
method: "get", |
|
|
|
url, |
|
|
|
responseType: "blob", |
|
|
|
data: params, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
console.log("res----dddd", res); |
|
|
|
// this.download(res.data, title + '.xls') |
|
|
|
if (res.headers["content-disposition"]) { |
|
|
|
let fileName = window.decodeURI( |
|
|
|
res.headers["content-disposition"].split(";")[1].split("=")[1] |
|
|
|
); |
|
|
|
console.log("filename", fileName); |
|
|
|
let blob = new Blob([res.data], { |
|
|
|
type: "application/vnd.ms-excel", |
|
|
|
}); |
|
|
|
var url = window.URL.createObjectURL(blob); |
|
|
|
var aLink = document.createElement("a"); |
|
|
|
aLink.style.display = "none"; |
|
|
|
aLink.href = url; |
|
|
|
aLink.setAttribute("download", fileName); |
|
|
|
document.body.appendChild(aLink); |
|
|
|
aLink.click(); |
|
|
|
document.body.removeChild(aLink); //下载完成移除元素 |
|
|
|
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|
|
|
} else this.$message.error("下载失败"); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log("err", err); |
|
|
|
return this.$message.error("网络错误"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
beforeExcelUpload(file) { |
|
|
|
console.log("file", file); |
|
|
|
const isType = file.type === "application/vnd.ms-excel"; |
|
|
|
const isTypeComputer = |
|
|
|
file.type === |
|
|
|
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; |
|
|
|
const fileType = isType || isTypeComputer; |
|
|
|
const isLt1M = file.size / 1024 / 1024 < 10; |
|
|
|
if (!fileType) { |
|
|
|
this.$message.error("上传文件只能是xls/xlsx格式！"); |
|
|
|
} |
|
|
|
|
|
|
|
if (!isLt1M) { |
|
|
|
this.$message.error("上传文件大小不能超过 10MB!"); |
|
|
|
} |
|
|
|
return fileType && isLt1M; |
|
|
|
}, |
|
|
|
async uploadHttpRequest(file) { |
|
|
|
this.$message({ |
|
|
|
showClose: true, |
|
|
|
dangerouslyUseHTMLString: true, |
|
|
|
message: |
|
|
|
"导入中，请到系统管理-<a id='clickA' style='cursor: pointer;'>导入记录</a>中查看进度", |
|
|
|
duration: 3000, |
|
|
|
}); |
|
|
|
let than = this; |
|
|
|
document.getElementById("clickA").addEventListener("click", function () { |
|
|
|
than.$router.replace("/main/importRecord-index"); |
|
|
|
}); |
|
|
|
const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加 |
|
|
|
formData.append("file", file.file); //添加文件对象 |
|
|
|
formData.append("orgCategory",than.formData.orgCategoryCode); //添加文件对象 |
|
|
|
await this.$http |
|
|
|
.post(`/governance/provinceEvaluationRecord/importDataByExcel`, formData) |
|
|
|
.then((res) => { |
|
|
|
console.log("res-up", res); |
|
|
|
if (res.data.code == 0 && res.data.msg == "success") { |
|
|
|
this.$message.success("导入成功"); |
|
|
|
this.getTableData(); |
|
|
|
this.$refs.upload.clearFiles(); |
|
|
|
} else this.$message.error(res.data.msg); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log("失败", err); |
|
|
|
file.onError(); //上传失败的文件会从文件列表中删除 |
|
|
|
this.$message.error('导入失败') |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 重置 |
|
|
|
resetSearch() { |
|
|
|
this.formData = {}; |
|
|
|
this.getTableData(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
activated() { |
|
|
|
this.handleWindowResize() |
|
|
|
}, |
|
|
|
props: {}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@ -378,88 +378,88 @@ export default { |
|
|
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|
|
|
|
|
|
|
.div_btn_left>* { |
|
|
|
margin-right: 10px; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.m-table-item { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
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; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
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; |
|
|
|
width: 100%; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
张若晨
2 years ago