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

添加静态

Browse Source
master
rongweikang 2 years ago
parent e7f20bd40c
commit 3a9457d8a5
2 changed files with 1804 additions and 33 deletions
Show Stats Download Patch File Download Diff File

1486
src/pages/iotCarePlan/components/Echart/index.less
View File

File diff suppressed because it is too large Load Diff

351
src/pages/iotCarePlan/components/Echart/index.tsx
Unescape Escape View File

@ -1,10 +1,11 @@
import Taro from "@tarojs/taro"; import Taro from '@tarojs/taro';
import classnames from "classnames"; import classnames from 'classnames';
import { Block, View, Image, Text } from "@tarojs/components"; import { Block, View, Image, Text } from '@tarojs/components';
import { Popup, Progress, Slider } from '@antmjs/vantui';
import { useRef } from 'react' import { useRef } from 'react'
import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts' import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
import echarts from '@/utils/echarts.min.js' import echarts from '@/utils/echarts.min.js'
import "./index.less"; import './index.less';
interface Props { interface Props {
Electricity: any; Electricity: any;
@ -13,13 +14,43 @@ interface Props {
} }
function Index() { 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 echartsRef = useRef<EchartsHandle>(null)
const option: EChartOption = { const option: EChartOption = {
grid: { // 让图表占满容器 grid: { // 让图表占满容器
top: "28rpx", top: '28rpx',
left: "18rpx", left: '18rpx',
right: "28rpx", right: '28rpx',
bottom: "17rpx" bottom: '17rpx'
}, },
xAxis: { xAxis: {
// name: '', // name: '',
@ -229,10 +260,10 @@ function Index() {
stack: 'x', stack: 'x',
visualMap: false, visualMap: false,
itemStyle: { itemStyle: {
color: '#b30016' color: '#b30016'
} }
}, },
{ {
name: 'i', name: 'i',
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0], data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
type: 'bar', type: 'bar',
@ -249,31 +280,285 @@ function Index() {
const level = [8, 7, 6, 5, 4, 3, 2] const level = [8, 7, 6, 5, 4, 3, 2]
return ( return (
<View className='box' > <Block>
<Echarts <View className='box' >
echarts={echarts} <Echarts
option={option} echarts={echarts}
ref={echartsRef} option={option}
// isPage={false} ref={echartsRef}
// style自定义设置echarts宽高 // isPage={false}
style={{ width: '630rpx', height: '260rpx' }} // style自定义设置echarts宽高
/> style={{ width: '630rpx', height: '260rpx' }}
<View className='box_background'> />
<Image className='full' src={require('@/img/full-scran.png')}></Image> <View className='box_background'>
<View className='power'>实时能量</View> <Image className='full' src={require('@/img/full-scran.png')}></Image>
{ <View className='power'>实时能量</View>
level.map(item => ( {
<View className='line' key={item}> level.map(item => (
<View className='number'>{item}</View><View className='bottom_line'>8</View> <View className='line' key={item}>
</View>) <View className='number'>{item}</View><View className='bottom_line'>8</View>
) </View>)
} )
<View className='line' > }
<View className='number'>1</View> <View className='line' >
<View className='number'>1</View>
</View>
<View className='time'>时间</View>
</View> </View>
<View className='time'>时间</View>
</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: '6.75rem',
}}
percentage='80'
strokeWidth='6'
></Progress>
{stepList[stepIndex].finish && 80 >= 99 ? (
<Image
className='finish_img'
src={require('@/img/full-scran.png')}
mode='aspectFill'
></Image>
) : (
<Image
className='finish_img'
src={require('@/img/full-scran.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>
</Block>
</Block>
); );

Write Preview
Loading…
Cancel
Save