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', () => {

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

@ -74,16 +74,16 @@
</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'
@ -91,9 +91,9 @@ 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: [],
@ -102,8 +102,8 @@ export default {
channelCode: [], channelCode: [],
todayListNum: 0, todayListNum: 0,
allListDataNum: 0, allListDataNum: 0
}; }
}, },
components: { components: {
TiledMap, TiledMap,
@ -114,189 +114,187 @@ export default {
}, },
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) {
@ -304,55 +302,55 @@ export default {
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) { if (arr.indexOf(item.gpsX) == -1) {
@ -360,60 +358,59 @@ export default {
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(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
}, },
circle (latlng) { circle (latlng) {
this.hiMapFun.addCircleToMap(latlng, 3800); this.hiMapFun.addCircleToMap(latlng, 3800)
}, },
async selectAllByGps (data) { async selectAllByGps (data) {
const param = { const param = {
gpsX: data.lng, gpsX: data.lng,
gpsY: data.lat, gpsY: data.lat,
radius: 3000, radius: 3000
}; }
const res = await selectAllByGps(param); const res = await selectAllByGps(param)
console.log(res); console.log(res)
const dataEvent = []; const dataEvent = []
res.data.data.forEach((item) => { res.data.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.hiMapFun.addResourceOnMapWithoutSuperMapCluster( this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
dataEvent, dataEvent,
"videoSurveillance.png", 'videoSurveillance.png',
"videoSurveillance", 'videoSurveillance',
createCameraDetailsPop createCameraDetailsPop
); )
}, },
removeRoadCauseAnalysis () { removeRoadCauseAnalysis () {
this.hiMapFun.removerPolygon(); this.hiMapFun.removerPolygon()
this.hiMapFun.removeLayerByLayerName("videoSurveillance"); this.hiMapFun.removeLayerByLayerName('videoSurveillance')
this.hiMapFun.removeLayerByLayerName("constructionSite"); this.hiMapFun.removeLayerByLayerName('constructionSite')
this.hiMapFun.removeLayerByLayerName("roadPoint") this.hiMapFun.removeLayerByLayerName('roadPoint')
}
}, },
}, beforeDestroy () {}
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,10 +454,10 @@ 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;
@ -470,7 +467,7 @@ export default {
} }
::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;
@ -507,7 +504,7 @@ export default {
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 {
@ -544,7 +541,7 @@ export default {
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 {
@ -554,13 +551,13 @@ export default {
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('该实时监控已经加入视频列表了！')
}
}) })
// 累计事件数量 // 累计事件数量

147
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,14 +118,14 @@
</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 {
@ -134,8 +133,7 @@ export default {
return { return {
loading: true, loading: true,
hiMap: new HieimpMap(), // 地图全局对象 hiMap: new HieimpMap(), // 地图全局对象
mapId: "map-single", // 地图容器的id mapId: 'map-single', // 地图容器的id
cameraAllData: [], cameraAllData: [],
@ -153,7 +151,7 @@ export default {
openVideo: false, openVideo: false,
channelCode: [] channelCode: []
// testjson:testjson, // testjson:testjson,
}; }
}, },
components: { components: {
TiledMap, TiledMap,
@ -172,15 +170,15 @@ export default {
} }
}, },
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) => {
@ -191,30 +189,35 @@ 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));
@ -226,9 +229,9 @@ export default {
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) {
@ -236,12 +239,12 @@ export default {
} }
}) })
}) })
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
@ -250,7 +253,7 @@ export default {
}, },
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) {
@ -258,15 +261,14 @@ export default {
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);
@ -283,16 +285,16 @@ export default {
// 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)
@ -302,26 +304,26 @@ export default {
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) {
@ -335,7 +337,7 @@ export default {
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) => {
@ -345,14 +347,14 @@ export default {
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)
} }
}) })
} }
@ -365,12 +367,12 @@ export default {
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 })
} }
} }
}, },
@ -397,7 +399,7 @@ export default {
gpsX: item.gpsX, gpsX: item.gpsX,
gpsY: item.gpsY, gpsY: item.gpsY,
channelCode: item.channelCode, channelCode: item.channelCode,
leaf:true, leaf: true
}) })
}) })
}) })
@ -408,34 +410,34 @@ export default {
} }
}, },
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">
@ -447,7 +449,6 @@ export default {
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;
@ -523,7 +525,7 @@ export default {
li { li {
color: #fff; color: #fff;
&:hover { &:hover {
background: #41738f background: #41738f;
} }
} }
} }
@ -577,13 +579,12 @@ export default {
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 {