From 0fa2db5c9603661e9d2ce57032722e10d77c63be Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 19 May 2020 11:05:58 +0800
Subject: [PATCH 1/8] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialog/index.vue               | 24 +++++-
 .../ListTable/TableAction/ExportDialog.vue    |  2 +-
 .../ListTable/TableAction/ImportDialog.vue    | 79 ++++++++++++++++---
 src/store/modules/common.js                   |  4 +-
 src/utils/request.js                          | 12 +--
 5 files changed, 102 insertions(+), 19 deletions(-)

diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
index f93878e35..ed65d0cb9 100644
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -7,8 +7,8 @@
     <slot />
     <div slot="footer" class="dialog-footer">
       <slot name="footer">
-        <el-button size="small" @click="onCancel">{{ $t('common.Cancel') }}</el-button>
-        <el-button type="primary" size="small" @click="onConfirm">{{ $t('common.Confirm') }}</el-button>
+        <el-button v-if="showCancel" size="small" @click="onCancel">{{ cancelTitle }}</el-button>
+        <el-button v-if="showConfirm" type="primary" size="small" @click="onConfirm">{{ confirmTitle }}</el-button>
       </slot>
     </div>
   </el-dialog>
@@ -21,6 +21,26 @@ export default {
     title: {
       type: String,
       default: 'Title'
+    },
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+    cancelTitle: {
+      type: String,
+      default() {
+        return this.$t('common.Cancel')
+      }
+    },
+    showConfirm: {
+      type: Boolean,
+      default: true
+    },
+    confirmTitle: {
+      type: String,
+      default() {
+        return this.$t('common.Confirm')
+      }
     }
   },
   data() {
diff --git a/src/components/ListTable/TableAction/ExportDialog.vue b/src/components/ListTable/TableAction/ExportDialog.vue
index 527404204..a875d223d 100644
--- a/src/components/ListTable/TableAction/ExportDialog.vue
+++ b/src/components/ListTable/TableAction/ExportDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="$t('common.Export')" :visible.sync="showExportDialog" center @confirm="handleExportConfirm()" @cancel="handleExportCancel()">
+  <Dialog :title="$t('common.Export')" :visible.sync="showExportDialog" @confirm="handleExportConfirm()" @cancel="handleExportCancel()">
     <el-form label-position="left" style="padding-left: 50px">
       <el-form-item :label="this.$t('common.imExport.ExportRange')" :label-width="'100px'">
         <el-radio v-model="exportOption" class="export-item" label="1">{{ this.$t('common.imExport.ExportAll') }}</el-radio>
diff --git a/src/components/ListTable/TableAction/ImportDialog.vue b/src/components/ListTable/TableAction/ImportDialog.vue
index 25740d52f..55efa3eae 100644
--- a/src/components/ListTable/TableAction/ImportDialog.vue
+++ b/src/components/ListTable/TableAction/ImportDialog.vue
@@ -1,10 +1,10 @@
 <template>
-  <Dialog :title="$t('common.Import')" :visible.sync="showImportDialog" center @confirm="handleImportConfirm()" @cancel="handleImportCancel('import')">
+  <Dialog :title="$t('common.Import')" :visible.sync="showImportDialog" @confirm="handleImportConfirm" @cancel="handleImportCancel()">
     <el-form label-position="left" style="padding-left: 50px">
       <el-form-item :label="$t('common.Import' )" :label-width="'100px'">
         <el-radio v-model="importOption" class="export-item" label="1">{{ this.$t('common.Create') }}</el-radio>
         <el-radio v-model="importOption" class="export-item" label="2">{{ this.$t('common.Update') }}</el-radio>
-        <div>
+        <div style="line-height: 1.5">
           <span v-if="importOption==='1'" class="el-upload__tip">
             {{ this.$t('common.imExport.downloadImportTemplateMsg') }}
             <el-link type="success" :underline="false" :href="downloadImportTempUrl">{{ this.$t('common.Download') }}</el-link>
@@ -22,12 +22,20 @@
           :http-request="handleImport"
           list-type="text/csv"
           :limit="1"
+          :auto-upload="false"
+          :before-upload="beforeUpload"
         >
           <el-button size="mini" type="default">{{ this.$t('common.SelectFile') }}</el-button>
-          <div slot="tip" class="el-upload__tip">{{ this.$t('common.imExport.onlyCSVFilesTips') }}</div>
+          <div slot="tip" :class="uploadHelpTextClass" style="line-height: 1.5">{{ this.$t('common.imExport.onlyCSVFilesTips') }}</div>
         </el-upload>
       </el-form-item>
     </el-form>
+    <div v-if="errorMsg" class="error-msg error-results">
+      <ul v-if="typeof errorMsg === 'object'">
+        <li v-for="(item, index) in errorMsg" :key="item + '-' + index"> {{ item }}</li>
+      </ul>
+      <span v-else>{{ errorMsg }}</span>
+    </div>
   </Dialog>
 </template>
 
@@ -53,7 +61,9 @@ export default {
   data() {
     return {
       showImportDialog: false,
-      importOption: '1'
+      importOption: '1',
+      isCsv: true,
+      errorMsg: ''
     }
   },
   computed: {
@@ -65,6 +75,13 @@ export default {
     },
     downloadImportTempUrl() {
       return process.env.VUE_APP_BASE_API + this.url + '?format=csv&template=import&limit=1'
+    },
+    uploadHelpTextClass() {
+      const cls = ['el-upload__tip']
+      if (!this.isCsv) {
+        cls.push('error-msg')
+      }
+      return cls
     }
   },
   mounted() {
@@ -77,22 +94,53 @@ export default {
       this.$axios.put(
         this.upLoadUrl,
         item.file,
-        { headers: { 'Content-Type': 'text/csv' }}
+        { headers: { 'Content-Type': 'text/csv' }, disableFlashMsg: true }
       ).then((data) => {
         const msg = this.$t('common.imExport.updateSuccessMsg', { count: data.length })
-        this.$message.success(msg)
+        this.onSuccess(msg)
+      }).catch(error => {
+        this.catchError(error)
       })
     },
     performCreate(item) {
       this.$axios.post(
         this.upLoadUrl,
         item.file,
-        { headers: { 'Content-Type': 'text/csv' }}
+        { headers: { 'Content-Type': 'text/csv' }, disableFlashMsg: true }
       ).then((data) => {
         const msg = this.$t('common.imExport.createSuccessMsg', { count: data.length })
-        this.$message.success(msg)
+        this.onSuccess(msg)
+      }).catch(error => {
+        this.catchError(error)
       })
     },
+    catchError(error) {
+      this.$refs.upload.clearFiles()
+      if (error.response && error.response.status === 400) {
+        const errorData = error.response.data
+        const totalErrorMsg = []
+        errorData.forEach((value, index) => {
+          if (typeof value === 'string') {
+            totalErrorMsg.push(`line ${index}. ${value}`)
+          } else {
+            const errorMsg = [`line ${index}. `]
+            for (const [k, v] of Object.entries(value)) {
+              if (v) {
+                errorMsg.push(`${k}: ${v}`)
+              }
+            }
+            if (errorMsg.length > 1) {
+              totalErrorMsg.push(errorMsg.join(' '))
+            }
+          }
+        })
+        this.errorMsg = totalErrorMsg
+      }
+    },
+    onSuccess(msg) {
+      this.errorMsg = ''
+      this.$message.success(msg)
+    },
     downloadCsv(url) {
       const a = document.createElement('a')
       a.href = url
@@ -121,11 +169,24 @@ export default {
     },
     handleImportCancel() {
       this.showImportDialog = false
+    },
+    beforeUpload(file) {
+      this.isCsv = _.endsWith(file.name, 'csv')
+      return this.isCsv
     }
   }
 }
 </script>
 
-<style lang='less' scoped>
+<style lang='scss' scoped>
+  @import "~@/styles/element-variables.scss";
+  .error-msg {
+    color: $--color-danger;
+  }
+  .error-msg.error-results {
+    background-color: #f3f3f4;
+    max-height: 200px;
+    overflow: auto
+  }
 
 </style>
diff --git a/src/store/modules/common.js b/src/store/modules/common.js
index 1a904364b..d6d0e97f8 100644
--- a/src/store/modules/common.js
+++ b/src/store/modules/common.js
@@ -8,7 +8,7 @@ const getDefaultState = () => {
 const state = getDefaultState()
 
 const mutations = {
-  setUrlMeta: (state, { url, meta }) => {
+  SET_URL_META: (state, { url, meta }) => {
     state.metaMap[url] = meta
   }
 }
@@ -24,7 +24,7 @@ const actions = {
     }
     return new Promise((resolve, reject) => {
       optionUrlMeta(url).then(meta => {
-        commit('setUrlMeta', { url, meta })
+        commit('SET_URL_META', { url, meta })
         resolve(meta)
       }).catch(error => {
         reject(error)
diff --git a/src/utils/request.js b/src/utils/request.js
index a1a56b1c8..f9aa4dd35 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -75,11 +75,13 @@ service.interceptors.response.use(
         window.location = '/auth/login/'
       })
     }
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    })
+    if (!response.config.disableFlashMsg) {
+      Message({
+        message: error.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+    }
     return Promise.reject(error)
   }
 )

From 03450c05ed228dddb8ec1b195fa157e73633ece4 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 19 May 2020 19:57:26 +0800
Subject: [PATCH 2/8] =?UTF-8?q?[Update]=20=E6=B7=BB=E5=8A=A0dashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +
 src/components/IBox/index.vue                 |  10 +-
 src/components/SummaryCard/index.vue          |  70 +++++++--
 src/i18n/langs/cn.json                        |   6 +
 src/main.js                                   |   3 +
 src/styles/element-ui.scss                    |  17 +++
 src/styles/index.scss                         |   8 ++
 .../DatesLoginSummary/LoginActivePin.vue      |  52 +++++++
 .../DatesLoginSummary/LoginMetric.vue         | 134 ++++++++++++++++++
 .../dashboard/DatesLoginSummary/LoginTop.vue  | 101 +++++++++++++
 .../dashboard/DatesLoginSummary/index.vue     |  72 ++++++++++
 src/views/dashboard/ResourceSummary.vue       |  80 +++++++++++
 src/views/dashboard/index.vue                 |  33 ++---
 yarn.lock                                     |  48 +++++++
 14 files changed, 600 insertions(+), 36 deletions(-)
 create mode 100644 src/views/dashboard/DatesLoginSummary/LoginActivePin.vue
 create mode 100644 src/views/dashboard/DatesLoginSummary/LoginMetric.vue
 create mode 100644 src/views/dashboard/DatesLoginSummary/LoginTop.vue
 create mode 100644 src/views/dashboard/DatesLoginSummary/index.vue
 create mode 100644 src/views/dashboard/ResourceSummary.vue

diff --git a/package.json b/package.json
index c34b19709..52d687dc3 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "deepmerge": "^4.2.2",
+    "echarts": "^4.7.0",
     "element-ui": "2.13.0",
     "eslint-plugin-html": "^6.0.0",
     "jquery": "^3.5.0",
@@ -41,6 +42,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "v-charts": "^1.19.0",
     "vue": "2.6.10",
     "vue-codemirror-lite": "^1.0.4",
     "vue-cookie": "^1.1.4",
diff --git a/src/components/IBox/index.vue b/src/components/IBox/index.vue
index b339ac5c6..f1960a17f 100644
--- a/src/components/IBox/index.vue
+++ b/src/components/IBox/index.vue
@@ -1,8 +1,12 @@
 <template>
   <el-card :class="'ibox ' + type" shadow="never" v-bind="$attrs">
-    <div v-if="title" slot="header" class="clearfix ibox-title">
-      <i v-if="fa" :class="'fa ' + fa" /> {{ title }}
-    </div>
+    <template #header>
+      <slot name="header">
+        <div v-if="title" slot="header" class="clearfix ibox-title">
+          <i v-if="fa" :class="'fa ' + fa" /> {{ title }}
+        </div>
+      </slot>
+    </template>
     <slot />
   </el-card>
 </template>
diff --git a/src/components/SummaryCard/index.vue b/src/components/SummaryCard/index.vue
index f32436979..ce5877a03 100644
--- a/src/components/SummaryCard/index.vue
+++ b/src/components/SummaryCard/index.vue
@@ -1,12 +1,21 @@
 <template>
-  <el-card>
-    <div slot="header">
-      <span>卡片名称</span>
-      <span class="pull-right">卡片标签</span>
-    </div>
-    <div>
-      <span>卡片内容</span>
+  <el-card shadow="never">
+    <div slot="header" class="summary-header">
+      <span class="header-title">{{ title }}</span>
+      <span class="pull-right right-side">
+        <slot name="header-right">
+          <el-tag :type="rightSideLabel.type || 'success'" effect="dark" size="mini">{{ rightSideLabel.title }}</el-tag>
+        </slot>
+      </span>
     </div>
+    <slot>
+      <h1 class="no-margins">
+        <a :href="body.link">
+          <span>{{ body.count }}</span>
+        </a>
+      </h1>
+      <small>{{ body.comment }}</small>
+    </slot>
   </el-card>
 </template>
 
@@ -14,12 +23,55 @@
 export default {
   name: 'SummaryCard',
   props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    rightSideLabel: {
+      type: Object,
+      default: () => ({})
+    },
+    body: {
+      type: Object,
+      default: () => ({})
+    }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .pull-right {
-    float: right!important;
+    float: right !important;
+  }
+
+  .header-title {
+    font-size: 14px;
+    margin: 0 0 7px;
+    font-weight: 600;
+  }
+
+  .right-side >>> .el-tag {
+    font-weight: 600;
+    padding: 3px 8px;
+    text-shadow: none;
+    line-height: 1;
+  }
+
+  h1 {
+    font-size: 30px;
+    font-weight: 100;
+  }
+
+  .el-card__body {
+    background-color: #ffffff;
+    color: inherit;
+    padding: 15px 20px 20px 20px !important;
+    border-color: #e7eaec;
+    border-image: none;
+    border-style: solid solid none;
+    border-width: 1px 0;
+  }
+  .no-margins {
+    margin: 0 !important;
   }
 </style>
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index 6936b4157..ca0f620b2 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -732,5 +732,11 @@
   "Assets": "",
   "settings": {
     "setting": ""
+  },
+  "dashboard": {
+    "UsersTotal": "用户总数",
+    "AssetsTotal": "资产总数",
+    "OnlineUsers": "在线用户",
+    "OnlineSessions": "在线会话"
   }
 }
diff --git a/src/main.js b/src/main.js
index 15b642fea..3d2daab63 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,6 +36,9 @@ Vue.use(ElementUI, { locale })
 
 Vue.config.productionTip = false
 
+import VCharts from 'v-charts'
+Vue.use(VCharts)
+
 // cookie
 import VueCookie from 'vue-cookie'
 Vue.use(VueCookie)
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index f297bfbf0..704275391 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -384,3 +384,20 @@ td .el-button.el-button--mini {
   padding-left: 10px;
   padding-right: 14px;
 }
+
+.el-tag--dark.el-tag--info {
+  background-color: #23c6c8;
+  border-color: #23c6c8;
+  color: #fff;
+}
+
+a {
+  color: #428bca !important;
+  text-decoration: none;
+}
+
+.el-tag--default.el-tag--dark {
+  background-color: #d1dade;
+  color: #5e5e5e;
+  border: none;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ecfd65448..0d16c3c64 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -71,3 +71,11 @@ div:focus {
 .el-tooltip__popper.is-light.help-tips div span {
   padding: 50px;
 }
+
+.white-bg {
+  background-color: #ffffff;
+}
+
+.small, small {
+  font-size: 85%;
+}
diff --git a/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue b/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue
new file mode 100644
index 000000000..da96177f0
--- /dev/null
+++ b/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="statistic-box">
+    <small>活跃用户资产占比</small>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <ve-pie :data="userData" :legend="legend" :grid="grid" :extend="chartExtend" :height="'200px'" />
+      </el-col>
+      <el-col :span="12">
+        <ve-pie :data="userData" :legend="legend" :extend="chartExtend" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoginActivePin',
+  data() {
+    return {
+      legend: {
+        show: false
+      },
+      grid: {
+        x: 0,
+        y: 20,
+        x2: 20,
+        y2: 30
+      },
+      chartExtend: {
+        series(v) {
+          v.forEach(i => {
+            i.radius = ['50%', '70%']
+          })
+          return v
+        }
+      },
+      userData: {
+        columns: ['日期', '访问用户'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393 },
+          { '日期': '1/2', '访问用户': 3530 },
+          { '日期': '1/6', '访问用户': 4593 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dashboard/DatesLoginSummary/LoginMetric.vue b/src/views/dashboard/DatesLoginSummary/LoginMetric.vue
new file mode 100644
index 000000000..d8ffd30ec
--- /dev/null
+++ b/src/views/dashboard/DatesLoginSummary/LoginMetric.vue
@@ -0,0 +1,134 @@
+<template>
+  <ve-line :data="chartData" :settings="chartSettings" :title="title" height="350px" />
+</template>
+
+<script>
+export default {
+  name: 'LoginMetric',
+  data: function() {
+    return {
+      legend: {
+        y: 'bottom'
+      },
+      title: {
+        show: false
+      },
+      chartSettings: {
+        metrics: ['LoginCount', 'ActiveUser', 'ActiveAsset'],
+        area: true,
+        dimension: ['Date'],
+        labelMap: {
+          'LoginCount': '登录数量',
+          'ActiveUser': '活跃用户',
+          'ActiveAsset': '活跃资产'
+        }
+      },
+      chartData: {
+        columns: ['Date', 'LoginCount', 'ActiveUser', 'ActiveAsset'],
+        rows: [
+          {
+            'Date': '04-19',
+            'LoginCount': 20316,
+            'ActiveUser': 5079,
+            'ActiveAsset': 4323
+          },
+          {
+            'Date': '04-20',
+            'LoginCount': 35218,
+            'ActiveUser': 8804,
+            'ActiveAsset': 2079
+          },
+          {
+            'Date': '04-21',
+            'LoginCount': 12864,
+            'ActiveUser': 3216,
+            'ActiveAsset': 1666
+          },
+          {
+            'Date': '04-22',
+            'LoginCount': 37508,
+            'ActiveUser': 9377,
+            'ActiveAsset': 8837
+          },
+          {
+            'Date': '04-23',
+            'LoginCount': 11787,
+            'ActiveUser': 2946,
+            'ActiveAsset': 1417
+          },
+          {
+            'Date': '04-24',
+            'LoginCount': 37749,
+            'ActiveUser': 9437,
+            'ActiveAsset': 8567
+          },
+          {
+            'Date': '04-25',
+            'LoginCount': 28591,
+            'ActiveUser': 7147,
+            'ActiveAsset': 1492
+          },
+          {
+            'Date': '04-26',
+            'LoginCount': 28571,
+            'ActiveUser': 7143,
+            'ActiveAsset': 2969
+          },
+          { 'Date': '04-27', 'LoginCount': 8789, 'ActiveUser': 2197, 'ActiveAsset': 852 },
+          {
+            'Date': '04-28',
+            'LoginCount': 11434,
+            'ActiveUser': 2857,
+            'ActiveAsset': 690
+          },
+          { 'Date': '04-29', 'LoginCount': 2100, 'ActiveUser': 525, 'ActiveAsset': 193 },
+          {
+            'Date': '04-30',
+            'LoginCount': 35305,
+            'ActiveUser': 8826,
+            'ActiveAsset': 2125
+          },
+          {
+            'Date': '05-01',
+            'LoginCount': 27371,
+            'ActiveUser': 6842,
+            'ActiveAsset': 5670
+          },
+          { 'Date': '05-02', 'LoginCount': 5433, 'ActiveUser': 905, 'ActiveAsset': 127 },
+          {
+            'Date': '05-03',
+            'LoginCount': 59824,
+            'ActiveUser': 9970,
+            'ActiveAsset': 9148
+          },
+          {
+            'Date': '05-04',
+            'LoginCount': 69371,
+            'ActiveUser': 11562,
+            'ActiveAsset': 2237
+          },
+          {
+            'Date': '05-05',
+            'LoginCount': 11388,
+            'ActiveUser': 1898,
+            'ActiveAsset': 1685
+          },
+          {
+            'Date': '05-06',
+            'LoginCount': 101993,
+            'ActiveUser': 16999,
+            'ActiveAsset': 13882
+          },
+          {
+            'Date': '05-07',
+            'LoginCount': 26256,
+            'ActiveUser': 4376,
+            'ActiveAsset': 829
+          },
+          { 'Date': '05-09', 'LoginCount': 0, 'ActiveUser': 0, 'ActiveAsset': 0 },
+          { 'Date': '05-11', 'LoginCount': 0, 'ActiveUser': 0, 'ActiveAsset': 0 }]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/DatesLoginSummary/LoginTop.vue b/src/views/dashboard/DatesLoginSummary/LoginTop.vue
new file mode 100644
index 000000000..fbfdc7fb5
--- /dev/null
+++ b/src/views/dashboard/DatesLoginSummary/LoginTop.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <small>过去一周, 共有 2 位用户登录 31 次资产.</small>
+    <ul class="list-group clear-list m-t">
+      <li v-for="(item, index) of summaryItems" :key="item.username" class="list-group-item fist-item">
+        <span class="pull-right">
+          {{ item.count }} 次/周
+        </span>
+        <el-tag effect="dark" size="small" :type="getLabelType(index)">{{ index + 1 }}</el-tag>
+        {{ item.username }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoginTop',
+  data() {
+    return {
+      summaryItems: [
+        {
+          username: '周杰伦',
+          count: 42
+        },
+        {
+          username: '林俊杰',
+          count: 30
+        },
+        {
+          username: '蔡依林',
+          count: 28
+        },
+        {
+          username: '梁静茹',
+          count: 26
+        },
+        {
+          username: '孙燕姿',
+          count: 22
+        }
+      ],
+      tabsType: ['success', 'info', 'primary', 'default', 'info']
+    }
+  },
+  methods: {
+    getLabelType(index) {
+      return this.tabsType[index] || 'primary'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .m-t {
+    margin-top: 15px;
+  }
+
+  .list-group {
+    padding-left: 0;
+    margin-bottom: 20px;
+  }
+
+  .list-group.clear-list .list-group-item {
+    border-top: 1px solid #e7eaec;
+    border-bottom: 0;
+    border-right: 0;
+    border-left: 0;
+    padding: 8px 0;
+  }
+
+  .list-group-item:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-top: none !important;
+  }
+
+  .list-group-item {
+    background-color: inherit;
+    border: 1px solid #e7eaec;
+    display: block;
+    margin-bottom: -1px;
+    padding: 8px 15px;
+    position: relative;
+    font-size: 13px;
+    line-height: 18px;
+  }
+
+  .el-tag--small {
+    height: 24px;
+    font-size: 75%;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    line-height: 16px;
+    margin-right: 10px;
+    font-weight: 600;
+    padding: 3px 8px;
+    text-shadow: none;
+  }
+</style>
diff --git a/src/views/dashboard/DatesLoginSummary/index.vue b/src/views/dashboard/DatesLoginSummary/index.vue
new file mode 100644
index 000000000..6f0f04040
--- /dev/null
+++ b/src/views/dashboard/DatesLoginSummary/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="white-bg dashboard-header">
+    <el-row>
+      <el-col :span="12">
+        <h2>登录汇总</h2>
+      </el-col>
+      <el-col :span="12">
+        <el-button-group style="float: right; padding: 0">
+          <el-button type="default" size="mini" :class="{ 'active': active === 'weekly'}" @click="changeDates('weekly')">Weekly</el-button>
+          <el-button type="default" size="mini" :class="{ 'active': active === 'monthly'}" @click="changeDates('monthly')">Monthly</el-button>
+        </el-button-group>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :md="6" :sm="24">
+        <LoginTop />
+      </el-col>
+      <el-col :md="12" :sm="24">
+        <LoginMetric style="margin-top: -40px" />
+      </el-col>
+      <el-col :md="6" :sm="24">
+        <LoginActivePin />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import LoginTop from './LoginTop'
+import LoginMetric from './LoginMetric'
+import LoginActivePin from './LoginActivePin'
+
+export default {
+  name: 'DatesLoginSummary',
+  components: { LoginTop, LoginMetric, LoginActivePin },
+  data() {
+    return {
+      active: 'weekly'
+    }
+  },
+  methods: {
+    changeDates(type) {
+      this.active = type
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .dashboard-header {
+    border-top: 0;
+    padding: 20px 20px 20px 20px;
+  }
+
+  h2 {
+    margin-top: 10px;
+    font-size: 26px;
+    font-weight: 100;
+    line-height: 1.1;
+    color: inherit;
+  }
+
+  .el-button--mini, .el-button--mini.is-round {
+    padding: 5px 10px;
+  }
+
+  .active {
+    background-image: none;
+    border: 1px solid #d2d2d2;
+    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+  }
+</style>
diff --git a/src/views/dashboard/ResourceSummary.vue b/src/views/dashboard/ResourceSummary.vue
new file mode 100644
index 000000000..e6267956d
--- /dev/null
+++ b/src/views/dashboard/ResourceSummary.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-row :gutter="10">
+    <el-col v-for="item of summaryItems" :key="item.title" :md="6" :sm="12">
+      <SummaryCard :title="item.title" :right-side-label="item.rightSideLabel" :body="item.body" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { SummaryCard } from '@/components'
+
+export default {
+  name: 'ResourceSummary',
+  components: { SummaryCard },
+  data() {
+    return {
+      summaryItems: [
+        {
+          title: this.$t('dashboard.UsersTotal'),
+          rightSideLabel: {
+            title: 'Users',
+            type: 'success'
+          },
+          body: {
+            link: '',
+            count: 10,
+            comment: 'All users'
+          }
+        },
+        {
+          title: this.$t('dashboard.AssetsTotal'),
+          rightSideLabel: {
+            title: 'Assets',
+            type: 'info'
+          },
+          body: {
+            link: '',
+            count: 10,
+            comment: 'All assets'
+          }
+        },
+        {
+          title: this.$t('dashboard.OnlineUsers'),
+          rightSideLabel: {
+            title: 'Online',
+            type: 'primary'
+          },
+          body: {
+            link: '',
+            count: 10,
+            comment: 'Online users'
+          }
+        },
+        {
+          title: this.$t('dashboard.OnlineSessions'),
+          rightSideLabel: {
+            title: 'Connected',
+            type: 'danger'
+          },
+          body: {
+            link: '',
+            count: 10,
+            comment: 'Online sessions'
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-col {
+    margin-bottom: 25px;
+  &:last-child {
+     margin-bottom: 0;
+   }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 8584b25a7..6e43cf567 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,42 +1,27 @@
 <template>
   <Page>
-    <el-row :gutter="20">
-      <el-col :span="6"><SummaryCard /></el-col>
-      <el-col :span="6"><SummaryCard /></el-col>
-      <el-col :span="6"><SummaryCard /></el-col>
-      <el-col :span="6"><SummaryCard /></el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="4"><SummaryCard /></el-col>
-      <el-col :span="16"><SummaryCard /></el-col>
-      <el-col :span="4"><SummaryCard /></el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="8"><SummaryCard /></el-col>
-      <el-col :span="8"><SummaryCard /></el-col>
-      <el-col :span="8"><SummaryCard /></el-col>
-    </el-row>
+    <ResourceSummary />
+    <DatesLoginSummary />
   </Page>
 </template>
 
 <script>
 import { Page } from '@/layout/components'
-import { SummaryCard } from '@/components'
+import ResourceSummary from './ResourceSummary'
+import DatesLoginSummary from './DatesLoginSummary'
 
 export default {
   name: 'Dashboard',
   components: {
-    Page, SummaryCard
+    Page, DatesLoginSummary, ResourceSummary
+  },
+  data() {
+    return {
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .el-row {
-    margin-bottom: 25px;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
 
 </style>
diff --git a/yarn.lock b/yarn.lock
index 713bdbd3c..7fc333ac1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3331,6 +3331,28 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts-amap@1.0.0-rc.6:
+  version "1.0.0-rc.6"
+  resolved "https://registry.npm.taobao.org/echarts-amap/download/echarts-amap-1.0.0-rc.6.tgz#5782a74daee52ed44ce3f8f62577561783f09e16"
+  integrity sha1-V4KnTa7lLtRM4/j2JXdWF4PwnhY=
+
+echarts-liquidfill@^2.0.2:
+  version "2.0.5"
+  resolved "https://registry.npm.taobao.org/echarts-liquidfill/download/echarts-liquidfill-2.0.5.tgz#0d505a75c2dfb69950e18d440bdf3fe1795a0eed"
+  integrity sha1-DVBadcLftplQ4Y1EC98/4XlaDu0=
+
+echarts-wordcloud@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npm.taobao.org/echarts-wordcloud/download/echarts-wordcloud-1.1.3.tgz#07b140c8ba76b19c317b43c310f3d5dc99289ff2"
+  integrity sha1-B7FAyLp2sZwxe0PDEPPV3Jkon/I=
+
+echarts@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.npm.taobao.org/echarts/download/echarts-4.7.0.tgz?cache=0&sync_timestamp=1584522755461&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-4.7.0.tgz#5b3875a4c2f91e3929425fabab9eace7e4098b3f"
+  integrity sha1-Wzh1pML5HjkpQl+rq56s5+QJiz8=
+  dependencies:
+    zrender "4.3.0"
+
 editorconfig@^0.15.3:
   version "0.15.3"
   resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
@@ -6842,6 +6864,11 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
+numerify@1.2.9:
+  version "1.2.9"
+  resolved "https://registry.npm.taobao.org/numerify/download/numerify-1.2.9.tgz#af4696bb1d57f8d3970a615d8b0cd53d932bd559"
+  integrity sha1-r0aWux1X+NOXCmFdiwzVPZMr1Vk=
+
 nwsapi@^2.0.7:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
@@ -9525,6 +9552,11 @@ utila@^0.4.0, utila@~0.4:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
 
+utils-lite@0.1.10:
+  version "0.1.10"
+  resolved "https://registry.npm.taobao.org/utils-lite/download/utils-lite-0.1.10.tgz#d2908c0482e23c31e6b082558540e7134ffad7d7"
+  integrity sha1-0pCMBILiPDHmsIJVhUDnE0/619c=
+
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
@@ -9533,6 +9565,17 @@ uuid@^3.0.1, uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
 
+v-charts@^1.19.0:
+  version "1.19.0"
+  resolved "https://registry.npm.taobao.org/v-charts/download/v-charts-1.19.0.tgz#07b701800b159bd514264ffc8bf12b0405142da3"
+  integrity sha1-B7cBgAsVm9UUJk/8i/ErBAUULaM=
+  dependencies:
+    echarts-amap "1.0.0-rc.6"
+    echarts-liquidfill "^2.0.2"
+    echarts-wordcloud "^1.1.3"
+    numerify "1.2.9"
+    utils-lite "0.1.10"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -10152,6 +10195,11 @@ yorkie@^2.0.0:
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
 
+zrender@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npm.taobao.org/zrender/download/zrender-4.3.0.tgz#9f056121b20bbae44414d287bf6a119ff7042661"
+  integrity sha1-nwVhIbILuuREFNKHv2oRn/cEJmE=
+
 ztree@^3.5.24:
   version "3.5.24"
   resolved "https://registry.yarnpkg.com/ztree/-/ztree-3.5.24.tgz#b63fe52981fdf2c329675cfd2772f0d147521ff1"

From 88050a06a19c726b483db694fad3531de854fe59 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 19 May 2020 20:04:05 +0800
Subject: [PATCH 3/8] =?UTF-8?q?[Update]=20=E5=8E=BB=E6=8E=89submodule?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitmodules | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.gitmodules b/.gitmodules
index 293478640..e69de29bb 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +0,0 @@
-[submodule "src/views/xpack"]
-	path = src/views/xpack
-	url = git@github.com:fit2cloudrd/js-xpack-web.git

From 7610da3be40231891ddf39db264165f7c086a432 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 19 May 2020 20:58:39 +0800
Subject: [PATCH 4/8] =?UTF-8?q?[Update]=20=E4=BD=BF=E7=94=A8vue=20echats?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 src/main.js                                   |   3 -
 .../DatesLoginSummary/LoginActivePin.vue      |  70 +++--
 .../DatesLoginSummary/LoginMetric.vue         | 264 ++++++++++--------
 .../dashboard/DatesLoginSummary/index.vue     |   2 +-
 yarn.lock                                     |  55 ++--
 6 files changed, 211 insertions(+), 185 deletions(-)

diff --git a/package.json b/package.json
index 52d687dc3..2a6961ba7 100644
--- a/package.json
+++ b/package.json
@@ -42,10 +42,10 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
-    "v-charts": "^1.19.0",
     "vue": "2.6.10",
     "vue-codemirror-lite": "^1.0.4",
     "vue-cookie": "^1.1.4",
+    "vue-echarts": "^5.0.0-beta.0",
     "vue-i18n": "^8.15.5",
     "vue-router": "3.0.6",
     "vue-select": "^3.9.5",
diff --git a/src/main.js b/src/main.js
index 3d2daab63..15b642fea 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,9 +36,6 @@ Vue.use(ElementUI, { locale })
 
 Vue.config.productionTip = false
 
-import VCharts from 'v-charts'
-Vue.use(VCharts)
-
 // cookie
 import VueCookie from 'vue-cookie'
 Vue.use(VueCookie)
diff --git a/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue b/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue
index da96177f0..a86e4e2b9 100644
--- a/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue
+++ b/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue
@@ -2,44 +2,55 @@
   <div class="statistic-box">
     <small>活跃用户资产占比</small>
     <el-row :gutter="10">
-      <el-col :span="12">
-        <ve-pie :data="userData" :legend="legend" :grid="grid" :extend="chartExtend" :height="'200px'" />
+      <el-col :md="12" :sm="24">
+        <echarts :options="option" />
       </el-col>
-      <el-col :span="12">
-        <ve-pie :data="userData" :legend="legend" :extend="chartExtend" />
+      <el-col :md="12" :sm="24">
+        <echarts :options="option" />
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/pie'
 export default {
   name: 'LoginActivePin',
+  components: { 'echarts': ECharts },
   data() {
     return {
-      legend: {
-        show: false
-      },
-      grid: {
-        x: 0,
-        y: 20,
-        x2: 20,
-        y2: 30
-      },
-      chartExtend: {
-        series(v) {
-          v.forEach(i => {
-            i.radius = ['50%', '70%']
-          })
-          return v
-        }
-      },
-      userData: {
-        columns: ['日期', '访问用户'],
-        rows: [
-          { '日期': '1/1', '访问用户': 1393 },
-          { '日期': '1/2', '访问用户': 3530 },
-          { '日期': '1/6', '访问用户': 4593 }
+      option: {
+        legend: {
+          show: false
+        },
+        color: ['#1ab394', '#1C84C6', '#9CC3DA'],
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '18',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 335, name: '直接访问' },
+              { value: 310, name: '邮件营销' },
+              { value: 234, name: '联盟广告' }
+            ]
+          }
         ]
       }
     }
@@ -48,5 +59,8 @@ export default {
 </script>
 
 <style scoped>
-
+  .echarts {
+    width: 150px;
+    height: 250px;
+  }
 </style>
diff --git a/src/views/dashboard/DatesLoginSummary/LoginMetric.vue b/src/views/dashboard/DatesLoginSummary/LoginMetric.vue
index d8ffd30ec..80b319c58 100644
--- a/src/views/dashboard/DatesLoginSummary/LoginMetric.vue
+++ b/src/views/dashboard/DatesLoginSummary/LoginMetric.vue
@@ -1,134 +1,166 @@
 <template>
-  <ve-line :data="chartData" :settings="chartSettings" :title="title" height="350px" />
+  <echarts :options="polar" :autoresize="true" theme="light" />
 </template>
 
 <script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/line'
 export default {
   name: 'LoginMetric',
+  components: { 'echarts': ECharts },
   data: function() {
     return {
-      legend: {
-        y: 'bottom'
-      },
-      title: {
-        show: false
-      },
-      chartSettings: {
-        metrics: ['LoginCount', 'ActiveUser', 'ActiveAsset'],
-        area: true,
-        dimension: ['Date'],
-        labelMap: {
-          'LoginCount': '登录数量',
-          'ActiveUser': '活跃用户',
-          'ActiveAsset': '活跃资产'
-        }
-      },
-      chartData: {
-        columns: ['Date', 'LoginCount', 'ActiveUser', 'ActiveAsset'],
-        rows: [
+      polar: {
+        title: {
+          show: false
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          data: ['LoginCount', 'ActiveUser', 'ActiveAsset'],
+          formatter: function(name) {
+            const map = { LoginCount: '登录数量', ActiveUser: '用户', ActiveAsset: '资产' }
+            return map[name]
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        color: ['#1ab394', '#1C84C6', '#9CC3DA'],
+        xAxis: [
           {
-            'Date': '04-19',
-            'LoginCount': 20316,
-            'ActiveUser': 5079,
-            'ActiveAsset': 4323
+            type: 'category',
+            boundaryGap: false,
+            data: [
+              '04-19', '04-20',
+              '04-21',
+              '04-22',
+              '04-23',
+              '04-24',
+              '04-25',
+              '04-26',
+              '04-27',
+              '04-28',
+              '04-29',
+              '04-30',
+              '05-01',
+              '05-02',
+              '05-03',
+              '05-04',
+              '05-05',
+              '05-06',
+              '05-07',
+              '05-09',
+              '05-11']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: 'LoginCount',
+            type: 'line',
+            areaStyle: {},
+            smooth: true,
+            data: [20316,
+              35218,
+              12864,
+              37508,
+              11787,
+              37749,
+              28591,
+              28571,
+              8789,
+              11434,
+              2100,
+              35305,
+              27371,
+              5433,
+              59824,
+              69371,
+              11388,
+              101993,
+              26256,
+              0,
+              0]
           },
           {
-            'Date': '04-20',
-            'LoginCount': 35218,
-            'ActiveUser': 8804,
-            'ActiveAsset': 2079
+            name: 'ActiveUser',
+            type: 'line',
+            areaStyle: {},
+            smooth: true,
+            data: [5079,
+              8804,
+              3216,
+              9377,
+              2946,
+              9437,
+              7147,
+              7143,
+              2197,
+              2857,
+              525,
+              8826,
+              6842,
+              905,
+              9970,
+              11562,
+              1898,
+              16999,
+              4376,
+              0,
+              0]
           },
           {
-            'Date': '04-21',
-            'LoginCount': 12864,
-            'ActiveUser': 3216,
-            'ActiveAsset': 1666
-          },
-          {
-            'Date': '04-22',
-            'LoginCount': 37508,
-            'ActiveUser': 9377,
-            'ActiveAsset': 8837
-          },
-          {
-            'Date': '04-23',
-            'LoginCount': 11787,
-            'ActiveUser': 2946,
-            'ActiveAsset': 1417
-          },
-          {
-            'Date': '04-24',
-            'LoginCount': 37749,
-            'ActiveUser': 9437,
-            'ActiveAsset': 8567
-          },
-          {
-            'Date': '04-25',
-            'LoginCount': 28591,
-            'ActiveUser': 7147,
-            'ActiveAsset': 1492
-          },
-          {
-            'Date': '04-26',
-            'LoginCount': 28571,
-            'ActiveUser': 7143,
-            'ActiveAsset': 2969
-          },
-          { 'Date': '04-27', 'LoginCount': 8789, 'ActiveUser': 2197, 'ActiveAsset': 852 },
-          {
-            'Date': '04-28',
-            'LoginCount': 11434,
-            'ActiveUser': 2857,
-            'ActiveAsset': 690
-          },
-          { 'Date': '04-29', 'LoginCount': 2100, 'ActiveUser': 525, 'ActiveAsset': 193 },
-          {
-            'Date': '04-30',
-            'LoginCount': 35305,
-            'ActiveUser': 8826,
-            'ActiveAsset': 2125
-          },
-          {
-            'Date': '05-01',
-            'LoginCount': 27371,
-            'ActiveUser': 6842,
-            'ActiveAsset': 5670
-          },
-          { 'Date': '05-02', 'LoginCount': 5433, 'ActiveUser': 905, 'ActiveAsset': 127 },
-          {
-            'Date': '05-03',
-            'LoginCount': 59824,
-            'ActiveUser': 9970,
-            'ActiveAsset': 9148
-          },
-          {
-            'Date': '05-04',
-            'LoginCount': 69371,
-            'ActiveUser': 11562,
-            'ActiveAsset': 2237
-          },
-          {
-            'Date': '05-05',
-            'LoginCount': 11388,
-            'ActiveUser': 1898,
-            'ActiveAsset': 1685
-          },
-          {
-            'Date': '05-06',
-            'LoginCount': 101993,
-            'ActiveUser': 16999,
-            'ActiveAsset': 13882
-          },
-          {
-            'Date': '05-07',
-            'LoginCount': 26256,
-            'ActiveUser': 4376,
-            'ActiveAsset': 829
-          },
-          { 'Date': '05-09', 'LoginCount': 0, 'ActiveUser': 0, 'ActiveAsset': 0 },
-          { 'Date': '05-11', 'LoginCount': 0, 'ActiveUser': 0, 'ActiveAsset': 0 }]
+            name: 'ActiveAsset',
+            type: 'line',
+            areaStyle: {},
+            smooth: true,
+            data: [4323,
+              2079,
+              1666,
+              8837,
+              1417,
+              8567,
+              1492,
+              2969,
+              852,
+              690,
+              193,
+              2125,
+              5670,
+              127,
+              9148,
+              2237,
+              1685,
+              13882,
+              829,
+              0,
+              0]
+          }
+        ]
       }
     }
   }
 }
 </script>
+
+<style scoped>
+  .echarts {
+    width: 100%;
+    height: 300px;
+  }
+</style>
diff --git a/src/views/dashboard/DatesLoginSummary/index.vue b/src/views/dashboard/DatesLoginSummary/index.vue
index 6f0f04040..60875e6a0 100644
--- a/src/views/dashboard/DatesLoginSummary/index.vue
+++ b/src/views/dashboard/DatesLoginSummary/index.vue
@@ -16,7 +16,7 @@
         <LoginTop />
       </el-col>
       <el-col :md="12" :sm="24">
-        <LoginMetric style="margin-top: -40px" />
+        <LoginMetric style="margin-top: -30px" heigth="300px" />
       </el-col>
       <el-col :md="6" :sm="24">
         <LoginActivePin />
diff --git a/yarn.lock b/yarn.lock
index 7fc333ac1..6bbce58d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2689,6 +2689,11 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.7, core-js@^2.6.5:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
 
+core-js@^3.4.4:
+  version "3.6.5"
+  resolved "https://registry.npm.taobao.org/core-js/download/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha1-c5XcJzrzf7LlDpvT2f6EEoUjHRo=
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -3331,21 +3336,6 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-echarts-amap@1.0.0-rc.6:
-  version "1.0.0-rc.6"
-  resolved "https://registry.npm.taobao.org/echarts-amap/download/echarts-amap-1.0.0-rc.6.tgz#5782a74daee52ed44ce3f8f62577561783f09e16"
-  integrity sha1-V4KnTa7lLtRM4/j2JXdWF4PwnhY=
-
-echarts-liquidfill@^2.0.2:
-  version "2.0.5"
-  resolved "https://registry.npm.taobao.org/echarts-liquidfill/download/echarts-liquidfill-2.0.5.tgz#0d505a75c2dfb69950e18d440bdf3fe1795a0eed"
-  integrity sha1-DVBadcLftplQ4Y1EC98/4XlaDu0=
-
-echarts-wordcloud@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npm.taobao.org/echarts-wordcloud/download/echarts-wordcloud-1.1.3.tgz#07b140c8ba76b19c317b43c310f3d5dc99289ff2"
-  integrity sha1-B7FAyLp2sZwxe0PDEPPV3Jkon/I=
-
 echarts@^4.7.0:
   version "4.7.0"
   resolved "https://registry.npm.taobao.org/echarts/download/echarts-4.7.0.tgz?cache=0&sync_timestamp=1584522755461&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-4.7.0.tgz#5b3875a4c2f91e3929425fabab9eace7e4098b3f"
@@ -6864,11 +6854,6 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
-numerify@1.2.9:
-  version "1.2.9"
-  resolved "https://registry.npm.taobao.org/numerify/download/numerify-1.2.9.tgz#af4696bb1d57f8d3970a615d8b0cd53d932bd559"
-  integrity sha1-r0aWux1X+NOXCmFdiwzVPZMr1Vk=
-
 nwsapi@^2.0.7:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
@@ -8214,6 +8199,11 @@ reselect@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
 
+resize-detector@^0.1.10:
+  version "0.1.10"
+  resolved "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.1.10.tgz#1da3f961aa5f914ccbcfd3752d52fd45beeb692c"
+  integrity sha1-HaP5YapfkUzLz9N1LVL9Rb7raSw=
+
 resize-observer-polyfill@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -9552,11 +9542,6 @@ utila@^0.4.0, utila@~0.4:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
 
-utils-lite@0.1.10:
-  version "0.1.10"
-  resolved "https://registry.npm.taobao.org/utils-lite/download/utils-lite-0.1.10.tgz#d2908c0482e23c31e6b082558540e7134ffad7d7"
-  integrity sha1-0pCMBILiPDHmsIJVhUDnE0/619c=
-
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
@@ -9565,17 +9550,6 @@ uuid@^3.0.1, uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
 
-v-charts@^1.19.0:
-  version "1.19.0"
-  resolved "https://registry.npm.taobao.org/v-charts/download/v-charts-1.19.0.tgz#07b701800b159bd514264ffc8bf12b0405142da3"
-  integrity sha1-B7cBgAsVm9UUJk/8i/ErBAUULaM=
-  dependencies:
-    echarts-amap "1.0.0-rc.6"
-    echarts-liquidfill "^2.0.2"
-    echarts-wordcloud "^1.1.3"
-    numerify "1.2.9"
-    utils-lite "0.1.10"
-
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -9616,6 +9590,15 @@ vue-cookie@^1.1.4:
   dependencies:
     tiny-cookie "^1.0"
 
+vue-echarts@^5.0.0-beta.0:
+  version "5.0.0-beta.0"
+  resolved "https://registry.npm.taobao.org/vue-echarts/download/vue-echarts-5.0.0-beta.0.tgz#438dd4b0fc5ccea281709c1f7c6321b05352bdf4"
+  integrity sha1-Q43UsPxczqKBcJwffGMhsFNSvfQ=
+  dependencies:
+    core-js "^3.4.4"
+    lodash "^4.17.15"
+    resize-detector "^0.1.10"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"

From 13a1082c79d2b77c30c799b02028662c1953bee7 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 19 May 2020 21:03:03 +0800
Subject: [PATCH 5/8] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9dashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/DatesLoginSummary/LoginActivePin.vue | 5 +++++
 src/views/dashboard/DatesLoginSummary/LoginMetric.vue    | 1 +
 2 files changed, 6 insertions(+)

diff --git a/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue b/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue
index a86e4e2b9..c6d36201d 100644
--- a/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue
+++ b/src/views/dashboard/DatesLoginSummary/LoginActivePin.vue
@@ -15,6 +15,7 @@
 <script>
 import ECharts from 'vue-echarts'
 import 'echarts/lib/chart/pie'
+import 'echarts/lib/component/tooltip'
 export default {
   name: 'LoginActivePin',
   components: { 'echarts': ECharts },
@@ -25,6 +26,10 @@ export default {
           show: false
         },
         color: ['#1ab394', '#1C84C6', '#9CC3DA'],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
         series: [
           {
             name: '访问来源',
diff --git a/src/views/dashboard/DatesLoginSummary/LoginMetric.vue b/src/views/dashboard/DatesLoginSummary/LoginMetric.vue
index 80b319c58..0f254db58 100644
--- a/src/views/dashboard/DatesLoginSummary/LoginMetric.vue
+++ b/src/views/dashboard/DatesLoginSummary/LoginMetric.vue
@@ -5,6 +5,7 @@
 <script>
 import ECharts from 'vue-echarts'
 import 'echarts/lib/chart/line'
+import 'echarts/lib/component/tooltip'
 export default {
   name: 'LoginMetric',
   components: { 'echarts': ECharts },

From 54fe95f938a53ea94855ad529361a877557b6f60 Mon Sep 17 00:00:00 2001
From: jym503558564 <503558564@qq.com>
Date: Wed, 20 May 2020 12:03:19 +0800
Subject: [PATCH 6/8] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E8=AF=A6=E6=83=85=E9=A1=B5=E4=B8=AD=E7=9A=84RunInfoCa?=
 =?UTF-8?q?rd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TaskDetail/AdhocDetail/AdhocDetail.vue    | 23 ++++++---------
 .../HistoryExecutionDetail.vue                | 23 ++++++---------
 src/views/jobcenter/TaskDetail/TaskDetail.vue | 21 ++++++--------
 .../jobcenter/runinfocard/RunInfoCard.vue     | 28 +++++++++++--------
 4 files changed, 43 insertions(+), 52 deletions(-)

diff --git a/src/views/jobcenter/TaskDetail/AdhocDetail/AdhocDetail.vue b/src/views/jobcenter/TaskDetail/AdhocDetail/AdhocDetail.vue
index bb6e745d0..1cd86f045 100644
--- a/src/views/jobcenter/TaskDetail/AdhocDetail/AdhocDetail.vue
+++ b/src/views/jobcenter/TaskDetail/AdhocDetail/AdhocDetail.vue
@@ -5,7 +5,7 @@
     </el-col>
     <el-col :span="10">
       <RunInfoCard type="primary" v-bind="RunSuccessConfig" />
-      <RunInfoCard type="info" style="margin-top: 15px" v-bind="RunFailedConfig" />
+      <RunInfoCard type="danger" style="margin-top: 15px" v-bind="RunFailedConfig" />
     </el-col>
   </el-row>
 </template>
@@ -32,23 +32,18 @@ export default {
       RunSuccessConfig: {
         icon: 'fa-info',
         title: this.$t('jobcenter.lastRunSuccessHosts'),
-        content: [
-          {
-            hostname: 'linux',
-            result: 'api没有该数据，api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
-          }
-        ]
+        content: {
+          hostname: 'linux',
+          result: 'api没有该数据，api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
+        }
       },
       RunFailedConfig: {
         icon: 'fa-info',
         title: this.$t('jobcenter.lastRunFailedHosts'),
-        headerColor: 'danger',
-        content: [
-          {
-            hostname: 'window',
-            result: 'api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
-          }
-        ]
+        content: {
+          hostname: 'window',
+          result: 'api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
+        }
       }
     }
   },
diff --git a/src/views/jobcenter/TaskDetail/HistoryExecutionDetail/HistoryExecutionDetail.vue b/src/views/jobcenter/TaskDetail/HistoryExecutionDetail/HistoryExecutionDetail.vue
index 9d5c4dd1b..47ef8e14d 100644
--- a/src/views/jobcenter/TaskDetail/HistoryExecutionDetail/HistoryExecutionDetail.vue
+++ b/src/views/jobcenter/TaskDetail/HistoryExecutionDetail/HistoryExecutionDetail.vue
@@ -5,7 +5,7 @@
     </el-col>
     <el-col :span="10">
       <RunInfoCard type="primary" v-bind="RunSuccessConfig" />
-      <RunInfoCard type="info" style="margin-top: 15px" v-bind="RunFailedConfig" />
+      <RunInfoCard type="danger" style="margin-top: 15px" v-bind="RunFailedConfig" />
     </el-col>
   </el-row>
 </template>
@@ -32,23 +32,18 @@ export default {
       RunSuccessConfig: {
         icon: 'fa-info',
         title: this.$t('jobcenter.lastRunSuccessHosts'),
-        content: [
-          {
-            hostname: 'linux',
-            result: 'api没有该数据==api没有该数据api没有该数据api没有该数据api没有该数据'
-          }
-        ]
+        content: {
+          hostname: 'linux',
+          result: 'api没有该数据==api没有该数据api没有该数据api没有该数据api没有该数据'
+        }
       },
       RunFailedConfig: {
         icon: 'fa-info',
         title: this.$t('jobcenter.lastRunFailedHosts'),
-        headerColor: 'danger',
-        content: [
-          {
-            hostname: 'window',
-            result: 'api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
-          }
-        ]
+        content: {
+          hostname: 'linux',
+          result: 'api没有该数据==api没有该数据api没有该数据api没有该数据api没有该数据'
+        }
       }
     }
   },
diff --git a/src/views/jobcenter/TaskDetail/TaskDetail.vue b/src/views/jobcenter/TaskDetail/TaskDetail.vue
index 3dd6f8f6a..81fc81251 100644
--- a/src/views/jobcenter/TaskDetail/TaskDetail.vue
+++ b/src/views/jobcenter/TaskDetail/TaskDetail.vue
@@ -32,23 +32,18 @@ export default {
       RunSuccessConfig: {
         icon: 'fa-info',
         title: this.$t('jobcenter.lastRunSuccessHosts'),
-        content: [
-          {
-            hostname: 'linux',
-            result: 'api没有该数据==api没有该数据api没有该数据api没有该数据api没有该数据'
-          }
-        ]
+        content: {
+          hostname: 'linux',
+          result: 'api没有该数据==api没有该数据api没有该数据api没有该数据api没有该数据'
+        }
       },
       RunFailedConfig: {
         icon: 'fa-info',
         title: this.$t('jobcenter.lastRunFailedHosts'),
-        headerColor: 'danger',
-        content: [
-          {
-            hostname: 'window',
-            result: 'api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
-          }
-        ]
+        content: {
+          hostname: 'window',
+          result: 'api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
+        }
       },
       taskData: {}
     }
diff --git a/src/views/jobcenter/runinfocard/RunInfoCard.vue b/src/views/jobcenter/runinfocard/RunInfoCard.vue
index 49f14bbc5..3f4ed9bb0 100644
--- a/src/views/jobcenter/runinfocard/RunInfoCard.vue
+++ b/src/views/jobcenter/runinfocard/RunInfoCard.vue
@@ -1,13 +1,11 @@
 <template>
   <IBox :fa="icon" :type="type" :title="title" v-bind="$attrs">
-    <el-table class="el-table" style="width: 100%" :data="content" :show-header="false">
-      <el-table-column width="150px" prop="hostname" />
-      <el-table-column prop="result">
-        <template slot-scope="scope">
-          <span>{{ scope.row.result }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+    <table class="run-info">
+      <tr>
+        <td>{{ content.hostname }}</td>
+        <td>{{ content.result }}</td>
+      </tr>
+    </table>
   </IBox>
 </template>
 
@@ -29,8 +27,8 @@ export default {
       default: ''
     },
     content: {
-      type: Array,
-      default: () => []
+      type: Object,
+      default: () => ({})
     },
     url: {
       type: String,
@@ -45,5 +43,13 @@ export default {
 </script>
 
 <style scoped>
-
+.run-info {
+  line-height: 1.43;
+  padding: 8px;
+  vertical-align: top;
+  font-size: 13px;
+}
+.run-info > tr:first-child > td:first-child {
+  width: 150px;
+}
 </style>

From b895af5cfea31557f9827e46b7df4aa6c9ed9c7c Mon Sep 17 00:00:00 2001
From: xinwen <coderWen@126.com>
Date: Wed, 20 May 2020 16:40:53 +0800
Subject: [PATCH 7/8] [Add] gathered user task

---
 .../GatheredUserList.vue}                     | 23 +++++++++-
 .../xpack/GatheredUser/TaskCreateUpdate.vue   | 46 +++++++++++++++++++
 src/views/xpack/GatheredUser/TaskList.vue     | 35 ++++++++++++++
 src/views/xpack/router.js                     | 27 +++++++++--
 4 files changed, 127 insertions(+), 4 deletions(-)
 rename src/views/xpack/{GatherUser.vue => GatheredUser/GatheredUserList.vue} (61%)
 create mode 100644 src/views/xpack/GatheredUser/TaskCreateUpdate.vue
 create mode 100644 src/views/xpack/GatheredUser/TaskList.vue

diff --git a/src/views/xpack/GatherUser.vue b/src/views/xpack/GatheredUser/GatheredUserList.vue
similarity index 61%
rename from src/views/xpack/GatherUser.vue
rename to src/views/xpack/GatheredUser/GatheredUserList.vue
index cc24229c5..77db4c940 100644
--- a/src/views/xpack/GatherUser.vue
+++ b/src/views/xpack/GatheredUser/GatheredUserList.vue
@@ -1,5 +1,5 @@
 <template>
-  <GenericTreeListPage :table-config="tableConfig" :tree-setting="treeSetting" />
+  <GenericTreeListPage :table-config="tableConfig" :tree-setting="treeSetting" :header-actions="headerActions" />
 </template>
 
 <script>
@@ -28,8 +28,29 @@ export default {
         ],
         columnsMeta: {
         }
+      },
+      headerActions: {
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasImport: false,
+        hasRefresh: false,
+        extraActions: [
+          {
+            name: 'gather-user-tasks',
+            title: '收集用户任务',
+            type: 'primary',
+            has: true,
+            can: true,
+            callback: this.onGatherUserTasks
+          }
+        ]
       }
     }
+  },
+  methods: {
+    onGatherUserTasks() {
+      this.$router.push({ name: 'GatherUserTaskList' })
+    }
   }
 }
 </script>
diff --git a/src/views/xpack/GatheredUser/TaskCreateUpdate.vue b/src/views/xpack/GatheredUser/TaskCreateUpdate.vue
new file mode 100644
index 000000000..bc124141e
--- /dev/null
+++ b/src/views/xpack/GatheredUser/TaskCreateUpdate.vue
@@ -0,0 +1,46 @@
+<template>
+  <GenericCreateUpdatePage v-bind="$data" />
+</template>
+
+<script>
+import { GenericCreateUpdatePage } from '@/layout/components'
+
+export default {
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      fields: [
+        ['收集用户任务', ['name', 'nodes', 'is_periodic', 'crontab', 'interval', 'comment']]
+      ],
+      url: '/api/v1/xpack/gathered-user/tasks/',
+      fieldsMeta: {
+        nodes: {
+          el: {
+            multiple: true,
+            value: [],
+            ajax: {
+              url: '/api/v1/assets/nodes/',
+              processResults(data) {
+                const results = data.results.map((item) => {
+                  return { label: item.name, value: item.id }
+                })
+                const more = !!data.next
+                return { results: results, pagination: more, total: data.count }
+              }
+            }
+          }
+        },
+        'is_periodic': {
+          type: 'switch'
+        }
+      }
+    }
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/src/views/xpack/GatheredUser/TaskList.vue b/src/views/xpack/GatheredUser/TaskList.vue
new file mode 100644
index 000000000..e0b8a33f8
--- /dev/null
+++ b/src/views/xpack/GatheredUser/TaskList.vue
@@ -0,0 +1,35 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import GenericListPage from '@/layout/components/GenericListPage'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/xpack/gathered-user/tasks/',
+        columns: [
+          'name', 'nodes', 'periodic_display', 'executed_times', 'actions'
+        ],
+        columnsMeta: {}
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasExport: false,
+        createRoute: 'GatherUserTaskCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/xpack/router.js b/src/views/xpack/router.js
index 70a305604..0f340bb5f 100644
--- a/src/views/xpack/router.js
+++ b/src/views/xpack/router.js
@@ -21,9 +21,30 @@ export default {
     },
     {
       path: 'gathered-users',
-      component: () => import('@/views/xpack/GatherUser'),
-      name: 'GatherUser',
-      meta: { title: 'GatherUser' }
+      component: () => import('@/views/xpack/GatheredUser/GatheredUserList'),
+      name: 'GatherUserList',
+      meta: { title: 'GatherUserList' }
+    },
+    {
+      path: 'gathered-users/tasks',
+      component: () => import('@/views/xpack/GatheredUser/TaskList'),
+      name: 'GatherUserTaskList',
+      meta: { title: 'GatherUserTask' },
+      hidden: true
+    },
+    {
+      path: 'gathered-users/tasks/create',
+      component: () => import('@/views/xpack/GatheredUser/TaskCreateUpdate'),
+      name: 'GatherUserTaskCreate',
+      meta: { title: 'GatherUserTaskCreate', action: 'create' },
+      hidden: true
+    },
+    {
+      path: 'gathered-users/tasks/update',
+      component: () => import('@/views/xpack/GatheredUser/TaskCreateUpdate'),
+      name: 'GatherUserTaskUpdate',
+      meta: { title: 'GatherUserTaskUpdate', action: 'update' },
+      hidden: true
     }
   ]
 }

From 049db348c61b8137a2848149c6866a8bd66ad9be Mon Sep 17 00:00:00 2001
From: Eric_Lee <xplzv@126.com>
Date: Wed, 20 May 2020 17:25:25 +0800
Subject: [PATCH 8/8] [Update] interface view (#55)

---
 src/components/UploadField/index.vue  |  31 ++++---
 src/i18n/langs/cn.json                |   9 ++
 src/views/xpack/InterfaceSettings.vue | 124 +++++++++++++++++++++-----
 src/views/xpack/api.js                |  25 ++++++
 src/views/xpack/router.js             |   3 +-
 5 files changed, 158 insertions(+), 34 deletions(-)
 create mode 100644 src/views/xpack/api.js

diff --git a/src/components/UploadField/index.vue b/src/components/UploadField/index.vue
index f87f907ec..d18184e77 100644
--- a/src/components/UploadField/index.vue
+++ b/src/components/UploadField/index.vue
@@ -1,12 +1,11 @@
 <template>
-  <el-upload
-    v-bind="$attrs"
-    @input="onInput"
-    v-on="$listeners"
-  >
-    <el-button size="small" type="primary">点击上传</el-button>
-    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-  </el-upload>
+  <div>
+    <input type="file" @change="Onchange">
+    <div v-if="tip !== ''">{{ tip }}</div>
+    <div>
+      <img :src="src" v-bind="$attrs">
+    </div>
+  </div>
 </template>
 
 <script>
@@ -15,16 +14,28 @@ export default {
     value: {
       type: String,
       default: () => ''
+    },
+    tip: {
+      type: String,
+      default: () => ''
+    }
+  },
+  computed: {
+    src() {
+      return `${process.env.VUE_APP_BASE_API}${this.value}`
     }
   },
   watch: {
     value(value) {
-      this.$emit('customEvent', value, 'message')
+      this.$emit('customEvent', value)
     }
   },
   methods: {
     onInput(val) {
-      this.$emit('input', 'my-input: ' + val)
+      this.$emit('input', 'upload-field: ' + val)
+    },
+    Onchange(e) {
+      this.$emit('fileChange', e.target.files[0])
     }
   }
 }
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index 11b2932dc..c8726885e 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -743,5 +743,14 @@
     "AssetsTotal": "资产总数",
     "OnlineUsers": "在线用户",
     "OnlineSessions": "在线会话"
+  },
+  "xpack": {
+    "InterfaceSettings": "界面设置",
+    "loginTitle": "登录页面标题",
+    "loginImage": "登录页面图片",
+    "favicon": "网站图标",
+    "logoIndex": "管理页面logo",
+    "logoLogout": "退出页面logo",
+    "RestoreButton": "恢复默认"
   }
 }
diff --git a/src/views/xpack/InterfaceSettings.vue b/src/views/xpack/InterfaceSettings.vue
index eceedeaa8..34f08a655 100644
--- a/src/views/xpack/InterfaceSettings.vue
+++ b/src/views/xpack/InterfaceSettings.vue
@@ -1,11 +1,14 @@
 <template>
-  <TabPage :submenu="submenu" :active-menu="activemenu">
-    <IBox>
+  <TabPage :submenu="submenu" :active-menu="activeMenu">
+    <IBox v-if="!loading">
       <GenericCreateUpdateForm
         :fields="fields"
         :url="url"
+        :initial="interfaceInfo"
         :update-success-next-route="successUrl"
         :fields-meta="fieldsMeta"
+        :on-submit="submitForm"
+        :more-buttons="moreButtons"
       />
     </IBox>
   </TabPage>
@@ -13,9 +16,9 @@
 
 <script>
 import { TabPage } from '@/layout/components'
-import { IBox } from '@/components'
+import { IBox, UploadField } from '@/components'
 import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
-import { UploadField } from '@/components'
+import { getInterfaceInfo, postInterface, restoreInterface } from '@/views/xpack/api'
 
 export default {
   name: 'InterfaceSettings',
@@ -26,10 +29,13 @@ export default {
   },
   data() {
     return {
-      activemenu: 'interface',
+      loading: true,
+      files: {},
+      interfaceInfo: {},
+      activeMenu: 'interface',
       submenu: [
         {
-          title: 'interface-settings',
+          title: this.$t('xpack.InterfaceSettings'),
           name: 'interface'
         }
       ],
@@ -43,40 +49,112 @@ export default {
       ],
       fieldsMeta: {
         login_title: {
-          label: 'login_title'
+          label: this.$t('xpack.loginTitle'),
+          helpText: '提示：将会显示在企业版用户登录页面（eg: 欢迎使用JumpServer开源堡垒机)'
         },
         login_image: {
-          label: 'login_image'
+          component: UploadField,
+          label: this.$t('xpack.loginImage'),
+          el: {
+            width: '10%',
+            height: '10%',
+            tip: '提示：将会显示在企业版用户登录页面（建议图片大小为: 492*472px）'
+          },
+          on: {
+            fileChange: ([value], updateForm) => {
+              console.log(value)
+              this.files['login_image'] = value
+            }
+          }
         },
         favicon: {
-          label: 'favicon'
+          component: UploadField,
+          label: this.$t('xpack.favicon'),
+          el: {
+            width: '5%',
+            height: '5%',
+            tip: '提示：网站图标（建议图片大小为: 16px*16px）'
+          },
+          on: {
+            fileChange: ([value], updateForm) => {
+              this.files['favicon'] = value
+            }
+          }
         },
         logo_index: {
-          label: 'logo_index'
+          component: UploadField,
+          label: this.$t('xpack.logoIndex'),
+          el: {
+            width: '10%',
+            height: '10%',
+            tip: '提示：将会显示在管理页面左上方（建议图片大小为: 185px*55px）'
+          },
+          on: {
+            fileChange: ([value], updateForm) => {
+              this.files['logo_index'] = value
+            }
+          }
         },
         logo_logout: {
           component: UploadField,
-          label: 'logo_logout',
+          label: this.$t('xpack.logoLogout'),
           el: {
-            action: '/api/v1/xpack/interface/setting/',
-            autoUpload: false,
-            name: 'logo_logout',
-            onChange: function(file, fileList) {
-              console.log(file, fileList)
-            }
+            width: '5%',
+            height: '5%',
+            tip: '提示：将会显示在企业版用户退出页面（建议图片大小为：82px*82px）'
           },
           on: {
-            focus: ([event], updateForm) => {
-              console.log(event.target.value) // output: input value
-            },
-            customEvent: ([value, msg], updateForm) => {
-              console.log(msg) // output: 'message'
+            fileChange: ([value], updateForm) => {
+              this.files['logo_logout'] = value
             }
           }
         }
       },
-      url: '/api/v1/xpack/interface/setting'
+      url: '/api/v1/xpack/interface/setting',
+      moreButtons: [
+        {
+          title: this.$t('xpack.RestoreButton'),
+          callback: function(value, form) {
+            this.$confirm('您确定要恢复默认初始化吗？', '你确认吗?', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              restoreInterface().then(res => {
+                this.$message.success(res.success)
+                location.reload()
+              }).catch(errMsg => {
+                this.$message.error(errMsg.response.data.error)
+              })
+            })
+          }.bind(this)
+        }
+      ]
     }
+  },
+  mounted() {
+    getInterfaceInfo().then(data => {
+      this.interfaceInfo = data
+      this.loading = false
+    })
+  },
+  methods: {
+    submitForm(values) {
+      const form = new FormData()
+      const ImageKeys = ['favicon', 'login_image', 'logo_logout', 'logo_index']
+      ImageKeys.forEach((value, index) => {
+        if (this.files[value] !== undefined) {
+          form.append(value, this.files[value])
+        }
+      })
+      if (values['login_title'] !== undefined) {
+        form.append('login_title', values['login_title'])
+      }
+      postInterface(form).then(res => {
+        location.reload()
+      })
+    }
+
   }
 }
 </script>
diff --git a/src/views/xpack/api.js b/src/views/xpack/api.js
new file mode 100644
index 000000000..25d386ca6
--- /dev/null
+++ b/src/views/xpack/api.js
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function postInterface(formData) {
+  return request({
+    url: '/api/v1/xpack/interface/setting',
+    method: 'put',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data: formData
+  })
+}
+export function getInterfaceInfo() {
+  return request({
+    url: '/api/v1/xpack/interface/setting',
+    method: 'get'
+  })
+}
+
+export function restoreInterface() {
+  return request({
+    url: '/xpack/interface/restore/default',
+    method: 'get'
+  })
+}
diff --git a/src/views/xpack/router.js b/src/views/xpack/router.js
index 0f340bb5f..aa7d43865 100644
--- a/src/views/xpack/router.js
+++ b/src/views/xpack/router.js
@@ -1,4 +1,5 @@
 import Layout from '@/layout/index'
+import i18n from '@/i18n/i18n'
 
 export default {
   path: '/xpack',
@@ -11,7 +12,7 @@ export default {
       path: 'interface-setting',
       component: () => import('@/views/xpack/InterfaceSettings.vue'),
       name: 'InterfaceSetting',
-      meta: { title: 'InterfaceSetting' }
+      meta: { title: i18n.t('xpack.InterfaceSettings') }
     },
     {
       path: 'license',