read_opc/chuanyi_client2/src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import cqcyCode from "@/utils/cqcyCode";
import {getToken} from '@/utils/auth'
import {showAlertWin} from "@/utils/cqcy";

export default {
  name: 'App',
  provide() {
    return {
      getWebSocket: this,
      __self: this
    }
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  data() {
    return {
      webSocket: null,
      clientRole: null
    }
  },
  mounted() {
    this.clientRole = cqcyCode['clientRole']
    this.initWebSocket()
  },
  created() {
    $("body").on("mousedown", '.el-message-box__header', (e) => {
      const dialogHeaderEl = document.querySelector('.el-message-box__header')
      const dragDom = document.querySelector('.el-message-box')
      dialogHeaderEl.style.cursor = 'move'
      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop
      // 获取到的值带px 正则匹配替换
      let styL, styT
      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        let lefts = sty.left
        let tops = sty.top
        if (sty.left == 'auto') {
          lefts = '0px'
        }
        if (sty.top == 'auto') {
          tops = '0px'
        }
        styL = +lefts.replace(/\px/g, '')
        styT = +tops.replace(/\px/g, '')
      }
      const dragDomWidth = dragDom.offsetWidth
      const dragDomHeight = dragDom.offsetHeight
      const screenWidth = document.body.clientWidth
      const screenHeight = document.body.clientHeight
      const maxDragDomLeft = screenWidth - dragDomWidth
      const maxDragDomTop = screenHeight - dragDomHeight

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY
        // 移动当前元素
        let _left = l + styL
        _left = _left < 0 ? 0 : _left
        _left = _left > maxDragDomLeft ? maxDragDomLeft : _left
        let _top = t + styT
        _top = _top < 0 ? 0 : _top
        _top = _top > maxDragDomTop ? maxDragDomTop : _top
        dragDom.style.left = `${_left}px`
        dragDom.style.top = `${_top}px`
        dragDom.style.position = `absolute`
        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }
      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    })
  },
  destroyed() {
  },
  methods: {
    initWebSocket() {
      console.log('webSocket');
      let _this = this
      if (typeof (WebSocket) === 'undefined') {
        showAlertWin(_this, null, '您使用的环境暂不支持socket服务！')
      } else {
        let wsurl = ''
        let wsbase = cqcyCode['ws']
        let sysHost = localStorage.getItem('SYS_HOST_BASE')
        if (sysHost) {
          wsurl = wsbase.replace('{0}', sysHost)
        } else {
          wsurl = wsbase.replace('{0}', cqcyCode['host'] + ':' + cqcyCode['port'])
        }
        // 实例化socket
        _this.webSocket = new WebSocket(wsurl + getToken())
        // 监听socket连接
        _this.webSocket.onopen = _this.webSocketOpen
        // 监听socket错误信息
        _this.webSocket.onerror = _this.webSocketError
        // 监听socket消息
        _this.webSocket.onmessage = _this.webSocketMessage
        // 监听socket关闭
        _this.webSocket.onclose = _this.webSocketClose
      }
    },
    webSocketOpen(e) {
      console.log('open', e)
      let _this = this
      let count = 0
      const interval = setInterval(() => {
        count++
        // console.log('count', count)
        if (_this.webSocket && _this.webSocket.readyState === 1) {
          _this.webSocket.send(getToken())
        } else {
          clearInterval(interval)
        }
      }, 5 * 1000)
    },
    webSocketError(e) {
      console.log('error', e)
    },
    webSocketMessage(e) {
      console.log('message', e)
    },
    webSocketClose(e) {
      console.log('close', e)
      this.webSocket.close()
      this.webSocket = null
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
  opacity: 0.4;
}

::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 8px;
  opacity: 0.4;
}

::-webkit-scrollbar-track-piece {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: gray;
  opacity: 0.4;
}


.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu-black {
  background: black;
  color: white;
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu-black li {
  border-bottom: 1px solid;
  margin: 0 5px;
}

.contextmenu-black li:last-child {
  border-bottom: 0;
}

.contextmenu li:hover {
  background: #eee;
}

.contextmenu-black li:hover {
  background: none;
}

.close_confirm .el-message-box__btns {
  display: flex;
  flex-direction: row-reverse;

  .el-button {
    margin: 0 0.5rem;
  }
}
</style>