update
This commit is contained in:
yangxiaojiang
parent
fcb0066e1c
commit
2de58910b3
|
|
@ -126,3 +126,28 @@ export function selectWeekPmAndNoice(params) {
|
|||
})
|
||||
}
|
||||
|
||||
export function selectByDayRaise(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectByDayRaise',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function selectByDayNoice(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectByDayNoice',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function selectByDayRoadData(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectByDayRoadData',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,9 @@ import SiteListPop from '@/views/pages/construction/components/SiteListPop'
|
|||
import WaterPointPop from '@/views/pages/waterPoints/components/WaterPointPop'
|
||||
import SiteRoadPop from '@/views/pages/construction/components/SiteRoadPop'
|
||||
|
||||
|
||||
import bus from "@/views/layout/bus";
|
||||
|
||||
/**
|
||||
* 生成专题通用弹窗Dom
|
||||
* @param responseData
|
||||
|
|
@ -206,6 +209,8 @@ function creatNucleicAcidMonitoringSites(feature) {
|
|||
|
||||
//在建工地走航监测弹窗
|
||||
function createSiteRoadPop(feature) {
|
||||
bus.$emit('roadCauseAnalysis',feature.data)
|
||||
|
||||
const popupDom = new Dom({
|
||||
template: '<Site-Road-pop :feature="feature"></Site-Road-pop>',
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="toady-list-content">
|
||||
<div class="toady-list-rotate"></div>
|
||||
<div class="toady-list-icon"></div>
|
||||
<div class="toady-list-num">今日事件<span> 36 </span>件</div>
|
||||
<div class="toady-list-num">今日事件<span>{{todayListNum || 0}} </span>件</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-box">
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-show="tabsActiveName == '物联感知'">
|
||||
<div class="event-details" v-for="item in eventListData" :key="item.index">
|
||||
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openSiteDialog(item)">
|
||||
<div class="event-details-title">
|
||||
<span>{{item.projectName||''}}</span>
|
||||
<span>{{item.pushTime||''}}</span>
|
||||
|
|
@ -80,6 +80,7 @@
|
|||
@current-change="pageChange"
|
||||
:total="total"
|
||||
:current-page.sync="currentPage"
|
||||
:page-size = 5
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
|
@ -121,6 +122,12 @@ export default {
|
|||
components: {
|
||||
StatisticalAnalysis,
|
||||
},
|
||||
props: {
|
||||
todayListNum:{
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const currentDate = new Date();
|
||||
currentDate.setTime(currentDate.getTime());
|
||||
|
|
@ -128,7 +135,7 @@ export default {
|
|||
this.preTime =
|
||||
currentDate.getFullYear() +
|
||||
"-" +
|
||||
(currentDate.getMonth() + 1) +
|
||||
((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) +
|
||||
"-" +
|
||||
currentDate.getDate() +
|
||||
" " +
|
||||
|
|
@ -137,12 +144,26 @@ export default {
|
|||
mounted() {
|
||||
this.getRoadData()
|
||||
this.selectRoadData()
|
||||
|
||||
|
||||
selectRaise({pageSize: 5,page: 1,}).then((res) => {
|
||||
this.$parent.allListDataNum += res.data.data.sum;
|
||||
});
|
||||
selectNoiceEvent({pageSize: 5,page: 1,}).then((res) => {
|
||||
this.$parent.allListDataNum += res.data.data.sum;
|
||||
});
|
||||
selectRoadData({pageSize: 5,page: 1,}).then((res) => {
|
||||
this.$parent.allListDataNum += res.data.data.sum;
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
tabHandleClick(item) {
|
||||
this.tabsActiveName = item
|
||||
this.currentPage = 1
|
||||
if(item == '视频感知'){
|
||||
this.filterButton.typeSelect = []
|
||||
|
||||
}
|
||||
if(item == '物联感知'){
|
||||
|
|
@ -250,6 +271,8 @@ export default {
|
|||
|
||||
openRoadDialog(data) {
|
||||
console.log(data)
|
||||
this.$parent.removeRoadCauseAnalysis()
|
||||
this.$parent.hiMapFun.removeLayerByLayerName("roadPoint");
|
||||
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.lat, lng: data.lng });
|
||||
let dataEvent = [{
|
||||
latLng: { lat: data.lat, lng: data.lng },
|
||||
|
|
@ -262,7 +285,12 @@ export default {
|
|||
"roadPoint",
|
||||
createSiteRoadPop
|
||||
);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
openSiteDialog(data) {
|
||||
bus.$emit("openCauseAnalysis", data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -466,14 +494,14 @@ export default {
|
|||
// margin-top: 30px;
|
||||
width: 100%;
|
||||
// height: 625px;
|
||||
height: 570px;
|
||||
height: 644px;
|
||||
position: relative;
|
||||
|
||||
.event-details {
|
||||
margin-top: 10px;
|
||||
margin-top: 12px;
|
||||
// margin-top: 18px;
|
||||
width: 100%;
|
||||
max-height: 100px;
|
||||
height: 110px;
|
||||
padding-right: 8px;
|
||||
background: linear-gradient(90deg, #173759 0, #133150 100%);
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,518 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="title-bg"></div>
|
||||
<div class="title">
|
||||
<span>{{ feature.data.channelName || feature.data.name ||''}}</span>
|
||||
</div>
|
||||
<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 || 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 || feature.data.noice == 0 ? feature.data.noice : '' }}</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="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',
|
||||
}"
|
||||
style="background: transparent"
|
||||
>
|
||||
<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 {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
|
||||
import { time } from 'highcharts';
|
||||
export default {
|
||||
name: "",
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
this.weekData.time.push(item.pushTime)
|
||||
this.weekData.pm10.push(item.pm10)
|
||||
this.weekData.noice.push(item.noice)
|
||||
})
|
||||
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 {
|
||||
filterButton:{
|
||||
typeSelect:['近7天','近30天',],
|
||||
typeSelectActive:'近7天',
|
||||
},
|
||||
cameraData: [],
|
||||
weekData:{
|
||||
time:[],
|
||||
pm10:[],
|
||||
noice:[],
|
||||
},
|
||||
monthData:{
|
||||
time:[],
|
||||
pm10:[],
|
||||
noice:[],
|
||||
},
|
||||
chartData:{},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// particularsClick(data){
|
||||
// console.log(data)
|
||||
// bus.$emit("mainClick", data);
|
||||
// },
|
||||
|
||||
typeSelect(item) {
|
||||
this.filterButton.typeSelectActive = item
|
||||
if(item == '近7天'){
|
||||
this.chartData = this.weekData
|
||||
}
|
||||
if(item == '近30天'){
|
||||
this.chartData = this.monthData
|
||||
}
|
||||
this.initCharts()
|
||||
},
|
||||
|
||||
initCharts () {
|
||||
const option = {
|
||||
grid: {
|
||||
bottom: 34,
|
||||
},
|
||||
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',
|
||||
name: 'dB',
|
||||
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']
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: 'ug/m³',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255, 255, 255,.8)'
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255,.8)',
|
||||
show: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
max:100,
|
||||
min: 0,
|
||||
},
|
||||
],
|
||||
color: ['#309afe','#fab228'],
|
||||
legend: {
|
||||
right: '16%',
|
||||
top: '12%',
|
||||
icon: 'line',
|
||||
data: ['噪声值','扬尘值',],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '噪声值',
|
||||
data: this.chartData.noice,
|
||||
type: 'line',
|
||||
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.pm10,
|
||||
type: 'line',
|
||||
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()
|
||||
},
|
||||
|
||||
openVideo(row){
|
||||
bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
|
||||
},
|
||||
},
|
||||
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: 12px 0 0 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;
|
||||
.site-content-left-top {
|
||||
width: 100%;
|
||||
height: 107px;
|
||||
padding: 24px 0 0 18px;
|
||||
background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
|
||||
display: flex;
|
||||
.noise {
|
||||
height: 60px;
|
||||
width: 180px;
|
||||
border-right: 1px solid #2c619c;
|
||||
display: flex;
|
||||
div {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
p {
|
||||
margin: 2px;
|
||||
}
|
||||
span {
|
||||
color: #1ffefd;
|
||||
font-size: 24px;
|
||||
}
|
||||
p:nth-child(2) {
|
||||
color: rgba(255, 255, 255,.6)
|
||||
}
|
||||
}
|
||||
}
|
||||
.raise-dust {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
div {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
p {
|
||||
margin: 2px;
|
||||
}
|
||||
span {
|
||||
color: #1ffefd;
|
||||
font-size: 24px;
|
||||
}
|
||||
p:nth-child(2) {
|
||||
color: rgba(255, 255, 255,.6)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-content-left-bottom {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
.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;
|
||||
.video-table {
|
||||
margin-top: 10px;
|
||||
h4 {
|
||||
color: #fff;
|
||||
}
|
||||
.el-table{
|
||||
margin-top: 8px;
|
||||
border: 1px solid #325d94;
|
||||
.el-table__body-wrapper{
|
||||
height: 90px;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
|
@ -34,6 +34,7 @@
|
|||
color: '#1ffefd',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
style="background: transparent"
|
||||
>
|
||||
<el-table-column width="114" label="工地名称" prop="projectName"
|
||||
show-overflow-tooltip>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="details-pop">
|
||||
<div class="title">问题详情</div>
|
||||
<div class="title-bg"></div>
|
||||
<div class="title">事件详情</div>
|
||||
<div>
|
||||
<div class="top">
|
||||
<p><span>道路名称：</span><span>{{feature.data.roadName||''}}</span></p>
|
||||
|
|
@ -56,8 +57,18 @@ export default {
|
|||
width: auto !important
|
||||
}
|
||||
.site-road-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: unset !important;
|
||||
|
||||
}
|
||||
.leaflet-popup-close-button {
|
||||
color: #3afefc !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -87,14 +98,13 @@ export default {
|
|||
p {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin:7px;
|
||||
font-size: 20px;
|
||||
margin: 7px;
|
||||
span {
|
||||
color: #fff;
|
||||
color: #20fefd;
|
||||
}
|
||||
span:nth-of-type(1) {
|
||||
// width: 70px;
|
||||
margin-left: 10px;
|
||||
span:nth-child(1) {
|
||||
width: 90px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
}
|
||||
.pic {
|
||||
|
|
@ -128,18 +138,19 @@ export default {
|
|||
::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 {
|
||||
.title-bg {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
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;
|
||||
padding: 12px 0 0 19px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -224,20 +224,21 @@ export default {
|
|||
},
|
||||
treeCameraClick(data) {
|
||||
console.log(data)
|
||||
// if(data.channelCode){
|
||||
// const cameraTree = [{
|
||||
// latLng: { lat: data.gpsY, lng: data.gpsX },
|
||||
// data: data,
|
||||
// type:'cameraTree'
|
||||
// }]
|
||||
// this.hiMapFun.removeLayerByLayerName("cameraTree");
|
||||
// this.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
|
||||
// const arr = [0,0.0,'','0','0.0']
|
||||
// if(arr.indexOf(data.gpsX) == -1){
|
||||
// this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
|
||||
// this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
|
||||
// }
|
||||
// }
|
||||
this.$parent.removeRoadCauseAnalysis()
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -38,12 +38,12 @@
|
|||
|
||||
<div class="eventNum">
|
||||
累计事件数量
|
||||
<p><span>1236</span>件</p>
|
||||
<p><span>{{allListDataNum}}</span>件</p>
|
||||
</div>
|
||||
|
||||
<!-- 事件感知 -->
|
||||
<div class="complaintContent">
|
||||
<complaint-event ref="complaintEventRef"></complaint-event>
|
||||
<complaint-event ref="complaintEventRef" :todayListNum="todayListNum"></complaint-event>
|
||||
</div>
|
||||
|
||||
<!-- 视频标签、列表 -->
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
<!-- 工地列表 -->
|
||||
<div class="siteList">
|
||||
<site-list></site-list>
|
||||
<site-list ref="siteListRef"></site-list>
|
||||
</div>
|
||||
|
||||
<div class="changeLayer">
|
||||
|
|
@ -81,10 +81,11 @@ import bus from "@/views/layout/bus";
|
|||
import complaintEvent from "./components/ComplaintEvent";
|
||||
import VideoList from "./components/VideoList";
|
||||
import SiteList from "./components/SiteList";
|
||||
import { selectByJdWd } from "@/api/construction/index";
|
||||
import { selectByJdWd,selectByDayRaise,selectByDayNoice,selectByDayRoadData } from "@/api/construction/index";
|
||||
import { createSiteListPop } from "@/supermap/createMarkerPopup";
|
||||
import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
|
||||
import VideoPlay from './components/VideoPlay'
|
||||
import { selectAllByGps } from '@/api/road'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -98,8 +99,10 @@ export default {
|
|||
changeLayerBtnGroup: [],
|
||||
|
||||
openVideo: false,
|
||||
channelCode:[]
|
||||
channelCode:[],
|
||||
|
||||
todayListNum: 0,
|
||||
allListDataNum: 0,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -118,10 +121,25 @@ export default {
|
|||
);
|
||||
|
||||
|
||||
selectByDayRaise().then((res) => {
|
||||
this.todayListNum += res.data.data.sum
|
||||
})
|
||||
selectByDayNoice().then((res) => {
|
||||
this.todayListNum += res.data.data.sum
|
||||
|
||||
})
|
||||
selectByDayRoadData().then((res) => {
|
||||
this.todayListNum += res.data.data.sum
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 根据经纬度查询半径内所有的工地
|
||||
bus.$off("openCauseAnalysis");
|
||||
bus.$on("openCauseAnalysis", (row) => {
|
||||
|
||||
this.removeRoadCauseAnalysis()
|
||||
// this.timeRegion = data.data.dt;
|
||||
// this.hiMapFun.removerPolygon();
|
||||
this.hiMapFun.removeLayerByLayerName("constructionSite");
|
||||
|
|
@ -144,6 +162,7 @@ export default {
|
|||
|
||||
bus.$off("roadOnMap");
|
||||
bus.$on("roadOnMap",(roadData) => {
|
||||
this.removeRoadCauseAnalysis()
|
||||
this.roadOnMap(roadData);
|
||||
})
|
||||
|
||||
|
|
@ -154,6 +173,8 @@ export default {
|
|||
|
||||
bus.$off("CameraSingleDataOnMap");
|
||||
bus.$on("CameraSingleDataOnMap",(labelName,data) => {
|
||||
|
||||
this.removeRoadCauseAnalysis()
|
||||
this.addResourceTomap(labelName,data);
|
||||
})
|
||||
|
||||
|
|
@ -162,6 +183,21 @@ export default {
|
|||
this.openVideo = true;
|
||||
this.channelCode.unshift(channelCode)
|
||||
})
|
||||
|
||||
bus.$off("openCurrentVideoSurveillance");
|
||||
bus.$on("openCurrentVideoSurveillance", (channelCode) => {
|
||||
this.openVideo = true;
|
||||
this.channelCode.unshift(channelCode);
|
||||
});
|
||||
|
||||
bus.$off("roadCauseAnalysis");
|
||||
bus.$on("roadCauseAnalysis", (data) => {
|
||||
this.removeRoadCauseAnalysis()
|
||||
|
||||
this.circle({ lat: Number(data.lat), lng: Number(data.lng) });
|
||||
this.selectAllByGps(data);
|
||||
this.WithinRadiusSite(data)
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
querySearchAsync(queryString, cb) {
|
||||
|
|
@ -264,6 +300,8 @@ export default {
|
|||
},
|
||||
|
||||
layerHandleChange(item) {
|
||||
this.removeRoadCauseAnalysis()
|
||||
|
||||
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
|
||||
switch (item) {
|
||||
case "道路":
|
||||
|
|
@ -275,7 +313,21 @@ export default {
|
|||
this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
|
||||
break;
|
||||
case "工地":
|
||||
|
||||
this.hiMapFun.removeLayerByLayerName("constructionSite");
|
||||
let dataEvent = []
|
||||
this.$refs.siteListRef.siteData.forEach((item) => {
|
||||
dataEvent.push({
|
||||
latLng: { lat: Number(item.wd), lng: Number(item.jd) },
|
||||
data: item,
|
||||
type: "site",
|
||||
});
|
||||
});
|
||||
this.hiMapFun.addPointsToMap(
|
||||
dataEvent,
|
||||
"construction.png",
|
||||
"constructionSite",
|
||||
createSiteListPop
|
||||
);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
|
@ -291,7 +343,7 @@ export default {
|
|||
this.hiMapFun.removeLayerByLayerName('全部')
|
||||
break;
|
||||
case "工地":
|
||||
|
||||
this.hiMapFun.removeLayerByLayerName("constructionSite");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
|
@ -314,6 +366,45 @@ export default {
|
|||
});
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
|
||||
},
|
||||
|
||||
circle(latlng) {
|
||||
this.hiMapFun.addCircleToMap(latlng, 3800);
|
||||
},
|
||||
|
||||
async selectAllByGps(data) {
|
||||
const param = {
|
||||
gpsX: data.lng,
|
||||
gpsY: data.lat,
|
||||
radius: 3000,
|
||||
};
|
||||
|
||||
const res = await selectAllByGps(param);
|
||||
console.log(res);
|
||||
const dataEvent = [];
|
||||
res.data.data.forEach((item) => {
|
||||
const arr = [0, 0.0, "", "0", "0.0"];
|
||||
if (arr.indexOf(item.gpsX) == -1) {
|
||||
dataEvent.push({
|
||||
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
|
||||
data: item,
|
||||
type: "videoSurveillance",
|
||||
});
|
||||
}
|
||||
});
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||
dataEvent,
|
||||
"videoSurveillance.png",
|
||||
"videoSurveillance",
|
||||
createCameraDetailsPop
|
||||
);
|
||||
},
|
||||
|
||||
removeRoadCauseAnalysis() {
|
||||
this.hiMapFun.removerPolygon();
|
||||
this.hiMapFun.removeLayerByLayerName("videoSurveillance");
|
||||
this.hiMapFun.removeLayerByLayerName("constructionSite");
|
||||
this.hiMapFun.removeLayerByLayerName("roadPoint")
|
||||
},
|
||||
},
|
||||
beforeDestroy() {},
|
||||
};
|
||||
|
|
@ -414,7 +505,7 @@ export default {
|
|||
z-index: 1000;
|
||||
left: 10px;
|
||||
top: 90px;
|
||||
height:908px;
|
||||
height:980px;
|
||||
width: 478px;
|
||||
background: rgba($color: #05213b, $alpha: .85)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -242,40 +242,12 @@ export default {
|
|||
created() {
|
||||
const currentDate = new Date();
|
||||
currentDate.setTime(currentDate.getTime());
|
||||
this.monthTime =
|
||||
currentDate.getFullYear() +
|
||||
"-" +
|
||||
(currentDate.getMonth() + 1) +
|
||||
"-" +
|
||||
"01" +
|
||||
" " +
|
||||
"00:00:00";
|
||||
this.currentTime =
|
||||
currentDate.getFullYear() +
|
||||
"-" +
|
||||
(currentDate.getMonth() + 1) +
|
||||
"-" +
|
||||
currentDate.getDate() +
|
||||
" " +
|
||||
"00:00:00";
|
||||
this.monthTime = currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + "01" + " " + "00:00:00";
|
||||
this.currentTime = currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + currentDate.getDate() + " " + "00:00:00";
|
||||
currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
|
||||
this.preTime =
|
||||
currentDate.getFullYear() +
|
||||
"-" +
|
||||
(currentDate.getMonth() + 1) +
|
||||
"-" +
|
||||
currentDate.getDate() +
|
||||
" " +
|
||||
"00:00:00";
|
||||
this.preTime =currentDate.getFullYear() +"-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + currentDate.getDate() + " " +"00:00:00";
|
||||
currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1);
|
||||
this.weekTime =
|
||||
currentDate.getFullYear() +
|
||||
"-" +
|
||||
(currentDate.getMonth() + 1) +
|
||||
"-" +
|
||||
currentDate.getDate() +
|
||||
" " +
|
||||
"00:00:00";
|
||||
this.weekTime =currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + currentDate.getDate() + " " + "00:00:00";
|
||||
},
|
||||
// 生命周期 - 挂载完成（访问DOM元素）
|
||||
mounted() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue