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;

416
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,'查看');
// }
// const gearLevelViews =() =>{
// return (
// <> <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={hangeGearAdjustment}
// 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}
// onChange={hangeGearAdjustment}
// 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></>
// );
// }
// 使用 map() 方法创建动态循环
const gearViews = GearData.map((gear, index) => (
<View key={index} className='gear flex aitems'>
<View className='pos'>{gear.name}</View>
<View className='gear_button flex aitems'>
<View className={gear.forehead === 1 ? 'button_minus button_minus_zero' : 'button_minus'}>
<Image
className='image'
src={require('@/img/fr200/minus.png')}
onClick={() => onEmitMinus(gear,index)}
></Image>
</View>
<View className='button_value'>
<View className='number'>{gear.forehead}</View>档
</View>
<View className={gear.forehead === gear.Total ? 'button_plus button_minus_zero' : 'button_plus'}>
<Image
className='image'
src={require('@/img/fr200/add.png')}
onClick={() => onEmitAdd(gear,index)}
></Image>
</View>
</View>
</View>
));
return ( return (
<Block> <Block>
<View> {/* {gearLevelViews} */}
<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_adjustment'>
<View className='gear_box'> <View className='gear_box'>
<View className='gear flex aitems'> {gearViews}
<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>
</View> </View>
</Block> </Block>

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

@ -839,7 +839,9 @@ 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