zhangkun
/
ditie2.0_web


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
							@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">
                    <div id="divimagereport1" style="width:500px;height:500px;"></div>
                    <div id="divimagereport2" style="width:500px;height:500px;"></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>
                                    <option value="自动">自动</option>
                                </select>
                            </div>

                        </div>
                    </div>
                    <div class="layui-row layui-col-space10">
                        <table class="layui-table"
                            lay-data="{height: 'full-220',url:'/ReportOther/GetTableList/?NowDateTime=@Model.NowDateTime', id:'recordtable'}"
                            lay-size="sm" lay-filter="demo">
                            <thead>
                                <tr>
                                    <th lay-data="{field:'F_labelName'}">标签</th>
                                    <th lay-data="{field:'F_level',align:'center'}">等级</th>
                                    <th lay-data="{field:'cnt'}">数量</th>
                                    <th lay-data="{field:'percent',align:'center'}">占比</th>
                                    <th lay-data="{field:'total'}">合计</th>
                                </tr>
                            </thead>
                        </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 () {
                    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()

                        }
                    });
                }
            };
            $('.searchfilter .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';


            });

            // 路径配置
            require.config({
                paths: {
                    echarts: '/Content/dist'
                }
            });
            function Init() {
                echartsData("/ReportOther/GetPieChart", "pie")
                echartsData("/ReportOther/GetLineChart", "line")
            }
            Init();

        });
        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") {
                            console.log(type)
                            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.data) {
                                console.log(type)
                                setLineOption("divimagereport2", resultData.data)
                            }

                        }
                    }
                }
            });
        }

        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>