pms 设备属性模板详情 属性列表

src/router/modules/remaining.ts

@@ -73,7 +73,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
   {
     path: '/deviceattrstemplate',
     component: Layout,
-    name: 'DeviceAttrsTemplate',
+    name: 'DeviceAttrsCenter',
     meta: {
       hidden: true
     },

src/views/pms/devicetemplate/detail/TemplateDetailsHeader.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="flex items-start justify-between">
+      <div>
+        <el-col>
+          <el-row>
+            <span class="text-xl font-bold">{{ template.name }}</span>
+          </el-row>
+        </el-col>
+      </div>
+      <div>
+        <!-- 右上：按钮 -->
+      </div>
+    </div>
+  </div>
+  <ContentWrap class="mt-10px">
+    <el-descriptions :column="5" direction="horizontal">
+      <el-descriptions-item label="设备编码：">
+        {{ template.code }}
+      </el-descriptions-item>
+      <el-descriptions-item label="备注：">
+        {{ template.remark }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import * as DeviceTemplateApi from '@/api/pms/devicetemplate'
+
+const message = useMessage()
+
+const { template } = defineProps<{ template: DeviceTemplateApi.DeviceAttrTemplateVO }>() // 定义 Props
+
+</script>

src/views/pms/devicetemplate/detail/attrsModel/ThingModelForm.vue → src/views/pms/devicetemplate/detail/attrsModel/AttrTemplateModelForm.vue

@@ -57,9 +57,7 @@
 
 <script lang="ts" setup>
 import { ProductVO } from '@/api/iot/product/product'
-import ThingModelProperty from './ThingModelProperty.vue'
-import ThingModelService from './ThingModelService.vue'
-import ThingModelEvent from './ThingModelEvent.vue'
+import ThingModelProperty from './AttrTemplateModelProperty.vue'
 import { ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
 import { DataSpecsDataType, ThingModelFormRules, ThingModelType } from './config'
@@ -68,7 +66,7 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { isEmpty } from '@/utils/is'
 
 /** IoT 物模型数据表单 */
-defineOptions({ name: 'IoTThingModelForm' })
+defineOptions({ name: 'AttrTemplateModelForm' })
 
 const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
 

src/views/pms/devicetemplate/detail/attrsModel/ThingModelProperty.vue → src/views/pms/devicetemplate/detail/attrsModel/AttrTemplateModelProperty.vue

@@ -101,12 +101,12 @@ import {
   ThingModelEnumDataSpecs,
   ThingModelNumberDataSpecs,
   ThingModelStructDataSpecs
-} from './dataSpecs'
+} from '../dataSpecs'
 import { ThingModelProperty } from '@/api/iot/thingmodel'
 import { isEmpty } from '@/utils/is'
 
-/** IoT 物模型属性 */
-defineOptions({ name: 'ThingModelProperty' })
+/** 设备属性模板 属性 */
+defineOptions({ name: 'AttrTemplateModelProperty' })
 
 const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean; isParams?: boolean }>()
 const emits = defineEmits(['update:modelValue'])

src/views/pms/devicetemplate/detail/attrsModel/index.vue

@@ -9,21 +9,6 @@
       class="-mb-15px"
       label-width="68px"
     >
-      <el-form-item label="功能类型" prop="name">
-        <el-select
-          v-model="queryParams.type"
-          class="!w-240px"
-          clearable
-          placeholder="请选择功能类型"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery">
           <Icon class="mr-5px" icon="ep:search" />
@@ -103,13 +88,13 @@
 <script lang="ts" setup>
 import { ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import ThingModelForm from './ThingModelForm.vue'
+import ThingModelForm from './AttrTemplateModelForm.vue'
 import { ProductVO } from '@/api/iot/product/product'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
 import { getDataTypeOptionsLabel } from './config'
-import { DataDefinition } from './components'
+import { DataDefinition } from '../components'
 
-defineOptions({ name: 'IoTThingModel' })
+defineOptions({ name: 'DeviceAttrTemplateModel' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗

src/views/pms/devicetemplate/detail/dataSpecs/ThingModelStructDataSpecs.vue

@@ -48,7 +48,7 @@
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
-import ThingModelProperty from '../ThingModelProperty.vue'
+import ThingModelProperty from '../attrsModel/AttrTemplateModelProperty.vue'
 import { DataSpecsDataType, ThingModelFormRules } from '../attrsModel/config'
 import { isEmpty } from '@/utils/is'
 

src/views/pms/devicetemplate/detail/index.vue

@@ -1,28 +1,17 @@
 <template>
-  <ProductDetailsHeader :loading="loading" :product="product" @refresh="() => getProductData(id)" />
+  <TemplateDetailsHeader :loading="loading" :template="template" @refresh="() => getTemplateData(id)" />
   <el-col>
     <el-tabs v-model="activeTab">
-      <el-tab-pane label="产品信息" name="info">
-        <ProductDetailsInfo v-if="activeTab === 'info'" :product="product" />
+      <el-tab-pane label="属性模板" lazy name="attrModel">
+        <DeviceAttrTemplateModel ref="attrModelRef" />
       </el-tab-pane>
-      <el-tab-pane label="Topic 类列表" name="topic">
-        <ProductTopic v-if="activeTab === 'topic'" :product="product" />
-      </el-tab-pane>
-      <el-tab-pane label="功能定义" lazy name="thingModel">
-        <IoTProductThingModel ref="thingModelRef" />
-      </el-tab-pane>
-      <el-tab-pane label="消息解析" name="message" />
-      <el-tab-pane label="服务端订阅" name="subscription" />
     </el-tabs>
   </el-col>
 </template>
 <script lang="ts" setup>
-import { ProductApi, ProductVO } from '@/api/iot/product/product'
-import { DeviceApi } from '@/api/iot/device/device'
-import ProductDetailsHeader from './ProductDetailsHeader.vue'
-import ProductDetailsInfo from './ProductDetailsInfo.vue'
-import ProductTopic from './ProductTopic.vue'
-import IoTProductThingModel from '@/views/iot/thingmodel/index.vue'
+import * as DeviceTemplateApi from '@/api/pms/devicetemplate'
+import TemplateDetailsHeader from './TemplateDetailsHeader.vue'
+import DeviceAttrTemplateModel from '@/views/pms/devicetemplate/detail/attrsModel/index.vue'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useRouter } from 'vue-router'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
@@ -36,47 +25,33 @@ const route = useRoute()
 const message = useMessage()
 const id = route.params.id // 编号
 const loading = ref(true) // 加载中
-const product = ref<ProductVO>({} as ProductVO) // 详情
-const activeTab = ref('info') // 默认为 info 标签页
+const template = ref<DeviceTemplateApi.DeviceAttrTemplateVO>({} as DeviceTemplateApi.DeviceAttrTemplateVO) // 模板详情
+const activeTab = ref('attrModel') // 默认为 属性列表 标签页
 
-provide(IOT_PROVIDE_KEY.PRODUCT, product) // 提供产品信息给产品信息详情页的所有子组件
+// provide(IOT_PROVIDE_KEY.PRODUCT, product) // 提供产品信息给产品信息详情页的所有子组件
 
-/** 获取详情 */
-const getProductData = async (id: number) => {
+/** 获取 设备属性模板 详情 */
+const getTemplateData = async (id: number) => {
   loading.value = true
   try {
-    product.value = await ProductApi.getProduct(id)
+    template.value = await DeviceTemplateApi.getDeviceTemplate(id)
   } finally {
     loading.value = false
   }
 }
 
-/** 查询设备数量 */
-const getDeviceCount = async (productId: number) => {
-  try {
-    return await DeviceApi.getDeviceCount(productId)
-  } catch (error) {
-    console.error('Error fetching device count:', error, 'productId:', productId)
-    return 0
-  }
-}
-
 /** 初始化 */
 onMounted(async () => {
   if (!id) {
-    message.warning('参数错误，产品不能为空！')
+    message.warning('参数错误，设备属性模板不能为空！')
     delView(unref(currentRoute))
     return
   }
-  await getProductData(id)
+  await getTemplateData(id)
   // 处理 tab 参数
   const { tab } = route.query
   if (tab) {
     activeTab.value = tab as string
   }
-  // 查询设备数量
-  if (product.value.id) {
-    product.value.deviceCount = await getDeviceCount(product.value.id)
-  }
 })
 </script>

src/views/pms/devicetemplate/index.vue

@@ -241,7 +241,6 @@ const openForm = (type: string, id?: number) => {
 
 /** 打开详情 */
 const openDetail = (id: number) => {
-  debugger
   push({ name: 'DeviceAttrTemplateDetail', params: { id } })
 }