Ana Sayfa Keşfet Yardım
Giriş Yap
luojigou_h5
/
xiaodou-ai-admin
3
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

fix: 设备属性

lvkun996 2 yıl önce
ebeveyn
b308c71df0
işleme
d2ff7d7dc9
6 değiştirilmiş dosya ile 36 ekleme ve 24 silme
Birleşik Görünüm Farklılık Durumunu Göster
  1. 11 0
      public/index.html
  2. 0 1
      src/App.vue
  3. 16 3
      src/pages/Iot/device/index.vue
  4. 7 12
      src/pages/Iot/device/json/echartsJson.ts
  5. 1 0
      src/pages/Iot/task/manage.vue
  6. 1 8
      src/shims-vue.d.ts

+ 11 - 0
public/index.html
Dosyayı Görüntüle 

@@ -14,6 +14,16 @@
 
          overflow: hidden;
 
          overflow: hidden;
 
          /* background-color: azure; */
 
          /* background-color: azure; */
 
       }
 
       }
 
+      #app {
 
+        width: 100vw;
 
+        height: 100vh;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        font: 120px 'Italiana', sans-serif;
 
+        text-transform: lowercase;
 
+        text-align: center;
 
+      }
 
   </style>
 
   </style>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
@@ -23,6 +33,7 @@
 
     </noscript>
 
     </noscript>
 
 
 
     <div id="app">
 
     <div id="app">
 
+      loading...
 
     </div>
 
     </div>
 
     <!-- built files will be auto injected -->
 
     <!-- built files will be auto injected -->
 
   </body>
 
   </body>

+ 0 - 1
src/App.vue
Dosyayı Görüntüle 

@@ -6,7 +6,6 @@
 
       }"
 
       }"
 
     >
 
     >
 
       <router-view/>
 
       <router-view/>
 
-      <button ></button>
 
     </a-config-provider>
 
     </a-config-provider>
 
 </template>
 
 </template>
 
 <script setup lang="ts" >
 
 <script setup lang="ts" >

+ 16 - 3
src/pages/Iot/device/index.vue
Dosyayı Görüntüle 

@@ -151,6 +151,7 @@
 
       <a-spin :spinning="analysisState.loading" >
 
       <a-spin :spinning="analysisState.loading" >
 
       <a-col :span="24" v-if="state.analysisType === 'session'">
 
       <a-col :span="24" v-if="state.analysisType === 'session'">
 
         <div id="device-session" style="width: 600px;height: 400px;" ></div>
 
         <div id="device-session" style="width: 600px;height: 400px;" ></div>
 
+        <div id="device-session-scatter" style="width: 600px;height: 400px;" ></div>
 
       </a-col>
 
       </a-col>
 
       <a-col :span="24" v-else>
 
       <a-col :span="24" v-else>
 
         <div id="device-attr" style="width: 600px;height: 400px;" ></div>
 
         <div id="device-attr" style="width: 600px;height: 400px;" ></div>
 
@@ -168,7 +169,7 @@ import { DeviceAuthTypeEnum } from '@/enum/common'
 
 import { useRouter } from 'vue-router'
 
 import { useRouter } from 'vue-router'
 
 import { DownOutlined } from '@ant-design/icons-vue'
 
 import { DownOutlined } from '@ant-design/icons-vue'
 
 import * as echarts from 'echarts'
 
 import * as echarts from 'echarts'
 
-import { sessionEchartsJson, attrEchartsJson } from './json/echartsJson'
 
+import { sessionEchartsJson, attrEchartsJson, scatterOption, barOption } from './json/echartsJson'
 
 import dayjs from 'dayjs'
 
 import dayjs from 'dayjs'
 
 
 
 const useForm = Form.useForm
 
 const useForm = Form.useForm
 
@@ -283,9 +284,22 @@ watch(
 
   () => {
 
   () => {
 
     if (state.analysisType === 'session') {
 
     if (state.analysisType === 'session') {
 
       const chartDom = document.getElementById('device-session')
 
       const chartDom = document.getElementById('device-session')
 
+      const chartDomScatter = document.getElementById('device-session-scatter')
 
       const myChart = echarts.init(chartDom!)
 
       const myChart = echarts.init(chartDom!)
 
-      sessionEchartsJson.xAxis.data = analysisState.dataSource.map(item => item.createAt)
 
+      const chartDomScatterChart = echarts.init(chartDomScatter!)
 
+      sessionEchartsJson.xAxis.data = analysisState.dataSource.map(item => item.createAt) as never[]
 
+      sessionEchartsJson.series[0].data = analysisState.dataSource.map(item => item.sessionType === 'CONNECT' ? '上线' : '下线')
 
+
 
+      let currentOption = scatterOption
 
+
 
+      setInterval(function () {
 
+        currentOption = currentOption === scatterOption ? barOption : scatterOption
 
+        chartDomScatterChart.setOption(currentOption, true)
 
+      }, 2000)
 
+
 
+      chartDomScatterChart.setOption(currentOption)
 
       myChart.setOption(sessionEchartsJson)
 
       myChart.setOption(sessionEchartsJson)
 
+
 
       analysisState.loading = false
 
       analysisState.loading = false
 
     } else {
 
     } else {
 
       const chartDom = document.getElementById('device-attr')
 
       const chartDom = document.getElementById('device-attr')
 
@@ -293,7 +307,6 @@ watch(
 
 
 
       attrEchartsJson.xAxis.data = analysisState.dataSource.map(item => item.keyLabel) || []
 
       attrEchartsJson.xAxis.data = analysisState.dataSource.map(item => item.keyLabel) || []
 
       attrEchartsJson.series[0].data = analysisState.dataSource.map(item => item.longValue) || []
 
       attrEchartsJson.series[0].data = analysisState.dataSource.map(item => item.longValue) || []
 
-      console.log('attrEchartsJson:', attrEchartsJson)
 
 
 
       myChart.setOption(attrEchartsJson)
 
       myChart.setOption(attrEchartsJson)
 
       analysisState.loading = false
 
       analysisState.loading = false

+ 7 - 12
src/pages/Iot/device/json/echartsJson.ts
Dosyayı Görüntüle 

@@ -6,7 +6,7 @@ export const sessionEchartsJson = {
 
     trigger: 'axis'
 
     trigger: 'axis'
 
   },
 
   },
 
   legend: {
 
   legend: {
 
-    data: ['上线', '下线']
 
+    data: []
 
   },
 
   },
 
   grid: {
 
   grid: {
 
     left: '3%',
 
     left: '3%',
 
@@ -22,23 +22,18 @@ export const sessionEchartsJson = {
 
   xAxis: {
 
   xAxis: {
 
     type: 'category',
 
     type: 'category',
 
     boundaryGap: false,
 
     boundaryGap: false,
 
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 
+    data: []
 
   },
 
   },
 
   yAxis: {
 
   yAxis: {
 
-    type: 'value'
 
+    type: 'category',
 
+    data: ['上线', '下线']
 
   },
 
   },
 
   series: [
 
   series: [
 
     {
 
     {
 
       name: '上线',
 
       name: '上线',
 
       type: 'line',
 
       type: 'line',
 
       stack: 'Total',
 
       stack: 'Total',
 
-      data: [120, 132, 101, 134, 90, 230, 210]
 
-    },
 
-    {
 
-      name: '下线',
 
-      type: 'line',
 
-      stack: 'Total',
 
-      data: [220, 182, 191, 234, 290, 330, 310]
 
+      data: ['上线', '下线', '下线', '上线']
 
     }
 
     }
 
   ]
 
   ]
 
 }
 
 }
 
@@ -173,7 +168,7 @@ function calculateAverage (data: number[][], dim: number) {
 
   return (total /= data.length)
 
   return (total /= data.length)
 
 }
 
 }
 
 
 
-const scatterOption = {
 
+export const scatterOption = {
 
   xAxis: {
 
   xAxis: {
 
     scale: true
 
     scale: true
 
   },
 
   },
 
@@ -208,7 +203,7 @@ const scatterOption = {
 
   ]
 
   ]
 
 }
 
 }
 
 
 
-const barOption = {
 
+export const barOption = {
 
   xAxis: {
 
   xAxis: {
 
     type: 'category',
 
     type: 'category',
 
     data: ['Female', 'Male']
 
     data: ['Female', 'Male']

+ 1 - 0
src/pages/Iot/task/manage.vue
Dosyayı Görüntüle 

@@ -3,6 +3,7 @@
 
       title="规则统计"
 
       title="规则统计"
 
       :list="state.TaskCount"
 
       :list="state.TaskCount"
 
   />
 
   />
 
+
 
 <a-card style="margin-top: 20px;" >
 
 <a-card style="margin-top: 20px;" >
 
   <a-row justify="space-between" >
 
   <a-row justify="space-between" >
 
     <a-col span="12" >
 
     <a-col span="12" >

+ 1 - 8
src/shims-vue.d.ts
Dosyayı Görüntüle 

@@ -1,13 +1,6 @@
 
 /* eslint-disable */
 
 /* eslint-disable */
 
 declare module '*.vue' {
 
 declare module '*.vue' {
 
-  import type { DefineComponent, DirectiveBinding  } from 'vue'
 
-  interface CustomDirectiveOptions {
 
-    'v-enter': (el: HTMLElement, binding: DirectiveBinding) => void;
 
-  }
 
-
 
-  interface GlobalComponents {
 
-    [key: string]: CustomDirectiveOptions;
 
-  }
 
+  import type { DefineComponent  } from 'vue'
 
 
 
   const component: DefineComponent<{}, {}, any>
 
   const component: DefineComponent<{}, {}, any>