fix:设备展示

src/components/VideoPlayer/index.tsx

@@ -1,49 +1,49 @@
-import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'
-
-/**
- * @description flv视频播放组件
- *  关闭时需要销毁组件来停止 视频的 播放
- */
-export const VideoPlayerTsx = defineComponent({
-  name: 'video-player-tsx',
-  props: {
-    videoUrl: {
-      type: String,
-      default: '/rts/hdl/live/test.flv'
-    }
-  },
-  setup (props, ctx) {
-    const videoPlay = ref()
-    const videoElementRef = ref()
-
-    const mediaDataSource = reactive({
-      type: 'flv',
-      url: props.videoUrl
-    })
-
-    const createPlayer = () => {
-      videoPlay.value = window.flvjs.createPlayer(mediaDataSource, {
-        enableWorker: false,
-        lazyLoadMaxDuration: 3 * 60,
-        seekType: 'range'
-      })
-
-      videoPlay.value.attachMediaElement(document.getElementById('videoPlay'))
-      videoPlay.value.load()
-    }
-
-    onMounted(() => {
-      createPlayer()
-    })
-
-    onUnmounted(() => {
-      videoPlay.value.destroy()
-    })
-
-    return () => (
-      <video ref={videoElementRef.value} id='videoPlay' class="centeredVideo" controls autoplay>
-          Your browser is too old which doesn't support HTML5 video.
-      </video>
-    )
-  }
-})
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'
+
+/**
+ * @description flv视频播放组件
+ *  关闭时需要销毁组件来停止 视频的 播放
+ */
+export const VideoPlayerTsx = defineComponent({
+  name: 'video-player-tsx',
+  props: {
+    videoUrl: {
+      type: String,
+      default: '/rts/hdl/live/test.flv'
+    }
+  },
+  setup (props, ctx) {
+    const videoPlay = ref()
+    const videoElementRef = ref()
+
+    const mediaDataSource = reactive({
+      type: 'flv',
+      url: props.videoUrl
+    })
+
+    const createPlayer = () => {
+      videoPlay.value = window.flvjs.createPlayer(mediaDataSource, {
+        enableWorker: false,
+        lazyLoadMaxDuration: 3 * 60,
+        seekType: 'range'
+      })
+
+      videoPlay.value.attachMediaElement(document.getElementById('videoPlay'))
+      videoPlay.value.load()
+    }
+
+    onMounted(() => {
+      createPlayer()
+    })
+
+    onUnmounted(() => {
+      videoPlay.value.destroy()
+    })
+
+    return () => (
+      <video ref={videoElementRef.value} id='videoPlay' class="centeredVideo" controls autoplay>
+          Your browser is too old which doesn't support HTML5 video.
+      </video>
+    )
+  }
+})

src/controller/common/common.ts

@@ -1,25 +1,25 @@
-import { delFile, getTransport } from '@/api/common'
-import { TransportEnum } from '@/enum/common'
-export class CommonController {
-  static dataTypeByKeyMap = new Map([
-    ['LONG', 'value'],
-    ['STRING', 'value'],
-    ['JSON', 'value'],
-    ['DOUBLE', 'value'],
-    ['BOOLEAN', 'value']
-  ])
-
-  static async getTransport () {
-    const { data } = await getTransport()
-    return Object.keys(data).map(key => {
-      return {
-        port: key,
-        address: data[key as TransportEnum]
-      }
-    })
-  }
-
-  static async delOtaPkg (filePath: string, fileName: string) {
-    await delFile(filePath, fileName)
-  }
-}
+import { delFile, getTransport } from '@/api/common'
+import { TransportEnum } from '@/enum/common'
+export class CommonController {
+  static dataTypeByKeyMap = new Map([
+    ['LONG', 'value'],
+    ['STRING', 'value'],
+    ['JSON', 'value'],
+    ['DOUBLE', 'value'],
+    ['BOOLEAN', 'value']
+  ])
+
+  static async getTransport () {
+    const { data } = await getTransport()
+    return Object.keys(data).map(key => {
+      return {
+        port: key,
+        address: data[key as TransportEnum]
+      }
+    })
+  }
+
+  static async delOtaPkg (filePath: string, fileName: string) {
+    await delFile(filePath, fileName)
+  }
+}

src/controller/iot/device.ts

@@ -97,6 +97,15 @@ export class DeviceContriller {
     { key: OtaStatusEnum.FAILED, label: '失败' }
   ]
 
