库存可视化页面卡顿优化

src/views/component/zhuposition.vue

@@ -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>

src/views/warehouse/cangku.vue

@@ -68,7 +68,7 @@
             </div>
         </div>
         <div class="body-content">
-            <div class="right-view">
+            <div v-loading="loading" class="right-view">
                 <div class="goods-items">
                     <div v-for="(item, index) in listData" :key="index" class="show-demo">
                         <div>
@@ -267,7 +267,8 @@ export default {
                 })
             })
         },
-        onSubmits () { // 头部按钮查询事
+        async onSubmits () { // 头部按钮查询事
+            this.loading = true
             this.desShow = false
             const value = this.formInline.qu_yu_value
             const num = value.split('号')[0]
@@ -277,14 +278,16 @@ export default {
         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 = {} // 货架分层的数据初始化
             let typeData = []
@@ -295,7 +298,7 @@ export default {
                 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) => { // sql 查询该位置在物料管理库存信息的物料
                 datas = res.variables.data// 该位置的所有物料信息
@@ -312,22 +315,23 @@ 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].wu_liao_ming_chen) {
-                            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].wu_liao_ming_chen) {
+                            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.wu_liao_ming_chen === '' && 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.wu_liao_ming_chen === '' && 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
                 //     return
                 // }
                 // datas.forEach((item) => { // 有物料存在该区域
@@ -366,14 +370,16 @@ export default {
                 // })
             })
         },
-        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
@@ -383,13 +389,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-ul {
-  margin: 0;
-}
-p {
-  padding: 0;
-  margin: 0;
-}
 .sample-content {
   width: 100%;
   .top-content {