wxjt-asset-web/src/views/dataShow/index.vue

<template>
  <div class="page">
    <div class="container" ref="appRef">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else style="height: 100%;" class="d-flex flex-column">
        <dv-decoration-3 style="width:250px;height:30px;position: absolute;bottom: 10px;right: 30px;" />

        <HeaderComponent></HeaderComponent>

        <div class="body d-flex flex-1">
<!--          <btns></btns>-->
          <div class="left d-flex flex-column">
            <dv-border-box-12 style="padding: 14px;" class="flex-1">
              <MapComponent v-show="$store.state.bigdata.type === 1"></MapComponent>
              <Map1Component v-show="$store.state.bigdata.type === 2"></Map1Component>
              <Map2Component v-show="$store.state.bigdata.type === 3"></Map2Component>
            </dv-border-box-12>
            <leftBottom class="mt-2"></leftBottom>
          </div>
          <div class="right d-flex flex-column ml-2">
            <dv-border-box-12><right1></right1></dv-border-box-12>
            <dv-border-box-12><right2></right2></dv-border-box-12>
            <dv-border-box-12><right3></right3></dv-border-box-12>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/mixin/drawMixin";
import MapComponent from "./map.vue";
import Map1Component from "./map1.vue";
import Map2Component from "./map2.vue";
import HeaderComponent from "./header.vue";
import right1 from "./right1.vue";
import right2 from "./right2.vue";
import right3 from "./right3.vue";
import btns from "./btns.vue";
import leftBottom from "./leftBottom.vue"
import { index } from '@/api/system/baseForm';
import { mapActions } from "vuex"
export default {
  components: {
    MapComponent,
    Map1Component,
    Map2Component,
    HeaderComponent,
    right1,
    right2,
    right3,
    btns,
    leftBottom
  },
  mixins: [drawMixin],
  data() {
    return {
      loading: true,
      assetsData: [[],[]],
      leases: []
    }
  },
  methods: {
    ...mapActions("bigdata",{
      getLeases: "getLeases",
      getAssets: "getAssets",
      getAdventLeases: "getAdventLeases",
      getSafety: "getSafety",
      getSafetyPlan: "getSafetyPlan",
      getAdventSafetyPlan: "getAdventSafetyPlan",
      getDepartmentStatics: "getDepartmentStatics"
    })
  },
  computed: {
    type () {
      return this.$store.state.bigdata.type;
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    },1000)
  },
  created() {
    this.getAssets()
    this.getLeases()
    this.getAdventLeases()
    this.getSafety()
    this.getSafetyPlan()
    this.getAdventSafetyPlan()
    this.getDepartmentStatics()
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/scss/style.scss";
  .page {
    background: url("~@/assets/pageBg.png") no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    position: relative;
  }
  .container {
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;

    position: relative;
    top: 50%;
    left: 50%;

    .body {
      padding-top: 20px;
      //padding-left: 13%;
      .left {
        flex-basis: 74%;

      }
      .right {
        flex: 1;
        padding-right: 20px;

        div + div {
          margin-top: .5rem;
        }
      }
    }
  }
</style>