# 213

whycq

2024-11-29 d2c0bccd2e6dde4cf2a614a67bbf0ed45e2bcbaf

 src/main/webapp/views/wcsmap/wcsmap.html

@@ -39,6 +39,7 @@
            style="position: absolute;top: 20px;right: 50px;background-color: #fff;height: 30px;width: 80px;text-align: center;line-height: 30px;border-radius: 4px;">
            <div>FPS:{{mapFps}}</div>
        </div>

    </div>
    </div>
</body>
@@ -53,15 +54,18 @@
        el: '#app',
        data: {
            mapFps: 0,
            floor: '1楼',
            sites: ['185', '186', '240', "250", "299"],
            conveyor: []
            currMap: null,
            conveyor: [],

        },
        created() {
            mapData

        },
        mounted() {
            this.createMapData()
            this.createMapData(mapData.conveyor)
            this.createMap()

            setInterval(() => {
@@ -70,12 +74,12 @@

        },
        methods: {
            createMapData() {
                this.conveyor = mapData.conveyor
                console.log(this.conveyor);
            createMapData(conveyor) {
                this.conveyor = conveyor

            },
            getSiteInfo() {
                let _this = this
                $.ajax({
                    url: baseUrl + "/console/latest/data/site",
                    headers: { 'token': localStorage.getItem('token') },
@@ -87,11 +91,16 @@
                                // updateColor(item, item.originColor);
                                for (let site of sites) {
                                    if (site.siteId == item.title) {
                                        var conve = this.conveyor.find(con => con.title == site.siteId)
                                        
                                        var conve = _this.conveyor.find(con => con.title == site.siteId)
                                        // var conve;
                                        // for (let cc of this.conveyor) {
                                        //     if (cc.title == site.siteId) {
                                        //         conve = cc
                                        //     }
                                        // }
                                        if (site.siteStatus == 'site-auto-run-id') {
                                            // 自动+有物+ID
                                            conve.background = 0xFC3030
                                            // conve.background = 0xFC3030
                                        
                                        } else if (site.siteStatus == 'site-auto-run') {
                                            // 自动+有物
@@ -109,7 +118,7 @@
                                            // 非自动/手动
                                            conve.background = 0xB8B8B8
                                        }
                                        this.updateColor(item, conve)
                                        _this.updateColor(item, conve)
                                    }
                                }
                                // for (let k of this.sites) {
@@ -287,7 +296,44 @@
                    text.resolution = pixiApp.renderer.resolution;
                    pixiApp.stage.addChild(text);
                }

                let track = mapData.track
                for (let j in track) {
                    let k = track[j]
                    let x = k.x
                    for (let i = 0; i < k.anfme; i++) {
                        let rectangle = new PIXI.Graphics();
                        rectangle.beginFill(0xa6a6a6);
                        // rectangle.lineStyle(1, 0xffffff);
                        rectangle.drawRect(0, 0, k.unitX - 1, k.unitY - 1);
                        rectangle.y = k.y + 6 * i;
                        rectangle.x = x;
                        objectsContainer.addChild(rectangle);
                    }
                }
                for (let k of mapData.jar) {
                    let rectangle = new PIXI.Graphics();
                    rectangle.beginFill(k.background);
                    rectangle.originColor = k.background;
                    rectangle.drawRect(0, 0, k.width, k.height);
                    rectangle.x = k.x;
                    rectangle.y = k.y;
                    objectsContainer.addChild(rectangle);
                    var hel = `${k.title}`
                    var text = new PIXI.Text(hel, {
                        fontFamily: 'Arial',
                        fontSize: 18,
                        fill: '#FFFFFF', // 白色
                        align: 'center',
                    })
                    text.x = k.titleX;
                    text.y = k.titleY;
                    // pixiApp.stage.addChild(text)
                    // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});
                    // text.x = 1000;
                    // text.y = 2000;
                    text.resolution = pixiApp.renderer.resolution;
                    pixiApp.stage.addChild(text);
                }
                for (let k of mapData.legend) {
                    let rectangle = new PIXI.Graphics();
                    rectangle.beginFill(k.background);
@@ -313,7 +359,7 @@
                    pixiApp.stage.addChild(text);
                }

                for (let k of mapData.conveyor) {
                for (let k of this.conveyor) {
                    let rectangle = new PIXI.Graphics();
                    rectangle.beginFill(k.background);
                    // rectangle.originColor = k.background;
@@ -327,7 +373,6 @@
                    rectangle.on('mouseover', onMouseOver)
                    function onMouseOver(event) {
                        rectangle.alpha = k.alpha ? k.alpha : 1
                        console.log(event);
                        // 创建内容框
                        let tooltip = new PIXI.Graphics();
                        tooltip.beginFill(0xFFFFFF); // 内容框背景颜色