1.处理页面表格错位问题 引入activated() 事件

小小儁爺

2024-09-05 86e5ff7028168bf18b5d3846022ebeac09aa4d4f

 src/views/systemHome/index.vue

@@ -1,324 +1,324 @@
<template>
  <!--  <div>-->
  <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">
        <div class="top_card">
          <div class="top_card_title">登录用户</div>
          <div class="top_card_content">
            <div class="images1 images" />
            <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]})`}">15/
                  <countTo :start-val="0" :end-val="40" :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">18/
                  <countTo :start-val="0" :end-val="40" :duration="3000" />
                </div>
              </div>
              <div id="barTop02" class="barTop" style="width: 92%;" />
            </div>
          </div>
        </div>
        <div class="top_card">
          <div class="top_card_title">活跃用户</div>
          <div class="top_card_content">
            <div class="images2 images" />
            <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]})`}">15/
                  <countTo :start-val="0" :end-val="40" :duration="3000" />
                </div>
              </div>
              <div id="barTop03" class="barTop" style="width: 100%;" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">18/
                  <countTo :start-val="0" :end-val="40" :duration="3000" />
                </div>
              </div>
              <div id="barTop04" class="barTop" style="width: 92%;" />
            </div>
          </div>
        </div>
        <div class="top_card">
          <div class="top_card_title">Web活跃</div>
          <div class="top_card_content">
            <div class="images3 images" />
            <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]})`}">15/
                  <countTo :start-val="0" :end-val="40" :duration="3000" />
                </div>
              </div>
              <div id="barTop05" class="barTop" style="width:100%;" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">18/
                  <countTo :start-val="0" :end-val="40" :duration="3000" />
                </div>
              </div>
              <div id="barTop06" class="barTop" style="width: 92%;" />
            </div>
          </div>
        </div>
        <div class="top_card">
          <div class="top_card_title">APP活跃</div>
          <div class="top_card_content">
            <div class="images4 images" />
            <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/
                  <countTo :start-val="0" :end-val="40" :duration="3000" />
                </div>
              </div>
              <div id="barTop07" class="barTop" style="width: 92%;" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="40" :duration="3000" />
                </div>
              </div>
              <div id="barTop08" class="barTop" style="width: 92%;" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <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" :style="{height: isIpad?'300px':'400px'}">
          <div class="content_title">活跃时段</div>
          <div>
            <div
              id="line01"
              style="width: 100%;"
              :style="{height:isIpad?'200px':'300px'}"
            />
          </div>
        </div>
        <div class="content" :style="{height: isIpad?'300px':'400px'}">
          <div class="content_title">Top用户</div>
          <div
            id="bar01"
            style="width: 100%;"
            :style="{height:isIpad?'200px':'300px'}"
          />
        </div>
      </div>
    </div>
  </div>
  <!--  </div>-->
</template>

<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,188'],
      barTopColor03: ['42,197,137', '187,236,218'],
      barTopColor04: ['232,103,103', '253,240,240']
    }
  },
  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    setTimeout(() => {
      this.handleEcharts()
    }, 10)
  },
  methods: {
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        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() {
      this.getTopData()
      this.getBar01()
      this.getLine01()
    },
    getTopData() {
      loadEcharts('barTop01', barTop(15, this.barTopColor01))
      loadEcharts('barTop02', barTop(18, this.barTopColor01))
      loadEcharts('barTop03', barTop(15, this.barTopColor02))
      loadEcharts('barTop04', barTop(18, this.barTopColor02))
      loadEcharts('barTop05', barTop(15, this.barTopColor03))
      loadEcharts('barTop06', barTop(18, this.barTopColor03))
      loadEcharts('barTop07', barTop(0, this.barTopColor04))
      loadEcharts('barTop08', barTop(0, this.barTopColor04))
    },
    async getBar01() {
      // const res=await  xxx()
      let data = [
        { key: '杨发法', value: 494 },
        { key: '楼先生', value: 566 },
        { key: '徐天然', value: 481 },
        { key: '蓝光秀', value: 462 },
        { key: '张旭', value: 333 },
        { key: '小宋', value: 354 },
        { key: '侯先友', value: 275 },
        { key: '刘金贵', value: 259 },
        { key: '刘水娇', value: 267 },
        { key: '刘凤妹', value: 288 }
      ]
      data = data.sort((a, b) => b.value - a.value)
      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 },
        { key: '6', value: 0 },
        { key: '8', value: 8 },
        { key: '10', value: 10 },
        { key: '12', value: 10 },
        { key: '14', value: 6 },
        { key: '16', value: 8 },
        { key: '18', value: 3 },
        { key: '20', value: 2 },
        { key: '22', value: 1 },
        { key: '24', value: 0 }
      ]
      loadEcharts('line01', line01(data2))
    }
  }
}
</script>

<style lang="scss" scoped>

.title {
  margin-left: 1%;
  font-size: 18px;
  font-weight: 400;
}

.top {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;

  .top_card {
    background-color: #fff;
    width: 24%;
    height: 200px;
    border-radius: 5px;

    .top_card_title {
      margin: 20px 0 0 20px;
    }

    .top_card_content {
      display: flex;

      .images {
        width: 69px;
        height: 69px;
        margin: 30px calc((10% - 20px));
      }

      .images1 {
        background: url("../../assets/images/msg_app.png") no-repeat;
      }

      .images2 {
        background: url("../../assets/images/msg_huoyue.png") no-repeat;
      }

      .images3 {
        background: url("../../assets/images/msg_web.png") no-repeat;
      }

      .images4 {
        background: url("../../assets/images/msg_zhuceyonghu.png") no-repeat;
      }

      .content {
        display: flex;
        justify-content: space-between;
        width: 65%;
        height: 18px

      }
    }
  }

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

.center {
  //margin-top: 10px;
  //display: flex;
  //justify-content: space-around;
  .center_content {
    margin-top: 10px;
    display: flex;
    justify-content: space-around;

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

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

      .content_title {
        margin: 20px;
      }
    }

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

.top_card_content_flex {
  display: flex;
  flex-direction: column;
  width: 70%;
}

.barTop {
  width: 85%;
  height: 40px;
  margin: 10px 0 0 0;
}
</style>
<template>

  <!--  <div>-->

  <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">

        <div class="top_card">

          <div class="top_card_title">登录用户</div>

          <div class="top_card_content">

            <div class="images1 images" />

            <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]})`}">15/

                  <countTo :start-val="0" :end-val="40" :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">18/

                  <countTo :start-val="0" :end-val="40" :duration="3000" />

                </div>

              </div>

              <div id="barTop02" class="barTop" style="width: 92%;" />

            </div>

          </div>

        </div>

        <div class="top_card">

          <div class="top_card_title">活跃用户</div>

          <div class="top_card_content">

            <div class="images2 images" />

            <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]})`}">15/

                  <countTo :start-val="0" :end-val="40" :duration="3000" />

                </div>

              </div>

              <div id="barTop03" class="barTop" style="width: 100%;" />

              <div class="content" style="width: 84%">

                <div class="content_title1">昨日活跃</div>

                <div class="content_end1">18/

                  <countTo :start-val="0" :end-val="40" :duration="3000" />

                </div>

              </div>

              <div id="barTop04" class="barTop" style="width: 92%;" />

            </div>

          </div>

        </div>

        <div class="top_card">

          <div class="top_card_title">Web活跃</div>

          <div class="top_card_content">

            <div class="images3 images" />

            <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]})`}">15/

                  <countTo :start-val="0" :end-val="40" :duration="3000" />

                </div>

              </div>

              <div id="barTop05" class="barTop" style="width:100%;" />

              <div class="content" style="width: 84%">

                <div class="content_title1">昨日活跃</div>

                <div class="content_end1">18/

                  <countTo :start-val="0" :end-val="40" :duration="3000" />

                </div>

              </div>

              <div id="barTop06" class="barTop" style="width: 92%;" />

            </div>

          </div>

        </div>

        <div class="top_card">

          <div class="top_card_title">APP活跃</div>

          <div class="top_card_content">

            <div class="images4 images" />

            <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/

                  <countTo :start-val="0" :end-val="40" :duration="3000" />

                </div>

              </div>

              <div id="barTop07" class="barTop" style="width: 92%;" />

              <div class="content" style="width: 84%">

                <div class="content_title1">昨日活跃</div>

                <div class="content_end1">0/

                  <countTo :start-val="0" :end-val="40" :duration="3000" />

                </div>

              </div>

              <div id="barTop08" class="barTop" style="width: 92%;" />

            </div>

          </div>

        </div>

      </div>

    </div>

    <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" :style="{height: isIpad?'300px':'400px'}">

          <div class="content_title">活跃时段</div>

          <div>

            <div

              id="line01"

              style="width: 100%;"

              :style="{height:isIpad?'200px':'300px'}"

            />

          </div>

        </div>

        <div class="content" :style="{height: isIpad?'300px':'400px'}">

          <div class="content_title">Top用户</div>

          <div

            id="bar01"

            style="width: 100%;"

            :style="{height:isIpad?'200px':'300px'}"

          />

        </div>

      </div>

    </div>

  </div>

  <!--  </div>-->

