|
|
@@ -0,0 +1,161 @@
|
|
|
+<template>
|
|
|
+ <a-modal
|
|
|
+ :title="modalTitle"
|
|
|
+ :width="1200"
|
|
|
+ :visible="visible"
|
|
|
+ :confirmLoading="confirmLoading"
|
|
|
+ @cancel="handleCancel"
|
|
|
+ >
|
|
|
+ <a-list
|
|
|
+ class="demo-loadmore-list"
|
|
|
+ item-layout="horizontal"
|
|
|
+ :data-source="data"
|
|
|
+ >
|
|
|
+ <a-list-item slot="renderItem" slot-scope="item" @click="clickQualityItem(item)">
|
|
|
+ <div>名称：{{ item.sbName }}</div>
|
|
|
+ <div>点位：{{ item.positionNum }}</div>
|
|
|
+ <div>低低限值：{{ item.warnFirst }}</div>
|
|
|
+ <div>低限值：{{ item.warnSecond }}</div>
|
|
|
+ <div>高限值：{{ item.warnThird }}</div>
|
|
|
+ <div>高高限值：{{ item.warnFour }}</div>
|
|
|
+ </a-list-item>
|
|
|
+ </a-list>
|
|
|
+ <audio
|
|
|
+ v-show="false"
|
|
|
+ ref="audio"
|
|
|
+ loop="true"
|
|
|
+ controls="controls"
|
|
|
+ src="@/assets/alarm/alarm_police.wav"
|
|
|
+ id="audio"></audio>
|
|
|
+ <template slot="footer">
|
|
|
+ <a-button :loading="confirmLoading" type="primary" @click="handleCancel()">返回</a-button>
|
|
|
+ </template>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import DetailList from '@/components/tools/DetailList'
|
|
|
+const DetailListItem = DetailList.Item
|
|
|
+export default {
|
|
|
+ name: 'RemoteOpcWarn',
|
|
|
+ components: {
|
|
|
+ DetailList,
|
|
|
+ DetailListItem
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['pcAlarmVoice', 'catchComponents']),
|
|
|
+ key () {
|
|
|
+ return this.$route.path
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ confirmLoading: false,
|
|
|
+ modalTitle: '预警通知',
|
|
|
+ visible: false,
|
|
|
+ typeMap: {},
|
|
|
+ data: null,
|
|
|
+ websock: null,
|
|
|
+ lockReconnect: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ console.log('进入页面')
|
|
|
+ this.initWebSocket()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCancel () {
|
|
|
+ this.visible = false
|
|
|
+ this.confirmLoading = false
|
|
|
+ const audio = document.querySelector('#audio')
|
|
|
+ audio.pause()
|
|
|
+ },
|
|
|
+ initWebSocket: function () {
|
|
|
+ // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
|
|
|
+ let url = ''
|
|
|
+ if (process.env.NODE_ENV === 'production') {
|
|
|
+ // 生产环境
|
|
|
+ // url = 'wss://192.168.31.46:30008/?bindType=2&bindContent=' + bindContent // 正试服
|
|
|
+ url = 'ws://oa.catlsc.com:7766/websocket/100' // 正试服
|
|
|
+ } else {
|
|
|
+ url = 'ws://localhost:8000/websocket/100' // 测试服
|
|
|
+ }
|
|
|
+ console.log('初始化websocket', url)
|
|
|
+ this.websock = new WebSocket(url)
|
|
|
+ this.websock.onopen = this.websocketOnopen
|
|
|
+ this.websock.onerror = this.websocketOnerror
|
|
|
+ this.websock.onmessage = this.websocketOnmessage
|
|
|
+ this.websock.onclose = this.websocketOnclose
|
|
|
+ },
|
|
|
+ websocketOnopen: function () {
|
|
|
+ console.log('页面WebSocket连接成功')
|
|
|
+ // 心跳检测重置
|
|
|
+ // this.heartCheck.reset().start()
|
|
|
+ },
|
|
|
+ // 连接失败后的回调函数
|
|
|
+ websocketOnerror: function (e) {
|
|
|
+ console.log('WebSocket连接发生错误', e)
|
|
|
+ this.reconnect()
|
|
|
+ },
|
|
|
+ // 当从服务器接受到信息时的回调函数
|
|
|
+ websocketOnmessage: function (e) {
|
|
|
+ this.visible = true
|
|
|
+ // 收到消息
|
|
|
+ this.data = JSON.parse(e.data)
|
|
|
+ const audio = document.querySelector('#audio')
|
|
|
+ if (audio != null) {
|
|
|
+ audio.play()
|
|
|
+ audio.currentTime = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ websocketOnclose: function (e) {
|
|
|
+ // console.log('connection closed (' + e.code + ')')
|
|
|
+ this.reconnect()
|
|
|
+ },
|
|
|
+ websocketSend (text) {
|
|
|
+ // 数据发送
|
|
|
+ try {
|
|
|
+ this.websock.send(text)
|
|
|
+ } catch (err) {
|
|
|
+ // console.log('send failed (' + err.code + ')')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ reconnect () {
|
|
|
+ const context = this
|
|
|
+ if (context.lockReconnect) return
|
|
|
+ context.lockReconnect = true
|
|
|
+ // 没连接上会一直重连，设置延迟避免请求过多
|
|
|
+ clearTimeout(this.time1)
|
|
|
+ this.time1 = setTimeout(function () {
|
|
|
+ // console.info('尝试重连...')
|
|
|
+ context.initWebSocket()
|
|
|
+ context.lockReconnect = false
|
|
|
+ }, 5000)
|
|
|
+ },
|
|
|
+ clickQualityItem (item) {
|
|
|
+ this.$message.info('click')
|
|
|
+ const a = document.createElement('a')
|
|
|
+ if (item.type === 4) {
|
|
|
+ a.href = '/quality/item/stable?id=' + item.id
|
|
|
+ } else if (item.type === 3) {
|
|
|
+ a.href = '/quality/item/research?id=' + item.id
|
|
|
+ } else if (item.type === 2) {
|
|
|
+ a.href = '/quality/item/material?id=' + item.id
|
|
|
+ } else {
|
|
|
+ a.href = '/quality/item?id=' + item.id
|
|
|
+ }
|
|
|
+ a.target = '_blank'
|
|
|
+ a.click()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ this.websock.close()
|
|
|
+ console.log('页面关闭websocket')
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
