This commit is contained in:
liqi 2025-04-02 00:12:21 +08:00
parent 80c519f45e
commit 6b0612c890
17 changed files with 577 additions and 226 deletions

View File

@ -1,82 +0,0 @@
## 图层切换树组件配置文件说明
```
treeConfig.json: 主页及其二级页面图层切换树结构,具体可以看现有示例。
{
homePage: [ //homePage、positionEquipment、airspace... :主页及其二级页面名称
{
"name": "全部" //名称:全部、阵地设备、... (必须)
"show": false //初始化显隐状态 (必须)
"icon": "qb.png" //图标,位置在views/mapControl/map/map.js (必须)
"type": "all" //带表该节点为全部,勾选时会将其他所有节点选中状态 (非必须)
"apiParam": "1" //存在apiParam节点则认为该节点的所有子节点是通过请求接口数据请求参数为1 (非必须)
"children": [] //二级节点,该节点不需要通过请求时,可配置静态节点,如二三维度,行政区划图层等(非必须)
"legendOptions": { //图例配置,当该节点及其子节点中展示状态时,展示图例内容(非必须)
"legendData": [//图例数据
{
"name": "适飞空域", //图例名称
"color": "rgba(126, 192, 80, 1)" //图例颜色,颜色或图标二选一
"icon": "qb.png" //图例图标,颜色或图标二选一
}
]
}
}
]
}
mapLayer.json: 请求回来的节点数据,配置图层样式及气泡等内容
{
"1": [ //图层接口请求参数对应的图层样式
"name": "反制设备", //要与接口请求回来的节点名称一直
"show": true, //现有状态
"children": [ //子节点
{
"name": "全向干扰", //子节点名称,要与接口返回对应
"show": true, //显隐状态
"popup": { //气泡配置
"templateName": "positionTemplate", //要使用的气泡模板
"width": 310, //气泡宽度
"height": 170 //气泡高度
},
"render": { //图层专题展示
"type": "simple", //简单专题symbol数组类型时key代表数据中字段value代表值对象类型则有数据源中存在空间数据就行.其他类型还有circleWave覆盖范围圆、heatMap热力图、administrativeRegion行政区划、2D二维、3D三维等,详细看示例
"symbol": [
{
"key": "onlineStatus", //数据中的字段
"value": "0", //字段的值
"type": "point", //点类型
"style": { //点样式
"url": "fzsb-qxgr.png", //点图标
"width": 36, //图标宽度
"height": 53 //图标高度
}
},
{
"key": "onlineStatus",
"value": "1",
"type": "point",
"style": {
"url": "fzsb-qxgr-off.png",
"width": 36,
"height": 53
}
}
]
}
}
]
]
}
mapLayer.json
type是数据类型 circleWave(圆) point(点)
symbol是数组 里面有在线和离线的图标 通过value来区分
treeConfig.json
节点带apiParam代表该节点的内容要通过请求覆盖
legendOptions是在图层上面展示图例
名字是根据不同的二级页面 展示不同的图层内容
在图层增加数据时 需要在所有同样的二级菜单下增加相同的数据
```
在iframe里面部署之后 根据配置更改的字段标识 ***_***

View File

