Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-ve...

董国庆

2025-04-08 f469931c87785c7ef9eb19d6949863ab38a4a7ed

Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-vehicle-supervision

 src/view/car-manage/detail.vue

@@ -7,14 +7,14 @@
                </div>
                <div class="info-content-left ml--100">
                    <el-descriptions :column="2">
                        <el-descriptions-item label="公司名称">{{detail.enterpriseName}}</el-descriptions-item>
                        <el-descriptions-item label="车牌号码">{{detail.vehicleNumber}}</el-descriptions-item>
                        <el-descriptions-item label="车牌颜色">{{detail.licensePlateColor}}</el-descriptions-item>
                        <el-descriptions-item label="车辆营运类型">{{detail.operateType}}</el-descriptions-item>
                        <el-descriptions-item label="所属车主">{{detail.driverName}}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{detail.driverPhone}}</el-descriptions-item>
                        <el-descriptions-item label="经营区域">{{detail.operatingArea}}</el-descriptions-item>
                        <el-descriptions-item label="车辆年度审验">{{detail.annualReviewStatus}}</el-descriptions-item>
                        <el-descriptions-item label="公司名称">{{ detail.enterpriseName }}</el-descriptions-item>
                        <el-descriptions-item label="车牌号码">{{ detail.vehicleNumber }}</el-descriptions-item>
                        <el-descriptions-item label="车牌颜色">{{ detail.licensePlateColor }}</el-descriptions-item>
                        <el-descriptions-item label="车辆营运类型">{{ detail.operateType }}</el-descriptions-item>
                        <el-descriptions-item label="所属车主">{{ detail.driverName }}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{ detail.driverPhone }}</el-descriptions-item>
                        <el-descriptions-item label="经营区域">{{ detail.operatingArea }}</el-descriptions-item>
                        <el-descriptions-item label="车辆年度审验">{{ detail.annualReviewStatus }}</el-descriptions-item>
                        <el-descriptions-item label="驾驶证" v-if="detail.drivingLicense">
                            <img class="img-size" :src="detail.drivingLicense"></img>
                        </el-descriptions-item>
@@ -36,19 +36,19 @@
                <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="操作">
                            <el-table-column prop="index" 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>
                            <el-table-column prop="enterpriseName" label="车辆所属公司"></el-table-column>
                            <el-table-column prop="boardingPoint" label="上车地点"></el-table-column>
                            <el-table-column prop="dropOffPoint" label="下车地点"></el-table-column>
                            <el-table-column prop="passengerMileage" label="载客里程"></el-table-column>
                            <el-table-column prop="driverName" label="驾驶员姓名"></el-table-column>
                            <el-table-column prop="driverPhone" label="驾驶员电话"></el-table-column>
                            <el-table-column prop="orderDeliveryTime" label="派单时间"></el-table-column>
                            <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>
                                </template>
@@ -66,26 +66,26 @@
                <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="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>
                            <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-column prop="driverName" label="驾驶员名称" width="120"></el-table-column>
                            <el-table-column prop="enterpriseName" label="所属公司" width="120"></el-table-column>
                            <el-table-column prop="terminalNumber" label="终端编号" width="120"></el-table-column>
                            <el-table-column prop="startTime" label="开始报警时间" width="120"></el-table-column>
                            <el-table-column prop="endTime" label="结束报警时间" width="120"></el-table-column>
                            <el-table-column prop="keepTime" label="持续时长" width="120"></el-table-column>
                            <el-table-column prop="keepDistance" label="持续里程数" width="120"></el-table-column>
                            <el-table-column prop="warnType" label="报警类型" width="120"></el-table-column>
                            <el-table-column prop="warnNumber" label="报警次数" width="120"></el-table-column>
                            <el-table-column prop="treatmentState" label="处理状态" width="120"></el-table-column>
                            <el-table-column prop="treatmentUser" label="处理人" width="120"></el-table-column>
                            <el-table-column prop="treatmentTime" label="处理时间" width="120"></el-table-column>
                            <el-table-column prop="treatmentRemark" 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.pageCurr" background
@@ -100,8 +100,8 @@
                            <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="datetimerange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                                    <el-date-picker :value-format="'yyyy-MM-dd HH:mm'" v-model="searchForm.date" type="datetimerange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
@@ -118,15 +118,14 @@
                </el-tab-pane>
            </el-tabs>
        </div>
        <DetailModal ref="detailModal" :detail="detail"
  />
        <DetailModal ref="detailModal" :detail="detail" />
    </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import DetailModal from "./components/detailModal.vue";
