From f2346c813c022d871a9bf5e8b75c0db46ee80116 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Mon, 25 Sep 2023 09:57:13 +0800
Subject: [PATCH] 把设备添加项目中

---
 src/components/common/sidebar.vue                                             |    3 
 src/types/enums.ts                                                            |    3 
 src/store/common.ts                                                           |    6 
 src/api/http/config.ts                                                        |    8 
 src/pages/page-web/projects/project_list/index.vue                            |    6 
 src/pages/page-web/projects/tsa.vue                                           |    5 
 src/components/common/topbar.vue                                              |    2 
 src/router/index.ts                                                           |   13 
 src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue |    1 
 src/pages/page-web/projects/devices.vue                                       |   12 
 src/pages/page-web/projects/implement.vue                                     |  486 ++++++++++++++++++++++++++++++++++++++++++++++++
 11 files changed, 522 insertions(+), 23 deletions(-)

diff --git a/src/api/http/config.ts b/src/api/http/config.ts
index d4f85b3..56b0d3d 100644
--- a/src/api/http/config.ts
+++ b/src/api/http/config.ts
@@ -8,13 +8,13 @@
   // http
   // http://172.16.13.64:8100
   // baseURL: 'http://192.168.1.133:6789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
-  baseURL: 'http://192.168.1.198:6789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
-  // baseURL: 'https://dev.jxpskj.com:36789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
+  // baseURL: 'http://192.168.1.198:6789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
+  baseURL: 'https://dev.jxpskj.com:36789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
   // ws: 'ws//127.0.0.1:6789/api/v1/ws',
   // ws://192.168.1.198:1883/
-  websocketURL: 'ws://192.168.1.198:6789/api/v1/ws', // Example: 'ws://192.168.1.198:6789/api/v1/ws'
+  // websocketURL: 'ws://192.168.1.198:6789/api/v1/ws', // Example: 'ws://192.168.1.198:6789/api/v1/ws'
   // websocketURL: 'ws://192.168.1.133:6789/api/v1/ws', // Example: 'ws://192.168.1.198:6789/api/v1/ws'
-  // websocketURL: 'wss://dev.jxpskj.com:36789/api/v1/ws', // Example: 'ws://192.168.1.198:6789/api/v1/ws'
+  websocketURL: 'wss://dev.jxpskj.com:36789/api/v1/ws', // Example: 'ws://192.168.1.198:6789/api/v1/ws'
 
   // livestreaming
   // RTMP  Note: This IP is the address of the streaming server. If you want to see livestream on web page, you need to convert the RTMP stream to WebRTC stream.
diff --git a/src/components/common/sidebar.vue b/src/components/common/sidebar.vue
index 8761b8d..9cbe1df 100644
--- a/src/components/common/sidebar.vue
+++ b/src/components/common/sidebar.vue
@@ -59,7 +59,8 @@
       { key: 2, label: '标注', path: '/' + ERouterName.LAYER, icon: 'EnvironmentOutlined' },
       { key: 3, label: '媒体库', path: '/' + ERouterName.MEDIA, icon: 'PictureOutlined' },
       { key: 4, label: '航线库', path: '/' + ERouterName.WAYLINE, icon: 'NodeIndexOutlined' },
