Explorar o código

feat(runScreen): add date range filter for run data page

1. update page title to remove station suffix
2. add date range picker component with default current year range
3. add query params reactive state and date change handler
4. pass query params to data loading function
5. add filter container style
huoyi hai 1 mes
pai
achega
86596d75d9
Modificáronse 1 ficheiros con 54 adicións e 4 borrados
  1. 54 4
      src/views/runData/runScreen/index.vue

+ 54 - 4
src/views/runData/runScreen/index.vue

@@ -2,7 +2,24 @@
2 2
   <div class="run-screen-container">
3 3
     <!-- 页面标题 -->
4 4
     <div class="page-title">
5
-      <h1>盛世鹰眸质控系统[生产运行](安检站)</h1>
5
+      <h1>盛世鹰眸质控系统[生产运行]</h1>
6
+    </div>
7
+
8
+    <!-- 查询条件 -->
9
+    <div class="filter-container">
10
+      
11
+        <span style="margin-right: 10px;">日期</span>
12
+        <el-date-picker
13
+          v-model="dateRange"
14
+          type="daterange"
15
+          range-separator="-"
16
+          start-placeholder="开始日期"
17
+          end-placeholder="结束日期"
18
+          value-format="YYYY-MM-DD"
19
+          style="width: 250px;"
20
+          @change="handleDateChange"
21
+        />
22
+     
6 23
     </div>
7 24
 
8 25
     <!-- 模块一:运行数据 -->
@@ -169,8 +186,19 @@
169 186
 </template>
170 187
 
171 188
 <script setup name="RunScreen">
172
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
173
-import * as echarts from 'echarts'
189
+import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
190
+
191
+// 日期范围
192
+const currentYear = new Date().getFullYear()
193
+const defaultStartDate = `${currentYear}-01-01`
194
+const defaultEndDate = new Date().toISOString().split('T')[0]
195
+const dateRange = ref([defaultStartDate, defaultEndDate])
196
+const queryParams = reactive({
197
+  startDate: defaultStartDate,
198
+  endDate: defaultEndDate
199
+})
200
+
201
+// 图表引用
174 202
 import {
175 203
   getOperationSummary,
176 204
   getT1PassengerTrend,
@@ -229,9 +257,21 @@ const brigadeSeizureData = ref([])
229 257
 const powerBankData = ref({})
230 258
 const pendingConfiscateData = ref({})
231 259
 
260
+// 日期范围变化
261
+function handleDateChange(val) {
262
+  if (val && val.length === 2) {
263
+    queryParams.startDate = val[0]
264
+    queryParams.endDate = val[1]
265
+  } else {
266
+    queryParams.startDate = defaultStartDate
267
+    queryParams.endDate = defaultEndDate
268
+  }
269
+  loadData()
270
+}
271
+
232 272
 async function loadData() {
233 273
   try {
234
-    const query = {}
274
+    const query = { ...queryParams }
235 275
     
236 276
     const [
237 277
       summaryRes,
@@ -724,6 +764,16 @@ onUnmounted(() => {
724 764
   margin: 0;
725 765
 }
726 766
 
767
+.filter-container {
768
+  width: 100%;
769
+  background: #fff;
770
+  padding: 15px;
771
+  border-radius: 4px;
772
+  margin-bottom: 20px;
773
+}
774
+
775
+
776
+
727 777
 .module-title-wrapper {
728 778
   text-align: center;
729 779
   width: 100%;