更新 首页数据渲染;todo:船舶点击交互

src/apis/fetch.js

@@ -4,6 +4,10 @@ export default {
   login(data) {
     return $http("/user/web/login", data);
   },
+  // 获取首页信息
+  getIndexData(data) {
+    return $http("/index", data);
+  },
 
   // 新增船东
   addShipOwner(data) {

src/views/index/Index.vue

@@ -4,12 +4,12 @@
       <div class="fs20 mb10">汇很多船务公司</div>
       <div class="df aic">
         <div class="mr10">{{ today }}</div>
-        <div>天气</div>
+        <!-- <div>天气</div> -->
       </div>
     </div>
     <div>
-      <div>所有船舶数量:</div>
-      <div>所有船舶吨位:</div>
+      <div>所有船舶数量: {{ shipNum }} 艘</div>
+      <div>所有船舶吨位: {{ shipLoadTons }} 吨</div>
     </div>
   </div>
   <div id="map-container" class="map-container"></div>
@@ -18,6 +18,7 @@
 import moment from "moment";
 import "moment/dist/locale/zh-cn";
 import { onMounted, ref } from "vue";
+import api from "../../apis/fetch";
 
 let today = ref(moment().format("YYYY年MM月DD日 dddd"));
 
@@ -42,19 +43,82 @@ function initMap() {
   });
   map.value.addControl(toolBar);
   map.value.addControl(hawkEye);
+  drawMarkers();
 }
 
-onMounted(() => {
-  initMap();
-});
+function drawMarkers() {
+  let markers = [];
+  for (let i of ships.value) {
+    if (i.latitude && i.longitude) {
+      let content = `<div style='width:160px'>
+        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-orange-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(-80, -20),
+      });
+      let infoWindowContent = `<div class='window-title pointer' style='font-size:12px'>${i.shipName}</div>
+      <div style='font-size:12px;margin-top:5px'>查看详情</div>
+      `;
+      let infoWindow = new AMap.InfoWindow({
+        position: new AMap.LngLat(i.longitude, i.latitude),
+        offset: new AMap.Pixel(0, -10),
+        content: infoWindowContent,
+      });
 
-navigator.geolocation.getCurrentPosition(showPosition, showError);
-function showPosition(position) {
-  console.log(position);
+      // marker.on("mouseover", function () {
+      //   infoWindow.open(map.value);
+      // });
+      marker.setLabel({
+        direction: "top",
+        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+        content: `${i.shipname}`, //设置文本标注内容
+        style: "",
+      });
+
+      marker.on("click", () => {
+        getShipDetail(i.code);
+      });
+
+      markers.push(marker);
+    }
+  }
+  let overlayGroups = new AMap.OverlayGroup(markers);
+  map.value.add(overlayGroups);
+  map.value.setFitView(markers, true, [200, 50, 50, 50], 18);
 }
-function showError(position) {
-  console.log(position);
+
+async function getShipDetail(shipCode) {
+  let { data } = await api.getShipDetail({
+    shipCode,
+  });
+  console.log(data);
 }
+
+let shipNum = ref("");
+let shipLoadTons = ref("");
+let ships = ref([]);
+async function getIndexData() {
+  let { data } = await api.getIndexData({});
+  shipNum.value = data.result.shipNum;
+  shipLoadTons.value = data.result.shipLoadTons;
+  ships.value = data.result.ships;
+  initMap();
+}
+
+onMounted(() => {
+  getIndexData();
+});
+
+// navigator.geolocation.getCurrentPosition(showPosition, showError);
+// function showPosition(position) {
+//   console.log(position);
+// }
+// function showError(position) {
+//   console.log(position);
+// }
 </script>
 <style scoped>
 .map-container {

src/views/shipManage/shipDetail.vue

@@ -32,7 +32,6 @@ async function getShipDetail(shipCode) {
   data.result.disabled = true;
 
   shipInfos.value = [data.result];
-  console.log(data);
 }
 onMounted(() => {
   getShipDetail(route.query.shipCode);

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -288,7 +288,6 @@ async function getShipOwnerDetail(shipOwnerId) {
       }
     }
   }
-  console.log(data);
 }
 function addShip() {
   shipOwnerDetail.value.shipInfo = [initShipInfo];