log_manage.vue 6.15 KB
<template>
  <div class="innnerBox">
		   <el-col :span="22">
			  <el-form ref="form" label-width="80px" inline>
					  <el-form-item label="用户名" >
						   <span class="inputBox">
							 <el-input placeholder="请输入用户名" v-model="conditions.username_like"></el-input>
						   </span>
					  </el-form-item>
					  <el-form-item label="服务名称" >
						   <el-select
              filterable
              placeholder="请选择"
              :popper-append-to-body="false"
              v-model="servname"
            >
						   <el-option value="" label="全部"></el-option>
              <el-option
                v-for="item in srevarr"
                :value="item.serv_type"
                :key="item.task_id"
                :label="item.serv_name"
              ></el-option>
            </el-select>
						  </el-form-item>
						<el-form-item label="起始时间">
							  <span class="dateBox">
								  <el-date-picker
								   v-model="dates"
								   value-format="yyyy-MM-dd HH:mm:ss"
								    :default-time="['00:00:00', '23:59:59']"
								   type="datetimerange"
								   range-separator="至"
								   start-placeholder="开始日期"
								   end-placeholder="结束日期">
								 </el-date-picker>
							  </span>
						  </el-form-item>
			  </el-form>
		  </el-col>
		   <el-col :span="2">
					<el-button type="primary" style="" @click="query" class="block">查询</el-button>
					<el-button type="" style="" @click="exportlogs" class="block">导出</el-button>
		   </el-col>
		  <div  style="">
			  <el-table
			       :data="tableData"
				   :height="tableHeight"
				   stripe
				   border>
			     <el-table-column
			       width="90"
						 align="center"
						 type="index"
			       label="序号">
			     </el-table-column>
			       <el-table-column
			          align="center"
					  		:formatter="typeFormatter"
			         label="日志类型">
							 <template  slot-scope="scope">
								 <div>
										{{showlogtype(scope.row.serv_type)}}
								 </div>
							 </template>
			       </el-table-column>
							<el-table-column
			          align="center"
			         label="操作时间">
							 <template slot-scope="scope">
								 <div>
									 {{$moment(scope.row.dt).local().add(8,'h').format("YYYY-MM-DD HH:mm:ss")}}
								 </div>
							 </template>
			       </el-table-column>
			        <el-table-column
			         prop="username"
			          align="center"
			         label="操作用户名">
			       </el-table-column>
				   <el-table-column
				     prop="remark"
				      align="center"
				     label="操作内容">
				   </el-table-column>
			  </el-table>
				<div style="margin-top: 28px;">
					<el-pagination
					style="float: right;"
					  background
					  prev-text="上一页"
					  next-text="下一页"
					   :page-sizes="[30, 50, 100, 200]"
					  layout="total, prev, pager, next,sizes, jumper"
					  :current-page="page"
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					  :total="total">
					</el-pagination>
					<div style="clear: both;"></div>
				</div>
		  </div>
  </div>
</template>
<script>
	export default {
		data(){
			let start_dt = this.$moment().format('YYYY-MM-DD')+' 00:00:00';
			let end_dt = this.$moment().format('YYYY-MM-DD')+' 23:59:59';
			return{
				dates:[ start_dt,end_dt ],
				conditions: {
					start_dt:start_dt,
					end_dt:end_dt,
					username_like:''
				},
				srevarr: [{
					serv_type:"serv_task",
					serv_name:"任务设置"
				},{
					serv_type:"serv_store",
					serv_name:"存储配置"
				},{
					serv_type:"serv_auth",
					serv_name:"用户管理"
				},{
					serv_type:"serv_system",
					serv_name:"系统管理"
				},{
					serv_type:"serv_serarch",
					serv_name:"数据查询"
				},{
					serv_type:"serv_login",
					serv_name:"登录日志"
				},{
					serv_type:"serv_scene",
					serv_name:"场景设置"
				},{
					serv_type:"serv_vchan",
					serv_name:"视频管理"
				}
				],
				servname:'',
				tableData:[],
				total:0,
				page:1,
				pageSize:30,
				tableHeight:window.opsTableHeight
			}
		},
		watch:{
			dates(val){
				this.conditions.start_dt=val[0];
				this.conditions.end_dt=val[1];
			}
		},
		components:{},
		mounted(){
			this.getData()
		},
		methods:{
			numFormatter(row, column, cellValue, index) {
				return (index+1)*this.page;
			},
			typeFormatter(row, column, cellValue, index){
				if(cellValue==1){
					return '系统日志'
				}else if(cellValue==0){
					return '操作日志'
				}else{
					return '无'
				}
			},
			handleSizeChange(val) {
				this.pageSize=val;
				this.getData();
			},
			handleCurrentChange(val) {
				this.page=val;
				this.getData();
			  },
			query(){
				this.getData();
			},
			showlogtype(data){
				debugger
				let sname = '';
				this.srevarr.map(ele => {
					if(ele.serv_type == data){
						sname = ele.serv_name
					}
				})
				return sname;
			},
			getData(){
				this.tableData=[];
				let offset = (this.page - 1) * this.pageSize;
				let search_params = {
					limit: this.pageSize,
					offset: offset,
					dt__gte: this.$moment(this.conditions.start_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
					dt__lt:this.$moment(this.conditions.end_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
					serv_type:this.servname,
					username: this.conditions.username_like ? this.conditions.username_like.replace(/\s\s*/g, '') : this.conditions.username_like
				}
				this.$api.ops.oplogs(search_params
				).then((res)=>{
					this.total=res.total_num;
					this.tableData = res.list_data;
				}).catch((err)=>{
					
				})
			},
			exportlogs(){
				let params = {
					dt__gte: this.$moment(this.conditions.start_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
					dt__lt:this.$moment(this.conditions.end_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
					serv_type:this.servname,
					username: this.conditions.username_like ? this.conditions.username_like.replace(/\s\s*/g, '') : this.conditions.username_like
				}
				let href = `${location.origin}/api/v1/log/export_user_oper_logs?dt__gte=${params.dt__gte}&dt__lt=${params.dt__lt}&serv_type=${params.serv_type}&username=${params.username}`
				window.open(href);
			}
		},
	}
</script>
<style lang="scss" scoped>
</style>