admin-ui/src/views/iot/device/product/component/deviceIn.vue

<template>
	<!-- 接入方式 -->
	<div class="title">{{ $t('message.device.formI18nLabel.transportProtocol') }}</div>
	<div class="text">{{ data.name }}</div>
	<!-- 消息协议 -->
	<div class="title">{{ $t('message.device.formI18nLabel.messageProtocol') }}</div>
	<div class="text">{{ data.protocol }}</div>
	<!-- 认证说明 -->
	<div class="title">{{ $t('message.device.formI18nLabel.authDescription') }}</div>
	<div class="text">{{ data.description }}</div>
	<!-- 链接信息 -->
	<div class="title">{{ $t('message.device.formI18nLabel.linkInfo') }}</div>
	<div class="text">{{ data.link }}</div>
	<!-- 认证配置 -->
	<div class="title">{{ $t('message.device.formI18nLabel.authConfig') }}</div>

	<!-- 请联系管理员 -->
	<template v-if="!isAdmin">{{ $t('message.device.formI18nLabel.contactAdmin') }}</template>
	<template v-else-if="data.authType === 1 || data.authType === 2">
		<!-- 认证方式 -->
		<el-form-item :label="$t('message.device.formI18nLabel.authType')" prop="authType" label-width="80px" style="margin-bottom: 0;">
			{{ data.authType === 1 ? 'Basic' : 'AccessToken' }}
		</el-form-item>
		<template v-if="data.authType === 1">
			<!-- 用户名 -->
			<el-form-item :label="$t('message.device.formI18nLabel.authUser')" prop="authUser" label-width="80px" style="margin-bottom: 0;">
				{{ data.authUser }}
			</el-form-item>
			<!-- 密码 -->
			<el-form-item :label="$t('message.device.formI18nLabel.authPasswd')" prop="authPasswd" label-width="80px">
				{{ data.authPasswd }}
			</el-form-item>
		</template>
		<template v-else>
			<!-- Aceess Token -->
			<el-form-item label="Aceess Token" prop="accessToken">
				{{ data.accessToken }}
			</el-form-item>
		</template>
	</template>
	<template v-else-if="data.authType === 3">
		<!-- 认证证书 -->
		<el-form-item :label="$t('message.device.formI18nLabel.certificateId')" prop="certificateName">
			{{ data.certificateName }}
		</el-form-item>
	</template>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import api from '/@/api/device';
import { useRoute } from 'vue-router';

const route = useRoute();

const isAdmin = localStorage.userId == '1'
const data = reactive({
	"name": "",
	"protocol": "",
	"description": "",
	"link": "",
	"authType": 0,
	"authUser": "",
	"authPasswd": "",
	"accessToken": "",
	"certificateName": "",
	"certificateId": 0
})

api.product.connect_intro(route.params.id as string).then((res: any) => {
	Object.assign(data, res.data)
})

</script>
<style lang="scss" scoped>
.title {
	font-weight: bold;
	line-height: 1.2;
	border-left: 4px solid #409eff;
	padding-left: 8px;
	margin: 20px 0 14px;
}
</style>