增加:主界面选择系统页面，统计实时刷新，低电量人员数据显示

zhitong.yu

2024-05-11 b72f8f8d58417eb6fb29672d8ac17cfafa46775c

 src/main/webapp/Home/HomeJs/Home.js

@@ -66,6 +66,9 @@
        ]]
    });

    


    table.render({
        elem: '#fence'
        ,url: '/hxzkuwb/findfence'
@@ -99,6 +102,9 @@
    });





    table.render({
        elem: '#person'
        ,url: '/hxzkuwb/findperson'
@@ -130,6 +136,20 @@
            ,{field: 'redius', title: '聚集半径',width:150}
            ,{field: 'shichang', title: '聚集时长',width:165}
            ,{field: 'weixianpin', title: '危险品名称',width:170}
        ]]
    });

    table.render({
        elem: '#PowerPerson'
        ,url: '/hxzkuwb/findPowerPerson'
        ,skin: 'nob'
        ,height:300
        ,limit: 5
        ,page: true //开启分页
        ,cols: [[ //表头
            { field: 'tagid', title: '编号',width:100}
            ,{field: 'name', title: '姓名',width: 100}
            ,{field: 'power', title: '电量',width: 100,templet: '#titleTplPower'}
        ]]
    });

@@ -175,38 +195,7 @@



    $.get("/hxzkuwb/findMapShow",function (data){
        $(".MapShow").append('<li style="width: 100px;display: inline-block"><a href="javascript:;"  onClick="yckb()" style="width: 100px;display: inline-block;font-size: 12px;color: '+data[0].color+'" id="ykcbs">隐藏看板</a></li>')
        if(data[0].ishow == "显示"){
            $(".MapShow").append('<li style="width: 100px;display: inline-block"><input type="checkbox" id="sanweis" onClick="Qh1()"  style="position: relative;top: 2px"/><a href="javascript:;"  class="ts1" style="font-size: 12px;color: '+data[0].color+'" onClick="Qh1()" id="qh1">三维地图</a></li>')
            $(".MapShow").append('<li onclick="xianshilixians()" style="width: 100px;display: inline-block"><input type="checkbox" id="xianshilixian"   style="position: relative;top: 2px"/><a href="javascript:;" style="font-size: 12px;color: '+data[0].color+'">显示离线</a></li>')
            $(".MapShow").append('<li class="ctrls" style="width: 100px;display: inline-block"><a href="javascript:;" style="font-size: 12px;color: '+data[0].color+'" title="按住CTRL按键可以旋转改变地图视角">CTRL旋转地图</a></li>')
        }else{
        }
        if(data[1].ishow == "显示"){
            $(".MapShow").append('<li style="width: 100px;display: inline-block"><input type="checkbox" id="baidus" onClick="Qh()" style="position: relative;top: 2px"/><a href="javascript:;" class="ts1" style="font-size: 12px;color: '+data[0].color+'" onClick="Qh()" id="qh2">'+data[1].type+'</a></li>')
            $(".MapShow").append('<li class="qhWeiLan" style="display: inline-block;font-size: 12px;color: white;width: 100px;"><a  onclick="qhweil()" id="weilanxs" style="color: '+data[0].color+'" href="javascript:;">隐藏围栏</a></li>')
            $(".MapShow").append('<li onclick="xianshilixians()" style="width: 100px;display: inline-block"><input type="checkbox" id="xianshilixian"   style="position: relative;top: 2px"/><a href="javascript:;" style="font-size: 12px;color: '+data[0].color+'">显示离线</a></li>')
            $(".MapShow").append('<li class="ctrls" style="width: 100px;display: inline-block"><a href="javascript:;" style="font-size: 12px;color: '+data[0].color+'" title="按住CTRL按键可以旋转改变地图视角">CTRL旋转地图</a></li>')
            $(".MapShow").append('<li class="MapType" onclick="inits()" style="cursor: pointer;font-size: 12px;width: 100px;display: inline-block;color: '+data[0].color+'"><a href="javascript:;" style="font-size: 12px;cursor:pointer;color: '+data[0].color+'" title="">切换类型</a></li>')
        }else{
            // $("#ditu2").hide();
            Qh1();
        }
        // $(".MapShow").append('<li class="qhPingMian" style="font-size: 12px;width: 100px;display: inline-block"><select id="mySelect" onchange="TuCeng()" style="border: none;background: none;color: '+data[0].color+'"><option style="color: black">切换图层</option></select></li>')
        $(".qhPingMian").hide();
        // 获取下拉框的 DOM 元素
       $.post("/hxzkuwb/qiehuanditu_option.do",function (data){
            if (data.length == 1){
                $(".qhPingMian").hide();
            }else{
                for (var i = 0 ; i < data.length;i++){
                    var mapname = data[i].mapname.split('.')
                    $("#mySelect").append('<option style="color: black" value="'+data[i].floor+'">'+mapname[0]+'</option>')
                }
            }
       })
    })

    // $(".Ditu").click(function (){
    //     $(".MapShow").empty();
    //     layer.tips('操作成功','.Ditu');
