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

hejianhao

2025-04-07 22c83e8a1c4049972c4506d15f49b0b3b3be2ea1

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

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

@@ -2,35 +2,35 @@
    <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-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.passengerCapacity}}</el-descriptions-item>
                <el-descriptions-item label="车辆厂牌">{{detail.brand}}</el-descriptions-item>
                <el-descriptions-item label="车辆型号">{{detail.brandModel}}</el-descriptions-item>
                <el-descriptions-item label="车辆类型">{{detail.vehicleType}}</el-descriptions-item>
                <el-descriptions-item label="所属车主">{{detail.driverName}}</el-descriptions-item>
                <el-descriptions-item label="车身颜色">{{detail.vehicleColor}}</el-descriptions-item>
                <el-descriptions-item label="发动机号">{{detail.engineNumber}}</el-descriptions-item>
                <el-descriptions-item label="车辆VIN码">{{detail.vin}}</el-descriptions-item>
                <el-descriptions-item label="车辆注册日期">{{detail.registrationDate}}</el-descriptions-item>
                <el-descriptions-item label="车辆燃料类型">{{detail.fuelType}}</el-descriptions-item>
                <el-descriptions-item label="发动机排量">{{detail.engineCapacity}}</el-descriptions-item>
                <el-descriptions-item label="车辆运输证发证机构">{{detail.transportLicenseIssuingAuthority}}</el-descriptions-item>
                <el-descriptions-item label="车辆经营区域">{{detail.operatingArea}}</el-descriptions-item>
                <el-descriptions-item label="运输证字号">{{detail.transportCertificateNumber}}</el-descriptions-item>
                <el-descriptions-item label="车辆运输证有效期起">{{detail.transportCertificateStart}}</el-descriptions-item>
                <el-descriptions-item label="车辆运输证有效期止">{{detail.transportCertificateEnd}}</el-descriptions-item>
                <el-descriptions-item label="车辆初次登记日期">{{detail.initialRegistrationTime}}</el-descriptions-item>
                <el-descriptions-item label="车辆检修状态">{{detail.vehicleMaintenanceStatus}}</el-descriptions-item>
                <el-descriptions-item label="车辆年度审验状态">{{detail.annualReviewStatus}}</el-descriptions-item>
                <el-descriptions-item label="卫星定位装置品牌">{{detail.gpsBrand}}</el-descriptions-item>
                <el-descriptions-item label="卫星定位装置型号">{{detail.gpsModel}}</el-descriptions-item>
                <el-descriptions-item label="卫星定位装置IMEI号">{{detail.gpsImei}}</el-descriptions-item>
                <el-descriptions-item label="卫星定位设备安装日期">{{detail.gpsInstallationDate}}</el-descriptions-item>
                <el-descriptions-item label="注册日期">{{detail.registrationDate}}</el-descriptions-item>
                <el-descriptions-item label="营运类型">{{detail.operateType}}</el-descriptions-item>
                <el-descriptions-item label="运价类型编码">{{detail.rateTypeNumber}}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
@@ -39,7 +39,12 @@
<script>
export default {
    components: {},
    props: {},
    props: {
        detail: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            dialogVisible: false

 src/view/car-manage/detail.vue

@@ -3,23 +3,23 @@
        <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>
                    <span class="back-size" @click="$router.back()"><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 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>
                        <el-descriptions-item label="行驶证">
                            <img class="img-size" src="../../assets/homeImg/img2.png"></img>
                        <el-descriptions-item label="行驶证" v-if="detail.travelLicense">
                            <img class="img-size" :src="detail.travelLicense"></img>
                        </el-descriptions-item>
                    </el-descriptions>
                    <div class="info-btn" @click="showDetail">
@@ -57,7 +57,7 @@

                        <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
                                @current-change="handleCurrentChange" :current-page="searchForm.pageCurr" background
                                layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total">
                            </el-pagination>
                        </div>
@@ -88,7 +88,7 @@

                        <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
                                @current-change="handleCurrentChange" :current-page="searchForm.pageCurr" background
                                layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total">
                            </el-pagination>
                        </div>
@@ -100,12 +100,10 @@
                            <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 v-model="searchForm.date" type="datetimerange" 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">
@@ -120,13 +118,15 @@
                </el-tab-pane>
            </el-tabs>
        </div>
        <DetailModal ref="detailModal" />
        <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'
export default {
    name: "detail",
    components: { DetailModal },
@@ -135,28 +135,63 @@
            id: '',
            tableData: [],
            searchForm: {
                date: '',
                type: '',
                level: '',
                name: '',
                total: 40,
                page: 1,
                pageSize: 10
                pageCurr: 1,
                pageSize: 10,
                total: 0
            },
            activeName: 'first'
            detail:{},
            activeName: 'first',
            routeList:[],
        }
    },
    mounted() {
        this.initMap();
        if(this.$route.query.id){
            getCarDetail({id: this.$route.query.id}).then(res => {
                this.detail = res;
                this.getList(res.vehicleNumber);
            })
        }
        
    },
    methods: {
        handleClick(){

        handleClick(e) {
            this.activeName = e.name
            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();
                  }
                })
            }
        },
        search(){},
        search() {

         },
        reset() {

        },
        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; 
                    this.searchForm.total = res.total;
                })
            }
        },

        
        showDetail() {
            this.$refs.detailModal.dialogVisible = true
        },
