南昌市物联网技防平台-前端
zengh
2021-02-21 ab0598cc26762aedae33894fc78462989e8302b4
聚合图集成,按钮选中样式调整
5 files modified
10 files deleted
158392 ■■■■■ changed files
public/map/core/manager/widgetsmanager.js patch | view | raw | blame | history
public/map/index.html 2 ●●●●● patch | view | raw | blame | history
public/map/widgets/FlareClusterLayer/DataManager.js 135 ●●●●● patch | view | raw | blame | history
public/map/widgets/FlareClusterLayer/data.json 153110 ●●●●● patch | view | raw | blame | history
public/map/widgets/FlareClusterLayer/fcl/FlareClusterLayer_v3.js 1327 ●●●●● patch | view | raw | blame | history
public/map/widgets/FlareClusterLayer/fcl/FlareClusterLayer_v4.js 940 ●●●●● patch | view | raw | blame | history
public/map/widgets/FlareClusterLayer/index.html 11 ●●●●● patch | view | raw | blame | history
public/map/widgets/FlareClusterLayer/index_v3.html 369 ●●●●● patch | view | raw | blame | history
public/map/widgets/FlareClusterLayer/index_v4.html 521 ●●●●● patch | view | raw | blame | history
public/map/widgets/FlareClusterLayer/typescript/FlareClusterLayer_v4.ts 1257 ●●●●● patch | view | raw | blame | history
public/map/widgets/FlareClusterLayer/typings/custom-typings.d.ts 28 ●●●●● patch | view | raw | blame | history
public/map/widgets/FlareClusterLayer/typings/index.d.ts 4 ●●●● patch | view | raw | blame | history
public/map/widgets/clientManagement/ClientManagement.js 558 ●●●●● patch | view | raw | blame | history
public/map/widgets/clientManagement/template.html 116 ●●●●● patch | view | raw | blame | history
src/views/realTimePolice/real.vue 14 ●●●●● patch | view | raw | blame | history
public/map/core/manager/widgetsmanager.js
public/map/index.html
@@ -102,11 +102,9 @@
<script>
  var openId = getQueryStringByKey('openid');
  if (openId && openId != '') {
    init(openId)
  }
  function getQueryStringByKey(key) {
    return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
public/map/widgets/FlareClusterLayer/DataManager.js
File was deleted
public/map/widgets/FlareClusterLayer/data.json
File was deleted
public/map/widgets/FlareClusterLayer/fcl/FlareClusterLayer_v3.js
File was deleted
public/map/widgets/FlareClusterLayer/fcl/FlareClusterLayer_v4.js
File was deleted
public/map/widgets/FlareClusterLayer/index.html
File was deleted
public/map/widgets/FlareClusterLayer/index_v3.html
File was deleted
public/map/widgets/FlareClusterLayer/index_v4.html
File was deleted
public/map/widgets/FlareClusterLayer/typescript/FlareClusterLayer_v4.ts
File was deleted
public/map/widgets/FlareClusterLayer/typings/custom-typings.d.ts
File was deleted
public/map/widgets/FlareClusterLayer/typings/index.d.ts
File was deleted
public/map/widgets/clientManagement/ClientManagement.js
@@ -161,543 +161,30 @@
        open: function () {
            var that = this;
            // 行政区移入事件
            $('#realtimeDistrict').mouseenter(function () {
                if ($('#realtimeDistrict .select-list').is(':hidden')) {
                    $('#realtimeDistrict .select-list').stop().slideDown(0);
                }
            });
            // 行政区移出事件
            $('#realtimeDistrict').mouseleave(function () {
                if (!$('#realtimeDistrict .select-list').is(':hidden')) {
                    $('#realtimeDistrict .select-list').stop().slideUp(0);
                }
            });
            // 类型移入事件
            $('#realtimeLevel').mouseenter(function () {
                if ($('#realtimeLevel .select-list').is(':hidden')) {
                    $('#realtimeLevel .select-list').stop().slideDown(0);
                }
            });
            // 类型移出事件
            $('#realtimeLevel').mouseleave(function () {
                if (!$('#realtimeLevel .select-list').is(':hidden')) {
                    $('#realtimeLevel .select-list').stop().slideUp(0);
                }
            });
            // 状态移入事件
            $('#client-query-type').mouseenter(function () {
                if ($('#client-query-type .select-list').is(':hidden')) {
                    $('#client-query-type .select-list').stop().slideDown(0);
                }
            });
            // 状态移出事件
            $('#client-query-type').mouseleave(function () {
                if (!$('#client-query-type .select-list').is(':hidden')) {
                    $('#client-query-type .select-list').stop().slideUp(0);
                }
            });
            // 行政区点击事件
            $('.client-time-select-condition #realtimeDistrict .select-list').off('click', 'li').on('click', 'li', function (event) {
                var text = $(this).text();
                that.queryXZQ = ($(this).attr('addvcd') == "" ? null : $(this).attr('addvcd'));
                //调用通用查询事件
                that.clientQueryData();
                $(this).parent().parent().prev().html(text + '<i class="layui-icon client-select">&#xe61a;</i>');
                $(this).parent().parent().stop().slideUp(0);
            });
            // 类型点击事件
            $('.client-time-select-condition #realtimeLevel .select-list').off('click', 'li').on('click', 'li', function (event) {
                var text = $(this).text();
                that.queryType = (text == "全部" ? null : text);
                //调用通用查询事件
                that.clientQueryData();
                $(this).parent().parent().prev().html(text + '<i class="layui-icon client-select">&#xe61a;</i>');
                $(this).parent().parent().stop().slideUp(0);
            });
            // 状态点击事件
            $('.client-time-select-condition #client-query-type .select-list').off('click', 'li').on('click', 'li', function (event) {
                var text = $(this).text();
                that.queryZT = (text == "全部" ? null : text);
                //调用通用查询事件
                that.clientQueryData();
                $(this).parent().parent().prev().html(text + '<i class="layui-icon client-select">&#xe61a;</i>');
                $(this).parent().parent().stop().slideUp(0);
            });
            //查询按钮点击事件
            $("#client-query-cx").off('click').click(function () {
                that.clientQueryData();
            });
            //清空按钮点击事件
            $("#client-query-qk").off('click').click(function () {
                that.queryXZQ = null;
                that.queryType = null;
                that.queryZT = null;
                that.zTreeId = null;
                $("#client_select_1").html('全部<i class="layui-icon client-select">&#xe61a;</i>');
                $("#client_select_2").html('全部<i class="layui-icon client-select">&#xe61a;</i>');
                $("#client_select_3").html('全部<i class="layui-icon client-select">&#xe61a;</i>');
                $("#client-query-input").val("");
                that.clientQueryData();
            });
            $('#mapcontentClass').addClass('client-left-map'); //追加样式
            $('#tabcontainer').css('width', '100%');
            $("#client-sh-map i").html('&#xe65a;');
            //右侧地图拖动
            $("#client-sh-map").off('click').click("click", () => {
                if (that.mapShow == 1) {
                    $('#tabcontainer').css('width', '66%');
                    $("#client-sh-map i").html('&#xe65b;');
                    that.updateTable.reload({
                        data: that.clientTableData
                    });
                    that.mapShow = 0;
                } else {
                    $('#tabcontainer').css('width', '100%');
                    $("#client-sh-map i").html('&#xe65a;');
                    that.updateTable.reload({
                        data: that.clientTableData
                    });
                    that.mapShow = 1;
                }
            });
            var layerTabHei = $(".client-time-police .client-time-information-list").height();
            layui.use('table', function () {
                var table = layui.table;
                that.getClinentData(null, 0);
                //树状图勾选
                function onClick(event, treeId, treeNode, clickFlag) {
                    that.zTreeId = treeNode.id;
                    that.getClinentData(treeNode.id, 1);
                }
                //树状图右键事件
                function OnRightClick(event, treeId, treeNode) {
                    if (treeNode && !treeNode.noR) {
                        that.zTree.selectNode(treeNode);
                        showRMenu("node", event.clientX, event.clientY);
                    }
                };
                //树状图一键布防
                $("#client-all-deploy").off('click').click(function () {
                    var nodes = that.zTree.getSelectedNodes();
                    $.ajax({
                        url: 'http://36.134.81.48:18001/api/blade-jfpts/netty/netty/selectNettyChannelb',
                        data: {
                            pid: nodes[0].id
                        },
                        type: 'POST',
        url: 'http://192.168.0.107:1888/api/blade-jfpts/alarm/alarm/page?current=1&size=10',
        type: 'get',
                        dataType: 'JSON',
                        success: function (data) {
                            hideRMenu();
                            that.zTreeId = nodes[0].id;
                            that.getClinentData(nodes[0].id, 1);
                            layer.msg('布防成功');
                        }
                    });
                });
                //树状图一键撤防
                $("#client-all-retreat").off('click').click(function () {
                    var nodes = that.zTree.getSelectedNodes();
                    $.ajax({
                        url: 'http://36.134.81.48:18001/api/blade-jfpts/netty/netty/selectNettyChannelc',
                        data: {
                            pid: nodes[0].id
                        },
                        type: 'POST',
                        dataType: 'JSON',
                        success: function (data) {
                            hideRMenu();
                            that.zTreeId = nodes[0].id;
                            that.getClinentData(nodes[0].id, 1);
                            layer.msg('撤防成功');
                        }
                    });
                });
                function hideRMenu() {
                    if ($("#rMenu")) $("#rMenu").css({"visibility": "hidden"});
                    $("body").unbind("mousedown", onBodyMouseDown);
          var datas = data.data.records;
          for (var i = 0; i < datas.length; i++) {
            datas[i].x = Number(datas[i].jd);
            datas[i].y = Number(datas[i].wd);
                }
                function showRMenu(type, x, y) {
                    $("#rMenu ul").show();
                    y += document.body.scrollTop - 30;
                    x += document.body.scrollLeft - 30;
                    $("#rMenu").css({"top": y + "px", "left": x + "px", "visibility": "visible"});
                    $("body").bind("mousedown", onBodyMouseDown);
                };
                function onBodyMouseDown(event) {
                    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
                        $("#rMenu").css({"visibility": "hidden"});
          that.flareClusterLayer(datas);
                    }
                };
                var setting = {
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
                        onClick: onClick,
                        onRightClick: OnRightClick
                    }
                };
                var nodes = [
                    {id: 1, pId: 0, name: "父节点1"},
                    {id: 11, pId: 1, name: "子节点1"},
                    {id: 12, pId: 1, name: "子节点2"}
                ];
                $.ajax({
                    url: 'http://36.134.81.48:18001/api/blade-jfpts/catalogs/catalogs/catalogList',
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (data) {
                        $.fn.zTree.init($("#client_left_tree"), setting, data.data);
                        that.zTree = $.fn.zTree.getZTreeObj("client_left_tree");
                    }
                });
                $.ajax({
                    url: 'http://36.134.81.48:18001/api/blade-jfpts/district/district/selectList',
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (data) {
                        $('.client-time-police .client-time-select-condition .realtime-district .select-list ul').empty();
                        $('.client-time-police .client-time-select-condition .realtime-district .select-list ul').append("<li addvcd=''>全部</li>");
                        for (var i = 0; i < data.data.length; i++) {
                            $('.client-time-police .client-time-select-condition .realtime-district .select-list ul').append("<li addvcd=" + data.data[i].addvcd + ">" + data.data[i].addvnm + "</li>");
                        }
                    }
                });
                //渲染中间表格
                that.updateTable = table.render({
                    elem: '#client_time_table'
                    , height: (layerTabHei - 20)
                    , page: {                //分页设置
                        limit: 15,        //默认每一页显示数量
                        limits: [5, 10, 15, 20, 30, 40, 50]        //可选择每页显示的数量
                    }
                    , cellMinWidth: 100
                    , done: function (res, curr, count) {
                        LayUIDataTable.SetJqueryObj($);// 第一步:设置jQuery对象
                        var currentRowDataList = LayUIDataTable.ParseDataTable(function (index, currentData, rowData) {
                        })
                        // 对相关数据进行判断处理--此处对mk2大于30的进行高亮显示
                        $.each(currentRowDataList, function (index, obj) {
                            if (obj['color'].value == 1 || obj['color'].value == 2) {
                                obj['heartbeat'].row.css({"color": "#ff7627"});
                            }
                        })
                    }
                    , cols: [[ //表头
                        {
                            field: '',
                            type: 'numbers',
                            title: '序号',
                            width: 76,
                            fixed: 'left',
                            align: 'center'
                        }
                        , {field: 'id', title: "ID", width: 0, hide: true, align: 'center'}
                        , {field: 'deviceName', title: '设备名称', width: 130, align: 'center'}
                        , {field: 'deviceNumber', title: '设备编号', width: 150, align: 'center'}
                        , {field: 'jd', title: "经度", width: 0, hide: true, align: 'center'}
                        , {field: 'wd', title: "纬度", width: 0, hide: true, align: 'center'}
                        , {field: 'color', title: "颜色", width: 0, hide: true, align: 'center'}
                        , {field: 'addvcd', title: '行政区', align: 'center'}
                        , {
                            field: 'devicestate',
                            title: '布撤防状态',
                            align: 'center',
                            templet: function (item) {
                                if (item.devicestate == '0') {
                                    return "撤防";
                                } else if (item.devicestate == '1') {
                                    return "布防";
                                } else {
                                    return "";
                                }
                            }
                        }
                        , {
                            field: 'dtype', title: '设备状态', align: 'center', templet: function (item) {
                                if (item.dtype == '0') {
                                    return "掉线";
                                } else if (item.dtype == '1') {
                                    return "在线";
                                } else {
                                    return "";
                                }
                            }
                        }
                        , {field: 'deviceType', title: '设备类型', width: 170, align: 'center'}
                        , {field: 'ownership', title: '权属', align: 'center'}
                        , {field: 'street', title: '街道', width: 200, align: 'center'}
                        , {field: 'pay', title: '缴费信息', align: 'center'}
                        , {field: 'stime', title: '安装时间', width: 170, align: 'center'}
                        , {field: 'expireTime', title: '到期时间', width: 170, align: 'center'}
                        , {field: 'heartbeat', title: '最后上传时间', width: 170, align: 'center'}
                        , {
                            field: '',
                            title: '操作',
                            toolbar: "#client_time_table_btn",
                            width: 170,
                            fixed: 'right',
                            align: 'center'
                        }
                    ]]
                });
                table.on('tool(test)', function (obj) {
                    switch (obj.event) {
                        case 'detail':  //编辑
                            layer.open({
                                type: 2,
                                title: '编辑页面',
                                shadeClose: false,//点击窗口外关闭
                                shade: [0.5, "#DCDCDC"],//遮罩
                                area: ['860px', '406px'],
                                content: "../../popup/html/clientPopup.html?id=" + obj.data.id,//跳转的页面
                                success: function (layero, index) {
                                    //遮罩层
                                    var mask = $(".layui-layer-shade");
                                    mask.appendTo(layero.parent());
                                },
                                cancel: function (index) {
                                    //$(".layui-laypage-btn").click();//这里用于关闭Open时触发回调函数  刷新父页面数据  一定要引入Jquery
                                }
                            });
                            break;
                        case 'deploy':  //布防
                            $.ajax({
                                url: 'http://36.134.81.48:18001/api/blade-jfpts/netty/netty/selectNettyChannelOb',
                                data: {
                                    deviceNumber: obj.data.deviceNumber,
                                    ID: obj.data.id
                                },
                                type: 'POST',
                                dataType: 'JSON',
                                success: function (data) {
                                    that.getClinentData(null, 1);
                                    layer.msg('布防成功');
                                }
                            });
                            break;
                        case 'retreat':  //撤防
                            $.ajax({
                                url: 'http://36.134.81.48:18001/api/blade-jfpts/netty/netty/selectNettyChannelOc',
                                data: {
                                    deviceNumber: obj.data.deviceNumber,
                                    ID: obj.data.id
                                },
                                type: 'POST',
                                dataType: 'JSON',
                                success: function (data) {
                                    that.getClinentData(null, 1);
                                    layer.msg('撤防成功');
                                }
                            });
                            break;
                        case 'location':  //定位
                            if (that.mapShow == 1) {
                                $('#tabcontainer').css('width', '66%');
                                $("#client-sh-map i").html('&#xe65b;');
                                that.updateTable.reload({
                                    data: that.clientTableData
                                });
                                that.mapShow = 0;
                            }
                            that.viewsGoTo(obj.data.jd, obj.data.wd)
                            break;
                    }
                });
            });
        },
        // 定位
        viewsGoTo: function (jd, wd) {
            var lgtd = Number(jd);
            var lttd = Number(wd);
            var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({wkid: 4326}));//根据输入坐标信息找地图上的点
            this._map.centerAndZoom(position, 18);//缩放,10是缩放级别,可以自定义,数值越大缩放越大
        },
        close: function () {
            var that = this;
            if (that.clusterLayer != null) {
                that.clearLayer();
            }
            layer.close(that.mylay);
            $('#mapcontentClass').removeClass('client-left-map'); //移除样式
            $('#tabcontainer').css('width', '66%');
            window.clearTimeout(that.realTimeQuery);
            if (that.layuiLayer != null) {
                that.layuiLayer.closeAll();
                that.layerIndex = null;
            }
        },
        // 鼠标点击事件
        clickHand: function () {
            var self = this;
            self._map.onClick = mapClick;
            function mapClick(evt) {
                if (evt.graphic) {
                }
            }
        },
        //获取客户列表并进行表格渲染
        getClinentData: function (pid, openW) {
            var that = this;
            $.ajax({
                url: 'http://36.134.81.48:18001/api/blade-jfpts/equipment/equipment/page',
                data: {
                    pid: pid
                },
                type: 'GET',
                dataType: 'JSON',
                success: function (data) {
                    data.data = that.setColorSort(data.data);
                    that.clientTableData = data.data;
                    if (openW == 0) {
                        var jfwin = "";
                        var xb = "";
                        for (var i = 0; i < data.data.length; i++) {
                            data.data[i].x = Number(data.data[i].jd);
                            data.data[i].y = Number(data.data[i].wd);
                            if (data.data[i].type == "1") {
                                xb++;
                                jfwin +=
                                    "<div class='jfwin-div'>" +
                                    "<span>" + xb + "、</span>" +
                                    "<span>设备名称:" + data.data[i].deviceName + "</span>&nbsp;" +
                                    "<span>所属单位:" + data.data[i].street + "</span>&nbsp;" +
                                    "<span>到期时间:" + data.data[i].expireTime + "</span>" +
                                    "</div>"
                            }
                        }
                        if (jfwin != "") {
                            //页面层
                            that.mylay = layer.open({
                                type: 1,
                                title: "待缴费",
                                skin: 'layui-layer-rim', //加上边框
                                area: ['550px', '280px'], //宽高
                                content: jfwin
                            });
                        }
                        that.flareClusterLayer(data.data);
                    }
                    that.updateTable.reload({
                        data: that.clientTableData
                    });
                }
            });
        },
        //下拉切换/点击查询事件
        clientQueryData: function () {
            var that = this;
            var where = {};
            if (that.zTreeId != null) {
                where.pid = that.zTreeId;
            }
            if ($("#client-query-input").val() != null) {
                where.deviceName = $("#client-query-input").val();
            }
            if (that.queryXZQ != null) {
                where.addvcd = that.queryXZQ
            }
            if (that.queryType != null) {
                where.dtype = that.queryType == "掉线" ? "0" : that.queryType == "测试" ? "1" : that.queryType == "报警" ? "2" : "";
            }
            if (that.queryZT != null) {
                where.devicestate = that.queryZT == "布防" ? "1" : that.queryZT == "撤防" ? "0" : "";
            }
            //获取四个查询条件
            $.ajax({
                url: 'http://36.134.81.48:18001/api/blade-jfpts/equipment/equipment/page',
                data: where,
                type: 'GET',
                dataType: 'JSON',
                success: function (data) {
                    data.data = that.setColorSort(data.data);
                    that.clientTableData = data.data;
                    that.updateTable.reload({
                        data: that.clientTableData
                    });
                }
            });
        },
        //聚合图层事件
