346 lines
9.9 KiB
Vue
346 lines
9.9 KiB
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>
|