Skip to content

E
energyai_vue
Commit 042b70f6 authored by xiexingan's avatar xiexingan
Browse files
Options

设备概览

parent 36d0ac57
Show whitespace changes
Inline Side-by-side
Showing with 2533 additions and 1 deletion
src/pages/eq/view/index.vue 0 → 100644
View file @ 042b70f6
<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>资源列表</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;" v-if="node.label.indexOf('在线') == -1 && node.label.indexOf('离线') == -1">&nbsp;{{node.label}}<span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
<span style="position: relative;" v-if="node.label.indexOf('在线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:green;'>[在线]</span><span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
<span style="position: relative;" v-if="node.label.indexOf('离线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:red;'>[离线]</span><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='14' :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='10' :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-show="transformationSta==1">
<el-row style="padding-bottom:15px;height:780px;background:#fff;" :span="24">
<el-col class="resource-container" :style="obj" ref="drag">
<div id="map" class="map" ref='map' style="width: 100%;height: 720px;position:relative;"></div>
</el-col>
</el-row>
</div>
<div class="map_right">
<div>
<iframe :src="src" ref="iframe"></iframe>
</div>
</div>
</el-card>
</el-main>
<query-detail v-if='queryDetailVisible' ref='queryDetail' @closeQ="closeQueryDetailVisible"></query-detail>
<no-query-detail v-if='noQueryDetailVisible' ref='noQueryDetail' @closeQ="closeNoQueryDetailVisible"></no-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'
import 'ol/ol.css'
import { Map, View, layer, Markers } from 'ol'
import { Projection, Transform } from 'ol/proj'
import { getCenter } from 'ol/extent'
import overviewmap from 'ol/control/OverviewMap'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import { control } from 'ol/control/Control'
import Zoom from 'ol/control/Zoom'
import { DoubleClickZoom, Select } from 'ol/interaction'
// 图上图标相关
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 LineString from 'ol/geom/LineString'
import Polygon from 'ol/geom/Polygon'
// 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
import { mapState, mapGetters, mapActions } from 'vuex'
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 {
imgLayerList: [],
controlList: [],
imgurl: '',
transformationSta: 1,
isCollapse: true,
urlPath: window.CONFIG.urlPath,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
queryDetailVisible: false,
noQueryDetailVisible: false,
treeData: [],
listArr: [],
defaultExpandedKeys: [],
iconNameListBottom: [],
defaultProps: {
children: 'children',
label: 'name',
level1: 'level'
},
nodeKey: 'id',
station: {}, //当前选择的站点
mapList: [], //当前站点的所有层
stationMap: {}, //当前选择的层
clickItem: {},
checkedData: {
stationId: '',
stationName: '',
tierId: '',
tierName: '',
resourceId: '',
sId: localStorage.getItem('stationId')
},
currentNode: {},
dragAble: false,
list: [],
obj: 'pointer-events:initial',
editable: false,
activeName: '1',
searchInput: '',
src: window.CONFIG.bimPath,
regionMouse: {
x: 0,
y: 0,
w: 0,
h: 0,
status: false
},
vectorLayer: [],
lineVectorLayer: [],
resolutions: [],
code: ''
}
},
components: {
QueryDetail,
NoQueryDetail
},
watch: {
searchInput(val) {
this.$refs.tree.filter(val)
}
},
created() {
that = this
this.initTreeStationMap()
this.initResourceTypeDicList()
},
methods: {
// 初始化地图
initMap(url) {
this.resolutions = []
let mapList = this.mapList
// let mapsrcList = []
// if (mapList != null && mapList.length > 0) {
// mapsrcList = mapList.map((e) => e.readPath)
// }
this.imgurl = url
// 计算静态地图映射到地图上的范围
let extent = [-1100, 110, 1460, 820]
let projection = new Projection({
// 投影
code: 'xkcd-image',
units: 'pixels',
extent: extent
})
if (mapList.length > 0) {
for (var i = 0; i < mapList.length; i++) {
let layerItem = new ImageLayer({
id: mapList[i].id,
source: new ImageStatic({
url: mapList[i].readPath, //这里添加静态图片的地址
projection: projection,
imageExtent: extent
}),
visible: false
})
this.imgLayerList.push(layerItem)
let controlItem = new overviewmap({
className: 'ol-overviewmap myOverview', //鹰眼控件样式
// 在鹰眼中加载相同坐标系下不同数据源的图层
layers: [
new ImageLayer({
source: new ImageStatic({
url: mapList[i].readPath, //这里添加静态图片的地址
projection: projection,
imageExtent: extent
})
})
],
collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
collapsed: false //初始为展开方式
})
this.controlList.push(controlItem)
let resolutionItem = 1
this.resolutions.push(resolutionItem)
}
}
let zoomControl = new Zoom({
delta: 0.2,
zoomInTipLabel: '',
zoomOutTipLabel: ''
})
// 大图
this.map = new Map({
target: 'map',
layers: this.imgLayerList,
controls: [zoomControl],
resolutions: this.resolutions,
view: new View({
projection: projection,
center: getCenter([0, 0, 0, 0]), // 获取范围的中心坐标。
zoom: 2.5,
maxZoom: 5.0,
minZoom: 1.5,
extent: [-1100, -100, 2000, 1000] //[minX, minY, maxX, maxY] 控制拖动
})
})
// 删除默认的双击事件
const dblClickInteraction = this.map
.getInteractions()
.getArray()
.find((interaction) => {
return interaction instanceof DoubleClickZoom
})
this.map.removeInteraction(dblClickInteraction)
//将鹰眼控件加载到map中
this.map.addControl(this.controlList[0])
//点击事件
this.changeVectorLayer(this.list)
this.map.on('click', function(evt) {
let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function(
feature
) {
return feature
})
if (feature) {
for (let i in that.list) {
let style = that.getPointStyle(
that.list[i].imageSrc + '.png',
that.list[i].name
)
let style2 = that.getPointStyle(
that.list[i].imageSrc + '2.png',
that.list[i].name,
0.3
)
//获取feature对象
let feature_ = that.vectorLayer
.getSource()
.getFeatureById(that.list[i].id)
//获取红外对射或者振动光纤第二个点的feature对象
let featureEnd = that.vectorLayer
.getSource()
.getFeatureById(that.list[i].key + 'end')
if (feature_) {
if (feature_ === feature || featureEnd === feature) {
//修改选中样式
feature_.setStyle(style2)
if (featureEnd) {
featureEnd.setStyle(style2)
}
that.pointListClick(that.list[i])
} else {
//清除选中以外的样式
feature_.setStyle(style)
if (featureEnd) {
featureEnd.setStyle(style)
}
}
}
}
}
})
},
mapClick(feature, item, flag) {
//默认样式
let style = this.getPointStyle(item.imageSrc + '.png', item.name)
//选中样式
let style2 = this.getPointStyle(item.imageSrc + '2.png', item.name, 0.3)
//获取feature对象
let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
//获取红外对射或者振动光纤第二个点的feature对象
let featureEnd = this.vectorLayer
.getSource()
.getFeatureById(item.key + 'end')
if (feature_) {
if (feature_ === feature || featureEnd === feature) {
//console.log(feature_)
//修改选中样式
feature_.setStyle(style2)
if (featureEnd) {
featureEnd.setStyle(style2)
}
} else {
//清除选中以外的样式
feature_.setStyle(style)
if (featureEnd) {
featureEnd.setStyle(style)
}
}
} else {
//获取新增的feature对象
let newFeature = this.vectorLayer.getSource().getFeatureById(item.key)
//获取红外对射或者振动光纤第二个点的feature对象
let newFeatureEnd = this.vectorLayer
.getSource()
.getFeatureById(item.key + 'end')
if (newFeature) {
if (newFeature === feature || newFeatureEnd === feature) {
newFeature.setStyle(style2)
if (newFeatureEnd) {
newFeatureEnd.setStyle(style2)
}
} else {
//清除选中以外的样式
newFeature.setStyle(style)
if (newFeatureEnd) {
newFeatureEnd.setStyle(style)
}
}
}
}
},
getPointStyle(src, name, zoom) {
let style = new OlStyleStyle({
image: new OlStyleIcon({
anchor: [0.5, 0.5],
scale: zoom || 0.4,
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
})
return style
},
clearLayer() {
if (this.map) {
this.map.removeLayer(this.vectorLayer)
this.map.removeLayer(this.lineVectorLayer)
this.map.removeInteraction(this.modify)
return false
} else {
return true
}
},
changeVectorLayer(list) {
if (list) {
this.list = list
} else {
this.clearLayer()
}
if (this.clearLayer()) return
this.lineVectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: []
}),
style: new OlStyleStyle({
stroke: new Stroke({
color: '#409EFF',
width: 3
})
})
})
this.map.addLayer(this.lineVectorLayer)
let lineLastArr = []
let featuresArr = []
for (let i in list) {
if (list[i].imageSrc) {
//振动光纤和红外线对射
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])
this.lineVectorLayer
.getSource()
.addFeature(new OlFeature(new LineString(lineFeatures)))
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
)
featuresArr[i].setStyle(style)
featuresArr[i].setId(list[i].id)
} else {
continue
}
}
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[i].setStyle(style)
LinefeaturesArr[i].setId(lineLastArr[i].key + 'end')
this.list.push(lineLastArr[i])
}
this.vectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: featuresArr.concat(LinefeaturesArr)
})
})
this.map.addLayer(this.vectorLayer)
},
getFeature(x, y) {
return new OlFeature({
type: 'icon',
geometry: new OlGeomPoint([x, y])
})
},
// 树节点过滤
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,
stationId: this.checkedData.sId
}
}).then((data) => {
if (data && data.code === 0) {
this.$message.success('取消收藏成功1111')
// this.defaultExpandedKeys = [this.treeData[0].id]
this.initTreeStationMap(true)
if (len > 1) {
this.defaultExpandedKeys = [pid]
} else {
this.defaultExpandedKeys = [tid]
}
}
})
})
},
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',
stationId: this.checkedData.sId
}
} else {
dForm = {
resourceId: node.id,
stationId: this.checkedData.sId
}
}
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) {
//监视器列表点击
//关闭其他窗口
// 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() {
this.$http({
url: this.$http.adornUrl('/liResource/getTreeList'),
method: 'post',
data: {
stationId: this.checkedData.sId,
name: this.searchInput
}
})
.then((data) => {
if (data && data.code === 0) {
this.treeData = data.tree
console.log('data:', this.treeData)
if (this.treeData && this.treeData.length > 0) {
Vue.set(this.treeData[0], 'iconB', true)
}
return data
}
})
.then((data) => {
if (
this.checkedData.sId &&
this.treeData &&
this.treeData.length > 0
) {
// this.defaultExpandedKeys = [data.nodes[0].id]
}
this.initStation(this.checkedData.sId)
})
},
initResourceTypeDicList() {
this.$http({
url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
method: 'get',
params: { stationId: this.checkedData.sId }
}).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'
}
} else {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
if (
this.currentNode.level == 5 ||
(this.currentNode.level == 6 && this.currentNode.isDefence)
) {
this.list = []
this.currentNode.children.forEach((el) => {
if (item === null || (item != null && item.id === el.type)) {
this.list.push(el)
}
})
this.list.forEach((res) => {
Vue.set(res, 'active', false)
})
} else {
this.showResourceByMapId(item)
}
this.clickItem = item
this.changeVectorLayer(this.list)
},
initStation(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
if (this.mapList && this.treeData) {
this.mapList.forEach((element) => {
element.readPath = this.urlPath + element.filePath
})
this.checkedData.stationId = this.station.id
this.checkedData.stationName = this.station.stationName
this.checkedData.tierId = !this.mapList[0]
? ''
: this.mapList[0].id
if (!this.checkedData.tierId) {
return
}
this.isFlag(this.treeData, this.checkedData.tierId)
if (this.treeData[0]) {
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]
}
}
}
})
.then(() => {
if (!this.checkedData.tierId) {
return
}
this.showResourceByMapId(null)
if (!this.map) {
this.initMap()
this.imgLayerList[0].setVisible(true) //初始第一个显示
} else {
this.changeVectorLayer(this.list)
}
})
},
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)
}
})
},
// 改变层级和鹰眼图
changeImgControl(id) {
// console.log('mapid', id)
let srcIndex = this.imgLayerList.findIndex((e) => {
return e.values_.id == id
})
this.map.removeControl(this.controlList[srcIndex])
this.map.addControl(this.controlList[srcIndex])
for (var k = 0; k < this.imgLayerList.length; k++) {
if (this.imgLayerList[k].values_.id == id) {
this.imgLayerList[k].setVisible(true)
} else {
this.imgLayerList[k].setVisible(false)
}
}
},
addBox(obj) {
this.boxVectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: []
}),
style: new OlStyleStyle({
stroke: new Stroke({
color: '#409EFF',
width: 2
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
})
this.map.addLayer(this.boxVectorLayer)
//创建矩形对象
let start = [obj.xpoint, obj.ypoint]
let end = [obj.xlongit, obj.ylat]
let boxFeature = new OlFeature({
geometry: new Polygon([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
])
})
boxFeature.setId(obj.id + 'box')
this.boxVectorLayer.getSource().addFeature(boxFeature)
},
//线路资源点树节点点击事件
handleNodeClick(node) {
// console.log(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
}
}
//每次选择节点都先清空资源位
console.log('选中节点的层级', node)
if (node.level === 4) {
this.map.removeLayer(this.boxVectorLayer)
//层级
this.checkedData.tierId = id
this.checkedData.tierName = name
this.checkedData.stationId = node.stationId
this.stationMap = node
// console.log('选中节点的层级id', this.tierId)
this.showResourceByMapId(null)
this.changeImgControl(id)
this.changeVectorLayer(this.list)
} else if (node.level === 5) {
this.map.removeLayer(this.boxVectorLayer)
//资源点类型
this.list = []
if (node.children) {
node.children.forEach((res) => {
this.list.push(res)
})
}
this.checkedData.tierId = node.tierId
this.mapList.forEach((res) => {
if (res.id === node.tierId) {
this.stationMap = res
}
})
this.list.forEach((res) => {
Vue.set(res, 'active', false)
})
this.changeImgControl(node.tierId)
this.changeVectorLayer(this.list)
} else if (node.level === 6) {
this.map.removeLayer(this.boxVectorLayer)
//资源点
let subNode = this.$refs.tree.getNode(node.tierId + node.type).data
// console.log('当前要选中的层级节点', subNode)
this.list = []
subNode.children.forEach((res) => {
this.list.push(res)
})
this.list.forEach((res) => {
Vue.set(res, 'active', false)
})
this.changeVectorLayer(this.list)
// 点亮对应的marker
let feature = this.vectorLayer.getSource().getFeatureById(id)
if (feature) {
for (let i in this.list) {
if (feature.id_ == that.list[i].id) {
this.listItem = that.list[i]
}
//flag为ture打开详情或者编辑页面
this.mapClick(feature, that.list[i], false)
}
}
this.checkedData.resourceId = id
this.checkedData.tierId = node.tierId
this.activeChooseResourceBox(id)
this.pointListClick(node)
this.changeImgControl(node.tierId)
}
this.iconNameListBottom.forEach((res) => {
if (res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
},
setStyle(item) {
//选中样式
let style2 = this.getPointStyle(item.imageSrc + '2.png', item.name, 0.3)
let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
feature_.setStyle(style2)
let featureEnd = this.vectorLayer
.getSource()
.getFeatureById(item.key + 'end')
if (featureEnd) {
featureEnd.setStyle(style2)
}
},
//激活选中资源点位节点
activeChooseResourceBox(id, level) {
this.list.forEach((res) => {
if (res.id === id) {
Vue.set(res, 'active', true)
} else {
Vue.set(res, 'active', false)
}
})
},
//切换层级
changeMap(map) {
this.map.removeLayer(this.boxVectorLayer)
// 切换openlayer
// console.log(this.map)
//图层缩放级别设置为默认
this.map.getView().setZoom(1)
// console.log(this.imgLayerList)
this.changeImgControl(map.id)
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.defaultExpandedKeys = [map.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.iconNameListBottom.forEach((res) => {
if (res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
this.showResourceByMapId(null)
this.changeVectorLayer(this.list)
},
//根据层级id展示当前层级所有的资源点
showResourceByMapId(item) {
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((type) => {
type.children.forEach((res) => {
if (item === null || (item != null && item.id === res.type)) {
this.list.push(res)
}
})
})
}
this.list.forEach((res) => {
Vue.set(res, 'active', false)
})
},
//详情
queryDetail(id) {
this.queryDetailVisible = true
this.noQueryDetailVisible = false
this.$nextTick(() => {
this.$refs.queryDetail.init(id, this.checkedData.sId)
})
},
noQueryDetail(id) {
this.noQueryDetailVisible = true
this.queryDetailVisible = false
this.$nextTick(() => {
this.$refs.noQueryDetail.init(id, this.checkedData.sId)
})
},
closeQueryDetailVisible() {
this.queryDetailVisible = false
},
closeNoQueryDetailVisible() {
this.noQueryDetailVisible = false
},
transformation(now) {
//2D3D转换
this.transformationSta = now
// console.log('当前节点', this.currentNode)
// console.log(this.mapList)
if (now == 1) {
if (this.currentNode.level == 6) {
this.$nextTick(() => {
// console.log(22222222222)
this.changeImgControl(this.currentNode.tierId)
})
} else if (
this.currentNode.level == 5 ||
this.currentNode.level == 6 ||
this.currentNode.level == 7
) {
this.$nextTick(() => {
// console.log(3333333333333)
this.changeImgControl(this.currentNode.tierId)
})
}
}
}
}
}
</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: 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: 35px;
// background: red;
position: absolute;
z-index: 1;
}
.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;
// background:skyblue;
}
.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;
// background:skyblue;
}
.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon {
padding: 0 2px 0 0;
}
.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">
// openlayer 样式
.resource-container {
.ol-overviewmap {
left: 89%;
}
}
</style>
<style lang="scss">
.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: auto;
height: 750px;
}
.el-card__body {
padding: 0;
}
.el-card {
height: 99%;
background: #f4f4f4;
}
.el-tree {
padding: 20px 20px 0 0px;
}
.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;
}
}
}
.ol-overviewmap .ol-overviewmap-map {
height: 110px !important;
}
</style>
src/pages/eq/view/no-query-detail.vue 0 → 100644
View file @ 042b70f6
<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'>
<img v-if="video1 == 0" class="video" src="@/assets/images/videoImg.png" alt="">
<video v-if="video1 == 1" class="video" ref="video" muted autoplay 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'>
<div class="quDetailM">
<p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}}</span></p>
</div>
<div class="quDetailM">
<p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}}</p>
</div>
<div class="quDetailM">
<p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}}</p>
</div>
<div class="quDetailM">
<p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}</p>
</div>
<div class="quDetailM">
<p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'正常':'异常'}}</p>
</div>
<div class="quDetailM">
<p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}</p>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { isAuth } from '../../../util'
export default {
computed: {
...mapState('d2admin/user', ['info'])
},
data() {
return {
video1: 0,
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,
camera: '',
cameraCur: {},
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.clickFlag = false
this.dataForm.id = id
// this.stationId = stationId
this.cameraCur = {}
this.camera = ''
this.initResource()
this.dataForm.operatorName = this.info.name
},
initResource() {
this.video1 = 0 //初始化显示默认图片
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 && this.dataForm.list.length > 0) {
this.cameraCur = this.dataForm.list[0]
// console.log(this.cameraCur, '---------')
this.camera = this.cameraCur.id
this.video1 = 1
this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post',
data: {
id: this.cameraCur.id,
stationId: this.cameraCur.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3
}
}).then((data) => {
if (data && data.code === 0) {
//视频直播
var src = data.url
//视频连接
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)
try {
this.flvPlayer.load()
// this.flvPlayer.play()
} catch (error) {
console.log(error)
}
})
}
}
})
}
}
})
},
closeQueryDetailVisible() {
this.$emit('closeQ')
},
clickPTZControl(ptz, dwStop, img) {
// console.log(this.camera)
if (
!this.camera ||
(this.cameraCur.type !== 'ece0b8b2db27411886254e81134988a3' &&
(ptz < 11 || ptz > 16))
) {
return
}
if (!isAuth('ol:demo: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.cameraCur.id,
stationId: this.cameraCur.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.cameraCur.addressCode, //ip地址
port: this.cameraCur.port, //端口
username: this.cameraCur.username, //账号
password: this.cameraCur.password, //密码
channel: this.cameraCur.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: {
source: 1,
actionName: this.actionList[ptz],
resourceId: this.cameraCur.id,
stationId: this.stationId,
type: this.cameraCur.type,
result: result
}
}).then((data) => {})
},
cameraChange(id) {
if (id) {
this.camera = id
this.dataForm.list.forEach((res) => {
if (res.id === id) {
this.cameraCur = res
}
})
if (this.flvPlayer) {
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null
}
this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post',
data: {
id: this.cameraCur.id,
stationId: this.cameraCur.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3
}
}).then((data) => {
if (data && data.code === 0) {
//视频直播
var src = data.url
//视频连接
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)
try {
this.flvPlayer.load()
// this.flvPlayer.play()
} catch (error) {
console.log(error)
}
})
}
}
})
}
}
}
}
</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>
src/pages/eq/view/query-detail.vue 0 → 100644
View file @ 042b70f6
<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 class='info-video'>
<video class="video" ref="video" muted autoplay controls></video>
//- <video class="video" :src="videoSrc" 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'>
<div class="quDetailM">
<p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}}</span></p>
</div>
<div class="quDetailM">
<p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}}</p>
</div>
<div class="quDetailM">
<p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}}</p>
</div>
<div class="quDetailM">
<p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}</p>
</div>
<div class="quDetailM">
<p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'正常':'异常'}}</p>
</div>
<div class="quDetailM">
<p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}</p>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { isAuth } from '../../../util'
export default {
computed: {
...mapState('d2admin/user', [
'info'
])
},
data () {
return {
//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,
videoSrc: '',
clickFlag: false,
visible: false,
sysOrgList: [],
dataListSelections: [],
lineList: [],
stationList: [],
typeList: [],
systemList: [],
tierList: [],
dataForm: {
id: 0,
name: '',
type: 1,
lineId: '',
lineName: '',
stationId: localStorage.getItem('stationId'),
stationName: '',
tierId: '',
subSystem: '',
code: '',
subCode: '',
addressCode: '',
port: '',
username: '',
password: '',
remark: '',
status: 1
},
ontclick: 'pointer-events: none;',
flvPlayer: null
}
},
created () {
},
methods: {
init (id, stationId) {
this.visible = true
this.clickFlag = false
this.dataForm.id = id
this.stationId = stationId
this.initResource()
this.dataForm.operatorName = this.info.name
},
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(data.bean.byx2 == 0 && this.flvPlayer){//资源点状态(0=离线，1=在线)
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null
return
}else if(data.bean.byx2 == 0 && !this.flvPlayer){
return
}else if(this.flvPlayer){
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null
}
this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post',
data: {
id: data.bean.id,
stationId: data.bean.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3
}
}).then(data => {
if (data && data.code === 0) {
this.videoSrc = data.url
//视频连接
this.flvPlayer = null
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: this.videoSrc
})
this.$nextTick(function () {
this.flvPlayer.attachMediaElement(this.$refs.video)
this.flvPlayer.load()
})
}
}
})
}
})
},
closeQueryDetailVisible () {
this.$emit('closeQ')
},
clickPTZControl (ptz, dwStop, img) {
if (this.dataForm.type !== 'ece0b8b2db27411886254e81134988a3' && (ptz < 11 || ptz > 16)) {
return
}
if (!isAuth('ol:demo: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.dataForm.id,
stationId: this.dataForm.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.dataForm.addressCode, //ip地址
port: this.dataForm.port, //端口
username: this.dataForm.username, //账号
password: this.dataForm.password, //密码
channel: this.dataForm.byx1, //通道
stream: 'main', //主码流
dwPtzCommand: ptz, //云台控制命令
dwStop: dwStop //云台控制0开始和1结束
}
}).then(data => {
// console.log(11)
// console.log(data)
if (data && data.code === 0) {
if (dwStop == 0) { //云台控制0开始和1结束
this.saveLog(1, ptz)// 执行结果 成功 1 失败 2
this.$message.success(data.msg)
}
} else {
if (dwStop == 0) { //云台控制0开始和1结束
this.saveLog(2, ptz)// 执行结果 成功 1 失败 2
this.$message.error(data.msg)
}
}
})
},
//调用日志保存记录操作指令
saveLog (result, ptz) {
this.$http({
url: this.$http.adornUrlEq('/orVideoMonitor/save'),
method: 'post',
data: {
source: 1,
actionName: this.actionList[ptz],
resourceId: this.dataForm.id,
stationId: this.stationId,
type: this.dataForm.type,
result: result
}
}).then(data => {
})
}
}
}
</script>
<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: 175px;
}
.info-form {
padding: 10px;
}
.info-block {
border: 1px solid #cccccc;
}
.el-select {
width: 100%;
}
.video {
width: 310px;
height: 175px;
}
.animation {
animation: myfirst 1s;
position: absolute;
right: 0;
top: 50px;
width: 330px;
background-color: #f4f4f4;
z-index: 999;
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%;
}
}
}
}
}
</style>
src/router/routes.js
View file @ 042b70f6
......@@ -42,7 +42,8 @@ const frameIn = [
component: layoutHeaderAside,
children: (pre => [
{ path: 'hall', name: `${pre}hall`, component: () => import('@/pages/eq/hall'), meta: { ...meta, title: '候车大厅控制' } },
{ path: 'office', name: `${pre}office`, component: () => import('@/pages/eq/office'), meta: { ...meta, title: '办公区域控制' } }
{ path: 'office', name: `${pre}office`, component: () => import('@/pages/eq/office'), meta: { ...meta, title: '办公区域控制' } },
{ path: 'view', name: `${pre}view`, component: () => import('@/pages/eq/view'), meta: { ...meta, title: '设备概览' } }
])('eq-')
},
......
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