yos_meida/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>
    <el-dialog
        title="提醒"
        :visible.sync="dialogVisible"
        width="600px"
        >
      <span>{{contentMsg}}</span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">下次再说</el-button>
      <el-button v-if="type[0].usertype == '22'" @click="onReminder" size="small">提醒主账号付费</el-button>
      <el-button type="primary" @click="onPay" size="small">去付费</el-button>
  </span>
    </el-dialog>
  </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:{},
      dialogVisible:false,
      contentMsg:'',
      type:"",
      nowAccount:'',
      userids:[],
      flag:''
    }
  },
  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.userauth.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:'已使用'}])
    },
    async queryAccount(){
      sessionStorage.setItem('flag','1')
      this.nowAccount = []
      const res = await this.$api.requested({
        "classname": "webmanage.site.paymentrules",
        "method": "queryRemind",
        "content": {},
      })
      this.nowAccount = res.data[0]
      if (res.data.length > 1){

        this.dialogVisible = true
        this.contentMsg = '【'+res.data[0].partitionname+'】将在'+res.data[0].days+'天后到期，请尽快续费！'
      }else {
        this.queryReminder()
      }
    },
    async queryReminder(){
      this.nowAccount = []
      const res = await this.$api.requested({
        "classname": "webmanage.site.paymentrules",
        "method": "queryRemindUser",
        "content": {},
      })
      if (res.data.length > 0){
        this.dialogVisible = true
        let name = ''
        this.userids = []
        this.nowAccount = res.data[0]
        res.data.forEach((item,index)=>{
          name = name + item.name
          this.userids[index] = item.userid
        })
        this.contentMsg = name + '申请账号付费，请前往处理！'
      }

    },
    onPay(){
      let module = JSON.parse(sessionStorage.getItem('module_info'))
      let moduleList = []
      module.forEach(item=>{
        if (item.systemname === '通用'){
          moduleList = item
        }
      })
      let apps = []
      moduleList.modules.forEach(item=>{
        if (item.systemmodulename === '个人中心'){
          apps = item
        }
      })
      sessionStorage.setItem('active_modules',JSON.stringify(apps))
      this.activePath = '/pay_orders'
      this.$router.replace({path:'/pay_orders',query:{isPay:'2',id:this.nowAccount.sys_site_systempartitionid,userid:this.userids}})
      sessionStorage.setItem('currentPath','/pay_orders')
      let active_modules = JSON.parse(sessionStorage.getItem('active_modules'))
      this.auth_data = active_modules.apps
    },
    async onReminder(){
      const res = await this.$api.requested({
        "classname": "system.payorder.payorder",
        "method": "sendMessage",
        "content": {
          "sys_payorderid": 0
        },
      })
      this.dialogVisible = false
    }
  },
  mounted () {
    this.modulesList = JSON.parse(sessionStorage.getItem('module_info'))
    this.type = JSON.parse(sessionStorage.getItem('account_list'))
    this.flag = JSON.parse(sessionStorage.getItem('flag'))
    this.userids[0] =  this.type[0].userid
    this.getDataOverview()
    if (this.flag != '1'){
      this.queryAccount()
    }
  },
  created() {

  }
}

</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>