From 86e5ff7028168bf18b5d3846022ebeac09aa4d4f Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期四, 05 九月 2024 17:11:19 +0800
Subject: [PATCH] 1.处理页面表格错位问题 引入activated() 事件
---
src/views/systemHome/index.vue | 648 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 324 insertions(+), 324 deletions(-)
diff --git a/src/views/systemHome/index.vue b/src/views/systemHome/index.vue
index 5961ef7..b603c3d 100644
--- a/src/views/systemHome/index.vue
+++ b/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>
--
Gitblit v1.9.3