车辆选择解决方案
车辆选择解决方案
/*
* @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;