项目工作空间内嵌系统

Web/src/pages/page-web/projects/member/index.vue

@@ -3,49 +3,16 @@
     <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
     <div class="mediaList-table">
       <a-table :scroll="{ x: '100%', y: 500 }" rowKey="user_id" :loading="state.listLoading" :columns="columns"
-        @change="refreshData" :rowClassName="rowClassName" :dataSource="state.list" :pagination="paginationConfig">
-        <template v-for="col in ['mqtt_username', 'mqtt_password']" #[col]="{ text, record }" :key="col">
-          <div>
-            <a-input v-if="state.editableData[record.user_id]" v-model:value="state.editableData[record.user_id][col]"
-              style="margin: -5px 0" />
-            <template v-else>
-              {{ text }}
-            </template>
-          </div>
-        </template>
-        <template #action="{ record }">
-          <div class="editable-row-operations">
-            <span v-if="state.editableData[record.user_id]">
-              <a-tooltip title="确定">
-                <span @click="save(record)" style="color: #28d445;">
-                  <CheckOutlined />
-                </span>
-              </a-tooltip>
-              <a-tooltip title="取消">
-                <span @click="() => delete state.editableData[record.user_id]" class="ml15" style="color: #e70102;">
-                  <CloseOutlined />
-                </span>
-              </a-tooltip>
-            </span>
-            <span v-else class="fz18 flex-align-center flex-row" style="color: #2d8cf0">
-              <a-tooltip title="编辑">
-                <EditOutlined @click="edit(record)" />
-              </a-tooltip>
-            </span>
-          </div>
-        </template>
-      </a-table>
+        @change="refreshData" :rowClassName="rowClassName" :dataSource="state.list" :pagination="paginationConfig" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { message } from 'ant-design-vue'
-import { onMounted, reactive, UnwrapRef } from 'vue'
+import { onMounted, reactive } from 'vue'
 import Search from './components/Search.vue';
-import { getAllUsersInfo, updateUserInfo } from '/@/api/manage'
+import { getAllUsersInfo } from '/@/api/manage'
 import { ELocalStorageKey } from '/@/types'
