库存可视化修改

src/views/component/zhuposition.vue

@@ -4,7 +4,7 @@
             <el-input id="valueDom" placeholder="请输入内容" :value="showValue" />
         </div>
         <el-dialog
-            title="仓库可视化"
+            title="仓库可视化11"
             :visible.sync="ifshow"
             :modal="false"
             fullscreen
@@ -36,9 +36,22 @@
                 <div class="test-quyu">
                     <div class="test-list">
                         <ul class="list-items">
-                            <li v-for="item in quyu_arr" :key="item.qu_yu_" class="list-item quyu-item" :style="{background: quyuShow == item.qu_yu_ ? '#FF9900' : '#e5baba',}" @click="qu_yu_Event">
-                                <div v-if="item.qu_yu_.includes('冰箱')">{{ item.qu_yu_ | freezerFilters }}({{ item.cun_chu_tiao_jian }})</div>
-                                <div v-if="!item.qu_yu_.includes('冰箱')">{{ item.qu_yu_ | freezerFilters }}</div>
+                            <li
+                                v-for="item in quyu_arr"
+                                :key="item.qu_yu_"
+                                class="list-item quyu-item"
+                                :style="{background: quyuShow == item.qu_yu_ ? '#FF9900' : '#e5baba',}"
+                                @click="qu_yu_Event(item.qu_yu_ )"
+                            >
+                                <div v-if="item.qu_yu_.includes('冰箱')||item.qu_yu_.includes('冷藏柜')||item.qu_yu_.includes('冷冻柜')">
+                                    <div style="display: inline-block; height: 100%;">{{ item.qu_yu_ }}</div>
+                                    <div style="display: inline-block;">({{ item.cun_chu_tiao_jian }})</div>
+                                </div>
+
+                                <div v-else><div style="display: inline-block; height: 100%;" @click="qu_yu_Event" />
+                                    <div style="display: inline-block; height: 100%;"> {{ item.qu_yu_ }}
+                                    </div>
+                                </div>
                             </li>
                         </ul>
                     </div>
