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

增加加载状态

Browse Source
main
Lufaneng 8 months ago
parent fc09028b21
commit a659ba0f65
2 changed files with 75 additions and 57 deletions
Show Stats Download Patch File Download Diff File

18
src/views/HandleControl/index.vue
Unescape View File

@ -20,7 +20,7 @@
<!-- 左侧电力参数区域 --> <!-- 左侧电力参数区域 -->
<div class="power-section"> <div class="power-section">
<!-- ABC三相电力参数 --> <!-- ABC三相电力参数 -->
<div class="power-params"> <div class="power-params" v-loading="phaseLoading" element-loading-background="rgba(122, 122, 122, 0.8)">
<div v-for="phase in powerPhases" :key="phase.name" class="phase-card"> <div v-for="phase in powerPhases" :key="phase.name" class="phase-card">
<div class="phase-name"><span>{{ phase.name }}</span>相</div> <div class="phase-name"><span>{{ phase.name }}</span>相</div>
<div class="param-list"> <div class="param-list">
@ -68,7 +68,7 @@
</div> </div>
<!-- 回路控制区域 --> <!-- 回路控制区域 -->
<div class="circuit-section"> <div class="circuit-section" v-loading="infoLoading" element-loading-background="rgba(122, 122, 122, 0.8)">
<!-- 上排回路 --> <!-- 上排回路 -->
<div class="circuit-row"> <div class="circuit-row">
<div v-for="(circuit, index) in info.loops.slice(0, 5)" :key="circuit.name" class="circuit-item"> <div v-for="(circuit, index) in info.loops.slice(0, 5)" :key="circuit.name" class="circuit-item">
@ -99,7 +99,7 @@
</div> </div>
<!-- 调光通道区域 --> <!-- 调光通道区域 -->
<div class="dimming-section"> <div class="dimming-section" v-loading="infoLoading" element-loading-background="rgba(122, 122, 122, 0.8)">
<!-- 上排调光通道 --> <!-- 上排调光通道 -->
<div class="dimming-row"> <div class="dimming-row">
<div v-for="(channel, index) in info.loops.slice(0, 5)" :key="channel.name" class="dimming-item"> <div v-for="(channel, index) in info.loops.slice(0, 5)" :key="channel.name" class="dimming-item">
@ -123,7 +123,7 @@
</div> </div>
<!-- 右侧控制面板 --> <!-- 右侧控制面板 -->
<div class="control-panel"> <div class="control-panel" v-loading="infoLoading" element-loading-background="rgba(122, 122, 122, 0.8)">
<!-- 切换模式 --> <!-- 切换模式 -->
<div class="control-group"> <div class="control-group">
<div class="control-title"> <div class="control-title">
@ -251,7 +251,7 @@ const setDeviceTime = () => {
const week = ref('') const week = ref('')
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const phaseLoading = ref(true)
RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => { RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
powerPhases.value[0].voltage = res.aVoltage + 'V' powerPhases.value[0].voltage = res.aVoltage + 'V'
powerPhases.value[0].current = res.aElectricCurrent + 'A' powerPhases.value[0].current = res.aElectricCurrent + 'A'
@ -271,6 +271,8 @@ RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
energyParams.value.activeEnergy = res.activeEnergy + 'kW·h' energyParams.value.activeEnergy = res.activeEnergy + 'kW·h'
energyParams.value.activePower = res.activePower + 'kW' energyParams.value.activePower = res.activePower + 'kW'
energyParams.value.powerFactor = res.powerFactor energyParams.value.powerFactor = res.powerFactor
}).finally(() => {
phaseLoading.value = false
}) })
// 电力参数数据 // 电力参数数据
@ -404,7 +406,9 @@ const info = ref({
}) })
const isSync = ref(true) const isSync = ref(true)
const infoLoading = ref(false)
const getInfo = () => { const getInfo = () => {
infoLoading.value = true
isSync.value = true isSync.value = true
RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => { RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => {
info.value = res info.value = res
@ -413,12 +417,14 @@ const getInfo = () => {
}, 1000); }, 1000);
}).finally(() => { }).finally(() => {
isInitData.value = false isInitData.value = false
infoLoading.value = false
}) })
} }
getInfo() getInfo()
const refresh = () => { const refresh = () => {
getInfo() getInfo()
phaseLoading.value = true
RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => { RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
powerPhases.value[0].voltage = res.aVoltage + 'V' powerPhases.value[0].voltage = res.aVoltage + 'V'
powerPhases.value[0].current = res.aElectricCurrent + 'A' powerPhases.value[0].current = res.aElectricCurrent + 'A'
@ -438,6 +444,8 @@ const refresh = () => {
energyParams.value.activeEnergy = res.activeEnergy + 'kW·h' energyParams.value.activeEnergy = res.activeEnergy + 'kW·h'
energyParams.value.activePower = res.activePower + 'kW' energyParams.value.activePower = res.activePower + 'kW'
energyParams.value.powerFactor = res.powerFactor energyParams.value.powerFactor = res.powerFactor
}).finally(() => {
phaseLoading.value = false
}) })
RPC.post('/m9z/getDeviceSunRiseTime', { comm_uid: commit_uid }).then(res => { RPC.post('/m9z/getDeviceSunRiseTime', { comm_uid: commit_uid }).then(res => {
sunriseTime.value = res.Sunrise ? dayjs(res.Sunrise).format('HH:mm:ss') : '' sunriseTime.value = res.Sunrise ? dayjs(res.Sunrise).format('HH:mm:ss') : ''

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

@ -20,7 +20,7 @@
<!-- 左侧电力参数区域 --> <!-- 左侧电力参数区域 -->
<div class="power-section"> <div class="power-section">
<!-- ABC三相电力参数 --> <!-- ABC三相电力参数 -->
<div class="power-params"> <div class="power-params" v-loading="phaseLoading" element-loading-background="rgba(122, 122, 122, 0.8)">
<div v-for="phase in powerPhases" :key="phase.name" class="phase-card"> <div v-for="phase in powerPhases" :key="phase.name" class="phase-card">
<div class="phase-name"><span>{{ phase.name }}</span>相</div> <div class="phase-name"><span>{{ phase.name }}</span>相</div>
<div class="param-list"> <div class="param-list">
@ -76,70 +76,72 @@
<el-button class="mode-button active">{{ info.Mode ? '手动' : '自动' }}</el-button> <el-button class="mode-button active">{{ info.Mode ? '手动' : '自动' }}</el-button>
</div> </div>
</div> </div>
<div class="circuit-section"> <div v-loading="infoLoading" element-loading-background="rgba(122, 122, 122, 0.8)">
<!-- 上排回路 --> <div class="circuit-section">
<div class="circuit-row"> <!-- 上排回路 -->
<div v-for="(circuit, index) in info.Loops.slice(0, 5)" :key="circuit.name" class="circuit-item"> <div class="circuit-row">
<div class="circuit-status" :class="{ active: circuit.is_open }"> <div v-for="(circuit, index) in info.Loops.slice(0, 5)" :key="circuit.name" class="circuit-item">
直流回路{{ index + 1 }}：{{ circuit.is_open ? '打开' : '关闭' }} <div class="circuit-status" :class="{ active: circuit.is_open }">
</div> 直流回路{{ index + 1 }}：{{ circuit.is_open ? '打开' : '关闭' }}
<!-- <div class="circuit-icon" :class="{ active: circuit.is_open }">
<el-icon>
<Sunny />
</el-icon>
</div> -->
<div class="circuitStatus">
<div class="line">
<div class="line_item">电压: <span>{{ circuit.V ? circuit.V?.toFixed(2) : 0 }}V</span></div>
<div class="line_item">电流: <span>{{ circuit.A ? circuit.A?.toFixed(2) : 0 }}A</span></div>
</div> </div>
<div class="line"> <!-- <div class="circuit-icon" :class="{ active: circuit.is_open }">
<div class="line_item">功率: <span>{{ circuit.Kw ? circuit.Kw?.toFixed(3) : 0 }}kW</span></div> <el-icon>
<Sunny />
</el-icon>
</div> -->
<div class="circuitStatus">
<div class="line">
<div class="line_item">电压: <span>{{ circuit.V ? circuit.V?.toFixed(2) : 0 }}V</span></div>
<div class="line_item">电流: <span>{{ circuit.A ? circuit.A?.toFixed(2) : 0 }}A</span></div>
</div>
<div class="line">
<div class="line_item">功率: <span>{{ circuit.Kw ? circuit.Kw?.toFixed(3) : 0 }}kW</span></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 下排回路 --> <!-- 下排回路 -->
<div class="circuit-row"> <div class="circuit-row">
<div v-for="(circuit, index) in info.Loops.slice(5, 10)" :key="circuit.name" class="circuit-item"> <div v-for="(circuit, index) in info.Loops.slice(5, 10)" :key="circuit.name" class="circuit-item">
<div class="circuit-status" :class="{ active: circuit.is_open }"> <div class="circuit-status" :class="{ active: circuit.is_open }">
直流回路{{ index + 6 }}：{{ circuit.is_open ? '打开' : '关闭' }} 直流回路{{ index + 6 }}：{{ circuit.is_open ? '打开' : '关闭' }}
</div>
<!-- <div class="circuit-icon" :class="{ active: circuit.is_open }">
<el-icon>
<Sunny />
</el-icon>
</div> -->
<div class="circuitStatus">
<div class="line">
<div class="line_item">电压: <span>{{ circuit.V ? circuit.V?.toFixed(2) : 0 }}V</span></div>
<div class="line_item">电流: <span>{{ circuit.A ? circuit.A?.toFixed(2) : 0 }}A</span></div>
</div> </div>
<div class="line"> <!-- <div class="circuit-icon" :class="{ active: circuit.is_open }">
<div class="line_item">功率: <span>{{ circuit.Kw ? circuit.Kw?.toFixed(3) : 0 }}kW</span></div> <el-icon>
<Sunny />
</el-icon>
</div> -->
<div class="circuitStatus">
<div class="line">
<div class="line_item">电压: <span>{{ circuit.V ? circuit.V?.toFixed(2) : 0 }}V</span></div>
<div class="line_item">电流: <span>{{ circuit.A ? circuit.A?.toFixed(2) : 0 }}A</span></div>
</div>
<div class="line">
<div class="line_item">功率: <span>{{ circuit.Kw ? circuit.Kw?.toFixed(3) : 0 }}kW</span></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="dimming-section">
<div class="dimming-section"> <!-- 上排调光通道 -->
<!-- 上排调光通道 --> <div class="dimming-row">
<div class="dimming-row"> <div v-for="(channel, index) in info.Loops.slice(0, 5)" :key="channel.name" class="dimming-item">
<div v-for="(channel, index) in info.Loops.slice(0, 5)" :key="channel.name" class="dimming-item"> <div class="channel-label">调光通道{{ index + 1 }}</div>
<div class="channel-label">调光通道{{ index + 1 }}</div> <div class="brightness-display" :class="{ active: channel.pwm > 0 }">
<div class="brightness-display" :class="{ active: channel.pwm > 0 }"> {{ channel.pwm }}%
{{ channel.pwm }}% </div>
</div> </div>
</div> </div>
</div>
<!-- 下排调光通道 --> <!-- 下排调光通道 -->
<div class="dimming-row"> <div class="dimming-row">
<div v-for="(channel, index) in info.Loops.slice(5, 10)" :key="channel.name" class="dimming-item"> <div v-for="(channel, index) in info.Loops.slice(5, 10)" :key="channel.name" class="dimming-item">
<div class="channel-label">调光通道{{ index + 6 }}</div> <div class="channel-label">调光通道{{ index + 6 }}</div>
<div class="brightness-display" :class="{ active: channel.pwm > 0 }"> <div class="brightness-display" :class="{ active: channel.pwm > 0 }">
{{ channel.pwm }}% {{ channel.pwm }}%
</div>
</div> </div>
</div> </div>
</div> </div>
@ -423,10 +425,14 @@ const info = ref({
"backup_byte4": 0 "backup_byte4": 0
}) })
const infoLoading = ref(false)
const phaseLoading = ref(false)
const getInfo = () => { const getInfo = () => {
// RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => { // RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => {
// info.value = res // info.value = res
// }) // })
infoLoading.value = true
phaseLoading.value = true
RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => { RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
powerPhases.value[0].voltage = res.aVoltage + 'V' powerPhases.value[0].voltage = res.aVoltage + 'V'
powerPhases.value[0].current = res.aElectricCurrent + 'A' powerPhases.value[0].current = res.aElectricCurrent + 'A'
@ -446,12 +452,16 @@ const getInfo = () => {
energyParams.value.activeEnergy = res.activeEnergy + 'kW·h' energyParams.value.activeEnergy = res.activeEnergy + 'kW·h'
energyParams.value.activePower = res.activePower + 'kW' energyParams.value.activePower = res.activePower + 'kW'
energyParams.value.powerFactor = res.powerFactor energyParams.value.powerFactor = res.powerFactor
}).finally(() => {
phaseLoading.value = false
}) })
RPC.post('/m9z/getDeviceStatus2', { comm_uid: commit_uid }).then((res) => { RPC.post('/m9z/getDeviceStatus2', { comm_uid: commit_uid }).then((res) => {
// 直流电流、电源、功率 // 直流电流、电源、功率
if (res.Loops?.length === 10) { if (res.Loops?.length === 10) {
info.value = res info.value = res
} }
}).finally(() => {
infoLoading.value = false
}) })
getLineData() getLineData()

Write Preview
Loading…
Cancel
Save