主运输系统修改

src/App.vue

@@ -31,6 +31,5 @@ export default {
   background-color: #eceef3;
   background: url("./assets/wave2.svg") no-repeat;
   background-position: 0px 600px;
-  
 }
 </style>

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

@@ -374,7 +374,7 @@ export default {
         first = 0;
       }
       let interval = setInterval(() => {
-        console.log(xData);
+        // console.log(xData);
         xData.shift();
         xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
         data1.shift();

src/router/index.js

@@ -163,21 +163,6 @@ const router = new Router({
           id: 103,
           component: () => import("../views/transportation/transportation.vue"),
           hidden: false,
-          children: [
-            {
-              path: "mainpage",
-              name: "主页面",
-              hidden: false,
-              component: () =>
-                import("@/views/transportation/configImg/analysis"),
-            },
-            {
-              path: "belt/:id/:title",
-              name: "皮带",
-              hidden: false,
-              component: () => import("@/views/transportation/configImg/belt"),
-            },
-          ],
         },
         {
           path: "/coalCentral",

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

@@ -1,88 +1,123 @@
 <template>
-    <div @click="viewDetail" class="item" :style="`transform:rotate(${rvalue}deg)`">
-        <div class="text" :style="`color: ${color}`" >
-            <slot></slot>{{title}}
-        </div>
-        <!-- 箭头 -->
-        <img style="width: auto; height: auto; max-width: 100%; max-height: 100%;" src="@/assets/img/whiteArrow.png" />
-        <div class="belt">
-            <div class="yellow-wrap">
-                <div class="left-circle"></div>
-                <div class="right-circle"></div>
-            </div>
-        </div>
+  <div class="item" :style="`transform:rotate(${rvalue}deg)`">
+    <div class="text" :style="`color: ${color}`"><slot></slot>{{ title }}</div>
+    <!-- 箭头 -->
+    <img
+      style="width: auto; height: auto; max-width: 100%; max-height: 100%"
+      src="@/assets/img/whiteArrow.png"
+    />
+    <div class="out">
+      <div class="left_chilun"><i class="fa fa-cog fa-spin"></i></div>
+      <div class="belt">
+        <!-- <div class="right_chilun"><i class="fa fa-cog fa-spin"></i></div> -->
+        <!-- <div class="yellow-wrap">
+        <div class="left-circle"></div>
+        <div class="right-circle"></div>
+      </div> -->
+      </div>
+      <div class="right_chilun"><i class="fa fa-cog fa-spin"></i></div>
     </div>
+  </div>
 </template>
 
-<script lang="ts">
+<script>
 export default {
-    name: "BeltItem",
-    props: {
-        'title': String,
-        'src': String,
-        'rvalue': String,
-        'color': {
-            type: String,
-            default: "black"
-        },
-        "id": Number, 
+  name: "BeltItem",
+  props: {
+    title: String,
+    src: String,
+    rvalue: String,
+    color: {
+      type: String,
+      default: "black",
     },
-    methods: {
-        viewDetail(){
-            this.$emit("click", this.id, this.title);
-        },
-    },  
-}
+    id: Number,
+  },
+  methods: {},
+};
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .item {
-    margin-left: 5px;
+  margin-left: 5px;
 }
 
-.item{
-    width: 150px;
+.item {
+  width: 150px;
 }
 
 .text {
-    font-size: 13px;
-    line-height: 10px;
-    width: 100%;
-    text-align: center;
+  font-size: 13px;
+  line-height: 10px;
+  width: 100%;
+  text-align: center;
 }
 
 .arrow {
-    width: 100%;
+  width: 100%;
 }
+.out {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: #fff;
+  display: flex;
+  .belt {
+    /* display: flex;
+  width: 100%;
+  height: 17px;
+  border-radius: 7.5px;
+  background: #629dd0;
+  justify-content: center;
+  align-items: center;
+  z-index: -1; */
 
-.belt {
     display: flex;
-    width: 100%;
+    width: 80%;
     height: 17px;
-    border-radius: 7.5px;
-    background: #629dd0;
-    justify-content: center;
-    align-items: center;
-    z-index: -1;
+    transform: translate(20%, 0);  
+    border-top: 5px solid rgb(255, 255, 255);
+    border-bottom: 5px solid rgb(255, 255, 255);
+    border-radius: 20%;
+  }
+  .left_chilun {
+    width: 20%;
+    position: absolute;
+    left: 0;
+    font-size: 20px;
+    i {
+      position: absolute;
+      right: 0;
+    }
+  }
+  .right_chilun {
+    width: 20%;
+    position: absolute;
+    right: 0;
+    font-size: 20px;
+    i {
+      position: absolute;
+      right: 0;
+    }
+  }
 }
 
-.yellow-wrap{
-    display: flex;
-    width: 90%;
-    height: 50%;
-    border-radius: 6px;
-    border: 2px solid #ffe59a;
-    background-color: #629dd0;
-    /* background-color: #629dd0; */
-    justify-content:space-between;
-    align-items: center;
+.yellow-wrap {
+  display: flex;
+  width: 90%;
+  height: 50%;
+  border-radius: 6px;
+  border: 2px solid #ffe59a;
+  background-color: #629dd0;
+  /* background-color: #629dd0; */
+  justify-content: space-between;
+  align-items: center;
 }
 
-.yellow-wrap div{
-    height: 8px;
-    width: 8px;
-    border-radius: 3.75px;
-    background-color: #ffe59a;
+.yellow-wrap div {
+  height: 8px;
+  width: 8px;
+  border-radius: 3.75px;
+  background-color: #ffe59a;
 }
-
-</style>
+</style>

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

@@ -1,92 +1,137 @@
 <template>
-<!-- 皮带模型 -->
-    <div>
-        <div class="BeltOverview">
+  <!-- 皮带模型 -->
+  <div>
+    <div class="BeltOverview">
+      <belt-item
+        @click.native="viewDetail('西大五1.6m皮带', 23)"
+        title="西大五1.6m皮带"
+        :id="23"
+        color="#DADBBD"
+      >
+        <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+      </belt-item>
 
-            <belt-item @click="viewDetail" title="西大五1.6m皮带" :id="23" color="#DADBBD">
-                <a-icon type="sync" style="color:#6EBF8B; font-size:21px" spin />
-            </belt-item>
+      <belt-item
+        @click.native="viewDetail('3701巷顺槽皮带', 2)"
+        title="3701巷顺槽皮带"
+        :id="2"
+        color="#DADBBD"
+      >
+        <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+      </belt-item>
 
-            <belt-item @click="viewDetail" title="3701巷顺槽皮带" :id="2" color="#DADBBD">
-                <a-icon type="sync" style="color:#6EBF8B; font-size:21px" spin />
-            </belt-item>
+      <div style="margin-top: 180px; margin-left: -50px">
+        <belt-item
+          @click.native="viewDetail('2501巷顺槽皮带', 3)"
+          title="2501巷顺槽皮带"
+          :id="3"
+          rvalue="-90"
+          color="#DADBBD"
+        >
+          <a-icon type="sync" style="color:#6EBF8B; fon t-size:21px" spin />
+        </belt-item>
+      </div>
 
-            <div style="margin-top: 180px;margin-left:-50px">
-                <belt-item @click="viewDetail" title="2501巷顺槽皮带" :id="3" rvalue="-90" color="#DADBBD" >
-                    <a-icon type="sync" style="color:#6EBF8B; fon t-size:21px" spin />
-                </belt-item>
-            </div>
+      <div style="margin-left: -30px">
+        <belt-item
+          @click.native="viewDetail('西1.6m巷顺槽皮带', 4)"
+          title="西1.6m巷顺槽皮带"
+          :id="4"
+          color="#D82148"
+        >
+          <a-icon type="alert" style="color: #d82148; font-size: 20px" />
+        </belt-item>
+      </div>
 
-            <div style="margin-left:-30px">
-                <belt-item @click="viewDetail" title="西1.6m巷顺槽皮带" :id="4" color="#D82148">
-                    <a-icon type="alert" style="color:#D82148;font-size:20px"/>
-                </belt-item>
-            </div>
+      <div class="meicang">煤仓</div>
 
-            <div class="meicang" >
-                煤仓
-            </div>
+      <div style="margin-top: 110px">
+        <belt-item
+          @click.native="viewDetail('西巷171.6皮带', 5)"
+          title="西巷171.6皮带"
+          :id="5"
+          rvalue="-45"
+          color="#DADBBD"
+        >
+          <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+        </belt-item>
+      </div>
 
-            <div style="margin-top: 110px">
-                <belt-item @click="viewDetail" title="西巷171.6皮带" :id="5" rvalue="-45" color="#DADBBD">
-                    <a-icon type="sync" style="color:#6EBF8B; font-size:21px" spin />
-                </belt-item>
-            </div>
+      <belt-item
+        @click.native="viewDetail('西1.6m皮带', 6)"
+        title="西1.6m皮带"
+        :id="6"
+        color="#DADBBD"
+      >
+        <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+      </belt-item>
 
-            <belt-item @click="viewDetail" title="西1.6m皮带" :id="6" color="#DADBBD">
-                <a-icon type="sync" style="color:#6EBF8B; font-size:21px" spin />
-            </belt-item>
+      <div style="margin-bottom: 120px; margin-left: -50px">
+        <belt-item
+          @click.native="viewDetail('主斜井皮带', 7)"
+          title="主斜井皮带"
+          :id="7"
+          rvalue="-90"
+          color="#DADBBD"
+        >
+          <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+        </belt-item>
+      </div>
+      <div style="margin-bottom: 420px; margin-left: -100px">
+        <belt-item
+          @click.native="viewDetail('101皮带', 8)"
+          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: 120px;margin-left: -50px">
-                <belt-item @click="viewDetail" title="主斜井皮带" :id="7" rvalue="-90" color="#DADBBD">
-                    <a-icon type="sync" style="color:#6EBF8B; 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">
-                    <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" color="#DADBBD">
-                    <a-icon type="sync" style="color:#6EBF8B; font-size:21px" spin />
-                </belt-item>
-            </div>
-        </div>
+      <div style="margin-bottom: 600px; margin-left: -18px">
+        <belt-item
+          @click.native="viewDetail('102皮带', 9)"
+          title="102皮带"
+          :id="9"
+          rvalue="-25"
+          color="#DADBBD"
+        >
+          <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+        </belt-item>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import BeltItem from "./BeltItem.vue"
+import BeltItem from "./BeltItem.vue";
 
 export default {
-    name: "BeltOverview",
-    props: ['title'],
-    components: {BeltItem},
-    data() {
-        return {
-            
-        }
-    },
-    methods: {
-        viewDetail(id, title) {
-            this.$router.push({
-                path: `/transportation/belt/${id}/${title}`,
-            })
-        }
+  name: "BeltOverview",
+  props: ["title"],
+  components: { BeltItem },
+  data() {
+    return {};
+  },
+  methods: {
+    viewDetail(title, id) {
+      this.$bus.$emit('getBeltData', title, id)
     },
-    
-}
+  },
+};
 </script>
 
 <style scoped>
 .BeltOverview {
-    padding: 20px;
-    display: flex;
-    justify-content: flex-start;
-    align-items:center;
-    /* background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+  padding: 20px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  /* background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
     linear-gradient(
       to top,
       rgba(255, 255, 255, 0.4) 0%,
@@ -95,18 +140,18 @@ export default {
   background-blend-mode: multiply; */
 }
 .meicang {
-    width: 39px;
-    height: 150px;
-    color: #DADBBD;
-    background-color: #629dd0;
-    /* color: white; */
-    border-radius: 6px;
-    font-size: 12px;
-    font-weight: bolder;
-    line-height: 78px;
-    text-align: center;
-    margin-top: 120px;
-    margin-left: 21px;
+  width: 39px;
+  height: 150px;
+  color: #dadbbd;
+  /* background-color: #629dd0; */
+  border: 1px solid black;
+  /* color: white; */
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: bolder;
+  line-height: 78px;
+  text-align: center;
+  margin-top: 120px;
+  margin-left: 21px;
 }
-
-</style>
+</style>

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

@@ -177,7 +177,7 @@ export default {
     },
   },
   mounted() {
-    this.init();
+    // this.init();
     // this.workfaceWebsocket();
   },
 };

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

@@ -1,21 +1,51 @@
 <template>
   <div class="main">
     <!-- 皮带名称 -->
-    <a-row>
-      <div style="font-size: 20px;margin-left:34px;margin-top:5px;color: #4ADEFE">{{ this.$route.params.title }}</div>
-    </a-row>
-    <a-row>
+    <el-row>
+      <div class="select-veido">
+        <el-select
+          style="margin-top: 10px; width: 300px"
+          v-model="titleCopy"
+          placeholder="请选择"
+          @change="titleChange"
+          :popper-append-to-body="false"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </el-row>
+    <el-row>
       <!-- 皮带图片 -->
-      <a-col :sm="24" :md="12" :xl="11">
+      <el-col :sm="24" :md="12" :xl="11">
         <img src="@/assets/img/20211209164229.png" />
-      </a-col>
+      </el-col>
       <!-- 皮带速度 -->
-      <a-col :sm="24" :md="12" :xl="6"><chart :id="23" title="皮带速度" unit="m/s" type="pidaisudu_after"/></a-col>
+      <el-col :sm="24" :md="12" :xl="6"
+        ><chart
+          ref="chart1"
+          :id="23"
+          title="皮带速度"
+          unit="m/s"
+          type="pidaisudu_after"
+      /></el-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">
+      <el-col :sm="24" :md="12" :xl="5"
+        ><chart
+          ref="chart2"
+          :id="24"
+          title="驱动电机电流"
+          unit="A"
+          type="dianliu_after"
+      /></el-col>
+    </el-row>
+    <el-row>
+      <el-col :sm="24" :md="12" :xl="11">
         <div class="contour">
           <!-- 第一行皮带状态 -->
           <div style="height: 80px">
@@ -46,7 +76,7 @@
             </span>
           </div>
           <!-- 第二行皮带状态 -->
-          <div style="height: 200px;margin-top:10px;">
+          <div style="height: 200px; margin-top: 10px">
             <span class="info">
               <div>{{ infoList[5].info_msg }}</div>
               <div class="waring" v-if="infoList[5].info == '0'"></div>
@@ -74,12 +104,26 @@
             </span>
           </div>
         </div>
-      </a-col>
+      </el-col>
       <!-- 减速器油压图 -->
-      <a-col :sm="24" :md="12" :xl="6"><chart :id="25" title="减速器油压" unit="Mpa" type="youya_after"/></a-col>
+      <el-col :sm="24" :md="12" :xl="6"
+        ><chart
+          ref="chart3"
+          :id="25"
+          title="减速器油压"
+          unit="Mpa"
+          type="youya_after"
+      /></el-col>
       <!-- 变频器功率图 -->
-      <a-col :sm="24" :md="12" :xl="5"><chart :id="26" title="变频器功率" unit="KW" type="gonglü_after"/></a-col>
-    </a-row>
+      <el-col :sm="24" :md="12" :xl="5"
+        ><chart
+          ref="chart4"
+          :id="26"
+          title="变频器功率"
+          unit="KW"
+          type="gonglü_after"
+      /></el-col>
+    </el-row>
   </div>
 </template>
 
@@ -133,8 +177,57 @@ export default {
           info_msg: "断带",
         },
       ],
+      titleCopy: this.title,
+      options: [
+        {
+          id: "23",
+          label: "西大五1.6m皮带",
+        },
+        {
+          id: "2",
+          label: "3701巷顺槽皮带",
+        },
+        {
+          id: "3",
+          label: "2501巷顺槽皮带",
+        },
+        {
+          id: "4",
+          label: "西1.6m巷顺槽皮带",
+        },
+        {
+          id: "5",
+          label: "西巷171.6皮带",
+        },
+        {
+          id: "6",
+          label: "西1.6m皮带",
+        },
+        {
+          id: "7",
+          label: "主斜井皮带",
+        },
+        {
+          id: "8",
+          label: "101皮带",
+        },
+        {
+          id: "9",
+          label: "102皮带",
+        },
+      ],
     };
   },
+  props: {
+    title: {
+      type: String,
+      default: "西大五1.6m皮带",
+    },
+    id: {
+      type: String,
+      default: "23",
+    },
+  },
   methods: {
     initWebSocket() {
       // 连接错误
@@ -174,6 +267,12 @@ export default {
         });
       });
     },
+    titleChange(val) {
+      for (let i = 1; i <= 4; i++) {
+        let temp = "chart" + i;
+        this.$refs[temp].clearData();
+      }
+    },
   },
   components: {
     Chart,
@@ -182,8 +281,9 @@ export default {
     ...mapState(["websocketIP"]),
   },
   mounted() {
+    let item = this.options.find((item) => item.label == this.titleCopy);
     this.websocket = new WebSocket(
-      `ws://${this.websocketIP}/hbase/ws/belt/${this.$route.params.id}`
+      `ws://${this.websocketIP}/hbase/ws/belt/${item.id}`
     );
     this.initWebSocket();
   },
@@ -191,12 +291,31 @@ export default {
 </script>
 
 <style scoped>
+.select-veido {
+  margin-left: 40px;
+}
+.select-veido .el-select {
+  width: 140px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+  color: #4adefe;
+  font-size: 20px;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+.select-veido >>> .el-scrollbar {
+  background: rgba(255, 255, 255, 1);
+  border: 0;
+}
 .main {
   width: 100%;
   height: 845px;
   position: relative;
   /* display: flex; */
-   background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
     linear-gradient(
       to top,
       rgba(255, 255, 255, 0.4) 0%,

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

@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="testLine"
-    style="width: 400px; height: 350px;"
-  ></div>
+  <div ref="testLine" style="width: 400px; height: 350px"></div>
 </template>
 
 <script>
@@ -82,7 +79,7 @@ export default {
           text: `${this.title}`,
           padding: [5, 230],
           textStyle: {
-            color:'#4ADEFE',
+            color: "#4ADEFE",
             fontSize: 16,
             fontWeight: 400,
           },
@@ -145,21 +142,21 @@ export default {
   methods: {
     addData(data) {
       if (this.count < 30) {
-        for(let i = 0 ; i < data.length ; i++){
+        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++){
+      } 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);
+      // console.log("data", this.data);
+      // console.log("xdata", this.xData);
       this.myChart.setOption({
         xAxis: [
           {
@@ -205,6 +202,11 @@ export default {
         this.websocket.close();
       });
     },
+    clearData() {
+      this.data = new Array(30).fill("-");
+      this.xData = new Array(30).fill("-");
+      this.count = 0;
+    },
   },
   mounted() {
     // 先画图
@@ -217,4 +219,3 @@ export default {
   },
 };
 </script>
-

src/views/transportation/transportation.vue

@@ -1,56 +1,63 @@
 <template>
-    <div>
-      <!--标签-->
-      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-        <el-tab-pane label="组态图" name="third">
-          <router-view></router-view>
-        </el-tab-pane>
-        <el-tab-pane label="系统数据" name="first">
-          <systemData v-if="activeName == 'first'"></systemData>
-        </el-tab-pane>
-        <el-tab-pane label="数据标准" name="second">
-          <dataStandard v-if="activeName == 'second'" :dataQualitySystemId=10></dataStandard>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-  
-  </template>
-
-
+  <div>
+    <!--标签-->
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="组态图" name="first">
+        <mainpage v-if="activeName == 'first'"></mainpage>
+      </el-tab-pane>
+      <el-tab-pane label="数据看板" name="second">
+        <belt  v-if="activeName == 'second'" :id="id" :title="title"></belt>
+      </el-tab-pane>
+      <el-tab-pane label="系统数据" name="third">
+        <systemData v-if="activeName == 'third'"></systemData>
+      </el-tab-pane>
+      <el-tab-pane label="数据标准" name="forth">
+        <dataStandard
+          v-if="activeName == 'forth'"
+          :dataQualitySystemId="10"
+        ></dataStandard>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
 
 <script>
-    import dataStandard from "./dataStandard/dataStandard";
-    import systemData from "./systemData";
-    export default {
-        name: "auxiliarytrans",
-        data() {
-            return {
-                activeName: 'third',
-                checkVisible: 'false'
-            };
-        },
-        mounted(){
-          this.$router.push({
-                    path: "/transportation/mainpage"
-                  })
-        },
-        methods: {
-            handleClick(tab, event) {
-                if(tab.name == "third"){
-                  this.$router.push({
-                    path: "/transportation/mainpage"
-                  })
-                }
-            }
-        },
-        components: {
-            dataStandard,
-            systemData
-        }
+import dataStandard from "./dataStandard/dataStandard";
+import systemData from "./systemData";
+import mainpage from "@/views/transportation/configImg/analysis";
+import belt from "@/views/transportation/configImg/belt";
+export default {
+  name: "auxiliarytrans",
+  data() {
+    return {
+      activeName: "first",
+      title: undefined,
+      id: undefined,
     };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log('tab :>> ', tab);
+      console.log('event :>> ', event);
+    },
+  },
+  mounted() {
+    this.$bus.$on("getBeltData", (title, id) => {
+      this.activeName = "second";
+      this.title = title;
+      this.id = id.toString();
+    });
+    this.$once("hook:beforeDestroy", () => {
+      this.$bus.$off("getBeltData");
+    });
+  },
+  components: {
+    dataStandard,
+    systemData,
+    mainpage,
+    belt,
+  },
+};
 </script>
 
-
-<style scoped>
-
-</style>
+<style scoped></style>