#

whycq

2024-06-21 333b34d51a442e75bd6f1c9dfde2aa99069a1480

 src/main/webapp/views/home/map2.html

@@ -13,7 +13,7 @@
    <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>
    <script src="../../static/js/pixi-legacy.min.js"></script>
    <style>
        *{
            margin: 0;
@@ -487,7 +487,7 @@

                <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;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>
@@ -495,6 +495,18 @@
                        </div>
                    </div>
                    <button class="card-button">楼层 {{currentLev}}F</button>
                </div>

                <div class="hoverCard">
                    <div class="card-details">
                        <p class="text-title" style="text-align: center;">{{currentFloor}}楼</p>
                        <div class="text-body" style="display: flex;justify-content:space-between;flex-wrap: wrap;">
                            <div v-for="(floor,idx) in currentFloorList">
                                <el-button :style="{background:currentFloor === floor ? '#7DCDFF':''}" @click="currentFloor = floor">{{floor}}F</el-button>
                            </div>
                        </div>
                    </div>
                    <button class="card-button">楼层 {{currentFloor}}F</button>
                </div>

            </div>
@@ -524,6 +536,7 @@
    let height = 25;
    let pixiApp;
    let pixiStageMap = new Map();
    let objectsContainer;

    var $layui = layui.config({
        base: baseUrl + "/static/layui/lay/modules/"
@@ -539,6 +552,7 @@
            endPosition: "0802501",
            pointContainerWidth: 0,
            currentLev: 1,
            currentFloor: 1,
            crnList: null,
            crnBox: false,
            crnBoxTop: "0px",
@@ -558,7 +572,8 @@
            drawerLocNoData: null,
            drawerLocDetls: [],
            mapFps: 0,
            floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //当前项目楼层
            floorList: [1, 2], //当前项目楼层
            currentFloorList: [1, 2, 3], //当前项目楼层
        },
        created(){
            this.init()
@@ -586,6 +601,24 @@
                    }
                }
            },
            currentFloor: {
                deep: true,
                handler(val) {
                    if (val == 1) {
                        this.floorList = [1,2]
                    } else {
                        this.floorList = [1]
                    }
                    this.init()
                    if (this.searchMatnr != ""
                        || this.searchOrderNo != ""
                        || this.searchSpecs != ""
                        || this.searchMaktx != ""
                        || this.searchLocNo != "") {
                        this.searchLoc()
                    }
                }
            },
            drawerLocNo: {
                deep: true,
                handler(val) {
@@ -600,7 +633,7 @@
            init(){
                let that = this
                $.ajax({
                    url: baseUrl + "/map/getData/" + this.currentLev + "/auth",
                    url: baseUrl + "/agv/map/getData/" + this.currentFloor + "/" +this.currentLev + "/auth",
                    headers: {'token': localStorage.getItem('token')},
                    method: "get",
                    success: (data) => {
@@ -651,6 +684,10 @@
                });
                //Add the canvas that Pixi automatically created for you to the HTML document
                $("#pixiView").append(pixiApp.view)

                // 创建一个容器来管理大批量的显示对象
                objectsContainer = new PIXI.Container();
                pixiApp.stage.addChild(objectsContainer);

                //*******************拖动画布*******************
                let stageOriginalPos;
@@ -740,7 +777,7 @@
            },
            createMapData() {
                let that = this
                pixiApp.stage.removeChildren();
                objectsContainer.removeChildren();
                this.map.forEach((item,index) => {
                    for (let idx = 0; idx < item.length; idx++) {
                        let val = item[idx]
@@ -756,9 +793,14 @@
                        rectangle.locY = idx;

                        pixiStageMap.set(this.map[index][idx].locNo, rectangle);
                        pixiApp.stage.addChild(rectangle);
                        objectsContainer.addChild(rectangle);
                    }
                })

                //视角居中
                let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
                let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
                pixiApp.stage.position.set(containerWidth, containerHeight);
            },
            getRealRowByX(x) {
                //获取真实库位行号，通过坐标x
@@ -782,6 +824,7 @@
                this.drawerLocNoData =  data
            },
            openLocDetail(locNo) {
                url = '/agv/locDetl/list/auth';
                $layui.layer.open({
                    type: 2,
                    title: '库位物料',
@@ -1056,7 +1099,7 @@
                // }
                let that = this;
                $.ajax({
                    url: baseUrl + "/map/searchData/auth",
                    url: baseUrl + "/agv/map/searchData/auth",
                    headers: {'token': localStorage.getItem('token')},
                    dataType: 'json',
                    data: {
@@ -1121,7 +1164,7 @@

    function getContainer(value, x, y, locSts) {
        let rectangle = new PIXI.Graphics();
        if (value === 0) {
        if (value == 0) {
            if (locSts === "F") {
                rectangle.beginFill(0xff0000);
                rectangle.originColor = 0xff0000;