From 529994e6504fea3e06153df9c0a76ac609e39aef Mon Sep 17 00:00:00 2001
From: zjj <3272660260@qq.com>
Date: 星期二, 26 十二月 2023 10:05:43 +0800
Subject: [PATCH] #地图
---
src/main/webapp/views/home/map.html | 598 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 349 insertions(+), 249 deletions(-)
diff --git a/src/main/webapp/views/home/map.html b/src/main/webapp/views/home/map.html
index 4293e01..425c1f5 100644
--- a/src/main/webapp/views/home/map.html
+++ b/src/main/webapp/views/home/map.html
@@ -13,7 +13,13 @@
<script type="text/javascript" src="../../static/js/common.js"></script>
<script type="text/javascript" src="../../static/js/vue.min.js"></script>
<script type="text/javascript" src="../../static/js/element.js"></script>
+ <script src="../../static/js/pixi.min.js"></script>
<style>
+ *{
+ margin: 0;
+ padding: 0;
+ }
+
.pointContainer {
display: flex;
justify-content: center;
@@ -380,225 +386,144 @@
</style>
</head>
<body>
-<div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: wrap;" @click="bgClick()">
- <div style="flex: 3;overflow:auto;display: flex;justify-content: center;" :style="{zoom:showScale/100.0,marginTop:(showScale)*2 + 'px'}">
- <div style="margin-top: 10px; overflow: auto;">
- <div class="pointContainer" v-for="(x,index) in map" :key="index">
- <div v-if="index != 0 && (index != map.length-1)" v-for="(y,idx) in x" :key="idx">
- <div v-if="idx != 0 && (idx != map[index].length-1)">
- <div v-if="map[index][idx].value < 0" style="visibility: hidden;" class="pointBox"></div>
+<div id="app">
+ <div id="pixiView">
- <!--搴撲綅-->
- <div v-else-if="map[index][idx].value == 0" @contextmenu.prevent="rightEvent(index,idx,$event)">
- <div v-if="map[index][idx].locSts == 'O'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxBlue">{{ map[index][idx].locSts }}</div>
- <div v-else-if="map[index][idx].locSts == 'F'" @click.left="selectLoc(index,idx)" :class="{'pointBoxSelected':map[index][idx].locOutSelected,'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxRed">{{ map[index][idx].locSts }}</div>
- <div v-else-if="map[index][idx].locSts == 'D'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxEmpty">{{ map[index][idx].locSts }}</div>
- <div v-else-if="map[index][idx].locSts == 'P'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxOut">{{ map[index][idx].locSts }}</div>
- <div v-else-if="map[index][idx].locSts == 'R'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxOutYy">{{ map[index][idx].locSts }}</div>
- <div v-else-if="map[index][idx].locSts == 'S'" class="pointBox pointBoxInYy">{{ map[index][idx].locSts }}</div>
- <div v-else class="pointBox pointBoxDefault" :class="{'pointBoxSearch':map[index][idx].searchStatus}">{{ map[index][idx].locSts }}</div>
- </div>
-
- <!--鍫嗗灈鏈�-->
- <div v-else-if="map[index][idx].value == 3">
- <div v-if="idx == 1" class="crnLine" style="width: 100vh">
- </div>
- </div>
-
- <!--绔欑偣-->
- <div v-else-if="map[index][idx].value == 4" class="pointBox pointBoxStation" style="visibility: hidden;"></div>
- <div v-else-if="map[index][idx].value == 5" class="pointBox chargeStation"
- @contextmenu.prevent="rightEvent(index,idx,$event)"></div>
- <div v-else-if="map[index][idx].value == 9" class="pointBox pointBoxRed"
- @contextmenu.prevent="rightEvent(index,idx,$event)"></div>
-
- </div>
- </div>
-
- <div style="width: 40px;display: flex;justify-content: center;align-items: center;">
- {{ getRealRowByX(index) }}
- </div>
-
- </div>
- </div>
-
- <div>
- <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 1" :style="{background: currentLev==1?'red':''}">1F</button></div>
- <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 2" :style="{background: currentLev==2?'red':''}">2F</button></div>
- <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 3" :style="{background: currentLev==3?'red':''}">3F</button></div>
- <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 4" :style="{background: currentLev==4?'red':''}">4F</button></div>
- <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 5" :style="{background: currentLev==5?'red':''}">5F</button></div>
- <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 6" :style="{background: currentLev==6?'red':''}">6F</button></div>
- <div style="margin-top: 20px;"><button class="layui-btn" @click="currentLev = 7" :style="{background: currentLev==7?'red':''}">7F</button></div>
- </div>
</div>
- <div style="padding: 40px 20px 10px 10px;" :style="window.innerWidth < 2100 ? 'flex: 1;margin-top: 0px;' : 'flex: 1;margin-top: -10px;'">
- <el-slider v-model="showScale" :marks="showScaleMarks"></el-slider>
- <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
- <div class="hoverCard" style="width: 100%;">
- <div class="card-details" style="place-content: normal;height: auto;">
- <div class="text-body" style="display: flex;flex-wrap: wrap;">
- <div style="width: 100%;margin-bottom: 20px;">
- <div style="display: flex;justify-content: space-between;">
- <div><input v-model="searchMatnr" placeholder="鐗╂枡鍙�" type="text" class="search-input"></div>
- <div><input v-model="searchOrderNo" placeholder="璁㈠崟鍙�" type="text" class="search-input"></div>
+
+ <!--杈撳嚭鎿嶄綔鍜孎PS-->
+ <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 style="padding: 40px 20px 10px 10px;" :style="window.innerWidth < 2100 ? 'margin-top: 0px;' : 'flex: 5;margin-top: -70px;'">
+ <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
+ <div class="hoverCard" style="width: 100%;">
+ <div class="card-details" style="place-content: normal;height: auto;">
+ <div class="text-body" style="display: flex;flex-wrap: wrap;">
+ <div style="width: 100%;margin-bottom: 20px;">
+ <div style="display: flex;justify-content: space-between;">
+ <div><input v-model="searchMatnr" placeholder="鐗╂枡鍙�" type="text" class="search-input"></div>
+ <div><input v-model="searchOrderNo" placeholder="璁㈠崟鍙�" type="text" class="search-input"></div>
+ </div>
+ <div style="display: flex;justify-content: space-between;margin-top: 10px;">
+ <div><input style="width: 110px;" v-model="searchMaktx" placeholder="鐗╂枡鍚嶇О" type="text" class="search-input"></div>
+ <div><input style="width: 110px;" v-model="searchSpecs" placeholder="瑙勬牸" type="text" class="search-input"></div>
+ <div><input style="width: 110px;" v-model="searchLocNo" placeholder="搴撲綅鍙�" type="text" class="search-input"></div>
+ </div>
+ <button style="width: 100%;margin-top: 10px;" @click="searchLoc" class="layui-btn layui-btn-sm">鎼滅储</button>
</div>
- <div style="display: flex;justify-content: space-between;margin-top: 10px;">
- <div><input style="width: 110px;" v-model="searchMaktx" placeholder="鐗╂枡鍚嶇О" type="text" class="search-input"></div>
- <div><input style="width: 110px;" v-model="searchSpecs" placeholder="瑙勬牸" type="text" class="search-input"></div>
- <div><input style="width: 110px;" v-model="searchLocNo" placeholder="搴撲綅鍙�" type="text" class="search-input"></div>
- </div>
- <button style="width: 100%;margin-top: 10px;" @click="searchLoc" class="layui-btn layui-btn-sm">鎼滅储</button>
- </div>
- <!-- <div>-->
- <!-- <button @click="locToLoc2" class="layui-btn layui-btn-sm">渚ц竟绉诲簱</button>-->
- <!-- </div>-->
- <div>
- <button @click="init" class="layui-btn layui-btn-sm">鍒锋柊</button>
- </div>
- <div style="margin-left: 10px;">
- <button @click="resetSearch" class="layui-btn layui-btn-sm">閲嶇疆</button>
- </div>
- <div v-if="!locOutStatus" style="margin-left: 10px;">
- <button @click="locOutStatus = true" class="layui-btn layui-btn-sm">鍑哄簱閫夋嫨</button>
- </div>
- <div v-else style="margin-left: 10px;border: 1px red solid;display: flex;">
+ <!-- <div>-->
+ <!-- <button @click="locToLoc2" class="layui-btn layui-btn-sm">渚ц竟绉诲簱</button>-->
+ <!-- </div>-->
<div>
- <button @click="cancelSelectLoc" class="layui-btn layui-btn-sm">鍙栨秷閫夋嫨</button>
+ <button @click="init" class="layui-btn layui-btn-sm">鍒锋柊</button>
</div>
- <div style="display: flex;justify-content: center;align-items: center;">
- <select v-model="outSite">
- <option v-for="(item,index) in outSites" :key="index" :value="item.siteId">{{ item.desc }}</option>
- </select>
+ <div style="margin-left: 10px;">
+ <button @click="resetSearch" class="layui-btn layui-btn-sm">閲嶇疆</button>
</div>
- <div>
- <button @click="locOut" class="layui-btn layui-btn-sm">鍑哄簱</button>
+ <div v-if="!locOutStatus" style="margin-left: 10px;">
+ <button @click="locOutStatus = true" class="layui-btn layui-btn-sm">鍑哄簱閫夋嫨</button>
+ </div>
+ <div v-else style="margin-left: 10px;border: 1px red solid;display: flex;">
+ <div>
+ <button @click="cancelSelectLoc" class="layui-btn layui-btn-sm">鍙栨秷閫夋嫨</button>
+ </div>
+ <div style="display: flex;justify-content: center;align-items: center;">
+ <select v-model="outSite">
+ <option v-for="(item,index) in outSites" :key="index" :value="item.siteId">{{ item.desc }}</option>
+ </select>
+ </div>
+ <div>
+ <button @click="locOut" class="layui-btn layui-btn-sm">鍑哄簱</button>
+ </div>
</div>
</div>
</div>
+ <button class="card-button">鍔熻兘鍖�</button>
</div>
- <button class="card-button">鍔熻兘鍖�</button>
- </div>
- <div class="hoverCard">
- <div class="card-details">
- <div class="text-body" style="display: flex;justify-content: space-around;flex-wrap: wrap;">
- <div style="flex: 1;margin-top: 10px;">
- <div style="font-size: 10px;">绌哄簱浣�</div><div class="pointBox pointBoxBlue">O</div>
- </div>
- <div style="flex: 1;margin-top: 10px;">
- <div style="font-size: 10px;">鍦ㄥ簱</div><div class="pointBox pointBoxRed">F</div>
- </div>
- <div style="flex: 1;margin-top: 10px;">
- <div style="font-size: 10px;">绌烘澘</div><div class="pointBox pointBoxEmpty">D</div>
- </div>
- <div style="flex: 1;margin-top: 10px;">
- <div style="font-size: 10px;">鍑哄簱涓�</div><div class="pointBox pointBoxOut">P</div>
- </div>
- <div style="flex: 1;margin-top: 10px;">
- <div style="font-size: 10px;">鍑哄簱棰勭害</div><div class="pointBox pointBoxOutYy">R</div>
- </div>
- <div style="flex: 1;margin-top: 10px;">
- <div style="font-size: 10px;">鍏ュ簱棰勭害</div><div class="pointBox pointBoxInYy">S</div>
- </div>
- <div style="flex: 1;margin-top: 10px;">
- <div style="font-size: 10px;">鎼滅储缁撴灉</div><div class="pointBox pointBoxSearch"></div>
- </div>
- <div style="flex: 1;margin-top: 10px;">
- <div style="font-size: 10px;">閫夋嫨缁撴灉</div><div class="pointBox pointBoxSelected"></div>
- </div>
- <div style="flex: 1;margin-top: 10px;">
- <div style="font-size: 10px;">鍏朵粬</div><div class="pointBox pointBoxDefault">鍏朵粬</div>
+ <div class="hoverCard">
+ <div class="card-details">
+ <div class="text-body" style="display: flex;justify-content: space-around;flex-wrap: wrap;">
+ <div style="flex: 1;margin-top: 10px;">
+ <div style="font-size: 10px;">绌哄簱浣�</div><div class="pointBox pointBoxBlue">O</div>
+ </div>
+ <div style="flex: 1;margin-top: 10px;">
+ <div style="font-size: 10px;">鍦ㄥ簱</div><div class="pointBox pointBoxRed">F</div>
+ </div>
+ <div style="flex: 1;margin-top: 10px;">
+ <div style="font-size: 10px;">绌烘澘</div><div class="pointBox pointBoxEmpty">D</div>
+ </div>
+ <div style="flex: 1;margin-top: 10px;">
+ <div style="font-size: 10px;">鍑哄簱涓�</div><div class="pointBox pointBoxOut">P</div>
+ </div>
+ <div style="flex: 1;margin-top: 10px;">
+ <div style="font-size: 10px;">鍑哄簱棰勭害</div><div class="pointBox pointBoxOutYy">R</div>
+ </div>
+ <div style="flex: 1;margin-top: 10px;">
+ <div style="font-size: 10px;">鍏ュ簱棰勭害</div><div class="pointBox pointBoxInYy">S</div>
+ </div>
+ <div style="flex: 1;margin-top: 10px;">
+ <div style="font-size: 10px;">鎼滅储缁撴灉</div><div class="pointBox pointBoxSearch"></div>
+ </div>
+ <div style="flex: 1;margin-top: 10px;">
+ <div style="font-size: 10px;">閫夋嫨缁撴灉</div><div class="pointBox pointBoxSelected"></div>
+ </div>
+ <div style="flex: 1;margin-top: 10px;">
+ <div style="font-size: 10px;">鍏朵粬</div><div class="pointBox pointBoxDefault">鍏朵粬</div>
+ </div>
</div>
</div>
+ <button class="card-button">搴撲綅鐘舵��</button>
</div>
- <button class="card-button">搴撲綅鐘舵��</button>
- </div>
- <!-- <div class="hoverCard">-->
- <!-- <div class="card-details">-->
- <!-- <p class="text-title" style="text-align: center;">妤煎眰 {{currentLev}}F</p>-->
- <!-- <div class="text-body" style="display: flex;">-->
- <!-- <div class="floorSelect">-->
- <!-- <label for="01">1F</label>-->
- <!-- <input id="01" type="radio" name="r" v-model="currentLev" value="1" checked="">-->
- <!-- <label for="02">2F</label>-->
- <!-- <input id="02" type="radio" v-model="currentLev" name="r" value="2">-->
- <!-- <label for="03">3F</label>-->
- <!-- <input id="03" type="radio" v-model="currentLev" name="r" value="3">-->
- <!-- <label for="04">4F</label>-->
- <!-- <input id="04" type="radio" v-model="currentLev" name="r" value="4">-->
- <!-- </div>-->
- <!-- </div>-->
- <!-- </div>-->
- <!-- <button class="card-button">妤煎眰 {{currentLev}}F</button>-->
- <!-- </div>-->
-
- </div>
- </div>
-
- <div v-if="rightBox" @click.stop="" :style="{left: rightBoxLeft,top: rightBoxTop}" class="popBox">
- <div class="apple-card">
- <div class="tools">
- <div class="circle" @click.stop="rightBox = false">
- <span class="red box"></span>
- </div>
- <div class="circle">
- <span class="yellow box"></span>
- </div>
- <div class="circle">
- <span class="green box"></span>
- </div>
- </div>
- <div class="card-content">
- <div>
- 搴撲綅鍙�: {{ map[mapI][mapJ].locNo }}
- </div>
- <div style="margin-top: 10px;">
- 搴撲綅鐘舵��: {{ getLocSts(map[mapI][mapJ].locSts) }}
- </div>
- <div style="margin-top: 10px;display: flex;justify-content: space-between;flex-wrap: wrap;">
- <div style="margin-top: 5px;">
- <button class="layui-btn layui-btn-sm" @click="openLocDetail(map[mapI][mapJ].locNo)">搴撲綅璇︽儏</button>
+ <div class="hoverCard">
+ <div class="card-details">
+ <p class="text-title" style="text-align: center;">妤煎眰 {{currentLev}}F</p>
+ <div class="text-body" style="display: flex;justify-content:space-between;flex-wrap: wrap;">
+ <div v-for="(lev,idx) in floorList">
+ <el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="currentLev = lev">{{lev}}F</el-button>
+ </div>
+ </div>
</div>
- <!-- <div style="margin-top: 5px;">-->
- <!-- <button v-if="map[mapI][mapJ].locSts == 'F'" class="layui-btn layui-btn-sm" @click="locMove(map[mapI][mapJ].locNo)">搴撲綅绉昏浆</button>-->
- <!-- <button v-else-if="map[mapI][mapJ].locSts == 'D'" class="layui-btn layui-btn-sm" @click="locMove(map[mapI][mapJ].locNo)">搴撲綅绉昏浆</button>-->
- <!-- <button v-else class="layui-btn layui-btn-sm layui-btn-disabled" disabled>搴撲綅绉昏浆</button>-->
- <!-- </div>-->
+ <button class="card-button">妤煎眰 {{currentLev}}F</button>
</div>
- </div>
- </div>
- </div>
- <div v-if="crnBox" @click.stop="" :style="{left: crnBoxLeft,top: crnBoxTop}" class="popBox">
- <div class="apple-card">
- <div class="tools">
- <div class="circle" @click.stop="crnBox = false">
- <span class="red box"></span>
- </div>
- <div class="circle">
- <span class="yellow box"></span>
- </div>
- <div class="circle">
- <span class="green box"></span>
- </div>
- </div>
- <div class="card-content">
- <div>鍫嗗灈鏈哄彿锛歿{crnList[crnBox - 1].crnNo}}</div>
- <div>宸ヤ綔鍙凤細{{crnList[crnBox - 1].wrkNo}}</div>
- <div>婧愬簱浣嶏細{{crnList[crnBox - 1].frmLocno}}</div>
- <div>鐩爣搴撲綅锛歿{crnList[crnBox - 1].toLocno}}</div>
- <div>鍙叆锛歿{crnList[crnBox - 1].inEnable}}</div>
- <div>鍙嚭锛歿{crnList[crnBox - 1].outEnable}}</div>
- <div>鐘舵�侊細{{crnList[crnBox - 1].crnSts$}}</div>
- <div>寮傚父锛歿{crnList[crnBox - 1].crnErr$}}</div>
</div>
</div>
- </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.locNo}}</div>
+ <div style="margin-top: 5px;">搴撲綅鐘舵�侊細{{drawerLocNoData.locSts}}</div>
+ <div style="margin-top: 5px;">
+ <button class="layui-btn layui-btn-sm" @click="openLocDetail(drawerLocNoData.locNo)">搴撲綅璇︽儏</button>
+ </div>
+ </div>
+ </div>
+ </el-drawer>
</div>
<script>
+ let width = 25;
+ let height = 25;
+ let pixiApp;
+ let pixiStageMap = new Map();
var $layui = layui.config({
base: baseUrl + "/static/layui/lay/modules/"
@@ -608,15 +533,10 @@
el: '#app',
data: {
map: [],
- mapData: "",
+ mapData: [],
importData: null,
startPosition: "0500501",
endPosition: "0802501",
- mapI: 0,
- mapJ: 0,
- rightBox: false,
- rightBoxTop: "0px",
- rightBoxLeft: "0px",
pointContainerWidth: 0,
currentLev: 1,
crnList: null,
@@ -632,29 +552,25 @@
searchLocNo: "",
outSite: null,
outSites: null,
- showScale: 45, //鎺у埗鍦板浘鏄剧ず澶у皬姣斾緥
- showScaleMarks: {//姣斾緥婊戝姩鏉℃樉绀烘爣璁�
- 0: "0%",
- 50: {
- style: {
- color: '#1989FA'
- },
- label: "50%"
- },
- 100: "100%",
- },
locStsList: [],//搴撲綅鐘舵�佸垪琛�
+ drawer: false,
+ drawerLocNo: false,
+ drawerLocNoData: null,
+ drawerLocDetls: [],
+ mapFps: 0,
+ floorList: [1, 2, 3, 4, 5, 6, 7], //褰撳墠椤圭洰妤煎眰
},
created(){
this.init()
-
- // this.getOutSite()
+ },
+ mounted() {
+ this.createMap()
},
watch: {
map: {
deep: true,
handler(val) {
- this.printData()
+
}
},
currentLev: {
@@ -667,6 +583,15 @@
|| this.searchMaktx != ""
|| this.searchLocNo != "") {
this.searchLoc()
+ }
+ }
+ },
+ drawerLocNo: {
+ deep: true,
+ handler(val) {
+ if (!val) {
+ var rectangle = pixiStageMap.get(this.drawerLocNoData.locNo)
+ updateColor(rectangle, rectangle.originColor);//鎭㈠棰滆壊
}
}
}
@@ -695,9 +620,10 @@
this.searchMaktx = ""
this.searchLocNo = ""
this.searchLoc()
- },
- printData() {
- this.mapData = JSON.stringify(this.map)
+
+ pixiApp.stage.children.forEach((item, index) => {
+ updateColor(item, item.originColor);
+ });
},
importDataClick(mapData) {
let tmp = JSON.parse(mapData);
@@ -706,13 +632,133 @@
let data2 = []
item.forEach((val, idx) => {
val.searchStatus = false//鎼滅储鏍囪
+ val.rectangle = null;
data2.push(val)
})
this.pointContainerWidth = item.length * (40+1)
data.push(data2)
})
this.map = data
- this.printData()
+ this.createMapData()
+ },
+ 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)
+
+ //*******************鎷栧姩鐢诲竷*******************
+ 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;
+ this.mapFps = parseInt(fps)
+ });
+ //*******************FPS*******************
+ },
+ createMapData() {
+ let that = this
+ pixiApp.stage.removeChildren();
+ this.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, this.map[index][idx].locSts);
+ rectangle.on('click', (e) => {
+ this.rightEvent(index,idx,{x:e.data.originalEvent.offsetX, y: e.data.originalEvent.offsetY})
+ updateColor(rectangle, 0x9900ff);
+ });
+ rectangle.locX = index;
+ rectangle.locY = idx;
+
+ pixiStageMap.set(this.map[index][idx].locNo, rectangle);
+ pixiApp.stage.addChild(rectangle);
+ }
+ })
},
getRealRowByX(x) {
//鑾峰彇鐪熷疄搴撲綅琛屽彿锛岄�氳繃鍧愭爣x
@@ -728,15 +774,12 @@
return "";
},
rightEvent(x, y, e) {
- this.rightBox = true
- this.mapI = x
- this.mapJ = y
- this.rightBoxTop = e.y + "px"
- this.rightBoxLeft = e.x + "px"
- },
- bgClick() {
- this.rightBox = false
- this.crnBox = false
+ this.drawerLocNo = true
+ let data = {
+ locNo: this.map[x][y].locNo,
+ locSts: this.getLocSts(this.map[x][y].locSts)
+ }
+ this.drawerLocNoData = data
},
openLocDetail(locNo) {
$layui.layer.open({
@@ -823,7 +866,6 @@
tmp[item.crnNo - 1] = item;
})
- console.log(tmp)
that.crnList = tmp;
} else if (res.code === 403) {
top.location.href = baseUrl + "/";
@@ -1012,7 +1054,6 @@
// $layui.layer.msg("璇疯緭鍏ョ墿鏂欑紪鍙锋垨璁㈠崟鍙�");
// return;
// }
-
let that = this;
$.ajax({
url: baseUrl + "/map/searchData/auth",
@@ -1031,35 +1072,21 @@
if (res.code === 200) {
let tmp = that.map
let data = res.data
- tmp.forEach((item,index) => {//娓呯┖涔嬪墠鐨勬悳绱㈢粨鏋�
- item.forEach((val,idx) => {
- if (tmp[index][idx].searchStatus != undefined) {
- tmp[index][idx].searchStatus = false;//鎼滅储鏍囪
- }
-
- })
- })
tmp.forEach((item,index) => {//娓呯┖涔嬪墠鐨勬悳绱㈢粨鏋�
item.forEach((val,idx) => {
if (tmp[index][idx].searchStatus != undefined) {
- tmp[index][idx].searchStatus = false;//鎼滅储鏍囪
+ var rectangle = pixiStageMap.get(tmp[index][idx].locNo)
+ updateColor(rectangle, rectangle.originColor);
}
-
})
})
data.forEach((item,i) => {
let locNo = item.locNo
- tmp.forEach((item,index) => {
- item.forEach((val,idx) => {
- if (tmp[index][idx].locNo == locNo) {
- tmp[index][idx].searchStatus = true//鎼滅储鏍囪
- }
- })
- })
+ var rectangle = pixiStageMap.get(locNo)
+ updateColor(rectangle, 0x9900ff);
})
- that.map = tmp
$layui.layer.msg("鎼滅储鎴愬姛");
} else if (res.code === 403) {
top.location.href = baseUrl + "/";
@@ -1092,6 +1119,79 @@
}
})
+ 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>
</body>
</html>
\ No newline at end of file
--
Gitblit v1.9.1