|
@@ -0,0 +1,171 @@
|
|
|
|
+<template>
|
|
|
|
+ <div id="index">
|
|
|
|
+ <el-row class="audit">
|
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
|
+ <el-col :span="20"><h3>账号注册</h3></el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="24">
|
|
|
|
+ <el-col :span="2" class="title">时间段:</el-col>
|
|
|
|
+ <el-col :span="9">
|
|
|
|
+ <div class="block">
|
|
|
|
+ <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="2" class="title">域名:</el-col>
|
|
|
|
+ <el-col :span="10"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
|
|
|
|
+ <el-col :span="2" class="title">地 域:</el-col>
|
|
|
|
+ <el-col :span="9"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
|
|
|
|
+ <el-col :span="2" class="title">应用:</el-col>
|
|
|
|
+ <el-col :span="11">
|
|
|
|
+ <el-select v-model="value" placeholder="请选择">
|
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ <el-select v-model="valuem" placeholder="请选择" v-if="value === '应用'">
|
|
|
|
+ <el-option v-for="item in optionm" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="2" class="title">登录主机:</el-col>
|
|
|
|
+ <el-col :span="9"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
|
|
|
|
+ <el-col :span="2" class="title">登录方式:</el-col>
|
|
|
|
+ <el-col :span="10"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
|
|
|
|
+ <el-col :span="24" style="margin:10px 0;"
|
|
|
|
+ ><el-col :span="5" class="searchInp" style=" margin: 0px 0 0 34%;"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
|
|
|
|
+ <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col
|
|
|
|
+ ></el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="24">
|
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
|
+ <el-table-column prop="name" label="用戶" width="180"> </el-table-column>
|
|
|
|
+ <el-table-column prop="loginTime" label="登录时间" width="180"> </el-table-column>
|
|
|
|
+ <el-table-column prop="outTime" label="推出时间"> </el-table-column>
|
|
|
|
+ <el-table-column prop="operation" label="操作行为"> </el-table-column>
|
|
|
|
+ <el-table-column prop="addressName" label="域名"> </el-table-column>
|
|
|
|
+ <el-table-column prop="address" label="地域"> </el-table-column>
|
|
|
|
+ <el-table-column prop="login" label="登录应用"> </el-table-column>
|
|
|
|
+ <el-table-column prop="time" label="在线时长"> </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <el-col class="paging">
|
|
|
|
+ <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+export default {
|
|
|
|
+ name: 'index',
|
|
|
|
+ props: {},
|
|
|
|
+ components: {},
|
|
|
|
+ data: () => ({
|
|
|
|
+ value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
|
|
|
+ input: '',
|
|
|
|
+ value: '',
|
|
|
|
+ valuem: '',
|
|
|
|
+ options: [
|
|
|
|
+ {
|
|
|
|
+ value: '应用',
|
|
|
|
+ label: '应用',
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ optionm: [
|
|
|
|
+ {
|
|
|
|
+ value: '模块',
|
|
|
|
+ label: '模块',
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ pickerOptions: {
|
|
|
|
+ shortcuts: [
|
|
|
|
+ {
|
|
|
|
+ text: '最近一周',
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: '最近一个月',
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: '最近三个月',
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ tableData: [
|
|
|
|
+ {
|
|
|
|
+ name: '顾红伟',
|
|
|
|
+ loginTime: '2019-9-9',
|
|
|
|
+ outTime: '2019-9-9',
|
|
|
|
+ operation: '1',
|
|
|
|
+ addressName: '中国',
|
|
|
|
+ address: '长春',
|
|
|
|
+ login: '就业',
|
|
|
|
+ time: '20分钟',
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ }),
|
|
|
|
+ created() {},
|
|
|
|
+ computed: {},
|
|
|
|
+ methods: {},
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+h1,
|
|
|
|
+h2,
|
|
|
|
+h3,
|
|
|
|
+h4,
|
|
|
|
+h5,
|
|
|
|
+h6 {
|
|
|
|
+ margin: 0;
|
|
|
|
+ padding: 0;
|
|
|
|
+}
|
|
|
|
+.audit {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 20px;
|
|
|
|
+}
|
|
|
|
+.btn {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 40px;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ margin: 20px 0;
|
|
|
|
+}
|
|
|
|
+.search {
|
|
|
|
+ height: 40px;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ margin: 0 0 20px 0;
|
|
|
|
+}
|
|
|
|
+.searchSel .el-select {
|
|
|
|
+ border-radius: 0;
|
|
|
|
+}
|
|
|
|
+/deep/.searchInp .el-input__inner {
|
|
|
|
+ border-radius: 0;
|
|
|
|
+}
|
|
|
|
+.searchBtn .el-button {
|
|
|
|
+ border-radius: 0;
|
|
|
|
+}
|
|
|
|
+.title {
|
|
|
|
+ height: 40px;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ text-align: center;
|
|
|
|
+}
|
|
|
|
+.paging {
|
|
|
|
+ text-align: right;
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+}
|
|
|
|
+</style>
|