diff --git a/src/components/other/chartFullscreen.vue b/src/components/other/chartFullscreen.vue index 6232778..cf03ef6 100644 --- a/src/components/other/chartFullscreen.vue +++ b/src/components/other/chartFullscreen.vue @@ -60,6 +60,9 @@ let chartInstance: any = null; // 接收的参数 const serialNum = ref(''); const dataType = ref(1); // 1-溶解氧, 2-水温, 3-饱和度, 4-PH, 5-盐度 +const oxyWarnLower = ref(null); +const tempWarnUpper = ref(null); +const tempWarnLower = ref(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() {