<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-15 13:14:03
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-15 14:06:48
 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
 * @Description: 总览大屏-巡检车辆-跟车弹窗
-->

<template>
  <div class="inspection-content">
    <fssm-map ref="carMap" :baseMap="'img_c'"></fssm-map>
  </div>
</template>

<script>
// websocket
import {
  connectWebsocket,
  closeWebsocket,
  sendMsg,
} from "@/plugins/websocket.js";
import { getToken } from "@/utils/auth.js";
import logo from "@/assets/xc.png";
import FssmMap from "@/components/map/fssm-map.vue";
import { Point } from "ol/geom";
import { Feature } from "ol";
import { Style, Icon } from "ol/style";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";

export default {
  name: "InspectionFollow",
  components: {
    FssmMap,
  },
  data() {
    return {};
  },
  created() {
    this.initWebSocket();
  },
  methods: {
    /* 初始化websocket */
    initWebSocket() {
      const url = `ws://192.168.1.188:8080/websocket?token=${getToken()}`;
      const data = { type: "carLocation", status: true };
      connectWebsocket(
        url,
        data,
        (res) => {
          // console.log("onWsMessage接收到服务器的数据: ", res);
          console.log(JSON.parse(res));
        },
        (err) => {
            console.log("断开重连");
            this.drawPoint();
        }
      );
    },

    /* 发送消息 */
    sendMsg() {
      sendMsg(5555); //value是发送的值
      // this.value = "";
    },

    /* 绘制地图车点位 */
    drawPoint() {
      const features = [];
      // 修改坐标样式
      const point = new Point([123.30297096718999,41.87942945541742]);
      const feature = new Feature({
        geometry: point,
        data: {
          iconType: "1",
        //   imageUrl: element.imageUrl,
        //   rect: element.rect,
        },
        // 自己设置一个标识
        type: "icon",
      });
      // 可以给点位设置样式
      feature.setStyle([
        new Style({
          image: new Icon({
            crossOrigin: "anonymous",
            src: logo,
            // 图标缩放比例
            scale: 0.05,
          }),
        }),
      ]);
      features.push(feature);
      //设置地图的数据源
      const pointSource = new VectorSource({
        features,
      });
      let markLayerPoints = new VectorLayer({
        source: pointSource,
        properties: {
          type: "point",
        },
      });
      this.$nextTick(() => {
        const map = this.$refs.carMap.instance.get("map");
        map.addLayer(markLayerPoints);
      });
    },
    beforeDestroy() {
      closeWebsocket();
    },
  },
};
</script>

<style lang="scss" scoped>
.inspection-content {
  width: 100%;
  height: 45rem;

  ::v-deep .baseLayerClass {
    filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
      brightness(80%) saturate(550%);
  }
}
</style>