<!--
|
* @Date: 2023-12-20 20:24:53
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-01-02 20:35:01
|
* @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" class="wrap" @mouseup="mouseup">
|
<el-row>
|
<el-col :xs="24" :sm="2" :md="2" :lg="2" :xl="2">
|
<el-input v-model.number="rows" placeholder="行数"></el-input>
|
</el-col>
|
<el-col style="margin-left: 14px;" :xs="24" :sm="2" :md="2" :lg="2" :xl="2">
|
<el-input v-model.number="cols" placeholder="列数"></el-input>
|
</el-col>
|
<el-col style="margin-left: 14px;" :xs="24" :sm="2" :md="2" :lg="2" :xl="2">
|
<el-button @click="createMap">生成厂房地图</el-button>
|
</el-col>
|
</el-row>
|
<div>
|
<!-- <el-input v-model.number="rows"></el-input> -->
|
<!-- <el-input v-model.number="cols"></el-input> -->
|
<!-- <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>
|
<div class="table-wrap">
|
<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>
|
</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
|
}
|
},
|
mounted () {
|
document.querySelector('body').addEventListener('mouseup', () => {
|
if (this.hasSignBtn) {
|
this.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 ? `24px` : cell.type === 1 ? `${50}px` : `${50}px`,
|
height: cell.type === 0 ? `24px` : cell.type === 1 ? `${50}px` : `${50}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 {
|
width: 100%;
|
height: 100%;;
|
background: #000005;
|
}
|
|
.btns {
|
display: flex;
|
margin-top: 20px;
|
}
|
|
.btn {
|
margin-left: 10px;
|
width: 100px;
|
line-height: 40px;
|
border-radius: 10px;
|
text-align: center;
|
color: #fff;
|
background: #6363f5;
|
cursor: pointer;
|
color: #fff;
|
&.disable {
|
background: #9696ab;
|
cursor: not-allowed;
|
}
|
&.disable.sign {
|
cursor: pointer;
|
}
|
}
|
.btn:hover {
|
color: #000;
|
}
|
.btn:focus {
|
color: inherit;
|
background: inherit;
|
border-color: inherit;
|
}
|
.table-wrap {
|
display: flex;
|
justify-content: center;
|
}
|
.table {
|
margin-top: 20px;
|
border-collapse: collapse;
|
background: rgba(1,6,17,1);
|
border-radius: 20px;
|
overflow: hidden;
|
}
|
|
.cell {
|
margin: 0;
|
padding: 0;
|
}
|
|
.cell.active {
|
background: #6363f5!important;
|
}
|
</style>
|
