库存可视化界面

src/main/java/com/imcs/admin/business/constants/Status.java

@@ -1,11 +1,12 @@
 package com.imcs.admin.business.constants;
 
 public enum Status {
-    UNUSED(1, "未使用"),
     PRE_RESERVED(2, "预占用"),
+    UNUSED(1, "未使用"),
     IN_PROGRESS(3, "作业中"),
     USED(4, "已使用"),
     LOCKED(5, "锁定"),
+    NULL_PALLET(6, "空托盘占用"),
 
     OUT(1,"出库"),
     IN(2,"入库"),

src/main/java/com/imcs/admin/business/controller/WInventoryManagementController.java

@@ -58,5 +58,10 @@ public class WInventoryManagementController {
         return wInventoryManagementService.getPalletCodeMaterialCode(detail);
     }
 
+    @GetMapping("/signage")
+    public Result signage(){
+        return Result.success(wInventoryManagementService.signage());
+    }
+
 }
 

src/main/java/com/imcs/admin/business/dao/WInventoryManagementDao.java

@@ -26,5 +26,5 @@ public interface WInventoryManagementDao extends BaseMapper<WInventoryManagement
 
     List<WInventoryManagementDetail>  queryByInventoryManagementId(Long id);
 
-
+    List<WInventoryManagementDetail> selectByStorage(String storageLocation);
 }

src/main/java/com/imcs/admin/business/service/WInventoryManagementService.java

@@ -6,6 +6,7 @@ import com.imcs.admin.entity.WInventoryManagementDetail;
 import com.imcs.admin.entity.assemble.WInventoryManagementGroup;
 
 import java.util.List;
