更新 首页样式

src/views/index/Index.vue

@@ -276,8 +276,8 @@ function initMap() {
     zoom: 11, //级别
     center: [120.563757, 31.891174], //中心点坐标
     mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
-    zoomEnable: false,
-    dragEnable: false,
+    zoomEnable: true,
+    dragEnable: true,
   });
   let toolBar = new AMap.ToolBar({
     position: {
@@ -299,11 +299,6 @@ function drawMarkers() {
   for (let i of indexData.value.mapPoints) {
     if (i.latitude && i.longitude) {
       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}'/>`
-            : ``
-        }
         <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>`;
 
@@ -312,11 +307,17 @@ function drawMarkers() {
         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);
-        });
-      }
+
+      marker.setLabel({
+        direction: "top",
+        offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
+        content: `${i.shipName}`, //设置文本标注内容
+        style: "",
+      });
+
+      marker.on("click", () => {
+        goToVoyageDetail(i.voyageId);
+      });
 
       markers.push(marker);
     }
@@ -331,6 +332,15 @@ function changeVoyageType(s) {
   getIndexData();
 }
 
+function goToVoyageDetail(id) {
+  router.push({
+    path: "/voyage/voyageDetail",
+    query: {
+      id,
+    },
+  });
+}
+
 let postData = ref({
   status: 0,
   loadPortId: "",
@@ -347,8 +357,6 @@ let indexData = ref({
   unfinshDiscTons: "",
 });
 async function getIndexData(type) {
-  console.log(type);
-
   postData.value.status = status.value;
   let res = await api.getIndexData({
     ...postData.value,
@@ -356,13 +364,11 @@ async function getIndexData(type) {
   if (res.data.status == 0) {
     indexData.value = res.data.result;
     if (type == "init") {
-      console.log(1);
       initMap();
       drawPie("init");
     } else {
       map.value.clearMap();
       drawMarkers();
-      console.log(2);
       drawPie();
     }
   }
@@ -393,7 +399,7 @@ function drawPie(type) {
       {
         center: ["50%", "65%"],
         type: "pie",
-        radius: "60%",
+        radius: "80%",
         data: [
           { value: indexData.value.finshDiscTons, name: "已卸货吨位" },
           { value: indexData.value.unfinshDiscTons, name: "剩余卸货吨位" },
@@ -564,15 +570,15 @@ onMounted(() => {
 
 .tabs {
   position: absolute;
-  top: 20px;
-  left: 30px;
+  top: 10px;
+  left: 10px;
 }
 
 .radio-btns {
-  height: 38px;
-  width: 70px;
+  height: 30px;
+  width: 60px;
   border: 1px solid #1486f9;
-  line-height: 38px;
+  line-height: 28px;
   text-align: center;
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
@@ -583,14 +589,14 @@ onMounted(() => {
 }
 
 .left-radius {
-  border-top-left-radius: 19px;
-  border-bottom-left-radius: 19px;
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
   width: 80px;
 }
 
 .right-radius {
-  border-top-right-radius: 19px;
-  border-bottom-right-radius: 19px;
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
   width: 80px;
 }
 .currentbtn {
@@ -633,7 +639,7 @@ onMounted(() => {
   width: 800px;
 }
 .cards {
-  height: 15%;
+  height: 12%;
   border-bottom: 1px solid grey;
 }
 
@@ -658,6 +664,6 @@ onMounted(() => {
 .card-4 {
 } */
 .card-5 {
-  height: 30%;
+  height: 40%;
 }
 </style>