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

11

Browse Source
master
jiminglei 2 years ago
parent d780c1020c
commit 791e032752
6 changed files with 750 additions and 132 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. 16
      psdc-ui/src/views/emonitor/db/index.vue
  2. 203
      psdc-ui/src/views/emonitor/drgl/index.vue
  3. 216
      psdc-ui/src/views/emonitor/frdl/index.vue
  4. 208
      psdc-ui/src/views/emonitor/kqyrb/index.vue
  5. 30
      psdc-ui/src/views/emonitor/wdcgq/index.vue
  6. 209
      psdc-ui/src/views/emonitor/xrgl/index.vue

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

@ -4,29 +4,29 @@
<div class="card"> <div class="card">
<div><img src="../../../assets/images/功率.png"></div> <div><img src="../../../assets/images/功率.png"></div>
<div> <div>
<p>当前功率</p> <p style="color: #cccccc">当前功率</p>
<h2>{{data.totp}}kW</h2> <h1>{{data.totp}}kW</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/用电量.png"></div> <div><img src="../../../assets/images/用电量.png"></div>
<div> <div>
<p>日用电量</p> <p style="color: #cccccc">日用电量</p>
<h2>{{data.eday}}kWh</h2> <h1>{{data.eday}}kWh</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/用电量.png"></div> <div><img src="../../../assets/images/用电量.png"></div>
<div> <div>
<p>月用电量</p> <p style="color: #cccccc">月用电量</p>
<h2>{{data.emonth}}kWh</h2> <h1>{{data.emonth}}kWh</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/用电量.png"></div> <div><img src="../../../assets/images/用电量.png"></div>
<div> <div>
<p>累计用电量</p> <p style="color: #cccccc">累计用电量</p>
<h2>{{data.totwh}}kWh</h2> <h1>{{data.totwh}}kWh</h1>
</div> </div>
</div> </div>
</div> </div>

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