@@ -177,12 +212,17 @@
                        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),
                        // 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),
                    ]
                    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")}">
                                    </div>`;

 src/view/car-manage/index.vue

@@ -3,45 +3,44 @@
        <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-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    <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>
                    <el-form-item label="公司名称:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    <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>
                    <el-form-item label="所属车主:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    <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>
                    <el-form-item label="车辆颜色:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    <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="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    <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>
                    <el-form-item label="车辆型号:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    <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>
                    <el-form-item label="车辆型号:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-form-item prop="level" style="margin-right: unset !important;">
                            <el-input class="w--90" v-model="searchForm.level" placeholder="请输入"></el-input>
                    <el-form-item label="核定载客位:" prop="startNum" class="unset_m" style="margin-right: 15px;">
                        <el-form-item prop="startNum" style="margin-right: unset !important;">
                            <el-input class="w--90" v-model="searchForm.startNum" placeholder="请输入最小值"></el-input>
                        </el-form-item>
                        <span class="mr--5 ml--5">-</span>
                        <el-form-item prop="level" class="unset_m">
                            <el-input  class="w--90"  v-model="searchForm.level" placeholder="请输入"></el-input>
                        <el-form-item prop="endNum" class="unset_m">
                            <el-input class="w--90" v-model="searchForm.endNum" placeholder="请输入最大值"></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="车辆运营类型:" prop="type" class="unset_m" style="margin-right: 15px;">
                        <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="预警" value="1"></el-option>
                            <el-option label="报警" value="2"></el-option>
                    <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-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="type" class="unset_m" style="margin-right: 15px;">
                        <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="预警" value="1"></el-option>
                            <el-option label="报警" value="2"></el-option>
                    <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-option label="在线" value="1"></el-option>
                            <el-option label="异常" value="2"></el-option>
                            <el-option label="离线" value="3"></el-option>
                            <el-option label="故障" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
@@ -59,19 +58,27 @@
        </div>
        <div class="table-box ml--30 mt--23 mr--30">
            <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 type="index" label="序号" width="60"></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="passengerCapacity" label="核定载客位"></el-table-column>
                <el-table-column prop="brandModel" label="车辆型号"></el-table-column>
                <el-table-column prop="vehicleType" label="车辆类型"></el-table-column>
                <el-table-column prop="driverName" label="车主"></el-table-column>
                <el-table-column prop="vehicleColor" label="车身颜色"></el-table-column>
                <el-table-column prop="registrationDate" label="车辆注册日期"></el-table-column>
                <el-table-column prop="operatingArea" label="车辆经营区域"></el-table-column>
                <el-table-column prop="operateType" label="车辆运营类型"></el-table-column>
                <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 == 3" type="info">离线</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handle(scope.$index, scope.row)">详情</el-button>
                    </template>
@@ -85,44 +92,89 @@
                </el-pagination>
            </div>
        </div>



    </div>
</template>

<script>
import { getCarList,getCarType } from './service'
import { search } from 'core-js/fn/symbol';

export default {
    data() {
        return {
            searchForm: {
                date: '',
                type: '',
                level: '',
                name: '',
                total: 40,
                page: 1,
                carNumber: '', // 车辆号
                companyName: '', // 公司名称
                ownerName: '', // 所属车主
                carColor: '', // 车辆颜色
                operationArea: '', // 车辆经营区域
                carModel: '', // 车辆型号
                startNum: '', // 核定载客位最小值
                endNum: '', // 核定载客位最大值
                operationType: '', // 车辆运营类型
                carStatus: '', // 车辆状态
                total: 0,
                pageCurr: 1,
                pageSize: 10
            },
            options:[],
            tableData: [],
        };
    },
    created() {
        getCarType().then(res => {
            this.options = res;
        });
        this.getList();
    },
    methods: {
        reset() {
            this.searchForm = {
                carNumber: '',
                companyName: '',
                ownerName: '',
                carColor: '',
                operationArea: '',
                carModel: '',
                minSeats: '',
                maxSeats: '',
                operationType: '',
                carStatus: '',
                total: 0,
                pageCurr: 1,
                pageSize: 10
            };
         
            this.getList();
        },
        search() {

            this.searchForm.pageCurr = 1;
            this.getList();
        },
        async getList() {
            try {
                const res = await getCarList({...this.searchForm});
                this.tableData = res.records || [];
                this.searchForm.total = res.total || 0;
            } catch (error) {
                console.error('获取车辆列表失败:', error);
            }
        },
        exportExcell() {

            // TODO: 实现导出功能
        },
        handleSizeChange(e) {
            this.searchForm.pageSize = e
            this.searchForm.pageSize = e;
            this.getList();
        },
        handleCurrentChange(e) {
            this.searchForm.page = e
            this.searchForm.pageCurr = e;
            this.getList();
        },
        handle(index, row) {
            // TODO: 实现详情查看功能
            console.log('查看详情:', row);
            this.$router.push({ path: '/car-detail', query: { id: row.id } });
        },
    }
}

 src/view/car-manage/service.js

New file
@@ -0,0 +1,32 @@
import axios from '@/utils/request';

// 获取车辆列表
export const getCarList = (data) => {
    console.log(data)
    return axios.get('/system/car/getCarList', {params:data})
}

//获取获取车辆类型
export const getCarType = (data) => {
    return axios.get('/system/car/getCarTypeList', data) 
}

//获取车辆详情
export const getCarDetail = (data) => {
    return axios.get(`/system/car/getCarInfo/${data.id}`, data)
}

//获取车辆详情订单数据
export const getCarOrder = (data) => {
    return axios.get(`/system/order/getOrderList`, {params:data})  
}

//获取车辆详情预警数据
export const getCarWarning = (data) => {
    return axios.get(`/system/warn/getCarWarnList`, {params:data})
}

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

 src/view/home/index.vue

@@ -6,55 +6,28 @@
      <div class="carCount">

        <div class="title">车辆统计</div>

        <div class="fir">

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img1.png" />

          <div

            class="countCard"

            v-for="(item, index) in carCountData.slice(0, 3)"

            :key="item.id"

          >

            <img class="iconImg" :src="imgList[index]" />

            <div>

              <div class="name">出租车(辆)</div>

              <div class="num">888</div>

            </div>

          </div>

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img2.png" />

            <div>

              <div class="name">网约车(辆)</div>

              <div class="num">888</div>

            </div>

          </div>

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img3.png" />

            <div>

              <div class="name">客运(辆)</div>

              <div class="num">888</div>

              <div class="name">{{ item.name || "" }}(辆)</div>

              <div class="num">{{ item.carNum || 0 }}</div>

            </div>

          </div>

        </div>

        <div class="sec">

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img4.png" />

          <div

            class="countCard"

            v-for="(item, index) in carCountData.slice(3, 7)"

            :key="item.id"

          >

            <img class="iconImg" :src="imgList[index + 3]" />

            <div>

              <div class="name">郊游(辆)</div>

              <div class="num">888</div>

            </div>

          </div>

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img5.png" />

            <div>

              <div class="name">公交车(辆)</div>

              <div class="num">888</div>

            </div>

          </div>

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img6.png" />

            <div>

              <div class="name">危险品(辆)</div>

              <div class="num">888</div>

            </div>

          </div>

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img7.png" />

            <div>

              <div class="name">货运(辆)</div>

              <div class="num">888</div>

              <div class="name">{{ item.name || "" }}(辆)</div>

              <div class="num">{{ item.carNum || 0 }}</div>

            </div>

          </div>

        </div>

@@ -66,14 +39,14 @@
          <div class="statusCard">

            <div class="statusLeft">

              <div class="name">在线</div>

              <div class="num">8888</div>

              <div class="num">{{ carStatusData.online || 0 }}</div>

            </div>

            <el-progress

              type="circle"

              :width="20"

              :show-text="false"

              stroke-linecap="butt"

              :percentage="25"

              :percentage="carStatusData.onlinePercent"

              color="rgba(91, 143, 249, 1)"

              define-back-color="rgba(91, 143, 249, 0.25)"

              class="progressCard"

@@ -83,14 +56,14 @@
          <div class="statusCard">

            <div class="statusLeft">

              <div class="name">离线</div>

              <div class="num">8888</div>

              <div class="num">{{ carStatusData.offline || 0 }}</div>

            </div>

            <el-progress

              type="circle"

              :width="20"

              :show-text="false"

              stroke-linecap="butt"

              :percentage="25"

              :percentage="carStatusData.offlinePercent"

              color="rgba(93, 112, 146, 1)"

              define-back-color="rgba(93, 112, 146, 0.25)"

              class="progressCard"

@@ -101,14 +74,14 @@
          <div class="statusCard">

            <div class="statusLeft">

              <div class="name">故障</div>

              <div class="num">8888</div>

              <div class="num">{{ carStatusData.breakdown || 0 }}</div>

            </div>

            <el-progress

              type="circle"

              :width="20"

              :show-text="false"

              stroke-linecap="butt"

              :percentage="25"

              :percentage="carStatusData.breakdownPercent"

              color="rgba(253, 83, 118, 1)"

              define-back-color="rgba(253, 83, 118, 0.25)"

              class="progressCard"

@@ -118,14 +91,14 @@
          <div class="statusCard">

            <div class="statusLeft">

              <div class="name">异常</div>

              <div class="num">8888</div>

              <div class="num">{{ carStatusData.abnormal || 0 }}</div>

            </div>

            <el-progress

              type="circle"

              :width="20"

              :show-text="false"

              stroke-linecap="butt"

              :percentage="25"

              :percentage="carStatusData.abnormalPercent"

              color="rgba(246, 189, 22, 1)"

              define-back-color="rgba(246, 189, 22, 0.25)"

              class="progressCard"

@@ -144,34 +117,50 @@
        <div class="companyCard">

          <div class="lineCard"></div>

          <div class="name">运营公司(家)</div>

          <div class="value">88888</div>

          <div class="value">{{ carStatusData.enterprise || 0 }}</div>

        </div>

        <div class="companyCard">

          <div class="lineCard"></div>

          <div class="name">运营公司(家)</div>

          <div class="value">88888</div>

          <div class="name">运营车辆(辆)</div>

          <div class="value">{{ carStatusData.car || 0 }}</div>

        </div>

        <div class="companyCard">

          <div class="lineCard"></div>

          <div class="name">运营公司(家)</div>

          <div class="value">88888</div>

          <div class="name">驾驶员(人)</div>

          <div class="value">{{ carStatusData.driver || 0 }}</div>

        </div>

      </div>

      <!-- 今日预警 -->

      <div class="todayWarn">

        <div class="title">今日预警</div>

        <div class="warnList">

        <div class="warnList" v-if="warnList.length > 0">

          <div

            class="warnItem"

            v-for="item in 5"

            :key="item"

            :class="['oneWarn', 'twoWarn', 'threeWarn', 'fourWarn'][item - 1]"

            v-for="(item, index) in warnList"

            :key="index"

            :class="

              item.warnLevel

                ? ['oneWarn', 'twoWarn', 'threeWarn', 'fourWarn'][

                    item.warnLevel - 1

                  ]

                : 'fiveWarn'

            "

          >

            <div class="grade">一级</div>

            <div class="grade">

              {{

                item.warnLevel

                  ? ["一级", "二级", "三级", "四级"][item.warnLevel - 1]

                  : "-"

              }}

            </div>

            <div class="info">

              53453453245 川A99999 车辆急刹车 20分钟 11:09:09

              {{ item.vehicleNumber  }} {{ item.warnType  }}

              {{ item.keepTime }} {{ item.startTime }}

            </div>

          </div>

        </div>

        <div class="noData" v-else>

          <el-empty description="暂无数据" :image-size="80"></el-empty>

        </div>

      </div>

      <!-- 预警情况统计 -->

@@ -192,7 +181,7 @@
              class="rankRight"

              :class="[0, 1, 2].includes(index) ? 'rankColor' : ''"

            >

              <div class="rank" :style="{ width: item.value + '%' }"></div>

              <div class="rank" :style="{ width: item.percentage + '%' }"></div>

            </div>

          </div>

        </div>

@@ -209,29 +198,41 @@
import html2canvas from "html2canvas";

import AMapLoader from "@amap/amap-jsapi-loader";

import flvjs from "flv.js";

import {

  getCarCount,

  getCarStatusCount,

  getMapCarList,

  getCarWarnList,

  getWarnGroupCount,

  getWarnGroupCountTop10,

  getCarInfoById,

} from "./service";

export default {

  data() {

    return {

      flvPlayer: null,

      activeIndex: "1",

      activeIndex2: "1",

      countList: [1, 2, 3], //预警情况统计数据

      rankList: [

        { name: "射洪客运公司", value: 90 },

        { name: "滴滴网约车客运公司", value: 80 },

        { name: "滴滴网约车客运公司", value: 70 },

        { name: "滴滴网约车客运公司", value: 60 },

        { name: "滴滴网约车客运公司", value: 50 },

        { name: "滴滴网约车客运公司", value: 40 },

        { name: "滴滴网约车客运公司", value: 30 },

        { name: "滴滴网约车客运公司", value: 20 },

        { name: "滴滴网约车客运公司", value: 10 },

        { name: "滴滴网约车客运公司", value: 0 },

      ], //预警排行榜数据



      map: null, //地图实例



      timer: null,

      markers: [],

      map: null,

      AMap: null,

      infoWindow: null,

      imgList: [

        require("../../assets//homeImg/img1.png"),

        require("../../assets//homeImg/img2.png"),

        require("../../assets//homeImg/img3.png"),

        require("../../assets//homeImg/img4.png"),

        require("../../assets//homeImg/img5.png"),

        require("../../assets//homeImg/img6.png"),

        require("../../assets//homeImg/img7.png"),

      ],

      countList: [], //预警情况统计数据

      rankList: [], //预警排行榜数据

      carList: [], //车辆列表数据

      carCountData: [], //车辆统计数据

      carStatusData: {}, //车辆状态数据

      warnList: [], //预警列表数据

    };

  },

  watch: {

@@ -251,7 +252,6 @@
    },

  },

  created() {

    //初始化窗口点击事件

    window.toCarDetail = (record) => {

      this.toCarDetail(record);

    };

@@ -263,94 +263,176 @@
    };

  },

  mounted() {

    let arr = [

      {

        vehicleType: "出租车",

        vehicleInfo: {

          licensePlate: "川A12345",

          vehicleModel: "BYD E6",

          color: "Red",

        },



        latitude: 31.523333,

        longitude: 105.444444,

      },

      {

        vehicleType: "公交车",

        vehicleInfo: {

          licensePlate: "川A67890",

          vehicleModel: "Yutong ZK6120",

          color: "Blue",

        },



        latitude: 31.512222,

        longitude: 105.432111,

      },

      {

        vehicleType: "郊游",

        vehicleInfo: {

          licensePlate: "川A34567",

          vehicleModel: "Toyota Coaster",

          color: "White",

        },



        latitude: 31.498889,

        longitude: 105.421111,

      },

      {

        vehicleType: "春运",

        vehicleInfo: {

          licensePlate: "川A90123",

          vehicleModel: "King Long XMQ6120",

          color: "Yellow",

        },



        latitude: 31.485556,

        longitude: 105.412222,

      },

      {

        vehicleType: "快递物流车",

        vehicleInfo: {

          licensePlate: "川A45678",

          vehicleModel: "JAC HFC5041",

          color: "Green",

        },



        latitude: 31.472222,

        longitude: 105.402111,

      },

      {

        vehicleType: "网约车",

        vehicleInfo: {

          licensePlate: "川A11111",

          vehicleModel: "Geely GC2",

          color: "Black",

        },



        latitude: 31.462222,

        longitude: 105.392111,

      },

      {

        vehicleType: "客运",

        vehicleInfo: {

          licensePlate: "川A22222",

          vehicleModel: "Yutong ZK6120",

          color: "Gray",

        },



        latitude: 31.452222,

        longitude: 105.382111,

      },

    ];

    this.carList = arr;

    // 调用所有接口

    this.getCarCountData();

    this.getCarStatusData();

    // this.getMapCarData(); // 移除这里的调用，因为 initMap 中会调用

    this.getWarnListData();

    this.getWarnGroupData();

    this.getWarnTop10Data();



    this.initMap();

    setTimeout(() => {

      this.addMarker(this.carList, [105.444444, 31.523333]);

      this.getCountList();

    }, 1000);

    // 设置定时器，每分钟刷新一次数据

    this.timer = setInterval(() => {

      this.getCarCountData();

      this.getCarStatusData();

      this.getMapCarData(); // 保留定时器中的调用

      this.getWarnListData();

      this.getWarnGroupData();

      this.getWarnTop10Data();

    }, 60000);

  },

  beforeDestroy() {

    if (this.timer) {

      clearInterval(this.timer);

    }

    if (this.markers && this.markers.length > 0) {

      this.markers.forEach((marker) => {

        marker.setMap(null);

      });

      this.markers = [];

    }

    if (this.infoWindow) {

      this.infoWindow.close();

    }

    if (this.flvPlayer) {

      this.flvPlayer.destroy();

      this.flvPlayer = null;

    }

  },

  beforeRouteLeave(to, from, next) {

    if (this.infoWindow) {

      this.infoWindow.close();

    }

    if (this.flvPlayer) {

      this.flvPlayer.destroy();

      this.flvPlayer = null;

    }

    next();

  },

  methods: {

    // 获取车辆统计数据

    async getCarCountData() {

      try {

        const res = await getCarCount();

        this.carCountData = res;

      } catch (error) {

        this.$message.error("获取车辆统计数据失败");

      }

    },

    // 获取车辆状态数据

    async getCarStatusData() {

      try {

        const res = await getCarStatusCount();

        // 设置默认值为0，防止空值

        const online = Number(res.online) || 0;

        const offline = Number(res.offline) || 0;

        const breakdown = Number(res.breakdown) || 0;

        const abnormal = Number(res.abnormal) || 0;

        const enterprise = Number(res.enterprise) || 0;

        const car = Number(res.car) || 0;

        const driver = Number(res.driver) || 0;



        // 计算总数

        const total = online + offline + breakdown + abnormal;



        // 计算百分比，如果总数为0则百分比为0

        const onlinePercent =

          total > 0 ? Math.round((online / total) * 100) : 0;

        const offlinePercent =

          total > 0 ? Math.round((offline / total) * 100) : 0;

        const breakdownPercent =

          total > 0 ? Math.round((breakdown / total) * 100) : 0;

        const abnormalPercent =

          total > 0 ? Math.round((abnormal / total) * 100) : 0;

        // 更新数据

        this.carStatusData = {

          online,

          offline,

          breakdown,

          abnormal,

          enterprise,

          car,

          driver,

          total,

          onlinePercent,

          offlinePercent,

          breakdownPercent,

          abnormalPercent,

        };

      } catch (error) {

        this.$message.error("获取车辆状态数据失败");

        // 设置默认值

        this.carStatusData = {

          online: 0,

          offline: 0,

          breakdown: 0,

          abnormal: 0,

          enterprise: 0,

          car: 0,

          driver: 0,

          total: 0,

          onlinePercent: 0,

          offlinePercent: 0,

          breakdownPercent: 0,

          abnormalPercent: 0,

        };

      }

    },

    // 获取地图车辆数据

    async getMapCarData() {

      try {

        const res = await getMapCarList();

        this.carList = res;

        // 确保地图已初始化后再更新标记

        if (this.AMap && this.map) {

          this.updateMarkers(res);

        }

      } catch (error) {

        this.$message.error("获取地图车辆数据失败");

      }

    },

    // 获取预警列表数据

    async getWarnListData() {

      try {

        const res = await getCarWarnList();

        this.warnList = res.records;

      } catch (error) {

        this.$message.error("获取预警列表数据失败");

      }

    },

    // 获取预警统计情况数据

    async getWarnGroupData() {

      try {

        const res = await getWarnGroupCount();

        this.countList = res;

        this.getCountList();

      } catch (error) {

        this.$message.error("获取预警统计情况数据失败");

      }

    },

    // 获取预警排行数据

    async getWarnTop10Data() {

      try {

        const res = await getWarnGroupCountTop10();

        // 判断返回的数组是否为空

        if (!res || res.length === 0) {

          this.rankList = [];

          return;

        }

        // 计算所有num的总和

        const total = res.reduce((sum, item) => sum + (item.num || 0), 0);

        // 为每个数据项添加百分比属性

        this.rankList = res.map((item) => ({

          ...item,

          percentage:

            total > 0 ? (((item.num || 0) / total) * 100).toFixed(2) : 0,

        }));

      } catch (error) {

        this.$message.error("获取预警排行数据失败");

        this.rankList = [];

      }

    },

    // 初始化地图

    initMap() {

      window._AMapSecurityConfig = {

@@ -367,111 +449,101 @@
        ],

      })

        .then((AMap) => {

          this.AMap = AMap;

          this.map = new AMap.Map("mapContainer", {

            center: [105.574542, 30.5061493],

            zoom: 15,

            zoom: 8,

          });

          this.infoWindow = new AMap.InfoWindow({

            offset: new AMap.Pixel(30, 30),

            autoMove: true,

            anchor: "top-center",

          });

          this.getMapCarData();

        })

        .catch((e) => {

          console.log(e);

          this.$message.error("地图加载失败");

        });

    },



    // 地图点位渲染

    addMarker(arr, centerList) {

      this.map = new AMap.Map("mapContainer", {

        resizeEnable: true,

        zoom: 15,

        center: centerList || [105.444444, 31.523333],

      });



      // var cluster;

      // var _renderClusterMarker = function (context) {

      //   //context 为回调参数，

      //   //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量

      //   var clusterCount = context.count; //聚合点内点数量

      //   context.marker.setContent("<div>" + clusterCount + "</div>");

      // };

      // var renderMarker = function (context) {

      //   //context 为回调参数，

      //   var clusterCount = context.count;

      //   //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量

      //   context.marker.setContent("<div>" + clusterCount + "</div>");

      // };

      // if (cluster) {

      //   cluster.setMap(null);

      // }

      // if (arr.length > 0) {

      //   let points = arr.map((item) => {

      //     return {

      //       lnglat: [Number(item.longitude), Number(item.latitude)],

      //     };

      //   });

      //   cluster = new AMap.MarkerCluster(this.map, points, {

      //     gridSize: 60,

      //     renderClusterMarker: _renderClusterMarker, //上述步骤的自定义聚合点样式

      //     renderMarker: renderMarker, //上述步骤的自定义非聚合点样式

      //   });

      // }



      var infoWindow = new AMap.InfoWindow({

        offset: new AMap.Pixel(30, 30),

        autoMove: true,

        anchor: "top-center",

      });

    // 更新地图标记

    updateMarkers(arr) {

      if (!this.AMap) {

        return;

      }

      if (this.markers && this.markers.length > 0) {

        this.markers.forEach((marker) => {

          marker.setMap(null);

        });

        this.markers = [];

      }



      if (arr.length > 0) {

        const iconMap = {

          出租车: {

            icon: require("../../assets/homeImg/taxi.png"),

            size: new AMap.Size(75, 37),

            size: new this.AMap.Size(75, 37),

          },

          公交车: {

            icon: require("../../assets/homeImg/bus.png"),

            size: new AMap.Size(62, 34),

            size: new this.AMap.Size(62, 34),

          },

          危险品: {

            icon: require("../../assets/homeImg/risk.png"),

            size: new this.AMap.Size(69, 32),

          },

          郊游: {

            icon: require("../../assets/homeImg/risk.png"),

            size: new AMap.Size(69, 32),

          },

          春运: {

            icon: require("../../assets/homeImg/outing.png"),

            size: new AMap.Size(61, 31),

            size: new this.AMap.Size(61, 31),

          },

          快递物流车: {

          货运: {

            icon: require("../../assets/homeImg/expressage.png"),

            size: new AMap.Size(60, 31),

            size: new this.AMap.Size(60, 31),

          },

          网约车: {

            icon: require("../../assets/homeImg/online.png"),

            size: new AMap.Size(75, 33),

            size: new this.AMap.Size(75, 33),

          },

          客运: {

            icon: require("../../assets/homeImg/passenger.png"),

            size: new AMap.Size(69, 31),

            size: new this.AMap.Size(69, 31),

          },

        };



        arr.forEach((item, index) => {

          const iconConfig = iconMap[item.vehicleType];

          let marker = new AMap.Marker({

          // 检查必要字段

          if (!item.operateType || !item.longitude || !item.latitude) {

            return;

          }



          const iconConfig = iconMap[item.operateType];

          if (!iconConfig) {

            return;

          }



          let marker = new this.AMap.Marker({

            position: [Number(item.longitude), Number(item.latitude)],

            map: this.map,

            zooms: [13, 20],

            icon: new AMap.Icon({

            icon: new this.AMap.Icon({

              size: iconConfig.size,

              image: iconConfig.icon,

              imageSize: iconConfig.size,

              imageOffset: new AMap.Pixel(0, 0),

              imageOffset: new this.AMap.Pixel(0, 0),

            }),

          });



          // 添加点击事件

          marker.on("click", async (e) => {

            // 如果已经有视频在播放，先销毁

            if (this.flvPlayer) {

              this.flvPlayer.destroy();

              this.flvPlayer = null;

            }



            // 显示loading

            infoWindow.setContent(

            this.infoWindow.setContent(

              '<div style="padding: 20px;text-align: center;">加载中...</div>'

            );

            infoWindow.open(this.map, e.target.getPosition());

            this.infoWindow.open(this.map, e.target.getPosition());



            try {

              // 并行请求车辆信息和视频地址

@@ -481,41 +553,73 @@
              ]);



              // 更新弹窗内容

              infoWindow.setContent(

              this.infoWindow.setContent(

                this.listRender({

                  ...item,

                  ...carInfoRes.data,

                  videoUrl: videoRes.data.url,

                })

              );



              if (flvjs.isSupported()) {

                this.flvPlayer = flvjs.createPlayer({

                  type: "flv",

                  isLive: true,

                  cors: true,

                  hasAudio: true,

                  hasVideo: true,

                  url: videoRes.data.url,

                  enableWorker: true,

                  enableStashBuffer: false,

                  seekType: "range",

                });

                let video = document.getElementById("monitoringCard");

                this.flvPlayer.attachMediaElement(video);

                this.flvPlayer.load();

                this.flvPlayer.play();

              }

            } catch (error) {

              console.error("获取车辆信息失败:", error);

              infoWindow.setContent(

              this.infoWindow.setContent(

                '<div style="padding: 20px;text-align: center;color: red;">获取车辆信息失败</div>'

              );

            }

          });



          // 将marker添加到数组中

          this.markers.push(marker);

        });

      }

    },



    // 获取车辆信息

    async getCarInfo(carId) {

      // TODO: 替换为实际的API调用

      return new Promise((resolve) => {

        setTimeout(() => {

          resolve({

      try {

        const res = await getCarInfoById({ id: carId });

        if (res) {

          return {

            data: {

              licensePlate: "川A88888",

              driver: "李雷",

              location: "涪江文化广场",

              coordinates: "104.004284,30.579328",

              speed: "104km/h",

              drivingTime: "5小时15分钟",

              ...res,

              id: carId,

            },

          });

        }, 500);

      });

          };

        }

        return {

          data: {

            id: carId,

          },

        };

      } catch (error) {

        return {

          data: {

            licensePlate: "",

            driver: "",

            location: "",

            coordinates: "",

            speed: "0km/h",

            drivingTime: "0小时0分钟",

          },

        };

      }

    },



    // 获取视频地址

@@ -533,29 +637,6 @@
    },



    listRender(record) {

      if (flvjs.isSupported()) {

        flvPlayer = flvjs.createPlayer({

          type: "flv",

          isLive: true,

          cors: true,

          hasAudio: true,

          hasVideo: true,

          url: res.data.flv, // 后端拿到的视频路径

          enableWorker: true, //启用 Web Worker 进程来加速视频的解码和处理过程

          enableStashBuffer: false, // 启用数据缓存机制，提高视频的流畅度和稳定性。

          // stashInitialSize: 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb

          // stashInitialTime: 0.2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒

          seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。

          // lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false

          // lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒

          // deferLoadAfterSourceOpen: false // 不预先加载视频数据，在 MSE（Media Source Extensions）打开后立即加载数据，提高视频的实时性。建议针对直播：调整为false

        });

        let video = document.getElementById("monitoringCard");

        flvPlayer.attachMediaElement(video); // 你的video容器

        flvPlayer.load();

        flvPlayer.play();

      }



      return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">

        <div style="position: relative; width: 460px; height: 330px">

          <video

@@ -582,10 +663,10 @@
        </div>

        <div style="display: flex;justify-content: space-between;margin-top: 15px;margin-bottom: 12px;">

          <div style="font-weight: 500;font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">车牌号：${

            record.licensePlate

            record.vehicleNumber || ""

          }</div>

          <div style="font-weight: 500; font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">驾驶员：${

            record.driver

            record.driverName||''

          }</div>

        </div>

        <div style="display: flex; justify-content: space-between">

@@ -593,7 +674,7 @@
            record.location

          }</div>

          <div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;">经纬度：${

            record.coordinates

            record.longitude +',' + record.latitude

          }</div>

        </div>

        <div style="display: flex; justify-content: space-between">

@@ -619,7 +700,7 @@
        this.chartTnit();

      }

    },

    chartTnit(x, y1, y2) {

    chartTnit() {

      // 基于准备好的dom，初始化echarts实例

      const myChart = echarts.init(document.getElementById("countChart"));

      // 绘制数量图表

@@ -642,7 +723,7 @@
        xAxis: [

          {

            type: "category",

            data: ["未系安全带", "疲劳驾驶", "抽烟", "打电话", "激烈驾驶"],

            data: this.countList.map((item) => item.warnType),

            axisTick: {

              alignWithLabel: true,

              lineStyle: {

@@ -671,17 +752,21 @@
                ];

              },

            },

            data: [10, 52, 200, 33, 39, 30, 20],

            data: this.countList.map((item) => item.num),

          },

        ],

      });

      myChart.resize();

    },

    // 获取预警排行榜数据

    getRankList() {},



    // 跳转车辆详情

    toCarDetail() {

      console.log("跳转车辆详情");

    toCarDetail(id) {

      this.$router.push({

        path: "/car-detail",

        query: {

          id: id,

        },

      });

    },

    fullScreen() {

      const video = document.getElementById("monitoringCard");

@@ -1075,6 +1160,16 @@
            color: rgba(82, 196, 26, 1);

          }

        }

        .fiveWarn {

          background: rgba(214, 219, 228, 0.3);



          .grade {

            background: rgba(214, 219, 228, 0.3);

            border-radius: 4px;

            border: 1px solid rgba(214, 219, 228, 0.6);

            color: rgba(0, 0, 0, 0.8);

          }

        }

      }



      .warnList::-webkit-scrollbar {


 src/view/home/service.js

@@ -1,25 +1,29 @@
import axios from '@/utils/request';
// 获取各种车辆类型车辆总数
export const getCarCount = (data) => {
    return axios.get('/car/getCarCount', data)
    return axios.get('/system/car/getCarCount', data)
}
// 获取车辆状态汇总和公司总数量
export const getCarStatusCount = (data) => {
    return axios.get('/car/getCarStatusCount', data)
    return axios.get('/system/car/getCarStatusCount', data)
}
// 获取地图司机数据
export const getMapCarList = (data) => {
    return axios.get('/car/getMapCarList', data)
    return axios.get('/system/car/getMapCarList', data)
}
// 获取车辆预警列表
export const getCarWarnList = (data) => {
    return axios.get('/warn/getCarWarnList', data)
    return axios.get('/system/warn/getCarWarnList', data)
}
// 获取车辆预警情况统计
export const getWarnGroupCount = (data) => {
    return axios.get('/warn/getWarnGroupCount', data)
    return axios.get('/system/warn/getWarnGroupCount', data)
}
// 获取预警排行统计前10
export const getWarnGroupCountTop10 = (data) => {
    return axios.get('/warn/getWarnGroupCountTop10', data)
    return axios.get('/system/warn/getWarnGroupCountTop10', data)
}
// 获取预警排行统计前10
export const getCarInfoById = (data) => {
    return axios.get(`/system/car/getCarInfo/${data.id}`, data)
}