Skip to content

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

立库看板结束

parent 0a4927d3
Hide 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 @@ ...@@ -125,6 +125,20 @@
import mx1 from './mx/mx1.vue'; import mx1 from './mx/mx1.vue';
import mx2 from './mx/mx2.vue'; import mx2 from './mx/mx2.vue';
import mx3 from './mx/mx3.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'; import mx11 from './mx/mx11.vue';
/* 双击全屏*/ /* 双击全屏*/
function fullScreen(element) { function fullScreen(element) {
...@@ -227,7 +241,13 @@ ...@@ -227,7 +241,13 @@
}, },
components: { components: {
Detail, 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 @@ ...@@ -243,10 +263,12 @@
background-image: url(./lkdp/xz.svg); background-image: url(./lkdp/xz.svg);
} }
::v-deep .dj{ ::v-deep .dj{
background-size: 100% 100%; background-size: 100% 100%;
background-image: url(./lkdp/sd.svg); background-image: url(./lkdp/sd.svg);
} }
::v-deep .sd{ ::v-deep .sd{
background-color: darkorange;
background-size: 100% 100%; background-size: 100% 100%;
background-image: url(./lkdp/sd.svg); background-image: url(./lkdp/sd.svg);
} }
......
src/views/ccgl/dpkb/lkkb/mx/mx1.vue
View file @ f7b2df6e
...@@ -64,8 +64,9 @@ ...@@ -64,8 +64,9 @@
` `
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 console.log(event.clientY,event.clientX)
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'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { 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 @@ ...@@ -176,8 +176,8 @@
` `
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素 infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { element.addEventListener('mouseout', function(event) {
...@@ -222,8 +222,8 @@ ...@@ -222,8 +222,8 @@
` `
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素 infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { element.addEventListener('mouseout', function(event) {
...@@ -267,8 +267,8 @@ ...@@ -267,8 +267,8 @@
` `
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素 infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { element.addEventListener('mouseout', function(event) {
...@@ -312,8 +312,8 @@ ...@@ -312,8 +312,8 @@
` `
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素 infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { element.addEventListener('mouseout', function(event) {
...@@ -358,8 +358,8 @@ ...@@ -358,8 +358,8 @@
` `
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素 infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { element.addEventListener('mouseout', function(event) {
...@@ -404,8 +404,8 @@ ...@@ -404,8 +404,8 @@
` `
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素 infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { element.addEventListener('mouseout', function(event) {
...@@ -450,8 +450,8 @@ ...@@ -450,8 +450,8 @@
` `
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素 infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { element.addEventListener('mouseout', function(event) {
...@@ -496,8 +496,8 @@ ...@@ -496,8 +496,8 @@
` `
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素 infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { 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 @@ ...@@ -3,52 +3,69 @@
<div ref="infoBox" class="infoCar"> <div ref="infoBox" class="infoCar">
</div> </div>
<div class="full container"> <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"
<!-- {{item.code}} --> 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> </div>
</div> </div>
</template> </template>
<script> <script>
export default{ export default {
mounted(){ props: {
this.getBoxList() app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
}, },
data(){ data() {
return{ return {
boxList:[] boxList: []
} }
}, },
methods:{ methods: {
getBoxList(){ eclick(item) {
this.$post('lxyl/cxfx/kw/query',{ this.$emit('eclick', item)
hjCode :'HJ2', },
kwx:'2' getBoxList() {
}).then(res=>{ this.$post('lxyl/cxfx/kw/query', {
if(res.data.records){ hjCode: 'HJ2',
this.boxList=res.data.records kwx: '2'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/ /* 开始监听dom*/
this.$nextTick(()=>{ this.$nextTick(() => {
var infoBox = this.$refs.infoBox var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => { $(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event)=>{ element.addEventListener('mouseover', (event) => {
console.log(event) let info = this.boxList[index]
let info= this.boxList[index]
let content = let content =
` `
<br />
仓库编码:${info.ckCode}
<br /> <br />
名称:${info.code} 库区编码:${info.kqCode}
<br /> <br />
状态:正常 库位编码:${info.code}
<br /> <br />
数量:100 状态:${this.app.ztMap[info.zt]||'未知' }
<br /> <br />
物料:测试code 存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />` <br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素 infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { element.addEventListener('mouseout', function(event) {
...@@ -73,20 +90,25 @@ ...@@ -73,20 +90,25 @@
grid-template-rows: repeat(9, 8%); grid-template-rows: repeat(9, 8%);
gap: 6px; gap: 6px;
overflow-y: hidden; overflow-y: hidden;
&::-webkit-scrollbar { &::-webkit-scrollbar {
height: 10px; height: 10px;
/* background-color: #032d60; */ /* background-color: #032d60; */
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #032d60; /* 滚动条滑块颜色 */ background: #032d60;
} /* 滚动条滑块颜色 */
}
} }
.box { .box {
width: 30px; width: 30px;
height: 30px; height: 30px;
background-color: #4CAF50; background-color: #4CAF50;
} }
.infoCar { .infoCar {
border: 2px solid #032d60; border: 2px solid #032d60;
-webkit-box-shadow: #07417a 0px 0px 10px; -webkit-box-shadow: #07417a 0px 0px 10px;
...@@ -102,7 +124,7 @@ ...@@ -102,7 +124,7 @@
right: 10px; right: 10px;
top: 10px; top: 10px;
line-height: 16px; line-height: 16px;
height: 106px; height: 145px;
width: 130px width: 150px
} }
</style> </style>
src/views/ccgl/dpkb/lkkb/mx/mx3.vue
View file @ f7b2df6e
...@@ -3,52 +3,69 @@ ...@@ -3,52 +3,69 @@
<div ref="infoBox" class="infoCar"> <div ref="infoBox" class="infoCar">
</div> </div>
<div class="full container"> <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"
<!-- {{item.code}} --> 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> </div>
</div> </div>
</template> </template>
<script> <script>
export default{ export default {
mounted(){ props: {
this.getBoxList() app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
this.getBoxList()
}, },
data(){ data() {
return{ return {
boxList:[] boxList: []
} }
}, },
methods:{ methods: {
getBoxList(){ eclick(item) {
this.$post('lxyl/cxfx/kw/query',{ this.$emit('eclick', item)
hjCode :'HJ3', },
kwx:'3' getBoxList() {
}).then(res=>{ this.$post('lxyl/cxfx/kw/query', {
if(res.data.records){ hjCode: 'HJ3',
this.boxList=res.data.records kwx: '3'
}).then(res => {
if (res.data.records) {
this.boxList = res.data.records
/* 开始监听dom*/ /* 开始监听dom*/
this.$nextTick(()=>{ this.$nextTick(() => {
var infoBox = this.$refs.infoBox var infoBox = this.$refs.infoBox
$(this.$refs.mx1).each((index, element) => { $(this.$refs.mx1).each((index, element) => {
element.addEventListener('mouseover', (event)=>{ element.addEventListener('mouseover', (event) => {
console.log(event) let info = this.boxList[index]
let info= this.boxList[index]
let content = let content =
` `
<br />
仓库编码:${info.ckCode}
<br /> <br />
名称:${info.code} 库区编码:${info.kqCode}
<br /> <br />
状态:正常 库位编码:${info.code}
<br /> <br />
数量:100 状态:${this.app.ztMap[info.zt]||'未知' }
<br /> <br />
物料:测试code 存储状态:${this.app.ccztMap[info.kczt]||'未知'}
<br />` <br />
重检状态:${this.app.cjztMap[info.cjzt]||'未知'}
`
$(infoBox).empty() $(infoBox).empty()
$(infoBox).append(content) $(infoBox).append(content)
infoBox.style.top = (event.layerY + 25) + 'px'; // 信息框距离顶部10像素 infoBox.style.top = event.clientY>400?((event.layerY - 125) + 'px'):((event.layerY + 25) + 'px'); // 信息框距离顶部10像素
infoBox.style.left = (event.layerX +25) + 'px'; // 信息框距离左侧10像素 infoBox.style.left =event.clientX>800?((event.layerX - 125) + 'px'):((event.layerX + 25) + 'px'); // 信息框距离左侧10像素
infoBox.style.display = 'block'; infoBox.style.display = 'block';
}); });
element.addEventListener('mouseout', function(event) { element.addEventListener('mouseout', function(event) {
...@@ -73,20 +90,25 @@ ...@@ -73,20 +90,25 @@
grid-template-rows: repeat(9, 8%); grid-template-rows: repeat(9, 8%);
gap: 6px; gap: 6px;
overflow-y: hidden; overflow-y: hidden;
&::-webkit-scrollbar { &::-webkit-scrollbar {
height: 10px; height: 10px;
/* background-color: #032d60; */ /* background-color: #032d60; */
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #032d60; /* 滚动条滑块颜色 */ background: #032d60;
} /* 滚动条滑块颜色 */
}
} }
.box { .box {
width: 30px; width: 30px;
height: 30px; height: 30px;
background-color: #4CAF50; background-color: #4CAF50;
} }
.infoCar { .infoCar {
border: 2px solid #032d60; border: 2px solid #032d60;
-webkit-box-shadow: #07417a 0px 0px 10px; -webkit-box-shadow: #07417a 0px 0px 10px;
...@@ -102,7 +124,7 @@ ...@@ -102,7 +124,7 @@
right: 10px; right: 10px;
top: 10px; top: 10px;
line-height: 16px; line-height: 16px;
height: 106px; height: 145px;
width: 130px width: 150px
} }
</style> </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