@ -1,7 +1,7 @@
import request from "@/utils/request";
export function Homeview(data) {
let url = "/api/Home/view";
let url = "/api/Home/index";
return request({
url: url,
method: "get",

5
src/assets/img/uav.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="5.02148" y="27.1299" width="32.1548" height="32.1548" transform="rotate(-45 5.02148 27.1299)" fill="#F32624" fill-opacity="0.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.585938 27.1299L7.6912 20.0247L9.11225 21.4457L3.42804 27.1299L9.11225 32.8142L7.6912 34.2352L0.585938 27.1299ZM27.5859 2.97205L21.9017 8.65626L20.4807 7.23521L27.5859 0.129945L34.6912 7.23521L33.2701 8.65626L27.5859 2.97205ZM27.5859 51.2878L21.9017 45.6036L20.4807 47.0247L27.5859 54.1299L34.6912 47.0247L33.2701 45.6036L27.5859 51.2878ZM51.7438 27.1299L46.0596 21.4457L47.4807 20.0247L54.5859 27.1299L47.4807 34.2352L46.0596 32.8142L51.7438 27.1299Z" fill="#F32624"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.4553 21.5456C25.4553 19.939 24.1529 18.6365 22.5463 18.6365C20.9396 18.6365 19.6372 19.939 19.6372 21.5456C19.6372 23.1523 20.9396 24.4547 22.5463 24.4547C22.9479 24.4547 23.2735 24.7803 23.2735 25.182C23.2735 25.5836 22.9479 25.9093 22.5463 25.9093C20.1363 25.9093 18.1826 23.9556 18.1826 21.5456C18.1826 19.1356 20.1363 17.182 22.5463 17.182C24.9562 17.182 26.9099 19.1356 26.9099 21.5456C26.9099 21.9473 26.5843 22.2729 26.1826 22.2729C25.781 22.2729 25.4553 21.9473 25.4553 21.5456ZM33.4548 18.6365C31.8482 18.6365 30.5457 19.939 30.5457 21.5456C30.5457 21.9473 30.2201 22.2729 29.8185 22.2729C29.4168 22.2729 29.0912 21.9473 29.0912 21.5456C29.0912 19.1356 31.0449 17.182 33.4548 17.182C35.8648 17.182 37.8185 19.1356 37.8185 21.5456C37.8185 23.9556 35.8648 25.9093 33.4548 25.9093C33.0532 25.9093 32.7276 25.5836 32.7276 25.182C32.7276 24.7803 33.0532 24.4547 33.4548 24.4547C35.0615 24.4547 36.3639 23.1523 36.3639 21.5456C36.3639 19.939 35.0615 18.6365 33.4548 18.6365ZM33.4997 33.6006C33.5997 33.7006 33.7997 33.8006 33.9997 33.8006C34.1997 33.8006 34.3997 33.7006 34.5997 33.5006C34.8997 33.2006 34.8997 32.7006 34.5997 32.4006L31.2999 29.1007V24.7088L34.5997 21.5006C34.8997 21.2006 34.8997 20.7006 34.5997 20.4006C34.2997 20.1006 33.7997 20.1006 33.4997 20.4006L30.3007 23.5996H25.6211L22.5997 20.4006C22.2997 20.1006 21.7997 20.1006 21.4997 20.4006C21.1997 20.7006 21.1997 21.2006 21.4997 21.5006L24.6999 24.7007V29.3004L21.4997 32.5006C21.1997 32.8006 21.1997 33.3006 21.4997 33.6006C21.5997 33.7006 21.7997 33.8006 21.9997 33.8006C22.1997 33.8006 22.3997 33.7006 22.5997 33.6006L26.0007 30.1996H30.1933L33.4997 33.6006ZM29.6999 28.7996H26.1999V25.2996H29.6999V28.7996ZM33.4548 35.3638C31.8482 35.3638 30.5457 34.0614 30.5457 32.4547C30.5457 32.0531 30.2201 31.7275 29.8185 31.7275C29.4168 31.7275 29.0912 32.0531 29.0912 32.4547C29.0912 34.8647 31.0449 36.8184 33.4548 36.8184C35.8648 36.8184 37.8185 34.8647 37.8185 32.4547C37.8185 30.0448 35.8648 28.0911 33.4548 28.0911C33.0532 28.0911 32.7276 28.4167 32.7276 28.8184C32.7276 29.22 33.0532 29.5456 33.4548 29.5456C35.0615 29.5456 36.3639 30.8481 36.3639 32.4547C36.3639 34.0614 35.0615 35.3638 33.4548 35.3638ZM25.4553 32.4547C25.4553 34.0614 24.1529 35.3638 22.5463 35.3638C20.9396 35.3638 19.6372 34.0614 19.6372 32.4547C19.6372 30.8481 20.9396 29.5456 22.5463 29.5456C22.9479 29.5456 23.2735 29.22 23.2735 28.8184C23.2735 28.4167 22.9479 28.0911 22.5463 28.0911C20.1363 28.0911 18.1826 30.0448 18.1826 32.4547C18.1826 34.8647 20.1363 36.8184 22.5463 36.8184C24.9562 36.8184 26.9099 34.8647 26.9099 32.4547C26.9099 32.0531 26.5843 31.7275 26.1826 31.7275C25.781 31.7275 25.4553 32.0531 25.4553 32.4547Z" fill="#F0F0F0"/>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/img/uavimg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

View File

@ -82,11 +82,11 @@ export default {
]
});
//
//
const directionRadar = echarts.init(this.$refs.directionRadar);
directionRadar.setOption({
title: {
text: "阵地统计",
text: "防区统计",
left: "center",
//
textStyle: {
@ -102,7 +102,7 @@ export default {
},
series: [
{
name: "阵地",
name: "防区",
type: "pie",
radius: "50%",
data: this.chartData.position

View File

@ -103,21 +103,29 @@ export default {
// eslint-disable-next-line no-undef
property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD;
const app_property = new Cesium.SampledPositionProperty();
// eslint-disable-next-line no-undef
app_property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD;
let start;
let stop;
for (let i = 0, len = mapList.length; i < len; i++) {
const item = mapList[i];
const lng = Number(item.lon); //
const lat = Number(item.lat); //
const app_lng = Number(item.app_lon); //
const app_lat = Number(item.app_lat); //
const height = item.alt || 5; // 5 geojson
const outputDate = item.createTime.replace(" ", "T");
const time = outputDate; //
let position = null;
let app_position = null;
if (lng !== 0 && lat !== 0) {
if (lng && lat) {
// eslint-disable-next-line no-undef
position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
app_position = Cesium.Cartesian3.fromDegrees(app_lng, app_lat, 0);
}
let juliaDate = null;
if (time) {
@ -127,6 +135,9 @@ export default {
if (position && juliaDate) {
property.addSample(juliaDate, position);
}
if (app_position && juliaDate) {
app_property.addSample(juliaDate, app_position);
}
if (i === 0) {
start = juliaDate;
@ -166,7 +177,7 @@ export default {
position: property,
orientation: new Cesium.VelocityOrientationProperty(property),
billboard: {
image: require("@/views/mapControl/img/yj1.png"),
image: require("@/assets/img/uav.svg"),
scale: 0.5,
minimumPixelSize: 30,
distanceDisplayCondition_far: 1000000,
@ -185,6 +196,35 @@ export default {
});
this.graphicLayer.addGraphic(pathEntity);
}
//
let app_pathEntity = this.graphicLayer.getGraphicById(
"pathIdsss" + "_app"
);
if (!app_pathEntity) {
app_pathEntity = new mars3d.graphic.ModelEntity({
id: "pathIdsss" + "_app",
position: app_property,
orientation: new Cesium.VelocityOrientationProperty(app_property),
point: {
color: "#00ffff",
pixelSize: 8,
outlineColor: "#ffffff",
outlineWidth: 2
},
path: {
width: 2,
color: "#FF0000"
},
style: {
label: {
text: "飞手位置",
font_size: 14,
font_family: "微软雅黑"
}
}
});
this.graphicLayer.addGraphic(app_pathEntity);
}
},
clearDraw() {
if (this.graphics) {

View File

@ -11,21 +11,25 @@
<img src="@/assets/img/uavTitle.png" alt="" />
</div>
<ul>
<li v-for="(drone, index) in drones" :key="index">
<li
v-for="(drone, index) in drones"
:key="index"
@click="handleDroneClick(drone)"
>
<div class="top">
<div class="left">
{{ index < 9 ? "0" + (index + 1) : index + 1 }}
</div>
<div class="text">{{ drone.id }}</div>
<div class="text">{{ drone.serial_number }}</div>
</div>
<div class="main">
<div class="top_main">
<div class="text">时间{{ drone.time }}</div>
<div class="text">来源{{ drone.source }}</div>
<div class="text">时间{{ drone.times }}</div>
<div class="text">来源{{ drone.DeviceName }}</div>
</div>
<div class="top_main">
<div class="text">频段{{ drone.sn }}</div>
<div class="text">型号{{ drone.model }}</div>
<div class="text">频段{{ drone.freq }}</div>
<div class="text">型号{{ drone.device_type }}</div>
</div>
</div>
</li>
@ -38,12 +42,18 @@
</template>
<script>
import moment from "moment";
import { mapUavFiex } from "../index.js";
export default {
name: "LeftSidebar",
props: {
homeData: {
type: Object,
default: () => ({})
},
signaData: {
type: Array,
default: () => []
}
},
data() {
@ -72,59 +82,10 @@ export default {
value: 0
}
],
drones: [
{
id: "781DE06",
time: "10:34:26",
model: "大疆精灵4P",
source: "信号源1",
sn: "SN123456789"
},
{
id: "781DE06",
time: "10:34:26",
model: "大疆精灵4P",
source: "信号源1",
sn: "SN123456789"
},
{
id: "781DE06",
time: "10:34:26",
model: "大疆精灵4P",
source: "信号源1",
sn: "SN123456789"
},
{
id: "781DE06",
time: "10:34:26",
model: "大疆精灵4P",
source: "信号源1",
sn: "SN123456789"
},
{
id: "781DE06",
time: "10:34:26",
model: "大疆精灵4P",
source: "信号源1",
sn: "SN123456789"
},
{
id: "781DE06",
time: "10:34:26",
model: "大疆精灵4P",
source: "信号源1",
sn: "SN123456789"
},
{
id: "781DE06",
time: "10:34:26",
model: "大疆精灵4P",
source: "信号源1",
sn: "SN123456789"
}
],
drones: [],
isContracted: false,
homeView: {}
homeView: {},
droneTimers: new Map()
};
},
watch: {
@ -137,11 +98,137 @@ export default {
this.warningDay[3].value = newVal.alarmCount.totalhandle;
},
deep: true
},
signaData: {
handler(newVal) {
if (newVal) {
newVal.forEach((newItem) => {
// BatchId
if (newItem.BatchId) {
const existingTimer = this.droneTimers.get(newItem.BatchId);
if (existingTimer) {
clearInterval(existingTimer); //
}
// 15
newItem.currTime = 15000;
//
const timer = this.startTimer(newItem);
this.droneTimers.set(newItem.BatchId, timer);
//
const existingIndex = this.drones.findIndex(
(d) => d.BatchId === newItem.BatchId
);
newItem.times = moment(newItem.CreateTime).format("HH:mm:ss");
if (existingIndex !== -1) {
this.$set(this.drones, existingIndex, { ...newItem });
} else {
this.drones.push({ ...newItem });
}
}
});
if (this.drones) {
mapUavFiex(this.drones);
}
console.log(this.drones, "newVal");
}
},
deep: true
}
},
methods: {
startTimer(item) {
return setInterval(() => {
if (item.currTime > 0) {
item.currTime--;
//
const index = this.drones.findIndex(
(d) => d.BatchId === item.BatchId
);
if (index !== -1) {
this.$set(this.drones, index, { ...item });
}
} else {
clearInterval(this.droneTimers.get(item.BatchId));
this.droneTimers.delete(item.BatchId);
this.handleTimerExpiration(item);
}
}, 1000);
},
handleTimerExpiration(item) {
// drones
// drones
if (this.drones.length === 1) {
this.drones = [];
} else {
this.drones = this.drones.filter((d) => d.BatchId !== item.BatchId);
}
//
let graphicLayer = window.marsMap.getLayerById("uavFiex");
if (graphicLayer) {
let graphic = graphicLayer.getGraphicById(item.BatchId);
let startPoint = graphicLayer.getGraphicById(item.BatchId + "start");
if (graphic) {
graphic.destroy();
graphicLayer.removeGraphic(graphic);
}
if (startPoint) {
graphicLayer.removeGraphic(startPoint);
}
if (this.drones.length === 0) {
window.marsMap.removeLayer(graphicLayer);
}
}
},
handleContractClick() {
this.isContracted = !this.isContracted; //
},
handleDroneClick(value) {
console.log(value, "value");
window.marsMap.setCameraView({
lat: value.drone_lat,
lng: value.drone_lon,
alt: value.height + 800,
pitch: -90
});
if (value.drone_lon == 0 || value.drone_lat == 0) {
console.log("经纬度为0");
} else {
let graphicLayer = window.marsMap.getLayerById("uavFiex");
// let startPoint = graphicLayer.getGraphicById(value.BatchId + "start");
if (graphicLayer) {
graphicLayer.eachGraphic((car) => {
//
//
if (value.BatchId === car.id) {
// car.openPopup();
console.log(car, "car.polyline");
car.polyline.show = !car.polyline.show; // 线
// if (car.polyline.show) {
// car.setOptions({
// polyline: {
// width: 2,
// opacity: 1,
// }
// });
// } else {
// car.setOptions({
// polyline: {
// width: 2,
// opacity: 0,
// }
// });
// }
}
});
}
}
}
}
};

View File

@ -149,7 +149,7 @@ export default {
},
{
id: 6,
name: "阵地",
name: "防区",
icon: require("@/assets/img/menu/zhendi.png"),
iconActive: require("@/assets/img/menu/zhendi-hove.png")
},

View File

@ -148,42 +148,255 @@ export function allDevices(options, type, show) {
}
}
import imgUav from "@/assets/img/uavimg.png";
//设备广告牌
function bindLayerPopup(graphicLayer, graphic) {
let attr = graphic.attr;
console.log(attr, "attr");
graphic.bindPopup(
` <div class="mians">
<div class="title">${attr.name}</div>
<div class="imgs"><img src="${
attr.img !== null
? process.env.VUE_APP_API_URL + attr.img
: require("@/assets/img/nopic.png")
}" /></div>
<div class="device-type">
<div class="txt">
<p class="p1">经度</p>
<p class="p2">${attr.lon}</p>
</div>
<div class="txt">
<p class="p1">IP</p>
<p class="p2">${attr.ip}</p>
</div>
<div class="txt">
<p class="p1">纬度</p>
<p class="p2">${attr.lat}</p>
</div>
<div class="txt">
<p class="p1">状态</p>
<p class="p2">${attr.state ? "在线" : "离线"}</p>
console.log(attr, graphic, "attr");
if (graphic.name === "无人机") {
graphic.bindPopup(
` <div class="mians" style="height: 410px;">
<div class="title">${attr.device_type}</div>
<div class="imgs"><img src="${imgUav}" /></div>
<div class="device-type" style="margin-top: 8%;">
<div class="txt">
<p class="p1">频段</p>
<p class="p2">${attr.freq}</p>
</div>
<div class="txt">
<p class="p1">距离</p>
<p class="p2" id="lblDistance">${attr.distance}</p>
</div>
<div class="txt">
<p class="p1">型号</p>
<p class="p2">${attr.device_type}</p>
</div>
<div class="txt">
<p class="p1">高度</p>
<p class="p2" id="lblHeight">${attr.height}</p>
</div>
<div class="txt">
<p class="p1">SN码</p>
<p class="p2">${attr.serial_number}</p>
</div>
<div class="txt">
<p class="p1">速度</p>
<p class="p2" id="lblSpeed">${attr.height}</p>
</div>
</div>
</div>
</div>
`,
{
closeButton: false,
hasZIndex: false,
zIndex: 2
}
);
`,
{
closeButton: false,
hasZIndex: false,
zIndex: 2
}
);
graphic.on(mars3d.EventType.popupRender, function (event) {
const container = event.container; // popup对应的DOM
const params = graphic?.attr;
if (!params) {
return;
}
const lblHeight = container.querySelector("#lblHeight");
if (lblHeight) {
lblHeight.innerHTML = params.height + "米";
}
const lblDistance = container.querySelector("#lblDistance");
if (lblDistance) {
lblDistance.innerHTML = Math.round(params.distance) + "米";
}
const lblSpeed = container.querySelector("#lblSpeed");
if (lblSpeed) {
const speeds = [params.speed_E, params.speed_N, params.speed_U].filter(
(speed) => speed !== undefined
);
const maxSpeed = speeds.length > 0 ? Math.max(...speeds) : undefined;
lblSpeed.innerHTML = maxSpeed + "m/s";
}
});
} else if (graphic.name === "飞手") {
} else {
graphic.bindPopup(
` <div class="mians">
<div class="title">${attr.name}</div>
<div class="imgs"><img src="${
attr.img !== null
? process.env.VUE_APP_API_URL + attr.img
: require("@/assets/img/nopic.png")
}" /></div>
<div class="device-type">
<div class="txt">
<p class="p1">经度</p>
<p class="p2">${attr.lon}</p>
</div>
<div class="txt">
<p class="p1">IP</p>
<p class="p2">${attr.ip}</p>
</div>
<div class="txt">
<p class="p1">纬度</p>
<p class="p2">${attr.lat}</p>
</div>
<div class="txt">
<p class="p1">状态</p>
<p class="p2">${attr.state ? "在线" : "离线"}</p>
</div>
</div>
</div>
`,
{
closeButton: false,
hasZIndex: false,
zIndex: 2
}
);
}
}
export function mapUavFiex(options) {
let map = window.marsMap; // 记录map
let graphicLayer = map.getLayerById("uavFiex");
if (!graphicLayer) {
// eslint-disable-next-line no-undef
graphicLayer = new mars3d.layer.GraphicLayer({ id: "uavFiex" });
map.addLayer(graphicLayer);
}
if (options.length === 0) {
graphicLayer.remove();
} else {
options.forEach((item) => {
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
},
attr: item
});
graphicLayer.addGraphic(graphic);
}
graphic.attr = item;
bindLayerPopup(graphicLayer, graphic);
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);
}
// 起始点位
// 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);
console.log(deviceGraphic, "deviceGraphic");
deviceGraphic.setOptions({
style: {
scale: 1.5
}
});
}
});
//绑定气泡弹窗
graphicLayer.eachGraphic((car) => {
// 取出对应无人机的轨迹列表
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);
} else if (item.BatchId + "_app" === car.id) {
console.log(item.app_lon, item.app_lat, "item");
// eslint-disable-next-line no-undef
const point = new mars3d.LngLatPoint(item.app_lon, item.app_lat, 0);
car.addDynamicPosition(point, 0);
}
});
});
}
}

