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 655e7960bc
commit b3f86390d4
6 changed files with 923 additions and 64 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. 180
      psdc-ui/src/views/emonitor/db/index.vue
  2. 32
      psdc-ui/src/views/emonitor/drgl/index.vue
  3. 224
      psdc-ui/src/views/emonitor/frdl/index.vue
  4. 239
      psdc-ui/src/views/emonitor/kqyrb/index.vue
  5. 73
      psdc-ui/src/views/emonitor/wdcgq/index.vue
  6. 239
      psdc-ui/src/views/emonitor/xrgl/index.vue

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

@ -35,17 +35,13 @@
<div class="mid1-1">
当前功率
</div>
<div>
pic
</div>
<div id="myEcharts" style="width: 100%; height: 88.6%"></div>
</div>
<div class="mid2">
<div class="mid2-1">
当前功率总览
</div>
<div>
pic
</div>
<div id="myEcharts2" style="width: 100%; height: 88.6%"></div>
</div>
</div>
<div class="bottom">
@ -53,16 +49,178 @@
<div class="bottom1-1">
今日用电量总览
</div>
<div>
pic
</div>
<div id="myEcharts3" style="width: 100%; height: 88.6%"></div>
</div>
</div>
</div>
</template>
<script setup name="Index">
<script name="Index">
import { onMounted } from "vue";
import * as echarts from 'echarts';
export default {
name: "db",
setup() {
onMounted(() => {//需要获取到element,所以是onMounted的Hook
let myChart = echarts.init(document.getElementById("myEcharts"));
let myChart2 = echarts.init(document.getElementById("myEcharts2"));
let myChart3 = echarts.init(document.getElementById("myEcharts3"));
// 绘制图表
myChart.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: 70
}
]
}
]
});
window.onresize = function () {//自适应大小
myChart.resize();
};
myChart3.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "今日用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart3.resize();
};
myChart2.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kW",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "当前功率",
type: "line",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart2.resize();
};
});
},
components: {},
mounted() {},
};
</script>

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

