tianyunperfect
/
layer_ui_admin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" href="../../static/css/font.css"/>
    <link rel="stylesheet" href="../../static/css/weadmin.css"/>
    <script src="../../config/config.js"></script>


    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
				<a href="javascript:;">首页</a> <a href="javascript:;">用户分析</a>
				<a href="javascript:;"> <cite>会话历史</cite></a>
			</span>
    <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right"
       href="javascript:location.replace(location.href);"
       title="刷新">
        <i class="layui-icon layui-icon-refresh"></i>
        <!-- <i class="layui-icon" style="line-height:30px">&#x1002;</i> -->
    </a>
</div>

<div class="weadmin-body" id="app">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 we-search">
            <div class="layui-inline">
                <input type="text" name="username" placeholder="用户ID"
                       v-model="queryData.user_id" class="layui-input"/>
            </div>
            <div class="layui-inline">
                <input class="layui-input" placeholder="日期范围" name="start" id="dateRange"
                       autocomplete="off"/>
            </div>
            <div class="layui-inline">
                <input type="text" name="username" placeholder="问题"
                       v-model="queryData.question" class="layui-input"/>
            </div>
            <div class="layui-inline">
                <input type="text" name="username" placeholder="答案"
                       v-model="queryData.answer" class="layui-input"/>
            </div>


            <div class="layui-inline">
                <div class="layui-input-inline">
                    <a class="layui-btn" @click="query"><i class="layui-icon"></i>查询</a>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <a class="layui-btn" @click="exportLog"><i
                            class="layui-icon layui-icon-download-circle"></i>导出</a>
                </div>
            </div>
        </form>
    </div>

    <div class="layui-row">
        <div class="layui-col-md12">
            <!--表格-->
            <table class="layui-hide" id="table" lay-filter="test"></table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
            </script>
        </div>
    </div>

    <!--<div @click="fun123">123</div>-->
</div>
<script src="../../static/js/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script src="../../static/js/eleDel.js" type="text/javascript" charset="utf-8"></script>


</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            app_keys: [],
            scenarios: [],
            queryData: {
                user_id: "fc40172627834555add06ed4d31f76c5",
                question: "",
                answer: "",
                beginDate: "",
                endDate: "",
                dateRange: "",
                sortField: "time",
                asc: "asc"
            },
            dataGrid: {},
            isExport: false,// 总条数
        },
        methods: {

            /**
             * 查询后的导出回调
             */
            queryBack: function (count) {
                if (!this.isExport) {
                    return;
                }
                this.isExport = false; // 设置为false后再导出数据。
                if (count < 10000) {
                    let url = app.baseUrl + "/api/log/export?";
                    for (const key in this.queryData) {
                        url += key + "=" + this.queryData[key] + "&";
                    }
                    window.location.href = url;
                } else {
                    let url = app.baseUrl + "/api/log/exportToLinux?";
                    for (const key in this.queryData) {
                        url += key + "=" + this.queryData[key] + "&";
                    }
                    count = count > 1000000 ? 1000000 : count;
                    let time = count / 10000;

                    layui.use(['layer'], function () {
                        layui.layer.msg(`${count}条数据已被导出到linux中，请稍后大约${time}秒`);

                        $.get(url, function () {
                            layui.layer.msg(`已导出成功，请登录系统查阅`);
                        });
                    })
                }
            },

            /**
             * 查询
             * @returns {boolean}
             */
            query: function () {
                /**
                 * 处理日期
                 */
                let dataRange = $("#dateRange").val();
                let rangeArray = dataRange.split(' - ');
                if (rangeArray.length === 2) {
                    this.queryData.beginDate = rangeArray[0];
                    this.queryData.endDate = rangeArray[1];
                } else {
                    this.queryData.beginDate = "1997-01-01";
                    this.queryData.endDate = "2999-01-01";
                }

                // 查询
                this.initPage();
                return false;
            },
            initPage: function () {
                /**
                 * 初始化查询表格
                 */
                layui.use(['table'], function () {
                    vm.dataGrid = layui.table.render({
                        elem: '#table'
                        , height: "auto"
                        , url: app.baseUrl + "/api/log/query" //数据接口
                        , where: vm.queryData
                        , method: "post"
                        , contentType: 'application/json'
                        , title: '用户表'
                        , page: true //开启分页
                        , cols: [[ //表头
                            {type: 'checkbox', fixed: 'left'}
                            , {
                                field: 'time',
                                title: '时间',
                                width: 200,
                                templet: '<div>{{ new Date(d.time).format("yyyy-MM-dd hh:mm:ss") }}</span></div>'
                            }
                            , {
                                field: 'question',
                                title: 'question',
                                width: 280,
                                templet: '<div><span title="{{d.question}}">{{d.question}}</span></div>'
                            }
                            , {
                                field: 'answer',
                                title: 'answer',
                                width: 280,
                                sort: true,
                                templet: '<div><span title="{{d.answer}}">{{d.answer}}</span></div>'
                            }
                            , {field: 'scenario', title: 'scenario', width: 180, sort: true}
                            , {field: 'wakeup_word', title: 'wakeup_word', width: 120}

                            // , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 80}
                        ]]
                        , parseData: function (res) { //res 即为原始返回的数据
                            return {
                                "code": res.code, //解析接口状态
                                "msg": res.message, //解析提示文本
                                "count": res.data.total, //解析数据长度
                                "data": res.data.rows //解析数据列表
                            };
                        },
                        done: (res, curr, count) => {
                            vm.queryBack(count);
                        }
                    });
                });
            },

            /**
             * 数据导出
             */
            exportLog: function () {
                this.isExport = true;
                this.query();
            },
            initDate: function () {
                layui.use('laydate', function () {
                    let laydate = layui.laydate;
                    laydate.render({
                        elem: "#dateRange",
                        range: true,
                    });
                });
            },
        },
        mounted: function () {
            // this.initLayUI();
            // this.initPage();
            this.initDate();
        },
        updated: function () {
        }
    });


</script>
</html>