Showing
4 changed files
with
141 additions
and
137 deletions
1 | 1 | <template> |
2 | 2 | <div> |
3 | - <BasicModal | |
4 | - v-bind="$attrs" | |
5 | - width="55rem" | |
6 | - :height="heightNum" | |
7 | - @register="register" | |
8 | - title="执行设备及属性" | |
9 | - @cancel="handleCancel" | |
10 | - :showOkBtn="false" | |
11 | - > | |
3 | + <BasicModal v-bind="$attrs" width="55rem" :height="heightNum" @register="register" title="执行设备及属性" | |
4 | + @cancel="handleCancel" :showOkBtn="false"> | |
12 | 5 | <div> |
13 | 6 | <BasicTable @register="registerTable" :dataSource="tableData" /> |
14 | 7 | </div> |
... | ... | @@ -16,35 +9,38 @@ |
16 | 9 | </div> |
17 | 10 | </template> |
18 | 11 | <script setup lang="ts"> |
19 | - import { ref, nextTick } from 'vue'; | |
20 | - import { BasicModal, useModalInner } from '/@/components/Modal'; | |
21 | - import { BasicTable, useTable } from '/@/components/Table'; | |
22 | - import { viewDeviceColumn } from './config.data'; | |
12 | +import { ref, nextTick } from 'vue'; | |
13 | +import { BasicModal, useModalInner } from '/@/components/Modal'; | |
14 | +import { BasicTable, useTable } from '/@/components/Table'; | |
15 | +import { viewDeviceColumn } from './config.data'; | |
16 | +import { reportEditDetailPage } from '/@/api/report/reportManager'; | |
23 | 17 | |
24 | - const heightNum = ref(800); | |
25 | - const tableData: any = ref([]); | |
26 | - const [registerTable] = useTable({ | |
27 | - title: '执行设备及属性', | |
28 | - columns: viewDeviceColumn, | |
29 | - showIndexColumn: false, | |
30 | - clickToRowSelect: false, | |
31 | - showTableSetting: false, | |
32 | - bordered: true, | |
33 | - }); | |
34 | - const [register] = useModalInner((data) => { | |
35 | - console.log(data); | |
36 | - const getTableData = () => { | |
37 | - for (let i = 0; i < 100; i++) { | |
38 | - tableData.value.push({ | |
39 | - device: `设备${i}`, | |
40 | - attribute: `CO${i}、Temp${i}`, | |
41 | - }); | |
18 | +const heightNum = ref(800); | |
19 | +const tableData: any = ref([]); | |
20 | +const [registerTable] = useTable({ | |
21 | + title: '执行设备及属性', | |
22 | + columns: viewDeviceColumn, | |
23 | + showIndexColumn: false, | |
24 | + clickToRowSelect: false, | |
25 | + showTableSetting: false, | |
26 | + bordered: true, | |
27 | +}); | |
28 | +const [register] = useModalInner((data) => { | |
29 | + const getTableData = async () => { | |
30 | + const res: any = await reportEditDetailPage(data.record.id) | |
31 | + const resMap = res.data.executeAttributes.map(d => { | |
32 | + return { | |
33 | + device: d.name, | |
34 | + attribute: d.attribute | |
42 | 35 | } |
43 | - }; | |
44 | - nextTick(() => { | |
45 | - getTableData(); | |
46 | - }); | |
36 | + }) | |
37 | + tableData.value = resMap | |
38 | + }; | |
39 | + nextTick(() => { | |
40 | + getTableData(); | |
47 | 41 | }); |
48 | - const handleCancel = () => {}; | |
42 | +}); | |
43 | +const handleCancel = () => { }; | |
49 | 44 | </script> |
50 | -<style></style> | |
45 | +<style> | |
46 | +</style> | ... | ... |
... | ... | @@ -5,9 +5,8 @@ |
5 | 5 | <Select placeholder="请选择设备" v-model:value="selectDevice" style="width: 100%" :options="selectOptions" |
6 | 6 | @change="handleDeviceChange" mode="multiple" labelInValue allowClear notFoundContent="请选择设备" /> |
7 | 7 | <div style="margin-top: 1.5vh"></div> |
8 | - <div v-for="(item, index) in deviceList" :key="index"> | |
9 | - <DeviceAttrCpns ref="deviceAttrRef" @change="handleChange" :value="item" :orgId="organizationId || orgId" /> | |
10 | - </div> | |
8 | + <DeviceAttrCpns ref="deviceAttrRef" @change="handleChange" :value="deviceList" | |
9 | + :orgId="organizationId || orgId" /> | |
11 | 10 | </template> |
12 | 11 | </BasicForm> |
13 | 12 | </BasicDrawer> |
... | ... | @@ -36,17 +35,21 @@ type TDeviceList = { |
36 | 35 | name?: string |
37 | 36 | } |
38 | 37 | const emit = defineEmits(['success', 'register']); |
39 | -const deviceAttrRef: any = ref(null); | |
38 | +const deviceAttrRef = ref<InstanceType<typeof DeviceAttrCpns> | null>(null) | |
40 | 39 | const isUpdate = ref(true); |
41 | 40 | const editId = ref(''); |
42 | 41 | const orgId = ref(''); |
43 | 42 | const selectOptions: Ref<SelectTypes['options']> = ref([]); |
44 | 43 | const selectDevice = ref([]); |
45 | 44 | const deviceList: Ref<TDeviceList[]> = ref([]); |
45 | +const editDeviceList: Ref<TDeviceList[]> = ref([]); | |
46 | +let editResData: any = reactive({}) | |
47 | +const watchOrgId = ref('') | |
46 | 48 | |
47 | 49 | watch(organizationId, async (newValue: string) => { |
48 | 50 | if (!newValue) return; |
49 | 51 | //获取设备 |
52 | + watchOrgId.value = newValue | |
50 | 53 | const { items } = await screenLinkPageByDeptIdGetDevice({ |
51 | 54 | organizationId: newValue, |
52 | 55 | }); |
... | ... | @@ -59,6 +62,7 @@ watch(organizationId, async (newValue: string) => { |
59 | 62 | }); |
60 | 63 | }); |
61 | 64 | const handleDeviceChange = (e) => { |
65 | + console.log(e) | |
62 | 66 | deviceList.value = e; |
63 | 67 | }; |
64 | 68 | const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ |
... | ... | @@ -71,21 +75,29 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async ( |
71 | 75 | await resetFields(); |
72 | 76 | setDrawerProps({ confirmLoading: false }); |
73 | 77 | isUpdate.value = !!data?.isUpdate; |
78 | + editId.value = ''; | |
79 | + orgId.value = ''; | |
80 | + selectDevice.value = []; | |
81 | + selectOptions.value = []; | |
82 | + deviceList.value = []; | |
83 | + getAttrDevice.value = [] | |
84 | + editDeviceList.value = [] | |
74 | 85 | if (unref(isUpdate)) { |
75 | 86 | //编辑回显数据 |
76 | - const editResData: any = await reportEditDetailPage(data.record.id) | |
77 | - console.log(editResData.data) | |
78 | - // //回显基础数据 | |
87 | + editResData = await reportEditDetailPage(data.record.id) | |
88 | + //回显基础数据 | |
79 | 89 | editId.value = editResData.data.id; |
80 | 90 | await setFieldsValue(editResData.data); |
81 | 91 | //回显嵌套数据 |
82 | 92 | setFieldsValue({ |
83 | 93 | agg: editResData.data.queryCondition?.agg, |
84 | 94 | interval: editResData.data.queryCondition?.interval, |
95 | + limit: editResData.data.queryCondition?.limit, | |
96 | + orderBy: editResData.data.queryCondition?.orderBy, | |
97 | + useStrictDataTypes: editResData.data.queryCondition?.useStrictDataTypes | |
85 | 98 | }); |
86 | 99 | //回显设备 |
87 | 100 | orgId.value = editResData.data.organizationId; |
88 | - //获取该组织下的设备--排除网关设备 | |
89 | 101 | const { items } = await screenLinkPageByDeptIdGetDevice({ |
90 | 102 | organizationId: editResData.data.organizationId, |
91 | 103 | }); |
... | ... | @@ -103,25 +115,23 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async ( |
103 | 115 | } |
104 | 116 | }) |
105 | 117 | selectDevice.value = deviceIds; |
106 | - //回显设备属性 TODO 模拟的数据 待服务端返回 | |
107 | - deviceList.value = editResData.data.executeAttributes | |
118 | + //回显设备属性 | |
119 | + const editDeviceAttr = editResData.data.executeAttributes?.map(item => { | |
120 | + return { | |
121 | + label: item.name, | |
122 | + value: item.device, | |
123 | + attribute: item.attribute, | |
124 | + } | |
125 | + }) | |
126 | + deviceList.value = editDeviceAttr | |
127 | + editDeviceList.value = editResData.data.executeAttributes | |
108 | 128 | nextTick(() => { }); |
109 | - } else { | |
110 | - editId.value = ''; | |
111 | - orgId.value = ''; | |
112 | - selectDevice.value = []; | |
113 | - selectOptions.value = []; | |
114 | - deviceList.value = []; | |
115 | 129 | } |
116 | 130 | }); |
117 | 131 | const getAttrDevice: Ref<TDeviceList[]> = ref([]); |
118 | 132 | const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置')); |
119 | 133 | const handleChange = (e: any) => { |
120 | - getAttrDevice.value.push({ | |
121 | - device: e.value, | |
122 | - attribute: e.attribute, | |
123 | - name: e.device | |
124 | - }); | |
134 | + getAttrDevice.value = e | |
125 | 135 | }; |
126 | 136 | let postObj: any = reactive({}); |
127 | 137 | let queryCondition: any = reactive({}); |
... | ... | @@ -134,8 +144,10 @@ async function handleSubmit() { |
134 | 144 | const { createMessage } = useMessage(); |
135 | 145 | const values = await validate(); |
136 | 146 | if (!values) return; |
137 | - if (getAttrDevice.value.length === 0) { | |
138 | - return createMessage.error('请选择设备及其属性'); | |
147 | + if (!unref(isUpdate)) { | |
148 | + if (getAttrDevice.value.length === 0) { | |
149 | + return createMessage.error('请选择设备及其属性'); | |
150 | + } | |
139 | 151 | } |
140 | 152 | if (values.executeWay == 0) { |
141 | 153 | executeContent = null; |
... | ... | @@ -164,7 +176,7 @@ async function handleSubmit() { |
164 | 176 | delete values.cronYear; |
165 | 177 | postObj = { |
166 | 178 | ...values, |
167 | - ...{ executeAttributes: getAttrDevice.value }, | |
179 | + ...{ executeAttributes: getAttrDevice.value.length == 0 ? editDeviceList.value : getAttrDevice.value }, | |
168 | 180 | ...{ queryCondition }, |
169 | 181 | ...{ |
170 | 182 | startTs: startTs.value | ... | ... |
1 | 1 | <template> |
2 | - <div | |
3 | - v-for="param in dynamicInput.params" | |
4 | - :key="param.key" | |
5 | - style="display: flex; margin-top: 0.25vh" | |
6 | - > | |
7 | - <a-input | |
8 | - :disabled="true" | |
9 | - v-model:value="param.device" | |
10 | - style="width: 50%; margin-bottom: 5px; margin-left: 0vh" | |
11 | - @change="emitChange" | |
12 | - /> | |
13 | - <Select | |
14 | - placeholder="请选择设备属性" | |
15 | - v-model:value="param.attribute" | |
16 | - style="width: 50%; margin-left: 1.8vw" | |
17 | - :options="selectOptions" | |
18 | - @change="emitChange" | |
19 | - allowClear | |
20 | - /> | |
2 | + <div v-for="param in dynamicInput.params" :key="param.key" style="display: flex; margin-top: 0.25vh"> | |
3 | + <a-input :disabled="true" v-model:value="param.device" style="width: 38%; margin-bottom: 5px; margin-left: 1vh" | |
4 | + @change="emitChange" /> | |
5 | + <Select placeholder="请选择设备属性" v-model:value="param.attribute" style="width: 160px; margin-left: 1.8vw" | |
6 | + :options="selectOptions" @change="emitChange" allowClear /> | |
21 | 7 | </div> |
22 | 8 | </template> |
23 | 9 | <script lang="ts"> |
24 | - export default { | |
25 | - inheritAttrs: false, | |
26 | - }; | |
10 | +export default { | |
11 | + inheritAttrs: false, | |
12 | +}; | |
27 | 13 | </script> |
28 | 14 | <script lang="ts" setup> |
29 | - import { reactive, UnwrapRef, watchEffect, ref } from 'vue'; | |
30 | - import { propTypes } from '/@/utils/propTypes'; | |
31 | - import { SelectTypes } from 'ant-design-vue/es/select'; | |
32 | - import { Select } from 'ant-design-vue'; | |
33 | - import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; | |
15 | +import { reactive, UnwrapRef, watchEffect, ref } from 'vue'; | |
16 | +import { propTypes } from '/@/utils/propTypes'; | |
17 | +import { SelectTypes } from 'ant-design-vue/es/select'; | |
18 | +import { Select } from 'ant-design-vue'; | |
19 | +import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; | |
34 | 20 | |
35 | - interface Params { | |
36 | - [x: string]: string; | |
37 | - attribute: string; | |
38 | - device: string; | |
39 | - } | |
40 | - const props = defineProps({ | |
41 | - value: propTypes.object.def({}), | |
42 | - orgId: propTypes.string.def(''), | |
21 | +interface Params { | |
22 | + [x: string]: string; | |
23 | + attribute: string; | |
24 | + device: string; | |
25 | +} | |
26 | +const props = defineProps({ | |
27 | + value: propTypes.array.def([]), | |
28 | + orgId: propTypes.string.def(''), | |
29 | +}); | |
30 | +const emits = defineEmits(['change', 'update:value']); | |
31 | +const selectOptions = ref<SelectTypes['options']>([]); | |
32 | +//获取属性 | |
33 | +const getAttr = async (orgId, deviceId) => { | |
34 | + const res = await getAttribute(orgId, deviceId.join(',')); | |
35 | + selectOptions.value = res.map((o) => { | |
36 | + return { | |
37 | + label: o, | |
38 | + value: o, | |
39 | + }; | |
43 | 40 | }); |
44 | - const emits = defineEmits(['change', 'update:value']); | |
45 | - const selectOptions = ref<SelectTypes['options']>([]); | |
46 | - //获取属性 | |
47 | - const getAttr = async (orgId, deviceId) => { | |
48 | - const res = await getAttribute(orgId, deviceId); | |
49 | - selectOptions.value = res.map((o) => { | |
41 | +}; | |
42 | +//动态数据 | |
43 | +const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] }); | |
44 | +//监听传入数据value | |
45 | +watchEffect(() => { | |
46 | + initVal(); | |
47 | +}); | |
48 | +/** | |
49 | + * 初始化数值 | |
50 | + */ | |
51 | +async function initVal() { | |
52 | + if (props.value && props.orgId) { | |
53 | + let jsonObj = props.value; | |
54 | + const deviceId = jsonObj.map((m: any) => m.value); | |
55 | + await getAttr(props.orgId, deviceId); | |
56 | + dynamicInput.params = jsonObj.map((item: any) => { | |
50 | 57 | return { |
51 | - label: o, | |
52 | - value: o, | |
53 | - }; | |
54 | - }); | |
55 | - }; | |
56 | - //动态数据 | |
57 | - const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] }); | |
58 | - const rEffect = watchEffect(() => { | |
59 | - initVal(); | |
60 | - }); | |
61 | - rEffect(); | |
62 | - /** | |
63 | - * 初始化数值 | |
64 | - */ | |
65 | - async function initVal() { | |
66 | - if (props.orgId && props.value.value) { | |
67 | - await getAttr(props.orgId, props.value.value); | |
68 | - dynamicInput.params.push({ | |
69 | - device: props.value.label, | |
70 | - value: props.value.value, | |
71 | - attribute: props.value.attribute == '' ? '' : props.value.attribute, | |
72 | - }); | |
73 | - } | |
58 | + attribute: item.attribute, | |
59 | + device: item.label, | |
60 | + value: item.value, | |
61 | + } | |
62 | + }) | |
74 | 63 | } |
75 | - /** | |
76 | - * 数值改变 | |
77 | - */ | |
78 | - function emitChange() { | |
79 | - let obj: any = dynamicInput.params[0]; | |
80 | - emits('change', obj); | |
81 | - emits('update:value', obj); | |
64 | +} | |
65 | +/** | |
66 | + * 数值改变 | |
67 | + */ | |
68 | +function emitChange() { | |
69 | + let obj: any = []; | |
70 | + if (dynamicInput.params.length > 0) { | |
71 | + dynamicInput.params.forEach((item: Params) => { | |
72 | + obj.push({ | |
73 | + attribute: item.attribute, | |
74 | + device: item.value, | |
75 | + name: item.device | |
76 | + }); | |
77 | + }); | |
82 | 78 | } |
83 | - defineExpose({ | |
84 | - getAttr, | |
85 | - }); | |
79 | + emits('change', obj); | |
80 | + emits('update:value', obj); | |
81 | +} | |
86 | 82 | </script> |
87 | 83 | <style scoped lang="css"> |
88 | - @import './deviceAttrCpns.css'; | |
84 | +@import './deviceAttrCpns.css'; | |
89 | 85 | </style> | ... | ... |