diantou/src_custom/performance-tracking/xm-performance-track.vue

<template>
  <div :class="$style.wrapbackground">
    <a-layout-header :class="$style.header">
      <div :class="$style.logo" />
      <div :class="$style.title">关键用户使用体验监测</div>
    </a-layout-header>
    <div v-show="response" :class="$style.model">
      <response-times :class="$style.border" @fullresponse="fullresponse"></response-times>
    </div>
    <div v-if="compare" :class="$style.model">
      <time-compare :isfull="true" @fullcompare="fullcompare"></time-compare>
    </div>
    <div v-show="fenbu" :class="$style.model">
      <open-fenbu :isfull="true" @fullfenbu="fullfenbu"></open-fenbu>
    </div>
    <div :class="$style.allwrap">
      <a-row :gutter="[0, 0]">
        <a-col :span="8"><response-times @fullresponse="fullresponse"></response-times></a-col>
        <a-col :span="8"><over-view></over-view></a-col>
        <a-col :span="8"
          ><time-compare
            v-if="!compare"
            :fullradio="fullradio"
            @fullcompare="fullcompare"
            @radiochange="radiochange"
          ></time-compare
        ></a-col>
      </a-row>
      <a-row :gutter="[0, 0]">
        <a-col :span="12"><open-fenbu @fullfenbu="fullfenbu"></open-fenbu></a-col>
        <a-col :span="12" :class="$style.customwrap"><user-todolist></user-todolist></a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import components from './_import-components/xm-performance-track-import'
import ResponseTimes from './xm-response-times.vue'
import OverView from './xm-over-view.vue'
import TimeCompare from './xm-time-compare.vue'
import OpenFenbu from './xm-open-fenbu.vue'
import UserTodolist from './xm-user-todolist.vue'
const key = new Date().toString()
export default {
  name: 'XmPerformanceTrack',
  metaInfo: {
    title: '关键用户监测',
  },
  components: {
    ...components,
    'response-times': ResponseTimes,
    'over-view': OverView,
    'time-compare': TimeCompare,
    'open-fenbu': OpenFenbu,
    'user-todolist': UserTodolist,
  },
  data() {
    return {
      response: false,
      compare: false,
      fenbu: false,
      key: key,
      fullradio: 1,
    }
  },
  methods: {
    fullresponse(e) {
      this.response = e
    },
    fullcompare(e) {
      this.compare = e
    },
    fullfenbu(e) {
      this.fenbu = e
    },
    radiochange(e) {
      this.fullradio = e
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.logo {
  float: left;
  width: 256px;
  height: 100%;
  background: url('~@custom/images/logo.png') no-repeat center;
}
.title {
  display: inline-block;
  float: left;
  height: 100%;
  font-size: $heading-4-size;
}
.header {
  &:global(.ant-layout-header) {
    padding: 0 20px 0 0;
    color: $text-color-inverse;
    background: $primary-10;
  }
  :global(.ant-btn-link) {
    color: $white;
    &:hover {
      color: $primary-2;
    }
    &:active {
      background-color: $disabled-color-dark;
    }
  }
}
:global(.ant-row) {
  height: 50%;
}
:global(.ant-col-12) {
  height: 94%;
}
:global(.ant-col-8) {
  height: 98%;
}
.wrapbackground {
  height: 100%;
  background: #01267b;
}
.customwrap {
  position: relative;
  padding-right: 5px;
}
body {
  background: #01267b;
  -ms-overflow-style: none;
}
.model {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: calc(100% - 64px);
  background: rgba(1, 38, 123, 0.2);
}
.space {
  width: 1px;
  height: 15px;
}
.allwrap {
  width: 100%;
  height: calc(100% - 64px);
}
</style>