From da8761b8f8cad5fe6825ef28c3b877816eeea59e Mon Sep 17 00:00:00 2001
From: gaosp <gaosp>
Date: 星期六, 13 一月 2024 22:24:14 +0800
Subject: [PATCH] update
---
src/container/Map/Map.vue | 368 ++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 284 insertions(+), 84 deletions(-)
diff --git a/src/container/Map/Map.vue b/src/container/Map/Map.vue
index 77297aa..2e0d004 100644
--- a/src/container/Map/Map.vue
+++ b/src/container/Map/Map.vue
@@ -1,41 +1,87 @@
<!--
* @Date: 2024-01-05 23:47:53
* @LastEditors: Sneed
- * @LastEditTime: 2024-01-06 16:12:18
+ * @LastEditTime: 2024-01-12 22:28:57
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
<div class="map">
- <div class="table-tool" v-if="status !== 2">
- <el-button @click="save">淇濆瓨</el-button>
- <el-button @click="out">閫�鍑�</el-button>
- <el-input v-show="status !== 2" v-model="plantName" placeholder="鍘傚悕"/>
- <el-input v-show="status ===0 && !map" v-model="rows" />
- <el-input v-show="status ===0 && !map" v-model="cols" />
- <el-button v-show="status ===0 && !map" @click="createMap">鐢熸垚鍦板浘</el-button>
- </div>
- <div class="table" >
- <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 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>
- <table :style="{ width: 50 / 19 * rows + 'rem', height: 50 / 19 * cols + 'rem' }">
- <tr v-for="(item, index) in mapNew" :key="index">
- <td v-if="v.rowspan !==0 && v.colspan!==0" :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" src="./img/+.png" alt="">
- </td>
- </tr>
- </table>
+ <div class="table" >
+ <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 >
+ <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">
+ <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>
+
+ </td>
+ <!-- <td></td> -->
+ </tr>
+ <!-- <tr>
+ <td></td>
+ </tr> -->
+ </table>
+ </div>
+ </div>
</div>
+ <addMachine :id="id" @setmachineId="setmachineId" v-else @close="close"/>
</div>
+
</template>
<script>
const getParent = (v, layout) => {
@@ -45,7 +91,14 @@
return v
}
}
+import mixins from '@/mixins/index'
+import AddMachine from './addMachine.vue'
+import {mapGetters} from 'vuex'
export default {
+ mixins: [mixins],
+ components: {
+ AddMachine
+ },
props: {
status: {
type: Number,
@@ -58,31 +111,24 @@
type: String,
},
id: {
- type: Number
+ type: [Number,String]
}
- },
- computed: {
- mapNew () {
- if (this.currentMap.length > 0) return this.currentMap
- if (!this.map) return []
- let arr = this.map.filter(item => item.rowspan !== 0 || item.colspan !== 0)
- return arr
- },
- tableW () {
- this.mapNew
- },
},
data() {
return {
+ height: 0,
plantName: '',
- rows: 10,
- cols: 10,
+ rows: 20,
+ cols: 50,
map: null, // 鍦板浘鏁版嵁
+ addStatus: false,
position: {},
+ selection:[],
showAction: false,
tdMounseDown: false,
- selection: [],
- range: {x: '',x1: '',y: '',y1: ''}
+ range: {x: '',x1: '',y: '',y1: ''},
+ currentAdd: {},
+ colgroups:[]
}
},
watch: {
@@ -125,6 +171,18 @@
this.plantName = this.name
},
immediate: true
+ },
+ currentMap: {
+ handler () {
+ 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;
+ },
+ immediate: true
+ },
+ map () {
+ this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
}
},
mounted() {
@@ -133,16 +191,27 @@
if(this.status ===2) return
this.tdMounseDown = false
})
- this.map = this.currentMap
- if (this.id) {
- this.getmachineList()
+ try {
+ this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
+ } catch (error) {
+
}
+
},
beforeUpdate() {
- this.$el.querySelector('table').removeEventListener('contextmenu', this.contextmenu)
+ try {
+ this.$el.querySelector('table').removeEventListener('contextmenu', this.contextmenu)
+ } catch (error) {
+
+ }
+
},
updated() {
- this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
+ try {
+ this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
+ } catch (error) {
+
+ }
},
methods: {
createMap() {
@@ -163,17 +232,26 @@
this.map = data
},
contextmenu(e) {
+ console.log(e)
if(this.status ===2) return
// if (this.range.x !=='') return
e.preventDefault()
e.stopPropagation()
let { pageX: left, pageY: top } = e
this.showAction = true
- let { top: t } = document.querySelector('.map').getBoundingClientRect()
- this.position = {
- left: left + 'px',
- top: top - t + 10 + 'px'
+ let { top: t } = document.querySelector('.table').getBoundingClientRect()
+ if (window.innerWidth - left < 100) {
+ this.position = {
+ right: 0,
+ top: top - t + 10 + 'px'
+ }
+ } else {
+ this.position = {
+ left: left + 'px',
+ top: top -t + 10 + 'px'
+ }
}
+
},
onMousedown(e, v) {
if(this.status ===2) return
@@ -229,9 +307,10 @@
}
}
}
- setData(layoutNew)
- setRange({x,y,x1:x,y1: y})
- setShowMenu(false)
+ this.showAction = false
+ // setData(layoutNew)
+ // setRange({x,y,x1:x,y1: y})
+ // setShowMenu(false)
},
sign (type) {
const { x, x1, y, y1 } = this.range
@@ -248,30 +327,25 @@
addDevice (e,v) {
if(this.status ===2) return
e.stopPropagation()
- alert('娣诲姞璁惧')
- },
- getmachineList () {
- this.$http.post('/machine/list', {
- status: '',
- plantId: this.id
- }).then(res => {
- console.log(res)
- })
+ this.addStatus = true
+ this.currentAdd = v
},
save () {
if (this.status === 0) {
- this.$http.post('/plant/save',{
+ this.$http.postJson('/plant/save',{
name: this.plantName,
gridSetting: JSON.stringify(this.map)
}).then(res => {
+ this.$emit('out')
console.log(res)
})
} else if(this.status === 1) {
- this.$http.post('/plant/modify',{
+ this.$http.postJson('/plant/modify',{
name: this.plantName,
gridSetting: JSON.stringify(this.map),
id: this.id
}).then(res => {
+ this.$emit('out')
console.log(res)
})
}
@@ -279,6 +353,19 @@
},
out () {
this.$emit('out')
+ },
+ close () {
+ this.addStatus = false
+ },
+ 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()
}
},
}
@@ -287,12 +374,20 @@
.map {
width: 100%;
height: 100%;
- overflow: auto;
position: relative;
+ .map-container {
+ width: 100%;
+ height: 100%;
+ padding: 20px;
+ overflow: hidden;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ }
}
.table-tool {
- margin-top: 10px;
+ padding-bottom: 50px;
display: flex;
justify-content: flex-start;
@@ -300,43 +395,129 @@
width: 80px;
margin-inline: 10px;
}
+ .plant-name {
+ width: 120px;
+ margin-left: auto;
+ 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;
+ }
}
.table {
- padding: 10px;
- margin-top: 10px;
- display: flex;
- justify-content: flex-start;
- overflow: auto;
-
-
+ // margin-top: 10px;
+ // display: flex;
+ // justify-content: flex-start;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ overflow-x: scroll;
.table-action {
position: absolute;
z-index: 999;
color: #fff;
-
+ width: 100px;
div {
margin-top: 4px;
cursor: pointer;
}
+ div:hover {
+ color: #68D9FF;
+ }
}
table {
- border: 1px solid #1662DB;
+ width: 100%;
border-collapse: collapse;
- table-layout: fixed;
- word-wrap: break-word;
-
+ // table-layout: fixed;
+ // word-wrap: break-word;
+ overflow: hidden;
+ // box-sizing: border-box;
td {
- width: 50px;
- height: 50px;
+ // width: 50px;
+ // height: 50px;
+ box-sizing: border-box;
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 {
+ 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 {
@@ -346,7 +527,26 @@
// 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>
--
Gitblit v1.9.3