From d1e0acaeffecb0da9cb1c8d61b14a3b719d7bb73 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期四, 26 九月 2024 14:24:41 +0800
Subject: [PATCH] #新地图
---
src/main/webapp/views/wcsmap/wcsmap.html | 575 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 361 insertions(+), 214 deletions(-)
diff --git a/src/main/webapp/views/wcsmap/wcsmap.html b/src/main/webapp/views/wcsmap/wcsmap.html
index 1ad55b0..2a548c3 100644
--- a/src/main/webapp/views/wcsmap/wcsmap.html
+++ b/src/main/webapp/views/wcsmap/wcsmap.html
@@ -1,14 +1,16 @@
<!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;
@@ -22,244 +24,389 @@
}
</style>
</head>
-<body>
-<div id="app">
- <div id="pixiView">
+<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>
+ <!--杈撳嚭鎿嶄綔鍜孎PS-->
+ <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>
- <!--杈撳嚭鎿嶄綔鍜孎PS-->
- <div style="position: absolute;top: 20px;right: 50px;">
- <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);
+ created() {
+ mapData
+
},
- })
- let pixiApp = new PIXI.Application({
- resizeTo: window,
- backgroundColor: 0x1f3366
- })
- $("#pixiView").append(pixiApp.view)
- // 鍔犺浇浣嶅浘璧勬簮
- PIXI.Loader.shared.add('ChillRoundF','./image_font.xml.fnt').load();
- function onAssetsLoaded() {
- 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 stageOriginalPos;
- let mouseDownPoint;
- let touchBlank = false;
- let touchOver = false;
- pixiApp.renderer.plugins.interaction.on(
- 'pointerdown',
- (event) => {
- const globalPos = event.data.global;
- // 璁板綍涓媠tage鍘熸潵鐨勪綅缃�
- stageOriginalPos = [pixiApp.stage.position._x, pixiApp.stage.position._y];
- // 璁板綍涓媘ouse down鐨勪綅缃�
- mouseDownPoint = [globalPos.x, globalPos.y];
- if (!event.target) {
- // 鐐瑰埌浜嗙敾甯冪殑绌虹櫧浣嶇疆
- touchBlank = true;
- }
- }
- );
+ 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);
+ }
+ }
+ })
- 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
+ },
+ 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
+ })
+ $("#pixiView").append(pixiApp.view)
+ // 鍔犺浇浣嶅浘璧勬簮
+ PIXI.Loader.shared.add('ChillRoundF', './image_font.xml.fnt').load();
+ function onAssetsLoaded() {
+ createText();
+ }
+ function createText() {
+ let text = new PIXI.BitmapText('123', {
+ fontName: 'ChillRoundF',
+ fontSize: 16,
+ tint: 0xffffff
+ })
+ text.x = 100;
+ text.y = 100;
+ pixiApp.stage.addChild(text)
+ }
+ //*******************鎷栧姩鐢诲竷*******************
+ let stageOriginalPos;
+ let mouseDownPoint;
+ let touchBlank = false;
+ let touchOver = false;
+ pixiApp.renderer.plugins.interaction.on(
+ 'pointerdown',
+ (event) => {
+ const globalPos = event.data.global;
+ // 璁板綍涓媠tage鍘熸潵鐨勪綅缃�
+ stageOriginalPos = [pixiApp.stage.position._x, pixiApp.stage.position._y];
+ // 璁板綍涓媘ouse 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.renderer.plugins.interaction.on(
+ // 'mouseover',
+ // (event) => {
+ // const globalPos = event.data.global;
+ // console.log(globalPos);
+ // }
+ // );
+
+ //*******************鎷栧姩鐢诲竷*******************
+
+ //*******************缂╂斁鐢诲竷*******************
+ pixiApp.view.addEventListener('wheel', (event) => {
+ event.stopPropagation();
+ event.preventDefault();
+ // 鍥犱负鐢诲竷鏄厖婊¤绐楃殑锛屾墍浠lientX绛変簬mouse point鍦╮enderer涓婄殑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
+ );
+
+ });
+ //*******************缂╂斁鐢诲竷*******************
+
+ // 鍒涘缓涓�涓鍣ㄦ潵绠＄悊澶ф壒閲忕殑鏄剧ず瀵硅薄
+ objectsContainer = new PIXI.Container();
+ pixiApp.stage.addChild(objectsContainer);
+
+
+ //*******************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*******************
+ for (let k of mapData.plant) {
+ 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: 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.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();
+ tooltip.beginFill(0xFFFFFF); // 鍐呭妗嗚儗鏅鑹�
+ tooltip.lineStyle(1, 0x000000); // 鍐呭妗嗚竟妗嗘牱寮�
+ tooltip.drawRect(0, 0, 100, 40); // 缁樺埗鍐呭妗�
+ tooltip.x = event.data.global.x; // 鏍规嵁榧犳爣浣嶇疆璋冩暣鍐呭妗嗕綅缃�
+ tooltip.y = event.data.global.y;
+ pixiApp.stage.addChild(tooltip);
+
+ // 璁＄畻鍐呭妗嗙殑浣嶇疆锛屼娇鍏跺湪榧犳爣鍙充笅瑙掑亸绉�10鍍忕礌澶�
+ tooltip.x = event.currentTarget.x + event.currentTarget.width + 10;
+ tooltip.y = event.currentTarget.y + event.currentTarget.height + 10;
+ // 娣诲姞鏂囨湰鍒板唴瀹规
+ var hel = `绔欑偣缂栧彿锛�${k.title}`
+ let text = new PIXI.BitmapText(hel, {
+ fontName: 'ChillRoundF',
+ fontSize: 16,
+ tint: 0xffffff
+ })
+ // text.x = 100;
+ // text.y = 100;
+ // pixiApp.stage.addChild(text)
+ // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});
+ text.x = tooltip.x;
+ text.y = tooltip.y;
+ text.resolution = pixiApp.renderer.resolution;
+ pixiApp.stage.addChild(text);
+
+ // 鐩戝惉榧犳爣绉诲嚭浜嬩欢锛岀Щ闄ゅ唴瀹规
+ rectangle.on('mouseout', () => {
+ rectangle.alpha = k.alpha ? k.alpha : 1
+ pixiApp.stage.removeChild(tooltip);
+ pixiApp.stage.removeChild(text);
+ });
+ }
+ objectsContainer.addChild(rectangle);
+ }
+ let shelf1 = mapData.shelf1
+ for (let j in shelf1) {
+ let k = shelf1[j]
+ let y = k.y
+ for (let i = 0; i < k.anfme; i++) {
+ let rectangle = new PIXI.Graphics();
+ rectangle.beginFill(0xffffff);
+ // rectangle.lineStyle(1, 0xffffff);
+ rectangle.drawRect(0, 0, k.unitX - 2, k.unitY - 2);
+ rectangle.x = k.x + k.unitX * i;
+ rectangle.y = y;
+ objectsContainer.addChild(rectangle);
+ }
+ }
+
+ let shelf2 = mapData.shelf2
+ for (let j in shelf2) {
+ let k = shelf2[j]
+ let y = k.y
+ for (let i = 0; i < k.anfme; i++) {
+ let rectangle = new PIXI.Graphics();
+ rectangle.beginFill(0xffffff);
+ // rectangle.lineStyle(1, 0xffffff);
+ rectangle.drawRect(0, 0, k.unitX - 2, k.unitY);
+ rectangle.x = k.x + k.unitX * i;
+ rectangle.y = y;
+ objectsContainer.addChild(rectangle);
+ }
+ }
+
+
+
+
+
}
}
- );
- pixiApp.renderer.plugins.interaction.on(
- 'pointerup',
- (event) => {
- touchBlank = false;
- }
- );
- // pixiApp.renderer.plugins.interaction.on(
- // 'mouseover',
- // (event) => {
- // const globalPos = event.data.global;
- // console.log(globalPos);
- // }
- // );
-
- //*******************鎷栧姩鐢诲竷*******************
-
- //*******************缂╂斁鐢诲竷*******************
- pixiApp.view.addEventListener('wheel', (event) => {
- event.stopPropagation();
- event.preventDefault();
- // 鍥犱负鐢诲竷鏄厖婊¤绐楃殑锛屾墍浠lientX绛変簬mouse point鍦╮enderer涓婄殑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
- );
-
- });
- //*******************缂╂斁鐢诲竷*******************
-
- // 鍒涘缓涓�涓鍣ㄦ潵绠＄悊澶ф壒閲忕殑鏄剧ず瀵硅薄
- objectsContainer = new PIXI.Container();
- pixiApp.stage.addChild(objectsContainer);
+ })
- //*******************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*******************
- for (let k of mapData.plant) {
- 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);
- }
- for (let k of mapData.conveyor) {
- let rectangle = new PIXI.Graphics();
- rectangle.beginFill(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.interactive = true
- rectangle.cursor = "pointer"
- rectangle.on('mouseover', onMouseOver)
- function onMouseOver(event) {
- console.log(event);
- // 鍒涘缓鍐呭妗�
- let tooltip = new PIXI.Graphics();
- tooltip.beginFill(0xFFFFFF); // 鍐呭妗嗚儗鏅鑹�
- tooltip.lineStyle(1, 0x000000); // 鍐呭妗嗚竟妗嗘牱寮�
- tooltip.drawRect(0, 0, 100, 40); // 缁樺埗鍐呭妗�
- tooltip.x = event.data.global.x; // 鏍规嵁榧犳爣浣嶇疆璋冩暣鍐呭妗嗕綅缃�
- tooltip.y = event.data.global.y;
- pixiApp.stage.addChild(tooltip);
- // 璁＄畻鍐呭妗嗙殑浣嶇疆锛屼娇鍏跺湪榧犳爣鍙充笅瑙掑亸绉�10鍍忕礌澶�
- tooltip.x = event.currentTarget.x + event.currentTarget.width + 10;
- tooltip.y = event.currentTarget.y + event.currentTarget.height + 10;
- // 娣诲姞鏂囨湰鍒板唴瀹规
- var hel = `绔欑偣缂栧彿锛�${k.title}`
- let text = new PIXI.BitmapText(hel,{
- fontName: 'ChillRoundF',
- fontSize: 16,
- tint: 0xffffff
- })
- // text.x = 100;
- // text.y = 100;
- // pixiApp.stage.addChild(text)
- // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});
- text.x = tooltip.x;
- text.y = tooltip.y;
- text.resolution = pixiApp.renderer.resolution;
- pixiApp.stage.addChild(text);
-
- // 鐩戝惉榧犳爣绉诲嚭浜嬩欢锛岀Щ闄ゅ唴瀹规
- rectangle.on('mouseout', () => {
- pixiApp.stage.removeChild(tooltip);
- pixiApp.stage.removeChild(text);
- });
- }
- objectsContainer.addChild(rectangle);
- }
- let shelf1 = mapData.shelf1
- for (let j in shelf1) {
- let k = shelf1[j]
- let y = k.y
- for (let i = 0; i < k.anfme; i++) {
- let rectangle = new PIXI.Graphics();
- rectangle.beginFill(0xffffff);
- // rectangle.lineStyle(1, 0xffffff);
- rectangle.drawRect(0, 0, k.unitX-2, k.unitY-2);
- rectangle.x = k.x + k.unitX * i;
- rectangle.y = y;
- objectsContainer.addChild(rectangle);
- }
- }
-
- let shelf2 = mapData.shelf2
- for (let j in shelf2) {
- let k = shelf2[j]
- let y = k.y
- for (let i = 0; i < k.anfme; i++) {
- let rectangle = new PIXI.Graphics();
- rectangle.beginFill(0xffffff);
- // rectangle.lineStyle(1, 0xffffff);
- rectangle.drawRect(0, 0, k.unitX-2, k.unitY);
- rectangle.x = k.x + k.unitX * i;
- rectangle.y = y;
- objectsContainer.addChild(rectangle);
- }
- }
-
-
@@ -282,5 +429,5 @@
// tooltip.style.display = 'none'
// })
// })
-
+
</script>
\ No newline at end of file
--
Gitblit v1.9.1