fix：仓库可视化卡顿修改

src/views/component/zhuposition.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sample-content">
-    <div @click="clickBtn" style="cursor: pointer">
+    <div @click="clickBtn" style="cursor: pointer" ref="cangku">
       <!-- <div>点击视图选择位置</div> -->
       <el-input
         placeholder="请输入内容"
@@ -63,25 +63,17 @@
           <ul class="list-items">
             <li
               class="list-item quyu-item"
-              :style="{
-                background: quyuShow == item.qu_yu_ ? '#FF9900' : '#e5baba',
-              }"
+              :style="{background: quyuShow == item.qu_yu_ ? '#FF9900' : '#e5baba',}"
               @click="qu_yu_Event"
               v-for="item in quyu_arr"
               :key="item.qu_yu_"
             >
-              <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>
+              <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>
           </ul>
         </div>
       </div>
-
       <div class="body-content">
         <div class="right-view">
           <div class="goods-items">
@@ -92,17 +84,13 @@
             >
               <div>
                 <div class="goods-level">
-                  <div class="level-dsc">
-                    第{{ index | indexfilter(listData) }}层
-                  </div>
+                  <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' : '',
-                      }"
+                      :style="{background: !it.wu_liao_bian_ma_ ? '#67c23a' : '',}"
                       @click="closeView(it)"
                     >
                       <div class="top-dsc">
@@ -112,24 +100,17 @@
                           <p>位置：{{ it.cun_fang_wei_zhi_ || "空" }}</p>
                           <p>货号:{{ it.huo_hao_ || "空" }}</p>
                         </div>
-                        <div class="right-content">
+                        <div class="position right-content ">
                           <p>入库批号:{{ it.ru_ku_pi_hao_ || "空" }}</p>
                           <p>存储条件:{{ it.cun_chu_yao_qiu_ || "空" }}</p>
                           <p>有效期:{{ it.you_xiao_qi_ || "空" }}</p>
                           <p>库存量：{{ it.ku_cun_liang_ || "空" }}</p>
                         </div>
-                        <!-- <div class="condition">{{ it.cun_chu_tiao_jian }}</div> -->
-                      </div>
-                      <div class="bottom-dsc">
-                        <!-- {{ it.wu_pin_ming_cheng | specimenFilters }} -->
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-              <!-- <div class="goodshelf-name" v-if="index == 1">
-                {{ desString }}
-              </div> -->
             </div>
           </div>
         </div>
