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

delete:删除无用的iot旧目录，后面使用分包功能下的iot

Browse Source
master
blak-kong 2 years ago
parent c4bccbc11c
commit 2b2a8dca58
13 changed files with 0 additions and 5420 deletions
Show Stats Download Patch File Download Diff File

0
src/pages/iotCarePlan/FR200.less
Unescape Escape View File

0
src/pages/iotCarePlan/FR200.tsx
Unescape Escape View File

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

File diff suppressed because it is too large Load Diff

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

@ -1,605 +0,0 @@
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;

111
src/pages/iotCarePlan/components/ElectricityView/index.tsx
Unescape Escape View File

@ -1,111 +0,0 @@
import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, Image, Text } from "@tarojs/components";
import { useState, useEffect } from "react";
// import "./index.less";
interface Props {
Electricity: any;
matrixElectricity: any;
facialMaskConnectStatus: any;
}
function Index({
Electricity,
matrixElectricity,
facialMaskConnectStatus,
}: Props) {
return (
<Block>
<View className="electricity-box">
{/* <View className="item">
<View className="label">WE200电量 :</View>
<View className="value flex aitems">
{matrixElectricity >= 4 && (
<Block>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
</Block>
)}
{matrixElectricity === 3 && (
<Block>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
<View className="v2 battery_icon"></View>
</Block>
)}
{matrixElectricity === 2 && (
<Block>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
<View className="v2 battery_icon"></View>
<View className="v2 battery_icon"></View>
</Block>
)}
{matrixElectricity === 1 && (
<Block>
<View className="v1 battery_icon"></View>
<View className="v2 battery_icon"></View>
<View className="v2 battery_icon"></View>
<View className="v2 battery_icon"></View>
</Block>
)}
{matrixElectricity === 0 && (
<Block>
<View className="v3 battery_icon"></View>
<View className="v2 battery_icon"></View>
<View className="v2 battery_icon"></View>
<View className="v2 battery_icon"></View>
</Block>
)}
</View>
</View> */}
{facialMaskConnectStatus === 1 && (
<Block>
<View className="item">
<View className="label">面罩电量 :</View>
<View className="value flex aitems">
{Electricity >= 4 && (
<Block>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
</Block>
)}
{Electricity === 3 && (
<Block>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
<View className="v2 battery_icon"></View>
</Block>
)}
{Electricity === 2 && (
<Block>
<View className="v1 battery_icon"></View>
<View className="v1 battery_icon"></View>
<View className="v2 battery_icon"></View>
<View className="v2 battery_icon"></View>
</Block>
)}
{Electricity <= 1 && (
<Block>
<View className="v3 battery_icon"></View>
<View className="v2 battery_icon"></View>
<View className="v2 battery_icon"></View>
<View className="v2 battery_icon"></View>
</Block>
)}
</View>
</View>
</Block>
)}
</View>
</Block>
);
}
export default Index;

76
src/pages/iotCarePlan/components/Footer/index.less
Unescape Escape View File

@ -1,76 +0,0 @@
.iot-footer {
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
align-items: baseline;
width: 100%;
height: 153rpx;
background: #ffffff;
box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
.btn {
width: 690rpx;
height: 90rpx;
background: #000;
border-radius: 45rpx;
color: #fff;
line-height: 90rpx;
text-align: center;
margin: 21rpx 49rpx 42rpx 30rpx;
font-size: 32rpx;
}
.text {
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: bold;
color: #000;
}
.btn-disable {
background-color: #ccc !important; /* 设置按钮背景颜色为灰色 */
color: #fff !important; /* 设置按钮文字颜色为白色 */
border-color: #ccc !important; /* 设置按钮边框颜色为灰色 */
}
.switch-btn-box {
width: 100vw;
display: flex;
align-items: center;
margin-top: 34rpx;
.btn-item {
height: 70rpx;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
.btn-icon {
width: 36rpx;
height: 36rpx;
margin-right: 18rpx;
}
.btn-text {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
}
}
.border-right {
border-right: 1px solid #ddd;
}
.btn-disable {
color: #fff !important; /* 设置按钮文字颜色为白色 */
border-color: #ccc !important; /* 设置按钮边框颜色为灰色 */
background-color: #fff !important; /* 设置按钮背景颜色为灰色 */
.btn-text {
color: #ccc !important; /* 设置按钮文字颜色为白色 */
border-color: #ccc !important; /* 设置按钮边框颜色为灰色 */
background-color: #fff !important; /* 设置按钮背景颜色为灰色 */
}
}
}
}

