<!-- 水泵操作记录 -->
<template>
  <div class="innerMargin">
    <div class="box-card">
		<div class="seaarchBox">
			<div class="searchLeft">
				<el-input size="small" placeholder="请输入内容" v-model="input3" class="input-with-select">
					<el-button size="small" slot="append" icon="el-icon-search"></el-button>
				</el-input>
				<span class="title">时间选择：</span>
				<el-date-picker
					size="small"
					v-model="value1"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</div>
			<div class="exportRight">
				<el-button size="small" type="primary">导　出</el-button>
			</div>
		</div>
       <template>
        <el-table :data="userList" stripe style="width: 100%">
          <el-table-column prop="equipId"   fixed label="序号"></el-table-column>
          <el-table-column prop="order" label="操作内容"></el-table-column>
          <el-table-column prop="date" label="时间"></el-table-column>
          <el-table-column prop="startTime"  label="操作账号"></el-table-column>
        </el-table>
      </template>
      <el-pagination
        background
        :page-size="8"
        layout="prev, pager, next, jumper"
        :current-page="page"
        :total="totalNum"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  data() {
	  //这里存放数据
    return {
		activeName: 'first',
		searchVal:'',
		input3:'',
        // 
	    value1:"",
        role: "",
        username: "",
        txtInner:"筛选测试用户",
        userList: [],
            userGroupList: [],
        roleList: [],
        page: 1,
        totalNum: 0,

    };
  },
  //监听属性 类似于data概念
  computed: {
    //获取用户类型
		userType: function () {
			return this.$store.state.myuser_type
		}
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList();
  },
  //方法集合
  methods: {
    //获取用户列表
    getList() {
          this.userList = [
			{
				equipId:'145234324234',
				order:'打开水泵141515555开关',
				date:'2021-3-21 12:30:25',
				startTime:'云飞账号'
			},
			{
				equipId:'1423423423123',
				order:'关闭水泵141515555开关',
				date:'2021-3-21 13:30:25',
				startTime:'云飞账号'
			},
			{
				equipId:'1534342342342',
				order:'打开水泵141515555开关',
				date:'2021-3-23 12:30:25',
				startTime:'云飞账号'
			},
			{
				equipId:'1463453452355',
				order:'打开水泵141515555开关',
				date:'2021-3-23 12:30:25',
				startTime:'云飞账号'
			},
			{
				equipId:'1563453453455',
				order:'打开水泵141515555开关',
				date:'2021-3-24 12:30:25',
				startTime:'云飞账号'
			},
			{
				equipId:'1625654754455',
				order:'打开水泵141515555开关',
				date:'2021-3-24 12:30:25',
				startTime:'云飞账号'
			},
			
			{
				equipId:'1563453453455',
				order:'打开水泵141515555开关',
				date:'2021-3-24 12:30:25',
				startTime:'云飞账号'
			},
			{
				equipId:'1625654754455',
				order:'打开水泵141515555开关',
				date:'2021-3-24 12:30:25',
				startTime:'云飞账号'
			},
			
			{
				equipId:'1563453453455',
				order:'打开水泵141515555开关',
				date:'2021-3-24 12:30:25',
				startTime:'云飞账号'
			},
			{
				equipId:'1625654754455',
				order:'打开水泵141515555开关',
				date:'2021-3-24 12:30:25',
				startTime:'云飞账号'
			},
		];
          this.totalNum = 33;
    },
    handleClick(tab, event) {
        console.log(tab, event);
    },
    changePage(value) {
		this.page = value
    },

    
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.seaarchBox{
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	.searchLeft{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.el-input{
			width: 250px;
		}
		/deep/.el-input-group__append{
			border-color: #43cdf6;
		}
		.title{
			margin: 0 5px 0 15px;
		}
		.el-button{
			background: #43cdf6;
			color: #fff;
    		border-color: #43cdf6;
		}
	}
	.exportRight{
		.el-button{
			background: #43cdf6;
			color: #fff;
    		border-color: #43cdf6;
		}
	}
}
.search-box {
  text-align: right;
  .el-input {
    width: 200px;
    vertical-align: middle;
  }
  .el-select {
    vertical-align: middle;
  }
}
/deep/.el-table th, /deep/.el-table td{
    text-align: center;
}
/deep/.el-table th{
    background-color: #43cdf6;
}
/deep/.el-table thead{
    color: #fff;
}
/deep/.el-table__body tr.hover-row > td{
	background-color: rgba(67,205,246,.22);
}
// 分页为蓝色调
/deep/.el-pagination .el-pager li.active{
  background-color: #0295ff!important;  
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
  color: #0295ff;
}
/deep/.el-input__inner:focus{
  outline: none;
  border-color: #0295ff;
}
</style>