+import java.util.Map;
 
 /**
  * 物料挂载位置管理(WInventoryManagement)表服务接口
@@ -27,4 +28,6 @@ public interface WInventoryManagementService {
     PageInfo selectCountByMaterialCode(WInventoryManagementDetail detail);
 
     PageInfo getPalletCodeMaterialCode(WInventoryManagementDetail detail);
+
+    Map signage();
 }

src/main/java/com/imcs/admin/business/service/impl/WInventoryManagementServiceImpl.java

@@ -1,14 +1,19 @@
 package com.imcs.admin.business.service.impl;
 
+import cn.hutool.core.collection.CollectionUtil;
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.github.pagehelper.PageHelper;
 import com.github.pagehelper.PageInfo;
+import com.imcs.admin.business.constants.Status;
 import com.imcs.admin.business.service.WInventoryManagementService;
-import com.imcs.admin.entity.WInventoryManagement;
-import com.imcs.admin.entity.WInventoryManagementDetail;
+import com.imcs.admin.entity.*;
 import com.imcs.admin.entity.assemble.WInventoryManagementGroup;
 import org.springframework.stereotype.Service;
 
-import java.util.List;
+import java.util.*;
+import java.util.concurrent.atomic.AtomicInteger;
+import java.util.concurrent.atomic.AtomicReference;
 
 /**
  * 物料挂载位置管理(WInventoryManagement)表服务实现类
@@ -51,4 +56,161 @@ public class WInventoryManagementServiceImpl extends BaseServiceImpl implements
         PageInfo pageInfo=new PageInfo(list);
         return pageInfo;
     }
+
+    @Override
+    public Map signage() {
+        Map map=new HashMap<>();
+        LambdaQueryWrapper<WWarehouseManagement> wrapper= Wrappers.lambdaQuery(WWarehouseManagement.class).eq(WWarehouseManagement::getWarehouseType,1);
+        List<WWarehouseManagement> wWarehouseManagements = wWarehouseManagementMapper.selectList(wrapper);
+        AtomicInteger shelfCount= new AtomicInteger();
+        wWarehouseManagements.forEach(ware->{
+            LambdaQueryWrapper<WShelfManagement> shelfWrapper= Wrappers.lambdaQuery(WShelfManagement.class).eq(WShelfManagement::getWarehouseManagementId,ware.getId());
+            List<WShelfManagement> wShelfManagementList = wShelfManagementDao.selectList(shelfWrapper);
+            shelfCount.addAndGet(wShelfManagementList.size());
+            wShelfManagementList.forEach(shelf->{
+
+                AtomicInteger allCount=new AtomicInteger(0);
+                AtomicInteger userdCount=new AtomicInteger(0);
+                AtomicInteger lockCount=new AtomicInteger(0);
+                AtomicInteger preReservedCount=new AtomicInteger(0);
+                AtomicInteger nullPalletCount=new AtomicInteger(0);
+                AtomicInteger unusedCount=new AtomicInteger(0);
+                LambdaQueryWrapper<WStorageLocationManagement> storageWrapper= Wrappers.lambdaQuery(WStorageLocationManagement.class).eq(WStorageLocationManagement::getShelfManagementId,shelf.getId()).eq(WStorageLocationManagement::getPalletType,1);
+                List<WStorageLocationManagement> storageManagementList = wStorageLocationManagementDao.selectList(storageWrapper);
+                storageManagementList.forEach(storage->{
+                    List<WInventoryManagementDetail> bigWInventoryManagementDetailList=wInventoryManagementDao.selectByStorage(storage.getLocationCode());
+                    storage.setWInventoryManagementDetailList(bigWInventoryManagementDetailList);
+
+                    if(CollectionUtil.isNotEmpty(bigWInventoryManagementDetailList)){
+                        userdCount.addAndGet(1);
+                    }
+                    if(storage.getStorageLocationStatus() == Status.LOCKED.getCode()){
+                        lockCount.addAndGet(1);
+                    }
+                    if(storage.getStorageLocationStatus() == Status.PRE_RESERVED.getCode()){
+                        preReservedCount.addAndGet(1);
+                    }
+                    if(storage.getStorageLocationStatus() == Status.NULL_PALLET.getCode()){
+                        nullPalletCount.addAndGet(1);
+                    }
+                    if(storage.getStorageLocationStatus() == Status.UNUSED.getCode()){
+                        unusedCount.addAndGet(1);
+                    }
+
+                    LambdaQueryWrapper<WStorageLocationManagement> smallStorageWrapper= Wrappers.lambdaQuery(WStorageLocationManagement.class).eq(WStorageLocationManagement::getParentId,storage.getId()).eq(WStorageLocationManagement::getPalletType,2);
+                    List<WStorageLocationManagement> smallStorageManagementList = wStorageLocationManagementDao.selectList(smallStorageWrapper);
+                    storage.setSubWStorageLocationManagementList(smallStorageManagementList);
+
+                    AtomicReference<Boolean> flag= new AtomicReference<>(true);
+                    smallStorageManagementList.stream().forEach(small->{
+                        List<WInventoryManagementDetail> wInventoryManagementDetailList=wInventoryManagementDao.selectByStorage(small.getLocationCode());
+                        small.setWInventoryManagementDetailList(wInventoryManagementDetailList);
+                        if(CollectionUtil.isNotEmpty(wInventoryManagementDetailList) && flag.get()){
+                            flag.set(false);
+                        }
+                        if(CollectionUtil.isNotEmpty(wInventoryManagementDetailList)){
+                            userdCount.addAndGet(1);
+                        }
+                        if(small.getStorageLocationStatus() == Status.LOCKED.getCode()){
+                            lockCount.addAndGet(1);
+                        }
+                        if(small.getStorageLocationStatus() == Status.PRE_RESERVED.getCode()){
+                            preReservedCount.addAndGet(1);
+                        }
+                        if(small.getStorageLocationStatus() == Status.NULL_PALLET.getCode()){
+                            nullPalletCount.addAndGet(1);
+                        }
+                        if(small.getStorageLocationStatus() == Status.UNUSED.getCode()){
+                            unusedCount.addAndGet(1);
+                        }
+
+
+                    });
+                    if(flag.get()){
+                        allCount.getAndAdd(1);
+                    }else{
+                        allCount.getAndAdd(smallStorageManagementList.size());
+                    }
+
+
+
+
+
+                });
+
+                Map<Integer, List<WStorageLocationManagement>> layerMap = new HashMap<>();
+
+                // 按层高归类库位，并对每层内的库位根据列进行排序
+                for (WStorageLocationManagement location : storageManagementList) {
+                    int layer = location.getStorageLocationZ();
+                    layerMap.computeIfAbsent(layer, k -> new ArrayList<>()).add(location);
+                }
+
+                // 对每一层的库位根据列进行排序
+                for (List<WStorageLocationManagement> locations : layerMap.values()) {
+                    locations.sort(Comparator.comparingInt(WStorageLocationManagement::getStorageLocationY));
+                }
+
+                // 将 layerMap 转换为 Entry 列表并按键从大到小排序
+                List<Map.Entry<Integer, List<WStorageLocationManagement>>> sortedEntries = new ArrayList<>(layerMap.entrySet());
+                sortedEntries.sort((entry1, entry2) -> entry2.getKey().compareTo(entry1.getKey()));
+                List<WStorageLocationManagement> childrenList=new ArrayList<>();
+                for (Map.Entry<Integer, List<WStorageLocationManagement>> entry : sortedEntries) {
+                    WStorageLocationManagement toolStorge=new WStorageLocationManagement();
+                    toolStorge.setChildren(entry.getValue());
+                    childrenList.add(toolStorge);
+                }
+                // 将分组后的值设置为 vo 的 children
+                shelf.setWStorageLocationManagementList(childrenList);
+
+                shelf.setAllCount(allCount.get());
+                shelf.setUseCount(userdCount.get());
+                shelf.setLockCount(lockCount.get());
+                shelf.setPreReservedCount(preReservedCount.get());
+                shelf.setUnuseCount(unusedCount.get());
+                shelf.setNullPalletCount(nullPalletCount.get());
+                /*int used = allStorage.stream().filter(use -> use.getStorageLocationStatus() == Status.USED.getCode()).collect(Collectors.toList()).size();
+                int unused = allStorage.stream().filter(use -> use.getStorageLocationStatus() == Status.UNUSED.getCode()).collect(Collectors.toList()).size();
+                int nullPattet = allStorage.stream().filter(use -> use.getStorageLocationStatus() == Status.NULL_PALLET.getCode()).collect(Collectors.toList()).size();
+                int lock = allStorage.stream().filter(use -> use.getStorageLocationStatus() == Status.LOCKED.getCode()).collect(Collectors.toList()).size();
+                int preReserved = allStorage.stream().filter(use -> use.getStorageLocationStatus() == Status.PRE_RESERVED.getCode()).collect(Collectors.toList()).size();*/
+
+
+                /*shelf.setUseCount(used);
+                shelf.setUnuseCount(unused);
+                shelf.setNullPalletCount(nullPattet);
+                shelf.setLockCount(lock);
+                shelf.setPreReservedCount(preReserved);*/
+
+
+
+
+            });
+            map.put("shelfList",wShelfManagementList);
+        });
+        LambdaQueryWrapper<WStorageLocationManagement> allStorageWrapper= Wrappers.lambdaQuery(WStorageLocationManagement.class);
+        Long allStorageLocation = wStorageLocationManagementDao.selectCount(allStorageWrapper);
+
+        LambdaQueryWrapper<WStorageLocationManagement> useStorageWrapper= Wrappers.lambdaQuery(WStorageLocationManagement.class).eq(WStorageLocationManagement::getStorageLocationStatus, Status.USED.getCode());
+        Long useStorageLocation = wStorageLocationManagementDao.selectCount(useStorageWrapper);
+
+        LambdaQueryWrapper<WStorageLocationManagement> unusedStorageWrapper= Wrappers.lambdaQuery(WStorageLocationManagement.class).eq(WStorageLocationManagement::getStorageLocationStatus, Status.UNUSED.getCode());
+        Long unuseStorageLocation = wStorageLocationManagementDao.selectCount(unusedStorageWrapper);
+
+        LambdaQueryWrapper<WStorageLocationManagement> nullPalletStorageWrapper= Wrappers.lambdaQuery(WStorageLocationManagement.class).eq(WStorageLocationManagement::getStorageLocationStatus, Status.NULL_PALLET.getCode());
+        Long nullPalletStorageLocation = wStorageLocationManagementDao.selectCount(nullPalletStorageWrapper);
+
+        LambdaQueryWrapper<WStorageLocationManagement> lockStorageWrapper= Wrappers.lambdaQuery(WStorageLocationManagement.class).eq(WStorageLocationManagement::getStorageLocationStatus, Status.LOCKED.getCode());
+        Long lockStorageLocation = wStorageLocationManagementDao.selectCount(lockStorageWrapper);
+
+        map.put("wareCount",wWarehouseManagements.size());//库房数
+        map.put("shelfCount",shelfCount.get());//货架数
+        map.put("allCount",allStorageLocation);//库位数
+        map.put("useCount",useStorageLocation);//已占用库位数
+        map.put("unuseCount",unuseStorageLocation);//空库位数
+        map.put("nullPalletCount",nullPalletStorageLocation);//空托盘占用库位数
+        map.put("lockCount",lockStorageLocation);//锁定库位数
+
+        return map;
+    }
 }

