fix

13404089107

2025-04-23 db3ac1d5d422be239539b58bdeb6cfd0ae827554

fix

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

New file
@@ -0,0 +1,206 @@
<template>
    <div>
        <el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%" :modal-append-to-body="false"
            :close-on-press-escape="false" :close-on-click-modal="false" @close="closeClick">
            <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
                <el-radio-button label="order">订单信息</el-radio-button>
                <el-radio-button label="track">行程轨迹</el-radio-button>
                <el-radio-button label="monitoring">行程监控</el-radio-button>
            </el-radio-group>
            <!-- 订单信息 -->
            <div v-show="tabPosition == 'order'">
                <el-descriptions title="" :column="3">
                    <el-descriptions-item label="公司名称">{{ orderData.enterpriseName }}</el-descriptions-item>
                    <el-descriptions-item label="发起地区划">{{ orderData.drivingLicenseNumber }}</el-descriptions-item>
                    <el-descriptions-item label="订单编号">{{ orderData.code }}</el-descriptions-item>
                    <el-descriptions-item label="机动车驾驶证编号">{{ orderData.drivingLicenseNumber }}</el-descriptions-item>
                    <el-descriptions-item label="驾驶员手机号">{{ orderData.driverPhone }}</el-descriptions-item>
                    <el-descriptions-item label="车辆号牌">{{ orderData.vehicleNumber }}</el-descriptions-item>
                    <el-descriptions-item label="派单时间">{{ orderData.orderDeliveryTime }}</el-descriptions-item>
                    <el-descriptions-item label="订单发起时间">{{ orderData.orderTime }}</el-descriptions-item>
                    <el-descriptions-item label="乘客备注">{{ orderData.remark }}</el-descriptions-item>
                    <el-descriptions-item label="出发地点">{{ orderData.orderPlace }}</el-descriptions-item>
                    <el-descriptions-item label="下车地点">{{ orderData.dropOffPoint }}</el-descriptions-item>
                    <el-descriptions-item label="运价类型编号">{{ orderData.tariffType }}</el-descriptions-item>
                    <el-descriptions-item label="订单金额">￥{{ orderData.orderAmount }}</el-descriptions-item>
                    <el-descriptions-item label="实付价">￥{{ orderData.paymentAmount }}</el-descriptions-item>
                    <el-descriptions-item label="支付方式">{{ orderData.paymentMode }}</el-descriptions-item>
                </el-descriptions>
            </div>
            <!-- 行程轨迹 -->
            <div v-if="tabPosition == 'track'">
                <div class="mapContainer" id="mapContainers"></div>
            </div>
            <!-- 行程监控 -->
            <div v-if="tabPosition == 'monitoring'">
                <PlayLive :serverIp="monitoringData.serverIp" :serverPort="monitoringData.serverPort"
                    :carId="orderData.carId" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
    data() {
        return {
            dialogVisible: false,
            tabPosition: 'order',
            orderData: {},
            monitoringData: {},
            travelData: [],
        };
    },
    computed: {},
    watch: {
        tabPosition(val) {
            if (val == 'track') {
                this.$nextTick(() => {
                    this.initMap();
                })
                return
            }
        }
    },
    methods: {
        initData(orderData = {}, monitoringData = {}, travelData = []) {
            console.log('////////////////////////');
            
            this.orderData = orderData
            this.monitoringData = monitoringData
            this.travelData = travelData
            this.dialogVisible = true
        },
        initMap() {
            window._AMapSecurityConfig = {
                securityJsCode: this.$secretKey,
            };
            AMapLoader.load({
                key: this.$mapKey,
                version: "2.0",
                plugins: [
                    "AMap.ToolBar",
                ],
            })
                .then((AMap) => {
                    // 转换 travelData 中的坐标
                    const wgs84Path = this.travelData.map(item => [item.longitude, item.latitude]);
                    const batchSize = 40; // 每次转换 40 对坐标
                    const batches = [];

                    // 分批处理
                    for (let i = 0; i < wgs84Path.length; i += batchSize) {
                        batches.push(wgs84Path.slice(i, i + batchSize));
                    }

                    const gcj02Path = [];
                    const promises = batches.map(batch => {
                        return new Promise((resolve, reject) => {
                            AMap.convertFrom(batch, 'gps', (status, result) => {
                                if (status === 'complete' && result.locations) {
                                    resolve(result.locations);
                                } else {
                                    reject(result);
                                }
                            });
                        });
                    });

                    // 等待所有批次转换完成
                    Promise.all(promises)
                        .then(results => {
                            results.forEach(batchResult => {
                                gcj02Path.push(...batchResult);
                            });

                            // 开始绘制地图
                            this.map = new AMap.Map("mapContainers", {
                                center: gcj02Path[Math.floor(gcj02Path.length / 2)], // 使用转换后的中点坐标
                                zoom: 12,
                            });
                            this.map.addControl(new AMap.ToolBar());

                            // 添加起点和终点标记
                            const marker = [
                                new AMap.Marker({
                                    content: `<div class="custom-content-marker">起点</div>`,
                                    position: gcj02Path[0],
                                    offset: new AMap.Pixel(-35, -25),
                                }),
                                new AMap.Marker({
                                    content: `<div class="custom-content-marker-two">终点</div>`,
                                    position: gcj02Path[gcj02Path.length - 1],
                                    offset: new AMap.Pixel(-35, -25),
                                }),
                            ];
                            this.map.add(marker);

                            // 绘制路径
                            const polyline = new AMap.Polyline({
                                path: gcj02Path,
                                strokeWeight: 3,
                                strokeColor: "red",
                                lineJoin: "round",
                            });
                            this.map.add(polyline);

                            // 强制刷新地图
                            this.$nextTick(() => {
                                this.map.resize();
                            });
                        })
                        .catch(error => {
                            console.error('坐标转换失败', error);
                        });
                })
                .catch((e) => {
                    console.log(e);
                });
        },
        closeClick() {
            this.dialogVisible = false
            this.tabPosition = 'order'
            this.orderData = {}
            this.monitoringData = {}
            this.travelData = []
        },
    },
};
</script>
<style>
.custom-content-marker {
    width: 50px;
    height: 50px;
    background-color: blue;
    color: #fff;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
}

