重新渲染

src/common/echart/index.vue

@@ -40,6 +40,9 @@ export default {
       handler (options) {
         // 设置true清空echart缓存
         this.chart.setOption(options, true)
+        window.addEventListener("resize",function(){console.log("监听窗口变化")
+          this.chart.resize()
+        })
       },
       deep: true
     }

src/components/echart/centerRight/centerRightChart/chart.vue

@@ -29,7 +29,7 @@ export default {
   //   }
   // },
   watch: {
-    cdata: {
+    info: {
       handler(newData) {
         // 固定样式数据
         let lineStyle = {
@@ -62,13 +62,13 @@ export default {
               type: 'value',
               show: false,
               // boundaryGap : [0, 0.01],
-              max: this.info.max
+              max: newData.max
             }
           ],
           yAxis: [
             {
               type: 'category',
-              data: this.info.name,
+              data: newData.name,
               axisLine: {
                 show: false
               },
@@ -137,13 +137,11 @@ export default {
                 color: 'none'
                 // borderRadius: [20, 20, 20, 20],
               },
-              data: this.info.inventory
+              data: newData.inventory
             }
           ]
         }
-      },
-      immediate: true,
-      deep: true
+      }
     }
   }
 }

src/components/echart/centerRight/centerRightChart/chartRight.vue

@@ -23,7 +23,7 @@ export default {
     Echart
   },
   watch: {
-    cdata: {
+    info: {
       handler(newData) {
         // 固定样式数据
         let lineStyle = {
@@ -54,7 +54,7 @@ export default {
             containLabel: true
           },
           xAxis: {
-            data: this.info.name,
+            data: newData.name,
             axisLabel: {
               // inside: true,
               textStyle: {
@@ -110,7 +110,7 @@ export default {
                 show: true, // 显示数值
                 position: 'top' // 数值显示的位置
               },
-              data: this.info.production
+              data: newData.production
             },
             {
               name: '发货完成率',
@@ -143,7 +143,7 @@ export default {
                 color: 'none'
                 // borderRadius: [20, 20, 20, 20],
               },
-              data: this.info.inventory
+              data: newData.inventory
             }
           ]
         }

src/views/center.vue

@@ -28,80 +28,6 @@ export default {
   props: ['info'],
   data() {
     return {
-      titleItem: [
-        {
-          title: '今年累计任务建次数',
-          number: {
-            number: [120],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 26
-            }
-          }
-        },
-        {
-          title: '本月累计任务次数',
-          number: {
-            number: [18],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 26
-            }
-          }
-        },
-        {
-          title: '今日累计任务次数',
-          number: {
-            number: [2],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 26
-            }
-          }
-        },
-        {
-          title: '今年失败任务次数',
-          number: {
-            number: [14],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 26
-            }
-          }
-        },
-        {
-          title: '今年成功任务次数',
-          number: {
-            number: [106],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 26
-            }
-          }
-        },
-        {
-          title: '今年达标任务个数',
-          number: {
-            number: [100],
-            toFixed: 1,
-            textAlign: 'left',
-            content: '{nt}',
-            style: {
-              fontSize: 26
-            }
-          }
-        }
-      ],
       waterConfig1: {
         value: this.info.proportion1,
         borderWidth: 2,
@@ -151,7 +77,25 @@ export default {
   },
   components: {
     CenterChart
-  }
+  },
+  methods: {
+    updateData(){
+      const { waterConfig1 } = this
+      this.waterConfig1.value = this.info.proportion1
+      this.waterConfig1.borderWidth= 2
+      this.waterConfig1.borderRadius= 5
+      this.waterConfig1.borderGap= 6
+      this.waterConfig1.localGradient= true
+      this.waterConfig1 = {...this.waterConfig1}
+      const { waterConfig2 } = this
+      this.waterConfig2.value = this.info.proportion2
+      this.waterConfig2.borderWidth= 2
+      this.waterConfig2.borderRadius= 5
+      this.waterConfig2.borderGap= 6
+      this.waterConfig2.localGradient= true
+      this.waterConfig2 = {...this.waterConfig2}
+    }
+  },
 }
 </script>
 

src/views/centerRight1.vue

@@ -32,6 +32,13 @@ export default {
         align: ['center']
       }
     }
+  },
+  methods: {
+    updateData(){
+      const { config } = this
+      this.config.data = this.tableList
+      this.config = {...this.config}
+    }
   }
 }
 </script>

src/views/centerRight2.vue

@@ -8,7 +8,7 @@
         <dv-decoration-9 style="width: 20px; height: 20px" />
         <span class="fs-xl text mx-2">车间生产情况</span>
       </div>
-        <Chart :info="info" />
+        <Chart ref="chart1"  :info="info" />
     </div>
   </div>
 </template>

src/views/index.vue

@@ -38,7 +38,7 @@
         </div>
         <div class="body-box">
           <!-- 第三行数据 -->
-          <div class="content-box">
+          <div v-if="showTop" class="content-box" >
             <div>
               <dv-border-box-13>
                 <centerRight2 :info="deptInfo" />
@@ -46,8 +46,8 @@
             </div>
             <div>
               <dv-border-box-1>
-                <centerRight1 :tableList="planList" />
-                <center :info="proportionInfo" />
+                <centerRight1 ref="center01" :tableList="planList" />
+                <center ref="center02" :info="proportionInfo" />
               </dv-border-box-1>
             </div>
             <div>
@@ -212,6 +212,10 @@ export default {
         this.planList = retObj.planList
         this.deptInfo = retObj.deptInfo
         this.securitiesInfo = retObj.securitiesInfo
+        this.$nextTick(() => {
+          this.$refs.center02.updateData()
+          this.$refs.center01.updateData()
+        })
       }
       this.showTop = true
     },