-      { key: 5, label: '计划库', path: '/' + ERouterName.TASK, icon: 'CalendarOutlined' }
+      { key: 5, label: '计划库', path: '/' + ERouterName.TASK, icon: 'CalendarOutlined' },
+      { key: 6, label: '设备', path: '/' + ERouterName.IMPLEMENT, icon: 'ClusterOutlined' }
     ]
     const store = useMyStore()
     function selectedRoute (item: IOptions) {
diff --git a/src/components/common/topbar.vue b/src/components/common/topbar.vue
index 6528629..21f54b2 100644
--- a/src/components/common/topbar.vue
+++ b/src/components/common/topbar.vue
@@ -71,7 +71,7 @@
 const options = [
   { key: 0, label: '项目', path: '/' + ERouterName.PROJECT_LIST },
   { key: 1, label: '人员管理', path: '/' + ERouterName.MEMBERS },
-  { key: 2, label: '设备管理', path: '/' + ERouterName.DEVICES },
+  // { key: 2, label: '设备管理', path: '/' + ERouterName.DEVICES },
   // { key: 3, label: ERouterName.FIRMWARES.charAt(0).toUpperCase() + ERouterName.FIRMWARES.substr(1), path: '/' + ERouterName.FIRMWARES },
 ]
 
diff --git a/src/pages/page-web/projects/devices.vue b/src/pages/page-web/projects/devices.vue
index cbc676f..e22d6a7 100644
--- a/src/pages/page-web/projects/devices.vue
+++ b/src/pages/page-web/projects/devices.vue
@@ -130,11 +130,11 @@
 import DeviceLogUploadRecordDrawer from '/@/components/devices/device-log/DeviceLogUploadRecordDrawer.vue'
 import DeviceHmsDrawer from '/@/components/devices/device-hms/DeviceHmsDrawer.vue'
 import { message, notification } from 'ant-design-vue'
-
+import { useMyStore } from '/@/store'
 interface DeviceData {
   device: Device[]
 }
-
+const store = useMyStore()
 const loading = ref(false)
 const deleteTip = ref<boolean>(false)
 const deleteSn = ref<string>()
@@ -243,7 +243,7 @@
 }
 type Pagination = TableState['pagination']
 
-const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId) || ''
+const workspaceId = computed(() => store.state.common.projectId)
 const editableData: UnwrapRef<Record<string, Device>> = reactive({})
 const current = ref([EDeviceTypeName.Aircraft])
 
@@ -257,7 +257,7 @@
   selectedDevice,
   onDeviceUpgrade,
   onUpgradeDeviceOk