132
src/pages/iotCarePlan/components/Footer/index.tsx
Unescape Escape View File

@ -1,132 +0,0 @@
import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, Image, Text } from "@tarojs/components";
import { useState, useEffect } from "react";
import "./index.less";
interface Props {
isShowNurse: boolean;
isStopNurse: boolean;
isDisabled: boolean; // 是否禁用开始暂停按钮：模式与连接设备是否一致
onEmitStartNurse: Function; // 每次点击item，回调事件和数据给父组件
onEmitSwitchChange: Function;
onEmitEndPlan: Function;
onEmitErrorTips: Function; // 不可点击，提示错误
}
function Index({
isShowNurse,
isStopNurse,
isDisabled,
onEmitStartNurse,
onEmitSwitchChange,
onEmitEndPlan,
onEmitErrorTips,
}: Props) {
const onStartNurse = () => {
onEmitStartNurse();
};
const onSwitchChange = () => {
if (!isDisabled) {
onEmitSwitchChange();
}
};
const onEndPlan = () => {
onEmitEndPlan();
};
const onErrorTips = () => {
onEmitErrorTips();
};
return (
<Block>
<View className="iot-footer">
{!isShowNurse && (
<Block>
{isDisabled ? (
<View className="btn btn-disable" onClick={onStartNurse}>
开始护理
</View>
) : (
<View className="btn" onClick={onStartNurse}>
开始护理
</View>
)}
</Block>
)}
{isShowNurse && (
<View className="switch-btn-box">
{!isDisabled && (
<View className="btn-item border-right" onClick={onSwitchChange}>
{isStopNurse ? (
<Block>
<Image
className="btn-icon"
src={require("../../../../img/iot/start_nurse.png")}
mode="aspectFill"
/>
<Text className="btn-text">启动光照</Text>
</Block>
) : (
<Block>
<Image
className="btn-icon"
src={require("../../../../img/iot/pause_nurse.png")}
mode="aspectFill"
/>
<Text className="btn-text">暂停光照</Text>
</Block>
)}
</View>
)}
{isDisabled && (
<View
className="btn-item border-right btn-disable"
onClick={onErrorTips}
>
{isStopNurse ? (
<Block>
<Image
className="btn-icon"
style="color: #ccc"
src={require("../../../../img/iot/start_nurse.png")}
mode="aspectFill"
/>
<Text className="btn-text" style="color: #ccc">
启动光照
</Text>
</Block>
) : (
<Block>
<Image
className="btn-icon"
style="color: #ccc"
src={require("../../../../img/iot/pause_nurse.png")}
mode="aspectFill"
/>
<Text className="btn-text" style="color: #ccc">
暂停光照
</Text>
</Block>
)}
</View>
)}
<View className="btn-item" onClick={onEndPlan}>
<Image
className="btn-icon"
src={require("../../../../img/iot/over_nurse.png")}
mode="aspectFill"
/>
<Text className="btn-text">结束护理</Text>
</View>
</View>
)}
</View>
</Block>
);
}
export default Index;

57
src/pages/iotCarePlan/components/ModeContent/index.less
Unescape Escape View File

@ -1,57 +0,0 @@
.modelInfo-box {
width: 690rpx;
margin: 26rpx auto 0;
padding: 37rpx 35rpx;
background-color: #fff;
box-sizing: border-box;
border-radius: 30rpx;
overflow: visible;
margin-bottom: 150rpx;
.modelInfo-line {
margin-bottom: 50rpx;
&:last-child {
margin-bottom: 0;
.modelInfo-title {
margin-bottom: 6rpx;
}
}
.modelInfo-title {
margin-bottom: 24rpx;
font-size: 28rpx;
font-weight: bold;
line-height: 1;
color: #000;
}
.modelInfo-effect {
font-size: 26rpx;
line-height: 1;
color: #000;
}
.modelInfo-light-box {
display: flex;
flex-wrap: wrap;
.modelInfo-light-item {
display: flex;
align-items: center;
margin-right: 40rpx;
margin-top: 20rpx;
/*margin-bottom: 20rpx;*/
}
.modelInfo-light-color {
width: 12rpx;
height: 12rpx;
margin-right: 10rpx;
background-color: #f2c95b;
border-radius: 50%;
}
.modelInfo-light-colorname {
font-size: 26rpx;
line-height: 1;
}
}
}
}

