增加产品详情中的数据解析tab

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

@@ -0,0 +1,12 @@
+<template>
+	<codeEditor class="params" ref="mirrorRef" mode="" :content="content"></codeEditor>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import codeEditor from '/@/components/codeEditor/index.vue'
+const content = ref('')
+onMounted(() => {
+	content.value = '{}'
+})
+</script>

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

@@ -0,0 +1,105 @@
+<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>
+		</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>
+		</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>
+
+<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';
+
+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 });
+	});
+};
+
+defineExpose({ open });
+</script>

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

@@ -3,9 +3,9 @@
 		<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-status"><span :class="developer_status == 1 ? 'on' : 'off'"></span>{{ developer_status == 1 ? '已发布' : '未发布' }}</div>
 
-				<div class="pro-option"  @click="CkOption"> {{developer_status==1?'停用':'启用'}}</div>
+				<div class="pro-option" @click="CkOption"> {{ developer_status == 1 ? '停用' : '启用' }}</div>
 			</div>
 		</div>
 
@@ -62,16 +62,16 @@
 											<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="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>
@@ -82,7 +82,7 @@
 									<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>
+											<el-button size="small" text type="danger" @click="onRowDel(scope.row.key, 'attr')">删除</el-button>
 										</template>
 									</el-table-column>
 								</el-table>
@@ -101,7 +101,7 @@
 									<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>
+											<el-button size="small" text type="danger" @click="onRowDel(scope.row.key, 'fun')">删除</el-button>
 										</template>
 									</el-table-column>
 								</el-table>
@@ -126,14 +126,14 @@
 
 									<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>
+											<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">
+								</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>
@@ -155,22 +155,22 @@
 									<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>
+											<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"
-						/>
+						<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" />
@@ -186,6 +186,8 @@ 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';
@@ -213,7 +215,7 @@ interface TableDataState {
 }
 export default defineComponent({
 	name: 'deviceEditPro',
-	components: { EditDic, EditAttr, EditFun, EditEvent, EditTab },
+	components: { EditDic, EditAttr, EditFun, EditEvent, EditTab, deviceIn, dataParse },
 
 	setup(prop, context) {
 		const route = useRoute();
@@ -224,10 +226,10 @@ export default defineComponent({
 		const editTabRef = ref();
 		const state = reactive<TableDataState>({
 			isShowDialog: false,
-			activeName: '1', // 分类数据
+			activeName: '3', // 分类数据
 			activetab: 'attr', // 分类数据
 			detail: [],
-			developer_status:0,
+			developer_status: 0,
 			tableData: {
 				data: [],
 				total: 0,
@@ -246,7 +248,7 @@ export default defineComponent({
 			const ids = route.params && route.params.id;
 			api.product.detail(ids).then((res: any) => {
 				state.detail = res.data;
-				state.developer_status=res.data.status
+				state.developer_status = res.data.status
 			});
 
 			//第一次加载
@@ -259,29 +261,29 @@ export default defineComponent({
 
 
 		//编辑属性
-		const onEditAttr=(row: TableDataRow)=>{
-			editAttrRef.value.openDialog(row,route.params.id);
+		const onEditAttr = (row: TableDataRow) => {
+			editAttrRef.value.openDialog(row, route.params.id);
 		};
 
 		//编辑功能
-		const onEditFun=(row: TableDataRow)=>{
-			editFunRef.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 onEditEvent = (row: TableDataRow) => {
+			editEventRef.value.openDialog(row, route.params.id);
 		}
 
 		//编辑标签
-		const onEditTag=(row: TableDataRow)=>{
-			editTabRef.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 });
+			editAttrRef.value.openDialog({ product_id: route.params.id, id: 0, accessMode: 0 });
 		};
 
 		//打开添加功能弹窗
@@ -290,12 +292,12 @@ export default defineComponent({
 		};
 		//打开添加事件弹窗
 		const onOpenEditEvent = () => {
-			editEventRef.value.openDialog({ product_id: route.params.id, id: 0,level:0 });
+			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 });
+			editTabRef.value.openDialog({ product_id: route.params.id, id: 0, accessMode: 0 });
 		};
 
 		// 打开修改产品弹窗
@@ -305,7 +307,7 @@ export default defineComponent({
 
 
 		// 删除产品
-		const onRowDel = (key,type) => {
+		const onRowDel = (key, type) => {
 			let msg = `此操作将永久删除该数据吗？，是否继续?`;
 
 			if (key.length === 0) {
@@ -318,37 +320,37 @@ export default defineComponent({
 				type: 'warning',
 			})
 				.then(() => {
-					if(type=='attr'){
-						api.model.propertydel(route.params.id,key).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(() => {
+					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(() => {
+					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(() => {
+					if (type == 'tab') {
+						api.model.tagdel(route.params.id, key).then(() => {
 							ElMessage.success('删除成功');
 							tagdel();
 						});
 					}
 				})
-				.catch(() => {});
+				.catch(() => { });
 		};
 
 
 		//根据不同类型获取列表
-		const getList=()=>{
+		const getList = () => {
 			switch (state.activetab) {
 				case 'attr':
 					getproperty();
@@ -365,27 +367,27 @@ export default defineComponent({
 			}
 		};
 
-		const getproperty=()=>{
+		const getproperty = () => {
 			api.model.property(state.tableData.param).then((res: any) => {
 				state.tableData.data = res.Data;
 				state.tableData.total = res.Total;
 			});
 		};
 
-		const getfunction=()=>{
+		const getfunction = () => {
 			api.model.function(state.tableData.param).then((res: any) => {
 				state.tableData.data = res.Data;
 				state.tableData.total = res.Total;
 			});
 		};
-		const getevent=()=>{
+		const getevent = () => {
 			api.model.event(state.tableData.param).then((res: any) => {
 				state.tableData.data = res.Data;
 				state.tableData.total = res.Total;
 			});
 		};
 
-		const gettab=()=>{
+		const gettab = () => {
 			api.model.tag(state.tableData.param).then((res: any) => {
 				state.tableData.data = res.Data;
 				state.tableData.total = res.Total;
@@ -414,17 +416,17 @@ export default defineComponent({
 			console.log(tab, event);
 		};
 
-		const CkOption=()=>{
+		const CkOption = () => {
 
-			if(state.developer_status==1){
-				api.product.undeploy({id:route.params.id}).then((res: any) => {
+			if (state.developer_status == 1) {
+				api.product.undeploy({ id: route.params.id }).then((res: any) => {
 					ElMessage.success('操作成功');
-					state.developer_status=0;
+					state.developer_status = 0;
 				});
-			}else{
-				api.product.deploy({id:route.params.id}).then((res: any) => {
+			} else {
+				api.product.deploy({ id: route.params.id }).then((res: any) => {
 					ElMessage.success('操作成功');
-					state.developer_status=1;
+					state.developer_status = 1;
 				});
 			}
 
@@ -463,34 +465,41 @@ export default defineComponent({
 	},
 });
 </script>
-  <style>
+<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;
@@ -501,30 +510,36 @@ export default defineComponent({
 	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;
@@ -537,37 +552,46 @@ tr {
 	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 {
+
+.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;
@@ -576,11 +600,13 @@ tr {
 	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;
@@ -588,9 +614,9 @@ tr {
 	padding: 20px;
 	border-bottom: #e8e8e8 1px solid;
 }
+
 .wu-box .wu-title .title {
 	font-size: 18px;
-}
-</style>
+}</style>