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);
    }
    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);
      }
    }

    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>