pms-iot-vue/src/views/pms/modeltemplate/detail/components/DataDefinition.vue

<template>
  <!-- 属性 -->
    <!-- 非列表型：数值 -->
    <div
      v-if="
        [DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
          data.selectOptions.type
        )
      "
    >
      取值范围：{{ `${data.selectOptions.dataSpecs.min}~${data.selectOptions.dataSpecs.max}` }}
    </div>
    <!-- 非列表型：文本 -->
    <div v-if="DataSpecsDataType.TEXT === data.selectOptions.type">
      数据长度：{{ data.selectOptions.dataSpecs.length }}
    </div>
    <!-- 列表型: 数组、结构、时间（特殊） -->
    <div
      v-if="
        [DataSpecsDataType.ARRAY, DataSpecsDataType.STRUCT, DataSpecsDataType.DATE].includes(
          data.selectOptions.type
        )
      "
    >
      -
    </div>
    <!-- 列表型: 布尔值、枚举 -->
    <div v-if="[DataSpecsDataType.BOOL, DataSpecsDataType.ENUM].includes(data.selectOptions.type)">
      <div> {{ DataSpecsDataType.BOOL === data.selectOptions.dataType ? '布尔值' : '枚举值' }}：</div>
      <div v-for="item in data.selectOptions.dataSpecsList" :key="item.value">
        {{ `${item.name}-${item.value}` }}
      </div>
    </div>
</template>

<script lang="ts" setup>
import {
  DataSpecsDataType,
} from '@/views/pms/devicetemplate/detail/attrsModel/config'
import { DeviceAttrModelData } from '@/api/pms/modelattrtemplate'

/** 数据定义展示组件 */
defineOptions({ name: 'DataDefinition' })

defineProps<{ data: DeviceAttrModelData }>()
</script>

<style lang="scss" scoped></style>