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

更新

This commit is contained in:
weipengfei 2023-11-30 18:36:25 +08:00
parent 531e30f6be
commit 8b5ec1bb74
13 changed files with 30793 additions and 4857 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -10,6 +10,11 @@
font-size: 16px; font-size: 16px;
} }
</style> </style>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'e8b6cb44e8e431d68052c8e10db99264',
}
</script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

6
src/App.vue
View File

@ -1,10 +1,14 @@
<script setup> <script setup>
import headView from "@/components/headView.vue";
import Businesses from "@/components/Businesses.vue" import Businesses from "@/components/Businesses.vue"
</script> </script>
<template> <template>
<dv-full-screen-container class="body"> <dv-full-screen-container class="body">
<router-view></router-view> <headView></headView>
<div style="height: calc(100% - 60px)">
<router-view></router-view>
</div>
<Businesses class="businesses"></Businesses> <Businesses class="businesses"></Businesses>
</dv-full-screen-container> </dv-full-screen-container>
</template> </template>

BIN
src/assets/delivery_img/icon10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/assets/delivery_img/icon9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

4848
src/assets/json/luxian.json
View File

File diff suppressed because one or more lines are too long

30558
src/assets/json/luxian2.json Normal file
View File

File diff suppressed because it is too large Load Diff

123
src/view/delivery/components/AMap.vue
View File

@ -8,14 +8,17 @@ const loading = ref(true);
onMounted(() => { onMounted(() => {
AMapLoader.load({ AMapLoader.load({
key: "f14dcaeb4df441ab84ed0a0768f04f95", // 申请好的Web端开发者Key，首次调用 load 时必填 key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
Loca: {
version: '2.0.0'
}
}) })
.then((AMap) => { .then((AMap) => {
map = new AMap.Map("container", { map = new AMap.Map("container", {
// 设置地图容器id // 设置地图容器id
viewMode: "2D", // 是否为3D地图模式 viewMode: "3D", // 是否为3D地图模式
zoom: 15, // 初始化地图级别 zoom: 15, // 初始化地图级别
center: [105.441866, 28.87098], // 初始化地图中心点位置 center: [105.441866, 28.87098], // 初始化地图中心点位置
mapStyle: "amap://styles/darkblue", mapStyle: "amap://styles/darkblue",
@ -27,6 +30,122 @@ onMounted(() => {
loading.value = false; loading.value = false;
}, 500) }, 500)
}); });
map.setPitch(30);
// 创建 AMap.Icon 实例：
const icon = new AMap.Icon({
size: new AMap.Size(50, 60), // 图标尺寸
// vue3/vite 需要用特定的本地图片引入方式，不可require引入
image: new URL('/src/assets/delivery_img/icon10.png', import.meta.url).href, // Icon的图像
imageSize: new AMap.Size(50, 60), // 根据所设置的大小拉伸或压缩图片
imageOffset: new AMap.Pixel(0, 0)
});
// 创建一个 Marker 实例：
const marker = new AMap.Marker({
position: new AMap.LngLat(105.441866, 28.87098), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
icon: icon,
offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
// 创建 Loca 实例
var loca = new Loca.Container({
map: map
});
// 创建数据源
var dataSource = new Loca.GeoJSONSource({
// url: 'xxx.geojson', 或者使用 data 字段
data: {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[105.441866, 28.87098],
[105.449866, 28.87998]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[105.441866, 28.87098],
[105.440866, 28.87658]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[105.441866, 28.87098],
[105.435866, 28.87658]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[105.441866, 28.87098],
[105.43, 28.87]
]
}
}
]
},
});
// 弧线
var pulseLink = new Loca.PulseLinkLayer({
// loca,
zIndex: 30,
opacity: 1,
visible: true,
zooms: [6, 22],
depth: true,
});
pulseLink.setSource(dataSource)
pulseLink.setStyle({
unit: 'meter',
dash: [80, 0, 80, 0],
lineWidth: function () {
return [30, 5];
},
height: function (index, feat) {
return feat.distance / 3 + 10;
},
// altitude: 1000,
smoothSteps: 30,
speed: function (index, prop) {
// return 1 + Math.random() * 200;
return 200;
},
flowLength: 300,
lineColors: function (index, feat) {
return ['rgba(47, 194, 250, 0.20)', 'rgba(91, 219, 246, 0.70)', 'rgba(0, 156, 255, 0.20)'];
},
maxHeightScale: 0.4, // 弧顶位置比例
headColor: 'rgba(91, 219, 246, 1)',
trailColor: 'rgba(255, 255,0,0)',
});
loca.add(pulseLink);
loca.animate.start();
// 添加到地图上
}) })
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);

