odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

邓洁 : 绑定首页实时数据

Browse Source
This commit is contained in:
邓洁
2023-12-11 00:25:13 +08:00
parent 10268ab2ba
commit 86709fb13d
31 changed files with 588 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/components/content/transducerList/TransducerList.vue
View File

@@ -1,11 +1,126 @@
<template>
<div id="transducer-list">
<transducer-item v-for="(item, key) in 6" :isFirst="key === 0" />
<div v-for="(item,index) in socketData" :key="item.equipmentId">
<div class="transducer-item">
<img src="@/assets/images/transducer/sp_icon_dy.png"/>
<div class="info">
<div class="name-state">
<div class="name">{{index===1?'二':'一'}}号变频器</div>
<div class="state">
<img src="@/assets/images/transducer/greenLight.png"/>
<span>正常</span>
</div>
</div>
<div class="one-item">
<div>A相电压:{{ item.phaseVoltageA }}V</div>
<div>B相电压:{{ item.phaseVoltageB }}V</div>
<div>C相电压:{{ item.phaseVoltageC }}V</div>
</div>
</div>
</div>
<div class="transducer-item">
<img src="@/assets/images/transducer/sp_icon_dl.png" alt=""/>
<div class="info">
<div class="name-state">
<div class="name">{{index===1?'二':'一'}}号变频器</div>
<div class="state" v-if="item.phaseCurrentB>'100'">
<img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/>
<span style="color: red">异常</span>
</div>
<div class="state" v-else>
<img src="@/assets/images/transducer/greenlight.png" alt=""/>
<span>正常</span>
</div>
</div>
<div class="one-item">
<div>A相电流:{{ item.phaseCurrentA }}A</div>
<div :style="{'color':item.phaseCurrentB>'100'?'red':''}">B相电流:{{ item.phaseCurrentB }}A</div>
<div>C相电流:{{ item.phaseCurrentC }}A</div>
</div>
</div>
</div>
<div class="transducer-item">
<img src="@/assets/images/transducer/sp_icon_pbq.png"/>
<div class="info">
<div class="name-state">
<div class="name">{{index===1?'二':'一'}}号变频器</div>
<div class="state">
<img src="@/assets/images/transducer/greenLight.png"/>
<span>正常</span>
</div>
</div>
<div class="other-item frequency">
<div>
<img
src="@/assets/images/transducer/icon2.png"
alt=""
/><span>给定频率:{{ item.frequencySetting }}HZ</span>
</div>
<div>
<img
src="@/assets/images/transducer/icon2.png"
alt=""
/><span>反馈频率:{{ item.frequencyFeedback }}HZ</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import TransducerItem from "./childComps/TransducerItem.vue";
const props = defineProps({
list: Array,
feedback: Array,
});
const socketData = ref([
{
equipmentId: 23,
phaseCurrentA: '124.01',
phaseCurrentB: '124.51',
phaseCurrentC: '125.01',
phaseVoltageA: '404.01',
phaseVoltageB: '404.51',
phaseVoltageC: '414.01',
frequencySetting: '23',
frequencyFeedback: '23'
},
{
equipmentId: 23,
phaseCurrentA: '124.01',
phaseCurrentB: '124.51',
phaseCurrentC: '125.01',
phaseVoltageA: '404.01',
phaseVoltageB: '404.51',
phaseVoltageC: '414.01',
frequencySetting: '23',
frequencyFeedback: '23'
}
])
const contactData=ref([])
watch(() => props.list, (now, old) => {
console.log('电流电压',now,contactData.value)
let obj={}
let arr=[]
contactData.value.forEach(contactItem=>{
now.forEach(item=>{
if(contactItem.equipmentId===item.equipmentId){
obj={
...item,
frequencySetting: contactItem.frequencySetting,
frequencyFeedback: contactItem.frequencyFeedback
}
arr.push(obj)
}
})
})
socketData.value=arr
}, {deep: true});
watch(() => props.feedback, (now, old) => {
console.log('变频器频率',now)
contactData.value=now
}, {deep: true});
</script>
<style lang="scss" scoped>
@@ -14,12 +129,94 @@ import TransducerItem from "./childComps/TransducerItem.vue";
position: absolute;
top: 744px;
left: 70px;
width: 826px;
//width: 826px;
height: 928px;
background-image: url(../../../assets/images/transducer/bg.png);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
padding: 30px;
background-image: url(@/assets/images/transducer/bg.png);
padding: 0 30px;
.transducer-item {
border-bottom: rgba(107, 163, 237, 0.4) solid 2px;
//height: 148px;
display: flex;
align-items: center;
padding: 30px 0 30px 20px;
& > img {
height: 70px;
width: 70px;
}
.info {
// border: white solid 1px;
//padding: 2px 5px;
flex: 1;
//height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
.name-state {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 0 24px;
margin-bottom: 16px;
.name {
width: 155px;
height: 40px;
font-size: 30px;
font-weight: bold;
color: #38cafb;
line-height: 40px;
}
.state {
width: 80px;
height: 31px;
font-size: 24px;
font-weight: bold;
color: #19d172;
line-height: 31px;
img {
height: 20px;
margin-right: 5px;
}
}
}
.one-item,
.other-item {
//height: 47px;
display: flex;
justify-content: space-between;
color: white;
align-items: center;
font-size: 28px;
line-height: 37px;
padding: 0px 0px 0px 24px;
img {
margin-right: 14px;
}
}
.frequency {
justify-content: flex-start;
> div:first-child {
margin-right: 40px;
}
}
}
}
.isFirst {
border: none;
height: calc(155px - 30px);
}
}
</style>

110
src/components/content/transducerList/childComps/TransducerItem.vue
View File

@@ -1,110 +0,0 @@
<template>
<div class="transducer-item" :class="{ isFirst: isFirst }">
<img src="../../../../assets/images/transducer/transducer.png" />
<div class="info">
<div class="name-state">
<div class="name">一号变频器</div>
<div class="state">
<img src="../../../../assets/images/transducer/greenLight.png" />
<span>正常</span>
</div>
</div>
<div class="one-item">
<div>A项电压：21V</div>
<div>B项电压：21V</div>
<div>C项电压：21V</div>
</div>
<div class="other-item" v-if="false">
<div>
<img
src="../../../../assets/images/transducer/icon2.png"
alt=""
/><span>给定频率：223HZ</span>
</div>
<div>
<img
src="../../../../assets/images/transducer/icon2.png"
alt=""
/><span>反馈频率：23HZ</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, defineProps } from "vue";
defineProps({
isFirst: Boolean,
});
</script>
<style lang="scss" scoped>
.transducer-item {
border-top: rgba(107, 163, 237, 0.4) solid 2px;
height: 155px;
display: flex;
align-items: center;
& > img {
height: 70px;
width: 70px;
}
.info {
// border: white solid 1px;
padding: 2px 5px;
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
.name-state {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: MicrosoftYaHei;
padding: 0px 20px 0px 20px;
.name {
width: 155px;
height: 40px;
font-size: 30px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #38cafb;
line-height: 40px;
}
.state {
width: 80px;
height: 31px;
font-size: 24px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #19d172;
line-height: 31px;
img {
height: 20px;
margin-right: 5px;
}
}
}
.one-item,
.other-item {
height: 47px;
display: flex;
font-family: MicrosoftYaHei;
justify-content: space-between;
color: white;
align-items: center;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
line-height: 37px;
padding: 0px 0px 0px 24px;
}
}
}
.isFirst {
border: none;
height: calc(155px - 30px);
}
</style>