</template>



<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,188'],

      barTopColor03: ['42,197,137', '187,236,218'],

      barTopColor04: ['232,103,103', '253,240,240']

    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {



  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

    setTimeout(() => {

      this.handleEcharts()

    }, 10)

  },

  methods: {

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        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() {

      this.getTopData()

      this.getBar01()

      this.getLine01()

    },

    getTopData() {

      loadEcharts('barTop01', barTop(15, this.barTopColor01))

      loadEcharts('barTop02', barTop(18, this.barTopColor01))

      loadEcharts('barTop03', barTop(15, this.barTopColor02))

      loadEcharts('barTop04', barTop(18, this.barTopColor02))

      loadEcharts('barTop05', barTop(15, this.barTopColor03))

      loadEcharts('barTop06', barTop(18, this.barTopColor03))

      loadEcharts('barTop07', barTop(0, this.barTopColor04))

      loadEcharts('barTop08', barTop(0, this.barTopColor04))

    },

    async getBar01() {

      // const res=await  xxx()

      let data = [

        { key: '杨发法', value: 494 },

        { key: '楼先生', value: 566 },

        { key: '徐天然', value: 481 },

        { key: '蓝光秀', value: 462 },

        { key: '张旭', value: 333 },

        { key: '小宋', value: 354 },

        { key: '侯先友', value: 275 },

        { key: '刘金贵', value: 259 },

        { key: '刘水娇', value: 267 },

        { key: '刘凤妹', value: 288 }

      ]

      data = data.sort((a, b) => b.value - a.value)

      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 },

        { key: '6', value: 0 },

        { key: '8', value: 8 },

        { key: '10', value: 10 },

        { key: '12', value: 10 },

        { key: '14', value: 6 },

        { key: '16', value: 8 },

        { key: '18', value: 3 },

        { key: '20', value: 2 },

        { key: '22', value: 1 },

        { key: '24', value: 0 }

      ]

      loadEcharts('line01', line01(data2))

    }

  }

}

