1

src/views/Cockpit.vue

@@ -36,7 +36,11 @@
         <p>
           <span>产量数据监控</span>
         </p>
-        <div id="productChart" v-show="clgrade && resultObj.YXDBWG"></div>
+        <div
+          id="productChart"
+          style="width: 410px; height: 256px"
+          v-show="clgrade && resultObj.YXDBWG"
+        ></div>
       </div>
 
       <div class="loadChart">
@@ -108,16 +112,17 @@ export default {
       zzgrade: "",
       qxgrade: "",
       yxgrade: "",
-      wxgrade: "",
+      wxgrade: true,
     };
   },
   created() {
-    this.getClGrade();
+    // this.getClGrade();
-    this.getJtGrade();
+    // this.getJtGrade();
-    this.getZzGrade();
+    // this.getZzGrade();
-    this.getQxGrade();
+    // this.getQxGrade();
-    this.getYxGrade();
+    // this.getYxGrade();
-    this.getWxGrade();
+    // this.getWxGrade();
+
     // DB网关有线-产量
     // DB网关无线-急停状态
     // 斥候网关有线-主轴转速
@@ -126,6 +131,7 @@ export default {
     // 有线串口 - 负载电流;
     // 无线串口 - 额定电流;
     // 这两个只要设备连线和设备配置信息对就展示数据;
+
     this.user_id = decodeURIComponent(window.location.href)
       .split("?")[1]
       .split("|")[0];
@@ -133,14 +139,6 @@ export default {
     this.toObj(
       decodeURIComponent(window.location.href).split("?")[1].split("|")[1]
     );
-
-    this.time = this.$moment().format("HH:mm:ss");
-    this.productChartOption = productChart;
-    this.mainshaftChartOption = mainshaftChart;
-    this.loadChartChartOption = loadChartChart;
-    this.ratedChartOption = ratedChart;
-    this.CuttingSpeedChartOption = CuttingSpeedChart;
-    this.stopChartOption = stopChart;
   },
   methods: {
     //获取三维数据
@@ -181,6 +179,7 @@ export default {
       var myChart = echarts.init(document.getElementById(dom), null, {
         devicePixelRatio: 10, // 设置为2或更高的值
       });
+      console.log(option, "option");
       option.xAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
       option.yAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
       myChart.setOption(option);
@@ -236,23 +235,39 @@ export default {
         mark: "CKFWQ_wx",
       });
       this.wxgrade = data.data;
+      this.wxgrade = true;
+      this.resultObj.SerialServerWX = true;
     },
   },
   mounted() {
-    this.getLoadEcharts("productChart", this.productChartOption);
+    this.getClGrade();
-    this.getLoadEcharts("mainshaftChart", this.mainshaftChartOption);
+    this.getJtGrade();
-    this.getLoadEcharts("loadChart", this.loadChartChartOption);
+    this.getZzGrade();
-    this.getLoadEcharts("ratedChart", this.ratedChartOption);
+    this.getQxGrade();
-    this.getLoadEcharts("one", this.CuttingSpeedChartOption);
+    this.getYxGrade();
-    this.getLoadEcharts("two", this.stopChartOption);
+    this.getWxGrade();
-
+    this.$nextTick(() => {
+      this.getLoadEcharts("productChart", this.productChartOption);
+      this.getLoadEcharts("mainshaftChart", this.mainshaftChartOption);
+      this.getLoadEcharts("loadChart", this.loadChartChartOption);
+      this.getLoadEcharts("ratedChart", this.ratedChartOption);
+      this.getLoadEcharts("one", this.CuttingSpeedChartOption);
+      this.getLoadEcharts("two", this.stopChartOption);
+    });
     //实时更新日期数据
     this.timer = setInterval(() => {
       this.time = this.$moment().format("HH:mm:ss");
       this.data = this.$moment().format("YYYY.MM.DD");
     }, 100);
-  },
 
+    this.time = this.$moment().format("HH:mm:ss");
+    this.productChartOption = productChart;
+    this.mainshaftChartOption = mainshaftChart;
+    this.loadChartChartOption = loadChartChart;
+    this.ratedChartOption = ratedChart;
+    this.CuttingSpeedChartOption = CuttingSpeedChart;
+    this.stopChartOption = stopChart;
+  },
   beforeDestory() {
     // 清除定时器以防止内存泄漏
     clearInterval(this.timer);
@@ -268,6 +283,15 @@ export default {
   font-family: myFont;
   src: url("../assets/fonts/YouSheBiaoTiHei-2.ttf");
 }
+#one,
+#two,
+#mainshaftChart,
+#loadChart,
+#productChart,
+#ratedChart {
+  width: 410px;
+  height: 256px;
+}
 
 .container {
   font-family: "SourceHanSansSC-regular";