@@ -97,24 +110,16 @@ export default {
         laySlice: function (value) {
             return value.split('-')[2]
         },
-        freezerFilters: function (value) {
-            if (value.includes('冷藏柜')) {
-                return value.replace('冷藏柜', '冰箱')
-            } else if (value.includes('冷冻柜')) {
-                return value.replace('冷冻柜', '冰箱')
-            } else {
-                return value
-            }
-        },
+
         specimenFilters: function (value) {
-            if (value == '' || value == undefined) {
+            if (value === '' || value === undefined) {
                 return '未占用'
             } else {
                 return value
             }
         },
         bian_hao_Filters: function (value) {
-            if (!value || value == undefined || value == '') {
+            if (!value || value === undefined || value === '') {
                 return '无'
             } else {
                 return value
@@ -129,7 +134,7 @@ export default {
             centerDialogVisible: false,
             formInline: {
                 cang_ku_ming_chen_value: '主仓库',
-                qu_yu_value: '1号冰箱',
+                qu_yu_value: '1号冰箱T',
                 huo_jia_value: ''
             },
             huojiaInfo: {
@@ -185,12 +190,14 @@ export default {
             this.ifshow = !this.ifshow
         },
         firstLoadQuyu (cang_ku) {
-            const sqlString = `select DISTINCT subStr(wei_zhi_,1,4) as wei_zhi_,cun_chu_tiao_jian,qu_yu_ from t_ck where cang_ku_ming_chen = '${cang_ku}' order by wei_zhi_ asc`
+            const sqlString = `select wei_zhi_, cang_ku_ming_chen, qu_yu_, fang_xiang_ ,cun_chu_tiao_jian from t_ck  where cang_ku_ming_chen = '${cang_ku}' GROUP BY  qu_yu_, cun_chu_tiao_jian, qu_yu_,fang_xiang_ order by wei_zhi_ asc`
             var this_ = this
             curdPost('sql', sqlString).then((response) => {
                 this_.quyu_arr = response.variables.data
                 this_.quyu_arr.forEach((it) => {
-                    it.wei_zhi_.includes('-') ? '' : (it.qu_yu_ = it.qu_yu_ + it.wei_zhi_.slice(3, 4))
+                    if (it.fang_xiang_) {
+                        it.qu_yu_ = it.qu_yu_ + it.fang_xiang_
+                    }
                 })
                 if (!this.firstLoadActive) {
                     this_.formInline.qu_yu_value = ''
@@ -201,32 +208,16 @@ export default {
             this.loading = true
             // 首次加载视图数据 默认中心仓库 耗材区
             this.formInline.cang_ku_ming_chen_value = '主仓库'
-            this.formInline.qu_yu_value = '1号冰箱'
+            this.formInline.qu_yu_value = '1号冰箱T'
             this.selectActive = 1
             this.firstLoadActive = true
-            this.quyuShow = '1号冰箱'
-            var sqlString =
-        'select * from t_mjwlgl where cun_fang_wei_zhi_ like' +
-        "'%" +
-        'BX1T' +
-        "%'"
-            await this.queryLoad(sqlString, 'BX1T')
+            this.quyuShow = '1号冰箱T'
+            await this.queryLoad('1号冰箱T')
             this.loading = false
         },
         sqlSlice (value, num) {
-            if (value.includes('冰箱')) {
-                if (value.includes('T') || value.includes('B') || value.includes('L') || value.includes('R')) {
-                    return 'BX' + num + value.slice(4, 5)
-                } else {
-                    return 'BX' + num
-                }
-            } else if (value.includes('货架')) {
-                return 'HJ' + num
-            } else if (value.includes('试剂柜')) {
-                return 'SJG' + num
-            } else if (value.includes('液氮罐')) {
-                return 'YDG' + num
-            }
+            // const item = this.quyu_arr.find((i) => { return i.qu_yu_ + `(` + i.cun_chu_tiao_jian + `)` === value })
+            return value
         },
         loadQueryData () {
             // 查询选择仓库数据查询
@@ -247,13 +238,12 @@ export default {
             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 + "%'"
-            await this.queryLoad(sqlString, type)
+            await this.queryLoad(type)
             this.formInline.qu_yu_value = value
             this.quyuShow = value
             this.loading = false
         },
-        async queryLoad (sql, py) {
+        async queryLoad (py) {
             const this_ = this
             var datas = []
             var datalist = []
@@ -261,58 +251,53 @@ export default {
             const labelsMap = {} // map存储
             let typeData = []
             var sqltype = ''
-            if (py.includes('YDG')) {
-                sqltype = `select DISTINCT SUBSTR(wei_zhi_,1,9) as wei_zhi_ from t_ck where wei_zhi_ like ` + "'%" + py + "%'" + 'ORDER BY wei_zhi_ ASC ' //
-            } else {
-                sqltype = `select  wei_zhi_ from t_ck where wei_zhi_ like ` + "'%" + py + "%'" + 'ORDER BY wei_zhi_ ASC ' //
-            }
+            sqltype = `select  wei_zhi_ from t_ck where cang_ku_ming_chen = '${this_.formInline.cang_ku_ming_chen_value}' and CONCAT(IFNULL(qu_yu_, ''),IFNULL(fang_xiang_, '')) =  ` + "'" + py + "'" + 'ORDER BY wei_zhi_ ASC ' //
             await curdPost('sql', sqltype).then(async (res) => {
                 typeData = res.variables.data // 查询该位置具有多少层
-                await curdPost('sql', sql).then(async (res) => {
-                    // sql 查询该位置在物料管理库存信息的物料
-                    datas = res.variables.data // 该位置的库存信息
+
+                // sql 查询该位置在物料管理库存信息的物料
+
+                typeData.forEach((item) => {
+                    const num = item.wei_zhi_.split('-').find(value => { return !isNaN(parseFloat(value)) && isFinite(value) })
+                    labelsMap[num] = []
+                })
+                // if (datas.length == 0) {
+                // 没有物料存在该位置
+                for (var prop in labelsMap) {
                     typeData.forEach((item) => {
-                        const num = item.wei_zhi_.split('-')[1]
-                        labelsMap[num] = []
+                        // 组件以货架分层的数据: {1:[],2:[],3:[],4:[],5:[],6}
+                        const num = item.wei_zhi_.split('-').find(value => { return !isNaN(parseFloat(value)) && isFinite(value) })
+                        if (num === prop) {
+                            labelsMap[prop].push({ cun_fang_wei_zhi_: item.wei_zhi_, panduan: '' })
+                        }
                     })
-                    // if (datas.length == 0) {
-                    // 没有物料存在该位置
-                    for (var prop in labelsMap) {
-                        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_, panduan: '' })
-                            }
-                        })
-                    }
-                    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 = 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)
-                                    }
-                                })
-                            }
+                }
+                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 = 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 = datalist
-                })
+                }
+                this_.listData = datalist
             })
         },
         async qu_yu_Event (e) { // 点击区域事件，加载可视化视图
             this.loading = true
-            const value = e.target.innerText
+            const value = e
             const num = value.split('号')[0]
+
             const type = this.sqlSlice(value, num)
-            var sqlString = `select * from t_mjwlgl where cun_fang_wei_zhi_ like ` + "'%" + type + "%'"
-            await this.queryLoad(sqlString, type)
+            await this.queryLoad(type)
             this.formInline.qu_yu_value = value
             this.quyuShow = value
             this.loading = false
@@ -346,7 +331,7 @@ export default {
   .huojia {
     width: 100%;
     .list-items {
-      display: flex;
+    //   display: flex;
       cursor: pointer;
       .quyu-item {
         border: 1px solid #a172ab;
@@ -365,6 +350,7 @@ export default {
         margin-bottom: 6px;
         border-radius: 10px;
         position: relative;
+        display: inline-block;
         .tiaojian {
           font-size: 12px;
         }
@@ -381,7 +367,7 @@ export default {
 
     .right-view{
       box-sizing: border-box;
-      height: calc(100vh - 200px);
+      height: calc(100vh - 250px);
       overflow-x: hidden;
       overflow-y: scroll;
     }

src/views/warehouse/cangku.vue

@@ -53,15 +53,16 @@
                         :key="item.qu_yu_"
                         class="list-item quyu-item"
                         :style="{background: quyuShow == item.qu_yu_ ? '#66b1ff' : '#e5baba',}"
-                        @click="qu_yu_Event"
+                        @click="qu_yu_Event(item.qu_yu_ )"
                     >
-                        <div v-if="item.qu_yu_.includes('冰箱')">
-                            {{ item.qu_yu_ | freezerFilters }}({{ item.cun_chu_tiao_jian }})
+                        <div v-if="item.qu_yu_.includes('冰箱')||item.qu_yu_.includes('冷藏柜')||item.qu_yu_.includes('冷冻柜')">
+                            <div style="display: inline-block; height: 100%;">{{ item.qu_yu_ }}</div>
+                            <div style="display: inline-block;">({{ item.cun_chu_tiao_jian }})</div>
                         </div>
 
-                        <div v-if="!item.qu_yu_.includes('冰箱')">
-
-                            {{ item.qu_yu_ | freezerFilters }}
+                        <div v-else><div style="display: inline-block; height: 100%;" @click="qu_yu_Event" />
+                            <div style="display: inline-block; height: 100%;"> {{ item.qu_yu_ }}
+                            </div>
                         </div>
                     </li>
                 </ul>
@@ -143,24 +144,16 @@ export default {
         laySlice: function (value) {
             return value.split('-')[2]
         },
-        freezerFilters: function (value) {
-            if (value.includes('冷藏柜')) {
-                return value.replace('冷藏柜', '冰箱')
-            } else if (value.includes('冷冻柜')) {
-                return value.replace('冷冻柜', '冰箱')
-            } else {
-                return value
-            }
-        },
+
         specimenFilters: function (value) {
-            if (value == '' || value == undefined) {
+            if (value === '' || value === undefined) {
                 return '未占用'
             } else {
                 return value
             }
         },
         bian_hao_Filters: function (value) {
-            if (!value || value == undefined || value == '') {
+            if (!value || value === undefined || value === '') {
                 return '无'
             } else {
                 return value
@@ -172,7 +165,7 @@ export default {
             cangkuOption: [],
             formInline: {
                 cang_ku_ming_chen_value: ' 主仓库',
-                qu_yu_value: '1号冰箱',
+                qu_yu_value: '1号冰箱T',
                 huo_jia_value: ''
             },
             huojiaInfo: {
@@ -203,7 +196,6 @@ export default {
             this.firstLoadQuyu(newdata)
         },
         'formInline.qu_yu_value': function (newdata) {
-            console.log(newdata)
             this.qu_yu_value = newdata
             this.quyuShow = newdata.split('(')[0]
             this.firstLoadActive = false
@@ -216,14 +208,16 @@ export default {
     },
     methods: {
         firstLoadQuyu (cang_ku) {
-            const sqlString = `select DISTINCT subStr(wei_zhi_,1,4) as wei_zhi_,cun_chu_tiao_jian,qu_yu_ from t_ck where cang_ku_ming_chen = '${cang_ku}' order by wei_zhi_ asc`
+            const sqlString = `select wei_zhi_, cang_ku_ming_chen, qu_yu_, fang_xiang_ ,cun_chu_tiao_jian from t_ck  where cang_ku_ming_chen = '${cang_ku}' GROUP BY  qu_yu_, cun_chu_tiao_jian, qu_yu_,fang_xiang_ order by wei_zhi_ asc`
 
             var this_ = this
 
             curdPost('sql', sqlString).then((response) => {
                 this_.quyu_arr = response.variables.data
                 this_.quyu_arr.forEach(it => {
-                    it.wei_zhi_.includes('-') ? '' : it.qu_yu_ = it.qu_yu_ + it.wei_zhi_.slice(3, 4)
+                    if (it.fang_xiang_) {
+                        it.qu_yu_ = it.qu_yu_ + it.fang_xiang_
+                    }
                 })
                 if (!this.firstLoadActive) {
                     this_.formInline.qu_yu_value = ''
@@ -234,28 +228,15 @@ export default {
             this.loading = true
             // 首次加载视图数据 默认中心仓库 耗材区
             this.formInline.cang_ku_ming_chen_value = '主仓库'
-            this.formInline.qu_yu_value = '1号冰箱'
+            this.formInline.qu_yu_value = '1号冰箱T'
             this.selectActive = 1
             this.firstLoadActive = true
             this.quyuShow = '1号冰箱T'
-            var sqlString = 'select * from t_mjwlgl where cun_fang_wei_zhi_ like' + "'%" + 'BX1T' + "%'"
-            await this.queryLoad(sqlString, 'BX1T')
+            await this.queryLoad('1号冰箱T')
             this.loading = false
         },
         sqlSlice (value, num) {
-            if (value.includes('冰箱')) {
-                if (value.includes('T') || value.includes('B') || value.includes('L') || value.includes('R')) {
-                    return 'BX' + num + value.slice(4, 5)
-                } else {
-                    return 'BX' + num
-                }
-            } else if (value.includes('货架')) {
-                return 'HJ' + num
-            } else if (value.includes('试剂柜')) {
-                return 'SJG' + num
-            } else if (value.includes('液氮罐')) {
-                return 'YDG' + num
-            }
+            return value
         },
         loadQueryData () { // 查询选择仓库数据查询
             var sqlString = 'select distinct cang_ku_ming_chen from t_ck '
@@ -275,17 +256,12 @@ export default {
             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 +
-        "%'"
-
-            await this.queryLoad(sqlString, type)
+            await this.queryLoad(type)
             this.formInline.qu_yu_value = value
             this.quyuShow = value
             this.loading = false
         },
-        async queryLoad (sql, py) {
+        async queryLoad (py) {
             const this_ = this
 
             var datas = []
@@ -294,24 +270,19 @@ export default {
             const labelsMap = {} // 货架分层的数据初始化
             let typeData = []
             var sqltype = ''
-            if (py.includes('YDG')) {
-                sqltype = `select DISTINCT SUBSTR(wei_zhi_,1,9) as wei_zhi_ from t_ck where wei_zhi_ like ` + "'%" + py + "%'" + 'ORDER BY wei_zhi_ ASC ' //
-            } else {
-                sqltype = `select  wei_zhi_ from t_ck where wei_zhi_ like ` + "'%" + py + "%'" + 'ORDER BY wei_zhi_ ASC ' //
-            }
-
+            sqltype = `select  wei_zhi_ from t_ck where cang_ku_ming_chen = '${this_.formInline.cang_ku_ming_chen_value}' and CONCAT(IFNULL(qu_yu_, ''),IFNULL(fang_xiang_, '')) =  ` + "'" + py + "'" + 'ORDER BY wei_zhi_ ASC ' //
             await curdPost('sql', sqltype).then(async (res) => {
                 typeData = res.variables.data // 查询该位置具有多少层
                 // curdPost('sql', sql).then((res) => { // sql 查询该位置在物料管理库存信息的物料
                 datas = res.variables.data// 该位置的所有物料信息
                 typeData.forEach((item) => { // 组件以货架分层的数据: {1:[],2:[],3:[],4:[],5:[],6}
-                    const num = item.wei_zhi_.split('-')[1]
+                    const num = item.wei_zhi_.split('-').find(value => { return !isNaN(parseFloat(value)) && isFinite(value) })
                     labelsMap[num] = []// 货架分层的数据初始化
                 })
                 // if (datas.length == 0) { // 该位置(冰箱)一个物料都没有
                 for (var prop in labelsMap) {
                     typeData.forEach((item) => { // 组件以货架分层的数据: {1:[],2:[],3:[],4:[],5:[],6}
-                        const num = item.wei_zhi_.split('-')[1]
+                        const num = item.wei_zhi_.split('-').find(value => { return !isNaN(parseFloat(value)) && isFinite(value) })
                         if (num === prop) {
                             labelsMap[prop].push({ cun_fang_wei_zhi_: item.wei_zhi_, wu_liao_ming_chen: '' })
                         }
@@ -374,11 +345,12 @@ export default {
         },
         async qu_yu_Event (e) { // 点击区域事件，加载可视化视图
             this.loading = true
-            const value = e.target.innerText
+            const value = e
+            console.log(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 + "%'"
-            await this.queryLoad(sqlString, type)
+            await this.queryLoad(type)
             this.formInline.qu_yu_value = value
             this.quyuShow = value
             this.loading = false
@@ -440,7 +412,7 @@ export default {
           // right: 0px;
           // top: 0px;
           // background-color: #f56c6c;
-          // border-radius: 10px;
+          // border-radius: 10px;ght
           // color: #fff;
           // display: inline-block;
           // font-size: 12px;
@@ -486,7 +458,7 @@ export default {
     }
     .right-view {
       box-sizing: border-box;
-      height: calc(100vh - 260px);
+      height: calc(100vh - 340px);
       overflow-x: hidden;
       overflow-y: scroll;
       .goods-items {