| | |
| | | </template> |
| | | </el-table-column> |
| | | <!-- <el-table-column label="跳转实时" prop=""> |
| | | |
| | | |
| | | </el-table-column> --> |
| | | </el-table> |
| | | </div> |
| | |
| | | prop="open"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-form> |
| | | </el-form> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | |
| | | </el-row> |
| | | <el-row> |
| | | <el-col span="12"> |
| | | <el-form-item label="负责人"> |
| | | <el-form-item label="主要负责人"> |
| | | <el-input |
| | | disabled="true" |
| | | v-model="detailsData.person" |
| | |
| | | v-model="detailsData.user" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-form-item> |
| | | </el-col> --> |
| | | <el-col span="12"> |
| | | <el-form-item label="序列号"> |
| | |
| | | <!-- <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> --> |
| | |
| | | }); |
| | | }); |
| | | }, |
| | | stetDetails(d, imgdata) { |
| | | stetDetails(c, imgdata) { |
| | | this.name = "无数据" && this.a.deviceName; |
| | | //设备状态 |
| | | // [grey,green,red][ |
| | | // onlineStatus = 0, |
| | | // onlineStatus = 1, |
| | | // state!= "", |
| | | // jtype != 2 |
| | | // ] |
| | | var states, |
| | | o = this.a.onlineStatus, |
| | | s = this.a.state, |
| | | j = this.a.jtype; |
| | | // if (o == 0) { |
| | | // states = "掉线"; |
| | | // } else if (o == 1) { |
| | | // states = "在线"; |
| | | // } else if (s != "") { |
| | | // states = "故障"; |
| | | // } else if (j != 2) { |
| | | // states = "预警"; |
| | | // } |
| | | if (s != "") { |
| | | d = this.a.dtype; |
| | | if (d == 0) { |
| | | states = "掉线"; |
| | | } else if (d == 1) { |
| | | states = "正常"; |
| | | } else if (d == 3) { |
| | | states = "故障"; |
| | | } else { |
| | | if (j != 1) { |
| | | if (o == 1) { |
| | | states = "正常"; |
| | | } else { |
| | | states = "掉线"; |
| | | } |
| | | } else { |
| | | states = "预警"; |
| | | } |
| | | } else if (d == 2) { |
| | | states = "预警"; |
| | | } |
| | | // console.log(o, 1000); |
| | | // console.log(s, 1000); |
| | | // console.log(j, 1000); |
| | | |
| | | // console.log(states, 1000); |
| | | this.state = states; |
| | | |
| | | this.evaluate = "空气质量"; |
| | |
| | | installation: this.a.stime, // 安装时间 |
| | | heartbeat: this.a.heartbeat, // 心跳时间 |
| | | }; |
| | | this.form = d; |
| | | this.form = c; |
| | | }, |
| | | getdataG() { |
| | | var dataG = { |
| | |
| | | this.startEcharts01(); |
| | | }, |
| | | getMap() { |
| | | window.frames[0].init("DetailMap", { |
| | | window.frames[1].init("DetailMap", { |
| | | x: this.a.jd, |
| | | y: this.a.wd, |
| | | }); |
| | |
| | | // console.log(this.$store.state) |
| | | }, |
| | | //获取视频 |
| | | openRealVideoBox(serialNumber, channelNumber) { |
| | | openRealVideoBox(serialNumber, channelNumber,deviceNumber,manufacturer) { |
| | | var that = this; |
| | | var newAxios = axios.create({ |
| | | baseURL: "https://web.byisf.com:18000", |
| | | withCredentials: false, |
| | | headers: { |
| | | "Content-type": "application/x-www-form-urlencoded", |
| | | }, |
| | | }); |
| | | 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_conversationDataL" |
| | | ); |
| | | 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: |
| | | 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; |
| | | } |
| | | |
| | | if (manufacturer == "HK"){ |
| | | axios |
| | | .get( |
| | | `/api/blade-jfpts/equipment/equipment/selectEquimentPlayInfo?number=${deviceNumber}&bmp=m3u8&manufacturer=${manufacturer}` |
| | | ) |
| | | .then((result) => { |
| | | that.videoSource = result.data.data.data.url; |
| | | if (Hls.isSupported()) { |
| | | var dom = document.getElementById( |
| | | "real_video_conversationDataL" |
| | | ); |
| | | 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: |
| | | 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{ |
| | | var res = that.a; |
| | | if (res.deviceName.indexOf("(象湖院区)") != -1 || res.deviceName.indexOf("(东湖院区)") != -1){ |
| | | debugger |
| | | var dom = document.getElementById( |
| | | "real_video_conversationDataL" |
| | | ); |
| | | dom.src = res.netType; |
| | | dom.play(); |
| | | return; |
| | | } |
| | | |
| | | var newAxios = axios.create({ |
| | | baseURL: "https://web.byisf.com:18000", |
| | | withCredentials: false, |
| | | headers: { |
| | | "Content-type": "application/x-www-form-urlencoded", |
| | | }, |
| | | }); |
| | | 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_conversationDataL" |
| | | ); |
| | | 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: |
| | | 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; |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | created() { |
| | |
| | | this.a = this.$route.query; |
| | | this.$store.commit("SET_DATAL", this.a);//每次都缓存在vuex中,如果没有从正确路径进来,则使用缓存 |
| | | } |
| | | console.log(this.a); |
| | | // console.log(this.a); |
| | | this.baseUrl = `/map/index.html?ISinit=1&openid=DetailMap&jd=${this.a.jd}&wd=${this.a.wd}`; |
| | | this.myDeviceNumber = this.a.deviceNumber; |
| | | // console.log(this.a); |
| | |
| | | // this.doEvents(); |
| | | // var timel = setTimeout(() => { |
| | | this.$refs.detailMap.onload = () => { |
| | | // window.frames[0].init("DetailMap", { |
| | | // window.frames[1].init("DetailMap", { |
| | | // x: this.a.jd, |
| | | // y: this.a.wd, |
| | | // }); |
| | | if (window.frames[0].init) { |
| | | if (window.frames[1].init) { |
| | | this.getMap(); |
| | | } else { |
| | | // this.re(); |
| | | console.log(`没有找到到window.frames[0].init`); |
| | | console.log(`没有找到到window.frames[1].init`); |
| | | } |
| | | }; |
| | | }, |
| | |
| | | activeName() { |
| | | if (this.activeName == "third") { |
| | | this.i++; |
| | | this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber); |
| | | this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber,this.a.deviceNumber,this.a.manufacturers); |
| | | } else { |
| | | var dom = document.getElementById("real_video_conversationDataL"); |
| | | if (dom.getAttribute("src") != "") { |
| | |
| | | }; |
| | | </script> |
| | | <style lang="scss" > |
| | | video::-webkit-media-controls-timeline { |
| | | display: none; |
| | | } |
| | | #Lour { |
| | | width: 100%; |
| | | font-size: 14px; |
| | |
| | | video::-webkit-media-controls-timeline { |
| | | display: none; |
| | | } |
| | | </style> |
| | | </style> |