wiki_enterprise_js/pages/my-signs/my-signs.vue

<template>
  <view class="wrap">
    <!-- 头部菜单 -->
    <view class="nav-wrap slide-bottom">
      <uni-segmented-control
        :active-color="activeColor"
        :current="current"
        :values="values"
        @clickItem="handleClickNav"
        class="nav"
      />
    </view>
    <!-- 内容区 -->
    <view class="content">
      <!-- 今日打卡地图显示 -->
      <history-map
        :markers="markers"
        :polygons="polygons"
        :polyline="polyline"
        v-if="current === 0"
      />
      <!-- 打卡记录 时间轴显示 -->
      <timeline v-else />
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {
      current: 0,
      values: ['今日打卡', '打卡记录'],
      activeColor: '#0897C7',
    };
  },

  computed: {
    ...mapState('statistics', ['userSigns']),
    ...mapState('user', ['token']),
    // 坐标标注点
    markers() {
      if (!this.userSigns) return null;
      const result = [];
      this.userSigns.forEach(item => {
        const content = `${this.$moment(+item.time).format('YY-MM-DD HH:mm')} \n ${item.siteName}`;
        const obj = {
          latitude: item.latitude,
          longitude: item.longitude,
          iconPath: '/static/location.png',
          callout: {
            content,
            color: '#fff',
            padding: 4,
            bgColor: '#0A97C6',
            borderRadius: 2,
            textAlign: 'center',
          },
        };
        result.push(obj);
      });

      return result;
    },

    // 轨迹连线
    polyline() {
      if (!this.userSigns) return null;
      const points = [];
      this.userSigns.forEach(item => {
        const obj = {
          latitude: item.latitude,
          longitude: item.longitude,
        };
        points.push(obj);
      });
      return [{ points, arrowLine: true, dottedLine: true, borderColor: '#cccccc' }];
    },

    // 多边形区域
    polygons() {
      if (!this.userSigns) return null;
      const points = [];
      this.userSigns.forEach(item => {
        const obj = {
          latitude: item.latitude,
          longitude: item.longitude,
        };
        points.push(obj);
      });
      return [
        { points, strokeWidth: 0, strokeColor: '#00000000', fillColor: '#cce6ff88', zIndex: 0 },
      ];
    },
  },

  onLoad() {
    const startTime = +this.$moment()
      .startOf('day')
      .format('x');
    const endTime = +this.$moment()
      .endOf('day')
      .format('x');
    const params = { param: { startTime, endTime, token: this.token } };
    this.getUserSigns(params);
  },

  methods: {
    ...mapActions('statistics', ['getUserSigns']),

    handleClickNav({ currentIndex }) {
      this.current = currentIndex;
      const endTime = +this.$moment()
        .endOf('day')
        .format('x');
      const startTime = +this.$moment('2020-01-01')
        .startOf('day')
        .format('x');
      let param = { startTime, endTime, token: this.token };
      if (currentIndex === 0) {
        param.startTime = +this.$moment()
          .startOf('day')
          .format('x');
      }
      const params = { param };
      this.getUserSigns(params);
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 88rpx;
  min-height: 100vh;
  background-color: $white;

  .nav-wrap {
    z-index: 999;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 88rpx;
    background-color: $white;
    .nav {
      width: 540rpx;
    }
  }
}
</style>