Procházet zdrojové kódy

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

- 统一多个模块的最小高度为400px
- 调整环形图半径比例
- 优化模块二布局结构
- 修复选项值类型问题
- 移除标题中的冗余信息
huoyi před 1 měsícem
rodič
revize
57d98e8928

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

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

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

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

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

@@ -3,6 +3,26 @@
3
     <div class="module-brigade-content">
3
     <div class="module-brigade-content">
4
       <div class="chart-row">
4
       <div class="chart-row">
5
         <div class="chart-item">
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
           <div class="chart-title">查堵-主管排行榜</div>
26
           <div class="chart-title">查堵-主管排行榜</div>
7
           <rank-list :rank-data="rankData1" title="查堵-主管排行榜" header-label="排名" header-name="分管主管" header-count="计数" />
27
           <rank-list :rank-data="rankData1" title="查堵-主管排行榜" header-label="排名" header-name="分管主管" header-count="计数" />
8
         </div>
28
         </div>
@@ -31,26 +51,7 @@
31
         </div>
51
         </div>
32
       </div>
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
       <div class="chart-row">
56
       <div class="chart-row">
56
         <div class="chart-item">
57
         <div class="chart-item">

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -236,8 +236,8 @@
236
           <el-col :span="12">
236
           <el-col :span="12">
237
             <el-form-item label="是否追回" prop="isRecovered">
237
             <el-form-item label="是否追回" prop="isRecovered">
238
               <el-select v-model="form.isRecovered" placeholder="请选择是否追回" filterable style="width: 100%">
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
               </el-select>
241
               </el-select>
242
             </el-form-item>
242
             </el-form-item>
243
           </el-col>
243
           </el-col>