<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>库位地图</title>
|
<link rel="stylesheet" href="../../static/css/animate.min.css">
|
<link rel="stylesheet" href="../../static/vue/element/element.css">
|
<link rel="stylesheet" href="../../static/css/console_vue.css">
|
<link rel="stylesheet" href="../../static/css/toggle-switch.css">
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/layui/layui.js"></script>
|
<script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script>
|
<script type="text/javascript" src="../../static/js/common.js"></script>
|
<script type="text/javascript" src="../../static/vue/js/vue.min.js"></script>
|
<script type="text/javascript" src="../../static/vue/element/element.js"></script>
|
<script src="../../static/js/gsap.min.js"></script>
|
<script src="../../static/js/pixi-legacy.min.js"></script>
|
<style>
|
*{
|
margin: 0;
|
padding: 0;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="app">
|
<div id="pixiView">
|
|
</div>
|
|
<!--输出操作和FPS-->
|
<div style="position: absolute;top: 20px;right: 50px;">
|
<div>FPS:{{mapFps}}</div>
|
<el-button @click="drawer = true">操作</el-button>
|
</div>
|
|
<el-drawer
|
title="操作区域"
|
:visible.sync="drawer"
|
:with-header="true"
|
:modal="false"
|
>
|
<div class="floorBtnBox" v-for="(lev,idx) in floorList">
|
<el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="changeFloor(lev)">{{lev}}F</el-button>
|
</div>
|
<!-- <div>-->
|
<!-- <el-button @click="testMove()">测试移动车</el-button>-->
|
<!-- </div>-->
|
<!-- <div style="margin-top: 10px;">-->
|
<!-- <el-button @click="resetMap()">重置地图</el-button>-->
|
<!-- </div>-->
|
</el-drawer>
|
|
<el-drawer
|
title="库位详情"
|
:visible.sync="drawerLocNo"
|
:with-header="true"
|
:modal="false"
|
>
|
<div v-if="drawerLocNoData!=null">
|
<div style="margin: 10px;">
|
<!-- <div style="margin-top: 5px;">排：{{drawerLocNoData.row}}</div>-->
|
<!-- <div style="margin-top: 5px;">列：{{drawerLocNoData.bay}}</div>-->
|
<!-- <div style="margin-top: 5px;">层：{{drawerLocNoData.lev}}</div>-->
|
<div style="margin-top: 5px;">库位号：{{drawerLocNoData.locNo}}</div>
|
<div style="margin-top: 5px;">库位状态：{{drawerLocNoData.locSts}}</div>
|
</div>
|
</div>
|
</el-drawer>
|
|
<el-drawer
|
title="站点信息"
|
:visible.sync="drawerSta"
|
:with-header="true"
|
:modal="false"
|
>
|
<div v-if="drawerStaData!=null">
|
<div style="margin: 10px;">
|
<div style="margin-top: 5px;">站点：{{drawerStaData.siteId}}</div>
|
<div style="margin-top: 5px;">工作号：{{drawerStaData.workNo}}</div>
|
<div style="margin-top: 5px;">工作状态：{{drawerStaData.wrkSts}}</div>
|
<div style="margin-top: 5px;">工作类型：{{drawerStaData.ioType}}</div>
|
<div style="margin-top: 5px;">源站：{{drawerStaData.sourceStaNo}}</div>
|
<div style="margin-top: 5px;">目标站：{{drawerStaData.staNo}}</div>
|
<div style="margin-top: 5px;">源库位：{{drawerStaData.sourceLocNo}}</div>
|
<div style="margin-top: 5px;">目标库位：{{drawerStaData.locNo}}</div>
|
<div style="margin-top: 5px;">自动：{{drawerStaData.autoing}}</div>
|
<div style="margin-top: 5px;">有物：{{drawerStaData.loading}}</div>
|
<div style="margin-top: 5px;">能入：{{drawerStaData.canining}}</div>
|
<div style="margin-top: 5px;">能出：{{drawerStaData.canouting}}</div>
|
<div style="margin-top: 5px;">能出：{{drawerStaData.canouting}}</div>
|
</div>
|
</div>
|
</el-drawer>
|
|
</div>
|
<script>
|
let width = 25;
|
let height = 25;
|
let pixiApp;
|
let pixiStageList = [];
|
let pixiStaMap = new Map();
|
let objectsContainer;
|
let objectsContainer3;
|
let tracksGraphics;
|
let mapRoot;
|
let mapContentSize = { width: 0, height: 0 };
|
let graphics0;
|
let graphicsF;
|
let graphics3;
|
let graphics4;
|
let graphics5;
|
let graphics9;
|
let graphics67;
|
let graphicsLock;
|
let ws;
|
|
var app = new Vue({
|
el: '#app',
|
data: {
|
map: [],
|
currentLev: 1,
|
floorList: [], //当前项目楼层
|
drawer: false,
|
drawerLocNo: false,
|
drawerLocNoData: null,
|
drawerLocDetls: [],
|
reloadMap: true,
|
mapFps: 0,
|
currentLevStaList: [],//当前楼层站点list
|
drawerSta: false,
|
drawerStaData: null,
|
mapRotation: 0,
|
mapMirrorX: false,
|
mapConfigCodes: {
|
rotate: 'map_canvas_rotation',
|
mirror: 'map_canvas_mirror_x'
|
}
|
},
|
mounted() {
|
this.init()
|
this.createMap()
|
},
|
watch: {
|
map: {
|
deep: true,
|
handler(val) {
|
|
}
|
},
|
drawerLocNo: {
|
deep: true,
|
handler(val) {
|
if (!val) {
|
var sprite = pixiStageList[this.drawerLocNoData.x][this.drawerLocNoData.y];
|
updateColor(sprite, 0xFFFFFF);//恢复颜色
|
}
|
}
|
}
|
},
|
methods: {
|
init(){
|
let that = this
|
ws = new WebSocket("ws://" + window.location.host + baseUrl + "/console/websocket");
|
ws.onopen = this.webSocketOnOpen
|
ws.onerror = this.webSocketOnError
|
ws.onmessage = this.webSocketOnMessage
|
ws.onclose = this.webSocketClose
|
|
|
this.loadMapTransformConfig()
|
this.initLev()//初始化楼层信息
|
setTimeout(() => {
|
that.getMap(this.currentLev)
|
}, 1000);
|
|
},
|
initLev(){
|
let that = this
|
$.ajax({
|
url: baseUrl + "/console/map/lev/list",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {},
|
method: 'get',
|
success: function(res) {
|
if (res.code === 200) {
|
that.floorList = res.data;
|
} else if (res.code === 403) {
|
parent.location.href = baseUrl + "/login";
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'error'
|
});
|
}
|
}
|
});
|
},
|
//获取地图数据
|
getMap(lev) {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/console/map/" + lev + "/auth",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {},
|
method: 'get',
|
success: function(res) {
|
//获取地图数据
|
let data = res.data
|
that.createMapData(data)
|
}
|
})
|
},
|
changeFloor(lev) {
|
this.currentLev = lev
|
this.loadMapTransformConfig()
|
this.reloadMap = true
|
this.getMap(lev)
|
},
|
createMap(){
|
//Create a Pixi Application
|
pixiApp = new PIXI.Application({
|
// width: 1500,
|
// height: 800,
|
backgroundColor: 0xF5F7F9FF,
|
resizeTo: window
|
});
|
//Add the canvas that Pixi automatically created for you to the HTML document
|
$("#pixiView").append(pixiApp.view)
|
|
// 从Graphics对象创建一个纹理
|
graphicsF = pixiApp.renderer.generateTexture(getContainer(1000));
|
graphics0 = pixiApp.renderer.generateTexture(getContainer(0));
|
graphics3 = pixiApp.renderer.generateTexture(getContainer(3));
|
graphics4 = pixiApp.renderer.generateTexture(getContainer(4));
|
graphics5 = pixiApp.renderer.generateTexture(getContainer(5));
|
graphics9 = pixiApp.renderer.generateTexture(getContainer(9));
|
graphics67 = pixiApp.renderer.generateTexture(getContainer(67));
|
graphicsLock = pixiApp.renderer.generateTexture(getContainer(-999));
|
|
mapRoot = new PIXI.Container();
|
pixiApp.stage.addChild(mapRoot);
|
// 创建一个容器来管理大批量的显示对象
|
objectsContainer = new PIXI.Container();
|
mapRoot.addChild(objectsContainer);
|
|
tracksGraphics = new PIXI.Graphics();
|
mapRoot.addChild(tracksGraphics);
|
|
// 创建一个容器来管理大批量的显示对象
|
objectsContainer3 = new PIXI.Container();
|
mapRoot.addChild(objectsContainer3);
|
|
//*******************拖动画布*******************
|
let stageOriginalPos;
|
let mouseDownPoint;
|
let touchBlank = 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.view.addEventListener('wheel', (event) => {
|
event.stopPropagation();
|
event.preventDefault();
|
const rect = pixiApp.view.getBoundingClientRect();
|
const sx = event.clientX - rect.left;
|
const sy = event.clientY - rect.top;
|
const oldZoomX = pixiApp.stage.scale.x || 1;
|
const oldZoomY = pixiApp.stage.scale.y || 1;
|
const oldZoomAbs = Math.abs(oldZoomX) || 1;
|
const delta = event.deltaY;
|
let newZoomAbs = oldZoomAbs * 0.999 ** delta;
|
const mirrorX = this.mapMirrorX ? -1 : 1;
|
const newZoomX = mirrorX * newZoomAbs;
|
const newZoomY = newZoomAbs;
|
const worldX = (sx - pixiApp.stage.position.x) / oldZoomX;
|
const worldY = (sy - pixiApp.stage.position.y) / oldZoomY;
|
const newPosX = sx - worldX * newZoomX;
|
const newPosY = sy - worldY * newZoomY;
|
pixiApp.stage.setTransform(newPosX, newPosY, newZoomX, newZoomY, 0, 0, 0, 0, 0);
|
|
});
|
//*******************缩放画布*******************
|
|
//*******************FPS*******************
|
let g_Time = 0;
|
let fpsLastUpdateTs = 0;
|
let fpsDeltaSumMs = 0;
|
let fpsFrameCount = 0;
|
const fpsUpdateInterval = 200;
|
pixiApp.ticker.add((delta) => {
|
const timeNow = (new Date()).getTime();
|
const timeDiff = timeNow - g_Time;
|
g_Time = timeNow;
|
fpsDeltaSumMs += timeDiff;
|
fpsFrameCount += 1;
|
if (timeNow - fpsLastUpdateTs >= fpsUpdateInterval) {
|
const avgFps = fpsDeltaSumMs > 0 ? (fpsFrameCount * 1000 / fpsDeltaSumMs) : 0;
|
this.mapFps = Math.round(avgFps);
|
fpsDeltaSumMs = 0;
|
fpsFrameCount = 0;
|
fpsLastUpdateTs = timeNow;
|
}
|
});
|
//*******************FPS*******************
|
|
},
|
createMapData(map) {
|
if (this.reloadMap) {
|
this.reloadMap = false
|
pixiStageList = [map.length]//初始化列表
|
pixiStaMap = new Map();//重置
|
objectsContainer.removeChildren()
|
if (tracksGraphics) { tracksGraphics.clear(); }
|
map.forEach((item,index) => {
|
pixiStageList[index] = [item.length]
|
for (let idx = 0; idx < item.length; idx++) {
|
let val = item[idx]
|
if (val.value < 0 && (val.value != -999)) {
|
continue;
|
}
|
|
let sprite = getSprite(val.value, idx * width, index * height, val, (e) => {
|
if (val.value == 4) {
|
//站点
|
this.openDrawerSta(val)
|
}else {
|
//库位
|
this.rightEvent(index, idx, e);
|
updateColor(sprite, 0x9900ff);
|
}
|
});
|
|
if (val.value == 4) {
|
// 创建文本对象
|
const style = new PIXI.TextStyle({
|
fontFamily: 'Arial',
|
fontSize: 10,
|
fill: '#000000',
|
});
|
const text = new PIXI.Text(val.data, style);
|
text.anchor.set(0.5); // 设置文本锚点为中心点
|
text.position.set(sprite.width / 2, sprite.height / 2); // 将文本位置设置为Graphics对象的中心点
|
// 将文本对象添加到Graphics对象中
|
sprite.addChild(text);
|
sprite.textObj = text;
|
pixiStaMap.set(parseInt(val.data), sprite);//站点数据添加到map中
|
}else if (val.value == 67) {
|
// 创建提升机文本对象
|
const style = new PIXI.TextStyle({
|
fontFamily: 'Arial',
|
fontSize: 10,
|
fill: '#000000',
|
});
|
const text = new PIXI.Text(val.data, style);
|
text.anchor.set(0.5); // 设置文本锚点为中心点
|
text.position.set(sprite.width / 2, sprite.height / 2); // 将文本位置设置为Graphics对象的中心点
|
// 将文本对象添加到Graphics对象中
|
sprite.addChild(text);
|
sprite.textObj = text;
|
pixiStaMap.set(parseInt(val.data), sprite);//站点数据添加到map中
|
}
|
|
if (val.value == -999) {
|
pixiShuttleLockPathMap.set(val.locNo, sprite);
|
objectsContainer3.addChild(sprite);
|
}else {
|
objectsContainer.addChild(sprite);
|
}
|
pixiStageList[index][idx] = sprite
|
}
|
});
|
|
const b1 = objectsContainer.getLocalBounds();
|
const minX = b1.x;
|
const minY = b1.y;
|
const maxX = b1.x + b1.width;
|
const maxY = b1.y + b1.height;
|
const contentW = Math.max(0, maxX - minX);
|
const contentH = Math.max(0, maxY - minY);
|
mapContentSize = { width: contentW, height: contentH };
|
this.drawTracks(map);
|
this.applyMapTransform(true);
|
}
|
this.map = map;
|
},
|
isTrackCell(cell) {
|
if (!cell) { return false; }
|
const type = cell.type ? String(cell.type).toLowerCase() : '';
|
if (type === 'track' || type === 'crn' || type === 'dualcrn' || type === 'rgv') { return true; }
|
if (cell.trackSiteNo != null) { return true; }
|
const v = parseInt(cell.value, 10);
|
if (v === 3 || v === 9) { return true; }
|
if (cell.value != null) {
|
try {
|
const obj = (typeof cell.value === 'string') ? JSON.parse(cell.value) : cell.value;
|
if (obj && (obj.trackSiteNo != null || (obj.deviceNo != null && (type === 'crn' || type === 'dualcrn' || type === 'rgv')))) {
|
return true;
|
}
|
} catch (e) {}
|
}
|
return false;
|
},
|
drawTracks(map) {
|
if (!tracksGraphics || !Array.isArray(map)) { return; }
|
tracksGraphics.clear();
|
const railColor = 0x6c727a;
|
const railWidth = Math.max(1, Math.round(Math.min(width, height) * 0.08));
|
tracksGraphics.lineStyle(railWidth, railColor, 1);
|
|
for (let r = 0; r < map.length; r++) {
|
const row = map[r];
|
if (!Array.isArray(row)) { continue; }
|
for (let c = 0; c < row.length; c++) {
|
const cell = row[c];
|
if (!this.isTrackCell(cell)) { continue; }
|
const cx = c * width + width / 2;
|
const cy = r * height + height / 2;
|
const up = (r - 1 >= 0 && Array.isArray(map[r - 1])) ? map[r - 1][c] : null;
|
const right = (c + 1 < row.length) ? row[c + 1] : null;
|
const down = (r + 1 < map.length && Array.isArray(map[r + 1])) ? map[r + 1][c] : null;
|
const left = (c - 1 >= 0) ? row[c - 1] : null;
|
const hasN = this.isTrackCell(up);
|
const hasE = this.isTrackCell(right);
|
const hasS = this.isTrackCell(down);
|
const hasW = this.isTrackCell(left);
|
const seg = Math.min(width, height) * 0.5;
|
let drew = false;
|
if (hasN) { tracksGraphics.moveTo(cx, cy); tracksGraphics.lineTo(cx, cy - seg); drew = true; }
|
if (hasE) { tracksGraphics.moveTo(cx, cy); tracksGraphics.lineTo(cx + seg, cy); drew = true; }
|
if (hasS) { tracksGraphics.moveTo(cx, cy); tracksGraphics.lineTo(cx, cy + seg); drew = true; }
|
if (hasW) { tracksGraphics.moveTo(cx, cy); tracksGraphics.lineTo(cx - seg, cy); drew = true; }
|
if (!drew) {
|
tracksGraphics.moveTo(cx - seg * 0.4, cy);
|
tracksGraphics.lineTo(cx + seg * 0.4, cy);
|
}
|
}
|
}
|
},
|
parseRotation(value) {
|
const num = parseInt(value, 10);
|
if (!isFinite(num)) { return 0; }
|
const rot = ((num % 360) + 360) % 360;
|
return (rot === 90 || rot === 180 || rot === 270) ? rot : 0;
|
},
|
parseMirror(value) {
|
if (value === true || value === false) { return value; }
|
if (value == null) { return false; }
|
const str = String(value).toLowerCase();
|
return str === '1' || str === 'true' || str === 'y';
|
},
|
loadMapTransformConfig() {
|
if (!window.$ || typeof baseUrl === 'undefined') { return; }
|
$.ajax({
|
url: baseUrl + "/config/listAll/auth",
|
headers: { 'token': localStorage.getItem('token') },
|
dataType: 'json',
|
method: 'GET',
|
success: (res) => {
|
if (!res || res.code !== 200 || !Array.isArray(res.data)) {
|
if (res && res.code === 403) { parent.location.href = baseUrl + "/login"; }
|
return;
|
}
|
const byCode = {};
|
res.data.forEach((item) => {
|
if (item && item.code) { byCode[item.code] = item; }
|
});
|
const rotateCfg = byCode[this.mapConfigCodes.rotate];
|
const mirrorCfg = byCode[this.mapConfigCodes.mirror];
|
if (rotateCfg && rotateCfg.value != null) {
|
this.mapRotation = this.parseRotation(rotateCfg.value);
|
}
|
if (mirrorCfg && mirrorCfg.value != null) {
|
this.mapMirrorX = this.parseMirror(mirrorCfg.value);
|
}
|
if (mapContentSize && mapContentSize.width > 0 && mapContentSize.height > 0) {
|
this.applyMapTransform(true);
|
}
|
}
|
});
|
},
|
getViewportSize() {
|
if (!pixiApp || !pixiApp.renderer) { return { width: 0, height: 0 }; }
|
const screen = pixiApp.renderer.screen;
|
if (screen && screen.width > 0 && screen.height > 0) {
|
return { width: screen.width, height: screen.height };
|
}
|
const rect = pixiApp.view ? pixiApp.view.getBoundingClientRect() : null;
|
return { width: rect ? rect.width : 0, height: rect ? rect.height : 0 };
|
},
|
getTransformedContentSize() {
|
const size = mapContentSize || { width: 0, height: 0 };
|
const w = size.width || 0;
|
const h = size.height || 0;
|
const rot = ((this.mapRotation % 360) + 360) % 360;
|
const swap = rot === 90 || rot === 270;
|
return { width: swap ? h : w, height: swap ? w : h };
|
},
|
fitStageToContent() {
|
if (!pixiApp || !mapContentSize) { return; }
|
const size = this.getTransformedContentSize();
|
const contentW = size.width || 0;
|
const contentH = size.height || 0;
|
if (contentW <= 0 || contentH <= 0) { return; }
|
const viewport = this.getViewportSize();
|
const vw = viewport.width;
|
const vh = viewport.height;
|
let scale = Math.min(vw / contentW, vh / contentH) * 0.95;
|
if (!isFinite(scale) || scale <= 0) { scale = 1; }
|
const baseW = mapContentSize.width || contentW;
|
const baseH = mapContentSize.height || contentH;
|
const mirrorX = this.mapMirrorX ? -1 : 1;
|
const scaleX = scale * mirrorX;
|
const scaleY = scale;
|
const posX = (vw / 2) - (baseW / 2) * scaleX;
|
const posY = (vh / 2) - (baseH / 2) * scaleY;
|
pixiApp.stage.setTransform(posX, posY, scaleX, scaleY, 0, 0, 0, 0, 0);
|
},
|
applyMapTransform(fitToView) {
|
if (!mapRoot || !mapContentSize) { return; }
|
const contentW = mapContentSize.width || 0;
|
const contentH = mapContentSize.height || 0;
|
if (contentW <= 0 || contentH <= 0) { return; }
|
mapRoot.pivot.set(contentW / 2, contentH / 2);
|
mapRoot.position.set(contentW / 2, contentH / 2);
|
mapRoot.rotation = (this.mapRotation % 360) * Math.PI / 180;
|
mapRoot.scale.set(1, 1);
|
if (fitToView) { this.fitStageToContent(); }
|
},
|
rightEvent(x, y, e) {
|
this.drawerLocNo = true
|
this.drawerLocNoData = {x:x, y: y, z: this.currentLev, locNo: this.map[x][y].locNo,
|
locSts: this.map[x][y].locSts,row:this.map[x][y].row, bay: this.map[x][y].bay, lev: this.currentLev};
|
},
|
webSocketOnOpen(e) {
|
console.log("open");
|
},
|
webSocketOnError(e) {
|
console.log(e);
|
},
|
webSocketOnMessage(e) {
|
const result = JSON.parse(e.data);
|
if (result.url == "/console/map/auth") {
|
this.setMap(JSON.parse(result.data))
|
}else if (result.url == "/console/locMap/auth") {
|
this.setMap(JSON.parse(result.data))
|
}
|
},
|
webSocketClose(e) {
|
console.log("close");
|
},
|
sendWs(message) {
|
if (ws.readyState == WebSocket.OPEN) {
|
ws.send(message)
|
}
|
},
|
openDrawerSta(data) {
|
let that = this
|
this.drawerSta = true;
|
$.ajax({
|
url: baseUrl + "/console/site/detail",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {
|
siteId: data.data
|
},
|
method: 'post',
|
success: function(res) {
|
//解析数据
|
let siteInfo = res.data;
|
if (res.code == 200) {
|
that.drawerStaData = siteInfo;
|
}
|
}
|
})
|
},
|
}
|
})
|
|
function getContainer(value) {
|
let graphics = new PIXI.Graphics();
|
if (value === 0) {
|
graphics.beginFill(0x55aaff);
|
} else if (value === 3) {//母轨道
|
graphics.beginFill(0x00ff7f);
|
graphics.visible = true;
|
} else if (value === 4) {//站点
|
graphics.beginFill(0xffff00);
|
graphics.visible = true;
|
} else if (value === 5) {//充电桩
|
graphics.beginFill(0xffaa7f);
|
graphics.visible = true;
|
} else if (value === 9) {//轨迹
|
graphics.beginFill(0xff0000);
|
}else if (value === 67) {//提升机
|
graphics.beginFill(0xaaffff);
|
}else if (value === -999) {//路径锁定
|
graphics.beginFill(0xf83333);
|
}else if (value === 1000) {//满库位
|
graphics.beginFill(0xf83333);
|
}
|
graphics.lineStyle(1, 0xffffff, 1);
|
graphics.drawRect(0, 0, width, height);
|
graphics.endFill();
|
|
return graphics;
|
}
|
|
function getGraphics(color, width, height, x, y) {
|
let graphics = new PIXI.Graphics();
|
graphics.beginFill(color);
|
graphics.lineStyle(1, 0xffffff, 1);
|
graphics.drawRect(0, 0, width, height);
|
graphics.position.set(x, y);
|
graphics.endFill();
|
return graphics;
|
}
|
|
function getSprite(value, x, y, item, pointerDownEvent) {
|
let sprite;
|
if (value == 0) {
|
if(item.locSts == 'O') {
|
sprite = new PIXI.Sprite(graphics0);
|
}else if(item.locSts == 'F') {
|
sprite = new PIXI.Sprite(graphicsF);
|
}else {
|
sprite = new PIXI.Sprite(graphics0);
|
}
|
} else if (value == 3) {
|
sprite = new PIXI.Sprite(graphics3);
|
} else if (value == 4) {
|
sprite = new PIXI.Sprite(graphics4);
|
} else if (value == 5) {
|
sprite = new PIXI.Sprite(graphics5);
|
} else if (value == 9) {
|
sprite = new PIXI.Sprite(graphics9);
|
} else if (value == 67) {
|
sprite = new PIXI.Sprite(graphics67);
|
} else if (value == -999) {
|
sprite = new PIXI.Sprite(graphicsLock);
|
} else {
|
sprite = new PIXI.Sprite(graphics0);
|
}
|
sprite.position.set(x, y);
|
const type = item && item.type ? String(item.type).toLowerCase() : '';
|
const numVal = parseInt(value, 10);
|
const isTrackCell = numVal === 3 || numVal === 9 || type === 'track' || type === 'crn' || type === 'dualcrn' || type === 'rgv';
|
if (!isTrackCell) {
|
sprite.interactive = true; // 必须要设置才能接收事件
|
sprite.buttonMode = true; // 让光标在hover时变为手型指针
|
sprite.on('pointerdown', (e) => {
|
pointerDownEvent(e)
|
})
|
}
|
|
return sprite;
|
}
|
|
/**
|
* 更新颜色
|
*/
|
function updateColor(sprite, color) {
|
// graphics.clear()
|
// graphics.beginFill(color);
|
// graphics.drawRect(0, 0, width, height);
|
sprite.tint = color;
|
}
|
|
</script>
|
</body>
|
</html>
|
