车辆详情弹窗

src/api/yunkun/index.js

@@ -18,3 +18,10 @@ export function getProvince(query) {
     params: query,
   });
 }
+//根据车辆id查询线路,装备,人员,标的物
+export function getCarIdInfo(id) {
+  return request({
+    url: `/ykmap/line/getCarIdInfo/${id}`,
+    method: "get",
+  });
+}

src/assets/styles/map.scss

@@ -154,6 +154,7 @@
     background: url("../images/diy-popup.png");
     background-size: 100% 100%;
     padding: 20px 25px;
+    overflow-y: auto;
     .popup-title {
       font-size: 18px;
       color: #ffffff;

src/views/carInfo.vue

@@ -20,6 +20,7 @@
 <script>
 import MarsMap from "@/components/mars-map";
 import grids from "@/components/grids.vue";
+import { getCarIdInfo } from "@/api/yunkun/index.js";
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
@@ -91,9 +92,11 @@ export default {
     /**
      * 生成车辆实时点位
      */
-    createCar() {
+    async createCar() {
       let _this = this;
-      // for (let i = 0; i < 1; i++) {
+
+      let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8");
+
       const fixedRoute = new mars3d.graphic.FixedRoute({
         name: "贴模型表面漫游",
         speed: 60,
@@ -170,7 +173,7 @@ export default {
       });
       this.graphicLayer.addGraphic(fixedRoute);
       //绑定弹窗
-      this.bindPopup(fixedRoute);
+      this.bindPopup(fixedRoute, res.data);
       //开始漫游
       fixedRoute.start();
       //打开弹窗
@@ -244,62 +247,52 @@ export default {
       // }, interval * 1000);
     },
 
-    bindPopup(fixedRoute) {
-      fixedRoute.bindPopup(
-        `<div class="diy-popup">
+    bindPopup(fixedRoute, data) {
+      const userList = data.userList.map((item) => {
+        return `<div class="popup-item">
+              <div class="popup-lable">${item.name}：</div>
+              <div class="popup-value">${item.ename}</div>
+            </div>`;
+      });
+
+      const zbList = data.zbList.map((item) => {
+        return `<div class="popup-item">
+              <div class="popup-lable">${item.thingType}：</div>
+              <div class="popup-value">${item.type}</div>
+            </div>`;
+      });
+
+      let html = `<div class="diy-popup">
             <div class="popup-title">001号线_01_早送_守押<br/>
               001_苏E12345
               </div>
             <div class="popup-item">
                 <div class="popup-lable">线路类型：</div>
-                <div class="popup-value">押运线路</div>
+                <div class="popup-value">${data.lineType}</div>
               </div>
               <div class="sub-title">装备信息</div>
               <div class="popup-grid">
-                  <div class="popup-item">
-                <div class="popup-lable">车牌号码：</div>
-                <div class="popup-value">苏E12345（守押001）</div>
-              </div>
-              <div class="popup-item">
-                <div class="popup-lable">枪支：</div>
-                <div class="popup-value">枪支1478（97-x）</div>
-              </div>
-              <div class="popup-item">
-                <div class="popup-lable">枪支：</div>
-                <div class="popup-value">枪支1480（97-x）</div>
-              </div>
-              <div class="popup-item">
-                <div class="popup-lable">弹夹：</div>
-                <div class="popup-value">弹夹585</div>
-              </div>
+                ${zbList.join("")}
                 </div>
                 <div class="sub-title">人员信息</div>
                      <div class="popup-grid">
-                  <div class="popup-item">
-                <div class="popup-lable">车长：</div>
-                <div class="popup-value">张宏伟</div>
-              </div>
-              <div class="popup-item">
-                <div class="popup-lable">驾驶员：</div>
-                <div class="popup-value">陈贵华</div>
-              </div>
-              <div class="popup-item">
-                <div class="popup-lable">押运员：</div>
-                <div class="popup-value">王昌文</div>
-              </div>
-              <div class="popup-item">
-                <div class="popup-lable">押运员：</div>
-                <div class="popup-value">李名</div>
+                      ${userList.join("")}
+                </div>
+                <div class="sub-title">标的物信息</div>
+                 <div class="popup-grid">
+                      <div class="popup-item">
+                <div class="popup-lable">标的物总数：</div>
+                <div class="popup-value">${data.bdwInfo.count}只</div>
               </div>
                 </div>
-          </div>`,
-        {
-          className: "carPopup",
-          offsetX: 280,
-          offsetY: 20,
-          // closeButton: false,
-        }
-      );
+          </div>`;
+
+      fixedRoute.bindPopup(html, {
+        className: "carPopup",
+        offsetX: 280,
+        offsetY: 20,
+        // closeButton: false,
+      });
     },
     // 改变位置
     changePosition(time) {

src/views/index.vue

@@ -85,7 +85,6 @@ export default {
       //周边图层
       this.rimCity = new mars3d.layer.GraphicLayer({ zIndex: 9 });
       map.addLayer(this.rimCity);
-
       this.initSuzhou();
       this.initRimcity();
     },