Merge branch 'rwkdev' into lzwdev

package.json

@@ -57,11 +57,13 @@
     "@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",

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;
+  }
+}

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<EchartsHandle>(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 (
+    <View className='box' >
+      <Echarts
+        echarts={echarts}
+        option={option}
+        ref={echartsRef}
+        // isPage={false}
+        // style自定义设置echarts宽高
+        style={{ width: '630rpx', height: '260rpx' }}
+      />
+      <View className='box_background'>
+        <Image className='full' src={require('@/img/full-scran.png')}></Image>
+        <View className='power'>实时能量</View>
+        {
+          level.map(item => (
+            <View className='line' key={item}>
+              <View className='number'>{item}</View><View className='bottom_line'>8</View>
+            </View>)
+          )
+        }
+        <View className='line' >
+          <View className='number'>1</View>
+        </View>
+        <View className='time'>时间</View>
+      </View>
+    </View>
+  );
+
+
+}
+
+
+
+export default Index;

src/pages/iotCarePlan/iotCarePlan.less

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

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<any, any> {
   constructor(props) {
     super(props);
@@ -170,7 +176,7 @@ class IotCarePlan extends Component<any, any> {
       /** 护理过程 END*/
 
       // 模式列表
-      isSwitchActiveMode: false, // 是否显示弹窗切换模式
+      isSwitchActiveMode: true, // 是否显示弹窗切换模式
       ModeList: [],
       ModeType: "all", // all visor面罩 cabin舱体 yimeish医美
       modeClass: "", // 1面罩 2舱体 3医美
@@ -275,8 +281,50 @@ class IotCarePlan extends Component<any, any> {
 
     // 初始化蓝牙
     // 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<any, any> {
       }
     }
   };
+
+  // 绘制能量图
+  drawProwerPicture() {
+
+  }
+
   /** 切换光照 */
   onSwitchChange = async () => {
     // todo
@@ -968,7 +1022,7 @@ class IotCarePlan extends Component<any, any> {
 
         this.setState({
           isShowCountdown: false,
-          hadShowBreakTips: false,
+          hadShowBreakTips: false
         });
       },
       pause: () => {
@@ -1725,9 +1779,10 @@ class IotCarePlan extends Component<any, any> {
       isConnectionBlutoot,
       isShowTipsSave,
     } = this.state;
+
     return (
       <Block>
-        <Navbar titleSlot={title} isBack={true} />
+        <Navbar titleSlot={title} isBack />
 
         <View catchMove>
           <PopupCountdown isShow={isShowCountdown} countdown={countdown} />
@@ -1753,7 +1808,7 @@ class IotCarePlan extends Component<any, any> {
               <ModeListView
                 ModeID={ModeID}
                 activeModeID={activeModeID}
-                isPop={true}
+                isPop
                 isShowNurse={isShowNurse}
                 ModeList={ModeList}
                 ModeType={ModeType}
@@ -1762,9 +1817,9 @@ class IotCarePlan extends Component<any, any> {
                 onEmitShowAll={this.openModeSwitch}
               />
             }
-            textAlgin="center"
+            textAlgin='center'
-            cancelButtonText="取消"
+            cancelButtonText='取消'
-            confirmButtonText="确定"
+            confirmButtonText='确定'
             close={this.cancelModeSwitchBtn}
             confirm={this.confirmModeSwitchBtn}
           />
@@ -1849,12 +1904,12 @@ class IotCarePlan extends Component<any, any> {
         </View>
 
         <View>
-          <View className="iot-main">
+          <View className='iot-main'>
-            <View className="banner-box">
+            <View className='banner-box'>
               <View>
                 {!isShowNurse && (
                   <Video
-                    className="video-or-image"
+                    className='video-or-image'
                     src={ActiveModeItem.modeVideo}
                   />
                 )}
@@ -1863,39 +1918,38 @@ class IotCarePlan extends Component<any, any> {
                   <Block>
                     {isStopNurse ? (
                       <Image
-                        className="video-or-image"
+                        className='video-or-image'
                         src={currentServiceData.stopSource}
                       />
                     ) : (
                       <Image
-                        className="video-or-image"
+                        className='video-or-image'
                         src={currentServiceData.startSource}
                       />
                     )}
                   </Block>
                 )}
-
                 {errorTips && (
                   <Block>
-                    <View className="msg-tips">
+                    <View className='msg-tips'>
                       <Image
-                        className="msg-tips-img"
+                        className='msg-tips-img'
                         src={require("../../img/tips.png")}
                       />
-                      <View className="msg-tips-content">{errorTips}</View>
+                      <View className='msg-tips-content'>{errorTips}</View>
                     </View>
                   </Block>
                 )}
               </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>
                 </View>
-                <View className="line" />
+                <View className='line' />
                 <ElectricityView
                   Electricity={Electricity}
                   matrixElectricity={matrixElectricity}
@@ -1922,6 +1976,8 @@ class IotCarePlan extends Component<any, any> {
               isShowNurse={isShowNurse}
               ActiveModeItem={ActiveModeItem}
             />
+
+            <Echarts></Echarts>
           </View>
 
           <Footer
@@ -1934,6 +1990,9 @@ class IotCarePlan extends Component<any, any> {
             onEmitErrorTips={this.onEmitErrorTips}
           />
         </View>
+        <Block id='ccccc' style={{ width: '300px', height: '300px' }}>66666666666666666666</Block>
+        <Block id='myBox' style={{ width: '300px', height: '300px' }}></Block>
+
       </Block >
     );
   }