From e10372f5ab87277f27c3032ca10d19ef8bc84dae Mon Sep 17 00:00:00 2001
From: SHICHAO <17568097882@163.com>
Date: Sat, 26 Aug 2023 11:07:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85ws=E6=9C=8D=E5=8A=A1=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9ws=E5=9C=B0=E5=9D=80=E8=AF=B7=E5=88=B0utils?=
 =?UTF-8?q?=E4=B8=8B=E9=9D=A2=E7=9A=84websocketApi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.dev                               |  10 +-
 .env.prod                              |  14 +-
 src/utils/websocketApi.js              |   3 +
 src/views/home/widget/callcenter.vue   | 452 ++++++++++++-------------
 src/views/home/widget/fireclues.vue    |   4 +-
 src/views/home/widget/reportlist.vue   |   5 +-
 src/views/home/widget/socketdiabox.vue |   4 +-
 7 files changed, 239 insertions(+), 253 deletions(-)
 create mode 100644 src/utils/websocketApi.js

diff --git a/.env.dev b/.env.dev
index bd4f016..06d322e 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,12 +1,10 @@
 NODE_ENV = development
 
 # 正式服务器
-#VUE_APP_BASE_API =http://223.99.16.253:9001/api
-#VUE_APP_BASE_IMG_URL =http://223.99.16.253:9001
-# APP_BASE_WS_URL = ws://221.2.83.254:9002/ws
+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
-APP_BASE_WS_URL = ws://123.132.248.154:9225/ws
+# VUE_APP_BASE_API = http://123.132.248.154:9224/api
+# VUE_APP_BASE_IMG_URL = http://123.132.248.154:9224
 
 
diff --git a/.env.prod b/.env.prod
index 19b0857..7ce565b 100644
--- a/.env.prod
+++ b/.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://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
+# 正式服务器
+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
diff --git a/src/utils/websocketApi.js b/src/utils/websocketApi.js
new file mode 100644
index 0000000..d8dd712
--- /dev/null
+++ b/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
diff --git a/src/views/home/widget/callcenter.vue b/src/views/home/widget/callcenter.vue
index edcd068..f2ac531 100644
--- a/src/views/home/widget/callcenter.vue
+++ b/src/views/home/widget/callcenter.vue
@@ -1,274 +1,260 @@
 <template>
-    <div class="table-box">
-         <div class="max-w flex jc-sb">
-            <div class="flex-1 mr-1 call-persondata flex">
-                <div class="flex-1 flex ai-c jc-c">
-                    <img class="img" src="img/zcry.png" />
-                </div>
-                <div class="flex-1 flex column jc-c">
-                    <div class="titles">注册人员</div>
-                    <div class="span">{{listDataInfo.allcount}}</div>
-                </div>
-            </div>
-            <div class="flex-1 call-persondata flex">
-                <div class="flex-1 flex ai-c jc-c">
-                    <img class="img" src="img/zxry.png" />
-                </div>
-                <div class="flex-1 flex column jc-c">
-                    <div class="titles">在线人员</div>
-                    <div class="span">{{listDataInfo.onlineCount}}</div>
-                </div>
-            </div>
-         </div>
-         <div class="call-line"></div>
-         <div class="call-content flex column">
-            <el-carousel height="150px" indicator-position="outside">
-                <el-carousel-item v-for="(item,index) in BannersArr" :key="index">
-                    <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.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>
-                    <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>
-                </el-carousel-item>
-            </el-carousel>
-         </div>
-         <div >
-            <img class="call-phone cursor"  src="img/callphone.png"  @click="callUser" />
-         </div>
+  <div class="table-box">
+    <div class="max-w flex jc-sb">
+      <div class="flex-1 mr-1 call-persondata flex">
+        <div class="flex-1 flex ai-c jc-c">
+          <img class="img" src="img/zcry.png" />
+        </div>
+        <div class="flex-1 flex column jc-c">
+          <div class="titles">注册人员</div>
+          <div class="span">{{ listDataInfo.allcount }}</div>
+        </div>
+      </div>
+      <div class="flex-1 call-persondata flex">
+        <div class="flex-1 flex ai-c jc-c">
+          <img class="img" src="img/zxry.png" />
+        </div>
+        <div class="flex-1 flex column jc-c">
+          <div class="titles">在线人员</div>
+          <div class="span">{{ listDataInfo.onlineCount }}</div>
+        </div>
+      </div>
     </div>
