9 changed files with 1199 additions and 103 deletions
@ -0,0 +1,287 @@ |
|||
<template> |
|||
<div class="m-record"> |
|||
<div> |
|||
<div class="m-table-item"> |
|||
<el-table :data="tableData" class="resi-table" row-key="id" border style="width: 100%"> |
|||
<el-table-column label="序号" type="index" align="center" width="50"></el-table-column> |
|||
<el-table-column prop="followUpTime" label="回访时间" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<el-date-picker v-model="scope.row.followUpTime" type="date" |
|||
class="input-width" value-format="yyyy-MM-dd" placeholder="选择日期" v-if="scope.row.isEdit"></el-date-picker> |
|||
<div v-else class="div-content">{{ scope.row.followUpTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="followUpWay" label="回访方式" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-select v-model="scope.row.followUpWay" placeholder="请选择" |
|||
class="input-width" size="small" clearable v-if="scope.row.isEdit"> |
|||
<el-option v-for="subItem in followUpWayList" :key="subItem.value" :label="subItem.label" |
|||
:value="subItem.value"></el-option> |
|||
</el-select> |
|||
<div v-else class="div-content">{{ scope.row.followUpWay == 1 ? '正常' : '异常' }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="riskFlag" label="是否风险" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-select v-model="scope.row.riskFlag" placeholder="请选择" |
|||
class="input-width" size="small" clearable v-if="scope.row.isEdit"> |
|||
<el-option v-for="subItem in binaryOptionList" :key="subItem.value" :label="subItem.label" |
|||
:value="subItem.value"></el-option> |
|||
</el-select> |
|||
<div v-else class="div-content">{{ scope.row.riskFlag == 0 ? '无' : '有' }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="description" label="回访详情" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-if="scope.row.isEdit" v-model="scope.row.description" |
|||
placeholder="请输入" class="input-width" clearable ></el-input> |
|||
<div v-else class="div-content">{{ scope.row.description }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-if="!disabled" fixed="right" label="操作" align="center" width="120"> |
|||
<template slot-scope="scope"> |
|||
<template v-if="scope.row.isEdit"> |
|||
<el-button @click="handleEdit(scope.row)" type="text" size="small" |
|||
class="btn-color-edit">保存</el-button> |
|||
<el-button @click="handleChange(scope.row, 'cancle')" type="text" size="small" |
|||
class="btn-color-edit">取消</el-button> |
|||
</template> |
|||
<template v-else> |
|||
<!-- v-if="formType == 'edit'" --> |
|||
<el-button @click="handleChange(scope.row, 'edit')" |
|||
type="text" size="small" :disabled="disabled" class="btn-color-edit"> 修改 |
|||
</el-button> |
|||
<el-popconfirm title="删除之后无法恢复，确认删除？" |
|||
@onConfirm="del(scope.row)" @confirm="del(scope.row)"> |
|||
<el-button slot="reference" type="text" size="small" class="btn-color-del" |
|||
style="margin-left: 10px">删除</el-button> |
|||
</el-popconfirm> |
|||
</template> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
requestPost, |
|||
requestGet |
|||
} from '@/js/dai/request'; |
|||
import { binaryOptionList } from "@/js/columns/constants"; |
|||
export default { |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
followUpWayList:[{ |
|||
label: '无需回访', |
|||
value: '0' |
|||
}, { |
|||
label: '上门回访', |
|||
value: '1' |
|||
},{ |
|||
label: '电话回访', |
|||
value: '2' |
|||
}], |
|||
binaryOptionList, |
|||
btnDisabled: false, |
|||
btnType: 'cancle', |
|||
disabled:false, |
|||
isEdit: false, |
|||
tableData: [], |
|||
tempRow: {}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
allowOperate() { |
|||
const { |
|||
info: { |
|||
agencyId |
|||
} |
|||
} = this; |
|||
return agencyId && agencyId == this.$store.state.user.agencyId; |
|||
} |
|||
}, |
|||
watch: { |
|||
id: { |
|||
handler(val) { |
|||
console.log('val------points', val); |
|||
if (val.length > 0) { |
|||
this.btnDisabled = false; |
|||
// this.getList(); |
|||
} else this.btnDisabled = true; |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
created() { |
|||
console.log('id', this.id); |
|||
if (this.id) { |
|||
this.getList(); |
|||
} else { |
|||
this.handleAdd(); |
|||
} |
|||
}, |
|||
methods: { |
|||
getRowClass({ |
|||
rowIndex, |
|||
columnIndex |
|||
}) { |
|||
if (rowIndex === 0) { |
|||
return 'background: #2195fe; color: #fff;'; |
|||
} |
|||
}, |
|||
handleChange(row, type) { |
|||
console.log('type----', type); |
|||
if (type == 'cancle') { |
|||
row = { |
|||
...this.tempRow |
|||
}; |
|||
row.isEdit = false; |
|||
if (this.btnType == 'add') this.tableData.pop(); |
|||
this.getList(); |
|||
console.log('row----', row); |
|||
} else { |
|||
this.tempRow = { |
|||
...row |
|||
}; |
|||
row.isEdit = true; |
|||
} |
|||
this.btnType = type; |
|||
this.isEdit = !this.isEdit; |
|||
}, |
|||
handleChangeStaff(row) { |
|||
const { |
|||
inspectStaffId |
|||
} = row; |
|||
const { |
|||
optionStaff |
|||
} = this; |
|||
let item = optionStaff.find(item => item.value == inspectStaffId); |
|||
if (item) { |
|||
row.inspectStaffName = item.name; |
|||
row.inspectStaffMobile = item.mobile; |
|||
} |
|||
}, |
|||
|
|||
async handleEdit(row) { |
|||
if (this.btnType == 'add') this.save(row); |
|||
else this.edit(row); |
|||
}, |
|||
handleAdd() { |
|||
this.btnType = 'add'; |
|||
this.isEdit = true; |
|||
const item = { |
|||
isEdit: true, |
|||
followUpWay: '', |
|||
riskFlag: '', |
|||
followUpTime: '', |
|||
description: '', |
|||
}; |
|||
if (!this.disabled) { |
|||
this.tableData.push(item); |
|||
} |
|||
}, |
|||
async save(row) { |
|||
console.log(row, this.id); |
|||
const params = { |
|||
...row, |
|||
equipmentId: this.id |
|||
}; |
|||
const url = ``; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$message.success('保存成功'); |
|||
row.isEdit = false; |
|||
this.isEdit = false; |
|||
this.btnType = 'cancle'; |
|||
this.getList(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async edit(row) { |
|||
console.log(row, this.id); |
|||
const params = { |
|||
...row |
|||
}; |
|||
const url = ``; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$message.success('保存成功'); |
|||
row.isEdit = false; |
|||
this.isEdit = false; |
|||
this.getList(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async del(row) { |
|||
let arr = [row.id]; |
|||
const url = ``; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, arr); |
|||
if (code === 0) { |
|||
this.$message.success('删除成功'); |
|||
this.getList(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getList() { |
|||
const params = { |
|||
equipmentId: this.id, |
|||
pageNo: 1, |
|||
pageSize: 10000 |
|||
}; |
|||
const url = ``; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.tableData = data.list.map(item => { |
|||
return { |
|||
...item, |
|||
isEdit: false |
|||
}; |
|||
}); |
|||
this.handleAdd(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/buttonstyle.scss'; |
|||
@import '@/assets/scss/modules/management/list-main.scss'; |
|||
|
|||
.mt10 { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.input-width { |
|||
width: 170px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,202 @@ |
|||
|
|||
<template> |
|||
<div class='g-main'> |
|||
<div class="title-small title_postion">个人信息</div> |
|||
<el-row type="flex" |
|||
class="f-m-top29"> |
|||
<el-col :span="12" |
|||
class="f-flex"> |
|||
<div class="f-label">姓名:</div> |
|||
<div class="f-left8 f-font-color">{{ resiDetailObj.reporterName }}</div> |
|||
</el-col> |
|||
<el-col :span="12" |
|||
class="f-flex"> |
|||
<div class="f-label">联系电话:</div> |
|||
<div class="f-left8 f-font-color">{{ resiDetailObj.reporterMobile }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" |
|||
class="f-m-top29"> |
|||
<el-col :span="24" |
|||
class="f-flex"> |
|||
<div class="f-label">在社区居住时间:</div> |
|||
<div class="f-left8 f-font-color">{{ resiDetailObj.resideDurationName }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="title-small title_postion f-m-top29 ">服务满意情况</div> |
|||
<el-row type="flex" class="f-m-top29" > |
|||
<el-col :span="2"> |
|||
病有所医： |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox label="满意" disabled></el-checkbox> |
|||
<el-checkbox label="基本满意" disabled></el-checkbox> |
|||
<el-checkbox label="不了解" disabled></el-checkbox> |
|||
<el-checkbox label="不满意" disabled></el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col :span="2.5" >不满意原因：</el-col> |
|||
<el-col :span="4"><el-input size="small" disabled/></el-col> |
|||
</el-row> |
|||
|
|||
<el-row type="flex" class="f-m-top29" > |
|||
<el-col :span="2"> |
|||
病有所医： |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox label="满意" disabled></el-checkbox> |
|||
<el-checkbox label="基本满意" disabled></el-checkbox> |
|||
<el-checkbox label="不了解" disabled></el-checkbox> |
|||
<el-checkbox label="不满意" disabled></el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col :span="2.5" >不满意原因：</el-col> |
|||
<el-col :span="4"><el-input size="small" disabled/></el-col> |
|||
</el-row> |
|||
<el-row type="flex" class="f-m-top29" > |
|||
<el-col :span="2"> |
|||
病有所医： |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox label="满意" disabled></el-checkbox> |
|||
<el-checkbox label="基本满意" disabled></el-checkbox> |
|||
<el-checkbox label="不了解" disabled></el-checkbox> |
|||
<el-checkbox label="不满意" disabled></el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col :span="2.5" >不满意原因：</el-col> |
|||
<el-col :span="4"><el-input size="small" disabled/></el-col> |
|||
</el-row> |
|||
<el-row type="flex" class="f-m-top29" > |
|||
<el-col :span="2"> |
|||
病有所医： |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox label="满意" disabled></el-checkbox> |
|||
<el-checkbox label="基本满意" disabled></el-checkbox> |
|||
<el-checkbox label="不了解" disabled></el-checkbox> |
|||
<el-checkbox label="不满意" disabled></el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col :span="2.5" >不满意原因：</el-col> |
|||
<el-col :span="4"><el-input size="small" disabled/></el-col> |
|||
</el-row> |
|||
<el-row type="flex" class="f-m-top29" > |
|||
<el-col :span="2"> |
|||
病有所医： |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox label="满意" disabled></el-checkbox> |
|||
<el-checkbox label="基本满意" disabled></el-checkbox> |
|||
<el-checkbox label="不了解" disabled></el-checkbox> |
|||
<el-checkbox label="不满意" disabled></el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col :span="2.5" >不满意原因：</el-col> |
|||
<el-col :span="4"><el-input size="small" disabled/></el-col> |
|||
</el-row> |
|||
<el-row type="flex" class="f-m-top29" > |
|||
<el-col :span="2"> |
|||
病有所医： |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox label="满意" disabled></el-checkbox> |
|||
<el-checkbox label="基本满意" disabled></el-checkbox> |
|||
<el-checkbox label="不了解" disabled></el-checkbox> |
|||
<el-checkbox label="不满意" disabled></el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col :span="2.5" >不满意原因：</el-col> |
|||
<el-col :span="4"><el-input size="small" disabled/></el-col> |
|||
</el-row> |
|||
<el-row type="flex" class="f-m-top29" > |
|||
<el-col :span="2"> |
|||
病有所医： |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox label="满意" disabled></el-checkbox> |
|||
<el-checkbox label="基本满意" disabled></el-checkbox> |
|||
<el-checkbox label="不了解" disabled></el-checkbox> |
|||
<el-checkbox label="不满意" disabled></el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col :span="2.5" >不满意原因：</el-col> |
|||
<el-col :span="4"><el-input size="small" disabled/></el-col> |
|||
</el-row> |
|||
<el-row type="flex" class="f-m-top29" > |
|||
<el-col :span="2"> |
|||
病有所医： |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox label="满意" disabled></el-checkbox> |
|||
<el-checkbox label="基本满意" disabled></el-checkbox> |
|||
<el-checkbox label="不了解" disabled></el-checkbox> |
|||
<el-checkbox label="不满意" disabled></el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col :span="2.5" >不满意原因：</el-col> |
|||
<el-col :span="4"><el-input size="small" disabled/></el-col> |
|||
</el-row> |
|||
<el-row class="f-right16"> |
|||
<el-col :span="24" align="right"> |
|||
<el-button >取消</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
resiDetailObj:{ |
|||
reporterName:'张三', |
|||
reporterMobile:'123456789', |
|||
resideDurationName:'一年' |
|||
}, |
|||
checkList:['满意'] |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() {}, |
|||
//方法 |
|||
methods: {}, |
|||
//子组件注册 |
|||
components:{}, |
|||
//计算 |
|||
computed:{}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
.g-main{ |
|||
padding: 20px 0px 0px 40px; |
|||
} |
|||
.f-m-top29 { |
|||
margin-top: 29px; |
|||
} |
|||
.f-left8 { |
|||
margin-left: 8px; |
|||
} |
|||
.f-font-color { |
|||
color: #000; |
|||
font-weight: 400; |
|||
} |
|||
.el-row { |
|||
margin-left: 20px; |
|||
align-items: center; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,169 @@ |
|||
<template> |
|||
<div style="margin-top:10px"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'"> |
|||
<el-form-item label="不满意类目" prop="startTime"> |
|||
<el-select v-model="formData.satisfactionCategory" placeholder="请输入" size="small" |
|||
class="u-item-width-normal" clearable> |
|||
<el-option v-for="item in dicts.satisfaction_category" :key="item.value" :label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="不满意等级" prop="startTime"> |
|||
<el-select v-model="formData.satisfactionLevel" placeholder="请输入" size="small" class="u-item-width-normal" |
|||
clearable> |
|||
<el-option v-for="item in dicts.satisfaction_level" :key="item.value" :label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-table class="m-table-item" :data="tableData" style="width: 100%"> |
|||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column> |
|||
<el-table-column label="填写时间" prop="createdTime" header-align="center" align="center" type="index" |
|||
width="100"></el-table-column> |
|||
<el-table-column label="姓名" prop="reporterName" header-align="center" align="center" type="index" |
|||
width="50"></el-table-column> |
|||
<el-table-column label="联系电话" prop="reporterMobile" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column label="回访方式" prop="followUpWay" header-align="center" align="center" type="index" |
|||
width="100"></el-table-column> |
|||
<el-table-column label="文化设施" prop="evaCulturalFacility" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column label="体育设施" prop="evaSportsFacility" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column label="生态环境" prop="evaEcologicalEnv" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column label="社会治安" prop="evaSocialSecurity" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column label="社会救助" prop="evaSocialAssistance" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column label="老有所养" prop="evaOldPeopleProvid" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column label="基础教育" prop="evaBasicEducation" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column label="病有所医" prop="evaMedical" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column label="回访状态" prop="followUpStatus" header-align="center" align="center" type="index" |
|||
width="80"></el-table-column> |
|||
<el-table-column fixed="right" label="操作" align="center" width="220"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleDetail(scope.row)" type="text" size="small">查看</el-button> |
|||
<el-button @click="handleEdit(scope.row)" type="text" size="small">回访记录</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total" |
|||
:total="total"></el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
formData: { |
|||
inspRecordId: '', |
|||
satisfactionCategory: '', |
|||
satisfactionLevel: '' |
|||
}, |
|||
pageNo: 1, |
|||
pageSize: 20, |
|||
total: 0, |
|||
tableData: [], |
|||
dicts: { |
|||
satisfaction_category: [], |
|||
satisfaction_level: [] |
|||
} |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() {}, |
|||
async mounted() { |
|||
await this.getDicts() |
|||
await this.getTableData() |
|||
if (this.satisfactionCategoryStr) { |
|||
this.formData.satisfactionCategory = this.satisfactionCategoryStr |
|||
} |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
async getDicts() { |
|||
try { |
|||
const requests = [ |
|||
this.$http.post("sys/dict/data/dictlist", { |
|||
dictType: "satisfaction_category", |
|||
}), |
|||
|
|||
this.$http.post("sys/dict/data/dictlist", { |
|||
dictType: "satisfaction_level", |
|||
}), |
|||
]; |
|||
const dictKeys = ['satisfaction_category', 'satisfaction_level']; // 对应的键名 |
|||
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); |
|||
} |
|||
}, |
|||
handleSizeChange(val) { |
|||
console.log(`每页 ${val} 条`); |
|||
this.pageSize = val; |
|||
this.getTableData(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
console.log(`当前页: ${val}`); |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
async getTableData() { |
|||
try { |
|||
let params = { |
|||
...this.formData, |
|||
pageNo: this.currentPage, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
let url = '/governance/satisfaction/communitySelfInsp/inspResult/list' |
|||
const { data, code, msg } = await requestGet(url, params) |
|||
if (code == 0) { |
|||
this.tableData = data.data; |
|||
this.total = data.total; |
|||
} else { |
|||
console.log(err); |
|||
} |
|||
} catch (err) { |
|||
console.log(err); |
|||
} |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
props: { |
|||
satisfactionCategoryStr: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
period:{ |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss"></style> |
|||
@ -0,0 +1,416 @@ |
|||
|
|||
<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> |
|||
<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> |
|||
<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" :period="period"></form-list> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost,requestGet } from "@/js/dai/request"; |
|||
import { mapGetters } from "vuex"; |
|||
import axios from "axios"; |
|||
import * as echarts from 'echarts' |
|||
import formList from "./formList"; |
|||
|
|||
export default { |
|||
components: { formList }, |
|||
|
|||
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: 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: [], |
|||
|
|||
}; |
|||
}, |
|||
|
|||
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); |
|||
} |
|||
}, |
|||
|
|||
|
|||
// ------------------------------------事件------------------------------------------ |
|||
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.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> |
|||
|
|||
|
|||
Loading…
Reference in new issue