src/main/java/com/imcs/admin/entity/WShelfManagement.java

@@ -72,5 +72,29 @@ public class WShelfManagement implements Serializable {
 
     //巷道距离
     private Integer distanceRoadwayNumber;
+
+    //货架库位总数
+    @TableField(exist = false)
+    private Integer allCount;
+
+    //已使用库位
+    @TableField(exist = false)
+    private Integer useCount;
+
+    //锁定库位
+    @TableField(exist = false)
+    private Integer lockCount;
+
+    //预占用
+    @TableField(exist = false)
+    private Integer preReservedCount;
+
+    //空库位
+    @TableField(exist = false)
+    private Integer unuseCount;
+
+    //空托盘占用库位
+    @TableField(exist = false)
+    private Integer nullPalletCount;
 }
 

src/main/java/com/imcs/admin/entity/WStorageLocationManagement.java

@@ -90,6 +90,13 @@ public class WStorageLocationManagement implements Serializable {
     @TableField(exist = false)
     List<WStorageLocationManagement> subWStorageLocationManagementList;
 
+    //库位挂载物料
+    @TableField(exist = false)
+    List<WInventoryManagementDetail> wInventoryManagementDetailList;
+    @TableField(exist = false)
+    List<WStorageLocationManagement> children;
 
+    @TableField(exist = false)
+    Boolean flag;
 }
 

