PLC实时状态接口联调

src/api/http/http-api.js

@@ -1,4 +1,9 @@
 export default  {
+    getplcStatus: {
+        method: "GET",
+        url: "/plc/plcStatus",
+        name: "获取PLC状态"
+    },
     getRealTimeList: {
         method: "POST",
         url: "/realTime",

src/layouts/PageHeader.vue

@@ -11,8 +11,11 @@
         </div>
         <div class="header-right">
             <div class="header-top-right-circle" @click="visible = !visible"></div>
+            <a-badge :count="count">
+                <a-icon type="bell" style="font-size:20px;cursor:pointer"/>
+            </a-badge>
             <a-popover id="popover" v-model="visible" placement="bottom" trigger="click">
-                <a href="javascript:;">
+                <a href="javascript:;" style="margin:0 10px">
                     {{
                     userInfo.name ? userInfo.name : "userName"
                     }}
@@ -47,10 +50,17 @@ export default {
     data() {
         return {
             visible: false,
-            collapsed:false
+            collapsed: false,
+            count: 0
         };
     },
-
+    mounted() {
+        this.getplcStatus()
+        const that = this
+        setInterval(function () {
+            that.getplcStatus()
+        }, 5000)
+    },
     methods: {
         ...mapMutations(["setState"]),
         logout() {
@@ -66,10 +76,23 @@ export default {
 
             });
         },
-        collapsedFlag(){
+        collapsedFlag() {
             // console.log(11111)
             this.collapsed = !this.collapsed
-            this.$store.commit('aside_collapsed',this.collapsed);
+            this.$store.commit('aside_collapsed', this.collapsed);
+        },
+        getplcStatus() {
+            this.$axios({
+                url: "/plc/plcStatus",
+                method: "GET"
+            }).then(res => {
+                console.log(res.data)
+                if (res.code == 200) {
+                    this.count = res.data
+                }
+            }).catch(err => {
+                console.log(err)
+            })
         }
     }
 };
@@ -78,7 +101,7 @@ export default {
 <style lang="scss">
 .header {
     background: #ffffff;
-    display:flex;
+    display: flex;
     align-items: center;
     justify-content: space-between;
     height: 64px;
@@ -88,8 +111,10 @@ export default {
     position: fixed;
     top: 0;
     width: calc(100% - 270px);
-    &-left{
-        .trigger{
+    z-index: 999;
+
+    &-left {
+        .trigger {
             font-size: 18px;
             line-height: 64px;
             padding: 0 24px;
@@ -97,6 +122,7 @@ export default {
             transition: color 0.3s;
         }
     }
+
     &-right {
         display: flex;
         align-items: flex-start;

src/plugins/antd.js

@@ -28,6 +28,7 @@ import {
     DatePicker,
     Upload,
     Radio,
+    Badge
 } from "ant-design-vue";
 Vue.use(Layout);
 Vue.use(ConfigProvider);
@@ -56,6 +57,7 @@ Vue.use(Divider)
 Vue.use(DatePicker)
 Vue.use(Upload)
 Vue.use(Radio)
+Vue.use(Badge)
 Vue.prototype.$message = message;
 Vue.prototype.$info = Modal.info;
 Vue.prototype.$success = Modal.success;