巡更轨迹查看修改

sgj

5 天以前 ce819cce8e411e78e188e31645b0d7c8c2382784

 fzzy-igdss-web/src/main/resources/static/security/patrol/patrolRecord.js

@@ -1,281 +1,169 @@
var layer;
var laypage;

$(function () {
    // 初始化分页
    layui.use(['laypage', 'layer'], function () {
$(document).ready(function () {
    layui.use(['layer'], function () {
        layer = layui.layer;
        laypage = layui.laypage;

        // 初始化分页组件
        initPagination();
    });

    // 初始化图片预览功能
    initImagePreview();
});

/**
 * 初始化分页组件
 */
function initPagination() {
    laypage.render({
        elem: 'pagination',
        count: typeof totalItems !== 'undefined' ? totalItems : 0,
        limit: typeof pageSize !== 'undefined' ? pageSize : 6,
        curr: typeof currentPage !== 'undefined' ? currentPage : 1,
        layout: ['prev', 'page', 'next', 'refresh', 'skip'],
        jump: function (obj, first) {
            if (!first) {
                searchRecord(obj.curr, obj.limit)
            }
        }
    });
}

/**
 * 重新初始化分页组件
 * @param {number} totalCount - 总记录数
 * @param {number} pageSize - 每页大小
 * @param {number} currentPage - 当前页码
 */
function reinitPagination(totalCount, pageSize, currentPage) {
    laypage.render({
        elem: 'pagination',
        count: totalCount,
        limit: pageSize,
        curr: currentPage,
        layout: ['prev', 'page', 'next', 'refresh', 'skip'],
        jump: function (obj, first) {
            if (!first) {
                searchRecord(obj.curr, obj.limit)
            }
        }
    });
}

/**
 * 获取巡检记录数据
 * @param {Object} params - 查询参数对象
 * @param {Function} callback - 回调函数
 */
function fetchPatrolRecordData(params, callback) {
    $.ajax({
        url: '../../patrol/patrolRecord/pageData',
        type: 'POST',
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(params),
        success: function (response) {
            if (response.code === '0000') {
                callback(null, response.data);
            } else {
                callback(new Error(response.msg || '数据加载失败'), null);
            }
        },
        error: function (xhr, status, error) {
            callback(new Error('请求失败，请稍后重试'), null);
        }
    });
}

/**
 * 构建查询参数
 * @param {number} page - 页码
 * @param {number} size - 每页大小
 * @returns {Object} 查询参数对象
 */
function buildQueryParams(page, size) {
    var params = {
        page: page,
        limit: size,
        key: patrolId  //主表id查询
    };
    // 添加表单查询条件
    var form = document.getElementById('patrolRecord-form');
    if (form) {
        var inputs = form.querySelectorAll('input[name], select[name]');
        inputs.forEach(function(input) {
            if (input.value) { // 只添加非空值
                params[input.name] = input.value;
            }
        });
    }

    return params;
}

/**
 * 更新巡检记录画廊内容
 * @param {Array} records - 巡检记录数据
 */
function updateGallery(records) {
    var container = document.getElementById('gallery-container');
    if (!container) return;

    // 清空现有内容
    container.innerHTML = '';

    if (!records || records.length === 0) {
        // 显示空状态
        container.innerHTML = `
            <div class="empty-state">
                <i class="fa-solid fa-clipboard-list"></i>
                <h3>暂无巡检记录</h3>
                <p>当前没有可展示的巡检记录数据</p>
            </div>
        `;
        // 隐藏分页
        $('.pagination-container').hide();
function initMap() {
    // 可删除代码开始
    // 检查百度地图API是否加载成功
    if (typeof BMapGL === 'undefined') {
        layer.msg("地图加载失败，请检查网络连接！", {icon: 2});
        return;
    }

    // 显示分页
    $('.pagination-container').show();
    // 检查容器是否存在
    var mapContainer = document.getElementById("map");
    if (!mapContainer) {
        layer.msg("地图容器未找到！", {icon: 2});
        return;
    }

    // 生成巡检记录卡片
    var html = '';
    records.forEach(function(record) {
        html += `
            <div class="gallery-item">
                <img src="${record.imgName || '/logo-sm.png'}" alt="${record.id}"
                     data-url="${record.imgName || '/logo-sm.png'}" data-id="${record.id}"
                     class="gallery-img" onclick="showPatrolRecordPreview(this.getAttribute('data-url'))">
                <div class="gallery-info">
                    <div class="gallery-header">
                        <h3 class="gallery-title">${record.pointName || record.id}</h3>
                    <!--                       
                        <div class="gallery-tags">
                            <span class="tag-person">
                                <i class="layui-icon layui-icon-user"></i>
                                <span>'未知'</span>
                            </span>
                        </div>
                         -->
                    </div>
                    <div class="gallery-meta">
                         <div style="display: flex; align-items: center; gap: 15px;width: 100%">
                             <div class="meta-item" style="width: 50%">
                                <i class="layui-icon layui-icon-location"></i>
                                <span>${record.longitude || ''}</span>
                            </div>
                            <div class="meta-item">
                                <i class="layui-icon layui-icon-location"></i>
                                <span>${record.latitude || ''}</span>
                            </div>   
                         </div>
                        <div class="meta-item" style="width: 50%">
                                <i class="layui-icon layui-icon-date"></i>
                                <span>${formatDate(record.createTime)}</span>
                            </div>                
                    </div>        
    // 检查数据
    if (!patrolRecordList || patrolRecordList.length === 0) {
        layer.msg("暂无轨迹数据！", {icon: 2});
        var defaultPoint = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(defaultPoint, 12);
        map.enableScrollWheelZoom(true);
        return;
    }
    //可删除代码结束

    // ========== 百度地图初始化与轨迹渲染 ==========
    // 1. 初始化地图
    var map = new BMapGL.Map("map");
    // 2. 获取轨迹点数据
    if (patrolRecordList.length === 0) {
        layer.msg("暂无轨迹数据！", {icon: 2});
        var defaultPoint = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(defaultPoint, 14);
        map.enableScrollWheelZoom(true);
        return;
    }


    // 3. 构造轨迹点数组和标记点数组
    var points = [];       // 轨迹折线点
    var markers = [];      // 地图标记点
    var cardElements = document.querySelectorAll('.track-card'); // 所有卡片元素



    patrolRecordList.forEach(function (record, index) {
        var lng = record.longitude;
        var lat = record.latitude;
        var point = new BMapGL.Point(lng, lat);
        points.push(point);

        // 创建地图标记点
        var marker = new BMapGL.Marker(point);
        markers.push(marker);

        // 标记点弹窗信息
        var infoWindow = new BMapGL.InfoWindow(`
                <div style="font-size: 12px; line-height: 1.8;">
                    <p><strong>点位名称：</strong>${record.pointName}</p>
                    <p><strong>巡检人：</strong>${record.createBy}</p>
                    <p><strong>巡检时间：</strong>${new Date(record.createTime).toLocaleString()}</p>
                    <p><strong>经纬度：</strong>${lat}, ${lng}</p>
                    <p><strong>轨迹点ID：</strong>${record.id}</p>
                </div>
            </div>
        `;
            `);

        // 标记点点击事件：高亮对应卡片 + 显示弹窗
        marker.addEventListener("click", function () {
            // 移除所有卡片的active样式
            cardElements.forEach(el => el.classList.remove('active'));
            // 高亮当前卡片
            cardElements[index].classList.add('active');
            // 滚动到当前卡片
            cardElements[index].scrollIntoView({behavior: 'smooth', block: 'center'});
            // 显示弹窗
            this.openInfoWindow(infoWindow);
        });

        // 卡片点击事件：定位到对应标记点 + 高亮卡片
        cardElements[index].addEventListener("click", function () {
            // 移除所有卡片的active样式
            cardElements.forEach(el => el.classList.remove('active'));
            // 高亮当前卡片
            this.classList.add('active');
            // 地图中心定位到当前标记点
            map.centerAndZoom(point, 15);
            // 显示标记点弹窗
            marker.openInfoWindow(infoWindow);
            // 轻微动画效果
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            setTimeout(() => marker.setAnimation(null), 1500);
        });

        map.addOverlay(marker);
    });

    container.innerHTML = html;
}
    // 寻找points中间的点位
    var midIndex = Math.floor(points.length / 2);
    const centerPoint = points[midIndex] || new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(centerPoint, 13); // 14为地图缩放级别

/**
 * 格式化日期
 * @param {string|number} date - 日期字符串或时间戳
 */
function formatDate(date) {
    if (!date) return '';
    var d = new Date(date);
    return d.getFullYear() + '-' +
        String(d.getMonth() + 1).padStart(2, '0') + '-' +
        String(d.getDate()).padStart(2, '0') + ' ' +
        String(d.getHours()).padStart(2, '0') + ':' +
        String(d.getMinutes()).padStart(2, '0') ;
}

/**
 * 初始化图片预览功能
 */
function initImagePreview() {
    var preview = document.getElementById('imgPreview');
    var previewImg = document.getElementById('previewImg');
    var closeBtn = document.getElementById('closePreview');

    // 如果预览元素不存在，则不初始化
    if (!preview || !previewImg) {
        return;
    }

    // 关闭按钮点击事件
    if (closeBtn) {
        closeBtn.addEventListener('click', closePreview);
    }

    // 点击预览区域外关闭
    preview.addEventListener('click', function (e) {
        if (e.target === preview) {
            closePreview();
        }
    // 4. 绘制轨迹折线
    var polyline = new BMapGL.Polyline(points, {
        strokeColor: "#1890ff", // 主色调：蓝色
        strokeWeight: 6,        // 折线宽度
        strokeOpacity: 0.8,     // 透明度
        strokeStyle: 'solid'    // 实线
    });
    map.addOverlay(polyline);

    // 键盘事件监听
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && preview.style.display === 'flex') {
            closePreview();
        }
    });
    // // 5. 起点/终点特殊标记
    // // 起点标记
    // var startMarker = new BMapGL.Marker(points[0], {
    //     icon: new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(25, 34), {
    //         offset: new BMapGL.Size(12, 34),
    //         imageOffset: new BMapGL.Size(0, 0) // 起点图标
    //     })
    // });
    // map.addOverlay(startMarker);
    // // startMarker.setLabel(new BMapGL.Label("起点：" + patrolRecordList[0].pointName, {
    // //     offset: new BMapGL.Size(30, -15),
    // //     styles: {fontSize: '12px', color: '#fff', background: '#52c41a', padding: '0px 14px', borderRadius: '3px'}
    // // }));
    // startMarker.setLabel(new BMapGL.Label("起点：" + patrolRecordList[0].pointName, {
    //     offset: new BMapGL.Size(30, -15),
    //     styles: {
    //         fontSize: '12px',
    //         color: '#fff',
    //         background: '#52c41a',
    //         padding: '8px 8px',  // 左右padding保持一致（14px），保证背景两侧空间对称
    //         borderRadius: '3px',
    //         textAlign: 'center'  // 新增：强制文字在背景内水平居中
    //     }
    // }));
    //
    // // 终点标记
    // var endMarker = new BMapGL.Marker(points[points.length - 1], {
    //     icon: new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(25, 34), {
    //         offset: new BMapGL.Size(12, 34),
    //         imageOffset: new BMapGL.Size(-114, 0) // 终点图标
    //     })
    // });
    // map.addOverlay(endMarker);
    // endMarker.setLabel(new BMapGL.Label("终点：" + patrolRecordList[patrolRecordList.length - 1].pointName, {
    //     offset: new BMapGL.Size(30, -15),
    //     styles: {fontSize: '12px', color: '#fff', background: '#ff4d4f', padding: '0px 14px', borderRadius: '3px'}
    // }));

    // 关闭预览函数
    function closePreview() {
        preview.style.display = 'none';
        previewImg.src = '';
    }
}
    // 6. 地图自适应所有轨迹点
    map.enableScrollWheelZoom(true); // 开启滚轮缩放
    map.setViewport(points); // 适配所有轨迹点

/**
 * 显示图片预览
 * @param {string} imgUrl 图片URL
 */
function showPatrolRecordPreview(imgUrl) {
    var preview = document.getElementById('imgPreview');
    var previewImg = document.getElementById('previewImg');

    if (preview && previewImg) {
        previewImg.src = imgUrl;
        preview.style.display = 'flex';
    }
}

/**
 * 读取巡检记录
 */
function searchRecord(page , size) {
    var pageNumber = 1;
    var sizeNumber = 6;
    if (pageSize && pageSize > 0){
        size = pageSize;
    }

    if (size && size > 0){
        sizeNumber = size;
    }
    if (page && page > 0){
        pageNumber = page;
    }
    // 构造查询参数，从第一页开始
    var queryParams = buildQueryParams(pageNumber, sizeNumber);
    // 显示loading
    var loadingIndex = layer.load(1, {shade: [0.1, '#fff']});
    // 调用数据请求方法
    fetchPatrolRecordData(queryParams, function(error, data) {
        // 关闭loading
        layer.close(loadingIndex);
        if (error) {
            layer.msg(error.message);
            return;
        }

        // 更新页面数据
        updateGallery(data.records);
        // 重新初始化分页组件
        reinitPagination(data.total, data.size, data.current);
    // 7. 初始提示
    layer.msg("轨迹加载完成！点击卡片可定位到对应点位", {
        icon: 1,
        time: 3000,
        offset: ['20px', '20px']
    });
}

// 页面加载完成后初始化地图
window.onload = initMap;