【功能新增】IoT: 产品物模型 TSL 展示

src/views/iot/thingmodel/ThingModelTSL.vue

@@ -0,0 +1,49 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-scrollbar height="600px">
+      <pre><code v-dompurify-html="highlightedCode()" class="hljs"></code></pre>
+    </el-scrollbar>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import hljs from 'highlight.js' // 导入代码高亮文件
+import 'highlight.js/styles/github.css' // 导入代码高亮样式
+import json from 'highlight.js/lib/languages/json'
+import { ThingModelApi } from '@/api/iot/thingmodel'
+import { ProductVO } from '@/api/iot/product/product'
+import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
+
+defineOptions({ name: 'ThingModelTSL' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('物模型 TSL') // 弹窗的标题
+const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
+/** 打开弹窗 */
+const open = () => {
+  dialogVisible.value = true
+}
+defineExpose({ open })
+
+const thingModelTSL = ref('')
+/** 获取 TSL */
+const getTsl = async () => {
+  const res = await ThingModelApi.getThingModelTSLByProductId(product?.value?.id || 0)
+  thingModelTSL.value = JSON.stringify(res, null, 2)
+}
+
+/**
+ * 代码高亮
+ */
+const highlightedCode = () => {
+  const result = hljs.highlight('json', thingModelTSL.value, true)
+  return result.value || '&nbsp;'
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  // 注册代码高亮的各种语言
+  hljs.registerLanguage('json', json)
+  await getTsl()
+})
+</script>

src/views/iot/thingmodel/index.vue

@@ -42,6 +42,9 @@
           <Icon class="mr-5px" icon="ep:plus" />
           添加功能
         </el-button>
+        <el-button v-hasPermi="[`iot:thing-model:query`]" plain type="primary" @click="openTSL">
+          TSL
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -99,6 +102,7 @@
   </ContentWrap>
   <!-- 表单弹窗：添加/修改 -->
   <ThingModelForm ref="formRef" @success="getList" />
+  <ThingModelTSL ref="thingModelTSLRef" />
 </template>
 <script lang="ts" setup>
 import { ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
@@ -160,6 +164,12 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 展示物模型 TSL */
+const thingModelTSLRef = ref()
+const openTSL = () => {
+  thingModelTSLRef.value?.open()
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {