|
|
@@ -48,6 +48,10 @@
|
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
|
|
font-family: "Microsoft YaHei Light","sans-serif";
|
|
|
}
|
|
|
+ /*opacity是设置遮罩透明度的，可以自己调节*/
|
|
|
+ #loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#f8f8f8;opacity:0.6;z-index:15000;}
|
|
|
+ #loading i{position:absolute;top:50%;left:50%;font-size:33px;margin-top:-15px;margin-left:-40px;}
|
|
|
+ #loading p{position:absolute;top:55%;left:48%;width:33px;height:33px;margin-top:-15px;margin-left:-15px;}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -163,7 +167,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <button class="btn btn-info col-10 text-white" style="position:absolute;bottom: 20px;cursor: pointer">保存更改</button>
|
|
|
+ <button @click="clickEditOrSave()" :class="isNotEdit ? 'btn-info' : 'btn-success'"
|
|
|
+ style="position:absolute;bottom: 20px;cursor: pointer" class="btn col-10 text-white">
|
|
|
+ <span v-if="isNotEdit">开启编辑</span>
|
|
|
+ <span v-else>保存更改</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
<div class="col-10 p-0">
|
|
|
<div class="w-100 bg-secondary" id="canvasApp" style="height: 100vh;overflow: auto;user-select: none;">
|
|
|
@@ -197,6 +205,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div id="loading" class="list-item">
|
|
|
+ <i class="fa fa-spinner fa-spin"></i>
|
|
|
+ <p style="line-height: 24px;">loading...</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
@include("equipment._detailInfo")
|
|
|
@include("equipment._location")
|
|
|
@@ -207,11 +219,11 @@
|
|
|
var vue = new Vue({
|
|
|
el:"#container",
|
|
|
data:{
|
|
|
- warehouses:[{id:1,name:"松江泗砖仓库一层"},{id:2,name:"九干"}], //仓库描述
|
|
|
+ warehouses:[], //仓库描述
|
|
|
selected:"", //当前选中的仓库ID
|
|
|
container:{width:1950,height:1125}, //容器初始大小
|
|
|
name:"", //当前选中的仓库NAME
|
|
|
- isNotEdit:false, //是否允许编辑
|
|
|
+ isNotEdit:true, //是否允许编辑
|
|
|
currentEl:{}, //当前选中的元素
|
|
|
coordsMapping:{ //元素信息映射
|
|
|
"居中":"h-100 w-100 el-center",
|
|
|
@@ -221,20 +233,7 @@
|
|
|
"右上":"text-right",
|
|
|
"右下":"el-right-bottom",
|
|
|
},
|
|
|
- elements:[ //场景元素池
|
|
|
- {
|
|
|
- x:0,
|
|
|
- y:0,
|
|
|
- width:22.5,
|
|
|
- height:30,
|
|
|
- name:"test",
|
|
|
-
|
|
|
- coords:"居中",
|
|
|
- border:["left","top","right","bottom"],
|
|
|
- color:"white",
|
|
|
- index:1,
|
|
|
- },
|
|
|
- ],
|
|
|
+ elements:[], //场景元素池
|
|
|
clientCoords:{}, //坐标系记录
|
|
|
scale:100, //缩放值
|
|
|
equipments:[ //备选设备池
|
|
|
@@ -250,42 +249,47 @@
|
|
|
el:null,
|
|
|
obj:null,
|
|
|
},
|
|
|
- equipmentElements:[ //设备元素池
|
|
|
- ],
|
|
|
+ equipmentElements:[], //设备元素池
|
|
|
grid:true, //设备拖拽是否开启网格
|
|
|
isLoadLocation:false, //开启加载库位
|
|
|
- baseUrl:"http://192.168.7.120:8112/",
|
|
|
+ baseUrl:"http://127.0.0.1:8112/",
|
|
|
},
|
|
|
mounted() {
|
|
|
this.initPage();
|
|
|
- let record = localStorage.getItem("equipment:warehouse");
|
|
|
- if (record){
|
|
|
- let recordObj = JSON.parse(record);
|
|
|
- this.selected = recordObj.id;
|
|
|
- this.name = recordObj.name;
|
|
|
- }else{
|
|
|
- if (this.warehouses.length>0)this.selectedWarehouse(this.warehouses[0]);
|
|
|
- }
|
|
|
},
|
|
|
methods:{
|
|
|
+ clickEditOrSave(){
|
|
|
+ if(this.isNotEdit){
|
|
|
+ this.isNotEdit = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log("保存更改");
|
|
|
+ },
|
|
|
initPage(){
|
|
|
$.ajax({
|
|
|
url : this.baseUrl+"warehouse/detail",
|
|
|
type : "GET",
|
|
|
success : (res,status)=>{
|
|
|
- console.log(1);
|
|
|
+ this.warehouses = res.data;
|
|
|
+ //这里获取warehouses
|
|
|
+ let record = localStorage.getItem("equipment:warehouse");
|
|
|
+ if (record){
|
|
|
+ let recordObj = JSON.parse(record);
|
|
|
+ this.selectedWarehouse(recordObj);
|
|
|
+ }else{
|
|
|
+ if (this.warehouses.length>0)this.selectedWarehouse(this.warehouses[0]);
|
|
|
+ }
|
|
|
+ $("#loading").hide();
|
|
|
},
|
|
|
error : (err,status)=>{
|
|
|
- console.log(2);
|
|
|
+ window.tempTip.show("加载失败");
|
|
|
},
|
|
|
- complete:()=>{
|
|
|
- console.log("这里用于关闭加载动画")
|
|
|
- },
|
|
|
- //timeout:10000,
|
|
|
+ timeout:3000,
|
|
|
})
|
|
|
},
|
|
|
//备选设备拖拽按下事件
|
|
|
eqDown(equipment){
|
|
|
+ if (this.isNotEdit)return;
|
|
|
if (this.currentEq.obj!==null)return;
|
|
|
let div = document.createElement("div");
|
|
|
div.style.width = equipment.w+'px';
|
|
|
@@ -303,6 +307,7 @@
|
|
|
},
|
|
|
//备选设备拖拽移动事件
|
|
|
eqMove(){
|
|
|
+ if (this.isNotEdit)return;
|
|
|
if (this.currentEq.obj===null)return;
|
|
|
let x = event.clientX;
|
|
|
let y = event.clientY;
|
|
|
@@ -313,6 +318,7 @@
|
|
|
},
|
|
|
//备选设备拖拽松开事件
|
|
|
eqUp(){
|
|
|
+ if (this.isNotEdit)return;
|
|
|
if (this.currentEq.obj===null)return;
|
|
|
this.currentEq.el.remove();
|
|
|
this.currentEq.el = null;
|
|
|
@@ -375,6 +381,19 @@
|
|
|
this.selected = warehouse.id;
|
|
|
this.name = warehouse.name;
|
|
|
localStorage.setItem("equipment:warehouse", JSON.stringify(warehouse));
|
|
|
+ $.ajax({
|
|
|
+ url : this.baseUrl+"warehouse/detail/getCoordsInfo",
|
|
|
+ type : "post",
|
|
|
+ dataType : "JSON",
|
|
|
+ data : {id:warehouse.id},
|
|
|
+ success : (res,status)=>{
|
|
|
+ if (res.data)this.elements = JSON.parse(res.data);
|
|
|
+ },
|
|
|
+ error : (err,status)=>{
|
|
|
+ window.tempTip.show("坐标信息加载失败");
|
|
|
+ },
|
|
|
+ timeout:3000,
|
|
|
+ })
|
|
|
},
|
|
|
//文本类属性改变
|
|
|
changeText(key){
|
Zhouzhendong