feat(设备详情): 添加设备详情弹窗组件并更新API地址

重构设备详情弹窗组件，支持从父组件传入设备数据并显示
修改环境配置中的API地址为生产环境

bigScreen3/.env.development

@@ -8,8 +8,8 @@ VITE_APP_ENV = 'development'
 # 若依管理系统/开发环境 http://192.168.1.15:8010/  http://123.56.29.119:8080  http://192.168.1.15:8120/ 1.194.161.64:8120
 
 
-VITE_APP_BASE_API = 'http://192.168.1.15:9090/'  
-# VITE_APP_BASE_API = 'http://39.164.159.226:9090/'   
+# VITE_APP_BASE_API = 'http://192.168.1.15:9090/'  
+VITE_APP_BASE_API = 'http://39.164.159.226:9090/'   
 
 # VITE_APP_BASE_API = 'http://1.194.161.64:8120/'    
 # VITE_APP_BASE_API = 'http://222.139.29.127:8120/'

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

@@ -1,70 +1,76 @@
 <template>
-  <div class="equipment-detail-container">
-    <!-- 左侧设备信息区域 -->
-    <div class="equipment-info-section">
-      <h3 class="section-title">• 设备基本信息</h3>
-      <div class="info-content">
-        <div class="info-grid">
-          <div class="info-item">
-            <span class="info-label">项目名称：</span>
-            <span class="info-value">{{ equipmentData.projectName }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">申请单位：</span>
-            <span class="info-value">{{ equipmentData.applicantUnit }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">项目地点：</span>
-            <span class="info-value">{{ equipmentData.projectLocation }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">地址：</span>
-            <span class="info-value">{{ equipmentData.address }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">开始时间：</span>
-            <span class="info-value">{{ equipmentData.startTime }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">联系人：</span>
-            <span class="info-value">{{ equipmentData.contactPerson }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">结束时间：</span>
-            <span class="info-value">{{ equipmentData.endTime }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">联系电话：</span>
-            <span class="info-value">{{ equipmentData.contactPhone }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">许可时间：</span>
-            <span class="info-value">{{ equipmentData.permitTime }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">借用绿地面积：</span>
-            <span class="info-value">{{ equipmentData.greenArea }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">许可文号：</span>
-            <span class="info-value">{{ equipmentData.permitNumber }}</span>
-          </div>
-          <div class="info-item full-width">
-            <span class="info-label">备注：</span>
-            <span class="info-value">{{ equipmentData.remarks }}</span>
+  <div v-if="visible" class="equipment-detail-container">
+    <div class="work-order-detail-header">
+      <h2>工单详情</h2>
+      <button class="work-order-detail-close" @click="handleClose">×</button>
+    </div>
+    <div class="equipment-detail-content">
+      <!-- 左侧设备信息区域 -->
+      <div class="equipment-info-section">
+        <h3 class="section-title">• 设备基本信息</h3>
+        <div class="info-content">
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="info-label">设备名称：</span>
+              <span class="info-value">{{ equipmentData.name }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">申请项目：</span>
+              <span class="info-value">{{ equipmentData.parkName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">设备地点：</span>
+              <span class="info-value">{{ equipmentData.latitude + ',' + equipmentData.longitude }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">地址：</span>
+              <span class="info-value">{{ equipmentData.address }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">添加时间：</span>
+              <span class="info-value">{{ equipmentData.createdTime || '' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">修改人：</span>
+              <span class="info-value">{{ equipmentData.updatedName || '' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">修改时间：</span>
+              <span class="info-value">{{ equipmentData.updatedTime || '' }}</span>
+            </div>
+            <!-- <div class="info-item">
+              <span class="info-label">联系电话：</span>
+              <span class="info-value">{{ equipmentData.contactPhone }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">许可时间：</span>
+              <span class="info-value">{{ equipmentData.permitTime }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">借用绿地面积：</span>
+              <span class="info-value">{{ equipmentData.greenArea }}</span>
+            </div> -->
+            <!-- <div class="info-item">
+              <span class="info-label">许可文号：</span>
+              <span class="info-value">{{ equipmentData.permitNumber }}</span>
+            </div> -->
+            <div class="info-item full-width">
+              <span class="info-label">备注：</span>
+              <span class="info-value">{{ equipmentData.remarks }}</span>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    
-    <!-- 右侧设备图片区域 -->
-    <div class="equipment-image-section">
-      <h3 class="section-title">• 设备图片</h3>
-      <div class="image-container">
-        <div class="image-scroll-area">
-          <div class="image-grid">
-            <div v-for="(image, index) in equipmentImages" :key="index" class="image-item">
-              <img :src="image.url" :alt="`设备图片 ${index + 1}`" class="equipment-image" />
+
+      <!-- 右侧设备图片区域 -->
+      <div class="equipment-image-section">
+        <h3 class="section-title">• 设备图片</h3>
+        <div class="image-container">
+          <div class="image-scroll-area">
+            <div class="image-grid">
+              <div v-for="(image, index) in equipmentData.images" :key="index" class="image-item">
+                <img :src="image.url" :alt="`设备图片 ${index + 1}`" class="equipment-image" />
+              </div>
             </div>
           </div>
         </div>
@@ -74,24 +80,47 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, defineProps, defineEmits, watch } from 'vue'
+
+// 定义 props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  equipmentDetail: {
+    type: Object,
+    default: {},
+  }
+})
+
+// 定义 emit
+const emit = defineEmits(['close'])
+
+// 关闭弹窗方法
+const handleClose = () => {
+  emit('close')
+}
 
 // 设备基本信息数据
-const equipmentData = ref({
-  projectName: '巡检机器人',
-  applicantUnit: '绿州世博园',
-  projectLocation: '踏北侧（路往东70米后左转）',
-  address: '河南省郑州市航空港经济综合实验区苑陵路140号',
-  startTime: '2025-10-10',
-  endTime: '2025-11-30',
-  permitTime: '2025-10-10',
-  permitNumber: '[2025] 第372号',
-  contactPerson: '张三',
-  contactPhone: '18292904942',
-  greenArea: '112',
-  remarks: '设备用于园区安全巡检，每小时自动巡检一次'
+const equipmentData = ref({});
+
+// 监听visible变化，当显示时获取数据
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    equipmentData.value = props.equipmentDetail;
+  }
 })
 
+// 监听工单ID变化，重新获取数据
+watch(() => props.equipmentDetail, (newId) => {
+  equipmentData.value = props.equipmentDetail;
+    console.log(props.equipmentDetail, 'props.equipmentDetail');
+
+}, true)
+
+
+
 // 设备图片数据
 const equipmentImages = ref([
   {
@@ -127,46 +156,119 @@ const equipmentImages = ref([
 
 <style scoped>
 .equipment-detail-container {
+  position: fixed;
+  z-index: 9999;
+  inset: 0;
+  /* background: rgba(0, 10, 30, 0.8); */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.equipment-detail-content {
+    position: relative;
+    width: min(90vw, 1400px);
+    max-height: calc(90vh - 60px); /* 减去头部高度，避免超出视口 */
+    margin-top: 0;
+    background: linear-gradient(135deg, #001a33 0%, #003366 100%);
+    border: 2px solid #0099ff;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: none; /* 移除顶部边框，与头部对接 */
+    overflow: hidden;
+    box-shadow: 0 0 30px rgba(0, 153, 255, 0.3);
+    backdrop-filter: blur(10px);
+    /* 添加flex布局使其子元素水平排列 */
     display: flex;
     gap: 20px;
-    width: 100%;
-    height: 70vh;
-    padding: 20px;
-    box-sizing: border-box;
-    background-color: #031542;
-  }
-
-/* 左侧设备信息样式 */
-  .equipment-info-section {
-    flex: 2;
-    background-color: #031542;
-    border: 1px solid #056DC5;
-    border-radius: 8px;
     padding: 20px;
-    box-shadow: inset 0 0 10px rgba(5, 109, 197, 0.3);
-    height: 100%;
-    box-sizing: border-box;
     overflow-y: auto;
-    /* 隐藏左侧滚动条 */
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-  
-  .equipment-info-section::-webkit-scrollbar {
-    display: none;
   }
 
-  /* 右侧设备图片样式 */
-  .equipment-image-section {
-    flex: 1;
-    background-color: #031542;
-    border: 1px solid #056DC5;
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: inset 0 0 10px rgba(5, 109, 197, 0.3);
-    height: 100%;
-    box-sizing: border-box;
-  }
+.work-order-detail-header {
+      position: relative;
+      width: min(90vw, 1400px);
+      box-sizing: border-box;
+      z-index: 10000;
+      padding: 12px 20px;
+      background: linear-gradient(135deg, #001a33 0%, #003366 100%);
+      border: 2px solid #0099ff;
+      border-bottom: none;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+.work-order-detail-header h2 {
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  padding: 4px 45px;
+  background: linear-gradient(90deg, rgba(0, 153, 255, 0.05) 0%, rgba(0, 153, 255, 0.9) 50%, rgba(0, 153, 255, 0.05) 100%);
+  text-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.work-order-detail-close {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 30px;
+  height: 30px;
+  border: none;
+  background: transparent;
+  color: #ffffff;
+  font-size: 20px;
+  line-height: 30px;
+  text-align: center;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 0;
+}
+
+.work-order-detail-close:hover {
+  background: rgba(0, 40, 80, 0.8);
+  box-shadow: 0 0 10px rgba(0, 153, 255, 0.6);
+}
+
+/* 左侧设备信息样式 - 占三分之二宽度 */
+.equipment-info-section {
+  flex: 2; /* 确保占总宽度的2/3 */
+  background-color: #031542;
+  border: 1px solid #056DC5;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: inset 0 0 10px rgba(5, 109, 197, 0.3);
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  /* 隐藏左侧滚动条 */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.equipment-info-section::-webkit-scrollbar {
+  display: none;
+}
+
+/* 右侧设备图片样式 - 占三分之一宽度 */
+.equipment-image-section {
+  flex: 1; /* 确保占总宽度的1/3 */
+  background-color: #031542;
+  border: 1px solid #056DC5;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: inset 0 0 10px rgba(5, 109, 197, 0.3);
+  height: 100%;
+  box-sizing: border-box;
+}
 
 /* 区域标题样式 */
 .section-title {
@@ -190,11 +292,11 @@ const equipmentImages = ref([
 }
 
 .info-item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
-  }
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
 
 .info-item.full-width {
   grid-column: span 2;
@@ -227,8 +329,10 @@ const equipmentImages = ref([
   overflow-y: auto;
   overflow-x: hidden;
   /* 隐藏滚动条的基础设置 */
-  -ms-overflow-style: none; /* IE和Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  /* IE和Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
 
 /* 隐藏Chrome、Safari等浏览器的滚动条 */
@@ -270,11 +374,15 @@ const equipmentImages = ref([
   .equipment-detail-container {
     flex-direction: column;
   }
-  
+
+  .equipment-detail-content {
+    flex-direction: column;
+  }
+
   .info-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .info-item.full-width {
     grid-column: span 1;
   }

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

@@ -308,6 +308,11 @@
       </div>
     </div>
   </div>
+  <EquipmentDetail
+      :visible="equipmentDetailVisible"
+      :equipmentDetail="equipmentInfo"
+      @close="equipmentDetailVisible = false"  
+    />
 </template>
 
 <style scoped>
@@ -406,7 +411,7 @@ import { getPageListData } from '@/api/index'
 import icon8_1 from '@/assets/icon4.png'
 import markerIcon from '@/assets/icon4.png'
 import personnelIcon from '@/assets/icon5.png'
-
+import EquipmentDetail from '@/views/dashboard/cpns/EquipmentDetail.vue'
 // 定义 props
 const props = defineProps({
   selectedProjectId: {
@@ -425,6 +430,8 @@ const popupVisible = ref(false)
 const popupPosition = ref({ x: 0, y: 0 })
 const popupData = ref({})
 
+const equipmentDetailVisible = ref(false)
+
 // 设备数据
 const deviceData = ref([
   { name: '传感器在线率', value: '502/520个' },  // 传感器在线率
@@ -664,6 +671,7 @@ const showPersonnelInfo = (personnelData, pixel) => {
   popupVisible.value = true
 }
 
+const equipmentInfo = ref({})
 // 显示设备信息悬浮框
 const showEquipmentInfo = (equipmentData, pixel) => {
   const rect = mapContainer.value.getBoundingClientRect()
@@ -679,7 +687,10 @@ const showEquipmentInfo = (equipmentData, pixel) => {
   popupPosition.value = { x, y }
   popupData.value = equipmentData
   console.log("设备信息:", equipmentData)
-  popupVisible.value = true
+  equipmentInfo.value = equipmentData
+  equipmentDetailVisible.value = true
+  // popupVisible.value = true
+  // 弹出设备详情页面
 }
 
 // 关闭弹出框