Commit 21c2c69d authored by neogcg's avatar neogcg

alarm websocket

parent cb984234
......@@ -11,7 +11,9 @@ import '@/icons' // icon
import '@/permission' // permission control
import performLoader from '@/utils/global_main_loader.js'
import WS from '@/utils/websocket'
Vue.prototype.$ws = WS
Vue.use(ElementUI, { locale })
performLoader(Vue) // 所有的第三方插件性质的东西都放到这里面了
Vue.config.productionTip = false
......
......@@ -5,6 +5,7 @@ import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import depart from './modules/depart'
import websocket from './modules/websocket'
Vue.use(Vuex)
......@@ -16,7 +17,7 @@ const store = new Vuex.Store({
settings,
user,
depart,
websocket
},
getters
})
......
const state ={
webSocketMsg: ''
}
const mutations={
SET_WS_MSG(state, msg) {
state.webSocketMsg = msg
}
}
const getters = {
webSocketMsg(state) {
return state.webSocketMsg
}
}
export default {
namespaced: true,
state,
mutations,
getters
}
\ No newline at end of file
import store from '../store'
const WS = {
$ws: null,
type:"",
// webscoket实例
wsUrl: 'ws://8.142.143.40:8885/websocket/1',
// websocket链接地址
createWS: function (val) {
this.type=val;
console.log(this.type);
if ('WebSocket' in window) {
this.$ws = new WebSocket(this.wsUrl)
this.$ws.onopen = this.wsOpen
this.$ws.onmessage = this.wsMessage
this.$ws.onerror = this.wsError
this.$ws.onclose = this.wsClose
} else {
alert('当前浏览器不支持webSocket')
}
},
wsOpen: function () {
this.send(WS.type)
console.log('== websocket open ==',"传值为" + WS.type)
heartBeat.start()
},
wsMessage: function (msg) {
// console.log( msg.data)
heartBeat.reset()
store.commit('websocket/SET_WS_MSG', msg.data)
},
wsError: function (err) {
console.log('== websocket error ==', err)
},
wsClose: function (event) {
console.log('== websocket close ==', event)
}
}
const heartBeat = {
timeout: 30000, // 心跳重连时间
timeoutObj: null, // 定时器
reset: function () {
clearInterval(this.timeoutObj)
console.log('websocket 心跳')
heartBeat.start()
},
start: function () {
this.timeoutObj = setTimeout(function () {
if (WS.$ws.readyState === 1) {
WS.$ws.send('HeartBeat')
}
}, this.timeout)
}
}
export default WS
\ No newline at end of file
......@@ -276,9 +276,33 @@ export default {
});
},
},
computed: {
getWsMsg:{
get(){
return this.$store.state.websocket.webSocketMsg
},
set(a){
this.$store.state.websocket.webSocketMsg=a
}
},
},
watch: {
getWsMsg: {
handler(newVal) {
this.getWsMsg=!!newVal
console.log(newVal);
// alert("接收到webSocket推送" + newVal);
},
},
},
mounted() {
this.getTableData();
},
created(){
this.$ws.createWS("2")
}
};
</script>
......
......@@ -16,6 +16,7 @@
<el-button type="primary" @click="getTableData">刷新</el-button>
<el-button type="primary" @click="isQuery = !isQuery">查询</el-button>
<el-button type="primary" @click="exportList">导出</el-button>
</div>
</div>
<div v-if="isQuery">
......@@ -124,10 +125,18 @@
class="pagination"
@pagination="handlePageChange"
/>
<audio controls="controls" id="my_audio" src="../../../assets/audio/alarm.mp3" style="display:none;" hidden="hidden">
</audio>
<div class="tips" v-if="tflag==true">
<p>提示</p>
<span>有一条新告警</span>
</div>
</div>
</template>
<script>
import { deviceList, deviceConfirm, deviceCancel } from "../api";
import { exportConnet } from "@/api/export";
import search from "@/views/monitor/equipment/components/search.vue";
......@@ -135,6 +144,7 @@ import download from "@/utils/download";
export default {
data() {
return {
alarmInfo:'',
dialogInfo: [],
centerDialogVisible: false,
confirmStatus: 2,
......@@ -158,11 +168,13 @@ export default {
key: 0,
},
],
tflag:false,
isQuery: false,
searchOption: {},
};
},
components: { search },
methods: {
// 表格背景图颜色
cellClassFn({ row, column, rowIndex, columnIndex }) {
......@@ -200,7 +212,7 @@ export default {
this.total = res.total;
});
},
confirm2(row) {
confirm2(row) {
this.centerDialogVisible = true;
this.dialogInfo = row;
},
......@@ -209,9 +221,10 @@ export default {
deviceConfirm({ id: id }).then((res) => {
this.getTableData();
});
this.centerDialogVisible = false
this.centerDialogVisible = false;
},
cancel2(row) {
console.log(row);
this.centerDialogVisible = true;
this.dialogInfo = row;
},
......@@ -224,7 +237,7 @@ export default {
console.log(res);
this.getTableData();
});
this.centerDialogVisible = false
this.centerDialogVisible = false;
},
changeType(item) {
......@@ -243,11 +256,46 @@ export default {
download(res, "vnd.ms-excel", `设备连接告警.xls`);
});
},
},
computed: {
getWsMsg:{
get(){
return this.$store.state.websocket.webSocketMsg
},
set(){
// this.$store.state.websocket.webSocketMsg=a
}
},
},
watch: {
getWsMsg: {
handler(newVal) {
this.getWsMsg=!!newVal
my_audio.play();
this.tflag=true
setTimeout(() => {
this.tflag=false
}, 3000);
console.log(newVal);
// alert("接收到webSocket推送" + newVal);
},
},
},
mounted() {
this.getTableData();
},
created(){
this.$ws.createWS("1")
}
};
</script>
<style lang="scss" scoped>
......@@ -280,4 +328,16 @@ export default {
}
}
}
.tips{
width: 400px;
height: 80px;
background: #fff;
box-shadow: 0px 2px 14px #888888;
border-radius: 5px;
padding: 0 20px 20px 20px;
position: absolute;
text-align: center;
top:calc(50% - 40px);
left:calc(50% - 200px)
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment