Browse Source

refactor(blockingData): 调整模块高度和布局,优化数据展示

- 统一多个模块的最小高度为400px
- 调整环形图半径比例
- 优化模块二布局结构
- 修复选项值类型问题
- 移除标题中的冗余信息
huoyi 1 month ago
parent
commit
57d98e8928

+ 44 - 27
src/views/blockingData/blockingDataScreen/components/ModuleBrigadeOne.vue

@@ -6,8 +6,11 @@
6 6
           <div class="stat-card-inner">
7 7
             <div class="stat-left">
8 8
               <div class="stat-label">查堵总数</div>
9
-              <div class="stat-value">{{ statValue || 0 }}</div>
10
-              <div class="stat-unit">起</div>
9
+              <div class="stat-content">
10
+                <div class="stat-value">{{ statValue || 0 }}</div>
11
+                <div class="stat-unit">起</div>
12
+              </div>
13
+
11 14
             </div>
12 15
           </div>
13 16
         </div>
@@ -20,7 +23,7 @@
20 23
           <div ref="chart2" class="echarts"></div>
21 24
         </div>
22 25
       </div>
23
-      
26
+
24 27
       <div class="chart-row">
25 28
         <div class="chart-item">
26 29
           <div class="chart-title">两楼查堵数(包含行检)</div>
@@ -31,7 +34,7 @@
31 34
           <div ref="chart4" class="echarts"></div>
32 35
         </div>
33 36
       </div>
34
-      
37
+
35 38
       <div class="chart-row">
36 39
         <div class="chart-item">
37 40
           <div class="chart-title">两楼每日查堵万分率</div>
@@ -145,9 +148,11 @@ const fetchData = async () => {
145 148
     }
146 149
 
