tire-platform-ui/src/views/wel/home/equipmentControl/landTransportation.vue

<template>
  <div class="container">
    <quick-launch class="item1" :sysType="sysType" />
    <audit-data class="item2" :sysType="sysType"/>
    <sales-reached class="item3" :sysType="sysType"/>
<!--    <realtime-data class="item3" :sysType="sysType"/>-->
<!--    <sales-reached class="item4" :sysType="sysType" v-if="sysType!=4||roleName!='采购'"/>-->
<!--    <sales-trend class="item5" :sysType="sysType" v-if="sysType!=4||roleName!='采购'"/>-->
<!--    <charge-today class="item6" :sysType="sysType" v-if="sysType!=4||roleName!='采购'"/>-->
<!--    <pay-today class="item7" :sysType="sysType" v-if="sysType!=4||roleName!='采购'"/>-->
  </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 salesTrend from "./components/sales-trend";
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
  },
  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 480px;
  //grid-template-rows: 140px 180px 380px 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>