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

README.md

@@ -21,4 +21,7 @@
 
 **.env.development.local**
 
-| 可在本地添加此文件进行配置，会覆盖默认配置及【.env.development】的配置，并且git会忽略这个文件，不会对其他的开发者的环境造成影响
+| 可在本地添加此文件进行配置，会覆盖默认配置及【.env.development】的配置，并且git会忽略这个文件，不会对其他的开发者的环境造成影响
+
+
+<el-form :model="params" inline ref="queryRef" @submit.prevent @keyup.enter="queryList">

src/hooks/useCommonIce104.ts

@@ -53,9 +53,7 @@ export function useSearch<T>(api: any, resKey: string, expandParams?: any) {
     loading.value = true;
     params.total = 0;
     let res = await api(params).finally(() => loading.value = false)
-    console.log(res)
     tableData.value = (resKey ? (res[resKey]) : (res)) || [];
-    console.log(tableData.value)
     params.total = res.total;
   };
 

src/i18n/lang/zh-cn.ts

@@ -94,7 +94,8 @@ export default {
 		dropdown3: '404',
 		dropdown4: '401',
 		dropdown5: '退出登录',
-		dropdown6: '代码仓库',
+		dropdown7: '代码仓库',
+		dropdown8: '在线文档',
 		searchPlaceholder: '菜单搜索：支持中文、路由路径',
 		newTitle: '通知',
 		newBtn: '全部已读',

src/layout/navBars/breadcrumb/user.vue

@@ -65,6 +65,7 @@
         <el-dropdown-menu>
           <!-- <el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item> -->
           <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
+          <el-dropdown-item command="document">{{ $t('message.user.dropdown8') }}</el-dropdown-item>
           <el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
         </el-dropdown-menu>
       </template>
@@ -177,6 +178,8 @@ export default defineComponent({
           .catch(() => { });
       } else if (path === 'wareHouse') {
         window.open('https://sagoo.cn');
+      } else if (path === 'document') {
+        window.open('https://iotdoc.sagoo.cn/')
       } else {
         router.push(path);
       }

src/theme/dark.scss

@@ -14,7 +14,7 @@
 	--next-text-color-regular    : #9b9da1;
 	--next-text-color-placeholder: #7a7a7a;
 	--next-color-hover           : #3c3c3c;
-	--next-color-hover-rgba      : #17181B;
+	--next-color-hover-rgba      : #3C3C3C;
 
 
 	// root

src/theme/fast.scss

@@ -11,7 +11,6 @@
 	border-radius: var(--el-card-border-radius);
 
 	&.bg {
-		padding: 20px;
 		background: var(--el-color-white);
 	}
 
@@ -23,11 +22,6 @@
 		border: 1px solid var(--next-border-color-light);
 	}
 
-	&:hover {
-		box-shadow: 0 2px 12px var(--next-color-dark-hover);
-		transition: all ease 0.3s;
-	}
-
 	> .el-card,
 	&.el-card {
 		height: 100%;

src/views/iot/alarm/setting/component/edit.vue

@@ -639,7 +639,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .inline {
 	display: inline-flex;
 }

src/views/iot/alarm/setting/index.vue

@@ -1,24 +1,22 @@
 <template>
-	<div class="page page-full">
-		<div class="">
-			<el-form :model="tableData.param" ref="queryRef" inline>
-				<el-form-item class="mb-0">
-					<el-button type="primary" class="ml10" @click="onOpenAdd" v-auth="'add'">
-						<el-icon>
-							<ele-FolderAdd />
-						</el-icon>
-						新增告警
-					</el-button>
-					<el-button type="primary" class="ml10" @click="onOpenLevel" v-auth="'level'">
-						<el-icon>
-							<ele-Setting />
-						</el-icon>
-						级别设置
-					</el-button>
-				</el-form-item>
-			</el-form>
-		</div>
-		<el-divider />
+	<div class="page padding bg page-full">
+		<el-form :model="tableData.param" ref="queryRef" inline>
+			<el-form-item class="mb-0">
+				<el-button type="primary" @click="onOpenAdd" v-auth="'add'">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					新增告警
+				</el-button>
+				<el-button type="primary" @click="onOpenLevel" v-auth="'level'">
+					<el-icon>
+						<ele-Setting />
+					</el-icon>
+					级别设置
+				</el-button>
+			</el-form-item>
+		</el-form>
+		<el-divider class="my-5" />
 		<el-row class="page-full-part">
 			<el-col :span="6" v-for="(item, index) in tableData.data" :key="index">
 				<div class="card">
@@ -30,20 +28,20 @@
 								</div>
 								<div class="card-item-body">
 									<div class="card-item-header">
-										<div class="" v-col="'name'">
+										<div v-col="'name'">
 											<div class="ellipsis card-item-header-name" style="width: 100%; height: 45px">{{ item.name }}</div>
 										</div>
 									</div>
 									<div class="card-item-content" v-col="'alarm'">
 										<div>
 											<label>触发：</label>
-											<div class="">
+											<div>
 												<div>级别：</div>
 											</div>
 										</div>
 										<div>
 											<label>{{ item.triggerTypeName }}</label>
-											<div class="">
+											<div>
 												<div>{{ item.alarmLevel.name }}</div>
 											</div>
 										</div>
@@ -109,7 +107,6 @@ import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import EditDic from './component/edit.vue';
 import LevelDic from './component/level.vue';
-
 import alarm from '/@/api/alarm';
 
 // 定义接口来定义对象的类型
@@ -255,7 +252,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped lang="scss">
 .el-button.is-text:not(.is-disabled).is-has-bg {
 	background-color: var(--next-border-color-light);
 }
@@ -288,7 +285,8 @@ export default defineComponent({
 .pro-table-card-item {
 	display: flex;
 	justify-content: stretch;
-	.card-item-avatar{
+
+	.card-item-avatar {
 		display: flex;
 		align-items: center;
 	}
@@ -402,7 +400,7 @@ export default defineComponent({
 	border-radius: 0;
 }
 
-*/ .ant-btn-link {
+.ant-btn-link {
 	color: #1d39c4;
 	border-color: transparent;
 	background: transparent;

src/views/iot/certificate/index.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="page">
 		<el-card shadow="nover">
-			<el-form :model="state.tableData.param" ref="queryRef" inline label-width="60px">
-				<el-form-item label="关键字" prop="keyWord">
-					<el-input v-model="state.tableData.param.name" placeholder="请输入关键字" clearable @keyup.enter="queryList" />
+			<el-form :model="state.tableData.param" ref="queryRef" inline @submit.prevent @keyup.enter="queryList">
+				<el-form-item label="证书名称" prop="keyWord">
+					<el-input v-model="state.tableData.param.name" placeholder="请输入证书名称" clearable />
 				</el-form-item>
 				<el-form-item>
 					<el-button v-auth="'query'" type="primary" class="ml10" @click="queryList">
@@ -44,7 +44,7 @@
 						<span v-noauth="'startOrStop'">{{ scope.row.status ? '正常' : '暂停' }}</span>
 					</template>
 				</el-table-column>
-				<el-table-column v-col="'handle'" label="操作" width="180" align="center" fixed="right">
+				<el-table-column v-col="'handle'" label="操作" width="100" align="center" fixed="right">
 					<template #default="scope">
 						<el-button size="small" v-auth="'edit'" text type="primary" @click="operate('editParams', scope.row)">编辑</el-button>
 						<el-button size="small" v-auth="'del'" text type="info" @click="operate('delete', scope.row)">删除</el-button>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="page page-full">
-    <el-row :gutter="16" class="h-full">
+    <el-row :gutter="15" class="h-full">
       <el-col :span="6" class="h-full">
         <el-card shadow="nover" class="h-full">
           <el-scrollbar v-loading="treeLoading">

src/views/iot/device/channel/component/detail.vue

@@ -1,64 +1,66 @@
 <template>
-	<el-dialog title="设备通道详情" v-model="dialogVisible" width="900px" :before-close="clsoeDialog" :close-on-click-modal="false">
-		<el-tabs v-model="activeName">
-			<el-tab-pane label="通道信息" name="1">
-				<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 90%; margin: 0 auto">
-					<el-form-item label="通道名称" prop="title">
-						<el-input v-model="temp.title" disabled placeholder="请输入通道名称" />
-					</el-form-item>
-					<el-form-item label="注册码" prop="number">
-						<el-input v-model="temp.number" disabled placeholder="请输入注册码" />
-					</el-form-item>
-					<el-form-item label="设备地址" prop="slaveId">
-						<el-input v-model.number="temp.slaveId" disabled placeholder="请输入设备地址" />
-					</el-form-item>
-					<!-- <el-form-item label="调度周期(秒)" prop="interval">
+	<el-dialog title="设备通道详情" v-model="dialogVisible" width="900px" :before-close="closeDialog" :close-on-click-modal="false">
+		<div class="page-full" style="height: 60vh;">
+			<el-tabs v-model="activeName">
+				<el-tab-pane label="通道信息" name="1">
+					<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 90%; margin: 0 auto">
+						<el-form-item label="通道名称" prop="title">
+							<el-input v-model="temp.title" disabled placeholder="请输入通道名称" />
+						</el-form-item>
+						<el-form-item label="注册码" prop="number">
+							<el-input v-model="temp.number" disabled placeholder="请输入注册码" />
+						</el-form-item>
+						<el-form-item label="设备地址" prop="slaveId">
+							<el-input v-model.number="temp.slaveId" disabled placeholder="请输入设备地址" />
+						</el-form-item>
+						<!-- <el-form-item label="调度周期(秒)" prop="interval">
             <el-input v-model="temp.interval" placeholder="请输入调度周期" />
           </el-form-item> -->
-					<el-form-item label="" prop="">
-						<div align="right">
-							<el-button @click="clsoeDialog"> 取 消 </el-button>
-							<!-- <el-button type="primary" @click="updateData()"> 保 存 </el-button> -->
-						</div>
-					</el-form-item>
-				</el-form>
-			</el-tab-pane>
-			<el-tab-pane label="任务" name="2">
-				<div class="filter-container">
-					<el-button class="filter-item" type="primary" icon="el-icon-circle-plus-outline" @click="handleCreate"> 添加任务 </el-button>
-				</div>
+						<el-form-item label="" prop="">
+							<div align="right">
+								<el-button @click="closeDialog"> 取 消 </el-button>
+								<!-- <el-button type="primary" @click="updateData()"> 保 存 </el-button> -->
+							</div>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane label="任务" name="2">
+					<div class="filter-container">
+						<el-button class="filter-item" type="primary" icon="el-icon-circle-plus-outline" @click="handleCreate"> 添加任务 </el-button>
+					</div>
 
-				<el-table :key="tableKey" v-loading="listLoading" :data="taskList" border fit highlight-current-row style="width: 100%">
-					<el-table-column label="标题" prop="Job.title" align="center"></el-table-column>
-					<el-table-column label="调度周期" prop="Job.interval" align="center"></el-table-column>
-					<el-table-column label="转发格式" prop="encoding" align="center">
-						<template #default="{ row }">
-							{{ getCodingLabel(row) }}
-						</template>
-					</el-table-column>
-					<el-table-column label="mqtt主题" prop="Job.publishTopic" align="center"></el-table-column>
-					<el-table-column label="模板" prop="Template.title" align="center"></el-table-column>
-					<el-table-column label="操作" align="center" width="200">
-						<template #default="{ row, $index }">
-							<el-button type="primary" size="mini" @click="handleUpdate(row)"> 详情 </el-button>
-							<el-button v-if="row.status != 'deleted'" size="mini" type="danger" @click="handleDelete(row, $index)"> 删除 </el-button>
-						</template>
-					</el-table-column>
-				</el-table>
+					<el-table :key="tableKey" v-loading="listLoading" :data="taskList" border fit highlight-current-row style="width: 100%">
+						<el-table-column label="标题" prop="Job.title" align="center"></el-table-column>
+						<el-table-column label="调度周期" prop="Job.interval" align="center"></el-table-column>
+						<el-table-column label="转发格式" prop="encoding" align="center">
+							<template #default="{ row }">
+								{{ getCodingLabel(row) }}
+							</template>
+						</el-table-column>
+						<el-table-column label="mqtt主题" prop="Job.publishTopic" align="center"></el-table-column>
+						<el-table-column label="模板" prop="Template.title" align="center"></el-table-column>
+						<el-table-column label="操作" align="center" width="200">
+							<template #default="{ row, $index }">
+								<el-button type="primary" size="small" @click="handleUpdate(row)"> 详情 </el-button>
+								<el-button v-if="row.status != 'deleted'" size="small" type="danger" @click="handleDelete(row, $index)"> 删除 </el-button>
+							</template>
+						</el-table-column>
+					</el-table>
 
-				<pagination v-if="total > 0" :total="total" v-model:page="listQuery.page" v-model:limit="listQuery.size" @pagination="getList()" />
-				<TaskDialog ref="taskDialog" :formatOptions="formatOptions" @finish="getList(1)" />
-			</el-tab-pane>
-			<el-tab-pane label="通道码流" name="3">
-				<div>
-					<el-button :type="evsrc ? 'info' : 'primary'" @click="openEv()">开始</el-button>
-					<el-button :type="evsrc ? 'primary' : 'info'" :disabled="!evsrc" @click="closeEv()">停止</el-button>
-					<el-button type="defualt" @click="clearLog()">清空</el-button>
-					<el-button type="info" style="margin-left: 150px" @click="downloadLog()">下载报文</el-button>
-					<ul id="logContainer" ref="logContainer"></ul>
-				</div>
-			</el-tab-pane>
-		</el-tabs>
+					<pagination v-if="total > 0" :total="total" v-model:page="listQuery.page" v-model:limit="listQuery.size" @pagination="getList()" />
+					<TaskDialog ref="taskDialog" :formatOptions="formatOptions" @finish="getList(1)" />
+				</el-tab-pane>
+				<el-tab-pane label="通道码流" name="3">
+					<div>
+						<el-button :type="evsrc ? 'info' : 'primary'" @click="openEv()">开始</el-button>
+						<el-button :type="evsrc ? 'primary' : 'info'" :disabled="!evsrc" @click="closeEv()">停止</el-button>
+						<el-button type="defualt" @click="clearLog()">清空</el-button>
+						<el-button type="info" style="margin-left: 150px" @click="downloadLog()">下载报文</el-button>
+						<ul id="logContainer" ref="logContainer"></ul>
+					</div>
+				</el-tab-pane>
+			</el-tabs>
+		</div>
 	</el-dialog>
 </template>
 
@@ -114,7 +116,7 @@ export default {
 		downloadLog() {
 			window.open(getOrigin(import.meta.env.VITE_MODBUS_API) + '/debug/export_message?number=' + this.temp.number);
 		},
-		clsoeDialog() {
+		closeDialog() {
 			this.dialogVisible = false;
 			this.activeName = '1';
 			(this.$refs['dataForm'] as any).resetFields();
@@ -126,7 +128,7 @@ export default {
 					const tempData = Object.assign({}, this.temp);
 					api.channel.editDevice(tempData).then(() => {
 						this.$emit('getList');
-						this.clsoeDialog();
+						this.closeDialog();
 						ElMessage.success('操作成功！');
 					});
 				}
@@ -213,8 +215,8 @@ export default {
 				}
 			};
 			// this.evsrc.onerror = function (_ev: any) {
-				// @ts-ignore
-				// console.log('readyState = ' + ev.currentTarget.readyState);
+			// @ts-ignore
+			// console.log('readyState = ' + ev.currentTarget.readyState);
 			// };
 		},
 		openEv() {

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

@@ -1,5 +1,5 @@
 <template>
-	<el-dialog title="添加设备通道" v-model="dialogVisible" width="600px" :before-close="clsoeDialog" :close-on-click-modal="false">
+	<el-dialog title="添加设备通道" v-model="dialogVisible" width="600px" :before-close="closeDialog" :close-on-click-modal="false">
 		<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 90%; margin: 0 auto">
 			<el-form-item label="通道名称" prop="title">
 				<el-input v-model.trim="temp.title" placeholder="请输入通道名称" />
@@ -12,7 +12,7 @@
 			</el-form-item>
 		</el-form>
 		<template #footer class="dialog-footer">
-			<el-button @click="clsoeDialog()"> 取 消 </el-button>
+			<el-button @click="closeDialog()"> 取 消 </el-button>
 			<el-button type="primary" @click="createData()"> 保 存 </el-button>
 		</template>
 	</el-dialog>
@@ -46,7 +46,7 @@ export default {
 			// this.getList();
 			this.dialogVisible = true;
 		},
-		clsoeDialog() {
+		closeDialog() {
 			(this.$refs.dataForm as any).resetFields();
 			this.dialogVisible = false;
 		},
@@ -67,7 +67,7 @@ export default {
 				if (valid) {
 					api.channel.addDevice(this.temp).then(() => {
 						this.$emit('getList');
-						this.clsoeDialog();
+						this.closeDialog();
 						ElMessage.success('操作成功！');
 					});
 				}

src/views/iot/device/channel/component/taskDialog.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-dialog :title="textMap[dialogStatus]" v-model="dialogVisible" width="500px" :before-close="clsoeDialog" append-to-body :close-on-click-modal="false">
+	<el-dialog :title="textMap[dialogStatus]" v-model="dialogVisible" width="500px" :before-close="closeDialog" append-to-body :close-on-click-modal="false">
 		<el-form ref="dataForm" :rules="rules" :model="temp" label-width="80px">
 			<el-form-item label="标题" prop="title">
 				<el-input v-model="temp.title" placeholder="请输入标题" />
@@ -22,7 +22,7 @@
 			</el-form-item>
 		</el-form>
 		<template #footer class="dialog-footer">
-			<el-button @click="clsoeDialog"> 取 消 </el-button>
+			<el-button @click="closeDialog"> 取 消 </el-button>
 			<el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()"> 保 存 </el-button>
 		</template>
 	</el-dialog>
@@ -83,7 +83,7 @@ export default {
 			this.getTemplateList();
 			this.dialogVisible = true;
 		},
-		clsoeDialog() {
+		closeDialog() {
 			this.dialogVisible = false;
 			this.temp = {
 				title: '',
@@ -113,7 +113,7 @@ export default {
 				if (valid) {
 					api.task.addDeviceJob(this.temp).then(() => {
 						this.$emit('finish');
-						this.clsoeDialog();
+						this.closeDialog();
 						ElMessage.success('操作成功！');
 					});
 				}
@@ -124,7 +124,7 @@ export default {
 				if (valid) {
 					api.task.editDeviceJob(this.temp).then(() => {
 						this.$emit('finish');
-						this.clsoeDialog();
+						this.closeDialog();
 						ElMessage.success('操作成功！');
 					});
 				}

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

@@ -11,7 +11,7 @@
 			</div>
 
 			<div class="content-box">
-				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+				<el-tabs v-model="activeName" @tab-click="handleClick">
 					<el-tab-pane label="运行状态" name="3">
 						<div style="display: flex; padding: 10px; flex-wrap: wrap">
 							<div class="ant-card">
@@ -50,7 +50,7 @@
 									</div>
 
 									<div class="statusname">{{ item.value }}{{ item.unit }}</div>
-									<div class="">
+									<div>
 										<devantd :json="item.list" :antdid="item.key" v-if="item.type == 'int' || item.type == 'float'" />
 									</div>
 								</div>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="page bg">
     <div class="content">
       <div class="cont_box">
         <div class="title">设备：{{ detail.name }}</div>
@@ -10,7 +10,7 @@
     </div>
 
     <div class="content-box">
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
 
         <el-tab-pane label="运行状态" name="3">
           <div style=" display: flex; padding: 10px;flex-wrap: wrap;">
@@ -62,7 +62,7 @@
                     <div class="name">{{ vare }}</div> -->
                   </div>
                 </div>
-                <div class="">
+                <div>
                   <devantd :json="item.list" :antdid="item.key" v-if="item.type == 'int' || item.type == 'float' || item.type == 'string'" />
                 </div>
               </div>
@@ -103,134 +103,132 @@
           </div>
         </el-tab-pane>
         <el-tab-pane label="物模型" name="2">
-          <div class="wu-box">
-            <el-tabs type="border-card" v-model="activetab" @tab-click="wuhandleClick">
-              <el-tab-pane label="属性定义" name="attr">
-                <div class="wu-title">
-                  <div class="title">属性定义</div>
-                  <div>
-                    <el-button size="small" type="primary" v-auth="'add'" @click="onOpenEditAttr()">添加</el-button>
-                  </div>
+          <el-tabs type="border-card" v-model="activetab" @tab-click="wuhandleClick">
+            <el-tab-pane label="属性定义" name="attr">
+              <div class="wu-title">
+                <div class="title">属性定义</div>
+                <div>
+                  <el-button size="small" type="primary" v-auth="'add'" @click="onOpenEditAttr()">添加</el-button>
                 </div>
+              </div>
 
-                <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'attr'">
-                  <el-table-column label="属性标识" align="center" prop="key" />
-                  <el-table-column label="属性名称" prop="name" show-overflow-tooltip />
-                  <el-table-column prop="valueType" label="数据类型" width="100" align="center">
-                    <template #default="scope">
-                      <span>{{ scope.row.valueType.type }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="decimals" label="精度" width="60" align="center">
-                    <template #default="scope">
-                      <span>{{ scope.row.valueType.decimals }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="unit" label="单位" width="60" align="center">
-                    <template #default="scope">
-                      <span>{{ scope.row.valueType.unit }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="accessMode" label="是否只读" width="120" align="center">
-                    <template #default="scope">
-                      <el-tag type="info" size="small" v-if="scope.row.accessMode">只读</el-tag>
-                      <el-tag type="success" size="small" v-else>读写</el-tag>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="说明" prop="desc" show-overflow-tooltip />
-                  <el-table-column label="操作" width="300" align="center" fixed="right">
-                    <template #default="scope">
-                      <el-button size="small" text type="warning" v-auth="'edit'" @click="onEditAttr(scope.row)">修改</el-button>
-                      <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'attr')">删除</el-button>
-                      <el-button size="small" text type="primary" v-auth="'edit'" @click="setAttr(scope.row)">设置属性</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="功能定义" name="fun">
-                <div class="wu-title">
-                  <div class="title">功能定义</div>
-                  <div>
-                    <el-button size="small" type="primary" v-auth="'add'" @click="onOpenEditFun()">添加</el-button>
-                  </div>
+              <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'attr'">
+                <el-table-column label="属性标识" align="center" prop="key" />
+                <el-table-column label="属性名称" prop="name" show-overflow-tooltip />
+                <el-table-column prop="valueType" label="数据类型" width="100" align="center">
+                  <template #default="scope">
+                    <span>{{ scope.row.valueType.type }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="decimals" label="精度" width="60" align="center">
+                  <template #default="scope">
+                    <span>{{ scope.row.valueType.decimals }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="unit" label="单位" width="60" align="center">
+                  <template #default="scope">
+                    <span>{{ scope.row.valueType.unit }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="accessMode" label="是否只读" width="120" align="center">
+                  <template #default="scope">
+                    <el-tag type="info" size="small" v-if="scope.row.accessMode">只读</el-tag>
+                    <el-tag type="success" size="small" v-else>读写</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="说明" prop="desc" show-overflow-tooltip />
+                <el-table-column label="操作" width="300" align="center" fixed="right">
+                  <template #default="scope">
+                    <el-button size="small" text type="warning" v-auth="'edit'" @click="onEditAttr(scope.row)">修改</el-button>
+                    <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'attr')">删除</el-button>
+                    <el-button size="small" text type="primary" v-auth="'edit'" @click="setAttr(scope.row)">设置属性</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="功能定义" name="fun">
+              <div class="wu-title">
+                <div class="title">功能定义</div>
+                <div>
+                  <el-button size="small" type="primary" v-auth="'add'" @click="onOpenEditFun()">添加</el-button>
                 </div>
+              </div>
 
-                <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'fun'">
-                  <el-table-column label="功能标识" align="center" prop="key" />
-                  <el-table-column label="名称" prop="name" show-overflow-tooltip />
-
-                  <el-table-column label="描述" prop="desc" show-overflow-tooltip />
-                  <el-table-column label="操作" width="300" align="center" fixed="right">
-                    <template #default="scope">
-                      <el-button size="small" text type="warning" v-auth="'edit'" @click="onEditFun(scope.row)">修改</el-button>
-                      <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'fun')">删除</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="事件定义" name="event">
-                <div class="wu-title">
-                  <div class="title">事件定义</div>
-                  <div>
-                    <el-button type="primary" size="small" v-auth="'add'" @click="onOpenEditEvent()">添加</el-button>
-                  </div>
+              <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'fun'">
+                <el-table-column label="功能标识" align="center" prop="key" />
+                <el-table-column label="名称" prop="name" show-overflow-tooltip />
+
+                <el-table-column label="描述" prop="desc" show-overflow-tooltip />
+                <el-table-column label="操作" width="300" align="center" fixed="right">
+                  <template #default="scope">
+                    <el-button size="small" text type="warning" v-auth="'edit'" @click="onEditFun(scope.row)">修改</el-button>
+                    <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'fun')">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="事件定义" name="event">
+              <div class="wu-title">
+                <div class="title">事件定义</div>
+                <div>
+                  <el-button type="primary" size="small" v-auth="'add'" @click="onOpenEditEvent()">添加</el-button>
                 </div>
+              </div>
 
-                <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'event'">
-                  <el-table-column label="事件标识" align="center" prop="key" />
-                  <el-table-column label="名称" prop="name" show-overflow-tooltip />
-                  <el-table-column prop="level" label="事件级别" width="120" align="center">
-                    <template #default="scope">
-                      <el-tag type="primary" size="small" v-if="scope.row.level == 0">普通</el-tag>
-                      <el-tag type="warning" size="small" v-if="scope.row.level == 1">警告</el-tag>
-                      <el-tag type="danger" size="small" v-if="scope.row.level == 2">紧急</el-tag>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="描述" prop="desc" show-overflow-tooltip />
-
-                  <el-table-column label="操作" width="300" align="center" fixed="right">
-                    <template #default="scope">
-                      <el-button size="small" text type="warning" v-auth="'edit'" @click="onEditEvent(scope.row)">修改</el-button>
-                      <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'event')">删除</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="标签定义" name="tab">
-                <div class="wu-title">
-                  <div class="title">标签定义</div>
-                  <div>
-                    <el-button size="small" type="primary" v-auth="'add'" @click="onOpenEditTab()">添加</el-button>
-                  </div>
+              <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'event'">
+                <el-table-column label="事件标识" align="center" prop="key" />
+                <el-table-column label="名称" prop="name" show-overflow-tooltip />
+                <el-table-column prop="level" label="事件级别" width="120" align="center">
+                  <template #default="scope">
+                    <el-tag type="primary" size="small" v-if="scope.row.level == 0">普通</el-tag>
+                    <el-tag type="warning" size="small" v-if="scope.row.level == 1">警告</el-tag>
+                    <el-tag type="danger" size="small" v-if="scope.row.level == 2">紧急</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="描述" prop="desc" show-overflow-tooltip />
+
+                <el-table-column label="操作" width="300" align="center" fixed="right">
+                  <template #default="scope">
+                    <el-button size="small" text type="warning" v-auth="'edit'" @click="onEditEvent(scope.row)">修改</el-button>
+                    <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'event')">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="标签定义" name="tab">
+              <div class="wu-title">
+                <div class="title">标签定义</div>
+                <div>
+                  <el-button size="small" type="primary" v-auth="'add'" @click="onOpenEditTab()">添加</el-button>
                 </div>
+              </div>
 
 
-                <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'tab'">
-                  <el-table-column label="属性标识" align="center" prop="key" />
-                  <el-table-column label="属性名称" prop="name" show-overflow-tooltip />
-                  <el-table-column prop="valueType" label="数据类型" width="120" align="center">
-                    <template #default="scope">
-                      <span>{{ scope.row.valueType.type }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="accessMode" label="是否只读" width="120" align="center">
-                    <template #default="scope">
-                      <el-tag type="info" size="small" v-if="scope.row.accessMode">只读</el-tag>
-                      <el-tag type="success" size="small" v-else>读写</el-tag>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="描述" prop="desc" show-overflow-tooltip />
-                  <el-table-column label="操作" width="300" align="center" fixed="right">
-                    <template #default="scope">
-                      <el-button size="small" text type="warning" v-auth="'edit'" @click="onEditTag(scope.row)">修改</el-button>
-                      <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'tab')">删除</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-            </el-tabs>
-            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="getList()" />
-          </div>
+              <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'tab'">
+                <el-table-column label="属性标识" align="center" prop="key" />
+                <el-table-column label="属性名称" prop="name" show-overflow-tooltip />
+                <el-table-column prop="valueType" label="数据类型" width="120" align="center">
+                  <template #default="scope">
+                    <span>{{ scope.row.valueType.type }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="accessMode" label="是否只读" width="120" align="center">
+                  <template #default="scope">
+                    <el-tag type="info" size="small" v-if="scope.row.accessMode">只读</el-tag>
+                    <el-tag type="success" size="small" v-else>读写</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="描述" prop="desc" show-overflow-tooltip />
+                <el-table-column label="操作" width="300" align="center" fixed="right">
+                  <template #default="scope">
+                    <el-button size="small" text type="warning" v-auth="'edit'" @click="onEditTag(scope.row)">修改</el-button>
+                    <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel(scope.row.key, 'tab')">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+          <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="getList()" />
         </el-tab-pane>
         <el-tab-pane label="设备功能" name="5">
           <functionCom :device-key="detail.key" :product-key="prodetail.key" v-if="detail.key && prodetail.key && activeName === '5'"></functionCom>
@@ -314,17 +312,65 @@
           </div>
 
         </el-tab-pane>
-        <el-tab-pane label="设备扩展属性信息" name="7">
+        <el-tab-pane label="设备档案" name="7" v-if="deviceAssetData">
           <el-form label-width="110px">
-            <el-form-item label="设备图片">
-              <el-image class="mr20" style="border: 1px solid #e5e5e5;border-radius: 8px;width: 100px;height: 100px;object-fit: contain;" :src="item" v-for="(item, index) in phone" :key="index" />
-            </el-form-item>
-            <el-form-item label="证书图片">
-              <el-image class="mr20" style="border: 1px solid #e5e5e5;border-radius: 8px;width: 100px;height: 100px;object-fit: contain;" :src="item" v-for="(item, index) in certificate" :key="index" />
-            </el-form-item>
-            <el-form-item label="设备说明">
-              <el-input disabled v-model="intro" type="textarea" placeholder="请输入设备说明"></el-input>
-            </el-form-item>
+
+            <!--            <FromData :DataList="Datalist" v-if="Datalist && Datalist.length > 0" disable="true"></FromData>-->
+<!--            <div class="pro-box">-->
+<!--              <div class="protitle">设备档案</div>-->
+<!--              <div>-->
+<!--                <el-button type="primary" v-auth="'edit'" @click="onOpenEditAsset">编辑</el-button>-->
+<!--              </div>-->
+<!--            </div>-->
+
+<!--            <div class="ant-descriptions-view">-->
+<!--              <table>-->
+<!--                <tbody>-->
+<!--                <tr class="ant-descriptions-row" v-for="(item, index) in dataList" :key="index">-->
+<!--                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">{{ item.title }}</th>-->
+<!--                  <td class="ant-descriptions-item-content" colspan="1">-->
+<!--                    <view v-if="item.types === 'file'">-->
+<!--                      <img :src="deviceAssetMetadata[item.name]" class="avatar" />-->
+<!--                    </view>-->
+<!--                    <view v-else>-->
+<!--                      <view v-if="item.pattern">-->
+<!--                        <el-link :href="deviceAssetMetadata[item.name]" type="primary" target="_blank">{{ deviceAssetMetadata[item.name] }}</el-link>-->
+<!--                      </view>-->
+<!--                      <view v-else>-->
+<!--                        {{ deviceAssetMetadata[item.name] }}-->
+<!--                      </view>-->
+<!--                    </view>-->
+<!--                  </td>-->
+<!--                </tr>-->
+<!--                </tbody>-->
+<!--              </table>-->
+<!--            </div>-->
+
+            <div class="pro-box">
+              <div class="protitle">设备档案</div>
+              <div>
+                <el-button size="small" type="primary" v-auth="'edit'" @click="onOpenEditAsset">编辑</el-button>
+              </div>
+            </div>
+
+            <el-descriptions class="margin-top" :column="3" border>
+              <view v-for="(item, index) in dataList" :key="index">
+                <el-descriptions-item :label="item.title">
+                  <view v-if="item.types === 'file'">
+                    <img :src="deviceAssetMetadata[item.name]" class="avatar" />
+                  </view>
+                  <view v-else>
+                    <view v-if="item.pattern">
+                      <el-link :href="deviceAssetMetadata[item.name]" type="primary" target="_blank">{{ deviceAssetMetadata[item.name] }}</el-link>
+                    </view>
+                    <view v-else>
+                      {{ deviceAssetMetadata[item.name] }}
+                    </view>
+                  </view>
+                </el-descriptions-item>
+              </view>
+            </el-descriptions>
+
           </el-form>
         </el-tab-pane>
 
@@ -342,6 +388,8 @@
     <setAttr :device-key="detail.key" ref="setAttrRef" />
     <!-- 子设备-批量绑定弹窗 -->
     <SubDeviceMutipleBind ref="mutipleBindRef" @bindSuccess="getDeviceTableData" />
+    <!-- 编辑设备档案 -->
+    <EditAssetRef ref="editAssetRef" @getList="getDeviceAssetMetadata"></EditAssetRef>
 
     <el-dialog v-model="dialogVisible" title="日志数据内容" width="30%">
       <JsonViewer :value="jsonData" boxed sort theme="jv-dark" @click="onKeyclick" />
@@ -355,7 +403,7 @@
   </div>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { toRefs, reactive, onMounted, ref, defineComponent, nextTick } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import functionCom from './component/function.vue';
 import 'vue3-json-viewer/dist/index.css';
@@ -372,6 +420,8 @@ import setAttr from './component/setAttr.vue';
 import SubDeviceMutipleBind from './component/subDeviceMutipleBind.vue';
 import api from '/@/api/device';
 import datahub from '/@/api/datahub';
+import FromData from "/@/views/iot/property/dossier/component/from.vue";
+import EditAssetRef from "/@/views/iot/property/dossier/edit.vue";
 
 import { useRoute } from 'vue-router';
 
@@ -422,7 +472,7 @@ interface TableDataState {
 }
 export default defineComponent({
   name: 'deviceEditPro',
-  components: { SubDeviceMutipleBind, SubDevice, EditDic, EditAttr, EditFun, EditEvent, EditTab, devantd, ListDic, functionCom, setAttr },
+  components: {EditAssetRef, FromData, SubDeviceMutipleBind, SubDevice, EditDic, EditAttr, EditFun, EditEvent, EditTab, devantd, ListDic, functionCom, setAttr },
 
   setup(prop, context) {
     const logqueryRef = ref();
@@ -438,6 +488,10 @@ export default defineComponent({
     const editTabRef = ref();
     const subDeviceRef = ref();
     const mutipleBindRef = ref();
+    const editAssetRef = ref();
+    const dataList = ref();
+    const deviceAssetData = ref();
+    const deviceAssetMetadata = ref({});
     const state = reactive<TableDataState>({
       certificate: [],
       phone: [],
@@ -522,12 +576,45 @@ export default defineComponent({
           state.tableData.data = res.Data;
           state.tableData.total = res.Total;
         });
+
+        // 加载对应设备档案
+        getDeviceAssetMetadata()
+
         getrunData();
 
         getDeviceTableData()
       });
     }
 
+    const getDeviceAssetMetadata = () => {
+      nextTick(() => {
+        const urlRegex = /^(http-s-?:\/\/)?(a-zA\.)?[a-zA-Z0-9@:%._\+~#?&//=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%._\+~#?&//=]*)$/;
+        //获取设备档案
+        api.dev_asset.detail({ deviceKey: state.detail.key }).then((resde: any) => {
+          // 存储设备档案信息
+          deviceAssetData.value = resde;
+          const newArray = resde.data.map(obj => {
+            const { name, value, ...rest } = obj;
+            const newObj = { name, value, ...rest };
+            newObj[name] = value ? value : '';
+            return newObj;
+          });
+          dataList.value = newArray
+
+          for (const item of dataList.value) {
+            item.pattern = false;
+            if (item.types == 'input' || item.types == 'textarea') {
+              if (urlRegex.test(item.value)) {
+                item.pattern = true;
+              }
+            }
+            // 根据属性返回键获取对应档案对应的内容
+            deviceAssetMetadata.value[item.name] = item.value ? item.value : ''
+          }
+        });
+      });
+    }
+
     const mutipleUnbind = () => {
       let msg = '是否进行批量解绑？';
       if (state.deviceKeyList.length === 0) {
@@ -646,6 +733,11 @@ export default defineComponent({
       editDicRef.value.openDialog(row);
     };
 
+    // 打开修改设备档案弹窗
+    const onOpenEditAsset = () => {
+      editAssetRef.value.open(deviceAssetData.value, state.detail.product)
+    };
+
     // 删除产品
     const onRowDel = (key, type) => {
       let msg = `此操作将永久删除该数据，是否继续?`;
@@ -762,6 +854,8 @@ export default defineComponent({
         getList();
       } else if (tab.props.name == 3) {
         getrunData();
+      } else if (tab.props.name == 7) {
+        getDeviceAssetMetadata();
       }
     };
 
@@ -933,6 +1027,10 @@ export default defineComponent({
       editTabRef,
       subDeviceRef,
       mutipleBindRef,
+      editAssetRef,
+      dataList,
+      deviceAssetMetadata,
+      deviceAssetData,
       onOpenListDetail,
       getrunData,
       getlog,
@@ -951,6 +1049,7 @@ export default defineComponent({
       getfunction,
       getevent,
       gettab,
+      getDeviceAssetMetadata,
       wuhandleClick,
       onOpenEditTab,
       onOpenEditEvent,
@@ -962,6 +1061,7 @@ export default defineComponent({
       handleClick,
       onOpenMutipleBind,
       mutipleUnbind,
+      onOpenEditAsset,
       ...toRefs(state),
     };
   },

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

@@ -490,7 +490,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .input-box {
 	display: flex;
 	flex-direction: row;

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

@@ -257,7 +257,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .input-box {
 	display: flex;
 	flex-direction: row;

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

@@ -322,7 +322,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .input-box {
 	display: flex;
 	flex-direction: row;

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

@@ -307,7 +307,7 @@ export default defineComponent({
 }
 </style>
 
-<style>
+<style scoped>
 .avatar-uploader .el-upload {
 	border: 1px dashed var(--el-border-color);
 	border-radius: 6px;

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

@@ -482,7 +482,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .input-box {
 	display: flex;
 	flex-direction: row;

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="page page-full">
+	<div class="page bg page-full">
 		<div class="content">
 			<div class="cont_box">
 				<div class="title">产品：{{ detail.name }}</div>

src/views/iot/device/template/component/dataAreaDialog.vue

@@ -42,8 +42,8 @@
 			</el-table-column>
 			<el-table-column label="操作" align="center" width="180px">
 				<template #default="{ row, $index }">
-					<el-button type="primary" size="mini" @click="handleSubmit(row, $index)"> 保存 </el-button>
-					<el-button type="danger" size="mini" @click="handleDelete(row, $index)"> 删除 </el-button>
+					<el-button type="primary" size="small" @click="handleSubmit(row, $index)"> 保存 </el-button>
+					<el-button type="danger" size="small" @click="handleDelete(row, $index)"> 删除 </el-button>
 				</template>
 			</el-table-column>
 		</el-table>

src/views/iot/device/template/component/deviceTemplateDialog.vue

@@ -12,14 +12,14 @@
 			<el-table-column label="存盘周期" prop="saveCycle" align="center" />
 			<el-table-column label="操作" align="center" width="180">
 				<template #default="{ row, $index }">
-					<el-button type="primary" size="mini" @click="handleUpdate(row)"> 修改 </el-button>
-					<el-button v-if="row.status != 'deleted'" size="mini" type="danger" @click="handleDelete(row, $index)"> 删除 </el-button>
+					<el-button type="primary" size="small" @click="handleUpdate(row)"> 修改 </el-button>
+					<el-button v-if="row.status != 'deleted'" size="small" type="danger" @click="handleDelete(row, $index)"> 删除 </el-button>
 				</template>
 			</el-table-column>
 		</el-table>
 		<pagination v-show="total > 0" :total="total" v-model:page="listQuery.page" v-model:limit="listQuery.size" @pagination="getList()" style="padding: 20px 0 0 !important" />
 
-		<el-dialog :title="textMap[dialogStatus]" v-model="dialogVisible" width="850px" :before-close="clsoeDialog" close="var-dialog" append-to-body :close-on-click-modal="false">
+		<el-dialog :title="textMap[dialogStatus]" v-model="dialogVisible" width="850px" :before-close="closeDialog" close="var-dialog" append-to-body :close-on-click-modal="false">
 			<el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="95px">
 				<el-row>
 					<el-col :span="8">
@@ -94,7 +94,7 @@
 				</el-row>
 			</el-form>
 			<template #footer class="dialog-footer">
-				<el-button @click="clsoeDialog"> 取 消 </el-button>
+				<el-button @click="closeDialog"> 取 消 </el-button>
 				<el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()"> 保 存 </el-button>
 			</template>
 		</el-dialog>
@@ -224,7 +224,7 @@ export default {
 				this.$refs['dataForm'].clearValidate();
 			});
 		},
-		clsoeDialog() {
+		closeDialog() {
 			this.dialogVisible = false;
 			// this.$refs.dataForm.resetFields()
 			this.temp = {
@@ -248,7 +248,7 @@ export default {
 					const tempData = Object.assign({}, this.temp);
 					api.data.addDeviceTemplate(tempData).then(() => {
 						this.handleFilter();
-						this.clsoeDialog();
+						this.closeDialog();
 						ElMessage.success('添加成功！');
 					});
 				}
@@ -264,7 +264,7 @@ export default {
 					const tempData = Object.assign({}, this.temp);
 					api.data.editDeviceTemplate(tempData).then(() => {
 						this.handleFilter();
-						this.clsoeDialog();
+						this.closeDialog();
 						ElMessage.success('操作成功！');
 					});
 				}

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

@@ -1,6 +1,6 @@
 <template>
-	<el-dialog :title="textMap[dialogStatus]" v-model="dialogVisible" :width="dialogWidth" :before-close="clsoeDialog" :close-on-click-modal="false">
-		<div class="wrapper">
+	<el-dialog :title="textMap[dialogStatus]" v-model="dialogVisible" :width="dialogWidth" :before-close="closeDialog" :close-on-click-modal="false">
+		<div class="page-full" style="height: 65vh;">
 			<el-form class="form" ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px" style="width: 400px">
 				<el-form-item label="模板名称" prop="title">
 					<el-input v-model.trim="temp.title" placeholder="请输入模板名称" />
@@ -25,7 +25,7 @@
 			</el-tabs>
 		</div>
 		<template #footer class="dialog-footer">
-			<el-button @click="clsoeDialog"> 取 消 </el-button>
+			<el-button @click="closeDialog"> 取 消 </el-button>
 			<el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()"> 保 存 </el-button>
 		</template>
 	</el-dialog>
@@ -85,7 +85,7 @@ export default {
 				this.getDataId();
 			}
 		},
-		clsoeDialog() {
+		closeDialog() {
 			this.activeName = '1';
 			this.temp = {
 				title: '',
@@ -107,7 +107,7 @@ export default {
 				if (valid) {
 					api.template.addTemplate(this.temp).then(() => {
 						this.$emit('getList');
-						this.clsoeDialog();
+						this.closeDialog();
 						ElMessage.success('操作成功！');
 					});
 				}
@@ -118,7 +118,7 @@ export default {
 				if (valid) {
 					api.template.editTemplate(this.temp).then(() => {
 						this.$emit('getList');
-						this.clsoeDialog();
+						this.closeDialog();
 						ElMessage.success('操作成功！');
 					});
 				}

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

@@ -10,7 +10,7 @@
 		</div>
 
 		<div class="content-box">
-			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+			<el-tabs v-model="activeName" @tab-click="handleClick">
 				<el-tab-pane label="运行状态" name="3">
 					<div style="display: flex; padding: 10px; flex-wrap: wrap">
 						<div class="ant-card">
@@ -49,7 +49,7 @@
 								</div>
 
 								<div class="statusname">{{ item.value }}{{ item.unit }}</div>
-								<div class="">
+								<div>
 									<devantd :json="item.list" :antdid="item.key" v-if="item.type == 'int' || item.type == 'float'" />
 								</div>
 							</div>

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

@@ -1,12 +1,6 @@
 <template>
-	<el-dialog
-		:title="isEdit ? '修改设备' : '添加设备'"
-		v-model="dialogVisible"
-		width="600px"
-		:before-close="closeDialog"
-		:close-on-click-modal="false"
-	>
-		<el-form ref="formRef" :rules="formRules" :model="ruleForm" label-position="left" label-width="120px" style="width: 90%; margin: 0 auto">
+	<el-dialog :title="isEdit ? '修改设备' : '添加设备'" v-model="dialogVisible" width="600px" :before-close="closeDialog" :close-on-click-modal="false">
+		<el-form ref="formRef" :rules="formRules" :model="ruleForm" label-position="right" label-width="120px">
 			<el-form-item label="设备编码" prop="number">
 				<el-input :disabled="isEdit" v-model="ruleForm.number" placeholder="请输入设备编码" />
 			</el-form-item>
@@ -82,33 +76,33 @@ const submitData = async () => {
 			api.device.editItem({
 				...ruleForm.value,
 			})
-			.then(() => {
-				ElMessage({ type: 'success', message: '修改成功' })
-				emit('updateList')
-				closeDialog()
-			})
-			.finally(() => (btnLoading.value = false))
+				.then(() => {
+					ElMessage({ type: 'success', message: '修改成功' })
+					emit('updateList')
+					closeDialog()
+				})
+				.finally(() => (btnLoading.value = false))
 		} else {
 			// 新增
 			api.device.addItem(ruleForm.value)
-			.then(() => {
-				ElMessage({ type: 'success', message: '添加成功' })
-				emit('updateList')
-				closeDialog()
-			})
-			.finally(() => (btnLoading.value = false))
+				.then(() => {
+					ElMessage({ type: 'success', message: '添加成功' })
+					emit('updateList')
+					closeDialog()
+				})
+				.finally(() => (btnLoading.value = false))
 		}
 	})
 }
 
-const handleProductChange = (data:any) => {
+const handleProductChange = (data: any) => {
 	ruleForm.value.deviceKey = "";
-	let findItem:any = productList.value.find((v: any) => v.key === data);
+	let findItem: any = productList.value.find((v: any) => v.key === data);
 	getDeviceList(findItem.id)
 }
 
-const getDeviceList = (id:number) => {
-	apiDevice.device.allList({productId: id}).then((res: any) => {
+const getDeviceList = (id: number) => {
+	apiDevice.device.allList({ productId: id }).then((res: any) => {
 		deviceList.value = res.device
 	})
 }
@@ -117,16 +111,16 @@ const getDeviceList = (id:number) => {
  * 关闭弹窗
  */
 const closeDialog = () => {
-  dialogVisible.value = false;
-  ruleForm.value = {
-	number: '',
-	title: '',
-	commonAddr: '',
-	subCode: '',
-	templateNumber: '',
-	productKey: '',
-	deviceKey: ''
-  }
+	dialogVisible.value = false;
+	ruleForm.value = {
+		number: '',
+		title: '',
+		commonAddr: '',
+		subCode: '',
+		templateNumber: '',
+		productKey: '',
+		deviceKey: ''
+	}
 }
 
 
@@ -135,7 +129,7 @@ const open = async (row: any) => {
 	if (row && row.number.toString()) {
 		ruleForm.value = row;
 		isEdit.value = true;
-	}else {
+	} else {
 		isEdit.value = false;
 	}
 }

src/views/iot/ice104/device/component/editDeviceForm.vue

@@ -1,41 +1,40 @@
 <template>
-    <el-form ref="formRef" :rules="formRules" :model="ruleForm" label-position="left" label-width="120px" style="width: 70%;">
-        <el-form-item label="设备编码" prop="number">
-            <el-input :disabled="isEdit" v-model="ruleForm.number" placeholder="请输入设备编码" />
-        </el-form-item>
-        <el-form-item label="名称">
-            <el-input v-model="ruleForm.title" placeholder="请输入名称" />
-        </el-form-item>
-        <el-form-item label="设备通用地址">
-            <el-input type="number" v-model.number="ruleForm.commonAddr" placeholder="请输入设备通用地址" />
-        </el-form-item>
-        <el-form-item label="mac地址">
-            <el-input v-model="ruleForm.subCode" placeholder="请输入mac地址" />
-        </el-form-item>
-        <el-form-item label="模版编号">
-            <el-select v-model="ruleForm.templateNumber" placeholder="请选择模版编号" class="width100">
-                <el-option :label="item.title" :value="item.number" v-for="(item, index) in tableData" :key="index" />
-            </el-select>
-        </el-form-item>
-        <el-form-item label="产品key">
-            <el-select @change="(val) => handleProductChange(val, true)" v-model="ruleForm.productKey" placeholder="请选择产品key" class="width100">
-                <el-option :label="item.name" :value="item.key" v-for="(item, index) in productList" :key="index" />
-            </el-select>
-        </el-form-item>
-        <el-form-item label="设备key" v-if="ruleForm.productKey">
-            <el-select v-model="ruleForm.deviceKey" placeholder="请选择设备key" class="width100">
-                <el-option :label="item.name" :value="item.key" v-for="(item, index) in deviceList" :key="index" />
-            </el-select>
-        </el-form-item>
-        <el-form-item>
-            <el-button type="primary" v-auth="'save'" :loading="btnLoading" @click="submitData"> 保 存 </el-button>
-        </el-form-item>
-    </el-form>
+	<el-form ref="formRef" :rules="formRules" :model="ruleForm" label-position="right" label-width="110px" style="width: 70%;">
+		<el-form-item label="设备编码" prop="number">
+			<el-input :disabled="isEdit" v-model="ruleForm.number" placeholder="请输入设备编码" />
+		</el-form-item>
+		<el-form-item label="名称">
+			<el-input v-model="ruleForm.title" placeholder="请输入名称" />
+		</el-form-item>
+		<el-form-item label="设备通用地址">
+			<el-input type="number" v-model.number="ruleForm.commonAddr" placeholder="请输入设备通用地址" />
+		</el-form-item>
+		<el-form-item label="mac地址">
+			<el-input v-model="ruleForm.subCode" placeholder="请输入mac地址" />
+		</el-form-item>
+		<el-form-item label="模版编号">
+			<el-select v-model="ruleForm.templateNumber" placeholder="请选择模版编号" class="width100">
+				<el-option :label="item.title" :value="item.number" v-for="(item, index) in tableData" :key="index" />
+			</el-select>
+		</el-form-item>
+		<el-form-item label="产品key">
+			<el-select @change="(val) => handleProductChange(val, true)" v-model="ruleForm.productKey" placeholder="请选择产品key" class="width100">
+				<el-option :label="item.name" :value="item.key" v-for="(item, index) in productList" :key="index" />
+			</el-select>
+		</el-form-item>
+		<el-form-item label="设备key" v-if="ruleForm.productKey">
+			<el-select v-model="ruleForm.deviceKey" placeholder="请选择设备key" class="width100">
+				<el-option :label="item.name" :value="item.key" v-for="(item, index) in deviceList" :key="index" />
+			</el-select>
+		</el-form-item>
+		<el-form-item>
+			<el-button type="primary" v-auth="'save'" :loading="btnLoading" @click="submitData"> 保 存 </el-button>
+		</el-form-item>
+	</el-form>
 </template>
 <script lang="ts" setup>
-import { computed, reactive, ref, onMounted } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import api from '/@/api/ice104/index';
-import { useI18n } from 'vue-i18n';
 import { ElMessage } from 'element-plus';
 import { useSearch } from '/@/hooks/useCommonIce104';
 import apiDevice from '/@/api/device';
@@ -72,26 +71,26 @@ const submitData = async () => {
 			api.device.editItem({
 				...ruleForm.value,
 			})
-			.then(() => {
-				ElMessage({ type: 'success', message: '修改成功' })
-				emit('updateList')
-			})
-			.finally(() => (btnLoading.value = false))
+				.then(() => {
+					ElMessage({ type: 'success', message: '修改成功' })
+					emit('updateList')
+				})
+				.finally(() => (btnLoading.value = false))
 		}
 	})
 }
 
-const handleProductChange = (data:any, isClear: boolean) => {
-	if(isClear) {
+const handleProductChange = (data: any, isClear: boolean) => {
+	if (isClear) {
 		ruleForm.value.deviceKey = "";
 	}
-	let findItem:any = productList.value.find((v: any) => v.key === data);
-	if(!findItem) return;
+	let findItem: any = productList.value.find((v: any) => v.key === data);
+	if (!findItem) return;
 	getDeviceList(findItem.id)
 }
 
-const getDeviceList = (id:number) => {
-	apiDevice.device.allList({productId: id}).then((res: any) => {
+const getDeviceList = (id: number) => {
+	apiDevice.device.allList({ productId: id }).then((res: any) => {
 		deviceList.value = res.device
 	})
 }
@@ -102,7 +101,7 @@ const open = async (row: any) => {
 		ruleForm.value = row;
 		isEdit.value = true;
 		handleProductChange(ruleForm.value.productKey, false)
-	}else {
+	} else {
 		isEdit.value = false;
 	}
 }

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

@@ -7,17 +7,15 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-	<div class="page page-full">
-		<el-card shadow="nover" class="page-full-part">
-			<el-tabs v-model="activeName" class="demo-tabs">
-				<el-tab-pane label="设备详情" name="detail">
-					<EditDeviceForm ref="editFormRef" />
-				</el-tab-pane>
-				<el-tab-pane label="设备任务" name="task">
-					<DeviceTaskTable />
-				</el-tab-pane>
-			</el-tabs>
-		</el-card>
+	<div class="page border bg padding page-full Ipt-2">
+		<el-tabs v-model="activeName">
+			<el-tab-pane label="设备详情" name="detail">
+				<EditDeviceForm ref="editFormRef" />
+			</el-tab-pane>
+			<el-tab-pane label="设备任务" name="task">
+				<DeviceTaskTable />
+			</el-tab-pane>
+		</el-tabs>
 	</div>
 </template>
 

src/views/iot/ice104/template/component/addOrEditTemplateTask.vue

@@ -1,13 +1,7 @@
 <!-- 添加或者修改设备 -->
 <template>
-	<el-dialog
-		:title="isEdit ? '修改模版点位' : '添加模版点位'"
-		v-model="dialogVisible"
-		width="600px"
-		:before-close="closeDialog"
-		:close-on-click-modal="false"
-	>
-		<el-form ref="formRef" :rules="formRules" :model="ruleForm" label-position="left" label-width="120px" style="width: 90%; margin: 0 auto">
+	<el-dialog :title="isEdit ? '修改模版点位' : '添加模版点位'" v-model="dialogVisible" width="600px" :before-close="closeDialog" :close-on-click-modal="false">
+		<el-form ref="formRef" :rules="formRules" :model="ruleForm" label-position="right" label-width="120px" style="width: 90%; margin: 0 auto">
 			<el-form-item label="点位名称" prop="title">
 				<el-input v-model="ruleForm.title" placeholder="请输入点位名称" />
 			</el-form-item>
@@ -43,7 +37,7 @@ const emit = defineEmits(['updateList']);
 
 const formRef = ref();
 const ruleForm = ref({
-    dtId: 0,
+	dtId: 0,
 	title: '',
 	templateNumber: route.params && route.params.id,
 	dataAttribName: '',
@@ -58,8 +52,8 @@ const formRules = computed(() => ({
 	dataAddress: [{ required: true, trigger: 'blur', message: '请输入数据项点位' }],
 	dataCoef: [{ required: true, trigger: 'blur', message: '请输入倍率' }],
 }));
-const getRandom = (num:number) =>{
-    return Math.floor((Math.random()+Math.floor(Math.random()*9+1))*Math.pow(10,num-1));
+const getRandom = (num: number) => {
+	return Math.floor((Math.random() + Math.floor(Math.random() * 9 + 1)) * Math.pow(10, num - 1));
 }
 const submitData = async () => {
 	formRef.value.validate((valid: boolean) => {
@@ -70,22 +64,22 @@ const submitData = async () => {
 			api.deviceTemplate.editItem({
 				...ruleForm.value,
 			})
-			.then(() => {
-				ElMessage({ type: 'success', message: '修改成功' })
-				emit('updateList')
-				closeDialog()
-			})
-			.finally(() => (btnLoading.value = false))
+				.then(() => {
+					ElMessage({ type: 'success', message: '修改成功' })
+					emit('updateList')
+					closeDialog()
+				})
+				.finally(() => (btnLoading.value = false))
 		} else {
 			// 新增
-            ruleForm.value.dtId = getRandom(10);
+			ruleForm.value.dtId = getRandom(10);
 			api.deviceTemplate.addItem(ruleForm.value)
-			.then(() => {
-				ElMessage({ type: 'success', message: '添加成功' })
-				emit('updateList')
-				closeDialog()
-			})
-			.finally(() => (btnLoading.value = false))
+				.then(() => {
+					ElMessage({ type: 'success', message: '添加成功' })
+					emit('updateList')
+					closeDialog()
+				})
+				.finally(() => (btnLoading.value = false))
 		}
 	})
 }
@@ -94,16 +88,16 @@ const submitData = async () => {
  * 关闭弹窗
  */
 const closeDialog = () => {
-  dialogVisible.value = false;
-  isEdit.value = false;
-  ruleForm.value = {
-    dtId: 0,
-	title: '',
-	templateNumber: route.params && route.params.id,
-	dataAttribName: '',
-	dataAddress: 0,
-	DataCoef: ''
-  }
+	dialogVisible.value = false;
+	isEdit.value = false;
+	ruleForm.value = {
+		dtId: 0,
+		title: '',
+		templateNumber: route.params && route.params.id,
+		dataAttribName: '',
+		dataAddress: 0,
+		DataCoef: ''
+	}
 }
 
 
@@ -113,7 +107,7 @@ const open = async (row: any) => {
 		row.DataCoef = row.dataCoef
 		ruleForm.value = row;
 		isEdit.value = true;
-	}else {
+	} else {
 		isEdit.value = false;
 	}
 }

src/views/iot/ice104/template/component/edit.vue

@@ -1,12 +1,6 @@
 <template>
-	<el-dialog
-		:title="isEdit ? '修改模版' : '添加模版'"
-		v-model="dialogVisible"
-		width="600px"
-		:before-close="clsoeDialog"
-		:close-on-click-modal="false"
-	>
-		<el-form ref="formRef" :rules="formRules" :model="ruleForm" label-position="left" label-width="80px" style="width: 90%; margin: 0 auto">
+	<el-dialog :title="isEdit ? '修改模版' : '添加模版'" v-model="dialogVisible" width="600px" :before-close="closeDialog" :close-on-click-modal="false">
+		<el-form ref="formRef" :rules="formRules" :model="ruleForm" label-width="80px" style="width: 90%; margin: 0 auto">
 			<el-form-item label="模版编码" prop="number">
 				<el-input :disabled="isEdit" v-model="ruleForm.number" placeholder="请输入模版编码" />
 			</el-form-item>
@@ -14,31 +8,22 @@
 				<el-input v-model="ruleForm.title" placeholder="请输入模版名称" />
 			</el-form-item>
 			<el-form-item label="状态">
-				<el-switch
-					v-model="ruleForm.status"
-					inline-prompt
-					active-text="开"
-					inactive-text="关"
-					:active-value="1"
-					:inactive-value="0"
-					width="80"
-				/>
+				<el-switch v-model="ruleForm.status" inline-prompt active-text="开" inactive-text="关" :active-value="1" :inactive-value="0" width="80" />
 			</el-form-item>
-			
+
 			<el-form-item label="备注">
 				<el-input type="textarea" v-model="ruleForm.remarks" placeholder="请输入备注信息" />
 			</el-form-item>
 		</el-form>
 		<template #footer>
-			<el-button v-auth="'canceSaveTemplate'" @click="clsoeDialog()"> 取 消 </el-button>
+			<el-button v-auth="'canceSaveTemplate'" @click="closeDialog()"> 取 消 </el-button>
 			<el-button v-auth="'saveTemplate'" :loading="btnLoading" type="primary" @click="submitData"> 保 存 </el-button>
 		</template>
 	</el-dialog>
 </template>
 <script lang="ts" setup>
-import { computed, reactive, ref } from 'vue';
+import { computed, ref } from 'vue';
 import api from '/@/api/ice104/index';
-import { useI18n } from 'vue-i18n';
 import { ElMessage } from 'element-plus';
 
 const dialogVisible = ref(false);
@@ -67,46 +52,46 @@ const submitData = async () => {
 			api.template.editItem({
 				...ruleForm.value,
 			})
-			.then(() => {
-				ElMessage({ type: 'success', message: '修改成功' })
-				emit('updateList')
-				closeDialog()
-			})
-			.finally(() => (btnLoading.value = false))
+				.then(() => {
+					ElMessage({ type: 'success', message: '修改成功' })
+					emit('updateList')
+					closeDialog()
+				})
+				.finally(() => (btnLoading.value = false))
 		} else {
 			// 新增
 			api.template.addItem(ruleForm.value)
-			.then(() => {
-				ElMessage({ type: 'success', message: '添加成功' })
-				emit('updateList')
-				closeDialog()
-			})
-			.finally(() => (btnLoading.value = false))
+				.then(() => {
+					ElMessage({ type: 'success', message: '添加成功' })
+					emit('updateList')
+					closeDialog()
+				})
+				.finally(() => (btnLoading.value = false))
 		}
 	})
 }
 
+
 /**
  * 关闭弹窗
  */
 const closeDialog = () => {
-  dialogVisible.value = false;
-  ruleForm.value = {
-	number: '',
-	title: '',
-	status: 1,
-	remarks: "",
-	mode: 0
-  }
+	dialogVisible.value = false;
+	ruleForm.value = {
+		number: '',
+		title: '',
+		status: 1,
+		remarks: "",
+		mode: 0
+	}
 }
 
-
 const open = async (row: any) => {
 	dialogVisible.value = true
 	if (row && row.number.toString()) {
 		ruleForm.value = row;
 		isEdit.value = true;
-	}else {
+	} else {
 		isEdit.value = false;
 	}
 }

src/views/iot/ice104/template/component/editTemplateForm.vue

@@ -1,31 +1,23 @@
 <template>
-    <el-form ref="formRef" :rules="formRules" :model="ruleForm" label-position="left" label-width="120px" style="width: 70%;">
-        <el-form-item label="模版编码" prop="number">
-            <el-input disabled v-model="ruleForm.number" placeholder="请输入模版编码" />
-        </el-form-item>
-        <el-form-item label="名称">
-            <el-input v-model="ruleForm.title" placeholder="请输入名称" />
-        </el-form-item>
-        <el-form-item label="状态">
-            <el-switch
-                v-model="ruleForm.status"
-                inline-prompt
-                active-text="开"
-                inactive-text="关"
-                :active-value="1"
-                :inactive-value="0"
-                width="80"
-            />
-        </el-form-item>
-        
-        <el-form-item label="备注">
-            <el-input type="textarea" v-model="ruleForm.remarks" placeholder="请输入备注信息" />
-        </el-form-item>
+  <el-form ref="formRef" :rules="formRules" :model="ruleForm" label-position="right" label-width="80px" style="width: 70%;">
+    <el-form-item label="模版编码" prop="number">
+      <el-input disabled v-model="ruleForm.number" placeholder="请输入模版编码" />
+    </el-form-item>
+    <el-form-item label="名称">
+      <el-input v-model="ruleForm.title" placeholder="请输入名称" />
+    </el-form-item>
+    <el-form-item label="状态">
+      <el-switch v-model="ruleForm.status" inline-prompt active-text="开" inactive-text="关" :active-value="1" :inactive-value="0" />
+    </el-form-item>
 
-        <el-form-item>
-            <el-button type="primary" :loading="btnLoading" @click="submitData"> 保 存 </el-button>
-        </el-form-item>
-    </el-form>
+    <el-form-item label="备注">
+      <el-input type="textarea" v-model="ruleForm.remarks" placeholder="请输入备注信息" />
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" :loading="btnLoading" @click="submitData"> 保 存 </el-button>
+    </el-form-item>
+  </el-form>
 </template>
 <script lang="ts" setup>
 import { computed, reactive, ref, onMounted } from 'vue';
@@ -39,37 +31,37 @@ const btnLoading = ref(false);
 const emit = defineEmits(['updateList']);
 const formRef = ref();
 const ruleForm = ref({
-    number: '',
-	title: '',
-	status: 1,
-	remarks: "",
-	mode: 0
+  number: '',
+  title: '',
+  status: 1,
+  remarks: "",
+  mode: 0
 })
 
 const formRules = computed(() => ({
-	number: [{ required: true, trigger: 'change', message: '请输入设备编码' }],
+  number: [{ required: true, trigger: 'change', message: '请输入设备编码' }],
 }));
 
 const submitData = async () => {
-	formRef.value.validate((valid: boolean) => {
-		if (!valid) return
-		btnLoading.value = true
-		// 修改
-        api.template.editItem({
-            ...ruleForm.value,
-        })
-        .then(() => {
-            ElMessage({ type: 'success', message: '修改成功' })
-            emit('updateList')
-        })
-        .finally(() => (btnLoading.value = false))
-	})
+  formRef.value.validate((valid: boolean) => {
+    if (!valid) return
+    btnLoading.value = true
+    // 修改
+    api.template.editItem({
+      ...ruleForm.value,
+    })
+      .then(() => {
+        ElMessage({ type: 'success', message: '修改成功' })
+        emit('updateList')
+      })
+      .finally(() => (btnLoading.value = false))
+  })
 }
 
 const open = async (row: any) => {
-	if (row && row.number.toString()) {
-		ruleForm.value = row;
-	}
+  if (row && row.number.toString()) {
+    ruleForm.value = row;
+  }
 }
 
 defineExpose({ open })
@@ -77,6 +69,6 @@ defineExpose({ open })
 
 <style lang="scss" scoped>
 .width100 {
-	width: 100%;
+  width: 100%;
 }
 </style>

src/views/iot/ice104/template/detail.vue

@@ -7,17 +7,15 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-	<div class="page page-full">
-		<el-card shadow="nover" class="page-full-part">
-			<el-tabs v-model="activeName">
-				<el-tab-pane label="模版详情" name="detail">
-					<EditTemplateForm ref="editFormRef" />
-				</el-tab-pane>
-				<el-tab-pane label="模版点位" name="point">
-					<TemplateTaskTable />
-				</el-tab-pane>
-			</el-tabs>
-		</el-card>
+	<div class="page bg padding Ipt-2 page-full">
+		<el-tabs v-model="activeName">
+			<el-tab-pane label="模版详情" name="detail">
+				<EditTemplateForm ref="editFormRef" />
+			</el-tab-pane>
+			<el-tab-pane label="模版点位" name="point">
+				<TemplateTaskTable />
+			</el-tab-pane>
+		</el-tabs>
 	</div>
 </template>
 
@@ -50,7 +48,7 @@ const onDel = (row: any) => {
 		cancelButtonText: '取消',
 		type: 'warning',
 	}).then(async () => {
-		await api.device.deleteItem({number: row.number});
+		await api.device.deleteItem({ number: row.number });
 		ElMessage.success('删除成功');
 		getList();
 	});

src/views/iot/iotmanager/dashboard.vue

@@ -3,7 +3,7 @@
 		<el-row :gutter="15" class="home-card-one mb15">
 			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in homeOne" :key="k" :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
 				<div class="home-card-item ">
-					<div class="">{{ v.num3 }}</div>
+					<div>{{ v.num3 }}</div>
 					<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
 						<div class="flex-auto">
 

src/views/iot/network/server/create.vue

@@ -1,100 +1,100 @@
 <template>
-    <el-card class="system-dic-container" style="position: relative;">
-        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-            <el-tab-pane label="新建服务器" name="first">
-                <el-collapse v-model="activeViewName">
-                    <el-collapse-item title="基本信息" name="1">
-                        <div class="collapse-wrap">
-                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
-                                <el-form-item label="名称">
-                                    <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
-                                </el-form-item>
-                                <el-form-item label="类型">
-                                    <el-select @change="handleChangeType" v-model="form.types" placeholder="请选择类型">
-                                        <el-option v-for="dict in network_server_type" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item v-if="form.types == 'tcp'" label="粘拆包规则">
-                                    <el-select @change="initData" v-model="stickValue" placeholder="请选择类型">
-                                        <el-option v-for="dict in stick_type" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item v-if="form.types == 'tcp' && stickValue">
-                                    <el-form-item v-if="stickValue == '分隔符'" class="flex-column" label="分隔符">
-                                        <el-input v-model="stick['delimit,omitempty']" placeholder="请填写分隔符" />
-                                    </el-form-item>
-                                    <el-form-item v-if="stickValue == '自定义脚本'" class="flex-column" label="自定义脚本">
-                                        <el-input v-model="stick['custom,omitempty']" placeholder="请填写自定义脚本" />
-                                    </el-form-item>
-                                    <el-form-item v-if="stickValue == '固定长度'" class="flex-column" label="固定长度">
-                                        <el-input type="number" v-model="stick['fixedLen,omitempty']" placeholder="请填写固定长度" />
-                                    </el-form-item>
-                                    <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="长度">
-                                        <el-input type="number" v-model="stick['len,omitempty']['len']" placeholder="请填写长度" />
-                                    </el-form-item>
-                                    <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="偏移量">
-                                        <el-input type="number" v-model="stick['len,omitempty']['offset']" placeholder="请填写偏移量" />
-                                    </el-form-item>
-                                    <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="大小端">
-                                        <el-select v-model="stick['len,omitempty']['endian']" placeholder="请选择大小端">
-                                            <el-option label="大端" value="大端" />
-                                            <el-option label="小端" value="小端" />
-                                        </el-select>
-                                    </el-form-item>
-                                </el-form-item>
-                                <el-form-item label="地址">
-                                    <el-input v-model="form.addr" placeholder="端口号" />
-                                </el-form-item>
-                                <el-form-item label="开启TLS">
-                                    <el-radio-group v-model="form.isTls" class="ml-4">
-                                        <el-radio :label="1">是</el-radio>
-                                        <el-radio :label="0">否</el-radio>
-                                    </el-radio-group>
-                                </el-form-item>
-                                <el-form-item v-if="form.isTls == 1 && form.types != 'mqtt_server'" label="选择证书">
-                                    <el-select v-model="form.certificateId" placeholder="请选择证书">
-                                        <el-option v-for="item in certificateList" :key="item.id" :label="item.name" :value="item.id">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item v-if="form.isTls == 1 && form.types == 'mqtt_server'" label="接入方式">
-                                    <el-select v-model="form.authType" placeholder="选择接入方式">
-                                        <el-option label="Basic" :value="1" />
-                                        <el-option label="AccessToken" :value="2" />
-                                        <!-- <el-option label="证书" :value="3" /> -->
-                                    </el-select>
-                                    <el-form-item v-if="form.authType == 1" class="flex-column" label="用户名">
-                                        <el-input v-model="form.authUser" placeholder="请填写用户名" />
-                                    </el-form-item>
-                                    <el-form-item v-if="form.authType == 1" class="flex-column" label="密码">
-                                        <el-input v-model="form.authPasswd" placeholder="请填写密码" />
-                                    </el-form-item>
-                                    <el-form-item v-if="form.authType == 2" class="flex-column" label="Aceess Token">
-                                        <el-input v-model="form.accessToken" placeholder="请填写Aceess Token" />
-                                    </el-form-item>
-                                </el-form-item>
-                                <el-form-item label="启用">
-                                    <el-switch :active-value="1" :inactive-value="0" v-model="form.status" />
-                                </el-form-item>
-                            </el-form>
-                        </div>
-                    </el-collapse-item>
-                    <el-collapse-item title="注册包" name="2">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
-                            <el-form-item label="正则表达式">
-                                <el-input v-model="form.register.regex" placeholder="请填写名称" />
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                    <el-collapse-item title="协议适配" name="3">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
-                            <el-form-item label="协议">
-                                <el-select v-model="form.protocol.name" placeholder="请选择协议适配">
-                                    <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
-                                    </el-option>
-                                    <!-- <el-option label="Modbus RTU" value="Modbus RTU" />
+  <div class="page bg padding page-full Ipt-2" style="position: relative;">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="新建服务器" name="first">
+        <el-collapse v-model="activeViewName">
+          <el-collapse-item title="基本信息" name="1">
+            <div class="collapse-wrap">
+              <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
+                <el-form-item label="名称">
+                  <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
+                </el-form-item>
+                <el-form-item label="类型">
+                  <el-select @change="handleChangeType" v-model="form.types" placeholder="请选择类型">
+                    <el-option v-for="dict in network_server_type" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item v-if="form.types == 'tcp'" label="粘拆包规则">
+                  <el-select @change="initData" v-model="stickValue" placeholder="请选择类型">
+                    <el-option v-for="dict in stick_type" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item v-if="form.types == 'tcp' && stickValue">
+                  <el-form-item v-if="stickValue == '分隔符'" class="flex-column" label="分隔符">
+                    <el-input v-model="stick['delimit,omitempty']" placeholder="请填写分隔符" />
+                  </el-form-item>
+                  <el-form-item v-if="stickValue == '自定义脚本'" class="flex-column" label="自定义脚本">
+                    <el-input v-model="stick['custom,omitempty']" placeholder="请填写自定义脚本" />
+                  </el-form-item>
+                  <el-form-item v-if="stickValue == '固定长度'" class="flex-column" label="固定长度">
+                    <el-input type="number" v-model="stick['fixedLen,omitempty']" placeholder="请填写固定长度" />
+                  </el-form-item>
+                  <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="长度">
+                    <el-input type="number" v-model="stick['len,omitempty']['len']" placeholder="请填写长度" />
+                  </el-form-item>
+                  <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="偏移量">
+                    <el-input type="number" v-model="stick['len,omitempty']['offset']" placeholder="请填写偏移量" />
+                  </el-form-item>
+                  <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="大小端">
+                    <el-select v-model="stick['len,omitempty']['endian']" placeholder="请选择大小端">
+                      <el-option label="大端" value="大端" />
+                      <el-option label="小端" value="小端" />
+                    </el-select>
+                  </el-form-item>
+                </el-form-item>
+                <el-form-item label="地址">
+                  <el-input v-model="form.addr" placeholder="端口号" />
+                </el-form-item>
+                <el-form-item label="开启TLS">
+                  <el-radio-group v-model="form.isTls" class="ml-4">
+                    <el-radio :label="1">是</el-radio>
+                    <el-radio :label="0">否</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item v-if="form.isTls == 1 && form.types != 'mqtt_server'" label="选择证书">
+                  <el-select v-model="form.certificateId" placeholder="请选择证书">
+                    <el-option v-for="item in certificateList" :key="item.id" :label="item.name" :value="item.id">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item v-if="form.isTls == 1 && form.types == 'mqtt_server'" label="接入方式">
+                  <el-select v-model="form.authType" placeholder="选择接入方式">
+                    <el-option label="Basic" :value="1" />
+                    <el-option label="AccessToken" :value="2" />
+                    <!-- <el-option label="证书" :value="3" /> -->
+                  </el-select>
+                  <el-form-item v-if="form.authType == 1" class="flex-column" label="用户名">
+                    <el-input v-model="form.authUser" placeholder="请填写用户名" />
+                  </el-form-item>
+                  <el-form-item v-if="form.authType == 1" class="flex-column" label="密码">
+                    <el-input v-model="form.authPasswd" placeholder="请填写密码" />
+                  </el-form-item>
+                  <el-form-item v-if="form.authType == 2" class="flex-column" label="Aceess Token">
+                    <el-input v-model="form.accessToken" placeholder="请填写Aceess Token" />
+                  </el-form-item>
+                </el-form-item>
+                <el-form-item label="启用">
+                  <el-switch :active-value="1" :inactive-value="0" v-model="form.status" />
+                </el-form-item>
+              </el-form>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item title="注册包" name="2">
+            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
+              <el-form-item label="正则表达式">
+                <el-input v-model="form.register.regex" placeholder="请填写名称" />
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+          <el-collapse-item title="协议适配" name="3">
+            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
+              <el-form-item label="协议">
+                <el-select v-model="form.protocol.name" placeholder="请选择协议适配">
+                  <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
+                  </el-option>
+                  <!-- <el-option label="Modbus RTU" value="Modbus RTU" />
                                     <el-option label="Modbus TCP" value="Modbus TCP" />
                                     <el-option label="Omron Hostlink" value="Omron Hostlink" />
                                     <el-option label="Omron FINS UDP" value="Omron FINS UDP" />
@@ -105,315 +105,305 @@
                                     <el-option label="Simatic S7-400" value="Simatic S7-400" />
                                     <el-option label="Simatic S7-1200" value="Simatic S7-1200" />
                                     <el-option label="Simatic S7-1500" value="Simatic S7-1500" /> -->
-                                </el-select>
-                            </el-form-item>
-                            <el-form-item label="协议参数">
-                                <codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content">
-                                </codeEditor>
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                </el-collapse>
-            </el-tab-pane>
-            <!-- <el-tab-pane label="专家视图" name="second">
-                <h1>专家视图</h1>
-            </el-tab-pane> -->
-        </el-tabs>
-        <div style="position: absolute;right:20px;top: 20px;">
-            <el-button size="medium" @click="$router.replace('/iotmanager/network/server')">取消</el-button>
-            <el-button @click="submit" size="medium" type="primary">提交</el-button>
-        </div>
-
-        <!-- <codeEditor ref="mirrorRef"
-	  :mode="resourceModalPro.mode"
-	  :content="resourceModalPro.content"
-	  >
-	  </codeEditor> -->
-    </el-card>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="协议参数">
+                <codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content">
+                </codeEditor>
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+        </el-collapse>
+      </el-tab-pane>
+    </el-tabs>
+    <div style="position: absolute;right:20px;top: 14px;">
+      <el-button size="small" @click="$router.replace('/iotmanager/network/server')">取消</el-button>
+      <el-button @click="submit" size="small" type="primary">提交</el-button>
+    </div>
+  </div>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance, watch } from 'vue';
-import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import { Edit } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
 import type { TabsPaneContext } from 'element-plus'
 import codeEditor from '/@/components/codeEditor/index.vue'
 
 import serverDetail from './component/serverDetail.vue'
 
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 
 import api from '/@/api/network';
 import api2 from '/@/api/system';
 
 interface TableDataState {
-    // ids: number[];
-    // id: string;
-    activeViewName: string[];
-    resourceModalPro: {
-        mode: string,
-        content: string,
-        // content: object,
-    },
-    detail: object,
-    form: object,
-    certificateList: object[];
-    stick: {
-        // 分隔符
-        "delimit,omitempty": string,
-        // 自定义脚本
-        "custom,omitempty": string,
-        // 固定长度
-        "fixedLen,omitempty": number,
-        // 长度字段
-        "len,omitempty": {
-            "len": number,
-            "offset": number,
-            "endian": string
-        }
-    };
-    stick_type: object[];
-    stickValue: string;
+  // ids: number[];
+  // id: string;
+  activeViewName: string[];
+  resourceModalPro: {
+    mode: string,
+    content: string,
+    // content: object,
+  },
+  detail: object,
+  form: object,
+  certificateList: object[];
+  stick: {
+    // 分隔符
+    "delimit,omitempty": string,
+    // 自定义脚本
+    "custom,omitempty": string,
+    // 固定长度
+    "fixedLen,omitempty": number,
+    // 长度字段
+    "len,omitempty": {
+      "len": number,
+      "offset": number,
+      "endian": string
+    }
+  };
+  stick_type: object[];
+  stickValue: string;
 
 }
 export default defineComponent({
-    name: 'serverCreate',
-    components: { codeEditor, serverDetail },
-    props: {
-        type: {
-            type: String,
-            default: ''
-        }
-    },
-
-    setup(props, context) {
-        const { proxy } = getCurrentInstance() as any;
-        const route = useRoute();
-        const router = useRouter();
-        const { network_server_type, network_protocols } = proxy.useDict('network_server_type', 'network_protocols');
+  name: 'serverCreate',
+  components: { codeEditor, serverDetail },
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
 
-        const state = reactive<TableDataState>({
-            stickValue: "",
-            stick: {
-                "delimit,omitempty": "",
-                "custom,omitempty": "",
-                "fixedLen,omitempty": 0,
-                "len,omitempty": {
-                    "len": 0,
-                    "offset": 0,
-                    "endian": ""
-                }
-            },
-            stick_type: [
-                {
-                    label: "分隔符",
-                    value: "分隔符"
-                },
-                {
-                    label: "自定义脚本",
-                    value: "自定义脚本"
-                },
-                {
-                    label: "固定长度",
-                    value: "固定长度"
-                },
-                {
-                    label: "长度字段",
-                    value: "长度字段"
-                }
-            ],
-            resourceModalPro: {
-                mode: '',
-                content: ''
-            },
-            detail: {},
-            activeViewName: ['1', '2', '3'],
-            certificateList: [],
-            form: {
-                id: "",
-                // AccessToken
-                accessToken: "",
-                // 认证密码
-                authPasswd: "",
-                // 认证用户
-                authUser: "",
-                // 认证方式（1=Basic，2=AccessToken，3=证书）
-                authType: 3,
-                // 是否开启TLS
-                isTls: 0,
-                // 证书id
-                certificateId: "",
-                // 名称
-                name: '',
-                // 类型
-                types: 'tcp',
-                // 禁用
-                status: 0,
-                // 地址
-                addr: '',
-                register: {
-                    regex: "^\w+$"
-                },
-                // 协议适配
-                protocol: {
-                    name: "ModbusTCP",
-                    options: {}
-                },
-                // 心跳包
-                heartbeat: {
-                    enable: false,
-                    hex: "",
-                    regex: "^\\w+$",
-                    text: "",
-                    timeout: 30
-                },
-                // 设备
-                devices: []
-            }
-        });
-        const mirrorRef = ref('mirrorRef')
-        const activeName = ref('first')
-        const getDetail = () => {
-            const id = route.params && route.params.id;
-            api.tunnel.getDetail({ "id": id }).then((res: any) => {
-                state.detail = res
-            })
-        };
-        const submit = () => {
-            if (!state.form.id) {
-                delete state.form.id;
-            }
-            let params = {
-                ...state.form,
-                "stick": {
-                    ...state.stick
-                }
-            }
-            if (mirrorRef.value.getValue()) {
-                state.form.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
-            }
-            // return
-            api.server.addItem(params).then((res: any) => {
-                ElMessage.success('添加成功')
-                goBack()
-                // const { list, total, page } = res
-                // state.data = list
-                // state.total = total
-                // state.param.page = page
-            });
-        };
-        onMounted(() => {
+  setup(props, context) {
+    const { proxy } = getCurrentInstance() as any;
+    const route = useRoute();
+    const { network_server_type, network_protocols } = proxy.useDict('network_server_type', 'network_protocols');
 
-            let obj = {}
-            var jsonData = JSON.stringify(obj);
-            state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
-            getCertificateList()
-        });
-        const handleClick = (tab: TabsPaneContext, event: Event) => {
+    const state = reactive<TableDataState>({
+      stickValue: "",
+      stick: {
+        "delimit,omitempty": "",
+        "custom,omitempty": "",
+        "fixedLen,omitempty": 0,
+        "len,omitempty": {
+          "len": 0,
+          "offset": 0,
+          "endian": ""
         }
-        const getCertificateList = () => {
-            api2.certificate.getList().then((res: any) => {
-                state.certificateList = res.Info;
-            })
+      },
+      stick_type: [
+        {
+          label: "分隔符",
+          value: "分隔符"
+        },
+        {
+          label: "自定义脚本",
+          value: "自定义脚本"
+        },
+        {
+          label: "固定长度",
+          value: "固定长度"
+        },
+        {
+          label: "长度字段",
+          value: "长度字段"
         }
-        const initData = () => {
-            state.stick = {
-                "delimit,omitempty": "",
-                "custom,omitempty": "",
-                "fixedLen,omitempty": 0,
-                "len,omitempty": {
-                    "len": 0,
-                    "offset": 0,
-                    "endian": ""
-                }
-            }
+      ],
+      resourceModalPro: {
+        mode: '',
+        content: ''
+      },
+      detail: {},
+      activeViewName: ['1', '2', '3'],
+      certificateList: [],
+      form: {
+        id: "",
+        // AccessToken
+        accessToken: "",
+        // 认证密码
+        authPasswd: "",
+        // 认证用户
+        authUser: "",
+        // 认证方式（1=Basic，2=AccessToken，3=证书）
+        authType: 3,
+        // 是否开启TLS
+        isTls: 0,
+        // 证书id
+        certificateId: "",
+        // 名称
+        name: '',
+        // 类型
+        types: 'tcp',
+        // 禁用
+        status: 0,
+        // 地址
+        addr: '',
+        register: {
+          regex: "^\w+$"
+        },
+        // 协议适配
+        protocol: {
+          name: "ModbusTCP",
+          options: {}
+        },
+        // 心跳包
+        heartbeat: {
+          enable: false,
+          hex: "",
+          regex: "^\\w+$",
+          text: "",
+          timeout: 30
+        },
+        // 设备
+        devices: []
+      }
+    });
+    const mirrorRef = ref('mirrorRef')
+    const activeName = ref('first')
+    const getDetail = () => {
+      const id = route.params && route.params.id;
+      api.tunnel.getDetail({ "id": id }).then((res: any) => {
+        state.detail = res
+      })
+    };
+    const submit = () => {
+      if (!state.form.id) {
+        delete state.form.id;
+      }
+      let params = {
+        ...state.form,
+        "stick": {
+          ...state.stick
         }
-        const handleChangeType = () => {
-            if (state.form.types != 'mqtt_server' && state.form.isTls == 1) {
-                state.form.authType = 3
-                return;
-            }
-            if (state.form.isTls == 0) {
-                state.form.authType = ""
-            }
+      }
+      if (mirrorRef.value.getValue()) {
+        state.form.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
+      }
+      // return
+      api.server.addItem(params).then((res: any) => {
+        ElMessage.success('添加成功')
+        goBack()
+        // const { list, total, page } = res
+        // state.data = list
+        // state.total = total
+        // state.param.page = page
+      });
+    };
+    onMounted(() => {
+
+      let obj = {}
+      var jsonData = JSON.stringify(obj);
+      state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
+      getCertificateList()
+    });
+    const handleClick = (tab: TabsPaneContext, event: Event) => {
+    }
+    const getCertificateList = () => {
+      api2.certificate.getList().then((res: any) => {
+        state.certificateList = res.Info;
+      })
+    }
+    const initData = () => {
+      state.stick = {
+        "delimit,omitempty": "",
+        "custom,omitempty": "",
+        "fixedLen,omitempty": 0,
+        "len,omitempty": {
+          "len": 0,
+          "offset": 0,
+          "endian": ""
         }
-        watch(
-            () => state.form.types,
-            (value) => {
-                getCertificateList()
-                // api.certificate.getList();
-            }
-        );
+      }
+    }
+    const handleChangeType = () => {
+      if (state.form.types != 'mqtt_server' && state.form.isTls == 1) {
+        state.form.authType = 3
+        return;
+      }
+      if (state.form.isTls == 0) {
+        state.form.authType = ""
+      }
+    }
+    watch(
+      () => state.form.types,
+      (value) => {
+        getCertificateList()
+        // api.certificate.getList();
+      }
+    );
 
-        watch(
-            () => state.form.isTls,
-            (value) => {
-                if (value == 0) {
-                    state.form.authType = ""
-                }
-                // api.certificate.getList();
-            }
-        );
-        return {
-            Edit,
-            mirrorRef,
-            activeName,
-            getDetail,
-            handleClick,
-            network_server_type,
-            network_protocols,
-            // editDicRef,
-            // editAttrRef,
-            // editFunRef,
-            // editEventRef,
-            // editTabRef,
-            getCertificateList,
-            submit,
-            initData,
-            handleChangeType,
-            ...toRefs(props),
-            ...toRefs(state),
-        };
-    },
+    watch(
+      () => state.form.isTls,
+      (value) => {
+        if (value == 0) {
+          state.form.authType = ""
+        }
+        // api.certificate.getList();
+      }
+    );
+    return {
+      Edit,
+      mirrorRef,
+      activeName,
+      getDetail,
+      handleClick,
+      network_server_type,
+      network_protocols,
+      // editDicRef,
+      // editAttrRef,
+      // editFunRef,
+      // editEventRef,
+      // editTabRef,
+      getCertificateList,
+      submit,
+      initData,
+      handleChangeType,
+      ...toRefs(props),
+      ...toRefs(state),
+    };
+  },
 });
 </script>
 
 <style>
 .CodeMirror {
-    width: 100%;
-    height: 600px;
-    font-size: 16px;
+  width: 100%;
+  height: 600px;
+  font-size: 16px;
 }
 </style>
 <style lang="scss" scoped>
 ::v-deep .el-collapse-item__header {
-    position: relative;
-    padding-left: 20px;
+  position: relative;
+  padding-left: 20px;
 
-    .el-collapse-item__arrow {
-        margin: 0 !important;
-        position: absolute;
-        left: 0;
-        right: 0;
+  .el-collapse-item__arrow {
+    margin: 0 !important;
+    position: absolute;
+    left: 0;
+    right: 0;
 
-    }
+  }
 }
 
 ::v-deep .el-input,
 ::v-deep .el-input-number {
-    width: 500px;
+  width: 500px;
 }
 
 ::v-deep .params {
-    width: 600px;
+  width: 600px;
 }
 
 ::v-deep .flex-column {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    .el-form-item__label {
-        justify-content: flex-start;
-    }
+  .el-form-item__label {
+    justify-content: flex-start;
+  }
 }
 </style>
 

src/views/iot/network/server/detail.vue

@@ -1,18 +1,18 @@
 <template>
-	<el-card class="system-dic-container" style="position: relative;">
-		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+	<div class="page bg border padding Ipt-2" style="position: relative;">
+		<el-tabs v-model="activeName" @tab-click="handleClick">
 			<el-tab-pane label="服务器详情" name="first">
 				<serverDetail :detail="detail" />
 			</el-tab-pane>
 			<!-- <el-tab-pane label="相关详情" name="second">相关详情</el-tab-pane>
 			<el-tab-pane label="通道" name="third">通道</el-tab-pane> -->
 		</el-tabs>
-		<div style="position: absolute;right:20px;top: 34px;">
+		<div style="position: absolute;right:20px;top: 18px;">
 			<el-icon @click="freshData" style="font-size: 16px;margin-right:6px;"><ele-RefreshRight /></el-icon>
 			<!-- <el-icon style="font-size: 16px;margin: 0 6px;"><ele-Operation /></el-icon> -->
 			<el-icon @click="toEdit"  style="cursor: pointer;font-size: 16px;"><ele-Edit /></el-icon>
 		</div>
-	</el-card>
+	</div>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
@@ -87,7 +87,7 @@ export default defineComponent({
 });
 </script>
 
-<style>
+<style scoped>
 .CodeMirror {
   width: 100%;
   height: 600px;

src/views/iot/network/server/edit.vue

@@ -1,115 +1,115 @@
 <template>
-    <el-card class="system-dic-container" style="position: relative;">
-        <el-tabs v-model="activeName" class="demo-tabs">
-            <el-tab-pane label="编辑服务器" name="first">
-                <el-collapse v-model="activeViewName">
-                    <el-collapse-item title="基本信息" name="1">
-                        <div class="collapse-wrap">
-                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
-                                <el-form-item label="名称">
-                                    <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
-                                </el-form-item>
-                                <el-form-item label="类型">
-                                    <el-select @change="handleChangeType" v-model="form.types" placeholder="请选择类型">
-                                        <el-option v-for="dict in network_server_type" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item v-if="form.types == 'tcp'" label="粘拆包规则">
-                                    <el-select @change="initData" v-model="stickValue" placeholder="请选择类型">
-                                        <el-option v-for="dict in stick_type" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item v-if="form.types == 'tcp' && stickValue">
-                                    <el-form-item v-if="stickValue == '分隔符'" class="flex-column" label="分隔符">
-                                        <el-input v-model="stick['delimit,omitempty']" placeholder="请填写分隔符" />
-                                    </el-form-item>
-                                    <el-form-item v-if="stickValue == '自定义脚本'" class="flex-column" label="自定义脚本">
-                                        <el-input v-model="stick['custom,omitempty']" placeholder="请填写自定义脚本" />
-                                    </el-form-item>
-                                    <el-form-item v-if="stickValue == '固定长度'" class="flex-column" label="固定长度">
-                                        <el-input type="number" v-model="stick['fixedLen,omitempty']" placeholder="请填写固定长度" />
-                                    </el-form-item>
-                                    <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="长度">
-                                        <el-input type="number" v-model="stick['len,omitempty']['len']" placeholder="请填写长度" />
-                                    </el-form-item>
-                                    <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="偏移量">
-                                        <el-input type="number" v-model="stick['len,omitempty']['offset']" placeholder="请填写偏移量" />
-                                    </el-form-item>
-                                    <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="大小端">
-                                        <el-select v-model="stick['len,omitempty']['endian']" placeholder="请选择大小端">
-                                            <el-option label="大端" value="大端" />
-                                            <el-option label="小端" value="小端" />
-                                        </el-select>
-                                    </el-form-item>
-                                </el-form-item>
-                                <el-form-item label="地址">
-                                    <el-input v-model="form.addr" placeholder="端口号" />
-                                </el-form-item>
-                                <el-form-item label="开启TLS">
-                                    <el-radio-group v-model="form.isTls" class="ml-4">
-                                        <el-radio :label="1">是</el-radio>
-                                        <el-radio :label="0">否</el-radio>
-                                    </el-radio-group>
-                                </el-form-item>
-                                <el-form-item v-if="form.isTls == 1 && form.types != 'mqtt_server'" label="选择证书">
-                                    <el-select v-model="form.certificateId" placeholder="请选择证书">
-                                        <el-option v-for="item in certificateList" :key="item.id" :label="item.name" :value="item.id">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item v-if="form.isTls == 1 && form.types == 'mqtt_server'" label="接入方式">
-                                    <el-select v-model="form.authType" placeholder="选择接入方式">
-                                        <el-option label="Basic" :value="1" />
-                                        <el-option label="AccessToken" :value="2" />
-                                        <!-- <el-option label="证书" :value="3" /> -->
-                                    </el-select>
-                                    <el-form-item v-if="form.authType == 1" class="flex-column" label="用户名">
-                                        <el-input v-model="form.authUser" placeholder="请填写用户名" />
-                                    </el-form-item>
-                                    <el-form-item v-if="form.authType == 1" class="flex-column" label="密码">
-                                        <el-input v-model="form.authPasswd" placeholder="请填写密码" />
-                                    </el-form-item>
-                                    <el-form-item v-if="form.authType == 2" class="flex-column" label="Aceess Token">
-                                        <el-input v-model="form.accessToken" placeholder="请填写Aceess Token" />
-                                    </el-form-item>
-                                </el-form-item>
-                                <el-form-item label="启用">
-                                    <el-switch :active-value="1" :inactive-value="0" v-model="form.status" />
-                                </el-form-item>
-                            </el-form>
-                        </div>
-                    </el-collapse-item>
-                    <el-collapse-item title="注册包" name="2">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
-                            <el-form-item label="正则表达式">
-                                <el-input v-model="form.register.regex" placeholder="请填写名称" />
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                    <el-collapse-item title="协议适配" name="3">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
-                            <el-form-item label="协议">
-                                <el-select v-model="form.protocol.name" placeholder="请选择协议适配">
-                                    <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
-                            <el-form-item label="协议参数">
-                                <codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content">
-                                </codeEditor>
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                </el-collapse>
-            </el-tab-pane>
-        </el-tabs>
-        <div style="position: absolute;right:20px;top: 20px;">
-            <el-button size="medium" @click="$router.replace('/iotmanager/network/server')">取消</el-button>
-            <el-button @click="submit" size="medium" type="primary">提交</el-button>
-        </div>
-    </el-card>
+  <div class="page bg padding border page-full Ipt-2" style="position: relative;">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="编辑服务器" name="first">
+        <el-collapse v-model="activeViewName">
+          <el-collapse-item title="基本信息" name="1">
+            <div class="collapse-wrap">
+              <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
+                <el-form-item label="名称">
+                  <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
+                </el-form-item>
+                <el-form-item label="类型">
+                  <el-select @change="handleChangeType" v-model="form.types" placeholder="请选择类型">
+                    <el-option v-for="dict in network_server_type" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item v-if="form.types == 'tcp'" label="粘拆包规则">
+                  <el-select @change="initData" v-model="stickValue" placeholder="请选择类型">
+                    <el-option v-for="dict in stick_type" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item v-if="form.types == 'tcp' && stickValue">
+                  <el-form-item v-if="stickValue == '分隔符'" class="flex-column" label="分隔符">
+                    <el-input v-model="stick['delimit,omitempty']" placeholder="请填写分隔符" />
+                  </el-form-item>
+                  <el-form-item v-if="stickValue == '自定义脚本'" class="flex-column" label="自定义脚本">
+                    <el-input v-model="stick['custom,omitempty']" placeholder="请填写自定义脚本" />
+                  </el-form-item>
+                  <el-form-item v-if="stickValue == '固定长度'" class="flex-column" label="固定长度">
+                    <el-input type="number" v-model="stick['fixedLen,omitempty']" placeholder="请填写固定长度" />
+                  </el-form-item>
+                  <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="长度">
+                    <el-input type="number" v-model="stick['len,omitempty']['len']" placeholder="请填写长度" />
+                  </el-form-item>
+                  <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="偏移量">
+                    <el-input type="number" v-model="stick['len,omitempty']['offset']" placeholder="请填写偏移量" />
+                  </el-form-item>
+                  <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="大小端">
+                    <el-select v-model="stick['len,omitempty']['endian']" placeholder="请选择大小端">
+                      <el-option label="大端" value="大端" />
+                      <el-option label="小端" value="小端" />
+                    </el-select>
+                  </el-form-item>
+                </el-form-item>
+                <el-form-item label="地址">
+                  <el-input v-model="form.addr" placeholder="端口号" />
+                </el-form-item>
+                <el-form-item label="开启TLS">
+                  <el-radio-group v-model="form.isTls" class="ml-4">
+                    <el-radio :label="1">是</el-radio>
+                    <el-radio :label="0">否</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item v-if="form.isTls == 1 && form.types != 'mqtt_server'" label="选择证书">
+                  <el-select v-model="form.certificateId" placeholder="请选择证书">
+                    <el-option v-for="item in certificateList" :key="item.id" :label="item.name" :value="item.id">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item v-if="form.isTls == 1 && form.types == 'mqtt_server'" label="接入方式">
+                  <el-select v-model="form.authType" placeholder="选择接入方式">
+                    <el-option label="Basic" :value="1" />
+                    <el-option label="AccessToken" :value="2" />
+                    <!-- <el-option label="证书" :value="3" /> -->
+                  </el-select>
+                  <el-form-item v-if="form.authType == 1" class="flex-column" label="用户名">
+                    <el-input v-model="form.authUser" placeholder="请填写用户名" />
+                  </el-form-item>
+                  <el-form-item v-if="form.authType == 1" class="flex-column" label="密码">
+                    <el-input v-model="form.authPasswd" placeholder="请填写密码" />
+                  </el-form-item>
+                  <el-form-item v-if="form.authType == 2" class="flex-column" label="Aceess Token">
+                    <el-input v-model="form.accessToken" placeholder="请填写Aceess Token" />
+                  </el-form-item>
+                </el-form-item>
+                <el-form-item label="启用">
+                  <el-switch :active-value="1" :inactive-value="0" v-model="form.status" />
+                </el-form-item>
+              </el-form>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item title="注册包" name="2">
+            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
+              <el-form-item label="正则表达式">
+                <el-input v-model="form.register.regex" placeholder="请填写名称" />
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+          <el-collapse-item title="协议适配" name="3">
+            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
+              <el-form-item label="协议">
+                <el-select v-model="form.protocol.name" placeholder="请选择协议适配">
+                  <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="协议参数">
+                <codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content">
+                </codeEditor>
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+        </el-collapse>
+      </el-tab-pane>
+    </el-tabs>
+    <div style="position: absolute;right:20px;top: 14px;">
+      <el-button size="small" @click="$router.replace('/iotmanager/network/server')">取消</el-button>
+      <el-button @click="submit" size="small" type="primary">提交</el-button>
+    </div>
+  </div>
 </template>
 <script lang="ts">
 import { watch, toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
@@ -125,279 +125,279 @@ import api from '/@/api/network';
 import api2 from '/@/api/system';
 
 interface TableDataState {
-    activeViewName: string[];
-    resourceModalPro: {
-        mode: string,
-        content: string,
-    },
-    detail: object,
-    form: object,
-    certificateList: object[];
-    stick: {
-        // 分隔符
-        "delimit,omitempty": string,
-        // 自定义脚本
-        "custom,omitempty": string,
-        // 固定长度
-        "fixedLen,omitempty": number,
-        // 长度字段
-        "len,omitempty": {
-            "len": number,
-            "offset": number,
-            "endian": string
-        }
-    };
-    stick_type: object[];
-    stickValue: string;
+  activeViewName: string[];
+  resourceModalPro: {
+    mode: string,
+    content: string,
+  },
+  detail: object,
+  form: object,
+  certificateList: object[];
+  stick: {
+    // 分隔符
+    "delimit,omitempty": string,
+    // 自定义脚本
+    "custom,omitempty": string,
+    // 固定长度
+    "fixedLen,omitempty": number,
+    // 长度字段
+    "len,omitempty": {
+      "len": number,
+      "offset": number,
+      "endian": string
+    }
+  };
+  stick_type: object[];
+  stickValue: string;
 }
 export default defineComponent({
-    name: 'serverCreate',
-    components: { codeEditor, serverDetail },
-    props: {
-        type: {
-            type: String,
-            default: ''
-        }
-    },
-
-    setup(props, context) {
-        const { proxy } = getCurrentInstance() as any;
-        const route = useRoute();
-        const router = useRouter();
-        const { network_server_type, network_protocols } = proxy.useDict('network_server_type', 'network_protocols');
+  name: 'serverCreate',
+  components: { codeEditor, serverDetail },
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
 
-        const state = reactive<TableDataState>({
-            // id: "",
-            stickValue: "",
-            stick: {
-                "delimit,omitempty": "",
-                "custom,omitempty": "",
-                "fixedLen,omitempty": 0,
-                "len,omitempty": {
-                    "len": 0,
-                    "offset": 0,
-                    "endian": ""
-                }
-            },
-            stick_type: [
-                {
-                    label: "分隔符",
-                    value: "分隔符"
-                },
-                {
-                    label: "自定义脚本",
-                    value: "自定义脚本"
-                },
-                {
-                    label: "固定长度",
-                    value: "固定长度"
-                },
-                {
-                    label: "长度字段",
-                    value: "长度字段"
-                }
-            ],
-            resourceModalPro: {
-                mode: '',
-                content: ''
-            },
-            certificateList: [],
-            detail: {},
-            activeViewName: ['1', '2', '3'],
-            form: {
-                // 名称
-                name: '',
-                // AccessToken
-                accessToken: "",
-                // 认证密码
-                authPasswd: "",
-                // 认证用户
-                authUser: "",
-                // 认证方式（1=Basic，2=AccessToken，3=证书）
-                authType: 3,
-                // 是否开启TLS
-                isTls: 0,
-                // 证书id
-                certificateId: "",
-                // 类型
-                types: 'tcp',
-                // 禁用
-                status: false,
-                // 地址
-                addr: '',
-                register: {
-                    regex: "^\w+$"
-                },
-                // 协议适配
-                protocol: {
-                    name: "ModbusTCP",
-                    options: {}
-                },
-                // 心跳包
-                heartbeat: {
-                    enable: false,
-                    hex: "",
-                    regex: "^\\w+$",
-                    text: "",
-                    timeout: 30
-                },
-                // 设备
-                devices: []
-            }
-        });
-        const mirrorRef = ref('mirrorRef')
-        const activeName = ref('first')
-        const getDetail = () => {
-            const id = route.params && route.params.id;
-            api.server.getDetail({ "id": id }).then((res: any) => {
+  setup(props, context) {
+    const { proxy } = getCurrentInstance() as any;
+    const route = useRoute();
+    const router = useRouter();
+    const { network_server_type, network_protocols } = proxy.useDict('network_server_type', 'network_protocols');
 
-                const { id, isTls, authType, certificateId, authUser, authPasswd, accessToken, name, types, status, addr, register, protocol, heartbeat, devices, stick } = res
-                state.form["id"] = id
-                state.form["name"] = name
-                state.form["types"] = types
-                state.form["status"] = status
-                state.form["isTls"] = isTls
-                state.form["addr"] = addr
-                state.form["authType"] = authType
-                state.form["authUser"] = authUser
-                state.form["authPasswd"] = authPasswd
-                state.form["accessToken"] = accessToken
-                state.form["certificateId"] = certificateId
-                state.form["register"] = JSON.parse(register)
-                state.form["protocol"] = JSON.parse(protocol)
-                state.form["heartbeat"] = JSON.parse(heartbeat)
-                state.form["devices"] = JSON.parse(devices)
-                let stickInfo = JSON.parse(stick)
-                if (stickInfo.len && stickInfo.len.endian) {
-                    state.stick["len,omitempty"] = stickInfo.len
-                } else if (stickInfo.fixedLen) {
-                    state.stick["fixedLen,omitempty"] = stickInfo.fixedLen
-                } else if (stickInfo.custom) {
-                    state.stick["custom,omitempty"] = stickInfo.custom
-                } else if (stickInfo.delimit) {
-                    state.stick["delimit,omitempty"] = stickInfo.delimit
-                }
-                if (types == 'tcp') {
-                    if (state.stick['delimit,omitempty']) {
-                        state.stickValue = '分隔符'
-                    } else if (state.stick['custom,omitempty']) {
-                        state.stickValue = '自定义脚本'
-                    } else if (state.stick['fixedLen,omitempty']) {
-                        state.stickValue = '固定长度'
-                    } else if (state.stick['len,omitempty']) {
-                        state.stickValue = '长度字段'
-                    }
-                }
+    const state = reactive<TableDataState>({
+      // id: "",
+      stickValue: "",
+      stick: {
+        "delimit,omitempty": "",
+        "custom,omitempty": "",
+        "fixedLen,omitempty": 0,
+        "len,omitempty": {
+          "len": 0,
+          "offset": 0,
+          "endian": ""
+        }
+      },
+      stick_type: [
+        {
+          label: "分隔符",
+          value: "分隔符"
+        },
+        {
+          label: "自定义脚本",
+          value: "自定义脚本"
+        },
+        {
+          label: "固定长度",
+          value: "固定长度"
+        },
+        {
+          label: "长度字段",
+          value: "长度字段"
+        }
+      ],
+      resourceModalPro: {
+        mode: '',
+        content: ''
+      },
+      certificateList: [],
+      detail: {},
+      activeViewName: ['1', '2', '3'],
+      form: {
+        // 名称
+        name: '',
+        // AccessToken
+        accessToken: "",
+        // 认证密码
+        authPasswd: "",
+        // 认证用户
+        authUser: "",
+        // 认证方式（1=Basic，2=AccessToken，3=证书）
+        authType: 3,
+        // 是否开启TLS
+        isTls: 0,
+        // 证书id
+        certificateId: "",
+        // 类型
+        types: 'tcp',
+        // 禁用
+        status: false,
+        // 地址
+        addr: '',
+        register: {
+          regex: "^\w+$"
+        },
+        // 协议适配
+        protocol: {
+          name: "ModbusTCP",
+          options: {}
+        },
+        // 心跳包
+        heartbeat: {
+          enable: false,
+          hex: "",
+          regex: "^\\w+$",
+          text: "",
+          timeout: 30
+        },
+        // 设备
+        devices: []
+      }
+    });
+    const mirrorRef = ref('mirrorRef')
+    const activeName = ref('first')
+    const getDetail = () => {
+      const id = route.params && route.params.id;
+      api.server.getDetail({ "id": id }).then((res: any) => {
 
-                let jsonData = JSON.stringify(JSON.parse(protocol).options);
-                state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
-                mirrorRef.value.setValue(state.resourceModalPro.content);
-            })
-        };
-        const submit = () => {
-            let params = {
-                ...state.form,
-                "stick": {
-                    ...state.stick
-                }
-            }
-            if (mirrorRef.value.getValue()) {
-                state.form.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
-            }
-            // return
-            api.server.editItem(params).then((res: any) => {
-                ElMessage.success('修改成功')
-                goBack()
-            });
-        };
-        const goBack = () => {
-            router.go(-1);
+        const { id, isTls, authType, certificateId, authUser, authPasswd, accessToken, name, types, status, addr, register, protocol, heartbeat, devices, stick } = res
+        state.form["id"] = id
+        state.form["name"] = name
+        state.form["types"] = types
+        state.form["status"] = status
+        state.form["isTls"] = isTls
+        state.form["addr"] = addr
+        state.form["authType"] = authType
+        state.form["authUser"] = authUser
+        state.form["authPasswd"] = authPasswd
+        state.form["accessToken"] = accessToken
+        state.form["certificateId"] = certificateId
+        state.form["register"] = JSON.parse(register)
+        state.form["protocol"] = JSON.parse(protocol)
+        state.form["heartbeat"] = JSON.parse(heartbeat)
+        state.form["devices"] = JSON.parse(devices)
+        let stickInfo = JSON.parse(stick)
+        if (stickInfo.len && stickInfo.len.endian) {
+          state.stick["len,omitempty"] = stickInfo.len
+        } else if (stickInfo.fixedLen) {
+          state.stick["fixedLen,omitempty"] = stickInfo.fixedLen
+        } else if (stickInfo.custom) {
+          state.stick["custom,omitempty"] = stickInfo.custom
+        } else if (stickInfo.delimit) {
+          state.stick["delimit,omitempty"] = stickInfo.delimit
+        }
+        if (types == 'tcp') {
+          if (state.stick['delimit,omitempty']) {
+            state.stickValue = '分隔符'
+          } else if (state.stick['custom,omitempty']) {
+            state.stickValue = '自定义脚本'
+          } else if (state.stick['fixedLen,omitempty']) {
+            state.stickValue = '固定长度'
+          } else if (state.stick['len,omitempty']) {
+            state.stickValue = '长度字段'
+          }
         }
-        const initData = () => {
-            state.stick = {
-                "delimit,omitempty": "",
-                "custom,omitempty": "",
-                "fixedLen,omitempty": 0,
-                "len,omitempty": {
-                    "len": 0,
-                    "offset": 0,
-                    "endian": ""
-                }
-            }
+
+        let jsonData = JSON.stringify(JSON.parse(protocol).options);
+        state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
+        mirrorRef.value.setValue(state.resourceModalPro.content);
+      })
+    };
+    const submit = () => {
+      let params = {
+        ...state.form,
+        "stick": {
+          ...state.stick
         }
-        const handleChangeType = () => {
-            if (state.form.types != 'mqtt_server' && state.form.isTls == 1) {
-                state.form.authType = 3
-                return;
-            }
-            if (state.form.isTls == 0) {
-                state.form.authType = ""
-            }
+      }
+      if (mirrorRef.value.getValue()) {
+        state.form.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
+      }
+      // return
+      api.server.editItem(params).then((res: any) => {
+        ElMessage.success('修改成功')
+        goBack()
+      });
+    };
+    const goBack = () => {
+      router.go(-1);
+    }
+    const initData = () => {
+      state.stick = {
+        "delimit,omitempty": "",
+        "custom,omitempty": "",
+        "fixedLen,omitempty": 0,
+        "len,omitempty": {
+          "len": 0,
+          "offset": 0,
+          "endian": ""
         }
-        const getCertificateList = () => {
-            api2.certificate.getList().then((res: any) => {
-                state.certificateList = res.Info;
-            })
+      }
+    }
+    const handleChangeType = () => {
+      if (state.form.types != 'mqtt_server' && state.form.isTls == 1) {
+        state.form.authType = 3
+        return;
+      }
+      if (state.form.isTls == 0) {
+        state.form.authType = ""
+      }
+    }
+    const getCertificateList = () => {
+      api2.certificate.getList().then((res: any) => {
+        state.certificateList = res.Info;
+      })
+    }
+    watch(
+      () => state.form.isTls,
+      (value) => {
+        if (value == 0) {
+          state.form.authType = ""
         }
-        watch(
-            () => state.form.isTls,
-            (value) => {
-                if (value == 0) {
-                    state.form.authType = ""
-                }
-            }
-        );
-        onMounted(() => {
-            getDetail();
-            getCertificateList();
-        });
+      }
+    );
+    onMounted(() => {
+      getDetail();
+      getCertificateList();
+    });
 
-        return {
-            mirrorRef,
-            activeName,
-            getDetail,
-            network_server_type,
-            network_protocols,
-            submit,
-            initData,
-            handleChangeType,
-            getCertificateList,
-            ...toRefs(props),
-            ...toRefs(state),
-        };
-    },
+    return {
+      mirrorRef,
+      activeName,
+      getDetail,
+      network_server_type,
+      network_protocols,
+      submit,
+      initData,
+      handleChangeType,
+      getCertificateList,
+      ...toRefs(props),
+      ...toRefs(state),
+    };
+  },
 });
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-collapse-item__header {
-    position: relative;
-    padding-left: 20px;
+  position: relative;
+  padding-left: 20px;
 
-    .el-collapse-item__arrow {
-        margin: 0 !important;
-        position: absolute;
-        left: 0;
-        right: 0;
+  .el-collapse-item__arrow {
+    margin: 0 !important;
+    position: absolute;
+    left: 0;
+    right: 0;
 
-    }
+  }
 }
 
 ::v-deep .el-input,
 ::v-deep .el-input-number {
-    width: 500px;
+  width: 500px;
 }
 
 ::v-deep .params {
-    width: 600px;
+  width: 600px;
 }
 
 ::v-deep .flex-column {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    .el-form-item__label {
-        justify-content: flex-start;
-    }
+  .el-form-item__label {
+    justify-content: flex-start;
+  }
 }
 </style>
 

src/views/iot/network/tunnel/component/serverDetail.vue

@@ -8,34 +8,34 @@
 -->
 <!-- 服务器详情页 -->
 <template>
-	<div class="server-detail-wrap">
-        <div class="server-detail-item-wrap">
-            <div class="label">名称</div>
-            <div class="value">{{detail.name}}</div>
-        </div>
-        <div class="server-detail-item-wrap">
-            <div class="label">类型</div>
-            <div class="value">{{detail.types}}</div>
-        </div>
-        <div class="server-detail-item-wrap">
-            <div class="label">地址</div>
-            <div class="value">{{detail.addr}}</div>
-        </div>
-        <div class="server-detail-item-wrap">
-            <div class="label">状态</div>
-            <div class="value">{{detail.status?'启动':'未启动'}}</div>
-        </div>
-         <div class="server-detail-item-wrap">
-            <div class="label">禁用</div>
-            <div class="value">
-                <el-switch :loading="loading" :before-change="onChangeStatus" :disabled="!detail.status" :active-value="0"  :inactive-value="1" size="small" v-model="detail.status" />
-            </div>
-        </div>
-        <div class="server-detail-item-wrap">
-            <div class="label">创建时间</div>
-            <div class="value">{{detail.createdAt}}</div>
-        </div>
+  <div class="server-detail-wrap">
+    <div class="server-detail-item-wrap">
+      <div class="label">名称</div>
+      <div class="value">{{ detail.name }}</div>
     </div>
+    <div class="server-detail-item-wrap">
+      <div class="label">类型</div>
+      <div class="value">{{ detail.types }}</div>
+    </div>
+    <div class="server-detail-item-wrap">
+      <div class="label">地址</div>
+      <div class="value">{{ detail.addr }}</div>
+    </div>
+    <div class="server-detail-item-wrap">
+      <div class="label">状态</div>
+      <div class="value">{{ detail.status ? '启动' : '未启动' }}</div>
+    </div>
+    <div class="server-detail-item-wrap">
+      <div class="label">禁用</div>
+      <div class="value">
+        <el-switch :loading="loading" :before-change="onChangeStatus" :disabled="!detail.status" :active-value="0" :inactive-value="1" size="small" v-model="detail.status" />
+      </div>
+    </div>
+    <div class="server-detail-item-wrap">
+      <div class="label">创建时间</div>
+      <div class="value">{{ detail.createdAt }}</div>
+    </div>
+  </div>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
@@ -44,56 +44,57 @@ import { ElMessage } from 'element-plus';
 import api from '/@/api/network';
 
 interface TableDataState {
-    loading: boolean
+  loading: boolean
 }
 export default defineComponent({
-	name: 'serverDetail',
-	props: {
-		detail: {
-			type: Object,
-			default: ''
-		}
-	},
-	setup(props, context) {
-		const state = reactive<TableDataState>({
-            loading: false
-		});
-		onMounted(() => {
-		});
-        // 禁用状态
-        const onChangeStatus = () => {
-            state.loading = true
-            return new Promise((resolve) => {
-                api.tunnel.changeTunnelStatus({id: props.detail.id, status: 0}).then((res:any) => {
-                state.loading = false
-		        ElMessage.success('已关闭');
-                props.detail.status = 0
-            })
-            })
-            
-        };
-		return {
-            onChangeStatus,
-			...toRefs(props),
-			...toRefs(state),
-		};
-	}
+  name: 'serverDetail',
+  props: {
+    detail: {
+      type: Object,
+      default: ''
+    }
+  },
+  setup(props, context) {
+    const state = reactive<TableDataState>({
+      loading: false
+    });
+    onMounted(() => {
+    });
+    // 禁用状态
+    const onChangeStatus = () => {
+      state.loading = true
+      return new Promise((resolve) => {
+        api.tunnel.changeTunnelStatus({ id: props.detail.id, status: 0 }).then((res: any) => {
+          state.loading = false
+          ElMessage.success('已关闭');
+          props.detail.status = 0
+        })
+      })
+
+    };
+    return {
+      onChangeStatus,
+      ...toRefs(props),
+      ...toRefs(state),
+    };
+  }
 });
 </script>
 
 <style lang="scss" scoped>
 .server-detail-wrap {
-    .server-detail-item-wrap {
-        display: flex;
-        justify-content: space-between;
-        padding: 10px;
-        border-left: 1px solid var(--el-border-color-light);
-        border-top: 1px solid var(--el-border-color-light);
-        border-right: 1px solid var(--el-border-color-light);
-    }
-    .server-detail-item-wrap:last-child {
-        border-bottom: 1px solid var(--el-border-color-light);
-    }
+  .server-detail-item-wrap {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    border-left: 1px solid var(--el-border-color-light);
+    border-top: 1px solid var(--el-border-color-light);
+    border-right: 1px solid var(--el-border-color-light);
+  }
+
+  .server-detail-item-wrap:last-child {
+    border-bottom: 1px solid var(--el-border-color-light);
+  }
 }
 </style>
 

src/views/iot/network/tunnel/create.vue

@@ -1,285 +1,282 @@
 <template>
-    <el-card class="system-dic-container" style="position: relative;">
-        <el-tabs v-model="activeName" class="demo-tabs">
-            <el-tab-pane label="新增通道" name="first">
-                <el-collapse v-model="activeViewName">
-                    <el-collapse-item title="基本信息" name="1">
-                        <div class="collapse-wrap">
-                            <el-form style="width: 600px;margin: 0 auto;" :model="form" :rules="rules" label-width="68px">
-                                <el-form-item label="名称" prop="name">
-                                    <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
-                                </el-form-item>
-                                <el-form-item label="类型">
-                                    <el-select v-model="form.types" placeholder="请选择类型">
-                                        <el-option v-for="dict in network_tunnel_type" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item v-show="form.types != 'serial'" label="地址">
-                                    <el-input v-model="form.addr" placeholder="端口号，IP:端口" />
-                                </el-form-item>
-                                <el-form-item label="启用">
-                                    <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
-                                </el-form-item>
-                            </el-form>
-                        </div>
-                    </el-collapse-item>
-                    <el-collapse-item v-show="form.types == 'serial'" title="串口参数" name="2">
-                        <div class="collapse-wrap">
-                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                                <el-form-item label="端口">
-                                    <el-button>/dev/ttyS0</el-button>
-                                </el-form-item>
-                                <el-form-item label="波特率">
-                                    <el-select v-model="form.serial.baud_rate" placeholder="请选择波特率">
-                                        <el-option v-for="dict in tunnel_serial_baudrate" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item label="数据位">
-                                    <el-select v-model="form.serial.data_bits" placeholder="请选择数据位">
-                                        <el-option v-for="dict in tunnel_serial_databits" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item label="停止位">
-                                    <el-select v-model="form.serial.stop_bits" placeholder="请选择停止位">
-                                        <el-option v-for="dict in tunnel_serial_stopbits" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item label="检验位">
-                                    <el-select v-model="form.serial.parity" placeholder="请选择检验位">
-                                        <el-option v-for="dict in tunnel_serial_parity" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                            </el-form>
-                        </div>
-                    </el-collapse-item>
-                    <el-collapse-item v-show="form.type != 'serial'" title="心跳包" name="4">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                            <el-form-item label="启用">
-                                <el-switch v-model="form.heartbeat.enable" />
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                    <el-collapse-item v-if="form.types == 'serial' || form.types == 'tcp-client' || form.types == 'udp-client'" title="断线重连" name="4">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                            <el-form-item label="启用">
-                                <el-switch v-model="form.retry.enable" />
-                            </el-form-item>
-                            <el-form-item label="间隔">
-                                <el-input-number v-model="form.retry.timeout" :min="0" @change="handleChange" />
-                            </el-form-item>
-                            <el-form-item label="最大次数">
-                                <el-input-number v-model="form.retry.maximum" :min="0" @change="handleChange" />
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                    <el-collapse-item title="协议适配" name="5">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                            <el-form-item label="协议">
-                                <el-select v-model="form.protoccol.name" placeholder="请选择协议适配">
-                                    <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
-                            <el-form-item label="协议参数">
-                                <codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content" :getValue="getValue">
-                                </codeEditor>
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                </el-collapse>
-            </el-tab-pane>
-        </el-tabs>
-        <div style="position: absolute;right:20px;top: 20px;">
-            <el-button size="medium" @click="$router.replace('/iotmanager/network/tunnel')">取消</el-button>
-            <el-button @click="submit" size="medium" type="primary">提交</el-button>
-        </div>
-    </el-card>
+  <div class="page bg padding page-full Ipt-2" style="position: relative;">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="新增通道" name="first">
+        <el-collapse v-model="activeViewName">
+          <el-collapse-item title="基本信息" name="1">
+            <div class="collapse-wrap">
+              <el-form style="width: 600px;margin: 0 auto;" :model="form" :rules="rules" label-width="68px">
+                <el-form-item label="名称" prop="name">
+                  <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
+                </el-form-item>
+                <el-form-item label="类型">
+                  <el-select v-model="form.types" placeholder="请选择类型">
+                    <el-option v-for="dict in network_tunnel_type" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item v-show="form.types != 'serial'" label="地址">
+                  <el-input v-model="form.addr" placeholder="端口号，IP:端口" />
+                </el-form-item>
+                <el-form-item label="启用">
+                  <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
+                </el-form-item>
+              </el-form>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item v-show="form.types == 'serial'" title="串口参数" name="2">
+            <div class="collapse-wrap">
+              <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+                <el-form-item label="端口">
+                  <el-button>/dev/ttyS0</el-button>
+                </el-form-item>
+                <el-form-item label="波特率">
+                  <el-select v-model="form.serial.baud_rate" placeholder="请选择波特率">
+                    <el-option v-for="dict in tunnel_serial_baudrate" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="数据位">
+                  <el-select v-model="form.serial.data_bits" placeholder="请选择数据位">
+                    <el-option v-for="dict in tunnel_serial_databits" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="停止位">
+                  <el-select v-model="form.serial.stop_bits" placeholder="请选择停止位">
+                    <el-option v-for="dict in tunnel_serial_stopbits" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="检验位">
+                  <el-select v-model="form.serial.parity" placeholder="请选择检验位">
+                    <el-option v-for="dict in tunnel_serial_parity" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-form>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item v-show="form.type != 'serial'" title="心跳包" name="3">
+            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+              <el-form-item label="启用">
+                <el-switch v-model="form.heartbeat.enable" />
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+          <el-collapse-item v-if="form.types == 'serial' || form.types == 'tcp-client' || form.types == 'udp-client'" title="断线重连" name="4">
+            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+              <el-form-item label="启用">
+                <el-switch v-model="form.retry.enable" />
+              </el-form-item>
+              <el-form-item label="间隔">
+                <el-input-number v-model="form.retry.timeout" :min="0" @change="handleChange" />
+              </el-form-item>
+              <el-form-item label="最大次数">
+                <el-input-number v-model="form.retry.maximum" :min="0" @change="handleChange" />
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+          <el-collapse-item title="协议适配" name="5">
+            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+              <el-form-item label="协议">
+                <el-select v-model="form.protoccol.name" placeholder="请选择协议适配">
+                  <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="协议参数">
+                <codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content" :getValue="getValue">
+                </codeEditor>
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+        </el-collapse>
+      </el-tab-pane>
+    </el-tabs>
+    <div style="position: absolute;right:20px;top: 14px;">
+      <el-button size="small" @click="$router.replace('/iotmanager/network/tunnel')">取消</el-button>
+      <el-button @click="submit" size="small" type="primary">提交</el-button>
+    </div>
+  </div>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance, nextTick } from 'vue';
 import { ElMessage } from 'element-plus';
-import type { TabsPaneContext } from 'element-plus'
 import codeEditor from '/@/components/codeEditor/index.vue'
-
 import serverDetail from './component/serverDetail.vue'
-
 import { useRoute, useRouter } from 'vue-router';
 
 import api from '/@/api/network';
 
 interface TableDataState {
-    activeViewName: string[];
-    resourceModalPro: {
-        mode: string,
-        content: string,
-    },
-    detail: object,
-    form: object,
-    rules: object,
+  activeViewName: string[];
+  resourceModalPro: {
+    mode: string,
+    content: string,
+  },
+  detail: object,
+  form: object,
+  rules: object,
 }
 export default defineComponent({
-    name: 'tunnelCreate',
-    components: { codeEditor, serverDetail },
-    props: {
-        type: {
-            type: String,
-            default: ''
-        }
-    },
+  name: 'tunnelCreate',
+  components: { codeEditor, serverDetail },
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
 
-    setup(props, context) {
-        const { proxy } = getCurrentInstance() as any;
-        const route = useRoute();
-        const router = useRouter();
-        const { network_tunnel_type, tunnel_serial_baudrate, tunnel_serial_databits, tunnel_serial_stopbits, tunnel_serial_parity, network_protocols } = proxy.useDict('network_tunnel_type', 'tunnel_serial_baudrate', 'tunnel_serial_databits', 'tunnel_serial_stopbits', 'tunnel_serial_parity', 'network_protocols');
+  setup(props, context) {
+    const { proxy } = getCurrentInstance() as any;
+    const route = useRoute();
+    const router = useRouter();
+    const { network_tunnel_type, tunnel_serial_baudrate, tunnel_serial_databits, tunnel_serial_stopbits, tunnel_serial_parity, network_protocols } = proxy.useDict('network_tunnel_type', 'tunnel_serial_baudrate', 'tunnel_serial_databits', 'tunnel_serial_stopbits', 'tunnel_serial_parity', 'network_protocols');
 
-        const state = reactive<TableDataState>({
-            // id: "",
-            resourceModalPro: {
-                mode: '',
-                content: ''
-            },
-            detail: {},
-            activeViewName: ['1', '2', '3', '4', '5'],
-            form: {
-                // 名称
-                name: '',
-                // 类型
-                types: 'serial',
-                // 启用
-                status: false,
-                // 地址
-                addr: '',
-                // 串口参数
-                serial: {
-                    baud_rate: "9600",
-                    data_bits: "6",
-                    stop_bits: "1",
-                    parity: '0'
-                },
-                // 断线重连
-                retry: {
-                    enable: true,
-                    timeout: 30,
-                    maximum: 0,
-                },
-                // 协议适配
-                protoccol: {
-                    name: "ModbusTCP",
-                    options: {}
-                },
-                // 心跳包
-                heartbeat: {
-                    enable: false,
-                    hex: "",
-                    regex: "^\\w+$",
-                    text: "",
-                    timeout: 30
-                }
-            },
-            rules: {
-                name: [
-                    { required: true, message: '名称不能为空', trigger: 'change' }
-                ]
-            }
-        });
+    const state = reactive<TableDataState>({
+      // id: "",
+      resourceModalPro: {
+        mode: '',
+        content: ''
+      },
+      detail: {},
+      activeViewName: ['1', '2', '3', '4', '5'],
+      form: {
+        // 名称
+        name: '',
+        // 类型
+        types: 'serial',
+        // 启用
+        status: false,
+        // 地址
+        addr: '',
+        // 串口参数
+        serial: {
+          baud_rate: "9600",
+          data_bits: "6",
+          stop_bits: "1",
+          parity: '0'
+        },
+        // 断线重连
+        retry: {
+          enable: true,
+          timeout: 30,
+          maximum: 0,
+        },
+        // 协议适配
+        protoccol: {
+          name: "ModbusTCP",
+          options: {}
+        },
+        // 心跳包
+        heartbeat: {
+          enable: false,
+          hex: "",
+          regex: "^\\w+$",
+          text: "",
+          timeout: 30
+        }
+      },
+      rules: {
+        name: [
+          { required: true, message: '名称不能为空', trigger: 'change' }
+        ]
+      }
+    });
 
-        const mirrorRef = ref('mirrorRef')
-        const activeName = ref('first')
+    const mirrorRef = ref('mirrorRef')
+    const activeName = ref('first')
 
-        const getDetail = () => {
-            const id = route.params && route.params.id;
-            api.tunnel.getDetail({ "id": id }).then((res: any) => {
-                state.detail = res
-            })
-        };
+    const getDetail = () => {
+      const id = route.params && route.params.id;
+      api.tunnel.getDetail({ "id": id }).then((res: any) => {
+        state.detail = res
+      })
+    };
 
 
-        const submit = () => {
-            // 串口参数-检验位-无
-            if (state.form.serial.parity == 0) {
-                state.form.serial.rs485 = false
-                delete state.form.serial.port
-            }
-            // 串口参数-检验位-偶/奇
-            if (state.form.serial.parity == 1 || state.form.serial.parity == 2) {
-                state.form.serial.port = null
-                delete state.form.serial.rs485
-            }
-            if (mirrorRef.value.getValue()) {
-                try {
-                    state.form.protoccol.options = eval("(" + mirrorRef.value.getValue() + ")")
-                } catch (error) {
-                    return ElMessage('协议参数解析错误')
-                }
-            }
-            // return
-            api.tunnel.addItem({ ...state.form }).then((res: any) => {
-                ElMessage.success('添加成功')
-                goBack()
-            });
-        };
-        const goBack = () => {
-            router.go(-1);
+    const submit = () => {
+      // 串口参数-检验位-无
+      if (state.form.serial.parity == 0) {
+        state.form.serial.rs485 = false
+        delete state.form.serial.port
+      }
+      // 串口参数-检验位-偶/奇
+      if (state.form.serial.parity == 1 || state.form.serial.parity == 2) {
+        state.form.serial.port = null
+        delete state.form.serial.rs485
+      }
+      if (mirrorRef.value.getValue()) {
+        try {
+          state.form.protoccol.options = eval("(" + mirrorRef.value.getValue() + ")")
+        } catch (error) {
+          return ElMessage('协议参数解析错误')
         }
-        onMounted(() => {
-            let obj = {}
-            var jsonData = JSON.stringify(obj);
-            state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
-        });
+      }
+      // return
+      api.tunnel.addItem({ ...state.form }).then((res: any) => {
+        ElMessage.success('添加成功')
+        goBack()
+      });
+    };
+    const goBack = () => {
+      router.go(-1);
+    }
+    onMounted(() => {
+      let obj = {}
+      var jsonData = JSON.stringify(obj);
+      state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
+    });
 
-        return {
-            mirrorRef,
-            activeName,
-            getDetail,
-            network_tunnel_type,
-            tunnel_serial_baudrate,
-            tunnel_serial_databits,
-            tunnel_serial_stopbits,
-            tunnel_serial_parity,
-            network_protocols,
-            submit,
-            goBack,
-            ...toRefs(props),
-            ...toRefs(state),
-        };
-    },
+    return {
+      mirrorRef,
+      activeName,
+      getDetail,
+      network_tunnel_type,
+      tunnel_serial_baudrate,
+      tunnel_serial_databits,
+      tunnel_serial_stopbits,
+      tunnel_serial_parity,
+      network_protocols,
+      submit,
+      goBack,
+      ...toRefs(props),
+      ...toRefs(state),
+    };
+  },
 });
 </script>
 
 <style>
 .CodeMirror {
-    width: 100%;
-    height: 600px;
-    font-size: 16px;
+  width: 100%;
+  height: 600px;
+  font-size: 16px;
 }
 </style>
 <style lang="scss" scoped>
 ::v-deep .el-collapse-item__header {
-    position: relative;
-    padding-left: 20px;
+  position: relative;
+  padding-left: 20px;
 
-    .el-collapse-item__arrow {
-        margin: 0 !important;
-        position: absolute;
-        left: 0;
-        right: 0;
+  .el-collapse-item__arrow {
+    margin: 0 !important;
+    position: absolute;
+    left: 0;
+    right: 0;
 
-    }
+  }
 }
 
 ::v-deep .el-input,
 ::v-deep .el-input-number {
-    width: 500px;
+  width: 500px;
 }
 
 ::v-deep .params {
-    width: 600px;
+  width: 600px;
 }
 </style>
 

src/views/iot/network/tunnel/detail.vue

@@ -1,23 +1,19 @@
 <template>
-	<el-card class="system-dic-container" style="position: relative;">
-		<el-tabs v-model="activeName" class="demo-tabs">
+	<div class="page bg border padding Ipt-2" style="position: relative;">
+		<el-tabs v-model="activeName">
 			<el-tab-pane label="通道详情" name="first">
 				<serverDetail :detail="detail" />
 			</el-tab-pane>
-			<!-- <el-tab-pane label="相关详情" name="second">相关详情</el-tab-pane>
-			<el-tab-pane label="通道" name="third">通道</el-tab-pane> -->
 		</el-tabs>
-		<div style="position: absolute;right:20px;top: 34px;">
+		<div style="position: absolute;right:20px;top: 18px;">
 			<el-icon @click="freshData" style="cursor: pointer;font-size: 16px;margin-right:6px;"><ele-RefreshRight /></el-icon>
-			<!-- <el-icon style="font-size: 16px;margin: 0 6px;"><ele-Operation /></el-icon> -->
 			<el-icon @click="toEdit" style="cursor: pointer;font-size: 16px;"><ele-Edit /></el-icon>
 		</div>
-	</el-card>
+	</div>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-import type { TabsPaneContext } from 'element-plus'
+import { ElMessage } from 'element-plus';
 
 import serverDetail from './component/serverDetail.vue'
 
@@ -50,12 +46,12 @@ export default defineComponent({
 				mode: '',
 				content: ''
 			},
-			detail:{}
+			detail: {}
 		});
 		const activeName = ref('first')
 		const getDetail = () => {
 			const id = route.params && route.params.id;
-			api.tunnel.getDetail({"id": id}).then((res: any) => {
+			api.tunnel.getDetail({ "id": id }).then((res: any) => {
 				state.detail = res
 			})
 		};
@@ -64,8 +60,8 @@ export default defineComponent({
 			ElMessage.success('刷新成功');
 		};
 		const toEdit = () => {
-            router.push(`/iotmanager/network/tunnel/edit/${route.params && route.params.id}`)
-        };
+			router.push(`/iotmanager/network/tunnel/edit/${route.params && route.params.id}`)
+		};
 		onMounted(() => {
 			getDetail()
 		});

src/views/iot/network/tunnel/edit.vue

@@ -1,6 +1,6 @@
 <template>
     <el-card class="system-dic-container" style="position: relative;">
-        <el-tabs v-model="activeName" class="demo-tabs">
+        <el-tabs v-model="activeName">
             <el-tab-pane label="编辑通道" name="first">
                 <el-collapse v-model="activeViewName">
                     <el-collapse-item title="基本信息" name="1">

src/views/iot/noticeservices/config/component/edit.vue

@@ -131,7 +131,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .el-textarea__inner{
 	min-height: 420px !important;
 }

src/views/iot/noticeservices/config/component/setEdit.vue

@@ -143,7 +143,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .inline {
 	display: inline-flex;
 }

src/views/iot/noticeservices/config/component/temEdit.vue

@@ -171,7 +171,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .inline {
 	display: inline-flex;
 }

src/views/iot/noticeservices/config/index.vue

@@ -207,7 +207,7 @@ export default defineComponent({
 });
 </script>
 
-<style>
+<style scoped>
 .line {
   border: 1px solid var(--next-border-color-light);
   ;
@@ -218,7 +218,6 @@ export default defineComponent({
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   font-variant: tabular-nums;
   line-height: 1.5715;

src/views/iot/noticeservices/config/setting.vue

@@ -1,131 +1,90 @@
 <template>
-	<div class="system-dic-container">
-		<el-card shadow="nover">
-			<div class="system-user-search mb15">
-				<el-form :model="tableData.param" ref="queryRef" inline @keyup.enter.native="dataList">
-					<el-form-item label="配置名称" prop="keyWord">
-						<el-input v-model="tableData.param.keyWord" placeholder="请输入配置名称" clearable style="width: 240px" />
-					</el-form-item>
-					<!-- <el-form-item label="通知方式" prop="name">
-						<el-input
-							v-model="tableData.param.sendGateway"
-							placeholder="请输入通知方式"
-							clearable
-							size="default"
-							style="width: 240px"
-							@keyup.enter.native="dataList"
-						/>
-					</el-form-item> -->
-
-					<el-form-item>
-						<el-button type="primary" class="ml10" @click="dataList">
-							<el-icon>
-								<ele-Search />
-							</el-icon>
-							查询
-						</el-button>
-						<el-button @click="resetQuery(queryRef)">
-							<el-icon>
-								<ele-Refresh />
-							</el-icon>
-							重置
-						</el-button>
-						<el-button type="primary" class="ml10" @click="onOpenAdd">
-							<el-icon>
-								<ele-FolderAdd />
-							</el-icon>
-							新增通知
-						</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<div>
-				<div style="border: 1px solid var(--next-border-color-light)"></div>
-				<el-row>
-					<el-col :span="8" v-for="(item, index) in tableData.data" :key="index">
-						<div class="grid-content card">
-							<div class="ant-card">
-								<div class="ant-card-body">
-									<div class="pro-table-card-item">
-										<div class="card-item-avatar">
-											<img width="88" height="88" :src="'/imgs/notice/' + tableData.param.sendGateway + '.svg'" alt="" />
-										</div>
-										<div class="card-item-body">
-											<div class="card-item-header">
-												<div class="ellipsis">
-													<div class="ellipsis card-item-header-name" style="width: 100%; height: 45px">{{ item.title }}</div>
-													<div class="card-item-header-name" style="display: none"></div>
-												</div>
-											</div>
-											<div class="card-item-content">
-												通知方式：<el-tag>{{ item.types == 1 ? '即时发送' : '预约发送' }}</el-tag>
-												<!-- <div>
-													<label>说明</label>
-													<div class="ellipsis">
-														<div style="width: 100%"></div>
-													</div>
-												</div> -->
-											</div>
+	<el-card shadow="nover" class="page">
+		<div class="system-user-search">
+			<el-form :model="tableData.param" ref="queryRef" inline @keyup.enter.native="dataList">
+				<el-form-item label="配置名称" prop="keyWord">
+					<el-input v-model="tableData.param.keyWord" placeholder="请输入配置名称" clearable style="width: 240px" />
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" class="ml10" @click="dataList">
+						<el-icon>
+							<ele-Search />
+						</el-icon>
+						查询
+					</el-button>
+					<el-button @click="resetQuery(queryRef)">
+						<el-icon>
+							<ele-Refresh />
+						</el-icon>
+						重置
+					</el-button>
+					<el-button type="primary" class="ml10" @click="onOpenAdd">
+						<el-icon>
+							<ele-FolderAdd />
+						</el-icon>
+						新增通知
+					</el-button>
+				</el-form-item>
+			</el-form>
+		</div>
+		<el-row class="flex1">
+			<el-col :span="8" v-for="(item, index) in tableData.data" :key="index">
+				<div class="grid-content card">
+					<div class="ant-card">
+						<div class="ant-card-body">
+							<div class="pro-table-card-item">
+								<div class="card-item-avatar">
+									<img width="88" height="88" :src="'/imgs/notice/' + tableData.param.sendGateway + '.svg'" alt="" />
+								</div>
+								<div class="card-item-body">
+									<div class="card-item-header">
+										<div class="ellipsis">
+											<div class="ellipsis card-item-header-name" style="width: 100%; height: 45px">{{ item.title }}</div>
+											<div class="card-item-header-name" style="display: none"></div>
 										</div>
 									</div>
-								</div>
-							</div>
-							<div class="card-tools">
-								<div class="card-button" @click="onOpenEdit(item)">
-									<el-button type="primary" class="ml10" text bg>
-										<el-icon>
-											<ele-Edit />
-										</el-icon>
-										修改
-									</el-button>
-								</div>
-								<div class="card-button" @click="onOpenEditTem(item)">
-									<el-button type="primary" text bg>
-										<el-icon>
-											<ele-Wallet />
-										</el-icon>
-										模板配置
-									</el-button>
-								</div>
-								<!--<div class="card-button" @click="onOpenEdit(item)">
-									<el-button type="primary" text bg>
-										<el-icon>
-											<ele-View />
-										</el-icon>
-										调试
-									</el-button>
-								</div>
-
-							 	<div class="card-button" @click="onOpenEdit(item)">
-									<el-button type="info" text bg>
-										<el-icon>
-											<ele-Document />
-										</el-icon>
-										通知记录
-									</el-button>
-								</div> -->
-
-								<div class="card-button" @click="onRowDel(item)">
-									<el-button type="danger" text bg>
-										<el-icon>
-											<ele-Delete />
-										</el-icon>
-										删除
-									</el-button>
+									<div class="card-item-content">
+										通知方式：<el-tag>{{ item.types == 1 ? '即时发送' : '预约发送' }}</el-tag>
+									</div>
 								</div>
 							</div>
 						</div>
-					</el-col>
-				</el-row>
-			</div>
-			<div style="text-align: center;padding: 28px;" v-if="(tableData.total == 0)">暂无数据</div>
-			<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="dataList" />
-		</el-card>
+					</div>
+					<div class="card-tools">
+						<div class="card-button" @click="onOpenEdit(item)">
+							<el-button type="primary" class="ml10" text bg>
+								<el-icon>
+									<ele-Edit />
+								</el-icon>
+								修改
+							</el-button>
+						</div>
+						<div class="card-button" @click="onOpenEditTem(item)">
+							<el-button type="primary" text bg>
+								<el-icon>
+									<ele-Wallet />
+								</el-icon>
+								模板配置
+							</el-button>
+						</div>
 
+						<div class="card-button" @click="onRowDel(item)">
+							<el-button type="danger" text bg>
+								<el-icon>
+									<ele-Delete />
+								</el-icon>
+								删除
+							</el-button>
+						</div>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<div style="text-align: center;padding: 28px;" v-if="(tableData.total == 0)">暂无数据</div>
+		<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="dataList" />
 		<EditDic ref="editDicRef" @dataList="dataList" />
 		<EditTemDic ref="temeditDicRef" @dataList="dataList" />
-		<!-- 	<LevelDic ref="levelDicRef" @dataList="dataList" /> -->
-	</div>
+	</el-card>
 </template>
 
 <script lang="ts">
@@ -133,7 +92,6 @@ import { toRefs, reactive, onMounted, ref, getCurrentInstance, defineComponent }
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import EditDic from './component/setEdit.vue';
 import EditTemDic from './component/temEdit.vue';
-//import LevelDic from './component/level.vue';
 
 import api from '/@/api/notice';
 import { useRoute } from 'vue-router';
@@ -287,7 +245,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .el-col-12 {
 	padding: 10px;
 }

src/views/iot/ota-update/update/component/batch.vue

@@ -1,87 +1,81 @@
 <template>
-  <div class="ota-module-container">
-    <el-card shadow="nover">
-      <div class="ota-module-search mb15">
-        <el-form :model="tableData.param" ref="queryRef" inline label-width="90px" @keyup.enter.native="getList(1)">
-          <el-form-item label="批次名称：" prop="name">
-            <el-input v-model="tableData.param.keyWord" placeholder="请输入批次名称" clearable style="width: 240px" />
-          </el-form-item>
+  <div class="page page-full">
+    <el-form :model="tableData.param" ref="queryRef" inline label-width="90px" @keyup.enter.native="getList(1)">
+      <el-form-item label="批次名称：" prop="name">
+        <el-input v-model="tableData.param.keyWord" placeholder="请输入批次名称" clearable style="width: 240px" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="ml10" @click="getList(1)">
+          <el-icon>
+            <ele-Search />
+          </el-icon>
+          查询
+        </el-button>
+        <el-button @click="resetQuery()">
+          <el-icon>
+            <ele-Refresh />
+          </el-icon>
+          重置
+        </el-button>
+        <el-button type="primary" v-auth="'add'" @click="onOpenAdd()">
+          <el-icon>
+            <ele-FolderAdd />
+          </el-icon>
+          添加批次
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
+      <el-table-column prop="id" label="ID" width="100" />
+      <el-table-column prop="name" label="名称" />
+      <!--        <el-table-column prop="waitVersion" label="待升级版本号" width="120" />-->
+      <el-table-column label="类型" prop="types" width="120" align="center">
+        <template #default="scope">
+          <el-tag type="success" size="small" v-if="scope.row.types == 0">验证</el-tag>
+          <el-tag type="info" size="small" v-else>升级</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" prop="active" width="120" align="center">
+        <template #default="scope">
+          <el-tag type="success" size="small" v-if="scope.row.active == 1">是</el-tag>
+          <el-tag type="info" size="small" v-else>否</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="method" label="协议方式" show-overflow-tooltip>
+        <template #default="scope">
+          <el-tag size="small" v-if="scope.row.method == 1">http</el-tag>
+          <el-tag size="small" v-if="scope.row.method == 2">https</el-tag>
+          <el-tag size="small" v-if="scope.row.method == 3">mqtt</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="stratege" label="升级方式" show-overflow-tooltip>
+        <template #default="scope">
+          <el-tag size="small" v-if="scope.row.stratege == 1">静态升级 </el-tag>
+          <el-tag size="small" v-if="scope.row.stratege == 2">动态升级</el-tag>
+        </template>
+      </el-table-column>
 
-          <el-form-item>
-            <el-button type="primary" class="ml10" @click="getList(1)">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button @click="resetQuery()">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button>
-            <el-button type="primary" v-auth="'add'" @click="onOpenAdd()">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              添加批次
-            </el-button>
-          </el-form-item>
-
-        </el-form>
-      </div>
-      <el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
-        <el-table-column prop="id" label="ID" width="100" />
-        <el-table-column prop="name" label="名称" />
-<!--        <el-table-column prop="waitVersion" label="待升级版本号" width="120" />-->
-        <el-table-column label="类型" prop="types" width="120" align="center">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.types == 0">验证</el-tag>
-            <el-tag type="info" size="small" v-else>升级</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" prop="active" width="120" align="center">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.active == 1">是</el-tag>
-            <el-tag type="info" size="small" v-else>否</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="method" label="协议方式" show-overflow-tooltip>
-          <template #default="scope">
-            <el-tag size="small" v-if="scope.row.method == 1">http</el-tag>
-            <el-tag size="small" v-if="scope.row.method == 2">https</el-tag>
-            <el-tag size="small" v-if="scope.row.method == 3">mqtt</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="stratege" label="升级方式" show-overflow-tooltip>
-          <template #default="scope">
-            <el-tag size="small" v-if="scope.row.stratege == 1">静态升级 </el-tag>
-            <el-tag size="small" v-if="scope.row.stratege == 2">动态升级</el-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="push" label="主动推送" show-overflow-tooltip>
-          <template #default="scope">
-            <el-tag size="small" v-if="scope.row.push == 1">是 </el-tag>
-            <el-tag size="small" v-if="scope.row.push == 2">否</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" min-width="100" align="center" />
-        <el-table-column label="操作" width="200" align="center">
-          <template #default="scope">
-<!--            <router-link :to="'/iotmanager/operation/ota/update/device/' + 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="primary" @click="getDeviceList(scope.row)">查看</el-button>
-<!--            <el-button size="small" text type="warning" v-auth="'edit'" @click="CheckUpdate(scope.row)">编辑</el-button>-->
-<!--            <el-button size="small" text type="danger" v-auth="'del'" @click="del(scope.row)">删除</el-button>-->
-          </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="getList" />
-      <CheckConfig ref="checkRef" @getList="getList(1)" />
-      <DeviceList ref="deviceRef" />
-    </el-card>
+      <el-table-column prop="push" label="主动推送" show-overflow-tooltip>
+        <template #default="scope">
+          <el-tag size="small" v-if="scope.row.push == 1">是 </el-tag>
+          <el-tag size="small" v-if="scope.row.push == 2">否</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createdAt" label="创建时间" min-width="100" align="center" />
+      <el-table-column label="操作" width="200" align="center">
+        <template #default="scope">
+          <!--            <router-link :to="'/iotmanager/operation/ota/update/device/' + 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="primary" @click="getDeviceList(scope.row)">查看</el-button>
+          <!--            <el-button size="small" text type="warning" v-auth="'edit'" @click="CheckUpdate(scope.row)">编辑</el-button>-->
+          <!--            <el-button size="small" text type="danger" v-auth="'del'" @click="del(scope.row)">删除</el-button>-->
+        </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="getList" />
+    <CheckConfig ref="checkRef" @getList="getList(1)" />
+    <DeviceList ref="deviceRef" />
   </div>
 </template>
 
@@ -156,7 +150,7 @@ export default defineComponent({
       let active = 0;
       if (row.active === 1) active = 0;
       if (row.active === 0) active = 1;
-      api.batch.stop({id: row.id, active: active}).then((res: any) => {
+      api.batch.stop({ id: row.id, active: active }).then((res: any) => {
         ElMessage.success('操作成功');
         batchList();
       });
@@ -170,12 +164,12 @@ export default defineComponent({
       state.tableData.loading = true;
       state.tableData.param.devOtaFirmwareId = props.detail.id;
       api.batch
-          .getList(state.tableData.param)
-          .then((res: any) => {
-            state.tableData.data = res.Data;
-            state.tableData.total = res.Total;
-          })
-          .finally(() => (state.tableData.loading = false));
+        .getList(state.tableData.param)
+        .then((res: any) => {
+          state.tableData.data = res.Data;
+          state.tableData.total = res.Total;
+        })
+        .finally(() => (state.tableData.loading = false));
     };
     // 打开新增弹窗
     const onOpenAdd = () => {
@@ -206,7 +200,7 @@ export default defineComponent({
           getList();
         });
       })
-          .catch(() => { });
+        .catch(() => { });
     };
     /** 重置按钮操作 */
     const resetQuery = () => {

src/views/iot/ota-update/update/component/info.vue

@@ -1,75 +1,77 @@
 <template>
-	<el-card class="system-dic-container" style="position: relative">
-		<div class="content">
-		
-			<div class="container">
-				<div class="item">升级包 ID：{{detail.id}}</div>
-				<div class="item">升级包名称：{{detail.name}}</div>
-				<div class="item">所属产品：{{detail.productName}}</div>
-			</div>
-			<div class="container">
-				<div class="item">升级包签名：d52b637c5eaf2bc9c24008bc4b723600</div>
-				<div class="item">升级包版本号：{{detail.version}}</div>
-				<div class="item">创建时间：{{detail.createdAt}}</div>
-			</div>
-			<div class="container">
-				<div class="item">签名算法：{{detail.are}}</div>
-				<div class="item">升级包状态：未验证</div>
-				<div class="item">验证进度：0%</div>
-			</div>
-			<div class="container">
-				<div class="item">升级包描述：{{detail.describe}}</div>
-				<div class="item">推送给设备的自定义信息：{{detail.info}}</div>
-				<div class="item"></div>
-			</div>
-			
+	<div class="content">
+		<div class="container">
+			<div class="item">升级包 ID：{{ detail.id }}</div>
+			<div class="item">升级包名称：{{ detail.name }}</div>
+			<div class="item">所属产品：{{ detail.productName }}</div>
 		</div>
-	</el-card>
+		<div class="container">
+			<div class="item">升级包签名：d52b637c5eaf2bc9c24008bc4b723600</div>
+			<div class="item">升级包版本号：{{ detail.version }}</div>
+			<div class="item">创建时间：{{ detail.createdAt }}</div>
+		</div>
+		<div class="container">
+			<div class="item">签名算法：{{ detail.are }}</div>
+			<div class="item">升级包状态：未验证</div>
+			<div class="item">验证进度：0%</div>
+		</div>
+		<div class="container">
+			<div class="item">升级包描述：{{ detail.describe }}</div>
+			<div class="item">推送给设备的自定义信息：{{ detail.info }}</div>
+			<div class="item"></div>
+		</div>
+	</div>
 </template>
 <script lang="ts" setup>
 
 const props = defineProps({
-
-detail: {
-  type: Object,
-  default: () => {}
-},
-
+	detail: {
+		type: Object,
+		default: () => { }
+	},
 })
 
 </script>
 
 <style scoped lang="scss">
-.status_list{
+.status_list {
 	width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 	padding: 10px;
-	.otaflex{
+
+	.otaflex {
 		font-size: 14px;
 		display: flex;
 		align-items: center;
 		margin-left: -6px;
-		.otaflex_div1{
+
+		.otaflex_div1 {
 			padding: 0 24px;
 			min-width: 200px;
 			width: fit-content;
+
 			.otaflex_div2 {
 				align-items: center;
-				.title{
+
+				.title {
 					color: #666;
 					font-size: 14px;
 				}
+
 				span {
 					display: block;
 					border-radius: 50%;
+
 					.on {
 						background: #52c41a;
 					}
+
 					.off {
 						background: #c41a1a;
 					}
+
 					.ofn {
 						background: rgb(255, 138, 0);
 					}
@@ -78,7 +80,7 @@ detail: {
 						position: relative;
 						top: -1px;
 						display: inline-block;
-						width:10px;
+						width: 10px;
 						height: 10px;
 						vertical-align: middle;
 						border-radius: 50%;
@@ -86,18 +88,20 @@ detail: {
 					}
 
 				}
-				.otaflex_div3{
+
+				.otaflex_div3 {
 					font-size: 24px;
 					margin-top: 10px;
 					color: #373d41;
 				}
 			}
-	
-	
+
+
 		}
-		
+
 	}
 }
+
 .container {
 	display: flex;
 	padding: 10px;
@@ -106,6 +110,7 @@ detail: {
 .item {
 	flex: 1;
 }
+
 .desc {
 	margin-top: 15px;
 }

src/views/iot/ota-update/update/detail.vue

@@ -1,73 +1,31 @@
 <template>
-  <div>
-    <el-card class="system-dic-container" style="position: relative">
-      <div class="content">
-        <div class="flex cont_box">
-          <div class="font26">升级包名称：{{detail.name}}</div>
-          <div class="pro-status"><span :class="detail.checkres == 1 ? 'on' : 'off'"></span>{{ detail.checkres == 1 ? '已验证' : '未验证' }}</div>
-        </div>
-        <div class="mt20"></div>
-        <div class="container">
-          <div class="item">升级包类型：{{detail.types==1?'整包':'差分'}}</div>
-          <div class="item">升级包签名：d52b637c5eaf2bc9c24008bc4b723600</div>
-        </div>
-        <div class="container">
-          <div class="item">签名算法：{{detail.are}}</div>
-          <div class="item">模块名称：{{detail.moduleName}}</div>
-        </div>
-
-        <!-- <div class="mt20"></div>
-        <div class="status_list">
-          <div class="otaflex">
-            <div class="otaflex_div1">
-                <div class="otaflex_div2">
-                  <span class="title">目标设备总数</span>
-                  <div class="count otaflex_div3">0</div>
-                </div>
-              </div>
-              <div class="otaflex_div1">
-                <div class="otaflex_div2">
-                  <span class="title"><span class="on"></span>目标成功数</span>
-                  <div class="count otaflex_div3">0</div>
-                </div>
-
-              </div>
-              <div class="otaflex_div1">
-                <div class="otaflex_div2">
-                  <span class="title"><span class="off"></span>目标失败数</span>
-                  <div class="count otaflex_div3">0</div>
-                </div>
-              </div>
-              <div class="otaflex_div1">
-                <div class="otaflex_div2">
-                  <span class="title"><span class="ofn"></span>目标取消数</span>
-                  <div class="count otaflex_div3">0</div>
-                </div>
-
-              </div>
-          </div>
-        </div> -->
+  <div class="page page-full padding bg border" style="position: relative">
+    <div class="content">
+      <div class="flex cont_box">
+        <div class="font26">升级包名称：{{ detail.name }}</div>
+        <div class="pro-status"><span :class="detail.checkres == 1 ? 'on' : 'off'"></span>{{ detail.checkres == 1 ? '已验证' : '未验证' }}</div>
       </div>
-    </el-card>
-    <div class="mt10"></div>
-    <el-card class="system-dic-container" style="position: relative">
-      <el-tabs v-model="activeTab">
-        <el-tab-pane label="批次管理" name="tab1">
-          <BatchList v-if="detail.id" :detail="detail" />
-        </el-tab-pane>
-<!--        <el-tab-pane label="设备列表" name="tab2">-->
-<!--          <DeviceList v-if="detail.id" :detail="detail" />-->
-<!--        </el-tab-pane>-->
-        <el-tab-pane label="升级包信息" name="tab3">
-          <InfoList v-if="detail.id" :detail="detail" />
-        </el-tab-pane>
-      </el-tabs>
-    </el-card>
+      <div class="container mt-2">
+        <div class="item">升级包类型：{{ detail.types == 1 ? '整包' : '差分' }}</div>
+        <div class="item">升级包签名：d52b637c5eaf2bc9c24008bc4b723600</div>
+      </div>
+      <div class="container mb-2">
+        <div class="item">签名算法：{{ detail.are }}</div>
+        <div class="item">模块名称：{{ detail.moduleName }}</div>
+      </div>
+    </div>
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="批次管理" name="tab1">
+        <BatchList v-if="detail.id" :detail="detail" />
+      </el-tab-pane>
+      <el-tab-pane label="升级包信息" name="tab3">
+        <InfoList v-if="detail.id" :detail="detail" />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'
-import type { TabsPaneContext } from 'element-plus'
 import { useRoute } from 'vue-router'
 import { EditPen, DocumentAdd } from '@element-plus/icons-vue'
 import EditForm from '/@/views/iot/ota-update/update/component/edit.vue';
@@ -79,11 +37,11 @@ import api from '/@/api/ota'
 const editFormRef = ref()
 
 export default defineComponent({
-  components: { EditPen, EditForm, DocumentAdd, InfoList, DeviceList, BatchList},
+  components: { EditPen, EditForm, DocumentAdd, InfoList, DeviceList, BatchList },
   setup(props) {
     const route = useRoute()
     const state = reactive({
-      activeTab:'tab1',
+      activeTab: 'tab1',
       developer_status: 2,
       detail: {
         id: '',
@@ -119,30 +77,36 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-.status_list{
+.status_list {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
-  .otaflex{
+
+  .otaflex {
     font-size: 12px;
     display: flex;
     align-items: center;
     margin-left: -6px;
-    .otaflex_div1{
+
+    .otaflex_div1 {
       padding: 0 24px;
       min-width: 200px;
       width: fit-content;
+
       .otaflex_div2 {
         align-items: center;
-        .title{
+
+        .title {
           color: #666;
           font-size: 14px;
         }
+
         span {
           display: block;
           border-radius: 50%;
+
           .on {
             background: #52c41a;
           }
@@ -150,6 +114,7 @@ export default defineComponent({
           .off {
             background: #c41a1a;
           }
+
           .ofn {
             background: rgb(255, 138, 0);
           }
@@ -158,7 +123,7 @@ export default defineComponent({
             position: relative;
             top: -1px;
             display: inline-block;
-            width:10px;
+            width: 10px;
             height: 10px;
             vertical-align: middle;
             border-radius: 50%;
@@ -166,7 +131,8 @@ export default defineComponent({
           }
 
         }
-        .otaflex_div3{
+
+        .otaflex_div3 {
           font-size: 24px;
           margin-top: 10px;
           color: #373d41;
@@ -178,14 +144,16 @@ export default defineComponent({
 
   }
 }
+
 .container {
   display: flex;
-  padding: 10px;
+  padding: 2px 0;
 }
 
 .item {
   flex: 1;
 }
+
 .desc {
   margin-top: 15px;
 }
@@ -199,7 +167,6 @@ export default defineComponent({
 .cont_box .pro-status {
   line-height: 40px;
   margin-left: 30px;
-  margin-top: 5px;
 
   .on {
     background: #52c41a;

src/views/iot/property/attribute/index.vue

@@ -1,80 +1,76 @@
 <template>
-	<div class="page">
-		<el-card shadow="nover">
-			<el-form inline ref="queryRef" @keyup.enter="getList(1)">
-				<el-form-item label="关键字：" prop="keyWord">
-					<el-input v-model="params.keyWord" placeholder="请输入关键字" clearable style="width: 240px" />
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" class="ml10" @click="getList(1)">
-						<el-icon>
-							<ele-Search />
-						</el-icon>
-						查询
-					</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="success" @click="addOrEdit()" v-auth="'add'" v-if="productIno">
-						<el-icon>
-							<ele-FolderAdd />
-						</el-icon>
-						新增属性
-					</el-button>
-					<el-button type="danger" @click="batchdel()" v-auth="'batchdel'">
-						<el-icon>
-							<ele-FolderAdd />
-						</el-icon>
-						批量删除
-					</el-button>
-				</el-form-item>
-			</el-form>
-			<el-row :gutter="16">
-				<el-col :span="6">
-					<el-tree :data="mergedData" :props="defaultProps" accordion default-expand-all @node-click="handleNodeClick" style="border: 1px solid #eee;padding: 10px;margin-right: 10px;" class="mt-4" :default-expand-all="true" :node-key="'id'" highlight-current>
-						<template #default="{ node, data }">
-              <div class="custom-tree-node">
-                  <span class="tree-label">
-                    <el-icon v-if="data.is_type == '2'">
-                      <Expand />
-                    </el-icon>
-                    {{ node.label }}
-                  </span>
-              </div>
-						</template>
-					</el-tree>
-				</el-col>
-				<el-col :span="18"><el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%" row-key="id" v-loading="loading">
+	<div class="page page-full border bg padding">
+		<el-form inline ref="queryRef" @keyup.enter="getList(1)">
+			<el-form-item label="关键字：" prop="keyWord">
+				<el-input v-model="params.keyWord" placeholder="请输入关键字" clearable style="width: 240px" />
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" class="ml10" @click="getList(1)">
+					<el-icon>
+						<ele-Search />
+					</el-icon>
+					查询
+				</el-button>
+			</el-form-item>
+			<el-form-item>
+				<el-button type="success" @click="addOrEdit()" v-auth="'add'" v-if="productIno">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					新增属性
+				</el-button>
+				<el-button type="danger" @click="batchdel()" v-auth="'batchdel'">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					批量删除
+				</el-button>
+			</el-form-item>
+		</el-form>
+		<div class="page page-full-part flex-row gap-4">
+			<el-card style="width: 250px;" shadow="nover">
+				<el-tree :data="mergedData" :props="defaultProps" accordion default-expand-all @node-click="handleNodeClick" :node-key="'id'" highlight-current>
+					<template #default="{ node, data }">
+						<div class="custom-tree-node">
+							<span class="tree-label">
+								<el-icon v-if="data.is_type != '2'">
+									<Folder />
+								</el-icon>
+                <SvgIcon name="iconfont icon-siweidaotu" v-if="data.is_type == '2'"></SvgIcon>
+								{{ node.label }}
+							</span>
+						</div>
+					</template>
+				</el-tree>
+			</el-card>
+			<el-card class="flex1" shadow="nover">
+				<div class="page page-full">
+					<el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%" row-key="id" v-loading="loading">
 						<el-table-column type="selection" width="55" align="center" />
-
 						<el-table-column prop="id" v-col="'id'" label="ID" min-width="100" show-overflow-tooltip></el-table-column>
 						<el-table-column prop="name" v-col="'name'" label="字段名称" show-overflow-tooltip></el-table-column>
 						<el-table-column prop="title" v-col="'title'" label="字段标题" show-overflow-tooltip></el-table-column>
 						<el-table-column prop="types" v-col="'types'" label="字段类型" show-overflow-tooltip></el-table-column>
-
-
 						<el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="160" align="center"></el-table-column>
 						<el-table-column label="操作" width="200" align="center">
 							<template #default="scope">
-
 								<el-button size="small" text v-auth="'edit'" type="warning" @click="addOrEdit(scope.row)">编辑</el-button>
-
 								<el-button size="small" text v-auth="'del'" type="info" @click="del(scope.row)">删除</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
 					<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
-				</el-col>
-			</el-row>
-
-			<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
-		</el-card>
+				</div>
+			</el-card>
+		</div>
+		<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import device from '/@/api/device'
 import { useSearch } from '/@/hooks/useCommon'
-import { Expand } from '@element-plus/icons-vue';
+import { Folder } from '@element-plus/icons-vue';
 
 import { ElMessageBox, ElMessage } from 'element-plus'
 import EditForm from './edit.vue'
@@ -124,16 +120,16 @@ const getCateList = () => {
 			getList()
 			mergedData.value = matchProductsToCategories(productData.value, cateData.value);
 
-      // 默认加载第一个设备对应属性
-      if (productData.value.length > 0) {
-        handleNodeClick(mergedData.value[0].children[0])
-      }
-    });
+			// 默认加载第一个设备对应属性
+			if (productData.value.length > 0) {
+				handleNodeClick(mergedData.value[0].children[0])
+			}
+		});
 	})
 }
 
 const handleNodeClick = (data: any) => {
-  if (data.is_type === '2') {
+	if (data.is_type === '2') {
 		productIno.value = data;
 		params.productKey = data.key
 		getList()
@@ -206,26 +202,26 @@ const del = (row: any) => {
 </script>
 <style scoped lang="scss">
 .custom-tree-node {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  padding-right: 8px;
-  overflow: hidden;
-
-  .tree-label {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-right: 10px;
-  }
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 14px;
+	padding-right: 8px;
+	overflow: hidden;
+
+	.tree-label {
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		margin-right: 10px;
+	}
 
-  &:hover {
-    .tree-options {
-      display: block;
-    }
-  }
+	&:hover {
+		.tree-options {
+			display: block;
+		}
+	}
 }
 </style>

src/views/iot/property/dossier/component/from.vue

@@ -1,83 +1,112 @@
 
 <template>
 	<div>
-		<div v-for="(item, index) in Datalist" :key="index">
-			<el-form-item :label="item.title + ':'" :prop="item.name" class="form-item" v-if="item.types === 'input'">
-				<el-input v-model="formData[item.name]" :placeholder="'请输入' + item.title" @input="saveData()" />
-			</el-form-item>
-			<el-form-item :label="item.title + '：'" :prop="item.name" class="form-item" v-if="item.types === 'textarea'">
-				<el-input v-model="formData[item.name]" type="textarea" @input="saveData()" />
-			</el-form-item>
+		<div v-for="(item, index) in dataList" :key="index">
 
-			<el-form-item v-if="item.types === 'date'" :label="item.title + '：'">
-				<el-date-picker v-model="formData[item.name]" :default-value="item.value" type="date" value-format="YYYY-MM-DD" placeholder="请选择时间" class="w100" clearable @change="saveData()" />
-			</el-form-item>
+      <el-form-item :label="item.title + '：'" :prop="item.name" class="form-item" v-if="item.types === 'input'">
+        <el-input v-model="formData[item.name]" :placeholder="'请输入' + item.title" @input="saveData()" :readonly="disable" />
+      </el-form-item>
 
-			<el-form-item :label="item.title + '：'" prop="path" v-if="item.types === 'file'">
+      <el-form-item :label="item.title + '：'" :prop="item.name" class="form-item" v-if="item.types === 'textarea'">
+        <el-input v-model="formData[item.name]" type="textarea" @input="saveData()" :readonly="disable" />
+      </el-form-item>
 
+      <el-form-item v-if="item.types === 'date'" :label="item.title + '：'">
+        <el-date-picker v-model="formData[item.name]" :default-value="item.value" type="date" value-format="YYYY-MM-DD" placeholder="请选择时间" class="w100" clearable @change="saveData()" :readonly="disable" />
+      </el-form-item>
 
+      <el-form-item :label="item.title + '：'" prop="path" v-if="item.types === 'file'">
+        <el-upload class="avatar-uploader" :action="uploadUrl" :headers="headers" :show-file-list="false" :on-success="customCallback(item.name)" :disabled="disable">
+          <img v-if="formData[item.name]" :src="formData[item.name]" class="avatar" />
+          <el-icon v-else class="avatar-uploader-icon" v-if="!disable">
+            <Plus />
+          </el-icon>
+        </el-upload>
+      </el-form-item>
 
-				<el-upload class="avatar-uploader" :action="uploadUrl" :headers="headers" :show-file-list="false" :on-success="customCallback(item.name)">
-					<img v-if="formData[item.name]" :src="formData[item.name]" class="avatar" />
-					<el-icon v-else class="avatar-uploader-icon">
-						<Plus />
-					</el-icon>
-				</el-upload>
-
-
-			</el-form-item>
 		</div>
 	</div>
 </template>
 
-<script lang="ts" setup>
-import { ref, defineEmits, onMounted, defineProps } from 'vue'
+<script lang="ts">
+import {onMounted, defineComponent, reactive, toRefs} from 'vue'
 import getOrigin from '/@/utils/origin'
 import { Plus } from '@element-plus/icons-vue'
 
-const url = ref()
-const uploadUrl = getOrigin(import.meta.env.VITE_API_URL + '/common/singleFile')
-const headers = {
-	Authorization: 'Bearer ' + localStorage.token,
+interface FromState {
+  dataList: any,
+  formData: any,
+  disable: boolean,
 }
-const emit = defineEmits(['SetSaveData'])
-
-const props = defineProps({
-	Datalist: {
-		type: Array,
-		default: () => [],
-	},
-})
-
-const formData = ref({})
 
-onMounted(() => {
-	for (const item of props.Datalist) {
-		formData.value[item.name] = item.value ? item.value : ''
-	}
+export default defineComponent({
+  name: 'dossierFromData',
+  props: {
+    DataList: {
+      type: Array,
+      default: () => [],
+    },
+    disable: {
+      type: Boolean,
+      default: () => false,
+    }
+  },
+  setup(prop, { emit }) {
+    const uploadUrl = getOrigin(import.meta.env.VITE_API_URL + '/common/singleFile')
+    const headers = {
+      Authorization: 'Bearer ' + localStorage.token,
+    }
+    // const emit = defineEmits(['SetSaveData'])
+
+    const state = reactive<FromState>({
+      dataList: prop.DataList,
+      formData: {},
+      disable: prop.disable,
+    })
+
+    onMounted(() => {
+      initFormData();
+    });
+
+    const initFormData = () => {
+      for (const item of state.dataList) {
+        state.formData[item.name] = item.value ? item.value : ''
+      }
+    }
+
+    const customCallback = (customValue: string) => {
+      return function (file: any) {
+        state.formData[customValue] = file.data.full_path
+        saveData();
+      }
+    }
+
+    const saveData = () => {
+      const updatedData = []
+
+      for (const item of state.dataList) {
+        updatedData.push({
+          productKey: item.productKey,
+          name: item.name,
+          value: state.formData[item.name], // 更新为formData的实际值
+          fieldName: item.fieldName,
+        })
+      }
+
+      emit('SetSaveData', updatedData)
+    }
+
+    return {
+      headers,
+      uploadUrl,
+      customCallback,
+      saveData,
+      ...toRefs(state),
+    };
+  },
+
+  components: {Plus},
 })
-
-const customCallback = (customValue: string) => {
-	return function (file: any) {
-		formData.value[customValue] = file.data.full_path
-		saveData();
-	}
-}
-
-const saveData = () => {
-	const updatedData = []
-
-	for (const item of props.Datalist) {
-		updatedData.push({
-			productKey: item.productKey,
-			name: item.name,
-			value: formData.value[item.name], // 更新为formData的实际值
-			fieldName: item.fieldName,
-		})
-	}
-
-	emit('SetSaveData', updatedData)
-}
 </script>
 
 <style scoped lang="scss">
@@ -91,7 +120,7 @@ const saveData = () => {
 	display: block;
 }
 </style>
-<style>
+<style scoped>
 .avatar-uploader .el-upload {
 	border: 1px dashed var(--el-border-color);
 	border-radius: 6px;

src/views/iot/property/dossier/edit.vue

@@ -40,7 +40,6 @@
         </el-col>
       </el-row>
 
-
       <el-row>
         <el-col :span="12">
           <el-form-item label="所属区域" prop="area">
@@ -60,7 +59,6 @@
         </el-col>
       </el-row>
 
-
       <el-row>
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptId">
@@ -81,7 +79,8 @@
       </el-row>
 
       <el-divider content-position="left" v-if="Datalist">自定义属性</el-divider>
-        <FromData :Datalist="Datalist" @SetSaveData="SetSaveData" v-if="Datalist && Datalist.length > 0"></FromData>
+      <FromData :DataList="Datalist" @SetSaveData="SetSaveData" v-if="Datalist && Datalist.length > 0"></FromData>
+
     </el-form>
     <template #footer>
       <div class="dialog-footer">
@@ -177,7 +176,7 @@ const open = async (row: any, productInfo: any) => {
   showDialog.value = true;
   nextTick(() => {
     system.org.getList({ status: 1 }).then((res: any) => {
-      res.forEach((item:any) => {
+      res.forEach((item: any) => {
         item.id = item.id.toString();
       });
       orgData.value = res || [];
@@ -200,13 +199,14 @@ const open = async (row: any, productInfo: any) => {
 
     //获取部门
     api.dept.getList({ status: -1 }).then((res: any) => {
-      res.forEach((item:any) => {
+      res.forEach((item: any) => {
         item.deptId = item.deptId.toString();
       });
       deptData.value = res || [];
     });
 
     if (row.id) {
+
       api.dev_asset.detail({ deviceKey: row.deviceKey }).then((resde: any) => {
         Object.assign(formData, { ...resde });
         formData.productKey = row.productKey
@@ -222,7 +222,7 @@ const open = async (row: any, productInfo: any) => {
       //获取档案属性
       api.dev_asset_metadata.getList({ productKey: productInfo.key, pageSize: 50, pageNum: 1, status: -1, total: 0 }).then((res: any) => {
         const sortedArray = res.Data.sort((a, b) => a.id - b.id);
-				Datalist.value = sortedArray || [];
+        Datalist.value = sortedArray || [];
       });
       formData.productKey = productInfo.key
 

src/views/iot/property/dossier/index.vue

@@ -1,89 +1,85 @@
 <template>
-	<div class="page">
-		<el-card shadow="nover">
-			<el-form inline ref="queryRef" @keyup.enter="getList(1)">
-				<el-form-item label="名称：" prop="keyWord">
-					<el-input v-model="params.keyWord" placeholder="请输入名称" clearable style="width: 240px" />
-				</el-form-item>
-
-				<el-form-item>
-					<el-button type="primary" class="ml10" @click="getList(1)">
-						<el-icon>
-							<ele-Search />
-						</el-icon>
-						查询
-					</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="success" @click="addOrEdit()" v-auth="'add'" v-if="productIno">
-						<el-icon>
-							<ele-FolderAdd />
-						</el-icon>
-						新增档案
-					</el-button>
-
-					<!-- <el-button type="primary" @click="addOrEdit()" v-if="productIno">
+	<div class="page page-full border bg padding">
+		<el-form inline ref="queryRef" @keyup.enter="getList(1)">
+			<el-form-item label="名称" prop="keyWord">
+				<el-input v-model="params.keyWord" placeholder="请输入名称" clearable style="width: 240px" />
+			</el-form-item>
+
+			<el-form-item>
+				<el-button type="primary" class="ml10" @click="getList(1)">
+					<el-icon>
+						<ele-Search />
+					</el-icon>
+					查询
+				</el-button>
+			</el-form-item>
+			<el-form-item>
+				<el-button type="success" @click="addOrEdit()" v-auth="'add'" v-if="productIno">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					新增档案
+				</el-button>
+
+				<!-- <el-button type="primary" @click="addOrEdit()" v-if="productIno">
 						<el-icon>
 							<ele-FolderAdd />
 						</el-icon>
 						批量添加
 					</el-button> -->
 
-					<el-button type="danger" @click="batchdel()" v-auth="'batchdel'">
-						<el-icon>
-							<ele-FolderAdd />
-						</el-icon>
-						批量删除
-					</el-button>
-				</el-form-item>
-			</el-form>
-			<el-row :gutter="16">
-				<el-col :span="6">
-          <el-tree :data="mergedData" :props="defaultProps" accordion default-expand-all @node-click="handleNodeClick" style="border: 1px solid #eee;padding: 10px;margin-right: 10px;" class="mt-4" :default-expand-all="true" :node-key="'id'" highlight-current>
-            <template #default="{ node, data }">
-              <div class="custom-tree-node">
-                  <span class="tree-label">
-                    <el-icon v-if="data.is_type == '2'">
-                      <Expand />
-                    </el-icon>
-                    {{ node.label }}
-                  </span>
-              </div>
-            </template>
-          </el-tree>
-				</el-col>
-				<el-col :span="18"><el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" v-loading="loading">
+				<el-button type="danger" @click="batchdel()" v-auth="'batchdel'">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					批量删除
+				</el-button>
+			</el-form-item>
+		</el-form>
+		<div class="page page-full-part flex-row gap-4">
+			<el-card style="width: 250px;" shadow="nover">
+				<el-tree :data="mergedData" :props="defaultProps" accordion default-expand-all @node-click="handleNodeClick" :node-key="'id'" highlight-current>
+					<template #default="{ node, data }">
+						<div class="custom-tree-node">
+							<span class="tree-label">
+								<el-icon v-if="data.is_type != '2'">
+									<Folder />
+								</el-icon>
+                <SvgIcon name="iconfont icon-siweidaotu" v-if="data.is_type == '2'"></SvgIcon>
+								{{ node.label }}
+							</span>
+						</div>
+					</template>
+				</el-tree>
+			</el-card>
+			<el-card class="flex1" shadow="nover">
+				<div class="page page-full">
+					<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" v-loading="loading">
 						<el-table-column type="selection" width="55" align="center" />
-
 						<el-table-column prop="deviceName" v-col="'deviceName'" label="设备名称" min-width="100" show-overflow-tooltip></el-table-column>
 						<el-table-column prop="deviceKey" v-col="'deviceKey'" label="设备KEY" show-overflow-tooltip></el-table-column>
-
 						<el-table-column prop="deviceNumber" v-col="'deviceNumber'" label="设备编码" show-overflow-tooltip></el-table-column>
-
 						<el-table-column prop="deviceCategory" v-col="'deviceCategory'" label="设备类型" show-overflow-tooltip></el-table-column>
-
 						<el-table-column prop="installTime" v-col="'installTime'" label="安装时间" width="160" align="center"></el-table-column>
-						<el-table-column label="操作" width="200" align="center">
+						<el-table-column label="操作" width="120" align="center">
 							<template #default="scope">
 								<el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
-
 								<el-button size="small" text type="info" v-auth="'del'" @click="del(scope.row)">删除</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
 					<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
-				</el-col>
-			</el-row>
-
-			<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
-		</el-card>
+				</div>
+			</el-card>
+		</div>
+		<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import device from '/@/api/device'
 import { useSearch } from '/@/hooks/useCommon'
-import { Expand } from '@element-plus/icons-vue'
+import { Folder } from '@element-plus/icons-vue'
 
 import { ElMessageBox, ElMessage } from 'element-plus'
 import EditForm from './edit.vue'
@@ -130,10 +126,10 @@ const getCateList = () => {
 			productData.value = res.product
 			mergedData.value = matchProductsToCategories(productData.value, cateData.value)
 
-      // 默认加载第一个设备对应属性
-      if (productData.value.length > 0) {
-        handleNodeClick(mergedData.value[0].children[0])
-      }
+			// 默认加载第一个设备对应属性
+			if (productData.value.length > 0) {
+				handleNodeClick(mergedData.value[0].children[0])
+			}
 		})
 	})
 }
@@ -216,26 +212,26 @@ const del = (row: any) => {
 </script>
 <style scoped lang="scss">
 .custom-tree-node {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  padding-right: 8px;
-  overflow: hidden;
-
-  .tree-label {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-right: 10px;
-  }
-
-  &:hover {
-    .tree-options {
-      display: block;
-    }
-  }
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 14px;
+	padding-right: 8px;
+	overflow: hidden;
+
+	.tree-label {
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		margin-right: 10px;
+	}
+
+	&:hover {
+		.tree-options {
+			display: block;
+		}
+	}
 }
 </style>

src/views/iot/scene/list/index.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class="page">
 		<el-card shadow="nover">
-			<el-form inline ref="queryRef">
-				<el-form-item label="场景名称：" prop="name">
-					<el-input v-model="params.keyWord" placeholder="场景名称" clearable style="width: 220px" @keyup.enter.native="getList(1)" />
+			<el-form inline ref="queryRef" @submit.prevent @keyup.enter.native="getList(1)">
+				<el-form-item label="场景名称" prop="name">
+					<el-input v-model="params.keyWord" placeholder="请输入" clearable style="width: 220px" />
 				</el-form-item>
 				<el-form-item label="状态" prop="status">
-					<el-select v-model="params.status" placeholder="发布状态" clearable style="width: 160px">
+					<el-select v-model="params.status" placeholder="" clearable style="width: 120px">
 						<el-option label="全部" :value="-1" />
 						<el-option label="成功" :value="1" />
 						<el-option label="失败" :value="0" />

src/views/iot/scene/manage/component/actionItem.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="type-item">
     <div v-for="(item, index) in actionList" :key="index" class="item " :class="index > 0 ? 'biankang' : ''">
-      <div class="conicon" style="width: 100%; text-align: right; position: relative; right: -8px; top: -8px; color: red"
-        v-if="index > 0">
+      <div class="conicon" style="width: 100%; text-align: right; position: relative; right: -8px; top: -8px; color: red" v-if="index > 0">
         <el-icon @click="delAction(index)">
           <CircleClose />
         </el-icon>
@@ -12,16 +11,14 @@
       </div>
       <div class="product flex flex-warp">
         <ActionSerialItem :index="index" :serial="item.serial" :sourceData="sourceData" @saveData="saveData" @delData="delData"></ActionSerialItem>
-
-      
       </div>
 
       <div class="title flex">
         <div class="icon"></div>并行动作
       </div>
       <div class="product flex flex-warp">
-            <ActionParallelItem :index="index"  :parallel="item.parallel" :sourceData="sourceData" @saveData="saveData" @delData="delData"></ActionParallelItem>
-      
+        <ActionParallelItem :index="index" :parallel="item.parallel" :sourceData="sourceData" @saveData="saveData" @delData="delData"></ActionParallelItem>
+
       </div>
     </div>
     <div>
@@ -29,12 +26,12 @@
         <el-button type="primary" :icon="DocumentAdd" @click="addAction()">新增场景动作</el-button>
       </div>
     </div>
- 
+
   </div>
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref  } from 'vue'
+import { PropType, ref } from 'vue'
 import { DocumentAdd, CircleClose } from '@element-plus/icons-vue';
 import ActionSerialItem from './actionSerialItem.vue';
 import ActionParallelItem from './actionParallelItem.vue';
@@ -42,16 +39,16 @@ import api from '/@/api/scene';
 
 
 //初始化数据
-const actionList_temp=ref([{
-  serial:[{}],
-  parallel:[{}],
+const actionList_temp = ref([{
+  serial: [{}],
+  parallel: [{}],
 }]);
-const actionList=ref([{
-  serial:[{}],
-  parallel:[{}],
+const actionList = ref([{
+  serial: [{}],
+  parallel: [{}],
 }]);
 const originalSceneList = ref([{
-	id: 0
+  id: 0
 }]);
 interface testIValueType {
   id: string;
@@ -64,74 +61,74 @@ const props = defineProps({
     type: Array as PropType<testIValueType[]>,
     default: () => []
   },
-  scene_id:{
-    type:String,
+  scene_id: {
+    type: String,
     default: () => ''
   }
 })
 
 const getOneDetail = () => {
-			api.manage.getOneDetail({ "sceneId": props.scene_id, 'group': 'action' }).then((res: any) => {
-				if (!res) {
-					addActionDetail();
-					// getOneDetail();
-				}
-
-       	originalSceneList.value = res;
-        const combinedArray = res.map((scene: any)  => {
-          const parsedBodyJson = JSON.parse(scene.bodyjson);
-          if (Array.isArray(parsedBodyJson)) {
-            const serial = parsedBodyJson.map(item => item.serial).flat();
-            const parallel = parsedBodyJson.map(item => item.parallel).flat();
-            return {
-              serial,
-              parallel
-            };
-          } else {
-            return {
-              serial: [parsedBodyJson.serial].flat(),
-              parallel: [parsedBodyJson.parallel].flat()
-            };
-          }
-        });
-        actionList.value=combinedArray;
-			})
-		};
-getOneDetail();    
+  api.manage.getOneDetail({ "sceneId": props.scene_id, 'group': 'action' }).then((res: any) => {
+    if (!res) {
+      addActionDetail();
+      // getOneDetail();
+    }
+
+    originalSceneList.value = res;
+    const combinedArray = res.map((scene: any) => {
+      const parsedBodyJson = JSON.parse(scene.bodyjson);
+      if (Array.isArray(parsedBodyJson)) {
+        const serial = parsedBodyJson.map(item => item.serial).flat();
+        const parallel = parsedBodyJson.map(item => item.parallel).flat();
+        return {
+          serial,
+          parallel
+        };
+      } else {
+        return {
+          serial: [parsedBodyJson.serial].flat(),
+          parallel: [parsedBodyJson.parallel].flat()
+        };
+      }
+    });
+    actionList.value = combinedArray;
+  })
+};
+getOneDetail();
 
 //新增一条场景动作
 const addActionDetail = () => {
-		let data = {
-			sceneId: props.scene_id,
-			group: 'action',
-			bodyjson: actionList_temp.value,
-		}
-		api.manage.addDetail(data).then((res: any) => {
-			getOneDetail();
-		});
+  let data = {
+    sceneId: props.scene_id,
+    group: 'action',
+    bodyjson: actionList_temp.value,
+  }
+  api.manage.addDetail(data).then((res: any) => {
+    getOneDetail();
+  });
 }
 //删除一条场景
 const delData = (index: number) => {
-			let ids =originalSceneList.value[index].id;
-			api.manage.delDetail(ids).then((res: any) => {
-				// getOneDetail();
-			});
+  let ids = originalSceneList.value[index].id;
+  api.manage.delDetail(ids).then((res: any) => {
+    // getOneDetail();
+  });
 }
 
 //修改一条场景
 const saveData = (data: any) => {
-      let ids = originalSceneList.value[data.index].id;
-			api.manage.editDetail({ id: ids, bodyjson:actionList.value[data.index] }).then((res: any) => {
-				  getOneDetail();
-			});
+  let ids = originalSceneList.value[data.index].id;
+  api.manage.editDetail({ id: ids, bodyjson: actionList.value[data.index] }).then((res: any) => {
+    getOneDetail();
+  });
 
 }
 
 
 const addAction = () => {
   actionList.value.push({
-    'serial':[],
-    'parallel':[],
+    'serial': [],
+    'parallel': [],
   });
   addActionDetail();
 
@@ -143,7 +140,6 @@ const delAction = (index: number) => {
 
 </script>
 <style scoped lang="scss">
-
 .type-item {
   margin-top: 15px;
 
@@ -170,7 +166,8 @@ const delAction = (index: number) => {
 
   .biankang {
     margin-top: 10px;
-    border: 1px solid #cfcfcf;;
+    border: 1px solid #cfcfcf;
+    ;
     border-radius: 2px;
   }
 

src/views/iot/scene/manage/detail.vue

@@ -1,48 +1,47 @@
 <template>
 	<div>
-	<el-card class="system-dic-container" style="position: relative;">
-		<div class="content">
-			<div class="flex cont_box">
-				<div class="font26">场景名称：{{ detail.name }}</div>
-				<div class="pro-status"><span :class="detail.status == 1 ? 'on' : 'off'"></span>{{ detail.status == 1
-					? '启用' : '未启用' }}</div>
+		<el-card class="system-dic-container" shadow="nover" style="position: relative;">
+			<div class="content">
+				<div class="flex cont_box">
+					<div class="font26">场景名称：{{ detail.name }}</div>
+					<div class="pro-status"><span :class="detail.status == 1 ? 'on' : 'off'"></span>{{ detail.status == 1
+						? '启用' : '未启用' }}</div>
+				</div>
+				<div class="flex">
+					<div class="desc" style="margin-right: 20px;">场景类型：{{ typeList[detail.sceneType] }}</div>
+					<div class="desc">场景描述：{{ detail.description }}</div>
+					<div class="edit" @click="addOrEdit(detail)"><el-link type="primary"> <el-icon>
+								<EditPen color="#409eff" />
+							</el-icon>修改</el-link></div>
+				</div>
 			</div>
-			<div class="flex">
-				<div class="desc" style="margin-right: 20px;">场景类型：{{typeList[detail.sceneType]}}</div>
-				<div class="desc">场景描述：{{ detail.description }}</div>
-				<div class="edit" @click="addOrEdit(detail)"><el-link type="primary"> <el-icon>
-							<EditPen color="#409eff" />
-						</el-icon>修改</el-link></div>
-			</div>
-		</div>
-	</el-card>
-	<el-card style="  margin-top: 15px;" v-if="detail.sceneType==='device'">
-		<div class="font20">场景定义</div>
-		<SceneItem v-if="showstatus && sourceData.length>0" :sceneList="sceneList" :sourceData="sourceData" :sceneType="detail.sceneType" @addScenesDetail="addScenesDetail"
-			@delScenesDetail="delScenesDetail" @editScenesDetail="editScenesDetail"></SceneItem>
-	</el-card>
-	<el-card style="  margin-top: 15px;" v-if="detail.sceneType==='timer'">
-		<el-form-item label="定时触发">
-          <div style="display:flex">
-            <el-input v-model="timerData.timer" placeholder="请输入cron表达式" />
-            <el-dialog v-model="dialogVisible" title="选择Cron规则" width="60%">
-              <vue3cron @handlelisten="handlelisten"  @close="cronclose"></vue3cron>
-            </el-dialog>
-            <el-button type="success" @click="showCron()" style="margin-left: 5px;">设置</el-button>
+		</el-card>
+		<el-card shadow="nover" style="margin-top: 15px;" v-if="detail.sceneType === 'device'">
+			<div class="font20">场景定义</div>
+			<SceneItem v-if="showstatus && sourceData.length > 0" :sceneList="sceneList" :sourceData="sourceData" :sceneType="detail.sceneType" @addScenesDetail="addScenesDetail" @delScenesDetail="delScenesDetail" @editScenesDetail="editScenesDetail"></SceneItem>
+		</el-card>
+		<el-card style="  margin-top: 15px;" v-if="detail.sceneType === 'timer'">
+			<el-form-item label="定时触发">
+				<div style="display:flex">
+					<el-input v-model="timerData.timer" placeholder="请输入cron表达式" />
+					<el-dialog v-model="dialogVisible" title="选择Cron规则" width="60%">
+						<vue3cron @handlelisten="handlelisten" @close="cronclose"></vue3cron>
+					</el-dialog>
+					<el-button type="success" @click="showCron()" style="margin-left: 5px;">设置</el-button>
 
-          </div>
-        </el-form-item>
-	</el-card>
-	<el-card style="  margin-top: 15px;">
-		<div class="font20">场景动作</div>
-		<ActionItem v-if="detail.id && sourceData.length>0" :scene_id="detail.id"  :sourceData="sourceData"></ActionItem>
-	</el-card>
+				</div>
+			</el-form-item>
+		</el-card>
+		<el-card shadow="nover" style="margin-top: 15px;">
+			<div class="font20">场景动作</div>
+			<ActionItem v-if="detail.id && sourceData.length > 0" :scene_id="detail.id" :sourceData="sourceData"></ActionItem>
+		</el-card>
 
-	<EditForm ref="editFormRef" @getList="getDetail()"></EditForm>
-</div>
+		<EditForm ref="editFormRef" @getList="getDetail()"></EditForm>
+	</div>
 </template>
 <script lang="ts">
-import { toRefs, reactive, ref, defineComponent,onMounted } from 'vue';
+import { toRefs, reactive, ref, defineComponent, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { EditPen, DocumentAdd } from '@element-plus/icons-vue';
 import ActionItem from './component/actionItem.vue';
@@ -71,26 +70,26 @@ const originalSceneList = ref([{
 	id: 0
 }]);
 export default defineComponent({
-	components: { EditPen, EditForm, DocumentAdd, SceneItem, ActionItem,vue3cron},
+	components: { EditPen, EditForm, DocumentAdd, SceneItem, ActionItem, vue3cron },
 	setup(props, context) {
 		const route = useRoute();
 		const router = useRouter();
 		const state = reactive({
-			timer:'',
-			timer_id:0,
-			dialogVisible:false,
+			timer: '',
+			timer_id: 0,
+			dialogVisible: false,
 			developer_status: 2,
 			showstatus: false,
-			typeList:{
-				'device':'设备触发',
-				'manual':'手动触发',
-				'timer':'定时触发',
+			typeList: {
+				'device': '设备触发',
+				'manual': '手动触发',
+				'timer': '定时触发',
 			} as any,
 			sourceData: [],
 			timerData: {
-					triggerType:'timer',
-					timer:'',
-				},
+				triggerType: 'timer',
+				timer: '',
+			},
 			detail: {
 				id: '',
 				name: '',
@@ -123,7 +122,7 @@ export default defineComponent({
 		});
 
 		const handlelisten = (e: any) => {
-			state.timerData.timer=e.cron
+			state.timerData.timer = e.cron
 			api.manage.editDetail({ id: state.timer_id, bodyjson: state.timerData })
 		};
 		const showCron = () => {
@@ -150,7 +149,7 @@ export default defineComponent({
 		const getOneDetail = () => {
 
 			const id = route.params && route.params.id;
-			if(state.detail.sceneType=='device'){
+			if (state.detail.sceneType == 'device') {
 				api.manage.getOneDetail({ "sceneId": id, 'group': 'definition' }).then((res: any) => {
 					if (!res) {
 						addScenesDetail('definition');
@@ -168,21 +167,21 @@ export default defineComponent({
 				})
 			}
 			//定时触发
-			if(state.detail.sceneType=='timer'){
+			if (state.detail.sceneType == 'timer') {
 				api.manage.getOneDetail({ "sceneId": id, 'group': 'timer' }).then((res: any) => {
 					if (!res) {
 						let data = {
 							sceneId: id,
 							group: 'timer',
-							bodyjson:state.timerData,
+							bodyjson: state.timerData,
 						}
 						api.manage.addDetail(data).then((res: any) => {
 							getOneDetail();
 						});
 					}
 
-					state.timer_id=res[0].id
-					state.timerData=JSON.parse(res[0].bodyjson);
+					state.timer_id = res[0].id
+					state.timerData = JSON.parse(res[0].bodyjson);
 
 				})
 			}

src/views/iot/scene/manage/index.vue

@@ -3,43 +3,36 @@
 		<el-card shadow="nover">
 			<div class="search">
 				<el-form inline ref="queryRef" @keyup.enter="getList(1)">
-					<el-form-item label="场景名称：" prop="keyWord">
-						<el-input v-model="params.keyWord" placeholder="请输入场景名称" clearable style="width: 240px" />
+					<el-form-item label="场景名称" prop="keyWord">
+						<el-input v-model="params.keyWord" placeholder="请输入场景名称" clearable style="width: 200px" />
 					</el-form-item>
-
-					<el-form-item label="触发方式" prop="sceneType" style="width: 200px;">
-						<el-select v-model="params.sceneType" placeholder="触发方式" clearable style="width: 240px">
+					<el-form-item label="触发方式" prop="sceneType">
+						<el-select v-model="params.sceneType" placeholder="触发方式" clearable style="width: 140px">
 							<el-option label="设备触发" value="device" />
 							<el-option label="手动触发" value="manual" />
 							<el-option label="定时触发" value="timer" />
 						</el-select>
 					</el-form-item>
-
-					<el-form-item label="运行状态" prop="status" style="width: 200px;">
-						<el-select v-model="params.status" placeholder="运行状态" clearable style="width: 240px">
+					<el-form-item label="运行状态" prop="status">
+						<el-select v-model="params.status" placeholder="运行状态" clearable style="width: 140px">
 							<el-option label="全部" :value="-1" />
 							<el-option label="启用" :value="1" />
 							<el-option label="禁用" :value="0" />
 						</el-select>
 					</el-form-item>
-
 					<el-form-item>
-
 						<el-button type="primary" class="ml10" @click="getList(1)">
 							<el-icon>
 								<ele-Search />
 							</el-icon>
 							查询
 						</el-button>
-					</el-form-item>
-					<el-form-item>
 						<el-button type="success" v-auth="'add'" @click="addOrEdit()">
 							<el-icon>
 								<ele-FolderAdd />
 							</el-icon>
 							新增场景
 						</el-button>
-
 					</el-form-item>
 				</el-form>
 			</div>
@@ -82,8 +75,7 @@
 <script lang="ts" setup>
 import api from '/@/api/scene';
 import { useSearch } from '/@/hooks/useCommon';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-import getOrigin from '/@/utils/origin'
+import { ElMessageBox, ElMessage } from 'element-plus';
 import EditForm from './edit.vue';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';

src/views/system/application/edit.vue

@@ -120,7 +120,7 @@ const open = async (row: any) => {
 
 defineExpose({ open });
 </script>
-<style>
+<style scoped>
 .vertical-form-item {
 	display: block;
 	margin-bottom: 10px;

src/views/system/assess/component/editAttr.vue

@@ -203,7 +203,7 @@ export default defineComponent({
 }
 </style>
 
-<style>
+<style scoped>
 .avatar-uploader .el-upload {
 	border: 1px dashed var(--el-border-color);
 	border-radius: 6px;

src/views/system/assess/component/editEvent.vue

@@ -210,7 +210,7 @@ export default defineComponent({
 }
 </style>
 
-<style>
+<style scoped>
 .avatar-uploader .el-upload {
 	border: 1px dashed var(--el-border-color);
 	border-radius: 6px;

src/views/system/assess/component/editFun.vue

@@ -162,7 +162,7 @@ export default defineComponent({
 }
 </style>
 
-<style>
+<style scoped>
 .avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;

src/views/system/assess/component/editPro.vue

@@ -236,7 +236,7 @@ export default defineComponent({
 }
 </style>
 
-<style>
+<style scoped>
 .avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;

src/views/system/assess/component/editTab.vue

@@ -204,7 +204,7 @@ export default defineComponent({
 }
 </style>
 
-<style>
+<style scoped>
 .avatar-uploader .el-upload {
 	border: 1px dashed var(--el-border-color);
 	border-radius: 6px;

src/views/system/config/index.vue

@@ -38,7 +38,7 @@
         </el-form-item>
       </el-form>
       <!-- 字典切换 -->
-      <el-tabs v-model="tableData.param.moduleClassify" class="demo-tabs" @tab-change="dataList">
+      <el-tabs v-model="tableData.param.moduleClassify" @tab-change="dataList">
         <el-tab-pane v-for="dict in tabDataList" :label="dict.dictLabel" :name="dict.dictValue"></el-tab-pane>
       </el-tabs>
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">

src/views/system/datahub/modeling/detail.vue

@@ -1,25 +1,23 @@
 <template>
-  <div class="system-dic-container">
+  <div class="page page-full">
     <div class="content">
       <div class="cont_box">
         <div class="title">模型标识：{{ detail.key }}</div>
         <div class="title" style="margin-left: 20px">模型表名：{{ detail.name }}</div>
-
         <div class="pro-status"><span :class="developer_status == 1 ? 'on' : 'off'"></span>{{ developer_status == 1 ? '已发布' : '未发布' }}</div>
-
         <div class="pro-option" v-auth="'startOrStop'" @click="CkOption">{{ developer_status == 1 ? '停用' : '发布' }}</div>
       </div>
     </div>
 
-    <div class="content-box">
+    <div class="content-box page page-full-part">
       <div class="wu-box">
         <div class="system-user-search mb15">
-          <el-form :model="tableData.param" ref="queryRef" inline label-width="130px">
+          <el-form :model="tableData.param" ref="queryRef" inline @submit.prevent @keyup.enter="typeList">
             <el-form-item label="字段标题" prop="name">
-              <el-input v-model="tableData.param.name" placeholder="请输入字段标题" clearable style="width: 240px" @keyup.enter.native="typeList" />
+              <el-input v-model="tableData.param.name" placeholder="请输入字段标题" clearable style="width: 220px" />
             </el-form-item>
             <el-form-item label="字段名称" prop="key">
-              <el-input v-model="tableData.param.key" placeholder="请输入字段名称" clearable style="width: 240px" @keyup.enter.native="typeList" />
+              <el-input v-model="tableData.param.key" placeholder="请输入字段名称" clearable style="width: 220px" />
             </el-form-item>
 
             <el-form-item>
@@ -223,7 +221,7 @@ export default defineComponent({
   },
 });
 </script>
-<style>
+<style scoped>
 .content {
   background: #fff;
   width: 100%;
@@ -234,7 +232,7 @@ export default defineComponent({
   background: #fff;
   width: 100%;
   padding: 20px;
-  margin-top: 20px;
+  margin-top: 15px;
 }
 
 .cont_box {

src/views/system/datahub/source/component/editNode.vue

@@ -457,7 +457,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .el-input__wrapper {
 	width: 98%;
 }

src/views/system/datahub/source/detail.vue

@@ -1,16 +1,15 @@
 <template>
-	<div class="system-dic-container">
+	<div class="page page-full">
 		<div class="content">
 			<div class="cont_box">
 				<div class="title">数据源名称：{{ detail.name }}</div>
 				<div class="pro-status"><span :class="developer_status == 1 ? 'on' : 'off'"></span>{{ developer_status == 1 ? '已发布' : '未发布' }}</div>
-
 				<div class="pro-option" v-auth="'startOrStop'" @click="CkOption">{{ developer_status == 1 ? '停用' : '发布' }}</div>
 			</div>
 		</div>
 
-		<div class="content-box">
-			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+		<div class="content-box page-full page-full-part">
+			<el-tabs v-model="activeName" @tab-click="handleClick">
 				<el-tab-pane label="数据源信息" name="1">
 					<el-form label-width="110px" inline>
 						<el-divider content-position="left">基本信息</el-divider>
@@ -133,35 +132,27 @@
 				</el-tab-pane>
 
 				<el-tab-pane label="数据节点" name="2">
-					<div class="wu-box">
-						<div class="wu-title">
-							<div class="title">数据节点</div>
-							<div v-if="developer_status == 0" v-auth="'add'"><el-button type="primary" @click="onOpenEdit()">添加</el-button></div>
-						</div>
-
-						<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
-							<el-table-column label="ID" align="center" prop="nodeId" width="100" v-col="'id'" />
-							<el-table-column label="数据标识" prop="key" show-overflow-tooltip v-col="'key'" />
-							<el-table-column label="数据名称" prop="name" show-overflow-tooltip v-col="'name'" />
-							<el-table-column label="数据类型" prop="dataType" show-overflow-tooltip v-col="'dataType'" />
-							<el-table-column label="数据取值项" prop="value" show-overflow-tooltip v-col="'value'" />
-
-							<el-table-column prop="createdAt" label="创建时间" align="center" v-col="'createdAt'" width="180"></el-table-column>
-
-							<el-table-column label="操作" width="200" align="center" fixed="right">
-								<template #default="scope">
-									<el-button size="small" text type="warning" @click="onOpenEdit1(scope.row)" v-if="developer_status == 0" v-auth="'edit'">修改</el-button>
-									<el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-if="developer_status == 0" v-auth="'del'">删除</el-button>
-								</template>
-							</el-table-column>
-						</el-table>
-						<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" @pagination="typeList" />
+					<div class="flex-row flex-end">
+						<el-button type="primary" size="small" @click="onOpenEdit()" v-if="developer_status == 0" v-auth="'add'">添加</el-button>
 					</div>
+					<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
+						<el-table-column label="ID" align="center" prop="nodeId" width="100" v-col="'id'" />
+						<el-table-column label="数据标识" prop="key" show-overflow-tooltip v-col="'key'" />
+						<el-table-column label="数据名称" prop="name" show-overflow-tooltip v-col="'name'" />
+						<el-table-column label="数据类型" prop="dataType" show-overflow-tooltip v-col="'dataType'" />
+						<el-table-column label="数据取值项" prop="value" show-overflow-tooltip v-col="'value'" />
+						<el-table-column prop="createdAt" label="创建时间" align="center" v-col="'createdAt'" width="180"></el-table-column>
+						<el-table-column label="操作" width="200" align="center" fixed="right">
+							<template #default="scope">
+								<el-button size="small" text type="warning" @click="onOpenEdit1(scope.row)" v-if="developer_status == 0" v-auth="'edit'">修改</el-button>
+								<el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-if="developer_status == 0" v-auth="'del'">删除</el-button>
+							</template>
+						</el-table-column>
+					</el-table>
+					<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" @pagination="typeList" />
 				</el-tab-pane>
 				<el-tab-pane label="查看数据" name="3">
-					<div class="wu-box">
-						<JsonViewer :value="jsonData" boxed sort theme="jv-dark" @click="onKeyclick" />
-					</div>
+					<JsonViewer :value="jsonData" boxed sort theme="jv-dark" @click="onKeyclick" />
 				</el-tab-pane>
 			</el-tabs>
 		</div>
@@ -346,7 +337,7 @@ export default defineComponent({
 	},
 });
 </script>
-<style>
+<style scoped>
 .content {
 	background: #fff;
 	width: 100%;
@@ -356,8 +347,8 @@ export default defineComponent({
 .content-box {
 	background: #fff;
 	width: 100%;
-	padding: 20px;
-	margin-top: 20px;
+	padding: 10px 20px 20px;
+	margin-top: 15px;
 }
 
 .cont_box {

src/views/system/dict/index.vue

@@ -39,7 +39,7 @@
         </el-form-item>
       </el-form>
       <!-- 字典切换 -->
-      <el-tabs v-model="tableData.param.moduleClassify" class="demo-tabs" @tab-change="typeList">
+      <el-tabs v-model="tableData.param.moduleClassify" @tab-change="typeList">
         <el-tab-pane v-for="dict in tabDataList" :label="dict.dictLabel" :name="dict.dictValue">
         </el-tab-pane>
       </el-tabs>

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

@@ -144,7 +144,7 @@ export default defineComponent({
 }
 </style>
 
-<style>
+<style scoped>
 .avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;

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

@@ -1,71 +1,69 @@
 <template>
-  <div class="page">
-    <el-card shadow="nover">
-      <el-form :model="tableData.param" inline ref="queryRef">
-        <el-form-item label="岗位名称" prop="postName">
-          <el-input v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50" clearable />
-        </el-form-item>
-        <el-form-item label="岗位编码" prop="postCode">
-          <el-input v-model="tableData.param.postCode" placeholder="请输入岗位编码" class="w-50" clearable />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-select placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
-            <el-option label="全部" :value="-1" />
-            <el-option label="启用" :value="1" />
-            <el-option label="禁用" :value="0" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" class="ml10" @click="postList">
-            <el-icon>
-              <ele-Search />
-            </el-icon>
-            查询
-          </el-button>
-          <el-button @click="resetQuery()">
-            <el-icon>
-              <ele-Refresh />
-            </el-icon>
-            重置
-          </el-button>
-          <el-button type="primary" class="ml10" @click="onOpenAddPost" v-auth="'add'">
-            <el-icon>
-              <ele-FolderAdd />
-            </el-icon>
-            新增岗位
-          </el-button>
-          <!-- <el-button type="info" class="ml10" @click="onRowDel(null)">
+  <el-card shadow="nover" class="page">
+    <el-form :model="tableData.param" inline ref="queryRef">
+      <el-form-item label="岗位名称" prop="postName">
+        <el-input v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50" clearable />
+      </el-form-item>
+      <el-form-item label="岗位编码" prop="postCode">
+        <el-input v-model="tableData.param.postCode" placeholder="请输入岗位编码" class="w-50" clearable />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select placeholder="请选择状态" style="width: 80px;" v-model="tableData.param.status">
+          <el-option label="全部" :value="-1" />
+          <el-option label="启用" :value="1" />
+          <el-option label="禁用" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="ml10" @click="postList">
+          <el-icon>
+            <ele-Search />
+          </el-icon>
+          查询
+        </el-button>
+        <el-button @click="resetQuery()">
+          <el-icon>
+            <ele-Refresh />
+          </el-icon>
+          重置
+        </el-button>
+        <el-button type="primary" class="ml10" @click="onOpenAddPost" v-auth="'add'">
+          <el-icon>
+            <ele-FolderAdd />
+          </el-icon>
+          新增岗位
+        </el-button>
+        <!-- <el-button type="info" class="ml10" @click="onRowDel(null)">
               <el-icon>
                 <ele-Delete />
               </el-icon>
               删除岗位
             </el-button> -->
-        </el-form-item>
-      </el-form>
-      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" row-key="postId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column prop="postCode" v-col="'postCode'" label="岗位编码" width="220" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="postName" v-col="'postName'" label="岗位名称" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="postSort" v-col="'postSort'" label="排序" width="60" align="center"></el-table-column>
-        <el-table-column prop="status" v-col="'status'" label="岗位状态" width="120" align="center">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
-            <el-tag type="info" size="small" v-else>禁用</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="remark" v-col="'remark'" label="岗位描述" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="180" align="center"></el-table-column>
-        <el-table-column label="操作" width="100" v-col="'handle'">
-          <template #default="scope">
-            <el-button size="small" text type="warning" @click="onOpenEditPost(scope.row)" v-auth="'edit'">修改</el-button>
-            <el-button size="small" text type="info" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
+      </el-form-item>
+    </el-form>
+    <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" row-key="postId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column prop="postCode" v-col="'postCode'" label="岗位编码" width="220" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="postName" v-col="'postName'" label="岗位名称" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="postSort" v-col="'postSort'" label="排序" width="60" align="center"></el-table-column>
+      <el-table-column prop="status" v-col="'status'" label="岗位状态" width="120" align="center">
+        <template #default="scope">
+          <el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
+          <el-tag type="info" size="small" v-else>禁用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark" v-col="'remark'" label="岗位描述" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="180" align="center"></el-table-column>
+      <el-table-column label="操作" width="100" v-col="'handle'">
+        <template #default="scope">
+          <el-button size="small" text type="warning" @click="onOpenEditPost(scope.row)" v-auth="'edit'">修改</el-button>
+          <el-button size="small" text type="info" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
     <EditPost ref="editPostRef" @getPostList="postList" />
-  </div>
+  </el-card>
 </template>
 
 <script lang="ts">

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

@@ -1,57 +1,56 @@
 <template>
-  <div class="page">
-    <el-card shadow="nover">
-      <el-form :model="tableData.param" inline ref="queryRef">
-        <el-form-item label="角色名称" prop="name">
-          <el-input v-model="tableData.param.name" placeholder="请输入角色名称" class="w-50" clearable />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-select placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
-            <el-option label="全部" :value="-1" />
-            <el-option label="启用" :value="1" />
-            <el-option label="禁用" :value="0" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" class="ml10" @click="roleList">
-            <el-icon>
-              <ele-Search />
-            </el-icon>
-            查询
-          </el-button>
-          <el-button @click="resetQuery()">
-            <el-icon>
-              <ele-Refresh />
-            </el-icon>
-            重置
-          </el-button>
-          <el-button type="primary" class="ml10" @click="onOpenAddRole" v-auth="'add'">
-            <el-icon>
-              <ele-FolderAdd />
-            </el-icon>
-            新增角色
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <el-table :data="tableData.data" style="width: 100%" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
-        <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column prop="name" v-col="'name'" label="角色名称" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="remark" v-col="'remark'" label="角色描述" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="listOrder" v-col="'listOrder'" label="排序" width="60" align="center"></el-table-column>
-        <el-table-column prop="status" v-col="'status'" label="角色状态" width="100" align="center">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
-            <el-tag type="info" size="small" v-else>禁用</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="170" align="center"></el-table-column>
-        <el-table-column label="操作" width="220" v-col="'handle'" align="center" fixed="right">
-          <template #default="scope">
-            <el-button size="small" type="text" @click="onOpenEditRole(scope.row)" v-auth="'edit'">修改</el-button>
-            <el-button size="small" text type="info" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
-            <el-button size="small" text type="success" @click="permission(scope.row)" v-auth="'role-premission'">角色权限</el-button>
-            <el-button size="small" text type="info" @click="dataPermission(scope.row)" v-auth="'data-premission'">数据权限</el-button>
-            <!-- <el-dropdown size="small">
+  <el-card shadow="nover" class="page">
+    <el-form :model="tableData.param" inline ref="queryRef">
+      <el-form-item label="角色名称" prop="name">
+        <el-input v-model="tableData.param.name" placeholder="请输入角色名称" class="w-50" clearable />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select placeholder="请选择状态" style="width: 80px;" v-model="tableData.param.status">
+          <el-option label="全部" :value="-1" />
+          <el-option label="启用" :value="1" />
+          <el-option label="禁用" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="roleList">
+          <el-icon>
+            <ele-Search />
+          </el-icon>
+          查询
+        </el-button>
+        <el-button @click="resetQuery()">
+          <el-icon>
+            <ele-Refresh />
+          </el-icon>
+          重置
+        </el-button>
+        <el-button type="primary" @click="onOpenAddRole" v-auth="'add'">
+          <el-icon>
+            <ele-FolderAdd />
+          </el-icon>
+          新增角色
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="tableData.data" style="width: 100%" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column prop="name" v-col="'name'" label="角色名称" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="remark" v-col="'remark'" label="角色描述" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="listOrder" v-col="'listOrder'" label="排序" width="60" align="center"></el-table-column>
+      <el-table-column prop="status" v-col="'status'" label="角色状态" width="100" align="center">
+        <template #default="scope">
+          <el-tag type="success" size="small" v-if="scope.row.status === 1">启用</el-tag>
+          <el-tag type="info" size="small" v-else>禁用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="170" align="center"></el-table-column>
+      <el-table-column label="操作" width="220" v-col="'handle'" align="center" fixed="right">
+        <template #default="scope">
+          <el-button size="small" type="text" @click="onOpenEditRole(scope.row)" v-auth="'edit'">修改</el-button>
+          <el-button size="small" text type="info" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
+          <el-button size="small" text type="success" @click="permission(scope.row)" v-auth="'role-premission'">角色权限</el-button>
+          <el-button size="small" text type="info" @click="dataPermission(scope.row)" v-auth="'data-premission'">数据权限</el-button>
+          <!-- <el-dropdown size="small">
               <el-button type="text" size="small" style="margin-top:1px;margin-left:10px">更多
                 <el-icon>
                   <ele-ArrowDown />
@@ -64,15 +63,15 @@
                 </el-dropdown-menu>
               </template>
             </el-dropdown> -->
-          </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="roleList" /> -->
-    </el-card>
+        </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="roleList" /> -->
+
     <EditRole ref="editRoleRef" @getList="roleList" :list="tableData.data" />
     <permissionVue ref="permissionRef" />
     <EditPer ref="dataPermissionRef" :dept-data="deptData" />
-  </div>
+  </el-card>
 </template>
 
 <script lang="ts">

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

@@ -1,6 +1,6 @@
 <template>
-	<div class="page padding flex-row gap-5">
-		<el-card shadow="nover">
+	<div class="page flex-row gap-4">
+		<el-card shadow="nover" style="width:260px">
 			<el-scrollbar>
 				<el-input :prefix-icon="search" v-model="filterText" placeholder="请输入组织名称" clearable style="width: 100%;" />
 				<el-tree ref="treeRef" class="filter-tree mt-4" :data="deptData" :props="deptProps" default-expand-all :filter-node-method="deptFilterNode" @node-click="handleNodeClick">
@@ -8,27 +8,24 @@
 						<div class="custom-tree-node" :title="node.label">
 							{{ node.label }}
 						</div>
-					</template></el-tree>
+					</template>
+				</el-tree>
 			</el-scrollbar>
 		</el-card>
-		<el-card shadow="nover">
-			<el-form :model="tableData.param" ref="queryRef" inline label-width="68px">
-				<el-form-item label="关键字" prop="keyWords">
-					<el-input v-model="tableData.param.keyWords" placeholder="请输入用户名或姓名" clearable style="width: 240px" @keyup.enter.native="userList" />
+		<el-card shadow="nover" class="flex1">
+			<el-form :model="tableData.param" ref="queryRef" inline>
+				<el-form-item label="" prop="keyWords">
+					<el-input v-model="tableData.param.keyWords" placeholder="用户名或姓名搜索" clearable style="width: 165px" @keyup.enter.native="userList" />
 				</el-form-item>
-				<!--							<el-form-item label="手机号码" prop="mobile">-->
-				<!--								<el-input v-model="tableData.param.mobile" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="userList" />-->
-				<!--							</el-form-item>-->
-				<el-form-item label="状态" prop="status" style="width: 200px;">
-					<el-select v-model="tableData.param.status" placeholder="用户状态" style="width: 240px">
+				<el-form-item label="" prop="status">
+					<el-select v-model="tableData.param.status" placeholder="用户状态" style="width: 80px">
 						<el-option label="全部" :value="-1" />
 						<el-option label="启用" :value="1" />
 						<el-option label="禁用" :value="0" />
-						<!-- <el-option label="未验证" :value="2" /> -->
 					</el-select>
 				</el-form-item>
-				<el-form-item label="创建时间" prop="dateRange">
-					<el-date-picker v-model="tableData.param.dateRange" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+				<el-form-item label="" prop="dateRange">
+					<el-date-picker v-model="tableData.param.dateRange" style="width: 220px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="创建时间" end-placeholder="时间范围"></el-date-picker>
 				</el-form-item>
 				<el-form-item>
 					<el-button type="primary" class="ml10" @click="userList">
@@ -37,12 +34,12 @@
 						</el-icon>
 						查询
 					</el-button>
-					<el-button @click="resetQuery(queryRef)">
+					<!-- <el-button @click="resetQuery(queryRef)">
 						<el-icon>
 							<ele-Refresh />
 						</el-icon>
 						重置
-					</el-button>
+					</el-button> -->
 					<el-button type="primary" class="ml10" @click="onOpenAddUser" v-auth="'add'">
 						<el-icon>
 							<ele-FolderAdd />
@@ -72,7 +69,7 @@
 					</template>
 				</el-table-column>
 				<el-table-column prop="createdAt" label="创建时间" width="180" v-col="'createdAt'" align="center"></el-table-column>
-				<el-table-column label="操作" width="180" align="center" v-col="'handle'" fixed="right">
+				<el-table-column label="操作" width="130" align="center" v-col="'handle'" fixed="right">
 					<template #default="scope">
 						<!-- <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auths="['edit','del']">修改</el-button>
                 <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auth-all="['edit','del']">修改</el-button> -->

src/views/system/monitor/lastLinesLog/index.vue

@@ -1,43 +1,37 @@
 <template>
-  <div class="page">
-    <el-card shadow="nover">
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-        <el-tab-pane label="服务日志" name="1"> </el-tab-pane>
-        <el-tab-pane label="数据库日志" name="2"> </el-tab-pane>
-        <el-tab-pane label="运行日志" name="3"> </el-tab-pane>
-      </el-tabs>
-      <!-- 日志列表 -->
-      <el-table ref="table" v-if="activeName === '1'" :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
-        <el-table-column prop="name" label="文件名" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="size" label="大小" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="changeAt" label="修改时间" min-width="100" align="center"></el-table-column>
-        <el-table-column label="操作" width="200" align="center">
-          <template #default="scope">
-            <el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">详情
-            </el-button>
-            <el-button size="small" text type="warning" v-auth="'download'" @click="down(scope.row)">下载</el-button>
-            <el-button size="small" text type="info" v-auth="'del'" @click="onRowDel(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <!-- 数据库日志 -->
-      <el-table v-else-if="activeName === '2'" :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
-        <el-table-column prop="name" label="文件名" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="size" label="大小" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="changeAt" label="修改时间" min-width="100" align="center"></el-table-column>
-        <el-table-column label="操作" width="200" align="center">
-          <template #default="scope">
-            <el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">详情
-            </el-button>
-            <el-button size="small" text type="warning" v-auth="'download'" @click="down(scope.row)">下载</el-button>
-            <el-button size="small" text type="info" v-auth="'del'" @click="onRowDel(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <template v-else>
-
-        <!-- 运行日志 -->
+  <div class="page bg page-full padding border Ipt-2">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="服务日志" name="1">
+        <el-table ref="table" :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
+          <el-table-column prop="name" label="文件名" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="size" label="大小" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="changeAt" label="修改时间" min-width="100" align="center"></el-table-column>
+          <el-table-column label="操作" width="200" align="center">
+            <template #default="scope">
+              <el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">详情
+              </el-button>
+              <el-button size="small" text type="warning" v-auth="'download'" @click="down(scope.row)">下载</el-button>
+              <el-button size="small" text type="info" v-auth="'del'" @click="onRowDel(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="数据库日志" name="2">
+        <el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
+          <el-table-column prop="name" label="文件名" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="size" label="大小" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="changeAt" label="修改时间" min-width="100" align="center"></el-table-column>
+          <el-table-column label="操作" width="200" align="center">
+            <template #default="scope">
+              <el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">详情
+              </el-button>
+              <el-button size="small" text type="warning" v-auth="'download'" @click="down(scope.row)">下载</el-button>
+              <el-button size="small" text type="info" v-auth="'del'" @click="onRowDel(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="运行日志" name="3">
         <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
         <div v-if="runButtonShow" v-loading="runLoading" v-for="line in runMessage" :key="line" class="error-line">{{ line }}</div>
         <div v-else class="error-line">暂无数据</div>
@@ -45,17 +39,16 @@
           <el-button size="small" text type="warning" v-auth="'download'" @click="down">下载</el-button>
           <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel">删除</el-button>
         </div>
-      </template>
-
-      <el-dialog v-model="dialogVisible" title="查看详情">
-        <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
-        <div v-for="line in errorMessage" :key="line" class="error-line">{{ line }}</div>
-      </el-dialog>
-      <el-dialog v-model="dialogVisible" title="查看详情">
-        <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
-        <div v-for="line in errorMessage" :key="line" class="error-line">{{ line }}</div>
-      </el-dialog>
-    </el-card>
+      </el-tab-pane>
+    </el-tabs>
+    <el-dialog v-model="dialogVisible" title="查看详情">
+      <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
+      <div v-for="line in errorMessage" :key="line" class="error-line">{{ line }}</div>
+    </el-dialog>
+    <el-dialog v-model="dialogVisible" title="查看详情">
+      <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
+      <div v-for="line in errorMessage" :key="line" class="error-line">{{ line }}</div>
+    </el-dialog>
   </div>
 </template>
 
@@ -194,5 +187,4 @@ const handleClick = (tab: any, event: Event) => {
   height: calc(100vh - 110px);
   overflow-y: auto;
 }
-
 </style>

src/views/system/monitor/loginLog/index.vue

@@ -1,85 +1,73 @@
 <template>
-  <div class="page">
-    <el-card shadow="nover">
-      <el-form :model="tableData.param" ref="queryRef" inline label-width="68px">
-        <el-form-item label="登录IP" prop="ipaddr">
-          <el-input v-model="tableData.param.ipaddr" placeholder="请输入登录地址" clearable style="width: 180px" @keyup.enter.native="dataList" />
-        </el-form-item>
+  <el-card shadow="nover" class="page">
+    <el-form :model="tableData.param" ref="queryRef" inline>
+      <el-form-item label="" prop="ipaddr">
+        <el-input v-model="tableData.param.ipaddr" placeholder="登录IP" clearable style="width: 150px" @keyup.enter="dataList" />
+      </el-form-item>
 
-        <el-form-item label="登录地点" prop="loginLocation">
-          <el-input v-model="tableData.param.loginLocation" placeholder="请输入登录地点" clearable style="width: 180px" @keyup.enter.native="dataList" />
-        </el-form-item>
+      <el-form-item label="" prop="loginLocation">
+        <el-input v-model="tableData.param.loginLocation" placeholder="登录地点" clearable style="width: 150px" @keyup.enter="dataList" />
+      </el-form-item>
 
-        <!-- <el-form-item label="用户名称" prop="userName">
-            <el-input v-model="tableData.param.userName" placeholder="请输入用户名称" clearable style="width: 180px;" @keyup.enter.native="dataList" />
-          </el-form-item> -->
+      <el-form-item label="" prop="status">
+        <el-select v-model="tableData.param.status" placeholder="状态" style="width: 75px">
+          <el-option label="全部" :value="-1" />
+          <el-option label="成功" :value="1" />
+          <el-option label="失败" :value="0" />
+        </el-select>
+      </el-form-item>
 
-        <el-form-item label="状态" prop="status">
-          <el-select v-model="tableData.param.status" placeholder="登录状态" style="width: 180px">
-            <el-option label="全部" :value="-1" />
-            <el-option label="成功" :value="1" />
-            <el-option label="失败" :value="0" />
-          </el-select>
-        </el-form-item>
+      <el-form-item label="" prop="dateRange">
+        <el-date-picker v-model="tableData.param.dateRange" style="width: 220px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="登录时间" end-placeholder="结束时间"></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="dataList">
+          <el-icon>
+            <ele-Search />
+          </el-icon>
+          查询
+        </el-button>
+        <!-- <el-button @click="resetQuery(queryRef)">
+          <el-icon>
+            <ele-Refresh />
+          </el-icon>
+          重置
+        </el-button> -->
+        <el-button type="info" @click="onRowDel(null)" v-auth="'del'">
+          <el-icon>
+            <ele-Delete />
+          </el-icon>
+          删除日志
+        </el-button>
 
-        <el-form-item label="登录时间" prop="dateRange">
-          <el-date-picker v-model="tableData.param.dateRange" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" class="ml10" @click="dataList">
-            <el-icon>
-              <ele-Search />
-            </el-icon>
-            查询
-          </el-button>
-          <el-button @click="resetQuery(queryRef)">
-            <el-icon>
-              <ele-Refresh />
-            </el-icon>
-            重置
-          </el-button>
-          <el-button type="info" class="ml10" @click="onRowDel(null)" v-auth="'del'">
-            <el-icon>
-              <ele-Delete />
-            </el-icon>
-            删除日志
-          </el-button>
-
-          <el-button type="primary" class="ml10" @click="onRowExport()">
-            <el-icon>
-              <ele-Download />
-            </el-icon>
-            导出日志
-          </el-button>
-          <!--<el-button type="info" class="ml10" @click="onRowClear()">
-              <el-icon>
-                <ele-Delete />
-              </el-icon>
-              清空日志
-            </el-button> -->
-        </el-form-item>
-      </el-form>
-      <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="编号" align="center" width="100" prop="infoId" />
-        <el-table-column label="登录名称" align="center" prop="loginName" />
-        <el-table-column label="登录地址" align="center" prop="ipaddr" width="150" show-overflow-tooltip />
-        <el-table-column label="登录地点" v-col="'loginLocation'" align="center" prop="loginLocation" show-overflow-tooltip />
-        <el-table-column label="浏览器" align="center" prop="browser" />
-        <el-table-column label="操作系统" show-overflow-tooltip align="center" prop="os" />
-        <el-table-column label="登录状态" v-col="'status'" align="center" prop="status" width="90">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status === 1">成功</el-tag>
-            <el-tag type="info" size="small" v-else>失败</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作信息" v-col="'msg'" show-overflow-tooltip prop="msg" align="center" />
-        <el-table-column label="登录日期" v-col="'loginTime'" align="center" prop="loginTime" width="180" />
-        <el-table-column label="登录模块" v-col="'module'" align="center" show-overflow-tooltip prop="module" width="120"></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="dataList" />
-    </el-card>
-  </div>
+        <el-button type="primary" @click="onRowExport()">
+          <el-icon>
+            <ele-Download />
+          </el-icon>
+          导出日志
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="编号" align="center" width="90" prop="infoId" />
+      <el-table-column label="登录名称" align="center" prop="loginName" />
+      <el-table-column label="登录地址" align="center" prop="ipaddr" width="145" show-overflow-tooltip />
+      <el-table-column label="登录地点" v-col="'loginLocation'" align="center" prop="loginLocation" show-overflow-tooltip />
+      <el-table-column label="浏览器" align="center" prop="browser" />
+      <el-table-column label="操作系统" show-overflow-tooltip align="center" prop="os" />
+      <el-table-column label="登录状态" v-col="'status'" align="center" prop="status" width="90">
+        <template #default="scope">
+          <el-tag type="success" size="small" v-if="scope.row.status === 1">成功</el-tag>
+          <el-tag type="info" size="small" v-else>失败</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作信息" v-col="'msg'" show-overflow-tooltip prop="msg" align="center" />
+      <el-table-column label="登录日期" v-col="'loginTime'" align="center" prop="loginTime" width="160" />
+      <el-table-column label="登录模块" v-col="'module'" align="center" show-overflow-tooltip prop="module" width="120"></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="dataList" />
+  </el-card>
 </template>
 
 <script lang="ts">

src/views/system/monitor/operLog/index.vue

@@ -1,98 +1,96 @@
 <template>
-  <div class="page">
-    <el-card shadow="nover">
-      <el-form :model="tableData.param" ref="queryRef" inline label-width="68px">
-        <el-form-item label="系统模块" prop="title">
-          <el-input v-model="tableData.param.title" placeholder="请输入系统模块" clearable style="width: 180px" @keyup.enter="dataList" />
-        </el-form-item>
+  <el-card shadow="nover" class="page">
+    <el-form :model="tableData.param" ref="queryRef" inline>
+      <el-form-item label="" prop="title">
+        <el-input v-model="tableData.param.title" placeholder="系统模块" clearable style="width: 220px" @keyup.enter="dataList" />
+      </el-form-item>
 
-        <el-form-item label="操作人员" prop="operName">
-          <el-input v-model="tableData.param.operName" placeholder="请输入操作人员" clearable style="width: 180px" @keyup.enter="dataList" />
-        </el-form-item>
+      <el-form-item label="" prop="operName">
+        <el-input v-model="tableData.param.operName" placeholder="操作人员" clearable style="width: 220px" @keyup.enter="dataList" />
+      </el-form-item>
 
-        <el-form-item label="业务类型" prop="businessType">
-          <el-select v-model="tableData.param.businessType" placeholder="请选择类型" clearable style="width: 180px">
-            <el-option label="新增" :value="1" />
-            <el-option label="修改" :value="2" />
-            <el-option label="删除" :value="3" />
-            <el-option label="其它" :value="0" />
-          </el-select>
-        </el-form-item>
+      <el-form-item label="" prop="businessType">
+        <el-select v-model="tableData.param.businessType" placeholder="业务类型" clearable style="width: 120px">
+          <el-option label="新增" :value="1" />
+          <el-option label="修改" :value="2" />
+          <el-option label="删除" :value="3" />
+          <el-option label="其它" :value="0" />
+        </el-select>
+      </el-form-item>
 
-        <el-form-item label="状态" prop="status">
-          <el-select v-model="tableData.param.status" placeholder="请选择状态" style="width: 180px">
-            <el-option label="全部" :value="-1" />
-            <el-option label="正常" :value="1" />
-            <el-option label="异常" :value="0" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" class="ml10" @click="dataList">
-            <el-icon>
-              <ele-Search />
-            </el-icon>
-            查询
-          </el-button>
-          <el-button @click="resetQuery(queryRef)">
-            <el-icon>
-              <ele-Refresh />
-            </el-icon>
-            重置
-          </el-button>
-          <el-button type="info" class="ml10" @click="onRowDel(null)" v-auth="'del'">
-            <el-icon>
-              <ele-Delete />
-            </el-icon>
-            删除日志
-          </el-button>
-          <!-- <el-button type="info" class="ml10" @click="onRowClear()">
+      <el-form-item label="" prop="status">
+        <el-select v-model="tableData.param.status" placeholder="请选择状态" style="width: 100px">
+          <el-option label="全部状态" :value="-1" />
+          <el-option label="正常" :value="1" />
+          <el-option label="异常" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="ml10" @click="dataList">
+          <el-icon>
+            <ele-Search />
+          </el-icon>
+          查询
+        </el-button>
+        <!-- <el-button @click="resetQuery(queryRef)">
+          <el-icon>
+            <ele-Refresh />
+          </el-icon>
+          重置
+        </el-button> -->
+        <el-button type="info" class="ml10" @click="onRowDel(null)" v-auth="'del'">
+          <el-icon>
+            <ele-Delete />
+          </el-icon>
+          删除日志
+        </el-button>
+        <!-- <el-button type="info" class="ml10" @click="onRowClear()">
               <el-icon>
                 <ele-Delete />
               </el-icon>
               清空日志
             </el-button> -->
-        </el-form-item>
-      </el-form>
-      <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="编号" align="center" width="100" prop="operId" />
-        <el-table-column label="系统模块" align="center" prop="title" min-width="120" show-overflow-tooltip />
-        <el-table-column label="业务类型" align="center" prop="businessType" width="130">
-          <template #default="scope">
-            <span size="small" v-if="scope.row.businessType === 0">其他</span>
-            <span size="small" v-else-if="scope.row.businessType === 1">新增</span>
-            <span size="small" v-else-if="scope.row.businessType === 2">修改</span>
-            <span size="small" v-else-if="scope.row.businessType === 3">删除</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作类型" v-col="'operatorType'" align="center" prop="operatorType" width="130">
-          <template #default="scope">
-            <span size="small" v-if="scope.row.operatorType === 0">其他</span>
-            <span size="small" v-else-if="scope.row.operatorType === 1">后台用户</span>
-            <span size="small" v-else-if="scope.row.operatorType === 2">手机端用户</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作人员" v-col="'operName'" align="center" prop="operName" show-overflow-tooltip />
-        <el-table-column label="组织名称" align="center" prop="deptName" />
-        <el-table-column label="主机" show-overflow-tooltip align="center" prop="operIp" width="160" />
-        <el-table-column label="操作地点" v-col="'operLocation'" show-overflow-tooltip align="center" prop="operLocation" width="130" />
-        <el-table-column label="操作时间" v-col="'operTime'" align="center" prop="operTime" width="160" />
-        <el-table-column label="操作状态" v-col="'status'" align="center" prop="status" width="100">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status === 1">正常</el-tag>
-            <el-tag type="warning" size="small" v-else-if="scope.row.status === 0">异常</el-tag>
-            <el-tag type="info" size="small" v-else>-</el-tag>
-          </template>
-        </el-table-column>
-        <!-- <el-table-column label="操作信息" show-overflow-tooltip prop="msg" /> -->
-        <el-table-column label="操作" v-col="'handle'" width="80" align="center" fixed="right">
-          <template #default="scope">
-            <el-button size="small" type="text" @click="onOpenDetail(scope.row)" v-auth="'detail'">详细</el-button>
-          </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="dataList" />
-    </el-card>
+      </el-form-item>
+    </el-form>
+    <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
+      <el-table-column type="selection" width="55" align="center" fixed="left" />
+      <el-table-column label="编号" align="center" width="100" prop="operId" />
+      <el-table-column label="系统模块" align="center" prop="title" min-width="120" show-overflow-tooltip />
+      <el-table-column label="业务类型" align="center" prop="businessType" width="130">
+        <template #default="scope">
+          <span size="small" v-if="scope.row.businessType === 0">其他</span>
+          <span size="small" v-else-if="scope.row.businessType === 1">新增</span>
+          <span size="small" v-else-if="scope.row.businessType === 2">修改</span>
+          <span size="small" v-else-if="scope.row.businessType === 3">删除</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作类型" v-col="'operatorType'" align="center" prop="operatorType" width="130">
+        <template #default="scope">
+          <span size="small" v-if="scope.row.operatorType === 0">其他</span>
+          <span size="small" v-else-if="scope.row.operatorType === 1">后台用户</span>
+          <span size="small" v-else-if="scope.row.operatorType === 2">手机端用户</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作人员" v-col="'operName'" align="center" prop="operName" show-overflow-tooltip />
+      <el-table-column label="组织名称" align="center" prop="deptName" />
+      <el-table-column label="主机" show-overflow-tooltip align="center" prop="operIp" width="160" />
+      <el-table-column label="操作地点" v-col="'operLocation'" show-overflow-tooltip align="center" prop="operLocation" width="130" />
+      <el-table-column label="操作时间" v-col="'operTime'" align="center" prop="operTime" width="160" />
+      <el-table-column label="操作状态" v-col="'status'" align="center" prop="status" width="100">
+        <template #default="scope">
+          <el-tag type="success" size="small" v-if="scope.row.status === 1">正常</el-tag>
+          <el-tag type="warning" size="small" v-else-if="scope.row.status === 0">异常</el-tag>
+          <el-tag type="info" size="small" v-else>-</el-tag>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="操作信息" show-overflow-tooltip prop="msg" /> -->
+      <el-table-column label="操作" v-col="'handle'" width="80" align="center" fixed="right">
+        <template #default="scope">
+          <el-button size="small" type="text" @click="onOpenDetail(scope.row)" v-auth="'detail'">详细</el-button>
+        </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="dataList" />
 
     <el-dialog :title="currentRow.title + '详情'" v-model="dialogVisible" width="550px">
       <el-form :model="currentRow" ref="formRef" label-width="90px">
@@ -128,7 +126,7 @@
         </span>
       </template>
     </el-dialog>
-  </div>
+  </el-card>
 </template>
 
 <script lang="ts">

src/views/system/monitor/server/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="" v-loading="loading">
+  <div v-loading="loading">
     <el-row :gutter="15">
       <el-col :xs="24" :sm="12" :md="8" class="mb-4">
         <el-card shadow="nover" class="box-card-meter">