From 8aa3edd56c279100c9053576f3e90fa55459fe77 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Mon, 16 Jan 2023 16:15:55 +0800
Subject: [PATCH] 修改
---
public/map/popup/html/FlareClusterLayer_v3 copy.html | 272 +++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 238 insertions(+), 34 deletions(-)
diff --git a/public/map/popup/html/FlareClusterLayer_v3 copy.html b/public/map/popup/html/FlareClusterLayer_v3 copy.html
index 742ea32..f60bc73 100644
--- a/public/map/popup/html/FlareClusterLayer_v3 copy.html
+++ b/public/map/popup/html/FlareClusterLayer_v3 copy.html
@@ -12,7 +12,10 @@
<!-- 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>
@@ -114,6 +117,8 @@
justify-content: space-between;
padding: 10px 0 10px 0;
+ /* border: rgb(211, 154, 31) solid 0.5px; */
+
margin-bottom: 5px;
}
@@ -135,7 +140,7 @@
float: left;
margin-right: 10px;
padding: 0 10px 0 10px;
- border: 1px solid rgba(0, 0, 0, 0.5);
+ /* border: 1px solid rgba(0, 0, 0, 0.5); */
border-radius: 5px;
}
@@ -143,6 +148,10 @@
float: left;
padding: 0 3px 0 3px;
+ }
+
+ .el-tabs__content {
+ height: 360px;
}
.el-tabs__active-bar {
@@ -153,6 +162,10 @@
.el-tabs__item:hover {
color: #5d5d5d;
}
+
+ video::-webkit-media-controls-timeline {
+ display: none;
+ }
</style>
</head>
@@ -160,7 +173,7 @@
<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">
+ <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>
@@ -169,13 +182,17 @@
<div class="f-l-t-r-but"> <a href="#" @click="looks">查看详情</a> </div>
</div>
</div>
- <div class="flare-liu-body">
+ <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>
@@ -185,12 +202,12 @@
<!-- <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"
+ <div
+ class="r-b-t-r-label"
+ v-for="(value,index) in labels"
:key="index"
>
- {{value}}
+ {{value}}
</div>
</span>
</div> -->
@@ -199,8 +216,9 @@
<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" :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;
@@ -219,6 +237,10 @@
</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>
@@ -229,16 +251,20 @@
</script>
<script>
+
var me = new Vue({
el: '#appliutwo',
data: {
num: '',
name: '',
statesss: '',
+ // start:false,
//详细信息data
ourData: '',
// names: '',
contacts: '',
+ deptname: '',//使用方
+ ourd: '',//视频data
calls: '',
imgsl: [],
deploymentTime: '',
@@ -251,7 +277,7 @@
},
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=&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}`;
+ 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) {
@@ -271,17 +297,20 @@
if (xhr.status === 200) {
// 判断isJson是否传进来了
var imgD = JSON.parse(xhr.responseText);// JSON转js
- console.log(imgD)
-
+ // console.log(imgD)
var imgdatas = [];
if (imgD.data.length != 0) {
- imgdatas = imgD.data[0].paddress.split(',');
+ 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张照片
+ // my.imgsl = [ //最多3张照片
// "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
// "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
@@ -308,39 +337,214 @@
var ct = document.getElementsByClassName('flare-liu-top')[0];
var cordActive = document.getElementsByClassName('el-tabs__active-bar')[0];//滑块背景颜色
- if (dat.state != '') {
+ // 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.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 = '警报';
- }
+ } 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/blade-jfpts/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 = res;// JSON转js
+ my.ourd = data.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",
+ },
+ });
+
+
+ if (that.ourd.manufacturers == "HK") {
+
+ axios({
+ method: "get",
+ url: `/api/blade-jfpts/equipment/equipment/selectEquimentPlayInfo?`,
+ params: {
+ number: that.ourd.deviceNumber,
+ },
+ }).then((res) => {
+ that.videoSource = res.data.data.data.url;
+ 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;
+ }
+ }
+ })
+ }
+ });
+
+
+ }else{
+ //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);
- }, 20);
+ }, 50);
}
@@ -348,4 +552,4 @@
</script>
</body>
-</html>
\ No newline at end of file
+</html>
--
Gitblit v1.9.3