feat: 全局ws

罗广辉

2025-09-27 8411f7555769a717d711fcee3810a497dddc06bd

feat: 全局ws

 src/App.vue

@@ -3,9 +3,8 @@
</template>



<script setup>
import { useDownloadWs } from '@/page/index/useDownloadWs';
useDownloadWs()
</script>

<style>

 src/page/index/GlobalWS.vue

New file
@@ -0,0 +1,11 @@
<template>

</template>

<script setup>
import { useGlobalWS } from '@/page/index/useGlobalWS';
useGlobalWS()
</script>
<style scoped lang="scss">

</style>

 src/page/index/index.vue

@@ -24,23 +24,26 @@
        </div>
      </div>
    </div>
    <GlobalWS />
    <!-- <wechat></wechat> -->
  </div>
</template>
<script>
import index from '@/mixins/index'
import wechat from './wechat.vue'
import index from '@/mixins/index';
import wechat from './wechat.vue';
//import { validatenull } from 'utils/validate';
import { mapGetters } from 'vuex'
import tags from './tags.vue'
import search from './search.vue'
import logo from './logo.vue'
import top from './top/index.vue'
import sidebar from './sidebar/index.vue'
import { mapGetters } from 'vuex';
import tags from './tags.vue';
import search from './search.vue';
import logo from './logo.vue';
import top from './top/index.vue';
import sidebar from './sidebar/index.vue';
import GlobalWS from '@/page/index/GlobalWS.vue';

export default {
  mixins: [index],
  components: {
    GlobalWS,
    top,
    logo,
    tags,
@@ -49,10 +52,10 @@
    wechat,
  },
  name: 'index',
  provide () {
  provide() {
    return {
      index: this,
    }
    };
  },
  computed: {
    ...mapGetters([
@@ -64,27 +67,27 @@
      'menu',
      'setting',
    ]),
    validSidebar () {
    validSidebar() {
      return !(
        (this.$route.meta || {}).menu === false || (this.$route.query || {}).menu === 'false'
      )
      );
    },
  },
  props: [],
  methods: {
    //打开菜单
    openMenu (item = {}) {
    openMenu(item = {}) {
      this.$store.dispatch('GetMenu', item.id).then(data => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true)
          this.$router.$avueRouter.formatRoutes(data, true);

          // 获取url里面的redirect
          const redirect = decodeURIComponent(this.$route.query.redirect || '')
          const redirect = decodeURIComponent(this.$route.query.redirect || '');
          if (redirect) {
            console.log('redirect', redirect)
            const [path, queryString] = redirect.split('?')
            const query = queryString ? Object.fromEntries(new URLSearchParams(queryString)) : {}
            this.$router.push({ path, query })
            console.log('redirect', redirect);
            const [path, queryString] = redirect.split('?');
            const query = queryString ? Object.fromEntries(new URLSearchParams(queryString)) : {};
            this.$router.push({ path, query });
          }
        }
        //当点击顶部菜单后默认打开第一个菜单
@@ -108,10 +111,10 @@
            }, itemActive.meta)
          });
        }*/
      })
      });
    },
  },
}
};
</script>

<style lang="scss" scoped>
@@ -130,6 +133,6 @@
  background: transparent;
  padding: 0 10px;
  --el-color-primary: rgba(20, 65, 255, 1);
    height: pxToVh(55);
  height: pxToVh(55);
}
</style>

 src/page/index/useGlobalWS.js

File was renamed from src/page/index/useDownloadWs.js
@@ -1,20 +1,21 @@
import { computed, onBeforeUnmount, onMounted } from 'vue';
import { getWebsocketUrl } from '@/utils/websocket/config'
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
import { useStore } from 'vuex'
import dayjs from 'dayjs'
import { aLinkDownloadUtil } from '@/utils/util'
import EventBus from '@/utils/eventBus'
import { computed, onBeforeUnmount, onMounted } from 'vue';
import { setStore,getStore } from '@/utils/store';
import { getDownloadStatusApi } from '@/api/dataCenter/dataCenter';
import { getStore, setStore } from '@/utils/store'