View File

@ -2,7 +2,7 @@
<template>
<div class="app-container">
<headerTop :homeData="homeView" />
<LeftSidebar :homeData="homeView" />
<LeftSidebar :homeData="homeView" :signaData="signaList" />
<RightSidebar :homeData="homeView" />
<Footer />
</div>
@ -26,11 +26,16 @@ export default {
homeData: {
type: Object,
default: () => ({})
},
signaData: {
type: Array,
default: () => []
}
},
data() {
return {
homeView: {}
homeView: {},
signaList: []
};
},
watch: {
@ -39,6 +44,12 @@ export default {
this.homeView = newVal;
},
deep: true
},
signaData: {
handler(newVal) {
this.signaList = newVal;
},
deep: true
}
},
mounted() {}

View File

@ -10,14 +10,15 @@
import mapControl from "./mapControl/index.vue";
import contentData from "./contentData/index.vue";
import { Homeview } from "@/api/home.js";
// import * as signalR from "@microsoft/signalr";
import * as signalR from "@microsoft/signalr";
export default {
name: "HomeIndex",
data() {
return {
signaData: {},
signaData: [],
homeData: {},
timeInterval: null
timeInterval: null,
intervalTime: null
};
},
components: {
@ -25,26 +26,14 @@ export default {
contentData
// whiteListForm
},
created() {},
// watch: {
// signaData: {
// handler(val) {
// if (val) {
// if (val.messageType === "alarm") {
// // this.timeInterval = setTimeout(() => {
// // clearTimeout(this.timeInterval);
// // }, 3000);
// }
// }
// },
// immediate: true
// }
// },
created() {
this.initSocket();
},
mounted() {
this.initHomeData();
this.timeInterval = setInterval(() => {
this.initHomeData();
}, 1000);
}, 2000);
},
methods: {
initHomeData() {
@ -53,6 +42,73 @@ export default {
this.homeData = res.data;
}
});
},
initSocket() {
let connection;
let isReconnecting = false;
let _this = this;
function establishConnection() {
if (connection) {
connection.stop().catch((err) => console.error("停止连接失败:", err));
}
let wPath = window.document.location.href;
let pathName = _this.$route.path;
let pos = wPath.indexOf(pathName);
let localhostPath = wPath.substring(0, pos);
let uploadUrl =
process.env.VUE_APP_API_URL === "/"
? localhostPath
: process.env.VUE_APP_API_URL;
connection = new signalR.HubConnectionBuilder()
.withUrl(uploadUrl + "/notification", {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets
})
.configureLogging(signalR.LogLevel.Information)
.build();
connection.on("ReceiveMessage", function (message) {
if (JSON.parse(message).data !== "hello") {
let { data } = JSON.parse(message);
_this.signaData = data;
}
});
connection.serverTimeoutInMilliseconds = 30 * 60 * 1000;
connection
.start()
.then(() => {
console.log("连接成功!");
isReconnecting = false;
clearInterval(_this.intervalTime);
_this.intervalTime = null;
})
.catch((err) => {
console.error("连接失败:", err.toString());
if (!isReconnecting) {
reconnectWithDelay();
}
});
connection.onclose(() => {
console.log("连接关闭,正在尝试重新连接...");
if (!isReconnecting) {
reconnectWithDelay();
}
});
}
function reconnectWithDelay() {
isReconnecting = true;
_this.intervalTime = setInterval(() => {
console.log("正在尝试重新连接...");
establishConnection();
}, 5000); // 5
}
establishConnection(); //
}
},
//

