feat：工单大屏-工单趋势的工单类型

src/views/bigViews/dataView1/components/workOrderTrend.vue

@@ -1,19 +1,9 @@
 <template>
   <moduleEnclosure title="近30天工单趋势">
 	  <template v-slot:rightce>
-      <v-scroll-view :x="true" :y="false" slidingBgClassName="slidingBgClassName"
-        slidingBlockClassName="slidingBlockClassName">
-        <div class="tabbar">
-          <div
-            class="tab"
-            :class="tabCurrent == item ? 'active' : ''"
-            v-for="(item, index) in tabList"
-            :key="index"
-            @click="changeTab(item)">
-            {{item}}
-          </div>
-        </div>
-      </v-scroll-view>
+      <el-tabs v-model="tabCurrent" type="card" @tab-click="changeTab">
+        <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item" :name="item"></el-tab-pane>
+      </el-tabs>
 	    
 	  </template>
 		<div class="all-container">
@@ -64,7 +54,7 @@ export default {
     },
 
     changeTab(item) {
-      this.tabCurrent = item;
+      this.tabCurrent = item.name;
       this.initEcharts();
     },
 
@@ -194,41 +184,46 @@ export default {
 
 <style scoped lang="scss">
 
-::v-deep .slidingBgClassName {
-  background: #082570 !important;
-}
-
-::v-deep .slidingBlockClassName {
-  background: #81bcff !important;
-}
-
-.all-container {
+::v-deep .el-tabs {
   width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  padding-top: 16px;
-}
-.tabbar{
-  width: fit-content;
-  display: flex;
-  .tab{
-    flex-shrink: 0;
+  .el-tabs__header {
+    margin-bottom: 0;
+    border-bottom: none;
+  }
+  .el-tabs__nav {
+    border: none;
+  }
+  .el-tabs__nav-prev {
+    line-height: 30px;
+  }
+  .el-tabs__nav-next {
+    line-height: 30px;
+  }
+  .el-tabs__item {
     width: 50px;
+    height: 30px;
+    line-height: 30px;
     color: #ffffff;
-    border: 1px solid #254280;
+    border: 1px solid #254280 !important;
     font-size: 12px;
     font-weight: bold;
-    padding: 2px 0;
     margin-right: 10px;
+    padding: 0 !important;
     text-align: center;
-    cursor: pointer;
     &:last-child {
       margin-right: 0;
     }
+    &.is-active {
+      border: 1px solid #153781 !important;
+      color: #1a8dc8;
+    }
   }
-  .active{
-    border: 1px solid #153781;
-    color: #1a8dc8;
-  }
+}
+
+.all-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 16px;
 }
 </style>