From 2d0b749c42abdd40de929cde5f9e4e239abfe378 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Wed, 4 Sep 2024 11:19:18 +0800
Subject: fix: 修改设备接口
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/axios/api/device.js            |  36 +++++++---
 src/components/layout/leftMenu.vue |   2 +-
 src/i18n/en.js                     |  10 ++-
 src/i18n/zh.js                     |   8 +++
 src/styles/common.scss             |  11 ++-
 src/views/devices/index.vue        |  28 +++++---
 src/views/devices/start.vue        | 140 ++++++++++++++++++++++++++++++++++---
 7 files changed, 203 insertions(+), 32 deletions(-)

diff --git a/src/axios/api/device.js b/src/axios/api/device.js
index 374e453..67ee8e5 100644
--- a/src/axios/api/device.js
+++ b/src/axios/api/device.js
@@ -4,7 +4,7 @@ import axiosInstance from '@/axios/index.js';
 export const deviceListApi = async (data) => {
   try {
     const res = await axiosInstance({
-      url: '/api/v1/device',
+      url: '/api/v1/env',
       method: 'GET',
       params: data,
     });
@@ -18,7 +18,7 @@ export const deviceListApi = async (data) => {
 export const myDeviceListApi = async (data) => {
   try {
     const res = await axiosInstance({
-      url: '/api/v1/device/mySession',
+      url: '/api/v1/env/mySession',
       method: 'GET',
       params: data,
     });
@@ -32,7 +32,7 @@ export const myDeviceListApi = async (data) => {
 export const deviceDetailApi = async (id) => {
   try {
     const res = await axiosInstance({
-      url: `/api/v1/device/${id}`,
+      url: `/api/v1/env/${id}`,
       method: 'GET',
     });
     return res.data;
@@ -41,11 +41,25 @@ export const deviceDetailApi = async (id) => {
   }
 };
 
-// app已安装列表
-export const deviceAppListApi = async (data) => {
+// 创建会话
+export const deviceSessionApi = async (id, data) => {
   try {
     const res = await axiosInstance({
-      url: '/api/v1/device/app',
+      url: `/api/v1/env/${id}/session`,
+      method: 'POST',
+      data: data,
+    });
+    return res.data;
+  } catch (err) {
+    return err.data;
+  }
+};
+
+// app列表
+export const deviceAppListApi = async (envId, sessionId, data) => {
+  try {
+    const res = await axiosInstance({
+      url: `/api/v1/env/${envId}/session/${sessionId}/app`,
       method: 'GET',
       params: data,
     });
@@ -55,11 +69,11 @@ export const deviceAppListApi = async (data) => {
   }
 };
 
-//  device安装应用
+// 安装app
 export const deviceInstallApi = async (data) => {
   try {
     const res = await axiosInstance({
-      url: '/api/v1/device/app',
+      url: `/api/v1/env/${envId}/session/${sessionId}/app`,
       method: 'POST',
       data: data,
       headers: { 'Content-Type': 'multipart/form-data' },
@@ -70,11 +84,11 @@ export const deviceInstallApi = async (data) => {
   }
 };
 
-//  device卸载应用
+// 卸载app
 export const deviceUninstallApi = async (data) => {
   try {
     const res = await axiosInstance({
-      url: '/api/v1/device/app',
+      url: `/api/v1/env/${envId}/session/${sessionId}/app`,
       method: 'DELETE',
       params: data,
     });
@@ -82,4 +96,4 @@ export const deviceUninstallApi = async (data) => {
   } catch (err) {
     return err.data;
   }
-};
\ No newline at end of file
+};
diff --git a/src/components/layout/leftMenu.vue b/src/components/layout/leftMenu.vue
index d9517de..6c0b54e 100644
--- a/src/components/layout/leftMenu.vue
+++ b/src/components/layout/leftMenu.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import { toRefs, ref, watch, computed, onBeforeMount } from 'vue';
+import { toRefs, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSystemStore } from '@/store/index';
 import { userMenus } from '@/utils/constants'
diff --git a/src/i18n/en.js b/src/i18n/en.js
index dc503ca..56ced4c 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -36,6 +36,7 @@ export default {
     create_time: 'Create time',
     update_user: 'Update user',
     update_time: 'Update time',
+    modify_time: 'Modify time',
     last_modified_by: 'Last Modified by',
     last_modified_time: 'Last Modified time',
     last_login_ip: 'Last Login',
@@ -87,6 +88,10 @@ export default {
     goBackWorkspace: 'Go back workspace',
     role: 'Role',
     about: 'About',
+    type: 'Type',
+    ip: 'IP',
+    size: 'Size',
+    permission: 'Permission',
   },
   application: {
     application: 'Application',
@@ -130,7 +135,7 @@ export default {
       name: 'Display name',
       access_level: 'Access level',
       regular: 'Regular',
-      regular_tips:'Regular users have access to their workspace with assigned roles.',
+      regular_tips: 'Regular users have access to their workspace with assigned roles.',
       administrator: 'Administrator',
       administrator_tips: 'Administrator have access to admin area.',
       password: 'Password',
@@ -164,6 +169,9 @@ export default {
     capture: 'Capture',
     stop_capture: 'Stop capture',
     file_explorer: 'File explorer',
+    attribute: 'Attribute',
+    owner: 'Owner',
+    group: 'Group',
   },
   job: {
     create_job: 'Create Job',
diff --git a/src/i18n/zh.js b/src/i18n/zh.js
index cf76228..a3eec5d 100644
--- a/src/i18n/zh.js
+++ b/src/i18n/zh.js
@@ -36,6 +36,7 @@ export default {
     create_time: '创建时间',
     update_user: '更新用户',
     update_time: '更新时间',
+    modify_time: '修改时间',
     last_modified_time: '最后修改时间',
     last_modified_by: '最后修改人',
     last_login_ip: '最后登录IP',
@@ -87,6 +88,10 @@ export default {
     goBackWorkspace: '返回工作空间',
     role: '角色',
     about: '关于',
+    type: '类型',
+    ip: 'IP',
+    size: '大小',
+    permission: '权限',
   },
   application: {
     application: '应用',
@@ -164,6 +169,9 @@ export default {
     capture: '捕包',
     end_capture: '停止捕包',
     file_explorer: '文件浏览器',
+    attribute: '属性',
+    owner: '所有人',
+    group: '组',
   },
   job: {
     create_job: '创建职位',
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 52e7a4a..492fd37 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -48,6 +48,15 @@
   outline: none;
 }
 
+.el-dropdown-menu__item:not(.is-disabled):focus {
+  background-color: unset;
+  color: unset;
+}
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background-color: var(--el-dropdown-menuItem-hover-fill);
+  color: var(--el-dropdown-menuItem-hover-color);
+}
+
 .slide-fade-enter-active {
   transition: transform 0.3s ease-out;
 }
@@ -57,4 +66,4 @@
 .slide-fade-enter-from,
 .slide-fade-leave-to {
   transform: translateX(100%);
-}
\ No newline at end of file
+}
diff --git a/src/views/devices/index.vue b/src/views/devices/index.vue
index 4fa8e32..4aff78a 100644
--- a/src/views/devices/index.vue
+++ b/src/views/devices/index.vue
@@ -140,7 +140,7 @@
 <script setup>
 import { ref, reactive, onBeforeMount, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { deviceListApi, myDeviceListApi } from '@/axios/api';
+import { deviceListApi, myDeviceListApi, deviceSessionApi } from '@/axios/api';
 import { ElMessage } from 'element-plus';
 import { toThousands, bytes } from '@/utils';
 import { useSystemStore } from '@/store/index';
@@ -311,15 +311,23 @@ const fileSize = (number) => {
 };
 
 // 启动
-const start = (id) => {
-  const routeData = router.resolve({
-    name: 'device_start',
-    params: {
-      workspace: workspace.value.name,
-      id: id,
-    },
-  });
-  window.open(routeData.href, '_blank');
+const start = async (id) => {
+  // const params = {
+  //   workspace: workspace.value.id,
+  // };
+  // const res = await deviceSessionApi(id, params);
+  // if (res.code == 200) {
+  //   const routeData = router.resolve({
+  //     name: 'device_start',
+  //     params: {
+  //       workspace: workspace.value.name,
+  //       id: id,
+  //     },
+  //   });
+  //   window.open(routeData.href, '_blank');
+  // } else {
+  //   ElMessage.error(res.msg || res.error);
+  // }
 };
 
 const packets = (summary) => {
diff --git a/src/views/devices/start.vue b/src/views/devices/start.vue
index fdbf88c..3354603 100644
--- a/src/views/devices/start.vue
+++ b/src/views/devices/start.vue
@@ -105,18 +105,20 @@
                     >
                       <i
                         class="asw-icon icon-View cp"
-                        @click="tableView(item)"
+                        @click="directoryView(item)"
                       ></i>
                     </el-tooltip>
                     <el-dropdown trigger="click">
                       <i class="asw-icon icon-More1 cp"></i>
                       <template #dropdown>
                         <el-dropdown-menu>
-                          <el-dropdown-item>
-                            {{ t('overall.download') }}
+                          <el-dropdown-item @click="directoryDownload(item)">
+                            <i class="asw-icon icon-Download"></i>
+                            <span>{{ t('overall.download') }}</span>
                           </el-dropdown-item>
-                          <el-dropdown-item>
-                            {{ t('overall.delete') }}
+                          <el-dropdown-item @click="directoryDelete(item)">
+                            <i class="asw-icon icon-Delete"></i>
+                            <span>{{ t('overall.delete') }}</span>
                           </el-dropdown-item>
                         </el-dropdown-menu>
                       </template>
@@ -130,9 +132,61 @@
       </el-tabs>
     </div>
   </div>
+  <el-dialog
+    v-model="visible"
+    align-center
+    width="480"
+    :title="t('device.attribute')"
+    class="directory-dialog"
+  >
+    <div class="directory-dialog-name">
+      <svg>
+        <use xlink:href="#icon-wenjianjia"></use>
+      </svg>
+      <!-- <svg fill="var(--text_secondary)">
+        <use xlink:href="#icon-wenben"></use>
+      </svg> -->
+      <span>media </span>
+    </div>
+    <div class="directory-dialog-info">
+      <div class="directory-info-row">
+        <span>{{t('overall.type')}}:</span>
+        <span class="directory-info-row-value">Catalog File</span>
+      </div>
+      <div class="directory-info-row">
+        <span>{{t('overall.ip')}}:</span>
+        <span class="directory-info-row-value">192.168.40.44</span>
+      </div>
+      <div class="directory-info-row">
+        <span>{{t('device.location')}}:</span>
+        <span class="directory-info-row-value">/Appsketch</span>
+      </div>
+      <div class="directory-info-row">
+        <span>{{t('overall.size')}}:</span>
+        <span class="directory-info-row-value">21</span>
+      </div>
+      <div class="directory-info-row">
+        <span>{{t('overall.modify_time')}}:</span>
+        <span class="directory-info-row-value">2023/10/27 16:40:00</span>
+      </div>
+      <div class="directory-info-row">
+        <span>{{t('device.owner')}}:</span>
+        <span class="directory-info-row-value">1234</span>
+      </div>
+      <div class="directory-info-row">
+        <span>{{t('device.group')}}:</span>
+        <span class="directory-info-row-value">1234</span>
+      </div>
+      <div class="directory-info-row">
+        <span>{{t('overall.permission')}}:</span>
+        <span class="directory-info-row-value">drwxr-xr-x</span>
+      </div>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router';
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import RFB from '@novnc/novnc/lib/rfb';
@@ -141,14 +195,23 @@ import { debounce } from 'lodash';
 import { bytes } from '@/utils';
 import moment from 'moment-timezone';
 import {
+  deviceDetailApi,
   deviceAppListApi,
   deviceInstallApi,
   deviceUninstallApi,
 } from '@/axios/api';
 import { ElMessage, ElMessageBox } from 'element-plus';
 
+const router = useRouter();
 const { t } = useI18n();
 
+let routeParams = null;
+const disposeRoute = () => {
+  let currentRoute = router.currentRoute.value;
+  routeParams = currentRoute.params;
+};
+disposeRoute();
+
 // 已下载列表
 const installed = ref([
   { packageName: 1, name: 'com.bytedance.douyin' },
@@ -237,6 +300,13 @@ const fileSize = (number) => {
   return data.value + ' ' + data.unit;
 };
 
+const visible = ref(false);
+const directoryView = async () => {
+  visible.value = true;
+};
+const directoryDownload = async () => {};
+const directoryDelete = async () => {};
+
 const novncRef = ref(null);
 let rfb = null;
 const connect = () => {
@@ -255,6 +325,19 @@ const connect = () => {
   rfb.viewOnly = false; // 是否应阻止将任何事件（例如按键或鼠标移动）发送到服务器
 };
 
+const loading = ref(false);
+const getData = async () => {
+  loading.value = true;
+  const res = await deviceDetailApi(routeParams.id);
+  if (res.code == 200) {
+    console.log(res);
+  } else {
+    ElMessage.error(res.msg || res.error);
+  }
+  loading.value = false;
+};
+getData()
+
 const deviceBack = (e) => {
   rfb.sendKey('0xff1b', 'Escape', true);
 };
@@ -276,7 +359,7 @@ const destroy = () => {
 };
 mitter.on('desktopEnd', () => {
   destroy();
-  window.close()
+  window.close();
 });
 
 onMounted(() => {
@@ -430,6 +513,9 @@ onUnmounted(() => {
               font-size: 16px;
               color: var(--text_secondary);
               cursor: pointer;
+              &:hover {
+                color: var(--primary) !important;
+              }
             }
             i.icon-home {
               color: var(--text);
@@ -470,13 +556,13 @@ onUnmounted(() => {
               }
             }
             .directory-name {
-              width: 45%;
+              width: 40%;
             }
             .directory-size {
               width: 15%;
             }
             .directory-time {
-              width: 25%;
+              width: 30%;
             }
             .directory-actions {
               width: 15%;
@@ -498,5 +584,43 @@ onUnmounted(() => {
 <style lang="scss">
 .device_start-page {
   padding: 0 !important;
+  .directory-dialog {
+    padding: 0;
+    .el-dialog__header {
+      padding: 12px 20px;
+      font-size: 16px;
+      color: var(--text);
+      font-weight: 600;
+      border-bottom: 1px solid var(--border);
+    }
+    .el-dialog__body {
+      padding: 0 20px;
+      .directory-dialog-name {
+        height: 42px;
+        display: flex;
+        align-items: center;
+        gap: 0 8px;
+        border-bottom: 1px solid var(--border);
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+      .directory-dialog-info {
+        padding: 16px 10px;
+        .directory-info-row {
+          height: 20px;
+          line-height: 20px;
+          font-size: 14px;
+          color: var(--text);
+          margin-bottom: 4px;
+          .directory-info-row-value {
+            font-weight: 600;
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
-- 
cgit v1.2.3