新增 下载excel;地图级别更新;地图控件

index.html

@@ -8,7 +8,7 @@
       charset="utf-8"
       src="https://map.qq.com/api/gljs?v=1.exp&key=Y2BBZ-IHRKU-V42VO-BFQEE-K7252-ZBBSF"
     ></script> -->
-    <script src="https://webapi.amap.com/maps?v=2.0&key=0b84075e96d01623f704867a601139bb"></script>
+    <script src="https://webapi.amap.com/maps?v=2.0&key=0b84075e96d01623f704867a601139bb&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar"></script>
     <script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.6.0/cloudbase.full.js"></script>
     <title>Huihenduo App</title>
     <style>

src/utils/downloadBlobFile.js

@@ -0,0 +1,33 @@
+import axios from "axios";
+function downloadBlobFile(url, data, name, type) {
+  return new Promise((resolve, reject) => {
+    axios({
+      method: type,
+      url,
+      responseType: "blob",
+      data,
+    })
+      .then((res) => {
+        let blob = new Blob([res.data], {
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
+        });
+        let downloadElement = document.createElement("a");
+        let href = window.URL.createObjectURL(blob); // 创建下载的链接
+        downloadElement.href = href;
+        downloadElement.download = name; // 下载后文件名
+        document.body.appendChild(downloadElement);
+        downloadElement.click(); // 点击下载
+        document.body.removeChild(downloadElement); // 下载完成移除元素
+        window.URL.revokeObjectURL(href); // 释放掉blob对象
+        resolve({
+          status: 0,
+        });
+      })
+      .catch((e) => {
+        reject({
+          status: 1,
+        });
+      });
+  });
+}
+export default downloadBlobFile;

src/views/voyage/voyageDetail.vue

@@ -9,7 +9,17 @@
     </div>
   </div>
 
-  <div class="container-title">航次信息</div>
+  <div class="container-title">
+    船舶信息
+    <el-button
+      style="margin-left: 75%; width: 220px"
+      type="primary"
+      @click="downloadExcel"
+      :loading="isLoadingExcel"
+    >
+      下载船舶跟踪表
+    </el-button>
+  </div>
   <div class="line-container-p24">
     <div class="line">
       <div class="info-line">
@@ -292,7 +302,11 @@
         ></el-input>
       </div>
     </div>
-    <div class="df aic jcfe mt20" v-if="voyage.voyageStatus == 1">
+    <div
+      class="df aic jcfe mt20"
+      style="margin-right: 10%"
+      v-if="voyage.voyageStatus == 1"
+    >
       <el-button v-if="disabledStatus" type="primary" @click="changeVoyageInfo">
         修改航次
       </el-button>
@@ -312,6 +326,9 @@
         完成航次
       </el-button>
     </div>
+  </div>
+  <div class="container-title">卸货记录</div>
+  <div class="line-container-p24">
     <el-card
       style="
         width: 800px;
@@ -444,6 +461,9 @@
         ></el-pagination>
       </div>
     </el-card>
+  </div>
+  <div class="container-title">运单列表</div>
+  <div class="line-container-p24">
     <div class="line" style="margin-bottom: 60px">
       <div class="info-line">
         <div class="info-line-title">上传航次运单</div>
@@ -464,6 +484,9 @@
         </el-upload>
       </div>
     </div>
+  </div>
+  <div class="container-title">航次图片</div>
+  <div class="line-container-p24">
     <div v-if="medias.length" class="medias-content df ffw">
       <div class="pic-container">
         <div v-for="(item, index) in medias" :key="item" class="pic-main">
@@ -568,6 +591,7 @@ import _ from "lodash";
 import router from "../../router";
 import store from "../../store";
 import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
+import downloadBlobFile from "../../utils/downloadBlobFile";
 
 export default {
   setup() {
@@ -628,16 +652,8 @@ export default {
       if (res.data.status == 0) {
         getDischargeList(1);
         formInline.value = {};
-        ElNotification({
-          type: "success",
-          title: res.data.msg,
-        });
       } else {
         console.log(res);
-        ElNotification({
-          type: "error",
-          title: res.data.msg,
-        });
       }
     }
     async function deleteDischarge(id, index) {
@@ -672,10 +688,7 @@ export default {
         dischagreList.value = res.data.result;
         total.value = res.data.total;
       } else {
-        ElNotification({
-          type: "error",
-          title: res.data.msg,
-        });
+        console.log(res);
       }
     }
     let updateForm = ref({});
@@ -717,10 +730,21 @@ export default {
     }
     function initMap() {
       map.value = new AMap.Map("map-container", {
-        zoom: 11, //级别
+        zoom: 16, //级别
         center: [121.524761, 31.228721], //中心点坐标
         mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
       });
+      let toolBar = new AMap.ToolBar({
+        position: {
+          top: "40px",
+          right: "40px",
+        },
+      });
+      let hawkEye = new AMap.HawkEye({
+        opened: false,
+      });
+      map.value.addControl(toolBar);
+      map.value.addControl(hawkEye);
       if (coordinates.value.length) {
         let { longitude, latitude } =
           coordinates.value[coordinates.value.length - 1];
@@ -732,7 +756,7 @@ export default {
       map.value.setCenter([longitude, latitude]);
       var marker = new AMap.Marker({
         position: new AMap.LngLat(longitude, latitude),
-        // offset: new AMap.Pixel(-10, -10),
+        offset: new AMap.Pixel(-20, -20),
         size: new AMap.Size(80, 80),
         icon: "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png", // 添加 Icon 图标 URL
         title: "北京",
@@ -856,10 +880,6 @@ export default {
         });
       } else {
         console.log(res);
-        ElNotification({
-          type: "error",
-          title: res.data.msg,
-        });
       }
     }
     let dialogImageUrl = ref();
@@ -922,12 +942,26 @@ export default {
         voyage.value.expectedArrivalTime = res.data.result;
       }
     }
-
+    let isLoadingExcel = ref(false);
+    async function downloadExcel() {
+      isLoadingExcel.value = true;
+      let res = await downloadBlobFile(
+        "https://interface.huihenduo.com.cn/hhd-pat/voyage/exportExcel",
+        { voyageId: route.query.id },
+        "船舶跟踪表",
+        "post"
+      );
+      if (res) {
+        isLoadingExcel.value = false;
+      }
+    }
     onMounted(() => {
       getVoyageDetail(1);
       getDischargeList(1);
     });
     return {
+      downloadExcel,
+      isLoadingExcel,
       options,
       voyage,
       coordinates,