student_portraits_manage/src/components/chart/Card.vue

<template>
  <div class="track">
    <div class="reveal" v-show="flag">
      <img :src="image" alt />
    </div>

    <div class="img">
      <div class="img-top">
        <div class="icon-left"></div>
        <div
          class="student"
          style="color: #fff; font-size: 20px; margin-left: 5px"
        >
          学生日常轨迹
        </div>
        <div
          class="iconMap"
          style="width:22px;height:22px;margin-left:60px;"
          @click="openMap"
        >
          <img
            src="../../assets/maps.png"
            style="width:22px;cursor: pointer;"
            alt
          />
        </div>
      </div>
    </div>
    <div class="card">
      <div class="scroll">
        <div class="circle">
          <ul v-for="(item, index) in data" :key="index">
            <li :class="index % 2 == 1 ? 'top' : 'bottom'">
              <div class="yh"></div>
              <div class="flag">
                <div class="date">
                  <div class="dot">
                    <div class="calendar"></div>
                    <div class="title">{{ item.dateTime }}</div>
                  </div>
                </div>
                <div class="txt">
                  <div
                    class="icon"
                    v-if="
                      item.name == '早餐' ||
                        item.name == '午餐' ||
                        item.name == '晚餐' ||
                        item.name == '夜宵'
                    "
                  >
                    <div class="iconimg">
                      <img src="../../assets/eat.png" alt />
                    </div>
                    <div class="content">{{ item.name }}</div>
                  </div>

                  <div class="icon" v-else-if="item.name == '洗浴用水'">
                    <div class="iconimg">
                      <img src="../../assets/bath.png" alt />
                    </div>
                    <div class="content">沐浴</div>
                  </div>
                  <div class="icon" v-else-if="item.name == '签到'">
                    <div class="iconimg">
                      <img src="../../assets/sign.png" alt />
                    </div>
                    <div class="content">{{ item.name }}</div>
                  </div>
                  <div class="icon" v-else-if="item.name == '外卖'">
                    <div class="iconimg">
                      <img src="../../assets/takeout.png" alt />
                    </div>
                    <div class="content">{{ item.name }}</div>
                  </div>
                  <div class="icon" v-else-if="item.name == '扫码'">
                    <div class="iconimg">
                      <img src="../../assets/code.png" alt />
                    </div>
                    <div class="content">{{ item.name }}</div>
                  </div>

                  <div
                    class="icon"
                    v-else-if="item.name == '借书' || item.name == '还书'"
                  >
                    <div class="iconimg">
                      <img src="../../assets/book.png" alt />
                    </div>
                    <div class="content">{{ item.name }}</div>
                  </div>

                  <div class="icon" v-else>
                    <div
                      class="iconImg"
                      @mouseenter="enter(item)"
                      @mouseleave="leave(item)"
                    >
                      <img :src="item.image ? item.image : ''" alt />
                    </div>
                  </div>
                  <div class="location">
                    <div class="location-top">
                      <span>地址 :</span>
                      <img
                        v-if="
                          item.name == '早餐' ||
                            item.name == '午餐' ||
                            item.name == '晚餐' ||
                            item.name == '夜宵'
                        "
                        src="../../assets/card.png"
                        alt
                      />
                      <img
                        v-else-if="item.name == '洗浴用水'"
                        src="../../assets/card.png"
                        alt
                      />
                      <img
                        v-else-if="item.name == '扫码'"
                        src="../../assets/rke.png"
                        alt
                      />
                      <img
                        v-else-if="item.name == '借书' || item.name == '还书'"
                        src="../../assets/books.png"
                        alt
                      />
                      <img
                        v-else-if="item.image"
                        src="../../assets/camera.png"
                        alt
                      />
                    </div>
                    <div class="location-bottom">{{ item.affair }}</div>
                  </div>
                  <!-- <div class="loca">
                    地址 :<br />
                    {{ item.affair }}
                  </div>-->
                </div>
              </div>
            </li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="img-bottom"></div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "Card",
  data() {
    return {
      data: [],
      image: "",
      flag: false,
      map: null,
      lnglats: [
        [113.922282, 35.332887],
        [113.963101, 35.318516],
        [113.960801, 35.306263],
        [113.926809, 35.301255]
      ]
    };
  },
  mounted() {
    // this.carGPSIP();
    this.getData();
  },
  methods: {
    carGPSIP() {
      var map = new AMap.Map("container", {
        resizeEnable: true,
        mapStyle: "amap://styles/normal"
      }); //初始化地图
      //信息窗口实例
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
      //遍历生成多个标记点
      for (var i = 0, marker; i < this.lnglats.length; i++) {
        var marker = new AMap.Marker({
          position: this.lnglats[i], //不同标记点的经纬度
          map: map
        });
        marker.content = "我是第" + (i + 1) + "个Marker";
        marker.on("click", markerClick);
        marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
      }
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();
    },
    // 初始化地图
    // initMap() {
    //   let arr = [
    //     [117.517694, 32.414674],
    //     [111.145623, 27.583686],
    //     [113.474725, 30.692175],
    //   ];
    //   //   window._AMapSecurityConfig = {
    //   //     securityJsCode: "958ba58ef78d37e0e79f0d373b414b50",
    //   //   };
    //   AMapLoader.load({
    //     key: "	9ebd4553cf26bbd879781e299f9c8e22", // 申请好的Web端开发者Key，首次调用 load 时必填
    //     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //     plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    //   })
    //     .then((AMap) => {
    //       this.map = new AMap.Map("container", {
    //         //设置地图容器id
    //         // mapStyle: "amap://styles/dd5c4e6b3df2392c1ab874991beef6de",
    //         viewMode: "3D", //是否为3D地图模式
    //         zoom: [10, 15], //初始化地图级别
    //         center: [117.517694, 32.41467], //初始化地图中心点位置
    //       });
    //       //   循环所有的标记点;
    //       for (let i = 0; i < arr.length; i++) {
    //         var marker = new AMap.Marker({
    //           position: arr[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //           map: this.map,
    //           content: `
    //                 <div class="my_marker">
    //                       <div class="marker" style="color:red">
    //                           ${this.winBox}所
    //                       </div>

    //                 </div>`,
    //           offset: new AMap.Pixel(-15, -20),
    //         });
    //         // 将创建的点标记添加到已有的地图实例：
    //         this.map.add([marker]);
    //       }

    //       //矩形
    //       // var circle = new AMap.Circle({
    //       // 		center: new AMap.LngLat("113.934497", "22.540517"), // 圆心位置
    //       // 		radius: 10, //半径
    //       // 		strokeColor: "#1aec1a", //线颜色
    //       // 		strokeOpacity: 1, //线透明度
    //       // 		strokeWeight: 1, //线粗细度
    //       // 		fillColor: "#1aec1a", //填充颜色
    //       // 		fillOpacity: 0.35 //填充透明度
    //       // 	});
    //     })
    //     .catch((e) => {
    //       console.log(e);
    //     });
    // },

    getData() {
      let params = { id: sessionStorage.getItem("id") };
      this.API.personal
        .track(params)
        .then(res => {
          // console.log(res.data.length);
          
          if (res.data.length !== 0) {
            res.data.forEach(item => {
              let data = dayjs(item.dateTime).format("M.DD HH:mm:ss");
              item.dateTime = data;
              this.data = res.data;
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    openMap() {
      this.$router.push({ path: "personal/map" });
    },
    enter(item) {
      // console.log(item);
      this.image = item.image;
      this.flag = true;
    },
    leave() {
      this.flag = false;
    }
  }
};
</script>

<style lang="less" scoped>
.track {
  width: 853px;
  height: 393px;
  margin: 0 auto;
  user-select: none;
  transform: translateY(55px);
  background: rgba(37, 53, 52, 0.5);

  .reveal {
    position: absolute;
    left: 1px;
    bottom: 400px;
    width: 849px;
    height: 478px;
    border: 1px solid #04eeff;
    z-index: 9999;

    // box-sizing: border-box;
    img {
      width: 849px;
      height: 478px;
    }

    #container {
      width: 100%;
      height: 100%;
    }
  }

  .img {
    transform: translate(12px, 11px);

    .img-top {
      width: 831px;
      height: 39px;
      background: url(../../assets/track-top.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;

      .icon-left {
        width: 26px;
        height: 26px;
        background: url(../../assets/title-left.png) no-repeat;
        background-size: 100%;
        margin-left: 22px;
      }
    }
  }

  @keyframes move {
    /* 开始状态 */
    0% {
      transform: translateX(0);
    }

    5% {
      transform: translateX(0);
    }

    /* 结束状态 */
    95% {
      transform: translateX(-400px);
    }

    100% {
      transform: translateX(-400px);
    }
  }

  .card {
    overflow: hidden;

    .scroll {
      width: 96%;
      margin: 0 auto;
      overflow-y: hidden;
      overflow-x: scroll;

      &::-webkit-scrollbar {
        display: block;
        /* Chrome Safari */
        // width: 1px;
        height: 8px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(4, 238, 255, 0.5);
      }

      &::-webkit-scrollbar-track {
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(60, 108, 254, 0.1);
      }
    }

    .circle {
      height: 340px;
      display: flex;
      align-items: center;
      margin-left: 1px;

      // animation: move 16s infinite linear; // 动画

      ul {
        margin-left: 2.5px;
        padding: 0;
        display: flex;
        align-items: center;
      }

      li {
        width: 16px;
        height: 16px;
        background: rgba(4, 238, 255, 0.5);
        border-radius: 50%;
        list-style: none;
        margin-right: 15px;
      }

      .top {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(4, 238, 255, 1);
        position: relative;

        .yh {
          position: absolute;
          width: 24px;
          height: 24px;
          background: transparent;
          border: 1px solid #04eeff;
          border-radius: 50%;
          position: absolute;
          top: -3px;
          left: -3px;
        }

        .flag {
          width: 155px;
          height: 115px;
          border-left: 3px solid rgba(0, 255, 255, 1);
          position: absolute;
          left: 8px;
          box-sizing: border-box;
          top: -105px;

          .date {
            width: 169px;
            height: 26px;
            background-color: rgba(0, 255, 255, 0.2);
            border-top-left-radius: 13px;
            border-bottom-left-radius: 13px;
            position: absolute;
            top: -26px;
            left: -14px;

            .dot {
              width: 18px;
              height: 18px;
              background-color: rgba(37, 53, 52, 0.5);
              border-radius: 50%;
              transform: translate(4px, 4px);
            }

            .calendar {
              width: 14px;
              height: 14px;
              background-image: url(../../assets/calendar.png);
              background-size: 100% 100%;
              position: absolute;
              left: 25px;
              top: 2px;
            }

            .title {
              color: #fff;
              position: absolute;
              font-size: 16px;
              white-space: nowrap;
              left: 45px;
              top: -1px;
            }
          }

          .txt {
            background: rgba(0, 255, 255, 0.2);
            width: 155px;
            height: 75px;
            font-weight: 400;
            color: #ffffff;
            position: absolute;
            display: flex;
            font-size: 12px;
            top: 4px;

            .icon {
              width: 42px;
              height: 57px;
              border-radius: 2px;
              margin: 8px;

              .iconimg {
                width: 100%;
                height: 36px;
                background-color: rgba(0, 255, 255, 0.2);
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                  width: 26px;
                  height: 26px;

                  // margin: 6px 0 0 10px;
                }
              }

              .iconImg {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 255, 255, 0.2);

                img {
                  width: 42px;
                  height: 57px;
                  // &:hover {
                  //   position: absolute;
                  //   width: 400px;
                  //   height: 300px;
                  //   z-index: 9999;
                  // }
                  // margin: 6px 0 0 10px;
                }
              }

              .content {
                height: 21px;
                background-color: rgba(6, 228, 243, 1);
                text-align: center;
                color: #000;
                line-height: 21px;
              }
            }

            .location {
              margin: 8px;
              width: 88px;

              .location-top {
                display: flex;
                justify-content: space-between;
                align-items: center;

                img {
                  width: 22px;
                  height: 22px;
                }
              }

              .location-bottom {
                margin: 6px 0 0 0;
                vertical-align: middle;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }

            .loca {
              width: 155px;
              height: 75px;
              font-size: 14px;
              padding: 5px;
              color: transparent;
              box-sizing: border-box;
              position: absolute;
              left: 0;
              z-index: 9999;

              &:hover {
                background-color: rgba(0, 0, 0, 0.8);
                color: #fff;
              }
            }

            // span {
            //   width: 90%;
            //   margin: 0 auto;
            //   vertical-align: middle;
            //   font-size: 16px;
            //   text-overflow: -o-ellipsis-lastline;
            //   overflow: hidden;
            //   text-overflow: ellipsis;
            //   display: -webkit-box;
            //   -webkit-line-clamp: 2;
            //   -webkit-box-orient: vertical;
            // }
          }
        }
      }

      .bottom {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        transform: translateY(2px);
        background: rgba(4, 238, 255, 1);
        position: relative;

        .yh {
          position: absolute;
          width: 24px;
          height: 24px;
          background: transparent;
          border: 1px solid #04eeff;
          border-radius: 50%;
          position: absolute;
          top: -3px;
          left: -3px;
          // transform: translate(-50%, -50%);
        }

        .flag {
          width: 155px;
          height: 115px;
          border-left: 3px solid rgba(0, 255, 255, 1);
          position: absolute;
          left: 50%;
          box-sizing: border-box;
          top: 50%;

          .date {
            width: 169px;
            height: 26px;
            background-color: rgba(0, 255, 255, 0.2);
            border-top-left-radius: 13px;
            border-bottom-left-radius: 13px;
            position: absolute;
            bottom: -26px;
            left: -14px;

            .dot {
              width: 18px;
              height: 18px;
              background-color: rgba(37, 53, 52, 0.5);
              border-radius: 50%;
              transform: translate(4px, 4px);
            }

            .calendar {
              width: 14px;
              height: 14px;
              background-image: url(../../assets/calendar.png);
              background-size: 100% 100%;
              position: absolute;
              left: 25px;
              top: 2px;
            }

            .title {
              color: #fff;
              position: absolute;
              font-size: 16px;
              white-space: nowrap;
              left: 45px;
              top: -2px;
            }
          }

          .txt {
            background: rgba(0, 255, 255, 0.2);
            width: 155px;
            height: 75px;
            font-weight: 400;
            color: #ffffff;
            position: absolute;
            display: flex;
            top: -8px;
            transform: translateY(44px);
            font-size: 12px;

            .icon {
              width: 42px;
              height: 57px;
              border-radius: 2px;
              margin: 8px;

              .iconimg {
                width: 100%;
                height: 36px;
                background-color: rgba(0, 255, 255, 0.2);
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                  width: 26px;
                  height: 26px;
                  // margin: 6px 0 0 10px;
                }
              }

              .iconImg {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 255, 255, 0.2);

                img {
                  width: 42px;
                  height: 57px;
                  // margin: 6px 0 0 10px;
                }
              }

              .content {
                height: 21px;
                background-color: rgba(6, 228, 243, 1);
                text-align: center;
                color: #000;
                line-height: 21px;
              }
            }

            .location {
              margin: 8px;
              width: 88px;

              .location-top {
                display: flex;
                justify-content: space-between;
                align-items: center;

                img {
                  width: 22px;
                  height: 22px;
                }
              }

              .location-bottom {
                margin: 6px 0 0 0;
                overflow: hidden;
                // text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }

            .loca {
              width: 155px;
              height: 75px;
              font-size: 14px;
              padding: 5px;
              color: transparent;
              box-sizing: border-box;
              position: absolute;
              left: 0;
              z-index: 9999;

              &:hover {
                background-color: rgba(0, 0, 0, 0.8);
                color: #fff;
              }
            }

            // span {
            //   width: 90%;
            //   margin: 0 auto;
            //   vertical-align: middle;
            //   font-size: 16px;
            //   text-overflow: -o-ellipsis-lastline;
            //   overflow: hidden;
            //   text-overflow: ellipsis;
            //   display: -webkit-box;
            //   -webkit-line-clamp: 2;
            //   -webkit-box-orient: vertical;
            // }
          }
        }
      }
    }

    .circle:hover {
      animation-play-state: paused;
    }
  }

  .img-bottom {
    width: 820px;
    height: 1px;
    background: url(../../assets/track-bottom.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 17px;
    // border-bottom: 1px solid #58a2a8;
    top: 370px;
  }
}
</style>