This commit is contained in:
parent
c6c8f3086e
commit
911b859bdf
19
src/App.vue
19
src/App.vue
|
@ -12,6 +12,25 @@ if (localStorage.getItem("TRADE_USER")) {
|
||||||
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
|
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
|
||||||
|
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
localStorage.setItem('TRADE_USER', JSON.stringify({
|
||||||
|
"user": {
|
||||||
|
"id": 8,
|
||||||
|
"account_type": 2,
|
||||||
|
"area_code": "510524",
|
||||||
|
"street_code": "510524100",
|
||||||
|
"account": "叙永镇",
|
||||||
|
"password": "3f4087bd6bdff7b6a3719ecc165c1a0d"
|
||||||
|
},
|
||||||
|
"token": "345d45fcd348ff02a69137999df2bbd8",
|
||||||
|
"expire": 1718782774,
|
||||||
|
"role": 3
|
||||||
|
}))
|
||||||
|
let userInfo = JSON.parse(localStorage.getItem('TRADE_USER'))
|
||||||
|
areaStroe.changeUserInfo(userInfo)
|
||||||
|
let { area_code, street_code } = userInfo.user
|
||||||
|
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
19
src/api.js
19
src/api.js
|
@ -8,7 +8,8 @@ let expire = localStorage.getItem("TRADE_USER") ? JSON.parse(localStorage.getIte
|
||||||
|
|
||||||
// 创建axios 实例
|
// 创建axios 实例
|
||||||
const instacne = axios.create({
|
const instacne = axios.create({
|
||||||
baseURL: "https://shop.lihaink.cn/",
|
baseURL: "http://192.168.1.22:8545",
|
||||||
|
// baseURL: "https://shop.lihaink.cn/",
|
||||||
timeout: 30000,
|
timeout: 30000,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -44,7 +45,7 @@ instacne.interceptors.request.use(
|
||||||
instacne.interceptors.response.use(
|
instacne.interceptors.response.use(
|
||||||
(res) => {
|
(res) => {
|
||||||
|
|
||||||
if (res.data.status != 200) {
|
if (res.data.code != 1) {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: res.data.message,
|
message: res.data.message,
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
|
@ -64,7 +65,7 @@ instacne.interceptors.response.use(
|
||||||
|
|
||||||
|
|
||||||
export function getUserNumApi(params) {
|
export function getUserNumApi(params) {
|
||||||
return instacne.get('/api/dataview/user_merchat_count', { params })
|
return instacne.get('/statistics/user', { params })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -72,7 +73,7 @@ export function getOrderNumApi(params) {
|
||||||
return instacne.get('/api/dataview/order_statistics', { params })
|
return instacne.get('/api/dataview/order_statistics', { params })
|
||||||
}
|
}
|
||||||
export function getSalesRankApi(params) {
|
export function getSalesRankApi(params) {
|
||||||
return instacne.get('/api/dataview/sales_ranking', { params })
|
return instacne.get('/statistics/sales_ranking', { params })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -82,15 +83,15 @@ export function getTodayOrderAmountApi(params) {
|
||||||
|
|
||||||
|
|
||||||
export function getProductCountApi(params) {
|
export function getProductCountApi(params) {
|
||||||
return instacne.get('/api/dataview/product_count', { params })
|
return instacne.get('/statistics/product_count', { params })
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getViewCountApi(params) {
|
export function getViewCountApi(params) {
|
||||||
return instacne.get('/api/dataview/view_count', { params })
|
return instacne.get('/statistics/index', { params })
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getUserTradeCountApi(params) {
|
export function getUserTradeCountApi(params) {
|
||||||
return instacne.get('/api/dataview/user_trade_count', { params })
|
return instacne.get('/statistics/user_trade_count', { params })
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getProductCategoryListApi(params) {
|
export function getProductCategoryListApi(params) {
|
||||||
|
@ -158,7 +159,7 @@ export function withdraw_listApi(params) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function street_currday_order_countApi(params) {
|
export function street_currday_order_countApi(params) {
|
||||||
return instacne.get('/api/dataview/street_currday_order_count', { params })
|
return instacne.get('/statistics/street_currday_order_count', { params })
|
||||||
}
|
}
|
||||||
export function loginApi(params) {
|
export function loginApi(params) {
|
||||||
return instacne.post('/api/dataview/login', params)
|
return instacne.post('/api/dataview/login', params)
|
||||||
|
@ -173,7 +174,7 @@ export function merchant_count_mainApi(params) {
|
||||||
return instacne.get('/api/dataview/merchant_count_main', { params })
|
return instacne.get('/api/dataview/merchant_count_main', { params })
|
||||||
}
|
}
|
||||||
export function order_user_num_countApi(params) {
|
export function order_user_num_countApi(params) {
|
||||||
return instacne.get('/api/dataview/order_user_num_count', { params })
|
return instacne.get('/statistics/order_user_num_count', { params })
|
||||||
}
|
}
|
||||||
|
|
||||||
export function merchant_product_rankingApi(params) {
|
export function merchant_product_rankingApi(params) {
|
||||||
|
|
|
@ -22,11 +22,16 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
setTimeout(() => {
|
// setTimeout(() => {
|
||||||
this.toOrderNum(this.num) // 这里输入数字即可调用
|
// this.toOrderNum(this.num) // 这里输入数字即可调用
|
||||||
}, 500);
|
// }, 500);
|
||||||
|
|
||||||
},
|
},
|
||||||
|
watch:{
|
||||||
|
num(n,o){
|
||||||
|
this.toOrderNum(this.num) // 这里输入数字即可调用
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 设置文字滚动
|
// 设置文字滚动
|
||||||
setNumberTransform() {
|
setNumberTransform() {
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="headers">
|
<div class="headers">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
</div>
|
</div>
|
||||||
<div class="tab" v-if="role != 1">
|
<!-- <div class="tab" v-if="role != 1">
|
||||||
<div class="tab-li">
|
<div class="tab-li">
|
||||||
<img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" src="/static/index/SY.png"
|
<img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" src="/static/index/SY.png"
|
||||||
alt="">
|
alt="">
|
||||||
|
@ -50,7 +50,7 @@
|
||||||
<img @click="showFn(2, '/storeLogin')" class="tab-img" v-else style="width: 7vw;height:3vh;"
|
<img @click="showFn(2, '/storeLogin')" class="tab-img" v-else style="width: 7vw;height:3vh;"
|
||||||
src="/static/index/SHXZ.png" alt="">
|
src="/static/index/SHXZ.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<datePicker></datePicker>
|
<datePicker></datePicker>
|
||||||
<div class="rigth-li" @click="choseAreaFn"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
<div class="rigth-li" @click="choseAreaFn"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
||||||
|
|
|
@ -12,7 +12,7 @@ let areaStore = areaObj()
|
||||||
getUserTradeCountApi(
|
getUserTradeCountApi(
|
||||||
{ ...areaStore.area }
|
{ ...areaStore.area }
|
||||||
).then(res => {
|
).then(res => {
|
||||||
res.data.userTradeCountList.forEach(item => {
|
res.data.forEach(item => {
|
||||||
transactionUsersTown.xAxis[0]
|
transactionUsersTown.xAxis[0]
|
||||||
transactionUsersTown.xAxis[0].data.push(item.date.slice(5, item.date.length))
|
transactionUsersTown.xAxis[0].data.push(item.date.slice(5, item.date.length))
|
||||||
transactionUsersTown.series[0].data.push(item.visitUser)
|
transactionUsersTown.series[0].data.push(item.visitUser)
|
||||||
|
@ -28,7 +28,7 @@ const initCharts = (tag, option) => {
|
||||||
|
|
||||||
}
|
}
|
||||||
const transactionUsersTown = {
|
const transactionUsersTown = {
|
||||||
color: ['#015989', '#583936', '#416979'],
|
color: ['#4B5FDB', '#583936', '#10C1CE'],
|
||||||
title: {
|
title: {
|
||||||
text: ''
|
text: ''
|
||||||
},
|
},
|
||||||
|
@ -45,8 +45,12 @@ const transactionUsersTown = {
|
||||||
data: ['访客人数', '下单人数', '支付人数',],
|
data: ['访客人数', '下单人数', '支付人数',],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "white"
|
color: "white"
|
||||||
}
|
},
|
||||||
|
icon: 'cricle',
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 10,
|
||||||
|
top: '2%'
|
||||||
},
|
},
|
||||||
|
|
||||||
grid: {
|
grid: {
|
||||||
|
@ -83,7 +87,6 @@ const transactionUsersTown = {
|
||||||
{
|
{
|
||||||
name: '访客人数',
|
name: '访客人数',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 0
|
width: 0
|
||||||
|
@ -94,11 +97,11 @@ const transactionUsersTown = {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#18394A'
|
color: '#4B5FDB'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#2885A4'
|
color: '#5A649D'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
|
@ -110,7 +113,6 @@ const transactionUsersTown = {
|
||||||
{
|
{
|
||||||
name: '下单人数',
|
name: '下单人数',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 0
|
width: 0
|
||||||
|
@ -121,11 +123,11 @@ const transactionUsersTown = {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#2752A6'
|
color: '#583936'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#005886'
|
color: '#8b7042'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
|
@ -137,7 +139,6 @@ const transactionUsersTown = {
|
||||||
{
|
{
|
||||||
name: '支付人数',
|
name: '支付人数',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 0
|
width: 0
|
||||||
|
@ -148,11 +149,11 @@ const transactionUsersTown = {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#005685'
|
color: '#10C1CE'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#355969'
|
color: '#0294E0'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<img class="img-cls" src="/static/town/PHBSJ.png" alt="">
|
<img class="img-cls" src="/static/town/PHBSJ.png" alt="">
|
||||||
<div class="user-rank" style="width: 98%; " v-if="config3.data.length">
|
<div class="user-rank" style="width: 98%; " v-if="config3.data.length">
|
||||||
<div class="btns">
|
<!-- <div class="btns">
|
||||||
<span class="btn" :class="{ actbtn: showGoods }" @click="showGoods = true">商品销售排行</span>
|
<span class="btn" :class="{ actbtn: showGoods }" @click="showGoods = true">商品销售排行</span>
|
||||||
<span class="btn" :class="{ actbtn: !showGoods }" @click="showGoods = false">店铺销量排行</span>
|
<span class="btn" :class="{ actbtn: !showGoods }" @click="showGoods = false">店铺销量排行</span>
|
||||||
</div>
|
</div> -->
|
||||||
<dv-scroll-board v-show="showGoods" :config="config3" style="height: 35vh;margin-left: 1%;" />
|
<dv-scroll-board v-show="showGoods" :config="config3" style="height: 35vh;margin-left: 1%;" />
|
||||||
<dv-scroll-board v-show="!showGoods" :config="config" style="height: 35vh;margin-left: 1%;" />
|
<dv-scroll-board v-show="!showGoods" :config="config" style="height: 35vh;margin-left: 1%;" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -16,9 +16,11 @@ import { areaObj } from "@/store/index.js"
|
||||||
const showGoods = ref(true)
|
const showGoods = ref(true)
|
||||||
const areaStore = areaObj()
|
const areaStore = areaObj()
|
||||||
getSalesRankApi({ ...areaStore.area }).then(res => {
|
getSalesRankApi({ ...areaStore.area }).then(res => {
|
||||||
townProductCount = res.data.townProductCount
|
|
||||||
productRankingTotal = res.data.productRankingTotal
|
console.log("===", res);
|
||||||
aa(config3, res.data.productRankingList)
|
// townProductCount = res.data.townProductCount
|
||||||
|
// productRankingTotal = res.data.productRankingTotal
|
||||||
|
aa(config3, res.data)
|
||||||
aa(config, res.data.merchantRankingList
|
aa(config, res.data.merchantRankingList
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -34,14 +36,16 @@ let townProductCount = ''
|
||||||
let productRankingTotal = ''
|
let productRankingTotal = ''
|
||||||
const aa = (cig, data) => {
|
const aa = (cig, data) => {
|
||||||
let list = []
|
let list = []
|
||||||
data.forEach((item, i) => {
|
productRankingTotal = 0
|
||||||
|
data?.forEach((item, i) => {
|
||||||
|
productRankingTotal += item.sales
|
||||||
cig.data.push([
|
cig.data.push([
|
||||||
|
|
||||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||||
`<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
`<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
|
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
|
||||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: ${item.store_name ? (item.total_sales / productRankingTotal.value).toFixed(2) * 100 : (item.total_sales / townProductCount.value).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: ${item.store_name ? (item.sales / productRankingTotal).toFixed(2) * 100 : (item.total_sales / townProductCount).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
`<div style=' position: relative;line-height:30px;text-align:center' >${item.total_sales} <span style='font-size:10px'>单</span>
|
`<div style=' position: relative;line-height:30px;text-align:center' >${item.sales} <span style='font-size:10px'>单</span>
|
||||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
|
<img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
|
||||||
</div>`,
|
</div>`,
|
||||||
|
|
||||||
|
@ -53,7 +57,6 @@ const aa = (cig, data) => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return list
|
return list
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -77,7 +77,7 @@
|
||||||
|
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
件</div>
|
间</div>
|
||||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
@ -96,13 +96,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="Views">
|
<div class="Views">
|
||||||
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
<img src="/static/index/SSLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
<div class="view-content">
|
<div class="view-content">
|
||||||
<div>昨日数据:{{ viewData.yesterday }}</div>
|
<!-- <div>昨日数据:{{ viewData.yesterday }}</div> -->
|
||||||
<div style="display: flex;align-items: center;">当前浏览量:
|
<div style="display: flex;align-items: center;">
|
||||||
<Remake :num="viewData.today" /> 人正在浏览
|
<span style="font-size: 18px;">实时收款金额:</span>
|
||||||
|
<Remake :num="viewData.dayPayPrice" />
|
||||||
</div>
|
</div>
|
||||||
<div>周环比:{{ viewData.lastWeekRate }}%</div>
|
<!-- <div>周环比:{{ viewData.lastWeekRate }}%</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -145,7 +146,8 @@ const data = reactive(
|
||||||
const viewData = reactive({
|
const viewData = reactive({
|
||||||
lastWeekRate: -0,
|
lastWeekRate: -0,
|
||||||
today: 0,
|
today: 0,
|
||||||
yesterday: 7
|
yesterday: 7,
|
||||||
|
dayPayPrice: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
getProductCountApi({
|
getProductCountApi({
|
||||||
|
|
|
@ -39,7 +39,7 @@ getUserNumApi({
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
|
||||||
|
|
||||||
res.data.userCountlist.forEach(item => {
|
res.data.forEach(item => {
|
||||||
userChartOption.series[0].data.push(item.newUserCount)
|
userChartOption.series[0].data.push(item.newUserCount)
|
||||||
userChartOption.series[1].data.push(item.viewUserCount)
|
userChartOption.series[1].data.push(item.viewUserCount)
|
||||||
userChartOption.series[2].data.push(item.totalUserCount)
|
userChartOption.series[2].data.push(item.totalUserCount)
|
||||||
|
@ -122,7 +122,7 @@ const userChartOption = {
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '新增用户数量',
|
name: '新增会员数量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
|
@ -150,7 +150,7 @@ const userChartOption = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '累计用户数量',
|
name: '累计会员数量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
|
|
|
@ -64,18 +64,18 @@ const router = createRouter({
|
||||||
})
|
})
|
||||||
|
|
||||||
router.beforeEach(async (to, from, next) => {
|
router.beforeEach(async (to, from, next) => {
|
||||||
|
// 全部放行
|
||||||
|
// let token = localStorage.getItem("TRADE_USER")
|
||||||
|
|
||||||
let token = localStorage.getItem("TRADE_USER")
|
// if (to.name == "login" && token) {
|
||||||
|
// next("/")
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
|
||||||
if (to.name == "login" && token) {
|
// if (to.name != "login" && !token) {
|
||||||
next("/")
|
// next("/login") //跳转
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (to.name != "login" && !token) {
|
|
||||||
next("/login") //跳转
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
next() //放行
|
next() //放行
|
||||||
})
|
})
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
Loading…
Reference in New Issue