DataDisplayPlatform_WebApp/src/views/transportationSafetyCenter.vue

<template>
  <div style="position: relative">
    <div id="bmap"></div>
    <ShipSearch
      class="ship-search z20"
      :api="'searchShipSelect'"
      v-model="shipStr"
      @selectItem="selectShip"
      style="position: absolute; top: 40px; right: 524px"
    ></ShipSearch>
    <NumberVue
      class="z20"
      v-if="this.$store.state.currentTabText != '环境中心'"
      :data="this.$store.state.numbers"
      style="position: absolute; top: 0; left: 0"
    ></NumberVue>
    <SafetyModule
      class="z20"
      v-if="this.$store.state.currentTabText == '运输安全管理中心'"
      style="position: absolute; top: 24px; right: 34px"
    ></SafetyModule>
    <IntelligentModule
      class="z20"
      v-if="this.$store.state.currentTabText == '智能交易中心'"
      style="position: absolute; top: 24px; right: 34px"
    ></IntelligentModule>
    <EnvironmentalModule
      class="z20"
      v-if="this.$store.state.currentTabText == '环境中心'"
      style="position: absolute; top: 24px; right: 34px"
    ></EnvironmentalModule>
    <Warning
      class="z20"
      v-if="this.$store.state.currentTabText == '环境中心'"
      style="position: absolute; top: 40px; left: 20px; right: 744px"
    ></Warning>
    <div class="mask"></div>
  </div>
</template>

<script>
import ShipSearch from "comps/ShipSearch.vue";
import router from "router/index";
import store from "store/index";
import api from "apis/fetch";
import { ref, onMounted, watch } from "vue";
export default {
  components: {
    ShipSearch,
  },
  setup() {
    const bmap = ref({});
    function initMap() {
      bmap.value = new BMapGL.Map("bmap");
      bmap.value.setMapStyleV2({
        styleId: "fa3f2f79d64ac87e2683cfa762891cb5",
      });
      bmap.value.centerAndZoom(new BMapGL.Point(120.688612, 31.975529), 11);
      bmap.value.enableScrollWheelZoom(true);
      cpxOverlay();
    }
    watch(
      () => store.state.currentTabText,
      (a, b) => {
        store.dispatch("GetNumbers");
      }
    );

    let shipStr = ref("");

    function selectShip(item) {
      if (store.state.currentTabText == "运输安全管理中心") {
        store.dispatch("GetManageShipDetail", item.key);
      }
      if (store.state.currentTabText == "智能交易中心") {
        store.dispatch("GetTradeShipDetail", item.key);
      }
    }
    // 定义复杂覆盖物
    function cpxOverlay(
      lng = 120.688612,
      lat = 31.995529,
      shipName = "颖航5156",
      mmsi = "413835188",
      cargo = "豆粕",
      tons = "1565.69",
      shipId = "51710"
    ) {
      console.log("创建自定义覆盖物");
      //   复杂的自定义覆盖物
      function ComplexCustomOverlay(point) {
        this._point = point;
      }
      ComplexCustomOverlay.prototype = new BMapGL.Overlay();
      ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
        this._div["on" + event] = fun;
      };
      ComplexCustomOverlay.prototype.initialize = function (map) {
        this._map = map;
        let div = (this._div = document.createElement("div"));
        div.style.position = "absolute";
        div.style.margin = 0;
        div.style.padding = 0;
        div.style.zIndex = BMapGL.Overlay.getZIndex(this._point.lat);
        div.style.height = "118px";
        div.style.width = "270px";
        div.style.lineHeight = "18px";
        div.style.whiteSpace = "nowrap";
        div.style.MozUserSelect = "none";
        div.style.fontSize = "12px";
        div.style.cursor = "pointer";

        function parseDom(arg) {
          let objE = document.createElement("div");
          objE.innerHTML = arg;
          return objE;
        }
        let content = `
        <div
                style="
                  display: flex;
                  align-items:center;
                  text-shadow: 0px 0px 5px rgba(100, 185, 255, 0.6);
                "
              >
                <img
                  style="
                    margin: 0px;
                    padding: 0px;
                    height: 55px;
                    width: 55px;
                    margin-right: 20px;
                  "
                  src="https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/map-ship-icon.png"
                  alt=""
                />
                <div
                  style="
                    height: 118px;
                    width: 3px;
                    box-sizing: border-box;
                    background: rgb(16, 255, 185);
                    border: 1px solid rgb(16, 255, 185);
                    margin-right: 4px;
                  "
                ></div>
                <div
                  style="
                    padding: 8px 12px;
                    height: 118px;
                    width: 191px;
                    background: rgba(0, 0, 0, 0.6);
                    text-align: left;
                    box-sizing: border-box;
                  "
                >
                  <div
                    style="
                      font-size: 18px;
                      font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                      font-weight: bold;
                      color: #10ffb9;
                      margin-bottom: 2px;
                    "
                  >
                    ${shipName}
                  </div>
                  <div
                    style="
                      font-size: 10px;
                      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                      font-weight: 500;
                      color: #fafeff;
                      margin-bottom: 14px;
                    "
                  >
                    MMSI: ${mmsi}
                  </div>
                  <div
                    style="
                      display: flex;
                      font-size: 20px;
                      font-family: DINAlternate-Bold, DINAlternate;
                      font-weight: bold;
                      color: #ffffff;
                    "
                  >
                    <div style="margin-right: 35px">
                      <div style="margin-bottom: 3px; height: 28px">${cargo}</div>
                      <div
                        style="
                          font-size: 14px;
                          font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                          font-weight: 400;
                          color: #92afc7;
                        "
                      >
                        货种
                      </div>
                    </div>
                    <div>
                      <div
                        style="
                          margin-bottom: 3px;
                          height: 28px;
                          line-height:22px
                        "
                      >
                        ${tons}
                        <span style="display: inline-block; font-size: 16px"
                          >吨</span
                        >
                      </div>
                      <div
                        style="
                          font-size: 14px;
                          font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                          font-weight: 400;
                          color: #92afc7;
                        "
                      >
                        吨位
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        `;
        let contain = parseDom(content);
        div.addEventListener("click", function () {
          console.log("shipId", shipId);
          selectShip({ key: shipId });
        });
        div.appendChild(contain);

        bmap.value.getPanes().labelPane.appendChild(div);
        return div;
      };
      ComplexCustomOverlay.prototype.draw = function () {
        let map = this._map;
        let pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x - 30 + "px";
        this._div.style.top = pixel.y - 65 + "px";
      };

      let myCompOverlay = new ComplexCustomOverlay(new BMapGL.Point(lng, lat));

      bmap.value.addOverlay(myCompOverlay);
    }

    onMounted(() => {
      initMap();
      // store.dispatch("GetManageShipDetail", 51710);
      // store.dispatch("GetTradeShipDetail", 51710);
      store.dispatch("GetNumbers");
    });
    return {
      initMap,
      shipStr,
      selectShip,
    };
  },
};
</script>

<style lang="scss" scoped>
#bmap {
  width: 100%;
  height: calc(100vh - 60px);
  box-sizing: border-box;
  background: #1d2c43;
  border-top: 1px solid grey;
}
:deep(.ship-search) {
  .el-input__inner {
    background: none;
    color: #fff;
  }
}

.mask {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  pointer-events: none;
  background-image: radial-gradient(ellipse, #213e5f, #0f1d2e);
  opacity: 0.35;
}
</style>