0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复物模型-功能详情

This commit is contained in:
XieYongHong 2023-07-04 18:19:33 +08:00
parent aaa8c1498f
commit 0d6e9d8ae8
11 changed files with 283 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/PermissionButton/index.vue
View File

@ -84,7 +84,7 @@ const props = defineProps({
type: Object as PropType<PopconfirmProps>,
},
hasPermission: {
type: String || Array || Boolean,
type: [String , Array, Boolean],
},
style: {
type: Object as PropType<CSSProperties>

15
src/views/device/components/Metadata/Base/Base.vue
View File

@ -176,6 +176,16 @@
:data="detailData.data"
@cancel="cancelDetailModal"
/>
<FunctionModal
v-else-if="type === 'functions' && detailData.visible"
:data="detailData.data"
@cancel="cancelDetailModal"
/>
<EventModal
v-else-if="type === 'events' && detailData.visible"
:data="detailData.data"
@cancel="cancelDetailModal"
/>
</template>
<script setup lang="ts" name="BaseMetadata">
@ -200,7 +210,7 @@ import { DeviceInstance } from '@/views/device/Instance/typings';
import { onlyMessage } from '@/utils/comm';
import {omit} from "lodash-es";
import {useAction} from "@/views/device/components/Metadata/Base/hooks/useAction";
import { PropertiesModal } from './DetailModal'
import { PropertiesModal, FunctionModal, EventModal } from './DetailModal'
const props = defineProps({
// target: {
@ -333,7 +343,7 @@ const handleAddClick = (_data?: any, index?: number) => {
const copyItem = (record: any, index: number) => {
const copyData = omit(record, ['_uuid'])
copyData.id = `copy_${copyData.id}`
copyData.id = `copy_${copyData.id}`.slice(0,64)
handleAddClick(copyData, index)
}
@ -390,6 +400,7 @@ const handleSaveClick = async () => {
const _data = updateMetadata(props.type!, arr, _detail, updateStore)
const result = await asyncUpdateMetadata(target, _data)
if(result.success) {
dataSource.value = resp
onlyMessage('操作成功！')
}
}

87
src/views/device/components/Metadata/Base/DetailModal/EventModal.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<j-modal
visible
title="事件详情"
width="650px"
@cancel="cancel"
@ok="ok"
>
<j-descriptions
:column="1"
:labelStyle="{
width: '72px',
textAlign: 'right',
justifyContent: 'end'
}"
>
<a-descriptions-item label="事件标识">{{ data.id }}</a-descriptions-item>
<a-descriptions-item label="事件名称">{{ data.name }}</a-descriptions-item>
<a-descriptions-item label="事件级别">{{ EventLevel[data.expands.level] }}</a-descriptions-item>
<a-descriptions-item label="输出参数"></a-descriptions-item>
<a-descriptions-item>
<j-table
:columns="dataTypeTable.columns"
:dataSource="dataTypeTable.dataSource"
:pagination="false"
:scroll="{y: 200}"
size="small"
>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'type'">
{{ record.valueType?.type }}
</template>
<template v-if="column.dataIndex === 'valueType'">
<OtherConfigInfo :value="record.valueType" />
</template>
</template>
</j-table>
</a-descriptions-item>
</j-descriptions>
<template #footer>
<j-button type="primary" @click="ok">确认</j-button>
</template>
</j-modal>
</template>
<script setup lang="ts" name="EventModal">
import {OtherConfigInfo} from "@/views/device/components/Metadata/Base/components";
const props = defineProps({
data: {
type: Object,
default: () => ({})
}
})
const EventLevel = {
ordinary: '普通',
warn: '警告',
urgent: '紧急'
}
const dataTypeTable = reactive<{ columns: any[], dataSource: any }>({
columns: [
{ title: '参数标识', dataIndex: 'id', width: 150, ellipsis: true },
{ title: '参数名称', dataIndex: 'name', width: 150, ellipsis: true },
{ title: '数据类型', dataIndex: 'type', width: 100 },
{ title: '其它配置', dataIndex: 'valueType', ellipsis: true },
],
dataSource: props.data?.valueType?.properties || []
})
const emit = defineEmits(['cancel'])
const cancel = () => {
emit('cancel')
}
const ok = () => {
cancel()
}
</script>
<style scoped>
</style>

81
src/views/device/components/Metadata/Base/DetailModal/FunctionModal.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<j-modal
visible
title="功能详情"
width="650px"
@cancel="cancel"
@ok="ok"
>
<j-descriptions
:column="1"
:labelStyle="{
width: '72px',
textAlign: 'right',
justifyContent: 'end'
}"
>
<a-descriptions-item label="功能标识">{{ data.id }}</a-descriptions-item>
<a-descriptions-item label="功能名称">{{ data.name }}</a-descriptions-item>
<a-descriptions-item label="是否异步">{{ data.async ? '是' : '否' }}</a-descriptions-item>
<a-descriptions-item label="输入参数"></a-descriptions-item>
<a-descriptions-item>
<j-table
:columns="dataTypeTable.columns"
:dataSource="dataTypeTable.dataSource"
:pagination="false"
:scroll="{y: 200}"
size="small"
>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'type'">
{{ record.valueType?.type }}
</template>
<template v-if="column.dataIndex === 'valueType'">
<OtherConfigInfo :value="record.valueType" />
</template>
</template>
</j-table>
</a-descriptions-item>
</j-descriptions>
<template #footer>
<j-button type="primary" @click="ok">确认</j-button>
</template>
</j-modal>
</template>
<script setup lang="ts" name="FunctionModal">
import {OtherConfigInfo} from "@/views/device/components/Metadata/Base/components";
const props = defineProps({
data: {
type: Object,
default: () => ({})
}
})
const dataTypeTable = reactive<{ columns: any[], dataSource: any }>({
columns: [
{ title: '参数标识', dataIndex: 'id', width: 120, ellipsis: true },
{ title: '参数名称', dataIndex: 'name', width: 120, ellipsis: true },
{ title: '数据类型', dataIndex: 'type', width: 100 },
{ title: '其它配置', dataIndex: 'valueType', ellipsis: true },
],
dataSource: props.data?.inputs || []
})
const emit = defineEmits(['cancel'])
const cancel = () => {
emit('cancel')
}
const ok = () => {
cancel()
}
</script>
<style scoped>
</style>

99
src/views/device/components/Metadata/Base/DetailModal/PropertiesModal.vue
View File

@ -5,7 +5,7 @@
@cancel="cancel"
@ok="ok"
>
<a-descriptions
<j-descriptions
:column="1"
:labelStyle="{
width: '72px',
@ -16,23 +16,58 @@
<a-descriptions-item label="属性标识">{{ data.id }}</a-descriptions-item>
<a-descriptions-item label="属性名称">{{ data.name }}</a-descriptions-item>
<a-descriptions-item label="属性类型">{{ data.valueType.type }}</a-descriptions-item>
<!-- <j-table-->
<!-- :paging="false"-->
<!-- >-->
<!-- </j-table>-->
<a-descriptions-item v-if="['int', 'long', 'float', 'double'].includes(data.valueType.type)" label="单位">{{ data.valueType?.unit }}</a-descriptions-item>
<a-descriptions-item v-if="['float', 'double'].includes(data.valueType.type)" label="精度">{{ data.valueType?.scale }}</a-descriptions-item>
<a-descriptions-item v-if="['string', 'password'].includes(data.valueType.type)" label="最大长度">{{ data.valueType?.maxLength }}</a-descriptions-item>
<a-descriptions-item v-if="data.valueType.type === 'file'" label="文件类型">{{ data.valueType?.fileType }}</a-descriptions-item>
<a-descriptions-item v-if="data.valueType.type === 'date'" label="格式">{{ data.valueType?.format }}</a-descriptions-item>
<a-descriptions-item
v-if="
['enum', 'object', 'boolean'].includes(data.valueType.type) ||
(data.valueType.type === 'array' && data.valueType.elementType === 'enum')
"
>
<j-table
:columns="dataTypeTable.columns"
:dataSource="dataTypeTable.dataSource"
:pagination="false"
size="small"
>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'type'">
{{ record.valueType?.type }}
</template>
<template v-if="column.dataIndex === 'valueType'">
<OtherConfigInfo :value="record.valueType" />
</template>
</template>
</j-table>
</a-descriptions-item>
<a-descriptions-item label="来源">
{{ sourceMap[data.expands.source] }}
</a-descriptions-item>
<a-descriptions-item label="读写类型">{{ readTypeText }}</a-descriptions-item>
<a-descriptions-item v-if="showSetting" label="存储方式">{{ data.id }}</a-descriptions-item>
<a-descriptions-item v-if="showMetrics" label="指标配置">{{ data.id }}</a-descriptions-item>
</a-descriptions>
<a-descriptions-item v-if="showMetrics" label="指标配置"></a-descriptions-item>
<a-descriptions-item v-if="showMetrics">
<j-table
:columns="metrics.columns"
:dataSource="metrics.dataSource"
:pagination="false"
size="small"
>
</j-table>
</a-descriptions-item>
</j-descriptions>
<template #footer>
<j-button type="primary" @click="ok">确认</j-button>
</template>
</j-modal>
</template>
<script setup lang="ts" name="PropertiesModal">
import {OtherConfigInfo} from "@/views/device/components/Metadata/Base/components";
import {omit} from "lodash-es";
import {watch} from "vue";
@ -61,13 +96,26 @@ const readTypeText = computed(() => {
return props.data?.expands?.type?.map?.((key: string) => type[key]).join('、')
})
const dataTypeTable = reactive({
const dataTypeTable = reactive<{ columns: any[], dataSource: any }>({
columns: [],
dataSource: []
})
const metrics = reactive<{ columns: any[], dataSource: any }>({
columns: [
{ title: '指标标识', dataIndex: 'id' },
{ title: '指标名称', dataIndex: 'name' },
{ title: '指标治', dataIndex: 'value' },
],
dataSource: []
})
const showMetrics = computed(() => {
return props.data?.expands?.metrics?.length
const show = props.data?.expands?.metrics?.length
if (show) {
metrics.dataSource = props.data?.expands?.metrics
}
return show
})
const showSetting = computed(() => {
@ -75,10 +123,35 @@ const showSetting = computed(() => {
return Object.values(setting).length
})
watch(() => props.data.valueType.type, () => {
const settingValue = computed(() => {
console.log(showSetting.value)
return ''
})
const handleDataTable = (type: string) => {
switch (type) {
case 'enum':
dataTypeTable.columns = [
{ title: 'Value', dataIndex: 'value'},
{ title: 'Text', dataIndex: 'text'},
]
dataTypeTable.dataSource = [{ unit: props.data.valueType?.unit }]
break;
case 'object':
dataTypeTable.columns = [
{ title: '标识', dataIndex: 'id', width: 50},
{ title: '名称', dataIndex: 'name'},
{ title: '名称', dataIndex: 'name'},
]
dataTypeTable.dataSource = [{ unit: props.data.valueType?.unit, scale: props.data.valueType?.scale }]
break;
}
}
watch(() => props.data.valueType.type, () => {
handleDataTable(props.data.valueType.type === 'array' ? props.data.valueType.elementType : props.data.valueType.type)
}, { immediate: true })
const cancel = () => {
emit('cancel')
}

4
src/views/device/components/Metadata/Base/DetailModal/index.ts
View File

@ -1 +1,3 @@
export { default as PropertiesModal } from './PropertiesModal.vue'
export { default as PropertiesModal } from './PropertiesModal.vue'
export { default as FunctionModal } from './FunctionModal.vue'
export { default as EventModal } from './EventModal.vue'

3
src/views/device/components/Metadata/Base/columns.tsx
View File

@ -11,6 +11,7 @@ interface DataTableColumnProps extends ColumnProps {
}
form?: {
rules: any[]
[key: string]: any
},
options?: any[]
}
@ -56,7 +57,6 @@ const EventColumns: DataTableColumnProps[] = BaseColumns.concat([
{
title: '输出参数',
dataIndex: 'outInput',
type: 'components',
},
{
title: '配置参数',
@ -144,6 +144,7 @@ const PropertyColumns: DataTableColumnProps[] = BaseColumns.concat([
name: Source
},
form: {
required: true,
rules: [
{
validator: async (_: Record<string, any>, value: any) => {

6
src/views/device/components/Metadata/Base/components/DataType.vue
View File

@ -6,6 +6,7 @@
<DataTableArray
v-if="type === 'array'"
v-model:value="_valueType.elementType"
:unitOptions="options"
@confirm="valueChange"
/>
<DataTableObject
@ -14,6 +15,7 @@
:columns="[
{ title: '参数标识', dataIndex: 'id', type: 'text', width: 100 },
{ title: '参数名称', dataIndex: 'name', type: 'text', width: 100 },
{ title: '填写约束', dataIndex: 'required', type: 'booleanSelect', width: 100, components: { props: { tureTitle: '必填', falseTitle: '不必填' }} },
{
title: '数据类型',
type: 'components',
@ -111,6 +113,10 @@ const typeChange = (e: string) => {
};
const valueChange = () => {
console.log({
...props.value,
valueType: {...(_valueType.value || {}), type: type.value},
})
emit('update:value', {
...props.value,
valueType: {...(_valueType.value || {}), type: type.value},

2
src/views/device/components/Metadata/Base/components/Events/OtherConfigInfo.vue
View File

@ -3,7 +3,7 @@
<div class="values-text" v-else-if="value.type == 'boolean'">{{ value.trueText }}-{{ value.trueValue }}; {{ value.falseText }}-{{ value.falseValue }}</div>
<div class="values-text" v-else-if="['string', 'password'].includes(value.type)">{{ value.expands?.maxLength }}</div>
<div class="values-text" v-else-if="value.type == 'date'">{{ value.date }}</div>
<div class="values-text" v-else-if="value.type == 'enum'">{{ value.elements?.map((item) => item.text).join(',') }}</div>
<div class="values-text" v-else-if="value.type == 'enum'">{{ value.elements?.map((item) => item.text).join(';') }}</div>
<div class="values-text" v-else-if="['int', 'long'].includes(value.type)">无</div>
</template>

1
src/views/device/components/Metadata/Base/components/Source.vue
View File

@ -113,6 +113,7 @@ const confirm = async () => {
...data,
},
};
console.log(obj)
emit('update:value', obj);
resolve(true);
} else {

4
yarn.lock
View File

@ -3825,8 +3825,8 @@ jetlinks-store@^0.0.3:
jetlinks-ui-components@^1.0.24:
version "1.0.24"
resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#ca6ce161bc1ee4d0f6ecaa27a5dbc337b7405b4c"
integrity sha512-FILHvwT5ndedwRuL1vxqpj6X+0P/MIfegWRoz46hdjpJvnWbhfTHIJ+5bvLH49Bgh8RJ9khXXevYO073NSlyUw==
resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#003c3763daad1722543e6a8c8df0fc620a8122d1"
integrity sha512-GmtuxQKg6+6V/B/AmKhuDNfUhfdBMvoOg5Nm/q9XSYsMYpODzn+noqqYrNV0QLWFCGNccM2k1fojaAkirRT2yw==
dependencies:
"@vueuse/core" "^9.12.0"
"@vueuse/router" "^9.13.0"