xiaozhiyong/safePower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
xiaozhiyong
2026-06-05 09:52:51 +08:00
parent 1890cca75f
commit d3e9fcce4c
4 changed files with 46 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@@ -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 = https://www.xingoil.com/api
VITE_BASE_PATH = http://192.168.110.98:8888
# VITE_BASE_PATH = https://www.xingoil.com/api
VITE_POSITION = open
VITE_EDITOR = code
// VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm

2
src/view/equipment/list/components/detail/components/info/index.vue
View File

@@ -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>

53
src/view/equipment/list/components/detail/components/trend/index.vue
View File

@@ -14,8 +14,8 @@
/>
<!-- <el-button type="primary" icon="Refresh" @click="resetDateRange">重置</el-button> -->
</div>
<el-row :gutter="16">
<el-col v-for="item in chartList" :key="item.key" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
<el-row v-if="isReady" :gutter="16">
<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) {
console.error('[Trend] 请求失败', e)
}
} catch (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
nextTick(() => {
// 延迟执行确保容器有尺寸
setTimeout(() => {
triggerResize()
}, 100)
})
// 监听容器尺寸变化
// 父级用 v-show 切换 Tab，组件挂载时可能是 display:None（尺寸为 0），
// 需要等容器有实际尺寸后再渲染 v-chart，否则 ECharts 初始化时会报
// "Can't get DOM width or height"
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()
})

29
src/view/equipment/list/components/list/index.vue
View File

@@ -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>
<el-button size="small" type="primary" link icon="CopyDocument" @click.stop="copyDeviceId(item.cbId)">
<span class="device-id">ID:{{ item.ID }}</span>
<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()
}