自动化立体仓库 - WMS系统
zjj
2023-06-05 2e08b12324fc490d747078ea9e60d87c1b772063
src/main/webapp/views/home/map.html
@@ -239,7 +239,7 @@
        .hoverCard .card-button {
            transform: translate(-50%, 125%);
            width: 60%;
            width: 50%;
            border-radius: 1rem;
            border: none;
            background-color: #008bf8;
@@ -424,8 +424,8 @@
    </style>
</head>
<body>
<div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: wrap;" @click="bgClick()">
    <div style="flex: 12;" :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}">
<div id="app" style="display: flex;justify-content: space-between;margin-top: 50px;flex-wrap: nowrap; scale: 0.9" @click="bgClick()">
    <div style="flex: 4;" :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}">
        <div>
            <div class="pointContainer" v-for="(x,index) in map" :key="index">
                <div v-if="index != 0 && (index != map.length-1)" v-for="(y,idx) in x" :key="idx">
@@ -472,7 +472,7 @@
            </div>
        </div>
    </div>
    <div style="padding: 20px;flex: 5;margin-top: -70px;">
    <div style="padding: 20px;flex: 1;margin-top: -70px; ">
        <el-slider v-model="showScale" :marks="showScaleMarks"></el-slider>
        <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="hoverCard" style="width: 100%;">
@@ -520,44 +520,11 @@
                <button class="card-button">功能区</button>
            </div>
            <div class="hoverCard">
                <div class="card-details">
                    <div class="text-body" style="display: flex;justify-content: space-around;flex-wrap: wrap;">
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">空库位</div><div class="pointBox pointBoxBlue">O</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">在库</div><div class="pointBox pointBoxRed">F</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">空板</div><div class="pointBox pointBoxEmpty">D</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">出库中</div><div class="pointBox pointBoxOut">P</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">出库预约</div><div class="pointBox pointBoxOutYy">R</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">入库预约</div><div class="pointBox pointBoxInYy">S</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">搜索结果</div><div class="pointBox pointBoxSearch"></div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">选择结果</div><div class="pointBox pointBoxSelected"></div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;text-align: center">其他</div><div class="pointBox pointBoxDefault"></div>
                        </div>
                    </div>
                </div>
                <button class="card-button">库位状态</button>
            </div>
            <div class="hoverCard">
                <div class="card-details">
                    <p class="text-title" style="text-align: center;">楼层 {{currentLev}}F</p>
                    <p class="text-title" style="text-align: center;">库位层 {{currentLev}}</p>
                    <div class="text-body" style="display: flex;">
                        <div class="floorSelect">
                            <label for="01">1F</label>
@@ -600,6 +567,41 @@
                    </div>
                </div>
                <button class="card-button">库区 {{area}}</button>
            </div>
            <div class="hoverCard">
                <div class="card-details">
                    <div class="text-body" style="display: flex;justify-content: space-around;flex-wrap: wrap;">
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">空库位</div><div class="pointBox pointBoxBlue">O</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">在库</div><div class="pointBox pointBoxRed">F</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">空板</div><div class="pointBox pointBoxEmpty">D</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">出库中</div><div class="pointBox pointBoxOut">P</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">出库预约</div><div class="pointBox pointBoxOutYy">R</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">入库预约</div><div class="pointBox pointBoxInYy">S</div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">搜索结果</div><div class="pointBox pointBoxSearch"></div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;">选择结果</div><div class="pointBox pointBoxSelected"></div>
                        </div>
                        <div style="flex: 1;margin-top: 10px;">
                            <div style="font-size: 10px;text-align: center">其他</div><div class="pointBox pointBoxDefault"></div>
                        </div>
                    </div>
                </div>
                <button class="card-button">库位状态</button>
            </div>
        </div>
@@ -687,7 +689,7 @@
            rightBoxLeft: "0px",
            pointContainerWidth: 0,
            currentLev: 1,
            area:5,
            area:1,
            crnList: null,
            crnBox: false,
            crnBoxTop: "0px",
@@ -701,7 +703,7 @@
            searchLocNo: "",
            outSite: null,
            outSites: null,
            showScale: 75, //控制地图显示大小比例
            showScale: 85, //控制地图显示大小比例
            showScaleMarks: {//比例滑动条显示标记
                0: "0%",
                50: {
@@ -713,6 +715,7 @@
                100: "100%",
            },
            locStsList: [],//库位状态列表
            y: 1
        },
        created(){
            this.init()
@@ -770,6 +773,7 @@
                    headers: {'token': localStorage.getItem('token')},
                    method: "get",
                    success: (data) => {
                        console.log(data)
                        that.importDataClick(data)
                    }
                })
@@ -809,12 +813,24 @@
                //获取真实库位行号,通过坐标x
                let data = this.map
                let rowData = data[x]
                console.log(x)
                for (var i = 1; i < rowData.length; i++) {
                    console.log(rowData[i],rowData[i].locNo,rowData[i].locNo != undefined)
                    if (rowData[i].locNo != undefined) {
                        let locNo = rowData[i].locNo;
                        return "#" + parseInt(locNo.substr(0, 2));
                    if (this.area == 1){
                        if (rowData[i].locNo != undefined) {
                            let locNo = rowData[i].locNo;
                            return "#" + parseInt(locNo.substr(0, 2));
                        }
                    }else {
                        if (rowData[i].locNo != undefined) {
                            let locNo = rowData[i].locNo;
                            return "#" + parseInt(locNo.substr(7, 2));;
                        }
                    }
                }
                return "";