You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

886 lines
28 KiB
TypeScript

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import Taro, { setStorageSync } from "@tarojs/taro";
import classnames from "classnames";
import { Component, PropsWithChildren, useEffect, useState } from "react";
import {
Block,
View,
Text,
Image,
Input,
Button,
ScrollView,
Picker,
Textarea,
} from "@tarojs/components";
import { go } from "@/utils/traoAPI";
import { Tab, Tabs, Dialog, Popup } from "@antmjs/vantui";
/** 自定义组件 **/
import Navbar from "@/components/navbar/navbar";
import PopupClock from "@/components/popup/popup-clock";
/** 自定义组件 **/
import { InstrumentInfo } from "@/utils/Interface";
import { date, getdates, previewImage } from "@/utils/util";
import { showModal } from "@/utils/traoAPI.js";
import "./recording.less";
export default class Recording extends Component<any, any> {
constructor(props) {
super(props);
this.state = {
name: "护理历程",
current: 0,
ViewAddInstrument: false, //用来记录有没有添加设备
array: [1, 2, 3, 4, 5],
recordList: [],
bindingInstrumentList: [],
clockShow: false,
curIndex: null,
clockStatistics: [],
statistics: [],
year: new Date().getFullYear(),
today: new Date(),
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 },
],
show: false,
punchInInfo: {
clockImageList: [],
clockContent: "",
},
navigationBarHeight: "",
statusBarHeight: "",
};
}
componentDidMount() {}
componentWillUnmount() {}
// 格式化时间
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 getBindingInstrumentList() {
let res = await InstrumentInfo.bindingInstrumentList();
if (res.data.code === 200) {
this.setState({ bindingInstrumentList: res.data.data });
}
}
// 获取护理历程
async getRecord(id) {
let data = {};
if (id != null) {
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, ".");
});
this.setState({ recordList: res.data.rows });
}
}
// 查询用户当天最新的一条打卡记录
async getLatestClockRecord() {
let res = await InstrumentInfo.apiClock.getLatestClockRecord();
if (res.data.code === 200) {
if (!res.data.data) {
// this.setShow(true);
} else {
let punchInInfo = {
clockImageList: res.data.data.clockImg,
clockContent: res.data.data.clockContent,
};
this.setState({ punchInInfo });
}
}
}
// 添加打卡记录(测试用)
async addLog() {
let data = {
instrumentId: 57,
instrumentName: "0130验收FR100",
online: 1,
modeId: 100,
modeName: "护理记录测试",
nursingTime: "00:15:00",
};
let res = await InstrumentInfo.apiNursingLog.addLog(data);
if (res.data.code === 200) {
}
}
/**分页获取用户的打卡记录 page size*/
async getClockStatistics(year = this.state.year) {
let res = await InstrumentInfo.apiClock.getClockStatistics({ 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 });
}
}
// 文本框输入文字
handleTextareaInput = (e) => {
const punchInInfo = this.state.punchInInfo;
this.setState({
punchInInfo: { ...punchInInfo, clockContent: e.detail.value },
});
};
// 打开/关闭弹窗
setShow(show: boolean) {
this.setState({ show });
}
// 选择仪器
onChangeProduct(id) {
this.setState({ curIndex: id });
this.getRecord(id);
// this.addLog();
}
// 展开收起
onChangeMore(id, year, month) {
this.state.clockStatistics.map((item) => {
if (item.id === id) {
item.isMore = !item.isMore;
if (item.isMore && item.detail.length === 0) {
this.getList(id, year, month);
}
}
});
this.setState({ clockStatistics: this.state.clockStatistics });
}
// 获取当月打卡记录
async getList(id, year, month) {
let data = {
year,
month,
};
let res = await InstrumentInfo.apiClock.getList(data);
if (res.data.code === 200) {
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 = obj.updateTime
? getdates(obj.updateTime)
: getdates(obj.createTime);
obj.updateTime = updateTime && updateTime.replace(/-/g, ".");
});
}
});
this.setState({ clockStatistics: this.state.clockStatistics });
}
}
async DayTime() {
let storedData = Taro.getStorageSync("DayTime");
const day = new Date();
if (storedData === undefined || storedData === "") {
this.setState({
clockShow: false,
});
} else {
const storedDate = new Date(storedData);
const currentDate = new Date(day.toISOString());
const isSameDate =
storedDate.toDateString() === currentDate.toDateString();
if (isSameDate) {
this.setState({
clockShow: true,
});
} else {
this.setState({
clockShow: false,
});
}
}
}
async onLoad(options) {
const ViewAddInstrument = options.param;
this.setState({
ViewAddInstrument: ViewAddInstrument,
});
this.getRecord(null);
this.getBindingInstrumentList();
this.getLatestClockRecord();
this.getClockStatistics();
this.DayTime();
this.setStatusBar();
}
componentDidShow() {}
componentDidHide() {}
async initData() {}
// 选择年份
onChangeYear(event) {
this.setState({ year: event.detail.value });
this.getClockStatistics(event.detail.value);
}
// 点击tab栏
onTab = async (event) => {
const { current } = event.currentTarget.dataset;
this.setState({ current });
if (current === 1) {
this.getClockStatistics();
}
};
// 跳转到护理报告
toReport(id, recordId, item) {
this.state.bindingInstrumentList.map((instrument) => {
if (instrument.id == id) {
setStorageSync("instrument_detail", instrument);
}
});
console.log(item, "查看");
if ([1, 2, 3, 4, 5].includes(item.jumpType)) {
this.One(item);
} else if (item.jumpType === 0) {
this.two(item);
} else if (item.jumpType === 6) {
this.three(item);
} else {
this.AllDevice(item);
}
// let report =false
// go("/recording/pages/face_report/face_report?id=" + id + "&recordId=" + recordId+ "&report=" + report );
}
// 打开第一种类型
One = async (item) => {
let ids = Number(item.id);
// 获取echarts数据 这个是获取接口更新echarts页面
let res2 = await InstrumentInfo.apiNursingLog.getStatiCDE(ids);
let nursingData = JSON.parse(res2.data.data.nursingData);
let obj = {
modeName: res2.data.data.modeName,
data: nursingData,
};
let report = false;
go(
"/recoding/pages/face_report_one/face_report_one?id=" +
item.id +
"&report=" +
report +
"&obj=" +
JSON.stringify(obj)
);
};
// 打开第二种类型
two = async (item) => {
console.log("打开第二种类型", item);
let report = false;
go(
"/recoding/pages/face_report/face_report?id=" +
item.id +
"&recordId=" +
item.instrumentId +
"&report=" +
report
);
};
// 打开第三种类型
three = async (item) => {
this.moistureTest(item);
};
async moistureTest(allData) {
let data = {
queryDate: allData.createTime,
instrumentId: allData.instrumentId,
};
let res = await InstrumentInfo.fr200.moistureTest(data);
let echartsData = res.data.rows;
for (let i = 0; i < echartsData.length; i++) {
for (let j = i + 1; j < echartsData.length; j++) {
if (
echartsData[i].createTime.split(" ")[0] ==
echartsData[j].createTime.split(" ")[0]
) {
let result =
Date.parse(echartsData[i].createTime) -
Date.parse(echartsData[j].createTime);
if (result < 0) {
echartsData.splice(i, 1);
} else {
echartsData.splice(j, 1);
}
}
}
}
let gears: any = [];
let eDate: any = [];
echartsData.map((item) => {
const result = item.createTime.split(" ")[0].substring(5);
eDate.push(result);
item.nursingData = JSON.parse(item.nursingData);
let level: any = 0;
item.nursingData?.GearData?.map((gear) => {
level = level + gear.forehead;
});
level = Math.floor(level / 3);
gears.push(level);
});
echartsData = {
gears, eDate
}
setStorageSync('moistureEachtsData', JSON.stringify(echartsData))
let report =false
go(`/recoding/pages/moisture_test_report/moisture_test_report?data=${allData.nursingData}&date=${allData.createTime}&modeId=${allData.modeId}&id=${allData.instrumentId}&echartsData=${JSON.stringify(echartsData)}&report=${report }`);
}
// 打开其他类型
AllDevice = async (item) => {
console.log("打开其他类型", item);
go("/pages/face_report_AllDevice/face_report_AllDevice");
};
// 上传图片
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 });
}
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);
});
});
}
back() {
Taro.navigateBack({
delta: 1,
});
}
setStatusBar() {
Taro.getSystemInfoAsync({
success: (res) => {
const statusBarHeight = res.statusBarHeight || 0;
// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
const custom = Taro.getMenuButtonBoundingClientRect();
// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
const navigationBarHeight =
custom.height + (custom.top - statusBarHeight) * 2;
this.setState({
statusBarHeight,
navigationBarHeight,
});
},
});
}
render() {
let {
current,
array,
name,
recordList,
ViewAddInstrument,
bindingInstrumentList,
clockShow,
curIndex,
clockStatistics,
statistics,
year,
today,
monthTime,
show,
punchInInfo,
navigationBarHeight,
statusBarHeight,
} = this.state;
const statusBarHeightRpx = statusBarHeight * 2;
const navigationBarHeightRpx = navigationBarHeight * 2;
const height = statusBarHeightRpx + navigationBarHeightRpx;
return (
<Block>
<Navbar isBack titleSlot="护理记录"></Navbar>
<View
className="tabs"
style={{
top: height + "rpx",
position: "sticky",
}}
>
<View
className={classnames("tab", {
tab_active: current === 0,
})}
data-current={0}
onClick={this.onTab}
>
</View>
<View
className={classnames("tab", {
tab_active: current === 1,
})}
data-current={1}
onClick={this.onTab}
>
</View>
</View>
{current === 0 && (
<ScrollView
className="products_list"
scroll-x="true"
style={{
top: height + 110 + "rpx",
position: "sticky",
}}
>
<View
className={classnames("all", {
products_item_active: !curIndex,
})}
onClick={this.onChangeProduct.bind(this, null)}
>
</View>
{bindingInstrumentList.map((item: any, index: any) => (
<View
key={item.id}
className={classnames("products_item", {
products_item_active: curIndex === item.id,
})}
onClick={this.onChangeProduct.bind(this, item.id)}
>
<Image
className="products_cover"
src={item.logo}
mode="aspectFill"
></Image>
<View className="products_title">{item.name}</View>
</View>
))}
</ScrollView>
)}
{current === 0 && recordList.length === 0 && (
<View>
<View className="nodata">
<Image
className="nodata_img"
src={require("@/img/nodata.png")}
></Image>
<View className="nodata_text"></View>
</View>
</View>
)}
{current === 0 && (
<View style="padding-bottom:200px">
{/* <View className='instrument_item' >
<View className='instrument_top flex sb aitems'>
<View className='time_box flex aitems'>
<View className='time'>2024.1.23</View>
<View className={classnames("tag", {
tag_active: current === 1,
})}
> 在线</View>
</View>
<View className='report_btn flex'>
<View>回看报告</View>
<Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
</View>
</View>
<View className='instrument_middle flex'>
<Image className='instrument_cover' src={require("../../img/test/1706667011027.jpg")}></Image>
<View className='instrument_content'>
<View className='instrument_title'>小子弹智能射频仪</View>
<View className='instrument_desc_box flex fc sb'>
<View className='instrument_desc'>模式:基础场景版</View>
<View className='instrument_desc'>护理时间15分00秒</View>
</View>
</View>
</View>
</View> */}
<View className="instrument_list ">
{recordList.map((item: any, index: any) => (
<View className="recording-box" key={item.id}>
<View className="box-top">
<View className="top-left">
<View className="date">{item.createTime}</View>
<View
className={classnames("tip", {
tag_active: item.online === 2,
})}
>
{item.online === 1 ? "在线" : "离线"}
</View>
</View>
{item.instrumentType === 2 && (
<View
className="top-right"
onClick={this.toReport.bind(
this,
item.instrumentId,
item.id,
item
)}
>
<Image
className="arrow_icon"
src={require("@/img/index/right.png")}
mode="aspectFill"
></Image>
</View>
)}
</View>
<View className="box-bottom">
<Image
className="recording_img"
src={item.modeImage}
></Image>
<View className="bottom-right">
<View className="title">{item.instrumentName}</View>
<View className="subtitle-box">
<View className="subtitle">{item.modeName}</View>
<View className="subtitle">
{item.instrumentType === 2 && (
<Text>{item.nursingTime}</Text>
)}
</View>
</View>
</View>
</View>
</View>
))}
</View>
</View>
)}
{current === 1 && (
<View style="padding-bottom:200px">
{/* <View className='nodata'>
<Image
className='nodata_img'
src={require("../../img/nodata.png")}
></Image>
<View className='nodata_text'>暂无数据</View>
</View> */}
<View style="height: 30rpx; background: #F8F8F8"></View>
<View className="clock_in_statistics m-x-30 flex sb">
<View className="flex sb ab">
<View className="clock_in_statistics_title"></View>
<Picker
mode="date"
fields="year"
onChange={this.onChangeYear.bind(this)}
value="{{year}}"
end="{{today}}"
>
<View className="clock_in_statistics_date flex aitems">
<View>{year}</View>
<Image
className="more_icon"
src={require("@/img/arrow-down.png")}
mode="widthFix"
></Image>
</View>
</Picker>
</View>
<View className="chart flex sb">
{monthTime.map((item) => (
<View className="flex fc aitems" key={item.month}>
{item.time > 0 && (
<View className="buoy">{item.time}</View>
)}
<View
className="column"
style={{ height: `calc(186/31*${item.time}rpx)` }}
></View>
<View className="month">{item.month}</View>
</View>
))}
</View>
</View>
<View style="padding-bottom: env(safe-area-inset-bottom)">
<View className="month_box m-x-30">
{clockStatistics.map((item) => (
<View className="month_statistics" key={item.id}>
<View className="flex aitems sb">
<View className="month_item_date">
{item.year}{item.month}
</View>
<View
className="more_box flex aitems"
onClick={this.onChangeMore.bind(
this,
item.id,
item.year,
item.month
)}
>
<View className="more_text">
{" "}
{!item.isMore ? "展开更多" : "收起更多"}
</View>
<Image
style={{
transform: item.isMore
? "rotate(180deg)"
: "rotate(0deg)",
}}
className="more_icon"
src={require("@/img/arrow-down.png")}
mode="widthFix"
></Image>
</View>
</View>
<View style="height: 59rpx"></View>
<View className="statistic">
<View className="statistic_item">
<View className="statistic_num">{item.clockNum}</View>
<View className="statistic_desc"></View>
</View>
<View className="statistic_item">
<View className="statistic_num">
{(item.percentage * 100).toFixed(2)}%
</View>
<View className="statistic_desc"></View>
</View>
<View className="border"></View>
</View>
{item.isMore && item.detail && (
<View>
{item.detail.map((obj) => (
<View key={obj.id}>
<View style="height: 57rpx"></View>
<View className="month_item">
<View className="month_item_date">
{obj.updateTime}
</View>
<View className="month_image_box flex sb">
{obj.clockImg.map((img) => (
<Image
key={img}
className="month_item_cover"
src={img}
></Image>
))}
</View>
<View className="month_item_date">
{/* 小紫弹智能射频仪、花至抗老射频仪PRO{" "} */}
{obj.instrumentName === null
? ""
: obj.instrumentName}
</View>
<View className="month_item_note">
{obj.clockContent}
</View>
</View>
</View>
))}
</View>
)}
</View>
))}
</View>
</View>
</View>
)}
{!clockShow && ViewAddInstrument === "true" && (
<View className="footer flex aitems">
<View className="btn" onClick={this.setShow.bind(this, true)}>
</View>
{/* <View className="text" onClick={this.back}>
跳过 &gt;
</View> */}
</View>
)}
<Popup show={show} onClose={() => this.setState({ show: false })}>
<View className="popBox">
<Image
className="close_icon"
src={require("@/img/close.png")}
mode="widthFix"
onClick={this.setShow.bind(this, false)}
></Image>
<View className="popTitle"></View>
<View className="popSubtitle">
<View className="bold">{clockStatistics[0]?.clockNum}</View>{" "}
<View className="bold">
{(clockStatistics[0]?.percentage * 100).toFixed(1)}%
</View>
</View>
<View className="img_box">
{punchInInfo.clockImageList.map((item, index) => (
<View key={item} className="img">
<Image className="showImg" src={item} mode="widthFix"></Image>
<Image
className="closeImg"
src={require("@/img/close1.png")}
mode="widthFix"
onClick={this.delImg.bind(this, index)}
></Image>
</View>
))}
{punchInInfo.clockImageList.length < 3 && (
<View
className="addBox"
onClick={this.handleChooseImage.bind(this)}
>
<Image
className="showImg"
src={require("@/img/clock_in_upload/add-image.png")}
mode="widthFix"
></Image>
</View>
)}
</View>
<View className="info4">
<View className="content">
<Textarea
placeholderStyle="color: #ccc; font-size: 26rpx;font-weight: 400;font-family: PingFang SC;"
placeholder="请记录一下今天的护理心得吧"
maxlength={120}
onInput={this.handleTextareaInput.bind(this)}
value={punchInInfo.clockContent}
></Textarea>
</View>
<View className="tip">
{"" + (punchInInfo.clockContent.length || 0) + "/120"}
</View>
</View>
<View className="popbtnbox flex aitems jcenter">
<View className="btn1" onClick={this.submit.bind(this)}>
</View>
</View>
</View>
</Popup>
</Block>
);
}
}