复杂路径静态页面

src/components/PathPlan.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="excel_container">
+    <div class="common_grid" v-for="item in 14 * 14" :key="item">
+      <div v-if="isTableHeader(item)" class="table_header_box">
+        {{ getHeaderText(item) }}
+      </div>
+      <div class="box" v-else>
+        <p class="line1"></p>
+        <p class="line2"></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const isTableHeader = index => {
+  return index <= 14 || index % 14 == 1
+}
+const getHeaderText = index => {
+  if (index <= 14 && index > 1) {
+    return index - 1
+  }
+  const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N']
+  if (index % 14 == 1) {
+    return arr[parseInt(index / 14) - 1]
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.excel_container {
+  width: 800px;
+  height: 800px;
+  display: grid;
+  grid-template-columns: repeat(14, 1fr);
+  grid-template-rows: repeat(14, 1fr);
+  border: 1px solid #ebebeb;
+  box-sizing: border-box;
+  border-radius: 6px;
+  overflow: hidden;
+  .common_grid {
+    border: 1px solid #ebebeb;
+    margin-left: -1px;
+    margin-top: -1px;
+    .box {
+      width: 100%;
+      height: 100%;
+      padding: 7px;
+      background: #ffffff;
+      font-size: 18px;
+      font-weight: 500;
+      color: #b3b3b3;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .success {
+      cursor: pointer;
+      background: #e1fff1;
+      color: #01ff82;
+    }
+    .fail {
+      cursor: pointer;
+      background: #fee2e2;
+      color: #fe0c0c;
+    }
+    .process {
+      cursor: pointer;
+      background: #4350dc;
+      color: #ffffff;
+    }
+    .cur {
+      cursor: pointer;
+    }
+    .table_header_box {
+      background: #f1f1f1;
+      box-sizing: border-box;
+      font-size: 26px;
+      font-weight: bold;
+      color: #3d3d3d;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+  }
+}
+</style>

src/components/Task.vue

@@ -30,6 +30,19 @@
         :onClose="closeDelDialog"
         :cancelBtn="null"
       />
+      <t-drawer
+        :visible="pathVisible"
+        size="'100%'"
+        header="自定义路径规划"
+        :onConfirm="saveDiyPath"
+        @cancel="pathVisible = false"
+        :onOverlayClick="() => (pathVisible = false)"
+        :closeBtn="true"
+      >
+        <div class="path_wrap">
+          <PathPlan />
+        </div>
+      </t-drawer>
       <t-dialog
         header="修改操作员"
         :visible="updateOperVisible"
@@ -107,6 +120,7 @@ import {
   delTaskApi,
   updateOperByTaskIdApi,
 } from '@/api/task'
+import PathPlan from 'cpns/PathPlan'
 import { useAccountStore, useTaskStore, useImageStore } from '@/store'
 import { allOperatorApi } from '@/api/publish'
 import moment from 'moment'
@@ -117,6 +131,7 @@ const imageStore = useImageStore()
 export default {
   data() {
     return {
+      pathVisible: false,
       userList: [],
       formData: { operatorId: '' },
       pubRules: {
@@ -331,6 +346,13 @@ export default {
                   <t-button
                     variant="text"
                     theme="primary"
+                    onClick={() => this.showPathDialog(row.id)}
+                  >
+                    自定义路径规划
+                  </t-button>
+                  <t-button
+                    variant="text"
+                    theme="primary"
                     disabled={row.canUpload}
                     onClick={() =>
                       this.viewDetail(
@@ -374,6 +396,9 @@ export default {
       ],
     }
   },
+  components: {
+    PathPlan,
+  },
   computed: {
     actionAddress() {
       return `${import.meta.env.VITE_BASE_URL}/upload/${this.currentTaskId}`
@@ -390,6 +415,25 @@ export default {
     },
   },
   methods: {
+    saveDiyPath() {
+      console.log('diy')
+    },
+    showPathDialog() {
+      const confirmDia = this.$dialog.confirm({
+        header: '提示',
+        body: '已开始的任务无法更改路径。复杂路径规划后，将清除创建任务时所选择的规则路径，确认要进行自定义规划吗？',
+        confirmBtn: '确定',
+        cancelBtn: '取消',
+        onConfirm: ({ e }) => {
+          // 请求成功后，销毁弹框
+          this.pathVisible = true
+          confirmDia.destroy()
+        },
+        onClose: ({ e, trigger }) => {
+          confirmDia.hide()
+        },
+      })
+    },
     async getAllOperator() {
       const res = await allOperatorApi()
       if (res?.code == 200) {
@@ -623,4 +667,9 @@ export default {
   background: #d8d8d8;
   cursor: default;
 }
+.path_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import Cookies from '@/utils/cookie'
 const Home = () => import('@/pages')
 const Login = () => import('@/pages/Login')
+const PathPlan = () => import('cpns/PathPlan')
 
 // 配置路由信息
 const routes = [