work_admin/src/views/copy/index.vue

<template>
  <div class="datav-index">
    <div id="container" style="width: 100vw"></div>
    <div class="btn-box">
      <a-dropdown :trigger="['click']">
        <template #overlay>
          <a-menu @click="handleMenuClick" style="width: 160px">
            <a-menu-item :key="index" v-for="(item, index) in member_list">
              <div class="menu-item-d">
                <a-avatar :src="item.avatar" icon="user" size="small" />
                <a class="muted name">{{ item.name }}</a>
              </div>
            </a-menu-item>
          </a-menu>
        </template>
        <a-button style="min-width: 100px">
          <div class="menu-item-d">
            <a-avatar :src="now_user.avatar" icon="user" size="small" />
            <a class="muted name">{{ now_user.name }}</a>
          </div>
        </a-button>
      </a-dropdown>
      <a-date-picker
        v-model="now_date"
        format="MM月DD日"
        :allowClear="false"
        @change="changeTime"
      />
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import AMapLoader from "@amap/amap-jsapi-loader";
import { positioningList, positioningMember } from "@/api/datav";
import {
  del,
  forbid,
  list as getMembers,
  resume,
  liaisonMan,
} from "../../api/user";
import { notice } from '../../assets/js/notice';

export default {
  name: "datav",
  data() {
    return {
      map: null,
      Amap: null,
      visibleTaskCopied: false,
      now_date: "",
      now_user: {
        member_code: "",
        avatar: "",
        name: "全部",
      },
      member_list: [],
      markers: [],
      polyline: null,
    };
  },
  created() {
    this.now_date = "";
    this.getMembers();
  },
  mounted() {
    this.initMap();
  },
  methods: {
    getMembers() {
      getMembers().then((res) => {
        this.member_list = res.data.list;
      });
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");

      return `${year}-${month}-${day}`;
    },
    initMap() {
      AMapLoader.load({
        key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        Loca: {
          version: "2.0.0",
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 15, // 初始化地图级别
            center: [105.433211, 28.913861], // 初始化地图中心点位置
            mapStyle: "amap://styles/darkblue",
          });

          this.initMaker();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleMenuClick(e) {
      this.now_user = this.member_list[e.key];
      this.initList();
    },
    changeTime(e) {
      console.log(this.now_date);
      this.initList();
    },
    initMaker() {
      positioningList().then((res) => {
        // 添加标记点
        res.data.forEach((item) => {
          if (item.positioning) {
            let marker = new AMap.Marker({
              position: item.positioning.split(","),
              map: this.map,
              content: `
                              <div class="marker-d">
                                  <img src="${
                                    item.avatar ||
                                    "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f7d49202401111649248163.png"
                                  }" />
                                  <div class="text">
                                      <div>${item.name}</div>
                                      <div>更新时间:${item.date}</div>
                                      <div>停留时间:${item.date}</div>
                                  </div>
                              </div>
                              `,
              offset: new AMap.Pixel(-20, -20),
            });
            this.markers.push(marker);
          }
        });
      });
    },
    initList() {
      if(!this.now_user.member_code||!this.now_date) return;
      this.map.remove(this.markers);
      if(this.polyline)this.polyline.setMap(null);
      positioningMember({
        code: this.now_user.member_code,
        date: this.formatDate(new Date(this.now_date||Date.now())),
      }).then((res) => {
        let path = res.data.map((item) => {
          return item.split(",");
        })||[];

        if(path.length==0) return notice({title: '该成员当日无轨迹信息'}, 'error', 3000);
        // 绘制轨迹
        this.polyline = new AMap.Polyline({
          path: path,
          strokeColor: "#52c41a",
          strokeWeight: 5,
          strokeOpacity: 1,
          strokeStyle: "solid",
          zIndex: 50,
        });
        this.polyline.setMap(this.map);
      }).catch(err=>{
        console.log(err);
        return notice({title: '该成员当日无轨迹信息'}, 'error', 3000);
      });
    },
  },
};
</script>

<style lang="less">
.datav-index {
  position: relative;
}
.marker-d {
  width: 260px;
  img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 2px solid yellow;
  }
  .text {
    background: rgba(#0c3e6d, 0.6);
    padding: 10px;
    margin-top: 10px;
    div {
      color: white; /* 设置文字颜色为白色 */
      // text-shadow: 1px 1px 2px yellow; /* 设置文字的外阴影为黄色，水平偏移量为2px，垂直偏移量为2px */
      align-items: center;
    }
  }
}
.p-box {
  position: relative;
}
.btn-box {
  position: absolute;
  top: 20px;
  left: 30px;
  height: 60px;
  display: flex;
  align-items: center;
}
#container {
  height: calc(100vh - 66px);
}
.menu-item-d {
  .name {
    margin-left: 6px;
  }
}
</style>