515 lines
11 KiB
Vue
515 lines
11 KiB
Vue
<template>
|
|
<div class="OtherStatistics">
|
|
<div class="form-item__group">
|
|
<div class="group_title">基本信息</div>
|
|
<div class="form-item">
|
|
<div class="form-item__wrapper">
|
|
<div class="form-item__title">
|
|
<span class="label">姓名</span>
|
|
</div>
|
|
<div class="form-item__right"><AiOpenData v-if="wxUserId" type="userName" :openid="wxUserId" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="time-content">
|
|
<div class="title">上报记录<span>({{month}}月)</span></div>
|
|
<div class="time">
|
|
<div class="week-list">
|
|
<span v-for="(item, index) in weekList" :key="index">{{item}}</span>
|
|
</div>
|
|
<div class="day-list">
|
|
<div v-for="(item, index) in dayList" :key="index" class="item" :class="selectDay == item.day ? 'active' : ''" @click="dayClick(item)">
|
|
<div class="num">{{item.day}}</div>
|
|
<span class="status" :class="'bg-'+item.status" v-if="item.day"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-item__group" v-if="healthInfo.id">
|
|
<div class="group_title">健康状况</div>
|
|
<div class="form-item">
|
|
<div class="form-item__wrapper">
|
|
<div class="form-item__title">
|
|
<span class="label">当前体温</span>
|
|
</div>
|
|
<div class="form-item__right" :style="healthInfo.temperature >= 37.3 ? 'color:#f46;' : ''">{{healthInfo.temperature}}℃</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-item">
|
|
<div class="form-item__wrapper">
|
|
<div class="form-item__title">
|
|
<span class="label" style="width:190px;">14天内是否接触新冠确诊或疑似患者</span>
|
|
</div>
|
|
<div class="form-item__right">
|
|
<div class="value" :class="'color-'+healthInfo.touchInFourteen">{{$dict.getLabel('epidemicTouchInFourteen', healthInfo.touchInFourteen)}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-item">
|
|
<div class="form-item__wrapper">
|
|
<div class="form-item__title">
|
|
<span class="label">当前健康状况</span>
|
|
</div>
|
|
<div class="form-item__right">
|
|
<span>
|
|
<span v-for="(item, index) in healthInfo.health" :key="index" :style="item != 0 ? 'color:#FF4466;' : ''"><span v-if="index>0" :style="item != 0 ? 'color:#FF4466;' : ''">;</span>{{$dict.getLabel('epidemicRecentHealth', item)}}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="pad-b112"></div>
|
|
<div class="add-btn" @click="back">
|
|
<div>查看其他成员</div>
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'OtherStatistics',
|
|
data() {
|
|
return {
|
|
weekList: ['一', '二', '三', '四', '五', '六', '日'],
|
|
dayList: [],
|
|
month: '',
|
|
selectDay: '',
|
|
healthInfo: {},
|
|
userId: '',
|
|
wxUserId: ''
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
onLoad(option) {
|
|
this.userId = option.id
|
|
this.wxUserId = option.wxUserId
|
|
var date = new Date();
|
|
this.selectDay = date.getDate()
|
|
this.month = date.getMonth() + 1
|
|
this.$dict.load('epidemicTouchInFourteen', 'epidemicRecentHealth').then(() => {
|
|
this.getStatis()
|
|
})
|
|
},
|
|
onShow() {
|
|
document.title = '健康上报'
|
|
},
|
|
methods: {
|
|
dayClick(item) {
|
|
this.healthInfo = {}
|
|
this.selectDay = item.day
|
|
if(!item.id) {
|
|
return this.$u.toast("当日未上报");
|
|
}
|
|
this.$http.post(`/app/appepidemichealthreport/queryDetailById?id=${item.id}`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.healthInfo = res.data
|
|
this.healthInfo.health = res.data.health.split(',')
|
|
}
|
|
})
|
|
},
|
|
getStatis() {
|
|
this.dayList = []
|
|
this.$http.post(`/app/appepidemichealthreport/statistic?userId=${this.userId}`).then((res) => {
|
|
if (res.code == 0) {
|
|
Object.keys(res.data).forEach((key) => {
|
|
var info = {
|
|
week: res.data[key].week,
|
|
day: key,
|
|
status: res.data[key].status || '2',
|
|
id: res.data[key].id || '',
|
|
}
|
|
this.dayList.push(info)
|
|
})
|
|
var week = Number(this.dayList[0].week) - 1
|
|
if(week > 0) {
|
|
for(var i= 0; i<week; i++){
|
|
var info = {
|
|
id: '',
|
|
}
|
|
this.dayList.unshift(info)
|
|
}
|
|
}
|
|
this.dayList.map((item) => {
|
|
if(item.day == this.selectDay && item.id) {
|
|
this.dayClick(item)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
back() {
|
|
uni.navigateBack()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
uni-page-body {
|
|
height: 100%;
|
|
}
|
|
.OtherStatistics {
|
|
|
|
.emptyWrap {
|
|
background: #f5f5f5;
|
|
margin: 0;
|
|
}
|
|
::v-deep .emptyText{
|
|
text-align: center;
|
|
}
|
|
.add-btn{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: 112px;
|
|
line-height: 112px;
|
|
background: #3975C6;
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFF;
|
|
div{
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
::v-deep .u-tab-bar{
|
|
bottom: 14px;
|
|
}
|
|
|
|
.form-item__group {
|
|
margin-bottom: 24px;
|
|
background: #fff;
|
|
}
|
|
|
|
.form-item {
|
|
padding-left: 32px;
|
|
|
|
.form-item__checkbox {
|
|
width: 100%;
|
|
div {
|
|
width: 100%;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
color: #333333;
|
|
font-size: 28px;
|
|
border: 1px solid #cccccc;
|
|
|
|
&.active {
|
|
background: #4181ff;
|
|
color: #fff;
|
|
border-color: #4181ff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-item__radio {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
div {
|
|
width: 212px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
margin-right: 16px;
|
|
margin-bottom: 8px;
|
|
text-align: center;
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
color: #333333;
|
|
font-size: 28px;
|
|
border: 1px solid #cccccc;
|
|
|
|
&:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.active {
|
|
background: #4181ff;
|
|
color: #fff;
|
|
border-color: #4181ff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ai-area__wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 100px;
|
|
|
|
span {
|
|
color: #333;
|
|
font-size: 30px;
|
|
}
|
|
|
|
i {
|
|
color: #999;
|
|
font-size: 30px;
|
|
}
|
|
|
|
image {
|
|
width: 16px;
|
|
height: 8px;
|
|
}
|
|
}
|
|
|
|
.form-item__wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 40px 28px 40px 0;
|
|
border-bottom: 1px solid #dddddd;
|
|
|
|
input {
|
|
flex: 1;
|
|
height: 100%;
|
|
text-align: right;
|
|
color: #333;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.form-item__right {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32px;
|
|
|
|
.select {
|
|
._i {
|
|
padding-left: 100px;
|
|
}
|
|
}
|
|
|
|
span {
|
|
max-width: 400px;
|
|
margin-right: 8px;
|
|
color: #333333;
|
|
word-break: break-all;
|
|
}
|
|
|
|
i {
|
|
margin-right: 8px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
.form-item__wrapper {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.form-item__title {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
i {
|
|
font-size: 32px;
|
|
color: #ff4466;
|
|
}
|
|
|
|
span {
|
|
font-size: 28px;
|
|
color: #999999;
|
|
}
|
|
|
|
h2 {
|
|
padding: 0 4px;
|
|
font-weight: 600;
|
|
font-size: 32px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
&.form-item__imgs,
|
|
&.form-item__textarea {
|
|
.form-item__wrapper {
|
|
display: block;
|
|
height: auto;
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: 90px;
|
|
}
|
|
|
|
.form-item__title {
|
|
padding: 32px 0;
|
|
}
|
|
|
|
.form-item__right {
|
|
padding-left: 18px;
|
|
}
|
|
}
|
|
}
|
|
.btn-wrapper {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 0;
|
|
z-index: 11;
|
|
width: 100%;
|
|
padding: 20px 0 20px 0 !important;
|
|
transform: translateX(-50%);
|
|
background: #f3f6f9;
|
|
}
|
|
|
|
.btn-wrapper .btn {
|
|
width: 686px;
|
|
height: 88px;
|
|
line-height: 88px;
|
|
margin: 0 auto;
|
|
padding: 0 !important;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 34px;
|
|
background: #4181FF;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.btn-wrapper .disabled {
|
|
color: #B9E7D0;
|
|
background: #50C48A;
|
|
}
|
|
|
|
::v-deep .AiTopFixed {
|
|
.placeholder {
|
|
.content {
|
|
padding: 0 !important;
|
|
|
|
}
|
|
}
|
|
.fixed {
|
|
margin: 0 !important;
|
|
background-color: #f5f5f5!important;
|
|
.content {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.label{
|
|
width: 280px;
|
|
font-size: 32px!important;
|
|
}
|
|
.group_title{
|
|
height: 116px;
|
|
line-height: 116px;
|
|
background: #FFF;
|
|
padding-left: 32px;
|
|
font-size: 38px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
.time-content{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
.title{
|
|
line-height: 96px;
|
|
padding-left: 32px;
|
|
font-size: 36px;
|
|
font-family: PingFang-SC-Bold, PingFang-SC;
|
|
font-weight: bold;
|
|
color: #333;
|
|
span{
|
|
display: inline-block;
|
|
width: 100px;
|
|
text-align: center;
|
|
font-size: 26px;
|
|
font-family: PingFang-SC-Heavy, PingFang-SC;
|
|
color: #666;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.time{
|
|
padding: 0 32px 32px;
|
|
background-color: #fff;
|
|
margin-bottom: 24px;
|
|
.week-list{
|
|
span{
|
|
display: inline-block;
|
|
width: 98px;
|
|
text-align: center;
|
|
padding: 32px 0;
|
|
font-size: 20px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #999;
|
|
}
|
|
}
|
|
.day-list{
|
|
.item{
|
|
display: inline-block;
|
|
width: 98px;
|
|
height: 98px;
|
|
text-align: center;
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
position: relative;
|
|
.num{
|
|
width: 80px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
.status{
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
top: 60px;
|
|
left: 50%;
|
|
margin-left: -4px;
|
|
}
|
|
.bg-2{
|
|
background: #999;
|
|
}
|
|
.bg-1{
|
|
background: #3B87F6;
|
|
}
|
|
.bg-0{
|
|
background: #f46;
|
|
}
|
|
}
|
|
.active{
|
|
.num{
|
|
background: #3B87F6;
|
|
color: #fff;
|
|
}
|
|
.status{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pad-b112{
|
|
padding-bottom: 112px;
|
|
}
|
|
.color-0{
|
|
color: #42D784;
|
|
}
|
|
.color-1{
|
|
color: #f46;
|
|
}
|
|
.color-2{
|
|
color: #1365DD;
|
|
}
|
|
}
|
|
</style> |