Showing
78 changed files
with
2488 additions
and
781 deletions
Too many changes to show.
To preserve performance only 78 of 607 files are displayed.
@@ -25,6 +25,7 @@ module.exports = defineConfig({ | @@ -25,6 +25,7 @@ module.exports = defineConfig({ | ||
25 | 'plugin:jest/recommended', | 25 | 'plugin:jest/recommended', |
26 | ], | 26 | ], |
27 | rules: { | 27 | rules: { |
28 | + 'no-console': 'off', | ||
28 | 'vue/script-setup-uses-vars': 'error', | 29 | 'vue/script-setup-uses-vars': 'error', |
29 | '@typescript-eslint/ban-ts-ignore': 'off', | 30 | '@typescript-eslint/ban-ts-ignore': 'off', |
30 | '@typescript-eslint/explicit-function-return-type': 'off', | 31 | '@typescript-eslint/explicit-function-return-type': 'off', |
@@ -5,22 +5,28 @@ | @@ -5,22 +5,28 @@ | ||
5 | "public/resource/tinymce/langs" | 5 | "public/resource/tinymce/langs" |
6 | ], | 6 | ], |
7 | "cSpell.words": [ | 7 | "cSpell.words": [ |
8 | + "ACKS", | ||
9 | + "clazz", | ||
8 | "Cmds", | 10 | "Cmds", |
9 | "COAP", | 11 | "COAP", |
10 | "echarts", | 12 | "echarts", |
11 | "edrx", | 13 | "edrx", |
12 | - "EFENTO", | 14 | + "EFENTO", |
13 | "fingerprintjs", | 15 | "fingerprintjs", |
14 | "flvjs", | 16 | "flvjs", |
15 | - "flvjs", | ||
16 | "inited", | 17 | "inited", |
17 | "liveui", | 18 | "liveui", |
18 | "MQTT", | 19 | "MQTT", |
20 | + "noconflict", | ||
19 | "notif", | 21 | "notif", |
20 | "PROTOBUF", | 22 | "PROTOBUF", |
23 | + "Rabbitmq", | ||
21 | "rtsp", | 24 | "rtsp", |
22 | "SCADA", | 25 | "SCADA", |
26 | + "SMTPS", | ||
23 | "SNMP", | 27 | "SNMP", |
28 | + "TSLV", | ||
29 | + "UNACK", | ||
24 | "unref", | 30 | "unref", |
25 | "vben", | 31 | "vben", |
26 | "videojs", | 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,13 +32,18 @@ | ||
32 | "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap", | 32 | "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap", |
33 | "prepare": "husky install", | 33 | "prepare": "husky install", |
34 | "gen:icon": "esno ./build/generate/icon/index.ts", | 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 | "dependencies": { | 38 | "dependencies": { |
38 | "@fingerprintjs/fingerprintjs": "^3.4.1", | 39 | "@fingerprintjs/fingerprintjs": "^3.4.1", |
39 | "@iconify/iconify": "^2.0.3", | 40 | "@iconify/iconify": "^2.0.3", |
40 | "@logicflow/core": "^0.6.9", | 41 | "@logicflow/core": "^0.6.9", |
41 | "@logicflow/extension": "^0.6.9", | 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 | "@vueuse/core": "^10.1.0", | 47 | "@vueuse/core": "^10.1.0", |
43 | "@zxcvbn-ts/core": "^1.0.0-beta.0", | 48 | "@zxcvbn-ts/core": "^1.0.0-beta.0", |
44 | "ace-builds": "^1.4.14", | 49 | "ace-builds": "^1.4.14", |
@@ -53,6 +58,7 @@ | @@ -53,6 +58,7 @@ | ||
53 | "flv.js": "^1.6.2", | 58 | "flv.js": "^1.6.2", |
54 | "hls.js": "^1.0.10", | 59 | "hls.js": "^1.0.10", |
55 | "intro.js": "^4.1.0", | 60 | "intro.js": "^4.1.0", |
61 | + "js-beautify": "^1.14.9", | ||
56 | "jsoneditor": "^9.7.2", | 62 | "jsoneditor": "^9.7.2", |
57 | "jwt-decode": "^3.1.2", | 63 | "jwt-decode": "^3.1.2", |
58 | "lodash-es": "^4.17.21", | 64 | "lodash-es": "^4.17.21", |
@@ -68,7 +74,7 @@ | @@ -68,7 +74,7 @@ | ||
68 | "vditor": "^3.8.6", | 74 | "vditor": "^3.8.6", |
69 | "video.js": "^7.20.3", | 75 | "video.js": "^7.20.3", |
70 | "videojs-flvjs-es6": "^1.0.1", | 76 | "videojs-flvjs-es6": "^1.0.1", |
71 | - "vue": "3.2.31", | 77 | + "vue": "3.3.4", |
72 | "vue-i18n": "9.1.7", | 78 | "vue-i18n": "9.1.7", |
73 | "vue-json-pretty": "^2.0.4", | 79 | "vue-json-pretty": "^2.0.4", |
74 | "vue-router": "^4.0.11", | 80 | "vue-router": "^4.0.11", |
@@ -12,11 +12,11 @@ export const getDeviceProfile = (deviceType?: string) => { | @@ -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 | return defHttp.get<HistoryData>( | 16 | return defHttp.get<HistoryData>( |
17 | { | 17 | { |
18 | url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`, | 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 | joinPrefix: false, | 22 | joinPrefix: false, |
@@ -8,6 +8,7 @@ export interface BigScreenCenterItemsModel { | @@ -8,6 +8,7 @@ export interface BigScreenCenterItemsModel { | ||
8 | remark: string; | 8 | remark: string; |
9 | state: number; | 9 | state: number; |
10 | publicId: string; | 10 | publicId: string; |
11 | + organizationId?: string; | ||
11 | } | 12 | } |
12 | export type queryPageParams = BasicPageParams & { | 13 | export type queryPageParams = BasicPageParams & { |
13 | name?: Nullable<string>; | 14 | name?: Nullable<string>; |
@@ -7,6 +7,7 @@ export interface ConfigurationCenterItemsModal { | @@ -7,6 +7,7 @@ export interface ConfigurationCenterItemsModal { | ||
7 | creator: string; | 7 | creator: string; |
8 | remark: string; | 8 | remark: string; |
9 | publicId?: string; | 9 | publicId?: string; |
10 | + organizationId?: string; | ||
10 | } | 11 | } |
11 | export type queryPageParams = BasicPageParams & { | 12 | export type queryPageParams = BasicPageParams & { |
12 | name?: Nullable<string>; | 13 | name?: Nullable<string>; |
@@ -85,7 +85,7 @@ interface TrendParamsType { | @@ -85,7 +85,7 @@ interface TrendParamsType { | ||
85 | } | 85 | } |
86 | // 获取租户趋势或者客户趋势数据 | 86 | // 获取租户趋势或者客户趋势数据 |
87 | export const getTrendData = (params: TrendParamsType) => { | 87 | export const getTrendData = (params: TrendParamsType) => { |
88 | - return defHttp.get({ | 88 | + return defHttp.get<Record<'date' | 'value', string>[]>({ |
89 | url: HomeEnum.TrendAPI, | 89 | url: HomeEnum.TrendAPI, |
90 | params, | 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,6 +28,10 @@ enum DeviceManagerApi { | ||
28 | 28 | ||
29 | DEVICE_ALARM_URL = '/alarm', | 29 | DEVICE_ALARM_URL = '/alarm', |
30 | 30 | ||
31 | + ALARM_BATCH_ACK = '/alarm/batch/ack', | ||
32 | + | ||
33 | + ALARM_BATCH_CLEAR = '/alarm/batch/clear', | ||
34 | + | ||
31 | DEVICE_CREDENTIALS = '/device/credentials', | 35 | DEVICE_CREDENTIALS = '/device/credentials', |
32 | 36 | ||
33 | COMMAND_ISSUANCE = '/rpc', | 37 | COMMAND_ISSUANCE = '/rpc', |
@@ -346,3 +350,23 @@ export const getDevicesByDeviceIds = (ids: string[]) => { | @@ -346,3 +350,23 @@ export const getDevicesByDeviceIds = (ids: string[]) => { | ||
346 | data: ids, | 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,6 +22,8 @@ enum ScreenManagerApi { | ||
22 | GET_ATTRBUTELIST = '/device/attributes/', | 22 | GET_ATTRBUTELIST = '/device/attributes/', |
23 | ALARM_PROFILE = '/alarm/profile/', | 23 | ALARM_PROFILE = '/alarm/profile/', |
24 | MASTER_GET_DEVICE = '/device/list', | 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,3 +132,83 @@ export const byOrganizationIdGetMasterDevice = (params: { | ||
130 | }); | 132 | }); |
131 | }; | 133 | }; |
132 | //TODO-fengtao | 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 | +}; |
@@ -66,7 +66,7 @@ export interface RoleReqDTO { | @@ -66,7 +66,7 @@ export interface RoleReqDTO { | ||
66 | name?: string; | 66 | name?: string; |
67 | remark?: string; | 67 | remark?: string; |
68 | status: number; | 68 | status: number; |
69 | - menu: Array<string>; | 69 | + menu: Array<string | number>; |
70 | } | 70 | } |
71 | 71 | ||
72 | export interface ChangeAccountParams { | 72 | export interface ChangeAccountParams { |
@@ -34,6 +34,7 @@ enum Api { | @@ -34,6 +34,7 @@ enum Api { | ||
34 | GetAllRoleList = '/role/find/list', | 34 | GetAllRoleList = '/role/find/list', |
35 | BaseUserUrl = '/user', | 35 | BaseUserUrl = '/user', |
36 | BaseOrganization = '/organization', | 36 | BaseOrganization = '/organization', |
37 | + RESET_USER_PASSWORD = '/user/reset_password/', | ||
37 | } | 38 | } |
38 | 39 | ||
39 | export const getAccountInfo = (userId: string) => | 40 | export const getAccountInfo = (userId: string) => |
@@ -172,3 +173,12 @@ export const resetPassword = (params: ChangeAccountParams) => | @@ -172,3 +173,12 @@ export const resetPassword = (params: ChangeAccountParams) => | ||
172 | url: Api.BaseUserUrl + '/reset', | 173 | url: Api.BaseUserUrl + '/reset', |
173 | params: params, | 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> |
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> |
1 | <script lang="ts" setup> | 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 | enum EventEnum { | 12 | enum EventEnum { |
11 | UPDATE_VALUE = 'update:value', | 13 | UPDATE_VALUE = 'update:value', |
@@ -16,89 +18,134 @@ | @@ -16,89 +18,134 @@ | ||
16 | 18 | ||
17 | const props = withDefaults( | 19 | const props = withDefaults( |
18 | defineProps<{ | 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 | height: 150, | 27 | height: 150, |
31 | } | 28 | } |
32 | ); | 29 | ); |
33 | 30 | ||
34 | const emit = defineEmits<{ | 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 | const jsonEditorElRef = ref<Nullable<any>>(); | 38 | const jsonEditorElRef = ref<Nullable<any>>(); |
42 | 39 | ||
43 | - const editoreRef = ref<JSONEditor>(); | 40 | + const editoreRef = ref<Ace.Editor>(); |
44 | 41 | ||
45 | const isFocus = ref(false); | 42 | const isFocus = ref(false); |
46 | 43 | ||
47 | - const handleChange = (value: any) => { | 44 | + const handleOnChange = () => { |
45 | + const value = get(); | ||
48 | emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef)); | 46 | emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef)); |
49 | emit(EventEnum.CHANGE, value, unref(editoreRef)); | 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 | const initialize = () => { | 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 | watch( | 84 | watch( |
77 | () => props.value, | 85 | () => props.value, |
78 | (target) => { | 86 | (target) => { |
87 | + // const position = unref(editoreRef)?.getCursorPosition(); | ||
79 | if (unref(isFocus)) return; | 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 | immediate: true, | 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 | const get = (): string => { | 105 | const get = (): string => { |
88 | - return unref(editoreRef)?.getText() || ''; | 106 | + return unref(editoreRef)?.getValue() || ''; |
89 | }; | 107 | }; |
90 | 108 | ||
91 | const set = (data: any) => { | 109 | const set = (data: any) => { |
92 | - return unref(editoreRef)?.set(data); | 110 | + return unref(editoreRef)?.setValue(getFormatValue(data)); |
93 | }; | 111 | }; |
94 | 112 | ||
95 | onMounted(() => { | 113 | onMounted(() => { |
96 | initialize(); | 114 | initialize(); |
97 | - unref(editoreRef)?.setText(props.value || ''); | 115 | + unref(editoreRef)?.setValue(getFormatValue(props.value)); |
98 | }); | 116 | }); |
99 | 117 | ||
100 | onUnmounted(() => { | 118 | onUnmounted(() => { |
119 | + unref(editoreRef)?.off('change', handleOnChange); | ||
120 | + unref(editoreRef)?.off('blur', handleOnBlur); | ||
121 | + unref(editoreRef)?.off('focus', handleOnFocus); | ||
101 | unref(editoreRef)?.destroy(); | 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 | defineExpose({ | 151 | defineExpose({ |
@@ -108,22 +155,41 @@ | @@ -108,22 +155,41 @@ | ||
108 | </script> | 155 | </script> |
109 | 156 | ||
110 | <template> | 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 | </div> | 194 | </div> |
114 | </template> | 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,6 +13,7 @@ export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue'; | ||
13 | export { default as ApiUpload } from './src/components/ApiUpload.vue'; | 13 | export { default as ApiUpload } from './src/components/ApiUpload.vue'; |
14 | 14 | ||
15 | export { default as StructForm } from './src/externalCompns/components/StructForm/StructForm.vue'; | 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 | export { | 19 | export { |
@@ -16,6 +16,7 @@ | @@ -16,6 +16,7 @@ | ||
16 | :formProps="getProps" | 16 | :formProps="getProps" |
17 | :allDefaultValues="defaultValueRef" | 17 | :allDefaultValues="defaultValueRef" |
18 | :formModel="formModel" | 18 | :formModel="formModel" |
19 | + :validateFields="validateFields" | ||
19 | :setFormModel="setFormModel" | 20 | :setFormModel="setFormModel" |
20 | > | 21 | > |
21 | <template #[item]="data" v-for="item in Object.keys($slots)"> | 22 | <template #[item]="data" v-for="item in Object.keys($slots)"> |
@@ -14,6 +14,7 @@ | @@ -14,6 +14,7 @@ | ||
14 | import { get, omit } from 'lodash-es'; | 14 | import { get, omit } from 'lodash-es'; |
15 | import { LoadingOutlined } from '@ant-design/icons-vue'; | 15 | import { LoadingOutlined } from '@ant-design/icons-vue'; |
16 | import { useI18n } from '/@/hooks/web/useI18n'; | 16 | import { useI18n } from '/@/hooks/web/useI18n'; |
17 | + import { useDebounceFn } from '@vueuse/shared'; | ||
17 | 18 | ||
18 | const emit = defineEmits(['options-change', 'change']); | 19 | const emit = defineEmits(['options-change', 'change']); |
19 | const props = withDefaults( | 20 | const props = withDefaults( |
@@ -27,6 +28,7 @@ | @@ -27,6 +28,7 @@ | ||
27 | labelField?: string; | 28 | labelField?: string; |
28 | valueField?: string; | 29 | valueField?: string; |
29 | immediate?: boolean; | 30 | immediate?: boolean; |
31 | + searchField?: string; | ||
30 | queryEmptyDataAgin?: boolean; | 32 | queryEmptyDataAgin?: boolean; |
31 | onChangeHook?: ({ options }: OnChangeHookParams) => void; | 33 | onChangeHook?: ({ options }: OnChangeHookParams) => void; |
32 | dropdownVisibleChangeHook?: ({ options }: OnChangeHookParams) => void; | 34 | dropdownVisibleChangeHook?: ({ options }: OnChangeHookParams) => void; |
@@ -35,6 +37,7 @@ | @@ -35,6 +37,7 @@ | ||
35 | resultField: '', | 37 | resultField: '', |
36 | labelField: 'label', | 38 | labelField: 'label', |
37 | valueField: 'value', | 39 | valueField: 'value', |
40 | + searchField: 'text', | ||
38 | immediate: true, | 41 | immediate: true, |
39 | queryEmptyDataAgin: true, | 42 | queryEmptyDataAgin: true, |
40 | } | 43 | } |
@@ -53,17 +56,27 @@ | @@ -53,17 +56,27 @@ | ||
53 | const { labelField, valueField = 'value', numberToString } = props; | 56 | const { labelField, valueField = 'value', numberToString } = props; |
54 | return unref(options).reduce((prev, next: Recordable) => { | 57 | return unref(options).reduce((prev, next: Recordable) => { |
55 | if (next) { | 58 | if (next) { |
56 | - const value = next[valueField]; | 59 | + const value = get(next, valueField); |
60 | + const label = get(next, labelField); | ||
57 | prev.push({ | 61 | prev.push({ |
58 | - label: next[labelField], | ||
59 | - value: numberToString ? `${value}` : value, | ||
60 | ...omit(next, [labelField, valueField]), | 62 | ...omit(next, [labelField, valueField]), |
63 | + label, | ||
64 | + value: numberToString ? `${value}` : value, | ||
61 | }); | 65 | }); |
62 | } | 66 | } |
63 | return prev; | 67 | return prev; |
64 | }, [] as OptionsItem[]); | 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 | watchEffect(() => { | 80 | watchEffect(() => { |
68 | props.immediate && fetch(); | 81 | props.immediate && fetch(); |
69 | }); | 82 | }); |
@@ -122,8 +135,9 @@ | @@ -122,8 +135,9 @@ | ||
122 | onChangeHook({ options }); | 135 | onChangeHook({ options }); |
123 | } | 136 | } |
124 | 137 | ||
138 | + const debounceSearchFunction = useDebounceFn(handleSearch, 300); | ||
125 | async function handleSearch(params?: string) { | 139 | async function handleSearch(params?: string) { |
126 | - let { searchApi, api } = props; | 140 | + let { searchApi, api, searchField } = props; |
127 | if (!searchApi || !isFunction(searchApi)) { | 141 | if (!searchApi || !isFunction(searchApi)) { |
128 | if (!api || !isFunction(api)) return; | 142 | if (!api || !isFunction(api)) return; |
129 | searchApi = api; | 143 | searchApi = api; |
@@ -131,7 +145,7 @@ | @@ -131,7 +145,7 @@ | ||
131 | options.value = []; | 145 | options.value = []; |
132 | try { | 146 | try { |
133 | loading.value = true; | 147 | loading.value = true; |
134 | - const res = await searchApi({ ...props.params, text: params }); | 148 | + const res = await searchApi({ ...props.params, [searchField]: params }); |
135 | if (Array.isArray(res)) { | 149 | if (Array.isArray(res)) { |
136 | options.value = res; | 150 | options.value = res; |
137 | emitChange(); | 151 | emitChange(); |
@@ -152,11 +166,10 @@ | @@ -152,11 +166,10 @@ | ||
152 | <template> | 166 | <template> |
153 | <Select | 167 | <Select |
154 | @dropdownVisibleChange="handleFetch" | 168 | @dropdownVisibleChange="handleFetch" |
155 | - v-bind="attrs" | ||
156 | - show-search | 169 | + v-bind="getBindProps" |
157 | @change="handleChange" | 170 | @change="handleChange" |
158 | :options="getOptions" | 171 | :options="getOptions" |
159 | - @search="handleSearch" | 172 | + @search="debounceSearchFunction" |
160 | v-model:value="state" | 173 | v-model:value="state" |
161 | > | 174 | > |
162 | <template #[item]="data" v-for="item in Object.keys($slots)"> | 175 | <template #[item]="data" v-for="item in Object.keys($slots)"> |
@@ -126,10 +126,16 @@ | @@ -126,10 +126,16 @@ | ||
126 | } | 126 | } |
127 | } | 127 | } |
128 | 128 | ||
129 | - async function handleFetch() { | ||
130 | - if (!props.immediate && unref(isFirstLoad)) { | 129 | + // async function handleFetch() { |
130 | + // if (!props.immediate && unref(isFirstLoad)) { | ||
131 | + // await fetch(); | ||
132 | + // isFirstLoad.value = false; | ||
133 | + // } | ||
134 | + // } | ||
135 | + | ||
136 | + async function handleFetch(open) { | ||
137 | + if (open) { | ||
131 | await fetch(); | 138 | await fetch(); |
132 | - isFirstLoad.value = false; | ||
133 | } | 139 | } |
134 | } | 140 | } |
135 | 141 |
@@ -6,7 +6,7 @@ | @@ -6,7 +6,7 @@ | ||
6 | <script lang="ts" setup> | 6 | <script lang="ts" setup> |
7 | import { ref, watchEffect, computed, unref, watch, reactive } from 'vue'; | 7 | import { ref, watchEffect, computed, unref, watch, reactive } from 'vue'; |
8 | import { Select, Spin } from 'ant-design-vue'; | 8 | import { Select, Spin } from 'ant-design-vue'; |
9 | - import { isFunction } from '/@/utils/is'; | 9 | + import { isFunction, isNullAndUnDef } from '/@/utils/is'; |
10 | import { useRuleFormItem } from '/@/hooks/component/useFormItem'; | 10 | import { useRuleFormItem } from '/@/hooks/component/useFormItem'; |
11 | import { useAttrs } from '/@/hooks/core/useAttrs'; | 11 | import { useAttrs } from '/@/hooks/core/useAttrs'; |
12 | import { get, omit } from 'lodash-es'; | 12 | import { get, omit } from 'lodash-es'; |
@@ -30,8 +30,11 @@ | @@ -30,8 +30,11 @@ | ||
30 | labelField?: string; | 30 | labelField?: string; |
31 | valueField?: string; | 31 | valueField?: string; |
32 | immediate?: boolean; | 32 | immediate?: boolean; |
33 | - pagenation?: Pagination; | 33 | + searchField?: string; |
34 | + pagination?: Pagination; | ||
34 | queryEmptyDataAgin?: boolean; | 35 | queryEmptyDataAgin?: boolean; |
36 | + fetchSearch?: boolean; | ||
37 | + filterOption?: (inputValue: string, options: Recordable) => boolean; | ||
35 | }>(), | 38 | }>(), |
36 | { | 39 | { |
37 | resultField: '', | 40 | resultField: '', |
@@ -39,14 +42,15 @@ | @@ -39,14 +42,15 @@ | ||
39 | valueField: 'value', | 42 | valueField: 'value', |
40 | immediate: true, | 43 | immediate: true, |
41 | queryEmptyDataAgin: true, | 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 | const OptionsItem = (_, { attrs }: { attrs: { vNode: any } }) => attrs.vNode; | 50 | const OptionsItem = (_, { attrs }: { attrs: { vNode: any } }) => attrs.vNode; |
47 | 51 | ||
48 | const options = ref<OptionsItem[]>([]); | 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 | const scrollLoading = ref(false); | 54 | const scrollLoading = ref(false); |
51 | const lock = ref(false); | 55 | const lock = ref(false); |
52 | const loading = ref(false); | 56 | const loading = ref(false); |
@@ -55,6 +59,13 @@ | @@ -55,6 +59,13 @@ | ||
55 | const attrs = useAttrs(); | 59 | const attrs = useAttrs(); |
56 | const { t } = useI18n(); | 60 | const { t } = useI18n(); |
57 | 61 | ||
62 | + const getPagination = computed(() => { | ||
63 | + return { | ||
64 | + ...props.pagination, | ||
65 | + ...unref(pagination), | ||
66 | + }; | ||
67 | + }); | ||
68 | + | ||
58 | // Embedded in the form, just use the hook binding to perform form verification | 69 | // Embedded in the form, just use the hook binding to perform form verification |
59 | const [state] = useRuleFormItem(props, 'value', 'change', emitData); | 70 | const [state] = useRuleFormItem(props, 'value', 'change', emitData); |
60 | 71 | ||
@@ -86,16 +97,18 @@ | @@ -86,16 +97,18 @@ | ||
86 | { deep: true } | 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 | if (!api || !isFunction(api)) return; | 102 | if (!api || !isFunction(api)) return; |
103 | + const isFetchSearchFlag = fetchSearch && !isNullAndUnDef(searchText) && searchField; | ||
92 | try { | 104 | try { |
93 | !unref(getOptions).length ? (loading.value = true) : (scrollLoading.value = true); | 105 | !unref(getOptions).length ? (loading.value = true) : (scrollLoading.value = true); |
94 | lock.value = true; | 106 | lock.value = true; |
95 | const { total, items } = await api({ | 107 | const { total, items } = await api({ |
96 | ...props.params, | 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 | pagination.total = total; | 114 | pagination.total = total; |
@@ -105,11 +118,13 @@ | @@ -105,11 +118,13 @@ | ||
105 | return; | 118 | return; |
106 | } | 119 | } |
107 | if (props.resultField) { | 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 | emitChange(); | 125 | emitChange(); |
111 | } catch (error) { | 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 | console.warn(error); | 128 | console.warn(error); |
114 | } finally { | 129 | } finally { |
115 | isFirstLoad.value = false; | 130 | isFirstLoad.value = false; |
@@ -134,17 +149,38 @@ | @@ -134,17 +149,38 @@ | ||
134 | emitData.value = args; | 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 | async function handlePopupScroll(event: MouseEvent) { | 160 | async function handlePopupScroll(event: MouseEvent) { |
138 | const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLDivElement; | 161 | const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLDivElement; |
139 | if (scrollTop + clientHeight >= scrollHeight) { | 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 | await fetch(); | 167 | await fetch(); |
143 | } | 168 | } |
144 | } | 169 | } |
145 | } | 170 | } |
146 | 171 | ||
147 | const debounceHandlePopupScroll = useDebounceFn(handlePopupScroll, 100); | 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 | + return filterOption?.(inputValue, option); | ||
178 | + } | ||
179 | + | ||
180 | + if (fetchSearch) { | ||
181 | + await fetch(inputValue); | ||
182 | + } | ||
183 | + }; | ||
148 | </script> | 184 | </script> |
149 | 185 | ||
150 | <template> | 186 | <template> |
@@ -152,7 +188,10 @@ | @@ -152,7 +188,10 @@ | ||
152 | @dropdownVisibleChange="handleFetch" | 188 | @dropdownVisibleChange="handleFetch" |
153 | v-bind="attrs" | 189 | v-bind="attrs" |
154 | @change="handleChange" | 190 | @change="handleChange" |
191 | + @filterOption="handleFilterOption" | ||
155 | :options="getOptions" | 192 | :options="getOptions" |
193 | + optionFilterProp="label" | ||
194 | + :showSearch="true" | ||
156 | v-model:value="state" | 195 | v-model:value="state" |
157 | @popup-scroll="debounceHandlePopupScroll" | 196 | @popup-scroll="debounceHandlePopupScroll" |
158 | > | 197 | > |
@@ -9,7 +9,7 @@ | @@ -9,7 +9,7 @@ | ||
9 | import { useMessage } from '/@/hooks/web/useMessage'; | 9 | import { useMessage } from '/@/hooks/web/useMessage'; |
10 | import { computed, ref, unref } from 'vue'; | 10 | import { computed, ref, unref } from 'vue'; |
11 | import { cloneDeep } from 'lodash-es'; | 11 | import { cloneDeep } from 'lodash-es'; |
12 | - import { isFunction, isNumber, isObject } from '/@/utils/is'; | 12 | + import { isFunction, isNumber, isObject, isString } from '/@/utils/is'; |
13 | import { useDesign } from '/@/hooks/web/useDesign'; | 13 | import { useDesign } from '/@/hooks/web/useDesign'; |
14 | 14 | ||
15 | export interface FileItem { | 15 | export interface FileItem { |
@@ -40,21 +40,38 @@ | @@ -40,21 +40,38 @@ | ||
40 | accept?: string; | 40 | accept?: string; |
41 | maxSize?: number; | 41 | maxSize?: number; |
42 | disabled?: boolean; | 42 | disabled?: boolean; |
43 | - listType?: string; | 43 | + listType?: 'text' | 'picture-card' | 'picture'; |
44 | multiple?: boolean; | 44 | multiple?: boolean; |
45 | maxFileLimit?: number; | 45 | maxFileLimit?: number; |
46 | - showUploadList?: boolean | { showPreviewIcon?: boolean; showRemoveIcon?: boolean }; | 46 | + showUploadList?: InstanceType<typeof Upload>['$props']['showUploadList']; |
47 | transformFile?: (file: File) => string | Blob | Promise<string | Blob | File>; | 47 | transformFile?: (file: File) => string | Blob | Promise<string | Blob | File>; |
48 | api: (file: string | Blob | Promise<string | Blob | File>) => Promise<FileItem>; | 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 | fileList: () => [], | 53 | fileList: () => [], |
52 | maxSize: 5 * 1024 * 1024, | 54 | maxSize: 5 * 1024 * 1024, |
55 | + overFileLimitHiddenUploadEntry: true, | ||
56 | + listType: 'text', | ||
53 | showUploadList: () => ({ showPreviewIcon: true, showRemoveIcon: true }), | 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 | if (file.size > props.maxSize) { | 75 | if (file.size > props.maxSize) { |
59 | createMessage.warning(`文件大小超过${Math.floor(props.maxSize / 1024 / 1024)}mb`); | 76 | createMessage.warning(`文件大小超过${Math.floor(props.maxSize / 1024 / 1024)}mb`); |
60 | return false; | 77 | return false; |
@@ -75,7 +92,7 @@ | @@ -75,7 +92,7 @@ | ||
75 | 92 | ||
76 | const getMaxFileLimit = computed(() => { | 93 | const getMaxFileLimit = computed(() => { |
77 | const { maxFileLimit } = props; | 94 | const { maxFileLimit } = props; |
78 | - return isPictureCard.value ? 1 : maxFileLimit; | 95 | + return isPictureCard.value ? 1 : maxFileLimit || 1; |
79 | }); | 96 | }); |
80 | 97 | ||
81 | const handleUpload = async (file: File | string | Blob | Promise<string | Blob | File>) => { | 98 | const handleUpload = async (file: File | string | Blob | Promise<string | Blob | File>) => { |
@@ -126,16 +143,21 @@ | @@ -126,16 +143,21 @@ | ||
126 | <template> | 143 | <template> |
127 | <Upload | 144 | <Upload |
128 | class="block" | 145 | class="block" |
146 | + :accept="accept" | ||
129 | :class="prefixCls" | 147 | :class="prefixCls" |
130 | :file-list="props.fileList" | 148 | :file-list="props.fileList" |
131 | :list-type="props.listType" | 149 | :list-type="props.listType" |
132 | :disabled="getDisabled" | 150 | :disabled="getDisabled" |
133 | :before-upload="handleBeforeUpload" | 151 | :before-upload="handleBeforeUpload" |
152 | + :show-upload-list="showUploadList" | ||
134 | @preview="handlePreview" | 153 | @preview="handlePreview" |
135 | @download="handleDownload" | 154 | @download="handleDownload" |
136 | :remove="handleRemove" | 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 | <div class="w-full h-full flex flex-col justify-center content-center"> | 161 | <div class="w-full h-full flex flex-col justify-center content-center"> |
140 | <Tooltip title="点击上传或拖拽上传"> | 162 | <Tooltip title="点击上传或拖拽上传"> |
141 | <InboxOutlined class="text-[3rem] !text-blue-500" /> | 163 | <InboxOutlined class="text-[3rem] !text-blue-500" /> |
@@ -14,6 +14,7 @@ | @@ -14,6 +14,7 @@ | ||
14 | import { upperFirst, cloneDeep } from 'lodash-es'; | 14 | import { upperFirst, cloneDeep } from 'lodash-es'; |
15 | import { useItemLabelWidth } from '../hooks/useLabelWidth'; | 15 | import { useItemLabelWidth } from '../hooks/useLabelWidth'; |
16 | import { useI18n } from '/@/hooks/web/useI18n'; | 16 | import { useI18n } from '/@/hooks/web/useI18n'; |
17 | + import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface'; | ||
17 | 18 | ||
18 | export default defineComponent({ | 19 | export default defineComponent({ |
19 | name: 'BasicFormItem', | 20 | name: 'BasicFormItem', |
@@ -39,6 +40,12 @@ | @@ -39,6 +40,12 @@ | ||
39 | type: Function as PropType<(key: string, value: any) => void>, | 40 | type: Function as PropType<(key: string, value: any) => void>, |
40 | default: null, | 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 | tableAction: { | 49 | tableAction: { |
43 | type: Object as PropType<TableActionType>, | 50 | type: Object as PropType<TableActionType>, |
44 | }, | 51 | }, |
@@ -208,6 +215,7 @@ | @@ -208,6 +215,7 @@ | ||
208 | rules[characterInx].message || | 215 | rules[characterInx].message || |
209 | t('component.form.maxTip', [rules[characterInx].max] as Recordable); | 216 | t('component.form.maxTip', [rules[characterInx].max] as Recordable); |
210 | } | 217 | } |
218 | + rules.forEach((item) => !item.trigger && (item.trigger = 'change')); | ||
211 | return rules; | 219 | return rules; |
212 | } | 220 | } |
213 | 221 | ||
@@ -234,6 +242,10 @@ | @@ -234,6 +242,10 @@ | ||
234 | const value = target ? (isCheck ? target.checked : target.value) : e; | 242 | const value = target ? (isCheck ? target.checked : target.value) : e; |
235 | props.setFormModel(field, value); | 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 | const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>; | 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> |
@@ -30,12 +30,14 @@ | @@ -30,12 +30,14 @@ | ||
30 | modalProps?: ExtractPropTypes<InstanceType<typeof BasicModal>['$props']>; | 30 | modalProps?: ExtractPropTypes<InstanceType<typeof BasicModal>['$props']>; |
31 | transferProps?: ExtractPropTypes<TransferType['$props']>; | 31 | transferProps?: ExtractPropTypes<TransferType['$props']>; |
32 | buttonProps?: ExtractPropTypes<InstanceType<typeof Button>['$props']>; | 32 | buttonProps?: ExtractPropTypes<InstanceType<typeof Button>['$props']>; |
33 | + disabled?: any; | ||
33 | }>(), | 34 | }>(), |
34 | { | 35 | { |
35 | labelField: 'label', | 36 | labelField: 'label', |
36 | valueField: 'value', | 37 | valueField: 'value', |
37 | buttonName: '选择产品', | 38 | buttonName: '选择产品', |
38 | maxTagLength: 2, | 39 | maxTagLength: 2, |
40 | + disabled: false, | ||
39 | } | 41 | } |
40 | ); | 42 | ); |
41 | 43 | ||
@@ -146,6 +148,8 @@ | @@ -146,6 +148,8 @@ | ||
146 | ); | 148 | ); |
147 | 149 | ||
148 | const handleOpenModal = () => { | 150 | const handleOpenModal = () => { |
151 | + const { disabled } = props; | ||
152 | + if (disabled) return; | ||
149 | openModal(true); | 153 | openModal(true); |
150 | }; | 154 | }; |
151 | 155 |
@@ -42,6 +42,7 @@ | @@ -42,6 +42,7 @@ | ||
42 | onValueChange?: (selectedRowkeys: string[]) => any[]; | 42 | onValueChange?: (selectedRowkeys: string[]) => any[]; |
43 | onRemoveAfter?: (actionType: ActionType) => Promise<any>; | 43 | onRemoveAfter?: (actionType: ActionType) => Promise<any>; |
44 | onSelectedAfter?: (actionType: ActionType) => Promise<any>; | 44 | onSelectedAfter?: (actionType: ActionType) => Promise<any>; |
45 | + disabled?: any; | ||
45 | }>(), | 46 | }>(), |
46 | { | 47 | { |
47 | buttonName: '选择设备', | 48 | buttonName: '选择设备', |
@@ -49,6 +50,7 @@ | @@ -49,6 +50,7 @@ | ||
49 | maxTagLength: 2, | 50 | maxTagLength: 2, |
50 | labelField: 'label', | 51 | labelField: 'label', |
51 | valueField: 'value', | 52 | valueField: 'value', |
53 | + disabled: false, | ||
52 | } | 54 | } |
53 | ); | 55 | ); |
54 | 56 | ||
@@ -217,6 +219,8 @@ | @@ -217,6 +219,8 @@ | ||
217 | } | 219 | } |
218 | 220 | ||
219 | const handleOpenModal = async () => { | 221 | const handleOpenModal = async () => { |
222 | + const { disabled } = props; | ||
223 | + if (disabled) return; | ||
220 | openModal(true); | 224 | openModal(true); |
221 | await nextTick(); | 225 | await nextTick(); |
222 | if (props.value && !props.value.length) { | 226 | if (props.value && !props.value.length) { |
@@ -3,24 +3,26 @@ | @@ -3,24 +3,26 @@ | ||
3 | <a-input | 3 | <a-input |
4 | placeholder="请输入参数key" | 4 | placeholder="请输入参数key" |
5 | v-model:value="param.label" | 5 | v-model:value="param.label" |
6 | + :disabled="disabled" | ||
6 | style="width: 38%; margin-bottom: 5px" | 7 | style="width: 38%; margin-bottom: 5px" |
7 | @change="emitChange" | 8 | @change="emitChange" |
8 | /> | 9 | /> |
9 | <a-input | 10 | <a-input |
10 | placeholder="请输入参数value" | 11 | placeholder="请输入参数value" |
12 | + :disabled="disabled" | ||
11 | v-model:value="param.value" | 13 | v-model:value="param.value" |
12 | style="width: 38%; margin: 0 0 5px 60px" | 14 | style="width: 38%; margin: 0 0 5px 60px" |
13 | @change="emitChange" | 15 | @change="emitChange" |
14 | /> | 16 | /> |
15 | <MinusCircleOutlined | 17 | <MinusCircleOutlined |
16 | - v-if="dynamicInput.params.length > min" | 18 | + v-if="dynamicInput.params.length > min && !disabled" |
17 | class="dynamic-delete-button" | 19 | class="dynamic-delete-button" |
18 | @click="remove(param)" | 20 | @click="remove(param)" |
19 | style="width: 50px" | 21 | style="width: 50px" |
20 | /> | 22 | /> |
21 | </div> | 23 | </div> |
22 | <div> | 24 | <div> |
23 | - <a-button type="dashed" style="width: 38%" @click="add"> | 25 | + <a-button :disabled="disabled" type="dashed" style="width: 38%" @click="add"> |
24 | <PlusOutlined /> | 26 | <PlusOutlined /> |
25 | 新增 | 27 | 新增 |
26 | </a-button> | 28 | </a-button> |
@@ -49,11 +51,16 @@ | @@ -49,11 +51,16 @@ | ||
49 | value: propTypes.object.def({}), | 51 | value: propTypes.object.def({}), |
50 | //自定义删除按钮多少才会显示 | 52 | //自定义删除按钮多少才会显示 |
51 | min: propTypes.integer.def(0), | 53 | min: propTypes.integer.def(0), |
54 | + disabled: { | ||
55 | + type: Boolean, | ||
56 | + default: false, | ||
57 | + }, | ||
52 | }, | 58 | }, |
53 | emits: ['change', 'update:value'], | 59 | emits: ['change', 'update:value'], |
54 | setup(props, { emit }) { | 60 | setup(props, { emit }) { |
55 | //input动态数据 | 61 | //input动态数据 |
56 | const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] }); | 62 | const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] }); |
63 | + | ||
57 | //删除Input | 64 | //删除Input |
58 | const remove = (item: Params) => { | 65 | const remove = (item: Params) => { |
59 | let index = dynamicInput.params.indexOf(item); | 66 | let index = dynamicInput.params.indexOf(item); |
@@ -108,6 +115,7 @@ | @@ -108,6 +115,7 @@ | ||
108 | emitChange, | 115 | emitChange, |
109 | remove, | 116 | remove, |
110 | add, | 117 | add, |
118 | + // disabled, | ||
111 | }; | 119 | }; |
112 | }, | 120 | }, |
113 | }); | 121 | }); |
@@ -39,7 +39,7 @@ export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[] | @@ -39,7 +39,7 @@ export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[] | ||
39 | span: 18, | 39 | span: 18, |
40 | }, | 40 | }, |
41 | componentProps: { | 41 | componentProps: { |
42 | - maxLength: 255, | 42 | + maxLength: 32, |
43 | placeholder: '请输入功能名称', | 43 | placeholder: '请输入功能名称', |
44 | }, | 44 | }, |
45 | }, | 45 | }, |
@@ -52,7 +52,7 @@ export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[] | @@ -52,7 +52,7 @@ export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[] | ||
52 | span: 18, | 52 | span: 18, |
53 | }, | 53 | }, |
54 | componentProps: { | 54 | componentProps: { |
55 | - maxLength: 255, | 55 | + maxLength: 128, |
56 | placeholder: '请输入标识符', | 56 | placeholder: '请输入标识符', |
57 | }, | 57 | }, |
58 | }, | 58 | }, |
1 | import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form'; | 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 | import type { DynamicProps } from '/#/utils'; | 3 | import type { DynamicProps } from '/#/utils'; |
4 | import { ref, onUnmounted, unref, nextTick, watch } from 'vue'; | 4 | import { ref, onUnmounted, unref, nextTick, watch } from 'vue'; |
5 | import { isProdMode } from '/@/utils/env'; | 5 | import { isProdMode } from '/@/utils/env'; |
@@ -112,9 +112,12 @@ export function useForm(props?: Props): UseFormReturnType { | @@ -112,9 +112,12 @@ export function useForm(props?: Props): UseFormReturnType { | ||
112 | return form.validate(nameList); | 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 | const form = await getForm(); | 119 | const form = await getForm(); |
117 | - return form.validateFields(nameList); | 120 | + return form.validateFields(nameList, options); |
118 | }, | 121 | }, |
119 | }; | 122 | }; |
120 | 123 |
1 | import type { ComputedRef, Ref } from 'vue'; | 1 | import type { ComputedRef, Ref } from 'vue'; |
2 | import type { FormProps, FormSchema, FormActionType } from '../types/form'; | 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 | import { unref, toRaw } from 'vue'; | 4 | import { unref, toRaw } from 'vue'; |
5 | import { isArray, isFunction, isObject, isString } from '/@/utils/is'; | 5 | import { isArray, isFunction, isObject, isString } from '/@/utils/is'; |
6 | import { deepMerge } from '/@/utils'; | 6 | import { deepMerge } from '/@/utils'; |
@@ -206,8 +206,8 @@ export function useFormEvents({ | @@ -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 | async function validate(nameList?: NamePath[] | undefined) { | 213 | async function validate(nameList?: NamePath[] | undefined) { |
@@ -38,7 +38,7 @@ export const basicProps = { | @@ -38,7 +38,7 @@ export const basicProps = { | ||
38 | }, | 38 | }, |
39 | autoSetPlaceHolder: propTypes.bool.def(true), | 39 | autoSetPlaceHolder: propTypes.bool.def(true), |
40 | // 在INPUT组件上单击回车时,是否自动提交 | 40 | // 在INPUT组件上单击回车时,是否自动提交 |
41 | - autoSubmitOnEnter: propTypes.bool.def(false), | 41 | + autoSubmitOnEnter: propTypes.bool.def(true), |
42 | submitOnReset: propTypes.bool, | 42 | submitOnReset: propTypes.bool, |
43 | size: propTypes.oneOf(['default', 'small', 'large']).def('default'), | 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 | import type { VNode } from 'vue'; | 2 | import type { VNode } from 'vue'; |
3 | import type { ButtonProps as AntdButtonProps } from '/@/components/Button'; | 3 | import type { ButtonProps as AntdButtonProps } from '/@/components/Button'; |
4 | import type { FormItem } from './formItem'; | 4 | import type { FormItem } from './formItem'; |
@@ -39,7 +39,7 @@ export interface FormActionType { | @@ -39,7 +39,7 @@ export interface FormActionType { | ||
39 | prefixField: string | undefined, | 39 | prefixField: string | undefined, |
40 | first?: boolean | undefined | 40 | first?: boolean | undefined |
41 | ) => Promise<void>; | 41 | ) => Promise<void>; |
42 | - validateFields: (nameList?: NamePath[]) => Promise<any>; | 42 | + validateFields: (nameList?: NamePath[], options?: ValidateOptions) => Promise<any>; |
43 | validate: (nameList?: NamePath[]) => Promise<any>; | 43 | validate: (nameList?: NamePath[]) => Promise<any>; |
44 | scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>; | 44 | scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>; |
45 | } | 45 | } |
@@ -130,4 +130,11 @@ export type ComponentType = | @@ -130,4 +130,11 @@ export type ComponentType = | ||
130 | | 'ControlGroup' | 130 | | 'ControlGroup' |
131 | | 'JSONEditor' | 131 | | 'JSONEditor' |
132 | | 'OrgTreeSelect' | 132 | | 'OrgTreeSelect' |
133 | - | 'ExtendDesc'; | 133 | + | 'ExtendDesc' |
134 | + | 'JavaScriptFunctionEditor' | ||
135 | + | 'JavascriptEditorWithTestModal' | ||
136 | + | 'AttributeConfiguration' | ||
137 | + | 'CorrelationFilters' | ||
138 | + | 'RelationsQuery' | ||
139 | + | 'CredentialsCard' | ||
140 | + | 'ApiComplete'; |
@@ -394,6 +394,13 @@ | @@ -394,6 +394,13 @@ | ||
394 | //.ant-table-tbody > tr.ant-table-row-selected td { | 394 | //.ant-table-tbody > tr.ant-table-row-selected td { |
395 | //background-color: fade(@primary-color, 8%) !important; | 395 | //background-color: fade(@primary-color, 8%) !important; |
396 | //} | 396 | //} |
397 | + .ant-table-placeholder { | ||
398 | + display: flex; | ||
399 | + align-items: center; | ||
400 | + justify-content: center; | ||
401 | + height: 670px; | ||
402 | + max-height: 670px; | ||
403 | + } | ||
397 | } | 404 | } |
398 | 405 | ||
399 | .ant-pagination { | 406 | .ant-pagination { |
@@ -48,6 +48,7 @@ | @@ -48,6 +48,7 @@ | ||
48 | 'update:value', | 48 | 'update:value', |
49 | 'change', | 49 | 'change', |
50 | 'check', | 50 | 'check', |
51 | + 'unSelectAll', | ||
51 | 'update:searchValue', | 52 | 'update:searchValue', |
52 | ], | 53 | ], |
53 | setup(props, { attrs, slots, emit, expose }) { | 54 | setup(props, { attrs, slots, emit, expose }) { |
@@ -188,6 +189,7 @@ | @@ -188,6 +189,7 @@ | ||
188 | } | 189 | } |
189 | 190 | ||
190 | function checkAll(checkAll: boolean) { | 191 | function checkAll(checkAll: boolean) { |
192 | + if (!checkAll) emit('unSelectAll'); | ||
191 | state.checkedKeys = checkAll ? getEnabledKeys() : ([] as Keys); | 193 | state.checkedKeys = checkAll ? getEnabledKeys() : ([] as Keys); |
192 | } | 194 | } |
193 | 195 |
@@ -2,17 +2,23 @@ | @@ -2,17 +2,23 @@ | ||
2 | import { isNumber } from 'lodash'; | 2 | import { isNumber } from 'lodash'; |
3 | import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'; | 3 | import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'; |
4 | import 'video.js/dist/video-js.css'; | 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 | import { useDesign } from '/@/hooks/web/useDesign'; | 6 | import { useDesign } from '/@/hooks/web/useDesign'; |
7 | import { getJwtToken, getShareJwtToken } from '/@/utils/auth'; | 7 | import { getJwtToken, getShareJwtToken } from '/@/utils/auth'; |
8 | import { isShareMode } from '/@/views/sys/share/hook'; | 8 | import { isShareMode } from '/@/views/sys/share/hook'; |
9 | import 'videojs-flvjs-es6'; | 9 | import 'videojs-flvjs-es6'; |
10 | const { prefixCls } = useDesign('basic-video-play'); | 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 | const emit = defineEmits<{ | 23 | const emit = defineEmits<{ |
18 | (event: 'ready', instance?: Nullable<VideoJsPlayer>): void; | 24 | (event: 'ready', instance?: Nullable<VideoJsPlayer>): void; |
@@ -68,8 +74,18 @@ | @@ -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 | onMounted(() => { | 87 | onMounted(() => { |
72 | - init(); | 88 | + props.immediateInitOnMounted && init(); |
73 | }); | 89 | }); |
74 | 90 | ||
75 | onUnmounted(() => { | 91 | onUnmounted(() => { |
@@ -79,6 +95,7 @@ | @@ -79,6 +95,7 @@ | ||
79 | }); | 95 | }); |
80 | 96 | ||
81 | defineExpose({ | 97 | defineExpose({ |
98 | + customInit, | ||
82 | reloadPlayer: init, | 99 | reloadPlayer: init, |
83 | getInstance: () => unref(videoPlayInstance), | 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,6 +38,15 @@ export const PLATFORM = 'PLATFORM'; | ||
38 | export const PLATFORM_INFO_CACHE_KEY = 'PLATFORM_INFO'; | 38 | export const PLATFORM_INFO_CACHE_KEY = 'PLATFORM_INFO'; |
39 | 39 | ||
40 | export const MENU_LIST = 'MENU_LIST'; | 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 | export enum CacheTypeEnum { | 50 | export enum CacheTypeEnum { |
42 | SESSION, | 51 | SESSION, |
43 | LOCAL, | 52 | LOCAL, |
@@ -19,4 +19,8 @@ export enum DictEnum { | @@ -19,4 +19,8 @@ export enum DictEnum { | ||
19 | DISABLE_CUSTOMER_AUTH = 'disabled_customer_auth', | 19 | DISABLE_CUSTOMER_AUTH = 'disabled_customer_auth', |
20 | // 寄存器数据格式 | 20 | // 寄存器数据格式 |
21 | REGISTER_DATA_FORMAT = 'register_data_format', | 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 | } |
@@ -16,4 +16,8 @@ export const PageEnum = { | @@ -16,4 +16,8 @@ export const PageEnum = { | ||
16 | DEVICE_LIST: '/device/list', | 16 | DEVICE_LIST: '/device/list', |
17 | 17 | ||
18 | SHARE_PAGE: '/share/:viewType/:id/:publicId', | 18 | SHARE_PAGE: '/share/:viewType/:id/:publicId', |
19 | + | ||
20 | + RULE_CHAIN_DETAIL: '/rule/chain/:id', | ||
21 | + | ||
22 | + RULE_CHAIN_DETAIL_IMPORT: '/rule/chain/import', | ||
19 | }; | 23 | }; |
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 | +} |
@@ -2,7 +2,8 @@ import { RouteLocationNormalizedLoaded } from 'vue-router'; | @@ -2,7 +2,8 @@ import { RouteLocationNormalizedLoaded } from 'vue-router'; | ||
2 | 2 | ||
3 | const menuMap = new Map(); | 3 | const menuMap = new Map(); |
4 | 4 | ||
5 | -menuMap.set('/visual/board/detail/:boardId/:boardName?', '/visual/board'); | 5 | +menuMap.set('/visual/board/detail/:boardId/:boardName/:organizationId?', '/visual/board'); |
6 | +menuMap.set('/rule/chain/:id', '/rule/chain'); | ||
6 | 7 | ||
7 | export const useMenuActiveFix = (route: RouteLocationNormalizedLoaded) => { | 8 | export const useMenuActiveFix = (route: RouteLocationNormalizedLoaded) => { |
8 | let flag = false; | 9 | let flag = false; |
@@ -52,6 +52,7 @@ export function useBatchDelete( | @@ -52,6 +52,7 @@ export function useBatchDelete( | ||
52 | if (record) { | 52 | if (record) { |
53 | await deleteFn([record.id]); | 53 | await deleteFn([record.id]); |
54 | createMessage.success('删除成功'); | 54 | createMessage.success('删除成功'); |
55 | + selectedRowIds.value = []; | ||
55 | } else { | 56 | } else { |
56 | await deleteFn(selectedRowIds.value); | 57 | await deleteFn(selectedRowIds.value); |
57 | createMessage.success('批量删除成功'); | 58 | createMessage.success('批量删除成功'); |
@@ -16,6 +16,7 @@ | @@ -16,6 +16,7 @@ | ||
16 | mode="multiple" | 16 | mode="multiple" |
17 | v-model:value="model[field]" | 17 | v-model:value="model[field]" |
18 | :options="alarmContactOptions.map((item) => ({ value: item.value, label: item.label }))" | 18 | :options="alarmContactOptions.map((item) => ({ value: item.value, label: item.label }))" |
19 | + @change="handleChange" | ||
19 | > | 20 | > |
20 | <template #dropdownRender="{ menuNode: menu }"> | 21 | <template #dropdownRender="{ menuNode: menu }"> |
21 | <v-nodes :vnodes="menu" /> | 22 | <v-nodes :vnodes="menu" /> |
@@ -53,8 +54,14 @@ | @@ -53,8 +54,14 @@ | ||
53 | return attrs.vnodes; | 54 | return attrs.vnodes; |
54 | }, | 55 | }, |
55 | }, | 56 | }, |
57 | + props: { | ||
58 | + defaultEnable: { | ||
59 | + type: Boolean, | ||
60 | + default: false, | ||
61 | + }, | ||
62 | + }, | ||
56 | emits: ['success', 'register'], | 63 | emits: ['success', 'register'], |
57 | - setup(_, { emit }) { | 64 | + setup(props, { emit }) { |
58 | const alarmContactOptions: any = ref([]); | 65 | const alarmContactOptions: any = ref([]); |
59 | const orgId = ref(''); | 66 | const orgId = ref(''); |
60 | const orgFunc = (e) => { | 67 | const orgFunc = (e) => { |
@@ -82,6 +89,7 @@ | @@ -82,6 +89,7 @@ | ||
82 | const [registerAlarmContactDrawer, { openDrawer }] = useDrawer(); | 89 | const [registerAlarmContactDrawer, { openDrawer }] = useDrawer(); |
83 | async function handleSuccess() { | 90 | async function handleSuccess() { |
84 | //获取告警联系人 | 91 | //获取告警联系人 |
92 | + if (!unref(orgId)) return; | ||
85 | const res = await byOrgIdGetAlarmContact(orgId.value); | 93 | const res = await byOrgIdGetAlarmContact(orgId.value); |
86 | if (res) { | 94 | if (res) { |
87 | alarmContactOptions.value = res.map((m) => { | 95 | alarmContactOptions.value = res.map((m) => { |
@@ -91,6 +99,10 @@ | @@ -91,6 +99,10 @@ | ||
91 | alarmContactOptions.value = []; | 99 | alarmContactOptions.value = []; |
92 | } | 100 | } |
93 | } | 101 | } |
102 | + | ||
103 | + const handleChange = () => { | ||
104 | + validateFields(['alarmContactId']); | ||
105 | + }; | ||
94 | // 新增或编辑 | 106 | // 新增或编辑 |
95 | const handleOpenAlarmContact = () => { | 107 | const handleOpenAlarmContact = () => { |
96 | openDrawer(true, { | 108 | openDrawer(true, { |
@@ -100,7 +112,10 @@ | @@ -100,7 +112,10 @@ | ||
100 | const isUpdate = ref(true); | 112 | const isUpdate = ref(true); |
101 | let allData: any = reactive({}); | 113 | let allData: any = reactive({}); |
102 | const editId = ref(''); | 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 | labelWidth: 120, | 119 | labelWidth: 120, |
105 | schemas: formSchema, | 120 | schemas: formSchema, |
106 | showActionButtonGroup: false, | 121 | showActionButtonGroup: false, |
@@ -165,6 +180,9 @@ | @@ -165,6 +180,9 @@ | ||
165 | ...alarmContactIdD, | 180 | ...alarmContactIdD, |
166 | ...messageModeD, | 181 | ...messageModeD, |
167 | }; | 182 | }; |
183 | + | ||
184 | + props.defaultEnable && Object.assign(allData, { status: 1 }); | ||
185 | + | ||
168 | if (!unref(isUpdate)) { | 186 | if (!unref(isUpdate)) { |
169 | delete allData.id; | 187 | delete allData.id; |
170 | } | 188 | } |
@@ -191,6 +209,7 @@ | @@ -191,6 +209,7 @@ | ||
191 | handleOpenAlarmContact, | 209 | handleOpenAlarmContact, |
192 | registerAlarmContactDrawer, | 210 | registerAlarmContactDrawer, |
193 | handleSuccess, | 211 | handleSuccess, |
212 | + handleChange, | ||
194 | }; | 213 | }; |
195 | }, | 214 | }, |
196 | }); | 215 | }); |
@@ -37,7 +37,7 @@ | @@ -37,7 +37,7 @@ | ||
37 | </a-button> | 37 | </a-button> |
38 | </template> | 38 | </template> |
39 | <template #status="{ record }"> | 39 | <template #status="{ record }"> |
40 | - <Authority value="api:yt:alarm:profile:status"> | 40 | + <Authority value="api:yt:alarm:profile:update"> |
41 | <Switch | 41 | <Switch |
42 | :checked="record.status === 1" | 42 | :checked="record.status === 1" |
43 | :loading="record.pendingStatus" | 43 | :loading="record.pendingStatus" |
@@ -47,7 +47,7 @@ | @@ -47,7 +47,7 @@ | ||
47 | /> | 47 | /> |
48 | </Authority> | 48 | </Authority> |
49 | <Tag | 49 | <Tag |
50 | - v-if="!hasPermission('api:yt:alarm:profile:status')" | 50 | + v-if="!hasPermission('api:yt:alarm:profile:update')" |
51 | :color="record.status ? 'green' : 'red'" | 51 | :color="record.status ? 'green' : 'red'" |
52 | > | 52 | > |
53 | {{ record.status ? '启用' : '禁用' }} | 53 | {{ record.status ? '启用' : '禁用' }} |
@@ -3,20 +3,7 @@ import { FormSchema } from '/@/components/Form'; | @@ -3,20 +3,7 @@ import { FormSchema } from '/@/components/Form'; | ||
3 | import { BasicColumn } from '/@/components/Table'; | 3 | import { BasicColumn } from '/@/components/Table'; |
4 | import moment from 'moment'; | 4 | import moment from 'moment'; |
5 | import { findDictItemByCode } from '/@/api/system/dict'; | 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 | export const alarmSearchSchemas: FormSchema[] = [ | 8 | export const alarmSearchSchemas: FormSchema[] = [ |
22 | { | 9 | { |
@@ -126,6 +113,10 @@ export const alarmColumns: BasicColumn[] = [ | @@ -126,6 +113,10 @@ export const alarmColumns: BasicColumn[] = [ | ||
126 | title: '告警设备', | 113 | title: '告警设备', |
127 | dataIndex: 'deviceName', | 114 | dataIndex: 'deviceName', |
128 | width: 100, | 115 | width: 100, |
116 | + customRender: ({ record }) => { | ||
117 | + const { deviceAlias, deviceName } = record || {}; | ||
118 | + return deviceAlias || deviceName; | ||
119 | + }, | ||
129 | }, | 120 | }, |
130 | { | 121 | { |
131 | title: '告警场景', | 122 | title: '告警场景', |
@@ -139,6 +130,12 @@ export const alarmColumns: BasicColumn[] = [ | @@ -139,6 +130,12 @@ export const alarmColumns: BasicColumn[] = [ | ||
139 | format: (text) => alarmLevel(text), | 130 | format: (text) => alarmLevel(text), |
140 | }, | 131 | }, |
141 | { | 132 | { |
133 | + title: '告警详情', | ||
134 | + dataIndex: 'details', | ||
135 | + slots: { customRender: 'details' }, | ||
136 | + width: 160, | ||
137 | + }, | ||
138 | + { | ||
142 | title: '状态', | 139 | title: '状态', |
143 | dataIndex: 'status', | 140 | dataIndex: 'status', |
144 | format: (text) => statusType(text), | 141 | format: (text) => statusType(text), |
@@ -46,14 +46,16 @@ | @@ -46,14 +46,16 @@ | ||
46 | const alarmStatus = ref(''); | 46 | const alarmStatus = ref(''); |
47 | const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => { | 47 | const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => { |
48 | await resetFields(); | 48 | await resetFields(); |
49 | + const { deviceAlias, deviceName, severity, status, details, id } = data || {}; | ||
49 | await setFieldsValue({ | 50 | await setFieldsValue({ |
50 | ...data, | 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 | const handleAlarm = async () => { | 61 | const handleAlarm = async () => { |
1 | -import { AlarmStatus, AlarmStatusMean } from '../config/detail.config'; | ||
2 | import { clearOrAckAlarm, getDeviceAlarm } from '/@/api/device/deviceManager'; | 1 | import { clearOrAckAlarm, getDeviceAlarm } from '/@/api/device/deviceManager'; |
3 | import { notification, Button, Tag } from 'ant-design-vue'; | 2 | import { notification, Button, Tag } from 'ant-design-vue'; |
4 | import { h, onMounted, onUnmounted } from 'vue'; | 3 | import { h, onMounted, onUnmounted } from 'vue'; |
@@ -8,6 +7,7 @@ import { RoleEnum } from '/@/enums/roleEnum'; | @@ -8,6 +7,7 @@ import { RoleEnum } from '/@/enums/roleEnum'; | ||
8 | import { usePermission } from '/@/hooks/web/usePermission'; | 7 | import { usePermission } from '/@/hooks/web/usePermission'; |
9 | import { useUserStore } from '/@/store/modules/user'; | 8 | import { useUserStore } from '/@/store/modules/user'; |
10 | import { useGlobSetting } from '/@/hooks/setting'; | 9 | import { useGlobSetting } from '/@/hooks/setting'; |
10 | +import { AlarmStatus, AlarmStatusMean } from '/@/enums/alarmEnum'; | ||
11 | 11 | ||
12 | interface UseAlarmNotifyParams { | 12 | interface UseAlarmNotifyParams { |
13 | alarmNotifyStatus?: AlarmStatus; | 13 | alarmNotifyStatus?: AlarmStatus; |
@@ -13,47 +13,105 @@ | @@ -13,47 +13,105 @@ | ||
13 | ]" | 13 | ]" |
14 | /> | 14 | /> |
15 | </template> | 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 | </BasicTable> | 47 | </BasicTable> |
17 | <AlarmDetailDrawer @register="registerDetailDrawer" @success="handleSuccess" /> | 48 | <AlarmDetailDrawer @register="registerDetailDrawer" @success="handleSuccess" /> |
18 | </div> | 49 | </div> |
19 | </template> | 50 | </template> |
20 | <script lang="ts"> | 51 | <script lang="ts"> |
21 | - import { defineComponent } from 'vue'; | 52 | + import { defineComponent, nextTick, h, computed } from 'vue'; |
22 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; | 53 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
23 | import { alarmColumns, alarmSearchSchemas } from './config/detail.config'; | 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 | import { useDrawer } from '/@/components/Drawer'; | 56 | import { useDrawer } from '/@/components/Drawer'; |
26 | import AlarmDetailDrawer from './cpns/AlarmDetailDrawer.vue'; | 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 | export default defineComponent({ | 72 | export default defineComponent({ |
29 | name: 'AlarmCenter', | 73 | name: 'AlarmCenter', |
30 | components: { | 74 | components: { |
75 | + Button, | ||
31 | BasicTable, | 76 | BasicTable, |
32 | TableAction, | 77 | TableAction, |
33 | AlarmDetailDrawer, | 78 | AlarmDetailDrawer, |
79 | + QuestionCircleOutlined, | ||
80 | + Tooltip, | ||
34 | }, | 81 | }, |
35 | 82 | ||
36 | setup() { | 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 | const [registerDetailDrawer, { openDrawer }] = useDrawer(); | 115 | const [registerDetailDrawer, { openDrawer }] = useDrawer(); |
58 | const handleDetail = (record: Recordable) => { | 116 | const handleDetail = (record: Recordable) => { |
59 | openDrawer(true, record); | 117 | openDrawer(true, record); |
@@ -61,11 +119,137 @@ | @@ -61,11 +119,137 @@ | ||
61 | const handleSuccess = () => { | 119 | const handleSuccess = () => { |
62 | reload(); | 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 | return { | 243 | return { |
65 | registerTable, | 244 | registerTable, |
66 | registerDetailDrawer, | 245 | registerDetailDrawer, |
67 | handleDetail, | 246 | handleDetail, |
68 | handleSuccess, | 247 | handleSuccess, |
248 | + handleViewAlarmDetails, | ||
249 | + handleBatchAck, | ||
250 | + handleBatchClear, | ||
251 | + getCanBatchAck, | ||
252 | + getCanBatchClear, | ||
69 | }; | 253 | }; |
70 | }, | 254 | }, |
71 | }); | 255 | }); |
@@ -8,23 +8,6 @@ | @@ -8,23 +8,6 @@ | ||
8 | @ok="handleSubmit" | 8 | @ok="handleSubmit" |
9 | > | 9 | > |
10 | <BasicForm @register="registerForm"> | 10 | <BasicForm @register="registerForm"> |
11 | - <template #iconSelect> | ||
12 | - <Upload | ||
13 | - name="avatar" | ||
14 | - list-type="picture-card" | ||
15 | - class="avatar-uploader" | ||
16 | - :show-upload-list="false" | ||
17 | - :customRequest="customUpload" | ||
18 | - :before-upload="beforeUpload" | ||
19 | - > | ||
20 | - <img v-if="tenantLogo" :src="tenantLogo" alt="avatar" /> | ||
21 | - <div v-else> | ||
22 | - <LoadingOutlined v-if="loading" /> | ||
23 | - <plus-outlined v-else /> | ||
24 | - <div class="ant-upload-text">上传</div> | ||
25 | - </div> | ||
26 | - </Upload> | ||
27 | - </template> | ||
28 | <template #videoPlatformIdSlot="{ model, field }"> | 11 | <template #videoPlatformIdSlot="{ model, field }"> |
29 | <a-select | 12 | <a-select |
30 | placeholder="请选择流媒体配置" | 13 | placeholder="请选择流媒体配置" |
@@ -51,23 +34,20 @@ | @@ -51,23 +34,20 @@ | ||
51 | import { formSchema } from './config.data'; | 34 | import { formSchema } from './config.data'; |
52 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; | 35 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
53 | import { createOrEditCameraManage } from '/@/api/camera/cameraManager'; | 36 | import { createOrEditCameraManage } from '/@/api/camera/cameraManager'; |
54 | - import { message, Upload } from 'ant-design-vue'; | ||
55 | import { useMessage } from '/@/hooks/web/useMessage'; | 37 | import { useMessage } from '/@/hooks/web/useMessage'; |
56 | - import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'; | ||
57 | - import { upload } from '/@/api/oss/ossFileUploader'; | ||
58 | - import { FileItem } from '/@/components/Upload/src/typing'; | 38 | + import { PlusOutlined } from '@ant-design/icons-vue'; |
59 | import { getStreamingMediaList } from '/@/api/camera/cameraManager'; | 39 | import { getStreamingMediaList } from '/@/api/camera/cameraManager'; |
60 | import SteramingDrawer from '../streaming/SteramingDrawer.vue'; | 40 | import SteramingDrawer from '../streaming/SteramingDrawer.vue'; |
61 | import { useDrawer } from '/@/components/Drawer'; | 41 | import { useDrawer } from '/@/components/Drawer'; |
42 | + import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue'; | ||
43 | + import { buildUUID } from '/@/utils/uuid'; | ||
62 | 44 | ||
63 | export default defineComponent({ | 45 | export default defineComponent({ |
64 | name: 'ContactDrawer', | 46 | name: 'ContactDrawer', |
65 | components: { | 47 | components: { |
66 | BasicDrawer, | 48 | BasicDrawer, |
67 | BasicForm, | 49 | BasicForm, |
68 | - Upload, | ||
69 | PlusOutlined, | 50 | PlusOutlined, |
70 | - LoadingOutlined, | ||
71 | SteramingDrawer, | 51 | SteramingDrawer, |
72 | VNodes: (_, { attrs }) => { | 52 | VNodes: (_, { attrs }) => { |
73 | return attrs.vnodes; | 53 | return attrs.vnodes; |
@@ -117,42 +97,19 @@ | @@ -117,42 +97,19 @@ | ||
117 | if (unref(isUpdate)) { | 97 | if (unref(isUpdate)) { |
118 | await nextTick(); | 98 | await nextTick(); |
119 | editId.value = data.record.id; | 99 | editId.value = data.record.id; |
120 | - tenantLogo.value = data.record?.avatar; | ||
121 | - await setFieldsValue(data.record); | 100 | + if (data.record.avatar) { |
101 | + setFieldsValue({ | ||
102 | + avatar: [{ uid: buildUUID(), name: 'name', url: data.record.avatar } as FileItem], | ||
103 | + }); | ||
104 | + } | ||
105 | + const { avatar, ...params } = data.record; | ||
106 | + console.log(avatar); | ||
107 | + await setFieldsValue({ ...params }); | ||
122 | } else { | 108 | } else { |
123 | - tenantLogo.value = ''; | ||
124 | editId.value = ''; | 109 | editId.value = ''; |
125 | } | 110 | } |
126 | }); | 111 | }); |
127 | 112 | ||
128 | - const tenantLogo = ref(''); | ||
129 | - | ||
130 | - async function customUpload({ file }) { | ||
131 | - if (beforeUpload(file)) { | ||
132 | - tenantLogo.value = ''; | ||
133 | - loading.value = true; | ||
134 | - const formData = new FormData(); | ||
135 | - formData.append('file', file); | ||
136 | - const response = await upload(formData); | ||
137 | - if (response.fileStaticUri) { | ||
138 | - tenantLogo.value = response.fileStaticUri; | ||
139 | - loading.value = false; | ||
140 | - } | ||
141 | - } | ||
142 | - } | ||
143 | - | ||
144 | - const beforeUpload = (file: FileItem) => { | ||
145 | - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; | ||
146 | - if (!isJpgOrPng) { | ||
147 | - message.error('只能上传图片文件!'); | ||
148 | - } | ||
149 | - const isLt2M = (file.size as number) / 1024 / 1024 < 5; | ||
150 | - if (!isLt2M) { | ||
151 | - message.error('图片大小不能超过5MB!'); | ||
152 | - } | ||
153 | - return isJpgOrPng && isLt2M; | ||
154 | - }; | ||
155 | - | ||
156 | const getTitle = computed(() => (!unref(isUpdate) ? '新增视频配置' : '编辑视频配置')); | 113 | const getTitle = computed(() => (!unref(isUpdate) ? '新增视频配置' : '编辑视频配置')); |
157 | 114 | ||
158 | async function handleSubmit() { | 115 | async function handleSubmit() { |
@@ -161,8 +118,9 @@ | @@ -161,8 +118,9 @@ | ||
161 | const { createMessage } = useMessage(); | 118 | const { createMessage } = useMessage(); |
162 | const values = await validate(); | 119 | const values = await validate(); |
163 | if (!values) return; | 120 | if (!values) return; |
164 | - if (tenantLogo.value !== '') { | ||
165 | - values.avatar = tenantLogo.value; | 121 | + if (Reflect.has(values, 'avatar')) { |
122 | + const file = (values.avatar || []).at(0) || {}; | ||
123 | + values.avatar = file.url || null; | ||
166 | } | 124 | } |
167 | if (editId.value !== '') { | 125 | if (editId.value !== '') { |
168 | values.id = editId.value; | 126 | values.id = editId.value; |
@@ -187,9 +145,6 @@ | @@ -187,9 +145,6 @@ | ||
187 | registerDrawer, | 145 | registerDrawer, |
188 | registerForm, | 146 | registerForm, |
189 | handleSubmit, | 147 | handleSubmit, |
190 | - customUpload, | ||
191 | - beforeUpload, | ||
192 | - tenantLogo, | ||
193 | loading, | 148 | loading, |
194 | streamConfigOptions, | 149 | streamConfigOptions, |
195 | registerSteramingDrawer, | 150 | registerSteramingDrawer, |
@@ -120,7 +120,7 @@ | @@ -120,7 +120,7 @@ | ||
120 | const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); | 120 | const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); |
121 | const [registerModal, { openModal }] = useModal(); | 121 | const [registerModal, { openModal }] = useModal(); |
122 | // 表格hooks | 122 | // 表格hooks |
123 | - const [registerTable, { reload, setProps }] = useTable({ | 123 | + const [registerTable, { reload, setProps, clearSelectedRowKeys }] = useTable({ |
124 | title: '视频列表', | 124 | title: '视频列表', |
125 | api: cameraPage, | 125 | api: cameraPage, |
126 | columns, | 126 | columns, |
@@ -149,6 +149,7 @@ | @@ -149,6 +149,7 @@ | ||
149 | // 刷新 | 149 | // 刷新 |
150 | const handleSuccess = () => { | 150 | const handleSuccess = () => { |
151 | reload(); | 151 | reload(); |
152 | + clearSelectedRowKeys(); | ||
152 | }; | 153 | }; |
153 | const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | 154 | const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( |
154 | deleteCameraManage, | 155 | deleteCameraManage, |
@@ -20,6 +20,12 @@ | @@ -20,6 +20,12 @@ | ||
20 | import { useFingerprint } from '/@/utils/useFingerprint'; | 20 | import { useFingerprint } from '/@/utils/useFingerprint'; |
21 | import { GetResult } from '@fingerprintjs/fingerprintjs'; | 21 | import { GetResult } from '@fingerprintjs/fingerprintjs'; |
22 | 22 | ||
23 | + const props = defineProps({ | ||
24 | + mode: { | ||
25 | + type: String, | ||
26 | + default: PageMode.SPLIT_SCREEN_MODE, | ||
27 | + }, | ||
28 | + }); | ||
23 | type CameraRecordItem = CameraRecord & { | 29 | type CameraRecordItem = CameraRecord & { |
24 | canPlay?: boolean; | 30 | canPlay?: boolean; |
25 | isTransform?: boolean; | 31 | isTransform?: boolean; |
@@ -252,7 +258,11 @@ | @@ -252,7 +258,11 @@ | ||
252 | </Authority> | 258 | </Authority> |
253 | </div> | 259 | </div> |
254 | <Space> | 260 | <Space> |
255 | - <Button type="primary" @click="handleChangeMode(PageMode.SPLIT_SCREEN_MODE)"> | 261 | + <Button |
262 | + v-if="props.mode !== PageMode.SPLIT_SCREEN_MODE" | ||
263 | + type="primary" | ||
264 | + @click="handleChangeMode(PageMode.SPLIT_SCREEN_MODE)" | ||
265 | + > | ||
256 | 分屏模式 | 266 | 分屏模式 |
257 | </Button> | 267 | </Button> |
258 | <Button type="primary" @click="handleChangeMode(PageMode.LIST_MODE)"> | 268 | <Button type="primary" @click="handleChangeMode(PageMode.LIST_MODE)"> |
@@ -7,6 +7,9 @@ import SnHelpMessage from './SnHelpMessage.vue'; | @@ -7,6 +7,9 @@ import SnHelpMessage from './SnHelpMessage.vue'; | ||
7 | import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; | 7 | import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; |
8 | import { OrgTreeSelect } from '../../common/OrgTreeSelect'; | 8 | import { OrgTreeSelect } from '../../common/OrgTreeSelect'; |
9 | import { findDictItemByCode } from '/@/api/system/dict'; | 9 | import { findDictItemByCode } from '/@/api/system/dict'; |
10 | +import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue'; | ||
11 | +import { createImgPreview } from '/@/components/Preview'; | ||
12 | +import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter'; | ||
10 | 13 | ||
11 | useComponentRegister('OrgTreeSelect', OrgTreeSelect); | 14 | useComponentRegister('OrgTreeSelect', OrgTreeSelect); |
12 | 15 | ||
@@ -114,8 +117,33 @@ export const formSchema: QFormSchema[] = [ | @@ -114,8 +117,33 @@ export const formSchema: QFormSchema[] = [ | ||
114 | { | 117 | { |
115 | field: 'avatar', | 118 | field: 'avatar', |
116 | label: '视频封面', | 119 | label: '视频封面', |
117 | - slot: 'iconSelect', | ||
118 | - component: 'Input', | 120 | + component: 'ApiUpload', |
121 | + changeEvent: 'update:fileList', | ||
122 | + valueField: 'fileList', | ||
123 | + componentProps: () => { | ||
124 | + return { | ||
125 | + listType: 'picture-card', | ||
126 | + maxFileLimit: 1, | ||
127 | + accept: '.png,.jpg,.jpeg,.gif', | ||
128 | + api: async (file: File) => { | ||
129 | + try { | ||
130 | + const formData = new FormData(); | ||
131 | + formData.set('file', file); | ||
132 | + const { fileStaticUri, fileName } = await uploadThumbnail(formData); | ||
133 | + return { | ||
134 | + uid: fileStaticUri, | ||
135 | + name: fileName, | ||
136 | + url: fileStaticUri, | ||
137 | + } as FileItem; | ||
138 | + } catch (error) { | ||
139 | + return {}; | ||
140 | + } | ||
141 | + }, | ||
142 | + onPreview: (fileList: FileItem) => { | ||
143 | + createImgPreview({ imageList: [fileList.url!] }); | ||
144 | + }, | ||
145 | + }; | ||
146 | + }, | ||
119 | }, | 147 | }, |
120 | { | 148 | { |
121 | field: 'name', | 149 | field: 'name', |
@@ -12,7 +12,11 @@ | @@ -12,7 +12,11 @@ | ||
12 | 12 | ||
13 | <template> | 13 | <template> |
14 | <div> | 14 | <div> |
15 | - <SplitScreenMode v-if="mode == PageMode.SPLIT_SCREEN_MODE" @switchMode="handleSwitchMode" /> | 15 | + <SplitScreenMode |
16 | + :mode="mode" | ||
17 | + v-if="mode == PageMode.SPLIT_SCREEN_MODE" | ||
18 | + @switchMode="handleSwitchMode" | ||
19 | + /> | ||
16 | <ListMode v-if="mode === PageMode.LIST_MODE" @switchMode="handleSwitchMode" /> | 20 | <ListMode v-if="mode === PageMode.LIST_MODE" @switchMode="handleSwitchMode" /> |
17 | </div> | 21 | </div> |
18 | </template> | 22 | </template> |
@@ -56,7 +56,10 @@ | @@ -56,7 +56,10 @@ | ||
56 | return unref(orgList); | 56 | return unref(orgList); |
57 | } | 57 | } |
58 | }, | 58 | }, |
59 | - params: { ...params, _t: unref(timespan) }, | 59 | + params: { |
60 | + ...params, | ||
61 | + _t: unref(timespan), | ||
62 | + }, | ||
60 | onChange: (...args: any[]) => { | 63 | onChange: (...args: any[]) => { |
61 | emit('change', ...args); | 64 | emit('change', ...args); |
62 | }, | 65 | }, |
@@ -93,6 +93,7 @@ export const formSchema: FormSchema[] = [ | @@ -93,6 +93,7 @@ export const formSchema: FormSchema[] = [ | ||
93 | return { | 93 | return { |
94 | listType: 'picture-card', | 94 | listType: 'picture-card', |
95 | maxFileLimit: 1, | 95 | maxFileLimit: 1, |
96 | + accept: '.png,.jpg,.jpeg,.gif', | ||
96 | api: async (file: File) => { | 97 | api: async (file: File) => { |
97 | try { | 98 | try { |
98 | const formData = new FormData(); | 99 | const formData = new FormData(); |
@@ -110,6 +111,10 @@ export const formSchema: FormSchema[] = [ | @@ -110,6 +111,10 @@ export const formSchema: FormSchema[] = [ | ||
110 | onPreview: (fileList: FileItem) => { | 111 | onPreview: (fileList: FileItem) => { |
111 | createImgPreview({ imageList: [fileList.url!] }); | 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,7 +11,7 @@ | ||
11 | import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal'; | 11 | import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal'; |
12 | import { PageWrapper } from '/@/components/Page'; | 12 | import { PageWrapper } from '/@/components/Page'; |
13 | import { BasicForm, useForm } from '/@/components/Form'; | 13 | import { BasicForm, useForm } from '/@/components/Form'; |
14 | - import { ConfigurationPermission, searchFormSchema } from './center.data'; | 14 | + import { ConfigurationPermission, Platform, searchFormSchema } from './center.data'; |
15 | import { useMessage } from '/@/hooks/web/useMessage'; | 15 | import { useMessage } from '/@/hooks/web/useMessage'; |
16 | import { Authority } from '/@/components/Authority'; | 16 | import { Authority } from '/@/components/Authority'; |
17 | import { isDevMode } from '/@/utils/env'; | 17 | import { isDevMode } from '/@/utils/env'; |
@@ -30,6 +30,7 @@ | @@ -30,6 +30,7 @@ | ||
30 | import { ViewType } from '../../visual/board/config/panelDetail'; | 30 | import { ViewType } from '../../visual/board/config/panelDetail'; |
31 | import { useRole } from '/@/hooks/business/useRole'; | 31 | import { useRole } from '/@/hooks/business/useRole'; |
32 | import { useClipboard } from '@vueuse/core'; | 32 | import { useClipboard } from '@vueuse/core'; |
33 | + import { Icon } from '/@/components/Icon'; | ||
33 | 34 | ||
34 | const listColumn = ref(5); | 35 | const listColumn = ref(5); |
35 | 36 | ||
@@ -135,13 +136,19 @@ | @@ -135,13 +136,19 @@ | ||
135 | const handlePreview = (record: ConfigurationCenterItemsModal) => { | 136 | const handlePreview = (record: ConfigurationCenterItemsModal) => { |
136 | if (!unref(getPreviewFlag)) return; | 137 | if (!unref(getPreviewFlag)) return; |
137 | window.open( | 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 | const handleDesign = (record: ConfigurationCenterItemsModal) => { | 145 | const handleDesign = (record: ConfigurationCenterItemsModal) => { |
143 | if (!unref(getDesignFlag)) return; | 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 | const handleDelete = async (record: ConfigurationCenterItemsModal) => { | 154 | const handleDelete = async (record: ConfigurationCenterItemsModal) => { |
@@ -164,6 +171,7 @@ | @@ -164,6 +171,7 @@ | ||
164 | searchParams.set('configurationId', record.id); | 171 | searchParams.set('configurationId', record.id); |
165 | searchParams.set('publicId', record.publicId || ''); | 172 | searchParams.set('publicId', record.publicId || ''); |
166 | searchParams.set('lightbox', '1'); | 173 | searchParams.set('lightbox', '1'); |
174 | + searchParams.set('organizationId', record!.organizationId || ''); | ||
167 | return `${origin}${configurationPrefix}/?${searchParams.toString()}`; | 175 | return `${origin}${configurationPrefix}/?${searchParams.toString()}`; |
168 | }; | 176 | }; |
169 | 177 | ||
@@ -187,7 +195,7 @@ | @@ -187,7 +195,7 @@ | ||
187 | 195 | ||
188 | onMounted(() => { | 196 | onMounted(() => { |
189 | const clientHeight = document.documentElement.clientHeight; | 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 | // margin-top 24 height 24 | 199 | // margin-top 24 height 24 |
192 | const paginationHeight = 24 + 24 + 8; | 200 | const paginationHeight = 24 + 24 + 8; |
193 | // list pading top 8 maring-top 8 extra slot 56 | 201 | // list pading top 8 maring-top 8 extra slot 56 |
@@ -322,7 +330,16 @@ | @@ -322,7 +330,16 @@ | ||
322 | </template> | 330 | </template> |
323 | <template #description> | 331 | <template #description> |
324 | <div class="truncate h-11"> | 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 | <div class="truncate">{{ item.remark || '' }} </div> | 343 | <div class="truncate">{{ item.remark || '' }} </div> |
327 | </div> | 344 | </div> |
328 | </template> | 345 | </template> |
@@ -22,7 +22,7 @@ | @@ -22,7 +22,7 @@ | ||
22 | watch( | 22 | watch( |
23 | () => props.customerList, | 23 | () => props.customerList, |
24 | (newValue) => { | 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 | setOptions({ | 27 | setOptions({ |
28 | tooltip: { | 28 | tooltip: { |
@@ -35,7 +35,7 @@ | @@ -35,7 +35,7 @@ | ||
35 | }, | 35 | }, |
36 | }, | 36 | }, |
37 | xAxis: { | 37 | xAxis: { |
38 | - type: 'time', | 38 | + type: 'category', |
39 | splitLine: { | 39 | splitLine: { |
40 | show: true, | 40 | show: true, |
41 | lineStyle: { | 41 | lineStyle: { |
@@ -90,7 +90,7 @@ | @@ -90,7 +90,7 @@ | ||
90 | trend: props.type, | 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 | setOptions({ | 94 | setOptions({ |
95 | tooltip: { | 95 | tooltip: { |
96 | trigger: 'axis', | 96 | trigger: 'axis', |
@@ -2,9 +2,10 @@ | @@ -2,9 +2,10 @@ | ||
2 | <div ref="chartRef" :style="{ height, width }"></div> | 2 | <div ref="chartRef" :style="{ height, width }"></div> |
3 | </template> | 3 | </template> |
4 | <script lang="ts" setup> | 4 | <script lang="ts" setup> |
5 | - import { ref, Ref, withDefaults, onMounted, watch } from 'vue'; | 5 | + import { ref, Ref, onMounted, watch } from 'vue'; |
6 | import { useECharts } from '/@/hooks/web/useECharts'; | 6 | import { useECharts } from '/@/hooks/web/useECharts'; |
7 | import { getTrendData } from '/@/api/dashboard'; | 7 | import { getTrendData } from '/@/api/dashboard'; |
8 | + import { getDateByShortcutQueryKey, ShortcutQueryKeyEnum } from '../hooks/useDate'; | ||
8 | 9 | ||
9 | interface Props { | 10 | interface Props { |
10 | width?: string; | 11 | width?: string; |
@@ -30,7 +31,7 @@ | @@ -30,7 +31,7 @@ | ||
30 | }, | 31 | }, |
31 | }, | 32 | }, |
32 | xAxis: { | 33 | xAxis: { |
33 | - type: 'time', | 34 | + type: 'category', |
34 | splitLine: { | 35 | splitLine: { |
35 | show: true, | 36 | show: true, |
36 | lineStyle: { | 37 | lineStyle: { |
@@ -77,15 +78,12 @@ | @@ -77,15 +78,12 @@ | ||
77 | const chartRef = ref<HTMLDivElement | null>(null); | 78 | const chartRef = ref<HTMLDivElement | null>(null); |
78 | const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); | 79 | const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
79 | onMounted(async () => { | 80 | onMounted(async () => { |
80 | - const endTs = Date.now(); | ||
81 | const res = await getTrendData({ | 81 | const res = await getTrendData({ |
82 | - startTs: endTs - 2592000000, | ||
83 | - endTs, | ||
84 | - interval: 86400000, | 82 | + ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_1_MONTH), |
85 | trend: 'CUSTOMER_TREND', | 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 | setOptions({ | 87 | setOptions({ |
90 | tooltip: { | 88 | tooltip: { |
91 | trigger: 'axis', | 89 | trigger: 'axis', |
@@ -97,7 +95,7 @@ | @@ -97,7 +95,7 @@ | ||
97 | }, | 95 | }, |
98 | }, | 96 | }, |
99 | xAxis: { | 97 | xAxis: { |
100 | - type: 'time', | 98 | + type: 'category', |
101 | splitLine: { | 99 | splitLine: { |
102 | show: true, | 100 | show: true, |
103 | lineStyle: { | 101 | lineStyle: { |
@@ -19,7 +19,8 @@ | @@ -19,7 +19,8 @@ | ||
19 | <div>1小时: 查询最近1小时的数据,间隔时间为5分钟.</div> | 19 | <div>1小时: 查询最近1小时的数据,间隔时间为5分钟.</div> |
20 | <div> | 20 | <div> |
21 | 间隔时间: | 21 | 间隔时间: |
22 | - 以当前时间作为结束时间,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询. | 22 | + <span class="font-bold underline">以当前时间作为结束时间</span> |
23 | + ,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询. | ||
23 | </div> | 24 | </div> |
24 | </template> | 25 | </template> |
25 | <QuestionCircleOutlined class="!mr-1" /> | 26 | <QuestionCircleOutlined class="!mr-1" /> |
@@ -36,7 +37,15 @@ | @@ -36,7 +37,15 @@ | ||
36 | <DatePicker | 37 | <DatePicker |
37 | @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)" | 38 | @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)" |
38 | v-model:value="dateValue" | 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 | </div> | 49 | </div> |
41 | </template> | 50 | </template> |
42 | <div v-if="activeKey === '1'"> | 51 | <div v-if="activeKey === '1'"> |
@@ -95,6 +104,21 @@ | @@ -95,6 +104,21 @@ | ||
95 | > | 104 | > |
96 | <template #extra> | 105 | <template #extra> |
97 | <div class="extra-date"> | 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 | <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value"> | 122 | <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value"> |
99 | <span | 123 | <span |
100 | @click="quickQueryTenantOrCustomerTime(index, item.value)" | 124 | @click="quickQueryTenantOrCustomerTime(index, item.value)" |
@@ -104,9 +128,31 @@ | @@ -104,9 +128,31 @@ | ||
104 | </template> | 128 | </template> |
105 | <DatePicker.RangePicker | 129 | <DatePicker.RangePicker |
106 | @change="onDateCustomerChange" | 130 | @change="onDateCustomerChange" |
131 | + :disabledDate="handleDisableDate" | ||
132 | + @calendarChange="handleCalendarChange" | ||
107 | size="small" | 133 | size="small" |
108 | v-model:value="customerDateValue" | 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 | </div> | 156 | </div> |
111 | </template> | 157 | </template> |
112 | <CustomerTrend :customerTrendList="customerTrendList" /> | 158 | <CustomerTrend :customerTrendList="customerTrendList" /> |
@@ -114,15 +160,15 @@ | @@ -114,15 +160,15 @@ | ||
114 | </div> | 160 | </div> |
115 | </template> | 161 | </template> |
116 | <script lang="ts" setup> | 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 | import VisitAnalysis from './VisitAnalysis.vue'; | 165 | import VisitAnalysis from './VisitAnalysis.vue'; |
120 | import VisitAnalysisBar from './VisitAnalysisBar.vue'; | 166 | import VisitAnalysisBar from './VisitAnalysisBar.vue'; |
121 | import { RoleEnum, isAdmin } from '/@/enums/roleEnum'; | 167 | import { RoleEnum, isAdmin } from '/@/enums/roleEnum'; |
122 | import { useWebSocket } from '@vueuse/core'; | 168 | import { useWebSocket } from '@vueuse/core'; |
123 | import { getAuthCache } from '/@/utils/auth'; | 169 | import { getAuthCache } from '/@/utils/auth'; |
124 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; | 170 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; |
125 | - import { formatToDateTime } from '/@/utils/dateUtil'; | 171 | + import { dateUtil, formatToDateTime } from '/@/utils/dateUtil'; |
126 | import CustomerTrend from './CustomerTrend.vue'; | 172 | import CustomerTrend from './CustomerTrend.vue'; |
127 | // import TenantTrend from './TenantTrend.vue'; | 173 | // import TenantTrend from './TenantTrend.vue'; |
128 | import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; | 174 | import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; |
@@ -130,6 +176,7 @@ | @@ -130,6 +176,7 @@ | ||
130 | import { getTrendData } from '/@/api/dashboard'; | 176 | import { getTrendData } from '/@/api/dashboard'; |
131 | import { useGlobSetting } from '/@/hooks/setting'; | 177 | import { useGlobSetting } from '/@/hooks/setting'; |
132 | import { QuestionCircleOutlined } from '@ant-design/icons-vue'; | 178 | import { QuestionCircleOutlined } from '@ant-design/icons-vue'; |
179 | + import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface'; | ||
133 | 180 | ||
134 | defineExpose({ | 181 | defineExpose({ |
135 | isAdmin, | 182 | isAdmin, |
@@ -480,6 +527,19 @@ | @@ -480,6 +527,19 @@ | ||
480 | // onDateTenantChange, | 527 | // onDateTenantChange, |
481 | onDateCustomerChange, | 528 | onDateCustomerChange, |
482 | } = useDate(); | 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 | </script> | 543 | </script> |
484 | 544 | ||
485 | <style lang="less"> | 545 | <style lang="less"> |
@@ -29,7 +29,8 @@ | @@ -29,7 +29,8 @@ | ||
29 | <div>1小时: 查询最近1小时的数据,间隔时间为5分钟.</div> | 29 | <div>1小时: 查询最近1小时的数据,间隔时间为5分钟.</div> |
30 | <div> | 30 | <div> |
31 | 间隔时间: | 31 | 间隔时间: |
32 | - 以当前时间作为结束时间,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询. | 32 | + <span class="font-bold underline">以当前时间作为结束时间</span> |
33 | + ,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询. | ||
33 | </div> | 34 | </div> |
34 | </template> | 35 | </template> |
35 | <QuestionCircleOutlined class="!mr-1" /> | 36 | <QuestionCircleOutlined class="!mr-1" /> |
@@ -46,7 +47,15 @@ | @@ -46,7 +47,15 @@ | ||
46 | <DatePicker | 47 | <DatePicker |
47 | @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)" | 48 | @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)" |
48 | v-model:value="dateValue" | 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 | </div> | 59 | </div> |
51 | </template> | 60 | </template> |
52 | <!-- <div v-if="activeKey === '1'"> | 61 | <!-- <div v-if="activeKey === '1'"> |
@@ -80,6 +89,21 @@ | @@ -80,6 +89,21 @@ | ||
80 | > | 89 | > |
81 | <template #extra> | 90 | <template #extra> |
82 | <div class="extra-date"> | 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 | <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value"> | 107 | <template v-for="(item, index) in TenantOrCustomerDateList" :key="item.value"> |
84 | <span | 108 | <span |
85 | @click="quickQueryTenantOrCustomerTime(index, item.value, 'tenant')" | 109 | @click="quickQueryTenantOrCustomerTime(index, item.value, 'tenant')" |
@@ -90,8 +114,30 @@ | @@ -90,8 +114,30 @@ | ||
90 | <DatePicker.RangePicker | 114 | <DatePicker.RangePicker |
91 | @change="onDateTenantChange" | 115 | @change="onDateTenantChange" |
92 | size="small" | 116 | size="small" |
117 | + @calendarChange="handleCalendarChange" | ||
118 | + :disabledDate="handleDisableDate" | ||
93 | v-model:value="tenantDateValue" | 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 | </div> | 141 | </div> |
96 | </template> | 142 | </template> |
97 | <TenantTrend :tenantTrendList="tenantTrendList" /> | 143 | <TenantTrend :tenantTrendList="tenantTrendList" /> |
@@ -123,8 +169,8 @@ | @@ -123,8 +169,8 @@ | ||
123 | </div> | 169 | </div> |
124 | </template> | 170 | </template> |
125 | <script lang="ts" setup> | 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 | import { QuestionCircleOutlined } from '@ant-design/icons-vue'; | 174 | import { QuestionCircleOutlined } from '@ant-design/icons-vue'; |
129 | // import VisitAnalysis from './VisitAnalysis.vue'; | 175 | // import VisitAnalysis from './VisitAnalysis.vue'; |
130 | import VisitAnalysisBar from './VisitAnalysisBar.vue'; | 176 | import VisitAnalysisBar from './VisitAnalysisBar.vue'; |
@@ -132,13 +178,14 @@ | @@ -132,13 +178,14 @@ | ||
132 | import { useWebSocket } from '@vueuse/core'; | 178 | import { useWebSocket } from '@vueuse/core'; |
133 | import { getAuthCache } from '/@/utils/auth'; | 179 | import { getAuthCache } from '/@/utils/auth'; |
134 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; | 180 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; |
135 | - import { formatToDateTime } from '/@/utils/dateUtil'; | 181 | + import { dateUtil, formatToDateTime } from '/@/utils/dateUtil'; |
136 | // import CustomerTrend from './CustomerTrend.vue'; | 182 | // import CustomerTrend from './CustomerTrend.vue'; |
137 | import TenantTrend from './TenantTrend.vue'; | 183 | import TenantTrend from './TenantTrend.vue'; |
138 | import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; | 184 | import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; |
139 | import { useDate } from '../hooks/useDate'; | 185 | import { useDate } from '../hooks/useDate'; |
140 | import { getTrendData } from '/@/api/dashboard'; | 186 | import { getTrendData } from '/@/api/dashboard'; |
141 | import { useGlobSetting } from '/@/hooks/setting'; | 187 | import { useGlobSetting } from '/@/hooks/setting'; |
188 | + import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface'; | ||
142 | 189 | ||
143 | defineExpose({ | 190 | defineExpose({ |
144 | isAdmin, | 191 | isAdmin, |
@@ -445,7 +492,7 @@ | @@ -445,7 +492,7 @@ | ||
445 | if (activeIndex.value === index) return; | 492 | if (activeIndex.value === index) return; |
446 | activeIndex.value = index; | 493 | activeIndex.value = index; |
447 | dateValue.value = ''; | 494 | dateValue.value = ''; |
448 | - console.log(interval); | 495 | + |
449 | if (isCustomer) { | 496 | if (isCustomer) { |
450 | if (activeKey.value === '1') { | 497 | if (activeKey.value === '1') { |
451 | const data = await getTrendData({ | 498 | const data = await getTrendData({ |
@@ -498,6 +545,19 @@ | @@ -498,6 +545,19 @@ | ||
498 | onDateTenantChange, | 545 | onDateTenantChange, |
499 | // onDateCustomerChange, | 546 | // onDateCustomerChange, |
500 | } = useDate(); | 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 | </script> | 561 | </script> |
502 | 562 | ||
503 | <style lang="less"> | 563 | <style lang="less"> |
@@ -2,9 +2,10 @@ | @@ -2,9 +2,10 @@ | ||
2 | <div ref="chartRef" :style="{ height, width }"></div> | 2 | <div ref="chartRef" :style="{ height, width }"></div> |
3 | </template> | 3 | </template> |
4 | <script lang="ts" setup> | 4 | <script lang="ts" setup> |
5 | - import { ref, Ref, withDefaults, onMounted, watch } from 'vue'; | 5 | + import { ref, Ref, onMounted, watch } from 'vue'; |
6 | import { useECharts } from '/@/hooks/web/useECharts'; | 6 | import { useECharts } from '/@/hooks/web/useECharts'; |
7 | import { getTrendData } from '/@/api/dashboard/index'; | 7 | import { getTrendData } from '/@/api/dashboard/index'; |
8 | + import { getDateByShortcutQueryKey, ShortcutQueryKeyEnum } from '../hooks/useDate'; | ||
8 | interface Props { | 9 | interface Props { |
9 | width?: string; | 10 | width?: string; |
10 | height?: string; | 11 | height?: string; |
@@ -30,7 +31,7 @@ | @@ -30,7 +31,7 @@ | ||
30 | }, | 31 | }, |
31 | }, | 32 | }, |
32 | xAxis: { | 33 | xAxis: { |
33 | - type: 'time', | 34 | + type: 'category', |
34 | splitLine: { | 35 | splitLine: { |
35 | show: true, | 36 | show: true, |
36 | lineStyle: { | 37 | lineStyle: { |
@@ -77,14 +78,11 @@ | @@ -77,14 +78,11 @@ | ||
77 | const chartRef = ref<HTMLDivElement | null>(null); | 78 | const chartRef = ref<HTMLDivElement | null>(null); |
78 | const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); | 79 | const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
79 | onMounted(async () => { | 80 | onMounted(async () => { |
80 | - const endTs = Date.now(); | ||
81 | const res = await getTrendData({ | 81 | const res = await getTrendData({ |
82 | - startTs: endTs - 2592000000, | ||
83 | - endTs, | ||
84 | - interval: 86400000, | 82 | + ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_1_MONTH), |
85 | trend: 'TENANT_TREND', | 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 | setOptions({ | 86 | setOptions({ |
89 | tooltip: { | 87 | tooltip: { |
90 | trigger: 'axis', | 88 | trigger: 'axis', |
@@ -96,7 +94,7 @@ | @@ -96,7 +94,7 @@ | ||
96 | }, | 94 | }, |
97 | }, | 95 | }, |
98 | xAxis: { | 96 | xAxis: { |
99 | - type: 'time', | 97 | + type: 'category', |
100 | splitLine: { | 98 | splitLine: { |
101 | show: true, | 99 | show: true, |
102 | lineStyle: { | 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 | import { getTrendData } from '/@/api/dashboard'; | 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 | export function useDate() { | 43 | export function useDate() { |
6 | const tenantDateValue = ref([]); | 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 | const activeTenantIndex = ref(0); | 48 | const activeTenantIndex = ref(0); |
11 | const activeCustomerIndex = ref(0); | 49 | const activeCustomerIndex = ref(0); |
12 | const TenantOrCustomerDateList = ref([ | 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 | async function quickQueryTenantOrCustomerTime( | 57 | async function quickQueryTenantOrCustomerTime( |
20 | index: number, | 58 | index: number, |
21 | - value: number, | 59 | + value: ShortcutQueryKeyEnum, |
22 | flag: 'tenant' | 'customer' | 60 | flag: 'tenant' | 'customer' |
23 | ) { | 61 | ) { |
24 | - const endTs = Date.now(); | ||
25 | if (flag === 'tenant') { | 62 | if (flag === 'tenant') { |
26 | if (activeTenantIndex.value === index) return; | 63 | if (activeTenantIndex.value === index) return; |
27 | activeTenantIndex.value = index; | 64 | activeTenantIndex.value = index; |
28 | tenantDateValue.value = []; | 65 | tenantDateValue.value = []; |
29 | const res = await getTrendData({ | 66 | const res = await getTrendData({ |
30 | - startTs: endTs - value, | ||
31 | - endTs, | ||
32 | - interval: value === 2592000000 ? 86400000 : value === 7776000000 ? 172800000 : 2592000000, | 67 | + ...getDateByShortcutQueryKey(value), |
33 | trend: 'TENANT_TREND', | 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 | } else { | 71 | } else { |
37 | if (activeCustomerIndex.value === index) return; | 72 | if (activeCustomerIndex.value === index) return; |
38 | activeCustomerIndex.value = index; | 73 | activeCustomerIndex.value = index; |
39 | customerDateValue.value = []; | 74 | customerDateValue.value = []; |
40 | const res = await getTrendData({ | 75 | const res = await getTrendData({ |
41 | - startTs: endTs - value, | ||
42 | - endTs, | ||
43 | - interval: value === 2592000000 ? 86400000 : value === 7776000000 ? 172800000 : 2592000000, | 76 | + ...getDateByShortcutQueryKey(value), |
44 | trend: 'CUSTOMER_TREND', | 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 | const res = await getTrendData({ | 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 | trend, | 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 | activeTenantIndex.value = -1; | 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 | activeCustomerIndex.value = -1; | 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 | return { | 118 | return { |
99 | tenantDateValue, | 119 | tenantDateValue, |
@@ -22,6 +22,16 @@ export enum ConfigurationPermission { | @@ -22,6 +22,16 @@ export enum ConfigurationPermission { | ||
22 | PREVIEW = 'api:yt:dataview:center:get_configuration_info:preview', | 22 | PREVIEW = 'api:yt:dataview:center:get_configuration_info:preview', |
23 | PUBLISH = 'api:yt:dataview:center:publish', | 23 | PUBLISH = 'api:yt:dataview:center:publish', |
24 | // CANCEL_PUBLISH = 'api:yt:dataview:center:cancel_publish', | 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', | ||
25 | } | 35 | } |
26 | 36 | ||
27 | // 查询字段 | 37 | // 查询字段 |
@@ -49,6 +59,7 @@ export const formSchema: FormSchema[] = [ | @@ -49,6 +59,7 @@ export const formSchema: FormSchema[] = [ | ||
49 | return { | 59 | return { |
50 | listType: 'picture-card', | 60 | listType: 'picture-card', |
51 | maxFileLimit: 1, | 61 | maxFileLimit: 1, |
62 | + accept: '.png,.jpg,.jpeg,.gif', | ||
52 | api: async (file: File) => { | 63 | api: async (file: File) => { |
53 | try { | 64 | try { |
54 | const formData = new FormData(); | 65 | const formData = new FormData(); |
@@ -63,6 +74,10 @@ export const formSchema: FormSchema[] = [ | @@ -63,6 +74,10 @@ export const formSchema: FormSchema[] = [ | ||
63 | return {}; | 74 | return {}; |
64 | } | 75 | } |
65 | }, | 76 | }, |
77 | + // showUploadList: true, | ||
78 | + onDownload(file) { | ||
79 | + console.log(file); | ||
80 | + }, | ||
66 | onPreview: (fileList: FileItem) => { | 81 | onPreview: (fileList: FileItem) => { |
67 | createImgPreview({ imageList: [fileList.url!] }); | 82 | createImgPreview({ imageList: [fileList.url!] }); |
68 | }, | 83 | }, |
@@ -77,7 +92,7 @@ export const formSchema: FormSchema[] = [ | @@ -77,7 +92,7 @@ export const formSchema: FormSchema[] = [ | ||
77 | component: 'Input', | 92 | component: 'Input', |
78 | componentProps: { | 93 | componentProps: { |
79 | placeholder: '请输入大屏名称', | 94 | placeholder: '请输入大屏名称', |
80 | - maxLength: 255, | 95 | + maxLength: 32, |
81 | }, | 96 | }, |
82 | }, | 97 | }, |
83 | { | 98 | { |
@@ -124,12 +124,16 @@ | @@ -124,12 +124,16 @@ | ||
124 | const { largeDesignerPrefix } = useGlobSetting(); | 124 | const { largeDesignerPrefix } = useGlobSetting(); |
125 | 125 | ||
126 | const handlePreview = (record: BigScreenCenterItemsModel) => { | 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 | const handleDesign = (record: BigScreenCenterItemsModel) => { | 132 | const handleDesign = (record: BigScreenCenterItemsModel) => { |
131 | if (record.state === 1) return; | 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 | const handleDelete = async (record: BigScreenCenterItemsModel) => { | 139 | const handleDelete = async (record: BigScreenCenterItemsModel) => { |
@@ -218,7 +222,10 @@ | @@ -218,7 +222,10 @@ | ||
218 | <Authority v-if="!isCustomerUser" :value="ConfigurationPermission.CREATE"> | 222 | <Authority v-if="!isCustomerUser" :value="ConfigurationPermission.CREATE"> |
219 | <Button type="primary" @click="handleCreateOrUpdate()"> 新增大屏 </Button> | 223 | <Button type="primary" @click="handleCreateOrUpdate()"> 新增大屏 </Button> |
220 | </Authority> | 224 | </Authority> |
221 | - <Authority v-if="hasPublicInterfacePermission" :value="ConfigurationPermission.CREATE"> | 225 | + <Authority |
226 | + v-if="hasPublicInterfacePermission" | ||
227 | + :value="ConfigurationPermission.PUBLISH_INTERFACE" | ||
228 | + > | ||
222 | <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button> | 229 | <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button> |
223 | </Authority> | 230 | </Authority> |
224 | <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" /> | 231 | <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" /> |
@@ -9,23 +9,30 @@ | @@ -9,23 +9,30 @@ | ||
9 | <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button> | 9 | <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button> |
10 | </template> | 10 | </template> |
11 | <template #toolbar> | 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 | <!-- <Popconfirm | 36 | <!-- <Popconfirm |
30 | title="您确定要批量取消发布" | 37 | title="您确定要批量取消发布" |
31 | ok-text="确定" | 38 | ok-text="确定" |
@@ -41,6 +48,7 @@ | @@ -41,6 +48,7 @@ | ||
41 | { | 48 | { |
42 | label: '发布', | 49 | label: '发布', |
43 | icon: 'ant-design:node-expand-outlined', | 50 | icon: 'ant-design:node-expand-outlined', |
51 | + auth: PublicInterface.PUBLISH, | ||
44 | onClick: handlePublish.bind(null, 'publish', record), | 52 | onClick: handlePublish.bind(null, 'publish', record), |
45 | ifShow: () => { | 53 | ifShow: () => { |
46 | return record.state === 0 && record.creator === userId; | 54 | return record.state === 0 && record.creator === userId; |
@@ -49,6 +57,7 @@ | @@ -49,6 +57,7 @@ | ||
49 | { | 57 | { |
50 | label: '取消发布', | 58 | label: '取消发布', |
51 | icon: 'ant-design:node-collapse-outlined', | 59 | icon: 'ant-design:node-collapse-outlined', |
60 | + auth: PublicInterface.CANCEL_PUBLISH, | ||
52 | onClick: handlePublish.bind(null, 'canelPublish', record), | 61 | onClick: handlePublish.bind(null, 'canelPublish', record), |
53 | ifShow: () => { | 62 | ifShow: () => { |
54 | return record.state === 1 && record.creator === userId; | 63 | return record.state === 1 && record.creator === userId; |
@@ -57,6 +66,7 @@ | @@ -57,6 +66,7 @@ | ||
57 | { | 66 | { |
58 | label: '修改', | 67 | label: '修改', |
59 | icon: 'clarity:note-edit-line', | 68 | icon: 'clarity:note-edit-line', |
69 | + auth: PublicInterface.UPDATE, | ||
60 | onClick: handleCreateOrEdit.bind(null, record), | 70 | onClick: handleCreateOrEdit.bind(null, record), |
61 | ifShow: () => { | 71 | ifShow: () => { |
62 | return record.state === 0 && record.creator === userId; | 72 | return record.state === 0 && record.creator === userId; |
@@ -65,6 +75,7 @@ | @@ -65,6 +75,7 @@ | ||
65 | { | 75 | { |
66 | label: '删除', | 76 | label: '删除', |
67 | icon: 'ant-design:delete-outlined', | 77 | icon: 'ant-design:delete-outlined', |
78 | + auth: PublicInterface.DELETE, | ||
68 | color: 'error', | 79 | color: 'error', |
69 | ifShow: () => { | 80 | ifShow: () => { |
70 | return record.state === 0 && record.creator === userId; | 81 | return record.state === 0 && record.creator === userId; |
@@ -99,6 +110,8 @@ | @@ -99,6 +110,8 @@ | ||
99 | import { useMessage } from '/@/hooks/web/useMessage'; | 110 | import { useMessage } from '/@/hooks/web/useMessage'; |
100 | import { USER_INFO_KEY } from '/@/enums/cacheEnum'; | 111 | import { USER_INFO_KEY } from '/@/enums/cacheEnum'; |
101 | import { getAuthCache } from '/@/utils/auth'; | 112 | import { getAuthCache } from '/@/utils/auth'; |
113 | + import { PublicInterface } from '../config'; | ||
114 | + import { Authority } from '/@/components/Authority'; | ||
102 | 115 | ||
103 | const userInfo = getAuthCache(USER_INFO_KEY) as any; | 116 | const userInfo = getAuthCache(USER_INFO_KEY) as any; |
104 | 117 | ||
@@ -119,7 +132,7 @@ | @@ -119,7 +132,7 @@ | ||
119 | }, | 132 | }, |
120 | useSearchForm: true, | 133 | useSearchForm: true, |
121 | actionColumn: { | 134 | actionColumn: { |
122 | - width: 150, | 135 | + width: 180, |
123 | title: '操作', | 136 | title: '操作', |
124 | dataIndex: 'action', | 137 | dataIndex: 'action', |
125 | slots: { customRender: 'action' }, | 138 | slots: { customRender: 'action' }, |
@@ -7,11 +7,14 @@ import { JSONEditor } from '/@/components/CodeEditor'; | @@ -7,11 +7,14 @@ import { JSONEditor } from '/@/components/CodeEditor'; | ||
7 | import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; | 7 | import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; |
8 | import { getModelServices } from '/@/api/device/modelOfMatter'; | 8 | import { getModelServices } from '/@/api/device/modelOfMatter'; |
9 | import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel'; | 9 | import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel'; |
10 | -import { toRaw, unref } from 'vue'; | 10 | +import { nextTick, toRaw, unref } from 'vue'; |
11 | import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/components/ObjectModelValidateForm/ObjectModelValidateForm.vue'; | 11 | import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/components/ObjectModelValidateForm/ObjectModelValidateForm.vue'; |
12 | import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum'; | 12 | import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum'; |
13 | import { TaskTypeEnum } from '/@/views/task/center/config'; | 13 | import { TaskTypeEnum } from '/@/views/task/center/config'; |
14 | import { AddressTypeEnum } from '/@/views/task/center/components/PollCommandInput'; | 14 | import { AddressTypeEnum } from '/@/views/task/center/components/PollCommandInput'; |
15 | +import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue'; | ||
16 | +import { createImgPreview } from '/@/components/Preview'; | ||
17 | +import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter'; | ||
15 | 18 | ||
16 | useComponentRegister('JSONEditor', JSONEditor); | 19 | useComponentRegister('JSONEditor', JSONEditor); |
17 | useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm); | 20 | useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm); |
@@ -29,15 +32,40 @@ export const step1Schemas: FormSchema[] = [ | @@ -29,15 +32,40 @@ export const step1Schemas: FormSchema[] = [ | ||
29 | { | 32 | { |
30 | field: 'icon', | 33 | field: 'icon', |
31 | label: '设备图片', | 34 | label: '设备图片', |
32 | - slot: 'iconSelect', | ||
33 | - component: 'Input', | 35 | + component: 'ApiUpload', |
36 | + changeEvent: 'update:fileList', | ||
37 | + valueField: 'fileList', | ||
38 | + componentProps: () => { | ||
39 | + return { | ||
40 | + listType: 'picture-card', | ||
41 | + maxFileLimit: 1, | ||
42 | + accept: '.png,.jpg,.jpeg,.gif', | ||
43 | + api: async (file: File) => { | ||
44 | + try { | ||
45 | + const formData = new FormData(); | ||
46 | + formData.set('file', file); | ||
47 | + const { fileStaticUri, fileName } = await uploadThumbnail(formData); | ||
48 | + return { | ||
49 | + uid: fileStaticUri, | ||
50 | + name: fileName, | ||
51 | + url: fileStaticUri, | ||
52 | + } as FileItem; | ||
53 | + } catch (error) { | ||
54 | + return {}; | ||
55 | + } | ||
56 | + }, | ||
57 | + onPreview: (fileList: FileItem) => { | ||
58 | + createImgPreview({ imageList: [fileList.url!] }); | ||
59 | + }, | ||
60 | + }; | ||
61 | + }, | ||
34 | }, | 62 | }, |
35 | { | 63 | { |
36 | field: 'alias', | 64 | field: 'alias', |
37 | label: '别名 ', | 65 | label: '别名 ', |
38 | component: 'Input', | 66 | component: 'Input', |
39 | componentProps: { | 67 | componentProps: { |
40 | - maxLength: 255, | 68 | + maxLength: 32, |
41 | placeholder: '请输入别名', | 69 | placeholder: '请输入别名', |
42 | }, | 70 | }, |
43 | }, | 71 | }, |
@@ -45,6 +73,10 @@ export const step1Schemas: FormSchema[] = [ | @@ -45,6 +73,10 @@ export const step1Schemas: FormSchema[] = [ | ||
45 | field: 'name', | 73 | field: 'name', |
46 | label: '设备名称', | 74 | label: '设备名称', |
47 | component: 'Input', | 75 | component: 'Input', |
76 | + componentProps: { | ||
77 | + maxLength: 32, | ||
78 | + placeholder: '请输入别名', | ||
79 | + }, | ||
48 | rules: [{ required: true, message: '设备名称为必填项' }], | 80 | rules: [{ required: true, message: '设备名称为必填项' }], |
49 | slot: 'snCode', | 81 | slot: 'snCode', |
50 | }, | 82 | }, |
@@ -121,7 +153,7 @@ export const step1Schemas: FormSchema[] = [ | @@ -121,7 +153,7 @@ export const step1Schemas: FormSchema[] = [ | ||
121 | { | 153 | { |
122 | field: 'codeType', | 154 | field: 'codeType', |
123 | label: '标识符类型', | 155 | label: '标识符类型', |
124 | - component: 'Select', | 156 | + component: 'RadioGroup', |
125 | dynamicRules({ values }) { | 157 | dynamicRules({ values }) { |
126 | return [ | 158 | return [ |
127 | { | 159 | { |
@@ -206,10 +238,7 @@ export const step1Schemas: FormSchema[] = [ | @@ -206,10 +238,7 @@ export const step1Schemas: FormSchema[] = [ | ||
206 | }, | 238 | }, |
207 | ifShow: ({ values }) => { | 239 | ifShow: ({ values }) => { |
208 | return ( | 240 | return ( |
209 | - values?.transportType === TransportTypeEnum.TCP && | ||
210 | - (values.deviceType === DeviceTypeEnum.SENSOR || | ||
211 | - values.deviceType === DeviceTypeEnum.GATEWAY) && | ||
212 | - values?.codeType === TaskTypeEnum.CUSTOM | 241 | + values?.transportType === TransportTypeEnum.TCP && values?.codeType === TaskTypeEnum.CUSTOM |
213 | ); | 242 | ); |
214 | }, | 243 | }, |
215 | }, | 244 | }, |
@@ -246,8 +275,9 @@ export const step1Schemas: FormSchema[] = [ | @@ -246,8 +275,9 @@ export const step1Schemas: FormSchema[] = [ | ||
246 | required: true, | 275 | required: true, |
247 | component: 'ApiSelect', | 276 | component: 'ApiSelect', |
248 | ifShow: ({ values }) => values.deviceType === 'SENSOR' && values.organizationId, | 277 | ifShow: ({ values }) => values.deviceType === 'SENSOR' && values.organizationId, |
249 | - componentProps: ({ formModel }) => { | 278 | + componentProps: ({ formModel, formActionType }) => { |
250 | const { organizationId, transportType } = formModel; | 279 | const { organizationId, transportType } = formModel; |
280 | + const { validateFields } = formActionType; | ||
251 | if (![organizationId, transportType].every(Boolean)) return {}; | 281 | if (![organizationId, transportType].every(Boolean)) return {}; |
252 | return { | 282 | return { |
253 | api: async (params: Recordable) => { | 283 | api: async (params: Recordable) => { |
@@ -266,6 +296,10 @@ export const step1Schemas: FormSchema[] = [ | @@ -266,6 +296,10 @@ export const step1Schemas: FormSchema[] = [ | ||
266 | }, | 296 | }, |
267 | valueField: 'tbDeviceId', | 297 | valueField: 'tbDeviceId', |
268 | labelField: 'alias', | 298 | labelField: 'alias', |
299 | + onChange: async () => { | ||
300 | + await nextTick(); | ||
301 | + validateFields(['gatewayId']); | ||
302 | + }, | ||
269 | }; | 303 | }; |
270 | }, | 304 | }, |
271 | }, | 305 | }, |
@@ -5,8 +5,8 @@ import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; | @@ -5,8 +5,8 @@ import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; | ||
5 | import { getCustomerList } from '/@/api/device/deviceManager'; | 5 | import { getCustomerList } from '/@/api/device/deviceManager'; |
6 | import { DescItem } from '/@/components/Description/index'; | 6 | import { DescItem } from '/@/components/Description/index'; |
7 | import moment from 'moment'; | 7 | import moment from 'moment'; |
8 | -import { h } from 'vue'; | ||
9 | -import { Button } from 'ant-design-vue'; | 8 | +import { CSSProperties, h } from 'vue'; |
9 | +import { Button, Tooltip } from 'ant-design-vue'; | ||
10 | import { TypeEnum } from './data'; | 10 | import { TypeEnum } from './data'; |
11 | import { PageEnum } from '/@/enums/pageEnum'; | 11 | import { PageEnum } from '/@/enums/pageEnum'; |
12 | import { useGo } from '/@/hooks/web/usePage'; | 12 | import { useGo } from '/@/hooks/web/usePage'; |
@@ -24,12 +24,19 @@ export const descSchema = (emit: EmitType): DescItem[] => { | @@ -24,12 +24,19 @@ export const descSchema = (emit: EmitType): DescItem[] => { | ||
24 | field: 'name', | 24 | field: 'name', |
25 | label: '设备名称', | 25 | label: '设备名称', |
26 | render(val, data: Record<'alias' | 'name', string>) { | 26 | render(val, data: Record<'alias' | 'name', string>) { |
27 | - return h('span', {}, data.alias || val); | 27 | + return h(Tooltip, { title: data.alias || val }, () => |
28 | + h('span', { style: { cursor: 'pointer' } as CSSProperties }, data.alias || val) | ||
29 | + ); | ||
28 | }, | 30 | }, |
29 | }, | 31 | }, |
30 | { | 32 | { |
31 | field: 'label', | 33 | field: 'label', |
32 | label: '设备标签', | 34 | label: '设备标签', |
35 | + render(val) { | ||
36 | + return h(Tooltip, { title: val }, () => | ||
37 | + h('span', { style: { cursor: 'pointer' } as CSSProperties }, val) | ||
38 | + ); | ||
39 | + }, | ||
33 | }, | 40 | }, |
34 | { | 41 | { |
35 | field: 'deviceProfile.name', | 42 | field: 'deviceProfile.name', |
@@ -79,6 +86,11 @@ export const descSchema = (emit: EmitType): DescItem[] => { | @@ -79,6 +86,11 @@ export const descSchema = (emit: EmitType): DescItem[] => { | ||
79 | field: 'description', | 86 | field: 'description', |
80 | label: '描述', | 87 | label: '描述', |
81 | // span: 2, | 88 | // span: 2, |
89 | + render(val) { | ||
90 | + return h(Tooltip, { title: val }, () => | ||
91 | + h('span', { style: { cursor: 'pointer' } as CSSProperties }, val) | ||
92 | + ); | ||
93 | + }, | ||
82 | }, | 94 | }, |
83 | ]; | 95 | ]; |
84 | }; | 96 | }; |
@@ -175,6 +187,10 @@ export const alarmColumns: BasicColumn[] = [ | @@ -175,6 +187,10 @@ export const alarmColumns: BasicColumn[] = [ | ||
175 | title: '告警设备', | 187 | title: '告警设备', |
176 | dataIndex: 'deviceName', | 188 | dataIndex: 'deviceName', |
177 | width: 120, | 189 | width: 120, |
190 | + customRender: ({ record }) => { | ||
191 | + const { deviceAlias, deviceName } = record || {}; | ||
192 | + return deviceAlias || deviceName; | ||
193 | + }, | ||
178 | }, | 194 | }, |
179 | { | 195 | { |
180 | title: '告警场景', | 196 | title: '告警场景', |
@@ -333,7 +349,7 @@ export const childDeviceColumns: BasicColumn[] = [ | @@ -333,7 +349,7 @@ export const childDeviceColumns: BasicColumn[] = [ | ||
333 | 349 | ||
334 | export const alarmLevel = (type: string): string => { | 350 | export const alarmLevel = (type: string): string => { |
335 | if (type === 'CRITICAL') { | 351 | if (type === 'CRITICAL') { |
336 | - return '危险'; | 352 | + return '紧急'; |
337 | } else if (type === 'MAJOR') { | 353 | } else if (type === 'MAJOR') { |
338 | return '重要'; | 354 | return '重要'; |
339 | } else if (type === 'MINOR') { | 355 | } else if (type === 'MINOR') { |
@@ -4,7 +4,7 @@ import { FormSchema } from '/@/components/Table'; | @@ -4,7 +4,7 @@ import { FormSchema } from '/@/components/Table'; | ||
4 | import { DeviceTypeEnum, DeviceState, DeviceRecord } from '/@/api/device/model/deviceModel'; | 4 | import { DeviceTypeEnum, DeviceState, DeviceRecord } from '/@/api/device/model/deviceModel'; |
5 | import { deviceProfile } from '/@/api/device/deviceManager'; | 5 | import { deviceProfile } from '/@/api/device/deviceManager'; |
6 | import { h } from 'vue'; | 6 | import { h } from 'vue'; |
7 | -import { Tag } from 'ant-design-vue'; | 7 | +import { Tag, Tooltip } from 'ant-design-vue'; |
8 | import { handeleCopy } from '../../profiles/step/topic'; | 8 | import { handeleCopy } from '../../profiles/step/topic'; |
9 | 9 | ||
10 | // 表格列数据 | 10 | // 表格列数据 |
@@ -32,19 +32,33 @@ export const columns: BasicColumn[] = [ | @@ -32,19 +32,33 @@ export const columns: BasicColumn[] = [ | ||
32 | h( | 32 | h( |
33 | 'div', | 33 | 'div', |
34 | { | 34 | { |
35 | - class: 'cursor-pointer', | 35 | + class: 'cursor-pointer truncate', |
36 | }, | 36 | }, |
37 | - `${record.alias}` | 37 | + h( |
38 | + Tooltip, | ||
39 | + { | ||
40 | + placement: 'topLeft', | ||
41 | + title: `${record.alias}`, | ||
42 | + }, | ||
43 | + () => `${record.alias}` | ||
44 | + ) | ||
38 | ), | 45 | ), |
39 | h( | 46 | h( |
40 | 'div', | 47 | 'div', |
41 | { | 48 | { |
42 | - class: 'cursor-pointer text-blue-500', | 49 | + class: 'cursor-pointer text-blue-500 truncate', |
43 | onClick: () => { | 50 | onClick: () => { |
44 | handeleCopy(`${record.name}`); | 51 | handeleCopy(`${record.name}`); |
45 | }, | 52 | }, |
46 | }, | 53 | }, |
47 | - `${record.name}` | 54 | + h( |
55 | + Tooltip, | ||
56 | + { | ||
57 | + placement: 'topLeft', | ||
58 | + title: `${record.name}`, | ||
59 | + }, | ||
60 | + () => `${record.name}` | ||
61 | + ) | ||
48 | ), | 62 | ), |
49 | ]); | 63 | ]); |
50 | }, | 64 | }, |
@@ -52,13 +52,15 @@ | @@ -52,13 +52,15 @@ | ||
52 | const alarmStatus = ref(''); | 52 | const alarmStatus = ref(''); |
53 | const [registerModal, { closeModal }] = useModalInner(async (data) => { | 53 | const [registerModal, { closeModal }] = useModalInner(async (data) => { |
54 | await resetFields(); | 54 | await resetFields(); |
55 | + const { deviceAlias, deviceName, severity, status, id } = data || {}; | ||
55 | await setFieldsValue({ | 56 | await setFieldsValue({ |
56 | ...data, | 57 | ...data, |
57 | - severity: alarmLevel(data.severity), | ||
58 | - status: statusType(data.status), | 58 | + deviceName: deviceAlias || deviceName, |
59 | + severity: alarmLevel(severity), | ||
60 | + status: statusType(status), | ||
59 | }); | 61 | }); |
60 | - alarmId.value = data.id; | ||
61 | - alarmStatus.value = data.status; | 62 | + alarmId.value = id; |
63 | + alarmStatus.value = status; | ||
62 | }); | 64 | }); |
63 | // 处理报警 | 65 | // 处理报警 |
64 | const handleAlarm = async () => { | 66 | const handleAlarm = async () => { |