hwj_system
/
scmy
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

能源监测曲线图展示

Browse Source
master
wj 2 years ago
parent 4b4649088b
commit b901d673b8
9 changed files with 516 additions and 105 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      psdc-ui/src/assets/images/中间水箱.png
  2. BIN
      psdc-ui/src/assets/images/断路器.png
  3. 25
      psdc-ui/src/views/control/manual/index.vue
  4. 2
      psdc-ui/src/views/emonitor/db/index.vue
  5. 125
      psdc-ui/src/views/emonitor/drgl/index.vue
  6. 126
      psdc-ui/src/views/emonitor/frdl/index.vue
  7. 126
      psdc-ui/src/views/emonitor/kqyrb/index.vue
  8. 1
      psdc-ui/src/views/emonitor/wdcgq/index.vue
  9. 126
      psdc-ui/src/views/emonitor/xrgl/index.vue

BIN
psdc-ui/src/assets/images/中间水箱.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
psdc-ui/src/assets/images/断路器.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

25
psdc-ui/src/views/control/manual/index.vue
Unescape View File

@ -204,7 +204,7 @@ const drawerIshow = ref(false)
const radio = ref()
const celueList = ref([
{
sceneName:'电磁锅炉供暖模式',
sceneName:'电磁锅炉供暖策略',
flow:[
{
timestamp:'第一步',
@ -227,7 +227,7 @@ const celueList = ref([
]
},
{
sceneName:'空气源热泵供暖模式',
sceneName:'空气源热泵供暖策略',
flow:[
{
timestamp:'第一步',
@ -247,7 +247,7 @@ const celueList = ref([
]
},
{
sceneName:'电磁锅炉水蓄热模式',
sceneName:'电磁锅炉水蓄热策略',
flow:[
{
timestamp:'第一步',
@ -272,7 +272,7 @@ const celueList = ref([
]
},
{
sceneName:'空气源热泵水蓄热模式',
sceneName:'空气源热泵水蓄热策略',
flow:[
{
timestamp:'第一步',
@ -297,7 +297,7 @@ const celueList = ref([
]
},
{
sceneName:'蓄热水箱暖气片供暖模式',
sceneName:'蓄热水箱暖气片供暖策略',
flow:[
{
timestamp:'第一步',
@ -306,6 +306,21 @@ const celueList = ref([
}
]
},
{
sceneName:'发热电缆供暖策略',
flow:[
{
timestamp:'第一步',
step:'开启发热电缆断路器，为发热电缆系统供电。',
hollow: false,
},
{
timestamp:'第二步',
step:'调节控制界面，进行发热电缆启停和温度设定。',
hollow: false,
}
]
},
])
function getStrategyListFun(){
getStrategyList().then((res)=>{

2
psdc-ui/src/views/emonitor/db/index.vue
Unescape View File

@ -269,6 +269,7 @@ export default {
myChart2.setOption({
title: {},
legend:{
top: 10,
data:['当前功率'],
textStyle: {
color: "white" //标题的颜色
@ -388,6 +389,7 @@ export default {
borderColor: '#767da1',
},
legend:{
top: 10,
data:['今日用电量'],
textStyle: {
color: "white" //标题的颜色

125
psdc-ui/src/views/emonitor/drgl/index.vue
Unescape View File

@ -44,7 +44,7 @@
</div>
</div>
<div class="bottom">
<div class="middle">
<!-- <div class="bottom1">-->
<!-- <div class="bottom1-1">-->
<!-- 日用电量-->
@ -57,20 +57,33 @@
<!-- </div>-->
<!-- <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>-->
<!-- </div>-->
<div class="bottom1">
<div class="bottom1-1">
<div class="middle1">
<div class="title">
当前功率
</div>
<div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
</div>
<div class="middle2">
<div class="title">
当前功率
</div>
<div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
<!-- <div class="bottom1">-->
<!-- <div class="bottom1-1">-->
<!-- 当前温度-->
<!-- </div>-->
<!-- <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>-->
<!-- </div>-->
</div>
<div class="bottom">
<div class="title">
当前温度
</div>
<div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
</div>
</div>
</div>
</template>
<script name="Index">
@ -232,10 +245,77 @@ export default {
})
//需要获取到element,所以是onMounted的Hook
onMounted(() => {
getPowerPie()
getSbFun()
getDcglFun()
getDrglFun()
});
//渲染电磁锅炉当前功率饼图
function getPowerPie(){
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
if (myChart1){
myChart1.dispose()
}
myChart1 = echarts.init(document.getElementById("myEcharts1"));
myChart1.setOption({
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 10,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
// axisTick: {
// distance: -30,
// length: 8,
// lineStyle: {
// color: '#fff',
// width: 2
// }
// },
// splitLine: {
// distance: -30,
// length: 30,
// lineStyle: {
// color: '#fff',
// width: 4
// }
// },
axisLabel: {
color: 'inherit',
distance: 10,
fontSize: 10
},
detail: {
valueAnimation: true,
formatter: '{value} kW',
color: 'inherit'
},
data: [
{
value: data.totp
}
]
}
]
});
window.onresize = function () {//自适应大小
myChart1.resize();
};
}
//渲染电磁锅炉数据
function getDcglFun(){
getDcgl(data.deviceId).then((res)=>{
@ -475,6 +555,7 @@ export default {
borderColor: '#767da1',
},
legend: {
top: 10,
data: ['进水', '出水'],
textStyle:{
color:'#BEC3DA'
@ -576,6 +657,7 @@ export default {
myChart3.setOption({
title: {},
legend:{
top: 10,
data:['当前功率'],
textStyle: {
color: "white" //标题的颜色
@ -712,23 +794,40 @@ export default {
align-items: center;
}
.bottom{
.middle{
width: 100%;
height: 640px;
//height: 640px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 12px;
}
.bottom1{
width: 49.6%;
height: 300px;
.middle1{
width: 24.4%;
height: 350px;
background-color: #2F3D8A;
}
.middle2{
width: 74.8%;
height: 350px;
background-color: #2F3D8A;
}
.middle1-1{
width: 100%;
height: 13.3%;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
.bottom{
width: 100%;
height: 305px;
background-color: #2F3D8A;
margin-bottom: 12px;
}
p{
margin-bottom: 10px;
}
.bottom1-1{
.title{
width: 100%;
height: 13.3%;
background-color: #374590;

126
psdc-ui/src/views/emonitor/frdl/index.vue
Unescape View File

@ -40,7 +40,7 @@
</div>
</div>
<div class="bottom">
<div class="middle">
<!-- <div class="bottom1">-->
<!-- <div class="bottom1-1">-->
<!-- 日用电量-->
@ -53,20 +53,33 @@
<!-- </div>-->
<!-- <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>-->
<!-- </div>-->
<div class="bottom1">
<div class="bottom1-1">
<div class="middle1">
<div class="title">
当前功率
</div>
<div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
</div>
<div class="middle2">
<div class="title">
当前功率
</div>
<div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
<!-- <div class="bottom1">-->
<!-- <div class="bottom1-1">-->
<!-- 当前温度-->
<!-- </div>-->
<!-- <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>-->
<!-- </div>-->
</div>
<div class="bottom">
<div class="title">
当前温度
</div>
<div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
</div>
</div>
</div>
</template>
<script name="Index">
@ -227,11 +240,77 @@ export default {
deviceId: 4,
})
onMounted(() => {//需要获取到element,所以是onMounted的Hook
getPowerPie()
getSbFun()
getFrldFun()
getFrdlFun()
})
//渲染发热电缆当前功率饼图
function getPowerPie(){
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
if (myChart1){
myChart1.dispose()
}
myChart1 = echarts.init(document.getElementById("myEcharts1"));
myChart1.setOption({
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 10,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
// axisTick: {
// distance: -30,
// length: 8,
// lineStyle: {
// color: '#fff',
// width: 2
// }
// },
// splitLine: {
// distance: -30,
// length: 30,
// lineStyle: {
// color: '#fff',
// width: 4
// }
// },
axisLabel: {
color: 'inherit',
distance: 10,
fontSize: 10
},
detail: {
valueAnimation: true,
formatter: '{value} kW',
color: 'inherit'
},
data: [
{
value: data.totp
}
]
}
]
});
window.onresize = function () {//自适应大小
myChart1.resize();
};
}
//渲染发热电缆数据
function getFrldFun(){
getFrld(data.deviceId).then((res) => {
@ -469,6 +548,7 @@ export default {
borderColor: '#767da1',
},
legend: {
top: 10,
data: ['当前温度'],
textStyle:{
color:'#F5901A'
@ -562,6 +642,7 @@ export default {
myChart3.setOption({
title: {},
legend:{
top: 10,
data:['当前功率'],
textStyle: {
color: "white" //标题的颜色
@ -698,25 +779,42 @@ export default {
align-items: center;
}
.bottom{
.middle{
width: 100%;
height: 640px;
//height: 640px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 12px;
}
.bottom1{
width: 49.6%;
height: 300px;
.middle1{
width: 24.4%;
height: 350px;
background-color: #2F3D8A;
}
.middle2{
width: 74.8%;
height: 350px;
background-color: #2F3D8A;
}
.middle1-1{
width: 100%;
height: 13.3%;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
.bottom{
width: 100%;
height: 305px;
background-color: #2F3D8A;
margin-bottom: 12px;
}
p{
margin-bottom: 10px;
}
.bottom1-1{
.title{
width: 100%;
height: 40px;
height: 13.3%;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;

126
psdc-ui/src/views/emonitor/kqyrb/index.vue
Unescape View File

@ -44,7 +44,7 @@
</div>
</div>
<div class="bottom">
<div class="middle">
<!-- <div class="bottom1">-->
<!-- <div class="bottom1-1">-->
<!-- 日用电量-->
@ -57,20 +57,33 @@
<!-- </div>-->
<!-- <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>-->
<!-- </div>-->
<div class="bottom1">
<div class="bottom1-1">
<div class="middle1">
<div class="title">
当前功率
</div>
<div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
</div>
<div class="middle2">
<div class="title">
当前功率
</div>
<div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
<!-- <div class="bottom1">-->
<!-- <div class="bottom1-1">-->
<!-- 当前温度-->
<!-- </div>-->
<!-- <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>-->
<!-- </div>-->
</div>
<div class="bottom">
<div class="title">
当前温度
</div>
<div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
</div>
</div>
</div>
</template>
<script name="Index">
@ -231,11 +244,77 @@ export default {
deviceId: 3,
})
onMounted(() => {//需要获取到element,所以是onMounted的Hook
getPowerPie()
getSbFun()
getKqyrbFun()
getKqrybFun()
});
//渲染空气源热泵当前功率饼图
function getPowerPie(){
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
if (myChart1){
myChart1.dispose()
}
myChart1 = echarts.init(document.getElementById("myEcharts1"));
myChart1.setOption({
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 10,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
// axisTick: {
// distance: -30,
// length: 8,
// lineStyle: {
// color: '#fff',
// width: 2
// }
// },
// splitLine: {
// distance: -30,
// length: 30,
// lineStyle: {
// color: '#fff',
// width: 4
// }
// },
axisLabel: {
color: 'inherit',
distance: 10,
fontSize: 10
},
detail: {
valueAnimation: true,
formatter: '{value} kW',
color: 'inherit'
},
data: [
{
value: data.totp
}
]
}
]
});
window.onresize = function () {//自适应大小
myChart1.resize();
};
}
//渲染空气源热泵数据
function getKqyrbFun(){
getKqyrb(data.deviceId).then((res)=>{
@ -474,6 +553,7 @@ export default {
borderColor: '#767da1',
},
legend: {
top: 10,
data: ['进水', '出水'],
textStyle:{
color:'#BEC3DA'
@ -574,6 +654,7 @@ export default {
myChart3.setOption({
title: {},
legend:{
top: 10,
data:['当前功率'],
textStyle: {
color: "white" //标题的颜色
@ -710,25 +791,42 @@ export default {
align-items: center;
}
.bottom{
.middle{
width: 100%;
height: 640px;
//height: 640px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 12px;
}
.bottom1{
width: 49.6%;
height: 300px;
.middle1{
width: 24.4%;
height: 350px;
background-color: #2F3D8A;
}
.middle2{
width: 74.8%;
height: 350px;
background-color: #2F3D8A;
}
.middle1-1{
width: 100%;
height: 13.3%;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
.bottom{
width: 100%;
height: 305px;
background-color: #2F3D8A;
margin-bottom: 12px;
}
p{
margin-bottom: 10px;
}
.bottom1-1{
.title{
width: 100%;
height: 40px;
height: 13.3%;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;

1
psdc-ui/src/views/emonitor/wdcgq/index.vue
Unescape View File

@ -142,6 +142,7 @@ export default {
borderColor: '#767da1',
},
legend: {
top: 10,
selectedMode: 'single',
textStyle:{
color:'#BEC3DA'

126
psdc-ui/src/views/emonitor/xrgl/index.vue
Unescape View File

@ -44,7 +44,7 @@
</div>
</div>
<div class="bottom">
<div class="middle">
<!-- <div class="bottom1">-->
<!-- <div class="bottom1-1">-->
<!-- 日用电量-->
@ -57,20 +57,33 @@
<!-- </div>-->
<!-- <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>-->
<!-- </div>-->
<div class="bottom1">
<div class="bottom1-1">
<div class="middle1">
<div class="title">
当前功率
</div>
<div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
</div>
<div class="middle2">
<div class="title">
当前功率
</div>
<div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
<!-- <div class="bottom1">-->
<!-- <div class="bottom1-1">-->
<!-- 当前温度-->
<!-- </div>-->
<!-- <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>-->
<!-- </div>-->
</div>
<div class="bottom">
<div class="title">
当前温度
</div>
<div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
</div>
</div>
</div>
</template>
<script name="Index">
@ -233,11 +246,77 @@ export default {
onMounted(() => {//需要获取到element,所以是onMounted的Hook
getPowerPie()
getSbFun()
getXrglFun()
getXcglFun()
});
//渲染蓄热锅炉当前功率饼图
function getPowerPie(){
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
if (myChart1){
myChart1.dispose()
}
myChart1 = echarts.init(document.getElementById("myEcharts1"));
myChart1.setOption({
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 10,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
// axisTick: {
// distance: -30,
// length: 8,
// lineStyle: {
// color: '#fff',
// width: 2
// }
// },
// splitLine: {
// distance: -30,
// length: 30,
// lineStyle: {
// color: '#fff',
// width: 4
// }
// },
axisLabel: {
color: 'inherit',
distance: 10,
fontSize: 10
},
detail: {
valueAnimation: true,
formatter: '{value} kW',
color: 'inherit'
},
data: [
{
value: data.totp
}
]
}
]
});
window.onresize = function () {//自适应大小
myChart1.resize();
};
}
//渲染蓄热锅炉数据
function getXrglFun(){
getXrgl(data.deviceId).then((res)=>{
@ -267,6 +346,7 @@ export default {
myChart3.setOption({
title: {},
legend:{
top: 10,
data:['当前功率'],
textStyle: {
color: "white" //标题的颜色
@ -596,6 +676,7 @@ export default {
borderColor: '#767da1',
},
legend: {
top: 10,
data: ['进水', '出水'],
textStyle:{
color:'#BEC3DA'
@ -712,25 +793,42 @@ export default {
align-items: center;
}
.bottom{
.middle{
width: 100%;
height: 640px;
//height: 640px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 12px;
}
.bottom1{
width: 49.6%;
height: 300px;
.middle1{
width: 24.4%;
height: 350px;
background-color: #2F3D8A;
}
.middle2{
width: 74.8%;
height: 350px;
background-color: #2F3D8A;
}
.middle1-1{
width: 100%;
height: 13.3%;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;
}
.bottom{
width: 100%;
height: 305px;
background-color: #2F3D8A;
margin-bottom: 12px;
}
p{
margin-bottom: 10px;
}
.bottom1-1{
.title{
width: 100%;
height: 40px;
height: 13.3%;
background-color: #374590;
padding-top: 10px;
padding-left: 10px;

Write Preview
Loading…
Cancel
Save