qxzSy/yfwlw/templates/static/bigData/js/bigScreen.js

// 1框
$.ajax({
    url: 'user_display',
    type: 'post',
    data: {},
    dataType: 'json',
    success: function (data) {
        console.log(data)
        fillBase(data)
        // $('.exampleImg').attr('src', 'http://120.27.222.26/' + data.basephoto);
        $('#baseName').html(data.basename || '展示基地')
        //删除加载动画
        $('#load').fadeOut(1000)
        setTimeout(function () {
            $('#load').remove()
        }
            , 6000);
    },
    error: function (type) {
        console.log(type)
    }
})
// 填充基地信息+第一次设备数据请求
function fillBase(data) {
    var cbdList = '', jkList = '', bzyList = '', qxzList = '';
    var cbdNum = 0, jkNum = 0, bzyNum = 0, qxzNum = 0;
    var dat = data.dat;
    for (var i = 0; i < dat.length; i++) {
        var id = dat[i].e_id.substring(dat[i].e_id.length - 8);
        if (dat[i].equip_type == 3) {
            cbdList += '<option value="' + dat[i].e_id + '">测报灯' + id + '</option>';
            cbdNum++;
        } else if (dat[i].equip_type == 5) {
            qxzList += '<option value="' + dat[i].e_id + '">环境监测' + id + '</option>';
            qxzNum++;
        } else if (dat[i].equip_type == 6) {
            jkList += '<option value="' + dat[i].e_id + '">监　控' + id + '</option>';
            jkNum++;
        } else if (dat[i].equip_type == 7) {
            bzyList += '<option value="' + dat[i].e_id + '">孢子仪' + id + '</option>';
            bzyNum++;
        }
        if (i == dat.length - 1) {
            $('#cbdList').html(cbdList).next().html(cbdNum + '台');
            $('#cbdList').select2({width: '55%',backgroundColor:'#000',color:'#fff'});
            $('#jkList').html(jkList).next().html(jkNum + '台');
            $('#jkList').select2({width: '55%'});
            $('#bzyList').html(bzyList).next().html(bzyNum + '台');
            $('#bzyList').select2({width: '55%'});
            $('#qxzList').html(qxzList).next().html(qxzNum + '台');
            $('#qxzList').select2({width: '55%'});
            getCbdInfo($('#cbdList').val())
            if (fls.f) { //安装了flash
                $('.jkinner').show();
                $('.flashDownDiv').hide();
                getjkPath($('#jkList').val())
            } else {
                $('.jkinner').hide();
                $('.flashDownDiv').show();
            }
            getBzyInfo($('#bzyList').val())
            getQxzInfo($('#qxzList').val())
            // cbdchange
            // jkchange
            // bzychange
            // qxzchange
            // 查看设备分布
        }
    }
}
// 2框
var cbdPhotoList;
function getCbdInfo(id) {
    $.ajax({
        url: 'cbd_display',
        type: 'post',
        data: {
            imei: id
        },
        dataType: 'json',
        success: function (data) {
            fillCbdData(data);
            fillCbdChart(data);
            fillCbdPhoto(data);
            cbdPhotoList = data.photolist
        },
        error: function (type) {
            $('#ts').html('--');
            $('#rps').html('--');
            $('#lps').html('--');
            $('#tps').html('--');
            $('#gs').html('--');
            $('#hs').html('--');
            $('#csq').html('--');
        }
    })
}

function fillCbdData(data) {
    var status = eval('(' + data.status + ')');
    var onoff = data.is_online ? '在线' : '离线';
    $('#onoff').html(onoff);
    var ts = status.ts ? '时控' : '光控';
    $('#ts').html(ts);
    var rps = status.rps ? '雨控' : '正常';
    $('#rps').html(rps);
    var lps = status.lps ? '黑夜' : '白天';
    $('#lps').html(lps);
    var tps = status.tps ? '温控' : '正常';
    $('#tps').html(tps);
    var gs = status.gs ? '落虫' : '排水';
    $('#gs').html(gs);
    var hs = status.hs ? '加热' : '正常';
    $('#hs').html(hs);
    $('#csq').html(status.csq);
}


