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

{extend name='main'}

{block name="button"}
{if auth("add")}
<button class="layui-btn" style="height: 30px;line-height:28px;background-color: #DC2219;color: #FFFFFF;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="change4()">建面单方成本指标(含税）</li>
        <li onclick="change5()">可售单方成本指标(不含税）</li>
        <li onclick="change6()">可售单方成本指标(含税）</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="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 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','costs_are_excluded')

    function change () {
        setinfo('main','costs_are_excluded')
    }
    function change1 () {
        // setTimeout(() => {
        //     // 基于准备好的dom，初始化echarts实例
        //     var myChart1 = echarts.init(document.getElementById('main1'));
        //     // 指定图表的配置项和数据
        //     var option1 = {
        //         title: {
        //             text: ''
        //         },
        //         tooltip: {},
        //         legend: {
        //             // data: ['销量']
        //         },
        //         xAxis: {
        //             axisLabel:{
        //                 interval:0,
        //                 // rotate:20
        //             },
        //             data:result1.data.total_vat.title
        //         },
        //         yAxis: {},
        //         series: [
        //             {
        //                 name: result1.data.subjects,
        //                 type: 'bar',
        //                 data:result1.data.total_vat.value
        //             }
        //         ]
        //     };
        //     // 使用刚指定的配置项和数据显示图表。
        //     myChart1.setOption(option1);
        // },200)
        setinfo('main1','total_vat')
    }
    function change2 () {
        setinfo('main2','measurement_cost')
    }
    function change3 () {
        setinfo('main3','unilateral_cost_indicator')
    }
    function change4 () {
        setinfo('main4','single_cost_indicator')
    }
    function change5 () {
        setinfo('main5','single_party_cost_tax')
    }
    function change6 () {
        setinfo('main6','single_party_cost_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/main_project/get_see_info",
            type:'get',
            data:value
            ,success:function(result){
                console.log(result);

                setchart(where,result,field);

                var arr = result.data.right;
                htmlright(arr)
            }
        });
    }

    //画图
    function setchart(where,result,field) {
        var len = result.data.field.title.length
        var xname = ''
        if (field=='costs_are_excluded'){
            xname = '不含增值税测算成本 (万元)'
        }else if (field=='total_vat'){
            xname = '增值税总额';
        }else if (field=='measurement_cost'){
            xname = '含增值税测算成本';
        }else if (field=='unilateral_cost_indicator'){
            xname = '单方成本指标(不含税）';
        }else if (field=='single_cost_indicator'){
            xname = '单方成本指标(含税）';
        }else if (field=='single_party_cost_tax'){
            xname = '可售单方成本指标(不含税）';
        }else if (field=='single_party_cost_no_tax'){
            xname = '可售单方成本指标(含税）';
        }
        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,-50,-105],	//---坐标轴名称相对位置
                },
                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: ['100-113.8', '113.8-127.6', '127.6-141.4', '141.4-155.2', '155.2-169', '155.2-169', '155.2-169', '155.2-169', '155.2-169', '155.2-169']
                data:result.data.field.title
            },
            yAxis: {
                show:true,
                name:'工程数量',
                nameTextStyle:{				//---坐标轴名称样式
                    padding:[5,100,-20,15],	//---坐标轴名称相对位置
                },
            },
            series: [
                {
                    name: result.data.subjects,
                    type: 'bar',
                    barMaxWidth:'10%',
                    label:{
                        show:true,
                        position:'top',
                        color:'#000000'
                    },
                    // data: [5, 0, 36, 10, 12, 14, 13, 30, 40, 1076872]
                    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}