fix：小车打点动画完善

src/views/big-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-29 17:41:31
+ * @LastEditTime: 2024-12-02 10:24:07
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -1232,23 +1232,45 @@ export default {
           if (!this.carMapPointSource) {
             this.drawCarMapPoint(item.data);
           } else {
-            console.log(item.data, "location");
+            // 获取当前位置和目标位置
-            // 获取小车图层的features数组
+            const currentLocation = this.carMapPointSource
-            const [features] = this.carMapPointSource.getFeatures();
+              .getFeatures()[0]
-            // 修改geometry定位
+              .getGeometry()
-            features.set("geometry", new Point(item.data.location));
+              .getCoordinates();
-            features.setStyle([
+            const targetLocation = item.data.location;
-              new Style({
+            // 计算两点之间的差值
-                image: new Icon({
+            const dx = (targetLocation[0] - currentLocation[0]) / 100;
-                  crossOrigin: "anonymous",
+            const dy = (targetLocation[1] - currentLocation[1]) / 100;
-                  src: logo,
+            // 设置计数器
-                  // 图标缩放比例
+            let count = 0;
-                  scale: 0.03,
+            // 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
-                  // 将角度转换为弧度,并除以180*π
+            const timer = setInterval(() => {
-                  rotation: (item.data.direction-90) * (Math.PI / 180),
+              count++;
+              if (count >= 100) {
+                clearInterval(timer);
+                return;
+              }
+
+              // 计算当前帧的位置
+              const x = currentLocation[0] + dx * count;
+              const y = currentLocation[1] + dy * count;
+
+              // 更新小车位置
+              const [features] = this.carMapPointSource.getFeatures();
+              features.setGeometry(new Point([x, y]));
+              features.setStyle([
+                new Style({
+                  image: new Icon({
+                    crossOrigin: "anonymous",
+                    src: logo,
+                    // 图标缩放比例
+                    scale: 0.03,
+                    // 将角度转换为弧度,并除以180*π
+                    rotation: (item.data.direction - 90) * (Math.PI / 180),
+                  }),
                 }),
-              }),
+              ]);
-            ]);
+            }, 10);
           }
         }
       });
@@ -1260,7 +1282,6 @@ export default {
      * @return {void}
      */
     drawCarMapPoint(item) {
-      console.log(item, "小车点位");
       const features = [];
       const feature = new Feature({
         geometry: new Point(item.location),

src/views/xj/document/maintenance-notice/index.vue

@@ -208,7 +208,7 @@
           >
             <template slot-scope="scope">
               <el-button
-                v-if="activeName === '已生成'"
+                v-if="activeName !== '未生成'"
                 size="mini"
                 type="text"
                 icon="el-icon-view"