视频回放
This commit is contained in:
yanran200730
@@ -6,10 +6,14 @@
|
|||||||
<div class="monitorPane">
|
<div class="monitorPane">
|
||||||
<div class="headerBar">
|
<div class="headerBar">
|
||||||
<el-select default-first-option size="small" v-model="splitScreen" @change="onChange">
|
<el-select default-first-option size="small" v-model="splitScreen" @change="onChange">
|
||||||
<i slot="prefix" class="iconfont iconjdq_led_Led1"/>
|
<!-- <i slot="prefix" class="iconfont iconjdq_led_Led1"/> -->
|
||||||
|
<img slot="prefix" src="https://cdn.cunwuyun.cn/slw2.0/images/fp.png">
|
||||||
<el-option v-for="(op,i) in splitOps" :key="i" v-bind="op"/>
|
<el-option v-for="(op,i) in splitOps" :key="i" v-bind="op"/>
|
||||||
</el-select>
|
</el-select>
|
||||||
<!-- <el-button icon="el-icon-full-screen" @click="handleFullscreen">全屏</el-button>-->
|
<div class="headerBar-item" @click="isShowBar = !isShowBar" :class="[isShowBar ? '' : 'cancel-xt']">
|
||||||
|
<img src="https://cdn.cunwuyun.cn/slw2.0/images/xt.png">
|
||||||
|
<span>{{ isShowBar ? '视频协同' : '取消协同' }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="videoList">
|
<div class="videoList">
|
||||||
<div
|
<div
|
||||||
@@ -17,7 +21,7 @@
|
|||||||
v-for="(m, i) in monitors"
|
v-for="(m, i) in monitors"
|
||||||
:key="m.id"
|
:key="m.id"
|
||||||
:style="currentSplitStyle">
|
:style="currentSplitStyle">
|
||||||
<AiMonitor :src="m.url" type="slw" :name="m.name" @close="removeMonitor(i)" ref="AiMonitor"></AiMonitor>
|
<AiMonitor :isShowBar="isShowBar" :src="m.url" type="slw" :name="m.name" @close="removeMonitor(i)" ref="AiMonitor"></AiMonitor>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -37,181 +41,179 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
import DeviceSlider from "../components/deviceSlider";
|
import DeviceSlider from "../components/deviceSlider"
|
||||||
import LocateDialog from "../components/locateDialog";
|
import LocateDialog from "../components/locateDialog"
|
||||||
import AiMonitor from "../components/AiSlwVideo";
|
import AiMonitor from "../components/AiSlwVideo"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AppISManage",
|
name: "AppISManage",
|
||||||
components: {LocateDialog, DeviceSlider, AiMonitor},
|
components: {LocateDialog, DeviceSlider, AiMonitor},
|
||||||
label: "监控实况",
|
label: "监控实况",
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
dict: Object,
|
dict: Object,
|
||||||
permissions: Function
|
permissions: Function
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
splitOps() {
|
|
||||||
return [
|
|
||||||
{label: "单分屏", value: 1, per: "100%"},
|
|
||||||
{label: "四分屏", value: 4, per: "49%"},
|
|
||||||
{label: "九分屏", value: 9, per: "32%"}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
currentSplitStyle() {
|
computed: {
|
||||||
let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
|
splitOps() {
|
||||||
return {width: per, height: per}
|
return [
|
||||||
},
|
{label: "单分屏", value: 1, per: "100%"},
|
||||||
...mapState(['user'])
|
{label: "四分屏", value: 4, per: "49%"},
|
||||||
},
|
{label: "九分屏", value: 9, per: "32%"}
|
||||||
|
]
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
slider: true,
|
|
||||||
fullscreen: false,
|
|
||||||
splitScreen: 1,
|
|
||||||
monitors: [],
|
|
||||||
dialog: false,
|
|
||||||
locate: false,
|
|
||||||
selected: {
|
|
||||||
areaId: ''
|
|
||||||
},
|
},
|
||||||
videoUrl: '',
|
currentSplitStyle() {
|
||||||
latlng: null,
|
let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
|
||||||
disabledLevel: 0,
|
return {width: per, height: per}
|
||||||
rules: {
|
},
|
||||||
name: [{required: true, message: "请填写 设备名称"}]
|
...mapState(['user'])
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.selected.areaId = this.user.info.areaId
|
|
||||||
this.disabledLevel = this.user.info.areaList.length - 1
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
handleFullscreen() {
|
|
||||||
this.fullscreen = !this.fullscreen
|
|
||||||
this.$fullscreen(this.fullscreen)
|
|
||||||
},
|
},
|
||||||
handleSelectMonitor(monitor) {
|
|
||||||
if (monitor.type !== '1') return
|
|
||||||
|
|
||||||
let {id} = monitor,
|
data() {
|
||||||
index = this.monitors.findIndex(e => e.id == id)
|
return {
|
||||||
if (index > -1) {
|
slider: true,
|
||||||
this.$message.error('该监控视频已存在')
|
fullscreen: false,
|
||||||
} else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
|
splitScreen: 1,
|
||||||
this.$message.error("可分屏监控已满,请先取消其他的监控")
|
monitors: [],
|
||||||
} else {
|
dialog: false,
|
||||||
this.showMonitor(monitor)
|
locate: false,
|
||||||
|
isShowBar: true,
|
||||||
|
selected: {
|
||||||
|
areaId: ''
|
||||||
|
},
|
||||||
|
videoUrl: '',
|
||||||
|
latlng: null,
|
||||||
|
disabledLevel: 0,
|
||||||
|
rules: {
|
||||||
|
name: [{required: true, message: "请填写 设备名称"}]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onChange(e) {
|
created() {
|
||||||
if (e === 1 && this.monitors.length) {
|
this.selected.areaId = this.user.info.areaId
|
||||||
this.monitors = [this.monitors[0]]
|
this.disabledLevel = this.user.info.areaList.length - 1
|
||||||
}
|
|
||||||
|
|
||||||
console.log(this.$refs.AiMonitor)
|
|
||||||
|
|
||||||
this.$refs.AiMonitor.forEach(e => {
|
|
||||||
e.reset()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
|
|
||||||
removeMonitor(i) {
|
methods: {
|
||||||
this.monitors.splice(i, 1)
|
handleFullscreen() {
|
||||||
},
|
this.fullscreen = !this.fullscreen
|
||||||
|
this.$fullscreen(this.fullscreen)
|
||||||
|
},
|
||||||
|
handleSelectMonitor(monitor) {
|
||||||
|
if (monitor.type !== '1') return
|
||||||
|
|
||||||
showMonitor(monitor, refresh = false) {
|
let {id} = monitor,
|
||||||
let {id: deviceId} = monitor
|
index = this.monitors.findIndex(e => e.id == id)
|
||||||
deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
|
if (index > -1) {
|
||||||
params: {deviceId}
|
this.$message.error('该监控视频已存在')
|
||||||
}).then(res => {
|
} else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
|
||||||
if (res?.data) {
|
this.$message.error("可分屏监控已满,请先取消其他的监控")
|
||||||
this.videoUrl = res.data
|
} else {
|
||||||
let data = {
|
this.showMonitor(monitor)
|
||||||
url: res.data,
|
}
|
||||||
isShowPlayBtn: false
|
},
|
||||||
}
|
|
||||||
if (refresh) {
|
onChange(e) {
|
||||||
monitor.url = data.url
|
if (e === 1 && this.monitors.length) {
|
||||||
} else if (this.splitScreen == 1) {
|
this.monitors = [this.monitors[0]]
|
||||||
this.monitors = [{...monitor, ...data}]
|
}
|
||||||
} else {
|
|
||||||
if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
|
this.$refs.AiMonitor.forEach(e => {
|
||||||
this.monitors.push({...monitor, ...data})
|
e.reset()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
removeMonitor(i) {
|
||||||
|
this.monitors.splice(i, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
showMonitor(monitor, refresh = false) {
|
||||||
|
let {id: deviceId} = monitor
|
||||||
|
deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
|
||||||
|
params: {deviceId}
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.videoUrl = res.data
|
||||||
|
let data = {
|
||||||
|
url: res.data,
|
||||||
|
isShowPlayBtn: false
|
||||||
|
}
|
||||||
|
if (refresh) {
|
||||||
|
monitor.url = data.url
|
||||||
|
} else if (this.splitScreen == 1) {
|
||||||
|
this.monitors = [{...monitor, ...data}]
|
||||||
|
} else {
|
||||||
|
if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
|
||||||
|
this.monitors.push({...monitor, ...data})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
})
|
},
|
||||||
},
|
renderTreeItem: function (h, {node, data}) {
|
||||||
renderTreeItem: function (h, {node, data}) {
|
let show = data.deviceStatus == 1 ? 'show' : ''
|
||||||
let show = data.deviceStatus == 1 ? 'show' : ''
|
if (node.isLeaf) {
|
||||||
if (node.isLeaf) {
|
return (
|
||||||
return (
|
<div class="flexRow">
|
||||||
|
<i class={['iconfont', 'iconshipinjiankong', show]}/>
|
||||||
|
<div>{node.label}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
} else return (
|
||||||
<div class="flexRow">
|
<div class="flexRow">
|
||||||
<i class={['iconfont', 'iconshipinjiankong', show]}/>
|
|
||||||
<div>{node.label}</div>
|
<div>{node.label}</div>
|
||||||
|
{data.id != 'no_area' ? <div class="sta">
|
||||||
|
<p>{data.online || 0}</p>/{data.sum || 0}
|
||||||
|
</div>
|
||||||
|
: <div/>}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
} else return (
|
},
|
||||||
<div class="flexRow">
|
handleSliderOption(e) {
|
||||||
<div>{node.label}</div>
|
this.selected = {
|
||||||
{data.id != 'no_area' ? <div class="sta">
|
command: e.type,
|
||||||
<p>{data.online || 0}</p>/{data.sum || 0}
|
...e.node
|
||||||
</div>
|
|
||||||
: <div/>}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
handleSliderOption(e) {
|
|
||||||
console.log(e)
|
|
||||||
this.selected = {
|
|
||||||
command: e.type,
|
|
||||||
...e.node
|
|
||||||
}
|
|
||||||
this.selected.areaId = e.node.areaId || this.user.info.areaId
|
|
||||||
if (e.type == "edit") {//修改名称
|
|
||||||
this.dialog = true
|
|
||||||
} else if (e.type == "area") {//绑定areaId
|
|
||||||
this.$refs.BindArea?.chooseArea()
|
|
||||||
} else if (e.type == "locate") {//地图标绘
|
|
||||||
this.latlng = e.node.lat && e.node.lng ? {
|
|
||||||
lat: e.node.lat,
|
|
||||||
lng: e.node.lng
|
|
||||||
} : ''
|
|
||||||
this.locate = true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSubmit(row) {
|
|
||||||
delete row.createTime
|
|
||||||
return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
|
|
||||||
...row
|
|
||||||
}).then(res => {
|
|
||||||
if (res?.code == 0) {
|
|
||||||
this.$message.success("提交成功!")
|
|
||||||
this.dialog = false
|
|
||||||
this.$refs.DeviceSlider?.getDevices()
|
|
||||||
}
|
}
|
||||||
})
|
this.selected.areaId = e.node.areaId || this.user.info.areaId
|
||||||
},
|
if (e.type == "edit") {//修改名称
|
||||||
handleLocate(row, locate) {
|
this.dialog = true
|
||||||
if (locate) {
|
} else if (e.type == "area") {//绑定areaId
|
||||||
let {lat, lng} = locate.location
|
this.$refs.BindArea?.chooseArea()
|
||||||
this.handleSubmit({...row, lat, lng}).then(() => {
|
} else if (e.type == "locate") {//地图标绘
|
||||||
this.locate = false
|
this.latlng = e.node.lat && e.node.lng ? {
|
||||||
|
lat: e.node.lat,
|
||||||
|
lng: e.node.lng
|
||||||
|
} : ''
|
||||||
|
this.locate = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSubmit(row) {
|
||||||
|
delete row.createTime
|
||||||
|
return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
|
||||||
|
...row
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.$message.success("提交成功!")
|
||||||
|
this.dialog = false
|
||||||
|
this.$refs.DeviceSlider?.getDevices()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
handleLocate(row, locate) {
|
||||||
|
if (locate) {
|
||||||
|
let {lat, lng} = locate.location
|
||||||
|
this.handleSubmit({...row, lat, lng}).then(() => {
|
||||||
|
this.locate = false
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.monitors = []
|
||||||
}
|
}
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.monitors = []
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -221,7 +223,6 @@ export default {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.monitorPane {
|
.monitorPane {
|
||||||
// color: #fff;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 20px 20px 20px 4px;
|
padding: 20px 20px 20px 4px;
|
||||||
@@ -235,6 +236,31 @@ export default {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.headerBar-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
background: #2C2F3E;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.cancel-xt {
|
||||||
|
background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -247,11 +273,40 @@ export default {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-input--prefix .el-input__inner {
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input--suffix .el-input__inner {
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__prefix {
|
||||||
|
top: 50%;
|
||||||
|
left: 10px;
|
||||||
|
height: auto;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 12px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #2C2F3E;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.el-input__inner, .el-button {
|
.el-input__inner, .el-button {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
max-width: 100px;
|
|
||||||
background: #2C2F3E;
|
|
||||||
border: none;
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #26f;
|
color: #26f;
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
style="width: 100%; height: 100%;"
|
style="width: 100%; height: 100%;"
|
||||||
:src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`">
|
:src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`">
|
||||||
</iframe>
|
</iframe>
|
||||||
<div class="slw-bottom">
|
<div class="slw-bottom" v-if="isShowBar">
|
||||||
<Timeline class="Timeline" @pause="isLiveing = false" :isLiveing="isLiveing" :width="width" ref="timeline" :style="{width: width}"></Timeline>
|
<Timeline class="Timeline" @pause="isLiveing = false" :isLiveing="isLiveing" :width="width" ref="timeline" :style="{width: width}"></Timeline>
|
||||||
<div class="action-bar">
|
<div class="action-bar">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
@@ -86,7 +86,7 @@
|
|||||||
import Timeline from './Timeline'
|
import Timeline from './Timeline'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ['src', 'name'],
|
props: ['src', 'name', 'isShowBar'],
|
||||||
|
|
||||||
name: 'slwVideo',
|
name: 'slwVideo',
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user