foster-pc-vue/src/views/warningHome/components/trackDialog.vue

<template>
    <div>
        <el-dialog v-model="centerDialogVisible" width="800" align-center modal-class="track-dialog">
            <template #header>
                <div class="track-title">
                    <img class="track-icon" src="@/assets/images/warningHome/chat/track.png" alt="" />
                    植保轨迹
                </div>
            </template>
            <div class="track">
                <img class="track-img" :src="require('@/assets/images/warningHome/chat/track'+ urlIndex +'.png')" alt="">
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import eventBus from "@/api/eventBus";
import { onMounted, ref } from "vue";

const centerDialogVisible = ref(false);

onMounted(() => {
    // ai与地图交互
    eventBus.on("chat:showTrackDialog", showTrackDialog)
})

const urlIndex = ref(1)
const showTrackDialog = (url) => {
    console.log('url', url)
    urlIndex.value = url
    centerDialogVisible.value = true
}
</script>

<style lang="scss" scoped>
.track-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    .track-icon {
        width: 24px;
        margin-right: 4px;
    }
}
.track-img {
    width: 100%;
}
</style>

<style lang="scss">
.track-dialog {
    .el-dialog {
        background: #232323;
        border: 1px solid #777777;
        border-radius: 12px;
        color: #fff;
    }
}
</style>