From f1a6cfb975648d665f82a9a4975a12b20dfef674 Mon Sep 17 00:00:00 2001
From: freshman-white <2514756131@qq.com>
Date: Wed, 6 Sep 2023 17:56:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=88=AA=E7=BA=BF=E5=BA=93=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E5=92=8C=E8=8B=B1=E4=B8=93=E6=96=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/wayline.ts                      |  6 ++
 src/assets/icons/line.svg               |  1 +
 src/components/GMap.vue                 | 54 +++++++++++++---
 src/components/MediaPanel.vue           | 21 ++++--
 src/components/common/sidebar.vue       | 12 ++--
 src/components/common/topbar.vue        |  2 +-
 src/components/livestream-newOthers.vue |  4 +-
 src/components/task/CreatePlan.vue      | 54 +++++++++-------
 src/components/task/TaskPanel.vue       | 35 +++++-----
 src/pages/page-web/index.vue            |  2 +-
 src/pages/page-web/projects/layer.vue   | 10 +--
 src/pages/page-web/projects/task.vue    |  2 +-
 src/pages/page-web/projects/tsa.vue     | 14 ++--
 src/pages/page-web/projects/wayline.vue | 86 +++++++++++++++++++++----
 src/store/index.ts                      |  9 +++
 src/types/task.ts                       | 10 +--
 16 files changed, 226 insertions(+), 96 deletions(-)
 create mode 100644 src/assets/icons/line.svg

diff --git a/src/api/wayline.ts b/src/api/wayline.ts
index a917804..474e413 100644
--- a/src/api/wayline.ts
+++ b/src/api/wayline.ts
@@ -135,3 +135,9 @@ export const uploadMediaFileNow = async function (workspaceId: string, jobId: st
   const result = await request.post(url)
   return result.data
 }
+// 获取指定航线
+export const getNevigationLine = async function (workspaceId: string, id: any): Promise<IWorkspaceResponse<{}>> {
+  const url = `${HTTP_PREFIX}/workspaces/${workspaceId}/waylines/get/${id}`
+  const result = await request.get(url)
+  return result.data
+}
diff --git a/src/assets/icons/line.svg b/src/assets/icons/line.svg
new file mode 100644
index 0000000..c06947d
--- /dev/null
+++ b/src/assets/icons/line.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="1693968072497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4876" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M796.444444 557.511111c-22.755556-45.511111-68.266667-73.955556-113.777777-73.955555H358.4c-39.822222 0-68.266667-28.444444-68.266667-68.266667v-28.444445c0-5.688889 0-17.066667 5.688889-28.444444 5.688889-28.444444 34.133333-51.2 68.266667-51.2h56.888889c17.066667 0 34.133333-17.066667 34.133333-34.133333s-22.755556-28.444444-39.822222-28.444445h-56.888889C295.822222 244.622222 244.622222 284.444444 227.555556 341.333333c0 17.066667-5.688889 28.444444-5.688889 45.511111v28.444445c0 73.955556 56.888889 130.844444 130.844444 130.844444H682.666667c22.755556 0 51.2 17.066667 62.577777 39.822223 5.688889 17.066667 11.377778 39.822222 11.377778 62.577777s-5.688889 39.822222-11.377778 56.888889c-11.377778 22.755556-34.133333 39.822222-62.577777 39.822222H312.888889c-5.688889-68.266667-62.577778-125.155556-130.844445-125.155555-73.955556 0-130.844444 56.888889-130.844444 130.844444s56.888889 130.844444 130.844444 130.844445c51.2 0 96.711111-28.444444 119.466667-73.955556H682.666667c51.2 0 96.711111-28.444444 119.466666-73.955555 11.377778-22.755556 17.066667-51.2 17.066667-85.333334s-5.688889-62.577778-22.755556-91.022222z m-551.822222 210.488889v5.688889c-5.688889 22.755556-34.133333 45.511111-62.577778 45.511111-39.822222 0-68.266667-34.133333-68.266666-68.266667 0-39.822222 28.444444-68.266667 68.266666-68.266666s68.266667 34.133333 68.266667 68.266666c0 5.688889 0 5.688889-5.688889 17.066667zM830.577778 142.222222c-73.955556 0-130.844444 56.888889-130.844445 130.844445 0 73.955556 56.888889 130.844444 130.844445 130.844444 73.955556 0 130.844444-56.888889 130.844444-130.844444 0-73.955556-56.888889-130.844444-130.844444-130.844445z m0 199.111111c-34.133333 0-68.266667-28.444444-68.266667-68.266666s28.444444-68.266667 68.266667-68.266667 68.266667 34.133333 68.266666 68.266667c0 39.822222-34.133333 68.266667-68.266666 68.266666z" fill="#cdcdcd" p-id="4877"></path><path d="M477.866667 273.066667c0 17.066667 11.377778 34.133333 34.133333 34.133333h130.844444c17.066667 0 34.133333-17.066667 34.133334-34.133333s-17.066667-34.133333-34.133334-34.133334H512c-17.066667 5.688889-34.133333 17.066667-34.133333 34.133334z" fill="#cdcdcd" p-id="4878"></path></svg>
\ No newline at end of file
diff --git a/src/components/GMap.vue b/src/components/GMap.vue
index 762993f..03f5be0 100644
--- a/src/components/GMap.vue
+++ b/src/components/GMap.vue
@@ -20,6 +20,15 @@
         <a style="color: red;"><CloseOutlined /></a>
       </div>
     </div>
