703 lines
32 KiB
Vue
703 lines
32 KiB
Vue
<template>
|
||
<div class="formula realTime">
|
||
<div class="page-content new-data" :class="deviceName == 10 ? 'control-page' : ''">
|
||
|
||
<div class="control-view" v-if="deviceName == 10">
|
||
<div class="title">气象站:</div>
|
||
<vue-seamless class="control-list" :data="controlList" :class-option="defaultOption1">
|
||
<div class="list-view" v-for="item, index in controlList " :key="index">
|
||
<img class="icon" :src="item.img" alt="">
|
||
{{ item.environmentDataId
|
||
}}:{{ getControlData(item) }}
|
||
</div>
|
||
</vue-seamless>
|
||
</div>
|
||
<!-- <div class="control-list" >
|
||
<div v-for="(item, index) in controlList" :key="index">
|
||
<img :src="item.img" alt="">
|
||
{{ item.environmentDataId
|
||
}}:{{ getControlData(item) }}
|
||
</div>
|
||
</div> -->
|
||
<div class="table-title">
|
||
<img src="../../assets/image/real-time.png" alt="" />
|
||
实时数据
|
||
<!-- <div class="tips">种植作物1</div> -->
|
||
|
||
</div>
|
||
<div class="timeNow" v-if="list.length">
|
||
<!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
|
||
}}</span> -->
|
||
{{ list[0].updateTime ? list[0].updateTime : '' }}
|
||
</div>
|
||
<div class="flex-view border-none">
|
||
<!-- <div class="input-btn">
|
||
<div class="btn blue">
|
||
<img src="../../assets/image/real-time-icon1.png" alt="" />3D动态水肥监控
|
||
</div>
|
||
<div class="btn green">
|
||
<img src="../../assets/image/real-time-icon2.png" alt="" />短信报警
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<div class="realTime-list" v-if="list.length">
|
||
<vue-seamless class="seamless-warp" :data="list" :class-option="defaultOption">
|
||
<div class="list-view" v-for="item, index in list " :key="index">
|
||
<img :src="item.img" alt="">
|
||
<div>
|
||
<div class="text">{{ item.name }}</div>
|
||
<div class="number">{{ item.num }}</div>
|
||
</div>
|
||
</div>
|
||
</vue-seamless>
|
||
|
||
</div>
|
||
<div class="flex-list realTime-bottom">
|
||
<div class="left-view">
|
||
<div ref="monitor" class="monitor" id="monitor">
|
||
<!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
|
||
<div ref="videoPlayer" class="video-js" id="video-js"></div>
|
||
</div>
|
||
</div>
|
||
<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 class="fan-img" v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png"
|
||
alt="">
|
||
<img v-else src="../../assets/img/fan-off.png" alt="">
|
||
<span>1#风机</span>
|
||
</div>
|
||
<div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
|
||
<img class="fan-img" v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png"
|
||
alt="">
|
||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>2#风机</span>
|
||
</div>
|
||
<div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
|
||
<img class="fan-img" v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png"
|
||
alt="">
|
||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>3#风机</span>
|
||
</div>
|
||
<div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
|
||
<img class="fan-img" v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png"
|
||
alt="">
|
||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>4#风机</span>
|
||
</div>
|
||
<div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
|
||
<img class="fan-img" v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png"
|
||
alt="">
|
||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
|
||
</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">{{ getNumberStatus(item.index) }}</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, 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'
|
||
|
||
export default {
|
||
components: { vueSeamless },
|
||
computed: {
|
||
defaultOption() {
|
||
return {
|
||
step: 0.3, // 数值越大速度滚动越快
|
||
limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
|
||
hoverStop: true, // 是否开启鼠标悬停stop
|
||
direction: 2, // 0向下 1向上 2向左 3向右
|
||
openWatch: true, // 开启数据实时监控刷新dom
|
||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||
}
|
||
},
|
||
defaultOption1() {
|
||
return {
|
||
step: 0.3, // 数值越大速度滚动越快
|
||
limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
|
||
hoverStop: true, // 是否开启鼠标悬停stop
|
||
direction: 2, // 0向下 1向上 2向左 3向右
|
||
openWatch: true, // 开启数据实时监控刷新dom
|
||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
statusList: [],
|
||
|
||
fanStatus: {
|
||
name: '风机', open: 0, status: []
|
||
},
|
||
time: null,//右上角时间
|
||
list: [],
|
||
inputData: [],
|
||
indexs: 1,
|
||
player: null,
|
||
url: '',
|
||
timer: null,
|
||
deviceName: 1,
|
||
controlList: [],
|
||
statusInterval: null,//status状态的Interval
|
||
statusTime: 2,//status状态的秒数
|
||
}
|
||
},
|
||
watch: {
|
||
$route(newVal, oldVal) {
|
||
const that = this;
|
||
const store = this.$store.state
|
||
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
|
||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||
clearInterval(this.statusInterval) && this.statusInterval
|
||
setTimeout(() => {
|
||
|
||
if (this.player) {
|
||
this.player.stop()
|
||
that.player.destroy()
|
||
that.player = null
|
||
}
|
||
that.dataInit();
|
||
|
||
|
||
}, 0);
|
||
},
|
||
},
|
||
mounted() {
|
||
const that = this;
|
||
const store = this.$store.state
|
||
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
|
||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||
// this.getTime()
|
||
|
||
setTimeout(() => {
|
||
that.dataInit();
|
||
that.timer && clearInterval(that.timer)
|
||
that.timer = setInterval(() => {
|
||
that.dataInit();
|
||
}, 60000);
|
||
}, 0);
|
||
|
||
},
|
||
beforeDestroy() {
|
||
const that = this;
|
||
// 销毁播放器
|
||
if (this.player) {
|
||
// this.player.dispose();
|
||
this.player.stop()
|
||
this.player.destroy()
|
||
this.player = null
|
||
}
|
||
clearInterval(this.statusInterval) && this.statusInterval
|
||
that.timer && clearInterval(that.timer)
|
||
this.$bus.$off('refreshTime')
|
||
},
|
||
methods: {
|
||
padString(str, length) {
|
||
return str.padStart(length, '0');
|
||
},
|
||
createVideoNew(accessToken) {
|
||
// divW和divH是获取了父级宽高 使播放容器能铺满div
|
||
let divW = this.$refs.monitor.clientWidth
|
||
let divH = this.$refs.monitor.clientHeight
|
||
this.player = new EZUIKit.EZUIKitPlayer({
|
||
id: 'video-js', // 视频容器ID
|
||
accessToken: accessToken,
|
||
url: this.url,
|
||
// 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
|
||
// 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
|
||
template: 'security',
|
||
useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
|
||
// plugin: ["talk"], // 加载插件，talk-对讲 非必填
|
||
width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
|
||
height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
|
||
})
|
||
console.log(this.player);
|
||
},
|
||
getNumberStatus(index) {
|
||
if (index == 0) {
|
||
return '静止状态'
|
||
} else if (index == 1) {
|
||
return '正向打开中'
|
||
} else if (index == 2) {
|
||
return '反向关闭中'
|
||
} else {
|
||
return ''
|
||
}
|
||
},
|
||
createVideo() {
|
||
|
||
// 创建视频播放器
|
||
videojs.addLanguage('zh-CN', video_zhCN)
|
||
this.player = videojs(this.$refs.videoPlayer, {
|
||
techOrder: ['html5', 'hls'], // 优先使用HTML5播放器，如果不支持，则使用HLS
|
||
sources: [{
|
||
src: this.url, // 替换为您的.m3u8链接
|
||
type: 'application/x-mpegURL'
|
||
}],
|
||
autoplay: true, // 自动播放
|
||
controls: true, // 显示控制条
|
||
language: 'zh-CN'
|
||
});
|
||
},
|
||
countData100(data) {
|
||
var num = 0
|
||
if (data) {
|
||
num = data / 100
|
||
} else {
|
||
num = 0
|
||
}
|
||
return num
|
||
},
|
||
//countType计算类型
|
||
//0是原数据
|
||
//1是原数据-400
|
||
//2是原数据/10
|
||
//3是(原数据-400) / 10
|
||
//4是(原数据-1000) / 10
|
||
countType1(data) {
|
||
var num = data - 400
|
||
return num.toFixed(2)
|
||
},
|
||
countType2(data) {
|
||
var num = data / 10
|
||
return num.toFixed(2)
|
||
},
|
||
countType3(data) {
|
||
|
||
var num = (data - 400) / 10
|
||
return num.toFixed(2)
|
||
},
|
||
countType4(data) {
|
||
var num = (data - 1000) / 10
|
||
return num.toFixed(2)
|
||
},
|
||
//右上角数据过滤
|
||
getControlData(item) {
|
||
var x = item.environmentData
|
||
var num = item.num
|
||
if (item.formula == '12') {
|
||
if (x < 22 || x > 337) {
|
||
return '北'
|
||
} else if (x >= 22 && x <= 67) {
|
||
return '东北'
|
||
} else if (x > 67 && x < 112) {
|
||
return '东'
|
||
} else if (x >= 112 && x <= 157) {
|
||
return '东南'
|
||
} else if (x > 157 && x < 202) {
|
||
return '南'
|
||
} else if (x >= 202 && x <= 247) {
|
||
return '西南'
|
||
} else if (x > 247 && x < 292) {
|
||
return '西'
|
||
} else if (x >= 292 && x <= 337) {
|
||
return '西北'
|
||
}
|
||
} else {
|
||
return num
|
||
}
|
||
},
|
||
dataInit() {
|
||
var store = this.$store.state
|
||
var equipmentId = store.equipmentList[this.indexs - 1].deviceId
|
||
// var data = {
|
||
// equipmentId: store.equipmentList[this.indexs - 1].deviceId,
|
||
// // pattern: 0, //需要根据文档填写 //6目标ph-数值
|
||
// // regNum: 73,
|
||
// };
|
||
var formData = {
|
||
equipmentId: store.equipmentList[this.indexs - 1].deviceId
|
||
}
|
||
var list = store.typeList
|
||
if (this.deviceName == 1) {
|
||
this.api.postRtdata(equipmentId).then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.inputData = res.data.data;
|
||
this.list = []
|
||
this.inputData.forEach((el, index) => {
|
||
list.forEach((el1, index1) => {
|
||
if (el.formula == el1.value) {
|
||
var num = 0
|
||
var name = ''
|
||
// if(el1.countType==1){
|
||
// num=this.countType1(el.environmentData)+el1.unit
|
||
// }else if(el1.countType==2){
|
||
// num=this.countType2(el.environmentData)+el1.unit
|
||
// }else if(el1.countType==3){
|
||
// num=this.countType3(el.environmentData)+el1.unit
|
||
// }else{
|
||
num = el.environmentData + el1.unit
|
||
// }
|
||
if (el.equipmentNumber == 0) {
|
||
if (el.targetValue == 1) {
|
||
name = '目标' + el.environmentDataId
|
||
} else {
|
||
name = '1#平均' + el.environmentDataId
|
||
}
|
||
} else if (el.equipmentNumber == 15) {
|
||
if (el.targetValue == 1) {
|
||
name = '目标' + el.environmentDataId
|
||
} else {
|
||
name = '2#平均' + el.environmentDataId
|
||
}
|
||
} else {
|
||
name = el.equipmentNumber + '#' + el.environmentDataId
|
||
}
|
||
|
||
this.list.push({
|
||
...el,
|
||
name: name,
|
||
num: num,
|
||
img: require(`../../assets/image/real-time-${el.formula}.png`)
|
||
|
||
})
|
||
|
||
}
|
||
})
|
||
})
|
||
} else {
|
||
// this.$message.error(res.data.msg);
|
||
}
|
||
});
|
||
var data1 = store.equipmentList[this.indexs - 1].deviceId
|
||
|
||
this.api.postFsdata(data1).then(res => {
|
||
if (res.data.code == 200) {
|
||
var chartsData = res.data.data
|
||
realTimeLine('realTime-line', chartsData)
|
||
} else {
|
||
// this.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
var nowDevice = store.equipmentList[this.indexs - 1]
|
||
var data2 = {
|
||
cameraid: nowDevice.cameraSerialNumber,
|
||
channelid: nowDevice.cameraChannelNumber
|
||
}
|
||
|
||
//当前没有设备 默认写死 后续有数据需要改回去
|
||
// var data2 = {
|
||
// cameraid: 'L18357958',
|
||
// channelid: '1'
|
||
// }
|
||
if (!this.player) {
|
||
this.api.getGethls(data2).then(res => {
|
||
if (res.data.code == 200) {
|
||
this.url = res.data.data.ezopen
|
||
this.createVideoNew(res.data.data.accesstoken)
|
||
}
|
||
})
|
||
}
|
||
|
||
} else if (this.deviceName == 10) {
|
||
this.api.getControlRtdata(equipmentId).then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.inputData = res.data.data;
|
||
this.list = []
|
||
this.inputData.forEach((el, index) => {
|
||
list.forEach((el1, index1) => {
|
||
if (el.formula == el1.value) {
|
||
var num = 0
|
||
var name = ''
|
||
// if(el1.countType==1){
|
||
// num=this.countType1(el.environmentData)+el1.unit
|
||
// }else if(el1.countType==2){
|
||
// num=this.countType2(el.environmentData)+el1.unit
|
||
// }else if(el1.countType==3){
|
||
// num=this.countType3(el.environmentData)+el1.unit
|
||
// }else{
|
||
num = el.environmentData + el1.unit
|
||
// }
|
||
if (el.equipmentNumber == 0) {
|
||
if (el.targetValue == 1) {
|
||
name = '目标' + el.environmentDataId
|
||
} else {
|
||
name = '1#平均' + el.environmentDataId
|
||
}
|
||
} else if (el.equipmentNumber == 15) {
|
||
if (el.targetValue == 1) {
|
||
name = '目标' + el.environmentDataId
|
||
} else {
|
||
name = '2#平均' + el.environmentDataId
|
||
}
|
||
} else {
|
||
name = el.equipmentNumber + '#' + el.environmentDataId
|
||
}
|
||
|
||
this.list.push({
|
||
...el,
|
||
name: name,
|
||
num: num,
|
||
img: require(`../../assets/image/real-time-${el.formula}.png`)
|
||
|
||
})
|
||
|
||
}
|
||
})
|
||
})
|
||
} else {
|
||
// this.$message.error(res.data.msg);
|
||
}
|
||
});
|
||
this.api.getControlRtDatastation(formData).then(res => {
|
||
this.controlList = []
|
||
if (res.data.code == 200) {
|
||
res.data.data.forEach((el, index) => {
|
||
list.forEach((el1, index1) => {
|
||
if (el.formula == el1.value) {
|
||
// console.log(el1);
|
||
var num = el.environmentData + el1.unit
|
||
this.controlList.push({
|
||
...el,
|
||
num: num,
|
||
img: require(`../../assets/image/real-time-${el.formula}.png`)
|
||
})
|
||
}
|
||
})
|
||
})
|
||
}
|
||
// console.log(this.controlList);
|
||
})
|
||
|
||
this.getStatus()
|
||
clearInterval(this.statusInterval) && this.statusInterval
|
||
this.statusInterval = setInterval(() => {
|
||
if (this.deviceName == 10) {
|
||
this.getStatus()
|
||
}
|
||
}, this.statusTime * 1000);
|
||
var data1 = store.equipmentList[this.indexs - 1].deviceId
|
||
|
||
this.api.getControlFsdata(data1).then(res => {
|
||
if (res.data.code == 200) {
|
||
var chartsData = res.data.data
|
||
realTimeLine('realTime-line', chartsData)
|
||
} else {
|
||
// this.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
var nowDevice = store.equipmentList[this.indexs - 1]
|
||
var data2 = {
|
||
cameraid: nowDevice.cameraSerialNumber,
|
||
channelid: nowDevice.cameraChannelNumber
|
||
}
|
||
|
||
//当前没有设备 默认写死 后续有数据需要改回去
|
||
// var data2 = {
|
||
// cameraid: 'L18357958',
|
||
// channelid: '1'
|
||
// }
|
||
if (!this.player) {
|
||
this.api.getGethls(data2).then(res => {
|
||
// console.log(res.data, 11);
|
||
if (res.data.code == 200) {
|
||
this.url = res.data.data.ezopen
|
||
this.createVideoNew(res.data.data.accesstoken)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
},
|
||
getStatus() {
|
||
var store = this.$store.state
|
||
var TargetValue = {
|
||
deviceId: store.equipmentList[this.indexs - 1].deviceId
|
||
}
|
||
this.api.getControlGetState(TargetValue).then(res => {
|
||
if (res.data.code == 200) {
|
||
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.statusList = []
|
||
this.fanStatus = {
|
||
name: '风机', open: 0, status: []
|
||
}
|
||
this.$forceUpdate();
|
||
// this.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
},
|
||
getTime() {
|
||
this.time = getnowtime()
|
||
const that = this
|
||
setInterval(() => {
|
||
that.time = getnowtime()
|
||
}, 1000);
|
||
},
|
||
},
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.video-js-select-quality-item {
|
||
color: rgba(0, 0, 0, 0.85) !important;
|
||
}
|
||
|
||
.set-status-blue {
|
||
color: #409eff;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.set-status-red {
|
||
color: red;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.del-text {
|
||
color: #000;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.color-blue {
|
||
span {
|
||
color: #409eff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.status-save {
|
||
width: 45px;
|
||
height: 28px;
|
||
text-align: center;
|
||
border-radius: 4px;
|
||
border: 1px solid #dcdfe6;
|
||
color: #606266;
|
||
font-size: 14px;
|
||
}
|
||
</style> |