车辆选择解决方案

车辆选择解决方案

/*
* @Purpose: 添加车辆选择的功能 -> 用户在选择不同的车辆时，重新初始化系统状态，清除之前的定时器，并根据新选择的车辆设置新的定时器，以实现对新车辆状态的实时加载。
* @File Name: 车辆选择解决方案
* @Author: Caroline
* @Modifications: 2023/12/05
*/

home.php

添加页面车辆选择控件

<table class="table">
    <label for="vehicle_opt" class="vehicle_option">车辆选择</label>
    <select id="vehicle_opt" class="vehicle_option">
        <option value="obu_01" class="content-value">obu_01</option>
        <option value="obu_02" class="content-value">obu_02</option>
        <option value="obu_03" class="content-value">obu_03</option>
        <option value="obu_04" class="content-value">obu_04</option>
        <option value="obu_05" class="content-value">obu_05</option>
        <option value="obu_06" class="content-value">obu_06</option>
        <option value="obu_07" class="content-value">obu_07</option>
        <option value="obu_08" class="content-value">obu_08</option>
        <option value="obu_09" class="content-value">obu_09</option>
    </select>
</table>

---

Pages_model.php

修改原本的$obu_id值为我们自己获取的obu_id值$obu_id_val，并POST到后端服务器。

	public function get_index_data($obu_id_val,$application_id)
    {
        $data = array();
		// 获取百度地图 JavaScript API 的 URL
        $data['baidu_map_js_url'] = "http://api.map.baidu.com/api?v=3.0&ak={$this->get_baidu_app_key()}";

        $obu_id_val = $this->POST_DATA("obu_id");

        if(empty($obu_id_val)){
            $obu_id_val = common_get_default_obu_id();
        }
        // 将获取到的 obu_id 存储在返回的数据数组中
        $data['obu_id'] = $obu_id_val;
        
        if(empty($application_id)){
            $application_id = common_get_default_app_id(); 
        }
        $data['application_id'] =$application_id; 
        return $data;
    }

---

bd_vehicle.js

1. systemLoadStatus()函数解析

这个函数主要用于系统加载状态，包括获取车辆坐标数据并在地图上绘制轨迹。

function systemLoadStatus() {
    // 检查系统是否已准备就绪
    if (systemReady) {
        // 如果systemReady为true，表示系统已经准备好，清空#systemReadStatus元素的html内容
        $('#systemReadStatus').html("");
        // 清除systemReadStatusInterval定时器
        clearInterval(systemReadStatusInterval);
        // 结束函数的执行
        return;
    } else {
        // 系统没有准备就绪
        // 首次启动，加载近期全部坐标，在加载成功后，绘制线路
        $('#systemReadStatus').html("Loading.");
        $.post(app_ctl + '/orbit', {
            option: 0,
            application_id: application_id_val,
            obu_id: obu_id_val,
            demo_flag: demo
        }, function (data, status) {
            //console.log(status == "success",data,data['request'] == "success");
            if (status == "success" && data && data.request == "success") {
                // 将 systemReady 设置为 true，表示系统已准备好。
                systemReady = true;
                console.log(data.msg);
                ......
            }
        });
    }
}

2. loadVehicleStatus()函数解析

这个函数主要用于获取车辆状态数据，更新页面上的相关信息，包括显示车辆编号、更新车辆状态列表以及在地图上绘制轨迹等。

function loadVehicleStatus() {
    // 画图和访问过程，不要重复访问
    // 检查地理信息和状态更新标志
    // 如果 geoUpdateFlag 为 false 或 statueUpdateFlag 为 true，则输出相关标志的值到控制台，并结束函数执行。
    if (!geoUpdateFlag || statueUpdateFlag) {
        console.log({
            "geoUpdateFlag": geoUpdateFlag,
            "statueUpdateFlag": statueUpdateFlag
        });
        return;
    }
    // 访问
    // 设置状态更新标志，设置为true，表示开始状态更新
    statueUpdateFlag = true;
    // post请求获取车辆状态
    $.post(app_ctl + '/status', {
        option: 0,
        application_id: application_id_val,
        obu_id: obu_id_val,
        demo_flag: demo
    }, function (data, status) {
        // 处理ajax请求的回调
        if (status == "success" && data && data.request == "success") {
            ......
        } else {
            console.log("car-status error!", data);
        }
        //完成访问，重置状态更新标志
        statueUpdateFlag = false;
    });
}

3. 监听选择框的改变事件

$('select').on('change', function() {
	// 从选择框中获取当前选中的车辆value
    obu_id_val = $(this).children('option:selected').val();
    console.log("车辆选择: " + obu_id_val);
    // 清除之前设置的systemReadStatusInterval和status_interval定时器
    clearInterval(systemReadStatusInterval);
    clearInterval(status_interval);
    // 重置系统状态标记，重置系统的准备状态、地理位置更新标记以及状态更新标记，为重新加载数据做准备
    systemReady = false;
    geoUpdateFlag = false; //首次更新标记
    statueUpdateFlag = false;
    // 重新设置定时器
    //加载地图、坐标、轨迹
    systemReadStatusInterval = setInterval(systemLoadStatus, 1000);
    //加载车辆实时状态 
    status_interval = setInterval(loadVehicleStatus, 2000);
});

4. 遇到的问题

清除之前的定时器之后，没有初始化系统状态的标记systemReady，导致重新启动定时器之后orbit没有重新加载，所以清除定时器之后要重置系统状态标记，重置系统的准备状态、地理位置更新标记以及状态更新标记，为重新加载数据做准备。

systemReady = false;
geoUpdateFlag = false; //首次更新标记
statueUpdateFlag = false;