大屏滚动

gaosp

2024-01-20 c3d5a56a83a8ab420bff5ed01437a806259fa5ef

 src/container/mapPreview/Map.vue

@@ -1,23 +1,22 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 17:05:37
 * @LastEditTime: 2024-01-20 20:37:45
 * @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="map-container">
            <div class="table" :class="$route.name ==='preview' ? 'active' : ''" >
                <div :style="{width: (cols * height + 'px'),height: rows * height + 'px'}">
                <div :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'"
                            :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"
                            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="">
                                <!-- <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" ::info="info"></Device>
                            </td>
@@ -30,6 +29,7 @@
    
</template>
<script>
let timer;
const getParent = (v, layout) => {
    if (v.rowspan === 0) {
        return getParent(layout[v.parent[0]][v.parent[1]], layout)
@@ -59,112 +59,48 @@
            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: 20,
            cols: 50,
            map: null, // 地图数据
            addStatus: false,
            position: {},
            selection:[],
            showAction: false,
            tdMounseDown: false,
            range: {x: '',x1: '',y: '',y1: ''},
            currentAdd: {},
            colgroups:[]
            leftMax: 0,
            move: false,
            marginLeft: 0
        }
    },
    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 () {
                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
        },
        id: {
            handler () {
                this.$nextTick(() => {
                    let {width} = document.querySelector('.table div').getBoundingClientRect()
                    let {width: tableW} = document.querySelector('.table').getBoundingClientRect()
                    console.log(width, '>>>>>>>', tableW)
                    if (width > tableW) {
                        this.move = true
                        this.leftMax = width - tableW
                        clearTimeout(timer)
                        this.moveFn()
                    } else {
                        this.move = false
                        this.leftMax = 0
                    }
                })
            },
            immediate: true
        }
    },
    mounted() {
@@ -174,8 +110,23 @@
        }
    },
    methods: {
        moveFn () {
            if (this.marginLeft < this.leftMax) {
                this.marginLeft += 5
                timer = setTimeout(() => {
                    this.moveFn()
                }, 30)
            } else if (this.marginLeft >= this.leftMax){
                this.marginLeft = 0
                timer = setTimeout(() => {
                    this.moveFn()
                }, 30)
            }
        },
        animationFn () {

        },
        toDetail (v) {
            alert(1)
            this.$router.push({
                name: 'mapPreviewDetail',
                query: {
@@ -183,12 +134,6 @@
                }
            })
        },
        out () {
            this.$emit('out')
        },
        close () {
            this.addStatus = false
        }
    },
}
</script>
@@ -196,14 +141,20 @@

@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 {
@@ -259,7 +210,9 @@
    height: 100%;
    position: relative;
    overflow-x: scroll;
   
    & > div {
        
    }
    .table-action {
        position: fixed;
        z-index: 999;