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: 0;left: 0px;" />

        <HeaderComponent></HeaderComponent>

        <div class="body d-flex">
          <btns></btns>
          <div class="left d-flex flex-column">
            <dv-border-box-12>
              <MapComponent></MapComponent>
            </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 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';
export default {
  components: {
    MapComponent,
    HeaderComponent,
    right1,
    right2,
    right3,
    btns,
    leftBottom
  },
  mixins: [drawMixin],
  provide() {
    return {
      assets: () => this.assetsData,
      leases: () => this.leases,
    }
  },
  data() {
    return {
      loading: true,
      assetsData: [[],[]],
      leases: []
    }
  },
  methods: {
    async getLeases () {
      const res = await index({
        table_name: "leases",
        page: 1,
        page_size: 999,
        filter: [
          {
            key: 'zulinjieshuqixian',
            op: 'range',
            value: `${this.$moment().format("YYYY-MM-DD")},2999-12-31`
          },
          {
            key: 'zulinkaishiqixian',
            op: 'range',
            value: `${this.$moment(0).format("YYYY-MM-DD")},${this.$moment().format("YYYY-MM-DD")}`
          }
        ]
      })
      this.leases = res.data
    },
    async getData () {
      await Promise.all([
        index({
          table_name: "houses",
          page: 1,
          page_size: 999
        },false),
        index({
          table_name: "lands",
          page: 1,
          page_size: 999
        })
      ]).then(res => {
        const [houses,lands] = res;
        this.assetsData = [houses.data,lands.data];
      })
    },
  },
  computed: {},
  mounted() {
    setTimeout(() => {
      this.loading = false;
    },500)
  },
  created() {
    this.getData();
    this.getLeases()
  }
}
</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: 60px;

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