DataDisplayPlatform_WebApp/src/views/transportationSafetyCenter.vue

<template>
  <div style="position: relative">
    <div id="bmap"></div>
    <ShipSearch
      class="ship-search z20"
      style="position: absolute; top: 40px; right: 524px"
    ></ShipSearch>
    <NumberVue
      class="z20"
      v-if="this.$store.state.currentTabText != '环境中心'"
      :data="arr"
      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 { 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) => {
        getNumbers(a == "运输安全管理中心");
      }
    );
    let arr = ref([]);
    async function getNumbers(b) {
      store.dispatch("GetNumbers", b).then((e) => {
        arr.value = e;
      });
    }

    onMounted(() => {
      initMap();
      getNumbers(store.state.currentTabText == "运输安全管理中心");
    });
    return {
      initMap,
      arr,
    };
  },
};
</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>