diff --git a/src/moduleIOT/pages/iotCarePlan/FR200.less b/src/moduleIOT/pages/iotCarePlan/FR200.less index a8d2e3b..8d9921f 100644 --- a/src/moduleIOT/pages/iotCarePlan/FR200.less +++ b/src/moduleIOT/pages/iotCarePlan/FR200.less @@ -1,8 +1,20 @@ @import url(./WL200.less); - +.music { + width: 54rpx; + height: 54rpx; + background: rgba(255, 255, 255, 0.6); + border-radius: 50%; + position: absolute; + right: 20rpx; + top: 20rpx; + image { + width: 100%; + height: 100%; + } +} .fr200-iot-device { width: 690rpx; - height: 150rpx; + height: 100rpx; display: flex; align-items: center; justify-content: center; diff --git a/src/moduleIOT/pages/iotCarePlan/FR200.tsx b/src/moduleIOT/pages/iotCarePlan/FR200.tsx index 2612a0f..161fe7d 100644 --- a/src/moduleIOT/pages/iotCarePlan/FR200.tsx +++ b/src/moduleIOT/pages/iotCarePlan/FR200.tsx @@ -172,7 +172,7 @@ class IotCarePlanFR200 extends Component { isConnectionBlutoot: true, // 是否已连接蓝牙 isShowNurse: true, // 是否开始并显示护理 FR200默认已经开始准备护理 isStopNurse: false, // 是否暂停护理 - isEndNurse: false, // 是否结束护理 + // isEndNurse: false, // 是否结束护理 errorTips: "", // 错误提示 /** 护理过程 END*/ @@ -184,7 +184,7 @@ class IotCarePlanFR200 extends Component { ModeList: [], ModeType: "all", // all 1基础护理 2专区护理 3专研促渗 4敏期护理 5智能测肤 ActiveModeItem: { - modeType: "", + modeType: "face", openSourceData: [], }, // 当前选中模式 SwitchActiveModeItem: { @@ -233,7 +233,7 @@ class IotCarePlanFR200 extends Component { echartsData: "", //传给echarts图表的数据 series: [ { - data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4], + data: [], type: "line", smooth: true, z: 1, @@ -241,10 +241,10 @@ class IotCarePlanFR200 extends Component { color: "red", }, { - data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4], + data: [], type: "line", smooth: true, - symbolSize: 10, + symbolSize: 5, lineStyle: { color: "#ff8410", width: 1, @@ -255,9 +255,9 @@ class IotCarePlanFR200 extends Component { }, { name: "a", - data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], type: "bar", - barWidth: 22, + barWidth: 12, z: 2, stack: "x", visualMap: false, @@ -267,7 +267,7 @@ class IotCarePlanFR200 extends Component { }, { name: "b", - data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], type: "bar", z: 2, stack: "x", @@ -278,7 +278,7 @@ class IotCarePlanFR200 extends Component { }, { name: "c", - data: [0, 1, 1, 1, 1, 1, 1, 1, 1, 1], + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], type: "bar", z: 2, stack: "x", @@ -289,7 +289,7 @@ class IotCarePlanFR200 extends Component { }, { name: "d", - data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 1], + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], type: "bar", z: 2, stack: "x", @@ -300,7 +300,7 @@ class IotCarePlanFR200 extends Component { }, { name: "e", - data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 0], + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], type: "bar", z: 2, stack: "x", @@ -311,7 +311,7 @@ class IotCarePlanFR200 extends Component { }, { name: "f", - data: [0, 0, 0, 0, 0, 1, 1, 0, 1, 0], + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], type: "bar", z: 2, stack: "x", @@ -322,7 +322,7 @@ class IotCarePlanFR200 extends Component { }, { name: "h", - data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0], + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], type: "bar", z: 2, stack: "x", @@ -333,7 +333,7 @@ class IotCarePlanFR200 extends Component { }, { name: "i", - data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0], + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], type: "bar", z: 2, stack: "x", @@ -343,6 +343,12 @@ class IotCarePlanFR200 extends Component { }, }, ], + time: { + min: 0, + second: 0 + }, + timeArr: [], + videoVoiceStatus: false }; } bluetoothContainer: any = null; @@ -403,9 +409,9 @@ class IotCarePlanFR200 extends Component { this.getInstrumentClockSummary(); this.getInstrumentClockDetail(); } - componentDidMount() {} + componentDidMount() { } - componentWillUnmount() {} + componentWillUnmount() { } componentDidShow() { console.log("页面显示了"); @@ -435,6 +441,24 @@ class IotCarePlanFR200 extends Component { title: obj.name, }); + let sendParams: any = { + // ...deviceCommandSamples.pause, + // workMode: 'moistureTest', // 使用模式 + commandType: "DeviceStatusSync", + deviceSyncCommandType: 'onlySyncStatusToDevice', + totalWorkingSeconds: 0, + workStatus: "pause", + workMode: 'face', + }; + sendParams.gear = 1; + let pauseArrayBuffer = deviceToolKitInstance.toBleCommand( + sendParams as any + ); + sendCommand({ + value: pauseArrayBuffer, + }).then((res) => console.log("同步为0=====》", res)); + + await this.GetModeList(obj?.id); // 如果不存在设备模式值，则判断为首次进入，弹窗提示 @@ -448,7 +472,7 @@ class IotCarePlanFR200 extends Component { const platform = Taro.getSystemInfoSync().platform; if (platform !== "devtools") { // 仅手机端初始化蓝牙 - // this.init(); + this.init(); } } @@ -573,7 +597,7 @@ class IotCarePlanFR200 extends Component { * @name 选中/切换护理模式 * */ modeCurrentFun = async (data, isNotCheck = false) => { - let { isShowNurse, activeModeID } = this.state; + let { isShowNurse, activeModeID, series } = this.state; // 护理检查改变模式，是否提示切换护理模式 // isNotCheck为真时，不进行校验，直接切换 this.tempModeCurrent = data; @@ -603,6 +627,15 @@ class IotCarePlanFR200 extends Component { currentWorkModeType = 2; } + series.map(item => { + if (item.type == 'line') { + item.data = [] + } else { + item.data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] + } + }) + + this.setState({ ActiveModeItem: data, activeModeID: data?.id, @@ -612,6 +645,7 @@ class IotCarePlanFR200 extends Component { MaskModeStepIndex: 0, // 面膜促渗步骤 ModeType: this.ModeTypeArray[data.modeClass], currentWorkModeType, + series }); // 切换模式时：重新设置视频地址 @@ -860,36 +894,53 @@ class IotCarePlanFR200 extends Component { let textshow = this.state.textshow; this.setState({ textshow: !textshow }); } - updata() { - let that = this; - let stop = 0; - let time = setInterval(function () { - stop++; - let series = JSON.parse(JSON.stringify(that.state.series)); - let num = Math.floor(Math.random() * 9); - let count = 0; - series.map((item) => { - if (item.type === "line") { + updata(level = 1, min = 0, seconds = 0) { + if (seconds == 0 && min == 0) { + return + } + // let that = this; + // let stop = 0; + // let time = setInterval(function () { + // stop++; + let series = JSON.parse(JSON.stringify(this.state.series)); + let num = level + let count = 0; + series.map((item) => { + if (item.type === "line") { + if (item.data.length >= 10) { item.data.splice(0, 1); - item.data.push(num); } - if (item.type === "bar") { - count++; + item.data.push(num); + } + if (item.type === "bar") { + count++; + if (seconds > 10) { item.data.splice(0, 1); if (count <= num) { item.data.push(1); } else { item.data.push(0); } + } else { + if (count <= num) { + item.data.splice(seconds - 1, 1, 1) + } else { + item.data.splice(seconds - 1, 1, 0) + } } - }); - - // 更新图表数据 - that.setState({ series }); - if (stop >= 20) { - clearInterval(time); } - }, 1000); + }); + let time = JSON.parse(JSON.stringify(this.state.time)); + time.min = min + time.second = seconds + // 更新图表数据 + this.setState({ series }); + this.setState({ time }); + + // if (stop >= 20) { + // clearInterval(time); + // } + // }, 1000); } full() { @@ -1040,6 +1091,7 @@ class IotCarePlanFR200 extends Component { // 更新界面倒计时 this.resetTimer(); + if ( sceneTime > totalTime && this.isRuning && @@ -1329,6 +1381,15 @@ class IotCarePlanFR200 extends Component { } } + + /** + * 视频声音切换 + */ + videoVoiceStatusChange() { + let { videoVoiceStatus } = this.state; + this.setState({ videoVoiceStatus: !videoVoiceStatus }) + + } /** @name 精华促渗下一步,根据时间自动调用 */ essencePenetrationNext() { let { @@ -1843,8 +1904,27 @@ class IotCarePlanFR200 extends Component { Taro.setStorageSync("FR200NursingHistory", params); console.log("保存setFR200NursingHistory"); }; + + + formatTime(min, sec) { + let mins + if (min < 10) { + mins = '0' + min; + } else { + mins = min; + } + let secs + if (sec < 10) { + secs = '0' + sec; + } else { + secs = sec; + } + return `${mins.toString()}:${secs.toString()}`; + } /** 更新WL200护理历史运行时间 */ updateFR200NursingHistory = (data: any = null, jsonStatus: any = null) => { + console.log(11111111); + this.FR200NursingHistory = Taro.getStorageSync("FR200NursingHistory"); if (this.FR200NursingHistory) { @@ -1857,6 +1937,19 @@ class IotCarePlanFR200 extends Component { // 设置正确封面 if (!data) { if (jsonStatus) { + let { timeArr } = this.state + let newTime = this.formatTime(jsonStatus.totalWorkingMinutes, jsonStatus.totalWorkingSeconds) + let flag = false + timeArr.map(item => { + if (newTime === item) { + flag = true + } + }) + if (flag) { + return + } + timeArr.push(newTime) + this.setState({ timeArr }) // 缓存每秒数据 if (!params.dataArray) params.dataArray = []; params.dataArray.push(jsonStatus); @@ -1864,8 +1957,17 @@ class IotCarePlanFR200 extends Component { params.workMode = jsonStatus?.workMode; params.modeId = this.state.ActiveModeItem?.id; params.modeName = this.state.ActiveModeItem.modeName; + let impedance = jsonStatus.impedance + let level = impedance - 200 + if (level < 0) { + level = 1 + } else { + level = Math.ceil(level / 80) + 1 + } + console.log('min:', jsonStatus.totalWorkingMinutes, ' ', 'sec', jsonStatus.totalWorkingSeconds); + + this.updata(level, jsonStatus.totalWorkingMinutes, jsonStatus.totalWorkingSeconds) - console.log(jsonStatus, 555555555555); } } else { params.jsonStatus = jsonStatus; @@ -2180,11 +2282,11 @@ class IotCarePlanFR200 extends Component { let report = true; go( "/recoding/pages/face_report_one/face_report_one?id=" + - ids + - "&report=" + - report + - "&obj=" + - JSON.stringify(obj) + ids + + "&report=" + + report + + "&obj=" + + JSON.stringify(obj) ); } else if ("moistureTest" === nursingData.workMode) { console.log("水分测试"); @@ -2195,11 +2297,11 @@ class IotCarePlanFR200 extends Component { go( "/recoding/pages/face_report/face_report?id=" + - deviceid + - "&recordId=" + - currentDevice + - "&report=" + - report + deviceid + + "&recordId=" + + currentDevice + + "&report=" + + report ); } }; @@ -2387,7 +2489,9 @@ class IotCarePlanFR200 extends Component { echartsData, isShowReReadRecordConnect, series, + time, isFullScreen, + videoVoiceStatus } = this.state; return ( @@ -2406,19 +2510,19 @@ class IotCarePlanFR200 extends Component { { isLarge isClose isShow={isEndCarePlan} - title="提示" - content="是否结束护理" - textAlgin="center" - cancelButtonText="取消" - confirmButtonText="确定" + title='提示' + content='是否结束护理' + textAlgin='center' + cancelButtonText='取消' + confirmButtonText='确定' close={this.cancelEndBtn} confirm={this.confirmEndBtn} /> @@ -2442,7 +2546,7 @@ class IotCarePlanFR200 extends Component { isLarge isClose isShow={isSwitchActiveMode} - title="护理模式切换" + title='护理模式切换' content={ { onModeLockOpen={this.onModeLockOpen} /> } - textAlgin="center" - cancelButtonText="取消" - confirmButtonText="确定" + textAlgin='center' + cancelButtonText='取消' + confirmButtonText='确定' close={this.cancelModeSwitchBtn} confirm={this.confirmModeSwitchBtn} /> @@ -2468,7 +2572,7 @@ class IotCarePlanFR200 extends Component { isShow={isShowStepTips} isLarge isFirstEntry={false} - confirmButtonText="知道了" + confirmButtonText='知道了' data={ActiveModeItem.openSourceData} close={this.closeStepTips} /> @@ -2477,10 +2581,10 @@ class IotCarePlanFR200 extends Component { @@ -2489,11 +2593,11 @@ class IotCarePlanFR200 extends Component { isShow={isShowErrorTipsText} isClose zIndex={10020} - myClassName="level-up" - title="提示" + myClassName='level-up' + title='提示' content={errorTipsText} - confirmButtonText="知道了" - textAlgin="center" + confirmButtonText='知道了' + textAlgin='center' close={this.closeErrorTipsText} confirm={this.closeErrorTipsText} /> @@ -2502,17 +2606,17 @@ class IotCarePlanFR200 extends Component { isShow={isShowTipsSave} isClose zIndex={10020} - myClassName="level-up" - title="提示" + myClassName='level-up' + title='提示' content={ 当前模式已护理部分时间 是否保存护理记录 } - cancelButtonText="取消" - confirmButtonText="确认" - textAlgin="center" + cancelButtonText='取消' + confirmButtonText='确认' + textAlgin='center' close={this.closeTipsSave} cancel={this.cancelTipsSave} confirm={this.confirmTipsSave} @@ -2521,11 +2625,11 @@ class IotCarePlanFR200 extends Component { { /*不需要做处理*/ }} @@ -2536,32 +2640,33 @@ class IotCarePlanFR200 extends Component { deviceInfo={currentDevice} close={this.connectionClose} isDisconnect={!isConnectionBlutoot} - offlineChange={() => {}} + offlineChange={() => { }} pairingChange={this.pairingChange} - upgradeFun={() => {}} + upgradeFun={() => { }} /> )} - 正在同步护理记录... + 正在同步护理记录... - + {isFullScreen && ( - + - - - - + + + + + + 倒计时： - {currentTime} + {currentTime} - - - 档位：{currentGear}档 + + + 档位：{currentGear}档 - + { onModeLockOpen={this.onModeLockOpen} /> )} - - - + {/* */} + + + {(ActiveModeItem?.modeType === "maskPenetration" || diff --git a/src/moduleIOT/pages/iotCarePlan/components/Bluetoot/FR200.ts b/src/moduleIOT/pages/iotCarePlan/components/Bluetoot/FR200.ts index 20d5e7c..8988d20 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Bluetoot/FR200.ts +++ b/src/moduleIOT/pages/iotCarePlan/components/Bluetoot/FR200.ts @@ -136,6 +136,7 @@ export default class BluetoothContainer { workMode: jsonStatus?.workMode, // 仅当设备上报模式与小程序一致时，才允许改变小程序变量缓存 }); } + console.log("this.that.isRuning",this.that.isRuning) // 判断设备是否在运行中(护理中) // 仅当设备模式与小程序是否一致，才允许更改设备运行时间 if (this.that.isRuning) { diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less index 2c746aa..e7b08df 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less @@ -7,86 +7,106 @@ padding: 35rpx 25rpx 25rpx 35rpx; box-sizing: border-box; position: relative; +} + +.fullscreen { + position: fixed; + top: 450rpx; + left: -450rpx; + right: 0; + bottom: 0; + width: 100vh; + height: 100vw; + z-index: 9999; + background-color: rgba(0, 0, 0, 0.5); /* 背景色 */ + transform: rotate(90deg); + // animation: rotate 0s linear; +} - .fullscreen { - position: fixed; - top: 450rpx; - left: -450rpx; - right: 0; - bottom: 0; +@keyframes echartRotate { + from { + width: 690rpx; + height: 320rpx; + transform: rotate(0deg); + } + to { width: 100vh; height: 100vw; - z-index: 9999; - background-color: rgba(0, 0, 0, 0.5); /* 背景色 */ - transform: rotate(90deg); - // animation: rotate 0s linear; + transform: rotate(0deg); } +} - @keyframes echartRotate { - from { - width: 690rpx; - height: 320rpx; - transform: rotate(0deg); - } - to { - width: 100vh; - height: 100vw; - transform: rotate(0deg); - } +.box_background { + position: absolute; + top: 0; + left: 0; + width: 690rpx; + height: 320rpx; + border-radius: 30rpx; + background-color: #fff; + .power { + margin: 34rpx 0 28rpx 28rpx; + font-family: PingFang-SC; + font-weight: 500; + font-size: 18rpx; + color: #cccccc; } - - .box_background { + .full { + width: 24rpx; + height: 24rpx; position: absolute; - top: 0; - left: 0; - width: 690rpx; - height: 320rpx; - border-radius: 30rpx; - background-color: #fff; - .power { - margin: 34rpx 0 28rpx 28rpx; - font-family: PingFang-SC; - font-weight: 500; - font-size: 18rpx; - color: #cccccc; - } - .full { - width: 24rpx; - height: 24rpx; - position: absolute; - top: 32rpx; - right: 26rpx; - z-index: 2; - } - .line { - margin: 0 0 6rpx 35rpx; - font-family: PingFang-SC; - font-size: 14rpx; - color: #cccccc; - display: flex; - position: relative; - height: 18rpx; - .bottom_line { - // border-bottom: 1rpx #ccc dashed; - width: 550rpx; - margin-left: 20rpx; - position: absolute; - bottom: -6rpx; - right: 74rpx; - height: 4rpx; - color: #fff; - } - } - - .time { + top: 32rpx; + right: 26rpx; + z-index: 2; + } + .line { + margin: 0 0 6rpx 35rpx; + font-family: PingFang-SC; + font-size: 14rpx; + color: #cccccc; + display: flex; + position: relative; + height: 18rpx; + .bottom_line { + // border-bottom: 1rpx #ccc dashed; + width: 550rpx; + margin-left: 20rpx; position: absolute; - bottom: 22rpx; - right: 24rpx; - font-family: PingFang-SC; - font-size: 18rpx; - color: #cccccc; + bottom: -6rpx; + right: 74rpx; + height: 4rpx; + color: #fff; } } + .time_list { + position: absolute; + bottom: 28rpx; + left: 72rpx; + font-family: PingFang-SC; + font-size: 15rpx; + color: #cccccc; + width: 540rpx; + justify-content: space-around; + } + .time { + position: absolute; + bottom: 22rpx; + right: 24rpx; + font-family: PingFang-SC; + font-size: 18rpx; + color: #cccccc; + } +} + +.echart-component-full { + width: 690rpx; + height: 320rpx; + margin: 0rpx auto; + background-color: #fff; + border-radius: 30rpx; + padding: 35rpx 25rpx 25rpx 35rpx; + box-sizing: border-box; + position: relative; } page { diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx index a068416..0ffc012 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx @@ -11,9 +11,10 @@ import "./index.less"; interface Props { series: any; full: any; + time: any } -function Index({ series, full }: Props) { +function Index({ series, full, time }: Props) { const echartsRef = useRef(null); const [options, setOptions] = useState({ animation: false, @@ -49,24 +50,13 @@ function Index({ series, full }: Props) { }, axisLabel: { //坐标轴刻度标签的相关设置 - color: "#cccccc", - fontSize: 8, + color: "#fff", + fontSize: 1, }, axisTick: { show: false, }, - data: [ - "00:01", - "00:02", - "00:03", - "00:04", - "00:05", - "00:06", - "00:07", - "00:08", - "00:09", - "00:10", - ], + data: [], }, yAxis: { type: "value", @@ -282,9 +272,25 @@ function Index({ series, full }: Props) { // } const level = [8, 7, 6, 5, 4, 3, 2]; + const [isFull, setIsfull] = useState(false) + const [data, setData] = useState([ + "00:01", + "00:02", + "00:03", + "00:04", + "00:05", + "00:06", + "00:07", + "00:08", + "00:09", + "00:10", + ],) const [newOptions, setNewOptions] = useState(options); - const updata = useCallback((res) => { + const updata = useCallback((res, times) => { + if (times.second == 0) { + return + } // let option // if (data) { // option = JSON.parse(JSON.stringify(newParams)) @@ -292,19 +298,41 @@ function Index({ series, full }: Props) { // option = JSON.parse(JSON.stringify(options)) // } let option = JSON.parse(JSON.stringify(options)) + let datas = JSON.parse(JSON.stringify(data)) + if (times.min > 0 || times.second > 10) { + datas.splice(0, 1) + datas.push(formatTime(times)) + } + setData(JSON.parse(JSON.stringify(datas))) + // option.xAxis.data = data option.series = JSON.parse(JSON.stringify(res)) // 更新图表数据 setNewOptions(option); - }, []); + }, [data]); + + + + function formatTime(times: any) { + let mins + if (times.min < 10) { + mins = '0' + times.min; + } else { + mins = times.min; + } + let secs + if (times.second < 10) { + secs = '0' + times.second; + } else { + secs = times.second; + } + return `${mins.toString()}:${secs.toString()}`; + } const cancelFull = useCallback((res) => { - // let option = JSON.parse(JSON.stringify(newParams)) - // setNewOptions(option) - // console.log(data, 88888); - // data = !data - // console.log(data, 88888); full() - }, []) + setIsfull(!isFull) + + }, [isFull]) @@ -313,14 +341,14 @@ function Index({ series, full }: Props) { }, [newOptions]); useEffect(() => { - updata(series); + updata(series, time); }, [series]); return ( - + - + - 实时能量 + 实时能量 {level.map((item) => ( - - {item} - + + {item} + ))} - - 1 + + 1 + + + { + data.map((times, index) => ( + {times} + )) + } - 时间 + 时间