caseEditor/src/app/map/App.vue

<template>
  <!-- <div>地图页面</div> -->
  <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-group>
    </div>
    <el-form-item label="所属架构：" class="filter">
      <com-company v-model="state.deptId" :id="state.caseId" />
    </el-form-item>
  </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" v-if="list.length > 0">
        <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>
      <template v-else>
        <div class="no-data">
          <img :src="emptyBG" />
          <span>暂无数据</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, onBeforeMount } from "vue";
// import { useRouteQuery } from "@vueuse/router";
import AMapLoader from "@amap/amap-jsapi-loader";
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 linkIco from "@/assets/image/fire.ico";
import { useUrlSearchParams } from "@vueuse/core";
import emptyBG from "@/assets/image/empty__empty.png";

const params = useUrlSearchParams("history");
console.log("params", params.deptId);

const current = ref(0);
const list = ref<any>([]);

const state = reactive({
  deptId: params.deptId || "",
  // caseId: params.caseId || "",
});

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;
};

const getQuery = (
  caseId: number,
  share: boolean = false,
  single: boolean = false
) =>
  `${getFuseCodeLink(caseId, true)}${share ? "&share=1" : ""}${
    single ? "&single=1" : ""
  }#show/summary`;

const request = axios.create({
  baseURL: "",
  timeout: 1000,
  headers: {
    share: 1,
    "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);
    if (res.status === 200 && res.data.code === 0) {
      reslove(res.data.data.list);
    } else {
      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();
};

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,
    },
    resizeEnable: true,
  });

  //添加插件
  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[];
    Array.from(data).forEach((item: any) => {
      // console.log(item)
      const latlng = item.latlng;
      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.title,
        label: item.title,
        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);
      });
    });

    var polygon = new AMap.Polygon({
      path: positions,
      map: map,
      strokeOpacity: 0, //透明
      fillOpacity: 0, //透明
      bubble: true, //事件穿透到地图
    });
    var overlaysList = map.getAllOverlays("polygon"); //获取多边形图层
    map.setFitView(); //自适应显示
  };
  initMakers();
};

onMounted(() => {
  // console.log("caseId", caseId);
  loadMap();
});
const handCardClick = (id: number) => {
  const url = getQuery(id, true);
  console.log("url", url);
  window.open(url);
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
}

.tabbar {
  display: flex;
  width: 100%;
  position: fixed;
  top: 30px;
  z-index: 10000;
  justify-items: center;
  justify-content: center;
}

.tabbar .nav {
  display: flex;
  /* background: white; */
  justify-content: center;
  align-items: center;
}
.el-form-item {
  margin-bottom: 0px !important;
}

.tabbar .nav .nav_item {
  padding: 10px;
  cursor: pointer;
}

.card-container {
  width: 100%;
  padding-top: 100px;
}

.card-list {
  margin: 0 auto;

  display: flex;
  gap: 50px 25px;
  width: 90%;
  flex-direction: row;
  flex-wrap: wrap;
}

.cover {
  cursor: pointer;
  max-height: 220px;
  object-fit: cover;
}

.card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  gap: 10px;
}

.filter {
  margin: 0;
  margin-left: 20px;
}

.amap-ctrl-list-layer {
  z-index: 100000;
}
.no-data {
  width: 100%;
  height: 100%;
  /* background: red; */
  min-height: 530px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.no-data span {
  color: #999;
}
</style>