This commit is contained in:
parent
76c4814b75
commit
8fb277ad92
|
|
@ -1,12 +1,6 @@
|
|||
<script setup>
|
||||
import headView from "@/components/headView.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>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
import axios from "@/utils/axios.js";
|
||||
|
||||
export const test = () => {
|
||||
return axios.get('/common/home');
|
||||
export const orderList = (data) => {
|
||||
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 paging from "./paging.vue"
|
||||
import mitt from "@/utils/mitt"
|
||||
import { orderList } from "@/api/index.js"
|
||||
const route = useRouter()
|
||||
|
||||
const ShwostoreType = ref(false)
|
||||
|
|
@ -22,43 +23,31 @@ const hdClick = (e) => {
|
|||
|
||||
|
||||
}
|
||||
const a = (aaa) => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(
|
||||
[
|
||||
`<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);' >排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>`,
|
||||
]
|
||||
|
||||
|
||||
)
|
||||
const initData = (data) => {
|
||||
let arr = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let calss = 'div';
|
||||
if (i % 2 != 0) {
|
||||
calss = 'div div2'
|
||||
}
|
||||
|
||||
|
||||
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({
|
||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||
oddRowBGC: '',
|
||||
|
|
@ -78,8 +67,28 @@ const configs = reactive({
|
|||
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(() => {
|
||||
a(configs);
|
||||
// loadOrderList();
|
||||
mitt.on('showBusinesses', () => {
|
||||
isShow.value = !isShow.value;
|
||||
})
|
||||
|
|
@ -95,12 +104,13 @@ onMounted(() => {
|
|||
<div class="close" @click="isShow = false">关闭</div>
|
||||
</div>
|
||||
<dv-scroll-board
|
||||
ref="scrollBoardRef"
|
||||
:config="configs"
|
||||
@click="hdClick"
|
||||
style="width: 100%; height: 92%"
|
||||
/>
|
||||
<div class="c-l-bottom">
|
||||
<paging></paging>
|
||||
<paging :page="pages" @loadList="loadOrderList"></paging>
|
||||
</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) {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 5px;
|
||||
|
|
|
|||
|
|
@ -1,31 +1,56 @@
|
|||
<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({
|
||||
page: 1,
|
||||
total: 63,
|
||||
pageSize: 30,
|
||||
pageAll: 7
|
||||
total: 0,
|
||||
limit: 10,
|
||||
pageAll: 1,
|
||||
})
|
||||
|
||||
watch(() => props.page, (n, o) => {
|
||||
Object.keys(n).forEach(key => {
|
||||
pages.value[key] = n[key];
|
||||
})
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
|
||||
|
||||
const prev = () => {
|
||||
if (pages.value.page > 1) pages.value.page--;
|
||||
emit('loadList', pages.value);
|
||||
}
|
||||
const next = () => {
|
||||
if (pages.value.page < pages.value.pageAll) pages.value.page++;
|
||||
emit('loadList', pages.value)
|
||||
}
|
||||
const setPage = (page = 1) => {
|
||||
pages.value.page = page;
|
||||
emit('loadList', pages.value)
|
||||
}
|
||||
const getPage = () => {
|
||||
console.log(pages.value.page);
|
||||
if (pages.value.page < 0) pages.value.page = 1;
|
||||
if (pages.value.page > pages.value.pageAll) pages.value.page = pages.value.pageAll;
|
||||
}
|
||||
const input = (e) => {
|
||||
if (e.data >= 0 && e.data <= 9) return getPage();
|
||||
pages.value.page = 1;
|
||||
const blur = (e) => {
|
||||
let value = pages.value.page;
|
||||
if (typeof value === 'number' || (typeof value === 'string' && !isNaN(Number(value)))) {
|
||||
if (value > pages.value.pageAll) pages.value.page = pages.value.pageAll;
|
||||
if (value < 1) pages.value.page = 1;
|
||||
emit('loadList', pages.value)
|
||||
} else {
|
||||
pages.value.page = 1;
|
||||
emit('loadList', pages.value)
|
||||
}
|
||||
}
|
||||
|
||||
emit('loadList', pages.value)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -85,7 +110,7 @@ const input = (e) => {
|
|||
<div class="num" @click="next">{{ ">" }}</div>
|
||||
<div class="btn">
|
||||
<div>前往</div>
|
||||
<input v-model="pages.page" @input="input" />
|
||||
<input v-model="pages.page" @blur="blur" @keyup.enter="blur" />
|
||||
<div>页</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,16 @@ const request = axios.create({
|
|||
timeout: 5000
|
||||
})
|
||||
|
||||
function convertParamsToQueryString (params) {
|
||||
const queryString = Object.keys(params)
|
||||
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
|
||||
.join('&');
|
||||
return queryString;
|
||||
}
|
||||
|
||||
// 请求拦截器
|
||||
request.interceptors.request.use(
|
||||
config => {
|
||||
// 在发送请求之前做些什么，例如添加token、修改请求头等
|
||||
return config;
|
||||
},
|
||||
error => {
|
||||
|
|
|
|||
|
|
@ -2,143 +2,12 @@
|
|||
import { onMounted, reactive, ref } from "vue";
|
||||
import * as echarts from 'echarts';
|
||||
import border from "../../../components/border.vue"
|
||||
const xData2 = reactive(["福集镇", "嘉明镇", "喻寺镇", "得胜镇", "牛滩镇", "兆雅镇",
|
||||
"太伏镇", "云龙镇", "石桥镇", "毗卢镇", "奇峰镇", "潮河镇", "云锦镇"]);
|
||||
const data1 = reactive([200, 100, 200, 200, 100, 120, 150, 164, 153, 140, 255, 284, 230]);
|
||||
const data_bottom = reactive([]);
|
||||
import { orderRanking } from "@/api/index.js"
|
||||
|
||||
const option = reactive({
|
||||
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,
|
||||
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 xData2 = ref([]);
|
||||
const data1 = ref([]);
|
||||
const data_bottom = ref([]);
|
||||
const orderCount = ref(0);
|
||||
|
||||
const echartsRef = ref(null);
|
||||
const initMap = () => {
|
||||
|
|
@ -146,15 +15,166 @@ const initMap = () => {
|
|||
// 基于DOM元素初始化echarts实例
|
||||
const chart = echarts.init(echartsRef.value);
|
||||
|
||||
data1.forEach(item => {
|
||||
data_bottom.push(1)
|
||||
})
|
||||
let option = {
|
||||
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);
|
||||
}
|
||||
|
||||
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(() => {
|
||||
initMap()
|
||||
loadOrderList();
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -165,7 +185,7 @@ onMounted(() => {
|
|||
<div class="box-c">
|
||||
<div class="left">
|
||||
<div class="img">
|
||||
<div class="text">61258</div>
|
||||
<div class="text">{{ orderCount }}</div>
|
||||
</div>
|
||||
<div>订单总数</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script setup>
|
||||
import { onMounted, reactive, ref, inject, nextTick } from "vue";
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
import mitt from "@/utils/mitt";
|
||||
import luxian from "@/assets/json/luxian.json";
|
||||
import hejiang from "@/assets/json/hejiang.json";
|
||||
|
|
@ -101,11 +100,8 @@ const initMap = () => {
|
|||
chart = echarts.init(echartsRef.value);
|
||||
}
|
||||
echarts.registerMap(mapType.name, mapType.json);
|
||||
|
||||
let domImg = document.createElement("img");
|
||||
domImg.style.height = '1000px';
|
||||
domImg.style.width = "1000px";
|
||||
domImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png';
|
||||
let piePatternImg = new Image();
|
||||
piePatternImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35e6b202312021115251405.png';
|
||||
|
||||
|
||||
let option = {
|
||||
|
|
@ -211,10 +207,18 @@ const initMap = () => {
|
|||
// },
|
||||
}
|
||||
},
|
||||
// viewControl: { // 用于控制地图的倾斜和旋转
|
||||
// distance: 120, // 地图与相机的距离
|
||||
// alpha: 35, // 地图的倾斜角度
|
||||
// beta: 0 // 地图的旋转角度
|
||||
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// 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 border from "@/components/border.vue"
|
||||
import mitt from "@/utils/mitt"
|
||||
import { orderList } from "@/api/index.js"
|
||||
|
||||
const initData = (aaa) => {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(
|
||||
[
|
||||
`<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)' >排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>`,
|
||||
]
|
||||
)
|
||||
const initData = (data) => {
|
||||
let arr = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let calss = 'div';
|
||||
if (i % 2 != 0) {
|
||||
calss = 'div div2'
|
||||
}
|
||||
|
||||
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({
|
||||
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>`,
|
||||
|
|
@ -45,28 +41,92 @@ const list = reactive({
|
|||
// evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
||||
oddRowBGC: '',
|
||||
evenRowBGC: "",
|
||||
// columnWidth: [50],
|
||||
columnWidth: [40, 80],
|
||||
align: ['center'],
|
||||
rowNum: 7
|
||||
})
|
||||
const cell1 = reactive({
|
||||
value: 66,
|
||||
label: '66.66%',
|
||||
count: 66542,
|
||||
borderWidth: 1,
|
||||
borderGap: 1,
|
||||
borderRadius: 3,
|
||||
colors: ['#66FFFF', '#FEDB65']
|
||||
})
|
||||
|
||||
const cell = reactive([
|
||||
{
|
||||
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']
|
||||
},
|
||||
{
|
||||
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 = () => {
|
||||
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(() => {
|
||||
initData(list);
|
||||
loadOrderList();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -76,12 +136,9 @@ onMounted(() => {
|
|||
<div class="box">
|
||||
<div class="title">今日订单数</div>
|
||||
<div class="my-day-num">
|
||||
<div class="my-num-item">0</div>
|
||||
<div class="my-num-item">0</div>
|
||||
<div class="my-num-item">5</div>
|
||||
<div class="my-num-item">2</div>
|
||||
<div class="my-num-item">4</div>
|
||||
<div class="my-num-item">1</div>
|
||||
<div class="my-num-item" v-for="(item, index) in cOrder()" :key="index">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-list">
|
||||
<div class="top">
|
||||
|
|
@ -94,38 +151,42 @@ onMounted(() => {
|
|||
<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 class="cylinder">
|
||||
<div class="cy">
|
||||
<div class="text">
|
||||
<div class="top">
|
||||
已完成<span class="sapn">{{ cell1.label }}</span>
|
||||
<div>
|
||||
占比<span class="sapn">{{ cell[0].label }}</span>
|
||||
</div>
|
||||
<div class="num">{{ cell1.count }}</div>
|
||||
<div class="num">{{ cell[0].count }}</div>
|
||||
</div>
|
||||
<dv-percent-pond :config="cell1" class="cell" />
|
||||
<dv-percent-pond :config="cell[0]" class="cell" />
|
||||
<div class="type">待取货订单数</div>
|
||||
</div>
|
||||
<div class="cy">
|
||||
<div class="text">
|
||||
<div>
|
||||
已完成<span class="sapn">{{ cell1.label }}</span>
|
||||
占比<span class="sapn">{{ cell[1].label }}</span>
|
||||
</div>
|
||||
<div class="num">{{ cell1.count }}</div>
|
||||
<div class="num">{{ cell[1].count }}</div>
|
||||
</div>
|
||||
<dv-percent-pond :config="cell1" class="cell" />
|
||||
<dv-percent-pond :config="cell[1]" class="cell" />
|
||||
<div class="type">未配送订单数</div>
|
||||
</div>
|
||||
<div class="cy">
|
||||
<div class="text">
|
||||
<div>
|
||||
已完成<span class="sapn">{{ cell1.label }}</span>
|
||||
占比<span class="sapn">{{ cell[2].label }}</span>
|
||||
</div>
|
||||
<div class="num">{{ cell1.count }}</div>
|
||||
<div class="num">{{ cell[2].count }}</div>
|
||||
</div>
|
||||
<dv-percent-pond :config="cell1" class="cell" />
|
||||
<dv-percent-pond :config="cell[2]" class="cell" />
|
||||
<div class="type">已完成订单数</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) {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 5px;
|
||||
|
|
|
|||
|
|
@ -1,40 +1,8 @@
|
|||
<script setup>
|
||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||
import border from "../../../components/border.vue"
|
||||
const list = reactive({
|
||||
data: [
|
||||
[`<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' },
|
||||
])
|
||||
import { orderRanking } from "@/api/index.js"
|
||||
const items = ref([])
|
||||
const scrollContainerRef = ref(null);
|
||||
let timer = null;
|
||||
const autoScroll = () => {
|
||||
|
|
@ -51,10 +19,31 @@ const autoScroll = () => {
|
|||
}, 50)
|
||||
}, 1000)
|
||||
}
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
autoScroll();
|
||||
|
||||
const max = ref(0);
|
||||
|
||||
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(() => {
|
||||
clearInterval(timer);
|
||||
|
|
@ -74,23 +63,19 @@ onUnmounted(() => {
|
|||
"
|
||||
>
|
||||
<div class="scroll-container" ref="scrollContainerRef">
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
:key="item.id"
|
||||
class="b-list-item"
|
||||
>
|
||||
<div v-for="(item, index) in items" :key="index" class="b-list-item">
|
||||
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="name">{{ item.text }}</div>
|
||||
<div class="name">{{ item.street_name }}</div>
|
||||
<div class="line">
|
||||
<div
|
||||
class="line-body"
|
||||
:style="{ width: '80%' }"
|
||||
:style="{ width: cWidth(item.order_count) + '%' }"
|
||||
:class="{ 'line-body2': index >= 3 }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="count">6000</div>
|
||||
<div class="count">{{ item.order_count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -141,6 +141,7 @@ import border from "../../../components/border.vue"
|
|||
.car-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.img {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@ import path from 'path';
|
|||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
// ... 省略其他配置
|
||||
server: {
|
||||
host: '0.0.0.0'
|
||||
},
|
||||
optimizeDeps: {
|
||||
// 开发时 解决这些commonjs包转成esm包
|
||||
include: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue