Skip to content

Z
zhxf_vue
Commit 4b937855 authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

tj

parent 970a1d36
Show whitespace changes
Inline Side-by-side
Showing with 795 additions and 698 deletions
src/pages/ol/demo/no-query-detail.vue
View file @ 4b937855
...@@ -152,47 +152,58 @@ import { mapState } from 'vuex' ...@@ -152,47 +152,58 @@ import { mapState } from 'vuex'
import { isAuth } from '../../../util' import { isAuth } from '../../../util'
export default { export default {
computed: { computed: {
...mapState('d2admin/user', [ ...mapState('d2admin/user', ['info']),
'info' ...mapState('d2admin/typeList', ['typeList'])
]),
fsyList() {
return this.$store.state.d2admin.typeList.typeList.fsyList
},
fyyList() {
return this.$store.state.d2admin.typeList.typeList.fyyList
},
hjtcqList() {
return this.$store.state.d2admin.typeList.typeList.hjtcqList
},
lljList() {
return this.$store.state.d2admin.typeList.typeList.lljList
},
wxyljList() {
return this.$store.state.d2admin.typeList.typeList.wxyljList
},
wxywyList() {
return this.$store.state.d2admin.typeList.typeList.wxywyList
}
}, },
watch: { watch: {
typeList: { typeList: {
handler(n, o) { handler(n, o) {
if (n) { if (n) {
this.setDataList()
} }
}, },
deep: true deep: true
} }
}, },
data () { data() {
return { return {
params: [], params: [],
video1: 0, video1: 0,
stationId: localStorage.getItem('stationId'), stationId: localStorage.getItem('stationId'),
//11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小 //11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小
//21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描 //21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描
actionList: ['', '', '', '', '', '', '', '', '', '', '', '变倍+', '变倍-', '变焦+', '变焦-', '光圈+', '光圈-', '', '', '', '', actionList: [
'上仰', '下俯', '左转', '右转', '左上', '右上', '左下', '右下', '自动扫描'], '',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'变倍+',
'变倍-',
'变焦+',
'变焦-',
'光圈+',
'光圈-',
'',
'',
'',
'',
'上仰',
'下俯',
'左转',
'右转',
'左上',
'右上',
'左下',
'右下',
'自动扫描'
],
imgUrl: '', imgUrl: '',
imgRightUrl11: false, imgRightUrl11: false,
imgRightUrl12: false, imgRightUrl12: false,
...@@ -200,29 +211,53 @@ export default { ...@@ -200,29 +211,53 @@ export default {
imgRightUrl14: false, imgRightUrl14: false,
imgRightUrl15: false, imgRightUrl15: false,
imgRightUrl16: false, imgRightUrl16: false,
monitorList: [{ monitorList: [
{
value: '1', value: '1',
label: '监控1' label: '监控1'
}, { },
{
value: '2', value: '2',
label: '监控2' label: '监控2'
}], }
],
monitorValue: '监控1', monitorValue: '监控1',
videoSrc: '', videoSrc: '',
clickFlag: false, clickFlag: false,
camera: '', camera: '',
cameraCur: {}, cameraCur: {},
restaurants: [], restaurants: [],
dataForm: { id: 0, name: '', type: 1, lineId: '', lineName: '', stationId: '', stationName: '', tierId: '', subSystem: '', code: '', subCode: '', addressCode: '', port: '', username: '', password: '', remark: '', status: 1 } dataForm: {
id: 0,
name: '',
type: 1,
stationId: '',
stationName: '',
tierId: '',
code: '',
addressCode: '',
port: '',
username: '',
password: '',
remark: '',
status: 1
},
wxyljList: [], //无线压力计
hjtcqList: [], //4合1环境探测器
lljList: [], //流量计
wxywyList: [], //无线液位仪
fsyList: [], //风速仪
fyyList: [] //风压仪
} }
}, },
created() { created() {
console.log(this.typeList) console.log(this.typeList)
}, },
methods: { methods: {
init (item, stationId) { init(item, stationId) {
console.log('item', item) console.log('item', item)
this.clickFlag = false this.clickFlag = false
this.dataForm.id = item.id
this.dataForm.name = item.name this.dataForm.name = item.name
this.dataForm.type = item.type this.dataForm.type = item.type
this.dataForm.status = item.status this.dataForm.status = item.status
...@@ -230,69 +265,105 @@ export default { ...@@ -230,69 +265,105 @@ export default {
this.cameraCur = {} this.cameraCur = {}
this.camera = '' this.camera = ''
// this.initResource() // this.initResource()
this.params = []
switch (item.type) {
case 'b47661ca1d454f9792ba5369f3cb2bc5': ////无线压力计
this.params = this.wxyljList.filter((e) => e.resource_id == item.id)
break
case 'c788ce98c1f248f590434394da485ce4': //4合1环境探测器
this.params = this.hjtcqList.filter((e) => e.resource_id == item.id)
break
case 'b45827c068254695864ee3c1d42573cb': //流量计
this.params = this.lljList.filter((e) => e.resource_id == item.id)
break
case '303310efddb34a2e9bf269bdff8a7dc5': //无线液位仪
this.params = this.wxywyList.filter((e) => e.resource_id == item.id)
break
case 'f4c840711eae4bcb9536a890cdfda493': //风速仪
this.params = this.fsyList.filter((e) => e.resource_id == item.id)
break
case '5b26f6c8f2a143048bd0e327ca5c186d': //风压仪
this.params = this.fyyList.filter((e) => e.resource_id == item.id)
break
}
console.log('params运行状态', this.params)
},
setDataList() {
this.wxyljList = this.typeList.wxyljList //无线压力计
this.hjtcqList = this.typeList.hjtcqList //4合1环境探测器
this.lljList = this.typeList.lljList //流量计
this.wxywyList = this.typeList.wxywyList //无线液位仪
this.fsyList = this.typeList.fsyList //风速仪
this.fyyList = this.typeList.fyyList //风压仪
}, },
initResource() { initResource() {
this.video1 = 0//初始化显示默认图片 this.video1 = 0 //初始化显示默认图片
this.$http({ this.$http({
url: this.$http.adornUrlEq(`/liResource/getResourceDetails/${this.dataForm.id}`), url: this.$http.adornUrlEq(
`/liResource/getResourceDetails/${this.dataForm.id}`
),
method: 'get', method: 'get',
params: this.$http.adornParams() params: this.$http.adornParams()
}).then(data => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.dataForm = data.bean this.dataForm = data.bean
if (this.dataForm.list && this.dataForm.list.length > 0) { // if (this.dataForm.list && this.dataForm.list.length > 0) {
this.cameraCur = this.dataForm.list[0] // this.cameraCur = this.dataForm.list[0]
// console.log(this.cameraCur, '---------') // // console.log(this.cameraCur, '---------')
this.camera = this.cameraCur.id // this.camera = this.cameraCur.id
this.video1 = 1 // this.video1 = 1
this.$http({ // this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'), // url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post', // method: 'post',
data: { // data: {
id: this.cameraCur.id, // id: this.cameraCur.id,
stationId: this.cameraCur.stationId, // stationId: this.cameraCur.stationId,
userId: localStorage.getItem('userId'), // userId: localStorage.getItem('userId'),
levelType: 1, // levelType: 1,
controlType: 3 // controlType: 3
} // }
}).then(data => { // }).then(data => {
if (data && data.code === 0) { // if (data && data.code === 0) {
//视频直播 // //视频直播
var src = data.url // var src = data.url
//视频连接 // //视频连接
if (flvjs.isSupported()) { // if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer({ // this.flvPlayer = flvjs.createPlayer({
type: 'flv', // type: 'flv',
enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js // enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
isLive: true, //直播模式 // isLive: true, //直播模式
hasAudio: false, //关闭音频 // hasAudio: false, //关闭音频
hasVideo: true, // hasVideo: true,
stashInitialSize: 128, // stashInitialSize: 128,
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。 // enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
url: src // url: src
}) // })
this.$nextTick(function () { // this.$nextTick(function () {
this.flvPlayer.attachMediaElement(this.$refs.video) // this.flvPlayer.attachMediaElement(this.$refs.video)
try { // try {
this.flvPlayer.load() // this.flvPlayer.load()
// this.flvPlayer.play() // // this.flvPlayer.play()
} catch (error) { // } catch (error) {
console.log(error) // console.log(error)
} // }
}) // })
} // }
} // }
}) // })
} // }
} }
}) })
}, },
closeQueryDetailVisible() { closeQueryDetailVisible() {
this.$emit('closeQ') this.$emit('closeQ')
}, },
clickPTZControl (ptz, dwStop, img) { clickPTZControl(ptz, dwStop, img) {
// console.log(this.camera) // console.log(this.camera)
if (!this.camera || (this.cameraCur.type !== 'ece0b8b2db27411886254e81134988a3' && (ptz < 11 || ptz > 16))) { if (
!this.camera ||
(this.cameraCur.type !== 'ece0b8b2db27411886254e81134988a3' &&
(ptz < 11 || ptz > 16))
) {
return return
} }
if (!isAuth('ol:demo:corona')) { if (!isAuth('ol:demo:corona')) {
...@@ -334,22 +405,24 @@ export default { ...@@ -334,22 +405,24 @@ export default {
dwPtzCommand: ptz, //云台控制命令 dwPtzCommand: ptz, //云台控制命令
dwStop: dwStop //云台控制0开始和1结束 dwStop: dwStop //云台控制0开始和1结束
} }
}).then(data => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
if (dwStop == 0) { //云台控制0开始和1结束 if (dwStop == 0) {
this.saveLog(1, ptz)// 执行结果 成功 1 失败 2 //云台控制0开始和1结束
this.saveLog(1, ptz) // 执行结果 成功 1 失败 2
this.$message.success(data.msg) this.$message.success(data.msg)
} }
} else { } else {
if (dwStop == 0) { //云台控制0开始和1结束 if (dwStop == 0) {
this.saveLog(2, ptz)// 执行结果 成功 1 失败 2 //云台控制0开始和1结束
this.saveLog(2, ptz) // 执行结果 成功 1 失败 2
this.$message.error(data.msg) this.$message.error(data.msg)
} }
} }
}) })
}, },
//调用日志保存记录操作指令 //调用日志保存记录操作指令
saveLog (result, ptz) { saveLog(result, ptz) {
this.$http({ this.$http({
url: this.$http.adornUrlEq('/orVideoMonitor/save'), url: this.$http.adornUrlEq('/orVideoMonitor/save'),
method: 'post', method: 'post',
...@@ -361,14 +434,12 @@ export default { ...@@ -361,14 +434,12 @@ export default {
type: this.cameraCur.type, type: this.cameraCur.type,
result: result result: result
} }
}).then(data => { }).then((data) => {})
})
}, },
cameraChange (id) { cameraChange(id) {
if (id) { if (id) {
this.camera = id this.camera = id
this.dataForm.list.forEach(res => { this.dataForm.list.forEach((res) => {
if (res.id === id) { if (res.id === id) {
this.cameraCur = res this.cameraCur = res
} }
...@@ -390,7 +461,7 @@ export default { ...@@ -390,7 +461,7 @@ export default {
levelType: 1, levelType: 1,
controlType: 3 controlType: 3
} }
}).then(data => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
//视频直播 //视频直播
var src = data.url var src = data.url
...@@ -406,7 +477,7 @@ export default { ...@@ -406,7 +477,7 @@ export default {
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。 enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
url: src url: src
}) })
this.$nextTick(function () { this.$nextTick(function() {
this.flvPlayer.attachMediaElement(this.$refs.video) this.flvPlayer.attachMediaElement(this.$refs.video)
try { try {
this.flvPlayer.load() this.flvPlayer.load()
...@@ -430,164 +501,188 @@ export default { ...@@ -430,164 +501,188 @@ export default {
.el-table__body { .el-table__body {
width: 100% !important; width: 100% !important;
} }
.info-title{ .info-title {
line-height: 40px; line-height: 40px;
height: 40px; height: 40px;
padding: 0 20px; padding: 0 20px;
background-color: #e1edf4; background-color: #e1edf4;
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
font-size:16px; font-size: 16px;
font-family:Microsoft YaHei; font-family: Microsoft YaHei;
font-weight:bold; font-weight: bold;
} }
.info-video{ .info-video {
padding: 0 10px 10px; height: 160px; padding: 0 10px 10px;
height: 160px;
} }
.info-form{ .info-form {
padding: 10px 10px 0; padding: 10px 10px 0;
} }
.info-block{ .info-block {
border: 1px solid #cccccc; border: 1px solid #cccccc;
} }
.el-select{ .el-select {
width: 100%; width: 100%;
} }
.video{ .video {
width: 100%;height: 180px; width: 100%;
height: 180px;
} }
.animation{ .animation {
animation: myfirst 1s; position: absolute; top: -40px;right: 5px; width: 350px; background-color: #F4F4F4; z-index: 11; border: 1px solid rgba(195, 195, 195, 1); animation: myfirst 1s;
box-shadow:0 2px 8px 8px rgba(0,0,0,0.2) position: absolute;
top: -40px;
right: 5px;
width: 350px;
background-color: #f4f4f4;
z-index: 11;
border: 1px solid rgba(195, 195, 195, 1);
box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2);
} }
@keyframes myfirst{ @keyframes myfirst {
from {right: -500px} from {
to {right: 0} right: -500px;
}
to {
right: 0;
}
} }
.quDetailM{ .quDetailM {
width: 100%; width: 100%;
border:1px solid #BDCAD1; border: 1px solid #bdcad1;
margin-bottom: 10px; margin-bottom: 10px;
background: #fff; background: #fff;
} }
.leftP{ .leftP {
height: 30px; line-height: 30px; margin: 0; width: 100%; font-size: 14px;text-indent:10px; height: 30px;
span{ line-height: 30px;
color: #0179C1; margin: 0;
width: 100%;
font-size: 14px;
text-indent: 10px;
span {
color: #0179c1;
} }
} }
.typeInfoBox{ .typeInfoBox {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin-bottom: 5px; margin-bottom: 5px;
.typeInfo{ .typeInfo {
width: 48%; width: 48%;
height: 75px; height: 75px;
background: #fff; background: #fff;
border:1px solid #BDCAD1; border: 1px solid #bdcad1;
text-align:center; text-align: center;
margin-bottom: 5px; margin-bottom: 5px;
div{ div {
margin:5px 0; margin: 5px 0;
} }
.title{ .title {
font-size: 16px; font-size: 16px;
font-weight:600 ; font-weight: 600;
} }
.num{ .num {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #0179C1; color: #0179c1;
} }
.scope{ .scope {
font-size: 13px; font-size: 13px;
color: #5E5D5D; color: #5e5d5d;
} }
} }
} }
.operate{ .operate {
padding:5px 0; padding: 5px 0;
font-size:14px; font-size: 14px;
font-family:Microsoft YaHei; font-family: Microsoft YaHei;
font-weight:400; font-weight: 400;
color:rgba(0,0,0,1); color: rgba(0, 0, 0, 1);
border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2; border-image: linear-gradient(
border-radius:10px; 90deg,
rgba(255, 255, 255, 0.5),
rgba(213, 213, 213, 0.5),
rgba(255, 255, 255, 0.5),
rgba(218, 218, 218, 0.5),
rgba(255, 255, 255, 0.5)
)
2 2;
border-radius: 10px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.btns{ .btns {
width:150px; width: 150px;
height:150px; height: 150px;
position:relative; position: relative;
img{ img {
width:100%; width: 100%;
height:100%; height: 100%;
} }
div{ div {
cursor: pointer; cursor: pointer;
padding: 10px; padding: 10px;
} }
.s{ .s {
position: absolute; position: absolute;
top:10px; top: 10px;
left: 75px; left: 75px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.x{ .x {
position: absolute; position: absolute;
bottom:10px; bottom: 10px;
left: 75px; left: 75px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.z{ .z {
position: absolute; position: absolute;
top:75px; top: 75px;
left: 10px; left: 10px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.y{ .y {
position: absolute; position: absolute;
top:75px; top: 75px;
right:10px; right: 10px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.zs{ .zs {
position: absolute; position: absolute;
top:32px; top: 32px;
left: 32px; left: 32px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.zx{ .zx {
position: absolute; position: absolute;
bottom:32px; bottom: 32px;
left: 32px; left: 32px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.ys{ .ys {
position: absolute; position: absolute;
top:32px; top: 32px;
right:32px; right: 32px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.yx{ .yx {
position: absolute; position: absolute;
bottom:32px; bottom: 32px;
right:32px; right: 32px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.fx{ .fx {
position: absolute; position: absolute;
padding: 0; padding: 0;
cursor: default; cursor: default;
...@@ -595,16 +690,16 @@ export default { ...@@ -595,16 +690,16 @@ export default {
left: 50%; left: 50%;
width: 65px; width: 65px;
height: 65px; height: 65px;
background:#ececec; background: #ececec;
border-radius: 50%; border-radius: 50%;
line-height: 65px; line-height: 65px;
text-align: center; text-align: center;
color: #969696; color: #969696;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
} }
.ytBox{ .ytBox {
width:90px; width: 90px;
font-size: 16px; font-size: 16px;
padding: 10px 0 10px 0; padding: 10px 0 10px 0;
box-sizing: border-box; box-sizing: border-box;
...@@ -612,130 +707,133 @@ export default { ...@@ -612,130 +707,133 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
.mllx{ .mllx {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 90%; width: 90%;
span{ span {
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
width: 35%; width: 35%;
} }
} }
.bbBtn{ .bbBtn {
height: 40px; height: 40px;
display: flex; display: flex;
margin-left: 10px; margin-left: 10px;
justify-content: flex-start; justify-content: flex-start;
div{ div {
width: 40px; height: 40px; cursor: pointer; width: 40px;
img{ height: 40px;
width: 100%; height: 100%; cursor: pointer;
img {
width: 100%;
height: 100%;
} }
} }
} }
} }
} }
.el-icon-wq-r1{ .el-icon-wq-r1 {
background: url(~@/assets/images/r1.png) center no-repeat; background: url(~@/assets/images/r1.png) center no-repeat;
background-size: 65%; background-size: 65%;
} }
.el-icon-wq-r1:before{ .el-icon-wq-r1:before {
content: ""; content: '';
font-size: 16px; font-size: 16px;
} }
.el-icon-wq-r2{ .el-icon-wq-r2 {
background: url(~@/assets/images/r2.png) center no-repeat; background: url(~@/assets/images/r2.png) center no-repeat;
background-size: 65%; background-size: 65%;
} }
.el-icon-wq-r2:before{ .el-icon-wq-r2:before {
content: ""; content: '';
font-size: 16px; font-size: 16px;
} }
.el-icon-wq-r3{ .el-icon-wq-r3 {
background: url(~@/assets/images/r3.png) center no-repeat; background: url(~@/assets/images/r3.png) center no-repeat;
background-size: 65%; background-size: 65%;
} }
.el-icon-wq-r3:before{ .el-icon-wq-r3:before {
content: ""; content: '';
font-size: 16px; font-size: 16px;
} }
.el-icon-wq-r5{ .el-icon-wq-r5 {
background: url(~@/assets/images/r5.png) center no-repeat; background: url(~@/assets/images/r5.png) center no-repeat;
background-size: 65%; background-size: 65%;
} }
.el-icon-wq-r5:before{ .el-icon-wq-r5:before {
content: ""; content: '';
font-size: 16px; font-size: 16px;
} }
.el-icon-wq-r6{ .el-icon-wq-r6 {
background: url(~@/assets/images/r6.png) center no-repeat; background: url(~@/assets/images/r6.png) center no-repeat;
background-size: 65%; background-size: 65%;
} }
.el-icon-wq-r6:before{ .el-icon-wq-r6:before {
content: ""; content: '';
font-size: 16px; font-size: 16px;
} }
.el-icon-wq-r1b{ .el-icon-wq-r1b {
background: url(~@/assets/images/r1b.png) center no-repeat; background: url(~@/assets/images/r1b.png) center no-repeat;
height: 35px; height: 35px;
width: 35px; width: 35px;
background-size: 65%; background-size: 65%;
} }
.el-icon-wq-r1b:before{ .el-icon-wq-r1b:before {
content: ""; content: '';
font-size: 16px; font-size: 16px;
} }
.el-icon-wq-r2b{ .el-icon-wq-r2b {
background: url(~@/assets/images/r2b.png) center no-repeat; background: url(~@/assets/images/r2b.png) center no-repeat;
height: 35px; height: 35px;
width: 35px; width: 35px;
background-size: 65%; background-size: 65%;
} }
.el-icon-wq-r2b:before{ .el-icon-wq-r2b:before {
content: ""; content: '';
font-size: 16px; font-size: 16px;
} }
.el-icon-wq-r3b{ .el-icon-wq-r3b {
background: url(~@/assets/images/r3b.png) center no-repeat; background: url(~@/assets/images/r3b.png) center no-repeat;
height: 35px; height: 35px;
width: 35px; width: 35px;
background-size: 65%; background-size: 65%;
} }
.el-icon-wq-r3b:before{ .el-icon-wq-r3b:before {
content: ""; content: '';
font-size: 16px; font-size: 16px;
} }
.el-icon-wq-r5b{ .el-icon-wq-r5b {
background: url(~@/assets/images/r5b.png) center no-repeat; background: url(~@/assets/images/r5b.png) center no-repeat;
height: 35px; height: 35px;
width: 35px; width: 35px;
background-size: 65%; background-size: 65%;
} }
.el-icon-wq-r5b:before{ .el-icon-wq-r5b:before {
content: ""; content: '';
font-size: 16px; font-size: 16px;
} }
.el-icon-wq-r6b{ .el-icon-wq-r6b {
background: url(~@/assets/images/r6b.png) center no-repeat; background: url(~@/assets/images/r6b.png) center no-repeat;
height: 35px; height: 35px;
width: 35px; width: 35px;
background-size: 65%; background-size: 65%;
} }
.el-icon-wq-r6b:before{ .el-icon-wq-r6b:before {
content: ""; content: '';
font-size: 16px; font-size: 16px;
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.instuctions_content{ .instuctions_content {
table{ table {
th{ th {
background: #eef8ff !important; background: #eef8ff !important;
color: #333333 !important; color: #333333 !important;
} }
} }
} }
</style> </style>
src/pages/ol/demo/query-detail.vue
View file @ 4b937855
...@@ -77,19 +77,19 @@ ...@@ -77,19 +77,19 @@
//- <p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}} </span></p> //- <p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}} </span></p>
//- </div> //- </div>
<div class="quDetailM"> <div class="quDetailM">
<p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}} 枪机</p> <p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}} </p>
</div> </div>
<div class="quDetailM"> <div class="quDetailM">
<p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}} 枪机</p> <p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}} </p>
</div> </div>
<div class="quDetailM"> <div class="quDetailM">
<p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}} QJ-0002</p> <p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}</p>
</div> </div>
<div class="quDetailM"> <div class="quDetailM">
<p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'正常':'异常'}}</p> <p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'在线':'离线'}}</p>
</div> </div>
<div class="quDetailM"> <div class="quDetailM">
<p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}} 场景一</p> <p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -200,58 +200,56 @@ export default { ...@@ -200,58 +200,56 @@ export default {
if (data && data.code === 0) { if (data && data.code === 0) {
this.dataForm = data.bean this.dataForm = data.bean
//如果当前设备摄像头为离线状态，则不加载画面 //如果当前设备摄像头为离线状态，则不加载画面
if (data.bean.byx2 == 0 && this.flvPlayer) { // if (data.bean.byx2 == 0 && this.flvPlayer) {
//资源点状态(0=离线，1=在线) // //资源点状态(0=离线，1=在线)
this.flvPlayer.pause() // this.flvPlayer.pause()
this.flvPlayer.unload() // this.flvPlayer.unload()
this.flvPlayer.detachMediaElement() // this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy() // this.flvPlayer.destroy()
this.flvPlayer = null // this.flvPlayer = null
return // return
} else if (data.bean.byx2 == 0 && !this.flvPlayer) { // } else if (data.bean.byx2 == 0 && !this.flvPlayer) {
return // return
} else if (this.flvPlayer) { // } else if (this.flvPlayer) {
this.flvPlayer.pause() // this.flvPlayer.pause()
this.flvPlayer.unload() // this.flvPlayer.unload()
this.flvPlayer.detachMediaElement() // this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy() // this.flvPlayer.destroy()
this.flvPlayer = null // this.flvPlayer = null
} // }
this.$http({ // this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'), // url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post', // method: 'post',
data: { // data: {
id: data.bean.id, // id: data.bean.id,
stationId: data.bean.stationId, // stationId: data.bean.stationId,
userId: localStorage.getItem('userId'), // userId: localStorage.getItem('userId'),
levelType: 1, // levelType: 1,
controlType: 3 // controlType: 3
} // }
}).then((data) => { // }).then((data) => {
if (data && data.code === 0) { // if (data && data.code === 0) {
this.videoSrc = data.url // this.videoSrc = data.url
//视频连接 // //视频连接
this.flvPlayer = null // this.flvPlayer = null
if (flvjs.isSupported()) { // if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer({ // this.flvPlayer = flvjs.createPlayer({
type: 'flv', // type: 'flv',
enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js // enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
isLive: true, //直播模式 // isLive: true, //直播模式
hasAudio: false, //关闭音频 // hasAudio: false, //关闭音频
hasVideo: true, // hasVideo: true,
stashInitialSize: 128, // stashInitialSize: 128,
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。 // enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
url: this.videoSrc // url: this.videoSrc
}) // })
this.$nextTick(function() { // this.$nextTick(function() {
this.flvPlayer.attachMediaElement( // this.flvPlayer.attachMediaElement(this.$refs.video)
this.$refs.video // this.flvPlayer.load()
) // })
this.flvPlayer.load() // }
}) // }
} // })
}
})
} }
}) })
}, },
...@@ -357,7 +355,8 @@ export default { ...@@ -357,7 +355,8 @@ export default {
font-weight: bold; font-weight: bold;
} }
.info-video { .info-video {
padding: 10px; height: 160px; padding: 10px;
height: 160px;
} }
.info-form { .info-form {
padding: 10px; padding: 10px;
...@@ -369,8 +368,8 @@ export default { ...@@ -369,8 +368,8 @@ export default {
width: 100%; width: 100%;
} }
.video { .video {
width: 100%;height: 180px; width: 100%;
height: 180px;
} }
.animation { .animation {
animation: myfirst 1s; animation: myfirst 1s;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment