事件详情，区域详情弹窗修改
This commit is contained in:
chenchenzai
parent
547f679b62
commit
ac5fe38c35
|
|
@ -42,7 +42,7 @@ const SuperMap = window.SuperMap || {}
|
|||
let isLocated = true
|
||||
let polylineArr = []
|
||||
let PolygonArr = []
|
||||
/**
|
||||
/**
|
||||
* 地图功能接口类
|
||||
* 说明：该类中的方法带“_”为对外暴露的方法，调用时去掉“_”；不带“_”的为内部方法，不可调用。
|
||||
* @param mapObj {Object} 设置全局参数对象
|
||||
|
|
@ -75,7 +75,7 @@ export function MapFun(mapObj) {
|
|||
* 根据图层名移除图层
|
||||
* @param layerName {String} 图层名
|
||||
*/
|
||||
const _removeLayerByLayerName = function (layerName) {
|
||||
const _removeLayerByLayerName = function(layerName) {
|
||||
const layer = layerGroup.get(layerName)
|
||||
// const feature = featureGroup;
|
||||
// map.popupclose();
|
||||
|
|
@ -96,7 +96,7 @@ export function MapFun(mapObj) {
|
|||
* 清空地图（除去底图）
|
||||
* @private
|
||||
*/
|
||||
const _clearAllLayers = function () {
|
||||
const _clearAllLayers = function() {
|
||||
// debugger;
|
||||
map.closePopup()
|
||||
featureGroup.clearLayers()
|
||||
|
|
@ -106,14 +106,14 @@ export function MapFun(mapObj) {
|
|||
* 关闭所有地图弹窗
|
||||
* @private
|
||||
*/
|
||||
const _closeAllPopup = function (feature) {
|
||||
const _closeAllPopup = function(feature) {
|
||||
map.closePopup()
|
||||
}
|
||||
/**
|
||||
* 添加地图弹窗
|
||||
* @private
|
||||
*/
|
||||
const _openPopup = function (feature) {
|
||||
const _openPopup = function(feature) {
|
||||
// debugger;
|
||||
const elementHtml = createAddressPopup(feature)
|
||||
L.popup({ className: 'epidemic-popup' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
|
|
@ -122,7 +122,7 @@ export function MapFun(mapObj) {
|
|||
* 添加视频监控平台地图弹窗
|
||||
* @private
|
||||
*/
|
||||
const _openPopupVideoSurveillance = function (feature) {
|
||||
const _openPopupVideoSurveillance = function(feature) {
|
||||
// debugger
|
||||
if (feature.type == 'cameraTree') {
|
||||
const elementHtml = createCameraDetailsPop(feature)
|
||||
|
|
@ -134,7 +134,7 @@ export function MapFun(mapObj) {
|
|||
}
|
||||
} else if (feature.type == 'eventList') {
|
||||
const elementHtml = createEventListDetailsPop(feature)
|
||||
L.popup({ className: 'List-Details-pop', offset: [168, 200] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
L.popup({ className: 'Event-List-Details-pop', offset: [168, 200] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else {
|
||||
const elementHtml = createSearchAddressTitlePop(feature)
|
||||
L.popup({ className: 'Address-Title-pop', closeButton: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
|
|
@ -144,7 +144,7 @@ export function MapFun(mapObj) {
|
|||
* 添加道路污染治理弹窗
|
||||
* @private
|
||||
*/
|
||||
const _openPopupRoadGovernance = function (feature) {
|
||||
const _openPopupRoadGovernance = function(feature) {
|
||||
// debugger;
|
||||
const allMapObject = { mapObj: mapObj }
|
||||
const elementHtml = createRoadGovernancePop(feature, allMapObject)
|
||||
|
|
@ -156,7 +156,7 @@ export function MapFun(mapObj) {
|
|||
* 根据图层名数组移除图层
|
||||
* @param layerNameArray {Array} 图层名
|
||||
*/
|
||||
const _removeLayersByLayerNameArray = function (layerNameArray) {
|
||||
const _removeLayersByLayerNameArray = function(layerNameArray) {
|
||||
layerNameArray.forEach((layerName) => {
|
||||
const layer = layerGroup.get(layerName)
|
||||
if (layer) {
|
||||
|
|
@ -173,7 +173,7 @@ export function MapFun(mapObj) {
|
|||
* 根据图层名数组移除图层
|
||||
* @param layerNameArray {Array} 图层名
|
||||
*/
|
||||
const _addMovingMarker = function (arrList) {
|
||||
const _addMovingMarker = function(arrList) {
|
||||
var polyline1 = L.polyline(arrList).addTo(map)
|
||||
var decorator = L.polylineDecorator(polyline1, {
|
||||
patterns: [
|
||||
|
|
@ -222,7 +222,7 @@ export function MapFun(mapObj) {
|
|||
* 根据marker获取弹窗信息，只弹出基本信息（直接弹出）
|
||||
* @param markerGroup {Object} 图层组
|
||||
* */
|
||||
const markerPopup = function (markerGroup) {
|
||||
const markerPopup = function(markerGroup) {
|
||||
const layers = markerGroup._layers
|
||||
for (const index in layers) {
|
||||
const contentHTML = _createPopupConfigInfo(layers[index].options.attribution, layers[index].options.attribution.data)
|
||||
|
|
@ -235,7 +235,7 @@ export function MapFun(mapObj) {
|
|||
* 展示普通图层
|
||||
* @param callBackFun {Function} 回调函数对象
|
||||
*/
|
||||
const _showStaticLayer = function (callBackFun) {
|
||||
const _showStaticLayer = function(callBackFun) {
|
||||
callBackFun()
|
||||
}
|
||||
/**
|
||||
|
|
@ -273,7 +273,7 @@ export function MapFun(mapObj) {
|
|||
* @param layerConfigInfo {Object} 图层配置对象
|
||||
*/
|
||||
function _deleteResourceFeature(UUID, layerConfigInfo) {
|
||||
const authorityFilter = `UUID = '${UUID}'`// 此处需要传参替换
|
||||
const authorityFilter = `UUID = '${UUID}'` // 此处需要传参替换
|
||||
const queryUrl = _mapConfig.config.QUERY_URL
|
||||
const name = layerConfigInfo.layerName
|
||||
const dataSource = name.split('@')
|
||||
|
|
@ -321,7 +321,7 @@ export function MapFun(mapObj) {
|
|||
})
|
||||
L.supermap
|
||||
.queryService(queryUrl)
|
||||
.queryBySQL(sqlParam, function (serviceResult) {
|
||||
.queryBySQL(sqlParam, function(serviceResult) {
|
||||
console.log('serviceResult', serviceResult.result)
|
||||
if (serviceResult.result.recordsets[0].features.features.length === 0) {
|
||||
let marker = {}
|
||||
|
|
@ -396,10 +396,10 @@ export function MapFun(mapObj) {
|
|||
autoPan: true
|
||||
}
|
||||
const layer = L.marker([e.layer._latlng.lat, e.layer._latlng.lng], options).addTo(mapObj.map)
|
||||
layer.on('moveend', function (e) {
|
||||
layer.on('moveend', function(e) {
|
||||
callback(e)
|
||||
})
|
||||
layer.on('click', function (e) {
|
||||
layer.on('click', function(e) {
|
||||
layer.remove()
|
||||
mapObj.drawMarker.enable()
|
||||
})
|
||||
|
|
@ -434,7 +434,7 @@ export function MapFun(mapObj) {
|
|||
// 最大宽度，判断每行字符串，超过按照最大宽度设定
|
||||
let contentWidth = 0
|
||||
// 累加行数，计算每行宽度
|
||||
const calc = function (str) {
|
||||
const calc = function(str) {
|
||||
const tempLength = getDoubleCharCount(str) * 18 + getSingleCharCount(str) * 10
|
||||
if (tempLength >= 450) {
|
||||
contentWidth = 450
|
||||
|
|
@ -489,11 +489,12 @@ export function MapFun(mapObj) {
|
|||
/**
|
||||
* 取消扎点回调
|
||||
*/
|
||||
const resetMarkerCallBack = function () {
|
||||
const resetMarkerCallBack = function() {
|
||||
_removeLayerByLayerName('drawMarkerLayer')
|
||||
layerGroup.delete('drawMarkerLayer')
|
||||
mapObj.drawMarker.enable()
|
||||
}
|
||||
|
||||
function _addImgMaker(latLng, inconConfig) {
|
||||
const icon = MapStyle.featureIcon(inconConfig)
|
||||
const markerLayer = L.marker([latLng.lat, latLng.lng], {
|
||||
|
|
@ -554,7 +555,7 @@ export function MapFun(mapObj) {
|
|||
// 最大宽度，判断每行字符串，超过按照最大宽度设定
|
||||
let contentWidth = 0
|
||||
// 累加行数，计算每行宽度
|
||||
const calc = function (str) {
|
||||
const calc = function(str) {
|
||||
const tempLength = getDoubleCharCount(str) * 18 + getSingleCharCount(str) * 10
|
||||
if (tempLength >= 450) {
|
||||
contentWidth = 450
|
||||
|
|
@ -605,7 +606,7 @@ export function MapFun(mapObj) {
|
|||
} else if (mapType === 'dark') {
|
||||
tileMapUrl = _mapConfig.config.TITLE_LAYER_DARK.mapUrl
|
||||
}
|
||||
mapObj.map.eachLayer(function (layer) {
|
||||
mapObj.map.eachLayer(function(layer) {
|
||||
if (layer.tempIndex === -1) {
|
||||
mapObj.map.removeLayer(layer)
|
||||
L.supermap.tiledMapLayer(tileMapUrl).addTo(mapObj.map)
|
||||
|
|
@ -621,7 +622,7 @@ export function MapFun(mapObj) {
|
|||
const config = _mapConfig.config.TILEDCONFIG[mapType]
|
||||
const layerConfig = { url: config.tiledUrl, name: config.tiledName }
|
||||
const newTileLayer = new L.tileLayer.baidu(layerConfig)
|
||||
mapObj.map.eachLayer(function (layer) {
|
||||
mapObj.map.eachLayer(function(layer) {
|
||||
if (layer.options.tms === true) {
|
||||
mapObj.map.removeLayer(layer)
|
||||
newTileLayer.addTo(mapObj.map)
|
||||
|
|
@ -637,7 +638,7 @@ export function MapFun(mapObj) {
|
|||
* @param callBackInClick {function} 点击图标时执行的函数
|
||||
* @param className {String} 样式字符串
|
||||
*/
|
||||
const _addFeatureArrayOnMap = function (layerName, features, layerConfigInfo, { callBackInClick = null, className = '' } = {}) {
|
||||
const _addFeatureArrayOnMap = function(layerName, features, layerConfigInfo, { callBackInClick = null, className = '' } = {}) {
|
||||
const layers = []
|
||||
features.forEach((feature) => {
|
||||
// 创建marker图层，绑定要素
|
||||
|
|
@ -646,7 +647,7 @@ export function MapFun(mapObj) {
|
|||
attribution: feature
|
||||
})
|
||||
markerLayer.layerConfigInfo = layerConfigInfo
|
||||
markerLayer.on('click', function (e) {
|
||||
markerLayer.on('click', function(e) {
|
||||
const layerConfigInfo = e.sourceTarget.layerConfigInfo
|
||||
const location = [e.latlng.lat, e.latlng.lng]
|
||||
const latlng = L.latLng(location)
|
||||
|
|
@ -681,8 +682,7 @@ export function MapFun(mapObj) {
|
|||
* @param popupType {String} 弹窗类型
|
||||
* @param className {String} class名字
|
||||
*/
|
||||
const _addTheOneFeatureOnMapByPoint = function (layerName, point, data, layerConfigInfo,
|
||||
{ popupFlag = true, popupType = 'general', className = '' } = {}) {
|
||||
const _addTheOneFeatureOnMapByPoint = function(layerName, point, data, layerConfigInfo, { popupFlag = true, popupType = 'general', className = '' } = {}) {
|
||||
// 创建marker图层，绑定要素
|
||||
// debugger;
|
||||
const markerLayer = L.marker(point, { icon: MapStyle.featureIcon(layerConfigInfo) })
|
||||
|
|
@ -707,7 +707,7 @@ export function MapFun(mapObj) {
|
|||
if (popupFlag) {
|
||||
markerLayer.bindPopup(elementHtml, { className: className }).openPopup()
|
||||
} else {
|
||||
markerLayer.on('click', function () {
|
||||
markerLayer.on('click', function() {
|
||||
L.popup({ className: className })
|
||||
.setLatLng(latLng)
|
||||
.setContent(elementHtml)
|
||||
|
|
@ -758,7 +758,7 @@ export function MapFun(mapObj) {
|
|||
const icon = MapStyle.featureIcon(inconConfig)
|
||||
const markerLayer = L.marker(point, { icon: icon })
|
||||
markers.addLayer(markerLayer)
|
||||
markerLayer.on('click', function () {
|
||||
markerLayer.on('click', function() {
|
||||
console.log('积水点播放视频', item)
|
||||
item.indexCode = item.indexCode || item.index_code
|
||||
const params = [item.indexCode]
|
||||
|
|
@ -819,7 +819,7 @@ export function MapFun(mapObj) {
|
|||
layer.setIcon(MapStyle.featureIcon(configInfo, { zoom: map._zoom }))
|
||||
layer.title = layerName
|
||||
layer.configInfo = configInfo
|
||||
layer.on('click', function (e) {
|
||||
layer.on('click', function(e) {
|
||||
// const uuid = e.sourceTarget.feature.properties.UUID;
|
||||
const uuid = e.sourceTarget.feature.properties[_convertCaseOfAttributes('UUID')]
|
||||
const layerConfigInfo = e.sourceTarget.configInfo
|
||||
|
|
@ -896,7 +896,7 @@ export function MapFun(mapObj) {
|
|||
})
|
||||
L.supermap
|
||||
.queryService(queryUrl)
|
||||
.queryBySQL(reservoirParam, function (serviceResult) {
|
||||
.queryBySQL(reservoirParam, function(serviceResult) {
|
||||
// if (serviceResult.result.recordsets[0].features.features.length === 0) {
|
||||
// console.log('未查询到视频');
|
||||
// return;
|
||||
|
|
@ -912,7 +912,7 @@ export function MapFun(mapObj) {
|
|||
// 给查询出的每一个点添加点击弹窗事件
|
||||
// 绑定弹窗事件，实时请求弹窗内容
|
||||
if (getLayerPopupInfo !== null) {
|
||||
layer.on('click', function (e) {
|
||||
layer.on('click', function(e) {
|
||||
const indexCode = e.sourceTarget.feature.properties[_convertCaseOfAttributes('CAMERA_INDEX_CODE')]
|
||||
const layerConfigInfo = e.sourceTarget.configInfo
|
||||
const location = [e.latlng.lat, e.latlng.lng]
|
||||
|
|
@ -969,7 +969,7 @@ export function MapFun(mapObj) {
|
|||
prjCoordSys: prjCoordSys,
|
||||
maxReturn: maxReturn
|
||||
})
|
||||
L.supermap.addressMatchService(_mapConfig.config.POI_URL).code(geoCodeParam, function (addressObj) {
|
||||
L.supermap.addressMatchService(_mapConfig.config.POI_URL).code(geoCodeParam, function(addressObj) {
|
||||
if (outAddressCallBack) {
|
||||
outAddressCallBack(addressObj, param)
|
||||
}
|
||||
|
|
@ -989,12 +989,12 @@ export function MapFun(mapObj) {
|
|||
const type = e.layerType
|
||||
const distancePolylineLayer = e.layer
|
||||
if (type === 'polyline') { // 使用polyline时
|
||||
featureGroup.addLayer(distancePolylineLayer)// 将扎点的图层添加到地图上
|
||||
featureGroup.addLayer(distancePolylineLayer) // 将扎点的图层添加到地图上
|
||||
layerGroup.set('distancePolylineLayer', distancePolylineLayer)
|
||||
const distanceMeasureParam = new SuperMap.MeasureParameters(distancePolylineLayer)
|
||||
L.supermap
|
||||
.measureService(_mapConfig.config.QUERY_URL)
|
||||
.measureDistance(distanceMeasureParam, function (serviceResult) {
|
||||
.measureDistance(distanceMeasureParam, function(serviceResult) {
|
||||
const message = `总距离： ${serviceResult.result.distance.toFixed(4)} 米`
|
||||
const elementHtml = createDistanceAndAreaPopup(message)
|
||||
// const aa = `<div style="width: 300px;background-color: #000000;opacity: 0.8;"><span style="font-size: 16px;font-family: 'Microsoft YaHei';color: #f0fafa;">总距离：${ serviceResult.result.distance} 米</span></div>`
|
||||
|
|
@ -1023,7 +1023,7 @@ export function MapFun(mapObj) {
|
|||
const areaMeasureParam = new SuperMap.MeasureParameters(areaPolygonLayer)
|
||||
L.supermap
|
||||
.measureService(_mapConfig.config.QUERY_URL)
|
||||
.measureArea(areaMeasureParam, function (serviceResult) {
|
||||
.measureArea(areaMeasureParam, function(serviceResult) {
|
||||
const message = `总面积： ${serviceResult.result.area.toFixed(4)} 平方米`
|
||||
const elementHtml = createDistanceAndAreaPopup(message)
|
||||
// const content = '<span style="padding: 10px 20px 10px 10px;display: block;">总面积：' + serviceResult.result.area + '平方米</span>';
|
||||
|
|
@ -1047,7 +1047,7 @@ export function MapFun(mapObj) {
|
|||
console.log(e)
|
||||
const distancePolylineLayer = e.layer
|
||||
if (type === 'polyline') { // 使用polyline时
|
||||
featureGroup.addLayer(distancePolylineLayer)// 将扎点的图层添加到地图上
|
||||
featureGroup.addLayer(distancePolylineLayer) // 将扎点的图层添加到地图上
|
||||
featureGroup.addTo(map)
|
||||
console.log('distancePolylineLayer', distancePolylineLayer)
|
||||
callback(distancePolylineLayer._latlngs)
|
||||
|
|
@ -1143,6 +1143,7 @@ export function MapFun(mapObj) {
|
|||
// featureGroup.addLayer(polyline);
|
||||
// featureGroup.addTo(map);
|
||||
}
|
||||
|
||||
function _removerPolyline() {
|
||||
if (polylineArr && polylineArr.length > 0) {
|
||||
polylineArr.map(item => {
|
||||
|
|
@ -1331,11 +1332,11 @@ export function MapFun(mapObj) {
|
|||
iconSize: [35, 35]
|
||||
})
|
||||
// 进行查找 todo
|
||||
findPathService.findPath(findPathParameter, function (serviceResult) {
|
||||
findPathService.findPath(findPathParameter, function(serviceResult) {
|
||||
console.log('serviceResult', serviceResult)
|
||||
const result = serviceResult.result
|
||||
console.log(result)
|
||||
result.pathList.map(function (result) {
|
||||
result.pathList.map(function(result) {
|
||||
const pathRouteLayer = L.geoJSON(result.route)
|
||||
// const pathGuideLayer = L.geoJSON(result.pathGuideItems, {
|
||||
// pointToLayer: function (geoPoints, latlng) {
|
||||
|
|
@ -1393,11 +1394,11 @@ export function MapFun(mapObj) {
|
|||
parameter: analystParameter
|
||||
})
|
||||
// 进行查找 todo
|
||||
findPathService.findPath(findPathParameter, function (serviceResult) {
|
||||
findPathService.findPath(findPathParameter, function(serviceResult) {
|
||||
console.log('serviceResult', serviceResult)
|
||||
const result = serviceResult.result
|
||||
console.log(result)
|
||||
result.pathList.map(function (result) {
|
||||
result.pathList.map(function(result) {
|
||||
const pathRouteLayer = L.geoJSON(result.route)
|
||||
featureGroup.addLayer(pathRouteLayer)
|
||||
// layerGroup.set('pathRouteLayer', pathRouteLayer);
|
||||
|
|
@ -1416,13 +1417,13 @@ export function MapFun(mapObj) {
|
|||
* @private
|
||||
*/
|
||||
function _addressMatchCodeByAmap(address, { city = '青岛', pageSize = 100, pageIndex = 1, outAddressCallBack = null, param = null } = {}) {
|
||||
AMap.plugin('AMap.PlaceSearch', function () {
|
||||
AMap.plugin('AMap.PlaceSearch', function() {
|
||||
var placeSearch = new AMap.PlaceSearch({
|
||||
city: city,
|
||||
pageSize: pageSize,
|
||||
pageIndex: pageIndex
|
||||
})
|
||||
placeSearch.search(address, function (status, result) {
|
||||
placeSearch.search(address, function(status, result) {
|
||||
console.log(result)
|
||||
if (outAddressCallBack) {
|
||||
outAddressCallBack(result, param)
|
||||
|
|
@ -1442,8 +1443,7 @@ export function MapFun(mapObj) {
|
|||
* @param className {String} 弹窗样式
|
||||
* @private
|
||||
*/
|
||||
function _queryLayersBySql(configInfo,
|
||||
{
|
||||
function _queryLayersBySql(configInfo, {
|
||||
sql = 'SMID >0',
|
||||
callBackFun = null,
|
||||
callBackParams = null,
|
||||
|
|
@ -1469,7 +1469,7 @@ export function MapFun(mapObj) {
|
|||
layer.title = layerName
|
||||
layer.configInfo = configInfo
|
||||
// 绑定弹窗事件，实时请求弹窗内容
|
||||
layer.on('click', function (e) {
|
||||
layer.on('click', function(e) {
|
||||
if (!getLayerPopupInfo) {
|
||||
const uuid = e.sourceTarget.feature.properties[_convertCaseOfAttributes('uuid')]
|
||||
const layerConfigInfo = e.sourceTarget.configInfo
|
||||
|
|
@ -1519,7 +1519,7 @@ export function MapFun(mapObj) {
|
|||
// weightFieldName:_convertCaseOfAttributes('SMLENGTH'),
|
||||
})
|
||||
// 根据仓库图层查询每个仓库与受灾点的最佳路径
|
||||
featureArray.forEach(function (item) {
|
||||
featureArray.forEach(function(item) {
|
||||
const findPathParameter = new SuperMap.FindPathParameters({
|
||||
isAnalyzeById: false,
|
||||
// nodes:[L.point(item.geometry.coordinates[0],item.geometry.coordinates[1]), L.point(disasterPoint[0], disasterPoint[1])],
|
||||
|
|
@ -1528,7 +1528,7 @@ export function MapFun(mapObj) {
|
|||
})
|
||||
|
||||
// 进行查找
|
||||
findPathService.findPath(findPathParameter, function (serviceResult) {
|
||||
findPathService.findPath(findPathParameter, function(serviceResult) {
|
||||
callBackFun(serviceResult, item)
|
||||
})
|
||||
})
|
||||
|
|
@ -1570,7 +1570,7 @@ export function MapFun(mapObj) {
|
|||
parameter: analystParameter
|
||||
})
|
||||
// 进行查找
|
||||
findPathService.findPath(findPathParameter, function (serviceResult) {
|
||||
findPathService.findPath(findPathParameter, function(serviceResult) {
|
||||
callBackFun(serviceResult, item, params)
|
||||
})
|
||||
}
|
||||
|
|
@ -1610,10 +1610,10 @@ export function MapFun(mapObj) {
|
|||
* @param layerConfigInfo {Object} 图层配置信息
|
||||
* @param getDispatchResourcePopupInfo
|
||||
*/
|
||||
const _addResourceCannibalizeDataOnMap = function (layerName, storageList, layerConfigInfo, goodsDispatchId, { getDispatchResourcePopupInfo = null } = {}) {
|
||||
const _addResourceCannibalizeDataOnMap = function(layerName, storageList, layerConfigInfo, goodsDispatchId, { getDispatchResourcePopupInfo = null } = {}) {
|
||||
const markerLayers = []
|
||||
// 创建marker图层，绑定弹窗内容
|
||||
storageList.forEach(function (item) {
|
||||
storageList.forEach(function(item) {
|
||||
const point = [Number(item.resourceStorage.smy), Number(item.resourceStorage.smx)]
|
||||
const marker = L.marker(point, {
|
||||
icon: MapStyle.featureIcon(layerConfigInfo),
|
||||
|
|
@ -1621,7 +1621,7 @@ export function MapFun(mapObj) {
|
|||
})
|
||||
marker.layerConfigInfo = layerConfigInfo
|
||||
marker.goodsDispatchId = goodsDispatchId
|
||||
marker.on('click', function (e) {
|
||||
marker.on('click', function(e) {
|
||||
const layerConfigInfo = e.sourceTarget.layerConfigInfo
|
||||
const goodsDispatchId = e.sourceTarget.goodsDispatchId
|
||||
const location = [e.latlng.lat, e.latlng.lng]
|
||||
|
|
@ -1645,6 +1645,7 @@ export function MapFun(mapObj) {
|
|||
featureGroup.addLayer(markerGroup)
|
||||
layerGroup.set(layerName, markerGroup)
|
||||
}
|
||||
|
||||
function _replaceMarkerIcon(layerName, uuid, iconUrl = '/src/supermap/image/poi.png', iconSize = [74, 74]) {
|
||||
const layers = layerGroup.get(layerName).getLayers()
|
||||
layers.forEach(layer => {
|
||||
|
|
@ -1659,10 +1660,10 @@ export function MapFun(mapObj) {
|
|||
* @param layerName {String}图层名字
|
||||
* @param storageList {Array} 调拨的仓库数组
|
||||
*/
|
||||
const _addResourceCannibalizeRoadPathOnMap = function (layerName, storageList) {
|
||||
const _addResourceCannibalizeRoadPathOnMap = function(layerName, storageList) {
|
||||
const roadPath = []
|
||||
storageList.forEach(function (item) {
|
||||
item.roadPathList.forEach(function (road) {
|
||||
storageList.forEach(function(item) {
|
||||
item.roadPathList.forEach(function(road) {
|
||||
const roadLayer = L.geoJSON(road.route)
|
||||
roadPath.push(roadLayer)
|
||||
})
|
||||
|
|
@ -1678,10 +1679,10 @@ export function MapFun(mapObj) {
|
|||
* @return {*} 创建的图标，用来删除
|
||||
* @private
|
||||
*/
|
||||
const _addPointOnMap = function (paramObject) {
|
||||
const _addPointOnMap = function(paramObject) {
|
||||
return addPointOnMap(paramObject, mapObj, featureGroup, layerGroup)
|
||||
}
|
||||
const _addResourceOnMapWithoutSuperMapCluster = function (
|
||||
const _addResourceOnMapWithoutSuperMapCluster = function(
|
||||
features, url, layerName, createPopupFun) {
|
||||
console.log('_addResourceOnMapWithoutSuperMapCluster===============>', features, url, layerName, createPopupFun)
|
||||
// 如果资源要素数量为0，则说明该种资源没有记录
|
||||
|
|
@ -1704,11 +1705,12 @@ export function MapFun(mapObj) {
|
|||
layers = createMarkerClusterLayer()
|
||||
const icon = createDefaultFeatureStyle({
|
||||
img: url,
|
||||
iconSize: url == 'poi-event.png'?[40,40]:[36, 36]
|
||||
iconSize: url == 'poi-event.png' ? [40, 40] : [36, 36]
|
||||
})
|
||||
features.map(feature => {
|
||||
var bounds = map.getBounds()
|
||||
// console.log("看看有没有坐标",feature.latLng);
|
||||
debugger
|
||||
if (layerName == '全部' ? feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng)) : feature.hasOwnProperty('latLng')) {
|
||||
const marker = L.marker(feature.latLng, { icon })
|
||||
if (createPopupFun !== null) {
|
||||
|
|
@ -1781,7 +1783,7 @@ export function MapFun(mapObj) {
|
|||
// layerGroup.set(layerName, layers)
|
||||
// })
|
||||
}
|
||||
const _addPointTestOnMap = function (
|
||||
const _addPointTestOnMap = function(
|
||||
features, url, layerName, createPopupFun) {
|
||||
|
||||
let layers = null
|
||||
|
|
@ -1827,7 +1829,7 @@ export function MapFun(mapObj) {
|
|||
/**
|
||||
* 点击展示弹窗
|
||||
*/
|
||||
const _addPopOnMap = function (
|
||||
const _addPopOnMap = function(
|
||||
feature, url, layerName, createPopupFun) {
|
||||
console.log('addPopOnMap===============>', feature, url, layerName, createPopupFun, map)
|
||||
let layers = null
|
||||
|
|
@ -1863,7 +1865,7 @@ export function MapFun(mapObj) {
|
|||
* @returns {Promise<any>}
|
||||
* @private
|
||||
*/
|
||||
const _createPromiseByQueryService = function (idArray, layerConfigInfo, type) {
|
||||
const _createPromiseByQueryService = function(idArray, layerConfigInfo, type) {
|
||||
return createPromiseByQueryService(idArray, layerConfigInfo, type)
|
||||
}
|
||||
|
||||
|
|
@ -1873,31 +1875,31 @@ export function MapFun(mapObj) {
|
|||
* @return {*}
|
||||
* @private
|
||||
*/
|
||||
const _addResourceOnMap = function (paramObject) {
|
||||
const _addResourceOnMap = function(paramObject) {
|
||||
return addResourceOnMap(paramObject, mapObj, featureGroup, layerGroup)
|
||||
}
|
||||
const _addResourceOnMapNew = function (features, config, getLayerPopupInfo, createPopupFun) {
|
||||
const _addResourceOnMapNew = function(features, config, getLayerPopupInfo, createPopupFun) {
|
||||
return addResourceOnMapNew(features, config, getLayerPopupInfo, createPopupFun, mapObj, featureGroup, layerGroup)
|
||||
}
|
||||
const _getLayerPopupInfo = function (uuid, layerConfigInfo, type, latLng, createPopupFun, getLayerPopupInfo, popupClassName) {
|
||||
const _getLayerPopupInfo = function(uuid, layerConfigInfo, type, latLng, createPopupFun, getLayerPopupInfo, popupClassName) {
|
||||
return myGetLayerPopupInfo(uuid, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, popupClassName)
|
||||
}
|
||||
const _addResourceOnMapWithoutSuperMap = function (features, url, layerName, createPopupFun, WS) {
|
||||
const _addResourceOnMapWithoutSuperMap = function(features, url, layerName, createPopupFun, WS) {
|
||||
// console.log('这里的数据', features);
|
||||
// debugger;
|
||||
return addResourceOnMapWithoutSuperMap(features, url, layerName, createPopupFun, WS, featureGroup, layerGroup, map)
|
||||
}
|
||||
const _addPointsToMap = function (features, url, layerName, createPopupFun, WS) {
|
||||
const _addPointsToMap = function(features, url, layerName, createPopupFun, WS) {
|
||||
// console.log('这里的数据', features);
|
||||
// debugger;
|
||||
return addPointsToMap(features, url, layerName, createPopupFun, WS, featureGroup, layerGroup, map)
|
||||
}
|
||||
const _addResourceOnMapWithoutSuper = function (features, url, layerName, createPopupFun, WS) {
|
||||
const _addResourceOnMapWithoutSuper = function(features, url, layerName, createPopupFun, WS) {
|
||||
// console.log('这里的数据', features);
|
||||
// debugger;
|
||||
return addResourceOnMapWithoutSuper(features, url, layerName, createPopupFun, WS, featureGroup, layerGroup, map)
|
||||
}
|
||||
const _addPolygonToMap = function (a, b, c, d) {
|
||||
const _addPolygonToMap = function(a, b, c, d) {
|
||||
var polygon = L.polygon([
|
||||
a,
|
||||
b,
|
||||
|
|
@ -1910,14 +1912,14 @@ export function MapFun(mapObj) {
|
|||
})
|
||||
featureGroup.addLayer(polygon)
|
||||
}
|
||||
const _addNameToMap = function (config) {
|
||||
const _addNameToMap = function(config) {
|
||||
// you can set .my-div-icon styles in CSS
|
||||
config.map(item => {
|
||||
var myIcon = L.divIcon({ html: item.name })
|
||||
L.marker([item.latLng.lng, item.latLng.lat], { icon: myIcon }).addTo(mapObj.map)
|
||||
})
|
||||
}
|
||||
const _addMountainToMap = function (config) {
|
||||
const _addMountainToMap = function(config) {
|
||||
// you can set .my-div-icon styles in CSS
|
||||
const myIcon = L.icon({
|
||||
iconUrl: '/src/supermap/image/mountain.png',
|
||||
|
|
@ -1927,7 +1929,7 @@ export function MapFun(mapObj) {
|
|||
L.marker([item.latLng.lat, item.latLng.lng], { icon: myIcon, title: item.name }).addTo(mapObj.map)
|
||||
})
|
||||
}
|
||||
const _addMountainLayerToMap = function (config) {
|
||||
const _addMountainLayerToMap = function(config) {
|
||||
var myStyle = {
|
||||
color: 'green',
|
||||
weight: 2,
|
||||
|
|
@ -1951,24 +1953,23 @@ export function MapFun(mapObj) {
|
|||
// L.marker([item.latLng.lng, item.latLng.lat], { icon: myIcon }).addTo(mapObj.map);
|
||||
// });
|
||||
}
|
||||
const _addCircleToMap = function (latLng, r) {
|
||||
const _addCircleToMap = function(latLng, r) {
|
||||
// L.circle([latLng.lat, latLng.lng], { radius: r }).addTo(mapObj.map)
|
||||
const polygon = L.circle([latLng.lat, latLng.lng], { radius: r })
|
||||
polygon.addTo(map)
|
||||
PolygonArr.push(polygon)
|
||||
}
|
||||
const _mapPainyEnable = function () {
|
||||
const _mapPainyEnable = function() {
|
||||
map.MapPaint.enable()
|
||||
map.addControl(new MapPaint.SwitchControl())
|
||||
}
|
||||
// 热力图
|
||||
const _thermodynamic = function (latLng, r, type) {
|
||||
const _thermodynamic = function(latLng, r, type) {
|
||||
// const layers = []
|
||||
// latLng, r, strong
|
||||
const thermodynamic = latLng
|
||||
const heatLayer = L.heatLayer(
|
||||
thermodynamic,
|
||||
{
|
||||
thermodynamic, {
|
||||
radius: r,
|
||||
minOpacity: 0.4,
|
||||
blur: 10,
|
||||
|
|
@ -1981,7 +1982,7 @@ export function MapFun(mapObj) {
|
|||
layerGroup.set(type, heatLayer)
|
||||
// debugger
|
||||
}
|
||||
const _addPathToMap = function (latLng, color) {
|
||||
const _addPathToMap = function(latLng, color) {
|
||||
// console.log(latLng)
|
||||
// debugger
|
||||
const polyline = L.polyline(latLng, { color: color })
|
||||
|
|
@ -1990,7 +1991,7 @@ export function MapFun(mapObj) {
|
|||
polylineArr.push(polyline)
|
||||
}
|
||||
|
||||
const _addAreaToMap = function (latLng) {
|
||||
const _addAreaToMap = function(latLng) {
|
||||
// console.log(latLng)
|
||||
// debugger
|
||||
const polygon = L.polygon(latLng, { color: 'red' })
|
||||
|
|
@ -2072,6 +2073,6 @@ export function MapFun(mapObj) {
|
|||
thermodynamic: _thermodynamic,
|
||||
addPathToMap: _addPathToMap,
|
||||
addPointTestOnMap: _addPointTestOnMap,
|
||||
addAreaToMap:_addAreaToMap,
|
||||
addAreaToMap: _addAreaToMap,
|
||||
}
|
||||
}
|
||||
|
|
@ -2,17 +2,49 @@
|
|||
<div class="pop-box">
|
||||
<div class="title-bg"></div>
|
||||
<div class="title">
|
||||
<span>重点区域详情</span>
|
||||
</div>
|
||||
<div class="site-base-information">
|
||||
<div class="item">
|
||||
<p>
|
||||
<span>区域名称：</span>
|
||||
<span>{{ feature.data.areaName || "" }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>位置：</span>
|
||||
<span>{{ feature.data.location || "" }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>
|
||||
<span>管理单位：</span>
|
||||
<span>{{ feature.data.management || "" }}</span>
|
||||
</p>
|
||||
<p class="left-mid-line" style="text-overflow: ellipsis;white-space: nowrap;width: 100px;overflow: hidden;">
|
||||
<span>区域简介：</span>
|
||||
<span>{{ getAbout(feature.data.about)}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>
|
||||
<span>负责人：</span>
|
||||
<span>张三</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>联系方式：</span>
|
||||
<span>13360907765</span>
|
||||
</p></div>
|
||||
</div>
|
||||
<div class="site-address">{{ feature.data.location || "" }}</div>
|
||||
<div class="site-content">
|
||||
<div class="site-content-left">
|
||||
<div>
|
||||
<div>管理单位：{{ feature.data.management || "" }}</div>
|
||||
<el-tooltip :content="feature.data.about">
|
||||
<div class="left-mid-line" style="text-overflow:ellipsis">景区简介：{{ getAbout(feature.data.about)}}</div>
|
||||
</el-tooltip>
|
||||
<div class="site-content-title">
|
||||
<div v-for="(item, index) in menuList" :key="index">
|
||||
<div class="item" :class="selectedIndex == index ? 'is-active' : ''" @click="handleCheck(item,index)">
|
||||
<span>{{item.menuName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-content" v-show="selectedIndex == 0">
|
||||
<div class="site-content-left">
|
||||
<div class="area-content-left-top">
|
||||
<div>
|
||||
<div>当前人数</div>
|
||||
|
|
@ -26,20 +58,6 @@
|
|||
<div>外地人数</div>
|
||||
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
|
||||
</div>
|
||||
<!-- <div class="noise">
|
||||
<img src="../../../../assets/construction/noise.png" alt="">
|
||||
<div>
|
||||
<p>噪声</p>
|
||||
<p><span>{{ feature.data.noice || "" }}</span>dB</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="raise-dust">
|
||||
<img src="../../../../assets/construction/raiseDust.png" alt="">
|
||||
<div>
|
||||
<p>扬尘</p>
|
||||
<p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="site-content-left-bottom">
|
||||
<div class="filter-btn-typeSelect">
|
||||
|
|
@ -54,26 +72,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="site-content-right">
|
||||
<!-- <div
|
||||
class="images"
|
||||
v-viewer="{movable: false}"
|
||||
style="
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
<img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
|
||||
</div> -->
|
||||
<div class="images img-container">
|
||||
<!-- <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl[0]" :preview-src-list="feature.data.picUrl" alt="" /> -->
|
||||
<el-image v-if="this.picUrl" style="width:100%;height:100%;" :src="this.picUrl" :preview-src-list="[this.picUrl]" alt="" />
|
||||
<span v-else>暂无图片</span>
|
||||
<div class="people-total">
|
||||
<div class="total-num">
|
||||
<span>月累计人数：</span>
|
||||
<span>123112</span>
|
||||
</div>
|
||||
<div class="year-on-year">
|
||||
<span>月累计同比：</span>
|
||||
<span>-1.5%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-table">
|
||||
<h4>周边监控</h4>
|
||||
<h4>人员聚集明细</h4>
|
||||
<el-table
|
||||
:data="cameraData"
|
||||
:data="personnelAggregationData"
|
||||
@row-click="openVideo"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
|
|
@ -87,9 +99,141 @@
|
|||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
>
|
||||
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
||||
<el-table-column align="center" width="70" label="人流量" type="index" style="text-align: center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cameraName" label="时间" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-content" v-show="selectedIndex == 1">
|
||||
<div class="site-content-left">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
suffix-icon="el-icon-search"
|
||||
v-model="labelSearch"
|
||||
@input="searchCameraTree"
|
||||
>
|
||||
</el-input>
|
||||
<el-tree
|
||||
v-show="cameraTreeIsShow"
|
||||
id="tree"
|
||||
:data="cameraTree"
|
||||
:props="{label:'name',children:'children',isLeaf:'leaf',}"
|
||||
:load="loadNode"
|
||||
node-key="id"
|
||||
@node-click="treeCameraClick"
|
||||
empty-text="暂无数据"
|
||||
:filter-node-method="filterNode"
|
||||
lazy>
|
||||
<!-- 是否离线checkStatus -->
|
||||
<!-- <span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
|
||||
<!-- <span>{{ data.channelName || '' }}</span> -->
|
||||
<!-- </span> -->
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="site-content-right">
|
||||
右
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-people" v-show="selectedIndex == 2">
|
||||
<div class="table-filter">
|
||||
<span class="span-text">姓名:</span>
|
||||
<el-input
|
||||
placeholder="请输入人员姓名"
|
||||
prefix-icon="el-icon-search"
|
||||
@input="handleSearch"
|
||||
v-model="searchNameValue"
|
||||
>
|
||||
</el-input>
|
||||
<span class="span-text">人员类型:</span>
|
||||
<el-select v-model="selectTypeValue" placeholder="全部">
|
||||
<el-option
|
||||
v-for="item in peopleTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button @click="handleSearch()">查询</el-button>
|
||||
</div>
|
||||
<div class="people-table">
|
||||
<el-table
|
||||
:data="peopleDataResource"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
'background-color': '#18304c',
|
||||
}"
|
||||
:header-cell-style="{
|
||||
color: '#1ffefd',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="name" label="姓名" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="peopleType" label="人员类型" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="department" label="所属单位">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="sex" label="性别">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="telePhone" label="电话号码">
|
||||
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-facilities" v-show="selectedIndex == 3">
|
||||
<div class="table-filter">
|
||||
<span class="span-text">设施类型:</span>
|
||||
<el-select v-model="selectedFacilitiesType" placeholder="全部">
|
||||
<el-option
|
||||
v-for="item in facilitiesTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<span class="span-text" style="margin-left:10px">位置：</span>
|
||||
<el-input
|
||||
placeholder="请输入位置"
|
||||
prefix-icon="el-icon-search"
|
||||
@input="handleSearch"
|
||||
v-model="addressValue"
|
||||
>
|
||||
</el-input>
|
||||
<el-button @click="handleSearch()">查询</el-button>
|
||||
</div>
|
||||
<div class="facilities-table">
|
||||
<el-table
|
||||
:data="facilitiesDataResource"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
'background-color': '#18304c',
|
||||
}"
|
||||
:header-cell-style="{
|
||||
color: '#1ffefd',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="facilitiesType" label="设施类型" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="位置" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="manageMan" label="管理人员">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="telePhone" label="电话号码">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -102,6 +246,7 @@ import 'viewerjs/dist/viewer.css'
|
|||
import { directive as viewer } from "v-viewer"
|
||||
import * as echarts from 'echarts'
|
||||
import { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js'
|
||||
import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index'
|
||||
export default {
|
||||
name: "",
|
||||
props: {
|
||||
|
|
@ -113,6 +258,7 @@ export default {
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
this.weekData.time.unshift(item.pushTime)
|
||||
|
|
@ -122,6 +268,8 @@ export default {
|
|||
this.chartData = this.weekData
|
||||
this.initCharts()
|
||||
})
|
||||
})
|
||||
|
||||
selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
this.monthData.time.unshift(item.pushTime)
|
||||
|
|
@ -139,14 +287,32 @@ export default {
|
|||
})
|
||||
}
|
||||
})
|
||||
getCameraAllLabel().then((res) => {
|
||||
this.tabList = res.data.data
|
||||
});
|
||||
getCameraAll().then((res) => {
|
||||
this.cameraAllData = res.data
|
||||
// this.addResourceTomap('cameraAll',res.data);
|
||||
})
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.cameraTree = res.data.data
|
||||
console.log(this.cameraTree)
|
||||
res.data.data.forEach((item) => {
|
||||
this.cameraTreeSingle.push({
|
||||
channelName: item.name,
|
||||
children: []
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterButton:{
|
||||
typeSelect:['近7天','近30天',],
|
||||
typeSelectActive:'近7天',
|
||||
typeSelect:['当天人流量','近30天人流量',],
|
||||
typeSelectActive:'当天人流量',
|
||||
},
|
||||
cameraData: [],
|
||||
personnelAggregationData:[],
|
||||
weekData:{
|
||||
time:[],
|
||||
local:[],
|
||||
|
|
@ -158,7 +324,30 @@ export default {
|
|||
outer:[],
|
||||
},
|
||||
chartData:{},
|
||||
picUrl: ''
|
||||
picUrl: '',
|
||||
selectedIndex:0,
|
||||
menuList:[{
|
||||
menuName:"人流量",
|
||||
},{
|
||||
menuName:"视频监控",
|
||||
},{
|
||||
menuName:"人员",
|
||||
},{
|
||||
menuName:"设施",
|
||||
}],
|
||||
peopleTypeOption:[{label:"人员类型",value:"1"}],
|
||||
peopleDataResource:[{name:"张三",peopleType:"普通",department:"市政府",sex:"男",telePhone:"1334650987"}],
|
||||
searchNameValue:"",//查询姓名
|
||||
selectTypeValue:"",//人员类型
|
||||
addressValue:"",//位置
|
||||
selectedFacilitiesType:"",//设施类型
|
||||
facilitiesTypeOption:[{label:"设施类型",value:"1"}],
|
||||
facilitiesDataResource:[{facilitiesType:"设施类型1",address:"李沧",manageMan:"张山",telePhone:"1334650987"}],
|
||||
cameraAllData:[],
|
||||
cameraTreeIsShow:true,
|
||||
cameraTreeSingle: [],
|
||||
checkStatus: '2',
|
||||
cameraTree:[],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -306,6 +495,121 @@ export default {
|
|||
const viewer = this.$el.querySelector('.images').$viewer
|
||||
viewer.show()
|
||||
},
|
||||
//点击上部Tab底部显示不同的内容
|
||||
handleCheck(item,index){
|
||||
this.selectedIndex = index;
|
||||
},
|
||||
//点击查询按钮查询列表数据
|
||||
handleSearch(){
|
||||
if(this.selectedIndex ==2){
|
||||
console.log('人员类型',this.selectTypeValue);
|
||||
//this.peopleDataResource();
|
||||
}else if(this.selectedIndex ==3){
|
||||
console.log('位置',this.selectedFacilitiesType);
|
||||
//this.peopleDataResource();
|
||||
}
|
||||
},
|
||||
searchLabel(value) {
|
||||
const params = {
|
||||
labelName:value
|
||||
}
|
||||
selectByLabelName(params).then((res) => {
|
||||
console.log(res)
|
||||
this.tabList = res.data.data
|
||||
})
|
||||
},
|
||||
searchCameraTree(value) {
|
||||
if(value.length > 0){
|
||||
const params = {
|
||||
channelName:value
|
||||
}
|
||||
selectByChannelName(params).then((res) => {
|
||||
console.log(res)
|
||||
this.cameraTree = []
|
||||
res.data.data.forEach((item) => {
|
||||
this.cameraTree.push({
|
||||
name: item.channelName,
|
||||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
channelCode:item.channelCode,
|
||||
leaf:true,
|
||||
})
|
||||
})
|
||||
})
|
||||
}else {
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.cameraTree = res.data.data
|
||||
})
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.checkboxGroup = []
|
||||
this.checkStatus = "2";
|
||||
this.cameraTreeIsShow = true
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.cameraTree = res.data.data
|
||||
})
|
||||
document.getElementById("tree").scrollTop = 0;
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
// if (node.level === 0) {
|
||||
// return resolve([{ name: 'region' }]);
|
||||
// }
|
||||
console.log(node)
|
||||
if (node.level > 0) {
|
||||
let subData = []
|
||||
getCameraAllOrgan({parentId:node.data.id}).then((res) => {
|
||||
if(res.data.data.length == 0){
|
||||
const params = {
|
||||
parentId:node.data.id,
|
||||
checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus,
|
||||
}
|
||||
getCameraByParentId(params).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
subData.push({
|
||||
name: item.channelName,
|
||||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
channelCode:item.channelCode,
|
||||
checkStatus:item.checkStatus,
|
||||
leaf:true,
|
||||
})
|
||||
})
|
||||
return resolve(subData);
|
||||
})
|
||||
}else{
|
||||
subData = res.data.data
|
||||
return resolve(subData);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
treeCameraClick(data) {
|
||||
console.log(data)
|
||||
if(data.channelCode){
|
||||
const cameraTree = [{
|
||||
latLng: { lat: data.gpsY, lng: data.gpsX },
|
||||
data: data,
|
||||
type:'cameraTree'
|
||||
}]
|
||||
this.$parent.hiMapFun.removeLayerByLayerName("cameraTree");
|
||||
this.$parent.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
|
||||
const arr = [0,0.0,'','0','0.0']
|
||||
if(arr.indexOf(data.gpsX) == -1){
|
||||
this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
|
||||
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
|
||||
}
|
||||
}
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (value == "2") return true;
|
||||
if (value == "0") {
|
||||
return data.checkStatus == 0;
|
||||
}
|
||||
if (value == "1") {
|
||||
return data.checkStatus == 1;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
|
|
@ -325,8 +629,8 @@ export default {
|
|||
border: 1px solid rgba(50,227,235,.95);
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
width: 734px !important;
|
||||
height: 453px;
|
||||
width: 750px !important;
|
||||
height: 500px;
|
||||
padding: 12px 16px;
|
||||
.pop-box {
|
||||
width: 100%;
|
||||
|
|
@ -345,6 +649,9 @@ export default {
|
|||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
span:nth-child(1) {
|
||||
font-weight:bold;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
|
|
@ -358,18 +665,68 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.site-address {
|
||||
.site-base-information{
|
||||
height: 90px;
|
||||
margin: 6px 0;
|
||||
padding-left: 20px;
|
||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
padding: 10px;
|
||||
//line-height: 26px;
|
||||
.item{
|
||||
width: 100%;
|
||||
height:20px;
|
||||
//background-color: red;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&>p{
|
||||
margin: 0 !important;
|
||||
width:50%;
|
||||
flex:1;
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
}
|
||||
.item:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.site-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.site-content-title{
|
||||
width:100%;
|
||||
height:30px;
|
||||
//background-color:red;
|
||||
border-bottom:solid 1px #fff ;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item{
|
||||
padding-top: 5px;
|
||||
margin-left: 2px;
|
||||
//flex:1;
|
||||
height:30px;
|
||||
width:100px;
|
||||
text-align: center;
|
||||
//background: #abcdef;
|
||||
line-height: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.is-active{
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
.site-content-content{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top: 10px;
|
||||
.site-content-left {
|
||||
width: 392px;
|
||||
margin-right: 29px;
|
||||
width: 372px;
|
||||
margin-right: 15px;
|
||||
height: 310px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
.left-mid-line {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
|
@ -415,10 +772,88 @@ export default {
|
|||
width: 100%;
|
||||
height: 206px;
|
||||
}
|
||||
}
|
||||
.el-input {
|
||||
width: 328px;
|
||||
}
|
||||
.el-input__inner {
|
||||
border: 1px solid rgba(31,254,253,.9);
|
||||
color: #fff;
|
||||
border-radius: unset;
|
||||
background: rgba($color: #203b5d, $alpha: .8);
|
||||
&::placeholder {
|
||||
color: rgba($color: #fff, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
.el-input__prefix {
|
||||
color: rgba(31,254,253,.9);
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
height: 316px;
|
||||
width: 372px;
|
||||
overflow-y: auto;
|
||||
margin-top: 6px;
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
.el-checkbox-button {
|
||||
border-radius: 15px;
|
||||
margin: 10px;
|
||||
.el-checkbox-button__inner {
|
||||
height: 30px;
|
||||
line-height: 6px;
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(0deg, rgba($color: #24517b, $alpha: 1) 0, rgba($color: #24517b, $alpha: 0) 100%);
|
||||
border: 1px solid #1d98a0;
|
||||
font-size: 16px;
|
||||
color: #1ffefd;
|
||||
}
|
||||
.el-checkbox-button__inner:hover {
|
||||
border: 1px solid #1ffefd;
|
||||
background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
|
||||
}
|
||||
}
|
||||
.el-checkbox-button.is-checked {
|
||||
.el-checkbox-button__inner{
|
||||
color: #fff;
|
||||
border: 1px solid #1ffefd;
|
||||
background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
width: 366px;
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
background: rgba(27,255,255,.2);
|
||||
}
|
||||
.el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: rgba(27,255,255,.2);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-content-right {
|
||||
width: 280px;
|
||||
width: 400px;
|
||||
.img-container {
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
|
|
@ -427,6 +862,22 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.people-total{
|
||||
width: 310px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
.year-on-year{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.video-table {
|
||||
margin-top: 20px;
|
||||
h4 {
|
||||
|
|
@ -460,6 +911,176 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.table-filter{
|
||||
width:100%;
|
||||
height:30px;
|
||||
//background-color: red;
|
||||
//text-align: center;
|
||||
display: flex;
|
||||
justify-content: "space-between";
|
||||
width:700px;
|
||||
margin-top: 10px;
|
||||
.span-text{
|
||||
line-height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-input {
|
||||
width: 200px;
|
||||
}
|
||||
.el-input__inner {
|
||||
width: 160px;
|
||||
height: 30px;
|
||||
padding-left:5px;
|
||||
border: 1px solid rgba(31,254,253,.9);
|
||||
color: #fff;
|
||||
background: rgba($color: #203b5d, $alpha: .8);
|
||||
border-radius: unset;
|
||||
&::placeholder {
|
||||
color: rgba($color: #fff, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
.el-input__prefix {
|
||||
color: rgba(31,254,253,.9);
|
||||
left: 130px;
|
||||
i{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
//width:160px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
// margin-left: 10px;
|
||||
.el-input {
|
||||
width: 160px;
|
||||
}
|
||||
.el-input__suffix-inner{
|
||||
i{line-height: 30px;}
|
||||
}
|
||||
}
|
||||
.el-button{
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
//height: 30px;
|
||||
line-height: 0;
|
||||
background-color: #1fa2fe;
|
||||
border:solid 1px #1fa2fe ;
|
||||
color:#ffffff;
|
||||
}
|
||||
}
|
||||
.site-content-people {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.people-table{
|
||||
margin-top: 10px;
|
||||
.el-table {
|
||||
border: 1px solid #325d94;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
th,td {
|
||||
border-right: 1px solid #325d94 !important;
|
||||
}
|
||||
// .descending.is-leaf.is-sortable {
|
||||
// .sort-caret {
|
||||
// border-top-color: #1dfeff;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.cell {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.el-table th.is-leaf {
|
||||
border: 1px solid #1f557c;
|
||||
}
|
||||
.el-table td {
|
||||
border: 0;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.el-table th {
|
||||
padding: 5px 0;
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table__row:nth-of-type(even) > td {
|
||||
background-color: #113660 !important;
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.site-content-facilities {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.facilities-table{
|
||||
margin-top: 10px;
|
||||
.el-table {
|
||||
border: 1px solid #325d94;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
th,td {
|
||||
border-right: 1px solid #325d94 !important;
|
||||
}
|
||||
// .descending.is-leaf.is-sortable {
|
||||
// .sort-caret {
|
||||
// border-top-color: #1dfeff;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.cell {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.el-table th.is-leaf {
|
||||
border: 1px solid #1f557c;
|
||||
}
|
||||
.el-table td {
|
||||
border: 0;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.el-table th {
|
||||
padding: 5px 0;
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table__row:nth-of-type(even) > td {
|
||||
background-color: #113660 !important;
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,511 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="title-bg"></div>
|
||||
<div class="title">
|
||||
<span>{{ feature.data.areaName || "" }}</span>
|
||||
</div>
|
||||
<div class="site-address">{{ feature.data.location || "" }}</div>
|
||||
<div class="site-content">
|
||||
<div class="site-content-left">
|
||||
<div>
|
||||
<div>管理单位：{{ feature.data.management || "" }}</div>
|
||||
<el-tooltip :content="feature.data.about">
|
||||
<div class="left-mid-line" style="text-overflow:ellipsis">景区简介：{{ getAbout(feature.data.about)}}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="area-content-left-top">
|
||||
<div>
|
||||
<div>当前人数</div>
|
||||
<div>{{ feature.data.allNums || "0" }}人</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>本地人数</div>
|
||||
<div>{{ feature.data.localNums || "0" }}人</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>外地人数</div>
|
||||
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
|
||||
</div>
|
||||
<!-- <div class="noise">
|
||||
<img src="../../../../assets/construction/noise.png" alt="">
|
||||
<div>
|
||||
<p>噪声</p>
|
||||
<p><span>{{ feature.data.noice || "" }}</span>dB</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="raise-dust">
|
||||
<img src="../../../../assets/construction/raiseDust.png" alt="">
|
||||
<div>
|
||||
<p>扬尘</p>
|
||||
<p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="site-content-left-bottom">
|
||||
<div class="filter-btn-typeSelect">
|
||||
<div class="typeSelect-btn"
|
||||
v-for="item in filterButton.typeSelect"
|
||||
:key="item"
|
||||
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
|
||||
@click="typeSelect(item)"
|
||||
>{{item}}</div>
|
||||
</div>
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-right">
|
||||
<!-- <div
|
||||
class="images"
|
||||
v-viewer="{movable: false}"
|
||||
style="
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
<img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
|
||||
</div> -->
|
||||
<div class="images img-container">
|
||||
<!-- <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl[0]" :preview-src-list="feature.data.picUrl" alt="" /> -->
|
||||
<el-image v-if="this.picUrl" style="width:100%;height:100%;" :src="this.picUrl" :preview-src-list="[this.picUrl]" alt="" />
|
||||
<span v-else>暂无图片</span>
|
||||
</div>
|
||||
<div class="video-table">
|
||||
<h4>周边监控</h4>
|
||||
<el-table
|
||||
:data="cameraData"
|
||||
@row-click="openVideo"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
'background-color': '#18304c',
|
||||
borderColor: '#325d94'
|
||||
}"
|
||||
:header-cell-style="{
|
||||
color: '#1ffefd',
|
||||
borderColor: '#325d94',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
>
|
||||
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import bus from "@/views/layout/bus";
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import { directive as viewer } from "v-viewer"
|
||||
import * as echarts from 'echarts'
|
||||
import { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js'
|
||||
export default {
|
||||
name: "",
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
this.weekData.time.unshift(item.pushTime)
|
||||
this.weekData.local.unshift(item.localNums)
|
||||
this.weekData.outer.unshift(item.nonlocalNums)
|
||||
})
|
||||
this.chartData = this.weekData
|
||||
this.initCharts()
|
||||
})
|
||||
selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
this.monthData.time.unshift(item.pushTime)
|
||||
this.monthData.local.unshift(item.localNums)
|
||||
this.monthData.outer.unshift(item.nonlocalNums)
|
||||
})
|
||||
})
|
||||
selectByAreaImage({areaName: this.feature.data.areaName}).then((res) => {
|
||||
let returnData = res.data.data
|
||||
if (returnData.length) {
|
||||
this.picUrl = returnData[0].picUrl
|
||||
this.cameraData.push({
|
||||
cameraName: returnData[0].channelName,
|
||||
channelCode: returnData[0].channelCode
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterButton:{
|
||||
typeSelect:['近7天','近30天',],
|
||||
typeSelectActive:'近7天',
|
||||
},
|
||||
cameraData: [],
|
||||
weekData:{
|
||||
time:[],
|
||||
local:[],
|
||||
outer:[],
|
||||
},
|
||||
monthData:{
|
||||
time:[],
|
||||
local:[],
|
||||
outer:[],
|
||||
},
|
||||
chartData:{},
|
||||
picUrl: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// particularsClick(data){
|
||||
// console.log(data)
|
||||
// bus.$emit("mainClick", data);
|
||||
// },
|
||||
getAbout(content) {
|
||||
if(!content) {
|
||||
return '暂无'
|
||||
} else if(content.length < 40) {
|
||||
return content
|
||||
} else {
|
||||
return content.substring(0, 40) + '...'
|
||||
}
|
||||
},
|
||||
typeSelect(item) {
|
||||
this.filterButton.typeSelectActive = item
|
||||
if(item == '近7天'){
|
||||
this.chartData = this.weekData
|
||||
}
|
||||
if(item == '近30天'){
|
||||
this.chartData = this.monthData
|
||||
}
|
||||
this.initCharts()
|
||||
},
|
||||
openVideo(row){
|
||||
bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
|
||||
},
|
||||
initCharts () {
|
||||
const option = {
|
||||
grid: {
|
||||
bottom: 34,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255,.8)',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#345a99',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
boundaryGap: ['2%', '2%'],
|
||||
data: this.chartData.time
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
minInterval : 1,
|
||||
name: '人',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255, 255, 255,.8)'
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255,.8)',
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
interval: '1',
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: ['#1d3556','#18334c']
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color: ['#309afe','#fab228'],
|
||||
legend: {
|
||||
right: '16%',
|
||||
top: '12%',
|
||||
icon: 'line',
|
||||
data: ['本地人数','外地人数',],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '本地人数',
|
||||
data: this.chartData.local,
|
||||
type: 'bar',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#3cb2ff' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#2682ff' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '外地人数',
|
||||
data: this.chartData.outer,
|
||||
type: 'bar',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#fdd033' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#fe9820' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
const charts = echarts.init(
|
||||
document.getElementById('chart')
|
||||
)
|
||||
charts.setOption(option)
|
||||
},
|
||||
|
||||
show () {
|
||||
const viewer = this.$el.querySelector('.images').$viewer
|
||||
viewer.show()
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
debug: true,
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// .leaflet-popup {
|
||||
// width: auto !important;
|
||||
// }
|
||||
.site-popup {
|
||||
.leaflet-popup-content-wrapper {
|
||||
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: .4);
|
||||
background: rgba(24,51,76,.95);
|
||||
border: 1px solid rgba(50,227,235,.95);
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
width: 734px !important;
|
||||
height: 453px;
|
||||
padding: 12px 16px;
|
||||
.pop-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.title-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
opacity: .4;
|
||||
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
|
||||
}
|
||||
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
margin-left: 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0494ff;
|
||||
color: #1ffefd;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-address {
|
||||
margin: 6px 0;
|
||||
padding-left: 20px;
|
||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
.site-content {
|
||||
display: flex;
|
||||
.site-content-left {
|
||||
width: 392px;
|
||||
margin-right: 29px;
|
||||
.left-mid-line {
|
||||
margin: 6px 0;
|
||||
}
|
||||
.area-content-left-top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
& > div {
|
||||
text-align: center;
|
||||
> div:first-child {
|
||||
color: #1ffefd;
|
||||
}
|
||||
> div:last-child {
|
||||
color: rgba(255, 255, 255,.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-content-left-bottom {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
.filter-btn-typeSelect {
|
||||
display: flex;
|
||||
.typeSelect-btn {
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(0, 255, 255, .6);
|
||||
background: rgba(2,51,87,.6);
|
||||
margin-right: 5px;
|
||||
padding: 4px 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.typeSelect-btn-active {
|
||||
background: #005ea3;
|
||||
border: 1px solid #00ffff;
|
||||
}
|
||||
}
|
||||
#chart {
|
||||
width: 100%;
|
||||
height: 206px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-content-right {
|
||||
width: 280px;
|
||||
.img-container {
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.video-table {
|
||||
margin-top: 20px;
|
||||
h4 {
|
||||
color: #fff;
|
||||
}
|
||||
.el-table{
|
||||
margin-top: 8px;
|
||||
border: 1px solid #325d94;
|
||||
.el-table__body-wrapper{
|
||||
height: 90px;
|
||||
overflow-y: auto;
|
||||
background: #18304c;
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
.el-table__empty-block {
|
||||
background: rgba(24,51,76,.95);
|
||||
}
|
||||
}
|
||||
th,td {
|
||||
border-right: 1px solid #325d94;
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.leaflet-popup-close-button {
|
||||
color: #3afefc !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang='scss' scoped>
|
||||
.particulars {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.List-Details-pop {
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
width: 400px;
|
||||
|
||||
.topContent {
|
||||
background: #000;
|
||||
padding: 14px;
|
||||
width: 400px;
|
||||
}
|
||||
.content {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
b {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,15 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="List-Details-pop">
|
||||
<div style="width: 300px; text-align: left; padding: 5px">
|
||||
<div style="width: 350px; text-align: left; padding: 5px" v-if="resourceType=='video'">
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div>
|
||||
<div class="popup-title">
|
||||
<div class="title">事件详情</div>
|
||||
<div class="title-button">
|
||||
<span class="issued-button">下发</span>
|
||||
<span class="ignore-button">忽略</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -13,16 +17,16 @@
|
|||
<div style="display: flex; flex-direction: column">
|
||||
<div>
|
||||
<!-- <div class="green-cicle"><div></div></div> -->
|
||||
<p><b>事件来源：</b>视频感知</p>
|
||||
<p><b>时间：</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>事件类型：</b>{{ feature.data.eventNewName || "" }}</p>
|
||||
<p><b>事件地址：</b>{{ feature.data.district || "" }}</p>
|
||||
<p><b>事件描述：</b>{{ feature.data.eventCnName || "" }}</p>
|
||||
<p><b>摄像头名称：</b>{{ feature.data.cameraName || "" }}</p>
|
||||
<p v-if="feature.data.vehicle != null">
|
||||
<b>车牌号：</b>{{ feature.data.vehicle || "" }}
|
||||
<p>
|
||||
<b>{{feature.data.district}}</b>
|
||||
<span>></span>
|
||||
<b>{{feature.data.district}}</b>
|
||||
<span>></span>
|
||||
<b>{{feature.data.cameraName}}</b>
|
||||
</p>
|
||||
<p><b>事件状态：</b></p>
|
||||
<p><b>预警时间：</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>持续时间：</b>32分钟</p>
|
||||
<p><b>事件状态：</b>待下发</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,18 +38,82 @@
|
|||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="button" @click="openCurrentVideo(feature.data.id)">实时监控</div> -->
|
||||
<div class="button" @click="openCurrentVideo(feature.data.id)">查看实时监控</div>
|
||||
</div>
|
||||
<!-- <div v-if="openVideo" class="current-video">
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="feature.data.channelCode"
|
||||
></video-play>
|
||||
</div> -->
|
||||
|
||||
<!---->
|
||||
<div style="width: 680px; text-align: left; padding: 5px" v-else>
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div class="popup-title">
|
||||
<div class="title">事件详情</div>
|
||||
<div class="title-button">
|
||||
<span class="issued-button">下发</span>
|
||||
<span class="ignore-button">忽略</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-monitoring">
|
||||
<div class="basic-information">
|
||||
<div class="green-cicle"><div></div></div>
|
||||
<p><b>负责人：</b>张三</p>
|
||||
<p><b>联系方式：</b>13356870098</p>
|
||||
<p><b>告警时间：</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>告警值：</b>42231</p>
|
||||
<p><b>事件状态：</b>待下发</p>
|
||||
<div class="flow-chart">
|
||||
<div class="chart-title"><span>告警当天人流量数值</span></div>
|
||||
<div class="chart-content" id="people-counting-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relate-video">
|
||||
<p style="margin-left:3px"><b>更新时间：</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<div class="population-statistics">
|
||||
<div class="item">
|
||||
<div><span>当前人数</span></div>
|
||||
<div><span>0000</span><span>人</span></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span>本地人数</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>0000</span>
|
||||
<span>人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div><span>外地人数</span></div>
|
||||
<div><span>0000</span><span>人</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<div class="video-title">
|
||||
<div class="title-name"><span>周边监控</span></div>
|
||||
<div class="check-more">查看更多</div>
|
||||
</div>
|
||||
<div class="video-play-content">
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="[feature.data.channelCode]"
|
||||
></video-play>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import VideoPlay from './VideoPlay'
|
||||
import * as echarts from 'echarts'
|
||||
import VideoPlay from './VideoPlay'
|
||||
import "viewerjs/dist/viewer.css";
|
||||
import { directive as viewer } from "v-viewer";
|
||||
import bus from "@/views/layout/bus";
|
||||
|
|
@ -53,7 +121,7 @@ import { getStreamByChannelCode } from "@/api/videoSurveillance";
|
|||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
// VideoPlay,
|
||||
VideoPlay,
|
||||
},
|
||||
props: {
|
||||
feature: {
|
||||
|
|
@ -68,6 +136,9 @@ export default {
|
|||
console.log(this.newImageUrl);
|
||||
|
||||
console.log(this.feature, "1234567");
|
||||
this.$nextTick( () => {
|
||||
this.initPeopleCountingChart();
|
||||
})
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
|
|
@ -78,6 +149,9 @@ export default {
|
|||
return {
|
||||
openVideo: false,
|
||||
newImageUrl: "",
|
||||
resourceType:"resource",
|
||||
channelCode:["3701222749350945"]
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -136,10 +210,83 @@ export default {
|
|||
//alert("error");
|
||||
}
|
||||
},
|
||||
//加载人流量统计图表
|
||||
initPeopleCountingChart(){
|
||||
let option = {
|
||||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||||
grid: {
|
||||
top: "20px",
|
||||
right: "40px",
|
||||
left: "40px",
|
||||
bottom: "20px",
|
||||
},
|
||||
tooltip: {
|
||||
// 鼠标悬浮提示框显示 X和Y 轴数据
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||||
borderColor: "rgba(32, 33, 36,0.20)",
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
// 文字提示样式
|
||||
color: "#fff",
|
||||
fontSize: "12",
|
||||
},
|
||||
shadowStyle: {
|
||||
color: "rgba(74, 211, 164, 0.15)",
|
||||
width: "20",
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["2022.11.01", "2022.11.02", "2022.11.03", "2022.11.04", "2022.11.05","2022.11.06","2022.11.07"],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
data: [60, 80, 100, 100, 150, 126,100,160],
|
||||
itemStyle: {
|
||||
color: 'orange',
|
||||
showSymbol: false,
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
const peopleCounting = echarts.init(
|
||||
document.getElementById('people-counting-chart')
|
||||
)
|
||||
peopleCounting.setOption(option)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
<style lang='scss'>
|
||||
.Event-List-Details-pop{
|
||||
.leaflet-popup-content{
|
||||
width: auto !important;
|
||||
p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.List-Details-pop {
|
||||
// width: 640px;
|
||||
// height: 320px;
|
||||
|
|
@ -159,9 +306,9 @@ export default {
|
|||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.popup-title{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.title {
|
||||
padding: 12px 76px 0 5px;
|
||||
font-size: 16px;
|
||||
|
|
@ -175,9 +322,35 @@ export default {
|
|||
right: 10px;
|
||||
}
|
||||
}
|
||||
.title-button{
|
||||
width: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 10px 0 5px;
|
||||
margin-left: 50px;
|
||||
.issued-button{
|
||||
width:50px;
|
||||
height:25px;
|
||||
background-color:#355d94;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
.ignore-button{
|
||||
width:50px;
|
||||
height:25px;
|
||||
margin-left: 10px;
|
||||
background-color:#355d94;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.images {
|
||||
width: 290px;
|
||||
height: 160px;
|
||||
width: 320px;
|
||||
height: 200px;
|
||||
margin-left: 35px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -185,18 +358,102 @@ export default {
|
|||
}
|
||||
}
|
||||
.button {
|
||||
width: 80px;
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
background-color: #2fe2ed;
|
||||
border-radius: 4px;
|
||||
margin: 8px auto 0;
|
||||
//background-color: #2fe2ed;
|
||||
//border-radius: 4px;
|
||||
margin: 10px 0 0;
|
||||
cursor: pointer;
|
||||
text-decoration:underline;
|
||||
|
||||
}
|
||||
.data-monitoring{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.basic-information{
|
||||
width:50%;
|
||||
.flow-chart{
|
||||
width:300px;
|
||||
height:200px;
|
||||
//background-color: red;
|
||||
.chart-title{
|
||||
width:100%;
|
||||
height:20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.chart-content{
|
||||
width:320px;
|
||||
height:196px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.relate-video{
|
||||
width:50%;
|
||||
//padding-left:10px;
|
||||
.population-statistics{
|
||||
width: 270px;
|
||||
height:60px;
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
//background-color: red;
|
||||
}
|
||||
.population-statistics>.item{
|
||||
//border: 1px solid black;
|
||||
padding-top: 5px;
|
||||
margin-left: 2px;
|
||||
flex:1;
|
||||
height:60px;
|
||||
text-align: center;
|
||||
background: #abcdef;
|
||||
line-height: 25px;
|
||||
.item-title{}
|
||||
.item-num{}
|
||||
.num-text{}
|
||||
.num-cell{}
|
||||
}
|
||||
.video-content{
|
||||
width: 330px;
|
||||
height: 280px;
|
||||
margin-top: 20px;
|
||||
//background-color: green;
|
||||
padding-left: 5px;
|
||||
.video-title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.title-name{
|
||||
width:200px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.check-more{
|
||||
width: 120px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
//background-color: #2fe2ed;
|
||||
//border-radius: 4px;
|
||||
margin: 5px 0 0;
|
||||
cursor: pointer;
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
.video-play-content{
|
||||
width: 320px;
|
||||
height: 233px;
|
||||
background-color: #abcdef;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .current-video {
|
||||
// width: 320px;
|
||||
// height: 180px;
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,202 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="List-Details-pop">
|
||||
<div style="width: 300px; text-align: left; padding: 5px">
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div>
|
||||
<div class="title">事件详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" style="padding: 5px">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div>
|
||||
<!-- <div class="green-cicle"><div></div></div> -->
|
||||
<p><b>事件来源：</b>视频感知</p>
|
||||
<p><b>时间：</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>事件类型：</b>{{ feature.data.eventNewName || "" }}</p>
|
||||
<p><b>事件地址：</b>{{ feature.data.district || "" }}</p>
|
||||
<p><b>事件描述：</b>{{ feature.data.eventCnName || "" }}</p>
|
||||
<p><b>摄像头名称：</b>{{ feature.data.cameraName || "" }}</p>
|
||||
<p v-if="feature.data.vehicle != null">
|
||||
<b>车牌号：</b>{{ feature.data.vehicle || "" }}
|
||||
</p>
|
||||
<p><b>事件状态：</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="images" v-viewer="{ movable: false }">
|
||||
<img
|
||||
@click="show"
|
||||
v-show="feature.data.imageUrl && feature.data.imageUrl !== null"
|
||||
:src="newImageUrl || ''"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="button" @click="openCurrentVideo(feature.data.id)">实时监控</div> -->
|
||||
</div>
|
||||
<!-- <div v-if="openVideo" class="current-video">
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="feature.data.channelCode"
|
||||
></video-play>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import VideoPlay from './VideoPlay'
|
||||
import "viewerjs/dist/viewer.css";
|
||||
import { directive as viewer } from "v-viewer";
|
||||
import bus from "@/views/layout/bus";
|
||||
import { getStreamByChannelCode } from "@/api/videoSurveillance";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
// VideoPlay,
|
||||
},
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.newImageUrl = this.IntelliURLReplaceIP(this.feature.data.imageUrl);
|
||||
console.log(this.newImageUrl);
|
||||
|
||||
console.log(this.feature, "1234567");
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
debug: true,
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
openVideo: false,
|
||||
newImageUrl: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openCurrentVideo(channelCode) {
|
||||
// this.openVideo = true;
|
||||
// bus.$emit('openCurrentVideo',channelCode)
|
||||
getStreamByChannelCode({ channelCode: channelCode }).then((res) => {
|
||||
let newVideoStream = this.IntelliURLReplaceIP(res.data.data, "video");
|
||||
bus.$emit("openCurrentVideo", newVideoStream);
|
||||
// this.openVideo = true;
|
||||
});
|
||||
},
|
||||
show() {
|
||||
const viewer = this.$el.querySelector(".images").$viewer;
|
||||
viewer.show();
|
||||
},
|
||||
IntelliURLReplaceIP(url, type) {
|
||||
var url = url || "";
|
||||
var ip =
|
||||
type == "video"
|
||||
? "http://15.72.183.90:7001"
|
||||
: window.SITE_CONFIG.apiURL;
|
||||
|
||||
try {
|
||||
if (url == "") {
|
||||
return url;
|
||||
}
|
||||
|
||||
if (url.indexOf(ip) != -1) {
|
||||
//console.log("the same ip.");
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
|
||||
//截取ip前字段"http:"
|
||||
if (url.indexOf("//") == -1) {
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
// var substr1 = url.substring(0,url.indexOf('//'));
|
||||
//console.log("oldurl protocol:",substr1);//"http:"
|
||||
|
||||
//截取ip后字段"it/local/facerec/default/20200609112555435018.jpg""
|
||||
if (url.indexOf("/components/") == -1) {
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
var substr2 = url.substring(
|
||||
url.indexOf("/components/") + 1,
|
||||
url.length
|
||||
);
|
||||
//console.log("oldurl path:", substr2);//"it/local/facerec/default/20200609112555435018.jpg"
|
||||
|
||||
var newurl = ip + "/" + substr2;
|
||||
//console.log("newurl:",newurl);
|
||||
|
||||
return newurl;
|
||||
} catch (exception) {
|
||||
//alert("error");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.List-Details-pop {
|
||||
// width: 640px;
|
||||
// height: 320px;
|
||||
background-color: #25536d;
|
||||
font-size: 16px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
b {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.title {
|
||||
padding: 12px 76px 0 5px;
|
||||
font-size: 16px;
|
||||
color: #66ffff;
|
||||
position: relative;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAFCAYAAADogtSaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi41IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0Q0Y4QzFGRkQ1QTYxMUVDQkJGREYyNEQ0M0Y1ODRBOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0Q0Y4QzIwMEQ1QTYxMUVDQkJGREYyNEQ0M0Y1ODRBOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRDRjhDMUZERDVBNjExRUNCQkZERjI0RDQzRjU4NEE5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRDRjhDMUZFRDVBNjExRUNCQkZERjI0RDQzRjU4NEE5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+2WU6dgAAAUVJREFUeNp8kk8rhEEcx2eEkKNSZA/egIuDC8VL8PfiYg+7om0PK14DoRDZLVxcWLwEW1wcXLwBJVHKUQh5fKZ+q/H4zUx9+tbM9/vMzHcem0uSkjFmBRrM/3EF4xVrH+oT+FuRCkwbfRzAHJl38bcjezAZ8O9CEf+Ht0cvcgZ9iv8TCvjL6QUr4WHkGDqU8JM7COELf5JMAVmHRiVzLSXcidft40pbjpQ2hv/R+34bUo6Utg/z9dJ+LyPhHmmjXwl+wQLBjdSFBpEqdCqZZ5gic+75R5CjSGkT+C9TexSR1Uhpo2Tu/1xGgi3INmQDbRxCnvCrl+lCTmFA8X/DEqyRScSfEX+otBLezdS5huTPCZXm/pya1U5MOI9sQZOyfCNt3Hr+ZsS92mygBPd6WTIvXmk7MBMpLYf/zdujGzmJlLb4I8AA15l33Vi6TA4AAAAASUVORK5CYII=)
|
||||
no-repeat 80px 21px;
|
||||
background-size: 30%;
|
||||
span {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.images {
|
||||
width: 290px;
|
||||
height: 160px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
background-color: #2fe2ed;
|
||||
border-radius: 4px;
|
||||
margin: 8px auto 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// .current-video {
|
||||
// width: 320px;
|
||||
// height: 180px;
|
||||
// }
|
||||
</style>
|
||||
Loading…
Reference in New Issue