历史轨迹线

src/api/yunkun/yunkun.js

@@ -30,3 +30,33 @@ export function getCarPoint(query) {
     params: query,
   });
 }
+
+// 车辆实时定位查询（根据车牌号）
+export function getCarByCarplate(query) {
+  query.sessionId = sessionId;
+  return request({
+    url: "/get_gps_r_plate.jsp",
+    method: "GET",
+    params: query,
+  });
+}
+
+// 查看车辆历史轨迹
+export function historyLine(query) {
+  query.sessionId = sessionId;
+  return request({
+    url: "/get_gps_h.jsp",
+    method: "GET",
+    params: query,
+  });
+}
+
+// 按天查询车辆里程
+export function carMidle(query) {
+  query.sessionId = sessionId;
+  return request({
+    url: "get_gps_mile_day.jsp",
+    method: "GET",
+    params: query,
+  });
+}

src/views/car.vue

@@ -2,13 +2,27 @@
   <div class="map-container">
     <div class="input-search" ref="targetElement">
       <div class="search-box">
-        <input type="text" placeholder="请输入路线或者临时任务名称" />
-        <div class="search-btn" @click="show = !show">搜索</div>
+        <input
+          type="text"
+          v-model="searchQuery.carPlate"
+          placeholder="请输入正确的车牌号"
+        />
+        <i
+          class="el-icon-error icon-close"
+          v-show="searchQuery.carPlate"
+          @click="inputClear()"
+        ></i>
+        <div class="search-btn" @click="handleSearch()">搜索</div>
       </div>
       <el-collapse-transition>
         <div v-show="show" class="search-list">
-          <div class="list-item" v-for="(item, index) in 5" :key="index">
-            002号线_01_维护_守押085_苏E
+          <div
+            class="list-item"
+            v-for="item in searchList"
+            :key="item.carId"
+            @click="handelLookCar(item)"
+          >
+            {{ item.carName }}
           </div>
         </div>
       </el-collapse-transition>
@@ -33,20 +47,26 @@
         {{ item }}
       </div>
     </div>
-    <!-- <div class="video-list" v-show="showVideo">
-      <grids></grids>
-    </div> -->
   </div>
 </template>
 
 <script>
 import MarsMap from "@/components/mars-map";
-// import grids from "@/components/grids.vue";
-import { getCarPoint } from "@/api/yunkun/yunkun.js";
+
+import { getCarPoint, getCarByCarplate } from "@/api/yunkun/yunkun.js";
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
+      searchList: [],
+      searchQuery: {
+        carPlate: undefined, //车牌
+        plateColor: undefined, //车辆颜色
+      },
+      carQuery: {
+        teamId: "", //该参数表示获取指定车队下所有层级子车队的车辆定位，该参数优先级别高于carIds参数,
+        carIds: "", //车辆id 多个用逗号分开，优先级低于teamId
+      },
       list: [],
       multipleList: ["营运线路", "维护线路", "临时任务"],
       selectedItems: [],
@@ -116,39 +136,77 @@ export default {
     document.addEventListener("click", this.handleClickOutside);
   },
   methods: {
+    /**输入框清除 */
+
+    inputClear() {
+      this.map.flyHome();
+      if (this.timer) clearInterval(this.timer);
+      this.searchList = [];
+      this.searchQuery.carPlate = undefined;
+      this.carQuery.carIds = undefined;
+      this.show = false;
+      this.getCarPoint();
+    },
+
+    /**根据车牌号查询车辆实时定位 */
+    async handleSearch() {
+      if (!this.searchQuery.carPlate) return;
+      // 清除轮询定时器
+      if (this.timer) clearInterval(this.timer);
+      const result = await getCarByCarplate(this.searchQuery);
+      this.searchList = result.list;
+      this.show = true;
+    },
+
+    handelLookCar(item) {
+      this.list = [item];
+      this.carQuery.carIds = item.carId;
+      this.map.flyToPoint(
+        new mars3d.LngLatPoint(parseFloat(item.lng), parseFloat(item.lat))
+      );
+      this.createCar("active");
+      this.show = false;
+    },
+
+    /**
+     * 获取车辆实时定位（可查全部）
+     */
     async getCarPoint() {
       this.list = await this.carPoint();
       this.createCar();
     },
 
     async carPoint() {
-      let res = await getCarPoint({
-        // carIds: "23,78",
-      });
+      let res = await getCarPoint(this.carQuery);
       res.list = res.list.filter(
         (item) =>
           item.carPlate.includes("苏E") ||
           (item.carPlate.includes("苏U") && item.stateCn.includes("在线-行驶"))
       );
-      return res.list.slice(0, 100);
+      return res.list.slice(0, 50);
     },
 
     /**
      * 创建车辆图标
      */
-    createCar() {
+    createCar(type) {
+      let _this = this;
       this.graphicLayer.clear();
       this.graphicLayer.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
       // 设置动态位置
       for (let i = 0; i < this.list.length; i++) {
-        let item = this.list[i];
-        const graphic = new mars3d.graphic.ModelPrimitive({
+        const item = this.list[i];
+        let graphic = new mars3d.graphic.ModelPrimitive({
           id: item.carId,
           style: {
-            // heading: parseInt(item.drct),
             url: this.carUrl,
             scale: 3,
             minimumPixelSize: 20,
+            silhouette: true,
+            silhouetteColor: "#0084ff",
+            silhouetteSize: 2,
+            pitch: 0,
+            roll: 0,
             label: {
               text: item.carName,
               font_size: 14,
@@ -156,31 +214,39 @@ export default {
               outline: true,
               outlineColor: "#000000",
               pixelOffsetY: -30,
+              visibleDepth: false,
               distanceDisplayCondition: true,
               distanceDisplayCondition_far: 50000,
               distanceDisplayCondition_near: 0,
             },
           },
-          // frameRateHeight: 30, // 控制贴模型的效率，多少帧计算一次
+          // autoMiddleDynamicPosition: true, //如果中间缺少数据时是否自动添加中间点
+          frameRateHeight: 30, // 控制贴模型的效率，多少帧计算一次
         });
         this.graphicLayer.addGraphic(graphic);
         this.graphicLayer.enabledEvent = true; // 恢复事件
-        //   graphic.bindHighlight({
-        //   type: mars3d.EventType.click,
-        //   silhouette: true,
-        //   silhouetteColor: "#FAAC51",
-        //   silhouetteSize: 2,
-        //   label: {
-        //     outlineColor: "#FAAC51",
-        //   },
-        // });
-        // graphic.on(mars3d.EventType.click, function (e) {
-        //   _this.$router.push({ path: "/carInfo" });
-        // });
+
+        if (type) {
+          graphic.openHighlight({
+            scale: 5,
+            silhouette: true,
+            silhouetteColor: "#FAAC51",
+            silhouetteSize: 2,
+            label: {
+              outlineColor: "#FAAC51",
+            },
+          });
+        }
+        graphic.on(mars3d.EventType.click, function (e) {
+          _this.$router.push({
+            path: "/carInfo",
+            query: { carId: e.target.id },
+          });
+        });
       }
       this.changePosition(0);
       // 定时更新动态位置（setInterval为演示）
-      const interval = 10;
+      const interval = 15;
       this.changePosition(interval);
       this.time = setInterval(() => {
         this.changePosition(interval);
@@ -191,36 +257,17 @@ export default {
     async changePosition(interval) {
       let list = await this.carPoint();
       this.graphicLayer.eachGraphic((graphic) => {
-        for (let i = 0; i < list.length; i++) {
-          let item = list[i];
-          if (graphic.id == item.carId) {
-            // graphic.setOptions({
-            //   style: {
-            //     heading: parseInt(item.drct),
-            //   },
-            // });
-            let position = Cesium.Cartesian3.fromDegrees(
-              parseFloat(item.lng),
-              parseFloat(item.lat),
-              30
-            );
-            graphic.addDynamicPosition(position, interval); // 按time秒运动至指定位置
-          }
+        let carItam = list.filter((car) => car.carId == graphic.id);
+        if (carItam.length > 0) {
+          let position = Cesium.Cartesian3.fromDegrees(
+            parseFloat(carItam[0].lng),
+            parseFloat(carItam[0].lat),
+            30
+          );
+          graphic.addDynamicPosition(position, interval); // 按time秒运动至指定位置
         }
       });
     },
-
-    // 取区域内的随机点
-    randomPoint() {
-      const jd = this.random(117.207666 * 1000, 117.287241 * 1000) / 1000;
-      const wd = this.random(31.817099 * 1000, 31.876848 * 1000) / 1000;
-      return Cesium.Cartesian3.fromDegrees(jd, wd, 30);
-    },
-
-    random(min, max) {
-      return Math.floor(Math.random() * (max - min + 1) + min);
-    },
-
     handleClickOutside(event) {
       // 判断点击的元素是否在目标元素外部
       if (this.show && !this.$refs.targetElement.contains(event.target)) {
@@ -247,7 +294,7 @@ export default {
       this.graphicLayer = new mars3d.layer.GraphicLayer();
       map.addLayer(this.graphicLayer);
       // this.initTilesetLayer();
-      // this.getCarPoint();
+      this.getCarPoint();
     },
 
     /**
@@ -272,9 +319,7 @@ export default {
         },
       });
       this.map.addLayer(tiles3dLayer);
-
       if (process.env.NODE_ENV === "production") this.chkShadows(true);
-
       tiles3dLayer.on(mars3d.EventType.load, function (event) {
         _this.getCarLocation();
       });
@@ -302,9 +347,17 @@ export default {
   z-index: 100;
 
   .search-box {
+    position: relative;
     display: flex;
     align-items: center;
     height: 32px;
+    .icon-close {
+      cursor: pointer;
+      position: absolute;
+      left: 260px;
+      font-size: 14px;
+      color: #0084ff;
+    }
   }
   .search-btn {
     cursor: pointer;
@@ -340,6 +393,7 @@ export default {
     border: 1px solid #0084ff;
     border-top: 0;
     & > div {
+      cursor: pointer;
       font-size: 14px;
       padding: 10px;
     }

src/views/carInfo.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="real-time">
         <img src="../assets/images/realTime.png" alt="" />
-        <span>5.1</span>
+        <span>{{ mileData.mile }}</span>
       </div>
     </div>
     <mars-map @mapLoad="mapLoad" :options="options"></mars-map>
@@ -21,10 +21,19 @@
 import MarsMap from "@/components/mars-map";
 import grids from "@/components/grids.vue";
 import { getCarIdInfo } from "@/api/yunkun/index.js";
+import { historyLine, carMidle } from "@/api/yunkun/yunkun.js";
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
+      list: [],
+      mileData: {
+        mile: "", //已经行驶多少里程
+      },
+      queryParams: {
+        startTime: undefined,
+        endTime: undefined,
+      },
       graphicLayer: null,
       baseUrl: basePathUrl + "lib/geoJson/tileset.json",
       map: null,
@@ -52,24 +61,92 @@ export default {
               "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
             tilesize: 256,
             scaleFactor: false,
-            show: true,
+            show: false,
           },
         ],
       },
-      carUrl: basePathUrl + "lib/car.gltf",
+      carUrl: basePathUrl + "lib/qiche.gltf",
     };
   },
   components: { MarsMap, grids },
   beforeDestroy() {},
-  mounted() {},
+  mounted() {
+    const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted(true);
+    this.queryParams = {
+      carId: this.$route.query.carId,
+      startTime: startOfDay,
+      endTime: endOfDay,
+    };
+    this.getCarMidle();
+  },
   methods: {
     mapLoad(map) {
       this.map = map;
       this.graphicLayer = new mars3d.layer.GraphicLayer();
       map.addLayer(this.graphicLayer);
-      this.initTilesetLayer();
+      // this.initTilesetLayer();
+      this.getCarHistoryLine();
+    },
+
+    /**根据车辆的id获取车辆的历史轨迹 */
+    async getCarHistoryLine() {
+      let result = await historyLine(this.queryParams);
+      result.list.map((item) => {
+        this.list.push([parseFloat(item.lng), parseFloat(item.lat)]);
+      });
+
+      this.createCar(result.countData);
+    },
+    /**获取车辆天里程 */
+    async getCarMidle() {
+      const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted();
+      let result = await carMidle({
+        carId: this.queryParams.carId,
+        startDate: startOfDay,
+        endDate: endOfDay,
+      });
+      this.mileData.mile = result.mile;
+    },
 
-      // this.createCar();
+    getStartAndEndOfDayFormatted(boole) {
+      const now = new Date();
+      const startOfDay = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate(),
+        0,
+        0,
+        0
+      );
+      const endOfDay = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate(),
+        23,
+        59,
+        59,
+        999
+      );
+
+      return {
+        startOfDay: this.formatDate(startOfDay, boole),
+        endOfDay: this.formatDate(endOfDay, boole),
+      };
+    },
+
+    formatDate(date, boole) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以要加1
+      const day = String(date.getDate()).padStart(2, "0");
+      const hours = String(date.getHours()).padStart(2, "0");
+      const minutes = String(date.getMinutes()).padStart(2, "0");
+      const seconds = String(date.getSeconds()).padStart(2, "0");
+
+      if (boole) {
+        return `${year}${month}${day}${hours}${minutes}${seconds}`;
+      } else {
+        return `${year}${month}${day}`;
+      }
     },
 
     /**
@@ -101,32 +178,22 @@ export default {
     /**
      * 生成车辆实时点位
      */
-    async createCar() {
+    async createCar(countData) {
       let _this = this;
-
-      let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8");
-
+      // let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8");
       const fixedRoute = new mars3d.graphic.FixedRoute({
         name: "贴模型表面漫游",
-        speed: 60,
-        positions: [
-          [120.590657, 31.275441, 15.5],
-          [120.597244, 31.278797, 16.4],
-          [120.595642, 31.280922, 15.1],
-          [120.590948, 31.27921, 15.9],
-          [120.588008, 31.278101, 13],
-          [120.590142, 31.275941, 15.6],
-        ],
+        speed: countData.avg_speed, //平均速度值
+        positions: _this.list,
         camera: {
           type: "gs",
-          heading: 0,
+          heading: 90,
           radius: 500,
         },
         model: {
           show: true,
-          url: "//data.mars3d.cn/gltf/imap/ce2fddca7bac436d8d318bcd4fdf2d69/gltf/gltf2.gltf",
+          url: _this.carUrl,
           scale: 0.3,
-
           minimumPixelSize: 55,
           silhouette: true,
           silhouetteColor: "#fff",
@@ -163,7 +230,7 @@ export default {
             count: 2,
             speed: 10,
           },
-          clampToGround: true,
+          clampToTileset: true,
         },
         polyline: {
           // lastMaterialType: "LineTrail",
@@ -173,6 +240,7 @@ export default {
           outline: true,
           outlineColor: "#008DF8",
           outlineWidth: 5,
+          clampToGround: true,
           //   materialOptions: {
           //     color: "#008BFA",
           //     materialType: "LineTrail",
@@ -184,11 +252,11 @@ export default {
       });
       this.graphicLayer.addGraphic(fixedRoute);
       //绑定弹窗
-      this.bindPopup(fixedRoute, res.data);
+      // this.bindPopup(fixedRoute, res.data);
       //开始漫游
       fixedRoute.start();
       //打开弹窗
-      fixedRoute.openPopup();
+      // fixedRoute.openPopup();
 
       // const point = new mars3d.LngLatPoint(item.lon, item.lat, 0)
       //           car.addDynamicPosition(point, item.time)