<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/common/common.jsp" %>
<head>
    <Dst:SMBase type="jquery,eui"
                pakgagePath="com.dst.slms.workBench.feeControl"
                uipk="feeControl" title="费控工作台"/>
    <Dst:SMResourse path="assets/js/echarts/echarts.min.js"/>
    <%--<Dst:SMResourse path="assets/js/selectJs/select.js"/>
    <Dst:SMResourse path="assets/js/selectJs/select.css"/>--%>
</head>
<body style="padding-top: 5px; background: #f5f5f5;">
<div  fit="true">
    <div class="dst-row">
        <div class="dst-col-md8 " >
            <Dst:SMTagBox id="selectTagData" label=""  classStyle="select-tag"  width="650" editable="true"  height="55px" panelMinHeight="500" entityPath="com.dst.slms.base.entity.MarketProjectInfo" hasDownArrow="true" ></Dst:SMTagBox>
        </div>
        <div class="dst-col-md4 " >
            <div class="button " onClick="projectCut(false)"> 切换</div>
        </div>
    </div>
    <div class="dst-row dst-col-space10 margin-top-10">
        <div class="dst-col-md2 ">
            <div class=" round-frame row-1-height background-theme padding-2">
                <div class="row-1-right-1"><span class="font-size color-whitex">全盘费用预算</span></div>
                <div>
                    <div class="row-1-right-2">
                        <span name="allSummary" class="row-1-font-2 color-whitex">3000</span>
                        <span class="font-size color-whitex">万元</span>
                    </div>
                </div>

            </div>
        </div>
        <div class="dst-col-md2 ">
            <div class=" round-frame row-1-height border-tow">
                <div class="row-1-right-1"><span class="font-size">全盘已发生费用</span></div>
                <div>
                    <div class="row-1-right-2">
                        <span name="allSummary" class="row-1-font-2">1200</span>
                        <span class="font-size">万元</span>
                    </div>
                </div>

            </div>
        </div>
        <div class="dst-col-md2 ">
            <div class=" round-frame row-1-height background-theme padding-2">
                <div class="row-1-right-1"><span class="font-size color-whitex">本年费用预算</span></div>
                <div>
                    <div class="row-1-right-2">
                        <span name="allSummary" class="row-1-font-2 color-whitex">900</span>
                        <span class="font-size color-whitex">万元</span>
                    </div>
                </div>

            </div>
        </div>
        <div class="dst-col-md2 ">
            <div class=" round-frame row-1-height border-tow">
                <div class="row-1-right-1"><span class="font-size ">本年已发生费用</span></div>
                <div>
                    <div class="row-1-right-2">
                        <span name="allSummary" class="row-1-font-2 ">360</span>
                        <span class="font-size ">万元</span>
                    </div>
                </div>

            </div>
        </div>
        <div class="dst-col-md2 ">
            <div class=" round-frame row-1-height background-theme padding-2">
                <div class="row-1-right-1"><span class="font-size color-whitex">费用进度</span></div>
                <div>
                    <div class="row-1-right-2">
                        <span name="allSummary" class="row-1-font-2 color-whitex">40.00</span>
                        <span class="font-size color-whitex">%</span>
                    </div>
                </div>

            </div>
        </div>
        <div class="dst-col-md2 ">
            <div class=" round-frame row-1-height border-tow">
                <div class="row-1-right-1"><span class="font-size ">销售进度</span></div>
                <div>
                    <div class="row-1-right-2">
                        <span name="allSummary" class="row-1-font-2 ">40.00</span>
                        <span class="font-size ">%</span>
                    </div>
                </div>

            </div>
        </div>
        <%--<div class="dst-col-md2 ">
            <div class=" round-frame row-1-height background-theme">
                <div class="row-1-right-1"><span class="font-size color-whitex">本年预算占用比例</span></div>
                <div>
                    <div class="row-1-right-2">
                        <span class="row-1-font-2 color-whitex">40.00</span>
                        <span class="font-size color-whitex">%</span>
                    </div>
                </div>

            </div>
        </div>--%>
    </div>
    <div class="dst-row dst-col-space1">
        <div class="dst-col-md4 row-chart-height">
            <div class="row-chart">
                <div >
                    <span class="span-point">·</span>
                    <span class="row-chart-title">年度费用进度与销售进度(单位:%)</span>
                </div>
                <div id="echarts1" class="row-chart" style="width: 100%;height: 550px">

                </div>
            </div>
        </div>
        <div class="dst-col-md8 row-chart-height">
            <div class="row-chart-right-1">
                <div >
                    <span class="span-point">·</span>
                    <span class="row-chart-title">公司本年度预算已发生(单位:万元)</span>
                </div>
                <div id="echarts2" class="row-chart" style="width: 100%;height: 265px">

                </div>
            </div>
            <div class="row-chart-right-2">
                <div class="dst-row">
                    <div class="dst-col-xs6">
                        <div >
                            <span class="span-point">·</span>
                            <span class="row-chart-title">公司本年度预算已发生占比统计</span>
                        </div>
                        <div id="echarts3" class="row-chart" style="width: 100%;height: 265px">

                        </div>
                    </div>
                    <div class="dst-col-xs6">
                        <div >
                            <span class="span-point"></span>
                            <span class="row-chart-title"></span>
                        </div>
                        <div id="echarts4" class="row-chart" style="width: 100%;height: 265px">

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

            </div>
        </div>
    </div>