24
src/view/delivery/components/AMapLeft.vue
View File

@ -8,14 +8,15 @@ const loading = ref(true);
onMounted(() => { onMounted(() => {
AMapLoader.load({ AMapLoader.load({
key: "f14dcaeb4df441ab84ed0a0768f04f95", // 申请好的Web端开发者Key，首次调用 load 时必填 key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}) })
.then((AMap) => { .then((AMap) => {
map = new AMap.Map("container-left", { map = new AMap.Map("container-left", {
// 设置地图容器id // 设置地图容器id
viewMode: "2D", // 是否为3D地图模式 viewMode: "2D", // 是否为3D地图模式
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
zoom: 15, // 初始化地图级别 zoom: 15, // 初始化地图级别
center: [105.441866, 28.87098], // 初始化地图中心点位置 center: [105.441866, 28.87098], // 初始化地图中心点位置
mapStyle: "amap://styles/darkblue", mapStyle: "amap://styles/darkblue",
@ -27,6 +28,25 @@ onMounted(() => {
loading.value = false; loading.value = false;
}, 500) }, 500)
}); });
const driving = new AMap.Driving({
map: map,
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
// eslint-disable-next-line no-undef
policy: 'panel',
isOutline: false, //描边
showTraffic: false, //路况
// autoFitView: false //自动调整
})
const points = [
{ keyword: '莲花池街道里海科技', city: '泸州' },
{ keyword: '万象汇', city: '泸州' }
]
driving.search(points, (status, result) => {
// 未出错时，result即是对应的路线规划方案
console.log('status=', status)
console.log('result=', result)
})
}) })
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);

35
src/view/delivery/components/center.vue
View File

@ -2,6 +2,10 @@
import { reactive, ref } from "vue" import { reactive, ref } from "vue"
import border from "@/components/border.vue"; import border from "@/components/border.vue";
import AMap from "./AMap.vue"; import AMap from "./AMap.vue";
const test = () => {
console.log('ss');
}
</script> </script>
<template> <template>
@ -10,6 +14,17 @@ import AMap from "./AMap.vue";
<AMap></AMap> <AMap></AMap>
</div> </div>
<div class="border"></div> <div class="border"></div>
<div class="btn">
<div class="c-b" @click.stop="test">
<div class="text">已取货(100)单</div>
</div>
<div class="c-b" @click.stop="test">
<div class="text">已配送(100)单</div>
</div>
<div class="c-b" @click.stop="test">
<div class="text">已完成(100)单</div>
</div>
</div>
</div> </div>
</template> </template>
@ -32,5 +47,25 @@ import AMap from "./AMap.vue";
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.btn {
position: absolute;
top: 30%;
left: 2rem;
.c-b {
cursor: pointer;
background-image: url(../../../assets/delivery_img/icon9.png);
background-size: 100% 100%;
height: 4rem;
width: 11.5rem;
margin-bottom: 1.4rem;
display: flex;
align-items: center;
.text {
margin-left: 4.5rem;
font-size: 0.8rem;
color: #fff;
}
}
}
} }
</style> </style>

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

@ -55,7 +55,7 @@ onUnmounted(() => {
<template> <template>
<border> <border>
<div class="box"> <div class="box">
<div class="title">订单排行榜</div> <div class="title">配送商品排行榜</div>
<div <div
style=" style="
height: calc(100% - 60px); height: calc(100% - 60px);

9
src/view/delivery/index.vue
View File

@ -1,6 +1,4 @@
<script setup> <script setup>
import headView from "@/components/headView.vue";
import border from "@/components/border.vue";
import leftItem from "./components/left.vue"; import leftItem from "./components/left.vue";
import centerItem from "./components/center.vue"; import centerItem from "./components/center.vue";
import bottomItem from "./components/bottom.vue"; import bottomItem from "./components/bottom.vue";
@ -8,7 +6,6 @@ import rightItem from "./components/right.vue";
</script> </script>
<template> <template>
<headView></headView>
<div class="center"> <div class="center">
<div class="item"> <div class="item">
<leftItem style="height: 98%"></leftItem> <leftItem style="height: 98%"></leftItem>
@ -26,7 +23,7 @@ import rightItem from "./components/right.vue";
<style scoped lang="scss"> <style scoped lang="scss">
.center { .center {
display: flex; display: flex;
height: calc(100% - 60px); height: 100%;
justify-content: space-evenly; justify-content: space-evenly;
.item { .item {
width: 26%; width: 26%;
@ -36,6 +33,10 @@ import rightItem from "./components/right.vue";
justify-content: space-evenly; justify-content: space-evenly;
align-content: center; align-content: center;
/* border: 1px solid red; */ /* border: 1px solid red; */
& > .div {
box-sizing: border-box;
padding: 10px;
}
} }
.item_c { .item_c {
width: 72%; width: 72%;

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

@ -47,10 +47,15 @@ let dataValue = [
name: '测试四', value: [105.70, 29.23], name: '测试四', value: [105.70, 29.23],
store: 9887, team: 1562, store: 9887, team: 1562,
}, },
{
name: '泸县', value: [105.372029, 29.141426],
store: 9999, team: 1000,
},
] ]
const customFormatter = (params) => { const customFormatter = (params) => {
console.log(params.data); // console.log(params.data);
return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}` return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
} }
@ -143,9 +148,10 @@ const initMap = () => {
borderWidth: 1, borderWidth: 1,
areaColor: "#3f5171", areaColor: "#3f5171",
shadowColor: "#5bdbf6", shadowColor: "#5bdbf6",
shadowOffsetX: 4, shadowOffsetX: 5,
shadowOffsetY: 8, shadowOffsetY: 10,
// shadowBlur: 2 // shadowBlur: 2
shadowBlur: 20,
}, },
}, },
}, },
@ -194,10 +200,10 @@ const initMap = () => {
areaColor: "#3f5171", areaColor: "#3f5171",
borderColor: "#fff", borderColor: "#fff",
borderWidth: 1, borderWidth: 1,
shadowColor: "#5bdbf6", // shadowColor: "#5bdbf6",
shadowOffsetX: 5, // shadowOffsetX: 5,
shadowOffsetY: 10, // shadowOffsetY: 10,
shadowBlur: 30, // shadowBlur: 30,
// areaColor: { // areaColor: {
// image: domImg, // image: domImg,
// repeat: 'no-repeat', // repeat: 'no-repeat',
@ -238,18 +244,6 @@ const initMap = () => {
} }
}, },
], ],
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); chart.setOption(option);

6
src/view/index/index.vue
View File

@ -1,5 +1,4 @@
<script setup> <script setup>
import headView from "@/components/headView.vue";
import leftItme1 from "./components/leftItme1.vue"; import leftItme1 from "./components/leftItme1.vue";
import leftItme2 from "./components/leftItme2.vue"; import leftItme2 from "./components/leftItme2.vue";
import centerItme1 from "./components/centerItem1.vue"; import centerItme1 from "./components/centerItem1.vue";
@ -9,7 +8,6 @@ import rightItem2 from "./components/rightItem2.vue";
</script> </script>
<template> <template>
<headView></headView>
<div class="center"> <div class="center">
<div class="item"> <div class="item">
<leftItme1 style="height: 58%"></leftItme1> <leftItme1 style="height: 58%"></leftItme1>
@ -29,7 +27,7 @@ import rightItem2 from "./components/rightItem2.vue";
<style scoped lang="scss"> <style scoped lang="scss">
.center { .center {
display: flex; display: flex;
height: calc(100% - 60px); height: 100%;
justify-content: space-evenly; justify-content: space-evenly;
.item { .item {
width: 26%; width: 26%;
@ -45,7 +43,7 @@ import rightItem2 from "./components/rightItem2.vue";
} }
} }
.item_c { .item_c {
width: 44%; width: 45%;
} }
} }
</style> </style>