lsq
/
byhl-zt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更改echarts叠加，socket仅触发一次问题

Browse Source
master
飘泊客 5 months ago
parent e967d65d64
commit 5fb767d341
5 changed files with 120 additions and 101 deletions
Show Stats Download Patch File Download Diff File

95
src/hooks/websocket.ts
Unescape Escape View File

@ -6,62 +6,57 @@ import { message } from 'ant-design-vue'
let useWebSocketReturn: UseWebSocketReturn<any> | undefined = undefined let useWebSocketReturn: UseWebSocketReturn<any> | undefined = undefined
//它是一个自定义的Vue hook，用于管理WebSocket连接 //它是一个自定义的Vue hook，用于管理WebSocket连接
const useAdminWebSocket = () => { const useAdminWebSocket = () => {
return new Promise((resolve, _) => { //检查是否已经存在WebSocket连接，以及连接状态。如果WebSocket连接存在且状态不是已关闭，则直接返回现有的WebSocket连接。
//检查是否已经存在WebSocket连接，以及连接状态。如果WebSocket连接存在且状态不是已关闭，则直接返回现有的WebSocket连接。 if (useWebSocketReturn && useWebSocketReturn.status.value != 'CLOSED') {
if (useWebSocketReturn && useWebSocketReturn.status.value != 'CLOSED') { return useWebSocketReturn
return useWebSocketReturn }
}
const { accessToken } = useUserStore() const { accessToken } = useUserStore()
console.log(accessToken, 'accessToken')
// ws地址 // ws地址
const baseUri = import.meta.env.VITE_API_URL const baseUri = import.meta.env.VITE_API_URL
const host = window.location.host const host = window.location.host
const wsUri = `wss://${host}${baseUri}/ws?access_token=${accessToken}` const wsUri = `wss://${host}${baseUri}/ws?access_token=${accessToken}`
//使用useWebSocket函数创建WebSocket连接，并配置自动重连和心跳机制 //使用useWebSocket函数创建WebSocket连接，并配置自动重连和心跳机制
useWebSocketReturn = useWebSocket(wsUri, { useWebSocketReturn = useWebSocket(wsUri, {
autoReconnect: { autoReconnect: {
retries: 3, retries: 3,
delay: 1000, delay: 1000,
onFailed() { onFailed() {
console.error('Failed to connect WebSocket after 3 retries') console.error('Failed to connect WebSocket after 3 retries')
}
},
heartbeat: {
message: '{"type": "ping"}',
interval: 30000
} }
}) },
//监听WebSocket的数据变化，根据接收到的消息类型进行相应的处理，并通过emitter发布事件或数据。 heartbeat: {
watch( message: '{"type": "ping"}',
() => useWebSocketReturn!.data.value, interval: 30000
value => { }
let event })
let dataMsg //监听WebSocket的数据变化，根据接收到的消息类型进行相应的处理，并通过emitter发布事件或数据。
watch(
() => useWebSocketReturn!.data.value,
value => {
let event
let dataMsg
try { try {
dataMsg = JSON.parse(value) dataMsg = JSON.parse(value)
event = dataMsg.type event = dataMsg.type
// 心跳响应跳过发布 // 心跳响应跳过发布
if (event === 'pong') { if (event === 'pong') {
return return
}
} catch (e) {
// 纯文本消息
event = 'plaintext'
dataMsg = value
} }
// emitter.emit(event, dataMsg) } catch (e) {
// +'：'+ JSON.stringify(dataMsg.content).slice(1, -1) // 纯文本消息
message.info(dataMsg.title + '，手动刷新后获取最新线索数据') event = 'plaintext'
// message.info(JSON.stringify(dataMsg.title).slice(1, -1) + '，手动刷新后获取最新线索数据') dataMsg = value
resolve(value)
} }
) // emitter.emit(event, dataMsg)
// +'：'+ JSON.stringify(dataMsg.content).slice(1, -1)
// return useWebSocketReturn message.info(dataMsg.title + '，手动刷新后获取最新线索数据')
}) // message.info(JSON.stringify(dataMsg.title).slice(1, -1) + '，手动刷新后获取最新线索数据')
}
)
return useWebSocketReturn
} }
//将创建的WebSocket连接对象返回给调用者 //将创建的WebSocket连接对象返回给调用者

