wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

22bug，视频监控提示

This commit is contained in:
gaoyuanwei 2022-08-10 16:52:36 +08:00
parent 2674226018
commit 10787a8682
4 changed files with 439 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/pages/civilizedCity/index.vue
View File

@ -506,7 +506,12 @@ export default {
bus.$off('openCurrentVideoSurveillance') bus.$off('openCurrentVideoSurveillance')
bus.$on('openCurrentVideoSurveillance', (channelCode) => { bus.$on('openCurrentVideoSurveillance', (channelCode) => {
this.openVideo = true this.openVideo = true
if (!this.channelCode.includes(channelCode)) {
console.log(this.channelCode, channelCode, '====>实时监控')
this.channelCode.unshift(channelCode) this.channelCode.unshift(channelCode)
} else {
this.$message.warning('该实时监控已经加入视频列表了！')
}
}) })
bus.$off('closeVideoDia') bus.$off('closeVideoDia')
bus.$on('closeVideoDia', () => { bus.$on('closeVideoDia', () => {

433
src/views/pages/construction/index.vue
View File

@ -74,36 +74,36 @@
</template> </template>
<script> <script>
import { HieimpMap } from "@/supermap/map-init"; import { HieimpMap } from '@/supermap/map-init'
import TiledMap from "./components/tiledMap"; 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 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, selectByDayRaise, selectByDayNoice, selectByDayRoadData } from '@/api/construction/index'
import { createSiteListPop } from "@/supermap/createMarkerPopup"; import { createSiteListPop, createCameraDetailsPop } from '@/supermap/createMarkerPopup'
import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
import VideoPlay from './components/VideoPlay' import VideoPlay from './components/VideoPlay'
import { selectAllByGps } from '@/api/road' import { selectAllByGps } from '@/api/road'
export default { export default {
data() { data () {
return { return {
hiMap: new HieimpMap(), // 地图全局对象 hiMap: new HieimpMap(), // 地图全局对象
mapId: "map-single", // 地图容器的id mapId: 'map-single', // 地图容器的id
state: "", state: '',
constructionSiteData: [], constructionSiteData: [],
changeLayerBtnList: ['AI事件','视频监控','工地','道路'], changeLayerBtnList: ['AI事件', '视频监控', '工地', '道路'],
changeLayerBtnGroup: [], changeLayerBtnGroup: [],
openVideo: false, openVideo: false,
channelCode:[], channelCode: [],
todayListNum: 0, todayListNum: 0,
allListDataNum: 0, allListDataNum: 0
}; }
}, },
components: { components: {
TiledMap, TiledMap,
@ -112,308 +112,305 @@ export default {
SiteList, SiteList,
VideoPlay VideoPlay
}, },
created() {}, created () {},
mounted() { mounted () {
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj); this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
this.multiScreenFun = this.hiMap.multiScreenFun( this.multiScreenFun = this.hiMap.multiScreenFun(
this.hiMap.mapObj, this.hiMap.mapObj,
this.hiMapFun this.hiMapFun
); )
selectByDayRaise().then((res) => { selectByDayRaise().then((res) => {
this.todayListNum += res.data.data.sum this.todayListNum += res.data.data.sum
}) })
selectByDayNoice().then((res) => { selectByDayNoice().then((res) => {
this.todayListNum += res.data.data.sum this.todayListNum += res.data.data.sum
}) })
selectByDayRoadData().then((res) => { selectByDayRoadData().then((res) => {
this.todayListNum += res.data.data.sum this.todayListNum += res.data.data.sum
}) })
// 根据经纬度查询半径内所有的工地 // 根据经纬度查询半径内所有的工地
bus.$off("openCauseAnalysis"); bus.$off('openCauseAnalysis')
bus.$on("openCauseAnalysis", (row) => { bus.$on('openCauseAnalysis', (row) => {
this.removeRoadCauseAnalysis() this.removeRoadCauseAnalysis()
// this.timeRegion = data.data.dt; // this.timeRegion = data.data.dt;
// this.hiMapFun.removerPolygon(); // this.hiMapFun.removerPolygon();
this.hiMapFun.removeLayerByLayerName("constructionSite"); this.hiMapFun.removeLayerByLayerName('constructionSite')
// debugger // debugger
// this.circle(latLng); // this.circle(latLng);
this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd }); this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd })
// this.WithinRadiusSite(latLng); // this.WithinRadiusSite(latLng);
let dataEvent = [{ const dataEvent = [{
latLng: { lat: row.wd, lng: row.jd }, latLng: { lat: row.wd, lng: row.jd },
data: row, data: row,
type: "site", type: 'site'
}] }]
this.hiMapFun.addPointsToMap( this.hiMapFun.addPointsToMap(
dataEvent, dataEvent,
"construction.png", 'construction.png',
"constructionSite", 'constructionSite',
createSiteListPop createSiteListPop
); )
});
bus.$off("roadOnMap");
bus.$on("roadOnMap",(roadData) => {
this.removeRoadCauseAnalysis()
this.roadOnMap(roadData);
}) })
bus.$off("removeCameraLayer"); bus.$off('roadOnMap')
bus.$on("removeCameraLayer",(type) => { bus.$on('roadOnMap', (roadData) => {
this.removeRoadCauseAnalysis()
this.roadOnMap(roadData)
})
bus.$off('removeCameraLayer')
bus.$on('removeCameraLayer', (type) => {
this.hiMapFun.removeLayerByLayerName(type) this.hiMapFun.removeLayerByLayerName(type)
}) })
bus.$off("CameraSingleDataOnMap"); bus.$off('CameraSingleDataOnMap')
bus.$on("CameraSingleDataOnMap",(labelName,data) => { bus.$on('CameraSingleDataOnMap', (labelName, data) => {
this.removeRoadCauseAnalysis() this.removeRoadCauseAnalysis()
this.addResourceTomap(labelName,data); this.addResourceTomap(labelName, data)
}) })
bus.$off('openCurrentVideoWaterPoint') bus.$off('openCurrentVideoWaterPoint')
bus.$on('openCurrentVideoWaterPoint',channelCode => { bus.$on('openCurrentVideoWaterPoint', channelCode => {
this.openVideo = true; this.openVideo = true
this.channelCode.unshift(channelCode) this.channelCode.unshift(channelCode)
}) })
bus.$off("openCurrentVideoSurveillance"); bus.$off('openCurrentVideoSurveillance')
bus.$on("openCurrentVideoSurveillance", (channelCode) => { bus.$on('openCurrentVideoSurveillance', (channelCode) => {
this.openVideo = true; this.openVideo = true
this.channelCode.unshift(channelCode); if (!this.channelCode.includes(channelCode)) {
}); console.log(this.channelCode, channelCode, '====>实时监控')
this.channelCode.unshift(channelCode)
} else {
this.$message.warning('该实时监控已经加入视频列表了！')
}
})
bus.$off("roadCauseAnalysis"); bus.$off('roadCauseAnalysis')
bus.$on("roadCauseAnalysis", (data) => { bus.$on('roadCauseAnalysis', (data) => {
this.removeRoadCauseAnalysis() this.removeRoadCauseAnalysis()
this.circle({ lat: Number(data.lat), lng: Number(data.lng) }); this.circle({ lat: Number(data.lat), lng: Number(data.lng) })
this.selectAllByGps(data); this.selectAllByGps(data)
this.WithinRadiusSite(data) this.WithinRadiusSite(data)
}); })
}, },
methods: { methods: {
querySearchAsync(queryString, cb) { querySearchAsync (queryString, cb) {
if (queryString.length > 0) { if (queryString.length > 0) {
searchCamera(queryString).then((res) => { searchCamera(queryString).then((res) => {
cb(res.data.suggestions); cb(res.data.suggestions)
}); })
} }
}, },
handleSelect(item) { handleSelect (item) {
this.hiMapFun.clearAllLayers(); this.hiMapFun.clearAllLayers()
const arr = item.detail.location.split(","); const arr = item.detail.location.split(',')
const searchDataDetail = [ const searchDataDetail = [
{ {
latLng: { lat: arr[1], lng: arr[0] }, latLng: { lat: arr[1], lng: arr[0] },
data: item, data: item
}, }
]; ]
this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] }); this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] })
this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0]); this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0])
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster( this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
searchDataDetail, searchDataDetail,
"poi-red.png", 'poi-red.png',
"address" 'address'
); )
// this.timer = setTimeout(() => { // this.timer = setTimeout(() => {
// this.addResourceTomap("全部", this.cameraAllData); // this.addResourceTomap("全部", this.cameraAllData);
// }, 1000); // }, 1000);
}, },
// 圈选查询 // 圈选查询
circle(latlng) { circle (latlng) {
this.hiMapFun.addCircleToMap(latlng, 3500); this.hiMapFun.addCircleToMap(latlng, 3500)
}, },
// 根据经纬度查半径内的工地 // 根据经纬度查半径内的工地
async WithinRadiusSite(data) { async WithinRadiusSite (data) {
const param = { const param = {
jd: data.lng, jd: data.lng,
radius: 3000, radius: 3000,
wd: data.lat, wd: data.lat
}; }
const res = await selectByJdWd(param); const res = await selectByJdWd(param)
this.constructionSiteData = res.data.data; this.constructionSiteData = res.data.data
const dataEvent = []; const dataEvent = []
this.constructionSiteData.forEach((item) => { this.constructionSiteData.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"]; const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.wd) == -1) { if (arr.indexOf(item.wd) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) }, latLng: { lat: Number(item.wd), lng: Number(item.jd) },
data: item, data: item,
type: "site", type: 'site'
}); })
} }
}); })
this.hiMapFun.addPointsToMap( this.hiMapFun.addPointsToMap(
dataEvent, dataEvent,
"construction.png", 'construction.png',
"constructionSite", 'constructionSite',
createSiteListPop createSiteListPop
); )
}, },
//路网上图 // 路网上图
roadOnMap(roadData) { roadOnMap (roadData) {
roadData.forEach((item) => { roadData.forEach((item) => {
let newPoint = JSON.parse(item.points); const newPoint = JSON.parse(item.points)
newPoint[0].map((Point) => { newPoint[0].map((Point) => {
Point.reverse(); Point.reverse()
}); })
item.pm10 = Number(item.pm10); item.pm10 = Number(item.pm10)
switch (true) { switch (true) {
case 0 < item.pm10 && item.pm10 <= 50: case item.pm10 > 0 && item.pm10 <= 50:
this.hiMapFun.addPathToMap(newPoint, "#36fe78"); this.hiMapFun.addPathToMap(newPoint, '#36fe78')
break; break
case 50 < item.pm10 && item.pm10 <= 150: case item.pm10 > 50 && item.pm10 <= 150:
this.hiMapFun.addPathToMap(newPoint, "#fde202"); this.hiMapFun.addPathToMap(newPoint, '#fde202')
break; break
case 150 < item.pm10 && item.pm10 <= 250: case item.pm10 > 150 && item.pm10 <= 250:
this.hiMapFun.addPathToMap(newPoint, "#feb403"); this.hiMapFun.addPathToMap(newPoint, '#feb403')
break; break
case 250 < item.pm10 && item.pm10 <= 350: case item.pm10 > 250 && item.pm10 <= 350:
this.hiMapFun.addPathToMap(newPoint, "#fd8402"); this.hiMapFun.addPathToMap(newPoint, '#fd8402')
break; break
case 350 < item.pm10 && item.pm10 <= 420: case item.pm10 > 350 && item.pm10 <= 420:
this.hiMapFun.addPathToMap(newPoint, "#fd4302"); this.hiMapFun.addPathToMap(newPoint, '#fd4302')
break; break
case 420 < item.pm10 && item.pm10 <= 500: case item.pm10 > 420 && item.pm10 <= 500:
this.hiMapFun.addPathToMap(newPoint, "#fd0202"); this.hiMapFun.addPathToMap(newPoint, '#fd0202')
break; break
case 500 < item.pm10 && item.pm10 <= 600: case item.pm10 > 500 && item.pm10 <= 600:
this.hiMapFun.addPathToMap(newPoint, "#a80101"); this.hiMapFun.addPathToMap(newPoint, '#a80101')
break; break
case 600 < item.pm10 && item.pm10 <= 700: case item.pm10 > 600 && item.pm10 <= 700:
this.hiMapFun.addPathToMap(newPoint, "#690000"); this.hiMapFun.addPathToMap(newPoint, '#690000')
break; break
default: default:
this.hiMapFun.addPathToMap(newPoint, "#36fe78"); this.hiMapFun.addPathToMap(newPoint, '#36fe78')
break; break
} }
}); })
}, },
layerHandleChange(item) { layerHandleChange (item) {
this.removeRoadCauseAnalysis() this.removeRoadCauseAnalysis()
if (this.changeLayerBtnGroup.indexOf(item) !== -1) { if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
switch (item) { switch (item) {
case "道路": case '道路':
this.roadOnMap(this.$refs.complaintEventRef.roadData); this.roadOnMap(this.$refs.complaintEventRef.roadData)
break; break
case "AI事件": case 'AI事件':
break; break
case "视频监控": case '视频监控':
this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData) this.addResourceTomap('全部', this.$refs.videoListRef.cameraAllData)
break; break
case "工地": case '工地':
this.hiMapFun.removeLayerByLayerName("constructionSite"); this.hiMapFun.removeLayerByLayerName('constructionSite')
let dataEvent = [] const dataEvent = []
this.$refs.siteListRef.siteData.forEach((item) => { this.$refs.siteListRef.siteData.forEach((item) => {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) }, latLng: { lat: Number(item.wd), lng: Number(item.jd) },
data: item, data: item,
type: "site", type: 'site'
}); })
}); })
this.hiMapFun.addPointsToMap( this.hiMapFun.addPointsToMap(
dataEvent, dataEvent,
"construction.png", 'construction.png',
"constructionSite", 'constructionSite',
createSiteListPop createSiteListPop
); )
break; break
default: default:
break; break
} }
} else { } else {
switch (item) { switch (item) {
case "道路": case '道路':
this.hiMapFun.removerPolyline(); this.hiMapFun.removerPolyline()
break; break
case "AI事件": case 'AI事件':
break; break
case "视频监控": case '视频监控':
this.hiMapFun.removeLayerByLayerName('全部') this.hiMapFun.removeLayerByLayerName('全部')
break; break
case "工地": case '工地':
this.hiMapFun.removeLayerByLayerName("constructionSite"); this.hiMapFun.removeLayerByLayerName('constructionSite')
break; break
default: default:
break; break
} }
} }
}, },
addResourceTomap(type,data) { addResourceTomap (type, data) {
const dataEvent = []; const dataEvent = []
data.forEach((item) => { data.forEach((item) => {
const arr = [0,0.0,'','0','0.0'] const arr = [0, 0.0, '', '0', '0.0']
if(arr.indexOf(item.gpsX) == -1){
dataEvent.push({
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
data: item,
type: 'videoSurveillance'
});
}
});
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
},
circle(latlng) {
this.hiMapFun.addCircleToMap(latlng, 3800);
},
async selectAllByGps(data) {
const param = {
gpsX: data.lng,
gpsY: data.lat,
radius: 3000,
};
const res = await selectAllByGps(param);
console.log(res);
const dataEvent = [];
res.data.data.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"];
if (arr.indexOf(item.gpsX) == -1) { if (arr.indexOf(item.gpsX) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) }, latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
data: item, data: item,
type: "videoSurveillance", type: 'videoSurveillance'
}); })
} }
}); })
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster( this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
dataEvent,
"videoSurveillance.png",
"videoSurveillance",
createCameraDetailsPop
);
}, },
removeRoadCauseAnalysis() { circle (latlng) {
this.hiMapFun.removerPolygon(); this.hiMapFun.addCircleToMap(latlng, 3800)
this.hiMapFun.removeLayerByLayerName("videoSurveillance");
this.hiMapFun.removeLayerByLayerName("constructionSite");
this.hiMapFun.removeLayerByLayerName("roadPoint")
}, },
async selectAllByGps (data) {
const param = {
gpsX: data.lng,
gpsY: data.lat,
radius: 3000
}
const res = await selectAllByGps(param)
console.log(res)
const dataEvent = []
res.data.data.forEach((item) => {
const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.gpsX) == -1) {
dataEvent.push({
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
data: item,
type: 'videoSurveillance'
})
}
})
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
dataEvent,
'videoSurveillance.png',
'videoSurveillance',
createCameraDetailsPop
)
}, },
beforeDestroy() {},
}; removeRoadCauseAnalysis () {
this.hiMapFun.removerPolygon()
this.hiMapFun.removeLayerByLayerName('videoSurveillance')
this.hiMapFun.removeLayerByLayerName('constructionSite')
this.hiMapFun.removeLayerByLayerName('roadPoint')
}
},
beforeDestroy () {}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css); @import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
@font-face { @font-face {
font-family: 'Tensentype-ZhiHeiJ-W5'; font-family: "Tensentype-ZhiHeiJ-W5";
src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf"); src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
} }
.map-box { .map-box {
@ -442,11 +439,11 @@ export default {
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-family: 'Tensentype-ZhiHeiJ-W5'; font-family: "Tensentype-ZhiHeiJ-W5";
} }
.title::before { .title::before {
content: '在建工地综合监管平台'; content: "在建工地综合监管平台";
text-shadow: 0px 3px 10px rgba(0,0,0,.9); text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
@ -457,20 +454,20 @@ export default {
z-index: 1000; z-index: 1000;
left: 496px; left: 496px;
top: 90px; top: 90px;
border: 1px solid rgba(31,254,253,.9); border: 1px solid rgba(31, 254, 253, 0.9);
::v-deep .el-input__inner { ::v-deep .el-input__inner {
color: #fff; color: #fff;
background: rgba($color: #203b5d, $alpha: .8); background: rgba($color: #203b5d, $alpha: 0.8);
width: 226px; width: 226px;
height: 36px; height: 36px;
border:none; border: none;
&::placeholder { &::placeholder {
color: rgba($color: #fff, $alpha: 0.6); color: rgba($color: #fff, $alpha: 0.6);
} }
} }
::v-deep .el-input__prefix { ::v-deep .el-input__prefix {
top: -1px; top: -1px;
color: rgba(31,254,253,.9); color: rgba(31, 254, 253, 0.9);
} }
::v-deep .el-input-group__append { ::v-deep .el-input-group__append {
width: 54px; width: 54px;
@ -489,7 +486,7 @@ export default {
z-index: -1 !important; z-index: -1 !important;
width: 226px !important; width: 226px !important;
left: 0px !important; left: 0px !important;
background: rgba(32,59,93,.8); background: rgba(32, 59, 93, 0.8);
border: 1px solid #1ffefd; border: 1px solid #1ffefd;
li { li {
color: #fff; color: #fff;
@ -505,9 +502,9 @@ export default {
z-index: 1000; z-index: 1000;
left: 10px; left: 10px;
top: 90px; top: 90px;
height:980px; height: 980px;
width: 478px; width: 478px;
background: rgba($color: #05213b, $alpha: .85) background: rgba($color: #05213b, $alpha: 0.85);
} }
.eventNum { .eventNum {
@ -528,7 +525,7 @@ export default {
span { span {
font-size: 46px; font-size: 46px;
font-weight: bold; font-weight: bold;
background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% ); background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@ -543,8 +540,8 @@ export default {
right: 8px; right: 8px;
top: 92px; top: 92px;
width: 398px; width: 398px;
height:460px; height: 460px;
background: rgba($color: #05213b, $alpha: .85); background: rgba($color: #05213b, $alpha: 0.85);
} }
.siteList { .siteList {
@ -553,14 +550,14 @@ export default {
right: 8px; right: 8px;
top: 562px; top: 562px;
width: 398px; width: 398px;
height:500px; height: 500px;
background: rgba($color: #05213b, $alpha: .85); background: rgba($color: #05213b, $alpha: 0.85);
} }
.changeLayer { .changeLayer {
width: 332px; width: 332px;
height: 67px; height: 67px;
background: rgba(7,26,44,.8); background: rgba(7, 26, 44, 0.8);
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
left: 50%; left: 50%;
@ -571,7 +568,7 @@ export default {
width: 96px; width: 96px;
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
color: rgba(255,255,255,.6); color: rgba(255, 255, 255, 0.6);
text-align: center; text-align: center;
line-height: 67px; line-height: 67px;
} }

5
src/views/pages/roadGovernance/components/RoadMain.vue
View File

@ -297,7 +297,12 @@ export default {
bus.$off('openCurrentVideoSurveillance') bus.$off('openCurrentVideoSurveillance')
bus.$on('openCurrentVideoSurveillance', (channelCode) => { bus.$on('openCurrentVideoSurveillance', (channelCode) => {
this.openVideo = true this.openVideo = true
if (!this.channelCode.includes(channelCode)) {
console.log(this.channelCode, channelCode, '====>实时监控')
this.channelCode.unshift(channelCode) this.channelCode.unshift(channelCode)
} else {
this.$message.warning('该实时监控已经加入视频列表了！')
}
}) })
// 累计事件数量 // 累计事件数量

309
src/views/pages/videoSurveillance/index.vue
View File

@ -108,7 +108,6 @@
</aside> </aside>
</div> </div>
<video-play <video-play
v-if="openVideo" v-if="openVideo"
@ -119,69 +118,68 @@
</template> </template>
<script> <script>
import { HieimpMap } from "@/supermap/map-init"; import { HieimpMap } from '@/supermap/map-init'
import TiledMap from "./components/tiledMap"; import TiledMap from './components/tiledMap'
import * as turf from '@turf/turf'; import * as turf from '@turf/turf'
import { wgs84LL2bdLL } from '@/utils/coordinateSystemTransform'; import { wgs84LL2bdLL } from '@/utils/coordinateSystemTransform'
import {createCameraDetailsPop} from '@/supermap/createMarkerPopup'; import { createCameraDetailsPop } from '@/supermap/createMarkerPopup'
import VideoPlay from './components/VideoPlay' import VideoPlay from './components/VideoPlay'
import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index' import { getCameraAll, getCameraLabel, getCameraAllLabel, searchCamera, getCameraAllOrgan, getCameraByParentId, selectByLabelName, selectByChannelName } from '@/api/videoSurveillance/index'
import bus from '@/views/layout/bus'; import bus from '@/views/layout/bus'
// import testjson from "@/assets/response2.json"; // import testjson from "@/assets/response2.json";
export default { export default {
data() { data () {
return { return {
loading: true, loading: true,
hiMap: new HieimpMap(), // 地图全局对象 hiMap: new HieimpMap(), // 地图全局对象
mapId: "map-single", // 地图容器的id mapId: 'map-single', // 地图容器的id
cameraAllData: [],
cameraAllData:[],
checkboxGroup: [], checkboxGroup: [],
tabList: [], tabList: [],
state: '', state: '',
timeout: null, timeout: null,
camreaTree:[], camreaTree: [],
camreaTreeIsShow:true, camreaTreeIsShow: true,
camreaTreeSingle: [], camreaTreeSingle: [],
checkStatus: '2', checkStatus: '2',
labelSearch: '', labelSearch: '',
page: 1, page: 1,
timer:null, timer: null,
openVideo:false, openVideo: false,
channelCode:[] channelCode: []
// testjson:testjson, // testjson:testjson,
}; }
}, },
components: { components: {
TiledMap, TiledMap,
VideoPlay VideoPlay
}, },
created() { created () {
}, },
watch: { watch: {
page(newV,oldV){ page (newV, oldV) {
this.getCameraAllPage(newV) this.getCameraAllPage(newV)
}, },
checkStatus(newV,oldV) { checkStatus (newV, oldV) {
console.log(newV) console.log(newV)
this.$refs.tree.filter(newV) this.$refs.tree.filter(newV)
} }
}, },
mounted() { mounted () {
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj); this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
this.multiScreenFun = this.hiMap.multiScreenFun( this.multiScreenFun = this.hiMap.multiScreenFun(
this.hiMap.mapObj, this.hiMap.mapObj,
this.hiMapFun this.hiMapFun
); )
this.hiMap.mapObj.map.flyTo({ lat: 36.060, lng: 120.3899},16) this.hiMap.mapObj.map.flyTo({ lat: 36.060, lng: 120.3899 }, 16)
getCameraAllLabel().then((res) => { getCameraAllLabel().then((res) => {
this.tabList = res.data.data this.tabList = res.data.data
}); })
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => { getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
this.camreaTree = res.data.data this.camreaTree = res.data.data
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
this.camreaTreeSingle.push({ this.camreaTreeSingle.push({
@ -191,89 +189,93 @@ export default {
}) })
}) })
getCameraAll().then((res) => { getCameraAll().then((res) => {
let t1 = new Date().getTime(); const t1 = new Date().getTime()
this.cameraAllData = res.data this.cameraAllData = res.data
this.addResourceTomap('全部',res.data); this.addResourceTomap('全部', res.data)
this.loading = false this.loading = false
let t2 = new Date().getTime(); const t2 = new Date().getTime()
console.log("时间#############" + (t2 - t1)); console.log('时间#############' + (t2 - t1))
}) })
// this.getMapPoint() // this.getMapPoint()
bus.$off('openCurrentVideoSurveillance') bus.$off('openCurrentVideoSurveillance')
bus.$on('openCurrentVideoSurveillance',channelCode => { bus.$on('openCurrentVideoSurveillance', channelCode => {
this.openVideo = true; this.openVideo = true
if (!this.channelCode.includes(channelCode)) {
console.log(this.channelCode, channelCode, '====>实时监控')
this.channelCode.unshift(channelCode) this.channelCode.unshift(channelCode)
} else {
this.$message.warning('该实时监控已经加入视频列表了！')
}
}) })
}, },
methods: { methods: {
getCameraAllPage(page){ getCameraAllPage (page) {
let params = { const params = {
page:page, page: page,
pageSize:20000 pageSize: 20000
} }
getCameraAll(params).then((res) => { getCameraAll(params).then((res) => {
// let t1 = new Date().getTime(); // let t1 = new Date().getTime();
this.cameraAllData = res.data.data this.cameraAllData = res.data.data
this.addResourceTomap('全部',res.data.data); this.addResourceTomap('全部', res.data.data)
this.loading = false this.loading = false
// let t2 = new Date().getTime(); // let t2 = new Date().getTime();
// console.log("时间#############" + (t2 - t1)); // console.log("时间#############" + (t2 - t1));
}) })
}, },
tabChange(item){ tabChange (item) {
if(this.checkboxGroup.indexOf(item.labelName) !== -1){ if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
if(item.labelName == '全部'){ if (item.labelName == '全部') {
this.addResourceTomap('全部',this.cameraAllData) this.addResourceTomap('全部', this.cameraAllData)
this.checkboxGroup = ['全部'] this.checkboxGroup = ['全部']
} else { } else {
this.hiMapFun.removeLayerByLayerName('全部'); this.hiMapFun.removeLayerByLayerName('全部')
getCameraLabel({labelCode:item.labelCode}).then((res) => { getCameraLabel({ labelCode: item.labelCode }).then((res) => {
this.addResourceTomap(item.labelName,res.data.data); this.addResourceTomap(item.labelName, res.data.data)
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
this.camreaTreeSingle.forEach((val) => { this.camreaTreeSingle.forEach((val) => {
if(item.nodeName == val.channelName){ if (item.nodeName == val.channelName) {
val.children.push(item) val.children.push(item)
} }
}) })
}) })
this.camreaTreeIsShow = false; this.camreaTreeIsShow = false
}) })
} }
}else { } else {
this.hiMapFun.removeLayerByLayerName(item.labelName); this.hiMapFun.removeLayerByLayerName(item.labelName)
this.checkStatus = "2" this.checkStatus = '2'
this.camreaTreeIsShow = true this.camreaTreeIsShow = true
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => { getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
this.camreaTree = res.data.data this.camreaTree = res.data.data
}) })
} }
}, },
addResourceTomap(type,data) { addResourceTomap (type, data) {
const dataEvent = []; const dataEvent = []
data.forEach((item) => { data.forEach((item) => {
const arr = [0,0.0,'','0','0.0'] const arr = [0, 0.0, '', '0', '0.0']
if(arr.indexOf(item.gpsX) == -1){ if (arr.indexOf(item.gpsX) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) }, latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
data: item, data: item,
type: 'videoSurveillance' type: 'videoSurveillance'
}); })
} }
})
}); this.getMapPoint(dataEvent, 'videoSurveillance.png', type)
this.getMapPoint(dataEvent, "videoSurveillance.png", type);
}, },
getMapPoint(data, img, type) { getMapPoint (data, img, type) {
// this.hiMapFun.clearAllLayers(); // this.hiMapFun.clearAllLayers();
const features = data; const features = data
// debugger // debugger
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(features, img, type, createCameraDetailsPop) this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(features, img, type, createCameraDetailsPop)
// this.hiMapFun.addResourceOnMapWithoutSuper(features, img, "newEVent", createListDetailsPop); // this.hiMapFun.addResourceOnMapWithoutSuper(features, img, "newEVent", createListDetailsPop);
}, },
querySearchAsync(queryString, cb) { querySearchAsync (queryString, cb) {
if(queryString.length > 0){ if (queryString.length > 0) {
searchCamera(queryString).then((res) => { searchCamera(queryString).then((res) => {
cb(res.data.suggestions) cb(res.data.suggestions)
// console.log(res) // console.log(res)
@ -282,60 +284,60 @@ export default {
// console.log(queryString) // console.log(queryString)
// cb(this.testjson.suggestions) // cb(this.testjson.suggestions)
}, },
handleSelect(item) { handleSelect (item) {
this.hiMapFun.clearAllLayers(); this.hiMapFun.clearAllLayers()
//定时器方法 // 定时器方法
let arr = item.detail.location.split(',') const arr = item.detail.location.split(',')
const searchDataDetail = [{ const searchDataDetail = [{
latLng: { lat: arr[1], lng: arr[0] }, latLng: { lat: arr[1], lng: arr[0] },
data: item, data: item
}] }]
this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] }); this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] })
this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0]) this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0])
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail,"poi-red.png", "address"); this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail, 'poi-red.png', 'address')
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.addResourceTomap('全部',this.cameraAllData) this.addResourceTomap('全部', this.cameraAllData)
}, 1000) }, 1000)
//回调方法 // 回调方法
// this.flyToMapCallback(item,this.asyncCameraAllDataOnMap) // this.flyToMapCallback(item,this.asyncCameraAllDataOnMap)
this.checkboxGroup = [] this.checkboxGroup = []
}, },
flyToMapCallback(item,callback){ flyToMapCallback (item, callback) {
let arr = item.detail.location.split(',') const arr = item.detail.location.split(',')
const searchDataDetail = [{ const searchDataDetail = [{
latLng: { lat: arr[1], lng: arr[0] }, latLng: { lat: arr[1], lng: arr[0] },
data: item, data: item
}] }]
this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] }); this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] })
this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0]) this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0])
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail,"poi-red.png", "address"); this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail, 'poi-red.png', 'address')
callback(callback) callback(callback)
}, },
asyncCameraAllDataOnMap(){ asyncCameraAllDataOnMap () {
this.addResourceTomap('全部',this.cameraAllData) this.addResourceTomap('全部', this.cameraAllData)
}, },
handleNodeClick(data) { handleNodeClick (data) {
console.log(data); console.log(data)
getCameraAllOrgan({parentId:data.id}).then((res) => { getCameraAllOrgan({ parentId: data.id }).then((res) => {
this.camreaTree.forEach( (item) => { this.camreaTree.forEach((item) => {
item.children = res.data.data item.children = res.data.data
}) })
console.log(this.camreaTree); console.log(this.camreaTree)
}) })
}, },
loadNode(node, resolve) { loadNode (node, resolve) {
// if (node.level === 0) { // if (node.level === 0) {
// return resolve([{ name: 'region' }]); // return resolve([{ name: 'region' }]);
// } // }
console.log(node) console.log(node)
if (node.level > 0) { if (node.level > 0) {
let subData = [] let subData = []
getCameraAllOrgan({parentId:node.data.id}).then((res) => { getCameraAllOrgan({ parentId: node.data.id }).then((res) => {
if(res.data.data.length == 0){ if (res.data.data.length == 0) {
const params = { const params = {
parentId:node.data.id, parentId: node.data.id,
checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus, checkStatus: this.checkStatus == '2' ? ['0', '1'] : this.checkStatus
} }
getCameraByParentId(params).then((res) => { getCameraByParentId(params).then((res) => {
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
@ -343,50 +345,50 @@ export default {
name: item.channelName, name: item.channelName,
gpsX: item.gpsX, gpsX: item.gpsX,
gpsY: item.gpsY, gpsY: item.gpsY,
channelCode:item.channelCode, channelCode: item.channelCode,
checkStatus:item.checkStatus, checkStatus: item.checkStatus,
leaf:true, leaf: true
}) })
}) })
return resolve(subData); return resolve(subData)
}) })
}else{ } else {
subData = res.data.data subData = res.data.data
return resolve(subData); return resolve(subData)
} }
}) })
} }
}, },
treeCameraClick(data) { treeCameraClick (data) {
console.log(data) console.log(data)
if(data.channelCode){ if (data.channelCode) {
const cameraTree = [{ const cameraTree = [{
latLng: { lat: data.gpsY, lng: data.gpsX }, latLng: { lat: data.gpsY, lng: data.gpsX },
data: data, data: data,
type:'cameraTree' type: 'cameraTree'
}] }]
this.hiMapFun.removeLayerByLayerName("cameraTree"); this.hiMapFun.removeLayerByLayerName('cameraTree')
this.hiMapFun.openPopupVideoSurveillance(cameraTree[0]) this.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
const arr = [0,0.0,'','0','0.0'] const arr = [0, 0.0, '', '0', '0.0']
if(arr.indexOf(data.gpsX) == -1){ if (arr.indexOf(data.gpsX) == -1) {
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree"); this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree, 'poi-red.png', 'cameraTree')
this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX }); this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX })
} }
} }
}, },
searchLabel(value) { searchLabel (value) {
const params = { const params = {
labelName:value labelName: value
} }
selectByLabelName(params).then((res) => { selectByLabelName(params).then((res) => {
console.log(res) console.log(res)
this.tabList = res.data.data this.tabList = res.data.data
}) })
}, },
searchCameraTree(value) { searchCameraTree (value) {
if(value.length > 0){ if (value.length > 0) {
const params = { const params = {
channelName:value channelName: value
} }
selectByChannelName(params).then((res) => { selectByChannelName(params).then((res) => {
console.log(res) console.log(res)
@ -396,46 +398,46 @@ export default {
name: item.channelName, name: item.channelName,
gpsX: item.gpsX, gpsX: item.gpsX,
gpsY: item.gpsY, gpsY: item.gpsY,
channelCode:item.channelCode, channelCode: item.channelCode,
leaf:true, leaf: true
}) })
}) })
}) })
}else { } else {
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => { getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
this.camreaTree = res.data.data this.camreaTree = res.data.data
}) })
} }
}, },
refresh() { refresh () {
this.hiMapFun.clearAllLayers(); this.hiMapFun.clearAllLayers()
this.addResourceTomap('全部',this.cameraAllData) this.addResourceTomap('全部', this.cameraAllData)
this.checkboxGroup = [] this.checkboxGroup = []
}, },
reset() { reset () {
this.checkboxGroup = [] this.checkboxGroup = []
this.checkStatus = "2"; this.checkStatus = '2'
this.camreaTreeIsShow = true this.camreaTreeIsShow = true
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => { getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
this.camreaTree = res.data.data this.camreaTree = res.data.data
}) })
document.getElementById("tree").scrollTop = 0; document.getElementById('tree').scrollTop = 0
}, },
filterNode(value, data) { filterNode (value, data) {
if (value == "2") return true; if (value == '2') return true
if (value == "0") { if (value == '0') {
return data.checkStatus == 0; return data.checkStatus == 0
}
if (value == '1') {
return data.checkStatus == 1
} }
if (value == "1") {
return data.checkStatus == 1;
} }
}, },
}, beforeDestroy () {
beforeDestroy(){ clearInterval(this.timer)// 清除定时器
clearInterval(this.timer);// 清除定时器 this.timer = null
this.timer = null; }
}, }
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -444,10 +446,9 @@ export default {
::v-deep .el-loading-mask { ::v-deep .el-loading-mask {
z-index: 99999; z-index: 99999;
width: 1920px; width: 1920px;
height:1080px; height: 1080px;
} }
.map-box { .map-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -469,12 +470,13 @@ export default {
width: 100%; width: 100%;
height: 104px; height: 104px;
padding-top: 10px; padding-top: 10px;
background: url("~@/assets/img/titlevideo.png") no-repeat,url("~@/assets/img/titlevideobg.png") no-repeat; background: url("~@/assets/img/titlevideo.png") no-repeat,
url("~@/assets/img/titlevideobg.png") no-repeat;
text-align: center; text-align: center;
span { span {
font-size: 44px; font-size: 44px;
font-weight: bold; font-weight: bold;
background: linear-gradient(0deg, #C7FBFB 0%, #FFFFFF 100%); background: linear-gradient(0deg, #c7fbfb 0%, #ffffff 100%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@ -485,14 +487,14 @@ export default {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
left: 100px; left: 100px;
border-radius:4px; border-radius: 4px;
::v-deep .el-input__inner { ::v-deep .el-input__inner {
color: #fff; color: #fff;
background: #629ab8; background: #629ab8;
width: 255px; width: 255px;
height: 44px; height: 44px;
border-radius:20px; border-radius: 20px;
border:none; border: none;
&::placeholder { &::placeholder {
color: #fff; color: #fff;
} }
@ -501,12 +503,12 @@ export default {
top: 2px; top: 2px;
} }
::v-deep .el-input-group__append { ::v-deep .el-input-group__append {
width:54px; width: 54px;
height:30px; height: 30px;
position:absolute; position: absolute;
top:6px; top: 6px;
right:6px; right: 6px;
border-radius:20px; border-radius: 20px;
line-height: 30px; line-height: 30px;
text-indent: -4px; text-indent: -4px;
color: #5e9bbd; color: #5e9bbd;
@ -523,7 +525,7 @@ export default {
li { li {
color: #fff; color: #fff;
&:hover { &:hover {
background: #41738f background: #41738f;
} }
} }
} }
@ -548,7 +550,7 @@ export default {
z-index: 1000; z-index: 1000;
width: 350px; width: 350px;
height: 500px; height: 500px;
border-radius:5px; border-radius: 5px;
background-color: #25536d; background-color: #25536d;
// background: url("~@/assets/img/table2.png") no-repeat; // background: url("~@/assets/img/table2.png") no-repeat;
.refresh { .refresh {
@ -571,19 +573,18 @@ export default {
// .el-tabs__item { // .el-tabs__item {
// color: #fff; // color: #fff;
// } // }
.el-tabs__item{ .el-tabs__item {
width: 154px; width: 154px;
border: none; border: none;
text-align: center; text-align: center;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
background: rgba(27,255,255,.2); background: rgba(27, 255, 255, 0.2);
color: #fff; color: #fff;
background-image:url("~@/assets/img/picture_left.png"), background-image: url("~@/assets/img/picture_left.png"),
url("~@/assets/img/picture_right.png"); url("~@/assets/img/picture_right.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 6% 55%, background-position: 6% 55%, 94% 55%;
94% 55%;
background-size: 20% 20%; background-size: 20% 20%;
border: none; border: none;
} }
@ -635,7 +636,7 @@ export default {
} }
.el-checkbox-button__inner { .el-checkbox-button__inner {
border-radius: 20px; border-radius: 20px;
background-color: rgba(116,204,252,.4); background-color: rgba(116, 204, 252, 0.4);
color: #fff; color: #fff;
border: none; border: none;
} }
@ -654,10 +655,10 @@ export default {
color: #fff; color: #fff;
} }
::v-deep .el-tree-node__content:hover { ::v-deep .el-tree-node__content:hover {
background: rgba(27,255,255,.2); background: rgba(27, 255, 255, 0.2);
} }
::v-deep .el-tree-node:focus > .el-tree-node__content { ::v-deep .el-tree-node:focus > .el-tree-node__content {
background-color: rgba(27,255,255,.2); background-color: rgba(27, 255, 255, 0.2);
color: #fff; color: #fff;
} }
.reset-button { .reset-button {