ttsbg-java-web/src/views/index.vue

<template>
  <div class="app-container home">
    <div class="title">{{ $route.meta.title }}</div>
    <div class="body">
      <el-card class="today">
        <div class="card-title">今日核心数据</div>
        <el-row type="flex" class="data">
          <el-col>
            <div class="label">新用户</div>
            <div class="num">569</div>
            <div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
          </el-col>
          <div class="divider"></div>
          <el-col>
            <div class="label">新用户</div>
            <div class="num">569</div>
            <div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
          </el-col>
          <div class="divider"></div>
          <el-col>
            <div class="label">新用户</div>
            <div class="num">569</div>
            <div class="bottom-label">同比上周<span class="down">8.63%</span><i class="el-icon-caret-bottom down"></i></div>
          </el-col>
          <div class="divider"></div>
          <el-col>
            <div class="label">近7日UV</div>
            <div class="num">569</div>
          </el-col>
          <div class="divider"></div>
          <el-col>
            <div class="label">近30日UV</div>
            <div class="num">569</div>
          </el-col>
        </el-row>
      </el-card>
      <el-row :gutter="10" class="order" type="flex">
        <el-col :span="14">
          <el-card>
            <div class="card-title">全部订单</div>
            <el-row type="flex" class="all-card" :gutter="10">
              <el-col>
                <div class="data">
                  <div class="img"></div>
                  <div class="value">待付款：123</div>
                </div>
              </el-col>
              <el-col>
                <div class="data">
                  <div class="img"></div>
                  <div class="value">待付款：123</div>
                </div>
              </el-col>
              <el-col>
                <div class="data">
                  <div class="img"></div>
                  <div class="value">待付款：123</div>
                </div>
              </el-col>
              <el-col>
                <div class="data">
                  <div class="img"></div>
                  <div class="value">待付款：123</div>
                </div>
              </el-col>
              <el-col>
                <div class="data">
                  <div class="img"></div>
                  <div class="value">待付款：123</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card class="today-order">
            <div class="num">569</div>
            <div class="bottom-label">今日订单数</div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card class="total-income">
            <div class="num">569.00</div>
            <div class="bottom-label">今日总收入</div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" type="flex" class="bottom">
        <el-col :span="14">
          <el-card>
            <div class="card-title">月销售趋势</div>
            <div ref="chart" class="chart"></div>
          </el-card>
        </el-col>
        <el-col :span="10" class="rank">
          <el-card class="h-100">
            <div class="top">
              <div class="card-title">商品销售TOP5</div>
              <el-dropdown class="select-day">
                <span class="el-dropdown-link">
                  近7天<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <el-table :data="rankData">
              <el-table-column label="排名" type="index" align="center"></el-table-column>
              <el-table-column label="商品" prop="name" align="center"></el-table-column>
              <el-table-column label="订单数" prop="order" align="center"></el-table-column>
              <el-table-column label="销售总额" prop="price" align="center"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="service" v-draggable="{ x: true, y: true }" />
  </div>
</template>

<script>

import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, UniversalTransition]);


export default {
  name: "Index",
  data() {
    return {
      // 商品销售数据
      rankData: Array.from(new Array(5).keys()).map(item => {
        return {
          name: "华为Mate 40 手机",
          order: 56,
          price: 1555646.00
        }
      })
    };
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      let myChart = echarts.init(this.$refs.chart);
      let option;

      option = {
        xAxis: {
          type: 'category',
          data: Array.from(new Array(12).keys()).map(item => `${item + 1}月`)
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        series: [
          {
            data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
            type: 'line'
          },
          {
            data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);

    }
  }
};
</script>

<style scoped lang="scss">
.home {
  background-color: #f8f9fd;

  .service {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 40px;
    right: 40px;
    background-color: #fff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  }

  &>.title {
    color: rgba(22, 132, 252, 1);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }

  .card-title {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: bold;
  }

  .num {
    font-size: 24px;
    margin-top: 10px;
  }

  .bottom-label {
    font-size: 16px;
    margin-top: 10px;
  }

  &>.body {
    background-color: #f5f5f5;

    &>.today {
      margin-top: 10px;



      .data {

        @for $i from 1 through 4 {
          &>.divider:nth-of-type(#{$i*2}) {
            height: 75%;
            width: 1px;
            background-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            bottom: 0;
            left: 20% * $i;
          }
        }

        .label {
          font-size: 16px;
        }

        .up {
          color: red;
        }

        .down {
          color: green;
        }

        .up,
        .down {
          margin-left: 10px;
        }

        .label,
        .num,
        .bottom-label {
          margin-left: 15%;
        }
      }
    }


    &>.order {
      margin-top: 10px;

      .all-card {
        .data {
          text-align: center;

          &>.img {
            background-color: #e9f2ff;
            width: 50%;
            /* 设置高度为宽度 */
            padding-top: 50%;
            margin: auto;
            border-radius: 10px;
          }

          &>.value {
            font-size: 16px;
            margin-top: 5px;
          }
        }
      }

      .today-order,
      .total-income {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
    }

    &>.bottom {
      margin-top: 10px;

      .h-100 {
        height: 100%;
      }

      &>.rank {
        .top {
          display: flex;
          justify-content: space-between;

          .select-day {
            font-size: 16px;
            margin-top: 5px;
          }
        }
      }

      .chart {
        height: 400px;
      }
    }

  }
}
</style>