主运输图表+苏神给的datagear嵌入代码

src/components/transportation/configImg/chart/myBar.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="com-chart" ref="mybar1"></div>
+  <div
+    class="com-chart"
+    ref="mybar1"
+  ></div>
 </template>
 <script>
 export default {
@@ -12,6 +15,7 @@ export default {
   mounted() {
     this.initCharts();
     this.updateChart();
+    this.getRandomData();
   },
   methods: {
     // 初始化图表
@@ -165,6 +169,36 @@ export default {
       };
       this.myChart.setOption(option);
     },
+    // 故障统计随机数组
+    getRandomData() {
+      let interval = setInterval(() => {
+        var data1 = [];
+        var data2 = [];
+        var data3 = [];
+        for (let i = 0; i < 9; i++) {
+          data1.push(this.getRandomNum(400, 900));
+          data2.push(this.getRandomNum(400, 900));
+          data3.push(this.getRandomNum(400, 900));
+        }
+
+        this.myChart.setOption({
+          series: [
+            {
+              data: data1,
+            },
+            {
+              data: data2,
+            },
+            {
+              data: data3,
+            },
+          ],
+        });
+      }, 3000);
+      this.$once("hook:beforeDestroy", () => {
+        clearInterval(interval);
+      });
+    },
   },
 };
 </script>

src/components/transportation/configImg/chart/myLine.vue