// 3框
var myChart = echarts.init(document.getElementById('echarts'));
// 指定图表的配置项和数据
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'line',         // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {          // 直线指示器样式设置
                color: '#fff',
                width: 2,
                type: 'solid'
            },
            shadowStyle: {                       // 阴影指示器样式设置
                width: 'auto',                   // 阴影大小
                color: 'rgba(150,150,150,0.3)'  // 阴影颜色
            }
        },
    },
    legend: {
        data: ['温度', '湿度', '害虫数量'],
        x: 'right',
        textStyle: {//图例文字的样式
            color: '#ccc',
            fontSize: 12
        }
    },
    toolbox: {
        show: true,
        feature: {
            // mark: { show: true },
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            // saveAsImage: { show: true }
        }
    },
    grid: {
        x: '30',
        y: '30',
        x2: '30',
        y2: '30'
    },
    dataZoom: {
        show: false,
        realtime: true,
        dataBackgroundColor: 'rgba(144,197,237,0.2)'
        // fillerColor:'rgba(0,0,0,0)'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
        axisLine: { lineStyle: { color: "#2b8dc2" } }

    },
    yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: "#2b8dc2" } },
        splitLine: { show: false }
    },
    // color: ['#2d92c6'],
    series: []
};
myChart.setOption(option);

function fillCbdChart(data) {
    var pestlist = data.pestlist;
    var val = [];
    var time = [];
    var at = [], ah = [];
    if (pestlist.length) {

        for (var i = 0; i < pestlist.length; i++) {
            time.unshift(pestlist[i].time);
            at.unshift((pestlist[i].at / 10).toFixed(1));
            ah.unshift((pestlist[i].ah / 10).toFixed(1));
            var pestall = pestlist[i].pest.split('#');
            var num = 0;
            for (var z = 0; z < pestall.length; z++) {
                var pest = pestall[z].split(',');
                num += parseInt(pest[1]);
                if (z == pestall.length - 1) {
                    val.unshift(num);
                }
            }
            if (i == pestlist.length - 1) {
                var allval = [];
                allval.push(at)
                allval.push(ah)
                allval.push(val)
                var color = ['green', 'yellow', 'red'];
                var legend = ['温度', '湿度', '害虫数量']
                myChart.clear();
                option.series = [];
                option.xAxis.data = time;
                for (s = 0; s < 3; s++) {
                    option.series.unshift({
                        name: legend[s],
                        type: 'line',
                        data: allval[s],
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: color[s],
                                shadowBlur: 1,
                                shadowColor: color[s],
                                borderColor: color[s],
                                borderWidth: 2,
                                backgroundColor: 'transparent'
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: color[s]
                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 2555, 255, 0.2)'
                                }]),
                            }
                        }
                    });
                    if (s == 2) {
                        myChart.setOption(option);
                    }
                }
            }
        }
    }else{
        myChart.setOption(option);
    }

}

