wqy
/
central-control
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实现当前故障前端展示

Browse Source
绿色触摸屏
wangqiyang 3 weeks ago
parent c249539205
commit ba04609631
1 changed files with 172 additions and 26 deletions
Show Stats Download Patch File Download Diff File

198
src/views/Monitoring/index.vue
Unescape View File

@ -76,6 +76,28 @@
<el-button style="margin-bottom: 0;" class="mode-button active">{{ info.Mode ? '手动' : '自动' }}</el-button>
</div>
</div>
<div class="fault-section">
<div class="fault-header">
<div>
<div class="fault-title">当前故障</div>
<div class="fault-subtitle">当前扫描设备数：{{ scanDeviceCount }}</div>
</div>
<el-button class="fault-refresh-button" :loading="faultRefreshing" @click="refreshCurrentFaults">
<el-icon>
<RefreshRight />
</el-icon>
刷新当前故障
</el-button>
</div>
<div v-if="currentFaults.length" class="fault-list">
<div v-for="fault in currentFaults" :key="`${fault.loop_idx}-${fault.code}-${fault.message}`" class="fault-item">
<span class="fault-loop">回路{{ fault.loop_idx }}</span>
<span class="fault-message">{{ fault.message }}</span>
<span v-if="fault.code" class="fault-code">{{ fault.code }}</span>
</div>
</div>
<div v-else class="fault-empty">当前无故障</div>
</div>
<div class="circuit-section">
<!-- 上排回路 -->
<div class="circuit-row">
@ -202,7 +224,7 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import RPC from '@/utils/rpc'
import dayjs from 'dayjs'
@ -217,6 +239,7 @@ const systemRuntime = ref('38分钟')
const brightnessDialogVisible = ref(false)
const currentBrightness = ref(50)
const selectedChannelName = ref(null)
const faultRefreshing = ref(false)
const week = ref('')
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
@ -282,6 +305,7 @@ const energyParams = ref({
const info = ref({
"Mode": 0,
"scan_device_count": 10,
"backup_byte1": 0,
"Loops": [
{
@ -378,35 +402,68 @@ const info = ref({
"backup_byte4": 0
})
const scanDeviceCount = computed(() => {
return info.value?.scan_device_count ?? info.value?.ScanDeviceCount ?? info.value?.Loops?.length ?? 0
})
const currentFaults = computed(() => {
const loops = info.value?.Loops || []
return loops.flatMap((loop, index) => {
const loopIdx = loop.loop_idx || loop.LoopIdx || loop.index + 1 || index + 1
const faults = loop.faults || loop.Faults || []
if (Array.isArray(faults) && faults.length > 0) {
return faults.map((fault) => ({
loop_idx: fault.loop_idx || loopIdx,
message: fault.message || fault.fault_msg || fault.Message || '',
code: fault.code || fault.fault_code || fault.Code || '',
})).filter((fault) => fault.message)
}
const message = loop.fault_msg || loop.FaultMsg
if ((loop.has_fault || loop.HasFault) && message) {
return [{
loop_idx: loopIdx,
message,
code: loop.fault_code || loop.FaultCode || '',
}]
}
return []
})
})
const loadDeviceStatus = () => {
return RPC.post('/m9z/getDeviceStatus2', { comm_uid: commit_uid }).then((res) => {
info.value = res
})
}
const loadPowerData = () => {
return RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
powerPhases.value[0].voltage = res.aVoltage + 'V'
powerPhases.value[0].current = res.aElectricCurrent + 'A'
powerPhases.value[0].power = res.aPower + 'kW'
powerPhases.value[0].factor = res.aPowerFactor
powerPhases.value[1].voltage = res.bVoltage + 'V'
powerPhases.value[1].current = res.bElectricCurrent + 'A'
powerPhases.value[1].power = res.bPower + 'kW'
powerPhases.value[1].factor = res.bPowerFactor
powerPhases.value[2].voltage = res.cVoltage + 'V'
powerPhases.value[2].current = res.cElectricCurrent + 'A'
powerPhases.value[2].power = res.cPower + 'kW'
powerPhases.value[2].factor = res.cPowerFactor
energyParams.value.activeEnergy = res.activeEnergy + 'kW·h'
energyParams.value.activePower = res.activePower + 'kW'
energyParams.value.powerFactor = res.powerFactor
})
}
const getInfo = () => {
// RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => {
// info.value = res
// })
RPC.post('/m9z/getDeviceStatus2', { comm_uid: commit_uid }).then((res) => {
// 直流电流、电源、功率
info.value = res
}).finally(() => {
RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
powerPhases.value[0].voltage = res.aVoltage + 'V'
powerPhases.value[0].current = res.aElectricCurrent + 'A'
powerPhases.value[0].power = res.aPower + 'kW'
powerPhases.value[0].factor = res.aPowerFactor
powerPhases.value[1].voltage = res.bVoltage + 'V'
powerPhases.value[1].current = res.bElectricCurrent + 'A'
powerPhases.value[1].power = res.bPower + 'kW'
powerPhases.value[1].factor = res.bPowerFactor
powerPhases.value[2].voltage = res.cVoltage + 'V'
powerPhases.value[2].current = res.cElectricCurrent + 'A'
powerPhases.value[2].power = res.cPower + 'kW'
powerPhases.value[2].factor = res.cPowerFactor
energyParams.value.activeEnergy = res.activeEnergy + 'kW·h'
energyParams.value.activePower = res.activePower + 'kW'
energyParams.value.powerFactor = res.powerFactor
})
})
return loadDeviceStatus().finally(() => loadPowerData())
// RPC.post('/m9z/getDeviceSunRiseTime', { comm_uid: commit_uid }).then(res => {
// sunriseTime.value = res.Sunrise ? dayjs(res.Sunrise).format('HH:mm:ss') : ''
@ -415,6 +472,17 @@ const getInfo = () => {
}
getInfo()
const refreshCurrentFaults = () => {
faultRefreshing.value = true
loadDeviceStatus()
.then(() => {
ElMessage.success('当前故障已刷新')
})
.finally(() => {
faultRefreshing.value = false
})
}
let timer = null
RPC.post('/getMessageInterval').then(res => {
console.log(`获取消息间隔成功，消息间隔为${res * 1000}毫秒`)
@ -695,6 +763,84 @@ onUnmounted(() => {
font-weight: 500;
}
.fault-section {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 10px 14px;
color: #fff;
}
.fault-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.fault-title {
font-size: 16px;
font-weight: 600;
}
.fault-subtitle {
margin-top: 4px;
font-size: 12px;
color: rgba(255, 255, 255, 0.68);
}
.fault-refresh-button {
flex-shrink: 0;
height: 34px;
border-radius: 6px;
border: none;
color: #fff;
background: linear-gradient(180deg, rgba(51, 224, 188, 1) 0%, rgba(5, 149, 117, 1) 100%);
}
.fault-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.fault-item {
display: flex;
align-items: center;
gap: 8px;
min-height: 28px;
padding: 4px 8px;
border-radius: 6px;
background: rgba(220, 53, 69, 0.16);
border: 1px solid rgba(255, 120, 120, 0.35);
}
.fault-loop {
font-size: 12px;
color: #ffd4d4;
}
.fault-message {
font-size: 13px;
font-weight: 600;
color: #fff;
}
.fault-code {
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
color: #ffd4d4;
background: rgba(255, 255, 255, 0.1);
}
.fault-empty {
margin-top: 10px;
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
}
.circuit-section {
display: flex;
flex-direction: column;

Write Preview
Loading…
Cancel
Save