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 ef441b00f0
commit ab7a90ce81
3 changed files with 113 additions and 44 deletions
Show Stats Download Patch File Download Diff File

6
package.json
Unescape Escape View File

@ -53,15 +53,17 @@
"@tarojs/plugin-platform-weapp": "3.6.19", "@tarojs/plugin-platform-weapp": "3.6.19",
"@tarojs/react": "3.6.19", "@tarojs/react": "3.6.19",
"@tarojs/runtime": "3.6.19", "@tarojs/runtime": "3.6.19",
"@tarojs/shared": "3.6.19", "@tarojs/shared": "3.6.19",
"@tarojs/taro": "3.6.19", "@tarojs/taro": "3.6.19",
"@visactor/taro-vchart": "^1.9.0", "@visactor/taro-vchart": "^1.9.0",
"dayjs": "^1.11.10", "dayjs": "^1.11.10",
"echarts": "^5.5.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"react": "^18.0.0", "react": "^18.0.0",
"react-dom": "^18.0.0", "react-dom": "^18.0.0",
"react-redux": "^9.0.3", "react-redux": "^9.0.3",
"taro-ui": "^3.2.0" "taro-ui": "^3.2.0",
"taro-react-echarts": "^1.2.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.8.0", "@babel/core": "^7.8.0",

5
src/pages/iotCarePlan/iotCarePlan.less
Unescape Escape View File

@ -206,3 +206,8 @@
.v3 { .v3 {
background: linear-gradient(0deg, #ff4646, #ff6b6b, #f86f6f, #ff9494); background: linear-gradient(0deg, #ff4646, #ff6b6b, #f86f6f, #ff9494);
} }
#chart {
width: 690rpx;
height: 320rpx;
}

146
src/pages/iotCarePlan/iotCarePlan.tsx
Unescape Escape View File

