feat(draw): update

package.json

@@ -13,7 +13,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "^2.1.0",
     "@types/qs": "^6.9.7",
-    "three": "^0.158.0",
+    "@vueuse/router": "^10.11.0",
     "axios": "^1.4.0",
     "echarts": "^5.4.3",
     "element-plus": "^2.3.8",
@@ -24,6 +24,7 @@
     "sass": "^1.64.2",
     "sortablejs": "^1.15.2",
     "swiper": "^11.1.4",
+    "three": "^0.158.0",
     "unplugin-element-plus": "^0.7.2",
     "unplugin-vue-define-options": "^1.3.12",
     "vue": "^3.3.4",

src/app/map/App.vue

@@ -3,8 +3,16 @@
   <div class="tabbar">
     <div class="nav">
       <el-button-group class="ml-4">
-        <el-button :type="currentType(0) ? 'primary' : 'default'" @click="handleSelect(0)">地图</el-button>
-        <el-button :type="currentType(1) ? 'primary' : 'default'" @click="handleSelect(1)">卡片</el-button>
+        <el-button
+          :type="currentType(0) ? 'primary' : 'default'"
+          @click="handleSelect(0)"
+          >地图</el-button
+        >
+        <el-button
+          :type="currentType(1) ? 'primary' : 'default'"
+          @click="handleSelect(1)"
+          >卡片</el-button
+        >
       </el-button-group>
     </div>
     <el-form-item label="所属架构：" class="filter">
@@ -13,117 +21,128 @@
   </div>
   <div ref="mapEl" class="map-container" v-show="currentType(0)"></div>
   <div class="card-container" v-show="currentType(1)">
-
     <div class="card-list">
       <template v-for="item of list">
-        <el-card style="width: 480px" shadow="hover" @click="handCardClick(item.caseId)">
-          <img class="cover"
-            :src="item.cover ? item.cover : 'https://test-mix3d.4dkankan.com/code/assets/pic.d5781b0c.jpg'"
-            style="width: 100%" />
+        <el-card
+          style="width: 480px"
+          shadow="hover"
+          @click="handCardClick(item.caseId)"
+        >
+          <img
+            class="cover"
+            :src="
+              item.cover
+                ? item.cover
+                : 'https://test-mix3d.4dkankan.com/code/assets/pic.d5781b0c.jpg'
+            "
+            style="width: 100%"
+          />
           <div class="card">
             <span> 项目: {{ item.projectName }}</span>
             <span> 地址: {{ item.projectAddress }}</span>
             <span> 类别: {{ item.projectSite }}</span>
           </div>
-
         </el-card>
       </template>
     </div>
-
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed } from "vue";
+import { onMounted, ref, computed, onBeforeMount } from "vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
-import axios from 'axios';
+import axios from "axios";
 import { getFuseCodeLink } from "../../view/case/help";
 import comCompany from "./company-select/index.vue";
 import { reactive } from "vue";
 import { watch } from "vue";
-import { ElLoading } from 'element-plus'
-
+import { ElLoading } from "element-plus";
+import linkIco from "@/assets/image/fire.ico";
 
 const current = ref(0);
-const list = ref<any>([])
+const list = ref<any>([]);
 const state = reactive({
-  deptId: ''
-})
+  deptId: "",
+});
 
-const currentType = computed(() => (type: number) => current.value === type)
+const link = document.querySelector<HTMLLinkElement>("#app-icon")!;
+link.setAttribute("href", linkIco);
+
+document.title = "案件显示";
+
+const currentType = computed(() => (type: number) => current.value === type);
 const handleSelect = (type: number) => {
-  current.value = type
-}
+  current.value = type;
+};
 
 const getQuery = (
   caseId: number,
   share: boolean = false,
   single: boolean = false
 ) =>
-  `${getFuseCodeLink(caseId, true)}${share ? "&share=1" : ""}${single ? "&single=1" : ""
+  `${getFuseCodeLink(caseId, true)}${share ? "&share=1" : ""}${
+    single ? "&single=1" : ""
   }#show/summary`;
 
 const request = axios.create({
-  baseURL: '',
+  baseURL: "",
   timeout: 1000,
   headers: {
     share: 1,
-    'Content-Type': 'application/json'
+    "Content-Type": "application/json",
   },
 });
 const mapEl = ref<HTMLDivElement>();
 
-
-
 const getDataQuest = () => {
   return new Promise(async (reslove, reject) => {
-
-    const res = await request.post('https://xj-mix3d.4dkankan.com/fusion-xj/web/fireProject/queryProject', {
-      pageNum: 1,
-      pageSize: 10000,
-      deptId: state.deptId
-    })
-    console.log('res.data', res)
+    const res = await request.post(
+      "https://xj-mix3d.4dkankan.com/fusion-xj/web/fireProject/queryProject",
+      {
+        pageNum: 1,
+        pageSize: 10000,
+        deptId: state.deptId,
+      }
+    );
+    console.log("res.data", res);
     if (res.status === 200 && res.data.code === 0) {
-      reslove(res.data.data.list)
+      reslove(res.data.data.list);
     } else {
-      reslove([])
+      reslove([]);
     }
-  })
-}
-
-
+  });
+};
 
 const refresh = async () => {
   const loading = ElLoading.service({
     lock: true,
-    text: 'Loading',
-    background: 'rgba(0, 0, 0, 0.7)',
-  })
-
-  const data = await getDataQuest() as any as any[];
-  console.log('data', data)
-  list.value = data as any[]
-  loading.close()
-
-}
+    text: "Loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
 
-watch(() => state.deptId, () => {
+  const data = (await getDataQuest()) as any as any[];
+  console.log("data", data);
+  list.value = data as any[];
+  loading.close();
+};
 
-  refresh();
-}, {
-  immediate: true,
-  deep: true
-})
+watch(
+  () => state.deptId,
+  () => {
+    refresh();
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
 const loadMap = async () => {
-
   const AMap = await AMapLoader.load({
     plugins: ["AMap.PlaceSearch"],
     key: "e661b00bdf2c44cccf71ef6070ef41b8",
     version: "2.0",
   });
 
-
   const map = new AMap.Map(mapEl.value, {
     WebGLParams: {
       preserveDrawingBuffer: true,
@@ -132,74 +151,76 @@ const loadMap = async () => {
   });
 
   //添加插件
-  AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", 'AMap.MapType'], function () {
-    //异步同时加载多个插件
-    // map.addControl(new AMap.HawkEye()); //显示缩略图
-    map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
-    map.addControl(new AMap.MapType()); //显示当前地图中心的比例尺
-  });
-  console.log('map', map)
+  AMap.plugin(
+    ["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.MapType"],
+    function () {
+      //异步同时加载多个插件
+      // map.addControl(new AMap.HawkEye()); //显示缩略图
+      map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
+      map.addControl(new AMap.MapType()); //显示当前地图中心的比例尺
+    }
+  );
+  console.log("map", map);
 
   const initMakers = async () => {
-    const data = await getDataQuest() as any as any[];
-    console.log('data', data)
-    const positions: any[] = []
-    list.value = data as any[]
+    const data = (await getDataQuest()) as any as any[];
+    console.log("data", data);
+    const positions: any[] = [];
+    list.value = data as any[];
     Array.from(data).forEach((item: any) => {
       // console.log(item)
-      const latlng = item.latlng
-      const coord = latlng.split(',')
+      const latlng = item.latlng;
+      const coord = latlng.split(",");
 
-      console.log('coord', coord, item.caseId)
-      const url = getQuery(item.caseId, true)
-      console.log('url', url)
+      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) //图标大小
+        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 pos = coord.reverse();
+      positions.push(pos);
       const marker = new AMap.Marker({
         icon: icon,
         position: pos,
         title: item.title,
         label: item.title,
-        extData: { url: url, id: item.caseId }
+        extData: { url: url, id: item.caseId },
         // offset: new AMap.Pixel(-26, -54),
       });
 
       marker.setMap(map);
 
-      marker.on('click', () => {
-        const data = marker.getExtData()
-        window.open(data.url)
-        console.log('click', data)
-      })
-    })
+      marker.on("click", () => {
+        const data = marker.getExtData();
+        window.open(data.url);
+        console.log("click", data);
+      });
+    });
 
     var polygon = new AMap.Polygon({
       path: positions,
       map: map,
-      strokeOpacity: 0,//透明
-      fillOpacity: 0,//透明
-      bubble: true//事件穿透到地图
+      strokeOpacity: 0, //透明
+      fillOpacity: 0, //透明
+      bubble: true, //事件穿透到地图
     });
-    var overlaysList = map.getAllOverlays('polygon');//获取多边形图层
-    map.setFitView();//自适应显示
-
-  }
+    var overlaysList = map.getAllOverlays("polygon"); //获取多边形图层
+    map.setFitView(); //自适应显示
+  };
   initMakers();
-
 };
 
 onMounted(loadMap);
 const handCardClick = (id: number) => {
-  const url = getQuery(id, true)
-  console.log('url', url)
-  window.open(url)
-}
+  const url = getQuery(id, true);
+  console.log("url", url);
+  window.open(url);
+};
 </script>
 <style>
 body {
@@ -237,7 +258,6 @@ body {
 .card-container {
   width: 100%;
   padding-top: 100px;
-
 }
 
 .card-list {
@@ -269,4 +289,4 @@ body {
 .amap-ctrl-list-layer {
   z-index: 100000;
 }
-</style>
+</style>