主运输系统的皮带界面，后端链接

package.json

@@ -16,6 +16,7 @@
     "less-loader": "5.0.0",
     "element-ui": "^2.15.2",
     "node-modules": "^1.0.1",
+    "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
     "vue-axios": "^3.3.7",
     "vue-cookie": "^1.1.4",

src/components/transportation/configImg/card/ChartCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :="lloadingoading" :body-style="{padding: '20px 24px 8px'}" :bordered="false">
+  <a-card :body-style="{padding: '20px 24px 8px'}" :bordered="false">
     <div class="chart-card-header">
       <div class="meta">
         <span class="chart-card-title">{{title}}</span>
@@ -11,7 +11,7 @@
     </div>
     <div class="chart-card-content">
       <div class="content-fix">
-        <slot></slot>
+        <slot name="center"></slot>
       </div>
     </div>
     <div class="chart-card-footer">

src/main.js

@@ -29,6 +29,7 @@ import 'vue-awesome/icons/chart-pie.js';
 import 'vue-awesome/icons/chart-line.js';
 import 'vue-awesome/icons/align-left.js';
 import 'vue-awesome/icons/align-left.js';
+import Viser from 'viser-vue'
 // import httpRequest from '@/utils/httpRequest'
 Vue.component('vue-drag-resize', VueDragResize)
 Vue.component('icon', Icon);
@@ -47,6 +48,7 @@ Vue.use(ElementUI, { size: 'small' });
 Vue.use(VueCookie)
 Vue.use(Antd)
 Vue.use(dataV);
