<template>
  <d2-container>
    <div class="monitor-head"><el-button size="mini" icon="el-icon-refresh" :loading="loading" @click="fetchData">{{ $t(key('refresh')) }}</el-button><span>{{ $t(key('last_refresh_time')) }}: {{ lastRefresh }}</span></div>
    <el-collapse v-model="activeNames"><el-collapse-item v-for="device in devices" :key="device.device_name" :name="device.device_name"><template #title><strong>{{ device.device_name }}</strong><el-tag size="mini" :type="device.status === 'online' ? 'success' : 'info'" class="device-tag">{{ device.status || 'offline' }}</el-tag><el-button v-if="device.server_id" type="danger" size="mini" @click.stop="stopDevice(device)">{{ $t(key('stop_device')) }}</el-button></template><el-descriptions :column="4" border><el-descriptions-item :label="$t(key('device_type'))">{{ device.device_type }}</el-descriptions-item><el-descriptions-item :label="$t(key('ip_port'))">{{ device.config }}</el-descriptions-item><el-descriptions-item :label="$t(key('activity_time'))">{{ device.startTime }}</el-descriptions-item><el-descriptions-item :label="$t(key('success_count'))">{{ device.success }}</el-descriptions-item><el-descriptions-item :label="$t(key('failure_count'))">{{ device.failed }}</el-descriptions-item></el-descriptions></el-collapse-item></el-collapse>
  </d2-container>
</template><script>
import { i18nMixin } from '@/composables/useI18n'
import { queryServers, getServeDeviceMonitoring, setServerExec } from '@/api/scada-manage/edge-manager'
import { unset, map } from 'lodash'
export default { name: 'battery-device-gather-monitor', mixins: [i18nMixin('page.scada_manage.device_gather.battery_device_gather_monitor')], data () { return { loading: false, activeNames: [], devices: [], timing: null, lastRefresh: '' } }, mounted () { this.fetchData(); this.timing = setInterval(this.fetchData, 30000) }, beforeDestroy () { clearInterval(this.timing) }, methods: { async fetchData () { this.loading = true; try { const servers = await queryServers(); const list = Array.isArray(servers) ? servers : (servers.data || []); const devices = []; for (const server of list) { try { const status = await getServeDeviceMonitoring(`http://${server.url}:${server.port}`); if (status.IsSuccess) { const data = status.Content; unset(data, '__status'); map(data, item => { const config = (item.__config || '').split(' '); devices.push({ server_id: server.id, status: 'online', config: config.length > 0 ? config[2] : '', startTime: item.__startTime, success: item.__success, failed: item.__failed, device_name: item.__name, device_type: config.length > 0 ? config[0] : '' }) }) } } catch (e) {} } this.devices = devices; this.activeNames = devices.map(item => item.device_name); this.lastRefresh = new Date().toLocaleString() } finally { this.loading = false } }, async stopDevice (device) { await setServerExec({ action: 'exec', server_id: device.server_id, command: 'stop_device', device_name: device.device_name }); this.$message.success(this.$t(this.key('request_success'))); this.fetchData() } } }
</script><style scoped>.monitor-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}.device-tag{margin-left:12px}</style>