@@ -175,7 +156,6 @@ export default {
   },
   filters: {
     indexfilter: function (value, data) {
-      console.log(value, data);
       if (data[0]) {
         return value + 1;
       } else {
@@ -223,7 +203,6 @@ export default {
     },
     closeView(value) {
       let dom  = document.getElementById("el-tooltip-2390");
-      console.log(dom,"dom")
       const name = "cunFangWeiZhi"; //其他字段属性
       this.$emit("change-data", name, value.cun_fang_wei_zhi_);
       const name2 = "cangKuMingCheng"; //其他字段属性
@@ -239,7 +218,6 @@ export default {
 
       curdPost("sql", sqlString).then((response) => {
         this_.quyu_arr = response.variables.data;
-        console.log(this_.quyu_arr, "sqlqrr");
         this_.quyu_arr.forEach((it) => {
           it.wei_zhi_.includes("-")
             ? ""
@@ -303,13 +281,7 @@ export default {
       let value = this.formInline.qu_yu_value;
       let num = value.split("号")[0];
       let type = this.sqlSlice(value, num);
-      console.log(type);
-      var sqlString =
-        `select * from t_mjwlgl where cun_fang_wei_zhi_ like ` +
-        "'%" +
-        type +
-        "%'";
-      console.log(sqlString);
+      var sqlString =`select * from t_mjwlgl where cun_fang_wei_zhi_ like ` +"'%" +type +"%'";
       this.queryLoad(sqlString, type);
       this.formInline.qu_yu_value = value;
       this.quyuShow = value;
@@ -325,14 +297,12 @@ export default {
       }else{
         sqltype = `select DISTINCT SUBSTR(wei_zhi_,1,6) as wei_zhi_ from t_ck where wei_zhi_ like ` +"'%" +py +"%'" +"ORDER BY wei_zhi_ ASC "; //
       }
-      console.log(sqltype, sql, "传进来参数");
       curdPost("sql", sqltype).then((res) => {
         typeData = res.variables.data; //查询该位置具有多少层
         curdPost("sql", sql).then((res) => {
           //sql 查询该位置在物料管理库存信息的物料
           datas = res.variables.data; // 该位置的库存信息
           typeData.forEach((item) => {
-            //组件以货架分层的数据: {1:[],2:[],3:[],4:[],5:[],6}
             let num = item.wei_zhi_.split("-")[1];
             labelsMap[num] = [];
           });
@@ -386,7 +356,6 @@ export default {
             }
           }
           this.listData = newarr;
-          console.log(this.listData, "listData");
         });
       });
     },
@@ -395,13 +364,7 @@ export default {
       let value = e.target.innerText;
       let num = value.split("号")[0];
       let type = this.sqlSlice(value, num);
-      console.log(type);
-      var sqlString =
-        `select * from t_mjwlgl where cun_fang_wei_zhi_ like ` +
-        "'%" +
-        type +
-        "%'";
-      console.log(sqlString);
+      var sqlString =`select * from t_mjwlgl where cun_fang_wei_zhi_ like ` +"'%" + type +"%'";
       this.queryLoad(sqlString, type);
       this.formInline.qu_yu_value = value;
       this.quyuShow = value;
@@ -481,9 +444,6 @@ p {
     .list-items {
       display: flex;
       cursor: pointer;
-      .wDTianjian::after {
-        content: "2-6";
-      }
       .quyu-item {
         border: 1px solid #a172ab;
         background: #0099cc;
@@ -499,24 +459,9 @@ p {
         line-height: 30px;
         margin-left: 20px;
         margin-bottom: 6px;
-        /* margin-top: 6px; */
         border-radius: 10px;
         position: relative;
         .tiaojian {
-          // position: absolute;
-          // right: 0px;
-          // top: 0px;
-          // background-color: #f56c6c;
-          // border-radius: 10px;
-          // color: #fff;
-          // display: inline-block;
-          // font-size: 12px;
-          // height: 18px;
-          // line-height: 18px;
-          // padding: 0 6px;
-          // text-align: center;
-          // white-space: nowrap;
-          // border: 1px solid #fff;
           font-size: 12px;
         }
       }
@@ -530,8 +475,9 @@ p {
   .body-content {
     margin-bottom: 70px;
     display: flex;
-    box-sizing: border-box;
-    height: calc(100vh - 240px);
+    // box-sizing: border-box;
+    //  height:200px;
+    // overflow: scroll;  
     overflow-x: hidden;
     overflow-y: scroll;
     .black {
@@ -546,7 +492,6 @@ p {
       z-index: 99;
     }
     .left-table {
-      // width: 40%;
       ::v-deep .el-table {
         width: 40%;
       }
@@ -565,7 +510,6 @@ p {
           border-bottom: 1px solid bisque;
           margin: 0 auto;
           text-align: center;
-          // overflow-y: scroll;
           .goods-level {
             display: flex;
             position: relative;
@@ -579,48 +523,39 @@ p {
           }
           .goods-list {
             display: flex;
-            // justify-content: flex-start;
             flex-wrap: wrap-reverse;
             align-content: flex-start;
             margin-left: 50px;
             margin-right: 15px;
             .goods-dsc {
               cursor: pointer;
-              // width: 170px;
-              // height: 80px;
               padding: 6px 12px;
               border-radius: 5px;
               background: #e6a23c;
               margin-left: 12px;
               margin-top: 6px;
-              //   background-color: aliceblue;
               box-sizing: border-box;
               .top-dsc {
                 display: flex;
-                justify-content: space-between;
-                font-size: 12px;
-                height: 18px;
-                line-height: 18px;
+                // justify-content: space-between;
+                // font-size: 12px;
+                // height: 18px;
+                // line-height: 18px;
                 .position > p {
                   text-align: left;
-                  // color: #fbe8ff;
+                  height: 18px;
+                  line-height: 18px;
+                //   display: inline-block;
+                //   height: 18px;
+                // line-height: 18px;
                 }
                 .right-content > p {
+                //   display: inline-block;
                   margin-left: 15px;
-                  // color: #fbe8ff;
-                  text-align: left;
+                //   text-align: left;
+                //   height: 18px;
+                // line-height: 18px;
                 }
-                // .condition {
-                //   // color: #fbe8ff;
-                // }
-              }
-              .bottom-dsc {
-                width: 100%;
-                font-size: 18px;
-                height: 42px;
-                line-height: 60px;
-                margin-top: 20px;
-                // color: #fbe8ff;
               }
               .goods-demo {
                 display: block;
@@ -652,7 +587,7 @@ p {
     }
   }
   .body-content::-webkit-scrollbar {
-    display: none; /*隐藏滚动条*/
+    // display: none; /*隐藏滚动条*/
   }
 }
 </style>