From e49dcf5091fafc6aa8f91f631d9ef57c11a4500b Mon Sep 17 00:00:00 2001
From: gaosp <gaosp>
Date: 星期六, 20 一月 2024 19:16:59 +0800
Subject: [PATCH] update
---
src/container/Map/Map.vue | 245 ++++++++++++++++++++++++++----------------------
1 files changed, 134 insertions(+), 111 deletions(-)
diff --git a/src/container/Map/Map.vue b/src/container/Map/Map.vue
index d2427e4..2114f82 100644
--- a/src/container/Map/Map.vue
+++ b/src/container/Map/Map.vue
@@ -1,7 +1,7 @@
<!--
* @Date: 2024-01-05 23:47:53
* @LastEditors: Sneed
- * @LastEditTime: 2024-01-20 16:44:55
+ * @LastEditTime: 2024-01-20 17:24:04
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
@@ -12,53 +12,51 @@
<el-button v-show="!id" class="input" type="primary" size="mini" @click="out">閫�鍑�</el-button>
<el-button class="input" type="primary" size="mini" @click="save">淇濆瓨</el-button>
<el-button v-show="id" class="input" type="primary" size="mini" @click="del">鍒犻櫎</el-button>
- <el-button class="input" size="mini" type="primary" v-show="status !==2" @click="createMap">鐢熸垚鍦板浘</el-button>
+ <el-button class="input" size="mini" type="primary" v-show="status !== 2" @click="createMap">鐢熸垚鍦板浘</el-button>
<span>琛屾暟:</span>
- <el-input style="width: 30px;" class="input" v-show="status !==2" v-model="rows" />
+ <el-input style="width: 30px;" class="input" v-show="status !== 2" v-model="rows" />
<span>鍒楁暟:</span>
- <el-input style="width: 30px;" class="input" v-show="status !==2" v-model="cols" />
+ <el-input style="width: 30px;" class="input" v-show="status !== 2" v-model="cols" />
<!-- <div class="plant-name" v-if="status===2">{{plantName}}</div> -->
<span>鍚嶇О:</span>
- <el-input class="plant-name" v-model="plantName" placeholder="璇疯緭鍏ュ巶鍚�"/>
+ <el-input class="plant-name" v-model="plantName" placeholder="璇疯緭鍏ュ巶鍚�" />
</div>
- <div class="table" :class="$route.name ==='preview' ? 'active' : ''" >
+ <div class="table" :class="$route.name === 'preview' ? 'active' : ''">
<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 @click="sign(2)">璁惧</div>
+ <div @click="sign(0)">绉婚櫎</div>
</div>
- <div :style="{width: (cols * height + 'px'),height: rows * height + 'px'}">
- <table >
+ <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"
+ <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">
- <img @click="addDevice($event,v)" @mousedown="e => e.stopPropagation()" v-if="v.type ===2 && status!==2 && !v.id" src="./img/+.png" alt="娣诲姞鏈哄簥" title="娣诲姞鏈哄簥">
+ <img @click="addDevice($event, v)" @mousedown="e => e.stopPropagation()"
+ v-if="v.type === 2 && status !== 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>
+ :plantDeviceList="plantDeviceList" ::info="info"></Device>
</td>
</tr>
</table>
</div>
</div>
</div>
- <el-dialog
- title="娣诲姞璁惧"
- :close-on-click-modal="false"
- width="20%"
- :visible.sync="addStatus">
- <el-select class="wkshoplist" clearable v-model="deviceId" placeholder="璇烽�夋嫨">
- <el-option 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 title="鏀剧疆璁惧" :close-on-click-modal="false" width="20%" :visible.sync="addStatus">
+ <el-select class="wkshoplist" clearable v-model="deviceId" placeholder="璇烽�夋嫨">
+ <el-option 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>
</div>
</template>
<script>
@@ -69,10 +67,9 @@
return v
}
}
-import mixins from '@/mixins/index'
-// import AddMachine from './addMachine.vue'
+import mixins from '@/mixins/index'
import Device from '../workshop/device.vue'
-import {mapGetters} from 'vuex'
+import { mapGetters } from 'vuex'
export default {
mixins: [mixins],
components: {
@@ -91,7 +88,7 @@
type: String,
},
id: {
- type: [Number,String]
+ type: [Number, String]
}
},
computed: {
@@ -100,18 +97,18 @@
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
+ return this.map[x][y].id && (start.rowIndex + start.rowspan - 1) === x1 && (start.colIndex + start.colspan - 1) === y1
}
} catch (error) {
return false
}
},
- machineid () {
+ 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) {
+ if (this.map[x][y].id && (start.rowIndex + start.rowspan - 1) === x1 && (start.colIndex + start.colspan - 1) === y1) {
return start.id
} else {
return ''
@@ -131,12 +128,12 @@
map: null, // 鍦板浘鏁版嵁
addStatus: false,
position: {},
- selection:[],
+ selection: [],
showAction: false,
tdMounseDown: false,
- range: {x: '',x1: '',y: '',y1: ''},
+ range: { x: '', x1: '', y: '', y1: '' },
currentAdd: {},
- colgroups:[]
+ colgroups: []
}
},
watch: {
@@ -169,21 +166,21 @@
}
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)
+ 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 () {
+ handler() {
this.plantName = this.name
},
immediate: true
},
- id (val) {
+ id(val) {
if (!val) {
this.map = []
- }else {
+ } else {
// getRequest('machineList',{plantId: val}).then(res => {
// this.plantDeviceList = res.list.map(item => {
// return {
@@ -195,7 +192,7 @@
}
},
currentMap: {
- handler () {
+ handler() {
console.log(this.currentMap)
if (!this.currentMap || this.currentMap.length === 0) return
if (this.currentMap.length > 0) this.map = this.currentMap
@@ -203,24 +200,24 @@
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: })
+ 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 () {
+ map() {
this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
}
},
mounted() {
this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
- this.$el.addEventListener('mouseup',e => {
- if(this.status ===2) return
+ this.$el.addEventListener('mouseup', e => {
+ if (this.status === 2) return
this.tdMounseDown = false
})
try {
@@ -233,20 +230,20 @@
try {
this.$el.querySelector('table').removeEventListener('contextmenu', this.contextmenu)
} catch (error) {
-
+
}
-
+
},
updated() {
try {
this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
} catch (error) {
-
+
}
},
methods: {
async createMap() {
- let res=true
+ let res = true
if (this.id) {
res = await this.$confirm('鐢熸垚鍦板浘灏嗚鐩栧綋鍓嶆墍鏈夎缃紝纭畾閲嶆柊鐢熸垚?', '鎻愮ず', {
confirmButtonText: '纭畾',
@@ -275,7 +272,7 @@
},
contextmenu(e) {
console.log(e)
- if(this.status ===2) return
+ if (this.status === 2) return
if (this.range.x === undefined) return
// if (this.range.x !=='') return
e.preventDefault()
@@ -294,19 +291,19 @@
top: top + 10 + 'px'
}
}
-
+
},
onMousedown(e, v) {
- if(this.status ===2) return
+ 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)
+ 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
@@ -316,37 +313,37 @@
let arr = [...(this.map[i])]
arr[j].rowspan = x1 - x + 1
arr[j].colspan = y1 - y + 1
- this.$set(this.map,i,arr)
+ 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.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.$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 () {
+ 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) {
+ 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)
+ 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.$set(this.map, i, arr)
}
}
}
@@ -355,32 +352,32 @@
// setRange({x,y,x1:x,y1: y})
// setShowMenu(false)
},
- sign (type) {
+ sign(type) {
const { x, x1, y, y1 } = this.range
- for(var i=x;i<=x1;i++) {
- for(var j=y;j<=y1;j++) {
+ for (var i = x; i <= x1; i++) {
+ for (var j = y; j <= y1; j++) {
let arr = [...(this.map[i])]
arr[j].type = type
arr[j].id = undefined
- this.$set(this.map,i,arr)
+ this.$set(this.map, i, arr)
}
}
this.showAction = false
this.$forceUpdate()
},
- addDevice (e,v) {
+ addDevice(e, v) {
e.stopPropagation()
this.addStatus = true
this.deviceId = ''
- this.currentAdd = v
+ this.currentAdd = v
},
- del () {
+ del() {
this.$confirm('纭畾瑕佹案涔呭垹闄ゆ鍘傛埧锛屽叧鑱旂殑璁惧灏嗛噸缃�?', '鎻愮ず', {
confirmButtonText: '纭畾',
cancelButtonText: '鍙栨秷',
type: 'warning'
}).then(res => {
- this.$http.postJson('/plant/delete',{
+ this.$http.postJson('/plant/delete', {
ids: [this.id]
}).then(res => {
this.$message({
@@ -400,54 +397,54 @@
message: '鍙栨秷鍒犻櫎'
})
})
-
+
},
- save () {
+ save() {
if (!this.id) {
- this.$http.postJson('/plant/save',{
+ this.$http.postJson('/plant/save', {
name: this.plantName,
gridSetting: JSON.stringify(this.map)
}).then(res => {
this.$message({
- type: 'info',
+ type: 'info',
message: '鎿嶄綔鎴愬姛'
})
this.$emit('out')
console.log(res)
})
} else {
- this.$http.postJson('/plant/modify',{
+ this.$http.postJson('/plant/modify', {
name: this.plantName,
gridSetting: JSON.stringify(this.map),
id: this.id
}).then(res => {
this.$message({
- type: 'info',
+ type: 'info',
message: '鎿嶄綔鎴愬姛'
})
this.$emit('out')
console.log(res)
})
}
-
+
},
- out () {
+ out() {
this.$emit('out')
},
- close () {
+ close() {
this.addStatus = false
},
- saveDevice () {
+ saveDevice() {
this.setmachineId(this.deviceId)
},
- setmachineId (id) {
+ 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.$set(this.map, i, arr)
this.$message({
type: 'info',
message: '鎿嶄綔鎴愬姛'
@@ -464,23 +461,25 @@
}
</script>
<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%;
@@ -499,18 +498,20 @@
color: #fff;
font-size: 12px;
align-items: center;
+
&>.input {
min-width: 80px;
max-width: 200px;
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);
+ background: rgba(23, 38, 67, 0.6);
border-radius: 14px;
overflow: hidden;
color: #F7F8FA;
@@ -525,6 +526,7 @@
// left: 100%;
// animation: move 6s infinite alternate;
}
+
.table {
// margin-top: 10px;
// display: flex;
@@ -533,16 +535,18 @@
height: 100%;
position: relative;
overflow-x: scroll;
-
+
.table-action {
position: fixed;
z-index: 999;
color: #fff;
width: 100px;
+
div {
margin-top: 4px;
cursor: pointer;
}
+
div:hover {
color: #68D9FF;
}
@@ -555,6 +559,7 @@
// word-wrap: break-word;
overflow: hidden;
border-radius: 10px;
+
// box-sizing: border-box;
td {
// width: 50px;
@@ -563,17 +568,20 @@
border: 1px solid #1662DB;
vertical-align: middle;
text-align: center;
- & > img {
+
+ &>img {
width: 20px;
height: 20px;
cursor: pointer;
}
+
.machine {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
- & > p {
+
+ &>p {
margin-top: 20px;
color: #E9FFFF;
text-shadow: 0px 1px 11px #549BD4;
@@ -582,14 +590,16 @@
-webkit-text-fill-color: transparent;
text-align: center;
}
- & > div {
+
+ &>div {
flex: 1 1 auto;
margin-top: 20px;
display: flex;
align-items: center;
margin-bottom: 20px;
-
+
overflow: hidden;
+
.img {
width: 50%;
height: 100%;
@@ -597,6 +607,7 @@
border: 1px solid #444C55;
border-radius: 10px;
position: relative;
+
img {
position: absolute;
top: 50%;
@@ -605,6 +616,7 @@
width: 80%;
}
}
+
ul {
flex: 1 1 auto;
height: 100%;
@@ -614,18 +626,23 @@
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;;
+
+ &>div {
+ margin-left: 20px;
+ ;
}
+
p {
color: #E9FFFF;
text-shadow: 0px 1px 11px #549BD4;
}
+
img {
width: 40px;
height: 40px;
@@ -633,36 +650,42 @@
}
}
}
-
+
}
}
+
td.active {
- background: #68D9FF!important;
+ 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>
+}</style>
--
Gitblit v1.9.3