This commit is contained in:
weipengfei 2023-12-02 19:04:16 +08:00
parent 76c4814b75
commit 8fb277ad92
11 changed files with 450 additions and 308 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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,
// }, // },
}, },
{ {

View File

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

View File

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

View File

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

View File

@ -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: [