This commit is contained in:
parent
6e8853f757
commit
45513d94d2
|
|
@ -11,6 +11,7 @@
|
|||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"echarts": "^5.4.3",
|
||||
"mitt": "^3.0.1",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
|
|
@ -941,6 +942,11 @@
|
|||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/mitt": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
|
||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"echarts": "^5.4.3",
|
||||
"mitt": "^3.0.1",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
|
|
|
|||
11
src/App.vue
11
src/App.vue
|
|
@ -1,9 +1,11 @@
|
|||
<script setup>
|
||||
import Businesses from "@/components/Businesses.vue"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dv-full-screen-container class="body">
|
||||
<router-view></router-view>
|
||||
<Businesses class="businesses"></Businesses>
|
||||
</dv-full-screen-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -19,4 +21,13 @@
|
|||
color: #fff;
|
||||
background-color: rgba($color: #000000, $alpha: 0.8);
|
||||
}
|
||||
.businesses {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 999999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,173 @@
|
|||
<script setup>
|
||||
// 102B3
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
import paging from "./paging.vue"
|
||||
import mitt from "@/utils/mitt"
|
||||
const route = useRouter()
|
||||
|
||||
const ShwostoreType = ref(false)
|
||||
const test = () => {
|
||||
console.log(6)
|
||||
}
|
||||
|
||||
const isShow = ref(false);
|
||||
|
||||
const hdClick = (e) => {
|
||||
// console.log(e)
|
||||
if (e.columnIndex == 10) {
|
||||
// alert(45)
|
||||
route.replace('/storeLogin')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
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 configs = reactive({
|
||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||
oddRowBGC: '',
|
||||
evenRowBGC: "",
|
||||
rowNum: 20,
|
||||
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));'>订单编号</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>`,
|
||||
`<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>`,
|
||||
],
|
||||
data: [
|
||||
]
|
||||
})
|
||||
onMounted(() => {
|
||||
a(configs);
|
||||
mitt.on('showBusinesses', () => {
|
||||
isShow.value = !isShow.value;
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div class="bus" v-if="isShow">
|
||||
<div class="c-list-box">
|
||||
<div class="c-l-top">
|
||||
<div class="title">订单列表</div>
|
||||
<div class="close" @click="isShow = false">关闭</div>
|
||||
</div>
|
||||
<dv-scroll-board
|
||||
:config="configs"
|
||||
@click="hdClick"
|
||||
style="width: 100%; height: 92%"
|
||||
/>
|
||||
<div class="c-l-bottom">
|
||||
<paging></paging>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bus {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.c-list-box {
|
||||
width: 94%;
|
||||
height: 94%;
|
||||
position: relative;
|
||||
background-image: url(../assets/img/list-box.png);
|
||||
background-size: 100% 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
box-sizing: border-box;
|
||||
padding: 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.c-l-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-family: "ifonts";
|
||||
}
|
||||
.close {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.1rem 1.5rem;
|
||||
background-color: rgba(0, 156, 255, 0.3);
|
||||
border: 0.07rem solid rgba(91, 219, 246, 1);
|
||||
border-radius: 0.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.c-l-bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ceil) {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
:deep(.header-item) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,47 +1,67 @@
|
|||
<script setup>
|
||||
import { defineProps, defineEmits, ref } from "vue"
|
||||
import { defineProps, defineEmits, ref, nextTick, } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['offAreaList'])
|
||||
const props = defineProps({
|
||||
choseArea: Boolean,
|
||||
})
|
||||
const emit = defineEmits(['offAreaList']);
|
||||
const choseArea = ref(false);
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
name: '泸县'
|
||||
name: '泸县',
|
||||
pinyin: 'luxian',
|
||||
},
|
||||
{
|
||||
name: '江阳'
|
||||
name: '江阳区',
|
||||
pinyin: 'jiangyang',
|
||||
},
|
||||
{
|
||||
name: '龙马潭'
|
||||
name: '龙马潭区',
|
||||
pinyin: 'longma',
|
||||
},
|
||||
{
|
||||
name: '通滩'
|
||||
name: '纳溪区',
|
||||
pinyin: 'naxi',
|
||||
},
|
||||
{
|
||||
name: '纳溪'
|
||||
name: '合江县',
|
||||
pinyin: 'hejiang',
|
||||
},
|
||||
{
|
||||
name: '合面'
|
||||
name: '叙永县',
|
||||
pinyin: 'xuyong',
|
||||
},
|
||||
{
|
||||
name: '叙永'
|
||||
name: '古蔺县',
|
||||
pinyin: 'gulin',
|
||||
},
|
||||
])
|
||||
|
||||
// 选镇
|
||||
const choseTownFn = (item) => {
|
||||
emit('offAreaList', item);
|
||||
props.choseArea = false;
|
||||
}
|
||||
|
||||
const open = () => {
|
||||
choseArea.value = true;
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
choseArea.value = false;
|
||||
}
|
||||
|
||||
const show = () => {
|
||||
choseArea.value = !choseArea.value;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open, close, show
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div class="address" v-if="props.choseArea">
|
||||
<div class="address" v-show="choseArea == true">
|
||||
<div
|
||||
class="address-li"
|
||||
@click="choseTownFn(item)"
|
||||
|
|
|
|||
|
|
@ -1,26 +1,53 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { reactive, ref, provide, nextTick, onMounted } from "vue";
|
||||
import areaList from "./areaList.vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import mitt from "@/utils/mitt";
|
||||
|
||||
const info = reactive({
|
||||
address: '泸县'
|
||||
address: '泸县',
|
||||
pinyin: 'luxian'
|
||||
})
|
||||
|
||||
const areaListRef = ref(null);
|
||||
|
||||
// 选择镇
|
||||
const choseArea = ref(null)
|
||||
const open = () => {
|
||||
choseArea.value = !choseArea.value;
|
||||
areaListRef.value.show();
|
||||
}
|
||||
// 关闭
|
||||
const offAreaList = (e) => {
|
||||
Object.keys(e).forEach(key => {
|
||||
if (e[key]) {
|
||||
info[key] = e[key];
|
||||
}
|
||||
})
|
||||
info.address = e.name;
|
||||
mitt.emit('map_info', info);
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const navToDelivery = () => {
|
||||
if (route.path == '/') router.push('/delivery');
|
||||
else router.back();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
mitt.emit('map_info', info);
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<img class="logo item" src="/src/assets/head_img/logo.png" />
|
||||
<img
|
||||
class="logo item"
|
||||
src="/src/assets/head_img/logo.png"
|
||||
@click="navToDelivery"
|
||||
/>
|
||||
<div class="item">2023.11.17</div>
|
||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<div class="item">11:30:20</div>
|
||||
|
|
@ -31,6 +58,7 @@ const offAreaList = (e) => {
|
|||
<img src="/src/assets/head_img/location.png" alt="" />
|
||||
{{ info.address }}
|
||||
<areaList
|
||||
ref="areaListRef"
|
||||
:choseArea="choseArea"
|
||||
@offAreaList="offAreaList"
|
||||
style="position: absolute; top: 100%; left: 0"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,128 @@
|
|||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const pages = ref({
|
||||
page: 1,
|
||||
total: 63,
|
||||
pageSize: 30,
|
||||
pageAll: 7
|
||||
})
|
||||
|
||||
const prev = () => {
|
||||
if (pages.value.page > 1) pages.value.page--;
|
||||
}
|
||||
const next = () => {
|
||||
if (pages.value.page < pages.value.pageAll) pages.value.page++;
|
||||
}
|
||||
const setPage = (page = 1) => {
|
||||
pages.value.page = page;
|
||||
}
|
||||
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;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pad-box">
|
||||
<div class="total">共 {{ pages.total }} 条</div>
|
||||
<div class="num" @click="prev">{{ "<" }}</div>
|
||||
<div class="num" :class="{ c_num: pages.page == 1 }" @click="setPage(1)">
|
||||
1
|
||||
</div>
|
||||
<div
|
||||
class="num"
|
||||
:class="{ c_num: pages.page == 2 }"
|
||||
v-if="pages.pageAll > 1"
|
||||
@click="setPage(2)"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div
|
||||
class="num"
|
||||
:class="{ c_num: pages.page == 3 }"
|
||||
v-if="pages.pageAll > 2"
|
||||
@click="setPage(3)"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div
|
||||
class="num"
|
||||
:class="{ c_num: pages.page == '' }"
|
||||
v-if="pages.pageAll - 3 > 3"
|
||||
>
|
||||
...
|
||||
</div>
|
||||
<div
|
||||
class="num"
|
||||
:class="{ c_num: pages.page == pages.pageAll - 2 }"
|
||||
v-if="pages.pageAll - 2 > 3"
|
||||
@click="setPage(pages.pageAll - 2)"
|
||||
>
|
||||
{{ pages.pageAll - 2 }}
|
||||
</div>
|
||||
<div
|
||||
class="num"
|
||||
:class="{ c_num: pages.page == pages.pageAll - 1 }"
|
||||
v-if="pages.pageAll - 1 > 3"
|
||||
@click="setPage(pages.pageAll - 1)"
|
||||
>
|
||||
{{ pages.pageAll - 1 }}
|
||||
</div>
|
||||
<div
|
||||
class="num"
|
||||
:class="{ c_num: pages.page == pages.pageAll }"
|
||||
v-if="pages.pageAll > 3"
|
||||
@click="setPage(pages.pageAll)"
|
||||
>
|
||||
{{ pages.pageAll }}
|
||||
</div>
|
||||
<div class="num" @click="next">{{ ">" }}</div>
|
||||
<div class="btn">
|
||||
<div>前往</div>
|
||||
<input v-model="pages.page" @input="input" />
|
||||
<div>页</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pad-box {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
div {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.total {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
.num {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
.c_num {
|
||||
color: rgba(91, 219, 246, 1);
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
margin-left: 0.5rem;
|
||||
align-items: center;
|
||||
input {
|
||||
background-color: rgba(0, 156, 255, 0.2);
|
||||
border: 1px solid rgba(91, 219, 246, 0.4);
|
||||
border-radius: 0.2rem;
|
||||
width: 2rem;
|
||||
margin: 0 1rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import mitt from "mitt"
|
||||
|
||||
const m = mitt();
|
||||
|
||||
export default m;
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
|
||||
let map = null;
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
AMapLoader.load({
|
||||
key: "f14dcaeb4df441ab84ed0a0768f04f95", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
|
|
@ -18,6 +20,13 @@ onMounted(() => {
|
|||
center: [105.441866, 28.87098], // 初始化地图中心点位置
|
||||
mapStyle: "amap://styles/darkblue",
|
||||
});
|
||||
// 监听地图加载完成事件
|
||||
map.on('complete', () => {
|
||||
// 地图加载完成后执行的操作
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500)
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
|
|
@ -30,12 +39,30 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div id="container"></div>
|
||||
<div class="c-box">
|
||||
<div id="container"></div>
|
||||
<div class="loading" v-if="loading">
|
||||
<dv-loading>加载中...</dv-loading>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#container {
|
||||
<style scoped lang ="scss">
|
||||
.c-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #05273d;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
|
||||
let map = null;
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
AMapLoader.load({
|
||||
key: "f14dcaeb4df441ab84ed0a0768f04f95", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
|
|
@ -11,13 +13,20 @@ onMounted(() => {
|
|||
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
map = new AMap.Map("container_left", {
|
||||
map = new AMap.Map("container-left", {
|
||||
// 设置地图容器id
|
||||
viewMode: "2D", // 是否为3D地图模式
|
||||
zoom: 15, // 初始化地图级别
|
||||
center: [105.441866, 28.87098], // 初始化地图中心点位置
|
||||
mapStyle: "amap://styles/darkblue",
|
||||
});
|
||||
// 监听地图加载完成事件
|
||||
map.on('complete', () => {
|
||||
// 地图加载完成后执行的操作
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500)
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
|
|
@ -30,12 +39,30 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div id="container_left"></div>
|
||||
<div class="c-box">
|
||||
<div id="container-left"></div>
|
||||
<div class="loading" v-if="loading">
|
||||
<dv-loading>加载中...</dv-loading>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#container_left {
|
||||
<style scoped lang ="scss">
|
||||
.c-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
#container-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #05273d;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { onMounted, reactive, ref } from "vue"
|
||||
import border from "@/components/border.vue";
|
||||
import * as echarts from 'echarts';
|
||||
import mitt from "@/utils/mitt"
|
||||
|
||||
const list = reactive({
|
||||
header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
|
||||
|
|
@ -324,6 +325,10 @@ const initEcahrts = () => {
|
|||
chart.setOption(option);
|
||||
}
|
||||
|
||||
const openList = () => {
|
||||
mitt.emit('showBusinesses')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initEcahrts()
|
||||
})
|
||||
|
|
@ -354,7 +359,7 @@ onMounted(() => {
|
|||
<img src="/src/assets/img/item.png" />
|
||||
<div>今日订单</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex" @click="openList">
|
||||
<div>查看更多</div>
|
||||
<div>{{ "〉" }}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import border from "@/components/border.vue";
|
||||
|
||||
import AMap from "./AMap.vue";
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 80vh;
|
||||
height: 80vh;
|
||||
width: 50vh;
|
||||
height: 50vh;
|
||||
transform-style: preserve-3d;
|
||||
/*border: 1px solid #fff;*/
|
||||
animation: starrotate 10s linear;
|
||||
|
|
|
|||
|
|
@ -1,72 +1,181 @@
|
|||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { onMounted, reactive, ref, inject } from "vue";
|
||||
import * as echarts from 'echarts';
|
||||
import mitt from "@/utils/mitt";
|
||||
import luxian from "@/assets/json/luxian.json";
|
||||
import hejiang from "@/assets/json/hejiang.json";
|
||||
import xuyong from "@/assets/json/xuyong.json";
|
||||
import gulin from "@/assets/json/gulin.json";
|
||||
import jiangyang from "@/assets/json/jiangyang.json";
|
||||
import longma from "@/assets/json/longma.json";
|
||||
import naxi from "@/assets/json/naxi.json";
|
||||
|
||||
const mapType = reactive({
|
||||
name: '',
|
||||
json: ''
|
||||
})
|
||||
|
||||
const changeType = (name) => {
|
||||
|
||||
const changeType = (name = 'luxian') => {
|
||||
mapType.name = name;
|
||||
if (name == 'luxian') mapType.json = luxian;
|
||||
if (name == 'hejiang') mapType.json = hejiang;
|
||||
if (name == 'xuyong') mapType.json = xuyong;
|
||||
if (name == 'gulin') mapType.json = gulin;
|
||||
if (name == 'jiangyang') mapType.json = jiangyang;
|
||||
if (name == 'longma') mapType.json = longma;
|
||||
if (name == 'naxi') mapType.json = naxi;
|
||||
}
|
||||
changeType('luxian');
|
||||
changeType()
|
||||
|
||||
const dataValue = [
|
||||
{ name: '北京', value: [105.38, 29.15] },
|
||||
{ name: '上海', value: [105.32, 29.15] },
|
||||
let dataValue = [
|
||||
{
|
||||
name: '测试一', value: [105.38, 29.15],
|
||||
store: 2065, team: 33,
|
||||
},
|
||||
{
|
||||
name: '测试二', value: [105.62, 29.05],
|
||||
store: 665, team: 895,
|
||||
},
|
||||
{
|
||||
name: '测试三', value: [105.55, 29.10],
|
||||
store: 66, team: 5422,
|
||||
},
|
||||
{
|
||||
name: '测试四', value: [105.70, 29.23],
|
||||
store: 9887, team: 1562,
|
||||
},
|
||||
]
|
||||
|
||||
const customFormatter = (params) => {
|
||||
console.log(params.data);
|
||||
return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
|
||||
}
|
||||
|
||||
const initDateValue = () => {
|
||||
dataValue.forEach(item => {
|
||||
item.label = {
|
||||
show: true, // 显示标签
|
||||
formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
|
||||
fontSize: 12, // 字体大小
|
||||
fontWeight: 'bold', // 字体粗细
|
||||
color: '#fff', // 字体颜色
|
||||
offset: [-50, -40], // 标签偏移量，可根据需要调整
|
||||
rich: {
|
||||
img: {
|
||||
backgroundColor: {
|
||||
image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
|
||||
},
|
||||
height: 40,
|
||||
width: 140,
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14,
|
||||
fontFamily: 'ifonts',
|
||||
align: 'center',
|
||||
padding: [0, 0, 20, 0]
|
||||
},
|
||||
t: {
|
||||
fontSize: 10,
|
||||
align: 'center'
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const echartsRef = ref(null);
|
||||
let chart = null;
|
||||
const initMap = () => {
|
||||
// 基于DOM元素初始化echarts实例
|
||||
const chart = echarts.init(echartsRef.value);
|
||||
if (chart == null) {
|
||||
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 option = {
|
||||
animation: false,
|
||||
//geo方式地理坐标系组件。
|
||||
geo: {
|
||||
map: mapType.name,
|
||||
zoom: 1.0,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 25,
|
||||
// 高亮状态下的多边形和标签样式。
|
||||
|
||||
},
|
||||
// 选中状态下的多边形和标签样式
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: '#546686', //地图背景色
|
||||
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||
borderWidth: 1,
|
||||
},
|
||||
geo: [
|
||||
{
|
||||
map: mapType.name,
|
||||
zoom: 1.0,
|
||||
label: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
// aspectScale:0.75, //长宽比
|
||||
// roam: true, //是否允许缩放
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#546686', //地图背景色
|
||||
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||
borderWidth: 1,
|
||||
areaColor: "#3f5171",
|
||||
shadowColor: "#5bdbf6",
|
||||
shadowOffsetX: 4,
|
||||
shadowOffsetY: 8,
|
||||
// shadowBlur: 2
|
||||
show: false,
|
||||
disabled: true,
|
||||
color: '#fff',
|
||||
fontSize: 25,
|
||||
// 高亮状态下的多边形和标签样式。
|
||||
|
||||
},
|
||||
// 选中状态下的多边形和标签样式
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// // color: '#546686', //地图背景色
|
||||
// borderColor: '#fff', //省市边界线00fcff 516a89
|
||||
// borderWidth: 1,
|
||||
// },
|
||||
// label: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
select: {
|
||||
disabled: true
|
||||
},
|
||||
// aspectScale:0.75, //长宽比
|
||||
// roam: true, //是否允许缩放
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// color: '#546686', //地图背景色
|
||||
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||
borderWidth: 1,
|
||||
areaColor: "#3f5171",
|
||||
shadowColor: "#5bdbf6",
|
||||
shadowOffsetX: 4,
|
||||
shadowOffsetY: 8,
|
||||
// shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
//第一层投影
|
||||
{
|
||||
map: mapType.name,
|
||||
zlevel: -1,
|
||||
zoom: 1.01, //当前视角的缩放比例
|
||||
roam: false, //是否开启平游或缩放
|
||||
show: true,
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
select: {
|
||||
disabled: true
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderJoin: "round",
|
||||
borderColor: "rgba(176,228,252,1)",
|
||||
borderWidth: 3,
|
||||
areaColor: "rgba(133,188,232,1)",
|
||||
shadowColor: "rgba(133,188,232,.7)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 25,
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "map",
|
||||
|
|
@ -85,51 +194,67 @@ const initMap = () => {
|
|||
shadowColor: "#5bdbf6",
|
||||
shadowOffsetX: 5,
|
||||
shadowOffsetY: 10,
|
||||
shadowBlur: 30
|
||||
shadowBlur: 30,
|
||||
// areaColor: {
|
||||
// image: domImg,
|
||||
// repeat: 'no-repeat',
|
||||
// },
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "scatter",
|
||||
coordinateSystem: "geo",
|
||||
data: dataValue,
|
||||
// symbolSize: function(val) {
|
||||
// return val[2] / 10;
|
||||
// },
|
||||
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
|
||||
symbolSize: [40, 30],
|
||||
hoverSymbolSize: [120, 90],
|
||||
tooltip: {
|
||||
formatter (value) {
|
||||
console.log(value);
|
||||
return "";
|
||||
},
|
||||
show: true
|
||||
},
|
||||
encode: {
|
||||
value: 2
|
||||
},
|
||||
hoverSymbolSize: [60, 45],
|
||||
label: {
|
||||
formatter: "{b}",
|
||||
position: "right",
|
||||
formatter: "",
|
||||
position: "center",
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#0efacc"
|
||||
},
|
||||
// tooltip: {
|
||||
// formatter (value) {
|
||||
// console.log(value);
|
||||
// return "";
|
||||
// },
|
||||
// show: true
|
||||
// },
|
||||
// encode: {
|
||||
// value: 2
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: "#0efacc"
|
||||
// },
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
],
|
||||
graphic: [{
|
||||
type: 'image',
|
||||
left: 0,
|
||||
top: 0,
|
||||
z: 10,
|
||||
// bounding: 'raw',
|
||||
style: {
|
||||
image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png', // 纹理图片 URL
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}]
|
||||
}
|
||||
// 使用配置项显示图表
|
||||
chart.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
mitt.on('map_info', e => {
|
||||
console.log(e);
|
||||
changeType(e.pinyin);
|
||||
initDateValue()
|
||||
initMap();
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,50 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import border from "../../../components/border.vue"
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { onMounted, reactive, ref } from "vue"
|
||||
import border from "@/components/border.vue"
|
||||
import mitt from "@/utils/mitt"
|
||||
|
||||
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 list = reactive({
|
||||
header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
|
||||
data: [
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
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>`,
|
||||
],
|
||||
data: [],
|
||||
// index: true,
|
||||
headerBGC: 'rgba(0, 168, 255, 0.76)',
|
||||
oddRowBGC: 'rgba(91, 219, 246, 0.20)',
|
||||
evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
||||
// headerBGC: 'rgba(0, 168, 255, 0.76)',
|
||||
// oddRowBGC: 'rgba(91, 219, 246, 0.20)',
|
||||
// evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
||||
oddRowBGC: '',
|
||||
evenRowBGC: "",
|
||||
// columnWidth: [50],
|
||||
align: ['center'],
|
||||
rowNum: 7
|
||||
|
|
@ -33,17 +59,21 @@ const cell1 = reactive({
|
|||
colors: ['#66FFFF', '#FEDB65']
|
||||
})
|
||||
|
||||
const route = useRouter()
|
||||
|
||||
const navToDelivery = () => {
|
||||
route.push('/delivery')
|
||||
|
||||
const openList = () => {
|
||||
mitt.emit('showBusinesses')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initData(list);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<border>
|
||||
<div class="box" @click="navToDelivery">
|
||||
<div class="box">
|
||||
<div class="title">今日订单数</div>
|
||||
<div class="my-day-num">
|
||||
<div class="my-num-item">0</div>
|
||||
|
|
@ -59,7 +89,7 @@ const navToDelivery = () => {
|
|||
<img src="/src/assets/img/item.png" />
|
||||
<div>今日订单</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex" @click="openList">
|
||||
<div>查看更多</div>
|
||||
<div>{{ "〉" }}</div>
|
||||
</div>
|
||||
|
|
@ -173,8 +203,14 @@ const navToDelivery = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
::v-deep .dv-scroll-board .rows .row-item {
|
||||
margin-bottom: 0.6rem;
|
||||
|
||||
:deep(.ceil) {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
:deep(.header-item) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
.cylinder {
|
||||
|
|
|
|||
Loading…
Reference in New Issue