Skip to content

T
teach-ltk-ui
Commit 200505a6 by huangqy
Options

2

parent c8c93767
正在显示 包含 247 行增加 和 78 行删除
src/views/workQueue/moveCar.vue
......@@ -1639,29 +1639,33 @@
<path d="M 1187 2152 M 1232 2152 M 1232 2172 M 1187 2172" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 1232 2152 M 1253 2152 M 1253 2172 M 1232 2172" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" pointer-events="none"/>
<rect x="1185.72" y="2092" width="44.55" height="80" fill="#cccccc" stroke="rgb(0, 0, 0)" stroke-width="3" pointer-events="none"/>
<rect :class="move ? 'inEndClass': ''" x="448" y="2012" width="80" height="70" fill="#cccccc" stroke="rgb(0, 0, 0)" stroke-width="3" pointer-events="none"/>
<rect :class="move ? 'inEndClass': ''" x="468" y="2026" width="41.5" height="41" :fill="moveY ? '#cccccc' : '#3333ff'" stroke="none" pointer-events="none"/>
<rect x="103" y="1882" width="120" height="80" fill="#ffb570" stroke="rgb(0, 0, 0)" transform="rotate(90,163,1922)" pointer-events="none"/>
<rect x="105" y="1884" width="116" height="76" fill="#ffb570" stroke="rgb(0, 0, 0)" transform="rotate(90,163,1922)" pointer-events="none"/>
<rect x="133" y="1842" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect x="133" y="1982" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<path d="M 133 1887 L 193 1887" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 133 1957 L 193 1957" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<rect x="142.25" y="1901.5" width="41.5" height="41" fill="#ffb570" stroke="none" pointer-events="none"/>
<rect x="437.5" y="1882" width="120" height="80" fill="#ffb570" stroke="rgb(0, 0, 0)" transform="rotate(90,497.5,1922)" pointer-events="none"/>
<rect x="439.5" y="1884" width="116" height="76" fill="#ffb570" stroke="rgb(0, 0, 0)" transform="rotate(90,497.5,1922)" pointer-events="none"/>
<rect x="467.5" y="1842" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect x="467.5" y="1982" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<path d="M 467.5 1887 L 527.5 1887" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 467.5 1957 L 527.5 1957" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<rect x="476.75" y="1901.5" width="41.5" height="41" fill="#ffb570" stroke="none" pointer-events="none"/>
<rect x="772.5" y="1883" width="120" height="80" fill="#ffb570" stroke="rgb(0, 0, 0)" transform="rotate(90,832.5,1923)" pointer-events="none"/>
<rect x="774.5" y="1885" width="116" height="76" fill="#ffb570" stroke="rgb(0, 0, 0)" transform="rotate(90,832.5,1923)" pointer-events="none"/>
<rect x="802.5" y="1843" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect x="802.5" y="1983" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<path d="M 802.5 1888 L 862.5 1888" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 802.5 1958 L 862.5 1958" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<rect x="811.75" y="1902.5" width="41.5" height="41" fill="#ffb570" stroke="none" pointer-events="none"/>
<rect :class="move ? 'inStartClass': moveC ? 'outStartClass' : ''" x="448" y="2012" width="80" height="70" fill="#cccccc" stroke="rgb(0, 0, 0)" stroke-width="3" pointer-events="none"/>
<rect :class="move ? 'inStartClass': moveC ? 'outStartClass' : ''" x="468" y="2026" width="41.5" height="41" :fill="showGoods ? '#3333ff' : '#cccccc'" stroke="none" pointer-events="none"/>
<!-- 1号黄色 -->
<rect :class="move1 ? 'topOut1': ''" x="122" y="1863" width="80" height="118" fill="#ffb570" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect :class="move1 ? 'topOut1': ''" x="133" y="1842" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect :class="move1 ? 'topOut1': ''" x="133" y="1982" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<path :class="move1 ? 'topOut1': ''" d="M 133 1887 L 193 1887" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<path :class="move1 ? 'topOut1': ''" d="M 133 1957 L 193 1957" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<rect :class="move1 ? 'topOut1': ''" x="142.25" y="1901.5" width="41.5" height="41" :fill="goodsLan? '#3333ff' : '#ffb570'" stroke="none" pointer-events="none"/>
<!-- 2号黄色 -->
<rect :class="moveZ ? 'topClass1': ''" x="457" y="1863" width="80" height="118" fill="#ffb570" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect :class="moveZ ? 'topClass1': ''" x="467.5" y="1842" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect :class="moveZ ? 'topClass1': ''" x="467.5" y="1982" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<path :class="moveZ ? 'topClass1': ''" d="M 467.5 1887 L 527.5 1887" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<path :class="moveZ ? 'topClass1': ''" d="M 467.5 1957 L 527.5 1957" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<rect :class="lanMoveZ ? 'lanMoveZ': ''" x="476.75" y="1901.5" width="41.5" height="41" :fill="moveZ? '#3333ff' : '#ffb570'" stroke="none" pointer-events="none"/>
<!-- 3号黄色 -->
<rect :class="move3 ? 'topOut3': ''" x="793" y="1864" width="80" height="118" fill="#ffb570" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect :class="move3 ? 'topOut3': ''" x="802.5" y="1843" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect :class="move3 ? 'topOut3': ''" x="802.5" y="1983" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<path :class="move3 ? 'topOut3': ''" d="M 802.5 1888 L 862.5 1888" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<path :class="move3 ? 'topOut3': ''" d="M 802.5 1958 L 862.5 1958" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<rect :class="move3 ? 'topOut3': ''" x="811.75" y="1902.5" width="41.5" height="41" :fill="goodsLan3? '#3333ff' : '#ffb570'" stroke="none" pointer-events="none"/>
<rect x="1105.5" y="1883" width="120" height="80" fill="#ffb570" stroke="rgb(0, 0, 0)" transform="rotate(90,1165.5,1923)" pointer-events="none"/>
<rect x="1107.5" y="1885" width="116" height="76" fill="#ffb570" stroke="rgb(0, 0, 0)" transform="rotate(90,1165.5,1923)" pointer-events="none"/>
<rect x="1135.5" y="1843" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
......@@ -1669,12 +1673,14 @@
<path d="M 1135.5 1888 L 1195.5 1888" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 1135.5 1958 L 1195.5 1958" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<rect x="1144.75" y="1902.5" width="41.5" height="41" fill="#ffb570" stroke="none" pointer-events="none"/>
<!-- 5号黄色 -->
<rect :class="moveY ? 'topClass': ''" x="1457" y="1864" width="80" height="118 " fill="#ffb570" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect :class="moveY ? 'topClass': ''" x="1467.5" y="1843" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<rect :class="moveY ? 'topClass': ''" x="1467.5" y="1983" width="60" height="20" fill="#cccccc" stroke="rgb(0, 0, 0)" pointer-events="none"/>
<path :class="moveY ? 'topClass': ''" d="M 1467.5 1888 L 1527.5 1888" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<path :class="moveY ? 'topClass': ''" d="M 1467.5 1958 L 1527.5 1958" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-miterlimit="10" pointer-events="none"/>
<rect :class="moveY ? 'topClass': ''" x="1476.75" y="1902.5" width="41.5" height="41" :fill="moveY? '#3333ff' : '#ffb570'" stroke="none" pointer-events="none"/>
<rect :class="lanMoveY ? 'lanMoveY': ''" x="1476.75" y="1902.5" width="41.5" height="41" :fill="moveY? '#3333ff' : '#ffb570'" stroke="none" pointer-events="none"/>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
......@@ -1687,7 +1693,8 @@
<el-button @click="xiafa">下发</el-button>
<el-button @click="ruku">入库</el-button>
<el-button @click="chuku">出库</el-button>
<el-button @click="fuwei">复位</el-button>
......@@ -1709,26 +1716,24 @@ export default {
return {
height: document.documentElement.clientHeight - 176,
data: [],
map: null,
dialogVisible: false,
title: '',
formData: {},
classList: [],
// 筛选数据
searchData: {
pageNo: 1,
pageSize: 10,
},
// 总条数
total: 0,
websock: null,
// 入库开始
move: false,
moveY: false,
moveZ: false,
showGoods: true,
lanMoveY: false,
lanMoveZ: false,
// 出库开始
moveC: false,
move1: false,
goodsLan: false,
move3: false,
goodsLan3: false
}
},
created () {
this.initMap()
},
mounted() {
......@@ -1740,31 +1745,65 @@ export default {
methods: {
initMap() {
this.$refs.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
projection: "EPSG:4326", // 使用这个坐标系
center: [114.064839, 22.548857], // 深圳
zoom: 12
})
});
},
xiafa() {
this.move = true
ruku() {
this.move = true // 小车入库的一生走完
setTimeout(() => {
this.showGoods = false
this.moveY = true // 5号巷道的黄色一生走完
this.lanMoveY = true // 5号巷道的货物一生走完
}, 4000)
setTimeout(() => {
this.showGoods = true
}, 8000)
setTimeout(() => {
this.showGoods = false
this.moveZ = true // 2号巷道的黄色一生走完
this.lanMoveZ = true // 2号巷道的黄色一生走完
}, 9000)
setTimeout(() => {
this.moveY = true
this.showGoods = true
}, 10000)
},
chuku() {
this.showGoods = false // 出库去接货物先重置
this.moveC = true // 出库开始
this.move1 = true
setTimeout(() => {
this.goodsLan = true
}, 3000)
setTimeout(() => {
this.goodsLan = false
this.showGoods = true
}, 6000)
setTimeout(() => {
this.showGoods = false
this.move3 = true
}, 12000)
setTimeout(() => {
this.goodsLan3 = true
}, 14000)
setTimeout(() => {
this.goodsLan3 = false
this.showGoods = true
}, 16000)
setTimeout(() => {
this.showGoods = false
}, 20000)
},
fuwei() {
this.move = false
this.moveY = false
this.moveZ = false
this.showGoods = true
this.lanMoveY = false
this.lanMoveZ= false
this.moveC = false
this.move1 = false
this.goodsLan = false
this.move3 = false
this.goodsLan3 = false
}
},
......@@ -1776,44 +1815,174 @@ export default {
</script>
<style scoped>
.inclass{
}
.inEndClass {
animation: change 10s 1 linear;
.inStartClass {
animation: inCarStart 10s 1 linear;
animation-fill-mode: forwards;
}
.topEndClass {
animation: changeTop 10s 1 linear;
animation-fill-mode: forwards;
@keyframes inCarStart {
0% {
transform: translateX(0px)
}
35% {
transform: translateX(888px)
}
40% {
transform: translateX(888px)
}
80% {
transform: translateX(0px)
}
85% {
transform: translateX(-110px)
}
90% {
transform: translateX(-110px)
}
100% {
transform: translateX(0px)
}
}
.topClass {
animation: changeTopY 10s 1 linear;
/* 第一次入库黄色模块 */
.topClass {
animation: changeTop 4s 1 linear;
animation-fill-mode: forwards;
}
@keyframes changeTop {
0%{
transform: translateY(0px)
}
100%{
transform: translateY(-600px)
transform: translateY(-580px)
}
}
.topClass1 {
animation: changeTop1 4s 1 linear;
animation-fill-mode: forwards;
}
@keyframes changeTop1 {
0%{
transform: translateY(0px)
}
100%{
transform: translateY(-380px)
}
}
@keyframes changeTopY {
.lanMoveZ {
animation: blueZ 6s 1 linear;
animation-fill-mode: forwards;
}
@keyframes blueZ {
0% {
transform: translateY(0px)
transform: translateY(0px)
}
66.6% {
transform: translateY(-380px)
}
100% {
transform: translateY(-600px)
transform: translate(-120px, -380px)
}
}
@keyframes change {
0%{
transform: translateX(0px)
/* 第一次入库蓝色模块 */
.lanMoveY {
animation: blueY 6s 1 linear;
animation-fill-mode: forwards;
}
@keyframes blueY {
0% {
transform: translateY(0px)
}
100%{
transform: translateX(888px)
66.6% {
transform: translateY(-580px)
}
100% {
transform: translate(-120px, -580px)
}
}
.outStartClass {
animation: outCarStart 20s 1 linear;
animation-fill-mode: forwards;
}
@keyframes outCarStart {
0% {
transform: translateX(0px)
}
10% {
transform: translateX(-205px)
}
35% {
transform: translateX(-205px)
}
55% {
transform: translateX(718px)
}
60% {
transform: translateX(718px)
}
70% {
transform: translateX(465px)
}
85% {
transform: translateX(465px)
}
95% {
transform: translateX(718px)
}
100% {
transform: translateX(718px)
}
}
.topOut1 {
animation: topOut1 6s 1 linear;
animation-fill-mode: forwards;
}
@keyframes topOut1 {
0% {
transform: translateY(0px)
}
45% {
transform: translateY(-380px)
}
50% {
transform: translateY(-380px)
}
95% {
transform: translateY(0px)
}
100% {
transform: translateY(0px)
}
}
.topOut3 {
animation: topOut3 4s 1 linear;
animation-fill-mode: forwards;
}
@keyframes topOut3 {
0% {
transform: translateY(0px)
}
45% {
transform: translateY(-280px)
}
50% {
transform: translateY(-280px)
}
95% {
transform: translateY(0px)
}
100% {
transform: translateY(0px)
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论