This commit is contained in:
parent
8fb277ad92
commit
3c361aef23
|
@ -1,5 +1,9 @@
|
|||
import axios from "@/utils/axios.js";
|
||||
|
||||
export const getStreet = (data) => {
|
||||
return axios.get('city/get_street', { params: data });
|
||||
}
|
||||
|
||||
export const orderList = (data) => {
|
||||
return axios.get('dataview/curr_order_info', { params: data });
|
||||
}
|
||||
|
@ -7,3 +11,16 @@ export const orderList = (data) => {
|
|||
export const orderRanking = (data) => {
|
||||
return axios.get('dataview/order_ranking', { params: data });
|
||||
}
|
||||
|
||||
|
||||
export const deliveredProductRanking = (data) => {
|
||||
return axios.get('dataview/delivered_product_ranking', { params: data });
|
||||
}
|
||||
|
||||
export const vehicleList = (data) => {
|
||||
return axios.get('dataview/vehicle_list', { params: data });
|
||||
}
|
||||
|
||||
export const latestLogistics = (data) => {
|
||||
return axios.get('dataview/latest_logistics', { params: data });
|
||||
}
|
|
@ -1,48 +1,67 @@
|
|||
<script setup>
|
||||
import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['offAreaList']);
|
||||
const choseArea = ref(false);
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
name: '泸县',
|
||||
pinyin: 'luxian',
|
||||
},
|
||||
{
|
||||
name: '江阳区',
|
||||
pinyin: 'jiangyang',
|
||||
},
|
||||
{
|
||||
name: '龙马潭区',
|
||||
pinyin: 'longma',
|
||||
},
|
||||
{
|
||||
name: '纳溪区',
|
||||
pinyin: 'naxi',
|
||||
},
|
||||
{
|
||||
name: '合江县',
|
||||
pinyin: 'hejiang',
|
||||
},
|
||||
{
|
||||
name: '叙永县',
|
||||
pinyin: 'xuyong',
|
||||
},
|
||||
{
|
||||
name: '古蔺县',
|
||||
pinyin: 'gulin',
|
||||
},
|
||||
])
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Object,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
// const list = ref([
|
||||
// {
|
||||
// name: '泸县',
|
||||
// pinyin: 'luxian',
|
||||
// },
|
||||
// // {
|
||||
// // name: '江阳区',
|
||||
// // pinyin: 'jiangyang',
|
||||
// // },
|
||||
// // {
|
||||
// // name: '龙马潭区',
|
||||
// // pinyin: 'longma',
|
||||
// // },
|
||||
// // {
|
||||
// // name: '纳溪区',
|
||||
// // pinyin: 'naxi',
|
||||
// // },
|
||||
// // {
|
||||
// // name: '合江县',
|
||||
// // pinyin: 'hejiang',
|
||||
// // },
|
||||
// // {
|
||||
// // name: '叙永县',
|
||||
// // pinyin: 'xuyong',
|
||||
// // },
|
||||
// // {
|
||||
// // name: '古蔺县',
|
||||
// // pinyin: 'gulin',
|
||||
// // },
|
||||
// ])
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
// 选镇
|
||||
const choseTownFn = (item) => {
|
||||
emit('offAreaList', item);
|
||||
appStore.setMapInfo(item.pinyin);
|
||||
if (item.code.length == 6) {
|
||||
appStore.setMapInfo('luxian');
|
||||
appStore.setAddress({
|
||||
areaCode: item.code,
|
||||
streetCode: ''
|
||||
})
|
||||
} else {
|
||||
appStore.setAddress({
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: item.code
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const open = () => {
|
||||
|
@ -62,11 +81,11 @@ defineExpose({
|
|||
})
|
||||
|
||||
onMounted(() => {
|
||||
list.value.forEach(item => {
|
||||
if (item.pinyin == appStore.map_info) {
|
||||
choseTownFn(item)
|
||||
}
|
||||
})
|
||||
// list.value.forEach(item => {
|
||||
// if (item.pinyin == appStore.map_info) {
|
||||
// choseTownFn(item)
|
||||
// }
|
||||
// })
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
|
@ -3,12 +3,16 @@ import { reactive, ref, provide, nextTick, onMounted } from "vue";
|
|||
import areaList from "./areaList.vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import mitt from "@/utils/mitt";
|
||||
import { getStreet } from "@/api/index.js"
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
|
||||
const info = reactive({
|
||||
address: '泸县',
|
||||
pinyin: 'luxian'
|
||||
})
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const areaListRef = ref(null);
|
||||
|
||||
// 选择镇
|
||||
|
@ -27,11 +31,29 @@ const offAreaList = (e) => {
|
|||
mitt.emit('map_info', info);
|
||||
}
|
||||
|
||||
const list = ref([])
|
||||
const initList = () => {
|
||||
getStreet({
|
||||
area_code: appStore.address.areaCode
|
||||
}).then(res => {
|
||||
list.value = res.data;
|
||||
appStore.setAddress({
|
||||
areaCode: appStore.address.appStore,
|
||||
streetCode: res.data[0].code
|
||||
})
|
||||
info.address = res.data[0].name
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const navToDelivery = () => {
|
||||
if (route.path == '/') router.push('/delivery');
|
||||
if (route.path == '/') {
|
||||
// router.push('/delivery');
|
||||
return;
|
||||
}
|
||||
else router.back();
|
||||
}
|
||||
|
||||
|
@ -57,6 +79,8 @@ onMounted(() => {
|
|||
|
||||
mitt.emit('map_info', info);
|
||||
|
||||
initList();
|
||||
|
||||
// 每秒钟更新一次时间
|
||||
setInterval(updateClock, 1000);
|
||||
})
|
||||
|
@ -81,6 +105,7 @@ onMounted(() => {
|
|||
{{ info.address }}
|
||||
<areaList
|
||||
ref="areaListRef"
|
||||
:list="list"
|
||||
:choseArea="choseArea"
|
||||
@offAreaList="offAreaList"
|
||||
style="position: absolute; top: 100%; left: 0"
|
||||
|
|
|
@ -4,13 +4,26 @@ import { ref } from "vue"
|
|||
export const useAppStore = defineStore('app', () => {
|
||||
const map_info = ref(localStorage.getItem('map_info') || 'luxian');
|
||||
|
||||
const address = ref(JSON.parse(localStorage.getItem('address') || '{}'));
|
||||
if (!address.value.areaCode) {
|
||||
address.value = { areaCode: 510521, streetCode: 510521100 };
|
||||
}
|
||||
|
||||
const setMapInfo = (e) => {
|
||||
map_info.value = e;
|
||||
localStorage.setItem('map_info', e);
|
||||
}
|
||||
|
||||
const setAddress = (e) => {
|
||||
address.value.areaCode = e.areaCode;
|
||||
address.value.streetCode = e.streetCode;
|
||||
localStorage.setItem('address', JSON.stringify(e));
|
||||
}
|
||||
|
||||
return {
|
||||
map_info,
|
||||
setMapInfo
|
||||
address,
|
||||
setMapInfo,
|
||||
setAddress
|
||||
}
|
||||
})
|
|
@ -192,7 +192,7 @@ const initEcahrts = () => {
|
|||
seriesData.push(obj3);
|
||||
}
|
||||
});
|
||||
console.log(seriesData);
|
||||
// console.log(seriesData);
|
||||
const option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
grid: {
|
||||
|
|
|
@ -3,18 +3,19 @@ import { onMounted, reactive, ref } from "vue"
|
|||
import border from "@/components/border.vue";
|
||||
import AMapLeft from "./AMapLeft.vue";
|
||||
import * as echarts from 'echarts';
|
||||
import { useRoute } from "vue-router"
|
||||
import { latestLogistics } from "@/api/index.js";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
var fontColor = "#000";
|
||||
var seriesName = "";
|
||||
let noramlSize = 16;
|
||||
var datas = {
|
||||
textValue: "100%",
|
||||
colors: ["#31829d", "#009cff", "#4b5fdb"],
|
||||
legendArr: ["待取货", "待配送", "已送达"],
|
||||
legendArr: ["待取货", "配送中", "已送达"],
|
||||
dataArr: [
|
||||
{ value: 335, name: "待取货" },
|
||||
{ value: 210, name: "待配送" },
|
||||
{ value: 210, name: "配送中" },
|
||||
{ value: 410, name: "已送达" },
|
||||
],
|
||||
company: "个"
|
||||
|
@ -121,8 +122,20 @@ const initEcahrts = () => {
|
|||
chart.setOption(option);
|
||||
}
|
||||
|
||||
const info = ref({});
|
||||
|
||||
const loadInfo = () => {
|
||||
latestLogistics({
|
||||
areaCode: 510524,
|
||||
streetCode: 510524100,
|
||||
}).then(res => {
|
||||
info.value = res.data;
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initEcahrts()
|
||||
loadInfo();
|
||||
initEcahrts();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
@ -136,11 +149,9 @@ onMounted(() => {
|
|||
<div class="top">
|
||||
<div>
|
||||
订单编号
|
||||
<span style="margin-left: 1rem"
|
||||
>bzj20230923163643650ea39ba256c</span
|
||||
>
|
||||
<span style="margin-left: 1rem">{{ info.order_sn }}</span>
|
||||
</div>
|
||||
<div>23-11-20</div>
|
||||
<div>{{ info.create_time?.split(" ")[0] }}</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="c"></div>
|
||||
|
@ -156,7 +167,7 @@ onMounted(() => {
|
|||
<div>商户名称</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>天天超市</div>
|
||||
<div>{{ info.mer_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
|
@ -164,7 +175,7 @@ onMounted(() => {
|
|||
<div>商品名称</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>山花纯牛奶100ml</div>
|
||||
<div>{{ info.store_name || "-" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
@ -183,7 +194,7 @@ onMounted(() => {
|
|||
<div>收件人</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>王**</div>
|
||||
<div>{{ info.real_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
|
@ -191,7 +202,7 @@ onMounted(() => {
|
|||
<div>收件人电话</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>159****3366</div>
|
||||
<div>{{ info.user_phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
@ -209,7 +220,7 @@ onMounted(() => {
|
|||
<div>收件地址</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>泸县草芥幸福小区一号楼10-22</div>
|
||||
<div>{{ info.user_address }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
|
@ -217,7 +228,7 @@ onMounted(() => {
|
|||
<div>当前状态</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>订单已完成</div>
|
||||
<div>{{ info.status }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
@ -151,6 +151,7 @@ onUnmounted(() => {
|
|||
height: 0.8rem;
|
||||
background-color: #0a385b;
|
||||
border-radius: 0.8rem;
|
||||
overflow: hidden;
|
||||
.line-body {
|
||||
height: 100%;
|
||||
border-radius: 0.8rem;
|
||||
|
|
|
@ -186,8 +186,13 @@ const initMap = () => {
|
|||
{
|
||||
type: "map",
|
||||
map: mapType.name,
|
||||
label: {
|
||||
emphasis: {
|
||||
disabled: true
|
||||
show: false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
disabled: false,
|
||||
},
|
||||
select: {
|
||||
disabled: true
|
||||
|
|
|
@ -145,6 +145,7 @@ onUnmounted(() => {
|
|||
height: 0.8rem;
|
||||
background-color: #0a385b;
|
||||
border-radius: 0.8rem;
|
||||
overflow: hidden;
|
||||
.line-body {
|
||||
height: 100%;
|
||||
border-radius: 0.8rem;
|
||||
|
|
|
@ -1,6 +1,42 @@
|
|||
<script setup>
|
||||
import border from "../../../components/border.vue"
|
||||
import border from "@/components/border.vue"
|
||||
import { vehicleList } from "@/api/index.js";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const list = ref([])
|
||||
const count = ref(0);
|
||||
|
||||
const loadList = () => {
|
||||
vehicleList({
|
||||
eaCode: '510524',
|
||||
streetCode: '510524100',
|
||||
}).then(res => {
|
||||
list.value = res.data.list;
|
||||
count.value = res.data.count;
|
||||
// for (let i = 0; i < 2; i++) {
|
||||
// list.value = [...list.value, ...res.data.list];
|
||||
// }
|
||||
})
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const navToDelivery = (id) => {
|
||||
if (route.path == '/') router.push({
|
||||
path: '/delivery',
|
||||
query: {
|
||||
id
|
||||
}
|
||||
});
|
||||
else router.back();
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -9,7 +45,7 @@ import border from "../../../components/border.vue"
|
|||
<div class="title">三轮车列表</div>
|
||||
<div class="car-box">
|
||||
<div class="car">
|
||||
<div class="count">13</div>
|
||||
<div class="count">{{ count }}</div>
|
||||
<div class="name">三轮车总数</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
|
@ -21,12 +57,20 @@ import border from "../../../components/border.vue"
|
|||
<div
|
||||
class="car-item"
|
||||
:class="{ 'car-item2': index > 1 }"
|
||||
v-for="(item, index) in 4"
|
||||
v-for="(item, index) in list.slice(0, 4)"
|
||||
:key="index"
|
||||
@click="navToDelivery(item.id)"
|
||||
>
|
||||
<img class="img" src="/src/assets/img/icon-car.png" />
|
||||
<div>川A E792P</div>
|
||||
<div>{{ item.license }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="car-item"
|
||||
:class="{ 'car-item2': index > 2 && index < 5 }"
|
||||
v-for="(item, index) in 4 - list.length"
|
||||
:key="'em' + index"
|
||||
style="background-image: none"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -35,12 +79,20 @@ import border from "../../../components/border.vue"
|
|||
<div
|
||||
class="car-item"
|
||||
:class="{ 'car-item2': index > 2 && index < 5 }"
|
||||
v-for="(item, index) in 9"
|
||||
v-for="(item, index) in list.slice(4, 13)"
|
||||
:key="index"
|
||||
@click="navToDelivery(item.id)"
|
||||
>
|
||||
<img class="img" src="/src/assets/img/icon-car.png" />
|
||||
<div>川A E792P</div>
|
||||
<div>{{ item.license }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="car-item"
|
||||
:class="{ 'car-item2': index > 2 && index < 5 }"
|
||||
v-for="(item, index) in 13 - list.length"
|
||||
:key="'em' + index"
|
||||
style="background-image: none"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -119,6 +171,11 @@ import border from "../../../components/border.vue"
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div {
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -127,7 +184,8 @@ import border from "../../../components/border.vue"
|
|||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
.car-item {
|
||||
height: 33%;
|
||||
width: 33.33%;
|
||||
|
@ -136,6 +194,11 @@ import border from "../../../components/border.vue"
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div {
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.car-item {
|
||||
|
|
|
@ -1,28 +1,10 @@
|
|||
<script setup>
|
||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||
import border from "../../../components/border.vue"
|
||||
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' },
|
||||
{ id: 3, text: '莲花池 8' },
|
||||
{ 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 { deliveredProductRanking } from "@/api/index.js"
|
||||
|
||||
const items = ref([]);
|
||||
const max = ref(0);
|
||||
const scrollContainerRef = ref(null);
|
||||
let timer = null;
|
||||
const autoScroll = () => {
|
||||
|
@ -39,7 +21,27 @@ const autoScroll = () => {
|
|||
}, 50)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const loadList = () => {
|
||||
deliveredProductRanking({
|
||||
areaCode: 510524,
|
||||
streetCode: 510524100,
|
||||
}).then((res) => {
|
||||
items.value = res.data;
|
||||
res.data.forEach(e => {
|
||||
if (+e.total_quantity >= max.value) {
|
||||
max.value = +e.total_quantity;
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const cWidth = (e) => {
|
||||
return (e / max.value * 100).toFixed(0);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadList()
|
||||
nextTick(() => {
|
||||
autoScroll();
|
||||
})
|
||||
|
@ -70,15 +72,17 @@ onUnmounted(() => {
|
|||
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="name">{{ item.text }}</div>
|
||||
<div class="name">
|
||||
<div>{{ item.store_name }}</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div
|
||||
class="line-body"
|
||||
:style="{ width: '80%' }"
|
||||
:style="{ width: cWidth(item.total_quantity) + '%' }"
|
||||
:class="{ 'line-body2': index >= 3 }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="count">6000</div>
|
||||
<div class="count">{{ item.total_quantity }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -128,6 +132,7 @@ onUnmounted(() => {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
.rank {
|
||||
width: 50px;
|
||||
height: 1.5em;
|
||||
|
@ -142,12 +147,24 @@ onUnmounted(() => {
|
|||
}
|
||||
.name {
|
||||
flex: 5;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
div {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 这里的数字表示要显示的行数 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 50%;
|
||||
height: 0.8rem;
|
||||
background-color: #0a385b;
|
||||
border-radius: 0.8rem;
|
||||
overflow: hidden;
|
||||
.line-body {
|
||||
height: 100%;
|
||||
border-radius: 0.8rem;
|
||||
|
|
Loading…
Reference in New Issue