大屏代码提交

bigScreen3/src/views/dashboard/cpns/CompanyProfile.vue

           :interval="3000"
         > 
           <el-carousel-item v-for="(item, index) in companyInfo" :key="index"> 
-            <div class="carousel-item-content">
+            <div class="carousel-item-content" @click="handleClick(item)">
               <div class="detail-block">
                 <div class="project-title">{{ item.projectName }}</div>
                 <div class="info-section">
       </div>
 
     </div>
+    <!-- 对话框显示公园信息 -->
+    <el-dialog
+      v-model="dialogVisible"
+      width="70%"
+      height="70%"
+      :close-on-click-modal="false"
+      :show-close="true"
+      :append-to-body="true"
+      :modal="false"
+      style="background: rgba(0, 20, 40, 0.98);"
+    >
+      <InfoPopup :data="dialogData"  />
+    </el-dialog>
   </div>
 </template>
 
 import { ElCarousel, ElCarouselItem } from 'element-plus'
 import { getPageListData, createPageData } from '@/api/index'
 import ziyuanVideo from '@/assets/mp4/ziyuan.mp4'
+import InfoPopup from '@/views/dashboard/cpns/InfoPopup.vue'
 import icon1_1 from '@/assets/1.1.png'
 import icon1_2 from '@/assets/1.2.png'
 import icon1_3 from '@/assets/1.3.png'
       // 根据实际接口返回结构调整 - 转换为数组格式
       const parkData = response.data.park || []
       companyInfo.value = parkData.map(item => ({
+        ...item,
         projectName: item.fParkname || '项目名称',
         location: item.fAddress || '暂无地点信息',
         area: item.fArea || '暂无面积信息'
     console.error('获取公司信息失败:', error)
   }
 }
+const dialogVisible = ref(false)
+const dialogData = ref({})
 
+// 显示公园信息对话框
+const handleClick = (parkData) => {
+  dialogData.value = parkData
+  
+  dialogVisible.value = true
+}
 // 组件挂载时获取数据
 onMounted(() => {
   fetchCompanyInfo()

bigScreen3/src/views/dashboard/cpns/DataInsightsDetail.vue

   position: fixed;
   z-index: 9999;
   inset: 0;
-  background: rgba(0, 10, 30, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   width: min(90vw, 1400px);
   max-height: 90vh;
-  background: linear-gradient(135deg, #001a33 0%, #003366 100%);
-  border: 2px solid #0099ff;
+  background-image: url('@/assets/bj2.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0 0 30px rgba(0, 153, 255, 0.3);
-  backdrop-filter: blur(10px);
   animation: slideIn 0.3s ease;
 }
 
   text-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
   border-radius: 4px;
   display: inline-block;
+  margin-top: -20px;
 }
 
 .early-warning-close {
 }
 
 .early-warning-body {
-  padding: 20px;
+  padding: 20px 38px;
   overflow-y: auto;
   max-height: calc(90vh - 120px);
 }

bigScreen3/src/views/dashboard/cpns/EarlyWarningDetail.vue

   position: fixed;
   z-index: 9999;
   inset: 0;
-  background: rgba(0, 10, 30, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   width: min(90vw, 1400px);
   max-height: 90vh;
   background: linear-gradient(135deg, #001a33 0%, #003366 100%);
-  border: 2px solid #0099ff;
+  background-image: url('@/assets/bj2.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0 0 30px rgba(0, 153, 255, 0.3);
-  backdrop-filter: blur(10px);
 }
 
 .early-warning-header {
   text-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
   border-radius: 4px;
   display: inline-block;
+  margin-top: -20px;
 }
 
 .early-warning-close {
 }
 
 .early-warning-body {
-  padding: 20px;
+  padding: 20px 38px;
   overflow-y: auto;
   max-height: calc(90vh - 120px);
 }

bigScreen3/src/views/dashboard/cpns/EquipmentDetail.vue

   text-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
   border-radius: 4px;
   display: inline-block;
+  margin-top: -20px;
 }
 
 .work-order-detail-close {

bigScreen3/src/views/dashboard/cpns/InfoPopup.vue

 .info-popup-content {
   height: 100%;
   padding: 20px;
-  background: #031542;
   color: #FFFFFF;
   
   // 顶部基础信息样式
     padding-bottom: 20px;
     border-bottom: 1px solid #07B9FF;
     margin-bottom: 20px;
+    background-image: url('@/assets/xiangmu_bj.png');
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 8px;
+    padding: 20px;
+    position: relative;
+    
+    // 添加半透明遮罩层，确保文字清晰可见
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 30, 60, 0.3);
+      border-radius: 8px;
+      z-index: 1;
+    }
+    
+    // 确保内容在遮罩层之上
+    > * {
+      position: relative;
+      z-index: 2;
+    }
     
     .basic-info {
       flex: 1;
         border: 1px solid #07B9FF;
         border-radius: 4px;
         padding: 10px 0;
+        background-image: url('@/assets/daohang_bj.png');
+        background-size: 100% 100%;
+        background-position: center;
+        background-repeat: no-repeat;
+        position: relative;
+        
+        // 添加半透明遮罩层，确保文字清晰可见
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(3, 21, 66, 0.7);
+          border-radius: 4px;
+          z-index: 1;
+        }
+        
+        // 确保内容在遮罩层之上
+        > * {
+          position: relative;
+          z-index: 2;
+        }
         
         .tab-item {
           padding: 0px 5px;
     // 右侧内容区域样式
     .content-section {
       flex: 1;
-      background: rgba(0, 30, 60, 0.5);
-      border: 1px solid #07B9FF;
+      // background: rgba(0, 30, 60, 0.5);
+      // border: 1px solid #07B9FF;
       border-radius: 4px;
       overflow: hidden;
       
       // 基础数据内容样式
       .basic-data {
         height: 100%;
-        padding: 20px;
+        // padding: 20px;
         display: flex;
         gap: 20px;
         
         .facility-table {
+          background-image: url('@/assets/base_bj.png');
+          background-size: 100% 100%;
+          background-position: center;
+          background-repeat: no-repeat;
           flex: 1;
-          background: #031542;
           border: 1px solid #07B9FF;
           border-radius: 4px;
           padding: 15px;
           h3 {
             font-size: 16px;
             color: #07B9FF;
-            margin: 0 0 15px 0;
             padding-bottom: 10px;
-            border-bottom: 1px solid #07B9FF;
           }
           
           .table-container {
-            height: 400px;
+            height: 380px;
             overflow-y: auto;
             /* 自定义滚动条样式 */
             &::-webkit-scrollbar {
         
         .park-images {
           width: 320px;
-          background: #031542;
+          background-image: url('@/assets/tupian_bj.png');
+          background-size: 100% 100%;
+          background-position: center;
+          background-repeat: no-repeat;
           border: 1px solid #07B9FF;
           border-radius: 4px;
           padding: 15px;
           h3 {
             font-size: 16px;
             color: #07B9FF;
-            margin: 0 0 15px 0;
             padding-bottom: 10px;
-            border-bottom: 1px solid #07B9FF;
           }
           
           .image-grid {
-            height:400px;
+            height:380px;
             overflow-y: auto;
             flex-direction: column;
             gap: 15px;

bigScreen3/src/views/dashboard/cpns/ProjectOverview.vue

     <el-dialog
       v-model="dialogVisible"
       width="70%"
-      height="70%"
+      height="60%"
       :close-on-click-modal="false"
       :show-close="true"
       :append-to-body="true"
       :modal="false"
-      style="background: rgba(0, 20, 40, 0.98);"
     >
       <InfoPopup :data="dialogData"  />
     </el-dialog>
 import { loadAMap } from '@/utils/amap.js'
 import { getPageListData } from '@/api/index'
 import markerIcon from '@/assets/icon4.png';
+import bj2 from '@/assets/bj2.png'
 import InfoPopup from './InfoPopup.vue';
 
 // 响应式数据
   }
 }
 
+/* 组件级别的 el-dialog 样式优化 */
+:global(.el-dialog) {
+  background-color: transparent !important;
+  background-image: url('@/assets/bj2.png') !important;
+  background-size: 100% 100% !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  // border: 2px solid #07B9FF !important;
+  // box-shadow: 0 0 20px rgba(7, 185, 255, 0.5) !important;
+}
+
+:global(.el-dialog__title) {
+  color: #ffffff !important;
+  font-weight: bold !important;
+}
+
+:global(.el-dialog__headerbtn .el-dialog__close) {
+  color: #ffffff !important;
+  font-size: 20px !important;
+}
+
+:global(.el-dialog__body) {
+  background-color: transparent !important;
+  padding: 20px !important;
+  color: #ffffff !important;
+}
+
 // 悬浮框出现动画
 @keyframes popupAppear {
   0% {

bigScreen3/src/views/dashboard/cpns/TypicalCase.vue

         fWorkorderid: item.fWorkorderid || ''
       }))
 
+    } else {
+      caseList.value = []
+      // useDefaultCaseData()
     }
   } catch (error) {
     console.error('获取典型案例数据失败:', error)

bigScreen3/src/views/dashboard/cpns/VideoSurveillance.vue

     <div v-if="isModalOpen" class="video-modal" @click.self="closeModal">
       <div class="video-modal-content">
         <video v-if="selectedVideo" :src="videoSrc" controls autoplay muted playsinline></video>
-        <div class="video-modal-title">{{ selectedVideo?.name }}</div>
+        <!-- <div class="video-modal-title">{{ selectedVideo?.name }}</div> -->
         <button class="video-modal-close" @click="closeModal">×</button>
       </div>
     </div>
 
   .video-modal-content {
     position: relative;
-    width: min(86vw, 1400px);
+    width: 70%;
     aspect-ratio: 16 / 9;
-    background: #0a1a2a;
-    border: 1px solid rgba(7, 185, 255, 0.6);
+    background-image: url('@/assets/bj2.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     border-radius: 6px;
     overflow: hidden;
 
     video {
+      padding: 4%;
       width: 100%;
       height: 100%;
-      object-fit: contain;
-      background: #000;
+      // 撑满父容器
+      object-fit: fill;
     }
 
     .video-modal-title {
       top: 6px;
       width: 32px;
       height: 32px;
-      border: 1px solid rgba(7, 185, 255, 0.6);
-      background: rgba(0, 30, 60, 0.6);
+      // border: 1px solid rgba(7, 185, 255, 0.3);
+      background: rgba(0, 30, 60, 0.2);
       color: #e6f0ff;
       font-size: 20px;
       line-height: 28px;
       border-radius: 4px;
       cursor: pointer;
+      padding: 0;
     }
   }
 }

bigScreen3/src/views/dashboard/cpns/WorkOrderList.vue

   position: fixed;
   z-index: 9999;
   inset: 0;
-  /* background: rgba(0, 10, 30, 0.8); */
   display: flex;
   align-items: center;
   justify-content: center;
 
 .project-info-content {
   position: relative;
-  width: min(90vw, 1200px);
-  max-height: 90vh;
-  background: linear-gradient(135deg, #001a33 0%, #003366 100%);
-  border: 2px solid #0099ff;
+  background-image: url('@/assets/bj2.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 70%;
+  height: 72vh;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0 0 30px rgba(0, 153, 255, 0.3);
-  backdrop-filter: blur(10px);
 }
 
 .project-info-header {
   text-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
   border-radius: 4px;
   display: inline-block;
+  margin-top: -20px;
 }
 
 .project-info-close {
 }
 
 .project-info-body {
-  padding: 20px;
+  padding:0 38px;
   overflow-y: auto;
   max-height: calc(90vh - 120px);
 }
 .table-container {
   width: 100%;
   overflow-x: auto;
-  background: rgba(0, 10, 30, 0.5);
   border: 1px solid rgba(0, 153, 255, 0.3);
   border-radius: 6px;
-  box-shadow: 0 0 20px rgba(0, 153, 255, 0.1);
+  height: 50vh;
 }
 
 /* 数据表格样式 */
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
-  padding: 15px 0;
-  border-top: 1px solid rgba(0, 153, 255, 0.3);
+  padding: 5px 0;
 }
 
 .pagination-info {