lixinru
/
YtIoT


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
    .el-table {
        background: transparent !important;
    }

    .el-table table {
        flex-shrink: 0;
        width: 100% !important;
    }

    .el-table table {
        font-size: 14px;
    }

    .el-table th {
        color: #FFF;
        background: rgba(0, 250, 251, 0.20);
        border-color: transparent;
    }

    .el-table .cell {
        padding: 0;
    }

    .el-table tr {
        margin-bottom: 1px;
    }

    .el-table tr,
    td {
        padding: 0;
        background: rgba(0, 251, 251, .051) !important;
        color: #FFF;
        border-color: rgba(0, 250, 251, 0.20);
    }

    .el-table thead th {
        padding: 0;
        height: 34px;
        border-color: rgba(0, 250, 251, 0.20) !important;
    }

    .el-table .el-table__expanded-cell {
        padding: 10px;
    }

    .el-table .el-table__expand-icon {
        color: #FFF;
    }

    .el-table .cell {
        padding:0 10px;
    }

    .el-table .name-wrapper {
        white-space: nowrap;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
    }

    .el-table .el-table__body-wrapper {
        scrollbar-width: none;
        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;
    }

    .el-table .el-table__body-wrapper::-webkit-scrollbar {
        display: none;
    }
	html,body,#app{
            width: 100%;
            height: 100%;
            padding: 0;
			margin:0;
	}
        .home {
            width: 100%;
            height: 100%;
            padding: 30px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }
        
        .title {
            font-size: 50px;
            line-height: 100px;
            text-align: center;
        }
        
        .search {
            height: 50px;
        }
        
        .el-input {
            width: 500px;
        }
        
        .el-button {
            margin-left: 10px;
        }
        
        .tableBox {
            flex: 1;
            width: 100%;
        }
        
        .el-pagination {
            display: flex;
            justify-content: flex-end;
            padding: 20px 20px 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="home">
<!--            <el-row class="title">{{ typeList[typeFree].name }}</el-row>-->
            <el-row class="search" v-if="typeList[typeFree].inputList.length > 0">
                <el-input v-model="inputObj[item.prop]" placeholder="请输入内容" v-for="item in typeList[typeFree].inputList" :key="item.symbol"></el-input>
                <el-button type="primary" @click="getData()">查询</el-button>
            </el-row>
            <el-row class="tableBox">
                <el-table :data="tableData" border style="width: 100%" height="100%">
                    <el-table-column type="index" align="center" width="50" label="序号">
                    </el-table-column>
                    <el-table-column align="center" v-for="(item, ind) in typeList[typeFree].tableDataHeader" :key="ind" :prop="item.prop" :label="item.name">
					  <template slot-scope="scope">{{item.prop === 'operateType' ? (scope.row[item.prop] == 1 ? '查询': scope.row[item.prop] == 2 ? '添加' : scope.row[item.prop] == 3 ? '修改' : scope.row[item.prop] ==  4 ? '删除' :'') : item.prop === 'logType' ? (scope.row[item.prop] == 1 ? '登录日志': scope.row[item.prop] == 2 ? '操作日志' : '') : scope.row[item.prop]}}</template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[30, 50, 100, 150]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</body>

<!-- <script src="http://172.16.120.92:8080/YtIoT/iot/log/queryLogList?callback=dosomething"></script> -->
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                typeList: [{
                    name: "操作日志查询",
                    tableDataHeader: [{
                        prop: "logType",
                        name: "日志类型"
                    }, {
                        prop: "logContent",
                        name: "日志内容"
                    }, {
                        prop: "operateType",
                        name: "操作类型"
                    }, {
                        prop: "userid",
                        name: "操作用户账号"
                    }, {
                        prop: "username",
                        name: "操作用户名称"
                    }, {
                        prop: "ip",
                        name: "IP"
                    }, {
                        prop: "costTime",
                        name: "耗时"
                    }, {
                        prop: "createBy",
                        name: "创建人"
                    }, {
                        prop: "createTime",
                        name: "创建时间"
                    }, {
                        prop: "updateBy",
                        name: "更新人"
                    }, {
                        prop: "updateTime",
                        name: "更新时间"
                    }, ],
                    url: "http://47.111.81.118:8080/YtIoT/iot/log/queryLogList",
                    inputList: [
                        //     {
                        //     prop: "unit",
                        //     name: "单位信息",
                        //     symbol: Symbol()
                        // }
                    ],
                }, ],
                inputObj: {},
                typeFree: 0,
                tableData: [],
                currentPage: 1,
                pageSize: 50,
                total: 0,
            };
        },
        created() {
            this.inputObj = {};
            // if (
            //     this.$route.query.type &&
            //     this.$route.query.type < this.typeList.length
            // ) {
            //     this.typeFree = this.$route.query.type;
            // } else {
            //     this.typeFree = 0;
            // }
        },
        mounted() {
            this.getData();
        },
        methods: {
            async getData() {
                let data = {
                    current: this.currentPage,
                    size: this.pageSize,
                };
                Object.assign(data, this.inputObj)
                let res = await axios.get(
                    this.typeList[this.typeFree].url + "?current=" + this.currentPage + "&pageSize=" + this.pageSize
                );
				console.log(res)
				console.log(res.data.pageList)
                this.tableData = res.data.pageList;
                this.total = res.data.totalCount;
            },
            // dosomething(jsondata) {
            //     console.log(jsondata)
            //         // this.tableData = res.data.data.records;
            //         // this.total = res.data.data.total;
            // },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getData();
                console.log(`每页 ${this.pageSize} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getData();
                console.log(`当前页: ${this.currentPage}`);
            },
        },
    })
</script>

</html>