Skip to content

Z
zhxf_vue
Commit 28918dff authored by xiexingan's avatar xiexingan
Browse files
Options

tj

parent 9d873711
Hide whitespace changes
Inline Side-by-side
Showing with 415 additions and 381 deletions
src/pages/ol/demo/query-detail.vue
View file @ 28918dff
......@@ -100,414 +100,448 @@
import { mapState } from 'vuex'
import { isAuth } from '../../../util'
export default {
computed: {
...mapState('d2admin/user', [
'info'
])
},
data () {
return {
//11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小
//21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描
actionList: ['', '', '', '', '', '', '', '', '', '', '', '变倍+', '变倍-', '变焦+', '变焦-', '光圈+', '光圈-', '', '', '', '',
'上仰', '下俯', '左转', '右转', '左上', '右上', '左下', '右下', '自动扫描'],
imgUrl: '',
imgRightUrl11: false,
imgRightUrl12: false,
imgRightUrl13: false,
imgRightUrl14: false,
imgRightUrl15: false,
imgRightUrl16: false,
videoSrc: '',
clickFlag: false,
visible: false,
sysOrgList: [],
dataListSelections: [],
lineList: [],
stationList: [],
typeList: [],
systemList: [],
tierList: [],
dataForm: {
id: 0,
name: '',
type: 1,
lineId: '',
lineName: '',
stationId: localStorage.getItem('stationId'),
stationName: '',
tierId: '',
subSystem: '',
code: '',
subCode: '',
addressCode: '',
port: '',
username: '',
password: '',
remark: '',
status: 1
},
ontclick: 'pointer-events: none;',
flvPlayer: null
}
},
created () {
},
methods: {
init (id, stationId) {
this.visible = true
this.clickFlag = false
this.dataForm.id = id
this.stationId = stationId
this.initResource()
this.dataForm.operatorName = this.info.name
},
initResource () {
this.$http({
url: this.$http.adornUrlEq(`/liResource/getResourceDetails/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(data => {
if (data && data.code === 0) {
this.dataForm = data.bean
//如果当前设备摄像头为离线状态，则不加载画面
if (data.bean.byx2 == 0 && this.flvPlayer) { //资源点状态(0=离线，1=在线)
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null
return
} else if (data.bean.byx2 == 0 && !this.flvPlayer) {
return
} else if (this.flvPlayer) {
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null
}
this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post',
data: {
id: data.bean.id,
stationId: data.bean.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3
}
}).then(data => {
if (data && data.code === 0) {
this.videoSrc = data.url
//视频连接
this.flvPlayer = null
if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
isLive: true, //直播模式
hasAudio: false, //关闭音频
hasVideo: true,
stashInitialSize: 128,
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
url: this.videoSrc
})
this.$nextTick(function () {
this.flvPlayer.attachMediaElement(this.$refs.video)
this.flvPlayer.load()
})
}
}
})
}
})
},
closeQueryDetailVisible () {
this.$emit('closeQ')
},
clickPTZControl (ptz, dwStop, img) {
if (this.dataForm.type !== 'ece0b8b2db27411886254e81134988a3' && (ptz < 11 || ptz > 16)) {
return
}
if (!isAuth('ol:demo:corona')) {
this.$message({
type: 'warning',
message: '没有操作权限，请联系管理员',
duration: 1000
})
return
}
if (img && img != 'right') {
this.imgUrl = img
}
if (dwStop) {
this.imgUrl = ''
}
if (img && img == 'right') {
this['imgRightUrl' + ptz] = true
}
if (dwStop && img == 'right') {
this['imgRightUrl' + ptz] = false
}
this.$http({
url: this.$http.adornUrlEq('/camera/ptzControl'),
method: 'post',
data: {
resourceId: this.dataForm.id,
stationId: this.dataForm.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.dataForm.addressCode, //ip地址
port: this.dataForm.port, //端口
username: this.dataForm.username, //账号
password: this.dataForm.password, //密码
channel: this.dataForm.byx1, //通道
stream: 'main', //主码流
dwPtzCommand: ptz, //云台控制命令
dwStop: dwStop //云台控制0开始和1结束
}
}).then(data => {
// console.log(11)
// console.log(data)
if (data && data.code === 0) {
if (dwStop == 0) { //云台控制0开始和1结束
this.saveLog(1, ptz)// 执行结果 成功 1 失败 2
this.$message.success(data.msg)
}
} else {
if (dwStop == 0) { //云台控制0开始和1结束
this.saveLog(2, ptz)// 执行结果 成功 1 失败 2
this.$message.error(data.msg)
}
}
})
},
//调用日志保存记录操作指令
saveLog (result, ptz) {
this.$http({
url: this.$http.adornUrlEq('/orVideoMonitor/save'),
method: 'post',
data: {
source: 1,
actionName: this.actionList[ptz],
resourceId: this.dataForm.id,
stationId: this.stationId,
type: this.dataForm.type,
result: result
}
}).then(data => {
})
}
}
computed: {
...mapState('d2admin/user', ['info'])
},
data() {
return {
//11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小
//21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描
actionList: [
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'变倍+',
'变倍-',
'变焦+',
'变焦-',
'光圈+',
'光圈-',
'',
'',
'',
'',
'上仰',
'下俯',
'左转',
'右转',
'左上',
'右上',
'左下',
'右下',
'自动扫描'
],
imgUrl: '',
imgRightUrl11: false,
imgRightUrl12: false,
imgRightUrl13: false,
imgRightUrl14: false,
imgRightUrl15: false,
imgRightUrl16: false,
videoSrc: '',
clickFlag: false,
visible: false,
sysOrgList: [],
dataListSelections: [],
lineList: [],
stationList: [],
typeList: [],
systemList: [],
tierList: [],
dataForm: {
id: 0,
name: '',
type: 1,
lineId: '',
lineName: '',
stationId: localStorage.getItem('stationId'),
stationName: '',
tierId: '',
subSystem: '',
code: '',
subCode: '',
addressCode: '',
port: '',
username: '',
password: '',
remark: '',
status: 1
},
ontclick: 'pointer-events: none;',
flvPlayer: null
}
},
created() {},
methods: {
init(id, stationId) {
this.visible = true
this.clickFlag = false
this.dataForm.id = id
this.stationId = stationId
this.initResource()
this.dataForm.operatorName = this.info.name
},
initResource() {
this.$http({
url: this.$http.adornUrlEq(
`/liResource/getResourceDetails/${this.dataForm.id}`
),
method: 'get',
params: this.$http.adornParams()
}).then((data) => {
if (data && data.code === 0) {
this.dataForm = data.bean
//如果当前设备摄像头为离线状态，则不加载画面
if (data.bean.byx2 == 0 && this.flvPlayer) {
//资源点状态(0=离线，1=在线)
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null
return
} else if (data.bean.byx2 == 0 && !this.flvPlayer) {
return
} else if (this.flvPlayer) {
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null
}
this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post',
data: {
id: data.bean.id,
stationId: data.bean.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3
}
}).then((data) => {
if (data && data.code === 0) {
this.videoSrc = data.url
//视频连接
this.flvPlayer = null
if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
isLive: true, //直播模式
hasAudio: false, //关闭音频
hasVideo: true,
stashInitialSize: 128,
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
url: this.videoSrc
})
this.$nextTick(function() {
this.flvPlayer.attachMediaElement(
this.$refs.video
)
this.flvPlayer.load()
})
}
}
})
}
})
},
closeQueryDetailVisible() {
this.$emit('closeQ')
},
clickPTZControl(ptz, dwStop, img) {
if (
this.dataForm.type !== 'ece0b8b2db27411886254e81134988a3' &&
(ptz < 11 || ptz > 16)
) {
return
}
if (!isAuth('ol:demo:corona')) {
this.$message({
type: 'warning',
message: '没有操作权限，请联系管理员',
duration: 1000
})
return
}
if (img && img != 'right') {
this.imgUrl = img
}
if (dwStop) {
this.imgUrl = ''
}
if (img && img == 'right') {
this['imgRightUrl' + ptz] = true
}
if (dwStop && img == 'right') {
this['imgRightUrl' + ptz] = false
}
this.$http({
url: this.$http.adornUrlEq('/camera/ptzControl'),
method: 'post',
data: {
resourceId: this.dataForm.id,
stationId: this.dataForm.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.dataForm.addressCode, //ip地址
port: this.dataForm.port, //端口
username: this.dataForm.username, //账号
password: this.dataForm.password, //密码
channel: this.dataForm.byx1, //通道
stream: 'main', //主码流
dwPtzCommand: ptz, //云台控制命令
dwStop: dwStop //云台控制0开始和1结束
}
}).then((data) => {
// console.log(11)
// console.log(data)
if (data && data.code === 0) {
if (dwStop == 0) {
//云台控制0开始和1结束
this.saveLog(1, ptz) // 执行结果 成功 1 失败 2
this.$message.success(data.msg)
}
} else {
if (dwStop == 0) {
//云台控制0开始和1结束
this.saveLog(2, ptz) // 执行结果 成功 1 失败 2
this.$message.error(data.msg)
}
}
})
},
//调用日志保存记录操作指令
saveLog(result, ptz) {
this.$http({
url: this.$http.adornUrlEq('/orVideoMonitor/save'),
method: 'post',
data: {
source: 1,
actionName: this.actionList[ptz],
resourceId: this.dataForm.id,
stationId: this.stationId,
type: this.dataForm.type,
result: result
}
}).then((data) => {})
}
}
}
</script>
<style lang="scss" scoped>
.el-table__header {
width: 100% !important;
width: 100% !important;
}
.el-table__body {
width: 100% !important;
width: 100% !important;
}
.info-title {
line-height: 40px;
height: 40px;
padding: 0 20px;
background-color: #e1edf4;
border-bottom: 1px solid #cccccc;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 40px;
height: 40px;
padding: 0 20px;
background-color: #e1edf4;
border-bottom: 1px solid #cccccc;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
}
.info-video {
padding: 10px;
height: 175px;
padding: 10px;
height: 175px;
}
.info-form {
padding: 10px;
padding: 10px;
}
.info-block {
border: 1px solid #cccccc;
border: 1px solid #cccccc;
}
.el-select {
width: 100%;
width: 100%;
}
.video {
width: 310px;
height: 175px;
width: 310px;
height: 175px;
}
.animation {
animation: myfirst 1s;
position: absolute;
right: 0;
top: -40px;
width: 350px;
background-color: #f4f4f4;
z-index: 999;
border: 1px solid rgba(195, 195, 195, 1);
box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2);
animation: myfirst 1s;
position: absolute;
right: 0;
top: -40px;
width: 350px;
background-color: #f4f4f4;
z-index: 999;
border: 1px solid rgba(195, 195, 195, 1);
box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2);
}
@keyframes myfirst {
from {
right: -500px;
}
to {
right: 0;
}
from {
right: -500px;
}
to {
right: 0;
}
}
.quDetailM {
width: 100%;
width: 100%;
}
.leftP {
height: 30px;
line-height: 30px;
margin: 0;
width: 100%;
font-size: 14px;
span {
color: #46b6f9;
}
height: 30px;
line-height: 30px;
margin: 0;
width: 100%;
font-size: 14px;
span {
color: #46b6f9;
}
}
.operate {
padding: 5px 0;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
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-radius: 10px;
overflow: hidden;
display: flex;
justify-content: flex-start;
.btns {
width: 194px;
height: 194px;
position: relative;
img {
width: 100%;
height: 100%;
}
div {
cursor: pointer;
padding: 10px;
}
.s {
position: absolute;
top: 10px;
left: 75px;
width: 24px;
height: 24px;
}
.x {
position: absolute;
bottom: 10px;
left: 75px;
width: 24px;
height: 24px;
}
.z {
position: absolute;
top: 75px;
left: 10px;
width: 24px;
height: 24px;
}
.y {
position: absolute;
top: 75px;
right: 10px;
width: 24px;
height: 24px;
}
.zs {
position: absolute;
top: 32px;
left: 32px;
width: 24px;
height: 24px;
}
.zx {
position: absolute;
bottom: 32px;
left: 32px;
width: 24px;
height: 24px;
}
.ys {
position: absolute;
top: 32px;
right: 32px;
width: 24px;
height: 24px;
}
.yx {
position: absolute;
bottom: 32px;
right: 32px;
width: 24px;
height: 24px;
}
.fx {
position: absolute;
padding: 0;
cursor: default;
top: 50%;
left: 50%;
width: 65px;
height: 65px;
background: #ececec;
border-radius: 50%;
line-height: 65px;
text-align: center;
color: #969696;
transform: translate(-50%, -50%);
}
}
.ytBox {
width: 90px;
font-size: 16px;
padding: 10px 0 10px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.mllx {
display: flex;
justify-content: space-between;
width: 90%;
span {
line-height: 40px;
text-align: center;
width: 35%;
}
}
.bbBtn {
height: 40px;
display: flex;
margin-left: 10px;
justify-content: flex-start;
div {
width: 40px;
height: 40px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
padding: 5px 0;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
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-radius: 10px;
overflow: hidden;
display: flex;
justify-content: flex-start;
.btns {
width: 194px;
height: 194px;
position: relative;
img {
width: 100%;
height: 100%;
}
div {
cursor: pointer;
padding: 10px;
}
.s {
position: absolute;
top: 10px;
left: 75px;
width: 24px;
height: 24px;
}
.x {
position: absolute;
bottom: 10px;
left: 75px;
width: 24px;
height: 24px;
}
.z {
position: absolute;
top: 75px;
left: 10px;
width: 24px;
height: 24px;
}
.y {
position: absolute;
top: 75px;
right: 10px;
width: 24px;
height: 24px;
}
.zs {
position: absolute;
top: 32px;
left: 32px;
width: 24px;
height: 24px;
}
.zx {
position: absolute;
bottom: 32px;
left: 32px;
width: 24px;
height: 24px;
}
.ys {
position: absolute;
top: 32px;
right: 32px;
width: 24px;
height: 24px;
}
.yx {
position: absolute;
bottom: 32px;
right: 32px;
width: 24px;
height: 24px;
}
.fx {
position: absolute;
padding: 0;
cursor: default;
top: 50%;
left: 50%;
width: 65px;
height: 65px;
background: #ececec;
border-radius: 50%;
line-height: 65px;
text-align: center;
color: #969696;
transform: translate(-50%, -50%);
}
}
.ytBox {
width: 90px;
font-size: 16px;
padding: 10px 0 10px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.mllx {
display: flex;
justify-content: space-between;
width: 90%;
span {
line-height: 40px;
text-align: center;
width: 35%;
}
}
.bbBtn {
height: 40px;
display: flex;
margin-left: 10px;
justify-content: flex-start;
div {
width: 40px;
height: 40px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
</style>
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