pictable

css/model/sys/pictable.css

@@ -1,10 +1,14 @@
@charset "utf-8";
.sys_pictable_index{
    width:800px;
.sys_pictable_index .queryForm{
    position: relative;
}
.sys_pictable_index .tpl-btns .row{
    padding-left: 10px;
}
.sys_pictable_index th.opt-check,.sys_pictable_index td.opt-check{
    width: 30px;
.sys_pictable_index .queryForm .icon-search{
    position: absolute;
    top:7px;
    right:15px;
    font-size:25px;
}
.sys_pictable_index .table-opt .icon {
    margin: 10px;
    font-size: 20px;
}

html/model/sys/pictable/index.html

@@ -1,58 +1,49 @@
<div class="sys_chart_index">
    <div class="container queryForm">
        <div class="row">
            <div class="col-6">
                <div class="btn opt-new">
                    <i class="icon-plus"></i>
                    统计
                </div>
<div class="sys_pictable_index">
    <div class="modal-ctrl">
        <i class="icon icon-times"></i>
    </div>
    <div class="container dt-form">
        <div class="row">
            <div class="col-2 item-caption">名称</div>
            <div class="col-4">
                <div class="form-item dyn-select queried"  name="name"></div>
            </div>
            <div class="col-6" style="display: none">
                <div class="form-item text " name="qn"></div>
            </div>
            <div class="col-6 " style="display: none">
                <div class="form-item text " name="qn2"></div>
            <!--<div class="col-2 item-caption">查看</div>-->
            <div class="col-6">
                <div class="btn opt-query">查看</div>
            </div>
        </div>
    </div>
    <div class="container dt-tpl">
    <div id="type" style="height:400px"></div>
    <div class="container dt-tpl-2">
        <div>用户流量</div>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>#</th>
                <th>申请时间</th>
                <th>申请人ID</th>
                <th>姓名</th>
                <th>职称</th>
                <th>机构</th>
                <th>受理状态</th>
                <th>操作</th>
                <th>时间</th>
                <th>新认领客户</th>
                <th>新认领成功客户</th>
                <th>累计认领成功客户</th>
                <th>累计认领客户</th>
            </tr>
            </thead>
            <tbody>
            <tr ch-dir="list">
                <td>{{-_index}}</td>
                <td>{{createTime-showDay}}</td>
                <td>{{professorId}}</td>
                <td>{{name}}</td>
                <td>{{title}}</td>
                <td>{{orgName}}</td>
                <td class="hand-dict" dict="solveStatus" code="{{solveStatus}}" ></td>
                <td class="table-opt" authApplyId="{{authApplyId}}"><div class="btn opt-auth">
                    <i class="icon-plus"></i>
                    审核
                </div></td>
                <td>{{createTime}}</td>
                <td>{{znum-count}}</td>
                <td>{{jnum-count}}</td>
                <td>{{ljnum}}</td>
                <td>{{lznum}}</td>
            </tr>
            </tbody>
            <tbody ch-dir="array.empty">
            <tr>
                <td class="empty-desc" colspan="5">表格暂无数据</td>
                <td colspan="7">表格暂无数据</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="type" style="height:400px"></div>
    <div id="test" style="height: 400px"></div>
</div>

html/test.html

@@ -59,7 +59,7 @@
	<script>
		$(function() {
			$.use(["spa", "util", "form"], function(spa, util, fb) {
				fb.build($(".dt-form"));
				fb.build($(".dt-form"),{qq:{maxShowCount:15}});
			});
		});

js/model/sys/pictable/index.js

@@ -1,28 +1,38 @@
/**
 * Created by TT on 2017/4/19.
 */
;
spa_define(function () {
    return $.use(["spa", "code", "form", "util", "dict"], function (spa, code, form, util, dict) {
        return {
            main: function () {
                var root = spa.findInMain(".sys_chart_index");
                var qf = form.build(root.find(".queryForm"));
                var queryBtn = root.find(".queryForm .icon-search");
                var myChart1 = echarts.init(document.getElementById('type'));
                var tableData = {data: []}, tableData2 = {data: []},
                    allData = [];
                var root = spa.findInMain(".sys_pictable_index");
                var cr = code.parseCode(root.find(".dt-tpl-2"));
                var myChart = echarts.init(document.getElementById('type'));
                var load = function () {
                    util.get("../ajax/operation/statist/user", null, function (data) {
                        allData = data || [];
                        query();
                        query2();
                        var option = {
                var dynUser = {ready: true};
                util.get("../ajax/sys/user/all",null,function(data){
                    var items =dynUser.items = [];
                    data.forEach(function(item){
                        items.push({code:item.id,caption:item.name});
                    });
                    root.find(".dyn-select").attr("defVal",util.data("loginUser").id);
                    dynUser.formRef = form.build(root.find(".dt-form"),{name:dynUser});
                });
                cr.shell("count", function (env) {
                    var v = env.cd[this.k];
                    if (v === 0) {
                        return 0;
                    }
                    return v;
                });
                var loadChart = function () {
                    util.get("../ajax/sys/user/pictable/"+util.data("loginUser").id,null,function (data) {
                        var colors = ['#c23531', '#82C8FA'];
                        var option = {
                            color: colors,
                            title: {
                                text: '用户流量统计',
                                text: '个人业绩统计',
                                subtext: '最近7天'
                            },
                            tooltip: {
@@ -32,7 +42,7 @@ spa_define(function () {
                                data: ['新增用户', '新增激活用户']
                            },
                            xAxis: {
                                data: allData.map(function (item) {
                                data: data.map(function (item) {
                                    return item.createTime;
                                }),
                                boundaryGap: false
@@ -70,25 +80,97 @@ spa_define(function () {
                            series: [{
                                name: '新增用户',
                                type: 'line',
                                data: allData.map(function (item) {
                                data: data.map(function (item) {
                                    return item.znum;
                                }),
                            }, {
                                name: '新增激活用户',
                                type: 'line',
                                data: allData.map(function (item) {
                                data: data.map(function (item) {
                                    return item.jnum;
                                })
                            }
                            ]
                        };
                        myChart1.setOption(option1);
                    }, {});
                        cr.val(data);
                        myChart.setOption(option);
                    })
                };
            },
            mainDestory: function () {
                root.find(".opt-query").on("click", function () {
                    $.util.get("../ajax/sys/user/pictable/" + dynUser.formRef.val().name, null, function (data) {
                        var colors = ['#c23531', '#82C8FA'];
                        var option = {
                            color: colors,
                            title: {
                                text: '个人业绩统计',
                                subtext: '最近7天'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['新增用户', '新增激活用户']
                            },
                            xAxis: {
                                data: data.map(function (item) {
                                    return item.createTime;
                                }),
                                boundaryGap: false
                            },
                            yAxis: {
                                splitLine: {
                                    show: false
                                },
                                boundaryGap: false,
                                type: "value",
                                interval: 1,
                                min: 0
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {
                                        yAxisIndex: 'none'
                                    },
                                    dataView: {readOnly: true},
                                    magicType: {type: ['line', 'bar']},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            dataZoom: [{
                                startValue: ""
                            }, {
                                type: 'inside'
                            }],
                            visualMap: {
                                top: 10,
                                right: 10,
                            },
                            series: [{
                                name: '新增用户',
                                type: 'line',
                                data: data.map(function (item) {
                                    return item.znum;
                                }),
                            }, {
                                name: '新增激活用户',
                                type: 'line',
                                data: data.map(function (item) {
                                    return item.jnum;
                                })
                            }
                            ]
                        };
                        myChart.setOption(option);
                        cr.val(data);
                    });
                });
                cr.listen(dict.doTransfer);
                loadChart();
            }
        };
        }
    });
});