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 | 127 +++++++++++++++++++++++++++---------------
1 files changed, 82 insertions(+), 45 deletions(-)
diff --git a/src/container/mapPreview/Map.vue b/src/container/mapPreview/Map.vue
index 182267a..b8533f7 100644
--- a/src/container/mapPreview/Map.vue
+++ b/src/container/mapPreview/Map.vue
@@ -1,24 +1,22 @@
<!--
* @Date: 2024-01-05 23:47:53
* @LastEditors: Sneed
- * @LastEditTime: 2024-01-20 20:51:28
+ * @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">
- <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 >
+ <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"
- :class="{aisle: v.type === 1 }"
- :width="v.colspan* height + 'px'"
- :height="v.rowspan* height + 'px'"
- 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">
- <Device @click.native="toDetail(v)" v-if="v.id" :id="v.id" style="width: 100%;height: 100%;" :deviceList="deviceList"
-:plantDeviceList="plantDeviceList" ::info="info"></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>
@@ -26,7 +24,6 @@
</div>
</div>
</div>
-
</template>
<script>
let timer;
@@ -37,7 +34,7 @@
return v
}
}
-import mixins from '@/mixins/index'
+import mixins from '@/mixins/index'
import Device from '../workshop/device.vue'
export default {
mixins: [mixins],
@@ -60,7 +57,7 @@
type: String,
},
id: {
- type: [Number,String]
+ type: [Number, String]
}
},
data() {
@@ -76,7 +73,7 @@
},
watch: {
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;
@@ -84,25 +81,28 @@
},
immediate: true
},
- map () {
+ map() {
this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
},
id: {
- handler () {
+ handler() {
+
if (this.move) {
+ this.marginLeft = 0
this.$nextTick(() => {
- let {width} = document.querySelector('.table div').getBoundingClientRect()
- let {width: tableW} = document.querySelector('.table').getBoundingClientRect()
+ 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.leftMax = 0
+ this.marginLeft = 0
}
})
}
-
+
},
immediate: true
}
@@ -114,14 +114,14 @@
}
},
methods: {
- moveFn () {
+ moveFn() {
if (this.marginLeft <= this.leftMax && this.marginLeft >= -5) {
if (this.direction) {
this.marginLeft += 5
} else {
this.marginLeft -= 5
}
-
+
timer = setTimeout(() => {
this.moveFn()
}, 30)
@@ -137,13 +137,23 @@
}, 30)
}
},
- mouseenter () {
+ mouseenter() {
clearTimeout(timer)
},
- mouseleave () {
- this.moveFn()
+ 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
+ }
+ }
},
- toDetail (v) {
+ toDetail(v) {
this.$router.push({
name: 'mapPreviewDetail',
query: {
@@ -151,33 +161,37 @@
}
})
},
- },
+ }
}
</script>
<style lang="scss" scoped>
-
@keyframes move {
0% {
- transform: translate(0,0);
+ transform: translate(0, 0);
}
+
100% {
- transform: translate(-100%,0);
+ 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%;
@@ -198,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;
@@ -219,6 +234,7 @@
// left: 100%;
// animation: move 6s infinite alternate;
}
+
.table {
// margin-top: 10px;
// display: flex;
@@ -227,18 +243,20 @@
height: 100%;
position: relative;
overflow-x: scroll;
- & > div {
-
- }
+
+ &>div {}
+
.table-action {
position: fixed;
z-index: 999;
color: #fff;
width: 100px;
+
div {
margin-top: 4px;
cursor: pointer;
}
+
div:hover {
color: #68D9FF;
}
@@ -251,6 +269,7 @@
// word-wrap: break-word;
overflow: hidden;
border-radius: 10px;
+
// box-sizing: border-box;
td {
// width: 50px;
@@ -259,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;
@@ -278,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%;
@@ -293,6 +317,7 @@
border: 1px solid #444C55;
border-radius: 10px;
position: relative;
+
img {
position: absolute;
top: 50%;
@@ -301,6 +326,7 @@
width: 80%;
}
}
+
ul {
flex: 1 1 auto;
height: 100%;
@@ -310,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;
@@ -329,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