src/main/resources/mapper/WInventoryManagementDao.xml

@@ -91,4 +91,21 @@
         from w_inventory_management_detail where
             inventory_management_id =#{id}
     </select>
+    <select id="selectByStorage" resultType="com.imcs.admin.entity.WInventoryManagementDetail">
+
+
+        SELECT
+            *
+        FROM
+            w_inventory_management_detail
+        WHERE
+                inventory_management_id IN (
+                SELECT
+                    id
+                FROM
+                    w_inventory_management
+                WHERE
+                    storage_location_code =#{storageLocation})
+
+    </select>
 </mapper>

src/main/resources/static/wms/stock/signage.html

@@ -0,0 +1,357 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <!-- import CSS -->
+    <link rel="stylesheet" href="../../css/index.css">
+    <!-- import Vue before Element -->
+    <script src="../../js/vue.js"></script>
+    <!-- import JavaScript -->
+    <script src="../../js/index.js"></script>
+    <script src="../../js/axios.js"></script>
+</head>
+<body>
+<div id="app" v-cloak>
+        <!-- 统计数据区域 -->
+        <el-row :gutter="20" class="rowCls" style="    margin-left: 20px;">
+            <el-col :xs="12" :sm="8" :lg="5">
+                <div class="blockDiv blockBg1">
+                    <h1>{{wareCount}}<span class="danweiSpan">个</span></h1>
+                    <p>仓库</p>
+                </div>
+            </el-col>
+
+            <el-col :xs="12" :sm="8" :lg="5">
+                <div class="blockDiv blockBg2">
+                    <h1>{{shelfCount}}<span class="danweiSpan">个</span></h1>
+                    <p>货架</p>
+                </div>
+            </el-col>
+            <el-col :xs="12" :sm="8" :lg="5">
+                <div class="blockDiv blockBg3">
+                    <h1>{{allCount}}<span class="danweiSpan">个</span></h1>
+                    <p>库位</p>
+                </div>
+            </el-col>
+            <el-col :xs="12" :sm="8" :lg="5">
+                <div class="blockDiv blockBg4">
+                    <h1>{{useCount}}<span class="danweiSpan">个</span></h1>
+                    <p>已使用库位</p>
+                </div>
+            </el-col>
+            <el-col :xs="12" :sm="8" :lg="5">
+                <div class="blockDiv blockBg5">
+                    <h1>{{unuseCount}}<span class="danweiSpan">个</span></h1>
+                    <p>空库位</p>
+                </div>
+            </el-col>
+            <el-col :xs="12" :sm="8" :lg="5">
+                <div class="blockDiv blockBg6">
+                    <h1>{{nullPalletCount}}<span class="danweiSpan">个</span></h1>
+                    <p>空托盘库位</p>
+                </div>
+            </el-col>
+            <el-col :xs="12" :sm="8" :lg="5">
+                <div class="blockDiv blockBg7">
+                    <h1>{{lockCount}}<span class="danweiSpan">个</span></h1>
+                    <p>锁定库位</p>
+                </div>
+            </el-col>
+        </el-row>
+
+        <!-- 货架区域 -->
+        <div class="areaDiv" style="width: 100%;margin-left: 20px;">
+
+            <!-- 货架（单个） -->
+                <div class="tableBlock" v-for="item in shelvesTreeList" :key="item.id">
+                    <!-- 上部分-是个统计数据 -->
+                    <div class="topDiv">
+                        <span>{{item.shelfName}}（{{item.shelfCode}}）</span>
+                        <span class="topSpan allTongji">
+                            <span>总：{{item.allCount}}</span>
+
+                        </span>
+                        <span class="topSpan cunTongji">
+                            <span>存：{{item.useCount}}</span>
+
+                        </span>
+                        <span class="topSpan lockTongji">
+                            <span>锁定：{{item.lockCount}}</span>
+                        </span>
+                        <span class="topSpan lockTongji1">
+                            <span>预占用：{{item.preReservedCount}}</span>
+                        </span>
+                        <span class="topSpan emptyTongji1">
+                            <span>空托盘：{{item.nullPalletCount}}</span>
+                        </span>
+                        <span class="topSpan emptyTongji">
+                            <span>空库位：{{item.unuseCount}}</span>
+                        </span>
+
+                    </div>
+                    <!-- 中部-货架小格子 -->
+                    <table class="contentDiv" border="0" cellspacing="0" cellpadding="6">
+                        <tr v-for="(objTr, objIndex) in item.wstorageLocationManagementList" :key="objIndex">
+                            <td v-for="objTd in objTr.children" :key="objTd.id" :style="computedStyle1(objTd)" >
+                                <div v-if="check(objTd)" style="text-align: center;width: 75px;height: 52px;align-content: center; cursor: pointer;" @click="editOne(objTd)">{{objTd.locationCode}}</div>
+                                <div v-if="!check(objTd)" v-for="it in objTd.subWStorageLocationManagementList"  :style="computedStyle(it)" @click="editOne(it)"><span style="font-size: 15px;">{{it.locationCode}}</span></div>
+<!--
+                                <el-image v-if="objTd.palletType == '0'" class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image>
+-->
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+
+
+            <el-dialog
+                    title="库存明细"
+                    :visible.sync="dialogVisible"
+                    :before-close="handleClose">
+                    <el-table ref="singleTable" :data="migrationResultList" v-loading="loading" :border=true
+                              tooltip-effect="dark"
+                              highlight-current-row max-height="500" style="width: 100%;overflow-x: auto;"
+                              :default-sort="{prop: 'createDate', order: 'descending'}">
+
+                        <el-table-column prop="materialCode" label="物料编码" :show-overflow-tooltip="true"></el-table-column>
+                        <el-table-column prop="materialName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
+                        <el-table-column prop="amount" label="库存数量" :show-overflow-tooltip="true"></el-table-column>
+
+
+                    </el-table>
+                </el-dialog>
+        </div>
+    </div>
+</body>
+
+
+
+<script type="module">
+    new Vue({
+        el: '#app',
+        data: function () {
+            return {
+                shelvesTreeList: [],
+                wareCount: 0,
+                shelfCount: 0,
+                allCount: 0,
+                useCount: 0,
+                unuseCount: 0,
+                nullPalletCount: 0,
+                lockCount: 0,
+                topTongjiData: {"shelvesCount": 0, "storgeCount": 0,"instockCount": 0,"freestockCount": 0,"lockstockCount": 0},
+                dialogVisible: false,
+                migrationResultList: [],
+
+
+            }
+        },
+        created() {
+            console.log(1111)
+            this.queryClick();
+        },
+        methods: {
+            queryClick() {
+                this.loading = true;
+
+                axios.get('/wInventoryManagement/signage', {
+                })
+                    .then(response => {
+                        console.log(response)
+                        this.shelvesTreeList = response.data.data.shelfList;
+                        this.wareCount = response.data.data.wareCount;
+                        this.shelfCount = response.data.data.shelfCount;
+                        this.allCount = response.data.data.allCount;
+                        this.useCount = response.data.data.useCount;
+                        this.unuseCount = response.data.data.unuseCount;
+                        this.nullPalletCount = response.data.data.nullPalletCount;
+                        this.lockCount = response.data.data.lockCount;
+                        // 处理响应
+                        this.loading = false;
+                    })
+                    .catch(error => {
+                        // 处理错误
+                    });
+
+            },computedStyle1(it){
+                let color='';
+                if(it.storageLocationStatus===1){
+                    color= '';
+                }else if(it.storageLocationStatus===2){
+                    color= 'background:#ff9326;';
+                }else if(it.storageLocationStatus===3){
+                    color= 'background:#54cc39;';
+                }else if(it.storageLocationStatus===4){
+                    color= 'background:#0F79DC;';
+                }else if(it.storageLocationStatus===5){
+                    color= 'background:#E57878;';
+                }
+                return color;
+            },computedStyle(it){
+                let color='';
+                if(it.storageLocationStatus===1){
+                    color= '';
+                }else if(it.storageLocationStatus===2){
+                    color= 'background:#ff9326;';
+                }else if(it.storageLocationStatus===3){
+                    color= 'background:#54cc39;';
+                }else if(it.storageLocationStatus===4){
+                    color= 'background:#0F79DC;';
+                }else if(it.storageLocationStatus===5){
+                    color= 'background:#E57878;';
+                }
+                color=color+'margin-right: 10px;' +
+                    '        width: 75px;\n' +
+                    '        margin-top: 5px;\n' +
+                    '        border: 0.5px solid #AAAAAA;\n' +
+                    '        text-align: center; cursor: pointer;';
+                return color;
+            },handleClose(done){
+                this.dialogVisible=false;
+                done();
+            },editOne(it){
+                this.dialogVisible=true;
+                this.migrationResultList=it.winventoryManagementDetailList
+            },check(it){
+                let flag= it.subWStorageLocationManagementList.some(subItem => {
+                    return subItem.winventoryManagementDetailList && subItem.winventoryManagementDetailList.length > 0;
+                });
+
+
+               return  !(it.winventoryManagementDetailList === null || it.winventoryManagementDetailList?.length === 0) || !flag
+            }
+        }
+
+    })
+</script>
+
+
+<style>
+    .blockDiv{
+        position: relative;
+        border: 1px solid #EEEEEE;
+        padding-left: 15px;
+        -moz-border-radius: 5px;
+        -webkit-border-radius: 5px;
+        border-radius: 5px;
+        text-align: center;
+        color: white;
+        -moz-box-shadow: 1px 5px 5px #c0b7b7;
+        webkit-box-shadow: 1px 5px 5px #c0b7b7;
+        box-shadow: 1px 5px 5px #c0b7b7;
+        h1{
+            margin: 20px;
+            font-size: 45px;
+        }
+        p{
+            text-align: left;
+            color: #FFFFFF;
+        }
+    }
+    .danweiSpan{
+        display: inline-block;
+        font-size: 16px;
+        color: black;
+        margin-left: 15px;
+    }
+    .tableBlock{
+        margin: 15px 30px 15px 0;
+        display: inline-block;
+    }
+    .contentDiv{
+        margin: 10px 0;
+        border-left: 1px solid #AAAAAA;
+        border-top: 1px solid #AAAAAA;
+    }
+    .contentDiv tr td{
+        position: relative;
+
+        border-right: 1px solid #AAAAAA;
+        border-bottom: 1px solid #AAAAAA;
+    }
+    .blueBg{
+        background: #548EC5;
+        color: white;
+    }
+    .blockBg1{
+        background: #0F79DC;
+        border: 1px solid #0F79DC;
+    }
+    .blockBg2{
+        background: #8E66E4;
+        border: 1px solid #8E66E4;
+    }
+    .blockBg3{
+        background: #3EB64B;
+        border: 1px solid #3EB64B;
+    }
+    .blockBg4{
+        background: #0BA6D5;
+        border: 1px solid #0BA6D5;
+    }
+    .blockBg5{
+        background: #E57878;
+        border: 1px solid #E57878;
+    }
+    .blockBg6{
+        background: #E37B3D;
+        border: 1px solid #E37B3D;
+    }
+    .blockBg7{
+        background: #548EC5;;
+        border: 1px solid #548EC5;;
+    }
+    .rowCls{
+        background: white;
+        box-sizing: border-box;
+        border-bottom: 2px dotted #AAAAAA;
+        margin-bottom: 15px;
+    }
+    .rowCls .el-col{
+        margin-bottom: 20px;
+    }
+    .topSpan{
+        display: inline-block;
+        padding: 10px;
+        color: white;
+        border: 1px solid #FFFFFF;
+        border-radius: 5px;
+        margin-right: 5px;
+    }
+    .allTongji{
+        background: #0BA6D5;
+        border: 1px solid #0BA6D5;
+    }
+    .cunTongji{
+        background: #0F79DC;
+        border: 1px solid #0F79DC;
+    }
+    .lockTongji{
+        background: #E57878;
+        border: 1px solid #E57878;
+    }
+    .lockTongji1{
+        background: rgb(255, 147, 38);
+        border: 1px solid rgb(255, 147, 38);
+    }
+    .emptyTongji{
+        border: 1px solid #AAAAAA;
+        color: #333333;
+    }
+    .emptyTongji1{
+        background: #548EC5;
+        border: 1px solid #548EC5;
+    }
+    .topDiv{
+        text-align: center;
+    }
+
+    .box {
+        margin-right: 10px; /* 可选：设置两个div之间的间距 */
+        width: 75px;
+        margin-top: 5px;
+        border: 0.5px solid #AAAAAA;
+        text-align: center;
+    }
+</style>
+</html>