test
This commit is contained in:
parent
6a25cf106a
commit
598e9622c4
|
|
@ -15,6 +15,7 @@
|
|||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"flv.js": "^1.6.2",
|
||||
"mitt": "^3.0.1",
|
||||
"pinia": "^2.1.7",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"vue": "^3.3.8",
|
||||
|
|
@ -1635,6 +1636,11 @@
|
|||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"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",
|
||||
|
|
@ -3404,6 +3410,11 @@
|
|||
"mime-db": "1.52.0"
|
||||
}
|
||||
},
|
||||
"mitt": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
|
||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@
|
|||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"flv.js": "^1.6.2",
|
||||
"mitt": "^3.0.1",
|
||||
"pinia": "^2.1.7",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5",
|
||||
"pinia": "^2.1.7"
|
||||
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.5.0",
|
||||
|
|
|
|||
33
src/App.vue
33
src/App.vue
|
|
@ -1,25 +1,40 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
|
||||
let Token =localStorage.getItem('TOKEN')
|
||||
|
||||
// let Token =localStorage.getItem('TOKEN')
|
||||
import { globalEventBus } from '@/common/eventBus'
|
||||
import { Push } from '@/common/push'
|
||||
import { areaObj } from "@/store/index.js"
|
||||
const userInfoStore=areaObj()
|
||||
userInfoStore.changeUserInfoFn(510521)
|
||||
|
||||
var connection = new Push({
|
||||
url: 'ws://192.168.1.10:3131', // websocket地址
|
||||
app_key: 'aaea61749929eb53a4bd75a1474c1d27',
|
||||
});
|
||||
// 假设用户uid为1
|
||||
var uid = 3;
|
||||
// 浏览器监听user-2频道的消息，也就是用户uid为1的用户消息
|
||||
var user_channel = connection.subscribe('user-' + uid);
|
||||
|
||||
// 当user-2频道有message事件的消息时
|
||||
user_channel.on('message', function (data) {
|
||||
globalEventBus.emit(data.content.event, data.content.data)
|
||||
|
||||
|
||||
console.log("收到消息",data)
|
||||
|
||||
});
|
||||
// 断线事件
|
||||
user_channel.on('close', function () {
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<!-- <div>sadas</div> -->
|
||||
<!-- <div class="main-box" > -->
|
||||
<router-view></router-view>
|
||||
<!-- </div> -->
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import axios from "axios";
|
|||
|
||||
// 创建axios 实例
|
||||
const instacne = axios.create({
|
||||
// baseURL:"http://192.168.1.10:8686",
|
||||
// baseURL: "http://ceshi-suyuan.lihaink.cn/",
|
||||
baseURL: "https://suyuan.lihaink.cn/",
|
||||
|
||||
|
|
@ -77,6 +78,8 @@ export function deviceCountLandApi(params) {
|
|||
export function centralCountApi(params) {
|
||||
return instacne.get('/api/dataview.land/centralCount', { params })
|
||||
}
|
||||
|
||||
export function townsCenter(params) {
|
||||
return instacne.get('/common/geo/towns', { params })
|
||||
}
|
||||
// /api/dataview.land/centralCount?areaCode=510521&streetCode=510521100
|
||||
// /api/dataview.land/deviceCount?areaCode=510521&streetCode=510521100&land_id=18
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import mitt from 'mitt'
|
||||
export const globalEventBus = mitt()
|
||||
|
|
@ -0,0 +1,751 @@
|
|||
|
||||
|
||||
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
|
||||
// }
|
||||
|
|
@ -5,9 +5,9 @@
|
|||
|
||||
<div class="right">
|
||||
<div class="rigth-li" @click="choseArea = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
||||
:src="u('DW')" alt=""> {{ area|| '泸县' }}
|
||||
:src="u('DW')" alt=""> {{ areaStore.userInfo.name|| '泸县' }}
|
||||
</div>
|
||||
<areaList :choseArea="choseArea" @offAreaList="offAreaList"></areaList>
|
||||
<areaList :choseArea="choseArea" @offAreaList="offAreaList" :key="areaStore.userInfo.name"></areaList>
|
||||
<div class="right-line">
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
|
@ -35,6 +35,12 @@
|
|||
import { ref, reactive, onMounted, watch } from "vue"
|
||||
import areaList from "./areaList.vue";
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { areaObj } from "@/store/index.js"
|
||||
|
||||
const areaStore = areaObj()
|
||||
|
||||
|
||||
|
||||
const u = (name) => {
|
||||
return `/static/index/${name}.png`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const choseTownFn = (item) => {
|
|||
// router.replace('/townDetail?id=' + id)
|
||||
}
|
||||
|
||||
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${510521}`)
|
||||
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${userInfoStore.userInfo.areaCode}`)
|
||||
.then(function (response) {
|
||||
|
||||
userInfoStore.changeareaCodeList(response.data.data)
|
||||
|
|
|
|||
|
|
@ -36,16 +36,26 @@
|
|||
</style>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch,defineEmits } from "vue"
|
||||
import { ref, onMounted, watch, defineEmits, nextTick } from "vue"
|
||||
import * as echarts from 'echarts';
|
||||
// import "echarts-gl"
|
||||
import geoJson from "/static/jsonData/luxian_geo.js"
|
||||
import geoJsonLuxian from "/static/jsonData/luxian_geo.js"
|
||||
import geoJsonGulin from "/static/jsonData/gulin_geo.js"
|
||||
import geoJsonHejiang from "/static/jsonData/hejiang_geo.js"
|
||||
import geoJsonJiangyang from "/static/jsonData/jiangyang_geo.js"
|
||||
import geoJsonLongmatan from "/static/jsonData/longmatan_geo.js"
|
||||
import geoJsonNaxi from "/static/jsonData/naxi_geo.js"
|
||||
import geoJsonXuyong from "/static/jsonData/xuyong_geo.js"
|
||||
import { useRouter } from "vue-router"
|
||||
import { areaObj } from "@/store/index.js"
|
||||
import { landListApi } from "@/api.js"
|
||||
import { globalEventBus } from '@/common/eventBus'
|
||||
let geoJson = geoJsonLuxian
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const areaStore = areaObj()
|
||||
|
||||
const showArea = (ref(true))
|
||||
const router = useRouter()
|
||||
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
|
||||
|
|
@ -65,13 +75,10 @@ const deepCopy = (obj) => {
|
|||
|
||||
return copy;
|
||||
}
|
||||
|
||||
const emit = defineEmits(['getTowmName'])
|
||||
const getTowmName = (e) => {
|
||||
emit('getTowmName', e)
|
||||
}
|
||||
|
||||
|
||||
const pointerFn = () => {
|
||||
let list = []
|
||||
geoJson.center.forEach((item, index) => {
|
||||
|
|
@ -567,34 +574,82 @@ const initTownMap = async (name) => {
|
|||
// console.log(params.data.data)
|
||||
});
|
||||
}
|
||||
// watch(() => areaStore.address, (value, oldValue) => {
|
||||
// if (value.city) {
|
||||
// initAreaMap()
|
||||
// }
|
||||
// else if (value.area) {
|
||||
// showArea.value = false
|
||||
// initTownMap(value.area)
|
||||
// }
|
||||
// }, {
|
||||
// deep: true,
|
||||
// }
|
||||
|
||||
// )
|
||||
|
||||
watch(
|
||||
() => areaStore.address,
|
||||
(value, oldValue) => {
|
||||
watch(() => areaStore.userInfo, (value, oldValue) => {
|
||||
if (value.areaCode) {
|
||||
switch (value.areaCode) {
|
||||
case "510503":
|
||||
geoJson = geoJsonNaxi
|
||||
break;
|
||||
case "510502":
|
||||
geoJson = geoJsonJiangyang
|
||||
break;
|
||||
case "510504":
|
||||
geoJson = geoJsonLongmatan
|
||||
break;
|
||||
case "510521":
|
||||
geoJson = geoJsonLuxian
|
||||
break;
|
||||
case "510522":
|
||||
geoJson = geoJsonHejiang
|
||||
break;
|
||||
case "510524":
|
||||
geoJson = geoJsonXuyong
|
||||
break;
|
||||
|
||||
if (value.city) {
|
||||
case "510525":
|
||||
geoJson = geoJsonGulin
|
||||
break;
|
||||
|
||||
}
|
||||
initAreaMap()
|
||||
}
|
||||
else if (value.area) {
|
||||
showArea.value = false
|
||||
initTownMap(value.area)
|
||||
}
|
||||
|
||||
|
||||
// else if (value.area) {
|
||||
// showArea.value = false
|
||||
// initTownMap(value.area)
|
||||
// }
|
||||
}, {
|
||||
deep: true,
|
||||
// immediate: true
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
initAreaMap()
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
setTimeout(() => { initAreaMap() }, 1000)
|
||||
})
|
||||
|
||||
globalEventBus.on('choserArea', data => {
|
||||
|
||||
areaStore.changeUserInfoFn(data.code, '', data.name)
|
||||
|
||||
// console.log(areaStore.userInfo, "data")
|
||||
|
||||
})
|
||||
globalEventBus.on('choseTown', data => {
|
||||
getTowmName(data.name)
|
||||
|
||||
areaStore.areaCodeList.forEach(item => {
|
||||
if (item.name == (data.name)) {
|
||||
areaStore.changeUserInfoFn(510521, item.code)
|
||||
}
|
||||
})
|
||||
areaStore.changeAddress('', data.name )
|
||||
initTownMap(data.name)
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -35,12 +35,18 @@
|
|||
import { ref, onMounted, defineEmits } from "vue"
|
||||
import * as echarts from 'echarts';
|
||||
import "echarts-gl"
|
||||
import geoJson from "/static/jsonData/luxian_geo.js"
|
||||
import geoJsonLuxian from "/static/jsonData/luxian_geo.js"
|
||||
// import geoJson from "/static/jsonData/luxian_geo.js"
|
||||
import { useRoute } from "vue-router"
|
||||
import { areaObj } from "@/store/index.js"
|
||||
import { landListApi } from "@/api.js"
|
||||
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
|
||||
|
||||
|
||||
let geoJson = geoJsonLuxian
|
||||
|
||||
|
||||
|
||||
const emit = defineEmits(['changeLand'])
|
||||
const pointerFn2 = (lists) => {
|
||||
let list = []
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ import scrollTable from "@/components/scrollTable.vue"
|
|||
import warnPop from "@/components/warnPop.vue"
|
||||
import { landCollectionListApi } from "@/api.js"
|
||||
import { areaObj } from "@/store/index.js"
|
||||
import { globalEventBus } from '@/common/eventBus'
|
||||
|
||||
|
||||
|
||||
const userInfoStore = areaObj()
|
||||
// ...userInfoStore.userInfo
|
||||
const showWarnPop = ref(false)
|
||||
|
|
@ -20,6 +24,7 @@ const hdClick = (e) => {
|
|||
if (e.columnIndex == 9) {
|
||||
showWarnPop.value = true
|
||||
item.value = dataList.value[e.rowIndex]
|
||||
console.log(item.value)
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -57,5 +62,12 @@ landCollectionListApi(
|
|||
|
||||
});
|
||||
})
|
||||
globalEventBus.on('indexcenterbottom', data => {
|
||||
showWarnPop.value = true
|
||||
item.value = dataList.value[data.index]
|
||||
})
|
||||
|
||||
globalEventBus.on('indexcenterbottom-1', data => {
|
||||
showWarnPop.value = false
|
||||
})
|
||||
</script>
|
||||
|
|
@ -53,7 +53,6 @@ plantProductCountApi(
|
|||
|
||||
correctionListFn(res.data.list).forEach(item => {
|
||||
|
||||
console.log(item)
|
||||
|
||||
config2.data.push(
|
||||
[item[0].kind, `<img src=${item[0].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`,item[1]? item[1].kind:'', item[1]? `<img src=${item[1].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`:""]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
|
||||
<warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false" :data="popData"></warnDetail>
|
||||
<scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%" v-if="config3.data.length"></scrollTable>
|
||||
<scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%" v-if="config3.data.length">
|
||||
</scrollTable>
|
||||
</template>
|
||||
<script setup>
|
||||
import warnDetail from "@/components/warnDetail.vue"
|
||||
|
|
@ -9,8 +9,10 @@ import scrollTable from "@/components/scrollTable.vue"
|
|||
import { ref, reactive, onMounted } from "vue"
|
||||
import { deviceAlarmCountApi } from "@/api.js"
|
||||
import { areaObj } from "@/store/index.js"
|
||||
const userInfoStore=areaObj()
|
||||
import { globalEventBus } from '@/common/eventBus'
|
||||
|
||||
|
||||
const userInfoStore = areaObj()
|
||||
const showWarnDeatil = ref(false)
|
||||
|
||||
const hdClick3 = (e) => {
|
||||
|
|
@ -21,6 +23,7 @@ const hdClick3 = (e) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
const alignFn = (num) => {
|
||||
let arr = []
|
||||
for (let i = 0; i < num; i++) {
|
||||
|
|
@ -69,4 +72,17 @@ onMounted( ()=>{
|
|||
});
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
globalEventBus.on('indexlefttop', data => {
|
||||
popData.value = data.index
|
||||
showWarnDeatil.value = true
|
||||
|
||||
})
|
||||
globalEventBus.on('indexlefttop-1', data => {
|
||||
|
||||
showWarnDeatil.value = false
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div style="height: 35%;">
|
||||
<div class="landa">
|
||||
<div class="land-li" @click="choseUrl(item)" v-for="(item, index) in landlist" :key="index">{{
|
||||
item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video" style="height: 65%;">
|
||||
<div class="video-tit "> 实时监测影像 </div>
|
||||
<JessibucaDemo v-if="video_url && showVideo" :src="video_url" style="height: 80%;width: 95%;">
|
||||
</JessibucaDemo>
|
||||
<div style="width: 95%;height: 28vh;background-color: #0C2856;position: relative;" v-else>
|
||||
<img src="/static/index/video.png"
|
||||
style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 50px;height: 50px;"
|
||||
alt="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import JessibucaDemo from "@/components/videoFlv.vue"
|
||||
import { landListApi } from "@/api.js"
|
||||
import {ref,reactive,onBeforeUnmount} from "vue"
|
||||
import { areaObj } from "@/store/index.js"
|
||||
import { globalEventBus } from '@/common/eventBus'
|
||||
|
||||
|
||||
const userInfoStore = areaObj()
|
||||
|
||||
const landlist = reactive([])
|
||||
|
||||
landListApi({
|
||||
...userInfoStore.userInfo
|
||||
}).then(res => {
|
||||
|
||||
res.data.list.forEach(item => { landlist.push(item) })
|
||||
|
||||
})
|
||||
// 新建scoket 通知開始推流
|
||||
const video_url = ref('')
|
||||
let socket = new WebSocket('wss://iot.lihaink.cn/test')
|
||||
const pullStream = () => {
|
||||
const onSocketOpen = (event) => {
|
||||
console.log("scoket打开,5565")
|
||||
}
|
||||
const onSocketClose = (event) => {
|
||||
console.log('WebSocket连接已关闭');
|
||||
}
|
||||
const onSocketError = (event) => {
|
||||
console.error('WebSocket连接发生错误');
|
||||
}
|
||||
socket.addEventListener('open', onSocketOpen);
|
||||
socket.addEventListener('close', onSocketClose);
|
||||
socket.addEventListener('error', onSocketError);
|
||||
}
|
||||
pullStream()
|
||||
const showVideo = ref(false)
|
||||
|
||||
|
||||
const choseUrl = (item) => {
|
||||
video_url.value = ''
|
||||
showVideo.value = false
|
||||
setTimeout(() => {
|
||||
let data = {
|
||||
username: item.master_phone,
|
||||
device: 'lihai_lot_walnutpi_dev_' + item.device_id,
|
||||
scene: 'screen'
|
||||
}
|
||||
socket.send(JSON.stringify(data))
|
||||
video_url.value = item.video_url
|
||||
showVideo.value = true
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
socket.close()
|
||||
})
|
||||
|
||||
|
||||
globalEventBus.on('indexrightbottom', data => {
|
||||
choseUrl(data.item)
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -7,6 +7,7 @@ export const areaObj = defineStore('counter', {
|
|||
userInfo: {
|
||||
areaCode:'',
|
||||
streetCode:'',
|
||||
name:""
|
||||
|
||||
},
|
||||
areaCodeList:[],
|
||||
|
|
@ -19,9 +20,10 @@ export const areaObj = defineStore('counter', {
|
|||
}),
|
||||
getters: {},
|
||||
actions: {
|
||||
changeUserInfoFn(areaCode,streetCode='') {
|
||||
changeUserInfoFn(areaCode,streetCode='',name) {
|
||||
this.userInfo.areaCode = areaCode
|
||||
this.userInfo.streetCode = streetCode||''
|
||||
this.userInfo.streetCode = streetCode||'',
|
||||
this.userInfo.name= name
|
||||
},
|
||||
changeAddress(c,a){
|
||||
this.address.city=c
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<div class="box">
|
||||
<div class="l">
|
||||
<div class="top">
|
||||
<!-- <leftTop :key="userInfoStore.userInfo.streetCode"></leftTop> -->
|
||||
<leftTop :key="userInfoStore.userInfo.name"></leftTop>
|
||||
</div>
|
||||
<div class="center top">
|
||||
<leftCenter :key="userInfoStore.userInfo.streetCode"></leftCenter>
|
||||
<leftCenter :key="userInfoStore.userInfo.name"></leftCenter>
|
||||
</div>
|
||||
<div class="bottom top">
|
||||
<leftBottom :key="userInfoStore.userInfo.streetCode"></leftBottom>
|
||||
<leftBottom :key="userInfoStore.userInfo.name"></leftBottom>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c">
|
||||
|
|
@ -32,34 +32,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<centerBottom :key="userInfoStore.userInfo.streetCode"></centerBottom>
|
||||
<centerBottom :key="userInfoStore.userInfo.name"></centerBottom>
|
||||
</div>
|
||||
</div>
|
||||
<div class="r">
|
||||
<div class="top">
|
||||
<rightTop :key="userInfoStore.userInfo.streetCode"></rightTop>
|
||||
<rightTop :key="userInfoStore.userInfo.name"></rightTop>
|
||||
</div>
|
||||
<div class="bottoms">
|
||||
<div style="height: 35%;">
|
||||
<div class="landa">
|
||||
<div class="land-li" @click="choseUrl(item)" v-for="(item, index) in landlist" :key="index">{{
|
||||
item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video" style="height: 65%;">
|
||||
<div class="video-tit "> 实时监测影像 </div>
|
||||
<JessibucaDemo v-if="video_url && showVideo" :src="video_url" style="height: 80%;width: 95%;">
|
||||
</JessibucaDemo>
|
||||
<div class="bottoms" :key="userInfoStore.userInfo.name">
|
||||
<rightBottom></rightBottom>
|
||||
|
||||
|
||||
|
||||
<div style="width: 95%;height: 28vh;background-color: #0C2856;position: relative;" v-else>
|
||||
<img src="/static/index/video.png"
|
||||
style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 50px;height: 50px;"
|
||||
alt="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,38 +53,22 @@ import leftTop from "@/components/index/leftTop.vue"
|
|||
import leftCenter from "../components/index/leftCenter.vue"
|
||||
import leftBottom from "../components/index/leftBottom.vue"
|
||||
import centerBottom from "../components/index/centerBottom.vue"
|
||||
import JessibucaDemo from "@/components/videoFlv.vue"
|
||||
import rightBottom from "../components/index/rightBottom.vue"
|
||||
import { centralCountApi } from "@/api.js"
|
||||
import areaMap from "@/components/areaMap.vue"
|
||||
import { landListApi } from "@/api.js"
|
||||
import rightTop from "../components/index/rightTop.vue"
|
||||
import { areaObj } from "@/store/index.js"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const userInfoStore = areaObj()
|
||||
// ...userInfoStore.userInfo
|
||||
|
||||
const showVideo = ref(false)
|
||||
watch(
|
||||
() => userInfoStore.userInfo.streetCode,
|
||||
(value, oldValue) => {
|
||||
showVideo.value = false
|
||||
landListApi({
|
||||
...userInfoStore.userInfo
|
||||
}).then(res => {
|
||||
landlist.splice(0, 99999)
|
||||
|
||||
res.data.list.forEach(item => { landlist.push(item) })
|
||||
|
||||
})
|
||||
|
||||
|
||||
}, {
|
||||
deep: true,
|
||||
// immediate: true
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
centralCountApi({
|
||||
...userInfoStore.userInfo
|
||||
|
|
@ -120,52 +86,10 @@ const centerData = reactive({
|
|||
|
||||
})
|
||||
// 地块
|
||||
const landlist = reactive([])
|
||||
|
||||
landListApi({
|
||||
...userInfoStore.userInfo
|
||||
}).then(res => {
|
||||
|
||||
res.data.list.forEach(item => { landlist.push(item) })
|
||||
|
||||
})
|
||||
|
||||
// 新建scoket 通知開始推流
|
||||
const video_url = ref('')
|
||||
let socket = new WebSocket('wss://iot.lihaink.cn/test')
|
||||
const pullStream = () => {
|
||||
const onSocketOpen = (event) => {
|
||||
console.log("scoket打开")
|
||||
}
|
||||
const onSocketClose = (event) => {
|
||||
console.log('WebSocket连接已关闭');
|
||||
}
|
||||
const onSocketError = (event) => {
|
||||
console.error('WebSocket连接发生错误');
|
||||
}
|
||||
socket.addEventListener('open', onSocketOpen);
|
||||
socket.addEventListener('close', onSocketClose);
|
||||
socket.addEventListener('error', onSocketError);
|
||||
}
|
||||
pullStream()
|
||||
|
||||
|
||||
const choseUrl = (item) => {
|
||||
video_url.value = ''
|
||||
showVideo.value = false
|
||||
setTimeout(() => {
|
||||
let data = {
|
||||
username: item.master_phone,
|
||||
// device: 'lihai_lot_walnutpi_dev_' + item.id,
|
||||
device: 'lihai_lot_walnutpi_dev_' + 5,
|
||||
scene: 'screen'
|
||||
}
|
||||
socket.send(JSON.stringify(data))
|
||||
video_url.value = item.video_url
|
||||
showVideo.value = true
|
||||
}, 500)
|
||||
|
||||
}
|
||||
|
||||
const back = () => {
|
||||
console.log("back")
|
||||
router.go(0)
|
||||
|
|
@ -175,9 +99,8 @@ const getTowmName = (e) => {
|
|||
townName.value = e
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
socket.close()
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
|
|
|||
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
|
|
@ -1,4 +1,20 @@
|
|||
let geoJson = {
|
||||
import {townsCenter} from "@/api.js"
|
||||
townsCenter({
|
||||
county_code:510521
|
||||
}).then(res=>{
|
||||
geoJsonLuxian.features.forEach(item=>{
|
||||
res.data.forEach(items=>{
|
||||
if(item.properties.name==items.town_name){
|
||||
item.center=[Number(items.lng) , Number(items.lat)]
|
||||
}
|
||||
})
|
||||
})
|
||||
geoJsonLuxian.features.forEach(item=>{
|
||||
geoJsonLuxian.center.push(item.center)
|
||||
})
|
||||
geoJsonLuxian.center.push([105.370, 29.145])
|
||||
})
|
||||
let geoJsonLuxian = {
|
||||
"type": "FeatureCollection",
|
||||
"name": "510521",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
|
|
@ -26,29 +42,29 @@ let geoJson = {
|
|||
{ "type": "Feature", "properties": { "id": "43603", "name": "泸县城西工业园区", "site": "www.poi86.com" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[105.356822, 29.152733], [105.356865, 29.150261], [105.356994, 29.1494], [105.357336, 29.148126], [105.357979, 29.146589], [105.358749, 29.145689], [105.356395, 29.145206], [105.354085, 29.14461], [105.351217, 29.144278], [105.34942, 29.144056], [105.348563, 29.144807], [105.347708, 29.145632], [105.346767, 29.146383], [105.346296, 29.14747], [105.346296, 29.148295], [105.346339, 29.149193], [105.345782, 29.150842], [105.345782, 29.152041], [105.344113, 29.152493], [105.343129, 29.152719], [105.341974, 29.152834], [105.340476, 29.153248], [105.340091, 29.152912], [105.339366, 29.152424], [105.338296, 29.152201], [105.33637, 29.152133], [105.335471, 29.152696], [105.335043, 29.153259], [105.334316, 29.15386], [105.33269, 29.154124], [105.331193, 29.154315], [105.329996, 29.154726], [105.328584, 29.155328], [105.327772, 29.15473], [105.327472, 29.153945], [105.327301, 29.153271], [105.326787, 29.152413], [105.325417, 29.152229], [105.324433, 29.152754], [105.32439, 29.153467], [105.324433, 29.15429], [105.324006, 29.154778], [105.32285, 29.154705], [105.321567, 29.154595], [105.320626, 29.154297], [105.319642, 29.154074], [105.318188, 29.153627], [105.316775, 29.153032], [105.316519, 29.15247], [105.316006, 29.151834], [105.315664, 29.151723], [105.314764, 29.152436], [105.31485, 29.152885], [105.315578, 29.153296], [105.315578, 29.153782], [105.315705, 29.154943], [105.315791, 29.156142], [105.316476, 29.156814], [105.317716, 29.157037], [105.318315, 29.156774], [105.319129, 29.156173], [105.319428, 29.155797], [105.320583, 29.155234], [105.32268, 29.155754], [105.325204, 29.156086], [105.328198, 29.155931], [105.342744, 29.153394], [105.345667, 29.152874], [105.348795, 29.152318], [105.350189, 29.15207], [105.352585, 29.152141], [105.356822, 29.152733]]]] } }
|
||||
],
|
||||
center: [
|
||||
[105.647586, 29.242722],
|
||||
[105.647478, 29.080965],
|
||||
[105.577683, 28.98374],
|
||||
[105.403183, 29.243129],
|
||||
[105.332496, 29.255069],
|
||||
[105.641914, 28.97747],
|
||||
[105.524046, 29.12889],
|
||||
[105.41377, 29.089773],
|
||||
[105.449384, 29.259454],
|
||||
[105.284853, 28.969076],
|
||||
[105.561539, 29.245675],
|
||||
[105.232078, 29.048134],
|
||||
[105.340525, 29.079501],
|
||||
[105.716424, 29.038917],
|
||||
[105.487468, 29.05757],
|
||||
[105.687341, 29.146315],
|
||||
[105.370717, 29.259903],
|
||||
[105.362564, 29.201656],
|
||||
[105.575548, 29.203948],
|
||||
[105.291912, 29.10379],
|
||||
[105.367427, 29.150849],
|
||||
[105.370, 29.145]
|
||||
// [105.647586, 29.242722],
|
||||
// [105.647478, 29.080965],
|
||||
// [105.577683, 28.98374],
|
||||
// [105.403183, 29.243129],
|
||||
// [105.332496, 29.255069],
|
||||
// [105.641914, 28.97747],
|
||||
// [105.524046, 29.12889],
|
||||
// [105.41377, 29.089773],
|
||||
// [105.449384, 29.259454],
|
||||
// [105.284853, 28.969076],
|
||||
// [105.561539, 29.245675],
|
||||
// [105.232078, 29.048134],
|
||||
// [105.340525, 29.079501],
|
||||
// [105.716424, 29.038917],
|
||||
// [105.487468, 29.05757],
|
||||
// [105.687341, 29.146315],
|
||||
// [105.370717, 29.259903],
|
||||
// [105.362564, 29.201656],
|
||||
// [105.575548, 29.203948],
|
||||
// [105.291912, 29.10379],
|
||||
// [105.367427, 29.150849],
|
||||
// [105.370, 29.145]
|
||||
]
|
||||
}
|
||||
|
||||
export default geoJson;
|
||||
export default geoJsonLuxian;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,23 @@
|
|||
let geoJson = {
|
||||
import {townsCenter} from "@/api.js"
|
||||
townsCenter({
|
||||
county_code:510524
|
||||
}).then(res=>{
|
||||
geoJsonXuyong.features.forEach(item=>{
|
||||
res.data.forEach(items=>{
|
||||
if(item.properties.name==items.town_name){
|
||||
item.center=[Number(items.lng) , Number(items.lat)]
|
||||
}
|
||||
})
|
||||
})
|
||||
geoJsonXuyong.features.forEach(item=>{
|
||||
geoJsonXuyong.center.push(item.center)
|
||||
})
|
||||
geoJsonXuyong.center.push([105.370, 29.145])
|
||||
})
|
||||
|
||||
|
||||
|
||||
let geoJsonXuyong = {
|
||||
"type": "FeatureCollection",
|
||||
"name": "510524",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
|
|
@ -28,8 +47,32 @@ let geoJson = {
|
|||
{ "type": "Feature", "properties": { "id": "41376", "name": "营山乡", "site": "www.poi86.com" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[105.551257, 27.883317], [105.544035, 27.865696], [105.544035, 27.863874], [105.540252, 27.864169], [105.53922, 27.860524], [105.540252, 27.855669], [105.534403, 27.851708], [105.522014, 27.84712], [105.512377, 27.846181], [105.507901, 27.854973], [105.504803, 27.856178], [105.49723, 27.852208], [105.491378, 27.854316], [105.489657, 27.858865], [105.491722, 27.867067], [105.486903, 27.873124], [105.487935, 27.875556], [105.490345, 27.87617], [105.489574, 27.881053], [105.488623, 27.887093], [105.484837, 27.891633], [105.484491, 27.894668], [105.486902, 27.897102], [105.490687, 27.895596], [105.494818, 27.898643], [105.495507, 27.899556], [105.494474, 27.909264], [105.496504, 27.912849], [105.498604, 27.916559], [105.506521, 27.920224], [105.505488, 27.924772], [105.50893, 27.928424], [105.510307, 27.931765], [105.515126, 27.932689], [105.517191, 27.939976], [105.523042, 27.94424], [105.5251, 27.956076], [105.529918, 27.960033], [105.535894, 27.961666], [105.543807, 27.957135], [105.549454, 27.957874], [105.549653, 27.964124], [105.554468, 27.965952], [105.562374, 27.964753], [105.564159, 27.963297], [105.571653, 27.957183], [105.579897, 27.960224], [105.580583, 27.956888], [105.585048, 27.955374], [105.588878, 27.956053], [105.590198, 27.953257], [105.586765, 27.950222], [105.589512, 27.941427], [105.585392, 27.93202], [105.593974, 27.928686], [105.595347, 27.926866], [105.592259, 27.925955], [105.591572, 27.922617], [105.584707, 27.917456], [105.577718, 27.917042], [105.570504, 27.91218], [105.561913, 27.912471], [105.560882, 27.909435], [105.563288, 27.907314], [105.562283, 27.905981], [105.561226, 27.90458], [105.556757, 27.904269], [105.5516, 27.899403], [105.549193, 27.892722], [105.552976, 27.888784], [105.549537, 27.885741], [105.551257, 27.883317]]]] } },
|
||||
{ "type": "Feature", "properties": { "id": "1402", "name": "落卜镇", "site": "www.poi86.com" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[105.53004, 28.054421], [105.537735, 28.036915], [105.540019, 28.031715], [105.540417, 28.027251], [105.541396, 28.016259], [105.536925, 28.014429], [105.533829, 28.011086], [105.525569, 28.012883], [105.524537, 28.016518], [105.520751, 28.016204], [105.520063, 28.018325], [105.524193, 28.020459], [105.519718, 28.02378], [105.51155, 28.022769], [105.502162, 28.021606], [105.492523, 28.029156], [105.489369, 28.037786], [105.48323, 28.038221], [105.458801, 28.009966], [105.452984, 28.016021], [105.446077, 28.012667], [105.443999, 28.01666], [105.443495, 28.01763], [105.442295, 28.019935], [105.442983, 28.023271], [105.439889, 28.024782], [105.437139, 28.021443], [105.435422, 28.023865], [105.435319, 28.024258], [105.434391, 28.027804], [105.43817, 28.029326], [105.436108, 28.031747], [105.438857, 28.033268], [105.437826, 28.03569], [105.420609, 28.046074], [105.412754, 28.050818], [105.403833, 28.059301], [105.411038, 28.065968], [105.412032, 28.070333], [105.413577, 28.077115], [105.41373, 28.07779], [105.414559, 28.080827], [105.415589, 28.082646], [105.417305, 28.08401], [105.416961, 28.086129], [105.415498, 28.091117], [105.416433, 28.094835], [105.41715, 28.097682], [105.418927, 28.104753], [105.422728, 28.10835], [105.427906, 28.113253], [105.43058, 28.115785], [105.437819, 28.112649], [105.439881, 28.113864], [105.438644, 28.116282], [105.435463, 28.122504], [105.437818, 28.128094], [105.447099, 28.129018], [105.453338, 28.126054], [105.461786, 28.128308], [105.471865, 28.124837], [105.479092, 28.124857], [105.491485, 28.1152], [105.495616, 28.11067], [105.494649, 28.107263], [105.494239, 28.105819], [105.497791, 28.104107], [105.506445, 28.099936], [105.505634, 28.094414], [105.504911, 28.089494], [105.50625, 28.088357], [105.507612, 28.087201], [105.521125, 28.075726], [105.526598, 28.071077], [105.522812, 28.066219], [105.526173, 28.064453], [105.529696, 28.062601], [105.53004, 28.054421]]]] } },
|
||||
{ "type": "Feature", "properties": { "id": "43615", "name": "震东乡", "site": "www.poi86.com" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[105.590437, 27.989867], [105.590437, 27.988434], [105.590706, 27.987405], [105.591227, 27.986318], [105.591626, 27.984593], [105.591435, 27.983224], [105.591452, 27.981733], [105.591713, 27.980127], [105.593865, 27.977768], [105.596045, 27.975448], [105.597815, 27.973005], [105.599586, 27.971173], [105.593286, 27.960534], [105.59363, 27.956894], [105.588878, 27.956053], [105.585048, 27.955374], [105.580583, 27.956888], [105.579897, 27.960224], [105.571653, 27.957183], [105.564159, 27.963297], [105.562374, 27.964753], [105.554468, 27.965952], [105.549653, 27.964124], [105.549454, 27.957874], [105.543807, 27.957135], [105.535894, 27.961666], [105.536582, 27.968946], [105.54071, 27.973505], [105.538646, 27.980172], [105.54243, 27.986853], [105.541161, 27.99229], [105.540215, 27.996346], [105.552746, 28.00264], [105.552745, 28.015229], [105.552745, 28.017193], [105.541396, 28.016259], [105.540417, 28.027251], [105.540019, 28.031715], [105.537735, 28.036915], [105.53004, 28.054421], [105.529696, 28.062601], [105.526173, 28.064453], [105.522812, 28.066219], [105.526598, 28.071077], [105.521125, 28.075726], [105.507612, 28.087201], [105.50625, 28.088357], [105.504911, 28.089494], [105.505634, 28.094414], [105.506445, 28.099936], [105.497791, 28.104107], [105.494239, 28.105819], [105.494649, 28.107263], [105.495616, 28.11067], [105.491485, 28.1152], [105.479092, 28.124857], [105.486319, 28.128209], [105.487543, 28.130348], [105.485285, 28.141226], [105.478717, 28.14095], [105.474323, 28.140766], [105.47079, 28.140618], [105.469799, 28.140577], [105.458446, 28.146301], [105.456038, 28.151745], [105.457413, 28.155381], [105.458958, 28.155281], [105.464231, 28.154937], [105.470831, 28.154507], [105.475993, 28.155732], [105.481843, 28.162408], [105.48491, 28.163247], [105.486317, 28.163632], [105.49148, 28.162133], [105.494923, 28.166684], [105.498366, 28.163364], [105.504, 28.163642], [105.509173, 28.163897], [105.511447, 28.164009], [105.516766, 28.163293], [105.522462, 28.162527], [105.533775, 28.163364], [105.535195, 28.163469], [105.547923, 28.161985], [105.55652, 28.158672], [105.554457, 28.156549], [105.548611, 28.152905], [105.543796, 28.146234], [105.544828, 28.141392], [105.55205, 28.136866], [105.557552, 28.134454], [105.562021, 28.130222], [105.563739, 28.124168], [105.561334, 28.117804], [105.564084, 28.107814], [105.570619, 28.104699], [105.570628, 28.103094], [105.571217, 28.101034], [105.571747, 28.099088], [105.572337, 28.097199], [105.572737, 28.095022], [105.573075, 28.092158], [105.573283, 28.090153], [105.573292, 28.087976], [105.572658, 28.085051], [105.571713, 28.081548], [105.570888, 28.078738], [105.570315, 28.076155], [105.569942, 28.073976], [105.569568, 28.072026], [105.569446, 28.07002], [105.569465, 28.06767], [105.569412, 28.065607], [105.569881, 28.061998], [105.569959, 28.059649], [105.570619, 28.057818], [105.571279, 28.054209], [105.571227, 28.053721], [105.572121, 28.047195], [105.574169, 28.035874], [105.574829, 28.032809], [105.57443, 28.030259], [105.57192, 28.027972], [105.567789, 28.025525], [105.566634, 28.024422], [105.566435, 28.023148], [105.566912, 28.02187], [105.56798, 28.020906], [105.568015, 28.020897], [105.570255, 28.020364], [105.571704, 28.020008], [105.578683, 28.018673], [105.584221, 28.015162], [105.584343, 28.015073], [105.58489, 28.014077], [105.585514, 28.012866], [105.586461, 28.011307], [105.587276, 28.009581], [105.58804, 28.008137], [105.588717, 28.006241], [105.589221, 28.00486], [105.589716, 28.00325], [105.58982, 28.001585], [105.589742, 28.000324], [105.589898, 28.000047], [105.589387, 27.999209], [105.588701, 27.998725], [105.588145, 27.99812], [105.588006, 27.99751], [105.588275, 27.996414], [105.588822, 27.995073], [105.589499, 27.993853], [105.58976, 27.992393], [105.590445, 27.990114], [105.590437, 27.989867]]]] } }
|
||||
],
|
||||
center: [
|
||||
// [105.518732, 28.456182],
|
||||
// [105.468105, 27.843248],
|
||||
// [105.373096, 28.373546],
|
||||
// [105.403183, 29.243129],
|
||||
// [105.332496, 29.255069],
|
||||
// [105.641914, 28.97747],
|
||||
// [105.524046, 29.12889],
|
||||
// [105.41377, 29.089773],
|
||||
// [105.449384, 29.259454],
|
||||
// [105.284853, 28.969076],
|
||||
// [105.561539, 29.245675],
|
||||
// [105.232078, 29.048134],
|
||||
// [105.340525, 29.079501],
|
||||
// [105.716424, 29.038917],
|
||||
// [105.487468, 29.05757],
|
||||
// [105.687341, 29.146315],
|
||||
// [105.370717, 29.259903],
|
||||
// [105.362564, 29.201656],
|
||||
// [105.575548, 29.203948],
|
||||
// [105.291912, 29.10379],
|
||||
// [105.367427, 29.150849],
|
||||
// [105.370, 29.145]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
export default geoJson;
|
||||
export default geoJsonXuyong;
|
||||
|
|
@ -770,6 +770,11 @@
|
|||
dependencies:
|
||||
"mime-db" "1.52.0"
|
||||
|
||||
"mitt@^3.0.1":
|
||||
"integrity" "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
||||
"resolved" "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz"
|
||||
"version" "3.0.1"
|
||||
|
||||
"nanoid@^3.3.6":
|
||||
"integrity" "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
|
||||
"resolved" "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue