daping/js/visual.js

$(window).on("load",function () {
    $(".loading").fadeOut()
    $('[data-toggle="datepicker"]').datepicker({language: 'zh-CN'});
})
var map, layer, markerlayer, marker,
    url = "http://111.42.156.47:806/iserver/services/map-dili/rest/maps/dili@dili";
var sT = "";
var eT = "";
var fyT = "";
var fyres = null;
var res = null;
var markerList = [];
var mesList = [];
var layer01 = null;
var layer01 = null;
$(function () {
    var oTime = new Date();
    console.log(changeDate(oTime));
    $("#dateend").val(changeDate(oTime));
    $("#datefy").val(changeDate(oTime));
    $("#datestart").val(changeDate(addDate(oTime, -2)));
    init();
})
function init() {
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.Navigation()
        ]
    });
    
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true });
	layer01 = new SuperMap.Layer.Vector("KML1", {
		strategies: [new SuperMap.Strategy.Fixed()],
		protocol: new SuperMap.Protocol.HTTP({
			url: "kml/1.kml",   //"data/sichuang.kml",
			format: new SuperMap.Format.KML({
				extractStyles: true,
				extractAttributes: true,
				internalProjection: new SuperMap.Projection("EPSG:4326"),       //所在地图的坐标系
				maxDepth: 2      //要解析外部链接文件时此值必须大于1
			})
		})
	});
	layer02 = new SuperMap.Layer.Vector("KML2", {
		strategies: [new SuperMap.Strategy.Fixed()],
		protocol: new SuperMap.Protocol.HTTP({
			url: "kml/2.kml",   //"data/sichuang.kml",
			format: new SuperMap.Format.KML({
				extractStyles: true,
				extractAttributes: true,
				internalProjection: new SuperMap.Projection("EPSG:4326"),       //所在地图的坐标系
				maxDepth: 2      //要解析外部链接文件时此值必须大于1
			})
		})
	});
    markerlayer = new SuperMap.Layer.Markers("markerLayer");
    layer.events.on({ "layerInitialized": addLayer });

    searchjindu();
    searchfangyi();
}

function addLayer() {

    map.addLayers([layer, markerlayer, layer01, layer02]);
    //显示地图范围
    map.setCenter(new SuperMap.LonLat(126.37, 46.05), 1);
}

