iot-front-ui/src/components/dashboard/iocDashboard.vue

<template>
  <div class="ioc-dashboard">
    <a-row :gutter="[12,12]">
      <a-col :span="18">
        <!--常用功能-->
        <div class="dashboard-popFunc card-style">
          <IocCard title="常用功能">
            <template #title-extra>
              <a-button type="link" style="color: #C6C8CC;font-size: 12px" @click="openFuncManage">
                功能管理
                <a-icon type="right"></a-icon>
              </a-button>
            </template>
            <a-row>
              <a-col v-for="(item, index) in commonMenu" :span="6" :key="index" >
                <div @click="toRoute(item.router)">
                  <IocFunction :item="item" ></IocFunction>
                </div>
              </a-col>
            </a-row>
          </IocCard>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="dashboard-msg card-style">
          <DashboardMessageCard  ></DashboardMessageCard>
        </div>
      </a-col>
      <a-col :span="18">
        <div class="dashboard-summary card-style">
          <DashboardPortrait ></DashboardPortrait>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="dashboard-more card-style">
          <DashboardMore></DashboardMore>
        </div>
      </a-col>
    </a-row>


    <FunctionManage v-if="showFuncManage" :visible.sync="showFuncManage" :common-function.sync="commonMenu"></FunctionManage>

  </div>
</template>

<script>
import IocCard from "@/components/common/card.vue";
import IocFunction from "@/components/dashboard/commonFuncManage/function.vue";
import DashboardMessageCard from "@/components/dashboard/message/dashboardMessageCard.vue";
import DashboardPortrait from "@/components/dashboard/portrait/dashboardPortrait.vue";
import DashboardMore from "@/components/dashboard/more/dashboardMore.vue";
import FunctionManage from "@/components/dashboard/commonFuncManage/functionManage.vue";


export default {
  data() {
    return {
      showFuncManage: false,
      commonMenu: []
    }
  },
  components: {
    IocCard,
    IocFunction,
    DashboardMessageCard,
    DashboardPortrait,
    DashboardMore,
    FunctionManage,
  },
  mounted() {
    this.commonMenu = this.$store.menuStore().commonFunction;
  },
  methods: {
    openFuncManage() {
      this.showFuncManage = true;
    },
    toRoute(route) {
      this.$router.push({path: route})
    },
  }
}
</script>

<style lang="less" scoped>
.ioc-dashboard {
  width: 100%;
  height: 100%;
  padding: 12px 18px;
  background-color: #f0f2f5;
  overflow-y: auto;
  .dashboard-popFunc {
    height: 220px;
    background-color: white;
  }
  .dashboard-msg {
    height: 220px;
    background-color: white;
  }
  .dashboard-summary {
    background-color: white;
    height: 765px;
    overflow-y: hidden;
  }
  .dashboard-more {
    background-color: white;
    height: 765px;
    overflow-y: hidden;

  }
}
</style>