From 67b79f43d78f3ec8a0b5de24867e44e4e5f10d07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=AD=A5=E5=B1=A5=E4=B8=8D=E5=81=9C?= <1873501479@qq.com> Date: Mon, 8 Aug 2022 22:34:01 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=9E=E6=97=B6=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E7=95=8C=E9=9D=A2=E5=8F=8A=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 1 - src/components/Notification.vue | 56 +++ src/store/index.js | 1 - src/utils/config.js | 3 +- src/utils/notify.js | 119 ++++++ src/utils/websocket_service.js | 2 +- .../FacilityManagement/OperationLogs.vue | 387 ++++-------------- .../FacilityManagement/RealTimeEcharts.vue | 300 ++++++++++++++ src/views/Home.vue | 4 + 9 files changed, 570 insertions(+), 303 deletions(-) create mode 100644 src/components/Notification.vue create mode 100644 src/utils/notify.js create mode 100644 src/views/FacilityManagement/RealTimeEcharts.vue diff --git a/src/App.vue b/src/App.vue index 8f8ff31..0370c1b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,7 +6,6 @@ + diff --git a/src/store/index.js b/src/store/index.js index 8840ba6..3be0e95 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -2,7 +2,6 @@ import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) - export default new Vuex.Store({ state: { dataPageData: { lowerLeftVO: {}, rightTop: {}}, diff --git a/src/utils/config.js b/src/utils/config.js index 4f40588..6a81261 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -1,7 +1,8 @@ module.exports = { // baseUrl: 'localhost:2011' // baseUrl: '49.234.81.196:2011' - baseUrl: '192.168.0.107:2011' + // baseUrl: '120.25.106.20:2011' // baseUrl: '120.25.106.20:2011' // baseUrl: 'localhost:40000' + baseUrl: '192.168.0.100:2011' } diff --git a/src/utils/notify.js b/src/utils/notify.js new file mode 100644 index 0000000..74b5789 --- /dev/null +++ b/src/utils/notify.js @@ -0,0 +1,119 @@ +import Vue from 'vue' +import Notification from './Notification.vue' + +const NotificationConstructor = Vue.extend(Notification) + +const instances = [] +let seed = 1 +// 消除Vue实例 +const removeInstance = (instance) => { + if (!instance) return + const len = instances.length + const index = instances.findIndex((ins) => instance.id === ins.id) + + instances.splice(index, 1) + + if (len <= 1) return + const removeHeight = instance.height + for (let i = index; i < len - 1; i++) { + instances[i].verticalOffset = + parseInt(instances[i].verticalOffset) - removeHeight - 16 + } +} + +const notify = (options = {}) => { + if (Vue.prototype.$isServer) return + // 获取vue实例 + let instance = new NotificationConstructor({ + propsData: options, // 这里是传进来一组props + data() { + return { + verticalOffset: 0, + timer: null, + visible: false, + height: 0 + } + }, + computed: { + // 配置消息组件的位置 + style() { + return { + position: 'fixed', + right: '20px', + bottom: `${this.verticalOffset}px` + } + } + }, + mounted() { + this.createTimer() + this.$el.addEventListener('mouseenter', () => { + if (this.timer) { + this.clearTimer(this.timer) + } + }) + this.$el.addEventListener('mouseleave', () => { + if (this.timer) { + this.clearTimer(this.timer) + } + this.createTimer() + }) + }, + updated() { + this.height = this.$el.offsetHeight + }, + beforeDestroy() { + this.clearTimer() + }, + methods: { + // 创建计时器 + createTimer() { + this.timer = setTimeout(() => { + this.visible = false + document.body.removeChild(this.$el) + removeInstance(this) + this.$destroy() + }, options.timeout || 5000) + }, + // 清除计时器 + clearTimer() { + if (this.timer) { + clearTimeout(this.timer) + } + }, + // 关闭消息弹窗 + handleClose() { + this.visible = false + document.body.removeChild(this.$el) + removeInstance(this) + this.$destroy(true) + }, + // 过渡js钩子 + handleAfterEnter() { + this.height = this.$el.offsetHeight + } + } + }) + + const id = `notification_${seed++}` // 动态生成唯一Id + instance.id = id + // 生成vue中的$el + instance = instance.$mount() + // 将$el中的内容插入dom节点中去 + document.body.appendChild(instance.$el) + instance.visible = true + + let verticalOffset = 0 + + instances.forEach((item) => { + verticalOffset += item.$el.offsetHeight + 16 + }) + + verticalOffset += 16 + instance.verticalOffset = verticalOffset + + instances.push(instance) + + return instance +} + +export default notify diff --git a/src/utils/websocket_service.js b/src/utils/websocket_service.js index fde0df8..e7a74d3 100644 --- a/src/utils/websocket_service.js +++ b/src/utils/websocket_service.js @@ -32,7 +32,7 @@ connect() { /* if (!Window.WebSocket) { return console.log('您的浏览器不支持WebSocket') } */ - this.ws = new WebSocket(`ws://${baseUrl}/WebSocket/1`) // Websocket ip+端口 + this.ws = new WebSocket(`ws://${baseUrl}/WebSocket/${window.localStorage.getItem('staffNumber')}`) // Websocket ip+端口 // 连接成功 this.ws.onopen = () => { // Message.success('WebSocket连接成功') diff --git a/src/views/FacilityManagement/OperationLogs.vue b/src/views/FacilityManagement/OperationLogs.vue index dcaaf52..5c2ac91 100644 --- a/src/views/FacilityManagement/OperationLogs.vue +++ b/src/views/FacilityManagement/OperationLogs.vue @@ -1,42 +1,40 @@ - +