image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=320, user-scalable=no, initial-scale=1.0, maximum-scale=1.3, minimum-scale=1.0">
<title>普通订单</title>
<link rel="stylesheet" type="text/css" href="[../css/reset.css](http://ha.tongchengxianggou.com/css/reset.css)" />
<!-- 引入样式 -->
<link rel="stylesheet" href="[https://unpkg.com/element-ui/lib/theme-chalk/index.css](https://unpkg.com/element-ui/lib/theme-chalk/index.css)">
<script src="[https://unpkg.com/vue/dist/vue.min.js](https://unpkg.com/vue/dist/vue.min.js)"></script>
<script src="[https://unpkg.com/axios/dist/axios.min.js](https://unpkg.com/axios/dist/axios.min.js)"></script>
<script src="[https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js](https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js)"></script>
<script src="[https://cdn.bootcss.com/qs/6.5.2/qs.min.js](https://cdn.bootcss.com/qs/6.5.2/qs.min.js)"></script>
<style>
.h_20{
height: 20px;
}
.opera_change {
width: 600px;
margin: 10px auto;
position: relative;
}
.ul_center {
width: 600px;
height: 48px;
margin: 10px auto;
border-bottom: 2px solid #f1f1f1;
}
.ul_center .item {
position: relative;
cursor: pointer;
float: left;
height: 45px;
padding: 0 20px;
margin: 0 20px;
background: #ffffff;
font-size: 14px;
color: #666;
line-height: 45px;
border-bottom: 3px solid #ffffff;
}
.ul_center .item.active {
color: rgba(24, 144, 255, 1);
background: rgba(24, 144, 255, 0.1);
border-bottom: 3px solid rgba(24, 144, 255, 1);
}
.container {
width: 100%;
max-width: 1600px;
overflow-y: auto;
}
.opera {
width: 1200px;
margin: 0 auto;
}
.channel_change {
padding: 10px 10px;
}
.channel_change::after {
display: block;
content: "";
visibility: hidden;
clear: both;
height: 0;
}
.opera_show .btn {
width: 40%;
float: right;
}
.opera .m-top {
background: #ffffff;
padding: 19px;
box-shadow:0px 0px 6px 0px rgba(0,0,0,0.07);
}
.opera .m-top::after {
display: block;
height: 0;
content: " ";
visibility: hidden;
clear: both;
}
.opera .top_inline {
padding: 0px 0 0 0;
}
.opera .top_inline::after {
display: block;
content: " ";
visibility: hidden;
height: 0;
clear: both;
}
.opera .top_inline .tit {
float: left;
font-size: 14px;
line-height: 40px;
color: #606266;
padding: 0 30px;
}
.opera .top_inline .data_choose {
float: left;
line-height: 30px;
}
.opera_show {
position: absolute;
top: 70px;
left: 0;
width: 700px;
height: 300px;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
border-radius: 4px;
background: #fff;
z-index: 99;
}
.opera_show .c_list {
width: 120px;
float: left;
}
.opera_alt_show {
position: absolute;
top: 51px;
left: 50%;
margin-left: -10px;
width: 20px;
height: 20px;
z-index: 999;
}
.opera_alt_show::after {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
}
.opera_alt_show::before {
position: absolute;
bottom: 0px;
left: 0px;
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(0, 0, 0, .1);
}
.el-table{
width: 99.9%;
}
.table_bottom_wp{
margin-top: 19px;
background:rgba(255,255,255,1);
box-shadow:0px 0px 8px 0px rgba(0,0,0,0.07);
border-radius:3px;
margin-bottom: 19px;
}
.table_bottom {
padding: 30px;
}
.table_bottom_wp .title_ord{
height: 38px;
line-height: 38px;
padding: 0 19px;
font-size: 12px;
color: #333333;
font-weight: bold;
}
.hidden {
opacity: 0;
}
h2{
font-size: 18px;
font-weight: bold;
}
#app{
opacity: 0;
background: #F8F8F8;
padding: 19px 19px 0 19px;
min-width: 1200px;
}
.fixed_table_show{
top: 0;
left: 0px;
position: fixed;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
opacity: 0;
z-index: 500;
}
.fixed_table_show.show{
opacity: 1;
}
.fixed_table_show ul{
width: 100%;
display: flex;
background: rgb(229, 229, 229);
color: rgb(89, 89, 89);
border: rgb(219, 219, 219);
}
.fixed_table_show li{
text-align: center;
font-size: 14px;
color: rgb(89, 89, 89);
padding: 12px 0;
flex: 1;
}
.time_choose{
float: left;
margin-right: 15px;
}
.data_flex_part {
height: 150px;
padding: 19px 0;
}
.data_flex_part .d_flex{
display: flex;
width: 100%;
height: 150px;
}
.data_flex_part .d_flex .item{
flex: 1;
background:rgba(255,255,255,1);
box-shadow:0px 0px 6px 0px rgba(0,0,0,0.07);
border-radius:3px;
margin-left: 1.2%;
overflow: hidden;
position: relative;
}
.line_1_px{
height: 1px;
background: #EDEDED;
}
.data_flex_part .d_flex .item .time{
margin-left: 2%;
font-size: 12px;
color: #999999;
padding: 6px 0 6px 14px;
}
.data_flex_part .d_flex .item .tit_d{
padding-top: 10px;
padding-left: 14px;
margin-left: 2%;
font-size: 12px;
color: #333333;
line-height: 20px;
font-weight: bold;
}
.data_flex_part .d_flex .item:nth-of-type(1){
margin-left: 0px;
}
.data_flex_part .d_flex .item .val{
line-height: 50px;
font-size: 35px;
color: #2F97F6;
padding-left: 14px;
margin-left: 2%;
font-weight: bold;
}
.data_flex_part .d_flex .item .mon{
font-size: 12px;
padding-top: 6px;
padding-left: 14px;
margin-left: 2%;
font-size: 12px;
color: #333333;
}
.data_flex_part .d_flex .item .val span{
font-size: 12px;
color: #999999;
}
.data_flex_part .d_flex .item .color_1{
color: #2F97F6;
}
.data_flex_part .d_flex .item .color_2{
color: #00CA6A;
}
.data_flex_part .d_flex .item .color_3{
color: #FFA100;
}
.data_flex_part .d_flex .item .color_4{
color: #FF454B;
}
.data_flex_part .d_flex .item .color_5{
color: #00D9B9;
}
.d_line_1 {
top: 0;
left: 0;
position: absolute;
width: 2%;
height: 150px;
background:linear-gradient(180deg,rgba(92,200,251,1) 0%,rgba(47,151,246,1) 100%);
border-radius:1px;
}
.d_line_2 {
top: 0;
left: 0;
position: absolute;
width: 2%;
height: 150px;
background:linear-gradient(180deg,rgba(0,231,163,1) 0%,rgba(0,202,106,1) 100%);
border-radius:1px;
}
.d_line_3 {
top: 0;
left: 0;
position: absolute;
width: 2%;
height: 150px;
background:linear-gradient(180deg,rgba(255,207,0,1) 0%,rgba(255,161,0,1) 100%);
border-radius:1px;
}
.d_line_4 {
top: 0;
left: 0;
position: absolute;
width: 2%;
height: 150px;
background:linear-gradient(180deg,rgba(255,123,130,1) 0%,rgba(255,69,75,1) 100%);
border-radius:1px;
}
.d_line_5 {
top: 0;
left: 0;
position: absolute;
width: 2%;
height: 150px;
background:linear-gradient(180deg,rgba(0,238,221,1) 0%,rgba(0,217,185,1) 100%);
border-radius:1px;
}
.order_trend {
background:rgba(255,255,255,1);
box-shadow:0px 0px 6px 0px rgba(0,0,0,0.07);
border-radius:3px;
}
.order_trend .title_ord{
height: 38px;
line-height: 38px;
padding: 0 19px;
font-size: 12px;
color: #333333;
font-weight: bold;
}
.order_type_flex {
display: flex;
padding-top: 19px;
}
.order_type_flex .item{
flex: 1;
background:rgba(255,255,255,1);
box-shadow:0px 0px 6px 0px rgba(0,0,0,0.07);
border-radius:1px;
margin-left: 17px;
position: relative;
}
.order_type_flex .item .order_wp{
position: absolute;
width: 590px;
top: 40px;
left: 0;
}
.order_type_flex .item .order_wp_1{
z-index: -1;
}
.order_type_flex .item:nth-of-type(1) {
margin-left: 0;
}
.order_type_flex .item .title_ord{
height: 38px;
line-height: 38px;
padding: 0 19px;
font-size: 12px;
color: #333333;
font-weight: bold;
}
.order_type_flex .item .title_ord .btn_fr{
float: right;
}
.order_type_flex .item .title_ord .btn_fr .item_b{
width: 50px;
height: 23px;
border: 1px solid rgba(237,237,237,1);
border-radius:3px;
color: #333333;
text-align: center;
line-height: 23px;
float: left;
margin-left: 13px;
margin-top: 7px;
font-weight: 400;
cursor: pointer;
}
.order_type_flex .item .title_ord .btn_fr .item_b.cur{
border:1px solid rgba(30,159,255,1);
color: #1E9FFF;
}
.moth_order {
position: relative;
margin-top: 19px;
height:450px;
background:rgba(255,255,255,1);
box-shadow:0px 0px 8px 0px rgba(0,0,0,0.07);
border-radius:3px;
}
.moth_order .tit_tab {
height: 50px;
padding: 0 30px;
}
.moth_order .tit_tab .m_tab {
width: 100px;
cursor: pointer;
float: left;
border-bottom: 3px solid #fff;
line-height: 47px;
font-size: 13px;
color: #333333;
font-weight: 400;
margin-right: 35px;
text-align: center;
}
.moth_order .tit_tab .m_tab.cur{
color: #1E9FFF;
font-weight: bold;
border-bottom: 3px solid #1E9FFF;
}
.moth_order .order_moth_wp {
position: absolute;
width: 1200px;
top: 50px;
left: 0;
}
.moth_order .order_moth_wp_1{
z-index: -1;
}
.orderType_info .info_item:nth-of-type(1){
position: absolute;
z-index: 9999;
top: 214px;
left: 36px;
font-size: 12px;
color: #333333;
line-height: 15px;
}
.orderType_info .info_item:nth-of-type(2){
position: absolute;
z-index: 9999;
top: 288px;
left: 36px;
font-size: 12px;
color: #333333;
line-height: 15px;
}
</style>
</head>
<body>
<div id="app" ref="ulCenter">
<div class="opera">
<!-- 头部筛选开始 -->
<div class="m-top">
<div class="top_inline">
<ul class="time_choose">
<el-button :type="current == 0 ? 'primary' : ''" @click="choosetime(0)" size="small">今天</el-button>
<el-button :type="current == 1 ? 'primary' : ''" @click="choosetime(1)" size="small">昨天</el-button>
<el-button :type="current == 2 ? 'primary' : ''" @click="choosetime(2)" size="small">最近七天</el-button>
<el-button :type="current == 3 ? 'primary' : ''" @click="choosetime(3)" size="small">最近30天</el-button>
</ul>
<div class="data_choose">
<el-date-picker v-model="value" type="daterange" :picker-options="pickerOptions" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" size="small" value-format="yyyy-MM-dd"></el-date-picker>
</div>
<div class="data_choose" style="margin-left: 30px">
<el-checkbox-group v-model="platformval" :min="1" size="small">
<el-checkbox v-for="item in platform" :label="item" :key="item">
<span class="hidden" :style="{opacity: (platform.length > 0 ? 1 : 0)}">{{item}}</span>
</el-checkbox>
</el-checkbox-group>
</div>
<el-button type="primary" @click="filercharts" style="margin-left: 30px;" size="small">筛选</el-button>
</div>
</div>
<!-- 数据展示 -->
<div class="data_flex_part">
<div class="d_flex">
<div class="item">
<div class="d_line_1"></div>
<div class="time">
{{chartdata.startTime}}~{{chartdata.endTime}}
</div>
<div class="line_1_px"></div>
<div class="tit_d">
总订单量
<el-tooltip effect="dark" content="所有订单，包括未支付、取消订单、退款等。GMV指的是所有订单合计金额" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
<div class="val color_1">
{{orderInfo.GMVSize}}<span>(单)</span>
</div>
<div class="mon">GMV：{{orderInfo.GMV}} <span style="margin-left: 5px">首单人数：{{orderInfo.theFirstOrderSize}}</span></div>
</div>
<div class="item">
<div class="d_line_2"></div>
<div class="time">
{{chartdata.startTime}}~{{chartdata.endTime}}
</div>
<div class="line_1_px"></div>
<div class="tit_d">
完成订单
<el-tooltip effect="dark" content="已经完成收货的订单" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
<div class="val color_2">
{{orderInfo.completeOrderSize}}<span>(单)</span>
</div>
<div class="mon">订单金额：{{orderInfo.completeOrderPayMoney}}</div>
</div>
<div class="item">
<div class="d_line_3"></div>
<div class="time">
{{chartdata.startTime}}~{{chartdata.endTime}}
</div>
<div class="line_1_px"></div>
<div class="tit_d">
退款订单
<el-tooltip effect="dark" content="已退款成功的订单" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
<div class="val color_3">
{{orderInfo.funOrderSize}}<span>(单)</span>
</div>
<div class="mon">退款金额：{{orderInfo.funOrderPayMoney}}</div>
</div>
<div class="item">
<div class="d_line_4"></div>
<div class="time">
{{chartdata.startTime}}~{{chartdata.endTime}}
</div>
<div class="line_1_px"></div>
<div class="tit_d">
成本金额
<el-tooltip effect="dark" content="商品的采购成本合计" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
<div class="val color_4">
{{orderInfo.cost}}<span>(元)</span>
</div>
<div class="mon">
配送成本：{{orderInfo.fee}}
<span style="margin-left: 10px">打包成本：{{orderInfo.packFee}}</span>
</div>
</div>
<div class="item">
<div class="d_line_5"></div>
<div class="time">
{{chartdata.startTime}}~{{chartdata.endTime}}
</div>
<div class="line_1_px"></div>
<div class="tit_d">
利润
<el-tooltip effect="dark" content="利润=实付金额-商品成本-配送成本-打包袋-千六手续费" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
<div class="val color_5">
{{orderInfo.profit}}<span>(元)</span>
</div>
<div class="mon"></div>
</div>
</div>
</div>
<!-- 订单趋势 -->
<div class="order_trend">
<div class="title_ord">
订单趋势
<!-- <el-button type="text" @click="dialogTableVisible = true" size="small" style="margin-left: 10px">订单明细</el-button> -->
</div>
<!-- 订单明细 -->
<el-dialog title="订单明细" :visible.sync="dialogTableVisible">
<!-- <template>
<el-button>下载</el-button>
</template> -->
<el-table :data="gridData" border style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}"
max-height="400" :header-cell-style="{background:'#f9f9f9',color:'#333333',border:'#f0f0f6'}">
<el-table-column property="datetime" label="日期"></el-table-column>
<el-table-column property="GMVSize" label="总订单量"></el-table-column>
<el-table-column property="GMV" label="GMV"></el-table-column>
<el-table-column property="completeOrderSize" label="完成订单数"></el-table-column>
<el-table-column property="completeOrderPayMoney" label="完成订单支付金额"></el-table-column>
<el-table-column property="funOrderSize" label="退款订单数"></el-table-column>
<el-table-column property="funOrderPayMoney" label="退款金额（元）"></el-table-column>
<el-table-column property="cost" label="成本金额"></el-table-column>
<el-table-column property="profit" label="利润（元）"></el-table-column>
<el-table-column prop="datetime" label="操作" align="center">
<template slot-scope="scope">
<div @click="godetail(scope.row.datetime)" style="color: #409eff">
详情
</div>
</template>
</el-table-column>
<!-- <el-table-column property="address" label="操作">
<template slot-scope="scope">
<el-button type="text">查看订单</el-button>
</template>
</el-table-column> -->
</el-table>
</el-dialog>
<div class="line_1_px"></div>
<div class="h_20"></div>
<div id="orderTrend" style="width: 100%;height:380px;"></div>
</div>
<!-- 订单类型和店铺销售排行榜 -->
<div class="order_type_flex">
<div class="item">
<div class="title_ord">订单类型</div>
<div class="line_1_px"></div>
<div id="orderType" style="width: 90%;height:380px;margin:0 auto"></div>
<div class="orderType_info">
<div class="info_item" v-for="(item, index) in orderType_info" :key="item">
{{item.name}}订单：{{item.size}}(单)<span style="margin-left: 5px"> {{item.money}}(元)</span>
</div>
</div>
</div>
<div class="item">
<div class="title_ord">店铺销售排行榜
<div class="btn_fr" style="float: right">
<div class="item_b" :class="isOrder == 1 ? 'cur': ''" @click="isrank(1)">销售额</div>
<div class="item_b" :class="isOrder == 2 ? 'cur': ''" @click="isrank(2)">订单量</div>
</div>
</div>
<div class="line_1_px"></div>
<div class="order_wp" :class="isOrder == 2 ? 'order_wp_1' : ''">
<div id="orderRank" style="width: 100%;height:380px"></div>
</div>
<div class="order_wp" :class="isOrder == 1 ? 'order_wp_1' : ''">
<div id="orderNumRank" style="width: 100%;height:380px"></div>
</div>
</div>
</div>
<!-- 月销售额和月订单量 -->
<div class="moth_order">
<div class="tit_tab">
<div class="m_tab" :class="isMonth == 1 ? 'cur': ''" @click="isMothClick(1)">月销售额</div>
<div class="m_tab" :class="isMonth == 2 ? 'cur': ''" @click="isMothClick(2)">月订单量</div>
<div class="m_right" style="float:right">
<div style="float:left;line-height:50px">
<el-checkbox-group v-model="platformval2" :min="1" size="small">
<el-checkbox v-for="item in platform2" :label="item" :key="item">
<span class="hidden" :style="{opacity: (platform.length > 0 ? 1 : 0)}">{{item}}</span>
</el-checkbox>
</el-checkbox-group>
</div>
<div style="float:left;margin-top:8px;margin-left: 10px;">
<el-date-picker v-model="year" type="year" size="small" value-format="yyyy" placeholder="选择年">
</el-date-picker>
</div>
</div>
</div>
<div class="line_1_px"></div>
<div class="order_moth_wp" :class="isMonth == 2 ? 'order_moth_wp_1' : ''">
<div id="orderMoth" style="width: 100%;height:380px"></div>
</div>
<div class="order_moth_wp" :class="isMonth == 1 ? 'order_moth_wp_1' : ''">
<div id="orderMothNum" style="width: 100%;height:380px"></div>
</div>
</div>
<!-- 表格 -->
<div class="table_bottom_wp">
<div class="title_ord">订单明细</div>
<div class="line_1_px"></div>
<div class="table_bottom">
<el-table show-summary :data="gridData" border style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}"
max-height="400" :header-cell-style="{background:'#f9f9f9',color:'#333333',border:'#f0f0f6'}">
<el-table-column property="datetime" label="日期"></el-table-column>
<el-table-column property="GMVSize" label="总订单量"></el-table-column>
<el-table-column property="GMV" label="GMV"></el-table-column>
<el-table-column property="completeOrderSize" label="完成订单数"></el-table-column>
<el-table-column property="completeOrderPayMoney" label="完成订单支付金额"></el-table-column>
<el-table-column property="funOrderSize" label="退款订单数"></el-table-column>
<el-table-column property="funOrderPayMoney" label="退款金额（元）"></el-table-column>
<el-table-column property="cost" label="成本金额"></el-table-column>
<el-table-column property="profit" label="利润（元）"></el-table-column>
<el-table-column prop="datetime" label="操作" align="center">
<template slot-scope="scope">
<div @click="godetail(scope.row.datetime)" style="color: #409eff">
详情
</div>
</template>
</el-table-column>
<!-- <el-table-column property="address" label="操作">
<template slot-scope="scope">
<el-button type="text">查看订单</el-button>
</template>
</el-table-column> -->
</el-table>
<!-- <el-table id="mytable" :data="tabledata" border style="width: 100%"
:default-sort="{prop: 'date', order: 'descending'}"
max-height="400"
:header-cell-style="{background:'#f9f9f9',color:'#333333',border:'#f0f0f6'}">
<el-table-column prop="datetime" label="日期" align="center">
</el-table-column>
<el-table-column prop="GMVSize" label="总订单量" align="center">
</el-table-column>
<el-table-column prop="GMV" label="GMV" align="center">
</el-table-column>
<el-table-column prop="completeOrderSize" label="完成订单数" align="center">
</el-table-column>
<el-table-column prop="completeOrderPayMoney" label="完成订单支付金额" align="center">
</el-table-column>
<el-table-column prop="orderUserSize" label="下单人数" align="center">
</el-table-column>
<el-table-column prop="funOrderSize" label="退款订单数" align="center">
</el-table-column>
<el-table-column prop="funOrderPayMoney" label="退款金额（元）" align="center">
</el-table-column>
<el-table-column prop="cost" label="成本金额" align="center">
</el-table-column>
<el-table-column prop="fee" label="配送费（元）" align="center">
</el-table-column>
<el-table-column prop="packFee" label="打包费" align="center">
</el-table-column>
<el-table-column prop="profit" label="利润（元）" align="center">
</el-table-column>
<el-table-column prop="scope" label="详情" align="center">
<template slot-scope="scope">
<div @click="godetailMonth(scope.row.datetime)" style="color: #409eff">
详情
</div>
</template>
</el-table-column>
</el-table> -->
</div>
</div>
<div class="h_20"></div>
</div>
</div>
</body>
<script src="[https://unpkg.com/element-ui/lib/index.js](https://unpkg.com/element-ui/lib/index.js)"></script>
<script type="text/javascript" src="[../js/echarts.min.js](http://ha.tongchengxianggou.com/js/echarts.min.js)"></script>
<script type="text/javascript" src="[../js/macarons.js](http://ha.tongchengxianggou.com/js/macarons.js)"></script>
<script>
var app = new Vue({
el: "#app",
data() {
return {
platform2: ["自营", "合作"],
platformval2: ["自营", "合作"],
year: null,
orderType_info: [],
gridData: [],
dialogTableVisible: false,
orderInfo: {},
isOrder: 1,
isMonth: 1,
current: 2,
platform: ["自营", "合作"],
platformval: ["自营", "合作"],
// api: 'http://pic.tongchengxianggou.com:9011',
// api: 'http://192.168.1.135:8080/web',
api: 'http://ha.tongchengxianggou.com',
workDo2: "",
workDo: "",
tabledata: [],
select: 0,
value: [],
cweek: null,
visible: false,
chartdata: {
startTime: null,
endTime: null,
workDo: ""
},
pickerOptions: {
onPick: (dateRange => {
if (dateRange.maxDate) {
this.current = -1;
}
})
},
}
},
watch: {
year() {
this.initCharts2();
},
platformval2() {
if (this.platformval2.length == 2) {
this.workDo2 = "0, 1";
} else {
if (this.platformval2[0] == "自营") {
this.workDo2 = "0"
}
if (this.platformval2[0] == "合作") {
this.workDo2 = "1"
}
}
this.initCharts2();
},
chartdata() {
this.initCharts();
},
},
methods: {
isrank(a) {
this.isOrder = a;
},
isMothClick(a) {
this.isMonth = a;
},
// 跳转
godetail(datatime) {
window.location.href = this.api + "/admin/order/statisticDetail?starttime=" + datatime;
},
godetailMonth(datatime) {
window.location.href = this.api + "/admin/order/statisticDetail?starttime=" + datatime;
},
choosetime(sta) {
this.current = sta;
if (sta == 0) {
let end_value0 = this.formartDate(new Date());
let begin_value0 = this.formartDate(new Date() - 3600 * 1000 * 24 * 0);
this.value = [begin_value0, end_value0];
}
if (sta == 1) {
let end_value1 = this.formartDate(new Date() - 3600 * 1000 * 24 * 1);
let begin_value1 = this.formartDate(new Date() - 3600 * 1000 * 24 * 1);
this.value = [begin_value1, end_value1];
}
if (sta == 2) {
let end_value2 = this.formartDate(new Date());
let begin_value2 = this.formartDate(new Date() - 3600 * 1000 * 24 * 6);
this.value = [begin_value2, end_value2];
}
if (sta == 3) {
let end_value3 = this.formartDate(new Date());
let begin_value3 = this.formartDate(new Date() - 3600 * 1000 * 24 * 30);
this.value = [begin_value3, end_value3];
}
},
filercharts() {
if (this.platformval.length == 2) {
this.workDo = "0, 1";
} else {
if (this.platformval[0] == "自营") {
this.workDo = "0"
}
if (this.platformval[0] == "合作") {
this.workDo = "1"
}
}
if (this.value) {
this.chartdata = {
startTime: this.value[0],
endTime: this.value[1],
workDo: this.workDo
}
} else {
this.chartdata = {
startTime: null,
endTime: null,
workDo: this.workDo
}
}
},
// 获取月
initCharts2() {
var myChart_four = echarts.init(document.getElementById('orderMoth'));
var myChart_five = echarts.init(document.getElementById('orderMothNum'));
let objdata = {
year: this.year,
workDo: this.workDo2
}
const loading = this.$loading({
lock: false,
text: '玩命加载中~~',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0)',
});
axios({
method: 'POST',
url: this.api + "/admin/locate/v3/orderStatistic/yearDataInfo",
data: Qs.stringify(
objdata
),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
if (res.data.code === 200) {
loading.close();
// 月数量
this.tabledata = res.data.data.getOrderInfoList;
let getMonthOrderSizeList = res.data.data.getMonthOrderSizeList;
let month = [];
let monthSize = [];
if (getMonthOrderSizeList) {
for (let value of getMonthOrderSizeList) {
month.push(value.datetime);
monthSize.push(value.size);
}
}
var option_five = {
color: ['#429AF0'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: month,
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0, //横轴信息全部显示
rotate: 0, //-15度角倾斜显示
},
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '月订单量',
type: 'bar',
barWidth: '50%',
data: monthSize
}]
};
myChart_five.setOption(option_five);
// 月金额
let getMonthOrderPriceList = res.data.data.getMonthOrderPriceList;
let monthMon = [];
let monthPayMoney = [];
if (getMonthOrderPriceList) {
for (let value of getMonthOrderPriceList) {
monthMon.push(value.datetime);
monthPayMoney.push(value.payMoney);
}
}
var option_four = {
color: ['#429AF0'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: monthMon,
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0, //横轴信息全部显示
rotate: 0, //-15度角倾斜显示
},
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '月销售额',
type: 'bar',
barWidth: '50%',
data: monthPayMoney
}]
};
myChart_four.setOption(option_four);
} else {
loading.close();
this.$message({
type: 'error',
message: res.data.msg
})
}
}).catch(err => {
// loading.close();
window.console.log(err);
})
},
// 获取统计
initCharts() {
let myChart_three = echarts.init(document.getElementById('orderTrend'), 'macarons');
var myChart_one = echarts.init(document.getElementById('orderRank'));
var myChart_one_order = echarts.init(document.getElementById('orderNumRank'));
var myChart_two = echarts.init(document.getElementById('orderType'));
let objdata = {
startTime: this.chartdata.startTime,
endTime: this.chartdata.endTime,
workDo: this.chartdata.workDo
}
const loading = this.$loading({
lock: false,
text: '玩命加载中~~',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0)',
});
axios({
method: 'POST',
url: this.api + "/admin/locate/v3/orderStatistic/orderInfo",
data: Qs.stringify(
objdata
),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
if (res.data.code === 200) {
loading.close();
// 订单组成
let orderType = res.data.data.orderTypeInfo.orderType;
let two_length = [];
let two_data = [];
this.orderType_info = res.data.data.orderTypeInfo.orderType;
if (orderType) { // 1
for (let value of orderType) {
two_length.push(value.name);
two_data.push({
value: value.size,
name: value.name
})
}
}
var option_one = {
title: {
text: ''
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
x: 'left',
y: 'center',
itemWidth: 10, // 设置图例图形的宽
itemHeight: 10, // 设置图例图形的高
textStyle: {
color: '#666' // 图例文字颜色
},
itemGap: 60,
data: two_length
},
color: [
'#7CC3FF',
'#FF7C7C',
],
series: [{
name: '订单占比',
type: 'pie',
radius: ['50%', '70%'],
center: ['60%', '50%'],
avoidLabelOverlap: false,
// 设置值域的标签
label: {
normal: {
show: true,
formatter: '{b} ({d{d}%})',
lineStyle: {
color: 'yellow',
width: 2
},
rich: {
a: {
padding: 4
},
b: {
fontSize: 14,
align: 'left',
padding: 82,
margin: 80,
lineHeight: 80
},
hr: {
borderColor: '#4681ec',
width: '100%',
borderWidth: 2,
height: 0
},
d: {
fontSize: 14,
align: 'left',
padding: 4
},
c: {
fontSize: 14,
align: 'left'
}
}
},
emphasis: {
position: 'left',
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
},
length: 1
}
},
labelLine: {
normal: {
show: true
}
},
data: two_data
}]
};
myChart_two.setOption(option_one);
this.orderInfo = res.data.data.orderInfo;
if (res.data.data.shopPayMoneyIndexList) {
let shopPayMoneyIndexList = res.data.data.shopPayMoneyIndexList;
let shopName = [];
let price = [];
if (shopPayMoneyIndexList) {
for (let value of shopPayMoneyIndexList) {
shopName.push(value.shopName);
price.push(value.price);
}
}
myChart_one.setOption({
color: ['#3c90f7', '#55bfc0'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' 'shadow'
}
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
axisLine: false,
axisLabel: {
show: true,
textStyle: {
color: '#333333', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
boundaryGap: [0, 0.01]
},
yAxis: {
axisLine: false,
axisLabel: {
show: true,
textStyle: {
color: '#333333', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
type: 'category',
data: shopName
},
series: [{
name: '销售额',
type: 'bar',
barGap: 0,
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: '#0074FB',
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: "#00CAFA" // 0% 处的颜色
}, {
offset: 1,
color: "#0074FB" // 100% 处的颜色
}], false)
}
},
data: price
}]
});
}
if (res.data.data.depotOrderSizeIndexList) {
// 销售额
let depotOrderSizeIndexList = res.data.data.depotOrderSizeIndexList;
let depotName = [];
let depotOrderSize = [];
if (depotOrderSizeIndexList) {
for (let value of depotOrderSizeIndexList) {
depotName.push(value.depotName);
depotOrderSize.push(value.orderSize);
}
}
myChart_one_order.setOption({
color: ['#3c90f7', '#55bfc0'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
axisLine: false,
axisLabel: {
show: true,
textStyle: {
color: '#333333', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
boundaryGap: [0, 0.01]
},
yAxis: {
axisLine: false,
axisLabel: {
show: true,
textStyle: {
color: '#333333', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
type: 'category',
data: depotName
},
series: [{
name: '订单量',
type: 'bar',
barGap: 0,
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: '#0074FB',
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: "#00CAFA" // 0% 处的颜色
}, {
offset: 1,
color: "#0074FB" // 100% 处的颜色
}], false)
}
},
data: depotOrderSize
}]
});
}
// 订单趋势
let orderTrendList = res.data.data.orderTrendList;
this.gridData = res.data.data.orderTrendList;
let datetime = [];
let completeOrderSize = []; // 完成订单数量
let completeOrderPayMoney = []; // 完成订单金额
let GMV = []; // 总订单金额
let GMVSize = []; // 总订单数量
let cost = []; // 成本
let funOrderSize = []; // 退款订单数量
let funOrderPayMoney = []; // 退款订单金额
let profit = []; // 利润
if (orderTrendList) {
for (let value of orderTrendList) {
datetime.push(value.datetime);
completeOrderSize.push(value.completeOrderSize);
completeOrderPayMoney.push(value.completeOrderPayMoney);
GMV.push(value.GMV);
GMVSize.push(value.GMVSize);
cost.push(value.cost);
funOrderSize.push(value.funOrderSize);
funOrderPayMoney.push(value.funOrderPayMoney);
profit.push(value.profit);
}
}
// 订单店铺分析
var option_three = {
// title: { text: "折线图堆叠" },
tooltip: {
trigger: 'axis'
},
legend: {
data: ["总订单量", "GMV", "成功订单", "成功订单金额", "成本", "利润", "退款订单数", "退款订单金额"]
},
color: ['#3c90f7', '#55bfc0', '#5ebe67', '#7948ea', '#43cf7c', '#e33c64', '#ff5733',
'#f4cd49', '#f3bebc'
],
grid: {
y2: 50
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
interval: datetime.length > 31 ? 6 : 0, //横轴信息全部显示
rotate: datetime.length > 8 ? -35 : 0, //-15度角倾斜显示
},
axisLine: {
lineStyle: {
color: '#333333',
}
},
data: datetime
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#333333',
}
}
},
series: [{
name: '总订单量',
type: 'line',
smooth: true,
data: GMVSize
},
{
name: 'GMV',
type: 'line',
smooth: true,
data: GMV
},
{
name: '成功订单',
type: 'line',
smooth: true,
data: completeOrderSize
},
{
name: '成功订单金额',
type: 'line',
smooth: true,
data: completeOrderPayMoney
},
{
name: '成本',
type: 'line',
smooth: true,
data: cost
},
{
name: '利润',
type: 'line',
smooth: true,
data: profit
},
{
name: '退款订单数',
type: 'line',
smooth: true,
data: funOrderSize
},
{
name: '退款订单金额',
type: 'line',
smooth: true,
data: funOrderPayMoney
}
]
};
myChart_three.setOption(option_three);
} else {
loading.close();
this.$message({
type: 'error',
message: res.data.msg
})
}
}).catch(err => {
// loading.close();
window.console.log(err);
})
},
formartDate(param) {
let date = new Date(param);
Y = date.getFullYear() + '-';
M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return Y + M + D;
}
},
created() {
},
mounted() {
var end_value = this.formartDate(new Date());
var begin_value = this.formartDate(new Date() - 3600 * 1000 * 24 * 6);
this.value = [begin_value, end_value];
this.$refs.ulCenter.style.opacity = 1;
this.year = this.formartDate(new Date()).substring(0, 4);
this.workDo2 = "0, 1";
this.initCharts2();
if (this.value) {
this.chartdata = {
startTime: this.value[0],
endTime: this.value[1],
workDo: "0, 1",
}
this.initCharts();
} else {
this.chartdata = {
startTime: null,
endTime: null
}
this.initCharts();
}
}
});
</script>
</html>