-} = useDeviceFirmwareUpgrade(workspaceId)
+} = useDeviceFirmwareUpgrade(workspaceId.value)
 
 function onDeviceUpgradeWs (payload: DeviceCmdExecuteInfo) {
   updateDevicesByWs(data.device, payload)
@@ -301,7 +301,7 @@
   if (!closeLoading) {
     loading.value = true
   }
-  getBindingDevices(workspaceId, getPaginationBody(), domain).then(res => {
+  getBindingDevices(workspaceId.value, getPaginationBody(), domain).then(res => {
     if (res.code !== 0) {
       loading.value = false
       return
@@ -340,7 +340,7 @@
 // 保存
 function save (record: Device) {
   delete editableData[record.device_sn]
-  updateDevice({ nickname: record.nickname }, workspaceId, record.device_sn)
+  updateDevice({ nickname: record.nickname }, workspaceId.value, record.device_sn)
 }
 
 // 删除
diff --git a/src/pages/page-web/projects/implement.vue b/src/pages/page-web/projects/implement.vue
new file mode 100644
index 0000000..3a5b3b6
--- /dev/null
+++ b/src/pages/page-web/projects/implement.vue
@@ -0,0 +1,486 @@
+<template>
+    <div>
+        <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;">
+            <a-row>
+                <a-col :span="1"></a-col>
+                <a-col :span="20">设备库</a-col>
+                <a-col :span="3"></a-col>
+            </a-row>
+        </div>
+
+        <div>
+            <div>
+                <a-row style="padding: 15px 0">
+                    <a-col :span="1"></a-col>
+                    <a-col :span="23">
+                        当前设备
+                    </a-col>
+                </a-row>
+
+                <a-row>
+                    <a-col :span="1"></a-col>
+                    <a-col :span="22">
+
+                        <div v-if="onlineDocks.data.length === 0" style="height: 150px; color: white;">
+                            <a-empty style="color: #fff;" :image="simpleImage" description="暂无数据"
+                                :image-style="{ height: '60px' }" />
+                        </div>
+                        <div v-else class="fz12" style="color: white;">
+                            <div @click="selectOnlineDock(dock)" v-for="dock in onlineDocks.data" :key="dock.sn"
+                                :style="{ background: '#3c3c3c', 'margin-bottom': '10px' }">
+                                <div style="border-radius: 2px; height: 60%; width: 100%;"
+                                    class="flex-row flex-justify-between flex-align-center">
+                                    <div style="float: left; padding: 0px 5px 8px 8px; width: 88%">
+                                        <!-- // 机场设备标题 -->
+                                        <div style="width: 80%; height: 30px; line-height: 30px; font-size: 16px;">
+                                            <a-tooltip :title="`${dock.gateway.callsign} - ${dock.callsign ?? 'No Drone'}`">
+                                                <div class="text-hidden" style="max-width: 200px;">{{ dock.gateway.callsign
+                                                }} - {{
+    dock.callsign ??
+    'No Drone'
+}}
+                                                </div>
+                                            </a-tooltip>
+                                        </div>
+                                        <!-- // 机场设备状态 -->
+                                        <div class="mt5 flex-align-center flex-row flex-justify-between"
+                                            style="background: #595959;">
+                                            <div class="flex-align-center flex-row">
+                                                <span class="ml5 mr5">
+                                                    <RobotOutlined />
+                                                </span>
+                                                <div class="font-bold text-hidden" style="max-width: 80px;"
+                                                    :style="dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
+                                                    {{
+                                                        dockInfo[dock.gateway.sn] ?
+                                                        EDockModeText[dockInfo[dock.gateway.sn].basic_osd?.mode_code] :
+                                                        EDockModeText[EDockModeCode.Disconnected]
+                                                    }}
+                                                </div>
+                                            </div>
+                                            <div class="mr5 flex-align-center flex-row"
+                                                style="width: 85px; margin-right: 0; height: 18px;">
+                                                <div v-if="hmsInfo[dock.gateway.sn]" class="flex-align-center flex-row">
+                                                    <div :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' :
+                                                        hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"
+                                                        style="width: 18px; height: 16px; text-align: center;">
+                                                        <span
+                                                            :style="hmsInfo[dock.gateway.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
+                                                                hmsInfo[dock.gateway.sn].length
+                                                            }}</span>
+                                                        <span class="fz10">{{ hmsInfo[dock.gateway.sn].length > 99 ? '+' :
+                                                            '' }}</span>
+                                                    </div>
+                                                    <a-popover trigger="click" placement="bottom" color="black"
+                                                        v-model:visible="hmsVisible[dock.gateway.sn]"
+                                                        @visibleChange="readHms(hmsVisible[dock.gateway.sn], dock.gateway.sn)"
+                                                        :overlayStyle="{ width: '200px', height: '300px' }">
+                                                        <div :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution' :
+                                                            hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"
+                                                            style="margin-left: 3px; width: 62px; height: 16px;">
+                                                            <span class="word-loop">{{
+                                                                hmsInfo[dock.gateway.sn][0].message_zh }}</span>
+                                                        </div>
+                                                        <template #content>
+                                                            <a-collapse
+                                                                style="background: black; height: 300px; overflow-y: auto;"
+                                                                :bordered="false" expand-icon-position="right"
+                                                                :accordion="true">
+                                                                <a-collapse-panel v-for="hms in hmsInfo[dock.gateway.sn]"
+                                                                    :key="hms.hms_id" :showArrow="false"
+                                                                    style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px"
+                                                                    :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
+                                                                    <template #header="{ isActive }">
+                                                                        <div class="flex-row flex-align-center"
+                                                                            style="width: 130px;">
+                                                                            <div style="width: 110px;">
+                                                                                <span class="word-loop">{{ hms.message_zh
+                                                                                }}</span>
+                                                                            </div>
+                                                                            <div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 "
+                                                                                class="flex-row flex-align-center flex-justify-center"
+                                                                                :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
+                                                                                <DoubleRightOutlined
+                                                                                    :rotate="isActive ? 90 : 0" />
+                                                                            </div>
+                                                                        </div>
+                                                                    </template>
+
+                                                                    <a-tooltip :title="hms.create_time">
+                                                                        <div style="color: white;" class="text-hidden">{{
+                                                                            hms.create_time }}</div>
+                                                                    </a-tooltip>
+                                                                </a-collapse-panel>
+                                                            </a-collapse>
+                                                        </template>
+                                                    </a-popover>
+                                                </div>
+                                                <div v-else class="width-100"
+                                                    style="height: 90%; background: rgba(0, 0, 0, 0.35)"></div>
+                                            </div>
+                                        </div>
+                                        <!-- // 机场是否启动 -->
+                                        <div class="mt5 flex-align-center flex-row flex-justify-between"
+                                            style="background: #595959;">
+                                            <div class="flex-row">
+                                                <span class="ml5 mr5">
+                                                    <RocketOutlined />
+                                                </span>
+                                                <div class="font-bold text-hidden" style="max-width: 80px"
+                                                    :style="deviceInfo[dock.sn] && deviceInfo[dock.sn].mode_code !== EModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
+                                                    {{
+                                                        deviceInfo[dock.sn] ? EModeText[deviceInfo[dock.sn].mode_code] :
+                                                        EModeText[EModeCode.Disconnected]
+                                                    }}
+                                                </div>
+                                            </div>
+                                            <div class="mr5 flex-align-center flex-row"
+                                                style="width: 85px; margin-right: 0; height: 18px;">
+                                                <div v-if="hmsInfo[dock.sn]" class="flex-align-center flex-row">
+                                                    <div :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' :
+                                                        hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"
+                                                        style="width: 18px; height: 16px; text-align: center;">
+                                                        <span
+                                                            :style="hmsInfo[dock.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
+                                                                hmsInfo[dock.sn].length
+                                                            }}</span>
+                                                        <span class="fz10">{{ hmsInfo[dock.sn].length > 99 ? '+' : ''
+                                                        }}</span>
+                                                    </div>
+                                                    <a-popover trigger="click" placement="bottom" color="black"
+                                                        v-model:visible="hmsVisible[dock.sn]"
+                                                        @visibleChange="readHms(hmsVisible[dock.sn], dock.sn)"
+                                                        :overlayStyle="{ width: '200px', height: '300px' }">
+                                                        <div :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution' :
+                                                            hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"
+                                                            style="margin-left: 3px; width: 62px; height: 16px;">
+                                                            <span class="word-loop">{{ hmsInfo[dock.sn][0].message_zh
+                                                            }}</span>
+                                                        </div>
+                                                        <template #content>
+                                                            <a-collapse
+                                                                style="background: black; height: 300px; overflow-y: auto;"
+                                                                :bordered="false" expand-icon-position="right"
+                                                                :accordion="true">
+                                                                <a-collapse-panel v-for="hms in hmsInfo[dock.sn]"
+                                                                    :key="hms.hms_id" :showArrow="false"
+                                                                    style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px"
+                                                                    :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
+                                                                    <template #header="{ isActive }">
+                                                                        <div class="flex-row flex-align-center"
+                                                                            style="width: 130px;">
+                                                                            <div style="width: 110px;">
+                                                                                <span class="word-loop">{{ hms.message_zh
+                                                                                }}</span>
+                                                                            </div>
+                                                                            <div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 "
+                                                                                class="flex-row flex-align-center flex-justify-center"
+                                                                                :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
+                                                                                <DoubleRightOutlined
+                                                                                    :rotate="isActive ? 90 : 0" />
+                                                                            </div>
+                                                                        </div>
+                                                                    </template>
+
+                                                                    <a-tooltip :title="hms.create_time">
+                                                                        <div style="color: white;" class="text-hidden">{{
+                                                                            hms.create_time }}</div>
+                                                                    </a-tooltip>
+                                                                </a-collapse-panel>
+                                                            </a-collapse>
+                                                        </template>
+                                                    </a-popover>
+                                                </div>
+                                                <div v-else class="width-100"
+                                                    style="height: 90%; background: rgba(0, 0, 0, 0.35)"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    </a-col>
+                </a-row>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  PlusOutlined,
+  MinusOutlined,
+  RocketOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
+  RobotOutlined,
+  DoubleRightOutlined,
+  FileTextOutlined,
+} from '@ant-design/icons-vue'
+import { useRoute } from 'vue-router'
+import { ERouterName, EHmsLevel } from '/@/types/enums'
+import { computed, onMounted, reactive, ref, watch, WritableComputedRef } from 'vue'
+import { EDeviceTypeName, ELocalStorageKey } from '/@/types'
+import JessibucaVideo from '/@/components/Jessibuca/Jessibuca.vue'
+import noData from '/@/assets/icons/no-data.png'
+import rc from '/@/assets/icons/rc.png'
+import { OnlineDevice, EModeCode, OSDVisible, EDockModeCode, DeviceOsd, EDockModeText, EModeText } from '/@/types/device'
+import { useMyStore } from '/@/store'
+import { getDeviceTopo, getUnreadDeviceHms, updateDeviceHms } from '/@/api/manage'
+
+const route = useRoute()
+const store = useMyStore()
+const workspaceId = ref(localStorage.getItem(ELocalStorageKey.WorkspaceId)!)
+const hmsVisible = new Map<string, boolean>()
+const deviceInfo = computed(() => store.state.deviceState.deviceInfo)
+const dockInfo = computed(() => store.state.deviceState.dockInfo)
+const hmsInfo = computed({
+  get: () => store.state.hmsInfo,
+  set: (val) => {
+    return val
+  }
+})
+const scorllHeight = ref()
+const onlineDocks = reactive({
+  data: [] as OnlineDevice[]
+})
+
+const onlineCheckArr = reactive({
+  data: [] as OnlineDevice[]
+})
+
+const onlineDevices = reactive({
+  data: [] as OnlineDevice[]
+})
+
+const historyCheckArr = reactive({
+  data: [] as OnlineDevice[]
+})
+
+const historyDocks = reactive({
+  data: [] as OnlineDevice[]
+})
+
+const osdVisible = ref({} as OSDVisible)
+const onlineCheck = ref(false)
+const historyCheck = ref(false)
+
+watch(
+  () => onlineCheckArr.data,
+  (newVal) => {
+    const dockSns = newVal.map(item => item.gateway.sn).join(',')
+    // 把机场编号存入store
+    store.commit('SET_DOCK_SN', dockSns)
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  getOnlineTopo()
+  setTimeout(() => {
+    watch(() => store.state.deviceStatusEvent,
+      data => {
+        getOnlineTopo()
+        if (data.deviceOnline.sn) {
+          getUnreadHms(data.deviceOnline.sn)
+        }
+      },
+      {
+        deep: true
+      }
+    )
+    getOnlineDeviceHms()
+  }, 3000)
+  const element = document.getElementsByClassName('scrollbar').item(0) as HTMLDivElement
+  const parent = element?.parentNode as HTMLDivElement
+  scorllHeight.value = parent?.clientHeight - parent?.firstElementChild?.clientHeight
+})
+
+// 在线设备全选
+function onlineCheckBoxChange (item: any) {
+  onlineDocks.data.forEach(e => {
+    e.selected = !e.selected
+  })
+
+  if (item.target.checked) {
+    onlineCheckArr.data = onlineDocks.data
+  } else {
+    onlineCheckArr.data = []
+  }
+}
+
+function historyCheckBoxChange (item: any) {
+  historyDocks.data.forEach(e => {
+    e.selected = !e.selected
+  })
+
+  historyCheckArr.data = historyDocks.data
+}
+
+// 在线机场点击
+function selectOnlineDock (item: OnlineDevice) {
+  // 当前已被选中,排除
+  if (item.selected) {
+    onlineCheckArr.data = onlineCheckArr.data.filter(e => e.sn !== item.sn)
+  } else {
+    // 当前未被选中,push
+    onlineCheckArr.data.push(item)
+  }
+  item.selected = !item.selected
+  if (onlineCheckArr.data.length === onlineDocks.data.length) {
+    onlineCheck.value = true
+  } else {
+    onlineCheck.value = false
+  }
+}
+
+function selectHistoryDock (item: OnlineDevice) {
+  // 当前已被选中,排除
+  if (item.selected) {
+    historyCheckArr.data = historyCheckArr.data.filter(e => e.sn !== item.sn)
+  } else {
+    // 当前未被选中,push
+    historyCheckArr.data.push(item)
+  }
+  item.selected = !item.selected
+  if (historyCheckArr.data.length === historyDocks.data.length) {
+    historyCheck.value = true
+  }
+}
+
+// 监听ws 消息
+// useConnectWebSocket(messageHandler)
+function getOnlineTopo () {
+  getDeviceTopo(workspaceId.value).then((res) => {
+    if (res.code !== 0) {
+      return
+    }
+    onlineDevices.data = []
+    onlineDocks.data = []
+    res.data.forEach((gateway: any) => {
+      const child = gateway.children
+      const device: OnlineDevice = {
+        model: child?.device_name,
+        callsign: child?.nickname,
+        sn: child?.device_sn,
+        mode: EModeCode.Disconnected,
+        gateway: {
+          model: gateway?.device_name,
+          callsign: gateway?.nickname,
+          sn: gateway?.device_sn,
+          domain: gateway?.domain
+        },
+        payload: [],
+
+        // 是否选中
+        selected: false
+      }
+      child?.payloads_list.forEach((payload: any) => {
+        device.payload.push({
+          index: payload.index,
+          model: payload.model,
+          payload_name: payload.payload_name,
+          payload_sn: payload.payload_sn,
+          control_source: payload.control_source,
+          payload_index: payload.payload_index
+        })
+      })
+      if (EDeviceTypeName.Dock === gateway.domain) {
+        hmsVisible.set(device.sn, false)
+        hmsVisible.set(device.gateway.sn, false)
+        onlineDocks.data.push(device)
+      }
+      if (gateway.status && EDeviceTypeName.Gateway === gateway.domain) {
+        onlineDevices.data.push(device)
+      }
+    })
+  })
+}
+
+function getUnreadHms (sn: string) {
+  getUnreadDeviceHms(workspaceId.value, sn).then(res => {
+    if (res.data.length !== 0) {
+      hmsInfo.value[sn] = res.data
+    }
+  })
+  console.info(hmsInfo.value)
+}
+
+function getOnlineDeviceHms () {
+  const snList = Object.keys(dockInfo.value)
+  if (snList.length === 0) {
+    return
+  }
+  snList.forEach(sn => {
+    getUnreadHms(sn)
+  })
+  const deviceSnList = Object.keys(deviceInfo.value)
+  if (deviceSnList.length === 0) {
+    return
+  }
+  deviceSnList.forEach(sn => {
+    getUnreadHms(sn)
+  })
+}
+
+function switchVisible (e: any, device: OnlineDevice, isDock: boolean, isClick: boolean, sn?: any) {
+  // showDrawer.value = !showDrawer.value
+  if (!isClick) {
+    e.target.style.cursor = 'not-allowed'
+    return
+  }
+  if (device.sn === osdVisible.value.sn) {
+    osdVisible.value.visible = !osdVisible.value.visible
+  } else {
+    osdVisible.value.sn = device.sn
+    osdVisible.value.callsign = device.callsign
+    osdVisible.value.model = device.model
+    osdVisible.value.visible = true
+    osdVisible.value.gateway_sn = device.gateway.sn
+    osdVisible.value.is_dock = isDock
+    osdVisible.value.gateway_callsign = device.gateway.callsign
+    osdVisible.value.payloads = device.payload
+  }
+  store.commit('SET_OSD_VISIBLE_INFO', osdVisible)
+  store.commit('SET_HMSInfo_DetailSn', sn)
+}
+
+</script>
+
+<style lang="scss" scoped>
+.route-icon {
+    color: #fff;
+    font-size: 16px;
+}
+
+.job-info {
+    height: 30%;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #c1c1c1;
+    margin-bottom: 6px;
+
+    .job-status {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        background: red;
+    }
+
+    .job-name {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        padding-left: 5px;
+    }
+}
+
+.text-hidden {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap;
+    -o-text-overflow: ellipsis;
+}
+</style>
diff --git a/src/pages/page-web/projects/project_list/index.vue b/src/pages/page-web/projects/project_list/index.vue
index 21287af..c3ea927 100644
--- a/src/pages/page-web/projects/project_list/index.vue
+++ b/src/pages/page-web/projects/project_list/index.vue
@@ -14,7 +14,9 @@
             <div class="task-wrapper" v-if="root.$route.name === ERouterName.TASK">
                 <TaskPanel />
             </div>
-            <div class="device-wrapper" v-if="root.$route.name === ERouterName.DEVICES"></div>
+            <div class="device-wrapper" v-if="root.$route.name === ERouterName.IMPLEMENT">
+                <Devices />
+            </div>
         </div>
     </div>
 </template>
@@ -24,6 +26,7 @@
 import GMap from '/@/components/GMap.vue'
 import MediaPanel from '/@/components/MediaPanel.vue'
 import TaskPanel from '/@/components/task/TaskPanel.vue'
+import Devices from '/@/pages/page-web/projects/devices.vue'
 import { EBizCode, ERouterName } from '/@/types'
 import { getRoot } from '/@/root'
 const root = getRoot()
@@ -53,6 +56,7 @@
         }
 
         .media-wrapper,
