From 0ab924f3ae9be176485bd14f621e0030cd110916 Mon Sep 17 00:00:00 2001
From: freshman-white <2514756131@qq.com>
Date: Mon, 11 Sep 2023 17:45:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:ui=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/search-icon.svg          |  1 +
 src/components/MediaPanel.vue             | 21 +++++++++----
 src/components/task/TaskPanel.vue         | 22 ++++++++++----
 src/pages/page-web/projects/Firmwares.vue | 36 +++++++++++------------
 src/pages/page-web/projects/devices.vue   | 22 +++++++-------
 src/pages/page-web/projects/members.vue   | 14 ++++-----
 src/pages/page-web/projects/task.vue      | 12 --------
 src/styles/flex.style.scss                |  5 ++++
 src/types/device-firmware.ts              |  6 ++--
 9 files changed, 78 insertions(+), 61 deletions(-)
 create mode 100644 src/assets/icons/search-icon.svg

diff --git a/src/assets/icons/search-icon.svg b/src/assets/icons/search-icon.svg
new file mode 100644
index 0000000..8d4dea1
--- /dev/null
+++ b/src/assets/icons/search-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694421109878" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1968" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z" p-id="1969" fill="#8a8a8a"></path></svg>
\ No newline at end of file
diff --git a/src/components/MediaPanel.vue b/src/components/MediaPanel.vue
index 4496bdd..8c0593f 100644
--- a/src/components/MediaPanel.vue
+++ b/src/components/MediaPanel.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="header" ref="headerRef">
-    <a-button  type="primary" large class="btn-primary" @click='openFileDialog'>创建文件夹</a-button>
+    <a-button  type="primary" large class="btn-primary btn-primary" @click='openFileDialog'>创建文件夹</a-button>
     <div v-show="state.selectedRowIds.length" class="other-btn">
-      <a-button   large class="btn-primary">压缩并下载</a-button>
-      <a-button   large class="btn-primary" @click="move()">移动</a-button>
-      <a-button   large class="btn-primary" @click="deleteRow()">删除</a-button>
+      <a-button   large class="btn-primary btn-primary">压缩并下载</a-button>
+      <a-button   large class="btn-primary btn-primary" @click="move()">移动</a-button>
+      <a-button   large class="btn-primary btn-primary" @click="deleteRow()">删除</a-button>
     </div>
 
     <div class="search-content">
@@ -42,7 +42,7 @@
                 <a-form-item name="name">
                   <a-input v-model:value="searchParam.name" placeholder="按文件名称搜索">
                     <template #addonAfter>
-                      <ZoomInOutlined />
+                      <img src="../assets/icons/search-icon.svg" class="search-icon"/>
                     </template>
                   </a-input>
                 </a-form-item>
@@ -404,6 +404,17 @@ const getHeight = () => {
     cursor: pointer;
   }
 }
