<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>Document</title>
|
<link rel="stylesheet" href="../style/FlareClusterLayer_v3.css">
|
<script src='../../lib/jquery.js'></script>
|
<script src='../js/FlareClusterLayer_v3.js'></script>
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
|
<!-- element ui -->
|
<link rel="stylesheet" href="../../lib/elementUi.css">
|
<script src="../../lib/elementUi.js"></script>
|
<!-- axios -->
|
<script src='../../lib/axios.js'></script>
|
<!-- 视频 -->
|
<script src='../../../realVideo/hls.js'></script>
|
<!-- layui -->
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
|
<style>
|
a:hover {
|
color: white;
|
}
|
|
body {
|
width: 360px;
|
height: 484px;
|
overflow: hidden;
|
}
|
|
#appliutwo {
|
width: 330px;
|
height: 484px;
|
border-radius: 10px;
|
margin: 16px 15px 16px 15px;
|
overflow: hidden;
|
/* border: springgreen solid 0.5px; */
|
}
|
|
.flare-liu-top {
|
width: 330px;
|
height: 90px;
|
/* border: rgb(211, 154, 31) solid 0.5px; */
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
color: white;
|
border-radius: 5px 5px 5px 5px;
|
}
|
|
.f-l-t-heard {
|
width: 300px;
|
height: 30px;
|
font-size: 18px;
|
font-family: PingFangSC-Regular;
|
}
|
|
.f-l-t-right {
|
width: 300px;
|
height: 28px;
|
display: flex;
|
align-items: center;
|
color: white;
|
justify-content: space-around;
|
}
|
|
.f-l-t-center {
|
width: auto;
|
position: relative;
|
left: -103px;
|
top: 5px;
|
}
|
|
.f-l-t-r-msg {
|
width: 200px;
|
height: 28px;
|
position: relative;
|
top: 10px;
|
left: -5px;
|
}
|
|
.f-l-t-r-but {
|
width: 72.531px;
|
height: 28px;
|
line-height: 28px;
|
text-align: center;
|
background: rgba(255, 255, 255, .2);
|
color: white;
|
/* border: wheat 1px solid; */
|
}
|
|
.f-l-t-r-but a {
|
color: white;
|
width: 48.52px;
|
height: 16px;
|
}
|
|
.flare-liu-body {
|
width: 330px;
|
height: 361px;
|
/* border: rgb(106, 20, 187) solid 0.5px; */
|
|
}
|
|
.r-b-top {
|
height: 250px;
|
display: flex;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.r-b-t-main {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
padding: 10px 0 10px 0;
|
/* border: rgb(211, 154, 31) solid 0.5px; */
|
|
margin-bottom: 5px;
|
}
|
|
.r-b-t-left {
|
display: block;
|
width: 27%;
|
|
}
|
|
.r-b-t-right {
|
display: block;
|
width: 70%;
|
color: #5d5d5d;
|
font-size: 12px;
|
|
}
|
|
.r-b-t-r-label {
|
float: left;
|
margin-right: 10px;
|
padding: 0 10px 0 10px;
|
/* border: 1px solid rgba(0, 0, 0, 0.5); */
|
border-radius: 5px;
|
}
|
|
.r-b-t-r-imgsl {
|
|
float: left;
|
padding: 0 3px 0 3px;
|
}
|
|
.el-tabs__content {
|
height: 360px;
|
}
|
|
.el-tabs__active-bar {
|
background-color: aquamarine;
|
}
|
|
.el-tabs__item.is-active,
|
.el-tabs__item:hover {
|
color: #5d5d5d;
|
}
|
|
video::-webkit-media-controls-timeline {
|
display: none;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="appliutwo" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
|
<!-- 从layui传值给iframe 的占位input -->
|
<!-- <div class="aaa bbb">13223456745</div> -->
|
<input type="text" id="sidIput" ref="sidIput" style="display: none;">
|
<div class="flare-liu-top">
|
<div class="f-l-t-heard">{{name}}</div>
|
<div class="f-l-t-center">{{machineCode}}</div>
|
<div class="f-l-t-right">
|
<div class="f-l-t-r-msg">{{statesss}}</div>
|
<div class="f-l-t-r-but"> <a href="#" @click="looks">查看详情</a> </div>
|
</div>
|
</div>
|
<div class="flare-liu-body" v-if="'start'">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="基本信息" name="first">
|
<div class="r-b-top">
|
<div class="r-b-t-main">
|
<span class="r-b-t-left">设备名称</span>
|
<span class="r-b-t-right">{{ name }}</span>
|
</div>
|
<div class="r-b-t-main">
|
<span class="r-b-t-left">使用方</span>
|
<span class="r-b-t-right">{{ deptname }}</span>
|
</div>
|
<div class="r-b-t-main">
|
<span class="r-b-t-left">设备联系人</span>
|
<span class="r-b-t-right">{{ contacts }}: {{ calls }}</span>
|
</div>
|
<!-- 设备标签待定 -->
|
<!-- <div class="r-b-t-main">
|
<span class="r-b-t-left">设备标签</span>
|
<span class="r-b-t-right">
|
<div
|
class="r-b-t-r-label"
|
v-for="(value,index) in labels"
|
:key="index"
|
>
|
{{value}}
|
</div>
|
</span>
|
</div> -->
|
<!-- 图暂时没有 -->
|
<div class="r-b-t-main">
|
<span class="r-b-t-left" style="position: relative; top: -27px">部署图片</span>
|
<span class="r-b-t-right">
|
<div class="r-b-t-r-imgsl" v-for="(value, index) in imgsl" :key="index">
|
<!-- <el-image style="width: 68px; height: 68px" :src="value" :preview-src-list="imgsl"
|
v-show="value != 'no'"> -->
|
<el-image style="width: 68px; height: 68px" :src="value" v-show="value != 'no'">
|
</el-image>
|
<div v-show="value == 'no'" style="
|
width: 68px;
|
height: 68px;
|
text-algin: center;
|
color: rgba(0, 0, 0, 0.5);
|
">
|
无图片
|
</div>
|
</div>
|
</span>
|
</div>
|
<div class="r-b-t-main">
|
<span class="r-b-t-left">部署时间</span>
|
<span class="r-b-t-right">{{ deploymentTime }}</span>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="现场视频" name="second">
|
<video style="height: auto;width: 100%;" controls="controls" id="real_video_conversation" src="">
|
</video>
|
</el-tab-pane>
|
<!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
|
</el-tabs>
|
</div>
|
</div>
|
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
|
<script>
|
// var index = parent.layer.getFrameIndex(window.name);
|
|
</script>
|
<script>
|
var me = new Vue({
|
el: '#appliutwo',
|
data: {
|
num: '',
|
name: '',
|
statesss: '',
|
// start:false,
|
//详细信息data
|
ourData: '',
|
// names: '',
|
contacts: '',
|
deptname: '',//使用方
|
ourd: '',//视频data
|
calls: '',
|
imgsl: [],
|
deploymentTime: '',
|
oldtime: '',
|
newtime: '',
|
machineCode: '',
|
|
a: true,
|
activeName: 'first'
|
},
|
methods: {
|
looks() {
|
window.parent.parent.location.hash = `#/dataL/dataL?id=${this.ourData.id}&deviceName=${this.ourData.deviceName}&deviceNumber=${this.ourData.deviceNumber}&deviceType=${this.ourData.deviceType}&ownership=${this.ourData.ownership}&ownerId=&devicestate=${this.ourData.devicestate}&stime=${this.ourData.stime}&parentId=${this.ourData.parentId}&jd=${this.ourData.jd}&wd=${this.ourData.wd}&street=${this.ourData.street}&dtype=${this.ourData.dtype}&serialNumber=${this.ourData.serialNumber}&stype=&channelNumber=${this.ourData.channelNumber}&pay=&expireTime=${this.ourData.expireTime}&heartbeat=${this.ourData.heartbeat}&province=${this.ourData.province}&city=${this.ourData.city}&district=${this.ourData.district}&state=${this.ourData.state}&reason=&deptId=${this.ourData.deptId}&onePhone=${this.ourData.onePhone}&twoPhone=${this.ourData.twoPhone}&oneId=${this.ourData.oneId}&twoId=&threeId=&oneContacts=${this.ourData.oneContacts}&twoContacts=${this.ourData.twoContacts}&type=${this.ourData.type}&beginTime=&endTime=&pid=${this.ourData.pid}&onlineStatus=${this.ourData.onlineStatus}&jtype=${this.ourData.jtype}&threePhone=${this.ourData.threePhone}&threeContacts=${this.ourData.threeContacts}`;
|
},
|
getdatas(dat) {
|
|
var xhr = null
|
, my = this
|
, url = '/api/depl/selectInfo?deviceNumber=' + dat.deviceNumber;
|
if (XMLHttpRequest) { //http请求
|
xhr = new XMLHttpRequest();
|
} else {
|
xhr = new ActiveXObject("Microsoft.XMLHTTP");
|
|
}
|
xhr.open("post", url, true);
|
xhr.send();
|
xhr.onreadystatechange = function () {
|
if (xhr.readyState === 4) {
|
if (xhr.status === 200) {
|
// 判断isJson是否传进来了
|
var imgD = JSON.parse(xhr.responseText);// JSON转js
|
// console.log(imgD)
|
var imgdatas = [];
|
if (imgD.data.length != 0) {
|
if (imgD.data[0].paddress.length != 0) {
|
imgdatas = imgD.data[0].paddress.split(',');
|
} else {
|
my.imgsl = imgdatas.length == 0 ? ['no'] : imgdatas;
|
}
|
} else {
|
|
}
|
// var imgdatas = imgD.data[0].paddress.split(',');
|
my.imgsl = imgdatas.length == 0 ? ['no'] : imgdatas;
|
// my.imgsl = [ //最多3张照片
|
// "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
|
|
// "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
|
// "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
|
// ]
|
// console.log(imgD, my.imgsl);
|
}
|
}
|
}
|
this.name = dat.deviceName.length >= 15 ? dat.deviceName.substring(0, 15) + '···' : dat.deviceName;
|
me.num = dat.deviceNumber;
|
this.evaluate = "空气质量";
|
this.machineCode = "无数据" && dat.deviceNumber;
|
this.smoke = "烟雾";
|
this.proportion = "电量";
|
this.ReportTime = "最近上报：" + dat.heartbeat;
|
this.contacts = "无数据" && dat.oneContacts;
|
this.calls = "无数据" && dat.onePhone;
|
this.labels = ["无数据"] && [dat.deviceType];
|
// var imgD = ["no"];
|
// this.imgsl = ["no"] && imgD;
|
this.deploymentTime = "无数据" && dat.stime;
|
|
var ct = document.getElementsByClassName('flare-liu-top')[0];
|
var cordActive = document.getElementsByClassName('el-tabs__active-bar')[0];//滑块背景颜色
|
|
// if (dat.state != '') {
|
// ct.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
|
// cordActive.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
|
// this.statesss = '故障';
|
// } else {
|
// if (dat.jtype != 1) {
|
// if (dat.onlineStatus == 1) {//el-tabs__active-bar
|
// ct.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
|
// cordActive.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
|
// this.statesss = '在线';
|
// } else {
|
// ct.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
|
// cordActive.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
|
// this.statesss = '离线';
|
// }
|
// } else {
|
// ct.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
|
// cordActive.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
|
// this.statesss = '警报';
|
// }
|
// }
|
if (dat.dtype == 3) {
|
ct.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
|
cordActive.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
|
this.statesss = '故障';
|
} else if (dat.dtype == 1) {//el-tabs__active-bar
|
ct.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
|
cordActive.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
|
this.statesss = '正常';
|
} else if (dat.dtype == 0) {
|
ct.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
|
cordActive.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
|
this.statesss = '离线';
|
|
} else if (dat.dtype == 2) {
|
ct.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
|
cordActive.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
|
this.statesss = '预警';
|
}
|
|
|
},
|
getUser(dat) {
|
var xhr = null
|
, my = this
|
, url = '/api/equipment/equipment/detail?id=' + dat;
|
// if (XMLHttpRequest) { //http请求
|
// xhr = new XMLHttpRequest();
|
// } else {
|
// xhr = new ActiveXObject("Microsoft.XMLHTTP");
|
|
// }
|
// xhr.open("get", url, true);
|
// xhr.send();
|
// xhr.onreadystatechange = function () {
|
// if (xhr.readyState === 4) {
|
// if (xhr.status === 200) {
|
// // 判断isJson是否传进来了
|
// var data = JSON.parse(xhr.responseText);// JSON转js
|
// my.ourd = data.data;
|
// my.deptname = my.ourd.deptName;
|
// }
|
// }
|
// }
|
axios.get(url).then((res) => {
|
console.log(typeof res,34234534345341)
|
var data = JSON.parse(res);// JSON转js
|
my.ourd = data.data;
|
my.deptname = my.ourd.deptName;
|
})
|
|
},
|
handleClick(tab, event) {//标签tab点击事件
|
// console.log(tab, event);
|
},
|
openRealVideoBox(serialNumber, channelNumber) {
|
var that = this;
|
var newAxios = axios.create({
|
baseURL: "https://web.byisf.com:18000",
|
withCredentials: false,
|
headers: {
|
"Content-type": "application/x-www-form-urlencoded",
|
},
|
});
|
|
//this.form.serialNumber
|
newAxios
|
.post(
|
"/api_control",
|
{},
|
{
|
params: {
|
param: JSON.stringify({ PktType: "GetAccessToken" }),
|
},
|
}
|
)
|
.then((res) => {
|
newAxios
|
.get(
|
`https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
|
)
|
.then((result) => {
|
that.videoSource = result.data.data.m3u8;
|
if (Hls.isSupported()) {
|
var dom = document.getElementById("real_video_conversation");
|
that.hls = new Hls();
|
var m3u8Url = decodeURIComponent(that.videoSource);
|
that.hls.loadSource(m3u8Url);
|
that.hls.attachMedia(dom);
|
that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
dom.play();
|
});
|
that.hls.on(Hls.Events.ERROR, function (event, data) {
|
// console.log(data, 4566824159, "视频播放有问题！！！");
|
if (data.fatal) {
|
switch (data.type) {
|
case Hls.ErrorTypes.NETWORK_ERROR:
|
// try to recover network error
|
console.log(
|
"fatal network error encountered, try to recover"
|
);
|
that.hls.startLoad();
|
break;
|
case Hls.ErrorTypes.MEDIA_ERROR:
|
console.log(
|
"fatal media error encountered, try to recover"
|
);
|
that.hls.recoverMediaError();
|
break;
|
}
|
}
|
})
|
}
|
})
|
})
|
}
|
},
|
watch: {
|
activeName() {
|
if (this.activeName == "second") {
|
this.i++;
|
this.openRealVideoBox(this.ourd.serialNumber, this.ourd.channelNumber);
|
} else {
|
var dom = document.getElementById("real_video_conversation");
|
if (dom.getAttribute("src") != "") {
|
dom.pause();
|
dom.setAttribute("src", "");
|
this.hls.destroy();
|
}
|
}
|
},
|
},
|
mounted() {
|
this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
|
clearTimeout(this.oldtime);
|
// console.log(this.$refs.sidIput.value)
|
this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
|
this.getUser(this.ourData.id);
|
// console.log(this.ourData);
|
this.getdatas(this.ourData);
|
}, 50);
|
|
|
}
|
})
|
</script>
|
</body>
|
|
</html>
|
