fs-admin/src/views/monitor/ServerMonitor.vue

<script setup lang="ts">
import { CountTo } from 'vue3-count-to'
import type { EChartsOption } from 'echarts'
import chinaJS from '@/components/echarts/china.json'

const options: EChartsOption = reactive({
  tooltip: {},
  grid: {
    left: '1%',
    top: '1%',
    bottom: '1%',
    right: '1%'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine: { show: false },
    axisLabel: { show: false }
  },
  yAxis: {
    type: 'value',
    axisLine: { show: false },
    axisLabel: { show: false },
    splitLine: { show: false }
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: { color: '#b37feb' },
      smooth: true,
      lineStyle: {
        color: '#9254de'
      },
      symbol: 'none'
    }
  ]
})
const options1: EChartsOption = reactive({
  grid: {
    left: '1%',
    top: '1%',
    bottom: '1%',
    right: '1%'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine: { show: false },
    axisLabel: { show: false }
  },
  yAxis: {
    type: 'value',
    axisLine: { show: false },
    axisLabel: { show: false },
    splitLine: { show: false }
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
})
const radio = ref('今天')
const value = ref('')
const options2: EChartsOption = reactive({
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
})
const options3: EChartsOption = reactive({
  tooltip: {
    trigger: 'item',
    formatter: '{b}<br/>{c} 个'
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  visualMap: {
    min: 800,
    max: 50000,
    text: ['High', 'Low'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['#e6f7ff', '#69c0ff', '#1890ff']
    }
  },
  series: [
    {
      type: 'map',
      map: 'china',
      layoutCenter: ['50%', '50%'],
      layoutSize: '100%',
      label: {
        show: true
      },
      data: [
        { name: '北京', value: 20057.34 },
        { name: '上海', value: 15477.48 },
        { name: '山西', value: 31686.1 },
        { name: '河南', value: 6992.6 },
        { name: '四川', value: 44045.49 },
        { name: '西藏', value: 40689.64 },
        { name: '新疆', value: 37659.78 },
        { name: '黑龙江', value: 45180.97 },
        { name: '内蒙古', value: 55204.26 },
        { name: '浙江', value: 21900.9 },
        { name: '云南', value: 4918.26 },
        { name: '海南', value: 5881.84 },
        { name: '青海', value: 4178.01 },
        { name: '辽宁', value: 2227.92 },
        { name: '湖南', value: 2180.98 },
        { name: '台湾', value: 9172.94 },
        { name: '福建', value: 3368 },
        { name: '湖北', value: 806.98 }
      ]
    }
  ]
})
const options4: any = reactive({
  title: {
    text: '关键词',
    show: false
  },
  tooltip: {},
  series: [
    {
      type: 'wordCloud',
      shape: 'circle',
      left: 'center',
      top: 'center',
      width: '75%',
      height: '60%',
      rotationRange: [-45, 45],
      rotationStep: 15, // 0 15 30 45 度倾斜
      gridSize: 12,
      drawOutOfBound: false,
      // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
      textStyle: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        // 颜色可以用一个函数来返回字符串
        color: function () {
          // Random color
          return (
            'rgb(' +
            [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(
              ','
            ) +
            ')'
          )
        },
        emphasis: {
          shadowBlur: 2,
          shadowColor: '#333'
        }
      },
      data: [
        { name: 'Sam S Club', value: 1000 },
        { name: 'Macys', value: 6181 },
        { name: 'Amy Schumer', value: 4386 },
        { name: 'Jurassic World', value: 1001 }
      ]
    }
  ]
})
</script>

<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="6">
        <el-card>
          <div class="board-header text-secondary">
            <span>总销售额</span>
            <el-tooltip content="指标说明" placement="top">
              <el-icon size="16">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
          </div>
          <count-to class="count-num" :endVal="1234" :duration="1000" prefix="￥"></count-to>
          <div class="echarts-wrap">
            <div class="echarts-text">
              <span>周同比12%</span>
              <el-icon size="14" color="var(--el-color-danger)">
                <CaretTop />
              </el-icon>
              <span style="margin-left: 20px">日同比11%</span>
              <el-icon size="14" color="var(--el-color-success)">
                <CaretBottom />
              </el-icon>
            </div>
          </div>
          <el-divider />
          <div class="board-footer">
            日销售额<count-to :startVal="1234" :endVal="1234" :duration="1" prefix="￥"></count-to>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="board-header text-secondary">
            <span>访问量</span>
            <div>日</div>
          </div>
          <count-to class="count-num" :endVal="8864" :duration="1000" prefix="￥"></count-to>
          <div class="echarts-wrap">
            <Echarts :options="options" />
          </div>
          <el-divider />
          <div class="board-footer">
            日访问量<count-to :startVal="1234" :endVal="1234" :duration="1" prefix="￥"></count-to>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="board-header text-secondary">
            <span>支付笔数</span>
            <div>月</div>
          </div>
          <count-to class="count-num" :endVal="6560" :duration="1000" prefix="￥"></count-to>
          <div class="echarts-wrap">
            <Echarts :options="options1" />
          </div>
          <el-divider />
          <div class="board-footer">转化率60%</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="board-header text-secondary">
            <span>活动运营效果</span>
            <div>周</div>
          </div>
          <count-to class="count-num" :endVal="78" :duration="1000" suffix="%"></count-to>
          <div class="echarts-wrap">
            <el-progress
              class="board-progess"
              :text-inside="true"
              :stroke-width="8"
              :percentage="70"
              :show-text="false"
            />
          </div>
          <el-divider />
          <div class="board-footer">
            <div class="echarts-text">
              <span>周同比12%</span>
              <el-icon size="14" color="var(--el-color-danger)">
                <CaretTop />
              </el-icon>
              <span style="margin-left: 20px">日同比11%</span>
              <el-icon size="14" color="var(--el-color-success)">
                <CaretBottom />
              </el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mt-4" :gutter="15">
      <el-col :span="18">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户分布</span>
            </div>
          </template>
          <div style="height: 469px">
            <Echarts :options="options3" :map="true" :data="chinaJS" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-row class="column-wrap" align="top">
          <el-col :span="24">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>热门搜索</span>
                </div>
              </template>
              <div style="height: 176px">
                <Echarts :options="options4" />
              </div>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card style="margin-top: 15px">
              <template #header>
                <div class="card-header">
                  <span>用户活跃度</span>
                </div>
              </template>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-card class="mt-4">
      <div class="tab-header">
        <el-tabs class="demo-tabs">
          <el-tab-pane label="销售额" name="销售额"></el-tab-pane>
          <el-tab-pane label="访问量" name="访问量"></el-tab-pane>
        </el-tabs>
        <div class="flex">
          <el-radio-group v-model="radio" class="mr-3">
            <el-radio-button label="今天" />
            <el-radio-button label="本周" />
            <el-radio-button label="本月" />
            <el-radio-button label="本年" />
          </el-radio-group>
          <el-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" />
        </div>
      </div>
      <el-row>
        <el-col :span="17">
          <div class="monitor-title">销售量趋势</div>
          <div style="height: 320px">
            <Echarts :options="options2" />
          </div>
        </el-col>
        <el-col :span="7">
          <div class="monitor-title">门店销售额排名</div>
          <div class="monitor-rank-item ele-cell">
            <div class="monitor-num">1</div>
            <div class="ele-cell-content ele-elip">工专路 1 号店</div>
            <count-to class="text-secondary" :startVal="323234" :endVal="323234" :duration="1"></count-to>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 1.5715;
}
.count-num {
  font-size: 30px;
}
.echarts-wrap {
  height: 40px;
  font-size: 14px;
  color: var(--text-color);
  .echarts-text {
    padding-top: 16px;
    display: flex;
    align-items: center;
  }
  .board-progess {
    padding-top: 16px;
  }
}
.echarts-text {
  white-space: nowrap;
  span {
    white-space: nowrap;
  }
}
.el-divider {
  margin: 12px 0;
}
.board-footer {
  color: var(--text-color);
  font-size: 14px;
}
.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.monitor-title {
  padding: 6px 20px;
}
.monitor-rank-item {
  padding-left: 20px;
  margin-top: 18px;
  .monitor-num {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    border-radius: 50%;
    color: #fff;
    width: 20px;
    height: 20px;
  }
}
.ele-cell:not(.ele-cell-align-top) {
  align-items: center;
}
.ele-cell {
  display: flex;
}
.ele-cell > * + .ele-cell-content {
  padding-left: 12px;
}
.ele-cell > .ele-cell-content {
  flex: 1;
  box-sizing: border-box;
}
.column-wrap {
  height: 50%;
  .el-col {
    height: calc(100% - 8px);
    .el-card {
      height: 100%;
    }
  }
}
</style>