diff --git a/src/moduleIOT/pages/iotCarePlan/FR200.tsx b/src/moduleIOT/pages/iotCarePlan/FR200.tsx index 8c804e2..88b7fb9 100644 --- a/src/moduleIOT/pages/iotCarePlan/FR200.tsx +++ b/src/moduleIOT/pages/iotCarePlan/FR200.tsx @@ -63,6 +63,8 @@ import WaterTest from "./components/WaterTest/index"; /* 本页组件 END */ import Echarts from "./components/Echart"; +import EchartsFullScean from "./components/EchartFullScean"; + import Gears from "./components/Gears"; import "./FR200.less"; @@ -231,9 +233,121 @@ class IotCarePlanFR200 extends Component { isShowHistoryMsg: false, // 是否显示正在同步历史 showEcharts: false, echartsData: "", //传给echarts图表的数据 + 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: 10, + lineStyle: { + color: "#ff8410", + width: 1, + }, + itemStyle: { + color: "#ff8410", + }, + }, + { + name: "a", + data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + type: "bar", + barWidth: 22, + 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", + }, + }, + ] }; } - + isFullScreen: boolean = false; // 不涉及渲染的页面变量 isRuning: any = true; // 设备默认运行中：fr200贴脸就会自动开始工作 jsonStatus: any = {}; // 同步设备返回数据，用于结束 @@ -290,9 +404,9 @@ class IotCarePlanFR200 extends Component { this.getInstrumentClockSummary(); this.getInstrumentClockDetail(); } - componentDidMount() {} + componentDidMount() { } - componentWillUnmount() {} + componentWillUnmount() { } componentDidShow() { console.log("页面显示了"); @@ -339,43 +453,6 @@ class IotCarePlanFR200 extends Component { } } - getOption() { - const option = { - grid: { top: 8, right: 8, bottom: 24, left: 36 }, - xAxis: { - type: "category", - data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], - }, - yAxis: { - type: "value", - }, - series: [ - { - data: [820, 932, 901, 934, 1290, 1330, 1320], - type: "line", - smooth: true, - }, - ], - tooltip: { - trigger: "axis", - }, - // title: { - // text: 'ECharts 示例' - // }, - // tooltip: {}, - // xAxis: { - // data: ['A', 'B', 'C', 'D', 'E'] - // }, - // yAxis: {}, - // series: [{ - // name: '数量', - // type: 'bar', - // data: [5, 20, 36, 10, 10] - // }] - }; - return option; - } - async init() { // 查询离线记录汇总 const queryInstructionParams = { @@ -730,8 +807,6 @@ class IotCarePlanFR200 extends Component { let gears: any = []; let eDate: any = []; echartsData?.map((item) => { - console.log(item, "查看数据"); - const result = item.createTime.split(" ")[0].substring(5); eDate.push(result); item.nursingData = JSON.parse(item.nursingData); @@ -746,9 +821,6 @@ class IotCarePlanFR200 extends Component { gears, eDate, }; - setStorageSync("moistureEachtsData", JSON.stringify(echartsData)); - - // go(`/recoding/pages/moisture_test_report/moisture_test_report?data=${allData.nursingData}&date=${allData.createTime}&modeId=${allData.modeId}&id=${allData.instrumentId}&echartsData=${JSON.stringify(echartsData)}`); go( `/recoding/pages/moisture_test_report/moisture_test_report?data=${nursingData}&date=${formattedDate}&modeId=${ActiveModeItemId}&id=${currentDeviceId}&echartsData=${JSON.stringify( echartsData @@ -768,23 +840,42 @@ class IotCarePlanFR200 extends Component { this.showTips("检测到您的设备没有紧贴肌肤，请紧贴肌肤后重新尝试"); }); }; - look() { + updata() { let that = this; - // this.setState({ showEcharts: !this.state.showEcharts }); let stop = 0; let time = setInterval(function () { stop++; - let random = Math.random(); - that.setState({ echartsData: random }); + 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') { + item.data.splice(0, 1) + item.data.push(num) + } + if (item.type === 'bar') { + count++ + item.data.splice(0, 1) + if (count <= num) { + item.data.push(1) + } else { + item.data.push(0) + } + } + }) + + // 更新图表数据 + that.setState({ series }) if (stop >= 20) { clearInterval(time); } }, 1000); } - updata() {} - // 绘制能量图 - drawProwerPicture() {} + + full() { + this.setState({ isFullScreen: !this.state.isFullScreen }); + } /** 切换光照 */ onSwitchChange = async () => { @@ -918,7 +1009,7 @@ class IotCarePlanFR200 extends Component { let waterStepList = this.state.waterStepList; // 到达第几个step let waterStepIndex = this.state.waterStepIndex; - + // 代表5秒以后最后拿到的结果 if (waterStepList[waterStepIndex].finish) { // 获取等级 @@ -949,9 +1040,9 @@ class IotCarePlanFR200 extends Component { } else { let waterStepList = this.state.waterStepList; let waterStepIndex = this.state.waterStepIndex; - // 5秒后获取的结果 + // 5秒后获取的结果 if (waterStepList[waterStepIndex].finish) { - // 获取失败后，把进度条清理0 + // 获取失败后，把进度条清理0 waterStepList[waterStepIndex].schedule = 0; waterStepList[waterStepIndex].finish = false; this.setState({ @@ -1598,15 +1689,15 @@ class IotCarePlanFR200 extends Component { executePromises = async () => { let waterStepList = this.state.waterStepList; let waterStepIndex = this.state.waterStepIndex; - let that =this + let that = this await new Promise((resolve) => { setTimeout(() => { waterStepList[waterStepIndex].schedule = 100; - that.setState({ - - waterStepList, - }); - + that.setState({ + + waterStepList, + }); + resolve(); }, 3000); }).then(() => { @@ -1614,8 +1705,8 @@ class IotCarePlanFR200 extends Component { setTimeout(() => { waterStepList[waterStepIndex].finish = true; that.setState({ - waterStepList, - }); + waterStepList, + }); resolve(); }, 2000); }); @@ -1654,16 +1745,16 @@ class IotCarePlanFR200 extends Component { if (ActiveModeItem.modeType === "moistureTest") { let that = this; sendParams.testStatus = "standby"; // 切换为准备 - + // 3秒定时器，逻辑3秒把进度条弄成100，再加2秒获取最后结果 if (isBtnClick) { that.setState({ isRuningTest: 2, - + }); this.executePromises() - + sendParams.testStatus = "start"; // 点击开始再开始 console.log("点击开始", isBtnClick); } @@ -2000,6 +2091,9 @@ class IotCarePlanFR200 extends Component { params.workMode = jsonStatus?.workMode; params.modeId = this.state.ActiveModeItem.id; params.modeName = this.state.ActiveModeItem.modeName; + + console.log(jsonStatus, 555555555555); + } } else { params.jsonStatus = jsonStatus; @@ -2309,11 +2403,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("水分测试"); @@ -2324,11 +2418,11 @@ class IotCarePlanFR200 extends Component { go( "/recoding/pages/face_report/face_report?id=" + - deviceid + - "&recordId=" + - currentDevice + - "&report=" + - report + deviceid + + "&recordId=" + + currentDevice + + "&report=" + + report ); } }; @@ -2495,6 +2589,8 @@ class IotCarePlanFR200 extends Component { echartsData, isShowReReadRecordConnect, currentServiceData, + series, + isFullScreen } = this.state; return ( @@ -2505,243 +2601,246 @@ class IotCarePlanFR200 extends Component { isCustomBack customBack={this.customBack} /> + {!isFullScreen && + + + - - - - - - - - - } - textAlgin="center" - cancelButtonText="取消" - confirmButtonText="确定" - close={this.cancelModeSwitchBtn} - confirm={this.confirmModeSwitchBtn} - /> - - {ActiveModeItem.openSourceData.length > 0 && ( - + + + + } + textAlgin="center" + cancelButtonText="取消" + confirmButtonText="确定" + close={this.cancelModeSwitchBtn} + confirm={this.confirmModeSwitchBtn} + /> + + {ActiveModeItem.openSourceData.length > 0 && ( + + )} + + + + - )} - - - - - - - 当前模式已护理部分时间 - 是否保存护理记录 - - } - cancelButtonText="取消" - confirmButtonText="确认" - textAlgin="center" - close={this.closeTipsSave} - cancel={this.cancelTipsSave} - confirm={this.confirmTipsSave} - /> - - { - /*不需要做处理*/ - }} - /> - - {isConnectShow && ( - {}} - pairingChange={this.pairingChange} - upgradeFun={() => {}} + + + 当前模式已护理部分时间 + 是否保存护理记录 + + } + cancelButtonText="取消" + confirmButtonText="确认" + textAlgin="center" + close={this.closeTipsSave} + cancel={this.cancelTipsSave} + confirm={this.confirmTipsSave} /> - )} - - - 正在同步护理记录... - - - - - - - + { + /*不需要做处理*/ + }} + /> - - - - 倒计时：{currentTime} - + {isConnectShow && ( + { }} + pairingChange={this.pairingChange} + upgradeFun={() => { }} + /> + )} + + + 正在同步护理记录... + + + + + + + + - - - 档位：{currentGear}档 + + + + + 倒计时：{currentTime} + + + + + 档位：{currentGear}档 + + + - - - - {ModeList.length > 0 && ( - - )} - - + {ModeList.length > 0 && ( + + )} + + {/* */} - - - - {/* {(ActiveModeItem.modeType === "face" || + + + + + + + {/* {(ActiveModeItem.modeType === "face" || ActiveModeItem.modeType === "eyes") && } */} - {(ActiveModeItem.modeType === "maskPenetration" || - ActiveModeItem.modeType === "essence") && ( - - )} + {(ActiveModeItem.modeType === "maskPenetration" || + ActiveModeItem.modeType === "essence") && ( + + )} - {ActiveModeItem.modeType === "moistureTest" && ( - - )} - + {ActiveModeItem.modeType === "moistureTest" && ( + + )} + -