简柏林 / thingskit-front · Commits

Commit 3b15c727aed0cb907df8ed4f28601475e7545851

Authored by fengtao
1 parent 477468c2

feat：修改报表配置部分代码

Inline Side-by-side
Showing 4 changed files with 141 additions and 137 deletions
1 <template> 1 <template>
2 <div> 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 <div> 5 <div>
13 <BasicTable @register="registerTable" :dataSource="tableData" /> 6 <BasicTable @register="registerTable" :dataSource="tableData" />
14 </div> 7 </div>
@@ -16,35 +9,38 @@ @@ -16,35 +9,38 @@
16 </div> 9 </div>
17 </template> 10 </template>
18 <script setup lang="ts"> 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 </script> 44 </script>
50 -<style></style> 45 +<style>
  46 +</style>
@@ -5,9 +5,8 @@ @@ -5,9 +5,8 @@
5 <Select placeholder="请选择设备" v-model:value="selectDevice" style="width: 100%" :options="selectOptions" 5 <Select placeholder="请选择设备" v-model:value="selectDevice" style="width: 100%" :options="selectOptions"
6 @change="handleDeviceChange" mode="multiple" labelInValue allowClear notFoundContent="请选择设备" /> 6 @change="handleDeviceChange" mode="multiple" labelInValue allowClear notFoundContent="请选择设备" />
7 <div style="margin-top: 1.5vh"></div> 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 </template> 10 </template>
12 </BasicForm> 11 </BasicForm>
13 </BasicDrawer> 12 </BasicDrawer>
@@ -36,17 +35,21 @@ type TDeviceList = { @@ -36,17 +35,21 @@ type TDeviceList = {
36 name?: string 35 name?: string
37 } 36 }
38 const emit = defineEmits(['success', 'register']); 37 const emit = defineEmits(['success', 'register']);
39 -const deviceAttrRef: any = ref(null); 38 +const deviceAttrRef = ref<InstanceType<typeof DeviceAttrCpns> | null>(null)
40 const isUpdate = ref(true); 39 const isUpdate = ref(true);
41 const editId = ref(''); 40 const editId = ref('');
42 const orgId = ref(''); 41 const orgId = ref('');
43 const selectOptions: Ref<SelectTypes['options']> = ref([]); 42 const selectOptions: Ref<SelectTypes['options']> = ref([]);
44 const selectDevice = ref([]); 43 const selectDevice = ref([]);
45 const deviceList: Ref<TDeviceList[]> = ref([]); 44 const deviceList: Ref<TDeviceList[]> = ref([]);
  45 +const editDeviceList: Ref<TDeviceList[]> = ref([]);
  46 +let editResData: any = reactive({})
  47 +const watchOrgId = ref('')