+  static displayTypes = [
+    { key: 'DEFAULT', label: '默认' },
+    { key: 'IMAGE', label: ' 图片' },
+    { key: 'VIDEO', label: ' 视频' },
+    { key: 'SWITCH', label: ' 开关' },
+    { key: 'PROGRESS', label: '进度条' },
+    { key: 'BUTTON', label: ' 按钮' }
+  ]
+
   static async page (params: IOT.API.DEVICE.QueryPamars) {
     const { data: _data, sum } = await getDevicePage(params)
     const data = _data.map(item => {

src/enum/common.ts

@@ -92,3 +92,14 @@ export enum SpaceTypeEnum {
   'RTSP' = 'RTSP',
   'JT808' = 'JT808',
 }
+
+// 设备展示类型
+
+export enum displayTypesEnum {
+  'DEFAULT' = 'DEFAULT',
+  'IMAGE' = 'IMAGE',
+  'VIDEO' = 'VIDEO',
+  'SWITCH' = 'SWITCH',
+  'PROGRESS' = 'PROGRESS',
+  'BUTTON' = 'BUTTON'
+}

src/enum/index.ts

@@ -1,2 +1,2 @@
-export { Emitter } from './emitter'
-export { AppRouter } from './router'
+export { Emitter } from './emitter'
+export { AppRouter } from './router'

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

@@ -1,5 +1,4 @@
 <template>
-
     <a-row  align="middle" style="width: 100%;height: 68px" class="title">
       <a-col  >
         <a-space :size="50" >
@@ -74,8 +73,31 @@
               />
             </div>
             <a-tooltip>
-            <template #title><span> {{item[CommonController.dataTypeByKeyMap.get(item.dataType)]}}</span> <span v-if='item.dataUnit'>{{item.dataUnit}}</span></template>
-            <span class="data-type" >{{'<'}}  <div class='elip' >{{item[CommonController.dataTypeByKeyMap.get(item.dataType)]}}</div> <span v-if='item.dataUnit'>{{item.dataUnit}}</span> {{'>'}}</span>
+            <template #title><span> {{item[CommonController.dataTypeByKeyMap.get(item.dataType)!]}}</span> <span v-if='item.dataUnit'>{{item.dataUnit}}</span></template>
+            <span class="data-type" >
+              {{'<'}}
+              <div class='elip' >
+                <template v-if="item.displayType === displayTypesEnum.DEFAULT"  >
+                  {{item[CommonController.dataTypeByKeyMap.get(item.dataType)!]}}
+                </template>
+                <template v-else-if="item.displayType === displayTypesEnum.IMAGE"  >
+                  <a-image :width="200" :src="item[CommonController.dataTypeByKeyMap.get(item.dataType)!]" />
+                </template>
+                <template v-else-if="item.displayType === displayTypesEnum.VIDEO"  >
+                  <VideoPlayerTsx :videoUrl="item[CommonController.dataTypeByKeyMap.get(item.dataType)!]"  />
+                </template>
+                <template v-else-if="item.displayType === displayTypesEnum.SWITCH"  >
+                  <a-switch :checked="true" checked-children="开" un-checked-children="关" />
+                </template>
+                <template v-else-if="item.displayType === displayTypesEnum.PROGRESS"  >
+                  <a-progress :percent="30" size="small" />
+                </template>
+                <template v-else-if="item.displayType === displayTypesEnum.BUTTON"  >
+                  <a-button type="primary" >  {{item[CommonController.dataTypeByKeyMap.get(item.dataType)!]}}</a-button>
+                </template>
+              </div>
+              <span v-if='item.dataUnit'>{{item.dataUnit}}</span> {{'>'}}
+            </span>
           </a-tooltip>
             <div>{{dayjs(item.ts).format('YYYY/MM/DD HH:mm:ss')}}</div>
           </div>
@@ -91,6 +113,7 @@
   >
     <a-input allowClear v-model:value="state.deviceLabel"></a-input>
   </modal-pro>
+
 </template>
 
 <script lang="ts" setup >
@@ -102,6 +125,8 @@ import dayjs from 'dayjs'
 import { EyeTwoTone, EyeInvisibleTwoTone } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import { CopyTsx } from '@/components/MicroComponents/index'
+import { displayTypesEnum } from '@/enum/common'
+import { VideoPlayerTsx } from '@/components/VideoPlayer/index'
 
 const route = useRoute()
 const deviceId = route.query.id as string