feat: save

src/app/map/App.vue

@@ -24,7 +24,10 @@
         />
       </el-form-item>
       <el-form-item label="" class="filter">
-        <el-input v-model="keywordSearch" placeholder="输入关键字"></el-input>
+        <el-input
+          v-model:modelValue="keywordSearch"
+          placeholder="输入关键字"
+        ></el-input>
       </el-form-item>
     </div>
     <div class="right">
@@ -47,23 +50,37 @@
     <div class="card-list">
       <template v-for="item of list" v-if="list.length > 0">
         <el-card
-          style="width: 480px"
+          class="card"
           shadow="hover"
           @click="handCardClick(item.caseId)"
         >
           <img
             class="cover"
-            :src="
-              item.cover
-                ? item.cover
-                : 'https://test-mix3d.4dkankan.com/code/assets/pic.d5781b0c.jpg'
-            "
+            :src="item.cover ? item.cover : emptyCover"
             style="width: 100%"
           />
-          <div class="card">
-            <span> 项目: {{ item.projectName }}</span>
-            <span> 地址: {{ item.projectAddress }}</span>
-            <span> 类别: {{ item.projectSite }}</span>
+          <div class="label-list">
+            <span>
+              项目:
+              <el-tooltip placement="top" :content="item.projectName">
+                {{
+                  item.projectName.length > 20
+                    ? item.projectName.slice(0, 20) + "..."
+                    : item.projectName
+                }}
+              </el-tooltip>
+            </span>
+            <span>
+              地址:
+              <el-tooltip placement="bottom" :content="item.projectAddress">
+                {{
+                  item.projectAddress.length > 20
+                    ? item.projectAddress.substr(0, 20) + "..."
+                    : item.projectAddress
+                }}
+              </el-tooltip></span
+            >
+            <!-- <span> 类别: {{ item.projectSite }}</span> -->
           </div>
         </el-card>
       </template>
@@ -91,6 +108,7 @@ import { ElLoading } from "element-plus";
 import linkIco from "@/assets/image/fire.ico";
 import { useUrlSearchParams } from "@vueuse/core";
 import emptyBG from "@/assets/image/empty__empty.png";
+import emptyCover from "@/assets/image/pic.jpg";
 
 import { changeThemeColor } from "./theme";
 const params = useUrlSearchParams("history");
@@ -107,7 +125,7 @@ const current = ref(0);
 const currentMaptype = ref(0);
 const keywordSearch = ref("");
 const list = ref<any>([]);
-
+const searchList = ref<any>([]);
 const state = reactive({
   deptId: params.deptId || "",
   caseId: "",
@@ -194,9 +212,10 @@ watch(
     deep: true,
   }
 );
+
+
 const initMakers = async () => {
   const data = (await getDataQuest()) as any as any[];
-
   const positions: any[] = [];
   list.value = data.filter((i) => i.latAndLong) as any[];
   console.log("list", list.value);
@@ -221,8 +240,8 @@ const initMakers = async () => {
     const marker = new AMap.Marker({
       icon: icon,
       position: pos,
-      title: item.title,
-      label: item.title,
+      title: item.projectName,
+      label: item.projectName,
       extData: { url: url, id: item.caseId },
       // offset: new AMap.Pixel(-26, -54),
     });
@@ -236,14 +255,68 @@ const initMakers = async () => {
     });
   });
 
-  var polygon = new AMap.Polygon({
-    path: positions,
-    map: map,
-    strokeOpacity: 0, //透明
-    fillOpacity: 0, //透明
-    bubble: true, //事件穿透到地图
+  // var polygon = new AMap.Polygon({
+  //   path: positions,
+  //   map: map,
+  //   strokeOpacity: 0, //透明
+  //   fillOpacity: 0, //透明
+  //   bubble: true, //事件穿透到地图
+  // });
+  // var overlaysList = map.getAllOverlays("polygon"); //获取多边形图层
+  map.setFitView(); //自适应显示
+};
+
+const initKeywordMakers = async () => {
+  const data = searchList.value;
+  const positions: any[] = [];
+  map.remove(markers.value);
+  markers.value = [];
+  // list.value = data.filter((i) => i.latAndLong) as any[];
+  // console.log("list", list.value);
+  Array.from(data).forEach((item: any) => {
+    // console.log(item)
+    const latlng = item.latAndLong;
+
+    const coord = latlng.split(",");
+
+    console.log("coord", coord, item.caseId);
+    const url = getQuery(item.caseId, true);
+    console.log("url", url);
+    const icon = new AMap.Icon({
+      image:
+        "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+      size: new AMap.Size(22, 28), //图标所处区域大小
+      imageSize: new AMap.Size(22, 28), //图标大小
+    });
+
+    const pos = coord.reverse();
+    positions.push(pos);
+    const marker = new AMap.Marker({
+      icon: icon,
+      position: pos,
+      title: item.projectName,
+      label: item.projectName,
+      extData: { url: url, id: item.caseId },
+      // offset: new AMap.Pixel(-26, -54),
+    });
+    markers.value.push(marker);
+    marker.setMap(map);
+
+    marker.on("click", () => {
+      const data = marker.getExtData();
+      window.open(data.url);
+      console.log("click", data);
+    });
   });
-  var overlaysList = map.getAllOverlays("polygon"); //获取多边形图层
+
+  // var polygon = new AMap.Polygon({
+  //   path: positions,
+  //   map: map,
+  //   strokeOpacity: 0, //透明
+  //   fillOpacity: 0, //透明
+  //   bubble: true, //事件穿透到地图
+  // });
+  // var overlaysList = map.getAllOverlays("polygon"); //获取多边形图层
   map.setFitView(); //自适应显示
 };
 const loadMap = async () => {
@@ -280,6 +353,20 @@ const loadMap = async () => {
   initMakers();
 };
 
+watch(
+  keywordSearch,
+  (val) => {
+    searchList.value = list.value.filter((item) =>
+      String(item.projectName).includes(val)
+    );
+    initKeywordMakers();
+    console.log("searchList", searchList);
+  },
+  {
+    immediate: true,
+  }
+);
+
 watch(currentMaptype, (val) => {
   console.log("currentMaptype", val);
   if (val === 0) {
@@ -312,6 +399,7 @@ const handCardClick = (id: number) => {
 body {
   padding: 0;
   margin: 0;
+  background-color: #f0f2f5;
 }
 
 .map-container {
@@ -357,23 +445,26 @@ body {
 .card-container {
   width: 100%;
   padding-top: 100px;
+  padding-bottom: 100px;
 }
 
 .card-list {
   margin: 0 auto;
-
   display: flex;
   gap: 50px 25px;
   width: 90%;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .cover {
   cursor: pointer;
-  max-height: 220px;
+  height: 220px;
+  width: 100%;
   object-fit: cover;
+  margin-bottom: 20px;
 }
 
 .card {
@@ -381,6 +472,19 @@ body {
   flex-direction: column;
   cursor: pointer;
   gap: 10px;
+  width: 382px;
+  border-radius: 10px 10px 10px 10px;
+}
+.label-list {
+  display: inline-flex;
+  flex-direction: column;
+  font-weight: 400;
+  font-size: 14px;
+  color: #282222;
+  line-height: 16px;
+  text-align: left;
+  font-style: normal;
+  gap: 10px;
 }
 
 .filter {