zhangkun
/
ditie2.0_web


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
							@using YTSoft.BaseCallCenter.MVCWeb.Models;
@using YTSoft.BaseCallCenter.Model;
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>风险等级报表</title>

    <link href="/Content/layui/css/layui.css" rel="stylesheet" />
    <link href="/Content/css/public.css" rel="stylesheet" />
    <link href="/Content/layui/css/modules/layui-icon-extend/iconfont.css" type="text/css" rel=" stylesheet" />
    <link href="/Content/css/font-awesome/css/font-awesome.min.css" type="text/css" rel=" stylesheet" />
    <script src="/Content/js/jquery-other.min.js"></script>
    <script src="/Content/js/Report/moment.js"></script>
    <script src="~/Content/js/Report/GetDate.js"></script>
    <script type="text/javascript" src="/Content/layui/layui.js"></script>
    <link href="/Content/css/callrecord/iconfont.css" rel="stylesheet" />

    <script src="~/Content/layui/loading.js"></script>
    <link href="~/Content/css/workorder/loading.css" rel="stylesheet" />

    <script src="/Content/dist/echarts.js" type="text/javascript"></script>
    <script src="/Content/dist/theme/dahua.js" type="text/javascript"></script>
    <style>
        .reportEcharts {
            display: flex;
        }
    </style>
</head>

<body class="childrenBody">

    <div class="layui-fluid" style="height: calc(100% - 35px);overflow:auto;">
        <div class=" layui-col-space15" style="height:100%">

            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space10 searchfilter">
                        <div class="layui-col-md7">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-xs6">
                                    <button class="layui-btn layui-btn-normal layui-btn-radius"
                                        data-type="oneWeek">最近一周</button>
                                    <button class="layui-btn layui-btn-normal layui-btn-radius"
                                        data-type="oneMonth">最近一月</button>
                                    <button class="layui-btn layui-btn-normal layui-btn-radius"
                                        data-type="oneYear">最近一年</button>
                                </div>
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label">
                                        时间：
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input dayParty" id="test10"
                                            style="width: 300px; max-width: 300px; " placeholder=" - "
                                            value="@Model.NowDate">
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <button class="layui-btn layui-btn-normal layui-btn-normal" data-type="reload">
                                <i class="layui-icon">&#xe615; 查 询</i>
                            </button>
                        </div>
                    </div>
                </div>

            </div>


            <div class="layui-card layui-form"
                style="position: absolute; top: 80px; bottom: 5px; width: calc(100% - 30px);">
                <div class="reportEcharts" style="width: 100%; display:flex">
                    <div id="divimagereport1" style=" width:50%;height:500px;"></div>
                    <div id="divimagereport2" style=" width:50%;"></div>
                </div>


                <div style="margin-top: 30px;">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-xs3 layui-input-inline">
                            <label class="layui-form-label">
                                等级：
                            </label>
                            <div class="layui-input-block">
                                <select id="level">
                                    <option value=""></option>
                                    <option value="一级">一级</option>
                                    <option value="二级">二级</option>
                                    <option value="三级">三级</option>
                                </select>
                            </div>

                        </div>
                        <div class="layui-col-md3">
                            <button class="layui-btn layui-btn-normal layui-btn-normal listReload">
                                <i class="layui-icon">&#xe615; 查 询</i>
                            </button>
                        </div>
                    </div>
                    <div class="layui-row layui-col-space10">
                        <table id="demo" lay-filter="test"></table>
                    </div>

                </div>

                <img id="progressImgage" class="progress hide" alt=""
                    src="@Url.Content("~/Content/images/ajax-loader.gif")" />
                <div id="maskOfProgressImage" class="mask hide"></div>
            </div>


        </div>
    </div>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view">查看详情</a>
    </script>
    <script>
        layui.use('element', function () {
            var $ = layui.jquery
                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            $('.site-demo-active').on('click', function () {
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            //Hash地址的定位
            var layid = location.hash.replace(/^#test=/, '');
            element.tabChange('test', layid);

            element.on('tab(test)', function (elem) {
                location.hash = 'test=' + $(this).attr('lay-id');
            });

        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //日期时间范围
            laydate.render({
                elem: '#test10'
                // , type: 'datetime'
                , range: true

            });
        });
        layui.use(['table', 'jquery'], function () {
            var table = layui.table;
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : parent.layer,
                $ = layui.jquery;
            $ = layui.$, active = {
                //查询按钮
                reload: function () {
                    searchLoad(table)
                },
                //本周
                oneWeek: function () {

                    var thisDateParty = getWeekStartDate() + ' - ' + formatDate(now);
                    $("#test10").val(thisDateParty);
                    searchLoad(table)
                }

                //本月
                , oneMonth: function () {

                    var thisDateParty = getMonthStartDate() + ' - ' + formatDate(now);
                    $("#test10").val(thisDateParty);
                    searchLoad(table)
                }
                //本年
                , oneYear: function () {
                    var thisDateParty = getYearStartDate() + ' - ' + formatDate(now);
                    $("#test10").val(thisDateParty);
                    searchLoad(table)
                }
            };

            table.render({
                elem: '#demo',	//指定原始表格元素选择器，也可以使用id选择器
                id: 'recordtable',		//表格的索引
                url: '/ReportOther/GetTableList', //设置异步接口
                cols: [[
                    { field: 'F_labelName', title: '标签', align: 'center' } //这里的templet值是模板元素的选择器
                    , { field: 'F_level', title: '等级', align: 'center' }
                    , { field: 'cnt', title: '数量', align: 'center' }
                    , { field: 'percent', title: '占比', align: 'center' }
                    , { field: 'allpercent', title: '总占比', align: 'center' }
                    , { field: 'total', title: '合计', align: 'center' }
                ]],

                done: function (resp) {
                    merge(resp)
                }

            });

            $('.searchfilter .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            $(".listReload").click(function () {
                table.reload('recordtable', {
                    where: {
                        level: $("#level").val(),
                        stime: $("#test10").val().split(' -')[0] + " 00:00:00",
                        etime: $("#test10").val().split('- ')[1] + " 23:59:59",
                        NowDateTime: new Date()

                    }
                });
            })

            Init();

        });
        function searchLoad(table) {
            Init();
            //执行重载
            table.reload('recordtable', {
                where: {
                    level: $("#level").val(),
                    stime: $("#test10").val().split(' -')[0] + " 00:00:00",
                    etime: $("#test10").val().split('- ')[1] + " 23:59:59",
                    NowDateTime: new Date()

                }
            });
        }

        function merge(res) {
            var data = res.data;
            if (!data) {
                return
            }
            var mergeIndex = 0;//定位需要添加合并属性的行数
            var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
            var columsName = ['F_labelName'];//需要合并的列名称
            var columsIndex = [0, 1];//需要合并的列索引值  
            for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
                var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                    var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                    var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列                   
                    if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                        mark += 1;
                        tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                            $(this).attr("rowspan", mark);
                        });
                        tdCurArr.each(function () {//当前行隐藏
                            $(this).css("display", "none");
                        });
                    } else {
                        mergeIndex = i;
                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                    }
                }
                mergeIndex = 0;
                mark = 1;
            }
        }

        // 路径配置
        require.config({
            paths: {
                echarts: '/Content/dist'
            }
        });
        function Init() {
            echartsData("/ReportOther/GetPieChart", "pie")
            echartsData("/ReportOther/GetLineChart", "line")
        }
        function echartsData(apiUrl, type) {
            $.ajax({
                url: apiUrl,
                type: "get",
                contentType: "application/json",
                dataType: "text",
                cache: false,
                data: {
                    NowDateTime: new Date(),

                    stime: $("#test10").val().split(' -')[0] + " 00:00:00",
                    etime: $("#test10").val().split('- ')[1] + " 23:59:59",
                },
                success: function (result, status) {
                    if (status) {
                        var resultData = JSON.parse(result)
                        if (type === "pie") {
                            if (resultData.length > 0) {
                                var pieData = {}
                                var pieTitleData = []
                                var pieSeriesData = []

                                resultData.forEach(element => {
                                    var pieObj = {}
                                    pieObj.value = element.count
                                    pieObj.name = element.level
                                    pieTitleData.push(element.level)
                                    pieSeriesData.push(pieObj)
                                });
                                pieData.pieTitleData = pieTitleData
                                pieData.pieSeriesData = pieSeriesData
                            }

                            setPieOption("divimagereport1", pieData)
                        } else if (type === "line") {
                            if (resultData.code === 0) {
                                if (resultData.data) {
                                    setLineOption("divimagereport2", resultData.data)
                                }
                            } else {
                                layui.use(['layer'], function () {
                                    layui.layer.msg(resultData.msg)
                                })
                            }


                        }
                    }
                }
            });
        }

        function setPieOption(id, pieData) {
            // 使用
            require(
                [
                    'echarts',
                    'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载

                ],
                function (ec) {
                    var dahuatheme
                    require(['echarts/theme/dahua'], function (theme) {
                        dahuatheme = theme;
                    });
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById(id), dahuatheme);
                    option = {
                        title: {
                            show: false,
                            text: '',
                            subtext: '',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: {
                                    show: true,
                                    title: '数据视图',
                                    readOnly: true,
                                    lang: ['数据视图', '关闭', '刷新']
                                },
                                saveAsImage: {
                                    show: true,
                                    title: '保存为图片',
                                    type: 'png',
                                    lang: ['点击保存']
                                }
                            }
                        },
                        legend: {
                            show: true,
                            orient: 'horizontal',
                            bottom: 20,
                            data: pieData.pieTitleData
                        },
                        series: [
                            {
                                name: '渠道',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '55%'],
                                data: pieData.pieSeriesData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
            );
        }

        function setLineOption(id, resultData) {
            // 使用
            require(
                [
                    'echarts',
                    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                    'echarts/chart/line'
                ],
                function (ec) {
                    var dahuatheme
                    require(['echarts/theme/dahua'], function (theme) {
                        dahuatheme = theme;
                    });
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById(id), dahuatheme);
                    option = {

                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ["一级", "二级", "三级"]
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: resultData.datelist
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '一级',
                                type: 'line',
                                stack: 'Total',
                                data: resultData.yiji
                            },
                            {
                                name: '二级',
                                type: 'line',
                                stack: 'Total',
                                data: resultData.erji
                            },
                            {
                                name: '三级',
                                type: 'line',
                                stack: 'Total',
                                data: resultData.sanji
                            },
                        ]
                    };
                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
            );
        }


    </script>
</body>

</html>