车辆详情页面

13404089107

2025-03-06 b0bbc951c6502f4c7626e2501d0af6cb6e5cb656

车辆详情页面

 package-lock.json

Diff too large

 src/view/car-manage/components/detailModal.vue

New file
@@ -0,0 +1,63 @@
<template>
    <div>
        <el-dialog title="车辆基础信息" :visible.sync="dialogVisible" width="80%" :modal-append-to-body="false">
            <el-descriptions title="" :column="3">
                <el-descriptions-item label="公司名称">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="车牌号码">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="车辆颜色">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="核定载客位">14725836902</el-descriptions-item>
                <el-descriptions-item label="车辆厂牌">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="车辆型号">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="车辆类型">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="所属车主">14725836902</el-descriptions-item>
                <el-descriptions-item label="车身颜色">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="发动机号">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="车辆VIN码">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="车辆注册日期">14725836902</el-descriptions-item>
                <el-descriptions-item label="车辆燃料类型">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="发动机排量">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="车辆运输证发证机构">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="车辆经营区域">14725836902</el-descriptions-item>
                <el-descriptions-item label="运输证字号">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="车辆运输证有效期起">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="车辆运输证有效期止">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="车辆初次登记日期">14725836902</el-descriptions-item>
                <el-descriptions-item label="车辆检修状态">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="车辆年度审验状态">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="卫星定位装置品牌">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="卫星定位装置型号">14725836902</el-descriptions-item>
                <el-descriptions-item label="卫星定位装置IMEI号">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="卫星定位设备安装日期">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="注册日期">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="营运类型">14725836902</el-descriptions-item>
                <el-descriptions-item label="运价类型编码">射洪洪达出租车有限公司</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            dialogVisible: false
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        closeClick() {
            this.dialogVisible = false
        }
    },
};
</script>
<style scoped lang="less">
::v-deep .el-descriptions .el-descriptions-item__cell {
    padding-bottom: 20px;
}
</style>

 src/view/car-manage/detail.vue

@@ -1,18 +1,214 @@
<template>
    <div class="container">
        <div class=""></div>
    <div class="containers">
        <div class="info-content flex">
            <div class="info-left flex3 flex">
                <div class="info-back flex shrink0">
                    <span class="back-size"><i class="el-icon-back"></i>返回</span>
                </div>
                <div class="info-content-left ml--100">
                    <el-descriptions :column="2">
                        <el-descriptions-item label="公司名称">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="车牌号码">18100000000</el-descriptions-item>
                        <el-descriptions-item label="车牌颜色">苏州市</el-descriptions-item>
                        <el-descriptions-item label="车辆营运类型">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="所属车主">18100000000</el-descriptions-item>
                        <el-descriptions-item label="联系电话">苏州市</el-descriptions-item>
                        <el-descriptions-item label="经营区域">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="车辆年度审验">18100000000</el-descriptions-item>
                        <el-descriptions-item label="驾驶证">
                            <img class="img-size" src="../../assets/homeImg/img1.png"></img>
                        </el-descriptions-item>
                        <el-descriptions-item label="行驶证">
                            <img class="img-size" src="../../assets/homeImg/img2.png"></img>
                        </el-descriptions-item>
                    </el-descriptions>
                    <div class="info-btn" @click="showDetail">
                        车辆详细信息<i class="el-icon-arrow-right"></i>
                    </div>
                </div>
            </div>
            <div class="info-right flex2">
                <video style="width: 100%;height: 100%;" src="../../assets/homeImg/QQ20241223-103023.mp4"></video>
            </div>
        </div>
        <div class="tab-content ml--100 mr--30">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="订单记录" name="first">
                    <div class="table-box mt--23">
                        <el-table :data="tableData" border stripe style="width: 100%">
                            <el-table-column prop="date" label="序号"></el-table-column>
                            <el-table-column prop="name" label="订单编号"></el-table-column>
                            <el-table-column prop="name" label="车牌号"></el-table-column>
                            <el-table-column prop="name" label="车辆颜色"></el-table-column>
                            <el-table-column prop="name" label="车辆所属公司"></el-table-column>
                            <el-table-column prop="name" label="上车地点"></el-table-column>
                            <el-table-column prop="name" label="下车地点"></el-table-column>
                            <el-table-column prop="name" label="载客里程"></el-table-column>
                            <el-table-column prop="name" label="驾驶员姓名"></el-table-column>
                            <el-table-column prop="name" label="驾驶员电话"></el-table-column>
                            <el-table-column prop="name" label="派单时间"></el-table-column>
                            <el-table-column prop="name" label="订单金额"></el-table-column>
                            <el-table-column prop="name" label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="handle(scope.$index, scope.row)">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="pagination-box relative mt--23 flex j-end">
                            <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" :current-page="searchForm.page" background
                                layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total">
                            </el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="预警记录" name="second">
                    <div class="table-box mt--23">
                        <el-table :data="tableData" border stripe style="width: 100%">
                            <el-table-column prop="date" label="序号" fixed width="80"></el-table-column>
                            <el-table-column prop="name" label="车辆名称" width="120" fixed></el-table-column>
                            <el-table-column prop="name" label="车牌号码" width="120" fixed></el-table-column>
                            <el-table-column prop="name" label="持续报警" width="120"></el-table-column>
                            <el-table-column prop="name" label="近15分钟情况" width="120"></el-table-column>
                            <el-table-column prop="name" label="驾驶员名称" width="120"></el-table-column>
                            <el-table-column prop="name" label="所属公司" width="120"></el-table-column>
                            <el-table-column prop="name" label="终端编号" width="120"></el-table-column>
                            <el-table-column prop="name" label="开始报警时间" width="120"></el-table-column>
                            <el-table-column prop="name" label="结束报警时间" width="120"></el-table-column>
                            <el-table-column prop="name" label="持续时长" width="120"></el-table-column>
                            <el-table-column prop="name" label="持续里程数" width="120"></el-table-column>
                            <el-table-column prop="name" label="报警类型" width="120"></el-table-column>
                            <el-table-column prop="name" label="报警次数" width="120"></el-table-column>
                            <el-table-column prop="name" label="处理状态" width="120"></el-table-column>
                            <el-table-column prop="name" label="处理人" width="120"></el-table-column>
                            <el-table-column prop="name" label="处理时间" width="120"></el-table-column>
                            <el-table-column prop="name" label="处理描述" width="240"></el-table-column>
                        </el-table>

                        <div class="pagination-box relative mt--23 flex j-end">
                            <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" :current-page="searchForm.page" background
                                layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total">
                            </el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="行驶轨迹" name="third">
                    <div class="form flex j-between mt--23" style="align-items: end;">
                        <div class="form-left ml--30">
                            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                                <el-form-item label="选择轨迹时间范围:" prop="level" class="unset_m"
                                    style="margin-right: 15px;">
                                    <el-date-picker v-model="searchForm.date" type="daterange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                                        >
                                    </el-date-picker>
                                </el-form-item>

                            </el-form>
                        </div>
                        <div class="form-right shrink0 mr--24 mb--23">
                            <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary"
                                size="small" @click="search">查询</el-button>
                            <el-button @click="reset" icon="el-icon-refresh-right"
                                class="reset-button h--40 w--90 fs--14" size="small">重置</el-button>
                        </div>

                    </div>
                    <div class="mapContainer" id="mapContainer"></div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <DetailModal ref="detailModal" />
    </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import DetailModal from "./components/detailModal.vue";
