feat: 设备分析图标

src/controller/iot/device.ts

@@ -6,6 +6,7 @@ import {
 } from '@/api/iot/device'
 import { DeviceMsgEnum } from '@/enum/common'
 import { message } from 'ant-design-vue'
+import dayjs from 'dayjs'
 
 export class DeviceContriller {
   static deviceStatus = [
@@ -213,7 +214,17 @@ export class DeviceContriller {
   }
 
   static async getSession (params: {deviceId: string, start: number, end: number}) {
-    return await getDeviceSession(params)
+    const { data, sum } = await getDeviceSession(params)
+
+    return {
+      data: data.map(item => {
+        return {
+          ...item,
+          createAt: dayjs(item.createAt).format('YYYY/MM/DD')
+        }
+      }),
+      sum
+    }
   }
 
   static async getAttr (params: {deviceId: string, start: number, end: number}) {

src/layout/user.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="user" >
-
     <a-dropdown>
         <a-badge :count="0">
           <a-space>
             <a-avatar shape="round" :src="ava"  style="cursor: pointer;" />
             <div class="user-name" >蛟龙云</div>
           </a-space>
-
     </a-badge>
 
     <template #overlay>
@@ -32,6 +30,5 @@ const ava = require('@/assets/logo.png')
 .user-name {
   font: 16px 'Italiana', sans-serif;
   text-transform: lowercase;
-
 }
 </style>

src/pages/Iot/device/index.vue

@@ -135,22 +135,34 @@
     :open="state.analysisVisible"
     @cancel="state.analysisVisible = false"
     @ok="state.analysisVisible = false"
+    style="width: 700px;"
   >
-    <a-row>
-      <a-col>
+    <a-row :gutter="[8, 8]" style="margin-top: 20px;" >
+      <a-col :span="24" >
         <a-range-picker @change="changeRangePicker" format="YYYY/MM/DD"  />
       </a-col>
+      <a-spin :spinning="analysisState.loading" >
+      <a-col :span="24" v-if="state.analysisType === 'session'">
+        <div id="device-session" style="width: 600px;height: 400px;" ></div>
+      </a-col>
+      <a-col :span="24" v-else>
+        <div id="device-attr" style="width: 600px;height: 400px;" ></div>
+      </a-col>
+    </a-spin>
     </a-row>
   </modal-pro>
 </template>
 
 <script lang="ts" setup >
 import { DeviceContriller, ModelController } from '@/controller/index'
-import { onMounted, reactive, ref, toRefs, nextTick, computed } from 'vue'
+import { onMounted, reactive, ref, toRefs, nextTick, computed, watch } from 'vue'
 import { Form, message } from 'ant-design-vue'
 import { DeviceAuthTypeEnum } from '@/enum/common'
 import { useRouter } from 'vue-router'
 import { DownOutlined } from '@ant-design/icons-vue'
+import * as echarts from 'echarts'
+import { sessionEchartsJson, attrEchartsJson } from './json/echartsJson'
+import dayjs from 'dayjs'
 
 const useForm = Form.useForm
 const router = useRouter()
@@ -253,11 +265,35 @@ const deviceState = reactive({
 
 const analysisState = reactive({
   deviceId: '',
-  start: '',
+  start: 0,
   end: '',
-  dataSource: []
+  dataSource: [],
+  loading: false
 })
 
+watch(
+  () => analysisState.dataSource,
+  () => {
+    if (state.analysisType === 'session') {
+      const chartDom = document.getElementById('device-session')
+      const myChart = echarts.init(chartDom!)
+      sessionEchartsJson.xAxis.data = analysisState.dataSource.map(item => item.createAt)
+      myChart.setOption(sessionEchartsJson)
+      analysisState.loading = false
+    } else {
+      const chartDom = document.getElementById('device-attr')
+      const myChart = echarts.init(chartDom!)
+
+      attrEchartsJson.xAxis.data = analysisState.dataSource.map(item => item.keyLabel) || []
+      attrEchartsJson.series[0].data = analysisState.dataSource.map(item => item.longValue) || []
+      console.log('attrEchartsJson:', attrEchartsJson)
+
+      myChart.setOption(attrEchartsJson)
+      analysisState.loading = false
+    }
+  }
+)
+
 const { resetFields, validate, validateInfos } = useForm(searchState, {})
 
 const { resetFields: resetFieldsDevice, validate: validateDevice, validateInfos: validateInfosDeviceState } = useForm(deviceState, reactive({
@@ -267,15 +303,18 @@ const { resetFields: resetFieldsDevice, validate: validateDevice, validateInfos:
 
 const changeRangePicker = (time) => {
   const [startTime, endTime] = time
-  analysisState.start = startTime
-  analysisState.end = endTime
+  console.log(startTime, endTime)
+
+  analysisState.start = new Date(startTime).getTime()
+  analysisState.end = new Date(endTime).getTime()
+  state.analysisType === 'session' ? getDeviceSession() : getDeviceAttr()
 }
 
 const openAnalysisModal = (key: 'session' | 'attr', id: string) => {
   state.analysisVisible = true
   state.analysisType = key
   analysisState.deviceId = id
-  getDeviceSession()
+  key === 'session' ? getDeviceSession() : getDeviceAttr()
 }
 
 const changePage = ({ current }) => {
@@ -292,10 +331,17 @@ const goDetailPage = (id: string) => {
 }
 
 const getDeviceSession = async () => {
-  const { data } = await DeviceContriller.getSession(analysisState as any)
+  analysisState.loading = true
+  const { data } = await DeviceContriller.getSession({ deviceId: analysisState.deviceId, start: analysisState.start, end: analysisState.end })
   analysisState.dataSource = data
 }
 
+const getDeviceAttr = async () => {
+  analysisState.loading = true
+  const { data } = await DeviceContriller.getAttr({ deviceId: analysisState.deviceId, start: analysisState.start, end: analysisState.end })
+  analysisState.dataSource = data.hum
+}
+
 const delDevice = async (id: string) => {
   await DeviceContriller.del(id)
   getDevicePage()
@@ -307,8 +353,6 @@ const ok = () => {
     return
   }
   validateDevice().then(async (r) => {
-    console.log('validateDevice:', r)
-
     await DeviceContriller.post(deviceState)
     state.visible = false
     getDevicePage()
@@ -353,7 +397,6 @@ onMounted(() => {
   .count {
     font-size: 48px;
     margin-right: 10px;
-
   }
 }
 .label {

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

@@ -1,12 +1,12 @@
 export const sessionEchartsJson = {
   title: {
-    text: '上下线分析'
+    text: ''
   },
   tooltip: {
     trigger: 'axis'
   },
   legend: {
-    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+    data: ['上线', '下线']
   },
   grid: {
     left: '3%',
@@ -29,34 +29,212 @@ export const sessionEchartsJson = {
   },
   series: [
     {
-      name: 'Email',
+      name: '上线',
       type: 'line',
       stack: 'Total',
       data: [120, 132, 101, 134, 90, 230, 210]
     },
     {
-      name: 'Union Ads',
+      name: '下线',
       type: 'line',
       stack: 'Total',
       data: [220, 182, 191, 234, 290, 330, 310]
-    },
+    }
+  ]
+}
+
+export const attrEchartsJson = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
     {
-      name: 'Video Ads',
-      type: 'line',
-      stack: 'Total',
-      data: [150, 232, 201, 154, 190, 330, 410]
-    },
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line'
+    }
+  ]
+}
+
+// prettier-ignore
+const femaleData = [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
+  [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
+  [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
+  [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
+  [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
+  [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
+  [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
+  [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
+  [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
+  [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
+  [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
+  [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
+  [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
+  [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
+  [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
+  [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
+  [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
+  [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
+  [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
+  [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
+  [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
+  [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
+  [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
+  [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
+  [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
+  [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
+  [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
+  [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
+  [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
+  [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
+  [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
+  [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
+  [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
+  [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
+  [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
+  [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
+  [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
+  [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
+  [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
+  [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
+  [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
+  [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
+  [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
+  [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
+  [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
+  [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
+  [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
+  [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
+  [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
+  [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
+  [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
+  [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
+]
+// prettier-ignore
+const maleDeta = [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
+  [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
+  [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
+  [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
+  [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
+  [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
+  [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
+  [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
+  [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
+  [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
+  [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
+  [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
+  [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
+  [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
+  [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
+  [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
+  [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
+  [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
+  [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
+  [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
+  [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
+  [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
+  [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
+  [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
+  [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
+  [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
+  [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
+  [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
+  [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
+  [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
+  [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
+  [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
+  [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
+  [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
+  [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
+  [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
+  [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
+  [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
+  [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
+  [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
+  [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
+  [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
+  [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
+  [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
+  [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
+  [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
+  [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
+  [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
+  [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
+  [180.3, 83.2], [180.3, 83.2]
+]
+function calculateAverage (data: number[][], dim: number) {
+  let total = 0
+  for (let i = 0; i < data.length; i++) {
+    total += data[i][dim]
+  }
+  return (total /= data.length)
+}
+
+const scatterOption = {
+  xAxis: {
+    scale: true
+  },
+  yAxis: {
+    scale: true
+  },
+  series: [
     {
-      name: 'Direct',
-      type: 'line',
-      stack: 'Total',
-      data: [320, 332, 301, 334, 390, 330, 320]
+      type: 'scatter',
+      id: 'female',
+      dataGroupId: 'female',
+      universalTransition: {
+        enabled: true,
+        delay: function (idx: string, count: string) {
+          return Math.random() * 400
+        }
+      },
+      data: femaleData
     },
     {
-      name: 'Search Engine',
-      type: 'line',
-      stack: 'Total',
-      data: [820, 932, 901, 934, 1290, 1330, 1320]
+      type: 'scatter',
+      id: 'male',
+      dataGroupId: 'male',
+      universalTransition: {
+        enabled: true,
+        delay: function (idx: string, count: string) {
+          return Math.random() * 400
+        }
+      },
+      data: maleDeta
+    }
+  ]
+}
+
+const barOption = {
+  xAxis: {
+    type: 'category',
+    data: ['Female', 'Male']
+  },
+  yAxis: {},
+  series: [
+    {
+      type: 'bar',
+      id: 'total',
+      data: [
+        {
+          value: calculateAverage(maleDeta, 0),
+          groupId: 'male'
+        },
+        {
+          value: calculateAverage(femaleData, 0),
+          groupId: 'female'
+        }
+      ],
+      universalTransition: {
+        enabled: true,
+        seriesKey: ['female', 'male'],
+        delay: function (idx, count) {
+          return Math.random() * 400
+        }
+      }
     }
   ]
 }

tsconfig.json

@@ -13,6 +13,7 @@
     "useDefineForClassFields": true,
     "sourceMap": true,
     "baseUrl": ".",
+    "noImplicitAny": false,
     "types": [
       "webpack-env"
     ],