+    <div class="call-line"></div>
+    <div class="call-content flex column">
+      <el-carousel height="150px" indicator-position="outside">
+        <el-carousel-item v-for="(item, index) in BannersArr" :key="index">
+          <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.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>
+          <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>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div>
+      <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',
-    props:['globalmap'],
-    data(){
-        return {
-            allPersonArr:[],
-            areaName: localStorage.getItem("areaName"),
-            BannersArr:[
-                {
-                    title: '张效玺',
-                    label: '解清 杨东霞  鲍衍萍',
-                    value: '大田庄乡、上冶镇、国有塔山林场平山分区、国有塔山林场牛岚分区'
-                },
-                {
-                    title: '刘文军',
-                    label: '朱孔现 王永祥 马杰',
-                    value: '薛庄镇、胡阳镇、国有大青山林场、山东沂蒙抽水蓄能有限公司'
-                },
-                {
-                    title: '张  雷',
-                    label: '张  浩 刘成武',
-                    value: '费城街道、国有祊河林场、国有许家崖林场'
-                },
-                {
-                    title: '孔德阳',
-                    label: '谭成亮 纪成永 于 杰       刘 露 刘宏达 张勇   ',
-                    value: '梁邱镇、石井镇、新庄镇、朱田镇、国有老虎山林场'
-                },
-                {
-                    title: '黄  芸',
-                    label: '王  雷',
-                    value: '东蒙镇、国有塔山林场塔山分区、国有塔山林场谭庄分区、山东天蒙旅游开发有限公司'
-                },
-                {
-                    title: '赵元吉',
-                    label: '龙希锋 周均营 郭永军     孟凡学',
-                    value: '探沂镇、马庄镇'
-                }
-            ],
-            listDataInfo:[]
+  name: "setting",
+  props: ["globalmap"],
+  data() {
+    return {
+      allPersonArr: [],
+      areaName: localStorage.getItem("areaName"),
+      BannersArr: [],
+      listDataInfo: [],
+    };
+  },
+  watch: {},
+  created() {
+    this.initWebSocket();
+    this.getListData();
+
+    // 首次加载页面获取在线人数
+    this.getOnLineInfo();
+
+    this.getBannerArr();
+  },
+  mounted() {
+    setInterval(() => {
+      this.getOnLineInfo();
+    }, 2000);
+  },
+  methods: {
+    getBannerArr() {
+      getMethodCommon("/FireGrid/GetTowInfo", {
+        pageindex: 1,
+        pagesize: 20,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.BannersArr = res.data;
         }
+      });
     },
-    watch:{
-         
+    getOnLineInfo() {
+      getMethodCommon("/FireManagement/GetOnOffLineInfo").then((res) => {
+        this.listDataInfo = res.data;
+      });
     },
-    created(){
-        this.initWebSocket()
-        this.getListData()  
-
-        // 首次加载页面获取在线人数
-        this.getOnLineInfo();
-
-        this.getBannerArr();
+    getListData() {
+      let arr = [1, 2];
+      let _this = this;
+      postMethodCommon(
+        "/FireCodePC/GetForestRangers?areaname=" + this.areaName,
+        arr
+      ).then((res) => {
+        let rel = res.data;
+        _this.allPersonArr = rel;
+      });
     },
-    mounted(){
-        
+    callUser() {
+      this.$emit("callUser");
     },
-    methods:{
-        getBannerArr(){
-            getMethodCommon("/FireGrid/GetTowInfo",{pageindex:1,pagesize:20}).then(res=>{
-                if(res.code ==  200){
-                    this.BannersArr = res.data;
-                }
-            })
-        },
-        getOnLineInfo(){
-            getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
-                this.listDataInfo = res.data
-            })
-        },
-        getListData(){
-          let arr = [1,2]
-          let _this = this
-          postMethodCommon("/FireCodePC/GetForestRangers?areaname="+this.areaName,arr).then(res =>{
-            let rel = res.data
-            _this.allPersonArr = rel
-          })
-        },
-        callUser(){
-            this.$emit("callUser");
-        },
-        initWebSocket() {
-            let _this = this;
-            if ("WebSocket" in window) {
-                // 打开一个 web socket
-                var ws = new WebSocket(process.env.NODE_ENV.APP_BASE_WS_URL);
-                var heartCheck;
-                ws.onopen = function () {
-                    //Web Socket 已连接上，使用 send() 方法发送数据
-                    console.log('WEBSOCKET-ONLINE')
-                    heartCheck = setInterval(function() {
-                        ws.send('HeartBeat');
-                    }, 5000);
-                };
-                ws.onmessage = function (evt) {
-                    clearInterval(heartCheck);
-                    heartCheck = setInterval(function() {
-                        ws.send('HeartBeat');
-                    }, 5000);
-
-                    _this.getOnLineInfo()
-              
-                };
-                ws.onclose = function () {
-                    console.log('WEBSOCKET-CLOSED')
-                    clearInterval(heartCheck);
-                    _this.initWebSocket()
-                };
-            } else {
-                // 浏览器不支持 WebSocket
-                alert("您的浏览器不支持 WebSocket!");
-            }
-        },
-        
-    }
-}
+    initWebSocket() {
+      let _this = this;
+      if ("WebSocket" in window) {
+        // 打开一个 web socket
+        var ws = new WebSocket(WS_URL);
+        var heartCheck;
+        ws.onopen = function () {
+          //Web Socket 已连接上，使用 send() 方法发送数据
+          console.log("WEBSOCKET-ONLINE");
+          heartCheck = setInterval(function () {
+            ws.send("HeartBeat");
+          }, 5000);
+        };
+        ws.onmessage = function (evt) {
+          clearInterval(heartCheck);
+          heartCheck = setInterval(function () {
+            ws.send("HeartBeat");
+          }, 5000);
+        };
+        ws.onclose = function () {
+          console.log("WEBSOCKET-CLOSED");
+          clearInterval(heartCheck);
+          _this.initWebSocket();
+        };
+      } else {
+        // 浏览器不支持 WebSocket
+        alert("您的浏览器不支持 WebSocket!");
+      }
+    },
+  },
+};
 </script>
 
 <style scoped>