export const useDownloadWs = () => {
export const useGlobalWS = () => {
    const store = useStore()
    const loginUserInfo = computed(() => store.state.user.userInfo)
    const downloadProgress = computed(() => store.state.common.downloadProgress)
    let currentWebSocket = null
    function messageHandler(payload) {
        const {type,status,progress,download_url} = payload

    // 下载进度处理
    function downloadProcessing(payload) {
        const {type,status,progress,download_url} = payload?.data || {}
        let setProgress = 0
        if (status === 'PENDING'){
            setProgress = 1
@@ -29,7 +30,7 @@
            ...downloadProgress.value,
            [type]: setProgress,
        })
        if (status === 'COMPLETED' && ['htsjzx','htlsrwxq'].includes(type)) {
        if (status === 'COMPLETED' && ['dpsjzx','dplsrwxq'].includes(type)) {
            const name = `数据中心-${dayjs().format('YYYYMMDDHHmmss')}.zip`
            const currentUrl = getStore({name: 'downloadUrl'})
            if (currentUrl === download_url && download_url!== undefined) return
@@ -38,18 +39,42 @@
        }
    }

    const logOut = () => {
        store.commit('SET_THEME_NAME', '')
        store.dispatch('LogOut').then(() => {
            router.push({ path: '/login' })
            setTimeout(() => location.reload())
        })
    }
    function messageHandler(payload) {
        switch (payload.biz_code) {
            case 'JOB_ISREFRESH':
                store.commit('jobUpdateKeyAdd')
                break
            case 'DEVICE_ISREFRESH':
                store.commit('deviceUpdateKeyAdd')
                break
            case 'DOWNLOAD_PROGRESS':
                downloadProcessing(payload)
                break
            case 'LOGOUT_USER':
                logOut()
                break
        }
    }

    onMounted(() => {
        let webSocketUrl = getWebsocketUrl() + `&model_type=3&workspace-id=${loginUserInfo.value.user_id}`
        currentWebSocket = useConnectWebSocket((result)=>{
            const payload = JSON.parse(result)
            messageHandler(payload.data)
            messageHandler(payload)
        }, webSocketUrl)
        EventBus.on('useDownloadWs-messageHandler',messageHandler)
        EventBus.on('useGlobalWS-messageHandler',messageHandler)
    })

    onBeforeUnmount(() => {
        currentWebSocket?.close()
        EventBus.off('useDownloadWs-messageHandler',messageHandler)
        EventBus.off('useGlobalWS-messageHandler',messageHandler)
    })
    return {}
}

 src/store/modules/common.js

@@ -15,6 +15,8 @@
    lockPasswd: getStore({ name: 'lockPasswd' }) || '',
    website: website,
    setting: website.setting,
    deviceUpdateKey: 0, //设备刷新key
    jobUpdateKey: 0, //任务刷新key
    downloadProgress:{
      htsjzx: 100, //数据中心
      htlsrwxq: 100, //历史任务详情
@@ -28,6 +30,12 @@
    setDownloadProgress(state, data) {
      state.downloadProgress = data
    },
    deviceUpdateKeyAdd(state, data) {
      state.deviceUpdateKey = state.deviceUpdateKey + 1
    },
    jobUpdateKeyAdd(state, data) {
      state.jobUpdateKey = state.jobUpdateKey + 1
    },
    SET_LANGUAGE: (state, language) => {
      state.language = language;
      setStore({

 src/views/dataCenter/components/searchData.vue

@@ -3,7 +3,7 @@
    <el-form :model="searchForm" inline>
      <div class="search-first">
        <el-form-item label="行政区划:" >
          <el-tree-select   
          <el-tree-select
          :disabled="viewDetailsDisabled"
            popper-class="custom-tree-select"
            v-model="searchForm.areaCode"
@@ -80,7 +80,7 @@
        </el-form-item>
        <el-form-item label="文件类别:">
          <el-select
          

            :disabled="disabled || foldersDisabled || viewDetailsDisabled"
            :teleported="false"
            v-model="searchForm.photoType"
@@ -283,7 +283,7 @@
  machineData.value = '';
  const droneList = await getDeviceRegion({ areaCode: data.id });
  machineData.value = droneList?.data?.data;
     

  // 默认选中值
  if (signDevice_sn.value) {
    searchForm.deviceSn = signDevice_sn.value;
@@ -292,7 +292,7 @@
  deptData.value = [];
  getDeptsByAreaCode();
  handleSearch();
  

};
// 所属部门信息
const getDeptsByAreaCode = () => {
@@ -351,17 +351,17 @@
}
// 切换文件夹
const handleswitchFolders =()=>{
  emit('handleswitchFolders'); 
  emit('handleswitchFolders');
}
// 返回按钮
const handleBack = ()=>{
  emit('handleBack'); 
  emit('handleBack');
}
onMounted(() => {
  requestDockInfo();
  getDownloadStatusApi({type: 'htsjzx'}).then(res =>{
    if (!['CANCELLED','COMPLETED'].includes(res.data.data?.status || 'COMPLETED')){
      EventBus.emit('useDownloadWs-messageHandler',res.data.data)
      EventBus.emit('useGlobalWS-messageHandler',res.data.data)
    }
  })
});

 src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -264,14 +264,13 @@


const changeKey = inject('changeKey')
// 轮询查询是否刷新
const polling = setInterval(async () => {
  const res = await statusChangedApi()
  if (res.data.data.DEVICE_REFRESH || res.data.data.JOB_REFRESH) {
    getJobList()
    changeKey.value++
  }
}, 4000)
const jobUpdateKey = computed(() => store.state.common.jobUpdateKey)
const deviceUpdateKey = computed(() => store.state.common.deviceUpdateKey)

watch([jobUpdateKey,deviceUpdateKey],()=>{
  getJobList()
  changeKey.value++
})

onBeforeUnmount(() => {
  clearInterval(polling)