7/6

src/views/homePage/index.vue

@@ -1,8 +1,17 @@
 <template>
   <div class="container">
     <el-row :gutter="20" class="normal-margin">
-      <el-col :span="6" v-for="o in 4" :key="o">
-        <div class="normal-card"></div>
+      <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">
@@ -10,7 +19,7 @@
       <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">
-            <img width="50" height="50" src="../../assets/modules_icon.png" alt="">
+            <img width="50" height="50" :src="modules.iconurl" alt="">
             <p>{{modules.systemmodulename}}<br><small class="info">{{(modules.systemmodule).toUpperCase()}}</small></p>
           </div>
         </el-col>
@@ -20,10 +29,22 @@
 </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:[]
+      modulesList:[],
+      dataOverview:{}
     }
   },
   methods:{
@@ -31,10 +52,22 @@ export default {
       this.$router.push({path:item.apps[0].path})
       sessionStorage.setItem('active_modules',JSON.stringify(item))
       window.sessionStorage.setItem('currentPath',item.apps[0].path)
-    }
+    },
+    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()
   }
 }
 

src/views/homePage/modules/flow.vue

@@ -0,0 +1,88 @@
+
+<template>
+<el-card shadow="none" :body-style="{height:'112px'}">
+  <div class="flex-align-center flex-between height-full">
+    <div v-if="data" style="align-self:stretch">
+      <div class="flex-end height-full">
+        <div style="flex:1;width:100%">
+          <p class="info" style="margin-bottom:10px">已使用流量</p>
+          <p class="num">{{data.used > 1073741824?(data.used / Math.pow(1024,3)).toFixed(2)+'GB':data.used > 1048576?(data.used / Math.pow(1024,2)).toFixed(2)+'MB':data.used > 1024?(data.used / Math.pow(1024,1)).toFixed(2)+'KB':data.used+'B'}}</p>
+        </div>
+        <p class="info" style="width:100%">总流量&emsp;<span style="color:#666">{{data.total}}GB</span></p>
+      </div>
+    </div>
+    <div id="flow"></div>
+  </div>
+</el-card>
+</template>
+
+<script>
+import { Pie } from '@antv/g2plot';
+
+export default {
+  props:['data'],
+  data () {
+    return  {
+      piePlot () {},
+    }
+  },
+  methods:{
+    renderBar () {
+      this.piePlot = new Pie('flow', {
+        appendPadding: 10,
+        data:[],
+        width:100,
+        height:100,
+        tooltip: {
+          formatter: (datum) => {
+            let value = datum.num > 1073741824?(datum.num / Math.pow(1024,3)).toFixed(2)+'GB':datum.num > 1048576?(datum.num / Math.pow(1024,2)).toFixed(2)+'MB':datum.num > 1024?(datum.num / Math.pow(1024,1)).toFixed(2)+'KB':datum.num+'B'
+            return { name: datum.type, value: value }
+          },
+        },
+        label:{
+          type: 'inner',
+          content:''
+        },
+        legend:false,
+        angleField: 'num',
+        colorField: 'type',
+        color: ['#FBB33B', '#F77655'],
+        radius: 0.9,
+        interactions: [{ type: 'element-active' }],
+      });
+      this.piePlot.render();
+    }
+  },
+  mounted() {
+    this.renderBar()
+  }
+}
+
+</script>
+<style>
+.el-card__header {
+  padding: 10px 16px !important;
+}
+</style>
+<style scoped>
+.flex-end {
+  display: flex;
+  flex-direction:column;
+  justify-content: space-between;
+}
+.info{
+  font-size: 14px;
+  text-align:left;
+}
+.height-full{
+  height: 100%;
+}
+.num{
+  font-size: 30px;
+  font-family: HelveticaNeue-, HelveticaNeue;
+  font-weight: normal;
+  color: #333333;
+  line-height: 38px;
+  text-align: left;
+}
+</style>

src/views/homePage/modules/sms.vue

