cas_cloud_web_i18n/src/views/website/home/comp/index0.vue

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { computed, onMounted, ref, shallowRef, toRefs, watch } from "vue";
import { init, registerMap } from "echarts";
import {
  countAchievementByArea,
  countAchievementByCity,
  countAchievementByProvince,
  countDemandByArea,
  countDemandByCity,
  countDemandByProvince,
  countEnterpriseByArea,
  countEnterpriseByCity,
  countEnterpriseByProvince,
  countExpertByArea,
  countExpertByCity,
  countExpertByProvince,
} from "@/api/website/home";
import backBtnPng from "@/assets/images/map_back.png";
import RegionPagine from "@/views/website/home/comp/RegionPagine.vue";
import html2canvas from "html2canvas";
import anime from "animejs";
import { useI18n } from "vue-i18n";
import geoJSONRU from "@/assets/custom.geo.json";

const { t, locale } = useI18n();
const leftBoxPageNum = ref(1);
const rightBoxPageNum = ref(1);
const mapRef = ref(null);
const districtSearch = shallowRef(null);
const myEcharts = shallowRef(null);
const map = shallowRef(null);
const mapData = ref([]);
const props = defineProps({
  mapIndex: {
    type: Number,
    default: 0,
  },
});
const { mapIndex } = toRefs(props);
const emit = defineEmits(["changeMapIndex"]);
const methods = [
  {
    name: "expert",
    title: computed(() => t("map.expertMap")),
    byProvince: countExpertByProvince,
    byCity: countExpertByCity,
    byArea: countExpertByArea,
  },
  {
    name: "technology",
    // title: "技术分布地图",
    title: computed(() => t("map.technologyMap")),
    byProvince: countAchievementByProvince,
    byCity: countAchievementByCity,
    byArea: countAchievementByArea,
  },
  {
    name: "demand",
    // title: "需求分布地图",
    title: computed(() => t("map.demandMap")),
    byProvince: countDemandByProvince,
    byCity: countDemandByCity,
    byArea: countDemandByArea,
  },
  {
    name: "enterprise",
    // title: "企业分布地图",
    title: computed(() => t("map.enterpriseMap")),
    byProvince: countEnterpriseByProvince,
    byCity: countEnterpriseByCity,
    byArea: countEnterpriseByArea,
  },
];

const areaCount = ref([]); // 按行政区划统计
const industryCount = ref([]); // 按领域统计
const areaCountPaged = computed(() =>
  areaCount.value.slice(
    (leftBoxPageNum.value - 1) * 5,
    leftBoxPageNum.value * 5
  )
);
const industryCountPaged = computed(() =>
  industryCount.value.slice(
    (rightBoxPageNum.value - 1) * 5,
    rightBoxPageNum.value * 5
  )
);
const options = {
  // nameProperty: 'adcode',
  visualMap: {
    type: "piecewise",
    left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
    bottom: "30",
    orient: "horizontal", //图例排列方向
    padding: 5,
    pieces: [
      { gte: 0, lte: 99, label: "99", color: "#CAE9FD" },
      { gte: 100, lte: 299, label: "100-299", color: "#7ED2F7" },
      { gte: 300, lte: 499, label: "299-499", color: "#039DDD" },
      { gte: 500, label: "500", color: "#0D4884" },
    ],
    textStyle: {
      color: "#fff",
    },
    visibility: "off",
  },
  tooltip: {
    //提示框信息
    trigger: "item",
    formatter: "{b}\n{c}人",
  },
  series: [
    {
      type: "map",
      name: "中国",
      map: "map",
      data: [],
    },
  ],
};
const loadAMap = async () => {
  const AMap = await AMapLoader.load({
    key: "377d7c36dd385e2a722f29d4c6e1ffbf", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: [
      /*"AMap.DistrictSearch", "AMap.DistrictExplorer"*/
    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    AMapUI: {
      // 是否加载 AMapUI，缺省不加载
      version: "1.1", // AMapUI 缺省 1.1
      plugins: [], // 需要加载的 AMapUI ui插件
    },
  });
  map.value = new AMap.Map("container", {
    zoom: 4, //级别
    center: [108.946609, 34.262324], //中心点坐标
    // viewMode: '3D' //使用3D视图
  });
  map.value.on("click", mapClick);
  // districtSearch.value = new AMap.DistrictSearch({
  //   level: 'province',
  //   extensions: 'all',
  //   subdistrict: 1,
  //   showbiz: false,
  // })
};
const loading = ref(false);
const loadChinaDistrict = (adcode) => {
  loading.value = true;
  AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
    const districtExplorer = new DistrictExplorer({
      map: map, //关联的地图实例
    });

    districtExplorer.loadAreaNode(adcode, async (error, areaNode) => {
      if (error) {
        console.error(error);
        loading.value = false;
        return;
      }
      const parentAdcode = areaNode.getAdcode();
      // 绘制载入的区划节点
      const geoJSON = {
        type: "FeatureCollection",
        features: areaNode.getSubFeatures(),
      };
      const level = getLevel(adcode);
      let result;
      try {
        if (level === 0) {
          result = await methods[mapIndex.value]["byProvince"]();
        } else if (level === 1) {
          result = await methods[mapIndex.value]["byCity"](adcode);
        } else if (level === 2) {
          result = await methods[mapIndex.value]["byArea"](adcode);
        }
      } catch (e) {
        loading.value = false;
        return;
      }
      if (result.industry)
        industryCount.value = Object.keys(result.industry).map((key) => ({
          name: key,
          count: result.industry[key],
        }));
      areaCount.value = result.count ?? [];
      mapData.value = geoJSON.features.map((el) => {
        const areaProp = el.properties;
        return {
          adcode: areaProp.adcode,
          name: areaProp.name,
          value:
            result.count.find((el) => el.code == areaProp.adcode)?.count ?? 0,
        };
      });

      registerMap("map", { geoJSON, specialAreas: {} });
      options.series[0].data = mapData.value;
      myEcharts.value.setOption(options);
      loading.value = false;
    });
  });
};

const loadRussiaDistrict = () => {
  registerMap("map", { geoJSON: geoJSONRU, specialAreas: {} });
  myEcharts.value.setOption(options);
  // TODO:get count
};
// 返回地图上一级
const backMap = () => {
  // loadChinaDistrict(parentAdcode)
  loadChinaDistrict("100000");
};

onMounted(async () => {
  await loadAMap();
  myEcharts.value = init(mapRef.value);
  myEcharts.value.on("click", mapClick);
  if (locale.value === "zh") {
    loadChinaDistrict("100000");
  } else {
    loadRussiaDistrict();
  }
});

/**
 * 根据adcode判断省市区级别
 * @param adcode
 * @return {number} 国家: 0 省: 1 市: 2 区: 3
 */
const getLevel = (adcode) => {
  adcode = adcode.toString();
  if (adcode === "100000") {
    return 0;
  }
  const splitPattern = /(\d{2})(\d{2})(\d{2})/;
  const resultArray = adcode.match(splitPattern).slice(1);
  // 国家: 0 省: 1 市: 2 区: 3
  let result = resultArray.indexOf("00");
  if (result === -1) {
    result = 3;
  }
  return result;
};
const mapClick = (ev) => {
  const level = getLevel(ev.data.adcode);
  if (level === 3) {
    return;
  }
  loadChinaDistrict(ev.data.adcode);
};

const playScrollAnimation = (direction, start) => {
  const pageWrap = document.querySelector(".page-wrap");
  const rootWrap = document.querySelector(".root-container");
  html2canvas(pageWrap).then((canvas) => {
    canvas.addEventListener("wheel", (ev) => {
      ev.stopPropagation();
      ev.preventDefault();
    });
    if (direction === "down") {
      rootWrap.insertBefore(canvas, pageWrap);
    } else if (direction === "up") {
      rootWrap.appendChild(canvas);
      rootWrap.style.transform = "translateY(-100%)";
    }
    anime({
      targets: rootWrap,
      translateY: direction === "down" ? "-100%" : "0",
      duration: 300,
      easing: "linear",
      begin: start,
      complete: () => {
        rootWrap.removeChild(canvas);
        rootWrap.style.transform = "translateY(0%)";
        isScrolling.value = false;
      },
    });
  });
};

const isScrolling = ref(false);
const handleScroll = async (ev) => {
  let direction = ev.deltaY > 0 ? "down" : "up";
  // 判断滚轮滚动方向
  if (
    (direction === "down" && mapIndex.value >= methods.length - 1) ||
    (direction === "up" && mapIndex.value <= 0)
  ) {
    return;
  }
  ev.preventDefault();
  ev.stopPropagation();
  if (isScrolling.value) {
    return;
  }
  isScrolling.value = true;
  playScrollAnimation(direction, () => {});
  if (direction === "down" && mapIndex.value < methods.length - 1) {
    emit("changeMapIndex", mapIndex.value + 1);
  } else if (direction === "up" && mapIndex.value > 0) {
    emit("changeMapIndex", mapIndex.value - 1);
  }
};

