|
@@ -1,22 +1,17 @@
|
|
<template>
|
|
<template>
|
|
<moduleEnclosure title="近30天工单趋势">
|
|
<moduleEnclosure title="近30天工单趋势">
|
|
- <template v-slot:rightce>
|
|
|
|
|
|
+ <template v-slot:rightce>
|
|
<v-scroll-view :x="true" :y="false" slidingBgClassName="slidingBgClassName"
|
|
<v-scroll-view :x="true" :y="false" slidingBgClassName="slidingBgClassName"
|
|
slidingBlockClassName="slidingBlockClassName">
|
|
slidingBlockClassName="slidingBlockClassName">
|
|
<div class="tabbar">
|
|
<div class="tabbar">
|
|
- <div
|
|
|
|
- class="tab"
|
|
|
|
- :class="tabCurrent == item ? 'active' : ''"
|
|
|
|
- v-for="(item, index) in tabList"
|
|
|
|
- :key="index"
|
|
|
|
|
|
+ <div class="tab" :class="tabCurrent == item ? 'active' : ''" v-for="(item, index) in tabList" :key="index"
|
|
@click="changeTab(item)">
|
|
@click="changeTab(item)">
|
|
- {{item}}
|
|
|
|
|
|
+ {{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-scroll-view>
|
|
</v-scroll-view>
|
|
-
|
|
|
|
- </template>
|
|
|
|
- <div class="all-container">
|
|
|
|
|
|
+ </template>
|
|
|
|
+ <div class="all-container" @mouseenter="mouseenter" @mouseleave="dingshishuaxin">
|
|
<div id="workorderEcharts1" style="width: 100%; height: 100%"></div>
|
|
<div id="workorderEcharts1" style="width: 100%; height: 100%"></div>
|
|
</div>
|
|
</div>
|
|
</moduleEnclosure>
|
|
</moduleEnclosure>
|
|
@@ -42,36 +37,62 @@ export default {
|
|
},
|
|
},
|
|
|
|
|
|
mounted() {
|
|
mounted() {
|
|
- this.initData();
|
|
|
|
|
|
+ this.dingshishuaxin()
|
|
},
|
|
},
|
|
|
|
|
|
beforeUnmount() {
|
|
beforeUnmount() {
|
|
-
|
|
|
|
|
|
+ this.mouseenter();
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ watch: {
|
|
|
|
+ tabCurrent() {
|
|
|
|
+ this.mouseenter();
|
|
|
|
+ this.dingshishuaxin()
|
|
|
|
+ }
|
|
},
|
|
},
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
|
|
+ mouseenter() {
|
|
|
|
+ if (this.TimeId) {
|
|
|
|
+ clearTimeout(this.TimeId)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ dingshishuaxin() {
|
|
|
|
+ this.initData();
|
|
|
|
+ this.TimeId = setTimeout(() => {
|
|
|
|
+ this.setbiuaoji()
|
|
|
|
+ }, 10000)
|
|
|
|
+ },
|
|
getDate() {
|
|
getDate() {
|
|
const today = new Date();
|
|
const today = new Date();
|
|
const dates = [];
|
|
const dates = [];
|
|
-
|
|
|
|
for (let i = 0; i < 30; i++) {
|
|
for (let i = 0; i < 30; i++) {
|
|
const d = new Date();
|
|
const d = new Date();
|
|
d.setDate(today.getDate() - i);
|
|
d.setDate(today.getDate() - i);
|
|
dates.unshift(d.toISOString().split('T')[0].slice(5, 11));
|
|
dates.unshift(d.toISOString().split('T')[0].slice(5, 11));
|
|
}
|
|
}
|
|
-
|
|
|
|
return dates;
|
|
return dates;
|
|
},
|
|
},
|
|
|
|
|
|
|
|
+ setbiuaoji() {
|
|
|
|
+ var index = this.tabList.indexOf(this.tabCurrent)
|
|
|
|
+ if (index >= (this.tabList.length - 1)) {
|
|
|
|
+ this.tabCurrent = this.tabList[0]
|
|
|
|
+ } else {
|
|
|
|
+ this.tabCurrent = this.tabList[index + 1]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
changeTab(item) {
|
|
changeTab(item) {
|
|
this.tabCurrent = item;
|
|
this.tabCurrent = item;
|
|
- this.initEcharts();
|
|
|
|
},
|
|
},
|
|
|
|
|
|
initData() {
|
|
initData() {
|
|
getWorkorderTrend().then(res => {
|
|
getWorkorderTrend().then(res => {
|
|
this.tabList = res.data.map(o => o.lx);
|
|
this.tabList = res.data.map(o => o.lx);
|
|
- this.tabCurrent = this.tabList[0];
|
|
|
|
|
|
+ if (this.tabCurrent == "") {
|
|
|
|
+ this.setbiuaoji()
|
|
|
|
+ }
|
|
this.tableData = res.data;
|
|
this.tableData = res.data;
|
|
this.initEcharts();
|
|
this.initEcharts();
|
|
})
|
|
})
|
|
@@ -193,13 +214,12 @@ export default {
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
-
|
|
|
|
::v-deep .slidingBgClassName {
|
|
::v-deep .slidingBgClassName {
|
|
- background: rgba(0,0,0,0) !important;
|
|
|
|
|
|
+ background: rgba(0, 0, 0, 0) !important;
|
|
}
|
|
}
|
|
|
|
|
|
::v-deep .slidingBlockClassName {
|
|
::v-deep .slidingBlockClassName {
|
|
- background: rgba(0,0,0,0) !important;
|
|
|
|
|
|
+ background: rgba(0, 0, 0, 0) !important;
|
|
}
|
|
}
|
|
|
|
|
|
.all-container {
|
|
.all-container {
|
|
@@ -208,10 +228,12 @@ export default {
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
padding-top: 16px;
|
|
padding-top: 16px;
|
|
}
|
|
}
|
|
-.tabbar{
|
|
|
|
|
|
+
|
|
|
|
+.tabbar {
|
|
width: fit-content;
|
|
width: fit-content;
|
|
display: flex;
|
|
display: flex;
|
|
- .tab{
|
|
|
|
|
|
+
|
|
|
|
+ .tab {
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
width: 50px;
|
|
width: 50px;
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
@@ -222,11 +244,13 @@ export default {
|
|
margin-right: 10px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
+
|
|
&:last-child {
|
|
&:last-child {
|
|
margin-right: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .active{
|
|
|
|
|
|
+
|
|
|
|
+ .active {
|
|
border: 1px solid #153781;
|
|
border: 1px solid #153781;
|
|
color: #1a8dc8;
|
|
color: #1a8dc8;
|
|
}
|
|
}
|