Moss 1 年間 前
コミット
416531b17b

+ 7 - 1
src/components/moduleEnclosure.vue

@@ -10,7 +10,7 @@
             />
             <span>{{ title }}</span>
           </div>
-          <div>
+          <div class="am-moduleEnclosureTitle-right">
             <slot name="rightce" />
           </div>
         </div>
@@ -68,6 +68,12 @@ export default {
   flex-shrink: 0;
   margin-right: 20px;
 }
+.am-moduleEnclosureTitle-right {
+  width: 0;
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
 .am-moduleEnclosureTitle {
   width: 100%;
   height: 22px;

+ 26 - 10
src/views/bigViews/dataView1/components/workOrderTrend.vue

@@ -1,16 +1,20 @@
 <template>
   <moduleEnclosure title="近30天工单趋势">
 	  <template v-slot:rightce>
-	    <div class="tabbar">
-	    	<div
-          class="tab"
-          :class="tabCurrent == item ? 'active' : ''"
-          v-for="(item, index) in tabList"
-          :key="index"
-          @click="changeTab(item)">
-          {{item}}
+      <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>
-	    </div>
+      </v-scroll-view>
+	    
 	  </template>
 		<div class="all-container">
       <div id="workorderEcharts1" style="width: 100%; height: 100%"></div>
@@ -19,6 +23,7 @@
 </template>
 
 <script>
+import vScrollView from 'v-scroll-view'
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
 import * as echarts from 'echarts';
 import { getWorkorderTrend } from '@/api/bigView.js';
@@ -26,6 +31,7 @@ import { getWorkorderTrend } from '@/api/bigView.js';
 export default {
   components: {
     moduleEnclosure,
+    vScrollView
   },
   data() {
     return {
@@ -187,6 +193,15 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+::v-deep .slidingBgClassName {
+  background: #082570 !important;
+}
+
+::v-deep .slidingBlockClassName {
+  background: #81bcff !important;
+}
+
 .all-container {
   width: 100%;
   height: 100%;
@@ -194,9 +209,10 @@ export default {
   padding-top: 16px;
 }
 .tabbar{
+  width: fit-content;
   display: flex;
-  flex-wrap: wrap;
   .tab{
+    flex-shrink: 0;
     width: 50px;
     color: #ffffff;
     border: 1px solid #254280;