更新

.env.development

@@ -4,8 +4,8 @@ VITE_SERVER_PORT = 8888
 VITE_BASE_API = /api
 VITE_FILE_API = /api
 # VITE_BASE_PATH = http://192.168.1.9:8888
-# VITE_BASE_PATH = http://192.168.110.98:8888
+VITE_BASE_PATH = http://192.168.110.98:8888
-VITE_BASE_PATH = https://www.xingoil.com/api
+# VITE_BASE_PATH = https://www.xingoil.com/api
 VITE_POSITION = open
 VITE_EDITOR = code
 // VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm

src/view/equipment/list/components/detail/components/info/index.vue

@@ -4,7 +4,7 @@
       <h3>基本信息</h3>
       <div class="detail-row">
         <span class="detail-label">设备ID：</span>
-        <span class="detail-value">{{ device?.cbId || '未设置' }}</span>
+        <span class="detail-value">{{ device?.ID || '未设置' }}</span>
       </div>
       <div class="detail-row">
         <span class="detail-label">网关ID：</span>

src/view/equipment/list/components/detail/components/trend/index.vue

@@ -14,8 +14,8 @@
       />
       <!-- <el-button type="primary" icon="Refresh" @click="resetDateRange">重置</el-button> -->
     </div>
-    <el-row :gutter="16">
+    <el-row v-if="isReady" :gutter="16">
-      <el-col v-for="item in chartList" :key="item.key" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
+      <el-col v-for="(item, index) in chartList" :key="item.key" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
         <div class="chart-card">
           <div class="chart-header">
             <span class="chart-title">{{ item.title }}</span>
@@ -48,8 +48,19 @@
 
   // 容器 ref
   const chartContainerRef = ref(null)
+  // 容器就绪状态：父级用 v-show 切换时，初始为 display:None，宽度为 0，需要等容器有尺寸后再渲染图表
+  const isReady = ref(false)
   let resizeObserver = null
 