@ -95,6 +95,7 @@ export default {
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
@ -112,7 +113,7 @@ export default {
},
series: [
{
name: "用户量",
name: "日用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
@ -141,6 +142,7 @@ export default {
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
@ -158,7 +160,7 @@ export default {
},
series: [
{
name: "用户量",
name: "月用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
@ -187,6 +189,7 @@ export default {
},
yAxis: {
type: 'value',
name: "kW",
splitLine:{
show:true,
lineStyle:{
@ -204,7 +207,7 @@ export default {
},
series: [
{
name: "用户量",
name: "当前功率",
type: "line",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
@ -219,6 +222,12 @@ export default {
myChart4.setOption({
title: {},
tooltip: {},
legend: {
data: ['进水', '出水'],
textStyle:{
color:'#BEC3DA'
}
},
textStyle:{
color:'#BEC3DA'
},
@ -233,6 +242,7 @@ export default {
},
yAxis: {
type: 'value',
name: "℃",
splitLine:{
show:true,
lineStyle:{
@ -250,12 +260,22 @@ export default {
},
series: [
{
name: "用户量",
type: "line",
data: [5, 20, 36, 10, 10, 20],
name: '进水',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '出水',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
],
});

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

@ -38,40 +38,236 @@
<div class="bottom1-1">
日用电量
</div>
<div>
pic
</div>
<div id="myEcharts" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
月用电量
</div>
<div>
pic
</div>
<div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前功率
</div>
<div>
pic
</div>
<div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前温度
</div>
<div>
pic
</div>
<div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
</div>
</div>
</div>
</template>
<script setup name="Index">
<script name="Index">
import { onMounted } from "vue";
import * as echarts from 'echarts';
export default {
name: "frdl",
setup() {
onMounted(() => {//需要获取到element,所以是onMounted的Hook
let myChart = echarts.init(document.getElementById("myEcharts"));
let myChart2 = echarts.init(document.getElementById("myEcharts2"));
let myChart3 = echarts.init(document.getElementById("myEcharts3"));
let myChart4 = echarts.init(document.getElementById("myEcharts4"));
// 绘制图表
myChart.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "日用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart.resize();
};
myChart2.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "月用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart2.resize();
};
myChart3.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kW",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "当前功率",
type: "line",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart3.resize();
};
myChart4.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "℃",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: '当前温度',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
],
});
window.onresize = function () {//自适应大小
myChart4.resize();
};
});
},
components: {},
mounted() {},
};
</script>

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

@ -42,40 +42,251 @@
<div class="bottom1-1">
日用电量
</div>
<div>
pic
</div>
<div id="myEcharts" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
月用电量
</div>
<div>
pic
</div>
<div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前功率
</div>
<div>
pic
</div>
<div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前温度
</div>
<div>
pic
</div>
<div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
</div>
</div>
</div>
</template>
<script setup name="Index">
<script name="Index">
import { onMounted } from "vue";
import * as echarts from 'echarts';
export default {
name: "kqyrb",
setup() {
onMounted(() => {//需要获取到element,所以是onMounted的Hook
let myChart = echarts.init(document.getElementById("myEcharts"));
let myChart2 = echarts.init(document.getElementById("myEcharts2"));
let myChart3 = echarts.init(document.getElementById("myEcharts3"));
let myChart4 = echarts.init(document.getElementById("myEcharts4"));
// 绘制图表
myChart.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "日用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart.resize();
};
myChart2.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "月用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart2.resize();
};
myChart3.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kW",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "当前功率",
type: "line",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart3.resize();
};
myChart4.setOption({
title: {},
tooltip: {},
legend: {
data: ['进水', '出水'],
textStyle:{
color:'#BEC3DA'
}
},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "℃",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: '进水',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '出水',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
],
});
window.onresize = function () {//自适应大小
myChart4.resize();
};
});
},
components: {},
mounted() {},
};
</script>

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

@ -64,16 +64,79 @@
<div class="bottom1-1">
实时温度总览
</div>
<div>
pic
</div>
<div id="myEcharts" style="width: 100%; height: 91%"></div>
</div>
</div>
</div>
</template>
<script setup name="Index">
<script name="Index">
import { onMounted } from "vue";
import * as echarts from 'echarts';
export default {
name: "wdcgq",
setup() {
onMounted(() => {//需要获取到element,所以是onMounted的Hook
let myChart = echarts.init(document.getElementById("myEcharts"));
// 绘制图表
myChart.setOption({
title: {},
tooltip: {},
legend: {
data: ['温度传感器1','温度传感器2'],
textStyle:{
color:'#BEC3DA'
}
},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "℃",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "温度传感器1",
type: "line",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart.resize();
};
});
},
components: {},
mounted() {},
};
</script>

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

@ -42,40 +42,251 @@
<div class="bottom1-1">
日用电量
</div>
<div>
pic
</div>
<div id="myEcharts" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
月用电量
</div>
<div>
pic
</div>
<div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前功率
</div>
<div>
pic
</div>
<div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
</div>
<div class="bottom1">
<div class="bottom1-1">
当前温度
</div>
<div>
pic
</div>
<div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
</div>
</div>
</div>
</template>
<script setup name="Index">
<script name="Index">
import { onMounted } from "vue";
import * as echarts from 'echarts';
export default {
name: "xrgl",
setup() {
onMounted(() => {//需要获取到element,所以是onMounted的Hook
let myChart = echarts.init(document.getElementById("myEcharts"));
let myChart2 = echarts.init(document.getElementById("myEcharts2"));
let myChart3 = echarts.init(document.getElementById("myEcharts3"));
let myChart4 = echarts.init(document.getElementById("myEcharts4"));
// 绘制图表
myChart.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "日用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart.resize();
};
myChart2.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "月用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart2.resize();
};
myChart3.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kW",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "当前功率",
type: "line",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart3.resize();
};
myChart4.setOption({
title: {},
tooltip: {},
legend: {
data: ['进水', '出水'],
textStyle:{
color:'#BEC3DA'
}
},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "℃",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: '进水',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '出水',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
],
});
window.onresize = function () {//自适应大小
myChart4.resize();
};
});
},
components: {},
mounted() {},
};
</script>

Write Preview
Loading…
Cancel
Save