完成黑名单

src/api/system/index.ts

@@ -1,4 +1,7 @@
 import { get, post, del, put, file } from '/@/utils/request';
+import getOrigin from '/@/utils/origin';
+const baseUrl = getOrigin(import.meta.env.VITE_SERVER_URL);
+console.log(baseUrl)
 
 export default {
   sysinfo: () => get('/sysinfo'),
@@ -143,5 +146,13 @@ export default {
   plugin: {
     getList: (params: object) => get('/system/plugins/list', params),
     changeStatus: (params: object) => post('/system/plugins/set', params),
+  },
+  blackList: {
+    getList: (params: object) => get('/system/blacklist/list', params),
+    add: (data: object) => post('/system/blacklist/add', data),
+    delete: (ids: number) => del('/system/blacklist/delete', { ids }),
+    edit: (data: object) => put('/system/blacklist/edit', data),
+    detail: (params: object) => get('/system/blacklist/get', params),
+    changeStatus: (data: object) => post('/system/blacklist/status', data),
   }
 }

src/views/iot/network/server/component/list.vue

@@ -84,7 +84,7 @@
 
           <el-popover
             placement="bottom"
-            :width="160"
+            :width="170"
             trigger="click"
           >
             <template #reference>

src/views/system/manage/blacklist/component/editAttr.vue

@@ -0,0 +1,520 @@
+<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="type" >
+					<el-select v-model="valueType.type" placeholder="请选择数据类型" @change="seletChange" :disabled="ruleForm.id!== 0 ?true : false">
+						<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="accessMode">
+					<el-radio-group v-model="ruleForm.accessMode" >
+						<el-radio :label="0">读写</el-radio>
+						<el-radio :label="1">只读</el-radio>
+					</el-radio-group>
+				</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;
+	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: [],
+
+			ruleForm: {
+				id:0,
+				productId:0,
+				name: '',
+				key: '',
+				transportProtocol: '',
+				accessMode: 0,
+				status: 1,
+				valueType: {
+					type: '',
+					maxLength: '',
+				},
+
+				desc: '',
+			},
+			rules: {
+				name: [{ required: true, message: '属性定义名称不能为空', trigger: 'blur' }],
+				key: [{ required: true, message: '属性定义标识不能为空', trigger: 'blur' }],
+				accessMode: [{ 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: '',
+				transportProtocol: '',
+				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'
+								}
+							}
+						}
+
+						state.ruleForm.valueType = state.valueType;
+						state.ruleForm.productId = state.productId
+						api.model.propertyedit(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.propertyadd(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/system/manage/blacklist/component/editEvent.vue

@@ -0,0 +1,522 @@
+<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="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;
+	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: [],
+
+			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/system/manage/blacklist/component/editFun.vue

@@ -0,0 +1,538 @@
+<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="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, 'fun')">删除</el-link>
+							</div>
+						</div>
+					</div>
+
+					<div style="display: block; width: 100%">
+						<div class="input-options" @click="addJson('json')">
+							<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('json')">
+							<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;
+	name: string;
+	dictType: string;
+	valueType: Object;
+	inputs: Object;
+	output: 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: {
+				productId: 0,
+				name: '',
+				key: '',
+				inputs: [],
+				output: [],
+				valueType: {
+					type: '',
+					maxLength: '',
+				},
+
+				desc: '',
+			},
+			rules: {
+				name: [{ required: true, message: '功能定义名称不能为空', trigger: 'blur' }],
+				key: [{ 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(datat);
+				state.typeData = datat || [];
+			});
+
+
+console.log(row);
+			state.ruleForm = row;
+			if (row.inputs) {
+				state.ruleForm = row;
+
+				state.productId = productId;
+				state.valueType = row.output;
+			
+				
+				//state.ruleForm.valueType.type = row.valueType.type;
+				//state.ruleForm.type = row.valueType.type;
+				state.type = row.output.type;
+				if(row.output.elementType){
+					state.elementType = row.output.elementType;
+					state.types = row.output.elementType.type;
+
+						if(state.type == 'array' && state.types=='enum'){
+							state.enumdata=row.output.elementType.elements
+						}
+						if(state.type == 'array' && state.types=='object'){
+							state.jsondata=row.output.elementType.properties
+						}
+						
+				}
+			
+				if (state.type == 'object') {
+						state.jsondata = row.output.properties;
+				}
+				state.inputsdata = row.inputs;
+				
+			}
+			state.isShowDialog = true;
+		};
+		const resetForm = () => {
+			state.ruleForm = {
+				name: '',
+				key: '',
+				status: 1,
+				valueType: {
+					type: '',
+					maxLength: '',
+				},
+
+				desc: '',
+			};
+			state.type='';
+			state.types='';
+			state.inputsdata =[];
+			state.elementType=[];
+			state.valueType={};
+		};
+
+		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, type) => {
+			if (type == 'fun') {
+				state.inputsdata.splice(index, 1);
+			} else {
+				state.jsondata.splice(index, 1);
+			}
+		};
+
+		const addJson = (type) => {
+			editOptionRef.value.openDialog({ product_id: 0, id: 0, type_data: type });
+		};
+		const getOptionData = (data, type_data) => {
+			if (type_data == 'fun') {
+				state.inputsdata.push(data);
+			} else {
+				state.jsondata.push(data);
+			}
+
+			console.log(state.jsondata);
+			console.log(type_data);
+		};
+		// 关闭弹窗
+		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.inputs = state.inputsdata;
+						state.ruleForm.output = state.valueType;
+						state.ruleForm.productId = state.productId;
+						api.model.functionedit(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.inputs = state.inputsdata;
+						state.ruleForm.output = state.valueType;
+
+						api.model.functionadd(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/system/manage/blacklist/component/editOption.vue

@@ -0,0 +1,347 @@
+<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="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"  :disabled="item.type=='object'" />
+						</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="maxLength" 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 class="input-options" @click="addJson">
+							<el-icon   ><Plus /></el-icon>
+							<div>添加参数</div>
+						</div>
+				</el-form-item>
+
+
+			<div v-if="type == 'array'">
+				<el-form-item label="元素类型" prop="type" >
+					<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="参数描述	" 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>
+	</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 { ElMessage, UploadProps } from 'element-plus';
+
+interface RuleFormState {
+	id: number;
+	name: string;
+	desc: string;
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+	typeData: RuleFormState[];
+	rules: {};
+}
+
+export default defineComponent({
+	name: 'deviceEditPro',
+	components: { Plus, Minus,Right },
+	setup(prop, { emit }) {
+		const formRef = ref<HTMLElement | null>(null);
+
+		const state = reactive<DicState>({
+			isShowDialog: false,
+			typeData: [], //
+			type: '',
+			types:'',
+			valueType: {
+				type: '',
+				maxLength: '',
+			},
+			elementType: {
+				type: '',
+				maxLength: '',
+			},
+			enumdata: [
+				{
+					'text': '',
+					'value': '',
+				},
+			],
+
+			ruleForm: {
+				id:0,
+				name: '',
+				key: '',
+				transportProtocol: '',
+				accessMode: '0',
+				status: 1,
+				valueType: {
+					type: '',
+					maxLength: '',
+				},
+
+				desc: '',
+			},
+			rules: {
+				name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
+				key: [{ required: true, message: '参数标识不能为空', trigger: 'blur' }],
+				accessMode: [{ required: true, message: '请选择是否只读', trigger: 'blur' }],
+			},
+		});
+
+		// 打开弹窗
+		const openDialog = (row: RuleFormState | 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(datat);
+				state.typeData = datat || [];
+			});
+
+			if (row) {
+				// api.dict.getType(row.dictId).then((res:any)=>{
+				//   state.ruleForm = res.data.dictType
+				// }
+				console.log(row);
+				state.ruleForm = row;
+			}
+			state.isShowDialog = true;
+		};
+		const resetForm = () => {
+			state.ruleForm = {
+				name: '',
+				desc: '',
+			};
+			state.valueType={};
+			state.enumdata=[{
+					'text': '',
+					'value': '',
+				}];
+			state.elementType={};
+		};
+
+		const seletChange = (val) => {
+			state.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 addJson=()=>{
+
+		}
+		// 关闭弹窗
+		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) {
+						//修改
+						api.product.edit(state.ruleForm).then(() => {
+							ElMessage.success('参数类型修改成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList');
+						});
+					} else {
+						//添加
+						if(state.type=='enum'){
+							state.valueType.elements=state.enumdata;
+						}
+
+						state.ruleForm.valueType = state.valueType;
+						ElMessage.success('参数类型添加成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList',state.ruleForm,state.ruleForm.type_data);
+					}
+				}
+			});
+		};
+
+		return {
+			openDialog,
+			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
+}
+
+</style>

src/views/system/manage/blacklist/component/editPro.vue

@@ -0,0 +1,212 @@
+<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="90px">
+        <el-form-item label="IP地址" prop="ip">
+          <el-input type="textarea" v-model="ruleForm.ip" placeholder="请输入IP地址" />
+          <div style="color: #a4a4a4;line-height: 20px;">
+            <div>支持添加IP：如果添加多个IP请用“,”隔开</div>
+            <div>支持添加IP段，如192.168.0.0/24</div>
+            <div>支持添加IP范围，格式如：192.168.1.xx-192.168.1.xx</div>
+          </div>
+
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="ruleForm.status">
+            <el-radio label="1">正常</el-radio>
+            <el-radio label="0">已禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注	" prop="remark">
+          <el-input v-model="ruleForm.remark" 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>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance } from 'vue';
+import api from '/@/api/system';
+import uploadVue from '/@/components/upload/index.vue';
+import { ElMessage, UploadProps } from "element-plus";
+import getOrigin from '/@/utils/origin'
+
+interface RuleFormState {
+  id: number;
+  // name: string;
+  // dictType: string;
+  status: string;
+  remark: string;
+}
+interface DicState {
+  isShowDialog: boolean;
+  ruleForm: RuleFormState;
+  cateData: RuleFormState[];
+  deptData: RuleFormState[];
+  messageData: RuleFormState[];
+  tranData: RuleFormState[];
+  rules: {}
+}
+
+export default defineComponent({
+  name: 'deviceEditPro',
+  components: { uploadVue },
+  setup(prop, { emit }) {
+    const formRef = ref<HTMLElement | null>(null);
+    const baseURL: string | undefined | boolean = getOrigin(import.meta.env.VITE_API_URL)
+
+    const { proxy } = getCurrentInstance() as any;
+    const { network_server_type, network_protocols } = proxy.useDict('network_server_type', 'network_protocols');
+
+    const state = reactive<DicState>({
+      isShowDialog: false,
+      cateData: [], // 分类数据
+      deptData: [], // 
+      messageData: [], // 
+      tranData: [], // 
+      imageUrl: "", // 
+      singleImg: baseURL + "/product/icon/upload",
+
+      ruleForm: {
+        id: 0,
+        // name: '',
+        // categoryId: '',
+        // deptId: '',
+        // messageProtocol: '',
+        // transportProtocol: '',
+        // deviceType: '设备',
+        status: '1',
+        remark: ''
+      },
+      rules: {
+        ip: [
+          { required: true, message: "IP地址不能为空", trigger: "blur" }
+        ],
+        status: [
+          { required: true, message: "备注不能为空", trigger: "change" }
+        ],
+        remark: [
+          { required: true, message: "备注不能为空", trigger: "blur" }
+        ]
+      }
+    });
+
+
+
+
+    // const handleAvatarSuccess: UploadProps['onSuccess'] = (
+    //   response) => {
+
+    //   console.log(response);
+
+    //   state.imageUrl = response
+    //   state.ruleForm.icon = response
+    // }
+
+
+    // 打开弹窗
+    const openDialog = (row: RuleFormState | null) => {
+      resetForm();
+      if (row) {
+        state.ruleForm = row;
+      }
+      state.isShowDialog = true;
+    };
+    const resetForm = () => {
+      state.ruleForm = {
+        id: 0,
+        // name: '',
+        // dictType: '',
+        // deviceType: '设备',
+        status: '1',
+        remark: ''
+      }
+    };
+    // 关闭弹窗
+    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) {
+            //修改
+            api.blackList.edit(state.ruleForm).then(() => {
+              ElMessage.success('黑名单修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          } else {
+            //添加
+            delete state.ruleForm.id;
+            console.log(state.ruleForm);
+            api.blackList.add(state.ruleForm).then(() => {
+              ElMessage.success('黑名单添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }
+        }
+      });
+    };
+
+
+    return {
+      openDialog,
+      // handleAvatarSuccess,
+      closeDialog,
+      onCancel,
+      onSubmit,
+      network_server_type,
+      network_protocols,
+      formRef,
+      ...toRefs(state),
+    };
+  },
+});
+</script>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>

src/views/system/manage/blacklist/component/editTab.vue

@@ -0,0 +1,518 @@
+<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="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.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="accessMode">
+					<el-radio-group v-model="ruleForm.accessMode">
+						<el-radio :label="0">读写</el-radio>
+
+						<el-radio :label="1">只读</el-radio>
+					</el-radio-group>
+				</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;
+	accessMode: 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: [],
+
+			ruleForm: {
+				id: 0,
+				productId: 0,
+				name: '',
+				key: '',
+				transportProtocol: '',
+				accessMode: 0,
+				status: 1,
+				valueType: {
+					type: '',
+					maxLength: '',
+				},
+
+				desc: '',
+			},
+			rules: {
+				name: [{ required: true, message: '标签定义名称不能为空', trigger: 'blur' }],
+				key: [{ required: true, message: '标签定义标识不能为空', trigger: 'blur' }],
+				accessMode: [{ 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;
+					}
+				});
+
+				state.typeData = datat || [];
+			});
+			console.log(row);
+			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
+				}
+			}
+
+			console.log(row);
+			state.isShowDialog = true;
+		};
+		const resetForm = () => {
+			state.ruleForm = {
+				name: '',
+				key: '',
+				transportProtocol: '',
+				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'
+								}
+							}
+						}
+						state.ruleForm.valueType = state.valueType;
+						state.ruleForm.productId = state.productId;
+
+						console.log(state.ruleForm);
+						api.model.tagedit(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
+								}
+							}
+							//如果是选中数组，并选择了object
+							if(state.types=='object'){
+								state.valueType.elementType = {
+									properties: state.jsondata,
+									type: 'object'
+								}
+							}
+						}
+
+						state.ruleForm.valueType = state.valueType;
+						api.model.tagadd(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/system/manage/blacklist/edit.vue

@@ -0,0 +1,236 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '城市'" v-model="dialogVisible" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
+				<el-form-item label="所属城市" prop="">
+					<el-tree-select
+						v-model="ruleForm.parentId"
+						:data="treeData"
+						:props="{
+							label: 'name',
+							children: 'children'
+						}"
+						node-key="id"
+						:clearable="true"
+						check-strictly
+						style="width: 100%;"
+						:render-after-expand="true"
+					/>
+				</el-form-item>
+				<el-form-item label="城市名称" prop="name">
+					<el-input v-model="ruleForm.name" placeholder="请输入城市名称" />
+				</el-form-item>
+				<el-form-item label="城市编号" prop="code">
+					<el-input v-model="ruleForm.code" placeholder="请输入城市编号" />
+				</el-form-item>
+				<el-form-item label="排序" prop="code">
+					<el-input v-model.number="ruleForm.sort" placeholder="请输入序号" />
+				</el-form-item>
+				<el-form-item label="状态" prop="status">
+					<el-radio v-model="ruleForm.status" :label="1">启用</el-radio>
+					<el-radio v-model="ruleForm.status" :label="0">禁用</el-radio>
+				</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>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, unref, nextTick, onMounted } from 'vue';
+import api from '/@/api/system';
+import datahubApi from '/@/api/datahub';
+import { ElMessage } from 'element-plus';
+import { useStore } from '/@/store/index';
+interface RuleFormState {
+	id: number;
+	parentId: number | string;
+	name: string;
+	code:  string;
+	sort: string;
+	// lnt: number;
+	// lat: number;
+	// principal: string;
+	// types: number;
+	status: number;
+}
+
+export default defineComponent({
+	name: 'headStationLoop',
+	setup(prop, { emit }) {
+		const formRef = ref<HTMLElement | null>(null);
+		const state = reactive({
+			dialogVisible: false,
+			map: null,
+			ruleForm: {
+				id: 0,
+				parentId: '',
+				name: '',
+				code: '',
+				sort: 0,
+				status: 1
+				// position: '',
+				// lnt: '',
+				// lat: '',
+				// principal: '',
+				// types: 1,
+				// status: 1
+			},
+			keyword: '',
+			rules: {
+				name: [{ required: true, message: '城市名称不能为空', trigger: 'blur' }],
+				code: [{ required: true, message: '城市编码不能为空', trigger: 'blur' }],
+				status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+			},
+			treeData: [],
+			dataHubList: [],
+			mapLocal: null as any
+		})
+		const store = useStore();
+		// 打开弹窗
+		const openDialog = (row: any, tree: any) => {
+			resetForm()
+			queryDataHubList()
+			state.treeData = tree
+
+			if (row) {
+				(state.ruleForm as any).id = row.id
+				getDetail()
+			}
+			// nextTick(() => {
+			// 	initMap()
+			// }) 
+			state.dialogVisible = true
+		}
+		
+		const queryDataHubList = () => {
+			datahubApi.template.allList({})
+				.then((res: any) => {
+					state.dataHubList = res.list || [];
+				});
+		};
+		const resetForm = () => {
+			state.ruleForm = {
+				id: 0,
+				parentId: '',
+				name: '',
+				code: '',
+				sort: 0
+			}
+		}
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.dialogVisible = false
+		}
+		// 取消
+		const onCancel = () => {
+			closeDialog()
+			state.keyword = ''
+		}
+		const getDetail = () => {
+			api.city.detail(state.ruleForm.id)
+				.then((res: any) => {
+					state.ruleForm = {
+						...res,
+						parentId: res.parentId === -1 ? '' : res.parentId
+					}
+				})
+		}
+		// 新增
+		const onSubmit = () => {
+			const formWrap = unref(formRef) as any
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					let params = { ...state.ruleForm };
+					(params.parentId as any) = params.parentId || -1
+					if (state.ruleForm.id) {
+						//修改
+						api.city.edit(params).then(() => {
+							ElMessage.success('城市修改成功')
+							emit('queryList')
+							closeDialog() // 关闭弹窗
+						})
+					} else {
+						//添加
+						console.log(params)
+						api.city.add(params).then(() => {
+							ElMessage.success('城市添加成功')
+							emit('queryList')
+							closeDialog() // 关闭弹窗
+						})
+					}
+				}
+			})
+		}
+		const initMap = () => {
+			let BMapGL = (window as any).BMapGL
+			let map = new BMapGL.Map("map-container");
+			// 获取布局配置信息
+			let getThemeConfig =  store.state.themeConfig.themeConfig;
+			// 116.404, 39.915
+			let point = new BMapGL.Point(state.ruleForm.lnt || 116.404, state.ruleForm.lat || 39.915);
+			let zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
+			let cityCtrl = new BMapGL.CityListControl()
+			if(getThemeConfig.isIsDark) {
+				map.setMapStyleV2({     
+					styleId: 'b8d841ee37fd5bd41e742049b6fcd0f5'
+				});
+			}
+
+			map.centerAndZoom(point, 15); 
+			
+			map.enableScrollWheelZoom(true); // 开启滚轮缩放
+			map.addControl(zoomCtrl);
+			map.addControl(cityCtrl);
+			if (state.ruleForm.lnt && state.ruleForm.lat) {
+				let marker = new BMapGL.Marker(new BMapGL.Point(state.ruleForm.lnt, state.ruleForm.lat));
+				// 在地图上添加点标记
+				map.addOverlay(marker);
+			}
+
+			state.mapLocal = new BMapGL.LocalSearch(map, {
+				renderOptions:{map: map}
+			})
+
+			map.addEventListener('click', (e: any) => {
+				console.log('map--click', e)
+				let point = e.latlng
+				state.ruleForm.lnt = point.lng
+				state.ruleForm.lat = point.lat
+			})
+		}
+
+		const onLocalChange = () => {
+			state.mapLocal.search(state.keyword)
+		}
+
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+			formRef,
+			onLocalChange,
+			// onMapClick,
+			// onMarkersset,
+			// mapReady,
+			...toRefs(state)
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.mb10 {
+	margin-bottom: 10px;
+}
+.mr10 {
+	margin-right: 10px;
+}
+</style>