+  // 检测容器是否已具备尺寸
+  const checkContainerReady = () => {
+    if (isReady.value || !chartContainerRef.value) return
+    const { clientWidth, clientHeight } = chartContainerRef.value
+    if (clientWidth > 0 && clientHeight > 0) {
+      isReady.value = true
+    }
+  }
+
   // 触发图表 resize
   const triggerResize = () => {
     // 触发 window resize 事件让 vue-echarts autoresize 生效
@@ -97,11 +108,6 @@
     // const startTime = formatDateTime(dateRange.value[0])
     // const endTime = formatDateTime(dateRange.value[1])
     try {
-      console.log('[Trend] 请求设备详情数据:', {
-        deviceId
-        // startTime,
-        // endTime
-      })
       const result = await serve.getDeviceDetailsListByPage({
         page: 1,
         pageSize: 999,
@@ -109,15 +115,12 @@
         startCreatedAt: dateRange.value[0],
         endCreatedAt: dateRange.value[1]
       })
-      console.log('[Trend] 接口返回:', result)
+
       if (result.code === 0) {
         // 提取数据
         const list = result.data.list || []
         // 调试：打印第一条数据的所有字段
-        if (list.length > 0) {
+
-          console.log('[Trend] 第一条数据的所有字段:', list[0])
-          console.log('[Trend] 字段名列表:', Object.keys(list[0]))
-        }
         const timeData = []
         const chartData = {
           voltage: [], // 电压（V）
@@ -143,16 +146,13 @@
         // 更新图表
         updateChartData(timeData, chartData)
       }
-    } catch (e) {
+    } catch (e) {}
-      console.error('[Trend] 请求失败', e)
-    }
   }
 
   // 监听 device 变化，重新请求数据
   watch(
     () => props.device,
     (newDevice, oldDevice) => {
-      console.log('[Trend] device 变化:', newDevice)
       if (newDevice && (!oldDevice || newDevice.ID !== oldDevice.ID)) {
         getTableData()
       }
@@ -164,18 +164,15 @@
   )
 
   onMounted(() => {
-    // 等待 DOM 渲染完成后触发 resize
+    // 父级用 v-show 切换 Tab，组件挂载时可能是 display:None（尺寸为 0），
-    nextTick(() => {
+    // 需要等容器有实际尺寸后再渲染 v-chart，否则 ECharts 初始化时会报
-      // 延迟执行确保容器有尺寸
+    // "Can't get DOM width or height"
-      setTimeout(() => {
-        triggerResize()
-      }, 100)
-    })
-
-    // 监听容器尺寸变化
     if (chartContainerRef.value) {
+      // 先检查一次（处理初始就是可见的情况）
+      nextTick(checkContainerReady)
+      // 监听容器尺寸变化：从 0 变为有尺寸时（例如切到当前 Tab）触发 isReady
       resizeObserver = new ResizeObserver(() => {
-        triggerResize()
+        checkContainerReady()
       })
       resizeObserver.observe(chartContainerRef.value)
     }
@@ -199,7 +196,7 @@
   // 日期变化处理
   const handleDateChange = (val) => {
     if (val && val.length === 2) {
-      console.log('[Trend] 日期范围:', val)
+      // console.log('[Trend] 日期范围:', val)
       // 触发图表 resize
       nextTick(() => {
         triggerResize()
@@ -210,7 +207,7 @@
   // 重置日期
   const resetDateRange = () => {
     dateRange.value = []
-    console.log('[Trend] 重置日期')
+
     nextTick(() => {
       triggerResize()
     })

src/view/equipment/list/components/list/index.vue

@@ -2,12 +2,22 @@
   <div>
     <div class="gva-search-box">
       <el-form ref="searchForm" :inline="true" :model="searchInfo">
+        <el-form-item label="设备ID">
+          <el-input v-model="searchInfo.ID" placeholder="请输入" clearable />
+        </el-form-item>
         <el-form-item label="设备状态">
           <el-select v-model="searchInfo.deviceStatus" clearable placeholder="请选择">
             <el-option label="合闸" :value="1" />
             <el-option label="分闸" :value="0" />
           </el-select>
         </el-form-item>
+        <el-form-item label="协议">
+          <el-select v-model="searchInfo.protocol" clearable placeholder="请选择">
+            <el-option label="HTTP" value="HTTP" />
+            <el-option label="UDP" value="UDP" />
+            <el-option label="HEX" value="HEX" />
+          </el-select>
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
           <el-button icon="refresh" @click="onReset"> 重置 </el-button>
@@ -57,20 +67,13 @@
             </div>
             <div class="device-name">{{ item.cbTypeName }}</div>
             <div class="device-id-row">
-              <span class="device-id">ID:{{ item.cbId }}</span>
+              <span class="device-id">ID:{{ item.ID }}</span>
-              <el-button size="small" type="primary" link icon="CopyDocument" @click.stop="copyDeviceId(item.cbId)">
+              <el-button size="small" type="primary" link icon="CopyDocument" @click.stop="copyDeviceId(item.ID)">
               </el-button>
             </div>
             <div class="device-location">
               <el-icon><LocationInformation /></el-icon>
               <span>{{ item.gatewayMac }}</span>
-              <!-- <el-button
-                size="small"
-                type="primary"
-                link
-                icon="CopyDocument"
-                @click.stop="copyDeviceId(item.cbId)"
-              ></el-button> -->
             </div>
             <div class="device-channels">
               <el-icon><Postcard /></el-icon>
@@ -110,7 +113,9 @@
   const emit = defineEmits(['select-device'])
 
   const searchInfo = ref({
-    deviceStatus: ''
+    deviceStatus: '',
+    protocol: '',
+    ID: ''
   })
 
   const page = ref(1)
@@ -204,7 +209,9 @@
 
   const onReset = () => {
     searchInfo.value = {
-      deviceStatus: ''
+      deviceStatus: '',
+      protocol: '',
+      ID: ''
     }
     getTableData()
   }