28
src/layouts/components/RightContent/AvatarDropdown.vue
Unescape Escape View File

@ -111,14 +111,26 @@ onMounted(() => {
userInfoCurrent.value === 'ROLE_SALESMAN' || userInfoCurrent.value === 'ROLE_SALESMAN' ||
userInfoCurrent.value === 'ROLE_STORE_SALESMAN' userInfoCurrent.value === 'ROLE_STORE_SALESMAN'
) { ) {
useAdminWebSocket().then((res: any) => { const websocket = useAdminWebSocket()
const newRes = JSON.parse(res) watch(
newRes.show = true () => websocket.data.value,
//追加到数组最前面 newVal => {
newclueList.value.unshift(newRes) const newRes = JSON.parse(newVal)
//移除数组最后一项,保证始终显示10条消息 newRes.show = true
newclueList.value.pop() //追加到数组最前面
}) newclueList.value.unshift(newRes)
//移除数组最后一项,保证始终显示10条消息
newclueList.value.pop()
}
)
// useAdminWebSocket().then((res: any) => {
// const newRes = JSON.parse(res)
// newRes.show = true
// //追加到数组最前面
// newclueList.value.unshift(newRes)
// //移除数组最后一项,保证始终显示10条消息
// newclueList.value.pop()
// })
} }
}) })

2
src/stores/user-store.ts
Unescape Escape View File

@ -7,7 +7,7 @@ import type { SysMenuRouterVO } from '@/api/system/menu/types'
export interface UserInfo extends LoginUserInfo { export interface UserInfo extends LoginUserInfo {
permissions: string[] permissions: string[]
gender: number | undefined gender?: number | undefined
roleCodes: string[] roleCodes: string[]
} }

94
src/views/basic/iframe/index.vue
Unescape Escape View File

@ -61,14 +61,16 @@
> >
</div> </div>
</div> </div>
<lin-chart <a-spin :spinning="spinning">
v-if="enterDetailsChart" <lin-chart
ref="enterDetailsRef" v-if="enterDetailsChart"
width="100%" ref="enterDetailsRef"
height="300px" width="100%"
:chart-datas="enterDetailsChart" height="300px"
></lin-chart> :chart-datas="enterDetailsChart"
<a-empty v-else description="暂无数据" style="height: 300px; line-height: 300px" /> ></lin-chart>
<a-empty v-else description="暂无数据" style="height: 300px; line-height: 300px" />
</a-spin>
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
@ -111,14 +113,16 @@
> >
</div> </div>
</div> </div>
<lin-chart <a-spin :spinning="spinning2">
v-if="terminalSendingChart" <lin-chart
ref="terminalSendingRef" v-if="terminalSendingChart"
width="100%" ref="terminalSendingRef"
height="300px" width="100%"
:chart-datas="terminalSendingChart" height="300px"
></lin-chart> :chart-datas="terminalSendingChart"
<a-empty v-else description="暂无数据" style="height: 300px; line-height: 300px" /> ></lin-chart>
<a-empty v-else description="暂无数据" style="height: 300px; line-height: 300px" />
</a-spin>
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
@ -149,14 +153,16 @@
> --> > -->
</div> </div>
</div> </div>
<lin-chart <a-spin :spinning="spinning">
v-if="sendingNumChart" <lin-chart
ref="sendingNumRef" v-if="sendingNumChart"
width="100%" ref="sendingNumRef"
height="300px" width="100%"
:chart-datas="sendingNumChart" height="300px"
></lin-chart> :chart-datas="sendingNumChart"
<a-empty v-else description="暂无数据" style="height: 300px; line-height: 300px" /> ></lin-chart>
<a-empty v-else description="暂无数据" style="height: 300px; line-height: 300px" />
</a-spin>
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
@ -187,14 +193,16 @@
> --> > -->
</div> </div>
</div> </div>
<lin-chart <a-spin :spinning="spinning">
v-if="clueNumChart" <lin-chart
ref="clueNumRef" v-if="clueNumChart"
width="100%" ref="clueNumRef"
height="300px" width="100%"
:chart-datas="clueNumChart" height="300px"
></lin-chart> :chart-datas="clueNumChart"
<a-empty v-else description="暂无数据" style="height: 300px; line-height: 300px" /> ></lin-chart>
<a-empty v-else description="暂无数据" style="height: 300px; line-height: 300px" />
</a-spin>
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
@ -260,6 +268,8 @@ const searchObj = reactive<stringKey>({
enterIdList: [], enterIdList: [],
assignedIdList: [] assignedIdList: []
}) })
const spinning = ref<boolean>(false)
const spinning2 = ref<boolean>(false)
// 录入员 // 录入员
// const enterIdList = ref<number[]>() // const enterIdList = ref<number[]>()
// const assignedIdList = ref<number[]>() // const assignedIdList = ref<number[]>()
@ -312,7 +322,6 @@ function iframeResize() {
onMounted(() => { onMounted(() => {
window.addEventListener('resize', iframeResize) window.addEventListener('resize', iframeResize)
roleCodes.value = userStore.roleCodes || [] roleCodes.value = userStore.roleCodes || []
console.log('🚀 ~ file: index.vue:154 ~ roleCodes:', roleCodes.value)
initClueEnter() initClueEnter()
initSalesman() initSalesman()
initGetHomePageBase() initGetHomePageBase()
@ -346,7 +355,7 @@ const initGetHomePageBase = () => {
// 线索录入明细查询 // 线索录入明细查询
const searchGetHomePageEnter = () => { const searchGetHomePageEnter = () => {
if (searchObj.searchDate1.length == 0) { if (!searchObj.searchDate1 || searchObj.searchDate1.length == 0) {
message.warning('请选择日期') message.warning('请选择日期')
return return
} }
@ -358,6 +367,7 @@ const searchGetHomePageEnter = () => {
message.warning('请选择渠道') message.warning('请选择渠道')
return return
} }
spinning.value = true
doRequest( doRequest(
getHomePageEnter({ getHomePageEnter({
createStartTime: dayjs(searchObj.searchDate1[0]).format('YYYY-MM-DD'), createStartTime: dayjs(searchObj.searchDate1[0]).format('YYYY-MM-DD'),
@ -375,7 +385,6 @@ const searchGetHomePageEnter = () => {
const obj: any = {} const obj: any = {}
obj.data = Object.values(res.data[i]) obj.data = Object.values(res.data[i])
obj.type = 'line' obj.type = 'line'
obj.stack = 'Total'
obj.name = i obj.name = i
arr.push(obj) arr.push(obj)
} }
@ -390,6 +399,7 @@ const searchGetHomePageEnter = () => {
} else { } else {
message.info('未查询到数据') message.info('未查询到数据')
} }
spinning.value = false
} }
} }
) )
@ -408,6 +418,7 @@ const searchGetHomePageAssigned = () => {
message.warning('请选择渠道') message.warning('请选择渠道')
return return
} }
spinning2.value = true
doRequest( doRequest(
getHomePageAssigned({ getHomePageAssigned({
createStartTime: dayjs(searchObj.searchDate2[0]).format('YYYY-MM-DD'), createStartTime: dayjs(searchObj.searchDate2[0]).format('YYYY-MM-DD'),
@ -425,7 +436,6 @@ const searchGetHomePageAssigned = () => {
const obj: any = {} const obj: any = {}
obj.data = Object.values(res.data[i]) obj.data = Object.values(res.data[i])
obj.type = 'line' obj.type = 'line'
obj.stack = 'Total'
obj.name = i obj.name = i
arr.push(obj) arr.push(obj)
} }
@ -440,13 +450,14 @@ const searchGetHomePageAssigned = () => {
} else { } else {
message.info('未查询到数据') message.info('未查询到数据')
} }
spinning2.value = false
} }
} }
) )
} }
// 分发数据统计-分发员 // 分发数据统计-分发员
const searchGetDistributors = () => { const searchGetDistributors = () => {
if (searchObj.searchDate1.length == 0) { if (!searchObj.searchDate1 || searchObj.searchDate1.length == 0) {
message.warning('请选择日期') message.warning('请选择日期')
return return
} }
@ -454,6 +465,7 @@ const searchGetDistributors = () => {
message.warning('请选择渠道') message.warning('请选择渠道')
return return
} }
spinning.value = true
doRequest( doRequest(
getDistributors({ getDistributors({
createStartTime: dayjs(searchObj.searchDate1[0]).format('YYYY-MM-DD'), createStartTime: dayjs(searchObj.searchDate1[0]).format('YYYY-MM-DD'),
@ -469,13 +481,11 @@ const searchGetDistributors = () => {
let obj: any = {} let obj: any = {}
obj.data = Object.values(res.data).map((item: any) => item.assigned) obj.data = Object.values(res.data).map((item: any) => item.assigned)
obj.type = 'line' obj.type = 'line'
obj.stack = 'Total'
obj.name = '分发数' obj.name = '分发数'
arr.push(obj) arr.push(obj)
obj = {} obj = {}
obj.data = Object.values(res.data).map((item: any) => item.enter) obj.data = Object.values(res.data).map((item: any) => item.enter)
obj.type = 'line' obj.type = 'line'
obj.stack = 'Total'
obj.name = '进线数' obj.name = '进线数'
arr.push(obj) arr.push(obj)
const chatData: chartData = { const chatData: chartData = {
@ -489,13 +499,14 @@ const searchGetDistributors = () => {
} else { } else {
message.info('未查询到数据') message.info('未查询到数据')
} }
spinning.value = false
} }
} }
) )
} }
// 线索统计-业务员 // 线索统计-业务员
const searchgetSalesman = () => { const searchgetSalesman = () => {
if (searchObj.searchDate1.length == 0) { if (!searchObj.searchDate1 || searchObj.searchDate1.length == 0) {
message.warning('请选择日期') message.warning('请选择日期')
return return
} }
@ -503,6 +514,7 @@ const searchgetSalesman = () => {
message.warning('请选择渠道') message.warning('请选择渠道')
return return
} }
spinning.value = true
doRequest( doRequest(
getSalesman({ getSalesman({
createStartTime: dayjs(searchObj.searchDate1[0]).format('YYYY-MM-DD'), createStartTime: dayjs(searchObj.searchDate1[0]).format('YYYY-MM-DD'),
@ -518,7 +530,6 @@ const searchgetSalesman = () => {
const obj: any = {} const obj: any = {}
obj.data = Object.values(res.data) obj.data = Object.values(res.data)
obj.type = 'line' obj.type = 'line'
obj.stack = 'Total'
obj.name = '分配数' obj.name = '分配数'
arr.push(obj) arr.push(obj)
const chatData: chartData = { const chatData: chartData = {
@ -532,6 +543,7 @@ const searchgetSalesman = () => {
} else { } else {
message.info('未查询到数据') message.info('未查询到数据')
} }
spinning.value = false
} }
} }
) )

2
src/views/login/components/LoginContent.vue
Unescape Escape View File

@ -129,7 +129,7 @@ function store(res: LoginResult) {
// 存储用户信息 // 存储用户信息
const info = res.info const info = res.info
console.log(info, 'info') // console.log(info, 'info')
const roleCodes = res.attributes?.roleCodes || [] const roleCodes = res.attributes?.roleCodes || []
const permissions = res.attributes?.permissions || [] const permissions = res.attributes?.permissions || []
userStore.userInfo = { userStore.userInfo = {

Write Preview
Loading…
Cancel
Save