echarts图表之在Layui列表下添加echarts图表

东方吕恭
2023-12-01
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>活动统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="${contextPath}/p2029/resource/images/favicon.ico">
    <link rel="stylesheet" href="${contextPath}/external/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${contextPath}/resource/css/layui-dreamweb.css">
    <link rel="stylesheet" href="${contextPath}/resource/css/layui-list.css" media="all">
    <link rel="stylesheet" href="${contextPath}/resource/css/layui-list-${portal_skin}.css" media="all">
    <link rel="stylesheet" href="${contextPath}/external/menu-font/iconfont.css">
    <link rel="stylesheet" href="${contextPath}/resource/css/layui-card.css" media="all">
    <link rel="stylesheet" href="${contextPath}/resource/css/layui-card-blue.css" media="all">
    <script type="text/javascript" src="${contextPath}/external/jquery-1.12.4.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/external/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/external/underscore/underscore-min.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/ctrl/xform/xform-init-script"></script>
    <script type="text/javascript" src="${contextPath}/resource/js/dreamweb-core.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/resource/js/validators.js"></script>
    <script type="text/javascript" src="${contextPath}/resource/js/public.js"></script>
    <script type="text/javascript" src="${contextPath}/external/jquery-slimScroll/jquery.slimscroll.js"
            charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/external/tablednd/jquery.tablednd.js"></script>
    <script type="text/javascript" src="${contextPath}/resource/js/module/datagrid-base.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/resource/js/business-common.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/p2047/200703094408ImByb7RQyTbqUXQQ9g9/js/echarts/echarts.min.js"
            charset="utf-8"></script>

    <script type="text/javascript">
        var year = ${year};
    </script>
