路径静态

src/api/path.js

@@ -0,0 +1,16 @@
+import request from '@/service'
+
+export const checkCanDiyPathApi = id => {
+  return request({
+    url: `/path/check/${id}`,
+    method: 'GET',
+  })
+}
+
+export const pathPlanApi = data => {
+  return request({
+    url: `/path/plan`,
+    method: 'POST',
+    data,
+  })
+}

src/components/PathPlan.vue

@@ -5,14 +5,37 @@
         {{ getHeaderText(item) }}
       </div>
       <div class="box" v-else>
-        <p class="line1"></p>
-        <p class="line2"></p>
+        <p class="line1">{{ getLine(item, 1) }}</p>
+        <p class="line2">{{ getLine(item, 2) }}</p>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+const props = defineProps({
+  excelData: {
+    type: Array,
+  },
+})
+
+const getLine = (index, position) => {
+  const arr = props.excelData.filter(item => item.num == index)
+  if (arr?.length > 0) {
+    const obj = arr[0]
+    if (obj.secondSign && obj.firstSign) {
+      if (position == 1) {
+        // 截取后4位
+        return obj.firstSign.substr(-4)
+      } else {
+        // 截取后4位
+        return obj.secondSign.substr(-4)
+      }
+    }
+  }
+  return ''
+}
+
 const isTableHeader = index => {
   return index <= 14 || index % 14 == 1
 }
@@ -29,7 +52,7 @@ const getHeaderText = index => {
 
 <style lang="scss" scoped>
 .excel_container {
-  width: 800px;
+  width: 1000px;
   height: 800px;
   display: grid;
   grid-template-columns: repeat(14, 1fr);

src/components/Task.vue

@@ -40,7 +40,7 @@
         :closeBtn="true"
       >
         <div class="path_wrap">
-          <PathPlan />
+          <PathPlan :excelData="excelData" />
         </div>
       </t-drawer>
       <t-dialog
@@ -120,7 +120,9 @@ import {
   delTaskApi,
   updateOperByTaskIdApi,
 } from '@/api/task'
+import { getNuclearExcelApi } from '@/api'
 import PathPlan from 'cpns/PathPlan'
+import { checkCanDiyPathApi, pathPlanApi } from '@/api/path'
 import { useAccountStore, useTaskStore, useImageStore } from '@/store'
 import { allOperatorApi } from '@/api/publish'
 import moment from 'moment'
@@ -131,6 +133,7 @@ const imageStore = useImageStore()
 export default {
   data() {
     return {
+      excelData: [],
       pathVisible: false,
       userList: [],
       formData: { operatorId: '' },
@@ -346,6 +349,7 @@ export default {
                   <t-button
                     variant="text"
                     theme="primary"
+                    disabled={row.canUpload}
                     onClick={() => this.showPathDialog(row.id)}
                   >
                     自定义路径规划
@@ -415,18 +419,37 @@ export default {
     },
   },
   methods: {
-    saveDiyPath() {
-      console.log('diy')
+    async getExcelList(taskId) {
+      const res = await getNuclearExcelApi(taskId)
+      if (res?.code == 200) {
+        // 根据data的serialNumber算出序列号
+        const list = res.data.list
+        list.map(item => {
+          const arr = item.serialNumber.split('-')
+          item.num = parseInt(arr[0]) * 14 + parseInt(arr[1]) + 1
+        })
+        this.excelData = list
+      }
+    },
+    async saveDiyPath() {
+      const res = await pathPlanApi()
     },
-    showPathDialog() {
+    showPathDialog(taskId) {
+      this.currentTaskId = taskId
+      this.getExcelList(taskId)
       const confirmDia = this.$dialog.confirm({
         header: '提示',
         body: '已开始的任务无法更改路径。复杂路径规划后，将清除创建任务时所选择的规则路径，确认要进行自定义规划吗？',
         confirmBtn: '确定',
         cancelBtn: '取消',
-        onConfirm: ({ e }) => {
+        onConfirm: async ({ e }) => {
+          const res = await checkCanDiyPathApi(taskId)
+          if (res?.code == 200) {
             // 请求成功后，销毁弹框
             this.pathVisible = true
+          } else {
+            this.$message.error(res?.msg)
+          }
           confirmDia.destroy()
         },
         onClose: ({ e, trigger }) => {