From f88bc5fdf309cadd0990d50c0bdcc5ec9da3e6ad Mon Sep 17 00:00:00 2001
From: kerwincui <164770707@qq.com>
Date: Thu, 23 Jun 2022 01:41:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E9=85=8D=E7=BD=AE=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E7=AE=80=E5=8C=96=E5=92=8C=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/.env.development                     | 14 ++++++++++++
 vue/.env.production                      | 12 +++++++++-
 vue/.env.staging                         | 10 +++++++++
 vue/public/index.html                    |  3 ---
 vue/src/api/iot/emqx.js                  |  4 ++--
 vue/src/utils/map.js                     | 28 ++++++++++++++++++++++++
 vue/src/views/index.vue                  | 16 +++++++++-----
 vue/src/views/iot/device/device-edit.vue |  2 +-
 vue/src/views/iot/device/mqtt-client.vue |  5 ++---
 vue/src/views/iot/map.js                 | 18 ---------------
 vue/vue.config.js                        |  4 ++--
 11 files changed, 80 insertions(+), 36 deletions(-)
 create mode 100644 vue/src/utils/map.js
 delete mode 100644 vue/src/views/iot/map.js

diff --git a/vue/.env.development b/vue/.env.development
index ff6ccfd7..5ae4e27a 100644
--- a/vue/.env.development
+++ b/vue/.env.development
@@ -9,3 +9,17 @@ VUE_APP_BASE_API = '/dev-api'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+# 后端接口地址
+VUE_APP_SERVER_API_URL = 'http://localhost:8080'
+
+# EMQX接口地址和账号（EMQX安装默认账号密码为admin public）
+VUE_APP_EMQX_API_URL = 'http://wumei.live:8081'
+VUE_APP_EMQX_API_USER_NAME = 'admin'
+VUE_APP_EMQX_API_PASSWORD = 'public'
+
+# EMQX消息服务器连接地址(ws://localhost:8083/mqtt)
+VUE_APP_EMQX_SERVER_URL = 'wss://iot.wumei.live/mqtt'
+
+# 百度地图AK（自己申请，商用需要获得百度授权）
+VUE_APP_BAI_DU_AK = 'nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD'
diff --git a/vue/.env.production b/vue/.env.production
index 80365ff4..65e69e44 100644
--- a/vue/.env.production
+++ b/vue/.env.production
@@ -5,4 +5,14 @@ VUE_APP_TITLE = 物美智能系统
 ENV = 'production'
 
 # 物美智能管理系统/生产环境
-VUE_APP_BASE_API = '/prod-api'
\ No newline at end of file
+VUE_APP_BASE_API = '/prod-api'
+
+# EMQX接口账号（后端地址和EMQX接口地址部署时，通过nginx配置代理）
+VUE_APP_EMQX_API_USER_NAME = 'admin'
+VUE_APP_EMQX_API_PASSWORD = 'public'
+
+# EMQX消息服务器连接地址
+VUE_APP_EMQX_SERVER_URL = 'wss://iot.wumei.live/mqtt'
+
+# 百度地图AK（自己申请，商用需要获得百度授权）
+VUE_APP_BAI_DU_AK = 'nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD'
\ No newline at end of file
diff --git a/vue/.env.staging b/vue/.env.staging
index cb5f4d8b..4ef9fe57 100644
--- a/vue/.env.staging
+++ b/vue/.env.staging
@@ -9,3 +9,13 @@ ENV = 'staging'
 # 物美智能系统/测试环境
 VUE_APP_BASE_API = '/stage-api'
 
+# EMQX接口账号（后端地址和EMQX接口地址部署时，通过nginx配置代理）
+VUE_APP_EMQX_API_USER_NAME = 'admin'
+VUE_APP_EMQX_API_PASSWORD = 'public'
+
+# EMQX消息服务器连接地址
+VUE_APP_EMQX_SERVER_URL = 'wss://iot.wumei.live/mqtt'
+
+# 百度地图AK（自己申请，商用需要获得百度授权）
+VUE_APP_BAI_DU_AK = 'nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD'
+
diff --git a/vue/public/index.html b/vue/public/index.html
index 5e99d87b..1815b4e3 100644
--- a/vue/public/index.html
+++ b/vue/public/index.html
@@ -8,9 +8,6 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-    <!--引入百度地图,https部署需要添加一下meta-->
-    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
-    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD"></script>
 	  <style>
     html,
     body,
diff --git a/vue/src/api/iot/emqx.js b/vue/src/api/iot/emqx.js
index 027c13b2..7ee2272c 100644
--- a/vue/src/api/iot/emqx.js
+++ b/vue/src/api/iot/emqx.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
 
