szcp_admin/application/admin/view/child_project/see.html

{extend name='main'}

{block name="button"}
{if auth("add")}
<button class="layui-btn layui-bg-red" style="height: 30px;line-height:28px;color: #333;border: 1px solid #C9C9C9 " type='button' onclick="window.history.back()">返 回</button>
{/if}


{/block}

{block name="content"}
<style>
    .tu{
        width: 75%;height:600px;float: left
    }
    .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view{
        border: none !important;


    }
    .layui-table{
        background-color:initial !important;
    }
</style>

<div class="layui-tab">
    <input type="hidden" id="subjects" value="{$subjects}">
    <input type="hidden" id="ids" value="{$ids}">

    <ul class="layui-tab-title">
        <li class="layui-this" onclick="change()">建面单方成本(含税)</li>
        <li onclick="change1()">总价(含税)</li>
        <li onclick="change2()">建面单方成本(不含税)</li>
        <li onclick="change3()">总价(不含税)</li>

        <li onclick="change7()">可售单方成本(含税)</li>
        <li onclick="change8()">可售单方成本(不含税)</li>

        <li onclick="change4()">工程量</li>
        <li onclick="change5()">建面单方含量</li>
        <li onclick="change6()">可售单方含量</li>

        <li onclick="change9()">预留指标1</li>
        <li onclick="change10()">预留指标2</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show" style="width:100%;">
            <div id="main" class="tu"></div>
        </div>
        <div class="layui-tab-item" style="width:100%;">
            <div id="main1" class="tu" ></div>
        </div>
        <div class="layui-tab-item" style="width:100%;">
            <div id="main2" class="tu" ></div>
        </div>
        <div class="layui-tab-item" style="width:100%;">
            <div id="main3" class="tu"></div>
        </div>

        <div class="layui-tab-item" style="width:100%;">
            <div id="main7" class="tu"></div>
        </div>

        <div class="layui-tab-item" style="width:100%;">
            <div id="main8" class="tu"></div>
        </div>

        <div class="layui-tab-item" style="width:100%;">
            <div id="main4" class="tu"></div>
        </div>
        <div class="layui-tab-item" style="width:100%;">
            <div id="main5" class="tu"></div>
        </div>
        <div class="layui-tab-item" style="width:100%;">
            <div id="main6" class="tu"></div>
        </div>

        <div class="layui-tab-item" style="width:100%;">
            <div id="main9" class="tu"></div>
        </div>
        <div class="layui-tab-item" style="width:100%;">
            <div id="main10" class="tu"></div>
        </div>
        <div style="width: 25%;float: right">
            <table class="layui-table margin-top-10">
                <tr >
                    <th style="font-weight:bold">样本名称</th>
                    <th style="font-weight:bold">数值</th>
                    <th style="font-weight:bold">备注</th>
                </tr>
                <tbody id="right">

                </tbody>
            </table>

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


<script type="text/javascript">
    setinfo('main','single_party_cost')

    function change () {
        setinfo('main','single_party_cost')
    }
    function change1 () {
        setinfo('main1','total_price_included')

    }
    function change2 () {
        setinfo('main2','single_party_cost_excluding')
    }
    function change3 () {
        setinfo('main3','total_price_included_excluding')
    }
    function change4 () {
        setinfo('main4','quantities')
    }
    function change5 () {
        setinfo('main5','unilateral_content')
    }
    function change6 () {
        setinfo('main6','unilateral_content_excluding')
    }

    function change7 () {
        setinfo('main7','single_party_cost_tax')
    }

    function change8 () {
        setinfo('main8','single_party_cost_no_tax')
    }

    function change9 () {
        setinfo('main9','saleable_single_party_tax')
    }

    function change10 () {
        setinfo('main10','saleable_single_party_no_tax')
    }

    //ajax获取数据
    function setinfo(where,field) {
        var subjects = $("#subjects").val()
        var ids = $("#ids").val()
        var value = {subjects:subjects,ids:ids,field:field}
        $.ajax({
            url:"/admin/child_project/get_see_info",
            type:'get',
            data:value
            ,success:function(result){
                setchart(where,result,field)
                var arr = result.data.right;
                htmlright(arr)
            }
        });
    }

    //画图
    function setchart(where,result,field) {
        // console.log(result)
        // console.log(result.data.field.title.length)
        var len = result.data.field.title.length
        var xname = ''
        if (field=='single_party_cost'){
            xname = '建面单方成本（元/m2)（含税）'
        }else if (field=='total_price_included'){
            xname = '总价（万元）（含税）';
        }else if (field=='single_party_cost_excluding'){
            xname = '建面单方成本（元/m2)（不含税）';
        }else if (field=='total_price_included_excluding'){
            xname = '总价（万元）（不含税）';
        }else if (field=='quantities'){
            xname = '工程量(含税）';
        }else if (field=='unilateral_content'){
            xname = '建面单方含量';
        }else if (field=='unilateral_content_excluding'){
            xname = '可售单方含量';
        }else if (field=='single_party_cost_tax'){
            xname = '可售单方成本（元/m2)（含税）';
        }else if (field=='single_party_cost_no_tax'){
            xname = '可售单方成本（元/m2)（不含税）';
        }else if (field=='saleable_single_party_tax'){
            xname = '预留指标1';
        }else if (field=='saleable_single_party_no_tax'){
            xname = '预留指标2';
        }
        var cid = document.getElementById(where)
        //echarts重新渲染
        if (cid.hasAttribute("_echarts_instance_"))
            cid.removeAttribute("_echarts_instance_")
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(cid);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                // data: ['销量']
            },
            xAxis: {
                show:true,
                name:xname,
                nameTextStyle:{				//---坐标轴名称样式
                    padding:[40,100,-65,-125],	//---坐标轴名称相对位置
                },
                axisLabel:{
                    interval:0,
                    // rotate:20
                    formatter: function (value) {
                        value = value.replace(/[^\x00-\xff]/g, "$&\x01").replace(/.{12}\x01?/g, "$&\n").replace(/\x01/g, "");
                        return value;
                    }
                },
                data:result.data.field.title
            },
            yAxis: {
                show:true,
                name:'工程数量',
                nameTextStyle:{				//---坐标轴名称样式
                    padding:[5,100,-20,15],	//---坐标轴名称相对位置
                },
            },
            series: [
                {
                    name: result.data.subjects,
                    type: 'bar',
                    barMaxWidth:'10%',
                   //  barMaxWidth:function (len) {
                   //      if (len>1){
                   //          return '0'
                   //      }else {
                   //          return '10%'
                   //      }
                   //  },
                    label:{
                        show:true,
                        position:'top',
                        color:'#000000'
                    },
                    data:result.data.field.value
                }
            ]
        };
        myChart.setOption(option);
    }

    //填充右边栏
    function htmlright(arr) {
        if (arr.length>0) {
            var html = '';
            for (var i = 0; i < arr.length; i++) {
                var tag = arr[i];
                html += '<tr>' +
                    '<th style="color:red;">' + tag.project_name + '</th>' +
                    '<th>' + tag.value + '</th>' +
                    '<th>' + tag.note + '</th>' +
                    '</tr>';
            }
            $('#right').html(html);
        }
    }

</script>


{/block}