loulijun2021
2022-10-29 e713b378b01d189f972cfb5b9eae749ee95a8b51
src/views/xtsy/index.vue
@@ -1,6 +1,6 @@
<template>
  <!--  <div>-->
  <div class="body" :style="{height:mainHeight+'px'}">
  <div class="body" style="  padding: 30px 10px 0 20px;background-color: #eaecef;" :style="{height:mainHeight+'px'}">
    <div style="">
      <div class="title"><i class="el-icon-s-fold" style="margin-right: 5px" />实时数据</div>
      <div class="top">
@@ -81,19 +81,23 @@
    <div class="center">
      <div class="title" style="margin-top: 20px"><i class="el-icon-s-fold" style="margin-right: 5px" />用户概况</div>
      <div class="center_content">
        <div class="content">
        <div class="content" :style="{height: isIpad?'300px':'400px'}">
          <div class="content_title">活跃时段</div>
          <div>
            <div style="width: 100%;height: 300px;margin: 20px 0 0 10px">
              <div id="line01" style="width: 100%;height:100%" />
            </div>
            <div
              id="line01"
              style="width: 100%;"
              :style="{height:isIpad?'200px':'300px'}"
            />
          </div>
        </div>
        <div class="content">
        <div class="content" :style="{height: isIpad?'300px':'400px'}">
          <div class="content_title">Top用户</div>
          <div style="width: 100%;height: 300px;margin: 20px 0 0 10px">
            <div id="bar01" style="width: 100%;height:100%" />
          </div>
          <div
            id="bar01"
            style="width: 100%;"
            :style="{height:isIpad?'200px':'300px'}"
          />
        </div>
      </div>
    </div>
@@ -108,28 +112,35 @@
  name: 'Index',
  data() {
    return {
      isIpad: false,
      mainHeight: 0,
      tableHeight: 0,
      barTopColor01: ['42,197,137', '187,236,218'],
      barTopColor02: ['248,216,76', '255,250,238'],
      barTopColor03: ['42,197,137', '187,236,218'],
      barTopColor04: ['232,103,103', '253,240,240']
    }
  },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.handleEcharts()
    setTimeout(() => {
      this.handleEcharts()
    }, 10)
  },
  methods: {
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 200
        this.tableHeight = this.mainHeight - 100
        this.mainHeight = window.innerHeight - 120
        // this.mainHeight = window.innerHeight - 200
        // this.tableHeight = this.mainHeight - 100
        // this.isIpad = this.mainHeight <= 768
        this.isIpad = window.innerHeight < 769
      })
    },
    handleEcharts() {
@@ -165,6 +176,12 @@
      loadEcharts('bar01', bar01(data))
    },
    async getLine01() {
      // if (this.isIpad) {
      //   document.getElementById('line01').style.height = '200px'
      // } else {
      //   document.getElementById('line01').style.height = '300px'
      // }
      // console.log(document.getElementById('line01'))
      const data2 = [
        { key: '2', value: 0 },
        { key: '4', value: 0.2 },
@@ -255,7 +272,8 @@
    .content {
      width: 49%;
      height: 400px;
      //height: 400px;
      background-color: #fff;
      border-radius: 5px;