-const username = 'admin';
-const password = 'public';
+const username = process.env.VUE_APP_EMQX_API_USER_NAME;
+const password = process.env.VUE_APP_EMQX_API_PASSWORD;
 
 // 集群下所有客户端列表
 export function listMqttClient(query) {  
diff --git a/vue/src/utils/map.js b/vue/src/utils/map.js
new file mode 100644
index 00000000..77c3b6aa
--- /dev/null
+++ b/vue/src/utils/map.js
@@ -0,0 +1,28 @@
+export function loadBMap() {
+    return new Promise(function(resolve, reject) {
+        if (typeof BMap !== 'undefined') {
+            resolve(BMap)
+            return true
+        }
+        window.onBMapCallback = function() {
+            resolve(BMap)
+        }
+        // 使用https协议需要添加一下meta标签
+        var protocolStr = document.location.protocol;  
+        if(protocolStr == "https:")  
+        {  
+            let meta = document.createElement('meta')
+            meta.httpEquiv = 'Content-Security-Policy'
+            meta.content ='upgrade-insecure-requests'
+            meta.onerror = reject
+            document.head.appendChild(meta)
+        }       
+        // 引入百度地图
+        let script = document.createElement('script')
+        script.type = 'text/javascript'
+        script.src =
+            'http://api.map.baidu.com/api?v=2.0&ak='+ process.env.VUE_APP_BAI_DU_AK +'&__ec_v__=20190126&callback=onBMapCallback'
+        script.onerror = reject
+        document.head.appendChild(script)
+    })
+}
\ No newline at end of file
diff --git a/vue/src/views/index.vue b/vue/src/views/index.vue
index 338ae921..e015d3df 100644
--- a/vue/src/views/index.vue
+++ b/vue/src/views/index.vue
@@ -360,7 +360,7 @@ import * as echarts from 'echarts';
 require('echarts/theme/macarons') // echarts theme
 import {
     loadBMap
-} from './iot/map.js'
+} from '@/utils/map.js'
 //安装的是echarts完整包，里面包含百度地图扩展，路径为 echarts/extension/bmap/bmap.js，将其引入
 //ECharts的百度地图扩展，可以在百度地图上展现点图，线图，热力图等可视化
 require('echarts/extension/bmap/bmap')
@@ -480,11 +480,15 @@ export default {
             listAllDeviceShort(this.queryParams).then(response => {
                 this.deviceList = response.rows;
                 this.deviceCount = response.total;
-                this.$nextTick(() => {
-                    loadBMap().then(() => {
-                        this.getmap();
-                    });
-                })
+                this.loadMap();
+            })
+        },
+        /**加载地图*/
+        loadMap() {
+            this.$nextTick(() => {
+                loadBMap().then(() => {
+                    this.getmap();
+                });
             })
         },
         /** 查询emqx统计*/
diff --git a/vue/src/views/iot/device/device-edit.vue b/vue/src/views/iot/device/device-edit.vue
index 3306ed56..8a571ba9 100644
--- a/vue/src/views/iot/device/device-edit.vue
+++ b/vue/src/views/iot/device/device-edit.vue
@@ -167,7 +167,7 @@ import deviceStatistic from './device-statistic'
 import deviceTimer from './device-timer'
 import {
     loadBMap
-} from '../map.js'
+} from '@/utils/map.js'
 import {
     getDevice,
     addDevice,
diff --git a/vue/src/views/iot/device/mqtt-client.vue b/vue/src/views/iot/device/mqtt-client.vue
index e3101dc3..a738ce60 100644
--- a/vue/src/views/iot/device/mqtt-client.vue
+++ b/vue/src/views/iot/device/mqtt-client.vue
@@ -48,10 +48,9 @@ export default {
                 connectTimeout: 10000
             }
             // 配置Mqtt地址
-            let url = "wss://iot.wumei.live/mqtt"
             // let url = "ws://" + window.location.hostname + ":8083/mqtt";
-            console.log("mqtt地址：", url);
-            this.client = mqtt.connect(url, options);
+            console.log("mqtt地址：", process.env.VUE_APP_EMQX_SERVER_URL);
+            this.client = mqtt.connect(process.env.VUE_APP_EMQX_SERVER_URL, options);
             this.client.on("connect", (e) => {
                 console.log("客户端：" + randomClientId + "，成功连接服务器:", e);
                 // 订阅主题
diff --git a/vue/src/views/iot/map.js b/vue/src/views/iot/map.js
deleted file mode 100644
index 2829fd36..00000000
--- a/vue/src/views/iot/map.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export function loadBMap() {
-    let baiduAK="nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD";
-    return new Promise(function(resolve, reject) {
-        if (typeof BMap !== 'undefined') {
-            resolve(BMap)
-            return true
-        }
-        window.onBMapCallback = function() {
-            resolve(BMap)
-        }
-        let script = document.createElement('script')
-        script.type = 'text/javascript'
-        script.src =
-            'http://api.map.baidu.com/api?v=2.0&ak='+ baiduAK +'&__ec_v__=20190126&callback=onBMapCallback'
-        script.onerror = reject
-        document.head.appendChild(script)
-    })
-}
\ No newline at end of file
diff --git a/vue/vue.config.js b/vue/vue.config.js
index 70d3a19f..0d56dfbf 100644
--- a/vue/vue.config.js
+++ b/vue/vue.config.js
@@ -33,14 +33,14 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
+        target: process.env.VUE_APP_SERVER_API_URL,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       },
       ['/api/v4']: {
-        target: `http://wumei.live:8081`,
+        target: process.env.VUE_APP_EMQX_API_URL,
         changeOrigin: true,
         // logLevel: 'debug',
       },