46 48
47 watch(organizationId, async (newValue: string) => { 49 watch(organizationId, async (newValue: string) => {
48 if (!newValue) return; 50 if (!newValue) return;
49 //获取设备 51 //获取设备
  52 + watchOrgId.value = newValue
50 const { items } = await screenLinkPageByDeptIdGetDevice({ 53 const { items } = await screenLinkPageByDeptIdGetDevice({
51 organizationId: newValue, 54 organizationId: newValue,
52 }); 55 });
@@ -59,6 +62,7 @@ watch(organizationId, async (newValue: string) => { @@ -59,6 +62,7 @@ watch(organizationId, async (newValue: string) => {
59 }); 62 });
60 }); 63 });
61 const handleDeviceChange = (e) => { 64 const handleDeviceChange = (e) => {
  65 + console.log(e)
62 deviceList.value = e; 66 deviceList.value = e;
63 }; 67 };
64 const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ 68 const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
@@ -71,21 +75,29 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async ( @@ -71,21 +75,29 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (
71 await resetFields(); 75 await resetFields();
72 setDrawerProps({ confirmLoading: false }); 76 setDrawerProps({ confirmLoading: false });
73 isUpdate.value = !!data?.isUpdate; 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 if (unref(isUpdate)) { 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 editId.value = editResData.data.id; 89 editId.value = editResData.data.id;
80 await setFieldsValue(editResData.data); 90 await setFieldsValue(editResData.data);
81 //回显嵌套数据 91 //回显嵌套数据
82 setFieldsValue({ 92 setFieldsValue({
83 agg: editResData.data.queryCondition?.agg, 93 agg: editResData.data.queryCondition?.agg,
84 interval: editResData.data.queryCondition?.interval, 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 orgId.value = editResData.data.organizationId; 100 orgId.value = editResData.data.organizationId;
88 - //获取该组织下的设备--排除网关设备  
89 const { items } = await screenLinkPageByDeptIdGetDevice({ 101 const { items } = await screenLinkPageByDeptIdGetDevice({
90 organizationId: editResData.data.organizationId, 102 organizationId: editResData.data.organizationId,
91 }); 103 });
@@ -103,25 +115,23 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async ( @@ -103,25 +115,23 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (
103 } 115 }
104 }) 116 })
105 selectDevice.value = deviceIds; 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 nextTick(() => { }); 128 nextTick(() => { });
109 - } else {  
110 - editId.value = '';  
111 - orgId.value = '';  
112 - selectDevice.value = [];  
113 - selectOptions.value = [];  
114 - deviceList.value = [];  
115 } 129 }
116 }); 130 });
117 const getAttrDevice: Ref<TDeviceList[]> = ref([]); 131 const getAttrDevice: Ref<TDeviceList[]> = ref([]);
118 const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置')); 132 const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
119 const handleChange = (e: any) => { 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 let postObj: any = reactive({}); 136 let postObj: any = reactive({});
127 let queryCondition: any = reactive({}); 137 let queryCondition: any = reactive({});
@@ -134,8 +144,10 @@ async function handleSubmit() { @@ -134,8 +144,10 @@ async function handleSubmit() {
134 const { createMessage } = useMessage(); 144 const { createMessage } = useMessage();
135 const values = await validate(); 145 const values = await validate();
136 if (!values) return; 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 if (values.executeWay == 0) { 152 if (values.executeWay == 0) {
141 executeContent = null; 153 executeContent = null;
@@ -164,7 +176,7 @@ async function handleSubmit() { @@ -164,7 +176,7 @@ async function handleSubmit() {
164 delete values.cronYear; 176 delete values.cronYear;
165 postObj = { 177 postObj = {
166 ...values, 178 ...values,
167 - ...{ executeAttributes: getAttrDevice.value }, 179 + ...{ executeAttributes: getAttrDevice.value.length == 0 ? editDeviceList.value : getAttrDevice.value },
168 ...{ queryCondition }, 180 ...{ queryCondition },
169 ...{ 181 ...{
170 startTs: startTs.value 182 startTs: startTs.value
@@ -40,7 +40,7 @@ export const columns: BasicColumn[] = [ @@ -40,7 +40,7 @@ export const columns: BasicColumn[] = [
40 }, 40 },
41 { 41 {
42 title: '所属组织', 42 title: '所属组织',
43 - dataIndex: 'organizationName', 43 + dataIndex: 'organizationDTO.name',
44 width: 120, 44 width: 120,
45 }, 45 },
46 { 46 {
1 <template> 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 </div> 7 </div>
22 </template> 8 </template>
23 <script lang="ts"> 9 <script lang="ts">
24 - export default {  
25 - inheritAttrs: false,  
26 - }; 10 +export default {
  11 + inheritAttrs: false,
  12 +};
27 </script> 13 </script>
28 <script lang="ts" setup> 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 return { 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 </script> 82 </script>
87 <style scoped lang="css"> 83 <style scoped lang="css">
88 - @import './deviceAttrCpns.css'; 84 +@import './deviceAttrCpns.css';
89 </style> 85 </style>