@ -4,27 +4,27 @@
<div class="card"> <div class="card">
<div><img src="../../../assets/images/用电量.png"></div> <div><img src="../../../assets/images/用电量.png"></div>
<div> <div>
<p>总用电量</p> <p style="color: #cccccc">总用电量</p>
<h2>{{data.totwh}}kWh</h2> <h1>{{data.totwh}}kWh</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/功率.png"></div> <div><img src="../../../assets/images/功率.png"></div>
<div> <div>
<p>当前功率</p> <p style="color: #cccccc">当前功率</p>
<h2>{{data.totp}}kW</h2> <h1>{{data.totp}}kW</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/温度.png"></div> <div><img src="../../../assets/images/温度.png"></div>
<div> <div>
<div style="display: flex; margin-bottom: 5px"> <div style="display: flex; margin-bottom: 5px">
<p>进水温度:</p> <p style="color: #cccccc">进水温度:</p>
<h2>{{data.tempIn}}℃</h2> <h1>{{data.tempIn}}℃</h1>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<p>出水温度:</p> <p style="color: #cccccc">出水温度:</p>
<h2>{{data.tempOut}}℃</h2> <h1>{{data.tempOut}}℃</h1>
</div> </div>
</div> </div>
</div> </div>
@ -241,15 +241,42 @@ export default {
myChart.setOption({ myChart.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend:{
data:['日用电量'],
textStyle: {
color: "white" //标题的颜色
},
},
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: data.dayXz, type:'category',
data:data.dayXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -259,12 +286,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#f3ffff'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -279,6 +306,22 @@ export default {
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });
@ -301,15 +344,42 @@ export default {
myChart2.setOption({ myChart2.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend:{
data:['月用电量'],
textStyle: {
color: "white" //标题的颜色
},
},
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: data.emonthXz, type:'category',
data:data.emonthXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -319,12 +389,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#f3ffff'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -339,6 +409,22 @@ export default {
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });
@ -363,6 +449,15 @@ export default {
show: true show: true
}, },
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend: { legend: {
data: ['进水', '出水'], data: ['进水', '出水'],
textStyle:{ textStyle:{
@ -376,8 +471,19 @@ export default {
data: data.time, data: data.time,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -392,7 +498,7 @@ export default {
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -451,6 +557,12 @@ export default {
myChart3 = echarts.init(document.getElementById("myEcharts3")); myChart3 = echarts.init(document.getElementById("myEcharts3"));
myChart3.setOption({ myChart3.setOption({
title: {}, title: {},
legend:{
data:['当前功率'],
textStyle: {
color: "white" //标题的颜色
},
},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
show: true show: true
@ -458,12 +570,31 @@ export default {
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
xAxis: { xAxis: {
data: data.glXz, data:data.glXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1'
type:'dashed' }
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -473,12 +604,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#BEC3DA'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -494,6 +625,22 @@ export default {
color:'#2F8EE0' color:'#2F8EE0'
}, },
symbol: "none", //去掉拐角点 symbol: "none", //去掉拐角点
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });

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

@ -4,31 +4,31 @@
<div class="card"> <div class="card">
<div><img src="../../../assets/images/用电量.png"></div> <div><img src="../../../assets/images/用电量.png"></div>
<div> <div>
<p>总用电量</p> <p style="color: #cccccc">总用电量</p>
<h2>1641kWh</h2> <h1>1641kWh</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/功率.png"></div> <div><img src="../../../assets/images/功率.png"></div>
<div> <div>
<p>当前功率</p> <p style="color: #cccccc">当前功率</p>
<h2>11kW</h2> <h1>11kW</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/温度.png"></div> <div><img src="../../../assets/images/温度.png"></div>
<div> <div>
<div> <div>
<p>当前温度</p> <p style="color: #cccccc">当前温度</p>
<h2>25℃</h2> <h1>25℃</h1>
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/温度传感器.png"></div> <div><img src="../../../assets/images/温度传感器.png"></div>
<div> <div>
<p>运行状态</p> <p style="color: #cccccc">运行状态</p>
<h2 style="color: #1ab394">开启</h2> <h1 style="color: #1ab394">开启</h1>
</div> </div>
</div> </div>
</div> </div>
@ -233,15 +233,42 @@ export default {
myChart.setOption({ myChart.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend:{
data:['日用电量'],
textStyle: {
color: "white" //标题的颜色
},
},
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: data.dayXz, type:'category',
data:data.dayXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -251,12 +278,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#f3ffff'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -271,6 +298,22 @@ export default {
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });
@ -293,15 +336,42 @@ export default {
myChart2.setOption({ myChart2.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend:{
data:['月用电量'],
textStyle: {
color: "white" //标题的颜色
},
},
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: data.emonthXz, type:'category',
data:data.emonthXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -311,12 +381,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#f3ffff'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -331,6 +401,22 @@ export default {
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });
@ -352,8 +438,24 @@ export default {
title: {}, title: {},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
show: true show: true
}, },
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend: {
data: ['当前温度'],
textStyle:{
color:'#F5901A'
}
},
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
@ -361,8 +463,19 @@ export default {
data: data.time, data: data.time,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -377,7 +490,7 @@ export default {
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -388,9 +501,9 @@ export default {
{ {
name: '当前温度', name: '当前温度',
type: 'line', type: 'line',
stack: 'Total', // stack: 'Total',
itemStyle: { //线条颜色 itemStyle:{
color: '#F5901A', color:'#F5901A'
}, },
data: data.tem data: data.tem
}, },
@ -427,6 +540,12 @@ export default {
myChart3 = echarts.init(document.getElementById("myEcharts3")); myChart3 = echarts.init(document.getElementById("myEcharts3"));
myChart3.setOption({ myChart3.setOption({
title: {}, title: {},
legend:{
data:['当前功率'],
textStyle: {
color: "white" //标题的颜色
},
},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
show: true show: true
@ -434,12 +553,31 @@ export default {
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
xAxis: { xAxis: {
data: data.glXz, data:data.glXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1'
type:'dashed' }
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -449,12 +587,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#BEC3DA'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -470,6 +608,22 @@ export default {
color:'#2F8EE0' color:'#2F8EE0'
}, },
symbol: "none", //去掉拐角点 symbol: "none", //去掉拐角点
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });

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

@ -4,35 +4,35 @@
<div class="card"> <div class="card">
<div><img src="../../../assets/images/用电量.png"></div> <div><img src="../../../assets/images/用电量.png"></div>
<div> <div>
<p>总用电量</p> <p style="color: #cccccc">总用电量</p>
<h2>{{data.totwh}}kWh</h2> <h1>{{data.totwh}}kWh</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/功率.png"></div> <div><img src="../../../assets/images/功率.png"></div>
<div> <div>
<p>当前功率</p> <p style="color: #cccccc">当前功率</p>
<h2>{{data.totp}}kW</h2> <h1>{{data.totp}}kW</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/温度.png"></div> <div><img src="../../../assets/images/温度.png"></div>
<div> <div>
<div style="display: flex; margin-bottom: 5px"> <div style="display: flex; margin-bottom: 5px">
<p>进水温度:</p> <p style="color: #cccccc">进水温度:</p>
<h2>{{data.tempIn}}℃</h2> <h1>{{data.tempIn}}℃</h1>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<p>出水温度:</p> <p style="color: #cccccc">出水温度:</p>
<h2>{{data.tempOut}}℃</h2> <h1>{{data.tempOut}}℃</h1>
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/温度传感器.png"></div> <div><img src="../../../assets/images/温度传感器.png"></div>
<div> <div>
<p>运行状态</p> <p style="color: #cccccc">运行状态</p>
<h2 style="color: #1ab394">{{data.runStatus}}</h2> <h1 style="color: #1ab394">{{data.runStatus}}</h1>
</div> </div>
</div> </div>
</div> </div>
@ -238,15 +238,42 @@ export default {
myChart.setOption({ myChart.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend:{
data:['日用电量'],
textStyle: {
color: "white" //标题的颜色
},
},
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: data.dayXz, type:'category',
data:data.dayXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -256,12 +283,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#f3ffff'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -276,6 +303,22 @@ export default {
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });
@ -298,15 +341,42 @@ export default {
myChart2.setOption({ myChart2.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend:{
data:['月用电量'],
textStyle: {
color: "white" //标题的颜色
},
},
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: data.emonthXz, type:'category',
data:data.emonthXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -316,12 +386,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#f3ffff'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -336,6 +406,22 @@ export default {
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });
@ -357,8 +443,18 @@ export default {
title: {}, title: {},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
show: true show: true
}, },
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend: { legend: {
data: ['进水', '出水'], data: ['进水', '出水'],
textStyle:{ textStyle:{
@ -372,8 +468,19 @@ export default {
data: data.time, data: data.time,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -388,7 +495,7 @@ export default {
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -446,6 +553,12 @@ export default {
myChart3 = echarts.init(document.getElementById("myEcharts3")); myChart3 = echarts.init(document.getElementById("myEcharts3"));
myChart3.setOption({ myChart3.setOption({
title: {}, title: {},
legend:{
data:['当前功率'],
textStyle: {
color: "white" //标题的颜色
},
},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
show: true show: true
@ -453,12 +566,31 @@ export default {
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
xAxis: { xAxis: {
data: data.glXz, data:data.glXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1'
type:'dashed' }
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -468,12 +600,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#BEC3DA'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -489,6 +621,22 @@ export default {
color:'#2F8EE0' color:'#2F8EE0'
}, },
symbol: "none", //去掉拐角点 symbol: "none", //去掉拐角点
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });

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

@ -4,8 +4,8 @@
<div class="card" v-for="(item,index) in data.info "> <div class="card" v-for="(item,index) in data.info ">
<div><img src="../../../assets/images/温度.png"></div> <div><img src="../../../assets/images/温度.png"></div>
<div> <div>
<p>{{item.name}}</p> <p style="color: #cccccc">{{item.name}}</p>
<h2>{{item.temp}}℃</h2> <h1>{{item.temp}}℃</h1>
</div> </div>
</div> </div>
</div> </div>
@ -87,6 +87,15 @@ export default {
trigger: "axis", trigger: "axis",
show: true show: true
}, },
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend: { legend: {
selectedMode: 'single', selectedMode: 'single',
textStyle:{ textStyle:{
@ -197,8 +206,19 @@ export default {
], ],
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -213,7 +233,7 @@ export default {
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'

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

@ -4,35 +4,35 @@
<div class="card"> <div class="card">
<div><img src="../../../assets/images/用电量.png"></div> <div><img src="../../../assets/images/用电量.png"></div>
<div> <div>
<p>总用电量</p> <p style="color: #cccccc">总用电量</p>
<h2>{{data.totwh}}kWh</h2> <h1>{{data.totwh}}kWh</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/功率.png"></div> <div><img src="../../../assets/images/功率.png"></div>
<div> <div>
<p>当前功率</p> <p style="color: #cccccc">当前功率</p>
<h2>{{data.totp}}kW</h2> <h1>{{data.totp}}kW</h1>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/温度.png"></div> <div><img src="../../../assets/images/温度.png"></div>
<div> <div>
<div style="display: flex; margin-bottom: 5px"> <div style="display: flex; margin-bottom: 5px">
<p>进水温度:</p> <p style="color: #cccccc">进水温度:</p>
<h2>{{data.tempIn}}℃</h2> <h1>{{data.tempIn}}℃</h1>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<p>出水温度:</p> <p style="color: #cccccc">出水温度:</p>
<h2>{{data.tempOut}}℃</h2> <h1>{{data.tempOut}}℃</h1>
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div><img src="../../../assets/images/温度传感器.png"></div> <div><img src="../../../assets/images/温度传感器.png"></div>
<div> <div>
<p>运行状态</p> <p style="color: #cccccc">运行状态</p>
<h2 style="color: #1ab394">{{data.runStatus}}</h2> <h1 style="color: #1ab394">{{data.runStatus}}</h1>
</div> </div>
</div> </div>
</div> </div>
@ -247,6 +247,12 @@ export default {
myChart3 = echarts.init(document.getElementById("myEcharts3")); myChart3 = echarts.init(document.getElementById("myEcharts3"));
myChart3.setOption({ myChart3.setOption({
title: {}, title: {},
legend:{
data:['当前功率'],
textStyle: {
color: "white" //标题的颜色
},
},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
show: true show: true
@ -254,12 +260,31 @@ export default {
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
xAxis: { xAxis: {
data: data.glXz, data:data.glXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1'
type:'dashed' }
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -269,12 +294,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#BEC3DA'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -290,6 +315,22 @@ export default {
color:'#2F8EE0' color:'#2F8EE0'
}, },
symbol: "none", //去掉拐角点 symbol: "none", //去掉拐角点
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });
@ -316,15 +357,42 @@ export default {
myChart.setOption({ myChart.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend:{
data:['日用电量'],
textStyle: {
color: "white" //标题的颜色
},
},
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: data.dayXz, type:'category',
data:data.dayXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -334,12 +402,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#f3ffff'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -354,6 +422,22 @@ export default {
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });
@ -376,15 +460,42 @@ export default {
myChart2.setOption({ myChart2.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend:{
data:['月用电量'],
textStyle: {
color: "white" //标题的颜色
},
},
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: data.emonthXz, type:'category',
data:data.emonthXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -394,12 +505,12 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
type:'dashed', type:'solid',
color:'#BEC3DA' color:'#f3ffff'
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
@ -414,6 +525,22 @@ export default {
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
markPoint: {
itemStyle: {
normal: {
label: {
color: '#fff',
// fontSize: 9
// borderColor: '#000',
// borderWidth: 1,
}
}
},
data: [
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
},
}, },
], ],
}); });
@ -435,9 +562,20 @@ export default {
title: {}, title: {},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
show: true show: true
}, },
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
legend: { legend: {
data: ['进水', '出水'],
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
} }
@ -449,8 +587,19 @@ export default {
data: data.time, data: data.time,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#767da1',
type:'dashed' // type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
} }
} }
}, },
@ -465,7 +614,7 @@ export default {
} }
}, },
axisLine: { axisLine: {
show: true, show: false,
lineStyle:{ lineStyle:{
type:'dashed', type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'

Write Preview
Loading…
Cancel
Save