|
|
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);
|
|
|
}
|
|
|
})
|
|
|
|
|
|
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("/pages/face_report/face_report?id=" + id + "&recordId=" + recordId+ "&report=" + report );
|
|
|
}
|
|
|
// 打开第一种类型
|
|
|
One = async (item) => {
|
|
|
|
|
|
let report = false;
|
|
|
let nursingData = JSON.parse(item.nursingData)
|
|
|
let obj = {
|
|
|
modeName: item.modeName,
|
|
|
data: nursingData
|
|
|
}
|
|
|
console.log("打开第一种类型", item, obj);
|
|
|
go(
|
|
|
"/recoding/pages/face_report_one/face_report_one?id=" +
|
|
|
item.id +
|
|
|
"&report=" +
|
|
|
report + "&obj=" +
|
|
|
JSON.stringify(obj)
|
|
|
);
|
|
|
};
|
|
|
// 打开第二种类型
|
|
|
two = async (item) => {
|
|
|
console.log("打开第二种类型", item);
|
|
|
};
|
|
|
// 打开第三种类型
|
|
|
three = async (item) => {
|
|
|
go(`/recoding/pages/moisture_test_report/moisture_test_report?data=${item.nursingData}&date=${item.createTime}&modeId=${item.modeId}&id=${item.instrumentId}`);
|
|
|
};
|
|
|
// 打开其他类型
|
|
|
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.nursingTime}
|
|
|
</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='time'>
|
|
|
{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}>
|
|
|
跳过 >
|
|
|
</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>
|
|
|
);
|
|
|
}
|
|
|
}
|