皮带诊断界面初步完成v1

src/components/belt_diagnosis/failure_pre/index.vue

@@ -2,14 +2,26 @@
 <div>
 
   <div class="title">故障预测</div>
-  <div class="title1">以下是各个故障发生的可能性</div>
-    <ul class="flex-ul">
+ 
+  <div class="title1">以下是各个故障发生的可能性
+   
+     
+  </div>
+   <div class="contour">
+   <span> <PieChart :value="80" title="跑偏" size="180px" ></PieChart></span>
+   <span> <PieChart :value="80" title="打滑" size="180px" ></PieChart></span>
+    <span> <PieChart :value="80" title="超载" size="180px" ></PieChart></span>
+   <span> <PieChart :value="80" title="堆煤" size="180px" ></PieChart></span>
+
+   </div>
+
+    <!-- <ul class="flex-ul">
       <li>跑偏<span>:{{data.paopian}}</span>%</li>
       <li>打滑<span>:{{data.dahua}}</span>%</li>
       <li>超载<span>：{{data.chaozai}}</span>%</li>
       <li>堆煤<span>:{{data.duimei}}</span>%</li>
      
-    </ul>
+    </ul> -->
 
 </div>
   
@@ -17,66 +29,64 @@
 
 <script>
 import { mapState } from "vuex";
+import pieChart from "@/common/pieChart";
+import PieChart from "../../../common/pieChart.vue";
 export default {
-  data() {
-    return {
-      data: {
-        paopian:"20",
-        dahua:"80",
-        chaozai:"10",
-        duimei:"15",
-      },
-    };
-  },
-// 这里的id为测点id
-  mounted() {
-    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
-    this.initWebSocket();
-  },
-  methods: {
-    initWebSocket() {
-      // 连接错误
-      this.websocket.onerror = () => {
-        console.log(
-          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
-        );
-      };
-      // 连接成功
-      this.websocket.onopen = () => {
-        console.log(
-          "WebSocket连接成功    状态码：" + this.websocket.readyState
-        );
-      };
-      // 收到消息的回调
-      this.websocket.onmessage = (event) => {
-        if (JSON.parse(event.data).length) {
-          this.changeState(JSON.parse(event.data));
-        }
-      };
-      // 连接关闭的回调
-      this.websocket.onclose = () => {
-        console.log(
-          "WebSocket连接关闭    状态码：" + this.websocket.readyState
-        );
-      };
-      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
-      this.$once("hook:beforeDestroy", () => {
-        this.websocket.close();
-        console.log("关闭websocket连接");
-      });
+    pieChart,
+    data() {
+        return {
+            data: {
+                paopian: "20",
+                dahua: "80",
+                chaozai: "10",
+                duimei: "15",
+            },
+        };
     },
-       changeState(data) {
-        this.data=data[0];
-      console.log("数据展示为：", this.data);
+    // 这里的id为测点id
+    mounted() {
+        this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
+        this.initWebSocket();
     },
-    close() {
-      this.websocket.close();
-      console.log("关闭websocket连接");
+    methods: {
+        initWebSocket() {
+            // 连接错误
+            this.websocket.onerror = () => {
+                console.log("WebSocket连接发生错误   状态码：" + this.websocket.readyState);
+            };
+            // 连接成功
+            this.websocket.onopen = () => {
+                console.log("WebSocket连接成功    状态码：" + this.websocket.readyState);
+            };
+            // 收到消息的回调
+            this.websocket.onmessage = (event) => {
+                if (JSON.parse(event.data).length) {
+                    this.changeState(JSON.parse(event.data));
+                }
+            };
+            // 连接关闭的回调
+            this.websocket.onclose = () => {
+                console.log("WebSocket连接关闭    状态码：" + this.websocket.readyState);
+            };
+            // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+            this.$once("hook:beforeDestroy", () => {
+                this.websocket.close();
+                console.log("关闭websocket连接");
+            });
+        },
+        changeState(data) {
+            this.data = data[0];
+            console.log("数据展示为：", this.data);
+        },
+        close() {
+            this.websocket.close();
+            console.log("关闭websocket连接");
+        },
     },
-  },
-  computed: {
-    ...mapState(["websocketIP"]),
-  },
+    computed: {
+        ...mapState(["websocketIP"]),
+    },
+    components: { PieChart }
 };
 </script>
 
@@ -96,6 +106,28 @@ export default {
   margin-top: 30px;
   margin-left: 20px;
 }
+.contour {
+  display: flex;
+  justify-items: flex-start;
+  align-items: center;
+  flex-flow: row wrap;
+  height: 100%;
+  widows: 100%;
+  span {
+    // float: left;
+    // margin: 35px;
+    margin-bottom: -30px;
+    color: #4adefe;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex: 0 0 50%;
+    flex-direction: column;
+    // div {
+    //   margin-bottom: 10px;
+    // }
+  }
+}
 .flex-ul {
   display: flex;
   // flex-direction: column;