.custom-content-marker-two {
    width: 50px;
    height: 50px;
    background-color: orange;
    color: #fff;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
}

.custom-content-marker img {
    width: 100%;
    height: 100%;
}
</style>
<style scoped lang="less">
::v-deep .el-descriptions .el-descriptions-item__cell {
    padding-bottom: 25px;
}

#mapContainers {
    width: 100%;
    height: 500px;
}
</style>

 src/view/car-manage/detail.vue

@@ -28,7 +28,7 @@
                </div>
            </div>
            <div class="info-right flex2">
                <video style="width: 100%;height: 100%;" src="../../assets/homeImg/QQ20241223-103023.mp4"></video>
                <PlayLive></PlayLive>
            </div>
        </div>
        <div class="tab-content ml--100 mr--30">
@@ -36,7 +36,7 @@
                <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="index" label="序号"></el-table-column>
                            <el-table-column type="index" width="80" label="序号"></el-table-column>
                            <el-table-column prop="code" label="订单编号"></el-table-column>
                            <el-table-column prop="vehicleNumber" label="车牌号"></el-table-column>
                            <el-table-column prop="licensePlateColor" label="车牌颜色"></el-table-column>
@@ -50,7 +50,7 @@
                            <el-table-column prop="orderAmount" label="订单金额"></el-table-column>
                            <el-table-column prop="option" label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="handle(scope.$index, scope.row)">详情</el-button>
                                    <el-button type="text" @click="showDetails(scope.row)">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
@@ -66,7 +66,7 @@
                <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="index" label="序号" fixed width="80"></el-table-column>
                            <el-table-column type="index" label="序号" fixed width="80"></el-table-column>
                            <el-table-column prop="carName" label="车辆名称" width="120" fixed></el-table-column>
                            <el-table-column prop="vehicleNumber" label="车牌号码" width="120" fixed></el-table-column>
                            <el-table-column prop="keepWarn" label="持续报警" width="120"></el-table-column>