147 150
     if (blockedRes.value?.data) {
151
+      const terminal = processedParams?.terminal || '';
152
+
148 153
       const blockedData = [
149
-        { name: 'T1', value: blockedRes.value.data.t1BlockedCount || 0 },
150
-        { name: 'T2', value: blockedRes.value.data.t2BlockedCount || 0 }
154
+        ...(terminal.includes('T1') || terminal.includes('整体') || !terminal ? [{ name: 'T1', value: blockedRes.value.data.t1BlockedCount || 0 }] : []),
155
+        ...(terminal.includes('T2') || terminal.includes('整体') || !terminal ? [{ name: 'T2', value: blockedRes.value.data.t2BlockedCount || 0 }] : [])
151 156
       ]
152 157
       setOption3(horizontalBarChartOption(blockedData, '#3b82f6'))
153 158
       const total = blockedRes.value.data.totalBlockedCount || 0
@@ -178,8 +183,8 @@ const fetchData = async () => {
178 183
     if (itemRes.value?.data) {
179 184
       const colors = ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444']
180 185
       const itemData = itemRes.value.data.map((item, index) => ({
181
-        name: item.missCheckItem ,
182
-        value: item.count 
186
+        name: item.missCheckItem,
187
+        value: item.count
183 188
       }))
184 189
       setOption6(pieChartOption(itemData, colors))
185 190
     }
@@ -212,7 +217,7 @@ const multiLineChartOption = (xAxisData, series) => ({
212 217
   },
213 218
   xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
214 219
   yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
215
-  legend: { 
220
+  legend: {
216 221
     data: series.map(s => s.name),
217 222
     top: '0%',
218 223
     textStyle: { fontSize: 10 }
@@ -240,10 +245,10 @@ const horizontalBarChartOption = (data, color) => ({
240 245
   },
241 246
   xAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
242 247
   yAxis: { type: 'category', data: data.map(d => d.name), axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
243
-  series: [{ 
244
-    type: 'bar', 
245
-    data: data.map(d => d.value), 
246
-    itemStyle: { color: color }, 
248
+  series: [{
249
+    type: 'bar',
250
+    data: data.map(d => d.value),
251
+    itemStyle: { color: color },
247 252
     barWidth: 15,
248 253
     label: { show: true, position: 'right', fontSize: 10, color: color }
249 254
   }]
@@ -257,7 +262,7 @@ const barLineChartOption = (xAxisData, barData, lineData) => ({
257 262
   },
258 263
   xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
259 264
   yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
260
-  legend: { 
265
+  legend: {
261 266
     data: ['平均过检行李数', '平均查堵件数'],
262 267
     top: '0%',
263 268
     textStyle: { fontSize: 10 }
@@ -287,7 +292,7 @@ const barLineChartOption = (xAxisData, barData, lineData) => ({
287 292
 
288 293
 const pieChartOption = (data, colors) => ({
289 294
   color: colors,
290
-  legend: { 
295
+  legend: {
291 296
     show: true,
292 297
     textStyle: { fontSize: 10 }
293 298
   },
@@ -303,7 +308,7 @@ const pieChartOption = (data, colors) => ({
303 308
 
304 309
 onMounted(() => {
305 310
   fetchData()
306
-  
311
+
307 312
 })
308 313
 </script>
309 314
 
@@ -324,11 +329,6 @@ onMounted(() => {
324 329
 
325 330
 .stat-card {
326 331
   flex: 1;
327
-  background: #fff;
328
-  border-radius: 6px;
329
-  padding: 15px;
330
-  border: 1px solid #eee;
331
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
332 332
   min-height: 120px;
333 333
 }
334 334
 
@@ -336,21 +336,38 @@ onMounted(() => {
336 336
   display: flex;
337 337
   height: 100%;
338 338
   align-items: center;
339
-  justify-content: center;
339
+  gap: 10px;
340 340
 }
341 341
 
342 342
 .stat-left {
343
+  background: #fff;
344
+  border-radius: 6px;
345
+  border: 1px solid #eee;
346
+  padding: 15px;
347
+  height: 100%;
348
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
349
+  flex: 1;
343 350
   display: flex;
344
-  flex-direction: column;
345 351
   align-items: center;
352
+  flex-direction: column;
353
+
354
+  padding-right: 15px;
346 355
 }
347 356
 
348 357
 .stat-label {
349
-  font-size: 14px;
350
-  color: #666;
358
+  width: 100%;
359
+  font-size: 17px;
360
+  color: black;
351 361
   margin-bottom: 8px;
352 362
 }
353 363
 
364
+.stat-content {
365
+  margin-top: 25%;
366
+  display: flex;
367
+  flex-direction: column;
368
+  align-items: center;
369
+}
370
+
354 371
 .stat-value {
355 372
   font-size: 48px;
356 373
   font-weight: bold;
@@ -393,11 +410,11 @@ onMounted(() => {
393 410
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
394 411
   display: flex;
395 412
   flex-direction: column;
396
-  min-height: 300px;
413
+  min-height: 400px;
397 414
 }
398 415
 
399 416
 .chart-title {
400
- font-size: 17px;
417
+  font-size: 17px;
401 418
   color: black;
402 419
   margin-bottom: 5px;
403 420
   text-align: left;

+ 2 - 2
src/views/blockingData/blockingDataScreen/components/ModuleBrigadeThree.vue

@@ -106,7 +106,7 @@ const ringChartOption = (data, colors) => ({
106 106
   },
107 107
   series: [{
108 108
     type: 'pie',
109
-    radius: ['40%', '65%'],
109
+    radius: ['35%', '45%'],
110 110
     center: ['50%', '55%'],
111 111
     data: data,
112 112
     label: {
@@ -151,7 +151,7 @@ onMounted(() => {
151 151
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
152 152
   display: flex;
153 153
   flex-direction: column;
154
-  min-height: 300px;
154
+  min-height: 400px;
155 155
 }
156 156
 
157 157
 .chart-title {

+ 21 - 20
src/views/blockingData/blockingDataScreen/components/ModuleBrigadeTwo.vue

@@ -3,6 +3,26 @@
3 3
     <div class="module-brigade-content">
4 4
       <div class="chart-row">
5 5
         <div class="chart-item">
6
+          <div class="chart-title">查堵-困难图像数</div>
7
+          <div class="number-display">
8
+            <div class="number-value">{{ difficultValue || 0 }}</div>
9
+            <div class="number-unit">幅</div>
10
+          </div>
11
+        </div>
12
+        <div class="chart-item">
13
+          <div class="chart-title">查堵-简单图像数</div>
14
+          <div class="number-display">
15
+            <div class="number-value">{{ simpleValue || 0 }}</div>
16
+            <div class="number-unit">幅</div>
17
+          </div>
18
+        </div>
19
+        <div class="chart-item">
20
+          <div class="chart-title">查堵物品位置</div>
21
+          <div ref="chart7" class="echarts"></div>
22
+        </div>
23
+      </div>
24
+      <div class="chart-row">
25
+        <div class="chart-item">
6 26
           <div class="chart-title">查堵-主管排行榜</div>
7 27
           <rank-list :rank-data="rankData1" title="查堵-主管排行榜" header-label="排名" header-name="分管主管" header-count="计数" />
8 28
         </div>
@@ -31,26 +51,7 @@
31 51
         </div>
32 52
       </div>
33 53
 
34
-      <div class="chart-row">
35
-        <div class="chart-item">
36
-          <div class="chart-title">查堵物品位置</div>
37
-          <div ref="chart7" class="echarts"></div>
38
-        </div>
39
-        <div class="chart-item">
40
-          <div class="chart-title">查堵-困难图像数</div>
41
-          <div class="number-display">
42
-            <div class="number-value">{{ difficultValue || 0 }}</div>
43
-            <div class="number-unit">幅</div>
44
-          </div>
45
-        </div>
46
-        <div class="chart-item">
47
-          <div class="chart-title">查堵-简单图像数</div>
48
-          <div class="number-display">
49
-            <div class="number-value">{{ simpleValue || 0 }}</div>
50
-            <div class="number-unit">幅</div>
51
-          </div>
52
-        </div>
53
-      </div>
54
+
54 55
 
55 56
       <div class="chart-row">
56 57
         <div class="chart-item">

+ 3 - 3
src/views/blockingData/blockingDataScreen/components/ModuleFour.vue

@@ -399,7 +399,7 @@ onMounted(() => {
399 399
   padding: 15px;
400 400
   border: 1px solid #eee;
401 401
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
402
-  min-height: 350px;
402
+  min-height: 400px;  /* 400px */
403 403
   height: 100%;
404 404
 }
405 405
 
@@ -413,7 +413,7 @@ onMounted(() => {
413 413
 .echarts {
414 414
   flex: 1;
415 415
   width: 100%;
416
-  min-height: 300px;
417
-  height: 300px;
416
+  min-height: 400px;  /* 400px */
417
+  height: 400px;
418 418
 }
419 419
 </style>

+ 1 - 1
src/views/blockingData/blockingDataScreen/components/ModuleOne.vue

@@ -1409,7 +1409,7 @@ onMounted(() => {
1409 1409
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
1410 1410
   display: flex;
1411 1411
   flex-direction: column;
1412
-  min-height: 300px;
1412
+  min-height: 400px;
1413 1413
 }
1414 1414
 
1415 1415
 .chart-row.full-width .chart-item {

+ 3 - 3
src/views/blockingData/blockingDataScreen/components/ModuleThree.vue

@@ -147,7 +147,7 @@ onMounted(() => {
147 147
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
148 148
   display: flex;
149 149
   flex-direction: column;
150
-  min-height: 350px;
150
+  min-height: 400px;  /* 400px */
151 151
   height: 100%;
152 152
 }
153 153
 
@@ -161,7 +161,7 @@ onMounted(() => {
161 161
 .echarts {
162 162
   flex: 1;
163 163
   width: 100%;
164
-  min-height: 300px;
165
-  height: 300px;
164
+  min-height: 400px;  /* 400px */
165
+  height: 400px;
166 166
 }
167 167
 </style>

+ 2 - 2
src/views/blockingData/blockingDataScreen/components/ModuleTwo.vue

@@ -322,7 +322,7 @@ const pieOption = (data, colors, isRing = false) => ({
322 322
   },
323 323
   series: [{
324 324
     type: 'pie',
325
-    radius: isRing ? ['50%', '70%'] : '60%',
325
+    radius: isRing ? ['40%', '50%'] : '60%',
326 326
     center: ['50%', '55%'],
327 327
     data: data,
328 328
     label: {
@@ -395,7 +395,7 @@ onMounted(() => {
395 395
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
396 396
   display: flex;
397 397
   flex-direction: column;
398
-  min-height: 300px;
398
+  min-height: 400px;  
399 399
 }
400 400
 
401 401
 .chart-title {

+ 1 - 1
src/views/blockingData/blockingDataScreen/components/RankList.vue

@@ -96,7 +96,7 @@ const getItemClass = (rank, index) => {
96 96
 <style lang="less" scoped>
97 97
 .rank-list-container {
98 98
   width: 100%;
99
-  height: 300px; /* 固定高度 */
99
+  height: 400px; /* 固定高度 */
100 100
   background: #fff;
101 101
   border-radius: 8px;
102 102
   border: 1px solid #e5e7eb;

+ 1 - 1
src/views/blockingData/blockingDataScreen/index.vue

@@ -1,7 +1,7 @@
1 1
 <template>
2 2
   <div class="blocking-data-screen">
3 3
     <div class="screen-header">
4
-      <div class="header-title">盛世鹰眸质控系统【查堵】(安检站)</div>
4
+      <div class="header-title">盛世鹰眸质控系统【查堵】</div>
5 5
     </div>
6 6
 
7 7
     <div class="filter-section">

+ 2 - 2
src/views/blockingData/missedInspectionList/index.vue

@@ -236,8 +236,8 @@
236 236
           <el-col :span="12">
237 237
             <el-form-item label="是否追回" prop="isRecovered">
238 238
               <el-select v-model="form.isRecovered" placeholder="请选择是否追回" filterable style="width: 100%">
239
-                <el-option label="是" value="1" />
240
-                <el-option label="否" value="0" />
239
+                <el-option label="是" :value="1" />
240
+                <el-option label="否" :value="0" />
241 241
               </el-select>
242 242
             </el-form-item>
243 243
           </el-col>