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 957e2f72b2
commit 67cd85bede
8 changed files with 467 additions and 149 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. 40
      psdc-ui/src/api/emonitor/api.js
  2. 1
      psdc-ui/src/main.js
  3. 163
      psdc-ui/src/views/emonitor/db/index.vue
  4. 44
      psdc-ui/src/views/emonitor/drgl/index.vue
  5. 40
      psdc-ui/src/views/emonitor/frdl/index.vue
  6. 39
      psdc-ui/src/views/emonitor/kqyrb/index.vue
  7. 12
      psdc-ui/src/views/emonitor/wdcgq/index.vue
  8. 213
      psdc-ui/src/views/emonitor/xrgl/index.vue

40
psdc-ui/src/api/emonitor/api.js
Unescape View File

@ -0,0 +1,40 @@
import request from '@/utils/request'
//总电表
export function getData(data) {
return request.get('/monitor/db/index/sel1/'+data)
}
export function getZdb(data) {
return request.get('/monitor/db/index/sel2/'+data)
}
//电热锅炉
export function getDrgl(data) {
return request.get('/monitor/drgl/index/sel1/'+data)
}
export function getDcgl(data) {
return request.get('/monitor/drgl/index/sel2/'+data)
}
//蓄热锅炉
export function getXrgl(data) {
return request.get('/monitor/xrgl/index/sel1/'+data)
}
export function getXcgl(data) {
return request.get('/monitor/xrgl/index/sel2/'+data)
}
//空气热源泵
export function getKqryb(data) {
return request.get('/monitor/kqyrb/index/sel1/'+data)
}
export function getKqyrb(data) {
return request.get('/monitor/kqyrb/index/sel2/'+data)
}
//发热电缆
export function getFrdl(data) {
return request.get('/monitor/frdl/index/sel1/'+data)
}
export function getFrld(data) {
return request.get('/monitor/frdl/index/sel2/'+data)
}
//温度传感器
export function getWdcgq(data) {
return request.get('/monitor/wdcgq/index/sel1/'+data)
}

1
psdc-ui/src/main.js
Unescape View File

@ -45,6 +45,7 @@ import DictTag from '@/components/DictTag'
const app = createApp(App) const app = createApp(App)
// 全局方法挂载 // 全局方法挂载
app.config.warnHandler = () => null;
app.config.globalProperties.useDict = useDict app.config.globalProperties.useDict = useDict
app.config.globalProperties.download = download app.config.globalProperties.download = download
app.config.globalProperties.parseTime = parseTime app.config.globalProperties.parseTime = parseTime

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

@ -5,7 +5,7 @@
<div>pic</div> <div>pic</div>
<div> <div>
<p>当前功率</p> <p>当前功率</p>
<h2>0kW</h2> <h2>{{data.num}}kW</h2>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -56,16 +56,103 @@
</template> </template>
<script name="Index"> <script name="Index">
import { onMounted ,onUnmounted } from "vue"; import {getData , getZdb} from '../../../api/emonitor/api'
import { onMounted ,onUnmounted ,reactive } from "vue";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
name: "db", name: "db",
setup() { setup() {
let data = reactive({
num:666,
fdlData:'',
fdlXz:'',
})
// function getData() {
// glData(13).then((res)=>{
// console.log(res.data)
// })
// }
// return{
// getData
// },
onMounted(() => {//需要获取到element,所以是onMounted的Hook onMounted(() => {//需要获取到element,所以是onMounted的Hook
echarts.init(document.getElementById("myEcharts1")).dispose() getData(13).then((res)=>{
let myChart1 = echarts.init(document.getElementById("myEcharts1")); console.log(res)
let option1 = { })
getZdb(13).then((res)=>{
console.log(res)
let arr = []
let brr = []
for (let i in res.data){
arr.push(res.data[i].hour)
brr.push(res.data[i].useElectric)
}
data.fdlData=brr
data.fdlXz=arr
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
if (myChart3){
myChart3.dispose()
}
myChart3 = echarts.init(document.getElementById("myEcharts3"));
myChart3.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
type:'category',
data:data.fdlXz,
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: [data.fdlData],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart3.resize();
};
})
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
if (myChart1){
myChart1.dispose()
}
myChart1 = echarts.init(document.getElementById("myEcharts1"));
myChart1.setOption({
series: [ series: [
{ {
type: 'gauge', type: 'gauge',
@ -117,15 +204,17 @@ export default {
] ]
} }
] ]
} });
myChart1.setOption(option1);
window.onresize = function () {//自适应大小 window.onresize = function () {//自适应大小
myChart1.resize(); myChart1.resize();
}; };
echarts.init(document.getElementById("myEcharts2")).dispose()
let myChart2 = echarts.init(document.getElementById("myEcharts2")); let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
// 绘制图表 if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
myChart2.setOption({ myChart2.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
@ -174,58 +263,14 @@ export default {
myChart2.resize(); myChart2.resize();
}; };
echarts.init(document.getElementById("myEcharts3")).dispose()
let myChart3 = echarts.init(document.getElementById("myEcharts3"));
myChart3.setOption({ })
title: {}, return {
tooltip: {}, data
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();
};
});
},
components: {}, components: {},
mounted() {}, mounted() {},
}; };

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

