统计
This commit is contained in:
shidongli
parent
4cf83f27e0
commit
60cba31984
458
src/views/system/TaskStatistics/index.vue
Normal file
458
src/views/system/TaskStatistics/index.vue
Normal file
@ -0,0 +1,458 @@
|
||||
<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>
|
||||
1137
src/views/system/datialdata/index.vue
Normal file
1137
src/views/system/datialdata/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user