+        .device-wrapper,
         .task-wrapper {
             position: absolute;
             top: 0;
diff --git a/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue b/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
index 37a47e5..beebb39 100644
--- a/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
+++ b/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
@@ -131,6 +131,7 @@
   store.commit('SET_PROJECT_ID', item.workspace_id)
   localStorage.setItem(ELocalStorageKey.WorkspaceId, item.workspace_id)
   store.commit('SET_POINT_LIST', [])
+  store.commit('SET_PROJECT_NAME', item.workspace_name)
   router.push({
     name: ERouterName.WORKSPACE,
     query: { id: item.id, workSpaceId: item.workspace_id },
diff --git a/src/pages/page-web/projects/tsa.vue b/src/pages/page-web/projects/tsa.vue
index 0a654a0..59d1997 100644
--- a/src/pages/page-web/projects/tsa.vue
+++ b/src/pages/page-web/projects/tsa.vue
@@ -3,8 +3,8 @@
     <div>
       <a-row>
         <a-col :span="1"></a-col>
-        <a-col :span="11">我的项目呼号</a-col>
-        <a-col :span="11" align="right" style="font-weight: 700">{{ username }}</a-col>
+        <a-col :span="11">项目名称</a-col>
+        <a-col :span="11" align="right" style="font-weight: 700">{{ projectName }}</a-col>
         <a-col :span="1"></a-col>
       </a-row>
     </div>
@@ -300,6 +300,7 @@
 
 const deviceInfo = computed(() => store.state.deviceState.deviceInfo)
 const dockInfo = computed(() => store.state.deviceState.dockInfo)
+const projectName = computed(() => store.state.common.projectName)
 const workSpaceId = computed(() => store.state.common.projectId)
 const hmsInfo = computed({
   get: () => store.state.hmsInfo,
diff --git a/src/router/index.ts b/src/router/index.ts
index c939264..44b103d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -28,11 +28,6 @@
         name: ERouterName.MEMBERS,
         component: () => import('/@/pages/page-web/projects/members.vue')
       },
-      {
-        path: '/' + ERouterName.DEVICES,
-        name: ERouterName.DEVICES,
-        component: () => import('/@/pages/page-web/projects/devices.vue')
-      },
       // 项目列表
       {
         path: '/' + ERouterName.PROJECT,
@@ -118,7 +113,13 @@
                   }
 
                 ]
-              }
+              },
+
+              {
+                path: '/' + ERouterName.IMPLEMENT,
+                name: ERouterName.IMPLEMENT,
+                component: () => import('/@/pages/page-web/projects/implement.vue')
+              },
             ],
             meta: {
               header: false
diff --git a/src/store/common.ts b/src/store/common.ts
index a733a98..b886078 100644
--- a/src/store/common.ts
+++ b/src/store/common.ts
@@ -3,7 +3,8 @@
 const state = () => ({
   projectId: null as string | null,
   dockSns: null as string | null,
-  snList: [] as string[]
+  snList: [] as string[],
+  projectName: '' as string
 })
 export type RootStateType = ReturnType<typeof state>
 const mutations: MutationTree<RootStateType> = {
@@ -17,6 +18,9 @@
 
   SET_SN_LIST (state, snList: string[]) {
     state.snList = snList
+  },
+  SET_PROJECT_NAME (state, projectName: string) {
+    state.projectName = projectName
   }
 }
 export default {
diff --git a/src/types/enums.ts b/src/types/enums.ts
index 512a508..5d5fac1 100644
--- a/src/types/enums.ts
+++ b/src/types/enums.ts
@@ -23,7 +23,8 @@
     PILOT_HOME = 'pilot-home',
     PILOT_MEDIA = 'pilot-media',
     PILOT_LIVESHARE = 'pilot-liveshare',
-    PILOT_BIND = 'pilot-bind'
+    PILOT_BIND = 'pilot-bind',
+    IMPLEMENT = 'implement',
 }
 
 export enum EStorageKey {

--
Gitblit v1.9.3