diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index f36d871..66804b0 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -498,7 +498,7 @@ body { } } .device-type { - width: 320px; + width: 93%; height: 65px; display: flex; align-items: center; @@ -506,7 +506,37 @@ body { margin: 0 auto; margin-top: 3%; .txt { - width: 150px; + width: 50%; + height: 32px; + line-height: 32px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #ccc; + + .p1 { + width: 30%; + border: 1px solid #ccc; + background-color: rgba(55, 58, 70, 1); + text-align: center; + // 禁止换行 + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .p2 { + width: 70%; + font-size: 12px; + padding-left: 10px; + border: 1px solid #ccc; + // 禁止换行 + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + .txt1 { + width: 100%; height: 32px; line-height: 32px; display: flex; @@ -516,6 +546,7 @@ body { .p1 { min-width: 58px; + width: 50%; border: 1px solid #ccc; background-color: rgba(55, 58, 70, 1); text-align: center; @@ -527,6 +558,7 @@ body { .p2 { min-width: 102px; + width: 47%; font-size: 12px; padding-left: 10px; border: 1px solid #ccc; diff --git a/src/assets/img/device/deviceIcon/1-offline.png b/src/assets/img/device/deviceIcon/1-offline.png new file mode 100644 index 0000000..eceed54 Binary files /dev/null and b/src/assets/img/device/deviceIcon/1-offline.png differ diff --git a/src/assets/img/device/deviceIcon/2-offline.png b/src/assets/img/device/deviceIcon/2-offline.png new file mode 100644 index 0000000..d35c405 Binary files /dev/null and b/src/assets/img/device/deviceIcon/2-offline.png differ diff --git a/src/assets/img/device/deviceIcon/3-offline.png b/src/assets/img/device/deviceIcon/3-offline.png new file mode 100644 index 0000000..9c2a95d Binary files /dev/null and b/src/assets/img/device/deviceIcon/3-offline.png differ diff --git a/src/assets/img/device/deviceIcon/4-offline.png b/src/assets/img/device/deviceIcon/4-offline.png new file mode 100644 index 0000000..ecfce3b Binary files /dev/null and b/src/assets/img/device/deviceIcon/4-offline.png differ diff --git a/src/assets/img/device/deviceIcon/5-offline.png b/src/assets/img/device/deviceIcon/5-offline.png new file mode 100644 index 0000000..8d42dea Binary files /dev/null and b/src/assets/img/device/deviceIcon/5-offline.png differ diff --git a/src/assets/img/device/deviceIcon/6-offline.png b/src/assets/img/device/deviceIcon/6-offline.png new file mode 100644 index 0000000..b2270b8 Binary files /dev/null and b/src/assets/img/device/deviceIcon/6-offline.png differ diff --git a/src/assets/img/device/deviceIcon/7-offline.png b/src/assets/img/device/deviceIcon/7-offline.png new file mode 100644 index 0000000..f66d9fe Binary files /dev/null and b/src/assets/img/device/deviceIcon/7-offline.png differ diff --git a/src/assets/img/device/deviceIcon/8-offline.png b/src/assets/img/device/deviceIcon/8-offline.png new file mode 100644 index 0000000..0700f60 Binary files /dev/null and b/src/assets/img/device/deviceIcon/8-offline.png differ diff --git a/src/assets/img/device/deviceIcon/9-offline.png b/src/assets/img/device/deviceIcon/9-offline.png new file mode 100644 index 0000000..e4b47d8 Binary files /dev/null and b/src/assets/img/device/deviceIcon/9-offline.png differ diff --git a/src/views/contentData/LeftSidebar/index.vue b/src/views/contentData/LeftSidebar/index.vue index c3aebb2..6cc4a08 100644 --- a/src/views/contentData/LeftSidebar/index.vue +++ b/src/views/contentData/LeftSidebar/index.vue @@ -254,6 +254,17 @@ export default { window.marsMap.removeLayer(graphicLayer); } } + let graphicDevice = window.marsMap.getLayerById("devLog"); + if (graphicDevice) { + let deviceGraphic = graphicDevice.getGraphicById(item.DeviceId); + if (deviceGraphic !== undefined) { + deviceGraphic.setOptions({ + style: { + scale: 1.5 + } + }); + } + } }, handleContractClick() { this.isContracted = !this.isContracted; // 切换状态 diff --git a/src/views/contentData/RightSidebar/index.vue b/src/views/contentData/RightSidebar/index.vue index e9828ab..3f3ec52 100644 --- a/src/views/contentData/RightSidebar/index.vue +++ b/src/views/contentData/RightSidebar/index.vue @@ -5,6 +5,7 @@ v-for="(item, index) in deviceStatus" :key="index" class="device-item" + @click="handleDeviceClick(item)" >
{ + item.devices.forEach((device) => { + if (device.icon === value.icon) { + console.log(device, "device"); + + let graphicLayer = window.marsMap.getLayerById("devLog"); + graphicLayer.eachGraphic((graphic) => { + if (graphic.id === device.id) { + if (graphic.startBounce) { + graphic.startBounce({ + autoStop: true, + step: 2, + maxHeight: 90 + }); + } + } + }); + } + }); + }); + console.log(value, this.positionData, "value"); + }, handleContractClick() { this.isContracted = !this.isContracted; // 切换状态 }, diff --git a/src/views/contentData/index.js b/src/views/contentData/index.js index a40f5a0..d0ffffd 100644 --- a/src/views/contentData/index.js +++ b/src/views/contentData/index.js @@ -142,7 +142,9 @@ export function allDevices(options, type, show) { 0 ), style: { - image: require(`@/assets/img/device/deviceIcon/${deviceItem.icon}.png`), + image: deviceItem.isOnline + ? require(`@/assets/img/device/deviceIcon/${deviceItem.icon}.png`) + : require(`@/assets/img/device/deviceIcon/${deviceItem.icon}-offline.png`), // visibleDepth:false, scale: 1.5, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, @@ -173,7 +175,9 @@ export function allDevices(options, type, show) { name: "设备", position: new mars3d.LngLatPoint(item.lon, item.lat, 0), style: { - image: require(`@/assets/img/device/deviceIcon/${item.icon}.png`), + image: item.isOnline + ? require(`@/assets/img/device/deviceIcon/${item.icon}.png`) + : require(`@/assets/img/device/deviceIcon/${item.icon}-offline.png`), // visibleDepth:false, scale: 1.5, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, @@ -201,7 +205,7 @@ function bindLayerPopup(graphicLayer, graphic) { let attr = graphic.attr; if (graphic.name === "无人机") { graphic.bindPopup( - `
+ `
${attr.device_type}
@@ -226,7 +230,11 @@ function bindLayerPopup(graphicLayer, graphic) {

${attr.serial_number}

-

速度

+

中心点

+

${attr.centerdistance}

+
+
+

三维速度

${attr.height}

@@ -254,14 +262,24 @@ function bindLayerPopup(graphicLayer, graphic) { if (lblDistance) { lblDistance.innerHTML = Math.round(params.distance) + "米"; } + const lblCenter = container.querySelector("#lblCenter"); + if (lblCenter) { + lblCenter.innerHTML = Math.round(params.centerdistance) + "米"; + } 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"; + // 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 = + "E：" + + params.speed_E + + " N：" + + params.speed_N + + " U：" + + params.speed_E; } }); } else if (graphic.name === "飞手") { @@ -347,7 +365,7 @@ export function mapUavFiex(options) { // verticalOrigin: Cesium.VerticalOrigin.BOTTOM // }, model: { - scale: 1, + scale: 8, url: "/uav/scene.gltf", // 航向 heading: 0, @@ -422,7 +440,7 @@ export function mapUavFiex(options) { const point = new mars3d.LngLatPoint( item.drone_lon, item.drone_lat, - item.height + item.height || 10 ); car.addDynamicPosition(point, 0); }