<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>电站监控详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base" />
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/static/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/lib/font/iconfont.css" />
    <style>
        .layui-tab-title{background: #FFF}
        .home-box{padding: 10px; height: 216px; border-top: none; background: #FFF;  position: relative }
        .tqyb{display: flex; align-items: center; justify-content: center;}
        .qi-text p{text-align: left; margin: 0; padding: 5px 0}
        .temperature{ font-size: 48px;}
        .du{ font-size: 18px;}
        .qi-bt{ text-align: center; position: absolute; bottom: 20px; width: 95%; display: flex; justify-content: space-between}
        .qi-bt span{display: inline-block; height: 16px; line-height: 16px; width: 39%; border-left: 1px #868db9 solid;}
        .qi-bt span:first-child{ border-left: none}
        .qi-bt span img{vertical-align: bottom}

        .ml10{margin-left: 10px;}
        .mt10{margin-top: 10px;}
        .statisticsNum{display: flex; background: #fff; align-items: center; padding:20px 30px 20px 0px; font-size: 16px; font-family: MicrosoftYaHei-Bold; color: #231815;}
        .statisticsNum small{font-size: 13px; padding-left: 4px;}
        .statisticsNum>div{width: 188px; padding-left: 30px;margin-bottom: 12px;}
        .statisticsNum>div:nth-child(2){border-left: 1px solid #f4f6f9;  color: #666; flex: 1;}
        .statisticsNum big{font-size: 22px;}

        .tj-head{ padding: 10px 20px;background-color: #fff; margin-bottom: 1px; height: 50px;}
        .tj-head h5{float: left;color: #231815; font-size: 16px; line-height: 26px;}
        .tj-head .right{float: right;}

        .tj-body{background-color: #fff; padding: 20px;}
        .warn-box{ display: flex; justify-content: space-between}
        .warn-box>div:first-child{ width: 135px}
        .warn-box .s-title{font-size: 16px; margin-bottom: 30px; margin-top: 20px;}
        .warn-box .s-title span{color: #666; font-size: 18px; vertical-align: text-bottom;}
        .warn-box p{font-size: 14px; height: 30px}
        .warn-box i{ width: 14px; height: 14px; display: inline-block; background-color: #ff0000; border-radius: 2px; vertical-align: middle}

        .date-input-box{ position: relative;}
        .date-input-box>span{position: absolute; left: 5px; top: 3px; font-size: 20px; color: #ec5511}
        .date-input-box>input{ padding-left: 30px; width: 150px; box-sizing: border-box}

        .date-tabs{font-size: 0;border-radius: 5px; border: 1px solid #DCDFE6; margin-left: 10px}
        .date-tabs li{display: inline-block; padding: 5px 15px;  font-size: 12px; border-right: 1px solid #DCDFE6; cursor: pointer}
        .date-tabs li:last-child{border-right: none}
        .date-tabs li.actived{background-color: #ec5511; color: #FFF;}

        .form-span{ margin-top: 8px; display: block;font-size: 15px}

        .page-iframe {
            border: none;
            width: 100%;
            min-height: calc(100vh - 90px);
        }
    </style>
</head>
<body>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <div class="layui-tab-content">
            <div class="layui-col-lg8 layui-col-sm12">
                <div class="layui-col-sm12">
                    <div class="title">基础信息</div>
                    <div class="layui-card">
                        <div class="layui-form-item layui-row mt10">
                            <div class="layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label" style="width: 140px;font-size: 16px">电站编码：</label>
                                <span class="form-span">${customerEntry.powerStationCode}</span>
                            </div>
<%--                            <div class="layui-col-sm4 layui-col-md4">--%>
<%--                                <label class="layui-form-label" style="width: 140px;font-size: 16px">项目编码：</label>--%>
<%--                                <span class="form-span">${customerEntry.projectCode}</span>--%>
<%--                            </div>--%>
                            <div class="layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label" style="width: 140px;font-size: 16px">业主姓名：</label>
                                <span class="form-span">${customerEntry.tenantName}</span>
                            </div>
                            <div class="layui-col-sm46 layui-col-md6">
                                <label class="layui-form-label" style="width: 140px;font-size: 16px">项目名称：</label>
                                <span class="form-span">${customerEntry.projectName}</span>
                            </div>
                            <div class="layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label" style="width: 140px;font-size: 16px">业主地址：</label>
                                <span class="form-span">${customerEntry.province}${customerEntry.city}${customerEntry.area}${customerEntry.address}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12">
                    <div class="title">发电趋势图</div>
                    <div class="mt10">
                        <div class="tj-head clearfix">
                            <h5>发电趋势图</h5>
                            <div class="right">
                                <div class="layui-input-inline date-input-box" id="datePicker">
                                    <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
                                    <span class="layui-icon layui-icon-table"></span>
                                </div>
                                <ul class="layui-input-inline date-tabs">
                                    <li class="actived">按日</li>
                                    <li>按月</li>
                                    <li>按年</li>
                                </ul>
                            </div>
                        </div>
                        <div class="tj-body" style="padding: 20px 5px;">
                            <div id="trendChar" style="width: 100%; height: 350px"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12">
                    <div class="title">设备信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table ">
                            <colgroup>
                                <col width="6%">
                                <col width="19%">
                                <col width="19%">
                                <col width="18%">
                                <col width="19%">
                                <col width="19%">
                            </colgroup>
                            <thead>
                            <tr>
                                <th style="text-align: center">序号</th>
                                <th style="text-align: center">设备名称</th>
                                <th style="text-align: center">设备S/N</th>
                                <th style="text-align: center">设备类型</th>
                                <th style="text-align: center">设备品牌</th>
                                <th style="text-align: center">设备型号</th>
                            </tr>
                            </thead>
                            <tbody id="equipmentInfoList">
                            <c:forEach items="${equipmentInfoList}" var="si" varStatus="vs">
                                <tr style="text-align: center">
                                    <td>${vs.index+1}</td>
                                    <td>${si.columns.deviceName}</td>
                                    <td>${si.columns.SNCode}</td>
                                    <td>
                                        <c:if test="${si.columns.deviceType eq '1'}">逆变器</c:if>
                                        <c:if test="${si.columns.deviceType eq '2'}">通讯棒</c:if>
                                    </td>
                                    <td>${si.columns.materialBrand}</td>
                                    <td>${si.columns.deviceModel}</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="layui-col-lg4 layui-col-sm12">
                <div class="title">发电数据</div>
                <div class="layui-col-lg12 layui-col-sm12">
                    <div class="statisticsNum">
                        <div>
                            <div>当日发电 <small>(KWh)</small></div>
                            <strong style="color: #fc9709;"><fmt:formatNumber value="${powerStationVo.etd/1}" type="number" maxFractionDigits="4"></fmt:formatNumber></strong>
                            <div>当日等效小时数 <small>(h)</small></div>
                            <strong style="color: #fc9709;"><fmt:formatNumber value="${powerStationVo.etd==null?'0':powerStationVo.etd/actualCapacity}" type="number" maxFractionDigits="4"></fmt:formatNumber></strong>
                        </div>
                        <div>
                            <div>当月发电 <small>(MWh)</small></div>
                            <strong style="color: #fc9709;"><fmt:formatNumber type="number" value="${powerStationVo.etm/1000}" maxFractionDigits="4" ></fmt:formatNumber></strong>
                            <div>当月等效小时数 <small>(h)</small></div>
                            <strong style="color: #fc9709;"><fmt:formatNumber value="${powerStationVo.etm==null?'0':powerStationVo.etm/actualCapacity}" type="number" maxFractionDigits="4"></fmt:formatNumber></strong>
                        </div>
                    </div>
                </div>
                <div class="layui-col-lg12 layui-col-sm12">
                    <div class="statisticsNum" style="margin-left: 10px;">
                        <div>
                            <div>当年发电 <small>(MWh)</small></div>
                            <strong style="color: #fc9709;"><fmt:formatNumber type="number" value="${powerStationVo.ety/1000}" maxFractionDigits="4"></fmt:formatNumber></strong>
                            <div>当年等效小时数 <small>(h)</small></div>
                            <strong style="color: #fc9709;"><fmt:formatNumber value="${powerStationVo.ety==null?'0':powerStationVo.ety/actualCapacity}" type="number" maxFractionDigits="4"></fmt:formatNumber></strong>
                        </div>
                        <div>
                            <div>累计发电 <small>(MWh)</small></div>
                            <strong style="color: #fc9709;"><fmt:formatNumber type="number" value="${powerStationVo.eta/1000}" maxFractionDigits="4"></fmt:formatNumber></strong>
                            <div>累计等效小时数 <small>(h)</small></div>
                            <strong style="color: #fc9709;"><fmt:formatNumber value="${powerStationVo.eta==null?'0':powerStationVo.eta/actualCapacity}" type="number" maxFractionDigits="4"></fmt:formatNumber></strong>
                        </div>
                    </div>
                </div>
            </div>
<%--            <div class="layui-col-lg4 layui-col-sm12">--%>
<%--                <div class="ml10 mt10">--%>
<%--                    <div class="tj-head clearfix">--%>
<%--                        <h5>运维统计</h5>--%>
<%--                    </div>--%>
<%--                    <div class="tj-body">--%>
<%--                        <div class="warn-box">--%>
<%--                            <div>--%>
<%--                                <p class="s-title"><span class="layui-icon layui-icon-tips"></span> 告警</p>--%>
<%--                                <p><i style="background: #9b9fa2"></i> 未处理 ${powerStationVo.overviewStaticData.alarmUnDeal}</p>--%>
<%--                                <p><i style="background: #ec5511"></i> 已处理 ${powerStationVo.overviewStaticData.alarmDeal}</p>--%>
<%--                            </div>--%>
<%--                            <div id="warnChart" style="height:180px; flex: 1"></div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
            <div class="layui-col-lg4 layui-col-sm12 pt-20">
                <div class="ml10">
                    <div class="tj-head clearfix">
                        <h4 style="text-align: center; font-size: 16px;">${year}年${month}月${day}日 ${week}</h4>
                    </div>
                    <div class="home-box">
                        <div class="tqyb">
                            <img src="${weather.showapi_res_body.now.weather_pic}" style="font-size: 50px; margin-right: 30px;">
                            <div class="qi-text">
                                <p class="temperature">${weather.showapi_res_body.now.temperature}<span class="du">℃</span></p>
                                <p>${weather.showapi_res_body.now.weather} ${weather.showapi_res_body.f1.day_air_temperature}~${weather.showapi_res_body.f1.night_air_temperature}℃</p>
                            </div>
                        </div>
                        <div class="qi-bt" v-if="nowWeather.aqiDetail">
                            <span><img src="${ctxPlugin}/static/img/home_kq.png"> ${weather.showapi_res_body.now.aqiDetail.quality} ${weather.showapi_res_body.now.aqiDetail.aqi}</span>
                            <span><img src="${ctxPlugin}/static/img/home_sd.png"> 湿度 ${weather.showapi_res_body.now.sd}</span>
                            <span><img src="${ctxPlugin}/static/img/home_fx.png"> ${weather.showapi_res_body.now.wind_direction}${weather.showapi_res_body.now.wind_power}</span>
                        </div>
                    </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>
    var $;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'tableExt', 'jquery', 'layer','laypage','laydate','form'], function(){
        $ = layui.$;
        tableExt = layui.tableExt;
        layer = layui.layer;
        laypage = layui.laypage;
        laydate = layui.laydate;
        form = layui.form;
        table = tableExt.getLayTable();
        var element = layui.element;
        //常规用法
        laydate.render({
            elem: '#test1',
            value: new Date(),
            showBottom: false,
            done: function (value, date, endDate) {
                chagenTime(value);
            }
        });

        // element.on('tab(docDemoTabBrief)', function (data) {
        //     $('.layui-tab-content').eq(data.index).removeClass('layui-hide').siblings('.layui-tab-content').addClass('layui-hide');
        // });

        $(".date-tabs li").click(function () {
            $(this).addClass('actived').siblings('.date-tabs li').removeClass('actived');
            $("#datePicker").children().remove();
            let html = '<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">';
            html += '<span class="layui-icon layui-icon-table"></span>';
            $("#datePicker").append(html);
            if ($(this).index() === 0) {
                laydate.render({
                    elem: '#test1',
                    value: new Date(),
                    showBottom: false,
                    done: function (value, date, endDate) {
                        chagenTime(value);
                    }
                });
            } else if ($(this).index() === 1) {
                laydate.render({
                    elem: '#test1',
                    type: 'month',
                    btns: ['confirm'],
                    value: new Date(),
                    format: 'yyyy-MM',
                    done: function (value, date, endDate) {
                        chagenTime(value);
                    }
                });
            } else if ($(this).index() === 2) {
                laydate.render({
                    elem: '#test1',
                    type: 'year',
                    btns: ['confirm'],
                    value: new Date(),
                    format: 'yyyy',
                    done: function (value, date, endDate) {
                        chagenTime(value);
                    }
                });
            }
            getPowerGenerationTrendsBefore();
        })
        //发电趋势数据
        getPowerGenerationTrendsBefore()
        //当年发电计划数据
        // getCurrentYearGeneration()
        setWarnOptions('${powerStationVo.overviewStaticData.alarmDeal}','${powerStationVo.overviewStaticData.alarmUnDeal}')
        <%--setOrderOptions(${dataVo.orderDeal},${dataVo.orderUnDeal})--%>

    })

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }

    function chagenTime(time) {
        let type = $(".date-tabs").find(".actived").index();
        $.ajax({
            url: "${ctx}/monitor/collect/data/powerGenerationTrends",
            type: "GET",
            data: {
                entryId: "${id}",
                type: type,
                time: time
            },
            success: function (result) {
                getPowerGenerationTrends(result.data.XStr, result.data.fdlY);
            }
        })
    }

    function getPowerGenerationTrendsBefore() {
        let type = $(".date-tabs").find(".actived").index();
        let time = $("#test1").val();
        $.ajax({
            url: "${ctx}/monitor/collect/data/powerGenerationTrends",
            type: "GET",
            data: {
                entryId: "${id}",
                type: type,
                time: time
            },
            success: function (result) {
                getPowerGenerationTrends(result.data.XStr, result.data.fdlY);
            }
        })
    }

    //发电趋势数据
    function getPowerGenerationTrends(xData, yData){
        this.setOptions('trendChar', xData,[
                {
                    name: '发电量',
                    smooth: true,
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: '#fc9709',
                            lineStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(248,220,156,0.5)"//'#f8dc9c'
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(238,180,49,0.5)" //'#eeb431'
                                    }
                                ]),//线色
                                width: 2
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(248,220,156,0.5)"//'#f8dc9c'
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(238,180,49,0.5)" //'#eeb431'
                                    }
                                ]) //背景色
                            },
                        }
                    },
                    data: yData,
                    animationDuration: 1000,
                    animationEasing: 'quadraticOut'
                },
            ]);
    }
    //当年发电计划数据
    <%--function getCurrentYearGeneration(){--%>
    <%--    let planData = ${curData.XStr};--%>
    <%--    let planData1 = ${curData.jhfdlY};--%>
    <%--    let planData2 = ${curData.ljjhwclY};--%>
    <%--    this.setOptions('planChar',planData,[--%>
    <%--                {--%>
    <%--                    name: '发电量',--%>
    <%--                    smooth: true,--%>
    <%--                    type: 'line',--%>
    <%--                    itemStyle: {--%>
    <%--                        normal: {--%>
    <%--                            color: '#919191',--%>
    <%--                            lineStyle: {--%>
    <%--                                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [--%>
    <%--                                    {--%>
    <%--                                        offset: 0,--%>
    <%--                                        color: "rgba(213,213,213,0.5)"//'#d5d5d5'--%>
    <%--                                    },--%>
    <%--                                    {--%>
    <%--                                        offset: 1,--%>
    <%--                                        color: "rgba(139,139,139,0.5)"//'#8b8b8b'--%>
    <%--                                    }--%>
    <%--                                ]),//线色--%>
    <%--                                width: 2--%>
    <%--                            },--%>
    <%--                            areaStyle: {--%>
    <%--                                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [--%>
    <%--                                    {--%>
    <%--                                        offset: 0,--%>
    <%--                                        color: "rgba(213,213,213,0.5)"//'#d5d5d5'--%>
    <%--                                    },--%>
    <%--                                    {--%>
    <%--                                        offset: 1,--%>
    <%--                                        color: "rgba(139,139,139,0.5)"//'#8b8b8b'--%>
    <%--                                    }--%>
    <%--                                ]) //背景色--%>
    <%--                            },--%>
    <%--                        },--%>
    <%--                    },--%>
    <%--                    data: planData1,--%>
    <%--                    animationDuration: 1000,--%>
    <%--                    animationEasing: 'quadraticOut'--%>
    <%--                },--%>
    <%--                {--%>
    <%--                    name: '计划发电量',--%>
    <%--                    smooth: true,--%>
    <%--                    type: 'line',--%>
    <%--                    itemStyle: {--%>
    <%--                        normal: {--%>
    <%--                            color: '#fc9709',--%>
    <%--                            lineStyle: {--%>
    <%--                                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [--%>
    <%--                                    {--%>
    <%--                                        offset: 0,--%>
    <%--                                        color: "rgba(248,220,156,0.5)"//'#f8dc9c'--%>
    <%--                                    },--%>
    <%--                                    {--%>
    <%--                                        offset: 1,--%>
    <%--                                        color: "rgba(238,180,49,0.5)"//'#eeb431'--%>
    <%--                                    }--%>
    <%--                                ]),//线色--%>
    <%--                                width: 2--%>
    <%--                            },--%>
    <%--                            areaStyle: {--%>
    <%--                                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [--%>
    <%--                                    {--%>
    <%--                                        offset: 0,--%>
    <%--                                        color: "rgba(248,220,156,0.5)"//'#f8dc9c'--%>
    <%--                                    },--%>
    <%--                                    {--%>
    <%--                                        offset: 1,--%>
    <%--                                        color: "rgba(238,180,49,0.5)"//'#eeb431'--%>
    <%--                                    }--%>
    <%--                                ]) //背景色--%>
    <%--                            },--%>
    <%--                        },--%>
    <%--                    },--%>
    <%--                    data: planData2,--%>
    <%--                    animationDuration: 1000,--%>
    <%--                    animationEasing: 'quadraticOut'--%>
    <%--                }--%>
    <%--            ]);--%>

    <%--}--%>
    //折线统计图
    function setOptions(name,xData,datas) {
        var charName = echarts.init(document.getElementById(name));
        let that = this;
        let yAxis;
        if(name=='trendChar'){
            yAxis = [
                {
                    name: '发电量（kWh）',
                    type: 'value',
                    axisLine: {
                        show: true,
                    },
                    axisTick:{
                        show: false
                    },
                    axisLabel: { show: true, textStyle: { color: '#606266' } },
                    splitLine:{ show: false},
                }
            ]
        }else{
            yAxis = [
                {
                    name: '发电量（kWh）',
                    type: 'value',
                    axisLine: {
                        show: true,
                    },
                    axisTick:{
                        show: false
                    },
                    axisLabel: { show: true, textStyle: { color: '#606266' } },
                    splitLine:{ show: false},
                },
            ]
        }
        charName.setOption({
            // legend: {},
            legend: {
                itemWidth:16,
                itemHeight:4,
                itemGap:24,
                data: [
                    { name: '发电量', icon:'rect', },
                    { name: '实时功率', icon:'rect', },
                    { name: '计划发电量', icon:'rect',  },
                    { name: '累计计划完成率', icon:'rect',  },
                ],
                textStyle:{
                    color:'#333'
                }
            },
            xAxis: {
                // name: '日期',
                data: xData,
                boundaryGap: false,
                axisTick: {
                    show: false
                },
                axisLabel: { show: true, textStyle: { color: '#606266' } },
            },
            yAxis: yAxis,
            grid: {
                left: 30,
                right: 40,
                bottom: 0,
                top: 40,
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                padding: [5, 20],
            },
            series:datas
        })
    }
    //告警统计图
    function setWarnOptions(deal,unDeal) {
        var warnChart = echarts.init(document.getElementById('warnChart'));
        warnChart.setOption({
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    label: {
                        show: true,
                        alignTo:'edge',
                        edgeDistance:5,
                        width:80,
                        formatter(param) {
                            return param.percent+"%";
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function (colors) {
                                let colorList = ['#d0d0d0','#ec5511']
                                return colorList[colors.dataIndex];
                            }
                        },
                    },
                    data: [
                        { value: unDeal, name: '未处理' },
                        { value: deal, name: '已处理' },
                    ]
                }
            ]
        })
    }
    //工单统计图
    function setOrderOptions(deal,unDeal) {
        var orderChart = echarts.init(document.getElementById('orderChart'));
        orderChart.setOption({
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    label: {
                        show: true,
                        alignTo:'edge',
                        edgeDistance:5,
                        width:80,
                        formatter(param) {
                            return param.percent+"%";
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function (colors) {
                                let colorList = ['#d0d0d0','#ec5511']
                                return colorList[colors.dataIndex];
                            }
                        },
                    },
                    data: [
                        { value: unDeal, name: '未处理' },
                        { value: deal, name: '已处理' },
                    ]
                }
            ]
        })
    }
</script>
</body>
</html>
