feat:overview table组件

nezha-fronted/src/components/common/language/en.js

@@ -182,6 +182,20 @@ const en = {
     overview:{
       title:'Overview',
       contentTitle:'Nezha Management System',
+      asset:{
+        title:'Asset',
+        assetType:'Asset Type',
+        num:'Nun',
+        alert:'Alert',
+        alertLow:'Low',
+        alertMedium:'Medium',
+        alertHigh:'High',
+        inStock:'In Stock',
+        outStock:'Out Stock',
+        pingUp:'Up',
+        pingDown:'Down',
+
+      }
     }
   },
   validate: { //校验规则

nezha-fronted/src/components/page/dashboard/overview/overview.scss

@@ -52,22 +52,31 @@
   font-size: 30px !important;
 }
 .overview-content{
-  height: 100%;
+  height: calc(100% - 45px);
   width: 100%;
 }
 /*100份*/
 .overview-content .content-row-box{
-  margin: 15px 15px 15px 15px;
   width: 99%;
+  display: flex;
+  justify-content: space-between;
+  align-content: flex-start;
 }
 .content-row-box .content-col-box{
   border: 1px solid lightgrey;
-  padding: 15px;
+  padding:5px;
+  margin: 10px;
   display: inline-block;
 }
+.box-height-200{
+  height: 200px;
+}
 .box-height-250{
   height: 250px;
 }
+.box-height-300{
+  height: 300px;
+}
 .box-height-350{
   height: 350px;
 }

nezha-fronted/src/components/page/dashboard/overview/overview.vue

@@ -28,20 +28,21 @@
 
         <!--内容-->
         <div class="overview-content">
-          <el-scrollbar>
-            <div class="content-row-box">
-              <div class="content-col-box box-height-250 " style="width: 45%"></div>
-              <div class="content-col-box box-height-250 " style="width: 25%"></div>
-              <div class="content-col-box box-height-250 " style="width: 23%"></div>
+          <el-scrollbar style="height: 100%" ref="overviewScrollbar">
+            <div class="content-row-box" >
+              <div class="content-col-box box-height-200 " style="flex:3;">
+                <table-box :pop-data="assetStatData" ref="assetTab"></table-box>
+              </div>
+              <div class="content-col-box box-height-200 " style="flex: 2"></div>
+              <div class="content-col-box box-height-200 " style="flex:1;"></div>
             </div>
             <div class="content-row-box">
-              <div class="content-col-box box-height-350 " style="width: 45%"></div>
-              <div class="content-col-box box-height-350 "style="width: 50.2%"></div>
+              <div class="content-col-box box-height-250 " style="flex: 1;"></div>
             </div>
             <div class="content-row-box">
-              <div class="content-col-box box-height-400 "style="width: 25%"></div>
-              <div class="content-col-box box-height-400 "style="width: 48%"></div>
-              <div class="content-col-box box-height-400 "style="width: 20%"></div>
+              <div class="content-col-box box-height-300 "style="flex: 3"></div>
+              <div class="content-col-box box-height-300 "style="flex: 5;"></div>
+              <div class="content-col-box box-height-300 "style="flex: 2"></div>
             </div>
           </el-scrollbar>
         </div>
@@ -50,11 +51,17 @@
 </template>
 
 <script>
