更新
This commit is contained in:
weipengfei
parent
6e8853f757
commit
45513d94d2
6
package-lock.json
generated
6
package-lock.json
generated
@ -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>
|
||||
|
||||
BIN
src/assets/img/list-box.png
Normal file
BIN
src/assets/img/list-box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
3907
src/assets/json/gulin.json
Normal file
3907
src/assets/json/gulin.json
Normal file
File diff suppressed because it is too large
Load Diff
3715
src/assets/json/jiangyang.json
Normal file
3715
src/assets/json/jiangyang.json
Normal file
File diff suppressed because it is too large
Load Diff
1815
src/assets/json/longma.json
Normal file
1815
src/assets/json/longma.json
Normal file
File diff suppressed because it is too large
Load Diff
3743
src/assets/json/naxi.json
Normal file
3743
src/assets/json/naxi.json
Normal file
File diff suppressed because it is too large
Load Diff
173
src/components/Businesses.vue
Normal file
173
src/components/Businesses.vue
Normal file
@ -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"
|
||||
|
||||
128
src/components/paging.vue
Normal file
128
src/components/paging.vue
Normal file
@ -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>
|
||||
5
src/utils/mitt.js
Normal file
5
src/utils/mitt.js
Normal file
@ -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…
x
Reference in New Issue
Block a user