<!--
|
* @Date: 2024-01-05 23:47:53
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-03-08 09:12:55
|
* @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>
|
<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"
|
:rowspan="v.rowspan" :colspan="v.colspan" :key="v.rowIndex + '-' + v.colIndex">
|
<div class="td-div" :style="{width:v.colspan * height - 2 + 'px',height: v.rowspan * height - 2 + 'px',overflow:'hidden'}">
|
<Device @toDetail="toDetail(v)" v-if="v.id" :id="v.id" style="width: 100%;height: 100%;"
|
:deviceList="deviceList" :plantDeviceList="plantDeviceList"></Device>
|
</div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
let timer;
|
const getParent = (v, layout) => {
|
if (v.rowspan === 0) {
|
return getParent(layout[v.parent[0]][v.parent[1]], layout)
|
} else {
|
return v
|
}
|
}
|
import mixins from '@/mixins/index'
|
import Device from '../workshop/device.vue'
|
import { getRequest, getUrl } from '@/api/Api'
|
export default {
|
mixins: [mixins],
|
components: {
|
Device
|
},
|
props: {
|
move: {
|
type: Boolean,
|
default: false
|
},
|
status: {
|
type: Number,
|
default: 0
|
},
|
currentMap: {
|
default: []
|
},
|
name: {
|
type: String,
|
},
|
id: {
|
type: [Number, String]
|
}
|
},
|
data() {
|
return {
|
height: 0,
|
rows: 20,
|
cols: 50,
|
map: null, // 地图数据
|
leftMax: 0,
|
marginLeft: 0,
|
direction: true,
|
plantDeviceList: []
|
}
|
},
|
watch: {
|
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
|
},
|
id: {
|
handler(val) {
|
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
|
}
|
})
|
}
|
if(val) {
|
getRequest('machineList',{plantId: val}).then(res => {
|
this.plantDeviceList = res.data.list.map(item => {
|
return Object.assign(item,{
|
machineId: item.id,
|
machineName: item.machineName
|
})
|
}) || []
|
})
|
}
|
},
|
immediate: true
|
}
|
},
|
mounted() {
|
try {
|
this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
|
} catch (error) {
|
}
|
},
|
methods: {
|
toDetail(v) {
|
if(this.move) return
|
let info = {}
|
if (v.id) {
|
info = this.plantDeviceList.find(item => item.machineId == v.id)
|
}
|
window.localStorage.setItem('deviceInfo',JSON.stringify(info))
|
this.$router.push({
|
name: 'mapPreviewDetail',
|
query: {
|
id: v.id,
|
name: info.workshop
|
}
|
})
|
},
|
moveFn() {
|
if (this.marginLeft <= this.leftMax && this.marginLeft >= -5) {
|
if (this.direction) {
|
this.marginLeft += 2
|
} else {
|
this.marginLeft -= 2
|
}
|
|
timer = setTimeout(() => {
|
this.moveFn()
|
}, 30)
|
} else {
|
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
|
}
|
}
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@keyframes move {
|
0% {
|
transform: translate(0, 0);
|
}
|
|
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%;
|
padding: 20px;
|
overflow: hidden;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
background: rgba(0,0,0,.6);
|
}
|
}
|
|
.table-tool {
|
padding-bottom: 50px;
|
display: flex;
|
justify-content: flex-start;
|
|
&>div {
|
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.active {
|
// position: relative;
|
// left: 100%;
|
// animation: move 6s infinite alternate;
|
}
|
|
.table {
|
// margin-top: 10px;
|
// display: flex;
|
// justify-content: flex-start;
|
width: 100%;
|
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;
|
}
|
}
|
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
// table-layout: fixed;
|
// word-wrap: break-word;
|
overflow: hidden;
|
border-radius: 10px;
|
|
// box-sizing: border-box;
|
td {
|
// width: 50px;
|
// height: 50px;
|
box-sizing: border-box;
|
border: 1px solid #1662DB;
|
vertical-align: middle;
|
text-align: center;
|
.td-div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
&>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;
|
}
|
|
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>
|
