From 0cfd460156a1cdd37a5cf6293951e538bb83fc4c Mon Sep 17 00:00:00 2001 From: liqi <1174845810@qq.com> Date: Sat, 12 Apr 2025 23:15:32 +0800 Subject: [PATCH] 1 --- public/config.js | 11 + public/index.html | 58 +-- src/api/whitList.js | 33 ++ src/assets/css/element-ui.scss | 19 +- src/assets/css/index.scss | 9 +- src/components/myForm.vue | 2 +- src/components/myMars.vue | 2 +- src/views/contentData/RightSidebar/index.vue | 41 +- src/views/contentData/headerTop/index.vue | 17 +- src/views/contentData/index.js | 176 ++++----- src/views/mapControl/index.vue | 24 ++ src/views/menuData/AlertDialog.vue | 2 + src/views/menuData/DeviceDialog.vue | 38 +- src/views/menuData/PermissionDialog.vue | 2 + src/views/menuData/PositionDialog.vue | 4 +- src/views/menuData/WhitListDialog.vue | 381 +++++++++++++++++++ 16 files changed, 652 insertions(+), 167 deletions(-) create mode 100644 public/config.js create mode 100644 src/api/whitList.js create mode 100644 src/views/menuData/WhitListDialog.vue diff --git a/public/config.js b/public/config.js new file mode 100644 index 0000000..ef851ba --- /dev/null +++ b/public/config.js @@ -0,0 +1,11 @@ +const isCamera = false; // 是否开启相机限制 +const cameraLon = 116.3974; +const cameraLat = 39.9042; +const cameraRadius = 40000; + +window.mapConfig = { + isCamera: isCamera, + cameraLon: cameraLon, + cameraLat: cameraLat, + cameraRadius: cameraRadius +}; diff --git a/public/index.html b/public/index.html index 789fc87..9b90c80 100644 --- a/public/index.html +++ b/public/index.html @@ -1,36 +1,42 @@ - - - - - - - <%= htmlWebpackPlugin.options.title %> - - - - - - - - + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + + + + + + + + + - - + - - - -
- - - + + + + +
+ + + + \ No newline at end of file diff --git a/src/api/whitList.js b/src/api/whitList.js new file mode 100644 index 0000000..83e09cc --- /dev/null +++ b/src/api/whitList.js @@ -0,0 +1,33 @@ +import request from "@/utils/request"; + +export function whitListList(data) { + return request({ + url: "/api/WhitList/list", + method: "get", + params: data + }); +} + +export function whitListAdd(data) { + return request({ + url: "/api/WhitList/add", + method: "post", + data + }); +} + +export function whitListUpdate(data) { + return request({ + url: "/api/WhitList/update", + method: "post", + data + }); +} + +export function whitListDelete(data) { + return request({ + url: "/api/WhitList/delete", + method: "delete", + params: data + }); +} diff --git a/src/assets/css/element-ui.scss b/src/assets/css/element-ui.scss index edb8179..9a83cfb 100644 --- a/src/assets/css/element-ui.scss +++ b/src/assets/css/element-ui.scss @@ -315,6 +315,9 @@ .el-time-spinner__item.active:not(.disabled) { color: #fff; } +.el-time-panel { + width: 100%; +} .el-time-panel__btn { color: #fff; } @@ -464,6 +467,16 @@ .el-cascader { width: 100%; } + .el-date-editor { + width: 100% !important; + .el-range-input { + background-color: transparent; + color: #fff; + } + .el-range-separator { + color: #fff; + } + } .avatar-uploader { width: 100%; text-align: left; @@ -510,7 +523,11 @@ .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div { - background-color: rgb(50, 77, 109) !important; + background-color: rgb(13, 49, 211) !important; +} +.el-date-range-picker__time-picker-wrap { + border: 1px solid #ccc; + border-radius: 5px; } .el-time-range-picker__header { color: #fff; diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index 50118c8..5a72280 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -119,11 +119,11 @@ body { margin-right: 40px; margin-top: 10px; .menuItem { - width: 283px; + width: 305px; display: flex; align-items: center; justify-content: space-between; - margin-right: 20px; + margin-right: 10px; .menuFor { width: 41px; height: 41px; @@ -363,11 +363,14 @@ body { display: flex; align-items: center; flex-wrap: wrap; - justify-content: center; + justify-content: flex-start; + align-content: flex-start; .device-item { //一排三个 width: 30%; height: 30%; + margin-left: 3%; + margin-top: 2%; .device-icon { width: 66px; height: 66px; diff --git a/src/components/myForm.vue b/src/components/myForm.vue index 38f6b49..14f3395 100644 --- a/src/components/myForm.vue +++ b/src/components/myForm.vue @@ -519,7 +519,7 @@ export default { deviceManufacturerQuery() { return this.deviceManufacturer; }, - // 根据城市编码查询地图位置 + changeCascader(row) { console.log(row); }, diff --git a/src/components/myMars.vue b/src/components/myMars.vue index 3ed2a44..13de268 100644 --- a/src/components/myMars.vue +++ b/src/components/myMars.vue @@ -156,7 +156,7 @@ export default { this.mapMars.clock.stopTime = stop.clone(); this.mapMars.clock.currentTime = start.clone(); // eslint-disable-next-line no-undef - this.mapMars.clock.clockRange = Cesium.ClockRange.UNBOUNDED; + this.mapMars.clock.clockRange = Cesium.ClockRange.LOOP_STOP; this.mapMars.clock.multiplier = 1; if (this.mapMars.controls.timeline) { this.mapMars.controls.timeline.zoomTo(start, stop); diff --git a/src/views/contentData/RightSidebar/index.vue b/src/views/contentData/RightSidebar/index.vue index 94e2ed2..49f22d0 100644 --- a/src/views/contentData/RightSidebar/index.vue +++ b/src/views/contentData/RightSidebar/index.vue @@ -73,26 +73,39 @@ export default { deviceStatus: [], positionData: [], isContracted: false, - homeView: {} + lastPositionsHash: null // 初始化为 null，避免首次误判 }; }, watch: { - homeData: { - handler(newVal) { - this.homeView = newVal; - this.positionData = newVal.positions; + "homeData.positions": { + handler(newPositions) { + newPositions = newPositions || []; + + const currentHash = JSON.stringify(newPositions); + + // 比较新旧数据（首次加载时 lastPositionsHash 为 null） + if ( + this.lastPositionsHash !== null && + currentHash === this.lastPositionsHash + ) { + return; + } + + // 数据变化或首次加载 + if (newPositions.length > 0) { + this.lastPositionsHash = currentHash; // 更新缓存 + this.positionData = newPositions; + this.homeView = this.homeData; + this.$nextTick(() => { + console.log("Calling handleTitleClick due to positions change"); + this.handleTitleClick(true, "all"); + }); + } }, - deep: true + immediate: true // 初始加载时触发 } }, - mounted() { - let time = setInterval(() => { - if (this.positionData.length > 0) { - clearInterval(time); - this.handleTitleClick(true, "all"); - } - }, 500); - }, + mounted() {}, methods: { handleContractClick() { this.isContracted = !this.isContracted; // 切换状态 diff --git a/src/views/contentData/headerTop/index.vue b/src/views/contentData/headerTop/index.vue index ee55f59..33acf18 100644 --- a/src/views/contentData/headerTop/index.vue +++ b/src/views/contentData/headerTop/index.vue @@ -111,6 +111,7 @@ import LogDialog from "../../menuData/LogDialog.vue"; // ID: 3 import AlertDialog from "../../menuData/AlertDialog.vue"; // ID: 5 import PositionDialog from "../../menuData/PositionDialog.vue"; // ID: 6 import AnalysisDialog from "../../menuData/AnalysisDialog.vue"; // ID: 7 +import WhitListDialog from "../../menuData/WhitListDialog.vue"; // ID: 8 import { userUpdatepwd } from "@/api/user.js"; export default { name: "header-top", @@ -120,7 +121,8 @@ export default { LogDialog, AlertDialog, PositionDialog, - AnalysisDialog + AnalysisDialog, + WhitListDialog }, props: { homeData: { @@ -172,6 +174,12 @@ export default { name: "统计分析", icon: require("@/assets/img/menu/tjfx.png"), iconActive: require("@/assets/img/menu/tjfx-hove.png") + }, + { + id: 8, + name: "白名单", + icon: require("@/assets/img/menu/tjfx.png"), + iconActive: require("@/assets/img/menu/tjfx-hove.png") } ], quanping: [ @@ -303,6 +311,9 @@ export default { this.currentDialog = "LogDialog"; this.showDialog = true; break; + case 4: + this.showDialog = false; + break; case 5: this.currentDialog = "AlertDialog"; this.showDialog = true; @@ -315,9 +326,9 @@ export default { this.currentDialog = "AnalysisDialog"; this.showDialog = true; break; - case 4: case 8: - this.showDialog = false; + this.currentDialog = "WhitListDialog"; + this.showDialog = true; break; } }, diff --git a/src/views/contentData/index.js b/src/views/contentData/index.js index 3987411..050c7cf 100644 --- a/src/views/contentData/index.js +++ b/src/views/contentData/index.js @@ -277,103 +277,73 @@ export function mapUavFiex(options) { graphicLayer.remove(); } else { options.forEach((item) => { - let graphic = graphicLayer.getGraphicById(item.BatchId); - // let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点 + if (item.drone_lon !== 0 || item.drone_lat !== 0) { + let graphic = graphicLayer.getGraphicById(item.BatchId); + // let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点 - //发现无人机 - if (!graphic) { - // eslint-disable-next-line no-undef - graphic = new mars3d.graphic.Route({ - id: item.BatchId, - name: "无人机", - maxCacheCount: -1, - polyline: { - width: 2, - opacity: 1, - randomColor: true, - show: true - }, - billboard: { - image: require("@/assets/img/uav.svg"), - scale: 0.5, - horizontalOrigin: Cesium.HorizontalOrigin.CENTER, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM - }, + //发现无人机 + if (!graphic) { + // eslint-disable-next-line no-undef + graphic = new mars3d.graphic.Route({ + id: item.BatchId, + name: "无人机", + maxCacheCount: -1, + polyline: { + width: 2, + opacity: 1, + randomColor: true, + show: true + }, + billboard: { + image: require("@/assets/img/uav.svg"), + scale: 0.5, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM + }, - attr: item - }); - graphicLayer.addGraphic(graphic); + attr: item + }); + graphicLayer.addGraphic(graphic); + } + + graphic.attr = item; + bindLayerPopup(graphicLayer, graphic); } - graphic.attr = item; - bindLayerPopup(graphicLayer, graphic); + if (item.app_lon !== 0 || item.app_lat !== 0) { + let app_graphic = graphicLayer.getGraphicById(item.BatchId + "_app"); + // let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点 + //发现飞手 + if (!app_graphic) { + // eslint-disable-next-line no-undef + app_graphic = new mars3d.graphic.Route({ + id: item.BatchId + "_app", + name: "飞手", + maxCacheCount: -1, + label: { + text: "飞手位置", + font_size: 14, + font_family: "微软雅黑" + }, + polyline: { + width: 2, + opacity: 1, + randomColor: true, + show: true + }, + point: { + color: "#00ffff", + pixelSize: 8, + outlineColor: "#ffffff", + outlineWidth: 2 + }, - let app_graphic = graphicLayer.getGraphicById(item.BatchId + "_app"); - // let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点 - - //发现无人机 - if (!app_graphic) { - // eslint-disable-next-line no-undef - app_graphic = new mars3d.graphic.Route({ - id: item.BatchId + "_app", - name: "飞手", - maxCacheCount: -1, - label: { - text: "飞手位置", - font_size: 14, - font_family: "微软雅黑" - }, - polyline: { - width: 2, - opacity: 1, - randomColor: true, - show: true - }, - point: { - color: "#00ffff", - pixelSize: 8, - outlineColor: "#ffffff", - outlineWidth: 2 - }, - - attr: item - }); - graphicLayer.addGraphic(app_graphic); + attr: item + }); + graphicLayer.addGraphic(app_graphic); + } } - // 起始点位 - // if (item.lon !== 0 && item.lat !== 0) { - // if (!startPoint) { - // // eslint-disable-next-line no-undef - // startPoint = new mars3d.graphic.BillboardEntity({ - // id: item.BatchId + "start", - // // eslint-disable-next-line no-undef - // position: new mars3d.LngLatPoint(item.lon, item.lat, item.alt), - // style: { - // image: require("@/assets/img/uav.svg"), - // scale: 1, - // // eslint-disable-next-line no-undef - // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, - // // eslint-disable-next-line no-undef - // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - // label: { - // text: "起始点", - // font: "14px Arial", - // color: "#ffffff", - // outline: true, - // outlineColor: "#000000", - // outlineWidth: 2, - // // eslint-disable-next-line no-undef - // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, - // // eslint-disable-next-line no-undef - // verticalOrigin: Cesium.VerticalOrigin.BOTTOM - // } - // }, - // show: false, - // attr: item - // }); - // graphicLayer.addGraphic(startPoint); - // } - // } + // 更新发现无人机设备的大小 let graphicDevice = window.marsMap.getLayerById("devLog"); if (graphicDevice) { let deviceGraphic = graphicDevice.getGraphicById(item.DeviceId); @@ -391,17 +361,21 @@ export function mapUavFiex(options) { // 取出对应无人机的轨迹列表 options.map((item) => { if (item.BatchId === car.id) { - // eslint-disable-next-line no-undef - const point = new mars3d.LngLatPoint( - item.drone_lon, - item.drone_lat, - item.height - ); - car.addDynamicPosition(point, 0); + if (item.drone_lon !== 0 || item.drone_lat !== 0) { + // eslint-disable-next-line no-undef + const point = new mars3d.LngLatPoint( + item.drone_lon, + item.drone_lat, + item.height + ); + car.addDynamicPosition(point, 0); + } } else if (item.BatchId + "_app" === car.id) { - // eslint-disable-next-line no-undef - const point = new mars3d.LngLatPoint(item.app_lon, item.app_lat, 0); - car.addDynamicPosition(point, 0); + if (item.app_lon !== 0 || item.app_lat !== 0) { + // eslint-disable-next-line no-undef + const point = new mars3d.LngLatPoint(item.app_lon, item.app_lat, 0); + car.addDynamicPosition(point, 0); + } } }); }); diff --git a/src/views/mapControl/index.vue b/src/views/mapControl/index.vue index 2000359..3eae288 100644 --- a/src/views/mapControl/index.vue +++ b/src/views/mapControl/index.vue @@ -55,6 +55,10 @@ export default { // eslint-disable-next-line no-undef map.on(mars3d.EventType.click, this.map_clickHandler, map); map.on(mars3d.EventType.cameraMoveEnd, this.map_zoomHandler, map); + // map.scene.screenSpaceCameraController.enableTranslate = false; + // map.scene.screenSpaceCameraController.enableRotate = false; // 禁用旋转 + // map.scene.screenSpaceCameraController.enableTilt = false; // 禁用倾斜 + // map.scene.screenSpaceCameraController.enableZoom = false; // 禁用缩放 }, map_clickHandler(event) { console.log(event); @@ -72,6 +76,26 @@ export default { }, onMapLoad(map) { map.changeMouseModel(true); + // 在地图初始化后禁用平移 + let camera = window.mapConfig; + console.log(camera, "camera"); + if (camera.isCamera) { + let cameraHistory = new mars3d.thing.CameraHistory({ + limit: { + // 限定视角范围 + position: Cesium.Cartesian3.fromDegrees( + camera.cameraLon, + camera.cameraLat, + 0 + ), + radius: camera.cameraRadius, + debugExtent: false + } + }); + map.addThing(cameraHistory); + map.scene.screenSpaceCameraController.minimumZoomDistance = 1000; //相机的高度的最小值 + map.scene.screenSpaceCameraController.maximumZoomDistance = 500000; //相机高度的最大值 + } } } }; diff --git a/src/views/menuData/AlertDialog.vue b/src/views/menuData/AlertDialog.vue index e87b9e1..61854dc 100644 --- a/src/views/menuData/AlertDialog.vue +++ b/src/views/menuData/AlertDialog.vue @@ -45,6 +45,8 @@ :visible.sync="drawer" append-to-body direction="rtl" + :wrapperClosable="false" + :close-on-press-escape="false" >
diff --git a/src/views/menuData/DeviceDialog.vue b/src/views/menuData/DeviceDialog.vue index f028228..7a28c98 100644 --- a/src/views/menuData/DeviceDialog.vue +++ b/src/views/menuData/DeviceDialog.vue @@ -72,6 +72,8 @@ :visible.sync="drawer" append-to-body direction="rtl" + :wrapperClosable="false" + :close-on-press-escape="false" >
+
+
+ + +
+
+ + 查询 + + + 新增 + +
+
+ + +
+ +
+ + +
+ +
+ + + +