This commit is contained in:
yangxiaojiang
parent
3509b44449
commit
fcb0066e1c
|
|
@ -8,3 +8,11 @@ export function selectKeyAreaList(params) {
|
|||
})
|
||||
}
|
||||
|
||||
export function selectByAreaName(params) {
|
||||
return request({
|
||||
url: 'api/project/keyArea/selectByAreaName',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -33,6 +33,7 @@ import RoadGovernancePop from '@/views/pages/roadGovernance/components/RoadGover
|
|||
import EventListDetailsPop from '@/views/pages/civilizedCity/components/EventListDetailsPop'
|
||||
import SiteListPop from '@/views/pages/construction/components/SiteListPop'
|
||||
import WaterPointPop from '@/views/pages/waterPoints/components/WaterPointPop'
|
||||
import SiteRoadPop from '@/views/pages/construction/components/SiteRoadPop'
|
||||
|
||||
/**
|
||||
* 生成专题通用弹窗Dom
|
||||
|
|
@ -202,6 +203,24 @@ function creatNucleicAcidMonitoringSites(feature) {
|
|||
})
|
||||
return popupDom.initDom()
|
||||
}
|
||||
|
||||
//在建工地走航监测弹窗
|
||||
function createSiteRoadPop(feature) {
|
||||
const popupDom = new Dom({
|
||||
template: '<Site-Road-pop :feature="feature"></Site-Road-pop>',
|
||||
data() {
|
||||
return {
|
||||
feature: feature,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
components: {
|
||||
SiteRoadPop
|
||||
}
|
||||
})
|
||||
return popupDom.initDom()
|
||||
}
|
||||
/**
|
||||
* 生成专题企业信息通用弹窗Dom
|
||||
* @param resourceTitle
|
||||
|
|
@ -671,4 +690,5 @@ export {
|
|||
createEventListDetailsPop,
|
||||
createSiteListPop,
|
||||
createWaterPointPop,
|
||||
createSiteRoadPop,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -586,8 +586,9 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
|
|||
L.popup({ className: 'roadGovernance-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else if(feature.type=='site'){
|
||||
L.popup({ className: 'site-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
}
|
||||
else if(feature.type=='waterPoint'){
|
||||
} else if(feature.type=='siteRoad'){
|
||||
L.popup({ className: 'site-road-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else if(feature.type=='waterPoint'){
|
||||
L.popup({ className: 'water-point-pop', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else{
|
||||
L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@
|
|||
<script>
|
||||
import bus from "@/views/layout/bus";
|
||||
import {
|
||||
selectKeyAreaList
|
||||
selectKeyAreaList,
|
||||
selectByAreaName,
|
||||
} from "@/api/area";
|
||||
|
||||
export default {
|
||||
|
|
@ -95,6 +96,9 @@ export default {
|
|||
console.log(res.data.data)
|
||||
this.siteData = res.data.data
|
||||
})
|
||||
selectByAreaName({areaName:"李村商圈"}).then((res) => {
|
||||
console.log(res.data.data)
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
|
||||
<div class="event-details" v-for="item in eventListData" :key="item.index">
|
||||
<div v-show="tabsActiveName == '走航监测'" >
|
||||
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openRoadDialog(item)">
|
||||
<div class="event-details-title">
|
||||
<span>{{item.roadName||''}}</span>
|
||||
<span>{{item.dt||''}}</span>
|
||||
|
|
@ -58,11 +59,28 @@
|
|||
<p>pm10:{{item.pm10||''}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="tabsActiveName == '物联感知'">
|
||||
<div class="event-details" v-for="item in eventListData" :key="item.index">
|
||||
<div class="event-details-title">
|
||||
<span>{{item.projectName||''}}</span>
|
||||
<span>{{item.pushTime||''}}</span>
|
||||
<!-- <span>未派发</span> -->
|
||||
</div>
|
||||
<div class="event-details-des">
|
||||
<h5>{{item.sgwz||''}}</h5>
|
||||
<!-- <p>简述简述简述简述简述简述简述简述</p> -->
|
||||
<p>{{filterButton.typeSelectActive == '工地扬尘'? 'pm10' : '噪声值'}}:{{filterButton.typeSelectActive == '工地扬尘'? item.pm10 :item.noice ||''}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
@current-change="pageChange"
|
||||
:total="total">
|
||||
:total="total"
|
||||
:current-page.sync="currentPage"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,6 +90,9 @@
|
|||
<script>
|
||||
import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
|
||||
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
|
||||
import {
|
||||
createSiteRoadPop,
|
||||
} from "@/supermap/createMarkerPopup";
|
||||
import bus from "@/views/layout/bus";
|
||||
import {
|
||||
getRoadData,
|
||||
|
|
@ -85,8 +106,8 @@ export default {
|
|||
tabsActiveName: "走航监测",
|
||||
statisticalAnalysisIsShow: false,
|
||||
filterButton:{
|
||||
typeSelect:['事件','事件1'],
|
||||
typeSelectActive:'事件',
|
||||
typeSelect:['事件1','事件2'],
|
||||
typeSelectActive:'事件1',
|
||||
processStateSelect:['全部','未派发','未处置','已处置'],
|
||||
processStateSelectActive:'全部',
|
||||
},
|
||||
|
|
@ -94,6 +115,7 @@ export default {
|
|||
preTime: "",
|
||||
total: 0,
|
||||
roadData:[],
|
||||
currentPage: 1,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -115,18 +137,18 @@ export default {
|
|||
mounted() {
|
||||
this.getRoadData()
|
||||
this.selectRoadData()
|
||||
this.selectRaise()
|
||||
this.selectNoiceEvent()
|
||||
},
|
||||
methods: {
|
||||
tabHandleClick(item) {
|
||||
this.tabsActiveName = item
|
||||
this.currentPage = 1
|
||||
if(item == '视频感知'){
|
||||
|
||||
}
|
||||
if(item == '物联感知'){
|
||||
this.filterButton.typeSelect = ['工地扬尘','工地噪声']
|
||||
this.typeSelectActive = '工地扬尘'
|
||||
this.filterButton.typeSelectActive = '工地扬尘'
|
||||
this.selectRaise()
|
||||
}
|
||||
if(item == '走航监测'){
|
||||
this.selectRoadData()
|
||||
|
|
@ -137,6 +159,13 @@ export default {
|
|||
},
|
||||
typeSelect(item) {
|
||||
this.filterButton.typeSelectActive = item
|
||||
this.currentPage = 1
|
||||
if(item == '工地扬尘') {
|
||||
this.selectRaise()
|
||||
}
|
||||
if(item == '工地噪声') {
|
||||
this.selectNoiceEvent()
|
||||
}
|
||||
},
|
||||
processStateSelect(item) {
|
||||
this.filterButton.processStateSelectActive = item
|
||||
|
|
@ -161,25 +190,26 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
//物联感知 扬尘 噪声
|
||||
//物联感知 扬尘
|
||||
selectRaise() {
|
||||
let params = {
|
||||
pageSize: 5,
|
||||
page: 1,
|
||||
}
|
||||
selectRaise(params).then((res) => {
|
||||
console.log(res)
|
||||
// this.eventListData = res.data.data.roadData;
|
||||
|
||||
this.eventListData = res.data.data.data;
|
||||
this.total = res.data.data.sum;
|
||||
});
|
||||
},
|
||||
//噪声
|
||||
selectNoiceEvent() {
|
||||
let params = {
|
||||
pageSize: 5,
|
||||
page: 1,
|
||||
}
|
||||
selectNoiceEvent(params).then((res) => {
|
||||
console.log(res)
|
||||
this.eventListData = res.data.data.data;
|
||||
this.total = res.data.data.sum;
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -188,13 +218,24 @@ export default {
|
|||
if(this.tabsActiveName == '视频感知') {
|
||||
|
||||
} else if(this.tabsActiveName == '物联感知') {
|
||||
if(this.filterButton.typeSelectActive == '工地扬尘'){
|
||||
let params = {
|
||||
pageSize: 5,
|
||||
page: val,
|
||||
}
|
||||
selectRaise(params).then((res) => {
|
||||
console.log(res)
|
||||
this.eventListData = res.data.data.data;
|
||||
});
|
||||
}
|
||||
if(this.filterButton.typeSelectActive == '工地噪声'){
|
||||
let params = {
|
||||
pageSize: 5,
|
||||
page: val,
|
||||
}
|
||||
selectNoiceEvent(params).then((res) => {
|
||||
this.eventListData = res.data.data.data;
|
||||
});
|
||||
}
|
||||
} else if(this.tabsActiveName == '走航监测') {
|
||||
let params = {
|
||||
pageSize: 5,
|
||||
|
|
@ -204,6 +245,23 @@ export default {
|
|||
this.eventListData = res.data.data.roadData;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
openRoadDialog(data) {
|
||||
console.log(data)
|
||||
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.lat, lng: data.lng });
|
||||
let dataEvent = [{
|
||||
latLng: { lat: data.lat, lng: data.lng },
|
||||
data: data,
|
||||
type: "siteRoad",
|
||||
}]
|
||||
this.$parent.hiMapFun.addPointsToMap(
|
||||
dataEvent,
|
||||
"poi-red.png",
|
||||
"roadPoint",
|
||||
createSiteRoadPop
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -418,13 +476,17 @@ export default {
|
|||
max-height: 100px;
|
||||
padding-right: 8px;
|
||||
background: linear-gradient(90deg, #173759 0, #133150 100%);
|
||||
cursor: pointer;
|
||||
.event-details-title {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span:nth-child(1) {
|
||||
width: 140px;
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
color: #1ffefd;
|
||||
font-size: 18px;
|
||||
|
|
@ -455,6 +517,9 @@ export default {
|
|||
padding-left: 18px;
|
||||
color: rgba(255,255,255, .6);
|
||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
p {
|
||||
color: rgba(255,255,255, .8);
|
||||
|
|
|
|||
|
|
@ -8,19 +8,20 @@
|
|||
<div class="site-address">{{ feature.data.sgwz || "" }}</div>
|
||||
<div class="site-content">
|
||||
<div class="site-content-left">
|
||||
<span style="color:rgba(255, 255, 255, .6);font-size:14px">更新时间 {{ feature.data.pushTime || ''}}</span>
|
||||
<div class="site-content-left-top">
|
||||
<div class="noise">
|
||||
<img src="../../../../assets/construction/noise.png" alt="">
|
||||
<div>
|
||||
<p>噪声</p>
|
||||
<p><span>{{ feature.data.noice || "" }}</span>dB</p>
|
||||
<p><span>{{ feature.data.noice || feature.data.noice == 0 ? 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>
|
||||
<p><span>{{ feature.data.pm10 || feature.data.noice == 0 ? feature.data.noice : '' }}</span>ug/m<sup>3</sup> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,6 +53,7 @@
|
|||
<h4>周边监控</h4>
|
||||
<el-table
|
||||
:data="cameraData"
|
||||
@row-click="openVideo"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
|
|
@ -63,6 +65,7 @@
|
|||
borderColor: '#325d94',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
style="background: transparent"
|
||||
>
|
||||
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
||||
</el-table-column>
|
||||
|
|
@ -79,6 +82,7 @@ import 'viewerjs/dist/viewer.css'
|
|||
import { directive as viewer } from "v-viewer"
|
||||
import * as echarts from 'echarts'
|
||||
import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
|
||||
import { time } from 'highcharts';
|
||||
export default {
|
||||
name: "",
|
||||
props: {
|
||||
|
|
@ -90,16 +94,29 @@ export default {
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.feature);
|
||||
selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
console.log(res)
|
||||
res.data.data.forEach((item) => {
|
||||
this.weekData.time.push(item.pushTime)
|
||||
this.weekData.pm10.push(item.pm10)
|
||||
this.weekData.noice.push(item.noice)
|
||||
})
|
||||
selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
console.log(res)
|
||||
})
|
||||
this.$nextTick( () => {
|
||||
this.chartData = this.weekData
|
||||
this.initCharts()
|
||||
})
|
||||
selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
this.monthData.time.push(item.pushTime)
|
||||
this.monthData.pm10.push(item.pm10)
|
||||
this.monthData.noice.push(item.noice)
|
||||
})
|
||||
})
|
||||
|
||||
if(this.feature.data.channelName){
|
||||
this.cameraData.push({
|
||||
cameraName: this.feature.data.channelName,
|
||||
channelCode: this.feature.data.channelCode
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -107,8 +124,18 @@ export default {
|
|||
typeSelect:['近7天','近30天',],
|
||||
typeSelectActive:'近7天',
|
||||
},
|
||||
cameraData: []
|
||||
|
||||
cameraData: [],
|
||||
weekData:{
|
||||
time:[],
|
||||
pm10:[],
|
||||
noice:[],
|
||||
},
|
||||
monthData:{
|
||||
time:[],
|
||||
pm10:[],
|
||||
noice:[],
|
||||
},
|
||||
chartData:{},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -119,6 +146,12 @@ export default {
|
|||
|
||||
typeSelect(item) {
|
||||
this.filterButton.typeSelectActive = item
|
||||
if(item == '近7天'){
|
||||
this.chartData = this.weekData
|
||||
}
|
||||
if(item == '近30天'){
|
||||
this.chartData = this.monthData
|
||||
}
|
||||
this.initCharts()
|
||||
},
|
||||
|
||||
|
|
@ -142,7 +175,7 @@ export default {
|
|||
show: false,
|
||||
},
|
||||
boundaryGap: ['2%', '2%'],
|
||||
data: ['1', '2', '3', '4', '5', '6', '7']
|
||||
data: this.chartData.time
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
|
|
@ -198,10 +231,14 @@ export default {
|
|||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '噪声值',
|
||||
data: [60, 30, 60, 70, 40, 60, 70],
|
||||
data: this.chartData.noice,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
|
|
@ -223,7 +260,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: '扬尘值',
|
||||
data: [30, 40, 50, 80, 90, 40, 60],
|
||||
data: this.chartData.pm10,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
|
|
@ -255,6 +292,10 @@ export default {
|
|||
const viewer = this.$el.querySelector('.images').$viewer
|
||||
viewer.show()
|
||||
},
|
||||
|
||||
openVideo(row){
|
||||
bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
|
|
@ -308,7 +349,7 @@ export default {
|
|||
}
|
||||
|
||||
.site-address {
|
||||
margin: 12px 0;
|
||||
margin: 12px 0 0 0;
|
||||
padding-left: 20px;
|
||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
|
|
@ -372,7 +413,7 @@ export default {
|
|||
}
|
||||
.site-content-left-bottom {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
margin-top: 10px;
|
||||
.filter-btn-typeSelect {
|
||||
display: flex;
|
||||
.typeSelect-btn {
|
||||
|
|
@ -399,7 +440,7 @@ export default {
|
|||
.site-content-right {
|
||||
width: 280px;
|
||||
.video-table {
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
h4 {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="details-pop">
|
||||
<div class="title">问题详情</div>
|
||||
<div>
|
||||
<div class="top">
|
||||
<p><span>道路名称：</span><span>{{feature.data.roadName||''}}</span></p>
|
||||
<p><span>路段起始：</span><span>{{feature.data.start||''}}</span></p>
|
||||
<p><span>路段结束：</span><span>{{feature.data.end||''}}</span></p>
|
||||
<p><span>PM10：</span><span>{{feature.data.pm10||''}}</span></p>
|
||||
<p><span>区市：</span><span>{{feature.data.regionName||''}}</span></p>
|
||||
<p><span>街道：</span><span>{{feature.data.streetName||''}}</span></p>
|
||||
<p><span>时间：</span><span>{{feature.data.dt||''}}</span></p>
|
||||
</div>
|
||||
<!-- <button class="button" @click="analyse(feature)">线索分析</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import bus from '@/views/layout/bus';
|
||||
export default {
|
||||
name: "",
|
||||
components: {},
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
}
|
||||
},
|
||||
},
|
||||
allMapObject: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
analyse(data){
|
||||
bus.$emit('openCauseAnalysis',data)
|
||||
// this.allMapObject.mapObj.map.closePopup();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.leaflet-popup {
|
||||
width: auto !important
|
||||
}
|
||||
.site-road-popup {
|
||||
.leaflet-popup-content {
|
||||
width: unset !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.details-pop {
|
||||
|
||||
width: 350px;
|
||||
// height: 4200px;
|
||||
color: black;
|
||||
background: rgba(24,48,76,0.9);
|
||||
position: relative;
|
||||
.item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
& > div:nth-of-type(2) {
|
||||
// height: 110px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
& > div:nth-of-type(2)::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
.top {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
p {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin:7px;
|
||||
font-size: 20px;
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
span:nth-of-type(1) {
|
||||
// width: 70px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.pic {
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
span:nth-of-type(1) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
margin: 20px 150px 30px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 144px;
|
||||
height: 50px;
|
||||
background: url("~@/assets/img/roadGovernancePop.png") no-repeat;
|
||||
color: #082d36;
|
||||
margin:0 0 10px 100px;
|
||||
line-height:10px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
::v-deep .el-upload-list__item:first-child {
|
||||
margin-top: -25px;
|
||||
}
|
||||
.title {
|
||||
height: 50px;
|
||||
padding: 0 10px;
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
color: #66ffff;
|
||||
// background: #304c76;
|
||||
position: relative;
|
||||
background: url("~@/assets/img/roadGovernancetitlebg.png") no-repeat 97px center;
|
||||
span {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
>{{item}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div key="video" v-if="tabsActiveName == '视频感知事件'">
|
||||
<div key="video" v-if="tabsActiveName == '视频感知'">
|
||||
<div class="event-num">
|
||||
<span>000</span>件
|
||||
</div>
|
||||
|
|
@ -37,7 +37,18 @@
|
|||
<div class="line"></div>
|
||||
<div id="event-time-chart"></div>
|
||||
</div>
|
||||
<div key="road" v-if="tabsActiveName == '出租车走航监测'">
|
||||
<div key="video" v-if="tabsActiveName == '物联感知'">
|
||||
<div class="event-num">
|
||||
<span>000</span>件
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div id="event-type-chart"></div>
|
||||
<div class="line"></div>
|
||||
<div id="event-state-chart"></div>
|
||||
<div class="line"></div>
|
||||
<div id="event-time-chart"></div>
|
||||
</div>
|
||||
<div key="road" v-if="tabsActiveName == '走航监测'">
|
||||
<div class="event-num">
|
||||
<span>000</span>件
|
||||
</div>
|
||||
|
|
@ -56,14 +67,15 @@
|
|||
color: '#1ffefd',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
style="background: transparent"
|
||||
>
|
||||
<el-table-column label="Top" width="50" type="index">
|
||||
<el-table-column label="Top" width="46" type="index">
|
||||
</el-table-column>
|
||||
<el-table-column label="道路" prop="roadName" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column width="84" prop="start" label="路段开始" show-overflow-tooltip>
|
||||
<el-table-column width="81" prop="start" label="路段开始" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column width="84" prop="end" label="路段结束" show-overflow-tooltip>
|
||||
<el-table-column width="81" prop="end" label="路段结束" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column width="86" prop="times" label="告警次数">
|
||||
</el-table-column>
|
||||
|
|
@ -78,8 +90,8 @@ import * as echarts from 'echarts'
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
tabsButton: ["视频感知事件","出租车走航监测"],
|
||||
tabsActiveName: "视频感知事件",
|
||||
tabsButton: ["视频感知","物联感知","走航监测"],
|
||||
tabsActiveName: "视频感知",
|
||||
filterButton:{
|
||||
typeSelect:['全部','近7天','近30天'],
|
||||
typeSelectActive:'全部',
|
||||
|
|
@ -119,14 +131,14 @@ import * as echarts from 'echarts'
|
|||
methods: {
|
||||
tabHandleClick(item) {
|
||||
this.tabsActiveName = item
|
||||
if(item == '视频感知事件') {
|
||||
if(item == '视频感知') {
|
||||
this.$nextTick( () => {
|
||||
this.initEventTypeCharts()
|
||||
this.initEventStateCharts()
|
||||
this.initEventTimeCharts()
|
||||
})
|
||||
}
|
||||
if(item == '出租车走航监测') {
|
||||
if(item == '走航监测') {
|
||||
this.$nextTick( () => {
|
||||
this.initRoadTimeCharts()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="tabsActiveName == '视频标签'" class="label-content">
|
||||
<div v-show="tabsActiveName == '视频标签'" class="label-content">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
prefix-icon="el-icon-search"
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<div v-if="tabsActiveName == '视频列表'" class="label-content">
|
||||
<div v-show="tabsActiveName == '视频列表'" class="label-content">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
suffix-icon="el-icon-search"
|
||||
|
|
@ -346,6 +346,31 @@ export default {
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,409 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2021-05-21 17:43:34
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2021-12-01 13:32:53
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="dh-view" />
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const DHWsInstance = DHWs.getInstance({
|
||||
reConnectCount: 2,
|
||||
connectionTimeout: 30 * 1000,
|
||||
messageEvents: {
|
||||
loginState() {
|
||||
console.log('aaaa');
|
||||
}
|
||||
}
|
||||
}); // 获取对象实例，使用单例模式，唯一
|
||||
DHWsInstance.detectConnectQt().then(res => {
|
||||
if (res) {
|
||||
console.info('登陆成功');
|
||||
} else {
|
||||
console.info('登陆失败,重新登录');
|
||||
DHWsInstance.login({
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
});
|
||||
// this.$Message.info('登录中...');
|
||||
DHWsInstance.on('loginState', (res) => {
|
||||
// this.isLogin = res;
|
||||
if (res) {
|
||||
// this.$Message.success('登录成功');
|
||||
// this.activePanel = 'key2'
|
||||
} else {
|
||||
// this.$Message.info('登录失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
import bus from '@/views/layout/bus';
|
||||
export default {
|
||||
props: {
|
||||
isDestroyed: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
posX: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
posY: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
channelId: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// ws: {
|
||||
// type: Object,
|
||||
// default: () => {
|
||||
// return {};
|
||||
// }
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ws: DHWsInstance,
|
||||
activePanel: 'key12580',
|
||||
isLogin: false,
|
||||
loginType: '1',
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
ctrlType: 'playerWin',
|
||||
ctrlList: [
|
||||
{
|
||||
value: 'ctrl1',
|
||||
label: '控件1',
|
||||
},
|
||||
{
|
||||
value: 'ctrl2',
|
||||
label: '控件2',
|
||||
},
|
||||
{
|
||||
value: 'ctrl3',
|
||||
label: '控件3',
|
||||
},
|
||||
],
|
||||
splitList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '1 * 1',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '2 * 2',
|
||||
},
|
||||
{
|
||||
value: 9,
|
||||
label: '3 * 3',
|
||||
},
|
||||
],
|
||||
displayModeList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '播放器预览模式',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '播放器回放模式',
|
||||
},
|
||||
],
|
||||
ctrl: 'ctrl133',
|
||||
splitNum: 1,
|
||||
displayMode: 1,
|
||||
displayTimeRange: [],
|
||||
recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
|
||||
downloadName: '',
|
||||
downTimeRange: [],
|
||||
downloadFormat: 0,
|
||||
downloadFormatList: [
|
||||
{
|
||||
value: 0,
|
||||
label: 'dav',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: 'avi',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'mp4',
|
||||
},
|
||||
],
|
||||
downloadSource: 3,
|
||||
downloadSourceList: [
|
||||
{
|
||||
value: 3,
|
||||
label: '中心录像',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '设备录像',
|
||||
},
|
||||
],
|
||||
showDownloadStreamType: false,
|
||||
downloadStreamType: 1,
|
||||
downloadStreamTypeList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '主码流',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '辅码流',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '三码流',
|
||||
},
|
||||
],
|
||||
downloadIsShow: true,
|
||||
downloadIsShowList: [
|
||||
{
|
||||
value: true,
|
||||
label: '是',
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
label: '否',
|
||||
},
|
||||
],
|
||||
// posX: 650,
|
||||
// posY: 120,
|
||||
// width: 1250,
|
||||
height: 800,
|
||||
ratio: 100,
|
||||
scrollX: 0,
|
||||
scrollXH: 0,
|
||||
scrollY: 0,
|
||||
scrollYW: 0,
|
||||
cutPosX: 0,
|
||||
cutPosY: 0,
|
||||
cutWidth: 100,
|
||||
cutHeight: 100,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
channelId() {
|
||||
console.log('监测到了节点的变化', this.channelId);
|
||||
// bus.$emit('destroyVideoSur', true);
|
||||
// this.login();
|
||||
|
||||
this.realTimeVideo();
|
||||
},
|
||||
count() {
|
||||
// this.setVisible();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log("#############################我是新的")
|
||||
// this.destroy();
|
||||
// this.login();
|
||||
},
|
||||
mounted() {
|
||||
this.realTimeVideo();
|
||||
// bus.$emit('destroyVideoSur', true);
|
||||
// this.loginOut();
|
||||
// this.login();
|
||||
// bus.$off('destroyDHView');
|
||||
// bus.$on('destroyDHView', val =>{
|
||||
// console.log('销毁弹窗插件', val);
|
||||
// if(!val) {
|
||||
// this.destroy();
|
||||
// this.loginOut();
|
||||
// } else {
|
||||
// this.login();
|
||||
// }
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
loginOut() {
|
||||
this.ws.logout({
|
||||
loginIp: _global.config.loginInfo.loginIp
|
||||
});
|
||||
},
|
||||
create() {
|
||||
// 调用创建控件接口
|
||||
if (!this.isLogin) {
|
||||
// this.$Message.info('正在登陆客户端，请稍等......');
|
||||
return false;
|
||||
}
|
||||
const params = [
|
||||
{
|
||||
ctrlType: this.ctrlType,
|
||||
ctrlCode: this.ctrl,
|
||||
ctrlProperty: {
|
||||
displayMode: this.displayMode,
|
||||
splitNum: this.splitNum,
|
||||
channelList: [{ channelId: this.channelId }],
|
||||
},
|
||||
visible: true,
|
||||
posX: this.posX,
|
||||
posY: this.posY,
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
ratio: this.ratio,
|
||||
scrollX: this.scrollX,
|
||||
scrollY: this.scrollY,
|
||||
scrollXH: this.scrollXH,
|
||||
scrollYW: this.scrollYW,
|
||||
cutList: [
|
||||
{
|
||||
posX: 0,
|
||||
posY: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
this.ws.createCtrl(params);
|
||||
this.ws.on('createCtrlResult', (res) => {
|
||||
console.info('插件返回信息', res);
|
||||
});
|
||||
},
|
||||
login() { // 调用登录接口
|
||||
this.ws.detectConnectQt().then(res => {
|
||||
if (res) { // 连接客户端成功
|
||||
this.ws.login({
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
https: 1
|
||||
});
|
||||
// this.$Message.info('登录中...');
|
||||
this.ws.on('loginState', (res) => {
|
||||
this.isLogin = res;
|
||||
if (res) {
|
||||
this.$Message.success('登录成功');
|
||||
// this.activePanel = 'key2';
|
||||
} else {
|
||||
this.$Message.info('登录失败');
|
||||
}
|
||||
});
|
||||
} else { // 连接客户端失败
|
||||
// this.$Message.info('请重新安装客户端');
|
||||
this.$confirm('未检测到相关视频插件，是否进行下载？', '提示', {
|
||||
confirmButtonText: '下载',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const agent = this.getPCNum();
|
||||
if (agent === 32) {
|
||||
// 64位操作系统
|
||||
this.downloadFile(_global.config.loginInfo.name_32, _global.config.loginInfo.url_32);
|
||||
} else {
|
||||
// 32位操作系统
|
||||
this.downloadFile(_global.config.loginInfo.name_64, _global.config.loginInfo.url_64);
|
||||
}
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
downloadFile(name, url) {
|
||||
const alink = document.createElement('a');
|
||||
alink.download = name;// 文件名,大部分浏览器兼容,IE10及以下不兼容
|
||||
alink.href = url;// 创建 url地址
|
||||
alink.click(); // 自动点击
|
||||
},
|
||||
getPCNum() {
|
||||
const agent = navigator.userAgent.toLowerCase();
|
||||
if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
|
||||
return 32;
|
||||
}
|
||||
if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
|
||||
return 64;
|
||||
}
|
||||
},
|
||||
setVisible() {
|
||||
// 调用设置控件显隐接口
|
||||
if (!this.isLogin) {
|
||||
// this.$Message.info("正在登陆客户端，请稍等......");
|
||||
return false;
|
||||
}
|
||||
const params = [
|
||||
{
|
||||
ctrlCode: this.ctrl,
|
||||
visible: !this.ws.ctrls.find((i) => {
|
||||
if (i.ctrlCode === this.ctrl) {
|
||||
return i;
|
||||
}
|
||||
}).visible,
|
||||
},
|
||||
];
|
||||
this.ws.setCtrlVisible(params);
|
||||
},
|
||||
realTimeVideo() {
|
||||
// // 调用控件实时播放接口
|
||||
// if (!this.isLogin) {
|
||||
// console.log("正在登陆客户端，请稍等......");
|
||||
// // this.$Message.info("正在登陆客户端，请稍等......");
|
||||
// return false;
|
||||
// }
|
||||
// this.displayMode = 1;
|
||||
// if (this.ws.ctrls.length === 0) {
|
||||
// console.log("请先创建控件！");
|
||||
// // this.$Message.info("请先创建控件！");
|
||||
// }
|
||||
// const params = {
|
||||
// ctrlCode: this.ctrl,
|
||||
// channelIds: [this.channelId],
|
||||
// };
|
||||
// this.ws.openCtrlPreview(params);
|
||||
console.log('播放', this.channelId);
|
||||
if (!this.isLogin) {
|
||||
// this.$Message.info('正在登陆客户端，请稍等......');
|
||||
// return false;
|
||||
this.login();
|
||||
}
|
||||
// const params = [this.channelId];
|
||||
console.log('播放', this.channelId);
|
||||
this.ws.openVideo(this.channelId);
|
||||
},
|
||||
destroy() {
|
||||
// 调用销毁控件接口
|
||||
if (!this.isLogin) {
|
||||
// this.login();
|
||||
// this.$Message.info("正在登陆客户端，请稍等......");
|
||||
return false;
|
||||
}
|
||||
console.log('销毁插件', this.ws.ctrls);
|
||||
const ctrls = this.ws.ctrls.map((i) => {
|
||||
if (i.ctrlCode === this.ctrl) {
|
||||
return i.ctrlCode;
|
||||
}
|
||||
});
|
||||
console.log('销毁的插件名称', ctrls);
|
||||
this.ws.destroyCtrl(ctrls);
|
||||
},
|
||||
},
|
||||
// beforeDestroyed() {
|
||||
// this.destroy()
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
|
@ -64,6 +64,11 @@
|
|||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<video-play
|
||||
v-if="openVideo"
|
||||
:channel-id="channelCode"
|
||||
></video-play>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -79,6 +84,7 @@ import SiteList from "./components/SiteList";
|
|||
import { selectByJdWd } from "@/api/construction/index";
|
||||
import { createSiteListPop } from "@/supermap/createMarkerPopup";
|
||||
import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
|
||||
import VideoPlay from './components/VideoPlay'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -91,6 +97,9 @@ export default {
|
|||
changeLayerBtnList: ['AI事件','视频监控','工地','道路'],
|
||||
changeLayerBtnGroup: [],
|
||||
|
||||
openVideo: false,
|
||||
channelCode:[]
|
||||
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -98,6 +107,7 @@ export default {
|
|||
complaintEvent,
|
||||
VideoList,
|
||||
SiteList,
|
||||
VideoPlay
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
|
|
@ -146,6 +156,12 @@ export default {
|
|||
bus.$on("CameraSingleDataOnMap",(labelName,data) => {
|
||||
this.addResourceTomap(labelName,data);
|
||||
})
|
||||
|
||||
bus.$off('openCurrentVideoWaterPoint')
|
||||
bus.$on('openCurrentVideoWaterPoint',channelCode => {
|
||||
this.openVideo = true;
|
||||
this.channelCode.unshift(channelCode)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
querySearchAsync(queryString, cb) {
|
||||
|
|
|
|||
|
|
@ -323,20 +323,8 @@ export default {
|
|||
|
||||
methods: {
|
||||
// 道路污染数据 昨日
|
||||
// async getRoadData() {
|
||||
// const res = await getRoadData({ dt: this.preTime });
|
||||
// //路网数据
|
||||
// this.roadData = res.data.data;
|
||||
// //道路事件 pm>200
|
||||
// // const data = res.data.data.filter((item) => item.pm10 > 150);
|
||||
// // this.tableData = data;
|
||||
// // this.dateTabs[0].data = data;
|
||||
// // this.dateTabs[0].dataNum = data.length;
|
||||
// // this.addToMap(data);
|
||||
// this.roadOnMap();
|
||||
// },
|
||||
async getRoadData() {
|
||||
const res = await getRoadData({ dt: '2022-7-7 00:00:00' });
|
||||
const res = await getRoadData({ dt: this.preTime });
|
||||
//路网数据
|
||||
this.roadData = res.data.data;
|
||||
//道路事件 pm>200
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="toady-list">
|
||||
<div class="toady-list-content">
|
||||
<div class="toady-list-rotate"></div>
|
||||
<div class="toady-list-icon"></div>
|
||||
<!-- <div class="toady-list-icon"></div> -->
|
||||
<div class="toady-list-num">易积水点<span>{{listAll.length || 0}} </span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -355,8 +355,8 @@ export default {
|
|||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background: url(../../../../assets/construction/rotateBgi.png) no-repeat;
|
||||
animation: routation 20s linear infinite;
|
||||
background: url(../../../../assets/waterPoints/rotateBgi.png) no-repeat;
|
||||
// animation: routation 20s linear infinite;
|
||||
}
|
||||
.toady-list-icon {
|
||||
position: absolute;
|
||||
|
|
@ -373,7 +373,7 @@ export default {
|
|||
height: 72px;
|
||||
top: 20px;
|
||||
left: 100px;
|
||||
background: url(../../../../assets/construction/toadyListBgi2.png)
|
||||
background: url(../../../../assets/waterPoints/toadyListBgi2.png)
|
||||
no-repeat;
|
||||
color: #fff;
|
||||
line-height: 72px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue