Merge branch 'master' of http://git.mydig.net/Sagoo-Cloud/sagoo-admin-ui

src/api/device/index.ts

@@ -5,6 +5,8 @@ export default {
     singleImg: (data: object) => post('/common/singleImg', data),
   },
   product: {
+    // 获取设备接入信息 /product/?id=35
+    connect_intro: (id: string) => get('/product/connect_intro', {id}),
     getList: (params: object) => get('/product/page_list', params),
     getLists: (params: object) => get('/product/list', params),
     add: (data: object) => post('/product/add', data),
@@ -74,6 +76,13 @@ export default {
     tagedit: (data: object) => put('/product/tsl/tag/edit', data),
     tagdel: (productId: number,key:string) => del('/product/tsl/tag/del', { productId,key }),
   },
+  tree: {
+    getList: (params: object) => get('/product/device_tree/list', params),
+    add: (params: object) => post('/product/device_tree/info/add', params),
+    edit: (params: object) => post('/product/device_tree/info/edit', params),
+    detail: (params: object) => get('/product/device_tree/info/detail', params),
+    delete: (params: object) => del('/product/device_tree/info/del', params),
+  },
   device: {
     getList: (params: object) => get('/product/device/bind_list', params),
     getSubList: (params: object) => get('/product/device/sub_list', params),

src/components/lrLayout/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div :class="cls">
+    <div class="column-left" v-show="showSideTree" :class="{ close: !state.isOpen }" :style="{ width: state.realWidth }">
+      <div class="slot-box" v-show="state.isOpen">
+        <slot name="left" />
+      </div>
+      <!-- 展开/收起 -->
+      <div v-if="collapsable" class="toggle-arrow" @click="toggle">
+        <i class="iconfont icon-zhankai-" v-show="!state.isOpen"> &lt; </i>
+        <i v-show="state.isOpen" class="iconfont icon-zhankai" > &gt; </i>
+      </div>
+    </div>
+    <div class="column-right">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue'
+const props = defineProps({
+  cls: {
+    type: String,
+    default: 'column',
+  },
+  width: {
+    type: String,
+    default: '200px',
+  },
+  collapsable: {
+    type: Boolean,
+    default: true,
+  },
+  showSideTree: {
+    type: Boolean,
+    default: true,
+  },
+})
+const state = reactive({
+  isOpen: true,
+  realWidth: '',
+})
+onMounted(() => {
+  state.realWidth = props.width
+})
+const toggle = () => {
+  state.realWidth = state.isOpen ? '0px' : props.width
+  setTimeout(() => {
+    state.isOpen = !state.isOpen
+  }, 100)
+}
+</script>
+<style lang="scss" scoped>
+.column {
+  height: calc(100vh - 120px);
+  overflow: hidden;
+}
+.column2 {
+  height: calc(100vh - 120px);
+  overflow: hidden;
+}
+.column5 {
+  height: calc(100vh - 450px);
+  overflow: hidden;
+}
+.column-left {
+  float: left;
+  width: 275px;
+  height: 100%;
+  margin-right: 15px;
+  position: relative;
+  transition: width 0.3s;
+  border-right: 1px solid #EAEAEA;
+  &:hover {
+    .toggle-arrow {
+      display: block;
+    }
+  }
+  .slot-box {
+    height: 100%;
+  }
+}
+.column-right {
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.column-right::-webkit-scrollbar {
+  width: 0px;
+  height: 1px;
+}
+// 收缩箭头
+.toggle-arrow {
+  width: 15px;
+  height: 28px;
+  display: none;
+  color: #b8b8b8;
+  line-height: 28px;
+  text-align: center;
+  position: absolute;
+  right: -15px;
+  top: 12px;
+  background-color: #fff;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border: 1px solid #EAEAEA;
+  cursor: pointer;
+}
+.close {
+  height: 100%;
+  border-right: 1px solid #EAEAEA;
+  .toggle-arrow {
+    display: block;
+  }
+}
+</style>

src/views/iot/device-tree/tree/component/edit.vue

@@ -0,0 +1,185 @@
+<template>
+	<div class="system-edit-dept-container">
+		<el-dialog :title="(ruleForm.id ? '修改' : '添加') + '设备树'" v-model="isShowDialog" width="769px">
+			<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="120px">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+						<el-form-item label="名称" prop="name">
+							<el-input v-model="ruleForm.name" placeholder="请输入名称" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+						<el-form-item label="地址" prop="address">
+							<el-input v-model="ruleForm.address" placeholder="请输入地址" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+						<el-form-item label="经度" prop="lng">
+							<el-input v-model="ruleForm.lng" placeholder="请输入经度" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+						<el-form-item label="纬度" prop="lat">
+							<el-input v-model="ruleForm.lat" placeholder="请输入纬度" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+						<el-form-item label="联系人" prop="contact">
+							<el-input v-model="ruleForm.contact" placeholder="请输入联系人" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+						<el-form-item label="联系电话" prop="phone">
+							<el-input v-model="ruleForm.phone" placeholder="请输入联系电话" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+						<el-form-item label="开始日期" prop="startDate">
+							<el-date-picker
+								v-model="ruleForm.startDate"
+								type="date"
+								placeholder="选择开始日期"
+								:size="'default'"
+							/>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+						<el-form-item label="结束日期" prop="endDate">
+							<el-date-picker
+								v-model="ruleForm.endDate"
+								type="date"
+								placeholder="选择结束日期"
+								:size="'default'"
+							/>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+						<el-form-item label="设备标识" prop="deviceKey">
+							<el-input v-model="ruleForm.deviceKey" placeholder="请输入设备标识" clearable></el-input>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id ? '修 改' : '添 加' }}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
+import api from '/@/api/device';
+import { phoneValidate } from '/@/utils/validator';
+import { ElMessage } from 'element-plus';
+
+interface RuleFormState {
+	id?: number;
+	name: string;
+	address: string;
+	lat: string;
+	lng: string;
+	contact: string;
+	phone: string;
+	deviceKey: string;
+	parentId: string;
+	startDate: string;
+	endDate: string;
+}
+
+const baseForm: RuleFormState = {
+	name: '',
+	address: '',
+	lat: '',
+	lng: '',
+	contact: '',
+	phone: '',
+	deviceKey: '',
+	parentId: '',
+	startDate: '',
+	endDate: '',
+};
+
+export default defineComponent({
+	name: 'deviceEditCate',
+	setup(prop, { emit }) {
+		const formRef = ref<HTMLElement | null>(null);
+		const state = reactive({
+			isShowDialog: false,
+			ruleForm: {
+				...baseForm,
+			},
+			rules: {
+				name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+				address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
+			},
+		});
+
+		// 打开弹窗
+		const openDialog = (type: string, row?: any) => {
+			resetForm();
+			if (type === 'add') {
+				state.ruleForm.parentId = row.infoId
+			} else if (type === 'edit') {
+				state.ruleForm.id = row.infoId
+				getDetail()
+			}
+			state.isShowDialog = true;
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		const getDetail = () => {
+			api.tree.detail({ infoId: state.ruleForm.id })
+				.then((res: any) => {
+					state.ruleForm = { ...res.data }
+				})
+		}
+		// 新增
+		const onSubmit = () => {
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					if (!state.ruleForm.id) {
+						//添加
+						api.tree.add(state.ruleForm).then(() => {
+							ElMessage.success('设备树添加成功');
+							closeDialog(); // 关闭弹窗
+							emit('finish');
+						});
+					} else {
+						//修改
+						api.tree.edit(state.ruleForm).then(() => {
+							ElMessage.success('设备树修改成功');
+							closeDialog(); // 关闭弹窗
+							emit('finish');
+						});
+					}
+				}
+			});
+		};
+		const resetForm = () => {
+			state.ruleForm = {
+				...baseForm,
+			};
+		};
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+			formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>

src/views/iot/device-tree/tree/detail.vue

@@ -0,0 +1,622 @@
+<template>
+	<div class="system-dic-container">
+		<div class="content">
+			<div class="cont_box">
+				<div class="title">产品：{{ detail.name }}</div>
+				<div class="pro-status"><span :class="developer_status == 1 ? 'on' : 'off'"></span>{{ developer_status == 1 ? '已发布' : '未发布' }}</div>
+
+				<div class="pro-option" @click="CkOption"> {{ developer_status == 1 ? '停用' : '启用' }}</div>
+			</div>
+		</div>
+
+		<div class="content-box">
+			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+				<el-tab-pane label="产品信息" name="1">
+					<div class="pro-box">
+						<div class="protitle">产品信息</div>
+						<el-button type="" :icon="Edit" class="buttonedit" @click="onOpenEditDic(detail)">编辑</el-button>
+					</div>
+
+					<div class="ant-descriptions-view">
+						<table>
+							<tbody>
+								<tr class="ant-descriptions-row">
+									<th class="ant-descriptions-item-label ant-descriptions-item-colon">产品标识</th>
+									<td class="ant-descriptions-item-content" colspan="1">{{ detail.key }}</td>
+									<th class="ant-descriptions-item-label ant-descriptions-item-colon">所属品类</th>
+									<td class="ant-descriptions-item-content" colspan="1">{{ detail.categoryName }}</td>
+									<!-- <th class="ant-descriptions-item-label ant-descriptions-item-colon">所属部门</th>
+									<td class="ant-descriptions-item-content" colspan="1">{{ detail.deptName }}</td> -->
+									<th class="ant-descriptions-item-label ant-descriptions-item-colon">设备类型</th>
+									<td class="ant-descriptions-item-content" colspan="1">{{ detail.deviceType }}</td>
+								</tr>
+								<tr class="ant-descriptions-row">
+									<th class="ant-descriptions-item-label ant-descriptions-item-colon">消息协议</th>
+									<td class="ant-descriptions-item-content" colspan="1">{{ detail.messageProtocol }}</td>
+									<th class="ant-descriptions-item-label ant-descriptions-item-colon">链接协议</th>
+									<td class="ant-descriptions-item-content" colspan="1">{{ detail.transportProtocol }}</td>
+
+								</tr>
+								<tr class="ant-descriptions-row">
+									<th class="ant-descriptions-item-label ant-descriptions-item-colon">描述</th>
+									<td class="ant-descriptions-item-content" colspan="5">{{ detail.desc }}</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="物模型" name="2">
+					<div class="wu-box">
+						<el-tabs type="border-card" v-model="activetab" @tab-click="wuhandleClick">
+							<el-tab-pane label="属性定义" name="attr">
+								<div class="wu-title">
+									<div class="title">属性定义</div>
+									<div><el-button type="primary" @click="onOpenEditAttr()">添加</el-button></div>
+								</div>
+
+								<el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'attr'">
+									<el-table-column label="属性标识" align="center" prop="key" />
+									<el-table-column label="属性名称" prop="name" :show-overflow-tooltip="true" />
+									<el-table-column prop="valueType" label="数据类型" width="100" align="center">
+										<template #default="scope">
+											<span>{{ scope.row.valueType.type }}</span>
+										</template>
+									</el-table-column>
+									<el-table-column prop="decimals" label="精度" width="60" align="center">
+										<template #default="scope">
+											<span>{{ scope.row.valueType.decimals }}</span>
+										</template>
+									</el-table-column>
+									<el-table-column prop="unit" label="单位" width="60" align="center">
+										<template #default="scope">
+											<span>{{ scope.row.valueType.unit }}</span>
+										</template>
+									</el-table-column>
+									<el-table-column prop="accessMode" label="是否只读" width="120" align="center">
+										<template #default="scope">
+											<el-tag type="info" size="small" v-if="scope.row.accessMode">只读</el-tag>
+											<el-tag type="success" size="small" v-else>读写</el-tag>
+										</template>
+									</el-table-column>
+									<el-table-column label="说明" prop="desc" :show-overflow-tooltip="true" />
+									<el-table-column label="操作" width="300" align="center" fixed="right">
+										<template #default="scope">
+											<el-button size="small" text type="warning" @click="onEditAttr(scope.row)">修改</el-button>
+											<el-button size="small" text type="danger" @click="onRowDel(scope.row.key, 'attr')">删除</el-button>
+										</template>
+									</el-table-column>
+								</el-table>
+							</el-tab-pane>
+							<el-tab-pane label="功能定义" name="fun">
+								<div class="wu-title">
+									<div class="title">功能定义</div>
+									<div><el-button type="primary" @click="onOpenEditFun()">添加</el-button></div>
+								</div>
+
+								<el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'fun'">
+									<el-table-column label="功能标识" align="center" prop="key" />
+									<el-table-column label="名称" prop="name" :show-overflow-tooltip="true" />
+
+									<el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
+									<el-table-column label="操作" width="300" align="center" fixed="right">
+										<template #default="scope">
+											<el-button size="small" text type="warning" @click="onEditFun(scope.row)">修改</el-button>
+											<el-button size="small" text type="danger" @click="onRowDel(scope.row.key, 'fun')">删除</el-button>
+										</template>
+									</el-table-column>
+								</el-table>
+							</el-tab-pane>
+							<el-tab-pane label="事件定义" name="event">
+								<div class="wu-title">
+									<div class="title">事件定义</div>
+									<div><el-button type="primary" @click="onOpenEditEvent()">添加</el-button></div>
+								</div>
+
+								<el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'event'">
+									<el-table-column label="事件标识" align="center" prop="key" />
+									<el-table-column label="名称" prop="name" :show-overflow-tooltip="true" />
+									<el-table-column prop="level" label="事件级别" width="120" align="center">
+										<template #default="scope">
+											<el-tag type="primary" size="small" v-if="scope.row.level == 0">普通</el-tag>
+											<el-tag type="warning" size="small" v-if="scope.row.level == 1">警告</el-tag>
+											<el-tag type="danger" size="small" v-if="scope.row.level == 2">紧急</el-tag>
+										</template>
+									</el-table-column>
+									<el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
+
+									<el-table-column label="操作" width="300" align="center" fixed="right">
+										<template #default="scope">
+											<el-button size="small" text type="warning" @click="onEditEvent(scope.row)">修改</el-button>
+											<el-button size="small" text type="danger" @click="onRowDel(scope.row.key, 'event')">删除</el-button>
+										</template>
+									</el-table-column>
+								</el-table>
+							</el-tab-pane>
+							<el-tab-pane label="标签定义" name="tab">
+								<div class="wu-title">
+									<div class="title">标签定义</div>
+									<div><el-button type="primary" @click="onOpenEditTab()">添加</el-button></div>
+								</div>
+
+								<el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'tab'">
+									<el-table-column label="属性标识" align="center" prop="key" />
+									<el-table-column label="属性名称" prop="name" :show-overflow-tooltip="true" />
+									<el-table-column prop="valueType" label="数据类型" width="120" align="center">
+										<template #default="scope">
+											<span>{{ scope.row.valueType.type }}</span>
+										</template>
+									</el-table-column>
+									<el-table-column prop="accessMode" label="是否只读" width="120" align="center">
+										<template #default="scope">
+											<el-tag type="info" size="small" v-if="scope.row.accessMode">只读</el-tag>
+											<el-tag type="success" size="small" v-else>读写</el-tag>
+										</template>
+									</el-table-column>
+									<el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
+									<el-table-column label="操作" width="300" align="center" fixed="right">
+										<template #default="scope">
+											<el-button size="small" text type="warning" @click="onEditTag(scope.row)">修改</el-button>
+											<el-button size="small" text type="danger" @click="onRowDel(scope.row.key, 'tab')">删除</el-button>
+										</template>
+									</el-table-column>
+								</el-table>
+							</el-tab-pane>
+						</el-tabs>
+						<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="getList" />
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="设备接入" name="3">
+					<deviceIn></deviceIn>
+				</el-tab-pane>
+				<el-tab-pane label="数据解析" name="4" lazy>
+					<dataParse></dataParse>
+				</el-tab-pane>
+			</el-tabs>
+		</div>
+		<EditDic ref="editDicRef" @typeList="typeList" />
+		<EditAttr ref="editAttrRef" @typeList="getproperty" />
+		<EditFun ref="editFunRef" @typeList="getfunction" />
+		<EditEvent ref="editEventRef" @typeList="getevent" />
+		<EditTab ref="editTabRef" @typeList="gettab" />
+	</div>
+</template>
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+
+import EditDic from './component/editPro.vue';
+import deviceIn from './component/deviceIn.vue';
+import dataParse from './component/dataParse.vue';
+import EditAttr from './component/editAttr.vue';
+import EditFun from './component/editFun.vue';
+import EditEvent from './component/editEvent.vue';
+import EditTab from './component/editTab.vue';
+
+import { useRoute } from 'vue-router';
+
+import api from '/@/api/device';
+
+interface TableDataState {
+	ids: number[];
+	tableData: {
+		data: [];
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+			name: string;
+			deviceType: string;
+			status: string;
+			dateRange: string[];
+		};
+	};
+}
+export default defineComponent({
+	name: 'deviceEditPro',
+	components: { EditDic, EditAttr, EditFun, EditEvent, EditTab, deviceIn, dataParse },
+
+	setup(prop, context) {
+		const route = useRoute();
+		const editDicRef = ref();
+		const editAttrRef = ref();
+		const editFunRef = ref();
+		const editEventRef = ref();
+		const editTabRef = ref();
+		const state = reactive<TableDataState>({
+			isShowDialog: false,
+			activeName: '3', // 分类数据
+			activetab: 'attr', // 分类数据
+			detail: [],
+			developer_status: 0,
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					productId: route.params && route.params.id,
+					pageSize: 10,
+					status: '',
+					dateRange: [],
+				},
+			},
+		});
+
+		onMounted(() => {
+			const ids = route.params && route.params.id;
+			api.product.detail(ids).then((res: any) => {
+				state.detail = res.data;
+				state.developer_status = res.data.status
+			});
+
+			//第一次加载
+			api.model.property(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.Total;
+			});
+		});
+
+
+
+		//编辑属性
+		const onEditAttr = (row: TableDataRow) => {
+			editAttrRef.value.openDialog(row, route.params.id);
+		};
+
+		//编辑功能
+		const onEditFun = (row: TableDataRow) => {
+			editFunRef.value.openDialog(row, route.params.id);
+		}
+
+
+		//编辑事件
+		const onEditEvent = (row: TableDataRow) => {
+			editEventRef.value.openDialog(row, route.params.id);
+		}
+
+		//编辑标签
+		const onEditTag = (row: TableDataRow) => {
+			editTabRef.value.openDialog(row, route.params.id);
+		}
+
+		//打开添加属性弹窗
+		const onOpenEditAttr = () => {
+			editAttrRef.value.openDialog({ product_id: route.params.id, id: 0, accessMode: 0 });
+		};
+
+		//打开添加功能弹窗
+		const onOpenEditFun = () => {
+			editFunRef.value.openDialog({ product_id: route.params.id, id: 0 });
+		};
+		//打开添加事件弹窗
+		const onOpenEditEvent = () => {
+			editEventRef.value.openDialog({ product_id: route.params.id, id: 0, level: 0 });
+		};
+
+		//打开添加事件弹窗
+		const onOpenEditTab = () => {
+			editTabRef.value.openDialog({ product_id: route.params.id, id: 0, accessMode: 0 });
+		};
+
+		// 打开修改产品弹窗
+		const onOpenEditDic = (row: TableDataRow) => {
+			editDicRef.value.openDialog(row);
+		};
+
+
+		// 删除产品
+		const onRowDel = (key, type) => {
+			let msg = `此操作将永久删除该数据吗？，是否继续?`;
+
+			if (key.length === 0) {
+				ElMessage.error('请选择要删除的数据。');
+				return;
+			}
+			ElMessageBox.confirm(msg, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					if (type == 'attr') {
+						api.model.propertydel(route.params.id, key).then(() => {
+							ElMessage.success('删除成功');
+							getproperty();
+						});
+					}
+					if (type == 'fun') {
+						api.model.functiondel(route.params.id, key).then(() => {
+							ElMessage.success('删除成功');
+							getfunction();
+						});
+					}
+					if (type == 'event') {
+						api.model.eventdel(route.params.id, key).then(() => {
+							ElMessage.success('删除成功');
+							getevent();
+						});
+					}
+					if (type == 'tab') {
+						api.model.tagdel(route.params.id, key).then(() => {
+							ElMessage.success('删除成功');
+							tagdel();
+						});
+					}
+				})
+				.catch(() => { });
+		};
+
+
+		//根据不同类型获取列表
+		const getList = () => {
+			switch (state.activetab) {
+				case 'attr':
+					getproperty();
+					break;
+				case 'fun':
+					getfunction();
+					break;
+				case 'event':
+					getevent();
+					break;
+				case 'tab':
+					gettab();
+					break;
+			}
+		};
+
+		const getproperty = () => {
+			api.model.property(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.Total;
+			});
+		};
+
+		const getfunction = () => {
+			api.model.function(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.Total;
+			});
+		};
+		const getevent = () => {
+			api.model.event(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.Total;
+			});
+		};
+
+		const gettab = () => {
+			api.model.tag(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.Total;
+			});
+		};
+
+		const wuhandleClick = (tab: TabsPaneContext) => {
+			state.activetab = tab.props.name;
+			switch (tab.props.name) {
+				case 'attr':
+					getproperty();
+					break;
+				case 'fun':
+					getfunction();
+					break;
+				case 'event':
+					getevent();
+					break;
+				case 'tab':
+					gettab();
+					break;
+			}
+		};
+
+		const handleClick = (tab: TabsPaneContext, event: Event) => {
+			console.log(tab, event);
+		};
+
+		const CkOption = () => {
+
+			if (state.developer_status == 1) {
+				api.product.undeploy({ id: route.params.id }).then((res: any) => {
+					ElMessage.success('操作成功');
+					state.developer_status = 0;
+				});
+			} else {
+				api.product.deploy({ id: route.params.id }).then((res: any) => {
+					ElMessage.success('操作成功');
+					state.developer_status = 1;
+				});
+			}
+
+
+
+
+		}
+
+		return {
+			Edit,
+			editDicRef,
+			editAttrRef,
+			editFunRef,
+			editEventRef,
+			editTabRef,
+			CkOption,
+			onRowDel,
+			onEditFun,
+			onEditEvent,
+			onEditTag,
+			onEditAttr,
+			getList,
+			getproperty,
+			getfunction,
+			getevent,
+			gettab,
+			wuhandleClick,
+			onOpenEditTab,
+			onOpenEditEvent,
+			onOpenEditAttr,
+			onOpenEditFun,
+			onOpenEditDic,
+			handleClick,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+<style>
+.content {
+	background: #fff;
+	width: 100%;
+	padding: 20px;
+}
+
+.content-box {
+	background: #fff;
+	width: 100%;
+	padding: 20px;
+	margin-top: 20px;
+}
+
+.cont_box {
+	display: flex;
+}
+
+.cont_box .title {
+	font-size: 24px;
+}
+
+.cont_box .pro-status {
+	line-height: 40px;
+	margin-left: 30px;
+}
+
+.cont_box .pro-status .on {
+	background: #52c41a;
+}
+
+.cont_box .pro-status .off {
+	background: #c41a1a;
+}
+
+.cont_box .pro-status span {
+	position: relative;
+	top: -1px;
+	display: inline-block;
+	width: 6px;
+	height: 6px;
+	vertical-align: middle;
+	border-radius: 50%;
+	margin-right: 5px;
+}
+
+.cont_box .pro-option {
+	line-height: 40px;
+	margin-left: 10px;
+	color: #1890ff;
+	cursor: pointer;
+}
+
+.content-box .pro-box {
+	display: flex;
+	padding: 10px;
+}
+
+.content-box .pro-box .protitle {
+	font-size: 18px;
+	font-weight: bold;
+	line-height: 35px;
+}
+
+.content-box .pro-box .buttonedit {
+	border: 0px;
+	color: #1890ff;
+}
+
+table {
+	border-collapse: collapse;
+	text-indent: initial;
+	border-spacing: 2px;
+}
+
+tbody {
+	box-sizing: border-box;
+	display: table-row-group;
+	vertical-align: middle;
+	border-color: inherit;
+}
+
+tr {
+	display: table-row;
+	vertical-align: inherit;
+	border-color: inherit;
+}
+
+.ant-descriptions-view {
+	width: 100%;
+	overflow: hidden;
+	border-radius: 4px;
+}
+
+.ant-descriptions-view {
+	border: 1px solid #e8e8e8;
+}
+
+.ant-descriptions-view table {
+	width: 100%;
+	table-layout: fixed;
+}
+
+.ant-descriptions-view>table {
+	table-layout: auto;
+}
+
+.ant-descriptions-row {
+	border-bottom: 1px solid #e8e8e8;
+}
+
+.ant-descriptions-item-label {
+	color: rgba(0, 0, 0, 0.85);
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+.ant-descriptions-item-label {
+	padding: 16px 24px;
+	border-right: 1px solid #e8e8e8;
+}
+
+.ant-descriptions-item-label {
+	background-color: #fafafa;
+}
+
+.ant-descriptions-item-content {
+	padding: 16px 24px;
+	border-right: 1px solid #e8e8e8;
+	display: table-cell;
+	color: rgba(0, 0, 0, 0.65);
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+.wu-box {
+	border: #e8e8e8 solid 1px;
+	padding: 20px;
+	width: 100%;
+}
+
+.wu-box .wu-title {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	padding: 20px;
+	border-bottom: #e8e8e8 1px solid;
+}
+
+.wu-box .wu-title .title {
+	font-size: 18px;
+}</style>
+
+

src/views/iot/device-tree/tree/index.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="system-dic-container">
+    <el-card shadow="hover">
+      <LrLayout width="260px">
+        <template #left>
+          <div class="zl-tree-search">
+            <div class="flex zl-tree-search__filter">
+              <el-input v-model.trim="searchVal" placeholder="搜索">
+                <template #prefix>
+                  <el-icon><Search /></el-icon>
+                  <!-- <i class="iconfont icon-search" /> -->
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="zl-tree-search-scroll">
+            <el-scrollbar ref="zlTreeSearchScroll" height="100%" v-loading="treeLoading">
+              <el-tree
+                ref="zlTreeSearchRef"
+                v-if="!treeLoading"
+                :data="treeData"
+                :props="{
+                  children: 'children',
+                  label: 'name'
+                }"
+                :filter-node-method="filterNode"
+                :default-expand-all="true"
+                :node-key="'id'"
+                highlight-current
+                @node-click="nodeClick">
+                <template #default="{ node, data }">
+                  <div class="custom-tree-node">
+                    <span class="tree-label">
+                      <i class="iconfont icon-wenjianjia icon-wjj mr8" />{{ node.label }}
+                    </span>
+                    <span class="tree-options" >
+                      <slot name="operate" :data="data">
+                        <el-dropdown @command="command => operateCmd(command, data)">
+                          <el-icon>
+                            <More></More>
+                          </el-icon>
+                          <template #dropdown>
+                            <el-dropdown-menu>
+                              <el-dropdown-item command="add">
+                                <el-icon>
+                                  <Plus></Plus>
+                                </el-icon>
+                              </el-dropdown-item>
+                              <el-dropdown-item command="edit">
+                                <el-icon>
+                                  <Edit></Edit>
+                                </el-icon>
+                              </el-dropdown-item>
+                              <el-dropdown-item command="delete">
+                                <el-icon>
+                                  <Delete></Delete>
+                                </el-icon>
+                              </el-dropdown-item>
+                            </el-dropdown-menu>
+                          </template>
+                        </el-dropdown>
+                      </slot>
+                    </span>
+                  </div>
+                </template>
+              </el-tree>
+            </el-scrollbar>
+          </div>
+        </template>
+        <template #right>
+          <!--  @tab-click="handleClick" -->
+          <el-tabs v-model="tabName">
+            <el-tab-pane label="设备树信息" name="1">
+              <table>
+                <tbody>
+                  <tr class="ant-descriptions-row">
+                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">名称</th>
+                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.name }}</td>
+                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">地址</th>
+                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.address }}</td>
+                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">经度</th>
+                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.lng }}</td>
+                  </tr>
+                  <tr class="ant-descriptions-row">
+                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">纬度</th>
+                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.lat }}</td>
+                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">联系人</th>
+                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.contact }}</td>
+                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">联系电话</th>
+                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.phone }}</td>
+                  </tr> 
+                  <tr class="ant-descriptions-row">
+                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">服务周期：开始日期</th>
+                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.startDate }}</td>
+                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">服务周期：截止日期</th>
+                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.endDate }}</td>
+                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">图片</th>
+                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.image }}</td>
+                  </tr>
+                  <tr class="ant-descriptions-row">
+                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">设备标识</th>
+                    <td class="ant-descriptions-item-content" colspan="5">{{ treeDetail.deviceKey }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </el-tab-pane>
+            <el-tab-pane label="时间周期" name="2">
+			        <el-form :model="ruleForm" ref="formRef" size="default" label-width="80px">
+                <!-- <el-form-item label="时间窗口" prop="duration">
+                  <div class="flex">
+                    <el-input v-model="ruleForm.duration" placeholder="请输入" class="w-35" />
+                    <el-select v-model="ruleForm.timeUnit" placeholder="请选择单位">
+                      <el-option v-for="item in unitData" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </div>
+                </el-form-item> -->
+                <el-form-item label="类型" prop="template">
+                  <el-select v-model="ruleForm.template" filterable clearable placeholder="请选择类型" class="w-35">
+                    <el-option v-for="dict in tree_types" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="分类" prop="category">
+                  <el-select v-model="ruleForm.category" filterable clearable placeholder="请选择分类" class="w-35">
+                    <el-option v-for="dict in tree_category" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label=" " prop="category">
+                  <el-button type="primary" @click="onSaveTime">保存</el-button>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="绑定实际设备" name="3">
+              <el-form-item label="选择设备" prop="deviceKey">
+                <el-select v-model="ruleForm.deviceKey" filterable placeholder="请选择设备">
+                  <el-option v-for="item in []" :key="item.key" :label="item.name" :value="item.key">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; font-size: 13px">{{ item.key }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-tab-pane>
+          </el-tabs>
+        </template>
+      </LrLayout>
+
+      <AddOrUpdate ref="addOrUpdateRef" @finish="getTreeList"/>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import AddOrUpdate from './component/edit.vue';
+import api from '/@/api/device';
+import LrLayout from '/@/components/lrLayout/index.vue'
+import { Fold, Expand, More, Plus, Edit, Delete, Search } from '@element-plus/icons-vue'
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  id: number;
+  name: string;
+  deviceType: string;
+  status: number;
+  desc: string;
+  createBy: string;
+}
+interface TableDataState {
+  ids: number[];
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+    param: {
+      pageNum: number;
+      pageSize: number;
+      name: string;
+      status: string;
+    };
+  };
+  treeData: any[]
+  treeLoading: boolean
+  tabName: string
+  searchVal: string
+  treeDetail: any
+  unitData: any
+  ruleForm: any
+}
+
+export default defineComponent({
+  name: 'deviceTree',
+  components: { AddOrUpdate, LrLayout, Fold, Expand, More, Plus, Edit, Delete, Search },
+  setup() {
+    const { proxy } = getCurrentInstance() as any;
+    const addOrUpdateRef = ref();
+    const queryRef = ref();
+    const state = reactive<TableDataState>({
+      ids: [],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 10,
+          status: '',
+          name: ''
+        },
+      },
+      treeData: [],
+      treeLoading: false,
+      tabName: '1',
+      searchVal: '',
+      treeDetail: {},
+			unitData: [
+				{ label: '秒', value: 1 },
+				{ label: '分', value: 2 },
+				{ label: '时', value: 3 },
+				{ label: '天', value: 4 },
+			],
+      ruleForm: {
+        duration: '',
+        timeUnit: '',
+        template: 'default',
+        category: 'default'
+      }
+    });
+    
+    const { tree_types, tree_category } = proxy.useDict('tree_types', 'tree_category');
+    // 初始化表格数据
+    const initTableData = () => {
+      getTreeList();
+    };
+    const getTreeList = () => {
+      state.treeLoading = true;
+      api.tree.getList({}).then((res: any) => {
+        state.treeData = res.list;
+      }).finally(() => (state.treeLoading = false));
+    }
+    const typeList = () => {
+
+    };
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return;
+      formEl.resetFields();
+      typeList();
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection: TableDataRow[]) => {
+      state.ids = selection.map((item) => item.id);
+    };
+    const nodeClick = (data: any) => {
+      api.tree.detail({ infoId: data.infoId })
+        .then((res: any) => {
+          state.treeDetail = res.data || {}
+        })
+    }
+    const onSaveTime = () => {
+      if (!state.treeDetail.id) {
+        ElMessage.warning('请选择节点树')
+        return
+      }
+      //修改
+      api.tree.edit({
+        ...state.treeDetail,
+        template: state.ruleForm.template,
+        category: state.ruleForm.category
+      }).then(() => {
+        ElMessage.success('修改成功');
+      });
+    }
+
+    const operateCmd = (type: string, data: any) => {
+      switch(type) {
+        case 'add':
+          addOrUpdateRef.value.openDialog(type, data)
+          break
+        case 'edit':
+          addOrUpdateRef.value.openDialog(type, data)
+          break
+        case 'delete':
+          ElMessageBox.confirm('是否删除该设备树', '提示', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+          })
+            .then(() => {
+              api.tree.delete({ id: data.infoId }).then(() => {
+                ElMessage.success('删除成功');
+                getTreeList();
+              });
+            })
+            .catch(() => { });
+          break
+      }
+    }
+    return {
+      addOrUpdateRef,
+      queryRef,
+      typeList,
+      resetQuery,
+      handleSelectionChange,
+      operateCmd,
+      getTreeList,
+      nodeClick,
+      tree_types,
+      tree_category,
+      ...toRefs(state),
+      onSaveTime
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.zl-tree-search {
+  margin: 0 12px 0 0;
+  background-color: #fff;
+  border-radius: 4px;
+  &__filter {
+    padding: 4px 10px;
+    border-bottom: 1px solid #EAEAEA;
+  }
+}
+.zl-tree-search__filter :deep .el-input__wrapper {
+  box-shadow: none;
+}
+
+.custom-tree-node {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+  &:hover {
+    .tree-options {
+      display: block;
+    }
+  }
+}
+:deep(.column-right) {
+  padding: 0;
+  background-color: transparent;
+}
+.icon-wjj {
+  font-size: 12px;
+  color: #C4C6CF;
+}
+
+table {
+  width: 100%;
+	border-collapse: collapse;
+	text-indent: initial;
+	border-spacing: 2px;
+}
+tbody {
+	box-sizing: border-box;
+	display: table-row-group;
+	vertical-align: middle;
+	border-color: inherit;
+}
+
+tr {
+	display: table-row;
+	vertical-align: inherit;
+	border-color: inherit;
+}
+.ant-descriptions-view {
+	width: 100%;
+	overflow: hidden;
+	border-radius: 4px;
+}
+.ant-descriptions-view {
+	border: 1px solid #e8e8e8;
+}
+.ant-descriptions-view table {
+	width: 100%;
+	table-layout: fixed;
+}
+.ant-descriptions-view > table {
+	table-layout: auto;
+}
+.ant-descriptions-row {
+	border-bottom: 1px solid #e8e8e8;
+}
+.ant-descriptions-item-label {
+	color: rgba(0, 0, 0, 0.85);
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 1.5;
+}
+.ant-descriptions-item-label {
+	padding: 16px;
+	border-right: 1px solid #e8e8e8;
+}
+.ant-descriptions-item-label {
+	background-color: #fafafa;
+}
+.ant-descriptions-item-content {
+	padding: 16px;
+	border-right: 1px solid #e8e8e8;
+	display: table-cell;
+	color: rgba(0, 0, 0, 0.65);
+	font-size: 14px;
+	line-height: 1.5;
+}
+</style>

src/views/iot/device/instance/component/edit.vue

@@ -9,7 +9,7 @@
           <el-input v-model="ruleForm.name" placeholder="请输入设备名称" />
         </el-form-item>
         <el-form-item label="所属产品" prop="productId">
-          <el-select v-model="ruleForm.productId" :disabled="ruleForm.id" placeholder="请选择所属产品" class="w100">
+          <el-select v-model="ruleForm.productId" @change="productIdChange" :disabled="ruleForm.id" placeholder="请选择所属产品" class="w100">
             <el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
@@ -20,26 +20,44 @@
           <div class="tags-wrapper">
             <el-button type="primary" size="small" @click="toAddTag">添加标签</el-button>
             <div class="tags">
-              <div class="tag flex" v-for="tag,i in ruleForm.tags">
+              <div class="tag flex" v-for="tag, i in ruleForm.tags">
                 <el-tag>{{ tag.key }} : {{ tag.name }} : {{ tag.value }}</el-tag>
                 <el-button type="danger" size="small" @click="delTagRow(i)">删除</el-button>
               </div>
             </div>
           </div>
         </el-form-item>
-        <el-form-item label="设备证书" prop="certificate">
-          <el-input v-model="ruleForm.certificate" placeholder="请输入设备证书" />
-        </el-form-item>
-
-        <el-form-item label="设备秘钥" prop="secureKey">
-          <el-input v-model="ruleForm.secureKey" placeholder="请输入设备秘钥" />
-        </el-form-item>
-
+        <template v-if="ruleForm.authType === 1 || ruleForm.authType === 2">
+          <el-form-item label="认证方式" prop="">
+            <el-radio-group v-model="ruleForm.authType">
+              <el-radio :label="1">Basic</el-radio>
+              <el-radio :label="2">AccessToken</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <template v-if="ruleForm.authType === 1">
+            <el-form-item label="用户名" prop="authUser">
+              <el-input v-model="ruleForm.authUser" placeholder="请输入用户名" />
+            </el-form-item>
+            <el-form-item label="密码" prop="authPasswd">
+              <el-input v-model="ruleForm.authPasswd" placeholder="请输入密码" />
+            </el-form-item>
+          </template>
+          <template v-else>
+            <el-form-item label="Aceess Token" prop="accessToken">
+              <el-input v-model="ruleForm.accessToken" placeholder="请输入Aceess Token" />
+            </el-form-item>
+          </template>
+        </template>
+        <template v-else-if="ruleForm.authType === 3">
+          <el-form-item label="认证证书" prop="certificateId">
+            <el-select v-model="ruleForm.certificateId" placeholder="请选择证书">
+              <el-option v-for="cert in certList" :key="cert.id" :label="cert.name" :value="cert.id"> </el-option>
+            </el-select>
+          </el-form-item>
+        </template>
         <el-form-item label="固件版本号" prop="version">
           <el-input v-model="ruleForm.version" placeholder="请输入固件版本号" />
         </el-form-item>
-
-
         <el-form-item label="备注" prop="desc">
           <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
@@ -63,22 +81,45 @@ import { reactive, toRefs, defineComponent, ref, unref, nextTick } from 'vue';
 import api from '/@/api/device';
 import { ElMessage } from "element-plus";
 import tagVue from './tag.vue'
+import certApi from '/@/api/certificateManagement';
 
 interface RuleFormState {
   id: number;
   key: string;
   name: string;
-  certificate: string;
-  secureKey: string;
   version: string;
   productId: number | string;
   tags: Tag[];
   lng: string;
   lat: string;
   desc: string;
+  authType: number;
+  authUser: string;
+  authPasswd: string;
+  accessToken: string;
+  certificateId: string;
+}
+
+const form: RuleFormState = {
+  id: 0,
+  key: '',
+  name: '',
+  productId: '',
+  tags: [],
+  lng: '',
+  lat: '',
+  version: '',
+  authType: 0,
+  authUser: '',
+  authPasswd: '',
+  accessToken: '',
+  certificateId: '',
+  desc: ''
 }
+
 interface DicState {
   productData: any[];
+  product: any;
   isShowDialog: boolean;
   ruleForm: RuleFormState;
   rules: {}
@@ -98,25 +139,13 @@ export default defineComponent({
     const formRef = ref<HTMLElement | null>(null);
     const tagRef = ref<HTMLElement | null>(null);
     const mapVisible = ref(false);
+    const certList = ref([])
     const state = reactive<DicState>({
       isShowDialog: false,
+      product: {},
       productData: [], // 分类数据
       ruleForm: {
-        id: 0,
-        key: '',
-        name: '',
-        productId: '',
-        certificate: '',
-        tags: [{
-          key: 'key',
-          name: 'name',
-          value: 'value'
-        }],
-        lng: '',
-        lat: '',
-        secureKey: '',
-        version: '',
-        desc: ''
+        ...form
       },
       rules: {
         name: [
@@ -132,6 +161,11 @@ export default defineComponent({
     const openDialog = (row: RuleFormState | null) => {
       resetForm();
 
+      // 证书列表
+      certApi.certificateManagement.getAll().then((res: any) => {
+        certList.value = res.Info || []
+      });
+
       api.product.getLists({ status: 1 }).then((res: any) => {
         state.productData = res.product || [];
       });
@@ -142,23 +176,14 @@ export default defineComponent({
         //   state.ruleForm = res.data.dictType
         // })
         state.ruleForm = row;
-        state.ruleForm.tags = row.tags|| []
+        state.ruleForm.tags = row.tags || []
+        productIdChange(row.productId as number)
       }
       state.isShowDialog = true;
     };
     const resetForm = () => {
       state.ruleForm = {
-        id: 0,
-        key: '',
-        name: '',
-        productId: '',
-        tags: [],
-        lng: '',
-        lat: '',
-        certificate: '',
-        secureKey: '',
-        version: '',
-        desc: ''
+        ...form
       }
     };
     // 关闭弹窗
@@ -218,8 +243,26 @@ export default defineComponent({
         });
       });
     }
+    // 通过设备所属产品的传输协议来确定认证方式
+    const transportProtocolChange = (type: string) => {
+      if (type === 'mqtt_server') {
+        state.ruleForm.authType = 1
+      } else {
+        state.ruleForm.authType = 3
+      }
+    }
+    // 所属产品变化的时候，更新产品详情
+    const productIdChange = (productId: number) => {
+      api.product.detail(productId).then((res: any) => {
+        // console.log(res.data)
+        state.product = res.data
+        transportProtocolChange(res.data.transportProtocol)
+      })
+    }
 
     return {
+      certList,
+      productIdChange,
       tagRef,
       delTagRow,
       toAddTag,

src/views/iot/device/instance/detail.vue

@@ -347,7 +347,8 @@ import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import functionCom from './component/function.vue';
 import 'vue3-json-viewer/dist/index.css';
-import EditDic from '../product/component/editPro.vue';
+import EditDic from './component/edit.vue';
+// import EditDic from '../product/component/editPro.vue';
 import EditAttr from '../product/component/editAttr.vue';
 import EditFun from '../product/component/editFun.vue';
 import EditEvent from '../product/component/editEvent.vue';

src/views/iot/device/product/component/deviceIn.vue

@@ -1,107 +1,76 @@
 <template>
-	<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="80px" @keyup.enter="onSubmit">
-		<!-- <el-form-item label="上级分类" prop="parentId">
-			<el-cascader :options="typeData" :props="{ checkStrictly: true, multiple: false, emitPath: false, value: 'id', label: 'name' }" placeholder="请选择关联页面" clearable class="w100" v-model="formData.parentId"></el-cascader>
+	<div class="title">接入方式</div>
+	<div class="text">{{ data.name }}</div>
+	<div class="title">消息协议</div>
+	<div class="text">{{ data.protocol }}</div>
+	<div class="title">认证说明</div>
+	<div class="text">{{ data.description }}</div>
+	<div class="title">链接信息</div>
+	<div class="text">{{ data.link }}</div>
+	<div class="title">认证配置</div>
+
+	<template v-if="data.authType === 1 || data.authType === 2">
+		<el-form-item label="认证方式" prop="">
+			<el-radio-group v-model="data.authType">
+				<el-radio :label="1">Basic</el-radio>
+				<el-radio :label="2">AccessToken</el-radio>
+			</el-radio-group>
 		</el-form-item>
-		<el-form-item label="关联页面" prop="menuIds">
-			<el-cascader :options="menuData" :props="{ checkStrictly: false, multiple: true, emitPath: false, value: 'id', label: 'title' }" placeholder="请选择关联页面" clearable class="w100" v-model="formData.menuIds"></el-cascader>
+		<template v-if="data.authType === 1">
+			<el-form-item label="用户名" prop="authUser" label-width="80px">
+				<el-input v-model="data.authUser" readonly  style="width: 300px;" />
+			</el-form-item>
+			<el-form-item label="密码" prop="authPasswd" label-width="80px">
+				<el-input v-model="data.authPasswd" readonly style="width: 300px;" />
+			</el-form-item>
+		</template>
+		<template v-else>
+			<el-form-item label="Aceess Token" prop="accessToken">
+				<el-input v-model="data.accessToken" readonly/>
+			</el-form-item>
+		</template>
+	</template>
+	<template v-else-if="data.authType === 3">
+		<el-form-item label="认证证书" prop="certificateId">
+			<el-select v-model="data.certificateId" disabled>
+				<el-option v-for="cert in certList" :key="cert.id" :label="cert.name" :value="cert.id"> </el-option>
+			</el-select>
 		</el-form-item>
-		<el-form-item label="接口名称" prop="name">
-			<el-input v-model="formData.name" placeholder="输入接口名称" />
-		</el-form-item>
-		<el-form-item label="接口地址" prop="address">
-			<el-input v-model="formData.address" placeholder="接口地址" />
-		</el-form-item> -->
-	</el-form>
+	</template>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, nextTick, watch } from 'vue';
-import api from '/@/api/system';
-import { ApiRow } from '/@/api/model/system/menu';
-import { ruleRequired } from '/@/utils/validator';
-import { ElMessage } from 'element-plus';
-import apiDatahub from '/@/api/datahub';
-
-// TODO 这个页面还没开始开发
-
-const emit = defineEmits(['getList']);
-
-const showDialog = ref(false);
-const formRef = ref();
-const menuData = ref<any[]>([]);
-const typeData = ref<any[]>([]);
-const methodOptions = ref<any[]>([]);
-
-const baseForm: ApiRow = {
-	menuIds: [],
-	id: undefined,
-	parentId: undefined,
-	name: '',
-	types: 2,
-	address: '',
-	method: '',
-	remark: '',
-	status: 1,
-};
-
-const formData = reactive<ApiRow>({
-	...baseForm,
-});
-
-// 切换分类时清空上级分类的选择。因为接口里不能选择跟分类节点
-watch(
-	() => formData.types,
-	() => {
-		formData.parentId = undefined;
-	}
-);
-
-const ruleForm = {
-	parentId: [ruleRequired('上级分类不能为空', 'change')],
-	menuIds: [ruleRequired('关联页面不能为空', 'change')],
-	method: [ruleRequired('请求方式不能为空', 'change')],
-	name: [ruleRequired('接口名称不能为空')],
-	address: [ruleRequired('接口地址不能为空')],
-};
-
-apiDatahub.template.getDictData({ DictType: 'api_methods' }).then((res: any) => {
-	methodOptions.value = res.values;
-});
-
-// 加载菜单列表
-api.menu.getList({ status: -1 }).then((res: any[]) => {
-	menuData.value = res;
-});
-
-const onSubmit = async () => {
-	await formRef.value.validate();
-
-	const theApi = formData.id ? api.api.edit : api.api.add;
-
-	await theApi(formData);
-
-	ElMessage.success('操作成功');
-	resetForm();
-	showDialog.value = false;
-	emit('getList');
-};
-
-const resetForm = async () => {
-	Object.assign(formData, { ...baseForm });
-	formRef.value && formRef.value.resetFields();
-};
-
-const open = async (row: any) => {
-	resetForm();
-	showDialog.value = true;
-	api.api.getList({ types: 1, status: -1 }).then((res: any) => {
-		typeData.value = res.Info;
-	});
-	nextTick(() => {
-		Object.assign(formData, { method: methodOptions.value.length ? methodOptions.value[0].value : '', ...row });
-	});
-};
+import api from '/@/api/device';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const certList = ref([])
+const data = reactive({
+	"name": "",
+	"protocol": "",
+	"description": "",
+	"link": "",
+	"authType": 0,
+	"authUser": "",
+	"authPasswd": "",
+	"accessToken": "",
+	"certificateId": 0
+})
+
+api.product.connect_intro(route.params.id as string).then((res: any) => {
+	console.log(res.data)
+	Object.assign(data, res.data)
+})
 
-defineExpose({ open });
 </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>

src/views/iot/device/product/component/editEvent copy.vue

@@ -1,558 +0,0 @@
-<template>
-	<div class="system-edit-dic-container">
-		<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '事件定义'" v-model="isShowDialog" width="769px">
-			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="120px">
-				<el-form-item label="事件定义标识" prop="key">
-					<el-input v-model="ruleForm.key" placeholder="请输入事件定义标识" :disabled="ruleForm.id !== 0 ? true : false" />
-				</el-form-item>
-				<el-form-item label="事件定义名称" prop="name">
-					<el-input v-model="ruleForm.name" placeholder="请输入事件定义名称" />
-				</el-form-item>
-
-				<el-form-item label="事件级别" prop="level">
-					<el-radio-group v-model="ruleForm.level">
-						<el-radio :label="0">普通</el-radio>
-						<el-radio :label="1">警告</el-radio>
-						<el-radio :label="2">紧急</el-radio>
-					</el-radio-group>
-				</el-form-item>
-
-				<el-form-item label="输出参数" prop="maxLength">
-					<div v-for="(item, index) in inputsdata" :key="index" class="jslist">
-						<div class="jsonlist">
-							<div>参数名称：</div>
-							<div style="width: 60%">{{ item.name }}</div>
-							<div class="jsonoption">
-								<!-- <el-link type="primary">编辑</el-link> -->
-								<el-link type="primary" @click="deljson(index, 'fun')">删除</el-link>
-							</div>
-						</div>
-					</div>
-
-					<div style="display: block; width: 100%">
-						<div class="input-options" @click="addJson('fun')">
-							<el-icon>
-								<Plus />
-							</el-icon>
-							<div>添加参数</div>
-						</div>
-					</div>
-				</el-form-item>
-
-				<el-form-item label="输出参数" prop="type">
-					<el-select v-model="valueType.type" placeholder="请选择数据类型" @change="seletChange">
-						<el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
-							<el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" />
-						</el-option-group>
-					</el-select>
-				</el-form-item>
-
-				<!--根据数据类型输出不同表单-->
-
-				<el-form-item label="精度" prop="decimals" v-if="type == 'float' || type == 'double'">
-					<el-input v-model="valueType.decimals" placeholder="请输入精度" />
-				</el-form-item>
-
-				<el-form-item label="单位" prop="unit" v-if="type == 'int' || type == 'long' || type == 'float' || type == 'double'">
-					<el-input v-model="valueType.unit" placeholder="请输入单位" />
-				</el-form-item>
-
-				<el-form-item label="最大长度" prop="maxLength" v-if="type == 'string'">
-					<el-input v-model="valueType.maxLength" placeholder="请输入最大长度" />
-				</el-form-item>
-
-				<el-form-item label="时间格式" prop="maxLength" v-if="type == 'date'">
-					<el-input v-model="valueType.maxLength" placeholder="请输入时间格式" />
-				</el-form-item>
-
-				<el-form-item label="布尔值" prop="trueText" v-if="type == 'boolean'">
-					<div class="input-box">
-						<el-input v-model="valueType.trueText" placeholder="请输入布尔值" value="是" /><span style="margin: 0px 10px">~</span>
-						<el-input v-model="valueType.trueValue" placeholder="请输入布尔值" value="true" />
-					</div>
-
-					<div class="input-box">
-						<el-input v-model="valueType.falseText" placeholder="请输入布尔值" value="否" /> <span style="margin: 0px 10px">~</span>
-						<el-input v-model="valueType.falseValue" placeholder="请输入布尔值" value="false" />
-					</div>
-				</el-form-item>
-
-				<el-form-item label="枚举项" prop="maxLength" v-if="type == 'enum'">
-					<div class="input-box" v-for="(item, index) in enumdata" :key="index">
-						<el-input v-model="item.text" placeholder="请输入枚举文本" /><span style="margin: 0px 10px"><el-icon>
-								<Right />
-							</el-icon></span>
-						<el-input v-model="item.value" placeholder="请输入枚举值" />
-						<div class="input-option">
-							<el-icon @click="addEnum" v-if="index == 0">
-								<Plus />
-							</el-icon>
-							<el-icon @click="delEnum(index)" v-if="index != 0">
-								<Minus />
-							</el-icon>
-						</div>
-					</div>
-				</el-form-item>
-
-				<el-form-item label="JSON对象" prop="maxLength" v-if="type == 'object'">
-					<div v-for="(item, index) in jsondata" :key="index" class="jslist">
-						<div class="jsonlist">
-							<div>参数名称：</div>
-							<div style="width: 60%">{{ item.name }}</div>
-							<div class="jsonoption">
-								<!-- <el-link type="primary">编辑</el-link> -->
-								<el-link type="primary" @click="deljson(index)">删除</el-link>
-							</div>
-						</div>
-					</div>
-
-					<div style="display: block; width: 100%">
-						<div class="input-options" @click="addJson">
-							<el-icon>
-								<Plus />
-							</el-icon>
-							<div>添加参数</div>
-						</div>
-					</div>
-				</el-form-item>
-
-				<div v-if="type == 'array'">
-					<el-form-item label="元素类型" prop="types">
-						<el-select v-model="elementType.type" placeholder="请选择元素类型" @change="seletChanges">
-							<el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
-								<el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" :disabled="item.type == 'array'" />
-							</el-option-group>
-						</el-select>
-					</el-form-item>
-
-					<el-form-item label="精度" prop="decimals" v-if="types == 'float' || types == 'double'">
-						<el-input v-model="elementType.decimals" placeholder="请输入精度" />
-					</el-form-item>
-
-					<el-form-item label="单位" prop="unit" v-if="types == 'int' || types == 'long' || types == 'float' || types == 'double'">
-						<el-input v-model="elementType.unit" placeholder="请输入单位" />
-					</el-form-item>
-
-					<el-form-item label="最大长度" prop="maxLength" v-if="types == 'string'">
-						<el-input v-model="elementType.maxLength" placeholder="请输入最大长度" />
-					</el-form-item>
-
-					<el-form-item label="时间格式" prop="maxLength" v-if="types == 'date'">
-						<el-input v-model="elementType.maxLength" placeholder="请输入时间格式" />
-					</el-form-item>
-
-					<el-form-item label="布尔值" prop="maxLength" v-if="types == 'boolean'">
-						<div class="input-box">
-							<el-input v-model="elementType.trueText" placeholder="请输入布尔值" value="是" /><span style="margin: 0px 10px">~</span>
-							<el-input v-model="elementType.trueValue" placeholder="请输入布尔值" value="true" />
-						</div>
-
-						<div class="input-box">
-							<el-input v-model="elementType.falseText" placeholder="请输入布尔值" value="否" /> <span style="margin: 0px 10px">~</span>
-							<el-input v-model="elementType.falseValue" placeholder="请输入布尔值" value="false" />
-						</div>
-					</el-form-item>
-
-					<el-form-item label="枚举项" prop="maxLength" v-if="types == 'enum'">
-						<div class="input-box" v-for="(item, index) in enumdata" :key="index">
-							<el-input v-model="item.text" placeholder="请输入枚举值" /><span style="margin: 0px 10px"><el-icon>
-									<Right />
-								</el-icon></span>
-							<el-input v-model="item.value" placeholder="请输入枚举文本" />
-							<div class="input-option">
-								<el-icon @click="addEnum" v-if="index == 0">
-									<Plus />
-								</el-icon>
-								<el-icon @click="delEnum(index)" v-if="index != 0">
-									<Minus />
-								</el-icon>
-							</div>
-						</div>
-					</el-form-item>
-				</div>
-
-				<el-form-item label="JSON对象" prop="maxLength" v-if="types == 'object'">
-					<div v-for="(item, index) in jsondata" :key="index" class="jslist">
-						<div class="jsonlist">
-							<div>参数名称：</div>
-							<div style="width: 60%">{{ item.data.name }}</div>
-							<div class="jsonoption">
-								<el-link type="primary">编辑</el-link>
-								<el-link type="primary">删除</el-link>
-							</div>
-						</div>
-					</div>
-
-					<div style="display: block; width: 100%">
-						<div class="input-options" @click="addJson">
-							<el-icon>
-								<Plus />
-							</el-icon>
-							<div>添加参数</div>
-						</div>
-					</div>
-				</el-form-item>
-
-				<!--根据数据类型输出不同表单-->
-
-				<el-form-item label="事件定义描述	" prop="desc">
-					<el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入事件定义描述"></el-input>
-				</el-form-item>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
-				</span>
-			</template>
-		</el-dialog>
-		<EditOption ref="editOptionRef" @typeList="getOptionData" />
-	</div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
-import api from '/@/api/device';
-import uploadVue from '/@/components/upload/index.vue';
-import { Plus, Minus, Right } from '@element-plus/icons-vue';
-import EditOption from './editOption.vue';
-
-import { ElMessage, UploadProps } from 'element-plus';
-
-interface RuleFormState {
-	id: number;
-	productId: number;
-	key: string;
-	level: number;
-	name: string;
-	dictType: string;
-	valueType: Object;
-	status: number;
-	desc: string;
-}
-interface DicState {
-	isShowDialog: boolean;
-	ruleForm: RuleFormState;
-	typeData: RuleFormState[];
-	rules: {};
-}
-
-export default defineComponent({
-	name: 'deviceEditPro',
-	components: { Plus, Minus, Right, EditOption },
-	setup(prop, { emit }) {
-		const formRef = ref<HTMLElement | null>(null);
-		const editOptionRef = ref();
-		const state = reactive<DicState>({
-			isShowDialog: false,
-			typeData: [], //
-			type: '',
-			types: '',
-			productId: 0,
-			valueType: {
-				type: '',
-				maxLength: '',
-				trueText: '是',
-				trueValue: 'true',
-				falseText: '否',
-				falseValue: 'false',
-			},
-			elementType: {
-				type: '',
-				maxLength: '',
-			},
-			enumdata: [
-				{
-					text: '',
-					value: '',
-				},
-			],
-
-			jsondata: [],
-			inputsdata: [],
-			ruleForm: {
-				id: 0,
-				productId: 0,
-				level: 0,
-				name: '',
-				key: '',
-				status: 1,
-				valueType: {
-					type: '',
-					maxLength: '',
-				},
-
-				desc: '',
-			},
-			rules: {
-				name: [{ required: true, message: '事件定义名称不能为空', trigger: 'blur' }],
-				key: [{ required: true, message: '事件定义标识不能为空', trigger: 'blur' }],
-				level: [{ required: true, message: '请选择事件级别', trigger: 'blur' }],
-				type: [{ required: true, message: '请选择数据类型', trigger: 'blur' }],
-			},
-		});
-
-		// 打开弹窗
-		const openDialog = (row: RuleFormState | null, productId: number | null) => {
-			resetForm();
-			api.product.getDataType({ status: -1 }).then((res: any) => {
-				const datat = Object.values(res.dataType);
-				datat.forEach((item, index) => {
-					if (index == 0) {
-						datat[index]['label'] = '基础类型';
-						datat[index]['options'] = item;
-					} else {
-						datat[index]['label'] = '扩展类型';
-						datat[index]['options'] = item;
-					}
-				});
-				console.log(row);
-				console.log(productId);
-				state.typeData = datat || [];
-			});
-			state.ruleForm = row;
-			if (row.valueType) {
-				state.ruleForm = row;
-
-				state.productId = productId;
-				state.valueType = row.valueType;
-				state.ruleForm.valueType.type = row.valueType.type;
-				state.ruleForm.type = row.valueType.type;
-				state.type = row.valueType.type;
-				state.ruleForm.accessMode = row.accessMode;
-				if (row.valueType.elementType) {
-					state.elementType = row.valueType.elementType;
-					state.types = row.valueType.elementType.type;
-				}
-
-				if (row.type == 'enum') {
-					state.enumdata = row.valueType.elements;
-				}
-
-				if (row.type == 'object') {
-					state.jsondata = row.valueType.properties;
-				}
-
-				if (row.type == 'array' && state.types == 'enum') {
-					state.enumdata = row.valueType.elementType.elements;
-				}
-				if (row.type == 'array' && state.types == 'object') {
-					state.jsondata = row.valueType.elementType.properties;
-				}
-			}
-			state.isShowDialog = true;
-		};
-		const resetForm = () => {
-			state.ruleForm = {
-				name: '',
-				key: '',
-				accessMode: '0',
-				status: 1,
-				valueType: {
-					type: '',
-					maxLength: '',
-				},
-
-				desc: '',
-			};
-			state.type = '';
-			state.types = '';
-			state.valueType = {};
-			state.elementType = {};
-			state.jsondata = [];
-			state.enumdata = [
-				{
-					text: '',
-					value: '',
-				},
-			];
-		};
-
-		const seletChange = (val) => {
-			state.type = val;
-			state.ruleForm.type = val;
-
-			console.log(val);
-		};
-		const seletChanges = (val) => {
-			console.log(val);
-			state.types = val;
-			console.log(val);
-		};
-
-		const addEnum = () => {
-			state.enumdata.push({
-				text: '',
-				value: '',
-			});
-		};
-		const delEnum = (index) => {
-			state.enumdata.splice(index, 1);
-		};
-
-		const deljson = (index) => {
-			state.jsondata.splice(index, 1);
-		};
-
-		const addJson = () => {
-			editOptionRef.value.openDialog({ product_id: 0, id: 0 });
-		};
-		const getOptionData = (data) => {
-			state.jsondata.push(data);
-
-			console.log(state.jsondata);
-		};
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
-		// 取消
-		const onCancel = () => {
-			closeDialog();
-		};
-		// 新增
-		const onSubmit = () => {
-			const formWrap = unref(formRef) as any;
-			if (!formWrap) return;
-			formWrap.validate((valid: boolean) => {
-				if (valid) {
-					if (state.ruleForm.id !== 0) {
-						//修改
-						if (state.type == 'enum') {
-							state.valueType.elements = state.enumdata;
-						}
-
-						if (state.type == 'object') {
-							state.valueType.properties = state.jsondata;
-						}
-
-						if (state.type == 'array') {
-							state.valueType.elementType = state.elementType;
-							//如果是选中数组，并选择了枚举
-							if (state.types == 'enum') {
-								state.valueType.elementType = {
-									elements: state.enumdata,
-									type: 'enum',
-								};
-							}
-							//如果是选中数组，并选择了object
-							if (state.types == 'object') {
-								state.valueType.elementType = {
-									properties: state.jsondata,
-									type: 'object',
-								};
-							}
-						}
-
-						console.log(state.valueType);
-
-						state.ruleForm.valueType = state.valueType;
-						state.ruleForm.productId = state.productId;
-						api.model.eventedit(state.ruleForm).then(() => {
-							ElMessage.success('事件定义类型修改成功');
-							closeDialog(); // 关闭弹窗
-							emit('typeList');
-						});
-					} else {
-						//添加
-						if (state.type == 'enum') {
-							state.valueType.elements = state.enumdata;
-						}
-
-						if (state.type == 'object') {
-							state.valueType.properties = state.jsondata;
-						}
-
-						if (state.type == 'array') {
-							state.valueType.elementType = state.elementType;
-							//如果是选中数组，并选择了枚举
-							if (state.types == 'enum') {
-								state.valueType.elementType = {
-									elements: state.enumdata,
-									type: 'enum',
-								};
-							}
-							//如果是选中数组，并选择了object
-							if (state.types == 'object') {
-								state.valueType.elementType = {
-									properties: state.jsondata,
-									type: 'object',
-								};
-							}
-						}
-
-						state.ruleForm.valueType = state.valueType;
-						api.model.eventadd(state.ruleForm).then(() => {
-							ElMessage.success('事件定义类型添加成功');
-							closeDialog(); // 关闭弹窗
-							emit('typeList');
-						});
-					}
-				}
-			});
-		};
-
-		return {
-			editOptionRef,
-			getOptionData,
-			openDialog,
-			deljson,
-			addEnum,
-			delEnum,
-			addJson,
-			seletChange,
-			seletChanges,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			formRef,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-<style>
-.input-box {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	margin-top: 10px;
-}
-
-.input-option {
-	line-height: 30px;
-	padding-top: 5px;
-	width: 140px;
-}
-
-.input-option i {
-	margin: 0px 5px;
-	border: 1px solid #c3c3c3;
-	font-size: 16px;
-}
-
-.input-options {
-	display: flex;
-	align-items: center;
-	color: #409eff;
-	cursor: pointer;
-}
-
-.jslist {
-	width: 100%;
-	border: 1px solid #e8e8e8;
-	padding: 10px;
-	margin-bottom: 10px;
-}
-
-.jsonlist {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.jsonoption {}
-
-.jsonoption a {
-	margin: 0px 10px;
-}</style>

src/views/iot/device/product/detail.vue

@@ -412,7 +412,7 @@ export default defineComponent({
 		};
 
 		const handleClick = (tab: TabsPaneContext, event: Event) => {
-			console.log(tab, event);
+			// console.log(tab, event);
 		};
 
 		const updateScript = (scriptInfo: string) => {
@@ -469,7 +469,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .content {
 	background: #fff;
 	width: 100%;