折线图从左往右

src/components/gas/echart/bottom/bottomLeftChart/index.vue

@@ -20,10 +20,11 @@ export default {
       paiqidata: new Array(30).fill("-"),
       chouqidata: new Array(30).fill("-"),
       xData: new Array(30).fill("-"),
+      count: 0,
       drawTiming: null,
       cdata: {
         paiqidata: [],
-        paiqidata: [],
+        chouqidata: [],
         xData: [],
       },
     };
@@ -43,23 +44,31 @@ export default {
   methods: {
     addData(data) {
       // 先扩展数组，然后删除多余元素
-      this.paiqidata = [
-        ...data.map((item) => item["paiqiliuliang_after"]),
-        ...this.paiqidata
-      ].slice(0,-1)
-      this.chouqidata = [
-        ...data.map((item) => item["chouqiliuliang_after"]),
-        ...this.chouqidata
-      ].slice(0,-1)
-      this.xData = [
-        ...data.map((item) => item["date"].split(" ")[1]),
-        ...this.xData,
-      ].slice(0,-1)
-      // console.log("pidai",this.paiqidata);
-      // console.log(this.xData);
-      this.cdata.paiqidata = this.paiqidata;
-      this.cdata.chouqidata = this.chouqidata;
-      this.cdata.xData = this.xData;
+      console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.paiqidata[this.count] = data[i]["paiqiliuliang_after"];
+          this.chouqidata[this.count] = data[i]["chouqiliuliang_after"];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          this.cdata.paiqidata.shift();
+          this.paiqidata.push(data[i]["paiqiliuliang_after"]);
+          this.chouqidata.shift();
+          this.chouqidata.push(data[i]["chouqiliuliang_after"]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      console.log("this.paiqidata", this.paiqidata);
+      console.log("this.chouqidata", this.chouqidata);
+      console.log("this.xData", this.xData);
+      this.cdata.paiqidata= this.paiqidata;
+      this.cdata.chouqidata=this.chouqidata;
+      this.cdata.xData=this.xData;
+      console.log("this.cdata", this.cdata);
     },
     initWebSocket() {
       // 连接错误

src/components/gas/echart/bottom/bottomRightChart/index.vue

@@ -13,6 +13,7 @@ export default {
       currentData: new Array(30).fill("-"),
       xData: new Array(30).fill("-"),
       drawTiming: null,
+      count: 0,
       cdata: {
         currentData: [],
         xData: [],
@@ -31,22 +32,22 @@ export default {
   },
   methods: {
     addData(data) {
-      // console.log("data", data.map((item) => item["paiqiliuliang_after"]));
+      console.log("data", data.map((item) => item["date"].split(" ")[1]));
       // 先扩展数组，然后删除多余元素
-      this.currentData = [
-        ...data.map((item) => item["dianjidianliui_after"]),
-        ...this.currentData,
-      ].slice(0, -1);
-      this.xData = [
-        ...data.map((item) => item["date"].split(" ")[1]),
-        ...this.xData,
-      ].slice(0, -1);
-      console.log(123);
-      console.log("currentData1", this.currentData);
-      console.log(
-        "currentData2",
-        data.map((item) => item["dianjidianliui_after"])
-      );
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.currentData[this.count] = data[i]["dianjidianliui_after"];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          this.currentData.shift();
+          this.currentData.push(data[i]["dianjidianliui_after"]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
       this.cdata.currentData = this.currentData;
       this.cdata.xData = this.xData;
     },

src/views/gas/configImg/index.vue

@@ -83,7 +83,7 @@
               </div>
               <div style="flex: 1">
                 <dv-border-box-12>
-                  <bottomRight />
+                  <!-- <bottomRight /> -->
                 </dv-border-box-12>
               </div>
             </div>

src/views/transportation/configImg/belt/Analysis.vue

@@ -5,8 +5,8 @@
         <div style="font-size: 20px;font-weight:bold;text-align:center;">{{ this.$route.params.title }}</div>
         <img src="@/assets/img/20211209164229.png" />
       </a-col>
-      <a-col :sm="24" :md="12" :xl="6"><chart :id="23" title="皮带速度" unit="m/s" /></a-col>
-      <a-col :sm="24" :md="12" :xl="5"><chart :id="24" title="驱动电机电流" unit="A" /></a-col>
+      <a-col :sm="24" :md="12" :xl="6"><chart :id="23" title="皮带速度" unit="m/s" type="pidaisudu_after"/></a-col>
+      <a-col :sm="24" :md="12" :xl="5"><chart :id="24" title="驱动电机电流" unit="A" type="dianliu_after"/></a-col>
     </a-row>
     <a-row>
       <a-col :sm="24" :md="12" :xl="11">
@@ -67,8 +67,8 @@
           </div>
         </div>
       </a-col>
-      <a-col :sm="24" :md="12" :xl="6"><chart :id="25" title="减速器油压" unit="Mpa" /></a-col>
-      <a-col :sm="24" :md="12" :xl="5"><chart :id="26" title="变频器功率" unit="KW" /></a-col>
+      <a-col :sm="24" :md="12" :xl="6"><chart :id="25" title="减速器油压" unit="Mpa" type="youya_after"/></a-col>
+      <a-col :sm="24" :md="12" :xl="5"><chart :id="26" title="变频器功率" unit="KW" type="gonglv_after"/></a-col>
     </a-row>
   </div>
 </template>

src/views/transportation/configImg/belt/Chart.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="testLine" style="width: 450px; height: 400px; margin-top: 40px" ></div>
+  <div
+    ref="testLine"
+    style="width: 450px; height: 400px; margin-top: 40px"
+  ></div>
 </template>
 
 <script>
@@ -10,6 +13,7 @@ export default {
     return {
       data: new Array(30).fill("-"),
       xData: new Array(30).fill("-"),
+      count: 0,
       myChart: null,
       option: {
         tooltip: {
@@ -132,21 +136,33 @@ export default {
   computed: {
     ...mapState(["websocketIP"]),
   },
-  props: ["id", "title", "unit"],
+  props: ["id", "title", "unit", "type"],
   methods: {
     addData(data) {
       // console.log("data", data);
+      //                 data.forEach((item, index) => {
+      //   this.data.pop();
+      //   this.data.unshift(item[this.type]);
+      //   this.xData.pop();
+      //   this.xData.unshift(item["date"].split(" ")[1]);
+      // });
       // 先扩展数组，然后删除多余元素
-      this.data = [
-        ...this.data,
-        ...data.map((item) => item["pidaisudu_after"]),
-      ].slice(1);
-      this.xData = [
-        ...this.xData,
-        ...data.map((item) => item["date"].split(" ")[1]),
-      ].slice(1);
-      // console.log("data", this.data);
-      // console.log("xdata", this.xData);
+      if (this.count < 30) {
+        for(let i = 0 ; i < data.length ; i++){
+          this.data[this.count] = data[i][this.type];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else{
+        for(let i = 0 ; i < data.length ; i++){
+          this.data.shift();
+          this.data.push(data[i][this.type]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      console.log("data", this.data);
+      console.log("xdata", this.xData);
       this.myChart.setOption({
         xAxis: [
           {