120 lines
2.6 KiB
Vue
120 lines
2.6 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2023-06-01 10:47:42
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2024-01-30 15:52:49
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<el-card shadow="never" class="aui-card--fill">
|
|
<div class="echart-all">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<echart-2
|
|
class="echart-div"
|
|
ref="chartRef1"
|
|
v-if="chartVisible"
|
|
:id="'zhexian1'"
|
|
:title="'1-1半小时消耗'"
|
|
></echart-2>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<echart-2
|
|
class="echart-div"
|
|
ref="chartRef2"
|
|
v-if="chartVisible"
|
|
:id="'zhexian2'"
|
|
:title="'1-2半小时消耗'"
|
|
></echart-2>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<echart-2
|
|
class="echart-div"
|
|
ref="chartRef3"
|
|
v-if="chartVisible"
|
|
:id="'zhexian3'"
|
|
:title="'2-1半小时消耗'"
|
|
></echart-2>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<echart-2
|
|
class="echart-div"
|
|
ref="chartRef4"
|
|
v-if="chartVisible"
|
|
:id="'zhexian4'"
|
|
:title="'2-2半小时消耗'"
|
|
></echart-2>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import echart2 from "./echart2";
|
|
export default {
|
|
data() {
|
|
return {
|
|
chartVisible: false,
|
|
};
|
|
},
|
|
components: {
|
|
echart2,
|
|
},
|
|
mounted() {
|
|
this.startFun();
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.getData();
|
|
this.startFun();
|
|
},
|
|
startFun() {
|
|
const timer = setInterval(() => {
|
|
this.getData();
|
|
}, 60000);
|
|
this.$once("hook:beforeDestroy", () => {
|
|
clearInterval(timer);
|
|
});
|
|
},
|
|
getData() {
|
|
this.chartVisible = true;
|
|
for (let i = 1; i <= 4; i++) {
|
|
const params = {
|
|
location: i,
|
|
order:'desc',
|
|
orderField:'create_time',
|
|
limit: 24,
|
|
page:1
|
|
};
|
|
this.$http
|
|
.get("/code/mtBbybWeightSum/page", {
|
|
params,
|
|
})
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg);
|
|
}
|
|
const arr = res.data.list.reverse()
|
|
this.$nextTick(() => {
|
|
this.$refs["chartRef" + i].initChart(arr);
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.echart-all {
|
|
margin-left: -8px;
|
|
}
|
|
.echart-div {
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
padding-top: 10px;
|
|
}
|
|
</style>
|