smart-factory/src/views/vehicleMachinery/map.vue

<script setup>
import { onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { vehicletoken } from './api'
const { proxy } = getCurrentInstance();
const route = useRoute()
const router = useRouter()
const state = reactive({
    url: "",
    item: JSON.parse(route.query.item),
    showLoading: true
})
onMounted(() => {
    vehicletoken().then((res) => {
        state.showLoading = false
        state.url = `https://openh5.aichezaixian.com/?token=${res.msg}&imei=${state.item.imei}&appKey=8FB345B8693CCD00BA15086EBAA101736574BC1ECEB825E0`;
    })
})
// &activeTab=CCC
</script>

<template>
    <div class="app-container" v-if="state.url" v-loading="state.showLoading" :element-loading-text="'Loading...'"
        :element-loading-background="'rgb(34, 58, 106, 0.5)'">

        <div style="display: flex;align-items: center;height: 100%;width: 100%;">
            <div class="left-detail">
                <div style="display: flex;align-items: center;height: 40px;">
                    <el-button icon="Back" @click="router.back()">
                        返回</el-button>
                </div>
                <div>{{ state.item.vehicleNumber ? state.item.vehicleNumber : '-' }}</div>
                <div class="left-detail-item">
                    <span>设备型号：</span>
                    <span>{{ state.item.mcType ? state.item.mcType : '-' }}</span>
                </div>
                <div class="left-detail-item">
                    <span>设备类型：</span>
                    <span> {{ state.item.equipType == 'WIRED' ? '有线' : state.item.equipType == 'WIRELESS' ? '无线' : '-'
                        }}</span>
                </div>

                <div class="left-detail-item">
                    <span>司机姓名：</span>
                    <span>{{ state.item.driverName ? state.item.driverName : '-' }}</span>
                </div>
                <div class="left-detail-item">
                    <span>司机电话：</span>
                    <span>{{ state.item.driverPhone ? state.item.driverPhone : '-' }}</span>
                </div>
            </div>
            <iframe style="width: calc(100% - 242px);height: 100%;border: none;" :src="state.url"></iframe>
        </div>
    </div>
</template>

<style scoped lang="scss">
.app-container {
    width: 100%;
    height: calc(100vh - 135px);
}

.left-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;

    >span:nth-child(1) {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
    }

    >span:nth-child(2) {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        font-size: 14px;
    }
}

.left-detail {
    padding: 24px;
    padding-top: 10px;
    height: 100%;
    background: red;
    width: 242px;
    background: #fff;
    border-radius: 0px 0px 0px 0px;
    >div:nth-child(1) {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
    }
}
</style>