Skip to content

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

删除页面

parent 74f59da1
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 1597 deletions
src/pages/ol/demo/index1.vue deleted 100644 → 0
View file @ 74f59da1
<template lang="pug">
<div class="ol_point">
<el-container style='padding-left:0px;'>
<el-aside width='333px' style='height:825px;'>
<el-card class = "tree-container">
<div class="ol_point_left_top">
<div class="ol_point_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="ol_point_left_topR">
<el-input suffix-icon="el-icon-search" size="small" v-model="searchInput" clearable></el-input>
</div>
</div>
<el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :props="defaultProps" :filter-node-method="filterNode" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' >
<span class="custom-tree-node" style='width:100%;line-height: 18px;' slot-scope="{ node, data }">
<span v-if="node.data.level == 3" class="el-icon-zhandian xa-icon"></span>
<span v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon"></span>
<span v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon"></span>
<span v-if="node.data.level == 5 && node.data.name == '视频监控'" class="el-icon-shipin xa-icon"></span>
<span v-if="node.data.level == 5 && node.data.name == '出入口控制'" class="el-icon-churukoukongzhi xa-icon"></span>
<span v-if="node.data.level == 5 && node.data.name == '入侵报警'" class="el-icon-ruqinbaojing xa-icon"></span>
<span v-if="node.data.level == 5 && node.data.name == '安全检查'" class="el-icon-anquanjiancha xa-icon"></span>
<span v-if="node.data.level == 6 && node.data.isDefence" class="el-icon-fangqukuang7 xa-icon"></span>
<span v-if="node.data.level == 6 && !node.data.isDefence" :class="node.data.icon+'7'" class='xa-icon'></span>
<span v-if="node.data.level == 7 " :class="node.data.icon+'7'" class='xa-icon'></span>
<span style="position: relative;">&nbsp;{{node.label}}<span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></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>
<!-- <span class="el-icon-shousuo"></span> -->
</el-card>
</el-aside>
<el-main style="padding:0px;height:825px;">
<el-card>
<div class="ol_point_right_button">
<el-row :span="24" style='padding-top:5px;'>
<el-col :md='16' :sm="5" class='tier-btn'>
<el-button type="primary" size="small" plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin-left:10px;" v-for="item in mapList" :key='item.id' @click="changeMap(item)">{{item.name}}</el-button>
</el-col>
<el-col :md='8' :sm="5">
<div style="float:right;">
<div :class="item.value" style="margin:5px 5px 0 0;" :title="item.name" v-for="item in iconNameListBottom" @click="iconClick(item)"></div>
</div>
</el-col>
</el-row>
</div>
<div class="ol_point_right_button_r">
<div :class="[transformationSta == 1?'on':'']" @click="transformation(1)">2D</div>
<div :class="[transformationSta == 2?'on':'']" @click="transformation(2)">3D</div>
</div>
<div v-if="transformationSta==1">
<el-row style="padding-bottom:15px;height:780px;background:#fff;box-shadow: inset 2px 0px 8px 0px rgba(0, 0,0, 0.2)" :span="24">
<el-col class="resource-container" :style="obj" ref="drag">
<img :src="stationMap?stationMap.readPath:''" width="99%" style="position: relative;left:7px;padding-top:10px" />
<span v-for="item in list">
<span class="span-box" :class="[item.active?item.icon+'6':item.icon+'5']" :id='item.id' :title="item.name" :dataKey="item.key" :key="item.key" :style="{'left':item.xpoint?item.xpoint+'px':0,'top':item.ypoint?item.ypoint+'px':0,cursor:'pointer','z-index':'11'}" @click="pointListClick(item)"></span>
</span>
</el-col>
<span class='regionDiv' :style="{'left':regionMouse.x+'px','top':regionMouse.y+'px','width':regionMouse.w+'px','height':regionMouse.h+'px','position':'absolute'}"></span>
</el-row>
</div>
<div class="map_right" v-if="transformationSta==2">
<div>
<iframe :src="src" ref="iframe"></iframe>
</div>
</div>
</el-card>
</el-main>
<query-detail v-if='queryDetailVisible' ref='queryDetail' @closeQ="closeQueryDetailVisible"></query-detail>
<query-detail v-if='noQueryDetailVisible' ref='noQueryDetail' @closeQ="closeNoQueryDetailVisible"></query-detail>
</el-container>
</div>
</template>
<script>
import QueryDetail from './query-detail'
import NoQueryDetail from './no-query-detail'
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 {
transformationSta: 1,
isCollapse: true,
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
queryDetailVisible: false,
treeData: [],
listArr: [],
defaultExpandedKeys: [],
iconNameListBottom: [],
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',
searchInput: '',
src: 'http://10.20.2.98:8066/',
regionMouse: {
x: 0,
y: 0,
w: 0,
h: 0,
status: false
}
}
},
components: {
QueryDetail,
NoQueryDetail
},
watch: {
searchInput (val) {
this.$refs.tree.filter(val)
}
},
created() {
that = this
},
mounted() {
this.initTreeStationMap()
this.initResourceTypeDicList()
},
methods: {
sendMessage() {
setTimeout(() => {
this.$refs.iframe.contentWindow.postMessage({
func: 'locateToStation',
stationsn: '01',
longitude: '1',
latitude: '1'
}, this.src)
}, 3000)
},
// 树节点过滤
filterNode (value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
handleClick(tab) {
//左侧tab切换
if (tab) {
this.activeName = tab
}
if (this.activeName == 1) {
this.initTreeStationMap()
} else {
this.initTreeStationMap(true)
}
},
treeDataDeleteClick(node, data) {
this.$confirm('确认取消该收藏?', '取消收藏', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
.then(() => {
//左侧tree取消收藏按钮
// console.log(node)
// console.log(node.parent.childNodes.length, '节点长度')
// console.log(data)
let len = node.parent.childNodes.length
let pid = data.pid
let tid = data.tierId
this.$http({
url: this.$http.adornUrlEq('/liEnshrine/delete'),
method: 'post',
data: {
resourceId: node.data.id
}
}).then(data => {
if (data && data.code === 0) {
this.$message.success('取消收藏成功')
// this.defaultExpandedKeys = [this.treeData[0].id]
this.initTreeStationMap(true)
if (len > 1) {
this.defaultExpandedKeys = [pid]
} else {
this.defaultExpandedKeys = [tid]
}
}
})
})
.catch(() => {})
},
treeDataOffClick() {
//左侧tree收藏按钮
let node = this.$refs.tree.getCurrentNode()
// console.log(node)
if (node.level !== 6) {
this.$message.warning('只能收藏资源点或防区')
return
}
let dForm = {}
if (node.isDefence && node.level == 6) {
//如果是防区
dForm = {
resourceId: node.id,
byx1: '1'
}
} else {
dForm = {
resourceId: node.id
}
}
this.$http({
url: this.$http.adornUrlEq('/liEnshrine/save'),
method: 'post',
data: dForm
}).then(data => {
if (data && data.code === 0) {
if (data.msg === '收藏成功') {
this.$message.success(data.msg)
} else {
this.$message.warning(data.msg)
}
}
})
},
pointListClick(item) {
//监视器列表点击
if (this.transformationSta == 1) {
this.queryDetail(item.id)
}
this.activeChooseResourceBox(item.id)
this.defaultExpandedKeys = [item.id]
this.$refs.tree.setCurrentKey(item.id)
},
//初始化站点下的资源点
initTreeStationMap(save) {
let url = ''
if (!save) {
// 摄像头列表接口路径
// url = this.$http.adornUrl('/liResource/getTreeList')
url = this.$http.adornUrlEq('/liResource/getStationMapCodeTreeList')
} else {
// 收藏夹接口路径
url = this.$http.adornUrlEq(
'/liEnshrine/getEnshrineStationMapTreeList'
)
}
this.$http({
url: url,
method: 'post',
data: {
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) {
Vue.set(this.treeData[0], 'iconB', true)
}
}
})
.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)
})
},
initResourceTypeDicList() {
this.$http({
url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
method: 'get',
params: this.$http.adornParams()
}).then(data => {
if (data && data.code === 0) {
this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
this.iconNameListBottom.forEach(res => {
res.value += '3'
})
}
})
},
iconClick(item) {
this.iconNameListBottom.forEach(res => {
if (res.id === item.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) != 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '4'
this.showResourceByMapType(item)
} else {
res.value = res.value.substring(0, res.value.length - 1) + '3'
this.showResourceByMapType()
}
} else {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
},
showResourceByMapType(item) {
this.list = []
if (!item) {
this.list = this.listArr
return false
}
this.listArr.forEach(res => {
if (res.type == item.id) {
this.list.push(res)
}
})
},
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.isFlag(this.treeData, this.checkedData.tierId)
this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
this.defaultExpandedKeys = [this.checkedData.tierId]
this.checkedData.tierName = this.mapList[0].name
this.stationMap = this.mapList[0]
let imgurl = this.stationMap.readPath
console.log('站点地图：', imgurl)
// this.$refs.openLayer.initMap(imgurl)
}
})
.then(() => {
this.showResourceByMapId()
})
},
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)
}
})
},
//线路资源点树节点点击事件
handleNodeClick(node) {
this.currentNode = node
let name = node.name
let id = node.id
this.isFlag(this.treeData, id)
if (node.level !== 7) {
this.regionMouse = {
x: 0,
y: 0,
w: 0,
h: 0,
status: false
}
}
// if (this.activeName == 1) {
// this.isFlag(this.treeData, id)
// }
// if(node.level !== 6){
// this.list = [];
// }
//每次选择节点都先清空资源位
console.log('选中节点的层级', node)
if (node.level === 4) {
//层级
this.checkedData.tierId = id
this.checkedData.tierName = name
this.checkedData.stationId = node.stationId
this.stationMap = node
// console.log('选中节点的层级id', this.tierId)
this.showResourceByMapId()
} else if (node.level === 5) {
//子系统
if (node.children) {
this.list = node.children
this.listArr = JSON.parse(JSON.stringify(this.list))
this.iconNameListBottom.forEach(res => {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
this.showResourceByMapType(res)
}
})
}
this.mapList.forEach(res => {
if (res.id === node.id) {
this.stationMap = res
}
})
} else if (node.level === 6 && !node.isDefence) {
//资源点1
this.checkedData.resourceId = id
this.activeChooseResourceBox(id)
this.pointListClick(node)
// console.log('资源点列表：', this.list)
} else if (node.level === 6 && node.isDefence) {
//资源点1
if (node.children) {
this.list = node.children
this.listArr = JSON.parse(JSON.stringify(this.list))
this.iconNameListBottom.forEach(res => {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
this.showResourceByMapType(res)
}
})
}
this.mapList.forEach(res => {
if (res.id === node.id) {
this.stationMap = res
}
})
this.regionMouse.x = node.xpoint
this.regionMouse.y = node.ypoint
this.regionMouse.w = node.width
this.regionMouse.h = node.height
this.regionMouse.status = true
// console.log('资源点列表：', this.list)
} else if (node.level === 7) {
//资源点1
this.checkedData.resourceId = id
this.activeChooseResourceBox(id)
this.pointListClick(node)
// console.log('资源点列表：', this.list)
}
},
//激活选中资源点位节点
activeChooseResourceBox(id, level) {
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]
this.isFlag(this.treeData, 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 = []
//this.list = tierNode.children[0].children || []
if (tierNode && tierNode.children) {
tierNode.children.forEach(subSystem => {
subSystem.children.forEach(res => {
this.list.push(res)
})
})
}
},
//详情
queryDetail(id) {
this.queryDetailVisible = true
this.$nextTick(() => {
this.$refs.queryDetail.init(id, this.checkedData.sId)
})
},
//详情
noQueryDetail(id) {
this.noQueryDetailVisible = true
this.$nextTick(() => {
this.$refs.noQueryDetail.init(id, this.checkedData.sId)
})
},
closeQueryDetailVisible() {
this.queryDetailVisible = false
},
closeNoQueryDetailVisible() {
this.noQueryDetailVisible = false
},
transformation(now) {
//2D3D转换
this.transformationSta = now
if (now == 2) {
this.sendMessage()
}
}
}
}
</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;
}
.dic_tree /deep/ .el-tree-node {
position: relative;
padding-left: 16px;
}
.dic_tree /deep/ .el-tree-node__children {
padding-left: 16px;
}
.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: 33px;
}
.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__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>
.inputWidth {
width: 210px;
}
</style>
<style lang='scss'>
.inputWidth {
width: 130px;
}
.resource-container {
width: 100%;
height: 100%;
position: relative;
border: 0px solid black;
overflow: auto;
.span-box {
font-size: 12px;
border-radius: 5px;
position: absolute;
}
}
.tier-btn {
.active-tier {
background-color: #409eff;
color: #ffffff;
}
}
.ol_point {
.regionDiv {
background: #35aff8;
opacity: 0.5;
z-index: 10;
}
.el-tree {
background: #f4f4f4;
font-size: 12px;
overflow-y: scroll;
height: 680px;
}
.el-card__body {
padding: 0;
}
.el-card {
height: 99%;
background: #f4f4f4;
}
.el-tree {
padding: 20px 20px 0 10px;
}
.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;
}
}
.ol_point_left_top {
height: 50px;
background: #e1edf4;
padding-left: 10px;
.ol_point_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;
}
}
.ol_point_left_topR {
float: right;
margin-top: 10px;
.el-input {
width: 109px;
}
}
}
.ol_point_right_button {
height: 50px;
width: 100%;
background: #e3e4e6;
border-bottom: 1px solid #ccc;
ol_point_right_button_l {
margin-left: 20px;
}
.el-button--primary.is-plain {
margin-top: 5px;
background: #ced1d6;
border: none;
color: #656565;
}
.tier-btn .active-tier {
background-color: #409eff;
color: #ffffff;
}
.el-button.is-plain:hover {
background: #fff;
border-color: #32a5ea;
color: #32a5ea;
}
}
.ol_point_right_button_r {
position: absolute;
right: 20px;
top: 60px;
width: 95px;
height: 26px;
z-index: 10;
font-size: 12px;
line-height: 25px;
overflow: hidden;
border-radius: 13px;
background: #ced1d6;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
0px 2px 4px 0px rgba(0, 0, 0, 0.1);
div {
width: 46px;
height: 24px;
float: left;
text-align: center;
cursor: pointer;
}
div.on {
background: #45b5f8;
color: #fff;
border-radius: 13px;
border: 1px solid rgba(23, 41, 71, 0.5);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
0px 2px 0px 0px rgba(255, 255, 255, 0.15);
}
}
.map_right {
margin-top:50px;
iframe {
width: 1600px;
height: 680px;
}
}
}
</style>
src/pages/ol/demo/no-query-detail copy.vue deleted 100644 → 0
View file @ 74f59da1
<template lang="pug">
<div class="animation">
<div class='info-title'>当前资源点关联摄像头
<el-button icon="el-icon-close" style="float:right;" type="text" @click="closeQueryDetailVisible"></el-button>
</div>
<div style="height:40px; width:100%;padding-top:10px">
<div style="width:80px; float:left; line-height:40px; padding-left:10px;">关联监控:</div>
<div style="float:left">
<el-select v-model="camera" placeholder="请选择" @change="cameraChange">
<el-option v-for="item in dataForm.list" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</div>
</div>
<div class='info-video'>
<video class="video" :src="videoSrc" ref="video" controls="controls"></video>
</div>
<div class="info-form">
<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 class='info-title'>资源点信息查询</div>
<div class='info-form'>
<el-button type="primary" style='margin-left:30px;' @click="dialogList1">出入记录查询</el-button>
<el-button type="primary" @click="dialogList2">历史指令查询</el-button>
</div>
<el-dialog :title="dataForm.name" width="1200px" :close-on-click-modal='false' :visible.sync='visible1' :modal-append-to-body='false'>
<div class="instuctions_content">
<el-form :inline="true" :model="formData1" size="mini" style="margin:20px 0 20px 17px ">
<el-form-item label="人员姓名:">
<el-input v-model="formData1.name" placeholder="请输入人员姓名" clearable></el-input>
</el-form-item>
<el-form-item label="门禁设备:">
<el-select v-model="formData1.id" placeholder="请选择">
<el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id" placeholder="请选择"> </el-option>
</el-select>
//- <el-autocomplete class="inline-input" v-model="formData1.username" :fetch-suggestions="querySearch1" placeholder="请输入内容"></el-autocomplete>
</el-form-item>
<el-form-item label="查询时间:">
<el-date-picker type="datetime" class="inputWidth" style="width:175px;" v-model="formData1.startTime" placeholder="选择日期时间" clearable ></el-date-picker>
</el-form-item>
<el-form-item label="至">
<el-date-picker type="datetime" class="inputWidth" style="width:175px;" v-model="formData1.endTime" placeholder="选择日期时间" clearable ></el-date-picker>
</el-form-item>
<el-button @click="getDataList1()" type="primary" size="mini" icon="el-icon-search">查询</el-button>
</el-form>
<el-table :data="dataList1" v-loading="dataListLoading" :stripe="true" :header-cell-style="{background:'#D5D9E0',color:'#fff'}" style="width: 100%;">
<el-table-column type="index" header-align="center" align="center" width='80' label="序号">
<template scope="scope"><span>{{scope.$index+(pageIndex1 - 1) * pageSize1 + 1}} </span></template>
</el-table-column>
<el-table-column prop="instruction" header-align="center" align="center" label="姓名"></el-table-column>
<el-table-column prop="resourceName" header-align="center" align="center" label="部门"></el-table-column>
<el-table-column prop="type" header-align="center" align="center" label="岗位"></el-table-column>
<el-table-column prop="actionName" header-align="center" align="center" label="卡序列号"></el-table-column>
<el-table-column prop="createUser" header-align="center" align="center" label="刷卡时间"></el-table-column>
<el-table-column header-align="center" align="center" label="操作">
<template slot-scope="scope">
<div>{{scope.row.result==1?'成功':'失败'}}</div>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="sizeChangeHandle1" @current-change="currentChangeHandle1" :current-page="pageIndex1" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize1" :total="totalPage1" layout="total, sizes, prev, pager, next, jumper" ></el-pagination>
</div>
</el-dialog>
<el-dialog :title="dataForm.name" width="1200px" :close-on-click-modal='false' :visible.sync='visible2' :modal-append-to-body='false'>
<div class="instuctions_content">
<el-form :inline="true" :model="formData2" size="mini" style="margin:20px 0 20px 17px ">
<el-form-item label="操作人:">
<el-input v-model="formData2.username" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="门禁设备:">
<el-select v-model="formData2.id" placeholder="请选择">
<el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id" placeholder="请选择"> </el-option>
</el-select>
//- <el-autocomplete class="inline-input" v-model="formData1.username" :fetch-suggestions="querySearch1" placeholder="请输入内容"></el-autocomplete>
</el-form-item>
<el-form-item label="执行时间:">
<el-date-picker type="datetime" class="inputWidth" style="width:175px;" value-format="yyyy-MM-dd HH:mm:ss" v-model="formData2.startTime" placeholder="选择日期时间" clearable ></el-date-picker>
</el-form-item>
<el-form-item label="至">
<el-date-picker type="datetime" class="inputWidth" style="width:175px;" value-format="yyyy-MM-dd HH:mm:ss" v-model="formData2.endTime" placeholder="选择日期时间" clearable ></el-date-picker>
</el-form-item>
<el-button @click="getDataList2()" type="primary" size="mini" icon="el-icon-search">查询</el-button>
</el-form>
<el-table :data="dataList2" @sort-change='sortChange2' v-loading="dataListLoading" :stripe="true" :header-cell-style="{background:'#D5D9E0',color:'#fff'}" style="width: 100%;">
<el-table-column type="index" header-align="center" align="center" width='80' label="序号">
<template scope="scope"><span>{{scope.$index+(pageIndex2 - 1) * pageSize2 + 1}} </span></template>
</el-table-column>
<el-table-column prop="instruction" sortable="custom" header-align="center" align="center" label="操作ID"></el-table-column>
<el-table-column prop="resourceName" sortable="custom" column-key='resource_name' header-align="center" align="center" label="资源点名称"></el-table-column>
<el-table-column prop="type" sortable="custom" header-align="center" align="center" label="部署位置"></el-table-column>
<el-table-column prop="actionName" sortable="custom" column-key='action_name' header-align="center" align="center" label="动作"></el-table-column>
<el-table-column prop="username" sortable="custom" column-key='username' header-align="center" align="center" label="操作人"></el-table-column>
<el-table-column prop="createTime" sortable="custom" column-key='create_time' header-align="center" align="center" label="操作时间"></el-table-column>
<el-table-column sortable="custom" column-key='result' header-align="center" align="center" label="执行结果">
<template slot-scope="scope">
<div>{{scope.row.result==1?'成功':'失败'}}</div>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="sizeChangeHandle2" @current-change="currentChangeHandle2" :current-page="pageIndex2" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize2" :total="totalPage2" layout="total, sizes, prev, pager, next, jumper" ></el-pagination>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState('d2admin/user', [
'info'
])
},
data () {
return {
options: [],
stationId: localStorage.getItem('stationId'),
//11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小
//21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描
actionList: ['', '', '', '', '', '', '', '', '', '', '', '变倍+', '变倍-', '变焦+', '变焦-', '光圈+', '光圈-', '', '', '', '',
'上仰', '下俯', '左转', '右转', '左上', '右上', '左下', '右下', '自动扫描'],
imgUrl: '',
imgRightUrl11: false,
imgRightUrl12: false,
imgRightUrl13: false,
imgRightUrl14: false,
imgRightUrl15: false,
imgRightUrl16: false,
monitorList: [{
value: '1',
label: '监控1'
}, {
value: '2',
label: '监控2'
}],
monitorValue: '监控1',
videoSrc: '',
clickFlag: false,
visible1: false,
visible2: false,
sysOrgList: [],
dataListLoading: false,
dataList1: [],
dataList2: [],
formData1: {},
formData2: {},
dataListSelections: [],
lineList: [],
stationList: [],
typeList: [],
systemList: [],
tierList: [],
camera: '',
pageIndex1: 1,
pageSize1: 10,
totalPage1: 0,
pageIndex2: 1,
pageSize2: 10,
totalPage2: 0,
order2: '',
sort2: '',
restaurants: [],
dataForm: { id: 0, name: '', type: 1, lineId: '', lineName: '', stationId: '', stationName: '', tierId: '', subSystem: '', code: '', subCode: '', addressCode: '', port: '', username: '', password: '', remark: '', status: 1 }
}
},
created() {
},
methods: {
init (id, stationId) {
this.getAllEq()
this.clickFlag = false
this.dataForm.id = id
this.formData1.id = id
this.formData2.id = id
// this.stationId = stationId
this.initResource()
this.dataForm.operatorName = this.info.name
},
//门禁查询
getDataList1() {
console.log('门禁查询')
},
//历史指令查询
getDataList2() {
// console.log('历史指令查询')
// if (new Date(this.formData2.startTime).getTime() > new Date(this.formData2.endTime).getTime()) {
// this.$message.warning('开始时间不能大于结束时间')
// return false
// }
this.dataListLoading = true
this.$http({
url: this.$http.adornUrlEq('/orGate/list'),
method: 'post',
data: {
stationId: this.stationId,
page: this.pageIndex2,
rows: this.pageSize2,
startTime: this.formData2.startTime,
endTime: this.formData2.endTime,
username: this.formData2.username,
resourceId: this.formData2.id,
sort: this.sort2,
order: this.order2
}
}).then(data => {
console.log('data', data)
if (data && data.code === 0) {
this.dataList2 = data.page.rows
this.totalPage2 = data.page.total
} else {
this.dataList2 = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
initResource() {
this.$http({
url: this.$http.adornUrlEq(`/liResource/getResourceDetails/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(data => {
if (data && data.code === 0) {
this.dataForm = data.bean
if (this.dataForm.list) {
var obj = this.dataForm.list[0]
this.camera = obj.id
this.$http({
url: this.$http.adornUrlEq('/camera/cameras'),
method: 'post',
data: {
ip: obj.addressCode,
port: obj.port,
username: obj.username,
password: obj.password,
channel: obj.byx1,
stream: 'main'
}
}).then(data => {
if (data && data.code === 0) {
this.videoSrc = 'http://www.crsh.cn/live?port=1935&app=live&stream=' + data.token
//视频连接
let flvPlayer = null
flvPlayer = flvjs.createPlayer({
type: 'flv',
enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
isLive: true, //直播模式
hasAudio: false, //关闭音频
hasVideo: true,
stashInitialSize: 128,
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
url: this.videoSrc
})
this.$nextTick(function () {
// console.log(this.$refs.video[0]);
flvPlayer.attachMediaElement(this.$refs.video)
flvPlayer.load()
})
}
})
}
}
})
},
//查询所有设备
getAllEq() {
// console.log('---', this.stationId)
this.$http({
url: this.$http.adornUrlEq('/liResource/getAllEq'),
method: 'get',
params: {
stationId: this.stationId,
subCode: '02'
}
}).then(data => {
if (data && data.code === 0) {
this.options = data.list
// console.log('所有设备', data.list)
}
})
},
closeQueryDetailVisible() {
this.$emit('closeQ')
},
querySearch1(queryString, cb) {
let restaurants = this.restaurants
let results = queryString ? restaurants.filter(this.createFilter1(queryString)) : restaurants
// 调用 callback 返回建议列表的数据
cb(results)
},
createFilter1(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
querySearch2(queryString, cb) {
let restaurants = this.restaurants
let results = queryString ? restaurants.filter(this.createFilter2(queryString)) : restaurants
// 调用 callback 返回建议列表的数据
cb(results)
},
createFilter2(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
dialogList1() {
this.visible1 = true
this.getDataList1()
},
dialogList2() {
this.visible2 = true
this.getDataList2()
},
//排序
sortChange2 (column) {
if (column.order === 'descending') {
this.order2 = 'desc'
} else {
this.order2 = 'asc'
}
if (column.column.columnKey) {
this.sort2 = column.column.columnKey
} else {
this.sort2 = column.prop
}
this.getDataList2()
},
// 每页数
sizeChangeHandle1(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle1(val) {
this.pageIndex = val
this.getDataList()
},
// 每页数
sizeChangeHandle2(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle2(val) {
this.pageIndex = val
this.getDataList()
},
clickPTZControl(ptz, dwStop, img) {
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('/orGate/save'),
method: 'post',
data: {
actionName: this.actionList[ptz],
resourceId: this.dataForm.id,
stationId: this.stationId,
type: this.dataForm.type
}
}).then(data => {
if (data && data.code === 0) {
this.$message.success('操作成功')
}
})
},
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)
}
})
},
cameraChange() {
}
}
}
</script>
<style lang="scss" scoped>
.el-table__header {
width: 100% !important;
}
.el-table__body {
width: 100% !important;
}
.info-title{
line-height: 40px;
height: 40px;
padding: 0 20px;
background-color: #e1edf4;
border-bottom: 1px solid #cccccc;
font-size:16px;
font-family:Microsoft YaHei;
font-weight:bold;
}
.info-video{
padding: 10px; height: 160px;
}
.info-form{
padding: 10px;
}
.info-block{
border: 1px solid #cccccc;
}
.el-select{
width: 100%;
}
.video{
width: 100%;height: 180px;
}
.animation{
animation: myfirst 1s; position: absolute; top: 50px;right: 0; width: 330px; background-color: #F4F4F4; z-index: 11; border: 1px solid rgba(195, 195, 195, 1);
box-shadow:0 2px 8px 8px rgba(0,0,0,0.2)
}
@keyframes myfirst{
from {right: -500px}
to {right: 0}
}
.quDetailM{
width: 100%;
}
.leftP{
height: 30px; line-height: 30px; margin: 0; width: 100%; font-size: 14px;
span{
color: #46b6f9;
}
}
.operate{
padding:5px 0;
font-size:14px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(0,0,0,1);
border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2;
border-radius:10px;
overflow: hidden;
display: flex;
justify-content: flex-start;
.btns{
width:194px;
height:194px;
position:relative;
img{
width:100%;
height:100%;
}
div{
cursor: pointer;
padding: 10px;
}
.s{
position: absolute;
top:10px;
left: 75px;
width: 24px;
height: 24px;
}
.x{
position: absolute;
bottom:10px;
left: 75px;
width: 24px;
height: 24px;
}
.z{
position: absolute;
top:75px;
left: 10px;
width: 24px;
height: 24px;
}
.y{
position: absolute;
top:75px;
right:10px;
width: 24px;
height: 24px;
}
.zs{
position: absolute;
top:32px;
left: 32px;
width: 24px;
height: 24px;
}
.zx{
position: absolute;
bottom:32px;
left: 32px;
width: 24px;
height: 24px;
}
.ys{
position: absolute;
top:32px;
right:32px;
width: 24px;
height: 24px;
}
.yx{
position: absolute;
bottom:32px;
right:32px;
width: 24px;
height: 24px;
}
.fx{
position: absolute;
padding: 0;
cursor: default;
top: 50%;
left: 50%;
width: 65px;
height: 65px;
background:#ececec;
border-radius: 50%;
line-height: 65px;
text-align: center;
color: #969696;
transform: translate(-50%,-50%);
}
}
.ytBox{
width:90px;
font-size: 16px;
padding: 10px 0 10px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.mllx{
display: flex;
justify-content: space-between;
width: 90%;
span{
line-height: 40px;
text-align: center;
width: 35%;
}
}
.bbBtn{
height: 40px;
display: flex;
margin-left: 10px;
justify-content: flex-start;
div{
width: 40px; height: 40px; cursor: pointer;
img{
width: 100%; height: 100%;
}
}
}
}
}
.el-icon-wq-r1{
background: url(~@/assets/images/r1.png) center no-repeat;
background-size: 65%;
}
.el-icon-wq-r1:before{
content: "";
font-size: 16px;
}
.el-icon-wq-r2{
background: url(~@/assets/images/r2.png) center no-repeat;
background-size: 65%;
}
.el-icon-wq-r2:before{
content: "";
font-size: 16px;
}
.el-icon-wq-r3{
background: url(~@/assets/images/r3.png) center no-repeat;
background-size: 65%;
}
.el-icon-wq-r3:before{
content: "";
font-size: 16px;
}
.el-icon-wq-r5{
background: url(~@/assets/images/r5.png) center no-repeat;
background-size: 65%;
}
.el-icon-wq-r5:before{
content: "";
font-size: 16px;
}
.el-icon-wq-r6{
background: url(~@/assets/images/r6.png) center no-repeat;
background-size: 65%;
}
.el-icon-wq-r6:before{
content: "";
font-size: 16px;
}
.el-icon-wq-r1b{
background: url(~@/assets/images/r1b.png) center no-repeat;
height: 35px;
width: 35px;
background-size: 65%;
}
.el-icon-wq-r1b:before{
content: "";
font-size: 16px;
}
.el-icon-wq-r2b{
background: url(~@/assets/images/r2b.png) center no-repeat;
height: 35px;
width: 35px;
background-size: 65%;
}
.el-icon-wq-r2b:before{
content: "";
font-size: 16px;
}
.el-icon-wq-r3b{
background: url(~@/assets/images/r3b.png) center no-repeat;
height: 35px;
width: 35px;
background-size: 65%;
}
.el-icon-wq-r3b:before{
content: "";
font-size: 16px;
}
.el-icon-wq-r5b{
background: url(~@/assets/images/r5b.png) center no-repeat;
height: 35px;
width: 35px;
background-size: 65%;
}
.el-icon-wq-r5b:before{
content: "";
font-size: 16px;
}
.el-icon-wq-r6b{
background: url(~@/assets/images/r6b.png) center no-repeat;
height: 35px;
width: 35px;
background-size: 65%;
}
.el-icon-wq-r6b:before{
content: "";
font-size: 16px;
}
</style>
<style lang="scss">
.instuctions_content{
table{
th{
background: #eef8ff !important;
color: #333333 !important;
}
}
}
</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