diff --git a/package.json b/package.json index 0295a77..b1bb931 100644 --- a/package.json +++ b/package.json @@ -53,15 +53,17 @@ "@tarojs/plugin-platform-weapp": "3.6.19", "@tarojs/react": "3.6.19", "@tarojs/runtime": "3.6.19", - "@tarojs/shared": "3.6.19", + "@tarojs/shared": "3.6.19", "@tarojs/taro": "3.6.19", "@visactor/taro-vchart": "^1.9.0", "dayjs": "^1.11.10", + "echarts": "^5.5.0", "lodash": "^4.17.15", "react": "^18.0.0", "react-dom": "^18.0.0", "react-redux": "^9.0.3", - "taro-ui": "^3.2.0" + "taro-ui": "^3.2.0", + "taro-react-echarts": "^1.2.2" }, "devDependencies": { "@babel/core": "^7.8.0", diff --git a/src/img/full-scran.png b/src/img/full-scran.png new file mode 100644 index 0000000..6104a6d Binary files /dev/null and b/src/img/full-scran.png differ diff --git a/src/img/part-scran.png b/src/img/part-scran.png new file mode 100644 index 0000000..1b2651d Binary files /dev/null and b/src/img/part-scran.png differ diff --git a/src/pages/iotCarePlan/components/Echart/index.less b/src/pages/iotCarePlan/components/Echart/index.less new file mode 100644 index 0000000..aa5e3e3 --- /dev/null +++ b/src/pages/iotCarePlan/components/Echart/index.less @@ -0,0 +1,62 @@ +.box { + width: 690rpx; + height: 320rpx; + margin: 28rpx auto; + background-color: #fff; + border-radius: 30rpx; + padding: 35rpx 25rpx 25rpx 35rpx; + box-sizing: border-box; + position: relative; +} +.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; + } + .full{ + width: 24rpx; + height: 24rpx; + position: absolute; + top: 32rpx; + right: 26rpx; + } + .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; + bottom: 22rpx; + right: 24rpx; + font-family: PingFang-SC; + font-size: 18rpx; + color: #cccccc; + } +} diff --git a/src/pages/iotCarePlan/components/Echart/index.tsx b/src/pages/iotCarePlan/components/Echart/index.tsx new file mode 100644 index 0000000..cdfcd00 --- /dev/null +++ b/src/pages/iotCarePlan/components/Echart/index.tsx @@ -0,0 +1,284 @@ +import Taro from "@tarojs/taro"; +import classnames from "classnames"; +import { Block, View, Image, Text } from "@tarojs/components"; +import { useRef } from 'react' +import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts' +import echarts from '@/utils/echarts.min.js' +import "./index.less"; + +interface Props { + Electricity: any; + matrixElectricity: any; + facialMaskConnectStatus: any; +} + +function Index() { + const echartsRef = useRef(null) + const option: EChartOption = { + grid: { // 让图表占满容器 + top: "28rpx", + left: "18rpx", + right: "28rpx", + bottom: "17rpx" + }, + xAxis: { + // name: '', + // nameGap: 5, + // nameTextStyle: { + // color: '#e4e4e4', + // fontSize:7 + // }, + type: 'category', + axisLine: { + //坐标轴轴线相关设置。数学上的x轴 + show: true, + lineStyle: { + color: '#cccccc' + } + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + color: '#cccccc', + fontSize: 8 + }, + axisTick: { + show: false + }, + data: [ + '00:01', + '00:02', + '00:03', + '00:04', + '00:05', + '00:06', + '00:07', + '00:08', + '00:09', + '00:10' + ] + }, + yAxis: { + type: 'value', + min: 0, + max: 8, + splitNumber: 8, + splitLine: { + show: false, + lineStyle: { + color: '#cccccc', + type: [4, 2], + dashOffset: 4 + } + }, + axisLine: { + show: false + }, + axisLabel: { + show: false + }, + axisTick: { + show: false + } + }, + visualMap: { + z: 1, + top: 0, + right: 0, + seriesIndex: 0, + show: false, + pieces: [ + { + gt: 0, + lte: 1, + color: '#fff8c9' + }, + { + gt: 1, + lte: 2, + color: '#fff0c6' + }, + { + gt: 2, + lte: 3, + color: '#ffe5c3' + }, + { + gt: 3, + lte: 4, + color: '#ffdbbf' + }, + { + gt: 4, + lte: 5, + color: '#ffcfbb' + }, + { + gt: 5, + lte: 6, + color: '#ffbab5' + }, + { + gt: 6, + lte: 7, + color: '#ffb4b3' + }, + { + gt: 7, + lte: 8, + color: '#ffb4b3' + } + ], + outOfRange: { + color: '#ff8410' + } + }, + 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: 5, + lineStyle: { + color: '#ff8410', + width: 1 + }, + itemStyle: { + color: '#ff8410' + } + }, + { + name: 'a', + data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + type: 'bar', + barWidth: 12, + 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' + } + } + ] + } + + const level = [8, 7, 6, 5, 4, 3, 2] + + return ( + + + + + 实时能量 + { + level.map(item => ( + + {item}8 + ) + ) + } + + 1 + + 时间 + + + ); + + +} + + + +export default Index; diff --git a/src/pages/iotCarePlan/iotCarePlan.less b/src/pages/iotCarePlan/iotCarePlan.less index 10d3207..0b7f97e 100644 --- a/src/pages/iotCarePlan/iotCarePlan.less +++ b/src/pages/iotCarePlan/iotCarePlan.less @@ -206,3 +206,8 @@ .v3 { background: linear-gradient(0deg, #ff4646, #ff6b6b, #f86f6f, #ff9494); } + +#chart { + width: 690rpx; + height: 320rpx; +} diff --git a/src/pages/iotCarePlan/iotCarePlan.tsx b/src/pages/iotCarePlan/iotCarePlan.tsx index 3d4f079..8c00cf7 100644 --- a/src/pages/iotCarePlan/iotCarePlan.tsx +++ b/src/pages/iotCarePlan/iotCarePlan.tsx @@ -1,8 +1,10 @@ import Taro from "@tarojs/taro"; import dayjs from "dayjs"; 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 { Block, View, @@ -51,6 +53,8 @@ import { deviceCommandSamples, bleCommandSamples, } from "@/components/bluetoot/connection/test"; + +import { Progress } from '@antmjs/vantui' import { s_to_s, s_to_m, @@ -124,6 +128,8 @@ let DeviceSyncData = { }; let deviceToolKitInstance = deviceToolKitInstanceWL200; + + class IotCarePlan extends Component { constructor(props) { super(props); @@ -170,7 +176,7 @@ class IotCarePlan extends Component { /** 护理过程 END*/ // 模式列表 - isSwitchActiveMode: false, // 是否显示弹窗切换模式 + isSwitchActiveMode: true, // 是否显示弹窗切换模式 ModeList: [], ModeType: "all", // all visor面罩 cabin舱体 yimeish医美 modeClass: "", // 1面罩 2舱体 3医美 @@ -225,7 +231,7 @@ class IotCarePlan extends Component { } componentDidMount() {} - componentWillUnmount() {} + componentWillUnmount() { } componentDidShow() { console.log("页面显示了"); @@ -275,8 +281,50 @@ class IotCarePlan extends Component { // 初始化蓝牙 // 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() { // 查询自定义设备指令 const queryInstructionParams = { @@ -562,6 +610,12 @@ class IotCarePlan extends Component { } } }; + + // 绘制能量图 + drawProwerPicture() { + + } + /** 切换光照 */ onSwitchChange = async () => { // todo @@ -968,7 +1022,7 @@ class IotCarePlan extends Component { this.setState({ isShowCountdown: false, - hadShowBreakTips: false, + hadShowBreakTips: false }); }, pause: () => { @@ -1725,9 +1779,10 @@ class IotCarePlan extends Component { isConnectionBlutoot, isShowTipsSave, } = this.state; + return ( - + @@ -1753,7 +1808,7 @@ class IotCarePlan extends Component { { onEmitShowAll={this.openModeSwitch} /> } - textAlgin="center" - cancelButtonText="取消" - confirmButtonText="确定" + textAlgin='center' + cancelButtonText='取消' + confirmButtonText='确定' close={this.cancelModeSwitchBtn} confirm={this.confirmModeSwitchBtn} /> @@ -1849,12 +1904,12 @@ class IotCarePlan extends Component { - - + + {!isShowNurse && ( - - - + + + 护理时间: - {currentTime} + {currentTime} - + { isShowNurse={isShowNurse} ActiveModeItem={ActiveModeItem} /> + +