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

完成echarts表格对接

Browse Source
master
rongweikang 2 years ago
parent 9af2818990
commit 79e7432953
5 changed files with 397 additions and 215 deletions
Show Stats Download Patch File Download Diff File

16
src/moduleIOT/pages/iotCarePlan/FR200.less
Unescape Escape View File

@ -1,8 +1,20 @@
@import url(./WL200.less); @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 { .fr200-iot-device {
width: 690rpx; width: 690rpx;
height: 150rpx; height: 100rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

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

@ -172,7 +172,7 @@ class IotCarePlanFR200 extends Component<any, any> {
isConnectionBlutoot: true, // 是否已连接蓝牙 isConnectionBlutoot: true, // 是否已连接蓝牙
isShowNurse: true, // 是否开始并显示护理 FR200默认已经开始准备护理 isShowNurse: true, // 是否开始并显示护理 FR200默认已经开始准备护理
isStopNurse: false, // 是否暂停护理 isStopNurse: false, // 是否暂停护理
isEndNurse: false, // 是否结束护理 // isEndNurse: false, // 是否结束护理
errorTips: "", // 错误提示 errorTips: "", // 错误提示
/** 护理过程 END*/ /** 护理过程 END*/
@ -184,7 +184,7 @@ class IotCarePlanFR200 extends Component<any, any> {
ModeList: [], ModeList: [],
ModeType: "all", // all 1基础护理 2专区护理 3专研促渗 4敏期护理 5智能测肤 ModeType: "all", // all 1基础护理 2专区护理 3专研促渗 4敏期护理 5智能测肤
ActiveModeItem: { ActiveModeItem: {
modeType: "", modeType: "face",
openSourceData: [], openSourceData: [],
}, // 当前选中模式 }, // 当前选中模式
SwitchActiveModeItem: { SwitchActiveModeItem: {
@ -233,7 +233,7 @@ class IotCarePlanFR200 extends Component<any, any> {
echartsData: "", //传给echarts图表的数据 echartsData: "", //传给echarts图表的数据
series: [ series: [
{ {
data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4], data: [],
type: "line", type: "line",
smooth: true, smooth: true,
z: 1, z: 1,
@ -241,10 +241,10 @@ class IotCarePlanFR200 extends Component<any, any> {
color: "red", color: "red",
}, },
{ {
data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4], data: [],
type: "line", type: "line",
smooth: true, smooth: true,
symbolSize: 10, symbolSize: 5,
lineStyle: { lineStyle: {
color: "#ff8410", color: "#ff8410",
width: 1, width: 1,
@ -255,9 +255,9 @@ class IotCarePlanFR200 extends Component<any, any> {
}, },
{ {
name: "a", 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", type: "bar",
barWidth: 22, barWidth: 12,
z: 2, z: 2,
stack: "x", stack: "x",
visualMap: false, visualMap: false,
@ -267,7 +267,7 @@ class IotCarePlanFR200 extends Component<any, any> {
}, },
{ {
name: "b", 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", type: "bar",
z: 2, z: 2,
stack: "x", stack: "x",
@ -278,7 +278,7 @@ class IotCarePlanFR200 extends Component<any, any> {
}, },
{ {
name: "c", 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", type: "bar",
z: 2, z: 2,
stack: "x", stack: "x",
@ -289,7 +289,7 @@ class IotCarePlanFR200 extends Component<any, any> {
}, },
{ {
name: "d", 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", type: "bar",
z: 2, z: 2,
stack: "x", stack: "x",
@ -300,7 +300,7 @@ class IotCarePlanFR200 extends Component<any, any> {
}, },
{ {
name: "e", 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", type: "bar",
z: 2, z: 2,
stack: "x", stack: "x",
@ -311,7 +311,7 @@ class IotCarePlanFR200 extends Component<any, any> {
}, },
{ {
name: "f", 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", type: "bar",
z: 2, z: 2,
stack: "x", stack: "x",
@ -322,7 +322,7 @@ class IotCarePlanFR200 extends Component<any, any> {
}, },
{ {
name: "h", 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", type: "bar",
z: 2, z: 2,
stack: "x", stack: "x",
@ -333,7 +333,7 @@ class IotCarePlanFR200 extends Component<any, any> {
}, },
{ {
name: "i", 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", type: "bar",
z: 2, z: 2,
stack: "x", stack: "x",
@ -343,6 +343,12 @@ class IotCarePlanFR200 extends Component<any, any> {
}, },
}, },
], ],
time: {
min: 0,
second: 0
},
timeArr: [],
videoVoiceStatus: false
}; };
} }
bluetoothContainer: any = null; bluetoothContainer: any = null;
@ -403,9 +409,9 @@ class IotCarePlanFR200 extends Component<any, any> {
this.getInstrumentClockSummary(); this.getInstrumentClockSummary();
this.getInstrumentClockDetail(); this.getInstrumentClockDetail();
} }
componentDidMount() {} componentDidMount() { }
componentWillUnmount() {} componentWillUnmount() { }
componentDidShow() { componentDidShow() {
console.log("页面显示了"); console.log("页面显示了");
@ -435,6 +441,24 @@ class IotCarePlanFR200 extends Component<any, any> {
title: obj.name, 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); await this.GetModeList(obj?.id);
// 如果不存在设备模式值，则判断为首次进入，弹窗提示 // 如果不存在设备模式值，则判断为首次进入，弹窗提示
@ -448,7 +472,7 @@ class IotCarePlanFR200 extends Component<any, any> {
const platform = Taro.getSystemInfoSync().platform; const platform = Taro.getSystemInfoSync().platform;
if (platform !== "devtools") { if (platform !== "devtools") {
// 仅手机端初始化蓝牙 // 仅手机端初始化蓝牙
// this.init(); this.init();
} }
} }
@ -573,7 +597,7 @@ class IotCarePlanFR200 extends Component<any, any> {
* @name 选中/切换护理模式 * @name 选中/切换护理模式
* */ * */
modeCurrentFun = async (data, isNotCheck = false) => { modeCurrentFun = async (data, isNotCheck = false) => {
let { isShowNurse, activeModeID } = this.state; let { isShowNurse, activeModeID, series } = this.state;
// 护理检查改变模式，是否提示切换护理模式 // 护理检查改变模式，是否提示切换护理模式
// isNotCheck为真时，不进行校验，直接切换 // isNotCheck为真时，不进行校验，直接切换
this.tempModeCurrent = data; this.tempModeCurrent = data;
@ -603,6 +627,15 @@ class IotCarePlanFR200 extends Component<any, any> {
currentWorkModeType = 2; 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({ this.setState({
ActiveModeItem: data, ActiveModeItem: data,
activeModeID: data?.id, activeModeID: data?.id,
@ -612,6 +645,7 @@ class IotCarePlanFR200 extends Component<any, any> {
MaskModeStepIndex: 0, // 面膜促渗步骤 MaskModeStepIndex: 0, // 面膜促渗步骤
ModeType: this.ModeTypeArray[data.modeClass], ModeType: this.ModeTypeArray[data.modeClass],
currentWorkModeType, currentWorkModeType,
series
}); });
// 切换模式时：重新设置视频地址 // 切换模式时：重新设置视频地址
@ -860,36 +894,53 @@ class IotCarePlanFR200 extends Component<any, any> {
let textshow = this.state.textshow; let textshow = this.state.textshow;
this.setState({ textshow: !textshow }); this.setState({ textshow: !textshow });
} }
updata() { updata(level = 1, min = 0, seconds = 0) {
let that = this; if (seconds == 0 && min == 0) {
let stop = 0; return
let time = setInterval(function () { }
stop++; // let that = this;
let series = JSON.parse(JSON.stringify(that.state.series)); // let stop = 0;
let num = Math.floor(Math.random() * 9); // let time = setInterval(function () {
let count = 0; // stop++;
series.map((item) => { let series = JSON.parse(JSON.stringify(this.state.series));
if (item.type === "line") { 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.splice(0, 1);
item.data.push(num);
} }
if (item.type === "bar") { item.data.push(num);
count++; }
if (item.type === "bar") {
count++;
if (seconds > 10) {
item.data.splice(0, 1); item.data.splice(0, 1);
if (count <= num) { if (count <= num) {
item.data.push(1); item.data.push(1);
} else { } else {
item.data.push(0); 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() { full() {
@ -1040,6 +1091,7 @@ class IotCarePlanFR200 extends Component<any, any> {
// 更新界面倒计时 // 更新界面倒计时
this.resetTimer(); this.resetTimer();
if ( if (
sceneTime > totalTime && sceneTime > totalTime &&
this.isRuning && this.isRuning &&
@ -1329,6 +1381,15 @@ class IotCarePlanFR200 extends Component<any, any> {
} }
} }
/**
* 视频声音切换
*/
videoVoiceStatusChange() {
let { videoVoiceStatus } = this.state;
this.setState({ videoVoiceStatus: !videoVoiceStatus })
}
/** @name 精华促渗下一步,根据时间自动调用 */ /** @name 精华促渗下一步,根据时间自动调用 */
essencePenetrationNext() { essencePenetrationNext() {
let { let {
@ -1843,8 +1904,27 @@ class IotCarePlanFR200 extends Component<any, any> {
Taro.setStorageSync("FR200NursingHistory", params); Taro.setStorageSync("FR200NursingHistory", params);
console.log("保存setFR200NursingHistory"); 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护理历史运行时间 */ /** 更新WL200护理历史运行时间 */
updateFR200NursingHistory = (data: any = null, jsonStatus: any = null) => { updateFR200NursingHistory = (data: any = null, jsonStatus: any = null) => {
console.log(11111111);
this.FR200NursingHistory = Taro.getStorageSync("FR200NursingHistory"); this.FR200NursingHistory = Taro.getStorageSync("FR200NursingHistory");
if (this.FR200NursingHistory) { if (this.FR200NursingHistory) {
@ -1857,6 +1937,19 @@ class IotCarePlanFR200 extends Component<any, any> {
// 设置正确封面 // 设置正确封面
if (!data) { if (!data) {
if (jsonStatus) { 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 = []; if (!params.dataArray) params.dataArray = [];
params.dataArray.push(jsonStatus); params.dataArray.push(jsonStatus);
@ -1864,8 +1957,17 @@ class IotCarePlanFR200 extends Component<any, any> {
params.workMode = jsonStatus?.workMode; params.workMode = jsonStatus?.workMode;
params.modeId = this.state.ActiveModeItem?.id; params.modeId = this.state.ActiveModeItem?.id;
params.modeName = this.state.ActiveModeItem.modeName; 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 { } else {
params.jsonStatus = jsonStatus; params.jsonStatus = jsonStatus;
@ -2180,11 +2282,11 @@ class IotCarePlanFR200 extends Component<any, any> {
let report = true; let report = true;
go( go(
"/recoding/pages/face_report_one/face_report_one?id=" + "/recoding/pages/face_report_one/face_report_one?id=" +
ids + ids +
"&report=" + "&report=" +
report + report +
"&obj=" + "&obj=" +
JSON.stringify(obj) JSON.stringify(obj)
); );
} else if ("moistureTest" === nursingData.workMode) { } else if ("moistureTest" === nursingData.workMode) {
console.log("水分测试"); console.log("水分测试");
@ -2195,11 +2297,11 @@ class IotCarePlanFR200 extends Component<any, any> {
go( go(
"/recoding/pages/face_report/face_report?id=" + "/recoding/pages/face_report/face_report?id=" +
deviceid + deviceid +
"&recordId=" + "&recordId=" +
currentDevice + currentDevice +
"&report=" + "&report=" +
report report
); );
} }
}; };
@ -2387,7 +2489,9 @@ class IotCarePlanFR200 extends Component<any, any> {
echartsData, echartsData,
isShowReReadRecordConnect, isShowReReadRecordConnect,
series, series,
time,
isFullScreen, isFullScreen,
videoVoiceStatus
} = this.state; } = this.state;
return ( return (
@ -2406,19 +2510,19 @@ class IotCarePlanFR200 extends Component<any, any> {
<PopupAlert <PopupAlert
isShow={isModeLock} isShow={isModeLock}
zIndex={10020} zIndex={10020}
myClassName="level-up" myClassName='level-up'
title="提示" title='提示'
content="该模式即将上线，敬请期待" content='该模式即将上线，敬请期待'
confirmButtonText="我知道了" confirmButtonText='我知道了'
textAlgin="center" textAlgin='center'
close={this.onModeLockClose} close={this.onModeLockClose}
confirm={this.onModeLockClose} confirm={this.onModeLockClose}
/> />
<PopupInstrumentUploadTips <PopupInstrumentUploadTips
isShow={isFirstTipShow} isShow={isFirstTipShow}
zIndex={10020} zIndex={10020}
myClassName="level-up" myClassName='level-up'
title="打卡介绍" title='打卡介绍'
data={nurseInfo} data={nurseInfo}
close={this.onTipShowClose} close={this.onTipShowClose}
confirm={this.onTipShowClose} confirm={this.onTipShowClose}
@ -2430,11 +2534,11 @@ class IotCarePlanFR200 extends Component<any, any> {
isLarge isLarge
isClose isClose
isShow={isEndCarePlan} isShow={isEndCarePlan}
title="提示" title='提示'
content="是否结束护理" content='是否结束护理'
textAlgin="center" textAlgin='center'
cancelButtonText="取消" cancelButtonText='取消'
confirmButtonText="确定" confirmButtonText='确定'
close={this.cancelEndBtn} close={this.cancelEndBtn}
confirm={this.confirmEndBtn} confirm={this.confirmEndBtn}
/> />
@ -2442,7 +2546,7 @@ class IotCarePlanFR200 extends Component<any, any> {
isLarge isLarge
isClose isClose
isShow={isSwitchActiveMode} isShow={isSwitchActiveMode}
title="护理模式切换" title='护理模式切换'
content={ content={
<ModeListView <ModeListView
ModeID={ModeID} ModeID={ModeID}
@ -2456,9 +2560,9 @@ class IotCarePlanFR200 extends Component<any, any> {
onModeLockOpen={this.onModeLockOpen} onModeLockOpen={this.onModeLockOpen}
/> />
} }
textAlgin="center" textAlgin='center'
cancelButtonText="取消" cancelButtonText='取消'
confirmButtonText="确定" confirmButtonText='确定'
close={this.cancelModeSwitchBtn} close={this.cancelModeSwitchBtn}
confirm={this.confirmModeSwitchBtn} confirm={this.confirmModeSwitchBtn}
/> />
@ -2468,7 +2572,7 @@ class IotCarePlanFR200 extends Component<any, any> {
isShow={isShowStepTips} isShow={isShowStepTips}
isLarge isLarge
isFirstEntry={false} isFirstEntry={false}
confirmButtonText="知道了" confirmButtonText='知道了'
data={ActiveModeItem.openSourceData} data={ActiveModeItem.openSourceData}
close={this.closeStepTips} close={this.closeStepTips}
/> />
@ -2477,10 +2581,10 @@ class IotCarePlanFR200 extends Component<any, any> {
<PopupAlert <PopupAlert
isShow={isNotEnoughTime} isShow={isNotEnoughTime}
isClose isClose
title="提示" title='提示'
content="您的本次护理时间不足，请重新护理" content='您的本次护理时间不足，请重新护理'
confirmButtonText="确认" confirmButtonText='确认'
textAlgin="center" textAlgin='center'
close={this.closeNotEnoughTime} close={this.closeNotEnoughTime}
confirm={this.closeNotEnoughTime} confirm={this.closeNotEnoughTime}
/> />
@ -2489,11 +2593,11 @@ class IotCarePlanFR200 extends Component<any, any> {
isShow={isShowErrorTipsText} isShow={isShowErrorTipsText}
isClose isClose
zIndex={10020} zIndex={10020}
myClassName="level-up" myClassName='level-up'
title="提示" title='提示'
content={errorTipsText} content={errorTipsText}
confirmButtonText="知道了" confirmButtonText='知道了'
textAlgin="center" textAlgin='center'
close={this.closeErrorTipsText} close={this.closeErrorTipsText}
confirm={this.closeErrorTipsText} confirm={this.closeErrorTipsText}
/> />
@ -2502,17 +2606,17 @@ class IotCarePlanFR200 extends Component<any, any> {
isShow={isShowTipsSave} isShow={isShowTipsSave}
isClose isClose
zIndex={10020} zIndex={10020}
myClassName="level-up" myClassName='level-up'
title="提示" title='提示'
content={ content={
<Block> <Block>
<View>当前模式已护理部分时间</View> <View>当前模式已护理部分时间</View>
<View>是否保存护理记录</View> <View>是否保存护理记录</View>
</Block> </Block>
} }
cancelButtonText="取消" cancelButtonText='取消'
confirmButtonText="确认" confirmButtonText='确认'
textAlgin="center" textAlgin='center'
close={this.closeTipsSave} close={this.closeTipsSave}
cancel={this.cancelTipsSave} cancel={this.cancelTipsSave}
confirm={this.confirmTipsSave} confirm={this.confirmTipsSave}
@ -2521,11 +2625,11 @@ class IotCarePlanFR200 extends Component<any, any> {
<PopupStatus <PopupStatus
isShow={isShowNursingSuccess} isShow={isShowNursingSuccess}
isClose isClose
title="您已结束本次护理" title='您已结束本次护理'
type="success" type='success'
content="正在上传护理记录……" content='正在上传护理记录……'
confirmButtonText="知道了" confirmButtonText='知道了'
textAlgin="center" textAlgin='center'
close={() => { close={() => {
/*不需要做处理*/ /*不需要做处理*/
}} }}
@ -2536,32 +2640,33 @@ class IotCarePlanFR200 extends Component<any, any> {
deviceInfo={currentDevice} deviceInfo={currentDevice}
close={this.connectionClose} close={this.connectionClose}
isDisconnect={!isConnectionBlutoot} isDisconnect={!isConnectionBlutoot}
offlineChange={() => {}} offlineChange={() => { }}
pairingChange={this.pairingChange} pairingChange={this.pairingChange}
upgradeFun={() => {}} upgradeFun={() => { }}
/> />
)} )}
<Popup <Popup
show={isShowHistoryMsg} show={isShowHistoryMsg}
className="custom-popup" className='custom-popup'
overlay={false} overlay={false}
> >
<View className="sync-history-msg">正在同步护理记录...</View> <View className='sync-history-msg'>正在同步护理记录...</View>
</Popup> </Popup>
</View> </View>
<View> <View>
<View className="iot-main"> <View className='iot-main'>
{isFullScreen && ( {isFullScreen && (
<View className="banner-box"> <View className='banner-box'>
<View> <View>
<Video <Video
className="video-or-image" className='video-or-image'
src={currentVideoSrc} src={currentVideoSrc}
loop loop
id="myVideo" id='myVideo'
objectFit="cover" muted={videoVoiceStatus}
objectFit='cover'
enablePlayGesture enablePlayGesture
showFullscreenBtn={false} showFullscreenBtn={false}
onLoadedMetaData={this.GetVideosTime} onLoadedMetaData={this.GetVideosTime}
@ -2569,29 +2674,37 @@ class IotCarePlanFR200 extends Component<any, any> {
{/* <button onClick={this.executePromises}>点击按钮</button> */} {/* <button onClick={this.executePromises}>点击按钮</button> */}
{errorTips && ( {errorTips && (
<Block> <Block>
<View className="msg-tips"> <View className='msg-tips'>
<Image <Image
className="msg-tips-img" className='msg-tips-img'
src={require("@/img/tips.png")} src={require("@/img/tips.png")}
/> />
<View className="msg-tips-content">{errorTips}</View> <View className='msg-tips-content'>{errorTips}</View>
</View> </View>
</Block> </Block>
)} )}
</View> </View>
<View
<View className="fr200-iot-device"> className='music flex aitems jcenter'
<View className="item"> onClick={this.videoVoiceStatusChange.bind(this)}
<Text className="device-time"> >
<Image
src={require(`@/img/${videoVoiceStatus ? 'mute' : 'play'}.png`)}
mode='aspectFill'
></Image>
</View>
<View className='fr200-iot-device'>
<View className='item'>
<Text className='device-time'>
倒计时： 倒计时：
<Text className="time">{currentTime}</Text> <Text className='time'>{currentTime}</Text>
</Text> </Text>
</View> </View>
<View className="line" /> <View className='line' />
<View className="item"> <View className='item'>
档位：<Text className="gear">{currentGear}</Text>档 档位：<Text className='gear'>{currentGear}</Text>档
</View> </View>
<View className="line" /> <View className='line' />
<ElectricityView <ElectricityView
Electricity={Electricity} Electricity={Electricity}
DeviceConnectStatus={DeviceConnectStatus} DeviceConnectStatus={DeviceConnectStatus}
@ -2613,9 +2726,10 @@ class IotCarePlanFR200 extends Component<any, any> {
onModeLockOpen={this.onModeLockOpen} onModeLockOpen={this.onModeLockOpen}
/> />
)} )}
<button onClick={this.updata.bind(this)}>模拟数据更新 </button> {/* <button onClick={this.updata.bind(this)}>模拟数据更新 </button> */}
<View className={classnames({ show: showEcharts })}>
<Echarts series={series} full={this.full.bind(this)}></Echarts> <View className={classnames({ show: ActiveModeItem?.modeType !== "face" && ActiveModeItem?.modeType !== "eyes" && ActiveModeItem?.modeType !== "nasolabialFold" && ActiveModeItem?.modeType !== "mandibularLine" && ActiveModeItem?.modeType !== "headLiftingPro" })}>
<Echarts series={series} time={time} full={this.full.bind(this)}></Echarts>
</View> </View>
{(ActiveModeItem?.modeType === "maskPenetration" || {(ActiveModeItem?.modeType === "maskPenetration" ||

1
src/moduleIOT/pages/iotCarePlan/components/Bluetoot/FR200.ts
Unescape Escape View File

@ -136,6 +136,7 @@ export default class BluetoothContainer {
workMode: jsonStatus?.workMode, // 仅当设备上报模式与小程序一致时，才允许改变小程序变量缓存 workMode: jsonStatus?.workMode, // 仅当设备上报模式与小程序一致时，才允许改变小程序变量缓存
}); });
} }
console.log("this.that.isRuning",this.that.isRuning)
// 判断设备是否在运行中(护理中) // 判断设备是否在运行中(护理中)
// 仅当设备模式与小程序是否一致，才允许更改设备运行时间 // 仅当设备模式与小程序是否一致，才允许更改设备运行时间
if (this.that.isRuning) { if (this.that.isRuning) {

160
src/moduleIOT/pages/iotCarePlan/components/Echart/index.less
Unescape Escape View File

@ -7,86 +7,106 @@
padding: 35rpx 25rpx 25rpx 35rpx; padding: 35rpx 25rpx 25rpx 35rpx;
box-sizing: border-box; box-sizing: border-box;
position: relative; 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 { @keyframes echartRotate {
position: fixed; from {
top: 450rpx; width: 690rpx;
left: -450rpx; height: 320rpx;
right: 0; transform: rotate(0deg);
bottom: 0; }
to {
width: 100vh; width: 100vh;
height: 100vw; height: 100vw;
z-index: 9999; transform: rotate(0deg);
background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
transform: rotate(90deg);
// animation: rotate 0s linear;
} }
}
@keyframes echartRotate { .box_background {
from { position: absolute;
width: 690rpx; top: 0;
height: 320rpx; left: 0;
transform: rotate(0deg); width: 690rpx;
} height: 320rpx;
to { border-radius: 30rpx;
width: 100vh; background-color: #fff;
height: 100vw; .power {
transform: rotate(0deg); margin: 34rpx 0 28rpx 28rpx;
} font-family: PingFang-SC;
font-weight: 500;
font-size: 18rpx;
color: #cccccc;
} }
.full {
.box_background { width: 24rpx;
height: 24rpx;
position: absolute; position: absolute;
top: 0; top: 32rpx;
left: 0; right: 26rpx;
width: 690rpx; z-index: 2;
height: 320rpx; }
border-radius: 30rpx; .line {
background-color: #fff; margin: 0 0 6rpx 35rpx;
.power { font-family: PingFang-SC;
margin: 34rpx 0 28rpx 28rpx; font-size: 14rpx;
font-family: PingFang-SC; color: #cccccc;
font-weight: 500; display: flex;
font-size: 18rpx; position: relative;
color: #cccccc; height: 18rpx;
} .bottom_line {
.full { // border-bottom: 1rpx #ccc dashed;
width: 24rpx; width: 550rpx;
height: 24rpx; margin-left: 20rpx;
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 {
position: absolute; position: absolute;
bottom: 22rpx; bottom: -6rpx;
right: 24rpx; right: 74rpx;
font-family: PingFang-SC; height: 4rpx;
font-size: 18rpx; color: #fff;
color: #cccccc;
} }
} }
.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 { page {

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

@ -11,9 +11,10 @@ import "./index.less";
interface Props { interface Props {
series: any; series: any;
full: any; full: any;
time: any
} }
function Index({ series, full }: Props) { function Index({ series, full, time }: Props) {
const echartsRef = useRef<EchartsHandle>(null); const echartsRef = useRef<EchartsHandle>(null);
const [options, setOptions] = useState({ const [options, setOptions] = useState({
animation: false, animation: false,
@ -49,24 +50,13 @@ function Index({ series, full }: Props) {
}, },
axisLabel: { axisLabel: {
//坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
color: "#cccccc", color: "#fff",
fontSize: 8, fontSize: 1,
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
data: [ data: [],
"00:01",
"00:02",
"00:03",
"00:04",
"00:05",
"00:06",
"00:07",
"00:08",
"00:09",
"00:10",
],
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -282,9 +272,25 @@ function Index({ series, full }: Props) {
// } // }
const level = [8, 7, 6, 5, 4, 3, 2]; 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 [newOptions, setNewOptions] = useState(options);
const updata = useCallback((res) => { const updata = useCallback((res, times) => {
if (times.second == 0) {
return
}
// let option // let option
// if (data) { // if (data) {
// option = JSON.parse(JSON.stringify(newParams)) // option = JSON.parse(JSON.stringify(newParams))
@ -292,19 +298,41 @@ function Index({ series, full }: Props) {
// option = JSON.parse(JSON.stringify(options)) // option = JSON.parse(JSON.stringify(options))
// } // }
let 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)) option.series = JSON.parse(JSON.stringify(res))
// 更新图表数据 // 更新图表数据
setNewOptions(option); 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) => { const cancelFull = useCallback((res) => {
// let option = JSON.parse(JSON.stringify(newParams))
// setNewOptions(option)
// console.log(data, 88888);
// data = !data
// console.log(data, 88888);
full() full()
}, []) setIsfull(!isFull)
}, [isFull])
@ -313,14 +341,14 @@ function Index({ series, full }: Props) {
}, [newOptions]); }, [newOptions]);
useEffect(() => { useEffect(() => {
updata(series); updata(series, time);
}, [series]); }, [series]);
return ( return (
<Block> <Block>
<View id="box" className="echart-component"> <View id='box' className={isFull ? "echart-component-full" : "echart-component"}>
<Echarts <Echarts
force-use-old-canvas="false" force-use-old-canvas='false'
echarts={echarts} echarts={echarts}
option={options} option={options}
ref={echartsRef} ref={echartsRef}
@ -328,23 +356,30 @@ function Index({ series, full }: Props) {
// style自定义设置echarts宽高 // style自定义设置echarts宽高
style={{ width: "630rpx", height: "260rpx", zIndex: 1 }} style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
/> />
<View className="box_background"> <View className='box_background'>
<Image <Image
className="full" className='full'
src={require("@/img/full-scran.png")} src={require("@/img/full-scran.png")}
onClick={cancelFull} onClick={cancelFull}
></Image> ></Image>
<View className="power">实时能量</View> <View className='power'>实时能量</View>
{level.map((item) => ( {level.map((item) => (
<View className="line" key={item}> <View className='line' key={item}>
<View className="number">{item}</View> <View className='number'>{item}</View>
<View className="bottom_line"></View> <View className='bottom_line'></View>
</View> </View>
))} ))}
<View className="line"> <View className='line'>
<View className="number">1</View> <View className='number'>1</View>
</View>
<View className='time_list flex'>
{
data.map((times, index) => (
<View key={index}>{times}</View>
))
}
</View> </View>
<View className="time">时间</View> <View className='time'>时间</View>
</View> </View>
</View> </View>
</Block> </Block>

Write Preview
Loading…
Cancel
Save