From b91c71780549b06f0729b50cf7b94a1c037968b9 Mon Sep 17 00:00:00 2001
From: gaosp <gaosp>
Date: 星期日, 21 一月 2024 23:02:30 +0800
Subject: [PATCH] update
---
src/container/mapPreview/Map.vue | 492 +++++++++++++++---------------------------------------
1 files changed, 140 insertions(+), 352 deletions(-)
diff --git a/src/container/mapPreview/Map.vue b/src/container/mapPreview/Map.vue
index 92cc7a4..b8533f7 100644
--- a/src/container/mapPreview/Map.vue
+++ b/src/container/mapPreview/Map.vue
@@ -1,86 +1,32 @@
<!--
* @Date: 2024-01-05 23:47:53
* @LastEditors: Sneed
- * @LastEditTime: 2024-01-14 16:50:48
- * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
+ * @LastEditTime: 2024-01-21 22:43:47
+ * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreview/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>
- <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="edit" v-if="showEdit">淇敼鏈哄簥</div>
- <!-- <div>澧炲姞琛�</div> -->
- <!-- <div>鍒犻櫎琛�</div> -->
- <!-- <div>澧炲姞鍒�</div> -->
- <!-- <div>鍒犻櫎鍒�</div> -->
- </div>
- <div :style="{width: (cols * height + 'px'),height: rows * height + 'px'}">
- <table >
+ <div class="map-container">
+ <div class="table" :class="$route.name === 'preview' ? 'active' : ''">
+ <div @mouseenter="mouseenter" @mouseleave="mouseleave"
+ :style="{ width: (cols * height + 'px'), height: rows * height + 'px', marginLeft: -marginLeft + '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" :class="{ aisle: v.type === 1 }"
+ :width="v.colspan * height + 'px'" :height="v.rowspan * height + 'px'" 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> -->
- <Device v-if="v.id" :id="v.id" style="width: 100%;height: 100%;"></Device>
+ <Device @click.native="toDetail(v)" v-if="v.id" :id="v.id" style="width: 100%;height: 100%;"
+ :deviceList="deviceList" :plantDeviceList="plantDeviceList"></Device>
</td>
</tr>
</table>
</div>
</div>
</div>
- <addMachine :id="id" :machineid="machineid" @setmachineId="setmachineId" v-else @close="close"/>
</div>
-
</template>
<script>
+let timer;
const getParent = (v, layout) => {
if (v.rowspan === 0) {
return getParent(layout[v.parent[0]][v.parent[1]], layout)
@@ -88,17 +34,18 @@
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'
export default {
mixins: [mixins],
components: {
- AddMachine,
Device
},
props: {
+ move: {
+ type: Boolean,
+ default: false
+ },
status: {
type: Number,
default: 0
@@ -110,325 +57,141 @@
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 ''
- }
+ type: [Number, String]
}
},
data() {
return {
height: 0,
- plantName: '',
rows: 20,
cols: 50,
map: null, // 鍦板浘鏁版嵁
- addStatus: false,
- position: {},
- selection:[],
- showAction: false,
- tdMounseDown: false,
- range: {x: '',x1: '',y: '',y1: ''},
- currentAdd: {},
- colgroups:[]
+ leftMax: 0,
+ marginLeft: 0,
+ direction: true
}
},
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
- },
currentMap: {
- handler () {
+ 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;
- 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 () {
+ map() {
this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
+ },
+ id: {
+ handler() {
+
+ if (this.move) {
+ this.marginLeft = 0
+ this.$nextTick(() => {
+ let { width } = document.querySelector('.table div').getBoundingClientRect()
+ let { width: tableW } = document.querySelector('.table').getBoundingClientRect()
+ clearTimeout(timer)
+ if (width > tableW) {
+ this.leftMax = width - tableW
+ clearTimeout(timer)
+ this.moveFn()
+ } else {
+ this.marginLeft = 0
+ }
+ })
+ }
+
+ },
+ immediate: 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: {
- 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: ''
- })
+ moveFn() {
+ if (this.marginLeft <= this.leftMax && this.marginLeft >= -5) {
+ if (this.direction) {
+ this.marginLeft += 5
+ } else {
+ this.marginLeft -= 5
}
- data.push(arr)
- }
- this.map = data
- },
- contextmenu(e) {
- console.log(e)
- if(this.status ===2) return
- if (!this.range.x) 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'
- }
+
+ timer = setTimeout(() => {
+ this.moveFn()
+ }, 30)
} else {
- this.position = {
- left: left + 'px',
- top: top + 10 + 'px'
+ this.direction = !this.direction
+ if (this.direction) {
+ this.marginLeft += 5
+ } else {
+ this.marginLeft -= 5
+ }
+ timer = setTimeout(() => {
+ this.moveFn()
+ }, 30)
+ }
+ },
+ mouseenter() {
+ clearTimeout(timer)
+ },
+ mouseleave() {
+ if (this.move){
+ let { width } = document.querySelector('.table div').getBoundingClientRect()
+ let { width: tableW } = document.querySelector('.table').getBoundingClientRect()
+ if (width > tableW) {
+ this.leftMax = width - tableW
+ clearTimeout(timer)
+ this.moveFn()
+ } else {
+ this.leftMax = 0
}
}
-
},
- onMousedown(e, v) {
- 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)
- },
- 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)
- }
+ toDetail(v) {
+ this.$router.push({
+ name: 'mapPreviewDetail',
+ query: {
+ id: v.id
}
- }
- 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) {
- const { x, x1, y, y1 } = this.range
- for(var i=x;i<=x1;i++) {
- for(var j=y;j<=y1;j++) {
- let arr = [...(this.map[i])]
- arr[j].type = type
- this.$set(this.map,i,arr)
- }
- }
- this.showAction = false
- this.$forceUpdate()
- },
- addDevice (e,v) {
- if(this.status ===2) return
- e.stopPropagation()
- this.addStatus = true
- this.currentAdd = v
- },
- save () {
- if (this.status === 0) {
- 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.postJson('/plant/modify',{
- name: this.plantName,
- gridSetting: JSON.stringify(this.map),
- id: this.id
- }).then(res => {
- this.$emit('out')
- console.log(res)
- })
- }
-
- },
- out () {
- this.$emit('out')
- },
- close () {
- this.addStatus = false
- },
- edit (e) {
- if(this.status ===2) return
- e.stopPropagation()
- this.addStatus = true
- },
- 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()
- }
- },
+ }
}
</script>
<style lang="scss" scoped>
-
@keyframes move {
0% {
- // left: 100%;
- // transform: translate(0,0);
- // scrollTop: 0
+ transform: translate(0, 0);
}
+
100% {
- // left: 100%;
- // transform: translate(-100%,0);
- // scrollTop: 100%
+ transform: translate(-100%, 0);
}
}
+
+.preview-container {
+ .table {
+ overflow: hidden;
+ overflow-y: auto;
+ // margin-left: 100%;
+ }
+
+ .table div {
+ // animation: move 12s infinite alternate;
+ }
+}
+
.map {
width: 100%;
height: 100%;
position: relative;
+
.map-container {
width: 100%;
height: 100%;
@@ -449,13 +212,14 @@
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);
+ background: rgba(23, 38, 67, 0.6);
border-radius: 14px;
overflow: hidden;
color: #F7F8FA;
@@ -470,6 +234,7 @@
// left: 100%;
// animation: move 6s infinite alternate;
}
+
.table {
// margin-top: 10px;
// display: flex;
@@ -478,16 +243,20 @@
height: 100%;
position: relative;
overflow-x: scroll;
-
+
+ &>div {}
+
.table-action {
position: fixed;
z-index: 999;
color: #fff;
width: 100px;
+
div {
margin-top: 4px;
cursor: pointer;
}
+
div:hover {
color: #68D9FF;
}
@@ -500,6 +269,7 @@
// word-wrap: break-word;
overflow: hidden;
border-radius: 10px;
+
// box-sizing: border-box;
td {
// width: 50px;
@@ -508,17 +278,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;
@@ -527,14 +300,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%;
@@ -542,6 +317,7 @@
border: 1px solid #444C55;
border-radius: 10px;
position: relative;
+
img {
position: absolute;
top: 50%;
@@ -550,6 +326,7 @@
width: 80%;
}
}
+
ul {
flex: 1 1 auto;
height: 100%;
@@ -559,18 +336,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;
@@ -578,36 +360,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