weipengfei
/
mer-tradescreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

This commit is contained in:
weipengfei 2024-06-18 19:05:36 +08:00
parent c6c8f3086e
commit 911b859bdf
11 changed files with 101 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/App.vue
View File

@ -6,12 +6,31 @@ const areaStroe = areaObj()
if (localStorage.getItem("TRADE_USER")) { if (localStorage.getItem("TRADE_USER")) {
let userInfo = JSON.parse(localStorage.getItem('TRADE_USER')) let userInfo = JSON.parse(localStorage.getItem('TRADE_USER'))
areaStroe.changeUserInfo(userInfo) areaStroe.changeUserInfo(userInfo)
let { area_code, street_code } = userInfo.user let { area_code, street_code } = userInfo.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 })
}
@ -29,9 +48,9 @@ if (localStorage.getItem("TRADE_USER")) {
</script> </script>
<template> <template>
<div class="main-box"> <div class="main-box">
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
@ -40,14 +59,14 @@ if (localStorage.getItem("TRADE_USER")) {
@import '/static/font/font.css'; @import '/static/font/font.css';
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.main-box { .main-box {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #000C14; background-color: #000C14;
overflow: hidden; overflow: hidden;
} }
</style> </style>

19
src/api.js
View File

@ -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) {

11
src/components/Remake.vue
View File

@ -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() {

4
src/components/header.vue
View File

@ -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;"

29
src/components/townDetail/bottomCenter.vue
View File

@ -12,11 +12,11 @@ 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)
transactionUsersTown.series[1].data.push(item.orderUser) transactionUsersTown.series[1].data.push(item.orderUser )
transactionUsersTown.series[2].data.push(item.payOrderUser) transactionUsersTown.series[2].data.push(item.payOrderUser)
}) })
initCharts('transactionUsers', transactionUsersTown) initCharts('transactionUsers', transactionUsersTown)
@ -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'
} }
]) ])
}, },

21
src/components/townDetail/bottomRight.vue
View File

@ -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
} }

16
src/components/townDetail/topCenter.vue
View File

@ -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({

6
src/components/townDetail/topLeft.vue
View File

@ -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'

20
src/router/index.js
View File

@ -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() //放行
}) })

BIN
static/index/SSLL.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/index/SSSK.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB