1

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;

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; // 切换状态

src/views/contentData/RightSidebar/index.vue

@@ -5,6 +5,7 @@
         v-for="(item, index) in deviceStatus"
         :key="index"
         class="device-item"
+        @click="handleDeviceClick(item)"
       >
         <div class="device-icon">
           <img
@@ -130,6 +131,29 @@ export default {
   },
   mounted() {},
   methods: {
+    handleDeviceClick(value) {
+      this.positionData.forEach((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; // 切换状态
     },

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(
-      ` <div class="mians" style="height: 410px;">
+      ` <div class="mians" style="height: 435px;">
           <div class="title">${attr.device_type}</div>
           <div class="imgs"><img src="${imgUav}" /></div>
           <div class="device-type" style="margin-top: 8%;">
@@ -226,7 +230,11 @@ function bindLayerPopup(graphicLayer, graphic) {
               <p class="p2">${attr.serial_number}</p>
             </div>
             <div class="txt">
-              <p class="p1">速度</p>
+              <p class="p1">中心点</p>
+              <p class="p2" id="lblCenter">${attr.centerdistance}</p>
+            </div>
+            <div class="txt1">
+              <p class="p1">三维速度</p>
               <p class="p2" id="lblSpeed">${attr.height}</p>
             </div>
           </div>
@@ -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);
           }