@@ -0,0 +1,82 @@
+
+<template>
+<el-card shadow="none" :body-style="{height:'112px'}">
+  <div class="flex-align-center flex-between height-full">
+    <div v-if="data" style="align-self:stretch">
+      <div class="flex-end height-full">
+        <div style="flex:1;width:100%">
+          <p class="info" style="margin-bottom:10px">短信已使用</p>
+          <p class="num">{{data.used }}</p>
+        </div>
+        <p class="info" style="width:100%">短信总量&emsp;<span style="color:#666">{{data.total}}</span></p>
+      </div>
+    </div>
+    <div id="sms"></div>
+  </div>
+</el-card>
+</template>
+
+<script>
+import { Pie } from '@antv/g2plot';
+
+export default {
+  props:['data'],
+  data () {
+    return  {
+      piePlot () {},
+    }
+  },
+  methods:{
+    renderBar () {
+      this.piePlot = new Pie('sms', {
+        appendPadding: 10,
+        data:[],
+        width:100,
+        height:100,
+        label:{
+          type: 'inner',
+          content:''
+        },
+        legend:false,
+        angleField: 'num',
+        colorField: 'type',
+        color: ['#38C2F6', '#5D76E4'],
+        radius: 0.9,
+        interactions: [{ type: 'element-active' }],
+      });
+      this.piePlot.render();
+    }
+  },
+  mounted() {
+    this.renderBar()
+  }
+}
+
+</script>
+<style>
+.el-card__header {
+  padding: 10px 16px !important;
+}
+</style>
+<style scoped>
+.flex-end {
+  display: flex;
+  flex-direction:column;
+  justify-content: space-between;
+}
+.info{
+  font-size: 14px;
+  text-align:left;
+}
+.height-full{
+  height: 100%;
+}
+.num{
+  font-size: 30px;
+  font-family: HelveticaNeue-, HelveticaNeue;
+  font-weight: normal;
+  color: #333333;
+  line-height: 38px;
+  text-align: left;
+}
+</style>

src/views/homePage/modules/storage.vue

@@ -0,0 +1,88 @@
+
+<template>
+<el-card shadow="none" :body-style="{height:'112px'}">
+  <div class="flex-align-center flex-between height-full">
+    <div v-if="data" style="align-self:stretch">
+      <div class="flex-end height-full">
+        <div style="flex:1;width:100%">
+          <p class="info" style="margin-bottom:10px">云存储已使用</p>
+          <p class="num">{{data.used > 1073741824?(data.used / Math.pow(1024,3)).toFixed(2)+'GB':data.used > 1048576?(data.used / Math.pow(1024,2)).toFixed(2)+'MB':data.used > 1024?(data.used / Math.pow(1024,1)).toFixed(2)+'KB':data.used+'B'}}</p>
+        </div>
+        <p class="info" style="width:100%">云存储总容量&emsp;<span style="color:#666">{{data.total}}GB</span></p>
+      </div>
+    </div>
+    <div id="storage"></div>
+  </div>
+</el-card>
+</template>
+
+<script>
+import { Pie } from '@antv/g2plot';
+
+export default {
+  props:['data'],
+  data () {
+    return  {
+      piePlot () {},
+    }
+  },
+  methods:{
+    renderBar () {
+      this.piePlot = new Pie('storage', {
+        appendPadding: 10,
+        data:[],
+        width:100,
+        height:100,
+        tooltip: {
+          formatter: (datum) => {
+            let value = datum.num > 1073741824?(datum.num / Math.pow(1024,3)).toFixed(2)+'GB':datum.num > 1048576?(datum.num / Math.pow(1024,2)).toFixed(2)+'MB':datum.num > 1024?(datum.num / Math.pow(1024,1)).toFixed(2)+'KB':datum.num+'B'
+            return { name: datum.type, value: value, rate: 20 }
+          },
+        },
+        label:{
+          type: 'inner',
+          content:''
+        },
+        legend:false,
+        angleField: 'num',
+        colorField: 'type',
+        color: ['#5D76E4', '#51C186'],
+        radius: 0.9,
+        interactions: [{ type: 'element-active' }],
+      });
+      this.piePlot.render();
+    }
+  },
+  mounted() {
+    this.renderBar()
+  }
+}
+
+</script>
+<style>
+.el-card__header {
+  padding: 10px 16px !important;
+}
+</style>
+<style scoped>
+.flex-end {
+  display: flex;
+  flex-direction:column;
+  justify-content: space-between;
+}
+.info{
+  font-size: 14px;
+  text-align:left;
+}
+.height-full{
+  height: 100%;
+}
+.num{
+  font-size: 30px;
+  font-family: HelveticaNeue-, HelveticaNeue;
+  font-weight: normal;
+  color: #333333;
+  line-height: 38px;
+  text-align: left;
+}
+</style>

src/views/homePage/modules/user.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-card v-if="data" shadow="none">
+    <div slot="header">数据概况</div>
+    <el-row>
+      <el-col :span="8">
+        <p class="info ">员工总数</p>
+        <p class="num">{{data.employees}}</p>
+      </el-col>
+      <el-col :span="8">
+        <p class="info">用户数</p>
+        <p class="num">{{data.users}}</p>
+      </el-col>
+      <el-col :span="8">
+        <p class="info">在线用户数</p>
+        <p class="num">{{data.onlineUsers}}</p>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+export default {
+  props:['data']
+}
+
+</script>
+<style>
+.el-card__header {
+  padding: 10px 16px !important;
+}
+</style>
+<style scoped>
+.info{
+  font-size: 14px;
+  text-align:center;
+  margin-bottom:10px;
+}
+.num{
+  font-size: 30px;
+  font-family: HelveticaNeue-, HelveticaNeue;
+  font-weight: normal;
+  color: #333333;
+  line-height: 38px;
+  text-align: center;
+}
+</style>