| | |
| | | <template> |
| | | <div class="logLog_box"> |
| | | <My-bread |
| | | :list="[ |
| | | <My-bread :list="[ |
| | | `${$t('operatManage.operatManage')}`, |
| | | `${$t('operatManage.logLog')}`, |
| | | ]" |
| | | ></My-bread> |
| | | ]"></My-bread> |
| | | <el-divider /> |
| | | <div class="inquire"> |
| | | <div class="herder_box"> |
| | | {{ $t('operatManage.operationLogObj.queryRegion') }} |
| | | </div> |
| | | <el-form ref="formData1" :model="form" :inline="true"> |
| | | |
| | | <el-form |
| | | :inline="true" |
| | | ref="sizeForm" |
| | | :model="sizeForm" |
| | | > |
| | | <el-form-item |
| | | :label="$t('operatManage.operationLogObj.username')" |
| | | prop="uname" |
| | | :label="$t('operatManage.operationLogObj.username')" |
| | | > |
| | | <el-input |
| | | v-model="form.uname" |
| | | v-model="sizeForm.uname" |
| | | :placeholder="$t('operatManage.operationLogObj.pleaseInput')" |
| | | /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item |
| | | :label="$t('operatManage.operationLogObj.operationType')" |
| | | prop="type" |
| | | :label="$t('operatManage.operationLogObj.operationType')" |
| | | > |
| | | <el-select |
| | | clearable |
| | | v-model="form.type" |
| | | v-model="sizeForm.type" |
| | | :placeholder="$t('operatManage.operationLogObj.pleaseSelect')" |
| | | > |
| | | <el-option :label="$t('loglog.login')" value="1" /> |
| | | <el-option :label="$t('loglog.checkout')" value="2" /> |
| | | <el-option :label="$t('loglog.logout')" value="3" /> |
| | | <el-option |
| | | :label="$t('loglog.login')" |
| | | value="1" |
| | | /> |
| | | <el-option |
| | | :label="$t('loglog.checkout')" |
| | | value="2" |
| | | /> |
| | | <el-option |
| | | :label="$t('loglog.logout')" |
| | | value="3" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item |
| | |
| | | <el-date-picker |
| | | format="yyyy-MM-dd HH:mm:ss" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | v-model="form.start" |
| | | v-model="sizeForm.start" |
| | | style="width: 100%" |
| | | type="datetime" |
| | | :placeholder="$t('operatManage.operationLogObj.optionDate')" |
| | | > |
| | | </el-date-picker> |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item |
| | | prop="end" |
| | |
| | | <el-date-picker |
| | | format="yyyy-MM-dd HH:mm:ss" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | v-model="form.end" |
| | | v-model="sizeForm.end" |
| | | style="width: 100%" |
| | | type="datetime" |
| | | :placeholder="$t('operatManage.operationLogObj.optionDate')" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <el-button |
| | | @click="onSubmit" |
| | | icon="el-icon-search" |
| | | style="background: #409eff; border: 1px solid #409eff; color: white" |
| | | >{{ $t('operatManage.operationLogObj.inquire') }}</el-button |
| | | > |
| | | >{{ $t("operatManage.operationLogObj.inquire") }}</el-button> |
| | | <el-button |
| | | @click="onEmpty('formData1')" |
| | | @click="onEmpty('sizeForm')" |
| | | icon="el-icon-delete" |
| | | type="info" |
| | | >{{ $t('operatManage.operationLogObj.empty') }}</el-button |
| | | > |
| | | >{{ $t("operatManage.operationLogObj.empty") }}</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <!-- 表格显示 --> |
| | | <div class="table_box"> |
| | | <el-table :data="tableData" style="width: 100%" height="80%"> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | height="80%" |
| | | > |
| | | <el-table-column |
| | | width="150" |
| | | type="index" |
| | | :label="$t('loglog.serialnumber')" |
| | | /> |
| | | <el-table-column prop="uname" :label="$t('loglog.username')" /> |
| | | <el-table-column |
| | | prop="uname" |
| | | :label="$t('loglog.username')" |
| | | /> |
| | | <el-table-column |
| | | prop="appid" |
| | | :label="$t('loglog.applicationProgram')" |
| | | :formatter="formatAppid" |
| | | /> |
| | | <el-table-column prop="ip" :label="$t('loglog.ipadress')" /> |
| | | <el-table-column prop="descr" :label="$t('loglog.describe')" /> |
| | | <el-table-column |
| | | prop="ip" |
| | | :label="$t('loglog.ipadress')" |
| | | /> |
| | | <el-table-column |
| | | prop="descr" |
| | | :label="$t('loglog.describe')" |
| | | /> |
| | | <el-table-column |
| | | prop="optime" |
| | | :formatter="formatData" |
| | |
| | | /> |
| | | </el-table> |
| | | <!-- 分页 --> |
| | | <div style="margin-top: 40px" class="pagination_box"> |
| | | <div |
| | | style="margin-top: 40px" |
| | | class="pagination_box" |
| | | > |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import MyBread from '../../components/MyBread.vue'; |
| | | import { loginSelectByPageAndCount } from '../../api/api'; |
| | | import MyBread from "../../components/MyBread.vue"; |
| | | import { loginSelectByPageAndCount } from "../../api/api"; |
| | | export default { |
| | | //import引入的组件需要注入到对象中才能使用 |
| | | components: { |
| | |
| | | data() { |
| | | return { |
| | | currentPage4: 1, |
| | | form: {}, |
| | | sizeForm: { |
| | | uname: "", |
| | | start: null, |
| | | end: null, |
| | | type: [], |
| | | }, |
| | | tableData: [], |
| | | listData: { |
| | | pageIndex: 1, |
| | |
| | | let data; |
| | | switch (row[column.property]) { |
| | | case 1: |
| | | data = '登录'; |
| | | data = "登录"; |
| | | break; |
| | | case 2: |
| | | data = '校验'; |
| | | data = "校验"; |
| | | break; |
| | | case 3: |
| | | data = '登出'; |
| | | data = "登出"; |
| | | break; |
| | | } |
| | | return data; |
| | |
| | | let data; |
| | | switch (row[column.property]) { |
| | | case 1: |
| | | data = '成功'; |
| | | data = "成功"; |
| | | break; |
| | | case 0: |
| | | data = '失败'; |
| | | data = "失败"; |
| | | break; |
| | | } |
| | | return data; |
| | |
| | | let data; |
| | | switch (row[column.property]) { |
| | | case 1: |
| | | data = '管道基础大数据平台'; |
| | | data = menuStartName; |
| | | break; |
| | | case 2: |
| | | data = '外部系统集成'; |
| | | data = "外部系统集成"; |
| | | break; |
| | | } |
| | | return data; |
| | | }, |
| | | //格式化时间 |
| | | add0(m) { |
| | | return m < 10 ? '0' + m : m; |
| | | return m < 10 ? "0" + m : m; |
| | | }, |
| | | //格式化时间 |
| | | format(shijianchuo) { |
| | |
| | | var mm = time.getMinutes(); |
| | | var s = time.getSeconds(); |
| | | return ( |
| | | y + '-' + this.add0(m) + '-' + this.add0(d) |
| | | y + "-" + this.add0(m) + "-" + this.add0(d) |
| | | // " " + |
| | | // this.add0(h) + |
| | | // ":" + |
| | |
| | | this.getList(); |
| | | }, |
| | | onSubmit() { |
| | | this.listData = { ...this.listData, ...this.form }; |
| | | this.listData = { ...this.listData, ...this.sizeForm }; |
| | | // console.log(this.listData) |
| | | this.getList(); |
| | | }, |
| | | onEmpty(formData1) { |
| | | this.$refs[formData1].resetFields(); //重置表单数据 |
| | | // this.form = {}; |
| | | this.form.start = null; |
| | | this.form.end = null; |
| | | // this.sizeForm.start = null; |
| | | // this.sizeForm.end = null; |
| | | }, |
| | | async getList() { |
| | | const data = await loginSelectByPageAndCount(this.listData); |
| | | |
| | | if (data.code != 200) { |
| | | return this.$message.error('列表调用失败'); |
| | | return this.$message.error("列表调用失败"); |
| | | } |
| | | this.tableData = data.result; |
| | | this.count = data.count; |
| | |
| | | <style lang="less" scoped> |
| | | //@import url(); 引入公共css类 |
| | | .logLog_box { |
| | | border-radius: 10px; |
| | | height: 100%; |
| | | |
| | | box-sizing: border-box; |
| | | height: 98%; |
| | | width: 98%; |
| | | padding: 1%; |
| | | position: absolute; |
| | | .inquire { |
| | | padding: 10px; |
| | | margin-top: 20px; |
| | | margin-top: 10px; |
| | | |
| | | border-radius: 5px; |
| | | border: 1px solid rgb(202, 201, 204); |
| | | margin-bottom: 20px; |
| | | margin-bottom: 10px; |
| | | /deep/.el-form-item { |
| | | margin-bottom: 10px; |
| | | } |
| | | .herder_box { |
| | | padding: 10px; |
| | | border-bottom: 1px solid #ccc; |
| | |
| | | border-radius: 5px; |
| | | border: 1px solid rgb(202, 201, 204); |
| | | overflow: auto; |
| | | height: 480px; |
| | | height: 60%; |
| | | /*修改table 表体的背景颜色和文字颜色*/ |
| | | /deep/ .el-table { |
| | | background-color: transparent; |