From c31d291cf685fa495968b5f25ae2e0c57d043291 Mon Sep 17 00:00:00 2001 From: qsj <731458905@qq.com> Date: Fri, 15 Mar 2024 09:34:34 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E5=B0=81=E8=A3=85=E8=84=B8=E9=83=A8?= =?UTF-8?q?=E6=8A=A4=E7=90=86=E8=B7=B3=E8=BD=AC=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 2 + src/pages/face_report/face_report.tsx | 6 +- .../face_report_AllDevice.config.js | 3 + .../face_report_AllDevice.less | 0 .../face_report_AllDevice.tsx | 44 ++ .../face_report_one/face_report_one.config.js | 3 + .../face_report_one/face_report_one.less | 353 +++++++++++++++ src/pages/face_report_one/face_report_one.tsx | 424 ++++++++++++++++++ src/pages/recording/recording.tsx | 79 +++- 9 files changed, 892 insertions(+), 22 deletions(-) create mode 100644 src/pages/face_report_AllDevice/face_report_AllDevice.config.js create mode 100644 src/pages/face_report_AllDevice/face_report_AllDevice.less create mode 100644 src/pages/face_report_AllDevice/face_report_AllDevice.tsx create mode 100644 src/pages/face_report_one/face_report_one.config.js create mode 100644 src/pages/face_report_one/face_report_one.less create mode 100644 src/pages/face_report_one/face_report_one.tsx diff --git a/src/app.config.ts b/src/app.config.ts index a4e9b69..136154e 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -27,6 +27,8 @@ export default defineAppConfig({ "pages/webViewPage/webViewPage", 'pages/template/template', 'pages/face_report/face_report', + 'pages/face_report_one/face_report_one', + 'pages/face_report_AllDevice/face_report_AllDevice', "pages/connection_help/connection_help", "pages/errorpage/errorpage", ], diff --git a/src/pages/face_report/face_report.tsx b/src/pages/face_report/face_report.tsx index e020971..f1aadbd 100644 --- a/src/pages/face_report/face_report.tsx +++ b/src/pages/face_report/face_report.tsx @@ -2,7 +2,7 @@ import Taro from "@tarojs/taro"; import classnames from "classnames"; import { Component, PropsWithChildren, useEffect, useState } from "react"; import { Progress } from "@antmjs/vantui"; -import { showModal } from "../../utils/traoAPI.js"; +import { showModal } from "../../utils/traoAPI"; import { Tab, Tabs, Dialog, Popup } from "@antmjs/vantui"; import { Block, View, Text, Image, Input, Button, Textarea, @@ -65,6 +65,7 @@ export default class Index extends Component { data["instrumentId"] = id; } let res = await InstrumentInfo.apiNursingLog.getStatistics(data); + if (res.data.code === 200) { this.setState({ statistics: res.data.data }); } @@ -252,8 +253,9 @@ delImg(i) { } } async onLoad(options) { + console.log(options,'查看传过来的参数'); + let Bool = JSON.parse(options?.report) - console.log('传过来的东西',options,Bool); if(!Bool ){ this.setState({ reportShow:Bool diff --git a/src/pages/face_report_AllDevice/face_report_AllDevice.config.js b/src/pages/face_report_AllDevice/face_report_AllDevice.config.js new file mode 100644 index 0000000..04e6a32 --- /dev/null +++ b/src/pages/face_report_AllDevice/face_report_AllDevice.config.js @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: "模板页", +}); diff --git a/src/pages/face_report_AllDevice/face_report_AllDevice.less b/src/pages/face_report_AllDevice/face_report_AllDevice.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/face_report_AllDevice/face_report_AllDevice.tsx b/src/pages/face_report_AllDevice/face_report_AllDevice.tsx new file mode 100644 index 0000000..0ff535b --- /dev/null +++ b/src/pages/face_report_AllDevice/face_report_AllDevice.tsx @@ -0,0 +1,44 @@ +import Taro from "@tarojs/taro"; +import classnames from "classnames"; + +import { Component, PropsWithChildren, useEffect, useState } from "react"; +import { Block, View, Text, Image, Input, Button } from "@tarojs/components"; +import Navbar from "@/components/navbar/navbar"; +import "./face_report_AllDevice.less"; + +export default class Index extends Component { + constructor(props) { + super(props); + this.state = { + name: "页面待开发", + }; + } + + async onLoad() {} + componentDidMount() {} + + componentWillUnmount() {} + + componentDidShow() {} + + componentDidHide() {} + + async initData() {} + customBack = () => { + Taro.navigateBack(); + }; + render() { + let { name } = this.state; + return ( + + + {name} + + ); + } +} diff --git a/src/pages/face_report_one/face_report_one.config.js b/src/pages/face_report_one/face_report_one.config.js new file mode 100644 index 0000000..04e6a32 --- /dev/null +++ b/src/pages/face_report_one/face_report_one.config.js @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: "模板页", +}); diff --git a/src/pages/face_report_one/face_report_one.less b/src/pages/face_report_one/face_report_one.less new file mode 100644 index 0000000..0bde6db --- /dev/null +++ b/src/pages/face_report_one/face_report_one.less @@ -0,0 +1,353 @@ +page { + background: #f8f8f8; +} + +.time { + font-size: 36rpx; + font-weight: 500; + color: #000000; + margin: 38rpx 0; +} + +.m-x-30 { + margin-right: 30rpx; + margin-left: 30rpx; + background: #fff; +} + +.statistic { + height: 200rpx; + background: #ffffff; + border-radius: 30rpx; + text-align: center; + margin-bottom: 20rpx; + margin-top: 32rpx; +} + +.statistic_item { + flex: 1; + border-right: 1rpx solid #dddddd; +} + +.statistic_title { + font-size: 48rpx; + font-weight: 600; + color: #000000; + margin-bottom: 26rpx; + height: 37rpx; + line-height: 1; +} + +.num { + font-size: 26rpx; + font-weight: 500; + margin-left: 13rpx; +} + +.statistic_desc { + font-size: 26rpx; + font-weight: 500; + color: #999999; + line-height: 36rpx; +} + +.statistic_item:last-child { + border: none; +} +.bottom-title{ + margin-right: 30rpx; + margin-left: 30rpx; + margin-top: 27rpx; +} +.text-title{ + font-size: 18rpx; + color: #999999; +} +.main { + border-radius: 30rpx; + overflow: hidden; + // padding-bottom: calc(153rpx + env(safe-area-inset-bottom)); +} + +.main_title { + font-size: 32rpx; + font-weight: bold; + color: #000; + // margin: 48rpx 0 34rpx; +} +.eacharts{ + background-color: red; + margin-top: 14px; + margin-bottom: 45rpx; + /* margin: 52rpx 0rpx; */ + width: 100%; + height: 247rpx; +} +.van-popup { + border-radius: 30rpx; + .popBox { + box-sizing: border-box; + width: 670rpx; + height: 840rpx; + background: #ffffff; + border-radius: 30rpx; + position: relative; + padding: 42rpx 30rpx 0; + .close_icon { + position: absolute; + width: 50rpx; + height: 50rpx; + top: 34rpx; + right: 34rpx; + } + .popTitle { + font-size: 36rpx; + text-align: center; + font-family: PingFang SC; + font-weight: bold; + } + .popSubtitle { + display: flex; + justify-content: center; + align-items: flex-end; + font-size: 28rpx; + text-align: center; + margin-top: 50rpx; + .bold { + font-size: 38rpx; + font-weight: bold; + } + } + .img_box { + margin: 58rpx 0 37rpx 0; + display: flex; + flex-wrap: wrap; + + .img { + position: relative; + margin-right: 35rpx; + width: 180rpx; + height: 180rpx; + .closeImg { + position: absolute; + top: 10rpx; + right: 10rpx; + width: 30rpx; + } + } + .img:last-child { + margin-right: 0; + } + .addBox { + width: 180rpx; + height: 180rpx; + background: #ffffff; + border: 1px solid #dddddd; + border-radius: 20rpx; + display: flex; + justify-content: center; + align-items: center; + Image { + width: 40rpx; + } + } + .showImg { + width: 100% !important; + height: 100% !important; + border-radius: 20rpx; + } + } + .info4 { + position: relative; + textarea { + padding: 28rpx 30rpx; + width: 610rpx; + height: 186rpx; + background: #ffffff; + border: 1px solid #dddddd; + border-radius: 3rpx; + box-sizing: border-box; + } + .tip { + position: absolute; + right: 20rpx; + bottom: 22rpx; + font-size: 22rpx; + font-family: PingFang SC; + font-weight: 500; + color: #cccccc; + } + } + .btn1 { + font-style: normal; + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + background: #000000; + text-align: center; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + margin-top: 55rpx; + color: #ffffff; + } + } +} +.footer { + position: fixed; + z-index: 99; + bottom: 0; + width: 100%; + height: 153rpx; + box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21); + background: #ffffff; +} + +.btn { + width: 540rpx; + height: 90rpx; + background: #000000; + border-radius: 45rpx; + color: #fff; + text-align: center; + line-height: 90rpx; + font-weight: bold; + font-size: 32rpx; + margin: 0 30rpx 0 49rpx; +} + +.text { + flex: 1; + height: 31rpx; + font-size: 32rpx; + font-weight: bold; + color: #000000; + line-height: 31rpx; +} + +.text image { + width: 10rpx; + height: 20rpx; + margin-left: 15rpx; +} + +.products_item { + width: 690rpx; + height: 330rpx; + background: #fff; + padding: 30rpx 33rpx 38rpx; + border-radius: 30rpx; + box-sizing: border-box; + // margin-bottom: 20rpx; +} + +.products_item:last-child { + border: none; +} + +.products_top { + font-size: 28rpx; + font-weight: bold; + color: #000000; + margin-bottom: 36rpx; +} + +.products_top .add_time { + padding-right: 23rpx; +} + +.tag { + width: 90rpx; + height: 36rpx; + line-height: 36rpx; + background: #e5f9ee; + border-radius: 18rpx; + text-align: center; + font-size: 24rpx; + font-weight: 500; + color: #57bc81; +} + +.tag_active { + background: #f8f8f8; + color: #999; +} +.face_type{ + text-align: center; + margin-right: 37rpx; + // margin-top: 16rpx; + font-weight: 700; +} +.cover { + width: 170rpx; + height: 211rpx; + border-radius: 20rpx; + margin-right: 37rpx; + background-color: red; +} + +.content { + display: flex; + flex-flow: column; + justify-content: space-between; + background-color: #f8f8f8; + border-radius: 30rpx; + padding: 21rpx; + border-radius: 20rpx; + width: 457rpx; + height: 195rpx; + +} + +.content_top{ + height: 140rpx; + display: flex; + flex-flow: column; + justify-content: space-between; +} + +.title { + font-size: 28rpx; + font-weight: bold; + color: #000000; + margin: 3rpx 0 25rpx; +} + +.desc { + font-size: 24rpx; + font-weight: 500; + color: #999999; + margin: 12rpx 0rpx; + color: #181818; + font-weight: 700; +} + +// .desc:last-child { +// margin-top: 10rpx; +// } + +.progress { + display: flex; + margin-top: 10rpx; + font-size: 24rpx; + font-family: PingFang SC; + font-weight: 500; + color: #999999; + align-items: center; + + .van-progress { + width: 213rpx; + .van-progress__portion { + background: linear-gradient(90deg, #ffe9c7, #eecda1); + border-radius: 6rpx; + height: 12rpx; + .van-progress__pivot { + display: none; + } + } + } + + .percent { + margin-left: 52rpx; + } +} diff --git a/src/pages/face_report_one/face_report_one.tsx b/src/pages/face_report_one/face_report_one.tsx new file mode 100644 index 0000000..a07a121 --- /dev/null +++ b/src/pages/face_report_one/face_report_one.tsx @@ -0,0 +1,424 @@ +import Taro from "@tarojs/taro"; +import classnames from "classnames"; +import { Component, PropsWithChildren, useEffect, useState } from "react"; +import { Progress } from "@antmjs/vantui"; +import { showModal } from "../../utils/traoAPI"; +import { Tab, Tabs, Dialog, Popup } from "@antmjs/vantui"; +import { + Block, View, Text, Image, Input, Button, Textarea, +} from "@tarojs/components"; +import { date, getdates, previewImage } from "../../utils/util"; + +/** 自定义组件 **/ +import Navbar from "../../components/navbar/navbar"; +import PopupAlert from "../../components/popup/popup-alert"; +import { InstrumentInfo } from "../../utils/Interface"; + +/** 自定义组件 **/ +import "./face_report_one.less"; + +export default class Index extends Component { + constructor(props) { + super(props); + this.state = { + face_Tyep: '基础脸部', + reportShow: true, + name: "template模板页", + statistics: {}, + recordList: [], + recordData: {}, + year: new Date().getFullYear(), + show: false, + clockStatistics: [], + punchInInfo: { + clockImageList: [], + clockContent: "", + }, + monthTime: [ + { month: 1, time: 0 }, + { month: 2, time: 0 }, + { month: 3, time: 0 }, + { month: 4, time: 0 }, + { month: 5, time: 0 }, + { month: 6, time: 0 }, + { month: 7, time: 0 }, + { month: 8, time: 0 }, + { month: 9, time: 0 }, + { month: 10, time: 0 }, + { month: 11, time: 0 }, + { month: 12, time: 0 }, + ], + }; + } + + componentDidMount() { } + + componentWillUnmount() { } + + // 打开/关闭弹窗 + setShow(show: boolean) { + this.setState({ show }); + } + // 查询用户护理记录的当月统计信息 + async getStatistics(id) { + let data = {}; + if (id != null) { + data["instrumentId"] = id; + } + let res = await InstrumentInfo.apiNursingLog.getStatistics(data); + + if (res.data.code === 200) { + this.setState({ statistics: res.data.data }); + } + } + + async getRecord(id, recordId) { + console.log("id, recordId", id, recordId); + let data = {}; + if (id != null) { + data["instrumentId"] = id; + } + let res = await InstrumentInfo.apiNursingLog.getRecord(data); + if (res.data.code === 200) { + if (recordId) { + res.data.rows.map((item) => { + item.nursingTime = this.getTime(item.nursingTime); + item.createTime = getdates(item.createTime).replace(/-/g, "."); + + if (item.id == recordId) { + this.setState({ recordData: item }); + } + }); + } else { + this.setState({ recordData: res.data.rows[0] }); + } + + this.setState({ + recordList: res.data.rows.filter((item) => item.id != recordId), + }); + } + } + // 文本框输入文字 + handleTextareaInput = (e) => { + const punchInInfo = this.state.punchInInfo; + this.setState({ punchInInfo: { ...punchInInfo, clockContent: e.detail.value } }); + }; + async submit() { + let punchInInfo = this.state.punchInInfo || {}; + if (!punchInInfo.clockImageList.length) { + Taro.showToast({ + title: "请上传图片", + icon: "none", + }); + return; + } + if (!punchInInfo.clockContent) { + Taro.showToast({ + title: "请输入打卡心得", + icon: "none", + }); + return; + } + InstrumentInfo.apiClock.postInsertClockLog(punchInInfo).then((res) => { + showModal({ + t2: "您已完成今日打卡", + btn1show: false, + }).then(() => { + let data = new Date + Taro.setStorageSync('DayTime', data.toISOString()) + this.setState({ + clockShow: true + }) + this.getClockStatistics(); + this.setShow(false); + + }); + }); + } + /**分页获取用户的打卡记录 page size*/ + async getClockStatistics(year = this.state.year) { + let res = await InstrumentInfo.apiClock.getClockStatistics({ year }); + console.log(res, '查看返回', year); + + if (res.data.code === 200) { + + res.data.data.reverse(); + if (res.data.data.length > 0) { + res.data.data.map((item, index) => { + item.isMore = false; + item.detail = []; + if (index === 0) { + item.isMore = true; + this.getList(item.id, item.year, item.month); + } + this.state.monthTime.map((monthItem) => { + if (monthItem.month == item.month) { + monthItem.time = item.clockNum; + } + }); + }); + this.setState({ monthTime: this.state.monthTime }); + } else { + let monthTime = [ + { month: 1, time: 0 }, + { month: 2, time: 0 }, + { month: 3, time: 0 }, + { month: 4, time: 0 }, + { month: 5, time: 0 }, + { month: 6, time: 0 }, + { month: 7, time: 0 }, + { month: 8, time: 0 }, + { month: 9, time: 0 }, + { month: 10, time: 0 }, + { month: 11, time: 0 }, + { month: 12, time: 0 }, + ]; + this.setState({ monthTime }); + } + this.setState({ clockStatistics: res.data.data }); + } + } + // 获取当月打卡记录 + async getList(id, year, month) { + let data = { + year, + month, + }; + let res = await InstrumentInfo.apiClock.getList(data); + if (res.data.code === 200) { + console.log(this.state.clockStatistics, 88888); + + this.state.clockStatistics.map((item) => { + if (item.id === id) { + item.detail = res.data.data; + item.detail.map((obj) => { + obj.updateTime = getdates(obj.updateTime).replace(/-/g, "."); + }); + } + }); + this.setState({ clockStatistics: this.state.clockStatistics }); + } + } + // 上传图片 + handleChooseImage() { + Taro.chooseMedia({ + count: 1, + mediaType: ["image"], + sourceType: ["album", "camera"], + success: (res) => { + const tempFilePaths = res.tempFiles.map((item) => item.tempFilePath); + tempFilePaths?.forEach((item) => { + // eslint-disable-next-line @typescript-eslint/no-shadow + InstrumentInfo.apiClock + .clockFileUpload({ clockImg: item }) + .then((res) => { + const currentImage = res.data.url; + const newImageList = + this.state.punchInInfo.clockImageList.length >= 3 + ? this.state.punchInInfo.clockImageList + : [...this.state.punchInInfo.clockImageList, currentImage]; + const punchInInfo = this.state.punchInInfo; + punchInInfo.clockImageList = newImageList; + this.setState({ punchInInfo }); + }); + }); + }, + fail: (err) => { + console.info("err", err); + }, + }); + } + // 删除打卡图片 + delImg(i) { + const punchInInfo = this.state.punchInInfo; + punchInInfo.clockImageList.splice(i, 1); + this.setState({ punchInInfo }); + } + getRouteId() { + const searchParams = new URLSearchParams(window.location.search); + const id = searchParams.get("id"); + const recordId = searchParams.get("recordId"); + this.getStatistics(id); + this.getRecord(id, recordId); + console.log(recordId); + } + getTime(time) { + const hour = time.slice(0, 2); + const minute = time.slice(3, 5); + const second = time.slice(6, 8); + + if (hour > 0) { + return hour + "时" + minute + "分" + second + "秒"; + } else { + return minute + "分" + second + "秒"; + } + } + async onLoad(options) { + console.log(options, '查看传过来的参数'); + + let Bool = JSON.parse(options?.report) + if (!Bool) { + this.setState({ + reportShow: Bool + }) + } + + this.getRouteId(); + this.getClockStatistics() + } + + componentDidShow() { } + + componentDidHide() { } + + async initData() { } + + GoIndex = () => { + Taro.switchTab({ url: "/pages/index/index" }); + }; + + render() { + let { name, statistics, recordList, recordData, show, clockStatistics, punchInInfo, monthTime, reportShow, face_Tyep } = this.state; + return ( + + + + + + {statistics.nursingNum} + 天 + + 本月护理天数 + + + {statistics.nursingTime} + 本月护理时间 + + {/* */} + + + + + + + + {face_Tyep} + + + + + + 能量发数：{recordData.modeName} + + 脸部能量：≈{recordData.nursingTime} + + + 平均能量等级：{recordData.nursingTime} + + + 最大等级：{recordData.nursingTime} + + + + + + + + 能量等级图谱-{face_Tyep} + echarts图标 + + + + [1] 能量发数:指小程序每秒以1发能量呈现,当次使用仪器所呈现的能量总数量。“1发”指仪器1秒内仪器持续输出的平均能量。 + + [2]能量总值: 指单次使用时长、仪器每秒输出的实际能量综合计算的能量总值 + [3]平均能量等级:指单次使用时长，根据花至精准能量算法根据不同皮肤所输出的平均能量等级。
 + [4]最大能量:指根据花至精准能量算法根据不同皮肤所输出的能量最高等级
 + + [5]最小能量:指根据花至精准能量算法根据不同皮肤所输出的能量最低等级。 + + + {reportShow ? ( + + 前往打卡 + + 跳过 + + + + ) : null} + this.setState({ show: false })}> + + + 今日打卡 + + 本月您已打卡 + {clockStatistics[0]?.clockNum}{" "} + 天，超越 + + {(clockStatistics[0]?.percentage * 100).toFixed(1)}% + + 花至用户 + + + {punchInInfo.clockImageList.map((item, index) => ( + + + + + ))} + {punchInInfo.clockImageList.length < 3 && ( + + + + )} + + + + + + + {"（" + (punchInInfo.clockContent.length || 0) + "/120）"} + + + + + 确认提交 + + + + + + ); + } +} diff --git a/src/pages/recording/recording.tsx b/src/pages/recording/recording.tsx index b64471f..e56f67b 100644 --- a/src/pages/recording/recording.tsx +++ b/src/pages/recording/recording.tsx @@ -32,7 +32,7 @@ export default class Recording extends Component { this.state = { name: "护理历程", current: 0, - ViewAddInstrument:false, //用来记录有没有添加设备 + ViewAddInstrument: false, //用来记录有没有添加设备 array: [1, 2, 3, 4, 5], recordList: [], bindingInstrumentList: [], @@ -94,15 +94,16 @@ export default class Recording extends Component { data["instrumentId"] = id; } let res = await InstrumentInfo.apiNursingLog.getRecord(data); - - + console.log(res, '查看你获取护理历程'); + + if (res.data.code === 200) { res.data.rows.map((item) => { item.nursingTime = this.getTime(item.nursingTime); let createTime = getdates(item.createTime) - - - item.createTime = createTime&& createTime.replace(/-/g, "."); + + + item.createTime = createTime && createTime.replace(/-/g, "."); }); this.setState({ recordList: res.data.rows }); } @@ -141,7 +142,7 @@ export default class Recording extends Component { /**分页获取用户的打卡记录 page size*/ async getClockStatistics(year = this.state.year) { let res = await InstrumentInfo.apiClock.getClockStatistics({ year }); - + if (res.data.code === 200) { res.data.data.reverse(); @@ -216,15 +217,15 @@ export default class Recording extends Component { }; let res = await InstrumentInfo.apiClock.getList(data); if (res.data.code === 200) { - console.log(res, 88888,this.state.clockStatistics,id); + console.log(res, 88888, this.state.clockStatistics, id); this.state.clockStatistics.map((item) => { if (item.id === id) { item.detail = res.data.data; item.detail.map((obj) => { - - let updateTime =getdates(obj.updateTime) - + + let updateTime = getdates(obj.updateTime) + obj.updateTime = updateTime && updateTime.replace(/-/g, "."); }); } @@ -264,8 +265,8 @@ export default class Recording extends Component { const ViewAddInstrument = options.param; this.setState({ ViewAddInstrument: ViewAddInstrument - }) - + }) + this.getRecord(null); this.getBindingInstrumentList(); this.getLatestClockRecord(); @@ -292,9 +293,46 @@ export default class Recording extends Component { } }; // 跳转到护理报告 - toReport(id, recordId) { - let report =false - go("/pages/face_report/face_report?id=" + id + "&recordId=" + recordId+ "&report=" + report ); + toReport(id, recordId, item) { + console.log(item, '查看类型', item.jumpType ); + item.jumpType =1 + switch (item.jumpType ) { + case 1: + this.One(item); + break; + case 2: + + this.two(item); break; + case 3: + + this.three(item); break; + default: + this.AllDevice(item); + } + // let report =false + // go("/pages/face_report/face_report?id=" + id + "&recordId=" + recordId+ "&report=" + report ); + } + // 打开第一种类型 + One = async (item) => { + console.log('打开第一种类型', item); + let report =false + go("/pages/face_report_one/face_report_one?id=" + item.id + "&recordId=" + item.recordId+ "&report=" + report ); + } + // 打开第二种类型 + two = async (item) => { + console.log('打开第二种类型', item); + + } + // 打开第二种类型 + three = async (item) => { + console.log('打开第二种类型', item); + + } + // 打开其他类型 + AllDevice = async (item) => { + console.log('打开其他类型', item); + go("/pages/face_report_AllDevice/face_report_AllDevice"); + } // 上传图片 handleChooseImage() { @@ -492,13 +530,14 @@ export default class Recording extends Component { {item.online === 1 ? "在线" : "离线"} - {item.instrumentType === 1 && ( + {item.instrumentType === 2 && ( 回看报告 @@ -662,7 +701,7 @@ export default class Recording extends Component { !clockShow && ViewAddInstrument === "true" && ( - 前往打卡 + 前往打卡 {/* 跳过 > @@ -710,7 +749,7 @@ export default class Recording extends Component { className="showImg" src={require("../../img/clock_in_upload/add-image.png")} mode="widthFix" - + > )} From 09b8bdb39b601cd20fe262c3b9b9e8bab7b3b7d2 Mon Sep 17 00:00:00 2001 From: rongweikang <1174906669@qq.com> Date: Fri, 15 Mar 2024 17:22:15 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E5=B0=81=E8=A3=85=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../iotCarePlan/components/Echart/index.less | 1567 ----------------- .../iotCarePlan/components/Echart/index.tsx | 323 +--- .../iotCarePlan/components/Gears/index.less | 266 +++ .../iotCarePlan/components/Gears/index.tsx | 235 +++ .../components/WaterTest/index.less | 557 ++++++ .../components/WaterTest/index.tsx | 139 ++ 6 files changed, 1207 insertions(+), 1880 deletions(-) create mode 100644 src/moduleIOT/pages/iotCarePlan/components/Gears/index.less create mode 100644 src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx create mode 100644 src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less create mode 100644 src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less index 3813c5a..516b404 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less @@ -65,1570 +65,3 @@ page { background: #f8f8f8; background: #f3f3f3; } -.titlemain { - position: fixed; - z-index: 99; - width: 100%; - top: 0; - .logoicon { - width: 223rpx; - } - .title { - position: relative; - display: flex; - align-items: center; - justify-content: center; - } -} -.infobox1 { - background: #fff; - border-radius: 30rpx; - margin: 27rpx 30rpx 22rpx; - position: relative; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - .img { - width: 690rpx; - height: 690rpx; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - position: relative; - border-radius: 20rpx; - margin: auto; - .imgz { - border-radius: 20rpx; - width: 100%; - height: 100%; - overflow: hidden; - .video_tip { - position: absolute; - z-index: 99; - background: rgba(0, 0, 0, 0.5); - color: #fff; - font-size: 28rpx; - top: 50%; - left: 50%; - margin-top: -25rpx; - padding: 11rpx 34rpx; - font-weight: 500; - border-radius: 30rpx; - width: 500rpx; - transform: translateX(-50%); - text-align: center; - word-break: break-word; - box-sizing: border-box; - .icon { - width: 30rpx; - height: 30rpx; - margin-right: 17rpx; - } - } - .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%; - } - } - } - .tipbox2 { - position: absolute; - z-index: 999999; - width: 500rpx; - bottom: -290rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 16rpx 0; - .jicon { - width: 26rpx; - position: absolute; - top: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 34rpx 24rpx 0 24rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 16rpx; - position: relative; - left: calc(500rpx - 36rpx - 154rpx); - } - } - .dottedLine { - border: 4rpx dashed #e2c6a3; - height: 100%; - position: absolute; - z-index: 999999; - border-radius: 20rpx; - right: 0; - left: 0; - } - .tipbox1 { - position: absolute; - z-index: 999999; - width: 480rpx; - bottom: -330rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 16rpx 0; - margin-left: 8rpx; - .jicon { - width: 26rpx; - position: absolute; - top: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 34rpx 2rpx 0 24rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } - } - .info1 { - height: 92rpx; - background: #fff; - border-radius: 20rpx; - position: relative; - .dottedLine { - border: 4rpx dashed #e2c6a3; - height: 100%; - position: absolute; - z-index: 999999; - border-radius: 20rpx; - right: 0; - left: 0; - } - .block { - width: 33%; - text-align: center; - .num { - font-size: 30rpx; - font-weight: 800; - color: #000000; - } - .color { - font-size: 30rpx; - font-weight: 800; - color: #000000; - } - .icon { - position: relative; - margin-left: 10rpx; - .num { - position: absolute; - color: #e8d3b0; - font-size: 22rpx; - font-weight: bold; - left: 50%; - margin-left: -8rpx; - top: 50%; - margin-top: -18rpx; - } - } - .dianliang1 { - background: linear-gradient(0deg, #efdcc2, #fff2df); - width: 10rpx; - height: 24rpx; - border-radius: 5rpx; - margin: 0 12rpx 0 0; - } - .dianliang2 { - background: #f8f8f8; - width: 10rpx; - height: 24rpx; - border-radius: 5rpx; - margin: 0 12rpx 0 0; - } - } - .border { - background: #dddddd; - width: 1rpx; - height: 50rpx; - } - } - .border_img { - position: absolute; - width: 700rpx; - z-index: 9999999; - bottom: -6rpx; - border: 6rpx dashed #e2c6a3; - border-radius: 20rpx; - padding: 4rpx; - left: -4rpx; - } - .tipbox4 { - position: absolute; - z-index: 999999; - width: 460rpx; - bottom: -260rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 16rpx 0; - .jicon { - width: 26rpx; - position: absolute; - top: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 34rpx 0 0 24rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } -} -.infobox1 .info1 .block .tip1, -.infobox1 .info1 .block .dang { - font-size: 26rpx; - font-weight: 500; - color: #000000; -} -.infobox2 { - position: relative; - border-radius: 20rpx; - height: 74rpx; - margin: 60rpx 20rpx 0; - .block { - width: 50%; - .icon { - width: 46rpx; - } - .name { - margin-left: 14rpx; - color: #202020; - font-size: 22rpx; - } - } - .border { - background: #696460; - width: 2rpx; - height: 16rpx; - } - .border_img4 { - height: 94rpx; - border: 6rpx dashed #e2c6a3; - position: absolute; - z-index: 99999; - left: -8rpx; - width: calc(100% + 8rpx); - border-radius: 20rpx; - } - .tipbox5 { - position: fixed; - z-index: 999999; - width: 460rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 24rpx 0; - left: 60rpx; - .jicon { - width: 26rpx; - position: absolute; - bottom: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 26rpx 0 0 34rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } -} -.action_box { - position: fixed; - bottom: 0; - width: 100%; - height: 138rpx; - background: #ffffff; - box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21); - border-bottom: 15rpx solid #ffffff; - .line { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 2rpx; - height: 70rpx; - background: #dddddd; - } - .items { - flex: 1; - } - .start_img { - width: 36rpx; - height: 36rpx; - } - .disabled { - opacity: 0.5 !important; - } - .end_img { - width: 36rpx; - height: 36rpx; - } - .text { - font-size: 32rpx; - font-weight: bold; - color: #000000; - margin-left: 18rpx; - } - .start_test { - width: 100%; - padding: 0 30rpx; - .txt { - width: 100%; - height: 90rpx; - line-height: 90rpx; - background: #000000; - border-radius: 45rpx; - text-align: center; - font-size: 32rpx; - font-weight: bold; - color: #ffffff; - } - } -} -.infobox3 { - margin: 4rpx 0 0 0; - height: 162rpx; - position: relative; - border-radius: 20rpx; - .tipbox4 { - position: absolute; - z-index: 999999; - width: 460rpx; - bottom: -260rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 16rpx 0; - .jicon { - width: 26rpx; - position: absolute; - top: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 34rpx 0 0 24rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } - .dottedLine { - border: 4rpx dashed #e2c6a3; - height: 100%; - position: absolute; - z-index: 999999; - border-radius: 20rpx; - right: 0; - left: 0; - } - .left { - display: inline-block; - width: 134rpx; - background: #fff; - border-radius: 0 18rpx 18rpx 0; - margin: 0 22rpx 0 0; - overflow: hidden; - .img { - width: 78rpx; - height: 78rpx; - margin-top: 10rpx; - margin: 4rpx auto 0; - } - .tip { - color: #000; - font-size: 22rpx; - padding: 4rpx 0; - text-align: center; - } - .checked { - text-align: center; - } - } - .info1 { - display: inline-block; - white-space: nowrap; - background: #fff; - flex-direction: column; - height: 100%; - border-radius: 20rpx; - overflow: hidden; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - .block1 { - .block1_1 { - height: 100%; - padding: 0 20rpx; - flex-direction: column; - .tip1 { - font-size: 26rpx; - font-weight: bold; - color: #000000; - } - .tip2 { - font-size: 24rpx; - font-weight: 500; - color: #666666; - padding-top: 3rpx; - } - } - } - .block2 { - display: inline-block; - height: 100%; - width: 0; - transition: all 0.3s; - .block2_info { - width: 140rpx; - text-align: center; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - height: calc(140rpx - 10rpx); - border-radius: 20rpx; - align-items: flex-end; - padding: 0 0 10rpx 0; - display: inline-block; - position: relative; - overflow: hidden; - .block2_img { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - .block3_img { - -webkit-filter: grayscale(100%); - -moz-filter: grayscale(100%); - -ms-filter: grayscale(100%); - -o-filter: grayscale(100%); - filter: grayscale(100%); - filter: gray; - opacity: 0.5; - } - .block2_bg { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0.5; - } - .block2_info1 { - height: 100%; - position: relative; - z-index: 99; - background: transparent; - .block2_info1_tip1 { - color: #202020; - font-weight: bold; - font-size: 22rpx; - position: absolute; - bottom: 20rpx; - width: 100%; - text-align: center; - } - .block2_info1_tip2 { - color: #202020; - font-size: 16rpx; - position: absolute; - bottom: 0; - text-align: center; - width: 100%; - } - } - } - } - .icon { - width: 28rpx; - margin-top: 20rpx; - } - } - .info2 { - width: calc(100% - 130rpx - 20rpx); - background: #fff; - height: 162rpx; - border-radius: 20rpx; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - .block1 { - padding: 0 16rpx; - } - } - .border_img2 { - width: calc(100% + 8rpx); - position: absolute; - z-index: 999999; - left: -8rpx; - } - .tipbox3 { - position: absolute; - z-index: 999999; - width: 460rpx; - bottom: -290rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 16rpx 0; - margin-left: 8rpx; - .jicon { - width: 26rpx; - position: absolute; - top: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 34rpx 0 0 24rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } -} -.infobox3 .info1 .block1, -.infobox3 .info2 .block1 { - flex-direction: column; - display: inline-block; - height: 100%; - text-align: center; -} -.infobox3 .info1 .tip1, -.infobox3 .info2 .tip1 { - color: #202020; - font-size: 22rpx; - font-weight: bold; -} -.infobox3 .info1 .tip2, -.infobox3 .info2 .tip2 { - color: #202020; - font-size: 22rpx; -} -.infobox3 .info1 .quan1, -.infobox3 .info2 .quan1 { - border-radius: 50%; - width: 30rpx; - height: 30rpx; - position: relative; - margin: 18rpx auto 0; - background: #fff; - box-sizing: border-box; - border: 4rpx solid #f1f1f1; -} -.infobox3 .info1 .quan1 .quan2, -.infobox3 .info2 .quan1 .quan2 { - position: absolute; - border-radius: 50%; - background: #000000; - width: 14rpx; - height: 14rpx; -} -.tipbox { - position: absolute; - z-index: 999999; - width: 100%; - bottom: 50rpx; - .tip1 { - color: #fefeff; - font-size: 36rpx; - text-align: center; - } - .tip_btn { - background: #e2c6a3; - border-radius: 32rpx; - width: 212rpx; - height: 66rpx; - line-height: 66rpx; - text-align: center; - margin: auto; - font-size: 30rpx; - font-weight: bold; - color: #ffffff; - margin-top: 54rpx; - } -} -.infobox4 { - height: 300rpx; - border-radius: 20rpx; - box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05); - margin: 22rpx 20rpx; - background: #fff; - position: relative; - .dottedLine { - border: 4rpx dashed #e2c6a3; - height: 100%; - position: absolute; - z-index: 999999; - border-radius: 20rpx; - right: 0; - left: 0; - } - .border_img3 { - width: calc(100% + 16rpx); - position: absolute; - z-index: 999999; - top: -15rpx; - left: -8rpx; - } - .tipbox5 { - position: absolute; - z-index: 999999; - width: 460rpx; - top: -280rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 24rpx 0; - margin-left: 60rpx; - .jicon { - width: 26rpx; - position: absolute; - bottom: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 26rpx 0 0 34rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } -} -ec-canvas { - width: 100%; - height: 100%; -} -.popbox2 { - width: 670rpx; - height: 1102rpx; - background: #ffffff; - border-radius: 30rpx; - & > .title { - text-align: center; - padding: 49rpx 0 61rpx; - font-size: 36rpx; - font-weight: bold; - color: #030000; - line-height: 1; - } - & > .tipimg { - margin: 20rpx 28rpx 0; - } - & > .tipvideo { - margin: 0 auto; - width: 600rpx; - height: 600rpx; - } - & > .tiptext { - margin: 65rpx 0 63rpx; - padding: 0 48rpx 0 36rpx; - font-size: 28rpx; - font-weight: 500; - color: #000000; - min-height: 76rpx; - } - & > .popbox2btn { - & > .nextbtn { - text-align: center; - color: #fff; - width: 270rpx; - height: 90rpx; - line-height: 90rpx; - background: #000000; - border-radius: 45rpx; - font-size: 32rpx; - font-weight: bold; - margin: 0 auto; - box-sizing: border-box; - } - & > .prebtn { - text-align: center; - width: 270rpx; - height: 90rpx; - line-height: 90rpx; - border-radius: 45rpx; - font-weight: bold; - font-size: 32rpx; - color: #000000; - border: 2rpx solid #000000; - background: #ffffff; - margin: 0 auto; - box-sizing: border-box; - } - } - & > .icon { - position: absolute; - top: 0; - right: 0; - width: 90rpx; - height: 90rpx; - display: flex; - justify-content: center; - align-items: center; - & > image { - width: 24rpx; - height: 24rpx; - } - } -} -.popbox2btn { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 25rpx; -} -.quantityTipShow { - position: absolute; - top: -50rpx; - right: 0; - background: rgba(0, 0, 0, 0.3); - font-size: 22rpx; - color: #fff; - border-radius: 30rpx; - padding: 8rpx 0rpx; - width: 260rpx; - .sanjiao { - position: absolute; - left: 50%; - margin-left: -15rpx; - width: 30rpx; - height: 30rpx; - transform: rotate(45deg); - bottom: -15rpx; - background: rgba(0, 0, 0, 0.3); - } -} -.async_box { - padding: 0 50rpx; - .title { - font-weight: bold; - text-align: center; - font-size: 32rpx; - padding: 30rpx 0; - } - .jindubox { - background: #dddddd; - height: 30rpx; - border-radius: 30rpx; - overflow: hidden; - position: relative; - .jindu { - width: 80%; - background: #dfc3a2; - height: 100%; - border-radius: 30rpx; - } - .baifenbi { - position: absolute; - font-size: 22rpx; - right: 20rpx; - color: #999; - top: 0; - } - } - .tip1 { - font-size: 26rpx; - padding: 30rpx 0 40rpx; - } -} -.infobox5 { - margin: 24rpx 20rpx 0; - border-radius: 18rpx; - background: #fff; - height: 260rpx; - padding: 20rpx; - position: relative; - .icon { - position: absolute; - width: 24rpx; - height: 24rpx; - right: 26rpx; - top: 32rpx; - } - .title { - color: #ccc; - font-size: 18rpx; - height: 42rpx; - line-height: 42rpx; - } - .info1 { - font-size: 14rpx; - color: #ccc; - display: flex; - margin-top: 10rpx; - .left { - border-right: 1px solid #e3e3e3; - padding: 0 8rpx; - width: 16rpx; - height: 180rpx; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - .numblock { - padding: 0rpx 0; - } - } - .right { - width: calc(100% - 20rpx - 100rpx); - height: 180rpx; - border-bottom: 1px solid #e3e3e3; - padding: 0 10rpx 4rpx 20rpx; - position: relative; - .block { - flex-direction: column; - justify-content: flex-end; - position: relative; - .num { - position: absolute; - bottom: -30rpx; - } - .block_b0 { - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b1 { - background: #ffcf55; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b2 { - background: #febb22; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b3 { - background: #ffad28; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b4 { - background: #ff8510; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b5 { - background: #f85803; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b6 { - background: #e02e13; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b7 { - background: #b40016; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - .block_b8 { - background: #750010; - border-radius: 10rpx; - width: 38rpx; - height: 18rpx; - margin: 4rpx 0 0; - } - } - .timetip { - position: absolute; - right: -40rpx; - bottom: -25rpx; - } - } - } - .tipbox5 { - position: absolute; - z-index: 999999; - width: 460rpx; - top: -280rpx; - background: linear-gradient(#e2c6a3, #c7a274); - border-radius: 20rpx; - padding: 0 0 24rpx 0; - margin-left: 60rpx; - .jicon { - width: 26rpx; - position: absolute; - bottom: -20rpx; - left: 54rpx; - } - .tip1 { - color: #fefeff; - font-size: 36rpx; - padding: 26rpx 0 0 34rpx; - } - .tip_btn { - background: #ffffff; - border-radius: 26rpx; - width: 154rpx; - height: 52rpx; - line-height: 52rpx; - text-align: center; - font-size: 30rpx; - font-weight: bold; - color: #c69962; - margin-top: 14rpx; - position: relative; - left: calc(460rpx - 22rpx - 154rpx); - } - } -} -.water_test { - margin: 0 auto; - box-sizing: border-box; - padding: 42rpx 48rpx; - width: 690rpx; - height: 292rpx; - background: #ffffff; - border-radius: 30rpx; - .test_step { - .step_block { - flex-direction: column; - } - .step_top { - position: relative; - .line { - position: absolute; - top: 50%; - right: -117rpx; - width: 97rpx; - height: 0; - border-top: 2rpx dashed #f1f1f1; - } - .drop { - width: 10rpx; - height: 10rpx; - background: #999999; - border-radius: 50%; - } - .step_num { - font-size: 24rpx; - font-weight: 500; - color: #666666; - margin-left: 14rpx; - } - } - .step_name { - font-size: 26rpx; - font-weight: bold; - color: #000000; - margin-left: 14rpx; - padding-top: 12rpx; - letter-spacing: 2rpx; - } - } - .test_txt { - font-size: 24rpx; - font-weight: 500; - color: #999999; - padding-top: 48rpx; - line-height: 36rpx; - letter-spacing: 2rpx; - } -} -.testing { - .testing_header { - .items { - flex: 1; - border-radius: 30rpx 30rpx 0rpx 0rpx; - padding: 25rpx 0 21rpx; - justify-content: space-evenly; - .finish_img { - width: 24rpx; - height: 24rpx; - border-radius: 50%; - } - .value { - font-size: 24rpx; - font-weight: 500; - color: #666666; - line-height: 1; - } - .name { - font-size: 26rpx; - font-weight: bold; - color: #000000; - line-height: 1; - } - } - } - .testing_content { - width: 100%; - height: 228rpx; - background: #ffffff; - border-radius: 0rpx 0rpx 30rpx 30rpx; - padding: 51rpx 30rpx 0 36rpx; - box-sizing: border-box; - .progress_box { - width: 100%; - height: 36rpx; - line-height: 36rpx; - .title { - font-size: 28rpx; - font-weight: bold; - color: #000000; - min-width: 200rpx; - margin-right: 60rpx; - letter-spacing: 2rpx; - } - } - .tips { - font-size: 24rpx; - font-weight: 500; - color: #999999; - margin-top: 45rpx; - line-height: 36rpx; - letter-spacing: 2rpx; - } - .progress_block { - flex: 1; - } - .finish_img { - width: 36rpx; - height: 36rpx; - margin-left: 49rpx; - } - } -} -.isquanpingclass { - position: fixed; - width: calc(100% - 100rpx); - padding: 20rpx 50rpx; - margin: 0; - z-index: 999; - top: 0; - left: 0; - right: 0; - height: 100vh; -} -.canvas { - position: fixed; - top: -9999999px; -} -.popbox1 { - width: 600rpx; - height: 360rpx; - border-radius: 28rpx; - flex-direction: column; - .tip1 { - font-size: 40rpx; - color: #000000; - text-align: center; - font-weight: 400; - margin-top: 28rpx; - } - .tip2 { - font-size: 32rpx; - color: #000000; - text-align: center; - font-weight: 400; - margin-top: 36rpx; - height: 110rpx; - } - .btnbox { - .btn1 { - font-size: 30rpx; - color: #000000; - text-align: center; - font-weight: 400; - width: 240rpx; - height: 100rpx; - line-height: 100rpx; - border: 2rpx solid rgba(0, 0, 0, 0.3); - border-radius: 28rpx; - } - .btn2 { - font-size: 30rpx; - color: #000000; - text-align: center; - font-weight: 400; - width: 240rpx; - height: 100rpx; - line-height: 100rpx; - margin-left: 40rpx; - background: #e2c5a3; - border-radius: 28rpx; - } - } -} -.van-tabs__scroll--line { - background: transparent !important; -} -image { - width: 100%; - height: 100%; - display: flex; -} -/* .color{ - color: #F1AB15; - } */ -.ellipsis2 { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} -.nodata { - color: #666666; - text-align: center; - margin-top: 50rpx; - font-size: 28rpx; -} -.MT30 { - margin-top: 30rpx; -} -.submitbtn { - position: absolute; - bottom: 100rpx; - width: 400rpx; - left: 50%; - margin-left: -200rpx; - .btn { - position: absolute; - top: 20rpx; - color: #fff; - font-weight: bold; - font-size: 32rpx; - text-align: center; - width: 100%; - bottom: 0; - } -} -.avatar-wrapper { - position: absolute; - bottom: 0; - width: 100%; - height: 100%; - left: 0; - right: 0; - top: 0; - z-index: 99; - opacity: 0; -} -.permeate_model_box { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - padding: 52rpx 30rpx 38rpx 30rpx; - box-sizing: border-box; - .my_moisture_box { - width: 600rpx; - height: 600rpx; - margin: 0 auto; - } - .permeate_title { - font-size: 36rpx; - font-weight: bold; - color: #030000; - line-height: 1; - padding-bottom: 54rpx; - box-sizing: border-box; - } - .permeate_tips { - font-size: 28rpx; - font-weight: 500; - color: #030000; - line-height: 60rpx; - padding: 37rpx 0; - box-sizing: border-box; - .txt { - font-size: 26rpx; - font-weight: 500; - color: #666666; - margin-left: 12rpx; - } - } - .permeate_btn { - height: 90rpx; - line-height: 90rpx; - background: #000000; - border-radius: 45rpx; - font-size: 32rpx; - font-weight: bold; - color: #ffffff; - padding: 0 72rpx; - } - .close_box { - position: absolute; - top: 34rpx; - right: 29rpx; - padding: 50rpx; - } - .close_img { - position: absolute; - top: 0; - right: 0; - width: 24rpx; - height: 24rpx; - } -} -.gear_adjust { - padding: 2rpx 10rpx 40rpx 18rpx; - .title { - font-size: 28rpx; - font-weight: bold; - color: #000000; - } - .gear_box { - margin-top: 14rpx; - .slider_class { - height: 12rpx; - box-sizing: border-box; - flex: 1; - border-radius: 6rpx; - } - .gear { - padding: 20rpx 0; - } - .pos { - font-size: 26rpx; - font-weight: 500; - color: #666666; - min-width: 76rpx; - margin-right: 32rpx; - } - } -} - -.gear_adjustment { - box-sizing: border-box; - width: 690rpx; - height: 300rpx; - background: #ffffff; - border-radius: 30rpx; - padding: 30rpx; - margin: 30rpx auto 200rpx; - .gear_box { - .gear { - margin-bottom: 30rpx; - .pos { - font-size: 26rpx; - font-weight: 500; - color: #666666; - min-width: 76rpx; - margin-right: 32rpx; - } - .gear_button { - width: 500rpx; - height: 60rpx; - background: #f8f8f8; - border-radius: 30rpx; - justify-content: space-between; - font-size: 20rpx; - - .button_minus { - width: 90rpx; - height: 60rpx; - background: #e5e5e5; - border-radius: 30rpx 0rpx 0rpx 30rpx; - display: flex; - justify-content: center; - align-items: center; - .image { - width: 28rpx; - height: 28rpx; - } - } - - .button_plus { - width: 90rpx; - height: 60rpx; - background: #e5e5e5; - border-radius: 0rpx 30rpx 30rpx 0rpx; - display: flex; - justify-content: center; - align-items: center; - .image { - width: 28rpx; - height: 28rpx; - } - } - - .button_value { - display: flex; - justify-content: center; - align-items: center; - font-size: 24rpx; - width: 320rpx; - height: 60rpx; - line-height: 60rpx; - color: #666; - .number { - font-family: PingFang SC; - font-weight: 800; - font-size: 30rpx; - color: #000000; - margin-right: 4rpx; - } - } - } - } - } -} - -.level_box { - padding-left: 109rpx; - .level_num { - font-size: 16rpx; - font-weight: 500; - color: #cccccc; - } -} -.custom-button { - position: relative; - width: 32rpx; - height: 32rpx; - background: linear-gradient(90deg, #ffe9c7, #eecda1); - border: 4rpx solid #ffffff; - border-radius: 50%; - box-sizing: border-box; - .circle { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 12rpx; - height: 12rpx; - background: #ffffff; - border-radius: 50%; - } - .level { - position: absolute; - top: -30rpx; - left: 0; - width: 44rpx; - font-size: 20rpx; - font-weight: 500; - color: #bf8e49; - height: 28rpx; - } -} -.current-button { - background: #cccc; - .level { - color: #cccc; - } -} -.success_popup { - width: calc(100% - 110rpx); - box-sizing: border-box; - .popup_content { - width: 100%; - padding: 52rpx 0 60rpx; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: center; - color: #030000; - .title { - font-size: 36rpx; - font-weight: bold; - } - .success_icon { - width: 120rpx; - height: 120rpx; - margin: 52rpx 0; - } - .tips { - font-size: 30rpx; - } - } - & > .infobox1 { - padding: 0rpx 0 35rpx; - .tip { - font-size: 36rpx; - font-weight: bold; - color: #030000; - text-align: center; - } - .tip1 { - text-align: center; - margin-top: 71rpx; - font-size: 30rpx; - color: #030000; - } - .tip2 { - color: #202020; - font-size: 40rpx; - text-align: center; - } - .btnbox { - margin-top: 71rpx; - padding: 0 3rpx 10rpx 15rpx; - display: flex; - align-items: center; - justify-content: space-between; - .btn1 { - background: #fff; - width: 212rpx; - height: 66rpx; - line-height: 66rpx; - text-align: center; - font-size: 30rpx; - color: #e2c6a3; - border-radius: 32rpx; - border: 2rpx solid #e2c6a3; - font-style: normal; - width: 270rpx; - height: 90rpx; - line-height: 90rpx; - background: #ffffff; - text-align: center; - border: 2rpx solid #000000; - border-radius: 45rpx; - font-size: 32rpx; - font-weight: bold; - color: #000000; - } - .btn2 { - width: 270rpx; - height: 90rpx; - line-height: 90rpx; - text-align: center; - background: #000000; - border-radius: 45rpx; - font-size: 32rpx; - font-weight: bold; - color: #ffffff; - font-style: normal; - width: 270rpx; - height: 90rpx; - line-height: 90rpx; - background: #000000; - text-align: center; - border-radius: 45rpx; - font-size: 32rpx; - font-weight: bold; - color: #ffffff; - } - } - } -} -.flex { - display: flex; -} -.aitems { - align-items: center; -} -.jcenter { - justify-content: center; -} -.sb { - justify-content: space-between; -} -.sa { - justify-content: space-around; -} -.wrap { - flex-wrap: wrap; -} diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx index 273c20d..414a36f 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx @@ -287,7 +287,7 @@ function Index() { return ( - + - - - 实时能量 + + + 实时能量 {level.map((item) => ( - - {item} - 8 + + {item} + 8 ))} - - 1 + + 1 - 时间 + 时间 - - - - - - {stepList.map((item, index) => { - return ( - - - - {item.value} - {index != 2 && } - - {item.name} - - ); - })} - - - 通过小紫弹的水分测试功能，对脸部的额头、左脸颊、右脸颊三个区域进行水分检测，并定制适合您的促渗档位方案 - - - - - - {stepList.map((item, index) => { - return ( - - {stepIndex > index && ( - - )} - {item.value} - {item.name} - - ); - })} - - - - - {stepList[stepIndex].name + "水分测试"} - - {/* */} - - {stepList[stepIndex].finish && 80 >= 99 ? ( - - ) : ( - - )} - {/* */} - - {/* */} - {/* 请参考视频指引，将仪器紧贴额头区域 */} - {/* */} - - - 请参考视频指引，将仪器紧贴 - {(testIndex == 1 || testIndex == 2 || testIndex == 4) && ( - - {stepList[stepIndex].name + "区域"} - - )} - {testIndex == 1 && ( - ，并点击下方启动检测按钮进行测试 - )} - - - - - - - - - 档位调节 - - - 额头 - - - - - {gearLevel.forehead + "档"} - - - - } - > - - - 左脸颊 - - - - - {gearLevel.leftCheek + "档"} - - - - } - > - - - 右脸颊 - - - - - {gearLevel.rightCheek + "档"} - - - - } - > - - {/* - {(10).map((item, index) => { - return ( - - {item + 1} - - ) - })} - */} - - - - - - - - 额头 - - - - - - 1档 - - - - - - - - 左脸颊 - - - - - - 1档 - - - - - - - - 右脸颊 - - - - - - 1档 - - - - - - - - - ); } diff --git a/src/moduleIOT/pages/iotCarePlan/components/Gears/index.less b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.less new file mode 100644 index 0000000..a25487c --- /dev/null +++ b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.less @@ -0,0 +1,266 @@ + +page { + background: #f8f8f8; + background: #f3f3f3; +} + +.gear_adjust { + padding: 2rpx 10rpx 40rpx 18rpx; + .title { + font-size: 28rpx; + font-weight: bold; + color: #000000; + } + .gear_box { + margin-top: 14rpx; + .slider_class { + height: 12rpx; + box-sizing: border-box; + flex: 1; + border-radius: 6rpx; + } + .gear { + padding: 20rpx 0; + } + .pos { + font-size: 26rpx; + font-weight: 500; + color: #666666; + min-width: 76rpx; + margin-right: 32rpx; + } + } +} + +.gear_adjustment { + box-sizing: border-box; + width: 690rpx; + height: 300rpx; + background: #ffffff; + border-radius: 30rpx; + padding: 30rpx; + margin: 30rpx auto 200rpx; + .gear_box { + .gear { + margin-bottom: 30rpx; + .pos { + font-size: 26rpx; + font-weight: 500; + color: #666666; + min-width: 76rpx; + margin-right: 32rpx; + } + .gear_button { + width: 500rpx; + height: 60rpx; + background: #f8f8f8; + border-radius: 30rpx; + justify-content: space-between; + font-size: 20rpx; + + .button_minus { + width: 90rpx; + height: 60rpx; + background: #e5e5e5; + border-radius: 30rpx 0rpx 0rpx 30rpx; + display: flex; + justify-content: center; + align-items: center; + .image { + width: 28rpx; + height: 28rpx; + } + } + + .button_plus { + width: 90rpx; + height: 60rpx; + background: #e5e5e5; + border-radius: 0rpx 30rpx 30rpx 0rpx; + display: flex; + justify-content: center; + align-items: center; + .image { + width: 28rpx; + height: 28rpx; + } + } + + .button_value { + display: flex; + justify-content: center; + align-items: center; + font-size: 24rpx; + width: 320rpx; + height: 60rpx; + line-height: 60rpx; + color: #666; + .number { + font-family: PingFang SC; + font-weight: 800; + font-size: 30rpx; + color: #000000; + margin-right: 4rpx; + } + } + } + } + } +} + +.level_box { + padding-left: 109rpx; + .level_num { + font-size: 16rpx; + font-weight: 500; + color: #cccccc; + } +} +.custom-button { + position: relative; + width: 32rpx; + height: 32rpx; + background: linear-gradient(90deg, #ffe9c7, #eecda1); + border: 4rpx solid #ffffff; + border-radius: 50%; + box-sizing: border-box; + .circle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 12rpx; + height: 12rpx; + background: #ffffff; + border-radius: 50%; + } + .level { + position: absolute; + top: -30rpx; + left: 0; + width: 44rpx; + font-size: 20rpx; + font-weight: 500; + color: #bf8e49; + height: 28rpx; + } +} +.current-button { + background: #cccc; + .level { + color: #cccc; + } +} +.success_popup { + width: calc(100% - 110rpx); + box-sizing: border-box; + .popup_content { + width: 100%; + padding: 52rpx 0 60rpx; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + color: #030000; + .title { + font-size: 36rpx; + font-weight: bold; + } + .success_icon { + width: 120rpx; + height: 120rpx; + margin: 52rpx 0; + } + .tips { + font-size: 30rpx; + } + } + & > .infobox1 { + padding: 0rpx 0 35rpx; + .tip { + font-size: 36rpx; + font-weight: bold; + color: #030000; + text-align: center; + } + .tip1 { + text-align: center; + margin-top: 71rpx; + font-size: 30rpx; + color: #030000; + } + .tip2 { + color: #202020; + font-size: 40rpx; + text-align: center; + } + .btnbox { + margin-top: 71rpx; + padding: 0 3rpx 10rpx 15rpx; + display: flex; + align-items: center; + justify-content: space-between; + .btn1 { + background: #fff; + width: 212rpx; + height: 66rpx; + line-height: 66rpx; + text-align: center; + font-size: 30rpx; + color: #e2c6a3; + border-radius: 32rpx; + border: 2rpx solid #e2c6a3; + font-style: normal; + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + background: #ffffff; + text-align: center; + border: 2rpx solid #000000; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #000000; + } + .btn2 { + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + text-align: center; + background: #000000; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #ffffff; + font-style: normal; + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + background: #000000; + text-align: center; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #ffffff; + } + } + } +} +.flex { + display: flex; +} +.aitems { + align-items: center; +} +.jcenter { + justify-content: center; +} +.sb { + justify-content: space-between; +} +.sa { + justify-content: space-around; +} +.wrap { + flex-wrap: wrap; +} diff --git a/src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx new file mode 100644 index 0000000..cfcc78b --- /dev/null +++ b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx @@ -0,0 +1,235 @@ +import Taro from "@tarojs/taro"; +import classnames from "classnames"; +import { Block, View, Image, Text, Input } from "@tarojs/components"; +import { Popup, Progress, Slider } from "@antmjs/vantui"; + +import "./index.less"; + +interface Props { + Electricity: any; + matrixElectricity: any; + facialMaskConnectStatus: any; +} + +function Index() { + const gearLevel = { + currentGear: null, + //现在工作的档位 + currentGearMode: "forehead", + //现在工作模式 + forehead: 5, + leftCheek: 5, + rightCheek: 5, + }; + + + return ( + + + + 档位调节 + + + 额头 + + + + + {gearLevel.forehead + "档"} + + + + } + > + + + 左脸颊 + + + + + {gearLevel.leftCheek + "档"} + + + + } + > + + + 右脸颊 + + + + + {gearLevel.rightCheek + "档"} + + + + } + > + + {/* + {(10).map((item, index) => { + return ( + + {item + 1} + + ) + })} + */} + + + + + + + + 额头 + + + + + + 1档 + + + + + + + + 左脸颊 + + + + + + 1档 + + + + + + + + 右脸颊 + + + + + + 1档 + + + + + + + + + + ); +} + +export default Index; diff --git a/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less new file mode 100644 index 0000000..ca80bb4 --- /dev/null +++ b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less @@ -0,0 +1,557 @@ +page { + background: #f8f8f8; + background: #f3f3f3; +} + +.water_test { + margin: 0 auto; + box-sizing: border-box; + padding: 42rpx 48rpx; + width: 690rpx; + height: 292rpx; + background: #ffffff; + border-radius: 30rpx; + .test_step { + .step_block { + flex-direction: column; + } + .step_top { + position: relative; + .line { + position: absolute; + top: 50%; + right: -117rpx; + width: 97rpx; + height: 0; + border-top: 2rpx dashed #f1f1f1; + } + .drop { + width: 10rpx; + height: 10rpx; + background: #999999; + border-radius: 50%; + } + .step_num { + font-size: 24rpx; + font-weight: 500; + color: #666666; + margin-left: 14rpx; + } + } + .step_name { + font-size: 26rpx; + font-weight: bold; + color: #000000; + margin-left: 14rpx; + padding-top: 12rpx; + letter-spacing: 2rpx; + } + } + .test_txt { + font-size: 24rpx; + font-weight: 500; + color: #999999; + padding-top: 48rpx; + line-height: 36rpx; + letter-spacing: 2rpx; + } +} +.testing { + .testing_header { + .items { + flex: 1; + border-radius: 30rpx 30rpx 0rpx 0rpx; + padding: 25rpx 0 21rpx; + justify-content: space-evenly; + .finish_img { + width: 24rpx; + height: 24rpx; + border-radius: 50%; + } + .value { + font-size: 24rpx; + font-weight: 500; + color: #666666; + line-height: 1; + } + .name { + font-size: 26rpx; + font-weight: bold; + color: #000000; + line-height: 1; + } + } + } + .testing_content { + width: 100%; + height: 228rpx; + background: #ffffff; + border-radius: 0rpx 0rpx 30rpx 30rpx; + padding: 51rpx 30rpx 0 36rpx; + box-sizing: border-box; + .progress_box { + width: 100%; + height: 36rpx; + line-height: 36rpx; + .title { + font-size: 28rpx; + font-weight: bold; + color: #000000; + min-width: 200rpx; + margin-right: 60rpx; + letter-spacing: 2rpx; + } + } + .tips { + font-size: 24rpx; + font-weight: 500; + color: #999999; + margin-top: 45rpx; + line-height: 36rpx; + letter-spacing: 2rpx; + } + .progress_block { + flex: 1; + } + .finish_img { + width: 36rpx; + height: 36rpx; + margin-left: 49rpx; + } + } +} +.isquanpingclass { + position: fixed; + width: calc(100% - 100rpx); + padding: 20rpx 50rpx; + margin: 0; + z-index: 999; + top: 0; + left: 0; + right: 0; + height: 100vh; +} +.canvas { + position: fixed; + top: -9999999px; +} +.popbox1 { + width: 600rpx; + height: 360rpx; + border-radius: 28rpx; + flex-direction: column; + .tip1 { + font-size: 40rpx; + color: #000000; + text-align: center; + font-weight: 400; + margin-top: 28rpx; + } + .tip2 { + font-size: 32rpx; + color: #000000; + text-align: center; + font-weight: 400; + margin-top: 36rpx; + height: 110rpx; + } + .btnbox { + .btn1 { + font-size: 30rpx; + color: #000000; + text-align: center; + font-weight: 400; + width: 240rpx; + height: 100rpx; + line-height: 100rpx; + border: 2rpx solid rgba(0, 0, 0, 0.3); + border-radius: 28rpx; + } + .btn2 { + font-size: 30rpx; + color: #000000; + text-align: center; + font-weight: 400; + width: 240rpx; + height: 100rpx; + line-height: 100rpx; + margin-left: 40rpx; + background: #e2c5a3; + border-radius: 28rpx; + } + } +} +.van-tabs__scroll--line { + background: transparent !important; +} +image { + width: 100%; + height: 100%; + display: flex; +} +/* .color{ + color: #F1AB15; + } */ +.ellipsis2 { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.nodata { + color: #666666; + text-align: center; + margin-top: 50rpx; + font-size: 28rpx; +} +.MT30 { + margin-top: 30rpx; +} +.submitbtn { + position: absolute; + bottom: 100rpx; + width: 400rpx; + left: 50%; + margin-left: -200rpx; + .btn { + position: absolute; + top: 20rpx; + color: #fff; + font-weight: bold; + font-size: 32rpx; + text-align: center; + width: 100%; + bottom: 0; + } +} +.avatar-wrapper { + position: absolute; + bottom: 0; + width: 100%; + height: 100%; + left: 0; + right: 0; + top: 0; + z-index: 99; + opacity: 0; +} +.permeate_model_box { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + padding: 52rpx 30rpx 38rpx 30rpx; + box-sizing: border-box; + .my_moisture_box { + width: 600rpx; + height: 600rpx; + margin: 0 auto; + } + .permeate_title { + font-size: 36rpx; + font-weight: bold; + color: #030000; + line-height: 1; + padding-bottom: 54rpx; + box-sizing: border-box; + } + .permeate_tips { + font-size: 28rpx; + font-weight: 500; + color: #030000; + line-height: 60rpx; + padding: 37rpx 0; + box-sizing: border-box; + .txt { + font-size: 26rpx; + font-weight: 500; + color: #666666; + margin-left: 12rpx; + } + } + .permeate_btn { + height: 90rpx; + line-height: 90rpx; + background: #000000; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #ffffff; + padding: 0 72rpx; + } + .close_box { + position: absolute; + top: 34rpx; + right: 29rpx; + padding: 50rpx; + } + .close_img { + position: absolute; + top: 0; + right: 0; + width: 24rpx; + height: 24rpx; + } +} +.gear_adjust { + padding: 2rpx 10rpx 40rpx 18rpx; + .title { + font-size: 28rpx; + font-weight: bold; + color: #000000; + } + .gear_box { + margin-top: 14rpx; + .slider_class { + height: 12rpx; + box-sizing: border-box; + flex: 1; + border-radius: 6rpx; + } + .gear { + padding: 20rpx 0; + } + .pos { + font-size: 26rpx; + font-weight: 500; + color: #666666; + min-width: 76rpx; + margin-right: 32rpx; + } + } +} + +.gear_adjustment { + box-sizing: border-box; + width: 690rpx; + height: 300rpx; + background: #ffffff; + border-radius: 30rpx; + padding: 30rpx; + margin: 30rpx auto 200rpx; + .gear_box { + .gear { + margin-bottom: 30rpx; + .pos { + font-size: 26rpx; + font-weight: 500; + color: #666666; + min-width: 76rpx; + margin-right: 32rpx; + } + .gear_button { + width: 500rpx; + height: 60rpx; + background: #f8f8f8; + border-radius: 30rpx; + justify-content: space-between; + font-size: 20rpx; + + .button_minus { + width: 90rpx; + height: 60rpx; + background: #e5e5e5; + border-radius: 30rpx 0rpx 0rpx 30rpx; + display: flex; + justify-content: center; + align-items: center; + .image { + width: 28rpx; + height: 28rpx; + } + } + + .button_plus { + width: 90rpx; + height: 60rpx; + background: #e5e5e5; + border-radius: 0rpx 30rpx 30rpx 0rpx; + display: flex; + justify-content: center; + align-items: center; + .image { + width: 28rpx; + height: 28rpx; + } + } + + .button_value { + display: flex; + justify-content: center; + align-items: center; + font-size: 24rpx; + width: 320rpx; + height: 60rpx; + line-height: 60rpx; + color: #666; + .number { + font-family: PingFang SC; + font-weight: 800; + font-size: 30rpx; + color: #000000; + margin-right: 4rpx; + } + } + } + } + } +} + +.level_box { + padding-left: 109rpx; + .level_num { + font-size: 16rpx; + font-weight: 500; + color: #cccccc; + } +} +.custom-button { + position: relative; + width: 32rpx; + height: 32rpx; + background: linear-gradient(90deg, #ffe9c7, #eecda1); + border: 4rpx solid #ffffff; + border-radius: 50%; + box-sizing: border-box; + .circle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 12rpx; + height: 12rpx; + background: #ffffff; + border-radius: 50%; + } + .level { + position: absolute; + top: -30rpx; + left: 0; + width: 44rpx; + font-size: 20rpx; + font-weight: 500; + color: #bf8e49; + height: 28rpx; + } +} +.current-button { + background: #cccc; + .level { + color: #cccc; + } +} +.success_popup { + width: calc(100% - 110rpx); + box-sizing: border-box; + .popup_content { + width: 100%; + padding: 52rpx 0 60rpx; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + color: #030000; + .title { + font-size: 36rpx; + font-weight: bold; + } + .success_icon { + width: 120rpx; + height: 120rpx; + margin: 52rpx 0; + } + .tips { + font-size: 30rpx; + } + } + & > .infobox1 { + padding: 0rpx 0 35rpx; + .tip { + font-size: 36rpx; + font-weight: bold; + color: #030000; + text-align: center; + } + .tip1 { + text-align: center; + margin-top: 71rpx; + font-size: 30rpx; + color: #030000; + } + .tip2 { + color: #202020; + font-size: 40rpx; + text-align: center; + } + .btnbox { + margin-top: 71rpx; + padding: 0 3rpx 10rpx 15rpx; + display: flex; + align-items: center; + justify-content: space-between; + .btn1 { + background: #fff; + width: 212rpx; + height: 66rpx; + line-height: 66rpx; + text-align: center; + font-size: 30rpx; + color: #e2c6a3; + border-radius: 32rpx; + border: 2rpx solid #e2c6a3; + font-style: normal; + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + background: #ffffff; + text-align: center; + border: 2rpx solid #000000; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #000000; + } + .btn2 { + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + text-align: center; + background: #000000; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #ffffff; + font-style: normal; + width: 270rpx; + height: 90rpx; + line-height: 90rpx; + background: #000000; + text-align: center; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + color: #ffffff; + } + } + } +} +.flex { + display: flex; +} +.aitems { + align-items: center; +} +.jcenter { + justify-content: center; +} +.sb { + justify-content: space-between; +} +.sa { + justify-content: space-around; +} +.wrap { + flex-wrap: wrap; +} diff --git a/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx new file mode 100644 index 0000000..1446a2f --- /dev/null +++ b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx @@ -0,0 +1,139 @@ +import Taro from "@tarojs/taro"; +import classnames from "classnames"; +import { Block, View, Image, Text, Input } from "@tarojs/components"; +import { Popup, Progress, Slider } from "@antmjs/vantui"; + +import "./index.less"; + +interface Props { + Electricity: any; + matrixElectricity: any; + facialMaskConnectStatus: any; +} + +function Index() { + const stepIndex = 0; + const testIndex = 1; + + const stepList = [ + { + value: "Step1", + name: "额头", + finish: false, + }, + { + value: "Step2", + name: "左脸颊", + finish: false, + }, + { + value: "Step3", + name: "右脸颊", + finish: false, + }, + ]; + return ( + + + + + {stepList.map((item, index) => { + return ( + + + + {item.value} + {index != 2 && } + + {item.name} + + ); + })} + + + 通过小紫弹的水分测试功能，对脸部的额头、左脸颊、右脸颊三个区域进行水分检测，并定制适合您的促渗档位方案 + + + + + + {stepList.map((item, index) => { + return ( + + {stepIndex > index && ( + + )} + {item.value} + {item.name} + + ); + })} + + + + + {stepList[stepIndex].name + "水分测试"} + + {/* */} + + {stepList[stepIndex].finish && 80 >= 99 ? ( + + ) : ( + + )} + {/* */} + + {/* */} + {/* 请参考视频指引，将仪器紧贴额头区域 */} + {/* */} + + + 请参考视频指引，将仪器紧贴 + {(testIndex == 1 || testIndex == 2 || testIndex == 4) && ( + + {stepList[stepIndex].name + "区域"} + + )} + {testIndex == 1 && ( + ，并点击下方启动检测按钮进行测试 + )} + + + + + + + + + ); +} + +export default Index; From 99e964313ebc00ac70f24349bfe90adb754aa84d Mon Sep 17 00:00:00 2001 From: rongweikang <1174906669@qq.com> Date: Fri, 15 Mar 2024 17:23:47 +0800 Subject: [PATCH 3/6] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B0=B4=E5=88=86?= =?UTF-8?q?=E6=B5=8B=E8=AF=95=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 76 +++++++++---------- .../moisture_test_report.tsx | 74 ++++++++++++++++-- 2 files changed, 104 insertions(+), 46 deletions(-) diff --git a/src/app.config.ts b/src/app.config.ts index cd85c63..e1f9347 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -1,42 +1,43 @@ export default defineAppConfig({ __usePrivacyCheck__: true, pages: [ - 'pages/index/index', - 'pages/login/login', - 'pages/initiate/initiate', - 'pages/entry/entry', - 'pages/activity/activity', + "pages/index/index", + "pages/login/login", + "pages/initiate/initiate", + "pages/entry/entry", + "pages/activity/activity", "pages/detect/detect", "pages/shop/shop", "pages/user/user", "pages/userInfo/userInfo", - 'pages/userInfoDetail/userInfoDetail', + "pages/userInfoDetail/userInfoDetail", "pages/register/register", - 'pages/instrument/instrument', + "pages/instrument/instrument", "pages/instrument/intro", "pages/instrument_manage/index", "pages/instrument_detail/index", "pages/instrumentClickinUpload/index", - 'pages/privacyPolicy/privacyPolicy', - 'pages/userPolicy/userPolicy', - 'pages/about/about', - 'pages/message/message', - 'pages/consultant/consultant', - 'pages/integral_list/integral_list', + "pages/privacyPolicy/privacyPolicy", + "pages/userPolicy/userPolicy", + "pages/about/about", + "pages/message/message", + "pages/consultant/consultant", + "pages/integral_list/integral_list", "pages/recording/recording", "pages/webViewPage/webViewPage", - 'pages/template/template', - 'pages/face_report/face_report', + "pages/template/template", + "pages/face_report/face_report", "pages/connection_help/connection_help", "pages/errorpage/errorpage", + "pages/moisture_test_report/moisture_test_report", ], - "tabBar": { - "custom": true, - "color": "#707070", - "selectedColor": "#CAB18C", - "backgroundColor": "#ffffff", - "borderStyle": "black", - "list": [ + tabBar: { + custom: true, + color: "#707070", + selectedColor: "#CAB18C", + backgroundColor: "#ffffff", + borderStyle: "black", + list: [ { pagePath: "pages/index/index", text: "主页", @@ -67,28 +68,23 @@ export default defineAppConfig({ iconPath: "img/tabar/5.png", selectedIconPath: "img/tabar/55.png", }, - ] + ], }, - usingComponents: { - - }, - lazyCodeLoading: 'requiredComponents', + usingComponents: {}, + lazyCodeLoading: "requiredComponents", window: { - backgroundTextStyle: 'light', - navigationStyle: 'custom', - navigationBarBackgroundColor: '#fff', - navigationBarTitleText: 'WeChat', - navigationBarTextStyle: 'black', + backgroundTextStyle: "light", + navigationStyle: "custom", + navigationBarBackgroundColor: "#fff", + navigationBarTitleText: "WeChat", + navigationBarTextStyle: "black", // enablePullDownRefresh: true }, requiredPrivateInfos: ["getLocation"], subPackages: [ { - root: 'moduleIOT', - pages: [ - "pages/iotCarePlan/WL200", - "pages/iotCarePlan/FR200", - ] - } - ] -}) + root: "moduleIOT", + pages: ["pages/iotCarePlan/WL200", "pages/iotCarePlan/FR200"], + }, + ], +}); diff --git a/src/pages/moisture_test_report/moisture_test_report.tsx b/src/pages/moisture_test_report/moisture_test_report.tsx index a71d9e1..67baec6 100644 --- a/src/pages/moisture_test_report/moisture_test_report.tsx +++ b/src/pages/moisture_test_report/moisture_test_report.tsx @@ -12,7 +12,7 @@ import { setMobile } from "../../store/features/userInfo"; import { WCUserLogin } from "../../utils/Interface"; -import "./login.less"; +import "./moisture_test_report.less"; class MoistureTestReport extends Component { constructor(props) { @@ -60,6 +60,63 @@ class MoistureTestReport extends Component { async initData() { } + getStatusData(level) { + var bgCssData = { + serious: 'background: #FFE3E3', + moderate: 'background: #FFEBDC', + slight: 'background: #F6FCFF', + normal: 'background: #F8F8F8', + sufficient: 'background: #F8F8F8' + } + var progressBgData = { + serious: 'background: #FF9393', + moderate: 'background: #FFC58C', + slight: 'background: #E5F3F9', + normal: 'background: #C2E5F3', + sufficient: 'background: #9FDBF3' + } + if (level >= 1 && level <= 2) { + return { + bg: bgCssData.serious, + title: '严重缺水', + gear: 1, + img: 'serious', + progressBg: progressBgData.serious + } + } else if (level >= 3 && level <= 4) { + return { + bg: bgCssData.moderate, + title: '中度缺水', + gear: 2, + img: 'moderate', + progressBg: progressBgData.moderate + } + } else if (level >= 5 && level <= 6) { + return { + bg: bgCssData.slight, + title: '轻微缺水', + gear: 3, + img: 'slight', + progressBg: progressBgData.slight + } + } else if (level >= 7 && level <= 8) { + return { + bg: bgCssData.normal, + title: '水分正常', + gear: 4, + img: 'normal', + progressBg: progressBgData.normal + } + } else if (level >= 9 && level <= 10) { + return { + bg: bgCssData.sufficient, + title: '水分充足', + gear: 5, + img: 'sufficient', + progressBg: progressBgData.sufficient + } + } + } render() { let { name, imgUrl, reportData, bgCssData, isClock, xinde, imglist, id, show } = this.state @@ -70,24 +127,29 @@ class MoistureTestReport extends Component { - + 额头 - {util.getStatusData(reportData.shuifenLevel.head).title} + {/* {this.getStatusData(7).title} */} + + 左脸颊 - {util.getStatusData(reportData.shuifenLevel.leftFace).title} + {/* {this.getStatusData(reportData.shuifenLevel.leftFace).title} */} + + 右脸颊 - {util.getStatusData(reportData.shuifenLevel.rightFace).title} + {/* {this.getStatusData(reportData.shuifenLevel.rightFace).title} */} + @@ -213,4 +275,4 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(setMobile(value)); }, }); -export default connect(mapStateToProps, mapDispatchToProps)(Login); +export default connect(mapStateToProps, mapDispatchToProps)(MoistureTestReport); From 99cdfc9d3973bd92eba901c5eec8384933140372 Mon Sep 17 00:00:00 2001 From: rongweikang <1174906669@qq.com> Date: Fri, 15 Mar 2024 17:31:17 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/moduleIOT/pages/iotCarePlan/WL200.tsx | 110 ++++++------- src/pages/index/index.tsx | 179 +++++++++++----------- 2 files changed, 144 insertions(+), 145 deletions(-) diff --git a/src/moduleIOT/pages/iotCarePlan/WL200.tsx b/src/moduleIOT/pages/iotCarePlan/WL200.tsx index 0dd73b3..dffae3b 100644 --- a/src/moduleIOT/pages/iotCarePlan/WL200.tsx +++ b/src/moduleIOT/pages/iotCarePlan/WL200.tsx @@ -10,10 +10,10 @@ import React, { useState, } from "react"; -// import Echarts from "./components/Echart/index"; +import Echarts from "./components/Echart/index"; import { Block, - View, + View, Text, Image, Video, @@ -235,9 +235,9 @@ class IotCarePlanWL200 extends Component { this.getWL200NursingHistory(); this.initData(); } - componentDidMount() {} + componentDidMount() { } - componentWillUnmount() {} + componentWillUnmount() { } componentDidShow() { console.log("页面显示了"); @@ -568,7 +568,7 @@ class IotCarePlanWL200 extends Component { this.onNursingTap(); // 倒计时弹窗: 倒计时完成后，自动开始，并判断弹窗 let downNum = CountDownTime[this.state.ActiveModeItem.modeType] || 3; - this.showCountdownFun(downNum, () => {}); + this.showCountdownFun(downNum, () => { }); }, 500); return; @@ -600,7 +600,7 @@ class IotCarePlanWL200 extends Component { }; // 绘制能量图 - drawProwerPicture() {} + drawProwerPicture() { } /** 切换光照 */ onSwitchChange = async () => { @@ -1365,7 +1365,7 @@ class IotCarePlanWL200 extends Component { // 仅在切换模式的时候，弹窗倒计时. if (type === "switch") { let downNum = CountDownTime[ActiveModeItem.modeType] || 3; - this.showCountdownFun(downNum, () => {}); // 倒计时弹窗 + this.showCountdownFun(downNum, () => { }); // 倒计时弹窗 } // 开始执行护理 @@ -2075,8 +2075,8 @@ class IotCarePlanWL200 extends Component { { isLarge isClose isShow={isEndCarePlan} - title="提示" - content="是否结束护理" - textAlgin="center" - cancelButtonText="取消" - confirmButtonText="确定" + title='提示' + content='是否结束护理' + textAlgin='center' + cancelButtonText='取消' + confirmButtonText='确定' close={this.cancelEndBtn} confirm={this.confirmEndBtn} /> @@ -2100,7 +2100,7 @@ class IotCarePlanWL200 extends Component { isLarge isClose isShow={isSwitchActiveMode} - title="护理模式切换" + title='护理模式切换' content={ { onEmitShowAll={this.openModeSwitch} /> } - textAlgin="center" - cancelButtonText="取消" - confirmButtonText="确定" + textAlgin='center' + cancelButtonText='取消' + confirmButtonText='确定' close={this.cancelModeSwitchBtn} confirm={this.confirmModeSwitchBtn} /> @@ -2125,7 +2125,7 @@ class IotCarePlanWL200 extends Component { isShow={isShowStepTips} isLarge isFirstEntry={false} - confirmButtonText="知道了" + confirmButtonText='知道了' data={ActiveModeItem.openSourceData} close={this.closeStepTips} /> @@ -2134,10 +2134,10 @@ class IotCarePlanWL200 extends Component { @@ -2146,11 +2146,11 @@ class IotCarePlanWL200 extends Component { isShow={isShowErrorTipsText} isClose zIndex={10020} - myClassName="level-up" - title="提示" + myClassName='level-up' + title='提示' content={errorTipsText} - confirmButtonText="知道了" - textAlgin="center" + confirmButtonText='知道了' + textAlgin='center' close={this.closeErrorTipsText} confirm={this.closeErrorTipsText} /> @@ -2159,17 +2159,17 @@ class IotCarePlanWL200 extends Component { isShow={isShowTipsSave} isClose zIndex={10020} - myClassName="level-up" - title="提示" + myClassName='level-up' + title='提示' content={ 当前模式已护理部分时间 是否保存护理记录 } - cancelButtonText="取消" - confirmButtonText="确认" - textAlgin="center" + cancelButtonText='取消' + confirmButtonText='确认' + textAlgin='center' close={this.closeTipsSave} cancel={this.cancelTipsSave} confirm={this.confirmTipsSave} @@ -2178,11 +2178,11 @@ class IotCarePlanWL200 extends Component { { /*不需要做处理*/ }} @@ -2193,28 +2193,28 @@ class IotCarePlanWL200 extends Component { deviceInfo={currentDevice} close={this.connectionClose} isDisconnect={!isConnectionBlutoot} - offlineChange={() => {}} + offlineChange={() => { }} pairingChange={this.pairingChange} - upgradeFun={() => {}} + upgradeFun={() => { }} /> )} - 正在同步护理记录... + 正在同步护理记录... - - + + {!isShowNurse && ( - - - + + + 护理时间： - {currentTime} + {currentTime} - + { /> )} - {/* */} +