|
|
@@ -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%;
|