</head>
<body>
<script type="text/html" id="bt_Tponed">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-01','10','{{d["userName"]}}(一月调研活动)') href='javascript:void(0);'>{{d["oned"]}}</a>
</script>
<script type="text/html" id="bt_Tptwod">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-02','10','{{d["userName"]}}(二月调研活动)') href='javascript:void(0);'>{{d["twod"]}}</a>
</script>
<script type="text/html" id="bt_Tpthreed">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-03','10','{{d["userName"]}}(三月调研活动)') href='javascript:void(0);'>{{d["threed"]}}</a>
</script>
<script type="text/html" id="bt_Tpfourd">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-04','10','{{d["userName"]}}(四月调研活动)') href='javascript:void(0);'>{{d["fourd"]}}</a>
</script>
<script type="text/html" id="bt_Tpfived">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-05','10','{{d["userName"]}}(五月调研活动)') href='javascript:void(0);'>{{d["fived"]}}</a>
</script>
<script type="text/html" id="bt_Tpsixd">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-06','10','{{d["userName"]}}(六月调研活动)') href='javascript:void(0);'>{{d["sixd"]}}</a>
</script>
<script type="text/html" id="bt_Tpsevend">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-07','10','{{d["userName"]}}(七月调研活动)') href='javascript:void(0);'>{{d["sevend"]}}</a>
</script>
<script type="text/html" id="bt_Tpeightd">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-08','10','{{d["userName"]}}(八月调研活动)') href='javascript:void(0);'>{{d["eightd"]}}</a>
</script>
<script type="text/html" id="bt_Tpnined">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-09','10','{{d["userName"]}}(九月调研活动)') href='javascript:void(0);'>{{d["nined"]}}</a>
</script>
<script type="text/html" id="bt_Tptend">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-10','10','{{d["userName"]}}(十月调研活动)') href='javascript:void(0);'>{{d["tend"]}}</a>
</script>
<script type="text/html" id="bt_Tpelevend">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-11','10','{{d["userName"]}}(十-月调研活动)') href='javascript:void(0);'>{{d["elevend"]}}</a>
</script>
<script type="text/html" id="bt_Tptwelved">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-12','10','{{d["userName"]}}(十二月调研活动)') href='javascript:void(0);'>{{d["twelved"]}}</a>
</script>
<script type="text/html" id="bt_Tponej">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-01','20','{{d["userName"]}}(一月接待活动)') href='javascript:void(0);'>{{d["onej"]}}</a>
</script>
<script type="text/html" id="bt_Tptwoj">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-02','20','{{d["userName"]}}(二月接待活动)') href='javascript:void(0);'>{{d["twoj"]}}</a>
</script>
<script type="text/html" id="bt_Tpthreej">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-03','20','{{d["userName"]}}(三月接待活动)') href='javascript:void(0);'>{{d["threej"]}}</a>
</script>
<script type="text/html" id="bt_Tpfourj">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-04','20','{{d["userName"]}}(四月接待活动)') href='javascript:void(0);'>{{d["fourj"]}}</a>
</script>
<script type="text/html" id="bt_Tpfivej">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-05','20','{{d["userName"]}}(五月接待活动)') href='javascript:void(0);'>{{d["fivej"]}}</a>
</script>
<script type="text/html" id="bt_Tpsixj">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-06','20','{{d["userName"]}}(六月接待活动)') href='javascript:void(0);'>{{d["sixj"]}}</a>
</script>
<script type="text/html" id="bt_Tpsevenj">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-07','20','{{d["userName"]}}(七月接待活动)') href='javascript:void(0);'>{{d["sevenj"]}}</a>
</script>
<script type="text/html" id="bt_Tpeightj">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-08','20','{{d["userName"]}}(八月接待活动)') href='javascript:void(0);'>{{d["eightj"]}}</a>
</script>
<script type="text/html" id="bt_Tpninej">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-09','20','{{d["userName"]}}(九月接待活动)') href='javascript:void(0);'>{{d["ninej"]}}</a>
</script>
<script type="text/html" id="bt_Tptenj">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-10','20','{{d["userName"]}}(十月接待活动)') href='javascript:void(0);'>{{d["tenj"]}}</a>
</script>
<script type="text/html" id="bt_Tpelevenj">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-11','20','{{d["userName"]}}(十-月接待活动)') href='javascript:void(0);'>{{d["elevenj"]}}</a>
</script>
<script type="text/html" id="bt_Tptwelvej">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-12','20','{{d["userName"]}}(十二月接待活动)') href='javascript:void(0);'>{{d["twelvej"]}}</a>
</script>
<script type="text/html" id="bt_Tponeh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-01','30','{{d["userName"]}}(一月会见活动)') href='javascript:void(0);'>{{d["oneh"]}}</a>
</script>
<script type="text/html" id="bt_Tptwoh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-02','30','{{d["userName"]}}(二月会见活动)') href='javascript:void(0);'>{{d["twoh"]}}</a>
</script>
<script type="text/html" id="bt_Tpthreeh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-03','30','{{d["userName"]}}(三月会见活动)') href='javascript:void(0);'>{{d["threeh"]}}</a>
</script>
<script type="text/html" id="bt_Tpfourh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-04','30','{{d["userName"]}}(四月会见活动)') href='javascript:void(0);'>{{d["fourh"]}}</a>
</script>
<script type="text/html" id="bt_Tpfiveh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-05','30','{{d["userName"]}}(五月会见活动)') href='javascript:void(0);'>{{d["fiveh"]}}</a>
</script>
<script type="text/html" id="bt_Tpsixh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-06','30','{{d["userName"]}}(六月会见活动)') href='javascript:void(0);'>{{d["sixh"]}}</a>
</script>
<script type="text/html" id="bt_Tpsevenh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-07','30','{{d["userName"]}}(七月会见活动)') href='javascript:void(0);'>{{d["sevenh"]}}</a>
</script>
<script type="text/html" id="bt_Tpeighth">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-08','30','{{d["userName"]}}(八月会见活动)') href='javascript:void(0);'>{{d["eighth"]}}</a>
</script>
<script type="text/html" id="bt_Tpnineh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-09','30','{{d["userName"]}}(九月会见活动)') href='javascript:void(0);'>{{d["nineh"]}}</a>
</script>
<script type="text/html" id="bt_Tptenh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-10','30','{{d["userName"]}}(十月会见活动)') href='javascript:void(0);'>{{d["tenh"]}}</a>
</script>
<script type="text/html" id="bt_Tpelevenh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-11','30','{{d["userName"]}}(十-月会见活动)') href='javascript:void(0);'>{{d["elevenh"]}}</a>
</script>
<script type="text/html" id="bt_Tptwelveh">
    <a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-12','30','{{d["userName"]}}(十二月会见活动)') href='javascript:void(0);'>{{d["twelveh"]}}</a>