watch(mapIndex, (newVal, oldVal) => {
  console.log(`mapIndex change from ${oldVal} to ${newVal}`);
  if (newVal === oldVal) {
    return;
  }
  isScrolling.value = true;
  const direction = newVal > oldVal ? "down" : "up";
  playScrollAnimation(direction, () => {});
  if (locale.value === "zh") {
    loadChinaDistrict("100000");
  } else {
    loadRussiaDistrict();
  }
});

watch(locale, (newVal) => {
  console.log(newVal);
  if (newVal === "zh") {
    loadChinaDistrict("100000");
  } else if (newVal === "ru") {
    loadRussiaDistrict();
  }
});
</script>

<template>
  <div class="root-wrap">
    <div class="root-container">
      <div class="page-wrap" @wheel="handleScroll">
        <div class="title">{{ methods[mapIndex].title.value }}</div>
        <div v-if="loading" class="loading-modal"></div>
        <!--   返回上一级按钮   -->
        <div class="back-btn" @click="backMap">
          <img :src="backBtnPng" alt="back" />
        </div>
        <!--  人数表格  -->
        <div class="count-table area">
          <div class="table">
            <div class="head">
              <div class="th">
                <div class="title">地区</div>
                <div class="count">人数</div>
              </div>
            </div>
            <div class="body">
              <div v-for="item in areaCountPaged" :key="item.adcode" class="tr">
                <div class="title">{{ item.name }}</div>
                <div class="count">{{ item.count }}</div>
              </div>
            </div>
          </div>
          <RegionPagine
            v-model:page="leftBoxPageNum"
            :total="areaCount.length"
          />
        </div>
        <!--     领域   -->
        <div class="count-table industry">
          <div class="table">
            <div class="head">
              <div class="th">
                <div class="title">领域</div>
                <div class="count">人数</div>
              </div>
            </div>
            <div class="body">
              <div
                v-for="item in industryCountPaged"
                :key="item.adcode"
                class="tr"
              >
                <div class="title">{{ item.name }}</div>
                <div class="count">{{ item.count }}</div>
              </div>
            </div>
          </div>
          <RegionPagine
            v-model:page="rightBoxPageNum"
            :total="industryCount.length"
          />
        </div>
        <div id="map-container" ref="mapRef"></div>
        <div
          id="container"
          style="
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0);
            display: none;
          "
        ></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.scroll-to-top {
  animation: 1s linear infinite page-scroll;
}

.root-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .root-container {
    width: 100%;
    height: 100%;

    > canvas {
      transition: all 0.3s linear;
    }

    .page-wrap {
      width: 100%;
      height: 100%;
      //top: 0;
      //left: 0;
      position: relative;
      //transition: all 0.3s linear;
      //animation: 1s linear forwards page-scroll;
      .loading-modal {
        position: absolute;
        left: 0;
        top: 0;
        background: #f0f2f5;
      }

      #map-container {
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, #010101, #041744);
      }

      > .title {
        position: absolute;
        top: 75px;
        width: 100%;
        text-align: center;
        font-size: 36px;
        font-family: Source Han Sans CN, sans-serif;
        font-weight: 300;
        color: #ffffff;
        z-index: 101;
      }

      .back-btn {
        position: absolute;
        left: 120px;
        top: 120px;
        z-index: 99;
        cursor: pointer;
      }

      .count-table {
        position: absolute;

        z-index: 101;

        &.area {
          top: 200px;
          left: 120px;
        }

        &.industry {
          top: 200px;
          right: 120px;
        }

        .table {
          border: 1px solid #0054ff;

          .head,
          .body {
            .tr,
            .th {
              display: flex;
              color: white;

              .title,
              .count {
                width: 100px;
                padding: 8px 12px;
                text-align: center;
              }

              .title {
                border-right: 1px solid #0054ff;
              }
            }

            .th {
              border-bottom: 1px solid #0054ff;
            }

            .tr {
              color: rgb(161, 192, 255);
            }
          }
        }

        .pagination {
          display: flex;
        }
      }
    }
  }
}

//@keyframes page-scroll {
//  0% {
//    transform: translateY(0);
//  }
//  100% {
//    transform: translateY(-100%);
//  }
//}
</style>