@@ -556,78 +545,42 @@
            color: 'white'
        }
    },
    series: [{
        name: '统计',
        type: 'pie',
        radius: ['20%', '40%'],
        center: ['35%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
            borderRadius: 10,
        },
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            { value: 0, name: '静止报警  0' },
            { value: 0, name: 'SOS报警  0' },
            { value: 0, name: '跌落报警  0' },
            { value: 0, name: '缺员报警  0' },
            { value: 0, name: '超员报警  0' },
            { value: 0, name: '聚集报警  0' },
            { value: 0, name: '越界报警  0' },
            { value: 0, name: '进入报警  0' },
            { value: 0, name: '低电报警  0' },
            { value: 0, name: '离线基站  0' },
        ]
    }],
    // 添加事件监听器
    graphic: [
    series: [
        {
            type: 'group',
            left: 'center',
            top: 'center',
            children: [
                {
                    type: 'text',
                    z: 100,
                    left: 'center',
                    top: 'middle',
                    style: {
                        fill: '#fff',
                        text: '',
                        font: '14px Microsoft YaHei'
                    },
                    // 设置鼠标悬停事件
                    onmouseover: function (params) {
                        var dataIndex = params.dataIndex;
                        var name = option.series[0].data[dataIndex].name;
                        // 更新文字颜色
                        this.setStyle('fill', '#46E9E8');
                        console.log("Mouseover on:", name);
                    },
                    // 设置鼠标移出事件
                    onmouseout: function (params) {
                        // 恢复默认文字颜色
                        this.setStyle('fill', '#fff');
                    },
                    onclick: function (params) {
                        var dataIndex = params.dataIndex;
                        var name = option.series[0].data[dataIndex].name;
                        console.log("Clicked on:", name);
                    }
            name: '统计',
            type: 'pie',
            radius: ['20%', '40%'],
            center: ['35%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 20,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 0, name: '静止报警  0' },
                { value: 0, name: 'SOS报警  0' },
                { value: 0, name: '跌落报警  0' },
                { value: 0, name: '缺员报警  0' },
                { value: 0, name: '超员报警  0' },
                { value: 0, name: '聚集报警  0' },
                { value: 0, name: '越界报警  0' },
                { value: 0, name: '进入报警  0' },
                { value: 0, name: '低电报警  0' },
                { value: 0, name: '离线基站  0' },

            ]
        }
    ]
@@ -662,6 +615,10 @@
    var username = $(".kahao").text();
    var context = $("#context1").val();
    var data = "username="+username1+"&context="+context+"&tagid="+username
    if (context.length <2 || context.length >30){
        layer.msg('当前输入内容有误，字符长度不能小于2并且不能大于30')
        return;
    }
    $.get("/hxzkuwb/sendMsg",data,function(data){

    })
@@ -676,6 +633,16 @@
    if(username == "" || username == null){
        layer.msg("请输入设备ID")
    }else{
       if (username.length < 2){
           layer.msg('当前输入内容有误，字符长度不能小于2')
           return
       }

        if (context.length <2 || context.length > 30){
            layer.msg('当前输入内容有误，字符长度不能小于2并且不能大于30')
            return;
        }

        var dts = "username="+username1;
        $.get("/hxzkuwb/findUserRole",dts,function (data){
            if(data.juese=="访客"){
@@ -716,6 +683,10 @@


setInterval(function (){
    if (localStorage.getItem("KuangXuan") != null && localStorage.getItem("KuangXuan1") == "true"){
        $("#JianZhuMsg").empty();
        KuangXuanPerson()
    }
    var SanWei = localStorage.getItem("SanWei_JianZhu")
    if (SanWei != null){
        $("#JianZhuMsg").animate({right: '-1%'}, 500);
@@ -757,7 +728,7 @@
        $("#JianZhuMsg").append('<div style="margin-top: 15%;margin-bottom:5%;margin-left: 5%;width: 85%"><h2 style="margin-top: 0%;display: inline-block;;color: white;font-size: 14px" id="JzMc">'+Name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区域等级：'+data.dangerlevel+'</h2><h2 style="margin-top: 0%;display: inline-block;float: right;color: white;font-size: 14px">总人数：<span id="zongnumes"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img onclick="GuanBiMsg()" src="../Home/HomeImg/clos.png" style="cursor:pointer;width: 20px;height: 20px;"></h2></div>')
        for (var i = 1 ; i <= data.floornum; i++){
            $("#JianZhuMsg").append('' +
                '<div id="LouCeng'+i+'"  style="overflow-x: hidden;overflow-y: scroll;height: 85%;margin-top: 7%;margin-left: 5%;width: 94%">' +
                '<div id="LouCeng'+i+'"  style="overflow-x: hidden;overflow-y: scroll;height: 5%;margin-top: 7%;margin-left: 5%;width: 94%">' +
                '<h2 style="display: inline-block;font-weight: bold;color: black;font-size: 15px">当前楼层：'+i+'层</h2>' +
                '<h2 style="margin-top: 0%;display: inline-block;font-weight: bold;color: black;font-size: 14px;margin-left: 30%">人数：<span id="numes'+i+'" style="display: inline-block;width: 10%">0</span></h2>' +
                '<h2 style="display: inline-block;font-size: 14px;font-weight: bold;margin-left: 10%;cursor:pointer;"  onclick="LouCeng('+i+')">展开/合并</h2><img style="width: 20px;height: 20px;" src="../Home/HomeImg/xiala.png"> ' +
@@ -834,4 +805,25 @@
}


function KuangXuanPerson(){
    var FIDS = localStorage.getItem("KuangXuan");
    var data = "FID="+FIDS
    $.get("/hxzkuwb/FindFIDPersons",data,function (data){
        var floor1 = 0;
        $("#JianZhuMsg").append('<div id="KuangNum" style="margin-top: 17%;margin-left: 5%;color: white"></div>')
        $("#JianZhuMsg").append('<div id="Kuanges" style="overflow-y: scroll;height: 85%;margin-top: 5%"></div>')
            for (var i = 0; i < data.length;i++){
                    $("#Kuanges").append('<div onclick="personMsgtid('+data[i].ptagid+')" class="layui-colla-item" style="background-color: rgba(255, 255, 255, 0)"><h2 class="layui-colla-title" style="background-color: rgba(255, 255, 255, 0)"><img src="HomeImg/PersonShi.png" style="width: 25px;height: 25px"/><span style="display: inline-block;margin-left: 20px">姓名：'+data[i].pname+'</span><span style="display: inline-block;float: right;margin-right: 5%">编号：'+data[i].ptagid+'</span></h2>')
                    floor1++;
            }
            $("#KuangNum").text("总人数："+floor1)
        localStorage.setItem("SanWei_JianZhu","111")
       setTimeout(function (){
           localStorage.setItem("KuangXuan1","false")
       },500)
    })
}