封装tab

src/components/tab.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="data">
+    <span
+      v-for="item in list"
+      :class="value == item ? 'active' : ''"
+      @click="selectTab(item)"
+      >{{ item }}</span
+    >
+  </div>
+</template>
+<script>
+export default {
+  props: ["list", "defaultValue"],
+  data() {
+    return {
+      value: "",
+    };
+  },
+  created() {
+    this.value = this.defaultValue;
+  },
+  methods: {
+    selectTab(item) {
+      this.value = item;
+      this.$emit("input", item);
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.data {
+  position: absolute;
+  font-size: 20px;
+  font-family: "DOUYU";
+  color: #ffffff;
+  line-height: 18px;
+  display: flex;
+  right: 0;
+  top: 120px;
+  z-index: 1;
+
+  span {
+    width: 122px;
+    height: 38px;
+    margin: 10px;
+    display: block;
+    line-height: 38px;
+    text-align: center;
+    cursor: pointer;
+  }
+  .active {
+    background: linear-gradient(
+      to right,
+      rgba(33, 76, 124, 0.3) 20%,
+      rgba(152, 207, 230, 0.3) 100%,
+      rgba(33, 76, 124, 0.3) 20%
+    );
+  }
+}
+</style>

src/views/lll/NYJCD.vue

@@ -63,17 +63,8 @@
           <img src="../../assets/img/小标题栏.png" class="img" />
           <p>全厂实时电荷</p>
         </div>
-        <div class="data">
-          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
-            >年</span
-          >
-          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
-            >月</span
-          >
-          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
-            >日</span
-          >
-        </div>
+        <tab :list="arr" :defaultValue="res" v-model="selectValue"></tab>
+
         <div id="qcssdh"></div>
       </div>
       <div class="qcydl">
@@ -174,12 +165,15 @@
 import { RouterView } from "vue-router";
 import * as echarts from "echarts";
 import tpt from "../../components/tpt.vue";
+import tab from "../../components/tab.vue";
 export default {
   data() {
     return {
       res: "月",
+      arr: ["年", "月", "日"],
       click1: "",
       click2: "",
+      selectValue: "月",
       flag: false,
       option1: {
         xAxis: {
@@ -691,7 +685,7 @@ export default {
     this.defineEcharts("ljfdl", this.option3);
   },
 
-  components: { RouterView, tpt },
+  components: { RouterView, tpt, tab },
 };
 </script>
 <style lang="less" scoped>
@@ -796,36 +790,6 @@ export default {
     position: relative;
     margin-top: 56px;
 
-    .data {
-      position: absolute;
-      font-size: 20px;
-      font-family: "DOUYU";
-      color: #ffffff;
-      line-height: 18px;
-      display: flex;
-      right: 0;
-      top: 120px;
-      z-index: 1;
-
-      span {
-        width: 122px;
-        height: 38px;
-        margin: 10px;
-        display: block;
-        line-height: 38px;
-        text-align: center;
-      }
-
-      .active {
-        background: linear-gradient(
-          to right,
-          rgba(33, 76, 124, 0.3) 20%,
-          rgba(152, 207, 230, 0.3) 100%,
-          rgba(33, 76, 124, 0.3) 20%
-        );
-      }
-    }
-
     .imgBox {
       height: 93px;
       width: 1156px;

src/views/lll/NYJCS.vue

@@ -99,7 +99,7 @@
               <el-table-column prop="date2" label="出水压力" align="center"
                 ><template slot-scope="scope">
                   <span style="color: #58ff70"> {{ scope.row.date2 }}</span
-                  ><span>MP</span>
+                  ><span>Mpa</span>
                 </template>
               </el-table-column>
               <el-table-column prop="date3" label="瞬间流量" align="center"