xujingliang
/
Fei_Xian_Lin_Ye_Fang_Huo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

master
石超 2023-08-26 11:07:26 +08:00
parent c8a9047b68
commit e10372f5ab
7 changed files with 239 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.env.dev
View File

@ -1,12 +1,10 @@
NODE_ENV = development 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

14
.env.prod
View File

@ -1,10 +1,8 @@
NODE_ENV = production 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: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

3
src/utils/websocketApi.js Normal file
View File

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

452
src/views/home/widget/callcenter.vue
View File

@ -1,274 +1,260 @@
<template> <template>
<div class="table-box"> <div class="table-box">
<div class="max-w flex jc-sb"> <div class="max-w flex jc-sb">
<div class="flex-1 mr-1 call-persondata flex"> <div class="flex-1 mr-1 call-persondata flex">
<div class="flex-1 flex ai-c jc-c"> <div class="flex-1 flex ai-c jc-c">
<img class="img" src="img/zcry.png" /> <img class="img" src="img/zcry.png" />
</div> </div>
<div class="flex-1 flex column jc-c"> <div class="flex-1 flex column jc-c">
<div class="titles">注册人员</div> <div class="titles">注册人员</div>
<div class="span">{{listDataInfo.allcount}}</div> <div class="span">{{ listDataInfo.allcount }}</div>
</div> </div>
</div> </div>
<div class="flex-1 call-persondata flex"> <div class="flex-1 call-persondata flex">
<div class="flex-1 flex ai-c jc-c"> <div class="flex-1 flex ai-c jc-c">
<img class="img" src="img/zxry.png" /> <img class="img" src="img/zxry.png" />
</div> </div>
<div class="flex-1 flex column jc-c"> <div class="flex-1 flex column jc-c">
<div class="titles">在线人员</div> <div class="titles">在线人员</div>
<div class="span">{{listDataInfo.onlineCount}}</div> <div class="span">{{ listDataInfo.onlineCount }}</div>
</div> </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> </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> </template>
<script> <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 { export default {
name: 'setting', name: "setting",
props:['globalmap'], props: ["globalmap"],
data(){ data() {
return { return {
allPersonArr:[], allPersonArr: [],
areaName: localStorage.getItem("areaName"), areaName: localStorage.getItem("areaName"),
BannersArr:[ BannersArr: [],
{ listDataInfo: [],
title: '张效玺', };
label: '解清 杨东霞 鲍衍萍', },
value: '大田庄乡、上冶镇、国有塔山林场平山分区、国有塔山林场牛岚分区' watch: {},
}, created() {
{ this.initWebSocket();
title: '刘文军', this.getListData();
label: '朱孔现 王永祥 马杰',
value: '薛庄镇、胡阳镇、国有大青山林场、山东沂蒙抽水蓄能有限公司' // 首次加载页面获取在线人数
}, this.getOnLineInfo();
{
title: '张 雷', this.getBannerArr();
label: '张 浩 刘成武', },
value: '费城街道、国有祊河林场、国有许家崖林场' mounted() {
}, setInterval(() => {
{ this.getOnLineInfo();
title: '孔德阳', }, 2000);
label: '谭成亮 纪成永 于 杰 刘 露 刘宏达 张勇 ', },
value: '梁邱镇、石井镇、新庄镇、朱田镇、国有老虎山林场' methods: {
}, getBannerArr() {
{ getMethodCommon("/FireGrid/GetTowInfo", {
title: '黄 芸', pageindex: 1,
label: '王 雷', pagesize: 20,
value: '东蒙镇、国有塔山林场塔山分区、国有塔山林场谭庄分区、山东天蒙旅游开发有限公司' }).then((res) => {
}, if (res.code == 200) {
{ this.BannersArr = res.data;
title: '赵元吉',
label: '龙希锋 周均营 郭永军 孟凡学',
value: '探沂镇、马庄镇'
}
],
listDataInfo:[]
} }
});
}, },
watch:{ getOnLineInfo() {
getMethodCommon("/FireManagement/GetOnOffLineInfo").then((res) => {
this.listDataInfo = res.data;
});
}, },
created(){ getListData() {
this.initWebSocket() let arr = [1, 2];
this.getListData() let _this = this;
postMethodCommon(
// 首次加载页面获取在线人数 "/FireCodePC/GetForestRangers?areaname=" + this.areaName,
this.getOnLineInfo(); arr
).then((res) => {
this.getBannerArr(); let rel = res.data;
_this.allPersonArr = rel;
});
}, },
mounted(){ callUser() {
this.$emit("callUser");
}, },
methods:{ initWebSocket() {
getBannerArr(){ let _this = this;
getMethodCommon("/FireGrid/GetTowInfo",{pageindex:1,pagesize:20}).then(res=>{ if ("WebSocket" in window) {
if(res.code == 200){ // 打开一个 web socket
this.BannersArr = res.data; var ws = new WebSocket(WS_URL);
} var heartCheck;
}) ws.onopen = function () {
}, //Web Socket 已连接上，使用 send() 方法发送数据
getOnLineInfo(){ console.log("WEBSOCKET-ONLINE");
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{ heartCheck = setInterval(function () {
this.listDataInfo = res.data ws.send("HeartBeat");
}) }, 5000);
}, };
getListData(){ ws.onmessage = function (evt) {
let arr = [1,2] clearInterval(heartCheck);
let _this = this heartCheck = setInterval(function () {
postMethodCommon("/FireCodePC/GetForestRangers?areaname="+this.areaName,arr).then(res =>{ ws.send("HeartBeat");
let rel = res.data }, 5000);
_this.allPersonArr = rel };
}) ws.onclose = function () {
}, console.log("WEBSOCKET-CLOSED");
callUser(){ clearInterval(heartCheck);
this.$emit("callUser"); _this.initWebSocket();
}, };
initWebSocket() { } else {
let _this = this; // 浏览器不支持 WebSocket
if ("WebSocket" in window) { alert("您的浏览器不支持 WebSocket!");
// 打开一个 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!");
}
},
}
}
</script> </script>
<style scoped> <style scoped>
.table-box{ .table-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20px 15px; padding: 20px 15px;
} }
.call-persondata{ .call-persondata {
height: 86px; 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{ .call-persondata .img {
width: 68px; width: 68px;
height: 67px; height: 67px;
} }
.call-persondata .titles{ .call-persondata .titles {
font-weight: bold; font-weight: bold;
color: #FFA513; color: #ffa513;
font-size: 18px; font-size: 18px;
} }
.call-persondata .span{ .call-persondata .span {
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #D0D0D0; color: #d0d0d0;
} }
.call-line{ .call-line {
width: 404px; width: 404px;
height: 2px; height: 2px;
margin-top: 25px; margin-top: 25px;
} }
.call-content{ .call-content {
height: 185px; height: 185px;
} }
.content-li{ .content-li {
width: 400px; width: 400px;
min-height: 28px; min-height: 28px;
/* background: linear-gradient(270deg, rgba(121,74,14,0) 0%, #442406 100%); */ /* background: linear-gradient(270deg, rgba(121,74,14,0) 0%, #442406 100%); */
background-image:url(/img/call-center-bar.png); background-image: url(/img/call-center-bar.png);
background:100% 100%; background: 100% 100%;
margin-top: 12px; margin-top: 12px;
} }
.content-title{ .content-title {
width: 111px; width: 111px;
height: 28px; height: 28px;
/* background-image: url(/img/callleftbg.png); */ /* background-image: url(/img/callleftbg.png); */
background-size: 100% 28px; background-size: 100% 28px;
margin-right: 8px; margin-right: 8px;
} }
.content-title-span{ .content-title-span {
width: 6px; width: 6px;
height: 6px; height: 6px;
background: #FACD44; background: #facd44;
margin: 0 10px; margin: 0 10px;
} }
.call-phone{ .call-phone {
width: 360px; width: 360px;
height: 78px; height: 78px;
} }
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
border: 0;
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
border: 0
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
height: 10px; height: 10px;
width: 10px; width: 10px;
background: transparent; background: transparent;
border-radius: 5px border-radius: 5px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
padding-top: 100px; 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),
background-color: #797979; inset -1px -1px 0 rgba(0, 0, 0, 0.07);
min-height: 28px; background-color: #797979;
border-radius: 4px; min-height: 28px;
background-clip: padding-box border-radius: 4px;
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-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-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> </style>

4
src/views/home/widget/fireclues.vue
View File

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

5
src/views/home/widget/reportlist.vue
View File

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

4
src/views/home/widget/socketdiabox.vue
View File

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