458 lines
12 KiB
Vue
458 lines
12 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"
|
|||
|
|
label-width="120px"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="任务时间" prop="startTime">
|
|||
|
|
<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="patientPhone">
|
|||
|
|
<el-input
|
|||
|
|
v-model="queryParams.patientPhone"
|
|||
|
|
placeholder="请输入模板名称"
|
|||
|
|
clearable
|
|||
|
|
@keyup.enter.native="handleQuery"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="出院/就诊时间" prop="startTime">
|
|||
|
|
<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>
|
|||
|
|
<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 class="title">{{ item.name }}</div>
|
|||
|
|
<div class="times">时间:{{ item.date }}</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 class="right">
|
|||
|
|
<div class="righttitle">{{newname}} {{time}} </div>
|
|||
|
|
<div class="tabledata">
|
|||
|
|
<div class="toptitle">第1题:请问您吸烟吗?【单选题】</div>
|
|||
|
|
<div ref="table" class="tables">
|
|||
|
|
<el-table
|
|||
|
|
:max-height="maxTableHeight"
|
|||
|
|
v-loading="loading"
|
|||
|
|
:data="tableData"
|
|||
|
|
>
|
|||
|
|
<el-table-column label="选项" align="center" prop="name" />
|
|||
|
|
<el-table-column label="人数" align="center" prop="date" />
|
|||
|
|
<el-table-column label="比例" align="center" prop="date">
|
|||
|
|
<span> <el-progress :percentage="50"></el-progress></span>
|
|||
|
|
</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 class="tabledata">
|
|||
|
|
<div class="toptitle">第1题:请问您吸烟吗?【单选题】</div>
|
|||
|
|
<div ref="table" class="tables">
|
|||
|
|
<el-table
|
|||
|
|
:max-height="maxTableHeight"
|
|||
|
|
v-loading="loading"
|
|||
|
|
:data="tableData"
|
|||
|
|
>
|
|||
|
|
<el-table-column label="选项" align="center" prop="name" />
|
|||
|
|
<el-table-column label="人数" align="center" prop="date" />
|
|||
|
|
<el-table-column label="比例" align="center" prop="date">
|
|||
|
|
<span> <el-progress :percentage="50"></el-progress></span>
|
|||
|
|
</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 class="tabledata">
|
|||
|
|
<div class="toptitle">第1题:请问您吸烟吗?【单选题】</div>
|
|||
|
|
<div ref="table" class="tables">
|
|||
|
|
<el-table
|
|||
|
|
:max-height="maxTableHeight"
|
|||
|
|
v-loading="loading"
|
|||
|
|
:data="tableData"
|
|||
|
|
>
|
|||
|
|
<el-table-column label="选项" align="center" prop="name" />
|
|||
|
|
<el-table-column label="人数" align="center" prop="date" />
|
|||
|
|
<el-table-column label="比例" align="center" prop="date">
|
|||
|
|
<span> <el-progress :percentage="50"></el-progress></span>
|
|||
|
|
</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>
|
|||
|
|
export default {
|
|||
|
|
name: "TaskStatistics",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
maxTableHeight: undefined,
|
|||
|
|
// 任务时间
|
|||
|
|
dischargeTime: [],
|
|||
|
|
loading: false,
|
|||
|
|
newname:'',//标题
|
|||
|
|
time:'',//时间
|
|||
|
|
NameList: [
|
|||
|
|
{
|
|||
|
|
name: '预估病情',
|
|||
|
|
date: '2016-05-02',
|
|||
|
|
totle: 6,
|
|||
|
|
id: 1,
|
|||
|
|
}, {
|
|||
|
|
name: '烟草依赖评估量表',
|
|||
|
|
date: '2016-05-02',
|
|||
|
|
totle: 7,
|
|||
|
|
id: 2,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '疾病恢复情况随访问卷',
|
|||
|
|
|
|||
|
|
date: '2016-05-02',
|
|||
|
|
totle: 8,
|
|||
|
|
id: 3,
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
// 列表、
|
|||
|
|
tableData: [{
|
|||
|
|
date: '2016-05-02',
|
|||
|
|
name: '王小虎',
|
|||
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|||
|
|
}, {
|
|||
|
|
date: '2016-05-04',
|
|||
|
|
name: '王小虎',
|
|||
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
|||
|
|
}, {
|
|||
|
|
date: '2016-05-01',
|
|||
|
|
name: '王小虎',
|
|||
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
|||
|
|
}, {
|
|||
|
|
date: '2016-05-03',
|
|||
|
|
name: '王小虎',
|
|||
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
|||
|
|
}],
|
|||
|
|
itemid: "",
|
|||
|
|
id: 1,
|
|||
|
|
queryParams: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getMaxTableHeight()
|
|||
|
|
this.screenChange()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 查看
|
|||
|
|
handleUpdate(row) {
|
|||
|
|
this.$router.push({
|
|||
|
|
path: "/statisticalAnalysis/datialdata",
|
|||
|
|
query: {
|
|||
|
|
path: "/statisticalAnalysis/TaskStatistics",
|
|||
|
|
// sn: 11111,
|
|||
|
|
// patientName: row.patientName ? row.patientName : '',
|
|||
|
|
// departmentId: row.departmentId ? row.departmentId : '',
|
|||
|
|
// departmentName: row.departmentName ? row.departmentName : '',
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 左侧点击
|
|||
|
|
itemdata(item) {
|
|||
|
|
console.log(item, '9999')
|
|||
|
|
this.itemid = item.id
|
|||
|
|
this.newname=item.name
|
|||
|
|
this.time=item.date
|
|||
|
|
},
|
|||
|
|
resetQuery() { },
|
|||
|
|
handleQuery() { },
|
|||
|
|
changeTime() { },
|
|||
|
|
// 获取表格最高高度
|
|||
|
|
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">
|
|||
|
|
::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: 98%;
|
|||
|
|
margin: 10px auto;
|
|||
|
|
padding: 13px 0 0 0;
|
|||
|
|
background-color: #fff !important;
|
|||
|
|
}
|
|||
|
|
.bottomsstics {
|
|||
|
|
width: 98%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
.left {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 18%;
|
|||
|
|
background: #fff;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
.allactive {
|
|||
|
|
width: 100%;
|
|||
|
|
background: #e8f4ff;
|
|||
|
|
}
|
|||
|
|
.all {
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
height: 170px;
|
|||
|
|
border-bottom: 1px solid #dcdfe6;
|
|||
|
|
}
|
|||
|
|
.itemlist {
|
|||
|
|
// width: 94%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
height: 170px;
|
|||
|
|
border-bottom: 1px solid #dcdfe6;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 19px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: black;
|
|||
|
|
padding: 20px 0 10px 30px;
|
|||
|
|
}
|
|||
|
|
.times {
|
|||
|
|
padding: 0px 0 10px 30px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #aaacb2;
|
|||
|
|
}
|
|||
|
|
.progress {
|
|||
|
|
// width: 70%;
|
|||
|
|
padding: 0px 0 10px 30px;
|
|||
|
|
}
|
|||
|
|
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 {
|
|||
|
|
.tables {
|
|||
|
|
margin: 0 auto;
|
|||
|
|
width: 97%;
|
|||
|
|
}
|
|||
|
|
.toptitle {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: black;
|
|||
|
|
padding: 20px 0 15px 30px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
blockquote {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
margin: 0 0 20px;
|
|||
|
|
font-size: 17.5px;
|
|||
|
|
border-left: 5px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
hr {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border: 0;
|
|||
|
|
border-top: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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>
|