This commit is contained in:
parent
cd2828e13a
commit
93ac148ba8
|
|
@ -16,6 +16,7 @@
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"element-plus": "^2.4.4",
|
"element-plus": "^2.4.4",
|
||||||
"mitt": "^3.0.1",
|
"mitt": "^3.0.1",
|
||||||
|
"moment": "^2.30.1",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"postcss-pxtorem": "^5.1.1",
|
"postcss-pxtorem": "^5.1.1",
|
||||||
"vue": "^3.3.8",
|
"vue": "^3.3.8",
|
||||||
|
|
@ -2470,6 +2471,14 @@
|
||||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
|
||||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
||||||
},
|
},
|
||||||
|
"node_modules/moment": {
|
||||||
|
"version": "2.30.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
|
||||||
|
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
|
||||||
|
"engines": {
|
||||||
|
"node": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/ms": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
|
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
|
||||||
|
|
@ -4891,6 +4900,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
|
||||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
||||||
},
|
},
|
||||||
|
"moment": {
|
||||||
|
"version": "2.30.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
|
||||||
|
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
|
||||||
|
},
|
||||||
"ms": {
|
"ms": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
|
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"element-plus": "^2.4.4",
|
"element-plus": "^2.4.4",
|
||||||
"mitt": "^3.0.1",
|
"mitt": "^3.0.1",
|
||||||
|
"moment": "^2.30.1",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"postcss-pxtorem": "^5.1.1",
|
"postcss-pxtorem": "^5.1.1",
|
||||||
"vue": "^3.3.8",
|
"vue": "^3.3.8",
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -31,12 +31,8 @@ const getTime = (time) => {
|
||||||
const date = ref([areaStore.time[0], areaStore.time[1]])
|
const date = ref([areaStore.time[0], areaStore.time[1]])
|
||||||
const changeDate = (e) => {
|
const changeDate = (e) => {
|
||||||
areaStore.changeTime([getTime(e[0]),getTime(e[1])])
|
areaStore.changeTime([getTime(e[0]),getTime(e[1])])
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
<template>
|
||||||
|
<el-config-provider :locale="localeZH">
|
||||||
|
<el-date-picker v-model="date" @change="changeDate" style="background-color: #001E31; width: 10vw;">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import localeZH from 'element-plus/es/locale/lang/zh-cn'
|
||||||
|
import mitt from '@/view/utils/mitt.js'
|
||||||
|
|
||||||
|
import { areaObj } from "@/store/index.js"
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
|
||||||
|
// 将时间对象转化为年月日
|
||||||
|
const getTime = (time) => {
|
||||||
|
var date =time
|
||||||
|
var year = date.getFullYear();
|
||||||
|
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
var day = date.getDate().toString().padStart(2, '0');
|
||||||
|
|
||||||
|
var formattedDate = year + '-' + month + '-' + day;
|
||||||
|
|
||||||
|
return formattedDate
|
||||||
|
}
|
||||||
|
|
||||||
|
const date = ref(new Date())
|
||||||
|
const changeDate = (e) => {
|
||||||
|
// areaStore.changeTime([getTime(e[0]),getTime(e[1])])
|
||||||
|
areaStore.setDate(getTime(e))
|
||||||
|
mitt.emit('changeOneTime', e)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:deep(.el-picker-panel__body) {
|
||||||
|
font-size: 26px;
|
||||||
|
text-align: center;
|
||||||
|
color: rgb(8, 101, 172);
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>input:nth-child(2) {
|
||||||
|
color: #C7DBE3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>input:nth-child(4) {
|
||||||
|
color: #C7DBE3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>span {
|
||||||
|
color: #C7DBE3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__inner{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-input__wrapper{
|
||||||
|
background-color: #001E31;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-popper.is-light .el-popper__arrow::before{
|
||||||
|
background-color: #001E31;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-picker__header{
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-popper .is-pure .is-light .el-picker__popper{
|
||||||
|
background-color: #001E31;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-picker-panel {
|
||||||
|
background-color: #001E31;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end-date .el-date-table-cell {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-date .el-date-table-cell {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.in-range .el-date-table-cell {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: 1px solid #41A5BEed;
|
||||||
|
box-shadow: inset 0 0 10px #41A5BEed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-table td.end-date .el-date-table-cell__text,
|
||||||
|
.el-date-table td.start-date .el-date-table-cell__text {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-range-picker__content.is-left {
|
||||||
|
border-right: 1px solid #2C4D54;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-popper.is-light {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-table th {
|
||||||
|
border-bottom: 1px solid #2C4D54;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-table th {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -55,7 +55,8 @@
|
||||||
<span style="font-size: 18px;font-weight:bold;color:#eee;">{{ headerTitle }}</span>
|
<span style="font-size: 18px;font-weight:bold;color:#eee;">{{ headerTitle }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<datePicker></datePicker>
|
<!-- <datePicker></datePicker> -->
|
||||||
|
<datePickerOne></datePickerOne>
|
||||||
<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;"
|
||||||
src="/static/index/DW.png" alt=""> {{ area }}
|
src="/static/index/DW.png" alt=""> {{ area }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -94,6 +95,7 @@ import { useRouter, useRoute } from 'vue-router'
|
||||||
import MapLoader from "@/view/utils/position.js"
|
import MapLoader from "@/view/utils/position.js"
|
||||||
import { areaObj } from "@/store/index.js"
|
import { areaObj } from "@/store/index.js"
|
||||||
import datePicker from "@/components/datePicker.vue"
|
import datePicker from "@/components/datePicker.vue"
|
||||||
|
import datePickerOne from "@/components/datePickerOne.vue"
|
||||||
import mitt from '@/view/utils/mitt.js'
|
import mitt from '@/view/utils/mitt.js'
|
||||||
const areaStore = areaObj()
|
const areaStore = areaObj()
|
||||||
let area = ref('')
|
let area = ref('')
|
||||||
|
|
|
||||||
|
|
@ -4,23 +4,29 @@
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { onMounted } from 'vue'
|
|
||||||
import { getUserTradeCountApi } from "@/api.js"
|
import { getUserTradeCountApi } from "@/api.js"
|
||||||
import { areaObj } from '../../store';
|
import { areaObj } from '../../store';
|
||||||
let areaStore = areaObj()
|
let areaStore = areaObj()
|
||||||
|
|
||||||
|
|
||||||
getUserTradeCountApi(
|
getUserTradeCountApi(
|
||||||
{ ...areaStore.area }
|
{ ...areaStore.area, date: areaStore.date }
|
||||||
).then(res => {
|
).then(res => {
|
||||||
res.data.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)
|
||||||
})
|
// })
|
||||||
|
transactionUsersTown.xAxis[0].data = res.data.x;
|
||||||
|
res.data.series.forEach((item, index) => {
|
||||||
|
transactionUsersTown.series[index].data = item.value;
|
||||||
|
});
|
||||||
initCharts('transactionUsers', transactionUsersTown)
|
initCharts('transactionUsers', transactionUsersTown)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
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);
|
||||||
|
|
@ -28,7 +34,7 @@ const initCharts = (tag, option) => {
|
||||||
|
|
||||||
}
|
}
|
||||||
const transactionUsersTown = {
|
const transactionUsersTown = {
|
||||||
color: ['#4B5FDB', '#583936', '#10C1CE'],
|
color: ['#4B5FDB', '#10C1CE', '#583936'],
|
||||||
title: {
|
title: {
|
||||||
text: ''
|
text: ''
|
||||||
},
|
},
|
||||||
|
|
@ -42,7 +48,7 @@ const transactionUsersTown = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['访客人数', '下单人数', '支付人数',],
|
data: ['今日', '昨日'],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "white"
|
color: "white"
|
||||||
},
|
},
|
||||||
|
|
@ -85,7 +91,7 @@ const transactionUsersTown = {
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '访客人数',
|
name: '今日',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
|
|
@ -111,33 +117,7 @@ const transactionUsersTown = {
|
||||||
data: []
|
data: []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '下单人数',
|
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: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '支付人数',
|
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
|
|
@ -162,12 +142,38 @@ const transactionUsersTown = {
|
||||||
},
|
},
|
||||||
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: []
|
||||||
|
// },
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let a = 0
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@
|
||||||
<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: 2%;width: 97%;" />
|
||||||
<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: 2%;width: 97%;" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
@ -15,14 +15,13 @@ import { getSalesRankApi } from "@/api.js"
|
||||||
import { areaObj } from "@/store/index.js"
|
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, date: areaStore.date }).then(res => {
|
||||||
|
|
||||||
console.log("===", res);
|
console.log("===", res);
|
||||||
// townProductCount = res.data.townProductCount
|
// townProductCount = res.data.townProductCount
|
||||||
// productRankingTotal = res.data.productRankingTotal
|
// productRankingTotal = res.data.productRankingTotal
|
||||||
aa(config3, res.data)
|
aa(config3, res.data)
|
||||||
aa(config, res.data.merchantRankingList
|
// aa(config, res.data.merchantRankingList)
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
@ -38,23 +37,31 @@ const aa = (cig, data) => {
|
||||||
let list = []
|
let list = []
|
||||||
productRankingTotal = 0
|
productRankingTotal = 0
|
||||||
data?.forEach((item, i) => {
|
data?.forEach((item, i) => {
|
||||||
productRankingTotal += item.sales
|
// productRankingTotal += item.sales
|
||||||
|
// item.order_id = item.order_id
|
||||||
|
if (item.order_id?.length > 12) {
|
||||||
|
item.order_id = item.order_id.substring(0, 8) + "****" + item.order_id.substring(12)
|
||||||
|
}
|
||||||
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.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=' 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.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>`,
|
||||||
|
|
||||||
|
`<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='height:30px;line-height:30px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.order_id}</div>`,
|
||||||
|
`<div style='height:30px;line-height:30px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.pay_price}元</div>`,
|
||||||
|
`<div style='height:30px;line-height:30px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.create_time}</div>`,
|
||||||
|
|
||||||
|
|
||||||
])
|
])
|
||||||
})
|
})
|
||||||
|
|
||||||
|
console.log(cig);
|
||||||
|
|
||||||
|
|
||||||
return list
|
return list
|
||||||
|
|
@ -67,11 +74,10 @@ const config3 = reactive({
|
||||||
// columnWidth: [
|
// columnWidth: [
|
||||||
// 2, 3, 4, 10, 3
|
// 2, 3, 4, 10, 3
|
||||||
// ],
|
// ],
|
||||||
columnWidth: [50, 50, 150, 150, 100],
|
rowNum: 8,
|
||||||
|
columnWidth: [50, 190, 100, 200],
|
||||||
data: []
|
data: []
|
||||||
}
|
})
|
||||||
|
|
||||||
)
|
|
||||||
|
|
||||||
const config = reactive({
|
const config = reactive({
|
||||||
oddRowBGC: "#001C2E",
|
oddRowBGC: "#001C2E",
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@ const areaStore = areaObj()
|
||||||
|
|
||||||
street_currday_order_countApi(
|
street_currday_order_countApi(
|
||||||
|
|
||||||
{ ...areaStore.area, streetCode: props.code }
|
{ ...areaStore.area, streetCode: props.code, date: areaStore.date }
|
||||||
|
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -151,7 +151,7 @@ const viewData = reactive({
|
||||||
})
|
})
|
||||||
|
|
||||||
getProductCountApi({
|
getProductCountApi({
|
||||||
...areaStore.area
|
...areaStore.area, date: areaStore.date
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
|
||||||
for (let key in res.data) {
|
for (let key in res.data) {
|
||||||
|
|
@ -163,7 +163,7 @@ getProductCountApi({
|
||||||
|
|
||||||
const initViewCount = ()=>{
|
const initViewCount = ()=>{
|
||||||
getViewCountApi({
|
getViewCountApi({
|
||||||
...areaStore.area
|
...areaStore.area, date: areaStore.date
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
for (let key in res.data) {
|
for (let key in res.data) {
|
||||||
viewData[key] = res.data[key]
|
viewData[key] = res.data[key]
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@ const props = defineProps({
|
||||||
|
|
||||||
getUserNumApi({
|
getUserNumApi({
|
||||||
...areaStore.area,
|
...areaStore.area,
|
||||||
streetCode: props.code
|
streetCode: props.code, date: areaStore.date
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,64 @@
|
||||||
<template>
|
<template>
|
||||||
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
|
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
|
||||||
<div class="order-data">
|
<div class="order-data" v-if="config.data.length">
|
||||||
<div class="tit">
|
<div style="height: 40vh;margin-left: 2%;width: 97%;" id="topRightDV">
|
||||||
<div style="display: flex;align-items: center;">
|
<dv-scroll-board :config="config" />
|
||||||
<div class="gradient-circle">
|
|
||||||
</div>
|
|
||||||
日订单数据
|
|
||||||
</div>
|
|
||||||
<div style="display: flex;align-items: center;">
|
|
||||||
<div class="gradient-circle">
|
|
||||||
</div>
|
|
||||||
月订单数据
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
|
|
||||||
<div style="width: 100%;height: 50%;" id="orderData2"></div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { onMounted, defineProps, reactive, ref } from "vue"
|
||||||
|
import { order_user_num_countApi, getSalesRankApi } from "@/api.js"
|
||||||
|
import { areaObj } from '../../store';
|
||||||
|
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
order_user_num_countApi({ ...areaStore.area, date: areaStore.date }).then(res => {
|
||||||
|
aa(res.data)
|
||||||
|
})
|
||||||
|
|
||||||
|
const aa = (data) => {
|
||||||
|
let list = []
|
||||||
|
data?.forEach((item, i) => {
|
||||||
|
if (item.nickname?.length > 10) {
|
||||||
|
item.nickname = item.nickname.substring(0, 6) + "****" + item.nickname.substring(10)
|
||||||
|
}else if(item.nickname?.length > 2) {
|
||||||
|
item.nickname = item.nickname.substring(0, 2);
|
||||||
|
for(let i = 0; i < item.nickname.length - 2; i++) {
|
||||||
|
item.nickname += "*";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
config.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='height:30px;line-height:30px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.nickname}</div>`,
|
||||||
|
`<div style='height:30px;line-height:30px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.price}元</div>`,
|
||||||
|
`<div style='height:30px;line-height:30px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.create_time}</div>`,
|
||||||
|
])
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log(config);
|
||||||
|
|
||||||
|
|
||||||
|
return list
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = reactive({
|
||||||
|
oddRowBGC: "#001C2E",
|
||||||
|
evenRowBGC: "#001C2E",
|
||||||
|
rowNum: 10,
|
||||||
|
columnWidth: [60, 190, 100, 200],
|
||||||
|
data: []
|
||||||
|
})
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
code: Object,
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.img-cls {
|
.img-cls {
|
||||||
width: 98%;
|
width: 98%;
|
||||||
|
|
@ -34,190 +75,10 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-right: 1vw;
|
padding-right: 1vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.tit {
|
#topRightDV{
|
||||||
position: absolute;
|
padding-top: 5vh;
|
||||||
color: white;
|
}
|
||||||
// background-color: #fff;
|
|
||||||
top: 6vh;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
.gradient-circle {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background: radial-gradient(at top left, transparent, #029BE9);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script setup>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import { onMounted, defineProps } from "vue"
|
|
||||||
import { order_user_num_countApi } from "@/api.js"
|
|
||||||
import { areaObj } from '../../store';
|
|
||||||
|
|
||||||
const areaStore = areaObj()
|
|
||||||
|
|
||||||
order_user_num_countApi(
|
|
||||||
{
|
|
||||||
...areaStore.area
|
|
||||||
}
|
|
||||||
).then(res => {
|
|
||||||
orderData.series[0].data.push(res.data.orderNum)
|
|
||||||
orderData.series[0].data.push(res.data.monthOrderNum)
|
|
||||||
orderData2.series[0].data.push(res.data.orderPayNum)
|
|
||||||
orderData2.series[0].data.push(res.data.monthOrderPayNum)
|
|
||||||
initCharts('orderData', orderData)
|
|
||||||
initCharts('orderData2', orderData2)
|
|
||||||
|
|
||||||
|
|
||||||
console.log(45454)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
code: Object,
|
|
||||||
})
|
|
||||||
const orderData = {
|
|
||||||
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'value',
|
|
||||||
boundaryGap: [0, 0.01],
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed',//背景色为虚线,
|
|
||||||
color: '#256980'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['当日订单数', '当月订单数'],
|
|
||||||
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
barWidth: 15,
|
|
||||||
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
|
|
||||||
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
|
|
||||||
data: [],
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: function (params) {
|
|
||||||
var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
||||||
{ offset: 1, color: '#0298E5' },
|
|
||||||
{ offset: 0, color: 'transparent' },
|
|
||||||
]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
||||||
{ offset: 1, color: '#4358C8' },
|
|
||||||
{ offset: 0, color: 'transparent' },
|
|
||||||
])];
|
|
||||||
return colorList[params.dataIndex]
|
|
||||||
},
|
|
||||||
borderColor: ['blue']
|
|
||||||
|
|
||||||
},
|
|
||||||
borderWidth: 2,
|
|
||||||
borderColor: "red",
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const orderData2 = {
|
|
||||||
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'value',
|
|
||||||
boundaryGap: [0, 0.01],
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed',//背景色为虚线,
|
|
||||||
color: '#256980'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['当日支付人数', '当月支付人数'],
|
|
||||||
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
barWidth: 15,
|
|
||||||
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
|
|
||||||
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
|
|
||||||
data: [],
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: function (params) {
|
|
||||||
var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
||||||
{ offset: 1, color: '#0298E5' },
|
|
||||||
{ offset: 0, color: 'transparent' },
|
|
||||||
]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
||||||
{ offset: 1, color: '#4358C8' },
|
|
||||||
{ offset: 0, color: 'transparent' },
|
|
||||||
])];
|
|
||||||
return colorList[params.dataIndex]
|
|
||||||
},
|
|
||||||
borderColor: ['blue']
|
|
||||||
|
|
||||||
},
|
|
||||||
borderWidth: 2,
|
|
||||||
borderColor: "red",
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 图表
|
|
||||||
const initCharts = (tag, option) => {
|
|
||||||
var chartDom = document.getElementById(tag);
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
myChart.setOption(option);
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
document.getElementById("orderData").removeAttribute('_echarts_instance_');
|
|
||||||
document.getElementById("orderData2").removeAttribute('_echarts_instance_');
|
|
||||||
|
|
||||||
// initCharts('orderData', orderData)
|
|
||||||
// initCharts('orderData2', orderData2)
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,225 @@
|
||||||
|
<template>
|
||||||
|
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
|
||||||
|
<div class="order-data">
|
||||||
|
<div class="tit">
|
||||||
|
<div style="display: flex;align-items: center;">
|
||||||
|
<div class="gradient-circle">
|
||||||
|
</div>
|
||||||
|
日订单数据
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;align-items: center;">
|
||||||
|
<div class="gradient-circle">
|
||||||
|
</div>
|
||||||
|
月订单数据
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
|
||||||
|
<div style="width: 100%;height: 50%;" id="orderData2"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { onMounted, defineProps } from "vue"
|
||||||
|
import { order_user_num_countApi } from "@/api.js"
|
||||||
|
import { areaObj } from '../../store';
|
||||||
|
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
order_user_num_countApi(
|
||||||
|
{
|
||||||
|
...areaStore.area, date: areaStore.date
|
||||||
|
}
|
||||||
|
).then(res => {
|
||||||
|
orderData.series[0].data.push(res.data.orderNum)
|
||||||
|
orderData.series[0].data.push(res.data.monthOrderNum)
|
||||||
|
orderData2.series[0].data.push(res.data.orderPayNum)
|
||||||
|
orderData2.series[0].data.push(res.data.monthOrderPayNum)
|
||||||
|
initCharts('orderData', orderData)
|
||||||
|
initCharts('orderData2', orderData2)
|
||||||
|
|
||||||
|
|
||||||
|
console.log(45454)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
code: Object,
|
||||||
|
})
|
||||||
|
const orderData = {
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, 0.01],
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',//背景色为虚线,
|
||||||
|
color: '#256980'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['当日订单数', '当月订单数'],
|
||||||
|
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
barWidth: 15,
|
||||||
|
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
|
||||||
|
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
|
||||||
|
data: [],
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params) {
|
||||||
|
var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||||
|
{ offset: 1, color: '#0298E5' },
|
||||||
|
{ offset: 0, color: 'transparent' },
|
||||||
|
]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||||
|
{ offset: 1, color: '#4358C8' },
|
||||||
|
{ offset: 0, color: 'transparent' },
|
||||||
|
])];
|
||||||
|
return colorList[params.dataIndex]
|
||||||
|
},
|
||||||
|
borderColor: ['blue']
|
||||||
|
|
||||||
|
},
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: "red",
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const orderData2 = {
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, 0.01],
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',//背景色为虚线,
|
||||||
|
color: '#256980'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['当日支付人数', '当月支付人数'],
|
||||||
|
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
barWidth: 15,
|
||||||
|
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
|
||||||
|
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
|
||||||
|
data: [],
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params) {
|
||||||
|
var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||||
|
{ offset: 1, color: '#0298E5' },
|
||||||
|
{ offset: 0, color: 'transparent' },
|
||||||
|
]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||||
|
{ offset: 1, color: '#4358C8' },
|
||||||
|
{ offset: 0, color: 'transparent' },
|
||||||
|
])];
|
||||||
|
return colorList[params.dataIndex]
|
||||||
|
},
|
||||||
|
borderColor: ['blue']
|
||||||
|
|
||||||
|
},
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: "red",
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 图表
|
||||||
|
const initCharts = (tag, option) => {
|
||||||
|
var chartDom = document.getElementById(tag);
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
document.getElementById("orderData").removeAttribute('_echarts_instance_');
|
||||||
|
document.getElementById("orderData2").removeAttribute('_echarts_instance_');
|
||||||
|
|
||||||
|
// initCharts('orderData', orderData)
|
||||||
|
// initCharts('orderData2', orderData2)
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.img-cls {
|
||||||
|
width: 98%;
|
||||||
|
height: 45vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-data {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-right: 1vw;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
position: absolute;
|
||||||
|
color: white;
|
||||||
|
// background-color: #fff;
|
||||||
|
top: 6vh;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
.gradient-circle {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: radial-gradient(at top left, transparent, #029BE9);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -43,6 +43,7 @@ export const areaObj = defineStore('counter', {
|
||||||
// streetCode: 51052410
|
// streetCode: 51052410
|
||||||
|
|
||||||
},
|
},
|
||||||
|
date: now(),
|
||||||
time: [lastMouth(), now()],
|
time: [lastMouth(), now()],
|
||||||
// 商户请求的参数
|
// 商户请求的参数
|
||||||
store: {
|
store: {
|
||||||
|
|
@ -74,6 +75,9 @@ export const areaObj = defineStore('counter', {
|
||||||
},
|
},
|
||||||
storeLogin(obj) {
|
storeLogin(obj) {
|
||||||
this.userInfo.user = obj
|
this.userInfo.user = obj
|
||||||
|
},
|
||||||
|
setDate(date){
|
||||||
|
this.date = date
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -8,13 +8,13 @@
|
||||||
|
|
||||||
<div class="top box">
|
<div class="top box">
|
||||||
<div class="l">
|
<div class="l">
|
||||||
<topLeft :code="route.query.code" :key="route.query.code+key"></topLeft>
|
<topLeft :code="route.query.code" :key="key"></topLeft>
|
||||||
</div>
|
</div>
|
||||||
<div class="c" id="">
|
<div class="c" id="">
|
||||||
<topCenter :code="route.query.code" :key="route.query.code+key"></topCenter>
|
<topCenter :code="route.query.code" :key="key"></topCenter>
|
||||||
</div>
|
</div>
|
||||||
<div class="r">
|
<div class="r">
|
||||||
<topRight :code="route.query.code" :key="route.query.code+key"></topRight>
|
<topRight :code="route.query.code" :key="key"></topRight>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -22,13 +22,13 @@
|
||||||
<div class="bottom box">
|
<div class="bottom box">
|
||||||
<div class="l">
|
<div class="l">
|
||||||
|
|
||||||
<bottomleft :code="route.query.code" :key="route.query.code+key"></bottomleft>
|
<bottomleft :code="route.query.code" :key="key"></bottomleft>
|
||||||
</div>
|
</div>
|
||||||
<div class="c">
|
<div class="c">
|
||||||
<bottomCenter :key="route.query.code+key"></bottomCenter>
|
<bottomCenter :key="key"></bottomCenter>
|
||||||
</div>
|
</div>
|
||||||
<div class="r">
|
<div class="r">
|
||||||
<bottomRight :code="route.query.code" :key="route.query.code+key"></bottomRight>
|
<bottomRight :code="route.query.code" :key="key"></bottomRight>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -43,6 +43,7 @@ import { useRoute } from 'vue-router';
|
||||||
import topCenter from "@/components/townDetail/topCenter.vue"
|
import topCenter from "@/components/townDetail/topCenter.vue"
|
||||||
import topLeft from "@/components/townDetail/topLeft.vue"
|
import topLeft from "@/components/townDetail/topLeft.vue"
|
||||||
import topRight from "@/components/townDetail/topRight.vue"
|
import topRight from "@/components/townDetail/topRight.vue"
|
||||||
|
import mitt from '@/view/utils/mitt.js'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
const show = ref(true)
|
const show = ref(true)
|
||||||
|
|
@ -62,10 +63,19 @@ onMounted(() => {
|
||||||
key.value++
|
key.value++
|
||||||
}, 1000 * 60)
|
}, 1000 * 60)
|
||||||
|
|
||||||
|
mitt.on('changeOneTime', (data) => {
|
||||||
|
key.value++;
|
||||||
|
clearInterval(timer1)
|
||||||
|
timer1 = setInterval(() => {
|
||||||
|
key.value++
|
||||||
|
}, 1000 * 60)
|
||||||
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(()=>{
|
onUnmounted(() => {
|
||||||
clearInterval(timer1)
|
clearInterval(timer1)
|
||||||
|
mitt.off('changeOneTime')
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import path from 'path'
|
||||||
import postCssPxToRem from 'postcss-pxtorem'
|
import postCssPxToRem from 'postcss-pxtorem'
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
// base: 'yusi/',
|
base: 'yusi/',
|
||||||
// base: 'sss/',
|
// base: 'sss/',
|
||||||
server: { // ← ← ← ← ← ←
|
server: { // ← ← ← ← ← ←
|
||||||
host: '0.0.0.0' // ← 新增内容 ←
|
host: '0.0.0.0' // ← 新增内容 ←
|
||||||
|
|
@ -47,7 +47,7 @@ export default defineConfig({
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// outDir: 'sss',
|
// outDir: 'sss',
|
||||||
// outDir: 'yusi',
|
outDir: 'yusi',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue