fix: 设备分析下图表修改

src/api/iot/device.ts

@@ -275,7 +275,7 @@ export const getDeviceTopology = (modelId: string) => {
 
 /** 设备上下线 */
 export const getDeviceSession = (params: {deviceId: string, start: number, end: number}) => {
-  return request<IOT.API.DEVICE.Session[]>({
+  return request<IOT.API.DEVICE.Session>({
     url: '/deviceAnalysis/session',
     method: 'GET',
     params

src/controller/common/common.ts

@@ -2,11 +2,11 @@ import { delFile, getTransport } from '@/api/common'
 import { TransportEnum } from '@/enum/common'
 export class CommonController {
   static dataTypeByKeyMap = new Map([
-    ['LONG', 'longValue'],
-    ['STRING', 'stringValue'],
-    ['JSON', 'jsonValue'],
-    ['DOUBLE', 'doubleValue'],
-    ['BOOLEAN', 'booleanValue']
+    ['LONG', 'value'],
+    ['STRING', 'value'],
+    ['JSON', 'value'],
+    ['DOUBLE', 'value'],
+    ['BOOLEAN', 'value']
   ])
 
   static async getTransport () {

src/controller/iot/device.ts

@@ -7,6 +7,7 @@ import {
 import { DeviceMsgEnum, OtaStatusEnum } from '@/enum/common'
 import { message } from 'ant-design-vue'
 import dayjs from 'dayjs'
+import { number } from 'echarts'
 
 export class DeviceContriller {
   static deviceStatus = [
@@ -250,12 +251,16 @@ export class DeviceContriller {
     const { data, sum } = await getDeviceSession(params)
 
     return {
-      data: data.map(item => {
-        return {
-          ...item,
-          createAt: dayjs(item.createAt).format('YYYY/MM/DD')
-        }
-      }),
+      data: {
+        sessionEntities: data.sessionEntities.map(item => {
+          return {
+            ...item,
+            createAt: dayjs(item.createAt).format('YYYY/MM/DD')
+          }
+        }),
+        offlineNum: data.offlineNum,
+        onlineNum: data.onlineNum
+      },
       sum
     }
   }

src/pages/Iot/device/analysis.vue

@@ -20,7 +20,7 @@
               <a-select
                 v-model:value="state.searchDeviceLabel"
                 show-search
-                placeholder="请输入设备名"
+                placeholder="输入设备名检索设备"
                 :default-active-first-option="false"
                 style="width: 170px"
                 :show-arrow="false"
@@ -28,13 +28,14 @@
                 :not-found-content="null"
                 :options="state.dataSource"
                 @search="getDeviceLabel"
+                @change="selectDevice"
               >
                 <template v-if="state.fetching" #notFoundContent>
                   <a-spin size="small" />
                 </template>
               </a-select>
             </a-spin>
-            <a-range-picker  @change="changeRangePicker" format="YYYY/MM/DD"  />
+            <a-range-picker  v-model:value="times" @change="changeRangePicker"  />
           </a-space>
         </a-col>
         <a-col :span="24">
@@ -102,16 +103,20 @@ const state = reactive<{
   [key: string]: any
 }>({
   deviceId: '',
-  searchDeviceLabel: '',
+  searchDeviceLabel: null,
   start: 0,
   end: '',
   dataSource: [],
   attrSource: [],
   loading: false,
   analysisType: '',
-  spinning: false
+  spinning: false,
+  onlineNum: 0,
+  offlineNum: 0
 })
 
+const times = ref([dayjs(), dayjs()])
+
 state.deviceId = route.query.id as string
 
 const onTabChange = (key: 'session' | 'attr') => activeTabKey.value = key
@@ -121,75 +126,81 @@ watch(
   () => activeTabKey.value === 'session' ? getDeviceSession() : getDeviceAttr()
 )
 
-// 获取当前时间到半小时之前
-// const get
-
-// watch(
-//   () => state.attrSource,
-//   () => {
-//     nextTick(() => {
-//       Object.keys(state.attrSource).forEach(key => {
-//         const chartDom = document.getElementById('device-attr-' + key)
-
-//         const myChart = echarts.init(chartDom!)
-//         const attrItem = state.attrSource[key]
-
-//         attrEchartsJson.xAxis.data = (attrItem.map(item => dayjs(item.ts).format('HH:MM:ss')) || []) as never[]
-
-//         attrEchartsJson.series[0].data = attrItem.map(item => item.longValue)
-
-//         attrEchartsJson.title.text = key
-
-//         myChart.setOption(attrEchartsJson)
-//       })
-//       state.loading = false
-//     })
-//   }
-// )
-
-// watch(
-//   () => state.dataSource,
-//   () => {
-//     if (activeTabKey.value === 'session') {
-//       const chartDom = document.getElementById('device-session')
-//       const chartDomScatter = document.getElementById('device-session-scatter')
-//       const myChart = echarts.init(chartDom!)
-//       const chartDomScatterChart = echarts.init(chartDomScatter!)
-//       sessionEchartsJson.xAxis.data = state.dataSource.map(item => item.createAt) as never[]
-//       sessionEchartsJson.series[0].data = state.dataSource.map(item => item.sessionType === 'CONNECT' ? '上线' : '下线')
-
-//       const connectCount = state.dataSource.filter(item => item.sessionType === 'CONNECT').length
-//       const disconnectCount = state.dataSource.length - connectCount
-
-//       barOption.series[0].data = [
-//         {
-//           value: calculateAverage(connectCount),
-//           groupId: 'male'
-//         },
-//         {
-//           value: calculateAverage(disconnectCount),
-//           groupId: 'female'
-//         }
-//       ]
+// 获取设备属性分析数据
+watch(
+  () => state.attrSource,
+  () => {
+    nextTick(() => {
+      Object.keys(state.attrSource).forEach(key => {
+        const chartDom = document.getElementById('device-attr-' + key)
 
-//       scatterOption.series[0].data = state.dataSource.filter(item => item.sessionType === 'CONNECT').map(item => [0, connectCount])
+        const myChart = echarts.init(chartDom!)
+        const attrItem = state.attrSource[key]
 
-//       scatterOption.series[1].data = state.dataSource.filter(item => item.sessionType !== 'CONNECT').map(item => [1, disconnectCount])
+        attrEchartsJson.xAxis.data = (attrItem.map(item => dayjs(item.ts).format('HH:MM:ss')) || []) as never[]
 
-//       let currentOption = scatterOption
+        attrEchartsJson.series[0].data = attrItem.map(item => item.longValue)
 
-//       setInterval(function () {
-//         currentOption = currentOption === scatterOption ? barOption : scatterOption
-//         chartDomScatterChart.setOption(currentOption, true)
-//       }, 2000)
+        attrEchartsJson.title.text = key
 
-//       chartDomScatterChart.setOption(currentOption)
-//       myChart.setOption(sessionEchartsJson)
+        myChart.setOption(attrEchartsJson)
+      })
+      state.loading = false
+    })
+  }
+)
 
-//       state.loading = false
-//     }
-//   }
-// )
+// 获取上下线分析图表数据
+// state.dataSource
+watch(
+  () => state.deviceId,
+  () => {
+    setTimeout(() => {
+      if (activeTabKey.value === 'session') {
+        const chartDom = document.getElementById('device-session')
+        const chartDomScatter = document.getElementById('device-session-scatter')
+        console.log('chartDom:', chartDom)
+
+        const myChart = echarts.init(chartDom!)
+        const chartDomScatterChart = echarts.init(chartDomScatter!)
+        sessionEchartsJson.xAxis.data = state.dataSource.map(item => item.createAt) as never[]
+        sessionEchartsJson.series[0].data = state.dataSource.map(item => item.sessionType === 'CONNECT' ? '上线' : '下线')
+
+        const connectCount = state.dataSource.filter(item => item.sessionType === 'CONNECT').length
+        const disconnectCount = state.dataSource.length - connectCount
+
+        barOption.series[0].data = [
+          {
+            value: calculateAverage(connectCount),
+            groupId: 'male'
+          },
+          {
+            value: calculateAverage(disconnectCount),
+            groupId: 'female'
+          }
+        ]
+
+        sessionEchartsJson.legend.data = [`上线数量 ${state.onlineNum}`, `下线数量 ${state.offlineNum}`]
+
+        scatterOption.series[0].data = state.dataSource.filter(item => item.sessionType === 'CONNECT').map(item => [0, connectCount])
+
+        scatterOption.series[1].data = state.dataSource.filter(item => item.sessionType !== 'CONNECT').map(item => [1, disconnectCount])
+
+        let currentOption = scatterOption
+
+        setInterval(function () {
+          currentOption = currentOption === scatterOption ? barOption : scatterOption
+          chartDomScatterChart.setOption(currentOption, true)
+        }, 2000)
+
+        chartDomScatterChart.setOption(currentOption)
+        myChart.setOption(sessionEchartsJson)
+
+        state.loading = false
+      }
+    }, 3000)
+  }
+)
 
 watch(
   () => state.deviceId,
@@ -197,21 +208,21 @@ watch(
 )
 
 const changeRangePicker = (time) => {
-  const [startTime, endTime] = time
-
-  state.start = new Date(startTime).getTime()
-  state.end = new Date(endTime).getTime()
-
   activeTabKey.value === 'session' ? getDeviceSession() : getDeviceAttr()
 }
 
+const selectDevice = async (value: records) => {
+  const device = await DeviceContriller.byId(value)
+  state.deviceId = device.id
+  console.log('device:', state.deviceId)
+}
+
 const getDeviceLabel = async (val: string) => {
-  console.log('val:', val)
   if (!val) return
   state.spinning = true
   const { data } = await DeviceContriller.labelsByLabel(val)
   state.spinning = false
-  state.dataSource = data.map(item => ({ value: item, label: item }))
+  state.dataSource = data.map(item => ({ value: item.id, label: item.deviceLabel }))
   console.log(data)
 }
 
@@ -219,13 +230,16 @@ const getDeviceSession = async () => {
   if (!state.deviceId) return
   state.loading = true
   const { data } = await DeviceContriller.getSession({ deviceId: state.deviceId, start: state.start, end: state.end })
-  state.dataSource = data
+  state.dataSource = data.sessionEntities
+  state.offlineNum = data.offlineNum
+  state.onlineNum = data.onlineNum
 }
 
 const getDeviceAttr = async () => {
   if (!state.deviceId) return
   state.loading = true
-  const { data } = await DeviceContriller.getAttr({ deviceId: state.deviceId, start: state.start, end: state.end })
+
+  const { data } = await DeviceContriller.getAttr({ deviceId: state.deviceId, start: 1, end: state.end })
   state.attrSource = data
 }
 
@@ -237,7 +251,7 @@ const getDeviceList = async () => {
 }
 
 onMounted(() => {
-  getDeviceList()
+  // getDeviceList()
   if (state.deviceId) {
     getDeviceSession()
   }

src/pages/Iot/device/components/overview.vue

@@ -145,7 +145,7 @@ const ok = async () => {
 
 const getLiveData = async () => {
   const { data } = await DeviceContriller.getLiveData(deviceId)
-  state.liveDataSource = [{ key: 'participant', label: '耐心', dataUnit: '%', ts: 19283831323218 }]
+  state.liveDataSource = data
 }
 
 const { start } = useScheduler(getLiveData, 1000)

src/pages/Iot/device/json/echartsJson.ts

@@ -6,7 +6,7 @@ export const sessionEchartsJson = {
     trigger: 'axis'
   },
   legend: {
-    data: []
+    data: ['上线数量', '下线数量']
   },
   grid: {
     left: '3%',
@@ -30,7 +30,7 @@ export const sessionEchartsJson = {
   },
   series: [
     {
-      name: '上线',
+      name: 'offlineNum',
       type: 'line',
       stack: 'Total',
       data: ['上线', '下线', '下线', '上线']

src/type/iot.d.ts

@@ -226,12 +226,16 @@ declare namespace IOT {
 
       interface Session {
         'id': string,
-        'createAt': 1683171293012,
-        'updateAt': string,
-        'deviceId': string,
-        'sessionType': 'CONNECT' | 'DISCONNECT',
-        'connectTime': string,
-        'activityTime': string
+        offlineNum: number
+        onlineNum: number
+        sessionEntities: {
+          'createAt': 1683171293012,
+          'updateAt': string,
+          'deviceId': string,
+          'sessionType': 'CONNECT' | 'DISCONNECT',
+          'connectTime': string,
+          'activityTime': string
+        }[]
       }
 
       interface Attr {