From 1c500051619d2eeb4389f73b930017b462e8031e Mon Sep 17 00:00:00 2001 From: XieYongHong <18010623010@163.com> Date: Wed, 13 Mar 2024 11:32:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?= =?UTF-8?q?=E4=B8=AD=E5=91=8A=E8=AD=A6=E6=8C=89=E6=9D=A1=E4=BB=B6=E6=9F=A5?= =?UTF-8?q?=E8=AF=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 场景联动新增多条件 * feat: 优化告警绑定场景联动多条件 * feat: 兼容告警绑定场景联动多条件 * feat: 场景联动中告警按条件查询 * fix: 优化场景联动多条件回显 --- src/api/rule-engine/configuration.ts | 4 +- src/api/rule-engine/scene.ts | 8 +- src/store/scene.ts | 59 +- .../Configuration/Save/Scene/Save/index.vue | 516 +++++++++++------- .../Configuration/Save/Scene/Save/utils.ts | 241 ++++++++ .../Alarm/Configuration/Save/Scene/index.vue | 18 +- .../Scene/Save/Device/CheckItem.vue | 9 +- .../Scene/Save/action/ListItem/CheckItem.vue | 3 +- .../Save/action/ListItem/FilterCondition.vue | 2 +- .../Scene/Save/action/ListItem/Item.vue | 7 +- .../Scene/Save/action/TriggerAlarm/index.vue | 16 +- .../Scene/Save/components/Terms/Branches.vue | 40 +- .../Save/components/Terms/ParamsItem.vue | 420 +++++++------- .../Scene/Save/components/Terms/Terms.vue | 173 +++++- .../Scene/Save/components/Terms/TermsItem.vue | 7 +- .../Scene/Save/components/Terms/WhenItem.vue | 14 +- .../Scene/Save/components/Terms/index.less | 10 + .../Scene/Save/components/Terms/util.ts | 3 +- .../Scene/Save/components/Title.vue | 14 +- .../rule-engine/Scene/Save/hooks/index.ts | 0 .../Scene/Save/hooks/useTrigger.ts | 19 + src/views/rule-engine/Scene/index.vue | 7 +- src/views/rule-engine/Scene/typings.ts | 6 +- src/views/rule-engine/Scene/util.ts | 43 ++ src/views/system/Role/RoleRight/index.vue | 2 +- vite.config.ts | 4 +- 26 files changed, 1137 insertions(+), 508 deletions(-) create mode 100644 src/views/rule-engine/Alarm/Configuration/Save/Scene/Save/utils.ts create mode 100644 src/views/rule-engine/Scene/Save/hooks/index.ts create mode 100644 src/views/rule-engine/Scene/Save/hooks/useTrigger.ts create mode 100644 src/views/rule-engine/Scene/util.ts diff --git a/src/api/rule-engine/configuration.ts b/src/api/rule-engine/configuration.ts index 964c26f1..cba16632 100644 --- a/src/api/rule-engine/configuration.ts +++ b/src/api/rule-engine/configuration.ts @@ -42,9 +42,9 @@ export const detail = (id:string) => server.get(`/alarm/config/${id}`); /** * 解除场景联动绑定 */ -export const unbindScene = (id:string,data:any) => server.post(`/alarm/rule/bind/${id}/_delete`,data); +export const unbindScene = (id:string,data:any, branchId: string) => server.post(`/alarm/rule/bind/${id}/_delete?branchIndex=${branchId}`,data); /** * 保存关联场景 */ -export const bindScene = (data:any) => server.patch("/alarm/rule/bind",data) \ No newline at end of file +export const bindScene = (data:any) => server.patch("/alarm/rule/bind",data) diff --git a/src/api/rule-engine/scene.ts b/src/api/rule-engine/scene.ts index bfd17fa6..2fe75528 100644 --- a/src/api/rule-engine/scene.ts +++ b/src/api/rule-engine/scene.ts @@ -9,14 +9,16 @@ export const detail = (id: string) => server.get(`/scene/${id}`) export const query = (data: any) => server.post('/scene/_query/',data); +export const queryBranch = (data: any, id: string) => server.post(`/scene/branch/query?alarmId=${id}`,data); + export const _delete = (id: string) => server.remove(`/scene/${id}/`); export const _action = (id: string, type: '_disable' | '_enable') => server.put(`/scene/${id}/${type}`); /** * 手动触发 - * @param id - * @returns + * @param id + * @returns */ export const _execute = (id: string) => server.post(`/scene/${id}/_execute`); @@ -25,4 +27,4 @@ export const queryBuiltInParams = (data: any, params?: any) => server.post(`/sce export const getParseTerm = (data: Record) => server.post(`/scene/parse-term-column`, data) -export const queryAlarmList = (data: Record) => server.post(`/alarm/config/_query/`, data) \ No newline at end of file +export const queryAlarmList = (data: Record) => server.post(`/alarm/config/_query/`, data) diff --git a/src/store/scene.ts b/src/store/scene.ts index 8fa138de..0463ad18 100644 --- a/src/store/scene.ts +++ b/src/store/scene.ts @@ -1,7 +1,7 @@ import { defineStore } from 'pinia' import type { FormModelType } from '@/views/rule-engine/Scene/typings' import { detail } from '@/api/rule-engine/scene' -import { cloneDeep, isArray } from 'lodash-es' +import {cloneDeep, isArray, isObject} from 'lodash-es' import { randomString } from '@/utils/utils' type DataType = { @@ -54,6 +54,8 @@ export const defaultBranches = [ alarmFirst: false, }, then: [], + executeAnyway: true, + branchId: Math.floor(Math.random() * 100000000) }, ]; @@ -73,7 +75,7 @@ const defaultOptions = { export const useSceneStore = defineStore('scene', () => { const data = ref({ trigger: { type: ''}, - options: defaultOptions, + options: [defaultOptions], branches: defaultBranches, description: '', name: '', @@ -93,6 +95,14 @@ export const useSceneStore = defineStore('scene', () => { } } + const compatibleOldOptions = (options: any) => { + if (isObject(options)) { + return [options] + } else { + return options + } + } + const getDetail = async (id: string) => { refresh() const resp = await detail(id) @@ -109,21 +119,48 @@ export const useSceneStore = defineStore('scene', () => { branches[0].when.length = [] } } else { - const branchesLength = branches.length; - if ( - triggerType === 'device' && - ((branchesLength === 1 && branches[0]?.when?.length) || // 有一组数据并且when有值 - (branchesLength > 1 && branches[branchesLength - 1]?.when?.length)) // 有多组否则数据，并且最后一组when有值 - ) { - branches.push(null); + if (triggerType === 'device') { + const len = branches.length + const newBranches: any[] = [] + + + branches.forEach((item, index) => { + + if (item?.executeAnyway && index > 0 && branches[index - 1]?.when?.length) { + newBranches.push(null) + newBranches.push(item) + // branches.splice(index, 0 , null) + } else { + newBranches.push(item) + } + + + // if (item?.executeAnyway && index > 0 && branches[index - 1]?.when?.length) { + // branches.splice(index, 0 , null) + // } + + if ( index === len - 1 && item?.when?.length) { + newBranches.push(null) + } + }) + + branches = [...newBranches] } + // const branchesLength = branches.length; + // if ( + // triggerType === 'device' && + // ((branchesLength === 1 && branches[0]?.when?.length) || // 有一组数据并且when有值 + // (branchesLength > 1 && branches[branchesLength - 1]?.when?.length)) // 有多组否则数据，并且最后一组when有值 + // ) { + // branches.push(null); + // } } - console.log(branches) + console.log('result.options',branches) data.value = { ...result, trigger: result.trigger || {}, branches: cloneDeep(assignmentKey(branches)), - options: result.options ? {...cloneDeep(defaultOptions), ...result.options } : cloneDeep(defaultOptions), + options: result.options && Object.keys(result.options)?.length ? result.options : cloneDeep(defaultOptions), } } } diff --git a/src/views/rule-engine/Alarm/Configuration/Save/Scene/Save/index.vue b/src/views/rule-engine/Alarm/Configuration/Save/Scene/Save/index.vue index 1ad5ca58..69d6e477 100644 --- a/src/views/rule-engine/Alarm/Configuration/Save/Scene/Save/index.vue +++ b/src/views/rule-engine/Alarm/Configuration/Save/Scene/Save/index.vue @@ -1,25 +1,32 @@ \ No newline at end of file + +.condition-name { + font-size: 16px; + font-weight: bold; +} + +.branch-terms-items { + display: flex; + flex-direction: column; + gap: 8px; + padding-top: 12px; +} + diff --git a/src/views/rule-engine/Alarm/Configuration/Save/Scene/Save/utils.ts b/src/views/rule-engine/Alarm/Configuration/Save/Scene/Save/utils.ts new file mode 100644 index 00000000..4ac8d1e1 --- /dev/null +++ b/src/views/rule-engine/Alarm/Configuration/Save/Scene/Save/utils.ts @@ -0,0 +1,241 @@ +import {send} from "vite"; +import {isArray, isBoolean, isObject} from "lodash-es"; +import {randomString} from "@/utils/utils"; + +const TypeMap = { + 'and': '并且', + 'or': '或者' +} + +const DoubleFilter = ['nbtw', 'btw', 'in', 'nin']; + +const TermsTypeMap = { + eq: '等于_value', + neq: '不等于_value', + gt: '大于_value', + gte: '大于等于_value', + lt: '小于_value', + lte: '小于等于_value', + btw: '在_value和_value2之间', + nbtw: '不在_value和_value2之间', + time_gt_now: '距离当前时间大于_value秒', + time_lt_now: '距离当前时间小于_value秒', + in: '在_value,_value2之中', + nin: '不在_value,_value2之中', + like: '包含_value', + nlike: '不包含_value', + notnull: '不为空', + isnull: '为空' +}; + +const handleValueString = (t: string, value: any) => { + if (DoubleFilter.includes(t)) { + const _v = value.length === 2 ? value : [value[0], value[0]] + return TermsTypeMap[t].replace('_value', _v[0]).replace('_value2', _v[1]) + } else if(['notnull', 'isnull'].includes(t)) { + return TermsTypeMap[t] + } else if (TermsTypeMap[t]){ + return TermsTypeMap[t].replace('_value', value[0]); + } else { + return `${t}${value[0]}` + } +} + +const handleNotifyType = (data: any, options: any) => { + if (data.notifyType === 'dingTalk') { + const { sendTo, orgName, templateName } = options + if (options.provider === 'dingTalkRobotWebHook') { + return `通过群机器人消息发送 ${templateName || data?.notify?.templateId}` + } + const move = sendTo || orgName ? '向' : '' + return `通过钉钉${move} ${sendTo || ''} ${orgName || ''} 发送 ${templateName || data?.notify?.templateId}` + } + + if (data.notifyType === 'weixin') { + const { sendTo, orgName, tagName, templateName } = options + const move = sendTo || orgName || tagName ? '向' : '' + + return `通过微信${move}${sendTo || ''}${orgName || ''}${tagName || ''}发送${templateName || data?.notify?.templateId}` + } + + if (data.notifyType === 'email') { + const { sendTo, templateName } = options + const move = sendTo ? '向' : '' + return `通过邮件${move}${sendTo || ''}发送${templateName || data?.notify?.templateId}` + } + + if (data.notifyType === 'voice') { + const { sendTo, templateName } = options + const move = sendTo ? '向' : '' + return `通过语音${move}${sendTo || ''}发送${templateName || data?.notify?.templateId}` + } + + if (data.notifyType === 'sms') { + const { sendTo, templateName } = options + const move = sendTo ? '向' : '' + return `通过短信${move}${sendTo || ''}发送${templateName || data?.notify?.templateId}` + } + + if (data.notifyType === 'sms') { + const { templateName } = options + return `通过WebHook发送${templateName || data?.notify?.templateId}` + } + + return undefined +} + +const handleDevice = (device: any, options: any) => { + let str = '' + const {type, name, propertiesName, propertiesValue, tagName, productName, triggerName, relationName} = options + if (['fixed', 'context'].includes(device?.selector)) { + str += `${type} ${name} ${propertiesName}` + let isValueBoolean = isBoolean(propertiesValue) + if (propertiesValue && isValueBoolean) { + str += '为' + } + str += isValueBoolean || propertiesValue ? propertiesValue : '' + } else if (device?.selector === 'tag') { + str = `${type} ${tagName} ${productName} ${propertiesName}` + } else if (device?.selector === 'relation') { + str = `${type}与${triggerName}具有相同${relationName}的${productName}设备的${propertiesName}` + } + + return str +} +const handleActions = (then: any): any[] => { + let actionsArr:any[] = [] + const arr = then?.[0].actions.length ? then?.[0].actions : then?.[1].actions + + arr?.forEach((item: any) => { + console.log(item, item.options) + if (item.executor === 'alarm') { + actionsArr.push( + item.alarm.mode === 'trigger' ? + '满足条件后将触发关联此条件的告警' : + '满足条件后将解除关联此条件的告警' + ) + } + + if (item.executor === 'notify') { + actionsArr.push(handleNotifyType(item.notify, item.options)) + } + + if (item.executor === 'delay') { + actionsArr.push(item.options?.name) + } + + if (item.executor === 'device') { + actionsArr.push(handleDevice(item.device, item.options)) + } + + }) + + return actionsArr +} + +const handleConditions = (when: any, whenData: any[]) => { + let termsArr: string = '' + + if (when) { + when?.terms.forEach((item, itemIndex) => { + if (item.terms?.length) { + if (itemIndex != 0) { + termsArr += item.termType + } + termsArr += '【' + item.terms.forEach((b, index) => { + const [ name, termType, value, type ] = b + if (index !== 0) { + termsArr += ` ${TypeMap[type] || type} ` + } + termsArr += `${name} ${handleValueString(termType, value)}` + }) + termsArr += '】' + } + }) + } else { + whenData.forEach((item, itemIndex) => { + if (item.terms.length) { + if (itemIndex !== 0) { + termsArr += TypeMap[item.type] + } + termsArr += '【' + item.terms.forEach((b, index) => { + console.log(b) + const { column, termType, value, type } = b + let _val: any = { 0: value } + + if (isObject(value)) { + _val = { 0: value.value } + } else if (isArray(value)) { + _val = value + } + + if (index !== 0) { + termsArr += ` ${TypeMap[type] || type} ` + } + termsArr += `${column} ${handleValueString(termType, _val)}` + }) + termsArr += '】' + } + }) + } + return termsArr +} + +const handleBranches = (branches: any[], when: any, parentId: string) => { + const msg: any[] = [] + + branches.forEach((item: any, index) => { + const _id = `condition_${index}` + + const obj = { + title: `条件 ${index + 1}`, + id: _id, + parentId, + children: [{ + title: handleConditions(when[index], item.when), + id: randomString(), + branchId: item.branchId || -1, + parentId: _id, + sceneId: parentId + }] + } + if (index === 0) { + msg[0] = obj + } else { + const lastIndex = msg.length - 1 + if (item.executeAnyway) { + msg[lastIndex + 1] = obj + } else { + msg[lastIndex].children.push({ + title: handleConditions(when[index], item.when), + id: randomString(), + branchId: item.branchId || -1, + parentId: _id, + sceneId: parentId + }) + } + } + }) + return msg +} +export const handleSceneBranches = (data: any): any[] => { + const group: any[] = [] + + data?.forEach((item: any) => { + let obj: any = { + title: item.name, + id: item.id, + children: [] + } + if (item.branches?.length) { + obj.trigger = item.options.trigger + obj.children = handleBranches(item.branches, item.options.when, item.id) + } + + group.push(obj) + }) + + return group +} diff --git a/src/views/rule-engine/Alarm/Configuration/Save/Scene/index.vue b/src/views/rule-engine/Alarm/Configuration/Save/Scene/index.vue index b984bbc5..3561dbab 100644 --- a/src/views/rule-engine/Alarm/Configuration/Save/Scene/index.vue +++ b/src/views/rule-engine/Alarm/Configuration/Save/Scene/index.vue @@ -2,7 +2,7 @@ @@ -60,6 +61,10 @@ const props = defineProps({ type: Number, default: 0 }, + branches_Index: { + type: Number, + default: 0 + }, whenName: { type: Number, default: 0 @@ -103,4 +108,4 @@ const rules = [ \ No newline at end of file + diff --git a/src/views/rule-engine/Scene/Save/components/Terms/WhenItem.vue b/src/views/rule-engine/Scene/Save/components/Terms/WhenItem.vue index 373e0043..842b7bec 100644 --- a/src/views/rule-engine/Scene/Save/components/Terms/WhenItem.vue +++ b/src/views/rule-engine/Scene/Save/components/Terms/WhenItem.vue @@ -30,6 +30,7 @@ v-for='(item, index) in termsData' :key='item.key' :branchName='branchName' + :branches_Index='branches_Index' :whenName='props.name' :name='index' :showDeleteBtn='termsData.length > 1' @@ -89,6 +90,10 @@ const props = defineProps({ type: Number, default: 0 }, + branches_Index: { + type: Number, + default: 0 + }, isLast: { type: Boolean, default: true @@ -119,7 +124,7 @@ const typeChange = (e: any) => { const onDelete = () => { formModel.value.branches?.[props.branchName]?.when?.splice(props.name, 1) - formModel.value.options!.when[props.branchName].terms.splice(props.name, 1) + formModel.value.options!.when[props.branches_Index].terms.splice(props.name, 1) } const addWhen = () => { @@ -140,11 +145,14 @@ const addWhen = () => { key: `terms_${randomString()}` } formModel.value.branches?.[props.branchName]?.when?.push(terms) - formModel.value.options?.when?.[props.branchName]?.terms.push({ termType: '并且', terms: [['','eq','','and']]}) + if (!formModel.value.options!.when[props.branches_Index]) { + formModel.value.options!.when[props.branches_Index] = {terms:[{terms: [['', '', '', '并且']]}]} + } + formModel.value.options?.when?.[props.branches_Index]?.terms.push({ termType: '并且', terms: [['','eq','','and']]}) } \ No newline at end of file + diff --git a/src/views/rule-engine/Scene/Save/components/Terms/index.less b/src/views/rule-engine/Scene/Save/components/Terms/index.less index 962c0594..05a216b8 100644 --- a/src/views/rule-engine/Scene/Save/components/Terms/index.less +++ b/src/views/rule-engine/Scene/Save/components/Terms/index.less @@ -50,6 +50,16 @@ .actions-terms-warp { display: flex; margin-bottom: 24px; + position: relative; + + .group-delete { + position: absolute; + right: 0; + top: -14px; + z-index: 2; + cursor: pointer; + color: #e50012; + } &.first-children, &:last-child { diff --git a/src/views/rule-engine/Scene/Save/components/Terms/util.ts b/src/views/rule-engine/Scene/Save/components/Terms/util.ts index 4728f0ba..191e67ab 100644 --- a/src/views/rule-engine/Scene/Save/components/Terms/util.ts +++ b/src/views/rule-engine/Scene/Save/components/Terms/util.ts @@ -23,4 +23,5 @@ export const thenRules = [{ } return Promise.resolve(); } -}] \ No newline at end of file +}] + diff --git a/src/views/rule-engine/Scene/Save/components/Title.vue b/src/views/rule-engine/Scene/Save/components/Title.vue index b4a492d4..23fa3c2f 100644 --- a/src/views/rule-engine/Scene/Save/components/Title.vue +++ b/src/views/rule-engine/Scene/Save/components/Title.vue @@ -14,25 +14,25 @@ @@ -70,4 +70,4 @@ const isAdd = computed(() => { } } - \ No newline at end of file + diff --git a/src/views/rule-engine/Scene/Save/hooks/index.ts b/src/views/rule-engine/Scene/Save/hooks/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/views/rule-engine/Scene/Save/hooks/useTrigger.ts b/src/views/rule-engine/Scene/Save/hooks/useTrigger.ts new file mode 100644 index 00000000..543acc91 --- /dev/null +++ b/src/views/rule-engine/Scene/Save/hooks/useTrigger.ts @@ -0,0 +1,19 @@ +import { useSceneStore } from '@/store/scene' +import {storeToRefs} from "pinia"; +import type {BranchesGroup} from "@/views/rule-engine/Scene/typings"; +export const useTrigger = () => { + const sceneStore = useSceneStore() + const { data } = storeToRefs(sceneStore) + const open = ref(false) + + + watchEffect(() => { + const group = data.value.branches as BranchesGroup + console.log(group) + open.value = !!group?.filter(item => item.filter(b => b)?.length).length + }) + + return { + open + } +} diff --git a/src/views/rule-engine/Scene/index.vue b/src/views/rule-engine/Scene/index.vue index 2e1c0467..92beb999 100644 --- a/src/views/rule-engine/Scene/index.vue +++ b/src/views/rule-engine/Scene/index.vue @@ -328,7 +328,10 @@ const getActions = ( { column: 'id', termType: 'rule-bind-alarm', - value: data.id, + value: { + ruleId: [data.id], + branchId: [-1] + }, }, ] } @@ -444,4 +447,4 @@ const handleView = (id: string, triggerType: string) => { } } - \ No newline at end of file + diff --git a/src/views/rule-engine/Scene/typings.ts b/src/views/rule-engine/Scene/typings.ts index 31ccc627..2ad78d7d 100644 --- a/src/views/rule-engine/Scene/typings.ts +++ b/src/views/rule-engine/Scene/typings.ts @@ -280,6 +280,8 @@ export interface ActionBranchesProps { shakeLimit: ShakeLimitType; then: BranchesThen[]; key?: string; + + executeAnyway?: boolean } export interface ActionsType { @@ -301,6 +303,8 @@ export interface ActionsType { options?: Record; } +export type BranchesGroup = Array + export interface FormModelType { id?: string; name?: string; @@ -319,7 +323,7 @@ export interface FormModelType { /** * 动作分支 */ - branches?: ActionBranchesProps[]; + branches?: ActionBranchesProps[] | Array; /** * 拓展信息,用于前端存储一些渲染数据 */ diff --git a/src/views/rule-engine/Scene/util.ts b/src/views/rule-engine/Scene/util.ts new file mode 100644 index 00000000..af65d5bf --- /dev/null +++ b/src/views/rule-engine/Scene/util.ts @@ -0,0 +1,43 @@ +import type {ActionBranchesProps} from "./typings"; +import {isArray} from "lodash-es"; + +export const handleGroup = (branches: ActionBranchesProps[]) => { + let group: Array> = [] + + branches.forEach((item) => { + const lastIndex = group.length - 1 + if (item?.executeAnyway) { + group[lastIndex] = [item] + } else { + if (isArray(group[lastIndex])) { + group[lastIndex].push(item) + } else { + group[lastIndex] = [item] + } + } + }) + + // 判断每组末尾是否有数据并且when有值 + if (group.length) { + group = group.map(item => { + if (item.length && item[item.length -1]?.when?.length) { + item.push(null) + } + return item + }) + } else { + group[0] = [null] + } + + return group +} + + + +export const groupToArray = (branchesGroup: Array) => { + const arr:ActionBranchesProps[] = [] + + branchesGroup.forEach(item => { + + }) +} diff --git a/src/views/system/Role/RoleRight/index.vue b/src/views/system/Role/RoleRight/index.vue index cb0a7547..cdd0ad67 100644 --- a/src/views/system/Role/RoleRight/index.vue +++ b/src/views/system/Role/RoleRight/index.vue @@ -44,7 +44,7 @@ import PermissionButton from '@/components/PermissionButton/index.vue'; import AddDialog from './components/AddDialog.vue'; import { getRoleList_api, delRole_api } from '@/api/system/role'; -import type { ActionsType } from './typings'; +import type { ActionsType } from '@/components/Table'; import { useMenuStore } from '@/store/menu'; import { onlyMessage } from '@/utils/comm'; const props = defineProps({ diff --git a/vite.config.ts b/vite.config.ts index 27e124c5..4132e925 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -94,11 +94,11 @@ export default defineConfig(({ mode}) => { [env.VITE_APP_BASE_API]: { // target: 'http://192.168.32.226:8844', // target: 'http://192.168.32.244:8881', - // target: 'http://192.168.32.163:8844', //张季本地 + // target: 'http://192.168.32.163:8844', //张本地 // target: 'http://120.77.179.54:8844', // 120测试 target: 'http://192.168.33.46:8844', // 本地开发环境 // target: 'http://192.168.33.1:8845', // 社区版开发环境 - // target: 'http://192.168.32.5:8848', // 刘本地 + // target: 'http://192.168.32.200:8844', // 刘本地 // target: 'http://192.168.32.187:8844', // 谭本地 ws: 'ws://192.168.33.46:8844', changeOrigin: true,