Showing
7 changed files
with
121 additions
and
60 deletions
@@ -15,6 +15,7 @@ | @@ -15,6 +15,7 @@ | ||
15 | <p style="display: none">{{ field }}</p> | 15 | <p style="display: none">{{ field }}</p> |
16 | <p>{{ queryModeFunc(model['queryMode']) }}</p> | 16 | <p>{{ queryModeFunc(model['queryMode']) }}</p> |
17 | <p>{{ orgFunc(model['organizationId']) }}</p> | 17 | <p>{{ orgFunc(model['organizationId']) }}</p> |
18 | + <p>{{ dataTypeFunc(model['dataType']) }}</p> | ||
18 | <Select | 19 | <Select |
19 | placeholder="请选择设备" | 20 | placeholder="请选择设备" |
20 | v-model:value="selectDevice" | 21 | v-model:value="selectDevice" |
@@ -83,12 +84,25 @@ | @@ -83,12 +84,25 @@ | ||
83 | const editDeviceAttr: any = ref([]); | 84 | const editDeviceAttr: any = ref([]); |
84 | const orgFuncId = ref(''); | 85 | const orgFuncId = ref(''); |
85 | const queryModeStr = ref(''); | 86 | const queryModeStr = ref(''); |
87 | + const dataTypeStr = ref(0); | ||
86 | const orgFunc = (e) => { | 88 | const orgFunc = (e) => { |
87 | orgFuncId.value = e; | 89 | orgFuncId.value = e; |
88 | }; | 90 | }; |
89 | const queryModeFunc = (e) => { | 91 | const queryModeFunc = (e) => { |
90 | queryModeStr.value = e; | 92 | queryModeStr.value = e; |
91 | }; | 93 | }; |
94 | + const dataTypeFunc = (e) => { | ||
95 | + dataTypeStr.value = e; | ||
96 | + }; | ||
97 | + watch( | ||
98 | + () => dataTypeStr.value, | ||
99 | + (newValue) => { | ||
100 | + if (newValue == 0) { | ||
101 | + setFieldsValue({ limit: 100 }); | ||
102 | + } else { | ||
103 | + } | ||
104 | + } | ||
105 | + ); | ||
92 | watch( | 106 | watch( |
93 | () => queryModeStr.value, | 107 | () => queryModeStr.value, |
94 | (newValue: string) => { | 108 | (newValue: string) => { |
@@ -207,7 +221,7 @@ | @@ -207,7 +221,7 @@ | ||
207 | endTs: editResData.data.queryCondition?.endTs, | 221 | endTs: editResData.data.queryCondition?.endTs, |
208 | way: editResData.data?.way, | 222 | way: editResData.data?.way, |
209 | queryMode: editResData.data.queryCondition?.queryMode === 0 ? 'latest' : 'timePeriod', | 223 | queryMode: editResData.data.queryCondition?.queryMode === 0 ? 'latest' : 'timePeriod', |
210 | - cronTime: editResData.data?.executeContent | 224 | + cronTime: editResData.data?.executeContent, |
211 | }); | 225 | }); |
212 | const endTsTime = editResData.data.queryCondition?.endTs; | 226 | const endTsTime = editResData.data.queryCondition?.endTs; |
213 | const startTsTime = editResData.data.queryCondition?.startTs; | 227 | const startTsTime = editResData.data.queryCondition?.startTs; |
@@ -357,7 +371,7 @@ | @@ -357,7 +371,7 @@ | ||
357 | return createMessage.error('请选择设备及其属性'); | 371 | return createMessage.error('请选择设备及其属性'); |
358 | } else { | 372 | } else { |
359 | getAttrDevice.value.forEach((f: any) => { | 373 | getAttrDevice.value.forEach((f: any) => { |
360 | - if (f.attributes == undefined) hasAttr = true; | 374 | + if (f.attributes == undefined || f.attributes.length == 0) hasAttr = true; |
361 | }); | 375 | }); |
362 | } | 376 | } |
363 | } else { | 377 | } else { |
@@ -365,7 +379,7 @@ | @@ -365,7 +379,7 @@ | ||
365 | return createMessage.error('请选择设备及其属性'); | 379 | return createMessage.error('请选择设备及其属性'); |
366 | } else { | 380 | } else { |
367 | getAttrDevice.value.forEach((f: any) => { | 381 | getAttrDevice.value.forEach((f: any) => { |
368 | - if (f.attributes == undefined) hasAttr = true; | 382 | + if (f.attributes == undefined || f.attributes.length == 0) hasAttr = true; |
369 | }); | 383 | }); |
370 | } | 384 | } |
371 | } | 385 | } |
@@ -379,8 +393,9 @@ | @@ -379,8 +393,9 @@ | ||
379 | startTs.value = moment().subtract(values.startTs, 'ms').valueOf(); | 393 | startTs.value = moment().subtract(values.startTs, 'ms').valueOf(); |
380 | endTs.value = Date.now(); | 394 | endTs.value = Date.now(); |
381 | } else { | 395 | } else { |
382 | - startTs.value = moment(values.startTs).valueOf(); | ||
383 | - endTs.value = moment(values.endTs).valueOf(); | 396 | + const fT = JSON.parse(JSON.stringify(values.dataRange)); |
397 | + startTs.value = moment(fT[0]).valueOf(); | ||
398 | + endTs.value = moment(fT[1]).valueOf(); | ||
384 | } | 399 | } |
385 | queryCondition = { | 400 | queryCondition = { |
386 | agg: values.agg, | 401 | agg: values.agg, |
@@ -394,12 +409,6 @@ | @@ -394,12 +409,6 @@ | ||
394 | }, | 409 | }, |
395 | queryMode: values?.queryMode === 'latest' ? 0 : 1, | 410 | queryMode: values?.queryMode === 'latest' ? 0 : 1, |
396 | }; | 411 | }; |
397 | - if (queryCondition.queryMode === 1) { | ||
398 | - if (queryCondition.startTs == queryCondition.endTs) { | ||
399 | - return createMessage.error('自定义周期时间不能选择一样'); | ||
400 | - } | ||
401 | - } | ||
402 | - | ||
403 | delete values.devices; | 412 | delete values.devices; |
404 | delete values.agg; | 413 | delete values.agg; |
405 | delete values.interval; | 414 | delete values.interval; |
@@ -379,15 +379,15 @@ export const formSchema: QFormSchema[] = [ | @@ -379,15 +379,15 @@ export const formSchema: QFormSchema[] = [ | ||
379 | { | 379 | { |
380 | field: 'limit', | 380 | field: 'limit', |
381 | required: true, | 381 | required: true, |
382 | - label: '最大值', | 382 | + label: '最大条数', |
383 | component: 'InputNumber', | 383 | component: 'InputNumber', |
384 | - defaultValue: 200, | 384 | + defaultValue: 100, |
385 | ifShow({ values }) { | 385 | ifShow({ values }) { |
386 | return values[SchemaFiled.AGG] === AggregateDataEnum.NONE; | 386 | return values[SchemaFiled.AGG] === AggregateDataEnum.NONE; |
387 | }, | 387 | }, |
388 | colProps: { span: 12 }, | 388 | colProps: { span: 12 }, |
389 | componentProps: { | 389 | componentProps: { |
390 | - placeholder: '请输入最大值', | 390 | + placeholder: '请输入最大条数', |
391 | min: 7, | 391 | min: 7, |
392 | max: 50000, | 392 | max: 50000, |
393 | }, | 393 | }, |
@@ -427,28 +427,35 @@ export const formSchema: QFormSchema[] = [ | @@ -427,28 +427,35 @@ export const formSchema: QFormSchema[] = [ | ||
427 | ifShow({ values }) { | 427 | ifShow({ values }) { |
428 | return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD && !isFixedTime(values.executeWay); | 428 | return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD && !isFixedTime(values.executeWay); |
429 | }, | 429 | }, |
430 | - componentProps({ formActionType }) { | ||
431 | - const { setFieldsValue } = formActionType; | ||
432 | - let dates: Moment[] = []; | ||
433 | - return { | ||
434 | - placeholder: ['请选择开始时间', '请选择结束时间'], | ||
435 | - showTime: true, | ||
436 | - onCalendarChange(value: Moment[]) { | ||
437 | - dates = value; | ||
438 | - }, | ||
439 | - disabledDate(current: Moment) { | ||
440 | - if (!dates || dates.length === 0 || !current) { | ||
441 | - return false; | ||
442 | - } | ||
443 | - const diffDate = current.diff(dates[0], 'years', true); | ||
444 | - return Math.abs(diffDate) > 1; | ||
445 | - }, | ||
446 | - onChange() { | ||
447 | - dates = []; | ||
448 | - setFieldsValue({ [SchemaFiled.INTERVAL]: null }); | ||
449 | - }, | ||
450 | - }; | 430 | + componentProps: { |
431 | + showTime: { | ||
432 | + defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')], | ||
433 | + }, | ||
451 | }, | 434 | }, |
435 | + // componentProps({ formActionType }) { | ||
436 | + // const { setFieldsValue } = formActionType; | ||
437 | + // let dates: Moment[] = []; | ||
438 | + // return { | ||
439 | + // placeholder: ['请选择开始时间', '请选择结束时间'], | ||
440 | + // showTime: { | ||
441 | + // defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')], | ||
442 | + // }, | ||
443 | + // // onCalendarChange(value: Moment[]) { | ||
444 | + // // dates = value; | ||
445 | + // // }, | ||
446 | + // // disabledDate(current: Moment) { | ||
447 | + // // if (!dates || dates.length === 0 || !current) { | ||
448 | + // // return false; | ||
449 | + // // } | ||
450 | + // // const diffDate = current.diff(dates[0], 'years', true); | ||
451 | + // // return Math.abs(diffDate) > 1; | ||
452 | + // // }, | ||
453 | + // onChange() { | ||
454 | + // dates = []; | ||
455 | + // setFieldsValue({ [SchemaFiled.INTERVAL]: null }); | ||
456 | + // }, | ||
457 | + // }; | ||
458 | + // }, | ||
452 | colProps: { | 459 | colProps: { |
453 | span: 10, | 460 | span: 10, |
454 | }, | 461 | }, |
@@ -29,7 +29,6 @@ | @@ -29,7 +29,6 @@ | ||
29 | <script lang="ts" setup> | 29 | <script lang="ts" setup> |
30 | import { reactive, UnwrapRef, watchEffect, ref } from 'vue'; | 30 | import { reactive, UnwrapRef, watchEffect, ref } from 'vue'; |
31 | import { propTypes } from '/@/utils/propTypes'; | 31 | import { propTypes } from '/@/utils/propTypes'; |
32 | - import { SelectTypes } from 'ant-design-vue/es/select'; | ||
33 | import { Select } from 'ant-design-vue'; | 32 | import { Select } from 'ant-design-vue'; |
34 | import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; | 33 | import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; |
35 | 34 | ||
@@ -42,16 +41,23 @@ | @@ -42,16 +41,23 @@ | ||
42 | value: propTypes.object.def({}), | 41 | value: propTypes.object.def({}), |
43 | orgId: propTypes.string.def(''), | 42 | orgId: propTypes.string.def(''), |
44 | }); | 43 | }); |
45 | - const selectOptions = ref<SelectTypes['options']>([]); | ||
46 | - //获取属性 | 44 | + const selectOptions: any = ref([]); |
45 | + //获取对应设备属性 | ||
47 | const getAttr = async (orgId, deviceId) => { | 46 | const getAttr = async (orgId, deviceId) => { |
48 | const res = await getAttribute(orgId, deviceId); | 47 | const res = await getAttribute(orgId, deviceId); |
49 | selectOptions.value = res.map((o) => { | 48 | selectOptions.value = res.map((o) => { |
50 | - return { | ||
51 | - label: o, | ||
52 | - value: o, | ||
53 | - }; | 49 | + let obj: any = {}; |
50 | + if (o !== null) { | ||
51 | + obj = { | ||
52 | + label: o, | ||
53 | + value: o, | ||
54 | + }; | ||
55 | + return obj; | ||
56 | + } | ||
54 | }); | 57 | }); |
58 | + //如果服务端返回的数组里含有null 过滤null值 | ||
59 | + const excludeNull = selectOptions.value.filter(Boolean); | ||
60 | + selectOptions.value = excludeNull; | ||
55 | }; | 61 | }; |
56 | //动态数据 | 62 | //动态数据 |
57 | const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] }); | 63 | const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] }); |
@@ -130,6 +130,14 @@ | @@ -130,6 +130,14 @@ | ||
130 | handleSuccess, | 130 | handleSuccess, |
131 | setProps | 131 | setProps |
132 | ); | 132 | ); |
133 | + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => { | ||
134 | + // Demo:status为1的选择框禁用 | ||
135 | + if (record.status === 1) { | ||
136 | + return { disabled: true }; | ||
137 | + } else { | ||
138 | + return { disabled: false }; | ||
139 | + } | ||
140 | + }; | ||
133 | 141 | ||
134 | nextTick(() => { | 142 | nextTick(() => { |
135 | setProps(selectionOptions); | 143 | setProps(selectionOptions); |
@@ -9,15 +9,25 @@ | @@ -9,15 +9,25 @@ | ||
9 | title="报表趋势图" | 9 | title="报表趋势图" |
10 | :showOkBtn="false" | 10 | :showOkBtn="false" |
11 | > | 11 | > |
12 | - <div class="wrapper"> | ||
13 | - <div v-if="initChartData.length > 0"> | ||
14 | - <div class="inner item" v-for="(item, index) in initChartData" :key="index"> | 12 | + <div :class="[initChartData.length % 2 !== 0 ? '' : 'wrapper']"> |
13 | + <div | ||
14 | + v-if="initChartData.length > 0" | ||
15 | + :class="[initChartData.length % 2 !== 0 ? '' : 'chart-style']" | ||
16 | + > | ||
17 | + <div | ||
18 | + :class="[ | ||
19 | + initChartData.length % 2 !== 0 ? '' : 'inner', | ||
20 | + initChartData.length % 2 !== 0 ? '' : 'item', | ||
21 | + ]" | ||
22 | + v-for="(item, index) in initChartData" | ||
23 | + :key="index" | ||
24 | + > | ||
15 | <p style="display: none">{{ item }}</p> | 25 | <p style="display: none">{{ item }}</p> |
16 | <div :id="`chart${index}`" :style="{ height, width }"></div> | 26 | <div :id="`chart${index}`" :style="{ height, width }"></div> |
17 | </div> | 27 | </div> |
18 | </div> | 28 | </div> |
19 | <div v-else style="display: flex; justify-content: center; align-items: center"> | 29 | <div v-else style="display: flex; justify-content: center; align-items: center"> |
20 | - <div style="position: relative; left: 13rem; top: 8rem">暂无数据</div> | 30 | + <div style="position: relative; left: 0rem; top: 3rem">暂无数据</div> |
21 | </div> | 31 | </div> |
22 | </div> | 32 | </div> |
23 | </BasicModal> | 33 | </BasicModal> |
@@ -110,18 +120,19 @@ | @@ -110,18 +120,19 @@ | ||
110 | }, | 120 | }, |
111 | toolbox: {}, | 121 | toolbox: {}, |
112 | grid: { | 122 | grid: { |
113 | - left: '3%', | ||
114 | - right: '4%', | ||
115 | - bottom: '3%', | 123 | + left: '8%', |
124 | + right: '8%', | ||
125 | + bottom: '12%', | ||
116 | containLabel: true, | 126 | containLabel: true, |
117 | }, | 127 | }, |
118 | dataZoom: [ | 128 | dataZoom: [ |
119 | { | 129 | { |
120 | type: 'slider', | 130 | type: 'slider', |
121 | show: true, | 131 | show: true, |
122 | - start: 0, | ||
123 | - end: 30, | ||
124 | - xAxisIndex: [0], | 132 | + startValue: 0, |
133 | + endValue: 5, | ||
134 | + height: '30', | ||
135 | + bottom: '4%', | ||
125 | }, | 136 | }, |
126 | ], | 137 | ], |
127 | xAxis: { | 138 | xAxis: { |
@@ -130,9 +141,19 @@ | @@ -130,9 +141,19 @@ | ||
130 | boundaryGap: false, | 141 | boundaryGap: false, |
131 | axisPointer: { type: 'shadow' }, | 142 | axisPointer: { type: 'shadow' }, |
132 | axisLabel: { | 143 | axisLabel: { |
133 | - color: '#333', | 144 | + interval: 0, |
145 | + rotate: 65, | ||
146 | + textStyle: { | ||
147 | + color: '#000', | ||
148 | + fontSize: 10, | ||
149 | + }, | ||
150 | + }, | ||
151 | + axisLine: { | ||
152 | + show: true, | ||
134 | interval: 0, | 153 | interval: 0, |
135 | - rotate: 90, | 154 | + lineStyle: { |
155 | + color: 'RGB(210,221,217)', | ||
156 | + }, | ||
136 | }, | 157 | }, |
137 | }, | 158 | }, |
138 | yAxis: { | 159 | yAxis: { |
@@ -155,4 +176,11 @@ | @@ -155,4 +176,11 @@ | ||
155 | </script> | 176 | </script> |
156 | <style lang="less" scoped> | 177 | <style lang="less" scoped> |
157 | @import url('./ReportPreviewModal.less'); | 178 | @import url('./ReportPreviewModal.less'); |
179 | + .chart-style { | ||
180 | + display: flex; | ||
181 | + flex-wrap: wrap; | ||
182 | + width: 825px; | ||
183 | + margin-top: 10px; | ||
184 | + justify-content: space-between; | ||
185 | + } | ||
158 | </style> | 186 | </style> |
@@ -133,6 +133,14 @@ | @@ -133,6 +133,14 @@ | ||
133 | handleSuccess, | 133 | handleSuccess, |
134 | setProps | 134 | setProps |
135 | ); | 135 | ); |
136 | + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => { | ||
137 | + // Demo:status为1的选择框禁用 | ||
138 | + if (record.status === 1) { | ||
139 | + return { disabled: true }; | ||
140 | + } else { | ||
141 | + return { disabled: false }; | ||
142 | + } | ||
143 | + }; | ||
136 | 144 | ||
137 | nextTick(() => { | 145 | nextTick(() => { |
138 | setProps(selectionOptions); | 146 | setProps(selectionOptions); |