src/views/system/manage/blacklist/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="system-dic-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+          <el-form-item label="IP地址" prop="keyWord">
+            <el-input v-model="tableData.param.keyWord" placeholder="请输入IP地址" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
+          </el-form-item>
+          <!-- <el-form-item label="状态" prop="status" style="width: 200px;">
+            <el-select v-model="tableData.param.status" placeholder="状态" clearable size="default" style="width: 240px">
+              <el-option label="正常" :value="1" />
+              <el-option label="停用" :value="0" />
+            </el-select>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="typeList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAdd">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新建
+            </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)" v-auth="'del'">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              批量删除
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
+        <el-table-column type="selection" width="55" align="center" />
+        <!--        <el-table-column label="ID" align="center" prop="id" width="60"  v-col="'id'"/>-->
+        <!-- <el-table-column label="标识" prop="key" :show-overflow-tooltip="true" v-col="'key'" /> -->
+        <el-table-column label="IP" prop="ip" />
+        <!-- <el-table-column label="名称" prop="name" :show-overflow-tooltip="true" v-col="'name'" /> -->
+         <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" />
+        <!-- <el-table-column label="分类" prop="categoryName" :show-overflow-tooltip="true" v-col="'categoryName'" /> -->
+        <el-table-column
+          align="center"
+          prop="status"
+          label="状态"
+        >
+        <template #default="scope">
+          <el-tag
+            v-if="scope.row.status == 0"
+            class="ml-2"
+            type="info"
+          >停用</el-tag>
+          <el-tag
+            v-else
+            class="ml-2"
+            type="success"
+          >正常</el-tag>
+        </template>
+      </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" align="center" width="180"></el-table-column>
+        <el-table-column label="操作" width="150" align="center" fixed="right">
+          <template #default="scope">
+            <!-- <router-link :to="'/iotmanager/device/product/detail/' + scope.row.id" class="link-type" style="padding-right: 12px;font-size: 12px;color: #409eff;">
+              <span>详情</span>
+            </router-link> -->
+            <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" >编辑</el-button>
+            <el-button size="small" text type="danger" @click="onRowDel(scope.row)" >删除</el-button>
+            <el-popover
+              placement="bottom"
+              :width="154"
+              trigger="click"
+            >
+              <template #reference>
+                <el-button
+                  size="small"
+                  type="text"
+                  class="more-btn"
+                  @click="isShowMore = !isShowMore"
+                  
+                >更多
+                  <i
+                    style="margin-left: 2px;"
+                    :class="isShowMore ? 'fa fa-angle-down':'fa fa-angle-up'"
+                  ></i>
+                </el-button>
+              </template>
+              <div class="more-opearte-wrap">
+                <el-button
+                  @click="onChangeStatus(scope.row.id, 1)"
+                  :disabled="scope.row.status == 1"
+                  link
+                  size="small"
+                  key="success"
+                  type="success"
+                >设为启用</el-button>
+                <el-divider direction="vertical" />
+                <el-button
+                  @click="onChangeStatus(scope.row.id, 0)"
+                  :disabled="scope.row.status == 0"
+                  link
+                  size="small"
+                  key="warning"
+                  type="warning"
+                >设为禁用</el-button>
+              </div>
+            </el-popover>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
+    </el-card>
+    <EditDic ref="editDicRef" @typeList="typeList" />
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import EditDic from './component/editPro.vue';
+// import api from '/@/api/device';
+import api from '/@/api/system';// blackList
+
+// 定义接口来定义对象的类型
+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;
+      keyWord: string;
+      dateRange: string[];
+    };
+  };
+  isShowMore: boolean
+}
+
+export default defineComponent({
+  name: 'deviceproduct',
+  components: { EditDic },
+  setup() {
+    const addDicRef = ref();
+    const editDicRef = ref();
+    const queryRef = ref();
+    const state = reactive<TableDataState>({
+      ids: [],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 10,
+          keyWord: '',
+          dateRange: [],
+        },
+      },
+      isShowMore: true
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      typeList();
+    };
+    const typeList = () => {
+      state.tableData.loading = true;
+      api.blackList.getList(state.tableData.param).then((res: any) => {
+        console.log(res);
+        state.tableData.data = res.list;
+        state.tableData.total = res.total;
+      }).finally(() => (state.tableData.loading = false));
+    };
+    // 改变状态
+    const onChangeStatus = (id: number, status: number) => {
+      api.blackList.changeStatus({ id: id, status: status }).then((res: any) => {
+        ElMessage.success(status == 1 ? '已开启' : '已关闭');
+        typeList();
+      })
+    };
+    // 打开新增产品弹窗
+    const onOpenAdd = () => {
+      editDicRef.value.openDialog();
+    };
+    // 打开修改产品弹窗
+    const onOpenEditDic = (row: TableDataRow) => {
+      editDicRef.value.openDialog(row);
+    };
+    // 删除产品
+    const onRowDel = (row: TableDataRow) => {
+      let msg = '你确定要删除所选数据？';
+      let ids: number[] = [];
+      if (row) {
+        msg = `此操作将永久删除IP：“${row.ip}”，是否继续?`;
+        ids = [row.id];
+      } else {
+        ids = state.ids;
+      }
+      if (ids.length === 0) {
+        ElMessage.error('请选择要删除的数据。');
+        return;
+      }
+      ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          api.blackList.delete(ids).then(() => {
+            ElMessage.success('删除成功');
+            typeList();
+          });
+        })
+        .catch(() => { });
+    };
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return;
+      formEl.resetFields();
+      typeList();
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection: TableDataRow[]) => {
+      state.ids = selection.map((item) => item.id);
+    };
+    return {
+      addDicRef,
+      editDicRef,
+      queryRef,
+      onChangeStatus,
+      onOpenAdd,
+      onOpenEditDic,
+      onRowDel,
+      typeList,
+      resetQuery,
+      handleSelectionChange,
+      ...toRefs(state),
+    };
+  },
+});
+</script>