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

<template>
  <div class="ioc-dashboard">
    <a-row>
      <a-col :span="18">
        <!--常用功能-->
        <div class="dashboard-popFunc">
          <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">
                <IocFunction :item="item"></IocFunction>
              </a-col>
            </a-row>
          </IocCard>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="dashboard-msg">
          <DashboardMessageCard  ></DashboardMessageCard>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="18">
        <div class="dashboard-summary">
          <DashboardPortrait ></DashboardPortrait>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="dashboard-more">
          <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 DataSituation from "@/components/dashboard/more/space/DataSituation.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";
import {requireImg} from "@/utils/requireImg";


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

<style lang="less" scoped>
.ioc-dashboard {
  width: 100%;
  height: 100%;
  padding: 0 15px 15px;
  background-color: #f0f2f5;
  overflow-y: auto;
  div {
    border-radius: 4px;
  }
  .dashboard-popFunc {
    margin-right: 15px;
    margin-top: 12px;
    height: 220px;
    background-color: white;
  }
  .dashboard-msg {
    height: 220px;
    background-color: white;
  }
  .dashboard-summary {
    background-color: white;
    margin-right: 15px;
    margin-top: 12px;
    height: 765px;
  }
  .dashboard-more {
    height: 765px;

  }
}
</style>