-.table-box{
-    width: 100%;
-    height: 100%;
-    padding: 20px 15px;
+.table-box {
+  width: 100%;
+  height: 100%;
+  padding: 20px 15px;
 }
-.call-persondata{
-    height: 86px;
-    border-image: linear-gradient(270deg, rgba(255, 223, 105, 0), rgba(255, 189, 56, 1)) 1 1;
+.call-persondata {
+  height: 86px;
+  border-image: linear-gradient(
+      270deg,
+      rgba(255, 223, 105, 0),
+      rgba(255, 189, 56, 1)
+    )
+    1 1;
 }
-.call-persondata .img{
-    width: 68px;
-    height: 67px;
+.call-persondata .img {
+  width: 68px;
+  height: 67px;
 }
-.call-persondata .titles{
-    font-weight: bold;
-    color: #FFA513;
-    font-size: 18px;
+.call-persondata .titles {
+  font-weight: bold;
+  color: #ffa513;
+  font-size: 18px;
 }
-.call-persondata .span{
-    font-size: 16px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #D0D0D0;
+.call-persondata .span {
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #d0d0d0;
 }
-.call-line{
-    width: 404px;
-    height: 2px;
-    margin-top: 25px;
+.call-line {
+  width: 404px;
+  height: 2px;
+  margin-top: 25px;
 }
-.call-content{
-    height: 185px;
+.call-content {
+  height: 185px;
 }
-.content-li{
-    width: 400px;
-    min-height: 28px;
-    /* background: linear-gradient(270deg, rgba(121,74,14,0) 0%, #442406 100%); */
-    background-image:url(/img/call-center-bar.png);
-    background:100% 100%;
-    margin-top: 12px;
+.content-li {
+  width: 400px;
+  min-height: 28px;
+  /* background: linear-gradient(270deg, rgba(121,74,14,0) 0%, #442406 100%); */
+  background-image: url(/img/call-center-bar.png);
+  background: 100% 100%;
+  margin-top: 12px;
 }
-.content-title{
-    width: 111px;
-    height: 28px;
-    /* background-image: url(/img/callleftbg.png); */
-    background-size: 100% 28px;
-    margin-right: 8px;
+.content-title {
+  width: 111px;
+  height: 28px;
+  /* background-image: url(/img/callleftbg.png); */
+  background-size: 100% 28px;
+  margin-right: 8px;
 }
-.content-title-span{
-    width: 6px;
-    height: 6px;
-    background: #FACD44;
-    margin: 0 10px;
+.content-title-span {
+  width: 6px;
+  height: 6px;
+  background: #facd44;
+  margin: 0 10px;
 }
 
-.call-phone{
-    width: 360px;
-    height: 78px;
+.call-phone {
+  width: 360px;
+  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
+  height: 10px;
+  width: 10px;
+  background: transparent;
+  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);
-    background-color: #797979;
-    min-height: 28px;
-    border-radius: 4px;
-    background-clip: padding-box
+  padding-top: 100px;
+  -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;
 }
 
-::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
-    border: 0
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 0;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
-    background-color: rgba(0, 0, 0, .4)
+  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 ::-webkit-scrollbar-thumb:active {
-    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
-    background-color: rgba(0, 0, 0, .5)
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
+  background-color: rgba(0, 0, 0, 0.5);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/home/widget/fireclues.vue b/src/views/home/widget/fireclues.vue
index 7898792..b27ea56 100644
--- a/src/views/home/widget/fireclues.vue
+++ b/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() 方法发送数据
diff --git a/src/views/home/widget/reportlist.vue b/src/views/home/widget/reportlist.vue
index f53d839..0ecf9f2 100644
--- a/src/views/home/widget/reportlist.vue
+++ b/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(process.env.NODE_ENV.APP_BASE_WS_URL);
+                  var ws = new WebSocket(WS_URL);
                   ws.onopen = function () {
                       //Web Socket 已连接上，使用 send() 方法发送数据
                       console.log('WEBSOCKET-ONLINE')
diff --git a/src/views/home/widget/socketdiabox.vue b/src/views/home/widget/socketdiabox.vue
index 600e53d..b60d80a 100644
--- a/src/views/home/widget/socketdiabox.vue
+++ b/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() 方法发送数据