Skip to content

E
ElectricitySheep
Commit 633e56ed authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改1千2

parent 6bef4dc6
Hide whitespace changes
Inline Side-by-side
Showing with 672 additions and 635 deletions
src/components/zanIndex.vue
View file @ 633e56ed
<style> <style>
.zanTotalTop{ .zanTotalTop {
padding:18px 20px; padding: 18px 20px;
background: #fff; background: #fff;
border-bottom:1px solid #EBEEF5; border-bottom: 1px solid #EBEEF5;
} }
.zanIndex_Second{
background-color: #fff; .zanIndex_Second {
position: relative; background-color: #fff;
padding-bottom: 50px; position: relative;
margin: 10px 0; padding-bottom: 50px;
border: 1px solid #EBEEF5; margin: 10px 0;
} border: 1px solid #EBEEF5;
.searchDiv{ }
display:flex;
flex-direction: row; .searchDiv {
padding:15px; display: flex;
overflow: hidden; flex-direction: row;
} padding: 15px;
.searchDiv .el-date-editor .el-range-separator{ overflow: hidden;
width:6%; }
}
.zanIndex .el-input__inner{ .searchDiv .el-date-editor .el-range-separator {
height:32px; width: 6%;
line-height: 32px; }
padding:0 10px;
} .zanIndex .el-input__inner {
.zanIndex .el-input__icon { height: 32px;
line-height: 32px; line-height: 32px;
} padding: 0 10px;
.searchDiv>div{ }
margin-right:5px;
} .zanIndex .el-input__icon {
.zanIndex .zanIndex_Second .el-tabs__nav-scroll{ line-height: 32px;
width:120px; }
margin-left:30px;
} .searchDiv>div {
.zanIndex .zanIndex_Second .el-tabs__nav-wrap::after { margin-right: 5px;
content: ""; }
position: absolute;
left: 0; .zanIndex .zanIndex_Second .el-tabs__nav-scroll {
bottom: 0; width: 120px;
width: 100%; margin-left: 30px;
height: 2px; }
background-color: #E4E7ED;
z-index: 1; .zanIndex .zanIndex_Second .el-tabs__nav-wrap::after {
height:1px; content: "";
} position: absolute;
.zanIndex .el-tabs__item{ left: 0;
height:32px; bottom: 0;
line-height: 32px; width: 100%;
} height: 2px;
.zanIndex .clean{ background-color: #E4E7ED;
color: #92959B; z-index: 1;
margin-left: 30px; height: 1px;
cursor: pointer; }
font-size: 15px;
} .zanIndex .el-tabs__item {
.searchDiv>div:last-child{ height: 32px;
height:32px; line-height: 32px;
line-height: 32px; }
}
.num-info{ .zanIndex .clean {
display: flex; color: #92959B;
width: 100%; margin-left: 30px;
height: 60px; cursor: pointer;
font-size: 28px; font-size: 15px;
color: #303133; }
}
.num-info .num-info-item:first-of-type { .searchDiv>div:last-child {
border-left: 0; height: 32px;
} line-height: 32px;
.num-info .num-info-item:first-of-type { }
border-left: 0;
} .num-info {
.info-item-name { display: flex;
font-size: 16px; width: 100%;
color: #92959B; height: 60px;
} font-size: 28px;
.num-info .num-info-item { color: #303133;
text-align: center; }
width: 20%;
border-left: 1px dashed #EFF1F7; .num-info .num-info-item:first-of-type {
} border-left: 0;
.zanIndexThrid{ }
border: 1px solid #EBEEF5;
background-color: #FFF; .num-info .num-info-item:first-of-type {
color: #303133; border-left: 0;
-webkit-transition: .3s; }
transition: .3s;
border-radius:4px; .info-item-name {
overflow: hidden; font-size: 16px;
} color: #92959B;
.el-card_header{ }
position: relative;
padding: 18px 20px; .num-info .num-info-item {
border-bottom: 1px solid #EBEEF5; text-align: center;
-webkit-box-sizing: border-box; width: 20%;
box-sizing: border-box; border-left: 1px dashed #EFF1F7;
} }
.tab-pay {
position: absolute; .zanIndexThrid {
bottom: -15px; border: 1px solid #EBEEF5;
right: 50px; background-color: #FFF;
} color: #303133;
.tab-pay .el-tabs__item { -webkit-transition: .3s;
height: 56px; transition: .3s;
line-height: 56px; border-radius: 4px;
} overflow: hidden;
.el-tabs__nav-wrap::after{ }
background-color: transparent;
} .el-card_header {
.zanIndex .el-card__body{ position: relative;
padding:20px; padding: 18px 20px;
} border-bottom: 1px solid #EBEEF5;
.pay-info { -webkit-box-sizing: border-box;
padding: 40px 0; box-sizing: border-box;
display: flex; }
justify-content: space-between;
} .tab-pay {
.pay-info .pay-info-item.active { position: absolute;
border: 1px solid #3399FF; bottom: -15px;
} right: 50px;
.info-item-name { }
font-size: 16px;
color: #92959B; .tab-pay .el-tabs__item {
} height: 56px;
.pay-info .pay-info-item { line-height: 56px;
padding-top: 45px; }
width: 22%;
margin: 0 1.5%; .el-tabs__nav-wrap::after {
text-align: center; background-color: transparent;
font-size: 26px; }
border: 1px solid #EBEEF5;
border-radius: 10px; .zanIndex .el-card__body {
height: 150px; padding: 20px;
position: relative; }
cursor: pointer;
} .pay-info {
.pay-info .pay-info-item.active img { padding: 40px 0;
position: absolute; display: flex;
top: 0; justify-content: space-between;
left: 0; }
display: block;
} .pay-info .pay-info-item.active {
.pay-info .pay-info-item img { border: 1px solid #3399FF;
display: none; }
}
.zantable-area{ .info-item-name {
margin-top: 20px; font-size: 16px;
display: flex; color: #92959B;
justify-content: space-between; }
}
.zantable-area .el-card { .pay-info .pay-info-item {
width: 49.5%; padding-top: 45px;
color: #303133; width: 22%;
border: 1px solid #EBEEF5; margin: 0 1.5%;
background-color: #FFF; text-align: center;
color: #303133; font-size: 26px;
-webkit-transition: .3s; border: 1px solid #EBEEF5;
transition: .3s; border-radius: 10px;
border-radius: 4px; height: 150px;
overflow: hidden; position: relative;
} cursor: pointer;
.el-zanIndex_btmheader{ }
padding: 14px 20px;
} .pay-info .pay-info-item.active img {
.el-zanIndex_btmheader span{ position: absolute;
/* float:left; */ top: 0;
height: 32px; left: 0;
line-height: 32px; display: block;
} }
.ZexportBtn{
padding:0 10px; .pay-info .pay-info-item img {
float:right; display: none;
} }
.table_Inner{
padding:20px; .zantable-area {
} margin-top: 20px;
.rankIng{ display: flex;
padding:0 10px; justify-content: space-between;
text-align: center; }
}
.table_Inner table th{ .zantable-area .el-card {
background: rgb(243, 245, 246); width: 49.5%;
color:rgb(48, 49, 51); color: #303133;
padding-left:10px; border: 1px solid #EBEEF5;
border-bottom:1px solid #EBEEF5; background-color: #FFF;
} color: #303133;
.text-omit { -webkit-transition: .3s;
width: 380px; transition: .3s;
overflow: hidden; border-radius: 4px;
text-overflow: ellipsis; overflow: hidden;
white-space: nowrap; }
}
.table_Inner .el-table .cell { .el-zanIndex_btmheader {
-webkit-box-sizing: border-box; padding: 14px 20px;
box-sizing: border-box; }
white-space: normal;
word-break: break-all; .el-zanIndex_btmheader span {
line-height: 23px; /* float:left; */
} height: 32px;
.table_Inner .el-table_1_column_1{ line-height: 32px;
text-align: center; }
}
.table_Inner .el-table_1_column_2{ .ZexportBtn {
padding-left:0; padding: 0 10px;
} float: right;
.table2 .is-leaf:first-child{ }
text-align: center;
} .table_Inner {
.Zheader_image{ padding: 20px;
width: 32px; }
height: 32px;
margin-right: 10px; .rankIng {
float: left; padding: 0 10px;
} text-align: center;
.Zheader_image img{ }
width:100%;
height:100%; .table_Inner table th {
} background: rgb(243, 245, 246);
.nameList{ color: rgb(48, 49, 51);
height: 32px; padding-left: 10px;
line-height: 32px; border-bottom: 1px solid #EBEEF5;
display: inline-block; }
width: 280px;
overflow: hidden; .text-omit {
text-overflow: ellipsis; width: 380px;
white-space: nowrap; overflow: hidden;
} text-overflow: ellipsis;
.zantable-area .el-table__row{ white-space: nowrap;
height:63px; }
}
.echarts-title { .table_Inner .el-table .cell {
color: #92959B; -webkit-box-sizing: border-box;
display: flex; box-sizing: border-box;
font-size: 16px; white-space: normal;
margin-left: 45px; word-break: break-all;
} line-height: 23px;
.echarts-title-item { }
margin-right: 45px;
display: flex; .table_Inner .el-table_1_column_1 {
align-items: center; text-align: center;
} }
.echarts-title-item .echarts-title-icon {
height: 16px; .table_Inner .el-table_1_column_2 {
width: 16px; padding-left: 0;
margin-right: 10px; }
background-color: #3399ff;
} .table2 .is-leaf:first-child {
text-align: center;
}
.Zheader_image {
width: 32px;
height: 32px;
margin-right: 10px;
float: left;
}
.Zheader_image img {
width: 100%;
height: 100%;
}
.nameList {
height: 32px;
line-height: 32px;
display: inline-block;
width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zantable-area .el-table__row {
height: 63px;
}
.echarts-title {
color: #92959B;
display: flex;
font-size: 16px;
margin-left: 45px;
}
.echarts-title-item {
margin-right: 45px;
display: flex;
align-items: center;
}
.echarts-title-item .echarts-title-icon {
height: 16px;
width: 16px;
margin-right: 10px;
background-color: #3399ff;
}
</style> </style>
<template> <template>
<div class="zanIndex"> <div class="zanIndex">
<div class="zanTotalTop">数据概况</div> <div class="zanTotalTop">数据概况</div>
<div class="zanIndex_Second"> <div class="zanIndex_Second">
<div class="searchDiv"> <div class="searchDiv">
<div> <div>
<el-select v-model="searchMsg.plat" class="w120"> <el-select v-model="searchMsg.plat" class="w120">
<el-option label="全部平台" :value='0'></el-option> <el-option label="全部平台" :value='0'></el-option>
<el-option label="微信" :value='1'></el-option> <el-option label="微信" :value='1'></el-option>
<el-option label="支付宝" :value='2'></el-option> <el-option label="支付宝" :value='2'></el-option>
<el-option label="抖音/头条" :value='3'></el-option> <el-option label="抖音/头条" :value='3'></el-option>
<el-option label="百度" :value='4'></el-option> <el-option label="百度" :value='4'></el-option>
</el-select> </el-select>
</div>
<div>
<el-select v-model="searchMsg.plat2" filterable class="w160">
<el-option label="全部" :value='0'></el-option>
</el-select>
</div>
<div style="margin-right:50px;">
<el-date-picker
class="indataPicker"
type="daterange"
v-model="searchMsg.dateArr"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="7日" name="first"></el-tab-pane>
<el-tab-pane label="30日" name="second"></el-tab-pane>
</el-tabs>
</div>
<div>
<span class="clean">清空筛选</span>
</div>
</div>
<div class="num-info">
<div class="num-info-item">
<div>1094</div>
<div class="info-item-name">
<span>用户数</span>
<el-tooltip class="item" effect="dark" content="统计全平台用户数，不随店铺的更改而更改" placement="bottom">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
</div>
<div class="num-info-item">
<div>103</div>
<div class="info-item-name">商品数</div>
</div>
<div class="num-info-item">
<div>477</div>
<div class="info-item-name">订单数</div>
</div>
<div class="num-info-item">
<div>41</div>
<div class="info-item-name">待发货订单数</div>
</div>
<div class="num-info-item">
<div>0</div>
<div class="info-item-name">维权订单数</div>
</div>
</div>
</div> </div>
<div class="zanIndexThrid"> <div>
<div class="el-card_header"> <el-select v-model="searchMsg.plat2" filterable class="w160">
<div> <el-option label="全部" :value='0'></el-option>
<span>销售情况</span> </el-select>
</div> </div>
<div class="tab-pay"> <div style="margin-right:50px;">
<el-tabs v-model="activeSell"> <el-date-picker class="indataPicker" type="daterange" v-model="searchMsg.dateArr" range-separator="至"
<el-tab-pane label="昨日" name="first"></el-tab-pane> start-placeholder="开始日期" end-placeholder="结束日期">
<el-tab-pane label="7日" name="second"></el-tab-pane> </el-date-picker>
</el-tabs> </div>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="7日" name="first"></el-tab-pane>
<el-tab-pane label="30日" name="second"></el-tab-pane>
</el-tabs>
</div>
<div>
<span class="clean">清空筛选</span>
</div>
</div>
<div class="num-info">
<div class="num-info-item">
<div>1094</div>
<div class="info-item-name">
<span>用户数</span>
<el-tooltip class="item" effect="dark" content="统计全平台用户数，不随店铺的更改而更改" placement="bottom">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
</div>
<div class="num-info-item">
<div>103</div>
<div class="info-item-name">商品数</div>
</div>
<div class="num-info-item">
<div>477</div>
<div class="info-item-name">订单数</div>
</div>
<div class="num-info-item">
<div>41</div>
<div class="info-item-name">待发货订单数</div>
</div>
<div class="num-info-item">
<div>0</div>
<div class="info-item-name">维权订单数</div>
</div>
</div>
</div>
<div class="zanIndexThrid">
<div class="el-card_header">
<div>
<span>销售情况</span>
</div>
<div class="tab-pay">
<el-tabs v-model="activeSell">
<el-tab-pane label="昨日" name="first"></el-tab-pane>
<el-tab-pane label="7日" name="second"></el-tab-pane>
</el-tabs>
</div>
</div>
<div class="el-card__body">
<div class="pay-info">
<div class="pay-info-item" :class="{'active':isShowOrder}" @click="filterOrder()">
<img src="../assets/img/active.png" alt="" />
<div>24</div>
<div class="info-item-name">支付订单数</div>
</div>
<div class="pay-info-item" :class="{'active':isShowMoney}" @click="filterMoney()">
<img src="../assets/img/active.png" alt="" />
<div>5456.00</div>
<div class="info-item-name">支付金额</div>
</div>
<div class="pay-info-item" :class="{'active':isShowPay}" @click="filterPay()">
<img src="../assets/img/active.png" alt="" />
<div>24</div>
<div class="info-item-name">支付人数</div>
</div>
<div class="pay-info-item" :class="{'active':isShowPayNum}" @click="filterPayNum()">
<img src="../assets/img/active.png" alt="" />
<div>24</div>
<div class="info-item-name">支付件数</div>
</div>
</div>
<div class="echarts-title">
<div class="echarts-title-item" v-if="isShowOrder">
<div class="echarts-title-icon"></div>
<div>支付订单数</div>
</div>
<div class="echarts-title-item" v-if="isShowMoney">
<div class="echarts-title-icon" style="background-color: rgb(255, 163, 96);"></div>
<div>支付金额</div>
</div>
<div class="echarts-title-item" v-if="isShowPay">
<div class="echarts-title-icon" style="background-color: rgb(75, 194, 130);"></div>
<div>支付人数</div>
</div>
<div class="echarts-title-item" v-if="isShowPayNum">
<div class="echarts-title-icon" style="background-color: rgb(255, 133, 133);"></div>
<div>支付件数</div>
</div>
</div>
<div class="myecharts" ref="myecharts" style="height:300px;">
</div>
</div>
</div>
<div class="zantable-area">
<div class="el-card">
<div class="el-zanIndex_btmheader">
<span>商品购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
</div>
<div class="table_Inner">
<el-table :data="tableData" style="width: 100%">
<el-table-column label="排名" width="120">
<template slot-scope="scope">
<div class="rankIng">
<template v-if="scope.$index+1<4">
<img v-if="scope.$index==0" src="../assets/img/first.png" />
<img v-if="scope.$index==1" src="../assets/img/sec.png" />
<img v-if="scope.$index==2" src="../assets/img/third.png" />
</template>
<template v-else>
<span>{{getNumber(scope.$index+1)}}</span>
</template>
</div> </div>
</div> </template>
<div class="el-card__body"> </el-table-column>
<div class="pay-info"> <el-table-column prop="name" label="商品" width="400">
<div class="pay-info-item" :class="{'active':isShowOrder}" @click="filterOrder()"> <template slot-scope="scope">
<img src="../assets/img/active.png" alt=""/> <div class="text-omit">
<div>24</div> {{scope.row.name}}
<div class="info-item-name">支付订单数</div>
</div>
<div class="pay-info-item" :class="{'active':isShowMoney}" @click="filterMoney()">
<img src="../assets/img/active.png" alt=""/>
<div>5456.00</div>
<div class="info-item-name">支付金额</div>
</div>
<div class="pay-info-item" :class="{'active':isShowPay}" @click="filterPay()">
<img src="../assets/img/active.png" alt=""/>
<div>24</div>
<div class="info-item-name">支付人数</div>
</div>
<div class="pay-info-item" :class="{'active':isShowPayNum}" @click="filterPayNum()">
<img src="../assets/img/active.png" alt=""/>
<div>24</div>
<div class="info-item-name">支付件数</div>
</div>
</div> </div>
<div class="echarts-title"> </template>
<div class="echarts-title-item" v-if="isShowOrder"> </el-table-column>
<div class="echarts-title-icon"></div> <el-table-column prop="sales" label="销售额" sortable width="150">
<div>支付订单数</div> <template slot-scope="scope">
</div> <div style="padding-left:10px;">
<div class="echarts-title-item" v-if="isShowMoney"> {{scope.row.sales}}
<div class="echarts-title-icon" style="background-color: rgb(255, 163, 96);"></div>
<div>支付金额</div>
</div>
<div class="echarts-title-item" v-if="isShowPay">
<div class="echarts-title-icon" style="background-color: rgb(75, 194, 130);"></div>
<div>支付人数</div>
</div>
<div class="echarts-title-item" v-if="isShowPayNum">
<div class="echarts-title-icon" style="background-color: rgb(255, 133, 133);"></div>
<div>支付件数</div>
</div>
</div> </div>
<div class="myecharts" ref="myecharts" style="height:300px;"> </template>
</el-table-column>
<el-table-column prop="Numer" sortable label="销量" width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.Numer}}
</div> </div>
</div> </template>
</el-table-column>
</el-table>
</div>
</div>
<div class="el-card">
<div class="el-zanIndex_btmheader">
<span>用户购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
</div> </div>
<div class="zantable-area"> <div class="table_Inner table2">
<div class="el-card"> <el-table :data="tableData" style="width: 100%">
<div class="el-zanIndex_btmheader"> <el-table-column label="排名" width="120">
<span>商品购买力TOP排行</span> <template slot-scope="scope">
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button> <div class="rankIng">
<template v-if="scope.$index+1<4">
<img v-if="scope.$index==0" src="../assets/img/first.png" />
<img v-if="scope.$index==1" src="../assets/img/sec.png" />
<img v-if="scope.$index==2" src="../assets/img/third.png" />
</template>
<template v-else>
<span>{{getNumber(scope.$index+1)}}</span>
</template>
</div> </div>
<div class="table_Inner"> </template>
<el-table :data="tableData" style="width: 100%"> </el-table-column>
<el-table-column <el-table-column prop="name" label="用户" width="400">
label="排名" <template slot-scope="scope">
width="120"> <div class="Zheader_image">
<template slot-scope="scope"> <img src="../assets/img/id-card.png" alt="" />
<div class="rankIng">
<template v-if="scope.$index+1<4">
<img v-if="scope.$index==0" src="../assets/img/first.png"/>
<img v-if="scope.$index==1" src="../assets/img/sec.png"/>
<img v-if="scope.$index==2" src="../assets/img/third.png"/>
</template>
<template v-else>
<span>{{getNumber(scope.$index+1)}}</span>
</template>
</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="商品"
width="400">
<template slot-scope="scope">
<div class="text-omit">
{{scope.row.name}}
</div>
</template>
</el-table-column>
<el-table-column
prop="sales"
label="销售额"
sortable
width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.sales}}
</div>
</template>
</el-table-column>
<el-table-column
prop="Numer"
sortable
label="销量"
width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.Numer}}
</div>
</template>
</el-table-column>
</el-table>
</div> </div>
</div> <span class="nameList">印象日本地接～谢军</span>
<div class="el-card"> </template>
<div class="el-zanIndex_btmheader"> </el-table-column>
<span>用户购买力TOP排行</span> <el-table-column prop="sales" label="支付金额" sortable width="150">
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button> <template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.sales}}
</div> </div>
<div class="table_Inner table2"> </template>
<el-table :data="tableData" style="width: 100%"> </el-table-column>
<el-table-column <el-table-column prop="Numer" sortable label="支付件数" width="150">
label="排名" <template slot-scope="scope">
width="120"> <div style="padding-left:10px;">
<template slot-scope="scope"> {{scope.row.Numer}}
<div class="rankIng">
<template v-if="scope.$index+1<4">
<img v-if="scope.$index==0" src="../assets/img/first.png"/>
<img v-if="scope.$index==1" src="../assets/img/sec.png"/>
<img v-if="scope.$index==2" src="../assets/img/third.png"/>
</template>
<template v-else>
<span>{{getNumber(scope.$index+1)}}</span>
</template>
</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="用户"
width="400">
<template slot-scope="scope">
<div class="Zheader_image">
<img src="../assets/img/id-card.png" alt=""/>
</div>
<span class="nameList">印象日本地接～谢军</span>
</template>
</el-table-column>
<el-table-column
prop="sales"
label="支付金额"
sortable
width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.sales}}
</div>
</template>
</el-table-column>
<el-table-column
prop="Numer"
sortable
label="支付件数"
width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.Numer}}
</div>
</template>
</el-table-column>
</el-table>
</div> </div>
</div> </template>
</el-table-column>
</el-table>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
activeName:'first', activeName: 'first',
activeSell:'first', activeSell: 'first',
//过滤支付订单数 //过滤支付订单数
isShowOrder:true, isShowOrder: true,
//过滤支付金额 //过滤支付金额
isShowMoney:true, isShowMoney: true,
//过滤支付人数 //过滤支付人数
isShowPay:true, isShowPay: true,
//过滤支付件数 //过滤支付件数
isShowPayNum:true, isShowPayNum: true,
searchMsg: { searchMsg: {
plat:0, plat: 0,
plat2:0, plat2: 0,
dateArr:[] dateArr: []
}, },
//商品购买力data //商品购买力data
tableData:[{ tableData: [{
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23450.00', sales: '23450.00',
Numer:'109', Numer: '109',
}, { }, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23440.00', sales: '23440.00',
Numer:'108', Numer: '108',
}, { }, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00', sales: '23430.00',
Numer:'107', Numer: '107',
}, { }, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23420.00', sales: '23420.00',
Numer:'105', Numer: '105',
},{ }, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00', sales: '23430.00',
Numer:'107', Numer: '107',
},{ }, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00', sales: '23430.00',
Numer:'107', Numer: '107',
}, { }, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00', sales: '23430.00',
Numer:'107', Numer: '107',
}, { }, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00', sales: '23430.00',
Numer:'107', Numer: '107',
}, { }, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00', sales: '23430.00',
Numer:'107', Numer: '107',
}, { }, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00', sales: '23430.00',
Numer:'107', Numer: '107',
}] }]
}; };
}, },
created() { created() {},
},
methods: { methods: {
handleClick(){ handleClick() {},
//数字加0
}, getNumber(num) {
//数字加0 let str = '';
getNumber(num){ if (num < 10) {
let str=''; str = '0' + num
if(num<10){ } else {
str = '0'+num str = num;
}else{ }
str=num; return str;
},
//过滤支付订单数
filterOrder() {
this.isShowOrder = !this.isShowOrder;
},
//过滤支付金额
filterMoney() {
this.isShowMoney = !this.isShowMoney
},
//过滤支付人数
filterPay() {
this.isShowPay = !this.isShowPay
},
//过滤支付件数
filterPayNum() {
this.isShowPayNum = !this.isShowPayNum
},
//初始化图标
initMap() {
var myChart = this.$echarts.init(this.$refs.myecharts);
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '0',
right: '1%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
axisLine: { //y轴
show: false,
},
axisLabel: {
formatter: function () {
return "";
}
},
type: 'value',
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show: true //隐藏或显示
} }
return str; },
}, series: [{
//过滤支付订单数 name: '支付订单数',
filterOrder(){ type: 'line',
this.isShowOrder=!this.isShowOrder; stack: '总量',
}, color: '#3399ff',
//过滤支付金额 data: [120, 132, 101, 134, 90, 230, 210]
filterMoney(){ },
this.isShowMoney=!this.isShowMoney {
}, name: '支付金额',
//过滤支付人数 type: 'line',
filterPay(){ stack: '总量',
this.isShowPay=!this.isShowPay color: 'rgb(255, 163, 96)',
}, data: [220, 182, 191, 234, 290, 330, 310]
//过滤支付件数 },
filterPayNum(){ {
this.isShowPayNum=!this.isShowPayNum name: '支付人数',
}, type: 'line',
stack: '总量',
color: 'rgb(75, 194, 130)',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '支付件数',
type: 'line',
stack: '总量',
color: 'rgb(255, 133, 133)',
data: [320, 332, 301, 334, 390, 330, 320]
},
]
};
myChart.setOption(option, true);
},
TestMall() {
this.apipost("/api/Mall/GetHome", {
MiniAppId: "wxacd9f8cc3480d29e"
}, res => {
console.log("TestMall", res.data.data);
if (res.data.resultCode == 1) {
//初始化图标 } else {
initMap(){ this.Info(res.data.message);
var myChart = this.$echarts.init(this.$refs.myecharts); }
var option = { })
title: { },
text: '' TestCenter() {
}, this.apipost("/api/Mall/GetUserCenter", {
tooltip: { MiniAppId: "wxacd9f8cc3480d29e"
trigger: 'axis' }, res => {
}, console.log("TestCenter", res.data.data);
grid: { if (res.data.resultCode == 1) {
left: '0',
right: '1%', } else {
bottom: '3%', this.Info(res.data.message);
containLabel: true }
}, })
xAxis: { },
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
            axisLine:{ //y轴
show:false,
},
axisLabel : {
formatter: function(){
return "";
}
},
type: 'value',
splitLine :{ //网格线
lineStyle:{
type:'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show:true //隐藏或显示
}
},
series: [
{
name: '支付订单数',
type: 'line',
stack: '总量',
color: '#3399ff',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '支付金额',
type: 'line',
stack: '总量',
color: 'rgb(255, 163, 96)',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '支付人数',
type: 'line',
stack: '总量',
color: 'rgb(75, 194, 130)',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '支付件数',
type: 'line',
stack: '总量',
color:'rgb(255, 133, 133)',
data: [320, 332, 301, 334, 390, 330, 320]
},
]
};
myChart.setOption(option, true);
}
}, },
mounted() { mounted() {
this.initMap(); this.TestMall();
this.initMap();
} }
}; };
</script> </script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment