封装ws服务，修改ws地址请到utils下面的websocketApi

.env.dev

@@ -1,12 +1,10 @@
 NODE_ENV = development
 
 # 正式服务器
-#VUE_APP_BASE_API =http://223.99.16.253:9001/api
+VUE_APP_BASE_API =http://221.2.83.254:9001/api
-#VUE_APP_BASE_IMG_URL =http://223.99.16.253:9001
+VUE_APP_BASE_IMG_URL =http://221.2.83.254:9001
-# APP_BASE_WS_URL = ws://221.2.83.254:9002/ws
 # 测试服务区
-VUE_APP_BASE_API = http://123.132.248.154:9224/api
+# VUE_APP_BASE_API = http://123.132.248.154:9224/api
-VUE_APP_BASE_IMG_URL = http://123.132.248.154:9224
+# VUE_APP_BASE_IMG_URL = http://123.132.248.154:9224
-APP_BASE_WS_URL = ws://123.132.248.154:9225/ws
 
 

.env.prod

@@ -1,10 +1,8 @@
 NODE_ENV = production
 
-#VUE_APP_BASE_API = http://192.168.10.123:9159/api
+# 正式服务器
-#VUE_APP_BASE_IMG_URL = http://192.168.10.123:9159
+VUE_APP_BASE_API =http://221.2.83.254:9001/api
-
+VUE_APP_BASE_IMG_URL =http://221.2.83.254:9001
+# 测试服务区
 # VUE_APP_BASE_API = http://123.132.248.154:9224/api
 # VUE_APP_BASE_IMG_URL = http://123.132.248.154:9224
-
-VUE_APP_BASE_API = http://123.132.248.154:9223/api
-VUE_APP_BASE_IMG_URL = http://123.132.248.154:9223

src/utils/websocketApi.js

@@ -0,0 +1,3 @@
+const WS_URL_PRODUCTION = 'ws://221.2.83.254:9002/ws'
+// const WS_URL_PRODUCTION = 'ws://123.132.248.154:9225/ws'
+export const WS_URL =  WS_URL_PRODUCTION

src/views/home/widget/callcenter.vue

@@ -29,82 +29,59 @@
               <span class="content-title-span"></span>
               <span class="fz-14 fw-b fc-w">督查长</span>
             </div>
-                        <div class="flex-1 fz-14 fc-w" style="line-height:28px">{{item.dcz}}</div>
+            <div class="flex-1 fz-14 fc-w" style="line-height: 28px">
+              {{ item.dcz }}
+            </div>
           </div>
           <div class="content-li flex">
             <div class="content-title flex ai-c">
               <span class="content-title-span"></span>
               <span class="fz-14 fw-b fc-w">副督查长</span>
             </div>
-                        <div class="flex-1 fz-14 fc-w" style="line-height:28px">{{item.fdcz}}</div>
+            <div class="flex-1 fz-14 fc-w" style="line-height: 28px">
+              {{ item.fdcz }}
+            </div>
           </div>
           <div class="content-li flex">
             <div class="content-title flex ai-c">
               <span class="content-title-span"></span>
               <span class="fz-14 fw-b fc-w">防火片区</span>
             </div>
-                        <div class="flex-1 fz-14 fc-w" style="line-height:28px">{{item.xzqmc}}</div>
+            <div class="flex-1 fz-14 fc-w" style="line-height: 28px">
+              {{ item.xzqmc }}
+            </div>
           </div>
         </el-carousel-item>
       </el-carousel>
     </div>
     <div>
-            <img class="call-phone cursor"  src="img/callphone.png"  @click="callUser" />
+      <img
+        class="call-phone cursor"
+        src="img/callphone.png"
+        @click="callUser"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import axios from 'axios'
+import { postMethodCommon, getMethodCommon } from "@/api/common.js";
-import { postMethodCommon,getMethodCommon } from '@/api/common.js';
+import { WS_URL } from "../../../utils/websocketApi";
 export default {
-    name: 'setting',
+  name: "setting",
-    props:['globalmap'],
+  props: ["globalmap"],
   data() {
     return {
       allPersonArr: [],
       areaName: localStorage.getItem("areaName"),
-            BannersArr:[
+      BannersArr: [],
-                {
+      listDataInfo: [],
-                    title: '张效玺',
+    };
-                    label: '解清 杨东霞  鲍衍萍',
-                    value: '大田庄乡、上冶镇、国有塔山林场平山分区、国有塔山林场牛岚分区'
-                },
-                {
-                    title: '刘文军',
-                    label: '朱孔现 王永祥 马杰',
-                    value: '薛庄镇、胡阳镇、国有大青山林场、山东沂蒙抽水蓄能有限公司'
-                },
-                {
-                    title: '张  雷',
-                    label: '张  浩 刘成武',
-                    value: '费城街道、国有祊河林场、国有许家崖林场'
-                },
-                {
-                    title: '孔德阳',
-                    label: '谭成亮 纪成永 于 杰       刘 露 刘宏达 张勇   ',
-                    value: '梁邱镇、石井镇、新庄镇、朱田镇、国有老虎山林场'
-                },
-                {
-                    title: '黄  芸',
-                    label: '王  雷',
-                    value: '东蒙镇、国有塔山林场塔山分区、国有塔山林场谭庄分区、山东天蒙旅游开发有限公司'
-                },
-                {
-                    title: '赵元吉',
-                    label: '龙希锋 周均营 郭永军     孟凡学',
-                    value: '探沂镇、马庄镇'
-                }
-            ],
-            listDataInfo:[]
-        }
-    },
-    watch:{
-         
   },
+  watch: {},
   created() {
-        this.initWebSocket()
+    this.initWebSocket();
-        this.getListData()  
+    this.getListData();
 
     // 首次加载页面获取在线人数
     this.getOnLineInfo();
@@ -112,28 +89,36 @@ export default {
     this.getBannerArr();
   },
   mounted() {
-        
+    setInterval(() => {
+      this.getOnLineInfo();
+    }, 2000);
   },
   methods: {
     getBannerArr() {
-            getMethodCommon("/FireGrid/GetTowInfo",{pageindex:1,pagesize:20}).then(res=>{
+      getMethodCommon("/FireGrid/GetTowInfo", {
+        pageindex: 1,
+        pagesize: 20,
+      }).then((res) => {
         if (res.code == 200) {
           this.BannersArr = res.data;
         }
-            })
+      });
     },
     getOnLineInfo() {
-            getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
+      getMethodCommon("/FireManagement/GetOnOffLineInfo").then((res) => {
-                this.listDataInfo = res.data
+        this.listDataInfo = res.data;
-            })
+      });
     },
     getListData() {
-          let arr = [1,2]
+      let arr = [1, 2];
-          let _this = this
+      let _this = this;
-          postMethodCommon("/FireCodePC/GetForestRangers?areaname="+this.areaName,arr).then(res =>{
+      postMethodCommon(
-            let rel = res.data
+        "/FireCodePC/GetForestRangers?areaname=" + this.areaName,
-            _this.allPersonArr = rel
+        arr
-          })
+      ).then((res) => {
+        let rel = res.data;
+        _this.allPersonArr = rel;
+      });
     },
     callUser() {
       this.$emit("callUser");
@@ -142,37 +127,33 @@ export default {
       let _this = this;
       if ("WebSocket" in window) {
         // 打开一个 web socket
-                var ws = new WebSocket(process.env.NODE_ENV.APP_BASE_WS_URL);
+        var ws = new WebSocket(WS_URL);
         var heartCheck;
         ws.onopen = function () {
           //Web Socket 已连接上，使用 send() 方法发送数据
-                    console.log('WEBSOCKET-ONLINE')
+          console.log("WEBSOCKET-ONLINE");
           heartCheck = setInterval(function () {
-                        ws.send('HeartBeat');
+            ws.send("HeartBeat");
           }, 5000);
         };
         ws.onmessage = function (evt) {
           clearInterval(heartCheck);
           heartCheck = setInterval(function () {
-                        ws.send('HeartBeat');
+            ws.send("HeartBeat");
           }, 5000);
-
-                    _this.getOnLineInfo()
-              
         };
         ws.onclose = function () {
-                    console.log('WEBSOCKET-CLOSED')
+          console.log("WEBSOCKET-CLOSED");
           clearInterval(heartCheck);
-                    _this.initWebSocket()
+          _this.initWebSocket();
         };
       } else {
         // 浏览器不支持 WebSocket
         alert("您的浏览器不支持 WebSocket!");
       }
     },
-        
+  },
-    }
+};
-}
 </script>
 
 <style scoped>
