Skip to content

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

首页内容的实现

上级 d4270343
显示空白字符变更
内嵌 并排
正在显示 包含 830 行增加 和 281 行删除
.env.development
浏览文件 @ 7952e0df
# 开发环境配置
ENV = 'development'
# 正式环境
#VUE_APP_BASE_API = 'http://sjapi.jxhh.com'
# dev环境
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开放接口
VUE_APP_BASE_SYS_API = 'http://sysapi.jxhh.com'
# 路由懒加载
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 {
type: Boolean,
default: true
},
chartData: {
numberData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
dateArr: [],
yAsix:10000,
}
},
watch: {
chartData: {
numberData: {
deep: true,
handler(val) {
this.dateArr= val.date
this.numberMax(this.numberData.ordercount,this.numberData.customerprice)
this.setOptions(val)
}
}
},
created() {
this.$nextTick(() => {
this.initChart()
})
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
......@@ -57,43 +66,22 @@ export default {
this.chart = null
},
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){
let num = ''
if (num1 >= num2) {
num = num1
} else {
num = num2
}
let prec = 2
let ceil = true
const len = String(num).length;
if (len <= prec) {
return num
if(num1,num2){
var c = num1.concat(num2)
this.yAsix = Math.ceil(Math.max(...c))
}
const mult = Math.pow(10, prec);
return ceil ? Math.ceil(num / mult) * mult : Math.floor(num / mult) * mult;
},
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
if(this.chartData.months){
this.setOptions(this.chartData)
}
this.setOptions(this.numberData)
},
setOptions({ expectedData, actualData, moneyData, months} = {}) {
setOptions({ordercount,customerprice,ordertotal,customerArr,dateArr,retentionArr} = {}) {
this.chart.setOption({
xAxis: {
data: months,
boundaryGap: false,
data: this.dateArr,
boundaryGap: true,
axisTick: {
show: true
}
......@@ -115,38 +103,43 @@ export default {
yAxis: [
{
type: 'value',
name: '数量',
name: '交易量',
min: 0,
max: this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData)<10?10:this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData),
interval: this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData)<10?2:(this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData))/5,
max: this.yAsix,
interval: Math.ceil(this.yAsix/5),
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: {
data: [ '订单','收益']
data: ['总订单数','总订单金额','客单价']
},
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,
type: 'line',
itemStyle: {
normal: {
color: '#3888fa',
color: '#EE7945',
lineStyle: {
color: '#3888fa',
color: '#EE7945',
width: 2
},
areaStyle: {
......@@ -154,20 +147,20 @@ export default {
}
}
},
data: actualData,
data: ordertotal,
animationDuration: 2800,
animationEasing: 'quadraticOut'
animationEasing: 'cubicInOut'
},
{
name: '收益',
name: '客单价',
smooth: true,
type: 'line',
yAxisIndex: 1,
type: 'bar',
// yAxisIndex: 1,
itemStyle: {
normal: {
color: '#40c9c6',
color: '#49D3CE',
lineStyle: {
color: '#40c9c6',
color: '#49D3CE',
width: 2
},
areaStyle: {
......@@ -175,7 +168,7 @@ export default {
}
}
},
data: moneyData,
data: customerprice,
animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
......
src/views/index.vue
浏览文件 @ 7952e0df
<template>
<div class="dashboard-editor-container">
<div class="dashboard-promote">
<!-- <el-row>
<el-col :span="24">
<el-card class="box-card">
<p>领取阿里云通用云产品优惠券</p>
<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>
<p>领取腾讯云通用云产品优惠券</p>
<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-card>
<!-- 头部 -->
<div class="header">
<div class="header-top">
<span class="sp">运营数据</span>
<el-radio-group v-model="numberValue" @change="getnumbersTime" size="small" style="margin-left: 27px;">
<el-radio-button label="1">昨日</el-radio-button>
<el-radio-button label="7">近7天</el-radio-button>
<el-radio-button label="15">近15天</el-radio-button>
</el-radio-group>
</div>
<div class="header-foot">
<div class="foot-le">
<el-row type="flex" justify="space-around">
<el-col :span="6">
<img src="@/assets/image/Sorder.png" alt="" class="header-img">
<span class="header-span">成交订单数</span>
<p class="header-p">{{operate.order_count}}</p>
</el-col>
</el-row> -->
<!-- <el-row class="other">
<el-col :span="8">
<el-card class="box-card kj">
<div slot="header" class="clearfix">
<span class="title">gfast后台管理框架</span>
</div>
<p>基于GF(Go Frame)的后台管理系统 ，完善的权限用户管理，致力于快速高效开发cms系统、督办系统、后续将加入流程审批、工作流引擎、项目管理、挂图作战、数据大屏等功能。</p>
<div class="git-res">
<el-link type="primary" icon="el-icon-cloudy" href="https://gitee.com/tiger1103/gfast" >访问码云</el-link>
<el-link type="success" icon="el-icon-user" href="https://github.com/tiger1103/gfast">访问github</el-link>
<el-link type="info" icon="el-icon-s-home" href="http://www.g-fast.cn">访问官网</el-link>
</div>
<div class="product">
<h3>公司产品</h3>
<ul>
<li><a href="http://www.qjit.cn/wallchartoperation.html" target="_blank" class="text-danger">挂图作战指挥平台</a></li>
<li><a href="http://www.qjit.cn/macrodata.html" target="_blank" class="text-danger">宏观数据库平台</a></li>
<li><a href="http://www.qjit.cn/usedcar.html" target="_blank" class="text-danger">二手车管理系统</a></li>
<li><a href="http://www.qjit.cn/" target="_blank" class="text-danger">公租房管理系统</a></li>
</ul>
<el-col :span="6">
<img src="@/assets/image/Sorder.png" alt="" class="header-img">
<span class="header-span">GMV</span>
<p class="header-p">{{operate.order_total_price}}</p>
</el-col>
<el-col :span="6">
<img src="@/assets/image/Sorder.png" alt="" class="header-img">
<span class="header-span">退款订单数</span>
<p class="header-p">{{operate.refund_count}}</p>
</el-col>
</el-row>
</div>
<div class="foot-ri">
<el-row type="flex" justify="space-around">
<el-col :span="10">
<img src="@/assets/image/Sorder.png" alt="" class="header-img">
<span class="header-span">正常发货率</span>
<p class="header-p">{{operate.delivery_rate}}</p>
</el-col>
<el-col :span="10">
<img src="@/assets/image/Sorder.png" alt="" class="header-img">
<span class="header-span">待结算金额</span>
<p class="header-p">{{operate.unsettled_amount}}</p>
</el-col>
</el-row>
</div>
</div>
</div>
<!-- 中间部分 -->
<div class="main">
<div class="main-left">
<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>
</el-card>
<el-card class="box-card xx">
<div slot="header" class="clearfix">
<span class="title">联系信息</span>
</div>
<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>
<p><i class="el-icon-s-custom"></i> QQ群：865697297</p>
</el-card>
</el-col>
<el-col :span="16">
<el-card class="box-card jz">
<div slot="header" class="clearfix">
<span class="title">捐赠</span>
</div>
<p>若框架对您有帮助，您可以捐赠表达一下心意：</p>
<img style="width: 700px; height: 360px" src="/images/jz.jpg"/>
</el-card>
<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-row> -->
<el-col :span="5">
<div class="tp-col" @click="godeliver()">
<div class="tp-le">
<span>48小时需发货</span>
<p>{{waitFor.deliverTime48Num}}</p>
</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"/>
<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>
<!-- <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 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 :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
<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>
</el-col> -->
<!-- </el-row> -->
</div>
</template>
<script>
import {getStatistics} from "@/api/login";
import PanelGroup from './dashboard/PanelGroup'
import {getStatisticalHome,getOperationalData,getGoodsSale,getStoreData} from '@/api/system/home/home.js'
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 {
name: 'Index',
components: {
PanelGroup,
LineChart,
// RaddarChart,
// PieChart,
// BarChart
},
data() {
return {
panelData: {
goods_total: 0, //商品总数
order_total: 0,//订单总数
total_price: 0,//金额总数
refund_total: 0,//售后总数
},
lineChartData: {
moneyData: [], //金额折线
actualData: [], //订单折线
// countData:[],
maxChannelData: 0, //左边订单数量最大值
maxMoneyData: 0, //金额最大值
months: [] //下面日志
dialogVisible: false,
numberValue:'1',//控制运营数据时间筛选
operate:{},//运营数据
waitFor:{},//待办事项数据
numberChartData:{},//柱状图数据
storeOrder:{},//店铺数据-订单数据
storeGoods:[],//店铺销量数据
cateGory:[],//热销类目数据
numSelect:'11',//统计图数据切换
isShowData:true,//控制柱状图的切换
value1:[],//店铺数据时间查询
value2:[],//热销类目时间查询
//时间筛选验证
pickerOptions: {
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() {
this.GetStatistics();
this.GetDefaultData()
},
methods: {
/** 首页所有数据
* order_total（总订单数量，总金额）
* */
GetStatistics() {
getStatistics().then(response => {
let money = []
let count = []
let actual = []
if (response.data && response.data.line && response.data.line.length > 0) {
response.data.line.forEach(function (item, index) {
money.unshift(item.price/100) // 后台返回单位是 分，所以需要除以100
actual.unshift(item.date)
count.unshift(item.count)
})
openDia(){
this.dialogVisible=true
},
handleClose(done) {
done();
},
//跳转到我的资产
goMyAssets(){
console.log('跳转到我的资产')
},
//跳转到商品发布页面
goCommodity(){
console.log('跳转到商品发布页面')
},
//跳转到售后
afterSale(){
console.log('去售后')
},
//跳转到订单列表
godeliver(){
console.log('24和48超时')
},
//跳转到订单列表
goovertime(){
console.log('超时')
},
//获取默认数据
async GetDefaultData(){
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.storeGoods=result.data.store_goods_sale_data
this.cateGory=result.data.category_sale_data
this.numberChartData=this.storeOrder
let storeObject={}
storeObject.date=this.storeOrder.date.reverse()
storeObject.customerprice=this.storeOrder.customer_price
storeObject.ordercount=this.storeOrder.order_count
storeObject.ordertotal=this.storeOrder.order_total
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
}
//最大订单数
var maxOrderNum = this.lineChartData.maxChannelData;
for (var n = 1; n < count.length; n++) {
if (count[n] > maxOrderNum) {
maxOrderNum = count[n];
},
//热销类目排行数据时间
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
}
this.lineChartData.maxChannelData = maxOrderNum
//最大金额,后台返回单位是 分，所以需要除以100
var maxMoney = this.lineChartData.maxMoneyData/100;
for (var n = 1; n < money.length; n++) {
if (money[n] > maxMoney) {
maxMoney = money[n];
},
//数据统计按钮
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()
}
this.lineChartData.maxMoneyData = maxMoney
this.lineChartData.moneyData = money
this.lineChartData.actualData = count
this.lineChartData.months = actual
this.panelData.goods_total = response.data.goods_total
this.panelData.refund_total = response.data.rettotal
this.panelData.order_total = response.data.order_total.count
this.panelData.total_price = response.data.order_total.total_price / 100
});
},
handleSetLineChartData(type) {
//console.log("type",type)
this.lineChartData = lineChartData[type]
console.log(this.value1)
}else{
return
}
},
}
}
</script>
......@@ -200,54 +520,257 @@
margin-bottom: 20px;
font-size: 14px;
}
.dashboard-promote .el-row .jz {
height: 500px;
.dashboard-promote{
margin-left: 21px;
}
.dashboard-promote .el-row .kj {
height: 300px;
//头部
.header{
width: 100%;
overflow: hidden;
margin-top: 20px;
background: #FFFFFF;
border-radius: 8px;
}
.dashboard-promote .el-row .xx {
height: 200px;
.header .header-top{
margin-top: 29px;
}
.git-res {
.header .sp{
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;
background: #FFFFFF;
border-radius: 4px;
overflow: hidden;
}
.git-res .el-link {
margin-right: 30px;
.main-left-foot .ft-sp{
font: 400 16px/5px Alibaba PuHuiTi;
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 {
padding: 0;
margin: 0;
list-style: none
}
.product li {
margin-bottom: 20px;
float: left;
width: 150px;
}
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
background-color: #F1F4FA;
position: relative;
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;
}
height: calc(100%);
overflow-y:scroll ;
overflow-x:hidden ;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论