<template>
  <d2-container><div class="monitor-grid"><el-card v-for="server in serverData" :key="server.id || server.name" class="server-card"><div slot="header"><strong>{{ server.name || server.server_name }}</strong><span> ({{ server.url }}:{{ server.port }}) </span><el-tag :type="server.status === 'online' ? 'success' : 'info'">{{ server.status || 'offline' }}</el-tag></div><el-row :gutter="12"><el-col :span="6" v-for="device in server.devices" :key="device.device_name"><el-card :class="device.deviceStatus ? 'device-online' : 'device-offline'"><div slot="header">{{ device.device_name }}</div><p>{{ $t(key('device_type')) }}: {{ device.device_type }}</p><p>{{ $t(key('ip_port')) }}: {{ device.config }}</p><p>{{ $t(key('activity_time')) }}: {{ device.startTime }}</p><p>{{ $t(key('success_count')) }}: {{ device.success }}</p><p>{{ $t(key('failure_count')) }}: {{ device.failed }}</p><el-button size="mini" @click="setDeviceExec(device, 'device_stop', server)">{{ $t(key('device_stop')) }}</el-button><el-button size="mini" type="primary" @click="setDeviceExec(device, 'device_continue', server)">{{ $t(key('device_continue')) }}</el-button></el-card></el-col></el-row></el-card></div></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: 'scada-edgeservermonitor', mixins: [i18nMixin('page.scada_manage.basic_configuration.edgeservermonitor')], data () { return { serverData: [], timing: null } }, mounted () { this.getServe(); this.timing = setInterval(this.getServe, 30000) }, beforeDestroy () { clearInterval(this.timing) }, methods: { async setDeviceExec (device, command, server) { await setServerExec({ action: 'exec', server_id: server.id, command, device_name: device.device_name }); this.$message.success(this.$t(this.key('request_success'))); this.getServe() }, async getServe () { const servers = await queryServers(); this.serverData = Array.isArray(servers) ? servers : (servers.data || []); this.serverData.forEach((server, index) => { getServeDeviceMonitoring(`http://${server.url}:${server.port}`).then(status => { if (status.IsSuccess) { const data = status.Content; unset(data, '__status'); const devices = map(data, item => { const config = (item.__config || '').split(' '); return { config: config.length > 0 ? config[2] : '', startTime: item.__startTime, success: item.__success, failed: item.__failed, deviceStatus: item.__requestEnable, device_name: item.__name, device_type: config.length > 0 ? config[0] : '' } }); this.$set(this.serverData[index], 'devices', devices); this.$set(this.serverData[index], 'status', 'online') } }).catch(() => { this.$set(this.serverData[index], 'devices', []); this.$set(this.serverData[index], 'status', 'offline') }) }) } } }
</script><style scoped>.server-card{margin-bottom:12px}.device-online{background:#f0f9eb}.device-offline{background:#f5f7fa}</style>
