319 lines
7.8 KiB
Vue
319 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<div id="div1" style="height: 700px;width: 100%">
|
|||
|
|
<dv-border-box-11 title="库位信息化看板" style="background-color: black;width: 100%">
|
|||
|
|
<div class="div2">当前时间: {{ currentTime }} 周{{ dayOfWeek }}
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<!-- <div id="container"></div>-->
|
|||
|
|
<div id="threeDEarth" ></div>
|
|||
|
|
<dv-border-box-8 class="grid-container" :reverse="true">
|
|||
|
|
|
|||
|
|
<dv-border-box-10 class="box10" v-for="(div, index) in divs" :key="index">
|
|||
|
|
<el-tooltip placement="top" class="item" effect="dark">
|
|||
|
|
<div slot="content">
|
|||
|
|
物料代码：{{ div.code }}<br/>
|
|||
|
|
物料名称：{{ div.code }}<br/>
|
|||
|
|
库存数量：{{ 0 }}
|
|||
|
|
</div>
|
|||
|
|
<el-button style="background-color:#AFEEEE;height: 80px;width:180px;margin: 10px">
|
|||
|
|
库位：{{ div.code }}<br/>
|
|||
|
|
</el-button>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</dv-border-box-10>
|
|||
|
|
</dv-border-box-8>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="div3" style="float: left;">
|
|||
|
|
|
|||
|
|
<dv-border-box-8 :reverse="true" style="margin-left: 20px;margin-top: 60px;height: 320px;width: 98%;">
|
|||
|
|
|
|||
|
|
<div style="padding-top:5px ">
|
|||
|
|
<span style="margin-left:10px;font-size: 18px;color: #1F5FAA;">
|
|||
|
|
<i class="el-icon-monitor"></i>
|
|||
|
|
</span>
|
|||
|
|
<span style="font-size: 16px;color: #97DEFF;font-weight: bold">
|
|||
|
|
任务列表
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<dv-scroll-board
|
|||
|
|
:config="this.config2"
|
|||
|
|
style="width: 365px; height: 280px;margin-left:10px;"/>
|
|||
|
|
</dv-border-box-8>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="div4" style="float: left;">
|
|||
|
|
<dv-border-box-8 :reverse="true" style="margin-left: 20px;margin-top: 20px;height: 280px;width: 100%;">
|
|||
|
|
<div id="main" style="width: 365px; height: 280px"></div>
|
|||
|
|
</dv-border-box-8>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="div5">
|
|||
|
|
<el-pagination
|
|||
|
|
background
|
|||
|
|
layout="prev, pager, next"
|
|||
|
|
@current-change="handleCurrentClick"
|
|||
|
|
:current-page="currentPage"
|
|||
|
|
:page-size="pageSize"
|
|||
|
|
:total="total">
|
|||
|
|
</el-pagination>
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-11>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from 'echarts';
|
|||
|
|
import moment from "moment";
|
|||
|
|
import crudPoint from "@/api/point";
|
|||
|
|
import crudAgvTask from "@/api/agvTask"
|
|||
|
|
import CRUD from "@crud/crud";
|
|||
|
|
import 'echarts-gl';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
total: 0,
|
|||
|
|
pageSize: 25,
|
|||
|
|
currentPage: 1,
|
|||
|
|
currentIndex: 0,
|
|||
|
|
intervalId: null,
|
|||
|
|
currentTime: '',
|
|||
|
|
dayOfWeek: '',
|
|||
|
|
divs: [],
|
|||
|
|
collection: [],
|
|||
|
|
config: {//组件的配置数据
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
name: '南阳',
|
|||
|
|
value: 167
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '周口',
|
|||
|
|
value: 67
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '漯河',
|
|||
|
|
value: 123
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '郑州',
|
|||
|
|
value: 55
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '西峡',
|
|||
|
|
value: 98
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
config2: {
|
|||
|
|
header: ['任务号', '容器码', '时间'],
|
|||
|
|
headerHeight: 25,
|
|||
|
|
data: [],
|
|||
|
|
index: true,
|
|||
|
|
columnWidth: [50, 80, 80, 150],
|
|||
|
|
align: ['center'],
|
|||
|
|
carousel: 'page',
|
|||
|
|
rowNum: 8,
|
|||
|
|
indexHeader: '序号'
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
//计算分多少页码
|
|||
|
|
collectionLength() {
|
|||
|
|
return Math.ceil(this.total / this.pageSize)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//销毁前关闭计时器
|
|||
|
|
beforeDestroy() {
|
|||
|
|
this.clearTimer()
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
//初始化
|
|||
|
|
setInterval(this.updateTime, 1000);//自动读秒
|
|||
|
|
this.getInit()//树状图
|
|||
|
|
this.queryAgvTaskInfo();//AGV任务列表
|
|||
|
|
this.queryListInfo(this.currentPage, this.pageSize)//库位图
|
|||
|
|
this.intervalId = setInterval(this.printNextItem, 5000);//定时分页调用
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
updateTime() {
|
|||
|
|
this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss');
|
|||
|
|
let weekMap = {
|
|||
|
|
1: "一",
|
|||
|
|
2: "二",
|
|||
|
|
3: '三',
|
|||
|
|
4: "四",
|
|||
|
|
5: "五",
|
|||
|
|
6: "六",
|
|||
|
|
0: "日",
|
|||
|
|
};
|
|||
|
|
this.dayOfWeek = weekMap[moment().day()];
|
|||
|
|
},
|
|||
|
|
//界面显示
|
|||
|
|
getInit() {
|
|||
|
|
var chartDom = document.getElementById("main")
|
|||
|
|
var myChart = echarts.init(chartDom);
|
|||
|
|
var option;
|
|||
|
|
option = {
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|||
|
|
axisLabel: {
|
|||
|
|
color: 'white' // 修改X轴字体颜色为红色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
color: 'white' // 修改X轴字体颜色为红色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
|||
|
|
type: 'bar',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#4675C0'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
option && myChart.setOption(option);
|
|||
|
|
},
|
|||
|
|
//任务列表
|
|||
|
|
queryAgvTaskInfo() {
|
|||
|
|
crudAgvTask.queryAgvTaskInfo().then(res => {
|
|||
|
|
const cf = this.config2
|
|||
|
|
cf.data = res.data
|
|||
|
|
this.config2 = null;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.config2 = cf
|
|||
|
|
}, 500)
|
|||
|
|
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.crud.notify('数据加载失败！', CRUD.NOTIFICATION_TYPE.ERROR);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//库位图
|
|||
|
|
queryListInfo(currentPage, pageSize) {
|
|||
|
|
const CurrentPage = {currentPage: currentPage, pageSize: pageSize}
|
|||
|
|
crudPoint.queryPointInfo(CurrentPage).then(res => {
|
|||
|
|
this.total = Number(res.data.total)
|
|||
|
|
this.divs = res.data.data
|
|||
|
|
//把页数放入集合
|
|||
|
|
for (let i = 1; i <= this.collectionLength; i++) {
|
|||
|
|
this.collection.push(i)
|
|||
|
|
}
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.crud.notify('数据加载失败！', CRUD.NOTIFICATION_TYPE.ERROR);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
printNextItem() {
|
|||
|
|
|
|||
|
|
if (this.total > 0 && this.collection.length > 0) {
|
|||
|
|
if (this.currentIndex < this.collection.length - 1) {
|
|||
|
|
this.currentIndex++;
|
|||
|
|
this.queryListInfo(this.collection[this.currentIndex], this.pageSize);
|
|||
|
|
this.handleCurrentChange(this.collection[this.currentIndex])
|
|||
|
|
} else {
|
|||
|
|
this.currentIndex = 0; // 循环到集合的末尾时，重新开始
|
|||
|
|
this.queryListInfo(this.collection[this.currentIndex], this.pageSize);
|
|||
|
|
this.handleCurrentChange(this.collection[this.currentIndex])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
autoGrid(total, page) {
|
|||
|
|
//手动生成库位图
|
|||
|
|
const start = ((page - 1) * this.pageSize) + 1;
|
|||
|
|
const end = start + this.pageSize;//个数
|
|||
|
|
this.divs = [];
|
|||
|
|
for (let i = start; i <= end; i++) {
|
|||
|
|
const newItem = `Item ${+i}`;
|
|||
|
|
this.$set(this.divs, this.divs.length, newItem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
handleCurrentChange(newPage) {
|
|||
|
|
this.currentPage = newPage;
|
|||
|
|
},
|
|||
|
|
handleCurrentClick(newPage) {
|
|||
|
|
this.queryListInfo(newPage, this.pageSize)
|
|||
|
|
},
|
|||
|
|
clearTimer() {
|
|||
|
|
if (this.intervalId) {
|
|||
|
|
clearInterval(this.intervalId);
|
|||
|
|
this.intervalId = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.grid-container {
|
|||
|
|
position: relative;
|
|||
|
|
float: left;
|
|||
|
|
height: 620px;
|
|||
|
|
margin-top: 60px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
padding-left: 20px;
|
|||
|
|
padding-top: 10px;
|
|||
|
|
width: 72%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box10 {
|
|||
|
|
float: left;
|
|||
|
|
height: 100px;
|
|||
|
|
width: 200px;
|
|||
|
|
margin: 5px;
|
|||
|
|
background-color: #E6E6FA;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.div2 {
|
|||
|
|
color: white;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 81%;
|
|||
|
|
top: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.div5 {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 640px;
|
|||
|
|
left: 30%;
|
|||
|
|
}
|
|||
|
|
#container {
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 79%;
|
|||
|
|
top: 34px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#threeDEarth {
|
|||
|
|
/* width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 79%;
|
|||
|
|
top: 34px;
|
|||
|
|
border: 1px solid red;*/
|
|||
|
|
}
|
|||
|
|
</style>
|