NBDXSY/LeaRun.Application/LeaRun.Application.Web/Areas/PipeNetworkManage/Views/RealTimeMonitoring/RealTimeCurves.cshtml

@{
    ViewBag.Title = "RealCurve";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}

<script src="~/Content/scripts/plugins/echarts/echarts.min.js" type="text/javascript"></script>

<style>
    .curveContainer ul {
        width: 100%;
        height: 100%;
    }

    .curveContainer li {
        float: left;
        width: 50%;
        height: 50%;
        line-height: 30px;
        text-align: center;
        list-style: none;
        padding: 20px;
        border: 1px solid gray;
    }

</style>

<script>
    $(function () {
        init();
        initControl();
        getAllDevice();
        exchange();
    })

    var waterWellTypes = {       
        "Pressure":"压力",
        "InstantaneousFlow":"瞬时流量"       
    }

    // 初始化界面
    function init() {
        // 设置
        $(".curveContainer").css({ "height": ($(window).height() - 150) + "px" });
        //layout布局
        $('#layout').layout({
            applyDemoStyles: true,
            onresize: function () {
                $(window).resize();
            }
        });
        // resize重设宽高
        $(window).resize(function (e) {
            window.setTimeout(function () {
                $(".curveContainer").css({ "height": ($(window).height() - 150) + "px" })
            }, 200);
            e.stopPropagation();
        });

    }

    // 初始化控件
    function initControl() {
        // 初始化类型下拉列表
        $("#type_menu .dropdown-menu li").click(function () {
            var text = $(this).find('a').html();
            var value = $(this).find('a').attr('data-value');
            $("#type_menu .dropdown-text").html(text).attr('data-value', value);
        });
        // 初始化行下拉列表
        $("#line_menu .dropdown-menu li").click(function () {
            var text = $(this).find('a').html();
            var value = $(this).find('a').attr('data-value');
            $("#line_menu .dropdown-text").html(text).attr('data-value', value);
        });
        // 初始化列下拉列表
        $("#column_menu .dropdown-menu li").click(function () {
            var text = $(this).find('a').html();
            var value = $(this).find('a').attr('data-value');
            $("#column_menu .dropdown-text").html(text).attr('data-value', value);
        });
    }

    // 获取所有测点
    var allDevice = [];
    function getAllDevice() {
        $.ajax({
            type: "GET",
            url: "/PipeNetworkManage/Meter/GetMeters",//路径  
            data: {},
            async:false,
            dataType: 'json',
            success: function (result) {
                if (result !== "") { 
                    allDevice = result;
                }
            }
        });
    }

    // 页码点击事件
    function pageClick(page) {
        $(page).siblings().removeClass("active").end().addClass("active");
        setEchartsOptions(numOfPage, $(page).text(), type);
    }
    var numOfPage = 0;
    var type = "";
    // 切换按钮
    function exchange() {
        var line = $("#line_menu").find('.dropdown-text').attr('data-value');
        var column = $("#column_menu").find('.dropdown-text').attr('data-value');
        type = $("#type_menu").find('.dropdown-text').attr('data-value');
        // 验证
        if (allDevice.length === 0) return alert("未获取到设备信息列表，不能进行查询！");
        if (!type) return alert("请选择类型！");
        if (!line) return alert("请选择行！");
        if (!column) return alert("请选择列！");
        // 计算一页显示几个
        numOfPage = line * column;
        // 添加li
        var strOfView = "";
        for (var i = 0; i < numOfPage; i++) {
            strOfView += '<li><div style="width: 100%;height: 90%;" id="nowChart' + i + '" class="echatDiv"></div><a id="waterTitle' + i + '">' + allDevice[i].MeterAssessmentName + '</a></li>';
        }
        // 计算显示几页(上取整)
        var pagesNumber = Math.ceil(allDevice.length / numOfPage);
        // 添加页码
        var strOfPage = "";
        for (var i = 0; i < pagesNumber; i++) {
            if (i === 0) {
                strOfPage += '<li class="active"><a href="#">'+(i + 1)+'</a></li>';
            } else {
                strOfPage += '<li><a href="#">'+(i + 1)+'</a></li>';
            }
        }
        $(".curveContainer ul").html(strOfView);
        $("#pager ul").html(strOfPage);
        // 切换按钮，计算高度，宽度
        $(".curveContainer li").css({ "width": (1 / column * 100) + '%', "height": (1 / line * 100) + '%' });
        // 页码点击事件
        $("#pager ul li").on("click", function () {
            pageClick(this);
        })
        setEchartsOptions(numOfPage, 1, type);
    }
    // 清空按钮
    function clearAll() {        
        alert("clearAll");
    }

    // 设置曲线
    function setEchartsOptions(numOfPage, nowPage, type) {
        // 判断本页显示多少个曲表
        // 获取到本页前一页显示了多少条数据
        var haveShowNumber = numOfPage * (nowPage - 1);
        // 获取所有测点的数量
        var devicesLength = allDevice.length;
        // 计算当前页需要显示多少个图表
        var numOfTables = (devicesLength - haveShowNumber > numOfPage ? numOfPage : devicesLength - haveShowNumber);

        // 获取需要请求的数据表表名
        var tableNames = [];
        var waterWellNames = [];
        for (var i = 0; i < numOfTables; i++) {
            tableNames.push("MeterAssessment_" + allDevice[haveShowNumber + i].MeterAssessmentId);
            waterWellNames.push(allDevice[haveShowNumber + i].MeterAssessmentName);
        }
        // 请求数据
        $.ajax({
            url: '/PipeNetworkManage/RealTimeMonitoring/GetRealCurves',
            data: { tableNames: JSON.stringify(tableNames), type: type },
            type: 'get',
            dataType: 'json',
            cache: false,
            success: function (datas) {
                if (datas) {
                    for (var i = 0; i < tableNames.length; i++) {
                        var nowChartId = 'nowChart' + i;
                        var seriesData = [];
                        var times = [];
                        var name = "";
                        var waterWellName = "";
                        if (datas[tableNames[i]]) {
                            for (var j = 0 ; j < datas[tableNames[i]].length; j++) {
                                seriesData.push(datas[tableNames[i]][j].Value);
                                times.push(datas[tableNames[i]][j].Date);
                            }
                        }
                        name = waterWellTypes[type];
                        $("#" + ("waterTitle" + i)).html(waterWellNames[i]);
                        setDatas(nowChartId, seriesData, times, name);
                    }
                }
            }
        });
    }

    // 设置数据
    function setDatas(nowChartId, seriesData, times, name) {
        var nowChart = echarts.init(document.getElementById((nowChartId)));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: name + '分析',
                x: 'center',
                align: 'right'
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: [name],
                x: 'left'
            },
            xAxis: {
                boundaryGap: false,
                data: times.map(function (str) {
                    return str.replace(' ', '\n')
                })
            },
            yAxis: [
                {
                    name: '单位',
                    type: 'value'
                }
            ],
            series: [{
                name: name,
                type: 'line',
                data: seriesData,
                markLine: {
                    data: [
                        { type: 'max', name: '最大值', itemStyle: { normal: { color: '#dc143c' } } },
                        { type: 'min', name: '最小值', itemStyle: { normal: { color: '#dc143c' } } },
                        { type: 'average', name: '平均值', itemStyle: { normal: { color: '#dc143c' } } }
                    ]
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        nowChart.setOption(option);
    }
</script>

<div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
    <div class="ui-layout-center">
        <div class="center-Panel">
            <div id="tabs">
                <div id="tabs-1">
                    <div class="titlePanel">
                        <div class="title-search">
                            <table>
                                <tr>
                                    <td style="padding-left: 10px;">查询类型：</td>
                                    <td style="padding-left: 10px;">
                                        <div id="type_menu" class="btn-group">
                                            <a class="btn btn-default dropdown-text" data-toggle="dropdown" data-value="InstantaneousFlow">瞬时流量</a>
                                            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                                            <ul class="dropdown-menu">                                                                                              
                                                <li><a data-value="Pressure">压力</a></li>
                                                <li><a data-value="InstantaneousFlow">瞬时流量</a></li>                                                
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <div id="line_menu" class="btn-group">
                                            <a class="btn btn-default dropdown-text" data-toggle="dropdown" data-value="2">2行</a>
                                            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li><a data-value="1">&nbsp;1行</a></li>
                                                <li><a data-value="2">&nbsp;2行</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <div id="column_menu" class="btn-group">
                                            <a class="btn btn-default dropdown-text" data-toggle="dropdown" data-value="3">3列</a>
                                            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li><a data-value="1">&nbsp;1列</a></li>
                                                <li><a data-value="2">&nbsp;2列</a></li>
                                                <li><a data-value="3">&nbsp;3列</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <span>&nbsp;&nbsp;</span>
                                        <a id="exchange_btn" class="btn btn-primary" onclick="exchange()"><i class="fa fa-exchange"></i>&nbsp;切换</a>
@*                                        <a id="clear_btn" class="btn btn-danger" onclick="clearAll()"><i class="fa fa-trash"></i>&nbsp;清空</a>*@
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="toolbar">
                            <div class="btn-group">
                                @*<a id="lr-replace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>*@
                            </div>
                        </div>
                    </div>
                    <div class="curveContainer">
                        <ul>
                        </ul>
                    </div>
                    <div id="pager" class="text-center">
                        <ul class="pagination">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>