|
@@ -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>
|
|
@@ -22,6 +17,7 @@ import vScrollView from 'v-scroll-view'
|
|
|
import moduleEnclosure from '@/components/moduleEnclosure.vue';
|
|
|
import * as echarts from 'echarts';
|
|
|
import { getWorkorderTrend } from '@/api/bigView.js';
|
|
|
+import { csize } from '@/utils/const.js';
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
@@ -84,7 +80,8 @@ export default {
|
|
|
},
|
|
|
|
|
|
changeTab(item) {
|
|
|
- this.tabCurrent = item;
|
|
|
+ this.tabCurrent = item.name;
|
|
|
+ this.initEcharts();
|
|
|
},
|
|
|
|
|
|
initData() {
|
|
@@ -136,26 +133,35 @@ export default {
|
|
|
right: '10',
|
|
|
data: ['已完工', '未完工'],
|
|
|
textStyle: {
|
|
|
- color: '#ffffff',
|
|
|
+ color: '#A9BBCC'
|
|
|
},
|
|
|
},
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
+ // grid: {
|
|
|
+ // left: '3%',
|
|
|
+ // right: '4%',
|
|
|
+ // bottom: '3%',
|
|
|
+ // containLabel: true
|
|
|
+ // },
|
|
|
toolbox: {
|
|
|
// feature: {
|
|
|
// saveAsImage: {}
|
|
|
// }
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ x: csize(40),
|
|
|
+ y: csize(40),
|
|
|
+ x2: csize(20),
|
|
|
+ y2: csize(20),
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: csize(12),
|
|
|
+ },
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: '#ffffff', // x轴文字颜色
|
|
|
+ color: '#8AB1DC', // x轴文字颜色
|
|
|
}
|
|
|
},
|
|
|
splitLine: {
|
|
@@ -174,9 +180,12 @@ export default {
|
|
|
nameLocation: "start",
|
|
|
// align: 'right'
|
|
|
},
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: csize(12),
|
|
|
+ },
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: '#ffffff', // y轴文字颜色
|
|
|
+ color: '#8AB1DC', // y轴文字颜色
|
|
|
}
|
|
|
},
|
|
|
splitLine: {
|
|
@@ -219,45 +228,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>
|