51
src/pages/iotCarePlan/components/ModeContent/index.tsx
Unescape Escape View File

@ -1,51 +0,0 @@
import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, ScrollView, Image } from "@tarojs/components";
import { useState, useEffect } from "react";
import "./index.less";
interface Props {
isShowNurse: boolean;
ActiveModeItem: any;
}
function Index({ isShowNurse, ActiveModeItem }: Props) {
const ModeColor = {
"590nm": "#CF231D",
"630nm": "#CF231D",
"830nm": "#9C1D17",
};
return (
<Block>
{isShowNurse && (
<View className="modelInfo-box">
<View className="modelInfo-line is-effect">
<View className="modelInfo-title">模式功效</View>
<View className="modelInfo-effect">{ActiveModeItem.modeDesc}</View>
</View>
<View className="modelInfo-line">
<View className="modelInfo-title">当前输出技术</View>
<View className="modelInfo-light-box">
{ActiveModeItem.combineData.map((item) => {
return (
<View className="modelInfo-light-item" key={item.id}>
<View
className="modelInfo-light-color"
style={{
backgroundColor: ModeColor[item.technologyInfo],
}}
></View>
<View className="modelInfo-light-colorname">
{item.effectContent}({item.technologyInfo})
</View>
</View>
);
})}
</View>
</View>
</View>
)}
</Block>
);
}
export default Index;

157
src/pages/iotCarePlan/components/ModeList/index.less
Unescape Escape View File

