<!--
|
* @Date: 2024-01-05 23:47:53
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-01-12 00:35:17
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
|
-->
|
<template>
|
<div class="map">
|
<div class="map-container" v-if="!addStatus">
|
<div class="table-tool" v-if="status !== 2">
|
<el-button style="width: 150px;" type="primary" size="mini" @click="save">保存</el-button>
|
<el-button style="width: 150px;" size="mini" @click="out">退出</el-button>
|
<el-input v-show="status !==2" v-model="rows" />
|
<el-input v-show="status !==2" v-model="cols" />
|
<el-button size="mini" v-show="status !==2" @click="createMap">生成地图</el-button>
|
<div class="plant-name" v-if="status===2">{{plantName}}</div>
|
<el-input class="plant-name" v-if="status!==2" v-model="plantName" placeholder="请输入厂名"/>
|
</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>
|
<tr v-for="(item, index) in map" :key="index">
|
<td v-if="v.rowspan !==0 && v.colspan!==0"
|
:width="v.type ===1 ? '20px' : v.colspan * 400 + 'px'"
|
:height="v.type ===1 ? '20px' : v.rowspan * 100+ 'px'"
|
: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>
|
<!-- <td></td> -->
|
</tr>
|
<!-- <tr>
|
<td></td>
|
</tr> -->
|
</table>
|
</div>
|
</div>
|
<div class="map-add" v-else>
|
<div class="map-add-item">
|
<span>统一编号</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>设备名称</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>设备型号</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>设备规格</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>使用单位</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>保养者</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>保养周期</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>保养类型</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>是否合格</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>计划开始时间</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>计划完成时间</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-item">
|
<span>保养内容与存在问题</span>
|
<el-input class="value"></el-input>
|
</div>
|
<div class="map-add-footer">
|
<el-button size="mini" @click="close">关闭</el-button>
|
<el-button type="primary" size="mini" @click="saveDevice">保存</el-button>
|
</div>
|
</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
|
}
|
}
|
import mixins from '@/mixins/index'
|
import AddMachine from './addMachine.vue'
|
import {mapGetters} from 'vuex'
|
export default {
|
mixins: [mixins],
|
components: {
|
AddMachine
|
},
|
props: {
|
status: {
|
type: Number,
|
default: 0
|
},
|
currentMap: {
|
default: []
|
},
|
name: {
|
type: String,
|
},
|
id: {
|
type: Number
|
}
|
},
|
data() {
|
return {
|
plantName: '',
|
rows: 10,
|
cols: 50,
|
map: null, // 地图数据
|
addStatus: false,
|
position: {},
|
selection:[],
|
showAction: false,
|
tdMounseDown: false,
|
range: {x: '',x1: '',y: '',y1: ''},
|
currentAdd: {},
|
colgroups:[]
|
}
|
},
|
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
|
},
|
currentMap: {
|
handler () {
|
if (this.currentMap.length > 0) this.map = this.currentMap
|
|
},
|
immediate: true
|
},
|
},
|
mounted() {
|
this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
|
this.$el.addEventListener('mouseup',e => {
|
if(this.status ===2) return
|
this.tdMounseDown = false
|
})
|
if (this.id) {
|
// this.getmachineList()
|
this.rows = this.currentMap.length
|
this.cols = this.currentMap[0].length
|
}
|
},
|
beforeUpdate() {
|
try {
|
this.$el.querySelector('table').removeEventListener('contextmenu', this.contextmenu)
|
} catch (error) {
|
|
}
|
|
},
|
updated() {
|
try {
|
this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
|
} catch (error) {
|
|
}
|
},
|
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) {
|
console.log(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('.table').getBoundingClientRect()
|
if (window.innerWidth - left < 100) {
|
this.position = {
|
right: 0,
|
top: top - t + 10 + 'px'
|
}
|
} else {
|
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)
|
}
|
}
|
}
|
this.showAction = false
|
// 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()
|
this.addStatus = true
|
this.currentAdd = v
|
},
|
save () {
|
if (this.status === 0) {
|
this.$http.postJson('/plant/save',{
|
name: this.plantName,
|
gridSetting: JSON.stringify(this.map)
|
}).then(res => {
|
this.$emit('out')
|
console.log(res)
|
})
|
} else if(this.status === 1) {
|
this.$http.postJson('/plant/modify',{
|
name: this.plantName,
|
gridSetting: JSON.stringify(this.map),
|
id: this.id
|
}).then(res => {
|
this.$emit('out')
|
console.log(res)
|
})
|
}
|
|
},
|
out () {
|
this.$emit('out')
|
},
|
close () {
|
this.addStatus = false
|
},
|
setmachineId (id) {
|
console.log(id)
|
if (!id) return
|
let i = this.currentAdd.rowIndex
|
let j = this.currentAdd.colIndex
|
let arr = [...(this.map[i])];
|
arr[j].id = id
|
this.$set(this.map,i,arr)
|
this.close()
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
.map {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
.map-container {
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
|
.table-tool {
|
padding: 10px 0;
|
display: flex;
|
justify-content: flex-start;
|
|
&>div {
|
width: 80px;
|
margin-inline: 10px;
|
}
|
.plant-name {
|
width: 120px;
|
margin-left: auto;
|
margin-right: 30px;
|
text-align: center;
|
line-height: 28px;
|
background: rgba(23,38,67,0.6);
|
border-radius: 14px;
|
overflow: hidden;
|
color: #F7F8FA;
|
font-size: 12px;
|
border: 1px solid;
|
border-image: linear-gradient(180deg, rgba(154, 254, 254, 1), rgba(75, 120, 205, 1)) 1 1;
|
}
|
}
|
|
.table {
|
// margin-top: 10px;
|
display: flex;
|
justify-content: flex-start;
|
overflow-y: scroll;
|
width: 100%;
|
padding: 20px;
|
height: 100%;
|
position: relative;
|
.table-action {
|
position: absolute;
|
z-index: 999;
|
color: #fff;
|
width: 100px;
|
div {
|
margin-top: 4px;
|
cursor: pointer;
|
}
|
div:hover {
|
color: #68D9FF;
|
}
|
}
|
|
table {
|
width: 2000px;
|
height: 100%;
|
|
border-collapse: collapse;
|
// table-layout: fixed;
|
word-wrap: break-word;
|
overflow: hidden;
|
|
td {
|
// width: 50px;
|
// height: 50px;
|
box-sizing: border-box;
|
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;
|
div {
|
// width: 20px;
|
// height: 20px;
|
}
|
}
|
td.device {
|
// width: 400px;
|
// height: 400px;
|
overflow: hidden;
|
div {
|
// width: 400px;
|
}
|
}
|
}
|
}
|
.grid {
|
width: 100%;
|
height: 100%;
|
div {
|
border: 1px solid red;
|
}
|
}
|
</style>
|
