Browse Source

大屏代码提交

miaofuhao 1 month ago
parent
commit
232be76d4b

BIN
bigScreen3/src/assets/base_bj.png


BIN
bigScreen3/src/assets/bj2.png


BIN
bigScreen3/src/assets/daohang_bj.png


BIN
bigScreen3/src/assets/tupian_bj.png


BIN
bigScreen3/src/assets/xiangmu_bj.png


+ 24 - 1
bigScreen3/src/views/dashboard/cpns/CompanyProfile.vue

@@ -35,7 +35,7 @@
35 35
           :interval="3000"
36 36
         > 
37 37
           <el-carousel-item v-for="(item, index) in companyInfo" :key="index"> 
38
-            <div class="carousel-item-content">
38
+            <div class="carousel-item-content" @click="handleClick(item)">
39 39
               <div class="detail-block">
40 40
                 <div class="project-title">{{ item.projectName }}</div>
41 41
                 <div class="info-section">
@@ -63,6 +63,19 @@
63 63
       </div>
64 64
 
65 65
     </div>
66
+    <!-- 对话框显示公园信息 -->
67
+    <el-dialog
68
+      v-model="dialogVisible"
69
+      width="70%"
70
+      height="70%"
71
+      :close-on-click-modal="false"
72
+      :show-close="true"
73
+      :append-to-body="true"
74
+      :modal="false"
75
+      style="background: rgba(0, 20, 40, 0.98);"
76
+    >
77
+      <InfoPopup :data="dialogData"  />
78
+    </el-dialog>
66 79
   </div>
67 80
 </template>
68 81
 
@@ -71,6 +84,7 @@ import { ref, onBeforeUnmount, onMounted } from 'vue'
71 84
 import { ElCarousel, ElCarouselItem } from 'element-plus'
72 85
 import { getPageListData, createPageData } from '@/api/index'
73 86
 import ziyuanVideo from '@/assets/mp4/ziyuan.mp4'
87
+import InfoPopup from '@/views/dashboard/cpns/InfoPopup.vue'
74 88
 import icon1_1 from '@/assets/1.1.png'
75 89
 import icon1_2 from '@/assets/1.2.png'
76 90
 import icon1_3 from '@/assets/1.3.png'