-import { EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'
 
 export interface Member {
   user_id: string
@@ -60,15 +27,11 @@ export interface Member {
 interface State {
   listLoading: boolean,
   list: Member[],
-  editableData: {
-    [key: string]: any,
-  },
 }
 
 const state: State = reactive({
   listLoading: false,
   list: [],
-  editableData: {},
 })
 
 const paginationConfig = reactive({
@@ -121,29 +84,11 @@ const columns = [
     dataIndex: 'workspace_name',
     width: 150,
   },
-  {
-    title: 'Mqtt 用户',
-    dataIndex: 'mqtt_username',
-    width: 150,
-    slots: { customRender: 'mqtt_username' },
-  },
-  {
-    title: 'Mqtt 密码',
-    dataIndex: 'mqtt_password',
-    width: 150,
-    slots: { customRender: 'mqtt_password' },
-  },
   {
     title: '创建时间',
     dataIndex: 'create_time',
     width: 150,
     sorter: (a: Member, b: Member) => a.create_time.localeCompare(b.create_time),
-  },
-  {
-    title: '操作',
-    dataIndex: 'action',
-    width: 80,
-    slots: { customRender: 'action' },
   }
 ]
 
@@ -160,20 +105,6 @@ const refreshData = async (page: any) => {
   paginationConfig.pageSize = page?.pageSize!
   await fetchList();
 }
-// 点击编辑
-const edit = (record: Member) => {
-  state.editableData[record.user_id] = record;
-}
-
-// 点击保存
-const save = (record: Member) => {
-  delete state.editableData[record.user_id]
-  updateUserInfo(workspaceId, record.user_id, record).then(res => {
-    if (res.code !== 0) {
-      message.error(res.message)
-    }
-  })
-}
 
 // 点击搜索
 const onClickSearch = async (query: any) => {

Web/src/pages/page-web/projects/tsa.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="project-tsa-wrapper ">
-    <div class="scrollbar" :style="{ height: scorllHeight + 'px' }">
+    <div class="scrollbar" :style="{ height: '100%' }">
       <a-collapse style="background: #232323;" :bordered="false" expandIconPosition="right" accordion
         v-model:activeKey="state.activeKey">
         <a-collapse-panel style="border-bottom: 1px solid #4f4f4f;" :key="EDeviceTypeName.Dock" header="机场">
@@ -8,8 +8,7 @@
             <a-empty :image="noData" :image-style="{ height: '60px' }" />
           </div>
           <div v-else class="fz12" style="color: white;">
-            <div v-for="dock in onlineDocks.data" :key="dock.sn"
-              style="background: #3c3c3c; height: 90px; width: 250px; margin-bottom: 10px;">
+            <div class="airport-item" v-for="dock in onlineDocks.data" :key="dock.sn">
               <div style="border-radius: 2px; height: 100%; width: 100%;"
                 class="flex-row flex-justify-between flex-align-center">
                 <div style="float: left; padding: 0px 5px 8px 8px; width: 88%">
@@ -159,8 +158,7 @@
             <a-empty :image="noData" :image-style="{ height: '60px' }" />
           </div>
           <div v-else class="fz12" style="color: white;">
-            <div
-              :class="['device-item', (state.selectedDeviceList.includes(device.gateway.sn) && 'device-item-selected')]"
+            <div :class="['device-item', (state.selectedDevice === device.gateway.sn && 'device-item-selected')]"
               v-for="device in onlineDevices.data" :key="device.sn" @click="onClickSelectedDevice(device)">
               <div class="battery-slide" v-if="deviceInfo[device.sn]">
                 <div style="background: #535759; width: 100%;"></div>
@@ -230,11 +228,11 @@
         </a-collapse-panel>
       </a-collapse>
     </div>
-    <div style="width: 100%;padding-top: 10px; display: flex;justify-content: center;align-items: center;">
+    <!-- <div style="width: 100%;padding-top: 10px; display: flex;justify-content: center;align-items: center;">
       <a-button style="margin-right: 10px;" type="primary" @click="onClickGoHome">
         返回
       </a-button>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -269,7 +267,7 @@ const onlineDocks = reactive({
 
 const state = reactive({
   activeKey: -1,
-  selectedDeviceList: [] as string[],
+  selectedDevice: '',
 })
 
 const mapClickElement = computed(() => store.state.mapClickElement)
@@ -309,18 +307,13 @@ onMounted(() => {
 // 点击选中设备
 const onClickSelectedDevice = (record: OnlineDevice) => {
   const sn = record.gateway.sn;
-  const list = state.selectedDeviceList;
-  if (list.includes(sn)) {// 取消选中
-    state.selectedDeviceList = list.filter(item => item != sn)
-  } else {// 选中后
-    state.selectedDeviceList = [...list, sn]
-    const gatewayInfo = store.state.deviceState.gatewayInfo[sn]
-    if (gatewayInfo) {
-      const coordinate = wgs84togcj02(gatewayInfo.longitude, gatewayInfo.latitude)
-      // 最后点击的进行地图视角跟进
-      root.$map.setCenter(coordinate)
-      console.log('触发绘画实时轨迹');
-    }
+  state.selectedDevice = sn;
+  const gatewayInfo = store.state.deviceState.gatewayInfo[sn];
+  if (gatewayInfo) {
+    const coordinate = wgs84togcj02(gatewayInfo.longitude, gatewayInfo.latitude);
+    // 地图视角平移
+    root.$map.setCenter(coordinate)
+    console.log('触发绘画实时轨迹');
   }
 }
 
@@ -438,6 +431,18 @@ function openLivestreamAgora() {
 </script>
 
 <style lang="scss">
+.airport-item {
+  background: #3c3c3c;
+  width: 100%;
+  height: 100px;
+  box-sizing: border-box;
+  padding-top: 10px;
+  border-radius: 2px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
 .device-item {
   background: #3c3c3c;
   width: 100%;

Web/src/pages/page-web/projects/workspace.vue

@@ -135,10 +135,11 @@ useConnectWebSocket(messageHandler)
 }
 
 .project-app-wrapper {
-  display: flex;
-  transition: width 0.2s ease;
   height: 100%;
   width: 100%;
+  display: flex;
+  transition: width 0.2s ease;
+  overflow: hidden;
 
   .left {
     display: flex;

Web/src/router/index.ts

@@ -24,6 +24,11 @@ const routes: Array<RouteRecordRaw> = [
         name: ERouterName.DEVICES,
         component: () => import('/@/pages/page-web/projects/devices.vue')
       },
+      {
+        path: '/' + ERouterName.WORKSPACE,
+        name: ERouterName.WORKSPACE,
+        component: () => import('/@/pages/page-web/projects/workspace.vue'),
+      },
       {
         path: '/' + ERouterName.TASK,
         name: ERouterName.TASK,
@@ -68,11 +73,6 @@ const routes: Array<RouteRecordRaw> = [
       },
     ]
   },
-  {
-    path: '/' + ERouterName.WORKSPACE,
-    name: ERouterName.WORKSPACE,
-    component: () => import('/@/pages/page-web/projects/workspace.vue'),
-  },
   {
     path: '/' + ERouterName.PILOT,
     name: ERouterName.PILOT,