cropland/src/pages/plantGuard/irrigate/operatData.vue

<!-- 操作记录 -->
<template>
  <div class="innerMargin">
    <div class="box-card">
        <template>
            <el-tabs type="border-card" v-model="activeName"  @tab-click="handleClick">
                <el-tab-pane label="水泵" name="first">
                    <sbData></sbData>
                </el-tab-pane>
                <el-tab-pane label="水肥机" name="second">
                    <sfjData></sfjData>
                </el-tab-pane>
                <el-tab-pane label="电磁阀" name="third">
                    <dcfData></dcfData>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// const sbData = ()=> import('./sboperatData')
import sbData from './operatData/sboperatData'
import sfjData from './operatData/sfjoperatData'
import dcfData from './operatData/dcfoperatData'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
      sbData,
      sfjData,
      dcfData,
      
  },
  data() {
	  //这里存放数据
    return {
        activeName: 'first',
        // 
	    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 = [
			{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},
			{
				date:'2021-3-19',
				order:'112544412577455',
				equipId:'845556987322545522',
				startTime:'2021-3-19 11:30:25',
				endTime:'2021-3-19 11:36:25',
				electricity:36,
				water:21,
				money:18
			},
			{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},
			{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			}
		];
          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>
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #008cff;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover{
    color: #008cff;
}
</style>