function searchfangyi() {
    if (fyT != $("#datefy").val()) {
        fyT = $("#datefy").val();
        var datajs = { datefy: $("#datefy").val() };
        $.ajax({
            url: "https://www.hmedi02.net:802/qiangxian/platform/qiangxianxinxi/qiangxianxinxi/dataFangyi",
            type: "GET",
            async: false,
            contentType: "application/json;charset=utf-8",
            data: datajs,
            success: function (result) {
                fyres = result;
                if ($("#biaoduan").val() == "合计") {
                    echarts_1(result.zhengchangAll, result.yichangAll);
                } else if ($("#biaoduan").val() == "一标段") {
                    echarts_1(result.zhengchang1, result.yichang1);
                } else if ($("#biaoduan").val() == "二标段") {
                    echarts_1(result.zhengchang2, result.yichang2);
                }
            },
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    } else {
        if ($("#biaoduan").val() == "合计") {
            echarts_1(fyres.zhengchangAll, fyres.yichangAll);
        } else if ($("#biaoduan").val() == "一标段") {
            echarts_1(fyres.zhengchang1, fyres.yichang1);
        } else if ($("#biaoduan").val() == "二标段") {
            echarts_1(fyres.zhengchang2, fyres.yichang2);
        }
    }
}

function searchjindu() {
    if (sT != $("#datestart").val() || eT != $("#dateend").val()) {
        if (markerList.length > 0) {
            for (var i = 0; i < markerList.length; i++) {
                markerlayer.removeMarker(markerList[i]);
            }
            markerList = [];
        }
        sT = $("#datestart").val();
        eT = $("#dateend").val();
        var datajs = { datestart: $("#datestart").val(), dateend: $("#dateend").val() };
        $.ajax({
            url: "https://www.hmedi02.net:802/qiangxian/platform/qiangxianxinxi/qiangxianxinxi/dataDaping",
            type: "GET",
            async: false,
            contentType: "application/json;charset=utf-8",
            data: datajs,
            success: function (result) {
                console.log(result);
                res = result;
                mesList = result.mapList;
                echarts_2(result.mapList);
                if ($("#biaoduan").val() == "合计") {
                    echarts_3(result.xZhou, result.zuoyerenAll, result.zuoyecheAll, result.icecarAll, result.watercarAll, result.jinduAll);
                    table1(result.table, result.table2);
                    echarts_5(result.xZhou, result.fangyirenAll);
                } else if ($("#biaoduan").val() == "一标段") {
                    echarts_3(result.xZhou, result.zuoyeren1, result.zuoyeche1, result.icecar1, result.watercar1, result.jindu1);
                    table1(result.table, result.table2);
                    echarts_5(result.xZhou, result.fangyiren1);
                } else if ($("#biaoduan").val() == "二标段") {
                    echarts_3(result.xZhou, result.zuoyeren2, result.zuoyeche2, result.icecar2, result.watercar2, result.jindu2);
                    table1(result.table, result.table2);
                    echarts_5(result.xZhou, result.fangyiren2);
                }
            },
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    } else {
        if ($("#biaoduan").val() == "合计") {
            echarts_3(res.xZhou, res.zuoyerenAll, res.zuoyecheAll, res.icecarAll, res.watercarAll, res.jinduAll);
            table1(res.table, res.table2);
            echarts_5(res.xZhou, res.fangyirenAll);
        } else if ($("#biaoduan").val() == "一标段") {
            echarts_3(res.xZhou, res.zuoyeren1, res.zuoyeche1, res.icecar1, res.watercar1, res.jindu1);
            table1(res.table, res.table2);
            echarts_5(res.xZhou, res.fangyiren1);
        } else if ($("#biaoduan").val() == "二标段") {
            echarts_3(res.xZhou, res.zuoyeren2, res.zuoyeche2, res.icecar2, res.watercar2, res.jindu2);
            table1(res.table, res.table2);
            echarts_5(res.xZhou, res.fangyiren2);
        }
    }
}

function addDate(date, days) {
    var d = new Date(date);
    d.setDate(d.getDate() + days);
    return d;
}

function changeDate(dateT) {
    var year = dateT.getFullYear(); //获取完整的年份(4位,1970-????)
    var month = dateT.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    var day = dateT.getDate(); //获取当前日(1-31)
    if (month < 10) {
        month = "0" + month;
    }
    if (day < 10) {
        day = "0" + day;
    }
    var dateString = year + "-" + month + "-" + day;
    return dateString
}

function echarts_1(zc, yc) {
    var myChart = echarts.init(document.getElementById('echart1'));

    var datajs = [
        { value: zc, name: '体温正常' },
        { value: yc, name: '体温异常' },

    ]
    var option = {
        color: ['#2ef4ab', '#ffe074'],
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} 人 ({d}%)"
        },
        legend: {
            bottom: '3%',
            itemGap: 10,
            icon: 'circle',
            textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: 12
            },
            data: ['体温正常', '体温异常']
        },
        calculable: true,
        series: [
            {
                name: ' ',
                type: 'pie',
                radius: [30, 50],
                center: ['50%', '40%'],
                //roseType: 'radius',
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: datajs
            },
        ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function echarts_2(mList) {
    if (mList.length > 0) {
        for (var i = 0; i < mList.length; i++) {
            var size = new SuperMap.Size(44, 33);
            var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
            var icon = new SuperMap.Icon('images/marker.png', size, offset);
            marker = new SuperMap.Marker(new SuperMap.LonLat(mList[i].longitude2, mList[i].latitude2), icon);
            marker.events.on({
                "id": mList[i].id,
                "click": openInfoWin,
                "scope": marker
            });
            markerList.push(marker);
        }
        for (var i = 0; i < markerList.length; i++) {
            markerlayer.addMarker(markerList[i]);
        }
    }
}
function openInfoWin() {
    var marker = this;
    var lonlat = marker.getLonLat();
    console.log(lonlat.lon);
    console.log(lonlat.lat);
    for (var i = 0; i < mesList.length; i++) {
        console.log(mesList[i]);
        if (ec(lonlat.lon, mesList[i].longitude2, lonlat.lat, mesList[i].latitude2)) {
            $("#sbrq").html(mesList[i].addtime);
            $("#fkrs").html(mesList[i].fangyiren);
            $("#yctw").html(mesList[i].yichangren);
            $("#zyrs").html(mesList[i].zuoyeren);
            $("#zycs").html(mesList[i].zuoyeche);
            $("#ybcc").html(mesList[i].icecar);
            $("#xwcc").html(mesList[i].watercar);
            $("#wcl").html(mesList[i].jindu);
            $("#bcsm").html(mesList[i].remark2);
            $("#sfyc").html(mesList[i].shifouyichang);
            $("#ycqk").html(mesList[i].yichangxinxi);
            if (mesList[i].fujianid == "") {
                $("#xczp").html("暂无现场照片");
            } else {
                $("#xczp").html("<button style=\"height:24px;width:100px;color: #000000\" data-toggle=\"modal\" data-target=\"#myModal\">查看现场照片</button>");
                var tList = mesList[i].fujianid.split(";");
                var imgHtml = "";
                for (var j = 0; j < tList.length; j++) {
                    if (tList != "") {
                        imgHtml += "<img src='" + tList[j] + "' /></br>";
                    }
                }
                $("#myModalLabel").html(imgHtml);
            }
            if (mesList[i].yichangfujian == "") {
                $("#yczp").html("暂无异常照片");
            } else {
                $("#yczp").html("<button style=\"height:24px;width:100px;color: #000000\" data-toggle=\"modal\" data-target=\"#myModal2\">查看异常照片</button>");
                var tList = mesList[i].yichangfujian.split(";");
                var imgHtml = "";
                for (var j = 0; j < tList.length; j++) {
                    if (tList != "") {
                        imgHtml += "<img src='" + tList[j] + "' /></br>";
                    }
                }
                $("#myModalLabel2").html(imgHtml);
            }
            return;
        }
    }
}

function ec(lon1, lon2, lat1, lat2) {
    var l1 = left(lon1 + " ", 14);
    var l2 = left(lon2 + " ", 14);
    var l3 = left(lat1 + " ", 14);
    var l4 = left(lat2 + " ", 14);
    if (l1 == l2 && l3 == l4) {
        return true;
    }
    return false;
}
function left(mainStr, lngLen) {
    if (lngLen > 0) { return mainStr.substring(0, lngLen) }
    else { return null }
}
function echarts_3(dtLisT, zyrList, zycList, ybcList, xwcList, jdList) {

    var myChart = echarts.init(document.getElementById('echart3'));

    var option = {
        legend: {
            left: 'center',
            textStyle: {
                color: "rgba(255, 255, 255, 1)"
            }
        },
        color: ['#1921ff', '#01c3dd', '#008198', '#2ef4ab', '#ffe074'],
        textStyle: {
            color: 'rgba(255, 255, 255, 1)'
        },
        tooltip: {
            textStyle: {
                align: 'left'
            },
            trigger: 'axis',
            formatter: "{b0} " + $("#biaoduan").val() + "：</br>{a0} : {c0} 人</br>{a1} : {c1} 辆</br>{a2} : {c2} 次</br>{a3} : {c3} 次</br>{a4} : {c4} 平方米"
        },
        dataZoom: {
            start: 0,
            end: 100,
            bottom: 0,
            fillerColor: 'rgba(33,114,176,0.2)',
            textStyle: {
                color: 'rgba(255,255,255,.7)'
            },
            borderColor: {
                color: 'rgba(33,114,176,0.2)'
            },
            handleStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#fbf320'
                    }, {
                        offset: 1, color: '#00b4e3'
                    }],
                    global: false
                }
            }
        },
        grid: {
            left: '3%',
            right: '5%',
            top: '8%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: 'rgba(33,114,176,0.7)',
                        fontSize: '12'
                    },
                    lineStyle: {
                        color: 'rgba(33,114,176,0.2)',
                    }
                },
                data: dtLisT
            }
        ],
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: 'rgba(33,114,176,0.7)',
                    fontSize: '10',
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(33,114,176,0.2)',
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(33,114,176,0.2)',
                }
            },

        },
        series: [
            {
                name: '作业人数',
                lineStyle: {
                    color: '#1921ff',
                },
                type: 'line',
                areaStyle: {
                    normal: {
                        type: 'default',
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
                            offset: 0,
                            color: 'rgba(129,197,255,.6)'
                        }, {
                            offset: 1,
                            color: 'rgba(129,197,255,.0)'
                        }], false)
                    }
                },
                smooth: true,
                itemStyle: {
                    normal: { areaStyle: { type: 'default' } }
                },
                label: {
                    show: true,
                    position: 'top'
                },
                data: zyrList
            },
            {
                name: '作业车数',
                lineStyle: {
                    color: '#01c3dd',
                },
                type: 'line',
                areaStyle: {
                    normal: {
                        type: 'default',
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
                            offset: 0,
                            color: 'rgba(129,197,255,.6)'
                        }, {
                            offset: 1,
                            color: 'rgba(129,197,255,.0)'
                        }], false)
                    }
                },
                smooth: true,
                itemStyle: {
                    normal: { areaStyle: { type: 'default' } }
                },
                label: {
                    show: true,
                    position: 'top'
                },
                data: zycList
            },
            {
                name: '运冰车次',
                lineStyle: {
                    color: '#008198',
                },
                type: 'line',
                areaStyle: {
                    normal: {
                        type: 'default',
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
                            offset: 0,
                            color: 'rgba(129,197,255,.6)'
                        }, {
                            offset: 1,
                            color: 'rgba(129,197,255,.0)'
                        }], false)
                    }
                },
                smooth: true,
                itemStyle: {
                    normal: { areaStyle: { type: 'default' } }
                },
                label: {
                    show: true,
                    position: 'top'
                },
                data: ybcList
            },
            {
                name: '吸污车次',
                lineStyle: {
                    color: '#2ef4ab',
                },
                type: 'line',
                areaStyle: {
                    normal: {
                        type: 'default',
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
                            offset: 0,
                            color: 'rgba(129,197,255,.6)'
                        }, {
                            offset: 1,
                            color: 'rgba(129,197,255,.0)'
                        }], false)
                    }
                },
                smooth: true,
                itemStyle: {
                    normal: { areaStyle: { type: 'default' } }
                },
                label: {
                    show: true,
                    position: 'top'
                },
                data: xwcList
            },
            {
                name: '完成量',
                lineStyle: {
                    color: '#ffe074',
                },
                type: 'line',
                areaStyle: {
                    normal: {
                        type: 'default',
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
                            offset: 0,
                            color: 'rgba(129,197,255,.6)'
                        }, {
                            offset: 1,
                            color: 'rgba(129,197,255,.0)'
                        }], false)
                    }
                },
                smooth: true,
                itemStyle: {
                    normal: { areaStyle: { type: 'default' } }
                },
                label: {
                    show: true,
                    position: 'top'
                },
                data: jdList
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function echarts_5(dtLisT, fkrList) {
    var myChart = echarts.init(document.getElementById('echart5'));

    var option = {
        color: ['#ffe074'],
        textStyle: {
            color: 'rgba(255, 255, 255, 1)'
        },
        tooltip: {
            textStyle: {
                align: 'left'
            },
            trigger: 'axis',
            formatter: "{b} " + $("#biaoduan").val() + "：</br>{a} : {c} 人"
        },
        xAxis: {
            type: 'category',
            data: dtLisT
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: "防疫人数",
            data: fkrList,
            type: 'bar'
        }]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
function table1(t1, t2) {
    $("#td1").html(t1[0]);
    $("#td2").html(t1[1]);
    $("#td3").html(t1[2]);
    $("#td4").html(t1[3]);
    $("#td5").html(t1[4]);
    $("#td6").html(t1[5]);
    $("#td7").html(t1[6]);
    $("#td8").html(t1[7]);
    $("#td9").html(t1[8]);
    $("#td10").html(t1[9]);
    $("#td11").html(t1[10]);
    $("#td12").html(t1[11]);
    $("#td13").html(t1[12]);
    $("#td14").html(t1[13]);
    $("#td15").html(t1[14]);
    $("#td16").html(t1[15]);
    $("#td17").html(t1[16]);
    $("#td18").html(t1[17]);
    $("#td19").html(t1[18]);
    $("#td20").html(t1[19]);
    $("#td21").html(t1[20]);
    $("#td22").html(t1[21]);
    $("#td23").html(t1[22]);
    $("#td24").html(t1[23]);
    $("#td25").html(t2[0]);
    $("#td26").html(t2[1]);
    $("#td27").html(t2[2]);
}