</div>
</body>
<script>
    window.onload = function(){
        projectCut(true);
        tagStylerInit(true);
    }
    function projectCut (isFirst){
        echartsInit(isFirst);
        initData(isFirst);
    }

    function echartsInit(isFirst) {
        var projectIds = isFirst ? '' : getProjectIds();
        //console.log(JSON.stringify($('#selectTagData').tagbox('getData')));
        $.ajax({
            type : "GET",
            contentType: "application/json;charset=UTF-8",
            url : "initEcharts?projectIds="+projectIds,
            async:false,
            success : function(result) {
                if (result.code != 200){
                    dst.tip({message: result.message});
                }else{
                    echartsInit1(result.echarts1);
                    echartsInit2(result.echarts2);
                    echartsInit3(result.echarts3);
                    echartsInit4(result.echarts4);
                }
                console.log(JSON.stringify(result));
            },
            error : function(e){
            }
        });
    }
    function tagStylerInit (){
        $('#selectTagData').tagbox({
            tagStyler: function(value){
                return 'background:#3296F5;color:#fff;';
            }
        });
    }
    function getProjectIds (){
        var projectIds = '';

        var arr = $('#selectTagData').tagbox('getValues');
        for (var i = 0; i < arr.length; i++) {
            var obj = arr[i];
            if(projectIds == ''){
                projectIds += "'" + obj + "'";
            }else{
                projectIds += ",'" + obj + "'";
            }
        }
        return projectIds;
    }
    function initData(isFirst){
        var projectIds = isFirst ? '' :  getProjectIds();
        $.ajax({
            type : "GET",
            contentType: "application/json;charset=UTF-8",
            url : "initData?projectIds="+projectIds,
            async:false,
            success : function(result) {
                if (result.code != 200){
                    dst.tip({message: result.message});
                }else{
                    var allSummaryData = result.data;
                    var allSummarySpan = $("span[name='allSummary']");
                    allSummarySpan.eq(0).html(allSummaryData.budget);
                    allSummarySpan.eq(1).html(allSummaryData.taxConAmt);
                    allSummarySpan.eq(2).html(allSummaryData.yearBudget);
                    allSummarySpan.eq(3).html(allSummaryData.taxConAmtYear);
                    allSummarySpan.eq(4).html(allSummaryData.costProgress);
                    allSummarySpan.eq(5).html(allSummaryData.salesProgress);
                }
                console.log(JSON.stringify(result.data));
            },
            error : function(e){
            }
        });
    }
    var echartsColor1 = '#3296F5';
    var echartsColor2 = '#3bcec6';
    var echartsColor3 = '#78C06E';
    function echartsInit1(data) {
        var myChart1 = echarts.init(document.getElementById('echarts1'));
        var option1 = {
            color: [echartsColor1, echartsColor2, echartsColor3],
            legend: {},
            tooltip: {},
            grid: {
                left: '1%',
                right: '0',
                bottom: '1%',
                containLabel: true
            },
            dataset: {
                source: data
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'},
            ]
        };
        myChart1.setOption(option1,true);
    }
    function echartsInit2(data) {
        //console.log(JSON.stringify(data));
        var myChart2 = echarts.init(document.getElementById('echarts2'));
        var option2 = {
            color: [echartsColor1, echartsColor2, echartsColor3],
            legend: {},
            tooltip: {},
            dataset: {
                source: data
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
            ]
        };
        myChart2.setOption(option2,true);
    }
    function echartsInit3(data) {
        var myChart3 = echarts.init(document.getElementById('echarts3'));
        var option3 = {
            color: [echartsColor1,echartsColor2,echartsColor3,'#FD530B','#FBBB02','#D0EB2C','#65B033','#65B033','#0592CD','#0147FF','#3E02A6','#8702B1'],
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                center: ['40%', '40%'],
                data: data.title
            },

            series: [

                {
                    name: '',
                    type: 'pie',
                    radius: '60%',
                    center: ['60%', '45%'],
                    data: data.data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart3.setOption(option3,true);
    }
    function echartsInit4(data) {
        var myChart4 = echarts.init(document.getElementById('echarts4'));
        var option4 = {
            color: [echartsColor1, echartsColor2, echartsColor3],
            legend: {},
            tooltip: {},
            dataset: {
                source: data
            },
            xAxis: {},
            grid: {
                top: '15%',  // 组件离容器上侧的距离,百分比字符串或整型数字
                left: '2%',    // 组件离容器左侧的距离,百分比字符串或整型数字
                right: '5%',
                bottom: '3%',
                containLabel: true //grid 区域是否包含坐标轴的刻度标签，
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    show: true,
                    formatter: function (value) {
                        var texts = value;
                        if (texts.length > 15) { // 具体多少字就看自己了
                            texts = texts.substr(0, 15) + '...';
                        }
                        return texts;
                    }
                }
            },
            series: [
                {type: 'bar'},
            ]
        };
        myChart4.setOption(option4,true);
    }

</script>
</body>
<style>
    /****************************基础开始****************************/
    .font-weight {
        font-weight: bold;
    }
    .margin-bottom-zero{
        margin-bottom: 0px;
    }
    .border-zero{
        border: #ADADAD solid 0px;
    }
    .border-tow{
        border: #ADADAD solid 2px;
    }
    .padding-2 {
        padding: 2px;
    }
    /****************************基础开始****************************/
    /****************************基础颜色开始****************************/
    /* 白色 */
    .color-whitex {
        color: white;
    }

    /* 基础蓝 */
    .color-027AFF {
        color: #027AFF;
    }

    /* 灰色 */
    .color-ADADAA {
        color: #ADADAA;
    }

    /* 浅灰色 */
    .color-D2D2D2 {
        color: #D2D2D2;
    }

    /* 绿色 */
    .color-78C06E {
        color: #78C06E;
    }

    /* 橙色 */
    .color-FF8000 {
        color: #FF8000;
    }

    /* 红色 */
    .color-FF2D2D {
        color: #FF2D2D;
    }

    /* 主题色 */
    .background-theme {
        background-color: #3296F5;
    }

    /*白色背景*/
    .background-white {
        background-color: white;
    }

    /* 基础蓝 */
    .background-027AFF {
        background-color: #027AFF;
    }

    /* 灰色 */
    .background-ADADAA {
        background-color: #ADADAA;
    }

    /* 浅灰色 */
    .background-D2D2D2 {
        background-color: #D2D2D2;
    }

    /* 绿色 */
    .background-78C06E {
        background-color: #78C06E;
    }

    /* 橙色 */
    .background-FF8000 {
        background-color: #FF8000;
    }

    /* 红色 */
    .background-FF2D2D {
        background-color: #FF2D2D;
    }

    /* 84AF9B */
    .background-84AF9B {
        background-color: #84AF9B;
    }

    /****************************基础颜色结束****************************/
    /****************************重写方法开始****************************/
    .dst-row {
        padding-right: 0px;
    }
    /****************************重写方法结束****************************/


    .font-size {
        font-size: 16px;
    }

    .margin-top-10 {
        margin-top: 10px;
    }

    /*圆框样式*/
    .round-frame {
        border-radius: 10px;

    }

    .row-1-height {
        height: 100px;
    }

    .row-1-right-1 {
        text-align: left;
        height: 40PX;
        line-height: 40px;
        padding-left: 16px;
        width: 100%;
    }
    .row-1-right-2 {
        text-align: left;
        height: 60PX;
        padding-left: 16px;
        width: 100%;
    }
    .row-1-font-2 {
        font-size: 35px;
    }
    /*.dst-col-space10 .dst-col-md2{
        width: 14.2857137%;
    }*/

    .circle {
        width: 20px;
        height: 20px;
        border-radius: 15%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translate(-50%, -50%);
    }

    .row-chart {
        height: 400px;
    }
    .row-chart-height {
        height: 600px;
    }
    .row-chart-title {
        height: 35px;
        line-height: 35px;
        font-weight: bold;
        font-size: 18px;
    }
    .row-chart-right-1{
        height: 300px;
    }
    .row-chart-right-2{
        height: 300px;
    }
    .span-point {
        height: 35px;
        line-height: 35px;
        font-weight: bold;
        font-size: 17px;
    }
    .select-height{
        margin-bottom: 0px;
    }
    .dowebok {
        margin-top: 5px;
        width: 100%;
        height: 60px;
        /*border-radius: 15%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(10%,10%);*/
    }
    /************************多选下拉框样式重写开始************************/
    .select-tag{
        font-size: 16px;   
    }
    .combobox-item, .combobox-group, .combobox-stick {
        height: 34px;
        line-height: 23px;
    }
    .tagbox-label {
        position: relative;
        display: block;
        margin: 5px 0 0 4px;
        padding: 0 19px 0 11px;
        float: left;
        font-size: 16px;
        vertical-align: top;
        text-decoration: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 10px;
        background: #a0a3a5;
        color: #fff;
    }
    .textbox {
        border-radius: 10px;
        border: 2px solid #ADADAD;
    }
    .combobox-item-selected {
        background-color: #3296F5;
        color: #fff;
        font-size: 16px;
    }
    .combobox-item, .combobox-group, .combobox-stick {
        font-size: 16px;
        padding: 5px 10px;
    }
    /************************多选下拉框样式重写结束************************/
    .button {
        border-radius:10px;
        background-color: #3296F5;
        border: none;
        color: white;
        padding: 17px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
</style>


