|
@@ -1,43 +1,44 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<div class="overview">
|
|
|
- <div class="title">数据概况</div>
|
|
|
+ <div class="title">{{ $t('operational.dataOverview') }}</div>
|
|
|
<div class="content" v-loading="loading">
|
|
|
<el-row class="line">
|
|
|
- <div class="date-picker">
|
|
|
+ <div class="date-picker">
|
|
|
<el-date-picker
|
|
|
- v-model="startTime"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- type="datetime"
|
|
|
- style="width: 200px"
|
|
|
- placeholder="开始时间"
|
|
|
+ v-model="startTime"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="datetime"
|
|
|
+ style="width: 200px"
|
|
|
+ :placeholder="$t('operational.startTimePlaceholder')"
|
|
|
></el-date-picker>
|
|
|
<span class="sp"> ~ </span>
|
|
|
<el-date-picker
|
|
|
- v-model="endTime"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- type="datetime"
|
|
|
- style="width: 200px"
|
|
|
- placeholder="结束时间"
|
|
|
+ v-model="endTime"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="datetime"
|
|
|
+ style="width: 200px"
|
|
|
+ :placeholder="$t('operational.endTimePlaceholder')"
|
|
|
></el-date-picker>
|
|
|
- </div>
|
|
|
- <div class="do-search">
|
|
|
- <el-button icon="el-icon-refresh" size="small" @click="reset"
|
|
|
- >重置</el-button
|
|
|
- >
|
|
|
+ </div>
|
|
|
+ <div class="do-search">
|
|
|
+ <el-button icon="el-icon-refresh" size="small" @click="reset">
|
|
|
+ {{ $t('operational.reset') }}
|
|
|
+ </el-button>
|
|
|
<el-button
|
|
|
- type="primary"
|
|
|
- icon="el-icon-search"
|
|
|
- size="small"
|
|
|
- @click="getMainData"
|
|
|
- >查询</el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="small"
|
|
|
+ @click="getMainData"
|
|
|
>
|
|
|
- <span class="ex" @click="setDay(3)">近3天</span>
|
|
|
- <span class="ex" @click="setDay(7)">近7天</span>
|
|
|
- <span class="ex" @click="setDay(15)">近15天</span>
|
|
|
- <span class="ex" @click="setDay(30)">近30天</span>
|
|
|
- </div>
|
|
|
- </el-row>
|
|
|
+ {{ $t('operational.query') }}
|
|
|
+ </el-button>
|
|
|
+ <span class="ex" @click="setDay(3)">{{ $t('operational.lastThreeDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay(7)">{{ $t('operational.lastSevenDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay(15)">{{ $t('operational.lastFifteenDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay(30)">{{ $t('operational.lastThirtyDays') }}</span>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
<el-row class="line">
|
|
|
<el-col class="item" :span="6">
|
|
|
<div class="do">
|
|
@@ -62,7 +63,7 @@
|
|
|
p-id="7599"
|
|
|
></path>
|
|
|
</svg>
|
|
|
- <p class="text">订单数(笔)</p>
|
|
|
+ <p class="text">{{ $t('operational.orderCount') }}</p>
|
|
|
<p class="number">{{ mainData.orderCount }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -89,7 +90,7 @@
|
|
|
p-id="10176"
|
|
|
></path>
|
|
|
</svg>
|
|
|
- <p class="text">交易金额(元)</p>
|
|
|
+ <p class="text">{{ $t('operational.transactionAmount') }}</p>
|
|
|
<p class="number">
|
|
|
{{
|
|
|
mainData.payAmount
|
|
@@ -122,7 +123,7 @@
|
|
|
fill="#8a8a8a"
|
|
|
></path>
|
|
|
</svg>
|
|
|
- <p class="text">总支付金额(元)</p>
|
|
|
+ <p class="text">{{ $t('operational.totalPayAmount') }}</p>
|
|
|
<p class="number">
|
|
|
{{ mainData.totalPayAmount ? mainData.totalPayAmount : "0.00" }}
|
|
|
</p>
|
|
@@ -146,7 +147,7 @@
|
|
|
p-id="4781"
|
|
|
></path>
|
|
|
</svg>
|
|
|
- <p class="text">总订单数(笔)</p>
|
|
|
+ <p class="text">{{ $t('operational.totalOrderCount') }}</p>
|
|
|
<p class="number">{{ mainData.totalOrderCount }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -185,7 +186,7 @@
|
|
|
fill="#8a8a8a"
|
|
|
></path>
|
|
|
</svg>
|
|
|
- <p class="text">总支付人数</p>
|
|
|
+ <p class="text">{{ $t('operational.totalPayUserCount') }}</p>
|
|
|
<p class="number">{{ mainData.totalPayUserCount }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -193,7 +194,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="overview">
|
|
|
- <div class="title">运营走势</div>
|
|
|
+ <div class="title">{{ $t('operational.operationTrend') }}</div>
|
|
|
<div class="content">
|
|
|
<el-row>
|
|
|
<el-col class="item" :span="12">
|
|
@@ -226,61 +227,61 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="overview">
|
|
|
- <div class="title">数据排行</div>
|
|
|
- <div class="content">
|
|
|
- <el-row>
|
|
|
- <el-col class="item" :span="12">
|
|
|
- <div class="title">商品销售排行</div>
|
|
|
- <el-table
|
|
|
- v-loading="loading"
|
|
|
- :data="goodsList"
|
|
|
- style="border: solid 1px #cccccc"
|
|
|
- >
|
|
|
- <el-table-column label="ID" prop="id" width="60" />
|
|
|
- <el-table-column label="商品名称" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.name }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="销售量" align="center" prop="num" />
|
|
|
- <el-table-column
|
|
|
- label="销售金额(元)"
|
|
|
- align="center"
|
|
|
- prop="amount"
|
|
|
- >
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.amount.toFixed(2) }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-col>
|
|
|
- <el-col class="item" :span="12">
|
|
|
- <div class="title">用户消费排行</div>
|
|
|
- <el-table
|
|
|
- v-loading="loading"
|
|
|
- :data="memberList"
|
|
|
- style="border: solid 1px #cccccc"
|
|
|
- >
|
|
|
- <el-table-column label="ID" prop="id" width="60" />
|
|
|
- <el-table-column label="用户名" align="center" width="100">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.name }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="会员号" align="center" prop="userNo" />
|
|
|
- <el-table-column
|
|
|
- label="消费金额(元)"
|
|
|
- align="center"
|
|
|
- prop="amount"
|
|
|
- >
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.amount.toFixed(2) }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <div class="title">{{ $t('operational.dataRanking') }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-row>
|
|
|
+ <el-col class="item" :span="12">
|
|
|
+ <div class="title">{{ $t('operational.goodsSalesRanking') }}</div>
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="goodsList"
|
|
|
+ style="border: solid 1px #cccccc"
|
|
|
+ >
|
|
|
+ <el-table-column :label="$t('operational.id')" prop="id" width="60" />
|
|
|
+ <el-table-column :label="$t('operational.goodsName')" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('operational.salesVolume')" align="center" prop="num" />
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('operational.salesAmount')"
|
|
|
+ align="center"
|
|
|
+ prop="amount"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.amount.toFixed(2) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="item" :span="12">
|
|
|
+ <div class="title">{{ $t('operational.userConsumptionRanking') }}</div>
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="memberList"
|
|
|
+ style="border: solid 1px #cccccc"
|
|
|
+ >
|
|
|
+ <el-table-column :label="$t('operational.id')" prop="id" width="60" />
|
|
|
+ <el-table-column :label="$t('operational.userName')" align="center" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('operational.memberNumber')" align="center" prop="userNo" />
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('operational.consumptionAmount')"
|
|
|
+ align="center"
|
|
|
+ prop="amount"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.amount.toFixed(2) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -311,16 +312,16 @@ export default {
|
|
|
totalPayUserCount: 0,
|
|
|
},
|
|
|
chart1: {
|
|
|
- title: "近七日订单数量",
|
|
|
- color: "#ff5b57",
|
|
|
- chartType: "bar",
|
|
|
- header: ["订单统计"],
|
|
|
+ title: this.$t('operational.lastSevenDaysOrderCount'),
|
|
|
+ color: "#ff5b57",
|
|
|
+ chartType: "bar",
|
|
|
+ header: [this.$t('operational.orderStatistics')]
|
|
|
},
|
|
|
chart2: {
|
|
|
- title: "收益趋势图",
|
|
|
- color: "#113a28",
|
|
|
- chartType: "line",
|
|
|
- header: ["会员统计"],
|
|
|
+ title: this.$t('operational.incomeTrendChart'),
|
|
|
+ color: "#113a28",
|
|
|
+ chartType: "line",
|
|
|
+ header: [this.$t('operational.memberStatistics')]
|
|
|
},
|
|
|
chartData1: [],
|
|
|
chartData2: [],
|