Explorar el 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 hace 1 mes
padre
commit
86596d75d9
Se han modificado 1 ficheros con 54 adiciones y 4 borrados
  1. 54 4
      src/views/runData/runScreen/index.vue

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

@@ -2,7 +2,24 @@
2
   <div class="run-screen-container">
2
   <div class="run-screen-container">
3
     <!-- 页面标题 -->
3
     <!-- 页面标题 -->
4
     <div class="page-title">
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
     </div>
23
     </div>
7
 
24
 
8
     <!-- 模块一:运行数据 -->
25
     <!-- 模块一:运行数据 -->
@@ -169,8 +186,19 @@
169
 </template>
186
 </template>
170
 
187
 
171
 <script setup name="RunScreen">
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
 import {
202
 import {
175
   getOperationSummary,
203
   getOperationSummary,
176
   getT1PassengerTrend,
204
   getT1PassengerTrend,
@@ -229,9 +257,21 @@ const brigadeSeizureData = ref([])
229
 const powerBankData = ref({})
257
 const powerBankData = ref({})
230
 const pendingConfiscateData = ref({})
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
 async function loadData() {
272
 async function loadData() {
233
   try {
273
   try {
234
-    const query = {}
274
+    const query = { ...queryParams }
235
     
275
     
236
     const [
276
     const [
237
       summaryRes,
277
       summaryRes,
@@ -724,6 +764,16 @@ onUnmounted(() => {
724
   margin: 0;
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
 .module-title-wrapper {
777
 .module-title-wrapper {
728
   text-align: center;
778
   text-align: center;
729
   width: 100%;
779
   width: 100%;