<!--
|
* @Date: 2023-12-20 20:24:53
|
* @LastEditors: Sneed
|
* @LastEditTime: 2023-12-28 21:06:35
|
* @FilePath: /belleson-frontend/Users/mache/Library/Containers/com.tencent.xinWeChat/Data/Library/Application Support/com.tencent.xinWeChat/2.0b4.0.9/650b28d71b3acf9feb5c2af6da2686eb/Message/MessageTemp/650b28d71b3acf9feb5c2af6da2686eb/File/mdc-portal/src/Test.vue
|
-->
|
<template>
|
<div id="app" @mouseup="mouseup">
|
<div>
|
<input type="text" v-model="rows">
|
<input type="text" v-model="cols">
|
<button @click="createMap">生成厂房地图</button>
|
</div>
|
<div class="btns">
|
<div v-for="btn in btns" :key="btn.handle" :class="{
|
btn,
|
sign: ['markdevice','markroad','markcancel'].includes(btn.disHandle),
|
disable:['markdevice','markroad','markcancel'].includes(btn.disHandle) ? hasSignBtn !== btn.disHandle: (hasSignBtn || disabledHandles && disabledHandles.includes(btn.disHandle)),
|
}" @click="handleFn(btn)">
|
{{ btn.name }}
|
</div>
|
</div>
|
<table class="table">
|
<tr v-for="(row, rowIndex) in tableRows" :key="rowIndex">
|
<td v-for="(td, colIndex) in row" :key="colIndex" :style="getCellStyle(td)"
|
:class="getCellClass(rowIndex, colIndex)" @mousedown="mousedown" @mousemove="mousemove(rowIndex, colIndex)" @mouseup="mouseup" @click="handleSelectCell(rowIndex, colIndex)" :rowspan="td.rowspan"
|
:colspan="td.colspan"></td>
|
</tr>
|
</table>
|
</div>
|
</template>
|
|
<script>
|
// import TableMergeUtils from "table-merge-utils";
|
export default {
|
name: 'App',
|
data() {
|
return {
|
rows: 10,
|
cols: 10,
|
btns: [
|
{ name: "向上添加行", handle: "addTopRow", disHandle: "insertRow" },
|
{ name: "向下添加行", handle: "addBottomRow", disHandle: "insertRow" },
|
{ name: "向左添加列", handle: "addLeftCol", disHandle: "insertCol" },
|
{ name: "向右添加列", handle: "addRightCol", disHandle: "insertCol" },
|
{ name: "删除行", handle: "delRow", disHandle: "delRow" },
|
{ name: "删除列", handle: "delCol", disHandle: "delCol" },
|
{ name: "水平拆分", handle: "splitH", disHandle: "splitH" },
|
{ name: "垂直拆分", handle: "splitV", disHandle: "splitV" },
|
{ name: "向左合并", handle: "leftMerge", disHandle: "leftMerge" },
|
{ name: "向右合并", handle: "rightMerge", disHandle: "rightMerge" },
|
{ name: "向上合并", handle: "topMerge", disHandle: "topMerge" },
|
{ name: "向下合并", handle: "bottomMerge", disHandle: "bottomMerge" },
|
{ name: "标记设备", handle: "markdevice", disHandle: "markdevice" },
|
{ name: "标记过道", handle: "markroad", disHandle: "markroad" },
|
{ name: "取消标记", handle: "markcancel", disHandle: "markcancel" }
|
],
|
tableRows: [],
|
table: null,
|
selectCell: {
|
row: -1,
|
col: -1
|
},
|
disabledHandles: null,
|
hasSignBtn: '',
|
mousedownStatus: false
|
}
|
},
|
methods: {
|
createMap() {
|
this.tableRows = TableMergeUtils.init({ rows: this.rows - 0, cols: this.cols -0,width: 50,height: 50 })
|
this.table = new TableMergeUtils(this.tableRows, { minRetainRow: 1, minSplitHcolspan: 1, minSplitVrowspan: 1, fixRowType: 2 })
|
console.log(this.table)
|
this.disabledHandles = this.table.getDisabledHandles()
|
console.log(this.disabledHandles)
|
},
|
getCellClass(row, col) {
|
if (row === this.selectCell.row && col === this.selectCell.col) {
|
return "cell active";
|
}
|
return "cell";
|
},
|
getCellStyle(cell) {
|
console.log(cell,'>>>>>>>')
|
return {
|
width: cell.type === 0 ? `5px` : cell.type === 1 ? `${cell.width*4}px` : `${cell.width}px`,
|
height: cell.type === 0 ? `5px` : cell.type === 1 ? `${cell.height*4}px` : `${cell.height}px`,
|
lineHieght: `${cell.height}px`,
|
border: cell.type === 0 ? '' : "1px solid rgba(9,54,89,1)",
|
background: cell.type === 1 ? '#060c14' : cell.type === 0 ? '#112c5a' : ''
|
}
|
},
|
mousedown () {
|
if (this.hasSignBtn) {
|
this.mousedownStatus = true
|
}
|
},
|
mousemove (row,col) {
|
if (!this.mousedownStatus) return
|
if (['markroad','markdevice'].includes(this.hasSignBtn)) {
|
this.sign({row,col},this.hasSignBtn === 'markroad' ? 0 : 1)
|
return
|
} else if (this.hasSignBtn === 'markcancel') {
|
return this.sign({row,col},'')
|
}
|
},
|
mouseup () {
|
if (this.hasSignBtn) {
|
this.mousedownStatus = false
|
}
|
},
|
handleSelectCell(row, col) {
|
if (['markroad','markdevice'].includes(this.hasSignBtn)) {
|
this.sign({row,col},this.hasSignBtn === 'markroad' ? 0 : 1)
|
return
|
} else if (this.hasSignBtn === 'markcancel') {
|
return this.sign({row,col},'')
|
}
|
this.selectCell = Object.assign(this.selectCell, { row, col })
|
this.disabledHandles = this.table.getDisabledHandles(
|
this.selectCell.row,
|
this.selectCell.col
|
);
|
},
|
sign ({row,col},type) {
|
this.tableRows[row][col].type = type
|
this.table = new TableMergeUtils(this.tableRows, { minRetainRow: 1, minSplitHcolspan: 1, minSplitVrowspan: 1, fixRowType: 2 })
|
this.disabledHandles = this.table.getDisabledHandles()
|
this.selectCell ={
|
row: -1,
|
col: -1
|
}
|
},
|
handleFn(btn) {
|
console.log('-----',btn)
|
if (this.selectCell.row > -1 && this.selectCell.col > -1 && !['markdevice','markroad', 'markcancel'].includes(btn.handle)) {
|
switch (btn.handle) {
|
case "addTopRow": {
|
let res = this.table.insertRow(this.selectCell.row, this.selectCell.col, 0);
|
this.handleSelectCell(res.row, res.col);
|
this.hasSignBtn = ''
|
break;
|
}
|
case "addBottomRow": {
|
let res = this.table.insertRow(this.selectCell.row, this.selectCell.col, 1);
|
this.handleSelectCell(res.row, res.col);
|
this.hasSignBtn = ''
|
break;
|
}
|
|
case "addLeftCol": {
|
let res = this.table.insertCol(this.selectCell.row, this.selectCell.col, 0);
|
this.handleSelectCell(res.row, res.col);
|
this.hasSignBtn = ''
|
break;
|
}
|
case "addRightCol": {
|
let res = this.table.insertCol(this.selectCell.row, this.selectCell.col, 1);
|
this.handleSelectCell(res.row, res.col);
|
this.hasSignBtn = ''
|
break;
|
}
|
// case 'markdevice':
|
// if (this.hasSignBtn === 'markdevice') {
|
// this.hasSignBtn = ''
|
// } else {
|
// this.hasSignBtn = 'markdevice'
|
// }
|
|
// break
|
// case 'markroad':
|
// if (this.hasSignBtn === 'markroad') {
|
// this.hasSignBtn = ''
|
// } else {
|
// this.hasSignBtn = 'markroad'
|
// }
|
// break;
|
// case 'markcancel':
|
// if (this.hasSignBtn === 'markcancel') {
|
// this.hasSignBtn = ''
|
// } else {
|
// this.hasSignBtn = 'markcancel'
|
// }
|
// break;
|
default: {
|
let handle = btn.handle;
|
let fn = (this.table[handle]).bind(this.table);
|
if (fn) {
|
let res = fn(this.selectCell.row, this.selectCell.col);
|
if (res) {
|
this.handleSelectCell(res.row, res.col);
|
}
|
}
|
}
|
}
|
} else if(['markdevice','markroad', 'markcancel'].includes(btn.handle)){
|
if (this.hasSignBtn === btn.handle) {
|
this.hasSignBtn = ''
|
} else {
|
this.hasSignBtn = btn.handle
|
}
|
this.selectCell ={
|
row: -1,
|
col: -1
|
}
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
.wrap {
|
display: flex;
|
align-items: start;
|
width: 1200px;
|
}
|
|
.btns {
|
position: absolute;
|
margin-right: 20px;
|
}
|
|
.btn {
|
margin-bottom: 10px;
|
width: 100px;
|
height: 30px;
|
line-height: 30px;
|
text-align: center;
|
color: #fff;
|
background: #6363f5;
|
cursor: pointer;
|
|
&.disable {
|
background: #9696ab;
|
cursor: not-allowed;
|
}
|
&.disable.sign {
|
cursor: pointer;
|
}
|
}
|
|
.table {
|
border-collapse: collapse;
|
margin-left: 120px;
|
background: rgba(1,6,17,1);
|
}
|
|
.cell {
|
margin: 0;
|
padding: 0;
|
}
|
|
.cell.active {
|
background: #6363f5!important;
|
}
|
</style>
|
|
