22bug，视频监控提示
This commit is contained in:
gaoyuanwei
parent
2674226018
commit
10787a8682
|
|
@ -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
|
||||||
this.channelCode.unshift(channelCode)
|
if (!this.channelCode.includes(channelCode)) {
|
||||||
|
console.log(this.channelCode, channelCode, '====>实时监控')
|
||||||
|
this.channelCode.unshift(channelCode)
|
||||||
|
} else {
|
||||||
|
this.$message.warning('该实时监控已经加入视频列表了！')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
bus.$off('closeVideoDia')
|
bus.$off('closeVideoDia')
|
||||||
bus.$on('closeVideoDia', () => {
|
bus.$on('closeVideoDia', () => {
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
removeRoadCauseAnalysis () {
|
||||||
|
this.hiMapFun.removerPolygon()
|
||||||
|
this.hiMapFun.removeLayerByLayerName('videoSurveillance')
|
||||||
|
this.hiMapFun.removeLayerByLayerName('constructionSite')
|
||||||
|
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,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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
this.channelCode.unshift(channelCode)
|
if (!this.channelCode.includes(channelCode)) {
|
||||||
|
console.log(this.channelCode, channelCode, '====>实时监控')
|
||||||
|
this.channelCode.unshift(channelCode)
|
||||||
|
} else {
|
||||||
|
this.$message.warning('该实时监控已经加入视频列表了！')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 累计事件数量
|
// 累计事件数量
|
||||||
|
|
|
||||||
|
|
@ -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,203 +189,207 @@ 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
|
||||||
this.channelCode.unshift(channelCode)
|
if (!this.channelCode.includes(channelCode)) {
|
||||||
|
console.log(this.channelCode, 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)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 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) => {
|
|
||||||
res.data.data.forEach((item) => {
|
|
||||||
subData.push({
|
|
||||||
name: item.channelName,
|
|
||||||
gpsX: item.gpsX,
|
|
||||||
gpsY: item.gpsY,
|
|
||||||
channelCode:item.channelCode,
|
|
||||||
checkStatus:item.checkStatus,
|
|
||||||
leaf:true,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return resolve(subData);
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
subData = res.data.data
|
|
||||||
return resolve(subData);
|
|
||||||
}
|
}
|
||||||
})
|
getCameraByParentId(params).then((res) => {
|
||||||
}
|
res.data.data.forEach((item) => {
|
||||||
|
subData.push({
|
||||||
|
name: item.channelName,
|
||||||
|
gpsX: item.gpsX,
|
||||||
|
gpsY: item.gpsY,
|
||||||
|
channelCode: item.channelCode,
|
||||||
|
checkStatus: item.checkStatus,
|
||||||
|
leaf: true
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return resolve(subData)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
subData = res.data.data
|
||||||
|
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)
|
||||||
this.camreaTree = []
|
this.camreaTree = []
|
||||||
|
|
@ -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") {
|
if (value == '1') {
|
||||||
return data.checkStatus == 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,28 +487,28 @@ 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
::v-deep .el-input__prefix {
|
::v-deep .el-input__prefix {
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
@ -604,8 +605,8 @@ export default {
|
||||||
height: 320px;
|
height: 320px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 4px;
|
width: 4px;
|
||||||
background-color: #456d83;
|
background-color: #456d83;
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
@ -618,8 +619,8 @@ export default {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
margin-top: 22px;
|
margin-top: 22px;
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 4px;
|
width: 4px;
|
||||||
background-color: #456d83;
|
background-color: #456d83;
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
@ -644,7 +645,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
::v-deep .el-checkbox-button.is-checked {
|
::v-deep .el-checkbox-button.is-checked {
|
||||||
background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
|
background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
|
||||||
}
|
}
|
||||||
::v-deep .el-tabs__item {
|
::v-deep .el-tabs__item {
|
||||||
color: #d1ced5;
|
color: #d1ced5;
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue