<template>
|
<div class="demonstration">
|
<img src="./assets/demonstration/bgImg.png" class="bgImg" alt="">
|
<!-- 标题 -->
|
<div class="title" @click="fullScreen">
|
<img src="./assets/demonstration/titleImg.png" alt="">
|
<div class="titleContent">
|
广州西门子能源变压器有限公司配变工厂
|
</div>
|
</div>
|
<!-- 左边标题 -->
|
<div class="aside">
|
<img src="./assets/demonstration/left.png" alt="">
|
<div class="asideContent">
|
{{currentTime}}
|
</div>
|
</div>
|
<!-- 右边标题 -->
|
<div class="aside right">
|
<img src="./assets/demonstration/right.png" alt="">
|
<div class="asideContent">
|
{{weekDay}}
|
</div>
|
</div>
|
<!-- 主题内容区域 -->
|
<div class="content">
|
<img src="./assets/demonstration/borderImg.png" alt="">
|
<!-- 标题 -->
|
<div class="insertTitle">
|
<img src="./assets/demonstration/insertTitle.png" alt="">
|
<div class="insertContent">
|
<span>智能仓库2d动画展示</span>
|
</div>
|
</div>
|
<!-- 左边上办公点 -->
|
<div class="workLeft">
|
<img src="./assets/demonstration/out.png" alt="">
|
</div>
|
<!-- 人 -->
|
<div class="people">
|
<img src="./assets/demonstration/pepple.png" alt="">
|
</div>
|
<!-- 左边滑带 -->
|
<div class="load">
|
<img src="./assets/demonstration/load.png" alt="">
|
</div>
|
<!-- RGV -->
|
<div class="rgv" :style="{top:rgv2}">
|
<img src="./assets/demonstration/rgv.png" alt="">
|
</div>
|
<!-- 左边下办公点 -->
|
<div class="workLeft" style="top: 36%;">
|
<img src="./assets/demonstration/out.png" alt="">
|
</div>
|
<div class="people peopleLeft">
|
<img src="./assets/demonstration/pepple.png" alt="">
|
</div>
|
<!-- 带键盘的操作 -->
|
<div class="mouse">
|
<img src="./assets/demonstration/mouse.png" alt="">
|
</div>
|
<!-- 一根轨道 -->
|
<div class="gd">
|
<img src="./assets/demonstration/gd.png" alt="">
|
</div>
|
<!-- 人 -->
|
<div class="people peopleLeft2">
|
<img src="./assets/demonstration/pepple.png" alt="">
|
</div>
|
<!-- 左边叉车 -->
|
<div class="cc">
|
<img src="./assets/demonstration/cc.png" alt="">
|
</div>
|
<!-- 叉车 -->
|
<div class="cc2">
|
<img src="./assets/demonstration/cc2.png" alt="">
|
</div>
|
<div class="cc2 leftcc">
|
<img src="./assets/demonstration/cc2.png" alt="">
|
</div>
|
<!-- 第一排货架 -->
|
<div class="hj">
|
<!-- 左边货架 -->
|
<div class="hj_left">
|
<img src="./assets/demonstration/hjk.png" alt="">
|
</div>
|
<!-- 中间轨道 -->
|
<div class="hj_center">
|
<img src="./assets/demonstration/gd1.png" alt="">
|
</div>
|
<!-- 右边货架 -->
|
<div class="hj_right">
|
<img src="./assets/demonstration/hjk.png" alt="">
|
</div>
|
</div>
|
<!-- 堆垛机轨道 -->
|
<div class="ddj_gd">
|
<div></div>
|
<div></div>
|
</div>
|
<!-- 堆垛机一号 -->
|
<div class="ddj" :style="{left:srm2}">
|
<img src="./assets/demonstration/ddj.png" alt="">
|
</div>
|
<!-- 第二排货架 -->
|
<div class="hj hj2">
|
<!-- 左边货架 -->
|
<div class="hj_left">
|
<img src="./assets/demonstration/hjk.png" alt="">
|
</div>
|
<!-- 中间轨道 -->
|
<div class="hj_center">
|
<img src="./assets/demonstration/gd1.png" alt="">
|
</div>
|
<!-- 右边货架 -->
|
<div class="hj_right">
|
<img src="./assets/demonstration/hjk.png" alt="">
|
</div>
|
</div>
|
<!-- 第三排货架 -->
|
<div class="hj hj3">
|
<!-- 左边货架 -->
|
<div class="hj_left">
|
<img src="./assets/demonstration/hjk.png" alt="">
|
</div>
|
<!-- 中间轨道 -->
|
<div class="hj_center">
|
<img src="./assets/demonstration/gd2.png" alt="">
|
</div>
|
<!-- 右边货架 -->
|
<div class="hj_right">
|
<img src="./assets/demonstration/hjk.png" alt="">
|
</div>
|
</div>
|
<!-- 堆垛机轨道 -->
|
<div class="ddj_gd ddj_gd2">
|
<div></div>
|
<div></div>
|
</div>
|
<!-- 堆垛机二号 -->
|
<div class="ddj ddj2" :style="{left:srm1}">
|
<img src="./assets/demonstration/ddj.png" alt="">
|
</div>
|
<!-- 第四排货架 -->
|
<div class="hj hj2 hj4">
|
<!-- 左边货架 -->
|
<div class="hj_left">
|
<img src="./assets/demonstration/hjk.png" alt="">
|
</div>
|
<!-- 中间轨道 -->
|
<div class="hj_center">
|
<img src="./assets/demonstration/gd2.png" alt="">
|
</div>
|
<!-- 右边货架 -->
|
<div class="hj_right">
|
<img src="./assets/demonstration/hjk.png" alt="">
|
</div>
|
</div>
|
<!-- 右边滑带 -->
|
<div class="load load2">
|
<img src="./assets/demonstration/load.png" alt="">
|
</div>
|
<!-- RGV -->
|
<div class="rgv rgv2" :style="{top:rgv1}">
|
<img src="./assets/demonstration/rgv.png" alt="">
|
</div>
|
<!-- 右边办公点1 -->
|
<div class="workLeft worrkRight">
|
<img src="./assets/demonstration/out.png" alt="">
|
</div>
|
<!-- 物料1 -->
|
<div class="mat">
|
<img src="./assets/demonstration/mat.png" alt="">
|
</div>
|
<!-- 右边办公点2 -->
|
<div class="workLeft worrkRight worrkRight2">
|
<img src="./assets/demonstration/out.png" alt="">
|
</div>
|
<!-- 物料2 -->
|
<div class="mat mat2">
|
<img src="./assets/demonstration/mat.png" alt="">
|
</div>
|
<!-- 带键盘的操作 -->
|
<div class="mouse mouse2">
|
<img src="./assets/demonstration/mouse.png" alt="">
|
</div>
|
<!-- 左边框 -->
|
<div class="k_left">
|
<img src="./assets/demonstration/k_left.png" alt="">
|
</div>
|
<!-- 叉车人合一 -->
|
<div class="ccr">
|
<img src="./assets/demonstration/ccr.png" alt="">
|
</div>
|
<!-- 有边框 -->
|
<div class="k_right">
|
<img src="./assets/demonstration/k_right.png" alt="">
|
</div>
|
<!-- 叉车人合一 -->
|
<div class="ccr ccr2">
|
<img src="./assets/demonstration/ccr.png" alt="">
|
</div>
|
</div>
|
<!-- 出库 -->
|
<div class="outer">
|
<img src="./assets/demonstration/screen.png" alt="">
|
<!-- 当日出库 -->
|
<div class="outerContent">当日出库</div>
|
<!-- 数量 -->
|
<div class="count">{{outerNum}}</div>
|
</div>
|
<!-- 入库 -->
|
<div class="outer inner">
|
<img src="./assets/demonstration/screen.png" alt="">
|
<!-- 当日出库 -->
|
<div class="outerContent">当日入库</div>
|
<!-- 数量 -->
|
<div class="count">{{innerNum}}</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
// import request from '@/utils/request'
|
export default {
|
data() {
|
return {
|
currentTime: '', //当前系统时间
|
rgv1: '', //rgv1的位置
|
rgv2: '', //rgv2的位置
|
srm1: '', //堆垛机一号位置
|
srm2: '', //堆垛机二号位置
|
val: 1000,
|
outerNum: 12345, //出库数量
|
innerNum: 23355 //入库数量
|
}
|
},
|
created() {
|
//当前时间
|
this.setCurrentTime()
|
//获取设备位置
|
this.everyPosition()
|
},
|
computed: {
|
weekDay() {
|
let day = new Date().getDay()
|
switch (day) {
|
case 0:
|
return '星期天'
|
break
|
case 1:
|
return '星期一'
|
break
|
case 2:
|
return '星期二'
|
break
|
case 3:
|
return '星期三'
|
break
|
case 4:
|
return '星期四'
|
break
|
case 5:
|
return '星期五'
|
break
|
case 6:
|
return '星期六'
|
break
|
}
|
}
|
},
|
methods: {
|
//当前时间
|
formatTime() {
|
let date = new Date()
|
//获取年份
|
let year = date.getFullYear()
|
//获取月份
|
let month = date.getMonth() + 1
|
month = month >= 10 ? month : '0' + month
|
//获取天数
|
let day = date.getDate()
|
day = day >= 10 ? day : '0' + day
|
//获取小时
|
let hour = date.getHours()
|
hour = hour >= 10 ? hour : '0' + hour
|
//获取分钟
|
let min = date.getMinutes()
|
min = min >= 10 ? min : '0' + min
|
//获取秒
|
let second = date.getSeconds()
|
second = second >= 10 ? second : '0' + second
|
//拼接时间字符串
|
this.currentTime = `${year}-${month}-${day} ${hour}:${min}:${second}`
|
},
|
//500ms刷新一次
|
setCurrentTime() {
|
setInterval(this.formatTime, 500)
|
},
|
//获取rgv位置
|
getPositionList() {
|
// const url = '';
|
// const params = {};
|
// this.common.ajax(url,params,res=>{
|
// if(res.result) {
|
// this.rgv1 = this.getRgvPosition(res.result.rgv1,434,17461,60.5,14.3);
|
// this.rgv2 = this.getRgvPosition(res.result.rgv2,520,17519,63.5,14.3);
|
// this.srm1 = this.getSrmPosition(res.restult.srm1,1488,40819,14.3,78.8);
|
// this.srm2 = this.getSrmPosition(res.restult.srm1,1511,39977,14.3,78.8);
|
// this.outerNum = res.result.exitTaskQty;
|
// this.innerNum = res.result.entryTaskQty;
|
// }else {
|
// the.$message.error(res.Msg);
|
// }
|
// })
|
|
const url = '/api/task/getPosition'
|
const params = {}
|
var callback = res => {
|
if (res.result === true) {
|
this.rgv1 = this.getRgvPosition(res.data[0], 434, 17461, 14.3, 60.5)
|
var num = parseInt(res.data[1])
|
if (res.data[1] > 9800 && res.data[1] < 12000) {
|
num += 400
|
}
|
this.rgv2 = this.getRgvPosition(num, 520, 17519, 14.3, 63.5)
|
this.srm1 = this.getSrmPosition(res.data[2], 1488, 42306, 14.5, 78.8)
|
var num2 = parseInt(res.data[3])
|
if (res.data[3] > 3041 && res.data[3] < 13611) {
|
num2 += 600
|
}
|
console.log(res.data[3])
|
this.srm2 = this.getSrmPosition(num2, 1511, 41469, 14.3, 78.8)
|
this.outerNum = res.data[5]
|
this.innerNum = res.data[4]
|
} else {
|
return this.$message.error('获取失败')
|
}
|
}
|
this.common.ajax(url, params, callback, true)
|
},
|
getPositionList2() {
|
// const url = '';
|
// const params = {};
|
// this.common.ajax(url,params,res=>{
|
// if(res.result) {
|
// this.rgv1 = this.getRgvPosition(res.result.rgv1,434,17461,60.5,14.3);
|
// this.rgv2 = this.getRgvPosition(res.result.rgv2,520,17519,63.5,14.3);
|
// this.srm1 = this.getSrmPosition(res.restult.srm1,1488,40819,14.3,78.8);
|
// this.srm2 = this.getSrmPosition(res.restult.srm1,1511,39977,14.3,78.8);
|
// this.outerNum = res.result.exitTaskQty;
|
// this.innerNum = res.result.entryTaskQty;
|
// }else {
|
// the.$message.error(res.Msg);
|
// }
|
// })
|
|
const url = '/api/task/getPosition'
|
const params = {}
|
var callback = res => {
|
if (res.result === true) {
|
this.rgv1 = this.getRgvPosition(res.data[0], 434, 17461, 14.3, 60.5)
|
var num = parseInt(res.data[1])
|
if (res.data[1] > 9800 && res.data[1] < 12000) {
|
num += 400
|
}
|
this.rgv2 = this.getRgvPosition(num, 520, 17519, 14.3, 63.5)
|
this.srm1 = this.getSrmPosition(res.data[2], 1488, 42306, 14.5, 78.8)
|
var num2 = parseInt(res.data[3])
|
if (res.data[3] > 3041 && res.data[3] < 13611) {
|
num2 += 600
|
}
|
console.log(res.data[3])
|
this.srm2 = this.getSrmPosition(num2, 1511, 41469, 14.3, 78.8)
|
this.outerNum = res.data[5]
|
this.innerNum = res.data[4]
|
} else {
|
return this.$message.error('获取失败')
|
}
|
}
|
this.common.ajax(url, params, callback, false)
|
},
|
//每三秒获取一下设备位置
|
everyPosition() {
|
setInterval(this.getPositionList, 3000)
|
console.log(this.val)
|
},
|
//rgv的位置计算
|
getRgvPosition(current, mins, maxs, maxp, minp) {
|
if (current <= mins) {
|
return minp + '%'
|
} else if (current >= maxs) {
|
return maxp + '%'
|
} else {
|
return (current - mins) * (maxp - minp) / (maxs - mins) + minp + '%'
|
}
|
},
|
//堆垛机位置计算
|
getSrmPosition(current, mins, maxs, minp, maxp) {
|
if (current <= mins) {
|
return minp + '%'
|
} else if (current >= maxs) {
|
return maxp + '%'
|
} else {
|
return (current - mins) * (maxp - minp) / (maxs - mins) + minp + '%'
|
}
|
},
|
//全屏展示
|
fullScreen() {
|
this.$router.push('/demonstration')
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.demonstration {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
.bgImg {
|
width: 100%;
|
}
|
.aside {
|
position: absolute;
|
width: 21%;
|
left: 1.5%;
|
top: 10px;
|
img {
|
width: 100%;
|
}
|
.asideContent {
|
position: absolute;
|
width: 100%;
|
font-size: 15px;
|
top: 10%;
|
padding-left: 5%;
|
box-sizing: border-box;
|
color: #00eaff;
|
font-weight: bold;
|
}
|
}
|
.right {
|
left: 77.5%;
|
.asideContent {
|
padding-left: 0;
|
text-align: center;
|
}
|
}
|
.title {
|
position: absolute;
|
width: 58%;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
img {
|
width: 100%;
|
}
|
.titleContent {
|
position: absolute;
|
width: 100%;
|
left: 0;
|
top: 15%;
|
font-size: 20px;
|
font-weight: 900;
|
color: #00eaff;
|
text-align: center;
|
}
|
}
|
.content {
|
position: absolute;
|
width: 96.8%;
|
left: 50%;
|
top: 8%;
|
transform: translateX(-50%);
|
img {
|
width: 100%;
|
}
|
.insertTitle {
|
position: absolute;
|
width: 13.5%;
|
left: 1%;
|
top: 2%;
|
img {
|
width: 100%;
|
}
|
.insertContent {
|
position: absolute;
|
width: 65%;
|
height: 90%;
|
left: 0;
|
top: 0;
|
text-align: center;
|
color: #00eaff;
|
font-size: 12px;
|
font-weight: bold;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
}
|
.workLeft {
|
position: absolute;
|
transform: scale(1, 0.9);
|
width: 9%;
|
left: 2%;
|
top: 14.3%;
|
img {
|
width: 100%;
|
}
|
}
|
.people {
|
position: absolute;
|
width: 1.5%;
|
left: 6%;
|
top: 12%;
|
z-index: 10;
|
transform: rotate(-180deg);
|
img {
|
width: 100;
|
}
|
}
|
.load {
|
position: absolute;
|
width: 3.7%;
|
top: 10%;
|
left: 10.5%;
|
img {
|
width: 100%;
|
}
|
}
|
// rgv 二号 左右
|
.rgv {
|
position: absolute;
|
width: 2.5%;
|
left: 11.2%;
|
top: 63.5%; //14.3%
|
transition: all 4s;
|
img {
|
width: 100%;
|
}
|
}
|
.peopleLeft {
|
transform: rotate(0deg);
|
left: 3%;
|
top: 47%;
|
}
|
.mouse {
|
position: absolute;
|
width: 4%;
|
left: 6.5%;
|
top: 52%;
|
transform: rotate(90deg);
|
img {
|
width: 100%;
|
}
|
}
|
// 两根轨道
|
.gd {
|
position: absolute;
|
width: 8%;
|
top: 63%;
|
left: 3%;
|
img {
|
width: 100%;
|
}
|
}
|
// 轨道人
|
.peopleLeft2 {
|
transform: rotate(180deg);
|
left: 5%;
|
top: 60%;
|
}
|
// 叉车
|
.cc {
|
position: absolute;
|
width: 6%;
|
left: 3.5%;
|
top: 72%;
|
transform: rotate(90deg);
|
img {
|
width: 100%;
|
}
|
}
|
// 右边两个叉车
|
.cc2 {
|
position: absolute;
|
width: 5%;
|
left: 14%;
|
top: 57%;
|
img {
|
width: 100%;
|
}
|
}
|
.leftcc {
|
top: 62%;
|
transform: rotateX(180deg);
|
}
|
// 货架
|
.hj {
|
position: absolute;
|
width: 75%;
|
left: 14.3%;
|
top: 14%;
|
.hj_left,
|
.hj_right {
|
width: 8.4%;
|
float: left;
|
img {
|
width: 100%;
|
}
|
}
|
.hj_right {
|
float: right;
|
}
|
.hj_center {
|
position: absolute;
|
width: 90%;
|
left: 50%;
|
bottom: 0;
|
transform: translateX(-50%);
|
img {
|
width: 100%;
|
}
|
}
|
}
|
.hj2 {
|
top: 22.6%;
|
.hj_center {
|
bottom: 10%;
|
}
|
}
|
// 堆垛机轨道
|
.ddj_gd {
|
position: absolute;
|
width: 70%;
|
left: 50%;
|
top: 20%;
|
transform: translateX(-50%);
|
div {
|
width: 100%;
|
height: 2px;
|
background: #ccc;
|
}
|
div:last-child {
|
border-top: 1px dashed #eee;
|
}
|
}
|
// 堆垛机
|
.ddj {
|
position: absolute;
|
width: 10%;
|
left: 14.5%;
|
top: 18%;
|
transition: all 4s;
|
img {
|
width: 100%;
|
}
|
}
|
// 第三排货架
|
.hj3 {
|
top: 26.2%;
|
}
|
.hj4 {
|
top: 34.5%;
|
}
|
.ddj_gd2 {
|
top: 32%;
|
}
|
.ddj2 {
|
width: 10%;
|
top: 30%;
|
}
|
.load2 {
|
left: 89.2%;
|
}
|
// 右边工作架
|
.worrkRight {
|
width: 6%;
|
left: 83.2%;
|
top: 55%;
|
transform: scale(1, 1.6);
|
}
|
.worrkRight2 {
|
left: 93%;
|
transform: rotateY(180deg) scale(1, 1.6);
|
}
|
// 物料
|
.mat {
|
position: absolute;
|
width: 4%;
|
left: 86%;
|
top: 59%;
|
img {
|
width: 100%;
|
}
|
}
|
.mat2 {
|
left: 92.5%;
|
}
|
.mouse2 {
|
left: 89%;
|
top: 73.5%;
|
transform: rotate(0);
|
}
|
// 左边框
|
.k_left {
|
position: absolute;
|
width: 4%;
|
left: 84.5%;
|
top: 73%;
|
img {
|
width: 100%;
|
}
|
}
|
// 叉车和人
|
.ccr {
|
position: absolute;
|
width: 6%;
|
left: 80%;
|
top: 74%;
|
transform: rotate(90deg);
|
img {
|
width: 100%;
|
}
|
}
|
// 右边框
|
.k_right {
|
position: absolute;
|
width: 3%;
|
left: 93.5%;
|
top: 73%;
|
img {
|
width: 100%;
|
}
|
}
|
.ccr2 {
|
left: 95%;
|
}
|
// rgv一号
|
.rgv2 {
|
left: 89.8%;
|
top: 60.5%; //14.3
|
z-index: 10;
|
}
|
}
|
// 出库
|
.outer {
|
position: absolute;
|
width: 20%;
|
left: 25%;
|
top: 58%;
|
img {
|
width: 100%;
|
}
|
.outerContent {
|
position: absolute;
|
width: 80%;
|
left: 10%;
|
top: 15%;
|
font-size: 20px;
|
color: #00eaff;
|
text-align: center;
|
font-weight: bold;
|
}
|
.count {
|
position: absolute;
|
width: 80%;
|
left: 10%;
|
top: 40%;
|
font-size: 50px;
|
color: #fff;
|
text-align: center;
|
font-weight: 500;
|
}
|
}
|
.inner {
|
left: 56%;
|
}
|
}
|
</style>
|
