|
|
@@ -10,18 +10,195 @@
|
|
|
</el-main>
|
|
|
</div>
|
|
|
<el-main v-else>
|
|
|
- <el-card shadow="never" header="实时概况">
|
|
|
-
|
|
|
+ <el-card shadow="never" header="实时概况" class="no-boder">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel">
|
|
|
+ <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-money /></el-icon></div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">销售额 (元)</div>
|
|
|
+ <div class="number">0.00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel">
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">支付订单数</div>
|
|
|
+ <div class="number">0</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel">
|
|
|
+ <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-pie-chart /></el-icon></div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">新增用户数</div>
|
|
|
+ <div class="number">0.00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel">
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">付款用户数</div>
|
|
|
+ <div class="number">0.00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-card>
|
|
|
+ <div class="total-panel-list">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel padding15">
|
|
|
+ <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-coin /></el-icon></div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">商品总数量</div>
|
|
|
+ <div class="number">0.00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel padding15">
|
|
|
+ <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-coin /></el-icon></div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">会员总人数</div>
|
|
|
+ <div class="number">0.00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel padding15">
|
|
|
+ <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-coin /></el-icon></div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">付款订单总量</div>
|
|
|
+ <div class="number">0.00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel padding15">
|
|
|
+ <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-coin /></el-icon></div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">消费总人数</div>
|
|
|
+ <div class="number">0.00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="total-order-status">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel center no-flex">
|
|
|
+ <div class="title">待发货订单(笔)</div>
|
|
|
+ <div class="number">0</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel center no-flex">
|
|
|
+ <div class="title">售后单(笔)</div>
|
|
|
+ <div class="number">0</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel center no-flex">
|
|
|
+ <div class="title">待核销订单(笔)</div>
|
|
|
+ <div class="number">0</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="total-panel center no-flex">
|
|
|
+ <div class="title">待付款订单(笔)</div>
|
|
|
+ <div class="number">0</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="this.$store.state.global.ismobile?24:12" :xs="24">
|
|
|
+ <div class="total-order-status mt10">
|
|
|
+ <scEcharts height="500px" :option="option2"></scEcharts>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="this.$store.state.global.ismobile?24:12" :xs="24">
|
|
|
+ <div class="total-order-status mt10">
|
|
|
+ <scEcharts height="500px" :option="option"></scEcharts>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-main>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import scEcharts from '@/components/scEcharts';
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ scEcharts
|
|
|
+ },
|
|
|
data(){
|
|
|
return {
|
|
|
- pageLoading:false
|
|
|
+ pageLoading:false,
|
|
|
+ option2: {},
|
|
|
+ option: {
|
|
|
+ title: {
|
|
|
+ left: 'left',
|
|
|
+ text: '订单数据',
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '80px'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ x: 'center',
|
|
|
+ data: ['订单金额', '订单数']
|
|
|
+ },
|
|
|
+ calculable: true,
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['06-25', '06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04']
|
|
|
+ },
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value'
|
|
|
+ }],
|
|
|
+ // yAxis: [{type: 'value', splitLine: {show: true}, gridIndex: 0, axisLabel: {formatter: '{value} 单'}}],
|
|
|
+ series: [{
|
|
|
+ name: '订单金额',
|
|
|
+ data: [120, 200, 50, 80, 170, 210, 130,450,244,168],
|
|
|
+ smooth: true, showBackground: false,
|
|
|
+ areaStyle: {color: 'rgba(64, 158, 254, 0.6)'},
|
|
|
+ type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
+ emphasis:{focus: 'series'},
|
|
|
+ label: {position: 'top', formatter: '{c}', show: true},
|
|
|
+ },{
|
|
|
+ name: '订单数',
|
|
|
+ data: [20, 210, 10, 180, 110, 100, 130,450,244,168],
|
|
|
+ smooth: true, showBackground: false,
|
|
|
+ areaStyle: {color: 'rgba(54, 206, 159, 0.6)'},
|
|
|
+ type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
+ emphasis:{focus: 'series'},
|
|
|
+ label: {position: 'top', formatter: '{c}', show: true},
|
|
|
+ }]
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.no-boder{border: 0;}
|
|
|
+.total-panel{display: flex;align-items: center;gap: 20px;background-color: #fff;border-radius: 5px;flex: 1;}
|
|
|
+.total-panel.padding15{padding: 15px;}
|
|
|
+.total-panel.no-flex{flex-direction: column;justify-content: center;gap: 5px;}
|
|
|
+.total-panel.no-flex .title{font-weight: bold;}
|
|
|
+.total-panel.center .right{text-align: center;}
|
|
|
+.total-panel .icon{width: 58px;height: 58px;border-radius: 50%;background-color: #eff6ff;display: flex;align-items: center;justify-content: center;}
|
|
|
+.total-panel .title{font-size: 13px;color: #666;}
|
|
|
+.total-panel .number{font-size: 24px;color: #000;line-height: 38px;}
|
|
|
+.total-panel-list{margin: 20px 0;}
|
|
|
+.total-order-status{background-color: #fff;padding: 20px;}
|
|
|
+.mt10{margin-top: 20px;}
|
|
|
+</style>
|
