tqApp-webView/pages/realtimeWatch/module/lzRealtimeWatch.vue

<template>
    <view class="realtimeWatch">
        <map-container
            ref="mapContainerRef"
            :pointsData="pointsData"
            @handleMarkerClick="handleMarkerClick">
        </map-container>
<!-- 
        <view class="counts">
            <u-row>
                <u-col :span="3" class="counts-item" v-for="(item, index) in countInfo" :key="index" :class="item.class">
                    <view class="counts-item-label" :style="item.style">{{ item.label }}</view>
                    <view class="counts-item-value" :style="item.style">{{ item.value }}</view>
                </u-col>
            </u-row>
        </view> -->

        <view class="options">
            <view class="options-item" @click="showSatelliteLayer">
                <image
                    style="width: 100%; height: 100%"
                    :src="$getImages('/assetsMobile/images/map/icon/weixing.png')" />
            </view>

            <!-- <view class="options-item" @click="showPanel">
                <image
                    style="width: 100%; height: 100%"
                    :src="$getImages('/assetsMobile/images/map/icon/boxselection.png')" />
            </view>

            <view class="options-item" @click="queryLocation">
                <image
                    style="width: 100%; height: 100%"
                    :src="$getImages('/assetsMobile/images/map/icon/position.png')" />
            </view> -->

        </view>

        <panel ref="panelRef"></panel>

        <veh-info ref="vehInfoRef"></veh-info>
    </view>
</template>

<script>
// import MapContainer from '@/components/MapContainer'
import panel from './panel.vue'
import vehInfo from './vehInfo.vue'
export default {
    components: {
        // MapContainer,
        panel,
        vehInfo,
    },
    data() {
        return {
            //卫星图层
            isShowStelliteLayer: false,
            pointsData: []
        }
    },
    computed: {
        countInfo() {
            return this.$store.state.realtimeWatch.countInfo
        },
    },
    onLoad() {
        this.pointsData = [
            {
                "lnglat": [
                    "113.335408",
                    "23.13245"
                ],
                "item": {
                    "parentId": "925205682749837312",
                    "routeKey": "lzRealtimeWatch",
                    "id": "925264144057896960",
                    "vehicleId": "925264144057896960",
                    "plate": "19223346989",
                    "deptName": "设备测试",
                    "isDevice": 1,
                    "isVideo": 0,
                    "isConcern": 0,
                    "remark": null,
                    "posDeviceId": "19223346989",
                    "vehType": 25,
                    "vehTypeName": "轿车",
                    "driverName": null,
                    "driverTel": null,
                    "workTypeName": null,
                    "workQuery": null,
                    "lng": "113.335408",
                    "lat": "23.13245",
                    "location": "未获取到位置信息",
                    "gspTime": "2024-03-06 19:09:42",
                    "online": "0",
                    "engineStatus": "1",
                    "isAlarm": 0,
                    "alarmTypeName": "长时间停车",
                    "speed": 17,
                    "direction": 140,
                    "oil": 0,
                    "water": 0,
                    "position": "1",
                    "pin2": "0",
                    "icon": "/dev-api/img/upload/vehIcon/list/1_3.png",
                    "img": "/dev-api/img/upload/vehIcon/plat/1_3.png",
                    "tips": "离线",
                    "filterStatus": "3",
                    "label": "19223346989",
                    "positionName": "定位",
                    "pin2Name": "关",
                    "code": "vehicle",
                    "disabled": false
                }
            }
        ]
    },
    onReady() {
    },
    methods: {
        // 查询自身位置
        queryLocation() {
            uni.getLocation({
                type: "gcj02",
                success: (res) => {
                    const { latitude, longitude } = res

                    this.$refs.mapContainerRef.setZoomAndCenter(12, [longitude, latitude], true)
                },
                fail: (res) => {
                    console.log('定位失败', JSON.stringify(res));
                }
            });
        },
        //选车辆
        showPanel() {
            this.$refs.panelRef.show()
        },
        //展示卫星图层
        showSatelliteLayer() {
            this.isShowStelliteLayer = !this.isShowStelliteLayer
            if (this.$refs.mapContainerRef) this.$refs.mapContainerRef.setStelliteLayer(this.isShowStelliteLayer)
        },
        //点击标注点
        handleMarkerClick(e) {
            // console.log(e,'handleMarkerClick')
            const { cluster } = e
            let item = cluster.p.item
            this.$refs.vehInfoRef.show(item)

        }
    },
    beforeDestroy() {
        this.$store.dispatch('setVheicleCheckArr', [])
        this.$store.dispatch('setPeopleCheckArr', [])
    }
}
</script>

<style lang="scss" scoped>
.realtimeWatch {
    width: 100%;
    height: 100vh;
    position: relative;

    #map {
        width: 750rpx;
        height: 100%;
    }

    .counts {
        position: absolute;
        left: 2%;
        top: 20rpx;
        width: 96%;
        background: #fff;
        border-radius: 10rpx;

        box-shadow: 0 2px 6px #3f57c252;

        // margin: 10rpx;
        .counts-item {
            padding: 14rpx 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .counts-item-label {
                font-size: 24rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 400;
                color: #333333;
                text-align: center;
            }

            .counts-item-value {
                margin-top: 10rpx;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 600;
                color: #333333;
                text-align: center;
            }
        }
    }

    .options {
        position: absolute;
        width: 72rpx;
        right: 30rpx;
        bottom: 156rpx;
        // box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.15);
        z-index: 9999;

        .options-item {
            height: 72rpx;

        }

        .options-item+.options-item {
            margin-top: 20rpx;
        }
    }
}
</style>