@@ -183,7 +164,12 @@ export default {
 }
 .call-persondata {
   height: 86px;
-    border-image: linear-gradient(270deg, rgba(255, 223, 105, 0), rgba(255, 189, 56, 1)) 1 1;
+  border-image: linear-gradient(
+      270deg,
+      rgba(255, 223, 105, 0),
+      rgba(255, 189, 56, 1)
+    )
+    1 1;
 }
 .call-persondata .img {
   width: 68px;
@@ -191,14 +177,14 @@ export default {
 }
 .call-persondata .titles {
   font-weight: bold;
-    color: #FFA513;
+  color: #ffa513;
   font-size: 18px;
 }
 .call-persondata .span {
   font-size: 16px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-    color: #D0D0D0;
+  color: #d0d0d0;
 }
 .call-line {
   width: 404px;
@@ -226,7 +212,7 @@ export default {
 .content-title-span {
   width: 6px;
   height: 6px;
-    background: #FACD44;
+  background: #facd44;
   margin: 0 10px;
 }
 
@@ -235,40 +221,40 @@ export default {
   height: 78px;
 }
 
-
+::-webkit-scrollbar-track,
-
+::-webkit-scrollbar-thumb {
-
+  border: 0;
-::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
-    border: 0
 }
 
 ::-webkit-scrollbar {
   height: 10px;
   width: 10px;
   background: transparent;
-    border-radius: 5px
+  border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
   padding-top: 100px;
-    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
+  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
   background-color: #797979;
   min-height: 28px;
   border-radius: 4px;
-    background-clip: padding-box
+  background-clip: padding-box;
 }
 
-::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-track,
-    border: 0
+::-webkit-scrollbar-thumb {
+  border: 0;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
+  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
-    background-color: rgba(0, 0, 0, .4)
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 ::-webkit-scrollbar-thumb:active {
-    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
-    background-color: rgba(0, 0, 0, .5)
+  background-color: rgba(0, 0, 0, 0.5);
 }
 </style>

src/views/home/widget/fireclues.vue

@@ -25,7 +25,7 @@
   <script>
   let BASE_URL = process.env.VUE_APP_BASE_API
   import axios from 'axios'
-  import { parse } from '../lib/handleGeojson';
+  import { WS_URL } from "../../../utils/websocketApi";
     export default {
       name: 'toolbox',
       props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
@@ -72,7 +72,7 @@
               if ("WebSocket" in window) {
               
                   // 打开一个 web socket
-                  var ws = new WebSocket(process.env.NODE_ENV.APP_BASE_WS_URL);
+                  var ws = new WebSocket(WS_URL);
                   var heartCheck;
                   ws.onopen = function () {
                       //Web Socket 已连接上，使用 send() 方法发送数据

src/views/home/widget/reportlist.vue

@@ -44,7 +44,7 @@
   <script>
   let BASE_URL = process.env.VUE_APP_BASE_API
   import axios from 'axios'
-  import { parse } from '../lib/handleGeojson';
+  import {WS_URL} from '../../../utils/websocketApi'
     export default {
       name: 'toolbox',
       props:['globalmap','checkList','checkNumber','mergeSuccessRandom'],
@@ -284,8 +284,7 @@
               if ("WebSocket" in window) {
                 
                   // 打开一个 web socket
-                  
+                  var ws = new WebSocket(WS_URL);
-                  var ws = new WebSocket(process.env.NODE_ENV.APP_BASE_WS_URL);
                   ws.onopen = function () {
                       //Web Socket 已连接上，使用 send() 方法发送数据
                       console.log('WEBSOCKET-ONLINE')

src/views/home/widget/socketdiabox.vue

@@ -22,6 +22,7 @@
 import { mapState,mapGetters } from "vuex";   
 import axios from "axios";
 import { postMethodCommon,getMethodCommon } from '@/api/common.js';
+import {WS_URL} from '../../../utils/websocketApi'
 export default {
     name: 'monitorbox',
     computed: {
@@ -158,7 +159,8 @@ export default {
             let _this = this;
             if ("WebSocket" in window) {
                 // 打开一个 web socket
-                var ws = new WebSocket(process.env.NODE_ENV.APP_BASE_WS_URL);
+                
+                var ws = new WebSocket(WS_URL);
                 var heartCheck;
                 ws.onopen = function () {
                     //Web Socket 已连接上，使用 send() 方法发送数据