feature/险峰大屏bug修复

src/views/report/statistics/screens/capacity/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="screen-container">
+  <div :key="viewKey" class="screen-container">
     <common-header title="产品下线情况" />
     <div class="screen-content">
       <div class="chartsCarouselBox itemBackgroud">
@@ -74,6 +74,10 @@
 <script setup>
 import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
 import { getOffLineInfo } from "@/api/bigScreen";
+const viewKey = ref(false);
+const checkFullscreen = () => {
+  viewKey.value = !viewKey.value;
+};
 const datas = ref([]);
 const borderRef = ref(null);
 const showDatas = ref([]);
@@ -98,6 +102,7 @@ const getListData = async () => {
   datas.value = [...data, ...data, ...data];
 };
 onMounted(async () => {
+  window.addEventListener("resize", checkFullscreen);
   borderRef.value?.initWH();
   await getListData();
   setShowData1(8, 3000);
@@ -106,6 +111,7 @@ onUnmounted(() => {
   if (interval1.value) {
     clearInterval(interval1.value);
   }
+  document.removeEventListener("resize", checkFullscreen);
 });
 </script>
 

src/views/report/statistics/screens/quality/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="screen-container">
+  <div :key="viewKey" class="screen-container">
     <common-header title="质量统计" />
     <div class="screen-content">
       <div class="infoItem">
@@ -109,6 +109,12 @@ import {
   getQualifiedRate,
 } from "@/api/bigScreen";
 import * as echarts from "echarts";
+const viewKey = ref(false);
+const checkFullscreen = async () => {
+  charts1.value.resize();
+  charts2.value.resize();
+  charts3.value.resize();
+};
 const charts1 = shallowRef(null);
 const charts2 = shallowRef(null);
 const charts3 = shallowRef(null);
@@ -221,17 +227,17 @@ const option1 = {
       type: "line",
       symbol: "none",
       itemStyle: {
-        color: "#BCB62E80",
+        color: "#D7565680",
       },
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: "#BCB62E80",
+            color: "#D7565680",
           },
           {
             offset: 1,
-            color: "#BCB62E20",
+            color: "#D7565680",
           },
         ]),
       },
@@ -271,18 +277,18 @@ const option2 = {
       type: "line",
       symbol: "none",
       itemStyle: {
-        color: "#D7565680",
+        color: "#BCB62E80",
       },
 
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: "#D7565680",
+            color: "#BCB62E80",
           },
           {
             offset: 1,
-            color: "#D7565620",
+            color: "#BCB62E80",
           },
         ]),
       },
@@ -355,6 +361,7 @@ const setChart1Option = () => {
 };
 onMounted(async () => {
   setFontSize();
+  window.addEventListener("resize", checkFullscreen);
   charts1.value = echarts.init(document.getElementById("charts1"));
   charts2.value = echarts.init(document.getElementById("charts2"));
   charts3.value = echarts.init(document.getElementById("charts3"));
@@ -367,6 +374,7 @@ onUnmounted(() => {
   if (interval2.value) {
     clearInterval(interval2.value);
   }
+  document.removeEventListener("resize", checkFullscreen);
 });
 watch(
   [() => chartsData3.value, () => chartsData1.value, () => chartsData2.value],

src/views/report/statistics/screens/tasks/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="screen-container">
+  <div :key="viewKey" class="screen-container">
     <common-header title="工位任务分布" />
     <!-- <div
       style="
@@ -171,7 +171,7 @@ const setPondNumber = (str) => {
     return truncated;
   }
 };
-
+const viewKey = ref(false);
 const setFontSize = () => {
   fontSize.value = (window.innerHeight / 100) * 4;
 };
@@ -356,11 +356,18 @@ onUnmounted(() => {
     clearInterval(interval1.value);
   }
 });
+const checkFullscreen = () => {
+  viewKey.value = !viewKey.value;
+};
 onMounted(async () => {
+  window.addEventListener("resize", checkFullscreen);
   setFontSize();
   await getData();
   setShowDatas(15000);
 });
+onUnmounted(() => {
+  document.removeEventListener("resize", checkFullscreen);
+});
 </script>
 
 <style lang="scss" scoped>