yos_web/src/views/homePage/index.vue

<template>
  <div class="container">
    <el-row :gutter="20" class="normal-margin">
      <el-col :span="6">
       <user :data="dataOverview.user"></user>
      </el-col>
      <el-col :span="6">
       <flow ref="flow" :data="dataOverview.flow"></flow>
      </el-col>
      <el-col :span="6">
       <sms ref="sms" :data="dataOverview.sms"></sms>
      </el-col>
      <el-col :span="6">
       <storage ref="storage" :data="dataOverview.storage"></storage>
      </el-col>
    </el-row>
    <div class="normal-card normal-margin " shadow="none" v-for="item in modulesList" :key="item.systemid">
      <p class="title">{{item.systemname}}</p>
      <el-row :gutter="20">
        <el-col style="margin-top:16px" :span="4" v-for="modules in item.modules" :key="modules.systemmoduleid" @click.native="redictToModules(modules)">
          <div class="modules-item flex-align-center">
            <div class="setting-panel">
              <el-dropdown placement="top">
                <span class="el-dropdown-link">
                  <i class="el-icon-setting"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="addToshortBar(modules)">添加到快捷操作</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <img width="50" height="50" :src="modules.iconurl" alt="">
            <p>{{modules.systemmodulename}}<br><small class="info">{{(modules.systemmodule).toUpperCase()}}</small></p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import user from './modules/user.vue'
import flow from './modules/flow.vue'
import sms from './modules/sms.vue'
import storage from './modules/storage.vue'

export default {
  components:{
    user,
    flow,
    sms,
    storage
  },
  data () {
    return {
      modulesList:[],
      dataOverview:{}
    }
  },
  methods:{
    redictToModules (item) {
      this.$router.push({path:item.apps[0].path})
      sessionStorage.setItem('active_modules',JSON.stringify(item))
      window.sessionStorage.setItem('currentPath',item.apps[0].path)
    },
    async addToshortBar (item) {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.userauthforweb.userauth",
        "method": "create_usershortcuts",
        "content": {
          "systemmoduleid":item.systemmoduleid
        }
      })
      this.$store.dispatch('setUsershortcuts')
    },
    async getDataOverview () {
      const res = await this.$api.requested({
        "classname": "webmanage.dataanalysis.data",
        "method": "getDataOverview",
        "content": {}
      })
      this.dataOverview = res.data
      this.$refs.flow.piePlot.changeData([{num:res.data.flow.unUsed,type:'未使用'},{num:res.data.flow.used,type:'已使用'}])
      this.$refs.sms.piePlot.changeData([{num:res.data.sms.total - res.data.sms.used,type:'未使用'},{num:res.data.sms.used,type:'已使用'}])
      this.$refs.storage.piePlot.changeData([{num:res.data.storage.unUsed,type:'未使用'},{num:res.data.storage.used,type:'已使用'}])
    },
  },
  mounted () {
    this.modulesList = JSON.parse(sessionStorage.getItem('module_info'))
    this.getDataOverview()
  }
}

</script>
<style>
</style>
<style scoped>
.title{
  font-size: 16px;
  font-weight: bold;
}
.modules-item{
  position: relative;
  padding: 20px;
  border-radius: 8px;
  cursor: pointer;
}
.modules-item > p{
  margin-left: 15px;
}
.modules-item:hover{
  background: #EAF1FE;
}
.setting-panel{
  position: absolute;
  display: none;
  right:10px;
  top:10px;
}
.modules-item:hover .setting-panel{
  display: block;
}
</style>