test

package-lock.json

@@ -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",

package.json

@@ -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",
+    "vue-router": "^4.2.5"
-    "pinia": "^2.1.7"
-
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",

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>
 

src/api.js

@@ -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

src/common/EventBus.js

@@ -0,0 +1,2 @@
+import mitt from 'mitt'
+export const globalEventBus =  mitt()

src/common/push.js

@@ -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
+// }

src/components/Header.vue

@@ -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`
 }

src/components/areaList.vue

@@ -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)

src/components/areaMap.vue

@@ -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 geoJsonLuxian from "/static/jsonData/luxian_geo.js"
-import geoJson 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)
+  emit('getTowmName', e)
 }
-
-
 const pointerFn = () => {
   let list = []
   geoJson.center.forEach((item, index) => {
@@ -102,7 +109,7 @@ const pointerFn2 = (lists) => {
       symbolSize: [190, 30], // 图片大小
       symbolOffset: ['50%', '-50%'],
       data: lists,
-      
+
     },)
   })
   return list
@@ -321,7 +328,7 @@ const initAreaMap = () => {
 
     getTowmName(params.name)
     areaStore.areaCodeList.forEach(item => {
-      if (item.name == (params.name||params.value)) {
+      if (item.name == (params.name || params.value)) {
         areaStore.changeUserInfoFn(510521, item.code)
       }
     })
@@ -351,7 +358,7 @@ const initTownMap = async (name) => {
       id: item.id
     })
   })
- 
+
   const townJson = deepCopy(geoJson)
 
 
@@ -377,7 +384,7 @@ const initTownMap = async (name) => {
         roam: false,
         label: {
           emphasis: {
-            show: false 
+            show: false
           }
         },
         show: true,
@@ -421,7 +428,7 @@ const initTownMap = async (name) => {
 
       },
 
-     
+
 
 
       {
@@ -548,7 +555,7 @@ const initTownMap = async (name) => {
   bg.setOption(option);
 
 
-  
+
   bg.on('click', function (params) {
     let longInfo = params.data.coord
     areaStore.areaCodeList.forEach(item => {
@@ -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(
+watch(() => areaStore.userInfo, (value, oldValue) => {
-  () => areaStore.address,
+  if (value.areaCode) {
-  (value, oldValue) => {
+    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":
-      initAreaMap()
+        geoJson = geoJsonGulin
+        break;
+     
     }
-    else if (value.area) {
+    initAreaMap()
-      showArea.value = false
+  }
-      initTownMap(value.area)
+  // else if (value.area) {
-    }
+  //   showArea.value = false
-
+  //   initTownMap(value.area)
-
+  // }
-  }, {
+}, {
   deep: true,
-  // immediate: true
 }
 
 )
 
 
 
-onMounted(() => {
+onMounted(async () => {
-  initAreaMap()
+  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>

src/components/farmerMap.vue

@@ -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 = []

src/components/index/centerBottom.vue

@@ -3,23 +3,28 @@
     <scrollTable v-if="config.data.length" :config="config" @click="hdClick" style="width:100%;height:100%"></scrollTable>
 </template>
 <script setup>
-import {ref,reactive} from "vue"
+import { ref, reactive } from "vue"
 import scrollTable from "@/components/scrollTable.vue"
 import warnPop from "@/components/warnPop.vue"
-import {landCollectionListApi} from "@/api.js"
+import { landCollectionListApi } from "@/api.js"
 import { areaObj } from "@/store/index.js"
-const userInfoStore=areaObj()
+import { globalEventBus } from '@/common/eventBus'
+
+
+
+const userInfoStore = areaObj()
 // ...userInfoStore.userInfo
 const showWarnPop = ref(false)
 const ChildsDom = ref(null);
-const dataList=ref("")
+const dataList = ref("")
-const item=ref('')
+const item = ref('')
 const hdClick = (e) => {
     // console.log(e)
     if (e.ceil) {
         if (e.columnIndex == 9) {
             showWarnPop.value = true
-            item.value=dataList.value[e.rowIndex]
+            item.value = dataList.value[e.rowIndex]
+        console.log(item.value)
 
         }
     }
@@ -34,28 +39,35 @@ const alignFn = (num) => {
 const config = reactive({
     header: ['地块名称', '土壤温度(℃)', '土壤湿度', '土壤PH值', '土壤氮磷钾', '风速（m/s）', '环境温度(℃)', '环境湿度', '二氧化碳（ppm）', '历史预警数据'],
     headerBGC: "#092757",
-    font:'12px',
+    font: '12px',
     headerStyle: "background-image: url('/static/index/tableHead.png');font-family: FZCYJ;background-size: 100% 100%;",
     oddRowBGC: "#0C2045",
     align: alignFn(10),
-    data: [ ]
+    data: []
 })
 
 
 landCollectionListApi(
-{
+    {
-    ...userInfoStore.userInfo
+        ...userInfoStore.userInfo
 
-}
+    }
 
-).then(res=>{
+).then(res => {
-    dataList.value=res.data.list
+    dataList.value = res.data.list
     res.data.list.forEach(item => {
         config.data.push(
-            [item.title, item.soil_temperature,item.soil_moisture, item.soil_PH,item.soil_potassium_phosphate_nitrogen+'/'+item.soil_potassium_phosphate_phosphorus+'/'+item.soil_potassium_phosphate_potassium, item.wind_speed, item.ambient_temperature, item.ambient_humidity, item.carbon_dioxide, `<span style='color:#2562AD' > 查看<span>`]
+            [item.title, item.soil_temperature, item.soil_moisture, item.soil_PH, item.soil_potassium_phosphate_nitrogen + '/' + item.soil_potassium_phosphate_phosphorus + '/' + item.soil_potassium_phosphate_potassium, item.wind_speed, item.ambient_temperature, item.ambient_humidity, item.carbon_dioxide, `<span style='color:#2562AD' > 查看<span>`]
         )
-        
+
     });
 })
+globalEventBus.on('indexcenterbottom', data => {
+    showWarnPop.value = true
+    item.value =   dataList.value[data.index]  
+})
 
+globalEventBus.on('indexcenterbottom-1', data => {
+showWarnPop.value = false
+})
 </script>

src/components/index/leftBottom.vue

@@ -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);'/>`:""]

