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