Skip to content

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

立库看板结束

parent 0a4927d3
Show whitespace changes
Inline Side-by-side
Showing with 1974 additions and 87 deletions
src/views/ccgl/dpkb/lkkb/index.vue
View file @ f7b2df6e
......@@ -125,6 +125,20 @@
import mx1 from './mx/mx1.vue';
import mx2 from './mx/mx2.vue';
import mx3 from './mx/mx3.vue';
import mx4 from './mx/mx4.vue';
import mx5 from './mx/mx5.vue';
import mx6 from './mx/mx6.vue';
import mx7 from './mx/mx7.vue';
import mx8 from './mx/mx8.vue';
import mx9 from './mx/mx9.vue';
import mx10 from './mx/mx10.vue';
import mx12 from './mx/mx12.vue';
import mx13 from './mx/mx13.vue';
import mx14 from './mx/mx14.vue';
import mx15 from './mx/mx15.vue';
import mx16 from './mx/mx16.vue';
import mx17 from './mx/mx17.vue';
import mx18 from './mx/mx18.vue';
import mx11 from './mx/mx11.vue';
/* 双击全屏*/
function fullScreen(element) {
......@@ -227,7 +241,13 @@
},
components: {
Detail,
mx1,mx2,mx3,mx11
mx1,mx2,mx3,mx11,mx4,mx5,
mx6,mx7,
mx8,mx9,
mx10,mx12,
mx13,mx14,
mx15,mx16,
mx17,mx18
}
}
......@@ -243,10 +263,12 @@
background-image: url(./lkdp/xz.svg);
}
::v-deep .dj{
background-size: 100% 100%;
background-image: url(./lkdp/sd.svg);
}
::v-deep .sd{
background-color: darkorange;
background-size: 100% 100%;
background-image: url(./lkdp/sd.svg);
}
......
src/views/ccgl/dpkb/lkkb/mx/mx1.vue
View file @ f7b2df6e
......@@ -64,8 +64,9 @@
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX + 25) + 'px'; // 信息框距离左侧10像素
console.log(event.clientY,event.clientX)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......
src/views/ccgl/dpkb/lkkb/mx/mx10.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ10',
kwx: '10'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(47, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx11.vue
View file @ f7b2df6e
......@@ -176,8 +176,8 @@
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......@@ -222,8 +222,8 @@
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......@@ -267,8 +267,8 @@
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......@@ -312,8 +312,8 @@
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......@@ -358,8 +358,8 @@
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......@@ -404,8 +404,8 @@
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......@@ -450,8 +450,8 @@
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......@@ -496,8 +496,8 @@
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......
src/views/ccgl/dpkb/lkkb/mx/mx12.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ12',
kwx: '12'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(47, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx13.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ13',
kwx: '13'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(47, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx14.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ14',
kwx: '14'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(47, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx15.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ15',
kwx: '15'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(47, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx16.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ16',
kwx: '16'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(47, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx17.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ17',
kwx: '17'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(47, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx18.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ18',
kwx: '18'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(48, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx2.vue
View file @ f7b2df6e
......@@ -3,52 +3,69 @@
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div ref="mx1" v-for="(item,index) in boxList" :key="item.code" class="box">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default{
mounted(){
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data(){
return{
boxList:[]
data() {
return {
boxList: []
}
},
methods:{
getBoxList(){
this.$post('lxyl/cxfx/kw/query',{
hjCode :'HJ2',
kwx:'2'
}).then(res=>{
if(res.data.records){
this.boxList=res.data.records
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ2',
kwx: '2'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(()=>{
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event)=>{
console.log(event)
let info= this.boxList[index]
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
名称:${info.code}
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:正常
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
数量:100
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
物料:测试code
<br />`
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......@@ -73,20 +90,25 @@
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60; /* 滚动条滑块颜色 */
}
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.infoCar {
border: 2px solid #032d60;
-webkit-box-shadow: #07417a 0px 0px 10px;
......@@ -102,7 +124,7 @@
right: 10px;
top: 10px;
line-height: 16px;
height: 106px;
width: 130px
height: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx3.vue
View file @ f7b2df6e
......@@ -3,52 +3,69 @@
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div ref="mx1" v-for="(item,index) in boxList" :key="item.code" class="box">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default{
mounted(){
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data(){
return{
boxList:[]
data() {
return {
boxList: []
}
},
methods:{
getBoxList(){
this.$post('lxyl/cxfx/kw/query',{
hjCode :'HJ3',
kwx:'3'
}).then(res=>{
if(res.data.records){
this.boxList=res.data.records
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ3',
kwx: '3'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(()=>{
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event)=>{
console.log(event)
let info= this.boxList[index]
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
名称:${info.code}
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:正常
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
数量:100
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
物料:测试code
<br />`
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
......@@ -73,20 +90,25 @@
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60; /* 滚动条滑块颜色 */
}
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.infoCar {
border: 2px solid #032d60;
-webkit-box-shadow: #07417a 0px 0px 10px;
......@@ -102,7 +124,7 @@
right: 10px;
top: 10px;
line-height: 16px;
height: 106px;
width: 130px
height: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx4.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ4',
kwx: '4'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(48, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx5.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ5',
kwx: '5'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(48, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx6.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ6',
kwx: '6'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(48, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx7.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ7',
kwx: '7'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(48, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx8.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ8',
kwx: '8'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(48, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</style>
src/views/ccgl/dpkb/lkkb/mx/mx9.vue 0 → 100644
View file @ f7b2df6e
<template>
<div class="full">
<div ref="infoBox" class="infoCar">
</div>
<div class="full container">
<div @click='eclick(item)' :code='item.code' :item='JSON.stringify(item)' ref="mx1"
v-for="(item,index) in boxList" :key="item.code" class="box" :class="{
yh:item.kczt=='U', wh:item.kczt=='E', dj:item.zt=='F', sd:item.zt=='L', kccj:item.cjzt=='Y',sdkccj:item.cjzt=='Y'&&item.zt=='L',sdkccj:item.cjzt=='Y'&&item.zt=='F'
}">
<!-- {{item.code}} -->
</div>
</div>
</div>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
},
data() {
return {
boxList: []
}
},
methods: {
eclick(item) {
this.$emit('eclick', item)
},
getBoxList() {
this.$post('lxyl/cxfx/kw/query', {
hjCode: 'HJ9',
kwx: '9'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/
this.$nextTick(() => {
var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event) => {
let info = this.boxList[index]
let content =
`
<br />
仓库编码:${info.ckCode}
<br />
库区编码:${info.kqCode}
<br />
库位编码:${info.code}
<br />
状态:${this.app.ztMap[info.zt]||'未知' }
<br />
存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty()
$(infoBox).append(content)
infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block';
});
element.addEventListener('mouseout', function(event) {
// 隐藏信息框
infoBox.style.display = 'none';
});
});
})
}
})
}
}
}
</script>
<style scoped>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(47, 30px);
grid-template-rows: repeat(9, 8%);
gap: 6px;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 10px;
/* background-color: #032d60; */
}
&::-webkit-scrollbar-thumb {
background: #032d60;
/* 滚动条滑块颜色 */
}
}
.box {
width: 30px;
height: 30px;
background-color: #4CAF50;
}
.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: 145px;
width: 150px
}
</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