大屏滚动

gaosp

2024-01-20 2a9a3b954b538f5655a996ae5acc0be56105afc7

大屏滚动

 src/container/mapPreview/Map.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 20:37:45
 * @LastEditTime: 2024-01-20 20:41:19
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreview/Map.vue
-->
<template>
@@ -45,6 +45,10 @@
        Device
    },
    props: {
        move: {
            type: Boolean,
            default: false
        },
        status: {
            type: Number,
            default: 0
@@ -66,7 +70,6 @@
            cols: 50,
            map: null, // 地图数据
            leftMax: 0,
            move: false,
            marginLeft: 0
        }
    },
@@ -85,20 +88,21 @@
        },
        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
                    }
                })
                if (this.move) {
                    this.$nextTick(() => {
                        let {width} = document.querySelector('.table div').getBoundingClientRect()
                        let {width: tableW} = document.querySelector('.table').getBoundingClientRect()
                        console.log(width, '>>>>>>>', tableW)
                        if (width > tableW) {
                            this.leftMax = width - tableW
                            clearTimeout(timer)
                            this.moveFn()
                        } else {
                            this.leftMax = 0
                        }
                    })
                }
                
            },
            immediate: true
        }
@@ -122,9 +126,6 @@
                    this.moveFn()
                }, 30)
            }
        },
        animationFn () {

        },
        toDetail (v) {
            this.$router.push({

 src/container/preview/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 20:12:55
 * @LastEditTime: 2024-01-20 20:39:26
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/preview/index.vue
-->
<template>
@@ -32,7 +32,7 @@
                    </template>
                </Status>
                <div class="preview-map">
                    <Map class="preview-container" v-if="id" :id="id" :status="2" :currentMap="currentMap" />
                    <Map :move="true" class="preview-container" v-if="id" :id="id" :status="2" :currentMap="currentMap" />
                </div>
            </div>
        </div>