@@ -170,6 +184,7 @@ const fetchCompanyInfo = async () => {
170 184
       // 根据实际接口返回结构调整 - 转换为数组格式
171 185
       const parkData = response.data.park || []
172 186
       companyInfo.value = parkData.map(item => ({
187
+        ...item,
173 188
         projectName: item.fParkname || '项目名称',
174 189
         location: item.fAddress || '暂无地点信息',
175 190
         area: item.fArea || '暂无面积信息'
@@ -180,7 +195,15 @@ const fetchCompanyInfo = async () => {
180 195
     console.error('获取公司信息失败:', error)
181 196
   }
182 197
 }
198
+const dialogVisible = ref(false)
199
+const dialogData = ref({})
183 200
 
201
+// 显示公园信息对话框
202
+const handleClick = (parkData) => {
203
+  dialogData.value = parkData
204
+  
205
+  dialogVisible.value = true
206
+}
184 207
 // 组件挂载时获取数据
185 208
 onMounted(() => {
186 209
   fetchCompanyInfo()

+ 6 - 6
bigScreen3/src/views/dashboard/cpns/DataInsightsDetail.vue

@@ -108,7 +108,6 @@ function handleClose() {
108 108
   position: fixed;
109 109
   z-index: 9999;
110 110
   inset: 0;
111
-  background: rgba(0, 10, 30, 0.8);
112 111
   display: flex;
113 112
   align-items: center;
114 113
   justify-content: center;
@@ -128,12 +127,12 @@ function handleClose() {
128 127
   position: relative;
129 128
   width: min(90vw, 1400px);
130 129
   max-height: 90vh;
131
-  background: linear-gradient(135deg, #001a33 0%, #003366 100%);
132
-  border: 2px solid #0099ff;
130
+  background-image: url('@/assets/bj2.png');
131
+  background-size: 100% 100%;
132
+  background-position: center;
133
+  background-repeat: no-repeat;
133 134
   border-radius: 8px;
134 135
   overflow: hidden;
135
-  box-shadow: 0 0 30px rgba(0, 153, 255, 0.3);
136
-  backdrop-filter: blur(10px);
137 136
   animation: slideIn 0.3s ease;
138 137
 }
139 138
 
@@ -168,6 +167,7 @@ function handleClose() {
168 167
   text-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
169 168
   border-radius: 4px;
170 169
   display: inline-block;
170
+  margin-top: -20px;
171 171
 }
172 172
 
173 173
 .early-warning-close {
@@ -195,7 +195,7 @@ function handleClose() {
195 195
 }
196 196
 
197 197
 .early-warning-body {
198
-  padding: 20px;
198
+  padding: 20px 38px;
199 199
   overflow-y: auto;
200 200
   max-height: calc(90vh - 120px);
201 201
 }

+ 6 - 5
bigScreen3/src/views/dashboard/cpns/EarlyWarningDetail.vue

@@ -121,7 +121,6 @@ function handleClose() {
121 121
   position: fixed;
122 122
   z-index: 9999;
123 123
   inset: 0;
124
-  background: rgba(0, 10, 30, 0.8);
125 124
   display: flex;
126 125
   align-items: center;
127 126
   justify-content: center;
@@ -132,11 +131,12 @@ function handleClose() {
132 131
   width: min(90vw, 1400px);
133 132
   max-height: 90vh;
134 133
   background: linear-gradient(135deg, #001a33 0%, #003366 100%);
135
-  border: 2px solid #0099ff;
134
+  background-image: url('@/assets/bj2.png');
135
+  background-size: 100% 100%;
136
+  background-position: center;
137
+  background-repeat: no-repeat;
136 138
   border-radius: 8px;
137 139
   overflow: hidden;
138
-  box-shadow: 0 0 30px rgba(0, 153, 255, 0.3);
139
-  backdrop-filter: blur(10px);
140 140
 }
141 141
 
142 142
 .early-warning-header {
@@ -159,6 +159,7 @@ function handleClose() {
159 159
   text-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
160 160
   border-radius: 4px;
161 161
   display: inline-block;
162
+  margin-top: -20px;
162 163
 }
163 164
 
164 165
 .early-warning-close {
@@ -186,7 +187,7 @@ function handleClose() {
186 187
 }
187 188
 
188 189
 .early-warning-body {
189
-  padding: 20px;
190
+  padding: 20px 38px;
190 191
   overflow-y: auto;
191 192
   max-height: calc(90vh - 120px);
192 193
 }

+ 1 - 0
bigScreen3/src/views/dashboard/cpns/EquipmentDetail.vue

@@ -212,6 +212,7 @@ const equipmentImages = ref([
212 212
   text-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
213 213
   border-radius: 4px;
214 214
   display: inline-block;
215
+  margin-top: -20px;
215 216
 }
216 217
 
217 218
 .work-order-detail-close {

+ 63 - 12
bigScreen3/src/views/dashboard/cpns/InfoPopup.vue

@@ -792,7 +792,6 @@ onMounted(() => {
792 792
 .info-popup-content {
793 793
   height: 100%;
794 794
   padding: 20px;
795
-  background: #031542;
796 795
   color: #FFFFFF;
797 796
   
798 797
   // 顶部基础信息样式
@@ -803,6 +802,32 @@ onMounted(() => {
803 802
     padding-bottom: 20px;
804 803
     border-bottom: 1px solid #07B9FF;
805 804
     margin-bottom: 20px;
805
+    background-image: url('@/assets/xiangmu_bj.png');
806
+    background-size: 100% 100%;
807
+    background-position: center;
808
+    background-repeat: no-repeat;
809
+    border-radius: 8px;
810
+    padding: 20px;
811
+    position: relative;
812
+    
813
+    // 添加半透明遮罩层,确保文字清晰可见
814
+    &::before {
815
+      content: '';
816
+      position: absolute;
817
+      top: 0;
818
+      left: 0;
819
+      right: 0;
820
+      bottom: 0;
821
+      background: rgba(0, 30, 60, 0.3);
822
+      border-radius: 8px;
823
+      z-index: 1;
824
+    }
825
+    
826
+    // 确保内容在遮罩层之上
827
+    > * {
828
+      position: relative;
829
+      z-index: 2;
830
+    }
806 831
     
807 832
     .basic-info {
808 833
       flex: 1;
@@ -877,6 +902,30 @@ onMounted(() => {
877 902
         border: 1px solid #07B9FF;
878 903
         border-radius: 4px;
879 904
         padding: 10px 0;
905
+        background-image: url('@/assets/daohang_bj.png');
906
+        background-size: 100% 100%;
907
+        background-position: center;
908
+        background-repeat: no-repeat;
909
+        position: relative;
910
+        
911
+        // 添加半透明遮罩层,确保文字清晰可见
912
+        &::before {
913
+          content: '';
914
+          position: absolute;
915
+          top: 0;
916
+          left: 0;
917
+          right: 0;
918
+          bottom: 0;
919
+          background: rgba(3, 21, 66, 0.7);
920
+          border-radius: 4px;
921
+          z-index: 1;
922
+        }
923
+        
924
+        // 确保内容在遮罩层之上
925
+        > * {
926
+          position: relative;
927
+          z-index: 2;
928
+        }
880 929
         
881 930
         .tab-item {
882 931
           padding: 0px 5px;
@@ -929,21 +978,24 @@ onMounted(() => {
929 978
     // 右侧内容区域样式
930 979
     .content-section {
931 980
       flex: 1;
932
-      background: rgba(0, 30, 60, 0.5);
933
-      border: 1px solid #07B9FF;
981
+      // background: rgba(0, 30, 60, 0.5);
982
+      // border: 1px solid #07B9FF;
934 983
       border-radius: 4px;
935 984
       overflow: hidden;
936 985
       
937 986
       // 基础数据内容样式
938 987
       .basic-data {
939 988
         height: 100%;
940
-        padding: 20px;
989
+        // padding: 20px;
941 990
         display: flex;
942 991
         gap: 20px;
943 992
         
944 993
         .facility-table {
994
+          background-image: url('@/assets/base_bj.png');
995
+          background-size: 100% 100%;
996
+          background-position: center;
997
+          background-repeat: no-repeat;
945 998
           flex: 1;
946
-          background: #031542;
947 999
           border: 1px solid #07B9FF;
948 1000
           border-radius: 4px;
949 1001
           padding: 15px;
@@ -951,13 +1003,11 @@ onMounted(() => {
951 1003
           h3 {
952 1004
             font-size: 16px;
953 1005
             color: #07B9FF;
954
-            margin: 0 0 15px 0;
955 1006
             padding-bottom: 10px;
956
-            border-bottom: 1px solid #07B9FF;
957 1007
           }
958 1008
           
959 1009
           .table-container {
960
-            height: 400px;
1010
+            height: 380px;
961 1011
             overflow-y: auto;
962 1012
             /* 自定义滚动条样式 */
963 1013
             &::-webkit-scrollbar {
@@ -1008,7 +1058,10 @@ onMounted(() => {
1008 1058
         
1009 1059
         .park-images {
1010 1060
           width: 320px;
1011
-          background: #031542;
1061
+          background-image: url('@/assets/tupian_bj.png');
1062
+          background-size: 100% 100%;
1063
+          background-position: center;
1064
+          background-repeat: no-repeat;
1012 1065
           border: 1px solid #07B9FF;
1013 1066
           border-radius: 4px;
1014 1067
           padding: 15px;
@@ -1016,13 +1069,11 @@ onMounted(() => {
1016 1069
           h3 {
1017 1070
             font-size: 16px;
1018 1071
             color: #07B9FF;
1019
-            margin: 0 0 15px 0;
1020 1072
             padding-bottom: 10px;
1021
-            border-bottom: 1px solid #07B9FF;
1022 1073
           }
1023 1074
           
1024 1075
           .image-grid {
1025
-            height:400px;
1076
+            height:380px;
1026 1077
             overflow-y: auto;
1027 1078
             flex-direction: column;
1028 1079
             gap: 15px;

+ 29 - 2
bigScreen3/src/views/dashboard/cpns/ProjectOverview.vue

@@ -9,12 +9,11 @@
9 9
     <el-dialog
10 10
       v-model="dialogVisible"
11 11
       width="70%"
12
-      height="70%"
12
+      height="60%"
13 13
       :close-on-click-modal="false"
14 14
       :show-close="true"
15 15
       :append-to-body="true"
16 16
       :modal="false"
17
-      style="background: rgba(0, 20, 40, 0.98);"
18 17
     >
19 18
       <InfoPopup :data="dialogData"  />
20 19
     </el-dialog>
@@ -26,6 +25,7 @@ import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
26 25
 import { loadAMap } from '@/utils/amap.js'
27 26
 import { getPageListData } from '@/api/index'
28 27
 import markerIcon from '@/assets/icon4.png';
28
+import bj2 from '@/assets/bj2.png'
29 29
 import InfoPopup from './InfoPopup.vue';
30 30
 
31 31
 // 响应式数据
@@ -465,6 +465,33 @@ onBeforeUnmount(() => {
465 465
   }
466 466
 }
467 467
 
468
+/* 组件级别的 el-dialog 样式优化 */
469
+:global(.el-dialog) {
470
+  background-color: transparent !important;
471
+  background-image: url('@/assets/bj2.png') !important;
472
+  background-size: 100% 100% !important;
473
+  background-position: center !important;
474
+  background-repeat: no-repeat !important;
475
+  // border: 2px solid #07B9FF !important;
476
+  // box-shadow: 0 0 20px rgba(7, 185, 255, 0.5) !important;
477
+}
478
+
479
+:global(.el-dialog__title) {
480
+  color: #ffffff !important;
481
+  font-weight: bold !important;
482
+}
483
+
484
+:global(.el-dialog__headerbtn .el-dialog__close) {
485
+  color: #ffffff !important;
486
+  font-size: 20px !important;
487
+}
488
+
489
+:global(.el-dialog__body) {
490
+  background-color: transparent !important;
491
+  padding: 20px !important;
492
+  color: #ffffff !important;
493
+}
494
+
468 495
 // 悬浮框出现动画
469 496
 @keyframes popupAppear {
470 497
   0% {

+ 3 - 0
bigScreen3/src/views/dashboard/cpns/TypicalCase.vue

@@ -87,6 +87,9 @@ const fetchTypicalCaseData = async () => {
87 87
         fWorkorderid: item.fWorkorderid || ''
88 88
       }))
89 89
 
90
+    } else {
91
+      caseList.value = []
92
+      // useDefaultCaseData()
90 93
     }
91 94
   } catch (error) {
92 95
     console.error('获取典型案例数据失败:', error)

+ 12 - 8
bigScreen3/src/views/dashboard/cpns/VideoSurveillance.vue

@@ -28,7 +28,7 @@
28 28
     <div v-if="isModalOpen" class="video-modal" @click.self="closeModal">
29 29
       <div class="video-modal-content">
30 30
         <video v-if="selectedVideo" :src="videoSrc" controls autoplay muted playsinline></video>
31
-        <div class="video-modal-title">{{ selectedVideo?.name }}</div>
31
+        <!-- <div class="video-modal-title">{{ selectedVideo?.name }}</div> -->
32 32
         <button class="video-modal-close" @click="closeModal">×</button>
33 33
       </div>
34 34
     </div>
@@ -289,18 +289,21 @@ onMounted(() => {
289 289
 
290 290
   .video-modal-content {
291 291
     position: relative;
292
-    width: min(86vw, 1400px);
292
+    width: 70%;
293 293
     aspect-ratio: 16 / 9;
294
-    background: #0a1a2a;
295
-    border: 1px solid rgba(7, 185, 255, 0.6);
294
+    background-image: url('@/assets/bj2.png');
295
+    background-size: cover;
296
+    background-position: center;
297
+    background-repeat: no-repeat;
296 298
     border-radius: 6px;
297 299
     overflow: hidden;
298 300
 
299 301
     video {
302
+      padding: 4%;
300 303
       width: 100%;
301 304
       height: 100%;
302
-      object-fit: contain;
303
-      background: #000;
305
+      // 撑满父容器
306
+      object-fit: fill;
304 307
     }
305 308
 
306 309
     .video-modal-title {
@@ -318,13 +321,14 @@ onMounted(() => {
318 321
       top: 6px;
319 322
       width: 32px;
320 323
       height: 32px;
321
-      border: 1px solid rgba(7, 185, 255, 0.6);
322
-      background: rgba(0, 30, 60, 0.6);
324
+      // border: 1px solid rgba(7, 185, 255, 0.3);
325
+      background: rgba(0, 30, 60, 0.2);
323 326
       color: #e6f0ff;
324 327
       font-size: 20px;
325 328
       line-height: 28px;
326 329
       border-radius: 4px;
327 330
       cursor: pointer;
331
+      padding: 0;
328 332
     }
329 333
   }
330 334
 }

+ 10 - 12
bigScreen3/src/views/dashboard/cpns/WorkOrderList.vue

@@ -335,7 +335,6 @@ watch(
335 335
   position: fixed;
336 336
   z-index: 9999;
337 337
   inset: 0;
338
-  /* background: rgba(0, 10, 30, 0.8); */
339 338
   display: flex;
340 339
   align-items: center;
341 340
   justify-content: center;
@@ -343,14 +342,14 @@ watch(
343 342
 
344 343
 .project-info-content {
345 344
   position: relative;
346
-  width: min(90vw, 1200px);
347
-  max-height: 90vh;
348
-  background: linear-gradient(135deg, #001a33 0%, #003366 100%);
349
-  border: 2px solid #0099ff;
345
+  background-image: url('@/assets/bj2.png');
346
+  background-size: 100% 100%;
347
+  background-position: center;
348
+  background-repeat: no-repeat;
349
+  width: 70%;
350
+  height: 72vh;
350 351
   border-radius: 8px;
351 352
   overflow: hidden;
352
-  box-shadow: 0 0 30px rgba(0, 153, 255, 0.3);
353
-  backdrop-filter: blur(10px);
354 353
 }
355 354
 
356 355
 .project-info-header {
@@ -373,6 +372,7 @@ watch(
373 372
   text-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
374 373
   border-radius: 4px;
375 374
   display: inline-block;
375
+  margin-top: -20px;
376 376
 }
377 377
 
378 378
 .project-info-close {
@@ -401,7 +401,7 @@ watch(
401 401
 }
402 402
 
403 403
 .project-info-body {
404
-  padding: 20px;
404
+  padding:0 38px;
405 405
   overflow-y: auto;
406 406
   max-height: calc(90vh - 120px);
407 407
 }
@@ -442,10 +442,9 @@ watch(
442 442
 .table-container {
443 443
   width: 100%;
444 444
   overflow-x: auto;
445
-  background: rgba(0, 10, 30, 0.5);
446 445
   border: 1px solid rgba(0, 153, 255, 0.3);
447 446
   border-radius: 6px;
448
-  box-shadow: 0 0 20px rgba(0, 153, 255, 0.1);
447
+  height: 50vh;
449 448
 }
450 449
 
451 450
 /* 数据表格样式 */
@@ -559,8 +558,7 @@ watch(
559 558
   justify-content: space-between;
560 559
   align-items: center;
561 560
   margin-top: 20px;
562
-  padding: 15px 0;
563
-  border-top: 1px solid rgba(0, 153, 255, 0.3);
561
+  padding: 5px 0;
564 562
 }
565 563
 
566 564
 .pagination-info {