Explorar o código

Merge branch 'moss_dev' into develop

* moss_dev:
  feat:工单大屏-工单趋势的工单类型

# Conflicts:
#	src/views/bigViews/dataView1/components/workOrderTrend.vue
Moss hai 1 ano
pai
achega
9d05804dd7
Modificáronse 1 ficheiros con 38 adicións e 40 borrados
  1. 38 40
      src/views/bigViews/dataView1/components/workOrderTrend.vue

+ 38 - 40
src/views/bigViews/dataView1/components/workOrderTrend.vue

@@ -1,17 +1,12 @@
 <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>
-    </template>
-    <div class="all-container" @mouseenter="mouseenter" @mouseleave="dingshishuaxin">
+	  <template v-slot:rightce>
+      <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">
       <div id="workorderEcharts1" style="width: 100%; height: 100%"></div>
     </div>
   </moduleEnclosure>
@@ -84,7 +79,8 @@ export default {
     },
 
     changeTab(item) {
-      this.tabCurrent = item;
+      this.tabCurrent = item.name;
+      this.initEcharts();
     },
 
     initData() {
@@ -219,45 +215,47 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .slidingBgClassName {
-  background: rgba(0, 0, 0, 0) !important;
-}
-
-::v-deep .slidingBlockClassName {
-  background: rgba(0, 0, 0, 0) !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>