water-ldht/src/views/analysis/equipmentfunction/index.vue

<template>
  <div class="manage-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="设备月报表" name="first">
        <vab-query-form>
          <vab-query-form-left-panel>
            <el-date-picker
              v-model="value1"
              type="date"
              :placeholder="$t('defalult.xzrq')"
            ></el-date-picker>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
            <el-button>{{ $t('defalult.dc') }}</el-button>
          </vab-query-form-right-panel>
        </vab-query-form>
        <div class="device-base">
          <vab-query-form-left-panel class="device-left">
            <span>厂名：南京江北公用资产有限公司</span>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel class="device-right">
            <span>2022年10月</span>
          </vab-query-form-right-panel>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="Id"
            label="序号（固定资产编号）"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Id"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="First"
            label="所属站点"
            width="155"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.First"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Second"
            label="安装位置"
            width="155"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Second"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Third"
            label="设备名称及编号"
            width="155"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Third"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Fourth"
            label="月额定运行时间（h）"
            width="155"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Fourth"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Fifth"
            label="月实际运行时间（h）"
            width="155"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Fifth"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="Sixth"
            label="月设备完好时间（h）"
            width="155"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Sixth"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <vab-query-form>
          <vab-query-form-right-panel>
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </vab-query-form-right-panel>
        </vab-query-form>
      </el-tab-pane>
      <el-tab-pane label="设备年报表" name="second">
        <vab-query-form>
          <vab-query-form-left-panel>
            <el-date-picker
              v-model="value1"
              type="date"
              :placeholder="$t('defalult.xzrq')"
            ></el-date-picker>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
            <el-button>{{ $t('defalult.dc') }}</el-button>
          </vab-query-form-right-panel>
        </vab-query-form>
        <div class="device-base">
          <vab-query-form-left-panel class="device-left">
            <span>厂名：南京江北公用资产有限公司</span>
          </vab-query-form-left-panel>
        </div>
        <el-table :data="tableData2" border style="width: 100%">
          <el-table-column
            prop="id"
            label="序号（固定资产编号）"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.Id"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="No01"
            label="安装位置"
            width="165"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.No01"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="No02"
            label="设备名称及编号"
            width="165"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.No02"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="No03"
            label="月额定运行时间（h）"
            width="165"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.No03"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="No04"
            label="月实际运行时间（h）"
            width="165"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.No04"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="No05"
            label="月设备完好时间（h）"
            width="165"
            align="center"
          >
            <template #default="{ row }">
              <el-input v-model="row.No05"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <vab-query-form>
          <vab-query-form-right-panel>
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </vab-query-form-right-panel>
        </vab-query-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      activeName: 'first',
      tableData: [
        {
          Id: '',
          First: '小营农污处理设施',
          Second: '',
          Third: '提升泵1',
          Fourth: '744',
          Fifth: '392.17',
          Sixth: '392.17',
        },
        {
          Id: '',
          First: '小营农污处理设施',
          Second: '',
          Third: '提升泵1',
          Fourth: '744',
          Fifth: '392.17',
          Sixth: '392.17',
        },
        {
          Id: '',
          First: '小营农污处理设施',
          Second: '',
          Third: '提升泵1',
          Fourth: '744',
          Fifth: '392.17',
          Sixth: '392.17',
        },
        {
          Id: 'SW-GXSW-HLB-005（NW）',
          First: '大包组农污处理设施',
          Second: '调蓄池',
          Third: '提升泵1',
          Fourth: '744',
          Fifth: '392.17',
          Sixth: '392.17',
        },
        {
          Id: 'SW-GXSW-HLB-005（NW）',
          First: '大包组农污处理设施',
          Second: '调蓄池',
          Third: '提升泵1',
          Fourth: '744',
          Fifth: '392.17',
          Sixth: '392.17',
        },
        {
          Id: 'SW-GXSW-HLB-005（NW）',
          First: '大包组农污处理设施',
          Second: '调蓄池',
          Third: '提升泵1',
          Fourth: '744',
          Fifth: '392.17',
          Sixth: '392.17',
        },
      ],
      tableData2: [
        {
          id: 'SW-GXSW-HLB-005（NW）',
          No01: '大包组农污处理设施',
          No02: '调蓄池',
          No03: '提升泵1',
          No04: '744',
          No05: '392.17',
          No06: '392.17',
        },
        {
          id: 'SW-GXSW-HLB-005（NW）',
          No01: '大包组农污处理设施',
          No02: '调蓄池',
          No03: '提升泵1',
          No04: '744',
          No05: '392.17',
          No06: '392.17',
        },
        {
          id: 'SW-GXSW-HLB-005（NW）',
          No01: '大包组农污处理设施',
          No02: '调蓄池',
          No03: '提升泵1',
          No04: '744',
          No05: '392.17',
          No06: '392.17',
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.device-base {
  width: 100%;
  background: #f5f7fa;
  line-height: 40px;
  height: 40px;
  border: 1px solid #ebeef5;
  border-bottom: none;
  .device-left {
    width: 50%;
    background: #f5f7fa;
    text-align: center;
  }
  .device-right {
    width: 50%;
    background: #f5f7fa;
    text-align: center;
  }
}
</style>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
</style>