图表缩放显示

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<AlarmType[]>({ url: `/gas/alarm-type/listAll` })
   }
 }

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 // 持有人姓名
 }
 

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)
     }
   },
   {

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

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<MarkerData | null>()
-const historicalData = ref<tdStruct[]>([])
+const historicalData = ref<tdStruct2[]>([])
 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<EChartsOption>(() => ({
-//   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<EChartsOption>(() => ({
-  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<EChartsOption>(() => {
+  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

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-告警(红色)