事件详情，区域详情弹窗修改
This commit is contained in:
chenchenzai
parent
547f679b62
commit
ac5fe38c35
|
|
@ -134,7 +134,7 @@ export function MapFun(mapObj) {
|
||||||
}
|
}
|
||||||
} else if (feature.type == 'eventList') {
|
} else if (feature.type == 'eventList') {
|
||||||
const elementHtml = createEventListDetailsPop(feature)
|
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 {
|
} else {
|
||||||
const elementHtml = createSearchAddressTitlePop(feature)
|
const elementHtml = createSearchAddressTitlePop(feature)
|
||||||
L.popup({ className: 'Address-Title-pop', closeButton: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
L.popup({ className: 'Address-Title-pop', closeButton: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||||
|
|
@ -494,6 +494,7 @@ export function MapFun(mapObj) {
|
||||||
layerGroup.delete('drawMarkerLayer')
|
layerGroup.delete('drawMarkerLayer')
|
||||||
mapObj.drawMarker.enable()
|
mapObj.drawMarker.enable()
|
||||||
}
|
}
|
||||||
|
|
||||||
function _addImgMaker(latLng, inconConfig) {
|
function _addImgMaker(latLng, inconConfig) {
|
||||||
const icon = MapStyle.featureIcon(inconConfig)
|
const icon = MapStyle.featureIcon(inconConfig)
|
||||||
const markerLayer = L.marker([latLng.lat, latLng.lng], {
|
const markerLayer = L.marker([latLng.lat, latLng.lng], {
|
||||||
|
|
@ -681,8 +682,7 @@ export function MapFun(mapObj) {
|
||||||
* @param popupType {String} 弹窗类型
|
* @param popupType {String} 弹窗类型
|
||||||
* @param className {String} class名字
|
* @param className {String} class名字
|
||||||
*/
|
*/
|
||||||
const _addTheOneFeatureOnMapByPoint = function (layerName, point, data, layerConfigInfo,
|
const _addTheOneFeatureOnMapByPoint = function(layerName, point, data, layerConfigInfo, { popupFlag = true, popupType = 'general', className = '' } = {}) {
|
||||||
{ popupFlag = true, popupType = 'general', className = '' } = {}) {
|
|
||||||
// 创建marker图层，绑定要素
|
// 创建marker图层，绑定要素
|
||||||
// debugger;
|
// debugger;
|
||||||
const markerLayer = L.marker(point, { icon: MapStyle.featureIcon(layerConfigInfo) })
|
const markerLayer = L.marker(point, { icon: MapStyle.featureIcon(layerConfigInfo) })
|
||||||
|
|
@ -1143,6 +1143,7 @@ export function MapFun(mapObj) {
|
||||||
// featureGroup.addLayer(polyline);
|
// featureGroup.addLayer(polyline);
|
||||||
// featureGroup.addTo(map);
|
// featureGroup.addTo(map);
|
||||||
}
|
}
|
||||||
|
|
||||||
function _removerPolyline() {
|
function _removerPolyline() {
|
||||||
if (polylineArr && polylineArr.length > 0) {
|
if (polylineArr && polylineArr.length > 0) {
|
||||||
polylineArr.map(item => {
|
polylineArr.map(item => {
|
||||||
|
|
@ -1442,8 +1443,7 @@ export function MapFun(mapObj) {
|
||||||
* @param className {String} 弹窗样式
|
* @param className {String} 弹窗样式
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
function _queryLayersBySql(configInfo,
|
function _queryLayersBySql(configInfo, {
|
||||||
{
|
|
||||||
sql = 'SMID >0',
|
sql = 'SMID >0',
|
||||||
callBackFun = null,
|
callBackFun = null,
|
||||||
callBackParams = null,
|
callBackParams = null,
|
||||||
|
|
@ -1645,6 +1645,7 @@ export function MapFun(mapObj) {
|
||||||
featureGroup.addLayer(markerGroup)
|
featureGroup.addLayer(markerGroup)
|
||||||
layerGroup.set(layerName, markerGroup)
|
layerGroup.set(layerName, markerGroup)
|
||||||
}
|
}
|
||||||
|
|
||||||
function _replaceMarkerIcon(layerName, uuid, iconUrl = '/src/supermap/image/poi.png', iconSize = [74, 74]) {
|
function _replaceMarkerIcon(layerName, uuid, iconUrl = '/src/supermap/image/poi.png', iconSize = [74, 74]) {
|
||||||
const layers = layerGroup.get(layerName).getLayers()
|
const layers = layerGroup.get(layerName).getLayers()
|
||||||
layers.forEach(layer => {
|
layers.forEach(layer => {
|
||||||
|
|
@ -1709,6 +1710,7 @@ export function MapFun(mapObj) {
|
||||||
features.map(feature => {
|
features.map(feature => {
|
||||||
var bounds = map.getBounds()
|
var bounds = map.getBounds()
|
||||||
// console.log("看看有没有坐标",feature.latLng);
|
// console.log("看看有没有坐标",feature.latLng);
|
||||||
|
debugger
|
||||||
if (layerName == '全部' ? feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng)) : feature.hasOwnProperty('latLng')) {
|
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 })
|
const marker = L.marker(feature.latLng, { icon })
|
||||||
if (createPopupFun !== null) {
|
if (createPopupFun !== null) {
|
||||||
|
|
@ -1967,8 +1969,7 @@ export function MapFun(mapObj) {
|
||||||
// latLng, r, strong
|
// latLng, r, strong
|
||||||
const thermodynamic = latLng
|
const thermodynamic = latLng
|
||||||
const heatLayer = L.heatLayer(
|
const heatLayer = L.heatLayer(
|
||||||
thermodynamic,
|
thermodynamic, {
|
||||||
{
|
|
||||||
radius: r,
|
radius: r,
|
||||||
minOpacity: 0.4,
|
minOpacity: 0.4,
|
||||||
blur: 10,
|
blur: 10,
|
||||||
|
|
|
||||||
|
|
@ -2,17 +2,49 @@
|
||||||
<div class="pop-box">
|
<div class="pop-box">
|
||||||
<div class="title-bg"></div>
|
<div class="title-bg"></div>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
<span>重点区域详情</span>
|
||||||
|
</div>
|
||||||
|
<div class="site-base-information">
|
||||||
|
<div class="item">
|
||||||
|
<p>
|
||||||
|
<span>区域名称：</span>
|
||||||
<span>{{ feature.data.areaName || "" }}</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>
|
||||||
<div class="site-address">{{ feature.data.location || "" }}</div>
|
|
||||||
<div class="site-content">
|
<div class="site-content">
|
||||||
<div class="site-content-left">
|
<div class="site-content-title">
|
||||||
<div>
|
<div v-for="(item, index) in menuList" :key="index">
|
||||||
<div>管理单位：{{ feature.data.management || "" }}</div>
|
<div class="item" :class="selectedIndex == index ? 'is-active' : ''" @click="handleCheck(item,index)">
|
||||||
<el-tooltip :content="feature.data.about">
|
<span>{{item.menuName}}</span>
|
||||||
<div class="left-mid-line" style="text-overflow:ellipsis">景区简介：{{ getAbout(feature.data.about)}}</div>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="site-content-content" v-show="selectedIndex == 0">
|
||||||
|
<div class="site-content-left">
|
||||||
<div class="area-content-left-top">
|
<div class="area-content-left-top">
|
||||||
<div>
|
<div>
|
||||||
<div>当前人数</div>
|
<div>当前人数</div>
|
||||||
|
|
@ -26,20 +58,6 @@
|
||||||
<div>外地人数</div>
|
<div>外地人数</div>
|
||||||
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
|
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
|
||||||
</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>
|
||||||
<div class="site-content-left-bottom">
|
<div class="site-content-left-bottom">
|
||||||
<div class="filter-btn-typeSelect">
|
<div class="filter-btn-typeSelect">
|
||||||
|
|
@ -54,26 +72,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-content-right">
|
<div class="site-content-right">
|
||||||
<!-- <div
|
<div class="people-total">
|
||||||
class="images"
|
<div class="total-num">
|
||||||
v-viewer="{movable: false}"
|
<span>月累计人数：</span>
|
||||||
style="
|
<span>123112</span>
|
||||||
width: 280px;
|
</div>
|
||||||
height: 158px;
|
<div class="year-on-year">
|
||||||
cursor: pointer;
|
<span>月累计同比：</span>
|
||||||
"
|
<span>-1.5%</span>
|
||||||
>
|
</div>
|
||||||
<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>
|
||||||
<div class="video-table">
|
<div class="video-table">
|
||||||
<h4>周边监控</h4>
|
<h4>人员聚集明细</h4>
|
||||||
<el-table
|
<el-table
|
||||||
:data="cameraData"
|
:data="personnelAggregationData"
|
||||||
@row-click="openVideo"
|
@row-click="openVideo"
|
||||||
:cell-style="{
|
:cell-style="{
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
|
|
@ -87,9 +99,141 @@
|
||||||
'background-color': '#2b4b7a',
|
'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>
|
||||||
<el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
|
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -102,6 +246,7 @@ import 'viewerjs/dist/viewer.css'
|
||||||
import { directive as viewer } from "v-viewer"
|
import { directive as viewer } from "v-viewer"
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js'
|
import { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js'
|
||||||
|
import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index'
|
||||||
export default {
|
export default {
|
||||||
name: "",
|
name: "",
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -113,6 +258,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
|
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||||
res.data.data.forEach((item) => {
|
res.data.data.forEach((item) => {
|
||||||
this.weekData.time.unshift(item.pushTime)
|
this.weekData.time.unshift(item.pushTime)
|
||||||
|
|
@ -122,6 +268,8 @@ export default {
|
||||||
this.chartData = this.weekData
|
this.chartData = this.weekData
|
||||||
this.initCharts()
|
this.initCharts()
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
|
||||||
selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
|
selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||||
res.data.data.forEach((item) => {
|
res.data.data.forEach((item) => {
|
||||||
this.monthData.time.unshift(item.pushTime)
|
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() {
|
data() {
|
||||||
return {
|
return {
|
||||||
filterButton:{
|
filterButton:{
|
||||||
typeSelect:['近7天','近30天',],
|
typeSelect:['当天人流量','近30天人流量',],
|
||||||
typeSelectActive:'近7天',
|
typeSelectActive:'当天人流量',
|
||||||
},
|
},
|
||||||
cameraData: [],
|
cameraData: [],
|
||||||
|
personnelAggregationData:[],
|
||||||
weekData:{
|
weekData:{
|
||||||
time:[],
|
time:[],
|
||||||
local:[],
|
local:[],
|
||||||
|
|
@ -158,7 +324,30 @@ export default {
|
||||||
outer:[],
|
outer:[],
|
||||||
},
|
},
|
||||||
chartData:{},
|
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: {
|
methods: {
|
||||||
|
|
@ -306,6 +495,121 @@ export default {
|
||||||
const viewer = this.$el.querySelector('.images').$viewer
|
const viewer = this.$el.querySelector('.images').$viewer
|
||||||
viewer.show()
|
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: {
|
directives: {
|
||||||
viewer: viewer({
|
viewer: viewer({
|
||||||
|
|
@ -325,8 +629,8 @@ export default {
|
||||||
border: 1px solid rgba(50,227,235,.95);
|
border: 1px solid rgba(50,227,235,.95);
|
||||||
}
|
}
|
||||||
.leaflet-popup-content {
|
.leaflet-popup-content {
|
||||||
width: 734px !important;
|
width: 750px !important;
|
||||||
height: 453px;
|
height: 500px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
.pop-box {
|
.pop-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -345,6 +649,9 @@ export default {
|
||||||
.title{
|
.title{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
span:nth-child(1) {
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
span:nth-child(2) {
|
span:nth-child(2) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
|
@ -358,18 +665,68 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-address {
|
.site-base-information{
|
||||||
|
height: 90px;
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
|
||||||
color: rgba(255, 255, 255, .6);
|
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 {
|
.site-content {
|
||||||
display: flex;
|
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 {
|
.site-content-left {
|
||||||
width: 392px;
|
width: 372px;
|
||||||
margin-right: 29px;
|
margin-right: 15px;
|
||||||
|
height: 310px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
.left-mid-line {
|
.left-mid-line {
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
}
|
}
|
||||||
|
|
@ -415,10 +772,88 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 206px;
|
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 {
|
.site-content-right {
|
||||||
width: 280px;
|
width: 400px;
|
||||||
.img-container {
|
.img-container {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
height: 158px;
|
height: 158px;
|
||||||
|
|
@ -427,6 +862,22 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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 {
|
.video-table {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
h4 {
|
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>
|
<template>
|
||||||
<div class="pop-box">
|
<div class="pop-box">
|
||||||
<div class="List-Details-pop">
|
<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 class="content">
|
||||||
<div style="display: flex; flex-direction: column">
|
<div style="display: flex; flex-direction: column">
|
||||||
<div>
|
<div class="popup-title">
|
||||||
<div class="title">事件详情</div>
|
<div class="title">事件详情</div>
|
||||||
|
<div class="title-button">
|
||||||
|
<span class="issued-button">下发</span>
|
||||||
|
<span class="ignore-button">忽略</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -13,16 +17,16 @@
|
||||||
<div style="display: flex; flex-direction: column">
|
<div style="display: flex; flex-direction: column">
|
||||||
<div>
|
<div>
|
||||||
<!-- <div class="green-cicle"><div></div></div> -->
|
<!-- <div class="green-cicle"><div></div></div> -->
|
||||||
<p><b>事件来源：</b>视频感知</p>
|
<p>
|
||||||
<p><b>时间：</b>{{ feature.data.captureTime || "" }}</p>
|
<b>{{feature.data.district}}</b>
|
||||||
<p><b>事件类型：</b>{{ feature.data.eventNewName || "" }}</p>
|
<span>></span>
|
||||||
<p><b>事件地址：</b>{{ feature.data.district || "" }}</p>
|
<b>{{feature.data.district}}</b>
|
||||||
<p><b>事件描述：</b>{{ feature.data.eventCnName || "" }}</p>
|
<span>></span>
|
||||||
<p><b>摄像头名称：</b>{{ feature.data.cameraName || "" }}</p>
|
<b>{{feature.data.cameraName}}</b>
|
||||||
<p v-if="feature.data.vehicle != null">
|
|
||||||
<b>车牌号：</b>{{ feature.data.vehicle || "" }}
|
|
||||||
</p>
|
</p>
|
||||||
<p><b>事件状态：</b></p>
|
<p><b>预警时间：</b>{{ feature.data.captureTime || "" }}</p>
|
||||||
|
<p><b>持续时间：</b>32分钟</p>
|
||||||
|
<p><b>事件状态：</b>待下发</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -34,18 +38,82 @@
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="button" @click="openCurrentVideo(feature.data.id)">实时监控</div> -->
|
<div class="button" @click="openCurrentVideo(feature.data.id)">查看实时监控</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div v-if="openVideo" class="current-video">
|
<!-- <div v-if="openVideo" class="current-video">
|
||||||
<video-play
|
<video-play
|
||||||
:key="channelCode" :channel-id="feature.data.channelCode"
|
:key="channelCode" :channel-id="feature.data.channelCode"
|
||||||
></video-play>
|
></video-play>
|
||||||
</div> -->
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
// import VideoPlay from './VideoPlay'
|
import * as echarts from 'echarts'
|
||||||
|
import VideoPlay from './VideoPlay'
|
||||||
import "viewerjs/dist/viewer.css";
|
import "viewerjs/dist/viewer.css";
|
||||||
import { directive as viewer } from "v-viewer";
|
import { directive as viewer } from "v-viewer";
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
|
|
@ -53,7 +121,7 @@ import { getStreamByChannelCode } from "@/api/videoSurveillance";
|
||||||
export default {
|
export default {
|
||||||
name: "",
|
name: "",
|
||||||
components: {
|
components: {
|
||||||
// VideoPlay,
|
VideoPlay,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
feature: {
|
feature: {
|
||||||
|
|
@ -68,6 +136,9 @@ export default {
|
||||||
console.log(this.newImageUrl);
|
console.log(this.newImageUrl);
|
||||||
|
|
||||||
console.log(this.feature, "1234567");
|
console.log(this.feature, "1234567");
|
||||||
|
this.$nextTick( () => {
|
||||||
|
this.initPeopleCountingChart();
|
||||||
|
})
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
viewer: viewer({
|
viewer: viewer({
|
||||||
|
|
@ -78,6 +149,9 @@ export default {
|
||||||
return {
|
return {
|
||||||
openVideo: false,
|
openVideo: false,
|
||||||
newImageUrl: "",
|
newImageUrl: "",
|
||||||
|
resourceType:"resource",
|
||||||
|
channelCode:["3701222749350945"]
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -136,10 +210,83 @@ export default {
|
||||||
//alert("error");
|
//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>
|
</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 {
|
.List-Details-pop {
|
||||||
// width: 640px;
|
// width: 640px;
|
||||||
// height: 320px;
|
// height: 320px;
|
||||||
|
|
@ -159,9 +306,9 @@ export default {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.leaflet-popup-content p {
|
.popup-title{
|
||||||
margin: 12px 0;
|
display: flex;
|
||||||
}
|
flex-direction: row;
|
||||||
.title {
|
.title {
|
||||||
padding: 12px 76px 0 5px;
|
padding: 12px 76px 0 5px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
@ -175,9 +322,35 @@ export default {
|
||||||
right: 10px;
|
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 {
|
.images {
|
||||||
width: 290px;
|
width: 320px;
|
||||||
height: 160px;
|
height: 200px;
|
||||||
|
margin-left: 35px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -185,18 +358,102 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.button {
|
.button {
|
||||||
width: 80px;
|
width: 100px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #2fe2ed;
|
//background-color: #2fe2ed;
|
||||||
border-radius: 4px;
|
//border-radius: 4px;
|
||||||
margin: 8px auto 0;
|
margin: 10px 0 0;
|
||||||
cursor: pointer;
|
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 {
|
// .current-video {
|
||||||
// width: 320px;
|
// width: 320px;
|
||||||
// height: 180px;
|
// height: 180px;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
</style>
|
</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