agmp_wpr_vue/src/views/dataReport/intakeWaterAnalysis.vue

<template>
  <el-row class="el-row-container" v-loading="loading">
    <el-col
      :span="4"
      style="height:100%;padding-bottom:32px;"
    >
    <el-card style="margin:16px;height: 100%; overflow-y: auto">
      <data-report-left></data-report-left>
    </el-card>
    </el-col>
    <el-col
      :span="20"
      style="padding: 16px 16px 16px 0; height: 100%;"
    >
    <Report :columns="columns" style="height:100%;">
      <template slot="headerLeft">
        <el-input
          v-model="form.tarcecodeapplyno"
          style="width: 250px;margin-right: 16px;"
          placeholder="请输入溯源码编号"
          @keyup.enter.native="handleSearch"
          clearable
        />
        <el-button
          type="primary"
          size="small"
          @click="handleSearch"
          >查询</el-button
        > 
      </template>
    </Report>
    </el-col>
  </el-row>
</template>

<script>
import BTable from '@/components/Table/index.vue';
import DataReportLeft from '@/components/DataReportLeft/index.vue'
import Report from './components/report.vue'

export default {
  name:"waterManage",
  components: { BTable,DataReportLeft,Report},
  data() {
    return {
      activeName:'first',
      form: {
        productName: ''
      },
      loading: false,
      associationManageShow: false,
      columns: [
        {
          label: '机井名称',
          prop: 'person',
          customRender: '',
          align: 'center'
        },
        {
          label: '累计用水量（m³）',
          prop: 'area',
          customRender: '',
          align: 'center'
        },
        {
          label: '灌溉次数',
          prop: 'name',
          customRender: '',
          align: 'center'
        },
        {
          label: '累计用电量（°）',
          prop: 'phone',
          customRender: '',
          align: 'center'
        }
      ]
    };
  },
  methods: {
    handleClick(){},
    handleSearch() {},
  }
};
</script>

<style lang="scss" scoped>
.el-row-container{
  height: 100%;
}
.elrow-main__col-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  .top-left {
    height: 100%;
    display: flex;
    align-items: center;
    i {
      background-color: #40d5ec;
      height: 45%;
      width: 5px;
      margin-right: 5px;
    }
  }
}
</style>