22bug，视频监控提示
This commit is contained in:
gaoyuanwei
parent
2674226018
commit
10787a8682
|
|
@ -506,7 +506,12 @@ export default {
|
|||
bus.$off('openCurrentVideoSurveillance')
|
||||
bus.$on('openCurrentVideoSurveillance', (channelCode) => {
|
||||
this.openVideo = true
|
||||
if (!this.channelCode.includes(channelCode)) {
|
||||
console.log(this.channelCode, channelCode, '====>实时监控')
|
||||
this.channelCode.unshift(channelCode)
|
||||
} else {
|
||||
this.$message.warning('该实时监控已经加入视频列表了！')
|
||||
}
|
||||
})
|
||||
bus.$off('closeVideoDia')
|
||||
bus.$on('closeVideoDia', () => {
|
||||
|
|
|
|||
|
|
@ -74,16 +74,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { HieimpMap } from "@/supermap/map-init";
|
||||
import TiledMap from "./components/tiledMap";
|
||||
import { searchCamera } from "@/api/videoSurveillance/index";
|
||||
import bus from "@/views/layout/bus";
|
||||
import complaintEvent from "./components/ComplaintEvent";
|
||||
import VideoList from "./components/VideoList";
|
||||
import SiteList from "./components/SiteList";
|
||||
import { selectByJdWd,selectByDayRaise,selectByDayNoice,selectByDayRoadData } from "@/api/construction/index";
|
||||
import { createSiteListPop } from "@/supermap/createMarkerPopup";
|
||||
import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
|
||||
import { HieimpMap } from '@/supermap/map-init'
|
||||
import TiledMap from './components/tiledMap'
|
||||
import { searchCamera } from '@/api/videoSurveillance/index'
|
||||
import bus from '@/views/layout/bus'
|
||||
import complaintEvent from './components/ComplaintEvent'
|
||||
import VideoList from './components/VideoList'
|
||||
import SiteList from './components/SiteList'
|
||||
import { selectByJdWd, selectByDayRaise, selectByDayNoice, selectByDayRoadData } from '@/api/construction/index'
|
||||
import { createSiteListPop, createCameraDetailsPop } from '@/supermap/createMarkerPopup'
|
||||
|
||||
import VideoPlay from './components/VideoPlay'
|
||||
import { selectAllByGps } from '@/api/road'
|
||||
|
||||
|
|
@ -91,9 +91,9 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
hiMap: new HieimpMap(), // 地图全局对象
|
||||
mapId: "map-single", // 地图容器的id
|
||||
mapId: 'map-single', // 地图容器的id
|
||||
|
||||
state: "",
|
||||
state: '',
|
||||
constructionSiteData: [],
|
||||
changeLayerBtnList: ['AI事件', '视频监控', '工地', '道路'],
|
||||
changeLayerBtnGroup: [],
|
||||
|
|
@ -102,8 +102,8 @@ export default {
|
|||
channelCode: [],
|
||||
|
||||
todayListNum: 0,
|
||||
allListDataNum: 0,
|
||||
};
|
||||
allListDataNum: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TiledMap,
|
||||
|
|
@ -114,189 +114,187 @@ export default {
|
|||
},
|
||||
created () {},
|
||||
mounted () {
|
||||
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
|
||||
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
|
||||
this.multiScreenFun = this.hiMap.multiScreenFun(
|
||||
this.hiMap.mapObj,
|
||||
this.hiMapFun
|
||||
);
|
||||
|
||||
)
|
||||
|
||||
selectByDayRaise().then((res) => {
|
||||
this.todayListNum += res.data.data.sum
|
||||
})
|
||||
selectByDayNoice().then((res) => {
|
||||
this.todayListNum += res.data.data.sum
|
||||
|
||||
})
|
||||
selectByDayRoadData().then((res) => {
|
||||
this.todayListNum += res.data.data.sum
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 根据经纬度查询半径内所有的工地
|
||||
bus.$off("openCauseAnalysis");
|
||||
bus.$on("openCauseAnalysis", (row) => {
|
||||
|
||||
bus.$off('openCauseAnalysis')
|
||||
bus.$on('openCauseAnalysis', (row) => {
|
||||
this.removeRoadCauseAnalysis()
|
||||
// this.timeRegion = data.data.dt;
|
||||
// this.hiMapFun.removerPolygon();
|
||||
this.hiMapFun.removeLayerByLayerName("constructionSite");
|
||||
this.hiMapFun.removeLayerByLayerName('constructionSite')
|
||||
// debugger
|
||||
// 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);
|
||||
let dataEvent = [{
|
||||
const dataEvent = [{
|
||||
latLng: { lat: row.wd, lng: row.jd },
|
||||
data: row,
|
||||
type: "site",
|
||||
type: 'site'
|
||||
}]
|
||||
this.hiMapFun.addPointsToMap(
|
||||
dataEvent,
|
||||
"construction.png",
|
||||
"constructionSite",
|
||||
'construction.png',
|
||||
'constructionSite',
|
||||
createSiteListPop
|
||||
);
|
||||
});
|
||||
|
||||
bus.$off("roadOnMap");
|
||||
bus.$on("roadOnMap",(roadData) => {
|
||||
this.removeRoadCauseAnalysis()
|
||||
this.roadOnMap(roadData);
|
||||
)
|
||||
})
|
||||
|
||||
bus.$off("removeCameraLayer");
|
||||
bus.$on("removeCameraLayer",(type) => {
|
||||
bus.$off('roadOnMap')
|
||||
bus.$on('roadOnMap', (roadData) => {
|
||||
this.removeRoadCauseAnalysis()
|
||||
this.roadOnMap(roadData)
|
||||
})
|
||||
|
||||
bus.$off('removeCameraLayer')
|
||||
bus.$on('removeCameraLayer', (type) => {
|
||||
this.hiMapFun.removeLayerByLayerName(type)
|
||||
})
|
||||
|
||||
bus.$off("CameraSingleDataOnMap");
|
||||
bus.$on("CameraSingleDataOnMap",(labelName,data) => {
|
||||
|
||||
bus.$off('CameraSingleDataOnMap')
|
||||
bus.$on('CameraSingleDataOnMap', (labelName, data) => {
|
||||
this.removeRoadCauseAnalysis()
|
||||
this.addResourceTomap(labelName,data);
|
||||
this.addResourceTomap(labelName, data)
|
||||
})
|
||||
|
||||
bus.$off('openCurrentVideoWaterPoint')
|
||||
bus.$on('openCurrentVideoWaterPoint', channelCode => {
|
||||
this.openVideo = true;
|
||||
this.openVideo = true
|
||||
this.channelCode.unshift(channelCode)
|
||||
})
|
||||
|
||||
bus.$off("openCurrentVideoSurveillance");
|
||||
bus.$on("openCurrentVideoSurveillance", (channelCode) => {
|
||||
this.openVideo = true;
|
||||
this.channelCode.unshift(channelCode);
|
||||
});
|
||||
bus.$off('openCurrentVideoSurveillance')
|
||||
bus.$on('openCurrentVideoSurveillance', (channelCode) => {
|
||||
this.openVideo = true
|
||||
if (!this.channelCode.includes(channelCode)) {
|
||||
console.log(this.channelCode, channelCode, '====>实时监控')
|
||||
this.channelCode.unshift(channelCode)
|
||||
} else {
|
||||
this.$message.warning('该实时监控已经加入视频列表了！')
|
||||
}
|
||||
})
|
||||
|
||||
bus.$off("roadCauseAnalysis");
|
||||
bus.$on("roadCauseAnalysis", (data) => {
|
||||
bus.$off('roadCauseAnalysis')
|
||||
bus.$on('roadCauseAnalysis', (data) => {
|
||||
this.removeRoadCauseAnalysis()
|
||||
|
||||
this.circle({ lat: Number(data.lat), lng: Number(data.lng) });
|
||||
this.selectAllByGps(data);
|
||||
this.circle({ lat: Number(data.lat), lng: Number(data.lng) })
|
||||
this.selectAllByGps(data)
|
||||
this.WithinRadiusSite(data)
|
||||
});
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
querySearchAsync (queryString, cb) {
|
||||
if (queryString.length > 0) {
|
||||
searchCamera(queryString).then((res) => {
|
||||
cb(res.data.suggestions);
|
||||
});
|
||||
cb(res.data.suggestions)
|
||||
})
|
||||
}
|
||||
},
|
||||
handleSelect (item) {
|
||||
this.hiMapFun.clearAllLayers();
|
||||
const arr = item.detail.location.split(",");
|
||||
this.hiMapFun.clearAllLayers()
|
||||
const arr = item.detail.location.split(',')
|
||||
const searchDataDetail = [
|
||||
{
|
||||
latLng: { lat: arr[1], lng: arr[0] },
|
||||
data: item,
|
||||
},
|
||||
];
|
||||
this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] });
|
||||
this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0]);
|
||||
data: item
|
||||
}
|
||||
]
|
||||
this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] })
|
||||
this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0])
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||
searchDataDetail,
|
||||
"poi-red.png",
|
||||
"address"
|
||||
);
|
||||
'poi-red.png',
|
||||
'address'
|
||||
)
|
||||
// this.timer = setTimeout(() => {
|
||||
// this.addResourceTomap("全部", this.cameraAllData);
|
||||
// }, 1000);
|
||||
},
|
||||
// 圈选查询
|
||||
circle (latlng) {
|
||||
this.hiMapFun.addCircleToMap(latlng, 3500);
|
||||
this.hiMapFun.addCircleToMap(latlng, 3500)
|
||||
},
|
||||
// 根据经纬度查半径内的工地
|
||||
async WithinRadiusSite (data) {
|
||||
const param = {
|
||||
jd: data.lng,
|
||||
radius: 3000,
|
||||
wd: data.lat,
|
||||
};
|
||||
const res = await selectByJdWd(param);
|
||||
this.constructionSiteData = res.data.data;
|
||||
const dataEvent = [];
|
||||
wd: data.lat
|
||||
}
|
||||
const res = await selectByJdWd(param)
|
||||
this.constructionSiteData = res.data.data
|
||||
const dataEvent = []
|
||||
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) {
|
||||
dataEvent.push({
|
||||
latLng: { lat: Number(item.wd), lng: Number(item.jd) },
|
||||
data: item,
|
||||
type: "site",
|
||||
});
|
||||
type: 'site'
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
this.hiMapFun.addPointsToMap(
|
||||
dataEvent,
|
||||
"construction.png",
|
||||
"constructionSite",
|
||||
'construction.png',
|
||||
'constructionSite',
|
||||
createSiteListPop
|
||||
);
|
||||
)
|
||||
},
|
||||
|
||||
// 路网上图
|
||||
roadOnMap (roadData) {
|
||||
roadData.forEach((item) => {
|
||||
let newPoint = JSON.parse(item.points);
|
||||
const newPoint = JSON.parse(item.points)
|
||||
newPoint[0].map((Point) => {
|
||||
Point.reverse();
|
||||
});
|
||||
item.pm10 = Number(item.pm10);
|
||||
Point.reverse()
|
||||
})
|
||||
item.pm10 = Number(item.pm10)
|
||||
switch (true) {
|
||||
case 0 < item.pm10 && item.pm10 <= 50:
|
||||
this.hiMapFun.addPathToMap(newPoint, "#36fe78");
|
||||
break;
|
||||
case 50 < item.pm10 && item.pm10 <= 150:
|
||||
this.hiMapFun.addPathToMap(newPoint, "#fde202");
|
||||
break;
|
||||
case 150 < item.pm10 && item.pm10 <= 250:
|
||||
this.hiMapFun.addPathToMap(newPoint, "#feb403");
|
||||
break;
|
||||
case 250 < item.pm10 && item.pm10 <= 350:
|
||||
this.hiMapFun.addPathToMap(newPoint, "#fd8402");
|
||||
break;
|
||||
case 350 < item.pm10 && item.pm10 <= 420:
|
||||
this.hiMapFun.addPathToMap(newPoint, "#fd4302");
|
||||
break;
|
||||
case 420 < item.pm10 && item.pm10 <= 500:
|
||||
this.hiMapFun.addPathToMap(newPoint, "#fd0202");
|
||||
break;
|
||||
case 500 < item.pm10 && item.pm10 <= 600:
|
||||
this.hiMapFun.addPathToMap(newPoint, "#a80101");
|
||||
break;
|
||||
case 600 < item.pm10 && item.pm10 <= 700:
|
||||
this.hiMapFun.addPathToMap(newPoint, "#690000");
|
||||
break;
|
||||
case item.pm10 > 0 && item.pm10 <= 50:
|
||||
this.hiMapFun.addPathToMap(newPoint, '#36fe78')
|
||||
break
|
||||
case item.pm10 > 50 && item.pm10 <= 150:
|
||||
this.hiMapFun.addPathToMap(newPoint, '#fde202')
|
||||
break
|
||||
case item.pm10 > 150 && item.pm10 <= 250:
|
||||
this.hiMapFun.addPathToMap(newPoint, '#feb403')
|
||||
break
|
||||
case item.pm10 > 250 && item.pm10 <= 350:
|
||||
this.hiMapFun.addPathToMap(newPoint, '#fd8402')
|
||||
break
|
||||
case item.pm10 > 350 && item.pm10 <= 420:
|
||||
this.hiMapFun.addPathToMap(newPoint, '#fd4302')
|
||||
break
|
||||
case item.pm10 > 420 && item.pm10 <= 500:
|
||||
this.hiMapFun.addPathToMap(newPoint, '#fd0202')
|
||||
break
|
||||
case item.pm10 > 500 && item.pm10 <= 600:
|
||||
this.hiMapFun.addPathToMap(newPoint, '#a80101')
|
||||
break
|
||||
case item.pm10 > 600 && item.pm10 <= 700:
|
||||
this.hiMapFun.addPathToMap(newPoint, '#690000')
|
||||
break
|
||||
default:
|
||||
this.hiMapFun.addPathToMap(newPoint, "#36fe78");
|
||||
break;
|
||||
this.hiMapFun.addPathToMap(newPoint, '#36fe78')
|
||||
break
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
layerHandleChange (item) {
|
||||
|
|
@ -304,55 +302,55 @@ export default {
|
|||
|
||||
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
|
||||
switch (item) {
|
||||
case "道路":
|
||||
this.roadOnMap(this.$refs.complaintEventRef.roadData);
|
||||
break;
|
||||
case "AI事件":
|
||||
break;
|
||||
case "视频监控":
|
||||
case '道路':
|
||||
this.roadOnMap(this.$refs.complaintEventRef.roadData)
|
||||
break
|
||||
case 'AI事件':
|
||||
break
|
||||
case '视频监控':
|
||||
this.addResourceTomap('全部', this.$refs.videoListRef.cameraAllData)
|
||||
break;
|
||||
case "工地":
|
||||
this.hiMapFun.removeLayerByLayerName("constructionSite");
|
||||
let dataEvent = []
|
||||
break
|
||||
case '工地':
|
||||
this.hiMapFun.removeLayerByLayerName('constructionSite')
|
||||
const dataEvent = []
|
||||
this.$refs.siteListRef.siteData.forEach((item) => {
|
||||
dataEvent.push({
|
||||
latLng: { lat: Number(item.wd), lng: Number(item.jd) },
|
||||
data: item,
|
||||
type: "site",
|
||||
});
|
||||
});
|
||||
type: 'site'
|
||||
})
|
||||
})
|
||||
this.hiMapFun.addPointsToMap(
|
||||
dataEvent,
|
||||
"construction.png",
|
||||
"constructionSite",
|
||||
'construction.png',
|
||||
'constructionSite',
|
||||
createSiteListPop
|
||||
);
|
||||
break;
|
||||
)
|
||||
break
|
||||
default:
|
||||
break;
|
||||
break
|
||||
}
|
||||
} else {
|
||||
switch (item) {
|
||||
case "道路":
|
||||
this.hiMapFun.removerPolyline();
|
||||
break;
|
||||
case "AI事件":
|
||||
break;
|
||||
case "视频监控":
|
||||
case '道路':
|
||||
this.hiMapFun.removerPolyline()
|
||||
break
|
||||
case 'AI事件':
|
||||
break
|
||||
case '视频监控':
|
||||
this.hiMapFun.removeLayerByLayerName('全部')
|
||||
break;
|
||||
case "工地":
|
||||
this.hiMapFun.removeLayerByLayerName("constructionSite");
|
||||
break;
|
||||
break
|
||||
case '工地':
|
||||
this.hiMapFun.removeLayerByLayerName('constructionSite')
|
||||
break
|
||||
default:
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addResourceTomap (type, data) {
|
||||
const dataEvent = [];
|
||||
const dataEvent = []
|
||||
data.forEach((item) => {
|
||||
const arr = [0, 0.0, '', '0', '0.0']
|
||||
if (arr.indexOf(item.gpsX) == -1) {
|
||||
|
|
@ -360,60 +358,59 @@ export default {
|
|||
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
|
||||
data: item,
|
||||
type: 'videoSurveillance'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
|
||||
})
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
|
||||
},
|
||||
|
||||
circle (latlng) {
|
||||
this.hiMapFun.addCircleToMap(latlng, 3800);
|
||||
this.hiMapFun.addCircleToMap(latlng, 3800)
|
||||
},
|
||||
|
||||
async selectAllByGps (data) {
|
||||
const param = {
|
||||
gpsX: data.lng,
|
||||
gpsY: data.lat,
|
||||
radius: 3000,
|
||||
};
|
||||
radius: 3000
|
||||
}
|
||||
|
||||
const res = await selectAllByGps(param);
|
||||
console.log(res);
|
||||
const dataEvent = [];
|
||||
const res = await selectAllByGps(param)
|
||||
console.log(res)
|
||||
const dataEvent = []
|
||||
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) {
|
||||
dataEvent.push({
|
||||
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
|
||||
data: item,
|
||||
type: "videoSurveillance",
|
||||
});
|
||||
type: 'videoSurveillance'
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||
dataEvent,
|
||||
"videoSurveillance.png",
|
||||
"videoSurveillance",
|
||||
'videoSurveillance.png',
|
||||
'videoSurveillance',
|
||||
createCameraDetailsPop
|
||||
);
|
||||
)
|
||||
},
|
||||
|
||||
removeRoadCauseAnalysis () {
|
||||
this.hiMapFun.removerPolygon();
|
||||
this.hiMapFun.removeLayerByLayerName("videoSurveillance");
|
||||
this.hiMapFun.removeLayerByLayerName("constructionSite");
|
||||
this.hiMapFun.removeLayerByLayerName("roadPoint")
|
||||
this.hiMapFun.removerPolygon()
|
||||
this.hiMapFun.removeLayerByLayerName('videoSurveillance')
|
||||
this.hiMapFun.removeLayerByLayerName('constructionSite')
|
||||
this.hiMapFun.removeLayerByLayerName('roadPoint')
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy() {},
|
||||
};
|
||||
beforeDestroy () {}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
|
||||
|
||||
@font-face {
|
||||
font-family: 'Tensentype-ZhiHeiJ-W5';
|
||||
font-family: "Tensentype-ZhiHeiJ-W5";
|
||||
src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
|
||||
}
|
||||
.map-box {
|
||||
|
|
@ -442,11 +439,11 @@ export default {
|
|||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-family: 'Tensentype-ZhiHeiJ-W5';
|
||||
font-family: "Tensentype-ZhiHeiJ-W5";
|
||||
}
|
||||
.title::before {
|
||||
content: '在建工地综合监管平台';
|
||||
text-shadow: 0px 3px 10px rgba(0,0,0,.9);
|
||||
content: "在建工地综合监管平台";
|
||||
text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
@ -457,10 +454,10 @@ export default {
|
|||
z-index: 1000;
|
||||
left: 496px;
|
||||
top: 90px;
|
||||
border: 1px solid rgba(31,254,253,.9);
|
||||
border: 1px solid rgba(31, 254, 253, 0.9);
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
background: rgba($color: #203b5d, $alpha: .8);
|
||||
background: rgba($color: #203b5d, $alpha: 0.8);
|
||||
width: 226px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
|
|
@ -470,7 +467,7 @@ export default {
|
|||
}
|
||||
::v-deep .el-input__prefix {
|
||||
top: -1px;
|
||||
color: rgba(31,254,253,.9);
|
||||
color: rgba(31, 254, 253, 0.9);
|
||||
}
|
||||
::v-deep .el-input-group__append {
|
||||
width: 54px;
|
||||
|
|
@ -489,7 +486,7 @@ export default {
|
|||
z-index: -1 !important;
|
||||
width: 226px !important;
|
||||
left: 0px !important;
|
||||
background: rgba(32,59,93,.8);
|
||||
background: rgba(32, 59, 93, 0.8);
|
||||
border: 1px solid #1ffefd;
|
||||
li {
|
||||
color: #fff;
|
||||
|
|
@ -507,7 +504,7 @@ export default {
|
|||
top: 90px;
|
||||
height: 980px;
|
||||
width: 478px;
|
||||
background: rgba($color: #05213b, $alpha: .85)
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
}
|
||||
|
||||
.eventNum {
|
||||
|
|
@ -544,7 +541,7 @@ export default {
|
|||
top: 92px;
|
||||
width: 398px;
|
||||
height: 460px;
|
||||
background: rgba($color: #05213b, $alpha: .85);
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
}
|
||||
|
||||
.siteList {
|
||||
|
|
@ -554,13 +551,13 @@ export default {
|
|||
top: 562px;
|
||||
width: 398px;
|
||||
height: 500px;
|
||||
background: rgba($color: #05213b, $alpha: .85);
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
}
|
||||
|
||||
.changeLayer {
|
||||
width: 332px;
|
||||
height: 67px;
|
||||
background: rgba(7,26,44,.8);
|
||||
background: rgba(7, 26, 44, 0.8);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
|
|
@ -571,7 +568,7 @@ export default {
|
|||
width: 96px;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,.6);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-align: center;
|
||||
line-height: 67px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -297,7 +297,12 @@ export default {
|
|||
bus.$off('openCurrentVideoSurveillance')
|
||||
bus.$on('openCurrentVideoSurveillance', (channelCode) => {
|
||||
this.openVideo = true
|
||||
if (!this.channelCode.includes(channelCode)) {
|
||||
console.log(this.channelCode, channelCode, '====>实时监控')
|
||||
this.channelCode.unshift(channelCode)
|
||||
} else {
|
||||
this.$message.warning('该实时监控已经加入视频列表了！')
|
||||
}
|
||||
})
|
||||
|
||||
// 累计事件数量
|
||||
|
|
|
|||
|
|
@ -108,7 +108,6 @@
|
|||
|
||||
</aside>
|
||||
|
||||
|
||||
</div>
|
||||
<video-play
|
||||
v-if="openVideo"
|
||||
|
|
@ -119,14 +118,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { HieimpMap } from "@/supermap/map-init";
|
||||
import TiledMap from "./components/tiledMap";
|
||||
import * as turf from '@turf/turf';
|
||||
import { wgs84LL2bdLL } from '@/utils/coordinateSystemTransform';
|
||||
import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
|
||||
import { HieimpMap } from '@/supermap/map-init'
|
||||
import TiledMap from './components/tiledMap'
|
||||
import * as turf from '@turf/turf'
|
||||
import { wgs84LL2bdLL } from '@/utils/coordinateSystemTransform'
|
||||
import { createCameraDetailsPop } from '@/supermap/createMarkerPopup'
|
||||
import VideoPlay from './components/VideoPlay'
|
||||
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";
|
||||
|
||||
export default {
|
||||
|
|
@ -134,8 +133,7 @@ export default {
|
|||
return {
|
||||
loading: true,
|
||||
hiMap: new HieimpMap(), // 地图全局对象
|
||||
mapId: "map-single", // 地图容器的id
|
||||
|
||||
mapId: 'map-single', // 地图容器的id
|
||||
|
||||
cameraAllData: [],
|
||||
|
||||
|
|
@ -153,7 +151,7 @@ export default {
|
|||
openVideo: false,
|
||||
channelCode: []
|
||||
// testjson:testjson,
|
||||
};
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TiledMap,
|
||||
|
|
@ -172,15 +170,15 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
|
||||
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
|
||||
this.multiScreenFun = this.hiMap.multiScreenFun(
|
||||
this.hiMap.mapObj,
|
||||
this.hiMapFun
|
||||
);
|
||||
)
|
||||
this.hiMap.mapObj.map.flyTo({ lat: 36.060, lng: 120.3899 }, 16)
|
||||
getCameraAllLabel().then((res) => {
|
||||
this.tabList = res.data.data
|
||||
});
|
||||
})
|
||||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
res.data.data.forEach((item) => {
|
||||
|
|
@ -191,30 +189,35 @@ export default {
|
|||
})
|
||||
})
|
||||
getCameraAll().then((res) => {
|
||||
let t1 = new Date().getTime();
|
||||
const t1 = new Date().getTime()
|
||||
this.cameraAllData = res.data
|
||||
this.addResourceTomap('全部',res.data);
|
||||
this.addResourceTomap('全部', res.data)
|
||||
this.loading = false
|
||||
let t2 = new Date().getTime();
|
||||
console.log("时间#############" + (t2 - t1));
|
||||
const t2 = new Date().getTime()
|
||||
console.log('时间#############' + (t2 - t1))
|
||||
})
|
||||
// this.getMapPoint()
|
||||
bus.$off('openCurrentVideoSurveillance')
|
||||
bus.$on('openCurrentVideoSurveillance', channelCode => {
|
||||
this.openVideo = true;
|
||||
this.openVideo = true
|
||||
if (!this.channelCode.includes(channelCode)) {
|
||||
console.log(this.channelCode, channelCode, '====>实时监控')
|
||||
this.channelCode.unshift(channelCode)
|
||||
} else {
|
||||
this.$message.warning('该实时监控已经加入视频列表了！')
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getCameraAllPage (page) {
|
||||
let params = {
|
||||
const params = {
|
||||
page: page,
|
||||
pageSize: 20000
|
||||
}
|
||||
getCameraAll(params).then((res) => {
|
||||
// let t1 = new Date().getTime();
|
||||
this.cameraAllData = res.data.data
|
||||
this.addResourceTomap('全部',res.data.data);
|
||||
this.addResourceTomap('全部', res.data.data)
|
||||
this.loading = false
|
||||
// let t2 = new Date().getTime();
|
||||
// console.log("时间#############" + (t2 - t1));
|
||||
|
|
@ -226,9 +229,9 @@ export default {
|
|||
this.addResourceTomap('全部', this.cameraAllData)
|
||||
this.checkboxGroup = ['全部']
|
||||
} else {
|
||||
this.hiMapFun.removeLayerByLayerName('全部');
|
||||
this.hiMapFun.removeLayerByLayerName('全部')
|
||||
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) => {
|
||||
this.camreaTreeSingle.forEach((val) => {
|
||||
if (item.nodeName == val.channelName) {
|
||||
|
|
@ -236,12 +239,12 @@ export default {
|
|||
}
|
||||
})
|
||||
})
|
||||
this.camreaTreeIsShow = false;
|
||||
this.camreaTreeIsShow = false
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.hiMapFun.removeLayerByLayerName(item.labelName);
|
||||
this.checkStatus = "2"
|
||||
this.hiMapFun.removeLayerByLayerName(item.labelName)
|
||||
this.checkStatus = '2'
|
||||
this.camreaTreeIsShow = true
|
||||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
|
|
@ -250,7 +253,7 @@ export default {
|
|||
},
|
||||
|
||||
addResourceTomap (type, data) {
|
||||
const dataEvent = [];
|
||||
const dataEvent = []
|
||||
data.forEach((item) => {
|
||||
const arr = [0, 0.0, '', '0', '0.0']
|
||||
if (arr.indexOf(item.gpsX) == -1) {
|
||||
|
|
@ -258,15 +261,14 @@ export default {
|
|||
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
|
||||
data: item,
|
||||
type: 'videoSurveillance'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
this.getMapPoint(dataEvent, "videoSurveillance.png", type);
|
||||
})
|
||||
this.getMapPoint(dataEvent, 'videoSurveillance.png', type)
|
||||
},
|
||||
getMapPoint (data, img, type) {
|
||||
// this.hiMapFun.clearAllLayers();
|
||||
const features = data;
|
||||
const features = data
|
||||
// debugger
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(features, img, type, createCameraDetailsPop)
|
||||
// this.hiMapFun.addResourceOnMapWithoutSuper(features, img, "newEVent", createListDetailsPop);
|
||||
|
|
@ -283,16 +285,16 @@ export default {
|
|||
// cb(this.testjson.suggestions)
|
||||
},
|
||||
handleSelect (item) {
|
||||
this.hiMapFun.clearAllLayers();
|
||||
this.hiMapFun.clearAllLayers()
|
||||
// 定时器方法
|
||||
let arr = item.detail.location.split(',')
|
||||
const arr = item.detail.location.split(',')
|
||||
const searchDataDetail = [{
|
||||
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.addResourceOnMapWithoutSuperMapCluster(searchDataDetail,"poi-red.png", "address");
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail, 'poi-red.png', 'address')
|
||||
this.timer = setTimeout(() => {
|
||||
this.addResourceTomap('全部', this.cameraAllData)
|
||||
}, 1000)
|
||||
|
|
@ -302,26 +304,26 @@ export default {
|
|||
this.checkboxGroup = []
|
||||
},
|
||||
flyToMapCallback (item, callback) {
|
||||
let arr = item.detail.location.split(',')
|
||||
const arr = item.detail.location.split(',')
|
||||
const searchDataDetail = [{
|
||||
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.addResourceOnMapWithoutSuperMapCluster(searchDataDetail,"poi-red.png", "address");
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail, 'poi-red.png', 'address')
|
||||
callback(callback)
|
||||
},
|
||||
asyncCameraAllDataOnMap () {
|
||||
this.addResourceTomap('全部', this.cameraAllData)
|
||||
},
|
||||
handleNodeClick (data) {
|
||||
console.log(data);
|
||||
console.log(data)
|
||||
getCameraAllOrgan({ parentId: data.id }).then((res) => {
|
||||
this.camreaTree.forEach((item) => {
|
||||
item.children = res.data.data
|
||||
})
|
||||
console.log(this.camreaTree);
|
||||
console.log(this.camreaTree)
|
||||
})
|
||||
},
|
||||
loadNode (node, resolve) {
|
||||
|
|
@ -335,7 +337,7 @@ export default {
|
|||
if (res.data.data.length == 0) {
|
||||
const params = {
|
||||
parentId: node.data.id,
|
||||
checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus,
|
||||
checkStatus: this.checkStatus == '2' ? ['0', '1'] : this.checkStatus
|
||||
}
|
||||
getCameraByParentId(params).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
|
|
@ -345,14 +347,14 @@ export default {
|
|||
gpsY: item.gpsY,
|
||||
channelCode: item.channelCode,
|
||||
checkStatus: item.checkStatus,
|
||||
leaf:true,
|
||||
leaf: true
|
||||
})
|
||||
})
|
||||
return resolve(subData);
|
||||
return resolve(subData)
|
||||
})
|
||||
} else {
|
||||
subData = res.data.data
|
||||
return resolve(subData);
|
||||
return resolve(subData)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -365,12 +367,12 @@ export default {
|
|||
data: data,
|
||||
type: 'cameraTree'
|
||||
}]
|
||||
this.hiMapFun.removeLayerByLayerName("cameraTree");
|
||||
this.hiMapFun.removeLayerByLayerName('cameraTree')
|
||||
this.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
|
||||
const arr = [0, 0.0, '', '0', '0.0']
|
||||
if (arr.indexOf(data.gpsX) == -1) {
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
|
||||
this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree, 'poi-red.png', 'cameraTree')
|
||||
this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX })
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -397,7 +399,7 @@ export default {
|
|||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
channelCode: item.channelCode,
|
||||
leaf:true,
|
||||
leaf: true
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -408,34 +410,34 @@ export default {
|
|||
}
|
||||
},
|
||||
refresh () {
|
||||
this.hiMapFun.clearAllLayers();
|
||||
this.hiMapFun.clearAllLayers()
|
||||
this.addResourceTomap('全部', this.cameraAllData)
|
||||
this.checkboxGroup = []
|
||||
},
|
||||
reset () {
|
||||
this.checkboxGroup = []
|
||||
this.checkStatus = "2";
|
||||
this.checkStatus = '2'
|
||||
this.camreaTreeIsShow = true
|
||||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
})
|
||||
document.getElementById("tree").scrollTop = 0;
|
||||
document.getElementById('tree').scrollTop = 0
|
||||
},
|
||||
filterNode (value, data) {
|
||||
if (value == "2") return true;
|
||||
if (value == "0") {
|
||||
return data.checkStatus == 0;
|
||||
if (value == '2') return true
|
||||
if (value == '0') {
|
||||
return data.checkStatus == 0
|
||||
}
|
||||
if (value == '1') {
|
||||
return data.checkStatus == 1
|
||||
}
|
||||
if (value == "1") {
|
||||
return data.checkStatus == 1;
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer);// 清除定时器
|
||||
this.timer = null;
|
||||
},
|
||||
};
|
||||
clearInterval(this.timer)// 清除定时器
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -447,7 +449,6 @@ export default {
|
|||
height: 1080px;
|
||||
}
|
||||
|
||||
|
||||
.map-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -469,12 +470,13 @@ export default {
|
|||
width: 100%;
|
||||
height: 104px;
|
||||
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;
|
||||
span {
|
||||
font-size: 44px;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(0deg, #C7FBFB 0%, #FFFFFF 100%);
|
||||
background: linear-gradient(0deg, #c7fbfb 0%, #ffffff 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
|
@ -523,7 +525,7 @@ export default {
|
|||
li {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #41738f
|
||||
background: #41738f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -577,13 +579,12 @@ export default {
|
|||
text-align: center;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
background: rgba(27,255,255,.2);
|
||||
background: rgba(27, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
background-image: url("~@/assets/img/picture_left.png"),
|
||||
url("~@/assets/img/picture_right.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 6% 55%,
|
||||
94% 55%;
|
||||
background-position: 6% 55%, 94% 55%;
|
||||
background-size: 20% 20%;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -635,7 +636,7 @@ export default {
|
|||
}
|
||||
.el-checkbox-button__inner {
|
||||
border-radius: 20px;
|
||||
background-color: rgba(116,204,252,.4);
|
||||
background-color: rgba(116, 204, 252, 0.4);
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -654,10 +655,10 @@ export default {
|
|||
color: #fff;
|
||||
}
|
||||
::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 {
|
||||
background-color: rgba(27,255,255,.2);
|
||||
background-color: rgba(27, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
.reset-button {
|
||||
|
|
|
|||
Loading…
Reference in New Issue