|
|
import Taro from '@tarojs/taro';
|
|
|
import classnames from 'classnames';
|
|
|
import { Block, View, Image, Text, Input } from '@tarojs/components';
|
|
|
import { Popup, Progress, Slider } from '@antmjs/vantui';
|
|
|
import { useRef } from 'react'
|
|
|
import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
|
|
|
import echarts from '@/utils/echarts.min.js'
|
|
|
import './index.less';
|
|
|
|
|
|
interface Props {
|
|
|
Electricity: any;
|
|
|
matrixElectricity: any;
|
|
|
facialMaskConnectStatus: any;
|
|
|
}
|
|
|
|
|
|
function Index() {
|
|
|
const stepIndex = 0
|
|
|
const testIndex = 1
|
|
|
|
|
|
const stepList = [
|
|
|
{
|
|
|
value: 'Step1',
|
|
|
name: '额头',
|
|
|
finish: false,
|
|
|
},
|
|
|
{
|
|
|
value: 'Step2',
|
|
|
name: '左脸颊',
|
|
|
finish: false,
|
|
|
},
|
|
|
{
|
|
|
value: 'Step3',
|
|
|
name: '右脸颊',
|
|
|
finish: false,
|
|
|
},
|
|
|
]
|
|
|
|
|
|
const gearLevel = {
|
|
|
currentGear: null,
|
|
|
//现在工作的档位
|
|
|
currentGearMode: 'forehead',
|
|
|
//现在工作模式
|
|
|
forehead: 5,
|
|
|
leftCheek: 5,
|
|
|
rightCheek: 5,
|
|
|
}
|
|
|
const echartsRef = useRef<EchartsHandle>(null)
|
|
|
const option: EChartOption = {
|
|
|
grid: { // 让图表占满容器
|
|
|
top: '28rpx',
|
|
|
left: '18rpx',
|
|
|
right: '28rpx',
|
|
|
bottom: '17rpx'
|
|
|
},
|
|
|
legend: {
|
|
|
show: false,
|
|
|
zlevel: -1
|
|
|
},
|
|
|
xAxis: {
|
|
|
// name: '',
|
|
|
// nameGap: 5,
|
|
|
// nameTextStyle: {
|
|
|
// color: '#e4e4e4',
|
|
|
// fontSize:7
|
|
|
// },
|
|
|
type: 'category',
|
|
|
axisLine: {
|
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#cccccc'
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
color: '#cccccc',
|
|
|
fontSize: 8
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
data: [
|
|
|
'00:01',
|
|
|
'00:02',
|
|
|
'00:03',
|
|
|
'00:04',
|
|
|
'00:05',
|
|
|
'00:06',
|
|
|
'00:07',
|
|
|
'00:08',
|
|
|
'00:09',
|
|
|
'00:10'
|
|
|
]
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
min: 0,
|
|
|
max: 8,
|
|
|
splitNumber: 8,
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: '#cccccc',
|
|
|
type: [4, 2],
|
|
|
dashOffset: 4
|
|
|
}
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
visualMap: {
|
|
|
z: 1,
|
|
|
top: 0,
|
|
|
right: 0,
|
|
|
seriesIndex: 0,
|
|
|
show: false,
|
|
|
pieces: [
|
|
|
{
|
|
|
gt: 0,
|
|
|
lte: 1,
|
|
|
color: '#fff8c9'
|
|
|
},
|
|
|
{
|
|
|
gt: 1,
|
|
|
lte: 2,
|
|
|
color: '#fff0c6'
|
|
|
},
|
|
|
{
|
|
|
gt: 2,
|
|
|
lte: 3,
|
|
|
color: '#ffe5c3'
|
|
|
},
|
|
|
{
|
|
|
gt: 3,
|
|
|
lte: 4,
|
|
|
color: '#ffdbbf'
|
|
|
},
|
|
|
{
|
|
|
gt: 4,
|
|
|
lte: 5,
|
|
|
color: '#ffcfbb'
|
|
|
},
|
|
|
{
|
|
|
gt: 5,
|
|
|
lte: 6,
|
|
|
color: '#ffbab5'
|
|
|
},
|
|
|
{
|
|
|
gt: 6,
|
|
|
lte: 7,
|
|
|
color: '#ffb4b3'
|
|
|
},
|
|
|
{
|
|
|
gt: 7,
|
|
|
lte: 8,
|
|
|
color: '#ffb4b3'
|
|
|
}
|
|
|
],
|
|
|
outOfRange: {
|
|
|
color: '#ff8410'
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4],
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
z: 1,
|
|
|
areaStyle: {},
|
|
|
color: 'red'
|
|
|
},
|
|
|
{
|
|
|
data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4],
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
symbolSize: 5,
|
|
|
lineStyle: {
|
|
|
color: '#ff8410',
|
|
|
width: 1
|
|
|
},
|
|
|
itemStyle: {
|
|
|
color: '#ff8410'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: 'a',
|
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
|
type: 'bar',
|
|
|
barWidth: 12,
|
|
|
z: 2,
|
|
|
stack: 'x',
|
|
|
visualMap: false,
|
|
|
itemStyle: {
|
|
|
color: '#ffcf56'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: 'b',
|
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
|
type: 'bar',
|
|
|
z: 2,
|
|
|
stack: 'x',
|
|
|
visualMap: false,
|
|
|
itemStyle: {
|
|
|
color: '#febb22'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: 'c',
|
|
|
data: [0, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
|
type: 'bar',
|
|
|
z: 2,
|
|
|
stack: 'x',
|
|
|
visualMap: false,
|
|
|
itemStyle: {
|
|
|
color: '#ffac28'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: 'd',
|
|
|
data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 1],
|
|
|
type: 'bar',
|
|
|
z: 2,
|
|
|
stack: 'x',
|
|
|
visualMap: false,
|
|
|
itemStyle: {
|
|
|
color: '#ff8410'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: 'e',
|
|
|
data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 0],
|
|
|
type: 'bar',
|
|
|
z: 2,
|
|
|
stack: 'x',
|
|
|
visualMap: false,
|
|
|
itemStyle: {
|
|
|
color: '#f85804'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: 'f',
|
|
|
data: [0, 0, 0, 0, 0, 1, 1, 0, 1, 0],
|
|
|
type: 'bar',
|
|
|
z: 2,
|
|
|
stack: 'x',
|
|
|
visualMap: false,
|
|
|
itemStyle: {
|
|
|
color: '#e02e14'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: 'h',
|
|
|
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
|
|
|
type: 'bar',
|
|
|
z: 2,
|
|
|
stack: 'x',
|
|
|
visualMap: false,
|
|
|
itemStyle: {
|
|
|
color: '#b30016'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: 'i',
|
|
|
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
|
|
|
type: 'bar',
|
|
|
z: 2,
|
|
|
stack: 'x',
|
|
|
visualMap: false,
|
|
|
itemStyle: {
|
|
|
color: '#750010'
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
|
|
|
const level = [8, 7, 6, 5, 4, 3, 2]
|
|
|
|
|
|
return (
|
|
|
<Block>
|
|
|
<View className='box' >
|
|
|
<Echarts
|
|
|
echarts={echarts}
|
|
|
option={option}
|
|
|
ref={echartsRef}
|
|
|
// isPage={false}
|
|
|
// style自定义设置echarts宽高
|
|
|
style={{ width: '630rpx', height: '260rpx' }}
|
|
|
/>
|
|
|
<View className='box_background'>
|
|
|
<Image className='full' src={require('@/img/full-scran.png')}></Image>
|
|
|
<View className='power'>实时能量</View>
|
|
|
{
|
|
|
level.map(item => (
|
|
|
<View className='line' key={item}>
|
|
|
<View className='number'>{item}</View><View className='bottom_line'>8</View>
|
|
|
</View>)
|
|
|
)
|
|
|
}
|
|
|
<View className='line' >
|
|
|
<View className='number'>1</View>
|
|
|
</View>
|
|
|
<View className='time'>时间</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
|
|
|
<Block>
|
|
|
<View>
|
|
|
<View className='water_test'>
|
|
|
<View className='test_step flex aitems sb'>
|
|
|
{stepList.map((item, index) => {
|
|
|
return (
|
|
|
<View
|
|
|
className='step_block flex aitems'
|
|
|
key={index}
|
|
|
>
|
|
|
<View className='step_top flex aitems'>
|
|
|
<View className='drop'></View>
|
|
|
<View className='step_num'>
|
|
|
{item.value}
|
|
|
</View>
|
|
|
{index != 2 && (
|
|
|
<View className='line'></View>
|
|
|
)}
|
|
|
</View>
|
|
|
<View className='step_name'>{item.name}</View>
|
|
|
</View>
|
|
|
)
|
|
|
})}
|
|
|
</View>
|
|
|
<View className='test_txt'>
|
|
|
通过小紫弹的水分测试功能，对脸部的额头、左脸颊、右脸颊三个区域进行水分检测，并定制适合您的促渗档位方案
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
<View className='testing'>
|
|
|
<View className='testing_header flex aitems'>
|
|
|
{stepList.map((item, index) => {
|
|
|
return (
|
|
|
<View
|
|
|
className='items flex aitems jcenter'
|
|
|
key={index}
|
|
|
style={
|
|
|
stepIndex == index ? 'background: #fff' : ''
|
|
|
}
|
|
|
>
|
|
|
{stepIndex > index && (
|
|
|
<Image
|
|
|
className='finish_img'
|
|
|
src={require('@/img/full-scran.png')}
|
|
|
mode='aspectFill'
|
|
|
></Image>
|
|
|
)}
|
|
|
<View className='value'>{item.value}</View>
|
|
|
<View className='name'>{item.name}</View>
|
|
|
</View>
|
|
|
)
|
|
|
})}
|
|
|
</View>
|
|
|
<View className='testing_content'>
|
|
|
<View className='progress_box flex aitems'>
|
|
|
<View className='title'>
|
|
|
{stepList[stepIndex].name + '水分测试'}
|
|
|
</View>
|
|
|
{/* <view class='progress_block flex aitems'> */}
|
|
|
<Progress
|
|
|
style={{
|
|
|
width: '300rpx',
|
|
|
}}
|
|
|
percentage='80'
|
|
|
strokeWidth='14'
|
|
|
showPivot={false}
|
|
|
color='#C2E5F3'
|
|
|
></Progress>
|
|
|
{stepList[stepIndex].finish && 80 >= 99 ? (
|
|
|
<Image
|
|
|
className='finish_img'
|
|
|
src={require('@/img/finished.png')}
|
|
|
mode='aspectFill'
|
|
|
></Image>
|
|
|
) : (
|
|
|
<Image
|
|
|
className='finish_img'
|
|
|
src={require('@/img/no-finish.png')}
|
|
|
mode='aspectFill'
|
|
|
></Image>
|
|
|
)}
|
|
|
{/* </view> */}
|
|
|
</View>
|
|
|
{/* <view class='tips' wx:if='{{!finish}}'> */}
|
|
|
{/* 请参考视频指引，将仪器紧贴<text style='color: #000000'>额头区域</text> */}
|
|
|
{/* </view> */}
|
|
|
<View className='tips flex sb'>
|
|
|
<View>
|
|
|
请参考视频指引，将仪器紧贴
|
|
|
{(testIndex == 1 ||
|
|
|
testIndex == 2 ||
|
|
|
testIndex == 4) && (
|
|
|
<Text
|
|
|
style={{
|
|
|
color: '#000000',
|
|
|
}}
|
|
|
>
|
|
|
{stepList[stepIndex].name + '区域'}
|
|
|
</Text>
|
|
|
)}
|
|
|
{testIndex == 1 && (
|
|
|
<Text>，并点击下方启动检测按钮进行测试</Text>
|
|
|
)}
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
</View>
|
|
|
|
|
|
<View>
|
|
|
<View className='gear_adjust'>
|
|
|
<View className='title'>档位调节</View>
|
|
|
<View className='gear_box'>
|
|
|
<View className='gear flex aitems'>
|
|
|
<View className='pos'>额头</View>
|
|
|
<Slider
|
|
|
style={{
|
|
|
flex: '1',
|
|
|
}}
|
|
|
value={gearLevel.forehead}
|
|
|
min={1}
|
|
|
max={10}
|
|
|
inactiveColor='#F8F8F8'
|
|
|
activeColor={
|
|
|
gearLevel.currentGearMode == 'forehead'
|
|
|
? '#EECDA1'
|
|
|
: '#CCCCCC'
|
|
|
}
|
|
|
disabled={gearLevel.currentGearMode !== 'forehead'}
|
|
|
barHeight={6}
|
|
|
// useButtonSlot
|
|
|
data-key='forehead'
|
|
|
// onDrag={this.onDrag}
|
|
|
// onChange={this.onChange}
|
|
|
renderButton={
|
|
|
<Block>
|
|
|
<View
|
|
|
className={
|
|
|
'custom-button ' +
|
|
|
(gearLevel.currentGearMode !== 'forehead' &&
|
|
|
'current-button')
|
|
|
}
|
|
|
>
|
|
|
<View className='circle'></View>
|
|
|
<View className='level'>
|
|
|
{gearLevel.forehead + '档'}
|
|
|
</View>
|
|
|
</View>
|
|
|
</Block>
|
|
|
}
|
|
|
></Slider>
|
|
|
</View>
|
|
|
<View className='gear flex aitems'>
|
|
|
<View className='pos'>左脸颊</View>
|
|
|
<Slider
|
|
|
style={{
|
|
|
flex: '1',
|
|
|
}}
|
|
|
value={gearLevel.leftCheek}
|
|
|
min={1}
|
|
|
max={10}
|
|
|
inactiveColor='#F8F8F8'
|
|
|
activeColor={
|
|
|
gearLevel.currentGearMode == 'leftCheek'
|
|
|
? '#EECDA1'
|
|
|
: '#CCCCCC'
|
|
|
}
|
|
|
disabled={gearLevel.currentGearMode !== 'leftCheek'}
|
|
|
barHeight={6}
|
|
|
// useButtonSlot
|
|
|
data-key='leftCheek'
|
|
|
// onDrag={this.onDrag}
|
|
|
// onChange={this.onChange}
|
|
|
renderButton={
|
|
|
<Block>
|
|
|
<View
|
|
|
className={
|
|
|
'custom-button ' +
|
|
|
(gearLevel.currentGearMode !==
|
|
|
'leftCheek' && 'current-button')
|
|
|
}
|
|
|
>
|
|
|
<View className='circle'></View>
|
|
|
<View className='level'>
|
|
|
{gearLevel.leftCheek + '档'}
|
|
|
</View>
|
|
|
</View>
|
|
|
</Block>
|
|
|
}
|
|
|
></Slider>
|
|
|
</View>
|
|
|
<View className='gear flex aitems'>
|
|
|
<View className='pos'>右脸颊</View>
|
|
|
<Slider
|
|
|
style={{
|
|
|
flex: '1',
|
|
|
}}
|
|
|
value={gearLevel.rightCheek}
|
|
|
min={1}
|
|
|
max={10}
|
|
|
inactiveColor='#F8F8F8'
|
|
|
activeColor={
|
|
|
gearLevel.currentGearMode == 'rightCheek'
|
|
|
? '#EECDA1'
|
|
|
: '#CCCCCC'
|
|
|
}
|
|
|
disabled={
|
|
|
gearLevel.currentGearMode !== 'rightCheek'
|
|
|
}
|
|
|
barHeight={6}
|
|
|
// useButtonSlot
|
|
|
data-key='rightCheek'
|
|
|
// onDrag={this.onDrag}
|
|
|
// onChange={this.onChange}
|
|
|
renderButton={
|
|
|
<Block>
|
|
|
<View
|
|
|
className={
|
|
|
'custom-button flex jcenter aitems ' +
|
|
|
(gearLevel.currentGearMode !==
|
|
|
'rightCheek' && 'current-button')
|
|
|
}
|
|
|
>
|
|
|
<View className='circle'></View>
|
|
|
<View className='level'>
|
|
|
{gearLevel.rightCheek + '档'}
|
|
|
</View>
|
|
|
</View>
|
|
|
</Block>
|
|
|
}
|
|
|
></Slider>
|
|
|
</View>
|
|
|
{/* <View className='level_box flex aitems'>
|
|
|
{(10).map((item, index) => {
|
|
|
return (
|
|
|
<View key={item}
|
|
|
className='level_num'
|
|
|
style={{
|
|
|
marginRight: '1.225rem',
|
|
|
}}
|
|
|
>
|
|
|
{item + 1}
|
|
|
</View>
|
|
|
)
|
|
|
})}
|
|
|
</View> */}
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
|
|
|
<View className='gear_adjustment'>
|
|
|
<View className='gear_box'>
|
|
|
<View className='gear flex aitems'>
|
|
|
<View className='pos'>额头</View>
|
|
|
<View className='gear_button flex aitems'>
|
|
|
<View className='button_minus'><Image className='image' src={require('@/img/fr200/minus.png')}></Image></View>
|
|
|
<View className='button_value'><View className='number'>1</View>档</View>
|
|
|
<View className='button_plus'><Image className='image' src={require('@/img/fr200/add.png')}></Image></View>
|
|
|
</View>
|
|
|
</View>
|
|
|
<View className='gear flex aitems'>
|
|
|
<View className='pos'>左脸颊</View>
|
|
|
<View className='gear_button flex aitems'>
|
|
|
<View className='button_minus'><Image className='image' src={require('@/img/fr200/minus.png')}></Image></View>
|
|
|
<View className='button_value'><View className='number'>1</View>档</View>
|
|
|
<View className='button_plus'><Image className='image' src={require('@/img/fr200/add.png')}></Image></View>
|
|
|
</View>
|
|
|
</View>
|
|
|
<View className='gear flex aitems'>
|
|
|
<View className='pos'>右脸颊</View>
|
|
|
<View className='gear_button flex aitems'>
|
|
|
<View className='button_minus'><Image className='image' src={require('@/img/fr200/minus.png')}></Image></View>
|
|
|
<View className='button_value'><View className='number'>1</View>档</View>
|
|
|
<View className='button_plus'><Image className='image' src={require('@/img/fr200/add.png')}></Image></View>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
</Block>
|
|
|
</Block>
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default Index;
|