<!--
|
* @Date: 2024-01-05 23:47:53
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-01-06 16:12:18
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
|
-->
|
<template>
|
<div class="map">
|
<div class="table-tool" v-if="status !== 2">
|
<el-button @click="save">保存</el-button>
|
<el-button @click="out">退出</el-button>
|
<el-input v-show="status !== 2" v-model="plantName" placeholder="厂名"/>
|
<el-input v-show="status ===0 && !map" v-model="rows" />
|
<el-input v-show="status ===0 && !map" v-model="cols" />
|
<el-button v-show="status ===0 && !map" @click="createMap">生成地图</el-button>
|
</div>
|
<div class="table" >
|
<div class="table-action" :style="position" v-show="showAction && status !== 2">
|
<div @click="merge">合并</div>
|
<div @click="split">拆分</div>
|
<div @click="sign(1)">过道</div>
|
<div @click="sign(2)">机床</div>
|
<div @click="sign(0)">取消</div>
|
<!-- <div>增加行</div> -->
|
<!-- <div>删除行</div> -->
|
<!-- <div>增加列</div> -->
|
<!-- <div>删除列</div> -->
|
</div>
|
<table :style="{ width: 50 / 19 * rows + 'rem', height: 50 / 19 * cols + 'rem' }">
|
<tr v-for="(item, index) in mapNew" :key="index">
|
<td v-if="v.rowspan !==0 && v.colspan!==0" :class="{'active': (range.x !=='' && v.rowIndex >=range.x && v.rowIndex<=range.x1 && v.colIndex>=range.y && v.colIndex<=range.y1),aisle: v.type ===1}" @mousedown="e => onMousedown(e, v)" @mousemove="e => onMouseMove(e, v)" v-for="v in item"
|
:rowspan="v.rowspan" :colspan="v.colspan" :key="v.rowIndex + '-' + v.colIndex">
|
<img @click="addDevice($event,v)" @mousedown="e => e.stopPropagation()" v-if="v.type ===2 && status!==2" src="./img/+.png" alt="">
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</template>
|
<script>
|
const getParent = (v, layout) => {
|
if (v.rowspan === 0) {
|
return getParent(layout[v.parent[0]][v.parent[1]], layout)
|
} else {
|
return v
|
}
|
}
|
export default {
|
props: {
|
status: {
|
type: Number,
|
default: 0
|
},
|
currentMap: {
|
default: []
|
},
|
name: {
|
type: String,
|
},
|
id: {
|
type: Number
|
}
|
},
|
computed: {
|
mapNew () {
|
if (this.currentMap.length > 0) return this.currentMap
|
if (!this.map) return []
|
let arr = this.map.filter(item => item.rowspan !== 0 || item.colspan !== 0)
|
return arr
|
},
|
tableW () {
|
this.mapNew
|
},
|
},
|
data() {
|
return {
|
plantName: '',
|
rows: 10,
|
cols: 10,
|
map: null, // 地图数据
|
position: {},
|
showAction: false,
|
tdMounseDown: false,
|
selection: [],
|
range: {x: '',x1: '',y: '',y1: ''}
|
}
|
},
|
watch: {
|
selection(val) {
|
let select = this.selection
|
let range = {}
|
if (val.length === 0) {
|
range = {}
|
} else if (val.length === 1) {
|
let x = select[0].rowIndex
|
let y = select[0].colIndex
|
let x1 = select[0].rowIndex + select[0].rowspan - 1
|
let y1 = select[0].colIndex + select[0].colspan - 1
|
range = { x, y, x1, y1 }
|
} else {
|
// 起始行号 不包含合并
|
let x = Math.min(select[0].rowIndex, select[1].rowIndex)
|
let x1 = Math.max(select[0].rowIndex + select[0].rowspan - 1, select[1].rowIndex + select[1].rowspan - 1)
|
let y = Math.min(select[0].colIndex, select[1].colIndex)
|
let y1 = Math.max(select[0].colIndex + select[0].colspan - 1, select[1].colIndex + select[1].colspan - 1)
|
// 范围内碰到合并格
|
for (var i = x; i <= x1; i++) {
|
for (var j = y; j <= y1; j++) {
|
let v = getParent(this.map[i][j], this.map)
|
x = Math.min(x, v.rowIndex)
|
y = Math.min(y, v.colIndex)
|
x1 = Math.max(x1, v.rowIndex + v.rowspan - 1)
|
y1 = Math.max(y1, v.colIndex + v.colspan - 1)
|
}
|
}
|
range = { x, y, x1, y1 }
|
}
|
this.$set(this.range,'x',range.x)
|
this.$set(this.range,'x1',range.x1)
|
this.$set(this.range,'y',range.y)
|
this.$set(this.range,'y1',range.y1)
|
},
|
name: {
|
handler () {
|
this.plantName = this.name
|
},
|
immediate: true
|
}
|
},
|
mounted() {
|
this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
|
this.$el.addEventListener('mouseup',e => {
|
if(this.status ===2) return
|
this.tdMounseDown = false
|
})
|
this.map = this.currentMap
|
if (this.id) {
|
this.getmachineList()
|
}
|
},
|
beforeUpdate() {
|
this.$el.querySelector('table').removeEventListener('contextmenu', this.contextmenu)
|
},
|
updated() {
|
this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
|
},
|
methods: {
|
createMap() {
|
let data = []
|
for (var i = 0; i < this.rows; i++) {
|
let arr = []
|
for (var j = 0; j < this.cols; j++) {
|
arr.push({
|
rowspan: 1,
|
colspan: 1,
|
rowIndex: i,
|
colIndex: j,
|
type: ''
|
})
|
}
|
data.push(arr)
|
}
|
this.map = data
|
},
|
contextmenu(e) {
|
if(this.status ===2) return
|
// if (this.range.x !=='') return
|
e.preventDefault()
|
e.stopPropagation()
|
let { pageX: left, pageY: top } = e
|
this.showAction = true
|
let { top: t } = document.querySelector('.map').getBoundingClientRect()
|
this.position = {
|
left: left + 'px',
|
top: top - t + 10 + 'px'
|
}
|
},
|
onMousedown(e, v) {
|
if(this.status ===2) return
|
if (e.button !== 0) return
|
this.tdMounseDown = true
|
this.showAction = false
|
this.selection = [v]
|
},
|
onMouseMove(e,v) {
|
if(this.status ===2) return
|
if(!this.tdMounseDown) return
|
this.$set(this.selection,1,v)
|
},
|
merge(e) {
|
const { x, x1, y, y1 } = this.range
|
for (var i = x; i <= x1; i++) {
|
for (var j = y; j <= y1; j++) {
|
if (i == x && j == y) {
|
let arr = [...(this.map[i])]
|
arr[j].rowspan = x1 - x + 1
|
arr[j].colspan = y1 - y + 1
|
this.$set(this.map,i,arr)
|
} else {
|
let arr = [...(this.map[i])]
|
arr[j].rowspan = 0
|
arr[j].colspan = 0
|
arr[j].parent = [x, y]
|
this.$set(this.map,i,arr)
|
}
|
}
|
}
|
this.$set(this.range,'x',this.range.x)
|
this.$set(this.range,'x1',this.range.x)
|
this.$set(this.range,'y',this.range.y)
|
this.$set(this.range,'y1',this.range.y)
|
this.showAction = false
|
},
|
split () {
|
const { x, x1, y, y1 } = this.range
|
for(var i=x;i<=x1;i++) {
|
for(var j=y;j<=y1;j++) {
|
if (i==x && j==y) {
|
let arr = [...(this.map[i])]
|
arr[j].rowspan = 1
|
arr[j].colspan = 1
|
this.$set(this.map,i,arr)
|
} else {
|
let arr = [...(this.map[i])]
|
arr[j].rowspan = 1
|
arr[j].colspan = 1
|
arr[j].parent = ''
|
this.$set(this.map,i,arr)
|
}
|
}
|
}
|
setData(layoutNew)
|
setRange({x,y,x1:x,y1: y})
|
setShowMenu(false)
|
},
|
sign (type) {
|
const { x, x1, y, y1 } = this.range
|
for(var i=x;i<=x1;i++) {
|
for(var j=y;j<=y1;j++) {
|
let arr = [...(this.map[i])]
|
arr[j].type = type
|
this.$set(this.map,i,arr)
|
}
|
}
|
this.showAction = false
|
this.$forceUpdate()
|
},
|
addDevice (e,v) {
|
if(this.status ===2) return
|
e.stopPropagation()
|
alert('添加设备')
|
},
|
getmachineList () {
|
this.$http.post('/machine/list', {
|
status: '',
|
plantId: this.id
|
}).then(res => {
|
console.log(res)
|
})
|
},
|
save () {
|
if (this.status === 0) {
|
this.$http.post('/plant/save',{
|
name: this.plantName,
|
gridSetting: JSON.stringify(this.map)
|
}).then(res => {
|
console.log(res)
|
})
|
} else if(this.status === 1) {
|
this.$http.post('/plant/modify',{
|
name: this.plantName,
|
gridSetting: JSON.stringify(this.map),
|
id: this.id
|
}).then(res => {
|
console.log(res)
|
})
|
}
|
|
},
|
out () {
|
this.$emit('out')
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
.map {
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
position: relative;
|
}
|
|
.table-tool {
|
margin-top: 10px;
|
display: flex;
|
justify-content: flex-start;
|
|
&>div {
|
width: 80px;
|
margin-inline: 10px;
|
}
|
}
|
|
.table {
|
padding: 10px;
|
margin-top: 10px;
|
display: flex;
|
justify-content: flex-start;
|
overflow: auto;
|
|
|
.table-action {
|
position: absolute;
|
z-index: 999;
|
color: #fff;
|
|
div {
|
margin-top: 4px;
|
cursor: pointer;
|
}
|
}
|
|
table {
|
border: 1px solid #1662DB;
|
border-collapse: collapse;
|
table-layout: fixed;
|
word-wrap: break-word;
|
|
td {
|
width: 50px;
|
height: 50px;
|
border: 1px solid #1662DB;
|
vertical-align: middle;
|
text-align: center;
|
img {
|
width: 20px;
|
height: 20px;
|
cursor: pointer;
|
}
|
}
|
td.active {
|
background: #68D9FF!important;
|
}
|
td.aisle {
|
// width: 20px;
|
// height: 20px;
|
background: #1662DB;
|
}
|
}
|
}
|
</style>
|
