|
|
@@ -6,12 +6,12 @@
|
|
|
<el-dialog
|
|
|
title="仓库可视化"
|
|
|
:visible.sync="ifshow"
|
|
|
- width="100%"
|
|
|
- append-to-body
|
|
|
+ :modal="false"
|
|
|
fullscreen
|
|
|
center
|
|
|
+ append-to-body
|
|
|
>
|
|
|
- <div v-if="ifshow" slot="footer" class="selectArea">
|
|
|
+ <div v-if="ifshow" class="selectArea">
|
|
|
<div class="top-content">
|
|
|
<div class="query-content">
|
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
@@ -43,7 +43,7 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="body-content">
|
|
|
+ <div v-loading="loading" class="body-content">
|
|
|
<div class="right-view">
|
|
|
<div class="goods-items">
|
|
|
<div v-for="(item, index) in listData" :key="index" class="show-demo">
|
|
|
@@ -51,7 +51,7 @@
|
|
|
<div class="goods-level">
|
|
|
<div class="level-dsc">第{{ index | indexfilter(listData) }}层</div>
|
|
|
<div class="goods-list">
|
|
|
- <div v-for="(it, index) in listData[index]" :key="index" class="goods-dsc" :style="{background: !it.wu_liao_bian_ma_ ? '#67c23a' : '',}" @click="closeView(it)">
|
|
|
+ <div v-for="(it, indext) in listData[index]" :key="indext" class="goods-dsc" :style="{background: !it.wu_liao_bian_ma_ ? '#67c23a' : '',}" @click="closeView(it)">
|
|
|
<div class="top-dsc" style="position: relative;">
|
|
|
<div class="position">
|
|
|
<p style="width: 150px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">名称：{{ it.wu_liao_ming_chen || '/' }}</p>
|
|
|
@@ -161,7 +161,8 @@ export default {
|
|
|
},
|
|
|
'formInline.qu_yu_value': function (newdata) {
|
|
|
this.qu_yu_value = newdata
|
|
|
- this.quyuShow = newdata
|
|
|
+ // this.quyuShow = newdata
|
|
|
+ this.quyuShow = newdata.split('(')[0]
|
|
|
this.firstLoadActive = false
|
|
|
}
|
|
|
},
|
|
|
@@ -238,19 +239,22 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- onSubmits () { // 头部按钮查询事
|
|
|
+ async onSubmits () { // 头部按钮查询事
|
|
|
+ this.loading = true
|
|
|
this.desShow = false
|
|
|
const value = this.formInline.qu_yu_value
|
|
|
const num = value.split('号')[0]
|
|
|
const type = this.sqlSlice(value, num)
|
|
|
var sqlString = `select * from t_mjwlgl where cun_fang_wei_zhi_ like ` + "'%" + type + "%'"
|
|
|
- this.queryLoad(sqlString, type)
|
|
|
+ await this.queryLoad(sqlString, type)
|
|
|
this.formInline.qu_yu_value = value
|
|
|
this.quyuShow = value
|
|
|
+ this.loading = false
|
|
|
},
|
|
|
- queryLoad (sql, py) {
|
|
|
+ async queryLoad (sql, py) {
|
|
|
const this_ = this
|
|
|
var datas = []
|
|
|
+ var datalist = []
|
|
|
this.cenghao = []
|
|
|
const labelsMap = {} // map存储
|
|
|
let typeData = []
|
|
|
@@ -260,9 +264,9 @@ export default {
|
|
|
} else {
|
|
|
sqltype = `select wei_zhi_ from t_ck where wei_zhi_ like ` + "'%" + py + "%'" + 'ORDER BY wei_zhi_ ASC ' //
|
|
|
}
|
|
|
- curdPost('sql', sqltype).then((res) => {
|
|
|
+ await curdPost('sql', sqltype).then(async (res) => {
|
|
|
typeData = res.variables.data // 查询该位置具有多少层
|
|
|
- curdPost('sql', sql).then((res) => {
|
|
|
+ await curdPost('sql', sql).then(async (res) => {
|
|
|
// sql 查询该位置在物料管理库存信息的物料
|
|
|
datas = res.variables.data // 该位置的库存信息
|
|
|
typeData.forEach((item) => {
|
|
|
@@ -280,72 +284,36 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
- this_.listData = labelsMap
|
|
|
- for (const prop in this_.listData) {
|
|
|
- for (const index in this_.listData[prop[0]]) {
|
|
|
- if (!this_.listData[prop[0]][index].panduan) {
|
|
|
- const sqlString = `select * from t_mjwlgl where cun_fang_wei_zhi_ = '${this_.listData[prop[0]][index].cun_fang_wei_zhi_}'`
|
|
|
- curdPost('sql', sqlString).then((res) => {
|
|
|
+ datalist = labelsMap
|
|
|
+ for (const prop in datalist) {
|
|
|
+ for (const index in datalist[prop[0]]) {
|
|
|
+ if (!datalist[prop[0]][index].panduan) {
|
|
|
+ const sqlString = `select * from t_mjwlgl where cun_fang_wei_zhi_ = '${datalist[prop[0]][index].cun_fang_wei_zhi_}'`
|
|
|
+ await curdPost('sql', sqlString).then(async (res) => {
|
|
|
const wuliao = res.variables.data
|
|
|
if (wuliao.length > 0) {
|
|
|
let arr = []
|
|
|
- arr = this_.listData[prop[0]].filter(el => { if (el.panduan === '' && el.cun_fang_wei_zhi_ === wuliao[0].cun_fang_wei_zhi_) { return false } else { return true } })
|
|
|
- this_.listData[prop[0]] = arr.concat(wuliao)
|
|
|
+ arr = await datalist[prop[0]].filter(el => { if (el.panduan === '' && el.cun_fang_wei_zhi_ === wuliao[0].cun_fang_wei_zhi_) { return false } else { return true } })
|
|
|
+ datalist[prop[0]] = arr.concat(wuliao)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- // this.listData = labelsMap
|
|
|
- // return
|
|
|
- // }
|
|
|
- // datas.forEach((item) => {
|
|
|
- // // 有物料存在该区域
|
|
|
- // const props1 = item.cun_fang_wei_zhi_.split('-')[1]
|
|
|
- // for (var prop in labelsMap) {
|
|
|
- // if (labelsMap.hasOwnProperty(prop)) {
|
|
|
- // if (prop == props1) {
|
|
|
- // labelsMap[prop].push(item)
|
|
|
- // }
|
|
|
- // if (prop != props1 && labelsMap[prop].length == 0) {
|
|
|
- // typeData.forEach((item) => {
|
|
|
- // // 组件以货架分层的数据: {1:[],2:[],3:[],4:[],5:[],6}
|
|
|
- // const num = item.wei_zhi_.split('-')[1]
|
|
|
- // if (num == prop) {
|
|
|
- // labelsMap[prop].push({
|
|
|
- // cun_fang_wei_zhi_: item.wei_zhi_
|
|
|
- // })
|
|
|
- // labelsMap[prop].push({ zhuangtai: '空' })
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // })
|
|
|
- // const newarr = []
|
|
|
- // for (var prop in labelsMap) {
|
|
|
- // if (labelsMap.hasOwnProperty(prop)) {
|
|
|
- // if (labelsMap[prop].length > 1) {
|
|
|
- // var item = []
|
|
|
- // item.push(labelsMap[prop][0])
|
|
|
- // newarr.push(item)
|
|
|
- // } else {
|
|
|
- // newarr.push(labelsMap[prop])
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // this.listData = newarr
|
|
|
+ this_.listData = datalist
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- qu_yu_Event (e) { // 点击区域事件，加载可视化视图
|
|
|
+ async qu_yu_Event (e) { // 点击区域事件，加载可视化视图
|
|
|
+ this.loading = true
|
|
|
const value = e.target.innerText
|
|
|
const num = value.split('号')[0]
|
|
|
const type = this.sqlSlice(value, num)
|
|
|
var sqlString = `select * from t_mjwlgl where cun_fang_wei_zhi_ like ` + "'%" + type + "%'"
|
|
|
- this.queryLoad(sqlString, type)
|
|
|
+ await this.queryLoad(sqlString, type)
|
|
|
this.formInline.qu_yu_value = value
|
|
|
this.quyuShow = value
|
|
|
+ this.loading = false
|
|
|
},
|
|
|
blackEvent () {
|
|
|
this.desShow = true
|
|
|
@@ -355,47 +323,22 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-ul {
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-p {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-.selectArea {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- // position: fixed;
|
|
|
- // top: 0px;
|
|
|
- // left: 0px;
|
|
|
- background: white;
|
|
|
- z-index: 2147483647 !important;
|
|
|
-}
|
|
|
-.close-content {
|
|
|
- position: absolute;
|
|
|
- right: 100px;
|
|
|
- top: 50px;
|
|
|
- //
|
|
|
- background: #f56c6c;
|
|
|
- font-size: 16px;
|
|
|
- padding: 0px 4px;
|
|
|
- border-radius: 5px;
|
|
|
- color: #ffffff;
|
|
|
- .closeBtn {
|
|
|
- background: #f56c6c;
|
|
|
- border: none;
|
|
|
- padding: 2px;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-}
|
|
|
-.el-dialog__footer {
|
|
|
- width: 100%;
|
|
|
+
|
|
|
+.el-dialog__body {
|
|
|
+ .selectArea{
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
.top-content {
|
|
|
+
|
|
|
width: 100%;
|
|
|
.query-content {
|
|
|
display: flex;
|
|
|
margin-left: 25px;
|
|
|
}
|
|
|
+ }
|
|
|
+ .test-quyu{
|
|
|
+
|
|
|
}
|
|
|
.test-quyu,
|
|
|
.huojia {
|
|
|
@@ -432,8 +375,14 @@ p {
|
|
|
}
|
|
|
}
|
|
|
.body-content {
|
|
|
- margin-bottom: 70px;
|
|
|
display: flex;
|
|
|
+
|
|
|
+ .right-view{
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: calc(100vh - 200px);
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
.black {
|
|
|
position: fixed;
|
|
|
top: 300px;
|
|
|
@@ -529,23 +478,5 @@ p {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.tooltip {
|
|
|
- }
|
|
|
- .tooltip::after {
|
|
|
- content: attr(data-text); /* 获取 data-text 属性值作为 tooltip 内容 */
|
|
|
- position: absolute; /* 绝对定位 */
|
|
|
- top: 10px; /* 调整 tooltip 距离元素顶部的距离 */
|
|
|
- left: 50%; /* 水平居中 */
|
|
|
- transform: translateX(-50%); /* 水平居中 */
|
|
|
- padding: 4px; /* 添加边距 */
|
|
|
- background-color: #333; /* 背景色 */
|
|
|
- color: white; /* 前景色 */
|
|
|
- border-radius: 4px; /* 圆角 */
|
|
|
- opacity: 1; /* 初始不可见 */
|
|
|
- transition: opacity 0.3s ease; /* 过渡效果 */
|
|
|
- }
|
|
|
|
|
|
- .tooltip:hover::after {
|
|
|
- opacity: 1; /* 鼠标悬停时显示 tooltip */
|
|
|
- }
|
|
|
</style>
|
shenqilong