cropland/src/pages/plantGuard/irrigate/wranData/wranDataList.vue

<!-- 预警历史记录 -->
<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-select size="small" v-model="input3" placeholder="请选择">
					<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
				<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" class="renBtn" type="primary">标记未读</el-button>
				<el-button size="small" class="darkblueBtn" type="primary">标记已读</el-button>
				<el-button size="small" class="blueBtn" type="primary">导　出</el-button>
			</div>
		</div>
       <template>
        <el-table :data="userList" stripe style="width: 100%">
			<el-table-column
				type="selection"
				width="55">
			</el-table-column>
			<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="date1" width="400px" 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:'',
		options: [{
          value: '水泵',
          label: '水泵'
        },{
          value: '水肥机',
          label: '水肥机'
        },{
          value: '电磁阀',
          label: '电磁阀'
        }],
        // 
	    value1:"",
        role: "",
        username: "",
        txtInner:"筛选测试用户",
        userList: [],
            userGroupList: [],
        roleList: [],
        page: 1,
        totalNum: 0,

    };
  },
  //监听属性 类似于data概念
  computed: {
    //获取用户类型
		userType: function () {
			return window.sessionStorage.getItem('myuser_type')
		}
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList();
  },
  //方法集合
  methods: {
    //获取用户列表
    getList() {
          this.userList = [
			{
				equipId:'145234324234',
				order:'水泵任务',
				date:'2021-3-21 12:30:25',
				date1:'墒情站(145234324234)的雨量低于2㎜，目前为0.0㎜',
				startTime:'已读',
			},
			{
				equipId:'145234324234',
				order:'水泵任务',
				date:'2021-3-21 12:30:25',
				date1:'墒情站(145234324234)的雨量低于2㎜，目前为0.0㎜',
				startTime:'已读',
			},{
				equipId:'145234324234',
				order:'水泵任务',
				date:'2021-3-21 12:30:25',
				date1:'墒情站(145234324234)的雨量低于2㎜，目前为0.0㎜',
				startTime:'未读',
			},{
				equipId:'145234324234',
				order:'水泵任务',
				date:'2021-3-21 12:30:25',
				date1:'墒情站(145234324234)的雨量低于2㎜，目前为0.0㎜',
				startTime:'已读',
			},{
				equipId:'145234324234',
				order:'水泵任务',
				date:'2021-3-21 12:30:25',
				date1:'墒情站(145234324234)的雨量低于2㎜，目前为0.0㎜',
				startTime:'未读',
			},{
				equipId:'145234324234',
				order:'水泵任务',
				date:'2021-3-21 12:30:25',
				date1:'墒情站(145234324234)的雨量低于2㎜，目前为0.0㎜',
				startTime:'已读',
			},{
				equipId:'145234324234',
				order:'水泵任务',
				date:'2021-3-21 12:30:25',
				date1:'墒情站(145234324234)的雨量低于2㎜，目前为0.0㎜',
				startTime:'已读',
			},{
				equipId:'145234324234',
				order:'水泵任务',
				date:'2021-3-21 12:30:25',
				date1:'墒情站(145234324234)的雨量低于2㎜，目前为0.0㎜',
				startTime:'已读',
			},{
				equipId:'145234324234',
				order:'水泵任务',
				date:'2021-3-21 12:30:25',
				date1:'墒情站(145234324234)的雨量低于2㎜，目前为0.0㎜',
				startTime:'已读',
			},{
				equipId:'145234324234',
				order:'水泵任务',
				date:'2021-3-21 12:30:25',
				date1:'墒情站(145234324234)的雨量低于2㎜，目前为0.0㎜',
				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{
		.renBtn{
			background: #ff6262;
			border-color: #ff6262;
		}
		.darkblueBtn{
			background: #3762ff;
			border-color: #3762ff;
		}
		.blueBtn{
			background: #43cdf6;
			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;
}
// table复选框
/deep/.el-checkbox__input.is-checked .el-checkbox__inner{
	background-color: #3762ff;
    border-color: #3762ff;
}
</style>