重点区域检测平台
This commit is contained in:
wangwei
parent
963349da1b
commit
04cb3a0f91
|
|
@ -0,0 +1,429 @@
|
||||||
|
<!-- -->
|
||||||
|
<template>
|
||||||
|
<div class="early-warning">
|
||||||
|
<header>
|
||||||
|
<div class="title">监测预警</div>
|
||||||
|
</header>
|
||||||
|
<div class="select-date">
|
||||||
|
<div
|
||||||
|
@click="tabsHandleClick(item)"
|
||||||
|
v-for="item in dateTabs"
|
||||||
|
:key="item.index"
|
||||||
|
>
|
||||||
|
<p>{{ item.name }}</p>
|
||||||
|
<p>{{ item.dataNum || "71" }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="event-source">
|
||||||
|
<div class="event-source-title">事件来源</div>
|
||||||
|
<div>
|
||||||
|
<el-radio v-model="checkStatus" label="0">全部</el-radio>
|
||||||
|
<el-radio v-model="checkStatus" label="1"
|
||||||
|
>数据智能监测</el-radio
|
||||||
|
>
|
||||||
|
<el-radio v-model="checkStatus" label="2">视频感知</el-radio>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="type-status">
|
||||||
|
<span>日期：</span>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dataValue"
|
||||||
|
type="date"
|
||||||
|
placeholder="选择日期"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="type-status">
|
||||||
|
<span>重点区域类型：</span>
|
||||||
|
<el-select
|
||||||
|
v-model="typevalue"
|
||||||
|
class="selectclass"
|
||||||
|
placeholder="请选择"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in typeoptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<span>事件状态：</span>
|
||||||
|
<el-select
|
||||||
|
v-model="statusvalue"
|
||||||
|
class="selectclass"
|
||||||
|
placeholder="请选择"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in statusoptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="event-list">
|
||||||
|
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
|
||||||
|
<div class="event-details-title">
|
||||||
|
<p>{{item.eventNewName||''}}</p>
|
||||||
|
<span>数据智能检测</span>
|
||||||
|
<span>城市广场</span>
|
||||||
|
<span>已下发</span>
|
||||||
|
</div>
|
||||||
|
<div class="event-details-des">
|
||||||
|
<p>人数:12</p>
|
||||||
|
<p>{{ item.captureTime || ''}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
layout="prev, pager, next"
|
||||||
|
@current-change="pageChange"
|
||||||
|
:page-size = "pageSize"
|
||||||
|
:total="total"
|
||||||
|
:current-page="currentPage"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
||||||
|
//例如：import 《组件名称》 from '《组件路径》';
|
||||||
|
import {
|
||||||
|
selectByAreaEvent,
|
||||||
|
selectByNameAreaEvent,
|
||||||
|
selectByDayAreaEvent,
|
||||||
|
} from "@/api/area";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
//import引入的组件需要注入到对象中才能使用
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
//这里存放数据
|
||||||
|
return {
|
||||||
|
dateTabs: [
|
||||||
|
{
|
||||||
|
name: "今日事件",
|
||||||
|
data: [],
|
||||||
|
dataNum: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "数据智能监测",
|
||||||
|
data: [],
|
||||||
|
dataNum: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "视频感知",
|
||||||
|
data: [],
|
||||||
|
dataNum: "",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
checkStatus: "2",
|
||||||
|
dataValue: "",
|
||||||
|
typevalue: "",
|
||||||
|
typeoptions: [
|
||||||
|
{
|
||||||
|
value: "1",
|
||||||
|
label: "全部",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
label: "海水浴场",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "3",
|
||||||
|
label: "城市广场",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "4",
|
||||||
|
label: "商业街区",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
statusvalue: "",
|
||||||
|
statusoptions: [
|
||||||
|
{
|
||||||
|
value: "1",
|
||||||
|
label: "全部",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
label: "待下发",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "3",
|
||||||
|
label: "已下发",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "4",
|
||||||
|
label: "已忽略",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
eventListData: [],
|
||||||
|
total:0,
|
||||||
|
pageSize:6,
|
||||||
|
currentPage:1,
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//监听属性 类似于data概念
|
||||||
|
computed: {},
|
||||||
|
//监控data中的数据变化
|
||||||
|
watch: {
|
||||||
|
checkStatus(newV, oldV) {
|
||||||
|
console.log(newV);
|
||||||
|
// this.$refs.tree.filter(newV);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
//方法集合
|
||||||
|
methods: {
|
||||||
|
tabsHandleClick(item) {
|
||||||
|
// debugger
|
||||||
|
// this.hiMapFun.removeLayerByLayerName('roadPoint')
|
||||||
|
this.tableData = item.data;
|
||||||
|
// this.addToMap(item.data)
|
||||||
|
},
|
||||||
|
//分页
|
||||||
|
pageChange(val) {
|
||||||
|
this.currentPage = val
|
||||||
|
// if(this.listTypeSelect == '全部'){
|
||||||
|
selectByAreaEvent({ pageSize: this.pageSize,page: val,}).then((res) => {
|
||||||
|
this.eventListData = res.data.data.events
|
||||||
|
this.total = res.data.data.sum
|
||||||
|
});
|
||||||
|
// } else {
|
||||||
|
// selectByNameAreaEvent({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
|
||||||
|
// this.eventListData = res.data.data.events;
|
||||||
|
// this.total = res.data.data.sum
|
||||||
|
// // this.pageCount = 0
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
openDetailsDialog(data) {
|
||||||
|
this.$parent.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||||
|
const EventListDetail = [
|
||||||
|
{
|
||||||
|
latLng: { lat: data.latitude, lng: data.longitude },
|
||||||
|
data: data,
|
||||||
|
type: "eventList",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude });
|
||||||
|
this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0]);
|
||||||
|
this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||||
|
EventListDetail,
|
||||||
|
"poi-event.png",
|
||||||
|
"EventListDetail"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//生命周期 - 创建完成（可以访问当前this实例）
|
||||||
|
created() {},
|
||||||
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
||||||
|
mounted() {
|
||||||
|
// 查询检测预警。
|
||||||
|
const params = {
|
||||||
|
page: 1,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
};
|
||||||
|
selectByAreaEvent(params).then((res) => {
|
||||||
|
this.eventListData = res.data.data.events;
|
||||||
|
this.total = res.data.data.sum;
|
||||||
|
this.$parent.allListDataNum = res.data.data.sum;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeCreate() {}, //生命周期 - 创建之前
|
||||||
|
beforeMount() {}, //生命周期 - 挂载之前
|
||||||
|
beforeUpdate() {}, //生命周期 - 更新之前
|
||||||
|
updated() {}, //生命周期 - 更新之后
|
||||||
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
||||||
|
destroyed() {}, //生命周期 - 销毁完成
|
||||||
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
//@import url(); 引入公共css类
|
||||||
|
.early-warning {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
header {
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
background: url(../../../../assets/construction/subTitle.png) no-repeat
|
||||||
|
center;
|
||||||
|
text-align: center;
|
||||||
|
.title {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: bold;
|
||||||
|
background: linear-gradient(0deg, #9dbbd2 0%, #ffffff 100%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-family: "Tensentype-ZhiHeiJ-W5";
|
||||||
|
}
|
||||||
|
.title::before {
|
||||||
|
content: "事件感知";
|
||||||
|
text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: 0.6);
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select-date {
|
||||||
|
margin: 20px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
div {
|
||||||
|
width: 100px;
|
||||||
|
height: 68px;
|
||||||
|
background: url("~@/assets/img/roadGovernancebg.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
p:nth-child(1) {
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #66ffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div:nth-child(2) {
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.event-source {
|
||||||
|
display: flex;
|
||||||
|
color: #fff;
|
||||||
|
align-items: center;
|
||||||
|
.event-source-title {
|
||||||
|
margin: 0 20px 0 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
::v-deep .el-radio {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.type-status {
|
||||||
|
display: flex;
|
||||||
|
padding: 5px 0px;
|
||||||
|
color: #fff;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.selectclass {
|
||||||
|
width: 125px;
|
||||||
|
}
|
||||||
|
::v-deep .el-input__inner {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-color: #107bb0;
|
||||||
|
box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
|
||||||
|
height: 30px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
::v-deep .el-input__icon {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-list {
|
||||||
|
// margin-top: 12px;
|
||||||
|
// margin-top: 30px;
|
||||||
|
width: 100%;
|
||||||
|
padding:0px 10px;
|
||||||
|
height: 670px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.event-details {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 16px;
|
||||||
|
// margin-top: 18px;
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
padding-right: 8px;
|
||||||
|
background: linear-gradient(90deg, #173759 0, #133150 100%);
|
||||||
|
.event-details-title {
|
||||||
|
height: 36px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
p {
|
||||||
|
width: auto;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #1ffefd;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 36px;
|
||||||
|
background: linear-gradient(90deg, rgba($color: #0873c1, $alpha: 1) 0, rgba($color: #0873c1, $alpha: 0) 100%);
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
width: auto;
|
||||||
|
padding:0px 10px;
|
||||||
|
height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 20px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
span:nth-child(1) {
|
||||||
|
background: #ae761c;
|
||||||
|
}
|
||||||
|
span:nth-child(2) {
|
||||||
|
background: #3B5E6E;
|
||||||
|
}
|
||||||
|
span:nth-child(3) {
|
||||||
|
background: #022587;
|
||||||
|
}
|
||||||
|
span:nth-child(4) {
|
||||||
|
background: #ae761c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.event-details-des {
|
||||||
|
padding: 8px 0 0 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
p {
|
||||||
|
width:50%;
|
||||||
|
color: rgba(255,255,255, .8);
|
||||||
|
line-height: 28px;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
display:-webkit-box;
|
||||||
|
-webkit-box-orient:vertical;
|
||||||
|
-webkit-line-clamp:1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-pagination {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
// margin-top: 16px;
|
||||||
|
button, ul>li {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(31,254,253, .5);
|
||||||
|
background: transparent;
|
||||||
|
color: rgba(31,254,253, .5);
|
||||||
|
}
|
||||||
|
li:not(.disabled).active {
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid rgba(31,254,253, .5);
|
||||||
|
background: rgba(31,254,253, .5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,435 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">重点区域列表</div>
|
||||||
|
<!-- 工地列表 -->
|
||||||
|
<div class="eventData">
|
||||||
|
<div style="display: flex;justify-content: space-between">
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入区域名称"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
@input="searchSite"
|
||||||
|
v-model="searchValue"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
<el-select v-model="selectAreaValue" placeholder="全部" @change="fliterSiteByArea">
|
||||||
|
<el-option
|
||||||
|
v-for="item in areaOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select v-model="selectValue" placeholder="全部" @change="fliterSiteByArea">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="eventNoise">
|
||||||
|
<el-table
|
||||||
|
:data="siteData"
|
||||||
|
height='356'
|
||||||
|
@row-click="analyse"
|
||||||
|
:cell-style="{
|
||||||
|
color: '#fff',
|
||||||
|
cursor: 'pointer',
|
||||||
|
'background-color': '#18304c',
|
||||||
|
}"
|
||||||
|
:header-cell-style="{
|
||||||
|
color: '#1ffefd',
|
||||||
|
'background-color': '#2b4b7a',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<el-table-column prop="areaName" label="名称" show-overflow-tooltip>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="areaName" label="区域类型" show-overflow-tooltip>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="areaName" label="管辖单位" show-overflow-tooltip>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="location" label="位置" show-overflow-tooltip>
|
||||||
|
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="allNums" label="负责人">
|
||||||
|
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="allNums" label="联系电话">
|
||||||
|
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import bus from "@/views/layout/bus";
|
||||||
|
import {
|
||||||
|
selectKeyAreaList,
|
||||||
|
selectKeyArea,
|
||||||
|
selectByAreaName,
|
||||||
|
selectByLikeName
|
||||||
|
} from "@/api/area";
|
||||||
|
import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
|
||||||
|
import { createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchValue: "",
|
||||||
|
siteData: [],
|
||||||
|
siteDataAll: [],
|
||||||
|
selectSiteData: [],
|
||||||
|
InformationActiveName: "基本信息",
|
||||||
|
informationShow: false,
|
||||||
|
detailedInfToday: [],
|
||||||
|
detailedInfWeek: [],
|
||||||
|
detailedInfMonth: [],
|
||||||
|
dustActiveName: "今日",
|
||||||
|
areaOptions: [
|
||||||
|
{
|
||||||
|
value: "全部",
|
||||||
|
label: '全部'
|
||||||
|
},{
|
||||||
|
value: "公园广场",
|
||||||
|
label: '公园广场'
|
||||||
|
},{
|
||||||
|
value: "商业街区",
|
||||||
|
label: '商业街区'
|
||||||
|
}, {
|
||||||
|
value: "景区景点",
|
||||||
|
label: '景区景点'
|
||||||
|
}, {
|
||||||
|
value: "海水浴场",
|
||||||
|
label: '海水浴场'
|
||||||
|
}, {
|
||||||
|
value: "窗口单位",
|
||||||
|
label: '窗口单位'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
selectAreaValue:"全部",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: "全部",
|
||||||
|
label: '全部'
|
||||||
|
},{
|
||||||
|
value: "公园广场",
|
||||||
|
label: '公园广场'
|
||||||
|
},{
|
||||||
|
value: "商业街区",
|
||||||
|
label: '商业街区'
|
||||||
|
}, {
|
||||||
|
value: "景区景点",
|
||||||
|
label: '景区景点'
|
||||||
|
}, {
|
||||||
|
value: "海水浴场",
|
||||||
|
label: '海水浴场'
|
||||||
|
}, {
|
||||||
|
value: "窗口单位",
|
||||||
|
label: '窗口单位'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
selectValue: "全部",
|
||||||
|
siteDataAll: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let params = {
|
||||||
|
type1: "'公园广场','窗口单位'",
|
||||||
|
type2: "'景区景点','海水浴场'",
|
||||||
|
type3: "'商业街区'"
|
||||||
|
}
|
||||||
|
selectKeyAreaList(params).then((res) => {
|
||||||
|
this.siteDataAll = res.data.data
|
||||||
|
this.siteData = res.data.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
searchSite() {
|
||||||
|
if (!this.searchValue && this.selectValue !== '全部') {
|
||||||
|
selectKeyArea({ type: this.selectValue }).then((res) => {
|
||||||
|
this.siteData = res.data.data
|
||||||
|
})
|
||||||
|
} else if (!this.searchValue) {
|
||||||
|
this.siteData = this.siteDataAll;
|
||||||
|
}else {
|
||||||
|
const params = {
|
||||||
|
areaName: this.searchValue,
|
||||||
|
};
|
||||||
|
selectByLikeName(params).then((res) => {
|
||||||
|
this.siteData = res.data.data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fliterSiteByArea(val) {
|
||||||
|
if(val === '全部') {
|
||||||
|
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) {
|
||||||
|
// bus.$emit("openCauseAnalysis", row);
|
||||||
|
this.$parent.hiMapFun.removerPolygon()
|
||||||
|
this.$parent.removeRoadCauseAnalysis()
|
||||||
|
if(row.latitude && row.longitude) {
|
||||||
|
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 if(row.point) {
|
||||||
|
let arr = JSON.parse(row.point)
|
||||||
|
let areaLatLng = []
|
||||||
|
arr.forEach((item) => {
|
||||||
|
let lonLat = gcjLL2wgs84LL(item[0], item[1]);
|
||||||
|
areaLatLng.push([lonLat[1],lonLat[0]])
|
||||||
|
})
|
||||||
|
this.$parent.hiMapFun.addAreaToMap(areaLatLng)
|
||||||
|
}
|
||||||
|
// else {
|
||||||
|
// selectByAreaName({areaName:row.areaName}).then((res) => {
|
||||||
|
// if(res.data.data){
|
||||||
|
// let areaLatLng = []
|
||||||
|
// res.data.data.forEach((item) => {
|
||||||
|
// let lonLat = gcjLL2wgs84LL(item.longitude, item.latitude);
|
||||||
|
// areaLatLng.push([lonLat[1],lonLat[0]])
|
||||||
|
// })
|
||||||
|
// this.$parent.hiMapFun.removerPolygon()
|
||||||
|
// this.$parent.removeRoadCauseAnalysis()
|
||||||
|
// this.$parent.hiMapFun.addAreaToMap(areaLatLng)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
// 关闭基本信息窗口
|
||||||
|
informationClose() {
|
||||||
|
this.informationShow = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../../../../assets/construction/listTopBg.png) no-repeat,
|
||||||
|
url(../../../../assets/construction/siteTag.png) no-repeat 507px 17px;
|
||||||
|
padding: 30px 0 18px 14px;
|
||||||
|
.title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
::v-deep .eventData {
|
||||||
|
width: 544px;
|
||||||
|
margin-top: 14px;
|
||||||
|
.el-input {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
.el-input__inner {
|
||||||
|
border: 1px solid rgba(31,254,253,.9);
|
||||||
|
color: #fff;
|
||||||
|
background: rgba($color: #203b5d, $alpha: .8);
|
||||||
|
border-radius: unset;
|
||||||
|
&::placeholder {
|
||||||
|
color: rgba($color: #fff, $alpha: 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-input__prefix {
|
||||||
|
color: rgba(31,254,253,.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select {
|
||||||
|
// margin-left: 10px;
|
||||||
|
.el-input {
|
||||||
|
width: 161px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .eventNoise {
|
||||||
|
margin-top: 16px;
|
||||||
|
.el-table {
|
||||||
|
border: 1px solid #325d94;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
th,td {
|
||||||
|
border-right: 1px solid #325d94 !important;
|
||||||
|
}
|
||||||
|
// .descending.is-leaf.is-sortable {
|
||||||
|
// .sort-caret {
|
||||||
|
// border-top-color: #1dfeff;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.cell {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
.el-table th.is-leaf {
|
||||||
|
border: 1px solid #1f557c;
|
||||||
|
}
|
||||||
|
.el-table td {
|
||||||
|
border: 0;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
.el-table th {
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
.el-table__row:nth-of-type(even) > td {
|
||||||
|
background-color: #113660 !important;
|
||||||
|
}
|
||||||
|
.el-table__body-wrapper {
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
background-color: #10335e;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #446dac !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 基本信息
|
||||||
|
.informationPop {
|
||||||
|
position: absolute;
|
||||||
|
top: 150px;
|
||||||
|
left: -800px;
|
||||||
|
width: 700px;
|
||||||
|
height: 350px;
|
||||||
|
background: #fff;
|
||||||
|
::v-deep .el-tabs {
|
||||||
|
.el-tabs__header {
|
||||||
|
margin: 0;
|
||||||
|
.el-tabs__item {
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.el-tabs__item.is-active {
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
.el-tabs__active-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.is-top {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-wrap::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-table th,
|
||||||
|
.el-table tr {
|
||||||
|
background: #3c657c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.informationMain {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
height: 310px;
|
||||||
|
p {
|
||||||
|
padding: 4px 10px;
|
||||||
|
}
|
||||||
|
.informationLeft {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
.informationRight {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.informationClose {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
right: 13px;
|
||||||
|
top: 2px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 详细信息
|
||||||
|
.dustList {
|
||||||
|
width: 100%;
|
||||||
|
::v-deep .el-table::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
::v-deep .el-tabs {
|
||||||
|
.el-tabs__header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 10px 0 10px 5px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
.is-top {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.el-tabs__item {
|
||||||
|
background: #ccc;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 75px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 2px;
|
||||||
|
border-radius: 23px;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 26px;
|
||||||
|
height: 26px;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.el-tabs__item.is-active {
|
||||||
|
background: #409eff;
|
||||||
|
}
|
||||||
|
.el-tabs__active-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-wrap::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-table th,
|
||||||
|
.el-table tr {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -43,18 +43,21 @@
|
||||||
|
|
||||||
<!-- 事件感知 -->
|
<!-- 事件感知 -->
|
||||||
<div class="complaintContent">
|
<div class="complaintContent">
|
||||||
<complaint-event ref="complaintEventRef"></complaint-event>
|
<!-- <complaint-event ref="complaintEventRef"></complaint-event> -->
|
||||||
|
<early-warning> </early-warning>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 视频标签、列表 -->
|
<!-- 视频标签、列表 -->
|
||||||
<div class="complaintContent1">
|
<div class="complaintContent1">
|
||||||
<video-list-right ref="videoListRef"></video-list-right>
|
<video-list-right ref="videoListRef"></video-list-right>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="keyAreas" @click="handleKeyArea">
|
||||||
|
重点区域
|
||||||
|
</div>
|
||||||
<!-- 工地列表 -->
|
<!-- 工地列表 -->
|
||||||
<!-- <div class="siteList">
|
<div class="siteList" v-if="keyAreasShow">
|
||||||
<site-list></site-list>
|
<site-list-more></site-list-more>
|
||||||
</div> -->
|
</div>
|
||||||
<!-- 热力图图例 -->
|
<!-- 热力图图例 -->
|
||||||
<div class="legend"></div>
|
<div class="legend"></div>
|
||||||
|
|
||||||
|
|
@ -109,9 +112,10 @@ 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 EarlyWarning from "./components/EarlyWarning";
|
||||||
import VideoPlay from './components/VideoPlay'
|
import VideoPlay from './components/VideoPlay'
|
||||||
import VideoListRight from "./components/VideoListRight";
|
import VideoListRight from "./components/VideoListRight";
|
||||||
import SiteList from "./components/SiteList";
|
import SiteListMore from "./components/SiteListMore";
|
||||||
import { selectByJdWd } from "@/api/construction/index";
|
import { selectByJdWd } from "@/api/construction/index";
|
||||||
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
||||||
import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
|
import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
|
||||||
|
|
@ -143,16 +147,18 @@ export default {
|
||||||
// 时间轴
|
// 时间轴
|
||||||
timelineData: [],
|
timelineData: [],
|
||||||
// 热力图当日数据
|
// 热力图当日数据
|
||||||
hotDataAll: {}
|
hotDataAll: {},
|
||||||
|
keyAreasShow:false, //是否显示重点区域。
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
TiledMap,
|
TiledMap,
|
||||||
complaintEvent,
|
complaintEvent,
|
||||||
VideoListRight,
|
VideoListRight,
|
||||||
SiteList,
|
SiteListMore,
|
||||||
VideoPlay,
|
VideoPlay,
|
||||||
HorizonTimeLine
|
HorizonTimeLine,
|
||||||
|
EarlyWarning,
|
||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -632,6 +638,10 @@ export default {
|
||||||
this.hiMapFun.removeLayerByLayerName('景区景点')
|
this.hiMapFun.removeLayerByLayerName('景区景点')
|
||||||
this.hiMapFun.removeLayerByLayerName('海水浴场')
|
this.hiMapFun.removeLayerByLayerName('海水浴场')
|
||||||
this.hiMapFun.removeLayerByLayerName('窗口单位')
|
this.hiMapFun.removeLayerByLayerName('窗口单位')
|
||||||
|
},
|
||||||
|
//点击是否显示重点区域。
|
||||||
|
handleKeyArea(){
|
||||||
|
this.keyAreasShow=!this.keyAreasShow;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {},
|
beforeDestroy() {},
|
||||||
|
|
@ -773,6 +783,21 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.keyAreas {
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 110px;
|
||||||
|
left: 498px;
|
||||||
|
z-index: 1000;
|
||||||
|
background-color: #1A69B2;
|
||||||
|
text-align: center;
|
||||||
|
padding: 6px 0 13px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.videoList {
|
.videoList {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -787,9 +812,9 @@ export default {
|
||||||
.siteList {
|
.siteList {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
right: 8px;
|
left: 498px;
|
||||||
top: 562px;
|
top: 175px;
|
||||||
width: 398px;
|
width: 574px;
|
||||||
height:500px;
|
height:500px;
|
||||||
background: rgba($color: #05213b, $alpha: .85);
|
background: rgba($color: #05213b, $alpha: .85);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue