1.提交

loulijun2021

2023-02-12 adb74c51618faf025fe1d46bf6b22db895c2608f

 src/views/xtsy/index.vue

@@ -1,6 +1,6 @@
<template>
  <!--  <div>-->
  <div class="body" style="  padding: 30px 10px 0 20px;background-color: #eee;" :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">
@@ -11,12 +11,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日登录</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop01" class="barTop" style="width: 100%;" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日登录</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop02" class="barTop" />
            </div>
@@ -29,12 +33,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop03" class="barTop" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop04" class="barTop" />
            </div>
@@ -47,12 +55,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop05" class="barTop" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop06" class="barTop" />
            </div>
@@ -65,12 +77,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop07" class="barTop" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop08" class="barTop" />
            </div>
@@ -81,19 +97,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>
@@ -103,28 +123,31 @@

<script>
import { bar01, barTop, line01, loadEcharts } from '@/utils/myEcharts'
import countTo from 'vue-count-to'

export default {
  name: 'Index',
  components: { countTo },
  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() {
    console.log(document.documentElement.clientHeight, 1)
    console.log(document.documentElement.clientWidth, 2)

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.handleEcharts()
    setTimeout(() => {
      this.handleEcharts()
    }, 10)
  },
  methods: {
    // 获取页面高度
@@ -133,6 +156,9 @@
        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() {
@@ -168,6 +194,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 },
@@ -245,6 +277,10 @@
      }
    }
  }

  .top_card:hover{
    transform: scale(1.02);
  }
}

.center {
@@ -258,7 +294,8 @@

    .content {
      width: 49%;
      height: 400px;
      //height: 400px;

      background-color: #fff;
      border-radius: 5px;

@@ -266,6 +303,10 @@
        margin: 20px;
      }
    }

    .content:hover{
      transform: scale(1.01);
    }
  }
}