(Update townDetail components with optimized API parameters and added sotre_id for improved accuracy)
This commit is contained in:
parent
478fd60fb0
commit
439e2aeade
14
src/api.js
14
src/api.js
|
|
@ -8,8 +8,8 @@ let expire = localStorage.getItem("TRADE_USER") ? JSON.parse(localStorage.getIte
|
||||||
|
|
||||||
// 创建axios 实例
|
// 创建axios 实例
|
||||||
const instacne = axios.create({
|
const instacne = axios.create({
|
||||||
// baseURL: "http://192.168.1.22:8545",
|
baseURL: "http://192.168.1.22:8545",
|
||||||
baseURL: "https://multi-store.lihaink.cn",
|
// baseURL: "https://multi-store.lihaink.cn",
|
||||||
// baseURL: "https://shop.lihaink.cn/",
|
// baseURL: "https://shop.lihaink.cn/",
|
||||||
timeout: 30000,
|
timeout: 30000,
|
||||||
});
|
});
|
||||||
|
|
@ -70,15 +70,21 @@ export function getUserNumApi(params) {
|
||||||
|
|
||||||
|
|
||||||
export function getOrderNumApi(params) {
|
export function getOrderNumApi(params) {
|
||||||
return instacne.get('/api/dataview/order_statistics', { params })
|
return instacne.get('/statistics/store_order_day', { params })
|
||||||
}
|
}
|
||||||
export function getSalesRankApi(params) {
|
export function getSalesRankApi(params) {
|
||||||
return instacne.get('/statistics/sales_ranking', { params })
|
return instacne.get('/statistics/sales_ranking', { params })
|
||||||
}
|
}
|
||||||
|
export function getSotreCountApi(params) {
|
||||||
|
return instacne.get('/statistics/sotre_count', { params })
|
||||||
|
}
|
||||||
|
export function getProductCountSotreCountApi(params) {
|
||||||
|
return instacne.get('/statistics/product_count_sotre_count', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export function getTodayOrderAmountApi(params) {
|
export function getTodayOrderAmountApi(params) {
|
||||||
return instacne.get('/api/dataview/curr_day_order_amount', { params })
|
return instacne.get('/statistics/store_order_day_two', { params })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,117 +1,63 @@
|
||||||
<template>
|
<template>
|
||||||
<img src="/static/index/CJYHTJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
<img class="img-cls" src="/static/town/CJYH.png" alt="">
|
||||||
|
<div id="transactionUsers" class="transactionUsers"></div>
|
||||||
<div style="height:5vh;"></div>
|
|
||||||
<div class="towns">
|
|
||||||
<div class="town-li act">{{ area.area_name }} </div>
|
|
||||||
|
|
||||||
<div class="town-li" :class="{ act: item.street_code == props.areaCodes.streetCode }"
|
|
||||||
v-for="(item, index) in streetList" @click="hdClick(item.street_code)">{{ item.street_name }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="transactionUsers" v-if="showChart" style="width: 100%;height: 30vh;">
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, defineProps } from "vue"
|
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { getUserTradeCountApi } from "@/api.js"
|
import { getUserTradeCountApi } from "@/api.js"
|
||||||
|
import { areaObj } from '../../store';
|
||||||
const props = defineProps({
|
import { useRoute } from 'vue-router';
|
||||||
areaCodes: Object,
|
let areaStore = areaObj()
|
||||||
|
const route=useRoute()
|
||||||
|
getUserTradeCountApi(
|
||||||
|
{ ...areaStore.area, date: areaStore.date,sotre_id:route.query.sotre_id }
|
||||||
|
).then(res => {
|
||||||
|
// res.data.forEach(item => {
|
||||||
|
// transactionUsersTown.xAxis[0]
|
||||||
|
// transactionUsersTown.xAxis[0].data.push(item.date.slice(5, item.date.length))
|
||||||
|
// transactionUsersTown.series[0].data.push(item.visitUser)
|
||||||
|
// transactionUsersTown.series[1].data.push(item.orderUser)
|
||||||
|
// transactionUsersTown.series[2].data.push(item.payOrderUser)
|
||||||
|
// })
|
||||||
|
transactionUsersTown.xAxis[0].data = res.data.x;
|
||||||
|
res.data.series.reverse();
|
||||||
|
res.data.series.forEach((item, index) => {
|
||||||
|
transactionUsersTown.series[index].data = item.value;
|
||||||
|
});
|
||||||
|
initCharts('transactionUsers', transactionUsersTown)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
const hdClick = (code) => {
|
|
||||||
props.areaCodes.streetCode = code
|
|
||||||
init()
|
|
||||||
}
|
|
||||||
|
|
||||||
const streetList = reactive([])
|
|
||||||
const area = reactive({
|
|
||||||
"area_code": "",
|
|
||||||
"area_name": ""
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
|
|
||||||
getUserTradeCountApi(props.areaCodes).then(res => {
|
|
||||||
|
|
||||||
showChart.value = false
|
|
||||||
option.xAxis[0].data.splice(0, option.xAxis[0].data.length)
|
|
||||||
option.series[0].data.splice(0, option.series[0].data.length)
|
|
||||||
option.series[1].data.splice(0, option.series[1].data.length)
|
|
||||||
option.series[2].data.splice(0, option.series[2].data.length)
|
|
||||||
|
|
||||||
if (!streetList.length) {
|
|
||||||
|
|
||||||
res.data.streetList.forEach(item => {
|
|
||||||
streetList.push(item)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
area.area_name = res.data.area.area_name
|
|
||||||
res.data.userTradeCountList.forEach(item => {
|
|
||||||
|
|
||||||
option.xAxis[0].data.push(item.date.slice(5, item.date.length))
|
|
||||||
option.series[0].data.push(item.visitUser)
|
|
||||||
|
|
||||||
option.series[1].data.push(item.orderUser)
|
|
||||||
option.series[2].data.push(item.payOrderUser)
|
|
||||||
|
|
||||||
})
|
|
||||||
showChart.value = true
|
|
||||||
setTimeout(() => {
|
|
||||||
|
|
||||||
initCharts('transactionUsers', option)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}, 10)
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const initCharts = (tag, option) => {
|
const initCharts = (tag, option) => {
|
||||||
var chartDom = document.getElementById(tag);
|
var chartDom = document.getElementById(tag);
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
const transactionUsersTown = {
|
||||||
const showChart = ref(false)
|
color: ['#4B5FDB', '#10C1CE', '#583936'],
|
||||||
|
|
||||||
const option = reactive({
|
|
||||||
color: ['#015989', '#583936', '#416979'],
|
|
||||||
title: {
|
title: {
|
||||||
text: ''
|
text: ''
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
backgroundColor: "#1F3948",
|
|
||||||
borderColor: "#1F3948",
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross',
|
type: 'cross',
|
||||||
label: {
|
label: {
|
||||||
backgroundColor: '#6a7985'
|
backgroundColor: '#6a7985'
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['访客人数', '下单人数', '支付人数',],
|
data: ['昨日', '今日'],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "white"
|
color: "white"
|
||||||
}
|
},
|
||||||
|
icon: 'cricle',
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 10,
|
||||||
|
top: '2%'
|
||||||
},
|
},
|
||||||
|
|
||||||
grid: {
|
grid: {
|
||||||
|
|
@ -124,14 +70,12 @@ const option = reactive({
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
|
data: [],
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
color: '#d1f9fb',
|
color: '#d1f9fb',
|
||||||
rotate: 40, // 文本旋转角度
|
rotate: 40, // 文本旋转角度
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
data: []
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
|
|
@ -148,9 +92,8 @@ const option = reactive({
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '访客人数',
|
name: '昨日',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 0
|
width: 0
|
||||||
|
|
@ -161,11 +104,11 @@ const option = reactive({
|
||||||
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'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
|
|
@ -175,9 +118,8 @@ const option = reactive({
|
||||||
data: []
|
data: []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '下单人数',
|
name: '今日',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 0
|
width: 0
|
||||||
|
|
@ -188,38 +130,11 @@ const option = reactive({
|
||||||
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: '#10C1CE'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#005886'
|
color: '#0294E0'
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '支付人数',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 0
|
|
||||||
},
|
|
||||||
showSymbol: false,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#005685'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#355969'
|
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
|
|
@ -228,41 +143,58 @@ const option = reactive({
|
||||||
},
|
},
|
||||||
data: []
|
data: []
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// name: '支付人数',
|
||||||
|
// type: 'line',
|
||||||
|
// smooth: true,
|
||||||
|
// lineStyle: {
|
||||||
|
// width: 0
|
||||||
|
// },
|
||||||
|
// showSymbol: false,
|
||||||
|
// areaStyle: {
|
||||||
|
// opacity: 0.8,
|
||||||
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
// {
|
||||||
|
// offset: 0,
|
||||||
|
// color: '#583936'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// offset: 1,
|
||||||
|
// color: '#8b7042'
|
||||||
|
// }
|
||||||
|
// ])
|
||||||
|
// },
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series'
|
||||||
|
// },
|
||||||
|
// data: []
|
||||||
|
// },
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
})
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
init()
|
|
||||||
})
|
|
||||||
|
|
||||||
|
let a = 0
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.towns {
|
.transactionUsers {
|
||||||
width: 50vw;
|
position: absolute;
|
||||||
display: flex;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
height: 40vh;
|
||||||
padding: 1vh 1vw;
|
top: 5vh;
|
||||||
flex-wrap: wrap;
|
}
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.town-li {
|
.img-cls {
|
||||||
margin-top: 10px;
|
width: 98%;
|
||||||
color: #A0C7D5;
|
height: 45vh;
|
||||||
padding: 5px 10px;
|
position: absolute;
|
||||||
border-radius: 7px 10px;
|
top: 50%;
|
||||||
font-size: 12px;
|
left: 50%;
|
||||||
border: 1px solid #3A91A5;
|
transform: translate(-50%, -50%);
|
||||||
// margin-left: 2vw;
|
|
||||||
justify-content: fl;
|
|
||||||
margin-left: 2vw;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.act {
|
|
||||||
background-color: #072C3E;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -32,7 +32,7 @@ const configs = reactive(
|
||||||
)
|
)
|
||||||
|
|
||||||
getOrderNumApi(props.areaCodes).then(res => {
|
getOrderNumApi(props.areaCodes).then(res => {
|
||||||
res.data.list.forEach(item => {
|
res.data.forEach(item => {
|
||||||
configs.data.push(
|
configs.data.push(
|
||||||
[item.street_name, item.dayOrderCount, item.dayOrderAmount, item.monthOrderCount, item.monthOrderAmount]
|
[item.street_name, item.dayOrderCount, item.dayOrderAmount, item.monthOrderCount, item.monthOrderAmount]
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -14,19 +14,13 @@ const props = defineProps({
|
||||||
})
|
})
|
||||||
|
|
||||||
getTodayOrderAmountApi(props.areaCodes).then(res => {
|
getTodayOrderAmountApi(props.areaCodes).then(res => {
|
||||||
|
res.data.forEach(item => {
|
||||||
|
|
||||||
let list = res.data.geoStreetList
|
|
||||||
list.forEach(item => {
|
|
||||||
configs2.data.push([
|
configs2.data.push([
|
||||||
item.street_name,
|
item.street_name,
|
||||||
item.today_order_amount,
|
item.today_order_amount,
|
||||||
item.yesterday_order_amount
|
item.yesterday_order_amount
|
||||||
])
|
])
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const configs2 = reactive(
|
const configs2 = reactive(
|
||||||
|
|
|
||||||
|
|
@ -13,27 +13,26 @@
|
||||||
<div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
|
<div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
|
||||||
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||||
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
|
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
|
||||||
data?.totalProductCounInfo.todayProductCount }}</span>
|
data.totalProductCounInfo.todayProductCount }}</span>
|
||||||
件</div>
|
件</div>
|
||||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;">
|
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||||
<div style="font-size: 12px;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="">
|
||||||
|
|
||||||
昨日数据： {{ data?.totalProductCounInfo.yestertodayProductCount }}
|
总数据： {{ data.totalProductCounInfo.yestertodayProductCount }}
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 12px;position: relative;display: flex;align-items: center;">
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
周环比: {{ percent(data?.totalProductCounInfo.weeklyProductTotalGrowthRate) }}
|
周环比: {{ data.totalProductCounInfo.weeklyProductTotalGrowthRate }}%
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="product" style="">
|
<div class="product" style="">
|
||||||
<div class="bg">
|
<div class="bg">
|
||||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||||
<div class="bubble"></div>
|
<div class="bubble"></div>
|
||||||
<div class="bubble1"></div>
|
<div class="bubble1"></div>
|
||||||
<div class="bubble2"></div>
|
<div class="bubble2"></div>
|
||||||
|
|
@ -44,18 +43,18 @@
|
||||||
<img src="/static/index/JRC.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
<img src="/static/index/JRC.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||||
|
|
||||||
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
|
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
|
||||||
data?.newProductCountInfo?.todayNewProductCount }}</span>
|
data.newProductCountInfo.todayNewProductCount }}</span>
|
||||||
件</div>
|
件</div>
|
||||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;">
|
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||||
<div style="font-size: 12px;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="">
|
||||||
|
|
||||||
昨日数据： {{ data?.newProductCountInfo?.yestertodayNewProductCount }}
|
昨日数据： {{ data.newProductCountInfo.yestertodayNewProductCount }}
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 12px;position: relative;display: flex;align-items: center;">
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
周环比: {{ percent(data?.newProductCountInfo?.weeklyNewProductTotalGrowthRate) }}
|
周环比: {{ data.newProductCountInfo.weeklyNewProductTotalGrowthRate }}%
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -63,7 +62,7 @@
|
||||||
<div class="product" style="">
|
<div class="product" style="">
|
||||||
<div class="bg">
|
<div class="bg">
|
||||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||||
<div class="bubble"></div>
|
<div class="bubble"></div>
|
||||||
<div class="bubble1"></div>
|
<div class="bubble1"></div>
|
||||||
<div class="bubble2"></div>
|
<div class="bubble2"></div>
|
||||||
|
|
@ -72,19 +71,24 @@
|
||||||
<div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
|
<div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
|
||||||
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
|
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
|
||||||
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||||
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
|
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">
|
||||||
data?.merchantCountInfo?.todayMerchantCount }}</span>
|
|
||||||
个</div>
|
{{ data.merchantCountInfo.todayMerchantCount }}
|
||||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;">
|
|
||||||
<div style="font-size: 12px;position: relative;display: flex;align-items: center;">
|
|
||||||
|
</span>
|
||||||
|
间</div>
|
||||||
|
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||||
|
<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="">
|
||||||
|
|
||||||
昨日数据： {{ data?.merchantCountInfo?.yestertodayMerchantCount }}
|
总数据：
|
||||||
|
{{ data.merchantCountInfo.yestertodayMerchantCount }}
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 12px;position: relative;display: flex;align-items: center;">
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
周环比: {{ percent(data?.merchantCountInfo?.weeklyMerchantGrowthRate) }}
|
周环比: {{ data.merchantCountInfo.weeklyMerchantGrowthRate }}%
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -92,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>周环比：{{ percent(viewData.lastWeekRate) }}</div>
|
<!-- <div>周环比：{{ viewData.lastWeekRate }}%</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -106,69 +111,80 @@
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, defineProps, onMounted } from "vue"
|
|
||||||
import Remake from "@/components/Remake.vue"
|
|
||||||
import { getProductCountApi, getViewCountApi } from "@/api.js"
|
import { getProductCountApi, getViewCountApi } from "@/api.js"
|
||||||
|
import mitt from '@/view/utils/mitt.js'
|
||||||
|
import { ref, reactive, defineProps, onUnmounted } from "vue"
|
||||||
|
import Remake from "@/components/Remake.vue"
|
||||||
|
import { areaObj } from "../../store";
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
const areaStore = areaObj()
|
||||||
|
const route=useRoute()
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
areaCodes: Object,
|
code: Object,
|
||||||
})
|
})
|
||||||
|
const data = reactive(
|
||||||
|
|
||||||
|
|
||||||
let data = reactive({
|
|
||||||
|
|
||||||
"totalProductCounInfo": {
|
|
||||||
"todayProductCount": 20,
|
|
||||||
"yestertodayProductCount": 292,
|
|
||||||
"weeklyProductTotalGrowthRate": "9.42"
|
|
||||||
},
|
|
||||||
"newProductCountInfo": {
|
|
||||||
"todayNewProductCount": 0,
|
|
||||||
"yestertodayNewProductCount": 0,
|
|
||||||
"weeklyNewProductTotalGrowthRate": "-1.00"
|
|
||||||
},
|
|
||||||
"merchantCountInfo": {
|
|
||||||
"todayMerchantCount": 22,
|
|
||||||
"yestertodayMerchantCount": 22,
|
|
||||||
"weeklyMerchantGrowthRate": "-0.04"
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
let viewData = reactive(
|
|
||||||
{
|
{
|
||||||
"today": 0,
|
"totalProductCounInfo": {
|
||||||
"yesterday": 0,
|
"todayProductCount": 0,
|
||||||
"lastWeekRate": 0
|
"yestertodayProductCount": 0,
|
||||||
|
"weeklyProductTotalGrowthRate": 6.6842
|
||||||
|
},
|
||||||
|
"newProductCountInfo": {
|
||||||
|
"todayNewProductCount": 0,
|
||||||
|
"yestertodayNewProductCount": 0,
|
||||||
|
"weeklyNewProductTotalGrowthRate": -270
|
||||||
|
},
|
||||||
|
"merchantCountInfo": {
|
||||||
|
"todayMerchantCount": 22,
|
||||||
|
"yestertodayMerchantCount": 22,
|
||||||
|
"weeklyMerchantGrowthRate": 0.0476
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
)
|
)
|
||||||
|
const viewData = reactive({
|
||||||
|
lastWeekRate: -0,
|
||||||
|
today: 0,
|
||||||
|
yesterday: 7,
|
||||||
|
dayPayPrice: 0
|
||||||
|
})
|
||||||
|
|
||||||
const clone = (data1, data2) => {
|
getProductCountApi({
|
||||||
for (let key in data1) {
|
...areaStore.area, date: areaStore.date,sotre_id:route.query.sotre_id
|
||||||
data2[key] = data1[key]
|
}).then(res => {
|
||||||
|
|
||||||
|
for (let key in res.data) {
|
||||||
|
data[key] = res.data[key]
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
getProductCountApi(props.areaCodes).then(res => {
|
|
||||||
data = reactive(res.data)
|
|
||||||
clone(res.data, data)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
getViewCountApi(props.areaCodes).then(res => {
|
const initViewCount = ()=>{
|
||||||
clone(res.data, viewData)
|
getViewCountApi({
|
||||||
|
...areaStore.area, date: areaStore.date,sotre_id:route.query.sotre_id
|
||||||
|
}).then(res => {
|
||||||
|
for (let key in res.data) {
|
||||||
|
viewData[key] = res.data[key]
|
||||||
|
}
|
||||||
|
mitt.emit("header-title", res.data.title)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
initViewCount()
|
||||||
|
let timer1 = setInterval(()=>{
|
||||||
|
initViewCount();
|
||||||
|
}, 5000)
|
||||||
|
|
||||||
|
onUnmounted(()=>{
|
||||||
|
clearInterval(timer1)
|
||||||
})
|
})
|
||||||
|
|
||||||
const percent = (num) => {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (num) + "%"
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.product-list {
|
.product-list {
|
||||||
|
|
@ -263,6 +279,7 @@ const percent = (num) => {
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes bubbleAnimation {
|
@keyframes bubbleAnimation {
|
||||||
0% {
|
0% {
|
||||||
top: 7vh;
|
top: 7vh;
|
||||||
|
|
@ -370,4 +387,18 @@ const percent = (num) => {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes jump {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -12,8 +12,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="color: white;display: flex; justify-content: center;
|
<div style="color: white;display: flex; justify-content: center;">
|
||||||
">
|
|
||||||
<div class="page-num" v-for="(item, index) in pageNum" @click="pageFN(index + 1)"> {{ index + 1 }}</div>
|
<div class="page-num" v-for="(item, index) in pageNum" @click="pageFN(index + 1)"> {{ index + 1 }}</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -22,7 +21,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { ref, reactive, defineProps } from "vue"
|
import { ref, reactive, defineProps } from "vue"
|
||||||
import { getUserNumApi } from "@/api.js"
|
import { getUserNumApi, getSotreCountApi } from "@/api.js"
|
||||||
|
import { areaObj } from '@/store/index.js'
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -54,7 +55,8 @@ const initCharts = (tag, option) => {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
// 平台用户总量统计option
|
// 平台用户总量统计option
|
||||||
let Option = {
|
|
||||||
|
const userChartOption = {
|
||||||
color: [
|
color: [
|
||||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
{ offset: 1, color: 'transparent' },
|
{ offset: 1, color: 'transparent' },
|
||||||
|
|
@ -111,7 +113,7 @@ let Option = {
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '新增用户数量',
|
name: '新增会员数量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
|
|
@ -122,7 +124,9 @@ let Option = {
|
||||||
borderColor: "#384FB4",
|
borderColor: "#384FB4",
|
||||||
},
|
},
|
||||||
|
|
||||||
|
backgroundStyle: {
|
||||||
|
color: ['red']
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '访问用户数量',
|
name: '访问用户数量',
|
||||||
|
|
@ -137,7 +141,7 @@ let Option = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '累计用户数量',
|
name: '累计会员数量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
|
|
@ -283,22 +287,28 @@ let merchatCountList = []
|
||||||
let merchantTotalCount = []
|
let merchantTotalCount = []
|
||||||
|
|
||||||
getUserNumApi(
|
getUserNumApi(
|
||||||
props.areaCodes
|
{
|
||||||
|
...areaStore.area,
|
||||||
|
streetCode: props.code, date: areaStore.date
|
||||||
|
}
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
// merchatCountList = res.data.merchatCountList
|
||||||
|
// merchantTotalCount = res.data.merchantTotalCount
|
||||||
|
// let { userCountlist } = res.data
|
||||||
|
res.data.forEach(item => {
|
||||||
|
userChartOption.series[0].data.push(item.newUserCount)
|
||||||
|
userChartOption.series[1].data.push(item.viewUserCount)
|
||||||
|
userChartOption.series[2].data.push(item.totalUserCount)
|
||||||
|
});
|
||||||
|
initCharts('user', userChartOption)
|
||||||
|
})
|
||||||
|
getSotreCountApi().then(res => {
|
||||||
merchatCountList = res.data.merchatCountList
|
merchatCountList = res.data.merchatCountList
|
||||||
merchantTotalCount = res.data.merchantTotalCount
|
merchantTotalCount = res.data.merchantTotalCount
|
||||||
let { userCountlist } = res.data
|
pageNum.value = Math.ceil(merchantTotalCount / 8)
|
||||||
userCountlist.forEach(item => {
|
|
||||||
Option.series[0].data.push(item.newUserCount)
|
|
||||||
Option.series[1].data.push(item.viewUserCount)
|
|
||||||
Option.series[2].data.push(item.totalUserCount)
|
|
||||||
});
|
|
||||||
pageNum.value = Math.ceil(merchatCountList.length / 8)
|
|
||||||
initCharts('user', Option)
|
|
||||||
initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
|
initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
|
||||||
})
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
const pageFN = (Num) => {
|
const pageFN = (Num) => {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, defineProps } from "vue"
|
import { ref, reactive, defineProps } from "vue"
|
||||||
import { getSalesRankApi } from "@/api.js"
|
import { getProductCountSotreCountApi } from "@/api.js"
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -56,7 +56,7 @@ const addFn = (data) => {
|
||||||
`<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.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=' 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.total_sales}
|
||||||
<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>`,
|
||||||
|
|
||||||
|
|
@ -223,15 +223,15 @@ const initStoreOption = (pageData, total) => {
|
||||||
let pageNum = ref(0)
|
let pageNum = ref(0)
|
||||||
|
|
||||||
|
|
||||||
getSalesRankApi(props.areaCodes).then(res => {
|
getProductCountSotreCountApi(props.areaCodes).then(res => {
|
||||||
productRankingList = res.data.productRankingList
|
productRankingList = res.data.productRankingList
|
||||||
merchantRankingList = res.data.merchantRankingList
|
// merchantRankingList = res.data.merchantRankingList
|
||||||
townProductCountList = res.data.townProductCountList
|
townProductCountList = res.data.townProductCountList
|
||||||
productRankingTotal.value = res.data.productRankingTotal
|
productRankingTotal.value = res.data.productRankingTotal
|
||||||
townProductCount.value = res.data.townProductCount
|
townProductCount.value = res.data.townProductCount
|
||||||
merchantRankingTotal.value = res.data.merchantRankingTotal
|
// merchantRankingTotal.value = res.data.merchantRankingTotal
|
||||||
config3.data = addFn(productRankingList)
|
config3.data = addFn(productRankingList)
|
||||||
config.data = addFn(merchantRankingList)
|
// config.data = addFn(merchantRankingList)
|
||||||
pageNum.value = Math.ceil(townProductCountList.length / 8)
|
pageNum.value = Math.ceil(townProductCountList.length / 8)
|
||||||
initStoreOption(townProductCountList.slice(0, 8), townProductCount.value)
|
initStoreOption(townProductCountList.slice(0, 8), townProductCount.value)
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box" :style="{ opacity: showLoading ? 0 : 1 }">
|
<div class="box" :style="{ opacity: showLoading ? 0 : 1 }">
|
||||||
<!-- <div class="body">
|
<div class="body">
|
||||||
<div class="l">
|
<div class="l">
|
||||||
<topLeft :areaCodes="areaCodes" />
|
<topLeft :areaCodes="areaCodes" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -25,34 +25,34 @@
|
||||||
<div class="r">
|
<div class="r">
|
||||||
<bottomRight :areaCodes="areaCodes"></bottomRight>
|
<bottomRight :areaCodes="areaCodes"></bottomRight>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
// import { ref, reactive } from "vue"
|
import { ref, reactive } from "vue"
|
||||||
// import topLeft from "@/components/index/topLeft.vue"
|
import topLeft from "@/components/index/topLeft.vue"
|
||||||
// import topCenter from "@/components/index/topCenter.vue"
|
import topCenter from "@/components/index/topCenter.vue"
|
||||||
// import topRight from "@/components/index/topRight.vue"
|
import topRight from "@/components/index/topRight.vue"
|
||||||
// import bottomLeft from "@/components/index/bottomLeft.vue"
|
import bottomLeft from "@/components/index/bottomLeft.vue"
|
||||||
// import bottomCenter from "@/components/index/bottomCenter.vue"
|
import bottomCenter from "@/components/index/bottomCenter.vue"
|
||||||
// import bottomRight from "@/components/index/bottomRight.vue"
|
import bottomRight from "@/components/index/bottomRight.vue"
|
||||||
// import { areaObj } from '@/store/index.js'
|
import { areaObj } from '@/store/index.js'
|
||||||
// import { useRouter } from "vue-router"
|
import { useRouter } from "vue-router"
|
||||||
// const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// const showLoading = ref(true)
|
const showLoading = ref(true)
|
||||||
// const areaStore = areaObj()
|
const areaStore = areaObj()
|
||||||
// const areaCodes = reactive({
|
const areaCodes = reactive({
|
||||||
// ...areaStore.area
|
...areaStore.area
|
||||||
// })
|
})
|
||||||
|
|
||||||
|
|
||||||
// setTimeout(() => {
|
setTimeout(() => {
|
||||||
// showLoading.value = false
|
showLoading.value = false
|
||||||
// }, 1000);
|
}, 1000);
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@keyframes jump {
|
@keyframes jump {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue