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:
Hcat
2023-12-22 18:08:59 +08:00
parent 2eeba5ee7e fb3a060010
commit 73fc7557a7
6 changed files with 74 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/largeScreen.js
View File

@@ -21,10 +21,10 @@ export const getTunnelBySiteId = (siteId) => {
method: 'get'
})
}
// 风压echarts数据
// 传感器echarts数据
export const getEchartsInfo = (equipmentId) => {
return request({
url: `/tunnel/large/screen/echarts/wind/pressure/${equipmentId}`,
url: `/tunnel/large/screen/echarts/sensor/${equipmentId}`,
method: 'get'
})
}
@@ -34,4 +34,4 @@ export const getBadGasEchartsInfo = (tunnelId) => {
url: `/tunnel/large/screen/echarts/gas/sensor/${tunnelId}`,
method: 'get'
})
}
}

BIN
src/assets/images/usedEle/bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

23
src/components/content/airInfo/AirInfo.vue
View File

@@ -3,8 +3,7 @@
<div class="fan-speed">
<img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
<div class="fan-info" @click="handleOpenChart">
<div class="input-fan"><span>风速</span><span>进风：{{ windSpeed }}m/s</span></div>
<div class="output-fan"><span>出风：{{ windSpeed }}m/s</span></div>
<div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
</div>
</div>
<item-info
@@ -146,7 +145,7 @@ const getAirInfo = (now) => {
if (item.equipmentType === "dust" || item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") {
airObj = changeData(item)
airArr.push(airObj)
} else if (item.equipmentType === "windDirection") {
} else if (item.equipmentType === "windSpeed") {
windSpeed.value = item.value
}
})
@@ -233,17 +232,6 @@ const initChart = () => {
//配置项
series: [
{
name: '进风口',
data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
type: 'line',
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5
}
},
{
name: '出风口',
data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63],
type: 'line',
smooth: true,
@@ -254,6 +242,7 @@ const initChart = () => {
}
]
}
myEcharts.setOption(option);
//图表大小自适应窗口大小变化
window.onresize = () => {
@@ -391,13 +380,13 @@ const initAirChart = () => {
.fan-info {
flex: 1;
display: flex;
justify-content: space-between;
justify-content: flex-start;
.input-fan {
margin: 0 26px;
//margin: 0 26px;
> span:last-child {
margin-left: 30px;
margin-left: 25px;
}
}
}

23
src/components/content/fanInfo/FanInfo.vue
View File

@@ -92,22 +92,6 @@ const stateC = ref(false)
watch(() => props.transducerData, (now) => {
getTransData(now.frequencyChangerList)
}, {deep: true});
watch(() => props.list, (now) => {
transducerData.value.forEach(item => {
now.forEach(newItem => {
if (item.equipmentId === newItem.equipmentId) {
if (newItem.frequencyFeedback) {
item.frequencySetting = newItem.frequencySetting
item.frequencyFeedback = newItem.frequencyFeedback
} else if (newItem.phaseCurrentA) {
item.phaseCurrentA = newItem.phaseCurrentA
item.phaseCurrentB = newItem.phaseCurrentB
item.phaseCurrentC = newItem.phaseCurrentC
}
}
})
})
}, {deep: true});
watch(() => props.fanData, (now) => {
getBasicData(now.frequencyChangerList)
}, {deep: true});
@@ -129,9 +113,9 @@ watch(() => props.list, (now) => {
item.frequencySetting = newItem.frequencySetting
item.frequencyFeedback = newItem.frequencyFeedback
} else if (newItem.phaseCurrentA) {
item.phaseCurrentA = newItem.phaseCurrentA
item.phaseCurrentB = newItem.phaseCurrentB
item.phaseCurrentC = newItem.phaseCurrentC
item.valueA = newItem.phaseCurrentA
item.valueB = newItem.phaseCurrentB
item.valueC = newItem.phaseCurrentC
}
}
})
@@ -582,6 +566,7 @@ input[type="number"] {
}
.units {
z-index: 22;
position: relative;
}

4
src/components/content/fanInfo/FanInfoItem.vue
View File

@@ -8,7 +8,7 @@
<div class="point" ref="pointA"></div>
</div>
</div>
<div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
<div class="wind-pressure-item" :class="{ abnormal:isWaringB }">
<div class="label">
B相电流:{{params.wp.valueB}}A
</div>
@@ -17,7 +17,7 @@
<div class="point" ref="pointB"></div>
</div>
</div>
<div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
<div class="wind-pressure-item" :class="{ abnormal:isWaringC }">
<div class="label">
C相电流:{{params.wp.valueC}}A
</div>

154
src/components/content/usedEle/UsedEle.vue
View File

@@ -1,13 +1,23 @@
<template>
<div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
<div class="content" >
<div class="content">
<div class="item">
<div></div>
<span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
<div class="container" ref="length">
<div class="value" ref="valueA"></div>
</div>
<div>
<div class="icon"></div>
<span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
</div>
</div>
<div class="item">
<div></div>
<span>当月节省量：{{ monthlySavings }}v</span>
<div class="container" ref="length">
<div class="value" ref="valueB"></div>
</div>
<div>
<div class="icon"></div>
<span>当月节省量：{{ monthlySavings }}v</span>
</div>
</div>
</div>
<div class="digital-tunnel">
@@ -28,10 +38,10 @@
<div class="value">345v</div>
</div>
</div>
<div class="chat-dialog">
<div id="containerEle"></div>
<div style="width: 1px;"></div>
</div>
<div class="chat-dialog">
<div id="containerEle"></div>
<div style="width: 1px;"></div>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
@@ -51,6 +61,8 @@ const isVisited = ref(false);
const eleData = ref([])
const electricityConsumptionMonthly = ref()
const monthlySavings = ref(55555)
const valueA = ref(electricityConsumptionMonthly.value);
const valueB = ref(monthlySavings.value);
const bgImage = computed(() =>
isVisited.value
? "bpq_active.png"
@@ -112,7 +124,7 @@ const initChart = () => {
fontSize: 45
},
itemWidth: 30,
itemHeight:30,
itemHeight: 30,
icon: "circle",
},
//离容器四侧的距离
@@ -179,13 +191,13 @@ const initChart = () => {
//配置项
series: [
{
name:'日用电量',
name: '日用电量',
data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
type: 'bar'
},
{
name:'日节省量',
data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50,120, 200, 150, 80, 70, 110, 130, 100, ],
name: '日节省量',
data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50, 120, 200, 150, 80, 70, 110, 130, 100,],
type: 'bar'
},
]
@@ -202,17 +214,35 @@ const getImageUrl = (name) => {
</script>
<style lang="scss" scoped>
:deep(.el-dialog__header) {
padding: 0!important;
.container {
width: 60px;
height: 210px;
border-radius: 31px;
border: 1px solid #0f82af;
position: relative;
margin-bottom: 20px;
.value {
width: 60px;
height: inherit;
background: #60ddde;
border-radius: 31px;
transition: width 0.5s linear 0s;
}
}
:deep(.el-dialog__header) {
padding: 0 !important;
}
#used-ele {
cursor: pointer;
width: 830px;
height: 90px;
height: 373px;
color: aliceblue;
position: absolute;
//top: 1980px;
top: 1420px;
top: 1680px;
left: 68px;
background-image: url(../../../assets/images/usedEle/bg.png);
padding: 21px 62px 35px 62px;
@@ -233,94 +263,28 @@ const getImageUrl = (name) => {
align-items: center;
justify-content: space-between;
cursor: pointer;
.item {
margin-top: 44px;
height: 37px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38CAFB;
line-height: 37px;
display: flex;
flex-direction: column;
align-items: center;
> div {
margin-right: 10px;
width: 29px;
height: 33px;
background-image: url(../../../assets/images/usedEle/white-ele.png);
> div:nth-child(2) {
display: flex;
.icon {
margin-right: 10px;
width: 29px;
height: 33px;
background-image: url(../../../assets/images/usedEle/white-ele.png);
}
}
//ul {
// font-size: 14px;
//
// li {
// display: flex;
// align-items: center;
// //width: 270px;
// height: 37px;
// font-size: 28px;
// color: #38CAFB;
// line-height: 37px;
// margin-bottom: 25px;
// padding-left: 5px;
//
// &:hover {
// cursor: pointer;
// width: 280px;
// //height: 46px;
// background: #2E5589;
// border-radius: 7px;
// color: #FBF7F4;
//
// > div {
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// }
// }
//
// > div {
// width: 29px;
// height: 33px;
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// margin-right: 14px;
// }
//
// &:nth-child(2) {
// > div {
// background-image: url(../../../assets/images/usedEle/icon-month.png);
// }
//
// &:hover {
// > div {
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// }
// }
// }
//
// &:nth-child(3) {
// > div {
// background-image: url(../../../assets/images/usedEle/icon-day.png);
// }
//
// &:hover {
// > div {
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// }
// }
// }
// }
//
// & > :nth-child(2) {
// color: #4bcb6b;
// }
//
// & > :nth-child(3) {
// color: #4bcbbc;
// }
//}
}
//& > :nth-child(2) {
// transform: translateX(25px);
//}
}
}
</style>