diantou/src_custom/performance-tracking/xm-over-view.vue

<template>
  <div>
    <div :class="$style.box" bordered>
      <div :class="$style.boxtext">
        <li>{{ today }}</li>
        <li>关键用户使用体验监测</li>
      </div>
      <div :class="$style.boxitems">
        <div :class="[$style.items, $style.itemone, $style.action]">
          <span :class="$style.number">{{ datalist.operateUserCount || 0 }}</span>
          <img src="./image/circle.svg" />
          <span :class="$style.itemtit">点击人数</span>
        </div>
        <div :class="[$style.items, $style.itemtwo, $style.action]">
          <span :class="$style.number">{{ datalist.todayOperateCount || 0 }}</span>
          <img src="./image/circle.svg" />
          <span :class="$style.itemtit">点击总量</span>
        </div>
        <div :class="[$style.items, $style.itemtwo, $style.action]">
          <span :class="$style.number"
            >{{ datalist.mobileOperateAvg ? (datalist.mobileOperateAvg / 1000).toFixed(1) : 0 }}
            <span :class="$style.second">s</span>
          </span>
          <img src="./image/circle.svg" />
          <span :class="$style.itemtit">移动端<br />平均响应时间</span>
        </div>
        <div :class="[$style.items, $style.itemone, $style.action]">
          <span :class="$style.number"
            >{{ datalist.pcOperateAvg ? (datalist.pcOperateAvg / 1000).toFixed(1) : 0 }}
            <span :class="$style.second">s</span>
          </span>
          <img src="./image/circle.svg" />
          <span :class="$style.itemtit">PC端<br />平均响应时间</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import TrackService from './track-service'
import components from './_import-components/xm-over-view-import'
export default {
  name: 'XmOverView',
  metaInfo: {
    title: 'OverView',
  },
  components,
  data() {
    return {
      today: '',
      datalist: {},
    }
  },
  mounted() {
    this.initData()
    this.today = moment().format('YYYY-MM-DD')
  },
  methods: {
    initData() {
      TrackService.getTotalCostTime()
        .then((res) => {
          this.datalist = res.data
        })
        .catch((e) => {})
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.box {
  position: absolute;
  width: 100%;
  height: 100%;
  color: $card-background;
  background-image: url('./image/bg.png');
  background-repeat: no-repeat;
  background-position: 50% -12px;
  background-size: 90% 90%;
  .boxtext {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 322px;
    font-size: $heading-3-size;
    color: $card-background;
    text-align: center;
    transform: translate(-50%, -50%);
    li {
      list-style: none;
    }
  }
  .boxitems {
    position: absolute;
    top: 64%;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    margin-right: -10px;
    .itemone {
      margin-top: -20px;
    }
    .itemtwo {
      margin-top: 15px;
    }
    .items {
      position: relative;
      margin-right: 10px;
      img {
        width: 110px;
      }
      .number {
        position: absolute;
        width: 110px;
        margin-top: -15px;
        font-size: $btn-height-lg;
        text-align: center;
      }
      .second {
        position: absolute;
        margin-top: 10px;
        font-size: $padding-lg;
      }
      .itemtit {
        display: block;
        width: 110px;
        margin-top: 5px;
        text-align: center;
      }
    }
    .action {
      animation: move 4s infinite;
    }
    .action:hover {
      cursor: pointer;
      animation-play-state: paused;
    }
  }
}
@keyframes move {
  0% {
    top: -10px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: -10px;
  }
}
.bg {
  position: absolute;
  left: 3%;
  width: 465px;
  margin: 0 auto;
}
</style>