// 4框
// 判断是否启用flash
function flashChecker() {
    var hasFlash = 0;　　　　 //是否安装了flash
    var flashVersion = 0;　　 //flash版本
    if (document.all) {
        var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        if (swf) {
            hasFlash = 1;
            VSwf = swf.GetVariable("$version");
            flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
        }
    } else {
        if (navigator.plugins && navigator.plugins.length > 0) {
            var swf = navigator.plugins["Shockwave Flash"];
            if (swf) {
                hasFlash = 1;
                var words = swf.description.split(" ");
                for (var i = 0; i < words.length; ++i) {
                    if (isNaN(parseInt(words[i]))) {
                        continue;
                    }
                    flashVersion = parseInt(words[i]);
                }
            }
        }
    }
    return {
        f: hasFlash,
        v: flashVersion
    };
}
var fls = flashChecker();
function getcbdInfo(id) {
    $.ajax({
        url: 'user_display',
        type: 'post',
        data: {},
        dataType: 'json',
        success: function (data) {
            fillBase(data)
        },
        error: function (type) {
            console.log(type)
        }
    })
}
function getjkPath(id) {
    $.ajax({
        url: 'jk_view',
        type: 'get',
        data: {
            imei: id
        },
        dataType: 'json',
        success: function (data) {
            var dat = data[0].data[0];
            if (data[0].code == 200) {
                StartPlay(dat.deviceSerial, '', '', dat.rtmpHd, dat.hlsHd, dat.deviceSerial, '', '', null)
            }
        }
    })
}
//预览函数
function StartPlay(id, connectionType, liveStatus, rtmp, hls, deviceSerial, cameraNo, title, obj) {
    var playHtml = "<video id='myPlayer' class='videoNum' poster='' controls playsinline webkit-playsinline autoplay  style='width:100%;height: 100%;'>";
    playHtml += "<source src='" + rtmp + "' type='' />";
    playHtml += "</video>";
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.appendChild(document.createTextNode(" new EZUIPlayer('myPlayer');"));
    $('.videobox').html(playHtml);
    $('body').append(script);
}
// 控制
function configCamera(deviceSerial, ctrl, movenum) {
    var id = $('#jkList').val();
    if (!id) {
        layer.msg('暂无设备！')
        return;
    }

    $.ajax({
        url: 'jk_view',
        type: 'post',
        dataType: 'json',
        data: {
            id: id,
            ctrl: ctrl,
            movenum: movenum
        },
        success: function (data) {
            if (ctrl == 'takephoto') {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.open({
                        title: '手动下载'
                        , content: '<textarea readonly id="downpath">' + data.data.picUrl + '</textarea>'
                        , btn: ['复制', '取消']
                        , area: ['400px', '230px']
                        , yes: function (index, layero) {
                            //按钮【按钮一】的回调
                            document.getElementById('downpath').select();
                            layer.tips('手动复制，在浏览器打开，另存为', '#downpath', {
                                tips: 2
                            });
                            return false;
                        }
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                        , btn3: function (index, layero) {
                        }
                        , cancel: function () {
                            //右上角关闭回调

                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    });
                });
                // window.open(data.data.picUrl)
            }
        }
    })
}

// 5框
var bzyPhotoList;
function getBzyInfo(id) {
    $.ajax({
        url: 'bzy_display',
        type: 'post',
        data: {
            imei: id
        },
        dataType: 'json',
        success: function (data) {
            bzyPhotoList = data.photolist
            fillBzyData(data)
            fillBzyPhoto(data)
        },
        error: function (type) {
            $('#ts').html('--');
            $('#rps').html('--');
            $('#lps').html('--');
            $('#tps').html('--');
            $('#gs').html('--');
            $('#hs').html('--');
            $('#csq').html('--');
        }
    })
}

function fillBzyData(data) {
    var status = eval('(' + data.status + ')');
    var onoff = data.is_online ? '在线' : '离线';
    $('#bzyonoff').html(onoff);
    var bzyswitch = status.on_off ? '开启' : '关闭';
    $('#bzyswitch').html(bzyswitch);
    var bzybat_sta = status.bat_sta ? '电量过低' : '正常';
    $('#bzybat_sta').html(bzybat_sta);
    var bzyusb_sta = status.usb_sta ? '异常' : '正常';
    $('#bzyusb_sta').html(bzyusb_sta);
    $('#bzyv_bat').html(parseFloat(status.v_bat).toFixed(2));
    $('#bzypre_temp').html(status.pre_temp);
    $('#bzycsq').html(status.csq);
    $('#bzydver').html(status.dver);
    var bzyrps = status.rps ? '雨控' : '正常';
    $('#bzyrps').html(bzyrps);
}
// 6框
function fillBzyPhoto(data) {
    var photos = data.photolist;
    if(photos.length){
        var str0 = photos[0].substring(0,4);
        var str1 = photos[1].substring(0,4);
        var str2 = photos[2].substring(0,4);
        if(str0 == 'http'){
            $('#bzyPhoto1').attr('src', photos[0]);
        }else{
            $('#bzyPhoto1').attr('src', 'http://120.27.222.26/bzy/' + photos[0]);
        }
        if(str1 == 'http'){
            $('#bzyPhoto2').attr('src', photos[1]);
        }else{
            $('#bzyPhoto2').attr('src', 'http://120.27.222.26/bzy/' + photos[1]);
        }
        if(str2 == 'http'){
            $('#bzyPhoto3').attr('src', photos[2]);
        }else{
            $('#bzyPhoto3').attr('src', 'http://120.27.222.26/bzy/' + photos[2]);
        }
    }else{
        $('#bzyPhoto1').attr('src', '');
        $('#bzyPhoto2').attr('src', '');
        $('#bzyPhoto3').attr('src', '');
    }
}

