将选择框移动到子页面

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

@@ -1,5 +1,20 @@
 <template>
   <div>
+    <div class="flex position-a forecast-line-btu">
+      <div :class="day === 'day'?'btu-checked':'btu-no-checked'"  class="forecastLine btu-checked-style flex items-center justify-center" id="day"
+           @click="changeForecastLine('day')">当日
+      </div>
+      <div :class="day === 'tenDay'?'btu-checked':'btu-no-checked'" class="forecastLine btu-checked-style flex items-center justify-center" id="tenDay"
+           @click="changeForecastLine('tenDay')">十日
+      </div>
+      <div :class="type === 'wind'?'btu-checked':'btu-no-checked'"  class="forecastLineType btu-checked-style flex items-center justify-center" id="wind"
+           @click="changeForecastLineType('wind')">风电
+      </div>
+      <div :class="type === 'photovoltaic'?'btu-checked':'btu-no-checked'"  class="forecastLineType btu-checked-style flex items-center justify-center"
+           id="photovoltaic" @click="changeForecastLineType('photovoltaic')">光伏
+      </div>
+    </div>
+
     <div class="position-a echartsFullIcon" @click="openFull">
       <img src="../../../assets/images/dashboard/full.png" style="width: 1.5vw" />
     </div>
@@ -29,7 +44,9 @@ export default {
       screenHeight: window.innerHeight,
       lineChart: null,
       fullChart: null,
-      chartData: {}
+      chartData: {},
+      day:'day',
+      type:'wind'
     }
   },
   props: {
@@ -60,6 +77,10 @@ export default {
     if (this.lineChart !==null) {
       this.lineChart.dispose();
       this.lineChart = null
+      const _this = this
+      window.removeEventListener("resize", function () {
+        _this.lineChart.resize();
+      });
     }
     if (this.fullChart !== null) {
       this.fullChart.dispose();
@@ -69,6 +90,16 @@ export default {
   },
   methods: {
     initChart() {
+      if(localStorage.getItem('screen-forecast-day')){
+        this.day = localStorage.getItem('screen-forecast-day')
+      }else{
+        this.day = 'day'
+      }
+      if(localStorage.getItem('screen-forecast-type')){
+        this.type = localStorage.getItem('screen-forecast-type')
+      }else{
+        this.type = 'wind'
+      }
       this.lineChart = this.$echarts.init(document.getElementById('lineChart'));
       this.setOptions(this.chartData)
     },
@@ -104,7 +135,29 @@ export default {
       option.series[3].data = dqList
       option.series[4].data = cdqList
       this.fullChart.setOption(option, true)
-    }
+    },
+    /**
+     * 切换功率曲线按钮
+     * */
+    changeForecastLine(id) {
+      const activeItem = document.querySelector('.btu-checked.forecastLine')
+      localStorage.setItem('screen-forecast-day',id)
+      this.checkedClass(id, activeItem)
+    },
+    changeForecastLineType(id) {
+      const activeItem = document.querySelector('.btu-checked.forecastLineType')
+      localStorage.setItem('screen-forecast-type',id)
+      this.checkedClass(id, activeItem)
+    },
+    checkedClass(id, activeItem) {
+      let clickItem = document.getElementById(id)
+      // let activeItem = document.querySelector('.btu-checked')
+      activeItem.classList.remove('btu-checked')
+      activeItem.classList.add('btu-no-checked')
+      clickItem.classList.remove('btu-no-checked')
+      clickItem.classList.add('btu-checked')
+    },
+
   }
 }
 </script>
@@ -113,4 +166,8 @@ export default {
   width: 100%;
   height: 30vh;
 }
+.forecast-line-btu{
+  top: .5vh;
+  right: 2.2vw;
+}
 </style>

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

@@ -1,5 +1,13 @@
 <template>
   <div>
+    <div class="flex position-a weatherStyle">
+      <div :class="type === 'wind'?'btu-checked':'btu-no-checked'" class="weather btu-checked-style flex items-center justify-center" id="weather-wind"
+           @click="changeWeather('weather-wind')">风电
+      </div>
+      <div :class="type === 'photovoltaic'?'btu-checked':'btu-no-checked'" class="weather btu-checked-style flex items-center justify-center"
+           id="weather-photovoltaic" @click="changeWeather('weather-photovoltaic')">光伏
+      </div>
+    </div>
     <div class="position-a echartsFullIcon" @click="openFull">
       <img src="../../../assets/images/dashboard/full.png" style="width: 1.5vw" />
     </div>
@@ -29,9 +37,8 @@ export default {
       screenHeight: window.innerHeight,
       weatherChart: null,
       fullChart: null,
-      chartData: {
-
-      }
+      chartData: {},
+      type:'wind'
     }
   },
   props: {
@@ -62,6 +69,10 @@ export default {
     if (this.weatherChart) {
       this.weatherChart.dispose();
       this.weatherChart = null
+      const _this =this
+      window.removeEventListener("resize", function () {
+        _this.weatherChart.resize();
+      });
     }
     if (this.fullChart) {
       this.fullChart.dispose();
@@ -71,6 +82,11 @@ export default {
   },
   methods: {
     initChart() {
+      if(localStorage.getItem('screen-weather-type')){
+        this.type = localStorage.getItem('screen-weather-type')
+      }else{
+        this.type = 'wind'
+      }
       this.weatherChart = this.$echarts.init(document.getElementById('weatherChart'));
       this.setOptions(this.chartData)
     },
@@ -104,7 +120,19 @@ export default {
       option.series[2].data = cdqList
       option.series[3].data = cdqList
       this.fullChart.setOption(option, true)
-    }
+    },
+    /**
+     * 切换气象预测按钮
+     * */
+    changeWeather(id) {
+      localStorage.setItem('screen-weather-type',id.includes('wind')?'wind':'photovoltaic')
+      const activeItem = document.querySelector('.btu-checked.weather')
+      let clickItem = document.getElementById(id)
+      activeItem.classList.remove('btu-checked')
+      activeItem.classList.add('btu-no-checked')
+      clickItem.classList.remove('btu-no-checked')
+      clickItem.classList.add('btu-checked')
+    },
   }
 }
 </script>
@@ -113,4 +141,8 @@ export default {
   width: 100%;
   height: 25vh;
 }
+.weatherStyle{
+  top: .5vh;
+  right: 2.2vw;
+}
 </style>

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

@@ -1,9 +1,23 @@
 <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"
+           @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"
+           @click="changeAccuracy('accuracy-month')">月
+      </div>
+    </div>
     <el-table
       :data="tableData"
-      size="mini" height="24vh" :show-header="false"
-      style="width: 100%;">
+      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>
@@ -31,7 +45,9 @@ export default {
         {sort:3,name:'新疆光伏电站',accuracy:'96.8%'},
         {sort:4,name:'新疆光伏电站',accuracy:'95.8%'},
         {sort:4,name:'新疆光伏电站',accuracy:'95.8%'}
-      ]
+      ],
+      type:'day',
+      scrolltimer: null, // 循环滚动的定时器ID
     }
   },
   props: {
@@ -45,7 +61,55 @@ export default {
       }
     }
   },
-  methods: {},
+  mounted() {
+    if(localStorage.getItem('screen-accuracy-type')){
+      this.type = localStorage.getItem('screen-accuracy-type')
+    }else{
+      this.type = 'day'
+    }
+    this.autoScroll(false)
+  },
+  beforeDestroy() {
+    this.autoScroll(true)
+  },
+  methods: {
+    /**
+     * 切换准确率排行按钮
+     * */
+    changeAccuracy(id) {
+      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')
+      activeItem.classList.remove('btu-checked')
+      activeItem.classList.add('btu-no-checked')
+      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像素)
+      if (stop) {
+        //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
+        window.clearInterval(this.scrolltimer)
+      } 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
+          }
+        }, 150) // 滚动速度
+      }
+    },
+  },
 }
 </script>