@ -1,157 +0,0 @@
.mode-list-main {
position: relative;
font-family: PingFang SC;
.change-all-mode-btn {
position: absolute;
top: 10rpx;
right: -30rpx;
width: 140rpx;
height: 160rpx;
background-color: #fff;
border-radius: 30rpx 0rpx 0rpx 30rpx;
box-shadow: 1rpx 2rpx 16rpx 2rpx rgba(97, 97, 97, 0.1);
text-align: center;
// align-items: center;
z-index: 20;
box-sizing: border-box;
.title {
font-size: 26rpx;
text-align: center;
font-weight: bold;
text-align: center;
margin-top: 33rpx;
}
.icon {
display: block;
width: 36rpx;
height: 36rpx;
margin: 0 auto;
margin-top: 26rpx;
}
}
}
.mode-list-box {
width: 100%;
height: 180rpx;
padding: 10rpx 26rpx;
margin-top: 20rpx;
background-color: #f2f2f2;
border-radius: 30rpx;
box-sizing: border-box;
&:last-child {
margin-bottom: 0;
}
.mode-list {
display: flex;
align-items: center;
.mode-item-title {
display: flex;
align-items: center;
justify-content: center;
width: 110rpx;
min-width: 110rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
margin-right: 20rpx;
}
.mode-item {
position: relative;
display: flex;
min-width: 140rpx;
height: 160rpx;
align-items: center;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 20rpx;
/*padding: 17rpx 18rpx;*/
box-sizing: border-box;
transition: all 0.3s;
flex-shrink: 0;
overflow: hidden;
.new {
display: none;
position: absolute;
left: 0;
top: 0;
width: 48rpx;
height: 24rpx;
font-size: 16rpx;
font-family: PingFang SC;
font-weight: bold;
color: #ffffff;
text-align: center;
background-color: #eb5858;
border-radius: 15rpx 10rpx 12rpx 0rpx;
z-index: 20;
}
.is-new {
display: block;
}
.mode-info {
min-width: 140rpx;
padding-left: 10rpx;
padding-right: 10rpx;
.mode-info-title {
margin-bottom: 4rpx;
font-size: 26rpx;
text-align: center;
font-weight: bold;
}
.mode-info-time {
margin-bottom: 4rpx;
text-align: center;
color: #666666;
font-size: 24rpx;
}
.mode-info-select {
display: flex;
align-items: center;
justify-content: center;
width: 30rpx;
height: 30rpx;
margin: 10rpx auto 0;
border: 3rpx solid #f1f1f1;
border-radius: 50%;
box-sizing: border-box;
&.is-select {
background-color: #fff;
border: none;
}
}
.mode-info-select-point {
width: 14rpx;
height: 14rpx;
background-color: #000000;
border-radius: 50%;
}
}
}
.mode-item + .mode-item {
margin-left: 20rpx;
}
.mode-item-active {
// min-width: 300rpx;
padding-right: 11rpx;
background: linear-gradient(90deg, #efdcc2 0%, #fff2df 100%);
}
.mode-pic {
width: 140rpx;
height: 140rpx;
/*margin-left: 20rpx;*/
background-color: #f1f1f1;
border-radius: 20rpx;
overflow: hidden;
}
.mode-pic image {
width: 100%;
height: 100%;
vertical-align: middle;
}
}
}

238
src/pages/iotCarePlan/components/ModeList/index.tsx
Unescape Escape View File

@ -1,238 +0,0 @@
import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, ScrollView, Image } from "@tarojs/components";
import { useState, useEffect } from "react";
import "./index.less";
interface Props {
ModeID: any;
activeModeID: any;
ModeList: any;
ModeType: string; // all visor cabin yimeish
isShowNurse: boolean; // 是否已进入护理详情页
isPop: boolean; // 是否弹窗
onEmit: Function; // 每次点击item，回调事件和数据给父组件
onEmitShowAll: Function; // 打开弹窗按钮
}
function Index({
isShowNurse,
isPop,
ModeList,
ModeType,
ModeID,
activeModeID,
onEmit,
onEmitShowAll,
}: Props) {
let VisorList = ModeList.filter((item) => item.modeClass === 1); // 面罩模式
let CabinList = ModeList.filter((item) => item.modeClass === 2); // 舱体模式
let YimeishList = ModeList.filter((item) => item.modeClass === 3); // 医美术后
console.log("ModeType", ModeType);
const yimeishClick = (item) => {
onEmit(item);
};
const cabinClick = (item) => {
onEmit(item);
};
const visorClick = (item) => {
onEmit(item);
};
const showAll = () => {
onEmitShowAll();
};
return (
<Block>
<View className="mode-list-main">
{!isPop && ModeList.length > 0 && isShowNurse && (
<View className="change-all-mode-btn" onClick={showAll}>
<View className="title">全部模式</View>
<Image
className="icon"
src={require("../../../../img/iot/mode-switch.png")}
/>
</View>
)}
{VisorList.length > 0 &&
(ModeType === "all" || ModeType === "visor" || isPop) && (
<ScrollView
className="mode-list-box"
scroll-x="true"
scrollIntoView={ModeID} // itemID自动滚动到该元素位置
>
<View className="mode-list">
<View className="mode-item-title">面罩模式</View>
{VisorList.map((item: any, index: any) => {
return (
<View
key={"visor_" + index}
id={"visor_" + item.id}
className={classnames("mode-item", {
"mode-item-active": activeModeID === item.id,
})}
onClick={visorClick.bind(this, item)}
>
<View
className={classnames("new", {
"is-new": item.isNew === 1,
})}
>
NEW
</View>
<View className="mode-info">
<View className="mode-info-title">{item.modeName}</View>
<View className="mode-info-time">
{item.modeTimeStr}
</View>
<View
className={classnames("mode-info-select", {
"is-select": activeModeID === item.id,
})}
>
{activeModeID === item.id && (
<View className="mode-info-select-point"></View>
)}
</View>
</View>
{activeModeID === item.id && (
<View className="mode-pic">
<Image
src={item.modeBanner}
mode="aspectFill"
style="animation-iteration-count:1;"
/>
</View>
)}
</View>
);
})}
<View style="width:120rpx;min-width:120rpx;height:40rpx;display:flex"></View>
</View>
</ScrollView>
)}
{CabinList.length > 0 &&
(ModeType === "all" || ModeType === "cabin" || isPop) && (
<ScrollView
className="mode-list-box"
scrollX={true}
scrollIntoView={ModeID}
>
<View className="mode-list">
<View className="mode-item-title">舱体模式</View>
{CabinList.map((item: any, index: any) => {
return (
<View
key={"cabin_" + index}
id={"cabin_" + item.id}
onClick={cabinClick.bind(this, item)}
className={classnames("mode-item", {
"mode-item-active": activeModeID === item.id,
})}
>
<View
className={classnames("new", {
"is-new": item.isNew === 1,
})}
>
NEW
</View>
<View className="mode-info">
<View className="mode-info-title">{item.modeName}</View>
<View className="mode-info-time">
{item.modeTimeStr}
</View>
<View
className={classnames("mode-info-select", {
"is-select": activeModeID === item.id,
})}
>
{activeModeID === item.id && (
<View className="mode-info-select-point"></View>
)}
</View>
</View>
{activeModeID === item.id && (
<View className="mode-pic">
<Image
src={item.modeBanner}
mode="aspectFill"
style="animation-iteration-count:1;"
/>
</View>
)}
</View>
);
})}
</View>
</ScrollView>
)}
{YimeishList.length > 0 &&
(ModeType === "all" || ModeType === "yimeish" || isPop) && (
<ScrollView
className="mode-list-box"
scrollX={true}
scrollIntoView={ModeID}
>
<View className="mode-list">
<View className="mode-item-title">医美术后</View>
{YimeishList.map((item: any, index: any) => {
return (
<View
key={"yimeish_" + index}
id={"yimeish_" + item.id}
onClick={yimeishClick.bind(this, item)}
className={classnames("mode-item", {
"mode-item-active": activeModeID === item.id,
})}
>
<View
className={classnames("new", {
"is-new": item.isNew === 1,
})}
>
NEW
</View>
<View className="mode-info">
<View className="mode-info-title">{item.modeName}</View>
<View className="mode-info-time">
{item.modeTimeStr}
</View>
<View
className={classnames("mode-info-select", {
"is-select": activeModeID === item.id,
})}
>
{activeModeID === item.id && (
<View className="mode-info-select-point"></View>
)}
</View>
</View>
{activeModeID === item.id && (
<View className="mode-pic">
<Image
src={item.modeBanner}
mode="aspectFill"
style="animation-iteration-count:1;"
/>
</View>
)}
</View>
);
})}
</View>
</ScrollView>
)}
</View>
</Block>
);
}
export default Index;

148
src/pages/iotCarePlan/iotCarePlan.less
Unescape Escape View File

@ -1,148 +0,0 @@
.iot-main {
padding: 20rpx 30rpx;
background: #f8f8f8;
box-sizing: border-box;
min-height: calc(100vh - 180rpx);
.banner-box {
position: relative;
display: block;
width: 690rpx;
height: 790rpx;
background-color: #fff;
border-radius: 30rpx;
.music-btn {
position: absolute;
top: 17rpx;
right: 17rpx;
width: 54rpx;
height: 54rpx;
background: #f8f8f8;
border-radius: 50%;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
.music-btn_icon {
width: 54rpx;
height: 54rpx;
}
}
.video-or-image {
display: block;
width: 690rpx;
height: 640rpx;
border-radius: 30rpx;
animation-iteration-count: 1; // gif只播放一次
}
.iot-device {
width: 690rpx;
height: 150rpx;
display: flex;
align-items: center;
justify-content: center;
.device-time {
font-size: 26rpx;
color: #000;
font-weight: 400;
.time {
font-size: 30rpx;
font-weight: 800;
}
}
.line {
width: 1rpx;
height: 50rpx;
background: #dddddd;
margin-left: 69rpx;
margin-right: 60rpx;
}
.electricity-box {
display: flex;
flex-direction: column;
.item {
display: flex;
align-items: center;
justify-content: left;
height: 50rpx;
.label {
width: 154rpx;
font-size: 26rpx;
color: #000;
margin-right: 14rpx;
}
}
}
}
.msg-tips {
position: absolute;
top: 40%;
left: 0;
right: 0;
transform: translateY(-40%);
display: flex;
align-items: center;
max-width: 635rpx;
margin: auto;
padding: 15rpx 34rpx;
background-color: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
border-radius: 30rpx;
z-index: 10100 !important; // 提升层级，防止被其他元素遮挡
.msg-tips-img {
width: 30rpx;
height: 30rpx;
margin-right: 17rpx;
}
.msg-tips-content {
flex: 1;
max-width: 530rpx;
font-size: 28rpx;
color: #fff;
word-break: break-word;
}
}
}
.mode-box {
// background-color: #fff;
}
}
.iot-btn-start {
width: 690rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: #fff;
font-size: 32rpx;
background-color: #ccc;
border-radius: 45rpx;
&.is-connect {
background-color: #000;
}
}
.battery_icon {
width: 8rpx;
height: 20rpx;
border-radius: 5rpx;
& + .battery_icon {
margin-left: 8rpx;
}
}
.v1 {
background: linear-gradient(0deg, #efdcc2 0%, #fff2df 100%);
}
.v2 {
background: #f8f8f8;
}
.v3 {
background: linear-gradient(0deg, #ff4646, #ff6b6b, #f86f6f, #ff9494);
}
#chart {
width: 690rpx;
height: 320rpx;
}

2211
src/pages/iotCarePlan/iotCarePlan.tsx
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save