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

更新

This commit is contained in:
weipengfei 2024-01-22 18:08:02 +08:00
parent c4b37c31ca
commit 089f5367d6
5 changed files with 215 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/App.vue
View File

@ -1,24 +1,58 @@
<script setup>
import { Push } from '@/common/push'
import mitt from "@/utils/mitt";
import {useRoute} from "vue-router";
import {useRoute, useRouter} from "vue-router";
import { useAppStore } from "@/store/app.js";
const route = useRoute();
const router = useRouter();
console.log(route);
const appSotre = useAppStore();
var connection = new Push({
url: 'ws://192.168.1.24:3131', // websocket地址
const refresh = ()=>{ //刷新命令
console.log(route.path=='/index');
if(route.path=='/index'){
if(appSotre.address.areaCode) router.push({
path: '/index',
query:{
areaCode: appSotre.address.areaCode
}
})
else router.push({
path: '/index'
})
}else location.reload();
}
const back = ()=>{
if(route.path!='/index'){
if(appSotre.address.areaCode) router.push({
path: '/index',
query:{
areaCode: appSotre.address.areaCode
}
})
else router.push({
path: '/index'
})
}
}
const connection = new Push({
url: 'wss://chat.lihaink.cn/tts', // websocket地址
app_key: 'aaea61749929eb53a4bd75a1474c1d27',
});
// 假设用户uid为1
var uid = 5;
const uid = 5;
// 浏览器监听user-2频道的消息，也就是用户uid为1的用户消息
var user_channel = connection.subscribe('user-' + uid);
const user_channel = connection.subscribe('user-' + uid);
// 当user-2频道有message事件的消息时
user_channel.on('message', function (data) {
mitt.emit(data.content.event, data.content.data);
if(data.content.event=='refresh') refresh();
if(data.content.event=='back') back();
else mitt.emit(data.content.event, data.content.data);
console.log("收到消息--",data)

9
src/components/areaList.vue
View File

@ -2,6 +2,7 @@
import { defineProps, defineEmits, ref, nextTick, onMounted, onUnmounted, } from "vue"
import { useRouter } from 'vue-router'
import { useAppStore } from "@/store/app.js";
import mitt from "@/utils/mitt";
const router = useRouter()
const emit = defineEmits(['offAreaList']);
@ -79,6 +80,14 @@ const show = () => {
choseArea.value = !choseArea.value;
}
mitt.on("choseTown", (data) => {
console.log(data, ...props.list);
let town = props.list.find((item) => item.name == data.name);
if (town && town.code) {
choseTownFn(town)
}
});
defineExpose({
open, close, show
})

130
src/components/headView.vue
View File

@ -8,12 +8,12 @@ import { useAppStore } from "@/store/app.js";
import { useUserStore } from "@/store/user.js";
import axios from "axios";
const reload = inject('reload');
const reload = inject("reload");
const info = reactive({
address: '泸县',
pinyin: 'luxian'
})
address: "泸县",
pinyin: "luxian",
});
const appStore = useAppStore();
const userSotre = useUserStore();
@ -21,80 +21,79 @@ const userSotre = useUserStore();
const areaListRef = ref(null);
// 选择镇
const choseArea = ref(null)
const choseArea = ref(null);
const open = () => {
if (list.value.length > 0) areaListRef.value.show();
}
};
// 关闭
const offAreaList = (e) => {
Object.keys(e).forEach(key => {
Object.keys(e).forEach((key) => {
if (e[key]) {
info[key] = e[key];
}
})
});
info.address = e.name;
mitt.emit('map_info', info);
mitt.emit("map_info", info);
reload();
}
};
const list = ref([])
const list = ref([]);
const initList = async () => {
let street = appStore.street;
if (street?.length == 0) {
let { data } = await getStreet({
area_code: appStore.address.areaCode
})
area_code: appStore.address.areaCode,
});
street = data;
appStore.setStreet(street);
}
let area = appStore.area;
if (userSotre.userInfo.street_code) {
let data = street.find(item => item.code == appStore.address.streetCode);
let data = street.find((item) => item.code == appStore.address.streetCode);
info.address = data?.name;
list.value = [];
appStore.setAddress({
areaCode: appStore.address.areaCode,
streetCode: appStore.address.streetCode
})
streetCode: appStore.address.streetCode,
});
} else {
let data = area.find(item => item.code == appStore.address.areaCode);
let data = area.find((item) => item.code == appStore.address.areaCode);
info.address = data?.name;
list.value = [data, ...street];
if (appStore.address.streetCode) {
data = street.find(item => item.code == appStore.address.streetCode);
data = street.find((item) => item.code == appStore.address.streetCode);
info.address = data?.name;
}
appStore.setAddress({
areaCode: appStore.address.areaCode,
streetCode: appStore.address.streetCode
})
streetCode: appStore.address.streetCode,
});
}
mitt.emit('map_info', info);
}
mitt.emit("map_info", info);
};
const initList2 = async () => {
getArea({
city_code: 510500
}).then(res=>{
city_code: 510500,
}).then((res) => {
console.log(res);
// list.value = res.data;
// appStore.setAddress({
// areaCode: res.data[0].code,
// streetCode: ''
// })
})
mitt.emit('map_info', info);
}
});
mitt.emit("map_info", info);
};
const router = useRouter()
const route = useRoute()
const router = useRouter();
const route = useRoute();
const navToDelivery = () => {
if (route.path == '/') {
if (route.path == "/") {
// router.push('/delivery');
return;
}
else router.back();
}
} else router.back();
};
let nowTime = ref([]);
@ -107,41 +106,58 @@ const updateClock = () => {
let m = now.getMonth() + 1;
let d = now.getDate();
nowTime.value[0] = y + '.' + m.toString().padStart(2, '0') + '.' + d.toString().padStart(2, '0');
nowTime.value[0] =
y +
"." +
m.toString().padStart(2, "0") +
"." +
d.toString().padStart(2, "0");
nowTime.value[1] = hours.toString().padStart(2, '0') + ':' +
minutes.toString().padStart(2, '0') + ':' +
seconds.toString().padStart(2, '0');
}
nowTime.value[1] =
hours.toString().padStart(2, "0") +
":" +
minutes.toString().padStart(2, "0") +
":" +
seconds.toString().padStart(2, "0");
};
const logout = () => {
// router.replace('/login')
router.push('/login')
}
router.push("/login");
};
const weather = ref("暂无天气信息")
const weather = ref("暂无天气信息");
const initWeather = (city = 510500) => {
axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=5731d3b4c3f34e09226e084ce556e259`).then((res) => {
if (res.data.status == 1) {
weather.value = res.data.lives[0].weather;
}
}).catch((e) => {
console.log(e);
})
}
axios
.get(
`https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=5731d3b4c3f34e09226e084ce556e259`
)
.then((res) => {
if (res.data.status == 1) {
weather.value = res.data.lives[0].weather;
}
})
.catch((e) => {
console.log(e);
});
};
mitt.on("choserArea", (data)=>{
console.log(data);
})
mitt.on("choserArea", (data) => {
appStore.setAddress({
areaCode: data.code,
streetCode: "",
});
initList();
});
onMounted(() => {
console.log(route);
if(route.query.areaCode){
console.log('route',route.query.areaCode);
if (route.query.areaCode) {
console.log("route", route.query.areaCode);
appStore.setAddress({
areaCode: route.query.areaCode,
streetCode: route.query.streetCode||''
})
streetCode: route.query.streetCode || "",
});
}
initList();
initList2();
@ -150,7 +166,7 @@ onMounted(() => {
setInterval(updateClock, 1000);
initWeather();
})
});
</script>
<template>

7
src/router/index.js
View File

@ -3,12 +3,13 @@ import { createRouter, createWebHistory } from "vue-router"
const routes = [
{
path: '/',
name: 'index',
name: 'app',
component: () => import('../layout/index.vue'),
redirect: 'index',
children: [
{
path: '/',
name: '',
path: '/index',
name: 'index',
component: () => import('../view/index/index.vue')
},
{

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

@ -9,22 +9,22 @@ const loading = ref(true);
const props = defineProps({
list: {
type: Object,
default: () => []
default: () => [],
},
open: {
type: String,
default: ''
}
})
default: ()=>"",
},
});
const initMap = () => {
AMapLoader.load({
key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
Loca: {
version: '2.0.0'
}
version: "2.0.0",
},
})
.then((AMap) => {
map = new AMap.Map("container", {
@ -35,98 +35,102 @@ const initMap = () => {
mapStyle: "amap://styles/darkblue",
});
// 监听地图加载完成事件
map.on('complete', () => {
map.on("complete", () => {
// 地图加载完成后执行的操作
setTimeout(() => {
loading.value = false;
}, 500)
}, 500);
});
map.setPitch(30);
let geocoder = new AMap.Geocoder();
if (props.open.length>0) {
let geocoder = new AMap.Geocoder();
geocoder.getLocation(props.open, function (status, result) {
if (status === "complete" && result.info === "OK") {
// 获取成功，result.geocodes包含了返回的经纬度信息
let latlong = result.geocodes[0].location;
let start = [latlong.lng, latlong.lat];
let line = [];
map.setCenter(start);
// 创建 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: start, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
icon: icon,
offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
});
geocoder.getLocation(props.open, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 获取成功，result.geocodes包含了返回的经纬度信息
let latlong = result.geocodes[0].location;
let start = [latlong.lng, latlong.lat];
let line = [];
map.setCenter(start);
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
// 创建 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: start, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
icon: icon,
offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
props.list.forEach(item => {
geocoder.getLocation(item, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 获取成功，result.geocodes包含了返回的经纬度信息
let geocodes = result.geocodes[0].location;
line.push([geocodes.lng, geocodes.lat]);
if (line.length == props.list.length) {
initLine(start, line);
props.list.forEach((item) => {
geocoder.getLocation(item, function (status, result) {
if (status === "complete" && result.info === "OK") {
// 获取成功，result.geocodes包含了返回的经纬度信息
let geocodes = result.geocodes[0].location;
line.push([geocodes.lng, geocodes.lat]);
if (line.length == props.list.length) {
initLine(start, line);
}
} else {
// 获取失败，可根据具体需求进行错误处理
console.log("获取经纬度失败");
}
} else {
// 获取失败，可根据具体需求进行错误处理
console.log('获取经纬度失败');
}
})
})
} else {
// 获取失败，可根据具体需求进行错误处理
console.log('获取经纬度失败');
}
});
});
});
} else {
// 获取失败，可根据具体需求进行错误处理
console.log("获取经纬度失败", props);
// setTimeout(() => {
// initMap();
// }, 2000);
}
setTimeout(() => {
loading.value = false;
}, 500);
});
}
})
.catch((e) => {
console.log(e);
});
}
};
const initLine = (start = [], line = []) => {
let features = [];
line.forEach((item => {
line.forEach((item) => {
features.push({
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
start,
item
]
}
},)
}))
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [start, item],
},
});
});
// 创建 Loca 实例
let loca = new Loca.Container({
map: map
map: map,
});
// 创建数据源
let dataSource = new Loca.GeoJSONSource({
// url: 'xxx.geojson', 或者使用 data 字段
data: {
"type": "FeatureCollection",
"features": features
type: "FeatureCollection",
features: features,
},
});
@ -140,9 +144,9 @@ const initLine = (start = [], line = []) => {
depth: true,
});
pulseLink.setSource(dataSource)
pulseLink.setSource(dataSource);
pulseLink.setStyle({
unit: 'meter',
unit: "meter",
dash: [80, 0, 80, 0],
lineWidth: function () {
return [30, 5];
@ -158,17 +162,21 @@ const initLine = (start = [], line = []) => {
},
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)'];
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)',
headColor: "rgba(91, 219, 246, 1)",
trailColor: "rgba(255, 255,0,0)",
});
// 添加到地图上
loca.add(pulseLink);
loca.animate.start();
}
};
onMounted(() => {
initMap();
@ -182,13 +190,13 @@ onUnmounted(() => {
<template>
<div class="c-box">
<div id="container"></div>
<div class="loading" v-if="loading">
<div class="loading" v-show="loading">
<dv-loading>加载中...</dv-loading>
</div>
</div>
</template>
<style scoped lang ="scss">
<style scoped lang="scss">
.c-box {
width: 100%;
height: 100%;