完成echarts表格对接

master
rongweikang 2 years ago
parent 9af2818990
commit 79e7432953

@ -1,8 +1,20 @@
@import url(./WL200.less);
.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%;
}
}
.fr200-iot-device {
width: 690rpx;
height: 150rpx;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;

@ -172,7 +172,7 @@ class IotCarePlanFR200 extends Component<any, any> {
isConnectionBlutoot: true, // 是否已连接蓝牙
isShowNurse: true, // 是否开始并显示护理 FR200默认已经开始准备护理
isStopNurse: false, // 是否暂停护理
isEndNurse: false, // 是否结束护理
// isEndNurse: false, // 是否结束护理
errorTips: "", // 错误提示
/** 护理过程 END*/
@ -184,7 +184,7 @@ class IotCarePlanFR200 extends Component<any, any> {
ModeList: [],
ModeType: "all", // all 1基础护理 2专区护理 3专研促渗 4敏期护理 5智能测肤
ActiveModeItem: {
modeType: "",
modeType: "face",
openSourceData: [],
}, // 当前选中模式
SwitchActiveModeItem: {
@ -233,7 +233,7 @@ class IotCarePlanFR200 extends Component<any, any> {
echartsData: "", //传给echarts图表的数据
series: [
{
data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4],
data: [],
type: "line",
smooth: true,
z: 1,
@ -241,10 +241,10 @@ class IotCarePlanFR200 extends Component<any, any> {
color: "red",
},
{
data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4],
data: [],
type: "line",
smooth: true,
symbolSize: 10,
symbolSize: 5,
lineStyle: {
color: "#ff8410",
width: 1,
@ -255,9 +255,9 @@ class IotCarePlanFR200 extends Component<any, any> {
},
{
name: "a",
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: "bar",
barWidth: 22,
barWidth: 12,
z: 2,
stack: "x",
visualMap: false,
@ -267,7 +267,7 @@ class IotCarePlanFR200 extends Component<any, any> {
},
{
name: "b",
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: "bar",
z: 2,
stack: "x",
@ -278,7 +278,7 @@ class IotCarePlanFR200 extends Component<any, any> {
},
{
name: "c",
data: [0, 1, 1, 1, 1, 1, 1, 1, 1, 1],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: "bar",
z: 2,
stack: "x",
@ -289,7 +289,7 @@ class IotCarePlanFR200 extends Component<any, any> {
},
{
name: "d",
data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 1],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: "bar",
z: 2,
stack: "x",
@ -300,7 +300,7 @@ class IotCarePlanFR200 extends Component<any, any> {
},
{
name: "e",
data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 0],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: "bar",
z: 2,
stack: "x",
@ -311,7 +311,7 @@ class IotCarePlanFR200 extends Component<any, any> {
},
{
name: "f",
data: [0, 0, 0, 0, 0, 1, 1, 0, 1, 0],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: "bar",
z: 2,
stack: "x",
@ -322,7 +322,7 @@ class IotCarePlanFR200 extends Component<any, any> {
},
{
name: "h",
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: "bar",
z: 2,
stack: "x",
@ -333,7 +333,7 @@ class IotCarePlanFR200 extends Component<any, any> {
},
{
name: "i",
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: "bar",
z: 2,
stack: "x",
@ -343,6 +343,12 @@ class IotCarePlanFR200 extends Component<any, any> {
},
},
],
time: {
min: 0,
second: 0
},
timeArr: [],
videoVoiceStatus: false
};
}
bluetoothContainer: any = null;
@ -403,9 +409,9 @@ class IotCarePlanFR200 extends Component<any, any> {
this.getInstrumentClockSummary();
this.getInstrumentClockDetail();
}
componentDidMount() {}
componentDidMount() { }
componentWillUnmount() {}
componentWillUnmount() { }
componentDidShow() {
console.log("页面显示了");
@ -435,6 +441,24 @@ class IotCarePlanFR200 extends Component<any, any> {
title: obj.name,
});
let sendParams: any = {
// ...deviceCommandSamples.pause,
// workMode: 'moistureTest', // 使用模式
commandType: "DeviceStatusSync",
deviceSyncCommandType: 'onlySyncStatusToDevice',
totalWorkingSeconds: 0,
workStatus: "pause",
workMode: 'face',
};
sendParams.gear = 1;
let pauseArrayBuffer = deviceToolKitInstance.toBleCommand(
sendParams as any
);
sendCommand({
value: pauseArrayBuffer,
}).then((res) => console.log("同步为0=====》", res));
await this.GetModeList(obj?.id);
// 如果不存在设备模式值,则判断为首次进入,弹窗提示
@ -448,7 +472,7 @@ class IotCarePlanFR200 extends Component<any, any> {
const platform = Taro.getSystemInfoSync().platform;
if (platform !== "devtools") {
// 仅手机端初始化蓝牙
// this.init();
this.init();
}
}
@ -573,7 +597,7 @@ class IotCarePlanFR200 extends Component<any, any> {
* @name /
* */
modeCurrentFun = async (data, isNotCheck = false) => {
let { isShowNurse, activeModeID } = this.state;
let { isShowNurse, activeModeID, series } = this.state;
// 护理检查改变模式,是否提示切换护理模式
// isNotCheck为真时不进行校验直接切换
this.tempModeCurrent = data;
@ -603,6 +627,15 @@ class IotCarePlanFR200 extends Component<any, any> {
currentWorkModeType = 2;
}
series.map(item => {
if (item.type == 'line') {
item.data = []
} else {
item.data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}
})
this.setState({
ActiveModeItem: data,
activeModeID: data?.id,
@ -612,6 +645,7 @@ class IotCarePlanFR200 extends Component<any, any> {
MaskModeStepIndex: 0, // 面膜促渗步骤
ModeType: this.ModeTypeArray[data.modeClass],
currentWorkModeType,
series
});
// 切换模式时:重新设置视频地址
@ -860,36 +894,53 @@ class IotCarePlanFR200 extends Component<any, any> {
let textshow = this.state.textshow;
this.setState({ textshow: !textshow });
}
updata() {
let that = this;
let stop = 0;
let time = setInterval(function () {
stop++;
let series = JSON.parse(JSON.stringify(that.state.series));
let num = Math.floor(Math.random() * 9);
let count = 0;
series.map((item) => {
if (item.type === "line") {
updata(level = 1, min = 0, seconds = 0) {
if (seconds == 0 && min == 0) {
return
}
// let that = this;
// let stop = 0;
// let time = setInterval(function () {
// stop++;
let series = JSON.parse(JSON.stringify(this.state.series));
let num = level
let count = 0;
series.map((item) => {
if (item.type === "line") {
if (item.data.length >= 10) {
item.data.splice(0, 1);
item.data.push(num);
}
if (item.type === "bar") {
count++;
item.data.push(num);
}
if (item.type === "bar") {
count++;
if (seconds > 10) {
item.data.splice(0, 1);
if (count <= num) {
item.data.push(1);
} else {
item.data.push(0);
}
} else {
if (count <= num) {
item.data.splice(seconds - 1, 1, 1)
} else {
item.data.splice(seconds - 1, 1, 0)
}
}
});
// 更新图表数据
that.setState({ series });
if (stop >= 20) {
clearInterval(time);
}
}, 1000);
});
let time = JSON.parse(JSON.stringify(this.state.time));
time.min = min
time.second = seconds
// 更新图表数据
this.setState({ series });
this.setState({ time });
// if (stop >= 20) {
// clearInterval(time);
// }
// }, 1000);
}
full() {
@ -1040,6 +1091,7 @@ class IotCarePlanFR200 extends Component<any, any> {
// 更新界面倒计时
this.resetTimer();
if (
sceneTime > totalTime &&
this.isRuning &&
@ -1329,6 +1381,15 @@ class IotCarePlanFR200 extends Component<any, any> {
}
}
/**
*
*/
videoVoiceStatusChange() {
let { videoVoiceStatus } = this.state;
this.setState({ videoVoiceStatus: !videoVoiceStatus })
}
/** @name 精华促渗下一步,根据时间自动调用 */
essencePenetrationNext() {
let {
@ -1843,8 +1904,27 @@ class IotCarePlanFR200 extends Component<any, any> {
Taro.setStorageSync("FR200NursingHistory", params);
console.log("保存setFR200NursingHistory");
};
formatTime(min, sec) {
let mins
if (min < 10) {
mins = '0' + min;
} else {
mins = min;
}
let secs
if (sec < 10) {
secs = '0' + sec;
} else {
secs = sec;
}
return `${mins.toString()}:${secs.toString()}`;
}
/** 更新WL200护理历史运行时间 */
updateFR200NursingHistory = (data: any = null, jsonStatus: any = null) => {
console.log(11111111);
this.FR200NursingHistory = Taro.getStorageSync("FR200NursingHistory");
if (this.FR200NursingHistory) {
@ -1857,6 +1937,19 @@ class IotCarePlanFR200 extends Component<any, any> {
// 设置正确封面
if (!data) {
if (jsonStatus) {
let { timeArr } = this.state
let newTime = this.formatTime(jsonStatus.totalWorkingMinutes, jsonStatus.totalWorkingSeconds)
let flag = false
timeArr.map(item => {
if (newTime === item) {
flag = true
}
})
if (flag) {
return
}
timeArr.push(newTime)
this.setState({ timeArr })
// 缓存每秒数据
if (!params.dataArray) params.dataArray = [];
params.dataArray.push(jsonStatus);
@ -1864,8 +1957,17 @@ class IotCarePlanFR200 extends Component<any, any> {
params.workMode = jsonStatus?.workMode;
params.modeId = this.state.ActiveModeItem?.id;
params.modeName = this.state.ActiveModeItem.modeName;
let impedance = jsonStatus.impedance
let level = impedance - 200
if (level < 0) {
level = 1
} else {
level = Math.ceil(level / 80) + 1
}
console.log('min:', jsonStatus.totalWorkingMinutes, ' ', 'sec', jsonStatus.totalWorkingSeconds);
this.updata(level, jsonStatus.totalWorkingMinutes, jsonStatus.totalWorkingSeconds)
console.log(jsonStatus, 555555555555);
}
} else {
params.jsonStatus = jsonStatus;
@ -2180,11 +2282,11 @@ class IotCarePlanFR200 extends Component<any, any> {
let report = true;
go(
"/recoding/pages/face_report_one/face_report_one?id=" +
ids +
"&report=" +
report +
"&obj=" +
JSON.stringify(obj)
ids +
"&report=" +
report +
"&obj=" +
JSON.stringify(obj)
);
} else if ("moistureTest" === nursingData.workMode) {
console.log("水分测试");
@ -2195,11 +2297,11 @@ class IotCarePlanFR200 extends Component<any, any> {
go(
"/recoding/pages/face_report/face_report?id=" +
deviceid +
"&recordId=" +
currentDevice +
"&report=" +
report
deviceid +
"&recordId=" +
currentDevice +
"&report=" +
report
);
}
};
@ -2387,7 +2489,9 @@ class IotCarePlanFR200 extends Component<any, any> {
echartsData,
isShowReReadRecordConnect,
series,
time,
isFullScreen,
videoVoiceStatus
} = this.state;
return (
@ -2406,19 +2510,19 @@ class IotCarePlanFR200 extends Component<any, any> {
<PopupAlert
isShow={isModeLock}
zIndex={10020}
myClassName="level-up"
title="提示"
content="该模式即将上线,敬请期待"
confirmButtonText="我知道了"
textAlgin="center"
myClassName='level-up'
title='提示'
content='该模式即将上线,敬请期待'
confirmButtonText='我知道了'
textAlgin='center'
close={this.onModeLockClose}
confirm={this.onModeLockClose}
/>
<PopupInstrumentUploadTips
isShow={isFirstTipShow}
zIndex={10020}
myClassName="level-up"
title="打卡介绍"
myClassName='level-up'
title='打卡介绍'
data={nurseInfo}
close={this.onTipShowClose}
confirm={this.onTipShowClose}
@ -2430,11 +2534,11 @@ class IotCarePlanFR200 extends Component<any, any> {
isLarge
isClose
isShow={isEndCarePlan}
title="提示"
content="是否结束护理"
textAlgin="center"
cancelButtonText="取消"
confirmButtonText="确定"
title='提示'
content='是否结束护理'
textAlgin='center'
cancelButtonText='取消'
confirmButtonText='确定'
close={this.cancelEndBtn}
confirm={this.confirmEndBtn}
/>
@ -2442,7 +2546,7 @@ class IotCarePlanFR200 extends Component<any, any> {
isLarge
isClose
isShow={isSwitchActiveMode}
title="护理模式切换"
title='护理模式切换'
content={
<ModeListView
ModeID={ModeID}
@ -2456,9 +2560,9 @@ class IotCarePlanFR200 extends Component<any, any> {
onModeLockOpen={this.onModeLockOpen}
/>
}
textAlgin="center"
cancelButtonText="取消"
confirmButtonText="确定"
textAlgin='center'
cancelButtonText='取消'
confirmButtonText='确定'
close={this.cancelModeSwitchBtn}
confirm={this.confirmModeSwitchBtn}
/>
@ -2468,7 +2572,7 @@ class IotCarePlanFR200 extends Component<any, any> {
isShow={isShowStepTips}
isLarge
isFirstEntry={false}
confirmButtonText="知道了"
confirmButtonText='知道了'
data={ActiveModeItem.openSourceData}
close={this.closeStepTips}
/>
@ -2477,10 +2581,10 @@ class IotCarePlanFR200 extends Component<any, any> {
<PopupAlert
isShow={isNotEnoughTime}
isClose
title="提示"
content="您的本次护理时间不足,请重新护理"
confirmButtonText="确认"
textAlgin="center"
title='提示'
content='您的本次护理时间不足,请重新护理'
confirmButtonText='确认'
textAlgin='center'
close={this.closeNotEnoughTime}
confirm={this.closeNotEnoughTime}
/>
@ -2489,11 +2593,11 @@ class IotCarePlanFR200 extends Component<any, any> {
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}
/>
@ -2502,17 +2606,17 @@ class IotCarePlanFR200 extends Component<any, any> {
isShow={isShowTipsSave}
isClose
zIndex={10020}
myClassName="level-up"
title="提示"
myClassName='level-up'
title='提示'
content={
<Block>
<View></View>
<View></View>
</Block>
}
cancelButtonText="取消"
confirmButtonText="确认"
textAlgin="center"
cancelButtonText='取消'
confirmButtonText='确认'
textAlgin='center'
close={this.closeTipsSave}
cancel={this.cancelTipsSave}
confirm={this.confirmTipsSave}
@ -2521,11 +2625,11 @@ class IotCarePlanFR200 extends Component<any, any> {
<PopupStatus
isShow={isShowNursingSuccess}
isClose
title="您已结束本次护理"
type="success"
content="正在上传护理记录……"
confirmButtonText="知道了"
textAlgin="center"
title='您已结束本次护理'
type='success'
content='正在上传护理记录……'
confirmButtonText='知道了'
textAlgin='center'
close={() => {
/*不需要做处理*/
}}
@ -2536,32 +2640,33 @@ class IotCarePlanFR200 extends Component<any, any> {
deviceInfo={currentDevice}
close={this.connectionClose}
isDisconnect={!isConnectionBlutoot}
offlineChange={() => {}}
offlineChange={() => { }}
pairingChange={this.pairingChange}
upgradeFun={() => {}}
upgradeFun={() => { }}
/>
)}
<Popup
show={isShowHistoryMsg}
className="custom-popup"
className='custom-popup'
overlay={false}
>
<View className="sync-history-msg">...</View>
<View className='sync-history-msg'>...</View>
</Popup>
</View>
<View>
<View className="iot-main">
<View className='iot-main'>
{isFullScreen && (
<View className="banner-box">
<View className='banner-box'>
<View>
<Video
className="video-or-image"
className='video-or-image'
src={currentVideoSrc}
loop
id="myVideo"
objectFit="cover"
id='myVideo'
muted={videoVoiceStatus}
objectFit='cover'
enablePlayGesture
showFullscreenBtn={false}
onLoadedMetaData={this.GetVideosTime}
@ -2569,29 +2674,37 @@ class IotCarePlanFR200 extends Component<any, any> {
{/* <button onClick={this.executePromises}>点击按钮</button> */}
{errorTips && (
<Block>
<View className="msg-tips">
<View className='msg-tips'>
<Image
className="msg-tips-img"
className='msg-tips-img'
src={require("@/img/tips.png")}
/>
<View className="msg-tips-content">{errorTips}</View>
<View className='msg-tips-content'>{errorTips}</View>
</View>
</Block>
)}
</View>
<View className="fr200-iot-device">
<View className="item">
<Text className="device-time">
<View
className='music flex aitems jcenter'
onClick={this.videoVoiceStatusChange.bind(this)}
>
<Image
src={require(`@/img/${videoVoiceStatus ? 'mute' : 'play'}.png`)}
mode='aspectFill'
></Image>
</View>
<View className='fr200-iot-device'>
<View className='item'>
<Text className='device-time'>
<Text className="time">{currentTime}</Text>
<Text className='time'>{currentTime}</Text>
</Text>
</View>
<View className="line" />
<View className="item">
<Text className="gear">{currentGear}</Text>
<View className='line' />
<View className='item'>
<Text className='gear'>{currentGear}</Text>
</View>
<View className="line" />
<View className='line' />
<ElectricityView
Electricity={Electricity}
DeviceConnectStatus={DeviceConnectStatus}
@ -2613,9 +2726,10 @@ class IotCarePlanFR200 extends Component<any, any> {
onModeLockOpen={this.onModeLockOpen}
/>
)}
<button onClick={this.updata.bind(this)}> </button>
<View className={classnames({ show: showEcharts })}>
<Echarts series={series} full={this.full.bind(this)}></Echarts>
{/* <button onClick={this.updata.bind(this)}>模拟数据更新 </button> */}
<View className={classnames({ show: ActiveModeItem?.modeType !== "face" && ActiveModeItem?.modeType !== "eyes" && ActiveModeItem?.modeType !== "nasolabialFold" && ActiveModeItem?.modeType !== "mandibularLine" && ActiveModeItem?.modeType !== "headLiftingPro" })}>
<Echarts series={series} time={time} full={this.full.bind(this)}></Echarts>
</View>
{(ActiveModeItem?.modeType === "maskPenetration" ||

@ -136,6 +136,7 @@ export default class BluetoothContainer {
workMode: jsonStatus?.workMode, // 仅当设备上报模式与小程序一致时,才允许改变小程序变量缓存
});
}
console.log("this.that.isRuning",this.that.isRuning)
// 判断设备是否在运行中(护理中)
// 仅当设备模式与小程序是否一致,才允许更改设备运行时间
if (this.that.isRuning) {

@ -7,86 +7,106 @@
padding: 35rpx 25rpx 25rpx 35rpx;
box-sizing: border-box;
position: relative;
}
.fullscreen {
position: fixed;
top: 450rpx;
left: -450rpx;
right: 0;
bottom: 0;
width: 100vh;
height: 100vw;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
transform: rotate(90deg);
// animation: rotate 0s linear;
}
.fullscreen {
position: fixed;
top: 450rpx;
left: -450rpx;
right: 0;
bottom: 0;
@keyframes echartRotate {
from {
width: 690rpx;
height: 320rpx;
transform: rotate(0deg);
}
to {
width: 100vh;
height: 100vw;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
transform: rotate(90deg);
// animation: rotate 0s linear;
transform: rotate(0deg);
}
}
@keyframes echartRotate {
from {
width: 690rpx;
height: 320rpx;
transform: rotate(0deg);
}
to {
width: 100vh;
height: 100vw;
transform: rotate(0deg);
}
.box_background {
position: absolute;
top: 0;
left: 0;
width: 690rpx;
height: 320rpx;
border-radius: 30rpx;
background-color: #fff;
.power {
margin: 34rpx 0 28rpx 28rpx;
font-family: PingFang-SC;
font-weight: 500;
font-size: 18rpx;
color: #cccccc;
}
.box_background {
.full {
width: 24rpx;
height: 24rpx;
position: absolute;
top: 0;
left: 0;
width: 690rpx;
height: 320rpx;
border-radius: 30rpx;
background-color: #fff;
.power {
margin: 34rpx 0 28rpx 28rpx;
font-family: PingFang-SC;
font-weight: 500;
font-size: 18rpx;
color: #cccccc;
}
.full {
width: 24rpx;
height: 24rpx;
position: absolute;
top: 32rpx;
right: 26rpx;
z-index: 2;
}
.line {
margin: 0 0 6rpx 35rpx;
font-family: PingFang-SC;
font-size: 14rpx;
color: #cccccc;
display: flex;
position: relative;
height: 18rpx;
.bottom_line {
// border-bottom: 1rpx #ccc dashed;
width: 550rpx;
margin-left: 20rpx;
position: absolute;
bottom: -6rpx;
right: 74rpx;
height: 4rpx;
color: #fff;
}
}
.time {
top: 32rpx;
right: 26rpx;
z-index: 2;
}
.line {
margin: 0 0 6rpx 35rpx;
font-family: PingFang-SC;
font-size: 14rpx;
color: #cccccc;
display: flex;
position: relative;
height: 18rpx;
.bottom_line {
// border-bottom: 1rpx #ccc dashed;
width: 550rpx;
margin-left: 20rpx;
position: absolute;
bottom: 22rpx;
right: 24rpx;
font-family: PingFang-SC;
font-size: 18rpx;
color: #cccccc;
bottom: -6rpx;
right: 74rpx;
height: 4rpx;
color: #fff;
}
}
.time_list {
position: absolute;
bottom: 28rpx;
left: 72rpx;
font-family: PingFang-SC;
font-size: 15rpx;
color: #cccccc;
width: 540rpx;
justify-content: space-around;
}
.time {
position: absolute;
bottom: 22rpx;
right: 24rpx;
font-family: PingFang-SC;
font-size: 18rpx;
color: #cccccc;
}
}
.echart-component-full {
width: 690rpx;
height: 320rpx;
margin: 0rpx auto;
background-color: #fff;
border-radius: 30rpx;
padding: 35rpx 25rpx 25rpx 35rpx;
box-sizing: border-box;
position: relative;
}
page {

@ -11,9 +11,10 @@ import "./index.less";
interface Props {
series: any;
full: any;
time: any
}
function Index({ series, full }: Props) {
function Index({ series, full, time }: Props) {
const echartsRef = useRef<EchartsHandle>(null);
const [options, setOptions] = useState({
animation: false,
@ -49,24 +50,13 @@ function Index({ series, full }: Props) {
},
axisLabel: {
//坐标轴刻度标签的相关设置
color: "#cccccc",
fontSize: 8,
color: "#fff",
fontSize: 1,
},
axisTick: {
show: false,
},
data: [
"00:01",
"00:02",
"00:03",
"00:04",
"00:05",
"00:06",
"00:07",
"00:08",
"00:09",
"00:10",
],
data: [],
},
yAxis: {
type: "value",
@ -282,9 +272,25 @@ function Index({ series, full }: Props) {
// }
const level = [8, 7, 6, 5, 4, 3, 2];
const [isFull, setIsfull] = useState(false)
const [data, setData] = useState([
"00:01",
"00:02",
"00:03",
"00:04",
"00:05",
"00:06",
"00:07",
"00:08",
"00:09",
"00:10",
],)
const [newOptions, setNewOptions] = useState(options);
const updata = useCallback((res) => {
const updata = useCallback((res, times) => {
if (times.second == 0) {
return
}
// let option
// if (data) {
// option = JSON.parse(JSON.stringify(newParams))
@ -292,19 +298,41 @@ function Index({ series, full }: Props) {
// option = JSON.parse(JSON.stringify(options))
// }
let option = JSON.parse(JSON.stringify(options))
let datas = JSON.parse(JSON.stringify(data))
if (times.min > 0 || times.second > 10) {
datas.splice(0, 1)
datas.push(formatTime(times))
}
setData(JSON.parse(JSON.stringify(datas)))
// option.xAxis.data = data
option.series = JSON.parse(JSON.stringify(res))
// 更新图表数据
setNewOptions(option);
}, []);
}, [data]);
function formatTime(times: any) {
let mins
if (times.min < 10) {
mins = '0' + times.min;
} else {
mins = times.min;
}
let secs
if (times.second < 10) {
secs = '0' + times.second;
} else {
secs = times.second;
}
return `${mins.toString()}:${secs.toString()}`;
}
const cancelFull = useCallback((res) => {
// let option = JSON.parse(JSON.stringify(newParams))
// setNewOptions(option)
// console.log(data, 88888);
// data = !data
// console.log(data, 88888);
full()
}, [])
setIsfull(!isFull)
}, [isFull])
@ -313,14 +341,14 @@ function Index({ series, full }: Props) {
}, [newOptions]);
useEffect(() => {
updata(series);
updata(series, time);
}, [series]);
return (
<Block>
<View id="box" className="echart-component">
<View id='box' className={isFull ? "echart-component-full" : "echart-component"}>
<Echarts
force-use-old-canvas="false"
force-use-old-canvas='false'
echarts={echarts}
option={options}
ref={echartsRef}
@ -328,23 +356,30 @@ function Index({ series, full }: Props) {
// style自定义设置echarts宽高
style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
/>
<View className="box_background">
<View className='box_background'>
<Image
className="full"
className='full'
src={require("@/img/full-scran.png")}
onClick={cancelFull}
></Image>
<View className="power"></View>
<View className='power'></View>
{level.map((item) => (
<View className="line" key={item}>
<View className="number">{item}</View>
<View className="bottom_line"></View>
<View className='line' key={item}>
<View className='number'>{item}</View>
<View className='bottom_line'></View>
</View>
))}
<View className="line">
<View className="number">1</View>
<View className='line'>
<View className='number'>1</View>
</View>
<View className='time_list flex'>
{
data.map((times, index) => (
<View key={index}>{times}</View>
))
}
</View>
<View className="time"></View>
<View className='time'></View>
</View>
</View>
</Block>

Loading…
Cancel
Save