自动化立体仓库 - WMS系统
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
#
zjj
2024-05-20 803cad115e8fb96fe042b7070fa41dedec4b6361 
 src/main/webapp/views/home/map.html


@@ -13,7 +13,13 @@


    <script type="text/javascript" src="../../static/js/common.js"></script>


    <script type="text/javascript" src="../../static/js/vue.min.js"></script>


    <script type="text/javascript" src="../../static/js/element.js"></script>


    <script src="../../static/js/pixi.min.js"></script>


    <style>


        *{


            margin: 0;


            padding: 0;


        }




        .pointContainer {


            display: flex;


            justify-content: center;


@@ -380,225 +386,144 @@


    </style>


</head>


<body>


<div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: wrap;" @click="bgClick()">


    <div style="flex: 18;display: flex;justify-content: center;" :style="{zoom:showScale/100.0,marginTop:(showScale)*2 + 'px'}">


        <div style="margin-top: 10px;">


            <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">


                    <div v-if="idx != 0 && (idx != map[index].length-1)">


                        <div v-if="map[index][idx].value < 0" style="visibility: hidden;" class="pointBox"></div>


<div id="app">


    <div id="pixiView">




                        <!--库位-->


                        <div v-else-if="map[index][idx].value  == 0" @contextmenu.prevent="rightEvent(index,idx,$event)">


                            <div v-if="map[index][idx].locSts == 'O'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxBlue">{{ map[index][idx].locSts }}</div>


                            <div v-else-if="map[index][idx].locSts == 'F'" @click.left="selectLoc(index,idx)" :class="{'pointBoxSelected':map[index][idx].locOutSelected,'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxRed">{{ map[index][idx].locSts }}</div>


                            <div v-else-if="map[index][idx].locSts == 'D'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxEmpty">{{ map[index][idx].locSts }}</div>


                            <div v-else-if="map[index][idx].locSts == 'P'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxOut">{{ map[index][idx].locSts }}</div>


                            <div v-else-if="map[index][idx].locSts == 'R'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxOutYy">{{ map[index][idx].locSts }}</div>


                            <div v-else-if="map[index][idx].locSts == 'S'" class="pointBox pointBoxInYy">{{ map[index][idx].locSts }}</div>


                            <div v-else class="pointBox pointBoxDefault" :class="{'pointBoxSearch':map[index][idx].searchStatus}">{{ map[index][idx].locSts }}</div>


                        </div>




                        <!--堆垛机-->


                        <div v-else-if="map[index][idx].value  == 3">


                            <div v-if="idx == 1" class="crnLine" style="width: 100vh">


                            </div>


                        </div>




                        <!--站点-->


                        <div v-else-if="map[index][idx].value  == 4" class="pointBox pointBoxStation" style="visibility: hidden;"></div>


                        <div v-else-if="map[index][idx].value  == 5" class="pointBox chargeStation"


                             @contextmenu.prevent="rightEvent(index,idx,$event)"></div>


                        <div v-else-if="map[index][idx].value  == 9" class="pointBox pointBoxRed"


                             @contextmenu.prevent="rightEvent(index,idx,$event)"></div>




                    </div>


                </div>




                <div style="width: 40px;display: flex;justify-content: center;align-items: center;">


                    {{ getRealRowByX(index) }}


                </div>




            </div>


        </div>




        <div>


            <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 1" :style="{background: currentLev==1?'red':''}">1F</button></div>


            <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 2" :style="{background: currentLev==2?'red':''}">2F</button></div>


            <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 3" :style="{background: currentLev==3?'red':''}">3F</button></div>


            <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 4" :style="{background: currentLev==4?'red':''}">4F</button></div>


            <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 5" :style="{background: currentLev==5?'red':''}">5F</button></div>


            <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 6" :style="{background: currentLev==6?'red':''}">6F</button></div>


            <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 7" :style="{background: currentLev==7?'red':''}">7F</button></div>


        </div>


    </div>


    <div style="padding: 40px 20px 10px 10px;" :style="window.innerWidth < 2100 ? 'margin-top: 0px;' : 'flex: 5;margin-top: -10px;'">


        <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;">


                    <div class="text-body" style="display: flex;flex-wrap: wrap;">


                        <div style="width: 100%;margin-bottom: 20px;">


                            <div style="display: flex;justify-content: space-between;">


                                <div><input v-model="searchMatnr" placeholder="物料号" type="text" class="search-input"></div>


                                <div><input v-model="searchOrderNo" placeholder="订单号" type="text" class="search-input"></div>




    <!--输出操作和FPS-->


    <div style="position: absolute;top: 20px;right: 50px;">


        <div>FPS:{{mapFps}}</div>


        <el-button @click="drawer = true">操作</el-button>


    </div>




    <el-drawer


            title="操作区域"


            :visible.sync="drawer"


            :with-header="true"


            :modal="false"


    >


        <div style="padding: 40px 20px 10px 10px;" :style="window.innerWidth < 2100 ? 'margin-top: 0px;' : 'flex: 5;margin-top: -70px;'">


            <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;">


                        <div class="text-body" style="display: flex;flex-wrap: wrap;">


                            <div style="width: 100%;margin-bottom: 20px;">


                                <div style="display: flex;justify-content: space-between;">


                                    <div><input v-model="searchMatnr" placeholder="物料号" type="text" class="search-input"></div>


                                    <div><input v-model="searchOrderNo" placeholder="订单号" type="text" class="search-input"></div>


                                </div>


                                <div style="display: flex;justify-content: space-between;margin-top: 10px;">


                                    <div><input style="width: 110px;" v-model="searchMaktx" placeholder="物料名称" type="text" class="search-input"></div>


                                    <div><input style="width: 110px;" v-model="searchSpecs" placeholder="规格" type="text" class="search-input"></div>


                                    <div><input style="width: 110px;" v-model="searchLocNo" placeholder="库位号" type="text" class="search-input"></div>


                                </div>


                                <button style="width: 100%;margin-top: 10px;" @click="searchLoc" class="layui-btn layui-btn-sm">搜索</button>


                            </div>


                            <div style="display: flex;justify-content: space-between;margin-top: 10px;">


                                <div><input style="width: 110px;" v-model="searchMaktx" placeholder="物料名称" type="text" class="search-input"></div>


                                <div><input style="width: 110px;" v-model="searchSpecs" placeholder="规格" type="text" class="search-input"></div>


                                <div><input style="width: 110px;" v-model="searchLocNo" placeholder="库位号" type="text" class="search-input"></div>


                            </div>


                            <button style="width: 100%;margin-top: 10px;" @click="searchLoc" class="layui-btn layui-btn-sm">搜索</button>


                        </div>


                        <!--                        <div>-->


                        <!--                            <button @click="locToLoc2" class="layui-btn layui-btn-sm">侧边移库</button>-->


                        <!--                        </div>-->


                        <div>


                            <button @click="init" class="layui-btn layui-btn-sm">刷新</button>


                        </div>


                        <div style="margin-left: 10px;">


                            <button @click="resetSearch" class="layui-btn layui-btn-sm">重置</button>


                        </div>


                        <div v-if="!locOutStatus" style="margin-left: 10px;">


                            <button @click="locOutStatus = true" class="layui-btn layui-btn-sm">出库选择</button>


                        </div>


                        <div v-else style="margin-left: 10px;border: 1px red solid;display: flex;">


                            <!--                        <div>-->


                            <!--                            <button @click="locToLoc2" class="layui-btn layui-btn-sm">侧边移库</button>-->


                            <!--                        </div>-->


                            <div>


                                <button @click="cancelSelectLoc" class="layui-btn layui-btn-sm">取消选择</button>


                                <button @click="init" class="layui-btn layui-btn-sm">刷新</button>


                            </div>


                            <div style="display: flex;justify-content: center;align-items: center;">


                                <select v-model="outSite">


                                    <option v-for="(item,index) in outSites" :key="index" :value="item.siteId">{{ item.desc }}</option>


                                </select>


                            <div style="margin-left: 10px;">


                                <button @click="resetSearch" class="layui-btn layui-btn-sm">重置</button>


                            </div>


                            <div>


                                <button @click="locOut" class="layui-btn layui-btn-sm">出库</button>


                            <div v-if="!locOutStatus" style="margin-left: 10px;">


                                <button @click="locOutStatus = true" class="layui-btn layui-btn-sm">出库选择</button>


                            </div>


                            <div v-else style="margin-left: 10px;border: 1px red solid;display: flex;">


                                <div>


                                    <button @click="cancelSelectLoc" class="layui-btn layui-btn-sm">取消选择</button>


                                </div>


                                <div style="display: flex;justify-content: center;align-items: center;">


                                    <select v-model="outSite">


                                        <option v-for="(item,index) in outSites" :key="index" :value="item.siteId">{{ item.desc }}</option>


                                    </select>


                                </div>


                                <div>


                                    <button @click="locOut" class="layui-btn layui-btn-sm">出库</button>


                                </div>


                            </div>


                        </div>


                    </div>


                    <button class="card-button">功能区</button>


                </div>


                <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;">其他</div><div class="pointBox pointBoxDefault">其他</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;">其他</div><div class="pointBox pointBoxDefault">其他</div>


                            </div>


                        </div>


                    </div>


                    <button class="card-button">库位状态</button>


                </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>-->


            <!--                    <div class="text-body" style="display: flex;">-->


            <!--                        <div class="floorSelect">-->


            <!--                            <label for="01">1F</label>-->


            <!--                            <input id="01" type="radio" name="r" v-model="currentLev" value="1" checked="">-->


            <!--                            <label for="02">2F</label>-->


            <!--                            <input id="02" type="radio" v-model="currentLev" name="r" value="2">-->


            <!--                            <label for="03">3F</label>-->


            <!--                            <input id="03" type="radio" v-model="currentLev" name="r" value="3">-->


            <!--                            <label for="04">4F</label>-->


            <!--                            <input id="04" type="radio" v-model="currentLev" name="r" value="4">-->


            <!--                        </div>-->


            <!--                    </div>-->


            <!--                </div>-->


            <!--                <button class="card-button">楼层 {{currentLev}}F</button>-->


            <!--            </div>-->




        </div>


    </div>




    <div v-if="rightBox" @click.stop="" :style="{left: rightBoxLeft,top: rightBoxTop}" class="popBox">


        <div class="apple-card">


            <div class="tools">


                <div class="circle" @click.stop="rightBox = false">


                    <span class="red box"></span>


                </div>


                <div class="circle">


                    <span class="yellow box"></span>


                </div>


                <div class="circle">


                    <span class="green box"></span>


                </div>


            </div>


            <div class="card-content">


                <div>


                    库位号: {{ map[mapI][mapJ].locNo }}


                </div>


                <div style="margin-top: 10px;">


                    库位状态: {{ getLocSts(map[mapI][mapJ].locSts) }}


                </div>


                <div style="margin-top: 10px;display: flex;justify-content: space-between;flex-wrap: wrap;">


                    <div style="margin-top: 5px;">


                        <button class="layui-btn layui-btn-sm" @click="openLocDetail(map[mapI][mapJ].locNo)">库位详情</button>


                <div class="hoverCard">


                    <div class="card-details">


                        <p class="text-title" style="text-align: center;">楼层 {{currentLev}}F</p>


                        <div class="text-body" style="display: flex;justify-content:space-between;flex-wrap: wrap;">


                            <div v-for="(lev,idx) in floorList">


                                <el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="currentLev = lev">{{lev}}F</el-button>


                            </div>


                        </div>


                    </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>-->


                    <button class="card-button">楼层 {{currentLev}}F</button>


                </div>


            </div>


        </div>


    </div>




    <div v-if="crnBox" @click.stop="" :style="{left: crnBoxLeft,top: crnBoxTop}" class="popBox">


        <div class="apple-card">


            <div class="tools">


                <div class="circle" @click.stop="crnBox = false">


                    <span class="red box"></span>


                </div>


                <div class="circle">


                    <span class="yellow box"></span>


                </div>


                <div class="circle">


                    <span class="green box"></span>


                </div>


            </div>


            <div class="card-content">


                <div>堆垛机号：{{crnList[crnBox - 1].crnNo}}</div>


                <div>工作号：{{crnList[crnBox - 1].wrkNo}}</div>


                <div>源库位：{{crnList[crnBox - 1].frmLocno}}</div>


                <div>目标库位：{{crnList[crnBox - 1].toLocno}}</div>


                <div>可入：{{crnList[crnBox - 1].inEnable}}</div>


                <div>可出：{{crnList[crnBox - 1].outEnable}}</div>


                <div>状态：{{crnList[crnBox - 1].crnSts$}}</div>


                <div>异常：{{crnList[crnBox - 1].crnErr$}}</div>


            </div>


        </div>


    </div>


    </el-drawer>




    <el-drawer


            title="库位详情"


            :visible.sync="drawerLocNo"


            :with-header="true"


            :modal="false"


    >


        <div v-if="drawerLocNoData!=null">


            <div style="margin: 10px;">


                <div style="margin-top: 5px;">库位号：{{drawerLocNoData.locNo}}</div>


                <div style="margin-top: 5px;">库位状态：{{drawerLocNoData.locSts}}</div>


                <div style="margin-top: 5px;">


                    <button class="layui-btn layui-btn-sm" @click="openLocDetail(drawerLocNoData.locNo)">库位详情</button>


                </div>


            </div>


        </div>


    </el-drawer>




</div>


<script>


    let width = 25;


    let height = 25;


    let pixiApp;


    let pixiStageMap = new Map();




    var $layui = layui.config({


        base: baseUrl + "/static/layui/lay/modules/"


@@ -608,15 +533,10 @@


        el: '#app',


        data: {


            map: [],


            mapData: "",


            mapData: [],


            importData: null,


            startPosition: "0500501",


            endPosition: "0802501",


            mapI: 0,


            mapJ: 0,


            rightBox: false,


            rightBoxTop: "0px",


            rightBoxLeft: "0px",


            pointContainerWidth: 0,


            currentLev: 1,


            crnList: null,


@@ -632,29 +552,25 @@


            searchLocNo: "",


            outSite: null,


            outSites: null,


            showScale: 45, //控制地图显示大小比例


            showScaleMarks: {//比例滑动条显示标记


                0: "0%",


                50: {


                    style: {


                        color: '#1989FA'


                    },


                    label: "50%"


                },


                100: "100%",


            },


            locStsList: [],//库位状态列表


            drawer: false,


            drawerLocNo: false,


            drawerLocNoData: null,


            drawerLocDetls: [],


            mapFps: 0,


            floorList: [1, 2, 3, 4, 5, 6, 7], //当前项目楼层


        },


        created(){


            this.init()




            // this.getOutSite()


        },


        mounted() {


            this.createMap()


        },


        watch: {


            map: {


                deep: true,


                handler(val) {


                    this.printData()




                }


            },


            currentLev: {


@@ -667,6 +583,15 @@


                        || this.searchMaktx != ""


                        || this.searchLocNo != "") {


                        this.searchLoc()


                    }


                }


            },


            drawerLocNo: {


                deep: true,


                handler(val) {


                    if (!val) {


                        var rectangle = pixiStageMap.get(this.drawerLocNoData.locNo)


                        updateColor(rectangle, rectangle.originColor);//恢复颜色


                    }


                }


            }


@@ -695,9 +620,10 @@


                this.searchMaktx = ""


                this.searchLocNo = ""


                this.searchLoc()


            },


            printData() {


                this.mapData = JSON.stringify(this.map)




                pixiApp.stage.children.forEach((item, index) => {


                    updateColor(item, item.originColor);


                });


            },


            importDataClick(mapData) {


                let tmp = JSON.parse(mapData);


@@ -706,13 +632,133 @@


                    let data2 = []


                    item.forEach((val, idx) => {


                        val.searchStatus = false//搜索标记


                        val.rectangle = null;


                        data2.push(val)


                    })


                    this.pointContainerWidth = item.length * (40+1)


                    data.push(data2)


                })


                this.map = data


                this.printData()


                this.createMapData()


            },


            createMap(){


                //Create a Pixi Application


                pixiApp = new PIXI.Application({


                    // width: 1500,


                    // height: 800,


                    backgroundColor: 0xF5F7F9FF,


                    resizeTo: window


                });


                //Add the canvas that Pixi automatically created for you to the HTML document


                $("#pixiView").append(pixiApp.view)




                //*******************拖动画布*******************


                let stageOriginalPos;


                let mouseDownPoint;


                let touchBlank = false;


                pixiApp.renderer.plugins.interaction.on(


                    'pointerdown',


                    (event) => {


                        const globalPos = event.data.global;


                        // 记录下stage原来的位置


                        stageOriginalPos = [pixiApp.stage.position._x, pixiApp.stage.position._y];


                        // 记录下mouse down的位置


                        mouseDownPoint = [globalPos.x, globalPos.y];


                        if (!event.target) {


                            // 点到了画布的空白位置


                            touchBlank = true;


                        }


                    }


                );




                pixiApp.renderer.plugins.interaction.on(


                    'pointermove',


                    (event) => {


                        const globalPos = event.data.global;




                        if (touchBlank) {


                            // 拖拽画布


                            const dx = globalPos.x - mouseDownPoint[0];


                            const dy = globalPos.y - mouseDownPoint[1];


                            pixiApp.stage.position.set(


                                stageOriginalPos[0] + dx,


                                stageOriginalPos[1] + dy


                            );


                        }


                    }


                );




                pixiApp.renderer.plugins.interaction.on(


                    'pointerup',


                    (event) => {


                        touchBlank = false;


                    }


                );


                //*******************拖动画布*******************




                //*******************缩放画布*******************


                pixiApp.view.addEventListener('wheel', (event) => {


                    event.stopPropagation();


                    event.preventDefault();


                    // 因为画布是充满视窗的，所以clientX等于mouse point在renderer上的x坐标


                    const globalPos = [event.clientX, event.clientY];


                    const delta = event.deltaY;


                    const oldZoom = pixiApp.stage.scale.x;


                    let newZoom = oldZoom * 0.999 ** delta;




                    // const oldStageMatrix = app.stage.localTransform.clone();


                    // const oldStagePos = oldStageMatrix.applyInverse(pointerGlobalPos);


                    const oldStagePos = globalPos;


                    const dx = oldStagePos[0] * oldZoom - oldStagePos[0] * newZoom;


                    const dy = oldStagePos[1] * oldZoom - oldStagePos[1] * newZoom;




                    pixiApp.stage.setTransform(


                        pixiApp.stage.position.x + dx,


                        pixiApp.stage.position.y + dy,


                        newZoom,


                        newZoom,


                        0,


                        0,


                        0,


                        0,


                        0


                    );




                });


                //*******************缩放画布*******************




                //*******************FPS*******************


                var g_Time=0;


                pixiApp.ticker.add((delta) => {


                    var timeNow = (new Date()).getTime();


                    var timeDiff = timeNow - g_Time;


                    g_Time = timeNow;


                    var fps = 1000 / timeDiff;


                    this.mapFps = parseInt(fps)


                });


                //*******************FPS*******************


            },


            createMapData() {


                let that = this


                pixiApp.stage.removeChildren();


                this.map.forEach((item,index) => {


                    for (let idx = 0; idx < item.length; idx++) {


                        let val = item[idx]


                        if (val.value < 0) {


                            continue;


                        }


                        let rectangle = getContainer(val.value, idx * width, index * height, this.map[index][idx].locSts);


                        rectangle.on('click', (e) => {


                            this.rightEvent(index,idx,{x:e.data.originalEvent.offsetX, y: e.data.originalEvent.offsetY})


                            updateColor(rectangle, 0x9900ff);


                        });


                        rectangle.locX = index;


                        rectangle.locY = idx;




                        pixiStageMap.set(this.map[index][idx].locNo, rectangle);


                        pixiApp.stage.addChild(rectangle);


                    }


                })


            },


            getRealRowByX(x) {


                //获取真实库位行号，通过坐标x


@@ -728,15 +774,12 @@


                return "";


            },


            rightEvent(x, y, e) {


                this.rightBox = true


                this.mapI = x


                this.mapJ = y


                this.rightBoxTop = e.y + "px"


                this.rightBoxLeft = e.x + "px"


            },


            bgClick() {


                this.rightBox = false


                this.crnBox = false


                this.drawerLocNo = true


                let data = {


                    locNo: this.map[x][y].locNo,


                    locSts: this.getLocSts(this.map[x][y].locSts)


                }


                this.drawerLocNoData =  data


            },


            openLocDetail(locNo) {


                $layui.layer.open({


@@ -823,7 +866,6 @@


                                tmp[item.crnNo - 1] = item;


                            })




                            console.log(tmp)


                            that.crnList = tmp;


                        } else if (res.code === 403) {


                            top.location.href = baseUrl + "/";


@@ -1012,7 +1054,6 @@


                //     $layui.layer.msg("请输入物料编号或订单号");


                //     return;


                // }




                let that = this;


                $.ajax({


                    url: baseUrl + "/map/searchData/auth",


@@ -1031,35 +1072,21 @@


                        if (res.code === 200) {


                            let tmp = that.map


                            let data = res.data


                            tmp.forEach((item,index) => {//清空之前的搜索结果


                                item.forEach((val,idx) => {


                                    if (tmp[index][idx].searchStatus != undefined) {


                                        tmp[index][idx].searchStatus = false;//搜索标记


                                    }




                                })


                            })




                            tmp.forEach((item,index) => {//清空之前的搜索结果


                                item.forEach((val,idx) => {


                                    if (tmp[index][idx].searchStatus != undefined) {


                                        tmp[index][idx].searchStatus = false;//搜索标记


                                        var rectangle = pixiStageMap.get(tmp[index][idx].locNo)


                                        updateColor(rectangle, rectangle.originColor);


                                    }




                                })


                            })




                            data.forEach((item,i) => {


                                let locNo = item.locNo


                                tmp.forEach((item,index) => {


                                    item.forEach((val,idx) => {


                                        if (tmp[index][idx].locNo == locNo) {


                                            tmp[index][idx].searchStatus = true//搜索标记


                                        }


                                    })


                                })


                                var rectangle = pixiStageMap.get(locNo)


                                updateColor(rectangle, 0x9900ff);


                            })


                            that.map = tmp


                            $layui.layer.msg("搜索成功");


                        } else if (res.code === 403) {


                            top.location.href = baseUrl + "/";


@@ -1092,6 +1119,79 @@


        }


    })




    function getContainer(value, x, y, locSts) {


        let rectangle = new PIXI.Graphics();


        if (value === 0) {


            if (locSts === "F") {


                rectangle.beginFill(0xff0000);


                rectangle.originColor = 0xff0000;


            } else if (locSts === "O") {


                rectangle.beginFill(0x55aaff);


                rectangle.originColor = 0x55aaff;


            } else if (locSts === "D") {


                rectangle.beginFill(0xc2c934);


                rectangle.originColor = 0xc2c934;


            } else if (locSts === "P") {


                rectangle.beginFill(0xf1aa19);


                rectangle.originColor = 0xf1aa19;


            } else if (locSts === "R") {


                rectangle.beginFill(0x618593);


                rectangle.originColor = 0x618593;


            } else if (locSts === "S") {


                rectangle.beginFill(0xfa736f);


                rectangle.originColor = 0xfa736f;


            }else {


                rectangle.beginFill(0x86779d);


                rectangle.originColor = 0x86779d;


            }


        } else if (value === 3) {//母轨道


            rectangle.beginFill(0x00ff7f);


            rectangle.originColor = 0x00ff7f;


            rectangle.visible = false;


        } else if (value === 4) {//站点


            rectangle.beginFill(0xffff00);


            rectangle.originColor = 0xffff00;


            rectangle.visible = false;


        } else if (value === 5) {//充电桩


            rectangle.beginFill(0xffaa7f);


            rectangle.originColor = 0xffaa7f;


            rectangle.visible = false;


        } else if (value === 9) {//轨迹


            rectangle.beginFill(0xff0000);


            rectangle.originColor = 0xff0000;


        }


        // rectangle.lineStyle(1, 0xffffff, 1);


        rectangle.drawRect(0, 0, width, height);


        rectangle.x = x;


        rectangle.y = y;


        // 设置是否可以交互


        rectangle.interactive = true;


        rectangle.endFill();




        // 创建文本对象


        const style = new PIXI.TextStyle({


            fontSize: 14 * window.devicePixelRatio,


            fill: 'white',


            align: 'center', // 设置文本水平居中对齐


            verticalAlign: 'middle' // 设置文本垂直居中对齐


        });


        const text = new PIXI.Text(locSts, style);


        text.anchor.set(0.5); // 设置文本锚点为中心点


        text.position.set(rectangle.width / 2, rectangle.height / 2); // 将文本位置设置为Graphics对象的中心点


        // 将文本对象添加到Graphics对象中


        rectangle.addChild(text);




        return rectangle;


    }




    /**


     * 更新颜色


     */


    function updateColor(rectangle, color) {


        rectangle.clear()


        rectangle.beginFill(color);


        rectangle.drawRect(0, 0, width, height);


    }


</script>


</body>


</html>