src/components/index/leftTop.vue

@@ -1,26 +1,29 @@
 <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"
 import scrollTable from "@/components/scrollTable.vue"
-import { ref, reactive,onMounted } from "vue"
+import { ref, reactive, onMounted } from "vue"
-import {deviceAlarmCountApi} from "@/api.js"
+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) => {
     if (e.ceil) {
         if (e.columnIndex == 3) {
-            popData.value=data[e.rowIndex]
+            popData.value = data[e.rowIndex]
             showWarnDeatil.value = true
         }
     }
 }
+
 const alignFn = (num) => {
     let arr = []
     for (let i = 0; i < num; i++) {
@@ -49,15 +52,15 @@ const config3 = reactive({
     ]
 })
 
-const data=reactive([])
+const data = reactive([])
-const popData=ref("")
+const popData = ref("")
 
-onMounted( ()=>{
+onMounted(() => {
     deviceAlarmCountApi(
-    {
+        {
-        ...userInfoStore.userInfo
+            ...userInfoStore.userInfo
-    }
+        }
-    ).then(res=>{
+    ).then(res => {
 
         res.data.list.forEach(item => {
 
@@ -68,5 +71,18 @@ onMounted( ()=>{
             )
         });
     })
-} )
+})
+
+
+globalEventBus.on('indexlefttop', data => {
+    popData.value = data.index
+    showWarnDeatil.value = true
+
+})
+globalEventBus.on('indexlefttop-1', data => {
+
+showWarnDeatil.value = false
+
+})
+
 </script>

src/components/index/rightBottom.vue

@@ -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>

src/store/index.js

@@ -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

src/view/home.vue

@@ -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,77 +32,43 @@
                 </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 class="bottoms" :key="userInfoStore.userInfo.name">
-                <div style="height: 35%;">
+                <rightBottom></rightBottom>
-                    <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>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, watch,onBeforeUnmount } from "vue"
+import { ref, reactive, onMounted, watch, onBeforeUnmount } from "vue"
 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">

static/jsonData/luxian_geo.js

@@ -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.647586, 29.242722],
-        [105.647478, 29.080965],
+        // [105.647478, 29.080965],
-        [105.577683, 28.98374],
+        // [105.577683, 28.98374],
-        [105.403183, 29.243129],
+        // [105.403183, 29.243129],
-        [105.332496, 29.255069],
+        // [105.332496, 29.255069],
-        [105.641914, 28.97747],
+        // [105.641914, 28.97747],
-        [105.524046, 29.12889],
+        // [105.524046, 29.12889],
-        [105.41377, 29.089773],
+        // [105.41377, 29.089773],
-        [105.449384, 29.259454],
+        // [105.449384, 29.259454],
-        [105.284853, 28.969076],
+        // [105.284853, 28.969076],
-        [105.561539, 29.245675],
+        // [105.561539, 29.245675],
-        [105.232078, 29.048134],
+        // [105.232078, 29.048134],
-        [105.340525, 29.079501],
+        // [105.340525, 29.079501],
-        [105.716424, 29.038917],
+        // [105.716424, 29.038917],
-        [105.487468, 29.05757],
+        // [105.487468, 29.05757],
-        [105.687341, 29.146315],
+        // [105.687341, 29.146315],
-        [105.370717, 29.259903],
+        // [105.370717, 29.259903],
-        [105.362564, 29.201656],
+        // [105.362564, 29.201656],
-        [105.575548, 29.203948],
+        // [105.575548, 29.203948],
-        [105.291912, 29.10379],
+        // [105.291912, 29.10379],
-        [105.367427, 29.150849],
+        // [105.367427, 29.150849],
-        [105.370, 29.145]
+        // [105.370, 29.145]
     ]
 }
 
-export default geoJson;
+export default geoJsonLuxian;

static/jsonData/xuyong_geo.js

@@ -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;

yarn.lock

@@ -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"