feat: 修改header组件样式

src/layout/components/NavHeader/Organization.vue

@@ -8,6 +8,7 @@
   >
     <template slot="prefix">
       <i class="fa fa-sitemap icon" />
+      <span class="add" />
     </template>
 
     <el-option-group
@@ -142,16 +143,22 @@ export default {
 }
 
 .icon {
-  color: #606266;
+  color: #FFF;
   cursor: pointer;
 }
 
+.add {
+  width: 1px;
+  margin-left: 5px;
+  border: .5px solid #FFF;
+}
+
 .organization {
   height: 35px;
   line-height: 35px;
-  background: #E0E0E0;
+  background: transparent;
   border-radius: 19px;
-  color: #606266;
+  color: #FFF;
 
   &:after {
     position: absolute;
@@ -163,29 +170,29 @@ export default {
     background-color: rgba(144, 147, 152, .5);
   }
 
-  & > > > .el-input__prefix {
-    left: 8px
+  &>>> .el-input__prefix {
+    left: 1px
   }
 
-  & > > > .el-input--prefix .el-input__inner {
+  &>>> .el-input--prefix .el-input__inner {
     line-height: 35px !important;
     height: 35px !important;
   }
 
-  & > > > .fa-sitemap {
+  &>>> .fa-sitemap {
     padding-left: 4px;
   }
 
-  & > > > .el-input__icon {
+  & >>> .el-input__icon {
     color: #606266;
   }
 
-  & > > > .el-input .el-select__caret {
-    color: #8d8f93;
+  & >>> .el-input .el-select__caret {
+    color: #FFF;
   }
 }
 
-.option-group > > > .el-select-group__title {
+.option-group >>> .el-select-group__title {
   color: #909399 !important;
   padding-left: 15px;
   font-size: 12px;

src/layout/components/NavHeader/index.vue

@@ -94,7 +94,7 @@ export default {
     height: $header-height;
     line-height: $header-height;
     overflow: hidden;
-    background: #f3f3f4;
+    background: var(--color-primary);
 
     .navbar-left {
       float: left;

src/layout/components/Page/PageContent.vue

@@ -12,7 +12,7 @@ export default {
 
 <style scoped>
   .wrapper-content {
-    padding: 20px 25px 40px;
+    padding: 24px 24px 22px;
   }
 
   .wrapper-content >>> .el-alert {

src/views/dashboard/DataSummary.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <el-row :gutter="16">
+      <el-col :lg="12" :sm="12">
+        <DataCard />
+      </el-col>
+      <el-col :lg="12" :sm="12">
+        <DataCard />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import DataCard from './components/DataCard.vue'
+export default {
+  components: {
+    DataCard
+  },
+  props: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+.left, .right {
+  display: inline-block;
+}
+</style>

src/views/dashboard/Left.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <RealTimeSummary />
+    <LineChart />
+  </div>
+</template>
+
+<script>
+import RealTimeSummary from './components/RealTimeSummary.vue'
+import LineChart from './components/LineChart.vue'
+export default {
+  components: {
+    RealTimeSummary,
+    LineChart
+  },
+  props: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/TrendSummary.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <ColumnChart />
+  </div>
+</template>
+
+<script>
+import ColumnChart from './components/ColumnChart'
+export default {
+  components: {
+    ColumnChart
+  },
+  props: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  margin-top: 16px;
+  padding: 20px;
+  background-color: #fff;
+}
+</style>

src/views/dashboard/components/ColumnChart.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="content">
+    <div class="head">
+      <span class="title">
+        用户/资产活跃情况
+        <i class="fa fa-exclamation-circle icon" />
+      </span>
+      <span class="time">更新时间：2022-11-17</span>
+    </div>
+    <echarts
+      ref="echarts"
+      :options="options"
+      :autoresize="true"
+    />
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  components: {
+
+  },
+  props: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    options() {
+      return {
+        grid: {
+          left: '2.5%',
+          top: '0%',
+          right: '2.8%',
+          bottom: '2%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          name: '',
+          nameLocation: 'center',
+          nameGap: 35,
+          nameTextStyle: {
+            color: '#8796AD',
+            fontSize: '16'
+          },
+          axisLabel: {
+            interval: 10,
+            rotate: 30,
+            textStyle: {
+              color: '#8796AD',
+              fontSize: '14'
+            }
+          },
+          data: [1,
+            2,
+            3,
+            4,
+            5
+          ],
+          axisLine: {
+            lineStyle: {
+              width: 2,
+              color: '#BBBFC4'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '',
+          nameLocation: 'middle',
+          nameGap: 45,
+          nameTextStyle: {
+            color: '#8796AD',
+            fontSize: '16'
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8796AD',
+              fontSize: '14'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(160,160,160,0.3)'
+            }
+          }
+        }],
+        series: [{
+          type: 'bar',
+          name: '',
+          stack: 1,
+          barWidth: '20%',
+          borderWidth: 0,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(50, 220, 182, 0.5)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(50, 220, 182, 0)'
+              }
+              ], false)
+
+            }
+          },
+          label: {
+            normal: {
+              show: false
+            }
+          },
+          data: [10, 10, 20, 99, 30]
+        },
+        {
+          type: 'bar',
+          name: '',
+          stack: 1,
+          barWidth: '20%',
+          itemStyle: {
+            normal: {
+              color: '#2b937c'
+            }
+          },
+          label: {
+            normal: {
+              show: false
+            }
+          },
+          data: [1, 1, 1, 1, 1]
+        }
+        ]
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.echarts {
+  width: 100%;
+  height: 272px;
+}
+.content {
+  .head {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    .title {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 26px;
+      color: #1F2329;
+    }
+    .icon {
+      color: #BBBFC4;
+      cursor: pointer;
+    }
+    .time {
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 26px;
+      text-align: right;
+      color: #8F959E;
+    }
+  }
+}
+
+</style>

src/views/dashboard/components/DataCard.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="card">
+    <div>
+      <div class="title">标题</div>
+      <div class="sub">二标题11111</div>
+      <div class="num">1231231213</div>
+      <div class="add">
+        <span class="add-num">
+          本周新增：0
+          <i class="fa fa-line-chart" />
+        </span>
+        <span class="add-icon">
+          <i class="fa fa-users" />
+        </span>
+      </div>
+    </div>
+    <div class="ring">
+      <RingChart />
+    </div>
+  </div>
+</template>
+
+<script>
+import RingChart from './RingChart'
+export default {
+  components: {
+    RingChart
+  },
+  props: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  width: 100%;
+  padding: 20px;
+  background-color: #FFF;
+  .title {
+    margin-bottom: 12px;
+    line-height: 26px;
+    font-weight: 500;
+    font-size: 16px;
+    color: #1F2329;
+  }
+  .sub {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    color: #646A73;
+    margin-bottom: 4px;
+  }
+  .num {
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 40px;
+    margin-bottom: 4px;
+  }
+  .add {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #EFF0F1;
+  }
+  .ring {
+    padding: 26px 43px 10px;
+    & >>> .echarts {
+      width: 100%!important;
+      height: 272px!important;
+    }
+  }
+}
+</style>

src/views/dashboard/components/LineChart.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="box">
+    <div class="head">
+      <span class="title">
+        用户/资产活跃情况
+        <i class="fa fa-exclamation-circle icon" />
+      </span>
+      <span class="time">更新时间：2022-11-17</span>
+    </div>
+    <echarts
+      ref="echarts"
+      :options="options"
+      :autoresize="true"
+      heme="light"
+      class="disabled-when-print"
+      @finished="getDataUrl"
+    />
+    <img v-if="dataUrl" :src="dataUrl" class="enabled-when-print" style="display: none;width: 100%;">
+  </div>
+</template>
+
+<script>
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/legend'
+
+export default {
+  name: 'LoginMetric',
+  props: {
+    range: {
+      type: String,
+      default: 'weekly'
+    }
+  },
+  data: function() {
+    return {
+      dataUrl: '',
+      metricsData: {
+        dates_metrics_date: [],
+        dates_metrics_total_count_active_assets: [],
+        dates_metrics_total_count_active_users: [],
+        dates_metrics_total_count_login: []
+      }
+    }
+  },
+  computed: {
+    themeColor() {
+      const documentStyle = document.documentElement.style
+      return {
+        primary: documentStyle.getPropertyValue('--color-primary'),
+        info: documentStyle.getPropertyValue('--color-info'),
+        success: documentStyle.getPropertyValue('--color-success')
+      }
+    },
+    options() {
+      const { primary, info, success } = this.themeColor
+      return {
+        title: {
+          show: false
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          left: 'auto',
+          icon: 'rect',
+          // 图例标记的图形宽度
+          itemWidth: 10,
+          itemHeight: 10,
+          data: [
+            this.$t('dashboard.LoginCount'),
+            this.$t('dashboard.LoginUsers'),
+            this.$t('dashboard.LoginAssets')
+          ]
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        color: [primary, info, success],
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+              lineStyle: {
+                color: '#8F959E'
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                // 坐标轴颜色
+                color: '#8F959E'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            data: this.metricsData.dates_metrics_date
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#8F959E'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            // 坐标轴线样式
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#EFF0F1'
+              }
+            }
+          }
+        ],
+
+        animationDuration: 500,
+        series: [
+          {
+            name: this.$t('dashboard.LoginCount'),
+            type: 'line',
+            areaStyle: {},
+            smooth: true,
+            data: this.metricsData.dates_metrics_total_count_login
+          },
+          {
+            name: this.$t('dashboard.LoginUsers'),
+            type: 'line',
+            areaStyle: {},
+            smooth: true,
+            data: this.metricsData.dates_metrics_total_count_active_users
+          },
+          {
+            name: this.$t('dashboard.LoginAssets'),
+            type: 'line',
+            areaStyle: {},
+            smooth: true,
+            data: this.metricsData.dates_metrics_total_count_active_assets
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    range() {
+      this.getMetricData()
+    }
+  },
+  mounted() {
+    this.getMetricData()
+  },
+  methods: {
+    async getMetricData() {
+      let url = '/api/v1/index/?dates_metrics=1&'
+      if (this.range === 'monthly') {
+        url = `${url}&monthly=1`
+      }
+      this.metricsData = await this.$axios.get(url)
+    },
+    getDataUrl() {
+      this.dataUrl = this.$refs.echarts.getDataURL({
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .box {
+    margin-top: 16px;
+    padding: 20px;
+    background: #fff;
+    .head {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      .title {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 26px;
+        color: #1F2329;
+      }
+      .icon {
+        color: #BBBFC4;
+        cursor: pointer;
+      }
+      .time {
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 26px;
+        text-align: right;
+        color: #8F959E;
+      }
+    }
+  }
+  .echarts {
+    width: 100%;
+    height: 266px;
+  }
+  @media print {
+    .disabled-when-print{
+      display: none;
+    }
+    .enabled-when-print{
+      display: inherit !important;
+    }
+    .print-margin{
+      margin-top: 10px;
+    }
+  }
+</style>

src/views/dashboard/components/RealTimeSummary.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="box">
+    <div style="margin-bottom: 12px;">
+      <span class="title">实时数据</span>
+      <span class="time">更新时间：2022-11-17</span>
+    </div>
+    <div class="content">
+      <el-row type="flex" justify="space-between">
+        <el-col v-for="item of summaryItems" :key="item.title" :md="8" :sm="12" :xs="12">
+          <SummaryCard :title="item.title" :body="item.body" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import SummaryCard from './SummaryCard'
+
+export default {
+  components: { SummaryCard },
+  props: {
+
+  },
+  data() {
+    return {
+      counter: {
+        total_count_assets: '.',
+        total_count_users: '.',
+        total_count_online_users: '.',
+        total_count_online_sessions: '.'
+      }
+    }
+  },
+  computed: {
+    summaryItems() {
+      return [
+        {
+          title: this.$t('dashboard.AssetsTotal'),
+          body: {
+            route: { name: 'AssetList' },
+            count: this.counter.total_count_assets,
+            disabled: !this.$hasPerm('assets.view_asset')
+          }
+        },
+        {
+          title: this.$t('dashboard.ConnectUsers'),
+          body: {
+            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
+            count: this.counter.total_count_online_users,
+            disabled: !this.$hasPerm('terminal.view_session')
+          }
+        },
+        {
+          title: this.$t('dashboard.OnlineSessions'),
+          body: {
+            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
+            count: this.counter.total_count_online_sessions,
+            disabled: !this.$hasPerm('terminal.view_session')
+          }
+        }
+      ]
+    }
+  },
+  async mounted() {
+    this.counter = await this.getResourcesCount()
+  },
+  methods: {
+    async getResourcesCount() {
+      return this.$axios.get('/api/v1/index/?total_count=1')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  padding: 20px;
+  background: #FFFFFF;
+  .title {
+    font-weight: 500;
+    font-size: 16px;
+    color: #1F2329;
+  }
+  .time {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    margin-left: 8px;
+    color: #8F959E;
+  }
+  .content {
+    .el-col {
+      padding-left: 16px;
+      border-left: 1px solid #EFF0F1;
+      &:first-child {
+        padding-left: 0;
+        border-left: none;
+      }
+    }
+    .sub {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 20px;
+      color: #646A73;
+    }
+    .num {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 24px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/dashboard/components/RingChart.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <echarts
+      ref="echarts"
+      :options="options"
+      :autoresize="true"
+    />
+  </div>
+</template>
+
+<script>
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/legend'
+
+export default {
+  components: {
+
+  },
+  props: {
+
+  },
+  data() {
+    return {
+      userConnectData: {
+        dates_total_count_active_users: 0,
+        dates_total_count_disabled_users: 0,
+        dates_total_count_inactive_users: 0
+      }
+    }
+  },
+  computed: {
+    themeColor() {
+      const documentStyle = document.documentElement.style
+      return {
+        primary: documentStyle.getPropertyValue('--color-primary'),
+        info: documentStyle.getPropertyValue('--color-info'),
+        success: documentStyle.getPropertyValue('--color-success')
+      }
+    },
+    options() {
+      const { primary, info, success } = this.themeColor
+      return {
+        legend: {
+          show: false
+        },
+        color: [primary, info, success],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        series: [
+          {
+            name: this.$t('dashboard.UserRatio'),
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '18',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { name: this.$t('dashboard.ActiveUser'), value: this.userConnectData.dates_total_count_active_users },
+              { name: this.$t('dashboard.DisabledUser'), value: this.userConnectData.dates_total_count_disabled_users },
+              { name: this.$t('dashboard.InActiveUser'), value: this.userConnectData.dates_total_count_inactive_users }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.getTotalActiveRadioData()
+  },
+  methods: {
+    async getTotalActiveRadioData() {
+      let url = '/api/v1/index/?dates_total_count_users=1&dates_total_count_assets=1'
+      if (this.range === 'monthly') {
+        url = `${url}&monthly=1`
+      }
+
+      const data = await this.$axios.get(url)
+      this.userConnectData = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/dashboard/components/SummaryCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="summary-header">
+      <span class="title">{{ title }}</span>
+    </div>
+    <slot>
+      <h1 class="no-margins">
+        <span v-if="body.disabled" class="num">
+          {{ body.count }}
+        </span>
+        <router-link v-else :to="body.route">
+          <span class="num disabled-link">{{ body.count }}</span>
+        </router-link>
+      </h1>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SummaryCard',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    rightSideLabel: {
+      type: Object,
+      default: () => ({})
+    },
+    body: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .title {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    color: #646A73;
+  }
+  .no-margins {
+    margin: 0 !important;
+  }
+  .num {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 40px;
+    color: #646A73;
+  }
+  .disabled-link {
+    cursor: pointer;
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+</style>

src/views/dashboard/index.vue

@@ -2,8 +2,17 @@
   <Page>
     <div v-if="this.$hasPerm('rbac.view_console|rbac.view_audit')">
       <Announcement />
-      <ResourceSummary />
-      <DatesLoginSummary />
+      <!-- <ResourceSummary /> -->
+      <!-- <DatesLoginSummary /> -->
+      <el-row :gutter="16">
+        <el-col :lg="12" :sm="24">
+          <Left />
+        </el-col>
+        <el-col :lg="12" :sm="24">
+          <DataSummary />
+        </el-col>
+      </el-row>
+      <TrendSummary />
       <TopAndLatestSummary />
     </div>
     <Page403 v-else />
@@ -13,19 +22,21 @@
 <script>
 import { Announcement } from '@/components'
 import { Page } from '@/layout/components'
-import ResourceSummary from './ResourceSummary'
-import DatesLoginSummary from './DatesLoginSummary'
 import TopAndLatestSummary from './TopAndLatestSummary'
 import Page403 from '@/views/403'
+import DataSummary from './DataSummary'
+import Left from './Left'
+import TrendSummary from './TrendSummary'
 
 export default {
   name: 'Dashboard',
   components: {
     Page,
-    DatesLoginSummary,
-    ResourceSummary,
     TopAndLatestSummary,
     Announcement,
+    DataSummary,
+    Left,
+    TrendSummary,
     Page403
   },
   data() {