+  import tableBox from "./tableBox";
+  import axios from 'axios';
   export default {
     name: "overview",
+    components:{
+      'table-box':tableBox
+    },
     props:[],
     data(){
       return {
+        assetStatData:{},
         sysTime:'',
         sysDate:'',
         sysWeek:'',
@@ -63,6 +70,121 @@
     created() {
     },
     methods:{
+      /*加载数据 start*/
+      queryAssetData:function(){
+        // this.$refs.assetTab.startLoading();
+        axios.get('/overview/assetStat').then((res)=>{
+          let response=res.data;
+          if(response.msg == 'success'){
+            let showData=response.data.typeStat;
+            this.assetStatData=this.formatAssetData(showData,response.data.totalStat);
+            // this.$refs.assetTab.endLoading();
+          }
+        })
+      },
+      formatAssetData:function(data,totalData){
+        if(data && totalData){
+          let assetStatData={
+            screen:{ //左侧概览信息
+              show:true,
+              total:{ //左侧上方大图标及total信息
+                show:true,
+                num:totalData.total,
+                title:this.$t('dashboard.overview.asset.title'),
+                showPopover:true,
+                popover:[
+                  {
+                    label:this.$t('dashboard.overview.asset.inStock'),
+                    value:totalData.inStock
+                  },
+                  {
+                    label:this.$t('dashboard.overview.asset.outStock'),
+                    value:totalData.outStock
+                  },
+                  {
+                    label:this.$t('dashboard.overview.asset.alertLow'),
+                    value:totalData.alertLow
+                  },
+                  {
+                    label:this.$t('dashboard.overview.asset.alertMedium'),
+                    value:totalData.alertMedium
+                  },
+                  {
+                    label:this.$t('dashboard.overview.asset.alertHigh'),
+                    value:totalData.alertHigh
+                  },
+                ]
+              },
+              stat:{//左侧下方 小图标，
+                show:true,
+                up:totalData.pingUp,
+                down:totalData.pingDown
+              }
+            },
+            table:{//右侧table
+              show:true,
+              tableData:data,
+              tableLabel:[
+                {
+                  label:this.$t('dashboard.overview.asset.assetType'),
+                  prop:'name',
+                  show:true
+                },
+                {
+                  label:this.$t('dashboard.overview.asset.num'),
+                  prop:'total',
+                  show:true,
+                  showPopover:true,
+                  popover:[
+                    {
+                      label:this.$t('dashboard.overview.asset.inStock'),
+                      prop:'inStock'
+                    },
+                    {
+                      label:this.$t('dashboard.overview.asset.outStock'),
+                      prop:'outStock'
+                    },
+                    {
+                      label:this.$t('dashboard.overview.asset.pingUp'),
+                      prop:'pingUp'
+                    },
+                    {
+                      label:this.$t('dashboard.overview.asset.pingDown'),
+                      prop:'pingDown'
+                    },
+                  ]
+                },
+                {
+                  label:this.$t('dashboard.overview.asset.alert'),
+                  prop:'alertTotal',
+                  show:true,
+                  showPopover:true,
+                  popover:[
+                    {
+                      label:this.$t('dashboard.overview.asset.alertLow'),
+                      prop:'alertLow'
+                    },
+                    {
+                      label:this.$t('dashboard.overview.asset.alertMedium'),
+                      prop:'alertMedium'
+                    },
+                    {
+                      label:this.$t('dashboard.overview.asset.alertHigh'),
+                      prop:'alertHigh'
+                    },
+                  ]
+                }
+              ]
+            }
+          }
+          return assetStatData;
+        }else{
+          return {};
+          console.error('the param is invalid');
+        }
+
+      },
+      /*加载数据 end*/
       /*header 时间处理 start*/
       initDate:function(){
         this.sysTime=this.getTime();
@@ -123,6 +245,7 @@
     },
     mounted() {
       this.initDate();
+      this.queryAssetData();
     }
   }
 </script>

nezha-fronted/src/components/page/dashboard/overview/tableBox.scss

@@ -0,0 +1,66 @@
+.table-box{
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+.table-box .table-box-left{
+  flex: 1;
+}
+.table-box .table-box-right{
+  flex:2;
+}
+.table-screen{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.table-screen .screen-top{
+  flex: 1;
+}
+.table-screen .screen-bottom{
+  flex: 1;
+}
+.table-screen .screen-row{
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+.screen-row .screen-col{
+  flex: 1;
+  text-align: center;
+}
+.super-icon{
+font-size: 80px !important;
+}
+.middle-font{
+  font-size: 30px !important;
+  font-weight: 600;
+}
+.middle-icon{
+  font-size: 30px !important;
+  font-weight: 700;
+  margin-right: 5px;
+}
+.avg-children-space{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.super-font{
+  font-size: 40px !important;
+  font-weight: 700;
+}
+.red-icon{
+  color: #EE2E13;
+}
+.green-icon{
+  color: #03D722;
+}
+popover-container{
+
+}
+.overview-table {
+  background-color: #FCFCFC !important;
+}
+

nezha-fronted/src/components/page/dashboard/overview/tableBox.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="table-box">
+      <loading ref="loading"></loading>
+        <div class="table-box-left">
+          <div class="table-screen" v-show="showData.screen.show">
+            <div class="screen-top" v-show="showData.screen.total.show">
+              <div class="screen-row">
+                <div class="screen-col"><i class="nz-icon nz-icon-asset super-icon"></i></div>
+                <div class="screen-col">
+                  <div>{{showData.screen.total.title}}</div>
+                  <template v-if="showData.screen.total.showPopover">
+                    <el-popover trigger="hover" placement="top">
+                      <div class="popover-container">
+                        <div v-for="(pop,index) in showData.screen.total.popover">
+                          <span>{{pop.label}}:</span>&nbsp;
+                          <span>{{pop.value}}</span>
+                        </div>
+                      </div>
+                      <template slot="reference">
+                        <div class="super-font">{{showData.screen.total.num}}</div>
+                      </template>
+                    </el-popover>
+                  </template>
+                  <template v-else>
+                    <div class="super-font">{{showData.screen.total.num}}</div>
+                  </template>
+                </div>
+              </div>
+            </div>
+            <div class="screen-bottom" v-show="showData.screen.stat.show">
+              <div class="screen-row">
+                <div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-up middle-icon green-icon"></i><span class="middle-font">{{showData.screen.stat.up}}</span></div>
+                <div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-down middle-icon red-icon"></i><span class="middle-font">{{showData.screen.stat.down}}</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="table-box-right overview-table" v-show="showData.table.show">
+          <el-table
+            class="overview-table"
+            :data="showData.table.tableData"
+            v-scrollBar:el-table
+            height="100%"
+          >
+            <el-table-column
+              :resizable="false"
+              v-for="(item, index) in showData.table.tableLabel"
+              v-if="item.show"
+              :key="`col-${index}`"
+              :label="item.label"
+              show-overflow-tooltip
+              min-width="110px"
+            >
+              <template slot-scope="scope" :column="item">
+                <template v-if="item.showPopover">
+                  <el-popover trigger="hover" placement="right" >
+                    <div class="popover-container">
+                      <div v-for="(pop,index) in item.popover">
+                        <span>{{pop.label}}:</span>&nbsp;
+                        <span>{{scope.row[pop.prop]}}</span>
+                      </div>
+                    </div>
+                    <template slot="reference">
+                      <span>{{scope.row[item.prop]}}</span>
+                    </template>
+                  </el-popover>
+                </template>
+                <template v-else>
+                  {{scope.row[item.prop]}}
+                </template>
+              </template>
+            </el-table-column>
+
+          </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "tableBox",
+    components:{
+    },
+    props: {
+      popData: {type:Object,required:true},
+    },
+    data(){
+      return {
+        showData:{
+          screen:{ //左侧概览信息
+            show:true,
+            total:{ //左侧上方大图标及total信息
+              show:true,
+              num:0,
+              title:''
+            },
+            stat:{//左侧下方 小图标，
+              show:true,
+              up:0,
+              down:0
+            }
+          },
+          table:{//右侧table
+            show:true,
+            tableData:[],
+            tableLabel:[]
+          }
+        }
+      }
+    },
+    created() {
+    },
+    methods:{
+      startLoading(){
+        this.$refs.loading.startLoading();
+      },
+      endLoading(){
+        this.$refs.loading.endLoading();
+      }
+    },
+    mounted() {
+    },
+    watch:{
+      popData:{
+        immediate:true,
+        deep:true,
+        handler(n,o){
+          this.showData=JSON.parse(JSON.stringify(n));
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+@import "tableBox.scss";
+</style>
+<style>
+  .overview-table th, .overview-table tr {
+    background-color: #FCFCFC !important;
+  }
+</style>

nezha-fronted/src/main.js

@@ -37,6 +37,7 @@ import modelBox from "./components/common/rightBox/modelBox"; //model弹框
 import selectArea from "./components/common/popBox/selectArea"; //dc弹框
 import PerfectScrollbar from "perfect-scrollbar";
 import "perfect-scrollbar/css/perfect-scrollbar.css";
+import loading from "./components/common/loading";
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -56,6 +57,7 @@ Vue.component("cabinet-config-box", cabinetConfigBox);
 Vue.component("dc-box", dcBox);
 Vue.component("model-box", modelBox);
 Vue.component("select-area", selectArea);
+Vue.component('loading',loading);
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$post = post;