@@ -105,7 +105,7 @@
                            <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 :value-format="'yyyy-MM-dd HH:mm'" v-model="searchForm.date"
                                    <el-date-picker :value-format="'yyyy-MM-dd HH:mm:ss'" v-model="searchForm.date"
                                        type="datetimerange" range-separator="至" start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                    </el-date-picker>
@@ -125,6 +125,7 @@
            </el-tabs>
        </div>
        <DetailModal ref="detailModal" :detail="detail" />
        <DetailOrderModal ref="detailOrder" />
        <el-drawer :visible.sync="drawer" append-to-body :size="450" @close="closeDrawer">
            <div class="flex j-between a-center fs--20 pl--15 pr--15">
                <!-- 使用 Tailwind CSS 的内联十六进制颜色类 -->
@@ -202,10 +203,13 @@
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import DetailModal from "./components/detailModal.vue";
import { getCarDetail, getCarOrder, getCarWarning, getCarTrack, getCarVideo,getDetail } from './service'
import PlayLive from '@/components/PlayLive/index.vue'
import DetailOrderModal from "./components/detailOrderModal.vue";
import { getCarDetail, getCarOrder, getCarWarning, getCarTrack, getCarVideo,getDetail,getOrderInfo,getOrderTravel,getOrderMonitoring} from './service'
import moment from "moment";
export default {
    name: "detail",
    components: { DetailModal },
    components: { DetailModal,DetailOrderModal,PlayLive },
    data() {
        return {
            id: '',
@@ -220,6 +224,7 @@
            activeName: 'first',
            routeList: [],
            videoObj: {},
            loading:false,
            drawer: false,
            showWarnDetail: false,
            info: {},
@@ -240,6 +245,20 @@

    },
    methods: {
        showDetails(row) {
            this.loading = true
            Promise.all([getOrderInfo(row.id), getOrderTravel({ id: row.id })]).then(res => {
                getOrderMonitoring({ id: row.id }).then(resp => {
                    this.$refs.detailOrder.initData(res[0], resp, res[1])
                    this.loading = false
                }).catch(err => {
                    this.$refs.detailOrder.initData(res[0], {}, res[1])
                    this.loading = false
                })
            }).catch(err => {
                this.loading = false
            })
        },
        closeDrawer() {
            this.drawer = false
            this.showWarnDetail = false
@@ -318,8 +337,8 @@
                    pageCurr: 1,
                    pageSize: 10,
                    total: 0,
                    startTime: this.searchForm.date[0],
                    endTime: this.searchForm.date[1],
                    startTime: moment(this.searchForm.date[0]).format('YYYY-MM-DD 00:00:00'),
                    endTime: moment(this.searchForm.date[1]).format('YYYY-MM-DD 23:59:59'),
                }
                getCarTrack({ ...this.searchForm, vehicleNumber: this.detail.vehicleNumber }).then(res => {
                    this.routeList = res;

 src/view/car-manage/index.vue

@@ -3,23 +3,23 @@
        <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="carNumber" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.carNumber" placeholder="请输入"></el-input>
                    <el-form-item label="车牌号:" prop="vehicleNumber" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.vehicleNumber" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称:" prop="companyName" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.companyName" placeholder="请输入"></el-input>
                    <el-form-item label="公司名称:" prop="enterpriseName" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.enterpriseName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="所属车主:" prop="ownerName" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.ownerName" placeholder="请输入"></el-input>
                    <el-form-item label="所属车主:" prop="driverName" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.driverName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆颜色:" prop="carColor" class="unset_m" style="margin-right: 15px;">
                    <el-form-item label="车身颜色:" prop="carColor" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.carColor" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆经营区域:" prop="operationArea" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.operationArea" placeholder="请输入"></el-input>
                    <el-form-item label="车辆经营区域:" prop="area" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.area" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆型号:" prop="carModel" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.carModel" placeholder="请输入"></el-input>
                    <el-form-item label="车辆型号:" prop="brandModel" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.brandModel" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="核定载客位:" prop="startNum" class="unset_m" style="margin-right: 15px;">
                        <el-form-item prop="startNum" style="margin-right: unset !important;">
@@ -30,13 +30,13 @@
                            <el-input class="w--90" v-model="searchForm.endNum" placeholder="请输入最大值"></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="车辆运营类型:" prop="operationType" class="unset_m" style="margin-right: 15px;">
                        <el-select :popper-append-to-body="false" v-model="searchForm.operationType" placeholder="请选择">
                    <el-form-item label="车辆运营类型:" prop="operateType" class="unset_m" style="margin-right: 15px;">
                        <el-select :popper-append-to-body="false" v-model="searchForm.operateType" placeholder="请选择">
                            <el-option v-for="(item,index) in options" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆状态:" prop="carStatus" class="unset_m" style="margin-right: 15px;">
                        <el-select :popper-append-to-body="false" v-model="searchForm.carStatus" placeholder="请选择">
                    <el-form-item label="车辆状态:" prop="status" class="unset_m" style="margin-right: 15px;">
                        <el-select :popper-append-to-body="false" v-model="searchForm.status" placeholder="请选择">
                            <el-option label="在线" value="1"></el-option>
                            <el-option label="异常" value="2"></el-option>
                            <el-option label="离线" value="3"></el-option>
@@ -69,8 +69,8 @@
                <el-table-column prop="status" label="车辆状态">
                    <template slot-scope="scope">
                       <el-tag v-if="scope.row.status == 1" type="success">在线</el-tag>
                       <el-tag v-if="scope.row.status == 2" type="warning">异常</el-tag>
                       <el-tag v-if="scope.row.status == 4" type="warning">故障</el-tag>
                       <el-tag v-if="scope.row.status == 2" type="danger">异常</el-tag>
                       <el-tag v-if="scope.row.status == 4" type="danger">故障</el-tag>
                       <el-tag v-if="scope.row.status == 3" type="info">离线</el-tag>
                    </template>
                </el-table-column>
@@ -99,16 +99,16 @@
    data() {
        return {
            searchForm: {
                carNumber: '', // 车辆号
                companyName: '', // 公司名称
                ownerName: '', // 所属车主
                vehicleNumber: '', // 车辆号
                enterpriseName: '', // 公司名称
                driverName: '', // 所属车主
                carColor: '', // 车辆颜色
                operationArea: '', // 车辆经营区域
                carModel: '', // 车辆型号
                area: '', // 车辆经营区域
                brandModel: '', // 车辆型号
                startNum: '', // 核定载客位最小值
                endNum: '', // 核定载客位最大值
                operationType: '', // 车辆运营类型
                carStatus: '', // 车辆状态
                operateType: '', // 车辆运营类型
                status: '', // 车辆状态
                total: 0,
                pageCurr: 1,
                pageSize: 10
@@ -125,7 +125,7 @@
        const query = this.$route.query;
        if (query && Object.keys(query).length > 0) {
            if(query.id){
                this.searchForm.operationType = Number(query.id);
                this.searchForm.operateType = Number(query.id);
            }
        }
        this.getList();
@@ -133,16 +133,16 @@
    methods: {
        reset() {
            this.searchForm = {
                carNumber: '',
                companyName: '',
                ownerName: '',
                vehicleNumber: '',
                enterpriseName: '',
                driverName: '',
                carColor: '',
                operationArea: '',
                carModel: '',
                area: '',
                brandModel: '',
                minSeats: '',
                maxSeats: '',
                operationType: '',
                carStatus: '',
                operateType: '',
                status: '',
                total: 0,
                pageCurr: 1,
                pageSize: 10

 src/view/car-manage/service.js

@@ -40,4 +40,20 @@
export const getDetail = (params) => {
    console.log(params)
    return axios.get('/system/warn/getCarWarnInfo', {params})
}
}

// 获取订单详情
export const getOrderInfo = (id) => {
    return axios.get(`/system/order/getOrderInfo/${id}`)
}


// 获取订单行程轨迹
export const getOrderTravel = (params) => {
    return axios.get(`/system/order/getOrderTravel`, { params })
}

// 获取订单监控
export const getOrderMonitoring = (params) => {
    return axios.get(`/system/order/getOrderMonitoring`, { params })
}