<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/formSelects-v4.css" media="all">
</head>
<style>
    .layui-fluid {
        padding: 10px
    }

    .layui-card-header {
        font-size: 14px;
        font-weight: 600
    }

    .layui-card-header.dztj-title {
        margin-bottom: 0;
        background: #FFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
    }

    .layui-card-header.dztj-title > div {
        font-weight: 500; text-align: right;
    }

    .dztj {
        text-align: right
    }

    .dztj > div {
        display: inline-block;
    }

    .dztj-tabs {
        font-size: 0;
        margin-right: 10px
    }

    .dztj-tabs span {
        height: 37px;
        line-height: 37px;
        display: inline-block;
        padding: 0 20px;
        border-right: 1px solid #CCC;
        border-top: 1px solid #e3e7ed;
        border-right: 1px solid #e3e7ed;
        border-bottom: 1px solid #e3e7ed;
        font-size: 14px;
        text-align: center
    }

    .dztj-tabs span:first-child {
        border-left: 1px solid #e3e7ed;
        border-radius: 3px 0px 0px 3px;
    }

    .dztj-tabs span:last-child {
        border-radius: 0px 3px 3px 0px;
    }

    .dztj-tabs span.actived {
        background-color: #e8380d;
        color: #FFF;
    }

    .count-box li > div {
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 10px;
        padding: 0 10px;
        border-radius: 10px
    }

    .count-box li img {
        width: 50px;
        height: 50px
    }

    .count-box li h3 {
        font-size: 14px; text-align: left;
    }

    .count-box li p {
        font-size: 20px; text-align: left;
    }
    .note-box li {
        position: relative;
        padding: 10px 10px 10px 30px;
    }

    .note-box li .dot {
        position: absolute;
        width: 10px;
        height: 10px;
        display: inline-block;
        background: #d1d1d1;
        left: 6px;
        top: 30px;
        border-radius: 50%
    }

    .note-head, .note-body {
        display: flex;
        align-items: center;
        position: relative;
    }

    .note-head h3 {
        font-size: 18px;
        color: #666666;
    }

    .note-body {
        font-size: 12px;
        color: #666666;
        margin-top: 5px;
    }

    .note-body div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        height: 28px;
    }

    .note-body span {
        width: 150px;
        text-align: right
    }

    .no-read .note-head h3 {
        color: #231815;
        max-width: calc(100% - 120px);
        padding-right: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .no-read .note-head h3.actived{
        color: #999999;
    }.no-read .note-head img {
         margin-right: 4px;
     }


    .no-read .note-head > span {
        color: #999999;
        position: absolute;
        right: 0;
        top: 0;

    }

    .no-read .note-head > span.actived {
        color: #e8380d;
    }

    .note-box .no-read .dot {
        background: #d1d1d1;
    }

    .note-box .no-read .dot.actived {
        background: #e8380d;
    }

    .note-type {
        display: inline-block;
        padding: 3px 8px;
        font-size: 14px;
        color: #dc6617;
        background-color: #fff3eb;
        border-radius: 3px;
    }

    .dbsx-box li {
        border-left: 1px solid #f4f6f9;
        border-bottom: 1px solid #f4f6f9
    }

    .dbsx-box li:nth-of-type(3n+1) {
        border-left: none;
    }

    .dbsx-box li:nth-child(10), .dbsx-box li:nth-child(11), .dbsx-box li:nth-child(12) {
        border-bottom: none;
    }

    .dbsx-box li a {
        height: 56px;
        text-align: center;
        color: #333333;
        font-size: 14px;
        display: block;
        padding-top: 15px;
        border: 1px solid #FFF
    }

    .dbsx-box li a:hover {
        background-color: #fdfbf7;
        border-radius: 5px;
        color: #e8380d;
        font-weight: 800;
        border: solid 1px #e8380d;
    }
    .wltj-box li{ height: 100px; margin-bottom: 10px; background-color: #f4f6f9; border-radius: 5px; border: solid 1px #117fbc; display: flex; padding: 0 49px; align-items: center; font-size: 16px; color: #a5a6a7; }
    .wltj-box li span.wltj-tit{ display: inline-block; font-size: 18px; color: #a5a6a7; font-family: 'SourceHanSansSC-Bold'; margin-left: 20px; width: 160px;}
    .wltj-box li img{width: 62px; height: 62px}
    .wltj-box li span.wltj-num{color: #d5a282; font-size: 30px; vertical-align: middle; margin-left: 20px}

</style>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!--数据总揽-->
        <div class="layui-col-md8">
            <div class="layui-card-header dztj-title"><span>数据总览</span>
                <div>
                    <div class="layui-form layui-inline assemblyListSelect">
                        <select lay-filter="addressList" name="addressList" class="addressList " xm-select="addressList" xm-select-type="1" xm-select-height="25px" xm-select-show-count="6" lay-search>
                            <option value="">搜索全国区域</option>
                            <c:forEach var="pro" items="${pros}">
                                <option value="${pro.columns.ProvinceName}">${pro.columns.ProvinceName}</option>
                                <c:forEach var="city" items="${citys}">
                                    <c:if test="${city.columns.ProvinceId eq pro.columns.ProvinceID}">
                                        <option value="${city.columns.CityName}">&nbsp;&nbsp;&nbsp;${city.columns.CityName}</option>
                                    </c:if>
                                </c:forEach>
                            </c:forEach>
                        </select>
                    </div>
<%--                    <div class="layui-form layui-inline">--%>
<%--                        <select lay-filter="timeList" name="timeList" class="timeList" xm-select="timeList"--%>
<%--                                xm-select-type="1" xm-select-height="25px" xm-select-show-count="6" xm-select-search>--%>

<%--                            <option value="">时间</option>--%>
<%--                            <c:forEach var="time" items="${timelist}" varStatus="status">--%>

<%--                                <option value="${time}">${time}</option>--%>
<%--                                --%>
<%--                            </c:forEach>--%>
<%--                        </select>--%>
<%--                    </div>--%>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header" style="margin-bottom: 0;">项目电站统计</div>
                <div class="layui-card-body">

                    <div data-anim="fade" lay-filter="LAY-index">
                        <div id="LAY-index" style="width: 100%; height: 293px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--物料统计-->
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">物料统计</div>
                <div class="layui-card-body">
                    <ul class="layui-row layui-col-space10 wltj-box">
                        <li>
                            <img src="${ctxPlugin}/static/imgs/wltj1.png" />
                            <div>
                                <span class="wltj-tit">未发货订单</span>
                                <span class="wfhmaCount  wltj-num">${order.columns.dfhdd}</span>
                            </div>
                        </li>
                        <li>
                            <img src="${ctxPlugin}/static/imgs/wltj2.png" />
                            <div>
                                <span class="wltj-tit">待签收订单</span>
                                <span class="dqsddCount  wltj-num">${order.columns.dqsdd}</span>
                            </div>
                        </li>
                        <li>
                            <img src="${ctxPlugin}/static/imgs/wltj3.png" />
                            <div>
                                <span class="wltj-tit">退货订单</span>
                                <span class="thddCount wltj-num">${order.columns.thdd}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <!--项目电站统计-->
        <div class="layui-col-md8">
            <div class="layui-card" style="height: 354px;">
                <div class="layui-card-header">通知公告<a class="f-r applyList" data-type="通知公告"
                                                      style=" font-size: 12px;cursor: pointer;">更多>></a></div>
                <div class="layui-card-body" style="padding: 0 10px;">
                    <ul class="note-box">
                        <c:forEach items="${announce}" var="ann">
                            <li class="no-read lookNotice">
                                <input hidden value="${ann.columns.id}">
                                <c:if test="${empty ann.columns.bid}">
                                    <i class="dot actived"></i>
                                </c:if>
                                <c:if test="${not empty ann.columns.bid}">
                                    <i class="dot"></i>
                                </c:if>
                                <div class="note-head">
                                    <h3>
                                        <c:if test="${empty ann.columns.bid}">
                                            <img class="newico" src="${ctxPlugin}/static/imgs/newImg.png"/>
                                        </c:if>
                                            ${ann.columns.title}
                                    </h3>
                                    <c:choose>
                                        <c:when test="${ann.columns.obj_type == 1}">
                                            <%--                                                <span class="note-type">用户公告</span>--%>
                                            <img src="${ctxPlugin}/static/imgs/userAnnounce.png"/>
                                        </c:when>
                                        <c:when test="${ann.columns.obj_type == 2}">
                                            <%--                                                <span class="note-type" style="color: #FFF; background-color: #cd2323;">服务通知</span>--%>
                                            <img src="${ctxPlugin}/static/imgs/fwAnnounce.png"/>
                                        </c:when>
                                        <c:when test="${ann.columns.obj_type == 3}">
                                            <%--                                                <span class="note-type" style="color: #FFF; background-color: #cd2323;">通知公告</span>--%>
                                            <img src="${ctxPlugin}/static/imgs/announce.png"/>
                                        </c:when>
                                    </c:choose>
                                    <c:if test="${empty ann.columns.bid}">
                                        <span class="markRead actived">  未读</span>
                                    </c:if>
                                    <c:if test="${not empty ann.columns.bid}">
                                        <span class="markRead">  已读</span>
                                    </c:if>
                                </div>
                                <div class="note-body">
                                    <div>${ann.columns.html}</div>
                                    <span>${ann.columns.createTime}</span>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
        <!--通知公告-->
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-right: 0">
                    <ul class="layui-row layui-col-space10 text-c count-box">
                        <li class="layui-col-xs6">
                            <div style="background-color: #f4f6f9;">
                                <div>
                                    <h3>预审通过</h3>
                                    <p style="color: #e8380d;" class="allCount">0</p>
                                </div>
                                <img src="${ctxPlugin}/static/imgs/yushentongguo.png"/>
                            </div>
                        </li>
                        <li class="layui-col-xs6">
                            <div style="background-color: #f4f6f9;">
                                <div>
                                    <h3>预估容量</h3>
                                    <p style="color: #e8380d;" class="ywcCount">0</p>
                                </div>
                                <img src="${ctxPlugin}/static/imgs/yugurongliang.png"/>
                            </div>
                        </li>
                        <li class="layui-col-xs6">
                            <div style="background-color: #f4f6f9;">
                                <div>
                                    <h3>审核通过</h3>
                                    <p style="color: #e8380d;" class="wazCount">0</p>
                                </div>
                                <img src="${ctxPlugin}/static/imgs/shenhetongguo.png"/>
                            </div>
                        </li>
                        <li class="layui-col-xs6">
                            <div style="background-color: #f4f6f9;">
                                <div>
                                    <h3>设计容量</h3>
                                    <p style="color: #e8380d;" class="dysCount">0</p>
                                </div>
                                <img src="${ctxPlugin}/static/imgs/shejirongliang.png"/>
                            </div>
                        </li>
                        <li class="layui-col-xs6">
                            <div style="background-color: #f4f6f9;">
                                <div>
                                    <h3>安装验收通过</h3>
                                    <p style="color: #e8380d;" class="wbwCount">0</p>
                                </div>
                                <img src="${ctxPlugin}/static/imgs/anzhuangystg.png"/>
                            </div>
                        </li>
                        <li class="layui-col-xs6">
                            <div style="background-color: #f4f6f9;">
                                <div>
                                    <h3>安装容量</h3>
                                    <p style="color: #e8380d;" class="wysCount">0</p>
                                </div>
                                <img src="${ctxPlugin}/static/imgs/anzhuangrongliang.png"/>
                            </div>
                        </li>
                        <li class="layui-col-xs6">
                            <div style="background-color: #f4f6f9;">
                                <div>
                                    <h3>并网验收通过</h3>
                                    <p style="color: #e8380d;" class="bwysCount">0</p>
                                </div>
                                <img src="${ctxPlugin}/static/imgs/bwyanshoutg.png"/>
                            </div>
                        </li>
                        <li class="layui-col-xs6">
                            <div style="background-color: #f4f6f9;">
                                <div>
                                    <h3>并网容量</h3>
                                    <p style="color: #e8380d;" class="yibwCount">0</p>
                                </div>
                                <img src="${ctxPlugin}/static/imgs/bingwangrongliang.png"/>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/lib/extend/echarts.min.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/lib/formSelects-v4.js"></script>
<script>
    //图片查看效果
    var imgsCount = 0;
    var reg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
    var number = /^[1-9]\d*$/;//非0正整数正则
    var plan_html = "<option value=''>请选择</option>";
    var plan_type_html = "<option value=''>请选择</option>";
    var formSelects;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'layedit', 'laydate', 'jquery', 'layer', 'layim', 'formSelects'], function () {
        $ = layui.$
            , element = layui.element
            , form = layui.form
            , layer = layui.layer;
        formSelects = layui.formSelects;

        waitApply();

        $(".lookNotice").on('click', function () {
            var id = $(this).find("input").val();
            $(this).find(".newico").remove();
            $(this).find(".note-head .markRead").addClass("readMark");
            layer.open({
                type: 2,
                content: "${ctx}/msg/center/announceShowDetail?id=" + id //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                , title: "公告详情"
                , area: ['51%', '75%']
                , end: function () {
                    $(".readMark").text("已读");
                    $(".markRead").removeClass("readMark");
                }
            });
        })
        formSelects.on('addressList', function (id, vals, val, isAdd, isDisabled) {
            var timeList = formSelects.value('timeList', 'valStr')
            var provinceList = "";
            var cityList = "";
            var addlist = formSelects.value('addressList', 'all');
            $.each(addlist, function (n, value) {
                if (value.name.indexOf("&nbsp;") >= 0) {
                    if (isBlank(cityList)) {
                        cityList = value.value;
                    }else if(cityList.indexOf(value.value) >= 0){

                    } else {
                        cityList = cityList + "," + value.value;
                    }
                } else {
                    if (isBlank(provinceList)) {
                        provinceList = value.value;
                    } else if(provinceList.indexOf(value.value) >= 0){

                    }else {
                        provinceList = provinceList + "," + value.value;
                    }
                }

            })

            var date = {
                "timeList": timeList,
                "provinceList": provinceList,
                "cityList": cityList
            }
            echartsAppend(date)
            echartsPieAppend(date)
        }, true);
        formSelects.on('timeList', function (id, vals, val, isAdd, isDisabled) {

            var timeList = formSelects.value('timeList', 'valStr')
            var provinceList = "";
            var cityList = "";

            var addlist = formSelects.value('addressList', 'all');
            $.each(addlist, function (n, value) {
                if (value.name.indexOf("&nbsp;") >= 0) {
                    if (isBlank(cityList)) {
                        cityList = value.value;
                    }else if(cityList.indexOf(value.value) >= 0){

                    } else {
                        cityList = cityList + "," + value.value;
                    }
                } else {
                    if (isBlank(provinceList)) {
                        provinceList = value.value;
                    } else if(provinceList.indexOf(value.value) >= 0){

                    }else {
                        provinceList = provinceList + "," + value.value;
                    }
                }

            })

            var date = {
                "timeList": timeList,
                "provinceList": provinceList,
                "cityList": cityList
            }
            echartsAppend(date)
            echartsPieAppend(date)
        }, true);


        $(".addressListSelect").hide();

        echartsAppend()
        echartsPieAppend()



        $(".applyList").on('click', function () {
            var dd = $(this).attr('data-type');
            $(window.parent.document).find("#LAY-system-side-menu").find(".nav").each(function (index) {
                var tabsName = $(this).text();
                if (dd === tabsName) {
                    var i = index;
                    <c:if test="${type eq '1' || type eq '2'||type eq '4' || type eq '5'||type eq '6'||type eq '7'||type eq '8'||type eq '9'||type eq 'a'}">
                    i = i + 1;
                    </c:if>
                    $(".nav", window.parent.document)[i].click();
                    return false;
                }
            });

        });
    });

    //饼图
    function echartsPieAppend(dati) {

        $.post('${ctx}/sys/toHomerPager/homerPagerPancake', dati, function (data) {

            $(".allCount").html(NumFormat(data.ystoCount));
            $(".ywcCount").html(NumFormat(data.yuguCount));
            $(".wazCount").html(NumFormat(data.sjtoCount));
            $(".dysCount").html(NumFormat(data.sjCount));
            $(".wbwCount").html(NumFormat(data.azystoCount));
            $(".wysCount").html(NumFormat(data.azysCount));
            $(".bwysCount").html(NumFormat(data.bwtoCount));
            $(".yibwCount").html(NumFormat(data.ybwCount));


        }, "json")

    }

    function echartsAppend(dati) {
        var myChart = echarts.init(document.getElementById('LAY-index'));

        $.post('${ctx}/sys/toHomerPager/homerPager', dati, function (data) {


            myChart.setOption(option = {
                // title: {
                //     text: '项目电站统计',
                //     textStyle: {
                //         color: '#231815',
                //         // fontWeight : 'normal',
                //         fontSize: 14
                //     },
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {data: ["已完成", "未安装", "已安装未验收", "未并网", "已并网未验收"]},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {data: ["所有电站", "待踏勘设计","设计审核", "电站安装", "安装验收", "电站并网","并网验收", "已完成"]},
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    axisTick: {
                        inside: true
                    },
                    splitLine: {
                        show: false
                    },

                    z: 10
                },
                series: [
                    {
                        name: '电站数量',
                        type: 'bar',
                        barWidth: '20%',
                        areaStyle: {
                            normal: {
                                color: "#3472ff"
                            }

                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#0071af',
                                    },
                                   /* {
                                        offset: 0.5,
                                        color: '#0071af',
                                    },*/
                                    {
                                        offset: 1,
                                        color: '#009a92',
                                    },

                                ]),
                            }
                        },
                        data: data.echarts
                    }
                ]
            });

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

    }


    function traderList(keys) {
        $.ajax({
            url: "${ctx}/trader/findTraderListByProvince",
            type: "POST",
            data: {}
            , success: function (result) {
                $(".assemblyList").empty();
                var length = result.length;
                /*  var plan_name_html = "{'name':请选择,'value':''}";
                  keys.push(plan_name_html);*/
                for (var i = 0; i < length; i++) {
                    var temp = {"name": result[i].columns.name, "value": result[i].columns.id}
                    keys.push(temp);
                }
                formSelects.data('assemblyList', 'local', {
                    arr: keys
                });
            }
        })
    }

    function projectList(keys) {
        $.ajax({
            url: "${ctx}/member/findProjectList",
            type: "POST",
            data: {}
            , success: function (result) {
                $(".assemblyList").empty();
                var length = result.length;
                for (var i = 0; i < length; i++) {
                    var temp = {"name": result[i].columns.name, "value": result[i].columns.id}
                    keys.push(temp);
                }
                formSelects.data('assemblyList', 'local', {
                    arr: keys
                });
            }
        })
    }

    function projectCompany(keys) {
        $.ajax({
            url: "${ctx}/projectCompany/getProjectCompany",
            type: "POST",
            data: {}
            , success: function (result) {
                $(".assemblyList").empty();
                var length = result.length;
                for (var i = 0; i < length; i++) {
                    var temp = {"name": result[i].columns.name, "value": result[i].columns.id}
                    keys.push(temp);
                }
                formSelects.data('assemblyList', 'local', {
                    arr: keys
                });
            }
        })
    }


    function waitApply() {
        $.ajax({
            type: "POST",
            url: "${ctx}/sys/toHomerPager/staticApplyCount",
            success: function (data) {
                if (data.code == '200') {
                    var applyCount = data.data
                    $("#apply1").text(applyCount.apply01);
                    $("#apply2").text(applyCount.apply02);
                    $("#apply3").text(applyCount.apply06);
                    $("#apply4").text(applyCount.apply08);
                    $("#apply5").text(applyCount.apply09);
                    $("#apply6").text(applyCount.apply12);
                    $("#apply7").text(applyCount.apply11);
                    $("#apply8").text(applyCount.apply10);
                    $("#apply9").text(applyCount.apply04);
                    $("#apply10").text(applyCount.apply05);
                    $("#apply11").text(applyCount.apply03);
                    $("#apply12").text(applyCount.apply07);
                }
            }
        })
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
    /**
     * 对数字进行三位分割
     * @param {*} value  需要进行分割的数字
     * @returns  返回分割后的数字串
     */
// 小数部分只显示两位小数

    function NumFormat(value) {
        if (!value) return '0'
        var intPart = Number(value).toFixed(0) // 获取整数部分
        var intPartFormat = intPart.toString()
            .replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
        var floatPart = '.00' // 预定义小数部分
        var value2Array = value.toString().split('.')
        // =2表示数据有小数位
        if (value2Array.length === 2) {
            floatPart = value2Array[1].toString() // 拿到小数部分
            if (floatPart.length === 1) {
                // 补0
                return intPartFormat + '.' + floatPart + '0'
            } else {
                return intPartFormat + '.' + floatPart
            }
        } else {
            return intPartFormat
        }
    }
</script>
</body>
</html>

