538 lines
15 KiB
Vue
538 lines
15 KiB
Vue
<template>
|
|
<!-- 基本信息 -->
|
|
<div class="cooperator flex">
|
|
<div class="left whiteBlock">
|
|
<!-- <div class="title">全部塔吊</div> -->
|
|
<vue-scroll style="height: 94%">
|
|
<el-menu
|
|
:default-active="String(devTypeIndex)"
|
|
class="el-menu-vertical-demo whiteBlock"
|
|
>
|
|
<!-- <el-menu-item
|
|
index="0"
|
|
class="el-menu-item"
|
|
:class="checkedId == 0 ? 'checked_item' : ''"
|
|
@click="selectMenu(0)"
|
|
>
|
|
<span slot="title">全部设备位置</span>
|
|
</el-menu-item> -->
|
|
<el-menu-item
|
|
:index="String(index)"
|
|
class="el-menu-item"
|
|
:class="devTypeIndex == index ? 'checked_item' : ''"
|
|
v-for="(item, index) in devTypeList"
|
|
@click="devTypeIndex=index;selectMenu(item.id)"
|
|
:key="index"
|
|
>
|
|
<span slot="title">{{ item.name }}</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</vue-scroll>
|
|
<div class="flex2 btn_pack">
|
|
<!-- <el-button size="small" type="primary" @click="newTowerBtn"
|
|
>新增塔吊</el-button
|
|
>
|
|
<el-button
|
|
size="small"
|
|
type="danger"
|
|
@click="deleteOrCancel"
|
|
:disabled="checkedId == 0"
|
|
>{{ checkedId != -1 ? "删除塔吊" : "取消新增" }}</el-button
|
|
> -->
|
|
<el-button size="medium" type="primary" @click="saveTowerLocationBtn">
|
|
{{$t('message.projectInfo.saveLocationInfo')}}
|
|
<!-- 保存位置信息 -->
|
|
</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="pageTitle title flex2 whiteBlock" style="margin-bottom: 0">
|
|
{{ rightTitle }}
|
|
</div>
|
|
<div class="content whiteBlock">
|
|
<div class="bgPack" >
|
|
<img :src="bgUrl" style="width: auto; height: auto" ref="bgPackImg"/>
|
|
<!-- 塔吊点位 -->
|
|
<div
|
|
v-for="(item, index) in towerList"
|
|
class="point"
|
|
:key="index"
|
|
:style="{ top: item.mapY + 'px', left: item.mapX + 'px' }"
|
|
@mousedown="(e) => mousedown(e, index)"
|
|
>
|
|
<img :src="getDevIcon(item.devType)" alt="">
|
|
<span class="devName">{{item.name}}</span>
|
|
<!-- {{ index + 1 }} -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
selectDevCoordinateListApi,
|
|
updateDevCoordinateApi
|
|
} from "@/assets/js/api/dataBoard";
|
|
export default {
|
|
data() {
|
|
return {
|
|
devTypeList:this.$t('message.projectInfo.devTypeList'),
|
|
devTypeIndex:0,
|
|
devType:'',
|
|
devIcon:'',
|
|
projectSn: "",
|
|
uploadUrl: "",
|
|
fileUrl: "",
|
|
checkTowerId:'',//选中的塔吊id 只作为列表选中状态切换
|
|
checkedId: 0, //选中的设备 -1 新增状态 控制取消按钮 获取选中设备
|
|
towerList: [], //设备列表
|
|
rightTitle: /* "现场施工图", */this.$t('message.projectInfo.SiteConstructionDrawing'),
|
|
driverList: [], //司机列表
|
|
videoList: [],
|
|
showTowerInfo: false, //显示施工图或塔吊信息
|
|
bgUrl: "", //施工图
|
|
|
|
};
|
|
},
|
|
created() {
|
|
this.uploadUrl = this.$store.state.UPLOADURL;
|
|
this.fileUrl = this.$store.state.FILEURL;
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.getTowerList(1);
|
|
// this.getWorkerInfoList();
|
|
// this.getVideoItemList();
|
|
this.bgUrl = this.$store.state.currentProDetail.constructionMapUrl;
|
|
},
|
|
methods: {
|
|
getDevIcon(type) {
|
|
switch (Number(type)) {
|
|
case 1:
|
|
return require("@/assets/images/dataBoard/devIcon-car.png");
|
|
break;
|
|
case 2:
|
|
return require("@/assets/images/dataBoard/devIcon-tower.png");
|
|
break;
|
|
case 3:
|
|
return require("@/assets/images/dataBoard/devIcon-lifter.png");
|
|
break;
|
|
case 4:
|
|
return require("@/assets/images/dataBoard/devIcon-camera.png");
|
|
break;
|
|
case 5:
|
|
return require("@/assets/images/dataBoard/devIcon-electric.png");
|
|
break;
|
|
case 6:
|
|
return require("@/assets/images/dataBoard/devIcon-green.png");
|
|
break;
|
|
case 7:
|
|
return require("@/assets/images/dataBoard/devIcon-face.png");
|
|
break;
|
|
case 8:
|
|
return require("@/assets/images/dataBoard/devIcon-chamber.png");
|
|
break;
|
|
}
|
|
},
|
|
// 获取所有塔吊
|
|
getTowerList() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
devType:this.devType
|
|
};
|
|
selectDevCoordinateListApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.towerList = res.result;
|
|
// if (type == 1) {
|
|
// this.checkedId = 0;
|
|
// this.checkTowerId = '';
|
|
// } else {
|
|
// this.checkedId = this.towerList.length;
|
|
// this.checkTowerId = this.towerList[this.towerList.length-1].id;
|
|
// //详情
|
|
// this.selectMenu(this.checkedId);
|
|
// }
|
|
}
|
|
});
|
|
},
|
|
|
|
//切换塔吊
|
|
selectMenu(val) {
|
|
this.devType = val;
|
|
this.getTowerList();
|
|
// if (val == 0) {
|
|
// this.rightTitle = "现场施工图";
|
|
// this.showTowerInfo = false; //显示施工图
|
|
// this.checkTowerId = '';
|
|
// } else {
|
|
// this.showTowerInfo = true;
|
|
// if (this.towerList[val - 1].id) {
|
|
// this.rightTitle = this.towerList[val - 1].devName;
|
|
// this.facilityForm = this.towerList[val - 1];
|
|
// this.checkTowerId = this.towerList[val - 1].id;
|
|
// this.getDetailsData(this.towerList[val - 1].id);
|
|
// }
|
|
// }
|
|
},
|
|
|
|
// 查询设备详情
|
|
// getDetailsData(id) {
|
|
// let data = {
|
|
// id,
|
|
// };
|
|
// getDetailsApi(data).then((res) => {
|
|
// if (res.code == 200) {
|
|
// this.facilityForm = res.result;
|
|
// let workerIdArr = [];
|
|
// let videoItemIdArr = [];
|
|
// for (let i = 0; i < res.result.driverList.length; i++) {
|
|
// workerIdArr.push(res.result.driverList[i].workerId);
|
|
// }
|
|
// for (let i = 0; i < res.result.videoList.length; i++) {
|
|
// videoItemIdArr.push(res.result.videoList[i].videoItemId);
|
|
// }
|
|
// this.facilityForm.driverList = workerIdArr;
|
|
// this.facilityForm.videoList = videoItemIdArr;
|
|
// }
|
|
// });
|
|
// },
|
|
|
|
//新增塔吊按钮
|
|
// newTowerBtn() {
|
|
// this.facilityForm = {
|
|
// devName: "",
|
|
// devSn: "",
|
|
// forearmLength: "",
|
|
// towerHeight: "",
|
|
// registNo: "",
|
|
// factoryName: "",
|
|
// anticollision: 0,
|
|
// workerId: "",
|
|
// videoItemId: "",
|
|
// };
|
|
// this.showTowerInfo = true;
|
|
// this.checkedId = -1;
|
|
// this.checkTowerId = '';
|
|
// this.rightTitle = "新增塔吊";
|
|
// },
|
|
|
|
//删除或取消按钮
|
|
// deleteOrCancel() {
|
|
// //新增状态 this.checkedId=-1 为取消按钮
|
|
// if (this.checkedId == -1) {
|
|
// this.rightTitle = "现场施工图";
|
|
// this.checkedId = 0;
|
|
// this.showTowerInfo = false;
|
|
// } else {
|
|
// // 删除按钮
|
|
// this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
|
|
// confirmButtonText: "确定",
|
|
// cancelButtonText: "取消",
|
|
// type: "warning",
|
|
// })
|
|
// .then(() => {
|
|
// let data = {
|
|
// id: this.towerList[this.checkedId - 1].id,
|
|
// };
|
|
// deleteTowerInfoApi(data).then((res) => {
|
|
// if (res.code == 200) {
|
|
// this.getTowerList(1);
|
|
// this.showTowerInfo = false;
|
|
// this.rightTitle = "现场施工图";
|
|
// this.$message({
|
|
// type: "success",
|
|
// message: "删除成功!",
|
|
// });
|
|
// } else {
|
|
// this.$message.error(res.message);
|
|
// }
|
|
// });
|
|
// })
|
|
// .catch(() => {
|
|
// this.$message({
|
|
// type: "info",
|
|
// message: "已取消删除",
|
|
// });
|
|
// });
|
|
// }
|
|
// },
|
|
|
|
//移动塔吊位置
|
|
mousedown(e, index) {
|
|
|
|
let bgPackImg = this.$refs.bgPackImg; //获取背景图
|
|
let maxH = bgPackImg.scrollHeight - 30; //可移动的最大高度
|
|
let maxW = bgPackImg.scrollWidth - 30; //可移动的最大宽度
|
|
let objDiv = document.getElementsByClassName('point')[index];
|
|
let zoom = window.localStorage.getItem('zoom');
|
|
//算出鼠标相对元素的位置
|
|
let disX = e.clientX - objDiv.offsetLeft;
|
|
let disY = e.clientY - objDiv.offsetTop;
|
|
// let disX = e.clientY ;
|
|
// let disY = e.clientY ;
|
|
//
|
|
|
|
//鼠标移动时
|
|
document.onmousemove = (e) => {
|
|
console.log('document.onmousemove')
|
|
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
|
|
let left = e.clientX - disX;
|
|
let top = e.clientY - disY;
|
|
console.log(e.clientX,e.clientY)
|
|
console.log(disX,disY)
|
|
console.log(left,top)
|
|
if (left < 0 || top < 0 || top>maxH || left>maxW) {
|
|
return;
|
|
} else {
|
|
this.towerList[index].mapX = left;
|
|
this.towerList[index].mapY = top;
|
|
}
|
|
};
|
|
//鼠标松开时
|
|
document.onmouseup = (e) => {
|
|
console.log('document.onmouseup')
|
|
document.onmousemove = null;
|
|
document.onmouseup = null;
|
|
};
|
|
},
|
|
|
|
// //获取司机列表
|
|
// getWorkerInfoList() {
|
|
// let data = {
|
|
// projectSn: this.projectSn,
|
|
// };
|
|
// getWorkerInfoListApi(data).then((res) => {
|
|
// if (res.code == 200) {
|
|
// this.driverList = res.result;
|
|
// }
|
|
// });
|
|
// },
|
|
|
|
//获取摄像机列表
|
|
// getVideoItemList() {
|
|
// let data = {
|
|
// projectSn: this.projectSn,
|
|
// };
|
|
// getVideoItemListApi(data).then((res) => {
|
|
// if (res.code == 200) {
|
|
// this.videoList = res.result.list;
|
|
// }
|
|
// });
|
|
// },
|
|
|
|
//保存新增
|
|
// submit() {
|
|
// this.$refs["facilityForm"].validate((valid) => {
|
|
// if (valid) {
|
|
// let data = JSON.parse(JSON.stringify(this.facilityForm));
|
|
// data.projectSn = this.projectSn;
|
|
// data.mapX = "0";
|
|
// data.mapY = "0";
|
|
// let driverArr = [];
|
|
// let videoArr = [];
|
|
// //循环选中的司机
|
|
// for (let i = 0; i < data.driverList.length; i++) {
|
|
// let obj = { workerId: data.driverList[i] };
|
|
// driverArr.push(obj);
|
|
// }
|
|
// //循环选中的摄像头
|
|
// for (let i = 0; i < data.videoList.length; i++) {
|
|
// let obj = { videoItemId: data.videoList[i] };
|
|
// videoArr.push(obj);
|
|
// }
|
|
// data.driverList = driverArr;
|
|
// data.videoList = videoArr;
|
|
// if(this.checkedId==-1){
|
|
// //新增
|
|
// addTowerInfoApi(data).then((res) => {
|
|
// if (res.code == 200) {
|
|
// this.getTowerList(2);
|
|
// this.$message.success('新增成功')
|
|
// } else {
|
|
// this.$message.error(res.message);
|
|
// }
|
|
// });
|
|
// }else{
|
|
// editTowerInfoApi(data).then((res)=>{
|
|
// if(res.code==200){
|
|
// this.getTowerList(1);
|
|
// this.$message.success('编辑成功')
|
|
// }
|
|
// })
|
|
// }
|
|
|
|
// } else {
|
|
// console.log("error submit!!");
|
|
// return false;
|
|
// }
|
|
// });
|
|
// },
|
|
//保存塔吊位置
|
|
saveTowerLocationBtn(){
|
|
console.log(this.towerList)
|
|
// let data = [];
|
|
// for(let i = 0; i<this.towerList.length;i++){
|
|
// let obj = {id:this.towerList[i].id,mapX:this.towerList[i].mapX,mapY:this.towerList[i].mapY};
|
|
// data.push(obj)
|
|
// }
|
|
updateDevCoordinateApi(this.towerList).then(res=>{
|
|
console.log(res)
|
|
if(res.code==200){
|
|
// 保存成功
|
|
this.$message.success(this.$t('message.projectInfo.saveSuccess'));
|
|
this.getTowerList();
|
|
}
|
|
})
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.flex2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.flex3 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.cooperator {
|
|
width: 100%;
|
|
height: 100%;
|
|
.left {
|
|
height: 100%;
|
|
width: 300px;
|
|
// width: 25%;
|
|
margin-right: 15px;
|
|
font-size: 15px;
|
|
.title {
|
|
height: 41px;
|
|
line-height: 41px;
|
|
box-sizing: border-box;
|
|
padding: 0 22px;
|
|
margin-bottom: 0;
|
|
// color: #282e49;
|
|
// border-bottom: 2px #ebf0fc solid;
|
|
font-weight: 600;
|
|
}
|
|
.el-menu-item {
|
|
border-bottom: 2px #ebf0fc solid;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
padding: 0 30px !important;
|
|
font-size: 16px;
|
|
}
|
|
.checked_item {
|
|
border-left: 3px solid @--color-primary;
|
|
padding: 0 27px !important;
|
|
background-color: #e1e8fa !important;
|
|
}
|
|
.btn_pack {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.right {
|
|
height: 100%;
|
|
width: calc(100% - 300px);
|
|
// width: 75%;
|
|
.title {
|
|
font-size: 15px;
|
|
height: 41px;
|
|
line-height: 41px;
|
|
// background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
padding: 0 22px;
|
|
// color: #282e49;
|
|
border-bottom: 2px #ebf0fc solid;
|
|
font-weight: 600;
|
|
.right_value {
|
|
color: rgba(115, 121, 150, 100);
|
|
font-size: 14px;
|
|
font-weight: 100;
|
|
.value {
|
|
color: @--color-primary;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
height: calc(100% - 41px);
|
|
// background-color: #fff;
|
|
box-sizing: border-box;
|
|
padding: 20px 20px;
|
|
.demo-facilityForm {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/deep/ .__view {
|
|
min-height: calc(100% - 41px) !important;
|
|
}
|
|
/deep/ .el-checkbox__label {
|
|
display: none;
|
|
}
|
|
.el-menu-vertical-demo {
|
|
width: 100%;
|
|
}
|
|
|
|
.cooperatorDetail {
|
|
width: 100%;
|
|
height: 100%;
|
|
// background: #ffffff;
|
|
box-sizing: border-box;
|
|
.navigationTitle {
|
|
// border-bottom: 2px solid #ebf0fc;
|
|
// margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.nodata_wrap {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 80%;
|
|
padding-top: 20%;
|
|
box-sizing: border-box;
|
|
// color: #c3d4fd;
|
|
div {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.bgPack {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
overflow: auto;
|
|
.point {
|
|
position: absolute;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
// border-radius: 50%;
|
|
// background: rgb(236, 126, 46);
|
|
// text-align: center;
|
|
// line-height: 30px;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
img{
|
|
width: 52px;
|
|
height: 58px;
|
|
}
|
|
.devName{
|
|
color: #fff;
|
|
font-size: 13px;
|
|
// margin-left: 10px;
|
|
word-break: keep-all;
|
|
}
|
|
}
|
|
// .point:hover {
|
|
// background: rgb(241, 191, 24);
|
|
// }
|
|
}
|
|
</style> |