准确率表格滚动，组件销毁监听销毁

cpp-ui/src/views/largeScreen/components/center-bottom.vue

@@ -78,9 +78,7 @@ export default {
       this.lineChart.dispose();
       this.lineChart = null
       const _this = this
-      window.removeEventListener("resize", function () {
-        _this.lineChart.resize();
-      });
+      window.removeEventListener("resize", this.chartsResize);
     }
     if (this.fullChart !== null) {
       this.fullChart.dispose();
@@ -122,9 +120,7 @@ export default {
       option.series[3].data = dqList
       option.series[4].data = cdqList
       this.lineChart.setOption(option, true)
-      window.addEventListener("resize", function () {
-        _this.lineChart.resize();
-      });
+      window.addEventListener("resize", this.chartsResize);
     },
     setFullOptions({realList, ableList,theoryList,dqList,cdqList} = {}) {
       this.fullChart = this.$echarts.init(document.getElementById('main'));
@@ -157,7 +153,11 @@ export default {
       clickItem.classList.remove('btu-no-checked')
       clickItem.classList.add('btu-checked')
     },
-
+    chartsResize(){
+      if(this.lineChart !== null && this.lineChart !== undefined){
+        this.lineChart.resize();
+      }
+    },
   }
 }
 </script>

cpp-ui/src/views/largeScreen/components/left-bottom.vue

