Skip to content

Z
zhxf_vue
Commit 6dc3fe88 authored by xiexingan's avatar xiexingan
Browse files
Options

Merge

parents 0c2ecc1c beaf5d45
Show whitespace changes
Inline Side-by-side
Showing with 20023 additions and 4961 deletions
package-lock.json 0 → 100644
View file @ 6dc3fe88
This source diff could not be displayed because it is too large. You can view the blob instead.
public/config.js
View file @ 6dc3fe88
......@@ -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 @ 0c2ecc1c
<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 @ 0c2ecc1c
<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 @ 0c2ecc1c
<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 @ 6dc3fe88
......@@ -280,25 +280,6 @@ 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: '',
......@@ -316,10 +297,7 @@ 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] 控制拖动
})
})
// 删除默认的双击事件
......@@ -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) {
//默认样式
......@@ -492,13 +446,6 @@ 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: []
......@@ -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)
)
......@@ -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,
// 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)
})
......@@ -895,7 +787,6 @@ export default {
this.changeVectorLayer(this.list)
},
initStation(id) {
console.log('22222222222222')
this.$http({
url: this.$http.adornUrl(`/liStation/getId/${id}`),
method: 'get',
......@@ -1011,27 +902,6 @@ export default {
})
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) {
......@@ -1049,9 +919,6 @@ export default {
status: false
}
}
// if (this.activeName == 1) {
// this.isFlag(this.treeData, id)
// }
//每次选择节点都先清空资源位
console.log('选中节点的层级', node)
......
src/pages/sys/point/index.vue
View file @ 6dc3fe88
......@@ -58,36 +58,36 @@
</template>
<script>
import AddOrUpdate from './add-or-update'
import QueryDetail from './query-detail'
import { getUUID } from '@/util'
import Vue from 'vue'
// openlayer
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Projection } from 'ol/proj'
import { getCenter } from 'ol/extent'
import Modify from 'ol/interaction/Modify'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import Zoom from 'ol/control/Zoom'
import { DoubleClickZoom } from 'ol/interaction'
import Draw from 'ol/interaction/Draw'
import LineString from 'ol/geom/LineString'
import AddOrUpdate from './add-or-update'
import QueryDetail from './query-detail'
import { getUUID } from '@/util'
import Vue from 'vue'
// openlayer
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Projection } from 'ol/proj'
import { getCenter } from 'ol/extent'
import Modify from 'ol/interaction/Modify'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import Zoom from 'ol/control/Zoom'
import { DoubleClickZoom } from 'ol/interaction'
import Draw from 'ol/interaction/Draw'
import LineString from 'ol/geom/LineString'
// 图上图标相关
import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
// 用来添加相关文字描述的
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'
let that
export default {
// 图上图标相关
import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
// 用来添加相关文字描述的
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'
let that
export default {
data() {
return {
featureItem: '',
......@@ -138,6 +138,7 @@
lineId: '',
lineName: '',
stationId: '',
roomId: '',
stationName: '',
subCode: '',
subSystem: '',
......@@ -208,7 +209,10 @@
this.map.removeInteraction(this.draw)
if (this.editable) {
this.iconStyle = e
if (this.iconStyle.name === '红外探测器' || this.iconStyle.name === '振动光纤') {
if (
this.iconStyle.name === '红外探测器' ||
this.iconStyle.name === '振动光纤'
) {
this.drawType = 'LineString'
} else {
this.drawType = 'Point'
......@@ -257,22 +261,24 @@
zoom: 2.5,
maxZoom: 5,
minZoom: 1.5,
extent: [-1100, -100, 2000, 1000]//[minX,minY,maxX,maxY] 控制拖动
extent: [-1100, -100, 2000, 1000] //[minX,minY,maxX,maxY] 控制拖动
})
})
// 删除默认的双击事件
const dblClickInteraction = this.map
.getInteractions()
.getArray()
.find(interaction => {
.find((interaction) => {
return interaction instanceof DoubleClickZoom
})
this.map.removeInteraction(dblClickInteraction)
this.changeVectorLayer(this.list)
this.map.on('click', function (evt) {
let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function (feature) {
this.map.on('click', function(evt) {
let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function(
feature
) {
return feature
})
console.log('***当前点击***', feature)
......@@ -290,9 +296,11 @@
} else {
//编辑状态下添加资源点事件（不包含红外探测器和振动光纤）
if (that.iconStyle === null || !that.editable) {
} else {
if (that.iconStyle.name === '红外探测器' || that.iconStyle.name === '振动光纤') {
if (
that.iconStyle.name === '红外探测器' ||
that.iconStyle.name === '振动光纤'
) {
return
}
let bean = that.addPoint(coordinate)
......@@ -301,7 +309,9 @@
that.iconStyle = null
that.lineList = []
let newFeature = that.vectorLayer.getSource().getFeatureById(bean.key)
let newFeature = that.vectorLayer
.getSource()
.getFeatureById(bean.key)
for (let i in that.list) {
//true弹出详情页面
that.mapClick(newFeature, that.list[i], false)
......@@ -326,7 +336,9 @@
//获取feature对象
let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
//获取红外探测器或者振动光纤第二个点的feature对象
let featureEnd = this.vectorLayer.getSource().getFeatureById(item.key + 'end')
let featureEnd = this.vectorLayer
.getSource()
.getFeatureById(item.key + 'end')
if (feature_) {
if (feature_ === feature || featureEnd === feature) {
//console.log(feature_)
......@@ -352,7 +364,9 @@
//获取新增的feature对象
let newFeature = this.vectorLayer.getSource().getFeatureById(item.key)
//获取红外探测器或者振动光纤第二个点的feature对象
let newFeatureEnd = this.vectorLayer.getSource().getFeatureById(item.key + 'end')
let newFeatureEnd = this.vectorLayer
.getSource()
.getFeatureById(item.key + 'end')
if (newFeature) {
if (newFeature === feature || newFeatureEnd === feature) {
newFeature.setStyle(style2)
......@@ -376,12 +390,19 @@
},
//添加点
addPoint(coordinate) {
let bean = this.getNewBox(this.iconStyle, parseFloat(coordinate[0]).toFixed(2), parseFloat(coordinate[1]).toFixed(2), this.iconStyle.value)
let bean = this.getNewBox(
this.iconStyle,
parseFloat(coordinate[0]).toFixed(2),
parseFloat(coordinate[1]).toFixed(2),
this.iconStyle.value
)
//新建一个要素ol.Feature
let newFeature = new OlFeature({
geometry: new OlGeomPoint(coordinate) //几何信息
})
newFeature.setStyle(this.getPointStyle(this.iconStyle.value + '.png', this.iconStyle.name)) //设置要素样式
newFeature.setStyle(
this.getPointStyle(this.iconStyle.value + '.png', this.iconStyle.name)
) //设置要素样式
newFeature.setId(bean.key)
this.vectorLayer.getSource().addFeature(newFeature)
//添加需要拖动的点
......@@ -435,7 +456,12 @@
let newFeature = new OlFeature({
geometry: new OlGeomPoint(coordinate) //几何信息
})
newFeature.setStyle(that.getPointStyle(that.iconStyle.value + '.png', that.iconStyle.name)) //设置要素样式
newFeature.setStyle(
that.getPointStyle(
that.iconStyle.value + '.png',
that.iconStyle.name
)
) //设置要素样式
newFeature.setId(bean.key + 'end')
//添加结束的点
that.vectorLayer.getSource().addFeature(newFeature)
......@@ -453,7 +479,11 @@
for (let i in that.list) {
//true弹出详情页面
that.mapClick(that.vectorLayer.getSource().getFeatureById(bean.key), that.list[i], false)
that.mapClick(
that.vectorLayer.getSource().getFeatureById(bean.key),
that.list[i],
false
)
}
that.updateHandle()
})
......@@ -545,7 +575,10 @@
for (let i in list) {
if (list[i].imageSrc) {
//振动光纤和红外线对射
if (list[i].type === 'e670524ecb9e4a03b8ddbc7d91a63b1b' || list[i].type === '4f69755dbc0c45e49c142857286c5669') {
if (
list[i].type === 'e670524ecb9e4a03b8ddbc7d91a63b1b' ||
list[i].type === '4f69755dbc0c45e49c142857286c5669'
) {
let lineFeatures = []
lineFeatures.push([list[i].xlongit, list[i].ylat])
lineFeatures.push([list[i].xpoint, list[i].ypoint])
......@@ -555,7 +588,10 @@
lineLastArr.push(list[i])
}
featuresArr.push(this.getFeature(list[i].xlongit, list[i].ylat))
let style = this.getPointStyle(list[i].imageSrc + '.png', this.list[i].name)
let style = this.getPointStyle(
list[i].imageSrc + '.png',
this.list[i].name
)
featuresArr[i].setStyle(style)
featuresArr[i].setId(list[i].id)
} else {
......@@ -564,8 +600,13 @@
}
let LinefeaturesArr = []
for (let i in lineLastArr) {
LinefeaturesArr.push(this.getFeature(lineLastArr[i].xpoint, lineLastArr[i].ypoint))
let style = this.getPointStyle(lineLastArr[i].imageSrc + '.png', lineLastArr[i].name)
LinefeaturesArr.push(
this.getFeature(lineLastArr[i].xpoint, lineLastArr[i].ypoint)
)
let style = this.getPointStyle(
lineLastArr[i].imageSrc + '.png',
lineLastArr[i].name
)
LinefeaturesArr[i].setStyle(style)
lineLastArr[i].key = lineLastArr[i].id
LinefeaturesArr[i].setId(lineLastArr[i].key + 'end')
......@@ -579,7 +620,10 @@
})
this.map.addLayer(this.vectorLayer)
//将点和线的Feature对象 ，放在一个数组里面
let modifyFeatures = this.lineVectorLayer.getSource().getFeatures().concat(this.vectorLayer.getSource().getFeatures())
let modifyFeatures = this.lineVectorLayer
.getSource()
.getFeatures()
.concat(this.vectorLayer.getSource().getFeatures())
// this.modify = new Modify({
// source: this.vectorLayer.getSource()
// })
......@@ -588,13 +632,15 @@
features: modifyFeatures
})
})
this.modify.on('modifyend', e => {
this.modify.on('modifyend', (e) => {
let pixel = this.map.getEventPixel(e.mapBrowserEvent.originalEvent)
//获取当前拖拽的feature对象，该feature没有id，
let feature = e.mapBrowserEvent.map.forEachFeatureAtPixel(pixel,
let feature = e.mapBrowserEvent.map.forEachFeatureAtPixel(
pixel,
function(feature) {
return feature
})
}
)
if (feature) {
that.cancelDisabled = false
......@@ -603,15 +649,25 @@
//根据id获取feature对象
//let feature_ = that.vectorLayer.getSource().getFeatureById(that.list[i].id)
//新增的feature对象没保存，是没有id通过，key获取feature对象
let featureKey = that.vectorLayer.getSource().getFeatureById(that.list[i].key)
let featureKey = that.vectorLayer
.getSource()
.getFeatureById(that.list[i].key)
//红外探测器和振动光纤的第二点同过key+'end'获取feature对象
let featureEnd = that.vectorLayer.getSource().getFeatureById(that.list[i].key + 'end')
let featureEnd = that.vectorLayer
.getSource()
.getFeatureById(that.list[i].key + 'end')
if (featureKey || featureEnd) {
//获取坐标
let coordinate
//if (feature_) coordinate = feature_.getGeometry().flatCoordinates
if (featureKey) coordinate = featureKey.getGeometry().flatCoordinates
if (featureKey && coordinate.toString() === feature.getGeometry().flatCoordinates.toString()) {
if (featureKey) {
coordinate = featureKey.getGeometry().flatCoordinates
}
if (
featureKey &&
coordinate.toString() ===
feature.getGeometry().flatCoordinates.toString()
) {
that.list[i].xlongit = parseFloat(coordinate[0]).toFixed(2)
that.list[i].ylat = parseFloat(coordinate[1]).toFixed(2)
that.listItem = JSON.parse(JSON.stringify(that.list[i]))
......@@ -619,18 +675,31 @@
// that.listItem.xlongit = parseFloat(coordinate[0]).toFixed(2)
// that.listItem.ylat = parseFloat(coordinate[1]).toFixed(2)
// }
let style = that.getPointStyle(that.list[i].imageSrc + '2.png', that.list[i].name, '0.3')
let style = that.getPointStyle(
that.list[i].imageSrc + '2.png',
that.list[i].name,
'0.3'
)
featureKey.setStyle(style)
//break
} else {
if (featureKey) {
let style = that.getPointStyle(that.list[i].imageSrc + '.png', that.list[i].name)
let style = that.getPointStyle(
that.list[i].imageSrc + '.png',
that.list[i].name
)
featureKey.setStyle(style)
}
}
if (featureEnd) coordinate = featureEnd.getGeometry().flatCoordinates
if (featureEnd && coordinate.toString() === feature.getGeometry().flatCoordinates.toString()) {
if (featureEnd) {
coordinate = featureEnd.getGeometry().flatCoordinates
}
if (
featureEnd &&
coordinate.toString() ===
feature.getGeometry().flatCoordinates.toString()
) {
that.list[i].xpoint = parseFloat(coordinate[0]).toFixed(2)
that.list[i].ypoint = parseFloat(coordinate[1]).toFixed(2)
that.listItem = JSON.parse(JSON.stringify(that.list[i]))
......@@ -638,12 +707,19 @@
// that.listItem.xpoint = parseFloat(coordinate[0]).toFixed(2)
// that.listItem.ypoint = parseFloat(coordinate[1]).toFixed(2)
// }
let style = that.getPointStyle(that.list[i].imageSrc + '2.png', that.list[i].name, '0.3')
let style = that.getPointStyle(
that.list[i].imageSrc + '2.png',
that.list[i].name,
'0.3'
)
featureEnd.setStyle(style)
//break
} else {
if (featureEnd) {
let style = that.getPointStyle(that.list[i].imageSrc + '.png', that.list[i].name)
let style = that.getPointStyle(
that.list[i].imageSrc + '.png',
that.list[i].name
)
featureEnd.setStyle(style)
}
}
......@@ -687,7 +763,11 @@
},
//新建资源点对象
getNewBox(item, j, w, src) {
let uuid = getUUID().replace('-', '').replace('-', '').replace('-', '').replace('-', '')
let uuid = getUUID()
.replace('-', '')
.replace('-', '')
.replace('-', '')
.replace('-', '')
return {
id: uuid,
key: uuid,
......@@ -700,6 +780,7 @@
lineName: this.checkedData.lineName,
stationId: this.checkedData.stationId,
stationName: this.checkedData.stationName,
roomId: this.checkedData.roomId,
subCode: this.checkedData.subCode,
subSystem: this.checkedData.subSystem,
tierId: this.checkedData.tierId,
......@@ -731,19 +812,26 @@
url: this.$http.adornUrl('/liResource/getTreeList'),
method: 'post',
data: {
stationId: this.checkedData.sId,
// stationId: this.checkedData.sId,
name: this.searchInput
}
}).then(data => {
}).then((data) => {
if (data && data.code === 0) {
this.treeData = data.tree
this.treeData = data.nodes
this.defaultExpandedKeys = []
this.$nextTick(() => {
if (!this.treeData || this.treeData.length <= 0 || !this.treeData[0].children || this.treeData[0].children.length <= 0) {
if (
!this.treeData ||
this.treeData.length <= 0 ||
!this.treeData[0].children ||
this.treeData[0].children.length <= 0
) {
return
}
if (!this.tierMap) {
this.currentNode = this.$refs.tree.getNode(this.treeData[0].children[0].id).data
this.currentNode = this.$refs.tree.getNode(
this.treeData[0].children[0].id
).data
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
Vue.set(this.treeData[0].children[0], 'iconB', true)
......@@ -751,26 +839,42 @@
this.isFlag(this.treeData, this.currentNode.id)
this.initStation(this.treeData[0].id, null, 1)
} else {
//层级
//区域
if (this.tierMap.level === 4) {
this.currentNode = this.$refs.tree.getNode(this.tierMap.id).data
this.initStation(this.tierMap.stationId, null, this.tierMap.id)
}
//场景
if (this.tierMap.level === 5) {
this.currentNode = this.$refs.tree.getNode(this.tierMap.id).data
this.initStation(this.tierMap.stationId, this.tierMap.children, this.tierMap.id)
this.initStation(this.tierMap.stationId, null, this.tierMap.id)
}
//子系统
if (this.tierMap.level === 6) {
this.currentNode = this.$refs.tree.getNode(this.tierMap.id).data
this.initStation(
this.tierMap.stationId,
this.tierMap.children,
this.tierMap.id
)
}
//资源点
if (this.tierMap.level === 7) {
this.currentNode = this.$refs.tree.getNode(this.tierMap.id).data
let sysId = ''
this.systemList.forEach(element => {
this.systemList.forEach((element) => {
if (this.tierMap.subCode === element.value) {
sysId = element.id
}
})
let res = this.$refs.tree.getNode(this.tierMap.tierId + sysId).data
this.initStation(this.tierMap.stationId, res.children, this.tierMap.tierId + sysId)
let res = this.$refs.tree.getNode(this.tierMap.tierId + sysId)
.data
this.initStation(
this.tierMap.stationId,
res.children,
this.tierMap.tierId + sysId
)
}
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
......@@ -782,32 +886,6 @@
}
})
},
//初始化站点下的资源点
// initTreeStationMap (node, flag) {
// this.$http({
// url: this.$http.adornUrl('/liResource/getStationMapTreeList'),
// method: 'post',
// data: {
// stationId: node.id
// }
// })
// .then(data => {
// // console.log('初始化线路树：', data.nodes)
// if (data && data.code === 0) {
// this.$refs.tree.updateKeyChildren(node.id, data.nodes)
// }
// })
// .then(() => {
// if (this.checkedData.sId && flag) {
// this.defaultExpandedKeys = [this.treeData[0].children[0].id]
// //设置选中的节点
// // console.log('默认选中节点', this.treeData[0].children[0])
// this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
// // console.log('this', this)
// }
// this.initStation(node.id, null, 1)
// })
// },
initTreeResource(node) {
let data = {
lineId: this.checkedData.lineId,
......@@ -820,7 +898,7 @@
url: this.$http.adornUrl('/liResource/getResourceTreeList'),
method: 'post',
data: data
}).then(data => {
}).then((data) => {
// console.log('初始化线路树：', data.nodes)
if (data && data.code === 0) {
this.$refs.tree.updateKeyChildren(node.id, data.nodes)
......@@ -834,12 +912,12 @@
method: 'get',
params: this.$http.adornParams()
})
.then(data => {
.then((data) => {
if (data && data.code === 0) {
if (data.bean) {
this.station = data.bean
this.mapList = data.bean.mapList
this.mapList.forEach(element => {
this.mapList.forEach((element) => {
element.readPath = this.urlPath + element.filePath
})
this.checkedData.lineId = this.station.lineId
......@@ -852,7 +930,7 @@
// this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
// this.defaultExpandedKeys = [this.checkedData.tierId]
if (res) {
this.mapList.forEach(e => {
this.mapList.forEach((e) => {
if (res.tierId === e.id) {
this.checkedData.tierId = e.id
this.checkedData.tierName = e.name
......@@ -885,7 +963,7 @@
},
isFlag(data, id) {
data.forEach(res => {
data.forEach((res) => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
......@@ -943,7 +1021,7 @@
// }
// })
//每次选择节点都先清空资源位
if (level !== 6) {
if (level !== 7) {
// this.list = []
this.listItem = '' //控制编辑按钮
}
......@@ -958,7 +1036,7 @@
// this.initTreeStationMap(node)
} else if (level === 4) {
this.tierMap = node
//层级
//区域
this.checkedData.tierId = id
this.checkedData.tierName = name
this.checkedData.stationId = node.stationId
......@@ -968,14 +1046,32 @@
this.changeVectorLayer(this.list)
this.changeImgControl(id)
} else if (level === 5) {
this.tierMap = node
//场景
this.checkedData.roomId = node.roomId
this.checkedData.tierId = node.tierId
this.checkedData.stationId = node.stationId
this.mapList.forEach((element) => {
if (element.id === node.tierId) {
this.stationMap = element
return false
}
})
// console.log('选中节点的层级id', this.tierId)
this.showResourceByMapId(null)
this.changeVectorLayer(this.list)
this.changeImgControl(id)
} else if (level === 6) {
this.tierMap = node
//子系统
this.checkedData.subCode = code
this.checkedData.subSystem = name
this.checkedData.stationId = node.stationId
this.checkedData.tierId = node.tierId
this.checkedData.roomId = node.roomId
this.mapList.forEach(element => {
this.mapList.forEach((element) => {
if (element.id === node.tierId) {
this.stationMap = element
return false
......@@ -986,15 +1082,15 @@
this.list = JSON.parse(JSON.stringify(node.children))
// console.log('资源点列表：', this.list)
this.list.forEach(res => {
this.list.forEach((res) => {
Vue.set(res, 'active', false)
})
this.changeVectorLayer(this.list)
this.changeImgControl(node.tierId)
} else if (level === 6) {
} else if (level === 7) {
this.tierMap = node
var sysId = ''
this.systemList.forEach(element => {
this.systemList.forEach((element) => {
if (node.subCode === element.value) {
sysId = element.id
}
......@@ -1003,7 +1099,7 @@
let subNode = this.$refs.tree.getNode(node.tierId + sysId).data
// console.log('当前要选中的层级节点', subNode)
this.list = []
subNode.children.forEach(res => {
subNode.children.forEach((res) => {
this.list.push(res)
})
......@@ -1024,7 +1120,7 @@
}
}
this.iconNameListBottom.forEach(res => {
this.iconNameListBottom.forEach((res) => {
if (this.clickItem && res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
......@@ -1064,7 +1160,7 @@
this.checkedData.stationId = stationNode.id
this.checkedData.stationName = stationNode.name
this.stationMap = map
this.iconNameListBottom.forEach(res => {
this.iconNameListBottom.forEach((res) => {
if (res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
......@@ -1088,15 +1184,17 @@
let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
// console.log('当前要选中的层级节点', tierNode.children)
this.list = []
tierNode.children.forEach(subSystem => {
subSystem.children.forEach(res => {
tierNode.children.forEach((room) => {
room.children.forEach((subSystem) => {
subSystem.children.forEach((res) => {
if (item === null || (item != null && item.id === res.type)) {
this.list.push(res)
}
})
})
})
this.list.forEach(res => {
this.list.forEach((res) => {
Vue.set(res, 'active', false)
})
// console.log(this.list, '++++++')
......@@ -1106,13 +1204,13 @@
let node = this.$refs.tree.getNode(id).data
this.list = []
if (node.level === 4) {
node.children.forEach(subSystem => {
subSystem.children.forEach(res => {
node.children.forEach((subSystem) => {
subSystem.children.forEach((res) => {
this.list.push(res)
})
})
} else {
node.children.forEach(e => {
node.children.forEach((e) => {
this.list.push(e)
})
}
......@@ -1123,7 +1221,9 @@
refreshdatalist(res) {
let style = this.getPointStyle(res.imageSrc + '2.png', res.name, '0.3')
let newItem = this.vectorLayer.getSource().getFeatureById(res.key)
let newItemEnd = this.vectorLayer.getSource().getFeatureById(res.key + 'end')
let newItemEnd = this.vectorLayer
.getSource()
.getFeatureById(res.key + 'end')
if (newItem) newItem.setStyle(style)
if (newItemEnd) newItemEnd.setStyle(style)
for (let i in this.list) {
......@@ -1143,7 +1243,7 @@
name: this.searchInput
}
})
.then(data => {
.then((data) => {
if (data && data.code === 0) {
this.treeData = data.tree
// if (!this.checkedData.sId) {
......@@ -1176,19 +1276,25 @@
//console.log(res, '++++++++++')
var sysId = ''
this.systemList.forEach(element => {
this.systemList.forEach((element) => {
if (res.subCode === element.value) {
sysId = element.id
}
})
var subId = ''
this.treeData.forEach(e => {
this.treeData.forEach((e) => {
if (res.stationId === e.id) {
e.children.forEach(el => {
//站
e.children.forEach((el) => {
if (el.id === res.tierId) {
el.children.forEach(element => {
//区
el.children.forEach((elt) => {
if (elt.id === res.roomId) {
//场景
elt.forEach((element) => {
if (element.id === res.tierId + sysId) {
//子系统
subId = element.id
Vue.set(element, 'iconB', true)
this.$refs.tree.setCurrentNode(element)
......@@ -1200,6 +1306,8 @@
})
}
})
}
})
//console.log('subId', subId)
this.initStation(res.stationId, res, subId)
this.$nextTick(() => {
......@@ -1234,7 +1342,7 @@
let flag = true
//判断是否有无id的新增资源点
this.list.forEach(res => {
this.list.forEach((res) => {
if (res.addOrUpdate === 'save') {
flag = false
return false
......@@ -1247,7 +1355,7 @@
url: this.$http.adornUrl(`/liResource/updateList`),
method: 'post',
data: paramList
}).then(data => {
}).then((data) => {
// console.log(data)
if (data.message) {
this.addNotify(data.message)
......@@ -1276,19 +1384,24 @@
})
this.submitlDisabled = false
} else {
this.$confirm(`未填写信息的新增资源点将被忽略，是否继续?`, '保存资源点', {
this.$confirm(
`未填写信息的新增资源点将被忽略，是否继续?`,
'保存资源点',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
}
)
.then(() => {
// console.log('当前页面资源点位置：', this.list)
this.$http({
url: this.$http.adornUrl(`/liResource/updateList`),
method: 'post',
data: paramList
}).then(data => {
})
.then((data) => {
// console.log(data)
if (data && data.code === 0) {
if (data.message) {
......@@ -1356,12 +1469,6 @@
addOrUpdateHandle(item) {
this.resource = null
this.addOrUpdateVisible = true
// this.list.forEach(res => {
// if (res.id === id) {
// this.resource = res
// console.log(this.resource)
// }
// })
this.$nextTick(() => {
this.$refs.addOrUpdate.init(item)
})
......@@ -1369,7 +1476,7 @@
// 移动资源位坐标
changeResourceLocation(id, x, y) {
// console.log('changeResourceLocation:', id, x, y)
this.list.forEach(res => {
this.list.forEach((res) => {
if (res.id === id) {
// console.log('移动坐标1：', res.name, res.xpoint, res.ypoint)
res.xpoint = x
......@@ -1394,14 +1501,6 @@
},
// 删除
deleteHandle() {
// console.log('dataListSelections:', this.dataListSelections)
// var ids = this.checkedData.resourceId
// ? [this.checkedData.resourceId]
// : this.dataListSelections.map(item => {
// return item.id
// })
// this.listItem.id
// var ids = [this.checkedData.resourceId]
let ids = []
if (this.listItem.id) {
ids.push(this.listItem.id)
......@@ -1420,7 +1519,7 @@
stationId: localStorage.getItem('stationId'),
id: ids[i]
})
}).then(data => {
}).then((data) => {
if (data && data.code === 0) {
//删除绘制的图标和线
this.delPoint(ids[i])
......@@ -1439,49 +1538,6 @@
}
}
}
// this.$confirm(`确认删除资源点?`, '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning',
// closeOnClickModal: false
// })
// .then(() => {
// if (ids.length > 0) {
// this.$http({
// url: this.$http.adornUrl('/liResource/delete'),
// method: 'post',
// data: this.$http.adornData(ids, false)
// }).then(data => {
// if (data && data.code === 0) {
// for (let i in ids) {
// //删除绘制的图标和线
// this.delPoint(ids[i])
// }
// this.$message({
// message: '操作成功',
// type: 'success',
// duration: 1500,
// onClose: () => {
// this.initTree()
// this.checkedData.resourceId = ''
// this.delflag = true
// this.listItem = ''
// }
// })
// } else {
// console.log(data)
// // this.$message.error(data.msg)
// }
// })
// } else {
// ids.push(this.listItem.key)
// for (let i in ids) {
// //删除绘制的图标和线
// this.delPoint(ids[i])
// }
// }
// })
// .catch(() => {})
},
//删除绘制的图标和线
delPoint(id) {
......@@ -1492,7 +1548,9 @@
if (featureEnd) {
//删除红外探测器或者振动光纤id对应的资源点
this.vectorLayer.getSource().removeFeature(featureEnd)
let lineFeature = this.lineVectorLayer.getSource().getFeatureById(id + 'line')
let lineFeature = this.lineVectorLayer
.getSource()
.getFeatureById(id + 'line')
if (lineFeature) {
//删除id对应的连线
this.lineVectorLayer.getSource().removeFeature(lineFeature)
......@@ -1500,11 +1558,7 @@
}
},
clickAdd() {
// var box = document.getElementById('drag')
// let box = this.$refs.drag
// console.log(box)
this.list.push(this.getNewBox())
// console.log('this.list:', this.list)
},
changeEditable() {
this.$nextTick(() => {
......@@ -1529,7 +1583,7 @@
}
item.value = item.value + '2'
this.typeList.forEach(res => {
this.typeList.forEach((res) => {
if (item.id !== res.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
......@@ -1553,19 +1607,8 @@
if (e.srcElement.id === '') {
return
}
// if (e.path) {
// if (
// e.path[0].attributes.name &&
// e.path[0].attributes.name.nodeValue != 'iconListNow'
// ) {
// return
// }
// } else {
// }
this.typeList.forEach(res => {
// if ((e.path && e.path[0].id !== res.id) || e.srcElement.id !== res.id) {
this.typeList.forEach((res) => {
if (e.srcElement.id !== res.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
......@@ -1598,35 +1641,14 @@
regionMouseup(e) {
if (e) {
let iconname = e.path[0].className
//let imgsrc=iconname.substring(iconname.lastIndexOf("-")+1);
// console.log(imgsrc)
// this.imageSrc=imgsrc+'.png'
}
// if(this.jing){
// let jw={xlongit:this.jing,ylat:this.wei}
// console.log(jw)
// }
this.mousemoveStatus = false
this.typeList.forEach(res => {
this.typeList.forEach((res) => {
if (res.value.substring(res.value.length - 1, res.value.length) == 2) {
res.value = res.value.substring(0, res.value.length - 1)
}
})
//console.log(this.spanDragListNow)
// if (e.clientX > 330 && e.clientY > 260) {
// this.list.push(
// this.getNewBox(
// this.spanDragListNow,
// this.spanDragData.x - 330,
// this.spanDragData.y - 180,
// this.jing.toString(),
// this.wei.toString(),
// this.imageSrc
// )
// )
// //console.log(this.list,'抬起')
// }
this.spanDragData.x = 0
this.spanDragData.y = 0
this.spanDragData.show = false
......@@ -1634,7 +1656,7 @@
},
iconClick(item) {
console.log(this.currentNode)
this.iconNameListBottom.forEach(res => {
this.iconNameListBottom.forEach((res) => {
if (res.id === item.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) != 4
......@@ -1651,13 +1673,13 @@
})
if (this.currentNode.level == 5) {
this.list = []
this.currentNode.children.forEach(el => {
this.currentNode.children.forEach((el) => {
if (item.id === el.type) {
this.list.push(el)
}
})
this.list.forEach(res => {
this.list.forEach((res) => {
Vue.set(res, 'active', false)
})
} else {
......@@ -1673,7 +1695,7 @@
params: this.$http.adornParams({
stationId: localStorage.getItem('stationId')
})
}).then(data => {
}).then((data) => {
if (data && data.code === 0) {
this.systemList = data.list
}
......@@ -1686,11 +1708,11 @@
params: this.$http.adornParams({
stationId: localStorage.getItem('stationId')
})
}).then(data => {
}).then((data) => {
if (data && data.code === 0) {
this.typeList = JSON.parse(JSON.stringify(data.list))
this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
this.iconNameListBottom.forEach(res => {
this.iconNameListBottom.forEach((res) => {
res.value += '3'
})
}
......@@ -1701,116 +1723,114 @@
//console.log(e.width)
}
}
}
}
</script>
<style lang='scss' scoped>
.dic_tree {
<style lang="scss" scoped>
.dic_tree {
background: #f4f4f4;
font-size: 14px;
transform: translateX(-6px);
margin-top: 20px;
}
.dic_tree /deep/ .el-tree-node__content {
}
.dic_tree /deep/ .el-tree-node__content {
padding-left: 0px !important;
}
}
.dic_tree /deep/ .el-tree-node {
.dic_tree /deep/ .el-tree-node {
position: relative;
padding-left: 16px;
}
}
.dic_tree /deep/ .el-tree-node__children {
.dic_tree /deep/ .el-tree-node__children {
padding-left: 10px;
}
}
.dic_tree /deep/ .el-tree-node :last-child:before {
.dic_tree /deep/ .el-tree-node :last-child:before {
height: 38px;
}
}
.dic_tree /deep/ .el-tree > .el-tree-node:before {
.dic_tree /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
}
.dic_tree /deep/ .el-tree-node:before {
content: "";
.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: "";
.dic_tree /deep/ .el-tree-node:after {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
}
.dic_tree /deep/ .el-tree-node:before {
.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 {
.dic_tree /deep/ .el-tree-node:after {
border-top: 1px dashed #bfbfbf;
height: 20px;
top: 12px;
width: 35px;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
}
.tree-container {
.tree-container {
/* 树的parent，样式自定 */
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
}
.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");
}
.dic_tree /deep/ .el-icon-caret-right:before {
background: url('../../../assets/images/add.png');
content: "";
content: '';
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree
}
.dic_tree
/deep/
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("../../../assets/images/sub.png");
content: "";
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:1px;
}
.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
}
.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon {
padding: 1px;
}
.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 {
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
// margin-left: -15px !important;
}
}
</style>
<style lang='scss'>
.line_warp {
<style lang="scss">
.line_warp {
// width: 300px;
height: 45px;
display: flex;
......@@ -1826,37 +1846,37 @@
height: 50px;
transform: translateX(-14px);
}
}
.el-tree--highlight-current
}
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content
.custom-tree-node {
background-color: #33b0f6 !important;
color: aliceblue;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: transparent;
}
}
</style>
<style lang='scss' scoped>
#map {
/deep/.ol-zoom{
<style lang="scss" scoped>
#map {
/deep/.ol-zoom {
// display: none;
}
/deep/ .ol-zoom .ol-unselectable .ol-control{
/deep/ .ol-zoom .ol-unselectable .ol-control {
display: none;
}
}
}
.treeCard {
.treeCard {
.el-tree {
overflow-y: scroll;
height: 640px;
}
}
}
.tree_house {
.tree_house {
width: 12px;
height: 18px;
display: inline-block;
......@@ -1867,8 +1887,8 @@
// transform: translateY(-8px);
transform: translateX(-40px);
}
}
.tree_point {
}
.tree_point {
width: 12px;
height: 18px;
display: inline-block;
......@@ -1878,8 +1898,8 @@
vertical-align: middle;
transform: translateY(-2px);
}
}
.resource-container {
}
.resource-container {
width: 100%;
height: 100%;
position: relative;
......@@ -1906,15 +1926,15 @@
height: 40px;
width: 40px;
}
}
}
.tier-btn {
.tier-btn {
.active-tier {
background-color: #409eff;
color: #ffffff;
}
}
.monitor_point_left_top {
}
.monitor_point_left_top {
height: 42px;
background: #e1edf4;
padding-left: 16px;
......@@ -1958,9 +1978,9 @@
font-weight: bold;
}
}
}
}
.top_button {
.top_button {
background: url(~@/assets/images/sysiconbg.png);
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment