588 lines
16 KiB
Vue
588 lines
16 KiB
Vue
<template>
|
||
<div class="app-container home" ref="layout">
|
||
<!-- 搜索条件 -->
|
||
<div ref="topform" class="form">
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
|
||
<el-form-item label="任务时间" prop="taskStartTime" label-width="90px">
|
||
<el-date-picker
|
||
v-model="dischargeTime"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
style="width: 220px"
|
||
value-format="yyyy-MM-dd"
|
||
end-placeholder="结束日期"
|
||
@change="changeTime"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="模板名称" prop="questionInfoId">
|
||
<span>
|
||
<TemplateName
|
||
@on-template="messageontemplateword"
|
||
:templateId="questionInfoId"
|
||
:query="questionInfoIdname"
|
||
></TemplateName>
|
||
</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item
|
||
label="出院/就诊时间"
|
||
prop="visitStartTime"
|
||
label-width="120px"
|
||
>
|
||
<el-date-picker
|
||
v-model="dischargeTimevisit"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
style="width: 220px"
|
||
value-format="yyyy-MM-dd"
|
||
end-placeholder="结束日期"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
size="mini"
|
||
@click="handleQuery"
|
||
>搜索</el-button
|
||
>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||
>重置</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!-- 底部 -->
|
||
<div
|
||
ref="table"
|
||
:style="{ 'max-height': maxTableHeight + 'px' }"
|
||
class="bottomsstics"
|
||
>
|
||
<!-- 左侧 -->
|
||
<div class="left">
|
||
<!-- <div> -->
|
||
<div
|
||
v-for="(item, index) in NameList"
|
||
:key="index"
|
||
class="itemlist"
|
||
:class="itemid == item.id ? 'allactive' : 'all'"
|
||
@click="itemdata(item)"
|
||
>
|
||
<div
|
||
style="width: 88%; margin: 0 auto; border-bottom: 1px solid #dcdfe6"
|
||
>
|
||
<!-- <el-popover
|
||
placement="top"
|
||
trigger="hover"
|
||
:content="item.questionnaireName"
|
||
>
|
||
<div class="title" slot="reference">
|
||
{{ item.questionnaireName }}
|
||
</div>
|
||
</el-popover> -->
|
||
<div class="title" slot="reference">
|
||
{{ item.questionnaireName }}
|
||
</div>
|
||
|
||
<div class="progress">时间：{{parseTime(item.createTime, "{y}-{m}-{d}")}}
|
||
</div>
|
||
<!-- <div class="times">填写率:{{ item.totle }}%</div>
|
||
<div class="progress">
|
||
<el-progress :percentage="50" :show-text="false"></el-progress>
|
||
<span>12/45</span>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- </div> -->
|
||
</div>
|
||
<!-- 右侧 -->
|
||
<div class="right">
|
||
|
||
<div class="righttitle">{{ newname }} {{parseTime(time, "{y}-{m}-{d}")}}</div>
|
||
<div class="tabledata" v-for="(item, index) in tableData" :key="index">
|
||
<div class="toptitle">
|
||
第{{ index + 1 }}题：{{ item.questionName }}
|
||
|
||
<span v-if="item.questionType == 'MULTIPLE_CHOICE'"
|
||
>【单选题】</span
|
||
>
|
||
<span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'"
|
||
>【多选题】</span
|
||
>
|
||
<span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'"
|
||
>【组合单选题】</span
|
||
>
|
||
<span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'"
|
||
>【组合多选题】</span
|
||
>
|
||
</div>
|
||
<div ref="table" class="tables">
|
||
<el-table
|
||
:max-height="maxTableHeight"
|
||
v-loading="loading"
|
||
:data="item.questionnaireTaskOptionStatisticsVos"
|
||
>
|
||
<el-table-column label="选项" align="center" prop="optionName" />
|
||
<el-table-column
|
||
label="人数"
|
||
align="center"
|
||
prop="choiceNumber"
|
||
/>
|
||
<el-table-column
|
||
label="比例"
|
||
align="center"
|
||
prop="choiceProportion"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-progress
|
||
:percentage="
|
||
scope.row.choiceProportion
|
||
? scope.row.choiceProportion
|
||
: 0
|
||
"
|
||
></el-progress>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="操作"
|
||
align="center"
|
||
class-name="small-padding fixed-width"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="handleUpdate(scope.row)"
|
||
>查看</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { questionnaireTaskStatistics, selectQuestionInfoList } from '@/api/system/TaskStatistics'
|
||
import TemplateName from "@/views/manage/components/TemplateName";
|
||
|
||
export default {
|
||
name: "TaskStatistics",
|
||
components: { TemplateName },
|
||
data() {
|
||
return {
|
||
|
||
show: false,
|
||
maxTableHeight: undefined,
|
||
// 任务时间
|
||
dischargeTime: [],
|
||
// 出院/就诊时间
|
||
dischargeTimevisit: [],
|
||
loading: false,
|
||
newname: '',//标题
|
||
time: '',//时间
|
||
NameList: [],
|
||
// 列表、
|
||
tableData: [],
|
||
itemid: "",
|
||
questionInfoId: '',
|
||
questionInfoIdname: 0,
|
||
queryParams: {
|
||
taskStartTime: null,
|
||
taskEndTime: null,
|
||
visitStartTime: null,
|
||
visitEndTime: null,
|
||
questionInfoId: null,
|
||
},
|
||
}
|
||
},
|
||
watch: {
|
||
dischargeTime: {
|
||
handler(val) {
|
||
if (val) {
|
||
this.queryParams.taskStartTime = this.dischargeTime[0];
|
||
this.queryParams.taskEndTime = this.dischargeTime[1];
|
||
|
||
}else{
|
||
this.dischargeTime = []
|
||
this.queryParams.taskStartTime = null
|
||
this.queryParams.taskEndTime = null
|
||
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
dischargeTimevisit: {
|
||
handler(val) {
|
||
if (val) {
|
||
this.queryParams.visitStartTime = this.dischargeTimevisit[0];
|
||
this.queryParams.visitEndTime = this.dischargeTimevisit[1];
|
||
|
||
}else{
|
||
this.dischargeTimevisit = []
|
||
this.queryParams.visitStartTime = null
|
||
this.queryParams.visitEndTime = null
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
}
|
||
},
|
||
created() {
|
||
this.getDefaultDateRange()
|
||
this.getlistleft()
|
||
},
|
||
mounted() {
|
||
this.getMaxTableHeight()
|
||
this.screenChange()
|
||
|
||
},
|
||
methods: {
|
||
hidePopover() {
|
||
this.showPopover = false;
|
||
},
|
||
// 右侧列表
|
||
getlist() {
|
||
questionnaireTaskStatistics(this.queryParams).then(res => {
|
||
this.tableData = res.data.data
|
||
})
|
||
},
|
||
// 左侧列表
|
||
getlistleft() {
|
||
selectQuestionInfoList().then(res => {
|
||
this.NameList = res
|
||
this.queryParams.questionInfoId = this.NameList[0].id
|
||
this.itemid = this.NameList[0].id
|
||
this.newname = this.NameList[0].questionnaireName
|
||
this.time = this.NameList[0].createTime
|
||
this.getlist()
|
||
})
|
||
|
||
},
|
||
changeTime(e) {
|
||
this.show = false;
|
||
},
|
||
//模版名称
|
||
messageontemplateword(item) {
|
||
this.queryParams.questionInfoId = item.questionInfoId;
|
||
this.itemid = item.questionInfoId
|
||
this.newname = item.questionnaireName
|
||
this.time = item.createTime
|
||
this.getlist()
|
||
// this.tableData=[]
|
||
},
|
||
//计算一周的时间
|
||
getDefaultDateRange() {
|
||
this.show = true;
|
||
const endDate = new Date(); // 今天的日期
|
||
const startDate = new Date();
|
||
startDate.setDate(endDate.getDate() - 6); // 往前倒退七天
|
||
console.log(startDate, endDate);
|
||
this.dischargeTime[0] = startDate;
|
||
this.dischargeTime[1] = endDate;
|
||
if(this.dischargeTime[0]){
|
||
this.queryParams.taskStartTime = this.formatDate(this.dischargeTime[0]);
|
||
}
|
||
if(this.dischargeTime[1]){
|
||
this.queryParams.taskEndTime = this.formatDate(this.dischargeTime[1]);
|
||
|
||
|
||
}
|
||
},
|
||
formatDate(date) {
|
||
if(date){
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
|
||
}
|
||
|
||
},
|
||
// 查看
|
||
handleUpdate(row) {
|
||
this.$router.push({
|
||
path: "/statisticalAnalysis/datialdata",
|
||
query: {
|
||
path: "/statisticalAnalysis/TaskStatistics",
|
||
questionInfoId: row.questionInfoId ? row.questionInfoId : '',
|
||
questionSubjectOptionId: row.questionSubjectOptionId ? row.questionSubjectOptionId : '',
|
||
optionChooseSign: row.optionChooseSign ? row.optionChooseSign : '',
|
||
|
||
},
|
||
});
|
||
|
||
},
|
||
// 左侧点击
|
||
itemdata(item) {
|
||
this.itemid = item.id
|
||
this.newname = item.questionnaireName
|
||
this.time = item.createTime
|
||
this.queryParams.questionInfoId = item.id
|
||
// this.getlist()
|
||
this.queryParams.questionInfoId = null
|
||
this.questionInfoId = null
|
||
this.questionInfoIdname += 1;
|
||
var obj = {
|
||
questionInfoId: item.id,
|
||
taskStartTime: this.queryParams.taskStartTime,
|
||
taskEndTime: this.queryParams.taskEndTime,
|
||
visitStartTime: this.queryParams.visitStartTime,
|
||
visitEndTime: this.queryParams.visitEndTime,
|
||
}
|
||
questionnaireTaskStatistics(obj).then(res => {
|
||
this.tableData = res.data.data
|
||
})
|
||
},
|
||
// 重置
|
||
resetQuery() {
|
||
this.queryParams.questionInfoId = null,
|
||
this.questionInfoId = null,
|
||
this.dischargeTime = [];
|
||
this.dischargeTimevisit = [];
|
||
this.queryParams.taskStartTime = "";
|
||
this.queryParams.taskEndTime = "";
|
||
this.resetForm("queryForm");
|
||
this.questionInfoIdname += 1;
|
||
console.log(this.queryParams, 'queryParams0000000000');
|
||
this.getlistleft();
|
||
},
|
||
// 搜索
|
||
handleQuery() {
|
||
if(!this.queryParams.taskStartTime && !this.queryParams.taskEndTime &&
|
||
!this.queryParams.questionInfoId && !this.queryParams.visitStartTime &&
|
||
!this.queryParams.visitStartTime
|
||
){
|
||
this.itemid=null
|
||
this.newname=''//标题
|
||
this.time= ''//时间
|
||
|
||
}
|
||
if (this.dischargeTime?.length > 0) {
|
||
if (this.show == true) {
|
||
this.queryParams.taskStartTime = this.formatDate(this.dischargeTime[0]);
|
||
this.queryParams.taskEndTime = this.formatDate(this.dischargeTime[1]);
|
||
|
||
} else if (this.show == false) {
|
||
this.queryParams.taskStartTime = this.dischargeTime[0];
|
||
this.queryParams.taskEndTime = this.dischargeTime[1];
|
||
|
||
}
|
||
|
||
}
|
||
else {
|
||
this.queryParams.taskStartTime = null;
|
||
this.queryParams.taskEndTime = null;
|
||
}
|
||
if (this.dischargeTimevisit?.length > 0) {
|
||
this.queryParams.visitStartTime = this.dischargeTimevisit[0];
|
||
this.queryParams.visitEndTime = this.dischargeTimevisit[1];
|
||
} else {
|
||
this.queryParams.visitStartTime = null;
|
||
this.queryParams.visitEndTime = null;
|
||
|
||
}
|
||
this.getlist();
|
||
},
|
||
// 获取表格最高高度
|
||
getMaxTableHeight() {
|
||
const windowInnerHeight = window.innerHeight // 屏幕可视高度
|
||
const formDiv = this.$refs.topform
|
||
this.maxTableHeight = windowInnerHeight - 104 - this.getBoxHeight(formDiv)
|
||
},
|
||
// 屏幕resize监听
|
||
screenChange() {
|
||
// 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
|
||
window.addEventListener('resize', this.getMaxTableHeight, true)
|
||
// 将屏幕监听事件移除
|
||
// 这步是必须的。离开页面时不移除，再返回，或者进入到别的有相同元素的页面会报错
|
||
// 或者将这里的方法直接写在beforeDestroy函数中也可以
|
||
this.$once('hook:beforeDestroy', () => {
|
||
window.removeEventListener('resize', this.getMaxTableHeight, true)
|
||
})
|
||
},
|
||
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
::-webkit-scrollbar {
|
||
width: 13px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
border-radius: 13px;
|
||
background: #c0c0c0;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
width: 13px;
|
||
}
|
||
::v-deep .el-progress {
|
||
width: 64%;
|
||
display: inline-block;
|
||
}
|
||
.app-container {
|
||
padding: 0 !important;
|
||
}
|
||
.app-container {
|
||
background: #f1f3f5;
|
||
width: 100%;
|
||
padding: 20px 20px 20px 20px;
|
||
}
|
||
.home {
|
||
.form {
|
||
width: 99%;
|
||
margin: 10px auto;
|
||
padding: 13px 0 0 0;
|
||
background-color: #fff !important;
|
||
border-top-left-radius: 10px;
|
||
border-top-right-radius: 10px;
|
||
margin: 10px auto 5px;
|
||
}
|
||
.bottomsstics {
|
||
width: 99%;
|
||
margin: 0 auto;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
.left {
|
||
height: 100%;
|
||
width: 18%;
|
||
background: #fff;
|
||
overflow-y: auto;
|
||
// margin-left: 1%;
|
||
.allactive {
|
||
width: 100%;
|
||
background: #e8f4ff;
|
||
}
|
||
.all {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
// height: 99px;
|
||
}
|
||
.itemlist {
|
||
// width: 94%;
|
||
margin: 0 auto;
|
||
// height: 99px;
|
||
|
||
.title {
|
||
font-size: 19px;
|
||
font-weight: 600;
|
||
color: black;
|
||
// overflow: hidden;
|
||
// text-overflow: ellipsis;
|
||
// white-space: nowrap;
|
||
// padding: 8px 0 10px 0px;
|
||
padding: 23px 0 10px 0px;
|
||
text-align: left;
|
||
}
|
||
.times {
|
||
padding: 0px 0 10px 0px;
|
||
font-size: 16px;
|
||
color: #aaacb2;
|
||
}
|
||
.progress {
|
||
font-size: 16px;
|
||
color: #aaacb2;
|
||
text-align: left;
|
||
|
||
|
||
|
||
padding: 0px 0 23px 0px;
|
||
}
|
||
span {
|
||
margin-left: 17px;
|
||
color: #aaacb2;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #fff;
|
||
margin-left: 4px;
|
||
overflow-y: auto;
|
||
.righttitle {
|
||
font-size: 19px;
|
||
font-weight: 600;
|
||
color: black;
|
||
padding: 20px 0 10px 30px;
|
||
}
|
||
.tabledata {
|
||
margin-bottom: 13px;
|
||
.tables {
|
||
margin: 0 auto;
|
||
width: 97%;
|
||
}
|
||
.toptitle {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: black;
|
||
padding: 20px 0 15px 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.col-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
ul {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
font-size: 13px;
|
||
color: #676a6c;
|
||
overflow-x: hidden;
|
||
overflow-y: hidden;
|
||
|
||
ul {
|
||
list-style-type: none;
|
||
}
|
||
|
||
h4 {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
h2 {
|
||
margin-top: 10px;
|
||
font-size: 26px;
|
||
font-weight: 100;
|
||
}
|
||
|
||
p {
|
||
margin-top: 10px;
|
||
|
||
b {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.update-log {
|
||
ol {
|
||
display: block;
|
||
list-style-type: decimal;
|
||
margin-block-start: 1em;
|
||
margin-block-end: 1em;
|
||
margin-inline-start: 0;
|
||
margin-inline-end: 0;
|
||
padding-inline-start: 40px;
|
||
}
|
||
}
|
||
}
|
||
</style> |