import { getCarDetail,getCarOrder,getCarWarning,getCarTrack } from './service'
import { getCarDetail, getCarOrder, getCarWarning, getCarTrack,getCarVideo } from './service'
export default {
    name: "detail",
    components: { DetailModal },
@@ -137,61 +136,84 @@
            searchForm: {
                pageCurr: 1,
                pageSize: 10,
                total: 0
                total: 0,
                date: undefined,
            },
            detail:{},
            detail: {},
            activeName: 'first',
            routeList:[],
            routeList: [],
            videoObj:{},
        }
    },
    mounted() {
        if(this.$route.query.id){
            getCarDetail({id: this.$route.query.id}).then(res => {
        if (this.$route.query.id) {
            getCarDetail({ id: this.$route.query.id }).then(res => {
                this.detail = res;
                this.getList(res.vehicleNumber);
            })
            getCarVideo({ id: this.$route.query.id }).then(res => {
                this.videoObj = res;
            })
        }
        

    },
    methods: {
        handleClick(e) {
            this.activeName = e.name
            if(e.name != 'third'){
            if (e.name != 'third') {
                this.searchForm = {
                    pageCurr: 1,
                    pageSize: 10,
                    total: 0,
                }
                this.getList(this.detail.vehicleNumber)
            }else{
                getCarTrack({...this.searchForm,vehicleNumber:this.detail.vehicleNumber}).then(res => {
                  this.routeList = res;
                  if(res.length > 0){
                    this.initMap();
                  }
            } else {
                getCarTrack({ ...this.searchForm, vehicleNumber: this.detail.vehicleNumber }).then(res => {
                    this.routeList = res;
                    if (res.length > 0) {
                        this.initMap();
                    }
                })
            }
        },
        search() {
            console.log('shuju',this.searchForm.date);
            
            if(this.searchForm.date != undefined) {

         },
                this.searchForm={
                    pageCurr: 1,
                    pageSize: 10,
                    total: 0,
                    startTime: this.searchForm.date[0],
                    endTime: this.searchForm.date[1],
                }
                getCarTrack({ ...this.searchForm, vehicleNumber: this.detail.vehicleNumber }).then(res => {
                    this.routeList = res;
                    if (res.length > 0) {
                        this.initMap();
                    }
                })
            }

        },
        reset() {
        },
        getList(vehicleNumber) { 
            if(this.activeName == 'first'){
                getCarOrder({...this.searchForm,vehicleNumber:vehicleNumber}).then(res => {
        getList(vehicleNumber) {
            if (this.activeName == 'first') {
                getCarOrder({ ...this.searchForm, vehicleNumber: vehicleNumber }).then(res => {
                    this.tableData = res.records;
                    this.searchForm.total = res.total;
                }) 
            }else{
                getCarWarning({...this.searchForm,vehicleNumber:vehicleNumber}).then(res => {
                    this.tableData = res.records; 
                })
            } else {
                getCarWarning({ ...this.searchForm, vehicleNumber: vehicleNumber }).then(res => {
                    this.tableData = res.records;
                    this.searchForm.total = res.total;
                })
            }
        },

        

        showDetail() {
            this.$refs.detailModal.dialogVisible = true
        },
@@ -213,23 +235,50 @@
                    });
                    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),
                    ]
                    let path = []
                    const iconMap = {
                        出租车: {
                            icon: require("../../assets/homeImg/taxi.png"),
                            size: new AMap.Size(75, 37),
                        },
                        公交车: {
                            icon: require("../../assets/homeImg/bus.png"),
                            size: new AMap.Size(62, 34),
                        },
                        危险品: {
                            icon: require("../../assets/homeImg/risk.png"),
                            size: new AMap.Size(69, 32),
                        },
                        郊游: {
                            icon: require("../../assets/homeImg/outing.png"),
                            size: new AMap.Size(61, 31),
                        },
                        货运: {
                            icon: require("../../assets/homeImg/expressage.png"),
                            size: new AMap.Size(60, 31),
                        },
                        网约车: {
                            icon: require("../../assets/homeImg/online.png"),
                            size: new AMap.Size(75, 33),
                        },
                        客运: {
                            icon: require("../../assets/homeImg/passenger.png"),
                            size: new AMap.Size(69, 31),
                        },
                    };

                    this.routeList.forEach(item => {
                        path.push(new AMap.LngLat(item.longitude, item.latitude))
                    })

                    const content = `<div class="custom-content-marker">
                                        <img src="${require("@/assets/logo.png")}">
                                        <img src="${iconMap[this.detail.operateType].icon}">
                                    </div>`;
                    const marker = new AMap.Marker({
                        content: content, //自定义点标记覆盖物内容
                        position: [105.57, 30.51], //基点位置
                        offset: new AMap.Pixel(-30, -15), //相对于基点的偏移位置
                        size: iconMap[this.detail.operateType].size,
                    });
                    this.map.add(marker);
                    let polyline = new AMap.Polyline({

 src/view/car-manage/service.js

@@ -29,4 +29,9 @@
//获取车辆详情行程轨迹
export const getCarTrack = (data) => {
    return axios.get(`/system/car/getCarTravel`, {params:data}) 
}

//获取车辆详情实时视频
export const getCarVideo = (data) => {
    return axios.get(`/system/car/getRealVideo/${data.id}`)  
}