After Width: | Height: | Size: 623 B |
After Width: | Height: | Size: 567 B |
After Width: | Height: | Size: 582 B |
After Width: | Height: | Size: 709 B |
After Width: | Height: | Size: 560 B |
After Width: | Height: | Size: 709 B |
After Width: | Height: | Size: 225 B |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 667 B |
After Width: | Height: | Size: 359 B |
After Width: | Height: | Size: 364 B |
After Width: | Height: | Size: 796 B |
After Width: | Height: | Size: 762 B |
After Width: | Height: | Size: 488 B |
After Width: | Height: | Size: 442 B |
After Width: | Height: | Size: 628 B |
After Width: | Height: | Size: 709 B |
After Width: | Height: | Size: 816 B |
After Width: | Height: | Size: 649 B |
|
@ -30,7 +30,7 @@ import { Push } from '@/common/push'
|
|||
|
||||
|
||||
var connection = new Push({
|
||||
url: 'ws://192.168.1.10:3131', // websocket地址
|
||||
url: 'ws://192.168.1.24:3131', // websocket地址
|
||||
app_key: 'aaea61749929eb53a4bd75a1474c1d27',
|
||||
});
|
||||
// 假设用户uid为1
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div style="position: relative;margin-right: 21px; margin-top: 20px">
|
||||
<img src="/static/a/bg.png" style="width: ;position: absolute;height: 50px;width: 100%;" alt="">
|
||||
<img src="/static/a/Y.png" style="position: absolute;" alt="">
|
||||
<img :src="`/static/a/${data.icon}.png`" style="position: absolute;top: 50%;transform: translate(15px,-30%);"
|
||||
<img :src="`/index/${data.icon}.png`" style="position: absolute;top: 50%;transform: translate(15px,-30%);"
|
||||
alt="">
|
||||
<div style="position: relative;padding: 0 10px;top: 5px;margin-left: 45px;">
|
||||
<div style="font-size: 16px;font-family: FZCYJ;color: #A9EDFC;">{{ data.num }}
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div class="headers">
|
||||
<div class="logo">
|
||||
<div class="logo" >
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tab" v-if="role != 1">
|
||||
<div class="tab-li">
|
||||
|
|
|
@ -3,9 +3,9 @@
|
|||
|
||||
<div style="height:5vh;"></div>
|
||||
<div class="towns">
|
||||
<div class="town-li act">{{ area.area_name }} </div>
|
||||
<div class="town-li act" @click="hdClick1">{{ area.area_name }} </div>
|
||||
|
||||
<div class="town-li" :class="{ act: item.street_code == props.areaCodes.streetCode }"
|
||||
<div class="town-li" :class="{ act: item.street_code == params.streetCode }"
|
||||
v-for="(item, index) in streetList" @click="hdClick(item.street_code)">{{ item.street_name }}
|
||||
</div>
|
||||
|
||||
|
@ -27,11 +27,37 @@ const props = defineProps({
|
|||
})
|
||||
|
||||
|
||||
const deepCopy=(obj)=> {
|
||||
// 如果是基本数据类型或者 null,则直接返回
|
||||
if (typeof obj !== 'object' || obj === null) {
|
||||
return obj;
|
||||
}
|
||||
|
||||
// 根据对象的类型进行分别处理
|
||||
let result;
|
||||
if (obj instanceof Array) {
|
||||
result = [];
|
||||
for (let i = 0; i < obj.length; i++) {
|
||||
result[i] = deepCopy(obj[i]);
|
||||
}
|
||||
} else {
|
||||
result = {};
|
||||
for (let key in obj) {
|
||||
result[key] = deepCopy(obj[key]);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
let params=deepCopy( props.areaCodes)
|
||||
const hdClick = (code) => {
|
||||
props.areaCodes.streetCode = code
|
||||
params.streetCode = code
|
||||
init()
|
||||
}
|
||||
const hdClick1 = () => {
|
||||
params.streetCode = ''
|
||||
init()
|
||||
}
|
||||
|
||||
const streetList = reactive([])
|
||||
const area = reactive({
|
||||
"area_code": "",
|
||||
|
@ -41,7 +67,7 @@ const area = reactive({
|
|||
|
||||
const init = () => {
|
||||
|
||||
getUserTradeCountApi(props.areaCodes).then(res => {
|
||||
getUserTradeCountApi(params).then(res => {
|
||||
|
||||
showChart.value = false
|
||||
option.xAxis[0].data.splice(0, option.xAxis[0].data.length)
|
||||
|
|
|
@ -156,7 +156,7 @@ let Option = {
|
|||
// 地方店铺数量统计option
|
||||
let angle = 0;//角度,用来做简单的动画效果的
|
||||
|
||||
let getRange = (Num) => {
|
||||
let getRange = (Num,colors) => {
|
||||
return {
|
||||
backgroundColor: "#061740",
|
||||
title: {
|
||||
|
@ -228,15 +228,15 @@ let getRange = (Num) => {
|
|||
//外环发光
|
||||
borderWidth: 0.5,
|
||||
shadowBlur: 20,
|
||||
borderColor: '#4bf3f9',
|
||||
borderColor: colors,
|
||||
shadowColor: '#9bfeff',
|
||||
color: { // 圆环的颜色
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#4bf3f9', // 0% 处的颜色
|
||||
color: colors, // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#4bf3f9', // 100% 处的颜色
|
||||
color: colors, // 100% 处的颜色
|
||||
}]
|
||||
},
|
||||
}
|
||||
|
@ -266,12 +266,12 @@ let getRange = (Num) => {
|
|||
const storeData = reactive([])
|
||||
const initStoreOption = (pageData, total) => {
|
||||
storeData.splice(0, storeData.length);
|
||||
pageData.forEach(item => {
|
||||
pageData.forEach((item,index) => {
|
||||
let range = ((item.merchant_count / total).toFixed(2) * 100)
|
||||
storeData.push({
|
||||
name: item.street_name,
|
||||
num: item.merchant_count,
|
||||
option: getRange(range)
|
||||
option: getRange(range, index%2?"#4B5FDB":"#4bf3f9")
|
||||
})
|
||||
})
|
||||
storeData.forEach((item, index) => {
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<dv-scroll-board v-show="!showGoods" :config="config" style="height: 17vh;margin-left: 1%;" />
|
||||
</div>
|
||||
<div class="user" style="width: 98%; height: 25vh;" v-else>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="storeNum">
|
||||
<div class="tit">
|
||||
|
@ -55,13 +55,15 @@ const addFn = (data) => {
|
|||
data.forEach((item, i) => {
|
||||
list.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('/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='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=' position: relative;line-height:30px;text-align:center' >${item.total_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="">
|
||||
</div>`,
|
||||
|
||||
<img src="/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
|
||||
|
||||
</div>`,
|
||||
|
||||
],
|
||||
|
||||
|
@ -94,7 +96,7 @@ const config = reactive({
|
|||
// 地方商品数量统计
|
||||
let angle = 0;//角度,用来做简单的动画效果的
|
||||
|
||||
let getRange = (Num) => {
|
||||
let getRange = (Num, colors) => {
|
||||
return {
|
||||
backgroundColor: "#061740",
|
||||
title: {
|
||||
|
@ -166,15 +168,15 @@ let getRange = (Num) => {
|
|||
//外环发光
|
||||
borderWidth: 0.5,
|
||||
shadowBlur: 20,
|
||||
borderColor: '#4bf3f9',
|
||||
borderColor: colors,
|
||||
shadowColor: '#9bfeff',
|
||||
color: { // 圆环的颜色
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#4bf3f9', // 0% 处的颜色
|
||||
color: colors, // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#4bf3f9', // 100% 处的颜色
|
||||
color: colors, // 100% 处的颜色
|
||||
}]
|
||||
},
|
||||
}
|
||||
|
@ -208,12 +210,12 @@ const initCharts = (tag, option) => {
|
|||
const storeData = reactive([])
|
||||
const initStoreOption = (pageData, total) => {
|
||||
storeData.splice(0, storeData.length);
|
||||
pageData.forEach(item => {
|
||||
let range = (parseInt((item.product_count / total)*100))
|
||||
pageData.forEach((item, index) => {
|
||||
let range = (parseInt((item.product_count / total) * 100))
|
||||
storeData.push({
|
||||
name: item.street_name,
|
||||
num: item.product_count,
|
||||
option: getRange(range)
|
||||
option: getRange(range, index % 2 ? "#4B5FDB" : "#4bf3f9")
|
||||
})
|
||||
|
||||
})
|
||||
|
@ -260,14 +262,14 @@ const pageFN = (Num) => {
|
|||
|
||||
|
||||
globalEventBus.on('indextopright', data => {
|
||||
pageFN( Number(data.num) )
|
||||
pageFN(Number(data.num))
|
||||
})
|
||||
|
||||
globalEventBus.on('indextopright-1', data => {
|
||||
showGoods.value=true
|
||||
showGoods.value = true
|
||||
})
|
||||
globalEventBus.on('indextopright-2', data => {
|
||||
showGoods.value=false
|
||||
showGoods.value = false
|
||||
})
|
||||
|
||||
|
||||
|
|
|
@ -605,7 +605,7 @@ globalEventBus.on('header5-3-4', data => {
|
|||
.btn {
|
||||
color: white;
|
||||
// border: 1px solid #BF6D5D;
|
||||
background-image: url('static/index/btn.png');
|
||||
background-image: url('/static/index/btn.png');
|
||||
background-size: 100% 100%;
|
||||
padding: 1vh 1vw;
|
||||
border-radius: 20px;
|
||||
|
|
|
@ -897,7 +897,7 @@ globalEventBus.on('header4-1-1', data => {
|
|||
.btn {
|
||||
color: white;
|
||||
// border: 1px solid #BF6D5D;
|
||||
background-image: url('static/index/btn.png');
|
||||
background-image: url('/static/index/btn.png');
|
||||
background-size: 100% 100%;
|
||||
padding: 1vh 1vw;
|
||||
border-radius: 20px;
|
||||
|
@ -907,7 +907,6 @@ globalEventBus.on('header4-1-1', data => {
|
|||
}
|
||||
|
||||
.act-btn {
|
||||
|
||||
background-image: url('/static/index/actbg.png');
|
||||
background-size: 100% 100%;
|
||||
border: none;
|
||||
|
|
|
@ -6,7 +6,7 @@ export default defineConfig({
|
|||
plugins: [vue()],
|
||||
server: { // ← ← ← ← ← ←
|
||||
host: '0.0.0.0' ,// ← 新增内容 ←
|
||||
port:"8888"
|
||||
port:"8891"
|
||||
},
|
||||
resolve: {
|
||||
//别名配置,引用src路径下的东西可以通过@如:import Layout from '@/layout/index.vue'
|
||||
|
|