54afd4555d
1.修复物模型列表无限加载的问题 2.修复物模型管理页面添加，TSL，编辑，删除，功能类型选项功能不用问题 3.修复TSL按钮物模型接口没有的问题 4.修复物模型新增编辑页面的属性不能正常编辑修改问题美化显示 iot设备管理问题 1.修复新增编辑页面缺少字段相关组件 2.修复设备详情中子页面不显示问题 3.修复设备详情子页面物模型数据页面不显示问题 4.修复模拟设备右侧不显示问题 右侧溢出，改为上下分栏 Signed-off-by: Administrator <425053404@qq.com>
118 lines
3.1 KiB
Vue
118 lines
3.1 KiB
Vue
<script setup lang="ts">
|
||
import type { Ref } from 'vue';
|
||
|
||
import type { IotProductApi } from '#/api/iot/product/product';
|
||
|
||
import { computed, inject, ref, watch } from 'vue';
|
||
|
||
import { Modal, Radio, Textarea } from 'ant-design-vue';
|
||
|
||
import { getThingModelTSL } from '#/api/iot/thingmodel';
|
||
import { IOT_PROVIDE_KEY } from '#/views/iot/utils/constants';
|
||
|
||
defineOptions({ name: 'ThingModelTSL' });
|
||
|
||
const dialogVisible = ref(false); // 弹窗的是否展示
|
||
const dialogTitle = ref('物模型 TSL'); // 弹窗的标题
|
||
const product = inject<Ref<IotProductApi.Product>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品信息
|
||
const viewMode = ref('view'); // 查看模式：view-代码视图，editor-编辑器视图
|
||
|
||
/** 打开弹窗 */
|
||
const open = async () => {
|
||
dialogVisible.value = true;
|
||
await getTsl();
|
||
};
|
||
defineExpose({ open });
|
||
|
||
/** 获取 TSL */
|
||
const thingModelTSL = ref<any>({});
|
||
const tslString = ref(''); // 用于编辑器的字符串格式
|
||
|
||
const getTsl = async () => {
|
||
try {
|
||
thingModelTSL.value = await getThingModelTSL(product?.value?.id || 0);
|
||
// 将对象转换为格式化的 JSON 字符串
|
||
tslString.value = JSON.stringify(thingModelTSL.value, null, 2);
|
||
} catch (error) {
|
||
console.error('获取 TSL 失败:', error);
|
||
thingModelTSL.value = {};
|
||
tslString.value = '{}';
|
||
}
|
||
};
|
||
|
||
/** 格式化的 TSL 用于只读展示 */
|
||
const formattedTSL = computed(() => {
|
||
try {
|
||
if (typeof thingModelTSL.value === 'string') {
|
||
return JSON.stringify(JSON.parse(thingModelTSL.value), null, 2);
|
||
}
|
||
return JSON.stringify(thingModelTSL.value, null, 2);
|
||
} catch {
|
||
return JSON.stringify(thingModelTSL.value, null, 2);
|
||
}
|
||
});
|
||
|
||
/** 监听编辑器内容变化，实时更新数据 */
|
||
watch(tslString, (newValue) => {
|
||
try {
|
||
thingModelTSL.value = JSON.parse(newValue);
|
||
} catch {
|
||
// JSON 解析失败时保持原值
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Modal
|
||
v-model:open="dialogVisible"
|
||
:title="dialogTitle"
|
||
:footer="null"
|
||
width="800px"
|
||
>
|
||
<div class="mb-4">
|
||
<Radio.Group v-model:value="viewMode" size="small">
|
||
<Radio.Button value="view">代码视图</Radio.Button>
|
||
<Radio.Button value="editor">编辑器视图</Radio.Button>
|
||
</Radio.Group>
|
||
</div>
|
||
<!-- 代码视图 - 只读展示 -->
|
||
<div v-if="viewMode === 'view'" class="json-viewer-container">
|
||
<pre class="json-code"><code>{{ formattedTSL }}</code></pre>
|
||
</div>
|
||
<!-- 编辑器视图 - 可编辑 -->
|
||
<Textarea
|
||
v-else
|
||
v-model:value="tslString"
|
||
:rows="20"
|
||
placeholder="请输入 JSON 格式的物模型 TSL"
|
||
class="json-editor"
|
||
/>
|
||
</Modal>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.json-viewer-container {
|
||
background-color: #f5f5f5;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
padding: 12px;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.json-code {
|
||
margin: 0;
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: #333;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.json-editor {
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
|
||
font-size: 13px;
|
||
}
|
||
</style>
|