|
|
@@ -106,130 +106,38 @@
|
|
|
</div>
|
|
|
<div class="i-list-con h-73">
|
|
|
<div class="d-l-con-icon">
|
|
|
- <div class="icon-con w-33">
|
|
|
- <div class="icon icon-dot"></div>
|
|
|
- <div class="icon-text">
|
|
|
- <h6>500</h6>
|
|
|
- <h5>未处理</h5>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="icon-con w-33">
|
|
|
- <div class="icon icon-dot"></div>
|
|
|
- <div class="icon-text">
|
|
|
- <h6>453</h6>
|
|
|
- <h5>处理中</h5>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="icon-con w-33">
|
|
|
- <div class="icon icon-dot"></div>
|
|
|
- <div class="icon-text">
|
|
|
- <h6>453</h6>
|
|
|
- <h5>已完成</h5>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="icon-con w-33">
|
|
|
- <div class="icon icon-dot"></div>
|
|
|
- <div class="icon-text">
|
|
|
- <h6>500</h6>
|
|
|
- <h5>人工</h5>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="icon-con w-33">
|
|
|
- <div class="icon icon-dot"></div>
|
|
|
- <div class="icon-text">
|
|
|
- <h6>453</h6>
|
|
|
- <h5>火险</h5>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="icon-con w-33">
|
|
|
- <div class="icon icon-dot"></div>
|
|
|
- <div class="icon-text">
|
|
|
- <h6>453</h6>
|
|
|
- <h5>卡扣</h5>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="icon-con w-33" v-for="(item,index) in todayEventCountList"
|
|
|
+ v-on:click="todayEventCountSetMarkers(item.eventStatus)">
|
|
|
+ <div class="icon icon-dot"></div>
|
|
|
+ <div class="icon-text">
|
|
|
+ <h6>{{item.count}}</h6>
|
|
|
+ <h5>{{item.eventStatusName}}</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="icon-con w-33" v-for="(item,index) in todayEventSourcetList"
|
|
|
+ v-on:click="todayEventSourcetSetMarkers(item.eventSource)">
|
|
|
+ <div class="icon icon-dot"></div>
|
|
|
+ <div class="icon-text">
|
|
|
+ <h6>{{item.count}}</h6>
|
|
|
+ <h5>{{item.eventSourceName}}</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="d-tit">
|
|
|
<h4>事件分布</h4>
|
|
|
</div>
|
|
|
- <div class="d-l-con" @click="">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>双辽</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count"> 12</div>
|
|
|
- </div>
|
|
|
- <div class="d-l-con" @click="">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>伊通</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count"> 12</div>
|
|
|
- </div>
|
|
|
- <div class="d-l-con" @click="">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>梨树</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count"> 12</div>
|
|
|
- </div>
|
|
|
- <div class="d-l-con" @click="">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>铁东</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count"> 12</div>
|
|
|
- </div>
|
|
|
- <div class="d-l-con" @click="">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>铁西</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count"> 12</div>
|
|
|
- </div>
|
|
|
- <div class="d-tit">
|
|
|
- <h4>事件分类</h4>
|
|
|
- </div>
|
|
|
- <div id="event-chart" style="width: 100%;height:15.2vh;"></div>
|
|
|
- <div class="d-l-con" @click="">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>森林防火</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count"> 12</div>
|
|
|
- </div>
|
|
|
- <div class="d-l-con" @click="">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>乱砍盗伐</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count"> 12</div>
|
|
|
- </div>
|
|
|
- <div class="d-l-con" @click="">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>动物保护</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count"> 12</div>
|
|
|
- </div>
|
|
|
- <div class="d-l-con" @click="">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>珍惜树种</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count"> 12</div>
|
|
|
- </div>
|
|
|
- <div class="d-l-con" @click="">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>病虫灾害</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count"> 12</div>
|
|
|
- </div>
|
|
|
+ <div id="event-chart" style="width: 100%;height:26.2vh;"></div>
|
|
|
+ <div class="d-l-con" @click="" v-for="(item,index) in todayEventCountDeptList">
|
|
|
+ <div class="d-l-l-text">
|
|
|
+ <i class="i-small"></i>
|
|
|
+ <h4>{{item.deptName}}</h4>
|
|
|
+ </div>
|
|
|
+ <div class="d-l-l-count">{{item.count}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<!-- <div class="forthis">
|
|
|
<div class="this-title">
|
|
|
<span>资源库</span>
|
|
|
@@ -261,9 +169,6 @@
|
|
|
<el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
|
|
|
<div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img src="@/assets/images/mascot.png"/></div>
|
|
|
</el-tooltip>
|
|
|
- <el-button @click="setMarkers">加载点</el-button>
|
|
|
- <el-button @click="setMarkersRadius">加载点1</el-button>
|
|
|
- <el-button @click="clearM">清除点</el-button>
|
|
|
</div>
|
|
|
<!--事件弹层-->
|
|
|
<div class="event-info">
|
|
|
@@ -514,6 +419,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ getTodayEvent,getEventStatusList,getEventSourceList
|
|
|
+ } from '@/api/event'
|
|
|
+
|
|
|
import supermap from '@/components/supermap' //超图
|
|
|
import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
@@ -531,119 +440,17 @@
|
|
|
// })
|
|
|
},
|
|
|
mounted() {
|
|
|
+ this.getTodayEvent()
|
|
|
this.cameraChat()
|
|
|
this.personnelChart()
|
|
|
- this.eventChart()
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- markersList: [
|
|
|
- {
|
|
|
- lng: 124.59,
|
|
|
- lat: 43.02,
|
|
|
- icon: 'marker',
|
|
|
- iconSize: [152, 152],
|
|
|
- bindPopupHtml: "数字铁东",
|
|
|
- click: "clickTiedong",
|
|
|
- keepBindPopup: false,
|
|
|
- isAggregation: true
|
|
|
- },
|
|
|
- {
|
|
|
- lng: 124.33,
|
|
|
- lat: 43.2,
|
|
|
- icon: 'marker',
|
|
|
- iconSize: [152, 152],
|
|
|
- bindPopupHtml: "数字铁西",
|
|
|
- click: "clickTiexi",
|
|
|
- keepBindPopup: false,
|
|
|
- isAggregation: true
|
|
|
- },
|
|
|
- {
|
|
|
- lng: 124.31,
|
|
|
- lat: 43.46,
|
|
|
- icon: 'marker',
|
|
|
- iconSize: [152, 152],
|
|
|
- bindPopupHtml: "数字梨树",
|
|
|
- keepBindPopup: false,
|
|
|
- isAggregation: true
|
|
|
- },
|
|
|
- {
|
|
|
- lng: 125.27,
|
|
|
- lat: 43.38,
|
|
|
- icon: 'marker',
|
|
|
- iconSize: [152, 152],
|
|
|
- bindPopupHtml: "数字伊通",
|
|
|
- click: "clickYitong",
|
|
|
- keepBindPopup: false,
|
|
|
- isAggregation: true
|
|
|
- },
|
|
|
- {
|
|
|
- lng: 123.69,
|
|
|
- lat: 43.73,
|
|
|
- icon: 'marker',
|
|
|
- iconSize: [152, 152],
|
|
|
- bindPopupHtml: "数字双辽",
|
|
|
- click: "clickShuangliao",
|
|
|
- keepBindPopup: true,
|
|
|
- isAggregation: false
|
|
|
- }
|
|
|
- ],
|
|
|
- markersRadiusList: [
|
|
|
- {
|
|
|
- lng: 124.59,
|
|
|
- lat: 43.02,
|
|
|
- icon: 'marker',
|
|
|
- iconSize: [152, 152],
|
|
|
- bindPopupHtml: "数字铁东",
|
|
|
- click: "clickTiedong",
|
|
|
- keepBindPopup: false,
|
|
|
- isAggregation: true,
|
|
|
- radius: 1
|
|
|
- },
|
|
|
- {
|
|
|
- lng: 124.33,
|
|
|
- lat: 43.2,
|
|
|
- icon: 'marker',
|
|
|
- iconSize: [152, 152],
|
|
|
- bindPopupHtml: "数字铁西",
|
|
|
- click: "clickTiexi",
|
|
|
- keepBindPopup: false,
|
|
|
- isAggregation: true,
|
|
|
- radius: 1
|
|
|
- },
|
|
|
- {
|
|
|
- lng: 124.31,
|
|
|
- lat: 43.46,
|
|
|
- icon: 'marker',
|
|
|
- iconSize: [152, 152],
|
|
|
- bindPopupHtml: "数字梨树",
|
|
|
- keepBindPopup: false,
|
|
|
- isAggregation: true,
|
|
|
- radius: 1
|
|
|
- },
|
|
|
- {
|
|
|
- lng: 125.27,
|
|
|
- lat: 43.38,
|
|
|
- icon: 'marker',
|
|
|
- iconSize: [152, 152],
|
|
|
- bindPopupHtml: "数字伊通",
|
|
|
- click: "clickYitong",
|
|
|
- keepBindPopup: false,
|
|
|
- isAggregation: true,
|
|
|
- radius: 1
|
|
|
- },
|
|
|
- {
|
|
|
- lng: 123.69,
|
|
|
- lat: 43.73,
|
|
|
- icon: 'marker',
|
|
|
- iconSize: [152, 152],
|
|
|
- bindPopupHtml: "数字双辽",
|
|
|
- click: "clickShuangliao",
|
|
|
- keepBindPopup: true,
|
|
|
- isAggregation: true,
|
|
|
- radius: 1
|
|
|
- }
|
|
|
- ],
|
|
|
+ todayEventCountList: [],//今日事件列表
|
|
|
+ todayEventSourcetList: [],//今日事件列表
|
|
|
+ todayEventCountDeptList: [],//事件分布
|
|
|
+ todayEventCountTypeList: [],//事件分类
|
|
|
+ eventChartData: [],//右侧eachar图表数据
|
|
|
iframeBoo: true,
|
|
|
open: false,
|
|
|
iframeVue: null,
|
|
|
@@ -795,28 +602,18 @@
|
|
|
websocketURL: '',
|
|
|
yjCount: 0,
|
|
|
sxtObject: {},
|
|
|
-
|
|
|
+
|
|
|
//左右缩进
|
|
|
indentStyle:'',
|
|
|
indentleft:'',
|
|
|
indentright:'',
|
|
|
indentText:'收起左右栏',
|
|
|
indentdisabled:false
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
- setMarkersRadius(){
|
|
|
- this.$refs.supermap.setMarkersRadius(this.markersRadiusList)
|
|
|
- },
|
|
|
- setMarkers(){
|
|
|
- this.$refs.supermap.setMarkers(this.markersList)
|
|
|
- },
|
|
|
- clearM(){
|
|
|
- this.$refs.supermap.clearM(true);
|
|
|
- this.$refs.supermap.clearM(false);
|
|
|
- },
|
|
|
//态势感知chart
|
|
|
cameraChat() {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
@@ -833,7 +630,7 @@
|
|
|
["类型5", 581],
|
|
|
["类型6", 426],
|
|
|
["类型7", 326]
|
|
|
-
|
|
|
+
|
|
|
],
|
|
|
},
|
|
|
tooltip: {
|
|
|
@@ -1022,7 +819,7 @@
|
|
|
},
|
|
|
series : [
|
|
|
{
|
|
|
- name:'业务警种',
|
|
|
+ name:'事件分类',
|
|
|
type:'pie',
|
|
|
roseType: true,
|
|
|
radius : [30, 70],
|
|
|
@@ -1030,17 +827,13 @@
|
|
|
show: true,
|
|
|
formatter: "{b}\n{c} "
|
|
|
},
|
|
|
- data:[
|
|
|
- {value:20, name:'人工'},
|
|
|
- {value:25, name:'火险'},
|
|
|
- {value:30, name:'卡扣'},
|
|
|
- ]
|
|
|
+ data:this.eventChartData
|
|
|
}
|
|
|
]
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
//吉祥物收起左右框
|
|
|
indent(){
|
|
|
let list = document.getElementsByClassName('el-tooltip__popper')
|
|
|
@@ -1065,8 +858,148 @@
|
|
|
},
|
|
|
showEventInfo2() {
|
|
|
this.eventInfoVisible2 = true
|
|
|
- }
|
|
|
+ },
|
|
|
+ getTodayEvent() {
|
|
|
+ let that = this
|
|
|
+ //获取左侧菜单列表
|
|
|
+ getTodayEvent().then(res => {
|
|
|
+ //今日事件
|
|
|
+ that.todayEventCountList = res.data.eventcountStatus
|
|
|
+ that.todayEventSourcetList = res.data.eventcountSource
|
|
|
+ // 事件分布
|
|
|
+ that.todayEventCountDeptList = res.data.eventcountDept
|
|
|
+ // 事件分类
|
|
|
+ that.todayEventCountTypeList = res.data.eventcountType
|
|
|
+ if (res.data.eventcountSource != null && res.data.eventcountSource.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.eventcountSource.length; i++) {
|
|
|
+ let data = {}
|
|
|
+ data.name = res.data.eventcountSource[i].eventSourceName
|
|
|
+ data.value = res.data.eventcountSource[i].count
|
|
|
+ this.eventChartData.push(data)
|
|
|
+ }
|
|
|
|
|
|
+ }
|
|
|
+ this.eventChart()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ todayEventCountSetMarkers(eventStatus) {
|
|
|
+ //点击今日事件前三个按钮列表
|
|
|
+ let that = this
|
|
|
+ getEventStatusList(eventStatus).then(res => {
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.markersList = [];
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: 'marker',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if(res.data.eventList!=null&&res.data.eventList.length>0){
|
|
|
+ for (let i = 0; i < res.data.eventList.length; i++) {
|
|
|
+ markersMap.lng = res.data.eventList[i].longitude
|
|
|
+ markersMap.lat =res.data.eventList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度：' +res.data.eventList[i].longitude + ',' +res.data.eventList[i]
|
|
|
+ .latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件名称：' +res.data.eventList[i].eventTitle + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件时间：' +res.data.eventList[i].reportTime + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '</div>';
|
|
|
+ that.markersList.push(markersMap)
|
|
|
+ }
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList)
|
|
|
+ }
|
|
|
+ // eventCode: "718b040cf1f747eb8ab4ffc6db643ca0"
|
|
|
+ // eventContent: "集安-东明-可见光2022-06-27 02:42:04烟雾报警"
|
|
|
+ // eventSource: "event_source_2"
|
|
|
+ // eventStatus: "event_event_status_4"
|
|
|
+ // eventTitle: "集安-东明点位2022-06-27 02:42:04烟雾报警"
|
|
|
+ // id: "01458301eb834f3da5be16a75cd38bb6"
|
|
|
+ // latitude: "43.85618180244526"
|
|
|
+ // longitude: "125.31971797326736"
|
|
|
+ // reportBy: "集安-东明点位"
|
|
|
+ // reportTime: "2022-06-27 02:42:04"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ todayEventSourcetSetMarkers(eventSource) {
|
|
|
+ //点击今日事件后三个按钮列表
|
|
|
+ let that = this
|
|
|
+ getEventSourceList(eventSource).then(res => {
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.markersList = [];
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: 'marker',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if(res.data.eventList!=null&&res.data.eventList.length>0){
|
|
|
+ for (let i = 0; i < res.data.eventList.length; i++) {
|
|
|
+ markersMap.lng = res.data.eventList[i].longitude
|
|
|
+ markersMap.lat =res.data.eventList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度：' +res.data.eventList[i].longitude + ',' +res.data.eventList[i]
|
|
|
+ .latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件名称：' +res.data.eventList[i].eventTitle + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件时间：' +res.data.eventList[i].reportTime + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '</div>';
|
|
|
+ that.markersList.push(markersMap)
|
|
|
+ }
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList)
|
|
|
+ }
|
|
|
+ // eventCode: "718b040cf1f747eb8ab4ffc6db643ca0"
|
|
|
+ // eventContent: "集安-东明-可见光2022-06-27 02:42:04烟雾报警"
|
|
|
+ // eventSource: "event_source_2"
|
|
|
+ // eventStatus: "event_event_status_4"
|
|
|
+ // eventTitle: "集安-东明点位2022-06-27 02:42:04烟雾报警"
|
|
|
+ // id: "01458301eb834f3da5be16a75cd38bb6"
|
|
|
+ // latitude: "43.85618180244526"
|
|
|
+ // longitude: "125.31971797326736"
|
|
|
+ // reportBy: "集安-东明点位"
|
|
|
+ // reportTime: "2022-06-27 02:42:04"
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
