修改主运输系统的tabs

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

@@ -1,7 +1,7 @@
 <template>
   <div class="main">
     <!-- 皮带名称 -->
-    <el-row>
+    <!-- <el-row>
       <div class="select-veido">
         <el-select
           style="margin-top: 10px; width: 300px"
@@ -19,7 +19,7 @@
           </el-option>
         </el-select>
       </div>
-    </el-row>
+    </el-row> -->
     <el-row>
       <!-- 皮带图片 -->
       <el-col :sm="24" :md="12" :xl="11">
@@ -269,6 +269,9 @@ export default {
     },
     // 皮带名称下拉选框发生改变
     titleChange(val) {
+      this.clearData();
+    },
+    clearData() {
       for (let i = 1; i <= 4; i++) {
         let temp = "chart" + i;
         this.$refs[temp].clearData();

src/views/transportation/transportation.vue

@@ -1,12 +1,33 @@
 <template>
   <div>
     <!--标签-->
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+    <el-tabs
+      :stretch="true"
+      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 width="200" name="second">
+        <span slot="label">
+          <el-dropdown placement="bottom" @command="handleCommand">
+            <span ref="tabs-span" class="tabs-span"
+              >{{ title }}<i class="el-icon-arrow-down el-icon--right"></i
+            ></span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="item in options"
+                :key="item.id"
+                :command="item.label"
+              >
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </span>
+        <belt  v-if="activeName == 'second'" ref="belt" :id="id" :title="title"></belt>
       </el-tab-pane>
       <el-tab-pane label="系统数据" name="third">
         <systemData v-if="activeName == 'third'"></systemData>
@@ -31,14 +52,67 @@ export default {
   data() {
     return {
       activeName: "first",
-      title: undefined,
+      title: "西大五1.6m皮带",
       id: undefined,
+      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皮带",
+        },
+      ],
     };
   },
   methods: {
-    handleClick(tab, event) {
-      console.log('tab :>> ', tab);
-      console.log('event :>> ', event);
+    handleClick(tab, event) {},
+    handleCommand(command) {
+      this.title = command;
+      if (this.activeName != "second") {
+        this.activeName = "second";
+      } else {
+        this.$refs.belt.clearData();
+      }
+    },
+  },
+  watch: {
+    activeName(newValue, oldValue) {
+      // 监听activeName的变化
+      if (newValue == "second") {
+        this.$refs["tabs-span"].style.color = "#409EFF";
+      } else {
+        this.$refs["tabs-span"].style.color = "#FFFFFF";
+      }
     },
   },
   mounted() {
@@ -60,4 +134,14 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.tabs-span {
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+}
+.tabs-span:hover {
+  color: #409eff;
+}
+</style>