邓洁 : 大屏左侧接口对接

This commit is contained in:
dengj
2023-12-13 15:28:58 +08:00
parent 0b0c5f22a1
commit 0dadb58f16
7 changed files with 102 additions and 112 deletions

View File

@@ -9,6 +9,7 @@
</div> </div>
<item-info <item-info
v-for="item in airList" v-for="item in airList"
:key="item.equipmentId"
:wp="item" :wp="item"
:icon="item.icon" :icon="item.icon"
:name="item.name" :name="item.name"

View File

@@ -2,7 +2,7 @@
<div id="bad-gas-info"> <div id="bad-gas-info">
<div class="title">有害气体</div> <div class="title">有害气体</div>
<div class="info-list"> <div class="info-list">
<gas-info-item v-for="item in badGasList" :gasInfo="item" /> <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" />
</div> </div>
</div> </div>
</template> </template>

View File

@@ -343,8 +343,8 @@ const option2 = {
], ],
}; };
const fan01_option = reactive(option, {deep: true}); const fan01_option = reactive(option);
const fan02_option = reactive(option2, {deep: true}); const fan02_option = reactive(option2);
function handleOnMounted() { function handleOnMounted() {
Echarts_info1 = echarts.init(info1.value); Echarts_info1 = echarts.init(info1.value);
@@ -382,7 +382,6 @@ const stateIcon2 = computed(() =>
? "blue-state-icon.png" ? "blue-state-icon.png"
: "red-state-icon.png" : "red-state-icon.png"
); );
let is = ref("isInput");
// 功率是否自动 // 功率是否自动
let isSAuto1 = ref("false"); let isSAuto1 = ref("false");
let isSAuto2 = ref("false"); let isSAuto2 = ref("false");

View File

@@ -1,28 +1,28 @@
<template> <template>
<div id="transducer-list"> <div id="transducer-list">
<div v-for="(item,index) in socketData" :key="item.equipmentId"> <div v-for="item in transducerData" :key="item.equipmentId">
<div class="transducer-item"> <!-- <div class="transducer-item">-->
<img src="@/assets/images/transducer/sp_icon_dy.png"/> <!-- <img src="@/assets/images/transducer/sp_icon_dy.png"/>-->
<div class="info"> <!-- <div class="info">-->
<div class="name-state"> <!-- <div class="name-state">-->
<div class="name">{{index===1?'二':'一'}}号变频器</div> <!-- <div class="name">{{index===1?'二':'一'}}号变频器</div>-->
<div class="state"> <!-- <div class="state">-->
<img src="@/assets/images/transducer/greenLight.png"/> <!-- <img src="@/assets/images/transducer/greenLight.png"/>-->
<span>正常</span> <!-- <span>正常</span>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="one-item"> <!-- <div class="one-item">-->
<div>A相电压:{{ item.phaseVoltageA }}V</div> <!-- <div>A相电压:{{ item.phaseVoltageA }}V</div>-->
<div>B相电压:{{ item.phaseVoltageB }}V</div> <!-- <div>B相电压:{{ item.phaseVoltageB }}V</div>-->
<div>C相电压:{{ item.phaseVoltageC }}V</div> <!-- <div>C相电压:{{ item.phaseVoltageC }}V</div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="transducer-item"> <div class="transducer-item">
<img src="@/assets/images/transducer/sp_icon_dl.png" alt=""/> <img src="@/assets/images/transducer/sp_icon_dl.png" alt=""/>
<div class="info"> <div class="info">
<div class="name-state"> <div class="name-state">
<div class="name">{{index===1?'二':'一'}}号变频器</div> <div class="name">{{item.equipmentName}}</div>
<div class="state" v-if="item.phaseCurrentB>'100'"> <div class="state" v-if="item.phaseCurrentB>'100'">
<img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/> <img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/>
<span style="color: red">异常</span> <span style="color: red">异常</span>
@@ -43,7 +43,7 @@
<img src="@/assets/images/transducer/sp_icon_pbq.png"/> <img src="@/assets/images/transducer/sp_icon_pbq.png"/>
<div class="info"> <div class="info">
<div class="name-state"> <div class="name-state">
<div class="name">{{index===1?'二':'一'}}号变频器</div> <div class="name">{{item.equipmentName}}</div>
<div class="state"> <div class="state">
<img src="@/assets/images/transducer/greenLight.png"/> <img src="@/assets/images/transducer/greenLight.png"/>
<span>正常</span> <span>正常</span>
@@ -72,55 +72,48 @@
<script setup> <script setup>
const props = defineProps({ const props = defineProps({
list: Array, list: Array,
feedback: Array, transducerData: Array
}); });
const socketData = ref([ const transducerData = ref([])
{
equipmentId: 23, watch(() => props.transducerData, (now) => {
phaseCurrentA: '124.01', getBasicData(now.frequencyChangerList)
phaseCurrentB: '124.51', }, {deep: true});
phaseCurrentC: '125.01',
phaseVoltageA: '404.01', watch(() => props.list, (now) => {
phaseVoltageB: '404.51', transducerData.value.forEach(item => {
phaseVoltageC: '414.01', now.forEach(newItem => {
frequencySetting: '23', if (item.equipmentId === newItem.equipmentId) {
frequencyFeedback: '23' if (newItem.frequencyFeedback) {
}, item.frequencySetting = newItem.frequencySetting
{ item.frequencyFeedback = newItem.frequencyFeedback
equipmentId: 23, } else if (newItem.phaseCurrentA) {
phaseCurrentA: '124.01', item.phaseCurrentA = newItem.phaseCurrentA
phaseCurrentB: '124.51', item.phaseCurrentB = newItem.phaseCurrentB
phaseCurrentC: '125.01', item.phaseCurrentC = newItem.phaseCurrentC
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}); }, {deep: true});
const getBasicData = (data) => {
let tranObj = {}
let tranArr = []
data.map(item => {
tranObj = {
equipmentId: item.equipmentId,
equipmentName:item.equipmentName,
phaseCurrentA: item.phaseCurrentA,
phaseCurrentB: item.phaseCurrentB,
phaseCurrentC: item.phaseCurrentC,
frequencySetting: item.frequencySetting,
frequencyFeedback: item.frequencyFeedback,
}
tranArr.push(tranObj)
})
transducerData.value = tranArr
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -2,8 +2,8 @@
<div id="used-ele"> <div id="used-ele">
<div class="title">用电量</div> <div class="title">用电量</div>
<div class="content"> <div class="content">
<div class="item" v-for="(item,index) in socketData" :key="item.equipmentId"> <div class="item" v-for="item in eleData" :key="item.equipmentId">
<div class="name">{{index===1?'二':'一'}}号变频器</div> <div class="name">{{ item.equipmentName }}</div>
<ul> <ul>
<li> <li>
<div></div> <div></div>
@@ -25,28 +25,41 @@
<script setup> <script setup>
const props = defineProps({ const props = defineProps({
oneTransducer: Object, list: Array,
twoTransducer: Object, eleData: Array
list: Array
}); });
const socketData = ref([ const eleData = ref([])
{ watch(() => props.eleData, (now) => {
electricityConsumptionDay: 234, getBasicData(now.frequencyChangerList)
electricityConsumptionMonthly: 345,
electricityConsumptionTotal: 235,
equipmentId: 22,
},
{
electricityConsumptionDay: 234,
electricityConsumptionMonthly: 345,
electricityConsumptionTotal: 235,
equipmentId:23,
}
])
watch(() => props.list, (now, old) => {
console.log('用电量',now,old)
socketData.value = now
}, {deep: true}); }, {deep: true});
watch(() => props.list, (now) => {
eleData.value.forEach(item => {
now.forEach(newItem => {
if (item.equipmentId === newItem.equipmentId) {
if (newItem.electricityConsumptionDay) {
item.electricityConsumptionDay = newItem.electricityConsumptionDay
item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
}
}
})
})
}, {deep: true});
const getBasicData = (data) => {
let tranObj = {}
let tranArr = []
data.map(item => {
tranObj = {
equipmentId: item.equipmentId,
equipmentName: item.equipmentName,
electricityConsumptionDay: item.electricityConsumptionDay,
electricityConsumptionMonthly: item.electricityConsumptionMonthly,
electricityConsumptionTotal: item.electricityConsumptionTotal,
}
tranArr.push(tranObj)
})
eleData.value = tranArr
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -2,7 +2,7 @@
<div id="wind-pressure"> <div id="wind-pressure">
<div class="name">风压</div> <div class="name">风压</div>
<div class="list"> <div class="list">
<wind-pressure-item v-for="(item,index) in wpList" :wp="item" :index="index+1"/> <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" :index="index+1"/>
</div> </div>
</div> </div>
</template> </template>

View File

@@ -20,9 +20,9 @@
<div class="left"> <div class="left">
<el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<fan-info v-if="showFan" :list="socketData.frequencyState"/> <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"/>
<transducer-list :list="socketData.currentVoltage" :feedback="socketData.frequencyFeedback"/> <transducer-list :list="socketData.leftData" :transducer-data="largeScreenData"/>
<used-ele :list="socketData.electricityConsumption"/> <used-ele :list="socketData.leftData" :ele-data="largeScreenData"/>
</el-drawer> </el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div> <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div> <div v-else class="shrink-left" @click="closeLeft"></div>
@@ -115,10 +115,7 @@ let send = {
} }
const largeScreenData = ref(null) const largeScreenData = ref(null)
const socketData = reactive({ const socketData = reactive({
currentVoltage: [], leftData: [],
frequencyState: [],
frequencyFeedback: [],
electricityConsumption: [],
windPressure: [], windPressure: [],
sensor: [], sensor: [],
}) })
@@ -140,7 +137,6 @@ const getScreenInfo = async () => {
const manageSelect = (index) => { const manageSelect = (index) => {
console.log('首页点击-', index) console.log('首页点击-', index)
if (index === 0) { if (index === 0) {
console.log('站点管理=====-----')
router.push('/site') router.push('/site')
} }
}; };
@@ -181,23 +177,11 @@ const initWebSocket = () => {
const data = JSON.parse(event.data).data const data = JSON.parse(event.data).data
if (type === 'equipment') { if (type === 'equipment') {
data.forEach((item) => { data.forEach((item) => {
if (item.typeKey === 'currentVoltage') { if (item.typeKey === 'frequency') {
console.log('电流电压') socketData.leftData = data
socketData.currentVoltage = data
} else if (item.typeKey === 'frequencyFeedback') {
console.log('变频器频率')
socketData.frequencyFeedback = data
} else if (item.typeKey === 'frequencyState') {
console.log('风机状态')
socketData.frequencyState = data
} else if (item.typeKey === 'electricityConsumption') {
console.log('用电量')
socketData.electricityConsumption = data
} else if (item.typeKey === 'windPressure') { } else if (item.typeKey === 'windPressure') {
console.log('风压风压')
socketData.windPressure = data socketData.windPressure = data
} else if (item.typeKey === 'sensor') { } else if (item.typeKey === 'sensor') {
console.log('传感器==========?')
socketData.sensor = data socketData.sensor = data
} }
}) })