Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5e461e99ce |
@ -1,4 +1,3 @@
|
||||
# VITE_BASE_URL = 'https://crmeb-test.shop.lihaink.cn/api'
|
||||
VITE_BASE_URL = 'https://crmeb-test.shop.lihaink.cn/api'
|
||||
# VITE_BASE_URL = 'https://shop.lihaink.cn/api'
|
||||
VITE_BASE_URL = 'https://test.shop.lihaink.cn/api'
|
||||
# VITE_BASE_URL = '/'
|
||||
@ -1,7 +1 @@
|
||||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
三轮车数据大屏
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
<style>
|
||||
|
||||
BIN
public/logo.png
BIN
public/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
72
src/App.vue
72
src/App.vue
@ -1,76 +1,4 @@
|
||||
<script setup>
|
||||
import { Push } from '@/common/push'
|
||||
import mitt from "@/utils/mitt";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const appSotre = useAppStore();
|
||||
|
||||
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'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 获取 URL 中的查询参数部分
|
||||
const queryString = window.location.search;
|
||||
|
||||
// 解析查询参数字符串
|
||||
const searchParams = new URLSearchParams(queryString);
|
||||
|
||||
// 读取名为 id 的参数
|
||||
const uid = searchParams.get('local') || localStorage.getItem('local');
|
||||
|
||||
if(searchParams.get('local')) localStorage.setItem('local', searchParams.get('local'));
|
||||
|
||||
const connection = new Push({
|
||||
url: 'wss://chat.lihaink.cn/tts', // websocket地址
|
||||
app_key: 'aaea61749929eb53a4bd75a1474c1d27',
|
||||
});
|
||||
|
||||
// 浏览器监听user-2频道的消息，也就是用户uid为1的用户消息
|
||||
const user_channel = connection.subscribe(uid + 'user-logistics-datav');
|
||||
|
||||
// 当user-2频道有message事件的消息时
|
||||
user_channel.on('message', function (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)
|
||||
|
||||
});
|
||||
// 断线事件
|
||||
user_channel.on('close', function () {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 3.9 KiB |
@ -1,2 +0,0 @@
|
||||
import mitt from 'mitt'
|
||||
export const globalEventBus = mitt()
|
||||
@ -1,751 +0,0 @@
|
||||
|
||||
|
||||
export const Push = function Push(options) {
|
||||
this.doNotConnect = 0;
|
||||
options = options || {};
|
||||
options.heartbeat = options.heartbeat || 25000;
|
||||
options.pingTimeout = options.pingTimeout || 10000;
|
||||
this.config = options;
|
||||
this.uid = 0;
|
||||
this.channels = {};
|
||||
this.connection = null;
|
||||
this.pingTimeoutTimer = 0;
|
||||
Push.instances.push(this);
|
||||
this.createConnection();
|
||||
}
|
||||
|
||||
Push.prototype.checkoutPing = function() {
|
||||
var _this = this;
|
||||
_this.checkoutPingTimer && clearTimeout(_this.checkoutPingTimer);
|
||||
_this.checkoutPingTimer = setTimeout(function () {
|
||||
_this.checkoutPingTimer = 0;
|
||||
if (_this.connection.state === 'connected') {
|
||||
_this.connection.send('{"event":"pusher:ping","data":{}}');
|
||||
if (_this.pingTimeoutTimer) {
|
||||
clearTimeout(_this.pingTimeoutTimer);
|
||||
_this.pingTimeoutTimer = 0;
|
||||
}
|
||||
_this.pingTimeoutTimer = setTimeout(function () {
|
||||
_this.connection.closeAndClean();
|
||||
if (!_this.connection.doNotConnect) {
|
||||
_this.connection.waitReconnect();
|
||||
}
|
||||
}, _this.config.pingTimeout);
|
||||
}
|
||||
}, this.config.heartbeat);
|
||||
};
|
||||
|
||||
Push.prototype.channel = function (name) {
|
||||
return this.channels.find(name);
|
||||
};
|
||||
Push.prototype.allChannels = function () {
|
||||
return this.channels.all();
|
||||
};
|
||||
Push.prototype.createConnection = function () {
|
||||
if (this.connection) {
|
||||
throw Error('Connection already exist');
|
||||
}
|
||||
var _this = this;
|
||||
var url = this.config.url;
|
||||
function updateSubscribed () {
|
||||
for (var i in _this.channels) {
|
||||
_this.channels[i].subscribed = false;
|
||||
}
|
||||
}
|
||||
this.connection = new Connection({
|
||||
url: url,
|
||||
app_key: this.config.app_key,
|
||||
onOpen: function () {
|
||||
_this.connection.state ='connecting';
|
||||
_this.checkoutPing();
|
||||
},
|
||||
onMessage: function(params) {
|
||||
if(_this.pingTimeoutTimer) {
|
||||
clearTimeout(_this.pingTimeoutTimer);
|
||||
_this.pingTimeoutTimer = 0;
|
||||
}
|
||||
|
||||
params = JSON.parse(params.data);
|
||||
var event = params.event;
|
||||
var channel_name = params.channel;
|
||||
|
||||
if (event === 'pusher:pong') {
|
||||
_this.checkoutPing();
|
||||
return;
|
||||
}
|
||||
if (event === 'pusher:error') {
|
||||
throw Error(params.data.message);
|
||||
}
|
||||
var data = JSON.parse(params.data), channel;
|
||||
if (event === 'pusher_internal:subscription_succeeded') {
|
||||
channel = _this.channels[channel_name];
|
||||
channel.subscribed = true;
|
||||
channel.processQueue();
|
||||
channel.emit('pusher:subscription_succeeded');
|
||||
return;
|
||||
}
|
||||
if (event === 'pusher:connection_established') {
|
||||
_this.connection.socket_id = data.socket_id;
|
||||
_this.connection.updateNetworkState('connected');
|
||||
_this.subscribeAll();
|
||||
}
|
||||
if (event.indexOf('pusher_internal') !== -1) {
|
||||
console.log("Event '"+event+"' not implement");
|
||||
return;
|
||||
}
|
||||
channel = _this.channels[channel_name];
|
||||
if (channel) {
|
||||
channel.emit(event, data);
|
||||
}
|
||||
},
|
||||
onClose: function () {
|
||||
updateSubscribed();
|
||||
},
|
||||
onError: function () {
|
||||
updateSubscribed();
|
||||
}
|
||||
});
|
||||
};
|
||||
Push.prototype.disconnect = function () {
|
||||
this.connection.doNotConnect = 1;
|
||||
this.connection.close();
|
||||
};
|
||||
|
||||
Push.prototype.subscribeAll = function () {
|
||||
if (this.connection.state !== 'connected') {
|
||||
return;
|
||||
}
|
||||
for (var channel_name in this.channels) {
|
||||
//this.connection.send(JSON.stringify({event:"pusher:subscribe", data:{channel:channel_name}}));
|
||||
this.channels[channel_name].processSubscribe();
|
||||
}
|
||||
};
|
||||
|
||||
Push.prototype.unsubscribe = function (channel_name) {
|
||||
if (this.channels[channel_name]) {
|
||||
delete this.channels[channel_name];
|
||||
if (this.connection.state === 'connected') {
|
||||
this.connection.send(JSON.stringify({event:"pusher:unsubscribe", data:{channel:channel_name}}));
|
||||
}
|
||||
}
|
||||
};
|
||||
Push.prototype.unsubscribeAll = function () {
|
||||
var channels = Object.keys(this.channels);
|
||||
if (channels.length) {
|
||||
if (this.connection.state === 'connected') {
|
||||
for (var channel_name in this.channels) {
|
||||
this.unsubscribe(channel_name);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.channels = {};
|
||||
};
|
||||
Push.prototype.subscribe = function (channel_name) {
|
||||
if (this.channels[channel_name]) {
|
||||
return this.channels[channel_name];
|
||||
}
|
||||
if (channel_name.indexOf('private-') === 0) {
|
||||
return createPrivateChannel(channel_name, this);
|
||||
}
|
||||
if (channel_name.indexOf('presence-') === 0) {
|
||||
return createPresenceChannel(channel_name, this);
|
||||
}
|
||||
return createChannel(channel_name, this);
|
||||
};
|
||||
Push.instances = [];
|
||||
|
||||
function createChannel(channel_name, push)
|
||||
{
|
||||
var channel = new Channel(push.connection, channel_name);
|
||||
push.channels[channel_name] = channel;
|
||||
channel.subscribeCb = function () {
|
||||
push.connection.send(JSON.stringify({event:"pusher:subscribe", data:{channel:channel_name}}));
|
||||
}
|
||||
channel.processSubscribe();
|
||||
return channel;
|
||||
}
|
||||
|
||||
function createPrivateChannel(channel_name, push)
|
||||
{
|
||||
var channel = new Channel(push.connection, channel_name);
|
||||
push.channels[channel_name] = channel;
|
||||
channel.subscribeCb = function () {
|
||||
__ajax({
|
||||
url: push.config.auth,
|
||||
type: 'POST',
|
||||
data: {channel_name: channel_name, socket_id: push.connection.socket_id},
|
||||
success: function (data) {
|
||||
data = JSON.parse(data);
|
||||
data.channel = channel_name;
|
||||
push.connection.send(JSON.stringify({event:"pusher:subscribe", data:data}));
|
||||
},
|
||||
error: function (e) {
|
||||
throw Error(e);
|
||||
}
|
||||
});
|
||||
};
|
||||
channel.processSubscribe();
|
||||
return channel;
|
||||
}
|
||||
|
||||
function createPresenceChannel(channel_name, push)
|
||||
{
|
||||
return createPrivateChannel(channel_name, push);
|
||||
}
|
||||
|
||||
/*window.addEventListener('online', function(){
|
||||
var con;
|
||||
for (var i in Push.instances) {
|
||||
con = Push.instances[i].connection;
|
||||
con.reconnectInterval = 1;
|
||||
if (con.state === 'connecting') {
|
||||
con.connect();
|
||||
}
|
||||
}
|
||||
});*/
|
||||
|
||||
|
||||
function Connection(options) {
|
||||
this.dispatcher = new Dispatcher();
|
||||
__extends(this, this.dispatcher);
|
||||
var properies = ['on', 'off', 'emit'];
|
||||
for (var i in properies) {
|
||||
this[properies[i]] = this.dispatcher[properies[i]];
|
||||
}
|
||||
this.options = options;
|
||||
this.state = 'initialized'; //initialized connecting connected disconnected
|
||||
this.doNotConnect = 0;
|
||||
this.reconnectInterval = 1;
|
||||
this.connection = null;
|
||||
this.reconnectTimer = 0;
|
||||
this.connect();
|
||||
}
|
||||
|
||||
Connection.prototype.updateNetworkState = function(state){
|
||||
var old_state = this.state;
|
||||
this.state = state;
|
||||
if (old_state !== state) {
|
||||
this.emit('state_change', { previous: old_state, current: state });
|
||||
}
|
||||
};
|
||||
|
||||
Connection.prototype.connect = function () {
|
||||
this.doNotConnect = 0;
|
||||
if (this.state === 'connected') {
|
||||
console.log('networkState is "' + this.state + '" and do not need connect');
|
||||
return;
|
||||
}
|
||||
if (this.reconnectTimer) {
|
||||
clearTimeout(this.reconnectTimer);
|
||||
this.reconnectTimer = 0;
|
||||
}
|
||||
|
||||
this.closeAndClean();
|
||||
|
||||
var options = this.options;
|
||||
var websocket = new WebSocket(options.url+'/app/'+options.app_key);
|
||||
|
||||
this.updateNetworkState('connecting');
|
||||
|
||||
var _this = this;
|
||||
websocket.onopen = function (res) {
|
||||
_this.reconnectInterval = 1;
|
||||
if (_this.doNotConnect) {
|
||||
_this.updateNetworkState('disconnected');
|
||||
websocket.close();
|
||||
return;
|
||||
}
|
||||
if (options.onOpen) {
|
||||
options.onOpen(res);
|
||||
}
|
||||
};
|
||||
|
||||
if (options.onMessage) {
|
||||
websocket.onmessage = options.onMessage;
|
||||
}
|
||||
|
||||
websocket.onclose = function (res) {
|
||||
websocket.onmessage = websocket.onopen = websocket.onclose = websocket.onerror = null;
|
||||
_this.updateNetworkState('disconnected');
|
||||
if (!_this.doNotConnect) {
|
||||
_this.waitReconnect();
|
||||
}
|
||||
if (options.onClose) {
|
||||
options.onClose(res);
|
||||
}
|
||||
};
|
||||
|
||||
websocket.onerror = function (res) {
|
||||
_this.close();
|
||||
if (!_this.doNotConnect) {
|
||||
_this.waitReconnect();
|
||||
}
|
||||
if (options.onError) {
|
||||
options.onError(res);
|
||||
}
|
||||
};
|
||||
this.connection = websocket;
|
||||
}
|
||||
|
||||
Connection.prototype.closeAndClean = function () {
|
||||
if(this.connection) {
|
||||
var websocket = this.connection;
|
||||
websocket.onmessage = websocket.onopen = websocket.onclose = websocket.onerror = null;
|
||||
try {
|
||||
websocket.close();
|
||||
} catch (e) {}
|
||||
this.updateNetworkState('disconnected');
|
||||
}
|
||||
};
|
||||
|
||||
Connection.prototype.waitReconnect = function () {
|
||||
if (this.state === 'connected' || this.state === 'connecting') {
|
||||
return;
|
||||
}
|
||||
if (!this.doNotConnect) {
|
||||
this.updateNetworkState('connecting');
|
||||
var _this = this;
|
||||
if (this.reconnectTimer) {
|
||||
clearTimeout(this.reconnectTimer);
|
||||
}
|
||||
this.reconnectTimer = setTimeout(function(){
|
||||
_this.connect();
|
||||
}, this.reconnectInterval);
|
||||
if (this.reconnectInterval < 1000) {
|
||||
this.reconnectInterval = 1000;
|
||||
} else {
|
||||
// 每次重连间隔增大一倍
|
||||
this.reconnectInterval = this.reconnectInterval * 2;
|
||||
}
|
||||
// 有网络的状态下，重连间隔最大2秒
|
||||
if (this.reconnectInterval > 2000 && navigator.onLine) {
|
||||
_this.reconnectInterval = 2000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Connection.prototype.send = function(data) {
|
||||
if (this.state !== 'connected') {
|
||||
console.trace('networkState is "' + this.state + '", can not send ' + data);
|
||||
return;
|
||||
}
|
||||
this.connection.send(data);
|
||||
}
|
||||
|
||||
Connection.prototype.close = function(){
|
||||
this.updateNetworkState('disconnected');
|
||||
this.connection.close();
|
||||
}
|
||||
|
||||
var __extends = (this && this.__extends) || function (d, b) {
|
||||
for (var p in b) if (b.hasOwnProperty(p)) {d[p] = b[p];}
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
|
||||
function Channel(connection, channel_name) {
|
||||
this.subscribed = false;
|
||||
this.dispatcher = new Dispatcher();
|
||||
this.connection = connection;
|
||||
this.channelName = channel_name;
|
||||
this.subscribeCb = null;
|
||||
this.queue = [];
|
||||
__extends(this, this.dispatcher);
|
||||
var properies = ['on', 'off', 'emit'];
|
||||
for (var i in properies) {
|
||||
this[properies[i]] = this.dispatcher[properies[i]];
|
||||
}
|
||||
}
|
||||
|
||||
Channel.prototype.processSubscribe = function () {
|
||||
if (this.connection.state !== 'connected') {
|
||||
return;
|
||||
}
|
||||
this.subscribeCb();
|
||||
};
|
||||
|
||||
Channel.prototype.processQueue = function () {
|
||||
if (this.connection.state !== 'connected' || !this.subscribed) {
|
||||
return;
|
||||
}
|
||||
for (var i in this.queue) {
|
||||
this.queue[i]();
|
||||
}
|
||||
this.queue = [];
|
||||
};
|
||||
|
||||
Channel.prototype.trigger = function (event, data) {
|
||||
if (event.indexOf('client-') !== 0) {
|
||||
throw new Error("Event '" + event + "' should start with 'client-'");
|
||||
}
|
||||
var _this = this;
|
||||
this.queue.push(function () {
|
||||
_this.connection.send(JSON.stringify({ event: event, data: data, channel: _this.channelName }));
|
||||
});
|
||||
this.processQueue();
|
||||
};
|
||||
|
||||
////////////////
|
||||
var Collections = (function () {
|
||||
var exports = {};
|
||||
function extend(target) {
|
||||
var sources = [];
|
||||
for (var _i = 1; _i < arguments.length; _i++) {
|
||||
sources[_i - 1] = arguments[_i];
|
||||
}
|
||||
for (var i = 0; i < sources.length; i++) {
|
||||
var extensions = sources[i];
|
||||
for (var property in extensions) {
|
||||
if (extensions[property] && extensions[property].constructor &&
|
||||
extensions[property].constructor === Object) {
|
||||
target[property] = extend(target[property] || {}, extensions[property]);
|
||||
}
|
||||
else {
|
||||
target[property] = extensions[property];
|
||||
}
|
||||
}
|
||||
}
|
||||
return target;
|
||||
}
|
||||
|
||||
exports.extend = extend;
|
||||
function stringify() {
|
||||
var m = ["Push"];
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
if (typeof arguments[i] === "string") {
|
||||
m.push(arguments[i]);
|
||||
}
|
||||
else {
|
||||
m.push(safeJSONStringify(arguments[i]));
|
||||
}
|
||||
}
|
||||
return m.join(" : ");
|
||||
}
|
||||
|
||||
exports.stringify = stringify;
|
||||
function arrayIndexOf(array, item) {
|
||||
var nativeIndexOf = Array.prototype.indexOf;
|
||||
if (array === null) {
|
||||
return -1;
|
||||
}
|
||||
if (nativeIndexOf && array.indexOf === nativeIndexOf) {
|
||||
return array.indexOf(item);
|
||||
}
|
||||
for (var i = 0, l = array.length; i < l; i++) {
|
||||
if (array[i] === item) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
exports.arrayIndexOf = arrayIndexOf;
|
||||
function objectApply(object, f) {
|
||||
for (var key in object) {
|
||||
if (Object.prototype.hasOwnProperty.call(object, key)) {
|
||||
f(object[key], key, object);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
exports.objectApply = objectApply;
|
||||
function keys(object) {
|
||||
var keys = [];
|
||||
objectApply(object, function (_, key) {
|
||||
keys.push(key);
|
||||
});
|
||||
return keys;
|
||||
}
|
||||
|
||||
exports.keys = keys;
|
||||
function values(object) {
|
||||
var values = [];
|
||||
objectApply(object, function (value) {
|
||||
values.push(value);
|
||||
});
|
||||
return values;
|
||||
}
|
||||
|
||||
exports.values = values;
|
||||
function apply(array, f, context) {
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
f.call(context || (window), array[i], i, array);
|
||||
}
|
||||
}
|
||||
|
||||
exports.apply = apply;
|
||||
function map(array, f) {
|
||||
var result = [];
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
result.push(f(array[i], i, array, result));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
exports.map = map;
|
||||
function mapObject(object, f) {
|
||||
var result = {};
|
||||
objectApply(object, function (value, key) {
|
||||
result[key] = f(value);
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
exports.mapObject = mapObject;
|
||||
function filter(array, test) {
|
||||
test = test || function (value) {
|
||||
return !!value;
|
||||
};
|
||||
var result = [];
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
if (test(array[i], i, array, result)) {
|
||||
result.push(array[i]);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
exports.filter = filter;
|
||||
function filterObject(object, test) {
|
||||
var result = {};
|
||||
objectApply(object, function (value, key) {
|
||||
if ((test && test(value, key, object, result)) || Boolean(value)) {
|
||||
result[key] = value;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
exports.filterObject = filterObject;
|
||||
function flatten(object) {
|
||||
var result = [];
|
||||
objectApply(object, function (value, key) {
|
||||
result.push([key, value]);
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
exports.flatten = flatten;
|
||||
function any(array, test) {
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
if (test(array[i], i, array)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
exports.any = any;
|
||||
function all(array, test) {
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
if (!test(array[i], i, array)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
exports.all = all;
|
||||
function encodeParamsObject(data) {
|
||||
return mapObject(data, function (value) {
|
||||
if (typeof value === "object") {
|
||||
value = safeJSONStringify(value);
|
||||
}
|
||||
return encodeURIComponent(base64_1["default"](value.toString()));
|
||||
});
|
||||
}
|
||||
|
||||
exports.encodeParamsObject = encodeParamsObject;
|
||||
function buildQueryString(data) {
|
||||
var params = filterObject(data, function (value) {
|
||||
return value !== undefined;
|
||||
});
|
||||
return map(flatten(encodeParamsObject(params)), util_1["default"].method("join", "=")).join("&");
|
||||
}
|
||||
|
||||
exports.buildQueryString = buildQueryString;
|
||||
function decycleObject(object) {
|
||||
var objects = [], paths = [];
|
||||
return (function derez(value, path) {
|
||||
var i, name, nu;
|
||||
switch (typeof value) {
|
||||
case 'object':
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
for (i = 0; i < objects.length; i += 1) {
|
||||
if (objects[i] === value) {
|
||||
return {$ref: paths[i]};
|
||||
}
|
||||
}
|
||||
objects.push(value);
|
||||
paths.push(path);
|
||||
if (Object.prototype.toString.apply(value) === '[object Array]') {
|
||||
nu = [];
|
||||
for (i = 0; i < value.length; i += 1) {
|
||||
nu[i] = derez(value[i], path + '[' + i + ']');
|
||||
}
|
||||
}
|
||||
else {
|
||||
nu = {};
|
||||
for (name in value) {
|
||||
if (Object.prototype.hasOwnProperty.call(value, name)) {
|
||||
nu[name] = derez(value[name], path + '[' + JSON.stringify(name) + ']');
|
||||
}
|
||||
}
|
||||
}
|
||||
return nu;
|
||||
case 'number':
|
||||
case 'string':
|
||||
case 'boolean':
|
||||
return value;
|
||||
}
|
||||
}(object, '$'));
|
||||
}
|
||||
|
||||
exports.decycleObject = decycleObject;
|
||||
function safeJSONStringify(source) {
|
||||
try {
|
||||
return JSON.stringify(source);
|
||||
}
|
||||
catch (e) {
|
||||
return JSON.stringify(decycleObject(source));
|
||||
}
|
||||
}
|
||||
|
||||
exports.safeJSONStringify = safeJSONStringify;
|
||||
return exports;
|
||||
})();
|
||||
|
||||
var Dispatcher = (function () {
|
||||
function Dispatcher(failThrough) {
|
||||
this.callbacks = new CallbackRegistry();
|
||||
this.global_callbacks = [];
|
||||
this.failThrough = failThrough;
|
||||
}
|
||||
Dispatcher.prototype.on = function (eventName, callback, context) {
|
||||
this.callbacks.add(eventName, callback, context);
|
||||
return this;
|
||||
};
|
||||
Dispatcher.prototype.on_global = function (callback) {
|
||||
this.global_callbacks.push(callback);
|
||||
return this;
|
||||
};
|
||||
Dispatcher.prototype.off = function (eventName, callback, context) {
|
||||
this.callbacks.remove(eventName, callback, context);
|
||||
return this;
|
||||
};
|
||||
Dispatcher.prototype.emit = function (eventName, data) {
|
||||
var i;
|
||||
for (i = 0; i < this.global_callbacks.length; i++) {
|
||||
this.global_callbacks[i](eventName, data);
|
||||
}
|
||||
var callbacks = this.callbacks.get(eventName);
|
||||
if (callbacks && callbacks.length > 0) {
|
||||
for (i = 0; i < callbacks.length; i++) {
|
||||
callbacks[i].fn.call(callbacks[i].context || (window), data);
|
||||
}
|
||||
}
|
||||
else if (this.failThrough) {
|
||||
this.failThrough(eventName, data);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
return Dispatcher;
|
||||
}());
|
||||
|
||||
var CallbackRegistry = (function () {
|
||||
function CallbackRegistry() {
|
||||
this._callbacks = {};
|
||||
}
|
||||
CallbackRegistry.prototype.get = function (name) {
|
||||
return this._callbacks[prefix(name)];
|
||||
};
|
||||
CallbackRegistry.prototype.add = function (name, callback, context) {
|
||||
var prefixedEventName = prefix(name);
|
||||
this._callbacks[prefixedEventName] = this._callbacks[prefixedEventName] || [];
|
||||
this._callbacks[prefixedEventName].push({
|
||||
fn: callback,
|
||||
context: context
|
||||
});
|
||||
};
|
||||
CallbackRegistry.prototype.remove = function (name, callback, context) {
|
||||
if (!name && !callback && !context) {
|
||||
this._callbacks = {};
|
||||
return;
|
||||
}
|
||||
var names = name ? [prefix(name)] : Collections.keys(this._callbacks);
|
||||
if (callback || context) {
|
||||
this.removeCallback(names, callback, context);
|
||||
}
|
||||
else {
|
||||
this.removeAllCallbacks(names);
|
||||
}
|
||||
};
|
||||
CallbackRegistry.prototype.removeCallback = function (names, callback, context) {
|
||||
Collections.apply(names, function (name) {
|
||||
this._callbacks[name] = Collections.filter(this._callbacks[name] || [], function (oning) {
|
||||
return (callback && callback !== oning.fn) ||
|
||||
(context && context !== oning.context);
|
||||
});
|
||||
if (this._callbacks[name].length === 0) {
|
||||
delete this._callbacks[name];
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
CallbackRegistry.prototype.removeAllCallbacks = function (names) {
|
||||
Collections.apply(names, function (name) {
|
||||
delete this._callbacks[name];
|
||||
}, this);
|
||||
};
|
||||
return CallbackRegistry;
|
||||
}());
|
||||
function prefix(name) {
|
||||
return "_" + name;
|
||||
}
|
||||
|
||||
function __ajax(options){
|
||||
options=options||{};
|
||||
options.type=(options.type||'GET').toUpperCase();
|
||||
options.dataType=options.dataType||'json';
|
||||
params=formatParams(options.data);
|
||||
|
||||
var xhr;
|
||||
if(window.XMLHttpRequest){
|
||||
xhr=new XMLHttpRequest();
|
||||
}else{
|
||||
xhr=ActiveXObject('Microsoft.XMLHTTP');
|
||||
}
|
||||
|
||||
xhr.onreadystatechange=function(){
|
||||
if(xhr.readyState === 4){
|
||||
var status=xhr.status;
|
||||
if(status>=200 && status<300){
|
||||
options.success&&options.success(xhr.responseText,xhr.responseXML);
|
||||
}else{
|
||||
options.error&&options.error(status);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(options.type==='GET'){
|
||||
xhr.open('GET',options.url+'?'+params,true);
|
||||
xhr.send(null);
|
||||
}else if(options.type==='POST'){
|
||||
xhr.open('POST',options.url,true);
|
||||
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
||||
xhr.send(params);
|
||||
}
|
||||
}
|
||||
|
||||
function formatParams(data){
|
||||
var arr=[];
|
||||
for(var name in data){
|
||||
arr.push(encodeURIComponent(name)+'='+encodeURIComponent(data[name]));
|
||||
}
|
||||
return arr.join('&');
|
||||
}
|
||||
|
||||
// export const push = {
|
||||
// a:6
|
||||
// }
|
||||
@ -88,12 +88,7 @@ const loadOrderList = (pramas) => {
|
||||
|
||||
onMounted(() => {
|
||||
// loadOrderList();
|
||||
mitt.on('showBusinesses', (type='address') => {
|
||||
pages.value.areaCode = appStore[type]?.areaCode;
|
||||
pages.value.streetCode = appStore[type]?.streetCode;
|
||||
pages.value.page = 1;
|
||||
pages.value.total = 0;
|
||||
pages.value.pageAll = 0;
|
||||
mitt.on('showBusinesses', () => {
|
||||
isShow.value = !isShow.value;
|
||||
})
|
||||
})
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
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']);
|
||||
|
||||
@ -3,17 +3,17 @@ import { reactive, ref, provide, nextTick, onMounted, inject } from "vue";
|
||||
import areaList from "./areaList.vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import mitt from "@/utils/mitt";
|
||||
import { getStreet, getArea } from "@/api/index.js";
|
||||
import { getStreet } from "@/api/index.js";
|
||||
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,121 +21,67 @@ 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);
|
||||
// reload();
|
||||
router.push({
|
||||
path: "/",
|
||||
query: {
|
||||
areaCode: route.query.areaCode || appStore.address.areaCode,
|
||||
streetCode: e.code,
|
||||
name: e.name,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
mitt.on("choserArea", (data) => {
|
||||
appStore.setAddress({
|
||||
areaCode: data.code,
|
||||
streetCode: "",
|
||||
});
|
||||
initList(true);
|
||||
router.push({
|
||||
path: '/',
|
||||
query: {
|
||||
areaCode: data.code
|
||||
}
|
||||
})
|
||||
});
|
||||
info.address = e.name;
|
||||
mitt.emit('map_info', info);
|
||||
reload();
|
||||
}
|
||||
|
||||
mitt.on("choseTown", (data) => {
|
||||
let c = list.value.find((item) => item.name == data.name);
|
||||
if (!c) return;
|
||||
appStore.setAddress({
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: c.code,
|
||||
});
|
||||
initList();
|
||||
router.push({
|
||||
path: "/",
|
||||
query: {
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: c.code,
|
||||
name: data.name,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const list = ref([]);
|
||||
const initList = async (re = false) => {
|
||||
const list = ref([])
|
||||
const initList = async () => {
|
||||
let street = appStore.street;
|
||||
if (street?.length == 0 || re) {
|
||||
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 = appStore.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, ...appStore.street];
|
||||
appStore.setStreet(list.value);
|
||||
list.value = [data, ...street];
|
||||
if (appStore.address.streetCode) {
|
||||
data = list.value.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==appStore.address.areaCode?'':appStore.address.streetCode,
|
||||
});
|
||||
streetCode: appStore.address.streetCode
|
||||
})
|
||||
}
|
||||
if(!re) mitt.emit("map_info", info);
|
||||
};
|
||||
const initList2 = async () => {
|
||||
getArea({
|
||||
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([]);
|
||||
|
||||
@ -148,58 +94,38 @@ 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);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query.areaCode) {
|
||||
appStore.setAddress({
|
||||
areaCode: route.query.areaCode,
|
||||
streetCode: route.query.streetCode || "",
|
||||
});
|
||||
}
|
||||
initList();
|
||||
initList2();
|
||||
|
||||
// 每秒钟更新一次时间
|
||||
setInterval(updateClock, 1000);
|
||||
|
||||
initWeather();
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -207,14 +133,14 @@ onMounted(() => {
|
||||
<div class="left">
|
||||
<img
|
||||
class="logo item"
|
||||
src="/src/assets/head_img/back.png"
|
||||
src="/src/assets/head_img/logo.png"
|
||||
@click="navToDelivery"
|
||||
/>
|
||||
<div class="item">{{ nowTime[0] }}</div>
|
||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<div class="item">{{ nowTime[1] }}</div>
|
||||
</div>
|
||||
<div class="head-title"><img class="logo" src="/src/assets/head_img/logo.png"/> <span>吟龙物流信息监控溯源可视化大屏</span></div>
|
||||
<div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
|
||||
<div class="right">
|
||||
<div class="item" @click.stop="open" style="position: relative">
|
||||
<img src="/src/assets/head_img/location.png" alt="" />
|
||||
@ -232,10 +158,10 @@ onMounted(() => {
|
||||
<img src="/src/assets/head_img/weather.png" alt="" />
|
||||
{{ weather }}
|
||||
</div>
|
||||
<!-- <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<div class="item" @click="logout">
|
||||
<img src="/src/assets/head_img/close.png" alt="" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<img class="img" src="/src/assets/img/shiler.png" alt="" />
|
||||
</div>
|
||||
@ -270,16 +196,6 @@ onMounted(() => {
|
||||
font-size: 2rem;
|
||||
height: 100%;
|
||||
line-height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.logo{
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
}
|
||||
span{
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
@ -3,13 +3,12 @@ import { createRouter, createWebHistory } from "vue-router"
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'app',
|
||||
name: 'index',
|
||||
component: () => import('../layout/index.vue'),
|
||||
redirect: 'index',
|
||||
children: [
|
||||
{
|
||||
path: '/index',
|
||||
name: 'index',
|
||||
path: '/',
|
||||
name: '',
|
||||
component: () => import('../view/index/index.vue')
|
||||
},
|
||||
{
|
||||
|
||||
@ -12,7 +12,7 @@ export const useAppStore = defineStore('app', () => {
|
||||
|
||||
const address = ref(JSON.parse(localStorage.getItem('address') || '{}'));
|
||||
if (!address.value.areaCode) {
|
||||
address.value = { areaCode: 510521, streetCode: '' };
|
||||
address.value = { areaCode: 510524, streetCode: 510524100 };
|
||||
}
|
||||
|
||||
// 测试使用的初始化配置
|
||||
|
||||
@ -2,7 +2,7 @@ import axios from "axios";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: import.meta.env.VITE_BASE_URL,
|
||||
baseURL: 'https://shop.lihaink.cn/api',
|
||||
timeout: 5000
|
||||
})
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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,102 +35,98 @@ const initMap = () => {
|
||||
mapStyle: "amap://styles/darkblue",
|
||||
});
|
||||
// 监听地图加载完成事件
|
||||
map.on("complete", () => {
|
||||
map.on('complete', () => {
|
||||
// 地图加载完成后执行的操作
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}, 500)
|
||||
});
|
||||
map.setPitch(30);
|
||||
|
||||
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);
|
||||
let geocoder = new AMap.Geocoder();
|
||||
|
||||
// 创建 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);
|
||||
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);
|
||||
|
||||
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("获取经纬度失败");
|
||||
// 创建 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// 获取失败，可根据具体需求进行错误处理
|
||||
console.log("获取经纬度失败", props);
|
||||
// setTimeout(() => {
|
||||
// initMap();
|
||||
// }, 2000);
|
||||
}
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 获取失败，可根据具体需求进行错误处理
|
||||
console.log('获取经纬度失败');
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// 获取失败，可根据具体需求进行错误处理
|
||||
console.log('获取经纬度失败');
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
.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
|
||||
},
|
||||
});
|
||||
|
||||
@ -144,9 +140,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];
|
||||
@ -162,21 +158,17 @@ 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();
|
||||
@ -190,13 +182,13 @@ onUnmounted(() => {
|
||||
<template>
|
||||
<div class="c-box">
|
||||
<div id="container"></div>
|
||||
<div class="loading" v-show="loading">
|
||||
<div class="loading" v-if="loading">
|
||||
<dv-loading>加载中...</dv-loading>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang ="scss">
|
||||
.c-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -359,7 +359,7 @@ const initEcahrts = (yData1 = [], yData2 = [], yData3 = [], yData4 = []) => {
|
||||
}
|
||||
|
||||
const openList = () => {
|
||||
mitt.emit('showBusinesses', 'delivery_address')
|
||||
mitt.emit('showBusinesses')
|
||||
}
|
||||
|
||||
const initInfo = () => {
|
||||
@ -391,8 +391,7 @@ const pages = ref({
|
||||
const loadOrderList = () => {
|
||||
getOrderList(pages.value).then((res) => {
|
||||
initData(res.data.currOrderList);
|
||||
// orderList.value[0].value = res.data.currOrderCount;
|
||||
orderList.value[0].value = res.data.realTodayOrderCount;
|
||||
orderList.value[0].value = res.data.currOrderCount;
|
||||
orderList.value[1].value = res.data.pendingOrderCount;
|
||||
orderList.value[2].value = res.data.undeliveredOrderCount;
|
||||
orderList.value[3].value = res.data.doneOrderCountQuery;
|
||||
@ -430,7 +429,7 @@ onMounted(() => {
|
||||
<div class="top">
|
||||
<div class="t-right">
|
||||
<img src="/src/assets/img/item.png" />
|
||||
<div>订单数量</div>
|
||||
<div>今日订单</div>
|
||||
</div>
|
||||
<div class="flex" @click="openList">
|
||||
<div>查看更多</div>
|
||||
|
||||
@ -3,24 +3,19 @@ import leftItem from "./components/left.vue";
|
||||
import centerItem from "./components/center.vue";
|
||||
import bottomItem from "./components/bottom.vue";
|
||||
import rightItem from "./components/right.vue";
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref } from "vue";
|
||||
|
||||
const route = useRoute();
|
||||
const key = ref(Date.now());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="center">
|
||||
<div class="item">
|
||||
<leftItem :key="route.query.areaCode+key+'f'" style="height: 98%"></leftItem>
|
||||
<leftItem style="height: 98%"></leftItem>
|
||||
</div>
|
||||
<div class="item item_c">
|
||||
<div style="height: 61%; display: flex; justify-content: space-between">
|
||||
<centerItem :key="route.query.areaCode+key+'c'" style="width: 64%"></centerItem>
|
||||
<rightItem :key="route.query.areaCode+key+'r'" style="width: 35%"></rightItem>
|
||||
<centerItem style="width: 64%"></centerItem>
|
||||
<rightItem style="width: 35%"></rightItem>
|
||||
</div>
|
||||
<bottomItem :key="route.query.areaCode+key+'b'" style="height: 36%"></bottomItem>
|
||||
<bottomItem style="height: 36%"></bottomItem>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -12,11 +12,6 @@ import naxi from "@/assets/json/naxi.json";
|
||||
import luxian_geo from "@/utils/luxian_geo.js";
|
||||
import xuyong_geo from "@/utils/xuyong_geo.js";
|
||||
import jiangyang_geo from "@/utils/jiangyang_geo.js";
|
||||
import longma_geo from "@/utils/longma_geo.js";
|
||||
import gulin_geo from "@/utils/gulin_geo.js";
|
||||
import hejiang_geo from "@/utils/hejiang_geo.js";
|
||||
import naxi_geo from "@/utils/naxi_geo.js";
|
||||
import { getStreet, getArea } from "@/api/index.js";
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
import { useUserStore } from "@/store/user.js";
|
||||
|
||||
@ -183,7 +178,7 @@ const initMap = () => {
|
||||
}
|
||||
if (obj) {
|
||||
return `<div
|
||||
style="background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/56293202401021747108363.png);
|
||||
style="background-image: url(\'/src/assets/img/item-box.png\');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
@ -322,7 +317,7 @@ const initMap = () => {
|
||||
}
|
||||
if (obj) {
|
||||
return `<div
|
||||
style="background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/56293202401021747108363.png');
|
||||
style="background-image: url(\'/src/assets/img/item-box.png\');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
@ -393,7 +388,7 @@ const initMap = () => {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.6)",
|
||||
borderColor: "rgba(90, 208, 224,0.5)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
@ -479,7 +474,7 @@ const initMap = () => {
|
||||
chart.setOption(option);
|
||||
};
|
||||
|
||||
const mapInfo = async () => {
|
||||
const mapInfo = () => {
|
||||
let area = appStore.area.find(
|
||||
(item) => item.code == appStore.address.areaCode
|
||||
);
|
||||
@ -487,18 +482,8 @@ const mapInfo = async () => {
|
||||
if (area.name == "泸县") map = luxian_geo;
|
||||
if (area.name == "江阳区") map = jiangyang_geo;
|
||||
if (area.name == "叙永县") map = xuyong_geo;
|
||||
if (area.name == "龙马潭区") map = longma_geo;
|
||||
if (area.name == "纳溪区") map = naxi_geo;
|
||||
if (area.name == "合江县") map = hejiang_geo;
|
||||
if (area.name == "古蔺县") map = gulin_geo;
|
||||
map = JSON.parse(JSON.stringify(map));
|
||||
if (appStore.address.streetCode&&appStore.address.streetCode!=appStore.address.areaCode) {
|
||||
if(appStore.street.length==0) {
|
||||
let { data } = await getStreet({
|
||||
area_code: appStore.address.areaCode,
|
||||
});
|
||||
appStore.setStreet(data);
|
||||
}
|
||||
if (appStore.address.streetCode) {
|
||||
let street = appStore.street.find(
|
||||
(item) => item.code == appStore.address.streetCode
|
||||
);
|
||||
@ -514,7 +499,7 @@ const mapInfo = async () => {
|
||||
|
||||
const initStreetMap = (street, map) => {
|
||||
map.features = map.features.filter(
|
||||
(item) => item?.properties?.name == street?.name
|
||||
(item) => item.properties.name == street.name
|
||||
);
|
||||
mapType.name = street.name;
|
||||
mapType.json = map;
|
||||
|
||||
@ -78,8 +78,7 @@ const cell = reactive([
|
||||
}
|
||||
])
|
||||
const initCell = () => {
|
||||
// console.log(pendingOrderCount.value , undeliveredOrderCount.value , doneOrderCountQuery.value);
|
||||
let all = (pendingOrderCount.value + undeliveredOrderCount.value + doneOrderCountQuery.value) || 1;
|
||||
let all = pendingOrderCount.value + undeliveredOrderCount.value + doneOrderCountQuery.value;
|
||||
cell[0].value = (pendingOrderCount.value / all * 100).toFixed(0);
|
||||
cell[0].label = (pendingOrderCount.value / all * 100).toFixed(2) + '%';
|
||||
cell[0].count = pendingOrderCount.value;
|
||||
@ -96,10 +95,6 @@ const openList = () => {
|
||||
mitt.emit('showBusinesses')
|
||||
}
|
||||
|
||||
mitt.on("more_order_index", (data)=>{
|
||||
openList()
|
||||
})
|
||||
|
||||
const orderCount = ref(0);
|
||||
const pendingOrderCount = ref(0);
|
||||
const undeliveredOrderCount = ref(0);
|
||||
@ -142,7 +137,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<border>
|
||||
<div class="box">
|
||||
<div class="title">订单总数</div>
|
||||
<div class="title">今日订单数</div>
|
||||
<div class="my-day-num">
|
||||
<div class="my-num-item" v-for="(item, index) in cOrder()" :key="index">
|
||||
{{ item }}
|
||||
@ -152,7 +147,7 @@ onMounted(() => {
|
||||
<div class="top">
|
||||
<div class="t-right">
|
||||
<img src="/src/assets/img/item.png" />
|
||||
<div>订单</div>
|
||||
<div>今日订单</div>
|
||||
</div>
|
||||
<div class="flex" @click="openList">
|
||||
<div>查看更多</div>
|
||||
|
||||
@ -2,14 +2,12 @@
|
||||
import border from "@/components/border.vue"
|
||||
import { vehicleList } from "@/api/index.js";
|
||||
import { onMounted, ref } from "vue";
|
||||
import mitt from "@/utils/mitt";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useAppStore } from "@/store/app.js"
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const list = ref([]);
|
||||
const list2 = ref([]);
|
||||
const list = ref([])
|
||||
const count = ref(0);
|
||||
|
||||
const loadList = () => {
|
||||
@ -17,8 +15,7 @@ const loadList = () => {
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: appStore.address.streetCode,
|
||||
}).then(res => {
|
||||
list.value = res.data.list.slice(0,4);
|
||||
list2.value = res.data.list.slice(4);
|
||||
list.value = res.data.list;
|
||||
count.value = res.data.count;
|
||||
// for (let i = 0; i < 2; i++) {
|
||||
// list.value = [...list.value, ...res.data.list];
|
||||
@ -41,14 +38,6 @@ const navToDelivery = (item) => {
|
||||
});
|
||||
}
|
||||
|
||||
mitt.on('c_car_index', (e)=>{
|
||||
appStore.setAddress({
|
||||
areaCode: e.area_code,
|
||||
streetCode: e.street_code
|
||||
})
|
||||
navToDelivery(e);
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
loadList()
|
||||
@ -73,7 +62,7 @@ onMounted(() => {
|
||||
<div
|
||||
class="car-item"
|
||||
:class="{ 'car-item2': index > 1 }"
|
||||
v-for="(item, index) in list"
|
||||
v-for="(item, index) in list.slice(0, 4)"
|
||||
:key="index"
|
||||
@click="navToDelivery(item)"
|
||||
>
|
||||
@ -91,27 +80,24 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="car-box">
|
||||
<div class="car-list2" v-infinite-scroll style="overflow: auto">
|
||||
<div class="car-list2">
|
||||
<div
|
||||
class="car-item"
|
||||
:class="{ 'car-item2': index > 2 && index < 5 }"
|
||||
v-for="(item, index) in list2"
|
||||
v-for="(item, index) in list.slice(4, 13)"
|
||||
:key="index"
|
||||
@click="navToDelivery(item)"
|
||||
>
|
||||
<img class="img" src="/src/assets/img/icon-car.png" />
|
||||
<div>{{ item.license }}</div>
|
||||
</div>
|
||||
<template v-if="list2.length < 13">
|
||||
<div
|
||||
<div
|
||||
class="car-item"
|
||||
:class="{ 'car-item2': index > 2 && index < 5 }"
|
||||
v-for="(item, index) in 13 - list2.length"
|
||||
v-for="(item, index) in 13 - list.length"
|
||||
:key="'em' + index"
|
||||
style="background-image: none"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -236,28 +222,3 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
/* 隐藏滚动条但保持可滚动（WebKit内核浏览器，如Chrome和Safari） */
|
||||
.car-list2::-webkit-scrollbar {
|
||||
width: 0; /* 隐藏垂直滚动条 */
|
||||
height: 0; /* 隐藏水平滚动条 */
|
||||
}
|
||||
|
||||
/* 确保内容区域不会因为滚动条消失而缩小 */
|
||||
.car-list2 {
|
||||
overflow: scroll; /* 保持内容可滚动 */
|
||||
-ms-overflow-style: none; /* IE和Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
/* 针对IE和Edge的额外隐藏滚动条样式 */
|
||||
.car-list2 {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 针对Firefox的额外隐藏滚动条样式 */
|
||||
.car-list2 {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
@ -5,32 +5,21 @@ import centerItme1 from "./components/centerItem1.vue";
|
||||
import centerItme2 from "./components/centerItem2.vue";
|
||||
import rightItem1 from "./components/rightItem1.vue";
|
||||
import rightItem2 from "./components/rightItem2.vue";
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const route = useRoute();
|
||||
const key = ref(Date.now());
|
||||
|
||||
watch(()=> route.query, (n, o)=>{
|
||||
if(n.streetCode != o.streetCode){
|
||||
key.value = Date.now();
|
||||
}
|
||||
}, { deep: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="center">
|
||||
<div class="item">
|
||||
<leftItme1 :key="route.query.areaCode+key+'f1'" style="height: 58%"></leftItme1>
|
||||
<leftItme2 :key="route.query.areaCode+key+'f2'" style="height: 40%"></leftItme2>
|
||||
<leftItme1 style="height: 58%"></leftItme1>
|
||||
<leftItme2 style="height: 40%"></leftItme2>
|
||||
</div>
|
||||
<div class="item item_c">
|
||||
<centerItme1 :key="route.query.areaCode+key+'c1'" style="height: 66%"></centerItme1>
|
||||
<centerItme2 :key="route.query.areaCode+key+'c2'" style="height: 32%"></centerItme2>
|
||||
<centerItme1 style="height: 66%"></centerItme1>
|
||||
<centerItme2 style="height: 32%"></centerItme2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<rightItem1 :key="route.query.areaCode+key+'r1'" style="height: 35%"></rightItem1>
|
||||
<rightItem2 :key="route.query.areaCode+key+'r2'" style="height: 63%"></rightItem2>
|
||||
<rightItem1 style="height: 35%"></rightItem1>
|
||||
<rightItem2 style="height: 63%"></rightItem2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -5,9 +5,8 @@ import path from 'path';
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: { // ← ← ← ← ← ←
|
||||
host: '0.0.0.0' ,// ← 新增内容 ←
|
||||
port:"8787"
|
||||
server: {
|
||||
host: '0.0.0.0'
|
||||
},
|
||||
optimizeDeps: {
|
||||
// 开发时 解决这些commonjs包转成esm包
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user