<!--
|
* @Date: 2024-01-05 23:47:53
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-03-10 21:13:23
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
|
-->
|
<template>
|
<div class="map">
|
<div class="map-container">
|
<div class="table-tool">
|
<slot name="tool"></slot>
|
<!-- <el-button v-show="!id" class="input" type="ghost" size="mini" @click="out">退出</el-button> -->
|
|
<!-- <el-button v-show="id" class="input" type="ghost" size="mini" @click="del">删除该地图</el-button> -->
|
<!-- <span>行数:</span> -->
|
<!-- <el-input style="width: 70px;" class="input" v-show="status !== 2" v-model="rows" /> -->
|
<!-- <span>列数:</span> -->
|
<!-- <el-input style="width: 70px;" class="input" v-show="status !== 2" v-model="cols" /> -->
|
<!-- <div class="plant-name" v-if="status===2">{{plantName}}</div> -->
|
<span>名称:</span>
|
<el-input style="width: 150px;" class="input" v-model="plantName" placeholder="请输入地图名称" />
|
<el-button class="input" type="ghost" size="mini" @click="save">保存</el-button>
|
<span class="tiptext" >放置设备的单元格至少为8行9列</span>
|
<!-- <el-button class="input" size="mini" type="primary" v-show="status !== 2" @click="createMap">生成地图</el-button> -->
|
</div>
|
<div class="table" :class="$route.name === 'preview' ? 'active' : ''">
|
<div class="table-actions" :style="position" v-show="showAction">
|
<div @click="merge">合并</div>
|
<div @click="split">拆分</div>
|
<div @click="addRow">增加行</div>
|
<div @click="addCol">增加列</div>
|
<div @click="delRow">删除行</div>
|
<div @click="delCol">删除列</div>
|
<div @click="sign(1)">过道</div>
|
<div @click="sign(2)">设备</div>
|
<div @click="sign(0)">移除</div>
|
</div>
|
<div :style="{ width: (cols * height + 'px'), height: rows * height + 'px' }">
|
<table>
|
<tr v-for="(item, index) in map" :key="index">
|
<td v-if="v.rowspan !== 0 && v.colspan !== 0" :width="v.colspan * height + 'px'"
|
:height="v.rowspan * height + '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">
|
<div class="td-div"
|
:style="{ width: v.colspan * height - 2 + 'px', height: v.rowspan * height - 2 + 'px', overflow: 'hidden' }">
|
<img @click="addDevice($event, v)" @mousedown="e => e.stopPropagation()"
|
v-if="v.type === 2 && !v.id" src="./img/+.png" alt="添加机床"
|
title="添加机床">
|
<Device v-if="v.id" :id="v.id" style="width: 100%;height: 100%;"
|
:deviceList="deviceList" :plantDeviceList="plantDeviceList" ::info="info"></Device>
|
</div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
<el-dialog class="add-device" title="放置设备" top="94px" :close-on-click-modal="false" width="400px"
|
:visible.sync="addStatus" @close="addStatus = false">
|
<el-select class="wkshoplist" clearable v-model="deviceId" placeholder="请选择">
|
<el-option v-show="!hasPushed.includes(item.machineId)" v-for="item in deviceList" :key="item.machineId"
|
:label="item.machineName" :value="item.machineId">
|
</el-option>
|
</el-select>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="mini" type="primary" style="background-color: #409EFF;" @click="saveDevice">保存</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog class="add-device" title="生成地图" top="94px" :close-on-click-modal="false" width="400px"
|
:visible.sync="showMapSet" :show-close="true" @close="closeCreate">
|
<div>
|
<p>
|
<span>行数:</span>
|
<el-input style="width: 100px;" class="input" v-model="rows" />
|
</p>
|
<p style="margin-top: 20px;">
|
<span>列数:</span>
|
<el-input style="width: 100px;" class="input" v-model="cols" />
|
</p>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="mini" type="primary" style="background-color: #409EFF;" @click="createMap">生成地图</el-button>
|
</span>
|
</el-dialog>
|
</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 Device from '../workshop/device.vue'
|
import { mapGetters } from 'vuex'
|
import { getRequest, getUrl } from '@/api/Api'
|
export default {
|
mixins: [mixins],
|
components: {
|
// AddMachine,
|
Device
|
},
|
props: {
|
currentMap: {
|
default: []
|
},
|
name: {
|
type: String,
|
},
|
id: {
|
type: [Number, String]
|
}
|
},
|
computed: {
|
showEdit() {
|
try {
|
const { x, x1, y, y1 } = this.range
|
if (this.range && x && x1 && y && y1) {
|
let start = this.map[x][y]
|
return this.map[x][y].id && (start.rowIndex + start.rowspan - 1) === x1 && (start.colIndex + start.colspan - 1) === y1
|
}
|
} catch (error) {
|
return false
|
}
|
},
|
machineid() {
|
try {
|
const { x, x1, y, y1 } = this.range
|
if (this.range && x && x1 && y && y1) {
|
let start = this.map[x][y]
|
if (this.map[x][y].id && (start.rowIndex + start.rowspan - 1) === x1 && (start.colIndex + start.colspan - 1) === y1) {
|
return start.id
|
} else {
|
return ''
|
}
|
}
|
} catch (error) {
|
return ''
|
}
|
}
|
},
|
data() {
|
return {
|
showMapSet: false,
|
height: 0,
|
plantName: '',
|
rows: 20,
|
cols: 50,
|
map: null, // 地图数据
|
addStatus: false,
|
position: {},
|
selection: [],
|
showAction: false,
|
tdMounseDown: false,
|
range: { x: '', x1: '', y: '', y1: '' },
|
currentAdd: {},
|
colgroups: [],
|
hasPushed: [],
|
}
|
},
|
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
|
},
|
id(val) {
|
if (!val) {
|
this.map = []
|
} else {
|
getRequest('machineList',{plantId: val}).then(res => {
|
this.plantDeviceList = res.data.list.map(item => {
|
return {
|
machineId: item.id,
|
machineName: item.machineName
|
}
|
}) || []
|
})
|
}
|
},
|
currentMap: {
|
handler() {
|
console.log(this.currentMap)
|
if (!this.currentMap || this.currentMap.length === 0) return
|
if (this.currentMap.length > 0) this.map = this.currentMap
|
this.rows = this.currentMap.length;
|
this.cols = this.currentMap[0].length;
|
if (this.$route.name === 'preview') {
|
this.$nextTick(() => {
|
let { width } = document.querySelector('.table div').getBoundingClientRect()
|
console.log(document.querySelector('.table div').getBoundingClientRect())
|
// document.querySelector('.table').scrollLeft
|
// document.querySelector('.table').scrollTo({left: })
|
})
|
}
|
|
},
|
immediate: true
|
},
|
map() {
|
this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
|
}
|
},
|
created () {
|
if (!this.id) {
|
this.showMapSet = true
|
}
|
},
|
mounted() {
|
this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
|
this.$el.addEventListener('mouseup', e => {
|
// if (this.status === 2) return
|
this.tdMounseDown = false
|
})
|
try {
|
this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
|
} catch (error) {
|
}
|
console.log(this.$route.name)
|
},
|
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: {
|
delRow () {
|
console.log(this.selection,this.select,this.map)
|
if (this.selection.length == 1 && this.selection[0].rowspan ==1 && this.selection[0].colspan == 1) {
|
let rowIndex = this.selection[0].rowIndex
|
let flag = this.map[rowIndex].some(v => v.rowspan != 1 || v.colspan != 1)
|
if (flag) {
|
this.$message({
|
type: 'error',
|
message: '有合并行不可删除'
|
});
|
} else {
|
this.map.splice(rowIndex,1)
|
this.map.forEach((v,i) => {
|
if (i>=rowIndex) {
|
v.forEach((c,j) => {
|
c.rowIndex -= 1
|
})
|
}
|
})
|
this.showAction = false
|
}
|
} else {
|
this.$message({
|
type: 'error',
|
message: '有合并行不可删除'
|
});
|
}
|
},
|
delCol () {
|
if (this.selection.length == 1 && this.selection[0].rowspan ==1 && this.selection[0].colspan == 1) {
|
let colIndex = this.selection[0].colIndex
|
let flag = this.map.some(v => v[colIndex].rowspan != 1 || v[colIndex].colspan != 1)
|
if (flag) {
|
this.$message({
|
type: 'error',
|
message: '有合并行不可删除'
|
});
|
} else {
|
this.map.forEach(v=>{
|
v.splice(colIndex,1)
|
})
|
this.map.forEach((v,i) => {
|
v.forEach((c,j) => {
|
if (j >= colIndex) {
|
c.colIndex -= 1
|
}
|
})
|
})
|
this.showAction = false
|
}
|
} else {
|
this.$message({
|
type: 'error',
|
message: '有合并行不可删除'
|
});
|
}
|
},
|
back() {
|
this.$router.push({
|
name: 'mapList'
|
})
|
},
|
closeCreate () {
|
if (!this.map) {
|
this.$router.push({
|
name: 'mapList'
|
})
|
}
|
this.showMapSet = false
|
},
|
addRow() {
|
this.rows += 1
|
let row = []
|
for (var i = 0; i < this.cols; i++) {
|
row.push({
|
rowspan: 1,
|
colspan: 1,
|
rowIndex: this.rows - 1,
|
colIndex: i,
|
type: ''
|
})
|
}
|
this.map.push(row)
|
this.showAction = false
|
this.$forceUpdate()
|
},
|
addCol() {
|
this.cols += 1
|
for (var i = 0; i < this.rows; i++) {
|
this.map[i].push(
|
{
|
rowspan: 1,
|
colspan: 1,
|
rowIndex: i,
|
colIndex: this.cols - 1,
|
type: ''
|
}
|
)
|
}
|
this.showAction = false
|
},
|
async createMap() {
|
let res = true
|
if (this.id) {
|
res = await this.$confirm('生成地图将覆盖当前所有设置，确定重新生成?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
console.log(res)
|
}
|
if (res || res === 'confirm') {
|
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
|
this.showMapSet = false
|
}
|
},
|
contextmenu(e) {
|
console.log(e)
|
// if (this.status === 2) return
|
if (this.range.x === undefined) 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 + 10 + 'px'
|
}
|
} else {
|
this.position = {
|
left: left + 'px',
|
top: top + 10 + 'px'
|
}
|
}
|
if (window.innerHeight - top < 300) {
|
this.position.top = window.innerHeight - 300 + 'px'
|
}
|
},
|
onMousedown(e, v) {
|
console.log('-----', v)
|
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) {
|
//if(type == 2){//2:设备
|
//console.log('hh',this);
|
const { x, x1, y, y1 } = this.range
|
//console.log(x1-x,y1-y);
|
//10*10单元格才可以放设备
|
var line = x1-x + 1;//行数
|
var col = y1-y + 1;//列数
|
|
console.log('行数=',line)
|
console.log('列数=',col)
|
if(type == 2 && (line < 8 || col<9)){
|
this.$message({
|
type: 'error',
|
message: '单元格较小，无法展示设备，请至少合并8行9列单元格.当前为'+line+'行'+col+'列'
|
});
|
return;
|
}
|
console.log('contnuye le');
|
|
for (var i = x; i <= x1; i++) {
|
for (var j = y; j <= y1; j++) {
|
|
let arr = [...(this.map[i])]
|
/*
|
if (type == 2 && (arr[j].colspan < 4 || arr[j].rowspan < 4)) { //x1-x<3 || y1-y<3
|
|
return this.$message({
|
type: 'error',
|
message: '单元格较小，无法展示设备，请至少合并4行4列单元格。'
|
})
|
|
}
|
*/
|
arr[j].type = type
|
arr[j].id = undefined
|
this.$set(this.map, i, arr)
|
|
}
|
|
}
|
|
//}
|
this.showAction = false
|
this.$forceUpdate()
|
},
|
addDevice(e, v) {
|
e.stopPropagation()
|
this.addStatus = true
|
let hasPushed = []
|
this.map.forEach(item => {
|
item.forEach(v => {
|
if (v.id) {
|
hasPushed.push(v.id)
|
}
|
})
|
})
|
this.hasPushed = hasPushed
|
this.deviceId = ''
|
this.currentAdd = v
|
},
|
del() {
|
this.$confirm('确定要永久删除此地图，关联的设备将重置?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(res => {
|
this.$http.postJson('/plant/delete', {
|
ids: [this.id]
|
}).then(res => {
|
this.$message({
|
type: 'info',
|
message: '删除成功'
|
})
|
this.$emit('out')
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '删除失败'
|
})
|
})
|
}, () => {
|
this.$message({
|
type: 'info',
|
message: '取消删除'
|
})
|
})
|
|
},
|
save() {
|
if (!this.id) {
|
this.$http.postJson('/plant/save', {
|
name: this.plantName,
|
gridSetting: JSON.stringify(this.map)
|
}).then(res => {
|
this.$message({
|
type: 'info',
|
message: '操作成功'
|
})
|
this.$emit('out')
|
})
|
} else {
|
this.$http.postJson('/plant/modify', {
|
name: this.plantName,
|
gridSetting: JSON.stringify(this.map),
|
id: this.id
|
}).then(res => {
|
this.$message({
|
type: 'info',
|
message: '操作成功'
|
})
|
this.$emit('out')
|
})
|
}
|
|
},
|
out() {
|
this.$emit('out')
|
},
|
close() {
|
this.addStatus = false
|
},
|
saveDevice() {
|
this.setmachineId(this.deviceId)
|
},
|
setmachineId(id) {
|
if (!id) return
|
try {
|
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.$message({
|
type: 'info',
|
message: '操作成功'
|
})
|
} catch (error) {
|
this.$message({
|
type: 'info',
|
message: '操作失败，请重试'
|
})
|
}
|
this.addStatus = false
|
}
|
},
|
}
|
</script>
|
<style lang="scss">
|
#app .add-device .el-dialog {
|
height: 300px;
|
}
|
</style>
|
<style lang="scss" scoped>
|
@keyframes move {
|
0% {
|
// left: 100%;
|
// transform: translate(0,0);
|
// scrollTop: 0
|
}
|
|
100% {
|
// left: 100%;
|
// transform: translate(-100%,0);
|
// scrollTop: 100%
|
}
|
}
|
|
.map {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
|
.map-container {
|
width: 100%;
|
height: 100%;
|
padding: 20px;
|
overflow: hidden;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
background: rgba(0,0,0,.6);
|
}
|
}
|
|
.table-tool {
|
padding-bottom: 50px;
|
display: flex;
|
justify-content: flex-start;
|
color: #fff;
|
font-size: 12px;
|
align-items: center;
|
|
&>.input {
|
margin-inline: 10px;
|
}
|
|
.plant-name {
|
width: 120px;
|
margin-left: 20px;
|
// 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;
|
}
|
|
.tiptext {
|
|
margin-left: 20px;
|
|
line-height: 28px;
|
border-radius: 14px;
|
color: red;
|
font-size: 18px;
|
|
}
|
}
|
|
.table.active {
|
// position: relative;
|
// left: 100%;
|
// animation: move 6s infinite alternate;
|
}
|
|
.table {
|
// margin-top: 10px;
|
// display: flex;
|
// justify-content: flex-start;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
overflow-x: scroll;
|
|
.table-actions {
|
position: fixed;
|
z-index: 999;
|
color: #fff;
|
width: 100px;
|
background: rgba(22, 26, 25, .8);
|
border: 2px solid #416071;
|
color: #ADAEAE;
|
text-align: center;
|
|
div {
|
cursor: pointer;
|
padding: 8px 0;
|
}
|
|
div:hover {
|
color: #68D9FF;
|
}
|
}
|
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
table-layout: fixed;
|
word-wrap: break-word;
|
overflow: hidden;
|
border-radius: 10px;
|
display: table;
|
|
// box-sizing: border-box;
|
td {
|
// width: 50px;
|
// height: 50px;
|
box-sizing: border-box;
|
border: 1px solid #1662DB;
|
vertical-align: middle;
|
text-align: center;
|
|
.td-div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
&>img {
|
width: 20px;
|
height: 20px;
|
cursor: pointer;
|
}
|
}
|
|
|
.machine {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
&>p {
|
margin-top: 20px;
|
color: #E9FFFF;
|
text-shadow: 0px 1px 11px #549BD4;
|
background: linear-gradient(180deg, #9AFEFE 0%, #4B78CD 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
text-align: center;
|
}
|
|
&>div {
|
flex: 1 1 auto;
|
margin-top: 20px;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
.img {
|
width: 50%;
|
height: 100%;
|
margin-left: 20px;
|
border: 1px solid #444C55;
|
border-radius: 10px;
|
position: relative;
|
|
img {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 80%;
|
}
|
}
|
|
ul {
|
flex: 1 1 auto;
|
height: 100%;
|
margin-left: 20px;
|
list-style: none;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-around;
|
|
li {
|
width: 100%;
|
display: flex;
|
font-size: 12px;
|
align-items: center;
|
|
&>div {
|
margin-left: 20px;
|
;
|
}
|
|
p {
|
color: #E9FFFF;
|
text-shadow: 0px 1px 11px #549BD4;
|
}
|
|
img {
|
width: 40px;
|
height: 40px;
|
}
|
}
|
}
|
}
|
|
}
|
}
|
|
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>
|