View File

@ -1,5 +1,6 @@
<template>
<div class="HomeMpa">
<div class="zoom-level">当前缩放等级: {{ zoomLevel }}</div>
<div id="mars3dContainer" ref="MarsMap" class="mars3d-container"></div>
</div>
</template>
@ -11,7 +12,8 @@ export default {
name: "HomeMap",
data() {
return {
player: null
player: null,
zoomLevel: null
};
},
created() {
@ -52,10 +54,22 @@ export default {
this.onMapLoad(map);
// 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_clickHandler(event) {
console.log(event);
},
map_zoomHandler(event) {
let { alt } = window.marsMap.getCameraView();
this.zoomLevel = this.estimateZoomLevel(alt);
console.log(this.zoomLevel);
},
estimateZoomLevel(height) {
const maxZoom = 18;
const baseHeight = 1000;
const zoom = maxZoom - Math.log2(height / baseHeight);
return Math.round(zoom);
},
onMapLoad(map) {
map.changeMouseModel(true);
}
@ -66,6 +80,13 @@ export default {
.HomeMpa {
width: 100%;
height: 100%;
.zoom-level {
position: absolute;
bottom: 0.8%;
left: 1%;
z-index: 5;
color: #fff;
}
#mars3dContainer {
width: 100%;

View File

@ -128,7 +128,7 @@ export default {
disabled: false
},
{
label: "关联阵地",
label: "关联防区",
type: "select",
model: "positionId",
options: [],
@ -144,7 +144,7 @@ export default {
tableData: [],
coloumData: [
{
label: "阵地名称",
label: "防区名称",
prop: "positionName",
align: "center"
},

View File

@ -228,7 +228,7 @@ export default {
disabled: false
},
{
label: "关联阵地",
label: "关联防区",
type: "select",
model: "positionId",
options: [],
@ -264,7 +264,7 @@ export default {
},
{
type: "text",
label: "关联阵地",
label: "关联防区",
prop: "positionName"
},
{
@ -370,7 +370,7 @@ export default {
if (res.code === 0) {
this.PositionList = res.data.items;
this.formDrawerList.forEach((item) => {
if (item.label === "关联阵地") {
if (item.label === "关联防区") {
item.options = res.data.items.map((item) => {
item.label = item.name;
item.key = item.id;

View File

@ -181,7 +181,7 @@ export default {
let params = {};
if (type === "add") {
this.isType = "add";
this.title = "新增阵地";
this.title = "新增防区";
this.fromItem = {};
this.formDrawerList[0].disabled = false;
this.formDrawerList[1].disabled = false;

View File

@ -108,7 +108,7 @@ export default {
defaultImg: require("@/assets/img/nopic.png"),
formList: [
{
label: "阵地名称",
label: "防区名称",
type: "input",
model: "Name"
}
@ -127,7 +127,7 @@ export default {
model: "address"
},
{
label: "阵地",
label: "防区",
type: "marsMapmap",
model: "polygon"
},
@ -142,7 +142,7 @@ export default {
model: "contactTel"
},
{
label: "阵地图片",
label: "防区图片",
type: "img",
model: "img"
},
@ -164,7 +164,7 @@ export default {
{
id: 1,
code: "123",
name: "测试阵地",
name: "测试防区",
area: [
{
name: "设备1"
@ -193,7 +193,7 @@ export default {
{
id: 1,
code: "123",
name: "测试阵地",
name: "测试防区",
area: [
{
name: "设备1"
@ -222,7 +222,7 @@ export default {
{
id: 1,
code: "123",
name: "测试阵地",
name: "测试防区",
area: [
{
name: "设备1"
@ -251,7 +251,7 @@ export default {
{
id: 1,
code: "123",
name: "测试阵地",
name: "测试防区",
area: [
{
name: "设备1"
@ -280,7 +280,7 @@ export default {
{
id: 1,
code: "123",
name: "测试阵地",
name: "测试防区",
area: [
{
name: "设备1"
@ -309,7 +309,7 @@ export default {
{
id: 1,
code: "123",
name: "测试阵地",
name: "测试防区",
area: [
{
name: "设备1"
@ -338,7 +338,7 @@ export default {
{
id: 1,
code: "123",
name: "测试阵地",
name: "测试防区",
area: [
{
name: "设备1"
@ -367,7 +367,7 @@ export default {
{
id: 1,
code: "123",
name: "测试阵地",
name: "测试防区",
area: [
{
name: "设备1"
@ -396,7 +396,7 @@ export default {
{
id: 1,
code: "123",
name: "测试阵地",
name: "测试防区",
area: [
{
name: "设备1"
@ -425,7 +425,7 @@ export default {
{
id: 1,
code: "123",
name: "测试阵地",
name: "测试防区",
area: [
{
name: "设备1"
@ -455,11 +455,11 @@ export default {
coloumData: [
{
slot: "img",
label: "阵地图片"
label: "防区图片"
},
{
type: "text",
label: "阵地名称",
label: "防区名称",
prop: "name"
},
{
@ -555,7 +555,7 @@ export default {
if (type === "add") {
this.isType = "add";
this.title = "新增阵地";
this.title = "新增防区";
this.fromItem = {};
this.isEditFlag = false;
this.drawer = true;
@ -580,7 +580,7 @@ export default {
handleClick(value, type) {
if (type === "edit") {
this.isType = "edit";
this.title = "编辑阵地";
this.title = "编辑防区";
this.isEditFlag = false;
this.fromItem = value;
this.drawer = true;
@ -589,7 +589,7 @@ export default {
let params = {
id: value.id
};
this.$confirm("此操作将永久删除该阵地, 是否继续?", "提示", {
this.$confirm("此操作将永久删除该防区, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"

View File

@ -102,7 +102,7 @@ module.exports = defineConfig({
})
.end();
config.plugin("html").tap((args) => {
args[0].title = "铁塔_web服务平台";
args[0].title = "低空猎鹰安全科技";
return args;
});
config.resolve.alias.set("@", resolve("src"));