@ -42,7 +42,7 @@
<div class="bottom1-1"> <div class="bottom1-1">
日用电量 日用电量
</div> </div>
<div id="myEcharts" style="width: 100%; height: 86.7%"></div> <div id="myEcharts1" style="width: 100%; height: 86.7%"></div>
</div> </div>
<div class="bottom1"> <div class="bottom1">
<div class="bottom1-1"> <div class="bottom1-1">
@ -67,22 +67,46 @@
</template> </template>
<script name="Index"> <script name="Index">
import {getDrgl, getDcgl} from '../../../api/emonitor/api'
import { onMounted } from "vue"; import { onMounted } from "vue";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
name: "drgl", name: "drgl",
setup() { setup() {
onMounted(() => {//需要获取到element,所以是onMounted的Hook onMounted(() => {//需要获取到element,所以是onMounted的Hook
echarts.init(document.getElementById("myEcharts")).dispose() // getDrgl(1).then((res)=>{
echarts.init(document.getElementById("myEcharts2")).dispose() // console.log(res)
echarts.init(document.getElementById("myEcharts3")).dispose() // })
echarts.init(document.getElementById("myEcharts4")).dispose() getDcgl(1).then((res)=>{
let myChart = echarts.init(document.getElementById("myEcharts")); console.log(res)
let myChart2 = echarts.init(document.getElementById("myEcharts2")); })
let myChart3 = echarts.init(document.getElementById("myEcharts3"));
let myChart4 = echarts.init(document.getElementById("myEcharts4"));
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
if (myChart1){
myChart1.dispose()
}
myChart1 = echarts.init(document.getElementById("myEcharts1"));
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
if (myChart3){
myChart3.dispose()
}
myChart3 = echarts.init(document.getElementById("myEcharts3"));
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
if (myChart4){
myChart4.dispose()
}
myChart4 = echarts.init(document.getElementById("myEcharts4"));
// 绘制图表 // 绘制图表
myChart.setOption({ myChart1.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
textStyle:{ textStyle:{

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

@ -63,20 +63,44 @@
</template> </template>
<script name="Index"> <script name="Index">
import {getFrdl, getFrld} from '../../../api/emonitor/api'
import { onMounted } from "vue"; import { onMounted } from "vue";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
name: "frdl", name: "frdl",
setup() { setup() {
onMounted(() => {//需要获取到element,所以是onMounted的Hook onMounted(() => {//需要获取到element,所以是onMounted的Hook
echarts.init(document.getElementById("myEcharts")).dispose() getFrld(4).then((res)=>{
echarts.init(document.getElementById("myEcharts2")).dispose() console.log(res)
echarts.init(document.getElementById("myEcharts3")).dispose() })
echarts.init(document.getElementById("myEcharts4")).dispose() // getFrdl(4).then((res)=>{
let myChart = echarts.init(document.getElementById("myEcharts")); // console.log(res)
let myChart2 = echarts.init(document.getElementById("myEcharts2")); // })
let myChart3 = echarts.init(document.getElementById("myEcharts3"));
let myChart4 = echarts.init(document.getElementById("myEcharts4")); let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
if (myChart){
myChart.dispose()
}
myChart = echarts.init(document.getElementById("myEcharts"));
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
if (myChart3){
myChart3.dispose()
}
myChart3 = echarts.init(document.getElementById("myEcharts3"));
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
if (myChart4){
myChart4.dispose()
}
myChart4 = echarts.init(document.getElementById("myEcharts4"));
// 绘制图表 // 绘制图表
myChart.setOption({ myChart.setOption({
title: {}, title: {},

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

@ -67,20 +67,43 @@
</template> </template>
<script name="Index"> <script name="Index">
import {getKqryb, getKqyrb} from '../../../api/emonitor/api'
import { onMounted } from "vue"; import { onMounted } from "vue";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
name: "kqyrb", name: "kqyrb",
setup() { setup() {
onMounted(() => {//需要获取到element,所以是onMounted的Hook onMounted(() => {//需要获取到element,所以是onMounted的Hook
echarts.init(document.getElementById("myEcharts")).dispose() getKqyrb(3).then((res)=>{
echarts.init(document.getElementById("myEcharts2")).dispose() console.log(res)
echarts.init(document.getElementById("myEcharts3")).dispose() })
echarts.init(document.getElementById("myEcharts4")).dispose() // getKqryb(3).then((res)=>{
let myChart = echarts.init(document.getElementById("myEcharts")); // console.log(res)
let myChart2 = echarts.init(document.getElementById("myEcharts2")); // })
let myChart3 = echarts.init(document.getElementById("myEcharts3"));
let myChart4 = echarts.init(document.getElementById("myEcharts4")); let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
if (myChart){
myChart.dispose()
}
myChart = echarts.init(document.getElementById("myEcharts"));
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
if (myChart3){
myChart3.dispose()
}
myChart3 = echarts.init(document.getElementById("myEcharts3"));
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
if (myChart4){
myChart4.dispose()
}
myChart4 = echarts.init(document.getElementById("myEcharts4"));
// 绘制图表 // 绘制图表
myChart.setOption({ myChart.setOption({
title: {}, title: {},

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

@ -71,14 +71,22 @@
</template> </template>
<script name="Index"> <script name="Index">
import {getWdcgq} from '../../../api/emonitor/api'
import { onMounted } from "vue"; import { onMounted } from "vue";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
name: "wdcgq", name: "wdcgq",
setup() { setup() {
onMounted(() => {//需要获取到element,所以是onMounted的Hook onMounted(() => {//需要获取到element,所以是onMounted的Hook
echarts.init(document.getElementById("myEcharts")).dispose() //温度传感器1-8 id 5-12
let myChart = echarts.init(document.getElementById("myEcharts"));
let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
if (myChart){
myChart.dispose()
}
myChart = echarts.init(document.getElementById("myEcharts"));
// 绘制图表 // 绘制图表
myChart.setOption({ myChart.setOption({
title: {}, title: {},

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

@ -5,14 +5,14 @@
<div>pic</div> <div>pic</div>
<div> <div>
<p>总用电量</p> <p>总用电量</p>
<h2>1641kWh</h2> <h2>{{data.totwh}}kWh</h2>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div>pic</div> <div>pic</div>
<div> <div>
<p>当前功率</p> <p>当前功率</p>
<h2>11kW</h2> <h2>{{data.totp}}kW</h2>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -20,11 +20,11 @@
<div> <div>
<div style="display: flex; margin-bottom: 5px"> <div style="display: flex; margin-bottom: 5px">
<p>进水温度:</p> <p>进水温度:</p>
<h2>25℃</h2> <h2>{{data.tempIn}}℃</h2>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<p>出水温度:</p> <p>出水温度:</p>
<h2>85℃</h2> <h2>{{data.tempOut}}℃</h2>
</div> </div>
</div> </div>
</div> </div>
@ -32,7 +32,7 @@
<div>pic</div> <div>pic</div>
<div> <div>
<p>运行状态</p> <p>运行状态</p>
<h2 style="color: #1ab394">开启</h2> <h2 style="color: #1ab394">{{data.runStatus}}</h2>
</div> </div>
</div> </div>
</div> </div>
@ -67,29 +67,151 @@
</template> </template>
<script name="Index"> <script name="Index">
import { onMounted } from "vue"; import {getXcgl, getXrgl} from '../../../api/emonitor/api'
import { onMounted ,reactive} from "vue";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
name: "xrgl", name: "xrgl",
setup() { setup() {
let data = reactive({
totwh:'',
totp:'',
tempIn:'',
tempOut:'',
//1 开 2 关
runStatus:'',
glData:[],
glXz:[
"00:00",
"00:15",
"00:30",
"00:45",
"01:00",
"01:15",
"01:30",
"01:45",
"02:00",
"02:15",
"02:30",
"02:45",
"03:00",
"03:15",
"03:30",
"03:45",
"04:00",
"04:15",
"04:30",
"04:45",
"05:00",
"05:15",
"05:30",
"05:45",
"06:00",
"06:15",
"06:30",
"06:45",
"07:00",
"07:15",
"07:30",
"07:45",
"08:00",
"08:15",
"08:30",
"08:45",
"09:00",
"09:15",
"09:30",
"09:45",
"10:00",
"10:15",
"10:30",
"10:45",
"11:00",
"11:15",
"11:30",
"11:45",
"12:00",
"12:15",
"12:30",
"12:45",
"13:00",
"13:15",
"13:30",
"13:45",
"14:00",
"14:15",
"14:30",
"14:45",
"15:00",
"15:15",
"15:30",
"15:45",
"16:00",
"16:15",
"16:30",
"16:45",
"17:00",
"17:15",
"17:30",
"17:45",
"18:00",
"18:15",
"18:30",
"18:45",
"19:00",
"19:15",
"19:30",
"19:45",
"20:00",
"20:15",
"20:30",
"20:45",
"21:00",
"21:15",
"21:30",
"21:45",
"22:00",
"22:15",
"22:30",
"22:45",
"23:00",
"23:15",
"23:30",
"23:45"
],
})
onMounted(() => {//需要获取到element,所以是onMounted的Hook onMounted(() => {//需要获取到element,所以是onMounted的Hook
echarts.init(document.getElementById("myEcharts")).dispose() getXrgl(2).then((res)=>{
echarts.init(document.getElementById("myEcharts2")).dispose() console.log('1',res)
echarts.init(document.getElementById("myEcharts3")).dispose() data.tempIn=res.data.tempIn
echarts.init(document.getElementById("myEcharts4")).dispose() data.tempOut=res.data.tempOut
let myChart = echarts.init(document.getElementById("myEcharts")); data.totp = res.data.totp
let myChart2 = echarts.init(document.getElementById("myEcharts2")); data.totwh = res.data.totwh
let myChart3 = echarts.init(document.getElementById("myEcharts3")); if(res.data.runStatus==1){
let myChart4 = echarts.init(document.getElementById("myEcharts4")); data.runStatus = '开启'
// 绘制图表 }else if (res.data.runStatus==2){
myChart.setOption({ data.runStatus = '关闭'
}
//gl
delete res.data.todayUsePowers.deviceId
delete res.data.todayUsePowers.samDate
let arr = Object.values(res.data.todayUsePowers)
data.glData=arr
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
if (myChart3){
myChart3.dispose()
}
myChart3 = echarts.init(document.getElementById("myEcharts3"));
myChart3.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
textStyle:{ textStyle:{
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], data: data.glXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#BEC3DA',
@ -99,7 +221,7 @@ export default {
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: "kWh", name: "kW",
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
@ -117,9 +239,9 @@ export default {
}, },
series: [ series: [
{ {
name: "日用电量", name: "当前功率",
type: "bar", type: "line",
data: [5, 20, 36, 10, 10, 20], data: data.glData,
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
@ -127,9 +249,36 @@ export default {
], ],
}); });
window.onresize = function () {//自适应大小 window.onresize = function () {//自适应大小
myChart.resize(); myChart3.resize();
}; };
myChart2.setOption({ })
getXcgl(2).then((res)=>{
console.log(res)
})
let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
if (myChart){
myChart.dispose()
}
myChart = echarts.init(document.getElementById("myEcharts"));
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
if (myChart4){
myChart4.dispose()
}
myChart4 = echarts.init(document.getElementById("myEcharts4"));
// 绘制图表
myChart.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
textStyle:{ textStyle:{
@ -164,7 +313,7 @@ export default {
}, },
series: [ series: [
{ {
name: "月用电量", name: "日用电量",
type: "bar", type: "bar",
data: [5, 20, 36, 10, 10, 20], data: [5, 20, 36, 10, 10, 20],
itemStyle:{ itemStyle:{
@ -174,9 +323,9 @@ export default {
], ],
}); });
window.onresize = function () {//自适应大小 window.onresize = function () {//自适应大小
myChart2.resize(); myChart.resize();
}; };
myChart3.setOption({ myChart2.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
textStyle:{ textStyle:{
@ -193,7 +342,7 @@ export default {
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: "kW", name: "kWh",
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
@ -211,8 +360,8 @@ export default {
}, },
series: [ series: [
{ {
name: "当前功率", name: "月用电量",
type: "line", type: "bar",
data: [5, 20, 36, 10, 10, 20], data: [5, 20, 36, 10, 10, 20],
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
@ -221,8 +370,9 @@ export default {
], ],
}); });
window.onresize = function () {//自适应大小 window.onresize = function () {//自适应大小
myChart3.resize(); myChart2.resize();
}; };
myChart4.setOption({ myChart4.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
@ -287,6 +437,9 @@ export default {
myChart4.resize(); myChart4.resize();
}; };
}); });
return{
data
}
}, },
components: {}, components: {},
mounted() {}, mounted() {},

Write Preview
Loading…
Cancel
Save