Skip to content

Z
zhxf_vue
Commit 2035bae8 authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

Merge branch 'dev' of gitlab.suntrayoa.com:geqilin/zhxf_vue into dev

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