From f584018da2ef22754abfd1964102140ee6ac4ac9 Mon Sep 17 00:00:00 2001 From: wangwei <707714829@qq.com> Date: Fri, 25 Nov 2022 14:12:29 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E5=88=B6=E4=B8=93=E9=A2=98=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.js | 6 + src/views/pages/area/index.vue | 579 ++++----- .../areaMonitor/components/ComplaintEvent.vue | 543 ++++++++ .../areaMonitor/components/EarlyWarning.vue | 429 +++++++ .../components/HorizonTimeLine.vue | 170 +++ .../components/ImportantAreaPop.vue | 1132 +++++++++++++++++ .../components/ImportantAreaPopBack.vue | 511 ++++++++ .../pages/areaMonitor/components/SiteList.vue | 399 ++++++ .../areaMonitor/components/SiteListMore.vue | 451 +++++++ .../components/StatisticalAnalysis.vue | 765 +++++++++++ .../areaMonitor/components/VideoList.vue | 376 ++++++ .../areaMonitor/components/VideoListLeft.vue | 101 ++ .../areaMonitor/components/VideoListRight.vue | 535 ++++++++ .../areaMonitor/components/VideoPlay.vue | 409 ++++++ .../pages/areaMonitor/components/tiledMap.vue | 52 + src/views/pages/areaMonitor/index.vue | 1063 ++++++++++++++++ 16 files changed, 7164 insertions(+), 357 deletions(-) create mode 100644 src/views/pages/areaMonitor/components/ComplaintEvent.vue create mode 100644 src/views/pages/areaMonitor/components/EarlyWarning.vue create mode 100644 src/views/pages/areaMonitor/components/HorizonTimeLine.vue create mode 100644 src/views/pages/areaMonitor/components/ImportantAreaPop.vue create mode 100644 src/views/pages/areaMonitor/components/ImportantAreaPopBack.vue create mode 100644 src/views/pages/areaMonitor/components/SiteList.vue create mode 100644 src/views/pages/areaMonitor/components/SiteListMore.vue create mode 100644 src/views/pages/areaMonitor/components/StatisticalAnalysis.vue create mode 100644 src/views/pages/areaMonitor/components/VideoList.vue create mode 100644 src/views/pages/areaMonitor/components/VideoListLeft.vue create mode 100644 src/views/pages/areaMonitor/components/VideoListRight.vue create mode 100644 src/views/pages/areaMonitor/components/VideoPlay.vue create mode 100644 src/views/pages/areaMonitor/components/tiledMap.vue create mode 100644 src/views/pages/areaMonitor/index.vue diff --git a/src/router/index.js b/src/router/index.js index 7dcd1c9..d618b0c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -102,6 +102,12 @@ export const pageRoutes = [{ name: 'area', meta: { title: '重点区域监控平台' } }, +{ + path: '/areaMonitor', + component: () => import('@/views/pages/areaMonitor'), + name: 'areaMonitor', + meta: { title: '重点区域监控平台' } +}, { path: '/point', component: () => import('@/views/pages/civilizedCity/components/Point'), diff --git a/src/views/pages/area/index.vue b/src/views/pages/area/index.vue index 3084caa..66807f8 100644 --- a/src/views/pages/area/index.vue +++ b/src/views/pages/area/index.vue @@ -38,45 +38,26 @@
累计事件数量(2022.05.25-至今) -

- {{ allListDataNum }}件 -

+

{{ allListDataNum }}件

- - +
- -
- - +
+
- -
- -
-
- 重点区域 -
-
- +
+
- - -
- -
-
- +
地图显示
- +
重点区域
-
+
- +
- - 人流热力 - + 人流热力
- + 全市 本地 外地
- +
- - -
@@ -143,72 +109,50 @@ import TiledMap from "./components/tiledMap"; import { searchCamera } from "@/api/videoSurveillance/index"; import bus from "@/views/layout/bus"; import complaintEvent from "./components/ComplaintEvent"; -import EarlyWarning from "./components/EarlyWarning"; -import VideoPlay from "./components/VideoPlay"; -import VideoListRight from "./components/VideoListRight"; -import VideoListLeft from "./components/VideoListLeft"; +import VideoPlay from './components/VideoPlay' import VideoList from "./components/VideoList"; -import SiteListMore from "./components/SiteListMore"; +import SiteList from "./components/SiteList"; import { selectByJdWd } from "@/api/construction/index"; -import { - createSiteListPop, - createCameraDetailsPop, - createEventListDetailsPop, - createImportantAreaPop, -} from "@/supermap/createMarkerPopup"; -import { - listPassengerFlow, - listPassengerFlowByAllNums, -} from "@/api/civilizedCity.js"; +import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup"; +import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js"; import { selectByAreaEvent, selectKeyArea } from "@/api/area"; import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform"; // 时间轴 -import HorizonTimeLine from "./components/HorizonTimeLine"; +import HorizonTimeLine from './components/HorizonTimeLine' export default { data() { return { - videoVisible:false, hiMap: new HieimpMap(), // 地图全局对象 mapId: "map-single", // 地图容器的id state: "", constructionSiteData: [], - changeLayerBtnList: ["AI事件", "视频监控", "聚集区"], - changeLayerBtnListArea: [ - "公园广场", - "商业街区", - "景区景点", - "海水浴场", - "窗口单位", - ], - changeLayerBtnListHot: ["全市", "本市", "外地"], + changeLayerBtnList: ['AI事件','视频监控', '聚集区'], + changeLayerBtnListArea: ['公园广场','商业街区','景区景点','海水浴场','窗口单位'], + changeLayerBtnListHot: ['全市','本市','外地',], changeLayerBtnGroup: [], - thermodynamicPeopleType: "", + thermodynamicPeopleType: '', thermodynamicPeopleAll: [], thermodynamicPeopleLocal: [], thermodynamicPeopleNoLocal: [], - allListDataNum: "", + allListDataNum: '', openVideo: false, channelCode: [], hotDataNum: [], // 时间轴 timelineData: [], // 热力图当日数据 - hotDataAll: {}, - keyAreasShow: false, //是否显示重点区域。 + hotDataAll: {} }; }, components: { TiledMap, complaintEvent, - VideoListRight, - VideoListLeft, VideoList, - SiteListMore, + SiteList, VideoPlay, - HorizonTimeLine, - EarlyWarning, + HorizonTimeLine }, created() {}, mounted() { @@ -218,16 +162,16 @@ export default { this.hiMapFun ); - bus.$off("openCurrentVideoSurveillance"); - bus.$on("openCurrentVideoSurveillance", (channelCode) => { - this.openVideo = true; - this.channelCode.unshift(channelCode); - }); - bus.$off("openCurrentVideoWaterPoint"); - 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('openCurrentVideoWaterPoint') + bus.$on('openCurrentVideoWaterPoint', channelCode => { + this.openVideo = true + this.channelCode.unshift(channelCode) + }) // 根据经纬度查询半径内所有的工地 bus.$off("openCauseAnalysis"); bus.$on("openCauseAnalysis", (row) => { @@ -238,13 +182,11 @@ export default { // this.circle(latLng); this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd }); // this.WithinRadiusSite(latLng); - let dataEvent = [ - { + let dataEvent = [{ latLng: { lat: row.wd, lng: row.jd }, data: row, type: "site", - }, - ]; + }] this.hiMapFun.addPointsToMap( dataEvent, "construction.png", @@ -252,120 +194,117 @@ export default { createSiteListPop ); }); - + bus.$off("roadOnMap"); - bus.$on("roadOnMap", (roadData) => { + bus.$on("roadOnMap",(roadData) => { this.roadOnMap(roadData); - }); + }) bus.$off("removeCameraLayer"); - bus.$on("removeCameraLayer", (type) => { - this.hiMapFun.removeLayerByLayerName(type); - }); - + bus.$on("removeCameraLayer",(type) => { + this.hiMapFun.removeLayerByLayerName(type) + }) + bus.$off("CameraSingleDataOnMap"); - bus.$on("CameraSingleDataOnMap", (labelName, data) => { - this.addResourceTomap(labelName, data); - }); + bus.$on("CameraSingleDataOnMap",(labelName,data) => { + this.addResourceTomap(labelName,data); + }) - this.thermodynamic(); - this.personToday(); - this.getCurrentTime(); + this.thermodynamic() + this.personToday() + this.getCurrentTime() // 获取当日全部数据 for (let i = 0; i < this.timelineData.length; i++) { - this.todayAllData(this.timelineData[i].timeId); + this.todayAllData(this.timelineData[i].timeId) } - }, + }, methods: { - IsShowLideoVisible(val){ - this.videoVisible=val - }, // 获取年月日 - getCurrentTime() { - const yy = new Date().getFullYear(); - const m = new Date().getMonth() + 1; - const mm = m < 10 ? "0" + m : m; + getCurrentTime () { + const yy = new Date().getFullYear() + const m = new Date().getMonth() + 1 + const mm = m < 10 ? '0' + m : m const dd = new Date().getDate() < 10 - ? "0" + new Date().getDate() - : new Date().getDate(); + ? '0' + new Date().getDate() + : new Date().getDate() - this.gettime = yy + mm + dd; + this.gettime = yy + mm + dd // console.log(this.gettime); for (let i = 8; i <= 20; i++) { if (i < 10) { this.timelineData.push({ - timeId: this.gettime + "0" + i + "00", - year: i, - }); + timeId: this.gettime + '0' + i + '00', + year: i + }) } else { this.timelineData.push({ - timeId: this.gettime + i + "00", - year: i, - }); + timeId: this.gettime + i + '00', + year: i + }) } } // console.log(this.timelineData); }, // 全部 - todayAllData(val) { + todayAllData (val) { const params = { - timeId: val, - }; - this.hotDataAll[val] = []; + timeId: val + } + this.hotDataAll[val] = [] listPassengerFlow(params).then((res) => { // console.log(res.data); // this.hotDataAll.params = res.data; - this.hotDataAll[val] = res.data; - }); + this.hotDataAll[val] = res.data + }) // console.log(this.hotDataAll); }, // 热力图点击事件 - timeIdData(val) { + timeIdData (val) { // 清除实时热力图 - this.hiMapFun.removeLayerByLayerName("thermodynamic"); - this.hiMapFun.removeLayerByLayerName("types"); - const dataA = []; - const dataNumber = []; - const dataMax = []; + this.hiMapFun.removeLayerByLayerName('thermodynamic') + this.hiMapFun.removeLayerByLayerName('types') + const dataA = [] + const dataNumber = [] + const dataMax = [] - const listB = this.hotDataAll[val]; - console.log(listB); + const listB = this.hotDataAll[val] + console.log(listB) // 最大值 for (let num = 0; num < listB.length; num++) { - dataNumber.push(listB[num].allNums); + dataNumber.push(listB[num].allNums) } - const max = Math.max.apply(null, dataNumber); - console.log(max); // 16617 + const max = Math.max.apply(null, dataNumber) + console.log(max) // 16617 listB.forEach((item) => { - const arr = [0, 0.0, "", "0", "0.0"]; + const arr = [0, 0.0, '', '0', '0.0'] if (arr.indexOf(item.latitude) == -1) { dataA.push([ Number(item.latitude), Number(item.longitude), - Number((item.allNums / max).toFixed(1)), - ]); + Number((item.allNums / max).toFixed(1)) + ]) } - }); + }) // 筛选 dataA.forEach((item) => { if (item[2] > 0.1) { - dataMax.push(item); + dataMax.push(item) } - }); + }) - this.hiMapFun.thermodynamic(dataMax, 25, "types"); + this.hiMapFun.thermodynamic(dataMax, 25, 'types') // }); }, // 获取热力图的按钮 - hotName(item) { + hotName (item) { // console.log(item); if (this.checkList.indexOf(item) == -1) { - this.checkList.push(item); - this.bottomTabList[3].img = this.bottomTabList[3].imgActive; + this.checkList.push(item) + this.bottomTabList[3].img = this.bottomTabList[3].imgActive } - console.log(this.checkList); + console.log(this.checkList) }, querySearchAsync(queryString, cb) { if (queryString.length > 0) { @@ -375,10 +314,10 @@ export default { } }, // 人口聚集今日事件大于5000 - personToday() { + personToday () { listPassengerFlowByAllNums().then((res) => { - this.hotDataNum = res.data; - }); + this.hotDataNum = res.data + }) }, handleSelect(item) { this.hiMapFun.clearAllLayers(); @@ -483,74 +422,70 @@ export default { if (this.changeLayerBtnGroup.indexOf(item) !== -1) { switch (item) { case "AI事件": - this.hiMapFun.removeLayerByLayerName("EventListDetail"); + this.hiMapFun.removeLayerByLayerName('EventListDetail') selectByAreaEvent().then((res) => { const dataEvent = []; res.data.data.events.forEach((item) => { - dataEvent.push({ - latLng: { lat: item.latitude, lng: item.longitude }, - data: item, - type: "eventList", - }); - }); - this.hiMapFun.addResourceOnMapWithoutSuperMapCluster( - dataEvent, - "poi-event.png", - "EventListDetail", - createEventListDetailsPop - ); - }); + dataEvent.push( + { + latLng: { lat: item.latitude, lng: item.longitude }, + data: item, + type: "eventList", + } + ) + }) + this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "poi-event.png", "EventListDetail", createEventListDetailsPop) + }) break; case "视频监控": - this.addResourceTomap( - "全部", - this.$refs.videoListRef.cameraAllData - ); + this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData) break; case "聚集区": - this.hiMapFun.removeLayerByLayerName("PersonHotDetail"); - const hotEventListDetail = []; + this.hiMapFun.removeLayerByLayerName('PersonHotDetail') + const hotEventListDetail = [] this.hotDataNum.forEach((item) => { hotEventListDetail.push({ latLng: { lat: item.latitude, lng: item.longitude }, data: item, - type: "personHot", - }); - }); + type: 'personHot' + }) + }) this.hiMapFun.addPointsToMap( hotEventListDetail, - "poi-blue.png", - "PersonHotDetail" - ); + 'poi-blue.png', + 'PersonHotDetail' + ) break; case "公园广场": case "商业街区": case "景区景点": case "海水浴场": case "窗口单位": - this.hiMapFun.removeLayerByLayerName(item); - selectKeyArea({ type: item }).then((res) => { - if (item === "商业街区") { + this.hiMapFun.removeLayerByLayerName(item) + selectKeyArea({ type: item}).then((res) => { + if(item === '商业街区') { res.data.data.forEach((newItem) => { - if (newItem.point) { - let arr = JSON.parse(newItem.point); - let areaLatLng = []; + if(newItem.point) { + let arr = JSON.parse(newItem.point) + let areaLatLng = [] arr.forEach((pointItem) => { let lonLat = gcjLL2wgs84LL(pointItem[0], pointItem[1]); - areaLatLng.push([lonLat[1], lonLat[0]]); - }); - this.hiMapFun.addAreaToMap(areaLatLng); + areaLatLng.push([lonLat[1],lonLat[0]]) + }) + this.hiMapFun.addAreaToMap(areaLatLng) } - }); + }) } else { const dataEvent = []; res.data.data.forEach((item) => { - dataEvent.push({ - latLng: { lat: item.latitude, lng: item.longitude }, - data: item, - type: "site", - }); - }); + dataEvent.push( + { + latLng: { lat: item.latitude, lng: item.longitude }, + data: item, + type: "site", + } + ) + }) this.hiMapFun.addPointsToMap( dataEvent, "poi-red.png", @@ -558,7 +493,7 @@ export default { createImportantAreaPop ); } - }); + }) break; default: break; @@ -570,19 +505,19 @@ export default { case "景区景点": case "海水浴场": case "窗口单位": - if (item === "商业街区") { - this.hiMapFun.removerPolygon(); + if(item === '商业街区') { + this.hiMapFun.removerPolygon() } - this.hiMapFun.removeLayerByLayerName(item); + this.hiMapFun.removeLayerByLayerName(item) break; case "AI事件": - this.hiMapFun.removeLayerByLayerName("EventListDetail"); + this.hiMapFun.removeLayerByLayerName('EventListDetail') break; case "视频监控": - this.hiMapFun.removeLayerByLayerName("全部"); + this.hiMapFun.removeLayerByLayerName('全部') break; case "聚集区": - this.hiMapFun.removeLayerByLayerName("PersonHotDetail"); + this.hiMapFun.removeLayerByLayerName('PersonHotDetail') break; default: break; @@ -590,24 +525,20 @@ export default { } }, - addResourceTomap(type, data) { + 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", + type: 'videoSurveillance' }); } + }); - this.hiMapFun.addResourceOnMapWithoutSuperMapCluster( - dataEvent, - "videoSurveillance.png", - type, - createCameraDetailsPop - ); + this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop) }, thermodynamic() { @@ -615,114 +546,93 @@ export default { let dataNumberLocal = []; let dataNumberNoLocal = []; listPassengerFlow().then((res) => { - const data = res.data; - // 最大值 - for (let num = 0; num < data.length; num++) { - dataNumber.push(data[num].allNums); - dataNumberLocal.push(data[num].localNums); - dataNumberNoLocal.push(data[num].nonlocalNums); - } - let max = Math.max.apply(null, dataNumber); - let maxLocal = Math.max.apply(null, dataNumberLocal); - let maxNoLocal = Math.max.apply(null, dataNumberNoLocal); - data.forEach((item) => { - const arr = [0, 0.0, "", "0", "0.0"]; - if ( - arr.indexOf(item.latitude) == -1 && - arr.indexOf(item.longitude) == -1 - ) { - //全部 - if (item.allNums !== "0") { - let allNums = Number((item.allNums / max).toFixed(1)); - if (allNums > 0.1) { - this.thermodynamicPeopleAll.push([ - Number(item.latitude), - Number(item.longitude), - allNums, - ]); - } - } - //本地 - if (item.localNums !== "0") { - let localNums = Number((item.localNums / maxLocal).toFixed(1)); - if (localNums > 0.1) { - this.thermodynamicPeopleLocal.push([ - Number(item.latitude), - Number(item.longitude), - localNums, - ]); - } - } - //外地 - if (item.nonlocalNums !== "0") { - let nonlocalNums = Number( - (item.nonlocalNums / maxNoLocal).toFixed(1) - ); - if (nonlocalNums > 0.1) { - this.thermodynamicPeopleNoLocal.push([ - Number(item.latitude), - Number(item.longitude), - nonlocalNums, - ]); - } - } + const data = res.data; + // 最大值 + for (let num = 0; num < data.length; num++) { + dataNumber.push(data[num].allNums); + dataNumberLocal.push(data[num].localNums); + dataNumberNoLocal.push(data[num].nonlocalNums); } + let max = Math.max.apply(null, dataNumber); + let maxLocal = Math.max.apply(null, dataNumberLocal); + let maxNoLocal = Math.max.apply(null, dataNumberNoLocal); + data.forEach((item) => { + const arr = [0, 0.0, "", "0", "0.0"]; + if (arr.indexOf(item.latitude) == -1 && arr.indexOf(item.longitude) == -1) { + //全部 + if(item.allNums !== '0'){ + let allNums = Number((item.allNums / max).toFixed(1)) + if(allNums > 0.1){ + this.thermodynamicPeopleAll.push([ + Number(item.latitude), + Number(item.longitude), + allNums + ]); + } + } + //本地 + if(item.localNums !== '0'){ + let localNums = Number((item.localNums / maxLocal).toFixed(1)) + if(localNums > 0.1){ + this.thermodynamicPeopleLocal.push([ + Number(item.latitude), + Number(item.longitude), + localNums + ]); + } + } + //外地 + if(item.nonlocalNums !== '0'){ + let nonlocalNums = Number((item.nonlocalNums / maxNoLocal).toFixed(1)) + if(nonlocalNums > 0.1){ + this.thermodynamicPeopleNoLocal.push([ + Number(item.latitude), + Number(item.longitude), + nonlocalNums + ]); + } + } + } + }); }); - }); }, // 清除热力图 clearThermodynamic() { this.hiMapFun.removeLayerByLayerName("types"); this.hiMapFun.removeLayerByLayerName("thermodynamic"); - this.thermodynamicPeopleType = ""; + this.thermodynamicPeopleType = '' }, changeThermodynamicPeopleType(value) { this.hiMapFun.removeLayerByLayerName("types"); switch (value) { - case "all": + case 'all': this.hiMapFun.removeLayerByLayerName("thermodynamic"); - this.hiMapFun.thermodynamic( - this.thermodynamicPeopleAll, - 25, - "thermodynamic" - ); + this.hiMapFun.thermodynamic(this.thermodynamicPeopleAll, 25, "thermodynamic"); break; - case "local": + case 'local': this.hiMapFun.removeLayerByLayerName("thermodynamic"); - this.hiMapFun.thermodynamic( - this.thermodynamicPeopleLocal, - 25, - "thermodynamic" - ); + this.hiMapFun.thermodynamic(this.thermodynamicPeopleLocal, 25, "thermodynamic"); break; - case "noLocal": + case 'noLocal': this.hiMapFun.removeLayerByLayerName("thermodynamic"); - this.hiMapFun.thermodynamic( - this.thermodynamicPeopleNoLocal, - 25, - "thermodynamic" - ); + this.hiMapFun.thermodynamic(this.thermodynamicPeopleNoLocal, 25, "thermodynamic"); break; } }, - removeRoadCauseAnalysis() { - this.hiMapFun.removerPolygon(); - this.hiMapFun.removeLayerByLayerName("roadPoint"); - this.hiMapFun.removeLayerByLayerName("EventListDetail"); - this.hiMapFun.removeLayerByLayerName("PersonHotDetail"); + removeRoadCauseAnalysis () { + this.hiMapFun.removerPolygon() + this.hiMapFun.removeLayerByLayerName('roadPoint') + this.hiMapFun.removeLayerByLayerName('EventListDetail') + this.hiMapFun.removeLayerByLayerName('PersonHotDetail') this.hiMapFun.removeLayerByLayerName("thermodynamic"); this.hiMapFun.removeLayerByLayerName("types"); - this.hiMapFun.removeLayerByLayerName("全部"); - this.hiMapFun.removeLayerByLayerName("公园广场"); - this.hiMapFun.removeLayerByLayerName("商业街区"); - this.hiMapFun.removeLayerByLayerName("景区景点"); - this.hiMapFun.removeLayerByLayerName("海水浴场"); - this.hiMapFun.removeLayerByLayerName("窗口单位"); - }, - //点击是否显示重点区域。 - handleKeyArea() { - this.keyAreasShow = !this.keyAreasShow; - }, + this.hiMapFun.removeLayerByLayerName('全部') + this.hiMapFun.removeLayerByLayerName('公园广场') + this.hiMapFun.removeLayerByLayerName('商业街区') + this.hiMapFun.removeLayerByLayerName('景区景点') + this.hiMapFun.removeLayerByLayerName('海水浴场') + this.hiMapFun.removeLayerByLayerName('窗口单位') + } }, beforeDestroy() {}, }; @@ -734,9 +644,6 @@ export default { font-family: 'Tensentype-ZhiHeiJ-W5'; src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf"); } -::v-deep .el-dialog { - background: rgba(32,59,93,.8); -} .map-box { width: 100%; height: 100%; @@ -750,7 +657,6 @@ export default { } #contain { - header { position: relative; z-index: 1000; @@ -778,7 +684,7 @@ export default { .searchPoint { position: absolute; z-index: 1000; - right: 500px; + left: 496px; top: 90px; border: 1px solid rgba(31,254,253,.9); ::v-deep .el-input__inner { @@ -832,24 +738,7 @@ export default { width: 478px; background: rgba($color: #05213b, $alpha: .85) } - .complaintContent1 { - position: absolute; - z-index: 1000; - right: 10px; - top: 90px; - height:660px; - width: 478px; - background: rgba($color: #05213b, $alpha: .85) - } - .mainVideoList{ - position: absolute; - z-index: 10; - right: 10px; - top: 760px; - width: 478px; - height:200px; - background: rgba($color: #05213b, $alpha: .85); -} + .eventNum { width: 245px; height: 92px; @@ -876,21 +765,6 @@ export default { } } } - .keyAreas { - width: 100px; - height: 40px; - position: absolute; - cursor: pointer; - top: 110px; - left: 498px; - z-index: 1000; - background-color: #1A69B2; - text-align: center; - padding: 6px 0 13px 0; - font-size: 16px; - color:#fff; - } - .videoList { position: absolute; @@ -905,18 +779,9 @@ export default { .siteList { position: absolute; z-index: 10; - left: 498px; - top: 175px; - width: 574px; - height:500px; - background: rgba($color: #05213b, $alpha: .85); - } - .siteList1 { - position: absolute; - z-index: 10; - right: 498px; - top: 185px; - width: 374px; + right: 8px; + top: 562px; + width: 398px; height:500px; background: rgba($color: #05213b, $alpha: .85); } diff --git a/src/views/pages/areaMonitor/components/ComplaintEvent.vue b/src/views/pages/areaMonitor/components/ComplaintEvent.vue new file mode 100644 index 0000000..a7aa8a0 --- /dev/null +++ b/src/views/pages/areaMonitor/components/ComplaintEvent.vue @@ -0,0 +1,543 @@ + + + diff --git a/src/views/pages/areaMonitor/components/EarlyWarning.vue b/src/views/pages/areaMonitor/components/EarlyWarning.vue new file mode 100644 index 0000000..d19c1ac --- /dev/null +++ b/src/views/pages/areaMonitor/components/EarlyWarning.vue @@ -0,0 +1,429 @@ + + + + + \ No newline at end of file diff --git a/src/views/pages/areaMonitor/components/HorizonTimeLine.vue b/src/views/pages/areaMonitor/components/HorizonTimeLine.vue new file mode 100644 index 0000000..1972eb4 --- /dev/null +++ b/src/views/pages/areaMonitor/components/HorizonTimeLine.vue @@ -0,0 +1,170 @@ + + + \ No newline at end of file diff --git a/src/views/pages/areaMonitor/components/ImportantAreaPop.vue b/src/views/pages/areaMonitor/components/ImportantAreaPop.vue new file mode 100644 index 0000000..433b9f7 --- /dev/null +++ b/src/views/pages/areaMonitor/components/ImportantAreaPop.vue @@ -0,0 +1,1132 @@ + + + + diff --git a/src/views/pages/areaMonitor/components/ImportantAreaPopBack.vue b/src/views/pages/areaMonitor/components/ImportantAreaPopBack.vue new file mode 100644 index 0000000..df87287 --- /dev/null +++ b/src/views/pages/areaMonitor/components/ImportantAreaPopBack.vue @@ -0,0 +1,511 @@ + + + + diff --git a/src/views/pages/areaMonitor/components/SiteList.vue b/src/views/pages/areaMonitor/components/SiteList.vue new file mode 100644 index 0000000..a698624 --- /dev/null +++ b/src/views/pages/areaMonitor/components/SiteList.vue @@ -0,0 +1,399 @@ + + + diff --git a/src/views/pages/areaMonitor/components/SiteListMore.vue b/src/views/pages/areaMonitor/components/SiteListMore.vue new file mode 100644 index 0000000..a6c197a --- /dev/null +++ b/src/views/pages/areaMonitor/components/SiteListMore.vue @@ -0,0 +1,451 @@ + + + + \ No newline at end of file diff --git a/src/views/pages/areaMonitor/components/StatisticalAnalysis.vue b/src/views/pages/areaMonitor/components/StatisticalAnalysis.vue new file mode 100644 index 0000000..1749866 --- /dev/null +++ b/src/views/pages/areaMonitor/components/StatisticalAnalysis.vue @@ -0,0 +1,765 @@ + + + + + diff --git a/src/views/pages/areaMonitor/components/VideoList.vue b/src/views/pages/areaMonitor/components/VideoList.vue new file mode 100644 index 0000000..2d5b570 --- /dev/null +++ b/src/views/pages/areaMonitor/components/VideoList.vue @@ -0,0 +1,376 @@ + + + diff --git a/src/views/pages/areaMonitor/components/VideoListLeft.vue b/src/views/pages/areaMonitor/components/VideoListLeft.vue new file mode 100644 index 0000000..ccbbbce --- /dev/null +++ b/src/views/pages/areaMonitor/components/VideoListLeft.vue @@ -0,0 +1,101 @@ + + + + \ No newline at end of file diff --git a/src/views/pages/areaMonitor/components/VideoListRight.vue b/src/views/pages/areaMonitor/components/VideoListRight.vue new file mode 100644 index 0000000..735705e --- /dev/null +++ b/src/views/pages/areaMonitor/components/VideoListRight.vue @@ -0,0 +1,535 @@ + + + + \ No newline at end of file diff --git a/src/views/pages/areaMonitor/components/VideoPlay.vue b/src/views/pages/areaMonitor/components/VideoPlay.vue new file mode 100644 index 0000000..f9aec22 --- /dev/null +++ b/src/views/pages/areaMonitor/components/VideoPlay.vue @@ -0,0 +1,409 @@ + + + + + + + + diff --git a/src/views/pages/areaMonitor/components/tiledMap.vue b/src/views/pages/areaMonitor/components/tiledMap.vue new file mode 100644 index 0000000..ba9b34c --- /dev/null +++ b/src/views/pages/areaMonitor/components/tiledMap.vue @@ -0,0 +1,52 @@ + + + + \ No newline at end of file diff --git a/src/views/pages/areaMonitor/index.vue b/src/views/pages/areaMonitor/index.vue new file mode 100644 index 0000000..a3fd255 --- /dev/null +++ b/src/views/pages/areaMonitor/index.vue @@ -0,0 +1,1063 @@ + + + + +