<div class="qybox">
<div class="title">
<div class="title-text">示意图</div>
<div class="leftnum" v-if="titleValue && titleValue.length >0">
<div class="leftnum-item" ref="targtBox" draggable="true" id="copy" @dragstart='handler_dragstart($event,i)' @dragend='dragend' v-for="item,i in 2" :key="i">
</div>
</div>
</div>
<div class="content" ref="bgbox" id="canvasBgbox">
<div class="bgimg">
<div class="content_tip_box" ref="back_box" id="copyTarget" @dragover='hander_dragover' @drop='handler_drop'>
<div :class="item.isRed==0?'content-tip':'content-tip content-tip1'" draggable="true" @dragstart='dragstart($event,item)' @dragend='dragend_handler($event,item)' v-for="item,i in list" :key="i"
:style="`left:${item.left}%;top:${item.top}%`">
{{i+1}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getQyInfo, getbaseValue, getbaseValueAll, getTjInfo, getwarehouseCode } from "@/api/indexpage.js";
export default {
data() {
return {
isShow: false,
isCkShow: false,
//悬浮框的数据
suspensionBoxValue: {
QyValue: {
warehouseAddress: '',
warehouseCode: '',
tradeName: ''
},
shopList: [],
},
titleValue: [],
companyValue: [],
//============1-23 添加================================
startclientX_c: 0,
startclientY_c: 0,
bodyWidth: 0,//浏览器可视区域的宽高
bodyHeight: 0,
initWidth: 0, // 父元素的宽-自适应值
initHeight: 0, // 父元素的高-自适应值
startclientX: 0, // 元素拖拽前距离浏览器的X轴位置
startclientY: 0, //元素拖拽前距离浏览器的Y轴位置
elLeft: 0, // 元素的左偏移量
elTop: 0, // 元素的右偏移量
clone: null,//复制的元素
isRed: null,//判断是什么颜色的按钮 0是蓝色 1是橙色
list: []
}
},
mounted() {
this.initBodySize()
window.addEventListener("resize", function () {
console.log("屏幕变化")
this.initBodySize()
})
this.getTjInfovalue("titleValue", 'WHPCKTJ')
getbaseValueAll().then(res => {
this.companyValue = res.rows
})
},
methods: {
// 页面初始化
initBodySize() {
this.initWidth = this.$refs.back_box.clientWidth; // 拿到父元素宽 背景盒子的宽高
this.initHeight = this.$refs.back_box.clientHeight;
this.bodyWidth = document.body.clientWidth // 浏览器的宽高
this.bodyHeight = document.body.clientHeight
},
handler_dragstart(event, index) {
//用index判断 是拖的哪个颜色的按钮
this.isRed = index
// 设置数据
event.dataTransfer.setData('text/plain', event.target.id);
// 设置拖动效果 设置既复制又移动
event.effectAllowed = 'copyMove';
this.startclientX = event.clientX; // 记录拖拽元素初始位置
this.startclientY = event.clientY;
const target = event.target.cloneNode(true); // 复制拖拽的元素
this.clone = target; // 保存复制的元素
},
dragend(event) {
//计算偏移量
// console.log(event.clientX, event.clientY, "结束位置")
// let x = event.clientX - this.startclientX; // 计算偏移量
// let y = event.clientY - this.startclientY;
let x = event.clientX; // 计算偏移量
let y = event.clientY;
// console.log(x, y, '结束位置1')
const box = this.$refs.back_box; // 获取盒子元素
const rect = box.getBoundingClientRect(); // 获取盒子的位置信息
let iconWidth = document.getElementById("copy").offsetWidth; // 锚点的宽高
let iconHeight = document.getElementById("copy").offsetHeight; //
// // console.log(iconWidth, iconHeight)
// console.log('左边界位置：', rect.left);
// // console.log('右边界位置：', rect.right);
// console.log('顶部位置：', rect.top);
// // console.log('底部位置：', rect.bottom);
let top = y - rect.top - (iconHeight / 2)
let left = x - rect.left - (iconWidth / 2)
let eltop = Number(top / this.initHeight * 100)
let elleft = Number(left / this.initWidth * 100)
// console.log(top, top, eltop, elleft)
this.list.push({
left: elleft,
top: eltop,
isRed: this.isRed
})
console.log(this.list)
event.dataTransfer.clearData();
},
//已有的数据拖动
dragstart(e, item) {
console.log(e, item, "子元素开始拖拽")
this.startclientX_c = e.clientX; // 记录拖拽元素初始位置
this.startclientY_c = e.clientY;
},
dragend_handler(e, item) {
console.log(e, item, "子元素结束拖拽")
console.log(item)
let x = e.clientX - this.startclientX_c; // 计算偏移量
let y = e.clientY - this.startclientY_c;
let top = 0, left = 0;
top += y
left += x
console.log(top, left, this.initHeight, this.initWidth)
let eltop = Number(top / this.initHeight * 100).toFixed(2)
let elleft = Number(left / this.initWidth * 100).toFixed(2)
console.log(eltop, elleft)
console.log(Number(item.top) + Number(eltop), Number(item.left) + Number(elleft))
item.top = Number(item.top) + Number(eltop)
item.left = Number(item.left) + Number(elleft)
// let left += y
// item.top += x;
// item.left +=y
console.log(item)
},
// 当被拖动元素在目标元素内时触发
hander_dragover(event) {
// console.log(event)
// event.target.style.background = 'lightblue';
event.preventDefault();
},
handler_drop(event) {
event.preventDefault();
},
handler_dragLeave(event) {
event.target.style.background = 'white';
event.preventDefault();
},
getTjInfovalue(arr, type) {
getTjInfo(type).then(res => {
this[arr] = res.data.filter(item => item.name !== "区外危化品仓库数量")
})
},
showInfo(row, column, event) {
this.isShow = true;
//更新悬浮框的数据
//危化品列表
getQyInfo(row.tradeCode, row.warehouseCode).then(res => {
this.suspensionBoxValue.shopList = res.rows
})
//企业信息
getbaseValue(row.tradeCode).then(res => {
this.suspensionBoxValue.QyValue = res.rows[0]
})
},
showInfo1(tradeName, id, tradeCode, warehouseCode) {
this.isShow = true;
//更新悬浮框的数据
//危化品列表
getQyInfo(tradeCode, warehouseCode).then(res => {
this.suspensionBoxValue.shopList = res.rows
})
//企业信息
getbaseValue(tradeCode).then(res => {
this.suspensionBoxValue.QyValue = res.rows[0]
})
}
},
}
</script>
<style lang="scss" scoped>
.qybox {
height: calc(100vh - 90px);
// border: 1px solid red;
position: relative;
.title {
// z-index: 2;
// height: 120px;
height: 13vh;
// border: 1px solid red;
position: relative;
.title-text {
font-size: 4.5vh;
font-family: Microsoft YaHei;
font-weight: bold;
color: #2f3849;
line-height: 13vh;
text-align: center;
// line-height: 120px;
}
.leftnum {
width: 6vw;
// min-width: 140px;
position: absolute;
left: 20px;
top: 20px;
display: flex;
justify-content: space-around;
align-items: center;
// border: 1px solid red;
height: 4vh;
.leftnum-item {
width: 2vw;
height: 4vh;
background: url(~@/assets/qy/green.png) center top no-repeat;
background-size: contain;
&:nth-child(2) {
// border: 1px solid red;
background: url(~@/assets/qy/red.png) center top no-repeat;
background-size: contain;
}
.text {
min-width: 70px;
width: calc(9.5vw - 6vh - 40px);
// border: 1px solid red;
margin-left: 10px;
font-size: 1.3vh;
text-align: left;
}
}
}
}
.content {
height: calc(86vh - 150px);
// border: 1px solid red;
.bgimg {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.content_tip_box {
// border: 1px solid red;
background: url(~@/assets/qy/bg.png) center top no-repeat;
background-size: 100% 100%;
// width: 82vw;
width: 100%;
// border: 1px solid red;
position: absolute;
// height: 32vw;
height: 100%;
.content-tip {
width: 2vw;
// min-width: 30px;
height: 4vh;
// min-height: 40px;
// border: 1px solid red;
position: absolute;
background: url(~@/assets/qy/green.png) center top no-repeat;
background-size: contain;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
// top: 20%;
// left: 3.5%;
}
.content-tip1 {
background: url(~@/assets/qy/red.png) center top no-repeat;
background-size: contain;
}
.content-tip:hover {
z-index: 10;
}
}
}
position: relative;
.companyList {
position: absolute;
// border: 1px solid red;
top: 0;
left: 26px;
cursor: pointer;
-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 57, 154, 0.08);
box-shadow: 0px 3px 6px 0px rgba(0, 57, 154, 0.08);
background-color: #fff;
padding: 10px 20px;
border-radius: 5px;
color: #ff3c00;
font-family: "SourceHanSansCNRegular";
}
}
.home-footer {
width: calc(100% - 40px);
height: 62px;
// border: 1px solid red;
background: url(~@/assets/home/footer.png) center no-repeat;
background-size: 100%;
line-height: 62px;
padding-left: 20px;
font-size: 16px;
margin: 0 20px;
// margin-top: 20px;
a {
color: rgba(50, 146, 255, 1);
}
}
.suspensionBox {
width: 370px;
height: calc(100% - 150px);
background: #ffffff;
box-shadow: 0px 5px 21px 0px rgba(0, 57, 154, 0.17);
border-radius: 4px;
position: fixed;
right: 20px;
top: 83px;
padding: 40px 20px 20px 20px;
overflow: auto;
.close {
// border: 1px solid red;
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
}
.listValue {
// border: 1px solid red;
max-height: calc(100% - 160px);
.el-table {
height: calc(100% - 55px);
overflow: auto;
}
}
}
.ckList {
width: 370px;
height: 300px;
background: #ffffff;
box-shadow: 0px 5px 21px 0px rgba(0, 57, 154, 0.17);
border-radius: 4px;
position: absolute;
left: 1%;
top: 56%;
padding: 20px 20px 20px 20px;
overflow: auto;
.close {
// border: 1px solid red;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
z-index: 20;
}
.listValue {
// border: 1px solid red;
// max-height: calc(100% - 160px);
}
}
}
</style>
