This commit is contained in:
parent
76c4814b75
commit
8fb277ad92
|
@ -1,12 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import headView from "@/components/headView.vue";
|
import headView from "@/components/headView.vue";
|
||||||
import Businesses from "@/components/Businesses.vue";
|
import Businesses from "@/components/Businesses.vue";
|
||||||
import { test } from "@/api/index.js";
|
|
||||||
test().then(res => {
|
|
||||||
console.log(res);
|
|
||||||
}).catch(e => {
|
|
||||||
console.log(e);
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
import axios from "@/utils/axios.js";
|
import axios from "@/utils/axios.js";
|
||||||
|
|
||||||
export const test = () => {
|
export const orderList = (data) => {
|
||||||
return axios.get('/common/home');
|
return axios.get('dataview/curr_order_info', { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
export const orderRanking = (data) => {
|
||||||
|
return axios.get('dataview/order_ranking', { params: data });
|
||||||
}
|
}
|
|
@ -4,6 +4,7 @@ import { ref, reactive, onMounted } from "vue"
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import paging from "./paging.vue"
|
import paging from "./paging.vue"
|
||||||
import mitt from "@/utils/mitt"
|
import mitt from "@/utils/mitt"
|
||||||
|
import { orderList } from "@/api/index.js"
|
||||||
const route = useRouter()
|
const route = useRouter()
|
||||||
|
|
||||||
const ShwostoreType = ref(false)
|
const ShwostoreType = ref(false)
|
||||||
|
@ -22,43 +23,31 @@ const hdClick = (e) => {
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
const a = (aaa) => {
|
const initData = (data) => {
|
||||||
for (let i = 0; i < 100; i++) {
|
let arr = [];
|
||||||
if (i % 2 == 0) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
aaa.data.push(
|
let calss = 'div';
|
||||||
[
|
if (i % 2 != 0) {
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
calss = 'div div2'
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);' >排sd序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
|
||||||
]
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
aaa.data.push(
|
|
||||||
[
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排sd序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
arr.push(
|
||||||
|
[
|
||||||
|
`<div class="${calss}">${data[i].order_sn || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].real_name || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].user_phone || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].user_address || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].store_name || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].mer_name || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].create_time || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].status || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].courier || '-'}</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
configs.data = arr;
|
||||||
|
scrollBoardRef.value?.updateRows(configs.data);
|
||||||
}
|
}
|
||||||
|
const scrollBoardRef = ref(null);
|
||||||
const configs = reactive({
|
const configs = reactive({
|
||||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||||
oddRowBGC: '',
|
oddRowBGC: '',
|
||||||
|
@ -78,8 +67,28 @@ const configs = reactive({
|
||||||
data: [
|
data: [
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const pages = ref({
|
||||||
|
areaCode: 510524,
|
||||||
|
streetCode: 510524100,
|
||||||
|
page: 1,
|
||||||
|
limit: 30,
|
||||||
|
total: 0,
|
||||||
|
pageAll: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const loadOrderList = (pramas) => {
|
||||||
|
orderList(pramas).then((res) => {
|
||||||
|
initData(res.data.currOrderList);
|
||||||
|
pages.value.total = res.data.currOrderCount;
|
||||||
|
pages.value.pageAll = Math.ceil(res.data.currOrderCount / pages.value.limit);
|
||||||
|
}).catch(err => {
|
||||||
|
console.error(err);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
a(configs);
|
// loadOrderList();
|
||||||
mitt.on('showBusinesses', () => {
|
mitt.on('showBusinesses', () => {
|
||||||
isShow.value = !isShow.value;
|
isShow.value = !isShow.value;
|
||||||
})
|
})
|
||||||
|
@ -95,12 +104,13 @@ onMounted(() => {
|
||||||
<div class="close" @click="isShow = false">关闭</div>
|
<div class="close" @click="isShow = false">关闭</div>
|
||||||
</div>
|
</div>
|
||||||
<dv-scroll-board
|
<dv-scroll-board
|
||||||
|
ref="scrollBoardRef"
|
||||||
:config="configs"
|
:config="configs"
|
||||||
@click="hdClick"
|
@click="hdClick"
|
||||||
style="width: 100%; height: 92%"
|
style="width: 100%; height: 92%"
|
||||||
/>
|
/>
|
||||||
<div class="c-l-bottom">
|
<div class="c-l-bottom">
|
||||||
<paging></paging>
|
<paging :page="pages" @loadList="loadOrderList"></paging>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -152,6 +162,21 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.div) {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
height: 100%;
|
||||||
|
color: aliceblue;
|
||||||
|
background: rgba(91, 219, 246, 0.2);
|
||||||
|
white-space: nowrap; /* 防止文本换行 */
|
||||||
|
overflow: hidden; /* 溢出部分隐藏 */
|
||||||
|
text-overflow: ellipsis; /* 显示省略号 */
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.div2) {
|
||||||
|
background: rgba(0, 168, 255, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.ceil) {
|
:deep(.ceil) {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
|
@ -1,31 +1,56 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { ref, watch } from "vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
page: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['loadList']);
|
||||||
|
|
||||||
const pages = ref({
|
const pages = ref({
|
||||||
page: 1,
|
page: 1,
|
||||||
total: 63,
|
total: 0,
|
||||||
pageSize: 30,
|
limit: 10,
|
||||||
pageAll: 7
|
pageAll: 1,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
watch(() => props.page, (n, o) => {
|
||||||
|
Object.keys(n).forEach(key => {
|
||||||
|
pages.value[key] = n[key];
|
||||||
|
})
|
||||||
|
}, { deep: true, immediate: true })
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const prev = () => {
|
const prev = () => {
|
||||||
if (pages.value.page > 1) pages.value.page--;
|
if (pages.value.page > 1) pages.value.page--;
|
||||||
|
emit('loadList', pages.value);
|
||||||
}
|
}
|
||||||
const next = () => {
|
const next = () => {
|
||||||
if (pages.value.page < pages.value.pageAll) pages.value.page++;
|
if (pages.value.page < pages.value.pageAll) pages.value.page++;
|
||||||
|
emit('loadList', pages.value)
|
||||||
}
|
}
|
||||||
const setPage = (page = 1) => {
|
const setPage = (page = 1) => {
|
||||||
pages.value.page = page;
|
pages.value.page = page;
|
||||||
|
emit('loadList', pages.value)
|
||||||
}
|
}
|
||||||
const getPage = () => {
|
const blur = (e) => {
|
||||||
console.log(pages.value.page);
|
let value = pages.value.page;
|
||||||
if (pages.value.page < 0) pages.value.page = 1;
|
if (typeof value === 'number' || (typeof value === 'string' && !isNaN(Number(value)))) {
|
||||||
if (pages.value.page > pages.value.pageAll) pages.value.page = pages.value.pageAll;
|
if (value > pages.value.pageAll) pages.value.page = pages.value.pageAll;
|
||||||
}
|
if (value < 1) pages.value.page = 1;
|
||||||
const input = (e) => {
|
emit('loadList', pages.value)
|
||||||
if (e.data >= 0 && e.data <= 9) return getPage();
|
} else {
|
||||||
pages.value.page = 1;
|
pages.value.page = 1;
|
||||||
|
emit('loadList', pages.value)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
emit('loadList', pages.value)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -85,7 +110,7 @@ const input = (e) => {
|
||||||
<div class="num" @click="next">{{ ">" }}</div>
|
<div class="num" @click="next">{{ ">" }}</div>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<div>前往</div>
|
<div>前往</div>
|
||||||
<input v-model="pages.page" @input="input" />
|
<input v-model="pages.page" @blur="blur" @keyup.enter="blur" />
|
||||||
<div>页</div>
|
<div>页</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,10 +5,16 @@ const request = axios.create({
|
||||||
timeout: 5000
|
timeout: 5000
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function convertParamsToQueryString (params) {
|
||||||
|
const queryString = Object.keys(params)
|
||||||
|
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
|
||||||
|
.join('&');
|
||||||
|
return queryString;
|
||||||
|
}
|
||||||
|
|
||||||
// 请求拦截器
|
// 请求拦截器
|
||||||
request.interceptors.request.use(
|
request.interceptors.request.use(
|
||||||
config => {
|
config => {
|
||||||
// 在发送请求之前做些什么,例如添加token、修改请求头等
|
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
|
|
|
@ -2,143 +2,12 @@
|
||||||
import { onMounted, reactive, ref } from "vue";
|
import { onMounted, reactive, ref } from "vue";
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import border from "../../../components/border.vue"
|
import border from "../../../components/border.vue"
|
||||||
const xData2 = reactive(["福集镇", "嘉明镇", "喻寺镇", "得胜镇", "牛滩镇", "兆雅镇",
|
import { orderRanking } from "@/api/index.js"
|
||||||
"太伏镇", "云龙镇", "石桥镇", "毗卢镇", "奇峰镇", "潮河镇", "云锦镇"]);
|
|
||||||
const data1 = reactive([200, 100, 200, 200, 100, 120, 150, 164, 153, 140, 255, 284, 230]);
|
|
||||||
const data_bottom = reactive([]);
|
|
||||||
|
|
||||||
const option = reactive({
|
const xData2 = ref([]);
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
const data1 = ref([]);
|
||||||
tooltip: {
|
const data_bottom = ref([]);
|
||||||
trigger: 'item',
|
const orderCount = ref(0);
|
||||||
backgroundColor: 'rgba(91, 219, 246, 0.7)',
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: 60,
|
|
||||||
bottom: 50
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
data: xData2,
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
interval: 0,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 10,
|
|
||||||
},
|
|
||||||
margin: 20, //刻度标签与轴线之间的距离。
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(0, 156, 255, 0.10)' // 设置分隔线颜色
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 10,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{//三个最低下的圆片
|
|
||||||
"name": "",
|
|
||||||
"type": "pictorialBar",
|
|
||||||
"symbolSize": [10, 4],
|
|
||||||
"symbolOffset": [0, 2],
|
|
||||||
"z": 12,
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 1,
|
|
||||||
color: function (params) {
|
|
||||||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
||||||
offset: 0,
|
|
||||||
color: '#0E60B2' // 0% 处的颜色
|
|
||||||
}, {
|
|
||||||
offset: 1,
|
|
||||||
color: '#5BDBF6'// 100% 处的颜色
|
|
||||||
}], false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"data": data_bottom
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
//下半截柱状图
|
|
||||||
{
|
|
||||||
name: '2020',
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 10,
|
|
||||||
barGap: '-100%',
|
|
||||||
itemStyle: {//lenged文本
|
|
||||||
opacity: .7,
|
|
||||||
color: function (params) {
|
|
||||||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
||||||
offset: 0,
|
|
||||||
color: '#0E60B2' // 0% 处的颜色
|
|
||||||
}, {
|
|
||||||
offset: 1,
|
|
||||||
color: '#5BDBF6'// 100% 处的颜色
|
|
||||||
}], false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data: data1
|
|
||||||
},
|
|
||||||
|
|
||||||
{ // 替代柱状图 默认不显示颜色,是最下方柱图(邮件营销)的value值 - 20
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 10,
|
|
||||||
barGap: '-100%',
|
|
||||||
stack: '广告',
|
|
||||||
itemStyle: {
|
|
||||||
color: 'transparent'
|
|
||||||
},
|
|
||||||
data: data1
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
"name": "",
|
|
||||||
"type": "pictorialBar",
|
|
||||||
"symbolSize": [10, 4],
|
|
||||||
"symbolOffset": [0, -2],
|
|
||||||
"z": 12,
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 1,
|
|
||||||
color: function (params) {
|
|
||||||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
||||||
offset: 0,
|
|
||||||
color: '#0E60B2' // 0% 处的颜色
|
|
||||||
}, {
|
|
||||||
offset: 1,
|
|
||||||
color: '#5BDBF6'// 100% 处的颜色
|
|
||||||
}], false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"symbolPosition": "end",
|
|
||||||
"data": data1
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
const echartsRef = ref(null);
|
const echartsRef = ref(null);
|
||||||
const initMap = () => {
|
const initMap = () => {
|
||||||
|
@ -146,15 +15,166 @@ const initMap = () => {
|
||||||
// 基于DOM元素初始化echarts实例
|
// 基于DOM元素初始化echarts实例
|
||||||
const chart = echarts.init(echartsRef.value);
|
const chart = echarts.init(echartsRef.value);
|
||||||
|
|
||||||
data1.forEach(item => {
|
let option = {
|
||||||
data_bottom.push(1)
|
backgroundColor: 'rgba(0,0,0,0)',
|
||||||
})
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
backgroundColor: 'rgba(91, 219, 246, 0.7)',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 60,
|
||||||
|
bottom: 50
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: xData2.value,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
margin: 20, //刻度标签与轴线之间的距离。
|
||||||
|
formatter: function (value) {
|
||||||
|
return value.split("").slice(0, 3).join("\n"); // 将文字逐个字符换行显示
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(0, 156, 255, 0.10)' // 设置分隔线颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{//三个最低下的圆片
|
||||||
|
"name": "",
|
||||||
|
"type": "pictorialBar",
|
||||||
|
"symbolSize": [10, 4],
|
||||||
|
"symbolOffset": [0, 2],
|
||||||
|
"z": 12,
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 1,
|
||||||
|
color: function (params) {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0E60B2' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#5BDBF6'// 100% 处的颜色
|
||||||
|
}], false)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"data": data_bottom.value
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
//下半截柱状图
|
||||||
|
{
|
||||||
|
name: '2020',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 10,
|
||||||
|
barGap: '-100%',
|
||||||
|
itemStyle: {//lenged文本
|
||||||
|
opacity: .7,
|
||||||
|
color: function (params) {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0E60B2' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#5BDBF6'// 100% 处的颜色
|
||||||
|
}], false)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: data1.value
|
||||||
|
},
|
||||||
|
|
||||||
|
{ // 替代柱状图 默认不显示颜色,是最下方柱图(邮件营销)的value值 - 20
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 10,
|
||||||
|
barGap: '-100%',
|
||||||
|
stack: '广告',
|
||||||
|
itemStyle: {
|
||||||
|
color: 'transparent'
|
||||||
|
},
|
||||||
|
data: data1.value
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"type": "pictorialBar",
|
||||||
|
"symbolSize": [10, 4],
|
||||||
|
"symbolOffset": [0, -2],
|
||||||
|
"z": 12,
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 1,
|
||||||
|
color: function (params) {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0E60B2' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#5BDBF6'// 100% 处的颜色
|
||||||
|
}], false)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"symbolPosition": "end",
|
||||||
|
"data": data1.value
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
// 使用配置项显示图表
|
// 使用配置项显示图表
|
||||||
chart.setOption(option);
|
chart.setOption(option);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const loadOrderList = () => {
|
||||||
|
orderRanking({
|
||||||
|
areaCode: '510524',
|
||||||
|
streetCode: '510524100',
|
||||||
|
type: 2, // 1表示今日, 2表示总计
|
||||||
|
}).then((res) => {
|
||||||
|
orderCount.value = res.data.orderCount;
|
||||||
|
res.data.townOrderList.forEach(e => {
|
||||||
|
xData2.value.push(e.street_name);
|
||||||
|
data1.value.push(e.order_count);
|
||||||
|
data_bottom.value.push(1)
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
initMap()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initMap()
|
loadOrderList();
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -165,7 +185,7 @@ onMounted(() => {
|
||||||
<div class="box-c">
|
<div class="box-c">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="img">
|
<div class="img">
|
||||||
<div class="text">61258</div>
|
<div class="text">{{ orderCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>订单总数</div>
|
<div>订单总数</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, reactive, ref, inject, nextTick } from "vue";
|
import { onMounted, reactive, ref, inject, nextTick } from "vue";
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import 'echarts-gl';
|
|
||||||
import mitt from "@/utils/mitt";
|
import mitt from "@/utils/mitt";
|
||||||
import luxian from "@/assets/json/luxian.json";
|
import luxian from "@/assets/json/luxian.json";
|
||||||
import hejiang from "@/assets/json/hejiang.json";
|
import hejiang from "@/assets/json/hejiang.json";
|
||||||
|
@ -101,11 +100,8 @@ const initMap = () => {
|
||||||
chart = echarts.init(echartsRef.value);
|
chart = echarts.init(echartsRef.value);
|
||||||
}
|
}
|
||||||
echarts.registerMap(mapType.name, mapType.json);
|
echarts.registerMap(mapType.name, mapType.json);
|
||||||
|
let piePatternImg = new Image();
|
||||||
let domImg = document.createElement("img");
|
piePatternImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35e6b202312021115251405.png';
|
||||||
domImg.style.height = '1000px';
|
|
||||||
domImg.style.width = "1000px";
|
|
||||||
domImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png';
|
|
||||||
|
|
||||||
|
|
||||||
let option = {
|
let option = {
|
||||||
|
@ -211,10 +207,18 @@ const initMap = () => {
|
||||||
// },
|
// },
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// viewControl: { // 用于控制地图的倾斜和旋转
|
|
||||||
// distance: 120, // 地图与相机的距离
|
// itemStyle: {
|
||||||
// alpha: 35, // 地图的倾斜角度
|
// color: {
|
||||||
// beta: 0 // 地图的旋转角度
|
// image: piePatternImg,
|
||||||
|
// repeat: 'no-repeat',
|
||||||
|
// },
|
||||||
|
// areaColor: {
|
||||||
|
// image: piePatternImg,
|
||||||
|
// repeat: 'no-repeat',
|
||||||
|
// },
|
||||||
|
// borderColor: '#bddee6',
|
||||||
|
// borderWidth: 1,
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -2,37 +2,33 @@
|
||||||
import { onMounted, reactive, ref } from "vue"
|
import { onMounted, reactive, ref } from "vue"
|
||||||
import border from "@/components/border.vue"
|
import border from "@/components/border.vue"
|
||||||
import mitt from "@/utils/mitt"
|
import mitt from "@/utils/mitt"
|
||||||
|
import { orderList } from "@/api/index.js"
|
||||||
|
|
||||||
const initData = (aaa) => {
|
const initData = (data) => {
|
||||||
for (let i = 0; i < 20; i++) {
|
let arr = [];
|
||||||
if (i % 2 == 0) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
aaa.data.push(
|
let calss = 'div';
|
||||||
[
|
if (i % 2 != 0) {
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
calss = 'div div2'
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)' >排sd序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
|
||||||
]
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
aaa.data.push(
|
|
||||||
[
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)' >排sd序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
arr.push(
|
||||||
|
[
|
||||||
|
`<div class="${calss}">${i + 1}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].real_name || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].user_phone || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].store_name || '-'}</div>`,
|
||||||
|
`<div class="${calss}">${data[i].user_address || '-'}</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
list.data = arr;
|
||||||
|
scrollBoardRef.value.updateRows(list.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const scrollBoardRef = ref(null);
|
||||||
const list = reactive({
|
const list = reactive({
|
||||||
header: [
|
header: [
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>ID</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>序号</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
|
||||||
|
@ -45,28 +41,92 @@ const list = reactive({
|
||||||
// evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
// evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
||||||
oddRowBGC: '',
|
oddRowBGC: '',
|
||||||
evenRowBGC: "",
|
evenRowBGC: "",
|
||||||
// columnWidth: [50],
|
columnWidth: [40, 80],
|
||||||
align: ['center'],
|
align: ['center'],
|
||||||
rowNum: 7
|
rowNum: 7
|
||||||
})
|
})
|
||||||
const cell1 = reactive({
|
const cell = reactive([
|
||||||
value: 66,
|
{
|
||||||
label: '66.66%',
|
value: 0,
|
||||||
count: 66542,
|
label: '0%',
|
||||||
borderWidth: 1,
|
count: 0,
|
||||||
borderGap: 1,
|
borderWidth: 1,
|
||||||
borderRadius: 3,
|
borderGap: 1,
|
||||||
colors: ['#66FFFF', '#FEDB65']
|
borderRadius: 3,
|
||||||
})
|
colors: ['#66FFFF', '#FEDB65']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 0,
|
||||||
|
label: '0%',
|
||||||
|
count: 0,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderGap: 1,
|
||||||
|
borderRadius: 3,
|
||||||
|
colors: ['#66FFFF', '#FEDB65']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 0,
|
||||||
|
label: '0%',
|
||||||
|
count: 0,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderGap: 1,
|
||||||
|
borderRadius: 3,
|
||||||
|
colors: ['#66FFFF', '#FEDB65']
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const initCell = () => {
|
||||||
|
let all = pendingOrderCount.value + undeliveredOrderCount.value + doneOrderCountQuery.value;
|
||||||
|
cell[0].value = (pendingOrderCount.value / all * 100).toFixed(0);
|
||||||
|
cell[0].label = (pendingOrderCount.value / all * 100).toFixed(2) + '%';
|
||||||
|
cell[0].count = pendingOrderCount.value;
|
||||||
|
cell[1].value = (undeliveredOrderCount.value / all * 100).toFixed(0);
|
||||||
|
cell[1].label = (undeliveredOrderCount.value / all * 100).toFixed(2) + '%';
|
||||||
|
cell[1].count = undeliveredOrderCount.value;
|
||||||
|
cell[2].value = (doneOrderCountQuery.value / all * 100).toFixed(0);
|
||||||
|
cell[2].label = (doneOrderCountQuery.value / all * 100).toFixed(2) + '%';
|
||||||
|
cell[2].count = doneOrderCountQuery.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
const openList = () => {
|
const openList = () => {
|
||||||
mitt.emit('showBusinesses')
|
mitt.emit('showBusinesses')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const orderCount = ref(0);
|
||||||
|
const pendingOrderCount = ref(0);
|
||||||
|
const undeliveredOrderCount = ref(0);
|
||||||
|
const doneOrderCountQuery = ref(0);
|
||||||
|
const cOrder = () => {
|
||||||
|
orderCount.value = orderCount.value + '';
|
||||||
|
let c = 6 - orderCount.value.length;
|
||||||
|
for (let i = 0; i < c; i++) {
|
||||||
|
orderCount.value = '0' + orderCount.value;
|
||||||
|
}
|
||||||
|
return orderCount.value.split('');
|
||||||
|
}
|
||||||
|
|
||||||
|
const pages = ref({
|
||||||
|
areaCode: 510524,
|
||||||
|
streetCode: 510524100,
|
||||||
|
page: 1,
|
||||||
|
limit: 30
|
||||||
|
})
|
||||||
|
|
||||||
|
const loadOrderList = () => {
|
||||||
|
orderList(pages.value).then((res) => {
|
||||||
|
initData(res.data.currOrderList);
|
||||||
|
orderCount.value = res.data.currOrderCount;
|
||||||
|
pendingOrderCount.value = res.data.pendingOrderCount;
|
||||||
|
undeliveredOrderCount.value = res.data.undeliveredOrderCount;
|
||||||
|
doneOrderCountQuery.value = res.data.doneOrderCountQuery;
|
||||||
|
initCell();
|
||||||
|
}).catch(err => {
|
||||||
|
console.error(err);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initData(list);
|
loadOrderList();
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -76,12 +136,9 @@ onMounted(() => {
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">今日订单数</div>
|
<div class="title">今日订单数</div>
|
||||||
<div class="my-day-num">
|
<div class="my-day-num">
|
||||||
<div class="my-num-item">0</div>
|
<div class="my-num-item" v-for="(item, index) in cOrder()" :key="index">
|
||||||
<div class="my-num-item">0</div>
|
{{ item }}
|
||||||
<div class="my-num-item">5</div>
|
</div>
|
||||||
<div class="my-num-item">2</div>
|
|
||||||
<div class="my-num-item">4</div>
|
|
||||||
<div class="my-num-item">1</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="order-list">
|
<div class="order-list">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
|
@ -94,38 +151,42 @@ onMounted(() => {
|
||||||
<div>{{ "〉" }}</div>
|
<div>{{ "〉" }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<dv-scroll-board :config="list" style="width: 100%; height: 90%" />
|
<dv-scroll-board
|
||||||
|
ref="scrollBoardRef"
|
||||||
|
:config="list"
|
||||||
|
style="width: 100%; height: 90%"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cylinder">
|
<div class="cylinder">
|
||||||
<div class="cy">
|
<div class="cy">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<div class="top">
|
<div>
|
||||||
已完成<span class="sapn">{{ cell1.label }}</span>
|
占比<span class="sapn">{{ cell[0].label }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="num">{{ cell1.count }}</div>
|
<div class="num">{{ cell[0].count }}</div>
|
||||||
</div>
|
</div>
|
||||||
<dv-percent-pond :config="cell1" class="cell" />
|
<dv-percent-pond :config="cell[0]" class="cell" />
|
||||||
<div class="type">待取货订单数</div>
|
<div class="type">待取货订单数</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cy">
|
<div class="cy">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<div>
|
<div>
|
||||||
已完成<span class="sapn">{{ cell1.label }}</span>
|
占比<span class="sapn">{{ cell[1].label }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="num">{{ cell1.count }}</div>
|
<div class="num">{{ cell[1].count }}</div>
|
||||||
</div>
|
</div>
|
||||||
<dv-percent-pond :config="cell1" class="cell" />
|
<dv-percent-pond :config="cell[1]" class="cell" />
|
||||||
<div class="type">未配送订单数</div>
|
<div class="type">未配送订单数</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cy">
|
<div class="cy">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<div>
|
<div>
|
||||||
已完成<span class="sapn">{{ cell1.label }}</span>
|
占比<span class="sapn">{{ cell[2].label }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="num">{{ cell1.count }}</div>
|
<div class="num">{{ cell[2].count }}</div>
|
||||||
</div>
|
</div>
|
||||||
<dv-percent-pond :config="cell1" class="cell" />
|
<dv-percent-pond :config="cell[2]" class="cell" />
|
||||||
<div class="type">已完成订单数</div>
|
<div class="type">已完成订单数</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -202,6 +263,21 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.div) {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
height: 100%;
|
||||||
|
color: aliceblue;
|
||||||
|
background: rgba(91, 219, 246, 0.2);
|
||||||
|
white-space: nowrap; /* 防止文本换行 */
|
||||||
|
overflow: hidden; /* 溢出部分隐藏 */
|
||||||
|
text-overflow: ellipsis; /* 显示省略号 */
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.div2) {
|
||||||
|
background: rgba(0, 168, 255, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.ceil) {
|
:deep(.ceil) {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
|
@ -1,40 +1,8 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||||
import border from "../../../components/border.vue"
|
import border from "../../../components/border.vue"
|
||||||
const list = reactive({
|
import { orderRanking } from "@/api/index.js"
|
||||||
data: [
|
const items = ref([])
|
||||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
|
||||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
|
||||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
|
||||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
|
||||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
|
||||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
|
||||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
|
||||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
|
||||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
|
||||||
],
|
|
||||||
// index: true,
|
|
||||||
headerBGC: 'rgba(0, 168, 255, 0)',
|
|
||||||
oddRowBGC: 'rgba(91, 219, 246, 0)',
|
|
||||||
evenRowBGC: 'rgba(0, 168, 255, 0)',
|
|
||||||
// columnWidth: [50],
|
|
||||||
align: ['center']
|
|
||||||
})
|
|
||||||
const items = reactive([
|
|
||||||
{ id: 1, text: '莲花池 1' },
|
|
||||||
{ id: 2, text: '莲花池 2' },
|
|
||||||
{ id: 3, text: '莲花池 3' },
|
|
||||||
{ id: 3, text: '莲花池 4' },
|
|
||||||
{ id: 3, text: '莲花池 5' },
|
|
||||||
{ id: 3, text: '莲花池 6' },
|
|
||||||
{ id: 3, text: '莲花池 7' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
])
|
|
||||||
const scrollContainerRef = ref(null);
|
const scrollContainerRef = ref(null);
|
||||||
let timer = null;
|
let timer = null;
|
||||||
const autoScroll = () => {
|
const autoScroll = () => {
|
||||||
|
@ -51,10 +19,31 @@ const autoScroll = () => {
|
||||||
}, 50)
|
}, 50)
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
|
||||||
nextTick(() => {
|
const max = ref(0);
|
||||||
autoScroll();
|
|
||||||
|
const loadOrderList = () => {
|
||||||
|
orderRanking({
|
||||||
|
areaCode: '510524',
|
||||||
|
streetCode: '510524100',
|
||||||
|
type: 1, // 1表示今日, 2表示总计
|
||||||
|
}).then((res) => {
|
||||||
|
items.value = res.data.townOrderList;
|
||||||
|
items.value.forEach(e => {
|
||||||
|
if (e.order_count > max.value) max.value = e.order_count;
|
||||||
|
})
|
||||||
|
nextTick(() => {
|
||||||
|
autoScroll();
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const cWidth = (e) => {
|
||||||
|
return (e / max.value * 100).toFixed(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadOrderList();
|
||||||
})
|
})
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
clearInterval(timer);
|
clearInterval(timer);
|
||||||
|
@ -74,23 +63,19 @@ onUnmounted(() => {
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div class="scroll-container" ref="scrollContainerRef">
|
<div class="scroll-container" ref="scrollContainerRef">
|
||||||
<div
|
<div v-for="(item, index) in items" :key="index" class="b-list-item">
|
||||||
v-for="(item, index) in items"
|
|
||||||
:key="item.id"
|
|
||||||
class="b-list-item"
|
|
||||||
>
|
|
||||||
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||||
{{ index + 1 }}
|
{{ index + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div class="name">{{ item.text }}</div>
|
<div class="name">{{ item.street_name }}</div>
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<div
|
<div
|
||||||
class="line-body"
|
class="line-body"
|
||||||
:style="{ width: '80%' }"
|
:style="{ width: cWidth(item.order_count) + '%' }"
|
||||||
:class="{ 'line-body2': index >= 3 }"
|
:class="{ 'line-body2': index >= 3 }"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="count">6000</div>
|
<div class="count">{{ item.order_count }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -141,6 +141,7 @@ import border from "../../../components/border.vue"
|
||||||
.car-item {
|
.car-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
.img {
|
.img {
|
||||||
width: 1.3rem;
|
width: 1.3rem;
|
||||||
height: 1.3rem;
|
height: 1.3rem;
|
||||||
|
|
|
@ -5,7 +5,9 @@ import path from 'path';
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
// ... 省略其他配置
|
server: {
|
||||||
|
host: '0.0.0.0'
|
||||||
|
},
|
||||||
optimizeDeps: {
|
optimizeDeps: {
|
||||||
// 开发时 解决这些commonjs包转成esm包
|
// 开发时 解决这些commonjs包转成esm包
|
||||||
include: [
|
include: [
|
||||||
|
|
Loading…
Reference in New Issue