更新 样式

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>
     <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,7 @@
     </div>
   </div>
 
-  <div class="container-title">航次信息</div>
+  <div class="container-title">船舶信息</div>
   <div class="line-container-p24">
     <div class="line">
       <div class="info-line">
@@ -291,6 +291,9 @@
         ></el-input>
       </div>
     </div>
+  </div>
+  <div class="container-title">卸货记录</div>
+  <div class="line-container-p24">
     <el-card
       style="
         width: 800px;
@@ -341,36 +344,19 @@
         ></el-pagination>
       </div>
     </el-card>
-    <div v-if="false" class="line" style="margin-bottom: 60px">
-      <div class="info-line">
-        <div class="info-line-title">上传航次运单</div>
-        <el-upload
-          drag
-          multiple
-          action="https://interface.huihenduo.com.cn/hhd-pat/voyage/uploadVoyageWayBill"
-          list-type="picture-card"
-          :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemoveBill"
-          :data="billParams"
-          :on-success="billUploadSuccess"
-          :file-list="voyageBill"
-          :limit="10"
-        >
-          <div class="upload-plus-icon">+</div>
-          <div class="upload-text">拖拽或点击上传</div>
-        </el-upload>
-      </div>
-    </div>
-    <div class="df ac">
-      <el-image
-        v-for="item in voyageBill"
-        style="width: 200px; height: 200px; margin: 0 0 30px 30px"
-        fit="contain"
-        :src="item.url"
-        @click="openMediaModal(item.url, 1, '查看')"
-        :key="item"
-      ></el-image>
-    </div>
+  </div>
+  <div class="container-title">运单列表</div>
+  <div class="line-container-p24">
+    <el-image
+      style="width: 200px; height: 200px; margin-left: 30px"
+      :src="item.viewUrl"
+      v-for="item in voyageBill"
+      :key="item"
+      @click="openMediaModal(item.viewUrl, 1, '运单查看')"
+    ></el-image>
+  </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">
@@ -392,6 +378,7 @@
                 style="width: 100%; height: 100%"
                 fit="contain"
                 :src="item.downloadUrl"
+                :preview-src-list="modalPreview"
                 @click="openMediaModal(item.downloadUrl, 1, '图片审核')"
               ></el-image>
               <video
@@ -463,6 +450,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() {
@@ -523,16 +511,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) {
@@ -567,10 +547,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({});
@@ -612,10 +589,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];
@@ -627,7 +615,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: "北京",
@@ -730,6 +718,7 @@ export default {
     let modalTitle = ref();
     let modalPreview = ref([]);
     function openMediaModal(url, type, title) {
+      console.log(url, type, title);
       modalPreview.value = [url];
       modalTitle.value = title;
       modalType.value = type;
@@ -738,6 +727,7 @@ export default {
     }
 
     async function auditMedia(mediaId, a, index, mediaType) {
+      console.log(mediaId, a, index, mediaType);
       let res = await api.auditMedia({
         mediaId,
         audit: a,
@@ -750,10 +740,6 @@ export default {
         });
       } else {
         console.log(res);
-        ElNotification({
-          type: "error",
-          title: res.data.msg,
-        });
       }
     }
     let dialogImageUrl = ref();
@@ -765,6 +751,7 @@ export default {
 
     async function handleRemoveBill(file, list) {
       let cache = _.cloneDeep(voyageBill.value);
+      console.log(cache);
       ElMessageBox.confirm("确认删除运单?", "Warning", {
         confirmButtonText: "删除",
         cancelButtonText: "取消",
@@ -798,6 +785,7 @@ export default {
         ...response.result,
         url: response.result.viewUrl,
       };
+      console.log(list);
       voyageBill.value = list;
     }
 
@@ -805,11 +793,35 @@ export default {
       voyageId: route.query.id,
     });
 
+    async function calExpectedArrivalTime() {
+      let res = await api.calExpectedArrivalTime({
+        voyageId: route.query.id,
+        setSailTime: voyage.value.setSailTime,
+      });
+      if (res.data.status == 0) {
+        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,
@@ -849,6 +861,7 @@ export default {
       voyageBill,
       billUploadSuccess,
       billParams,
+      calExpectedArrivalTime,
     };
   },
 };