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
|
||||
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.$on('closeVideoDia', () => {
|
||||
|
|
|
|||
|
|
@ -74,36 +74,36 @@
|
|||
</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'
|
||||
import { selectAllByGps } from '@/api/road'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
hiMap: new HieimpMap(), // 地图全局对象
|
||||
mapId: "map-single", // 地图容器的id
|
||||
mapId: 'map-single', // 地图容器的id
|
||||
|
||||
state: "",
|
||||
state: '',
|
||||
constructionSiteData: [],
|
||||
changeLayerBtnList: ['AI事件','视频监控','工地','道路'],
|
||||
changeLayerBtnList: ['AI事件', '视频监控', '工地', '道路'],
|
||||
changeLayerBtnGroup: [],
|
||||
|
||||
openVideo: false,
|
||||
channelCode:[],
|
||||
channelCode: [],
|
||||
|
||||
todayListNum: 0,
|
||||
allListDataNum: 0,
|
||||
};
|
||||
allListDataNum: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TiledMap,
|
||||
|
|
@ -112,308 +112,305 @@ export default {
|
|||
SiteList,
|
||||
VideoPlay
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
|
||||
created () {},
|
||||
mounted () {
|
||||
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 = [{
|
||||
latLng: { lat: row.wd, lng: row.jd },
|
||||
data: row,
|
||||
type: "site",
|
||||
const dataEvent = [{
|
||||
latLng: { lat: row.wd, lng: row.jd },
|
||||
data: row,
|
||||
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;
|
||||
bus.$on('openCurrentVideoWaterPoint', channelCode => {
|
||||
this.openVideo = true
|
||||
this.channelCode.unshift(channelCode)
|
||||
})
|
||||
|
||||
bus.$off("openCurrentVideoSurveillance");
|
||||
bus.$on("openCurrentVideoSurveillance", (channelCode) => {
|
||||
this.openVideo = true;
|
||||
this.channelCode.unshift(channelCode);
|
||||
});
|
||||
|
||||
bus.$off("roadCauseAnalysis");
|
||||
bus.$on("roadCauseAnalysis", (data) => {
|
||||
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) => {
|
||||
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) {
|
||||
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(",");
|
||||
handleSelect (item) {
|
||||
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);
|
||||
circle (latlng) {
|
||||
this.hiMapFun.addCircleToMap(latlng, 3500)
|
||||
},
|
||||
// 根据经纬度查半径内的工地
|
||||
async WithinRadiusSite(data) {
|
||||
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) {
|
||||
// 路网上图
|
||||
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) {
|
||||
layerHandleChange (item) {
|
||||
this.removeRoadCauseAnalysis()
|
||||
|
||||
|
||||
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
|
||||
switch (item) {
|
||||
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 = []
|
||||
case '道路':
|
||||
this.roadOnMap(this.$refs.complaintEventRef.roadData)
|
||||
break
|
||||
case 'AI事件':
|
||||
break
|
||||
case '视频监控':
|
||||
this.addResourceTomap('全部', this.$refs.videoListRef.cameraAllData)
|
||||
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 = [];
|
||||
addResourceTomap (type, data) {
|
||||
const dataEvent = []
|
||||
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", 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"];
|
||||
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",
|
||||
createCameraDetailsPop
|
||||
);
|
||||
})
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
|
||||
},
|
||||
|
||||
removeRoadCauseAnalysis() {
|
||||
this.hiMapFun.removerPolygon();
|
||||
this.hiMapFun.removeLayerByLayerName("videoSurveillance");
|
||||
this.hiMapFun.removeLayerByLayerName("constructionSite");
|
||||
this.hiMapFun.removeLayerByLayerName("roadPoint")
|
||||
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) {
|
||||
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>
|
||||
<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,20 +454,20 @@ 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;
|
||||
border: none;
|
||||
&::placeholder {
|
||||
color: rgba($color: #fff, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
::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;
|
||||
|
|
@ -505,9 +502,9 @@ export default {
|
|||
z-index: 1000;
|
||||
left: 10px;
|
||||
top: 90px;
|
||||
height:980px;
|
||||
height: 980px;
|
||||
width: 478px;
|
||||
background: rgba($color: #05213b, $alpha: .85)
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
}
|
||||
|
||||
.eventNum {
|
||||
|
|
@ -528,7 +525,7 @@ export default {
|
|||
span {
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% );
|
||||
background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
|
@ -543,8 +540,8 @@ export default {
|
|||
right: 8px;
|
||||
top: 92px;
|
||||
width: 398px;
|
||||
height:460px;
|
||||
background: rgba($color: #05213b, $alpha: .85);
|
||||
height: 460px;
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
}
|
||||
|
||||
.siteList {
|
||||
|
|
@ -553,14 +550,14 @@ export default {
|
|||
right: 8px;
|
||||
top: 562px;
|
||||
width: 398px;
|
||||
height:500px;
|
||||
background: rgba($color: #05213b, $alpha: .85);
|
||||
height: 500px;
|
||||
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
|
||||
this.channelCode.unshift(channelCode)
|
||||
if (!this.channelCode.includes(channelCode)) {
|
||||
console.log(this.channelCode, channelCode, '====>实时监控')
|
||||
this.channelCode.unshift(channelCode)
|
||||
} else {
|
||||
this.$message.warning('该实时监控已经加入视频列表了！')
|
||||
}
|
||||
})
|
||||
|
||||
// 累计事件数量
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
v-model="state"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="搜索地点"
|
||||
:trigger-on-focus="false"
|
||||
:trigger-on-focus="false"
|
||||
@select="handleSelect"
|
||||
:popper-append-to-body='false'
|
||||
popper-class="my-autocomplete"
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<!-- <aside class="left-list">
|
||||
<h2>事件</h2>
|
||||
</aside> -->
|
||||
|
||||
|
||||
<aside class="tag-box">
|
||||
<div class="refresh" @click="refresh"><i class="el-icon-refresh"></i></div>
|
||||
<el-tabs type="border-card" class="border-card">
|
||||
|
|
@ -48,9 +48,9 @@
|
|||
>
|
||||
</el-input>
|
||||
<el-checkbox-group v-model="checkboxGroup">
|
||||
<el-checkbox-button
|
||||
v-for="item in tabList"
|
||||
:label="item.labelName"
|
||||
<el-checkbox-button
|
||||
v-for="item in tabList"
|
||||
:label="item.labelName"
|
||||
:key="item.id"
|
||||
@change="tabChange(item)"
|
||||
>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
placeholder="请输入关键词"
|
||||
suffix-icon="el-icon-search"
|
||||
v-model="labelSearch"
|
||||
@input="searchCameraTree"
|
||||
@input="searchCameraTree"
|
||||
>
|
||||
</el-input>
|
||||
<!-- <el-checkbox-group v-model="checkStatus" class="checkStatus" style="height:unset">
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
<el-tree
|
||||
v-show="!camreaTreeIsShow"
|
||||
ref="tree"
|
||||
:data="camreaTreeSingle"
|
||||
:data="camreaTreeSingle"
|
||||
:props="{label:'channelName',children:'children'}"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="treeCameraClick"
|
||||
|
|
@ -105,83 +105,81 @@
|
|||
</el-tree>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</aside>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
<video-play
|
||||
v-if="openVideo"
|
||||
:key="channelCode"
|
||||
:key="channelCode"
|
||||
:channel-id="channelCode"
|
||||
></video-play>
|
||||
</div>
|
||||
</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 { getCameraAll, getCameraLabel, getCameraAllLabel, searchCamera, getCameraAllOrgan, getCameraByParentId, selectByLabelName, selectByChannelName } from '@/api/videoSurveillance/index'
|
||||
import bus from '@/views/layout/bus'
|
||||
// import testjson from "@/assets/response2.json";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
hiMap: new HieimpMap(), // 地图全局对象
|
||||
mapId: "map-single", // 地图容器的id
|
||||
mapId: 'map-single', // 地图容器的id
|
||||
|
||||
cameraAllData: [],
|
||||
|
||||
cameraAllData:[],
|
||||
|
||||
checkboxGroup: [],
|
||||
tabList: [],
|
||||
state: '',
|
||||
timeout: null,
|
||||
camreaTree:[],
|
||||
camreaTreeIsShow:true,
|
||||
timeout: null,
|
||||
camreaTree: [],
|
||||
camreaTreeIsShow: true,
|
||||
camreaTreeSingle: [],
|
||||
checkStatus: '2',
|
||||
labelSearch: '',
|
||||
page: 1,
|
||||
timer:null,
|
||||
openVideo:false,
|
||||
channelCode:[]
|
||||
timer: null,
|
||||
openVideo: false,
|
||||
channelCode: []
|
||||
// testjson:testjson,
|
||||
};
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TiledMap,
|
||||
VideoPlay
|
||||
},
|
||||
created() {
|
||||
|
||||
created () {
|
||||
|
||||
},
|
||||
watch: {
|
||||
page(newV,oldV){
|
||||
page (newV, oldV) {
|
||||
this.getCameraAllPage(newV)
|
||||
},
|
||||
checkStatus(newV,oldV) {
|
||||
checkStatus (newV, oldV) {
|
||||
console.log(newV)
|
||||
this.$refs.tree.filter(newV)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
|
||||
mounted () {
|
||||
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)
|
||||
)
|
||||
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) => {
|
||||
})
|
||||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
res.data.data.forEach((item) => {
|
||||
this.camreaTreeSingle.push({
|
||||
|
|
@ -191,203 +189,207 @@ export default {
|
|||
})
|
||||
})
|
||||
getCameraAll().then((res) => {
|
||||
let t1 = new Date().getTime();
|
||||
this.cameraAllData = res.data
|
||||
this.addResourceTomap('全部',res.data);
|
||||
this.loading = false
|
||||
let t2 = new Date().getTime();
|
||||
console.log("时间#############" + (t2 - t1));
|
||||
const t1 = new Date().getTime()
|
||||
this.cameraAllData = res.data
|
||||
this.addResourceTomap('全部', res.data)
|
||||
this.loading = false
|
||||
const t2 = new Date().getTime()
|
||||
console.log('时间#############' + (t2 - t1))
|
||||
})
|
||||
// this.getMapPoint()
|
||||
bus.$off('openCurrentVideoSurveillance')
|
||||
bus.$on('openCurrentVideoSurveillance',channelCode => {
|
||||
this.openVideo = true;
|
||||
this.channelCode.unshift(channelCode)
|
||||
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('该实时监控已经加入视频列表了！')
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getCameraAllPage(page){
|
||||
let params = {
|
||||
page:page,
|
||||
pageSize:20000
|
||||
getCameraAllPage (page) {
|
||||
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));
|
||||
})
|
||||
},
|
||||
tabChange(item){
|
||||
if(this.checkboxGroup.indexOf(item.labelName) !== -1){
|
||||
if(item.labelName == '全部'){
|
||||
this.addResourceTomap('全部',this.cameraAllData)
|
||||
tabChange (item) {
|
||||
if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
|
||||
if (item.labelName == '全部') {
|
||||
this.addResourceTomap('全部', this.cameraAllData)
|
||||
this.checkboxGroup = ['全部']
|
||||
} else {
|
||||
this.hiMapFun.removeLayerByLayerName('全部');
|
||||
getCameraLabel({labelCode:item.labelCode}).then((res) => {
|
||||
this.addResourceTomap(item.labelName,res.data.data);
|
||||
this.hiMapFun.removeLayerByLayerName('全部')
|
||||
getCameraLabel({ labelCode: item.labelCode }).then((res) => {
|
||||
this.addResourceTomap(item.labelName, res.data.data)
|
||||
res.data.data.forEach((item) => {
|
||||
this.camreaTreeSingle.forEach((val) => {
|
||||
if(item.nodeName == val.channelName){
|
||||
if (item.nodeName == val.channelName) {
|
||||
val.children.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
this.camreaTreeIsShow = false;
|
||||
this.camreaTreeIsShow = false
|
||||
})
|
||||
}
|
||||
}else {
|
||||
this.hiMapFun.removeLayerByLayerName(item.labelName);
|
||||
this.checkStatus = "2"
|
||||
} else {
|
||||
this.hiMapFun.removeLayerByLayerName(item.labelName)
|
||||
this.checkStatus = '2'
|
||||
this.camreaTreeIsShow = true
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
addResourceTomap(type,data) {
|
||||
const dataEvent = [];
|
||||
|
||||
addResourceTomap (type, data) {
|
||||
const dataEvent = []
|
||||
data.forEach((item) => {
|
||||
const arr = [0,0.0,'','0','0.0']
|
||||
if(arr.indexOf(item.gpsX) == -1){
|
||||
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.getMapPoint(dataEvent, "videoSurveillance.png", type);
|
||||
})
|
||||
this.getMapPoint(dataEvent, 'videoSurveillance.png', type)
|
||||
},
|
||||
getMapPoint(data, img, 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);
|
||||
},
|
||||
|
||||
querySearchAsync(queryString, cb) {
|
||||
if(queryString.length > 0){
|
||||
querySearchAsync (queryString, cb) {
|
||||
if (queryString.length > 0) {
|
||||
searchCamera(queryString).then((res) => {
|
||||
cb(res.data.suggestions)
|
||||
// console.log(res)
|
||||
})
|
||||
}
|
||||
// console.log(queryString)
|
||||
// cb(this.testjson.suggestions)
|
||||
// console.log(queryString)
|
||||
// cb(this.testjson.suggestions)
|
||||
},
|
||||
handleSelect(item) {
|
||||
this.hiMapFun.clearAllLayers();
|
||||
//定时器方法
|
||||
let arr = item.detail.location.split(',')
|
||||
handleSelect (item) {
|
||||
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] });
|
||||
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])
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail,"poi-red.png", "address");
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail, 'poi-red.png', 'address')
|
||||
this.timer = setTimeout(() => {
|
||||
this.addResourceTomap('全部',this.cameraAllData)
|
||||
this.addResourceTomap('全部', this.cameraAllData)
|
||||
}, 1000)
|
||||
|
||||
//回调方法
|
||||
// 回调方法
|
||||
// this.flyToMapCallback(item,this.asyncCameraAllDataOnMap)
|
||||
this.checkboxGroup = []
|
||||
},
|
||||
flyToMapCallback(item,callback){
|
||||
let arr = item.detail.location.split(',')
|
||||
flyToMapCallback (item, callback) {
|
||||
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] });
|
||||
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])
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail,"poi-red.png", "address");
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(searchDataDetail, 'poi-red.png', 'address')
|
||||
callback(callback)
|
||||
},
|
||||
asyncCameraAllDataOnMap(){
|
||||
this.addResourceTomap('全部',this.cameraAllData)
|
||||
asyncCameraAllDataOnMap () {
|
||||
this.addResourceTomap('全部', this.cameraAllData)
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
getCameraAllOrgan({parentId:data.id}).then((res) => {
|
||||
this.camreaTree.forEach( (item) => {
|
||||
handleNodeClick (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) {
|
||||
// if (node.level === 0) {
|
||||
// return resolve([{ name: 'region' }]);
|
||||
// }
|
||||
console.log(node)
|
||||
if (node.level > 0) {
|
||||
let subData = []
|
||||
getCameraAllOrgan({parentId:node.data.id}).then((res) => {
|
||||
if(res.data.data.length == 0){
|
||||
const params = {
|
||||
parentId:node.data.id,
|
||||
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);
|
||||
loadNode (node, resolve) {
|
||||
// if (node.level === 0) {
|
||||
// return resolve([{ name: 'region' }]);
|
||||
// }
|
||||
console.log(node)
|
||||
if (node.level > 0) {
|
||||
let subData = []
|
||||
getCameraAllOrgan({ parentId: node.data.id }).then((res) => {
|
||||
if (res.data.data.length == 0) {
|
||||
const params = {
|
||||
parentId: node.data.id,
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
treeCameraClick(data) {
|
||||
treeCameraClick (data) {
|
||||
console.log(data)
|
||||
if(data.channelCode){
|
||||
if (data.channelCode) {
|
||||
const cameraTree = [{
|
||||
latLng: { lat: data.gpsY, lng: data.gpsX },
|
||||
data: data,
|
||||
type:'cameraTree'
|
||||
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 });
|
||||
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 })
|
||||
}
|
||||
}
|
||||
},
|
||||
searchLabel(value) {
|
||||
searchLabel (value) {
|
||||
const params = {
|
||||
labelName:value
|
||||
labelName: value
|
||||
}
|
||||
selectByLabelName(params).then((res) => {
|
||||
console.log(res)
|
||||
this.tabList = res.data.data
|
||||
})
|
||||
},
|
||||
searchCameraTree(value) {
|
||||
if(value.length > 0){
|
||||
searchCameraTree (value) {
|
||||
if (value.length > 0) {
|
||||
const params = {
|
||||
channelName:value
|
||||
}
|
||||
channelName: value
|
||||
}
|
||||
selectByChannelName(params).then((res) => {
|
||||
console.log(res)
|
||||
this.camreaTree = []
|
||||
|
|
@ -396,46 +398,46 @@ export default {
|
|||
name: item.channelName,
|
||||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
channelCode:item.channelCode,
|
||||
leaf:true,
|
||||
channelCode: item.channelCode,
|
||||
leaf: true
|
||||
})
|
||||
})
|
||||
})
|
||||
}else {
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
} else {
|
||||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
})
|
||||
}
|
||||
},
|
||||
refresh() {
|
||||
this.hiMapFun.clearAllLayers();
|
||||
this.addResourceTomap('全部',this.cameraAllData)
|
||||
refresh () {
|
||||
this.hiMapFun.clearAllLayers()
|
||||
this.addResourceTomap('全部', this.cameraAllData)
|
||||
this.checkboxGroup = []
|
||||
},
|
||||
reset() {
|
||||
reset () {
|
||||
this.checkboxGroup = []
|
||||
this.checkStatus = "2";
|
||||
this.checkStatus = '2'
|
||||
this.camreaTreeIsShow = true
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
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;
|
||||
filterNode (value, data) {
|
||||
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;
|
||||
},
|
||||
};
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)// 清除定时器
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -444,10 +446,9 @@ export default {
|
|||
::v-deep .el-loading-mask {
|
||||
z-index: 99999;
|
||||
width: 1920px;
|
||||
height:1080px;
|
||||
height: 1080px;
|
||||
}
|
||||
|
||||
|
||||
.map-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -462,19 +463,20 @@ export default {
|
|||
#contain {
|
||||
// width: 1920px;
|
||||
// height: 1080px;
|
||||
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
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;
|
||||
|
|
@ -485,28 +487,28 @@ export default {
|
|||
position: absolute;
|
||||
z-index: 1000;
|
||||
left: 100px;
|
||||
border-radius:4px;
|
||||
border-radius: 4px;
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
background: #629ab8;
|
||||
width: 255px;
|
||||
height: 44px;
|
||||
border-radius:20px;
|
||||
border:none;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
&::placeholder {
|
||||
color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__prefix {
|
||||
top: 2px;
|
||||
}
|
||||
::v-deep .el-input-group__append {
|
||||
width:54px;
|
||||
height:30px;
|
||||
position:absolute;
|
||||
top:6px;
|
||||
right:6px;
|
||||
border-radius:20px;
|
||||
width: 54px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
border-radius: 20px;
|
||||
line-height: 30px;
|
||||
text-indent: -4px;
|
||||
color: #5e9bbd;
|
||||
|
|
@ -523,7 +525,7 @@ export default {
|
|||
li {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #41738f
|
||||
background: #41738f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -548,7 +550,7 @@ export default {
|
|||
z-index: 1000;
|
||||
width: 350px;
|
||||
height: 500px;
|
||||
border-radius:5px;
|
||||
border-radius: 5px;
|
||||
background-color: #25536d;
|
||||
// background: url("~@/assets/img/table2.png") no-repeat;
|
||||
.refresh {
|
||||
|
|
@ -559,7 +561,7 @@ export default {
|
|||
cursor: pointer;
|
||||
z-index: 1008;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-tabs {
|
||||
background: transparent;
|
||||
// width: 300px;
|
||||
|
|
@ -571,19 +573,18 @@ export default {
|
|||
// .el-tabs__item {
|
||||
// color: #fff;
|
||||
// }
|
||||
.el-tabs__item{
|
||||
.el-tabs__item {
|
||||
width: 154px;
|
||||
border: none;
|
||||
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-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;
|
||||
}
|
||||
|
|
@ -604,8 +605,8 @@ export default {
|
|||
height: 320px;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: #456d83;
|
||||
width: 4px;
|
||||
background-color: #456d83;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
|
|
@ -618,8 +619,8 @@ export default {
|
|||
overflow-y: auto;
|
||||
margin-top: 22px;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: #456d83;
|
||||
width: 4px;
|
||||
background-color: #456d83;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -643,8 +644,8 @@ export default {
|
|||
background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
|
||||
}
|
||||
}
|
||||
::v-deep .el-checkbox-button.is-checked {
|
||||
background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
|
||||
::v-deep .el-checkbox-button.is-checked {
|
||||
background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
|
||||
}
|
||||
::v-deep .el-tabs__item {
|
||||
color: #d1ced5;
|
||||
|
|
@ -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