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

调节器的封装

Browse Source
master
qsj 2 years ago
parent 16936e7429
commit e8bd41ad75
5 changed files with 252 additions and 213 deletions
Show Stats Download Patch File Download Diff File

14
project.private.config.json
Unescape Escape View File

@ -3,6 +3,20 @@
"condition": { "condition": {
"miniprogram": { "miniprogram": {
"list": [ "list": [
{
"name": "moduleIOT/pages/iotCarePlan/WL200",
"pathName": "moduleIOT/pages/iotCarePlan/WL200",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "pages/index/index",
"pathName": "pages/index/index",
"query": "",
"launchMode": "default",
"scene": null
},
{ {
"name": "pages/face_report_one/face_report_one", "name": "pages/face_report_one/face_report_one",
"pathName": "pages/face_report_one/face_report_one", "pathName": "pages/face_report_one/face_report_one",

28
src/moduleIOT/pages/iotCarePlan/FR200.tsx
Unescape Escape View File

@ -11,6 +11,7 @@ import React, {
} from "react"; } from "react";
import Echarts from "./components/Echart/index"; import Echarts from "./components/Echart/index";
import Gears from "./components/Gears/index"
import { import {
Block, Block,
View, View,
@ -126,6 +127,12 @@ class IotCarePlanFR200 extends Component<any, any> {
matrixElectricity: 4, // WE200发箍电量 matrixElectricity: 4, // WE200发箍电量
workMode: "", //当前模式 workMode: "", //当前模式
// 挡位调节组件参数
GearData:[
{name:'额头',forehead:5,Total:10},
{name:'左脸颊',forehead:6,Total:10},
{name:'右脸颊',forehead:2,Total:10},
],
gear: { gear: 1 }, gear: { gear: 1 },
currentShowDialog: "", currentShowDialog: "",
@ -497,6 +504,22 @@ class IotCarePlanFR200 extends Component<any, any> {
} }
return false; return false;
} }
// 加减组件- 减号操作
handleMinus = async (data,inde) => {
let GearData =this.state.GearData
if(GearData[inde].forehead !== 1){
GearData[inde].forehead = GearData[inde].forehead - 1
this.setState({GearData})
}
};
// 加减组件- 加号操作
handleAdd = async (data,inde) => {
let GearData =this.state.GearData
if(GearData[inde].forehead !== GearData[inde].Total){
GearData[inde].forehead = GearData[inde].forehead + 1
this.setState({GearData})
}
};
/** 切换护理模式 */ /** 切换护理模式 */
switchModeCurrentFun = async (data) => { switchModeCurrentFun = async (data) => {
@ -1990,6 +2013,7 @@ class IotCarePlanFR200 extends Component<any, any> {
let { let {
title, title,
isConnectShow, isConnectShow,
GearData,
isShowStepTips, isShowStepTips,
isShowNurse, isShowNurse,
isStopNurse, isStopNurse,
@ -2249,6 +2273,10 @@ class IotCarePlanFR200 extends Component<any, any> {
)} )}
<Echarts></Echarts> <Echarts></Echarts>
<Gears
onEmitMinus={this.handleMinus}
onEmitAdd={this.handleAdd}
GearData={GearData}></Gears>
</View> </View>
<Footer <Footer

3
src/moduleIOT/pages/iotCarePlan/components/Gears/index.less
Unescape Escape View File

@ -71,6 +71,9 @@ page {
height: 28rpx; height: 28rpx;
} }
} }
.button_minus_zero {
background: unset !important;
}
.button_plus { .button_plus {
width: 90rpx; width: 90rpx;

398
src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx
Unescape Escape View File

@ -2,230 +2,222 @@ import Taro from "@tarojs/taro";
import classnames from "classnames"; import classnames from "classnames";
import { Block, View, Image, Text, Input } from "@tarojs/components"; import { Block, View, Image, Text, Input } from "@tarojs/components";
import { Popup, Progress, Slider } from "@antmjs/vantui"; import { Popup, Progress, Slider } from "@antmjs/vantui";
import React, { useState } from 'react';
import "./index.less"; import "./index.less";
interface Props { interface Props {
Electricity: any; // Electricity: any;
matrixElectricity: any; // matrixElectricity: any;
facialMaskConnectStatus: any; // facialMaskConnectStatus: any;
onEmitMinus:Function
onEmitAdd:Function
GearData:any
} }
function Index() { function Index({
const gearLevel = { GearData,
currentGear: null, onEmitMinus,
//现在工作的档位 onEmitAdd
currentGearMode: "forehead", }:Props) {
//现在工作模式 // 挡位调节
forehead: 5, // const gearLevel = {
leftCheek: 5, // currentGear: null,
rightCheek: 5, // //现在工作的档位
}; // currentGearMode: "forehead",
// //现在工作模式
// forehead: 5,
// leftCheek: 5,
// rightCheek: 5,
// };
// // // 挡位调节
// const hangeGearAdjustment =(value) =>{
// console.log(value,'查看');
return ( // }
<Block> // const gearLevelViews =() =>{
<View> // return (
<View className='gear_adjust'> // <> <View>
<View className='title'>档位调节</View> // <View className='gear_adjust'>
<View className='gear_box'> // <View className='title'>档位调节</View>
<View className='gear flex aitems'> // <View className='gear_box'>
<View className='pos'>额头</View> // <View className='gear flex aitems'>
<Slider // <View className='pos'>额头</View>
style={{ // <Slider
flex: "1", // style={{
}} // flex: "1",
value={gearLevel.forehead} // }}
min={1} // value={gearLevel.forehead}
max={10} // min={1}
inactiveColor='#F8F8F8' // max={10}
activeColor={ // inactiveColor='#F8F8F8'
gearLevel.currentGearMode == "forehead" // activeColor={
? "#EECDA1" // gearLevel.currentGearMode == "forehead"
: "#CCCCCC" // ? "#EECDA1"
} // : "#CCCCCC"
disabled={gearLevel.currentGearMode !== "forehead"} // }
barHeight={6} // disabled={gearLevel.currentGearMode !== "forehead"}
// useButtonSlot // barHeight={6}
data-key='forehead' // // useButtonSlot
// onDrag={this.onDrag} // data-key='forehead'
// onChange={this.onChange} // // onDrag={this.onDrag}
renderButton={ // onChange={hangeGearAdjustment}
<Block> // renderButton={
<View // <Block>
className={ // <View
"custom-button " + // className={
(gearLevel.currentGearMode !== "forehead" && // "custom-button " +
"current-button") // (gearLevel.currentGearMode !== "forehead" &&
} // "current-button")
> // }
<View className='circle'></View> // >
<View className='level'> // <View className='circle'></View>
{gearLevel.forehead + "档"} // <View className='level'>
</View> // {gearLevel.forehead + "档"}
</View> // </View>
</Block> // </View>
} // </Block>
></Slider> // }
</View> // ></Slider>
<View className='gear flex aitems'> // </View>
<View className='pos'>左脸颊</View> // <View className='gear flex aitems'>
<Slider // <View className='pos'>左脸颊</View>
style={{ // <Slider
flex: "1", // style={{
}} // flex: "1",
value={gearLevel.leftCheek} // }}
min={1} // value={gearLevel.leftCheek}
max={10} // min={1}
inactiveColor='#F8F8F8' // max={10}
activeColor={ // inactiveColor='#F8F8F8'
gearLevel.currentGearMode == "leftCheek" // activeColor={
? "#EECDA1" // gearLevel.currentGearMode == "leftCheek"
: "#CCCCCC" // ? "#EECDA1"
} // : "#CCCCCC"
disabled={gearLevel.currentGearMode !== "leftCheek"} // }
barHeight={6} // disabled={gearLevel.currentGearMode !== "leftCheek"}
// useButtonSlot // barHeight={6}
data-key='leftCheek' // // useButtonSlot
// onDrag={this.onDrag} // data-key='leftCheek'
// onChange={this.onChange} // // onDrag={this.onDrag}
renderButton={ // // onChange={this.onChange}
<Block> // onChange={hangeGearAdjustment}
<View // renderButton={
className={ // <Block>
"custom-button " + // <View
(gearLevel.currentGearMode !== "leftCheek" && // className={
"current-button") // "custom-button " +
} // (gearLevel.currentGearMode !== "leftCheek" &&
> // "current-button")
<View className='circle'></View> // }
<View className='level'> // >
{gearLevel.leftCheek + "档"} // <View className='circle'></View>
</View> // <View className='level'>
</View> // {gearLevel.leftCheek + "档"}
</Block> // </View>
} // </View>
></Slider> // </Block>
</View> // }
<View className='gear flex aitems'> // ></Slider>
<View className='pos'>右脸颊</View> // </View>
<Slider // <View className='gear flex aitems'>
style={{ // <View className='pos'>右脸颊</View>
flex: "1", // <Slider
}} // style={{
value={gearLevel.rightCheek} // flex: "1",
min={1} // }}
max={10} // value={gearLevel.rightCheek}
inactiveColor='#F8F8F8' // min={1}
activeColor={ // max={10}
gearLevel.currentGearMode == "rightCheek" // inactiveColor='#F8F8F8'
? "#EECDA1" // activeColor={
: "#CCCCCC" // gearLevel.currentGearMode == "rightCheek"
} // ? "#EECDA1"
disabled={gearLevel.currentGearMode !== "rightCheek"} // : "#CCCCCC"
barHeight={6} // }
// useButtonSlot // disabled={gearLevel.currentGearMode !== "rightCheek"}
data-key='rightCheek' // barHeight={6}
// onDrag={this.onDrag} // // useButtonSlot
// onChange={this.onChange} // data-key='rightCheek'
renderButton={ // // onDrag={this.onDrag}
<Block> // // onChange={this.onChange}
<View // renderButton={
className={ // <Block>
"custom-button flex jcenter aitems " + // <View
(gearLevel.currentGearMode !== "rightCheek" && // className={
"current-button") // "custom-button flex jcenter aitems " +
} // (gearLevel.currentGearMode !== "rightCheek" &&
> // "current-button")
<View className='circle'></View> // }
<View className='level'> // >
{gearLevel.rightCheek + "档"} // <View className='circle'></View>
</View> // <View className='level'>
</View> // {gearLevel.rightCheek + "档"}
</Block> // </View>
} // </View>
></Slider> // </Block>
</View> // }
{/* <View className='level_box flex aitems'> // ></Slider>
{(10).map((item, index) => { // </View>
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='level_box flex aitems'>
<View className='pos'>额头</View> // {(10).map((item, index) => {
<View className='gear_button flex aitems'> // return (
<View className='button_minus'> // <View key={item}
<Image // className='level_num'
className='image' // style={{
src={require("@/img/fr200/minus.png")} // marginRight: '1.225rem',
></Image> // }}
</View> // >
<View className='button_value'> // {item + 1}
<View className='number'>1</View>档 // </View>
</View> // )
<View className='button_plus'> // })}
<Image // </View> */}
className='image' // </View>
src={require("@/img/fr200/add.png")} // </View>
></Image> // </View></>
</View> // );
</View> // }
</View>
<View className='gear flex aitems'>
<View className='pos'>左脸颊</View> // 使用 map() 方法创建动态循环
<View className='gear_button flex aitems'> const gearViews = GearData.map((gear, index) => (
<View className='button_minus'> <View key={index} className='gear flex aitems'>
<Image <View className='pos'>{gear.name}</View>
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='gear_button flex aitems'>
<View className='button_minus'> <View className={gear.forehead === 1 ? 'button_minus button_minus_zero' : 'button_minus'}>
<Image <Image
className='image' className='image'
src={require("@/img/fr200/minus.png")} src={require('@/img/fr200/minus.png')}
onClick={() => onEmitMinus(gear,index)}
></Image> ></Image>
</View> </View>
<View className='button_value'> <View className='button_value'>
<View className='number'>1</View>档 <View className='number'>{gear.forehead}</View>档
</View> </View>
<View className='button_plus'> <View className={gear.forehead === gear.Total ? 'button_plus button_minus_zero' : 'button_plus'}>
<Image <Image
className='image' className='image'
src={require("@/img/fr200/add.png")} src={require('@/img/fr200/add.png')}
onClick={() => onEmitAdd(gear,index)}
></Image> ></Image>
</View> </View>
</View> </View>
</View> </View>
));
return (
<Block>
{/* {gearLevelViews} */}
<View className='gear_adjustment'>
<View className='gear_box'>
{gearViews}
</View> </View>
</View> </View>
</Block> </Block>

2
src/pages/index/index.tsx
Unescape Escape View File

@ -840,6 +840,8 @@ class Index extends Component<any, any> {
// 跳转仪器介绍页 // 跳转仪器介绍页
goNursing = (item) => { goNursing = (item) => {
console.log(item,'查看item');
// 仅开发者工具调试使用 // 仅开发者工具调试使用
const platform = Taro.getSystemInfoSync().platform; const platform = Taro.getSystemInfoSync().platform;
if (platform === "devtools") { if (platform === "devtools") {

Write Preview
Loading…
Cancel
Save