mirror of
				https://gitee.com/dromara/mayfly-go
				synced 2025-11-04 08:20:25 +08:00 
			
		
		
		
	feat: 新增linux文件上传成功后websocket通知
This commit is contained in:
		
							
								
								
									
										47
									
								
								mayfly_go_web/src/common/SocketBuilder.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										47
									
								
								mayfly_go_web/src/common/SocketBuilder.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,47 @@
 | 
			
		||||
class SocketBuilder {
 | 
			
		||||
 | 
			
		||||
    websocket: WebSocket;
 | 
			
		||||
  
 | 
			
		||||
    constructor(url: string) {
 | 
			
		||||
      if (typeof (WebSocket) === "undefined") {
 | 
			
		||||
        throw new Error('不支持websocket');
 | 
			
		||||
      }
 | 
			
		||||
      if (!url) {
 | 
			
		||||
        throw new Error('websocket url不能为空');
 | 
			
		||||
      }
 | 
			
		||||
      console.log(url)
 | 
			
		||||
      this.websocket = new WebSocket(url);
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    static builder(url: string) {
 | 
			
		||||
      return new SocketBuilder(url);
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    open(onopen: any) {
 | 
			
		||||
      this.websocket.onopen = onopen;
 | 
			
		||||
      return this;
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    error(onerror: any) {
 | 
			
		||||
      this.websocket.onerror = onerror;
 | 
			
		||||
      return this;
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    message(onmessage: any) {
 | 
			
		||||
      this.websocket.onmessage = onmessage;
 | 
			
		||||
      return this;
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    close(onclose: any) {
 | 
			
		||||
      this.websocket.onclose = onclose;
 | 
			
		||||
      return this;
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    build() {
 | 
			
		||||
      return this.websocket;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  
 | 
			
		||||
  export default SocketBuilder;
 | 
			
		||||
  
 | 
			
		||||
							
								
								
									
										44
									
								
								mayfly_go_web/src/common/sockets.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										44
									
								
								mayfly_go_web/src/common/sockets.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,44 @@
 | 
			
		||||
 | 
			
		||||
import Config from './config'
 | 
			
		||||
import { ElNotification } from 'element-plus'
 | 
			
		||||
import SocketBuilder from './SocketBuilder';
 | 
			
		||||
import { getSession } from '@/common/utils/storage.ts';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
    /**
 | 
			
		||||
     * 全局系统消息websocket
 | 
			
		||||
     */
 | 
			
		||||
    sysMsgSocket() {
 | 
			
		||||
        const token = getSession('token');
 | 
			
		||||
        if (!token) {
 | 
			
		||||
            return null;
 | 
			
		||||
        }
 | 
			
		||||
        return SocketBuilder.builder(`${Config.baseWsUrl}/sysmsg?token=${token}`)
 | 
			
		||||
            .message((event: { data: string }) => {
 | 
			
		||||
                const message = JSON.parse(event.data);
 | 
			
		||||
                let mtype: string;
 | 
			
		||||
                switch (message.type) {
 | 
			
		||||
                    case 0:
 | 
			
		||||
                        mtype = 'error';
 | 
			
		||||
                        break;
 | 
			
		||||
                    case 2:
 | 
			
		||||
                        mtype = 'info';
 | 
			
		||||
                        break;
 | 
			
		||||
                    case 1:
 | 
			
		||||
                        mtype = 'success';
 | 
			
		||||
                        break;
 | 
			
		||||
                    default:
 | 
			
		||||
                        mtype = 'info';
 | 
			
		||||
                }
 | 
			
		||||
                if (mtype == undefined) {
 | 
			
		||||
                    return;
 | 
			
		||||
                }
 | 
			
		||||
                ElNotification({
 | 
			
		||||
                    title: message.title,
 | 
			
		||||
                    message: message.msg,
 | 
			
		||||
                    type: mtype as any,
 | 
			
		||||
                })
 | 
			
		||||
            })
 | 
			
		||||
            .open((event: any) => console.log(event)).build();
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
@@ -8,6 +8,7 @@ import { NextLoading } from '@/common/utils/loading.ts';
 | 
			
		||||
import { dynamicRoutes, staticRoutes, pathMatch } from './route.ts'
 | 
			
		||||
import { imports } from './imports';
 | 
			
		||||
import openApi from '@/common/openApi';
 | 
			
		||||
import sockets from '@/common/sockets';
 | 
			
		||||
 | 
			
		||||
// 添加静态路由
 | 
			
		||||
const router = createRouter({
 | 
			
		||||
@@ -203,6 +204,9 @@ if (!isRequestRoutes) {
 | 
			
		||||
    initBackEndControlRoutesFun();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
let SysWs: any;
 | 
			
		||||
 | 
			
		||||
// 路由加载前
 | 
			
		||||
router.beforeEach((to, from, next) => {
 | 
			
		||||
    NProgress.configure({ showSpinner: false });
 | 
			
		||||
@@ -223,10 +227,18 @@ router.beforeEach((to, from, next) => {
 | 
			
		||||
            clearSession();
 | 
			
		||||
            resetRoute();
 | 
			
		||||
            NProgress.done();
 | 
			
		||||
 | 
			
		||||
            if (SysWs) {
 | 
			
		||||
                SysWs.close();
 | 
			
		||||
                SysWs = null;
 | 
			
		||||
            }
 | 
			
		||||
        } else if (token && to.path === '/login') {
 | 
			
		||||
            next('/');
 | 
			
		||||
            NProgress.done();
 | 
			
		||||
        } else {
 | 
			
		||||
            if (!SysWs) {
 | 
			
		||||
                SysWs = sockets.sysMsgSocket();
 | 
			
		||||
            }
 | 
			
		||||
            if (store.state.routesList.routesList.length > 0) next();
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 
 | 
			
		||||
@@ -93,9 +93,9 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance } from 'vue';
 | 
			
		||||
import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
 | 
			
		||||
import { useStore } from '@/store/index.ts';
 | 
			
		||||
import * as echarts from 'echarts';
 | 
			
		||||
// import * as echarts from 'echarts';
 | 
			
		||||
import { CountUp } from 'countup.js';
 | 
			
		||||
import { formatAxis } from '@/common/utils/formatTime.ts';
 | 
			
		||||
import { indexApi } from './api';
 | 
			
		||||
@@ -103,7 +103,7 @@ import { topCardItemList, environmentList, activitiesList } from './mock.ts';
 | 
			
		||||
export default {
 | 
			
		||||
    name: 'Home',
 | 
			
		||||
    setup() {
 | 
			
		||||
        const { proxy } = getCurrentInstance() as any;
 | 
			
		||||
        // const { proxy } = getCurrentInstance() as any;
 | 
			
		||||
        const store = useStore();
 | 
			
		||||
        const state = reactive({
 | 
			
		||||
            topCardItemList,
 | 
			
		||||
@@ -146,104 +146,104 @@ export default {
 | 
			
		||||
            });
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        // 实验室使用情况
 | 
			
		||||
        const initHomeLaboratory = () => {
 | 
			
		||||
            const myChart = echarts.init(proxy.$refs.homeLaboratoryRef);
 | 
			
		||||
            const option = {
 | 
			
		||||
                grid: {
 | 
			
		||||
                    top: 50,
 | 
			
		||||
                    right: 20,
 | 
			
		||||
                    bottom: 30,
 | 
			
		||||
                    left: 30,
 | 
			
		||||
                },
 | 
			
		||||
                tooltip: {
 | 
			
		||||
                    trigger: 'axis',
 | 
			
		||||
                },
 | 
			
		||||
                legend: {
 | 
			
		||||
                    data: ['预购队列', '最新成交价'],
 | 
			
		||||
                    right: 13,
 | 
			
		||||
                },
 | 
			
		||||
                xAxis: {
 | 
			
		||||
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
 | 
			
		||||
                },
 | 
			
		||||
                yAxis: [
 | 
			
		||||
                    {
 | 
			
		||||
                        type: 'value',
 | 
			
		||||
                        name: '价格',
 | 
			
		||||
                    },
 | 
			
		||||
                ],
 | 
			
		||||
                series: [
 | 
			
		||||
                    {
 | 
			
		||||
                        name: '预购队列',
 | 
			
		||||
                        type: 'bar',
 | 
			
		||||
                        data: [5, 20, 36, 10, 10, 20],
 | 
			
		||||
                    },
 | 
			
		||||
                    {
 | 
			
		||||
                        name: '最新成交价',
 | 
			
		||||
                        type: 'line',
 | 
			
		||||
                        data: [15, 20, 16, 20, 30, 8],
 | 
			
		||||
                    },
 | 
			
		||||
                ],
 | 
			
		||||
            };
 | 
			
		||||
            myChart.setOption(option);
 | 
			
		||||
            window.addEventListener('resize', () => {
 | 
			
		||||
                myChart.resize();
 | 
			
		||||
            });
 | 
			
		||||
        };
 | 
			
		||||
        // 履约超时预警
 | 
			
		||||
        const initHomeOvertime = () => {
 | 
			
		||||
            const myChart = echarts.init(proxy.$refs.homeOvertimeRef);
 | 
			
		||||
            const option = {
 | 
			
		||||
                grid: {
 | 
			
		||||
                    top: 50,
 | 
			
		||||
                    right: 20,
 | 
			
		||||
                    bottom: 30,
 | 
			
		||||
                    left: 30,
 | 
			
		||||
                },
 | 
			
		||||
                tooltip: {
 | 
			
		||||
                    trigger: 'axis',
 | 
			
		||||
                },
 | 
			
		||||
                legend: {
 | 
			
		||||
                    data: ['订单数量', '超时数量', '在线数量', '预警数量'],
 | 
			
		||||
                    right: 13,
 | 
			
		||||
                },
 | 
			
		||||
                xAxis: {
 | 
			
		||||
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
 | 
			
		||||
                },
 | 
			
		||||
                yAxis: [
 | 
			
		||||
                    {
 | 
			
		||||
                        type: 'value',
 | 
			
		||||
                        name: '数量',
 | 
			
		||||
                    },
 | 
			
		||||
                ],
 | 
			
		||||
                series: [
 | 
			
		||||
                    {
 | 
			
		||||
                        name: '订单数量',
 | 
			
		||||
                        type: 'bar',
 | 
			
		||||
                        data: [5, 20, 36, 10, 10, 20, 11, 13, 10, 9, 17, 19],
 | 
			
		||||
                    },
 | 
			
		||||
                    {
 | 
			
		||||
                        name: '超时数量',
 | 
			
		||||
                        type: 'bar',
 | 
			
		||||
                        data: [15, 12, 26, 15, 11, 16, 31, 13, 5, 16, 13, 15],
 | 
			
		||||
                    },
 | 
			
		||||
                    {
 | 
			
		||||
                        name: '在线数量',
 | 
			
		||||
                        type: 'line',
 | 
			
		||||
                        data: [15, 20, 16, 20, 30, 8, 16, 19, 12, 18, 19, 14],
 | 
			
		||||
                    },
 | 
			
		||||
                    {
 | 
			
		||||
                        name: '预警数量',
 | 
			
		||||
                        type: 'line',
 | 
			
		||||
                        data: [10, 10, 13, 12, 15, 18, 19, 10, 12, 15, 11, 17],
 | 
			
		||||
                    },
 | 
			
		||||
                ],
 | 
			
		||||
            };
 | 
			
		||||
            myChart.setOption(option);
 | 
			
		||||
            window.addEventListener('resize', () => {
 | 
			
		||||
                myChart.resize();
 | 
			
		||||
            });
 | 
			
		||||
        };
 | 
			
		||||
        // // 实验室使用情况
 | 
			
		||||
        // const initHomeLaboratory = () => {
 | 
			
		||||
        //     const myChart = echarts.init(proxy.$refs.homeLaboratoryRef);
 | 
			
		||||
        //     const option = {
 | 
			
		||||
        //         grid: {
 | 
			
		||||
        //             top: 50,
 | 
			
		||||
        //             right: 20,
 | 
			
		||||
        //             bottom: 30,
 | 
			
		||||
        //             left: 30,
 | 
			
		||||
        //         },
 | 
			
		||||
        //         tooltip: {
 | 
			
		||||
        //             trigger: 'axis',
 | 
			
		||||
        //         },
 | 
			
		||||
        //         legend: {
 | 
			
		||||
        //             data: ['预购队列', '最新成交价'],
 | 
			
		||||
        //             right: 13,
 | 
			
		||||
        //         },
 | 
			
		||||
        //         xAxis: {
 | 
			
		||||
        //             data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
 | 
			
		||||
        //         },
 | 
			
		||||
        //         yAxis: [
 | 
			
		||||
        //             {
 | 
			
		||||
        //                 type: 'value',
 | 
			
		||||
        //                 name: '价格',
 | 
			
		||||
        //             },
 | 
			
		||||
        //         ],
 | 
			
		||||
        //         series: [
 | 
			
		||||
        //             {
 | 
			
		||||
        //                 name: '预购队列',
 | 
			
		||||
        //                 type: 'bar',
 | 
			
		||||
        //                 data: [5, 20, 36, 10, 10, 20],
 | 
			
		||||
        //             },
 | 
			
		||||
        //             {
 | 
			
		||||
        //                 name: '最新成交价',
 | 
			
		||||
        //                 type: 'line',
 | 
			
		||||
        //                 data: [15, 20, 16, 20, 30, 8],
 | 
			
		||||
        //             },
 | 
			
		||||
        //         ],
 | 
			
		||||
        //     };
 | 
			
		||||
        //     myChart.setOption(option);
 | 
			
		||||
        //     window.addEventListener('resize', () => {
 | 
			
		||||
        //         myChart.resize();
 | 
			
		||||
        //     });
 | 
			
		||||
        // };
 | 
			
		||||
        // // 履约超时预警
 | 
			
		||||
        // const initHomeOvertime = () => {
 | 
			
		||||
        //     const myChart = echarts.init(proxy.$refs.homeOvertimeRef);
 | 
			
		||||
        //     const option = {
 | 
			
		||||
        //         grid: {
 | 
			
		||||
        //             top: 50,
 | 
			
		||||
        //             right: 20,
 | 
			
		||||
        //             bottom: 30,
 | 
			
		||||
        //             left: 30,
 | 
			
		||||
        //         },
 | 
			
		||||
        //         tooltip: {
 | 
			
		||||
        //             trigger: 'axis',
 | 
			
		||||
        //         },
 | 
			
		||||
        //         legend: {
 | 
			
		||||
        //             data: ['订单数量', '超时数量', '在线数量', '预警数量'],
 | 
			
		||||
        //             right: 13,
 | 
			
		||||
        //         },
 | 
			
		||||
        //         xAxis: {
 | 
			
		||||
        //             data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
 | 
			
		||||
        //         },
 | 
			
		||||
        //         yAxis: [
 | 
			
		||||
        //             {
 | 
			
		||||
        //                 type: 'value',
 | 
			
		||||
        //                 name: '数量',
 | 
			
		||||
        //             },
 | 
			
		||||
        //         ],
 | 
			
		||||
        //         series: [
 | 
			
		||||
        //             {
 | 
			
		||||
        //                 name: '订单数量',
 | 
			
		||||
        //                 type: 'bar',
 | 
			
		||||
        //                 data: [5, 20, 36, 10, 10, 20, 11, 13, 10, 9, 17, 19],
 | 
			
		||||
        //             },
 | 
			
		||||
        //             {
 | 
			
		||||
        //                 name: '超时数量',
 | 
			
		||||
        //                 type: 'bar',
 | 
			
		||||
        //                 data: [15, 12, 26, 15, 11, 16, 31, 13, 5, 16, 13, 15],
 | 
			
		||||
        //             },
 | 
			
		||||
        //             {
 | 
			
		||||
        //                 name: '在线数量',
 | 
			
		||||
        //                 type: 'line',
 | 
			
		||||
        //                 data: [15, 20, 16, 20, 30, 8, 16, 19, 12, 18, 19, 14],
 | 
			
		||||
        //             },
 | 
			
		||||
        //             {
 | 
			
		||||
        //                 name: '预警数量',
 | 
			
		||||
        //                 type: 'line',
 | 
			
		||||
        //                 data: [10, 10, 13, 12, 15, 18, 19, 10, 12, 15, 11, 17],
 | 
			
		||||
        //             },
 | 
			
		||||
        //         ],
 | 
			
		||||
        //     };
 | 
			
		||||
        //     myChart.setOption(option);
 | 
			
		||||
        //     window.addEventListener('resize', () => {
 | 
			
		||||
        //         myChart.resize();
 | 
			
		||||
        //     });
 | 
			
		||||
        // };
 | 
			
		||||
        // 页面加载时
 | 
			
		||||
        onMounted(() => {
 | 
			
		||||
            initNumCountUp();
 | 
			
		||||
 
 | 
			
		||||
@@ -451,9 +451,7 @@ export default defineComponent({
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        const uploadSuccess = (res: any) => {
 | 
			
		||||
            if (res.code == 200) {
 | 
			
		||||
                ElMessage.success('文件上传中...');
 | 
			
		||||
            } else {
 | 
			
		||||
            if (res.code !== 200) {
 | 
			
		||||
                ElMessage.error(res.msg);
 | 
			
		||||
            }
 | 
			
		||||
        };
 | 
			
		||||
 
 | 
			
		||||
@@ -217,6 +217,9 @@ export default {
 | 
			
		||||
            if (type == 1) {
 | 
			
		||||
                return '登录';
 | 
			
		||||
            }
 | 
			
		||||
            if (type == 2) {
 | 
			
		||||
                return '通知';
 | 
			
		||||
            }
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        return {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user