jc
/
odoo16


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/jc_data/static/lib/echarts.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        td, th {
            border-right: 1px solid gray;
            border-bottom: 1px solid gray;
            width: 100px;
            height: 30px;
            box-sizing: border-box;
        }
        th {
            background-color: lightblue;
        }
        table {
            border-collapse: separate;
            table-layout: fixed;
            width: 100%; /* 固定寬度 */
        }
        thead tr th {
            position: sticky;
            top: 0; /* 第一列最上 */
        }
        th:first-child {
            z-index: 2;
            background-color: lightblue;
        }

        .table > tbody > tr > td {
            vertical-align: middle;
        }

        .row_and_column {
            z-index: 3;
            background-color: lightblue;
        }
        .clearfix{zoom:1} /*zooom 属性：IE 浏览器的专用属性。这一句是专门针对老版本的IE浏览器所写的，为了兼容*/
        .clearfix:after{ /* :after伪对象选择符---在这个对象被浏览器渲染后添加一定的内容*/
            content:"."; /*content属性：添加的内容即为这个属性的值。这个属性是专门与伪对象搭配使用的*/
            display: block; /*将添加进去的内容转换为块状元素*/
            visibility: hidden; /*visibility：可视化属性，控制元素是否可见，但无论是否隐藏都保留物理空间。{与display:none的比较}*/
            height: 0;/*将添加进去的内容高度设置为0，消除其占位*/
            clear: both;/*将添加进去的内容作为清除浮动的对象，实现外围容器中有内容存在，因此可以自动判定高度，解决塌陷*/
        }
        .label-link{
            color: blue;
            cursor: pointer;
            text-decoration: underline;
        }
        .label-link-select{
            color: red;
            cursor: pointer;
            text-decoration: underline;
        }
    </style>
</head>
<body>
{% import 'table.html' as t %}
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="wrap clearfix">
        <div style="float: left;">
            <div>
             {% for item in data_label.labels %}
                {% if item.id==data_label.selectedID1 %}
                    <text class="label-link-select" onclick="click_label(1,{{item.id}})">{{item.name}}</text>
                {% else %}
                    <text class="label-link" onclick="click_label(1,{{item.id}})">{{item.name}}</text>
                {% endif %}
             {% endfor %}
            </div>
            <div>
                {% if data_label.show2 %}
                     {% for item in data_label.labels2 %}
                        {% if item.id==data_label.selectedID2 %}
                            <text class="label-link-select" onclick="click_label(2,{{item.id}})">{{item.name}}</text>
                        {% else %}
                            <text class="label-link" onclick="click_label(2,{{item.id}})">{{item.name}}</text>
                        {% endif %}
                     {% endfor %}
                {% endif %}
            </div>
            <div>
                {% if data_label.show3 %}
                     {% for item in data_label.labels3 %}
                        {% if item.id==data_label.selectedID3 %}
                            <text class="label-link-select" onclick="click_label(3,{{item.id}})">{{item.name}}</text>
                        {% else %}
                            <text class="label-link" onclick="click_label(3,{{item.id}})">{{item.name}}</text>
                        {% endif %}
                     {% endfor %}
                {% endif %}
            </div>
        </div>
<!--        <div style="float: right;width: 100px;">查询</div>-->
        <div style="float: right;width:350px;">
            <div style="float: left;">日期:</div>
            <div style="float: right;">
                <input type="date" id="date-start" value="{{data_label.date_start}}"/>~<input type="date" id="date-end" value="{{data_label.date_end}}"/>
            </div>
        </div>
    </div>
    <div id="customer" style="position:absolute;top:5%;left:0;width: 25%;height:32%;border:1px solid gray;"></div>
    <div id="staff" style="position:absolute;top:37%;left:0;width: 25%;height:32%;border:1px solid gray;"></div>
    <div id="zone3" style="position:absolute;top:69%;left:0;width: 75%;height:31%;border:1px solid gray;"></div>
    <div id="zone4" style="position:absolute;top:5%;left:25%;width: 50%;height:64%;border:1px solid gray;">
        {% if data_label.is_table %}
        {% if data4 %}
        {% set all_data4 = data4|str_to_obj %}
        {{t.get_table(all_data4.headers,all_data4.rows,all_data4.table_height,all_data4.table_width,all_data4.lock_column_count,all_data4.width)}}
        {% endif %}
        {% endif %}
    </div>
    <div id="zone5" style="position:absolute;top:5%;left:75%;width: 25%;height:64%;border:1px solid gray;">
        {% if data_label.is_table %}
        {% if data5 %}
        {% set all_data5 = data5|str_to_obj %}
        {{t.get_table(all_data5.headers,all_data5.rows,all_data5.table_height,all_data5.table_width,all_data5.lock_column_count,all_data5.width)}}
        {% endif %}
        {% endif %}
    </div>
    <div id="zone6" style="position:absolute;top:69%;left:75%;width: 25%;height:31%;border:1px solid gray;"></div>
<!--    <div id="zone7" style="position:absolute;top:0;left:0;width: 25%;height:33%;"></div>-->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var _customer = echarts.init(document.getElementById('customer'));
        var data_table_customer = {{data_table_customer|safe}};

        if(data_table_customer){
            var data_table_customer2 = (new Function("return " + data_table_customer))();
            // 使用刚指定的配置项和数据显示图表。
            _customer.setOption(data_table_customer2);
        }

        var _staff = echarts.init(document.getElementById('staff'));
        var data_table_staff = {{data_table_staff|safe}};

        if(data_table_staff){
            var data_table_staff2 = (new Function("return " + data_table_staff))();
            // 使用刚指定的配置项和数据显示图表。
            _staff.setOption(data_table_staff2);
        }

        var data3 = {{data3|safe}};
        if(data3){
            var _zone3 = echarts.init(document.getElementById('zone3'));
            var _data3 = (new Function("return " + data3))();
            // 使用刚指定的配置项和数据显示图表。
            _zone3.setOption(_data3);
        }

        var data4 = {{data4|safe}};
        var is_table = {{data_label.is_table|safe}}
        if(data4){
            if(!is_table) {
                var _zone4 = echarts.init(document.getElementById('zone4'));
                var _data4 = (new Function("return " + data4))();
                // 使用刚指定的配置项和数据显示图表。
                _zone4.setOption(_data4);
            }
        }

        var data5 = {{data5|safe}};
        if(data5){
            if(!is_table) {
                var _zone5 = echarts.init(document.getElementById('zone5'));
                var _data5 = (new Function("return " + data5))();
                console.log('real:', _data5);
                // 使用刚指定的配置项和数据显示图表。
                _zone5.setOption(_data5);
            }
        }

        var data6 = {{data6|safe}};
        if(data6){
            var _zone6 = echarts.init(document.getElementById('zone6'));
            var _data6 = (new Function("return " + data6))();
            // 使用刚指定的配置项和数据显示图表。
            _zone6.setOption(_data6);
        }

        // var data7 = {{data7|safe}};
        // if(data7){
        //     var _zone7 = echarts.init(document.getElementById('zone7'));
        //     var _data7 = (new Function("return " + data7))();
        //     // 使用刚指定的配置项和数据显示图表。
        //     _zone7.setOption(_data7);
        // }

        function click_label(level, data_id) {
            let start = document.getElementById('date-start').value;
            let end = document.getElementById('date-end').value;
            let url = "";
            if (level === 1){
                url = "/report/sale_account_report/" + data_id + "?s=" + start + "&e=" + end;
            }
            if (level === 2){
                url = "/report/sale_account_report/{{data_label.selectedID1}}/" + data_id + "?s=" + start + "&e=" + end;
            }
            if (level === 3){
                url = "/report/sale_account_report/{{data_label.selectedID1}}/{{data_label.selectedID2}}/" + data_id + "?s=" + start + "&e=" + end;
            }
            window.location.href = url;
        }

    </script>
</body>
</html>