| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| | | <title>wcs监控图</title> |
|---|
| | | <link rel="stylesheet" href="wcsmap.css"> |
|---|
| | | <script type="text/javascript" src="mapData.json"></script> |
|---|
| | | <script type="text/javascript" src="mapData.js"></script> |
|---|
| | | <script src="../../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <script src="pixijs.js"></script> |
|---|
| | | <script src="vue.min.js"></script> |
|---|
| | | <script src="../../static/js/common.js"></script> |
|---|
| | | <style> |
|---|
| | | .tooltip { |
|---|
| | | position: absolute; |
|---|
| | |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <div id="app"> |
|---|
| | | <div id="pixiView"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div style="position: absolute;top: 20px;left: 20px;font-size: 40px;color: white;"> |
|---|
| | | <div>自动仓库WCS监控图</div> |
|---|
| | | <div style="font-size: 13px;">AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</div> |
|---|
| | | </div> |
|---|
| | | <!--输出操作和FPS--> |
|---|
| | | <div style="position: absolute;top: 20px;right: 50px;"> |
|---|
| | | <div |
|---|
| | | 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 id="tooltip" class="tooltip">111</div> |
|---|
| | | <p style="position: absolute;top: 20px;right: 100px;" data-tooltip="1232131">666666666</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | </html> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let pixiApp; |
|---|
| | | let objectsContainer; |
|---|
| | | var tooltip = document.getElementById('tooltip'); |
|---|
| | | var app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | data: { |
|---|
| | | mapFps: 0, |
|---|
| | | sites: ['185', '186', '240', "250", "299"], |
|---|
| | | conveyor: [] |
|---|
| | | }, |
|---|
| | | created(){ |
|---|
| | | console.log(mapData); |
|---|
| | | mapData |
|---|
| | | |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.createMapData() |
|---|
| | | this.createMap() |
|---|
| | | |
|---|
| | | setInterval(() => { |
|---|
| | | this.getSiteInfo() |
|---|
| | | }, 1000) |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | createMapData() { |
|---|
| | | this.conveyor = mapData.conveyor |
|---|
| | | console.log(this.conveyor); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | getSiteInfo() { |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl + "/console/latest/data/site", |
|---|
| | | headers: { 'token': localStorage.getItem('token') }, |
|---|
| | | method: 'POST', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200) { |
|---|
| | | var sites = res.data; |
|---|
| | | pixiApp.stage.children[0].children.forEach((item, index) => { |
|---|
| | | // updateColor(item, item.originColor); |
|---|
| | | for (let site of sites) { |
|---|
| | | if (site.siteId == item.title) { |
|---|
| | | var conve = this.conveyor.find(con => con.title == site.siteId) |
|---|
| | | |
|---|
| | | if (site.siteStatus == 'site-auto-run-id') { |
|---|
| | | // 自动+有物+ID |
|---|
| | | conve.background = 0xFC3030 |
|---|
| | | |
|---|
| | | } else if (site.siteStatus == 'site-auto-run') { |
|---|
| | | // 自动+有物 |
|---|
| | | conve.background = 0xFF51F6 |
|---|
| | | |
|---|
| | | } else if (site.siteStatus == 'site-auto-id') { |
|---|
| | | // 自动+ID |
|---|
| | | conve.background = 0xC4C400 |
|---|
| | | |
|---|
| | | } else if (site.siteStatus == 'site-auto') { |
|---|
| | | // 自动 |
|---|
| | | conve.background = 0x78FF81 |
|---|
| | | |
|---|
| | | } else if (site.siteStatus == 'site-unauto') { |
|---|
| | | // 非自动/手动 |
|---|
| | | conve.background = 0xB8B8B8 |
|---|
| | | } |
|---|
| | | this.updateColor(item, conve) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // for (let k of this.sites) { |
|---|
| | | // if (item.title == k) { |
|---|
| | | // for (let con of this.conveyor) { |
|---|
| | | // if (k == con.title) { |
|---|
| | | // con.background = 0xFF0000 |
|---|
| | | // this.updateColor(item, con) |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | |
|---|
| | | }); |
|---|
| | | } else if (res.code === 403) { |
|---|
| | | parent.location.href = baseUrl + "/login"; |
|---|
| | | } else { |
|---|
| | | console.log(res.msg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | let pixiApp = new PIXI.Application({ |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | updateColor(rectangle, conveyor) { |
|---|
| | | rectangle.clear() |
|---|
| | | rectangle.beginFill(conveyor.background); |
|---|
| | | rectangle.drawRect(0, 0, conveyor.width, conveyor.height); |
|---|
| | | rectangle.endFill(); |
|---|
| | | }, |
|---|
| | | createMap() { |
|---|
| | | pixiApp = new PIXI.Application({ |
|---|
| | | resizeTo: window, |
|---|
| | | backgroundColor: 0x1f3366 |
|---|
| | | }) |
|---|
| | |
|---|
| | | createText(); |
|---|
| | | } |
|---|
| | | function createText() { |
|---|
| | | // let text = new PIXI.BitmapText('123',{ |
|---|
| | | // fontName: 'font', |
|---|
| | | // fontSize: 16, |
|---|
| | | // tint: 0xffffff |
|---|
| | | // }) |
|---|
| | | // text.x = 100; |
|---|
| | | // text.y = 100; |
|---|
| | | // pixiApp.stage.addChild(text) |
|---|
| | | let text = new PIXI.BitmapText('123', { |
|---|
| | | fontName: 'ChillRoundF', |
|---|
| | | fontSize: 16, |
|---|
| | | tint: 0xffffff |
|---|
| | | }) |
|---|
| | | text.x = 100; |
|---|
| | | text.y = 100; |
|---|
| | | pixiApp.stage.addChild(text) |
|---|
| | | } |
|---|
| | | //*******************拖动画布******************* |
|---|
| | | let stageOriginalPos; |
|---|
| | |
|---|
| | | rectangle.x = k.x; |
|---|
| | | rectangle.y = k.y; |
|---|
| | | objectsContainer.addChild(rectangle); |
|---|
| | | var hel = `${k.title}` |
|---|
| | | var text = new PIXI.Text(hel, { |
|---|
| | | fontFamily: 'Arial', |
|---|
| | | fontSize: 36, |
|---|
| | | 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); |
|---|
| | | 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.conveyor) { |
|---|
| | | let rectangle = new PIXI.Graphics(); |
|---|
| | | rectangle.beginFill(k.background); |
|---|
| | | rectangle.originColor = k.background; |
|---|
| | | // rectangle.originColor = k.background; |
|---|
| | | rectangle.alpha=k.alpha ? k.alpha : 1 |
|---|
| | | rectangle.drawRect(0, 0, k.width, k.height); |
|---|
| | | rectangle.x = k.x; |
|---|
| | | rectangle.y = k.y; |
|---|
| | | rectangle.title = k.title |
|---|
| | | rectangle.interactive = true |
|---|
| | | rectangle.cursor = "pointer" |
|---|
| | | rectangle.on('mouseover', onMouseOver) |
|---|
| | | function onMouseOver(event) { |
|---|
| | | rectangle.alpha = k.alpha ? k.alpha : 1 |
|---|
| | | console.log(event); |
|---|
| | | // 创建内容框 |
|---|
| | | let tooltip = new PIXI.Graphics(); |
|---|
| | |
|---|
| | | |
|---|
| | | // 监听鼠标移出事件，移除内容框 |
|---|
| | | rectangle.on('mouseout', () => { |
|---|
| | | rectangle.alpha = k.alpha ? k.alpha : 1 |
|---|
| | | pixiApp.stage.removeChild(tooltip); |
|---|
| | | pixiApp.stage.removeChild(text); |
|---|
| | | }); |
|---|
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | // window.addEventListener('DOMContentLoaded',function() { |
|---|
| | | // var tooltip = document.getElementById('tooltip'); |
|---|
