Commit 5a0b425884fe2ce34be1bfe1f2645f9fe156355c
Merge branch 'f-dev' into 'main'
wip:报表功能开发中 See merge request huang/yun-teng-iot-front!270
Showing
7 changed files
with
226 additions
and
191 deletions
@@ -42,3 +42,15 @@ export const getDeviceActiveTime = (entityId: string) => { | @@ -42,3 +42,15 @@ export const getDeviceActiveTime = (entityId: string) => { | ||
42 | } | 42 | } |
43 | ); | 43 | ); |
44 | }; | 44 | }; |
45 | + | ||
46 | +// 获取设备属性 | ||
47 | +export const getDeviceAttribute = (entityId: string) => { | ||
48 | + return defHttp.get( | ||
49 | + { | ||
50 | + url: `/plugins/telemetry/DEVICE/${entityId}/values/attributes?keys`, | ||
51 | + }, | ||
52 | + { | ||
53 | + joinPrefix: false, | ||
54 | + } | ||
55 | + ); | ||
56 | +}; |
@@ -8,116 +8,138 @@ | @@ -8,116 +8,138 @@ | ||
8 | @ok="handleSubmit" | 8 | @ok="handleSubmit" |
9 | > | 9 | > |
10 | <BasicForm @register="registerForm"> | 10 | <BasicForm @register="registerForm"> |
11 | - <template #deviceAttr="{ model, field }"> | ||
12 | - <deviceAttrColumn | 11 | + <template #devices> |
12 | + <Select | ||
13 | + placeholder="请选择设备" | ||
14 | + v-model:value="selectDevice" | ||
15 | + style="width: 100%" | ||
16 | + :options="selectOptions" | ||
17 | + @change="handleDeviceChange" | ||
18 | + mode="multiple" | ||
19 | + /> | ||
20 | + <div style="margin-top: 1.5vh"></div> | ||
21 | + <DeviceAttrCpns | ||
22 | + ref="deviceAttrRef" | ||
13 | @change="handleChange" | 23 | @change="handleChange" |
14 | - :orgId="!isUpdate ? model['organizationId'] : orgId" | ||
15 | - :value="!isUpdate ? model['devices'] : deviceAttrData" | ||
16 | - :isEdit="!isUpdate ? false : true" | 24 | + :value="deviceList" |
25 | + :orgId="organizationId" | ||
17 | /> | 26 | /> |
18 | - <p style="display: none">{{ field }}</p> | ||
19 | </template> | 27 | </template> |
20 | </BasicForm> | 28 | </BasicForm> |
21 | </BasicDrawer> | 29 | </BasicDrawer> |
22 | </template> | 30 | </template> |
23 | <script lang="ts" setup> | 31 | <script lang="ts" setup> |
24 | - import { ref, computed, unref, reactive } from 'vue'; | 32 | + import { ref, computed, unref, reactive, watch } from 'vue'; |
25 | import { BasicForm, useForm } from '/@/components/Form'; | 33 | import { BasicForm, useForm } from '/@/components/Form'; |
26 | - import { formSchema } from './config.data'; | 34 | + import { formSchema, organizationId } from './config.data'; |
27 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; | 35 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
28 | import { createOrEditReportManage, putReportConfigManage } from '/@/api/report/reportManager'; | 36 | import { createOrEditReportManage, putReportConfigManage } from '/@/api/report/reportManager'; |
29 | import { useMessage } from '/@/hooks/web/useMessage'; | 37 | import { useMessage } from '/@/hooks/web/useMessage'; |
30 | - import deviceAttrColumn from './cpns/MappingsForm.vue'; | ||
31 | import moment from 'moment'; | 38 | import moment from 'moment'; |
32 | import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi'; | 39 | import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi'; |
40 | + import { Select } from 'ant-design-vue'; | ||
41 | + import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue'; | ||
33 | 42 | ||
34 | const emit = defineEmits(['success', 'register']); | 43 | const emit = defineEmits(['success', 'register']); |
44 | + const deviceAttrRef: any = ref(null); | ||
35 | const isUpdate = ref(true); | 45 | const isUpdate = ref(true); |
36 | const editId = ref(''); | 46 | const editId = ref(''); |
37 | const orgId = ref(''); | 47 | const orgId = ref(''); |
38 | let deviceAttrData: any = ref([]); | 48 | let deviceAttrData: any = ref([]); |
39 | - const [registerForm, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({ | 49 | + const selectOptions: any = ref([]); |
50 | + const selectDevice = ref([]); | ||
51 | + const deviceList = ref([]); | ||
52 | + watch(organizationId, async (newValue: string) => { | ||
53 | + if (!newValue) return; | ||
54 | + //获取设备 | ||
55 | + const { items } = await screenLinkPageByDeptIdGetDevice({ | ||
56 | + organizationId: newValue, | ||
57 | + }); | ||
58 | + selectOptions.value = items.map((item) => { | ||
59 | + if (item.deviceType !== 'GATEWAY') | ||
60 | + return { | ||
61 | + label: item.name, | ||
62 | + value: item.tbDeviceId, | ||
63 | + }; | ||
64 | + }); | ||
65 | + }); | ||
66 | + const handleDeviceChange = (e) => { | ||
67 | + console.log('e', e); | ||
68 | + deviceList.value = e; | ||
69 | + }; | ||
70 | + const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ | ||
40 | labelWidth: 120, | 71 | labelWidth: 120, |
41 | schemas: formSchema, | 72 | schemas: formSchema, |
42 | showActionButtonGroup: false, | 73 | showActionButtonGroup: false, |
43 | fieldMapToTime: [['timeZone', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']], | 74 | fieldMapToTime: [['timeZone', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']], |
44 | }); | 75 | }); |
45 | - | ||
46 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { | 76 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { |
47 | await resetFields(); | 77 | await resetFields(); |
48 | setDrawerProps({ confirmLoading: false }); | 78 | setDrawerProps({ confirmLoading: false }); |
49 | isUpdate.value = !!data?.isUpdate; | 79 | isUpdate.value = !!data?.isUpdate; |
50 | if (unref(isUpdate)) { | 80 | if (unref(isUpdate)) { |
51 | - //回显 | 81 | + //回显基础数据 |
52 | editId.value = data.record.id; | 82 | editId.value = data.record.id; |
53 | await setFieldsValue(data.record); | 83 | await setFieldsValue(data.record); |
54 | - //TODO 模拟的数据 待服务端返回 | ||
55 | - const deviceIds: any = [ | ||
56 | - '8943f0b0-f1f7-11ec-98ad-a9680487d1e0', | ||
57 | - '8f5b4280-f29e-11ec-98ad-a9680487d1e0', | ||
58 | - '54e199d0-f1f7-11ec-98ad-a9680487d1e0', | ||
59 | - '6d9043f0-f1f7-11ec-98ad-a9680487d1e0', | ||
60 | - ]; | 84 | + //回显嵌套数据 |
61 | setFieldsValue({ | 85 | setFieldsValue({ |
62 | agg: queryCondition?.agg, | 86 | agg: queryCondition?.agg, |
63 | interval: queryCondition?.interval, | 87 | interval: queryCondition?.interval, |
64 | - devices: deviceIds, | ||
65 | }); | 88 | }); |
89 | + //回显设备 | ||
66 | orgId.value = data.record.organizationId; | 90 | orgId.value = data.record.organizationId; |
67 | //获取该组织下的设备--排除网关设备 | 91 | //获取该组织下的设备--排除网关设备 |
68 | const { items } = await screenLinkPageByDeptIdGetDevice({ | 92 | const { items } = await screenLinkPageByDeptIdGetDevice({ |
69 | organizationId: data.record.organizationId, | 93 | organizationId: data.record.organizationId, |
70 | }); | 94 | }); |
71 | - const options = items.map((item) => { | 95 | + selectOptions.value = items.map((item) => { |
72 | if (item.deviceType !== 'GATEWAY') | 96 | if (item.deviceType !== 'GATEWAY') |
73 | return { | 97 | return { |
74 | label: item.name, | 98 | label: item.name, |
75 | value: item.tbDeviceId, | 99 | value: item.tbDeviceId, |
76 | }; | 100 | }; |
77 | }); | 101 | }); |
78 | - updateSchema({ | ||
79 | - field: 'devices', | ||
80 | - componentProps: { | ||
81 | - options, | ||
82 | - }, | ||
83 | - }); | ||
84 | - //TODO 回显设备属性 模拟的数据 待服务端返回 | 102 | + //TODO 模拟的数据 待服务端返回 |
103 | + const deviceIds: any = [ | ||
104 | + '8943f0b0-f1f7-11ec-98ad-a9680487d1e0', | ||
105 | + '8f5b4280-f29e-11ec-98ad-a9680487d1e0', | ||
106 | + '54e199d0-f1f7-11ec-98ad-a9680487d1e0', | ||
107 | + '6d9043f0-f1f7-11ec-98ad-a9680487d1e0', | ||
108 | + ]; | ||
109 | + selectDevice.value = deviceIds; | ||
110 | + //回显设备属性 TODO 模拟的数据 待服务端返回 | ||
85 | deviceAttrData.value = [ | 111 | deviceAttrData.value = [ |
86 | { | 112 | { |
87 | device: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0', | 113 | device: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0', |
88 | attribute: 'CO2', | 114 | attribute: 'CO2', |
89 | - name: '奥迪网关子设备', | 115 | + name: '宝马默认设备', |
90 | }, | 116 | }, |
91 | { | 117 | { |
92 | - device: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0', | 118 | + device: '8f5b4280-f29e-11ec-98ad-a9680487d1e0', |
93 | attribute: 'co', | 119 | attribute: 'co', |
94 | - name: '宝马默认设备', | 120 | + name: '新增奥迪测试设备', |
95 | }, | 121 | }, |
96 | { | 122 | { |
97 | - device: '8f5b4280-f29e-11ec-98ad-a9680487d1e0', | 123 | + device: '54e199d0-f1f7-11ec-98ad-a9680487d1e0', |
98 | attribute: 'hot', | 124 | attribute: 'hot', |
99 | - name: '奔驰默认设备', | 125 | + name: '奥迪默认设备', |
100 | }, | 126 | }, |
101 | { | 127 | { |
102 | - device: '54e199d0-f1f7-11ec-98ad-a9680487d1e0', | 128 | + device: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0', |
103 | attribute: 'wet', | 129 | attribute: 'wet', |
104 | - name: '新增奥迪测试设备', | 130 | + name: '奔驰默认设备', |
105 | }, | 131 | }, |
106 | ]; | 132 | ]; |
133 | + deviceAttrRef.value?.echoDynamicInputFunc(deviceAttrData.value); | ||
107 | } else { | 134 | } else { |
108 | editId.value = ''; | 135 | editId.value = ''; |
109 | - updateSchema({ | ||
110 | - field: 'devices', | ||
111 | - componentProps: { | ||
112 | - options: [], | ||
113 | - }, | ||
114 | - }); | 136 | + selectDevice.value = []; |
137 | + selectOptions.value = []; | ||
138 | + deviceList.value = []; | ||
115 | } | 139 | } |
116 | }); | 140 | }); |
117 | - | ||
118 | const getAttrDevice: any = ref([]); | 141 | const getAttrDevice: any = ref([]); |
119 | const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置')); | 142 | const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置')); |
120 | - | ||
121 | const handleChange = (e) => (getAttrDevice.value = e); | 143 | const handleChange = (e) => (getAttrDevice.value = e); |
122 | let postObj: any = reactive({}); | 144 | let postObj: any = reactive({}); |
123 | let queryCondition: any = reactive({}); | 145 | let queryCondition: any = reactive({}); |
@@ -129,6 +151,9 @@ | @@ -129,6 +151,9 @@ | ||
129 | const { createMessage } = useMessage(); | 151 | const { createMessage } = useMessage(); |
130 | const values = await validate(); | 152 | const values = await validate(); |
131 | if (!values) return; | 153 | if (!values) return; |
154 | + if (getAttrDevice.value.length === 0) { | ||
155 | + return createMessage.error('请选择设备及其属性'); | ||
156 | + } | ||
132 | if (values.executeWay == 0) { | 157 | if (values.executeWay == 0) { |
133 | executeContent = null; | 158 | executeContent = null; |
134 | } else { | 159 | } else { |
1 | +import { ref } from 'vue'; | ||
1 | import { BasicColumn, FormSchema } from '/@/components/Table'; | 2 | import { BasicColumn, FormSchema } from '/@/components/Table'; |
2 | import type { FormSchema as QFormSchema } from '/@/components/Form/index'; | 3 | import type { FormSchema as QFormSchema } from '/@/components/Form/index'; |
3 | import moment from 'moment'; | 4 | import moment from 'moment'; |
4 | import { getOrganizationList } from '/@/api/system/system'; | 5 | import { getOrganizationList } from '/@/api/system/system'; |
5 | import { copyTransFun } from '/@/utils/fnUtils'; | 6 | import { copyTransFun } from '/@/utils/fnUtils'; |
6 | -import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi'; | ||
7 | import { findDictItemByCode } from '/@/api/system/dict'; | 7 | import { findDictItemByCode } from '/@/api/system/dict'; |
8 | import { | 8 | import { |
9 | optionsConfig, | 9 | optionsConfig, |
@@ -19,6 +19,8 @@ import { | @@ -19,6 +19,8 @@ import { | ||
19 | isCountAll, | 19 | isCountAll, |
20 | } from './timeConfig'; | 20 | } from './timeConfig'; |
21 | import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config'; | 21 | import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config'; |
22 | +// import { JCronValidator } from '/@/components/Form'; | ||
23 | + | ||
22 | export enum SchemaFiled { | 24 | export enum SchemaFiled { |
23 | WAY = 'way', | 25 | WAY = 'way', |
24 | TIME_PERIOD = 'timePeriod', | 26 | TIME_PERIOD = 'timePeriod', |
@@ -31,7 +33,7 @@ export enum SchemaFiled { | @@ -31,7 +33,7 @@ export enum SchemaFiled { | ||
31 | AGG = 'agg', | 33 | AGG = 'agg', |
32 | ORDER_BY = 'orderBy', | 34 | ORDER_BY = 'orderBy', |
33 | } | 35 | } |
34 | - | 36 | +export const organizationId = ref(''); |
35 | // 表格配置 | 37 | // 表格配置 |
36 | export const columns: BasicColumn[] = [ | 38 | export const columns: BasicColumn[] = [ |
37 | { | 39 | { |
@@ -159,30 +161,8 @@ export const formSchema: QFormSchema[] = [ | @@ -159,30 +161,8 @@ export const formSchema: QFormSchema[] = [ | ||
159 | colProps: { span: 24 }, | 161 | colProps: { span: 24 }, |
160 | component: 'ApiTreeSelect', | 162 | component: 'ApiTreeSelect', |
161 | required: true, | 163 | required: true, |
162 | - componentProps: ({ formActionType }) => { | ||
163 | - const { updateSchema } = formActionType; | 164 | + componentProps: () => { |
164 | return { | 165 | return { |
165 | - async onChange(e) { | ||
166 | - if (e) { | ||
167 | - //获取该组织下的设备--排除网关设备 | ||
168 | - const { items } = await screenLinkPageByDeptIdGetDevice({ | ||
169 | - organizationId: e, | ||
170 | - }); | ||
171 | - const options = items.map((item) => { | ||
172 | - if (item.deviceType !== 'GATEWAY') | ||
173 | - return { | ||
174 | - label: item.name, | ||
175 | - value: item.tbDeviceId, | ||
176 | - }; | ||
177 | - }); | ||
178 | - updateSchema({ | ||
179 | - field: 'devices', | ||
180 | - componentProps: { | ||
181 | - options, | ||
182 | - }, | ||
183 | - }); | ||
184 | - } | ||
185 | - }, | ||
186 | maxLength: 250, | 166 | maxLength: 250, |
187 | placeholder: '请选择所属组织', | 167 | placeholder: '请选择所属组织', |
188 | api: async () => { | 168 | api: async () => { |
@@ -190,6 +170,9 @@ export const formSchema: QFormSchema[] = [ | @@ -190,6 +170,9 @@ export const formSchema: QFormSchema[] = [ | ||
190 | copyTransFun(data as any as any[]); | 170 | copyTransFun(data as any as any[]); |
191 | return data; | 171 | return data; |
192 | }, | 172 | }, |
173 | + onChange(e) { | ||
174 | + organizationId.value = e; | ||
175 | + }, | ||
193 | }; | 176 | }; |
194 | }, | 177 | }, |
195 | }, | 178 | }, |
@@ -225,6 +208,13 @@ export const formSchema: QFormSchema[] = [ | @@ -225,6 +208,13 @@ export const formSchema: QFormSchema[] = [ | ||
225 | ], | 208 | ], |
226 | }, | 209 | }, |
227 | }, | 210 | }, |
211 | + // { | ||
212 | + // field: 'cronExpression', | ||
213 | + // label: 'Cron表达式', | ||
214 | + // component: 'JEasyCron', | ||
215 | + // defaultValue: '* * * * * ? *', | ||
216 | + // rules: [{ required: true, message: '请输入Cron表达式' }, { validator: JCronValidator }], | ||
217 | + // }, | ||
228 | { | 218 | { |
229 | field: 'timeWeek', | 219 | field: 'timeWeek', |
230 | component: 'Select', | 220 | component: 'Select', |
@@ -299,13 +289,13 @@ export const formSchema: QFormSchema[] = [ | @@ -299,13 +289,13 @@ export const formSchema: QFormSchema[] = [ | ||
299 | { | 289 | { |
300 | field: 'devices', | 290 | field: 'devices', |
301 | label: '设备', | 291 | label: '设备', |
302 | - required: true, | ||
303 | helpMessage: ['报表配置只对拥有"数值型"属性的设备才能配置'], | 292 | helpMessage: ['报表配置只对拥有"数值型"属性的设备才能配置'], |
304 | component: 'Select', | 293 | component: 'Select', |
305 | componentProps: { | 294 | componentProps: { |
306 | placeholder: '请选择设备', | 295 | placeholder: '请选择设备', |
307 | mode: 'multiple', | 296 | mode: 'multiple', |
308 | }, | 297 | }, |
298 | + slot: 'devices', | ||
309 | colProps: { span: 24 }, | 299 | colProps: { span: 24 }, |
310 | }, | 300 | }, |
311 | { | 301 | { |
@@ -364,16 +354,16 @@ export const formSchema: QFormSchema[] = [ | @@ -364,16 +354,16 @@ export const formSchema: QFormSchema[] = [ | ||
364 | }; | 354 | }; |
365 | }, | 355 | }, |
366 | }, | 356 | }, |
367 | - { | ||
368 | - field: 'devices1', | ||
369 | - label: '设备属性', | ||
370 | - component: 'Select', | ||
371 | - componentProps: { | ||
372 | - placeholder: '请选择设备属性', | ||
373 | - }, | ||
374 | - colProps: { span: 24 }, | ||
375 | - slot: 'deviceAttr', | ||
376 | - }, | 357 | + // { |
358 | + // field: 'deviceAttr', | ||
359 | + // label: '设备属性', | ||
360 | + // component: 'Select', | ||
361 | + // componentProps: { | ||
362 | + // placeholder: '请选择设备属性', | ||
363 | + // }, | ||
364 | + // colProps: { span: 24 }, | ||
365 | + // slot: 'deviceAttr', | ||
366 | + // }, | ||
377 | { | 367 | { |
378 | field: 'dataCompare', | 368 | field: 'dataCompare', |
379 | label: '数据类型', | 369 | label: '数据类型', |
src/views/report/config/cpns/DeviceAttrCpns.vue
renamed from
src/views/report/config/cpns/MappingsForm.vue
@@ -6,7 +6,6 @@ | @@ -6,7 +6,6 @@ | ||
6 | > | 6 | > |
7 | <a-input | 7 | <a-input |
8 | :disabled="true" | 8 | :disabled="true" |
9 | - placeholder="设备" | ||
10 | v-model:value="param.device" | 9 | v-model:value="param.device" |
11 | style="width: 38%; margin-bottom: 5px; margin-left: 1vh" | 10 | style="width: 38%; margin-bottom: 5px; margin-left: 1vh" |
12 | @change="emitChange" | 11 | @change="emitChange" |
@@ -21,132 +20,121 @@ | @@ -21,132 +20,121 @@ | ||
21 | </div> | 20 | </div> |
22 | </template> | 21 | </template> |
23 | <script lang="ts"> | 22 | <script lang="ts"> |
24 | - import { defineComponent, reactive, UnwrapRef, watchEffect, ref } from 'vue'; | 23 | + export default { |
24 | + inheritAttrs: false, | ||
25 | + }; | ||
26 | +</script> | ||
27 | +<script lang="ts" setup> | ||
28 | + import { reactive, UnwrapRef, watchEffect, ref } from 'vue'; | ||
25 | import { propTypes } from '/@/utils/propTypes'; | 29 | import { propTypes } from '/@/utils/propTypes'; |
26 | import { SelectTypes } from 'ant-design-vue/es/select'; | 30 | import { SelectTypes } from 'ant-design-vue/es/select'; |
27 | import { Select } from 'ant-design-vue'; | 31 | import { Select } from 'ant-design-vue'; |
28 | import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi'; | 32 | import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi'; |
29 | import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; | 33 | import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; |
34 | + // import { getDeviceAttribute } from '/@/api/alarm/position'; | ||
30 | 35 | ||
31 | interface Params { | 36 | interface Params { |
32 | [x: string]: string; | 37 | [x: string]: string; |
33 | attribute: string; | 38 | attribute: string; |
34 | device: string; | 39 | device: string; |
35 | } | 40 | } |
36 | - | ||
37 | - export default defineComponent({ | ||
38 | - name: 'JAddInput', | ||
39 | - components: { | ||
40 | - Select, | ||
41 | - }, | ||
42 | - //--------------不继承Antd Design Vue Input的所有属性 否则控制台报大片警告-------------- | ||
43 | - inheritAttrs: false, | ||
44 | - props: { | ||
45 | - value: propTypes.array.def([]), | ||
46 | - orgId: propTypes.string.def(''), | ||
47 | - isEdit: propTypes.bool.def(false), | ||
48 | - }, | ||
49 | - emits: ['change', 'update:value', 'dynamicReduceHeight', 'dynamicAddHeight'], | ||
50 | - setup(props, { emit }) { | ||
51 | - const selectOptions = ref<SelectTypes['options']>([]); | ||
52 | - //input动态数据 | ||
53 | - const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] }); | ||
54 | - //监听传入数据value | ||
55 | - watchEffect(() => { | ||
56 | - initVal(); | ||
57 | - }); | ||
58 | - /** | ||
59 | - * 初始化数值 | ||
60 | - */ | ||
61 | - async function initVal() { | ||
62 | - dynamicInput.params = []; | ||
63 | - if (props.isEdit) { | ||
64 | - console.log('edit'); | ||
65 | - let jsonObj = props.value; | ||
66 | - let deviceIdArr: any = []; | ||
67 | - jsonObj.forEach((item: Params) => { | ||
68 | - dynamicInput.params.push({ | ||
69 | - attribute: item.attribute, | ||
70 | - device: item.name, | ||
71 | - value: item.device, | ||
72 | - }); | ||
73 | - deviceIdArr.push(item.device); | ||
74 | - }); | ||
75 | - if (deviceIdArr.length > 0) { | ||
76 | - const res = await getAttribute(props.orgId, deviceIdArr.join(',')); | ||
77 | - selectOptions.value = res.map((o) => { | ||
78 | - return { | ||
79 | - label: o, | ||
80 | - value: o, | ||
81 | - }; | ||
82 | - }); | ||
83 | - } | ||
84 | - } else { | ||
85 | - console.log('add'); | ||
86 | - if (props.value && props.orgId) { | ||
87 | - const res = await getAttribute(props.orgId, props.value.join(',')); | ||
88 | - selectOptions.value = res.map((o) => { | ||
89 | - return { | ||
90 | - label: o, | ||
91 | - value: o, | ||
92 | - }; | ||
93 | - }); | ||
94 | - const { items } = await screenLinkPageByDeptIdGetDevice({ | ||
95 | - organizationId: props.orgId, | ||
96 | - }); | ||
97 | - const options = items.map((item) => { | ||
98 | - return { | ||
99 | - label: item.name, | ||
100 | - value: item.tbDeviceId, | ||
101 | - }; | ||
102 | - }); | ||
103 | - const temp: any = []; | ||
104 | - options.forEach((f) => { | ||
105 | - props.value.forEach((f1) => { | ||
106 | - if (f1 == f.value) { | ||
107 | - temp.push({ | ||
108 | - label: f.label, | ||
109 | - value: f.value, | ||
110 | - }); | ||
111 | - } | ||
112 | - }); | ||
113 | - }); | ||
114 | - let jsonObj = temp; | ||
115 | - jsonObj.forEach((item: Params) => { | ||
116 | - dynamicInput.params.push({ | ||
117 | - attribute: item.attribute, | ||
118 | - device: item.label, | ||
119 | - value: item.value, | ||
120 | - }); | 41 | + const props = defineProps({ |
42 | + value: propTypes.array.def([]), | ||
43 | + orgId: propTypes.string.def(''), | ||
44 | + }); | ||
45 | + const emits = defineEmits(['change', 'update:value', 'dynamicReduceHeight', 'dynamicAddHeight']); | ||
46 | + const selectOptions = ref<SelectTypes['options']>([]); | ||
47 | + //动态数据 | ||
48 | + const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] }); | ||
49 | + //监听传入数据value | ||
50 | + watchEffect(() => { | ||
51 | + initVal(); | ||
52 | + }); | ||
53 | + //获取属性 | ||
54 | + const getAttr = async (orgId, value) => { | ||
55 | + const res = await getAttribute(orgId, value.join(',')); | ||
56 | + selectOptions.value = res.map((o) => { | ||
57 | + return { | ||
58 | + label: o, | ||
59 | + value: o, | ||
60 | + }; | ||
61 | + }); | ||
62 | + }; | ||
63 | + //获取设备 | ||
64 | + const deviceOptions: any = ref([]); | ||
65 | + const getDevice = async (orgId) => { | ||
66 | + const { items } = await screenLinkPageByDeptIdGetDevice({ | ||
67 | + organizationId: orgId, | ||
68 | + }); | ||
69 | + deviceOptions.value = items.map((item) => { | ||
70 | + return { | ||
71 | + label: item.name, | ||
72 | + value: item.tbDeviceId, | ||
73 | + }; | ||
74 | + }); | ||
75 | + }; | ||
76 | + /** | ||
77 | + * 初始化数值 | ||
78 | + */ | ||
79 | + async function initVal() { | ||
80 | + dynamicInput.params = []; | ||
81 | + if (props.value && props.orgId) { | ||
82 | + const getPropsDevice = props.value; | ||
83 | + const getPropsOrgId = props.orgId; | ||
84 | + await getAttr(getPropsOrgId, getPropsDevice); | ||
85 | + await getDevice(getPropsOrgId); | ||
86 | + const temp: any = []; | ||
87 | + deviceOptions.value.forEach((f) => { | ||
88 | + getPropsDevice.forEach((f1) => { | ||
89 | + if (f1 == f.value) { | ||
90 | + temp.push({ | ||
91 | + label: f.label, | ||
92 | + value: f.value, | ||
121 | }); | 93 | }); |
122 | } | 94 | } |
123 | - } | ||
124 | - } | ||
125 | - /** | ||
126 | - * 数值改变 | ||
127 | - */ | ||
128 | - function emitChange() { | ||
129 | - let obj: any = []; | ||
130 | - if (dynamicInput.params.length > 0) { | ||
131 | - dynamicInput.params.forEach((item: Params) => { | ||
132 | - obj.push({ | ||
133 | - attribute: item.attribute, | ||
134 | - device: item.value, | ||
135 | - }); | ||
136 | - }); | ||
137 | - } | ||
138 | - emit('change', obj); | ||
139 | - emit('update:value', obj); | ||
140 | - } | 95 | + }); |
96 | + }); | ||
97 | + temp.forEach((item: Params) => { | ||
98 | + dynamicInput.params.push({ | ||
99 | + attribute: item.attribute, | ||
100 | + device: item.label, | ||
101 | + value: item.value, | ||
102 | + }); | ||
103 | + }); | ||
104 | + } | ||
105 | + } | ||
106 | + /** | ||
107 | + * 数值改变 | ||
108 | + */ | ||
109 | + function emitChange() { | ||
110 | + let obj: any = []; | ||
111 | + if (dynamicInput.params.length > 0) { | ||
112 | + dynamicInput.params.forEach((item: Params) => { | ||
113 | + obj.push({ | ||
114 | + attribute: item.attribute, | ||
115 | + device: item.value, | ||
116 | + }); | ||
117 | + }); | ||
118 | + } | ||
119 | + emits('change', obj); | ||
120 | + emits('update:value', obj); | ||
121 | + } | ||
122 | + //回显 | ||
123 | + const echoDynamicInputFunc = (o) => { | ||
124 | + dynamicInput.params = []; | ||
125 | + dynamicInput.params = o.map((m) => { | ||
141 | return { | 126 | return { |
142 | - dynamicInput, | ||
143 | - emitChange, | ||
144 | - selectOptions, | 127 | + device: m.name, |
128 | + attribute: m.attribute, | ||
129 | + value: m.device, | ||
145 | }; | 130 | }; |
146 | - }, | 131 | + }); |
132 | + }; | ||
133 | + defineExpose({ | ||
134 | + echoDynamicInputFunc, | ||
147 | }); | 135 | }); |
148 | </script> | 136 | </script> |
149 | -<style scoped> | 137 | +<style scoped lang="css"> |
150 | .dynamic-delete-button { | 138 | .dynamic-delete-button { |
151 | cursor: pointer; | 139 | cursor: pointer; |
152 | position: relative; | 140 | position: relative; |
@@ -44,6 +44,26 @@ | @@ -44,6 +44,26 @@ | ||
44 | }, | 44 | }, |
45 | }, | 45 | }, |
46 | ]" | 46 | ]" |
47 | + :dropDownActions="[ | ||
48 | + { | ||
49 | + label: '执行一次', | ||
50 | + popConfirm: { | ||
51 | + title: '是否执行一次?', | ||
52 | + }, | ||
53 | + }, | ||
54 | + { | ||
55 | + label: '任务详细', | ||
56 | + popConfirm: { | ||
57 | + title: '任务详细', | ||
58 | + }, | ||
59 | + }, | ||
60 | + { | ||
61 | + label: '调度日志', | ||
62 | + popConfirm: { | ||
63 | + title: '调度日志', | ||
64 | + }, | ||
65 | + }, | ||
66 | + ]" | ||
47 | /> | 67 | /> |
48 | </template> | 68 | </template> |
49 | <template #status="{ record }"> | 69 | <template #status="{ record }"> |
@@ -72,7 +72,7 @@ | @@ -72,7 +72,7 @@ | ||
72 | class="ant-upload-text flex" | 72 | class="ant-upload-text flex" |
73 | style="width: 280px; height: 130px; align-items: center; font-size: 0.5625rem" | 73 | style="width: 280px; height: 130px; align-items: center; font-size: 0.5625rem" |
74 | > | 74 | > |
75 | - 支持.PNG、.JPG格式,建议尺寸为1920*1080px以上,大小不超过2M</div | 75 | + 支持.PNG、.JPG格式,建议尺寸为1920*1080px以上,大小不超过5M</div |
76 | > | 76 | > |
77 | </div> | 77 | </div> |
78 | </Upload> | 78 | </Upload> |
@@ -21,7 +21,7 @@ | @@ -21,7 +21,7 @@ | ||
21 | class="ant-upload-text flex" | 21 | class="ant-upload-text flex" |
22 | style="width: 180px; height: 100px; align-items: center; font-size: 0.5625rem" | 22 | style="width: 180px; height: 100px; align-items: center; font-size: 0.5625rem" |
23 | > | 23 | > |
24 | - 支持.PNG、.JPG格式,建议尺寸为300*300px,大小不超过2M</div | 24 | + 支持.PNG、.JPG格式,建议尺寸为300*300px,大小不超过5M</div |
25 | > | 25 | > |
26 | </div> | 26 | </div> |
27 | </Upload> | 27 | </Upload> |