|
|
@@ -11,203 +11,153 @@
|
|
|
</div>
|
|
|
<el-main>
|
|
|
<div class="card-news mt0">
|
|
|
- <div class="news-title">经营数据
|
|
|
- <div class="title-open">
|
|
|
- <div class="name">显示数据</div>
|
|
|
- <el-switch
|
|
|
- v-model="hideState"
|
|
|
- :active-value="1"
|
|
|
- :inactive-value="0"
|
|
|
- size="large"
|
|
|
- @change="getHide"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<div class="total-panel">
|
|
|
- <div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'" style="background-color: rgb(235, 241, 255);">
|
|
|
+ <div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'">
|
|
|
+ <div class="item-warp">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">分类数</div>
|
|
|
+ <div class="number" v-if="hideState==1">{{ $TOOL.money(todayData.userNum) }}</div>
|
|
|
+ <div class="number" v-else>0.00</div>
|
|
|
+ <div class="desc"></div>
|
|
|
+ </div>
|
|
|
+ <div class="right"><img src="@/assets/image/wave-4-icon.png" /></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'">
|
|
|
<div class="item-warp">
|
|
|
<div class="left">
|
|
|
- <div class="title">今日营业额(元)</div>
|
|
|
+ <div class="title">文章数量</div>
|
|
|
<div class="number" v-if="hideState==1">{{ $TOOL.money(todayData.userNum) }}</div>
|
|
|
<div class="number" v-else>0.00</div>
|
|
|
<div class="desc"></div>
|
|
|
</div>
|
|
|
- <div class="right"><img src="@/assets/image/wave-1-icon.png" /></div>
|
|
|
+ <div class="right"><img src="@/assets/image/wave-4-icon.png" /></div>
|
|
|
</div>
|
|
|
- <div class="item-wave"><img src="@/assets/image/wave-1.png" /></div>
|
|
|
</div>
|
|
|
- <div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'" style="background-color: rgb(240, 235, 255);">
|
|
|
+ <div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'">
|
|
|
<div class="item-warp">
|
|
|
<div class="left">
|
|
|
- <div class="title">今日订单数(单)</div>
|
|
|
- <div class="number">{{ todayData.rechargeNum ? todayData.rechargeNum:'0.00' }}</div>
|
|
|
+ <div class="title">评论数</div>
|
|
|
+ <div class="number" v-if="hideState==1">{{ $TOOL.money(todayData.userNum) }}</div>
|
|
|
+ <div class="number" v-else>0.00</div>
|
|
|
<div class="desc"></div>
|
|
|
</div>
|
|
|
- <div class="right"><img src="@/assets/image/wave-2-icon.png" /></div>
|
|
|
+ <div class="right"><img src="@/assets/image/wave-4-icon.png" /></div>
|
|
|
</div>
|
|
|
- <div class="item-wave"><img src="@/assets/image/wave-2.png" /></div>
|
|
|
</div>
|
|
|
- <div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'" style="background-color: rgb(255, 241, 214);">
|
|
|
+ <div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'">
|
|
|
<div class="item-warp">
|
|
|
<div class="left">
|
|
|
- <div class="title">手机自助打印待处理(单)</div>
|
|
|
- <div class="number">{{ todayData.rechargeMoney ? todayData.rechargeMoney:'0.00' }}</div>
|
|
|
+ <div class="title">今日阅读</div>
|
|
|
+ <div class="number" v-if="hideState==1">{{ $TOOL.money(todayData.userNum) }}</div>
|
|
|
+ <div class="number" v-else>0.00</div>
|
|
|
<div class="desc"></div>
|
|
|
</div>
|
|
|
- <div class="right"><img src="@/assets/image/wave-3-icon.png" /></div>
|
|
|
+ <div class="right"><img src="@/assets/image/wave-4-icon.png" /></div>
|
|
|
</div>
|
|
|
- <div class="item-wave"><img src="@/assets/image/wave-3.png" /></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="this.$store.state.global.ismobile?24:24" :xs="24">
|
|
|
- <div class="card-news mt10">
|
|
|
- <div class="date-check">
|
|
|
- <el-radio-group v-model="moneyDate" size="large" @change="getmoneyDate">
|
|
|
- <el-radio-button v-for="(city,indx) in dateData" :key="indx" :label="city.key">
|
|
|
- {{ city.name }}
|
|
|
- </el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- <scEcharts height="500px" :option="option2"></scEcharts>
|
|
|
+ <el-col :span="this.$store.state.global.ismobile?24:8" :xs="24">
|
|
|
+ <div class="card-news mt10"> <!---评论数-->
|
|
|
+ <scEcharts height="500px" :option="option"></scEcharts>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="this.$store.state.global.ismobile?24:24" :xs="24">
|
|
|
- <div class="card-news mt10">
|
|
|
- <div class="date-check">
|
|
|
- <el-radio-group v-model="orderDate" size="large" @change="getorderDate">
|
|
|
- <el-radio-button v-for="(city,indx) in dateData" :key="indx" :label="city.key">
|
|
|
- {{ city.name }}
|
|
|
- </el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- <scEcharts height="500px" :option="option"></scEcharts>
|
|
|
+ <el-col :span="this.$store.state.global.ismobile?24:16" :xs="24">
|
|
|
+ <div class="card-news mt10"> <!---阅读量-->
|
|
|
+ <scEcharts height="500px" :option="option2"></scEcharts>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <div class="card-news mt10">
|
|
|
+ <div class="news-title">内容排行</div>
|
|
|
+ <div class="mt10">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="this.$store.state.global.ismobile?24:12">
|
|
|
+ <el-card header="最新内容" shadow="never"></el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="this.$store.state.global.ismobile?24:12">
|
|
|
+ <el-card header="最热内容" shadow="never"></el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-main>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import blueBg from "@/assets/image/blue_bg.png";
|
|
|
import scEcharts from '@/components/scEcharts';
|
|
|
export default {
|
|
|
- name: "dashboard",
|
|
|
components: {
|
|
|
scEcharts
|
|
|
},
|
|
|
- data(){
|
|
|
+ data() {
|
|
|
return {
|
|
|
- dateData:[{"name":"近7天","key":7},{"name":"近14天","key":14},{"name":"近30天","key":30}],
|
|
|
- orderDate:7,
|
|
|
- moneyDate:7,
|
|
|
- hideState:0,
|
|
|
- pageLoading: false,
|
|
|
- dashboard: '0',
|
|
|
- todayData:{},
|
|
|
- blueBg,
|
|
|
- baseData:{},
|
|
|
- option2: {},
|
|
|
- option: {},
|
|
|
- }
|
|
|
- },
|
|
|
- created(){
|
|
|
- var baseData = this.$TOOL.data.get("SERVICE");
|
|
|
- this.baseData = baseData;
|
|
|
- this.getData()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getmoneyDate(data){
|
|
|
- this.moneyDate = data;
|
|
|
- this.getData()
|
|
|
- },
|
|
|
- getorderDate(data){
|
|
|
- this.orderDate = data;
|
|
|
- this.getData()
|
|
|
- },
|
|
|
- getHide(data){
|
|
|
- this.hideState = (data==1?1:0)
|
|
|
- this.getData()
|
|
|
- },
|
|
|
- async getData(){
|
|
|
- var loading = this.$loading();
|
|
|
- var resp = await this.$API.dash.shop.get({"hide":this.hideState,"money":this.moneyDate,"order":this.orderDate});
|
|
|
- loading.close();
|
|
|
- this.todayData = resp.data.data;
|
|
|
- let data = resp.data.moneys;
|
|
|
- let moneyDay = data.map(function (item) {
|
|
|
- return item['当天日期'];
|
|
|
- });
|
|
|
- let data2 = resp.data.orders;
|
|
|
- let orderDay = data2.map(function (item) {
|
|
|
- return item['当天日期'];
|
|
|
- });
|
|
|
- this.option = {
|
|
|
+ pageLoading:false,
|
|
|
+ option2: {
|
|
|
title: {
|
|
|
left: 'left',
|
|
|
- text: '近15天订单数据',
|
|
|
+ text: '评论量',
|
|
|
},
|
|
|
grid: {
|
|
|
top: '80px'
|
|
|
},
|
|
|
tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
|
|
|
- xAxis: [{data: orderDay, gridIndex: 0}],
|
|
|
+ grid: [{left: '5%', right: '3%', top: '15%', bottom: '5%'}],
|
|
|
+ xAxis: [{data: ['1','2','3','4','5'], gridIndex: 0}],
|
|
|
yAxis: [
|
|
|
{
|
|
|
splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
|
|
|
- formatter: '{value} 单'
|
|
|
+ formatter: '{value}'
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
- grid: [{left: '5%', right: '3%', top: '15%', bottom: '5%'}],
|
|
|
series: [
|
|
|
{
|
|
|
smooth: true, showBackground: true,
|
|
|
areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
|
|
|
- type: 'bar', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
- label: {normal: {position: 'top', formatter: '{c} 单', show: true}},
|
|
|
- data: data2.map(function (item) {
|
|
|
- return item['订单数量'];
|
|
|
- }),
|
|
|
+ type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
+ label: {normal: {position: 'top', formatter: '{c}', show: true}},
|
|
|
+ data:['10','2','3','4','1'],
|
|
|
}
|
|
|
]
|
|
|
- };
|
|
|
- this.option2 = {
|
|
|
+ },
|
|
|
+ option: {
|
|
|
title: {
|
|
|
left: 'left',
|
|
|
- text: '近15天订单金额',
|
|
|
+ text: '访问量',
|
|
|
},
|
|
|
grid: {
|
|
|
top: '80px'
|
|
|
},
|
|
|
tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
|
|
|
- xAxis: [{data: moneyDay, gridIndex: 0}],
|
|
|
+ grid: [{left: '5%', right: '3%', top: '15%', bottom: '5%'}],
|
|
|
+ xAxis: [{data: ['1','2','3','4','5'], gridIndex: 0}],
|
|
|
yAxis: [
|
|
|
{
|
|
|
splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
|
|
|
- formatter: '{value} 元'
|
|
|
+ formatter: '{value}'
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
- grid: [{left: '5%', right: '3%', top: '15%', bottom: '5%'}],
|
|
|
series: [
|
|
|
{
|
|
|
smooth: true, showBackground: true,
|
|
|
areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
|
|
|
- type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
- label: {normal: {position: 'top', formatter: '¥ {c} 元', show: true}},
|
|
|
- data: data.map(function (item) {
|
|
|
- return item['订单金额'];
|
|
|
- }),
|
|
|
+ type: 'bar', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
+ label: {normal: {position: 'top', formatter: '{c} 条', show: true}},
|
|
|
+ data:['10','2','3','4','1'],
|
|
|
}
|
|
|
]
|
|
|
- };
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
+<style>
|
|
|
+
|
|
|
<style>
|
|
|
.myMods {list-style:none;margin:-10px;}
|
|
|
.myMods li {display: inline-block;width: 11.5%;height:100px;vertical-align: top;transition:all 0.3s ease;margin:10px;border-radius:5px;color: #333;}
|
|
|
@@ -382,11 +332,10 @@ export default {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.total-panel .panel-item{
|
|
|
- width: calc(33.333333% - 9.6px);
|
|
|
- height: 130px;
|
|
|
- box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 8px;
|
|
|
+ width: calc(25% - 9.6px);
|
|
|
position: relative;
|
|
|
border-radius: 6px;
|
|
|
+ border:1px solid #e3e8ee;
|
|
|
}
|
|
|
.total-panel .panel-item .item-warp .left {
|
|
|
padding:16px 0px 0px 23px;
|