更新 地图引入方式

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&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar"></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>
       * {

package.json

@@ -8,6 +8,7 @@
     "serve": "vite build --mode release && vite preview"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@cloudbase/js-sdk": "^1.7.1",
     "@element-plus/icons": "^0.0.11",
     "axios": "^0.21.1",

src/App.vue

@@ -261,4 +261,8 @@ export default {
 .mr20 {
   margin-right: 20px;
 }
+
+.cell {
+  text-align: center;
+}
 </style>

src/components/AMapContainer.vue

@@ -0,0 +1,136 @@
+<template>
+  <div :id="mapId"></div>
+</template>
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import AMapLoader from "@amap/amap-jsapi-loader";
+const props = defineProps({
+  longitude: {
+    type: Number,
+    default: 120.498409,
+  },
+  latitude: {
+    type: Number,
+    default: 32.039665,
+  },
+  ships: {
+    type: Array,
+    default: [],
+  },
+  loadPorts: {
+    type: Array,
+    default: [],
+  },
+  dischargePorts: {
+    type: Array,
+    default: [],
+  },
+  mapId: {
+    type: String,
+    default: "container",
+  },
+});
+const mapId = ref(props.mapId);
+const map = ref({});
+function initMap() {
+  AMapLoader.load({
+    key: "0b84075e96d01623f704867a601139bb", // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+  })
+    .then((AMap) => {
+      map.value = new AMap.Map(props.mapId, {
+        zoom: 12, // 初始化地图级别
+        center: [props.longitude, props.latitude], // 初始化地图中心点位置
+        mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
+        zoomEnable: true,
+        dragEnable: true,
+      });
+      let markers = [];
+
+      for (let i of props.ships) {
+        let marker = generateMarker({
+          longitude: i.longitude,
+          latitude: i.latitude,
+          label: i.shipName,
+        });
+        markers.push(marker);
+      }
+      for (let i of props.loadPorts) {
+        let marker = generateMarker({
+          longitude: i.longitude,
+          latitude: i.latitude,
+          iconSrc:
+            "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/port-green.png",
+          iconWidth: 30,
+          iconHeight: 30,
+          offsetY: -30,
+          label: "装货港",
+        });
+        markers.push(marker);
+      }
+      for (let i of props.dischargePorts) {
+        let marker = generateMarker({
+          longitude: i.longitude,
+          latitude: i.latitude,
+          iconSrc:
+            "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/port-red.png",
+          iconWidth: 30,
+          iconHeight: 30,
+          offsetY: -30,
+          label: "卸货港",
+        });
+        markers.push(marker);
+      }
+      let overlayGroups = new AMap.OverlayGroup(markers);
+      map.value.add(overlayGroups);
+      map.value.setFitView(markers, true, [150, 50, 100, 100], 9);
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+}
+
+function generateMarker({
+  longitude = 120.498409,
+  latitude = 32.039665,
+  iconSrc = "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png",
+  offsetX = -80,
+  offsetY = -20,
+  label = "",
+  iconWidth = 20,
+  iconHeight = 20,
+}) {
+  let marker = new AMap.Marker({
+    content: `<div style='width:160px'>
+          <img src='${iconSrc}' style='display:block;width:${iconWidth}px;height:${iconHeight}px;margin:6px auto'/
+        </div>`,
+    zIndex: 5,
+    position: new AMap.LngLat(longitude, latitude),
+    offset: new AMap.Pixel(offsetX, offsetY),
+  });
+  if (label) {
+    marker.setLabel({
+      direction: "top",
+      offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+      content: label, //设置文本标注内容
+      style: "",
+    });
+  }
+
+  return marker;
+}
+
+onMounted(() => {
+  initMap();
+});
+
+onUnmounted(() => {
+  map.value.destroy();
+});
+</script>
+
+<style scoped>
+#container {
+  width: 100%;
+}
+</style>

src/main.js

@@ -11,9 +11,11 @@ import Uploader from "./components/Uploader.vue";
 import Certs from "./components/Certs.vue";
 // import RemoteSearch from "./components/RemoteSearch.vue";
 import RemoteSelect from "./components/RemoteSelect.vue";
+import AMapContainer from "./components/AMapContainer.vue";
 
 const app = createApp(App);
 app.component("RemoteSelect", RemoteSelect);
+app.component("AMapContainer", AMapContainer);
 
 // app.component("RemoteSearch", RemoteSearch);
 app.component("Certs", Certs);

src/views/index/Index.vue

@@ -283,31 +283,39 @@ import md5 from "md5";
 import api from "../../apis/fetch";
 import downloadBlobFile from "../../utils/downloadBlobFile";
 import url from "../../apis/config";
+import AMapLoader from "@amap/amap-jsapi-loader";
 let map = ref({});
 let cargoOwnerId = localStorage.userId;
 let echarts = inject("ec");
 
-function initMap() {
-  map.value = new AMap.Map("map-container", {
-    zoom: 9, //级别
-    zooms: [4, 9],
-    center: [120.563757, 31.891174], //中心点坐标
-    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
-    zoomEnable: true,
-    dragEnable: true,
-  });
-  let toolBar = new AMap.ToolBar({
-    position: {
-      top: "40px",
-      right: "40px",
-    },
-  });
-  let hawkEye = new AMap.HawkEye({
-    opened: false,
+async function initMap() {
+  AMapLoader.load({
+    key: "0b84075e96d01623f704867a601139bb", // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+  }).then((AMap) => {
+    map.value = new AMap.Map("map-container", {
+      zoom: 9, //级别
+      zooms: [4, 9],
+      center: [120.563757, 31.891174], //中心点坐标
+      mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
+      zoomEnable: true,
+      dragEnable: true,
+    });
+    map.value.plugin(["AMap.ToolBar", "AMap.HawkEye"], function () {
+      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);
+    });
+    drawMarkers();
   });
-  map.value.addControl(toolBar);
-  map.value.addControl(hawkEye);
-  drawMarkers();
 }
 
 function drawMarkers() {

src/views/tenderManage/tenderConsole.vue

@@ -1,5 +1,73 @@
 <template>
-  <el-card>招标总览</el-card>
+  <div class="map-main-container df">
+    <AMapContainer></AMapContainer>
+    <div class="right-bar tac df fdc jcsa">
+      <div>2024年4月</div>
+      <div>数据展示</div>
+      <div>
+        <el-button type="primary" @click="router.push('/tenderingPlan')">
+          发起新招标
+        </el-button>
+      </div>
+    </div>
+  </div>
+  <el-divider class="mt20 mb20"></el-divider>
+  <div class="data ml20">
+    <div class="t20 mb10">海运招标</div>
+    <el-table class="mb30" :data="oceanShippingData" border stripe>
+      <el-table-column label="序号" type="index" width="60" />
+      <el-table-column label="货种" prop="cargo" />
+      <el-table-column label="发货吨位" prop="tons" />
+      <el-table-column label="装货港" prop="loadPort" />
+      <el-table-column label="卸货港" prop="dischargePorts" />
+      <el-table-column label="截止时间" prop="cutOffTime" />
+      <el-table-column label="发起人" prop="initiator" />
+      <el-table-column label="投标数量" prop="tenderQuantity" />
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button
+            size="small"
+            type="primary"
+            @click="router.push(`/tenderingDetail?id=${scope.row.id}`)"
+          >
+            详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="t20 mb10">江运招标</div>
+    <el-table class="mb30" :data="riverShippingData" border stripe>
+      <el-table-column label="序号" type="index" width="60" />
+      <el-table-column label="货种" prop="cargo" />
+      <el-table-column label="发货吨位" prop="tons" />
+      <el-table-column label="装货港" prop="loadPort" />
+      <el-table-column label="卸货港" prop="dischargePorts" />
+      <el-table-column label="截止时间" prop="cutOffTime" />
+      <el-table-column label="发起人" prop="initiator" />
+      <el-table-column label="投标数量" prop="tenderQuantity" />
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button size="small" type="primary">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- <div class="t20 mb10">汽运招标</div>
+      <el-table class="mb30" :data="motorTransData" border stripe>
+        <el-table-column label="序号" type="index" width="60" />
+        <el-table-column label="货种" prop="cargo" />
+        <el-table-column label="发货吨位" prop="tons" />
+        <el-table-column label="装货港" prop="loadPort" />
+        <el-table-column label="卸货港" prop="dischargePorts" />
+        <el-table-column label="截止时间" prop="cutOffTime" />
+        <el-table-column label="发起人" prop="initiator" />
+        <el-table-column label="投标数量" prop="tenderQuantity" />
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button size="small" type="primary">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table> -->
+  </div>
 </template>
 
 <script setup>
@@ -12,6 +80,65 @@ import { mapGetters } from "vuex";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
+
+const oceanShippingData = ref([
+  {
+    id: 1,
+    cargo: "煤炭",
+    tons: 200000,
+    loadPort: "张家港",
+    dischargePorts: "宁波",
+    cutOffTime: "2024-05-01 14:00",
+    initiator: "投标专员1",
+    tenderQuantity: 20,
+  },
+  {
+    id: 2,
+    cargo: "石油焦",
+    tons: 300000,
+    loadPort: "南通",
+    dischargePorts: "厦门",
+    cutOffTime: "2024-05-15 14:00",
+    initiator: "投标专员2",
+    tenderQuantity: 30,
+  },
+]);
+const riverShippingData = ref([
+  {
+    id: 1,
+    cargo: "玉米",
+    tons: 200000,
+    loadPort: "张家港",
+    dischargePorts: "上海",
+    cutOffTime: "2024-05-01 14:00",
+    initiator: "投标专员1",
+    tenderQuantity: 20,
+  },
+  {
+    id: 2,
+    cargo: "豆粕",
+    tons: 300000,
+    loadPort: "武汉",
+    dischargePorts: "南通",
+    cutOffTime: "2024-05-15 14:00",
+    initiator: "投标专员2",
+    tenderQuantity: 30,
+  },
+]);
+const motorTransData = ref([]);
+onMounted(() => {});
 </script>
+<style scoped>
+.map-main-container {
+  height: 600px;
+}
+.map {
+  width: 100%;
+  height: 600px;
+}
 
-<style scoped></style>
+.right-bar {
+  width: 300px;
+  border: 1px solid #ddd;
+}
+</style>

src/views/voyage/voyageDetail.vue

@@ -1336,6 +1336,7 @@ import {
 import downloadBlobFile from "../../utils/downloadBlobFile";
 import url from "../../apis/config";
 import { subTimeStr } from "utils/utils";
+import AMapLoader from "@amap/amap-jsapi-loader";
 
 const route = useRoute();
 let map = ref();
@@ -1540,27 +1541,34 @@ function cancelUpdateDischarge() {
   currentUpdateIndex.value = -1;
 }
 function initMap() {
-  map.value = new AMap.Map("map-container", {
-    zoom: 11, //级别
-    center: [120.563757, 31.891174], //中心点坐标
-    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
-    zoomEnable: false,
-    dragEnable: false,
-  });
-  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);
-  let markers = [];
-  for (let i of medias.value) {
-    let content = `<div style='width:160px'>
+  AMapLoader.load({
+    key: "0b84075e96d01623f704867a601139bb", // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+  }).then((AMap) => {
+    console.log(1);
+    map.value = new AMap.Map("map-container", {
+      zoom: 11, //级别
+      center: [120.563757, 31.891174], //中心点坐标
+      mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
+      zoomEnable: false,
+      dragEnable: false,
+    });
+    map.value.plugin(["AMap.ToolBar", "AMap.HawkEye"], function () {
+      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);
+    });
+    let markers = [];
+    for (let i of medias.value) {
+      let content = `<div style='width:160px'>
         ${
           i.audit == 1
             ? `<img id='img${i.id}' style='width:160px;height:160px;object-fit:contain;' src='${i.viewUrl}'/>`
@@ -1569,27 +1577,28 @@ function initMap() {
         <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
       </div>`;
 
-    let marker = new AMap.Marker({
-      content,
-      position: new AMap.LngLat(i.longitude, i.latitude),
-      offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
-    });
-    if (i.audit == 1) {
-      marker.on("click", () => {
-        openMediaModal(i.viewUrl, 1, "航次图片", i);
+      let marker = new AMap.Marker({
+        content,
+        position: new AMap.LngLat(i.longitude, i.latitude),
+        offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
       });
-    }
+      if (i.audit == 1) {
+        marker.on("click", () => {
+          openMediaModal(i.viewUrl, 1, "航次图片", i);
+        });
+      }
 
-    markers.push(marker);
-  }
+      markers.push(marker);
+    }
 
-  let overlayGroups = new AMap.OverlayGroup(markers);
-  map.value.on("complete", function () {
-    let t = setTimeout(() => {
-      map.value.add(overlayGroups);
-      map.value.setFitView(markers, true, [200, 50, 0, 0], 18);
-      clearTimeout(t);
-    }, 2000);
+    let overlayGroups = new AMap.OverlayGroup(markers);
+    map.value.on("complete", function () {
+      let t = setTimeout(() => {
+        map.value.add(overlayGroups);
+        map.value.setFitView(markers, true, [200, 50, 0, 0], 18);
+        clearTimeout(t);
+      }, 2000);
+    });
   });
 }