+Vue.use(Viser)
 new Vue({
     router,
     store,

src/store/index.js

@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-
+    websocketIP: "10.170.30.77:8081",
   },
   mutations: {
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="analysis">
-    <a-card :loading="loading" :bordered="true" bodyStyle="padding:0">
+    <a-card :bordered="true" bodyStyle="padding:0">
       <a-row style="margin: 0 -12px">
         <a-col
           style="padding: 0 12px"
@@ -11,7 +11,6 @@
           :xs="24"
         >
           <a-card
-            :loading="loading"
             :bordered="false"
             style="margin-top: 24px"
             title="皮带状态"
@@ -50,37 +49,35 @@
           :sm="24"
           :xs="24"
         >
-          <chart-card :loading="loading" :title="'故障统计(10天)'">
+          <chart-card  :title="'故障统计(10天)'">
             <a-tooltip slot="action">
               <a-icon type="info-circle-o" />
             </a-tooltip>
-            <div>
-              <my-bar />
-            </div>
+            <template #center>
+              <my-bar></my-bar>
+            </template>
           </chart-card>
-          <chart-card :loading="loading" :title="'单皮带传送效率(10天)'">
+          <chart-card  :title="'单皮带传送效率(10天)'">
             <a-tooltip slot="action">
               <a-icon type="info-circle-o" />
             </a-tooltip>
-            <div>
-              <my-line />
-            </div>
+            <template #center>
+              <my-line></my-line>
+            </template>
           </chart-card>
         </a-col>
       </a-row>
     </a-card>
     <a-card
-      :loading="loading"
       :bordered="true"
       style="margin-top: 24px"
       title="运行提示"
-      :bodyStyle="{padding:0}"
+      bodyStyle="padding:0"
       :headStyle="{backgroundColor:'#1890ff',color:'white'}"
     >
       <running-msg></running-msg>
     </a-card>
     <a-card
-      :loading="loading"
       :bordered="true"
       style="margin-top: 24px"
       title="报警统计"
@@ -100,17 +97,14 @@ import BeltOverview from "./BeltOverview";
 import RunningMsg from "./RunningMsg.vue";
 import AlarmMsg from "./AlarmMsg.vue";
 import WorkFace from "./WorkFace.vue";
+import MyBar from '../../../../components/transportation/configImg/chart/myBar.vue';
 
 export default {
   name: "Analysis",
   data() {
     return {
-      loading: true,
     };
   },
-  created() {
-    setTimeout(() => (this.loading = !this.loading), 1000);
-  },
   components: {
     WorkFace,
     AlarmMsg,
@@ -119,6 +113,7 @@ export default {
     ChartCard,
     myBar,
     myLine,
+    MyBar,
   },
 };
 </script>

src/views/transportation/configImg/analysis/BeltOverview.vue

@@ -2,22 +2,22 @@
     <div>
         <div class="BeltOverview">
 
-            <belt-item @click="viewDetail" title="西大五1.0m皮带" id="1">
-                <a-icon type="sync" style="color:green; font-size:21px"  spin/>
+            <belt-item @click="viewDetail" title="西大五1.6m皮带" :id="1">
+                <a-icon type="sync" style="color:green; font-size:21px" spin />
             </belt-item>
 
-            <belt-item @click="viewDetail" title="3701巷顺槽皮带" id="2">
+            <belt-item @click="viewDetail" title="3701巷顺槽皮带" :id="2">
                 <a-icon type="sync" style="color:green; font-size:21px" spin />
             </belt-item>
 
             <div style="margin-top: 180px;margin-left:-50px">
-                <belt-item @click="viewDetail" title="2501巷顺槽皮带" id="3" rvalue="-90" >
-                    <a-icon type="sync" style="color:green; font-size:21px" spin />
+                <belt-item @click="viewDetail" title="2501巷顺槽皮带" :id="3" rvalue="-90" >
+                    <a-icon type="sync" style="color:green; fon t-size:21px" spin />
                 </belt-item>
             </div>
 
             <div style="margin-left:-30px">
-                <belt-item @click="viewDetail" title="西1.6m巷顺槽皮带" id="4" color="red">
+                <belt-item @click="viewDetail" title="西1.6m巷顺槽皮带" :id="4" color="red">
                     <a-icon type="alert" style="color:red;font-size:20px"/>
                 </belt-item>
             </div>
@@ -27,28 +27,28 @@
             </div>
 
             <div style="margin-top: 110px">
-                <belt-item @click="viewDetail" title="西巷171.6皮带" id="5" rvalue="-45">
+                <belt-item @click="viewDetail" title="西巷171.6皮带" :id="5" rvalue="-45">
                     <a-icon type="sync" style="color:green; font-size:21px" spin />
                 </belt-item>
             </div>
 
-            <belt-item @click="viewDetail" title="西1.6m皮带" id="6">
+            <belt-item @click="viewDetail" title="西1.6m皮带" :id="6">
                 <a-icon type="sync" style="color:green; font-size:21px" spin />
             </belt-item>
 
             <div style="margin-bottom: 120px;margin-left: -50px">
-                <belt-item @click="viewDetail" title="主斜井皮带" id="7" rvalue="-90">
+                <belt-item @click="viewDetail" title="主斜井皮带" :id="7" rvalue="-90">
                     <a-icon type="sync" style="color:green; font-size:21px" spin />
                 </belt-item>
             </div>
             <div style="margin-bottom: 420px;margin-left:-100px">
-                <belt-item @click="viewDetail" title="101皮带" id="8" rvalue="-45" color="#FFD700">
+                <belt-item @click="viewDetail" title="101皮带" :id="8" rvalue="-45" color="#FFD700">
                     <a-icon type="question-circle" style="color:#FFD700; font-size:22px" />
                 </belt-item>
             </div>
 
             <div style="margin-bottom: 600px;margin-left:-18px">
-                <belt-item @click="viewDetail" title="102皮带" id="9" rvalue="-25">
+                <belt-item @click="viewDetail" title="102皮带" :id="9" rvalue="-25">
                     <a-icon type="sync" style="color:green; font-size:21px" spin />
                 </belt-item>
             </div>
@@ -63,6 +63,11 @@ export default {
     name: "BeltOverview",
     props: ['title'],
     components: {BeltItem},
+    data() {
+        return {
+            
+        }
+    },
     methods: {
         viewDetail(id, title) {
             console.log(123);

src/views/transportation/configImg/analysis/RunningMsg.vue

@@ -1,91 +1,88 @@
 <template>
-   <div
+  <div
     v-infinite-scroll="handleInfiniteOnLoad"
     :infinite-scroll-distance="5"
     class="demo-infinite-container"
   >
     <a-list size="small" :data-source="data" item-layout="vertical">
       <a-list-item slot="renderItem" slot-scope="item" style>
-        <a-list-item-meta :description="item.time"> 
-        </a-list-item-meta>
-        <div>{{item.message}}</div>
+        <a-list-item-meta :description="item.time"> </a-list-item-meta>
+        <div>{{ item.message }}</div>
       </a-list-item>
     </a-list>
   </div>
 </template>
 <script>
-import infiniteScroll from 'vue-infinite-scroll';
+import infiniteScroll from "vue-infinite-scroll";
+import { mapState } from "vuex";
 export default {
-    name: "RunningMsg",
-    directives: { infiniteScroll },
-    data() {
-        return {
-            loading: false,
-            busy: false,
-            data: [],
-            path:"ws://124.71.174.198:8080/ws/runningmsg",
-            socket:"",
-        }
+  name: "RunningMsg",
+  directives: { infiniteScroll },
+  data() {
+    return {
+      loading: false,
+      busy: false,
+      data: [],
+      path: "",
+      socket: "",
+    };
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  mounted() {
+    // 初始化
+    this.path = `ws://${this.websocketIP}/hbase/ws/runningmsg`;
+    this.init();
+  },
+  methods: {
+    handleInfiniteOnLoad() {
+      const data = this.data;
+      if (data.length > 5) {
+        this.busy = true;
+        return;
+      }
     },
-    mounted () {
-        // 初始化
-        this.init()
+    init() {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持socket");
+      } else {
+        // 实例化socket
+        this.socket = new WebSocket(this.path);
+        // 监听socket连接
+        this.socket.onopen = this.open;
+        // 监听socket错误信息
+        this.socket.onerror = this.error;
+        // 监听socket消息
+        this.socket.onmessage = this.getMessage;
+      }
     },
-    methods:{
-        handleInfiniteOnLoad() {
-            const data = this.data;
-            if (data.length > 5) {
-                this.busy = true;
-                return;
-            }
-        },
-        init() {
-            if(typeof(WebSocket) === "undefined"){
-                alert("您的浏览器不支持socket")
-            }else{
-                // 实例化socket
-                this.socket = new WebSocket(this.path)
-                // 监听socket连接
-                this.socket.onopen = this.open
-                // 监听socket错误信息
-                this.socket.onerror = this.error
-                // 监听socket消息
-                this.socket.onmessage = this.getMessage
-            }
-        },
-        open() {
-            console.log("socket连接成功");
-        },
-        error() {
-            console.log("连接错误");
-        },
-        getMessage(msg) {
-            let item = JSON.parse(msg.data);
-            if(item.error_code == 0){
-                this.data.unshift(item.data);
-            }
-            console.log(msg.data)
-        },
-        send() {
-        },
-        close() {
-            console.log("socket已经关闭")
-        }
+    open() {
+      console.log("socket连接成功");
     },
-    destroyed () {
-        // 销毁监听
-        this.socket.onclose = this.close
+    error() {
+      console.log("连接错误");
     },
-    created(){
-        fetch("http://124.71.174.198:8080/api/runningmsg")
-        .then(response => response.json())
-        .then(result => this.data = result.data)
-        .catch(error => console.log('error', error));    
-    }
-}
+    getMessage(msg) {
+      let item = JSON.parse(msg.data);
+      if (item.error_code == 0) {
+        this.data.unshift(item.data);
+      }
+      console.log(msg.data);
+    },
+    send() {},
+    close() {
+      console.log("socket已经关闭");
+    },
+  },
+  beforeDestroy() {
+    // 销毁监听
+    this.socket.onclose = this.close;
+  },
+};
 </script>
 <style scoped>
-.demo-infinite-container{
+.demo-infinite-container {
   border-radius: 4px;
   overflow: auto;
   padding: 8px 24px;

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

@@ -2,10 +2,8 @@
   <div class="analysis">
     <a-row>
       <a-col :sm="24" :md="12" :xl="12">
-        <h2 style="text-align: center;">{{this.$route.params.title}}</h2>
-        <img
-          src="@/assets/img/20211209164229.png"
-        />
+        <h2 style="text-align: center">{{ this.$route.params.title }}</h2>
+        <img src="@/assets/img/20211209164229.png" />
       </a-col>
 
       <a-col :sm="24" :md="12" :xl="12">
@@ -68,37 +66,53 @@
       </a-col>
     </a-row>
 
-    <a-card :loading="loading" style="margin-top: 24px" :bordered="false">
+    <a-card style="margin-top: 24px" :bordered="false">
       <div class="salesCard">
         <a-row>
           <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
             <a-card
-              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
+              :bodyStyle="{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }"
             >
-              <chart-1 ref="chart1" />
+              <chart-1 ref="chart1" :id="23" />
             </a-card>
           </a-col>
-          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xbelts="24">
             <a-card
-              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
+              :bodyStyle="{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }"
             >
-              <chart-2 ref="chart2" />
+              <chart-2 ref="chart2" :id="24" />
             </a-card>
           </a-col>
         </a-row>
         <a-row>
           <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
             <a-card
-              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
+              :bodyStyle="{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }"
             >
-              <chart-3 ref="chart3" />
+              <chart-3 ref="chart3" :id="25" />
             </a-card>
           </a-col>
           <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
             <a-card
-              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
+              :bodyStyle="{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }"
             >
-              <chart-4 ref="chart4" />
+              <chart-4 ref="chart4" :id="26" />
             </a-card>
           </a-col>
         </a-row>
@@ -112,15 +126,12 @@ import Chart1 from "./Chart1.vue";
 import Chart2 from "./Chart2.vue";
 import Chart3 from "./Chart3.vue";
 import Chart4 from "./Chart4.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "Analysis",
   data() {
     return {
-      path: "ws://124.71.174.198:8080/ws/belt/",
-      beltId: 1,
-      isFirst: 1,
-      ws: {},
       circle1: 1,
       circle2: 1,
       circle3: 1,
@@ -136,98 +147,34 @@ export default {
     };
   },
   methods: {
-    change_color: function () {
-      this.circle1 = Math.round(Math.random() * 2) % 2;
-      this.circle2 = Math.round(Math.random() * 2) % 2;
-      this.circle3 = Math.round(Math.random() * 2) % 2;
-      this.circle4 = Math.round(Math.random() * 2) % 2;
-      this.circle5 = Math.round(Math.random() * 2) % 2;
-      this.circle6 = Math.round(Math.random() * 2) % 2;
-      this.circle7 = Math.round(Math.random() * 2) % 2;
-      this.circle8 = Math.round(Math.random() * 2) % 2;
-      this.circle9 = Math.round(Math.random() * 2) % 2;
-      this.circle10 = Math.round(Math.random() * 2) % 2;
-    },
-    //websocket连接后端数据改变颜色
-    //1：为绿色，0：为红色
-    changecolor_websocket: function () {
-      this.ws = new WebSocket(this.path);
-      //监听是否连接成功
-      this.ws.onopen = () => {
-        console.log("ws连接状态：" + this.ws.readyState);
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
       };
-      //接听服务器发回的信息并处理展示
-      this.ws.onmessage = (res) => {
-        console.log("接收到来自服务器的消息：");
-        console.log(res.data);
-        this.circle1 = res.data[0];
-        this.circle2 = res.data[1];
-        this.circle3 = res.data[2];
-        this.circle4 = res.data[3];
-        this.circle5 = res.data[4];
-        this.circle6 = res.data[5];
-        this.circle7 = res.data[6];
-        this.circle8 = res.data[7];
-        this.circle9 = res.data[8];
-        this.circle10 = res.data[9];
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
       };
-      //监听连接关闭事件
-      this.ws.onclose = () => {
-        //监听整个过程中websocket的状态
-        console.log("ws连接状态：" + this.ws.readyState);
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        console.log("onmessage", event);
       };
-      //监听并处理error事件
-      this.ws.onerror = function (error) {
-        console.log(error);
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
       };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
     },
-    init() {
-      if (typeof WebSocket === "undefined") {
-        alert("您的浏览器不支持socket");
-      } else {
-        this.socket = new WebSocket(this.path);
-        this.socket.onopen = this.open;
-        this.socket.onerror = this.error;
-        this.socket.onmessage = this.getMessage;
-      }
-    },
-    open() {
-      console.log("socket连接成功");
-    },
-    error() {
-      console.log("连接错误");
-    },
-    getMessage(msg) {
-      let item = JSON.parse(msg.data);
-      if(this.isFirst === 1){
-        this.isFirst = 0;
-        return;
-      }
-      if (item.error_code === 0 && this.isFirst === 0) {
-        console.log(item.data);
-        const {
-          datetime,
-          dianjicurrent,
-          pressure,
-          speed,
-          bpqcurrent,
-        } = item.data;
-        let postdatetime = datetime.split('.')[0]
-        this.$refs.chart1.addData(postdatetime, dianjicurrent);
-        this.$refs.chart2.addData(postdatetime, pressure);
-        this.$refs.chart3.addData(postdatetime, speed);
-        this.$refs.chart4.addData(postdatetime, bpqcurrent);
-      }
-    },
-    send() {},
-    close() {
-      console.log("socket已经关闭");
-    },
-  },
-  created() {
-    setTimeout(() => (this.loading = !this.loading), 1000);
-    setInterval(this.change_color, 5000);
-    this.$refs.chart1.test();
   },
   components: {
     Chart1,
@@ -235,14 +182,14 @@ export default {
     Chart3,
     Chart4,
   },
-  destroyed() {
-    this.socket.onclose = this.close;
+  computed: {
+    ...mapState(["websocketIP"]),
   },
   mounted() {
-    const beltId = this.$route.params.id;
-    this.path = this.path + beltId;
-    this.init();
-  }
+    console.log("id", this.$route.params.id);
+    // this.websocket = new WebSocket();
+    // this.initWebSocket();
+  },
 };
 </script>
 

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

@@ -3,39 +3,16 @@
 </template>
 
 <script>
-import moment from "moment";
-
-let date = new Date();
-const dateDelta = new Date(1000);
-let data = [];
-const getDateString = (date) => {
-  return `${date.getFullYear()}-${
-    date.getMonth() + 1
-  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
-};
-for (let i = 1; i < 30; i++) {
-  const singleDate = new Date(date - dateDelta * i);
-  data.unshift({
-    name: singleDate.toString(),
-    value: [getDateString(singleDate), 155.8+18.8*Math.random(1)],
-  });
-}
-
-const type = "disk";
+import {mapState} from "vuex";
 const unit = "m/s";
 
 export default {
   name: "DisplayDraw",
   data() {
     return {
-      path: "url", //修改地址
-      ws: {}, //保存websocket对象
-      data: data,
-      i: 31,
-      oneDay: 24 * 3600 * 1000,
+      data: new Array(30).fill('-'),
+      xData: new Array(30).fill('-'),
       myChart: null,
-      date: date,
-      dateDelta: dateDelta,
       option: {
         tooltip: {
           trigger: "axis",
@@ -55,19 +32,14 @@ export default {
           extraCssText:
             "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
           formatter: (params) => {
-            var result = `电机电流${params[0].data[0]} <br/>`;
-            params.map((item) => {
-              result += `${
-                isNaN(item.value[1]) ? "-" : item.value[1]
-              } m/s</br>`;
-            });
+            var result = `皮带速度：${params[0].data}${unit} <br/>`;
             return result;
           },
         },
         yAxis: [
           {
             boundaryGap: [0, "100%"],
-            name: "m/s",
+            name: `${unit}`,
             splitLine: {
               show: true,
               lineStyle: {
@@ -88,7 +60,7 @@ export default {
         ],
         xAxis: [
           {
-            type: "time", // x轴为 时间轴
+            // type: "time", // x轴为 时间轴
             splitLine: { show: false },
             axisLine: {
               lineStyle: { width: 0 },
@@ -100,19 +72,17 @@ export default {
             },
             axisTick: { show: false },
             boundaryGap: false,
-            data: data.map(function (item) {
-              return item[0];
-            }),
+            data: [],
           },
         ],
         title: {
-          text: "皮带电机电流曲线",
+          text: "皮带速度",
           padding: [5, 230],
         },
         color: ["#41D6C3", "#5AAAFA"],
         series: [
           {
-            name: "m/s",
+            name: `${unit}`,
             type: "line",
             symbol: "none",
             markPoint: {
@@ -141,59 +111,75 @@ export default {
             lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
             areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
             // connectNulls: true,
-            data: data,
+            data: [],
           },
         ],
       },
     };
   },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  props:["id"],
   methods: {
-    extendXaxis() {
-      let ydata = null;
-      this.date = moment(this.date).add(1, "s").toDate();
-      let tmp = this.data;
-      tmp.shift();
-      tmp.push({
-        name: this.date.toString(),
-        value: [this.getDateString(this.date), ydata],
-      });
+    addData(data) {
+      // console.log("data", data);
+      // 先扩展数组，然后删除多余元素
+      this.data = [...this.data, ...data.map((item) => item["pidaisudu_after"])].slice(2);
+      this.xData = [...this.xData, ...data.map(item=> item['date'].split(" ")[1])].slice(2);
+      // console.log(this.data);
+      // console.log(this.xData);
       this.myChart.setOption({
-        series: [
+        xAxis: [
           {
-            data: tmp,
+            data: this.xData,
           },
         ],
-      });
-      this.data = tmp;
-      console.log(11);
-    },
-    addData(date, value) {
-      let tmp = this.data;
-      tmp.shift();
-      tmp.push({
-        name: date,
-        value: [date, value],
-      });
-      this.myChart.setOption({
         series: [
           {
-            data: tmp,
+            name: `${unit}`,
+            data: this.data,
           },
         ],
       });
-      this.data = tmp;
     },
-    getDateString(date) {
-      return `${date.getFullYear()}-${
-        date.getMonth() + 1
-      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("onmessage", event);
+        this.addData(JSON.parse(event.data));
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
     },
   },
   mounted() {
+    // 先画图
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-    console.log(data);
-    // setInterval(this.extendXaxis, 1000);
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
+    this.initWebSocket();
+    this.myChart.setOption(this.option);
   },
 };
 </script>

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

@@ -3,40 +3,16 @@
 </template>
 
 <script>
-import moment from "moment";
-
-let date = new Date();
-const dateDelta = new Date(1000);
-let data = [];
-
-const getDateString = (date) => {
-  return `${date.getFullYear()}-${
-    date.getMonth() + 1
-  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
-};
-for (let i = 1; i < 30; i++) {
-  const singleDate = new Date(date - dateDelta * i);
-  data.unshift({
-    name: singleDate.toString(),
-    value: [getDateString(singleDate), 0.7+0.05*Math.random(1)],
-  });
-}
-
-const type = "disk";
-const unit = "m/s";
+import {mapState} from "vuex";
+const unit = "A";
 
 export default {
   name: "DisplayDraw",
   data() {
     return {
-      path: "url", //修改地址
-      ws: {}, //保存websocket对象
-      data: data,
-      i: 31,
-      oneDay: 24 * 3600 * 5000,
+      data: new Array(30).fill("-"),
+      xData: new Array(30).fill("-"),
       myChart: null,
-      date: date,
-      dateDelta: dateDelta,
       option: {
         tooltip: {
           trigger: "axis",
@@ -56,19 +32,14 @@ export default {
           extraCssText:
             "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
           formatter: (params) => {
-            var result = `电机电流${params[0].data[0]} <br/>`;
-            params.map((item) => {
-              result += `${
-                isNaN(item.value[1]) ? "-" : item.value[1]
-              } m/s</br>`;
-            });
+            var result = `驱动电机电流：${params[0].data}${unit} <br/>`;
             return result;
           },
         },
         yAxis: [
           {
             boundaryGap: [0, "100%"],
-            name: "m/s",
+            name: `${unit}`,
             splitLine: {
               show: true,
               lineStyle: {
@@ -89,7 +60,7 @@ export default {
         ],
         xAxis: [
           {
-            type: "time", // x轴为 时间轴
+            // type: "time", // x轴为 时间轴
             splitLine: { show: false },
             axisLine: {
               lineStyle: { width: 0 },
@@ -101,19 +72,17 @@ export default {
             },
             axisTick: { show: false },
             boundaryGap: false,
-            data: data.map(function (item) {
-              return item[0];
-            }),
+            data: [],
           },
         ],
         title: {
-          text: "皮带电机电流曲线",
+          text: "驱动电机电流",
           padding: [5, 230],
         },
         color: ["#41D6C3", "#5AAAFA"],
         series: [
           {
-            name: "m/s",
+            name: `${unit}`,
             type: "line",
             symbol: "none",
             markPoint: {
@@ -142,59 +111,83 @@ export default {
             lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
             areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
             // connectNulls: true,
-            data: data,
+            data: [],
           },
         ],
       },
     };
   },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  props: ["id"],
   methods: {
-    extendXaxis() {
-      let ydata = null;
-      this.date = moment(this.date).add(1, "s").toDate();
-      let tmp = this.data;
-      tmp.shift();
-      tmp.push({
-        name: this.date.toString(),
-        value: [this.getDateString(this.date), ydata],
-      });
+    addData(data) {
+      // console.log("data", data);
+      // 先扩展数组，然后删除多余元素
+      this.data = [
+        ...this.data,
+        ...data.map((item) => item["dianliu_after"]),
+      ].slice(2);
+      this.xData = [
+        ...this.xData,
+        ...data.map((item) => item["date"].split(" ")[1]),
+      ].slice(2);
+      // console.log(this.data);
+      // console.log(this.xData);
       this.myChart.setOption({
-        series: [
+        xAxis: [
           {
-            data: tmp,
+            data: this.xData,
           },
         ],
-      });
-      this.data = tmp;
-      console.log(11);
-    },
-    addData(date, value) {
-      let tmp = this.data;
-      tmp.shift();
-      tmp.push({
-        name: date,
-        value: [date, value],
-      });
-      this.myChart.setOption({
         series: [
           {
-            data: tmp,
+            name: `${unit}`,
+            data: this.data,
           },
         ],
       });
-      this.data = tmp;
     },
-    getDateString(date) {
-      return `${date.getFullYear()}-${
-        date.getMonth() + 1
-      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("onmessage", event);
+        this.addData(JSON.parse(event.data));
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
     },
   },
   mounted() {
+    // 先画图
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-    console.log(data);
-    // setInterval(this.extendXaxis, 1000);
+    this.websocket = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    );
+    this.initWebSocket();
+    this.myChart.setOption(this.option);
   },
 };
 </script>

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

@@ -3,39 +3,16 @@
 </template>
 
 <script>
-import moment from "moment";
-
-let date = new Date();
-const dateDelta = new Date(1000);
-let data = [];
-const getDateString = (date) => {
-  return `${date.getFullYear()}-${
-    date.getMonth() + 1
-  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
-};
-for (let i = 1; i < 30; i++) {
-  const singleDate = new Date(date - dateDelta * i);
-  data.unshift({
-    name: singleDate.toString(),
-    value: [getDateString(singleDate), 3+0.5*Math.random(1)],
-  });
-}
-
-const type = "disk";
-const unit = "m/s";
+import {mapState} from "vuex";
+const unit = "Mpa";
 
 export default {
   name: "DisplayDraw",
   data() {
     return {
-      path: "url", //修改地址
-      ws: {}, //保存websocket对象
-      data: data,
-      i: 31,
-      oneDay: 24 * 3600 * 1000,
+      data: new Array(30).fill('-'),
+      xData: new Array(30).fill('-'),
       myChart: null,
-      date: date,
-      dateDelta: dateDelta,
       option: {
         tooltip: {
           trigger: "axis",
@@ -55,19 +32,14 @@ export default {
           extraCssText:
             "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
           formatter: (params) => {
-            var result = `电机电流${params[0].data[0]} <br/>`;
-            params.map((item) => {
-              result += `${
-                isNaN(item.value[1]) ? "-" : item.value[1]
-              } m/s</br>`;
-            });
+            var result = `减速器油压：${params[0].data}${unit} <br/>`;
             return result;
           },
         },
         yAxis: [
           {
             boundaryGap: [0, "100%"],
-            name: "m/s",
+            name: `${unit}`,
             splitLine: {
               show: true,
               lineStyle: {
@@ -88,7 +60,7 @@ export default {
         ],
         xAxis: [
           {
-            type: "time", // x轴为 时间轴
+            // type: "time", // x轴为 时间轴
             splitLine: { show: false },
             axisLine: {
               lineStyle: { width: 0 },
@@ -100,19 +72,17 @@ export default {
             },
             axisTick: { show: false },
             boundaryGap: false,
-            data: data.map(function (item) {
-              return item[0];
-            }),
+            data: [],
           },
         ],
         title: {
-          text: "皮带电机电流曲线",
+          text: "减速器油压",
           padding: [5, 230],
         },
         color: ["#41D6C3", "#5AAAFA"],
         series: [
           {
-            name: "m/s",
+            name: `${unit}`,
             type: "line",
             symbol: "none",
             markPoint: {
@@ -140,60 +110,76 @@ export default {
             },
             lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
             areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
-            // connectNulls: true,
-            data: data,
+            data: [],
           },
         ],
       },
     };
   },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  props:["id"],
   methods: {
-    extendXaxis() {
-      let ydata = null;
-      this.date = moment(this.date).add(1, "s").toDate();
-      let tmp = this.data;
-      tmp.shift();
-      tmp.push({
-        name: this.date.toString(),
-        value: [this.getDateString(this.date), ydata],
-      });
+    addData(data) {
+      // console.log("data", data);
+      // 先扩展数组，然后删除多余元素
+      this.data = [...this.data, ...data.map((item) => item["youya_after"])].slice(2);
+      this.xData = [...this.xData, ...data.map(item=> item['date'].split(" ")[1])].slice(2);
+      // console.log(this.data);
+      // console.log(this.xData);
       this.myChart.setOption({
-        series: [
+        xAxis: [
           {
-            data: tmp,
+            data: this.xData,
           },
         ],
-      });
-      this.data = tmp;
-      console.log(11);
-    },
-    addData(date, value) {
-      let tmp = this.data;
-      tmp.shift();
-      tmp.push({
-        name: date,
-        value: [date, value],
-      });
-      this.myChart.setOption({
         series: [
           {
-            data: tmp,
+            name: `${unit}`,
+            data: this.data,
           },
         ],
       });
-      this.data = tmp;
     },
-    getDateString(date) {
-      return `${date.getFullYear()}-${
-        date.getMonth() + 1
-      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("onmessage", event);
+        // this.count = this.count + 1;
+        this.addData(JSON.parse(event.data));
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
     },
   },
   mounted() {
+    // 先画图
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-    console.log(data);
-    // setInterval(this.extendXaxis, 1000);
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
+    this.initWebSocket();
+    this.myChart.setOption(this.option);
   },
 };
 </script>

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

@@ -3,39 +3,16 @@
 </template>
 
 <script>
-import moment from "moment";
-
-let date = new Date();
-const dateDelta = new Date(1000);
-let data = [];
-const getDateString = (date) => {
-  return `${date.getFullYear()}-${
-    date.getMonth() + 1
-  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
-};
-for (let i = 1; i < 30; i++) {
-  const singleDate = new Date(date - dateDelta * i);
-  data.unshift({
-    name: singleDate.toString(),
-    value: [getDateString(singleDate), 80+15*Math.random(1)],
-  });
-}
-
-const type = "disk";
-const unit = "m/s";
+import { mapState } from "vuex";
+const unit = "KW";
 
 export default {
   name: "DisplayDraw",
   data() {
     return {
-      path: "url", //修改地址
-      ws: {}, //保存websocket对象
-      data: data,
-      i: 31,
-      oneDay: 24 * 3600 * 1000,
+      data: new Array(30).fill("-"),
+      xData: new Array(30).fill("-"),
       myChart: null,
-      date: date,
-      dateDelta: dateDelta,
       option: {
         tooltip: {
           trigger: "axis",
@@ -55,19 +32,14 @@ export default {
           extraCssText:
             "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
           formatter: (params) => {
-            var result = `电机电流${params[0].data[0]} <br/>`;
-            params.map((item) => {
-              result += `${
-                isNaN(item.value[1]) ? "-" : item.value[1]
-              } m/s</br>`;
-            });
+            var result = `变频器功率：${params[0].data}${unit} <br/>`;
             return result;
           },
         },
         yAxis: [
           {
             boundaryGap: [0, "100%"],
-            name: "m/s",
+            name: `${unit}`,
             splitLine: {
               show: true,
               lineStyle: {
@@ -88,7 +60,7 @@ export default {
         ],
         xAxis: [
           {
-            type: "time", // x轴为 时间轴
+            // type: "time", // x轴为 时间轴
             splitLine: { show: false },
             axisLine: {
               lineStyle: { width: 0 },
@@ -100,19 +72,17 @@ export default {
             },
             axisTick: { show: false },
             boundaryGap: false,
-            data: data.map(function (item) {
-              return item[0];
-            }),
+            data: []
           },
         ],
         title: {
-          text: "皮带电机电流曲线",
+          text: "变频器功率",
           padding: [5, 230],
         },
         color: ["#41D6C3", "#5AAAFA"],
         series: [
           {
-            name: "m/s",
+            name: `${unit}`,
             type: "line",
             symbol: "none",
             markPoint: {
@@ -141,59 +111,84 @@ export default {
             lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
             areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
             // connectNulls: true,
-            data: data,
+            data: [],
           },
         ],
       },
     };
   },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  props: ["id"],
   methods: {
-    extendXaxis() {
-      let ydata = null;
-      this.date = moment(this.date).add(1, "s").toDate();
-      let tmp = this.data;
-      tmp.shift();
-      tmp.push({
-        name: this.date.toString(),
-        value: [this.getDateString(this.date), ydata],
-      });
+    addData(data) {
+      // console.log("data", data);
+      // 先扩展数组，然后删除多余元素
+      this.data = [
+        ...this.data,
+        ...data.map((item) => item["gonglv_after"]),
+      ].slice(2);
+      this.xData = [
+        ...this.xData,
+        ...data.map((item) => item["date"].split(" ")[1]),
+      ].slice(2);
+      // console.log(this.data);
+      // console.log(this.xData);
       this.myChart.setOption({
-        series: [
+        xAxis: [
           {
-            data: tmp,
+            data: this.xData,
           },
         ],
-      });
-      this.data = tmp;
-      console.log(11);
-    },
-    addData(date, value) {
-      let tmp = this.data;
-      tmp.shift();
-      tmp.push({
-        name: date,
-        value: [date, value],
-      });
-      this.myChart.setOption({
         series: [
           {
-            data: tmp,
+            name: `${unit}`,
+            data: this.data,
           },
         ],
       });
-      this.data = tmp;
     },
-    getDateString(date) {
-      return `${date.getFullYear()}-${
-        date.getMonth() + 1
-      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("onmessage", event);
+        // this.count = this.count + 1;
+        this.addData(JSON.parse(event.data));
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
     },
   },
   mounted() {
+    // 先画图
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-    console.log(data);
-    // setInterval(this.extendXaxis, 1000);
+    this.websocket = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    );
+    this.initWebSocket();
+    this.myChart.setOption(this.option);
   },
 };
 </script>