@ -1,8 +1,10 @@
import Taro from "@tarojs/taro"; import Taro from "@tarojs/taro";
import dayjs from "dayjs"; import dayjs from "dayjs";
import classnames from "classnames"; import classnames from "classnames";
// eslint-disable-next-line import/no-named-as-default
import React, { Component, PropsWithChildren, useEffect, useState } from "react";
import { Component, PropsWithChildren, useEffect, useState } from "react"; import Echarts from "./components/Echart/index"
import { import {
Block, Block,
View, View,
@ -46,6 +48,8 @@ import {
deviceCommandSamples, deviceCommandSamples,
bleCommandSamples, bleCommandSamples,
} from "@/components/bluetoot/connection/test"; } from "@/components/bluetoot/connection/test";
import { Progress } from '@antmjs/vantui'
import { import {
s_to_s, s_to_s,
s_to_m, s_to_m,
@ -55,6 +59,8 @@ import {
} from "@/utils/util"; } from "@/utils/util";
import { DeviceToolKit as DeviceToolKitWE100 } from "@flossom-npm/iot-translater-we100"; import { DeviceToolKit as DeviceToolKitWE100 } from "@flossom-npm/iot-translater-we100";
import commandMap from "@/utils/commandMap"; import commandMap from "@/utils/commandMap";
const deviceToolKitInstanceWE100 = new DeviceToolKitWE100("WE100", "M01"); const deviceToolKitInstanceWE100 = new DeviceToolKitWE100("WE100", "M01");
const deviceToolKitInstanceWL200 = new DeviceToolKitWE100("WE100", "WL200"); const deviceToolKitInstanceWL200 = new DeviceToolKitWE100("WE100", "WL200");
@ -134,6 +140,8 @@ let DeviceSyncData = {
}; };
let deviceToolKitInstance = deviceToolKitInstanceWE100; // we100 let deviceToolKitInstance = deviceToolKitInstanceWE100; // we100
class IotCarePlan extends Component<any, any> { class IotCarePlan extends Component<any, any> {
constructor(props) { constructor(props) {
super(props); super(props);
@ -181,7 +189,7 @@ class IotCarePlan extends Component<any, any> {
errorTips: "", // 错误提示 errorTips: "", // 错误提示
// 模式列表 // 模式列表
isSwitchActiveMode: false, // 是否显示弹窗切换模式 isSwitchActiveMode: true, // 是否显示弹窗切换模式
ModeList: [], ModeList: [],
ModeType: "all", // all visor面罩 cabin舱体 yimeish医美 ModeType: "all", // all visor面罩 cabin舱体 yimeish医美
modeClass: "", // 1面罩 2舱体 3医美 modeClass: "", // 1面罩 2舱体 3医美
@ -225,13 +233,13 @@ class IotCarePlan extends Component<any, any> {
}); });
} }
componentWillUnmount() {} componentWillUnmount() { }
componentDidShow() { componentDidShow() {
this.initData(); this.initData();
} }
componentDidHide() {} componentDidHide() { }
async initData() { async initData() {
let objStr = getStorageSync("instrument_detail"); let objStr = getStorageSync("instrument_detail");
@ -263,8 +271,50 @@ class IotCarePlan extends Component<any, any> {
// 初始化蓝牙 // 初始化蓝牙
// this.init(); // this.init();
} }
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() { async init() {
// 查询自定义设备指令 // 查询自定义设备指令
const queryInstructionParams = { const queryInstructionParams = {
@ -435,6 +485,7 @@ class IotCarePlan extends Component<any, any> {
}; };
/** 开始护理按钮：点击开始，页面进行到下一步 */ /** 开始护理按钮：点击开始，页面进行到下一步 */
onStartNurse = async () => { onStartNurse = async () => {
this.drawProwerPicture()
this.stepNext(); this.stepNext();
return; return;
let { isConnectionBlutoot } = this.state; let { isConnectionBlutoot } = this.state;
@ -444,6 +495,12 @@ class IotCarePlan extends Component<any, any> {
// todo 提示未连接蓝牙 // todo 提示未连接蓝牙
} }
}; };
// 绘制能量图
drawProwerPicture() {
}
/** 切换光照 */ /** 切换光照 */
onSwitchChange = async () => { onSwitchChange = async () => {
// todo // todo
@ -949,7 +1006,7 @@ class IotCarePlan extends Component<any, any> {
this.setState({ this.setState({
isShowCountdown: false, isShowCountdown: false,
hadShowBreakTips: false, hadShowBreakTips: false
}); });
}, },
pause: () => { pause: () => {
@ -1199,8 +1256,8 @@ class IotCarePlan extends Component<any, any> {
console.log("isStandStatus:" + isStandStatus); console.log("isStandStatus:" + isStandStatus);
console.log( console.log(
workStatus !== MODE_WORKING_ENUM.WORKING && workStatus !== MODE_WORKING_ENUM.WORKING &&
workStatus !== MODE_WORKING_ENUM.STANDBY && workStatus !== MODE_WORKING_ENUM.STANDBY &&
workStatus !== MODE_WORKING_ENUM.PAUSE workStatus !== MODE_WORKING_ENUM.PAUSE
); );
if (facialMaskConnectStatus != 1) { if (facialMaskConnectStatus != 1) {
@ -1227,7 +1284,7 @@ class IotCarePlan extends Component<any, any> {
} }
// 开始执行护理 // 开始执行护理
this.handleWorkStatus(true, MODE_WORKING_ENUM.WORKING); this.handleWorkStatus(true, MODE_WORKING_ENUM.WORKING);
this.showCountdownFun(3, () => {}); // 倒计时弹窗 this.showCountdownFun(3, () => { }); // 倒计时弹窗
} }
// 结束护理？ // 结束护理？
@ -1280,7 +1337,7 @@ class IotCarePlan extends Component<any, any> {
} }
// 删除WL200护理历史 // 删除WL200护理历史
rmWL200NursingHistory(WL200NursingHistory, hard = false) {} rmWL200NursingHistory(WL200NursingHistory, hard = false) { }
//蓝牙断开连接处理 //蓝牙断开连接处理
bluetoothDisconnectProcessing() { bluetoothDisconnectProcessing() {
@ -1490,34 +1547,35 @@ class IotCarePlan extends Component<any, any> {
currentTime, currentTime,
facialMaskConnectStatus, facialMaskConnectStatus,
} = this.state; } = this.state;
return ( return (
<Block> <Block>
<Navbar titleSlot={title} isBack={true} /> <Navbar titleSlot={title} isBack />
<View catchMove> <View catchMove>
<PopupCountdown isShow={isShowCountdown} countdown={countdown} /> <PopupCountdown isShow={isShowCountdown} countdown={countdown} />
<PopupConfirm <PopupConfirm
isLarge={true} isLarge
isShow={isEndCarePlan} isShow={isEndCarePlan}
isClose={true} isClose
title="提示" title='提示'
content="是否结束护理" content='是否结束护理'
textAlgin="center" textAlgin='center'
cancelButtonText="取消" cancelButtonText='取消'
confirmButtonText="确定" confirmButtonText='确定'
close={this.cancelEndBtn} close={this.cancelEndBtn}
confirm={this.confirmEndBtn} confirm={this.confirmEndBtn}
/> />
<PopupConfirm <PopupConfirm
isLarge={true} isLarge
isShow={isSwitchActiveMode} isShow={isSwitchActiveMode}
isClose={true} isClose
title="护理模式切换" title='护理模式切换'
content={ content={
<ModeListView <ModeListView
ModeID={ModeID} ModeID={ModeID}
activeModeID={activeModeID} activeModeID={activeModeID}
isPop={true} isPop
isShowNurse={isShowNurse} isShowNurse={isShowNurse}
ModeList={ModeList} ModeList={ModeList}
ModeType={ModeType} ModeType={ModeType}
@ -1526,9 +1584,9 @@ class IotCarePlan extends Component<any, any> {
onEmitShowAll={this.openModeSwitch} onEmitShowAll={this.openModeSwitch}
/> />
} }
textAlgin="center" textAlgin='center'
cancelButtonText="取消" cancelButtonText='取消'
confirmButtonText="确定" confirmButtonText='确定'
close={this.cancelModeSwitchBtn} close={this.cancelModeSwitchBtn}
confirm={this.confirmModeSwitchBtn} confirm={this.confirmModeSwitchBtn}
/> />
@ -1536,9 +1594,9 @@ class IotCarePlan extends Component<any, any> {
{ActiveModeItem.openSourceData && ( {ActiveModeItem.openSourceData && (
<PopupStepTips <PopupStepTips
isShow={isShowStepTips} isShow={isShowStepTips}
isLarge={true} isLarge
title={"" + "准备中"} title={"" + "准备中"}
confirmButtonText="开始护理" confirmButtonText='开始护理'
data={ActiveModeItem.openSourceData} data={ActiveModeItem.openSourceData}
close={this.closeStepTips} close={this.closeStepTips}
/> />
@ -1546,12 +1604,12 @@ class IotCarePlan extends Component<any, any> {
</View> </View>
<View> <View>
<View className="iot-main"> <View className='iot-main'>
<View className="banner-box"> <View className='banner-box'>
<View> <View>
{!isShowNurse && ( {!isShowNurse && (
<Video <Video
className="video-or-image" className='video-or-image'
src={ActiveModeItem.modeVideo} src={ActiveModeItem.modeVideo}
/> />
)} )}
@ -1560,39 +1618,38 @@ class IotCarePlan extends Component<any, any> {
<Block> <Block>
{isStopNurse ? ( {isStopNurse ? (
<Image <Image
className="video-or-image" className='video-or-image'
src={currentServiceData.stopSource} src={currentServiceData.stopSource}
/> />
) : ( ) : (
<Image <Image
className="video-or-image" className='video-or-image'
src={currentServiceData.startSource} src={currentServiceData.startSource}
/> />
)} )}
</Block> </Block>
)} )}
{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 className="iot-device"> <View className='iot-device'>
<View className="item"> <View className='item'>
<Text className="device-time"> <Text className='device-time'>
护理时间： 护理时间：
<Text className="time">{currentTime}</Text> <Text className='time'>{currentTime}</Text>
</Text> </Text>
</View> </View>
<View className="line" /> <View className='line' />
<ElectricityView <ElectricityView
Electricity={Electricity} Electricity={Electricity}
matrixElectricity={matrixElectricity} matrixElectricity={matrixElectricity}
@ -1619,6 +1676,8 @@ class IotCarePlan extends Component<any, any> {
isShowNurse={isShowNurse} isShowNurse={isShowNurse}
ActiveModeItem={ActiveModeItem} ActiveModeItem={ActiveModeItem}
/> />
<Echarts></Echarts>
</View> </View>
<Footer <Footer
@ -1630,7 +1689,10 @@ class IotCarePlan extends Component<any, any> {
onEmitEndPlan={this.onEndPlan} onEmitEndPlan={this.onEndPlan}
/> />
</View> </View>
</Block> <Block id='ccccc' style={{ width: '300px', height: '300px' }}>66666666666666666666</Block>
<Block id='myBox' style={{ width: '300px', height: '300px' }}></Block>
</Block >
); );
} }
} }
@ -1643,4 +1705,4 @@ const mapDispatchToProps = (dispatch) => ({
// dispatch(userRefresh(data)); // dispatch(userRefresh(data));
// }, // },
}); });
export default connect(mapStateToProps, mapDispatchToProps)(IotCarePlan); export default connect(mapStateToProps, mapDispatchToProps)(IotCarePlan);
Write Preview
Loading…
Cancel
Save