@@ -769,37 +256,6 @@
            var that = this;
            that._map.removeLayer(that.clusterLayer);
            that.clusterLayer = null;
        }
        , setColorSort: function (data) {
            var Dqdate = new Date().getTime();
            for (var i = 0; i < data.length; i++) {
                //设置初始等级为4
                data[i].color = 4;
                //当欠费时,级别为3
                if (data[i].type == "1") {
                    data[i].color = 3;
                }
                if (data[i].heartbeat != null && data[i].heartbeat != "") {
                    var date = new Date(data[i].heartbeat).getTime();
                    //若心跳停止一天时,级别为1
                    if ((Dqdate - date) >= (60 * 60 * 24 * 1000)) {
                        data[i].color = 1;
                    }
                } else {
                    //若心跳为空,级别为2
                    data[i].color = 2;
                }
            }
            data.sort(function (a, b) {
                return a.color - b.color;
            });
            return data;
        }
public/map/widgets/clientManagement/template.html
@@ -1,84 +1,8 @@
<div class='client-time-police' open-li='client-time-police'
     style='height: calc(100%);'>
    <div id="client_left_tree" class="ztree"></div>
    <div id="rMenu">
        <ul>
            <li id="client-all-deploy">一键布防</li>
            <li id="client-all-retreat">一键撤防</li>
        </ul>
    </div>
    <div id="client_left_table">
        <div class="client-time-select-condition">
            <div>
                <span>关键字查询:</span>
                <input id="client-query-input" type="text" placeholder="请输入名称/设备编码" class="route-name">
            </div>
            <div class="realtime-district">
                <ul>
                    <li id='realtimeDistrict'>
                        行政区:
                        <div id="client_select_1">
                            全部
                            <i class="layui-icon client-select">&#xe61a;</i>
                        </div>
                        <div class='select-list'>
                            <ul>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="realtime-level">
                <ul>
                    <li id='realtimeLevel'>
                        类型:
                        <div id="client_select_2">
                            全部
                            <i class="layui-icon client-select">&#xe61a;</i>
                        </div>
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>掉线</li>
                                <li>测试</li>
                                <li>报警</li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="realtime-level">
                <ul>
                    <li id='client-query-type'>
                        状态:
                        <div id="client_select_3">
                            全部
                            <i class="layui-icon client-select">&#xe61a;</i>
                        </div>
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>布防</li>
                                <li>撤防</li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="realtime-timeselect">
                <button type="button" id="client-query-cx" class="layui-btn layui-btn-sm layui-btn-normal"><i
                        class="layui-icon layui-icon-search"></i>查询
                </button>
                <button type="button" id="client-query-qk" class="layui-btn layui-btn-sm client-btn-qk"><i
                        class="layui-icon layui-icon-refresh"></i>清空
                </button>
            </div>
        </div>
        <div class="client-time-information-list">
