大屏

liuying

2024-12-01 6db85a1b10d891a3871775c2c555fd681cb7da34

 LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue

@@ -1,6 +1,6 @@
<template>
   <div>
      <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
      <!-- <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
         <el-form :model="formModel" ref="queryForm" labelWidth="90">
            <el-row>
               <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
@@ -36,39 +36,6 @@
                  </el-form-item>
               </el-col>

               <!-- 隐藏的筛选条件 -->
               <!-- <template>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
                <el-form-item label="锁定状态:">
                  <el-select v-model="formModel.isLocked" clearable placeholder="请选择锁定状态">
                    <el-option v-for="item in isAutoEnum" :key="item.value" :label="item.title" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">

                <el-form-item label="巷道:">
                  <el-select v-model="formModel.Lane" clearable placeholder="请选择巷道">
                    <el-option v-for="item in LangEnum" :key="item.value" :label="item.title" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
                <el-form-item label="所属排:">
                  <el-select v-model="formModel.Row" clearable placeholder="请选择所属排">
                    <el-option v-for="(item, index) in strorageRowEnum" :key="item" :label="`第${index + 1}排`"
                      :value="index + 1" />
                  </el-select>
                </el-form-item>
              </el-col>
            </template> -->
               <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
              <el-form-item label-width="20px">
                <el-button type="primary" icon="el-icon-search" @click="getLocationPage(2)">查询</el-button>
                <el-button icon="ele-Refresh" @click="() => formModel = {}"> 重置 </el-button>
              </el-form-item>
            </el-col> -->

               <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
                  <el-form-item>
                     <el-button-group style="display: flex; align-items: center">
@@ -81,7 +48,7 @@
               </el-col>
            </el-row>
         </el-form>
      </el-card>
      </el-card> -->

      <el-card class="full-table" shadow="hover" style="margin-top: 5px">
         <div class="msi-content" style="height: calc(100vh - 200px)">
@@ -91,25 +58,29 @@
                  <div class="storage-grid">
                     <div class="row rowMy0">
                        <div class="cell" v-for="(cell, cellIndex) in item.data" :key="cellIndex" v-show="cellIndex < 20">
                           <span class="textK" 

                  :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }"
                  >
                              {{ cell.laneNo }}{{ cell.layerNo }}{{ cell.columnNo }}
                           <span class="textK" :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }" @click="handleClick(cell)">
                              <!-- {{ cell.laneNo }} -->
                              <!-- PlaceCode: -->
                              {{ cell.placeCode }} 
                              <!-- {{ cell.layerNo }}{{ cell.columnNo }} -->
                           </span>
                        </div>
                     </div>
                     <div class="row rowMy1">
                        <div class="cell" v-for="(cell, cellIndex) in item.data" :key="cellIndex" v-show="cellIndex >= 20 && cellIndex < 40">
                           <span class="textK"   :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }">
                              {{ cell.laneNo }}{{ cell.layerNo }}{{ cell.columnNo }}
                           <span class="textK" :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }" @click="handleClick(cell)">
                              <!-- {{ cell.laneNo }} -->
                              {{ cell.placeCode }} 
                              <!-- {{ cell.layerNo }}{{ cell.columnNo }} -->
                           </span>
                        </div>
                     </div>
                     <div class="row rowMy2">
                        <div class="cell" v-for="(cell, cellIndex) in item.data" :key="cellIndex" v-show="cellIndex >= 40 && cellIndex <= 60">
                           <span class="textK"   :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }">
                              {{ cell.laneNo }}{{ cell.layerNo }}{{ cell.columnNo }}
                           <span class="textK" :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }" @click="handleClick(cell)">
                              <!-- {{ cell.laneNo }} -->
                              {{ cell.placeCode }} 
                              <!-- {{ cell.layerNo }}{{ cell.columnNo }} -->
                           </span>
                        </div>
                     </div>
@@ -131,15 +102,18 @@
            </div> -->

            <!-- 统计区域 -->
       <!-- <count-view :countData="countList"></count-view>  -->
            <!-- <count-view :countData="countList"></count-view>  -->
            <!-- 库位展示 -->
            <!-- <content-view :contentData="dataList"></content-view> -->
         </div>
      </el-card>

         <!-- 详情弹框 -->
         <prop-detail ref="propDetailRef"></prop-detail>
   </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue';
import { getCurrentInstance, nextTick, onMounted, ref } from 'vue';
//import SearchBar from '@/components/SearchBar.vue'
import { getStorageView } from '/@/api/main/ReportCenter/storageView';

@@ -147,6 +121,8 @@
import ContentView from './component/ContentView.vue';
import { ElMessage } from 'element-plus';
import { handleSlectDataWmsArea } from '/@/utils/selectData';
import PropDetail from './component/propDetail.vue';
const { proxy} :any = getCurrentInstance();// 访问实例上下文 proxy同时支持开发 线上环境

const showAdvanceQueryUIWmsStockQuan = ref(false);
// 改变高级查询的控件显示状态
@@ -158,7 +134,7 @@
   let color = '';
   switch (type) {
      case 1:
         color = '#F18201'; //橘色  正常
         color = '#F6C285'; //橘色  正常#F18201
         break;
      case 2:
         color = '#2BA6FF'; //蓝色 封存
@@ -305,7 +281,7 @@
   //   return
   // }
   //设置背景
	

   var res = await getStorageView(Object.assign(formModel.value, {}));
   if (res.data.code == 200) {
      const { data } = res;
@@ -424,6 +400,20 @@
console.log(66666666);

console.log(storageList.value);

const dialogVisible = ref(false); // 弹框可见性

const handleClick = (row: any) => {
   proxy.$refs['propDetailRef'].openDialog(row);
};

const openDialog = () => {
   dialogVisible.value = true; // 打开弹框
};

const handleClose = () => {
   dialogVisible.value = false; // 关闭弹框
};
</script>
<style lang="less" scoped>
.msi-content {
@@ -433,7 +423,7 @@
.storage-grid {
   display: flex;
   flex-direction: column; /* 垂直排列每一排 */
   width: 610px;
   width: 510px;
   // border: 1px solid red;
}

@@ -442,12 +432,12 @@
}

.cell {
   border: 1px solid gray; /* 每个格子的黑线 */
   border: 1px solid #c1c1c1; /* 每个格子的黑线 */
   height: 50px; /* 每个格子的高度 */
   display: inline-block;
   justify-content: center;
   align-items: center; /* 居中显示内容 */
   width: 30px;
   width: 49px;
}

.rowMy0 {
@@ -479,14 +469,16 @@
}
.t1 {
   margin: 10px 0 2px 0;
   font-size: 16px !important;
   padding-bottom: 10px;
}
.textK {
   display: flex; /* 使用 Flexbox 布局 */
   flex-direction: column;
   font-size: 12px;
   text-align: center;
  width: 100%;
  height: 100%; 
  color: white;
   width: 100%;
   height: 100%;
   color: white;
}
</style>