// 查看图片列表 
$('.bzyphotodiv').on('click', function () {
    var data = [];
    if(bzyPhotoList.length){ 
        for (var i = 0; i < bzyPhotoList.length; i++) {
            var str = bzyPhotoList[i].substring(0,4);
            if(str == 'http'){
                var dat = {
                    "src": bzyPhotoList[i], //原图地址
                    "thumb": bzyPhotoList[i] //缩略图地址
                }
            }else{
                var dat = {
                    "src": "http://120.27.222.26/bzy/" + bzyPhotoList[i], //原图地址
                    "thumb": "http://120.27.222.26/bzy/" + bzyPhotoList[i] //缩略图地址
                }
            }
            data.push(dat);
        }
        layui.use('layer', function () {
            var layer = layui.layer;
            json = {
                "title": "", //相册标题
                "id": 123, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": data
            }
            layer.photos({
                photos: json
                , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                , shadeClose: false
                , shade: [0.8, '#393D49']
                , closeBtn: 1
            });
        });
    }else{
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.msg('暂无图片');
        }) 
    }
    
    
})
// 查看图片列表
$('.cbdphotodiv').on('click', function () {
    var data = [];
    for (var i = 0; i < cbdPhotoList.length; i++) {
        var dat = {
            "src": "http://120.27.222.26/" + cbdPhotoList[i], //原图地址
            "thumb": "http://120.27.222.26/" + cbdPhotoList[i] //缩略图地址
        }
        data.push(dat);
    }
    layui.use('layer', function () {
        var layer = layui.layer;
        json = {
            "title": "", //相册标题
            "id": 123, //相册id
            "start": 0, //初始显示的图片序号，默认0
            "data": data
        }
        layer.photos({
            photos: json
            , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            , shadeClose: false
            , shade: [0.8, '#393D49']
            , closeBtn: 1
        });
    });
})


// 7框
function fillCbdPhoto(data) {
    var photos = data.photolist;
    $('#cbdPhoto1').attr('src', 'http://120.27.222.26/' + photos[0]);
    $('#cbdPhoto2').attr('src', 'http://120.27.222.26/' + photos[1]);
    $('#cbdPhoto3').attr('src', 'http://120.27.222.26/' + photos[2]);
}


