fix: 曲线图上方数据界面优化完善。

This commit is contained in:
tianyongbao
2026-01-19 21:50:32 +08:00
parent 9fc7f3aab5
commit 718cbce591
3 changed files with 122 additions and 35 deletions

View File

@@ -510,7 +510,7 @@ function touchMove(e: any) {
} }
.header { .header {
height: 44px; height: 34px;
background: #fff; background: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -545,16 +545,16 @@ function touchMove(e: any) {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 8px 15px; padding: 2px 5px 2px 15px;
background: #fff; background: #fff;
flex-shrink: 0; flex-shrink: 0;
height: 44px; height: 34px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.time-item { .time-item {
padding: 6px 20px; padding: 6px 20px;
margin: 0 8px; margin: 0 5px;
background: #f5f5f5; background: #f5f5f5;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;

View File

@@ -197,16 +197,9 @@
</view> </view>
</nut-config-provider> </nut-config-provider>
<nut-row class="m_t_20"> <nut-row class="m_t_20">
<view class="view_bet"> <view class="chart-header-row">
<view <view class="chart-title">
class="font_32 f_weight c_222" <text class="title-text">{{
:style="{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}"
>
{{
prDev === 1 prDev === 1
? "溶解氧" ? "溶解氧"
: prDev === 2 : prDev === 2
@@ -218,43 +211,35 @@
: prDev === 5 : prDev === 5
? "盐 度" ? "盐 度"
: "" : ""
}} }}</text>
</view> </view>
<view class="day-selector">
<view <view
:style="{ class="day-btn"
display: 'flex',
alignItems: 'center',
width: '50%',
justifyContent: 'center',
}"
>
<view
class="gridSmall font_26 c_222"
:class="{ active: dayDev === 1 }" :class="{ active: dayDev === 1 }"
@click="changeDay(1)" @click="changeDay(1)"
> >
1 1
</view> </view>
<view <view
class="gridSmall font_26 c_222" class="day-btn"
:class="{ active: dayDev === 3 }" :class="{ active: dayDev === 3 }"
@click="changeDay(3)" @click="changeDay(3)"
> >
3 3
</view> </view>
<view <view
class="gridSmall font_26 c_222" class="day-btn"
:class="{ active: dayDev === 7 }" :class="{ active: dayDev === 7 }"
@click="changeDay(7)" @click="changeDay(7)"
> >
7 7
</view> </view>
</view> </view>
<view :style="{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '12px', margin: '0 7px' }"> <view class="chart-actions">
<view @click="fullscreenChart" class="zoom-btn"> <text @click="fullscreenChart" class="action-link">放大</text>
放大 <text class="divider-dot">·</text>
</view> <text @click="changeShow" class="action-link">{{ setTitle }}</text>
<view @click="changeShow" class="hide-btn">{{ setTitle }}</view>
</view> </view>
</view> </view>
<!-- <nut-col :span="8" class="font_32 f_weight c_222"> <!-- <nut-col :span="8" class="font_32 f_weight c_222">
@@ -889,11 +874,14 @@ function getDeviceList() {
: res.data.listDetector[0].id : res.data.listDetector[0].id
? res.data.listDetector[0].id ? res.data.listDetector[0].id
: undefined; : undefined;
// 初始化 serialNum
if (res.data.listDetector[0].serialNum) {
paramsHistory.value.serialNum = res.data.listDetector[0].serialNum;
}
if (doDev.value) { if (doDev.value) {
// 根据当前选中的设备设置 serialNum
const currentDevice = res.data.listDetector.find((item: any) => item.id === doDev.value);
if (currentDevice && currentDevice.serialNum) {
paramsHistory.value.serialNum = currentDevice.serialNum;
}
if (!oxyIds.includes(doDev.value)) { if (!oxyIds.includes(doDev.value)) {
doDev.value = res.data.listDetector[0].id doDev.value = res.data.listDetector[0].id
? res.data.listDetector[0].id ? res.data.listDetector[0].id
@@ -1684,6 +1672,16 @@ function hideTour(a) {
} }
// 刷新 // 刷新
function refresh() { function refresh() {
// 确保重新设置图表尺寸
const sysInfo = Taro.getSystemInfoSync();
let cWidth = (700 / 750) * sysInfo.screenWidth;
let cHeight = (220 / 750) * sysInfo.windowHeight;
let pixelRatio = sysInfo.pixelRatio;
chartConf.cWidth = cWidth;
chartConf.cHeight = cHeight;
chartConf.pixelRatio = pixelRatio;
// 重新加载设备列表和图表数据
getDeviceList(); getDeviceList();
} }
// 启停开关 // 启停开关
@@ -2062,6 +2060,89 @@ defineExpose({
background: #09b8c2; background: #09b8c2;
} }
// 优化后的图表标题行样式
.chart-header-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 15px;
gap: 15px;
}
.chart-title {
flex: 0 0 auto;
.title-text {
font-size: 32px;
font-weight: 600;
color: #222;
white-space: nowrap;
}
}
.day-selector {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0;
border-radius: 6px;
overflow: hidden;
border: 1px solid #e5e5e5;
.day-btn {
padding: 0 18px;
height: 36px;
line-height: 36px;
font-size: 26px;
color: #666;
background: #fff;
border-right: 1px solid #e5e5e5;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: all 0.2s ease;
&:last-child {
border-right: none;
}
&.active {
color: #fff;
background: linear-gradient(135deg, #09b8c2 0%, #07a5ae 100%);
font-weight: 500;
}
&:not(.active):active {
background: #f8f8f8;
}
}
}
.chart-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
.action-link {
font-size: 28px;
color: #1589E9;
white-space: nowrap;
cursor: pointer;
transition: opacity 0.2s ease;
&:active {
opacity: 0.7;
}
}
.divider-dot {
font-size: 20px;
color: #ccc;
margin: 0 2px;
}
}
.zoom-btn { .zoom-btn {
font-size: 28px; font-size: 28px;
white-space: nowrap; white-space: nowrap;

View File

@@ -735,6 +735,12 @@ Taro.useDidShow(() => {
if (mode.value == 1) { if (mode.value == 1) {
pond2(); pond2();
} }
// 刷新子组件数据
nextTick(() => {
if (pondChildInfo.value) {
pondChildInfo.value.refresh();
}
});
if (store.getUnLogin != 1 && store.getLoginStatus != 1) { if (store.getUnLogin != 1 && store.getLoginStatus != 1) {
// 位置解析 // 位置解析
// Taro.getLocation({ // Taro.getLocation({