From 86c69620f1bb3976f01b726d3d1804527474898f Mon Sep 17 00:00:00 2001
From: zjj <3272660260@qq.com>
Date: 星期一, 24 三月 2025 09:34:01 +0800
Subject: [PATCH] #
---
src/main/webapp/views/home/map.html | 875 ++++++++++++++++++++++++----------------------------------
1 files changed, 362 insertions(+), 513 deletions(-)
diff --git a/src/main/webapp/views/home/map.html b/src/main/webapp/views/home/map.html
index cd9ec96..425c1f5 100644
--- a/src/main/webapp/views/home/map.html
+++ b/src/main/webapp/views/home/map.html
@@ -13,52 +13,38 @@
<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>
- .pointContainer {
- display: flex;
- justify-content: flex-start;
- margin-top: 1px;
+ *{
+ margin: 0;
+ padding: 0;
}
- /*.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;*/
- /*}*/
+ .pointContainer {
+ display: flex;
+ justify-content: center;
+ /*margin-top: 1px;*/
+ }
.pointBox {
- background: #fffef9;
- width: 35px;
- height: 35px;
- margin-right: 1px;
+ 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;
- /*transform: perspective(130px) rotateX(30deg) translateZ(-20px);*/
- box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
- /*border-radius: 50% 20% / 10% 40%;*/
}
.pointBox:hover{
- /*background: #20a162;*/
- /*background: #55bb8a;*/
- background: #945833;
- /*background: #20894d;*/
+ background: #00ff7f;
}
.pointBoxEmpty {
- /*background: #12a182;*/
- background: #57c3c2;
+ background: #c2c934;
}
.pointBoxOut {
@@ -70,19 +56,19 @@
}
.pointBoxInYy {
- background: #e2c027;
+ background: #fa736f;
}
.pointBoxGreen {
- background: #945833;
+ background: #00ff7f;
}
.pointBoxBlue {
- background: #89BCEF;
+ background: #55aaff;
}
.pointBoxRed {
- background: #ee4866;
+ background: #ff0000;
}
.pointBoxStart {
@@ -102,16 +88,15 @@
}
.pointBoxDefault {
- background: #ffffff;
+ background: #86779d;
}
.pointBoxSelected {
- /*background: #945833 !important;*/
- background: #20894d !important;
+ background: #00ff7f !important;
}
.pointBoxSearch {
- background: #8076a3;
+ background: #9900ff;
}
.crnLine{
@@ -121,29 +106,6 @@
background: #000;
position: relative;
}
-
- /*.crnBox{*/
- /* width: 120px;*/
- /* height: 40px;*/
- /* background: url("../../static/image/Crane_manual.png") no-repeat;*/
- /* position: absolute;*/
- /* top: -25px;*/
- /* left: -120px;*/
- /* transition:left 2s;*/
- /* cursor: pointer;*/
- /*}*/
-
- /*.carBox{*/
- /* width: 40px;*/
- /* height: 40px;*/
- /* background: url("../../static/image/ste/car.png") no-repeat;*/
- /* background-size: 100% 100%;*/
- /* position: absolute;*/
- /* top: 0;*/
- /* left: 0;*/
- /* transition:left 2s;*/
- /* cursor: pointer;*/
- /*}*/
.popBox {
position: absolute;
@@ -217,7 +179,7 @@
/*婊戝姩鍗＄墖start*/
.hoverCard {
- width: 152px;
+ width: 150px;
height: 224px;
border-radius: 20px;
background: #f5f5f5;
@@ -424,251 +386,144 @@
</style>
</head>
<body>
-<div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: nowrap; " @click="bgClick()">
- <div style="flex: 3;overflow: auto; " :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}">
- <div style="width: 100%;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" 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.stop="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="{'pointBoxSearch':map[index][idx].searchStatus}" 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:pointContainerWidth + 'px'}">
-<!-- <div v-if="index == 2" @contextmenu.prevent="clickCrnBox($event,1)" :style="{left:crnList[0].left + 'px'}" class="crnBox" id="crnBox1"></div>-->
-<!-- <div v-else @contextmenu.prevent="clickCrnBox($event,2)" :style="{left:crnList[1].left + 'px'}" class="crnBox" id="crnBox2"></div>-->
- </div>
- </div>
-
- <div v-else-if="map[index][idx].value == 4" class="pointBox pointBoxStation"
- @contextmenu.prevent="rightEvent(index,idx,$event)"></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 v-else-if="map[index][idx].value == 10" class="pointBox pointBoxRed" style="visibility: hidden"
- @contextmenu.prevent="rightEvent(index,idx,$event)">
- <!--绌挎杞﹁建閬�-->
- </div>
-
- </div>
- </div>
-
- <div style="width: 40px; display: flex;justify-content: flex-end;align-items: center;">
- {{ getRealRowByX(index) }}
- </div>
-
- </div>
- </div>
</div>
- <div style="padding: 20px;flex: 1;margin-top: -70px;">
- <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 style="margin-left: 20px"><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="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 style="margin-left: 10px;">
- <button @click="locToLoc2" 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">
- <p class="text-title" style="text-align: center;">搴撲綅灞� {{currentLev}}</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">
- <label for="05">5F</label>
- <input id="05" type="radio" v-model="currentLev" name="r" value="5">
- <label for="06">6F</label>
- <input id="06" type="radio" v-model="currentLev" name="r" value="6">
- <label for="07">7F</label>
- <input id="07" type="radio" v-model="currentLev" name="r" value="7">
+ <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">妤煎眰 {{currentLev}}F</button>
- </div>
- <div class="hoverCard">
- <div class="card-details">
- <p class="text-title" style="text-align: center;">搴撳尯 {{areaName}}</p>
- <div class="text-body" style="display: flex;">
- <div class="floorSelect">
- <label for="area01">A鍖�</label>
- <input id="area01" type="radio" name="r" v-model="area" value="1" checked="">
- <label for="area03">B鍖�</label>
- <input id="area03" type="radio" v-model="area" name="r" value="3">
- <label for="area04">C鍖�</label>
- <input id="area04" type="radio" v-model="area" name="r" value="4">
- <label for="area05">D鍖�</label>
- <input id="area05" type="radio" v-model="area" name="r" value="5">
- <label for="area06">E鍖�</label>
- <input id="area06" type="radio" v-model="area" name="r" value="6">
-
+ <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>
+ <button class="card-button">妤煎眰 {{currentLev}}F</button>
</div>
- <button class="card-button">搴撳尯 {{areaName}}</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;text-align: center">鍏朵粬</div><div class="pointBox pointBoxDefault"></div>
- </div>
- </div>
- </div>
- <button class="card-button">搴撲綅鐘舵��</button>
</div>
-
</div>
- </div>
+ </el-drawer>
- <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>
- <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>
+ <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>
- </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>
</div>
<script>
+ let width = 25;
+ let height = 25;
+ let pixiApp;
+ let pixiStageMap = new Map();
var $layui = layui.config({
base: baseUrl + "/static/layui/lay/modules/"
@@ -678,19 +533,12 @@
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,
- area:6,
- areaName:"绔嬪簱",
crnList: null,
crnBox: false,
crnBoxTop: "0px",
@@ -704,35 +552,25 @@
searchLocNo: "",
outSite: null,
outSites: null,
- showScale: 85, //鎺у埗鍦板浘鏄剧ず澶у皬姣斾緥
- showScaleMarks: {//姣斾緥婊戝姩鏉℃樉绀烘爣璁�
- 0: "0%",
- 50: {
- style: {
- color: '#1989FA'
- },
- label: "50%"
- },
- 100: "100%",
- },
locStsList: [],//搴撲綅鐘舵�佸垪琛�
- y: 1
+ drawer: false,
+ drawerLocNo: false,
+ drawerLocNoData: null,
+ drawerLocDetls: [],
+ mapFps: 0,
+ floorList: [1, 2, 3, 4, 5, 6, 7], //褰撳墠椤圭洰妤煎眰
},
created(){
this.init()
-
- this.getOutSite()
-
- // setInterval((that) => {
- // //瀹氭椂鑾峰彇鍫嗗灈鏈烘暟鎹�
- // that.getCrnData()
- // },1000,this)
+ },
+ mounted() {
+ this.createMap()
},
watch: {
map: {
deep: true,
handler(val) {
- this.printData()
+
}
},
currentLev: {
@@ -748,33 +586,12 @@
}
}
},
- area: {
+ drawerLocNo: {
deep: true,
handler(val) {
- if (val == 1){
- this.areaName = "A鍖�"
-
- }else if (val == 3){
- this.areaName = "B鍖�"
- }
- else if (val == 4){
- this.areaName = "C鍖�"
- }
- else if (val == 5){
- this.areaName = "D鍖�"
- }
- else if (val == 6){
- this.areaName = "E鍖�"
- }
-
-
- this.init()
- if (this.searchMatnr != ""
- || this.searchOrderNo != ""
- || this.searchSpecs != ""
- || this.searchMaktx != ""
- || this.searchLocNo != "") {
- this.searchLoc()
+ if (!val) {
+ var rectangle = pixiStageMap.get(this.drawerLocNoData.locNo)
+ updateColor(rectangle, rectangle.originColor);//鎭㈠棰滆壊
}
}
}
@@ -783,11 +600,7 @@
init(){
let that = this
$.ajax({
- url: baseUrl + "/map/getData/auth",
- data:{
- lev : this.currentLev,
- area : this.area
- },
+ url: baseUrl + "/map/getData/" + this.currentLev + "/auth",
headers: {'token': localStorage.getItem('token')},
method: "get",
success: (data) => {
@@ -807,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);
@@ -818,53 +632,154 @@
let data2 = []
item.forEach((val, idx) => {
val.searchStatus = false//鎼滅储鏍囪
+ val.rectangle = null;
data2.push(val)
})
- this.pointContainerWidth = item.length * (35+1)
+ 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
let data = this.map
let rowData = data[x]
-
-
for (var i = 1; i < rowData.length; i++) {
-
- if (this.area == 1){
- if (rowData[i].locNo != undefined) {
- let locNo = rowData[i].locNo;
- return "#" + parseInt(locNo.substr(0, 2));
- }
- }else if (this.area == 6){
- if (rowData[i].locNo != undefined) {
- let locNo = rowData[i].locNo;
- return "#" + parseInt(locNo.substr(8, 2));
- }
- }
- else {
- if (rowData[i].locNo != undefined) {
- let locNo = rowData[i].locNo;
- return "#" + parseInt(locNo.substr(7, 2));
- }
+ if (rowData[i].locNo != undefined) {
+ let locNo = rowData[i].locNo;
+ return "#" + parseInt(locNo.substr(0, 2));
}
}
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({
@@ -951,7 +866,6 @@
tmp[item.crnNo - 1] = item;
})
- console.log(tmp)
that.crnList = tmp;
} else if (res.code === 403) {
top.location.href = baseUrl + "/";
@@ -1027,111 +941,6 @@
}
}
})
-
- // let result = true;//鏈�缁堢粨鏋�
- // //妫�娴嬪簱浣嶆槸鍚︾己灏戦�夋嫨瀵艰嚧涓嶅畬鏁�
- // bayList.forEach((item,index) => {
- // //鎼滅储褰撳墠宸烽亾鏈夋晥鍦ㄥ簱list
- // //涓婂崐閮ㄥ垎锛屽贩閬�
- // let topList = []
- // for (var i = 8; i >= 3; i--) {
- // let obj = {
- // x: i,
- // y: index,
- // status: false,
- // locNo: map[i][index].locNo
- // }
- //
- // if (map[i][index].locSts == 'F') {
- // //鍦ㄥ簱鐘舵�侊紝瀛樺叆宸烽亾鍦ㄥ簱list
- // topList.push(obj)
- // }
- // }
- //
- // //涓嬪崐閮ㄥ垎锛屽贩閬�
- // let bottomList = []
- // for (var i = 9; i < 14; i++) {
- // let obj = {
- // x: i,
- // y: index,
- // status: false,
- // locNo: map[i][index].locNo
- // }
- //
- // if (map[i][index].locSts == 'F') {
- // //鍦ㄥ簱鐘舵�侊紝瀛樺叆宸烽亾鍦ㄥ簱list
- // bottomList.push(obj)
- // }
- // }
- //
- // // if (topList.length == 0 && bottomList.length == 0) {
- // // result = false;
- // // }
- //
- // for (var i = 0; i < item.length; i++) {
- // if (item[i].x > 8) {
- // //涓嬪崐閮ㄥ垎鏁版嵁
- // let index = this.searchDataIndex(item[i],bottomList)
- // // console.log(item[i],bottomList,index)
- // if (index == -1) {
- // continue
- // }
- // bottomList[index].status = true
- // }else {
- // //涓婂崐閮ㄥ垎鏁版嵁
- // let index = this.searchDataIndex(item[i],topList)
- // // console.log(item[i],topList,index)
- // if (index == -1) {
- // continue
- // }
- // topList[index].status = true
- // }
- //
- // }
- //
- // let tmp1 = []
- // let tmp2 = []
- // for (var i = item.length - 1; i >= 0; i--) {
- // if (item[i].x < 9) {
- // tmp1.push(item[i]);
- // }
- // }
- // for (var i = 0; i < item.length; i++) {
- // if (item[i].x > 8) {
- // tmp2.push(item[i]);
- // }
- // }
- //
- // if (tmp1.length > 0) {
- // //鍒ゆ柇涓婂崐閮ㄥ垎鍑哄簱鏄惁閫夋嫨瀹屾暣
- // let topIndex = this.searchDataIndex(tmp1[0],topList);
- // if (topIndex != -1) {
- // for (var i = topIndex; i < topList.length; i++) {
- // if (topList[i].status != true) {
- // result = false;
- // }
- // }
- // }
- // }
- //
- // if (tmp2.length > 0) {
- // //鍒ゆ柇涓嬪崐閮ㄥ垎鍑哄簱鏄惁閫夋嫨瀹屾暣
- // let bottomIndex = this.searchDataIndex(tmp2[0],bottomList)
- // if (bottomIndex != -1) {
- // for (var i = bottomIndex; i < bottomList.length; i++) {
- // if (bottomList[i].status != true) {
- // result = false;
- // }
- // }
- // console.log(tmp2[0],bottomList,bottomIndex)
- // }
- // }
- // })
- //
- // if (!result) {
- // $layui.layer.msg("鍑哄簱璺緞閫夋嫨鏈夎");
- // return;
- // }
//鍑嗗鍑哄簱
if (this.outSite == null) {
@@ -1245,7 +1054,6 @@
// $layui.layer.msg("璇疯緭鍏ョ墿鏂欑紪鍙锋垨璁㈠崟鍙�");
// return;
// }
-
let that = this;
$.ajax({
url: baseUrl + "/map/searchData/auth",
@@ -1264,53 +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,index) => {
- // let locNo = item.locNo
- // let y = parseInt(locNo.substr(2,3))
- // let x = parseInt(locNo.substr(0,2))
- // console.log(x)
- // // if ( (x+2) %5 === 0 ) {
- // // x = 5*item.crnNo-2;
- // // }else
- // if(x<17){
- // if (x % 4 == 0 || (x+1) % 4 == 0){
- // x = item.crnNo+x
- // }else {
- // x = item.crnNo+x-1
- // }
- // }
- // console.log(x)
- //
- // tmp[x][y].searchStatus = true//鎼滅储鏍囪
- // })
+
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 + "/";
@@ -1343,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