From 00c8943add0753245977bdc4eb3dc7d979cf3f45 Mon Sep 17 00:00:00 2001
From: yangys <y_ys79@sina.com>
Date: 星期日, 14 一月 2024 17:17:13 +0800
Subject: [PATCH] Merge branch 'master' of http://www.beijingsoft.cn:9090/r/mdc-front
---
src/container/Map/Map.vue | 300 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 206 insertions(+), 94 deletions(-)
diff --git a/src/container/Map/Map.vue b/src/container/Map/Map.vue
index ee18d25..9680251 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-12 00:22:57
+ * @LastEditTime: 2024-01-14 15:07:18
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
@@ -16,91 +16,67 @@
<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" >
+ <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>
- <table>
- <tr v-for="(item, index) in mapNew" :key="index">
- <td v-if="v.rowspan !==0 && v.colspan!==0"
- :style="{
- 'width': v.type ===1 ? '20px' : v.colspan * 20 + 'px!important',
- 'height': v.type ===1 ? '20px' : v.rowspan * 20+ 'px!important'
- }"
- :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>
- <!-- <td></td> -->
- </tr>
- <!-- <tr>
- <td></td>
- </tr> -->
- </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"
+ :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>
+ </td>
+ </tr>
+ </table>
+ </div>
</div>
</div>
- <div class="map-add" v-else>
- <div class="map-add-item">
- <span>缁熶竴缂栧彿</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>璁惧鍚嶇О</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>璁惧鍨嬪彿</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>璁惧瑙勬牸</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>浣跨敤鍗曚綅</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>淇濆吇鑰�</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>淇濆吇鍛ㄦ湡</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>淇濆吇绫诲瀷</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>鏄惁鍚堟牸</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>璁″垝寮�濮嬫椂闂�</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>璁″垝瀹屾垚鏃堕棿</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-item">
- <span>淇濆吇鍐呭涓庡瓨鍦ㄩ棶棰�</span>
- <el-input class="value"></el-input>
- </div>
- <div class="map-add-footer">
- <el-button size="mini" @click="close">鍏抽棴</el-button>
- <el-button type="primary" size="mini" @click="saveDevice">淇濆瓨</el-button>
- </div>
- </div>
+ <addMachine :id="id" :machineid="machineid" @setmachineId="setmachineId" v-else @close="close"/>
</div>
</template>
@@ -114,11 +90,13 @@
}
import mixins from '@/mixins/index'
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: {
@@ -132,13 +110,42 @@
type: String,
},
id: {
- type: Number
+ 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 {
+ height: 0,
plantName: '',
- rows: 10,
+ rows: 20,
cols: 50,
map: null, // 鍦板浘鏁版嵁
addStatus: false,
@@ -194,11 +201,25 @@
},
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;
+ 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
+ }
},
mounted() {
this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
@@ -206,11 +227,11 @@
if(this.status ===2) return
this.tdMounseDown = false
})
- if (this.id) {
- // this.getmachineList()
- this.rows = this.currentMap.length
- this.cols = this.currentMap[0].length
+ try {
+ this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
+ } catch (error) {
}
+ console.log(this.$route.name)
},
beforeUpdate() {
try {
@@ -247,7 +268,8 @@
},
contextmenu(e) {
console.log(e)
- if(this.status ===2) return
+ if(this.status ===2) return
+ if (!this.range.x) return
// if (this.range.x !=='') return
e.preventDefault()
e.stopPropagation()
@@ -371,6 +393,11 @@
close () {
this.addStatus = false
},
+ edit (e) {
+ if(this.status ===2) return
+ e.stopPropagation()
+ this.addStatus = true
+ },
setmachineId (id) {
console.log(id)
if (!id) return
@@ -385,6 +412,19 @@
}
</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%;
@@ -392,7 +432,8 @@
.map-container {
width: 100%;
height: 100%;
- overflow: auto;
+ padding: 20px;
+ overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
@@ -400,7 +441,7 @@
}
.table-tool {
- padding: 10px 0;
+ padding-bottom: 50px;
display: flex;
justify-content: flex-start;
@@ -424,15 +465,20 @@
}
}
+.table.active {
+ // position: relative;
+ // left: 100%;
+ // animation: move 6s infinite alternate;
+}
.table {
// margin-top: 10px;
- display: flex;
- justify-content: flex-start;
- overflow-y: scroll;
+ // display: flex;
+ // justify-content: flex-start;
width: 100%;
- padding: 20px;
height: 100%;
position: relative;
+ overflow-x: scroll;
+
.table-action {
position: absolute;
z-index: 999;
@@ -449,13 +495,12 @@
table {
width: 100%;
- height: 100%;
-
border-collapse: collapse;
- table-layout: fixed;
- word-wrap: break-word;
+ // table-layout: fixed;
+ // word-wrap: break-word;
overflow: hidden;
-
+ border-radius: 10px;
+ // box-sizing: border-box;
td {
// width: 50px;
// height: 50px;
@@ -463,11 +508,78 @@
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 {
background: #68D9FF!important;
--
Gitblit v1.9.3