weipengfei
/
trike-datav
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

This commit is contained in:
weipengfei 2023-12-04 18:51:43 +08:00
parent 8fb277ad92
commit 3c361aef23
11 changed files with 260 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/index.js
View File

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

93
src/components/areaList.vue
View File

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

27
src/components/headView.vue
View File

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

15
src/store/app.js
View File

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

2
src/view/delivery/components/bottom.vue
View File

@ -192,7 +192,7 @@ const initEcahrts = () => {
seriesData.push(obj3);
}
});
console.log(seriesData);
// console.log(seriesData);
const option = {
backgroundColor: "rgba(0,0,0,0)",
grid: {

41
src/view/delivery/components/left.vue
View File

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

1
src/view/delivery/components/right.vue
View File

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

7
src/view/index/components/centerMap.vue
View File

@ -186,8 +186,13 @@ const initMap = () => {
{
type: "map",
map: mapType.name,
label: {
emphasis: {
disabled: true
show: false
}
},
emphasis: {
disabled: false,
},
select: {
disabled: true

1
src/view/index/components/leftItme2.vue
View File

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

77
src/view/index/components/rightItem1.vue
View File

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

67
src/view/index/components/rightItem2.vue
View File

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