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>
|