| | |
|---|
| | | <!-- 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> |
|---|
| | |
|---|
| | | .el-tabs__item:hover { |
|---|
| | | color: #5d5d5d; |
|---|
| | | } |
|---|
| | | |
|---|
| | | video::-webkit-media-controls-timeline { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | |
|---|
| | | <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> |
|---|
| | |
|---|
| | | <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> |
|---|
| | |
|---|
| | | <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; |
|---|
| | |
|---|
| | | </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> |
|---|
| | |
|---|
| | | num: '', |
|---|
| | | name: '', |
|---|
| | | statesss: '', |
|---|
| | | // start:false, |
|---|
| | | //详细信息data |
|---|
| | | ourData: '', |
|---|
| | | // names: '', |
|---|
| | | contacts: '', |
|---|
| | | deptname: '',//使用方 |
|---|
| | | ourd: '',//视频data |
|---|
| | | calls: '', |
|---|
| | | imgsl: [], |
|---|
| | | deploymentTime: '', |
|---|
| | |
|---|
| | | }, |
|---|
| | | 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) { |
|---|
| | | |
|---|
| | |
|---|
| | | 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 { |
|---|
| | | |
|---|
| | | } |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | 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); |
|---|
| | | }, 20); |
|---|
| | | }, 50); |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