</script>



<style lang="scss" scoped>



.title {

  margin-left: 1%;

  font-size: 18px;

  font-weight: 400;

}



.top {

  margin-top: 10px;

  display: flex;

  justify-content: space-around;



  .top_card {

    background-color: #fff;

    width: 24%;

    height: 200px;

    border-radius: 5px;



    .top_card_title {

      margin: 20px 0 0 20px;

    }



    .top_card_content {

      display: flex;



      .images {

        width: 69px;

        height: 69px;

        margin: 30px calc((10% - 20px));

      }



      .images1 {

        background: url("../../assets/images/msg_app.png") no-repeat;

      }



      .images2 {

        background: url("../../assets/images/msg_huoyue.png") no-repeat;

      }



      .images3 {

        background: url("../../assets/images/msg_web.png") no-repeat;

      }



      .images4 {

        background: url("../../assets/images/msg_zhuceyonghu.png") no-repeat;

      }



      .content {

        display: flex;

        justify-content: space-between;

        width: 65%;

        height: 18px



      }

    }

  }



  .top_card:hover{

    transform: scale(1.02);

  }

}



.center {

  //margin-top: 10px;

  //display: flex;

  //justify-content: space-around;

  .center_content {

    margin-top: 10px;

    display: flex;

    justify-content: space-around;



    .content {

      width: 49%;

      //height: 400px;



      background-color: #fff;

      border-radius: 5px;



      .content_title {

        margin: 20px;

      }

    }



    .content:hover{

      transform: scale(1.01);

    }

  }

}



.top_card_content_flex {

  display: flex;

  flex-direction: column;

  width: 70%;

}



.barTop {

  width: 85%;

  height: 40px;

  margin: 10px 0 0 0;

}

</style>