-
已取货(100)单
+
+
+ 待取货({{ appStore.delivery.pending_order_count }})单
+
-
-
已配送(100)单
+
+
+ 配送中({{ appStore.delivery.delivering_order_count }})单
+
-
-
已完成(100)单
+
+
+ 已完成({{ appStore.delivery.finished_order_count }})单
+
diff --git a/src/view/delivery/components/left.vue b/src/view/delivery/components/left.vue
index 4fe1c70..503b4e1 100644
--- a/src/view/delivery/components/left.vue
+++ b/src/view/delivery/components/left.vue
@@ -5,137 +5,164 @@ import AMapLeft from "./AMapLeft.vue";
import * as echarts from 'echarts';
import { useRoute } from "vue-router"
import { latestLogistics } from "@/api/index.js";
+import { logisticsCount } from "@/api/index.js";
+import { useAppStore } from "@/store/app.js"
+
+const appStore = useAppStore();
const route = useRoute();
let noramlSize = 16;
-var datas = {
- textValue: "100%",
+
+const echartsRef = ref(null);
+
+let datas = {
+ textValue: "",
colors: ["#31829d", "#009cff", "#4b5fdb"],
legendArr: ["待取货", "配送中", "已送达"],
dataArr: [
- { value: 335, name: "待取货" },
- { value: 210, name: "配送中" },
- { value: 410, name: "已送达" },
+ { value: 0, name: "待取货" },
+ { value: 0, name: "配送中" },
+ { value: 0, name: "已送达" },
],
- company: "个"
+ company: "件"
};
-const option = {
- backgroundColor: "rgba(0,0,0,0)",
- color: datas.colors,
- grid: {
- left: "0%",
- right: "0%",
- bottom: "0%",
- top: "0%"
- },
- graphic: {
- elements: [
- {
- type: 'text',
- left: 'center', // 相对父元素居中
- bottom: '50%', // 相对父元素居中
- style: {
- fill: '#fff',
- text: datas.textValue,
- font: '18px Microsoft YaHei'
- }
- }
- ]
- },
- tooltip: {
- trigger: "item",
- backgroundColor: "#f6f6f6",
- textStyle: {
- color: "#000"
- },
- formatter: "{b}: {c}" + datas.company + " ({d}%)"
- },
- legend: {
- icon: "rect",
- bottom: "5%",
- left: "center",
- itemWidth: 12,
- itemHeight: 12,
- // itemGap: 50, //图例间隙
- textStyle: {
- color: "#fff",
- fontSize: noramlSize
- },
- data: datas.legendArr
- },
- series: [
- {
- name: "",
- type: "pie",
- radius: ["45%", "60%"],
- center: ["50%", "45%"],
- itemStyle: {
- normal: {
- borderWidth: 10,
- borderColor: "#092846"
- }
- },
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'bottom'
- },
- labelLine: {
- normal: {
- show: true,
- lineStyle: {
- color: "#138af4"
- },
- length: 20,
- length2: 50,
- }
- },
- data: datas.dataArr
- },
- {
- type: "pie",
- radius: "40%",
- center: ["50%", "45%"],
- z: -2,
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- itemStyle: {
- color: 'rgba(255,255,255,0.2)'
- },
- data: [100]
- },
- ]
-};
-
-const echartsRef = ref(null)
const initEcahrts = () => {
// 基于DOM元素初始化echarts实例
const chart = echarts.init(echartsRef.value);
+ let option = {
+ backgroundColor: "rgba(0,0,0,0)",
+ color: datas.colors,
+ grid: {
+ left: "0%",
+ right: "0%",
+ bottom: "0%",
+ top: "0%"
+ },
+ graphic: {
+ elements: [
+ {
+ type: 'text',
+ left: 'center', // 相对父元素居中
+ bottom: '50%', // 相对父元素居中
+ style: {
+ fill: '#fff',
+ text: datas.textValue,
+ font: '18px Microsoft YaHei'
+ }
+ }
+ ]
+ },
+ tooltip: {
+ trigger: "item",
+ backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
+ textStyle: {
+ color: '#fff'
+ },
+ borderColor: "rgba(18, 57, 60, .8)",
+ axisPointer: {
+ type: 'shadow',
+ shadowStyle: {
+ color: 'rgba(0, 11, 34, .4)',
+ }
+ },
+ formatter: "{b}: {c}" + datas.company + " ({d}%)"
+ },
+ legend: {
+ icon: "rect",
+ bottom: "5%",
+ left: "center",
+ itemWidth: 12,
+ itemHeight: 12,
+ // itemGap: 50, //图例间隙
+ textStyle: {
+ color: "#fff",
+ fontSize: noramlSize
+ },
+ data: datas.legendArr
+ },
+ series: [
+ {
+ name: "",
+ type: "pie",
+ radius: ["45%", "60%"],
+ center: ["50%", "45%"],
+ itemStyle: {
+ normal: {
+ borderWidth: 10,
+ borderColor: "#092846"
+ }
+ },
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'bottom'
+ },
+ labelLine: {
+ normal: {
+ show: true,
+ lineStyle: {
+ color: "#138af4"
+ },
+ length: 20,
+ length2: 50,
+ }
+ },
+ data: datas.dataArr
+ },
+ {
+ type: "pie",
+ radius: "40%",
+ center: ["50%", "45%"],
+ z: -2,
+ tooltip: {
+ show: false
+ },
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ },
+ itemStyle: {
+ color: 'rgba(255,255,255,0.2)'
+ },
+ data: [100]
+ },
+ ]
+ };
+
// 使用配置项显示图表
chart.setOption(option);
}
const info = ref({});
+const delivery = ref({});
const loadInfo = () => {
latestLogistics({
- areaCode: 510524,
- streetCode: 510524100,
+ areaCode: appStore.delivery_address.areaCode,
+ streetCode: appStore.delivery_address.streetCode,
}).then(res => {
info.value = res.data;
})
+ logisticsCount({
+ areaCode: appStore.delivery_address.areaCode,
+ streetCode: appStore.delivery_address.streetCode
+ }).then(res => {
+ delivery.value = res.data;
+ datas.dataArr[0].value = res.data.pending_order_count;
+ datas.dataArr[1].value = res.data.delivering_order_count;
+ datas.dataArr[2].value = res.data.finished_order_count;
+ initEcahrts();
+ appStore.setDelivery(res.data);
+ })
}
onMounted(() => {
loadInfo();
- initEcahrts();
})
@@ -237,7 +264,7 @@ onMounted(() => {