监控详情调整为mqtt

src/views/oli-connection/monitoring-board/chart.vue

@@ -203,41 +203,6 @@ function genderIntervalArr(init: boolean = false) {
   }
 }
 
-// function genderIntervalArr(init: boolean = false) {
-//   const values: number[] = []
-
-//   for (const [key, value] of Object.entries(selectedDimension.value)) {
-//     if (value) {
-//       values.push(...(chartData.value[key]?.map((item) => item.value) ?? []))
-//     }
-//   }
-
-//   const maxVal = values.length === 0 ? 10000 : Math.max(...values)
-//   const minVal = values.length === 0 ? 0 : Math.min(...values) > 0 ? 0 : Math.min(...values)
-
-//   const maxDigits = (Math.floor(maxVal) + '').length
-//   const minDigits = minVal === 0 ? 0 : (Math.floor(Math.abs(minVal)) + '').length
-
-//   const interval = Math.max(maxDigits, minDigits)
-
-//   maxInterval.value = interval
-//   minInterval.value = minDigits
-
-//   intervalArr.value = [0]
-//   for (let i = 1; i <= interval; i++) {
-//     intervalArr.value.push(Math.pow(10, i))
-//   }
-
-//   if (!init) {
-//     chart?.setOption({
-//       yAxis: {
-//         min: -minInterval.value,
-//         max: maxInterval.value
-//       }
-//     })
-//   }
-// }
-
 function chartInit() {
   if (!chart) return
 

src/views/oli-connection/monitoring/detail.vue

@@ -16,11 +16,12 @@ import { neonColors } from '@/utils/td-color'
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { cancelAllRequests, IotStatApi } from '@/api/pms/stat'
-import { Dimensions, formatIotValue, HeaderItem, useSocketBus } from '@/utils/useSocketBus'
+import { Dimensions, formatIotValue, HeaderItem } from '@/utils/useSocketBus'
 import { rangeShortcuts } from '@/utils/formatTime'
 import { useFullscreen } from '@vueuse/core'
 import { snapdom } from '@zumer/snapdom'
 import { ElMessage } from 'element-plus'
+import { useMqtt } from '@/utils/useMqtt'
 
 const { query } = useRoute()
 
@@ -31,18 +32,17 @@ const data = ref({
   ifInline: query.ifInline === '3',
   dept: query.dept || '',
   vehicle: query.vehicle || '',
-  carOnline: query.carOnline === 'true'
+  carOnline: query.carOnline === 'true',
+  mqttUrl: query.mqttUrl || ''
 })
 
-const { open: connect, onAny, close } = useSocketBus(data.value.deviceCode as string)
-
-onAny((msg) => {
-  if (!Array.isArray(msg) || msg.length === 0) return
+const { connect, destroy, isConnected, subscribe } = useMqtt()
 
+const handleMessageUpdate = (_topic: string, data: any) => {
   const valueMap = new Map<string, number>()
 
-  for (const item of msg) {
-    const { identity, modelName, readTime, logValue } = item
+  for (const item of data) {
+    const { id: identity, value: logValue, remark } = item
 
     const value = logValue ? Number(logValue) : 0
 
@@ -50,9 +50,11 @@ onAny((msg) => {
       valueMap.set(identity, value)
     }
 
+    const modelName = dimensions.value.find((item) => item.identifier === identity)?.name
+
     if (modelName && chartData.value[modelName]) {
       chartData.value[modelName].push({
-        ts: dayjs(readTime).valueOf(),
+        ts: dayjs.unix(remark).valueOf(),
         value
       })
 
@@ -73,28 +75,35 @@ onAny((msg) => {
   updateDimensions(gatewayDimensions.value)
   updateDimensions(carDimensions.value)
 
-  // 3️⃣ 统一一次调用
   genderIntervalArr()
+}
+
+watch(isConnected, (newVal) => {
+  if (newVal) {
+    subscribe(data.value.mqttUrl as string)
+  }
 })
 
+// const { open: connect, onAny, close } = useSocketBus(data.value.deviceCode as string)
+
 // onAny((msg) => {
 //   if (!Array.isArray(msg) || msg.length === 0) return
 
-//   const valueMap = new Map<string, { value: string; isText: boolean; suffix?: string }>()
+//   const valueMap = new Map<string, number>()
 
 //   for (const item of msg) {
 //     const { identity, modelName, readTime, logValue } = item
 
-//     const { value, isText, suffix } = formatIotValue(logValue)
+//     const value = logValue ? Number(logValue) : 0
 
 //     if (identity) {
-//       valueMap.set(identity, { value, isText, suffix })
+//       valueMap.set(identity, value)
 //     }
 
 //     if (modelName && chartData.value[modelName]) {
 //       chartData.value[modelName].push({
 //         ts: dayjs(readTime).valueOf(),
-//         value: Number(value)
+//         value
 //       })
 
 //       updateSingleSeries(modelName)
@@ -105,9 +114,7 @@ onAny((msg) => {
 //     list.forEach((item) => {
 //       const v = valueMap.get(item.identifier)
 //       if (v !== undefined) {
-//         item.value = v.value
-//         item.suffix = v.suffix
-//         item.isText = v.isText
+//         item.value = v
 //       }
 //     })
 //   }
@@ -245,62 +252,6 @@ async function loadDimensions() {
   }
 }
 
-// async function updateDimensionValues() {
-//   if (!query.id) return
-
-//   try {
-//     // 1. 并行获取最新数据
-//     const [gatewayRes, carRes] = await Promise.all([
-//       IotDeviceApi.getIotDeviceTds(Number(query.id)),
-//       IotDeviceApi.getIotDeviceZHBDTds(Number(query.id))
-//     ])
-
-//     const newValueMap = new Map<string, { value: string; suffix?: string; isText?: boolean }>()
-
-//     const addToMap = (data: any[]) => {
-//       if (!data) return
-//       data.forEach((item) => {
-//         if (item.identifier) {
-//           const { value, suffix, isText } = formatIotValue(item.value)
-//           newValueMap.set(item.identifier, { value, suffix, isText })
-//         }
-//       })
-//     }
-
-//     addToMap(gatewayRes as any[])
-//     addToMap(carRes as any[])
-
-//     dimensions.value.forEach((item) => {
-//       if (newValueMap.has(item.identifier)) {
-//         const { value, suffix, isText } = newValueMap.get(item.identifier) ?? {}
-//         item.value = value ?? ''
-//         item.suffix = suffix
-//         item.isText = isText
-//       }
-//     })
-
-//     gatewayDimensions.value.forEach((item) => {
-//       if (newValueMap.has(item.identifier)) {
-//         const { value, suffix, isText } = newValueMap.get(item.identifier) ?? {}
-//         item.value = value ?? ''
-//         item.suffix = suffix
-//         item.isText = isText
-//       }
-//     })
-
-//     carDimensions.value.forEach((item) => {
-//       if (newValueMap.has(item.identifier)) {
-//         const { value, suffix, isText } = newValueMap.get(item.identifier) ?? {}
-//         item.value = value ?? ''
-//         item.suffix = suffix
-//         item.isText = isText
-//       }
-//     })
-//   } catch (error) {
-//     console.error('Failed to update dimension values:', error)
-//   }
-// }
-
 const selectedDate = ref<string[]>([
   dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss'),
   dayjs().format('YYYY-MM-DD HH:mm:ss')
@@ -319,11 +270,6 @@ let minInterval = ref(0)
 const chartRef = ref<HTMLDivElement | null>(null)
 let chart: echarts.ECharts | null = null
 
-// const genderIntervalArrDebounce = useDebounceFn(
-//   (init: boolean = false) => genderIntervalArr(init),
-//   300
-// )
-
 function genderIntervalArr(init: boolean = false) {
   const values: number[] = []
 
@@ -516,57 +462,19 @@ function updateSingleSeries(name: string) {
 
 const lastTsMap = ref<Record<Dimensions['name'], number>>({})
 
-// async function fetchIncrementData() {
-//   for (const item of dimensions.value) {
-//     const { identifier, name } = item
-
-//     const lastTs = lastTsMap.value[name]
-//     if (!lastTs) continue
-
-//     item.response = true
-
-//     IotStatApi.getDeviceInfoChart(
-//       data.value.deviceCode,
-//       identifier,
-//       dayjs(lastTs).format('YYYY-MM-DD HH:mm:ss'),
-//       dayjs().format('YYYY-MM-DD HH:mm:ss')
-//     )
-//       .then((res) => {
-//         if (!res.length) return
-
-//         const sorted = res
-//           .sort((a, b) => a.ts - b.ts)
-//           .map((item) => ({ ts: item.ts, value: item.value }))
-//         // push 到本地
-//         chartData.value[name].push(...sorted)
-//         // 更新 lastTs
-//         lastTsMap.value[identifier] = sorted.at(-1).ts
-
-//         // 更新图表
-//         updateSingleSeries(name)
-//       })
-//       .finally(() => {
-//         item.response = false
-//       })
-//   }
-// }
+const chartLoading = ref(false)
 
-// const timer = ref<NodeJS.Timeout | null>(null)
+const token = ref('')
 
-// function startAutoFetch() {
-//   timer.value = setInterval(() => {
-//     updateDimensionValues()
-//     fetchIncrementData()
-//   }, 10000)
-// }
+async function getToken() {
+  const res = await IotDeviceApi.getToken()
 
-// function stopAutoFetch() {
-//   cancelAllRequests()
-//   if (timer.value) clearInterval(timer.value)
-//   timer.value = null
-// }
+  token.value = res
+}
 
-const chartLoading = ref(false)
+onMounted(() => {
+  getToken()
+})
 
 async function initLoadChartData(real_time: boolean = true) {
   if (!dimensions.value.length) return
@@ -603,18 +511,13 @@ async function initLoadChartData(real_time: boolean = true) {
       updateSingleSeries(name)
 
       chartLoading.value = false
-
-      // if (selectedDimension.value[name]) {
-      //   genderIntervalArr()
-      // }
     } finally {
       item.response = false
     }
   }
 
   if (real_time) {
-    // startAutoFetch()
-    connect()
+    connect(`wss://aims.deepoil.cc/mqtt`, { password: token.value }, handleMessageUpdate)
   }
 }
 
@@ -635,8 +538,7 @@ function reset() {
       dayjs().format('YYYY-MM-DD HH:mm:ss')
     ]
 
-    close()
-    // stopAutoFetch()
+    destroy()
     if (chart) chart.clear()
     initfn(false)
   })
@@ -644,7 +546,7 @@ function reset() {
 
 function handleDateChange() {
   cancelAllRequests().then(() => {
-    close()
+    destroy()
     // stopAutoFetch()
     if (chart) chart.clear()
     initfn(false, false)
@@ -705,8 +607,7 @@ const maxmin = computed(() => {
 })
 
 onUnmounted(() => {
-  // stopAutoFetch()
-  close()
+  destroy()
 
   window.removeEventListener('resize', () => {
     if (chart) chart.resize()