@@ -78,6 +78,7 @@ export default {
     if (this.tickChart) {
       this.tickChart.dispose();
       this.tickChart = null
+      window.removeEventListener("resize", this.chartsResize);
     }
     if (this.fullChart) {
       this.fullChart.dispose();
@@ -107,9 +108,12 @@ export default {
       option.series[0].data = boxplotData
       option.series[1].data = scatterData
       this.tickChart.setOption(option, true)
-      window.addEventListener("resize", function () {
-        _this.tickChart.resize();
-      });
+      window.addEventListener("resize", this.chartsResize);
+    },
+    chartsResize(){
+      if(this.tickChart !== null && this.tickChart !== undefined){
+        this.tickChart.resize();
+      }
     },
     setFullOptions({xData, boxplotData,scatterData} = {}) {
       this.fullChart = this.$echarts.init(document.getElementById('main'));

cpp-ui/src/views/largeScreen/components/right-bottom.vue

@@ -62,6 +62,7 @@ export default {
     if (this.chart) {
       this.chart.dispose();
       this.chart = null
+      window.removeEventListener('resize',this.chartsResize)
     }
     if (this.fullChart) {
       this.fullChart.dispose();
@@ -96,9 +97,7 @@ export default {
       // 柱状图宽度
       option.series[0].barWidth= '40%'
       this.chart.setOption(option, true)
-      window.addEventListener("resize", function () {
-        _this.chart.resize();
-      });
+      window.addEventListener("resize", this.chartsResize);
     },
     setFullOptions({xData, pData} = {}) {
       this.fullChart = this.$echarts.init(document.getElementById('main'));
@@ -108,7 +107,12 @@ export default {
       // 柱状图宽度
       option.series[0].barWidth= '40%'
       this.fullChart.setOption(option, true)
-    }
+    },
+    chartsResize(){
+      if(this.chart !== null && this.chart !== undefined){
+        this.chart.resize();
+      }
+    },
   }
 }
 </script>

cpp-ui/src/views/largeScreen/components/right-middle.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import {weatherLineOption} from '../echarts-data'
+import {chartsResize, weatherLineOption} from '../echarts-data'
 export default {
   data() {
     return {
@@ -65,20 +65,17 @@ export default {
       })()
     }
   },
-  beforeDestroy() {
+  destroyed() {
+    const _this =this
     if (this.weatherChart) {
+      window.removeEventListener("resize", this.chartsResize);
       this.weatherChart.dispose();
       this.weatherChart = null
-      const _this =this
-      window.removeEventListener("resize", function () {
-        _this.weatherChart.resize();
-      });
     }
     if (this.fullChart) {
       this.fullChart.dispose();
       this.fullChart = null
     }
-
   },
   methods: {
     initChart() {
@@ -108,9 +105,12 @@ export default {
       option.series[2].data = cdqList
       option.series[3].data = cdqList
       this.weatherChart.setOption(option, true)
-      window.addEventListener("resize", function () {
-        _this.weatherChart.resize();
-      });
+      window.addEventListener("resize", this.chartsResize);
+    },
+    chartsResize(){
+      if(this.weatherChart !== null && this.weatherChart !== undefined){
+        this.weatherChart.resize();
+      }
     },
     setFullOptions({realList,dqList,cdqList} = {}) {
       this.fullChart = this.$echarts.init(document.getElementById('main'));

cpp-ui/src/views/largeScreen/components/right-top.vue

@@ -1,34 +1,61 @@
 <template>
   <div class="son_container">
     <div class="flex position-a" style="right: .3vw;top: .5vh">
-      <div :class="type === 'day'?'btu-checked':'btu-no-checked'"  class="accuracy btu-checked-style flex items-center justify-center" id="accuracy-day"
+      <div :class="type === 'day'?'btu-checked':'btu-no-checked'"
+           class="accuracy btu-checked-style flex items-center justify-center" id="accuracy-day"
            @click="changeAccuracy('accuracy-day')">日
       </div>
-      <div :class="type === 'month'?'btu-checked':'btu-no-checked'" class="accuracy btu-checked-style flex items-center justify-center" id="accuracy-month"
+      <div :class="type === 'month'?'btu-checked':'btu-no-checked'"
+           class="accuracy btu-checked-style flex items-center justify-center" id="accuracy-month"
            @click="changeAccuracy('accuracy-month')">月
       </div>
     </div>
-    <el-table
-      :data="tableData"
-      size="mini" max-height="22vh" :show-header="false"
-      style="width: 100%;"
-      @scroll="autoScroll(false)"
-      @mouseenter.native="autoScroll(true)"
-      @mouseleave.native="autoScroll(false)"
-      ref="scroll_table"
-      highlight-current-row
-    >
-      <el-table-column prop="sort" align="center" label="" fixed width="50px">
-        <template slot-scope="scope">
-          <div class="sortStyle flex justify-center sort1" v-if="Number(scope.row.sort) === 1">     <span class="sort-num-style">{{scope.row.sort}}</span></div>
-          <div class="sortStyle flex justify-center sort2" v-else-if="Number(scope.row.sort) === 2"><span class="sort-num-style">{{scope.row.sort}}</span></div>
-          <div class="sortStyle flex justify-center sort3" v-else-if="Number(scope.row.sort) === 3"><span class="sort-num-style">{{scope.row.sort}}</span></div>
-          <span v-else>{{scope.row.sort}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="name" align="center" label="" fixed min-width="50px"></el-table-column>
-      <el-table-column prop="accuracy" align="center" label="" fixed min-width="50px"></el-table-column>
-    </el-table>
+    <!--    <el-table-->
+    <!--      :data="tableData"-->
+    <!--      size="mini" height="24vh" :show-header="false"-->
+    <!--      style="width: 100%;"-->
+    <!--      ref="accuracyTable"-->
+    <!--      @cell-mouse-enter="tableScroll(true)"-->
+    <!--      @cell-mouse-leave="tableScroll(false)"-->
+    <!--    >-->
+    <!--      <el-table-column prop="sort" align="center" label="" fixed width="50px">-->
+    <!--        <template slot-scope="scope">-->
+    <!--          <div class="sortStyle flex justify-center sort1" v-if="Number(scope.row.sort) === 1"><span-->
+    <!--            class="sort-num-style">{{ scope.row.sort }}</span></div>-->
+    <!--          <div class="sortStyle flex justify-center sort2" v-else-if="Number(scope.row.sort) === 2"><span-->
+    <!--            class="sort-num-style">{{ scope.row.sort }}</span></div>-->
+    <!--          <div class="sortStyle flex justify-center sort3" v-else-if="Number(scope.row.sort) === 3"><span-->
+    <!--            class="sort-num-style">{{ scope.row.sort }}</span></div>-->
+    <!--          <span v-else>{{ scope.row.sort }}</span>-->
+    <!--        </template>-->
+    <!--      </el-table-column>-->
+    <!--      <el-table-column prop="name" align="center" label="" fixed min-width="50px"></el-table-column>-->
+    <!--      <el-table-column prop="accuracy" align="center" label="" fixed min-width="50px"></el-table-column>-->
+    <!--    </el-table>-->
+
+    <div class="TItemUl" :class="{'animate-up': animateUp}" @mouseenter="scrollAnimate(true)" @mouseleave="scrollAnimate(false)">
+      <div v-for="(item,index) in tableData" :key="index">
+        <div class="TItemRow flex items-center justify-between" :class="index === 0?'highlight':''">
+          <div class="TItemCell flex justify-center" style="width: 50px">
+            <div class="sortStyle flex justify-center sort1" v-if="Number(item.sort) === 1"><span
+              class="sort-num-style">{{ item.sort }}</span></div>
+            <div class="sortStyle flex justify-center sort2" v-else-if="Number(item.sort) === 2"><span
+              class="sort-num-style">{{ item.sort }}</span></div>
+            <div class="sortStyle flex justify-center sort3" v-else-if="Number(item.sort) === 3"><span
+              class="sort-num-style">{{ item.sort }}</span></div>
+            <span v-else>{{ item.sort }}</span>
+          </div>
+          <div class="TItemCell">{{ item.name }}</div>
+          <div class="TItemCell">{{ item.accuracy }}</div>
+        </div>
+        <div class="divider"/>
+      </div>
+      <div class="TItemRow" v-if="tableData.length==0">
+        <div class="TI_default" style="width:100%">暂无数据</div>
+      </div>
+
+    </div>
+
   </div>
 </template>
 
@@ -38,15 +65,16 @@ export default {
 
   data() {
     return {
-      tableData:[
-        {sort:1,name:'新疆光伏电站',accuracy:'99.8%'},
-        {sort:2,name:'新疆光伏电站',accuracy:'97.8%'},
-        {sort:3,name:'新疆光伏电站',accuracy:'96.8%'},
-        {sort:3,name:'新疆光伏电站',accuracy:'96.8%'},
-        {sort:4,name:'新疆光伏电站',accuracy:'95.8%'},
-        {sort:4,name:'新疆光伏电站',accuracy:'95.8%'}
+      tableData: [
+        {sort: 1, name: '新疆光伏电站', accuracy: '99.8%'},
+        {sort: 2, name: '新疆光伏电站', accuracy: '97.8%'},
+        {sort: 3, name: '新疆光伏电站', accuracy: '96.8%'},
+        {sort: 3, name: '新疆光伏电站', accuracy: '96.8%'},
+        {sort: 4, name: '新疆光伏电站', accuracy: '95.8%'},
+        {sort: 4, name: '新疆光伏电站', accuracy: '95.8%'}
       ],
-      type:'day',
+      type: 'day',
+      animateUp: false,
       scrolltimer: null, // 循环滚动的定时器ID
     }
   },
@@ -61,23 +89,25 @@ export default {
       }
     }
   },
+  destroyed() {
+    clearInterval(this.scrolltimer)
+    this.scrolltimer = null
+  },
   mounted() {
-    if(localStorage.getItem('screen-accuracy-type')){
+    if (localStorage.getItem('screen-accuracy-type')) {
       this.type = localStorage.getItem('screen-accuracy-type')
-    }else{
+    } else {
       this.type = 'day'
     }
-    this.autoScroll(false)
-  },
-  beforeDestroy() {
-    this.autoScroll(true)
+    // this.tableScroll(false)
+    this.scrollAnimate(false)
   },
   methods: {
     /**
      * 切换准确率排行按钮
      * */
     changeAccuracy(id) {
-      localStorage.setItem('screen-accuracy-type',id.includes('day')?'day':'month')
+      localStorage.setItem('screen-accuracy-type', id.includes('day') ? 'day' : 'month')
       const activeItem = document.querySelector('.btu-checked.accuracy')
       let clickItem = document.getElementById(id)
       // let activeItem = document.querySelector('.btu-checked')
@@ -86,28 +116,43 @@ export default {
       clickItem.classList.remove('btu-no-checked')
       clickItem.classList.add('btu-checked')
     },
-    // 设置自动滚动
-    autoScroll(stop) {
-      const table = this.$refs.scroll_table
-      // 拿到表格中承载数据的div元素
-      const divData = table.$refs.bodyWrapper
-      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
+    scrollAnimate (stop) {
       if (stop) {
-        //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
-        window.clearInterval(this.scrolltimer)
+        clearInterval(this.scrolltimer)
+        this.scrolltimer = null
       } else {
-        this.scrolltimer = window.setInterval(() => {
-          // 元素自增距离顶部1像素
-          divData.scrollTop += 50
-          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
-          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
-            // 重置table距离顶部距离
-            divData.scrollTop = 0
-            // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
-            // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
+        // 超出范围在后再进行滚动
+        if (this.tableData.length >= 6) {
+          this.scrolltimer = setInterval(() => {
+            this.animateUp = true
+            setTimeout(() => {
+              this.tableData.push(this.tableData[0])
+              this.tableData.shift()
+              this.animateUp = false
+            }, 500)
+          }, 1500)
+        }
+      }
+    },
+
+    //滚动方法 (主要代码)
+    tableScroll(stop) {
+      const table = this.$refs.accuracyTable
+      const divData = table.bodyWrapper
+      if (stop) {
+        clearInterval(this.scrolltimer)
+        this.scrolltimer = null
+      } else {
+        this.scrolltimer = setInterval(() => {
+          divData.scrollTop += 1
+          if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
+            if (table.tableData.length > 5) {
+              divData.scrollTop = 0
+            }
           }
-        }, 150) // 滚动速度
+        }, 100)
       }
+
     },
   },
 }
@@ -115,33 +160,69 @@ export default {
 
 <style lang='scss' scoped>
 .son_container {
-  margin: 0 .1vw 0 1vw;
+  margin: .1vw ;
 }
-.sortStyle{
+
+::v-deep.son_container .el-table--scrollable-y .el-table__body-wrapper {
+  overflow-y: clip;
+}
+
+.sortStyle {
   width: 2vw;
   height: 3.5vh;
-  .sort-num-style{
+
+  .sort-num-style {
     color: #1e1e1e;
     font-weight: bold;
     font-size: 16px;
   }
 }
-.sort1{
+
+.sort1 {
   background-image: url('../../../assets/images/dashboard/sort1.png');
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
-.sort2{
+
+.sort2 {
   background-image: url('../../../assets/images/dashboard/sort2.png');
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
-.sort3{
+
+.sort3 {
   background-image: url('../../../assets/images/dashboard/sort3.png');
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
+
+.TItemUl {
+  width: 100%;
+  height: 24vh;
+  overflow: hidden;
+  .TItemRow {
+    width: 100%;
+    padding: 0.15vw .3vw;
+  }
+  .TItemCell{
+    width: 33%;
+    text-align: center;
+    padding: .1vw;
+  }
+  .divider{
+    width: 100%;
+    height: 1px;
+    background: #1c84c6;
+  }
+  .animate-up {
+    transition: all 0.5s ease-in-out;
+    transform: translateY(-30px);
+  }
+}
+.highlight{
+  background: rgba(28, 132, 198, 0.4);
+}
 </style>