Skip to content

L
lxyl-vue
Commit 2d49c043 authored by 李苏's avatar 李苏 💬
Browse files
Options

init 立库看板

parent e278b435
Show whitespace changes
Inline Side-by-side
Showing with 522 additions and 0 deletions
src/router/index.js
View file @ 2d49c043
......@@ -1257,6 +1257,19 @@ export const powerRoutes = [
name: '22kwkb',
path: "22kwkb",
},
{
component: 'ccgl/dpkb/lkkb/index',
hidden: false,
meta: {
"title": "立库看板",
"icon": "",
"noCache": false,
"link": null,
"mkid": 920150999,
},
name: 'lkkb',
path: "lkkb",
}
]
}
......
src/views/ccgl/dpkb/lkkb/index.vue 0 → 100644
View file @ 2d49c043
<template>
<div ref='lkkb' class="min_full dbAllBody ">
<!-- 绝对定位展示框-->
<div ref="infoBox" class="infoCar">
</div>
<!-- 日期内容-->
<span class='kbtime'>{{newTime}}</span>
<!-- 标题-->
<div class="dbTitle">
<i class="title-left"><img src="./dimage/title-left.png"></i>
<p class="title-left-title-font">立库看板</p>
<i class="title-right"><img src="./dimage/title-right.png"></i>
</div>
<!-- 内容-->
<div class="dbBody ">
<!-- svg库位图-->
<div class="dbSvgtop flex">
<!-- 分五个巷道-->
<div class="xd flex-center ">
<div class="xdmx">
<div class="xdmxTitle">
1巷道
</div>
<div class="xdmxBody">
<div v-for="(item,index) in xdList1" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
xdmxBodymxSelected:selectIndex==item
}">
{{item}}
</div>
</div>
</div>
</div>
<div class="xd flex-center ">
<div class="xdmx">
<div class="xdmxTitle">
2巷道
</div>
<div class="xdmxBody">
<div v-for="(item,index) in xdList2" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
xdmxBodymxSelected:selectIndex==item
}">
{{item}}
</div>
</div>
</div>
</div>
<div class="xd flex-center ">
<div class="xdmx">
<div class="xdmxTitle">
3巷道
</div>
<div class="xdmxBody">
<div v-for="(item,index) in xdList3" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
xdmxBodymxSelected:selectIndex==item
}">
{{item}}
</div>
</div>
</div>
</div>
<div class="xd flex-center ">
<div class="xdmx">
<div class="xdmxTitle">
4巷道
</div>
<div class="xdmxBody">
<div v-for="(item,index) in xdList4" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
xdmxBodymxSelected:selectIndex==item
}">
{{item}}
</div>
</div>
</div>
</div>
<div class="xd flex-center ">
<div class="xdmx">
<div class="xdmxTitle">
5巷道
</div>
<div class="xdmxBody">
<div v-for="(item,index) in xdList5" @click="selectIndex=item" class="xdmxBodymx flex1" :class="{
xdmxBodymxSelected:selectIndex==item
}">
{{item}}
</div>
</div>
</div>
</div>
</div>
<div class="dbSvg">
<div class="svgMain full data-box1">
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="data-title">
<b class="data-title-left">[</b>
<span>库位状态</span>
<b class="data-title-right">]</b>
</div>
<div class="kwMain full ">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
/* svg集合*/
/* 双击全屏*/
function fullScreen(element) {
const elem = element || document.documentElement;
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.requestFullScreen) {
elem.requestFullscreen();
} else if (elem.msExitFullscreen) {
elem.msExitFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
export default {
mounted() {
/* 测试时间*/
this.newTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
this.timer = setInterval(() => {
this.newTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
}, 1000)
/* 测试列表*/
this.$nextTick(() => {
$(this.$refs.lkkb).dblclick(() => {
fullScreen(this.$refs.lkkb);
})
})
},
computed: {
},
data() {
return {
/* 排列*/
xdList1: [1, 2, 3, 4],
xdList2: [5, 6, 7, 8],
xdList3: [9, 10, 11],
xdList4: [12, 13, 14],
xdList5: [15, 16, 17, 18],
selectIndex: 1,
newTime: 'loading',
timer: null
}
},
beforeDestroy() {
clearInterval(this.timer)
},
methods: {
},
components: {
}
}
</script>
<style lang="scss" scoped>
.kwMain{
padding: 20px;
}
.xd {
flex: 1;
padding: 10px;
.xdmx {
height: 80px;
width: 100%;
// background-color: #eee;
box-shadow: inset 0 0 13px #032d60;
.xdmxTitle {
color: rgb(131, 199, 227);
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
font-weight: 800;
}
.xdmxBody {
padding: 3px;
color: rgb(131, 199, 227);
height: 40px;
line-height: 34px;
display: flex;
font-size: 17px;
.xdmxBodymx {
text-align: center;
cursor: pointer;
}
}
}
}
.xdmxBodymxSelected {
border: 1px solid #ffffff;
background-color: #83c7e3;
color: #fff;
}
.infoText {
color: #fff;
font-size: 19.6px;
font-weight: 600;
}
.infoMain {
width: 100%;
height: 30px;
line-height: 30px;
font-size: 16px;
padding-left: 15px;
border: 2px solid #032d60;
-webkit-box-shadow: #0fcaef 0px 0px 10px;
-moz-box-shadow: #0fcaef 0px 0px 10px;
box-shadow: inset 0 0 30px #0fcaef;
}
// .com-count-body {
// font-size: .65vw;
// height: calc(100% - 2vh);
// width: 100%;
// }
.lbbt {
height: 4vh;
width: 100%;
font-size: .9vw;
display: flex;
line-height: 4vh;
color: #61d2f7;
}
.lbbody {
height: calc(100% - 4vh);
}
.lbbody div {
flex: 1;
line-height: 25px;
font-size: 13px;
text-align: center;
}
.infoCar {
border: 2px solid #032d60;
-webkit-box-shadow: #07417a 0px 0px 10px;
-moz-box-shadow: #07417a 0px 0px 10px;
box-shadow: inset 0 0 30px #07417a;
display: none;
position: absolute;
z-index: 9999;
background-color: #01172a;
color: #009ae7;
font-size: 13px;
padding: 10px;
right: 10px;
top: 10px;
line-height: 16px;
height: 106px;
width: 130px
}
.mktitle {
line-height: 35px;
font-size: 16px;
color: #83c7e3;
font-weight: 600;
height: 35px;
position: relative;
overflow: hidden
}
.mktitle img {
height: 15px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.mktitle span {
line-height: 35px;
}
.min_full {
border: 0;
}
.dbAllBody {
background-image: url('./dimage/data08.png');
background-size: 100% 100%;
}
.dbTitle {
height: 70px;
width: 100%;
position: relative;
.title-left {
top: 12px;
position: absolute;
left: 13vw;
}
.title-right {
top: 12px;
position: absolute;
right: 13vw;
}
.title-left-title-font {
text-align: center;
width: 42vw;
display: block;
margin: 0 auto;
background: -webkit-linear-gradient(top, #fff, #65c4f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2.2vw;
font-weight: 700;
line-height: 70px;
letter-spacing: 2px;
}
}
.dbBody {
padding-top: 2px;
height: calc(100% - 70px);
width: 100%;
}
.dbSvgtop {
height: 130px;
width: 100%;
padding: 20px;
}
.dbSvg {
height: calc(100% - 130px);
width: 100%;
padding: 20px;
.svgMain {
position: relative;
}
}
.topL {
width: 20px;
height: 20px;
border-top-width: 2px;
border-top-color: #26c6f0;
border-top-style: solid;
border-left-width: 2px;
border-left-color: #26c6f0;
border-left-style: solid;
position: absolute;
top: -2px;
left: -2px;
}
.topR {
width: 20px;
height: 20px;
border-top-width: 2px;
border-top-color: #26c6f0;
border-top-style: solid;
border-right-width: 2px;
border-right-color: #26c6f0;
border-right-style: solid;
position: absolute;
top: -2px;
right: -2px;
}
.bottomL {
width: 20px;
height: 20px;
border-bottom-width: 2px;
border-bottom-color: #26c6f0;
border-bottom-style: solid;
border-left-width: 2px;
border-left-color: #26c6f0;
border-left-style: solid;
position: absolute;
bottom: -2px;
left: -2px;
}
.bottomR {
width: 20px;
height: 20px;
border-bottom-width: 2px;
border-bottom-color: #26c6f0;
border-bottom-style: solid;
border-right-width: 2px;
border-right-color: #26c6f0;
border-right-style: solid;
position: absolute;
bottom: -2px;
right: -2px;
}
.data-title {
background-color: #000c3b;
width: 154px;
margin: -14px auto 0 auto;
color: #83c7e3;
font-size: 20px;
letter-spacing: 2px;
font-weight: 600
}
.data-title span {
margin: 0 15px;
}
.data-title-left,
.data-title-right {
color: #105eda;
}
.data-box1 {
border: 2px solid #032d60;
-webkit-box-shadow: #07417a 0px 0px 10px;
-moz-box-shadow: #07417a 0px 0px 10px;
box-shadow: inset 0 0 30px #07417a;
/*position: relative;*/
}
.dbTable {
width: 100%;
padding: 10px;
height: 50%;
padding-left: 5px;
}
.dbCharts {
width: 100%;
height: 50%;
display: flex;
}
.dbChart1 {
flex: 1;
padding: 5px;
}
.dbChart2 {
flex: 1;
padding: 5px;
}
.kbtime {
position: absolute;
font-size: 1.2vw;
color: #fff;
right: 20px;
top: 20px;
}
.font-sd {
font-family: 微软雅黑;
text-shadow: #00d8ff 0 0 25.9455px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment