From 89d83a582dda4d8afb8f099905fa2a3b5a6cb08b Mon Sep 17 00:00:00 2001
From: gaosp <gaosp>
Date: 星期三, 17 一月 2024 00:11:41 +0800
Subject: [PATCH] updatte
---
src/container/Map/Map.vue | 299 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 207 insertions(+), 92 deletions(-)
diff --git a/src/container/Map/Map.vue b/src/container/Map/Map.vue
index 2e0d004..0b2c9b4 100644
--- a/src/container/Map/Map.vue
+++ b/src/container/Map/Map.vue
@@ -1,32 +1,32 @@
<!--
* @Date: 2024-01-05 23:47:53
* @LastEditors: Sneed
- * @LastEditTime: 2024-01-12 22:28:57
+ * @LastEditTime: 2024-01-16 01:03:35
* @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 class="map-container">
+ <div class="table-tool">
+ <slot name="tool"></slot>
+ <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>
+ <span>琛屾暟:</span>
+ <el-input class="input" v-show="status !==2" v-model="rows" />
+ <span>鍒楁暟:</span>
+ <el-input class="input" v-show="status !==2" v-model="cols" />
+ <!-- <div class="plant-name" v-if="status===2">{{plantName}}</div> -->
+ <el-input class="plant-name" v-model="plantName" placeholder="璇疯緭鍏ュ巶鍚�"/>
</div>
- <div class="table" >
+ <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>澧炲姞琛�</div> -->
- <!-- <div>鍒犻櫎琛�</div> -->
- <!-- <div>澧炲姞鍒�</div> -->
- <!-- <div>鍒犻櫎鍒�</div> -->
</div>
<div :style="{width: (cols * height + 'px'),height: rows * height + 'px'}">
<table >
@@ -36,52 +36,29 @@
: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="">
- <div v-show="v.id" class="machine">
- <p>YKX123123213</p>
- <div>
- <div class="img">
- <img src="./img/machine.png" alt="">
- </div>
- <ul>
- <li>
- <img src="./img/sd.png" alt="">
- <div>
- <p>0.00%</p>
- <p>鑳藉姏鍒╃敤鐜�</p>
- </div>
- </li>
- <li>
- <img src="./img/sd.png" alt="">
- <div>
- <p>0.00%</p>
- <p>鑳藉姏鍒╃敤鐜�</p>
- </div>
- </li>
- <li>
- <img src="./img/sd.png" alt="">
- <div>
- <p>0.00%</p>
- <p>鑳藉姏鍒╃敤鐜�</p>
- </div>
- </li>
- </ul>
- </div>
- </div>
-
+ <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>
</td>
- <!-- <td></td> -->
</tr>
- <!-- <tr>
- <td></td>
- </tr> -->
</table>
</div>
</div>
</div>
- <addMachine :id="id" @setmachineId="setmachineId" v-else @close="close"/>
+ <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>
const getParent = (v, layout) => {
@@ -92,12 +69,14 @@
}
}
import mixins from '@/mixins/index'
-import AddMachine from './addMachine.vue'
+// import AddMachine from './addMachine.vue'
+import Device from '../workshop/device.vue'
import {mapGetters} from 'vuex'
export default {
mixins: [mixins],
components: {
- AddMachine
+ // AddMachine,
+ Device
},
props: {
status: {
@@ -112,6 +91,34 @@
},
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() {
@@ -172,12 +179,36 @@
},
immediate: true
},
+ id (val) {
+ if (!val) {
+ this.map = []
+ }else {
+ // getRequest('machineList',{plantId: val}).then(res => {
+ // this.plantDeviceList = res.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
},
@@ -194,9 +225,8 @@
try {
this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
} catch (error) {
-
}
-
+ console.log(this.$route.name)
},
beforeUpdate() {
try {
@@ -214,26 +244,38 @@
}
},
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)
+ async createMap() {
+ let res=true
+ if (this.id) {
+ res = await this.$confirm('鐢熸垚鍦板浘灏嗚鐩栧綋鍓嶆墍鏈夎缃紝纭畾閲嶆柊鐢熸垚?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ })
+ console.log(res)
}
- this.map = data
+ 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
+ }
},
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()
e.stopPropagation()
@@ -243,12 +285,12 @@
if (window.innerWidth - left < 100) {
this.position = {
right: 0,
- top: top - t + 10 + 'px'
+ top: top + 10 + 'px'
}
} else {
this.position = {
left: left + 'px',
- top: top -t + 10 + 'px'
+ top: top + 10 + 'px'
}
}
@@ -318,6 +360,7 @@
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)
}
}
@@ -325,26 +368,62 @@
this.$forceUpdate()
},
addDevice (e,v) {
- if(this.status ===2) return
e.stopPropagation()
this.addStatus = true
+ 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.status === 0) {
+ 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')
console.log(res)
})
- } else if(this.status === 1) {
+ } 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')
console.log(res)
})
@@ -357,20 +436,46 @@
close () {
this.addStatus = false
},
+ saveDevice () {
+ this.setmachineId(this.deviceId)
+ },
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()
+ 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" 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%;
@@ -390,15 +495,18 @@
padding-bottom: 50px;
display: flex;
justify-content: flex-start;
-
- &>div {
- width: 80px;
+ color: #fff;
+ font-size: 12px;
+ align-items: center;
+ &>.input {
+ min-width: 80px;
+ max-width: 200px;
margin-inline: 10px;
}
.plant-name {
width: 120px;
- margin-left: auto;
- margin-right: 30px;
+ margin-left: 20px;
+ // margin-right: 30px;
text-align: center;
line-height: 28px;
background: rgba(23,38,67,0.6);
@@ -411,6 +519,11 @@
}
}
+.table.active {
+ // position: relative;
+ // left: 100%;
+ // animation: move 6s infinite alternate;
+}
.table {
// margin-top: 10px;
// display: flex;
@@ -419,8 +532,9 @@
height: 100%;
position: relative;
overflow-x: scroll;
+
.table-action {
- position: absolute;
+ position: fixed;
z-index: 999;
color: #fff;
width: 100px;
@@ -439,6 +553,7 @@
// table-layout: fixed;
// word-wrap: break-word;
overflow: hidden;
+ border-radius: 10px;
// box-sizing: border-box;
td {
// width: 50px;
--
Gitblit v1.9.3