1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
| <script setup>
| import {ref} from "vue";
| import Table from '@/components/Table/index.vue'
|
| const selectType = ref(1);
| const typeOption = ref([
| { label: '水电站流量监测点', value: 1 },
| { label: '新扎口流量监测点', value: 2 },
| ])
| const time = ref()
| let tableHead = [
| { prop: 'code', label: '流速 (m/s)' },
| { prop: 'shebei', label: '瞬时流量 (m³/h)', },
| { prop: 'content', label: '累计流量 (m³)' },
| { prop: 'sure', label: '采集点' },
| { prop: 'time', label: '采集时间' },
| ]
|
| const getTableData = () => {
| return new Promise(resolve => {
| let arr = {
| data:{
| list: [
| { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
| { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
| { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
| { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
| { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
| { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
| { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
| { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
| { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
| { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
| ]
| },
| total: 30,
| }
| resolve(arr)
| })
| }
|
| </script>
|
| <template>
| <div class="report">
| <div class="report-tool">
| <el-select
| v-model="selectType"
| class="tool-select"
| size="large"
| placeholder="Select"
| style="width: 20rem"
| >
| <el-option
| v-for="item in typeOption"
| :key="item.value"
| :label="item.label"
| :value="item.value"
| />
| </el-select>
| <el-select
| v-model="selectType"
| class="tool-select"
| size="large"
| placeholder="Select"
| style="width: 20rem"
| >
| <el-option
| v-for="item in typeOption"
| :key="item.value"
| :label="item.label"
| :value="item.value"
| />
| </el-select>
| <el-date-picker
| v-model="time"
| type="datetimerange"
| format="YYYY-MM-DD HH:mm:ss"
| size="large"
| style="width: 30rem"
| range-separator="至"
| start-placeholder="开始时间"
| end-placeholder="结束时间"
| />
| <el-button type="success" size="large" style="width: 6rem">一键导出</el-button>
| </div>
| <div class="report-table">
| <Table :getList="getTableData" :headList="tableHead"></Table>
| </div>
| </div>
| </template>
|
| <style scoped lang="scss">
| .report{
| height: 100%;
| background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
| display: flex;
| flex-direction: column;
| align-items: center;
| &-tool{
| padding: 10px 0;
| display: flex;
| justify-content: center;
| align-items: center;
| gap: 30px;
| :deep(.el-date-editor){
| flex-grow: 0;
| }
| }
| &-table{
| width: 96%;
| height: 90%;
| background: rgba(23,108,229,0.3);
| border: 1px solid #176CE5;
| border-radius: 8px;
| padding: 20px;
| }
| }
| </style>
|
|
