From c635d78b479510ebe2556a420948effcd30a0731 Mon Sep 17 00:00:00 2001
From: skyouc
Date: 星期六, 21 十二月 2024 18:40:43 +0800
Subject: [PATCH] 新建德森项目分支
---
zy-asrs-admin/src/components/loc/map/index.vue | 1544 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 772 insertions(+), 772 deletions(-)
diff --git a/zy-asrs-admin/src/components/loc/map/index.vue b/zy-asrs-admin/src/components/loc/map/index.vue
index cb39c13..2f624c9 100644
--- a/zy-asrs-admin/src/components/loc/map/index.vue
+++ b/zy-asrs-admin/src/components/loc/map/index.vue
@@ -1,772 +1,772 @@
-<script setup>
-import { ref, onMounted, watch } from 'vue';
-import { get, post, postBlob } from '@/utils/request.js'
-import { message, Modal } from 'ant-design-vue';
-import { logout } from '@/config.js';
-import { formatMessage } from '@/utils/localeUtils.js';
-import {
- CompressOutlined,
-} from "@ant-design/icons-vue";
-import * as PIXI from 'pixi.js'
-
-let width = 25;
-let height = 25;
-let pixiApp;
-let pixiStageMap = new Map();
-let objectsContainer;
-let map = []
-
-const pixiView = ref(null)
-const mapFps = ref(0)
-const currentLev = ref(1)
-const levList = ref([])
-const pointContainerWidth = ref(0)
-const drawer = ref(false)
-const drawerLocData = ref(null)
-const drawerLocDetls = ref([])
-const drawerLocDetlField = ref([])
-
-const drawerOper = ref(false)
-const drawerOperLocNo = ref(null)
-const drawerOperMatnr = ref(null)
-const drawerOperMaktx = ref(null)
-
-onMounted(() => {
- createMap();
- init(currentLev.value);
-})
-
-watch(drawer, (newVal, oldVal) => {
- if (!drawer.value) {
- var rectangle = pixiStageMap.get(drawerLocData.value.locNo)
- updateColor(rectangle, rectangle.originColor);//鎭㈠棰滆壊
- }
-})
-
-function switchLev(lev) {
- currentLev.value = lev;
- init(lev);
-}
-
-function init(lev) {
- get('/api/locMap/getData/' + lev + '/auth', {}).then(resp => {
- let result = resp.data;
- if (result.code == 200) {
- let tmp = JSON.parse(result.data);
- let tmpMap = []
- tmp.forEach((item, index) => {
- let data2 = []
- item.forEach((val, idx) => {
- val.searchStatus = false//鎼滅储鏍囪
- val.rectangle = null;
- data2.push(val)
- })
- pointContainerWidth.value = item.length * (40 + 1)
- tmpMap.push(data2)
- })
-
- createMapData(tmpMap);
- }
- })
-
- get('/api/locMap/getLev', {}).then(resp => {
- let result = resp.data;
- if (result.code == 200) {
- let tmp = result.data;
- levList.value = tmp;
- }
- })
-}
-
-function createMap() {
- //Create a Pixi Application
- pixiApp = new PIXI.Application({
- width: pixiView.value.offsetWidth,
- height: window.innerHeight * 0.75,
- backgroundColor: 0xF5F7F9FF,
- // resizeTo: window
- });
-
- //Add the canvas that Pixi automatically created for you to the HTML document
- pixiView.value.appendChild(pixiApp.view)
-
- // 鍒涘缓涓�涓鍣ㄦ潵绠＄悊澶ф壒閲忕殑鏄剧ず瀵硅薄
- objectsContainer = new PIXI.Container();
-
- pixiApp.stage.addChild(objectsContainer);
-
- //*******************鎷栧姩鐢诲竷*******************
- let stageOriginalPos;
- let mouseDownPoint;
- let touchBlank = 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.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
- );
-
- });
- //*******************缂╂斁鐢诲竷*******************
-
- //*******************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;
- mapFps.value = parseInt(fps)
- });
- //*******************FPS*******************
-}
-
-function createMapData(map) {
- objectsContainer.removeChildren();
- map.forEach((item, index) => {
- for (let idx = 0; idx < item.length; idx++) {
- let val = item[idx]
- if (val.value < 0) {
- continue;
- }
- let rectangle = getContainer(val.value, idx * width, index * height, map[index][idx].locSts);
- rectangle.on('click', (e) => {
- openLocDrawer(index, idx, map[index][idx], { x: e.data.originalEvent.offsetX, y: e.data.originalEvent.offsetY })
- updateColor(rectangle, 0x9900ff);
- });
- rectangle.locX = index;
- rectangle.locY = idx;
-
- pixiStageMap.set(map[index][idx].locNo, rectangle);
- objectsContainer.addChild(rectangle);
- }
- })
-
- //瑙嗚灞呬腑
- let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
- let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
- pixiApp.stage.position.set(containerWidth, containerHeight);
-}
-
-function containerAppViewCenter() {
- //瑙嗚灞呬腑
- let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
- let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
- pixiApp.stage.position.set(containerWidth, containerHeight);
-}
-
-function openLocDrawer(x, y, loc, e) {
- drawer.value = true;
- drawerLocData.value = loc;
-
- get('/api/locDetl/locNo/' + loc.locNo, {}).then(resp => {
- let result = resp.data;
- if (result.code == 200) {
- drawerLocDetls.value = result.data;
- }
- })
-}
-
-function getContainer(value, x, y, locSts) {
- let rectangle = new PIXI.Graphics();
- if (value === 0) {
- if (locSts === "F") {
- rectangle.beginFill(0xff0000);
- rectangle.originColor = 0xff0000;
- } else if (locSts === "O") {
- rectangle.beginFill(0x55aaff);
- rectangle.originColor = 0x55aaff;
- } else if (locSts === "D") {
- rectangle.beginFill(0xc2c934);
- rectangle.originColor = 0xc2c934;
- } else if (locSts === "P") {
- rectangle.beginFill(0xf1aa19);
- rectangle.originColor = 0xf1aa19;
- } else if (locSts === "R") {
- rectangle.beginFill(0x618593);
- rectangle.originColor = 0x618593;
- } else if (locSts === "S") {
- rectangle.beginFill(0xfa736f);
- rectangle.originColor = 0xfa736f;
- } else {
- rectangle.beginFill(0x86779d);
- rectangle.originColor = 0x86779d;
- }
- } else if (value === 3) {//姣嶈建閬�
- rectangle.beginFill(0x00ff7f);
- rectangle.originColor = 0x00ff7f;
- rectangle.visible = false;
- } else if (value === 4) {//绔欑偣
- rectangle.beginFill(0xffff00);
- rectangle.originColor = 0xffff00;
- rectangle.visible = false;
- } else if (value === 5) {//鍏呯數妗�
- rectangle.beginFill(0xffaa7f);
- rectangle.originColor = 0xffaa7f;
- rectangle.visible = false;
- } else if (value === 9) {//杞ㄨ抗
- rectangle.beginFill(0xff0000);
- rectangle.originColor = 0xff0000;
- }
- // rectangle.lineStyle(1, 0xffffff, 1);
- rectangle.drawRect(0, 0, width, height);
- rectangle.x = x;
- rectangle.y = y;
- // 璁剧疆鏄惁鍙互浜や簰
- rectangle.interactive = true;
- rectangle.endFill();
-
- // 鍒涘缓鏂囨湰瀵硅薄
- const style = new PIXI.TextStyle({
- fontSize: 14 * window.devicePixelRatio,
- fill: 'white',
- align: 'center', // 璁剧疆鏂囨湰姘村钩灞呬腑瀵归綈
- verticalAlign: 'middle' // 璁剧疆鏂囨湰鍨傜洿灞呬腑瀵归綈
- });
- const text = new PIXI.Text(locSts, style);
- text.anchor.set(0.5); // 璁剧疆鏂囨湰閿氱偣涓轰腑蹇冪偣
- text.position.set(rectangle.width / 2, rectangle.height / 2); // 灏嗘枃鏈綅缃缃负Graphics瀵硅薄鐨勪腑蹇冪偣
- // 灏嗘枃鏈璞℃坊鍔犲埌Graphics瀵硅薄涓�
- rectangle.addChild(text);
-
- return rectangle;
-}
-
-/**
-* 鏇存柊棰滆壊
-*/
-function updateColor(rectangle, color) {
- rectangle.clear()
- rectangle.beginFill(color);
- rectangle.drawRect(0, 0, width, height);
-}
-
-</script>
-
-<script>
-export default {
- name: '搴撲綅鍦板浘'
-}
-</script>
-
-<template>
- <div style="position: relative;overflow: hidden;">
- <div ref="pixiView">
-
- </div>
-
- <!--杈撳嚭鎿嶄綔鍜孎PS-->
- <div style="position: absolute;top: 0px;right: 10px;user-select: none;">
- <div>FPS:{{ mapFps }}</div>
- <a-button @click="drawerOper = true">鎿嶄綔</a-button>
- </div>
-
- <!--杈撳嚭鎿嶄綔鍜孎PS-->
- <div style="position: absolute;bottom: 20px;left: 20px;user-select: none;">
- <a-button type="dashed" @click="containerAppViewCenter">
- <CompressOutlined />
- </a-button>
- </div>
-
- <div>
- <a-drawer v-model:open="drawer" placement="right" style="background: #f3f3f3;">
- <div style="margin-top: 10px;">
- <a-tag>{{ formatMessage('locMap.locNo', '搴撲綅鍙�') }}</a-tag>{{ drawerLocData.locNo }}
- </div>
- <div style="margin-top: 20px;">
- <a-tag>{{ formatMessage('locMap.locSts', '搴撲綅鐘舵��') }}</a-tag>{{ drawerLocData.locSts }}.{{
- drawerLocData.locSts$ }}
- </div>
- <div style="margin-top: 20px;">
- <div v-for="(item, index) in drawerLocDetls" :key="index" style="margin-top: 20px;">
- <a-card :title="item.matnr" :bordered="false" style="width: 300px">
- <div>{{ formatMessage('locMap.batch', '鎵瑰彿') }}锛歿{ item.batch }}</div>
- <div>{{ formatMessage('locMap.orderNo', '鍗曟嵁缂栧彿') }}锛歿{ item.orderNo }}</div>
- <div>{{ formatMessage('locMap.anfme', '鏁伴噺') }}锛歿{ item.anfme }}</div>
- <div v-for="(field, index) in item.dynamicFieldsList" :key="index">{{
- formatMessage('locMap.' + field.key, field.desc) }}锛歿{ field.value }}</div>
- </a-card>
- </div>
- </div>
- </a-drawer>
- </div>
-
- <div>
- <a-drawer v-model:open="drawerOper" placement="right">
- <div style="margin-top: 10px;">
- <div>
- {{ formatMessage('locMap.locNo', '搴撲綅鍙�') }}
- </div>
- <div style="margin-top: 10px;">
- <a-input v-model:value="drawerOperLocNo" :placeholder="formatMessage('locMap.locNo', '搴撲綅鍙�')" />
- </div>
- </div>
- <div style="margin-top: 20px;">
- <div>
- {{ formatMessage('locMap.matnr', '鍟嗗搧缂栧彿') }}
- </div>
- <div style="margin-top: 10px;">
- <a-input v-model:value="drawerOperMatnr" :placeholder="formatMessage('locMap.matnr', '鍟嗗搧缂栧彿')" />
- </div>
- </div>
- <div style="margin-top: 20px;">
- <div>
- {{ formatMessage('locMap.maktx', '鍟嗗搧鍚嶇О') }}
- </div>
- <div style="margin-top: 10px;">
- <a-input v-model:value="drawerOperMaktx" :placeholder="formatMessage('locMap.maktx', '鍟嗗搧鍚嶇О')" />
- </div>
- </div>
- <div style="margin-top: 20px;">
- <a-button type="primary" @click="drawerOper = true">鎼滅储</a-button>
- </div>
-
- <div style="margin-top: 50px;">
- <div v-for="(lev, index) in levList" :key="index" style="margin-top: 10px;">
- <a-button :type="currentLev == lev ? 'primary' : 'dashed'" @click="switchLev(lev)"
- style="width: 100%;">{{ lev }}F</a-button>
- </div>
- </div>
- </a-drawer>
- </div>
- </div>
-</template>
-
-<style>
-* {
- margin: 0;
- padding: 0;
-}
-
-.pointContainer {
- display: flex;
- justify-content: center;
- /*margin-top: 1px;*/
-}
-
-.pointBox {
- background: #bababa;
- width: 40px;
- height: 40px;
- /*margin-right: 1px;*/
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 14px;
- user-select: none;
- color: #fff;
-}
-
-.pointBox:hover {
- background: #00ff7f;
-}
-
-.pointBoxEmpty {
- background: #c2c934;
-}
-
-.pointBoxOut {
- background: #f1aa19;
-}
-
-.pointBoxOutYy {
- background: #618593;
-}
-
-.pointBoxInYy {
- background: #fa736f;
-}
-
-.pointBoxGreen {
- background: #00ff7f;
-}
-
-.pointBoxBlue {
- background: #55aaff;
-}
-
-.pointBoxRed {
- background: #ff0000;
-}
-
-.pointBoxStart {
- background: #ffaa00;
-}
-
-.pointBoxEnd {
- background: #ff55ff;
-}
-
-.pointBoxStation {
- background: #ffff00;
-}
-
-.chargeStation {
- background: #ffaa7f;
-}
-
-.pointBoxDefault {
- background: #86779d;
-}
-
-.pointBoxSelected {
- background: #00ff7f !important;
-}
-
-.pointBoxSearch {
- background: #9900ff;
-}
-
-.crnLine {
- width: auto;
- height: 2px;
- margin: 10px 0;
- background: #000;
- position: relative;
-}
-
-.popBox {
- position: absolute;
-}
-
-/*鍗＄墖鏍峰紡start*/
-.apple-card {
- width: 190px;
- height: 254px;
- margin: 0 auto;
- background-color: #011522;
- border-radius: 8px;
- z-index: 1;
- animation: fadeInOut 0.5s 1;
-}
-
-.apple-card .tools {
- display: flex;
- align-items: center;
- padding: 9px;
-}
-
-.apple-card .circle {
- padding: 0 4px;
-}
-
-.apple-card .box {
- display: inline-block;
- align-items: center;
- width: 10px;
- height: 10px;
- padding: 1px;
- border-radius: 50%;
-}
-
-.apple-card .red {
- background-color: #ff605c;
- position: relative;
-}
-
-.apple-card .red:hover {
- background-color: #ff0300;
-}
-
-.apple-card .red:hover::before {
- content: "x";
- font-size: 11px;
- color: #fff;
- width: 10px;
- height: 10px;
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- animation: fadeInOut 0.5s 1;
-}
-
-.apple-card .yellow {
- background-color: #ffbd44;
-}
-
-.apple-card .green {
- background-color: #00ca4e;
-}
-
-.apple-card .card-content {
- color: #fff;
- padding: 10px;
-}
-
-/*鍗＄墖鏍峰紡end*/
-
-/*婊戝姩鍗＄墖start*/
-.hoverCard {
- width: 150px;
- height: 224px;
- border-radius: 20px;
- background: #f5f5f5;
- position: relative;
- padding: 1.8rem;
- border: 2px solid #c3c6ce;
- transition: 0.5s ease-out;
- overflow: visible;
- margin-top: 30px;
-}
-
-.hoverCard .card-details {
- color: black;
- height: 100%;
- gap: .5em;
- display: grid;
- place-content: center;
-}
-
-.hoverCard .card-button {
- transform: translate(-50%, 125%);
- width: 60%;
- border-radius: 1rem;
- border: none;
- background-color: #008bf8;
- color: #fff;
- font-size: 1rem;
- padding: .5rem 1rem;
- position: absolute;
- left: 50%;
- bottom: 0;
- opacity: 0;
- transition: 0.3s ease-out;
-}
-
-.hoverCard .text-body {
- color: rgb(134, 134, 134);
-}
-
-/*Text*/
-.hoverCard .text-title {
- font-size: 1.5em;
- font-weight: bold;
-}
-
-/*Hover*/
-.hoverCard:hover {
- border-color: #008bf8;
- box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
-}
-
-.hoverCard:hover .card-button {
- transform: translate(-50%, 50%);
- opacity: 1;
-}
-
-/*婊戝姩鍗＄墖end*/
-
-/*妤煎眰鎺у埗start*/
-.floorSelect {
- --text: #414856;
- --radio: #7C96B2;
- --radio-checked: #4F29F0;
- --radio-size: 20px;
- --width: 150px;
- --height: 200px;
- --border-radius: 10px;
- width: var(--width);
- height: var(--height);
- border-radius: var(--border-radius);
- color: var(--text);
- position: relative;
- box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
- display: grid;
- grid-template-columns: auto var(--radio-size);
- align-items: center;
-}
-
-.floorSelect label {
- cursor: pointer;
-}
-
-.floorSelect input[type="radio"] {
- -webkit-appearance: none;
- -moz-appearance: none;
- position: relative;
- height: var(--radio-size);
- width: var(--radio-size);
- outline: none;
- margin: 0;
- cursor: pointer;
- border: 2px solid var(--radio);
- background: transparent;
- border-radius: 50%;
- display: grid;
- justify-self: end;
- justify-items: center;
- align-items: center;
- overflow: hidden;
- transition: border .5s ease;
-}
-
-.floorSelect input[type="radio"]::before,
-.floorSelect input[type="radio"]::after {
- content: "";
- display: flex;
- justify-self: center;
- border-radius: 50%;
-}
-
-.floorSelect input[type="radio"]::before {
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: 1;
- opacity: var(--opacity, 1);
-}
-
-.floorSelect input[type="radio"]::after {
- position: relative;
- width: calc(100% /2);
- height: calc(100% /2);
- background: var(--radio-checked);
- top: var(--y, 100%);
- transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);
-}
-
-.floorSelect input[type="radio"]:checked {
- --radio: var(--radio-checked);
-}
-
-.floorSelect input[type="radio"]:checked::after {
- --y: 0%;
- animation: stretch-animate .3s ease-out .17s;
-}
-
-.floorSelect input[type="radio"]:checked::before {
- --opacity: 0;
-}
-
-.floorSelect input[type="radio"]:checked~input[type="radio"]::after {
- --y: -100%;
-}
-
-.floorSelect input[type="radio"]:not(:checked)::before {
- --opacity: 1;
- transition: opacity 0s linear .5s;
-}
-
-@keyframes stretch-animate {
- 0% {
- transform: scale(1, 1);
- }
-
- 28% {
- transform: scale(1.15, 0.85);
- }
-
- 50% {
- transform: scale(0.9, 1.1);
- }
-
- 100% {
- transform: scale(1, 1);
- }
-}
-
-/*妤煎眰鎺у埗end*/
-
-/*鎼滅储start*/
-.search-input {
- line-height: 28px;
- border: 2px solid transparent;
- border-bottom-color: #777;
- padding: .2rem 0;
- outline: none;
- background-color: transparent;
- color: #0d0c22;
- transition: .3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.search-input:focus,
-.search-input:hover {
- outline: none;
- padding: .2rem 1rem;
- border-radius: 1rem;
- border-color: #7a9cc6;
-}
-
-.search-input::placeholder {
- color: #777;
-}
-
-.search-input:focus::placeholder {
- opacity: 0;
- transition: opacity .3s;
-}
-
-/*鎼滅储end*/
-
-@keyframes fadeInOut {
- 0% {
- opacity: 0;
- }
-
- 100% {
- opacity: 1;
- }
-}
-</style>
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { get, post, postBlob } from '@/utils/request.js'
+import { message, Modal } from 'ant-design-vue';
+import { logout } from '@/config.js';
+import { formatMessage } from '@/utils/localeUtils.js';
+import {
+ CompressOutlined,
+} from "@ant-design/icons-vue";
+import * as PIXI from 'pixi.js'
+
+let width = 25;
+let height = 25;
+let pixiApp;
+let pixiStageMap = new Map();
+let objectsContainer;
+let map = []
+
+const pixiView = ref(null)
+const mapFps = ref(0)
+const currentLev = ref(1)
+const levList = ref([])
+const pointContainerWidth = ref(0)
+const drawer = ref(false)
+const drawerLocData = ref(null)
+const drawerLocDetls = ref([])
+const drawerLocDetlField = ref([])
+
+const drawerOper = ref(false)
+const drawerOperLocNo = ref(null)
+const drawerOperMatnr = ref(null)
+const drawerOperMaktx = ref(null)
+
+onMounted(() => {
+ createMap();
+ init(currentLev.value);
+})
+
+watch(drawer, (newVal, oldVal) => {
+ if (!drawer.value) {
+ var rectangle = pixiStageMap.get(drawerLocData.value.locNo)
+ updateColor(rectangle, rectangle.originColor);//鎭㈠棰滆壊
+ }
+})
+
+function switchLev(lev) {
+ currentLev.value = lev;
+ init(lev);
+}
+
+function init(lev) {
+ get('/api/locMap/getData/' + lev + '/auth', {}).then(resp => {
+ let result = resp.data;
+ if (result.code == 200) {
+ let tmp = JSON.parse(result.data);
+ let tmpMap = []
+ tmp.forEach((item, index) => {
+ let data2 = []
+ item.forEach((val, idx) => {
+ val.searchStatus = false//鎼滅储鏍囪
+ val.rectangle = null;
+ data2.push(val)
+ })
+ pointContainerWidth.value = item.length * (40 + 1)
+ tmpMap.push(data2)
+ })
+
+ createMapData(tmpMap);
+ }
+ })
+
+ get('/api/locMap/getLev', {}).then(resp => {
+ let result = resp.data;
+ if (result.code == 200) {
+ let tmp = result.data;
+ levList.value = tmp;
+ }
+ })
+}
+
+function createMap() {
+ //Create a Pixi Application
+ pixiApp = new PIXI.Application({
+ width: pixiView.value.offsetWidth,
+ height: window.innerHeight * 0.75,
+ backgroundColor: 0xF5F7F9FF,
+ // resizeTo: window
+ });
+
+ //Add the canvas that Pixi automatically created for you to the HTML document
+ pixiView.value.appendChild(pixiApp.view)
+
+ // 鍒涘缓涓�涓鍣ㄦ潵绠＄悊澶ф壒閲忕殑鏄剧ず瀵硅薄
+ objectsContainer = new PIXI.Container();
+
+ pixiApp.stage.addChild(objectsContainer);
+
+ //*******************鎷栧姩鐢诲竷*******************
+ let stageOriginalPos;
+ let mouseDownPoint;
+ let touchBlank = 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.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
+ );
+
+ });
+ //*******************缂╂斁鐢诲竷*******************
+
+ //*******************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;
+ mapFps.value = parseInt(fps)
+ });
+ //*******************FPS*******************
+}
+
+function createMapData(map) {
+ objectsContainer.removeChildren();
+ map.forEach((item, index) => {
+ for (let idx = 0; idx < item.length; idx++) {
+ let val = item[idx]
+ if (val.value < 0) {
+ continue;
+ }
+ let rectangle = getContainer(val.value, idx * width, index * height, map[index][idx].locSts);
+ rectangle.on('click', (e) => {
+ openLocDrawer(index, idx, map[index][idx], { x: e.data.originalEvent.offsetX, y: e.data.originalEvent.offsetY })
+ updateColor(rectangle, 0x9900ff);
+ });
+ rectangle.locX = index;
+ rectangle.locY = idx;
+
+ pixiStageMap.set(map[index][idx].locNo, rectangle);
+ objectsContainer.addChild(rectangle);
+ }
+ })
+
+ //瑙嗚灞呬腑
+ let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
+ let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
+ pixiApp.stage.position.set(containerWidth, containerHeight);
+}
+
+function containerAppViewCenter() {
+ //瑙嗚灞呬腑
+ let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
+ let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
+ pixiApp.stage.position.set(containerWidth, containerHeight);
+}
+
+function openLocDrawer(x, y, loc, e) {
+ drawer.value = true;
+ drawerLocData.value = loc;
+
+ get('/api/locDetl/locNo/' + loc.locNo, {}).then(resp => {
+ let result = resp.data;
+ if (result.code == 200) {
+ drawerLocDetls.value = result.data;
+ }
+ })
+}
+
+function getContainer(value, x, y, locSts) {
+ let rectangle = new PIXI.Graphics();
+ if (value === 0) {
+ if (locSts === "F") {
+ rectangle.beginFill(0xff0000);
+ rectangle.originColor = 0xff0000;
+ } else if (locSts === "O") {
+ rectangle.beginFill(0x55aaff);
+ rectangle.originColor = 0x55aaff;
+ } else if (locSts === "D") {
+ rectangle.beginFill(0xc2c934);
+ rectangle.originColor = 0xc2c934;
+ } else if (locSts === "P") {
+ rectangle.beginFill(0xf1aa19);
+ rectangle.originColor = 0xf1aa19;
+ } else if (locSts === "R") {
+ rectangle.beginFill(0x618593);
+ rectangle.originColor = 0x618593;
+ } else if (locSts === "S") {
+ rectangle.beginFill(0xfa736f);
+ rectangle.originColor = 0xfa736f;
+ } else {
+ rectangle.beginFill(0x86779d);
+ rectangle.originColor = 0x86779d;
+ }
+ } else if (value === 3) {//姣嶈建閬�
+ rectangle.beginFill(0x00ff7f);
+ rectangle.originColor = 0x00ff7f;
+ rectangle.visible = false;
+ } else if (value === 4) {//绔欑偣
+ rectangle.beginFill(0xffff00);
+ rectangle.originColor = 0xffff00;
+ rectangle.visible = false;
+ } else if (value === 5) {//鍏呯數妗�
+ rectangle.beginFill(0xffaa7f);
+ rectangle.originColor = 0xffaa7f;
+ rectangle.visible = false;
+ } else if (value === 9) {//杞ㄨ抗
+ rectangle.beginFill(0xff0000);
+ rectangle.originColor = 0xff0000;
+ }
+ // rectangle.lineStyle(1, 0xffffff, 1);
+ rectangle.drawRect(0, 0, width, height);
+ rectangle.x = x;
+ rectangle.y = y;
+ // 璁剧疆鏄惁鍙互浜や簰
+ rectangle.interactive = true;
+ rectangle.endFill();
+
+ // 鍒涘缓鏂囨湰瀵硅薄
+ const style = new PIXI.TextStyle({
+ fontSize: 14 * window.devicePixelRatio,
+ fill: 'white',
+ align: 'center', // 璁剧疆鏂囨湰姘村钩灞呬腑瀵归綈
+ verticalAlign: 'middle' // 璁剧疆鏂囨湰鍨傜洿灞呬腑瀵归綈
+ });
+ const text = new PIXI.Text(locSts, style);
+ text.anchor.set(0.5); // 璁剧疆鏂囨湰閿氱偣涓轰腑蹇冪偣
+ text.position.set(rectangle.width / 2, rectangle.height / 2); // 灏嗘枃鏈綅缃缃负Graphics瀵硅薄鐨勪腑蹇冪偣
+ // 灏嗘枃鏈璞℃坊鍔犲埌Graphics瀵硅薄涓�
+ rectangle.addChild(text);
+
+ return rectangle;
+}
+
+/**
+* 鏇存柊棰滆壊
+*/
+function updateColor(rectangle, color) {
+ rectangle.clear()
+ rectangle.beginFill(color);
+ rectangle.drawRect(0, 0, width, height);
+}
+
+</script>
+
+<script>
+export default {
+ name: '搴撲綅鍦板浘'
+}
+</script>
+
+<template>
+ <div style="position: relative;overflow: hidden;">
+ <div ref="pixiView">
+
+ </div>
+
+ <!--杈撳嚭鎿嶄綔鍜孎PS-->
+ <div style="position: absolute;top: 0px;right: 10px;user-select: none;">
+ <div>FPS:{{ mapFps }}</div>
+ <a-button @click="drawerOper = true">鎿嶄綔</a-button>
+ </div>
+
+ <!--杈撳嚭鎿嶄綔鍜孎PS-->
+ <div style="position: absolute;bottom: 20px;left: 20px;user-select: none;">
+ <a-button type="dashed" @click="containerAppViewCenter">
+ <CompressOutlined />
+ </a-button>
+ </div>
+
+ <div>
+ <a-drawer v-model:open="drawer" placement="right" style="background: #f3f3f3;">
+ <div style="margin-top: 10px;">
+ <a-tag>{{ formatMessage('locMap.locNo', '搴撲綅鍙�') }}</a-tag>{{ drawerLocData.locNo }}
+ </div>
+ <div style="margin-top: 20px;">
+ <a-tag>{{ formatMessage('locMap.locSts', '搴撲綅鐘舵��') }}</a-tag>{{ drawerLocData.locSts }}.{{
+ drawerLocData.locSts$ }}
+ </div>
+ <div style="margin-top: 20px;">
+ <div v-for="(item, index) in drawerLocDetls" :key="index" style="margin-top: 20px;">
+ <a-card :title="item.matnr" :bordered="false" style="width: 300px">
+ <div>{{ formatMessage('locMap.batch', '鎵瑰彿') }}锛歿{ item.batch }}</div>
+ <div>{{ formatMessage('locMap.orderNo', '鍗曟嵁缂栧彿') }}锛歿{ item.orderNo }}</div>
+ <div>{{ formatMessage('locMap.anfme', '鏁伴噺') }}锛歿{ item.anfme }}</div>
+ <div v-for="(field, index) in item.dynamicFieldsList" :key="index">{{
+ formatMessage('locMap.' + field.key, field.desc) }}锛歿{ field.value }}</div>
+ </a-card>
+ </div>
+ </div>
+ </a-drawer>
+ </div>
+
+ <div>
+ <a-drawer v-model:open="drawerOper" placement="right">
+ <div style="margin-top: 10px;">
+ <div>
+ {{ formatMessage('locMap.locNo', '搴撲綅鍙�') }}
+ </div>
+ <div style="margin-top: 10px;">
+ <a-input v-model:value="drawerOperLocNo" :placeholder="formatMessage('locMap.locNo', '搴撲綅鍙�')" />
+ </div>
+ </div>
+ <div style="margin-top: 20px;">
+ <div>
+ {{ formatMessage('locMap.matnr', '鍟嗗搧缂栧彿') }}
+ </div>
+ <div style="margin-top: 10px;">
+ <a-input v-model:value="drawerOperMatnr" :placeholder="formatMessage('locMap.matnr', '鍟嗗搧缂栧彿')" />
+ </div>
+ </div>
+ <div style="margin-top: 20px;">
+ <div>
+ {{ formatMessage('locMap.maktx', '鍟嗗搧鍚嶇О') }}
+ </div>
+ <div style="margin-top: 10px;">
+ <a-input v-model:value="drawerOperMaktx" :placeholder="formatMessage('locMap.maktx', '鍟嗗搧鍚嶇О')" />
+ </div>
+ </div>
+ <div style="margin-top: 20px;">
+ <a-button type="primary" @click="drawerOper = true">鎼滅储</a-button>
+ </div>
+
+ <div style="margin-top: 50px;">
+ <div v-for="(lev, index) in levList" :key="index" style="margin-top: 10px;">
+ <a-button :type="currentLev == lev ? 'primary' : 'dashed'" @click="switchLev(lev)"
+ style="width: 100%;">{{ lev }}F</a-button>
+ </div>
+ </div>
+ </a-drawer>
+ </div>
+ </div>
+</template>
+
+<style>
+* {
+ margin: 0;
+ padding: 0;
+}
+
+.pointContainer {
+ display: flex;
+ justify-content: center;
+ /*margin-top: 1px;*/
+}
+
+.pointBox {
+ background: #bababa;
+ width: 40px;
+ height: 40px;
+ /*margin-right: 1px;*/
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 14px;
+ user-select: none;
+ color: #fff;
+}
+
+.pointBox:hover {
+ background: #00ff7f;
+}
+
+.pointBoxEmpty {
+ background: #c2c934;
+}
+
+.pointBoxOut {
+ background: #f1aa19;
+}
+
+.pointBoxOutYy {
+ background: #618593;
+}
+
+.pointBoxInYy {
+ background: #fa736f;
+}
+
+.pointBoxGreen {
+ background: #00ff7f;
+}
+
+.pointBoxBlue {
+ background: #55aaff;
+}
+
+.pointBoxRed {
+ background: #ff0000;
+}
+
+.pointBoxStart {
+ background: #ffaa00;
+}
+
+.pointBoxEnd {
+ background: #ff55ff;
+}
+
+.pointBoxStation {
+ background: #ffff00;
+}
+
+.chargeStation {
+ background: #ffaa7f;
+}
+
+.pointBoxDefault {
+ background: #86779d;
+}
+
+.pointBoxSelected {
+ background: #00ff7f !important;
+}
+
+.pointBoxSearch {
+ background: #9900ff;
+}
+
+.crnLine {
+ width: auto;
+ height: 2px;
+ margin: 10px 0;
+ background: #000;
+ position: relative;
+}
+
+.popBox {
+ position: absolute;
+}
+
+/*鍗＄墖鏍峰紡start*/
+.apple-card {
+ width: 190px;
+ height: 254px;
+ margin: 0 auto;
+ background-color: #011522;
+ border-radius: 8px;
+ z-index: 1;
+ animation: fadeInOut 0.5s 1;
+}
+
+.apple-card .tools {
+ display: flex;
+ align-items: center;
+ padding: 9px;
+}
+
+.apple-card .circle {
+ padding: 0 4px;
+}
+
+.apple-card .box {
+ display: inline-block;
+ align-items: center;
+ width: 10px;
+ height: 10px;
+ padding: 1px;
+ border-radius: 50%;
+}
+
+.apple-card .red {
+ background-color: #ff605c;
+ position: relative;
+}
+
+.apple-card .red:hover {
+ background-color: #ff0300;
+}
+
+.apple-card .red:hover::before {
+ content: "x";
+ font-size: 11px;
+ color: #fff;
+ width: 10px;
+ height: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ animation: fadeInOut 0.5s 1;
+}
+
+.apple-card .yellow {
+ background-color: #ffbd44;
+}
+
+.apple-card .green {
+ background-color: #00ca4e;
+}
+
+.apple-card .card-content {
+ color: #fff;
+ padding: 10px;
+}
+
+/*鍗＄墖鏍峰紡end*/
+
+/*婊戝姩鍗＄墖start*/
+.hoverCard {
+ width: 150px;
+ height: 224px;
+ border-radius: 20px;
+ background: #f5f5f5;
+ position: relative;
+ padding: 1.8rem;
+ border: 2px solid #c3c6ce;
+ transition: 0.5s ease-out;
+ overflow: visible;
+ margin-top: 30px;
+}
+
+.hoverCard .card-details {
+ color: black;
+ height: 100%;
+ gap: .5em;
+ display: grid;
+ place-content: center;
+}
+
+.hoverCard .card-button {
+ transform: translate(-50%, 125%);
+ width: 60%;
+ border-radius: 1rem;
+ border: none;
+ background-color: #008bf8;
+ color: #fff;
+ font-size: 1rem;
+ padding: .5rem 1rem;
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ opacity: 0;
+ transition: 0.3s ease-out;
+}
+
+.hoverCard .text-body {
+ color: rgb(134, 134, 134);
+}
+
+/*Text*/
+.hoverCard .text-title {
+ font-size: 1.5em;
+ font-weight: bold;
+}
+
+/*Hover*/
+.hoverCard:hover {
+ border-color: #008bf8;
+ box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
+}
+
+.hoverCard:hover .card-button {
+ transform: translate(-50%, 50%);
+ opacity: 1;
+}
+
+/*婊戝姩鍗＄墖end*/
+
+/*妤煎眰鎺у埗start*/
+.floorSelect {
+ --text: #414856;
+ --radio: #7C96B2;
+ --radio-checked: #4F29F0;
+ --radio-size: 20px;
+ --width: 150px;
+ --height: 200px;
+ --border-radius: 10px;
+ width: var(--width);
+ height: var(--height);
+ border-radius: var(--border-radius);
+ color: var(--text);
+ position: relative;
+ box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
+ display: grid;
+ grid-template-columns: auto var(--radio-size);
+ align-items: center;
+}
+
+.floorSelect label {
+ cursor: pointer;
+}
+
+.floorSelect input[type="radio"] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ position: relative;
+ height: var(--radio-size);
+ width: var(--radio-size);
+ outline: none;
+ margin: 0;
+ cursor: pointer;
+ border: 2px solid var(--radio);
+ background: transparent;
+ border-radius: 50%;
+ display: grid;
+ justify-self: end;
+ justify-items: center;
+ align-items: center;
+ overflow: hidden;
+ transition: border .5s ease;
+}
+
+.floorSelect input[type="radio"]::before,
+.floorSelect input[type="radio"]::after {
+ content: "";
+ display: flex;
+ justify-self: center;
+ border-radius: 50%;
+}
+
+.floorSelect input[type="radio"]::before {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ opacity: var(--opacity, 1);
+}
+
+.floorSelect input[type="radio"]::after {
+ position: relative;
+ width: calc(100% /2);
+ height: calc(100% /2);
+ background: var(--radio-checked);
+ top: var(--y, 100%);
+ transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);
+}
+
+.floorSelect input[type="radio"]:checked {
+ --radio: var(--radio-checked);
+}
+
+.floorSelect input[type="radio"]:checked::after {
+ --y: 0%;
+ animation: stretch-animate .3s ease-out .17s;
+}
+
+.floorSelect input[type="radio"]:checked::before {
+ --opacity: 0;
+}
+
+.floorSelect input[type="radio"]:checked~input[type="radio"]::after {
+ --y: -100%;
+}
+
+.floorSelect input[type="radio"]:not(:checked)::before {
+ --opacity: 1;
+ transition: opacity 0s linear .5s;
+}
+
+@keyframes stretch-animate {
+ 0% {
+ transform: scale(1, 1);
+ }
+
+ 28% {
+ transform: scale(1.15, 0.85);
+ }
+
+ 50% {
+ transform: scale(0.9, 1.1);
+ }
+
+ 100% {
+ transform: scale(1, 1);
+ }
+}
+
+/*妤煎眰鎺у埗end*/
+
+/*鎼滅储start*/
+.search-input {
+ line-height: 28px;
+ border: 2px solid transparent;
+ border-bottom-color: #777;
+ padding: .2rem 0;
+ outline: none;
+ background-color: transparent;
+ color: #0d0c22;
+ transition: .3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.search-input:focus,
+.search-input:hover {
+ outline: none;
+ padding: .2rem 1rem;
+ border-radius: 1rem;
+ border-color: #7a9cc6;
+}
+
+.search-input::placeholder {
+ color: #777;
+}
+
+.search-input:focus::placeholder {
+ opacity: 0;
+ transition: opacity .3s;
+}
+
+/*鎼滅储end*/
+
+@keyframes fadeInOut {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+</style>
--
Gitblit v1.9.1