Skip to content

S
shop-new
提交 7952e0df authored 作者: yuanyufei's avatar yuanyufei
浏览文件
操作

首页内容的实现

上级 d4270343
隐藏空白字符变更
内嵌 并排
正在显示 包含 830 行增加 和 281 行删除
.env.development
浏览文件 @ 7952e0df
# 开发环境配置 # 开发环境配置
ENV = 'development' ENV = 'development'
# 正式环境 # dev环境
#VUE_APP_BASE_API = 'http://sjapi.jxhh.com' VUE_APP_BASE_API = 'http://192.168.111.240:6605/api/v1'
# 测试环境 # 测试环境
VUE_APP_BASE_API = 'http://192.168.26.179:6605/api/v1' #VUE_APP_BASE_API = 'http://192.168.26.179:6605/api/v1'
# 文档模块 直接调用 sys开放接口 # 文档模块 直接调用 sys开放接口
VUE_APP_BASE_SYS_API = 'http://sysapi.jxhh.com' VUE_APP_BASE_SYS_API = 'http://sysapi.jxhh.com'
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true
.env.development.rej deleted 100644 → 0
浏览文件 @ d4270343
diff a/.env.development b/.env.development (rejected hunks)
@@ -5,6 +5,7 @@
VUE_APP_BASE_API = 'http://sjapi.jxhh.com'
# 开发环境
#VUE_APP_BASE_API = 'http://192.168.111.36:8200'
+#VUE_APP_BASE_API = 'http://192.168.111.34:8200'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
\ No newline at end of file
src/api/system/home/home.js 0 → 100644
浏览文件 @ 7952e0df
import request from '@/utils/request'
//默认首页返回
export function getStatisticalHome(){
return request({
url:'local/statistical/statisticalHome',
method:'get',
})
}
//获取运营数据
export function getOperationalData(query){
return request({
url:'local/statistical/operationalData',
method:'get',
params:query
})
}
//获取店铺数据
export function getStoreData(query){
return request({
url:'local/statistical/storeData',
method:'get',
params:query
})
}
//获取店铺排行数据
export function getGoodsSale(query){
return request({
url:'local/statistical/getGoodsSale',
method:'get',
params:query
})
}
//获取热销类目数据
export function getCategorySale(){
return request({
url:'local/statistical/getCategorySale',
method:'get',
})
}
\ No newline at end of file
src/views/dashboard/LineChart.vue
浏览文件 @ 7952e0df
...@@ -26,25 +26,34 @@ export default { ...@@ -26,25 +26,34 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
chartData: { numberData: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() { data() {
return { return {
chart: null dateArr: [],
yAsix:10000,
} }
}, },
watch: { watch: {
chartData: { numberData: {
deep: true, deep: true,
handler(val) { handler(val) {
this.dateArr= val.date
this.numberMax(this.numberData.ordercount,this.numberData.customerprice)
this.setOptions(val) this.setOptions(val)
} }
} }
}, },
created() {
this.$nextTick(() => {
this.initChart()
})
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart()
}) })
...@@ -57,43 +66,22 @@ export default { ...@@ -57,43 +66,22 @@ export default {
this.chart = null this.chart = null
}, },
methods: { methods: {
moneyMax(num) {
let prec = 2
let ceil = true
const len = String(num).length;
if (len <= prec) {
return num
}
const mult = Math.pow(10, prec);
return ceil ? Math.ceil(num / mult) * mult : Math.floor(num / mult) * mult;
},
numberMax(num1,num2){ numberMax(num1,num2){
let num = '' if(num1,num2){
if (num1 >= num2) { var c = num1.concat(num2)
num = num1 this.yAsix = Math.ceil(Math.max(...c))
} else {
num = num2
}
let prec = 2
let ceil = true
const len = String(num).length;
if (len <= prec) {
return num
} }
const mult = Math.pow(10, prec);
return ceil ? Math.ceil(num / mult) * mult : Math.floor(num / mult) * mult;
}, },
initChart() { initChart() {
this.chart = echarts.init(this.$el, 'macarons') this.chart = echarts.init(this.$el, 'macarons')
if(this.chartData.months){ this.setOptions(this.numberData)
this.setOptions(this.chartData)
}
}, },
setOptions({ expectedData, actualData, moneyData, months} = {}) { setOptions({ordercount,customerprice,ordertotal,customerArr,dateArr,retentionArr} = {}) {
this.chart.setOption({ this.chart.setOption({
xAxis: { xAxis: {
data: months, data: this.dateArr,
boundaryGap: false, boundaryGap: true,
axisTick: { axisTick: {
show: true show: true
} }
...@@ -115,38 +103,43 @@ export default { ...@@ -115,38 +103,43 @@ export default {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '数量', name: '交易量',
min: 0, min: 0,
max: this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData)<10?10:this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData), max: this.yAsix,
interval: this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData)<10?2:(this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData))/5, interval: Math.ceil(this.yAsix/5),
axisLabel: { axisLabel: {
formatter: '{value} ' formatter: '{value}'
} }
}, },
{
type: 'value',
name: '收益',
min: 0,
max: this.moneyMax(this.chartData.maxMoneyData),
interval: (this.moneyMax(this.chartData.maxMoneyData) / 5),
axisLabel: {
formatter: '{value} 元'
}
}
], ],
legend: { legend: {
data: [ '订单','收益'] data: ['总订单数','总订单金额','客单价']
}, },
series: [{ series: [{
name: '订单', name: '总订单数', itemStyle: {
normal: {
color: '#4784FF',
lineStyle: {
color: '#4784FF',
width: 2
}
}
},
smooth: true,
type: 'bar',
data: ordercount,
animationDuration: 2800,
animationEasing: 'quadraticOut'
},
{
name: '总订单金额',
smooth: true, smooth: true,
type: 'line', type: 'line',
itemStyle: { itemStyle: {
normal: { normal: {
color: '#3888fa', color: '#EE7945',
lineStyle: { lineStyle: {
color: '#3888fa', color: '#EE7945',
width: 2 width: 2
}, },
areaStyle: { areaStyle: {
...@@ -154,20 +147,20 @@ export default { ...@@ -154,20 +147,20 @@ export default {
} }
} }
}, },
data: actualData, data: ordertotal,
animationDuration: 2800, animationDuration: 2800,
animationEasing: 'quadraticOut' animationEasing: 'cubicInOut'
}, },
{ {
name: '收益', name: '客单价',
smooth: true, smooth: true,
type: 'line', type: 'bar',
yAxisIndex: 1, // yAxisIndex: 1,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#40c9c6', color: '#49D3CE',
lineStyle: { lineStyle: {
color: '#40c9c6', color: '#49D3CE',
width: 2 width: 2
}, },
areaStyle: { areaStyle: {
...@@ -175,7 +168,7 @@ export default { ...@@ -175,7 +168,7 @@ export default {
} }
} }
}, },
data: moneyData, data: customerprice,
animationDuration: 2800, animationDuration: 2800,
animationEasing: 'quadraticOut' animationEasing: 'quadraticOut'
}] }]
......
src/views/index.vue
浏览文件 @ 7952e0df
<template> <template>
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<div class="dashboard-promote"> <div class="dashboard-promote">
<!-- <el-row> <!-- 头部 -->
<el-col :span="24"> <div class="header">
<el-card class="box-card"> <div class="header-top">
<p>领取阿里云通用云产品优惠券</p> <span class="sp">运营数据</span>
<p><a target="_blank" class="text-info" href="https://www.aliyun.com/minisite/goods?userCode=fcor2omk">https://www.aliyun.com/minisite/goods?userCode=fcor2omk</a></p> <el-radio-group v-model="numberValue" @change="getnumbersTime" size="small" style="margin-left: 27px;">
<p>领取腾讯云通用云产品优惠券</p> <el-radio-button label="1">昨日</el-radio-button>
<p><a target="_blank" class="text-info" href="https://cloud.tencent.com/act/cps/redirect?redirect=1062&cps_key=20b1c3842f74986b2894e2c5fcde7ea2&from=console">https://cloud.tencent.com/act/cps/redirect?redirect=1062&cps_key=20b1c3842f74986b2894e2c5fcde7ea2&from=console</a></p> <el-radio-button label="7">近7天</el-radio-button>
</el-card> <el-radio-button label="15">近15天</el-radio-button>
</el-col> </el-radio-group>
</el-row> --> </div>
<!-- <el-row class="other"> <div class="header-foot">
<el-col :span="8"> <div class="foot-le">
<el-card class="box-card kj"> <el-row type="flex" justify="space-around">
<div slot="header" class="clearfix"> <el-col :span="6">
<span class="title">gfast后台管理框架</span> <img src="@/assets/image/Sorder.png" alt="" class="header-img">
</div> <span class="header-span">成交订单数</span>
<p>基于GF(Go Frame)的后台管理系统 ，完善的权限用户管理，致力于快速高效开发cms系统、督办系统、后续将加入流程审批、工作流引擎、项目管理、挂图作战、数据大屏等功能。</p> <p class="header-p">{{operate.order_count}}</p>
<div class="git-res"> </el-col>
<el-link type="primary" icon="el-icon-cloudy" href="https://gitee.com/tiger1103/gfast" >访问码云</el-link> <el-col :span="6">
<el-link type="success" icon="el-icon-user" href="https://github.com/tiger1103/gfast">访问github</el-link> <img src="@/assets/image/Sorder.png" alt="" class="header-img">
<el-link type="info" icon="el-icon-s-home" href="http://www.g-fast.cn">访问官网</el-link> <span class="header-span">GMV</span>
</div> <p class="header-p">{{operate.order_total_price}}</p>
<div class="product"> </el-col>
<h3>公司产品</h3> <el-col :span="6">
<ul> <img src="@/assets/image/Sorder.png" alt="" class="header-img">
<li><a href="http://www.qjit.cn/wallchartoperation.html" target="_blank" class="text-danger">挂图作战指挥平台</a></li> <span class="header-span">退款订单数</span>
<li><a href="http://www.qjit.cn/macrodata.html" target="_blank" class="text-danger">宏观数据库平台</a></li> <p class="header-p">{{operate.refund_count}}</p>
<li><a href="http://www.qjit.cn/usedcar.html" target="_blank" class="text-danger">二手车管理系统</a></li> </el-col>
<li><a href="http://www.qjit.cn/" target="_blank" class="text-danger">公租房管理系统</a></li> </el-row>
</ul> </div>
</div> <div class="foot-ri">
</el-card> <el-row type="flex" justify="space-around">
<el-card class="box-card xx"> <el-col :span="10">
<div slot="header" class="clearfix"> <img src="@/assets/image/Sorder.png" alt="" class="header-img">
<span class="title">联系信息</span> <span class="header-span">正常发货率</span>
</div> <p class="header-p">{{operate.delivery_rate}}</p>
<p><i class="el-icon-s-promotion"></i> 官网：<a href="http://www.g-fast.cn" class="text-info" target="_blank">http://www.g-fast.cn</a></p> </el-col>
<p><i class="el-icon-s-custom"></i> QQ群：865697297</p> <el-col :span="10">
</el-card> <img src="@/assets/image/Sorder.png" alt="" class="header-img">
</el-col> <span class="header-span">待结算金额</span>
<el-col :span="16"> <p class="header-p">{{operate.unsettled_amount}}</p>
<el-card class="box-card jz"> </el-col>
<div slot="header" class="clearfix"> </el-row>
<span class="title">捐赠</span> </div>
</div> </div>
<p>若框架对您有帮助，您可以捐赠表达一下心意：</p> </div>
<img style="width: 700px; height: 360px" src="/images/jz.jpg"/> <!-- 中间部分 -->
</el-card> <div class="main">
</el-col> <div class="main-left">
</el-row> --> <div class="main-left-top">
<el-row type="flex" justify="space-between">
<el-col :span="5">
<div class="tp-col" @click="goovertime()">
<div class="tp-le">
<span>超时订单</span>
<p>{{waitFor.deliveredTimeNum}}</p>
</div>
<div class="tp-img">
<img src="@/assets/image/stay.png" alt="">
</div>
</div>
</el-col>
<el-col :span="5">
<div class="tp-col" @click="godeliver()">
<div class="tp-le">
<span>24小时需发货</span>
<p>{{waitFor.deliverTime24Num}}</p>
</div>
<div class="tp-img">
<img src="@/assets/image/stay.png" alt="">
</div>
</div>
</el-col>
<el-col :span="5">
<div class="tp-col" @click="godeliver()">
<div class="tp-le">
<span>48小时需发货</span>
<p>{{waitFor.deliverTime48Num}}</p>
</div>
<div class="tp-img">
<img src="@/assets/image/stay.png" alt="">
</div>
</div>
</el-col>
<el-col :span="5">
<div class="tp-col" @click="afterSale()">
<div class="tp-le">
<span>待处理售后</span>
<p>{{waitFor.afterSaleNum}}</p>
</div>
<div class="tp-img">
<img src="@/assets/image/stay.png" alt="">
</div>
</div>
</el-col>
</el-row>
</div>
<div class="main-left-foot">
<div style="margin:30px 0 0 24px;">
<span class="ft-sp">店铺数据</span>
<div class="main-left-foot-top">
<el-date-picker
size="mini"
v-model="value1"
@change="dateTimechange"
:picker-options="pickerOptions"
value-format="timestamp"
:default-time="['00:00:00', '23:59:59']"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<el-radio-group v-model="numSelect" @change="getnumData" size="small" style="margin-left: 18px;">
<el-radio-button label="11">订单数据</el-radio-button>
<el-radio-button label="12">商品数据</el-radio-button>
<el-radio-button label="13">销量排行</el-radio-button>
</el-radio-group>
</div>
</div>
<div style="margin-top:38px;padding:16px 16px 0;" v-show="isShowData">
<line-chart :number-data="numberChartData"/>
</div>
<div style="margin-top:38px;padding:16px 16px 0;" v-show="!isShowData">
<el-table
:data="storeGoods"
stripe
style="width: 100%">
<el-table-column
type="index"
label="排名"
align="center"
width="150">
</el-table-column>
<el-table-column
prop = 'goods_title'
label="商品名称"
align="center"
width="400">
</el-table-column>
<el-table-column
prop="sale"
label="销量"
align="center"
width="180">
</el-table-column>
<el-table-column
prop="total_price"
align="center"
label="营业额">
</el-table-column>
</el-table>
</div>
</div>
</div>
<div class="main-right">
<div class="main-right-top">
<div class="sa">常用功能</div>
<div style="margin-top:24px;">
<el-row :gutter="10">
<el-col :span="8">
<div style="text-align:center;cursor: pointer;" @click="goCommodity()">
<div class="right-top-item">
<img src="@/assets/image/release.png" alt="">
</div>
<p>发布商品</p>
</div>
</el-col>
<el-col :span="8">
<div style="text-align:center;cursor: pointer;" @click="goMyAssets()">
<div class="right-top-item">
<img src="@/assets/image/release.png" alt="">
</div>
<p>资产提现</p>
</div>
</el-col>
<el-col :span="8">
<div style="text-align:center;">
<div class="right-top-item">
<img src="@/assets/image/release.png" alt="">
</div>
<p>版本记录</p>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="main-right-foot">
<img src="@/assets/image/update.png" alt="" style="margin:30px 0 0 25px">
<span class="main-right-foot-sa">更多>></span>
<ul>
<li>
<div class="main-right-foot-le">
<div style="color:#F0444E">重要</div>
</div>
<span class="foot-le-text">关于618全民好物节活动通知</span>
</li>
<li>
<div class="main-right-foot-le">
<div style="color:#F0444E">重要</div>
</div>
<span class="foot-le-text">关于618全民好物节活动通知</span>
</li>
<li>
<div class="main-right-foot-ri foot-color">
<div>新</div>
</div>
<span class="foot-le-text">关于618全民好物节活动通知</span>
</li>
<li>
<div class="main-right-foot-ri foot-color">
<div >新</div>
</div>
<span class="foot-le-text">关于618全民好物节活动通知</span>
</li>
<li>
<div class="main-right-foot-ri foot-color">
<div >新</div>
</div>
<span class="foot-le-text">关于618全民好物节活动通知</span>
</li>
<li>
<div class="main-right-foot-ri foot-color">
<div>新</div>
</div>
<span class="foot-le-text">关于618全民好物节活动通知</span>
</li>
<li>
<div class="main-right-foot-ri">
<div></div>
</div>
<span class="foot-le-text">关于618全民好物节活动通知</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="footer-left">
<div style="margin:30px 0 0 24px;">
<span class="ft-sp">热销类目排行</span>
<div class="main-left-foot-top">
<el-date-picker
size="mini"
v-model="value2"
@change="RankTimechange"
:picker-options="pickerOptions"
value-format="timestamp"
:default-time="['00:00:00', '23:59:59']"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<el-select v-model="Category" placeholder="请选择" size="small">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<el-table
style="margin-top:38px;padding:16px 16px 0;"
:cell-style='changeCellStyle'
:header-cell-style="{background:'linear-gradient(0deg, #FCEBCE 0%, #FEF6E9 100%)',color:'#955300'}"
:data="cateGory">
<el-table-column
type="index"
label="排名"
align="center"
width="200">
</el-table-column>
<el-table-column
prop="category_name"
label="品类"
align="center"
width="250">
<!-- <template slot-scope="scope">
<img src="@/assets/image/all-shop.png" alt="">
</template> -->
</el-table-column>
<el-table-column
prop="num"
label="商品总数"
align="center"
width="250">
</el-table-column>
<el-table-column
prop="sale"
align="center"
label="交易量"
width="250">
</el-table-column>
<el-table-column
prop="category_id"
align="center"
label="分类名称">
</el-table-column>
</el-table>
</div>
<div class="footer-right">
<div class="footer-right-top">
<span class="footer-right-top-text">商家成长</span>
<div class="footer-right-top-item">
<div class="footer-right-top-img footer-top-one" @click="openDia()">
<span>规则中心</span>
<p>GO></p></p>
</div>
<div class="footer-right-top-img footer-top-two" >
<span>学习中心</span>
<p>GO></p></p>
</div>
<div class="footer-right-top-img footer-top-thr" style="margin-top:15px;">
<span>商家成长</span>
<p>GO></p></p>
</div>
</div>
</div>
<div class="footer-right-bot">
<img src="@/assets/image/more.png" alt="" style="width:100%;">
</div>
</div>
</div>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<p class="dia-text">该模块内容正在建设中，敬请期待</p>
</el-dialog>
</div> </div>
<panel-group @handleSetLineChartData="handleSetLineChartData" :panel-data="panelData"/>
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData"/>
</el-row>
<!-- <el-row :gutter="32"> -->
<!-- <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<raddar-chart />
</div>
</el-col> -->
<!-- <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col> -->
<!-- </el-row> -->
</div> </div>
</template> </template>
<script> <script>
import {getStatistics} from "@/api/login"; import {getStatisticalHome,getOperationalData,getGoodsSale,getStoreData} from '@/api/system/home/home.js'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart' import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 161],
actualData: [120, 82, 91, 154, 162, 140, 145]
// 退出登录
},
// messages: {
// expectedData: [200, 192, 120, 144, 160, 130, 140],
// actualData: [180, 160, 151, 106, 145, 150, 130]
// },
// //金额
// purchases: {
// expectedData: [80, 100, 121, 104, 105, 90, 100],
// actualData: [120, 90, 100, 138, 142, 130, 130]
// },
// //订单
// shoppings: {
// // expectedData: [130, 140, 141, 142, 145, 150, 160], //期望
// actualData: [120, 82, 91, 154, 162, 140, 130] //实际
// }
}
export default { export default {
name: 'Index', name: 'Index',
components: { components: {
PanelGroup,
LineChart, LineChart,
// RaddarChart,
// PieChart,
// BarChart
}, },
data() { data() {
return { return {
panelData: { dialogVisible: false,
goods_total: 0, //商品总数 numberValue:'1',//控制运营数据时间筛选
order_total: 0,//订单总数 operate:{},//运营数据
total_price: 0,//金额总数 waitFor:{},//待办事项数据
refund_total: 0,//售后总数 numberChartData:{},//柱状图数据
storeOrder:{},//店铺数据-订单数据
}, storeGoods:[],//店铺销量数据
cateGory:[],//热销类目数据
lineChartData: { numSelect:'11',//统计图数据切换
moneyData: [], //金额折线 isShowData:true,//控制柱状图的切换
actualData: [], //订单折线 value1:[],//店铺数据时间查询
// countData:[], value2:[],//热销类目时间查询
maxChannelData: 0, //左边订单数量最大值 //时间筛选验证
maxMoneyData: 0, //金额最大值 pickerOptions: {
months: [] //下面日志 disabledDate(time) {
} let curDate = (new Date()).getTime();
let three = 30 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
//下拉框数据
options: [{
value: '一',
label: '一级类目'
}, {
value: '二',
label: '二级类目'
}, {
value: '三',
label: '三级类目'
}],
Category: '一级类目'
} }
}, },
created() { created() {
this.GetStatistics(); this.GetDefaultData()
}, },
methods: { methods: {
/** 首页所有数据 openDia(){
* order_total（总订单数量，总金额） this.dialogVisible=true
* */ },
GetStatistics() { handleClose(done) {
getStatistics().then(response => { done();
let money = [] },
let count = [] //跳转到我的资产
let actual = [] goMyAssets(){
if (response.data && response.data.line && response.data.line.length > 0) { console.log('跳转到我的资产')
response.data.line.forEach(function (item, index) { },
money.unshift(item.price/100) // 后台返回单位是 分，所以需要除以100 //跳转到商品发布页面
actual.unshift(item.date) goCommodity(){
count.unshift(item.count) console.log('跳转到商品发布页面')
}) },
} //跳转到售后
afterSale(){
//最大订单数 console.log('去售后')
var maxOrderNum = this.lineChartData.maxChannelData; },
for (var n = 1; n < count.length; n++) { //跳转到订单列表
if (count[n] > maxOrderNum) { godeliver(){
maxOrderNum = count[n]; console.log('24和48超时')
} },
} //跳转到订单列表
this.lineChartData.maxChannelData = maxOrderNum goovertime(){
//最大金额,后台返回单位是 分，所以需要除以100 console.log('超时')
var maxMoney = this.lineChartData.maxMoneyData/100; },
for (var n = 1; n < money.length; n++) { //获取默认数据
if (money[n] > maxMoney) { async GetDefaultData(){
maxMoney = money[n]; const result = await getStatisticalHome()
} this.operate=result.data.operational_data
} this.waitFor=result.data.seller_todo_data
this.storeOrder=result.data.store_order_data
this.lineChartData.maxMoneyData = maxMoney this.storeGoods=result.data.store_goods_sale_data
this.lineChartData.moneyData = money this.cateGory=result.data.category_sale_data
this.lineChartData.actualData = count this.numberChartData=this.storeOrder
this.lineChartData.months = actual let storeObject={}
storeObject.date=this.storeOrder.date.reverse()
this.panelData.goods_total = response.data.goods_total storeObject.customerprice=this.storeOrder.customer_price
this.panelData.refund_total = response.data.rettotal storeObject.ordercount=this.storeOrder.order_count
this.panelData.order_total = response.data.order_total.count storeObject.ordertotal=this.storeOrder.order_total
this.panelData.total_price = response.data.order_total.total_price / 100 this.numberChartData=storeObject
}); console.log(result.data,'默认返回的数据')
},
//统计店铺数据时间和排行数据
async dateTimechange(){
if(this.numSelect=='11'){
let query={}
query.start_time=this.value1[0] / 1000
query.end_time=this.value1[1] / 1000
query.seller_id=this.$store.state.user.sellerid
const result=await getStoreData(query)
console.log(result)
let storeObject={}
storeObject.date=result.data.date.reverse()
storeObject.customerprice=result.data.customer_price
storeObject.ordercount=result.data.order_count
storeObject.ordertotal=result.data.order_total
this.numberChartData=storeObject
console.log(this.numberChartData,'123456')
console.log(this.value1,'统计店铺选择时间')
console.log(query)
}else if(this.numSelect=='13'){
let query={}
query.start_time=this.value1[0] / 1000
query.end_time=this.value1[1] / 1000
const result=await getGoodsSale(query)
this.storeGoods=result.data
}else{
return
}
},
//热销类目排行数据时间
RankTimechange(){
// let query={}
// query.start_time=this.value1[0]
// query.end_time=this.value1[1]
// const result=await getGoodsSale(query)
// console.log(result)
// console.log(query)
// console.log(this.value2,'热销类目选择时间')
},
//修改表格样式
changeCellStyle(row,column,rowIndex,columnIndex){
if(row.column.label==='品类'){
return 'color: #000000;font: 400 14px AlibabaPuHuiTi-Regular'
}else{
return ''
}
},
//时间筛选按钮
async getnumbersTime(e){
let query={}
query.seller_id=this.$store.state.user.sellerid
if(e==1){
const result=await getOperationalData(query)
this.operate=result.data
}else if(e==7){
query.day=e
const result=await getOperationalData(query)
this.operate=result.data
}else if(e==15){
query.day=e
const result=await getOperationalData(query)
this.operate=result.data
}
},
//数据统计按钮
getnumData(e){
if(e==11){
this.isShowData=true
if(this.value1.length!==0){
this.dateTimechange()
}
}else if(e==13){
this.isShowData=false
if(this.value1.length!==0){
this.dateTimechange()
}
console.log(this.value1)
}else{
return
}
}, },
handleSetLineChartData(type) {
//console.log("type",type)
this.lineChartData = lineChartData[type]
}
} }
} }
</script> </script>
...@@ -200,54 +520,257 @@ ...@@ -200,54 +520,257 @@
margin-bottom: 20px; margin-bottom: 20px;
font-size: 14px; font-size: 14px;
} }
.dashboard-promote{
.dashboard-promote .el-row .jz { margin-left: 21px;
height: 500px;
} }
//头部
.dashboard-promote .el-row .kj { .header{
height: 300px; width: 100%;
overflow: hidden;
margin-top: 20px;
background: #FFFFFF;
border-radius: 8px;
} }
.header .header-top{
.dashboard-promote .el-row .xx { margin-top: 29px;
height: 200px;
} }
.header .sp{
.git-res { width: 63px;
height: 16px;
margin-left: 24px;
font: 400 16px/5px Alibaba PuHuiTi;
color: #000000;
}
.header-foot{
width: 100%;
height: 100px;
margin-top: 39px;
overflow: hidden;
}
.foot-le{
width: 66%;
text-align: center;
display: inline-block;
}
.header-img{
vertical-align: middle;
}
.header-span{
font: 600 14px/11px Lantinghei SC;
color: #333333;
}
.header-p{
font: 600 24px/17px Lantinghei SC;
color: #344750;
}
.foot-ri{
width: 33%;
height: 80px;
display: inline-block;
text-align: center;
border-left: 2px solid #E6EDFE;
}
//中间部分
.main{
width: 100%;
height: 612px;
margin-top:20px ;
}
.main .main-left{
float: left;
width: 74%;
height: 592px;
}
.main-left-top .tp-le,.tp-img{
display: inline-block;
text-align: center;
margin-top: 27px;
}
.main-left-top .tp-col{
// width: 281px;
cursor: pointer;
height: 106px;
background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 100%);
border-radius: 4px;
}
.main-left-top .tp-le{
width: 163px;
}
.main-left-top .tp-col span{
font: 400 14px/11px Alibaba PuHuiTi;
color: #333333;
}
.main-left-top .tp-col p{
font: bold 24px/17px Alibaba PuHuiTi;
color: #19191A;
}
.main-left-foot{
height: 466px;
margin-top: 20px; margin-top: 20px;
background: #FFFFFF;
border-radius: 4px;
overflow: hidden;
} }
.main-left-foot .ft-sp{
.git-res .el-link { font: 400 16px/5px Alibaba PuHuiTi;
margin-right: 30px; color: #000000;
}
.main-left-foot-top{
float: right;
margin-right:49px ;
}
//右侧内容
.main-right{
width: 25%;
height: 592px;
float: left;
margin-left: 15px;
}
.main-right-top{
height: 198px;
overflow: hidden;
background: #FFFFFF;
border-radius: 4px;
}
.main-right-top .sa{
margin: 30px 0 0 26px;
font: 400 16px/5px Alibaba PuHuiTi;
color: #000000;
}
.main-right-top .right-top-item{
width: 70px;
height: 70px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
background: #F0F6FF;
border-radius: 10px;
}
.main-right-foot{
height: 374px;
margin-top: 20px;
background: #FFFFFF;
border-radius: 4px;
}
.main-right-foot ul{
margin: 24px 0 0 25px;
}
.main-right-foot ul li{
margin-bottom: 16px;
cursor: pointer;
}
.main-right-foot .main-right-foot-sa{
float: right;
margin:30px 25px 0 0;
cursor: pointer;
font: 400 14px Alibaba PuHuiTi;
color: #999999;
}
.main-right-foot .main-right-foot-le{
width: 37px;
height: 22px;
display: inline-block;
background: #FFF5F6;
border-radius: 4px;
}
.main-right-foot .main-right-foot-ri{
width: 23px;
height: 22px;
display: inline-block;
border-radius: 4px;
}
.foot-color{
background: #FFF6ED;
}
.main-right-foot-le,.main-right-foot-ri div{
text-align: center;
line-height: 22px;
font: 400 14px Alibaba PuHuiTi;
font-style: italic;
}
.main-right-foot .foot-le-text{
margin-left: 6px;
font: 400 14px Alibaba PuHuiTi;
color: #000000;
}
//底部样式
.footer-left{
width: 74%;
height: 428px;
float: left;
background: #FFFFFF;
border-radius: 4px;
}
.footer-right-top{
width: 25%;
height: 276px;
background: #FFFFFF;
border-radius: 4px;
display: inline-block;
margin-left: 15px;
}
.footer-right-top-text{
font: 400 16px Alibaba PuHuiTi;
color: #000000;
line-height: 5px;
display:inline-block;
margin:30px 0 0 24px;
}
.footer-right-top-item{
width: 88%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin: 24px auto;
}
.footer-right-top-img{
width: 177px;
height: 81px;
border: 1px dotted black;
}
.footer-top-one{
background-image: url(../assets/image/background-item1.png);
}
.footer-top-two{
background-image: url(../assets/image/background-item2.png);
}
.footer-top-thr{
background-image: url(../assets/image/background-item3.png);
}
.footer-right-top-img span{
display: inline-block;
font: 400 14px/2px Microsoft YaHei;
color: #000000;
margin: 20px 0 0 23px;
}
.footer-right-top-img p{
font: 400 14px/2px FZZhengHeiS-B-GB;
color: #C7CAD7;
margin: 14px 0 0px 23px;
}
.footer-right-bot{
width: 25%;
margin-top: 20px;
display: inline-block;
margin-left: 15px;
}
.dia-text{
text-align: center;
font: 600 24px FZZhengHeiS-B-GB;
color: #000000;
} }
ul, li { ul, li {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none list-style: none
} }
.dashboard-editor-container {
.product li { background-color: #F1F4FA;
margin-bottom: 20px;
float: left;
width: 150px;
}
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative; position: relative;
height: calc(100%);
.chart-wrapper { overflow-y:scroll ;
background: #fff; overflow-x:hidden ;
padding: 16px 16px 0; }
margin-bottom: 32px;
}
}
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论