Smart_platform_ui/src/views/wel/home/defaultPage.vue

<template>
  <div class="container">
    <quick-launch class="item1" :sysType="sysType" />
    <audit-data class="item2" v-if="sysType !== 999" :sysType="sysType"/>
    <realtime-data class="item3" v-if="sysType !== 999 && sysType !== 11" :sysType="sysType"/>
    <sales-reached class="item4" :sysType="sysType" v-if="sysType!=4||roleName!='采购'"/>

      <!--新加的-->
      <xinsales-reached class="item4" :sysType="sysType" v-if="sysType==11 && $store.getters.userInfo.tenant_id !== 577435"/>

    <sales-trend :class="sysType!=5 && sysType!=4?'item3':'item5'" :sysType="sysType" v-if="(sysType!=4||roleName!='采购') && sysType != 2 && sysType != 6"/>
      <!--新家的表格-->
      <xinsales-trend class="item5" :sysType="sysType" v-if="sysType==11"/>

    <charge-today class="item6" :sysType="sysType" v-if="(sysType!=4||roleName!='采购')&&sysType !== 999"/>
    <pay-today class="item7" :sysType="sysType" v-if="(sysType!=4||roleName!='采购')&&sysType !== 999"/>
  </div>
</template>

<script>
import quickLaunch from "../components/quick-launch";
import auditData from "../components/audit-data";
import realtimeData from "../components/realtime-data";
import salesReached from "../components/sales-reached";
import xinsalesReached from "../components/xinsales-reached.vue";
import salesTrend from "../components/sales-trend";
import xinsalesTrend from "../components/xinsales-trend.vue";
import chargeToday from "../components/charge-today";
import payToday from "../components/pay-today";
export default {
  name: "wel",
  data() {
    return {
      roleName:''
    };
  },
  props:{
    sysType:Number
  },
  created() {
    this.roleName=localStorage.getItem("roleName")
  },
  components: {
    quickLaunch,
    auditData,
    realtimeData,
    salesReached,
    salesTrend,
    chargeToday,
    payToday,
      xinsalesReached,
      xinsalesTrend
  },
  computed: {},
  methods: {}
};
</script>
<style lang="scss" scoped>
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
.item5 {
  grid-area: e;
}
.item6 {
  grid-area: f;
}
.item7 {
  grid-area: g;
}
.container {
  display: grid;
  width: 100%;
  // height: 95.5vh;
  grid-template-columns: repeat(auto-fill, 10%);
  // grid-template-rows: 140px 180px 180px 350px 140px;
  grid-template-areas:
    "a a a a a a a a a a"
    "b b b b b b b b b b"
    "c c c c c c c c c c"
    "d d d d e e e e e e"
    "f f f f f g g g g g";
}
</style>