// 8框
function getQxzInfo(id) {
    $.ajax({
        url: 'qxz_display',
        type: 'post',
        data: {
            imei: id
        },
        dataType: 'json',
        success: function (data) {
            assembleQxzData(data.dat)
        },
        error: function (type) {
            $('#ts').html('--');
            $('#rps').html('--');
            $('#lps').html('--');
            $('#tps').html('--');
            $('#gs').html('--');
            $('#hs').html('--');
            $('#csq').html('--');
        }
    })
}
function assembleQxzData(data) {
    var category = []; //要素种类
    var chartVal = []; //包含时间和值
    if (data.length) {
        for (var i = 0; i < data.length; i++) {
            for (var z = 0; z < data[i].unit.length; z++) {
                if (category.indexOf(data[i].unit[z][4]) == -1) {
                    category.push(data[i].unit[z][4])
                    var dat = {
                        val: [data[i].unit[z][0]],
                        time: [data[i].upl_time],
                        txt: data[i].unit[z][1],
                        unit: data[i].unit[z][2],
                        num: data[i].unit[z][4],
                    }
                    chartVal.push(dat)
                } else {
                    chartVal[category.indexOf(data[i].unit[z][4])].val.unshift(data[i].unit[z][0]);
                    chartVal[category.indexOf(data[i].unit[z][4])].time.unshift(data[i].upl_time);
                }
            }
            if (i == data.length - 1) {
                fillQxzData(chartVal);
            }
        }
    } else {
        qxzbarchart.clear();
        qxzoption.series = [];
        qxzoption.xAxis[0].data = [];
        qxzbarchart.setOption(qxzoption);
    }
}

function fillQxzData(data) {
    var str = '<div class="swiper-wrapper">';
    for (var i = 0; i < data.length; i++) {
        str += '<div class="swiper-slide"><div>' +
            '<img src="../static/bigData/image/dev/icon_' + data[i].num + '.png" alt="" width="36">' +
            '<div class="qxzItemInfo"><p>' + data[i].txt + '</p><div>' + data[i].val[data[i].val.length - 1] + data[i].unit + '</div>' +
            '</div></div></div>';
        if (i == data.length - 1) {
            str += '</div>';
            $('.qxzSwiperContent').html(str);
            var swiper = new Swiper('.qxzItem', {
                direction: 'vertical',
                slidesPerView: 3,
                autoplay: {
                    delay: 5000
                },//可选选项，自动滑动
                // centeredSlides: true,
                // loop: true,
                // navigation: {
                //     nextEl: '.swiper-button-next',
                //     prevEl: '.swiper-button-prev',
                // },
                on: {
                    slideChange: function () {
                        console.log(this)
                        $('.swiper-slide .qxzItemInfo').css('color', '#2eb0c4');
                        $(this.slides[this.activeIndex]).find('.qxzItemInfo').css('color', '#f6ee0b');
                        fillQxzChart(data, this.activeIndex);
                    },
                    click: function () {
                        console.log(this);
                        // if (this.clickedSlide) {
                            $('.swiper-slide .qxzItemInfo').css('color', '#2eb0c4');
                            $(this.clickedSlide).find('.qxzItemInfo').css('color', '#f6ee0b');
                            fillQxzChart(data, this.clickedIndex);
                        // }

                    },
                },
            });
            fillQxzChart(data, 0);
        }
    }
}

var qxzbarchart = echarts.init(document.getElementById('qxzbarchart'));
// 指定图表的配置项和数据
qxzoption = {
    color: ['#3398DB'],
    legend: {
        data: [],
        x: 'right',
        textStyle: {//图例文字的样式
            color: '#ccc',
            fontSize: 12
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        x: '30',
        y: '30',
        x2: '30',
        y2: '30'
    },
    xAxis: [
        {
            type: 'category',
            data: [],
            // axisTick: {
            //     alignWithLabel: true
            // },
            axisLine: { lineStyle: { color: "#2b8dc2" } }

        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLine: { lineStyle: { color: "#2b8dc2" } },
            splitLine: { show: false }
        }
    ],
    series: []
};
// qxzbarchart.setOption(qxzoption);


function fillQxzChart(data, idx) {
    qxzbarchart.clear();
    qxzoption.series = [];
    qxzoption.xAxis[0].data = data[idx].time;
    qxzoption.legend = { data: [data[idx].txt], x: 'right', textStyle: { color: '#ccc', fontSize: 12 } }
    qxzoption.series = [
        {
            name: data[idx].txt,
            type: 'bar',
            barWidth: '60%',
            data: data[idx].val
        }
    ];
    qxzbarchart.setOption(qxzoption);
}

window.onresize = function () {
    myChart.resize();
    qxzbarchart.resize();
    getjkPath($('#jkList').val())
}