314637581
/
flossom-miniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对接水分测试报告

Browse Source
master
rongweikang 2 years ago
parent 17d0439e3f
commit 2f0ce40830
1 changed files with 113 additions and 84 deletions
Show Stats Download Patch File Download Diff File

197
src/recoding/pages/moisture_test_report/moisture_test_report.tsx
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save