fix: 功能显示优化。
This commit is contained in:
@@ -60,6 +60,9 @@ let chartInstance: any = null;
|
||||
// 接收的参数
|
||||
const serialNum = ref('');
|
||||
const dataType = ref(1); // 1-溶解氧, 2-水温, 3-饱和度, 4-PH, 5-盐度
|
||||
const oxyWarnLower = ref<number | null>(null);
|
||||
const tempWarnUpper = ref<number | null>(null);
|
||||
const tempWarnLower = ref<number | null>(null);
|
||||
|
||||
// 屏幕尺寸
|
||||
const screenWidth = ref(375);
|
||||
@@ -105,6 +108,9 @@ onMounted(() => {
|
||||
serialNum.value = params.serialNum || '';
|
||||
dataType.value = Number(params.dataType) || 1;
|
||||
dayType.value = Number(params.dayType) || 1;
|
||||
oxyWarnLower.value = params.oxyWarnLower ? Number(params.oxyWarnLower) : null;
|
||||
tempWarnUpper.value = params.tempWarnUpper ? Number(params.tempWarnUpper) : null;
|
||||
tempWarnLower.value = params.tempWarnLower ? Number(params.tempWarnLower) : null;
|
||||
|
||||
// 设置标题
|
||||
const titles = ['', '溶解氧曲线图', '水温曲线图', '饱和度曲线图', 'PH曲线图', '盐度曲线图'];
|
||||
@@ -221,6 +227,34 @@ function drawChart() {
|
||||
|
||||
const xAxisData: string[] = [];
|
||||
const seriesData: number[] = [];
|
||||
let series: any[] = [];
|
||||
|
||||
// 根据数据类型添加告警线
|
||||
if (dataType.value === 1 && oxyWarnLower.value) {
|
||||
series.push({
|
||||
name: '告警下限',
|
||||
data: [],
|
||||
color: '#c12e34',
|
||||
lineType: 'dash',
|
||||
});
|
||||
} else if (dataType.value === 2) {
|
||||
if (tempWarnLower.value) {
|
||||
series.push({
|
||||
name: '告警下限',
|
||||
data: [],
|
||||
color: '#c12e34',
|
||||
lineType: 'dash',
|
||||
});
|
||||
}
|
||||
if (tempWarnUpper.value) {
|
||||
series.push({
|
||||
name: '告警上限',
|
||||
data: [],
|
||||
color: '#e098c7',
|
||||
lineType: 'dash',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
chartData.value.forEach((item: any) => {
|
||||
const timeStr = item.time || item.createTime || '';
|
||||
@@ -238,8 +272,25 @@ function drawChart() {
|
||||
}
|
||||
const value = item[fieldName];
|
||||
seriesData.push(value !== null && value !== undefined ? Number(value) : 0);
|
||||
|
||||
// 填充告警线数据
|
||||
if (dataType.value === 1 && oxyWarnLower.value) {
|
||||
series[0].data.push(oxyWarnLower.value);
|
||||
} else if (dataType.value === 2) {
|
||||
let idx = 0;
|
||||
if (tempWarnLower.value) {
|
||||
series[idx].data.push(tempWarnLower.value);
|
||||
idx++;
|
||||
}
|
||||
if (tempWarnUpper.value) {
|
||||
series[idx].data.push(tempWarnUpper.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 添加主数据系列
|
||||
series.unshift({ name: seriesName, data: seriesData });
|
||||
|
||||
Taro.nextTick(() => {
|
||||
const env = Taro.getEnv();
|
||||
|
||||
@@ -258,7 +309,7 @@ function drawChart() {
|
||||
width: cWidth,
|
||||
height: cHeight,
|
||||
categories: xAxisData,
|
||||
series: [{ name: seriesName, data: seriesData }],
|
||||
series: series,
|
||||
pixelRatio: 1,
|
||||
dataPointShape: false,
|
||||
animation: true,
|
||||
@@ -310,7 +361,7 @@ function drawChart() {
|
||||
width: cWidth * pixelRatio,
|
||||
height: cHeight * pixelRatio,
|
||||
categories: xAxisData,
|
||||
series: [{ name: seriesName, data: seriesData }],
|
||||
series: series,
|
||||
pixelRatio: pixelRatio,
|
||||
dataPointShape: false,
|
||||
animation: true,
|
||||
@@ -350,6 +401,7 @@ function drawChart() {
|
||||
<style lang="scss">
|
||||
.chart-fullscreen-page {
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
@@ -343,9 +343,7 @@
|
||||
@touchmove="moveCandle"
|
||||
:style="{
|
||||
width: chartConf.cWidth + 'px',
|
||||
height: chartConf.cHeight + 'px',
|
||||
position: (visControl || alertShow) ? 'absolute' : 'relative',
|
||||
left: (visControl || alertShow) ? '-9999px' : '0'
|
||||
height: chartConf.cHeight + 'px'
|
||||
}"
|
||||
></canvas>
|
||||
<nut-empty description="暂无数据" v-else>
|
||||
@@ -726,11 +724,7 @@ const props = defineProps({
|
||||
required: true,
|
||||
default: 1,
|
||||
},
|
||||
// 公告弹窗是否打开
|
||||
noticeOpen: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
});
|
||||
const pondDeviceRes = ref<any>();
|
||||
const emit = defineEmits(["getPondInfo", "getRes", "render", "addDevice"]);
|
||||
@@ -965,7 +959,7 @@ function fullscreenChart() {
|
||||
|
||||
// 跳转到全屏图表页面
|
||||
Taro.navigateTo({
|
||||
url: `/components/other/chartFullscreen?serialNum=${serialNum}&dataType=${prDev.value}&dayType=${dayDev.value}`
|
||||
url: `/components/other/chartFullscreen?serialNum=${serialNum}&dataType=${prDev.value}&dayType=${dayDev.value}&oxyWarnLower=${oxyWarnLower.value || ''}&tempWarnUpper=${tempWarnUpper.value || ''}&tempWarnLower=${tempWarnLower.value || ''}`
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -307,7 +307,6 @@
|
||||
@addDevice="addDevice"
|
||||
ref="pondChildInfo"
|
||||
type="1"
|
||||
:noticeOpen="noticeOpen"
|
||||
/>
|
||||
</nut-col>
|
||||
</nut-row>
|
||||
|
||||
Reference in New Issue
Block a user