</script>
<script type="text/html" id="bt_Tponexj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-01','','{{d["userName"]}}(一月活动)')  href='javascript:void(0);'>{{d["onexj"]}}</a>
</script>
<script type="text/html" id="bt_Tptwoxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-02','','{{d["userName"]}}(二月活动)')  href='javascript:void(0);'>{{d["twoxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpthreexj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-03','','{{d["userName"]}}(三月活动)')  href='javascript:void(0);'>{{d["threexj"]}}</a>
</script>
<script type="text/html" id="bt_Tpfourxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-04','','{{d["userName"]}}(四月活动)')  href='javascript:void(0);'>{{d["fourxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpfivexj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-05','','{{d["userName"]}}(五月活动)')  href='javascript:void(0);'>{{d["fivexj"]}}</a>
</script>
<script type="text/html" id="bt_Tpsixxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-06','','{{d["userName"]}}(六月活动)')  href='javascript:void(0);'>{{d["sixxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpsevenxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-07','','{{d["userName"]}}(七月活动)')  href='javascript:void(0);'>{{d["sevenxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpeightxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-08','','{{d["userName"]}}(八月活动)')  href='javascript:void(0);'>{{d["eightxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpninexj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-09','','{{d["userName"]}}(九月活动)')  href='javascript:void(0);'>{{d["ninexj"]}}</a>
</script>
<script type="text/html" id="bt_Tptenxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-10','','{{d["userName"]}}(十月活动)')  href='javascript:void(0);'>{{d["tenxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpelevenxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-11','','{{d["userName"]}}(十-月活动)')  href='javascript:void(0);'>{{d["elevenxj"]}}</a>
</script>
<script type="text/html" id="bt_Tptwelvexj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-12','','{{d["userName"]}}(十二月活动)')  href='javascript:void(0);'>{{d["twelvexj"]}}</a>
</script>
<script type="text/html" id="bt_Tphj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}','','{{d["userName"]}}(会议活动)')  href='javascript:void(0);'>{{d["hj"]}}</a>
</script>
<div class="list" id="datagrid" lay-filter="lay-datagrid"></div>
<script type="text/javascript">
    $(function () {
        var cols = [
            [{"type": "numbers", "title": "序号", "rowspan": "2"},
                {
                    "filter": false,
                    "title": "人员",
                    "align": "center",
                    "rowspan": "2",
                    "width": "10%",
                    "hint": false,
                    "field": "userName"
                },
                {"filter": false, "title": "1月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "2月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "3月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "4月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "5月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "6月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "7月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "8月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "9月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "10月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "11月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "12月", "align": "center", "ellipsis": false, "colspan": "4"},
                {"filter": false, "title": "合计", "align": "center", "ellipsis": false, "rowspan": "2", "templet": "#bt_Tphj"}
            ], [
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tponed"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tponej"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tponeh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tponexj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tptwod"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tptwoj"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tptwoh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tptwoxj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpthreed"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpthreej"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpthreeh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpthreexj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpfourd"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpfourj"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpfourh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpfourxj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpfived"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpfivej"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpfiveh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpfivexj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpsixd"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpsixj"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpsixh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpsixxj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpsevend"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpsevenj"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpsevenh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpsevenxj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpeightd"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpeightj"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpeighth"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpeightxj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpnined"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpninej"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpnineh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpninexj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tptend"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tptenj"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tptenh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tptenxj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpelevend"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpelevenj"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpelevenh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpelevenxj"},
                {"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tptwelved"},
                {"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tptwelvej"},
                {"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tptwelveh"},
                {"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tptwelvexj"}

            ]
        ] || [[]];
        var filters = [{"defaultFilter": 1, "text": "人员", "placeholder": "", "cols": 4, "key": "userName"},
            {"defaultFilter": 1, "text": "年份", "placeholder": "", "cols": 4, "key": "year"}] || [];
        var metas = {
            "userName": {
                "paramCount": 1,
                "field": {"value": {"dataType": "TEXT", "key": "value"}},
                "control": "controlTextarea",
                "text": "人员",
                "validate": {}
            },
            "year": {
                "paramCount": 1,
                "field": {"value": {"dataType": "TEXT", "key": "value"}},
                "dataList": year,
                "control": "controlComboBox",
                "text": "年份",
                "validate": {},
                "defaultValue": "${defYear}",
                "radio": true
            }
        } || {};

        var gridId = "datagrid";
        var tableElemKey = gridId + 'Table';

        var url = '${contextPath}/ctrl/oaOutManage/getActivityAtatisticData';

        var urlParams = DSF.Utils.getQueryObject(DSF.Utils.getQueryString()) ;
        var urlParam = DSF.Utils.getJSONString(urlParams);
        if(urlParam){
            url +="?" + urlParam ;
        }

        layui.use('datagrid', function(){

            var datagrid = layui.datagrid ;
            var datagrids= {};
            var isPage = true

            function getDataGrid(dataGridKey){
                if(_.isEmpty(dataGridKey)){
                    dataGridKey = "datagrid";
                }
                if(_.isEmpty(datagrids)){
                    console.log("未配置datagrid!");
                    return;
                }
                return datagrids[dataGridKey];
            };


            var pageSize = '30',autoPage = false;
            if(_.isEmpty(pageSize) || pageSize == '0'){
                if(pageSize == '0'){
                    autoPage = true ;
                }
                pageSize = 30 ;
            }else{
                pageSize = parseInt(pageSize,10);
                if(pageSize == -1){
                    isPage = false ;
                    pageSize= 100;
                }
            }

            var needCheckBox = true  ;
            if('true'){
                needCheckBox = true ;
            }

            var rowClick = '',windowModel = null ;

            if('0' == '0' && !rowClick  ){
                rowClick = 'listRow' ;
                windowModel = '3';
            }

            var _where = layui.dataGridUtil.getDefaultValue(metas) || {} ;


            开始
            var opts = {
                elemKey: gridId,
                tableKey: tableElemKey,
                title: '活动统计' || "",
                allFilters: filters,
                filterMode: 'table' || 'table', //过滤模式
                metas: metas,
                primaryKey: 'A0001' || "",
                buttons: [{"method": "exportXls", "btnStyle": "3", "tip": "导出", "text": "导出", "params": {}}] || [],
                showButtonCount: '3' || '0',
                showTitle: true,
                showToolbar: true,
                needCheckBox: needCheckBox,
                showCustomField: true,
                needSearch: true,
                editFormKey: '' || "",
                windowModel: windowModel,
                selectType: 'checkbox' || '',
                needFlowInfo: false,
                initPage: true,
                table: {
                    cols: cols,
                    url: url,
                    elem: '#' + tableElemKey,
                    id: tableElemKey,
                    datagridKey: gridId,
                    page: true,
                    autoPage: autoPage || false, //是不是自动分页
                    limits: [pageSize, pageSize * 2, pageSize * 3],
                    limit: pageSize,
                    height: '' || 'full-datagrid',
                    primaryKey: 'A0001' || "",
                    method: 'post',
                    where: _where,
                    resize: true,
                    subTable: {} || {},
                    done: function (res, curr, count) {
                        //设置单元格宽度
                        $("div [class='layui-table-header']").find("tr").eq(1).children().each(function (index, element) {
                            var fieldValue = $(this).attr("data-field");
                            $(".laytable-cell-1-" + fieldValue + "").css("width", "80px");
                        })
                        $(".laytable-cell-1-hj").css("width", "80px");
                        //构建echarts图表
                        drawEchart();

                    },
                }, getDataGrid: getDataGrid  //绑定列表对象信息
            };

            var tableWidth = '';
            if (!_.isEmpty(tableWidth)) {
                opts.table["width"] = parseInt(tableWidth);
            }

            //
            var hideHeader = DSF.getURLParam("hideHeader");
            if (hideHeader && "1" == hideHeader) {
                opts.table["hideHeader"] = true;
            }


            var tableSort = '';
            if (!_.isEmpty(tableSort)) {
                var sortJson = JSON.parse(tableSort);
                opts.table.initSort = {
                    field: sortJson.sort,
                    type: sortJson.order
                };
                opts.table.sortType = "remote"; //远程排序
            }
            opts.table.viewMode = {"cardViewTpl": "", "summaryViewTpl": "", "type": "table"} || {};

            var datagridObj = datagrid.render(opts);
            //绑定其对象
            datagrids[gridId] = datagridObj;
            结束
            //把对象提供出去
            window.DataGrids = window.DataGrids || datagrids;
        });
        //
    });
</script>

<script>

    /**
     * 打开活动详情
     * @param outUserId
     * @param startTime
     * @param outType
     * @param name
     */
    function toList(outUserId, startTime, outType, name) {
        var url ='';
        if (startTime.indexOf("-") == -1 && outType == ''){
            //总计
             url = DSF.getURLRoot() + "ctrl/list/201020160230VD5AR3P39g3ECGBwxbX?moduleId=200703094408ImByb7RQyTbqUXQQ9g9&outUserId=" + outUserId + "&startTime=" + startTime;
        }else if (outType == ''){
            //小计
             url = DSF.getURLRoot() + "ctrl/list/2010201602099k96b8FPPhhpkyKbsUQ?moduleId=200703094408ImByb7RQyTbqUXQQ9g9&outUserId=" + outUserId + "&startTime=" + startTime;
        }else {
            //每个月月份分类
             url = DSF.getURLRoot() + "ctrl/list/201016145510bQuKleZSTZey9qwO9vI?moduleId=200703094408ImByb7RQyTbqUXQQ9g9&startTime=" + startTime + "&outUserId=" + outUserId + "&outType=" + outType;
        }
        simpleWin(this, {"url": url, "name": name});
    }

    /**
     * 导出活动统计表
     * @param count
     * @param dataList
     * @param queryList
     * @param widths
     */
    function exportDataGrid(count, dataList, queryList, widths) {
        var url = "${contextPath}/ctrl/oaOutManage/exportXls?page=1";
        var data = {
            "query_year": $("select[name='query_year']").val(),
            "query_userName": $("input[name='query_userName']").val()
        } || {};
        $.each(data, function (k, v) {
            url += "&" + k + "=" + encodeURI(v)
        });
        window.open(url)
    }

    //构建echarts图
    function drawEchart() {
        $(".layui-table").eq(1).after("<div id='mainEchart' style='width: 100%;height:60%;text-align:center;position:relative;'></div>");
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('mainEchart'));
        //查询人员和对应的数据
        var condition = {
            "query_year": $("select[name='query_year']").val(),
            "query_userName": $("input[name='query_userName']").val()
        } || {};
        DSF.Utils.ajaxRequest("ctrl/oaOutManage/getNameAndData", condition, function (result) {
            option = {
                title: {
                    text: '折线图统计',
                    left: '28%',
                    textStyle: {
                        fontStyle: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                color: ['red', 'purple', 'green'],
                legend: {
                    data: ['调研', '接待', '会见'],
                    left: '76%'
                },
                grid: {
                    left: '30%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {
                            title: '保存为图片',
                            type: 'jpeg'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: result.data[0]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '调研',
                        type: 'line',
                        stack: '调研总量',
                        data: result.data[1]
                    },
                    {
                        name: '接待',
                        type: 'line',
                        stack: '接待总量',
                        data: result.data[2]
                    }, {
                        name: '会见',
                        type: 'line',
                        stack: '会见总量',
                        data: result.data[3]
                    }

                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            $("canvas").css("position", "fixed");
            $("canvas").css("top", "50%");
            $("canvas").css("left", "10%")
        });
    }
</script>
<style>

</style>
</body>
</html>
 类似资料: