384 lines
9.6 KiB
Vue
384 lines
9.6 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">
|
|
<div style="display: flex; align-items: center;">
|
|
|
|
|
|
<img :src="imageUrl" style="weight: 16px;height: 16px;" alt="Logo" v-if="msg">
|
|
<div style="flex-grow: 1; overflow: hidden;">
|
|
<vue-marquee
|
|
:speed="10"
|
|
:delayTime="500"
|
|
:mouseover="true"
|
|
color="white"
|
|
direction="left"
|
|
>
|
|
|
|
<span style="font-size: 18px;font-weight: bold">{{ msg }}</span>
|
|
</vue-marquee>
|
|
</div>
|
|
|
|
</div>
|
|
<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';
|
|
import VueMarquee from 'aring-vue-marquee';
|
|
import stockUrl from "@/api/stock";
|
|
|
|
export default {
|
|
name: 'DeptData',
|
|
components: {
|
|
VueMarquee
|
|
},
|
|
data() {
|
|
return {
|
|
msg: '',
|
|
imageUrl: require("@/assets/images/igw-l-news-noticewhite.png"),
|
|
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);//定时分页调用
|
|
this.stockMsg();
|
|
this.initWebSocket();
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
initWebSocket() {
|
|
const wsUri = (process.env.VUE_APP_WS_API === '/' ? '/' : (process.env.VUE_APP_WS_API + '/')) + 'webSocket/stock'
|
|
this.websock = new WebSocket(wsUri)
|
|
this.websock.onerror = this.webSocketOnError
|
|
this.websock.onmessage = this.webSocketOnMessage
|
|
},
|
|
webSocketOnError(e) {
|
|
this.$notify({
|
|
title: 'WebSocket连接发生错误',
|
|
type: 'error',
|
|
duration: 0
|
|
})
|
|
}, webSocketOnMessage(e) {
|
|
const data = JSON.parse(e.data)
|
|
if (data.msgType === 'INFO') {
|
|
this.msg = data.msg
|
|
} else if (data.msgType === 'ERROR') {
|
|
this.$notify({
|
|
title: '',
|
|
message: data.msg,
|
|
dangerouslyUseHTMLString: true,
|
|
type: 'error',
|
|
duration: 0
|
|
})
|
|
}
|
|
},
|
|
webSocketSend(agentData) {
|
|
this.websock.send(agentData)
|
|
},
|
|
stockMsg() {
|
|
stockUrl.stockMsg()
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.marquee-item {
|
|
margin-right: 50px;
|
|
}
|
|
|
|
#threeDEarth {
|
|
/* width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 79%;
|
|
top: 34px;
|
|
border: 1px solid red;*/
|
|
}
|
|
</style>
|