From aed4ff0718a83328a50e5f80a73161c37776007d Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 25 Mar 2025 17:08:38 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E3=80=91IoT:=20=E4=BA=A7=E5=93=81=E7=89=A9=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=20TSL=20=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot/thingmodel/ThingModelTSL.vue | 49 ++++++++++++++++++++++
 src/views/iot/thingmodel/index.vue         | 10 +++++
 2 files changed, 59 insertions(+)
 create mode 100644 src/views/iot/thingmodel/ThingModelTSL.vue

diff --git a/src/views/iot/thingmodel/ThingModelTSL.vue b/src/views/iot/thingmodel/ThingModelTSL.vue
new file mode 100644
index 000000000..aceed4570
--- /dev/null
+++ b/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>
diff --git a/src/views/iot/thingmodel/index.vue b/src/views/iot/thingmodel/index.vue
index 9ddd449af..74aec6fec 100644
--- a/src/views/iot/thingmodel/index.vue
+++ b/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 {