自动化立体仓库 - WMS系统
Junjie
2023-05-26 f98d55979a613b62caefc4c3ee2b8cbb0e725fc2
src/main/webapp/views/home/map.html
@@ -11,6 +11,11 @@
    <script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script>
    <script type="text/javascript" src="../../static/js/common.js"></script>
    <script type="text/javascript" src="../../static/js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .pointContainer {
            display: flex;
@@ -99,28 +104,28 @@
            position: relative;
        }
        .crnBox{
            width: 120px;
            height: 40px;
            background: url("../../static/image/Crane_manual.png") no-repeat;
            position: absolute;
            top: -25px;
            left: -120px;
            transition:left 2s;
            cursor: pointer;
        }
        /*.crnBox{*/
        /*    width: 120px;*/
        /*    height: 40px;*/
        /*    background: url("../../static/image/Crane_manual.png") no-repeat;*/
        /*    position: absolute;*/
        /*    top: -25px;*/
        /*    left: -120px;*/
        /*    transition:left 2s;*/
        /*    cursor: pointer;*/
        /*}*/
        .carBox{
            width: 40px;
            height: 40px;
            background: url("../../static/image/ste/car.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition:left 2s;
            cursor: pointer;
        }
        /*.carBox{*/
        /*    width: 40px;*/
        /*    height: 40px;*/
        /*    background: url("../../static/image/ste/car.png") no-repeat;*/
        /*    background-size: 100% 100%;*/
        /*    position: absolute;*/
        /*    top: 0;*/
        /*    left: 0;*/
        /*    transition:left 2s;*/
        /*    cursor: pointer;*/
        /*}*/
        .popBox {
            position: absolute;
@@ -402,7 +407,7 @@
</head>
<body>
<div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: wrap;" @click="bgClick()">
    <div style="flex: 12;">
    <div style="flex: 12;" :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">
@@ -441,10 +446,16 @@
                    </div>
                </div>
                <div style="width: 40px;display: flex;justify-content: center;align-items: center;">
                    {{ getRealRowByX(index) }}
                </div>
            </div>
        </div>
    </div>
    <div style="padding: 20px;flex: 5;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%;">
                <div class="card-details" style="place-content: normal;height: auto;">
@@ -566,11 +577,11 @@
                    <div style="margin-top: 5px;">
                        <button class="layui-btn layui-btn-sm" @click="openLocDetail(map[mapI][mapJ].locNo)">库位详情</button>
                    </div>
                    <div style="margin-top: 5px;">
                        <button v-if="map[mapI][mapJ].locSts == 'F'" class="layui-btn layui-btn-sm" @click="locMove(map[mapI][mapJ].locNo)">库位移转</button>
                        <button v-else-if="map[mapI][mapJ].locSts == 'D'" class="layui-btn layui-btn-sm" @click="locMove(map[mapI][mapJ].locNo)">库位移转</button>
                        <button v-else class="layui-btn layui-btn-sm layui-btn-disabled" disabled>库位移转</button>
                    </div>
<!--                    <div style="margin-top: 5px;">-->
<!--                        <button v-if="map[mapI][mapJ].locSts == 'F'" class="layui-btn layui-btn-sm" @click="locMove(map[mapI][mapJ].locNo)">库位移转</button>-->
<!--                        <button v-else-if="map[mapI][mapJ].locSts == 'D'" class="layui-btn layui-btn-sm" @click="locMove(map[mapI][mapJ].locNo)">库位移转</button>-->
<!--                        <button v-else class="layui-btn layui-btn-sm layui-btn-disabled" disabled>库位移转</button>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
@@ -637,6 +648,17 @@
            searchLocNo: "",
            outSite: null,
            outSites: null,
            showScale: 75, //控制地图显示大小比例
            showScaleMarks: {//比例滑动条显示标记
                0: "0%",
                50: {
                    style: {
                        color: '#1989FA'
                    },
                    label: "50%"
                },
                100: "100%",
            }
        },
        created(){
            this.init()
@@ -695,6 +717,19 @@
                this.map = data
                this.printData()
            },
            getRealRowByX(x) {
                //获取真实库位行号,通过坐标x
                let data = this.map
                let rowData = data[x]
                for (var i = 1; i < rowData.length; i++) {
                    if (rowData[i].locNo != undefined) {
                        let locNo = rowData[i].locNo;
                        return "#" + parseInt(locNo.substr(0, 2));
                    }
                }
                return "";
            },
            rightEvent(x, y, e) {
                this.rightBox = true
                this.mapI = x