fix:修复横向滚动条切换item,页面数据刷新导致横向滚动闪动回初始位置问题

master
blak-kong 2 years ago
parent 722482e8dd
commit 30b227b892

@ -71,9 +71,11 @@ export default defineAppConfig({
navigationBarBackgroundColor: "#fff",
navigationBarTitleText: "WeChat",
navigationBarTextStyle: "black",
// pageOrientation: "auto",
// enablePullDownRefresh: true
},
requiredPrivateInfos: ["getLocation"],
subPackages: [
{
root: "moduleIOT",

@ -204,7 +204,7 @@ export default class InstrumentManage extends Component<any, any> {
<Block>
<View className="title"></View>
<View className="scroll">
<ScrollView scroll-x="true" className="un_bind_list">
<ScrollView scrollX={true} className="un_bind_list">
{unBindList.map((item, index) => {
if (item.status === 0) {
return (

@ -508,7 +508,8 @@ class IotCarePlanFR200 extends Component<any, any> {
currentWorkModeType = 3;
} else if (
data.modeType === "maskPenetration" ||
data.modeType === "essence"
data.modeType === "essence" ||
data.modeType === "led"
) {
currentWorkModeType = 2;
}
@ -918,7 +919,7 @@ class IotCarePlanFR200 extends Component<any, any> {
let waterStepList = this.state.waterStepList;
// 到达第几个step
let waterStepIndex = this.state.waterStepIndex;
// 代表5秒以后最后拿到的结果
if (waterStepList[waterStepIndex].finish) {
// 获取等级
@ -949,9 +950,9 @@ class IotCarePlanFR200 extends Component<any, any> {
} else {
let waterStepList = this.state.waterStepList;
let waterStepIndex = this.state.waterStepIndex;
// 5秒后获取的结果
// 5秒后获取的结果
if (waterStepList[waterStepIndex].finish) {
// 获取失败后把进度条清理0
// 获取失败后把进度条清理0
waterStepList[waterStepIndex].schedule = 0;
waterStepList[waterStepIndex].finish = false;
this.setState({
@ -1598,15 +1599,14 @@ class IotCarePlanFR200 extends Component<any, any> {
executePromises = async () => {
let waterStepList = this.state.waterStepList;
let waterStepIndex = this.state.waterStepIndex;
let that =this
let that = this;
await new Promise<void>((resolve) => {
setTimeout(() => {
waterStepList[waterStepIndex].schedule = 100;
that.setState({
waterStepList,
});
that.setState({
waterStepList,
});
resolve();
}, 3000);
}).then(() => {
@ -1614,19 +1614,14 @@ class IotCarePlanFR200 extends Component<any, any> {
setTimeout(() => {
waterStepList[waterStepIndex].finish = true;
that.setState({
waterStepList,
});
waterStepList,
});
resolve();
}, 2000);
});
});
};
// 检测并控制工作状态
handleWorkStatus = async (isBtnClick: boolean, workStatus) => {
const { DeviceConnectStatus, ActiveModeItem } = this.state;
@ -1654,22 +1649,24 @@ class IotCarePlanFR200 extends Component<any, any> {
if (ActiveModeItem.modeType === "moistureTest") {
let that = this;
sendParams.testStatus = "standby"; // 切换为准备
// 3秒定时器逻辑3秒把进度条弄成100再加2秒获取最后结果
// 3秒定时器逻辑3秒把进度条弄成100再加2秒获取最后结果
if (isBtnClick) {
that.setState({
isRuningTest: 2,
});
this.executePromises()
this.executePromises();
sendParams.testStatus = "start"; // 点击开始再开始
console.log("点击开始", isBtnClick);
}
}
if (ActiveModeItem.modeType === "maskPenetration") {
// 面膜促渗和精华促渗
if (
ActiveModeItem.modeType === "maskPenetration" ||
ActiveModeItem.modeType === "essence"
) {
sendParams.gear = this.state.currentGear; // 点击开始再开始
}
@ -2120,7 +2117,12 @@ class IotCarePlanFR200 extends Component<any, any> {
return nursingData;
}
return { nursingData: JSON.stringify({ workMode: nowFR200NursingHistory.workMode, }), showFace: true }
return {
nursingData: JSON.stringify({
workMode: nowFR200NursingHistory.workMode,
}),
showFace: true,
};
};
// 计算挡位
@ -2669,7 +2671,7 @@ class IotCarePlanFR200 extends Component<any, any> {
showFullscreenBtn={false}
onLoadedMetaData={this.GetVideosTime}
/>
<button onClick={this.executePromises}></button>
{/* <Button onClick={this.executePromises}>点击按钮</Button> */}
{errorTips && (
<Block>
<View className="msg-tips">
@ -2683,22 +2685,28 @@ class IotCarePlanFR200 extends Component<any, any> {
)}
</View>
<View className="fr200-iot-device">
<View className="item">
<Text className="device-time">
<Text className="time">{currentTime}</Text>
</Text>
</View>
<View className="line" />
<View className="item">
<Text className="gear">{currentGear}</Text>
{ActiveModeItem.modeType !== "moistureTest" && (
<View className="fr200-iot-device">
<View className="item">
<Text className="device-time">
<Text className="time">{currentTime}</Text>
</Text>
</View>
<View className="line" />
<View className="item">
<Text className="gear">
{ActiveModeItem.modeType === "led" ? "-" : currentGear}
</Text>
</View>
<View className="line" />
<ElectricityView
Electricity={Electricity}
DeviceConnectStatus={DeviceConnectStatus}
/>
</View>
<View className="line" />
<ElectricityView
Electricity={Electricity}
DeviceConnectStatus={DeviceConnectStatus}
/>
</View>
)}
</View>
{ModeList.length > 0 && (
@ -2714,8 +2722,8 @@ class IotCarePlanFR200 extends Component<any, any> {
onModeLockOpen={this.onModeLockOpen}
/>
)}
<button onClick={this.look.bind(this)}>echarts </button>
<button onClick={this.updata.bind(this)}> </button>
{/* <button onClick={this.look.bind(this)}>echarts </button>
<button onClick={this.updata.bind(this)}> </button> */}
<View className={classnames({ show: showEcharts })}>
<Echarts data={echartsData}></Echarts>

@ -9,7 +9,7 @@ interface Props {
onEmitStartNurse: Function; // 每次点击item回调事件和数据给父组件
onEmitSwitchChange: Function;
onEmitEndPlan: Function;
onsuccess:Function
onsuccess: Function;
}
function Index({
currentWorkModeType,
@ -18,7 +18,7 @@ function Index({
onEmitStartNurse,
onEmitSwitchChange,
onEmitEndPlan,
onsuccess
onsuccess,
}: Props) {
const onStartNurse = () => {
onEmitStartNurse();
@ -31,24 +31,31 @@ function Index({
const onEndPlan = () => {
onEmitEndPlan();
};
const onSuccessNurse = () => {
onsuccess();
};
return (
<Block>
<View className="iot-footer">
{currentWorkModeType === 3 && (
<Block>
{isRuningTest === 1 ? (
<View className="btn" onClick={onStartNurse}>
</View>
) : isRuningTest === 2 ? (
<View className="btn">...</View>
) : isRuningTest === 3 ? (
<View className="btn" onClick={onStartNurse}></View>
) : (
<View className="btn" onClick={onsuccess}></View>
)}
</Block>
{isRuningTest === 1 ? (
<View className="btn" onClick={onStartNurse}>
</View>
) : isRuningTest === 2 ? (
<View className="btn">...</View>
) : isRuningTest === 3 ? (
<View className="btn" onClick={onStartNurse}>
</View>
) : (
<View className="btn" onClick={onSuccessNurse}>
</View>
)}
</Block>
)}
{currentWorkModeType === 2 && (

@ -85,7 +85,9 @@ function Index({
<View className="mode-info">
<View className="mode-info-title">{item.modeName}</View>
<View className="mode-info-time">
{item.modeTimeStr}
{item.modeTimeStr === "00:00"
? "--:--"
: item.modeTimeStr}
</View>
<View
className={classnames("mode-info-select", {

@ -1,4 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '首页',
enablePullDownRefresh: false,
enablePageMeta: true
})

@ -11,6 +11,7 @@ import {
Swiper,
SwiperItem,
RichText,
PageMeta,
} from "@tarojs/components";
import { Popup } from "@antmjs/vantui";
/*** redux ***/
@ -943,6 +944,10 @@ class Index extends Component<any, any> {
// return;
}
goTest() {
go("/pages/consultant/consultant");
}
//连接完成时数据的回调
offlineChange = async (e) => {
console.log("offlineChange", e);
@ -1122,6 +1127,7 @@ class Index extends Component<any, any> {
return (
<Block>
{/* <PageMeta pageOrientation="landscape"> */}
<View catchMove>
<PopupAlert
isShow={isCommonError}
@ -1446,6 +1452,13 @@ class Index extends Component<any, any> {
<Popup show={show} className="custom-popup" overlay={false}>
<View className="popBox"></View>
</Popup>
{/* </PageMeta> */}
{/* <View
style="position:fixed;width:100vw;height:100vh"
onClick={this.goTest}
>
</View> */}
</Block>
);
}

@ -1,5 +1,6 @@
import Taro, { setStorageSync } from "@tarojs/taro";
import classnames from "classnames";
import dayjs from "dayjs";
import { Component, PropsWithChildren, useEffect, useState } from "react";
import {
@ -40,8 +41,11 @@ export default class Recording extends Component<any, any> {
curIndex: null,
clockStatistics: [],
statistics: [],
yearValue: dayjs().format("YYYY-MM-DD"),
year: new Date().getFullYear(),
today: new Date(),
startYear: "2000-01-01",
endYear: dayjs().format("YYYY-MM-DD"),
monthTime: [
{ month: 1, time: 0 },
{ month: 2, time: 0 },
@ -264,21 +268,31 @@ export default class Recording extends Component<any, any> {
ViewAddInstrument: ViewAddInstrument,
});
this.getRecord(null);
this.getBindingInstrumentList();
this.getLatestClockRecord();
this.getClockStatistics();
this.DayTime();
this.setStatusBar();
this.initData();
}
componentDidShow() {}
componentDidHide() {}
async initData() {}
initData = async () => {
this.getRecord(null);
Taro.showLoading({
title: "请求中...",
mask: true,
});
await Promise.all([
this.getBindingInstrumentList(),
this.getLatestClockRecord(),
this.getClockStatistics(),
this.DayTime(),
this.setStatusBar(),
]);
Taro.hideLoading();
};
// 选择年份
onChangeYear(event) {
console.log("event", event);
this.setState({ year: event.detail.value });
this.getClockStatistics(event.detail.value);
}
@ -510,12 +524,13 @@ export default class Recording extends Component<any, any> {
clockStatistics,
statistics,
year,
today,
monthTime,
show,
punchInInfo,
navigationBarHeight,
statusBarHeight,
startYear,
endYear,
} = this.state;
const statusBarHeightRpx = statusBarHeight * 2;
const navigationBarHeightRpx = navigationBarHeight * 2;
@ -549,136 +564,128 @@ export default class Recording extends Component<any, any> {
</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)}
<View>
{current === 0 && (
<Block>
<ScrollView
className="products_list"
scrollX={true}
enhanced={true}
bounces={false}
// scrollIntoView={"products_item_" + curIndex}
style={{
top: height + 110 + "rpx",
position: "sticky",
}}
>
<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'>1500</View>
<View>
<View
id={"products_item_0"}
className={classnames("all", {
products_item_active: !curIndex,
})}
onClick={this.onChangeProduct.bind(this, null)}
>
</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>
{bindingInstrumentList.map((item: any, index: any) => {
return (
<View
className={classnames("tip", {
tag_active: item.online === 2,
key={item.id}
id={"products_item_" + item.id}
className={classnames("products_item", {
products_item_active: curIndex === item.id,
})}
onClick={this.onChangeProduct.bind(this, item.id)}
>
{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")}
className="products_cover"
src={item.logo}
mode="aspectFill"
></Image>
<View className="products_title">{item.name}</View>
</View>
)}
);
})}
</View>
</ScrollView>
<View>
{recordList.length === 0 && (
<View>
<View className="nodata">
<Image
className="nodata_img"
src={require("@/img/nodata.png")}
></Image>
<View className="nodata_text"></View>
</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>
)}
)}
{recordList.length > 0 && (
<View style="padding-bottom:200px">
<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>
</View>
</View>
))}
</View>
</View>
)}
)}
</View>
</Block>
)}
</View>
{current === 1 && (
<View style="padding-bottom:200px">
{/* <View className='nodata'>
@ -693,11 +700,13 @@ export default class Recording extends Component<any, any> {
<View className="flex sb ab">
<View className="clock_in_statistics_title"></View>
<Picker
style="color:#000"
mode="date"
fields="year"
onChange={this.onChangeYear.bind(this)}
value="{{year}}"
end="{{today}}"
value={this.state.yearValue}
start={startYear}
end={endYear}
>
<View className="clock_in_statistics_date flex aitems">
<View>{year}</View>

Loading…
Cancel
Save