|
|
|
|
@ -12,6 +12,7 @@ import { setMobile } from "@/store/features/userInfo";
|
|
|
|
|
import Navbar from "@/components/navbar/navbar";
|
|
|
|
|
import Echarts from "./Echarts/index";
|
|
|
|
|
import "./moisture_test_report.less";
|
|
|
|
|
import { go } from "@/utils/traoAPI";
|
|
|
|
|
|
|
|
|
|
class MoistureTestReport extends Component<any, any> {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
@ -33,13 +34,6 @@ class MoistureTestReport extends Component<any, any> {
|
|
|
|
|
rightFace: 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
bgCssData: {
|
|
|
|
|
serious: 'background: #FFE3E3',
|
|
|
|
|
moderate: 'background: #FFEBDC',
|
|
|
|
|
slight: 'background: #F6FCFF',
|
|
|
|
|
normal: 'background: #F8F8F8',
|
|
|
|
|
sufficient: 'background: #F8F8F8'
|
|
|
|
|
},
|
|
|
|
|
isClock: false,
|
|
|
|
|
xinde: '',
|
|
|
|
|
imglist: [],
|
|
|
|
|
@ -57,107 +51,141 @@ class MoistureTestReport extends Component<any, any> {
|
|
|
|
|
|
|
|
|
|
componentDidHide() { }
|
|
|
|
|
|
|
|
|
|
async onLoad() {
|
|
|
|
|
onLoad(option) {
|
|
|
|
|
let data = JSON.parse(option.data)
|
|
|
|
|
let { reportData } = this.state
|
|
|
|
|
reportData.curDate = option.date
|
|
|
|
|
data.GearData.map(item => {
|
|
|
|
|
if (item.name == '额头') {
|
|
|
|
|
reportData.shuifenLevel.head = item.forehead
|
|
|
|
|
let gear = Math.ceil((11 - reportData.shuifenLevel.head) / 2)
|
|
|
|
|
reportData.shuifenGear.head = gear
|
|
|
|
|
|
|
|
|
|
} else if (item.name == '左脸颊') {
|
|
|
|
|
reportData.shuifenLevel.leftFace = item.forehead
|
|
|
|
|
let gear = Math.ceil((11 - reportData.shuifenLevel.leftFace) / 2)
|
|
|
|
|
reportData.shuifenGear.leftFace = gear
|
|
|
|
|
} else if (item.name == '右脸颊') {
|
|
|
|
|
reportData.shuifenLevel.rightFace = item.forehead
|
|
|
|
|
let gear = Math.ceil((11 - reportData.shuifenLevel.rightFace) / 2)
|
|
|
|
|
reportData.shuifenGear.rightFace = gear
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.setState({ reportData });
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
console.log(this.state.reportData);
|
|
|
|
|
|
|
|
|
|
}, 50);
|
|
|
|
|
}
|
|
|
|
|
async initData() { }
|
|
|
|
|
toIndex() {
|
|
|
|
|
Taro.reLaunch({ url: "/pages/index/index" });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getStatusData(level) {
|
|
|
|
|
var bgCssData = {
|
|
|
|
|
serious: 'background: #FFE3E3',
|
|
|
|
|
moderate: 'background: #FFEBDC',
|
|
|
|
|
slight: 'background: #F6FCFF',
|
|
|
|
|
normal: 'background: #F8F8F8',
|
|
|
|
|
sufficient: 'background: #F8F8F8'
|
|
|
|
|
}
|
|
|
|
|
var progressBgData = {
|
|
|
|
|
serious: 'background: #FF9393',
|
|
|
|
|
moderate: 'background: #FFC58C',
|
|
|
|
|
slight: 'background: #E5F3F9',
|
|
|
|
|
normal: 'background: #C2E5F3',
|
|
|
|
|
sufficient: 'background: #9FDBF3'
|
|
|
|
|
}
|
|
|
|
|
if (level >= 1 && level <= 2) {
|
|
|
|
|
return {
|
|
|
|
|
bg: bgCssData.serious,
|
|
|
|
|
title: '严重缺水',
|
|
|
|
|
gear: 1,
|
|
|
|
|
img: 'serious',
|
|
|
|
|
progressBg: progressBgData.serious
|
|
|
|
|
}
|
|
|
|
|
} else if (level >= 3 && level <= 4) {
|
|
|
|
|
return {
|
|
|
|
|
bg: bgCssData.moderate,
|
|
|
|
|
title: '中度缺水',
|
|
|
|
|
gear: 2,
|
|
|
|
|
img: 'moderate',
|
|
|
|
|
progressBg: progressBgData.moderate
|
|
|
|
|
}
|
|
|
|
|
} else if (level >= 5 && level <= 6) {
|
|
|
|
|
return {
|
|
|
|
|
bg: bgCssData.slight,
|
|
|
|
|
title: '轻微缺水',
|
|
|
|
|
gear: 3,
|
|
|
|
|
img: 'slight',
|
|
|
|
|
progressBg: progressBgData.slight
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
let { name, imgUrl, reportData, reportData1, isClock, xinde, imglist, id, show } = this.state
|
|
|
|
|
|
|
|
|
|
const getStatusData = (level) => {
|
|
|
|
|
var bgCssData = {
|
|
|
|
|
serious: 'background: #FFE3E3',
|
|
|
|
|
moderate: 'background: #FFEBDC',
|
|
|
|
|
slight: 'background: #F6FCFF',
|
|
|
|
|
normal: 'background: #F8F8F8',
|
|
|
|
|
sufficient: 'background: #F8F8F8'
|
|
|
|
|
}
|
|
|
|
|
} else if (level >= 7 && level <= 8) {
|
|
|
|
|
return {
|
|
|
|
|
bg: bgCssData.normal,
|
|
|
|
|
title: '水分正常',
|
|
|
|
|
gear: 4,
|
|
|
|
|
img: 'normal',
|
|
|
|
|
progressBg: progressBgData.normal
|
|
|
|
|
// var progressBgData = {
|
|
|
|
|
// serious: 'background: #FF9393',
|
|
|
|
|
// moderate: 'background: #FFC58C',
|
|
|
|
|
// slight: 'background: #E5F3F9',
|
|
|
|
|
// normal: 'background: #C2E5F3',
|
|
|
|
|
// sufficient: 'background: #9FDBF3'
|
|
|
|
|
// }
|
|
|
|
|
var progressBgData = {
|
|
|
|
|
serious: '#FF9393',
|
|
|
|
|
moderate: '#FFC58C',
|
|
|
|
|
slight: '#E5F3F9',
|
|
|
|
|
normal: '#C2E5F3',
|
|
|
|
|
sufficient: '#9FDBF3'
|
|
|
|
|
}
|
|
|
|
|
} else if (level >= 9 && level <= 10) {
|
|
|
|
|
return {
|
|
|
|
|
bg: bgCssData.sufficient,
|
|
|
|
|
title: '水分充足',
|
|
|
|
|
gear: 5,
|
|
|
|
|
img: 'sufficient',
|
|
|
|
|
progressBg: progressBgData.sufficient
|
|
|
|
|
if (level >= 1 && level <= 2) {
|
|
|
|
|
return {
|
|
|
|
|
bg: bgCssData.serious,
|
|
|
|
|
title: '严重缺水',
|
|
|
|
|
gear: 5,
|
|
|
|
|
img: 'serious',
|
|
|
|
|
progressBg: progressBgData.serious
|
|
|
|
|
}
|
|
|
|
|
} else if (level >= 3 && level <= 4) {
|
|
|
|
|
return {
|
|
|
|
|
bg: bgCssData.moderate,
|
|
|
|
|
title: '中度缺水',
|
|
|
|
|
gear: 4,
|
|
|
|
|
img: 'moderate',
|
|
|
|
|
progressBg: progressBgData.moderate
|
|
|
|
|
}
|
|
|
|
|
} else if (level >= 5 && level <= 6) {
|
|
|
|
|
return {
|
|
|
|
|
bg: bgCssData.slight,
|
|
|
|
|
title: '轻微缺水',
|
|
|
|
|
gear: 3,
|
|
|
|
|
img: 'slight',
|
|
|
|
|
progressBg: progressBgData.slight
|
|
|
|
|
}
|
|
|
|
|
} else if (level >= 7 && level <= 8) {
|
|
|
|
|
return {
|
|
|
|
|
bg: bgCssData.normal,
|
|
|
|
|
title: '水分正常',
|
|
|
|
|
gear: 2,
|
|
|
|
|
img: 'normal',
|
|
|
|
|
progressBg: progressBgData.normal
|
|
|
|
|
}
|
|
|
|
|
} else if (level >= 9 && level <= 10) {
|
|
|
|
|
return {
|
|
|
|
|
bg: bgCssData.sufficient,
|
|
|
|
|
title: '水分充足',
|
|
|
|
|
gear: 1,
|
|
|
|
|
img: 'sufficient',
|
|
|
|
|
progressBg: progressBgData.sufficient
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
let { name, imgUrl, reportData, bgCssData, isClock, xinde, imglist, id, show } = this.state
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
|
|
<Block>
|
|
|
|
|
|
|
|
|
|
<Navbar isBack titleSlot='水分测试报告'></Navbar>
|
|
|
|
|
<View className='moisture_test_report'>
|
|
|
|
|
<View className='time'>2023.6.23</View>
|
|
|
|
|
<View className='time'>{reportData.curDate}</View>
|
|
|
|
|
<View className='report_data'>
|
|
|
|
|
<View className='forehead moisture_block flex' style={this.getStatusData(reportData.shuifenLevel.head).bg}>
|
|
|
|
|
<Image className='moisture_img' src={`/img/fr200/${this.getStatusData(reportData.shuifenLevel.head)}.img}.png`} mode='aspectFill'></Image>
|
|
|
|
|
<View className='forehead moisture_block flex' style={getStatusData(reportData.shuifenLevel.head)!.bg}>
|
|
|
|
|
<Image className='moisture_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.head)!.img}.png`)} mode='aspectFill'></Image>
|
|
|
|
|
<View className='pos_info'>
|
|
|
|
|
<View className='top'>额头</View>
|
|
|
|
|
<View className='bottom'>{this.getStatusData(7).title}</View>
|
|
|
|
|
<View className='bottom'>{getStatusData(reportData.shuifenLevel.head)!.title}</View>
|
|
|
|
|
<View className='bottom'></View>
|
|
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='left_face moisture_block flex' style='{util.getStatusData(reportData.shuifenLevel.leftFace).bg}'>
|
|
|
|
|
<Image className='moisture_img' src='/img/fr200/{util.getStatusData(reportData.shuifenLevel.leftFace).img}.png' mode='aspectFill'></Image>
|
|
|
|
|
<View className='left_face moisture_block flex' style={getStatusData(reportData.shuifenLevel.leftFace)!.bg}>
|
|
|
|
|
<Image className='moisture_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.leftFace)!.img}.png`)} mode='aspectFill'></Image>
|
|
|
|
|
<View className='pos_info'>
|
|
|
|
|
<View className='top'>左脸颊</View>
|
|
|
|
|
{/* <View className='bottom'>{this.getStatusData(reportData.shuifenLevel.leftFace).title}</View> */}
|
|
|
|
|
<View className='bottom'>{getStatusData(reportData.shuifenLevel.leftFace)!.title}</View>
|
|
|
|
|
<View className='bottom'></View>
|
|
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='right_face moisture_block flex' style='{util.getStatusData(reportData.shuifenLevel.rightFace).bg}'>
|
|
|
|
|
<Image className='moisture_img' src='/img/fr200/{util.getStatusData(reportData.shuifenLevel.rightFace).img}.png' mode='aspectFill'></Image>
|
|
|
|
|
<View className='right_face moisture_block flex' style={getStatusData(reportData.shuifenLevel.rightFace)!.bg}>
|
|
|
|
|
<Image className='moisture_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.rightFace)!.img}.png`)} mode='aspectFill'></Image>
|
|
|
|
|
<View className='pos_info'>
|
|
|
|
|
<View className='top'>右脸颊</View>
|
|
|
|
|
{/* <View className='bottom'>{this.getStatusData(reportData.shuifenLevel.rightFace).title}</View> */}
|
|
|
|
|
<View className='bottom'>{getStatusData(reportData.shuifenLevel.rightFace)!.title}</View>
|
|
|
|
|
<View className='bottom'></View>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='example_box'>
|
|
|
|
|
<Image className='banner_img' src='/img/fr200/shuifen.png' mode='aspectFill'></Image>
|
|
|
|
|
<Image className='banner_img' src='@/img/fr200/shuifen.png' mode='aspectFill'></Image>
|
|
|
|
|
<View className='line1'></View>
|
|
|
|
|
<View className='line2'></View>
|
|
|
|
|
<View className='line3'></View>
|
|
|
|
|
@ -167,21 +195,22 @@ class MoistureTestReport extends Component<any, any> {
|
|
|
|
|
<View className='items flex aitems'>
|
|
|
|
|
<View className='pos_name'>额头</View>
|
|
|
|
|
<View className='progress'>
|
|
|
|
|
<View className='progress_width' style='width: {reportData.shuifenLevel.head * 10}%;{util.getStatusData(reportData.shuifenLevel.head).progressBg}'></View>
|
|
|
|
|
<View className='progress_width' style={{ width: `${reportData.shuifenLevel.head * 10}%`, backgroundColor: getStatusData(reportData.shuifenLevel.head)!.progressBg }}></View>
|
|
|
|
|
{/* style='{width: {reportData.shuifenLevel.head * 10}%;{util.getStatusData(reportData.shuifenLevel.head).progressBg}}' */}
|
|
|
|
|
</View>
|
|
|
|
|
<View className='level'>{reportData.shuifenLevel.head}级</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='items flex aitems'>
|
|
|
|
|
<View className='pos_name'>左脸颊</View>
|
|
|
|
|
<View className='progress'>
|
|
|
|
|
<View className='progress_width left_face_progress' style='width: {reportData.shuifenLevel.leftFace * 10}%;{util.getStatusData(reportData.shuifenLevel.leftFace).progressBg}'></View>
|
|
|
|
|
<View className='progress_width left_face_progress' style={{ width: `${reportData.shuifenLevel.leftFace * 10}%`, backgroundColor: getStatusData(reportData.shuifenLevel.leftFace)!.progressBg }}></View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='level'>{reportData.shuifenLevel.leftFace}级</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='items flex aitems'>
|
|
|
|
|
<View className='pos_name'>右脸颊</View>
|
|
|
|
|
<View className='progress'>
|
|
|
|
|
<View className='progress_width right_face_progress' style='width: {reportData.shuifenLevel.rightFace * 10}%;{util.getStatusData(reportData.shuifenLevel.rightFace).progressBg}'></View>
|
|
|
|
|
<View className='progress_width right_face_progress' style={{ width: `${reportData.shuifenLevel.rightFace * 10}%`, backgroundColor: getStatusData(reportData.shuifenLevel.rightFace)!.progressBg }}></View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='level'>{reportData.shuifenLevel.rightFace}级</View>
|
|
|
|
|
</View>
|
|
|
|
|
@ -232,23 +261,23 @@ class MoistureTestReport extends Component<any, any> {
|
|
|
|
|
</View>
|
|
|
|
|
<View className='gear_content flex aitems sb'>
|
|
|
|
|
<View className='left_content'>
|
|
|
|
|
<Image className='banner_img' src='/img/fr200/mian-mo.png' mode='aspectFill'></Image>
|
|
|
|
|
<Image className='banner_img' src='@/img/fr200/mian-mo.png' mode='aspectFill'></Image>
|
|
|
|
|
<View className='type'>面膜促渗</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='right_content flex aitems'>
|
|
|
|
|
<View className='gear_list flex aitems sa'>
|
|
|
|
|
<View className='items flex aitems jcenter'>
|
|
|
|
|
<Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.head).gear}.png' mode='aspectFill'></Image>
|
|
|
|
|
<Image className='gear_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.head)!.gear}.png`)} mode='aspectFill'></Image>
|
|
|
|
|
<View className='name'>额头</View>
|
|
|
|
|
<View className='level'>{reportData.shuifenGear.head}档</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='items flex aitems jcenter'>
|
|
|
|
|
<Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.leftFace).gear}.png' mode='aspectFill'></Image>
|
|
|
|
|
<Image className='gear_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.leftFace)!.gear}.png`)} mode='aspectFill'></Image>
|
|
|
|
|
<View className='name'>左脸颊</View>
|
|
|
|
|
<View className='level'>{reportData.shuifenGear.leftFace}档</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='items flex aitems jcenter'>
|
|
|
|
|
<Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.rightFace).gear}.png' mode='aspectFill'></Image>
|
|
|
|
|
<Image className='gear_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.rightFace)!.gear}.png`)} mode='aspectFill'></Image>
|
|
|
|
|
<View className='name'>右脸颊</View>
|
|
|
|
|
<View className='level'>{reportData.shuifenGear.rightFace}档</View>
|
|
|
|
|
</View>
|
|
|
|
|
@ -260,9 +289,9 @@ class MoistureTestReport extends Component<any, any> {
|
|
|
|
|
|
|
|
|
|
<View className='go_clock_in flex sb aitems' >
|
|
|
|
|
<View className='go_clock_btn'>继续护理</View>
|
|
|
|
|
<View className='jump_box flex aitems'>
|
|
|
|
|
<View className='jump_box flex aitems' onClick={this.toIndex}>
|
|
|
|
|
<View className='txt'>主页</View>
|
|
|
|
|
<Image src='/img/fr200/right.png' mode='aspectFill'></Image>
|
|
|
|
|
<Image src='@/img/fr200/right.png' mode='aspectFill'></Image>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
|
qsj
2 years ago