列表更改

src/App.vue

@@ -56,6 +56,7 @@ export default {
     }).then((res) => {
       sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
     });
+    
     sessionStorage.setItem("token", token);
     sessionStorage.setItem("DeviceId", DeviceId);
     sessionStorage.setItem("flyToken", flyToken);

src/assets/css/list.less

@@ -1,13 +1,16 @@
 .h5mianList {
     .header {
-        padding: 0.3rem 0.4rem;
-        background: gray;
-        color: #fff;
-        display: flex;
-
+        height: 3rem;
+        line-height: 3rem;
+        background: #fff;
+        color: #000;
+        // display: flex;
+        text-align: center;
+        position: relative;
+        border-bottom: 1px solid #f1f1f1;
         .back {
             margin-top: 0.2rem;
-
+            position: absolute;
             img {
                 width: 1.25rem;
                 height: 1.25rem;

src/main.js

@@ -10,7 +10,8 @@ import {
     Form, Field,
     DropdownMenu, DropdownItem,
     Image as VanImage,
-    Uploader
+    Uploader,
+    BackTop 
 } from "vant";
 import "vant/lib/index.css";
 
@@ -19,6 +20,7 @@ const app = createApp(App);
 app.config.globalProperties.$ajax = axios;
 
 app.use(router)
+    .use(BackTop)
     .use(DropdownMenu)
     .use(DropdownItem)
     .use(Uploader)

src/views/task.vue

@@ -2,11 +2,11 @@
   <div class="h5mianList">
     <div class="header">
       <div @click="back" class="back">
-        <van-icon name="arrow-left" />
+        <van-icon size="1.3rem" name="arrow-left" />
       </div>
       <div class="title">任务中心</div>
     </div>
-    <div class="search">
+    <div class="search" style="border-bottom: 1px solid #f1f1f1;">
       <van-dropdown-menu>
         <van-dropdown-item
           v-model="dataForm.isReceived"
@@ -63,70 +63,72 @@
       </van-dropdown-menu>
     </div>
     <div
-      class="content"
+      class="table-container"
       id="scroll-container"
       ref="scrollContainer"
       v-scroll="handleScroll"
     >
-      <div
-        @click="todetails(item.id)"
-        v-for="item in dataList"
-        :key="item.id"
-        class="item_box"
-      >
-        <div class="info">
-          <div>管线名称 ：{{ item.lineName }}</div>
-          <div>管线单元名称 ：{{ item.lineUnitName }}</div>
-          <div>
-            是否被接收：
-            <span :style="{ color: isReceivedColor[item.isReceived] }">
-              {{ isReceived[item.isReceived] }}
-            </span>
-          </div>
-        </div>
-        <div class="bts">
-          <van-button
-            v-if="item.isReceived === '0'"
-            type="danger"
-            size="small"
-            plain
-            style="margin-right: 0.3rem"
-            text="拒绝"
-            @click.stop="refuseTaskArrange(item.id)"
-          ></van-button>
-          <van-button
-            v-if="item.isReceived === '0'"
-            type="primary"
-            text="接受"
-            size="small"
-            @click.stop="receiveTaskArrange(item)"
-          ></van-button>
-          <van-button
-            v-if="item.isReceived === '1'"
-            type="primary"
-            text="下载航线文件"
-            size="small"
-            @click.stop="todownFly(item.verificationCode)"
-          ></van-button>
-          <!-- <van-button
-          class="success"
-          v-if="item.isReceived === '1'"
-          type="primary"
-          size="small"
-          text="导航到起飞点"
-          @click.stop="toFly"
-        ></van-button> -->
-          <van-button
-            class="success"
-            v-if="item.isReceived === '6'"
-            type="primary"
-            size="small"
-            text="完成"
-            @click.stop="completeTaskArrange(item.id)"
-          ></van-button>
-        </div>
-      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>管线及单元</th>
+            <th>状态</th>
+            <th>时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) in dataList" :key="index">
+            <td>{{ row.lineName }}({{ row.lineUnitName }})</td>
+            <td style="width:120px">
+              <span :style="{ color: isReceivedColor[row.isReceived] }">
+                {{ isReceived[row.isReceived] }}
+              </span>
+            </td>
+            <td style="width:90px">{{ row.updateDate.slice(0, -9) }}</td>
+            <td>
+              <div class="bts" style="width:170px">
+                <div
+                  v-if="row.isReceived === '0'"
+                  class="danger"
+                  style="margin-right: 0.3rem"
+                  @click.stop="refuseTaskArrange(row.id)"
+                >
+                  拒绝
+                </div>
+                <div
+                  v-if="row.isReceived === '0'"
+                  @click.stop="receiveTaskArrange(row)"
+                >
+                  接受
+                </div>
+                <div
+                  class="danger"
+                  v-if="row.isReceived === '1'"
+                  @click.stop="cancelTaskArrange(row)"
+                >
+                  取消任务
+                </div>
+                <div
+                  v-if="row.isReceived === '1'"
+                  @click.stop="todownFly(row.verificationCode)"
+                >
+                  下载航线文件
+                </div>
+                <div
+                  class="success"
+                  v-if="row.isReceived === '6'"
+                  @click.stop="completeTaskArrange(row.id)"
+                >
+                  完成
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
+    <van-back-top target=".table-container"/>
   </div>
 </template>
 
@@ -322,6 +324,7 @@ const receiveTaskArrange = (data) => {
     .then(() => {
       let DeviceId = sessionStorage.getItem("DeviceId");
       let info = JSON.parse(sessionStorage.getItem("userInfo"));
+
       data.receivedUserId = info.id;
       data.receivedUserName = info.realName;
       data.deviceId = DeviceId;
@@ -349,6 +352,36 @@ const receiveTaskArrange = (data) => {
       // on cancel
     });
 };
+const cancelTaskArrange = (data) => {
+  showConfirmDialog({
+    title: "提示",
+    message: "是否取消任务",
+  })
+    .then(() => {
+      proxy
+        .$ajax({
+          method: "get",
+          url: `/task/zhkjwurenjitaskarrange/completeTaskArrange/${
+            data.id
+          }/${0}`,
+        })
+        .then((res) => {
+          if (res.data.code != 0) {
+            return showToast(res.data.msg);
+          }
+
+          showToast("操作成功");
+
+          dataList.value = [];
+          dataForm.value.page = 1;
+          more.value = false;
+          getList();
+        });
+    })
+    .catch(() => {
+      // on cancel
+    });
+};
 
 // 下载航行文件
 const todownFly = (code) => {
@@ -400,8 +433,38 @@ onMounted(() => {
 });
 </script>
 
-<style scoped lang='less'>
+<style scoped lang="less">
 .content {
   height: calc(85vh - 2rem);
 }
-</style>
+.table-container {
+  height: 300px; /* 设置容器高度 */
+  overflow-y: auto; /* 内容区域滚动 */
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+thead {
+  position: sticky;
+  top: 0;
+  background-color: #fff; /* 表头背景色 */
+}
+
+th,
+td {
+  padding: 8px;
+  border: 1px solid #ddd;
+}
+
+.bts {
+  display: flex;
+  justify-content: space-around;
+  color: #3e8ef7;
+  .danger {
+    color: #f5686f;
+  }
+}
+</style>