|
@@ -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;
|