440 lines
12 KiB
Vue
440 lines
12 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="选择日期"
|
||
></el-date-picker>
|
||
</vab-query-form-left-panel>
|
||
<vab-query-form-right-panel>
|
||
<el-button type="primary">导出</el-button>
|
||
</vab-query-form-right-panel>
|
||
</vab-query-form>
|
||
<el-table :data="tableData" border style="width: 100%">
|
||
<el-table-column
|
||
fixed
|
||
prop="date"
|
||
label="项目/月份"
|
||
width="150"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="Jan"
|
||
label=" 一月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Jan"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Feb"
|
||
label=" 二月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Feb"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Mar"
|
||
label=" 三月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Mar"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Apr"
|
||
label=" 四月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Apr"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="May"
|
||
label=" 五月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.May"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Jun"
|
||
label=" 六月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Jun"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Jul"
|
||
label=" 七月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Jul"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Aug"
|
||
label=" 八月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Aug"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Sept"
|
||
label=" 九月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Sept"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Oct"
|
||
label=" 十月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Oct"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop=" Nov "
|
||
label="十一月"
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Nov"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Dec"
|
||
label=" 十二月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Dec"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
fixed="right"
|
||
prop="Total"
|
||
label="合计"
|
||
align="center"
|
||
width="130"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Total"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</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="选择日期"
|
||
></el-date-picker>
|
||
</vab-query-form-left-panel>
|
||
<vab-query-form-right-panel>
|
||
<el-button type="primary">导出</el-button>
|
||
</vab-query-form-right-panel>
|
||
</vab-query-form>
|
||
<el-table :data="tableData" border style="width: 100%">
|
||
<el-table-column
|
||
fixed
|
||
prop="date"
|
||
label="项目/月份"
|
||
width="150"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="Jan"
|
||
label=" 一月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Jan"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Feb"
|
||
label=" 二月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Feb"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Mar"
|
||
label=" 三月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Mar"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Apr"
|
||
label=" 四月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Apr"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="May"
|
||
label=" 五月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.May"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Jun"
|
||
label=" 六月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Jun"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Jul"
|
||
label=" 七月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Jul"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Aug"
|
||
label=" 八月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Aug"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Sept"
|
||
label=" 九月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Sept"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Oct"
|
||
label=" 十月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Oct"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop=" Nov "
|
||
label="十一月"
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Nov"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="Dec"
|
||
label=" 十二月 "
|
||
width=" 100 "
|
||
align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Dec"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
fixed="right"
|
||
prop="Total"
|
||
label="合计"
|
||
align="center"
|
||
width="130"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.Total"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
activeName: 'second',
|
||
tableData: [
|
||
{
|
||
date: '运转时间（d）',
|
||
Jan: '31',
|
||
Feb: '28',
|
||
Mar: '31',
|
||
Apr: '30',
|
||
May: '31',
|
||
Jun: '30',
|
||
Jul: '31',
|
||
Aug: '31',
|
||
Sept: '30',
|
||
Oct: '31',
|
||
Nov: '30',
|
||
Dec: '31',
|
||
Total: '365',
|
||
},
|
||
{
|
||
date: '运转率（%）',
|
||
Jan: ' 100 ',
|
||
Feb: ' 100 ',
|
||
Mar: ' 100 ',
|
||
Apr: ' 100 ',
|
||
May: ' 100 ',
|
||
Jun: ' 100 ',
|
||
Jul: ' 100 ',
|
||
Aug: ' 100 ',
|
||
Sept: ' 100 ',
|
||
Oct: ' 100 ',
|
||
Nov: ' 100 ',
|
||
Dec: ' 100 ',
|
||
Total: ' 100 ',
|
||
},
|
||
{
|
||
date: '污水处理总量（m³）',
|
||
Jan: '50829.13',
|
||
Feb: '60254.5',
|
||
Mar: '62623.3',
|
||
Apr: '66087.5',
|
||
May: '60807',
|
||
Jun: '64541',
|
||
Jul: '50829.13',
|
||
Aug: '50829.13',
|
||
Sept: '50829.13',
|
||
Oct: '50829.13',
|
||
Nov: '50829.13',
|
||
Dec: '50829.13',
|
||
Total: '740350.65',
|
||
},
|
||
{
|
||
date: '污水处理总量（m³）',
|
||
Jan: '50829.13',
|
||
Feb: '60254.5',
|
||
Mar: '62623.3',
|
||
Apr: '66087.5',
|
||
May: '60807',
|
||
Jun: '64541',
|
||
Jul: '50829.13',
|
||
Aug: '50829.13',
|
||
Sept: '50829.13',
|
||
Oct: '50829.13',
|
||
Nov: '50829.13',
|
||
Dec: '50829.13',
|
||
Total: '740350.65',
|
||
},
|
||
{
|
||
date: '污水处理总量（m³）',
|
||
Jan: '50829.13',
|
||
Feb: '60254.5',
|
||
Mar: '62623.3',
|
||
Apr: '66087.5',
|
||
May: '60807',
|
||
Jun: '64541',
|
||
Jul: '50829.13',
|
||
Aug: '50829.13',
|
||
Sept: '50829.13',
|
||
Oct: '50829.13',
|
||
Nov: '50829.13',
|
||
Dec: '50829.13',
|
||
Total: '740350.65',
|
||
},
|
||
{
|
||
date: '污水处理总量（m³）',
|
||
Jan: '50829.13',
|
||
Feb: '60254.5',
|
||
Mar: '62623.3',
|
||
Apr: '66087.5',
|
||
May: '60807',
|
||
Jun: '64541',
|
||
Jul: '50829.13',
|
||
Aug: '50829.13',
|
||
Sept: '50829.13',
|
||
Oct: '50829.13',
|
||
Nov: '50829.13',
|
||
Dec: '50829.13',
|
||
Total: '740350.65',
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
},
|
||
methods: {
|
||
handleClick(row) {
|
||
console.log(row);
|
||
},
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.el-submenu__title:hover {
|
||
background-color: rgba(#1890ff, 0.085) !important;
|
||
color: hsla(208, 100%, 55%, 0.95) !important;
|
||
}
|
||
</style>
|