+::v-deep {
+  .ant-input{
+    border-right:none
+  }
+  .ant-input-group-addon{
+  background-color: #fff;
+}
+}
+.search-icon{
+  width:16px;
+}
 .video-img{
   width:25px;
   height: 25px;
diff --git a/src/components/task/TaskPanel.vue b/src/components/task/TaskPanel.vue
index 4060b6e..95fc931 100644
--- a/src/components/task/TaskPanel.vue
+++ b/src/components/task/TaskPanel.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="header">计划库</div>
+  <div class="header">
+    <template v-if="taskRoute">
+      <router-link :to="{ name: ERouterName.CREATE_PLAN}">
+        <a-button type="primary" class="bth-common">新建计划</a-button>
+      </router-link>
+    </template>
+  </div>
   <div class="plan-panel-wrapper">
     <a-table class="plan-table" :columns="columns" :data-source="plansData.data" row-key="job_id"
       :pagination="paginationProp" :scroll="{ x: true, y: `calc(100vh - 196px)`}" @change="refreshData">
@@ -97,14 +103,16 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from '@vue/reactivity'
+import { reactive, ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { ERouterName, ELocalStorageKey } from '/@/types/enums'
 import { message } from 'ant-design-vue'
 import { TableState } from 'ant-design-vue/lib/table/interface'
-import { onMounted } from 'vue'
+
 import { IPage } from '/@/api/http/type'
 import { deleteTask, updateTaskStatus, UpdateTaskStatus, getWaylineJobs, Task, uploadMediaFileNow } from '/@/api/wayline'
 import { useMyStore } from '/@/store'
-import { ELocalStorageKey } from '/@/types/enums'
+
 import { useFormatTask } from './use-format-task'
 import { TaskStatus, TaskProgressInfo, TaskProgressStatus, TaskProgressWsStatusMap, MediaStatus, MediaStatusProgressInfo, TaskMediaHighestPriorityProgressInfo } from '/@/types/task'
 import { useTaskWsEvent } from './use-task-ws-event'
@@ -112,6 +120,10 @@ import { getErrorMessage } from '/@/utils/error-code/index'
 import { commonColor } from '/@/utils/color'
 import { ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
 
+const route = useRoute()
+const taskRoute = computed(() => {
+  return route.name === ERouterName.TASK
+})
 const store = useMyStore()
 const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
 
@@ -329,6 +341,7 @@ async function onUploadMediaFileNow (jobId: string) {
   width: 100%;
   padding: 16px;
   .plan-table {
+    padding: 16px;
     background: #fff;
     margin-top: 10px;
     width:100%;
@@ -356,7 +369,6 @@ async function onUploadMediaFileNow (jobId: string) {
 .header {
   width: 100%;
   height: 60px;
-  background: #fff;
   padding: 16px;
   font-size: 20px;
   font-weight: bold;
diff --git a/src/pages/page-web/projects/Firmwares.vue b/src/pages/page-web/projects/Firmwares.vue
index 54fd590..72b00b7 100644
--- a/src/pages/page-web/projects/Firmwares.vue
+++ b/src/pages/page-web/projects/Firmwares.vue
@@ -3,23 +3,23 @@
   <div class="ml20 mt20 mr20 flex-row flex-align-center flex-justify-between">
     <div class="flex-row">
       <a-button type="primary" @click="sVisible = true">
-        Click to Upload
+        上传
       </a-button>
       <a-modal :visible="sVisible"
-         title="Import Firmware File"
+         title="导入固件文件"
          :closable="false"
          @cancel="onCancel"
          @ok="uploadFile"
          centered>
          <a-form :rules="rules" ref="formRef" :model="uploadParam" :label-col="{ span: 6 }">
-          <a-form-item name="status" label="Avaliable" required>
+          <a-form-item name="status" label="是否可用" required>
             <a-switch v-model:checked="uploadParam.status" />
           </a-form-item>
-          <a-form-item name="device_name" label="Device Name" required>
+          <a-form-item name="device_name" label="设备型号" required>
             <a-select
               style="width: 220px"
               mode="multiple"
-              placeholder="can choose multiple"
+              placeholder="请选择"
               v-model:value="uploadParam.device_name">
               <a-select-option
                 v-for="k in DeviceNameEnum"
@@ -30,10 +30,10 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item name="release_note" label="Release Note" required>
+          <a-form-item name="release_note" label="发布说明" required>
             <a-textarea v-model:value="uploadParam.release_note" showCount :maxlength="300" />
           </a-form-item>
-          <a-form-item label="File" required>
+          <a-form-item label="文件" required>
             <a-upload
               :multiple="false"
               :before-upload="beforeUpload"
@@ -43,7 +43,7 @@
              >
               <a-button type="primary">
                 <UploadOutlined />
-                Import Firmware File
+                导入固件文件
               </a-button>
             </a-upload>
           </a-form-item>
@@ -83,7 +83,7 @@
         <a-input-search
           :enter-button="true"
           v-model:value="param.product_version"
-          placeholder="input search verison"
+          placeholder="固件版本搜索"
           style="width: 250px"
           @search="getAllFirmwares(pageParam)"/>
       </div>
@@ -130,14 +130,14 @@ interface FirmwareData {
   firmware: Firmware[]
 }
 const columns = [
-  { title: 'Model', dataIndex: 'device_name', width: 120, ellipsis: true, className: 'titleStyle', slots: { customRender: 'device_name' } },
-  { title: 'File Name', dataIndex: 'file_name', width: 220, ellipsis: true, className: 'titleStyle', slots: { customRender: 'file_name' } },
-  { title: 'Firmware Version', dataIndex: 'product_version', width: 180, className: 'titleStyle' },
-  { title: 'File Size', dataIndex: 'file_size', width: 150, className: 'titleStyle', slots: { customRender: 'file_size' } },
-  { title: 'Creator', dataIndex: 'username', width: 100, className: 'titleStyle' },
-  { title: 'Release Date', dataIndex: 'released_time', width: 160, sorter: (a: Firmware, b: Firmware) => a.released_time.localeCompare(b.released_time), className: 'titleStyle' },
-  { title: 'Release Note', dataIndex: 'release_note', width: 300, ellipsis: true, className: 'titleStyle', slots: { customRender: 'release_note' } },
-  { title: 'Status', dataIndex: 'firmware_status', width: 100, className: 'titleStyle', slots: { customRender: 'firmware_status' } },
+  { title: '设备型号', dataIndex: 'device_name', width: 120, ellipsis: true, className: 'titleStyle', slots: { customRender: 'device_name' } },
+  { title: '文件名称', dataIndex: 'file_name', width: 220, ellipsis: true, className: 'titleStyle', slots: { customRender: 'file_name' } },
+  { title: '固件版本', dataIndex: 'product_version', width: 180, className: 'titleStyle' },
+  { title: '文件大小', dataIndex: 'file_size', width: 150, className: 'titleStyle', slots: { customRender: 'file_size' } },
+  { title: '用户名', dataIndex: 'username', width: 100, className: 'titleStyle' },
+  { title: '发布时间', dataIndex: 'released_time', width: 160, sorter: (a: Firmware, b: Firmware) => a.released_time.localeCompare(b.released_time), className: 'titleStyle' },
+  { title: '发布说明', dataIndex: 'release_note', width: 300, ellipsis: true, className: 'titleStyle', slots: { customRender: 'release_note' } },
+  { title: '固件状态', dataIndex: 'firmware_status', width: 100, className: 'titleStyle', slots: { customRender: 'firmware_status' } },
 ]
 
 const data = reactive<FirmwareData>({
@@ -153,7 +153,7 @@ const paginationProp = reactive({
   total: 0
 })
 
-const deviceNameList = ref<any[]>([{ label: 'All', value: '' }])
+const deviceNameList = ref<any[]>([{ label: '全部', value: '' }])
 
 type Pagination = TableState['pagination']
 
diff --git a/src/pages/page-web/projects/devices.vue b/src/pages/page-web/projects/devices.vue
index 07c722d..dcf71f8 100644
--- a/src/pages/page-web/projects/devices.vue
+++ b/src/pages/page-web/projects/devices.vue
@@ -2,10 +2,10 @@
 <template>
   <a-menu v-model:selectedKeys="current" mode="horizontal" @select="select">
     <a-menu-item :key="EDeviceTypeName.Aircraft" class="ml20">
-      Aircraft
+      飞行器
     </a-menu-item>
     <a-menu-item :key="EDeviceTypeName.Dock">
-      Dock
+      机场
     </a-menu-item>
   </a-menu>
   <div class="device-table-wrap table flex-display flex-column">
@@ -139,10 +139,10 @@ const loading = ref(true)
 const deleteTip = ref<boolean>(false)
 const deleteSn = ref<string>()
 const columns: ColumnProps[] = [
-  { title: 'Model', dataIndex: 'device_name', width: 100, className: 'titleStyle' },
-  { title: 'SN', dataIndex: 'device_sn', width: 100, className: 'titleStyle', ellipsis: true, slots: { customRender: 'sn' } },
+  { title: '设备型号', dataIndex: 'device_name', width: 100, className: 'titleStyle' },
+  { title: '设备SN', dataIndex: 'device_sn', width: 100, className: 'titleStyle', ellipsis: true, slots: { customRender: 'sn' } },
   {
-    title: 'Name',
+    title: '设备组织名称',
     dataIndex: 'nickname',
     width: 100,
     sorter: (a: Device, b: Device) => a.nickname.localeCompare(b.nickname),
@@ -150,10 +150,10 @@ const columns: ColumnProps[] = [
     ellipsis: true,
     slots: { customRender: 'nickname' }
   },
-  { title: 'Firmware Version', dataIndex: 'firmware_version', width: 150, className: 'titleStyle', slots: { customRender: 'firmware_version' } },
-  { title: 'Status', dataIndex: 'status', width: 100, className: 'titleStyle', slots: { customRender: 'status' } },
+  { title: '固件版本', dataIndex: 'firmware_version', width: 150, className: 'titleStyle', slots: { customRender: 'firmware_version' } },
+  { title: '在线状态', dataIndex: 'status', width: 100, className: 'titleStyle', slots: { customRender: 'status' } },
   {
-    title: 'Workspace',
+    title: '所属项目',
     dataIndex: 'workspace_name',
     width: 100,
     className: 'titleStyle',
@@ -172,10 +172,10 @@ const columns: ColumnProps[] = [
       return obj
     }
   },
-  { title: 'Joined', dataIndex: 'bound_time', width: 150, sorter: (a: Device, b: Device) => a.bound_time.localeCompare(b.bound_time), className: 'titleStyle' },
-  { title: 'Last Online', dataIndex: 'login_time', width: 150, sorter: (a: Device, b: Device) => a.login_time.localeCompare(b.login_time), className: 'titleStyle' },
+  { title: '加入组织时间', dataIndex: 'bound_time', width: 150, sorter: (a: Device, b: Device) => a.bound_time.localeCompare(b.bound_time), className: 'titleStyle' },
+  { title: '在线时间', dataIndex: 'login_time', width: 150, sorter: (a: Device, b: Device) => a.login_time.localeCompare(b.login_time), className: 'titleStyle' },
   {
-    title: 'Actions',
+    title: '操作',
     dataIndex: 'actions',
     width: 100,
     className: 'titleStyle',
diff --git a/src/pages/page-web/projects/members.vue b/src/pages/page-web/projects/members.vue
index 642599a..134faec 100644
--- a/src/pages/page-web/projects/members.vue
+++ b/src/pages/page-web/projects/members.vue
@@ -57,13 +57,13 @@ interface MemberData {
   member: Member[]
 }
 const columns = [
-  { title: 'Account', dataIndex: 'username', width: 150, sorter: (a: Member, b: Member) => a.username.localeCompare(b.username), className: 'titleStyle' },
-  { title: 'User Type', dataIndex: 'user_type', width: 150, className: 'titleStyle' },
-  { title: 'Workspace Name', dataIndex: 'workspace_name', width: 150, className: 'titleStyle' },
-  { title: 'Mqtt Username', dataIndex: 'mqtt_username', width: 150, className: 'titleStyle', slots: { customRender: 'mqtt_username' } },
-  { title: 'Mqtt Password', dataIndex: 'mqtt_password', width: 150, className: 'titleStyle', slots: { customRender: 'mqtt_password' } },
-  { title: 'Joined', dataIndex: 'create_time', width: 150, sorter: (a: Member, b: Member) => a.create_time.localeCompare(b.create_time), className: 'titleStyle' },
-  { title: 'Action', dataIndex: 'action', width: 100, className: 'titleStyle', slots: { customRender: 'action' } },
+  { title: '账号', dataIndex: 'username', width: 150, sorter: (a: Member, b: Member) => a.username.localeCompare(b.username), className: 'titleStyle' },
+  { title: '人员组织名称', dataIndex: 'user_type', width: 150, className: 'titleStyle' },
+  { title: '工作区名称', dataIndex: 'workspace_name', width: 150, className: 'titleStyle' },
+  { title: '用户名', dataIndex: 'mqtt_username', width: 150, className: 'titleStyle', slots: { customRender: 'mqtt_username' } },
+  { title: '密码', dataIndex: 'mqtt_password', width: 150, className: 'titleStyle', slots: { customRender: 'mqtt_password' } },
+  { title: '创建时间', dataIndex: 'create_time', width: 150, sorter: (a: Member, b: Member) => a.create_time.localeCompare(b.create_time), className: 'titleStyle' },
+  { title: '操作', dataIndex: 'action', width: 100, className: 'titleStyle', slots: { customRender: 'action' } },
 ]
 
 const data = reactive<MemberData>({
diff --git a/src/pages/page-web/projects/task.vue b/src/pages/page-web/projects/task.vue
index 7f8a33e..b68ea63 100644
--- a/src/pages/page-web/projects/task.vue
+++ b/src/pages/page-web/projects/task.vue
@@ -4,18 +4,6 @@
       <a-row>
         <a-col :span="1"></a-col>
         <a-col :span="20">计划库</a-col>
-        <a-col :span="2">
-          <span v-if="taskRoute">
-            <router-link :to="{ name: ERouterName.CREATE_PLAN}">
-              <PlusOutlined class="route-icon"/>
-            </router-link>
-          </span>
-          <span v-else>
-            <router-link :to="{ name: ERouterName.TASK}">
-              <MinusOutlined class="route-icon"/>
-            </router-link>
-          </span>
-        </a-col>
         <a-col :span="1"></a-col>
       </a-row>
     </div>
diff --git a/src/styles/flex.style.scss b/src/styles/flex.style.scss
index 25ad19a..451aab8 100644
--- a/src/styles/flex.style.scss
+++ b/src/styles/flex.style.scss
@@ -328,3 +328,8 @@ m-5 {
 .pt50 {
   padding-top: 50px;
 }
+// 按钮统一样式
+.bth-common{
+  height: 36px;
+  min-width: 120px;
+}
diff --git a/src/types/device-firmware.ts b/src/types/device-firmware.ts
index 3857b1f..ef11593 100644
--- a/src/types/device-firmware.ts
+++ b/src/types/device-firmware.ts
@@ -11,9 +11,9 @@ export interface Firmware {
 }
 
 export enum FirmwareStatusEnum {
-  NONE = 'All',
-  FALSE = 'Disabled',
-  TRUE = 'Available'
+  NONE = '全部',
+  FALSE = '不可用',
+  TRUE = '可用'
 }
 
 export interface FirmwareQueryParam {