zy-wcs.git - Gitblit

			@@ -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>
			<!--输出操作和FPS-->
			<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>
			<!--输出操作和FPS-->
			<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;
			// 记录下stage原来的位置
			stageOriginalPos = [pixiApp.stage.position._x, pixiApp.stage.position._y];
			// 记录下mouse 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;
			// 记录下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.renderer.plugins.interaction.on(
			// 'mouseover',
			// (event) => {
			// const globalPos = event.data.global;
			// console.log(globalPos);
			// }
			// );

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

			//*****************缩放画布*****************
			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
			);

			});
			//*****************缩放画布*****************

			// 创建一个容器来管理大批量的显示对象
			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();
			// 因为画布是充满视窗的，所以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
			);

			});
			//*****************缩放画布*****************

			// 创建一个容器来管理大批量的显示对象
			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>

	src/main/webapp/views/wcsmap/mapData.json	240 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/views/wcsmap/wcsmap.html	575 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史