<template>
|
<div class="m-charts labelContent">
|
<div class="chart_left">
|
<div class="title">
|
<el-icon class="icons" :size="24" color="#409EFF">
|
<TrendCharts />
|
</el-icon>
|
出入库总览
|
</div>
|
<div :style="{ height: '62vh','padding-top':'1.5vh' }" id="line-0001">
|
</div>
|
</div>
|
<div class="chart_center">
|
<div class="title">
|
<el-icon class="icons" :size="24" color="#409EFF">
|
<Checked />
|
</el-icon>
|
任务进行中
|
</div>
|
<div style="height: 62vh;padding-top:5vh;width: 96%;margin: 0px 2%;">
|
<el-table :data="tableData" style="height: 55vh;" border>
|
<el-table-column fixed prop="date" label="任务号" width="100" header-align="center"/>
|
<el-table-column prop="date" label="托盘号" width="120" header-align="center"/>
|
<el-table-column prop="date" label="任务类型" width="120" header-align="center"/>
|
<el-table-column prop="date" label="任务状态" width="95" header-align="center"/>
|
</el-table>
|
</div>
|
</div>
|
<div class="chart_right">
|
<div class="title">
|
<el-icon class="icons" :size="24" color="#409EFF">
|
<Briefcase />
|
</el-icon>
|
作业检测
|
</div>
|
<div style="height:29vh;padding-top:2vh" >
|
<div id="radar-0001" style="height: 29vh;">
|
|
</div>
|
<div id="bar-0001" style="height: 31vh;padding-top: 1vh;">
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
let echarts = require("echarts");
|
import options from "./chartOptions";
|
let $line;
|
let $radar;
|
let $bar;
|
export default {
|
mounted() {
|
$line = echarts.init(document.getElementById("line-0001"));
|
$line.setOption(this.options.line);
|
$radar = echarts.init(document.getElementById("radar-0001"));
|
$radar.setOption(this.options.radar);
|
$bar = echarts.init(document.getElementById("bar-0001"));
|
$bar.setOption(this.options.bar);
|
},
|
created() {
|
this.heigth = document.documentElement.clientHeight - 190;
|
},
|
methods: {
|
},
|
data() {
|
return {
|
options: options,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.labelContent{
|
padding-top: 3vh;
|
}
|
.m-charts {
|
display: grid;
|
grid-template-columns: 49% 30% 19%;
|
justify-content: space-between;
|
}
|
.m-charts ::v-deep(.el-tabs__content) {
|
height: calc(65vh - 15px);
|
}
|
.m-charts ::v-deep(.el-tab-pane) {
|
height: 65vh;
|
}
|
.chart_left,.chart_center,.chart_right{
|
position: relative;
|
border-radius: 10px;
|
background-color: white;
|
box-shadow: 0px 0px 10px 0px #ccc;
|
}
|
.title{
|
width: 200px;
|
height: 5vh;
|
display: flex;
|
align-items: center;
|
font-size: 1.2rem;
|
font-weight: 600;
|
position: absolute;
|
top: 0px;
|
left: 15px;
|
}
|
.icons{
|
margin-right: 5px;
|
}
|
</style>
|
|
|