+    <!-- 航线信息 -->
+    <div class="g-nevigation" v-if="nevigationVisible">
+      <div class="nevigation-content">
+        <div><div>航线长度</div><div>{{(nevigationInformation.line_length/1).toFixed(0)}}m</div></div>
+        <div><div>预计执行时间</div><div>{{getTime(nevigationInformation.scheduled_time)}}</div></div>
+        <div><div>航点</div><div>{{nevigationInformation.geometry_point_size}}</div></div>
+        <!-- <div><div>照片</div><div>4</div></div> -->
+      </div>
+    </div>
     <!-- 飞机OSD -->
     <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12">
       <div style="opacity: 0.8;background: #000;">
@@ -556,7 +565,12 @@ export default defineComponent({
     const osdVisible = computed(() => {
       return store.state.osdVisible
     })
-
+    const nevigationVisible = computed(() => {
+      return store.state.nevigationVisible
+    })
+    const nevigationInformation = computed(() => {
+      return store.state.nevigationInformation
+    })
     watch(() => store.state.deviceStatusEvent,
       data => {
         if (Object.keys(data.deviceOnline).length !== 0) {
@@ -663,9 +677,9 @@ export default defineComponent({
     function play () {
       // routeName.value = 'LiveOthers'
       showLive.value = !showLive.value
-      nextTick(() => {
-        showLive.value ? liveStreamRef.value.onStart() : liveStreamRef.value.onStop()
-      })
+      if (!showLive.value) {
+        liveStreamRef.value.onStop()
+      }
     }
 
     // dock 控制面板
@@ -721,6 +735,7 @@ export default defineComponent({
       // console.log(store.state.coverList)
     }
     async function postPolygonResource (obj) {
+      console.log(obj, 'hafhhaf')
       const req = getPoygonResource(obj)
       setLayers(req)
       updateCoordinates('gcj02-wgs84', req)
@@ -839,7 +854,13 @@ export default defineComponent({
         }
       }
     }
-
+    function getTime (data:any) {
+      if (data >= 60) {
+        return `${(data / 60).toFixed()}m${(data % 60).toFixed()}s`
+      } else {
+        return `${data.toFixed()}s`
+      }
+    }
     return {
       draw,
       play,
@@ -848,7 +869,10 @@ export default defineComponent({
       // routeName,
       mouseMode,
       drawVisible,
+      nevigationInformation,
+      nevigationVisible,
       osdVisible,
+      getTime,
       pin,
       state,
       M30,
@@ -874,7 +898,21 @@ export default defineComponent({
 .g-map-wrapper {
   height: 100%;
   width: 100%;
-
+  .g-nevigation{
+    position: absolute;
+    bottom: 60px;
+    width: 100%;
+    .nevigation-content{
+      display:flex;
+      justify-content: center;
+      color:#666;
+      font-weight: 500;
+      font-size:26px;
+      &>div{
+        padding-right: 20px;
+      }
+    }
+  }
   .g-action-panel {
     position: absolute;
     top: 16px;
@@ -911,10 +949,10 @@ export default defineComponent({
   left: 10px;
   top: 10px;
   width: 480px;
-  /* background: #000; */
+  background: #000;
   color: #fff;
   border-radius: 2px;
-  /* opacity: 0.8; */
+  // opacity: 0.8;
   .content-padding{
     padding:16px;
     .video-btn{
diff --git a/src/components/MediaPanel.vue b/src/components/MediaPanel.vue
index 7a575f1..4496bdd 100644
--- a/src/components/MediaPanel.vue
+++ b/src/components/MediaPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="header">
+  <div class="header" ref="headerRef">
     <a-button  type="primary" large class="btn-primary" @click='openFileDialog'>创建文件夹</a-button>
     <div v-show="state.selectedRowIds.length" class="other-btn">
       <a-button   large class="btn-primary">压缩并下载</a-button>
@@ -56,7 +56,7 @@
       <div class="bread-content">
       <span v-for="(item,index) in breadList" :key="item" @click="jumpToPath(index)" :class="[index!=breadList.length-1?'tab-click':'']">{{ item }}<span v-if="index!=breadList.length-1" >/</span></span>
     </div>
-      <a-table :columns="columns" ref='tableRef' :data-source="mediaData.data" :scroll="{ x: '100%', y: 400 }" :row-selection="rowSelection">
+      <a-table :columns="columns" ref='tableRef' :data-source="mediaData.data" :scroll="{ x: '100%', y:`calc(100vh - ${otherHeight}px)` }" :row-selection="rowSelection" :pagination="false">
         <template v-for="col in ['file_name','payload','drone','create_time']" #[col]="{ text,index }" :key="col">
             <div @click="goDetail(mediaData.data[index],index)" v-if="col=='file_name'">
               <img src="../assets/icons/folder.svg" v-if='mediaData.data[index].file_type==0'>
@@ -76,10 +76,16 @@
             <div v-else>{{ text||'--' }}</div>
         </template>
         <template #action="{ record, index }">
-          <a-tooltip title="download">
+          <a-tooltip title="下载">
             <a class="fz18 space" @click="downloadMedia(record)"><DownloadOutlined /></a>
+          </a-tooltip>
+          <a-tooltip title="编辑">
             <a class="fz18 space" @click="editName(index)"><EditOutlined /></a>
+          </a-tooltip>
+          <a-tooltip title="删除">
             <a class="fz18 space" @click="deleteRow(index)"><DeleteOutlined /></a>
+          </a-tooltip>
+          <a-tooltip title="移入">
             <a class="fz18 space" @click="move(mediaData.data[index].id)"><LoginOutlined /></a>
           </a-tooltip>
     </template>
@@ -145,6 +151,7 @@ const loading = ref(false)
 const searchParam = reactive({ timestamp: [], type: [], name: '' })
 const state = reactive({ rowid: '', selectedRowIds: [], folderOpen: false, fileName: '新建文件夹', fatherId: 0, changeName: '', index: '', folderTree: false })
 const tableRef = ref()
+const headerRef = ref()
 // 面包屑对应的文件名
 const breadList = ref(['全部文件'])
 // 面包屑对应的父级id
@@ -195,6 +202,7 @@ const paginationProp = reactive({
   total: 0
 })
 const treeList = ref([])
+const otherHeight = ref(0)
 const fieldNames = reactive({
   children: 'children',
   title: 'file_name',
@@ -229,6 +237,7 @@ onMounted(() => {
       const tableContainer = tableRef.value.$el.querySelector('.ant-table-body')
       tableContainer.addEventListener('scroll', handleScroll)
     }
+    getHeight()
   })
   getFiles(workspaceId, paginationProp)
 })
@@ -362,7 +371,6 @@ const move = (id?:any) => {
   floderTreeData(workspaceId).then(res => {
     if (res.code === 0) {
       treeList.value = res.data
-      console.log(treeList.value, res.data, '1212')
       state.folderTree = true
     }
   })
@@ -370,7 +378,10 @@ const move = (id?:any) => {
 const selectTree = (seid:any, e:any) => {
   selectedKeys.value = e.node.dataRef.id
 }
-
+const getHeight = () => {
+  // 32表格padding值，60误差值
+  otherHeight.value = document.querySelector('.header').offsetHeight + 32 + 60 + document.querySelector('.bread-content').offsetHeight
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/common/sidebar.vue b/src/components/common/sidebar.vue
index 41f6bb7..2374249 100644
--- a/src/components/common/sidebar.vue
+++ b/src/components/common/sidebar.vue
@@ -53,12 +53,12 @@ export default defineComponent({
   setup () {
     const root = getRoot()
     const options = [
-      { key: 0, label: 'Tsa', path: '/' + ERouterName.TSA, icon: 'TeamOutlined' },
-      { key: 1, label: 'Livestream', path: '/' + ERouterName.LIVESTREAM, icon: 'VideoCameraOutlined' },
-      { key: 2, label: 'Annotations', path: '/' + ERouterName.LAYER, icon: 'EnvironmentOutlined' },
-      { key: 3, label: 'Media Files', path: '/' + ERouterName.MEDIA, icon: 'PictureOutlined' },
-      { key: 4, label: 'Flight Route Library', path: '/' + ERouterName.WAYLINE, icon: 'NodeIndexOutlined' },
-      { key: 5, label: 'Task Plan Library', path: '/' + ERouterName.TASK, icon: 'CalendarOutlined' }
+      { key: 0, label: '团队', path: '/' + ERouterName.TSA, icon: 'TeamOutlined' },
+      { key: 1, label: '直播', path: '/' + ERouterName.LIVESTREAM, icon: 'VideoCameraOutlined' },
+      { 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' }
     ]
 
     function selectedRoute (item: IOptions) {
diff --git a/src/components/common/topbar.vue b/src/components/common/topbar.vue
index 4f0bff3..69e4462 100644
--- a/src/components/common/topbar.vue
+++ b/src/components/common/topbar.vue
@@ -27,7 +27,7 @@
           <a-menu theme="dark" class="flex-column flex-justify-between flex-align-center">
             <a-menu-item>
               <span class="mr10" style="font-size: 16px;"><ExportOutlined /></span>
-              <span @click="logout">Log Out</span>
+              <span @click="logout">退出登录</span>
             </a-menu-item>
           </a-menu>
         </template>
diff --git a/src/components/livestream-newOthers.vue b/src/components/livestream-newOthers.vue
index 307913e..e4c595d 100644
--- a/src/components/livestream-newOthers.vue
+++ b/src/components/livestream-newOthers.vue
@@ -195,7 +195,6 @@ const onRefresh = async () => {
   videoSelected.value = null
   await getLiveSnCapacity(osdVisible.value.sn)
     .then(res => {
-      console.log(res)
       if (res.code === 0) {
         if (res.data === null) {
           console.warn('warning: get live capacity is null!!!')
@@ -210,8 +209,9 @@ const onRefresh = async () => {
           livestreamSource.value.forEach((ele: any) => {
             temp.push({ label: ele.name + '-' + ele.sn, value: ele.sn, more: ele.cameras_list })
           })
-          droneSelected.value = temp[0].value
+          // droneSelected.value = temp[0].value
         }
+        onStart()
       }
     })
     .catch(error => {
diff --git a/src/components/task/CreatePlan.vue b/src/components/task/CreatePlan.vue
index 21006d8..d4c69c0 100644
--- a/src/components/task/CreatePlan.vue
+++ b/src/components/task/CreatePlan.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="create-plan-wrapper">
     <div class="header">
-      Create Plan
+      新建计划
     </div>
     <div class="content">
       <a-form ref="valueRef" layout="horizontal" :hideRequiredMark="true" :rules="rules" :model="planBody" labelAlign="left">
-        <a-form-item label="Plan Name" name="name" :labelCol="{span: 23}">
-          <a-input style="background: black;"  placeholder="Please enter plan name" v-model:value="planBody.name"/>
+        <a-form-item label="计划名称" name="name" :labelCol="{span: 23}">
+          <a-input style="background: black;"  placeholder="请输入名称" v-model:value="planBody.name"/>
         </a-form-item>
         <!-- 航线 -->
-        <a-form-item label="Flight Route" :wrapperCol="{offset: 7}" name="file_id">
+        <a-form-item label="航线" :wrapperCol="{offset: 15}" name="file_id">
           <router-link
             :to="{name: 'select-plan'}"
             @click="selectRoute"
           >
-          Select Route
+          选择航线
           </router-link>
         </a-form-item>
         <a-form-item v-if="planBody.file_id" style="margin-top: -15px;">
@@ -37,16 +37,16 @@
               </span>
             </div>
             <div class="mt5 ml10" style="color: hsla(0,0%,100%,0.35);">
-              <span class="mr10">Update at {{ new Date(wayline.update_time).toLocaleString() }}</span>
+              <span class="mr10">更新时间 {{ new Date(wayline.update_time).toLocaleString() }}</span>
             </div>
           </div>
         </a-form-item>
         <!-- 设备 -->
-        <a-form-item label="Device" :wrapperCol="{offset: 10}" v-model:value="planBody.dock_sn" name="dock_sn">
+        <a-form-item label="设备" :wrapperCol="{offset: 15}" v-model:value="planBody.dock_sn" name="dock_sn">
           <router-link
             :to="{name: 'select-plan'}"
             @click="selectDevice"
-          >Select Device</router-link>
+          >选择设备</router-link>
         </a-form-item>
         <a-form-item v-if="planBody.dock_sn" style="margin-top: -15px;">
           <div class="panel" style="padding-top: 5px;" @click="selectDock(dock)">
@@ -62,7 +62,7 @@
           </div>
         </a-form-item>
         <!-- 任务类型 -->
-        <a-form-item label="Plan Timer" class="plan-timer-form-item" :labelCol="{span: 23}">
+        <a-form-item label="计划时间" class="plan-timer-form-item" :labelCol="{span: 23}">
           <div style="white-space: nowrap;">
             <a-radio-group v-model:value="planBody.task_type" button-style="solid">
               <a-radio-button v-for="type in TaskTypeOptions" :value="type.value" :key="type.value">{{ type.label }}</a-radio-button>
@@ -70,21 +70,21 @@
           </div>
         </a-form-item>
         <!-- 执行时间 -->
-        <a-form-item label="Start Time" v-if="planBody.task_type === TaskType.Timed" name="select_execute_time" :labelCol="{span: 23}">
+        <a-form-item label="开始时间" v-if="planBody.task_type === TaskType.Timed" name="select_execute_time" :labelCol="{span: 12}">
           <a-date-picker
             v-model:value="planBody.select_execute_time"
             format="YYYY-MM-DD HH:mm:ss"
               show-time
-            placeholder="Select Time"
+            placeholder="选择时间"
             />
         </a-form-item>
         <!-- RTH Altitude Relative to Dock -->
-        <a-form-item label="RTH Altitude Relative to Dock (m)" :labelCol="{span: 23}" name="rth_altitude">
+        <a-form-item label="返航高度 (m)" :labelCol="{span: 23}" name="rth_altitude">
           <a-input-number v-model:value="planBody.rth_altitude" :min="20" :max="1500" class="width-100" required>
           </a-input-number>
         </a-form-item>
         <!-- Lost Action -->
-        <a-form-item label="Lost Action" :labelCol="{span: 23}" name="out_of_control_action">
+        <a-form-item label="失联动作" :labelCol="{span: 23}" name="out_of_control_action">
           <div style="white-space: nowrap;">
             <a-radio-group v-model:value="planBody.out_of_control_action" button-style="solid">
               <a-radio-button v-for="action in OutOfControlActionOptions" :value="action.value" :key="action.value">
@@ -95,9 +95,9 @@
         </a-form-item>
         <a-form-item class="width-100" style="margin-bottom: 40px;">
           <div class="footer">
-            <a-button class="mr10" style="background: #3c3c3c;" @click="closePlan">Cancel
+            <a-button class="mr10" style="background: #3c3c3c;" @click="closePlan">取消
             </a-button>
-            <a-button type="primary" @click="onSubmit" :disabled="disabled">OK
+            <a-button type="primary" @click="onSubmit" :disabled="disabled">确认
             </a-button>
           </div>
         </a-form-item>
@@ -145,8 +145,8 @@ const disabled = ref(false)
 const routeName = ref('')
 const planBody = reactive({
   name: '',
-  file_id: computed(() => store.state.waylineInfo.id),
-  dock_sn: computed(() => store.state.dockInfo.device_sn),
+  file_id: computed(() => store.state?.waylineInfo?.id),
+  dock_sn: computed(() => store.state?.dockInfo?.device_sn),
   task_type: TaskType.Immediate,
   select_execute_time: undefined as Moment| undefined,
   rth_altitude: '',
@@ -157,17 +157,21 @@ const drawerVisible = ref(false)
 const valueRef = ref()
 const rules = {
   name: [
-    { required: true, message: 'Please enter plan name.' },
-    { max: 20, message: 'Length should be 1 to 20', trigger: 'blur' }
+    { required: true, message: '请输入计划名称' },
+    { max: 20, message: '长度为1~20', trigger: 'blur' }
   ],
-  file_id: [{ required: true, message: 'Select Route' }],
-  dock_sn: [{ required: true, message: 'Select Device' }],
-  select_execute_time: [{ required: true, message: 'Select start time' }],
+  file_id: [{ required: true, message: '请选择航线' }],
+  dock_sn: [{ required: true, message: '请选择设备' }],
+  select_execute_time: [{ required: true, message: '请选择开始时间' }],
   rth_altitude: [
     {
       validator: async (rule: RuleObject, value: string) => {
-        if (!/^[0-9]{1,}$/.test(value)) {
-          throw new Error('RTH Altitude Relative Require number')
+        if (!value) {
+          throw new Error('请输入返航导读')
+        } else {
+          if (!/^[0-9]{1,}$/.test(value)) {
+            throw new Error('请输入整数')
+          }
         }
       },
     }
@@ -266,7 +270,7 @@ function selectDevice () {
       .ant-radio-button-wrapper{
         background-color: #232323;
         color: #fff;
-        width: 80%;
+        width: 70%;
         text-align: center;
         &.ant-radio-button-wrapper-checked{
           background-color: #1890ff;
diff --git a/src/components/task/TaskPanel.vue b/src/components/task/TaskPanel.vue
index fd6a204..4060b6e 100644
--- a/src/components/task/TaskPanel.vue
+++ b/src/components/task/TaskPanel.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="header">Task Plan Library</div>
+  <div class="header">计划库</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: '100%', y: 600 }" @change="refreshData">
+      :pagination="paginationProp" :scroll="{ x: true, y: `calc(100vh - 196px)`}" @change="refreshData">
       <!-- 执行时间 -->
       <template #duration="{ record }">
         <div class="flex-row" style="white-space: pre-wrap">
@@ -53,7 +53,7 @@
             {{ formatMediaTaskStatus(record).number }}
             <a-tooltip v-if="formatMediaTaskStatus(record).status === MediaStatus.ToUpload" placement="bottom" arrow-point-at-center >
               <template #title>
-              <div>Upload now</div>
+              <div>立即下载</div>
               </template>
               <UploadOutlined class="ml5" :style="{color: commonColor.BLUE, fontSize: '16px' }"  @click="onUploadMediaFileNow(record.job_id)"/>
             </a-tooltip>
@@ -70,7 +70,7 @@
             cancel-text="No"
             @confirm="onDeleteTask(record.job_id)"
           >
-            <a-button type="primary" size="small">Delete</a-button>
+            <a-button type="primary" size="small">删除</a-button>
           </a-popconfirm>
           <a-popconfirm
             v-if="record.status === TaskStatus.Carrying"
@@ -79,7 +79,7 @@
             cancel-text="No"
             @confirm="onSuspendTask(record.job_id)"
           >
-            <a-button type="primary" size="small">Suspend</a-button>
+            <a-button type="primary" size="small">暂停</a-button>
           </a-popconfirm>
           <a-popconfirm
             v-if="record.status === TaskStatus.Paused"
@@ -88,7 +88,7 @@
             cancel-text="No"
             @confirm="onResumeTask(record.job_id)"
           >
-            <a-button type="primary" size="small">Resume</a-button>
+            <a-button type="primary" size="small">开始</a-button>
           </a-popconfirm>
         </div>
       </template>
@@ -131,63 +131,63 @@ const paginationProp = reactive({
 
 const columns = [
   {
-    title: 'Planned/Actual Time',
+    title: '计划|实际时间',
     dataIndex: 'duration',
     width: 200,
     slots: { customRender: 'duration' },
   },
   {
-    title: 'Status',
+    title: '执行状态',
     key: 'status',
     width: 150,
     slots: { customRender: 'status' }
   },
   {
-    title: 'Plan Name',
+    title: '计划名称',
     dataIndex: 'job_name',
     width: 100,
   },
   {
-    title: 'Type',
+    title: '类型',
     dataIndex: 'taskType',
     width: 100,
     slots: { customRender: 'taskType' },
   },
   {
-    title: 'Flight Route Name',
+    title: '航线名称',
     dataIndex: 'file_name',
     width: 100,
   },
   {
-    title: 'Dock Name',
+    title: '机场名称',
     dataIndex: 'dock_name',
     width: 100,
     ellipsis: true
   },
   {
-    title: 'RTH Altitude Relative to Dock (m)',
+    title: '返航高度(m)',
     dataIndex: 'rth_altitude',
     width: 120,
   },
   {
-    title: 'Lost Action',
+    title: '失联动作',
     dataIndex: 'out_of_control_action',
     width: 120,
     slots: { customRender: 'lostAction' },
   },
   {
-    title: 'Creator',
+    title: '创建者',
     dataIndex: 'username',
     width: 120,
   },
   {
-    title: 'Media File Upload',
+    title: '媒体文件下载',
     key: 'media_upload',
     width: 160,
     slots: { customRender: 'media_upload' }
   },
   {
-    title: 'Action',
+    title: '操作',
     width: 120,
     slots: { customRender: 'action' }
   }
@@ -331,6 +331,7 @@ async function onUploadMediaFileNow (jobId: string) {
   .plan-table {
     background: #fff;
     margin-top: 10px;
+    width:100%;
   }
   .action-area {
 
diff --git a/src/pages/page-web/index.vue b/src/pages/page-web/index.vue
index 8616925..7b7b290 100644
--- a/src/pages/page-web/index.vue
+++ b/src/pages/page-web/index.vue
@@ -37,7 +37,7 @@
           :disabled="loginBtnDisabled"
           @click="onSubmit"
         >
-          Login
+          登录
         </a-button>
       </a-form-item>
     </a-form>
diff --git a/src/pages/page-web/projects/layer.vue b/src/pages/page-web/projects/layer.vue
index c494a05..76fa96d 100644
--- a/src/pages/page-web/projects/layer.vue
+++ b/src/pages/page-web/projects/layer.vue
@@ -3,7 +3,7 @@
     <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="22">Annotations</a-col>
+        <a-col :span="22">标注</a-col>
         <a-col :span="1"></a-col>
       </a-row>
     </div>
@@ -18,7 +18,7 @@
     />
     </div>
     <a-drawer
-      title="Map Element"
+      title="标注信息"
       placement="right"
       :closable="true"
       v-model:visible="visible"
@@ -29,7 +29,7 @@
     >
       <div class="drawer-element-content">
         <div class="name element-item">
-          <span class="title">Name:</span>
+          <span class="title">名称:</span>
           <a-input
             v-model:value="layerState.layerName"
             style="width:120px"
@@ -82,7 +82,7 @@
           />
         </div>
         <div class="color-content">
-          <span class="mr30">Color: </span>
+          <span class="mr30">颜色: </span>
           <div
             v-for="item in colors"
             :key="item.id"
@@ -99,7 +99,7 @@
         </div>
       </div>
       <div class="flex-row flex-justify-around flex-align-center mt20">
-        <a-button type="primary" @click="deleteElement">Delete</a-button>
+        <a-button type="primary" @click="deleteElement">删除</a-button>
       </div>
     </a-drawer>
   </div>
diff --git a/src/pages/page-web/projects/task.vue b/src/pages/page-web/projects/task.vue
index 3e83954..7f8a33e 100644
--- a/src/pages/page-web/projects/task.vue
+++ b/src/pages/page-web/projects/task.vue
@@ -3,7 +3,7 @@
     <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">Task Plan Library</a-col>
+        <a-col :span="20">计划库</a-col>
         <a-col :span="2">
           <span v-if="taskRoute">
             <router-link :to="{ name: ERouterName.CREATE_PLAN}">
diff --git a/src/pages/page-web/projects/tsa.vue b/src/pages/page-web/projects/tsa.vue
index 73690c5..11eb013 100644
--- a/src/pages/page-web/projects/tsa.vue
+++ b/src/pages/page-web/projects/tsa.vue
@@ -3,18 +3,18 @@
     <div>
       <a-row>
         <a-col :span="1"></a-col>
-        <a-col :span="11">My Username</a-col>
+        <a-col :span="11">用户名</a-col>
         <a-col :span="11" align="right" style="font-weight: 700">{{ username }}</a-col>
         <a-col :span="1"></a-col>
       </a-row>
     </div>
     <div class="scrollbar" :style="{ height: scorllHeight + 'px'}">
       <a-collapse :bordered="false" expandIconPosition="right" accordion style="background: #232323;">
-        <a-collapse-panel :key="EDeviceTypeName.Dock" header="Dock" style="border-bottom: 1px solid #4f4f4f;">
+        <a-collapse-panel :key="EDeviceTypeName.Dock" header="机场" style="border-bottom: 1px solid #4f4f4f;">
           <div v-if="onlineDocks.data.length === 0" style="height: 150px; color: white;">
             <a-empty :image="noData" :image-style="{ height: '60px' }" />
           </div>
-          <div v-else class="fz12" style="color: white;">
+          <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 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%">
@@ -137,11 +137,11 @@
         </a-collapse-panel>
       </a-collapse>
       <a-collapse :bordered="false" expandIconPosition="right" accordion style="background: #232323;">
-        <a-collapse-panel v-if='!onlineDevices.data.length' :key="EDeviceTypeName.Aircraft" header="Online Devices" style="border-bottom: 1px solid #4f4f4f;">
-          <div style="height: 150px; color: white;">
+        <a-collapse-panel  :key="EDeviceTypeName.Aircraft" header="在线设备" style="border-bottom: 1px solid #4f4f4f;">
+          <div style="height: 150px; color: white;" v-if='!onlineDevices.data.length' >
             <a-empty :image="noData" :image-style="{ height: '60px' }" />
           </div>
-          <div   class="fz12" style="color: white;" v-else>
+          <div   v-else class="fz12" style="color: white;" >
             <div v-for="device in onlineDevices.data" :key="device.sn" style="background: #3c3c3c; height: 90px; width: 250px; margin-bottom: 10px;">
               <div class="battery-slide" v-if="deviceInfo[device.sn]">
                 <div style="background: #535759; width: 100%;"></div>
@@ -155,7 +155,7 @@
                   <div style="width: 100%; height: 100%;">
                     <a-tooltip>
                       <template #title>{{ device.model ? `${device.model} - ${device.callsign}` : 'No Drone'}}</template>
-                      <span class="text-hidden" style="max-width: 200px; display: block; height: 20px;">{{ device.model ? `${device.model} - ${device.callsign}` : 'No Drone'}}</span>
+                      <span class="text-hidden" style="max-width: 200px; display: block; height: 20px;">{{ device.model ? `${device.model} - ${device.callsign}` : '暂无'}}</span>
                     </a-tooltip>
                   </div>
                   <div class="mt5" style="background: #595959;">
diff --git a/src/pages/page-web/projects/wayline.vue b/src/pages/page-web/projects/wayline.vue
index a9a7bc5..26e1fa4 100644
--- a/src/pages/page-web/projects/wayline.vue
+++ b/src/pages/page-web/projects/wayline.vue
@@ -4,7 +4,7 @@
     <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="15">Flight Route Library</a-col>
+        <a-col :span="15">航线库</a-col>
         <a-col :span="8" v-if="importVisible" class="flex-row flex-justify-end flex-align-center">
           <a-upload
             name="file"
@@ -22,8 +22,8 @@
     </div>
     <div :style="{ height : height + 'px'}" class="scrollbar">
       <div id="data" class="height-100 uranus-scrollbar" v-if="waylinesData.data.length !== 0" @scroll="onScroll">
-        <div v-for="wayline in waylinesData.data" :key="wayline.id">
-          <div class="wayline-panel" style="padding-top: 5px;" @click="selectRoute(wayline)">
+        <div v-for="(wayline,index) in waylinesData.data" :key="wayline.id">
+          <div style="padding-top: 5px;" @click="selectRoute(wayline,index)" :class="[chooseIndex === index ? 'wayline-panel wayline-border':'wayline-panel']">
             <div class="title">
               <a-tooltip :title="wayline.name">
                 <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ wayline.name }}</div>
@@ -40,10 +40,10 @@
                   <template #overlay>
                     <a-menu theme="dark" class="more" style="background: #3c3c3c;">
                       <a-menu-item @click="downloadWayline(wayline.id, wayline.name)">
-                        <span>Download</span>
+                        <span>下载</span>
                       </a-menu-item>
                       <a-menu-item @click="showWaylineTip(wayline.id)">
-                        <span>Delete</span>
+                        <span>删除</span>
                       </a-menu-item>
                     </a-menu>
                   </template>
@@ -58,8 +58,12 @@
                 {{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(payload)] }}
               </span>
             </div>
-            <div class="mt5 ml10" style="color: hsla(0,0%,100%,0.35);">
-              <span class="mr10">Update at {{ new Date(wayline.update_time).toLocaleString() }}</span>
+            <div class="mt5 ml10 line-position" style="color: hsla(0,0%,100%,0.35);">
+              <span class="mr10">更新时间 {{ new Date(wayline.update_time).toLocaleString() }}</span>
+              <a-tooltip>
+                <template #title>{{lineType[wayline.template_types[0]]}}</template>
+                <img class='line-img' :src="line" />
+              </a-tooltip>
             </div>
           </div>
         </div>
@@ -84,7 +88,8 @@
 import { reactive } from '@vue/reactivity'
 import { message } from 'ant-design-vue'
 import { onMounted, onUpdated, ref } from 'vue'
-import { deleteWaylineFile, downloadWaylineFile, getWaylineFiles, importKmzFile } from '/@/api/wayline'
+import { onBeforeRouteLeave } from 'vue-router'
+import { deleteWaylineFile, downloadWaylineFile, getWaylineFiles, importKmzFile, getNevigationLine } from '/@/api/wayline'
 import { ELocalStorageKey, ERouterName } from '/@/types'
 import { EllipsisOutlined, RocketOutlined, CameraFilled, UserOutlined, SelectOutlined } from '@ant-design/icons-vue'
 import { EDeviceType } from '/@/types/device'
@@ -95,7 +100,10 @@ import { IPage } from '/@/api/http/type'
 import { CURRENT_CONFIG } from '/@/api/http/config'
 import { load } from '@amap/amap-jsapi-loader'
 import { getRoot } from '/@/root'
-
+import { wgs84togcj02 } from '/@/vendors/coordtransform'
+import line from '/@/assets/icons/line.svg'
+const lineType = ref(['航点飞行', '航点飞行', '建图航拍', '倾斜摄影', '带状航线'])
+const polyline = ref()
 const loading = ref(false)
 const store = useMyStore()
 const pagination :IPage = {
@@ -107,7 +115,7 @@ const pagination :IPage = {
 const waylinesData = reactive({
   data: [] as WaylineFile[]
 })
-
+const chooseIndex = ref()
 const root = getRoot()
 const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
 const deleteTip = ref(false)
@@ -184,9 +192,39 @@ function downloadWayline (waylineId: string, fileName: string) {
     loading.value = false
   })
 }
-
-function selectRoute (wayline: WaylineFile) {
+// 定位地图上对应的航线
+function selectRoute (wayline: WaylineFile, index:any) {
+  chooseIndex.value = index
   store.commit('SET_SELECT_WAYLINE_INFO', wayline)
+  const map = root.$map
+  if (polyline.value) {
+    map.remove(polyline.value)
+  }
+  getNevigationLine(workspaceId, wayline.id).then(res => {
+    if (res.code === 0) {
+      const path = res.data?.geometry.coordinates
+      path.forEach((item:any, index:any) => {
+        item = wgs84togcj02(
+          item[0],
+          item[1]
+        )
+      })
+      polyline.value = new root.$aMap.Polyline({
+        path: path,
+        strokeWeight: 10, // 线条宽度，默认为 1
+        strokeColor: '#3366bb', // 线条颜色
+        lineJoin: 'round',
+        lineCap: 'round',
+        showDir: true // 折线拐点连接处样式
+      })
+      map.add(polyline.value)
+      map.setCenter(path[0])
+      map.setZoom(12)
+      store.commit('SET_NEVIGATION_VISIBLE', true)
+      const { scheduled_time, line_length, geometry_point_size } = res.data
+      store.commit('SET_NEVIGATION_INFO', { scheduled_time, line_length, geometry_point_size })
+    }
+  })
 }
 
 function onScroll (e: any) {
@@ -235,10 +273,19 @@ const uploadFile = async () => {
     })
   })
 }
-
+// 离开该组件清除航线相关信息
+onBeforeRouteLeave(() => {
+  if (polyline.value) {
+    root.$map.remove(polyline.value)
+  }
+  store.commit('SET_NEVIGATION_VISIBLE', false)
+})
 </script>
 
 <style lang="scss" scoped>
+.wayline-border{
+  border:1px solid #2b85e4;
+}
 .wayline-panel {
   background: #3c3c3c;
   margin-left: auto;
@@ -249,6 +296,9 @@ const uploadFile = async () => {
   font-size: 13px;
   border-radius: 2px;
   cursor: pointer;
+  &:hover{
+  background: #666363;
+  }
   .title {
     display: flex;
     flex-direction: row;
@@ -262,5 +312,15 @@ const uploadFile = async () => {
   overflow: auto;
   scrollbar-width: thin;
   scrollbar-color: #c5c8cc transparent;
+  .line-position{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .line-img{
+    width:20px;
+    margin-right: 10px;
+  }
+  }
+
 }
 </style>
diff --git a/src/store/index.ts b/src/store/index.ts
index d618c0f..dd06fda 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -32,6 +32,8 @@ const initStateFunc = () => ({
   layerBaseInfo: {} as {
     [key:string]:string
   },
+  nevigationVisible: false,
+  nevigationInformation: {}, // 航线信息
   drawVisible: false,
   coverList: [
 
@@ -140,6 +142,13 @@ const mutations: MutationTree<RootStateType> = {
   SET_DRAW_VISIBLE_INFO (state, bool) {
     state.drawVisible = bool
   },
+  SET_NEVIGATION_INFO (state, bool) {
+    console.log(bool, 'bool')
+    Object.assign(state.nevigationInformation, bool)
+  },
+  SET_NEVIGATION_VISIBLE (state, bool) {
+    state.nevigationVisible = bool
+  },
   SET_MAP_ELEMENT_CREATE (state, info) {
     state.wsEvent.mapElementCreat = info
   },
diff --git a/src/types/task.ts b/src/types/task.ts
index b0cf295..caec0d1 100644
--- a/src/types/task.ts
+++ b/src/types/task.ts
@@ -7,8 +7,8 @@ export enum TaskType {
 }
 
 export const TaskTypeMap = {
-  [TaskType.Immediate]: 'Immediate',
-  [TaskType.Timed]: 'Timed',
+  [TaskType.Immediate]: '立即执行',
+  [TaskType.Timed]: '执行时间',
 }
 
 export const TaskTypeOptions = [
@@ -24,9 +24,9 @@ export enum OutOfControlAction {
 }
 
 export const OutOfControlActionMap = {
-  [OutOfControlAction.ReturnToHome]: 'Return to Home',
-  [OutOfControlAction.Hover]: 'Hover',
-  [OutOfControlAction.Land]: 'Land',
+  [OutOfControlAction.ReturnToHome]: '返航',
+  [OutOfControlAction.Hover]: '悬停',
+  [OutOfControlAction.Land]: '降落',
 }
 
 export const OutOfControlActionOptions = [