export default {
    name: "detail",
    components: { DetailModal },
    data() {
        return {
            id: ''
            id: '',
            tableData: [],
            searchForm: {
                date: '',
                type: '',
                level: '',
                name: '',
                total: 40,
                page: 1,
                pageSize: 10
            },
            activeName: 'first'
        }
    },
    mounted() {
        this.initMap();
    },
    methods: {
        handleClick(){

        },
        search(){},
        reset() {

        },
        showDetail() {
            this.$refs.detailModal.dialogVisible = true
        },
        initMap() {
            window._AMapSecurityConfig = {
                securityJsCode: this.$secretKey,
            };
            AMapLoader.load({
                key: this.$mapKey,
                version: "2.0",
                plugins: [
                    "AMap.ToolBar",
                ],
            })
                .then((AMap) => {
                    this.map = new AMap.Map("mapContainer", {
                        center: [105.574542, 30.5061493],
                        zoom: 15,
                    });
                    this.map.addControl(new AMap.ToolBar());
                    let path = [
                        new AMap.LngLat(105.57, 30.51),
                        new AMap.LngLat(116.382122, 39.901176),
                        new AMap.LngLat(116.387271, 39.912501),
                        new AMap.LngLat(116.398258, 39.9046),
                    ]
                    const content = `<div class="custom-content-marker">
                                        <img src="${require("@/assets/logo.png")}">
                                    </div>`;
                    const marker = new AMap.Marker({
                        content: content, //自定义点标记覆盖物内容
                        position: [105.57, 30.51], //基点位置
                        offset: new AMap.Pixel(-30, -15), //相对于基点的偏移位置
                    });
                    this.map.add(marker);
                    let polyline = new AMap.Polyline({
                        path: path,
                        strokeWeight: 2, //线条宽度
                        strokeColor: "red", //线条颜色
                        lineJoin: "round", //折线拐点连接处样式
                    });
                    this.map.add(polyline);
                })
                .catch((e) => {
                });
        },
        handleSizeChange(e) {
            this.searchForm.pageSize = e
        },
        handleCurrentChange(e) {
            this.searchForm.page = e
        },
        // getDetail() {
        //     this.$axios.get(`/api/complaint/detail/${this.id}`).then(res => {
        //         console.log(res);
@@ -24,5 +220,66 @@
}
</script>
<style scoped lang="less">
.containers {
    height: 100vh;
    overflow-y: auto;
}

.info-back {
    cursor: pointer;
    // flex-shrink: ;
}

.info-content {
    padding: 30px;
}

::v-deep .el-descriptions-item__container {
    font-size: 18px;

    .el-descriptions-item__label {
        font-weight: 600;
    }

    .el-descriptions-item__content {
        width: 200px;
    }
}

.img-size {
    width: 169px;
    height: 99px;
}

.info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-btn {
    font-size: 18px;
    color: #0E6EFD;
    cursor: pointer;
    margin-top: 60px;
}

.flex3 {
    flex: 3;
}

.flex2 {
    flex: 2;
}

.back-size {
    font-size: 24px;
    color: #0E6EFD;
    cursor: pointer;
}

#mapContainer {
    width: 100%;
    height: 600px;
}
</style>

 src/view/order/component/detailModal.vue

@@ -119,6 +119,6 @@

#mapContainer {
    width: 100%;
    height: 600px;
    height: 300px;
}
</style>