当前位置: 首页 > news >正文

车辆选择解决方案

车辆选择解决方案

/*
* @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;
http://www.dtcms.com/a/108579.html

相关文章:

  • 5.模型训练-毕设篇3
  • 字节跳动 UI-TARS 汇总整理报告
  • 核桃派2B:opencv python的 Canny findContours得到两个非常接近的轮廓,角点有几个像素的差距,如何处理?
  • 使用 Flutter 制作地图应用
  • 封装一套通用echats
  • 电子电气架构 --- 域控制器和EE架构关系
  • 时间字段前端VO接收用String,后端用Date
  • 防火墙和端口开关
  • Kafka和RocketMQ零拷贝对比
  • ABeam 德硕 | 中国汽车市场(2)——新能源车的崛起与中国汽车市场机遇与挑战
  • nuxt3 部署到服务器配置
  • 关于 数据库表关联查询(JOIN) 和 子查询(Subquery) 的详细对比,包括定义、语法、优缺点、使用场景及示例代码,并以表格总结关键差异
  • gitblit服务启动报错Cannot assign requested address: bind
  • Spring Boot3使用Spring AI通过Ollama集成deepseek
  • 从技术视角看海外服务器免备案机制——以AWS云为例
  • C#:DispatcherTimer计时器
  • WHAT - 从后端开发的 trace 追踪认识请求的完整流转过程
  • 洛谷 P1032 [NOIP 2002 提高组] 字串变换
  • 第一期:Spring Web MVC 入门 [特殊字符](基础概念 + 环境搭建)
  • 解锁医疗行业软件 UI 设计密码,打造高效就医体验
  • Linux NUC小主机化身视频会议服务器: 技术优势与部署实战
  • 少儿编程 中国电子学会软件编程C语言/C++等级考试二级历年真题答案解析【持续更新 已更新21题】
  • android设备出厂前 按键测试 快速实现-屏蔽Home,Power等键
  • 群体智能优化算法-鹈鹕优化算法(Pelican Optimization Algorithm, POA,含Matlab源代码)
  • 亚马逊云科技携手 DeepSeek:开启企业级生成式 AI 新征程
  • 通信算法之253: 802.16(WiMAX)的FFT-CP长度
  • 力扣HOT100之链表:160. 相交链表
  • MINIQMT学习课程Day1
  • 【操作系统】LinuxRT-Thread查看内存分布的方法
  • 06_docker 网络类型