15天OQC良率显示问题处理

src/views/quality/bottom2.vue

@@ -5,8 +5,8 @@
         <span class="fs-xxl text mx-2 fw-b">近15天OQC良率</span>
       </div>
       <div class="body-box">
-        <div class="pt-2 " >
-          <Bottom2Chart :linedata="linedata" />
+        <div class="pt-2 chart-container" ref="chartContainer">
+          <Bottom2Chart :linedata="linedata" :key="chartKey" />
         </div>
       </div>
     </div>
@@ -16,115 +16,166 @@
 <script>
 import Bottom2Chart from "../../components/qualityechart/bottom2Chart";
 import {mapState} from "vuex";
+import { debounce } from 'lodash';
+
 export default {
   components: {
     Bottom2Chart
   },
   computed: {
-    //数组写法
     ...mapState(['user','factoryoptions','factory']),
   },
   data() {
     return {
-      linedata :{
-        series : null,
-        xAxiss  :null,
-        interval :15,
-        min:0
+      linedata: {
+        series: [],
+        xAxiss: [],
+        interval: 15,
+        min: 0
       },
-      timing:null,
+      timing: null,
+      chartKey: 0, // 用于强制重新渲染图表
+      resizeObserver: null
     }
   },
   mounted() {
-    this.refreshdata()
+    this.refreshdata();
+    this.initResizeObserver();
   },
-  beforeDestroy () {
-    clearInterval(this.timing)
+  beforeDestroy() {
+    this.cleanup();
   },
   methods: {
+    cleanup() {
+      clearInterval(this.timing);
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
+    },
+
+    initResizeObserver() {
+      // 使用防抖函数避免频繁触发
+      const resizeHandler = debounce(() => {
+        this.chartKey += 1; // 强制重新渲染图表
+      }, 300);
+
+      this.resizeObserver = new ResizeObserver(resizeHandler);
+      if (this.$refs.chartContainer) {
+        this.resizeObserver.observe(this.$refs.chartContainer);
+      }
+    },
+
     refreshdata() {
-      this.getdata(); //获取-数据
+      this.getdata();
       this.timing = setInterval(() => {
-        this.getdata(); //获取--数据
+        this.getdata();
       }, 10000);
     },
 
     async getdata() {
-      var caller = 'KB!QualityUpper30Days';
-      var cond = "1=1";
-      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
-        params: {
-          condition: cond
-        }
-      }).then((result)=>{
-            let dataList = JSON.parse(result.data.data);
-            let series = new Array();
-            let xAxis0 = new Array();
-            let mindata = 10;
-            let ndata = new Array();
-            for (let index = 0; index < dataList.length; index++) {
-              const element = dataList[index];
-              xAxis0.push(element.v_ymd);
-              ndata.push(element.v_ztrate);
-              if(mindata>element.v_ztrate){
-                mindata = 10;
-              }
-            }
-            series.push({
-              name: 'OQC',
-              type: 'line',
-              data: ndata,
-              symbolSize: 4,
-              lineStyle: {
-                width: 3
-              },
-              label: {
-                show: true,
-                position: 'top',
-                fontSize:15,
-                color:'inherit',
-                fontWeight: "bold"
-              },
-              emphasis: {
-                focus: 'series'
-              },
-            });
-
-            this.linedata.series = series;
-            this.linedata.xAxiss = xAxis0;
-            //最小值往下取整10的倍数，然后减20
-             mindata = Math.floor(mindata/10)*10 - 20;
-             mindata = 10;
-            this.linedata.min = mindata;
-            //分7个数据，6段
-            this.linedata.interval = Math.ceil((100-mindata)/7);
-          },(result)=>{
-            console.error(result)
+      try {
+        const caller = 'KB!QualityUpper30Days';
+        const cond = "1=1";
+        const response = await this.$http.get("kanban/datalist.action", {
+          params: {
+            caller: caller,
+            _noc: 1,
+            page: 1,
+            pageSize: 100,
+            condition: cond
           }
-      );
+        });
+
+        const dataList = JSON.parse(response.data.data);
+        this.processChartData(dataList);
+      } catch (error) {
+        console.error("获取数据失败:", error);
+      }
+    },
+
+    processChartData(dataList) {
+      const series = [];
+      const xAxis0 = [];
+      let ndata = [];
+
+      // 确保数据按日期排序
+      const sortedData = [...dataList].sort((a, b) => new Date(a.v_ymd) - new Date(b.v_ymd));
+
+      // 只取最近15天数据
+      const recentData = sortedData.slice(-15);
+
+      recentData.forEach(item => {
+        xAxis0.push(item.v_ymd);
+        ndata.push(item.v_ztrate);
+      });
+
+      series.push({
+        name: 'OQC',
+        type: 'line',
+        data: ndata,
+        symbolSize: 4,
+        lineStyle: {
+          width: 3
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 15,
+          color: 'inherit',
+          fontWeight: "bold"
+        },
+        emphasis: {
+          focus: 'series'
+        },
+      });
+
+      // 计算最小值，确保图表有合理的显示范围
+      const minValue = Math.max(0, Math.min(...ndata) - 5);
+
+      this.linedata = {
+        series: series,
+        xAxiss: xAxis0,
+        min: minValue,
+        interval: Math.max(5, Math.ceil((100 - minValue) / 7))
+      };
+
+      // 强制更新图表
+      this.chartKey += 1;
     }
   }
 };
 </script>
 
-<style lang="scss" class>
-//$box-height: 520px;
+<style lang="scss" scoped>
 $box-height: 475px;
 $box-width: 100%;
+
 #bottom2 {
   padding: 13px;
   height: $box-height;
   width: $box-width;
   border-radius: 5px;
+
   .bg-color-black {
     height: $box-height - 25px;
-    //width: $box-width - 10px;
     border-radius: 10px;
-    padding: 5px ;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
   }
+
   .body-box {
     border-radius: 10px;
     overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .chart-container {
+      flex: 1;
+      min-height: 0; // 修复flex布局中的尺寸问题
+    }
   }
 }
 </style>