@@ -23,6 +23,7 @@ export default {
   mounted() {
     this.initCharts();
     this.updateChart();
+    this.getRandomData();
   },
   methods: {
     // 初始化图表
@@ -123,22 +124,6 @@ export default {
               label: {
                 // padding: [11, 5, 7],
                 padding: [0, 0, 10, 0],
-                /*
-    除了padding[0]建议必须是0之外，其他三项可随意设置
-    
-    和CSSpadding相同，[上，右，下，左]
-    
-    如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
-    
-    padding[2]的10:
-    
-    10 = 文字距下边线的距离 + 下边线的宽度
-                
-    如：UI图中文字距下边线距离为7 下边线宽度为2
-    
-    则padding: [0, 0, 9, 0]
-                
-                */
                 // 这里的margin和axisLabel的margin要一致!
                 margin: 15,
                 // 移入时的字体大小
@@ -157,10 +142,6 @@ export default {
                     {
                       // offset: 0.9,
                       offset: 0.86,
-                      /*
-0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
-                        
-                        */
                       color: "#fff", // 0% 处的颜色
                     },
                     {
@@ -252,7 +233,7 @@ export default {
                 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
             },
-            data: [79, 50, 63, 49, 33, 81, 68],
+            data: [],
             symbolSize: 1,
             symbol: "circle",
             smooth: true,
@@ -291,7 +272,7 @@ export default {
                 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
             },
-            data: [55, 30, 46, 63, 65, 58, 68],
+            data: [],
             symbolSize: 1,
             symbol: "circle",
             smooth: true,
@@ -306,7 +287,7 @@ export default {
           {
             name: "2501",
             type: "line",
-            data: [64, 61, 85, 83, 74, 47, 76],
+            data: [],
             symbolSize: 1,
             yAxisIndex: 1,
             symbol: "circle",
@@ -320,7 +301,7 @@ export default {
           {
             name: "西1.6m",
             type: "line",
-            data: [71, 48, 84, 85, 68, 65, 65],
+            data: [],
             symbolSize: 1,
             yAxisIndex: 1,
             symbol: "circle",
@@ -334,7 +315,7 @@ export default {
           {
             name: "西巷171.6",
             type: "line",
-            data: [64, 65, 60, 47, 75, 64, 67],
+            data: [],
             symbolSize: 1,
             yAxisIndex: 1,
             symbol: "circle",
@@ -348,7 +329,7 @@ export default {
           {
             name: "西1.6m",
             type: "line",
-            data: [80, 68, 43, 71, 55, 61, 64],
+            data: [],
             symbolSize: 1,
             yAxisIndex: 1,
             symbol: "circle",
@@ -363,6 +344,78 @@ export default {
       };
       this.myChart.setOption(option);
     },
+    getRandomData(){
+      var first = 1;
+      if(first){
+        var xData=[];
+        var data1 = [];
+        var data2 = [];
+        var data3 = [];
+        var data4 = [];
+        var data5 = [];
+        var data6 = [];
+
+        for (let i = 0; i < 7; i++) {
+          let now =new Date();
+          xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
+          now = new Date(+now - 2000);
+          data1.push(this.getRandomNum(80, 90));
+          data2.push(this.getRandomNum(80, 90));
+          data3.push(this.getRandomNum(80, 90));
+          data4.push(this.getRandomNum(70, 80));
+          data5.push(this.getRandomNum(68, 90));
+          data6.push(this.getRandomNum(80, 88));
+        }
+        first = 0;
+      }
+      let interval = setInterval(() => {
+        console.log(xData);
+        xData.shift();
+        xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+        data1.shift();
+        data1.push(this.getRandomNum(80, 90));
+        data2.shift();
+        data2.push(this.getRandomNum(80, 90));
+        data3.shift();
+        data3.push(this.getRandomNum(80, 90));
+        data4.shift();
+        data4.push(this.getRandomNum(80, 90));
+        data5.shift();
+        data5.push(this.getRandomNum(80, 90));
+        data6.shift();
+        data6.push(this.getRandomNum(80, 90));
+
+        this.myChart.setOption({
+          xAxis:[{
+            data:xData
+          }],
+          series: [
+            {
+              data: data1,
+            },
+            {
+              data: data2,
+            },
+            {
+              data: data3,
+            },
+            {
+              data: data4,
+            },
+            {
+              data: data5,
+            },
+            {
+              data: data6,
+            },
+            
+          ],
+        });
+      }, 3000);
+      this.$once("hook:beforeDestroy", () => {
+        clearInterval(interval);
+      });
+    }
   },
 };
 </script>

src/utils/mixin.js

@@ -6,5 +6,6 @@ export default {
     getRandomNumWithDecimals(min, max) {
       return Number.parseFloat((Math.random() * (max - min) + min).toFixed(2));
     }
+    
   },
 }

src/views/Home.vue

@@ -1,7 +1,10 @@
 <template>
-  <div >
-    <el-row class="tac" >
-      <el-col :span="2" style="margin-top: -30px;">
+  <div>
+    <el-row class="tac">
+      <el-col
+        :span="2"
+        style="margin-top: -30px;"
+      >
         <!-- style="width: 110px;height: 800px;background-color: #409eff;" -->
         <div style="width: 110px; height: 800px;">
           <div style="
@@ -72,20 +75,25 @@
           </el-menu>
         </div>
       </el-col>
-      <el-col :span="20" style="margin-top: -30px">
+      <el-col
+        :span="20"
+        style="margin-top: -30px"
+      >
         <!-- 展示   -->
         <iframe
-          v-if="this.$route.path == '/'"
-          id="content"
+          id="dashBoard"
+          :src="url"
           frameborder="0"
-          src="http://localhost:50401/"
-          width="1138px"
-          height="680px"
+          scrolling="yes"
+          v-if="getDashBoardId && this.$route.path == '/'"
         ></iframe>
         <router-view></router-view>
-      </el-col> 
+      </el-col>
       <!-- 右侧边栏 -->
-      <el-col :span="2" style="margin-top: -30px;">
+      <el-col
+        :span="2"
+        style="margin-top: -30px;"
+      >
         <div style="width: 110px; height: 800px;">
           <div style="
               margin-left: 20px;
@@ -153,7 +161,10 @@
               </el-menu-item>
             </template>
           </el-menu>
-          <div class="logout" @click="loginOut">退出</div>
+          <div
+            class="logout"
+            @click="loginOut"
+          >退出</div>
         </div>
       </el-col>
     </el-row>
@@ -169,6 +180,8 @@ export default {
       // 	username: "admin",
       // 	password: "123",
       // },
+      getDashBoardId: false,
+      url: "http://12.126.68.148:50401/analysis/dashboard/show/",
       imgSys: {
         100: require("@/assets/img/100.png"),
         101: require("@/assets/img/101.png"),
@@ -200,6 +213,28 @@ export default {
   mounted() {
     console.log(this.$cookie.get("token"));
     console.log(this.$route.path);
+    this.getRequest("/dashBoard/getDashBoard").then((resp) => {
+      if (resp) {
+        if (resp.data !== null) {
+          this.url = this.url + resp.data.dashBoardId + "/";
+          console.log(this.url);
+          this.getDashBoardId = true;
+        } else {
+          this.$message.error("看板未发布");
+        }
+      }
+    });
+    function changeMobsfIframe() {
+      const iframe = document.getElementById("dashBoard");
+      const deviceWidth = document.body.clientWidth;
+      const deviceHeight = document.body.clientHeight;
+      iframe.style.width = Number(deviceWidth) - 120 + "px"; //数字是页面布局宽度差值
+      iframe.style.height = Number(deviceHeight) - 160 + "px"; //数字是页面布局高度差
+    }
+    changeMobsfIframe();
+    window.onresize = function () {
+      changeMobsfIframe();
+    };
   },
   methods: {
     handleOpen(key, keyPath) {
@@ -212,9 +247,9 @@ export default {
     toggleCollapser() {
       this.isCollapseright = !this.isCollapseright;
     },
-    loginOut(){
+    loginOut() {
       window.location.href = "http://112.126.68.148/#/";
-    }
+    },
   },
 };
 </script>