From e8ecc9e289e10ee3403bb42a913c29412435a723 Mon Sep 17 00:00:00 2001 From: xh <11675084@qq.com> Date: Wed, 29 Oct 2025 13:47:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=BC=A9=E6=94=BE=E6=98=BE?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/api/gas/alarmtype/index.ts | 4 + web/src/api/gas/tdengine/index.ts | 2 +- web/src/components/Echart/src/Echart.vue | 3 +- web/src/store/modules/handDetector.ts | 7 +- .../HandDevice/Home/components/HistoricalCurve.vue | 226 +++++++++------------ .../Home/components/services/fence.service.ts | 2 +- 6 files changed, 109 insertions(+), 135 deletions(-) diff --git a/web/src/api/gas/alarmtype/index.ts b/web/src/api/gas/alarmtype/index.ts index 57701e4..c0bd01e 100644 --- a/web/src/api/gas/alarmtype/index.ts +++ b/web/src/api/gas/alarmtype/index.ts @@ -47,5 +47,9 @@ export const AlarmTypeApi = { // 导出GAS警报类型 Excel exportAlarmType: async (params) => { return await request.download({ url: `/gas/alarm-type/export-excel`, params }) + }, + // 查询所有GAS警报类型 + listAll: async () => { + return await request.get({ url: `/gas/alarm-type/listAll` }) } } diff --git a/web/src/api/gas/tdengine/index.ts b/web/src/api/gas/tdengine/index.ts index c067fd1..c290d76 100644 --- a/web/src/api/gas/tdengine/index.ts +++ b/web/src/api/gas/tdengine/index.ts @@ -15,7 +15,7 @@ export interface tdStruct { value?: number // 数据 longitude?: number // 经度 latitude?: number // 纬度 - ts?: string | number // 更新时间 + ts: number // 更新时间 name?: string // 持有人姓名 } diff --git a/web/src/components/Echart/src/Echart.vue b/web/src/components/Echart/src/Echart.vue index bf22b86..78573e1 100644 --- a/web/src/components/Echart/src/Echart.vue +++ b/web/src/components/Echart/src/Echart.vue @@ -12,6 +12,7 @@ import { useDesign } from '@/hooks/web/useDesign' import 'echarts/lib/component/markPoint' import 'echarts/lib/component/markLine' import 'echarts/lib/component/markArea' +import 'echarts/lib/component/dataZoom' defineOptions({ name: 'EChart' }) @@ -71,7 +72,7 @@ watch( () => options.value, (options) => { if (echartRef) { - echartRef?.setOption(options) + echartRef?.setOption(options,true) } }, { diff --git a/web/src/store/modules/handDetector.ts b/web/src/store/modules/handDetector.ts index 82a97b7..54d8489 100644 --- a/web/src/store/modules/handDetector.ts +++ b/web/src/store/modules/handDetector.ts @@ -61,11 +61,8 @@ export const useHandDetectorStore = defineStore('handDetector', { }, async getAllAlarmTypes(refresh: boolean = false) { if (refresh || this.alarmTypes.length === 0) { - const data = await AlarmTypeApi.getAlarmTypePage({ - pageNo: 1, - pageSize: 100 - }) - this.alarmTypes = data.list + const data = await AlarmTypeApi.listAll() + this.alarmTypes = data return this.alarmTypes } else { return this.alarmTypes diff --git a/web/src/views/HandDevice/Home/components/HistoricalCurve.vue b/web/src/views/HandDevice/Home/components/HistoricalCurve.vue index d791ce7..c62b601 100644 --- a/web/src/views/HandDevice/Home/components/HistoricalCurve.vue +++ b/web/src/views/HandDevice/Home/components/HistoricalCurve.vue @@ -74,10 +74,14 @@ import Echart from '@/components/Echart/src/Echart.vue' import { ElMessage } from 'element-plus' import dayjs from 'dayjs' +export type tdStruct2 = tdStruct & { + timeStr: string +} + const drawer = ref(false) const loading = ref(false) const currentMarker = ref() -const historicalData = ref([]) +const historicalData = ref([]) async function getData(row: MarkerData) { try { const data = await tdengineApi.getHistoricalSn({ @@ -87,13 +91,14 @@ async function getData(row: MarkerData) { }) if (!data || data.length === 0) { ElMessage.error('没有数据') - // drawer.value = false - return + historicalData.value = [] } - historicalData.value = data.map((item) => ({ - ...item, - ts: dayjs(item.ts).format('YYYY-MM-DD HH:mm:ss') - })) + historicalData.value = data + .sort((a, b) => a.ts - b.ts) + .map((item) => ({ + ...item, + timeStr: dayjs(item.ts).format('YYYY-MM-DD HH:mm:ss') + })) } catch (error) { // ElMessage.error(error.message) } finally { @@ -123,68 +128,8 @@ const reset = () => { ] } -// const battery = computed(() => { -// let value: number[] = [] -// let time: string[] = [] -// historicalData.value -// .filter((item) => item.battery !== '') -// .forEach((item) => { -// value.push(Number(item.battery)) -// time.push(item.ts as string) -// }) -// return { -// value, -// time -// } -// }) -// const batteryLineOptions = computed(() => ({ -// title: { -// text: '', -// left: 'center' -// }, -// xAxis: { -// data: battery.value.time, -// boundaryGap: false, -// axisTick: { -// show: false -// } -// }, -// grid: { -// left: 20, -// right: 20, -// bottom: 20, -// top: 10, -// containLabel: true -// }, -// tooltip: { -// trigger: 'axis', -// axisPointer: { -// type: 'cross' -// }, -// padding: [5, 10] -// }, -// yAxis: { -// axisTick: { -// show: false -// } -// }, -// // legend: { -// // // data: [], -// // top: 50 -// // }, -// series: [ -// { -// name: '电池电压', -// smooth: true, -// type: 'line', -// data: battery.value.value -// } -// ] -// })) - const gasDateTimeRange = ref(['', '']) -const handleDateChange = (dates: string[]) => { - // gasDateTimeRange.value = dates +const handleDateChange = () => { if (!currentMarker.value) { return } @@ -209,7 +154,7 @@ const gas = computed(() => { value.push(null) } - time.push(item.ts as string) + time.push(item.timeStr) }) return { @@ -218,71 +163,98 @@ const gas = computed(() => { time } }) -const gasLineOptions = computed(() => ({ - title: { - text: '', - left: 'center' - }, - xAxis: { - data: gas.value.time, - boundaryGap: false, - axisTick: { - show: false - } - }, - grid: { - left: 20, - right: 20, - bottom: 20, - top: 80, - containLabel: true - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross' +const gasLineOptions = computed(() => { + const option: EChartsOption = { + title: { + text: '', + left: 'center' }, - padding: [5, 10] - }, - yAxis: [ - { + xAxis: { + data: gas.value.time, + boundaryGap: false, axisTick: { show: false } }, - { - axisTick: { - show: false - } - } - ], - legend: { - // data: [], - top: 50 - }, - series: [ - { - name: currentMarker.value?.gasChemical + '浓度', - smooth: true, - type: 'line', - data: gas.value.value, - animationDuration: 2800, - symbol: 'none', - animationEasing: 'cubicInOut' + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross' + }, + padding: [5, 10] }, - { - name: '电池电量', - smooth: true, - type: 'line', - yAxisIndex: 1, - symbol: 'none', - data: gas.value.battery, - animationDuration: 2800, - animationEasing: 'cubicInOut' - } - ] -})) + yAxis: [ + { + axisTick: { + show: false + } + }, + { + axisTick: { + show: false + } + } + ], + legend: { + // data: [], + top: 50 + }, + series: [ + { + name: currentMarker.value?.gasChemical + '浓度', + smooth: true, + type: 'line', + data: gas.value.value, + animationDuration: 2800, + symbol: 'none', + + animationEasing: 'cubicInOut' + }, + { + name: '电池电量', + smooth: true, + type: 'line', + yAxisIndex: 1, + symbol: 'none', + data: gas.value.battery, + animationDuration: 2800, + animationEasing: 'cubicInOut' + } + ] + } + const grid = { + left: 20, + right: 20, + bottom: 10, + top: 80, + containLabel: true + } + if (gas.value.time.length >= 100) { + grid.bottom = 50 + + // 缩放 + option.dataZoom = [ + { + type: 'slider', + xAxisIndex: [0], + bottom: 10, + start: 0, + end: 100 + }, + { + type: 'inside', + xAxisIndex: [0], + start: 0, + end: 100 + } + ] + } else { + } + option.grid = grid + + return option +}) defineExpose({ openDrawer diff --git a/web/src/views/HandDevice/Home/components/services/fence.service.ts b/web/src/views/HandDevice/Home/components/services/fence.service.ts index c8fe3c6..e7be9b8 100644 --- a/web/src/views/HandDevice/Home/components/services/fence.service.ts +++ b/web/src/views/HandDevice/Home/components/services/fence.service.ts @@ -77,7 +77,7 @@ export class FenceService { private createFenceStyle(fence: FenceData): Style { let strokeColor = '#1890ff' // let fillColor = 'rgba(24, 144, 255, 0.1)' - let strokeWidth = 2 + let strokeWidth = 4 // 根据围栏状态设置样式 // 状态：0-禁用(绿色)，1-启用(橙色)，2-告警(红色)