设备运行状态

pull/35/head
孙萌 2023-11-15 18:30:17 +08:00
parent b745f2bdbe
commit 6898791e83
13 changed files with 512 additions and 24 deletions

View File

@ -151,4 +151,9 @@ export default {
getControlRtDatastation(data){
return sendGetRequest('/getcontrol/rtDatastation',data)
},
//控制器 设备运行状态
getControlGetState(data){
return sendGetRequest('/readControl/getState',data)
},
};

View File

@ -1491,13 +1491,17 @@
.realTime .page-content {
position: relative;
width: 100%;
height: auto;
height: 100%;
flex-shrink: 0;
background: rgba(0, 92, 178, 0.15);
border: 2px solid rgba(0, 186, 255, 0.2);
padding: 30px 20px 20px;
}
.realTime .page-content.control-page {
height: auto;
}
.realTime .page-content .control-view {
display: flex;
align-items: center;
@ -1689,6 +1693,107 @@
height: calc(100% - 51px);
}
.realTime .page-content .status-view .status-view-content .status-true {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.realTime .page-content .status-view .status-view-content .status-true .status-fan {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div {
min-width: unset;
flex-shrink: 0;
font-size: 14px;
height: 30px;
margin: 10px 8px 0 !important;
}
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img {
width: 16px;
height: 16px;
margin-right: 5px;
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-sel {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 50px;
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-sel > div {
display: flex;
align-items: center;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-sel > div > img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-charts {
width: 100%;
height: 153px;
position: relative;
background: url(../img/status-true-charts.png) no-repeat;
background-size: 227px 114px;
background-position: center 20px;
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-charts > img {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 6px;
width: 28px;
height: 27px;
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-charts > div {
width: 100%;
height: 100%;
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-text {
width: 227px;
height: 35px;
padding: 0 16px;
background: url(../img/status-true-text.png) no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-left {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #8BEAFF;
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-right {
font-size: 14px;
font-family: Arial;
font-weight: 400;
color: #FFFFFF;
}
.realTime .page-content .status-view .status-view-content .status-noTrue {
width: 100%;
height: 100%;

File diff suppressed because one or more lines are too long

View File

@ -1585,12 +1585,14 @@
.page-content {
position: relative;
width: 100%;
height: auto;
height: 100%;
flex-shrink: 0;
background: rgba(0, 92, 178, 0.15);
border: 2px solid rgba(0, 186, 255, 0.20);
padding: 30px 20px 20px;
&.control-page{
height:auto;
}
.control-view {
display: flex;
align-items: center;
@ -1794,6 +1796,103 @@
width: 100%;
height: calc(100% - 51px);
.status-true {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.status-fan{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
>div{
min-width: unset;
flex-shrink: 0;
font-size: 14px;
height: 30px;
margin: 10px 8px 0 !important;
>img{
width: 16px;
height:16px;
margin-right: 5px;
}
}
}
.status-true-sel {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 50px;
>div {
display: flex;
align-items: center;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
>img {
width: 20px;
height: 20px;
margin-right: 10px;
}
}
}
.status-true-charts {
width: 100%;
height: 153px;
position: relative;
background: url(../img/status-true-charts.png) no-repeat;
background-size: 227px 114px;
background-position: center 20px;
>img {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 6px;
width: 28px;
height: 27px;
}
>div {
width: 100%;
height: 100%;
}
}
.status-true-text {
width: 227px;
height: 35px;
padding: 0 16px;
background: url(../img/status-true-text.png) no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
.status-true-text-left {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #8BEAFF;
}
.status-true-text-right {
font-size: 14px;
font-family: Arial;
font-weight: 400;
color: #FFFFFF;
}
}
}
.status-noTrue {
width: 100%;
height: 100%;

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

Before

Width:  |  Height:  |  Size: 908 B

After

Width:  |  Height:  |  Size: 908 B

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 744 B

After

Width:  |  Height:  |  Size: 744 B

View File

@ -315,3 +315,116 @@ export function realTimeLine(id, data) {
myChart.resize();
});
}
export function statusCharts(id, data) {
console.log(id,11);
var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
var option;
const pointerData = data; // 仪表指针数据
option = {
series: [
{
type: "gauge",
radius:75,
z: 1,
center:['50%','87%'],
startAngle: 180,
endAngle: 0,
splitNumber: 50,
splitLine: {
show: false,
length: 15,
distance: -10,
lineStyle: {
color: "#fff",
width: 1,
},
},
detail: {
show: false,
offsetCenter: ['50%', '50%'],
fontSize: 22,
formatter: (val) => [`{a|${val}}`, `{b|%}`].join(""),
rich: {
a: {
fontSize: 20,
color: "rgba(84, 108, 198, 0.65)",
},
b: {
fontSize: 24,
color: "rgba(84, 108, 198, 0.65)",
},
},
},
// 仪表盘的线,颜色值为一个数组
axisLine: {
show: true,
// 两端是否设置为圆角在5.0之后的版本有效
roundCap: false,
lineStyle: {
width: 15,
shadowColor: "#0093ee", //默认透明
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
opacity: 1,
color: [
[
pointerData / 100,
{
x: 0,
y: 0,
x1: 1,
y1: 0,
colorStops: [
{
offset: 0,
color: "rgba(110, 224, 255, 1)",
},
{
offset: 1,
color: "rgba(0, 200, 255, 1)",
},
],
},
],
[1, "rgba(0,0,0,0.15)"],
],
},
},
// 仪表盘刻度标签
axisLabel: {
show: true,
color: "#fff",
fontSize: 14,
distance: -35,
formatter: (val) => {
const num = Math.floor(val);
return num % 20 === 0 ? num : "";
},
},
pointer:{
width :5,
itemStyle:{
color:'rgba(10, 243, 167, 1)'
}
},
// 刻度
axisTick: {
show: false,
},
// 指针此设置仅对5.0以上的版本生效
data: [pointerData],
},
],
};
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}

View File

@ -1,6 +1,6 @@
<template>
<div class="formula realTime">
<div class="page-content new-data">
<div class="page-content new-data" :class="deviceName == 10 ? 'control-page' : ''">
<div class="control-view" v-if="deviceName == 10">
<div class="title">气象站:</div>
@ -62,13 +62,139 @@
<div class="right" id="realTime-line"></div>
</div>
</div>
<div class="page-content" v-if="deviceName == 10">
<div class="table-title">
<img src="../../assets/image/status.png" alt="" />
设备运行状态
</div>
<div class="flex-view border-none">
<div class="status-view">
<div class="status-view-top">
<div class="status-view-top-left">{{ fanStatus.name }}</div>
<!-- <el-popover placement="top" width="140">
<div class="set-status-blue">进入修改设定值</div>
<el-popover placement="top" width="160">
<p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
</p>
<div style="text-align: right; margin: 0">
<el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
<el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
</div>
<div class="set-status-red" slot="reference">删除</div>
</el-popover>
<el-popover placement="right" width="100">
<input v-model="item.index" type="text" class="status-save">
<el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
<div class="set-status-blue" slot="reference">排序</div>
</el-popover>
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
</el-popover> -->
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
</div>
<div class="status-view-content">
<div v-if="fanStatus.open != 0" class="status-true">
<div class="status-true-sel">
<div class="sel">
<img v-if="fanStatus.open == 1" src="../../assets/img/status-true-sel.png" alt="">
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
自动控制
</div>
<div class="sel-phone">
<img v-if="fanStatus.open != 1" src="../../assets/img/status-true-sel.png" alt="">
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
手机控制
</div>
</div>
<div class="status-fan">
<div class="btn" :class="fanStatus.status[0] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt="">
1#风机
</div>
<div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 2#风机
</div>
<div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 3#风机
</div>
<div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 4#风机
</div>
<div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 5#风机
</div>
</div>
</div>
<div v-else class="status-noTrue">
<img src="../../assets/img/status-no.png" alt="">
<div>当前设备无效</div>
</div>
</div>
</div>
<div class="status-view" v-for="item, index in statusList" :key="index">
<div class="status-view-top">
<div class="status-view-top-left">{{ item.name }}</div>
<!-- <el-popover placement="top" width="140">
<div class="set-status-blue">进入修改设定值</div>
<el-popover placement="top" width="160">
<p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
</p>
<div style="text-align: right; margin: 0">
<el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
<el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
</div>
<div class="set-status-red" slot="reference">删除</div>
</el-popover>
<el-popover placement="right" width="100">
<input v-model="item.index" type="text" class="status-save">
<el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
<div class="set-status-blue" slot="reference">排序</div>
</el-popover>
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
</el-popover> -->
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
</div>
<div class="status-view-content">
<div v-if="item.open != 0" class="status-true">
<div class="status-true-sel">
<div class="sel">
<img v-if="item.open == 1" src="../../assets/img/status-true-sel.png" alt="">
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
自动控制
</div>
<div class="sel-phone">
<img v-if="item.open != 1" src="../../assets/img/status-true-sel.png" alt="">
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
手机控制
</div>
</div>
<div class="status-true-charts">
<img src="../../assets/img/status-true-charts-icon.png" alt="">
<div :id="'statusCharts' + index"></div>
</div>
<div class="status-true-text">
<div class="status-true-text-left">静止状态</div>
<div class="status-true-text-right">{{ item.progress }}%</div>
</div>
</div>
<div v-else class="status-noTrue">
<img src="../../assets/img/status-no.png" alt="">
<div>当前设备无效</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import EZUIKit from 'ezuikit-js';
import { getnowtime } from '../../assets/js/nowTime'
import { realTimeLine } from '@/assets/js/charts'
import { realTimeLine, statusCharts } from '@/assets/js/charts'
import videojs from 'video.js';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import vueSeamless from 'vue-seamless-scroll'
@ -79,7 +205,7 @@ export default {
defaultOption() {
return {
step: 0.3, //
limitMoveNum: 9, // this.dataList.length
limitMoveNum: 7, // this.dataList.length
hoverStop: true, // stop
direction: 2, // 0 1 2 3
openWatch: true, // dom
@ -103,8 +229,11 @@ export default {
},
data() {
return {
statusList:[{name:'左向天窗',open:true,progress:55,isTrue:true,index:1},
{name:'右向天窗',open:true,progress:55,isTrue:false,index:2}],
statusList: [],
fanStatus: {
name: '风机', open: 0, status: []
},
time: null,//
list: [],
inputData: [],
@ -164,13 +293,16 @@ export default {
this.$bus.$off('refreshTime')
},
methods: {
createVideoNew() {
padString(str, length) {
return str.padStart(length, '0');
},
createVideoNew(accessToken) {
// divWdivH 使div
let divW = this.$refs.monitor.clientWidth
let divH = this.$refs.monitor.clientHeight
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-js', // ID
accessToken: 'at.757ro68z1ur26g6f1ondfwl1cl1bivxy-4ckiflya3u-1192hd2-ucup11mjb',
accessToken: accessToken,
url: this.url,
// urlezopen://open.ys7.com/G39444019/1.live .live GitHub
// simple-; standard-; security-; voice-; GitHub
@ -335,8 +467,8 @@ export default {
if (!this.player) {
this.api.getGethls(data2).then(res => {
if (res.data.code == 200) {
this.url = res.data.msg
this.createVideoNew()
this.url = res.data.data.ezopen
this.createVideoNew(res.data.data.accesstoken)
}
})
}
@ -409,6 +541,39 @@ export default {
// console.log(this.controlList);
})
var TargetValue = {
deviceId: store.equipmentList[this.indexs - 1].deviceId
}
this.api.getControlGetState(TargetValue).then(res => {
if (res.data.code == 200) {
console.log(res.data.data, 123123);
this.fanStatus.open = res.data.data['1023']
this.fanStatus.status = []
var num = res.data.data['1024']
var num1 = this.padString(num.toString(2), 5)
var openListNew = []
openListNew = num1.split("")
this.fanStatus.status = openListNew.reverse()
this.statusList = []
for (var i = 0; i < 4; i++) {
var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
this.statusList.push(statusData)
}
this.$forceUpdate();
setTimeout(() => {
this.statusList.forEach((el,index)=>{
if(el.open!=0){
statusCharts(`statusCharts${index}`,el.progress)
}
})
}, 10);
} else {
// this.$message.error(res.data.msg);
}
})
var data1 = store.equipmentList[this.indexs - 1].deviceId
this.api.getControlFsdata(data1).then(res => {
@ -434,8 +599,8 @@ export default {
this.api.getGethls(data2).then(res => {
// console.log(res.data, 11);
if (res.data.code == 200) {
this.url = res.data.msg
this.createVideoNew()
this.url = res.data.data.ezopen
this.createVideoNew(res.data.data.accesstoken)
}
})
}
@ -492,4 +657,5 @@ export default {
border: 1px solid #dcdfe6;
color: #606266;
font-size: 14px;
}</style>
}
</style>