feat:工地、重点区域功能补充
This commit is contained in:
liumingchun1
parent
e9d0592dde
commit
5664a37a17
|
|
@ -15,4 +15,49 @@ export function selectKeyAreaList(params) {
|
||||||
params,
|
params,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 重点区域根据区域名称进行查询
|
||||||
|
export function selectByLikeName(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/keyArea/selectByLikeName',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 重点区域根据类型进行筛选
|
||||||
|
export function selectKeyArea(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/keyArea/selectKeyArea',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重点区域--视频所有事件
|
||||||
|
export function selectByAreaEvent(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/keyArea/selectByAreaEvent',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重点区域--视频当天事件
|
||||||
|
export function selectByDayAreaEvent(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/keyArea/selectByDayAreaEvent',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据统计--事件趋势
|
||||||
|
export function selectMonthAreaEvent(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/keyArea/selectMonthAreaEvent',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -21,6 +21,14 @@ export function selectMonthNoice() {
|
||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//噪声
|
||||||
|
export function selectNoiceEvent(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectNoiceEvent',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
// 扬尘今日
|
// 扬尘今日
|
||||||
export function selectDayPm10() {
|
export function selectDayPm10() {
|
||||||
return request({
|
return request({
|
||||||
|
|
@ -42,6 +50,14 @@ export function selectMonthPm10() {
|
||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//扬尘
|
||||||
|
export function selectRaise(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectRaise',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
// 根据工地名搜索工地
|
// 根据工地名搜索工地
|
||||||
export function selectByProjectName(params) {
|
export function selectByProjectName(params) {
|
||||||
return request({
|
return request({
|
||||||
|
|
@ -90,19 +106,19 @@ export function selectMonthAll(params) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//扬尘
|
// 查询当天工地视频感知事件
|
||||||
export function selectRaise(params) {
|
export function selectDayVideo(params) {
|
||||||
return request({
|
return request({
|
||||||
url: 'api/project/building/selectRaise',
|
url: 'api/project/building/selectByEvent',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params,
|
params,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//噪声
|
// 查询全部工地视频感知事件
|
||||||
export function selectNoiceEvent(params) {
|
export function selectAllVideo(params) {
|
||||||
return request({
|
return request({
|
||||||
url: 'api/project/building/selectNoiceEvent',
|
url: 'api/project/building/selectByAllEvent',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params,
|
params,
|
||||||
})
|
})
|
||||||
|
|
@ -150,4 +166,103 @@ export function selectByDayRoadData(params) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 数据统计--查询七天扬尘事件
|
||||||
|
export function selectByWeekNaise(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectByWeekNaise',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 数据统计--查询30天扬尘事件
|
||||||
|
export function selectByMonthNaise(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectByMonthNaise',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据统计--查询七天噪声事件
|
||||||
|
export function selectByWeekNoice(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectByWeekNoice',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 数据统计--查询30天噪声事件
|
||||||
|
export function selectByMonthNoice(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectByMonthNoice',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据统计--查询七天视频事件
|
||||||
|
export function selectByWeekEvent(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectByWeekEvent',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 数据统计--查询30天视频事件
|
||||||
|
export function selectByMonthEvent(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectByMonthEvent',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据统计-视频事件时间趋势
|
||||||
|
export function selectMonthCurrentByEvent(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectMonthCurrentByEvent',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 数据统计-物联事件时间趋势
|
||||||
|
export function selectMonthCurrentByBuilding(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectMonthCurrentByBuilding',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 数据统计-走航表格数据--全部
|
||||||
|
export function selectRoadDataCountEvent(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectRoadDataCountEvent',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 数据统计-走航表格数据--近7天
|
||||||
|
export function selectRoadDataWeekEvent(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectRoadDataWeekEvent',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 数据统计-走航表格数据--近30天
|
||||||
|
export function selectRoadDataMonthEvent(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectRoadDataMonthEvent',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 数据统计-走航事件时间趋势
|
||||||
|
export function selectMonthCurrentByRoadData(params) {
|
||||||
|
return request({
|
||||||
|
url: 'api/project/building/selectMonthCurrentByRoadData',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,7 @@ import EventListDetailsPop from '@/views/pages/civilizedCity/components/EventLis
|
||||||
import SiteListPop from '@/views/pages/construction/components/SiteListPop'
|
import SiteListPop from '@/views/pages/construction/components/SiteListPop'
|
||||||
import WaterPointPop from '@/views/pages/waterPoints/components/WaterPointPop'
|
import WaterPointPop from '@/views/pages/waterPoints/components/WaterPointPop'
|
||||||
import SiteRoadPop from '@/views/pages/construction/components/SiteRoadPop'
|
import SiteRoadPop from '@/views/pages/construction/components/SiteRoadPop'
|
||||||
|
import ImportantAreaPop from '@/views/pages/area/components/ImportantAreaPop'
|
||||||
|
|
||||||
|
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
|
|
@ -226,6 +227,25 @@ function createSiteRoadPop(feature) {
|
||||||
})
|
})
|
||||||
return popupDom.initDom()
|
return popupDom.initDom()
|
||||||
}
|
}
|
||||||
|
// 重点区域弹窗
|
||||||
|
function createImportantAreaPop(feature) {
|
||||||
|
bus.$emit('areaCauseAnalysis',feature.data)
|
||||||
|
|
||||||
|
const popupDom = new Dom({
|
||||||
|
template: '<Important-Area-pop :feature="feature"></Important-Area-pop>',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
feature: feature,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
ImportantAreaPop
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return popupDom.initDom()
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* 生成专题企业信息通用弹窗Dom
|
* 生成专题企业信息通用弹窗Dom
|
||||||
* @param resourceTitle
|
* @param resourceTitle
|
||||||
|
|
@ -696,4 +716,5 @@ export {
|
||||||
createSiteListPop,
|
createSiteListPop,
|
||||||
createWaterPointPop,
|
createWaterPointPop,
|
||||||
createSiteRoadPop,
|
createSiteRoadPop,
|
||||||
|
createImportantAreaPop
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<el-dropdown trigger="click">
|
<!-- <el-dropdown trigger="click">
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link">
|
||||||
{{ listTypeSelect || '全部'}}<i class="el-icon-arrow-down el-icon--right"></i>
|
{{ listTypeSelect || '全部'}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
</el-dropdown-item
|
</el-dropdown-item
|
||||||
>
|
>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</el-dropdown>
|
</el-dropdown> -->
|
||||||
<div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
|
<div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
|
||||||
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
|
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
|
||||||
<div class="event-details-title">
|
<div class="event-details-title">
|
||||||
|
|
@ -72,20 +72,21 @@
|
||||||
<p>事件描述:{{ item.eventCnName || ''}}</p>
|
<p>事件描述:{{ item.eventCnName || ''}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-pagination
|
<!-- <el-pagination
|
||||||
v-if="total==0"
|
v-if="total==0"
|
||||||
background
|
background
|
||||||
layout="prev, pager, next"
|
layout="prev, pager, next"
|
||||||
@current-change="pageChange"
|
@current-change="pageChange"
|
||||||
:page-count="pageCount"
|
:page-size = 4
|
||||||
|
:total="total"
|
||||||
:current-page="currentPage"
|
:current-page="currentPage"
|
||||||
>
|
>
|
||||||
</el-pagination>
|
</el-pagination> -->
|
||||||
<el-pagination
|
<el-pagination
|
||||||
v-else
|
|
||||||
background
|
background
|
||||||
layout="prev, pager, next"
|
layout="prev, pager, next"
|
||||||
@current-change="pageChange"
|
@current-change="pageChange"
|
||||||
|
:page-size = 4
|
||||||
:total="total"
|
:total="total"
|
||||||
:current-page="currentPage"
|
:current-page="currentPage"
|
||||||
>
|
>
|
||||||
|
|
@ -96,7 +97,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
|
import { selectByAreaEvent, selectByDayAreaEvent } from "@/api/area";
|
||||||
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
|
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
import {
|
import {
|
||||||
|
|
@ -118,7 +119,7 @@ export default {
|
||||||
},
|
},
|
||||||
eventListData: [],
|
eventListData: [],
|
||||||
preTime: "",
|
preTime: "",
|
||||||
pageCount: 0,
|
// pageCount: 0,
|
||||||
total:0,
|
total:0,
|
||||||
currentPage:1,
|
currentPage:1,
|
||||||
roadData:[],
|
roadData:[],
|
||||||
|
|
@ -149,14 +150,15 @@ export default {
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 4,
|
pageSize: 4,
|
||||||
};
|
};
|
||||||
selectEvent(params).then((res) => {
|
selectByAreaEvent(params).then((res) => {
|
||||||
this.eventListData = res.data.data.events
|
this.eventListData = res.data.data.events
|
||||||
this.pageCount = res.data.data.page
|
this.total = res.data.data.sum
|
||||||
|
this.$parent.allListDataNum = res.data.data.sum;
|
||||||
});
|
});
|
||||||
|
|
||||||
selectByTime().then((res)=>{
|
selectByDayAreaEvent().then((res)=>{
|
||||||
if(res.data.data){
|
if(res.data.data.sum){
|
||||||
this.todayListNum = res.data.data.length
|
this.todayListNum = res.data.data.sum
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -187,10 +189,9 @@ export default {
|
||||||
pageChange(val) {
|
pageChange(val) {
|
||||||
this.currentPage = val
|
this.currentPage = val
|
||||||
if(this.listTypeSelect == '全部'){
|
if(this.listTypeSelect == '全部'){
|
||||||
selectEvent({ pageSize: 4,page: val,}).then((res) => {
|
selectByAreaEvent({ pageSize: 4,page: val,}).then((res) => {
|
||||||
this.eventListData = res.data.data.events
|
this.eventListData = res.data.data.events
|
||||||
this.pageCount = res.data.data.page
|
this.total = res.data.data.sum
|
||||||
this.total = 0
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
selectByName({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
|
selectByName({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
|
||||||
|
|
@ -198,7 +199,7 @@ export default {
|
||||||
// console.log(res.data.data)
|
// console.log(res.data.data)
|
||||||
this.eventListData = res.data.data.events;
|
this.eventListData = res.data.data.events;
|
||||||
this.total = res.data.data.sum
|
this.total = res.data.data.sum
|
||||||
this.pageCount = 0
|
// this.pageCount = 0
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -207,10 +208,9 @@ export default {
|
||||||
this.currentPage = 1
|
this.currentPage = 1
|
||||||
this.listTypeSelect = item;
|
this.listTypeSelect = item;
|
||||||
if(item == '全部'){
|
if(item == '全部'){
|
||||||
selectEvent({ pageSize: 4,page: 1,}).then((res) => {
|
selectAllVideo({ pageSize: 4,page: 1,}).then((res) => {
|
||||||
this.eventListData = res.data.data.events
|
this.eventListData = res.data.data.data
|
||||||
this.pageCount = res.data.data.page
|
this.total = res.data.data.sum
|
||||||
this.total = 0
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
selectByName({eventNewName: item, pageSize: 4,page: 1,}).then((res) => {
|
selectByName({eventNewName: item, pageSize: 4,page: 1,}).then((res) => {
|
||||||
|
|
@ -218,7 +218,7 @@ export default {
|
||||||
// console.log(res.data.data)
|
// console.log(res.data.data)
|
||||||
this.eventListData = res.data.data.events;
|
this.eventListData = res.data.data.events;
|
||||||
this.total = res.data.data.sum
|
this.total = res.data.data.sum
|
||||||
this.pageCount = 0
|
// this.pageCount = 0
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,478 +1,486 @@
|
||||||
<template>
|
<template>
|
||||||
<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>{{ feature.data.projectName || "" }}</span>
|
<span>{{ feature.data.areaName || "" }}</span>
|
||||||
<span v-if="feature.data.yjsg=='是'">夜间</span>
|
</div>
|
||||||
</div>
|
<div class="site-address">{{ feature.data.location || "" }}</div>
|
||||||
<div class="site-address">{{ feature.data.sgwz || "" }}</div>
|
<div class="site-content">
|
||||||
<div class="site-content">
|
<div class="site-content-left">
|
||||||
<div class="site-content-left">
|
<div>
|
||||||
<div class="site-content-left-top">
|
<div>管理单位：{{ feature.data.management || "" }}</div>
|
||||||
<div class="noise">
|
<el-tooltip :content="feature.data.about">
|
||||||
<img src="../../../../assets/construction/noise.png" alt="">
|
<div class="left-mid-line" style="text-overflow:ellipsis">景区简介：{{ getAbout(feature.data.about)}}</div>
|
||||||
<div>
|
</el-tooltip>
|
||||||
<p>噪声</p>
|
</div>
|
||||||
<p><span>{{ feature.data.noice || "" }}</span>dB</p>
|
<div class="area-content-left-top">
|
||||||
</div>
|
<div>
|
||||||
</div>
|
<div>当前人数</div>
|
||||||
<div class="raise-dust">
|
<div>{{ feature.data.allNums || "0" }}人</div>
|
||||||
<img src="../../../../assets/construction/raiseDust.png" alt="">
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>扬尘</p>
|
<div>本地人数</div>
|
||||||
<p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
|
<div>{{ feature.data.localNums || "0" }}人</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
</div>
|
<div>外地人数</div>
|
||||||
<div class="site-content-left-bottom">
|
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
|
||||||
<div class="filter-btn-typeSelect">
|
</div>
|
||||||
<div class="typeSelect-btn"
|
<!-- <div class="noise">
|
||||||
v-for="item in filterButton.typeSelect"
|
<img src="../../../../assets/construction/noise.png" alt="">
|
||||||
:key="item"
|
<div>
|
||||||
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
|
<p>噪声</p>
|
||||||
@click="typeSelect(item)"
|
<p><span>{{ feature.data.noice || "" }}</span>dB</p>
|
||||||
>{{item}}</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="chart"></div>
|
<div class="raise-dust">
|
||||||
</div>
|
<img src="../../../../assets/construction/raiseDust.png" alt="">
|
||||||
</div>
|
<div>
|
||||||
<div class="site-content-right">
|
<p>扬尘</p>
|
||||||
<div
|
<p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
|
||||||
class="images"
|
</div>
|
||||||
v-viewer="{movable: false}"
|
</div> -->
|
||||||
style="
|
</div>
|
||||||
width: 280px;
|
<div class="site-content-left-bottom">
|
||||||
height: 158px;
|
<div class="filter-btn-typeSelect">
|
||||||
cursor: pointer;
|
<div class="typeSelect-btn"
|
||||||
"
|
v-for="item in filterButton.typeSelect"
|
||||||
>
|
:key="item"
|
||||||
<img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
|
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
|
||||||
</div>
|
@click="typeSelect(item)"
|
||||||
<div class="video-table">
|
>{{item}}</div>
|
||||||
<h4>周边监控</h4>
|
</div>
|
||||||
<el-table
|
<div id="chart"></div>
|
||||||
:data="cameraData"
|
</div>
|
||||||
:cell-style="{
|
</div>
|
||||||
color: '#fff',
|
<div class="site-content-right">
|
||||||
cursor: 'pointer',
|
<!-- <div
|
||||||
'background-color': '#18304c',
|
class="images"
|
||||||
borderColor: '#325d94'
|
v-viewer="{movable: false}"
|
||||||
}"
|
style="
|
||||||
:header-cell-style="{
|
width: 280px;
|
||||||
color: '#1ffefd',
|
height: 158px;
|
||||||
borderColor: '#325d94',
|
cursor: pointer;
|
||||||
'background-color': '#2b4b7a',
|
"
|
||||||
}"
|
>
|
||||||
>
|
<img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
|
||||||
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
</div> -->
|
||||||
</el-table-column>
|
<div class="images img-container">
|
||||||
<el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
|
<!-- <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-table>
|
<el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl" :preview-src-list="[feature.data.picUrl]" alt="" />
|
||||||
</div>
|
<span v-else>暂无图片</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="video-table">
|
||||||
</div>
|
<h4>周边监控</h4>
|
||||||
</template>
|
<el-table
|
||||||
<script>
|
:data="cameraData"
|
||||||
import bus from "@/views/layout/bus";
|
:cell-style="{
|
||||||
import 'viewerjs/dist/viewer.css'
|
color: '#fff',
|
||||||
import { directive as viewer } from "v-viewer"
|
cursor: 'pointer',
|
||||||
import * as echarts from 'echarts'
|
'background-color': '#18304c',
|
||||||
import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
|
borderColor: '#325d94'
|
||||||
export default {
|
}"
|
||||||
name: "",
|
:header-cell-style="{
|
||||||
props: {
|
color: '#1ffefd',
|
||||||
feature: {
|
borderColor: '#325d94',
|
||||||
type: Object,
|
'background-color': '#2b4b7a',
|
||||||
default: () => {
|
}"
|
||||||
return {};
|
>
|
||||||
},
|
<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>
|
||||||
mounted() {
|
</el-table>
|
||||||
console.log(this.feature);
|
</div>
|
||||||
selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
</div>
|
||||||
console.log(res)
|
</div>
|
||||||
})
|
</div>
|
||||||
selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
</template>
|
||||||
console.log(res)
|
<script>
|
||||||
})
|
import bus from "@/views/layout/bus";
|
||||||
this.$nextTick( () => {
|
import 'viewerjs/dist/viewer.css'
|
||||||
this.initCharts()
|
import { directive as viewer } from "v-viewer"
|
||||||
})
|
import * as echarts from 'echarts'
|
||||||
},
|
import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
|
||||||
data() {
|
export default {
|
||||||
return {
|
name: "",
|
||||||
filterButton:{
|
props: {
|
||||||
typeSelect:['近7天','近30天',],
|
feature: {
|
||||||
typeSelectActive:'近7天',
|
type: Object,
|
||||||
},
|
default: () => {
|
||||||
cameraData: []
|
return {};
|
||||||
|
},
|
||||||
};
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
mounted() {
|
||||||
// particularsClick(data){
|
selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||||
// console.log(data)
|
console.log(res)
|
||||||
// bus.$emit("mainClick", data);
|
})
|
||||||
// },
|
selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||||
|
console.log(res)
|
||||||
typeSelect(item) {
|
})
|
||||||
this.filterButton.typeSelectActive = item
|
this.$nextTick( () => {
|
||||||
this.initCharts()
|
this.initCharts()
|
||||||
},
|
})
|
||||||
|
},
|
||||||
initCharts () {
|
data() {
|
||||||
const option = {
|
return {
|
||||||
grid: {
|
filterButton:{
|
||||||
bottom: 34,
|
typeSelect:['近7天','近30天',],
|
||||||
},
|
typeSelectActive:'近7天',
|
||||||
xAxis: {
|
},
|
||||||
type: 'category',
|
cameraData: []
|
||||||
boundaryGap: false,
|
|
||||||
axisLabel: {
|
};
|
||||||
color: 'rgba(255, 255, 255,.8)',
|
},
|
||||||
},
|
methods: {
|
||||||
axisLine: {
|
// particularsClick(data){
|
||||||
lineStyle: {
|
// console.log(data)
|
||||||
color: '#345a99',
|
// bus.$emit("mainClick", data);
|
||||||
}
|
// },
|
||||||
},
|
getAbout(content) {
|
||||||
axisTick: {
|
if(!content) {
|
||||||
show: false,
|
return '暂无'
|
||||||
},
|
} else if(content.length < 40) {
|
||||||
boundaryGap: ['2%', '2%'],
|
return content
|
||||||
data: ['1', '2', '3', '4', '5', '6', '7']
|
} else {
|
||||||
},
|
return content.substring(0, 40) + '...'
|
||||||
yAxis: [
|
}
|
||||||
{
|
},
|
||||||
type: 'value',
|
typeSelect(item) {
|
||||||
name: 'dB',
|
this.filterButton.typeSelectActive = item
|
||||||
nameTextStyle: {
|
this.initCharts()
|
||||||
color: 'rgba(255, 255, 255,.8)'
|
},
|
||||||
},
|
|
||||||
axisLabel: {
|
initCharts () {
|
||||||
color: 'rgba(255, 255, 255,.8)',
|
const option = {
|
||||||
},
|
grid: {
|
||||||
axisLine: {
|
bottom: 34,
|
||||||
show: false,
|
},
|
||||||
},
|
xAxis: {
|
||||||
splitLine: {
|
type: 'category',
|
||||||
show: false,
|
boundaryGap: false,
|
||||||
},
|
axisLabel: {
|
||||||
splitArea: {
|
color: 'rgba(255, 255, 255,.8)',
|
||||||
interval: '1',
|
},
|
||||||
show: true,
|
axisLine: {
|
||||||
areaStyle: {
|
lineStyle: {
|
||||||
color: ['#1d3556','#18334c']
|
color: '#345a99',
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
axisTick: {
|
||||||
{
|
show: false,
|
||||||
type: 'value',
|
},
|
||||||
name: 'ug/m³',
|
boundaryGap: ['2%', '2%'],
|
||||||
nameTextStyle: {
|
data: ['1', '2', '3', '4', '5', '6', '7']
|
||||||
color: 'rgba(255, 255, 255,.8)'
|
},
|
||||||
},
|
yAxis: [
|
||||||
axisLabel: {
|
{
|
||||||
color: 'rgba(255, 255, 255,.8)',
|
type: 'value',
|
||||||
show: true,
|
name: '人',
|
||||||
},
|
nameTextStyle: {
|
||||||
axisLine: {
|
color: 'rgba(255, 255, 255,.8)'
|
||||||
show: false,
|
},
|
||||||
},
|
axisLabel: {
|
||||||
splitLine: {
|
color: 'rgba(255, 255, 255,.8)',
|
||||||
show: false,
|
},
|
||||||
},
|
axisLine: {
|
||||||
max:100,
|
show: false,
|
||||||
min: 0,
|
},
|
||||||
},
|
splitLine: {
|
||||||
],
|
show: false,
|
||||||
color: ['#309afe','#fab228'],
|
},
|
||||||
legend: {
|
splitArea: {
|
||||||
right: '16%',
|
interval: '1',
|
||||||
top: '12%',
|
show: true,
|
||||||
icon: 'line',
|
areaStyle: {
|
||||||
data: ['噪声值','扬尘值',],
|
color: ['#1d3556','#18334c']
|
||||||
textStyle: {
|
}
|
||||||
color: '#fff'
|
}
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
series: [
|
type: 'value',
|
||||||
{
|
name: '人',
|
||||||
name: '噪声值',
|
nameTextStyle: {
|
||||||
data: [60, 30, 60, 70, 40, 60, 70],
|
color: 'rgba(255, 255, 255,.8)'
|
||||||
type: 'line',
|
},
|
||||||
symbol: 'none',
|
axisLabel: {
|
||||||
lineStyle: {
|
color: 'rgba(255, 255, 255,.8)',
|
||||||
width: 2,
|
show: true,
|
||||||
color: {
|
},
|
||||||
type: 'linear',
|
axisLine: {
|
||||||
x: 0,
|
show: false,
|
||||||
y: 0,
|
},
|
||||||
x2: 0,
|
splitLine: {
|
||||||
y2: 1,
|
show: false,
|
||||||
colorStops: [{
|
},
|
||||||
offset: 0, color: '#3cb2ff' // 0% 处的颜色
|
max:100,
|
||||||
}, {
|
min: 0,
|
||||||
offset: 1, color: '#2682ff' // 100% 处的颜色
|
},
|
||||||
}],
|
],
|
||||||
global: false // 缺省为 false
|
color: ['#309afe','#fab228'],
|
||||||
}
|
legend: {
|
||||||
}
|
right: '16%',
|
||||||
},
|
top: '12%',
|
||||||
{
|
icon: 'line',
|
||||||
name: '扬尘值',
|
data: ['本地人数','外地人数',],
|
||||||
data: [30, 40, 50, 80, 90, 40, 60],
|
textStyle: {
|
||||||
type: 'line',
|
color: '#fff'
|
||||||
symbol: 'none',
|
}
|
||||||
lineStyle: {
|
},
|
||||||
width: 2,
|
series: [
|
||||||
color: {
|
{
|
||||||
type: 'linear',
|
name: '本地人数',
|
||||||
x: 0,
|
data: [60, 30, 60, 70, 40, 60, 70],
|
||||||
y: 0,
|
type: 'bar',
|
||||||
x2: 0,
|
symbol: 'none',
|
||||||
y2: 1,
|
lineStyle: {
|
||||||
colorStops: [{
|
width: 2,
|
||||||
offset: 0, color: '#fdd033' // 0% 处的颜色
|
color: {
|
||||||
}, {
|
type: 'linear',
|
||||||
offset: 1, color: '#fe9820' // 100% 处的颜色
|
x: 0,
|
||||||
}],
|
y: 0,
|
||||||
global: false // 缺省为 false
|
x2: 0,
|
||||||
}
|
y2: 1,
|
||||||
}
|
colorStops: [{
|
||||||
},
|
offset: 0, color: '#3cb2ff' // 0% 处的颜色
|
||||||
]
|
}, {
|
||||||
}
|
offset: 1, color: '#2682ff' // 100% 处的颜色
|
||||||
const charts = echarts.init(
|
}],
|
||||||
document.getElementById('chart')
|
global: false // 缺省为 false
|
||||||
)
|
}
|
||||||
charts.setOption(option)
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
show () {
|
name: '外地人数',
|
||||||
const viewer = this.$el.querySelector('.images').$viewer
|
data: [30, 40, 50, 80, 90, 40, 60],
|
||||||
viewer.show()
|
type: 'bar',
|
||||||
},
|
symbol: 'none',
|
||||||
},
|
lineStyle: {
|
||||||
directives: {
|
width: 2,
|
||||||
viewer: viewer({
|
color: {
|
||||||
debug: true,
|
type: 'linear',
|
||||||
}),
|
x: 0,
|
||||||
},
|
y: 0,
|
||||||
};
|
x2: 0,
|
||||||
</script>
|
y2: 1,
|
||||||
<style lang="scss">
|
colorStops: [{
|
||||||
// .leaflet-popup {
|
offset: 0, color: '#fdd033' // 0% 处的颜色
|
||||||
// width: auto !important;
|
}, {
|
||||||
// }
|
offset: 1, color: '#fe9820' // 100% 处的颜色
|
||||||
.site-popup {
|
}],
|
||||||
.leaflet-popup-content-wrapper {
|
global: false // 缺省为 false
|
||||||
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;
|
const charts = echarts.init(
|
||||||
height: 453px;
|
document.getElementById('chart')
|
||||||
padding: 12px 16px;
|
)
|
||||||
.pop-box {
|
charts.setOption(option)
|
||||||
width: 100%;
|
},
|
||||||
height: 100%;
|
|
||||||
|
show () {
|
||||||
.title-bg {
|
const viewer = this.$el.querySelector('.images').$viewer
|
||||||
position: absolute;
|
viewer.show()
|
||||||
top: 0;
|
},
|
||||||
left: 0;
|
},
|
||||||
height: 42px;
|
directives: {
|
||||||
width: 100%;
|
viewer: viewer({
|
||||||
opacity: .4;
|
debug: true,
|
||||||
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
|
}),
|
||||||
}
|
},
|
||||||
|
};
|
||||||
.title{
|
</script>
|
||||||
color: #fff;
|
<style lang="scss" scoped>
|
||||||
font-size: 16px;
|
// .leaflet-popup {
|
||||||
span:nth-child(2) {
|
// width: auto !important;
|
||||||
display: inline-block;
|
// }
|
||||||
width: 40px;
|
.site-popup {
|
||||||
height: 22px;
|
.leaflet-popup-content-wrapper {
|
||||||
margin-left: 8px;
|
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: .4);
|
||||||
border-radius: 2px;
|
background: rgba(24,51,76,.95);
|
||||||
border: 1px solid #0494ff;
|
border: 1px solid rgba(50,227,235,.95);
|
||||||
color: #1ffefd;
|
}
|
||||||
text-align: center;
|
.leaflet-popup-content {
|
||||||
font-size: 14px;
|
width: 734px !important;
|
||||||
}
|
height: 453px;
|
||||||
}
|
padding: 12px 16px;
|
||||||
|
.pop-box {
|
||||||
.site-address {
|
width: 100%;
|
||||||
margin: 12px 0;
|
height: 100%;
|
||||||
padding-left: 20px;
|
|
||||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
.title-bg {
|
||||||
color: rgba(255, 255, 255, .6);
|
position: absolute;
|
||||||
}
|
top: 0;
|
||||||
|
left: 0;
|
||||||
.site-content {
|
height: 42px;
|
||||||
display: flex;
|
width: 100%;
|
||||||
.site-content-left {
|
opacity: .4;
|
||||||
width: 392px;
|
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
|
||||||
margin-right: 29px;
|
}
|
||||||
.site-content-left-top {
|
|
||||||
width: 100%;
|
.title{
|
||||||
height: 107px;
|
color: #fff;
|
||||||
padding: 24px 0 0 18px;
|
font-size: 16px;
|
||||||
background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
|
span:nth-child(2) {
|
||||||
display: flex;
|
display: inline-block;
|
||||||
.noise {
|
width: 40px;
|
||||||
height: 60px;
|
height: 22px;
|
||||||
width: 180px;
|
margin-left: 8px;
|
||||||
border-right: 1px solid #2c619c;
|
border-radius: 2px;
|
||||||
display: flex;
|
border: 1px solid #0494ff;
|
||||||
div {
|
color: #1ffefd;
|
||||||
margin-left: 16px;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
color: #fff;
|
}
|
||||||
p {
|
}
|
||||||
margin: 2px;
|
|
||||||
}
|
.site-address {
|
||||||
span {
|
margin: 6px 0;
|
||||||
color: #1ffefd;
|
padding-left: 20px;
|
||||||
font-size: 24px;
|
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||||
}
|
color: rgba(255, 255, 255, .6);
|
||||||
p:nth-child(2) {
|
}
|
||||||
color: rgba(255, 255, 255,.6)
|
|
||||||
}
|
.site-content {
|
||||||
}
|
display: flex;
|
||||||
}
|
.site-content-left {
|
||||||
.raise-dust {
|
width: 392px;
|
||||||
margin-left: 20px;
|
margin-right: 29px;
|
||||||
display: flex;
|
.left-mid-line {
|
||||||
img {
|
margin: 6px 0;
|
||||||
width: 60px;
|
}
|
||||||
height: 60px;
|
.area-content-left-top {
|
||||||
}
|
width: 100%;
|
||||||
div {
|
height: 50px;
|
||||||
margin-left: 16px;
|
background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
|
||||||
font-size: 16px;
|
display: flex;
|
||||||
color: #fff;
|
justify-content: space-around;
|
||||||
p {
|
align-items: center;
|
||||||
margin: 2px;
|
& > div {
|
||||||
}
|
text-align: center;
|
||||||
span {
|
> div:first-child {
|
||||||
color: #1ffefd;
|
color: #1ffefd;
|
||||||
font-size: 24px;
|
}
|
||||||
}
|
> div:last-child {
|
||||||
p:nth-child(2) {
|
color: rgba(255, 255, 255,.6);
|
||||||
color: rgba(255, 255, 255,.6)
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.site-content-left-bottom {
|
||||||
.site-content-left-bottom {
|
width: 100%;
|
||||||
width: 100%;
|
margin-top: 16px;
|
||||||
margin-top: 16px;
|
.filter-btn-typeSelect {
|
||||||
.filter-btn-typeSelect {
|
display: flex;
|
||||||
display: flex;
|
.typeSelect-btn {
|
||||||
.typeSelect-btn {
|
border-radius: 20px;
|
||||||
border-radius: 20px;
|
border: 1px solid rgba(0, 255, 255, .6);
|
||||||
border: 1px solid rgba(0, 255, 255, .6);
|
background: rgba(2,51,87,.6);
|
||||||
background: rgba(2,51,87,.6);
|
margin-right: 5px;
|
||||||
margin-right: 5px;
|
padding: 4px 10px;
|
||||||
padding: 4px 10px;
|
font-size: 14px;
|
||||||
font-size: 14px;
|
color: #fff;
|
||||||
color: #fff;
|
cursor: pointer;
|
||||||
cursor: pointer;
|
}
|
||||||
}
|
.typeSelect-btn-active {
|
||||||
.typeSelect-btn-active {
|
background: #005ea3;
|
||||||
background: #005ea3;
|
border: 1px solid #00ffff;
|
||||||
border: 1px solid #00ffff;
|
}
|
||||||
}
|
}
|
||||||
}
|
#chart {
|
||||||
#chart {
|
width: 100%;
|
||||||
width: 100%;
|
height: 206px;
|
||||||
height: 206px;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.site-content-right {
|
||||||
.site-content-right {
|
width: 280px;
|
||||||
width: 280px;
|
.img-container {
|
||||||
.video-table {
|
width: 280px;
|
||||||
margin-top: 20px;
|
height: 158px;
|
||||||
h4 {
|
cursor: pointer;
|
||||||
color: #fff;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
.el-table{
|
justify-content: center;
|
||||||
margin-top: 8px;
|
}
|
||||||
border: 1px solid #325d94;
|
.video-table {
|
||||||
.el-table__body-wrapper{
|
margin-top: 20px;
|
||||||
height: 90px;
|
h4 {
|
||||||
overflow-y: auto;
|
color: #fff;
|
||||||
&::-webkit-scrollbar {
|
}
|
||||||
width: 8px;
|
.el-table{
|
||||||
background-color: #10335e;
|
margin-top: 8px;
|
||||||
}
|
border: 1px solid #325d94;
|
||||||
&::-webkit-scrollbar-thumb {
|
.el-table__body-wrapper{
|
||||||
background-color: #446dac !important;
|
height: 90px;
|
||||||
}
|
overflow-y: auto;
|
||||||
}
|
background: #18304c;
|
||||||
th,td {
|
&::-webkit-scrollbar {
|
||||||
border-right: 1px solid #325d94;
|
width: 8px;
|
||||||
}
|
background-color: #10335e;
|
||||||
}
|
}
|
||||||
.el-table::before {
|
&::-webkit-scrollbar-thumb {
|
||||||
display: none;
|
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;
|
.leaflet-popup-close-button {
|
||||||
right: 5px;
|
color: #3afefc !important;
|
||||||
width: 80px;
|
font-size: 12px;
|
||||||
height: 40px;
|
}
|
||||||
bottom: 5px;
|
}
|
||||||
}
|
</style>
|
||||||
.List-Details-pop {
|
<style lang='scss' scoped>
|
||||||
background-color: #fff;
|
.particulars {
|
||||||
font-size: 16px;
|
position: absolute;
|
||||||
padding-bottom: 20px;
|
right: 5px;
|
||||||
display: flex;
|
width: 80px;
|
||||||
width: 400px;
|
height: 40px;
|
||||||
|
bottom: 5px;
|
||||||
.topContent {
|
}
|
||||||
background: #000;
|
.List-Details-pop {
|
||||||
padding: 14px;
|
background-color: #fff;
|
||||||
width: 400px;
|
font-size: 16px;
|
||||||
}
|
padding-bottom: 20px;
|
||||||
.content {
|
display: flex;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
.topContent {
|
||||||
b {
|
background: #000;
|
||||||
color: #000;
|
padding: 14px;
|
||||||
font-size: 14px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
p {
|
.content {
|
||||||
color: #000;
|
width: 400px;
|
||||||
font-size: 14px;
|
display: flex;
|
||||||
}
|
flex-wrap: wrap;
|
||||||
}
|
b {
|
||||||
.title {
|
color: #000;
|
||||||
background-color: #000;
|
font-size: 14px;
|
||||||
color: #fff;
|
}
|
||||||
}
|
p {
|
||||||
}
|
color: #000;
|
||||||
</style>
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -5,13 +5,13 @@
|
||||||
<div class="eventData">
|
<div class="eventData">
|
||||||
<div style="display: flex;justify-content: space-between">
|
<div style="display: flex;justify-content: space-between">
|
||||||
<el-input
|
<el-input
|
||||||
placeholder="请输入工地名称"
|
placeholder="请输入区域名称"
|
||||||
prefix-icon="el-icon-search"
|
prefix-icon="el-icon-search"
|
||||||
@input="searchSite"
|
@input="searchSite"
|
||||||
v-model="searchValue"
|
v-model="searchValue"
|
||||||
>
|
>
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-select v-model="selectValue" placeholder="全部区市" @change="fliterSiteByArea">
|
<el-select v-model="selectValue" placeholder="全部" @change="fliterSiteByArea">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
|
|
@ -53,10 +53,12 @@
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
import {
|
import {
|
||||||
selectKeyAreaList,
|
selectKeyAreaList,
|
||||||
|
selectKeyArea,
|
||||||
selectByAreaName,
|
selectByAreaName,
|
||||||
|
selectByLikeName
|
||||||
} from "@/api/area";
|
} from "@/api/area";
|
||||||
import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
|
import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
|
||||||
|
import { createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -74,67 +76,108 @@ export default {
|
||||||
|
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
value: '公园广场',
|
value: "全部",
|
||||||
|
label: '全部'
|
||||||
|
},{
|
||||||
|
value: "公园广场",
|
||||||
label: '公园广场'
|
label: '公园广场'
|
||||||
},{
|
},{
|
||||||
value: '商业街区',
|
value: "商业街区",
|
||||||
label: '商业街区'
|
label: '商业街区'
|
||||||
}, {
|
}, {
|
||||||
value: '景区景点',
|
value: "景区景点",
|
||||||
label: '景区景点'
|
label: '景区景点'
|
||||||
}, {
|
}, {
|
||||||
value: '海水浴场',
|
value: "海水浴场",
|
||||||
label: '海水浴场'
|
label: '海水浴场'
|
||||||
}, {
|
}, {
|
||||||
value: '窗口单位',
|
value: "窗口单位",
|
||||||
label: '窗口单位'
|
label: '窗口单位'
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
selectValue: '公园广场',
|
selectValue: "全部",
|
||||||
|
siteDataAll: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
selectKeyAreaList({type:"公园广场"}).then((res) => {
|
let params = {
|
||||||
console.log(res.data.data)
|
type1: "'公园广场','窗口单位'",
|
||||||
|
type2: "'景区景点','海水浴场'",
|
||||||
|
type3: "'商业街区'"
|
||||||
|
}
|
||||||
|
selectKeyAreaList(params).then((res) => {
|
||||||
|
this.siteDataAll = res.data.data
|
||||||
this.siteData = res.data.data
|
this.siteData = res.data.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
searchSite() {
|
searchSite() {
|
||||||
if (this.searchValue == "") {
|
if (!this.searchValue && this.selectValue !== '全部') {
|
||||||
|
selectKeyArea({ type: this.selectValue }).then((res) => {
|
||||||
|
this.siteData = res.data.data
|
||||||
|
})
|
||||||
|
} else if (!this.searchValue) {
|
||||||
this.siteData = this.siteDataAll;
|
this.siteData = this.siteDataAll;
|
||||||
} else {
|
}else {
|
||||||
const params = {
|
const params = {
|
||||||
projectName: this.searchValue,
|
areaName: this.searchValue,
|
||||||
};
|
};
|
||||||
// selectByProjectName(params).then((res) => {
|
selectByLikeName(params).then((res) => {
|
||||||
// this.siteData = res.data.data
|
this.siteData = res.data.data
|
||||||
// });
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
fliterSiteByArea(val) {
|
fliterSiteByArea(val) {
|
||||||
selectKeyAreaList({type:val}).then((res) => {
|
if(val === '全部') {
|
||||||
this.siteData = res.data.data
|
let params = {
|
||||||
})
|
type1: "'公园广场','窗口单位'",
|
||||||
|
type2: "'景区景点','海水浴场'",
|
||||||
|
type3: "'商业街区'"
|
||||||
|
}
|
||||||
|
selectKeyAreaList(params).then((res) => {
|
||||||
|
this.siteData = res.data.data
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
selectKeyArea({ type: val}).then((res) => {
|
||||||
|
this.siteData = res.data.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
// 行点击
|
// 行点击
|
||||||
analyse(row) {
|
analyse(row) {
|
||||||
// bus.$emit("openCauseAnalysis", row);
|
// bus.$emit("openCauseAnalysis", row);
|
||||||
this.$parent.hiMapFun.removerPolygon()
|
if(row.latitude && row.longitude) {
|
||||||
selectByAreaName({areaName:row.areaName}).then((res) => {
|
this.$parent.hiMapFun.removerPolygon()
|
||||||
|
this.$parent.removeRoadCauseAnalysis()
|
||||||
|
this.$parent.hiMapFun.removeLayerByLayerName("roadPoint");
|
||||||
|
this.$parent.hiMap.mapObj.map.flyTo({ lat: row.latitude, lng: row.longitude });
|
||||||
|
let dataEvent = [{
|
||||||
|
latLng: { lat: row.latitude, lng: row.longitude },
|
||||||
|
data: row,
|
||||||
|
type: "site",
|
||||||
|
}]
|
||||||
|
this.$parent.hiMapFun.addPointsToMap(
|
||||||
|
dataEvent,
|
||||||
|
"poi-red.png",
|
||||||
|
"roadPoint",
|
||||||
|
createImportantAreaPop
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
selectByAreaName({areaName:row.areaName}).then((res) => {
|
||||||
if(res.data.data){
|
if(res.data.data){
|
||||||
let areaLatLng = []
|
let areaLatLng = []
|
||||||
res.data.data.forEach((item) => {
|
res.data.data.forEach((item) => {
|
||||||
let lonLat = gcjLL2wgs84LL(item.longitude, item.latitude);
|
let lonLat = gcjLL2wgs84LL(item.longitude, item.latitude);
|
||||||
areaLatLng.push([lonLat[1],lonLat[0]])
|
areaLatLng.push([lonLat[1],lonLat[0]])
|
||||||
})
|
})
|
||||||
|
this.$parent.hiMapFun.removerPolygon()
|
||||||
|
this.$parent.removeRoadCauseAnalysis()
|
||||||
this.$parent.hiMapFun.addAreaToMap(areaLatLng)
|
this.$parent.hiMapFun.addAreaToMap(areaLatLng)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 关闭基本信息窗口
|
// 关闭基本信息窗口
|
||||||
informationClose() {
|
informationClose() {
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
</div> -->
|
</div> -->
|
||||||
<div key="video" v-if="tabsActiveName == '视频感知事件'">
|
<div key="video" v-if="tabsActiveName == '视频感知事件'">
|
||||||
<div class="event-num">
|
<div class="event-num">
|
||||||
<span>000</span>件
|
<span> {{ totalEventCount }}</span>件
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div id="event-type-chart"></div>
|
<div id="event-type-chart"></div>
|
||||||
|
|
@ -75,9 +75,11 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
|
import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
totalEventCount: '000',
|
||||||
tabsButton: ["视频感知事件","出租车走航监测"],
|
tabsButton: ["视频感知事件","出租车走航监测"],
|
||||||
tabsActiveName: "视频感知事件",
|
tabsActiveName: "视频感知事件",
|
||||||
filterButton:{
|
filterButton:{
|
||||||
|
|
@ -109,9 +111,10 @@ import * as echarts from 'echarts'
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
this.$nextTick( () => {
|
this.$nextTick( () => {
|
||||||
|
this.getVideoData()
|
||||||
this.initEventTypeCharts()
|
this.initEventTypeCharts()
|
||||||
this.initEventStateCharts()
|
this.initEventStateCharts()
|
||||||
this.initEventTimeCharts()
|
// this.initEventTimeCharts()
|
||||||
// this.initRoadTimeCharts()
|
// this.initRoadTimeCharts()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -135,6 +138,28 @@ import * as echarts from 'echarts'
|
||||||
typeSelect(item) {
|
typeSelect(item) {
|
||||||
this.filterButton.typeSelectActive = item
|
this.filterButton.typeSelectActive = item
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getVideoData() {
|
||||||
|
this.totalEventCount = 0;
|
||||||
|
const params = {
|
||||||
|
page: 1,
|
||||||
|
pageSize: 4,
|
||||||
|
};
|
||||||
|
selectByAreaEvent(params).then((res) => {
|
||||||
|
this.totalEventCount = res.data.data.sum
|
||||||
|
});
|
||||||
|
selectMonthAreaEvent().then((res) => {
|
||||||
|
if(res.data.data && res.data.data.length) {
|
||||||
|
let xValue = []
|
||||||
|
let yValue = []
|
||||||
|
res.data.data.forEach(item => {
|
||||||
|
xValue.push(item.pushTime)
|
||||||
|
yValue.push(item.number)
|
||||||
|
});
|
||||||
|
this.initEventTimeCharts(xValue, yValue)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
closeDialog(){
|
closeDialog(){
|
||||||
this.$emit('closeDialog')
|
this.$emit('closeDialog')
|
||||||
|
|
@ -346,10 +371,10 @@ import * as echarts from 'echarts'
|
||||||
)
|
)
|
||||||
eventState.setOption(option)
|
eventState.setOption(option)
|
||||||
},
|
},
|
||||||
initEventTimeCharts () {
|
initEventTimeCharts (xValue, yValue) {
|
||||||
const option = {
|
const option = {
|
||||||
title: {
|
title: {
|
||||||
text: "事件时间趋势",
|
text: "事件时间趋势(近30天)",
|
||||||
left: "left",
|
left: "left",
|
||||||
top: 15,
|
top: 15,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
|
@ -377,7 +402,7 @@ import * as echarts from 'echarts'
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
boundaryGap: ['2%', '2%'],
|
boundaryGap: ['2%', '2%'],
|
||||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
data: xValue
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
|
@ -404,7 +429,7 @@ import * as echarts from 'echarts'
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
|
data: yValue,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -37,8 +37,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="eventNum">
|
<div class="eventNum">
|
||||||
累计事件数量
|
累计事件数量(2022.05.25-至今)
|
||||||
<p><span>1236</span>件</p>
|
<p><span>{{ allListDataNum }}</span>件</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 事件感知 -->
|
<!-- 事件感知 -->
|
||||||
|
|
@ -81,6 +81,10 @@
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<video-play
|
||||||
|
v-if="openVideo"
|
||||||
|
:channel-id="channelCode"
|
||||||
|
></video-play>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -91,11 +95,13 @@ import TiledMap from "./components/tiledMap";
|
||||||
import { searchCamera } from "@/api/videoSurveillance/index";
|
import { searchCamera } from "@/api/videoSurveillance/index";
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
import complaintEvent from "./components/ComplaintEvent";
|
import complaintEvent from "./components/ComplaintEvent";
|
||||||
|
import VideoPlay from './components/VideoPlay'
|
||||||
import VideoList from "./components/VideoList";
|
import VideoList from "./components/VideoList";
|
||||||
import SiteList from "./components/SiteList";
|
import SiteList from "./components/SiteList";
|
||||||
import { selectByJdWd } from "@/api/construction/index";
|
import { selectByJdWd } from "@/api/construction/index";
|
||||||
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop } from "@/supermap/createMarkerPopup";
|
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
||||||
import { listPassengerFlow, selectByTime, } from "@/api/civilizedCity.js";
|
import { listPassengerFlow, selectByTime, } from "@/api/civilizedCity.js";
|
||||||
|
import { selectByAreaEvent, selectKeyArea } from "@/api/area";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -114,8 +120,9 @@ export default {
|
||||||
thermodynamicPeopleAll: [],
|
thermodynamicPeopleAll: [],
|
||||||
thermodynamicPeopleLocal: [],
|
thermodynamicPeopleLocal: [],
|
||||||
thermodynamicPeopleNoLocal: [],
|
thermodynamicPeopleNoLocal: [],
|
||||||
|
allListDataNum: '',
|
||||||
|
openVideo: false,
|
||||||
|
channelCode: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -123,6 +130,7 @@ export default {
|
||||||
complaintEvent,
|
complaintEvent,
|
||||||
VideoList,
|
VideoList,
|
||||||
SiteList,
|
SiteList,
|
||||||
|
VideoPlay
|
||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -132,8 +140,11 @@ export default {
|
||||||
this.hiMapFun
|
this.hiMapFun
|
||||||
);
|
);
|
||||||
|
|
||||||
|
bus.$off('openCurrentVideoSurveillance')
|
||||||
|
bus.$on('openCurrentVideoSurveillance', (channelCode) => {
|
||||||
|
this.openVideo = true
|
||||||
|
this.channelCode.unshift(channelCode)
|
||||||
|
})
|
||||||
// 根据经纬度查询半径内所有的工地
|
// 根据经纬度查询半径内所有的工地
|
||||||
bus.$off("openCauseAnalysis");
|
bus.$off("openCauseAnalysis");
|
||||||
bus.$on("openCauseAnalysis", (row) => {
|
bus.$on("openCauseAnalysis", (row) => {
|
||||||
|
|
@ -173,12 +184,6 @@ export default {
|
||||||
})
|
})
|
||||||
|
|
||||||
this.thermodynamic()
|
this.thermodynamic()
|
||||||
|
|
||||||
selectByTime().then((res)=>{
|
|
||||||
if(res.data.data){
|
|
||||||
this.todayListNum = res.data.data.length
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
querySearchAsync(queryString, cb) {
|
querySearchAsync(queryString, cb) {
|
||||||
|
|
@ -281,16 +286,14 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
layerHandleChange(item) {
|
layerHandleChange(item) {
|
||||||
|
console.log('this.changeLayerBtnGroup---', this.changeLayerBtnGroup)
|
||||||
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
|
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
|
||||||
switch (item) {
|
switch (item) {
|
||||||
case "道路":
|
|
||||||
this.roadOnMap(this.$refs.complaintEventRef.roadData);
|
|
||||||
break;
|
|
||||||
case "AI事件":
|
case "AI事件":
|
||||||
this.hiMapFun.removeLayerByLayerName('EventListDetail')
|
this.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||||
selectByTime().then((res) => {
|
selectByAreaEvent().then((res) => {
|
||||||
const dataEvent = [];
|
const dataEvent = [];
|
||||||
res.data.data.forEach((item) => {
|
res.data.data.events.forEach((item) => {
|
||||||
dataEvent.push(
|
dataEvent.push(
|
||||||
{
|
{
|
||||||
latLng: { lat: item.latitude, lng: item.longitude },
|
latLng: { lat: item.latitude, lng: item.longitude },
|
||||||
|
|
@ -305,16 +308,44 @@ export default {
|
||||||
case "视频监控":
|
case "视频监控":
|
||||||
this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
|
this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
|
||||||
break;
|
break;
|
||||||
|
case "公园广场":
|
||||||
|
case "商业街区":
|
||||||
|
case "景区景点":
|
||||||
|
case "海水浴场":
|
||||||
|
case "窗口单位":
|
||||||
|
this.hiMapFun.removeLayerByLayerName(item)
|
||||||
|
selectKeyArea({ type: item}).then((res) => {
|
||||||
|
const dataEvent = [];
|
||||||
|
console.log('res.data.data----', res.data.data)
|
||||||
|
res.data.data.forEach((item) => {
|
||||||
|
dataEvent.push(
|
||||||
|
{
|
||||||
|
latLng: { lat: item.latitude, lng: item.longitude },
|
||||||
|
data: item,
|
||||||
|
type: "site",
|
||||||
|
}
|
||||||
|
)
|
||||||
|
})
|
||||||
|
this.hiMapFun.addPointsToMap(
|
||||||
|
dataEvent,
|
||||||
|
"poi-red.png",
|
||||||
|
item,
|
||||||
|
createImportantAreaPop
|
||||||
|
);
|
||||||
|
})
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
switch (item) {
|
switch (item) {
|
||||||
case "道路":
|
case "公园广场":
|
||||||
this.hiMapFun.removerPolyline();
|
case "商业街区":
|
||||||
break;
|
case "景区景点":
|
||||||
|
case "海水浴场":
|
||||||
|
case "窗口单位":
|
||||||
case "AI事件":
|
case "AI事件":
|
||||||
this.hiMapFun.removeLayerByLayerName('EventListDetail')
|
this.hiMapFun.removeLayerByLayerName(item)
|
||||||
break;
|
break;
|
||||||
case "视频监控":
|
case "视频监控":
|
||||||
this.hiMapFun.removeLayerByLayerName('全部')
|
this.hiMapFun.removeLayerByLayerName('全部')
|
||||||
|
|
@ -414,6 +445,12 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
removeRoadCauseAnalysis () {
|
||||||
|
this.hiMapFun.removerPolygon()
|
||||||
|
this.hiMapFun.removeLayerByLayerName('roadPoint')
|
||||||
|
this.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||||
|
this.hiMapFun.removeLayerByLayerName('全部')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {},
|
beforeDestroy() {},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
|
<div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-btn-box" v-show="tabsActiveName !== '走航监测'">
|
<div class="filter-btn-box" v-show="tabsActiveName !== '走航监测' && tabsActiveName !== '视频感知'">
|
||||||
<div class="filter-btn-typeSelect">
|
<div class="filter-btn-typeSelect">
|
||||||
<div class="typeSelect-btn"
|
<div class="typeSelect-btn"
|
||||||
v-for="item in filterButton.typeSelect"
|
v-for="item in filterButton.typeSelect"
|
||||||
|
|
@ -60,6 +60,22 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-show="tabsActiveName == '视频感知'">
|
||||||
|
<div class="event-details special-video-height" v-for="item in eventListData" :key="item.index" @click="openVideoDialog(item)">
|
||||||
|
<div class="event-details-title">
|
||||||
|
<span>{{item.eventNewName||''}}</span>
|
||||||
|
<span>{{item.captureTime||''}}</span>
|
||||||
|
<!-- <span>未派发</span> -->
|
||||||
|
</div>
|
||||||
|
<div class="event-details-des">
|
||||||
|
<h5>事件地址：{{item.district||''}}</h5>
|
||||||
|
<p>摄像头名称：{{item.cameraName||''}}</p>
|
||||||
|
<p>事件描述：{{item.eventCnName||''}}</p>
|
||||||
|
<!-- <p>简述简述简述简述简述简述简述简述</p> -->
|
||||||
|
<!-- <p>{{filterButton.typeSelectActive == '工地扬尘'? 'pm10' : '噪声值'}}:{{filterButton.typeSelectActive == '工地扬尘'? item.pm10 :item.noice ||''}}</p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div v-show="tabsActiveName == '物联感知'">
|
<div v-show="tabsActiveName == '物联感知'">
|
||||||
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openSiteDialog(item)">
|
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openSiteDialog(item)">
|
||||||
<div class="event-details-title">
|
<div class="event-details-title">
|
||||||
|
|
@ -89,10 +105,10 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
|
import { selectAllVideo, selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
|
||||||
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
|
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
|
||||||
import {
|
import {
|
||||||
createSiteRoadPop,
|
createSiteRoadPop,createEventListDetailsPop
|
||||||
} from "@/supermap/createMarkerPopup";
|
} from "@/supermap/createMarkerPopup";
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
import {
|
import {
|
||||||
|
|
@ -146,7 +162,9 @@ export default {
|
||||||
this.getRoadData()
|
this.getRoadData()
|
||||||
this.selectRoadData()
|
this.selectRoadData()
|
||||||
|
|
||||||
|
selectAllVideo({pageSize: 5,page: 1,}).then((res) => {
|
||||||
|
this.$parent.allListDataNum += res.data.data.sum;
|
||||||
|
});
|
||||||
selectRaise({pageSize: 5,page: 1,}).then((res) => {
|
selectRaise({pageSize: 5,page: 1,}).then((res) => {
|
||||||
this.$parent.allListDataNum += res.data.data.sum;
|
this.$parent.allListDataNum += res.data.data.sum;
|
||||||
});
|
});
|
||||||
|
|
@ -161,11 +179,11 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
tabHandleClick(item) {
|
tabHandleClick(item) {
|
||||||
|
this.$parent.removeRoadCauseAnalysis()
|
||||||
this.tabsActiveName = item
|
this.tabsActiveName = item
|
||||||
this.currentPage = 1
|
this.currentPage = 1
|
||||||
if(item == '视频感知'){
|
if(item == '视频感知'){
|
||||||
this.filterButton.typeSelect = []
|
this.selectAllVideo()
|
||||||
|
|
||||||
}
|
}
|
||||||
if(item == '物联感知'){
|
if(item == '物联感知'){
|
||||||
this.filterButton.typeSelect = ['工地扬尘','工地噪声']
|
this.filterButton.typeSelect = ['工地扬尘','工地噪声']
|
||||||
|
|
@ -211,7 +229,17 @@ export default {
|
||||||
this.total = res.data.data.sum
|
this.total = res.data.data.sum
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
//视频感知
|
||||||
|
selectAllVideo(val) {
|
||||||
|
let params = {
|
||||||
|
pageSize: 4,
|
||||||
|
page: val || 1,
|
||||||
|
}
|
||||||
|
selectAllVideo(params).then((res) => {
|
||||||
|
this.eventListData = res.data.data.data;
|
||||||
|
this.total = res.data.data.sum;
|
||||||
|
});
|
||||||
|
},
|
||||||
//物联感知 扬尘
|
//物联感知 扬尘
|
||||||
selectRaise() {
|
selectRaise() {
|
||||||
let params = {
|
let params = {
|
||||||
|
|
@ -238,7 +266,7 @@ export default {
|
||||||
//分页
|
//分页
|
||||||
pageChange(val) {
|
pageChange(val) {
|
||||||
if(this.tabsActiveName == '视频感知') {
|
if(this.tabsActiveName == '视频感知') {
|
||||||
|
this.selectAllVideo(val)
|
||||||
} else if(this.tabsActiveName == '物联感知') {
|
} else if(this.tabsActiveName == '物联感知') {
|
||||||
if(this.filterButton.typeSelectActive == '工地扬尘'){
|
if(this.filterButton.typeSelectActive == '工地扬尘'){
|
||||||
let params = {
|
let params = {
|
||||||
|
|
@ -288,7 +316,25 @@ export default {
|
||||||
);
|
);
|
||||||
|
|
||||||
},
|
},
|
||||||
|
openVideoDialog(data) {
|
||||||
|
const EventListDetail = [
|
||||||
|
{
|
||||||
|
latLng: { lat: data.latitude, lng: data.longitude },
|
||||||
|
data: data,
|
||||||
|
type: 'eventList',
|
||||||
|
from: ''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude })
|
||||||
|
this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0])
|
||||||
|
// this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||||
|
this.$parent.hiMapFun.addPointsToMap(
|
||||||
|
EventListDetail,
|
||||||
|
'poi-event.png',
|
||||||
|
'videoNotice',
|
||||||
|
createEventListDetailsPop
|
||||||
|
)
|
||||||
|
},
|
||||||
openSiteDialog(data) {
|
openSiteDialog(data) {
|
||||||
bus.$emit("openCauseAnalysis", data);
|
bus.$emit("openCauseAnalysis", data);
|
||||||
},
|
},
|
||||||
|
|
@ -561,6 +607,9 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.special-video-height {
|
||||||
|
height: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
::v-deep .el-pagination {
|
::v-deep .el-pagination {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -20,10 +20,20 @@
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="new-condition-line">
|
||||||
|
<el-select v-model="selectNight" placeholder="夜间施工许可" @change="fliterSiteByNight">
|
||||||
|
<el-option
|
||||||
|
v-for="item in nightOption"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
<div class="eventNoise">
|
<div class="eventNoise">
|
||||||
<el-table
|
<el-table
|
||||||
:data="siteData"
|
:data="siteData"
|
||||||
height='356'
|
height='300'
|
||||||
@row-click="analyse"
|
@row-click="analyse"
|
||||||
:cell-style="{
|
:cell-style="{
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
|
|
@ -49,7 +59,7 @@
|
||||||
{{scope.row.pm10 + 'mg/m³'}}
|
{{scope.row.pm10 + 'mg/m³'}}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column width="88" prop="yjsg" label="夜间施工">
|
<el-table-column prop="yjsg" label="夜间施工许可">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<img v-if="scope.row.yjsg == '是'" src="../../../../assets/construction/night.png" alt="">
|
<img v-if="scope.row.yjsg == '是'" src="../../../../assets/construction/night.png" alt="">
|
||||||
<img v-else src="../../../../assets/construction/nonight.png" alt="">
|
<img v-else src="../../../../assets/construction/nonight.png" alt="">
|
||||||
|
|
@ -120,7 +130,20 @@ export default {
|
||||||
label: '莱西市'
|
label: '莱西市'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
selectValue: ''
|
nightOption: [
|
||||||
|
{
|
||||||
|
value: '全部',
|
||||||
|
label: '全部'
|
||||||
|
},{
|
||||||
|
value: '是',
|
||||||
|
label: '是'
|
||||||
|
}, {
|
||||||
|
value: '否',
|
||||||
|
label: '否'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
selectValue: '', // 选择的区市
|
||||||
|
selectNight: '' // 选择的夜间施工许可
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -179,6 +202,14 @@ export default {
|
||||||
this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
|
this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 根据是否夜间施工自查询
|
||||||
|
fliterSiteByNight(val) {
|
||||||
|
if (val == '全部') {
|
||||||
|
this.siteData = this.siteDataAll;
|
||||||
|
} else {
|
||||||
|
this.siteData = this.siteDataAll.filter((item) => item.yjsg == val)
|
||||||
|
}
|
||||||
|
},
|
||||||
// 行点击
|
// 行点击
|
||||||
analyse(row) {
|
analyse(row) {
|
||||||
bus.$emit("openCauseAnalysis", row);
|
bus.$emit("openCauseAnalysis", row);
|
||||||
|
|
@ -265,6 +296,17 @@ export default {
|
||||||
width: 161px;
|
width: 161px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.new-condition-line {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top:16px;
|
||||||
|
.el-select {
|
||||||
|
width: 200px;
|
||||||
|
.el-input {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .eventNoise {
|
::v-deep .eventNoise {
|
||||||
|
|
|
||||||
|
|
@ -38,17 +38,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-content-right">
|
<div class="site-content-right">
|
||||||
<div
|
<div class="images img-container">
|
||||||
class="images"
|
<!-- <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="" /> -->
|
||||||
v-viewer="{movable: false}"
|
<el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl" :preview-src-list="[feature.data.picUrl]" alt="" />
|
||||||
style="
|
<span v-else>暂无图片</span>
|
||||||
width: 280px;
|
|
||||||
height: 158px;
|
|
||||||
cursor: pointer;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <el-image-viewer
|
||||||
|
v-if="imgViewerVisible"
|
||||||
|
:url-list=
|
||||||
|
/> -->
|
||||||
<div class="video-table">
|
<div class="video-table">
|
||||||
<h4>周边监控</h4>
|
<h4>周边监控</h4>
|
||||||
<el-table
|
<el-table
|
||||||
|
|
@ -130,6 +128,10 @@ export default {
|
||||||
pm10:[],
|
pm10:[],
|
||||||
noice:[],
|
noice:[],
|
||||||
},
|
},
|
||||||
|
imgList: [
|
||||||
|
'http://15.72.183.90:7009/images/101_37020201581314000514.jpg',
|
||||||
|
'http://15.72.183.90:7009/components/osg-default/_/video_event_panoramic/20220809-aa34ff49-000a580ae0030e-000f1990-0005b818'
|
||||||
|
],
|
||||||
monthData:{
|
monthData:{
|
||||||
time:[],
|
time:[],
|
||||||
pm10:[],
|
pm10:[],
|
||||||
|
|
@ -439,6 +441,14 @@ export default {
|
||||||
}
|
}
|
||||||
.site-content-right {
|
.site-content-right {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
|
.img-container {
|
||||||
|
width: 280px;
|
||||||
|
height: 158px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
.video-table {
|
.video-table {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
h4 {
|
h4 {
|
||||||
|
|
|
||||||
|
|
@ -22,13 +22,13 @@
|
||||||
v-for="item in filterButton.typeSelect"
|
v-for="item in filterButton.typeSelect"
|
||||||
:key="item"
|
:key="item"
|
||||||
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
|
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
|
||||||
@click="typeSelect(item)"
|
@click="handleTypeSelect(item)"
|
||||||
>{{item}}</div>
|
>{{item}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div key="video" v-if="tabsActiveName == '视频感知'">
|
<div key="video" v-if="tabsActiveName == '视频感知'">
|
||||||
<div class="event-num">
|
<div class="event-num">
|
||||||
<span>000</span>件
|
<span>{{ eventTotal }}</span>件
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div id="event-type-chart"></div>
|
<div id="event-type-chart"></div>
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div key="video" v-if="tabsActiveName == '物联感知'">
|
<div key="video" v-if="tabsActiveName == '物联感知'">
|
||||||
<div class="event-num">
|
<div class="event-num">
|
||||||
<span>000</span>件
|
<span>{{ eventTotal }}</span>件
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div id="event-type-chart"></div>
|
<div id="event-type-chart"></div>
|
||||||
|
|
@ -50,80 +50,69 @@
|
||||||
</div>
|
</div>
|
||||||
<div key="road" v-if="tabsActiveName == '走航监测'">
|
<div key="road" v-if="tabsActiveName == '走航监测'">
|
||||||
<div class="event-num">
|
<div class="event-num">
|
||||||
<span>000</span>件
|
<span>{{ eventTotal }}</span>件
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div id="road-time-chart"></div>
|
|
||||||
<div class="line"></div>
|
|
||||||
<el-table
|
<el-table
|
||||||
:data="PollutionRoad"
|
:data="PollutionRoad"
|
||||||
height='356'
|
height='356'
|
||||||
:cell-style="{
|
:cell-style="{
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
'background-color': '#18304c',
|
'background-color': '#18304c',
|
||||||
}"
|
}"
|
||||||
:header-cell-style="{
|
:header-cell-style="{
|
||||||
color: '#1ffefd',
|
color: '#1ffefd',
|
||||||
'background-color': '#2b4b7a',
|
'background-color': '#2b4b7a',
|
||||||
}"
|
}"
|
||||||
style="background: transparent"
|
style="background: transparent"
|
||||||
>
|
>
|
||||||
<el-table-column label="Top" width="46" type="index">
|
<el-table-column label="Top" width="46" type="index">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="道路" prop="roadName" show-overflow-tooltip>
|
<el-table-column label="道路" prop="roadName" show-overflow-tooltip>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column width="81" prop="start" label="路段开始" show-overflow-tooltip>
|
<el-table-column width="81" prop="start" label="路段开始" show-overflow-tooltip>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column width="81" prop="end" label="路段结束" show-overflow-tooltip>
|
<el-table-column width="81" prop="end" label="路段结束" show-overflow-tooltip>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column width="86" prop="times" label="告警次数">
|
<el-table-column width="86" prop="number" label="告警次数">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div id="event-time-chart"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { selectAllVideo, selectByWeekEvent, selectByMonthEvent, selectByWeekNaise, selectByMonthNaise, selectRaise, selectByWeekNoice, selectByMonthNoice, selectNoiceEvent, selectMonthCurrentByEvent, selectMonthCurrentByBuilding, selectRoadDataCountEvent,selectRoadDataWeekEvent, selectRoadDataMonthEvent, selectMonthCurrentByRoadData } from "@/api/construction/index";
|
||||||
|
import { selectRoadData } from "@/api/road";
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
eventTotal: '000',
|
||||||
tabsButton: ["视频感知","物联感知","走航监测"],
|
tabsButton: ["视频感知","物联感知","走航监测"],
|
||||||
tabsActiveName: "视频感知",
|
tabsActiveName: "视频感知",
|
||||||
filterButton:{
|
filterButton:{
|
||||||
typeSelect:['全部','近7天','近30天'],
|
typeSelect:['全部','近7天','近30天'],
|
||||||
typeSelectActive:'全部',
|
typeSelectActive:'全部',
|
||||||
},
|
},
|
||||||
PollutionRoad:[
|
// 走航检测 表格
|
||||||
{
|
PollutionRoad:[],
|
||||||
roadName: '某某路',
|
// 柱状图
|
||||||
start: '开始',
|
barLabelArr: [],
|
||||||
end: '结束',
|
barValueArr: []
|
||||||
times: '10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
roadName: '某某路',
|
|
||||||
start: '开始',
|
|
||||||
end: '结束',
|
|
||||||
times: '10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
roadName: '某某路',
|
|
||||||
start: '开始',
|
|
||||||
end: '结束',
|
|
||||||
times: '10',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
this.$nextTick( () => {
|
this.$nextTick( () => {
|
||||||
this.initEventTypeCharts()
|
// this.initEventTypeCharts()
|
||||||
this.initEventStateCharts()
|
this.initEventStateCharts()
|
||||||
this.initEventTimeCharts()
|
// this.initEventTimeCharts()
|
||||||
|
this.getVideoData()
|
||||||
// this.initRoadTimeCharts()
|
// this.initRoadTimeCharts()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -133,26 +122,147 @@ import * as echarts from 'echarts'
|
||||||
this.tabsActiveName = item
|
this.tabsActiveName = item
|
||||||
if(item == '视频感知') {
|
if(item == '视频感知') {
|
||||||
this.$nextTick( () => {
|
this.$nextTick( () => {
|
||||||
this.initEventTypeCharts()
|
this.getVideoData()
|
||||||
|
// this.initEventTypeCharts()
|
||||||
this.initEventStateCharts()
|
this.initEventStateCharts()
|
||||||
this.initEventTimeCharts()
|
// this.initEventTimeCharts()
|
||||||
})
|
})
|
||||||
}
|
} else if(item == '物联感知') {
|
||||||
if(item == '走航监测') {
|
|
||||||
this.$nextTick( () => {
|
this.$nextTick( () => {
|
||||||
this.initRoadTimeCharts()
|
this.getDeviceData()
|
||||||
|
// this.initEventTypeCharts()
|
||||||
|
this.initEventStateCharts()
|
||||||
|
// this.initEventTimeCharts()
|
||||||
|
})
|
||||||
|
} else if(item == '走航监测') {
|
||||||
|
this.$nextTick( () => {
|
||||||
|
this.getRoadData()
|
||||||
|
// this.initRoadTimeCharts()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
typeSelect(item) {
|
handleTypeSelect(item) {
|
||||||
this.filterButton.typeSelectActive = item
|
this.filterButton.typeSelectActive = item
|
||||||
|
if(this.tabsActiveName == '物联感知') {
|
||||||
|
this.getDeviceData()
|
||||||
|
} else if (this.tabsActiveName == '视频感知') {
|
||||||
|
this.getVideoData()
|
||||||
|
} else if (this.tabsActiveName == '走航监测') {
|
||||||
|
this.getRoadData()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
closeDialog(){
|
closeDialog(){
|
||||||
this.$emit('closeDialog')
|
this.$emit('closeDialog')
|
||||||
},
|
},
|
||||||
|
// 查询视频数据
|
||||||
initEventTypeCharts () {
|
getVideoData() {
|
||||||
|
let raiseType = selectAllVideo
|
||||||
|
if(this.filterButton.typeSelectActive === '近7天') {
|
||||||
|
raiseType = selectByWeekEvent
|
||||||
|
} else if (this.filterButton.typeSelectActive === '近30天') {
|
||||||
|
raiseType = selectByMonthEvent
|
||||||
|
}
|
||||||
|
let params = {
|
||||||
|
pageSize: 5,
|
||||||
|
page: 1,
|
||||||
|
}
|
||||||
|
this.eventTotal = 0
|
||||||
|
this.barLabelArr = []
|
||||||
|
this.barValueArr = []
|
||||||
|
raiseType(params).then((res) => {
|
||||||
|
this.eventTotal = res.data.data.sum;
|
||||||
|
this.barLabelArr.push('渣土车发现')
|
||||||
|
this.barValueArr.push(res.data.data.sum)
|
||||||
|
this.initEventTypeCharts()
|
||||||
|
});
|
||||||
|
selectMonthCurrentByEvent().then((res) => {
|
||||||
|
if(res.data.data && res.data.data.length) {
|
||||||
|
let xValue = []
|
||||||
|
let yValue = []
|
||||||
|
res.data.data.forEach(item => {
|
||||||
|
xValue.push(item.pushTime)
|
||||||
|
yValue.push(item.number)
|
||||||
|
});
|
||||||
|
this.initEventTimeCharts(xValue, yValue)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 查询物联数据
|
||||||
|
getDeviceData() {
|
||||||
|
let raiseType = selectRaise
|
||||||
|
let noiceType = selectNoiceEvent
|
||||||
|
if(this.filterButton.typeSelectActive === '近7天') {
|
||||||
|
raiseType = selectByWeekNaise
|
||||||
|
noiceType = selectByWeekNoice
|
||||||
|
} else if (this.filterButton.typeSelectActive === '近30天') {
|
||||||
|
raiseType = selectByMonthNaise
|
||||||
|
noiceType = selectByMonthNoice
|
||||||
|
}
|
||||||
|
let params = {
|
||||||
|
pageSize: 5,
|
||||||
|
page: 1,
|
||||||
|
}
|
||||||
|
this.eventTotal = 0
|
||||||
|
this.barLabelArr = []
|
||||||
|
this.barValueArr = []
|
||||||
|
raiseType(params).then((res) => {
|
||||||
|
this.eventTotal += res.data.data.sum;
|
||||||
|
this.barLabelArr.push('工地扬尘')
|
||||||
|
this.barValueArr.push(res.data.data.sum)
|
||||||
|
this.initEventTypeCharts('device')
|
||||||
|
});
|
||||||
|
noiceType(params).then((res) => {
|
||||||
|
this.eventTotal += res.data.data.sum;
|
||||||
|
this.barLabelArr.push('工地噪声')
|
||||||
|
this.barValueArr.push(res.data.data.sum)
|
||||||
|
this.initEventTypeCharts('device')
|
||||||
|
});
|
||||||
|
selectMonthCurrentByBuilding().then((res) => {
|
||||||
|
if(res.data.data && res.data.data.length) {
|
||||||
|
let xValue = []
|
||||||
|
let yValue = []
|
||||||
|
res.data.data.forEach(item => {
|
||||||
|
xValue.push(item.pushTime)
|
||||||
|
yValue.push(item.number)
|
||||||
|
});
|
||||||
|
this.initEventTimeCharts(xValue, yValue)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 查询走航数据
|
||||||
|
getRoadData() {
|
||||||
|
let raiseType = selectRoadDataCountEvent
|
||||||
|
// let roadType = selectRoadData
|
||||||
|
if(this.filterButton.typeSelectActive === '近7天') {
|
||||||
|
raiseType = selectRoadDataWeekEvent
|
||||||
|
} else if (this.filterButton.typeSelectActive === '近30天') {
|
||||||
|
raiseType = selectRoadDataMonthEvent
|
||||||
|
}
|
||||||
|
this.eventTotal = 0
|
||||||
|
// 表格数据
|
||||||
|
raiseType().then((res) => {
|
||||||
|
if(res.data.data.roadDataDtos && res.data.data.roadDataDtos.length) {
|
||||||
|
this.PollutionRoad = res.data.data.roadDataDtos.slice(0, 5)
|
||||||
|
this.eventTotal = res.data.data.sum
|
||||||
|
}
|
||||||
|
});
|
||||||
|
selectMonthCurrentByRoadData().then((res) => {
|
||||||
|
if(res.data.data && res.data.data.length) {
|
||||||
|
let xValue = []
|
||||||
|
let yValue = []
|
||||||
|
res.data.data.forEach(item => {
|
||||||
|
xValue.push(item.pushTime)
|
||||||
|
yValue.push(item.number)
|
||||||
|
});
|
||||||
|
this.initEventTimeCharts(xValue, yValue)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initEventTypeCharts (type) {
|
||||||
|
if(type === 'device' && this.barLabelArr.length < 2) {
|
||||||
|
return
|
||||||
|
}
|
||||||
const option = {
|
const option = {
|
||||||
title: {
|
title: {
|
||||||
text: "事件类型分布",
|
text: "事件类型分布",
|
||||||
|
|
@ -169,7 +279,7 @@ import * as echarts from 'echarts'
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['非法运土', '工地扬尘', '其他'],
|
data: this.barLabelArr,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
margin: 7,
|
margin: 7,
|
||||||
|
|
@ -189,7 +299,7 @@ import * as echarts from 'echarts'
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: [120, 200, 150],
|
data: this.barValueArr,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
|
@ -358,10 +468,10 @@ import * as echarts from 'echarts'
|
||||||
)
|
)
|
||||||
eventState.setOption(option)
|
eventState.setOption(option)
|
||||||
},
|
},
|
||||||
initEventTimeCharts () {
|
initEventTimeCharts (xValue, yValue) {
|
||||||
const option = {
|
const option = {
|
||||||
title: {
|
title: {
|
||||||
text: "事件时间趋势",
|
text: "事件时间趋势(近30天)",
|
||||||
left: "left",
|
left: "left",
|
||||||
top: 15,
|
top: 15,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
|
@ -389,7 +499,7 @@ import * as echarts from 'echarts'
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
boundaryGap: ['2%', '2%'],
|
boundaryGap: ['2%', '2%'],
|
||||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
data: xValue
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
|
@ -416,7 +526,7 @@ import * as echarts from 'echarts'
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
|
data: yValue,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
|
|
@ -452,100 +562,6 @@ import * as echarts from 'echarts'
|
||||||
)
|
)
|
||||||
eventTime.setOption(option)
|
eventTime.setOption(option)
|
||||||
},
|
},
|
||||||
initRoadTimeCharts () {
|
|
||||||
const option = {
|
|
||||||
title: {
|
|
||||||
text: "事件时间趋势",
|
|
||||||
left: "left",
|
|
||||||
top: 15,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: "#fff",
|
|
||||||
fontWeight: "normal"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: 80,
|
|
||||||
bottom: 34,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
axisLabel: {
|
|
||||||
color: 'rgba(255, 255, 255,0.8)',
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#345a99',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
boundaryGap: ['2%', '2%'],
|
|
||||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '数量',
|
|
||||||
nameTextStyle: {
|
|
||||||
color: 'rgba(255, 255, 255,0.8)'
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: 'rgba(255, 255, 255,0.8)',
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
splitArea: {
|
|
||||||
interval: '1',
|
|
||||||
show: true,
|
|
||||||
areaStyle: {
|
|
||||||
color: ['#1d3556','#18334c']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'none',
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(254, 152, 32, 0)'
|
|
||||||
}, {
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(254, 152, 32, 0.7)'
|
|
||||||
}]),
|
|
||||||
},
|
|
||||||
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 roadTime = echarts.init(
|
|
||||||
document.getElementById('road-time-chart')
|
|
||||||
)
|
|
||||||
roadTime.setOption(option)
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="eventNum">
|
<div class="eventNum">
|
||||||
累计事件数量
|
累计事件数量(2022.05.25-至今)
|
||||||
<p><span>{{allListDataNum}}</span>件</p>
|
<p><span>{{allListDataNum}}</span>件</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -81,8 +81,8 @@ import bus from '@/views/layout/bus'
|
||||||
import complaintEvent from './components/ComplaintEvent'
|
import complaintEvent from './components/ComplaintEvent'
|
||||||
import VideoList from './components/VideoList'
|
import VideoList from './components/VideoList'
|
||||||
import SiteList from './components/SiteList'
|
import SiteList from './components/SiteList'
|
||||||
import { selectByJdWd, selectByDayRaise, selectByDayNoice, selectByDayRoadData } from '@/api/construction/index'
|
import { selectByJdWd, selectDayVideo, selectByDayRaise, selectByDayNoice, selectByDayRoadData } from '@/api/construction/index'
|
||||||
import { createSiteListPop, createCameraDetailsPop } from '@/supermap/createMarkerPopup'
|
import { createSiteListPop, createCameraDetailsPop, createImportantAreaPop } from '@/supermap/createMarkerPopup'
|
||||||
|
|
||||||
import VideoPlay from './components/VideoPlay'
|
import VideoPlay from './components/VideoPlay'
|
||||||
import { selectAllByGps } from '@/api/road'
|
import { selectAllByGps } from '@/api/road'
|
||||||
|
|
@ -119,6 +119,10 @@ export default {
|
||||||
this.hiMap.mapObj,
|
this.hiMap.mapObj,
|
||||||
this.hiMapFun
|
this.hiMapFun
|
||||||
)
|
)
|
||||||
|
this.todayListNum = 0
|
||||||
|
selectDayVideo().then((res) => {
|
||||||
|
this.todayListNum += res.data.data.sum
|
||||||
|
})
|
||||||
|
|
||||||
selectByDayRaise().then((res) => {
|
selectByDayRaise().then((res) => {
|
||||||
this.todayListNum += res.data.data.sum
|
this.todayListNum += res.data.data.sum
|
||||||
|
|
@ -396,6 +400,7 @@ export default {
|
||||||
this.hiMapFun.removeLayerByLayerName('videoSurveillance')
|
this.hiMapFun.removeLayerByLayerName('videoSurveillance')
|
||||||
this.hiMapFun.removeLayerByLayerName('constructionSite')
|
this.hiMapFun.removeLayerByLayerName('constructionSite')
|
||||||
this.hiMapFun.removeLayerByLayerName('roadPoint')
|
this.hiMapFun.removeLayerByLayerName('roadPoint')
|
||||||
|
this.hiMapFun.removeLayerByLayerName('videoNotice')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {}
|
beforeDestroy () {}
|
||||||
|
|
|
||||||
|
|
@ -248,7 +248,8 @@ export default {
|
||||||
const yDate = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate()
|
const yDate = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate()
|
||||||
this.preTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
|
this.preTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
|
||||||
currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1)
|
currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1)
|
||||||
this.weekTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
|
// this.weekTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
|
||||||
|
this.weekTime = this.getWeekDate()
|
||||||
},
|
},
|
||||||
// 生命周期 - 挂载完成（访问DOM元素）
|
// 生命周期 - 挂载完成（访问DOM元素）
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|
@ -305,6 +306,25 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
// 获取本周一日期
|
||||||
|
getWeekDate() {
|
||||||
|
let now = new Date()
|
||||||
|
let nowTime = now.getTime();
|
||||||
|
let day = now.getDay();
|
||||||
|
let oneDayTime = 1000 * 60 * 60 * 24;
|
||||||
|
let mondayTime = nowTime - (day - 1) * oneDayTime;
|
||||||
|
let lw = new Date(mondayTime);
|
||||||
|
let lastY = lw.getFullYear();
|
||||||
|
let lastM = lw.getMonth() + 1;
|
||||||
|
let lastD = lw.getDate();
|
||||||
|
let startData =
|
||||||
|
lastY +
|
||||||
|
"-" +
|
||||||
|
(lastM < 10 ? "0" + lastM : lastM) +
|
||||||
|
"-" +
|
||||||
|
(lastD < 10 ? "0" + lastD : lastD);
|
||||||
|
return startData + ' ' + '00:00:00'
|
||||||
|
},
|
||||||
// 道路污染数据 昨日
|
// 道路污染数据 昨日
|
||||||
async getRoadData () {
|
async getRoadData () {
|
||||||
const res = await getRoadData({ dt: this.preTime })
|
const res = await getRoadData({ dt: this.preTime })
|
||||||
|
|
|
||||||
|
|
@ -72,6 +72,7 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
openCurrentVideo(channelCode){
|
openCurrentVideo(channelCode){
|
||||||
|
console.log('channelCode-----', channelCode)
|
||||||
bus.$emit('openCurrentVideoSurveillance',channelCode)
|
bus.$emit('openCurrentVideoSurveillance',channelCode)
|
||||||
// getStreamByChannelCode({channelCode:channelCode}).then(res => {
|
// getStreamByChannelCode({channelCode:channelCode}).then(res => {
|
||||||
// let newVideoStream = this.IntelliURLReplaceIP(res.data.data)
|
// let newVideoStream = this.IntelliURLReplaceIP(res.data.data)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue