Commit eff0f4473f52d6e29ac22d54989f76a6332d35be
Merge branch 'main_dev'
# Conflicts: # src/components/Form/src/types/index.ts # src/enums/dictEnum.ts # src/views/device/list/config/data.ts # src/views/device/list/cpns/step/DeviceStep1.vue # src/views/device/list/cpns/tabs/ModelOfMatter.vue # src/views/device/list/cpns/tabs/ObjectModelCommandDeliveryModal/index.vue # src/views/rule/dataFlow/components/dataflowmodal/DataFlowModal.vue # src/views/visual/dataSourceBindPanel/index.vue # src/views/visual/packages/components/Alarm/DeviceAlarm/config.ts # src/views/visual/packages/components/Alarm/DeviceAlarm/config.vue # src/views/visual/packages/components/Alarm/DeviceAlarm/index.vue # src/views/visual/packages/components/Alarm/DeviceAlarmHistory/index.vue # src/views/visual/packages/components/Control/ControlComponentSlidingSwitch/index.vue # src/views/visual/packages/components/Control/ControlComponentSwitchWithIcon/index.vue # src/views/visual/packages/components/Control/ControlComponentToggleSwitch/index.vue # src/views/visual/packages/components/Control/LateralNumericalControl/config.ts # src/views/visual/packages/components/Control/LateralNumericalControl/config.vue # src/views/visual/packages/components/Control/LateralNumericalControl/index.vue # src/views/visual/packages/components/Control/SwitchList/index.vue # src/views/visual/packages/components/Flowmeter/CircleFlowmeter/config.ts # src/views/visual/packages/components/Flowmeter/CircleFlowmeter/config.vue # src/views/visual/packages/components/Flowmeter/CircleFlowmeter/index.vue # src/views/visual/packages/components/Flowmeter/RectFlowmeter/config.ts # src/views/visual/packages/components/Flowmeter/RectFlowmeter/config.vue # src/views/visual/packages/components/Flowmeter/RectFlowmeter/index.vue # src/views/visual/packages/components/Instrument/HumidityComponent/config.vue # src/views/visual/packages/components/Instrument/HumidityComponent/index.vue # src/views/visual/packages/components/Instrument/HumidityComponent1/config.ts # src/views/visual/packages/components/Instrument/HumidityComponent1/config.vue # src/views/visual/packages/components/Instrument/HumidityComponent1/index.vue # src/views/visual/packages/components/Instrument/HumidityComponent3/config.ts # src/views/visual/packages/components/Instrument/HumidityComponent3/config.vue # src/views/visual/packages/components/Instrument/HumidityComponent3/index.vue # src/views/visual/packages/components/Instrument/InstrumentComponent1/config.vue # src/views/visual/packages/components/Instrument/InstrumentComponent1/index.vue # src/views/visual/packages/components/Instrument/InstrumentComponent2/config.ts # src/views/visual/packages/components/Instrument/InstrumentComponent2/config.vue # src/views/visual/packages/components/Instrument/InstrumentComponent2/index.vue # src/views/visual/packages/components/Other/SwitchSignalLight/config.ts # src/views/visual/packages/components/Other/SwitchSignalLight/config.vue # src/views/visual/packages/components/Other/SwitchSignalLight/index.vue # src/views/visual/packages/components/Other/SwitchStatus/config.ts # src/views/visual/packages/components/Other/SwitchStatus/index.vue # src/views/visual/packages/components/Text/ValueList1/index.vue # src/views/visual/packages/components/Text/ValueList2/index.vue # src/views/visual/palette/components/alarmTimeModal/config.ts # src/views/visual/palette/types/index.ts
Showing
77 changed files
with
2569 additions
and
755 deletions
Too many changes to show.
To preserve performance only 77 of 603 files are displayed.
| ... | ... | @@ -5,22 +5,28 @@ |
| 5 | 5 | "public/resource/tinymce/langs" |
| 6 | 6 | ], |
| 7 | 7 | "cSpell.words": [ |
| 8 | + "ACKS", | |
| 9 | + "clazz", | |
| 8 | 10 | "Cmds", |
| 9 | 11 | "COAP", |
| 10 | 12 | "echarts", |
| 11 | 13 | "edrx", |
| 12 | - "EFENTO", | |
| 14 | + "EFENTO", | |
| 13 | 15 | "fingerprintjs", |
| 14 | 16 | "flvjs", |
| 15 | - "flvjs", | |
| 16 | 17 | "inited", |
| 17 | 18 | "liveui", |
| 18 | 19 | "MQTT", |
| 20 | + "noconflict", | |
| 19 | 21 | "notif", |
| 20 | 22 | "PROTOBUF", |
| 23 | + "Rabbitmq", | |
| 21 | 24 | "rtsp", |
| 22 | 25 | "SCADA", |
| 26 | + "SMTPS", | |
| 23 | 27 | "SNMP", |
| 28 | + "TSLV", | |
| 29 | + "UNACK", | |
| 24 | 30 | "unref", |
| 25 | 31 | "vben", |
| 26 | 32 | "videojs", | ... | ... |
build/generate/ruleChain/components.ts
0 → 100644
build/generate/ruleChain/index.ts
0 → 100644
| 1 | +import { join } from 'path'; | |
| 2 | +import { pathExists, ensureFile, writeFile } from 'fs-extra'; | |
| 3 | +import { NodeItemConfigType } from '/@/views/rule/designer/types/node'; | |
| 4 | +import { camelCase, upperFirst, snakeCase } from 'lodash-es'; | |
| 5 | +import { components } from './components'; | |
| 6 | +type GroupNodeType = { [key: string]: NodeItemConfigType[] }; | |
| 7 | + | |
| 8 | +const RULE_CHAIN_FILE_PATH = join(process.cwd(), '/src/views/rule/designer'); | |
| 9 | + | |
| 10 | +const list: NodeItemConfigType[] = components; | |
| 11 | + | |
| 12 | +const getCategoryConfigName = (name: string) => { | |
| 13 | + return `${upperFirst(camelCase(name))}CategoryConfig`; | |
| 14 | +}; | |
| 15 | + | |
| 16 | +const getNodeConfigName = (name: string) => { | |
| 17 | + return `${upperFirst(camelCase(name))}Config`; | |
| 18 | +}; | |
| 19 | + | |
| 20 | +const getCagegoryEnumName = (name: string) => { | |
| 21 | + return `${upperFirst(name.toLowerCase())}CategoryComponentEnum`; | |
| 22 | +}; | |
| 23 | + | |
| 24 | +const getEnumKeyName = (name: string) => { | |
| 25 | + return snakeCase(name).toUpperCase(); | |
| 26 | +}; | |
| 27 | + | |
| 28 | +const createFile = async (fileName: string, fileContent?: string, replace = false) => { | |
| 29 | + const path = join(RULE_CHAIN_FILE_PATH, './packages', fileName); | |
| 30 | + | |
| 31 | + const flag = await pathExists(path); | |
| 32 | + | |
| 33 | + if (flag && !replace) return false; | |
| 34 | + | |
| 35 | + await ensureFile(path); | |
| 36 | + | |
| 37 | + fileContent && (await writeFile(path, fileContent, { encoding: 'utf-8' })); | |
| 38 | +}; | |
| 39 | + | |
| 40 | +const groupByType = () => { | |
| 41 | + const group: { [key: string]: NodeItemConfigType[] } = {}; | |
| 42 | + | |
| 43 | + list.forEach((item) => { | |
| 44 | + if (!group[item.type]) group[item.type] = []; | |
| 45 | + group[item.type].push(item); | |
| 46 | + }); | |
| 47 | + | |
| 48 | + return group; | |
| 49 | +}; | |
| 50 | + | |
| 51 | +const generateCategoryEnumFile = async (data: GroupNodeType) => { | |
| 52 | + const defaultContent = ` | |
| 53 | +export enum EntryCategoryComponentEnum { | |
| 54 | + INPUT = 'Input', | |
| 55 | +} | |
| 56 | + `; | |
| 57 | + | |
| 58 | + const fileContent = Object.keys(data).reduce((prev, next) => { | |
| 59 | + const enumName = getCagegoryEnumName(next); | |
| 60 | + | |
| 61 | + const enumKeys = data[next].map((item) => getEnumKeyName(item.name)); | |
| 62 | + | |
| 63 | + const content = `export enum ${enumName} { | |
| 64 | + ${enumKeys.map((name) => `${name} = '${upperFirst(camelCase(name))}'`)} | |
| 65 | + }`; | |
| 66 | + | |
| 67 | + return `${prev} \n ${content}`; | |
| 68 | + }, defaultContent); | |
| 69 | + | |
| 70 | + createFile('../enum/category.ts', fileContent, true); | |
| 71 | + return fileContent; | |
| 72 | +}; | |
| 73 | + | |
| 74 | +const generateRuleNodeEnumFile = async (data: GroupNodeType) => { | |
| 75 | + const categoryKeys = Object.keys(data).map((type) => type.toUpperCase()); | |
| 76 | + const filePath = join(RULE_CHAIN_FILE_PATH, './packages/index.type.ts'); | |
| 77 | + const fileContent = ` | |
| 78 | +export enum RuleNodeTypeEnum { | |
| 79 | + ${categoryKeys.map((item) => `${item} = '${item}'`).join(',\n')} | |
| 80 | +} | |
| 81 | + `; | |
| 82 | + | |
| 83 | + await writeFile(filePath, fileContent, { | |
| 84 | + encoding: 'utf-8', | |
| 85 | + }); | |
| 86 | + | |
| 87 | + return fileContent; | |
| 88 | +}; | |
| 89 | + | |
| 90 | +const generateCategoryIndexFile = async (type: string, data: NodeItemConfigType[]) => { | |
| 91 | + const getComponentsName = data.map((temp) => `${upperFirst(camelCase(temp.name))}`); | |
| 92 | + const importContent = getComponentsName.map( | |
| 93 | + (name) => `import { ${name}Config } from './${name}';\n` | |
| 94 | + ); | |
| 95 | + | |
| 96 | + const components = getComponentsName.map((item) => `${item}Config`); | |
| 97 | + | |
| 98 | + const content = `import type { CategoryConfigType, NodeItemConfigType } from '../../types/node'; | |
| 99 | +import { RuleNodeTypeEnum } from '../index.type'; | |
| 100 | +${importContent.join('')} | |
| 101 | + | |
| 102 | +export const ${getCategoryConfigName(type)}: CategoryConfigType = { | |
| 103 | + category: RuleNodeTypeEnum.${type.toUpperCase()}, | |
| 104 | + title: '${type}', | |
| 105 | + icon: 'tabler:circuit-ground', | |
| 106 | + description: '使用配置条件筛选传入消息', | |
| 107 | +}; | |
| 108 | + | |
| 109 | +export const ${upperFirst(type.toLowerCase())}Components: NodeItemConfigType[] = [${components}]; | |
| 110 | +`; | |
| 111 | + | |
| 112 | + createFile(`./${upperFirst(type.toLowerCase())}/index.ts`, content, true); | |
| 113 | + | |
| 114 | + return content; | |
| 115 | +}; | |
| 116 | + | |
| 117 | +const generateNodeIndexFile = async (type: string, data: NodeItemConfigType) => { | |
| 118 | + const categoryEnumName = getCagegoryEnumName(type); | |
| 119 | + | |
| 120 | + const nodeConfigName = getNodeConfigName(data.name); | |
| 121 | + | |
| 122 | + const content = ` | |
| 123 | + import { ${categoryEnumName} } from '../../../enum/category'; | |
| 124 | + import { useCreateNodeKey } from '../../../hook/useCreateNodeKey'; | |
| 125 | + import type { NodeItemConfigType } from '../../../types/node'; | |
| 126 | + import { RuleNodeTypeEnum } from '../../index.type'; | |
| 127 | + | |
| 128 | + const keys = useCreateNodeKey(${categoryEnumName}.${getEnumKeyName(data.name)}); | |
| 129 | + | |
| 130 | + export interface ${upperFirst(camelCase(data.name))}DataType { | |
| 131 | + someConfiguration?: Recordable | |
| 132 | + } | |
| 133 | + | |
| 134 | + export const ${nodeConfigName}: NodeItemConfigType = { | |
| 135 | + ...keys, | |
| 136 | + clazz: '${data.clazz}', | |
| 137 | + categoryType: RuleNodeTypeEnum.${type.toUpperCase()}, | |
| 138 | + name: '${data.name}', | |
| 139 | + configurationDescriptor: ${JSON.stringify(data.configurationDescriptor, null, 2)} | |
| 140 | + }; | |
| 141 | + `; | |
| 142 | + | |
| 143 | + createFile( | |
| 144 | + `./${upperFirst(type.toLowerCase())}/${upperFirst(camelCase(data.name))}/index.ts`, | |
| 145 | + content | |
| 146 | + ); | |
| 147 | + | |
| 148 | + return content; | |
| 149 | +}; | |
| 150 | + | |
| 151 | +const generateNodeVueTemplateFile = async (type: string, data: NodeItemConfigType) => { | |
| 152 | + const content = ` | |
| 153 | + <script lang="ts" setup> | |
| 154 | + import type { CreateModalDefineExposeType } from '../../../types'; | |
| 155 | + import { BasicForm, useForm } from '/@/components/Form'; | |
| 156 | + import { formSchemas } from './create.config'; | |
| 157 | + import { NodeData } from '../../../types/node'; | |
| 158 | + | |
| 159 | + defineProps<{ | |
| 160 | + config: NodeData; | |
| 161 | + }>(); | |
| 162 | + | |
| 163 | + const [register, { validate, getFieldsValue, setFieldsValue, resetFields }] = useForm({ | |
| 164 | + schemas: formSchemas, | |
| 165 | + showActionButtonGroup: false, | |
| 166 | + }); | |
| 167 | + | |
| 168 | + const getValue: CreateModalDefineExposeType['getFieldsValue'] = async () => { | |
| 169 | + await validate(); | |
| 170 | + const value = getFieldsValue() || {}; | |
| 171 | + return value; | |
| 172 | + }; | |
| 173 | + | |
| 174 | + const setValue: CreateModalDefineExposeType['setFieldsValue'] = (value) => { | |
| 175 | + resetFields(); | |
| 176 | + setFieldsValue(value); | |
| 177 | + }; | |
| 178 | + | |
| 179 | + defineExpose({ | |
| 180 | + setFieldsValue: setValue, | |
| 181 | + getFieldsValue: getValue, | |
| 182 | + } as CreateModalDefineExposeType); | |
| 183 | + </script> | |
| 184 | + | |
| 185 | + <template> | |
| 186 | + <BasicForm @register="register" /> | |
| 187 | + </template> | |
| 188 | + `; | |
| 189 | + | |
| 190 | + createFile( | |
| 191 | + `./${upperFirst(type.toLowerCase())}/${upperFirst(camelCase(data.name))}/create.vue`, | |
| 192 | + content | |
| 193 | + ); | |
| 194 | + return content; | |
| 195 | +}; | |
| 196 | + | |
| 197 | +const generateNodeVueConfigFile = async (type: string, data: NodeItemConfigType) => { | |
| 198 | + const content = ` | |
| 199 | + import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node'; | |
| 200 | + import { FormSchema } from '/@/components/Form'; | |
| 201 | + | |
| 202 | + export const formSchemas: FormSchema[] = [ | |
| 203 | + { | |
| 204 | + field: NodeBindDataFieldEnum.NAME, | |
| 205 | + component: 'Input', | |
| 206 | + label: NodeBindDataFieldNameEnum.NAME, | |
| 207 | + } | |
| 208 | + ]; | |
| 209 | + `; | |
| 210 | + | |
| 211 | + createFile( | |
| 212 | + `./${upperFirst(type.toLowerCase())}/${upperFirst(camelCase(data.name))}/create.config.ts`, | |
| 213 | + content | |
| 214 | + ); | |
| 215 | + return content; | |
| 216 | +}; | |
| 217 | + | |
| 218 | +const generateNodeConfigFile = async (type: string, data: NodeItemConfigType) => { | |
| 219 | + const nodeConfigName = getNodeConfigName(data.name); | |
| 220 | + const categoryConfigName = getCategoryConfigName(type); | |
| 221 | + const content = ` | |
| 222 | + import { cloneDeep } from 'lodash-es'; | |
| 223 | + import { PublicNodeItemClass } from '../../../types/node'; | |
| 224 | + import type { | |
| 225 | + CategoryConfigType, | |
| 226 | + CreateComponentType, | |
| 227 | + NodeItemConfigType, | |
| 228 | + } from '../../../types/node'; | |
| 229 | + import { ${categoryConfigName} } from '..'; | |
| 230 | + import { ${nodeConfigName} } from '.'; | |
| 231 | + | |
| 232 | + export class Config extends PublicNodeItemClass implements CreateComponentType { | |
| 233 | + public config: NodeItemConfigType = cloneDeep(${nodeConfigName}); | |
| 234 | + | |
| 235 | + public categoryConfig: CategoryConfigType = cloneDeep(${categoryConfigName}); | |
| 236 | + | |
| 237 | + constructor() { | |
| 238 | + super(); | |
| 239 | + } | |
| 240 | + } | |
| 241 | + `; | |
| 242 | + | |
| 243 | + createFile( | |
| 244 | + `./${upperFirst(type.toLowerCase())}/${upperFirst(camelCase(data.name))}/config.ts`, | |
| 245 | + content | |
| 246 | + ); | |
| 247 | + return content; | |
| 248 | +}; | |
| 249 | + | |
| 250 | +const bootstrap = async () => { | |
| 251 | + const groupData = groupByType(); | |
| 252 | + await generateRuleNodeEnumFile(groupData); | |
| 253 | + await generateCategoryEnumFile(groupData); | |
| 254 | + for (const type of Object.keys(groupData)) { | |
| 255 | + const item = groupData[type]; | |
| 256 | + await generateCategoryIndexFile(type, item); | |
| 257 | + for (const temp of item) { | |
| 258 | + await generateNodeConfigFile(type, temp); | |
| 259 | + await generateNodeIndexFile(type, temp); | |
| 260 | + await generateNodeVueConfigFile(type, temp); | |
| 261 | + await generateNodeVueTemplateFile(type, temp); | |
| 262 | + } | |
| 263 | + } | |
| 264 | +}; | |
| 265 | + | |
| 266 | +bootstrap(); | ... | ... |
| ... | ... | @@ -32,13 +32,18 @@ |
| 32 | 32 | "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap", |
| 33 | 33 | "prepare": "husky install", |
| 34 | 34 | "gen:icon": "esno ./build/generate/icon/index.ts", |
| 35 | - "gen:iconfont": "esno ./build/generate/iconfont/index.ts" | |
| 35 | + "gen:iconfont": "esno ./build/generate/iconfont/index.ts", | |
| 36 | + "gen:rule": "esno ./build/generate/ruleChain/index.ts && npx eslint \"src/views/rule/designer/**/*.{vue,ts,tsx}\" --fix" | |
| 36 | 37 | }, |
| 37 | 38 | "dependencies": { |
| 38 | 39 | "@fingerprintjs/fingerprintjs": "^3.4.1", |
| 39 | 40 | "@iconify/iconify": "^2.0.3", |
| 40 | 41 | "@logicflow/core": "^0.6.9", |
| 41 | 42 | "@logicflow/extension": "^0.6.9", |
| 43 | + "@vue-flow/background": "^1.2.0", | |
| 44 | + "@vue-flow/controls": "^1.1.0", | |
| 45 | + "@vue-flow/core": "^1.22.1", | |
| 46 | + "@vue-flow/node-toolbar": "^1.1.0", | |
| 42 | 47 | "@vueuse/core": "^10.1.0", |
| 43 | 48 | "@zxcvbn-ts/core": "^1.0.0-beta.0", |
| 44 | 49 | "ace-builds": "^1.4.14", |
| ... | ... | @@ -53,6 +58,7 @@ |
| 53 | 58 | "flv.js": "^1.6.2", |
| 54 | 59 | "hls.js": "^1.0.10", |
| 55 | 60 | "intro.js": "^4.1.0", |
| 61 | + "js-beautify": "^1.14.9", | |
| 56 | 62 | "jsoneditor": "^9.7.2", |
| 57 | 63 | "jwt-decode": "^3.1.2", |
| 58 | 64 | "lodash-es": "^4.17.21", |
| ... | ... | @@ -68,7 +74,7 @@ |
| 68 | 74 | "vditor": "^3.8.6", |
| 69 | 75 | "video.js": "^7.20.3", |
| 70 | 76 | "videojs-flvjs-es6": "^1.0.1", |
| 71 | - "vue": "3.2.31", | |
| 77 | + "vue": "3.3.4", | |
| 72 | 78 | "vue-i18n": "9.1.7", |
| 73 | 79 | "vue-json-pretty": "^2.0.4", |
| 74 | 80 | "vue-router": "^4.0.11", | ... | ... |
| ... | ... | @@ -12,11 +12,11 @@ export const getDeviceProfile = (deviceType?: string) => { |
| 12 | 12 | }; |
| 13 | 13 | |
| 14 | 14 | // 获取历史数据 |
| 15 | -export const getDeviceHistoryInfo = (params: Recordable) => { | |
| 15 | +export const getDeviceHistoryInfo = (params: Recordable, orderBy?: string) => { | |
| 16 | 16 | return defHttp.get<HistoryData>( |
| 17 | 17 | { |
| 18 | 18 | url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`, |
| 19 | - params: { ...params, entityId: null, orderBy: 'ASC' }, | |
| 19 | + params: { ...params, entityId: null, orderBy: orderBy || 'DESC' }, | |
| 20 | 20 | }, |
| 21 | 21 | { |
| 22 | 22 | joinPrefix: false, | ... | ... |
| ... | ... | @@ -85,7 +85,7 @@ interface TrendParamsType { |
| 85 | 85 | } |
| 86 | 86 | // 获取租户趋势或者客户趋势数据 |
| 87 | 87 | export const getTrendData = (params: TrendParamsType) => { |
| 88 | - return defHttp.get({ | |
| 88 | + return defHttp.get<Record<'date' | 'value', string>[]>({ | |
| 89 | 89 | url: HomeEnum.TrendAPI, |
| 90 | 90 | params, |
| 91 | 91 | }); | ... | ... |
| 1 | -import { defHttp } from '/@/utils/http/axios'; | |
| 2 | -import { | |
| 3 | - TDeviceConfigParams, | |
| 4 | - IDeviceConfigAddOrEditModel, | |
| 5 | - ProfileRecord, | |
| 6 | - RuleChainRecord, | |
| 7 | -} from '/@/api/device/model/deviceConfigModel'; | |
| 8 | -import { PaginationResult } from '/#/axios'; | |
| 9 | - | |
| 10 | -enum EDeviceConfigApi { | |
| 11 | - /** | |
| 12 | - * 设备配置URL | |
| 13 | - */ | |
| 14 | - DEVICE_CONFIG_GET_PAGE = '/device_profile', | |
| 15 | - DEVICE_CONFIG_POST_ADD_OR_EDIT = '/device_profile', | |
| 16 | - DEVICE_CONFIG_GET_DETAIL = '/device_profile/', | |
| 17 | - DEVICE_CONFIG_DELETE = '/device_profile', | |
| 18 | - DEVICE_CONFIG_GET_RULECHAIN = '/rule_chain/me/list', | |
| 19 | - ALARM_CONTACT_GET_PAGE = '/alarm_contact', | |
| 20 | - DEVICE_CONFIG_EXPORT = '/device_profile/export', | |
| 21 | - DEVICE_CONFIG_IMPORT = '/device_profile/import', | |
| 22 | - SET_DEVICE_ISDEFAULT = '/deviceProfile', | |
| 23 | - FRP_API = '/frp/', | |
| 24 | - GET_TB_DEVICE_ID = '/device/get_subset', | |
| 25 | - COMMODRECORD = '/rpc', | |
| 26 | -} | |
| 27 | - | |
| 28 | -/** | |
| 29 | - * 设备配置详情 | |
| 30 | - */ | |
| 31 | -export const deviceConfigGetDetail = (id: string) => { | |
| 32 | - return defHttp.get({ | |
| 33 | - url: `${EDeviceConfigApi.DEVICE_CONFIG_GET_DETAIL}${id}`, | |
| 34 | - }); | |
| 35 | -}; | |
| 36 | - | |
| 37 | -/** | |
| 38 | - * 获取规则链 | |
| 39 | - */ | |
| 40 | -export const deviceConfigGetRuleChain = () => { | |
| 41 | - return defHttp.get<RuleChainRecord[]>({ | |
| 42 | - url: EDeviceConfigApi.DEVICE_CONFIG_GET_RULECHAIN, | |
| 43 | - }); | |
| 44 | -}; | |
| 45 | - | |
| 46 | -/** | |
| 47 | - * 获取告警联系人 | |
| 48 | - */ | |
| 49 | -export const alarmContactGetPage = () => { | |
| 50 | - return defHttp.get({ | |
| 51 | - url: `${EDeviceConfigApi.ALARM_CONTACT_GET_PAGE}?page=1&pageSize=10`, | |
| 52 | - }); | |
| 53 | -}; | |
| 54 | - | |
| 55 | -/** | |
| 56 | - * 分页查询设备配置页面 | |
| 57 | - */ | |
| 58 | -export const deviceConfigGetQuery = (params?: TDeviceConfigParams) => { | |
| 59 | - return defHttp.get<PaginationResult<ProfileRecord>>({ | |
| 60 | - url: EDeviceConfigApi.DEVICE_CONFIG_GET_PAGE, | |
| 61 | - params, | |
| 62 | - }); | |
| 63 | -}; | |
| 64 | - | |
| 65 | -/** | |
| 66 | - * 新增或者编辑设备配置 | |
| 67 | - | |
| 68 | - */ | |
| 69 | -export const deviceConfigAddOrEdit = (params: IDeviceConfigAddOrEditModel) => { | |
| 70 | - return defHttp.post<IDeviceConfigAddOrEditModel>({ | |
| 71 | - url: EDeviceConfigApi.DEVICE_CONFIG_POST_ADD_OR_EDIT, | |
| 72 | - params, | |
| 73 | - }); | |
| 74 | -}; | |
| 75 | - | |
| 76 | -/** | |
| 77 | - * 删除设备配置 | |
| 78 | - */ | |
| 79 | -export const deviceConfigDelete = (ids: string[]) => { | |
| 80 | - return defHttp.delete({ | |
| 81 | - url: EDeviceConfigApi.DEVICE_CONFIG_DELETE, | |
| 82 | - data: { | |
| 83 | - ids, | |
| 84 | - }, | |
| 85 | - }); | |
| 86 | -}; | |
| 87 | - | |
| 88 | -/** | |
| 89 | - * 导出设备配置 | |
| 90 | - */ | |
| 91 | -export const deviceConfigExport = (params: IDeviceConfigAddOrEditModel) => { | |
| 92 | - return defHttp.post<IDeviceConfigAddOrEditModel>({ | |
| 93 | - url: EDeviceConfigApi.DEVICE_CONFIG_EXPORT, | |
| 94 | - params, | |
| 95 | - }); | |
| 96 | -}; | |
| 97 | - | |
| 98 | -/** | |
| 99 | - * 导入设备配置 | |
| 100 | - */ | |
| 101 | -export const deviceConfigImport = (params: IDeviceConfigAddOrEditModel) => { | |
| 102 | - return defHttp.post<IDeviceConfigAddOrEditModel>({ | |
| 103 | - url: EDeviceConfigApi.DEVICE_CONFIG_IMPORT, | |
| 104 | - params, | |
| 105 | - }); | |
| 106 | -}; | |
| 107 | - | |
| 108 | -/** | |
| 109 | - * | |
| 110 | - * 设置该设备配置为默认 | |
| 111 | - */ | |
| 112 | -export const setDeviceProfileIsDefaultApi = (id: string, v, params?: {}) => { | |
| 113 | - return defHttp.post( | |
| 114 | - { | |
| 115 | - url: EDeviceConfigApi.SET_DEVICE_ISDEFAULT + '/' + id + '/' + v, | |
| 116 | - params, | |
| 117 | - }, | |
| 118 | - { | |
| 119 | - joinPrefix: false, | |
| 120 | - } | |
| 121 | - ); | |
| 122 | -}; | |
| 123 | - | |
| 124 | -/** | |
| 125 | - * Frp内网穿透信息API | |
| 126 | - */ | |
| 127 | -export const frpGetInfoApi = (proxyName: string) => { | |
| 128 | - return defHttp.get({ | |
| 129 | - url: `${EDeviceConfigApi.FRP_API}${proxyName}`, | |
| 130 | - }); | |
| 131 | -}; | |
| 132 | - | |
| 133 | -export const frpPutInfoApi = (proxyName: string, enableRemote: number) => { | |
| 134 | - return defHttp.put({ | |
| 135 | - url: `${EDeviceConfigApi.FRP_API}${proxyName}/${enableRemote}`, | |
| 136 | - }); | |
| 137 | -}; | |
| 138 | - | |
| 139 | -export const getTbDeviceId = (params: string) => { | |
| 140 | - return defHttp.get({ | |
| 141 | - url: `${EDeviceConfigApi.GET_TB_DEVICE_ID}/${params}`, | |
| 142 | - }); | |
| 143 | -}; | |
| 144 | - | |
| 145 | -/** | |
| 146 | - * 命令下发记录 | |
| 147 | - */ | |
| 148 | -export const deviceCommandRecordGetQuery = (params?: TDeviceConfigParams) => { | |
| 149 | - return defHttp.get({ | |
| 150 | - url: EDeviceConfigApi.COMMODRECORD, | |
| 151 | - params, | |
| 152 | - }); | |
| 153 | -}; | |
| 1 | +import { defHttp } from '/@/utils/http/axios'; | |
| 2 | +import { | |
| 3 | + TDeviceConfigParams, | |
| 4 | + IDeviceConfigAddOrEditModel, | |
| 5 | + ProfileRecord, | |
| 6 | + RuleChainRecord, | |
| 7 | + DeviceProfileDetail, | |
| 8 | +} from '/@/api/device/model/deviceConfigModel'; | |
| 9 | +import { PaginationResult } from '/#/axios'; | |
| 10 | + | |
| 11 | +enum EDeviceConfigApi { | |
| 12 | + /** | |
| 13 | + * 设备配置URL | |
| 14 | + */ | |
| 15 | + DEVICE_CONFIG_GET_PAGE = '/device_profile', | |
| 16 | + DEVICE_CONFIG_POST_ADD_OR_EDIT = '/device_profile', | |
| 17 | + DEVICE_CONFIG_GET_DETAIL = '/device_profile/', | |
| 18 | + DEVICE_CONFIG_DELETE = '/device_profile', | |
| 19 | + DEVICE_CONFIG_GET_RULECHAIN = '/rule_chain/me/list', | |
| 20 | + ALARM_CONTACT_GET_PAGE = '/alarm_contact', | |
| 21 | + DEVICE_CONFIG_EXPORT = '/device_profile/export', | |
| 22 | + DEVICE_CONFIG_IMPORT = '/device_profile/import', | |
| 23 | + SET_DEVICE_ISDEFAULT = '/deviceProfile', | |
| 24 | + FRP_API = '/frp/', | |
| 25 | + GET_TB_DEVICE_ID = '/device/get_subset', | |
| 26 | + COMMODRECORD = '/rpc', | |
| 27 | +} | |
| 28 | + | |
| 29 | +/** | |
| 30 | + * 设备配置详情 | |
| 31 | + */ | |
| 32 | +export const deviceConfigGetDetail = (id: string) => { | |
| 33 | + return defHttp.get<DeviceProfileDetail>({ | |
| 34 | + url: `${EDeviceConfigApi.DEVICE_CONFIG_GET_DETAIL}${id}`, | |
| 35 | + }); | |
| 36 | +}; | |
| 37 | + | |
| 38 | +/** | |
| 39 | + * 获取规则链 | |
| 40 | + */ | |
| 41 | +export const deviceConfigGetRuleChain = () => { | |
| 42 | + return defHttp.get<RuleChainRecord[]>({ | |
| 43 | + url: EDeviceConfigApi.DEVICE_CONFIG_GET_RULECHAIN, | |
| 44 | + }); | |
| 45 | +}; | |
| 46 | + | |
| 47 | +/** | |
| 48 | + * 获取告警联系人 | |
| 49 | + */ | |
| 50 | +export const alarmContactGetPage = () => { | |
| 51 | + return defHttp.get({ | |
| 52 | + url: `${EDeviceConfigApi.ALARM_CONTACT_GET_PAGE}?page=1&pageSize=10`, | |
| 53 | + }); | |
| 54 | +}; | |
| 55 | + | |
| 56 | +/** | |
| 57 | + * 分页查询设备配置页面 | |
| 58 | + */ | |
| 59 | +export const deviceConfigGetQuery = (params?: TDeviceConfigParams) => { | |
| 60 | + return defHttp.get<PaginationResult<ProfileRecord>>({ | |
| 61 | + url: EDeviceConfigApi.DEVICE_CONFIG_GET_PAGE, | |
| 62 | + params, | |
| 63 | + }); | |
| 64 | +}; | |
| 65 | + | |
| 66 | +/** | |
| 67 | + * 新增或者编辑设备配置 | |
| 68 | + | |
| 69 | + */ | |
| 70 | +export const deviceConfigAddOrEdit = (params: IDeviceConfigAddOrEditModel) => { | |
| 71 | + return defHttp.post<IDeviceConfigAddOrEditModel>({ | |
| 72 | + url: EDeviceConfigApi.DEVICE_CONFIG_POST_ADD_OR_EDIT, | |
| 73 | + params, | |
| 74 | + }); | |
| 75 | +}; | |
| 76 | + | |
| 77 | +/** | |
| 78 | + * 删除设备配置 | |
| 79 | + */ | |
| 80 | +export const deviceConfigDelete = (ids: string[]) => { | |
| 81 | + return defHttp.delete({ | |
| 82 | + url: EDeviceConfigApi.DEVICE_CONFIG_DELETE, | |
| 83 | + data: { | |
| 84 | + ids, | |
| 85 | + }, | |
| 86 | + }); | |
| 87 | +}; | |
| 88 | + | |
| 89 | +/** | |
| 90 | + * 导出设备配置 | |
| 91 | + */ | |
| 92 | +export const deviceConfigExport = (params: IDeviceConfigAddOrEditModel) => { | |
| 93 | + return defHttp.post<IDeviceConfigAddOrEditModel>({ | |
| 94 | + url: EDeviceConfigApi.DEVICE_CONFIG_EXPORT, | |
| 95 | + params, | |
| 96 | + }); | |
| 97 | +}; | |
| 98 | + | |
| 99 | +/** | |
| 100 | + * 导入设备配置 | |
| 101 | + */ | |
| 102 | +export const deviceConfigImport = (params: IDeviceConfigAddOrEditModel) => { | |
| 103 | + return defHttp.post<IDeviceConfigAddOrEditModel>({ | |
| 104 | + url: EDeviceConfigApi.DEVICE_CONFIG_IMPORT, | |
| 105 | + params, | |
| 106 | + }); | |
| 107 | +}; | |
| 108 | + | |
| 109 | +/** | |
| 110 | + * | |
| 111 | + * 设置该设备配置为默认 | |
| 112 | + */ | |
| 113 | +export const setDeviceProfileIsDefaultApi = (id: string, v, params?: {}) => { | |
| 114 | + return defHttp.post( | |
| 115 | + { | |
| 116 | + url: EDeviceConfigApi.SET_DEVICE_ISDEFAULT + '/' + id + '/' + v, | |
| 117 | + params, | |
| 118 | + }, | |
| 119 | + { | |
| 120 | + joinPrefix: false, | |
| 121 | + } | |
| 122 | + ); | |
| 123 | +}; | |
| 124 | + | |
| 125 | +/** | |
| 126 | + * Frp内网穿透信息API | |
| 127 | + */ | |
| 128 | +export const frpGetInfoApi = (proxyName: string) => { | |
| 129 | + return defHttp.get({ | |
| 130 | + url: `${EDeviceConfigApi.FRP_API}${proxyName}`, | |
| 131 | + }); | |
| 132 | +}; | |
| 133 | + | |
| 134 | +export const frpPutInfoApi = (proxyName: string, enableRemote: number) => { | |
| 135 | + return defHttp.put({ | |
| 136 | + url: `${EDeviceConfigApi.FRP_API}${proxyName}/${enableRemote}`, | |
| 137 | + }); | |
| 138 | +}; | |
| 139 | + | |
| 140 | +export const getTbDeviceId = (params: string) => { | |
| 141 | + return defHttp.get({ | |
| 142 | + url: `${EDeviceConfigApi.GET_TB_DEVICE_ID}/${params}`, | |
| 143 | + }); | |
| 144 | +}; | |
| 145 | + | |
| 146 | +/** | |
| 147 | + * 命令下发记录 | |
| 148 | + */ | |
| 149 | +export const deviceCommandRecordGetQuery = (params?: TDeviceConfigParams) => { | |
| 150 | + return defHttp.get({ | |
| 151 | + url: EDeviceConfigApi.COMMODRECORD, | |
| 152 | + params, | |
| 153 | + }); | |
| 154 | +}; | ... | ... |
| ... | ... | @@ -28,6 +28,10 @@ enum DeviceManagerApi { |
| 28 | 28 | |
| 29 | 29 | DEVICE_ALARM_URL = '/alarm', |
| 30 | 30 | |
| 31 | + ALARM_BATCH_ACK = '/alarm/batch/ack', | |
| 32 | + | |
| 33 | + ALARM_BATCH_CLEAR = '/alarm/batch/clear', | |
| 34 | + | |
| 31 | 35 | DEVICE_CREDENTIALS = '/device/credentials', |
| 32 | 36 | |
| 33 | 37 | COMMAND_ISSUANCE = '/rpc', |
| ... | ... | @@ -346,3 +350,23 @@ export const getDevicesByDeviceIds = (ids: string[]) => { |
| 346 | 350 | data: ids, |
| 347 | 351 | }); |
| 348 | 352 | }; |
| 353 | + | |
| 354 | +export const doBatchAckAlarm = (ids: string[]) => { | |
| 355 | + return defHttp.post( | |
| 356 | + { | |
| 357 | + url: DeviceManagerApi.ALARM_BATCH_ACK, | |
| 358 | + data: { alarmIds: ids }, | |
| 359 | + }, | |
| 360 | + { joinPrefix: false } | |
| 361 | + ); | |
| 362 | +}; | |
| 363 | + | |
| 364 | +export const doBatchClearAlarm = (ids: string[]) => { | |
| 365 | + return defHttp.post( | |
| 366 | + { | |
| 367 | + url: DeviceManagerApi.ALARM_BATCH_CLEAR, | |
| 368 | + data: { alarmIds: ids }, | |
| 369 | + }, | |
| 370 | + { joinPrefix: false } | |
| 371 | + ); | |
| 372 | +}; | ... | ... |
| 1 | -import { BasicPageParams } from '/@/api/model/baseModel'; | |
| 2 | - | |
| 3 | -export type TDeviceConfigPageQueryParam = BasicPageParams & TDeviceConfigParams; | |
| 4 | - | |
| 5 | -export type TDeviceConfigParams = { | |
| 6 | - page?: any; | |
| 7 | - pageSize?: any; | |
| 8 | - name?: string; | |
| 9 | - transportType?: string; | |
| 10 | - orderFiled?: string; | |
| 11 | - orderType?: string; | |
| 12 | - tbDeviceId?: string; | |
| 13 | -}; | |
| 14 | - | |
| 15 | -export interface IDeviceConfigAddOrEditModel { | |
| 16 | - defaultQueueName?: string; //处理队列 | |
| 17 | - alarmProfile?: { | |
| 18 | - alarmContactId: string; | |
| 19 | - createTime: '2021-12-15T02:17:26.644Z'; | |
| 20 | - creator: string; | |
| 21 | - defaultConfig: string; | |
| 22 | - description: string; | |
| 23 | - deviceProfileId: string; | |
| 24 | - enabled: true; | |
| 25 | - icon: string; | |
| 26 | - id: string; | |
| 27 | - messageMode: string; | |
| 28 | - name: string; | |
| 29 | - roleIds: [string]; | |
| 30 | - tenantExpireTime: '2021-12-15T02:17:26.644Z'; | |
| 31 | - tenantId: string; | |
| 32 | - tenantStatus: 'DISABLED'; | |
| 33 | - updateTime: '2021-12-15T02:17:26.644Z'; | |
| 34 | - updater: string; | |
| 35 | - }; | |
| 36 | - convertJs?: string; | |
| 37 | - createTime?: '2021-12-15T02:17:26.644Z'; | |
| 38 | - creator?: string; | |
| 39 | - defaultConfig?: string; | |
| 40 | - defaultRuleChainId?: string; | |
| 41 | - description?: string; | |
| 42 | - enabled?: true; | |
| 43 | - icon?: string; | |
| 44 | - id?: string; | |
| 45 | - name?: string; | |
| 46 | - profileData?: { | |
| 47 | - configuration: {}; | |
| 48 | - transportConfiguration: {}; | |
| 49 | - provisionConfiguration: { | |
| 50 | - provisionDeviceSecret: string; | |
| 51 | - }; | |
| 52 | - //报警类型字段 | |
| 53 | - alarms: [ | |
| 54 | - { | |
| 55 | - id: 'highTemperatureAlarmID'; | |
| 56 | - alarmType: 'High Temperature Alarm'; | |
| 57 | - createRules: { | |
| 58 | - additionalProp1: { | |
| 59 | - condition: { | |
| 60 | - condition: [ | |
| 61 | - { | |
| 62 | - key: { | |
| 63 | - type: 'TIME_SERIES'; | |
| 64 | - key: 'temp'; | |
| 65 | - }; | |
| 66 | - valueType: 'NUMERIC'; | |
| 67 | - value: {}; | |
| 68 | - predicate: {}; | |
| 69 | - } | |
| 70 | - ]; | |
| 71 | - spec: {}; | |
| 72 | - }; | |
| 73 | - schedule: { | |
| 74 | - type: 'ANY_TIME'; | |
| 75 | - }; | |
| 76 | - alarmDetails: string; | |
| 77 | - dashboardId: { | |
| 78 | - id: '784f394c-42b6-435a-983c-b7beff2784f9'; | |
| 79 | - entityType: 'DASHBOARD'; | |
| 80 | - }; | |
| 81 | - }; | |
| 82 | - additionalProp2: { | |
| 83 | - condition: { | |
| 84 | - condition: [ | |
| 85 | - { | |
| 86 | - key: { | |
| 87 | - type: 'TIME_SERIES'; | |
| 88 | - key: 'temp'; | |
| 89 | - }; | |
| 90 | - valueType: 'NUMERIC'; | |
| 91 | - value: {}; | |
| 92 | - predicate: {}; | |
| 93 | - } | |
| 94 | - ]; | |
| 95 | - spec: {}; | |
| 96 | - }; | |
| 97 | - schedule: { | |
| 98 | - type: 'ANY_TIME'; | |
| 99 | - }; | |
| 100 | - alarmDetails: string; | |
| 101 | - dashboardId: { | |
| 102 | - id: '784f394c-42b6-435a-983c-b7beff2784f9'; | |
| 103 | - entityType: 'DASHBOARD'; | |
| 104 | - }; | |
| 105 | - }; | |
| 106 | - additionalProp3: { | |
| 107 | - condition: { | |
| 108 | - condition: [ | |
| 109 | - { | |
| 110 | - key: { | |
| 111 | - type: 'TIME_SERIES'; | |
| 112 | - key: 'temp'; | |
| 113 | - }; | |
| 114 | - valueType: 'NUMERIC'; | |
| 115 | - value: {}; | |
| 116 | - predicate: {}; | |
| 117 | - } | |
| 118 | - ]; | |
| 119 | - spec: {}; | |
| 120 | - }; | |
| 121 | - schedule: { | |
| 122 | - type: 'ANY_TIME'; | |
| 123 | - }; | |
| 124 | - alarmDetails: string; | |
| 125 | - dashboardId: { | |
| 126 | - id: '784f394c-42b6-435a-983c-b7beff2784f9'; | |
| 127 | - entityType: 'DASHBOARD'; | |
| 128 | - }; | |
| 129 | - }; | |
| 130 | - }; | |
| 131 | - clearRule: { | |
| 132 | - condition: { | |
| 133 | - condition: [ | |
| 134 | - { | |
| 135 | - key: { | |
| 136 | - type: 'TIME_SERIES'; | |
| 137 | - key: 'temp'; | |
| 138 | - }; | |
| 139 | - valueType: 'NUMERIC'; | |
| 140 | - value: {}; | |
| 141 | - predicate: {}; | |
| 142 | - } | |
| 143 | - ]; | |
| 144 | - spec: {}; | |
| 145 | - }; | |
| 146 | - schedule: { | |
| 147 | - type: 'ANY_TIME'; | |
| 148 | - }; | |
| 149 | - alarmDetails: string; | |
| 150 | - dashboardId: { | |
| 151 | - id: '784f394c-42b6-435a-983c-b7beff2784f9'; | |
| 152 | - entityType: 'DASHBOARD'; | |
| 153 | - }; | |
| 154 | - }; | |
| 155 | - propagate: true; | |
| 156 | - propagateRelationTypes: [string]; | |
| 157 | - } | |
| 158 | - ]; | |
| 159 | - }; | |
| 160 | - roleIds?: [string]; | |
| 161 | - tbProfileId?: string; | |
| 162 | - tenantExpireTime?: '2021-12-15T02:17:26.645Z'; | |
| 163 | - tenantId?: string; | |
| 164 | - tenantStatus?: 'DISABLED'; | |
| 165 | - transportType?: string; | |
| 166 | - updateTime?: '2021-12-15T02:17:26.645Z'; | |
| 167 | - updater?: string; | |
| 168 | -} | |
| 169 | - | |
| 170 | -export interface Data { | |
| 171 | - CO: number; | |
| 172 | -} | |
| 173 | - | |
| 174 | -export interface Details { | |
| 175 | - data: Data; | |
| 176 | -} | |
| 177 | - | |
| 178 | -export interface AlarmLogItem { | |
| 179 | - id: string; | |
| 180 | - tenantId: string; | |
| 181 | - creator?: any; | |
| 182 | - updater?: any; | |
| 183 | - createdTime: string; | |
| 184 | - updatedTime: string; | |
| 185 | - customerId: string; | |
| 186 | - tbDeviceId: string; | |
| 187 | - originatorType: number; | |
| 188 | - deviceId: string; | |
| 189 | - deviceName: string; | |
| 190 | - type: string; | |
| 191 | - severity: string; | |
| 192 | - status: string; | |
| 193 | - startTs: string; | |
| 194 | - endTs: string; | |
| 195 | - ackTs: string; | |
| 196 | - clearTs: string; | |
| 197 | - details: Details; | |
| 198 | - propagate: boolean; | |
| 199 | - propagateRelationTypes?: any; | |
| 200 | - organizationId: string; | |
| 201 | - organizationName: string; | |
| 202 | -} | |
| 203 | - | |
| 204 | -export interface Configuration { | |
| 205 | - type: string; | |
| 206 | -} | |
| 207 | - | |
| 208 | -export interface TransportConfiguration { | |
| 209 | - type: string; | |
| 210 | -} | |
| 211 | - | |
| 212 | -export interface ProvisionConfiguration { | |
| 213 | - type: string; | |
| 214 | - provisionDeviceSecret?: any; | |
| 215 | -} | |
| 216 | - | |
| 217 | -export interface ProfileData { | |
| 218 | - configuration: Configuration; | |
| 219 | - transportConfiguration: TransportConfiguration; | |
| 220 | - provisionConfiguration: ProvisionConfiguration; | |
| 221 | - alarms?: any; | |
| 222 | -} | |
| 223 | - | |
| 224 | -export interface ProfileRecord { | |
| 225 | - id: string; | |
| 226 | - creator: string; | |
| 227 | - createTime: string; | |
| 228 | - updater: string; | |
| 229 | - updateTime: string; | |
| 230 | - name: string; | |
| 231 | - tenantId: string; | |
| 232 | - transportType: string; | |
| 233 | - provisionType: string; | |
| 234 | - deviceType: string; | |
| 235 | - tbProfileId: string; | |
| 236 | - profileData: ProfileData; | |
| 237 | - defaultRuleChainId: string; | |
| 238 | - defaultQueueName: string; | |
| 239 | - image: string; | |
| 240 | - type: string; | |
| 241 | - default: boolean; | |
| 242 | - | |
| 243 | - checked?: boolean; | |
| 244 | -} | |
| 245 | - | |
| 246 | -export interface IDRecord { | |
| 247 | - entityType: string; | |
| 248 | - id: string; | |
| 249 | -} | |
| 250 | - | |
| 251 | -export interface RuleChainRecord { | |
| 252 | - id: IDRecord; | |
| 253 | - createdTime: number; | |
| 254 | - additionalInfo?: any; | |
| 255 | - tenantId: IDRecord; | |
| 256 | - name: string; | |
| 257 | - type: string; | |
| 258 | - firstRuleNodeId: IDRecord; | |
| 259 | - root: boolean; | |
| 260 | - debugMode: boolean; | |
| 261 | - configuration?: any; | |
| 262 | -} | |
| 1 | +import { BasicPageParams } from '/@/api/model/baseModel'; | |
| 2 | + | |
| 3 | +export type TDeviceConfigPageQueryParam = BasicPageParams & TDeviceConfigParams; | |
| 4 | + | |
| 5 | +export type TDeviceConfigParams = { | |
| 6 | + page?: any; | |
| 7 | + pageSize?: any; | |
| 8 | + name?: string; | |
| 9 | + transportType?: string; | |
| 10 | + orderFiled?: string; | |
| 11 | + orderType?: string; | |
| 12 | + tbDeviceId?: string; | |
| 13 | +}; | |
| 14 | + | |
| 15 | +export interface IDeviceConfigAddOrEditModel { | |
| 16 | + defaultQueueName?: string; //处理队列 | |
| 17 | + alarmProfile?: { | |
| 18 | + alarmContactId: string; | |
| 19 | + createTime: '2021-12-15T02:17:26.644Z'; | |
| 20 | + creator: string; | |
| 21 | + defaultConfig: string; | |
| 22 | + description: string; | |
| 23 | + deviceProfileId: string; | |
| 24 | + enabled: true; | |
| 25 | + icon: string; | |
| 26 | + id: string; | |
| 27 | + messageMode: string; | |
| 28 | + name: string; | |
| 29 | + roleIds: [string]; | |
| 30 | + tenantExpireTime: '2021-12-15T02:17:26.644Z'; | |
| 31 | + tenantId: string; | |
| 32 | + tenantStatus: 'DISABLED'; | |
| 33 | + updateTime: '2021-12-15T02:17:26.644Z'; | |
| 34 | + updater: string; | |
| 35 | + }; | |
| 36 | + convertJs?: string; | |
| 37 | + createTime?: '2021-12-15T02:17:26.644Z'; | |
| 38 | + creator?: string; | |
| 39 | + defaultConfig?: string; | |
| 40 | + defaultRuleChainId?: string; | |
| 41 | + description?: string; | |
| 42 | + enabled?: true; | |
| 43 | + icon?: string; | |
| 44 | + id?: string; | |
| 45 | + name?: string; | |
| 46 | + profileData?: { | |
| 47 | + configuration: {}; | |
| 48 | + transportConfiguration: {}; | |
| 49 | + provisionConfiguration: { | |
| 50 | + provisionDeviceSecret: string; | |
| 51 | + }; | |
| 52 | + //报警类型字段 | |
| 53 | + alarms: [ | |
| 54 | + { | |
| 55 | + id: 'highTemperatureAlarmID'; | |
| 56 | + alarmType: 'High Temperature Alarm'; | |
| 57 | + createRules: { | |
| 58 | + additionalProp1: { | |
| 59 | + condition: { | |
| 60 | + condition: [ | |
| 61 | + { | |
| 62 | + key: { | |
| 63 | + type: 'TIME_SERIES'; | |
| 64 | + key: 'temp'; | |
| 65 | + }; | |
| 66 | + valueType: 'NUMERIC'; | |
| 67 | + value: {}; | |
| 68 | + predicate: {}; | |
| 69 | + } | |
| 70 | + ]; | |
| 71 | + spec: {}; | |
| 72 | + }; | |
| 73 | + schedule: { | |
| 74 | + type: 'ANY_TIME'; | |
| 75 | + }; | |
| 76 | + alarmDetails: string; | |
| 77 | + dashboardId: { | |
| 78 | + id: '784f394c-42b6-435a-983c-b7beff2784f9'; | |
| 79 | + entityType: 'DASHBOARD'; | |
| 80 | + }; | |
| 81 | + }; | |
| 82 | + additionalProp2: { | |
| 83 | + condition: { | |
| 84 | + condition: [ | |
| 85 | + { | |
| 86 | + key: { | |
| 87 | + type: 'TIME_SERIES'; | |
| 88 | + key: 'temp'; | |
| 89 | + }; | |
| 90 | + valueType: 'NUMERIC'; | |
| 91 | + value: {}; | |
| 92 | + predicate: {}; | |
| 93 | + } | |
| 94 | + ]; | |
| 95 | + spec: {}; | |
| 96 | + }; | |
| 97 | + schedule: { | |
| 98 | + type: 'ANY_TIME'; | |
| 99 | + }; | |
| 100 | + alarmDetails: string; | |
| 101 | + dashboardId: { | |
| 102 | + id: '784f394c-42b6-435a-983c-b7beff2784f9'; | |
| 103 | + entityType: 'DASHBOARD'; | |
| 104 | + }; | |
| 105 | + }; | |
| 106 | + additionalProp3: { | |
| 107 | + condition: { | |
| 108 | + condition: [ | |
| 109 | + { | |
| 110 | + key: { | |
| 111 | + type: 'TIME_SERIES'; | |
| 112 | + key: 'temp'; | |
| 113 | + }; | |
| 114 | + valueType: 'NUMERIC'; | |
| 115 | + value: {}; | |
| 116 | + predicate: {}; | |
| 117 | + } | |
| 118 | + ]; | |
| 119 | + spec: {}; | |
| 120 | + }; | |
| 121 | + schedule: { | |
| 122 | + type: 'ANY_TIME'; | |
| 123 | + }; | |
| 124 | + alarmDetails: string; | |
| 125 | + dashboardId: { | |
| 126 | + id: '784f394c-42b6-435a-983c-b7beff2784f9'; | |
| 127 | + entityType: 'DASHBOARD'; | |
| 128 | + }; | |
| 129 | + }; | |
| 130 | + }; | |
| 131 | + clearRule: { | |
| 132 | + condition: { | |
| 133 | + condition: [ | |
| 134 | + { | |
| 135 | + key: { | |
| 136 | + type: 'TIME_SERIES'; | |
| 137 | + key: 'temp'; | |
| 138 | + }; | |
| 139 | + valueType: 'NUMERIC'; | |
| 140 | + value: {}; | |
| 141 | + predicate: {}; | |
| 142 | + } | |
| 143 | + ]; | |
| 144 | + spec: {}; | |
| 145 | + }; | |
| 146 | + schedule: { | |
| 147 | + type: 'ANY_TIME'; | |
| 148 | + }; | |
| 149 | + alarmDetails: string; | |
| 150 | + dashboardId: { | |
| 151 | + id: '784f394c-42b6-435a-983c-b7beff2784f9'; | |
| 152 | + entityType: 'DASHBOARD'; | |
| 153 | + }; | |
| 154 | + }; | |
| 155 | + propagate: true; | |
| 156 | + propagateRelationTypes: [string]; | |
| 157 | + } | |
| 158 | + ]; | |
| 159 | + }; | |
| 160 | + roleIds?: [string]; | |
| 161 | + tbProfileId?: string; | |
| 162 | + tenantExpireTime?: '2021-12-15T02:17:26.645Z'; | |
| 163 | + tenantId?: string; | |
| 164 | + tenantStatus?: 'DISABLED'; | |
| 165 | + transportType?: string; | |
| 166 | + updateTime?: '2021-12-15T02:17:26.645Z'; | |
| 167 | + updater?: string; | |
| 168 | +} | |
| 169 | + | |
| 170 | +export interface Data { | |
| 171 | + CO: number; | |
| 172 | +} | |
| 173 | + | |
| 174 | +export interface Details { | |
| 175 | + data: Data; | |
| 176 | +} | |
| 177 | + | |
| 178 | +export interface AlarmLogItem { | |
| 179 | + id: string; | |
| 180 | + tenantId: string; | |
| 181 | + creator?: any; | |
| 182 | + updater?: any; | |
| 183 | + createdTime: string; | |
| 184 | + updatedTime: string; | |
| 185 | + customerId: string; | |
| 186 | + tbDeviceId: string; | |
| 187 | + originatorType: number; | |
| 188 | + deviceId: string; | |
| 189 | + deviceName: string; | |
| 190 | + type: string; | |
| 191 | + severity: string; | |
| 192 | + status: string; | |
| 193 | + startTs: string; | |
| 194 | + endTs: string; | |
| 195 | + ackTs: string; | |
| 196 | + clearTs: string; | |
| 197 | + details: Details; | |
| 198 | + propagate: boolean; | |
| 199 | + propagateRelationTypes?: any; | |
| 200 | + organizationId: string; | |
| 201 | + organizationName: string; | |
| 202 | +} | |
| 203 | + | |
| 204 | +export interface Configuration { | |
| 205 | + type: string; | |
| 206 | +} | |
| 207 | + | |
| 208 | +export interface TransportConfiguration { | |
| 209 | + type: string; | |
| 210 | +} | |
| 211 | + | |
| 212 | +export interface ProvisionConfiguration { | |
| 213 | + type: string; | |
| 214 | + provisionDeviceSecret?: any; | |
| 215 | +} | |
| 216 | + | |
| 217 | +export interface ProfileData { | |
| 218 | + configuration: Configuration; | |
| 219 | + transportConfiguration: TransportConfiguration; | |
| 220 | + provisionConfiguration: ProvisionConfiguration; | |
| 221 | + alarms?: any; | |
| 222 | +} | |
| 223 | + | |
| 224 | +export interface ProfileRecord { | |
| 225 | + id: string; | |
| 226 | + creator: string; | |
| 227 | + createTime: string; | |
| 228 | + updater: string; | |
| 229 | + updateTime: string; | |
| 230 | + name: string; | |
| 231 | + tenantId: string; | |
| 232 | + transportType: string; | |
| 233 | + provisionType: string; | |
| 234 | + deviceType: string; | |
| 235 | + tbProfileId: string; | |
| 236 | + profileData: ProfileData; | |
| 237 | + defaultRuleChainId: string; | |
| 238 | + defaultQueueName: string; | |
| 239 | + image: string; | |
| 240 | + type: string; | |
| 241 | + default: boolean; | |
| 242 | + | |
| 243 | + checked?: boolean; | |
| 244 | +} | |
| 245 | + | |
| 246 | +export interface IDRecord { | |
| 247 | + entityType: string; | |
| 248 | + id: string; | |
| 249 | +} | |
| 250 | + | |
| 251 | +export interface RuleChainRecord { | |
| 252 | + id: IDRecord; | |
| 253 | + createdTime: number; | |
| 254 | + additionalInfo?: any; | |
| 255 | + tenantId: IDRecord; | |
| 256 | + name: string; | |
| 257 | + type: string; | |
| 258 | + firstRuleNodeId: IDRecord; | |
| 259 | + root: boolean; | |
| 260 | + debugMode: boolean; | |
| 261 | + configuration?: any; | |
| 262 | +} | |
| 263 | + | |
| 264 | +export interface DeviceProfileDetail { | |
| 265 | + id: string; | |
| 266 | + creator: string; | |
| 267 | + createTime: string; | |
| 268 | + updater: string; | |
| 269 | + updateTime: string; | |
| 270 | + name: string; | |
| 271 | + description: string; | |
| 272 | + tenantId: string; | |
| 273 | + transportType: string; | |
| 274 | + provisionType: string; | |
| 275 | + deviceType: string; | |
| 276 | + tbProfileId: string; | |
| 277 | + profileData: ProfileData; | |
| 278 | + defaultQueueName: string; | |
| 279 | + type: string; | |
| 280 | + deviceCount: number; | |
| 281 | + default: boolean; | |
| 282 | +} | |
| 283 | + | |
| 284 | +export interface ProfileData { | |
| 285 | + configuration: Configuration; | |
| 286 | + transportConfiguration: TransportConfiguration; | |
| 287 | + provisionConfiguration: ProvisionConfiguration; | |
| 288 | + alarms: any; | |
| 289 | + thingsModel: any; | |
| 290 | +} | |
| 291 | + | |
| 292 | +export interface Configuration { | |
| 293 | + type: string; | |
| 294 | +} | |
| 295 | + | |
| 296 | +export interface TransportConfiguration { | |
| 297 | + type: string; | |
| 298 | +} | |
| 299 | + | |
| 300 | +export interface ProvisionConfiguration { | |
| 301 | + type: string; | |
| 302 | + provisionDeviceSecret: any; | |
| 303 | +} | ... | ... |
src/api/ruleChainDesigner/index.ts
0 → 100644
| 1 | +import { DeviceInfoItemType, DeviceTypeItem, PageParams, ScriptTestParams } from './model'; | |
| 2 | +import { TBPaginationResult } from '/#/axios'; | |
| 3 | +import { defHttp } from '/@/utils/http/axios'; | |
| 4 | + | |
| 5 | +enum Api { | |
| 6 | + GET_DEVICE_INFOS = '/tenant/deviceInfos', | |
| 7 | + GET_DEVICE_TYPE = '/device/types', | |
| 8 | + TENANT_QUEUE = '/tenant/queues', | |
| 9 | + TEST_SCRIPT = '/ruleChain/testScript', | |
| 10 | +} | |
| 11 | + | |
| 12 | +enum Entity { | |
| 13 | + DEVICES = '/tenant/devices', | |
| 14 | + ASSETS = '/tenant/assets', | |
| 15 | + ENTITY_VIEW = '/tenant/entityViews', | |
| 16 | + TENANT = '/tenant', | |
| 17 | + CUSTOMER = '/customers', | |
| 18 | + DASHBOARD = '/tenant/dashboards', | |
| 19 | + USER = '/users', | |
| 20 | + EDGE = '/tenant/edges', | |
| 21 | +} | |
| 22 | + | |
| 23 | +export const getDeviceInfos = () => { | |
| 24 | + return defHttp.get<TBPaginationResult<DeviceInfoItemType>>( | |
| 25 | + { | |
| 26 | + url: Api.GET_DEVICE_INFOS, | |
| 27 | + }, | |
| 28 | + { joinPrefix: false } | |
| 29 | + ); | |
| 30 | +}; | |
| 31 | + | |
| 32 | +export const getDeviceTypes = () => { | |
| 33 | + return defHttp.get<TBPaginationResult<DeviceTypeItem[]>>( | |
| 34 | + { | |
| 35 | + url: Api.GET_DEVICE_TYPE, | |
| 36 | + }, | |
| 37 | + { joinPrefix: false } | |
| 38 | + ); | |
| 39 | +}; | |
| 40 | + | |
| 41 | +export const getTenantQueue = (params: Recordable) => { | |
| 42 | + return defHttp.get<string[]>( | |
| 43 | + { | |
| 44 | + url: Api.TENANT_QUEUE, | |
| 45 | + params, | |
| 46 | + }, | |
| 47 | + { joinPrefix: false } | |
| 48 | + ); | |
| 49 | +}; | |
| 50 | + | |
| 51 | +export const getEntityDevice = (params: PageParams) => { | |
| 52 | + return defHttp.get( | |
| 53 | + { | |
| 54 | + url: Entity.DEVICES, | |
| 55 | + params, | |
| 56 | + }, | |
| 57 | + { | |
| 58 | + joinPrefix: false, | |
| 59 | + } | |
| 60 | + ); | |
| 61 | +}; | |
| 62 | + | |
| 63 | +export const getEntityAssets = (params: PageParams) => { | |
| 64 | + return defHttp.get( | |
| 65 | + { | |
| 66 | + url: Entity.ASSETS, | |
| 67 | + params, | |
| 68 | + }, | |
| 69 | + { | |
| 70 | + joinPrefix: false, | |
| 71 | + } | |
| 72 | + ); | |
| 73 | +}; | |
| 74 | + | |
| 75 | +export const getEntityViews = (params: PageParams) => { | |
| 76 | + return defHttp.get( | |
| 77 | + { | |
| 78 | + url: Entity.ENTITY_VIEW, | |
| 79 | + params, | |
| 80 | + }, | |
| 81 | + { | |
| 82 | + joinPrefix: false, | |
| 83 | + } | |
| 84 | + ); | |
| 85 | +}; | |
| 86 | + | |
| 87 | +export const getEntityTenant = (params: Record<'tenantId', string>) => { | |
| 88 | + return defHttp.get( | |
| 89 | + { | |
| 90 | + url: `${Entity.TENANT}/${params.tenantId}`, | |
| 91 | + params, | |
| 92 | + }, | |
| 93 | + { | |
| 94 | + joinPrefix: false, | |
| 95 | + } | |
| 96 | + ); | |
| 97 | +}; | |
| 98 | + | |
| 99 | +export const getEntityCustomer = (params: PageParams) => { | |
| 100 | + return defHttp.get( | |
| 101 | + { | |
| 102 | + url: Entity.CUSTOMER, | |
| 103 | + params, | |
| 104 | + }, | |
| 105 | + { | |
| 106 | + joinPrefix: false, | |
| 107 | + } | |
| 108 | + ); | |
| 109 | +}; | |
| 110 | + | |
| 111 | +export const getEntityUser = (params: PageParams) => { | |
| 112 | + return defHttp.get( | |
| 113 | + { | |
| 114 | + url: Entity.USER, | |
| 115 | + params, | |
| 116 | + }, | |
| 117 | + { | |
| 118 | + joinPrefix: false, | |
| 119 | + } | |
| 120 | + ); | |
| 121 | +}; | |
| 122 | + | |
| 123 | +export const getEntityDashboard = (params: PageParams) => { | |
| 124 | + return defHttp.get( | |
| 125 | + { | |
| 126 | + url: Entity.DASHBOARD, | |
| 127 | + params, | |
| 128 | + }, | |
| 129 | + { | |
| 130 | + joinPrefix: false, | |
| 131 | + } | |
| 132 | + ); | |
| 133 | +}; | |
| 134 | + | |
| 135 | +export const getEntityEdge = (params: PageParams) => { | |
| 136 | + return defHttp.get( | |
| 137 | + { | |
| 138 | + url: Entity.EDGE, | |
| 139 | + params, | |
| 140 | + }, | |
| 141 | + { | |
| 142 | + joinPrefix: false, | |
| 143 | + } | |
| 144 | + ); | |
| 145 | +}; | |
| 146 | + | |
| 147 | +export const testScript = (data: ScriptTestParams) => { | |
| 148 | + return defHttp.post<Record<'error' | 'output', string>>( | |
| 149 | + { | |
| 150 | + url: Api.TEST_SCRIPT, | |
| 151 | + data, | |
| 152 | + }, | |
| 153 | + { joinPrefix: false } | |
| 154 | + ); | |
| 155 | +}; | ... | ... |
src/api/ruleChainDesigner/model/index.ts
0 → 100644
| 1 | +export interface DeviceInfoItemType { | |
| 2 | + id: Id; | |
| 3 | + createdTime: number; | |
| 4 | + additionalInfo: AdditionalInfo; | |
| 5 | + tenantId: Id; | |
| 6 | + customerId: Id; | |
| 7 | + name: string; | |
| 8 | + type: string; | |
| 9 | + label: string; | |
| 10 | + deviceProfileId: Id; | |
| 11 | + deviceData: DeviceData; | |
| 12 | + firmwareId: any; | |
| 13 | + softwareId: any; | |
| 14 | + customerTitle: any; | |
| 15 | + customerIsPublic: boolean; | |
| 16 | + deviceProfileName: string; | |
| 17 | +} | |
| 18 | + | |
| 19 | +export interface Id { | |
| 20 | + entityType: string; | |
| 21 | + id: string; | |
| 22 | +} | |
| 23 | + | |
| 24 | +export interface DeviceData { | |
| 25 | + configuration: Configuration; | |
| 26 | + transportConfiguration: TransportConfiguration; | |
| 27 | +} | |
| 28 | + | |
| 29 | +export interface AdditionalInfo { | |
| 30 | + gateway: boolean; | |
| 31 | + description: string; | |
| 32 | + overwriteActivityTime: boolean; | |
| 33 | +} | |
| 34 | +export interface Configuration { | |
| 35 | + type: string; | |
| 36 | +} | |
| 37 | + | |
| 38 | +export interface TransportConfiguration { | |
| 39 | + type: string; | |
| 40 | +} | |
| 41 | + | |
| 42 | +export interface DeviceTypeItem { | |
| 43 | + tenantId: Id; | |
| 44 | + entityType: string; | |
| 45 | + type: string; | |
| 46 | +} | |
| 47 | + | |
| 48 | +export interface PageParams { | |
| 49 | + pageSize?: number; | |
| 50 | + page?: number; | |
| 51 | + textSearch?: string; | |
| 52 | + sortProperty?: string; | |
| 53 | + sortOrder?: string; | |
| 54 | +} | |
| 55 | + | |
| 56 | +export interface ScriptTestParams { | |
| 57 | + argNames?: string[]; | |
| 58 | + metadata?: Recordable; | |
| 59 | + msg?: string; | |
| 60 | + msgType?: string; | |
| 61 | + script?: string; | |
| 62 | + scriptType?: string; | |
| 63 | +} | ... | ... |
src/api/ruleDesigner/index.ts
0 → 100644
| 1 | +import { RuleChainPaginationItemType } from './model/type'; | |
| 2 | +import { TBPaginationResult } from '/#/axios'; | |
| 3 | +import { defHttp } from '/@/utils/http/axios'; | |
| 4 | +import { RuleChainDetail, RuleChainType } from '/@/views/rule/designer/types/ruleNode'; | |
| 5 | + | |
| 6 | +enum Api { | |
| 7 | + SAVE_RULE_CHAINS = '/ruleChain', | |
| 8 | + GET_RULE_CHAINS_DETAIL = '/ruleChain', | |
| 9 | + SAVE = '/ruleChain/metadata', | |
| 10 | + GET_RULE_CHAINES = '/ruleChains', | |
| 11 | + GET_RULE_NODE_EVENTS = '/events/RULE_NODE', | |
| 12 | +} | |
| 13 | + | |
| 14 | +export const saveRuleChainDetail = (params: Partial<RuleChainDetail>) => { | |
| 15 | + return defHttp.post<RuleChainDetail>( | |
| 16 | + { | |
| 17 | + url: Api.SAVE_RULE_CHAINS, | |
| 18 | + data: params, | |
| 19 | + }, | |
| 20 | + { joinPrefix: false } | |
| 21 | + ); | |
| 22 | +}; | |
| 23 | + | |
| 24 | +export const getRuleChainDetail = (id: string) => { | |
| 25 | + return defHttp.get<RuleChainDetail>( | |
| 26 | + { | |
| 27 | + url: `${Api.GET_RULE_CHAINS_DETAIL}/${id}`, | |
| 28 | + }, | |
| 29 | + { joinPrefix: false } | |
| 30 | + ); | |
| 31 | +}; | |
| 32 | + | |
| 33 | +export const getRuleChainData = (id: string) => { | |
| 34 | + return defHttp.get<RuleChainType>( | |
| 35 | + { | |
| 36 | + url: `/ruleChain/${id}/metadata`, | |
| 37 | + }, | |
| 38 | + { joinPrefix: false } | |
| 39 | + ); | |
| 40 | +}; | |
| 41 | + | |
| 42 | +export const saveRuleChainData = (data: RuleChainType) => { | |
| 43 | + return defHttp.post( | |
| 44 | + { | |
| 45 | + url: Api.SAVE, | |
| 46 | + data, | |
| 47 | + }, | |
| 48 | + { joinPrefix: false } | |
| 49 | + ); | |
| 50 | +}; | |
| 51 | + | |
| 52 | +export const getRuleChains = (params: Recordable) => { | |
| 53 | + return defHttp.get<TBPaginationResult<RuleChainPaginationItemType>>( | |
| 54 | + { | |
| 55 | + url: Api.GET_RULE_CHAINES, | |
| 56 | + params, | |
| 57 | + }, | |
| 58 | + { | |
| 59 | + joinPrefix: false, | |
| 60 | + } | |
| 61 | + ); | |
| 62 | +}; | |
| 63 | + | |
| 64 | +export const getRuleNodeEventList = ( | |
| 65 | + ruleNodeId: string, | |
| 66 | + params: Recordable, | |
| 67 | + data: Recordable & Record<'eventType', string> | |
| 68 | +) => { | |
| 69 | + return defHttp.post<TBPaginationResult>( | |
| 70 | + { | |
| 71 | + url: `${Api.GET_RULE_NODE_EVENTS}/${ruleNodeId}`, | |
| 72 | + params, | |
| 73 | + data, | |
| 74 | + }, | |
| 75 | + { joinPrefix: false } | |
| 76 | + ); | |
| 77 | +}; | ... | ... |
src/api/ruleDesigner/model/type.ts
0 → 100644
| 1 | +export interface RuleChainPaginationItemType { | |
| 2 | + id: Id; | |
| 3 | + createdTime: number; | |
| 4 | + additionalInfo?: AdditionalInfo; | |
| 5 | + tenantId: Id; | |
| 6 | + name: string; | |
| 7 | + type: string; | |
| 8 | + firstRuleNodeId: Id; | |
| 9 | + root: boolean; | |
| 10 | + debugMode: boolean; | |
| 11 | + configuration: any; | |
| 12 | +} | |
| 13 | + | |
| 14 | +export interface Id { | |
| 15 | + entityType: string; | |
| 16 | + id: string; | |
| 17 | +} | |
| 18 | + | |
| 19 | +export interface AdditionalInfo { | |
| 20 | + description: string; | |
| 21 | +} | ... | ... |
| ... | ... | @@ -22,6 +22,8 @@ enum ScreenManagerApi { |
| 22 | 22 | GET_ATTRBUTELIST = '/device/attributes/', |
| 23 | 23 | ALARM_PROFILE = '/alarm/profile/', |
| 24 | 24 | MASTER_GET_DEVICE = '/device/list', |
| 25 | + RULE_CHAINS = '/ruleChains', | |
| 26 | + RULE_CHAIN = '/ruleChain', | |
| 25 | 27 | } |
| 26 | 28 | |
| 27 | 29 | /** |
| ... | ... | @@ -130,3 +132,83 @@ export const byOrganizationIdGetMasterDevice = (params: { |
| 130 | 132 | }); |
| 131 | 133 | }; |
| 132 | 134 | //TODO-fengtao |
| 135 | + | |
| 136 | +/** | |
| 137 | + * 分页查询规则链库 | |
| 138 | + */ | |
| 139 | + | |
| 140 | +export const getRuleChinsList = (params) => { | |
| 141 | + return defHttp.get( | |
| 142 | + { | |
| 143 | + url: `${ScreenManagerApi.RULE_CHAINS}`, | |
| 144 | + params, | |
| 145 | + }, | |
| 146 | + { joinPrefix: false } | |
| 147 | + ); | |
| 148 | +}; | |
| 149 | + | |
| 150 | +/** | |
| 151 | + * 新增规则链 | |
| 152 | + */ | |
| 153 | + | |
| 154 | +export const createRuleChine = (params) => { | |
| 155 | + return defHttp.post( | |
| 156 | + { | |
| 157 | + url: `${ScreenManagerApi.RULE_CHAIN}`, | |
| 158 | + params, | |
| 159 | + }, | |
| 160 | + { joinPrefix: false } | |
| 161 | + ); | |
| 162 | +}; | |
| 163 | + | |
| 164 | +export const importRuleChine = (params) => { | |
| 165 | + return defHttp.post( | |
| 166 | + { | |
| 167 | + url: `${ScreenManagerApi.RULE_CHAIN}/metadata`, | |
| 168 | + params, | |
| 169 | + }, | |
| 170 | + { joinPrefix: false } | |
| 171 | + ); | |
| 172 | +}; | |
| 173 | + | |
| 174 | +/** | |
| 175 | + * 删除规则链 | |
| 176 | + */ | |
| 177 | + | |
| 178 | +export const deleteRuleChine = (id) => { | |
| 179 | + return defHttp.delete( | |
| 180 | + { | |
| 181 | + url: `${ScreenManagerApi.RULE_CHAIN}/`, | |
| 182 | + params: id, | |
| 183 | + }, | |
| 184 | + { joinPrefix: false } | |
| 185 | + ); | |
| 186 | +}; | |
| 187 | + | |
| 188 | +/** | |
| 189 | + * 导出规则链 | |
| 190 | + */ | |
| 191 | + | |
| 192 | +export const exportRuleChine = (id) => { | |
| 193 | + return defHttp.get( | |
| 194 | + { | |
| 195 | + url: `${ScreenManagerApi.RULE_CHAIN}/`, | |
| 196 | + params: id + '/metadata', | |
| 197 | + }, | |
| 198 | + { joinPrefix: false } | |
| 199 | + ); | |
| 200 | +}; | |
| 201 | + | |
| 202 | +/** | |
| 203 | + * 设置根规则链接 | |
| 204 | + */ | |
| 205 | + | |
| 206 | +export const settingRootChine = (id) => { | |
| 207 | + return defHttp.post( | |
| 208 | + { | |
| 209 | + url: `${ScreenManagerApi.RULE_CHAIN}/`, | |
| 210 | + params: id + '/root', | |
| 211 | + }, | |
| 212 | + { joinPrefix: false } | |
| 213 | + ); | |
| 214 | +}; | ... | ... |
| ... | ... | @@ -34,6 +34,7 @@ enum Api { |
| 34 | 34 | GetAllRoleList = '/role/find/list', |
| 35 | 35 | BaseUserUrl = '/user', |
| 36 | 36 | BaseOrganization = '/organization', |
| 37 | + RESET_USER_PASSWORD = '/user/reset_password/', | |
| 37 | 38 | } |
| 38 | 39 | |
| 39 | 40 | export const getAccountInfo = (userId: string) => |
| ... | ... | @@ -172,3 +173,12 @@ export const resetPassword = (params: ChangeAccountParams) => |
| 172 | 173 | url: Api.BaseUserUrl + '/reset', |
| 173 | 174 | params: params, |
| 174 | 175 | }); |
| 176 | + | |
| 177 | +/** | |
| 178 | + * 清除密码 | |
| 179 | + * @param params | |
| 180 | + */ | |
| 181 | +export const clearUserPassword = (userId: string) => | |
| 182 | + defHttp.post({ | |
| 183 | + url: Api.RESET_USER_PASSWORD + userId, | |
| 184 | + }); | ... | ... |
src/assets/svg/account.svg
0 → 100644
| 1 | +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694516709762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18843" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M515.1 513.6m-429 0a429 429 0 1 0 858 0 429 429 0 1 0-858 0Z" fill="#0B6AE2" p-id="18844"></path><path d="M794.8 773.8C745.7 674.6 670.7 562.3 581 556.7c64.7-25.5 110.5-88.5 110.5-162.3 0-96.3-78.1-174.4-174.4-174.4s-174.4 78.1-174.4 174.4c0 73.7 45.8 136.8 110.5 162.3-90.6 5.7-166.1 120-215.2 220 69.6 73.3 168 119 277 119 110.5-0.1 210-46.9 279.8-121.9z" fill="#ffffff" p-id="18845"></path></svg> | |
| \ No newline at end of file | ... | ... |
src/assets/svg/mobile.svg
0 → 100644
| 1 | +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694516489379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6077" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1024Q0 1024 0 512T512 0q512 0 512 512T512 1024z" fill="#0B6AE2" p-id="6078"></path><path d="M672.814545 802.909091H350.72a81.454545 81.454545 0 0 1-81.454545-81.454546V302.545455a81.454545 81.454545 0 0 1 81.454545-81.454546h322.094545a81.454545 81.454545 0 0 1 81.454546 81.454546v418.90909a81.454545 81.454545 0 0 1-81.454546 81.454546z m-322.094545-512a11.636364 11.636364 0 0 0-11.636364 11.636364v418.90909a11.636364 11.636364 0 0 0 11.636364 11.636364h322.094545a11.636364 11.636364 0 0 0 11.636364-11.636364V302.545455a11.636364 11.636364 0 0 0-11.636364-11.636364z" fill="#FFFFFF" p-id="6079"></path><path d="M376.785455 560.407273m29.090909 0l212.247272 0q29.090909 0 29.090909 29.090909l0-0.232727q0 29.090909-29.090909 29.090909l-212.247272 0q-29.090909 0-29.090909-29.090909l0 0.232727q0-29.090909 29.090909-29.090909Z" fill="#FFFFFF" p-id="6080"></path><path d="M512 676.305455m-29.090909 0a29.090909 29.090909 0 1 0 58.181818 0 29.090909 29.090909 0 1 0-58.181818 0Z" fill="#FFFFFF" p-id="6081"></path></svg> | |
| \ No newline at end of file | ... | ... |
| 1 | 1 | <script lang="ts" setup> |
| 2 | - import { ref, watch } from 'vue'; | |
| 3 | - import JSONEditor, { JSONEditorOptions } from 'jsoneditor'; | |
| 4 | - import 'jsoneditor/dist/jsoneditor.min.css'; | |
| 5 | - import { unref } from 'vue'; | |
| 6 | - import { onMounted } from 'vue'; | |
| 7 | - import { computed } from '@vue/reactivity'; | |
| 8 | - import { onUnmounted } from 'vue'; | |
| 2 | + import { onMounted, computed, onUnmounted, unref, ref, watch } from 'vue'; | |
| 3 | + import { Tooltip } from 'ant-design-vue'; | |
| 4 | + import { Icon } from '/@/components/Icon'; | |
| 5 | + import { useFullscreen } from '@vueuse/core'; | |
| 6 | + import { isNumber, isObject, isString } from '/@/utils/is'; | |
| 7 | + import AceEditor, { Ace } from 'ace-builds'; | |
| 8 | + import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'; | |
| 9 | + import githubTheme from 'ace-builds/src-noconflict/theme-github?url'; | |
| 10 | + import 'ace-builds/src-noconflict/mode-json'; | |
| 9 | 11 | |
| 10 | 12 | enum EventEnum { |
| 11 | 13 | UPDATE_VALUE = 'update:value', |
| ... | ... | @@ -16,89 +18,134 @@ |
| 16 | 18 | |
| 17 | 19 | const props = withDefaults( |
| 18 | 20 | defineProps<{ |
| 19 | - value?: string; | |
| 20 | - options?: JSONEditorOptions; | |
| 21 | - height?: number; | |
| 21 | + value?: string | Recordable; | |
| 22 | + height?: number | string; | |
| 23 | + title?: string; | |
| 24 | + disabled?: boolean; | |
| 22 | 25 | }>(), |
| 23 | 26 | { |
| 24 | - options: () => | |
| 25 | - ({ | |
| 26 | - mode: 'code', | |
| 27 | - mainMenuBar: false, | |
| 28 | - statusBar: false, | |
| 29 | - } as JSONEditorOptions), | |
| 30 | 27 | height: 150, |
| 31 | 28 | } |
| 32 | 29 | ); |
| 33 | 30 | |
| 34 | 31 | const emit = defineEmits<{ |
| 35 | - (e: EventEnum.UPDATE_VALUE, value: any, instance?: JSONEditor): void; | |
| 36 | - (e: EventEnum.CHANGE, value: any, instance?: JSONEditor): void; | |
| 37 | - (e: EventEnum.BLUR, event: Event, instance?: JSONEditor): void; | |
| 38 | - (e: EventEnum.FOCUS, event: Event, instance?: JSONEditor): void; | |
| 32 | + (e: EventEnum.UPDATE_VALUE, value: any, instance?: Ace.Editor): void; | |
| 33 | + (e: EventEnum.CHANGE, value: any, instance?: Ace.Editor): void; | |
| 34 | + (e: EventEnum.BLUR, event: Event, instance?: Ace.Editor): void; | |
| 35 | + (e: EventEnum.FOCUS, event: Event, instance?: Ace.Editor): void; | |
| 39 | 36 | }>(); |
| 40 | 37 | |
| 41 | 38 | const jsonEditorElRef = ref<Nullable<any>>(); |
| 42 | 39 | |
| 43 | - const editoreRef = ref<JSONEditor>(); | |
| 40 | + const editoreRef = ref<Ace.Editor>(); | |
| 44 | 41 | |
| 45 | 42 | const isFocus = ref(false); |
| 46 | 43 | |
| 47 | - const handleChange = (value: any) => { | |
| 44 | + const handleOnChange = () => { | |
| 45 | + const value = get(); | |
| 48 | 46 | emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef)); |
| 49 | 47 | emit(EventEnum.CHANGE, value, unref(editoreRef)); |
| 50 | 48 | }; |
| 51 | 49 | |
| 52 | - const handleEmit = (event: Event, key: EventEnum) => { | |
| 53 | - emit(key as EventEnum[keyof EventEnum], event, unref(editoreRef)); | |
| 50 | + const handleOnBlur = (event: Event) => { | |
| 51 | + isFocus.value = false; | |
| 52 | + emit(EventEnum.BLUR, event, unref(editoreRef)); | |
| 54 | 53 | }; |
| 55 | 54 | |
| 56 | - const getOptions = computed(() => { | |
| 57 | - const { options } = props; | |
| 58 | - return { | |
| 59 | - ...options, | |
| 60 | - onChangeText: handleChange, | |
| 61 | - onBlur: (event: Event) => { | |
| 62 | - isFocus.value = false; | |
| 63 | - handleEmit(event, EventEnum.BLUR); | |
| 64 | - }, | |
| 65 | - onFocus: (event: Event) => { | |
| 66 | - isFocus.value = true; | |
| 67 | - handleEmit(event, EventEnum.FOCUS); | |
| 68 | - }, | |
| 69 | - } as JSONEditorOptions; | |
| 70 | - }); | |
| 55 | + const handleOnFocus = (event: Event) => { | |
| 56 | + isFocus.value = true; | |
| 57 | + emit(EventEnum.FOCUS, event, unref(editoreRef)); | |
| 58 | + }; | |
| 59 | + | |
| 60 | + const getFormatValue = (value: Recordable | string = '') => { | |
| 61 | + return isObject(value) ? JSON.stringify(value, null, 2) : value; | |
| 62 | + }; | |
| 71 | 63 | |
| 72 | 64 | const initialize = () => { |
| 73 | - editoreRef.value = new JSONEditor(unref(jsonEditorElRef), unref(getOptions)); | |
| 65 | + AceEditor.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl); | |
| 66 | + AceEditor.config.setModuleUrl('ace/theme/github', githubTheme); | |
| 67 | + const editor = AceEditor.edit(unref(jsonEditorElRef)!, { | |
| 68 | + mode: 'ace/mode/json', | |
| 69 | + }); | |
| 70 | + editor.setTheme('ace/theme/github'); | |
| 71 | + editor.setOptions({ | |
| 72 | + fontSize: 14, | |
| 73 | + }); | |
| 74 | + | |
| 75 | + editor.on('change', handleOnChange); | |
| 76 | + editor.on('blur', handleOnBlur); | |
| 77 | + editor.on('focus', handleOnFocus); | |
| 78 | + | |
| 79 | + editoreRef.value = editor; | |
| 80 | + unref(editoreRef)?.setValue(getFormatValue(props.value), 1); | |
| 81 | + unref(editoreRef)?.setReadOnly(props.disabled); | |
| 74 | 82 | }; |
| 75 | 83 | |
| 76 | 84 | watch( |
| 77 | 85 | () => props.value, |
| 78 | 86 | (target) => { |
| 87 | + // const position = unref(editoreRef)?.getCursorPosition(); | |
| 79 | 88 | if (unref(isFocus)) return; |
| 80 | - unref(editoreRef)?.setText(target || ''); | |
| 89 | + unref(editoreRef)?.setValue(getFormatValue(target)); | |
| 90 | + unref(editoreRef)?.clearSelection(); | |
| 91 | + // position && unref(editoreRef)?.moveCursorToPosition(position!); | |
| 81 | 92 | }, |
| 82 | 93 | { |
| 83 | 94 | immediate: true, |
| 84 | 95 | } |
| 85 | 96 | ); |
| 86 | 97 | |
| 98 | + watch( | |
| 99 | + () => props.disabled, | |
| 100 | + (value) => { | |
| 101 | + unref(editoreRef)?.setReadOnly(value); | |
| 102 | + } | |
| 103 | + ); | |
| 104 | + | |
| 87 | 105 | const get = (): string => { |
| 88 | - return unref(editoreRef)?.getText() || ''; | |
| 106 | + return unref(editoreRef)?.getValue() || ''; | |
| 89 | 107 | }; |
| 90 | 108 | |
| 91 | 109 | const set = (data: any) => { |
| 92 | - return unref(editoreRef)?.set(data); | |
| 110 | + return unref(editoreRef)?.setValue(getFormatValue(data)); | |
| 93 | 111 | }; |
| 94 | 112 | |
| 95 | 113 | onMounted(() => { |
| 96 | 114 | initialize(); |
| 97 | - unref(editoreRef)?.setText(props.value || ''); | |
| 115 | + unref(editoreRef)?.setValue(getFormatValue(props.value)); | |
| 98 | 116 | }); |
| 99 | 117 | |
| 100 | 118 | onUnmounted(() => { |
| 119 | + unref(editoreRef)?.off('change', handleOnChange); | |
| 120 | + unref(editoreRef)?.off('blur', handleOnBlur); | |
| 121 | + unref(editoreRef)?.off('focus', handleOnFocus); | |
| 101 | 122 | unref(editoreRef)?.destroy(); |
| 123 | + unref(editoreRef)?.container.remove(); | |
| 124 | + }); | |
| 125 | + | |
| 126 | + const handleFormat = () => { | |
| 127 | + const value = get(); | |
| 128 | + if (isString(value) && !value) return; | |
| 129 | + unref(editoreRef)?.setValue(JSON.stringify(JSON.parse(value), null, 2)); | |
| 130 | + unref(editoreRef)?.clearSelection(); | |
| 131 | + }; | |
| 132 | + | |
| 133 | + const handleCompress = () => { | |
| 134 | + const value = get(); | |
| 135 | + if (isString(value) && !value) return; | |
| 136 | + unref(editoreRef)?.setValue(JSON.stringify(JSON.parse(value))); | |
| 137 | + unref(editoreRef)?.clearSelection(); | |
| 138 | + }; | |
| 139 | + | |
| 140 | + const jsonEditorContainerElRef = ref<Nullable<HTMLDivElement>>(); | |
| 141 | + const { isFullscreen, isSupported, toggle } = useFullscreen(jsonEditorContainerElRef); | |
| 142 | + const handleFullScreen = () => { | |
| 143 | + toggle(); | |
| 144 | + }; | |
| 145 | + | |
| 146 | + const getHeight = computed(() => { | |
| 147 | + const { height } = props; | |
| 148 | + return isNumber(height) ? `${height}px` : height; | |
| 102 | 149 | }); |
| 103 | 150 | |
| 104 | 151 | defineExpose({ |
| ... | ... | @@ -108,22 +155,41 @@ |
| 108 | 155 | </script> |
| 109 | 156 | |
| 110 | 157 | <template> |
| 111 | - <div class="p-2 bg-gray-200" :style="{ height: `${height}px` }"> | |
| 112 | - <div ref="jsonEditorElRef" class="jsoneditor"></div> | |
| 158 | + <div | |
| 159 | + ref="jsonEditorContainerElRef" | |
| 160 | + class="p-2 bg-gray-200 flex flex-col" | |
| 161 | + :style="{ height: getHeight }" | |
| 162 | + > | |
| 163 | + <div class="w-full h-8 flex justify-between items-center"> | |
| 164 | + <div> | |
| 165 | + {{ title }} | |
| 166 | + </div> | |
| 167 | + <slot name="header"></slot> | |
| 168 | + <div class="flex h-8 gap-3 justify-end items-center text-dark-500 svg:text-2xl"> | |
| 169 | + <slot name="beforeFormat"></slot> | |
| 170 | + <Tooltip title="整洁"> | |
| 171 | + <Icon @click="handleFormat" class="cursor-pointer" icon="gg:format-left" /> | |
| 172 | + </Tooltip> | |
| 173 | + <slot name="beforeCompress"></slot> | |
| 174 | + | |
| 175 | + <Tooltip title="迷你"> | |
| 176 | + <Icon @click="handleCompress" class="cursor-pointer" icon="material-symbols:compress" /> | |
| 177 | + </Tooltip> | |
| 178 | + <slot name="beforeFullScreen"></slot> | |
| 179 | + | |
| 180 | + <Tooltip title="全屏"> | |
| 181 | + <Icon | |
| 182 | + v-if="isSupported" | |
| 183 | + class="cursor-pointer" | |
| 184 | + :icon=" | |
| 185 | + isFullscreen ? 'material-symbols:fullscreen-exit' : 'material-symbols:fullscreen' | |
| 186 | + " | |
| 187 | + @click="handleFullScreen" | |
| 188 | + /> | |
| 189 | + </Tooltip> | |
| 190 | + <slot name="afterFullScreen"></slot> | |
| 191 | + </div> | |
| 192 | + </div> | |
| 193 | + <div ref="jsonEditorElRef" class="flex-auto"></div> | |
| 113 | 194 | </div> |
| 114 | 195 | </template> |
| 115 | - | |
| 116 | -<style lang="less" scoped> | |
| 117 | - .jsoneditor { | |
| 118 | - border: none !important; | |
| 119 | - | |
| 120 | - :deep(.jsoneditor) { | |
| 121 | - border: none !important; | |
| 122 | - | |
| 123 | - .ace-jsoneditor, | |
| 124 | - textarea.jsoneditor-text { | |
| 125 | - min-height: auto; | |
| 126 | - } | |
| 127 | - } | |
| 128 | - } | |
| 129 | -</style> | ... | ... |
| ... | ... | @@ -13,6 +13,7 @@ export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue'; |
| 13 | 13 | export { default as ApiUpload } from './src/components/ApiUpload.vue'; |
| 14 | 14 | |
| 15 | 15 | export { default as StructForm } from './src/externalCompns/components/StructForm/StructForm.vue'; |
| 16 | +export { default as JavaScriptFunctionEditor } from './src/components/JavaScriptFunctionEditor.vue'; | |
| 16 | 17 | |
| 17 | 18 | //注册自定义组件 |
| 18 | 19 | export { | ... | ... |
| ... | ... | @@ -14,6 +14,7 @@ |
| 14 | 14 | import { get, omit } from 'lodash-es'; |
| 15 | 15 | import { LoadingOutlined } from '@ant-design/icons-vue'; |
| 16 | 16 | import { useI18n } from '/@/hooks/web/useI18n'; |
| 17 | + import { useDebounceFn } from '@vueuse/shared'; | |
| 17 | 18 | |
| 18 | 19 | const emit = defineEmits(['options-change', 'change']); |
| 19 | 20 | const props = withDefaults( |
| ... | ... | @@ -27,6 +28,7 @@ |
| 27 | 28 | labelField?: string; |
| 28 | 29 | valueField?: string; |
| 29 | 30 | immediate?: boolean; |
| 31 | + searchField?: string; | |
| 30 | 32 | queryEmptyDataAgin?: boolean; |
| 31 | 33 | onChangeHook?: ({ options }: OnChangeHookParams) => void; |
| 32 | 34 | dropdownVisibleChangeHook?: ({ options }: OnChangeHookParams) => void; |
| ... | ... | @@ -35,6 +37,7 @@ |
| 35 | 37 | resultField: '', |
| 36 | 38 | labelField: 'label', |
| 37 | 39 | valueField: 'value', |
| 40 | + searchField: 'text', | |
| 38 | 41 | immediate: true, |
| 39 | 42 | queryEmptyDataAgin: true, |
| 40 | 43 | } |
| ... | ... | @@ -53,17 +56,27 @@ |
| 53 | 56 | const { labelField, valueField = 'value', numberToString } = props; |
| 54 | 57 | return unref(options).reduce((prev, next: Recordable) => { |
| 55 | 58 | if (next) { |
| 56 | - const value = next[valueField]; | |
| 59 | + const value = get(next, valueField); | |
| 60 | + const label = get(next, labelField); | |
| 57 | 61 | prev.push({ |
| 58 | - label: next[labelField], | |
| 59 | - value: numberToString ? `${value}` : value, | |
| 60 | 62 | ...omit(next, [labelField, valueField]), |
| 63 | + label, | |
| 64 | + value: numberToString ? `${value}` : value, | |
| 61 | 65 | }); |
| 62 | 66 | } |
| 63 | 67 | return prev; |
| 64 | 68 | }, [] as OptionsItem[]); |
| 65 | 69 | }); |
| 66 | 70 | |
| 71 | + const getBindProps = computed(() => { | |
| 72 | + const { searchApi } = props; | |
| 73 | + return { | |
| 74 | + ...attrs, | |
| 75 | + showSearch: true, | |
| 76 | + filterOption: !searchApi, | |
| 77 | + }; | |
| 78 | + }); | |
| 79 | + | |
| 67 | 80 | watchEffect(() => { |
| 68 | 81 | props.immediate && fetch(); |
| 69 | 82 | }); |
| ... | ... | @@ -122,8 +135,9 @@ |
| 122 | 135 | onChangeHook({ options }); |
| 123 | 136 | } |
| 124 | 137 | |
| 138 | + const debounceSearchFunction = useDebounceFn(handleSearch, 300); | |
| 125 | 139 | async function handleSearch(params?: string) { |
| 126 | - let { searchApi, api } = props; | |
| 140 | + let { searchApi, api, searchField } = props; | |
| 127 | 141 | if (!searchApi || !isFunction(searchApi)) { |
| 128 | 142 | if (!api || !isFunction(api)) return; |
| 129 | 143 | searchApi = api; |
| ... | ... | @@ -131,7 +145,7 @@ |
| 131 | 145 | options.value = []; |
| 132 | 146 | try { |
| 133 | 147 | loading.value = true; |
| 134 | - const res = await searchApi({ ...props.params, text: params }); | |
| 148 | + const res = await searchApi({ ...props.params, [searchField]: params }); | |
| 135 | 149 | if (Array.isArray(res)) { |
| 136 | 150 | options.value = res; |
| 137 | 151 | emitChange(); |
| ... | ... | @@ -152,11 +166,10 @@ |
| 152 | 166 | <template> |
| 153 | 167 | <Select |
| 154 | 168 | @dropdownVisibleChange="handleFetch" |
| 155 | - v-bind="attrs" | |
| 156 | - show-search | |
| 169 | + v-bind="getBindProps" | |
| 157 | 170 | @change="handleChange" |
| 158 | 171 | :options="getOptions" |
| 159 | - @search="handleSearch" | |
| 172 | + @search="debounceSearchFunction" | |
| 160 | 173 | v-model:value="state" |
| 161 | 174 | > |
| 162 | 175 | <template #[item]="data" v-for="item in Object.keys($slots)"> | ... | ... |
| ... | ... | @@ -6,7 +6,7 @@ |
| 6 | 6 | <script lang="ts" setup> |
| 7 | 7 | import { ref, watchEffect, computed, unref, watch, reactive } from 'vue'; |
| 8 | 8 | import { Select, Spin } from 'ant-design-vue'; |
| 9 | - import { isFunction } from '/@/utils/is'; | |
| 9 | + import { isFunction, isNullAndUnDef } from '/@/utils/is'; | |
| 10 | 10 | import { useRuleFormItem } from '/@/hooks/component/useFormItem'; |
| 11 | 11 | import { useAttrs } from '/@/hooks/core/useAttrs'; |
| 12 | 12 | import { get, omit } from 'lodash-es'; |
| ... | ... | @@ -30,8 +30,11 @@ |
| 30 | 30 | labelField?: string; |
| 31 | 31 | valueField?: string; |
| 32 | 32 | immediate?: boolean; |
| 33 | - pagenation?: Pagination; | |
| 33 | + searchField?: string; | |
| 34 | + pagination?: Pagination; | |
| 34 | 35 | queryEmptyDataAgin?: boolean; |
| 36 | + fetchSearch?: boolean; | |
| 37 | + filterOption?: (inputValue: string, options: Recordable) => boolean; | |
| 35 | 38 | }>(), |
| 36 | 39 | { |
| 37 | 40 | resultField: '', |
| ... | ... | @@ -39,14 +42,15 @@ |
| 39 | 42 | valueField: 'value', |
| 40 | 43 | immediate: true, |
| 41 | 44 | queryEmptyDataAgin: true, |
| 42 | - pagenation: () => ({ page: 1, pageSize: 10 }), | |
| 45 | + pagination: () => ({ page: 1, pageSize: 10 }), | |
| 46 | + fetchSearch: false, | |
| 43 | 47 | } |
| 44 | 48 | ); |
| 45 | 49 | |
| 46 | 50 | const OptionsItem = (_, { attrs }: { attrs: { vNode: any } }) => attrs.vNode; |
| 47 | 51 | |
| 48 | 52 | const options = ref<OptionsItem[]>([]); |
| 49 | - const pagination = reactive(Object.assign({ total: 0, page: 1, pageSize: 10 }, props.pagenation)); | |
| 53 | + const pagination = reactive<Record<'total' | 'page' | 'pageSize', number>>({} as any); | |
| 50 | 54 | const scrollLoading = ref(false); |
| 51 | 55 | const lock = ref(false); |
| 52 | 56 | const loading = ref(false); |
| ... | ... | @@ -55,6 +59,13 @@ |
| 55 | 59 | const attrs = useAttrs(); |
| 56 | 60 | const { t } = useI18n(); |
| 57 | 61 | |
| 62 | + const getPagination = computed(() => { | |
| 63 | + return { | |
| 64 | + ...props.pagination, | |
| 65 | + ...unref(pagination), | |
| 66 | + }; | |
| 67 | + }); | |
| 68 | + | |
| 58 | 69 | // Embedded in the form, just use the hook binding to perform form verification |
| 59 | 70 | const [state] = useRuleFormItem(props, 'value', 'change', emitData); |
| 60 | 71 | |
| ... | ... | @@ -86,16 +97,18 @@ |
| 86 | 97 | { deep: true } |
| 87 | 98 | ); |
| 88 | 99 | |
| 89 | - async function fetch() { | |
| 90 | - const api = props.api; | |
| 100 | + async function fetch(searchText?: string) { | |
| 101 | + const { api, searchField, fetchSearch } = props; | |
| 91 | 102 | if (!api || !isFunction(api)) return; |
| 103 | + const isFetchSearchFlag = fetchSearch && !isNullAndUnDef(searchText) && searchField; | |
| 92 | 104 | try { |
| 93 | 105 | !unref(getOptions).length ? (loading.value = true) : (scrollLoading.value = true); |
| 94 | 106 | lock.value = true; |
| 95 | 107 | const { total, items } = await api({ |
| 96 | 108 | ...props.params, |
| 97 | - page: pagination.page, | |
| 98 | - pageSize: pagination.pageSize, | |
| 109 | + page: unref(getPagination).page, | |
| 110 | + pageSize: unref(getPagination).pageSize, | |
| 111 | + ...(isFetchSearchFlag ? { [searchField!]: searchText } : {}), | |
| 99 | 112 | }); |
| 100 | 113 | |
| 101 | 114 | pagination.total = total; |
| ... | ... | @@ -105,11 +118,13 @@ |
| 105 | 118 | return; |
| 106 | 119 | } |
| 107 | 120 | if (props.resultField) { |
| 108 | - options.value = [...options.value, ...(get(items, props.resultField) || [])]; | |
| 121 | + options.value = isFetchSearchFlag | |
| 122 | + ? get(items, props.resultField) || [] | |
| 123 | + : [...options.value, ...(get(items, props.resultField) || [])]; | |
| 109 | 124 | } |
| 110 | 125 | emitChange(); |
| 111 | 126 | } catch (error) { |
| 112 | - pagination.page = Math.ceil(unref(getOptions).length / pagination.pageSize); | |
| 127 | + pagination.page = Math.ceil(unref(getOptions).length / unref(getPagination).pageSize); | |
| 113 | 128 | console.warn(error); |
| 114 | 129 | } finally { |
| 115 | 130 | isFirstLoad.value = false; |
| ... | ... | @@ -134,17 +149,39 @@ |
| 134 | 149 | emitData.value = args; |
| 135 | 150 | } |
| 136 | 151 | |
| 152 | + const sleep = async (number: number) => { | |
| 153 | + return new Promise((resolve) => { | |
| 154 | + setTimeout(() => { | |
| 155 | + resolve(number); | |
| 156 | + }, number); | |
| 157 | + }); | |
| 158 | + }; | |
| 159 | + | |
| 137 | 160 | async function handlePopupScroll(event: MouseEvent) { |
| 138 | 161 | const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLDivElement; |
| 139 | 162 | if (scrollTop + clientHeight >= scrollHeight) { |
| 140 | - if (unref(getOptions).length < pagination.total && !unref(lock)) { | |
| 141 | - pagination.page = pagination.page + 1; | |
| 163 | + if (unref(getOptions).length < unref(getPagination).total && !unref(lock)) { | |
| 164 | + pagination.page = unref(getPagination).page + 1; | |
| 165 | + scrollLoading.value = true; | |
| 166 | + await sleep(500); | |
| 142 | 167 | await fetch(); |
| 143 | 168 | } |
| 144 | 169 | } |
| 145 | 170 | } |
| 146 | 171 | |
| 147 | 172 | const debounceHandlePopupScroll = useDebounceFn(handlePopupScroll, 100); |
| 173 | + | |
| 174 | + const handleFilterOption = async (inputValue: string, option: Recordable) => { | |
| 175 | + const { filterOption, fetchSearch } = props; | |
| 176 | + if (filterOption && isFunction(filterOption)) { | |
| 177 | + filterOption?.(inputValue, option); | |
| 178 | + return; | |
| 179 | + } | |
| 180 | + | |
| 181 | + if (fetchSearch) { | |
| 182 | + await fetch(inputValue); | |
| 183 | + } | |
| 184 | + }; | |
| 148 | 185 | </script> |
| 149 | 186 | |
| 150 | 187 | <template> |
| ... | ... | @@ -153,6 +190,8 @@ |
| 153 | 190 | v-bind="attrs" |
| 154 | 191 | @change="handleChange" |
| 155 | 192 | :options="getOptions" |
| 193 | + :filterOption="handleFilterOption" | |
| 194 | + :showSearch="true" | |
| 156 | 195 | v-model:value="state" |
| 157 | 196 | @popup-scroll="debounceHandlePopupScroll" |
| 158 | 197 | > | ... | ... |
| ... | ... | @@ -9,7 +9,7 @@ |
| 9 | 9 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 10 | 10 | import { computed, ref, unref } from 'vue'; |
| 11 | 11 | import { cloneDeep } from 'lodash-es'; |
| 12 | - import { isFunction, isNumber, isObject } from '/@/utils/is'; | |
| 12 | + import { isFunction, isNumber, isObject, isString } from '/@/utils/is'; | |
| 13 | 13 | import { useDesign } from '/@/hooks/web/useDesign'; |
| 14 | 14 | |
| 15 | 15 | export interface FileItem { |
| ... | ... | @@ -40,21 +40,38 @@ |
| 40 | 40 | accept?: string; |
| 41 | 41 | maxSize?: number; |
| 42 | 42 | disabled?: boolean; |
| 43 | - listType?: string; | |
| 43 | + listType?: 'text' | 'picture-card' | 'picture'; | |
| 44 | 44 | multiple?: boolean; |
| 45 | 45 | maxFileLimit?: number; |
| 46 | - showUploadList?: boolean | { showPreviewIcon?: boolean; showRemoveIcon?: boolean }; | |
| 46 | + showUploadList?: InstanceType<typeof Upload>['$props']['showUploadList']; | |
| 47 | 47 | transformFile?: (file: File) => string | Blob | Promise<string | Blob | File>; |
| 48 | 48 | api: (file: string | Blob | Promise<string | Blob | File>) => Promise<FileItem>; |
| 49 | + overFileLimitHiddenUploadEntry?: boolean; | |
| 50 | + beforeUpload?: (file: File, fileList: File[]) => boolean; | |
| 49 | 51 | }>(), |
| 50 | 52 | { |
| 51 | 53 | fileList: () => [], |
| 52 | 54 | maxSize: 5 * 1024 * 1024, |
| 55 | + overFileLimitHiddenUploadEntry: true, | |
| 56 | + listType: 'text', | |
| 53 | 57 | showUploadList: () => ({ showPreviewIcon: true, showRemoveIcon: true }), |
| 54 | 58 | } |
| 55 | 59 | ); |
| 56 | 60 | |
| 57 | - const handleBeforeUpload = (file: File) => { | |
| 61 | + const handleBeforeUpload = (file: File, fileList: File[]) => { | |
| 62 | + const { beforeUpload, accept } = props; | |
| 63 | + | |
| 64 | + if (beforeUpload && isFunction(beforeUpload)) return beforeUpload?.(file, fileList); | |
| 65 | + | |
| 66 | + if (accept && isString(accept)) { | |
| 67 | + const limitFileSuffix = accept.split(','); | |
| 68 | + | |
| 69 | + if (limitFileSuffix.length && !limitFileSuffix.some((suffix) => file.name.includes(suffix))) { | |
| 70 | + createMessage.warning(`允许上传的文件类型包括${accept}`); | |
| 71 | + return false; | |
| 72 | + } | |
| 73 | + } | |
| 74 | + | |
| 58 | 75 | if (file.size > props.maxSize) { |
| 59 | 76 | createMessage.warning(`文件大小超过${Math.floor(props.maxSize / 1024 / 1024)}mb`); |
| 60 | 77 | return false; |
| ... | ... | @@ -75,7 +92,7 @@ |
| 75 | 92 | |
| 76 | 93 | const getMaxFileLimit = computed(() => { |
| 77 | 94 | const { maxFileLimit } = props; |
| 78 | - return isPictureCard.value ? 1 : maxFileLimit; | |
| 95 | + return isPictureCard.value ? 1 : maxFileLimit || 1; | |
| 79 | 96 | }); |
| 80 | 97 | |
| 81 | 98 | const handleUpload = async (file: File | string | Blob | Promise<string | Blob | File>) => { |
| ... | ... | @@ -126,16 +143,21 @@ |
| 126 | 143 | <template> |
| 127 | 144 | <Upload |
| 128 | 145 | class="block" |
| 146 | + :accept="accept" | |
| 129 | 147 | :class="prefixCls" |
| 130 | 148 | :file-list="props.fileList" |
| 131 | 149 | :list-type="props.listType" |
| 132 | 150 | :disabled="getDisabled" |
| 133 | 151 | :before-upload="handleBeforeUpload" |
| 152 | + :show-upload-list="showUploadList" | |
| 134 | 153 | @preview="handlePreview" |
| 135 | 154 | @download="handleDownload" |
| 136 | 155 | :remove="handleRemove" |
| 137 | 156 | > |
| 138 | - <Spin v-if="!fileList.length" :spinning="loading"> | |
| 157 | + <Spin | |
| 158 | + v-if="!(fileList.length >= getMaxFileLimit && overFileLimitHiddenUploadEntry)" | |
| 159 | + :spinning="loading" | |
| 160 | + > | |
| 139 | 161 | <div class="w-full h-full flex flex-col justify-center content-center"> |
| 140 | 162 | <Tooltip title="点击上传或拖拽上传"> |
| 141 | 163 | <InboxOutlined class="text-[3rem] !text-blue-500" /> | ... | ... |
| ... | ... | @@ -14,6 +14,7 @@ |
| 14 | 14 | import { upperFirst, cloneDeep } from 'lodash-es'; |
| 15 | 15 | import { useItemLabelWidth } from '../hooks/useLabelWidth'; |
| 16 | 16 | import { useI18n } from '/@/hooks/web/useI18n'; |
| 17 | + import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface'; | |
| 17 | 18 | |
| 18 | 19 | export default defineComponent({ |
| 19 | 20 | name: 'BasicFormItem', |
| ... | ... | @@ -39,6 +40,12 @@ |
| 39 | 40 | type: Function as PropType<(key: string, value: any) => void>, |
| 40 | 41 | default: null, |
| 41 | 42 | }, |
| 43 | + validateFields: { | |
| 44 | + type: Function as PropType< | |
| 45 | + (nameList?: NamePath[], options?: ValidateOptions) => Promise<any> | |
| 46 | + >, | |
| 47 | + default: null, | |
| 48 | + }, | |
| 42 | 49 | tableAction: { |
| 43 | 50 | type: Object as PropType<TableActionType>, |
| 44 | 51 | }, |
| ... | ... | @@ -208,6 +215,7 @@ |
| 208 | 215 | rules[characterInx].message || |
| 209 | 216 | t('component.form.maxTip', [rules[characterInx].max] as Recordable); |
| 210 | 217 | } |
| 218 | + rules.forEach((item) => !item.trigger && (item.trigger = 'change')); | |
| 211 | 219 | return rules; |
| 212 | 220 | } |
| 213 | 221 | |
| ... | ... | @@ -234,6 +242,10 @@ |
| 234 | 242 | const value = target ? (isCheck ? target.checked : target.value) : e; |
| 235 | 243 | props.setFormModel(field, value); |
| 236 | 244 | }, |
| 245 | + onBlur: (...args: any[]) => { | |
| 246 | + unref(getComponentsProps)?.onBlur?.(...args); | |
| 247 | + props.validateFields([field], { triggerName: 'blur' }).catch((_) => {}); | |
| 248 | + }, | |
| 237 | 249 | }; |
| 238 | 250 | const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>; |
| 239 | 251 | ... | ... |
| 1 | +<script lang="ts" setup> | |
| 2 | + import { Icon } from '/@/components/Icon'; | |
| 3 | + import { Tooltip } from 'ant-design-vue'; | |
| 4 | + import { computed, onMounted, onUnmounted, ref, shallowRef, unref, watch } from 'vue'; | |
| 5 | + import AceEditor, { Ace } from 'ace-builds'; | |
| 6 | + import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url'; | |
| 7 | + import githubTheme from 'ace-builds/src-noconflict/theme-github?url'; | |
| 8 | + import 'ace-builds/src-noconflict/mode-javascript'; | |
| 9 | + import 'ace-builds/src-noconflict/ext-searchbox'; | |
| 10 | + import 'ace-builds/src-noconflict/ext-language_tools'; | |
| 11 | + import 'ace-builds/src-noconflict/snippets/javascript'; | |
| 12 | + import { useBeautify } from '/@/hooks/business/useBeautify'; | |
| 13 | + import { useFullscreen } from '@vueuse/core'; | |
| 14 | + import { isNumber } from '/@/utils/is'; | |
| 15 | + | |
| 16 | + const emit = defineEmits(['update:value', 'focus', 'blur']); | |
| 17 | + const props = withDefaults( | |
| 18 | + defineProps<{ | |
| 19 | + functionName?: string; | |
| 20 | + paramsName?: string[]; | |
| 21 | + height?: number | string; | |
| 22 | + value?: string; | |
| 23 | + disabled?: boolean; | |
| 24 | + validateStatus?: boolean; | |
| 25 | + }>(), | |
| 26 | + { | |
| 27 | + functionName: 'method', | |
| 28 | + paramsName: () => [], | |
| 29 | + height: 200, | |
| 30 | + value: '', | |
| 31 | + } | |
| 32 | + ); | |
| 33 | + | |
| 34 | + const getHeight = computed(() => { | |
| 35 | + const { height } = props; | |
| 36 | + return isNumber(height) ? `${height}px` : height; | |
| 37 | + }); | |
| 38 | + | |
| 39 | + const javaScriptEditorElRef = ref<Nullable<HTMLDivElement>>(); | |
| 40 | + const editorInstance = shallowRef<Ace.Editor>(); | |
| 41 | + const isFocus = ref(false); | |
| 42 | + | |
| 43 | + const handleFocus = () => { | |
| 44 | + isFocus.value = true; | |
| 45 | + emit('focus', unref(editorInstance)); | |
| 46 | + }; | |
| 47 | + | |
| 48 | + const handleBlur = () => { | |
| 49 | + isFocus.value = false; | |
| 50 | + emit('update:value', get()); | |
| 51 | + emit('blur', unref(editorInstance)); | |
| 52 | + }; | |
| 53 | + | |
| 54 | + const handleChange = () => { | |
| 55 | + emit('update:value', get()); | |
| 56 | + }; | |
| 57 | + | |
| 58 | + const initEditor = () => { | |
| 59 | + AceEditor.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl); | |
| 60 | + AceEditor.config.setModuleUrl('ace/theme/github', githubTheme); | |
| 61 | + const editor = AceEditor.edit(unref(javaScriptEditorElRef)!, { | |
| 62 | + mode: 'ace/mode/javascript', | |
| 63 | + }); | |
| 64 | + editor.setTheme('ace/theme/github'); | |
| 65 | + editor.setOptions({ | |
| 66 | + fontSize: 14, | |
| 67 | + enableBasicAutocompletion: true, | |
| 68 | + enableSnippets: true, | |
| 69 | + enableLiveAutocompletion: true, | |
| 70 | + }); | |
| 71 | + | |
| 72 | + editor.on('focus', handleFocus); | |
| 73 | + editor.on('blur', handleBlur); | |
| 74 | + editor.on('change', handleChange); | |
| 75 | + editorInstance.value = editor; | |
| 76 | + editor.setValue(props.value); | |
| 77 | + editor?.clearSelection(); | |
| 78 | + unref(editorInstance)?.setReadOnly(props.disabled); | |
| 79 | + }; | |
| 80 | + | |
| 81 | + const get = () => { | |
| 82 | + return unref(editorInstance)?.getValue(); | |
| 83 | + }; | |
| 84 | + | |
| 85 | + const set = (val: string, cursorPos?: number) => { | |
| 86 | + return unref(editorInstance)?.setValue(val, cursorPos); | |
| 87 | + }; | |
| 88 | + | |
| 89 | + onMounted(() => { | |
| 90 | + initEditor(); | |
| 91 | + }); | |
| 92 | + | |
| 93 | + onUnmounted(() => { | |
| 94 | + unref(editorInstance)?.off('change', handleChange); | |
| 95 | + unref(editorInstance)?.off('focus', handleFocus); | |
| 96 | + unref(editorInstance)?.off('blur', handleBlur); | |
| 97 | + unref(editorInstance)?.destroy(); | |
| 98 | + unref(editorInstance)?.container.remove(); | |
| 99 | + }); | |
| 100 | + | |
| 101 | + const { beautifyJs } = useBeautify(); | |
| 102 | + const handleFormatCode = async () => { | |
| 103 | + const res = await beautifyJs(get() || '', { indent_size: 4, wrap_line_length: 60 }); | |
| 104 | + set(res || '', -1); | |
| 105 | + }; | |
| 106 | + | |
| 107 | + const jsFunctionContainerElRef = ref<Nullable<HTMLDivElement>>(); | |
| 108 | + const { isFullscreen, isSupported, toggle } = useFullscreen(jsFunctionContainerElRef); | |
| 109 | + const handleFullScreen = () => { | |
| 110 | + toggle(); | |
| 111 | + }; | |
| 112 | + | |
| 113 | + watch( | |
| 114 | + () => props.value, | |
| 115 | + (value) => { | |
| 116 | + // const position = unref(editorInstance)?.getCursorPosition(); | |
| 117 | + if (unref(isFocus)) return; | |
| 118 | + set(value); | |
| 119 | + unref(editorInstance)?.clearSelection(); | |
| 120 | + // position && unref(editorInstance)?.moveCursorToPosition(position!); | |
| 121 | + }, | |
| 122 | + { | |
| 123 | + immediate: true, | |
| 124 | + } | |
| 125 | + ); | |
| 126 | + | |
| 127 | + watch( | |
| 128 | + () => props.disabled, | |
| 129 | + (value) => { | |
| 130 | + unref(editorInstance)?.setReadOnly(value); | |
| 131 | + } | |
| 132 | + ); | |
| 133 | + | |
| 134 | + defineExpose({ | |
| 135 | + get, | |
| 136 | + set, | |
| 137 | + }); | |
| 138 | +</script> | |
| 139 | + | |
| 140 | +<template> | |
| 141 | + <section | |
| 142 | + ref="jsFunctionContainerElRef" | |
| 143 | + class="p-2 bg-gray-200 flex flex-col" | |
| 144 | + :style="{ height: getHeight }" | |
| 145 | + > | |
| 146 | + <head class="flex justify-between h-8 items-center"> | |
| 147 | + <div class="font-bold"> | |
| 148 | + <span>function</span> | |
| 149 | + <span class="ml-1">{{ functionName }}</span> | |
| 150 | + <span>({{ paramsName.join(',') }})</span> | |
| 151 | + <span class="ml-1">{</span> | |
| 152 | + </div> | |
| 153 | + <div class="flex gap-3 items-center svg:text-2xl"> | |
| 154 | + <slot name="beforeFormat"></slot> | |
| 155 | + | |
| 156 | + <Tooltip title="整洁"> | |
| 157 | + <Icon class="cursor-pointer" icon="gg:format-left" @click="handleFormatCode" /> | |
| 158 | + </Tooltip> | |
| 159 | + <slot name="beforeFullScreen"></slot> | |
| 160 | + <Tooltip title="全屏"> | |
| 161 | + <Icon | |
| 162 | + v-if="isSupported" | |
| 163 | + class="cursor-pointer" | |
| 164 | + :icon=" | |
| 165 | + isFullscreen ? 'material-symbols:fullscreen-exit' : 'material-symbols:fullscreen' | |
| 166 | + " | |
| 167 | + @click="handleFullScreen" | |
| 168 | + /> | |
| 169 | + </Tooltip> | |
| 170 | + <slot name="afterFullScreen"></slot> | |
| 171 | + </div> | |
| 172 | + </head> | |
| 173 | + <main ref="javaScriptEditorElRef" class="flex-auto"> </main> | |
| 174 | + <footer class="font-bold">}</footer> | |
| 175 | + </section> | |
| 176 | +</template> | ... | ... |
| 1 | 1 | import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form'; |
| 2 | -import type { NamePath } from 'ant-design-vue/lib/form/interface'; | |
| 2 | +import type { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface'; | |
| 3 | 3 | import type { DynamicProps } from '/#/utils'; |
| 4 | 4 | import { ref, onUnmounted, unref, nextTick, watch } from 'vue'; |
| 5 | 5 | import { isProdMode } from '/@/utils/env'; |
| ... | ... | @@ -112,9 +112,12 @@ export function useForm(props?: Props): UseFormReturnType { |
| 112 | 112 | return form.validate(nameList); |
| 113 | 113 | }, |
| 114 | 114 | |
| 115 | - validateFields: async (nameList?: NamePath[]): Promise<Recordable> => { | |
| 115 | + validateFields: async ( | |
| 116 | + nameList?: NamePath[], | |
| 117 | + options?: ValidateOptions | |
| 118 | + ): Promise<Recordable> => { | |
| 116 | 119 | const form = await getForm(); |
| 117 | - return form.validateFields(nameList); | |
| 120 | + return form.validateFields(nameList, options); | |
| 118 | 121 | }, |
| 119 | 122 | }; |
| 120 | 123 | ... | ... |
| 1 | 1 | import type { ComputedRef, Ref } from 'vue'; |
| 2 | 2 | import type { FormProps, FormSchema, FormActionType } from '../types/form'; |
| 3 | -import type { NamePath } from 'ant-design-vue/lib/form/interface'; | |
| 3 | +import type { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface'; | |
| 4 | 4 | import { unref, toRaw } from 'vue'; |
| 5 | 5 | import { isArray, isFunction, isObject, isString } from '/@/utils/is'; |
| 6 | 6 | import { deepMerge } from '/@/utils'; |
| ... | ... | @@ -206,8 +206,8 @@ export function useFormEvents({ |
| 206 | 206 | }); |
| 207 | 207 | } |
| 208 | 208 | |
| 209 | - async function validateFields(nameList?: NamePath[] | undefined) { | |
| 210 | - return unref(formElRef)?.validateFields(nameList); | |
| 209 | + async function validateFields(nameList?: NamePath[] | undefined, options?: ValidateOptions) { | |
| 210 | + return unref(formElRef)?.validateFields(nameList, options); | |
| 211 | 211 | } |
| 212 | 212 | |
| 213 | 213 | async function validate(nameList?: NamePath[] | undefined) { | ... | ... |
| ... | ... | @@ -38,7 +38,7 @@ export const basicProps = { |
| 38 | 38 | }, |
| 39 | 39 | autoSetPlaceHolder: propTypes.bool.def(true), |
| 40 | 40 | // 在INPUT组件上单击回车时,是否自动提交 |
| 41 | - autoSubmitOnEnter: propTypes.bool.def(false), | |
| 41 | + autoSubmitOnEnter: propTypes.bool.def(true), | |
| 42 | 42 | submitOnReset: propTypes.bool, |
| 43 | 43 | size: propTypes.oneOf(['default', 'small', 'large']).def('default'), |
| 44 | 44 | // 禁用表单 | ... | ... |
| 1 | -import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface'; | |
| 1 | +import type { NamePath, RuleObject, ValidateOptions } from 'ant-design-vue/lib/form/interface'; | |
| 2 | 2 | import type { VNode } from 'vue'; |
| 3 | 3 | import type { ButtonProps as AntdButtonProps } from '/@/components/Button'; |
| 4 | 4 | import type { FormItem } from './formItem'; |
| ... | ... | @@ -39,7 +39,7 @@ export interface FormActionType { |
| 39 | 39 | prefixField: string | undefined, |
| 40 | 40 | first?: boolean | undefined |
| 41 | 41 | ) => Promise<void>; |
| 42 | - validateFields: (nameList?: NamePath[]) => Promise<any>; | |
| 42 | + validateFields: (nameList?: NamePath[], options?: ValidateOptions) => Promise<any>; | |
| 43 | 43 | validate: (nameList?: NamePath[]) => Promise<any>; |
| 44 | 44 | scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>; |
| 45 | 45 | } | ... | ... |
| ... | ... | @@ -130,4 +130,11 @@ export type ComponentType = |
| 130 | 130 | | 'ControlGroup' |
| 131 | 131 | | 'JSONEditor' |
| 132 | 132 | | 'OrgTreeSelect' |
| 133 | - | 'ExtendDesc'; | |
| 133 | + | 'ExtendDesc' | |
| 134 | + | 'JavaScriptFunctionEditor' | |
| 135 | + | 'JavascriptEditorWithTestModal' | |
| 136 | + | 'AttributeConfiguration' | |
| 137 | + | 'CorrelationFilters' | |
| 138 | + | 'RelationsQuery' | |
| 139 | + | 'CredentialsCard' | |
| 140 | + | 'ApiComplete'; | ... | ... |
| ... | ... | @@ -33,6 +33,7 @@ |
| 33 | 33 | import { openWindow } from '/@/utils'; |
| 34 | 34 | |
| 35 | 35 | import { useOpenKeys } from './useOpenKeys'; |
| 36 | + import { useMenuActiveFix } from '/@/hooks/business/useMenuActiveFix'; | |
| 36 | 37 | export default defineComponent({ |
| 37 | 38 | name: 'SimpleMenu', |
| 38 | 39 | components: { |
| ... | ... | @@ -120,7 +121,9 @@ |
| 120 | 121 | isClickGo.value = false; |
| 121 | 122 | return; |
| 122 | 123 | } |
| 123 | - const path = (route || unref(currentRoute)).path; | |
| 124 | + | |
| 125 | + let { flag, path } = useMenuActiveFix(route || unref(currentRoute)); | |
| 126 | + path = flag ? path : (route || unref(currentRoute)).path; | |
| 124 | 127 | |
| 125 | 128 | menuState.activeName = path; |
| 126 | 129 | ... | ... |
| ... | ... | @@ -48,6 +48,7 @@ |
| 48 | 48 | 'update:value', |
| 49 | 49 | 'change', |
| 50 | 50 | 'check', |
| 51 | + 'unSelectAll', | |
| 51 | 52 | 'update:searchValue', |
| 52 | 53 | ], |
| 53 | 54 | setup(props, { attrs, slots, emit, expose }) { |
| ... | ... | @@ -188,6 +189,7 @@ |
| 188 | 189 | } |
| 189 | 190 | |
| 190 | 191 | function checkAll(checkAll: boolean) { |
| 192 | + if (!checkAll) emit('unSelectAll'); | |
| 191 | 193 | state.checkedKeys = checkAll ? getEnabledKeys() : ([] as Keys); |
| 192 | 194 | } |
| 193 | 195 | ... | ... |
| ... | ... | @@ -2,17 +2,23 @@ |
| 2 | 2 | import { isNumber } from 'lodash'; |
| 3 | 3 | import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'; |
| 4 | 4 | import 'video.js/dist/video-js.css'; |
| 5 | - import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue'; | |
| 5 | + import { computed, CSSProperties, onMounted, onUnmounted, ref, toRaw, unref } from 'vue'; | |
| 6 | 6 | import { useDesign } from '/@/hooks/web/useDesign'; |
| 7 | 7 | import { getJwtToken, getShareJwtToken } from '/@/utils/auth'; |
| 8 | 8 | import { isShareMode } from '/@/views/sys/share/hook'; |
| 9 | 9 | import 'videojs-flvjs-es6'; |
| 10 | 10 | const { prefixCls } = useDesign('basic-video-play'); |
| 11 | 11 | |
| 12 | - const props = defineProps<{ | |
| 13 | - options?: VideoJsPlayerOptions; | |
| 14 | - withToken?: boolean; | |
| 15 | - }>(); | |
| 12 | + const props = withDefaults( | |
| 13 | + defineProps<{ | |
| 14 | + options?: VideoJsPlayerOptions; | |
| 15 | + withToken?: boolean; | |
| 16 | + immediateInitOnMounted?: boolean; | |
| 17 | + }>(), | |
| 18 | + { | |
| 19 | + immediateInitOnMounted: true, | |
| 20 | + } | |
| 21 | + ); | |
| 16 | 22 | |
| 17 | 23 | const emit = defineEmits<{ |
| 18 | 24 | (event: 'ready', instance?: Nullable<VideoJsPlayer>): void; |
| ... | ... | @@ -68,8 +74,18 @@ |
| 68 | 74 | }); |
| 69 | 75 | }; |
| 70 | 76 | |
| 77 | + const customInit = (getOptionsFn: (optios: VideoJsPlayerOptions) => VideoJsPlayerOptions) => { | |
| 78 | + return (videoPlayInstance.value = videoJs( | |
| 79 | + unref(videoPlayEl)!, | |
| 80 | + getOptionsFn(toRaw(unref(getOptions))), | |
| 81 | + () => { | |
| 82 | + emit('ready', unref(videoPlayInstance)); | |
| 83 | + } | |
| 84 | + )); | |
| 85 | + }; | |
| 86 | + | |
| 71 | 87 | onMounted(() => { |
| 72 | - init(); | |
| 88 | + props.immediateInitOnMounted && init(); | |
| 73 | 89 | }); |
| 74 | 90 | |
| 75 | 91 | onUnmounted(() => { |
| ... | ... | @@ -79,6 +95,7 @@ |
| 79 | 95 | }); |
| 80 | 96 | |
| 81 | 97 | defineExpose({ |
| 98 | + customInit, | |
| 82 | 99 | reloadPlayer: init, |
| 83 | 100 | getInstance: () => unref(videoPlayInstance), |
| 84 | 101 | }); | ... | ... |
src/enums/alarmEnum.ts
0 → 100644
| 1 | +export enum AlarmStatus { | |
| 2 | + CLEARED_UN_ACK = 'CLEARED_UNACK', | |
| 3 | + ACTIVE_UN_ACK = 'ACTIVE_UNACK', | |
| 4 | + CLEARED_ACK = 'CLEARED_ACK', | |
| 5 | + ACTIVE_ACK = 'ACTIVE_ACK', | |
| 6 | +} | |
| 7 | + | |
| 8 | +export enum AlarmStatusMean { | |
| 9 | + CLEARED_UNACK = '清除未确认', | |
| 10 | + ACTIVE_UNACK = '激活未确认', | |
| 11 | + CLEARED_ACK = '清除已确认', | |
| 12 | + ACTIVE_ACK = '激活已确认', | |
| 13 | +} | ... | ... |
| ... | ... | @@ -38,6 +38,15 @@ export const PLATFORM = 'PLATFORM'; |
| 38 | 38 | export const PLATFORM_INFO_CACHE_KEY = 'PLATFORM_INFO'; |
| 39 | 39 | |
| 40 | 40 | export const MENU_LIST = 'MENU_LIST'; |
| 41 | + | |
| 42 | +export const RULE_NODE_LOCAL_CACHE_KEY = 'RULE__NODE__KEY__'; | |
| 43 | + | |
| 44 | +export const RULE_CHAIN_IMPORT_LOCAL_CACHE_KEY = 'RULE__CHAIN__IMPORT__KEY__'; | |
| 45 | + | |
| 46 | +export const RULE_NODE_KEY = 'RULE_NODE'; | |
| 47 | + | |
| 48 | +export const RULE_CHAIN_KEY = 'RULE_CHAIN'; | |
| 49 | + | |
| 41 | 50 | export enum CacheTypeEnum { |
| 42 | 51 | SESSION, |
| 43 | 52 | LOCAL, | ... | ... |
| ... | ... | @@ -19,4 +19,8 @@ export enum DictEnum { |
| 19 | 19 | DISABLE_CUSTOMER_AUTH = 'disabled_customer_auth', |
| 20 | 20 | // 寄存器数据格式 |
| 21 | 21 | REGISTER_DATA_FORMAT = 'register_data_format', |
| 22 | + // 消息类型 规则节点 Filter message type switch | |
| 23 | + MESSAGE_TYPES_FILTER = 'message_types_filter', | |
| 24 | + // 实体类型 规则节点 Filter originator types switch | |
| 25 | + ORIGINATOR_TYPES = 'originator_types', | |
| 22 | 26 | } | ... | ... |
src/hooks/business/useBatchSettingDict.ts
0 → 100644
| 1 | +import { saveOrEditDictItem } from '/@/api/system/dict'; | |
| 2 | +import { SysDictItem } from '/@/api/system/model/dictModel'; | |
| 3 | + | |
| 4 | +interface BatchSettingParamsType { | |
| 5 | + dictId: string; | |
| 6 | + list: any[]; | |
| 7 | + transformText: (item: any) => any; | |
| 8 | + transformValue: (item: any) => any; | |
| 9 | + update?: boolean; | |
| 10 | +} | |
| 11 | + | |
| 12 | +export function useBatchSettingDict() { | |
| 13 | + const batchSetting = async (options: BatchSettingParamsType) => { | |
| 14 | + const { dictId, list, transformText, transformValue, update = false } = options; | |
| 15 | + if (!transformText || !transformValue) return; | |
| 16 | + let index = 1; | |
| 17 | + for (const item of list) { | |
| 18 | + const params: Partial<SysDictItem> & { dictId: string } = { | |
| 19 | + dictId, | |
| 20 | + sort: index++, | |
| 21 | + status: 1, | |
| 22 | + itemText: transformText(item), | |
| 23 | + itemValue: transformValue(item), | |
| 24 | + }; | |
| 25 | + | |
| 26 | + await saveOrEditDictItem(params as SysDictItem, update); | |
| 27 | + } | |
| 28 | + }; | |
| 29 | + | |
| 30 | + const batchDelete = () => {}; | |
| 31 | + | |
| 32 | + return { | |
| 33 | + batchSetting, | |
| 34 | + batchDelete, | |
| 35 | + }; | |
| 36 | +} | ... | ... |
src/hooks/business/useBeautify.ts
0 → 100644
| 1 | +export function useBeautify() { | |
| 2 | + let jsBeautifyModule: any; | |
| 3 | + | |
| 4 | + async function loadJsBeautify() { | |
| 5 | + if (jsBeautifyModule) return jsBeautifyModule; | |
| 6 | + jsBeautifyModule = await import('js-beautify/js/lib/beautifier'); | |
| 7 | + return jsBeautifyModule; | |
| 8 | + } | |
| 9 | + | |
| 10 | + async function beautifyJs(source: string, options?: any) { | |
| 11 | + const module = await loadJsBeautify(); | |
| 12 | + return module.js(source, options); | |
| 13 | + } | |
| 14 | + return { beautifyJs }; | |
| 15 | +} | ... | ... |
src/hooks/business/useJsonParse.ts
0 → 100644
| 1 | +import { isObject, isString } from '/@/utils/is'; | |
| 2 | + | |
| 3 | +export function useJsonParse(value: any, defaultValue = {}) { | |
| 4 | + let flag = false; | |
| 5 | + try { | |
| 6 | + value = JSON.parse(value); | |
| 7 | + if (isObject(value) || (isString(value) && value.trim() === '')) flag = true; | |
| 8 | + } catch (error) { | |
| 9 | + value = defaultValue; | |
| 10 | + } | |
| 11 | + return { flag, value }; | |
| 12 | +} | ... | ... |
src/hooks/business/useMenuActiveFix.ts
0 → 100644
| 1 | +import { RouteLocationNormalizedLoaded } from 'vue-router'; | |
| 2 | + | |
| 3 | +const menuMap = new Map(); | |
| 4 | + | |
| 5 | +menuMap.set('/visual/board/detail/:boardId/:boardName/:organizationId?', '/visual/board'); | |
| 6 | +menuMap.set('/rule/chain/:id', '/rule/chain'); | |
| 7 | + | |
| 8 | +export const useMenuActiveFix = (route: RouteLocationNormalizedLoaded) => { | |
| 9 | + let flag = false; | |
| 10 | + let path; | |
| 11 | + | |
| 12 | + const matchPath = route.matched.map((item) => item.path); | |
| 13 | + const needFixMenus: string[] = Array.from(menuMap.keys()); | |
| 14 | + | |
| 15 | + for (const item of matchPath) { | |
| 16 | + for (const menu of needFixMenus) { | |
| 17 | + if (menu === item) { | |
| 18 | + flag = true; | |
| 19 | + path = menuMap.get(menu); | |
| 20 | + break; | |
| 21 | + } | |
| 22 | + } | |
| 23 | + } | |
| 24 | + | |
| 25 | + return { | |
| 26 | + flag, | |
| 27 | + path, | |
| 28 | + }; | |
| 29 | +}; | ... | ... |
| ... | ... | @@ -19,6 +19,7 @@ |
| 19 | 19 | import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
| 20 | 20 | import { useAppInject } from '/@/hooks/web/useAppInject'; |
| 21 | 21 | import { useDesign } from '/@/hooks/web/useDesign'; |
| 22 | + import { OUTSIDE_LINK_PREFIX } from '/@/router/helper/routeHelper'; | |
| 22 | 23 | |
| 23 | 24 | export default defineComponent({ |
| 24 | 25 | name: 'LayoutMenu', |
| ... | ... | @@ -113,6 +114,11 @@ |
| 113 | 114 | */ |
| 114 | 115 | |
| 115 | 116 | function handleMenuClick(path: string) { |
| 117 | + if (path.startsWith(OUTSIDE_LINK_PREFIX)) { | |
| 118 | + path = path.replace(OUTSIDE_LINK_PREFIX, ''); | |
| 119 | + window.open(path); | |
| 120 | + return; | |
| 121 | + } | |
| 116 | 122 | go(path); |
| 117 | 123 | } |
| 118 | 124 | |
| ... | ... | @@ -183,7 +189,6 @@ |
| 183 | 189 | padding: 10px 4px 10px 10px; |
| 184 | 190 | |
| 185 | 191 | img { |
| 186 | - width: @logo-width; | |
| 187 | 192 | height: @logo-width; |
| 188 | 193 | } |
| 189 | 194 | } | ... | ... |
| ... | ... | @@ -6,6 +6,7 @@ import { cloneDeep, omit } from 'lodash-es'; |
| 6 | 6 | import { warn } from '/@/utils/log'; |
| 7 | 7 | import { createRouter, createWebHashHistory } from 'vue-router'; |
| 8 | 8 | |
| 9 | +export const OUTSIDE_LINK_PREFIX = '/outside/link'; | |
| 9 | 10 | export type LayoutMapKey = 'LAYOUT'; |
| 10 | 11 | const IFRAME = () => import('/@/views/sys/iframe/FrameBlank.vue'); |
| 11 | 12 | |
| ... | ... | @@ -81,6 +82,9 @@ export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModul |
| 81 | 82 | route.meta = meta; |
| 82 | 83 | } |
| 83 | 84 | } |
| 85 | + if (!route.path.startsWith('/') && route.meta.isLink) { | |
| 86 | + route.path = `${OUTSIDE_LINK_PREFIX}${route.path}`; | |
| 87 | + } | |
| 84 | 88 | route.children && asyncImportRoute(route.children); |
| 85 | 89 | }); |
| 86 | 90 | return routeList as unknown as T[]; | ... | ... |
| ... | ... | @@ -16,6 +16,7 @@ |
| 16 | 16 | mode="multiple" |
| 17 | 17 | v-model:value="model[field]" |
| 18 | 18 | :options="alarmContactOptions.map((item) => ({ value: item.value, label: item.label }))" |
| 19 | + @change="handleChange" | |
| 19 | 20 | > |
| 20 | 21 | <template #dropdownRender="{ menuNode: menu }"> |
| 21 | 22 | <v-nodes :vnodes="menu" /> |
| ... | ... | @@ -53,8 +54,14 @@ |
| 53 | 54 | return attrs.vnodes; |
| 54 | 55 | }, |
| 55 | 56 | }, |
| 57 | + props: { | |
| 58 | + defaultEnable: { | |
| 59 | + type: Boolean, | |
| 60 | + default: false, | |
| 61 | + }, | |
| 62 | + }, | |
| 56 | 63 | emits: ['success', 'register'], |
| 57 | - setup(_, { emit }) { | |
| 64 | + setup(props, { emit }) { | |
| 58 | 65 | const alarmContactOptions: any = ref([]); |
| 59 | 66 | const orgId = ref(''); |
| 60 | 67 | const orgFunc = (e) => { |
| ... | ... | @@ -82,6 +89,7 @@ |
| 82 | 89 | const [registerAlarmContactDrawer, { openDrawer }] = useDrawer(); |
| 83 | 90 | async function handleSuccess() { |
| 84 | 91 | //获取告警联系人 |
| 92 | + if (!unref(orgId)) return; | |
| 85 | 93 | const res = await byOrgIdGetAlarmContact(orgId.value); |
| 86 | 94 | if (res) { |
| 87 | 95 | alarmContactOptions.value = res.map((m) => { |
| ... | ... | @@ -91,6 +99,10 @@ |
| 91 | 99 | alarmContactOptions.value = []; |
| 92 | 100 | } |
| 93 | 101 | } |
| 102 | + | |
| 103 | + const handleChange = () => { | |
| 104 | + validateFields(['alarmContactId']); | |
| 105 | + }; | |
| 94 | 106 | // 新增或编辑 |
| 95 | 107 | const handleOpenAlarmContact = () => { |
| 96 | 108 | openDrawer(true, { |
| ... | ... | @@ -100,7 +112,10 @@ |
| 100 | 112 | const isUpdate = ref(true); |
| 101 | 113 | let allData: any = reactive({}); |
| 102 | 114 | const editId = ref(''); |
| 103 | - const [registerForm, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({ | |
| 115 | + const [ | |
| 116 | + registerForm, | |
| 117 | + { validate, setFieldsValue, resetFields, updateSchema, validateFields }, | |
| 118 | + ] = useForm({ | |
| 104 | 119 | labelWidth: 120, |
| 105 | 120 | schemas: formSchema, |
| 106 | 121 | showActionButtonGroup: false, |
| ... | ... | @@ -165,6 +180,9 @@ |
| 165 | 180 | ...alarmContactIdD, |
| 166 | 181 | ...messageModeD, |
| 167 | 182 | }; |
| 183 | + | |
| 184 | + props.defaultEnable && Object.assign(allData, { status: 1 }); | |
| 185 | + | |
| 168 | 186 | if (!unref(isUpdate)) { |
| 169 | 187 | delete allData.id; |
| 170 | 188 | } |
| ... | ... | @@ -191,6 +209,7 @@ |
| 191 | 209 | handleOpenAlarmContact, |
| 192 | 210 | registerAlarmContactDrawer, |
| 193 | 211 | handleSuccess, |
| 212 | + handleChange, | |
| 194 | 213 | }; |
| 195 | 214 | }, |
| 196 | 215 | }); | ... | ... |
| ... | ... | @@ -37,13 +37,21 @@ |
| 37 | 37 | </a-button> |
| 38 | 38 | </template> |
| 39 | 39 | <template #status="{ record }"> |
| 40 | - <Switch | |
| 41 | - :checked="record.status === 1" | |
| 42 | - :loading="record.pendingStatus" | |
| 43 | - checkedChildren="启用" | |
| 44 | - unCheckedChildren="禁用" | |
| 45 | - @change="(checked:boolean)=>statusChange(checked,record)" | |
| 46 | - /> | |
| 40 | + <Authority value="api:yt:alarm:profile:update"> | |
| 41 | + <Switch | |
| 42 | + :checked="record.status === 1" | |
| 43 | + :loading="record.pendingStatus" | |
| 44 | + checkedChildren="启用" | |
| 45 | + unCheckedChildren="禁用" | |
| 46 | + @change="(checked:boolean)=>statusChange(checked,record)" | |
| 47 | + /> | |
| 48 | + </Authority> | |
| 49 | + <Tag | |
| 50 | + v-if="!hasPermission('api:yt:alarm:profile:update')" | |
| 51 | + :color="record.status ? 'green' : 'red'" | |
| 52 | + > | |
| 53 | + {{ record.status ? '启用' : '禁用' }} | |
| 54 | + </Tag> | |
| 47 | 55 | </template> |
| 48 | 56 | <template #action="{ record }"> |
| 49 | 57 | <TableAction |
| ... | ... | @@ -88,7 +96,7 @@ |
| 88 | 96 | import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree'; |
| 89 | 97 | import { deleteAlarmConfig, queryAlarmConfig } from '/@/api/alarm/config/alarmConfig'; |
| 90 | 98 | import { searchFormSchema, columns } from './config.data'; |
| 91 | - import { Modal, Popconfirm } from 'ant-design-vue'; | |
| 99 | + import { Modal, Popconfirm, Tag } from 'ant-design-vue'; | |
| 92 | 100 | import { JsonPreview } from '/@/components/CodeEditor'; |
| 93 | 101 | import { findDictItemByCode } from '/@/api/system/dict'; |
| 94 | 102 | import { alarmContactGetPage } from '/@/api/device/deviceConfigApi'; |
| ... | ... | @@ -97,6 +105,7 @@ |
| 97 | 105 | import { putAlarmConfigStatus } from '/@/api/alarm/config/alarmConfig'; |
| 98 | 106 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 99 | 107 | import { Authority } from '/@/components/Authority'; |
| 108 | + import { usePermission } from '/@/hooks/web/usePermission'; | |
| 100 | 109 | |
| 101 | 110 | export default defineComponent({ |
| 102 | 111 | components: { |
| ... | ... | @@ -108,8 +117,10 @@ |
| 108 | 117 | Switch, |
| 109 | 118 | Authority, |
| 110 | 119 | Popconfirm, |
| 120 | + Tag, | |
| 111 | 121 | }, |
| 112 | 122 | setup() { |
| 123 | + const { hasPermission } = usePermission(); | |
| 113 | 124 | const searchInfo = reactive<Recordable>({}); |
| 114 | 125 | const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); |
| 115 | 126 | // 刷新 |
| ... | ... | @@ -250,6 +261,7 @@ |
| 250 | 261 | showAlarmContact, |
| 251 | 262 | showMessageMode, |
| 252 | 263 | statusChange, |
| 264 | + hasPermission, | |
| 253 | 265 | }; |
| 254 | 266 | }, |
| 255 | 267 | }); | ... | ... |
| ... | ... | @@ -3,20 +3,7 @@ import { FormSchema } from '/@/components/Form'; |
| 3 | 3 | import { BasicColumn } from '/@/components/Table'; |
| 4 | 4 | import moment from 'moment'; |
| 5 | 5 | import { findDictItemByCode } from '/@/api/system/dict'; |
| 6 | - | |
| 7 | -export enum AlarmStatus { | |
| 8 | - CLEARED_UN_ACK = 'CLEARED_UNACK', | |
| 9 | - ACTIVE_UN_ACK = 'ACTIVE_UNACK', | |
| 10 | - CLEARED_ACK = 'CLEARED_ACK', | |
| 11 | - ACTIVE_ACK = 'ACTIVE_ACK', | |
| 12 | -} | |
| 13 | - | |
| 14 | -export enum AlarmStatusMean { | |
| 15 | - CLEARED_UNACK = '清除未确认', | |
| 16 | - ACTIVE_UNACK = '激活未确认', | |
| 17 | - CLEARED_ACK = '清除已确认', | |
| 18 | - ACTIVE_ACK = '激活已确认', | |
| 19 | -} | |
| 6 | +import { AlarmStatus, AlarmStatusMean } from '/@/enums/alarmEnum'; | |
| 20 | 7 | |
| 21 | 8 | export const alarmSearchSchemas: FormSchema[] = [ |
| 22 | 9 | { |
| ... | ... | @@ -126,6 +113,10 @@ export const alarmColumns: BasicColumn[] = [ |
| 126 | 113 | title: '告警设备', |
| 127 | 114 | dataIndex: 'deviceName', |
| 128 | 115 | width: 100, |
| 116 | + customRender: ({ record }) => { | |
| 117 | + const { deviceAlias, deviceName } = record || {}; | |
| 118 | + return deviceAlias || deviceName; | |
| 119 | + }, | |
| 129 | 120 | }, |
| 130 | 121 | { |
| 131 | 122 | title: '告警场景', |
| ... | ... | @@ -139,6 +130,12 @@ export const alarmColumns: BasicColumn[] = [ |
| 139 | 130 | format: (text) => alarmLevel(text), |
| 140 | 131 | }, |
| 141 | 132 | { |
| 133 | + title: '告警详情', | |
| 134 | + dataIndex: 'details', | |
| 135 | + slots: { customRender: 'details' }, | |
| 136 | + width: 160, | |
| 137 | + }, | |
| 138 | + { | |
| 142 | 139 | title: '状态', |
| 143 | 140 | dataIndex: 'status', |
| 144 | 141 | format: (text) => statusType(text), | ... | ... |
| ... | ... | @@ -46,14 +46,16 @@ |
| 46 | 46 | const alarmStatus = ref(''); |
| 47 | 47 | const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => { |
| 48 | 48 | await resetFields(); |
| 49 | + const { deviceAlias, deviceName, severity, status, details, id } = data || {}; | |
| 49 | 50 | await setFieldsValue({ |
| 50 | 51 | ...data, |
| 51 | - severity: alarmLevel(data.severity), | |
| 52 | - status: statusType(data.status), | |
| 53 | - details: JSON.stringify(data.details), | |
| 52 | + deviceName: deviceAlias || deviceName, | |
| 53 | + severity: alarmLevel(severity), | |
| 54 | + status: statusType(status), | |
| 55 | + details: JSON.stringify(details), | |
| 54 | 56 | }); |
| 55 | - alarmStatus.value = data.status; | |
| 56 | - alarmId.value = data.id; | |
| 57 | + alarmStatus.value = status; | |
| 58 | + alarmId.value = id; | |
| 57 | 59 | }); |
| 58 | 60 | // 处理报警 |
| 59 | 61 | const handleAlarm = async () => { | ... | ... |
| 1 | -import { AlarmStatus, AlarmStatusMean } from '../config/detail.config'; | |
| 2 | 1 | import { clearOrAckAlarm, getDeviceAlarm } from '/@/api/device/deviceManager'; |
| 3 | 2 | import { notification, Button, Tag } from 'ant-design-vue'; |
| 4 | 3 | import { h, onMounted, onUnmounted } from 'vue'; |
| ... | ... | @@ -8,6 +7,7 @@ import { RoleEnum } from '/@/enums/roleEnum'; |
| 8 | 7 | import { usePermission } from '/@/hooks/web/usePermission'; |
| 9 | 8 | import { useUserStore } from '/@/store/modules/user'; |
| 10 | 9 | import { useGlobSetting } from '/@/hooks/setting'; |
| 10 | +import { AlarmStatus, AlarmStatusMean } from '/@/enums/alarmEnum'; | |
| 11 | 11 | |
| 12 | 12 | interface UseAlarmNotifyParams { |
| 13 | 13 | alarmNotifyStatus?: AlarmStatus; | ... | ... |
| ... | ... | @@ -13,47 +13,105 @@ |
| 13 | 13 | ]" |
| 14 | 14 | /> |
| 15 | 15 | </template> |
| 16 | + <template #details="{ record }"> | |
| 17 | + <a-button type="link" class="ml-2" @click="handleViewAlarmDetails(record)"> | |
| 18 | + 查看告警详情 | |
| 19 | + </a-button> | |
| 20 | + </template> | |
| 21 | + <template #toolbar> | |
| 22 | + <Tooltip> | |
| 23 | + <template #title> | |
| 24 | + <div>激活未确认: 可以处理,清除</div> | |
| 25 | + <div>激活已确认: 只可清除,已经处理</div> | |
| 26 | + <div>清除未确认: 只可处理,已经清除</div> | |
| 27 | + <div>清除已确认: 不需要做处理和清除</div> | |
| 28 | + </template> | |
| 29 | + <Button @click="handleBatchClear" type="primary" :disabled="getCanBatchClear"> | |
| 30 | + <QuestionCircleOutlined class="cursor-pointer" /> | |
| 31 | + <span>批量清除</span> | |
| 32 | + </Button> | |
| 33 | + </Tooltip> | |
| 34 | + <Tooltip> | |
| 35 | + <template #title> | |
| 36 | + <div>激活未确认: 可以处理,清除</div> | |
| 37 | + <div>激活已确认: 只可清除,已经处理</div> | |
| 38 | + <div>清除未确认: 只可处理,已经清除</div> | |
| 39 | + <div>清除已确认: 不需要做处理和清除</div> | |
| 40 | + </template> | |
| 41 | + <Button @click="handleBatchAck" type="primary" :disabled="getCanBatchAck"> | |
| 42 | + <QuestionCircleOutlined class="cursor-pointer" /> | |
| 43 | + <span>批量处理</span> | |
| 44 | + </Button> | |
| 45 | + </Tooltip> | |
| 46 | + </template> | |
| 16 | 47 | </BasicTable> |
| 17 | 48 | <AlarmDetailDrawer @register="registerDetailDrawer" @success="handleSuccess" /> |
| 18 | 49 | </div> |
| 19 | 50 | </template> |
| 20 | 51 | <script lang="ts"> |
| 21 | - import { defineComponent } from 'vue'; | |
| 52 | + import { defineComponent, nextTick, h, computed } from 'vue'; | |
| 22 | 53 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
| 23 | 54 | import { alarmColumns, alarmSearchSchemas } from './config/detail.config'; |
| 24 | - import { getDeviceAlarm } from '/@/api/device/deviceManager'; | |
| 55 | + import { doBatchAckAlarm, doBatchClearAlarm, getDeviceAlarm } from '/@/api/device/deviceManager'; | |
| 25 | 56 | import { useDrawer } from '/@/components/Drawer'; |
| 26 | 57 | import AlarmDetailDrawer from './cpns/AlarmDetailDrawer.vue'; |
| 58 | + import { Modal, Button, Tooltip } from 'ant-design-vue'; | |
| 59 | + import { JsonPreview } from '/@/components/CodeEditor'; | |
| 60 | + import { getDeviceDetail } from '/@/api/device/deviceManager'; | |
| 61 | + import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; | |
| 62 | + import { | |
| 63 | + operationNumber_OR_TIME, | |
| 64 | + operationString, | |
| 65 | + operationBoolean, | |
| 66 | + } from '/@/views/rule/linkedge/config/formatData'; | |
| 67 | + import { AlarmLogItem } from '/@/api/device/model/deviceConfigModel'; | |
| 68 | + import { AlarmStatus } from '/@/enums/alarmEnum'; | |
| 69 | + import { useMessage } from '/@/hooks/web/useMessage'; | |
| 70 | + import { QuestionCircleOutlined } from '@ant-design/icons-vue'; | |
| 27 | 71 | |
| 28 | 72 | export default defineComponent({ |
| 29 | 73 | name: 'AlarmCenter', |
| 30 | 74 | components: { |
| 75 | + Button, | |
| 31 | 76 | BasicTable, |
| 32 | 77 | TableAction, |
| 33 | 78 | AlarmDetailDrawer, |
| 79 | + QuestionCircleOutlined, | |
| 80 | + Tooltip, | |
| 34 | 81 | }, |
| 35 | 82 | |
| 36 | 83 | setup() { |
| 37 | - const [registerTable, { reload }] = useTable({ | |
| 38 | - title: '告警记录列表', | |
| 39 | - api: getDeviceAlarm, | |
| 40 | - columns: alarmColumns, | |
| 41 | - useSearchForm: true, | |
| 42 | - formConfig: { | |
| 43 | - labelWidth: 120, | |
| 44 | - schemas: alarmSearchSchemas, | |
| 45 | - fieldMapToTime: [['alarmTime', ['startTime', 'endTime'], 'x']], | |
| 46 | - }, | |
| 47 | - bordered: true, | |
| 48 | - showIndexColumn: false, | |
| 49 | - showTableSetting: true, | |
| 50 | - actionColumn: { | |
| 51 | - width: 200, | |
| 52 | - title: '操作', | |
| 53 | - slots: { customRender: 'action' }, | |
| 54 | - fixed: 'right', | |
| 55 | - }, | |
| 56 | - }); | |
| 84 | + const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, getRowSelection }] = | |
| 85 | + useTable({ | |
| 86 | + title: '告警记录列表', | |
| 87 | + api: getDeviceAlarm, | |
| 88 | + columns: alarmColumns, | |
| 89 | + rowKey: 'id', | |
| 90 | + useSearchForm: true, | |
| 91 | + formConfig: { | |
| 92 | + labelWidth: 120, | |
| 93 | + schemas: alarmSearchSchemas, | |
| 94 | + fieldMapToTime: [['alarmTime', ['startTime', 'endTime'], 'x']], | |
| 95 | + }, | |
| 96 | + bordered: true, | |
| 97 | + showIndexColumn: false, | |
| 98 | + showTableSetting: true, | |
| 99 | + clickToRowSelect: false, | |
| 100 | + rowSelection: { | |
| 101 | + type: 'checkbox', | |
| 102 | + getCheckboxProps: (record: AlarmLogItem) => { | |
| 103 | + return { | |
| 104 | + disabled: record.status === AlarmStatus.CLEARED_ACK, | |
| 105 | + }; | |
| 106 | + }, | |
| 107 | + }, | |
| 108 | + actionColumn: { | |
| 109 | + width: 200, | |
| 110 | + title: '操作', | |
| 111 | + slots: { customRender: 'action' }, | |
| 112 | + fixed: 'right', | |
| 113 | + }, | |
| 114 | + }); | |
| 57 | 115 | const [registerDetailDrawer, { openDrawer }] = useDrawer(); |
| 58 | 116 | const handleDetail = (record: Recordable) => { |
| 59 | 117 | openDrawer(true, record); |
| ... | ... | @@ -61,11 +119,137 @@ |
| 61 | 119 | const handleSuccess = () => { |
| 62 | 120 | reload(); |
| 63 | 121 | }; |
| 122 | + const handleViewAlarmDetails = async (record: Recordable) => { | |
| 123 | + await nextTick(); | |
| 124 | + const { details } = record; | |
| 125 | + const deviceIdKeys = Object.keys(details); | |
| 126 | + const detailObject = deviceIdKeys.map((key) => ({ label: key, value: details[key] })); | |
| 127 | + const dataFormat = await handleAlarmDetailFormat(deviceIdKeys); | |
| 128 | + const dataFormats = detailObject.reduce((acc: any, curr: any) => { | |
| 129 | + dataFormat.forEach((item) => { | |
| 130 | + if (item.tbDeviceId === curr.label) { | |
| 131 | + const findName = item.attribute.find( | |
| 132 | + (item) => item.identifier === curr.value.key | |
| 133 | + )?.name; | |
| 134 | + const findLogin = [ | |
| 135 | + ...operationNumber_OR_TIME, | |
| 136 | + ...operationString, | |
| 137 | + ...operationBoolean, | |
| 138 | + ].find((item) => item.value === curr.value.logic)?.symbol; | |
| 139 | + const findAttribute = item.attribute.find( | |
| 140 | + (findItem) => findItem.identifier === curr.value.key | |
| 141 | + ); | |
| 142 | + const value = { | |
| 143 | + ['触发属性']: findName, | |
| 144 | + ['触发条件']: `${findLogin}${curr.value.logicValue}`, | |
| 145 | + ['触发值']: `${curr.value.realValue}${ | |
| 146 | + findAttribute.detail?.dataType?.specs?.unit?.key ?? '' | |
| 147 | + }`, | |
| 148 | + }; | |
| 149 | + const data = { | |
| 150 | + [item.name]: value, | |
| 151 | + }; | |
| 152 | + acc.push(data); | |
| 153 | + } | |
| 154 | + }); | |
| 155 | + return [...acc]; | |
| 156 | + }, []); | |
| 157 | + const objectFormat = dataFormats.reduce((acc: any, curr: any) => { | |
| 158 | + return { | |
| 159 | + ...acc, | |
| 160 | + ...curr, | |
| 161 | + }; | |
| 162 | + }, {}); | |
| 163 | + Modal.info({ | |
| 164 | + title: '告警详情', | |
| 165 | + width: 600, | |
| 166 | + centered: true, | |
| 167 | + maskClosable: true, | |
| 168 | + content: h(JsonPreview, { data: JSON.parse(JSON.stringify(objectFormat)) }), | |
| 169 | + }); | |
| 170 | + }; | |
| 171 | + const handleAlarmDetailFormat = async (keys: string[]) => { | |
| 172 | + const temp: any = []; | |
| 173 | + for (let item of keys) { | |
| 174 | + if (item === 'key' || item === 'data') return []; //旧数据则终止 | |
| 175 | + const deviceDetailRes = await getDeviceDetail(item); | |
| 176 | + const { deviceProfileId } = deviceDetailRes; | |
| 177 | + if (!deviceProfileId) return []; | |
| 178 | + const attributeRes = await getAttribute(deviceProfileId); | |
| 179 | + const dataFormat: any = handleDataFormat(deviceDetailRes, attributeRes); | |
| 180 | + temp.push(dataFormat); | |
| 181 | + } | |
| 182 | + return temp; | |
| 183 | + }; | |
| 184 | + const handleDataFormat = (deviceDetail: any, attributes: any) => { | |
| 185 | + const { name, tbDeviceId, alias } = deviceDetail; | |
| 186 | + const attribute = attributes.map((item) => ({ | |
| 187 | + identifier: item.identifier, | |
| 188 | + name: item.name, | |
| 189 | + detail: item.detail, | |
| 190 | + })); | |
| 191 | + return { | |
| 192 | + name: alias || name, | |
| 193 | + tbDeviceId, | |
| 194 | + attribute, | |
| 195 | + }; | |
| 196 | + }; | |
| 197 | + | |
| 198 | + const getCanBatchClear = computed(() => { | |
| 199 | + const rowSelection = getRowSelection(); | |
| 200 | + const getRows: AlarmLogItem[] = getSelectRows(); | |
| 201 | + | |
| 202 | + return ( | |
| 203 | + !rowSelection.selectedRowKeys?.length || | |
| 204 | + getRows.some( | |
| 205 | + (item) => | |
| 206 | + item.status === AlarmStatus.CLEARED_ACK || item.status === AlarmStatus.CLEARED_UN_ACK | |
| 207 | + ) | |
| 208 | + ); | |
| 209 | + }); | |
| 210 | + | |
| 211 | + const getCanBatchAck = computed(() => { | |
| 212 | + const rowSelection = getRowSelection(); | |
| 213 | + const getRows: AlarmLogItem[] = getSelectRows(); | |
| 214 | + | |
| 215 | + return ( | |
| 216 | + !rowSelection.selectedRowKeys?.length || | |
| 217 | + getRows.some( | |
| 218 | + (item) => | |
| 219 | + item.status === AlarmStatus.CLEARED_ACK || item.status === AlarmStatus.ACTIVE_ACK | |
| 220 | + ) | |
| 221 | + ); | |
| 222 | + }); | |
| 223 | + | |
| 224 | + const { createMessage } = useMessage(); | |
| 225 | + const handleBatchAck = async () => { | |
| 226 | + const ids = getSelectRows<AlarmLogItem>().map((item) => item.id); | |
| 227 | + if (!ids.length) return; | |
| 228 | + await doBatchAckAlarm(ids); | |
| 229 | + createMessage.success('操作成功'); | |
| 230 | + clearSelectedRowKeys(); | |
| 231 | + reload(); | |
| 232 | + }; | |
| 233 | + | |
| 234 | + const handleBatchClear = async () => { | |
| 235 | + const ids = getSelectRows<AlarmLogItem>().map((item) => item.id); | |
| 236 | + if (!ids.length) return; | |
| 237 | + await doBatchClearAlarm(ids); | |
| 238 | + createMessage.success('操作成功'); | |
| 239 | + clearSelectedRowKeys(); | |
| 240 | + reload(); | |
| 241 | + }; | |
| 242 | + | |
| 64 | 243 | return { |
| 65 | 244 | registerTable, |
| 66 | 245 | registerDetailDrawer, |
| 67 | 246 | handleDetail, |
| 68 | 247 | handleSuccess, |
| 248 | + handleViewAlarmDetails, | |
| 249 | + handleBatchAck, | |
| 250 | + handleBatchClear, | |
| 251 | + getCanBatchAck, | |
| 252 | + getCanBatchClear, | |
| 69 | 253 | }; |
| 70 | 254 | }, |
| 71 | 255 | }); | ... | ... |
| ... | ... | @@ -116,7 +116,7 @@ |
| 116 | 116 | const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); |
| 117 | 117 | const [registerModal, { openModal }] = useModal(); |
| 118 | 118 | // 表格hooks |
| 119 | - const [registerTable, { reload, setProps }] = useTable({ | |
| 119 | + const [registerTable, { reload, setProps, clearSelectedRowKeys }] = useTable({ | |
| 120 | 120 | title: '视频列表', |
| 121 | 121 | api: cameraPage, |
| 122 | 122 | columns, |
| ... | ... | @@ -145,6 +145,7 @@ |
| 145 | 145 | // 刷新 |
| 146 | 146 | const handleSuccess = () => { |
| 147 | 147 | reload(); |
| 148 | + clearSelectedRowKeys(); | |
| 148 | 149 | }; |
| 149 | 150 | const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( |
| 150 | 151 | deleteCameraManage, | ... | ... |
| ... | ... | @@ -93,6 +93,7 @@ export const formSchema: FormSchema[] = [ |
| 93 | 93 | return { |
| 94 | 94 | listType: 'picture-card', |
| 95 | 95 | maxFileLimit: 1, |
| 96 | + accept: '.png,.jpg,.jpeg,.gif', | |
| 96 | 97 | api: async (file: File) => { |
| 97 | 98 | try { |
| 98 | 99 | const formData = new FormData(); |
| ... | ... | @@ -110,6 +111,10 @@ export const formSchema: FormSchema[] = [ |
| 110 | 111 | onPreview: (fileList: FileItem) => { |
| 111 | 112 | createImgPreview({ imageList: [fileList.url!] }); |
| 112 | 113 | }, |
| 114 | + // showUploadList: { | |
| 115 | + // showDownloadIcon: true, | |
| 116 | + // showRemoveIcon: true, | |
| 117 | + // }, | |
| 113 | 118 | }; |
| 114 | 119 | }, |
| 115 | 120 | }, | ... | ... |
| ... | ... | @@ -11,7 +11,7 @@ |
| 11 | 11 | import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal'; |
| 12 | 12 | import { PageWrapper } from '/@/components/Page'; |
| 13 | 13 | import { BasicForm, useForm } from '/@/components/Form'; |
| 14 | - import { ConfigurationPermission, searchFormSchema } from './center.data'; | |
| 14 | + import { ConfigurationPermission, Platform, searchFormSchema } from './center.data'; | |
| 15 | 15 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 16 | 16 | import { Authority } from '/@/components/Authority'; |
| 17 | 17 | import { isDevMode } from '/@/utils/env'; |
| ... | ... | @@ -30,6 +30,7 @@ |
| 30 | 30 | import { ViewType } from '../../visual/board/config/panelDetail'; |
| 31 | 31 | import { useRole } from '/@/hooks/business/useRole'; |
| 32 | 32 | import { useClipboard } from '@vueuse/core'; |
| 33 | + import { Icon } from '/@/components/Icon'; | |
| 33 | 34 | |
| 34 | 35 | const listColumn = ref(5); |
| 35 | 36 | |
| ... | ... | @@ -135,13 +136,19 @@ |
| 135 | 136 | const handlePreview = (record: ConfigurationCenterItemsModal) => { |
| 136 | 137 | if (!unref(getPreviewFlag)) return; |
| 137 | 138 | window.open( |
| 138 | - `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}&lightbox=1` | |
| 139 | + `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${ | |
| 140 | + record!.id | |
| 141 | + }&lightbox=1&organizationId=${record.organizationId}` | |
| 139 | 142 | ); |
| 140 | 143 | }; |
| 141 | 144 | |
| 142 | 145 | const handleDesign = (record: ConfigurationCenterItemsModal) => { |
| 143 | 146 | if (!unref(getDesignFlag)) return; |
| 144 | - window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`); | |
| 147 | + window.open( | |
| 148 | + `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${ | |
| 149 | + record!.id | |
| 150 | + }&organizationId=${record.organizationId}` | |
| 151 | + ); | |
| 145 | 152 | }; |
| 146 | 153 | |
| 147 | 154 | const handleDelete = async (record: ConfigurationCenterItemsModal) => { |
| ... | ... | @@ -164,6 +171,7 @@ |
| 164 | 171 | searchParams.set('configurationId', record.id); |
| 165 | 172 | searchParams.set('publicId', record.publicId || ''); |
| 166 | 173 | searchParams.set('lightbox', '1'); |
| 174 | + searchParams.set('organizationId', record!.organizationId || ''); | |
| 167 | 175 | return `${origin}${configurationPrefix}/?${searchParams.toString()}`; |
| 168 | 176 | }; |
| 169 | 177 | |
| ... | ... | @@ -187,7 +195,7 @@ |
| 187 | 195 | |
| 188 | 196 | onMounted(() => { |
| 189 | 197 | const clientHeight = document.documentElement.clientHeight; |
| 190 | - const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect; | |
| 198 | + const rect = getBoundingClientRect(unref(listEl)!.$el! as HTMLElement) as DOMRect; | |
| 191 | 199 | // margin-top 24 height 24 |
| 192 | 200 | const paginationHeight = 24 + 24 + 8; |
| 193 | 201 | // list pading top 8 maring-top 8 extra slot 56 |
| ... | ... | @@ -322,7 +330,16 @@ |
| 322 | 330 | </template> |
| 323 | 331 | <template #description> |
| 324 | 332 | <div class="truncate h-11"> |
| 325 | - <div class="truncate">{{ item.organizationDTO.name }}</div> | |
| 333 | + <div class="truncate flex justify-between items-center"> | |
| 334 | + <div>{{ item.organizationDTO.name }}</div> | |
| 335 | + <Icon | |
| 336 | + :icon=" | |
| 337 | + item.platform === Platform.PC | |
| 338 | + ? 'ri:computer-line' | |
| 339 | + : 'clarity:mobile-phone-solid' | |
| 340 | + " | |
| 341 | + /> | |
| 342 | + </div> | |
| 326 | 343 | <div class="truncate">{{ item.remark || '' }} </div> |
| 327 | 344 | </div> |
| 328 | 345 | </template> | ... | ... |
| ... | ... | @@ -22,7 +22,7 @@ |
| 22 | 22 | watch( |
| 23 | 23 | () => props.customerList, |
| 24 | 24 | (newValue) => { |
| 25 | - const transferResult = newValue.map((item) => [item.ts, item.value]); | |
| 25 | + const transferResult = newValue.map((item) => [item.date, item.value]); | |
| 26 | 26 | |
| 27 | 27 | setOptions({ |
| 28 | 28 | tooltip: { |
| ... | ... | @@ -35,7 +35,7 @@ |
| 35 | 35 | }, |
| 36 | 36 | }, |
| 37 | 37 | xAxis: { |
| 38 | - type: 'time', | |
| 38 | + type: 'category', | |
| 39 | 39 | splitLine: { |
| 40 | 40 | show: true, |
| 41 | 41 | lineStyle: { |
| ... | ... | @@ -90,7 +90,7 @@ |
| 90 | 90 | trend: props.type, |
| 91 | 91 | }); |
| 92 | 92 | |
| 93 | - const transferResult = res.map((item) => [item.ts, item.value]); | |
| 93 | + const transferResult = res.map((item) => [item.date, item.value]); | |
| 94 | 94 | setOptions({ |
| 95 | 95 | tooltip: { |
| 96 | 96 | trigger: 'axis', | ... | ... |
| ... | ... | @@ -2,9 +2,10 @@ |
| 2 | 2 | <div ref="chartRef" :style="{ height, width }"></div> |
| 3 | 3 | </template> |
| 4 | 4 | <script lang="ts" setup> |
| 5 | - import { ref, Ref, withDefaults, onMounted, watch } from 'vue'; | |
| 5 | + import { ref, Ref, onMounted, watch } from 'vue'; | |
| 6 | 6 | import { useECharts } from '/@/hooks/web/useECharts'; |
| 7 | 7 | import { getTrendData } from '/@/api/dashboard'; |
| 8 | + import { getDateByShortcutQueryKey, ShortcutQueryKeyEnum } from '../hooks/useDate'; | |
| 8 | 9 | |
| 9 | 10 | interface Props { |
| 10 | 11 | width?: string; |
| ... | ... | @@ -30,7 +31,7 @@ |
| 30 | 31 | }, |
| 31 | 32 | }, |
| 32 | 33 | xAxis: { |
| 33 | - type: 'time', | |
| 34 | + type: 'category', | |
| 34 | 35 | splitLine: { |
| 35 | 36 | show: true, |
| 36 | 37 | lineStyle: { |
| ... | ... | @@ -77,15 +78,12 @@ |
| 77 | 78 | const chartRef = ref<HTMLDivElement | null>(null); |
| 78 | 79 | const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
| 79 | 80 | onMounted(async () => { |
| 80 | - const endTs = Date.now(); | |
| 81 | 81 | const res = await getTrendData({ |
| 82 | - startTs: endTs - 2592000000, | |
| 83 | - endTs, | |
| 84 | - interval: 86400000, | |
| 82 | + ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_1_MONTH), | |
| 85 | 83 | trend: 'CUSTOMER_TREND', |
| 86 | 84 | }); |
| 87 | 85 | |
| 88 | - const transferResult = res.map((item) => [item.ts, item.value]); | |
| 86 | + const transferResult = res.map((item) => [item.date, item.value]); | |
| 89 | 87 | setOptions({ |
| 90 | 88 | tooltip: { |
| 91 | 89 | trigger: 'axis', |
| ... | ... | @@ -97,7 +95,7 @@ |
| 97 | 95 | }, |
| 98 | 96 | }, |
| 99 | 97 | xAxis: { |
| 100 | - type: 'time', | |
| 98 | + type: 'category', | |
| 101 | 99 | splitLine: { |
| 102 | 100 | show: true, |
| 103 | 101 | lineStyle: { | ... | ... |
| ... | ... | @@ -19,7 +19,8 @@ |
| 19 | 19 | <div>1小时: 查询最近1小时的数据,间隔时间为5分钟.</div> |
| 20 | 20 | <div> |
| 21 | 21 | 间隔时间: |
| 22 | - 以当前时间作为结束时间,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询. | |
| 22 | + <span class="font-bold underline">以当前时间作为结束时间</span> | |
| 23 | + ,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询. | |
| 23 | 24 | </div> |
| 24 | 25 | </template> |
| 25 | 26 | <QuestionCircleOutlined class="!mr-1" /> |
| ... | ... | @@ -36,7 +37,15 @@ |
| 36 | 37 | <DatePicker |
| 37 | 38 | @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)" |
| 38 | 39 | v-model:value="dateValue" |
| 39 | - /> | |
| 40 | + > | |
| 41 | + <Button | |
| 42 | + type="link" | |
| 43 | + class="!px-0" | |
| 44 | + :style="dateValue ? { color: '#0960bd', fontWeight: 500 } : { color: '#000000d9' }" | |
| 45 | + > | |
| 46 | + {{ dateValue ? (dateValue as moment.Moment).format('YYYY-MM-DD') : '自定义' }} | |
| 47 | + </Button> | |
| 48 | + </DatePicker> | |
| 40 | 49 | </div> |
| 41 | 50 | </template> |
| 42 | 51 | <div v-if="activeKey === '1'"> |
| ... | ... | @@ -95,6 +104,21 @@ |
| 95 | 104 | > |
| 96 | 105 | <template #extra> |
| 97 | 106 | <div class="extra-date"> |
| 107 | + <Tooltip :overlayStyle="{ maxWidth: '340px' }"> | |
| 108 | + <template #title> | |
| 109 | + <section> | |
| 110 | + <div>最近一个月: 查询最近一个月的数据,间隔时间为1天.</div> | |
| 111 | + <div>最近三个月: 查询最近三个月的数据,间隔时间为1天.</div> | |
| 112 | + <div>最近一年: 查询最近一年的数据,间隔时间为1月.</div> | |
| 113 | + <div> | |
| 114 | + 间隔时间: | |
| 115 | + <span class="font-bold underline"> 以当天的(最后时间)作为结束时间 </span> | |
| 116 | + ,往前推移对应天数或月的时间作为开始时间,然后在此时间区间内进行分组聚合查询. | |
| 117 | + </div> | |
| 118 | + </section> | |
| 119 | + </template> | |
| 120 | + <QuestionCircleOutlined class="!mr-2 cursor-pointer" /> | |
| 121 | + </Tooltip> | |
| 98 | 122 | <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value"> |
| 99 | 123 | <span |
| 100 | 124 | @click="quickQueryTenantOrCustomerTime(index, item.value)" |
| ... | ... | @@ -104,9 +128,31 @@ |
| 104 | 128 | </template> |
| 105 | 129 | <DatePicker.RangePicker |
| 106 | 130 | @change="onDateCustomerChange" |
| 131 | + :disabledDate="handleDisableDate" | |
| 132 | + @calendarChange="handleCalendarChange" | |
| 107 | 133 | size="small" |
| 108 | 134 | v-model:value="customerDateValue" |
| 109 | - /> | |
| 135 | + :showTime="{ | |
| 136 | + defaultValue: [dateUtil('00:00:00', 'HH:mm:ss'), dateUtil('23:59:59', 'HH:mm:ss')], | |
| 137 | + }" | |
| 138 | + > | |
| 139 | + <Button | |
| 140 | + type="link" | |
| 141 | + class="!px-0" | |
| 142 | + :style=" | |
| 143 | + customerDateValue && customerDateValue.length | |
| 144 | + ? { color: '#0960bd', fontWeight: 500 } | |
| 145 | + : { color: '#000000d9' } | |
| 146 | + " | |
| 147 | + >{{ | |
| 148 | + customerDateValue && customerDateValue.length | |
| 149 | + ? `${(customerDateValue?.[0] as moment.Moment)?.format('YYYY-MM-DD')} | |
| 150 | + ~ | |
| 151 | + ${(customerDateValue?.[1] as moment.Moment)?.format('YYYY-MM-DD')}` | |
| 152 | + : '自定义' | |
| 153 | + }}</Button | |
| 154 | + > | |
| 155 | + </DatePicker.RangePicker> | |
| 110 | 156 | </div> |
| 111 | 157 | </template> |
| 112 | 158 | <CustomerTrend :customerTrendList="customerTrendList" /> |
| ... | ... | @@ -114,15 +160,15 @@ |
| 114 | 160 | </div> |
| 115 | 161 | </template> |
| 116 | 162 | <script lang="ts" setup> |
| 117 | - import { ref, reactive } from 'vue'; | |
| 118 | - import { Card, DatePicker, Tooltip } from 'ant-design-vue'; | |
| 163 | + import { ref, reactive, unref } from 'vue'; | |
| 164 | + import { Card, DatePicker, Tooltip, Button } from 'ant-design-vue'; | |
| 119 | 165 | import VisitAnalysis from './VisitAnalysis.vue'; |
| 120 | 166 | import VisitAnalysisBar from './VisitAnalysisBar.vue'; |
| 121 | 167 | import { RoleEnum, isAdmin } from '/@/enums/roleEnum'; |
| 122 | 168 | import { useWebSocket } from '@vueuse/core'; |
| 123 | 169 | import { getAuthCache } from '/@/utils/auth'; |
| 124 | 170 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; |
| 125 | - import { formatToDateTime } from '/@/utils/dateUtil'; | |
| 171 | + import { dateUtil, formatToDateTime } from '/@/utils/dateUtil'; | |
| 126 | 172 | import CustomerTrend from './CustomerTrend.vue'; |
| 127 | 173 | // import TenantTrend from './TenantTrend.vue'; |
| 128 | 174 | import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; |
| ... | ... | @@ -130,6 +176,7 @@ |
| 130 | 176 | import { getTrendData } from '/@/api/dashboard'; |
| 131 | 177 | import { useGlobSetting } from '/@/hooks/setting'; |
| 132 | 178 | import { QuestionCircleOutlined } from '@ant-design/icons-vue'; |
| 179 | + import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface'; | |
| 133 | 180 | |
| 134 | 181 | defineExpose({ |
| 135 | 182 | isAdmin, |
| ... | ... | @@ -480,6 +527,19 @@ |
| 480 | 527 | // onDateTenantChange, |
| 481 | 528 | onDateCustomerChange, |
| 482 | 529 | } = useDate(); |
| 530 | + | |
| 531 | + const handleCalendarChange = (val: RangePickerValue) => { | |
| 532 | + customerDateValue.value = val as any; | |
| 533 | + }; | |
| 534 | + | |
| 535 | + const handleDisableDate = (current: moment.Moment) => { | |
| 536 | + if (!current) return true; | |
| 537 | + if (!unref(customerDateValue) || unref(customerDateValue).length === 0) { | |
| 538 | + return false; | |
| 539 | + } | |
| 540 | + const diffDate = current.diff(unref(customerDateValue)[0], 'days'); | |
| 541 | + return Math.abs(diffDate) > 30; | |
| 542 | + }; | |
| 483 | 543 | </script> |
| 484 | 544 | |
| 485 | 545 | <style lang="less"> | ... | ... |
| ... | ... | @@ -29,7 +29,8 @@ |
| 29 | 29 | <div>1小时: 查询最近1小时的数据,间隔时间为5分钟.</div> |
| 30 | 30 | <div> |
| 31 | 31 | 间隔时间: |
| 32 | - 以当前时间作为结束时间,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询. | |
| 32 | + <span class="font-bold underline">以当前时间作为结束时间</span> | |
| 33 | + ,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询. | |
| 33 | 34 | </div> |
| 34 | 35 | </template> |
| 35 | 36 | <QuestionCircleOutlined class="!mr-1" /> |
| ... | ... | @@ -46,7 +47,15 @@ |
| 46 | 47 | <DatePicker |
| 47 | 48 | @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)" |
| 48 | 49 | v-model:value="dateValue" |
| 49 | - /> | |
| 50 | + > | |
| 51 | + <Button | |
| 52 | + type="link" | |
| 53 | + class="!px-0" | |
| 54 | + :style="dateValue ? { color: '#0960bd', fontWeight: 500 } : { color: '#000000d9' }" | |
| 55 | + > | |
| 56 | + {{ dateValue ? (dateValue as moment.Moment).format('YYYY-MM-DD') : '自定义' }} | |
| 57 | + </Button> | |
| 58 | + </DatePicker> | |
| 50 | 59 | </div> |
| 51 | 60 | </template> |
| 52 | 61 | <!-- <div v-if="activeKey === '1'"> |
| ... | ... | @@ -80,6 +89,21 @@ |
| 80 | 89 | > |
| 81 | 90 | <template #extra> |
| 82 | 91 | <div class="extra-date"> |
| 92 | + <Tooltip :overlayStyle="{ maxWidth: '340px' }"> | |
| 93 | + <template #title> | |
| 94 | + <section> | |
| 95 | + <div>最近一个月: 查询最近一个月的数据,间隔时间为1天.</div> | |
| 96 | + <div>最近三个月: 查询最近三个月的数据,间隔时间为1天.</div> | |
| 97 | + <div>最近一年: 查询最近一年的数据,间隔时间为1月.</div> | |
| 98 | + <div> | |
| 99 | + 间隔时间: | |
| 100 | + <span class="font-bold underline"> 以当天的(最后时间)作为结束时间 </span> | |
| 101 | + ,往前推移对应天数或月的时间作为开始时间,然后在此时间区间内进行分组聚合查询. | |
| 102 | + </div> | |
| 103 | + </section> | |
| 104 | + </template> | |
| 105 | + <QuestionCircleOutlined class="!mr-2 cursor-pointer" /> | |
| 106 | + </Tooltip> | |
| 83 | 107 | <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value"> |
| 84 | 108 | <span |
| 85 | 109 | @click="quickQueryTenantOrCustomerTime(index, item.value, 'tenant')" |
| ... | ... | @@ -90,8 +114,30 @@ |
| 90 | 114 | <DatePicker.RangePicker |
| 91 | 115 | @change="onDateTenantChange" |
| 92 | 116 | size="small" |
| 117 | + @calendarChange="handleCalendarChange" | |
| 118 | + :disabledDate="handleDisableDate" | |
| 93 | 119 | v-model:value="tenantDateValue" |
| 94 | - /> | |
| 120 | + :showTime="{ | |
| 121 | + defaultValue: [dateUtil('00:00:00', 'HH:mm:ss'), dateUtil('23:59:59', 'HH:mm:ss')], | |
| 122 | + }" | |
| 123 | + > | |
| 124 | + <Button | |
| 125 | + type="link" | |
| 126 | + class="!px-0" | |
| 127 | + :style=" | |
| 128 | + tenantDateValue && tenantDateValue.length | |
| 129 | + ? { color: '#0960bd', fontWeight: 500 } | |
| 130 | + : { color: '#000000d9' } | |
| 131 | + " | |
| 132 | + >{{ | |
| 133 | + tenantDateValue && tenantDateValue.length | |
| 134 | + ? `${(tenantDateValue?.[0] as moment.Moment)?.format('YYYY-MM-DD')} | |
| 135 | + ~ | |
| 136 | + ${(tenantDateValue?.[1] as moment.Moment)?.format('YYYY-MM-DD')}` | |
| 137 | + : '自定义' | |
| 138 | + }}</Button | |
| 139 | + > | |
| 140 | + </DatePicker.RangePicker> | |
| 95 | 141 | </div> |
| 96 | 142 | </template> |
| 97 | 143 | <TenantTrend :tenantTrendList="tenantTrendList" /> |
| ... | ... | @@ -123,8 +169,8 @@ |
| 123 | 169 | </div> |
| 124 | 170 | </template> |
| 125 | 171 | <script lang="ts" setup> |
| 126 | - import { ref, reactive } from 'vue'; | |
| 127 | - import { Card, DatePicker, Tooltip } from 'ant-design-vue'; | |
| 172 | + import { ref, reactive, unref } from 'vue'; | |
| 173 | + import { Card, DatePicker, Tooltip, Button } from 'ant-design-vue'; | |
| 128 | 174 | import { QuestionCircleOutlined } from '@ant-design/icons-vue'; |
| 129 | 175 | // import VisitAnalysis from './VisitAnalysis.vue'; |
| 130 | 176 | import VisitAnalysisBar from './VisitAnalysisBar.vue'; |
| ... | ... | @@ -132,13 +178,14 @@ |
| 132 | 178 | import { useWebSocket } from '@vueuse/core'; |
| 133 | 179 | import { getAuthCache } from '/@/utils/auth'; |
| 134 | 180 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; |
| 135 | - import { formatToDateTime } from '/@/utils/dateUtil'; | |
| 181 | + import { dateUtil, formatToDateTime } from '/@/utils/dateUtil'; | |
| 136 | 182 | // import CustomerTrend from './CustomerTrend.vue'; |
| 137 | 183 | import TenantTrend from './TenantTrend.vue'; |
| 138 | 184 | import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; |
| 139 | 185 | import { useDate } from '../hooks/useDate'; |
| 140 | 186 | import { getTrendData } from '/@/api/dashboard'; |
| 141 | 187 | import { useGlobSetting } from '/@/hooks/setting'; |
| 188 | + import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface'; | |
| 142 | 189 | |
| 143 | 190 | defineExpose({ |
| 144 | 191 | isAdmin, |
| ... | ... | @@ -445,7 +492,7 @@ |
| 445 | 492 | if (activeIndex.value === index) return; |
| 446 | 493 | activeIndex.value = index; |
| 447 | 494 | dateValue.value = ''; |
| 448 | - console.log(interval); | |
| 495 | + | |
| 449 | 496 | if (isCustomer) { |
| 450 | 497 | if (activeKey.value === '1') { |
| 451 | 498 | const data = await getTrendData({ |
| ... | ... | @@ -498,6 +545,19 @@ |
| 498 | 545 | onDateTenantChange, |
| 499 | 546 | // onDateCustomerChange, |
| 500 | 547 | } = useDate(); |
| 548 | + | |
| 549 | + const handleCalendarChange = (val: RangePickerValue) => { | |
| 550 | + tenantDateValue.value = val as any; | |
| 551 | + }; | |
| 552 | + | |
| 553 | + const handleDisableDate = (current: moment.Moment) => { | |
| 554 | + if (!current) return true; | |
| 555 | + if (!unref(tenantDateValue) || unref(tenantDateValue).length === 0) { | |
| 556 | + return false; | |
| 557 | + } | |
| 558 | + const diffDate = current.diff(unref(tenantDateValue)[0], 'days'); | |
| 559 | + return Math.abs(diffDate) > 30; | |
| 560 | + }; | |
| 501 | 561 | </script> |
| 502 | 562 | |
| 503 | 563 | <style lang="less"> | ... | ... |
| ... | ... | @@ -2,9 +2,10 @@ |
| 2 | 2 | <div ref="chartRef" :style="{ height, width }"></div> |
| 3 | 3 | </template> |
| 4 | 4 | <script lang="ts" setup> |
| 5 | - import { ref, Ref, withDefaults, onMounted, watch } from 'vue'; | |
| 5 | + import { ref, Ref, onMounted, watch } from 'vue'; | |
| 6 | 6 | import { useECharts } from '/@/hooks/web/useECharts'; |
| 7 | 7 | import { getTrendData } from '/@/api/dashboard/index'; |
| 8 | + import { getDateByShortcutQueryKey, ShortcutQueryKeyEnum } from '../hooks/useDate'; | |
| 8 | 9 | interface Props { |
| 9 | 10 | width?: string; |
| 10 | 11 | height?: string; |
| ... | ... | @@ -30,7 +31,7 @@ |
| 30 | 31 | }, |
| 31 | 32 | }, |
| 32 | 33 | xAxis: { |
| 33 | - type: 'time', | |
| 34 | + type: 'category', | |
| 34 | 35 | splitLine: { |
| 35 | 36 | show: true, |
| 36 | 37 | lineStyle: { |
| ... | ... | @@ -77,14 +78,11 @@ |
| 77 | 78 | const chartRef = ref<HTMLDivElement | null>(null); |
| 78 | 79 | const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
| 79 | 80 | onMounted(async () => { |
| 80 | - const endTs = Date.now(); | |
| 81 | 81 | const res = await getTrendData({ |
| 82 | - startTs: endTs - 2592000000, | |
| 83 | - endTs, | |
| 84 | - interval: 86400000, | |
| 82 | + ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_1_MONTH), | |
| 85 | 83 | trend: 'TENANT_TREND', |
| 86 | 84 | }); |
| 87 | - const transferResult = res.map((item) => [item.ts, item.value]); | |
| 85 | + const transferResult = res.map((item) => [item.date, item.value]); | |
| 88 | 86 | setOptions({ |
| 89 | 87 | tooltip: { |
| 90 | 88 | trigger: 'axis', |
| ... | ... | @@ -96,7 +94,7 @@ |
| 96 | 94 | }, |
| 97 | 95 | }, |
| 98 | 96 | xAxis: { |
| 99 | - type: 'time', | |
| 97 | + type: 'category', | |
| 100 | 98 | splitLine: { |
| 101 | 99 | show: true, |
| 102 | 100 | lineStyle: { | ... | ... |
| 1 | -import { formatToDateTime } from '/@/utils/dateUtil'; | |
| 2 | -import { ref } from 'vue'; | |
| 1 | +import { dateUtil } from '/@/utils/dateUtil'; | |
| 2 | +import { Ref, ref } from 'vue'; | |
| 3 | 3 | import { getTrendData } from '/@/api/dashboard'; |
| 4 | +import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface'; | |
| 5 | +import moment from 'moment'; | |
| 6 | + | |
| 7 | +export enum ShortcutQueryKeyEnum { | |
| 8 | + LATEST_1_MONTH = 'LATEST_1_MONTH', | |
| 9 | + LATEST_3_MONTH = 'LATEST_3_MONTH', | |
| 10 | + LATEST_1_YEAR = 'LATEST_1_YEAR', | |
| 11 | +} | |
| 12 | + | |
| 13 | +export function getDateByShortcutQueryKey(value: ShortcutQueryKeyEnum) { | |
| 14 | + const mapping = { | |
| 15 | + [ShortcutQueryKeyEnum.LATEST_1_MONTH]: () => { | |
| 16 | + return { | |
| 17 | + startTs: dateUtil().subtract(1, 'month').startOf('day').valueOf(), | |
| 18 | + interval: 24 * 60 * 60 * 1000, | |
| 19 | + }; | |
| 20 | + }, | |
| 21 | + [ShortcutQueryKeyEnum.LATEST_3_MONTH]: () => { | |
| 22 | + return { | |
| 23 | + startTs: dateUtil().subtract(3, 'month').startOf('day').valueOf(), | |
| 24 | + interval: 24 * 60 * 60 * 1000, | |
| 25 | + }; | |
| 26 | + }, | |
| 27 | + [ShortcutQueryKeyEnum.LATEST_1_YEAR]: () => { | |
| 28 | + return { | |
| 29 | + startTs: dateUtil().subtract(1, 'year').startOf('day').valueOf(), | |
| 30 | + interval: 30 * 24 * 60 * 60 * 1000, | |
| 31 | + }; | |
| 32 | + }, | |
| 33 | + }; | |
| 34 | + | |
| 35 | + const result = mapping?.[value]?.(); | |
| 36 | + | |
| 37 | + return { | |
| 38 | + ...result, | |
| 39 | + endTs: dateUtil().add(1, 'day').startOf('day').valueOf(), | |
| 40 | + }; | |
| 41 | +} | |
| 4 | 42 | |
| 5 | 43 | export function useDate() { |
| 6 | 44 | const tenantDateValue = ref([]); |
| 7 | - const customerDateValue = ref([]); | |
| 8 | - const tenantTrendList = ref([]); | |
| 9 | - const customerTrendList = ref([]); | |
| 45 | + const customerDateValue = ref<RangePickerValue>([]); | |
| 46 | + const tenantTrendList = ref<[string, string][]>([]); | |
| 47 | + const customerTrendList = ref<[string, string][]>([]); | |
| 10 | 48 | const activeTenantIndex = ref(0); |
| 11 | 49 | const activeCustomerIndex = ref(0); |
| 12 | 50 | const TenantOrCustomerDateList = ref([ |
| 13 | - { label: '30天', value: 2592000000 }, | |
| 14 | - { label: '最近三个月', value: 7776000000 }, | |
| 15 | - { label: '最近一年', value: 31536000000 }, | |
| 51 | + { label: '最近一个月', value: ShortcutQueryKeyEnum.LATEST_1_MONTH }, | |
| 52 | + { label: '最近三个月', value: ShortcutQueryKeyEnum.LATEST_3_MONTH }, | |
| 53 | + { label: '最近一年', value: ShortcutQueryKeyEnum.LATEST_1_YEAR }, | |
| 16 | 54 | ]); |
| 17 | 55 | |
| 18 | 56 | // 租户趋势和客户趋势快速选择时间 |
| 19 | 57 | async function quickQueryTenantOrCustomerTime( |
| 20 | 58 | index: number, |
| 21 | - value: number, | |
| 59 | + value: ShortcutQueryKeyEnum, | |
| 22 | 60 | flag: 'tenant' | 'customer' |
| 23 | 61 | ) { |
| 24 | - const endTs = Date.now(); | |
| 25 | 62 | if (flag === 'tenant') { |
| 26 | 63 | if (activeTenantIndex.value === index) return; |
| 27 | 64 | activeTenantIndex.value = index; |
| 28 | 65 | tenantDateValue.value = []; |
| 29 | 66 | const res = await getTrendData({ |
| 30 | - startTs: endTs - value, | |
| 31 | - endTs, | |
| 32 | - interval: value === 2592000000 ? 86400000 : value === 7776000000 ? 172800000 : 2592000000, | |
| 67 | + ...getDateByShortcutQueryKey(value), | |
| 33 | 68 | trend: 'TENANT_TREND', |
| 34 | 69 | }); |
| 35 | - tenantTrendList.value = res.map((item) => [item.ts, item.value]); | |
| 70 | + tenantTrendList.value = res.map((item) => [item.date, item.value]); | |
| 36 | 71 | } else { |
| 37 | 72 | if (activeCustomerIndex.value === index) return; |
| 38 | 73 | activeCustomerIndex.value = index; |
| 39 | 74 | customerDateValue.value = []; |
| 40 | 75 | const res = await getTrendData({ |
| 41 | - startTs: endTs - value, | |
| 42 | - endTs, | |
| 43 | - interval: value === 2592000000 ? 86400000 : value === 7776000000 ? 172800000 : 2592000000, | |
| 76 | + ...getDateByShortcutQueryKey(value), | |
| 44 | 77 | trend: 'CUSTOMER_TREND', |
| 45 | 78 | }); |
| 46 | - customerTrendList.value = res.map((item) => [item.ts, item.value]); | |
| 79 | + customerTrendList.value = res.map((item) => [item.date, item.value]); | |
| 47 | 80 | } |
| 48 | 81 | } |
| 49 | 82 | |
| 50 | 83 | // 获取选中的时间范围内的数据 |
| 51 | - async function getDateData(startTs, endTs, trend: 'CUSTOMER_TREND' | 'TENANT_TREND', list) { | |
| 52 | - // 计算时间间隔 | |
| 53 | - function computedInterval(startTs: number, endTs: number) { | |
| 54 | - /** | |
| 55 | - * 选择的时间间隔 | |
| 56 | - * <=1 2h | |
| 57 | - * <=30 1day | |
| 58 | - * >30<90 2day | |
| 59 | - * >90 1month | |
| 60 | - */ | |
| 61 | - let interval = 86400000; | |
| 62 | - if (endTs - startTs <= 86400000) { | |
| 63 | - interval = 7200000; | |
| 64 | - } else if (endTs - startTs <= 2592000000) { | |
| 65 | - interval = 86400000; | |
| 66 | - } else if (endTs - startTs > 2592000000 && endTs - startTs < 7776000000) { | |
| 67 | - interval = 172800000; | |
| 68 | - } else if (endTs - startTs > 7776000000) { | |
| 69 | - interval = 2592000000; | |
| 70 | - } | |
| 71 | - return interval; | |
| 72 | - } | |
| 73 | - startTs = parseInt(formatToDateTime(startTs, 'x')) - 86400000; | |
| 74 | - endTs = parseInt(formatToDateTime(endTs, 'x')); | |
| 84 | + async function getDateData( | |
| 85 | + startTs: moment.Moment, | |
| 86 | + endTs: moment.Moment, | |
| 87 | + trend: 'CUSTOMER_TREND' | 'TENANT_TREND', | |
| 88 | + list: Ref<[string, string][]> | |
| 89 | + ) { | |
| 75 | 90 | const res = await getTrendData({ |
| 76 | - startTs, | |
| 77 | - endTs, | |
| 78 | - interval: computedInterval(startTs, endTs), | |
| 91 | + startTs: startTs.valueOf(), | |
| 92 | + endTs: endTs.valueOf(), | |
| 93 | + interval: 24 * 60 * 60 * 1000, | |
| 79 | 94 | trend, |
| 80 | 95 | }); |
| 81 | - list.value = res.map((item) => [item.ts, item.value]); | |
| 96 | + list.value = res.map((item) => [item.date, item.value]); | |
| 82 | 97 | } |
| 83 | 98 | |
| 84 | 99 | // 租户选择日期 |
| 85 | - function onDateTenantChange(_, dateString) { | |
| 86 | - if (!_.length) return; | |
| 87 | - const [startTs, endTs] = dateString; | |
| 100 | + function onDateTenantChange(range: RangePickerValue) { | |
| 101 | + if (!range.length) return; | |
| 102 | + const [startTs, endTs] = range; | |
| 88 | 103 | activeTenantIndex.value = -1; |
| 89 | - getDateData(startTs, endTs, 'TENANT_TREND', tenantTrendList); | |
| 104 | + getDateData(startTs as moment.Moment, endTs as moment.Moment, 'TENANT_TREND', tenantTrendList); | |
| 90 | 105 | } |
| 91 | 106 | // 客户趋势选择日期 |
| 92 | - function onDateCustomerChange(_, dateString) { | |
| 93 | - if (!_.length) return; | |
| 94 | - const [startTs, endTs] = dateString; | |
| 107 | + function onDateCustomerChange(range: RangePickerValue) { | |
| 108 | + if (!range.length) return; | |
| 109 | + const [startTs, endTs] = range; | |
| 95 | 110 | activeCustomerIndex.value = -1; |
| 96 | - getDateData(startTs, endTs, 'CUSTOMER_TREND', customerTrendList); | |
| 111 | + getDateData( | |
| 112 | + startTs as moment.Moment, | |
| 113 | + endTs as moment.Moment, | |
| 114 | + 'CUSTOMER_TREND', | |
| 115 | + customerTrendList | |
| 116 | + ); | |
| 97 | 117 | } |
| 98 | 118 | return { |
| 99 | 119 | tenantDateValue, | ... | ... |
| ... | ... | @@ -17,10 +17,21 @@ export enum ConfigurationPermission { |
| 17 | 17 | UPDATE = 'api:yt:dataview:center:update', |
| 18 | 18 | DELETE = 'api:yt:dataview:center:delete', |
| 19 | 19 | SHARE = 'api:yt:dataview:center:share', |
| 20 | - DESIGN = 'api:yt:dataview:center:get_configuration_info:design', | |
| 20 | + // DESIGN = 'api:yt:dataview:center:get_configuration_info:design', | |
| 21 | + DESIGN = 'api:yt:dataview:center:get_dataview_info:design', | |
| 21 | 22 | PREVIEW = 'api:yt:dataview:center:get_configuration_info:preview', |
| 22 | 23 | PUBLISH = 'api:yt:dataview:center:publish', |
| 23 | 24 | // CANCEL_PUBLISH = 'api:yt:dataview:center:cancel_publish', |
| 25 | + PUBLISH_INTERFACE = 'api:yt:dataview:center:public_interface', | |
| 26 | +} | |
| 27 | + | |
| 28 | +export enum PublicInterface { | |
| 29 | + CREATE = 'api:yt:dataview:center:public_interface:post', | |
| 30 | + LIST = 'api:yt:dataview:center:public_interface:list', | |
| 31 | + UPDATE = 'api:yt:dataview:center:public_interface:update', | |
| 32 | + DELETE = 'api:yt:dataview:center:public_interface:delete', | |
| 33 | + PUBLISH = 'api:yt:dataview:center:public_interface:publish', | |
| 34 | + CANCEL_PUBLISH = 'api:yt:dataview:center:public_interface:cancel', | |
| 24 | 35 | } |
| 25 | 36 | |
| 26 | 37 | // 查询字段 |
| ... | ... | @@ -48,6 +59,7 @@ export const formSchema: FormSchema[] = [ |
| 48 | 59 | return { |
| 49 | 60 | listType: 'picture-card', |
| 50 | 61 | maxFileLimit: 1, |
| 62 | + accept: '.png,.jpg,.jpeg,.gif', | |
| 51 | 63 | api: async (file: File) => { |
| 52 | 64 | try { |
| 53 | 65 | const formData = new FormData(); |
| ... | ... | @@ -62,6 +74,10 @@ export const formSchema: FormSchema[] = [ |
| 62 | 74 | return {}; |
| 63 | 75 | } |
| 64 | 76 | }, |
| 77 | + // showUploadList: true, | |
| 78 | + onDownload(file) { | |
| 79 | + console.log(file); | |
| 80 | + }, | |
| 65 | 81 | onPreview: (fileList: FileItem) => { |
| 66 | 82 | createImgPreview({ imageList: [fileList.url!] }); |
| 67 | 83 | }, |
| ... | ... | @@ -76,7 +92,7 @@ export const formSchema: FormSchema[] = [ |
| 76 | 92 | component: 'Input', |
| 77 | 93 | componentProps: { |
| 78 | 94 | placeholder: '请输入大屏名称', |
| 79 | - maxLength: 255, | |
| 95 | + maxLength: 32, | |
| 80 | 96 | }, |
| 81 | 97 | }, |
| 82 | 98 | { | ... | ... |
| ... | ... | @@ -124,12 +124,16 @@ |
| 124 | 124 | const { largeDesignerPrefix } = useGlobSetting(); |
| 125 | 125 | |
| 126 | 126 | const handlePreview = (record: BigScreenCenterItemsModel) => { |
| 127 | - window.open(`${largeDesignerPrefix}/#/chart/preview/${record.id}`); | |
| 127 | + window.open( | |
| 128 | + `${largeDesignerPrefix}/#/chart/preview/${record.id}?organizationId=${record.organizationId}` | |
| 129 | + ); | |
| 128 | 130 | }; |
| 129 | 131 | |
| 130 | 132 | const handleDesign = (record: BigScreenCenterItemsModel) => { |
| 131 | 133 | if (record.state === 1) return; |
| 132 | - window.open(`${largeDesignerPrefix}/#/chart/home/${record.id}`); | |
| 134 | + window.open( | |
| 135 | + `${largeDesignerPrefix}/#/chart/home/${record.id}?organizationId=${record.organizationId}` | |
| 136 | + ); | |
| 133 | 137 | }; |
| 134 | 138 | |
| 135 | 139 | const handleDelete = async (record: BigScreenCenterItemsModel) => { |
| ... | ... | @@ -218,7 +222,10 @@ |
| 218 | 222 | <Authority v-if="!isCustomerUser" :value="ConfigurationPermission.CREATE"> |
| 219 | 223 | <Button type="primary" @click="handleCreateOrUpdate()"> 新增大屏 </Button> |
| 220 | 224 | </Authority> |
| 221 | - <Authority v-if="hasPublicInterfacePermission" :value="ConfigurationPermission.CREATE"> | |
| 225 | + <Authority | |
| 226 | + v-if="hasPublicInterfacePermission" | |
| 227 | + :value="ConfigurationPermission.PUBLISH_INTERFACE" | |
| 228 | + > | |
| 222 | 229 | <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button> |
| 223 | 230 | </Authority> |
| 224 | 231 | <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" /> |
| ... | ... | @@ -280,6 +287,7 @@ |
| 280 | 287 | </Tooltip> |
| 281 | 288 | <Tooltip v-if="!isCustomerUser" title="设计"> |
| 282 | 289 | <AuthIcon |
| 290 | + :auth="ConfigurationPermission.DESIGN" | |
| 283 | 291 | :disabled="item.state === 1" |
| 284 | 292 | icon="ant-design:edit-outlined" |
| 285 | 293 | @click="handleDesign(item)" | ... | ... |
| ... | ... | @@ -9,23 +9,30 @@ |
| 9 | 9 | <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button> |
| 10 | 10 | </template> |
| 11 | 11 | <template #toolbar> |
| 12 | - <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增公共接口 </a-button> | |
| 13 | - <Popconfirm | |
| 14 | - title="您确定要批量删除数据" | |
| 15 | - ok-text="确定" | |
| 16 | - cancel-text="取消" | |
| 17 | - @confirm="handleDeleteOrBatchDelete(null)" | |
| 18 | - > | |
| 19 | - <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button> | |
| 20 | - </Popconfirm> | |
| 21 | - <Popconfirm | |
| 22 | - title="您确定要批量发布" | |
| 23 | - ok-text="确定" | |
| 24 | - cancel-text="取消" | |
| 25 | - @confirm="handleBatchPublish('batchPublish')" | |
| 26 | - > | |
| 27 | - <a-button color="error" :disabled="hasBatchPublish"> 批量发布 </a-button> | |
| 28 | - </Popconfirm> | |
| 12 | + <Authority :value="PublicInterface.CREATE"> | |
| 13 | + <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增公共接口 </a-button> | |
| 14 | + </Authority> | |
| 15 | + | |
| 16 | + <Authority :value="PublicInterface.DELETE"> | |
| 17 | + <Popconfirm | |
| 18 | + title="您确定要批量删除数据" | |
| 19 | + ok-text="确定" | |
| 20 | + cancel-text="取消" | |
| 21 | + @confirm="handleDeleteOrBatchDelete(null)" | |
| 22 | + > | |
| 23 | + <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button> | |
| 24 | + </Popconfirm> | |
| 25 | + </Authority> | |
| 26 | + <Authority :value="PublicInterface.PUBLISH"> | |
| 27 | + <Popconfirm | |
| 28 | + title="您确定要批量发布" | |
| 29 | + ok-text="确定" | |
| 30 | + cancel-text="取消" | |
| 31 | + @confirm="handleBatchPublish('batchPublish')" | |
| 32 | + > | |
| 33 | + <a-button color="error" :disabled="hasBatchPublish"> 批量发布 </a-button> | |
| 34 | + </Popconfirm> | |
| 35 | + </Authority> | |
| 29 | 36 | <!-- <Popconfirm |
| 30 | 37 | title="您确定要批量取消发布" |
| 31 | 38 | ok-text="确定" |
| ... | ... | @@ -41,6 +48,7 @@ |
| 41 | 48 | { |
| 42 | 49 | label: '发布', |
| 43 | 50 | icon: 'ant-design:node-expand-outlined', |
| 51 | + auth: PublicInterface.PUBLISH, | |
| 44 | 52 | onClick: handlePublish.bind(null, 'publish', record), |
| 45 | 53 | ifShow: () => { |
| 46 | 54 | return record.state === 0 && record.creator === userId; |
| ... | ... | @@ -49,6 +57,7 @@ |
| 49 | 57 | { |
| 50 | 58 | label: '取消发布', |
| 51 | 59 | icon: 'ant-design:node-collapse-outlined', |
| 60 | + auth: PublicInterface.CANCEL_PUBLISH, | |
| 52 | 61 | onClick: handlePublish.bind(null, 'canelPublish', record), |
| 53 | 62 | ifShow: () => { |
| 54 | 63 | return record.state === 1 && record.creator === userId; |
| ... | ... | @@ -57,6 +66,7 @@ |
| 57 | 66 | { |
| 58 | 67 | label: '修改', |
| 59 | 68 | icon: 'clarity:note-edit-line', |
| 69 | + auth: PublicInterface.UPDATE, | |
| 60 | 70 | onClick: handleCreateOrEdit.bind(null, record), |
| 61 | 71 | ifShow: () => { |
| 62 | 72 | return record.state === 0 && record.creator === userId; |
| ... | ... | @@ -65,6 +75,7 @@ |
| 65 | 75 | { |
| 66 | 76 | label: '删除', |
| 67 | 77 | icon: 'ant-design:delete-outlined', |
| 78 | + auth: PublicInterface.DELETE, | |
| 68 | 79 | color: 'error', |
| 69 | 80 | ifShow: () => { |
| 70 | 81 | return record.state === 0 && record.creator === userId; |
| ... | ... | @@ -99,6 +110,8 @@ |
| 99 | 110 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 100 | 111 | import { USER_INFO_KEY } from '/@/enums/cacheEnum'; |
| 101 | 112 | import { getAuthCache } from '/@/utils/auth'; |
| 113 | + import { PublicInterface } from '../config'; | |
| 114 | + import { Authority } from '/@/components/Authority'; | |
| 102 | 115 | |
| 103 | 116 | const userInfo = getAuthCache(USER_INFO_KEY) as any; |
| 104 | 117 | |
| ... | ... | @@ -119,7 +132,7 @@ |
| 119 | 132 | }, |
| 120 | 133 | useSearchForm: true, |
| 121 | 134 | actionColumn: { |
| 122 | - width: 150, | |
| 135 | + width: 180, | |
| 123 | 136 | title: '操作', |
| 124 | 137 | dataIndex: 'action', |
| 125 | 138 | slots: { customRender: 'action' }, | ... | ... |
| ... | ... | @@ -7,7 +7,7 @@ import { JSONEditor } from '/@/components/CodeEditor'; |
| 7 | 7 | import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; |
| 8 | 8 | import { getModelServices } from '/@/api/device/modelOfMatter'; |
| 9 | 9 | import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel'; |
| 10 | -import { toRaw, unref } from 'vue'; | |
| 10 | +import { nextTick, toRaw, unref } from 'vue'; | |
| 11 | 11 | import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/components/ObjectModelValidateForm/ObjectModelValidateForm.vue'; |
| 12 | 12 | import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum'; |
| 13 | 13 | import { TaskTypeEnum } from '/@/views/task/center/config'; |
| ... | ... | @@ -121,7 +121,7 @@ export const step1Schemas: FormSchema[] = [ |
| 121 | 121 | { |
| 122 | 122 | field: 'codeType', |
| 123 | 123 | label: '标识符类型', |
| 124 | - component: 'Select', | |
| 124 | + component: 'RadioGroup', | |
| 125 | 125 | dynamicRules({ values }) { |
| 126 | 126 | return [ |
| 127 | 127 | { |
| ... | ... | @@ -246,8 +246,9 @@ export const step1Schemas: FormSchema[] = [ |
| 246 | 246 | required: true, |
| 247 | 247 | component: 'ApiSelect', |
| 248 | 248 | ifShow: ({ values }) => values.deviceType === 'SENSOR' && values.organizationId, |
| 249 | - componentProps: ({ formModel }) => { | |
| 249 | + componentProps: ({ formModel, formActionType }) => { | |
| 250 | 250 | const { organizationId, transportType } = formModel; |
| 251 | + const { validateFields } = formActionType; | |
| 251 | 252 | if (![organizationId, transportType].every(Boolean)) return {}; |
| 252 | 253 | return { |
| 253 | 254 | api: async (params: Recordable) => { |
| ... | ... | @@ -266,6 +267,10 @@ export const step1Schemas: FormSchema[] = [ |
| 266 | 267 | }, |
| 267 | 268 | valueField: 'tbDeviceId', |
| 268 | 269 | labelField: 'alias', |
| 270 | + onChange: async () => { | |
| 271 | + await nextTick(); | |
| 272 | + validateFields(['gatewayId']); | |
| 273 | + }, | |
| 269 | 274 | }; |
| 270 | 275 | }, |
| 271 | 276 | }, | ... | ... |
| ... | ... | @@ -169,12 +169,16 @@ export const alarmColumns: BasicColumn[] = [ |
| 169 | 169 | { |
| 170 | 170 | title: '告警时间', |
| 171 | 171 | dataIndex: 'createdTime', |
| 172 | - width: 120, | |
| 172 | + width: 180, | |
| 173 | 173 | }, |
| 174 | 174 | { |
| 175 | 175 | title: '告警设备', |
| 176 | 176 | dataIndex: 'deviceName', |
| 177 | - width: 100, | |
| 177 | + width: 120, | |
| 178 | + customRender: ({ record }) => { | |
| 179 | + const { deviceAlias, deviceName } = record || {}; | |
| 180 | + return deviceAlias || deviceName; | |
| 181 | + }, | |
| 178 | 182 | }, |
| 179 | 183 | { |
| 180 | 184 | title: '告警场景', |
| ... | ... | @@ -184,14 +188,20 @@ export const alarmColumns: BasicColumn[] = [ |
| 184 | 188 | { |
| 185 | 189 | title: '告警级别', |
| 186 | 190 | dataIndex: 'severity', |
| 187 | - width: 160, | |
| 191 | + width: 90, | |
| 188 | 192 | format: (text) => alarmLevel(text), |
| 189 | 193 | }, |
| 190 | 194 | { |
| 195 | + title: '告警详情', | |
| 196 | + dataIndex: 'details', | |
| 197 | + slots: { customRender: 'details' }, | |
| 198 | + width: 160, | |
| 199 | + }, | |
| 200 | + { | |
| 191 | 201 | title: '状态', |
| 192 | 202 | dataIndex: 'status', |
| 193 | 203 | format: (text) => statusType(text), |
| 194 | - width: 160, | |
| 204 | + width: 100, | |
| 195 | 205 | }, |
| 196 | 206 | ]; |
| 197 | 207 | |
| ... | ... | @@ -263,14 +273,6 @@ export const alarmSchemasForm: FormSchema[] = [ |
| 263 | 273 | disabled: true, |
| 264 | 274 | }, |
| 265 | 275 | }, |
| 266 | - { | |
| 267 | - field: 'details', | |
| 268 | - label: '详情', | |
| 269 | - component: 'InputTextArea', | |
| 270 | - componentProps: { | |
| 271 | - maxLength: 255, | |
| 272 | - }, | |
| 273 | - }, | |
| 274 | 276 | ]; |
| 275 | 277 | // 子设备 |
| 276 | 278 | export const childDeviceSchemas: FormSchema[] = [ | ... | ... |
| ... | ... | @@ -52,17 +52,15 @@ |
| 52 | 52 | const alarmStatus = ref(''); |
| 53 | 53 | const [registerModal, { closeModal }] = useModalInner(async (data) => { |
| 54 | 54 | await resetFields(); |
| 55 | + const { deviceAlias, deviceName, severity, status, id } = data || {}; | |
| 55 | 56 | await setFieldsValue({ |
| 56 | 57 | ...data, |
| 57 | - details: JSON.stringify(data?.details?.data).slice( | |
| 58 | - 1, | |
| 59 | - JSON.stringify(data?.details?.data).length - 1 | |
| 60 | - ), | |
| 61 | - severity: alarmLevel(data.severity), | |
| 62 | - status: statusType(data.status), | |
| 58 | + deviceName: deviceAlias || deviceName, | |
| 59 | + severity: alarmLevel(severity), | |
| 60 | + status: statusType(status), | |
| 63 | 61 | }); |
| 64 | - alarmId.value = data.id; | |
| 65 | - alarmStatus.value = data.status; | |
| 62 | + alarmId.value = id; | |
| 63 | + alarmStatus.value = status; | |
| 66 | 64 | }); |
| 67 | 65 | // 处理报警 |
| 68 | 66 | const handleAlarm = async () => { | ... | ... |
| 1 | 1 | <script lang="ts" setup> |
| 2 | 2 | import { Upload, Button } from 'ant-design-vue'; |
| 3 | 3 | import { InboxOutlined } from '@ant-design/icons-vue'; |
| 4 | - import { computed, ref } from 'vue'; | |
| 4 | + import { computed } from 'vue'; | |
| 5 | 5 | import StepContainer from './StepContainer.vue'; |
| 6 | 6 | import XLSX, { CellObject } from 'xlsx'; |
| 7 | 7 | import { basicProps } from './props'; |
| 8 | 8 | import { UploadFileParseValue } from './type'; |
| 9 | + import { useMessage } from '/@/hooks/web/useMessage'; | |
| 9 | 10 | |
| 10 | 11 | const props = defineProps({ |
| 11 | 12 | ...basicProps, |
| 13 | + fileList: { | |
| 14 | + required: true, | |
| 15 | + type: Array as PropType<(Record<'uid' | 'name', string> & File)[]>, | |
| 16 | + }, | |
| 12 | 17 | value: { |
| 13 | 18 | require: true, |
| 14 | 19 | type: Object as PropType<UploadFileParseValue>, |
| 15 | 20 | }, |
| 16 | 21 | }); |
| 17 | 22 | |
| 18 | - const emit = defineEmits(['update:value']); | |
| 19 | - | |
| 20 | - const fileList = ref<Record<'uid' | 'name', string>[]>([]); | |
| 23 | + const emit = defineEmits(['update:value', 'update:fileList']); | |
| 21 | 24 | |
| 22 | 25 | interface FileRequestParams { |
| 23 | 26 | file: File & { uid: string }; |
| ... | ... | @@ -48,23 +51,30 @@ |
| 48 | 51 | return new Promise((resolve, reject) => { |
| 49 | 52 | const fileReader = new FileReader(); |
| 50 | 53 | fileReader.onload = (event: ProgressEvent) => { |
| 51 | - const data = (event.target as FileReader).result as string; | |
| 52 | - | |
| 53 | - const result = XLSX.read(data, { type: 'string' }); | |
| 54 | - | |
| 55 | - const sheetName = result.SheetNames.at(0); | |
| 56 | - const workbook = result.Sheets; | |
| 57 | - const sheet = workbook[sheetName as string]; | |
| 58 | - const sheetRange = sheet['!ref']; | |
| 59 | - | |
| 60 | - const { | |
| 61 | - s: { c: startColumn }, | |
| 62 | - e: { c: endColumn }, | |
| 63 | - } = XLSX.utils.decode_range(sheetRange!); | |
| 64 | - | |
| 65 | - const header = getTableHeader(sheet, [startColumn, endColumn]); | |
| 66 | - const content = XLSX.utils.sheet_to_json(sheet, { range: sheetRange }) as Recordable[]; | |
| 67 | - resolve({ header, content }); | |
| 54 | + try { | |
| 55 | + const data = (event.target as FileReader).result as string; | |
| 56 | + | |
| 57 | + const result = XLSX.read(data, { type: 'string' }); | |
| 58 | + | |
| 59 | + const sheetName = result.SheetNames.at(0); | |
| 60 | + const workbook = result.Sheets; | |
| 61 | + const sheet = workbook[sheetName as string]; | |
| 62 | + const sheetRange = sheet['!ref']; | |
| 63 | + | |
| 64 | + const { | |
| 65 | + s: { c: startColumn }, | |
| 66 | + e: { c: endColumn }, | |
| 67 | + } = XLSX.utils.decode_range(sheetRange!); | |
| 68 | + | |
| 69 | + const header = getTableHeader(sheet, [startColumn, endColumn]); | |
| 70 | + const content = XLSX.utils.sheet_to_json(sheet, { range: sheetRange }) as Recordable[]; | |
| 71 | + | |
| 72 | + resolve({ header, content }); | |
| 73 | + } catch (error) { | |
| 74 | + const { createMessage } = useMessage(); | |
| 75 | + createMessage.error('请检查csv文件是否正确'); | |
| 76 | + throw error; | |
| 77 | + } | |
| 68 | 78 | }; |
| 69 | 79 | |
| 70 | 80 | fileReader.onerror = () => { |
| ... | ... | @@ -75,19 +85,19 @@ |
| 75 | 85 | }; |
| 76 | 86 | |
| 77 | 87 | const handleParseFile = async ({ file, onSuccess, onError }: FileRequestParams) => { |
| 78 | - fileList.value = []; | |
| 79 | 88 | const value = await readFile(file); |
| 80 | 89 | if (!value) { |
| 81 | 90 | onError(); |
| 82 | 91 | return; |
| 83 | 92 | } |
| 84 | - fileList.value = [file]; | |
| 93 | + | |
| 94 | + emit('update:fileList', [file]); | |
| 85 | 95 | emit('update:value', value); |
| 86 | 96 | onSuccess({}, file); |
| 87 | 97 | }; |
| 88 | 98 | |
| 89 | 99 | const canGoNextStep = computed(() => { |
| 90 | - return !!fileList.value.length; | |
| 100 | + return !!props.fileList.length; | |
| 91 | 101 | }); |
| 92 | 102 | |
| 93 | 103 | const handlePreviousStep = () => { |
| ... | ... | @@ -97,12 +107,23 @@ |
| 97 | 107 | const handleNextStep = () => { |
| 98 | 108 | props.goNextStep?.(); |
| 99 | 109 | }; |
| 110 | + | |
| 111 | + const handleRemove = () => { | |
| 112 | + emit('update:fileList', []); | |
| 113 | + return true; | |
| 114 | + }; | |
| 100 | 115 | </script> |
| 101 | 116 | |
| 102 | 117 | <template> |
| 103 | 118 | <StepContainer> |
| 104 | 119 | <div class="">设备文件</div> |
| 105 | - <Upload.Dragger :fileList="fileList" :customRequest="handleParseFile" accept=".csv" name="file"> | |
| 120 | + <Upload.Dragger | |
| 121 | + :fileList="fileList" | |
| 122 | + :customRequest="handleParseFile" | |
| 123 | + accept=".csv" | |
| 124 | + name="file" | |
| 125 | + :remove="handleRemove" | |
| 126 | + > | |
| 106 | 127 | <section class="cursor-pointer flex flex-col justify-center items-center"> |
| 107 | 128 | <InboxOutlined class="text-[4rem] !text-blue-400" /> |
| 108 | 129 | <div class="text-gray-500">点击上传或拖拽上传</div> | ... | ... |
| ... | ... | @@ -17,6 +17,8 @@ |
| 17 | 17 | |
| 18 | 18 | const basicInfo = ref({}); |
| 19 | 19 | |
| 20 | + const fileList = ref<(File & Record<'uid' | 'name', string>)[]>([]); | |
| 21 | + | |
| 20 | 22 | const fileParseValue = ref<UploadFileParseValue>({ header: [], content: [] }); |
| 21 | 23 | |
| 22 | 24 | const columnConfiguration = ref<Record<'type', string>[]>([]); |
| ... | ... | @@ -61,6 +63,7 @@ |
| 61 | 63 | |
| 62 | 64 | const reset = () => { |
| 63 | 65 | basicInfo.value = {}; |
| 66 | + fileList.value = []; | |
| 64 | 67 | fileParseValue.value = { header: [], content: [] }; |
| 65 | 68 | columnConfiguration.value = []; |
| 66 | 69 | importResult.value = {} as unknown as ImportDeviceResponse; |
| ... | ... | @@ -109,6 +112,7 @@ |
| 109 | 112 | /> |
| 110 | 113 | <ImportCsv |
| 111 | 114 | v-if="StepsEnum[item] === StepsEnum.IMPORT_FILE && StepsEnum[item] === currentStep" |
| 115 | + v-model:fileList="fileList" | |
| 112 | 116 | v-model:value="fileParseValue" |
| 113 | 117 | :go-next-step="goNextStep" |
| 114 | 118 | :go-previous-step="goPreviousStep" | ... | ... |
| ... | ... | @@ -145,6 +145,8 @@ |
| 145 | 145 | // !!!此处需要删除地图的属性,否则会报堆栈溢出的错误 Uncaught RangeError: Maximum call stack size exceeded |
| 146 | 146 | Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'map'); |
| 147 | 147 | Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'marker'); |
| 148 | + Reflect.deleteProperty(DeviceStep1Ref.value.devicePositionState, 'map'); | |
| 149 | + Reflect.deleteProperty(DeviceStep1Ref.value.devicePositionState, 'marker'); | |
| 148 | 150 | setModalProps({ |
| 149 | 151 | confirmLoading: true, |
| 150 | 152 | }); |
| ... | ... | @@ -156,7 +158,7 @@ |
| 156 | 158 | customerId: currentDeviceData.customerId, |
| 157 | 159 | deviceInfo: { |
| 158 | 160 | avatar: DeviceStep1Ref.value?.devicePic, |
| 159 | - ...DeviceStep1Ref.value?.positionState, | |
| 161 | + ...DeviceStep1Ref.value?.devicePositionState, | |
| 160 | 162 | }, |
| 161 | 163 | }; |
| 162 | 164 | validateNameLength(stepRecord.name); |
| ... | ... | @@ -168,7 +170,7 @@ |
| 168 | 170 | sn: stepRecord.name, |
| 169 | 171 | deviceInfo: { |
| 170 | 172 | avatar: DeviceStep1Ref.value?.devicePic, |
| 171 | - ...DeviceStep1Ref.value?.positionState, | |
| 173 | + ...DeviceStep1Ref.value?.devicePositionState, | |
| 172 | 174 | }, |
| 173 | 175 | deviceToken: |
| 174 | 176 | unref(current) === 0 || !unref(stepState).addAgree | ... | ... |
| ... | ... | @@ -25,6 +25,7 @@ |
| 25 | 25 | <template #iconSelect> |
| 26 | 26 | <Upload |
| 27 | 27 | name="avatar" |
| 28 | + accept=".png,.jpg,.jpeg,.gif" | |
| 28 | 29 | :show-upload-list="false" |
| 29 | 30 | list-type="picture-card" |
| 30 | 31 | class="avatar-uploader" |
| ... | ... | @@ -46,7 +47,7 @@ |
| 46 | 47 | </div> |
| 47 | 48 | </template> |
| 48 | 49 | <template #deviceAddress> |
| 49 | - <Input disabled v-model:value="positionState.address"> | |
| 50 | + <Input disabled v-model:value="devicePositionState.address"> | |
| 50 | 51 | <template #addonAfter> |
| 51 | 52 | <EnvironmentTwoTone @click="selectPosition" /> |
| 52 | 53 | </template> |
| ... | ... | @@ -128,6 +129,7 @@ |
| 128 | 129 | import { useDrawer } from '/@/components/Drawer'; |
| 129 | 130 | import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue'; |
| 130 | 131 | import { TaskTypeEnum } from '/@/views/task/center/config'; |
| 132 | + import { toRaw } from 'vue'; | |
| 131 | 133 | |
| 132 | 134 | export default defineComponent({ |
| 133 | 135 | components: { |
| ... | ... | @@ -239,8 +241,14 @@ |
| 239 | 241 | const selectPosition = () => { |
| 240 | 242 | visible.value = true; |
| 241 | 243 | if (!positionState.longitude) { |
| 242 | - positionState.longitude = '104.04666605565338'; | |
| 243 | - positionState.latitude = '30.543516387560476'; | |
| 244 | + positionState.longitude = '104.05326410962411'; | |
| 245 | + positionState.latitude = '30.54855093076791'; | |
| 246 | + | |
| 247 | + // 根据经纬度获取详细位置 | |
| 248 | + if (positionState.longitude && positionState.latitude) { | |
| 249 | + var pt = new BMap.Point(positionState.longitude, positionState.latitude); | |
| 250 | + getAddrByPoint(pt); | |
| 251 | + } | |
| 244 | 252 | initMap(positionState.longitude, positionState.latitude); |
| 245 | 253 | } else { |
| 246 | 254 | initMap(positionState.longitude, positionState.latitude); |
| ... | ... | @@ -261,6 +269,15 @@ |
| 261 | 269 | map: null, |
| 262 | 270 | marker: null, |
| 263 | 271 | }); |
| 272 | + | |
| 273 | + const devicePositionState = ref({ | |
| 274 | + longitude: '', | |
| 275 | + latitude: '', | |
| 276 | + address: '', | |
| 277 | + map: null, | |
| 278 | + marker: null, | |
| 279 | + }); | |
| 280 | + | |
| 264 | 281 | /** |
| 265 | 282 | * 逆地址解析函数(根据坐标点获取详细地址) |
| 266 | 283 | * @param {Object} point 百度地图坐标点,必传 |
| ... | ... | @@ -371,6 +388,7 @@ |
| 371 | 388 | // 确定选择的位置 |
| 372 | 389 | const handleOk = () => { |
| 373 | 390 | visible.value = false; |
| 391 | + devicePositionState.value = { ...toRaw(positionState) }; | |
| 374 | 392 | }; |
| 375 | 393 | // 取消选择位置 |
| 376 | 394 | const handleCancel = () => { |
| ... | ... | @@ -385,6 +403,7 @@ |
| 385 | 403 | positionState.longitude = deviceInfo.longitude; |
| 386 | 404 | positionState.latitude = deviceInfo.latitude; |
| 387 | 405 | positionState.address = deviceInfo.address; |
| 406 | + devicePositionState.value = { ...toRaw(positionState) }; | |
| 388 | 407 | devicePic.value = deviceInfo.avatar; |
| 389 | 408 | setFieldsValue({ |
| 390 | 409 | ...data, |
| ... | ... | @@ -418,11 +437,13 @@ |
| 418 | 437 | function parentResetDevicePic(deviceInfo) { |
| 419 | 438 | devicePic.value = deviceInfo.avatar; |
| 420 | 439 | } |
| 440 | + | |
| 421 | 441 | // 父组件重置位置 |
| 422 | 442 | function parentResetPositionState() { |
| 423 | 443 | for (let key in positionState) { |
| 424 | 444 | positionState[key] = ''; |
| 425 | 445 | } |
| 446 | + devicePositionState.value = { ...toRaw(positionState) }; | |
| 426 | 447 | } |
| 427 | 448 | // 禁用设备类型 |
| 428 | 449 | function disabledDeviceType(disabled: boolean) { |
| ... | ... | @@ -474,6 +495,7 @@ |
| 474 | 495 | handleOpenOrgDrawer, |
| 475 | 496 | handleSuccess, |
| 476 | 497 | handleTreeOrg, |
| 498 | + devicePositionState, | |
| 477 | 499 | }; |
| 478 | 500 | }, |
| 479 | 501 | }); | ... | ... |
| ... | ... | @@ -12,17 +12,31 @@ |
| 12 | 12 | ]" |
| 13 | 13 | /> |
| 14 | 14 | </template> |
| 15 | + <template #details="{ record }"> | |
| 16 | + <a-button type="link" class="ml-2" @click="handleViewAlarmDetails(record)"> | |
| 17 | + 查看告警详情 | |
| 18 | + </a-button> | |
| 19 | + </template> | |
| 15 | 20 | </BasicTable> |
| 16 | 21 | <AlarmDetailModal @register="registerDetailModal" @success="handleSuccess" /> |
| 17 | 22 | </div> |
| 18 | 23 | </template> |
| 19 | 24 | <script lang="ts"> |
| 20 | - import { defineComponent } from 'vue'; | |
| 25 | + import { defineComponent, h, nextTick } from 'vue'; | |
| 21 | 26 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
| 22 | 27 | import { alarmColumns, alarmSearchSchemas } from '../../config/detail.config'; |
| 23 | 28 | import { getDeviceAlarm } from '/@/api/device/deviceManager'; |
| 24 | 29 | import AlarmDetailModal from '../modal/AlarmDetailModal.vue'; |
| 25 | 30 | import { useModal } from '/@/components/Modal'; |
| 31 | + import { Modal } from 'ant-design-vue'; | |
| 32 | + import { JsonPreview } from '/@/components/CodeEditor'; | |
| 33 | + import { getDeviceDetail } from '/@/api/device/deviceManager'; | |
| 34 | + import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; | |
| 35 | + import { | |
| 36 | + operationNumber_OR_TIME, | |
| 37 | + operationString, | |
| 38 | + operationBoolean, | |
| 39 | + } from '/@/views/rule/linkedge/config/formatData'; | |
| 26 | 40 | export default defineComponent({ |
| 27 | 41 | name: 'DeviceManagement', |
| 28 | 42 | components: { |
| ... | ... | @@ -66,11 +80,87 @@ |
| 66 | 80 | const handleSuccess = () => { |
| 67 | 81 | reload(); |
| 68 | 82 | }; |
| 83 | + const handleViewAlarmDetails = async (record: Recordable) => { | |
| 84 | + await nextTick(); | |
| 85 | + const { details } = record; | |
| 86 | + const deviceIdKeys = Object.keys(details); | |
| 87 | + const detailObject = deviceIdKeys.map((key) => ({ label: key, value: details[key] })); | |
| 88 | + const dataFormat = await handleAlarmDetailFormat(deviceIdKeys); | |
| 89 | + const dataFormats = detailObject.reduce((acc: any, curr: any) => { | |
| 90 | + dataFormat.forEach((item) => { | |
| 91 | + if (item.tbDeviceId === curr.label) { | |
| 92 | + const findName = item.attribute.find( | |
| 93 | + (item) => item.identifier === curr.value.key | |
| 94 | + )?.name; | |
| 95 | + const findLogin = [ | |
| 96 | + ...operationNumber_OR_TIME, | |
| 97 | + ...operationString, | |
| 98 | + ...operationBoolean, | |
| 99 | + ].find((item) => item.value === curr.value.logic)?.symbol; | |
| 100 | + const findAttribute = item.attribute.find( | |
| 101 | + (findItem) => findItem.identifier === curr.value.key | |
| 102 | + ); | |
| 103 | + const value = { | |
| 104 | + ['触发属性']: findName, | |
| 105 | + ['触发条件']: `${findLogin}${curr.value.logicValue}`, | |
| 106 | + ['触发值']: `${curr.value.realValue}${ | |
| 107 | + findAttribute.detail?.dataType?.specs?.unit?.key ?? '' | |
| 108 | + }`, | |
| 109 | + }; | |
| 110 | + const data = { | |
| 111 | + [item.name]: value, | |
| 112 | + }; | |
| 113 | + acc.push(data); | |
| 114 | + } | |
| 115 | + }); | |
| 116 | + return [...acc]; | |
| 117 | + }, []); | |
| 118 | + const objectFormat = dataFormats.reduce((acc: any, curr: any) => { | |
| 119 | + return { | |
| 120 | + ...acc, | |
| 121 | + ...curr, | |
| 122 | + }; | |
| 123 | + }, {}); | |
| 124 | + Modal.info({ | |
| 125 | + title: '告警详情', | |
| 126 | + width: 600, | |
| 127 | + centered: true, | |
| 128 | + maskClosable: true, | |
| 129 | + content: h(JsonPreview, { data: JSON.parse(JSON.stringify(objectFormat)) }), | |
| 130 | + }); | |
| 131 | + }; | |
| 132 | + const handleAlarmDetailFormat = async (keys: string[]) => { | |
| 133 | + const temp: any = []; | |
| 134 | + for (let item of keys) { | |
| 135 | + if (item === 'key' || item === 'data') return []; //旧数据则终止 | |
| 136 | + const deviceDetailRes = await getDeviceDetail(item); | |
| 137 | + const { deviceProfileId } = deviceDetailRes; | |
| 138 | + if (!deviceProfileId) return []; | |
| 139 | + const attributeRes = await getAttribute(deviceProfileId); | |
| 140 | + const dataFormat: any = handleDataFormat(deviceDetailRes, attributeRes); | |
| 141 | + temp.push(dataFormat); | |
| 142 | + } | |
| 143 | + return temp; | |
| 144 | + }; | |
| 145 | + const handleDataFormat = (deviceDetail: any, attributes: any) => { | |
| 146 | + const { name, alias, tbDeviceId } = deviceDetail; | |
| 147 | + const attribute = attributes.map((item) => ({ | |
| 148 | + identifier: item.identifier, | |
| 149 | + name: item.name, | |
| 150 | + detail: item.detail, | |
| 151 | + })); | |
| 152 | + return { | |
| 153 | + name: alias || name, | |
| 154 | + tbDeviceId, | |
| 155 | + attribute, | |
| 156 | + }; | |
| 157 | + }; | |
| 69 | 158 | return { |
| 70 | 159 | registerTable, |
| 71 | 160 | registerDetailModal, |
| 72 | 161 | handleDetail, |
| 73 | 162 | handleSuccess, |
| 163 | + handleViewAlarmDetails, | |
| 74 | 164 | }; |
| 75 | 165 | }, |
| 76 | 166 | }); | ... | ... |
| ... | ... | @@ -10,7 +10,7 @@ |
| 10 | 10 | </div> |
| 11 | 11 | </template> |
| 12 | 12 | <script lang="ts"> |
| 13 | - import { defineComponent, ref } from 'vue'; | |
| 13 | + import { defineComponent, nextTick, ref } from 'vue'; | |
| 14 | 14 | import { BasicForm, useForm } from '/@/components/Form'; |
| 15 | 15 | import { CommandFieldsEnum, CommandSchemas, CommandType, ValueType } from '../../config/data'; |
| 16 | 16 | import { commandIssuanceApi } from '/@/api/device/deviceManager'; |
| ... | ... | @@ -35,7 +35,7 @@ |
| 35 | 35 | const { createMessage } = useMessage(); |
| 36 | 36 | const loading = ref(false); |
| 37 | 37 | |
| 38 | - const [registerForm, { getFieldsValue, validate, resetFields }] = useForm({ | |
| 38 | + const [registerForm, { getFieldsValue, validate, resetFields, clearValidate }] = useForm({ | |
| 39 | 39 | labelWidth: 120, |
| 40 | 40 | schemas: CommandSchemas( |
| 41 | 41 | props.deviceDetail.deviceProfile.transportType as TransportTypeEnum, |
| ... | ... | @@ -47,8 +47,10 @@ |
| 47 | 47 | showResetButton: false, |
| 48 | 48 | }); |
| 49 | 49 | |
| 50 | - const handleCancel = () => { | |
| 51 | - resetFields(); | |
| 50 | + const handleCancel = async () => { | |
| 51 | + await resetFields(); | |
| 52 | + await nextTick(); | |
| 53 | + await clearValidate(); | |
| 52 | 54 | }; |
| 53 | 55 | |
| 54 | 56 | const handleOk = async () => { | ... | ... |