@@ -88,43 +12,5 @@
            </table>
        </div>
        <script type="text/html" id="client_time_table_btn">
            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="detail" title="编辑"
                    style="
                        width: 20px;
                        height: 20px;
                        background: url(./images/bianji.png) no-repeat;
                        background-size: 100% 100%;">
            </button>
            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="deploy" title="布防"
                    style="
                        width: 20px;
                        height: 20px;
                        background: url(./images/baojin.png) no-repeat;
                        background-size: 100% 100%;">
            </button>
            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="retreat" title="撤防"
                    style="
                        width: 20px;
                        height: 20px;
                        background: url(./images/cejin.png) no-repeat;
                        background-size: 100% 100%;">
            </button>
            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="location" title="定位"
                    style="
                        width: 20px;
                        height: 20px;
                        background: url(./images/real-time-views-goto.png) no-repeat;
                        background-size: 100% 100%;">
            </button>
        </script>
    </div>
    <div style="display:flex;width:2%;align-items:center;justify-content:center;background-color:#F5F5F5;margin-left:4px">
        <a href="javascript:void(0);" id="client-sh-map"><i class="layui-icon">&#xe65a;</i></a>
    </div>
</div>
src/views/realTimePolice/real.vue
@@ -37,21 +37,18 @@
        <el-button
          v-bind:class=" activeClass==1 ? 'btn-color' : '' "
          size="small"
          type="primary"
          @click="getBZdata(1)"
        >本周
        </el-button>
        <el-button
          v-bind:class=" activeClass==2 ? 'btn-color' : '' "
          size="small"
          type="primary"
          @click="getBYdata(2)"
        >本月
        </el-button>
        <el-button
          v-bind:class=" activeClass==3 ? 'btn-color' : '' "
          size="small"
          type="primary"
          @click="getQBdata(3)"
        >全部
        </el-button>
@@ -291,7 +288,7 @@
      <iframe
        id="mapDiv"
        ref="mapDiv"
        src="http://36.134.81.48:18001/map/index.html"
        src=" http://192.168.0.107:1888/map/index.html?openid=ClientManagement"
        frameborder="0"
        width="100%"
        height="100%"
@@ -577,6 +574,7 @@
          });
      },
      searchReset() {
        this.activeClass = -1;
        this.query = {};
        this.onLoad(this.page);
      },
@@ -781,7 +779,6 @@
        }
      },
      handleStart(row) {
        debugger
        this.$router.push({
          path: `/real/video/${row.channelNumber}/${row.serialNumber}`
        });
@@ -791,6 +788,7 @@
      },
      handleMap(row) {
        this.showMap = true;
        debugger
        this.$nextTick(() => {
          this.$refs.mapDiv.onload = () => {
            window.frames[0].locationObj = {x: row.jd, y: row.wd};
@@ -1150,9 +1148,9 @@
  }
  .el-button.btn-color {
    background: #146ef6;
    border-color: #007aff;
    color: #FFF;
    color: rgb(255, 255, 255);
    background-color: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);
  }
</style>