Skip to content

Z
zhxf_vue
Commit 07f810e3 authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

页面调整

parent e518491e
Hide whitespace changes
Inline Side-by-side
Showing with 1919 additions and 4936 deletions
public/config.js
View file @ 07f810e3
......@@ -7,10 +7,10 @@ CONFIG.TITLE = '轨道交通后台管理系统'
CONFIG.requestPath = 'http://localhost:8046'
// CONFIG.requestPath = 'http://10.20.72.33:8046'
// CONFIG.requestPath = 'http://59.110.43.122/:8046'
// 文件上传
CONFIG.urlPath = 'http://10.20.72.33/'
CONFIG.urlPath = 'http://59.110.43.122/'
// BIM
CONFIG.bimPath = 'http://10.20.2.98:8066/'
src/pages/monitor/monitor/index1.vue deleted 100644 → 0
View file @ e518491e
<template lang="pug">
<el-container style='padding-left:0px;'>
<el-aside width='300px' style='height:85vh'>
<el-card>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="摄像头列表" name="1"></el-tab-pane>
<el-tab-pane label="收藏夹" name="2"></el-tab-pane>
</el-tabs>
<el-input placeholder="请输入内容" suffix-icon="el-icon-search" @blur="handleClick" v-model="searchInput"></el-input>
</div>
<el-tree style='margin-top:10px;' :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' >
<span class="custom-tree-node" style='width:100%' slot-scope="{ node, data }">
<span>{{node.label}}</span>
<span style="float:right;">
<el-button style="padding:0;" v-if="activeName == 1 && node.data.level == 6" type='text' icon="el-icon-star-off" @click="treeDataOffClick(node,data)" ></el-button>
<el-button style="padding:0;" v-if="activeName == 2 && node.data.level == 6" type='text' icon="el-icon-delete" @click="treeDataDeleteClick(node,data)" ></el-button>
</span>
</span>
</el-tree>
</el-card>
<el-card>
<div>
<el-tabs v-model="activeName1" @tab-click="handleClick">
<el-tab-pane label="云台" name="1">
<div class="operate">
<div class="btns">
<img src="@/assets/images/btns.png" alt="">
<div class="fx">自动</div>
<div class="zs">
<img src="@/assets/images/zs.png" @mousedown="mouseDownPTZControl(5)" @mouseup="mouseUpPTZControl" alt="">
</div>
<div class="s">
<img src="@/assets/images/s.png" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl" alt="">
</div>
<div class="ys">
<img src="@/assets/images/ys.png" @mousedown="mouseDownPTZControl(7)" @mouseup="mouseUpPTZControl" alt="">
</div>
<div class="y">
<img src="@/assets/images/y.png" @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl" alt="">
</div>
<div class="yx">
<img src="@/assets/images/yx.png" @mousedown="mouseDownPTZControl(8)" @mouseup="mouseUpPTZControl" alt="">
</div>
<div class="x">
<img src="@/assets/images/x.png" @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl" alt="">
</div>
<div class="zx">
<img src="@/assets/images/zx.png" @mousedown="mouseDownPTZControl(6)" @mouseup="mouseUpPTZControl" alt="">
</div>
<div class="z">
<img src="@/assets/images/z.png" @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl" alt="">
</div>
</div>
<div class="ytBox">
//- <div class="setBtn">
//- <div class="comBtn" style="border-right: 2px solid rgb(3, 38, 125)" @click='clickSetPreset'>设置</div>
//- <div class="comBtn" @click='clickGoPreset'>调用</div>
//- </div>
<div class="bbBtn">
<div class="add" @mousedown="mouseDownPTZControl(10)" @mouseup="mouseUpPTZControl">+</div>
<div class="bb">变倍</div>
<div class="jian" @mousedown="mouseDownPTZControl(11)" @mouseup="mouseUpPTZControl">-</div>
</div>
<div class="bbBtn">
<div class="add" @mousedown="mouseDownPTZControl(12)" @mouseup="mouseUpPTZControl">+</div>
<div class="bb">变焦</div>
<div class="jian" @mousedown="mouseDownPTZControl(13)" @mouseup="mouseUpPTZControl">-</div>
</div>
<div class="bbBtn">
<div class="add" @mousedown="mouseDownPTZControl(14)" @mouseup="mouseUpPTZControl">+</div>
<div class="bb">光圈</div>
<div class="jian" @mousedown="mouseDownPTZControl(15)" @mouseup="mouseUpPTZControl">-</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="预置点" name="2">
div.mllx()
span() 预制点号：
el-input(size="small" v-model="yzdh" style="width:70%;height: 40px;background-color: transparent;")
div.setBtn()
div.comBtn(@click='clickSetPreset') 设置
div.comBtn(@click='clickGoPreset') 调用
</el-tab-pane>
</el-tabs>
</div>
</el-card>
</el-aside>
<el-main style="padding:0px;">
<el-card>
<el-row style="padding-bottom:15px;height:80vh" :span="24">
<el-col class="resource-container" :style="obj" ref="drag">
<video width='100%' height="100%" :src="videoUrl" muted autoplay controls type="audio/mp4">您的浏览器不支持 video 标签。</video>
</el-col>
</el-row>
</el-card>
</el-main>
</el-container>
</template>
<script>
import { getUUID } from '@/util'
import Vue from 'vue'
let that
export default {
name: 'sys-user',
filters: {
ellipsis (value) {
if (!value) return ''
if (value.length > 20) {
return value.slice(0, 20) + '...'
}
return value
}
},
data () {
return {
yzdh: '',
isCollapse: true,
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
queryDetailVisible: false,
treeData: [],
defaultExpandedKeys: [],
defaultProps: {
children: 'children',
label: 'name',
level1: 'level'
},
nodeKey: 'id',
station: {}, //当前选择的站点
mapList: [], //当前站点的所有层
stationMap: {}, //当前选择的层
resource: {}, //当前选择的资源点
checkedData: {
lineId: '',
lineName: '',
stationId: '',
stationName: '',
subSystem: '',
tierId: '',
tierName: '',
resourceId: '',
sId: localStorage.getItem('stationId'),
subCode: '01'
},
currentNode: {},
dragAble: false,
list: [],
obj: 'pointer-events:initial',
editable: false,
activeName: '1',
activeName1: '1',
searchInput: ''
}
},
components: {
},
created () {
that = this
this.initTreeStationMap()
},
methods: {
handleClick(tab, event) { //左侧tab切换
if (this.activeName == 1) {
this.initTreeStationMap()
} else {
this.initTreeStationMap(true)
}
},
treeDataDeleteClick(node, data) { //左侧tree取消收藏按钮
this.$confirm('确认取消该收藏?', '取消收藏', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
.then(() => {
this.$http({
url: this.$http.adornUrlEq('/equipment/liEnshrine/delete'),
//this.$http.adornUrl('/liEnshrine/delete'),
method: 'post',
data: {
resourceId: node.data.id
}
}).then(data => {
if (data && data.code === 0) {
this.$message.success('取消收藏成功')
this.initTreeStationMap(true)
}
})
})
.catch(() => {})
},
treeDataOffClick(node, data) { //左侧tree收藏按钮
this.$http({
url: this.$http.adornUrlEq('/liEnshrine/save'),
method: 'post',
data: {
resourceId: node.data.id
}
}).then(data => {
if (data && data.code === 0) {
if (data.msg === '收藏成功') {
this.$message.success(data.msg)
} else {
this.$message.warning(data.msg)
}
}
})
},
pointListClick(item) { //监视器列表点击
this.queryDetail(item.id)
this.activeChooseResourceBox(item.id)
},
//初始化站点下的资源点
initTreeStationMap(save) {
let url = ''
if (!save) { // 摄像头列表接口路径
url = this.$http.adornUrlEq('/liResource/getStationMapCodeTreeList')
} else { // 收藏夹接口路径
url = this.$http.adornUrlEq('/liEnshrine/getEnshrineStationMapTreeList')
}
this.$http({
url: url,
method: 'post',
data: {
subCode: this.checkedData.subCode,
stationId: this.checkedData.sId,
resourceName: this.searchInput
}
}).then(data => {
this.treeData = data.nodes
// console.log('初始化线路树：', data.nodes)
if (data && data.code === 0) {
this.$refs.tree.updateKeyChildren(this.checkedData.sId, data.nodes)
}
}).then(() => {
if (this.checkedData.sId) {
this.defaultExpandedKeys = [this.treeData[0].id]
//设置选中的节点
// console.log('默认选中节点', this.treeData[0].children[0])
this.$refs.tree.setCurrentNode(this.treeData[0])
// console.log('this', this)
}
// this.initStation(this.checkedData.sId)
})
},
// initStation(id) {
// // console.log('初始化站点id：', id)
// this.$http({
// url: this.$http.adornUrl(`/liStation/getId/${id}`),
// method: 'get',
// params: this.$http.adornParams()
// }).then(data => {
// if (data && data.code === 0) {
// this.station = data.bean
// this.mapList = data.bean.mapList
// this.checkedData.lineId = this.station.lineId
// this.checkedData.lineName = this.station.lineName
// this.checkedData.stationId = this.station.id
// this.checkedData.stationName = this.station.stationName
// this.checkedData.tierId = this.mapList[0].id
// this.checkedData.tierName = this.mapList[0].name
// this.stationMap = this.mapList[0]
// // console.log('站点地图：', this.mapList)
// }
// }).then(() => {
// this.showResourceByMapId()
// })
// },
//线路资源点树节点点击事件
handleNodeClick(node) {
// console.log('选中树节点', node)
this.currentNode = node
let name = node.name
let id = node.id
//每次选择节点都先清空资源位
if (node.level !== 6) {
this.list = []
}
if (node.level === 4) { //子系统
this.list = node.children
this.mapList.forEach(res => {
if (res.id === node.id) {
this.stationMap = res
}
})
} else if (node.level === 6) { //资源点1
this.checkedData.resourceId = id
this.activeChooseResourceBox(id)
// console.log('资源点列表：', this.list)
}
},
//激活选中资源点位节点
activeChooseResourceBox(id) {
this.list.forEach(res => {
if (res.id === id) {
Vue.set(res, 'active', true)
} else {
Vue.set(res, 'active', false)
}
})
},
//切换层级
changeMap(map) {
// console.log('选择的层级', map)
this.currentNode = this.$refs.tree.getNode(map.id).data
// console.log('当前要选中的节点', this.currentNode)
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
this.defaultExpandedKeys = [this.currentNode.id]
// console.log('当前要选中的节点2', this.currentNode)
this.checkedData.tierId = map.id
this.checkedData.tierName = map.name
this.stationMap = map
this.showResourceByMapId()
},
//根据层级id展示当前层级所有的资源点
showResourceByMapId() {
let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
// console.log('当前要选中的层级节点', tierNode.children)
this.list = []
tierNode.children.forEach(subSystem => {
this.list.push(subSystem)
})
},
mouseDownPTZControl: function (iPTZIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0)
if (oWndInfo !== null) {
if (iPTZIndex === 9 && this.g_bPTZAuto) {
iPTZSpeed = 0
} else {
this.g_bPTZAuto = false
}
WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
iPTZSpeed: 2,
success: function (xmlDoc) {
console.log(xmlDoc)
if (iPTZIndex === 9 && this.g_bPTZAuto) {
console.log(oWndInfo.szDeviceIdentify + ' 停止云台成功！')
} else {
console.log(oWndInfo.szDeviceIdentify + ' 开启云台成功！')
}
if (iPTZIndex === 9) {
this.g_bPTZAuto = !this.g_bPTZAuto
}
},
error: function (status, xmlDoc) {
console.log(oWndInfo.szDeviceIdentify + ' 开启云台失败！', status, xmlDoc)
}
})
}
},
mouseUpPTZControl: function () {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0)
if (oWndInfo !== null) {
WebVideoCtrl.I_PTZControl(1, true, {
success: function (xmlDoc) {
console.log(oWndInfo.szDeviceIdentify + ' 停止云台成功！', xmlDoc)
},
error: function (status, xmlDoc) {
console.log(oWndInfo.szDeviceIdentify + ' 停止云台失败！', status, xmlDoc)
}
})
}
},
clickGoPreset() {
WebVideoCtrl.I_GoPreset(this.yzdh, {
success: function (xmlDoc) {
console.log(' 调用预置点成功！')
},
error: function (status, xmlDoc) {
console.log(' 调用预置点失败！', status)
}
})
},
clickSetPreset() {
// 设置预制点号
this.$http({
url: this.$http.adornUrl('/eWarning/setConfig/' + this.yzdh),
method: 'GET'
}).then((data) => {
this.$message.success('设置预制点号成功')
})
WebVideoCtrl.I_SetPreset(this.yzdh, {
success: function (xmlDoc) {
console.log(' 设置预置点成功！')
},
error: function (status, xmlDoc) {
console.log(' 设置预置点失败！', status)
}
})
}
}
}
</script>
<style>
.inputWidth{
width: 210px;
}
</style>
<style lang='scss' scoped>
</style>
<style lang='scss'>
.inputWidth {
width: 130px;
}
.resource-container {
width: 100%;
height: 100%;
position: relative;
border: 0px solid black;
overflow: auto;
.span-box {
height: 40px;
width: 40px;
background-color: #afebff;
font-size: 12px;
border-radius: 5px;
/* border: 1px solid red; */
position: absolute;
// left: 0;
// top: 0;
}
.active{
background-color: #fd949d;
}
}
.tier-btn{
.active-tier{
background-color: #409eff;
color: #ffffff;
}
}
.operate{
color: #fff;
padding-bottom: 24px;
background-color:#041B41;
border:2px solid;
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;
opacity:0.5;
border-radius:10px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
.liand {
height: 30px;
text-align: center;
font-size: 18px;
padding: 20px;
}
.btns{
width:221px;
height:221px;
position:relative;
img{
width:100%;
height:100%;
cursor: pointer;
}
.s{
position: absolute;
top:20px;
left: 100px;
width: 24px;
height: 24px;
}
.x{
position: absolute;
bottom:20px;
left: 100px;
width: 24px;
height: 24px;
}
.z{
position: absolute;
top:100px;
left: 20px;
width: 24px;
height: 24px;
}
.y{
position: absolute;
top:100px;
right:20px;
width: 24px;
height: 24px;
}
.zs{
position: absolute;
top:42px;
left: 42px;
width: 24px;
height: 24px;
}
.zx{
position: absolute;
bottom:42px;
left: 42px;
width: 24px;
height: 24px;
}
.ys{
position: absolute;
top:42px;
right:42px;
width: 24px;
height: 24px;
}
.yx{
position: absolute;
bottom:42px;
right:42px;
width: 24px;
height: 24px;
}
.fx{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
.ytBox{
width: 90%;
height: 230px;
margin-top:24px;
background-color: rgba(0, 0, 0, 0.493);
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%;
}
}
.setBtn{
width: 90%;
display: flex;
justify-content: space-between;
.comBtn{
cursor: pointer;
width: 50%;
height: 40px;
text-align: center;
line-height: 40px;
background-color: rgba(3, 42, 113, 0.521);
}
}
.bbBtn{
width: 90%;
height: 40px;
background-color: rgba(3, 42, 113, 0.521);
display: flex;
justify-content: start;
div{
text-align: center;
line-height: 40px;
}
.add{
width: 25%;
height: 40px;
cursor: pointer;
}
.bb{
width: 50%;
height: 40px;
cursor: pointer;
background-color: #0326639c;
}
.jian{
width: 25%;
height: 40px;
cursor: pointer;
}
}
}
}
</style>
src/pages/monitor/monitor/index111.vue deleted 100644 → 0
View file @ e518491e
<template lang="pug">
<div class='monitor_monitor'>
<el-container style='padding-left:0px;'>
<el-aside width='333px' style='height:85vh;'>
<el-card style='height:450px;'>
<div class="monitor_monitor_left_top">
<div class="monitor_monitor_left_topL">
<div :class="[activeName==1?'on':'']" @click="handleClick(1)">摄像头列表</div>
<div :class="[activeName==2?'on':'']" @click="handleClick(2)">收藏夹</div>
</div>
<div style="float:right; margin:5px 5px 0 5px">
<el-button type="text" size="mini" icon='el-icon-shoucang' @click="treeDataOffClick()"></el-button>
</div>
<div class="monitor_monitor_left_topR">
<el-input suffix-icon="el-icon-search" size="small" v-model="searchInput" clearable></el-input>
</div>
</div>
<div class="tree-container">
//- <el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' >
<el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :filter-node-method="filterNode" :props="defaultProps" show-checkbox :check-strictly='true' :default-expand-all='false' @check-change="handleCheckChange" @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' node-key='id' >
<span class="custom-tree-node" style='width:80%;line-height: 18px;' slot-scope="{ node, data }">
<span v-if="node.data.level != 6 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon"></span>
<span v-if="node.data.level != 6 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon"></span>
<span v-if="node.data.level == 6 && node.data.type=='b6af764f2a6e454490a6b1b3c9057e57'" class="el-icon-wq-treeQiang xa-icon"></span>
<span v-if="node.data.level == 6 && node.data.type=='ece0b8b2db27411886254e81134988a3'" class="el-icon-wq-treeQiu xa-icon"></span>
<span v-if="node.label.indexOf('在线') == -1 && node.label.indexOf('离线') == -1 ">&nbsp;{{node.label}}</span>
<span v-if="node.label.indexOf('在线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:green;'>[在线]</span></span>
<span v-if="node.label.indexOf('离线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:red;'>[离线]</span></span>
<span style="float:right;">
<el-button style="padding:0;" v-if="activeName == 2 && node.data.level == 6" type='text' icon="el-icon-delete" @click="treeDataDeleteClick(node,data)" ></el-button>
</span>
span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
</span>
</el-tree>
</div>
</el-card>
<div style="padding-bottom:40px;">
<div class="monitor_monitor_left_top">
<div class="monitor_monitor_left_topL">
<div :class="[videoTabSta==1?'on':'']" @click="videoTabClick(1)">云台</div>
<div :class="[videoTabSta==2?'on':'']" @click="videoTabClick(2)">预置点</div>
</div>
</div>
<div class="info-form" v-show="videoTabSta == 1">
<div class="operate">
<div class="btns">
<img v-show="imgUrl == ''" src="@/assets/images/btns.png" alt="">
<img v-show="imgUrl == 's'" src="@/assets/images/s.png" alt="">
<img v-show="imgUrl == 'x'" src="@/assets/images/x.png" alt="">
<img v-show="imgUrl == 'z'" src="@/assets/images/z.png" alt="">
<img v-show="imgUrl == 'y'" src="@/assets/images/y.png" alt="">
<img v-show="imgUrl == 'ys'" src="@/assets/images/ys.png" alt="">
<img v-show="imgUrl == 'yx'" src="@/assets/images/yx.png" alt="">
<img v-show="imgUrl == 'zs'" src="@/assets/images/zs.png" alt="">
<img v-show="imgUrl == 'zx'" src="@/assets/images/zx.png" alt="">
<div class="fx">方向</div>
<div class="zs" @mousedown="clickPTZControl(25,0,'zs')" @mouseup="clickPTZControl(25,1)" title="云台左上">
</div>
<div class="s" @mousedown="clickPTZControl(21,0,'s')" @mouseup="clickPTZControl(21,1)" title="云台上仰">
</div>
<div class="ys" @mousedown="clickPTZControl(26,0,'ys')" @mouseup="clickPTZControl(26,1)" title="云台右上">
</div>
<div class="y" @mousedown="clickPTZControl(24,0,'y')" @mouseup="clickPTZControl(24,1)" title="云台右转">
</div>
<div class="yx" @mousedown="clickPTZControl(28,0,'yx')" @mouseup="clickPTZControl(24,1)" title="云台右转">
</div>
<div class="x" @mousedown="clickPTZControl(22,0,'x')" @mouseup="clickPTZControl(22,1)" title="云台右转">
</div>
<div class="zx" @mousedown="clickPTZControl(27,0,'zx')" @mouseup="clickPTZControl(27,1)" title="云台右转">
</div>
<div class="z" @mousedown="clickPTZControl(23,0,'z')" @mouseup="clickPTZControl(23,1)" title="云台右转">
</div>
</div>
<div class="ytBox ytBox2">
<div class="bbBtn">
<div @mousedown="clickPTZControl(11,0,'right')" @mouseup="clickPTZControl(11,1,'right')" title="变倍+">
<img v-show="imgRightUrl11" src="@/assets/images/r1.png" alt="">
<img v-show="!imgRightUrl11" src="@/assets/images/r1b.png" alt="">
</div>
<div @mousedown="clickPTZControl(12,0,'right')" @mouseup="clickPTZControl(12,1,'right')" title="变倍-">
<img v-show="imgRightUrl12" src="@/assets/images/r2.png" alt="">
<img v-show="!imgRightUrl12" src="@/assets/images/r2b.png" alt="">
</div>
</div>
<div class="bbBtn">
<div @mousedown="clickPTZControl(13,0,'right')" @mouseup="clickPTZControl(13,1,'right')" title="变焦+">
<img v-show="imgRightUrl13" src="@/assets/images/r3.png" alt="">
<img v-show="!imgRightUrl13" src="@/assets/images/r3b.png" alt="">
</div>
<div @mousedown="clickPTZControl(14,0,'right')" @mouseup="clickPTZControl(14,1,'right')" title="变焦-">
<img v-show="imgRightUrl14" src="@/assets/images/r4.png" alt="">
<img v-show="!imgRightUrl14" src="@/assets/images/r4b.png" alt="">
</div>
</div>
<div class="bbBtn">
<div @mousedown="clickPTZControl(15,0,'right')" @mouseup="clickPTZControl(15,1,'right')" title="光圈+">
<img v-show="imgRightUrl15" src="@/assets/images/r5.png" alt="">
<img v-show="!imgRightUrl15" src="@/assets/images/r5b.png" alt="">
</div>
<div @mousedown="clickPTZControl(16,0,'right')" @mouseup="clickPTZControl(16,1,'right')" title="光圈-">
<img v-show="imgRightUrl16" src="@/assets/images/r6.png" alt="">
<img v-show="!imgRightUrl16" src="@/assets/images/r6b.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div v-show="videoTabSta == 2" style="background: #f4f4f4;height: 210px;">
<div class="mllx" style="padding-top: 8px;">
<span style="margin-left:8px;">选择预置点：</span>
<el-select v-model="yzdh" placeholder="请选择" style="width:67%;height: 40px;background-color: transparent;">
<el-option v-for="item in options" :key="item.orderNum" :label="item.orderNum+'、'+item.name" :value="item.orderNum"></el-option>
</el-select>
</div>
<div class="mllx" style="text-align: center;margin-top:15px;">
//- <el-button type='primary' @click='clickSetPreset()' size='mini' style="width: 47%;">设置</el-button>
<el-button v-if="isAuth('monitor:monitor:call')" type='primary' @click='clickGoPreset()' size='mini' style="width: 95%;height: 40px;">调用</el-button>
</div>
</div>
</div>
</el-aside>
<el-main style="padding:0px; height:755px;">
<el-card style="height:99.5%;position:relative;" class="videoBg">
//- <el-row v-for="(rowItem,rowIndex) in videoList.size" :key="rowIndex" :span="24" >
//- <el-col :style="colHeight" v-for="(colItem,colIndex) in videoList.size" :key="colIndex" :span="24/videoList.size">
//- <div style="background:#000; padding-bottom:1px" @click="videoClick(videoList.list[(rowIndex*videoList.size)+colIndex])">
//- <video v-if="videoList.list[(rowIndex*videoList.size)+colIndex]" height="98.5%" width="99%" style="margin:0.2% 0 0 0.5%" :id="'video'+((rowIndex*videoList.size)+colIndex*1)" ref="video" src="" muted autoplay controls></video>
//- <img v-else style="height:100%; width:100%" src="@/assets/images/videoImg.png" alt="">
//- </div>
//- </el-col>
//- </el-row>
<el-row :span="24" >
<el-col :style="colHeight" v-for="(colItem,index) in videoList.list" :key="colItem.id" :span="24/videoList.size" >
<div style="background:#000; padding-bottom:1px;" @click="videoClick(videoList.list[index])">
span {{colItem.data.name}}
span {{colItem.data.id}}
<video height="97.5%" width="99%" style="margin:0.2% 0 0 0.5%" :id="colItem.data.id" ref="video" src="" muted autoplay controls></video>
//- <img v-else style="height:100%; width:100%" src="@/assets/images/videoImg.png" alt="" />
</div>
</el-col>
</el-row>
<div class="vidoeSizeButton" v-if='videoList.list.length>0'>
<div class="vidoeSizeButton_buttonList">
<div class="vidoeSizeButton_button" :class="[videoButtonSta == 1?'on':'']">1x</div>
<div class="vidoeSizeButton_button" :class="[videoButtonSta == 2?'on':'']">4x</div>
<div class="vidoeSizeButton_button" :class="[videoButtonSta == 3?'on':'']">9x</div>
<div class="vidoeSizeButton_button" :class="[videoButtonSta == 4?'on':'']">16x</div>
</div>
</div>
</el-card>
</el-main>
</el-container>
</div>
</template>
<script>
import { getUUID } from '@/util'
import Vue from 'vue'
import { isAuth } from '../../../util'
let that
export default {
name: 'sys-user',
filters: {
ellipsis (value) {
if (!value) return ''
if (value.length > 20) {
return value.slice(0, 20) + '...'
}
return value
}
},
data () {
return {
flvPlayer: null,
flvList:[],
idList:[],
isFor: 0,
imgUrl: '',
imgRightUrl11: false,
imgRightUrl12: false,
imgRightUrl13: false,
imgRightUrl14: false,
imgRightUrl15: false,
imgRightUrl16: false,
actionList: ['', '', '', '', '', '', '', '', '设置预置点', '清除预置点', '', '变倍+', '变倍-', '变焦+',
'变焦-', '光圈+', '光圈-', '', '', '', '', '上仰', '下俯', '左转', '右转', '左上', '右上', '左下',
'右下', '自动扫描', '', '', '', '', '', '', '', '', '', '转到预置点'],
dataForm: {},
yzdh: '',
options: [],
videoButtonSta: 1,
videoTabSta: 1,
isCollapse: true,
treeData: [],
defaultExpandedKeys: [],
defaultProps: {
children: 'children',
label: 'name',
level1: 'level'
},
nodeKey: 'id',
checkedData: {
lineId: '',
lineName: '',
stationId: '',
stationName: '',
subSystem: '',
tierId: '',
tierName: '',
resourceId: '',
sId: localStorage.getItem('stationId'),
subCode: '01'
},
currentNode: {},
activeName: '1',
searchInput: '',
colHeight: '233px',
videoList: {
size: 1,
list: []
}
}
},
components: {
},
watch: {
searchInput (val) {
this.$refs.tree.filter(val)
}
},
created () {
that = this
this.initTreeStationMap()
},
methods: {
// 树节点过滤
filterNode (value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
clickPTZControl (ptz, dwStop, img) {
console.log(this.videoList, '======')
// if (this.videoList.list && this.videoList.list.length > 1) {
// this.$message.warning('请选择一个摄像头操作')
// return
// }
if (!this.videoList.list || this.videoList.list.length == 0 || this.videoList.list[this.videoList.list.length - 1].data.type == 'b6af764f2a6e454490a6b1b3c9057e57') {
if (ptz < 11 || ptz > 16) {
return
}
}
if (!isAuth('monitor:monitor: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.currentNode.id,
stationId: this.currentNode.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.currentNode.addressCode, //ip地址
port: this.currentNode.port, //端口
username: this.currentNode.username, //账号
password: this.currentNode.password, //密码
brand: this.currentNode.brand, //品牌
channel: this.currentNode.byx1, //通道
stream: 'main', //主码流
dwPtzCommand: ptz, //云台控制命令
dwStop: dwStop //云台控制0开始和1结束
}
}).then(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: {
actionName: this.actionList[ptz],
resourceId: this.currentNode.id,
stationId: this.currentNode.stationId,
type: this.currentNode.type,
result: result
}
}).then(data => {
})
},
videoClick(now) {
if (now) {
this.currentNode = now.data
} else {
this.currentNode = null
}
},
handleClick(tab, event) { //左侧tab切换
if (tab) {
this.activeName = tab
}
if (this.activeName == 1) {
this.videoList.list = ''
this.videoList.list = []
this.videoList.size = 1
this.videoButtonSta = 1
this.initTreeStationMap()
} else {
this.videoList.list = ''
this.videoList.list = []
this.videoList.size = 1
this.videoButtonSta = 1
this.initTreeStationMap(true)
}
},
videoTabClick(now) {
this.videoTabSta = now
},
treeDataDeleteClick(node, data) { //左侧tree取消收藏按钮
this.$confirm('确认取消该收藏?', '取消收藏', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
.then(() => {
this.$http({
url: this.$http.adornUrlEq('/liEnshrine/delete'),
method: 'post',
data: {
resourceId: node.data.id,
stationId: this.checkedData.sId
}
}).then(data => {
if (data && data.code === 0) {
this.$message.success('取消收藏成功')
this.initTreeStationMap(true)
}
})
})
.catch(() => {})
},
treeDataOffClick () { //左侧tree收藏按钮
let node = this.$refs.tree.getCurrentNode()
if (node) {
if (node.level != 6) {
this.$message.warning('只能收藏资源点')
return
}
} else {
this.$message.warning('未选择资源点')
return
}
this.$http({
url: this.$http.adornUrlEq('/liEnshrine/save'),
method: 'post',
data: {
resourceId: node.id,
stationId: this.checkedData.sId
}
}).then(data => {
if (data && data.code === 0) {
if (data.msg === '收藏成功') {
this.$message.success(data.msg)
} else {
this.$message.warning(data.msg)
}
}
})
},
//初始化站点下的资源点
initTreeStationMap(save) {
this.treeData = []
// console.log(this.videoList.list, '111')
let url = ''
if (!save) { // 摄像头列表接口路径
url = this.$http.adornUrlEq('/liResource/getStationMapCodeTreeList')
} else { // 收藏夹接口路径
url = this.$http.adornUrlEq('/liEnshrine/getEnshrineStationMapTreeList')
}
this.$http({
url: url,
method: 'post',
data: {
subCode: this.checkedData.subCode,
stationId: this.checkedData.sId,
resourceName: this.searchInput,
byx1: 'sp'
}
}).then(data => {
if (data && data.code === 0) {
this.treeData = data.nodes
if (this.treeData) {
this.$refs.tree.updateKeyChildren(this.checkedData.sId, data.nodes)
Vue.set(this.treeData[0], 'iconB', true)
}
}
}).then(() => {
if (this.treeData) {
this.defaultExpandedKeys = [this.treeData[0].id]
//设置选中的节点
this.isFlag(this.treeData, this.treeData[0].id)
this.$nextTick(() => {
this.$refs.tree.setCurrentNode(this.treeData[0])
})
}
this.currentNode = null
})
},
//初始化每个摄像头的预置点信息
sysPresetList(id) {
this.$http({
url: this.$http.adornUrlEq('/sysPreset/queryByResourceId'),
method: 'post',
data: {
resourceId: id,
stationId: this.checkedData.sId,
page: this.pageIndex,
rows: 100
}
}).then(data => {
if (data && data.code === 0) {
this.options = data.page
}
})
},
isFlag(data, id) {
data.forEach(res => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
Vue.set(res, 'iconB', false)
}
if (res.children) {
this.isFlag(res.children, id)
}
})
},
//设置预置点号
clickSetPreset() {
if (this.yzdh) {
this.$http({
url: this.$http.adornUrlEq('/camera/presetControl'),
method: 'post',
data: {
resourceId: this.currentNode.id,
stationId: this.currentNode.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.currentNode.addressCode, //ip地址
port: this.currentNode.port, //端口
username: this.currentNode.username, //账号
password: this.currentNode.password, //密码
channel: '1', //通道
// stream:'main',//主码流
preset: this.yzdh, //预置点号
dwPtzCommand: 8 //云台控制命令，8=设置预置点，9=清除预置点，39=转到预置点
}
}).then((data) => {
if (data && data.code === 0) {
this.$message.success(data.msg)
this.saveLog(1, 8)// 执行结果 成功 1 失败 2
} else {
this.$message.error(data.msg)
this.saveLog(2, 8)// 执行结果 成功 1 失败 2
}
})
} else {
this.$message.warning('请选择预置点!')
}
},
// 调用转动到指定预制点号
clickGoPreset() {
if (this.yzdh) {
this.$http({
url: this.$http.adornUrlEq('/camera/presetControl'),
method: 'post',
data: {
resourceId: this.currentNode.id,
stationId: this.currentNode.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.currentNode.addressCode, //ip地址
port: this.currentNode.port, //端口
username: this.currentNode.username, //账号
password: this.currentNode.password, //密码
channel: this.currentNode.byx1, //通道
// stream:'main',//主码流
preset: this.yzdh, //预置点号
dwPtzCommand: 39 //云台控制命令，8=设置预置点，9=清除预置点，39=转到预置点
}
}).then((data) => {
if (data && data.code === 0) {
this.$message.success(data.msg)
this.saveLog(1, 39)// 执行结果 成功 1 失败 2
} else {
this.$message.error(data.msg)
this.saveLog(2, 39)// 执行结果 成功 1 失败 2
}
})
} else {
this.$message.warning('请选择预置点!')
}
},
//线路资源点树节点勾选事件
async handleCheckChange(node, checked, indeterminate) {
console.log(node, checked, indeterminate)
let id = node.id
if (checked) {
//判断，如果摄像头选择个数达到16个，则不能再进行选择，并进行提示
if(this.videoList.list.length == 16){
this.$message.warning('您选择的摄像头个数超过了当前系统界面最大支持数!')
return
}
if (this.currentNode === null) {
console.log('切换tab后第一次选中，清空之前list数据')
this.videoList.list = ''
this.videoList.list = []
this.videoList.size = 1
this.videoButtonSta = 1
}
this.treeData.forEach(res => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
Vue.set(res, 'iconB', false)
}
})
this.currentNode = node
this.$nextTick(() => {
this.$refs.tree.setCurrentNode(node)
})
this.yzdh = null
//视频直播
// var src = 'ws://10.20.72.26:8000/live/' + node.byx1 + '.flv'
var src = "";
await this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post',
data: {
id: node.id,
stationId: node.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3
}
}).then(data => {
src = data.url
console.log(data)
console.log("src:"+src)
this.videoList.list.push({
src: src,
data: node
})
if (this.videoList.list.length <= 1) {
this.videoList.size = 1
this.videoButtonSta = 1
} else if (this.videoList.list.length > 1 && this.videoList.list.length <= 4) {
this.videoList.size = 2
this.videoButtonSta = 2
} else if (this.videoList.list.length > 4 && this.videoList.list.length <= 9) {
this.videoList.size = 3
this.videoButtonSta = 3
} else if (this.videoList.list.length > 9 && this.videoList.list.length <= 16) {
this.videoList.size = 4
this.videoButtonSta = 4
}
this.colHeight = 'height:' + (700 / this.videoList.size - 3) + 'px'
this.sysPresetList(node.id)
return data
}).then((data)=>{
console.log(data)
let item ={src:data.url,id:node.id}
console.log(item)
this.playFlv(item)
this.idList.push(this.flvPlayer._mediaElement.id)
let idIndex=this.idList.indexOf(this.flvPlayer._mediaElement.id)
if(idIndex !=-1){
this.flvList.push(this.flvPlayer)
console.log(this.flvList,'!!!!!!!!')
}
})
} else {
console.log('取消选择 删除记录')
console.log(this.videoList.list)
console.log(this.$refs.video)
if (this.currentNode === null) { //没有选中对象，证明没有任何被选中，测试为切换tab，不执行删除
return
}
// //取消选择 删除记录
var index = this.videoList.list.findIndex(function(item) {
return item.data.id == id
})
console.log(this.flvList,'flvPlay集合')
let cancelFlv= this.flvList.filter(e=>{
return e._mediaElement.id==id
})
console.log(cancelFlv,'当前取消的')
this.destory(cancelFlv[0])
// console.log('index:' + index)
// this.videoList.list.splice(index,1)
this.flvList.splice(index,1)
// this.videoList.list.splice(index,1)
console.log(this.flvList,'flvPlay集合--取消后')
// console.log(this.flvList[index])
// this.flvList[index].pause()
// this.flvList[index].unload()
// this.flvList[index].detachMediaElement()
// this.flvList[index].destroy()
// this.flvList[index] = null
// console.log(this.flvList)
// this.flvList.splice(index,1)
// console.log(this.flvList)
if (this.videoList.list.length <= 1) {
this.videoList.size = 1
this.videoButtonSta = 1
} else if (this.videoList.list.length > 1 && this.videoList.list.length <= 4) {
this.videoList.size = 2
this.videoButtonSta = 2
} else if (this.videoList.list.length > 4 && this.videoList.list.length <= 9) {
this.videoList.size = 3
this.videoButtonSta = 3
} else if (this.videoList.list.length > 9 && this.videoList.list.length <= 16) {
this.videoList.size = 4
this.videoButtonSta = 4
}
this.colHeight = 'height:' + (700 / this.videoList.size - 3) + 'px'
this.$nextTick(() => {
this.$refs.tree.setCurrentKey()
})
}
},
// 连接播放
playFlv(item){
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: item.src
})
var player = document.getElementById(item.id);
console.log(player,'--------')
this.flvPlayer.attachMediaElement(player)
try {
this.flvPlayer.load()
// this.flvPlayer.play()
console.log(this.flvPlayer._mediaElement.id)
} catch (error) {
console.log(error)
}
}
},
// 销毁
destory(flvplayer) {
if (flvplayer && flvplayer._emitter && flvplayer.destroy) {
flvplayer.destroy();
flvplayer = null;
}
},
//线路资源点树节点点击事件
handleNodeClick(node) {
let id = node.id
this.treeData.forEach(res => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
Vue.set(res, 'iconB', false)
}
})
if (node.level == 6) {
let keys = this.$refs.tree.getCheckedKeys(true)
console.log(keys, '-------')
let flag = false
if (keys) {
keys.forEach(e => {
if (e === node.id) {
flag = true
}
})
}
if (flag) {
this.$nextTick(() => {
this.$refs.tree.setChecked(node.id, false)
this.$refs.tree.setCurrentKey()
})
} else {
this.currentNode = node
this.$nextTick(() => {
this.$refs.tree.setChecked(node.id, true)
})
}
console.log('1111111111')
}
}
}
}
</script>
<style lang='scss' scoped>
.dic_tree {
background: #f4f4f4;
font-size: 14px;
transform: translateX(-6px);
margin-top: 20px;
}
.dic_tree /deep/ .el-tree-node__content {
padding-left: 0px !important;
.el-checkbox__inner{
left:4px;
}
}
.dic_tree /deep/ .el-tree-node {
position: relative;
padding-left: 16px;
}
.dic_tree /deep/ .el-tree-node__children {
padding-left: 8px;
}
.dic_tree /deep/ .el-tree-node :last-child:before {
height: 38px;
}
.dic_tree /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.dic_tree /deep/ .el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.dic_tree /deep/ .el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.dic_tree /deep/ .el-tree-node:before {
border-left: 1px dashed #bfbfbf;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.dic_tree /deep/ .el-tree-node:after {
border-top: 1px dashed #bfbfbf;
height: 20px;
top: 12px;
width: 36px;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.tree-container {
/* 树的parent，样式自定 */
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
.dic_tree /deep/ .el-icon-caret-right:before {
background: url("../../../assets/images/add.png");
content: "";
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree
/deep/
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("../../../assets/images/sub.png");
content: "";
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon{
padding:0px;
}
.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
opacity: 0;
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
// margin-left: -15px !important;
}
</style>
<style lang='scss'>
.info-form {
padding: 10px;
}
.inputWidth {
width: 130px;
}
.resource-container {
width: 100%;
height: 100%;
position: relative;
border: 0px solid black;
overflow: auto;
}
.monitor_monitor{
.el-card__body{
padding: 0;
border: none;
}
.el-aside{
.el-tree{
background: #f4f4f4;
font-size: 12px;
overflow-y:scroll;
height: 370px;
.el-tree-node__content{
width: 100%;
}
}
.el-card__body{
padding: 0;
}
.el-card {
height: 490px;
background: #f4f4f4;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: #f4f4f4 !important;
color: #fff !important;
.el-button--text{
color: #fff;
}
.custom-tree-node{
background-color:#35aff8 !important;
}
}
}
.monitor_monitor_left_top{
height: 50px; background: #e1edf4; padding-left:10px;
.monitor_monitor_left_topL{
height: 40px; padding-top:10px; float: left;
div{
height: 40px; float: left; padding: 0 10px 0 10px; line-height: 40px; cursor:pointer; font-size: 14px;
border: 1px solid transparent;
span{
color:#35aff8;
}
}
div.on{
background: #fff; border: 1px solid #c3c3c3 ; border-bottom: none;font-family:Microsoft YaHei;
font-weight:400;
}
}
.monitor_monitor_left_topR{
float: right;margin-top: 10px;
.el-input{
width: 109px;
}
}
}
.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: 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: start;
div {
width: 40px;
height: 40px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.vidoeSizeButton{
width: 100%; height: 25px; background: #4F789D; padding-top: 5px;
position: absolute;
bottom: 0;
.vidoeSizeButton_buttonList{
float: right;
.vidoeSizeButton_button{
height: 18px; width: 30px; background: #476C8D; color: #B3BFCB; line-height: 18px; text-align:center; float: left; margin-right: 2px; font-size: 12px;
}
.vidoeSizeButton_button.on{
color: #fff; background: #6186A7;
}
}
}
}
.videoBg{
background: url('~@/assets/images/videoImg.png');
background-size: 100% 100%;
}
</style>
src/pages/monitor/monitor/index222.vue deleted 100644 → 0
View file @ e518491e
<template lang="pug">
<div class='monitor_monitor'>
<el-container style='padding-left:0px;'>
<el-aside width='333px' style='height:85vh;'>
<el-card style='height:450px;'>
<div class="monitor_monitor_left_top">
<div class="monitor_monitor_left_topL">
<div :class="[activeName==1?'on':'']" @click="handleClick(1)">摄像头列表</div>
<div :class="[activeName==2?'on':'']" @click="handleClick(2)">收藏夹</div>
</div>
<div style="float:right; margin:5px 5px 0 5px">
<el-button type="text" size="mini" icon='el-icon-shoucang' @click="treeDataOffClick()"></el-button>
</div>
<div class="monitor_monitor_left_topR">
<el-input suffix-icon="el-icon-search" size="small" v-model="searchInput" clearable></el-input>
</div>
</div>
<div class="tree-container">
//- <el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' >
<el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :filter-node-method="filterNode" :props="defaultProps" show-checkbox :check-strictly='true' :default-expand-all='false' @check-change="handleCheckChange" @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' node-key='id' >
<span class="custom-tree-node" style='width:80%;line-height: 18px;' slot-scope="{ node, data }">
<span v-if="node.data.level != 6 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon"></span>
<span v-if="node.data.level != 6 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon"></span>
<span v-if="node.data.level == 6 && node.data.type=='b6af764f2a6e454490a6b1b3c9057e57'" class="el-icon-wq-treeQiang xa-icon"></span>
<span v-if="node.data.level == 6 && node.data.type=='ece0b8b2db27411886254e81134988a3'" class="el-icon-wq-treeQiu xa-icon"></span>
<span v-if="node.label.indexOf('在线') == -1 && node.label.indexOf('离线') == -1 ">&nbsp;{{node.label}}</span>
<span v-if="node.label.indexOf('在线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:green;'>[在线]</span></span>
<span v-if="node.label.indexOf('离线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:red;'>[离线]</span></span>
<span style="float:right;">
<el-button style="padding:0;" v-if="activeName == 2 && node.data.level == 6" type='text' icon="el-icon-delete" @click="treeDataDeleteClick(node,data)" ></el-button>
</span>
span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
</span>
</el-tree>
</div>
</el-card>
<div style="padding-bottom:40px;">
<div class="monitor_monitor_left_top">
<div class="monitor_monitor_left_topL">
<div :class="[videoTabSta==1?'on':'']" @click="videoTabClick(1)">云台</div>
<div :class="[videoTabSta==2?'on':'']" @click="videoTabClick(2)">预置点</div>
</div>
</div>
<div class="info-form" v-show="videoTabSta == 1">
<div class="operate">
<div class="btns">
<img v-show="imgUrl == ''" src="@/assets/images/btns.png" alt="">
<img v-show="imgUrl == 's'" src="@/assets/images/s.png" alt="">
<img v-show="imgUrl == 'x'" src="@/assets/images/x.png" alt="">
<img v-show="imgUrl == 'z'" src="@/assets/images/z.png" alt="">
<img v-show="imgUrl == 'y'" src="@/assets/images/y.png" alt="">
<img v-show="imgUrl == 'ys'" src="@/assets/images/ys.png" alt="">
<img v-show="imgUrl == 'yx'" src="@/assets/images/yx.png" alt="">
<img v-show="imgUrl == 'zs'" src="@/assets/images/zs.png" alt="">
<img v-show="imgUrl == 'zx'" src="@/assets/images/zx.png" alt="">
<div class="fx">方向</div>
<div class="zs" @mousedown="clickPTZControl(25,0,'zs')" @mouseup="clickPTZControl(25,1)" title="云台左上">
</div>
<div class="s" @mousedown="clickPTZControl(21,0,'s')" @mouseup="clickPTZControl(21,1)" title="云台上仰">
</div>
<div class="ys" @mousedown="clickPTZControl(26,0,'ys')" @mouseup="clickPTZControl(26,1)" title="云台右上">
</div>
<div class="y" @mousedown="clickPTZControl(24,0,'y')" @mouseup="clickPTZControl(24,1)" title="云台右转">
</div>
<div class="yx" @mousedown="clickPTZControl(28,0,'yx')" @mouseup="clickPTZControl(24,1)" title="云台右转">
</div>
<div class="x" @mousedown="clickPTZControl(22,0,'x')" @mouseup="clickPTZControl(22,1)" title="云台右转">
</div>
<div class="zx" @mousedown="clickPTZControl(27,0,'zx')" @mouseup="clickPTZControl(27,1)" title="云台右转">
</div>
<div class="z" @mousedown="clickPTZControl(23,0,'z')" @mouseup="clickPTZControl(23,1)" title="云台右转">
</div>
</div>
<div class="ytBox ytBox2">
<div class="bbBtn">
<div @mousedown="clickPTZControl(11,0,'right')" @mouseup="clickPTZControl(11,1,'right')" title="变倍+">
<img v-show="imgRightUrl11" src="@/assets/images/r1.png" alt="">
<img v-show="!imgRightUrl11" src="@/assets/images/r1b.png" alt="">
</div>
<div @mousedown="clickPTZControl(12,0,'right')" @mouseup="clickPTZControl(12,1,'right')" title="变倍-">
<img v-show="imgRightUrl12" src="@/assets/images/r2.png" alt="">
<img v-show="!imgRightUrl12" src="@/assets/images/r2b.png" alt="">
</div>
</div>
<div class="bbBtn">
<div @mousedown="clickPTZControl(13,0,'right')" @mouseup="clickPTZControl(13,1,'right')" title="变焦+">
<img v-show="imgRightUrl13" src="@/assets/images/r3.png" alt="">
<img v-show="!imgRightUrl13" src="@/assets/images/r3b.png" alt="">
</div>
<div @mousedown="clickPTZControl(14,0,'right')" @mouseup="clickPTZControl(14,1,'right')" title="变焦-">
<img v-show="imgRightUrl14" src="@/assets/images/r4.png" alt="">
<img v-show="!imgRightUrl14" src="@/assets/images/r4b.png" alt="">
</div>
</div>
<div class="bbBtn">
<div @mousedown="clickPTZControl(15,0,'right')" @mouseup="clickPTZControl(15,1,'right')" title="光圈+">
<img v-show="imgRightUrl15" src="@/assets/images/r5.png" alt="">
<img v-show="!imgRightUrl15" src="@/assets/images/r5b.png" alt="">
</div>
<div @mousedown="clickPTZControl(16,0,'right')" @mouseup="clickPTZControl(16,1,'right')" title="光圈-">
<img v-show="imgRightUrl16" src="@/assets/images/r6.png" alt="">
<img v-show="!imgRightUrl16" src="@/assets/images/r6b.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div v-show="videoTabSta == 2" style="background: #f4f4f4;height: 210px;">
<div class="mllx" style="padding-top: 8px;">
<span style="margin-left:8px;">选择预置点：</span>
<el-select v-model="yzdh" placeholder="请选择" style="width:67%;height: 40px;background-color: transparent;">
<el-option v-for="item in options" :key="item.orderNum" :label="item.orderNum+'、'+item.name" :value="item.orderNum"></el-option>
</el-select>
</div>
<div class="mllx" style="text-align: center;margin-top:15px;">
//- <el-button type='primary' @click='clickSetPreset()' size='mini' style="width: 47%;">设置</el-button>
<el-button v-if="isAuth('monitor:monitor:call')" type='primary' @click='clickGoPreset()' size='mini' style="width: 95%;height: 40px;">调用</el-button>
</div>
</div>
</div>
</el-aside>
<el-main style="padding:0px; height:755px;">
<el-card style="height:99.5%;position:relative;" class="videoBg">
<el-row v-for="(rowItem,rowIndex) in videoList.size" :key="rowIndex" :span="24" >
<el-col :style="colHeight" v-for="(colItem,colIndex) in videoList.size" :key="colIndex" :span="24/videoList.size">
<div style="background:#000; padding-bottom:1px" @click="videoClick(videoList.list[(rowIndex*videoList.size)+colIndex])">
//- <video v-if="videoList.list[(rowIndex*videoList.size)+colIndex]" height="98.5%" width="99%" style="margin:0.2% 0 0 0.5%" :id="'video'+((rowIndex*videoList.size)+colIndex*1)" ref="video" src="" muted autoplay controls></video>
<video v-if="videoList.list[(rowIndex*videoList.size)+colIndex]" height="98.5%" width="99%" style="margin:0.2% 0 0 0.5%" :id="videoList.list[((rowIndex*videoList.size)+colIndex*1)].data.id" ref="video" src="" muted autoplay controls></video>
<img v-else style="height:100%; width:100%" src="@/assets/images/videoImg.png" alt="">
</div>
</el-col>
</el-row>
//- <el-row :span="24" >
//- <el-col :style="colHeight" v-for="(colItem,index) in videoList.list" :key="colItem.id" :span="24/videoList.size" >
//- <div style="background:#000; padding-bottom:1px;" @click="videoClick(videoList.list[index])">
//- span {{colItem.data.name}}
//- <video v-if="videoList.list[index]" height="97.5%" width="99%" style="margin:0.2% 0 0 0.5%" :id="'video'+(index)" ref="video" src="" muted autoplay controls></video>
//- //- <img v-else style="height:100%; width:100%" src="@/assets/images/videoImg.png" alt="" />
//- </div>
//- </el-col>
//- </el-row>
<div class="vidoeSizeButton" v-if='videoList.list.length>0'>
<div class="vidoeSizeButton_buttonList">
<div class="vidoeSizeButton_button" :class="[videoButtonSta == 1?'on':'']">1x</div>
<div class="vidoeSizeButton_button" :class="[videoButtonSta == 2?'on':'']">4x</div>
<div class="vidoeSizeButton_button" :class="[videoButtonSta == 3?'on':'']">9x</div>
<div class="vidoeSizeButton_button" :class="[videoButtonSta == 4?'on':'']">16x</div>
</div>
</div>
</el-card>
</el-main>
</el-container>
</div>
</template>
<script>
import { getUUID } from '@/util'
import Vue from 'vue'
import { isAuth } from '../../../util'
let that
export default {
name: 'sys-user',
filters: {
ellipsis (value) {
if (!value) return ''
if (value.length > 20) {
return value.slice(0, 20) + '...'
}
return value
}
},
data () {
return {
flvList:[],
flvIdList:[],
flvPlayer: null,
isFor: 0,
imgUrl: '',
imgRightUrl11: false,
imgRightUrl12: false,
imgRightUrl13: false,
imgRightUrl14: false,
imgRightUrl15: false,
imgRightUrl16: false,
actionList: ['', '', '', '', '', '', '', '', '设置预置点', '清除预置点', '', '变倍+', '变倍-', '变焦+',
'变焦-', '光圈+', '光圈-', '', '', '', '', '上仰', '下俯', '左转', '右转', '左上', '右上', '左下',
'右下', '自动扫描', '', '', '', '', '', '', '', '', '', '转到预置点'],
dataForm: {},
yzdh: '',
options: [],
videoButtonSta: 1,
videoTabSta: 1,
isCollapse: true,
treeData: [],
defaultExpandedKeys: [],
defaultProps: {
children: 'children',
label: 'name',
level1: 'level'
},
nodeKey: 'id',
checkedData: {
lineId: '',
lineName: '',
stationId: '',
stationName: '',
subSystem: '',
tierId: '',
tierName: '',
resourceId: '',
sId: localStorage.getItem('stationId'),
subCode: '01'
},
currentNode: {},
activeName: '1',
searchInput: '',
colHeight: '233px',
videoList: {
size: 1,
list: []
}
}
},
components: {
},
watch: {
searchInput (val) {
this.$refs.tree.filter(val)
}
},
created () {
that = this
this.initTreeStationMap()
},
methods: {
// 树节点过滤
filterNode (value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
clickPTZControl (ptz, dwStop, img) {
console.log(this.videoList, '======')
// if (this.videoList.list && this.videoList.list.length > 1) {
// this.$message.warning('请选择一个摄像头操作')
// return
// }
if (!this.videoList.list || this.videoList.list.length == 0 || this.videoList.list[this.videoList.list.length - 1].data.type == 'b6af764f2a6e454490a6b1b3c9057e57') {
if (ptz < 11 || ptz > 16) {
return
}
}
if (!isAuth('monitor:monitor: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.currentNode.id,
stationId: this.currentNode.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.currentNode.addressCode, //ip地址
port: this.currentNode.port, //端口
username: this.currentNode.username, //账号
password: this.currentNode.password, //密码
brand: this.currentNode.brand, //品牌
channel: this.currentNode.byx1, //通道
stream: 'main', //主码流
dwPtzCommand: ptz, //云台控制命令
dwStop: dwStop //云台控制0开始和1结束
}
}).then(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: {
actionName: this.actionList[ptz],
resourceId: this.currentNode.id,
stationId: this.currentNode.stationId,
type: this.currentNode.type,
result: result
}
}).then(data => {
})
},
videoClick(now) {
if (now) {
this.currentNode = now.data
} else {
this.currentNode = null
}
},
handleClick(tab, event) { //左侧tab切换
if (tab) {
this.activeName = tab
}
if (this.activeName == 1) {
this.videoList.list = ''
this.videoList.list = []
this.videoList.size = 1
this.videoButtonSta = 1
this.initTreeStationMap()
} else {
this.videoList.list = ''
this.videoList.list = []
this.videoList.size = 1
this.videoButtonSta = 1
this.initTreeStationMap(true)
}
},
videoTabClick(now) {
this.videoTabSta = now
},
treeDataDeleteClick(node, data) { //左侧tree取消收藏按钮
this.$confirm('确认取消该收藏?', '取消收藏', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
.then(() => {
this.$http({
url: this.$http.adornUrlEq('/liEnshrine/delete'),
method: 'post',
data: {
resourceId: node.data.id,
stationId: this.checkedData.sId
}
}).then(data => {
if (data && data.code === 0) {
this.$message.success('取消收藏成功')
this.initTreeStationMap(true)
}
})
})
.catch(() => {})
},
treeDataOffClick () { //左侧tree收藏按钮
let node = this.$refs.tree.getCurrentNode()
if (node) {
if (node.level != 6) {
this.$message.warning('只能收藏资源点')
return
}
} else {
this.$message.warning('未选择资源点')
return
}
this.$http({
url: this.$http.adornUrlEq('/liEnshrine/save'),
method: 'post',
data: {
resourceId: node.id,
stationId: this.checkedData.sId
}
}).then(data => {
if (data && data.code === 0) {
if (data.msg === '收藏成功') {
this.$message.success(data.msg)
} else {
this.$message.warning(data.msg)
}
}
})
},
//初始化站点下的资源点
initTreeStationMap(save) {
this.treeData = []
// console.log(this.videoList.list, '111')
let url = ''
if (!save) { // 摄像头列表接口路径
url = this.$http.adornUrlEq('/liResource/getStationMapCodeTreeList')
} else { // 收藏夹接口路径
url = this.$http.adornUrlEq('/liEnshrine/getEnshrineStationMapTreeList')
}
this.$http({
url: url,
method: 'post',
data: {
subCode: this.checkedData.subCode,
stationId: this.checkedData.sId,
resourceName: this.searchInput,
byx1: 'sp'
}
}).then(data => {
if (data && data.code === 0) {
this.treeData = data.nodes
if (this.treeData) {
this.$refs.tree.updateKeyChildren(this.checkedData.sId, data.nodes)
Vue.set(this.treeData[0], 'iconB', true)
}
}
}).then(() => {
if (this.treeData) {
this.defaultExpandedKeys = [this.treeData[0].id]
//设置选中的节点
this.isFlag(this.treeData, this.treeData[0].id)
this.$nextTick(() => {
this.$refs.tree.setCurrentNode(this.treeData[0])
})
}
this.currentNode = null
})
},
//初始化每个摄像头的预置点信息
sysPresetList(id) {
this.$http({
url: this.$http.adornUrlEq('/sysPreset/queryByResourceId'),
method: 'post',
data: {
resourceId: id,
stationId: this.checkedData.sId,
page: this.pageIndex,
rows: 100
}
}).then(data => {
if (data && data.code === 0) {
this.options = data.page
}
})
},
isFlag(data, id) {
data.forEach(res => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
Vue.set(res, 'iconB', false)
}
if (res.children) {
this.isFlag(res.children, id)
}
})
},
//设置预置点号
clickSetPreset() {
if (this.yzdh) {
this.$http({
url: this.$http.adornUrlEq('/camera/presetControl'),
method: 'post',
data: {
resourceId: this.currentNode.id,
stationId: this.currentNode.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.currentNode.addressCode, //ip地址
port: this.currentNode.port, //端口
username: this.currentNode.username, //账号
password: this.currentNode.password, //密码
channel: '1', //通道
// stream:'main',//主码流
preset: this.yzdh, //预置点号
dwPtzCommand: 8 //云台控制命令，8=设置预置点，9=清除预置点，39=转到预置点
}
}).then((data) => {
if (data && data.code === 0) {
this.$message.success(data.msg)
this.saveLog(1, 8)// 执行结果 成功 1 失败 2
} else {
this.$message.error(data.msg)
this.saveLog(2, 8)// 执行结果 成功 1 失败 2
}
})
} else {
this.$message.warning('请选择预置点!')
}
},
// 调用转动到指定预制点号
clickGoPreset() {
if (this.yzdh) {
this.$http({
url: this.$http.adornUrlEq('/camera/presetControl'),
method: 'post',
data: {
resourceId: this.currentNode.id,
stationId: this.currentNode.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.currentNode.addressCode, //ip地址
port: this.currentNode.port, //端口
username: this.currentNode.username, //账号
password: this.currentNode.password, //密码
channel: this.currentNode.byx1, //通道
// stream:'main',//主码流
preset: this.yzdh, //预置点号
dwPtzCommand: 39 //云台控制命令，8=设置预置点，9=清除预置点，39=转到预置点
}
}).then((data) => {
if (data && data.code === 0) {
this.$message.success(data.msg)
this.saveLog(1, 39)// 执行结果 成功 1 失败 2
} else {
this.$message.error(data.msg)
this.saveLog(2, 39)// 执行结果 成功 1 失败 2
}
})
} else {
this.$message.warning('请选择预置点!')
}
},
//线路资源点树节点勾选事件
handleCheckChange(node, checked, indeterminate) {
console.log(node, checked, indeterminate)
let id = node.id
if (checked) {
//判断，如果摄像头选择个数达到16个，则不能再进行选择，并进行提示
if(this.videoList.list.length == 16){
this.$message.warning('您选择的摄像头个数超过了当前系统界面最大支持数!')
return
}
if (this.currentNode === null) {
console.log('切换tab后第一次选中，清空之前list数据')
this.videoList.list = ''
this.videoList.list = []
this.videoList.size = 1
this.videoButtonSta = 1
}
this.treeData.forEach(res => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
Vue.set(res, 'iconB', false)
}
})
this.currentNode = node
this.$nextTick(() => {
this.$refs.tree.setCurrentNode(node)
})
this.yzdh = null
//视频直播
// var src = 'ws://10.20.72.26:8000/live/' + node.byx1 + '.flv'
var src = "";
this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post',
data: {
id: node.id,
stationId: node.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3
}
}).then(data => {
src = data.url
console.log("src:"+src)
this.videoList.list.push({
src: src,
data: node
})
if (this.videoList.list.length <= 1) {
this.videoList.size = 1
this.videoButtonSta = 1
} else if (this.videoList.list.length > 1 && this.videoList.list.length <= 4) {
this.videoList.size = 2
this.videoButtonSta = 2
} else if (this.videoList.list.length > 4 && this.videoList.list.length <= 9) {
this.videoList.size = 3
this.videoButtonSta = 3
} else if (this.videoList.list.length > 9 && this.videoList.list.length <= 16) {
this.videoList.size = 4
this.videoButtonSta = 4
}
this.colHeight = 'height:' + (700 / this.videoList.size - 3) + 'px'
//视频连接
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: src
})
this.$nextTick(function () {
this.flvPlayer.attachMediaElement(this.$refs.video[this.videoList.list.length - 1])
try {
this.flvPlayer.load()
// this.flvPlayer.play()
} catch (error) {
console.log(error)
}
})
}
this.sysPresetList(node.id)
}).then(()=>{
console.log('+++勾选添加时++++++++++++')
console.log(this.flvPlayer,'--添加时')
console.log(this.flvPlayer._mediaElement.id,'--当前flvId--')
this.flvIdList.push(this.flvPlayer._mediaElement.id) //flvId集合
let idIndex=this.flvIdList.indexOf(this.flvPlayer._mediaElement.id)
if(idIndex>-1){
this.flvList.push(this.flvPlayer)
}
console.log(this.flvList,'flv集合')
console.log(this.flvIdList,'勾选id集合')
console.log(this.videoList.list,'list集合')
console.log('++++++++++++++++++++++++')
})
} else {
if (this.currentNode === null) { //没有选中对象，证明没有任何被选中，测试为切换tab，不执行删除
return
}
console.log('---取消勾选时---------')
console.log(id)
var index = this.flvIdList.findIndex((item)=> {
return item == id
})
console.log('------------index:' + index)
if(index>-1&&this.flvIdList.length>1){
//销毁对应的flv ==》删除集合中的flv ===》删除对应id==》 删除会导致最后一个也被删除
this.destory(this.flvList[index])
this.flvList.splice(index,1)
this.flvIdList.splice(index,1)
// this.destory(this.flvList.pop())
return
const lastItem=this.videoList.list.pop()
console.log(lastItem)
console.log(this.flvIdList,'删除后flvId集合')
console.log(this.flvList,'删除后flv集合')
console.log(this.videoList.list,'删除后的videoList.list')
let item ={
src:lastItem.src,
id:this.flvIdList[this.flvIdList.length-1]
}
console.log(item)
this.playFlv(item)
// this.videoList.list.splice(index,1)
}else{
this.videoList.list.splice(index,1)
this.videoList.list=[]
this.flvIdList=[]
this.flvList=[]
this.videoList.size = 1
this.videoButtonSta = 1
}
// console.log(this.videoList.list.length,1111111111111111)
// if(this.flvIdList.length==1){
// this.destory(this.flvList[index])
// this.videoList.list.splice(index,1)
// this.videoList.list=[]
// }
// console.log(this.flvIdList[this.flvIdList.length-1])
// console.log(this.videoList.list[this.flvIdList.length-1].src)
// this.videoList.list=this.videoList.list.filter(e=>{
// return e.data.id!=id
// })
console.log('---------------------')
return
for (let i = 0; i < this.videoList.list.length; i++) {
this.flvPlayer.attachMediaElement(this.$refs.video[i])
this.flvPlayer.pause()
setTimeout(() => { //设置延迟执行
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.videoList.list[i].src
})
this.$nextTick(function () {
this.flvPlayer.attachMediaElement(this.$refs.video[i])
this.flvPlayer.load()
})
}, 100)
}
if (this.videoList.list.length <= 1) {
this.videoList.size = 1
this.videoButtonSta = 1
} else if (this.videoList.list.length > 1 && this.videoList.list.length <= 4) {
this.videoList.size = 2
this.videoButtonSta = 2
} else if (this.videoList.list.length > 4 && this.videoList.list.length <= 9) {
this.videoList.size = 3
this.videoButtonSta = 3
} else if (this.videoList.list.length > 9 && this.videoList.list.length <= 16) {
this.videoList.size = 4
this.videoButtonSta = 4
}
this.colHeight = 'height:' + (700 / this.videoList.size - 3) + 'px'
this.$nextTick(() => {
this.$refs.tree.setCurrentKey()
})
}
},
playFlv(item){
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: item.src
})
var player = document.getElementById(item.id);
console.log(player,'--------')
this.flvPlayer.attachMediaElement(player)
try {
this.flvPlayer.load()
// this.flvPlayer.play()
console.log(this.flvPlayer._mediaElement.id)
} catch (error) {
console.log(error)
}
}
},
// 销毁
destory(flvplayer) {
if (flvplayer && flvplayer._emitter && flvplayer.destroy) {
flvplayer.destroy();
flvplayer = null;
}
},
//线路资源点树节点点击事件
handleNodeClick(node) {
let id = node.id
this.treeData.forEach(res => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
Vue.set(res, 'iconB', false)
}
})
if (node.level == 6) {
let keys = this.$refs.tree.getCheckedKeys(true)
console.log(keys, '-------')
let flag = false
if (keys) {
keys.forEach(e => {
if (e === node.id) {
flag = true
}
})
}
if (flag) {
this.$nextTick(() => {
this.$refs.tree.setChecked(node.id, false)
this.$refs.tree.setCurrentKey()
})
} else {
this.currentNode = node
this.$nextTick(() => {
this.$refs.tree.setChecked(node.id, true)
})
}
console.log('1111111111')
}
}
}
}
</script>
<style lang='scss' scoped>
.dic_tree {
background: #f4f4f4;
font-size: 14px;
transform: translateX(-6px);
margin-top: 20px;
}
.dic_tree /deep/ .el-tree-node__content {
padding-left: 0px !important;
.el-checkbox__inner{
left:4px;
}
}
.dic_tree /deep/ .el-tree-node {
position: relative;
padding-left: 16px;
}
.dic_tree /deep/ .el-tree-node__children {
padding-left: 8px;
}
.dic_tree /deep/ .el-tree-node :last-child:before {
height: 38px;
}
.dic_tree /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.dic_tree /deep/ .el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.dic_tree /deep/ .el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.dic_tree /deep/ .el-tree-node:before {
border-left: 1px dashed #bfbfbf;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.dic_tree /deep/ .el-tree-node:after {
border-top: 1px dashed #bfbfbf;
height: 20px;
top: 12px;
width: 36px;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.tree-container {
/* 树的parent，样式自定 */
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
.dic_tree /deep/ .el-icon-caret-right:before {
background: url("../../../assets/images/add.png");
content: "";
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree
/deep/
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("../../../assets/images/sub.png");
content: "";
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon{
padding:0px;
}
.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
opacity: 0;
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
// margin-left: -15px !important;
}
</style>
<style lang='scss'>
.info-form {
padding: 10px;
}
.inputWidth {
width: 130px;
}
.resource-container {
width: 100%;
height: 100%;
position: relative;
border: 0px solid black;
overflow: auto;
}
.monitor_monitor{
.el-card__body{
padding: 0;
border: none;
}
.el-aside{
.el-tree{
background: #f4f4f4;
font-size: 12px;
overflow-y:scroll;
height: 370px;
.el-tree-node__content{
width: 100%;
}
}
.el-card__body{
padding: 0;
}
.el-card {
height: 490px;
background: #f4f4f4;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: #f4f4f4 !important;
color: #fff !important;
.el-button--text{
color: #fff;
}
.custom-tree-node{
background-color:#35aff8 !important;
}
}
}
.monitor_monitor_left_top{
height: 50px; background: #e1edf4; padding-left:10px;
.monitor_monitor_left_topL{
height: 40px; padding-top:10px; float: left;
div{
height: 40px; float: left; padding: 0 10px 0 10px; line-height: 40px; cursor:pointer; font-size: 14px;
border: 1px solid transparent;
span{
color:#35aff8;
}
}
div.on{
background: #fff; border: 1px solid #c3c3c3 ; border-bottom: none;font-family:Microsoft YaHei;
font-weight:400;
}
}
.monitor_monitor_left_topR{
float: right;margin-top: 10px;
.el-input{
width: 109px;
}
}
}
.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: 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: start;
div {
width: 40px;
height: 40px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.vidoeSizeButton{
width: 100%; height: 25px; background: #4F789D; padding-top: 5px;
position: absolute;
bottom: 0;
.vidoeSizeButton_buttonList{
float: right;
.vidoeSizeButton_button{
height: 18px; width: 30px; background: #476C8D; color: #B3BFCB; line-height: 18px; text-align:center; float: left; margin-right: 2px; font-size: 12px;
}
.vidoeSizeButton_button.on{
color: #fff; background: #6186A7;
}
}
}
}
.videoBg{
background: url('~@/assets/images/videoImg.png');
background-size: 100% 100%;
}
</style>
src/pages/ol/demo/index.vue
View file @ 07f810e3
......@@ -120,7 +120,7 @@ export default {
return value.slice(0, 20) + '...'
}
return value
},
}
},
data() {
return {
......@@ -147,7 +147,7 @@ export default {
defaultProps: {
children: 'children',
label: 'name',
level1: 'level',
level1: 'level'
},
nodeKey: 'id',
station: {}, //当前选择的站点
......@@ -168,7 +168,7 @@ export default {
tierName: '',
resourceId: '',
sId: localStorage.getItem('stationId'),
subCode: '01',
subCode: '01'
},
currentNode: {},
dragAble: false,
......@@ -183,20 +183,20 @@ export default {
y: 0,
w: 0,
h: 0,
status: false,
status: false
},
vectorLayer: [],
lineVectorLayer: [],
resolutions: [],
code: '',
code: ''
}
},
components: {
QueryDetail,
NoQueryDetail,
NoQueryDetail
},
computed: {
...mapState('d2admin/bjCode', ['resourceCode']),
...mapState('d2admin/bjCode', ['resourceCode'])
},
mounted() {
this.code = this.resourceCode
......@@ -215,7 +215,7 @@ export default {
val.split('+')[0]
)
//}
},
}
},
created() {
that = this
......@@ -242,7 +242,7 @@ export default {
// 投影
code: 'xkcd-image',
units: 'pixels',
extent: extent,
extent: extent
})
if (mapList.length > 0) {
for (var i = 0; i < mapList.length; i++) {
......@@ -251,9 +251,9 @@ export default {
source: new ImageStatic({
url: mapList[i].readPath, //这里添加静态图片的地址
projection: projection,
imageExtent: extent,
imageExtent: extent
}),
visible: false,
visible: false
})
this.imgLayerList.push(layerItem)
......@@ -265,14 +265,14 @@ export default {
source: new ImageStatic({
url: mapList[i].readPath, //这里添加静态图片的地址
projection: projection,
imageExtent: extent,
}),
}),
imageExtent: extent
})
})
],
// layers:this.controlList,
collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
collapsed: false, //初始为展开方式
collapsed: false //初始为展开方式
})
this.controlList.push(controlItem)
......@@ -280,29 +280,10 @@ export default {
this.resolutions.push(resolutionItem)
}
}
// 实例化鹰眼控件（OverviewMap），自定义其样式
// let overviewMapControl = new overviewmap({
// className: 'ol-overviewmap myOverview', //鹰眼控件样式
// // 在鹰眼中加载相同坐标系下不同数据源的图层
// layers: [
// new ImageLayer({
// source: new ImageStatic({
// url: this.imgurl, //这里添加静态图片的地址
// projection: projection,
// imageExtent: extent
// })
// })
// ],
// // layers:this.controlList,
// collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
// label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
// collapsed: false //初始为展开方式
// })
let zoomControl = new Zoom({
delta: 0.2,
zoomInTipLabel: '',
zoomOutTipLabel: '',
zoomOutTipLabel: ''
})
// 大图
this.map = new Map({
......@@ -316,11 +297,8 @@ export default {
zoom: 2.5,
maxZoom: 5.0,
minZoom: 1.5,
// extent: [-1100, -200, 1500, 1000] //[minX, minY, maxX, maxY] 控制拖动
extent: [-1100, -100, 2000, 1000], //[minX, minY, maxX, maxY] 控制拖动
//   extent: extent//[minX, minY, maxX, maxY] 控制拖动
}),
extent: [-1100, -100, 2000, 1000] //[minX, minY, maxX, maxY] 控制拖动
})
})
// 删除默认的双击事件
const dblClickInteraction = this.map
......@@ -334,20 +312,6 @@ export default {
this.map.addControl(this.controlList[0])
//点击事件
// ------------图标
// var startMarker = new OlFeature({
// type: 'icon',
// geometry: new OlGeomPoint([80, 320])
// })
// var startMarker1 = new OlFeature({
// type: 'icon',
// geometry: new OlGeomPoint([80, 320])
// })
// console.log(this.list, '----------')
// console.log(startMarker, startMarker1, '1111')
// console.log(that.list,'1111111')
this.changeVectorLayer(this.list)
this.map.on('click', function(evt) {
......@@ -394,16 +358,6 @@ export default {
}
}
})
// this.map.on('pointermove', function(e) {
// console.log(that.map.dragging)
// if(e.dragging) {
// return
// }
// let pixel = that.map.getEventPixel(e.originalEvent);
// let hit = that.map.hasFeatureAtPixel(pixel);
// that.map.getTarget().style.cursor = hit ? 'pointer' : '';
// })
},
mapClick(feature, item, flag) {
//默认样式
......@@ -460,17 +414,17 @@ export default {
anchor: [0.5, 0.5],
scale: zoom || 0.4,
//rotation:0 旋转度
src: require('@/assets/images/' + src),
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black',
color: 'black'
}),
offsetY: 30, // 设置文字偏移量
}),
offsetY: 30 // 设置文字偏移量
})
})
return style
},
......@@ -492,23 +446,16 @@ export default {
this.clearLayer()
}
if (this.clearLayer()) return
// if (this.map) {
// this.map.removeLayer(this.vectorLayer)
// this.map.removeLayer(this.lineVectorLayer)
// } else {
// return
// }
this.lineVectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: [],
features: []
}),
style: new OlStyleStyle({
stroke: new Stroke({
color: '#409EFF',
width: 3,
}),
}),
width: 3
})
})
})
this.map.addLayer(this.lineVectorLayer)
......@@ -543,14 +490,6 @@ export default {
let LinefeaturesArr = []
for (let i in lineLastArr) {
// let bean = JSON.parse(JSON.stringify(lineLastArr[i]))
// LinefeaturesArr.push(this.getFeature(bean.xpoint, bean.ypoint))
// let style = this.getPointStyle(bean.imageSrc + '.png', bean.name)
// LinefeaturesArr[i].setStyle(style)
// bean.id = getUUID()
// bean.key = lineLastArr[i].id
// LinefeaturesArr[i].setId(bean.key + 'end')
// this.list.push(bean)
LinefeaturesArr.push(
this.getFeature(lineLastArr[i].xpoint, lineLastArr[i].ypoint)
)
......@@ -565,15 +504,15 @@ export default {
this.vectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: featuresArr.concat(LinefeaturesArr),
}),
features: featuresArr.concat(LinefeaturesArr)
})
})
this.map.addLayer(this.vectorLayer)
},
getFeature(x, y) {
return new OlFeature({
type: 'icon',
geometry: new OlGeomPoint([x, y]),
geometry: new OlGeomPoint([x, y])
})
},
sendMessage(lineId, stationId, code, type) {
......@@ -589,8 +528,8 @@ export default {
func: 'initPlatform',
data: {
lineId: lineId,
stationId: stationId,
},
stationId: stationId
}
},
this.src
)
......@@ -601,8 +540,8 @@ export default {
func: 'initHall',
data: {
lineId: lineId,
stationId: stationId,
},
stationId: stationId
}
},
this.src
)
......@@ -614,8 +553,8 @@ export default {
data: {
lineId: lineId,
stationId: stationId,
code: code,
},
code: code
}
},
this.src
)
......@@ -634,8 +573,8 @@ export default {
data: {
lineId: lineId,
stationId: stationId,
code: code,
},
code: code
}
},
this.src
)
......@@ -662,7 +601,7 @@ export default {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false,
closeOnClickModal: false
}).then(() => {
//左侧tree取消收藏按钮
// console.log(node)
......@@ -677,8 +616,8 @@ export default {
method: 'post',
data: {
resourceId: node.data.id,
stationId: this.checkedData.sId,
},
stationId: this.checkedData.sId
}
}).then((data) => {
if (data && data.code === 0) {
this.$message.success('取消收藏成功1111')
......@@ -707,18 +646,18 @@ export default {
dForm = {
resourceId: node.id,
byx1: '1',
stationId: this.checkedData.sId,
stationId: this.checkedData.sId
}
} else {
dForm = {
resourceId: node.id,
stationId: this.checkedData.sId,
stationId: this.checkedData.sId
}
}
this.$http({
url: this.$http.adornUrlEq('/liEnshrine/save'),
method: 'post',
data: dForm,
data: dForm
}).then((data) => {
if (data && data.code === 0) {
if (data.msg === '收藏成功') {
......@@ -732,60 +671,18 @@ export default {
pointListClick(item) {
//监视器列表点击
//关闭其他窗口
// this.closeNoQueryDetailVisible()
if (this.transformationSta === 1) {
if (
item.type === 'b6af764f2a6e454490a6b1b3c9057e57' ||
item.type === 'ece0b8b2db27411886254e81134988a3'
) {
// console.log('1')
this.queryDetail(item.id)
} else {
// console.log('2')
this.noQueryDetail(item.id)
}
// console.log('subCode', item.subCode, typeof (item.subCode))
// switch (item.subCode) {
// case '01' :
// //视频监控
// this.queryDetail01Visible = true
// this.$nextTick(() => {
// this.$refs.queryDetail01.init(item.id, this.checkedData.sId)
// })
// break
// case '02' :
// //出入口控制
// this.queryDetail02Visible = true
// this.$nextTick(() => {
// this.$refs.queryDetail02.init(item.id, this.checkedData.sId)
// })
// break
// case '03' :
// //入侵报警
// this.queryDetail03Visible = true
// this.$nextTick(() => {
// this.$refs.queryDetail03.init(item.id, this.checkedData.sId)
// })
// break
// case '04' :
// //安全检查
// this.queryDetail04Visible = true
// this.$nextTick(() => {
// this.$refs.queryDetail04.init(item.id, this.checkedData.sId)
// })
// break
// case '05' :
// //电子巡更
// this.queryDetail05Visible = true
// this.$nextTick(() => {
// this.$refs.queryDetail05.init(item.id, this.checkedData.sId)
// })
// break
// }
}
this.activeChooseResourceBox(item.id)
this.defaultExpandedKeys = [item.id]
// this.$refs.tree.setCurrentKey(item.id)
},
//初始化站点下的资源点
initTreeStationMap(save) {
......@@ -793,8 +690,8 @@ export default {
let url = ''
if (!save) {
// 摄像头列表接口路径
// url = this.$http.adornUrl('/liResource/getTreeList')
url = this.$http.adornUrlEq('/liResource/getStationMapCodeTreeList')
url = this.$http.adornUrl('/liResource/getTreeList')
// url = this.$http.adornUrlEq('/liResource/getStationMapCodeTreeList')
} else {
// 收藏夹接口路径
url = this.$http.adornUrlEq('/liEnshrine/getEnshrineStationMapTreeList')
......@@ -803,14 +700,13 @@ export default {
url: url,
method: 'post',
data: {
stationId: this.checkedData.sId,
name: this.searchInput,
},
// stationId: this.checkedData.sId,
name: this.searchInput
}
})
.then((data) => {
if (data && data.code === 0) {
this.treeData = data.nodes
// this.$refs.tree.updateKeyChildren(this.checkedData.sId, data.nodes)
if (this.treeData && this.treeData.length > 0) {
Vue.set(this.treeData[0], 'iconB', true)
}
......@@ -824,10 +720,6 @@ export default {
this.treeData.length > 0
) {
this.defaultExpandedKeys = [data.nodes[0].id]
//设置选中的节点
// console.log('默认选中节点', this.treeData[0].children[0])
// this.$refs.tree.setCurrentNode(this.treeData[0])
// console.log('this', this)
}
this.initStation(this.checkedData.sId)
})
......@@ -836,7 +728,7 @@ export default {
this.$http({
url: this.$http.adornUrl('/sysDictionary/getSubSystemDicList'),
method: 'get',
params: { stationId: this.checkedData.sId },
params: { stationId: this.checkedData.sId }
}).then((data) => {
if (data && data.code === 0) {
this.systemList = data.list
......@@ -847,7 +739,7 @@ export default {
this.$http({
url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
method: 'get',
params: { stationId: this.checkedData.sId },
params: { stationId: this.checkedData.sId }
}).then((data) => {
if (data && data.code === 0) {
this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
......@@ -895,11 +787,10 @@ export default {
this.changeVectorLayer(this.list)
},
initStation(id) {
console.log('22222222222222')
this.$http({
url: this.$http.adornUrl(`/liStation/getId/${id}`),
method: 'get',
params: this.$http.adornParams(),
params: this.$http.adornParams()
})
.then((data) => {
if (data && data.code === 0) {
......@@ -988,17 +879,17 @@ export default {
addBox(obj) {
this.boxVectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: [],
features: []
}),
style: new OlStyleStyle({
stroke: new Stroke({
color: '#409EFF',
width: 2,
width: 2
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)',
}),
}),
color: 'rgba(0, 0, 255, 0.1)'
})
})
})
this.map.addLayer(this.boxVectorLayer)
//创建矩形对象
......@@ -1006,32 +897,11 @@ export default {
let end = [obj.xlongit, obj.ylat]
let boxFeature = new OlFeature({
geometry: new Polygon([
[start, [start[0], end[1]], end, [end[0], start[1]], start],
]),
[start, [start[0], end[1]], end, [end[0], start[1]], start]
])
})
boxFeature.setId(obj.id + 'box')
this.boxVectorLayer.getSource().addFeature(boxFeature)
if (this.boxBean) {
let itemList = this.boxBean.children
if (itemList) {
for (let i in itemList) {
// this.setStyle(this.list[parseInt(i)])
}
}
//修改在防区内资源点样式
// if (this.boxBean.resourceIds) {
// let resourceList = this.boxBean.resourceIds.split(',')
// this.addList = resourceList
// for (let i in resourceList) {
// for (let j in this.list) {
// if (resourceList[i] === this.list[j].id) {
// this.setStyle(this.list[j])
// }
// }
// }
// }
}
},
//线路资源点树节点点击事件
handleNodeClick(node) {
......@@ -1046,12 +916,9 @@ export default {
y: 0,
w: 0,
h: 0,
status: false,
status: false
}
}
// if (this.activeName == 1) {
// this.isFlag(this.treeData, id)
// }
//每次选择节点都先清空资源位
console.log('选中节点的层级', node)
......@@ -1217,7 +1084,7 @@ export default {
xpoint: node.p_xpoint,
ypoint: node.p_ypoint,
xlongit: node.p_xlongit,
ylat: node.p_ylat,
ylat: node.p_ylat
}
this.map.removeLayer(this.boxVectorLayer)
this.addBox(pNode)
......@@ -1398,8 +1265,8 @@ export default {
})
}
}
},
},
}
}
}
</script>
<style lang="scss" scoped>
......
src/pages/sys/point/index.vue
View file @ 07f810e3
This source diff could not be displayed because it is too large. You can view the blob instead.
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