完善通道管理的页面

src/api/device/modbus.ts

@@ -11,6 +11,8 @@ export default {
   },
   task: {
     getList: (params: object) => get('/device_job', params),
+    addDeviceJob: (data: object) => post('/device_job/add', data),
+    editDeviceJob: (data: object) => post('/device_job/edit', data),
     deleteDeviceJob: (data: object) => post('/device_job/delete', data),
   },
   template: {

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

@@ -46,15 +46,7 @@
 					</el-table-column>
 				</el-table>
 
-				<pagination
-					v-show="total > 0"
-					:total="total"
-					:page.sync="listQuery.page"
-					:limit.sync="listQuery.size"
-					@pagination="getList"
-					style="padding: 10px 20px 20px !important"
-				/>
-
+				<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" />
 			</el-tab-pane>
 			<el-tab-pane label="通道码流" name="3">
@@ -79,11 +71,10 @@
 import { ElMessage } from 'element-plus';
 import api from '/@/api/device/modbus';
 import getOrigin from '/@/utils/origin';
-// import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
-// import TaskDialog from './taskDialog';
+import TaskDialog from './taskDialog.vue';
 
 export default {
-	// components: { Pagination, TaskDialog },
+	components: { TaskDialog },
 	data() {
 		return {
 			temp: {
@@ -107,7 +98,7 @@ export default {
 			tableKey: 0,
 			listQuery: {
 				page: 1,
-				size: 20,
+				size: 10,
 			},
 			evsrc: null as any,
 			count: 0,
@@ -147,7 +138,7 @@ export default {
 				if (valid) {
 					const tempData = Object.assign({}, this.temp);
 					api.channel.editDevice(tempData).then(() => {
-						this.$emit('finish');
+						this.$emit('getList');
 						this.clsoeDialog();
 						ElMessage.success('操作成功！');
 					});
@@ -181,7 +172,6 @@ export default {
 			api.task
 				.getList(this.listQuery)
 				.then((res: any) => {
-					console.log(res.list[0]);
 					this.taskList = res.list || [];
 					this.total = res.Total;
 				})
@@ -205,13 +195,13 @@ export default {
 				.catch(function () {});
 		},
 		handleCreate() {
-			this.$refs.taskDialog.openDialog({
+			(this.$refs.taskDialog as any).openDialog({
 				dialogStatus: 'create',
 				deviceNumber: this.temp.number,
 			});
 		},
-		handleUpdate(row) {
-			this.$refs.taskDialog.openDialog({
+		handleUpdate(row: any) {
+			(this.$refs.taskDialog as any).openDialog({
 				dialogStatus: 'update',
 				row,
 				deviceNumber: this.temp.number,

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

@@ -56,8 +56,8 @@ export default {
 			this.dialogVisible = true;
 		},
 		clsoeDialog() {
+			(this.$refs.dataForm as any).resetFields();
 			this.dialogVisible = false;
-			// this.$refs.dataForm.resetFields();
 		},
 		// 获取模板数据
 		getList() {

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

@@ -1,147 +0,0 @@
-<template>
-	<div class="system-edit-dic-container">
-		<el-dialog  v-model="isShowDialog" :show-close="false"  width="75%" :fullscreen="dialogFullScreen">
-		 <template #header="{ close, titleId, titleClass }">
-      <div class="my-header">
-        <h4 :id="titleId" :class="titleClass">数据记录</h4>
-		 
-		 <div>
-            <i class="iconfont "  :class="!dialogFullScreen ? 'icon-fullscreen' : 'icon-tuichuquanping'"   @click="quanping"  style="font-size: 22px;cursor: pointer;"></i>
-			<i class="el-icon"  @click="close" style="font-size: 22px;cursor: pointer;    margin-left: 10px; position: relative; top: 3px;"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg></i>
-			
-		</div>
-      </div>
-    </template>
-
-			<el-table :data="tableData.data" style="width: 100%"  v-loading="tableData.loading">
-				<el-table-column label="时间" prop="ts" :show-overflow-tooltip="true" />
-				<el-table-column label="属性值" prop="value" :show-overflow-tooltip="true" />
-			</el-table>
-			<pagination
-				v-show="tableData.total > 0"
-				:total="tableData.total"
-				v-model:page="tableData.param.pageNum"
-				v-model:limit="tableData.param.pageSize"
-				@pagination="typeList"
-			/>
-		</el-dialog>
-	</div>
-</template>
- 
-<script lang="ts">
-import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
-import { Close } from '@element-plus/icons-vue';
-
-import api from '/@/api/device';
-import { ElMessage } from 'element-plus';
-
-interface DicState {
-	isShowDialog: boolean;
-}
-
-// 定义接口来定义对象的类型
-interface TableDataRow {
-	id: number;
-	name: string;
-	key: string;
-
-	createBy: string;
-}
-interface TableDataState {
-	ids: number[];
-	tableData: {
-		data: Array<TableDataRow>;
-		total: number;
-		loading: boolean;
-		param: {
-			pageNum: number;
-			pageSize: number;
-			id: number;
-		};
-	};
-}
-
-export default defineComponent({
-	name: 'deviceEditPro',
-	setup(prop, { emit }) {
-		const formRef = ref<HTMLElement | null>(null);
-		const state = reactive<DicState>({
-			isShowDialog: false,
-		    dialogFullScreen: false,
-			tableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 10,
-					id: 0,
-					propertyKey:'',
-				},
-			},
-		});
-		// 打开弹窗
-		const openDialog = (row: RuleFormState | null,devid) => {
-			resetForm();
-			if (row) {
-				console.log(row);
-				state.tableData.param.id = devid;
-				state.tableData.param.propertyKey=row.key
-				typeList();
-
-			}
-			state.isShowDialog = true;
-		};
-
-		const typeList = () => {
-			state.tableData.loading = true;
-			api.instance.getLogDetail(state.tableData.param).then((res: any) => {
-				state.tableData.data = res.List;
-				state.tableData.total = res.Total;
-				//state.ruleForm = res.data.dictType
-			}).finally(() => (state.tableData.loading = false));
-
-		};
-		const resetForm = () => {
-			state.tableData= {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 10,
-				},
-			}
-		};
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
-		const quanping=()=>{
-			state.dialogFullScreen = state.dialogFullScreen?false:true;
-		}
-		// 取消
-		const onCancel = () => {
-			closeDialog();
-		};
-
-		return {
-            Close,
-			quanping,
-			typeList,
-			openDialog,
-			closeDialog,
-			onCancel,
-			formRef,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-<style scoped>
-.my-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-</style>

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

@@ -0,0 +1,146 @@
+<template>
+	<el-dialog
+		:title="textMap[dialogStatus]"
+		v-model="dialogVisible"
+		width="600px"
+		:before-close="clsoeDialog"
+		append-to-body
+		:close-on-click-modal="false"
+	>
+		<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin: 0 auto">
+			<el-form-item label="标题" prop="title">
+				<el-input v-model="temp.title" 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="encoding">
+				<el-select v-model="temp.encoding" placeholder="请选择转发格式" style="width: 100%">
+					<el-option v-for="item in formatOptions" :key="item.value" :label="item.title" :value="item.value"> </el-option>
+				</el-select>
+				<!-- <el-input v-model="temp.encoding" placeholder="请输入转发格式"/> -->
+			</el-form-item>
+			<el-form-item label="mqtt主题" prop="publishTopic">
+				<el-input v-model="temp.publishTopic" placeholder="请输入mqtt主题" />
+			</el-form-item>
+			<el-form-item label="设备模板" prop="templateNumber">
+				<el-select v-model="temp.templateNumber" filterable placeholder="请选择设备模板" style="width: 100%">
+					<el-option v-for="item in templateOptions" :key="item.number" :label="item.title" :value="item.number"> </el-option>
+				</el-select>
+			</el-form-item>
+		</el-form>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="clsoeDialog"> 取 消 </el-button>
+			<el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()"> 保 存 </el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script lang="ts">
+import api from '/@/api/device/modbus';
+import { ElMessage } from 'element-plus';
+
+export default {
+	components: {},
+	props: {
+		formatOptions: {
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			temp: {
+				title: '',
+				interval: '20s',
+				encoding: 'json',
+				publishTopic: '',
+				deviceNumber: '',
+				number: '',
+				templateNumber: '',
+			},
+			rules: {
+				title: [{ required: true, message: '请输入模板名称', trigger: 'change' }],
+				publishTopic: [{ required: true, message: '请输入mqtt主题', trigger: 'change' }],
+				mode: [{ required: true, message: '请选择模式', trigger: 'change' }],
+				templateNumber: [{ required: true, message: '请选择模式', trigger: 'change' }],
+			},
+			dialogVisible: false,
+			listLoading: false,
+			dialogStatus: '',
+			textMap: {
+				update: '任务详情',
+				create: '添加任务',
+			},
+			templateOptions: '',
+		};
+	},
+
+	methods: {
+		openDialog({ dialogStatus, row, deviceNumber }) {
+			this.dialogStatus = dialogStatus;
+			this.temp.deviceNumber = deviceNumber;
+			if (row) {
+				// this.temp = { ...row }
+				this.temp.number = row.Job.number;
+				this.temp.title = row.Job.title;
+				this.temp.interval = row.Job.interval;
+				this.temp.encoding = row.Job.encoding;
+				this.temp.publishTopic = row.Job.publishTopic;
+				this.temp.templateNumber = row?.Template?.number;
+			}
+			// this.getDict()
+			this.getTemplateList();
+			this.dialogVisible = true;
+		},
+		clsoeDialog() {
+			this.dialogVisible = false;
+			this.temp = {
+				title: '',
+				interval: '20s',
+				encoding: 'json',
+				publishTopic: '',
+				deviceNumber: '',
+				number: '',
+				templateNumber: '',
+			};
+			(this.$refs['dataForm'] as any).resetFields();
+		},
+		// 获取模板数据
+		getTemplateList() {
+			this.listLoading = true;
+			api.template
+				.getList({ page: 1, size: 50 })
+				.then((res: any) => {
+					this.templateOptions = res.list || [];
+				})
+				.finally(() => {
+					this.listLoading = false;
+				});
+		},
+		createData() {
+			(this.$refs['dataForm'] as any).validate((valid: boolean) => {
+				if (valid) {
+					api.task.addDeviceJob(this.temp).then(() => {
+						this.$emit('finish');
+						this.clsoeDialog();
+						ElMessage.success('操作成功！');
+					});
+				}
+			});
+		},
+		updateData() {
+			(this.$refs['dataForm'] as any).validate((valid: boolean) => {
+				if (valid) {
+					api.task.editDeviceJob(this.temp).then(() => {
+						this.$emit('finish');
+						this.clsoeDialog();
+						ElMessage.success('操作成功！');
+					});
+				}
+			});
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -1,873 +0,0 @@
-<template>
-  <div class="system-dic-container">
-    <div class="content">
-      <div class="cont_box">
-        <div class="title">设备：{{ detail.name }}</div>
-        <div class="pro-status"><span :class="developer_status == 2 ? 'on' : 'off'"></span>{{ developer_status == 2 ? '在线' : '离线' }}</div>
-
-        <!-- <div class="pro-option" @click="CkOption">{{ developer_status == 2 ? '下线' : '上线' }}</div> -->
-      </div>
-    </div>
-
-		<div class="content-box">
-			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-
-				<el-tab-pane label="运行状态" name="3">
-					<div style=" display: flex; padding: 10px;flex-wrap: wrap;" >
-						<div class="ant-card">
-							<div class="ant-card-body">
-								<div class="cardflex">
-									<div>设备状态</div>
-									<div @click="getrunData()" style="cursor: pointer;">
-										<el-icon style="font-size: 18px;">
-											<ele-Refresh />
-										</el-icon>
-									</div>
-								</div>
-
-								<div class="statusname" v-if="areaData.status==0">未启用</div>
-								<div class="statusname" v-if="areaData.status==1">离线</div>
-								<div class="statusname" v-if="areaData.status==2">在线</div>
-								<div class="cardflex comtest">
-									<div> 数据时间</div>
-									<div>{{areaData.lastOnlineTime || '未启用'}}</div>
-								</div>
-							</div>
-						</div>
-
-						<div class="ant-card" v-for="(item, index) in areaData.properties" :key="index">
-							<div class="ant-card-body">
-								<div class="cardflex">
-									<div>{{item.name}}</div>
-									<div style="cursor: pointer;">
-										<el-icon  style="font-size: 18px;"  @click="getrunData()">
-											<ele-Refresh />
-										</el-icon>
-										<el-icon  style="font-size: 18px;    margin-left: 10px;" @click="onOpenListDetail(item)">
-											<ele-Expand />
-										</el-icon>
-									</div>
-								</div>
-
-								<div class="statusname">{{item.value}}{{item.unit}}</div>
-								<div class="">
-									<devantd :json="item.list" :antdid="item.key" v-if="item.type=='int' || item.type=='float'"/>
-								</div>
-							</div>
-						</div>
-
-
-
-					</div>
-				</el-tab-pane>
-
-
-
-
-				<el-tab-pane label="设备信息" name="1">
-					<div class="pro-box">
-						<div class="protitle">设备信息</div>
-            <div>
-              <el-button type="primary" @click="onOpenEditDic(detail)">编辑</el-button>
-            </div>
-          </div>
-
-					<div class="ant-descriptions-view">
-						<table>
-							<tbody>
-								<tr class="ant-descriptions-row">
-                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">设备标识</th>
-                  <td class="ant-descriptions-item-content" colspan="1">{{ detail.key }}</td>
-									<th class="ant-descriptions-item-label ant-descriptions-item-colon">设备名称</th>
-									<td class="ant-descriptions-item-content" colspan="1">{{ detail.name }}</td>
-									<th class="ant-descriptions-item-label ant-descriptions-item-colon">所属产品</th>
-									<td class="ant-descriptions-item-content" colspan="1">{{ detail.productName }}</td>
-
-								</tr>
-								<tr class="ant-descriptions-row">
-									<th class="ant-descriptions-item-label ant-descriptions-item-colon">消息协议</th>
-									<td class="ant-descriptions-item-content" colspan="1">{{ prodetail.messageProtocol }}</td>
-									<th class="ant-descriptions-item-label ant-descriptions-item-colon">链接协议</th>
-									<td class="ant-descriptions-item-content" colspan="1">{{ prodetail.transportProtocol }}</td>
-                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">设备类型</th>
-                  <td class="ant-descriptions-item-content" colspan="1">{{ prodetail.deviceType }}</td>
-								</tr>
-								<tr class="ant-descriptions-row">
-                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">固件版本</th>
-                  <td class="ant-descriptions-item-content" colspan="1">{{ prodetail.version }}</td>
-									<th class="ant-descriptions-item-label ant-descriptions-item-colon">注册时间</th>
-									<td class="ant-descriptions-item-content" colspan="1">{{ prodetail.updatedAt }}</td>
-									<th class="ant-descriptions-item-label ant-descriptions-item-colon">最后上线时间</th>
-									<td class="ant-descriptions-item-content" colspan="1">{{ prodetail.lastOnlineTime || '' }}</td>
-								</tr>
-                <tr class="ant-descriptions-row">
-                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">说明</th>
-                  <td class="ant-descriptions-item-content" colspan="5">{{ prodetail.desc }}</td>
-                </tr>
-
-
-              </tbody>
-								</table>
-								</div>
-								</el-tab-pane>
-        <el-tab-pane label="物模型" name="2">
-          <div class="wu-box">
-            <el-tabs type="border-card" v-model="activetab" @tab-click="wuhandleClick">
-              <el-tab-pane label="属性定义" name="attr">
-                <div class="wu-title">
-                  <div class="title">属性定义</div>
-                  <div>
-                    <el-button type="primary" @click="onOpenEditAttr()">添加</el-button>
-                  </div>
-                </div>
-
-                <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'attr'">
-                  <el-table-column label="属性标识" align="center" prop="key" />
-                  <el-table-column label="属性名称" prop="name" :show-overflow-tooltip="true" />
-                  <el-table-column prop="valueType" label="数据类型" width="100" align="center">
-                    <template #default="scope">
-                      <span>{{ scope.row.valueType.type }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="decimals" label="精度" width="60" align="center">
-                    <template #default="scope">
-                      <span>{{ scope.row.valueType.decimals }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="unit" label="单位" width="60" align="center">
-                    <template #default="scope">
-                      <span>{{ scope.row.valueType.unit }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="accessMode" label="是否只读" width="120" align="center">
-                    <template #default="scope">
-                      <el-tag type="info" size="small" v-if="scope.row.accessMode">只读</el-tag>
-                      <el-tag type="success" size="small" v-else>读写</el-tag>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="说明" prop="desc" :show-overflow-tooltip="true" />
-                  <el-table-column label="操作" width="300" align="center" fixed="right">
-                    <template #default="scope">
-                      <el-button size="small" text type="warning" @click="onEditAttr(scope.row)">修改</el-button>
-                      <el-button size="small" text type="danger" @click="onRowDel(scope.row.key, 'attr')">删除</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="功能定义" name="fun">
-                <div class="wu-title">
-                  <div class="title">功能定义</div>
-                  <div>
-                    <el-button type="primary" @click="onOpenEditFun()">添加</el-button>
-                  </div>
-                </div>
-
-                <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'fun'">
-                  <el-table-column label="功能标识" align="center" prop="key" />
-                  <el-table-column label="名称" prop="name" :show-overflow-tooltip="true" />
-
-                  <el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
-                  <el-table-column label="操作" width="300" align="center" fixed="right">
-                    <template #default="scope">
-                      <el-button size="small" text type="warning" @click="onEditFun(scope.row)">修改</el-button>
-                      <el-button size="small" text type="danger" @click="onRowDel(scope.row.key, 'fun')">删除</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="事件定义" name="event">
-                <div class="wu-title">
-                  <div class="title">事件定义</div>
-                  <div>
-                    <el-button type="primary" @click="onOpenEditEvent()">添加</el-button>
-                  </div>
-                </div>
-
-                <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'event'">
-                  <el-table-column label="事件标识" align="center" prop="key" />
-                  <el-table-column label="名称" prop="name" :show-overflow-tooltip="true" />
-                  <el-table-column prop="level" label="事件级别" width="120" align="center">
-                    <template #default="scope">
-                      <el-tag type="primary" size="small" v-if="scope.row.level == 0">普通</el-tag>
-                      <el-tag type="warning" size="small" v-if="scope.row.level == 1">警告</el-tag>
-                      <el-tag type="danger" size="small" v-if="scope.row.level == 2">紧急</el-tag>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
-
-                  <el-table-column label="操作" width="300" align="center" fixed="right">
-                    <template #default="scope">
-                      <el-button size="small" text type="warning" @click="onEditEvent(scope.row)">修改</el-button>
-                      <el-button size="small" text type="danger" @click="onRowDel(scope.row.key, 'event')">删除</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="标签定义" name="tab">
-                <div class="wu-title">
-                  <div class="title">标签定义</div>
-                  <div>
-                    <el-button type="primary" @click="onOpenEditTab()">添加</el-button>
-                  </div>
-                </div>
-
-
-                <el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'tab'">
-                  <el-table-column label="属性标识" align="center" prop="key" />
-                  <el-table-column label="属性名称" prop="name" :show-overflow-tooltip="true" />
-                  <el-table-column prop="valueType" label="数据类型" width="120" align="center">
-                    <template #default="scope">
-                      <span>{{ scope.row.valueType.type }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="accessMode" label="是否只读" width="120" align="center">
-                    <template #default="scope">
-                      <el-tag type="info" size="small" v-if="scope.row.accessMode">只读</el-tag>
-                      <el-tag type="success" size="small" v-else>读写</el-tag>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
-                  <el-table-column label="操作" width="300" align="center" fixed="right">
-                    <template #default="scope">
-                      <el-button size="small" text type="warning" @click="onEditTag(scope.row)">修改</el-button>
-                      <el-button size="small" text type="danger" @click="onRowDel(scope.row.key, 'tab')">删除</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-            </el-tabs>
-            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="getList" />
-          </div>
-        </el-tab-pane>
-
-
-        <el-tab-pane label="日志管理" name="4">
-          <div class="system-user-search mb15">
-            <el-form :model="logtableData.param" ref="queryRef" :inline="true" label-width="68px">
-              <el-form-item label="日志类型" prop="types">
-                <el-select v-model="logtableData.param.types" placeholder="日志类型" clearable size="default">
-                  <el-option v-for="item in logTypeData" :key="item" :label="item" :value="item" />
-                </el-select>
-              </el-form-item>
-
-              <el-form-item label="创建时间" prop="dateRange">
-                <el-date-picker v-model="logtableData.param.dateRange" size="default" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-              </el-form-item>
-              <el-form-item>
-                <el-button size="default" type="primary" class="ml10" @click="getlog">
-                  <el-icon>
-                    <ele-Search />
-                  </el-icon>
-                  查询
-                </el-button>
-                <el-button size="default" @click="resetQuery(queryRef)">
-                  <el-icon>
-                    <ele-Refresh />
-                  </el-icon>
-                  重置
-                </el-button>
-              </el-form-item>
-            </el-form>
-          </div>
-          <el-table style="width: 100%" :data="logtableData.data">
-            <el-table-column label="类型" align="center" prop="type" />
-            <el-table-column label="时间" prop="ts" :show-overflow-tooltip="true" />
-
-            <el-table-column label="内容" prop="content" :show-overflow-tooltip="true" />
-            <el-table-column label="操作" width="300" align="center" fixed="right">
-              <template #default="scope">
-                <el-button size="small" text type="warning" @click="onLogDetail(scope.row)">查看</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <pagination v-show="logtableData.total > 0" :total="logtableData.total" v-model:page="logtableData.param.pageNum" v-model:limit="logtableData.param.pageSize" @pagination="getlog" />
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-    <EditDic ref="editDicRef" @typeList="typeList" />
-    <EditAttr ref="editAttrRef" @typeList="getproperty" />
-    <EditFun ref="editFunRef" @typeList="getfunction" />
-    <EditEvent ref="editEventRef" @typeList="getevent" />
-    <EditTab ref="editTabRef" @typeList="gettab" />
-    <ListDic ref="listDicRef" />
-
-    <el-dialog v-model="dialogVisible" title="返回Json数据" width="30%">
-      <JsonViewer :value="jsonData" boxed sort theme="jv-dark" @click="onKeyclick" />
-
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">关闭</el-button>
-        </span>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-<script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-
-import 'vue3-json-viewer/dist/index.css';
-
-import EditDic from '../product/component/editPro.vue';
-import EditAttr from '../product/component/editAttr.vue';
-import EditFun from '../product/component/editFun.vue';
-import EditEvent from '../product/component/editEvent.vue';
-import EditTab from '../product/component/editTab.vue';
-import devantd from '/@/components/devantd/index.vue';
-import ListDic from './component/list.vue';
-
-
-import { useRoute } from 'vue-router';
-
-import api from '/@/api/device';
-
-interface TableDataState {
-  ids: number[];
-  tableData: {
-    data: [];
-    total: number;
-    loading: boolean;
-    param: {
-      pageNum: number;
-      pageSize: number;
-      name: string;
-      deviceType: string;
-      status: string;
-      dateRange: string[];
-    };
-  };
-  logtableData: {
-    data: [];
-    total: number;
-    loading: boolean;
-    param: {
-      pageNum: number;
-      pageSize: number;
-      name: string;
-      deviceType: string;
-      status: string;
-      dateRange: string[];
-    };
-  };
-}
-export default defineComponent({
-  name: 'deviceEditPro',
-  components: { EditDic, EditAttr, EditFun, EditEvent, EditTab, devantd, ListDic },
-
-	setup(prop, context) {
-		const route = useRoute();
-		const editDicRef = ref();
-		const editAttrRef = ref();
-		const editFunRef = ref();
-		const listDicRef=ref();
-		const editEventRef = ref();
-		const editTabRef = ref();
-		const state = reactive<TableDataState>({
-			areaData:[],
-			isShowDialog: false,
-			dialogVisible: false,
-			logTypeData: [],
-			jsonData: '',
-			activeName: '3', // 分类数据
-			activetab: 'attr', // 分类数据
-			detail: [],
-			prodetail: [],
-			product_id: 0,
-			developer_status: 0,
-			tableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					pageNum: 1,
-					productId: 0,
-					pageSize: 10,
-					status: '',
-					dateRange: [],
-				},
-			},
-			logtableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					pageNum: 1,
-					productId: 0,
-					pageSize: 10,
-					status: '',
-					dateRange: [],
-				},
-			},
-		});
-
-		onMounted(() => {
-			const ids = route.params && route.params.id;
-			api.instance.detail(ids).then((res: any) => {
-				state.detail = res.data;
-				state.developer_status = res.data.status;
-				state.tableData.param.productId = res.data.product.id;
-				state.product_id = res.data.product.id;
-				getrunData();
-				api.product.detail(res.data.product.id).then((res: any) => {
-					state.prodetail = res.data;
-					console.log(res.data);
-				});
-
-				//第一次加载
-				api.model.property(state.tableData.param).then((res: any) => {
-					state.tableData.data = res.Data;
-					state.tableData.total = res.Total;
-				});
-			});
-
-		});
-
-
-    const onLogDetail = (row: TableDataRow) => {
-      state.jsonData = JSON.parse(row.content);
-      console.log(JSON.parse(row.content));
-      state.dialogVisible = true;
-    };
-
-    //编辑属性
-    const onEditAttr = (row: TableDataRow) => {
-      editAttrRef.value.openDialog(row, state.product_id);
-    };
-
-    //编辑功能
-    const onEditFun = (row: TableDataRow) => {
-      editFunRef.value.openDialog(row, state.product_id);
-    };
-
-    //编辑事件
-    const onEditEvent = (row: TableDataRow) => {
-      editEventRef.value.openDialog(row, state.product_id);
-    };
-
-    //编辑标签
-    const onEditTag = (row: TableDataRow) => {
-      editTabRef.value.openDialog(row, state.product_id);
-    };
-
-    //打开添加属性弹窗
-    const onOpenEditAttr = () => {
-      editAttrRef.value.openDialog({ product_id: state.product_id, id: 0, accessMode: 0 });
-    };
-
-    //打开添加功能弹窗
-    const onOpenEditFun = () => {
-      editFunRef.value.openDialog({ product_id: state.product_id, id: 0 });
-    };
-    //打开添加事件弹窗
-    const onOpenEditEvent = () => {
-      editEventRef.value.openDialog({ product_id: state.product_id, id: 0, level: 0 });
-    };
-
-    //打开添加事件弹窗
-    const onOpenEditTab = () => {
-      editTabRef.value.openDialog({ product_id: state.product_id, id: 0, accessMode: 0 });
-    };
-
-    //查看日志列表
-    const onOpenListDetail = (row: TableDataRow) => {
-      listDicRef.value.openDialog(row, state.detail.id);
-    };
-
-    // 打开修改产品弹窗
-    const onOpenEditDic = (row: TableDataRow) => {
-      editDicRef.value.openDialog(row);
-    };
-
-    // 删除产品
-    const onRowDel = (key, type) => {
-      let msg = `此操作将永久删除该数据吗？，是否继续?`;
-
-      if (key.length === 0) {
-        ElMessage.error('请选择要删除的数据。');
-        return;
-      }
-      ElMessageBox.confirm(msg, '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          if (type == 'attr') {
-            api.model.propertydel(state.product_id, key).then(() => {
-              ElMessage.success('删除成功');
-              getproperty();
-            });
-          }
-          if (type == 'fun') {
-            api.model.functiondel(state.product_id, key).then(() => {
-              ElMessage.success('删除成功');
-              getfunction();
-            });
-          }
-          if (type == 'event') {
-            api.model.eventdel(state.product_id, key).then(() => {
-              ElMessage.success('删除成功');
-              getevent();
-            });
-          }
-          if (type == 'tab') {
-            api.model.tagdel(state.product_id, key).then(() => {
-              ElMessage.success('删除成功');
-              tagdel();
-            });
-          }
-        })
-        .catch(() => { });
-    };
-
-    //根据不同类型获取列表
-    const getList = () => {
-      switch (state.activetab) {
-        case 'attr':
-          getproperty();
-          break;
-        case 'fun':
-          getfunction();
-          break;
-        case 'event':
-          getevent();
-          break;
-        case 'tab':
-          gettab();
-          break;
-      }
-    };
-
-    const getproperty = () => {
-      api.model.property(state.tableData.param).then((res: any) => {
-        state.tableData.data = res.Data;
-        state.tableData.total = res.Total;
-      });
-    };
-
-    const getfunction = () => {
-      api.model.function(state.tableData.param).then((res: any) => {
-        state.tableData.data = res.Data;
-        state.tableData.total = res.Total;
-      });
-    };
-    const getevent = () => {
-      api.model.event(state.tableData.param).then((res: any) => {
-        state.tableData.data = res.Data;
-        state.tableData.total = res.Total;
-      });
-    };
-
-    const gettab = () => {
-      api.model.tag(state.tableData.param).then((res: any) => {
-        state.tableData.data = res.Data;
-        state.tableData.total = res.Total;
-      });
-    };
-
-    const wuhandleClick = (tab: TabsPaneContext) => {
-      state.activetab = tab.props.name;
-      switch (tab.props.name) {
-        case 'attr':
-          getproperty();
-          break;
-        case 'fun':
-          getfunction();
-          break;
-        case 'event':
-          getevent();
-          break;
-        case 'tab':
-          gettab();
-          break;
-      }
-    };
-
-    const handleClick = (tab: TabsPaneContext, event: Event) => {
-      console.log(tab, event);
-      if (tab.props.name == 4) {
-        //获取日志
-        getlog();
-        getlogtype();
-      } else if (tab.props.name == 2) {
-        getList();
-      } else if (tab.props.name == 3) {
-        getrunData();
-      }
-    };
-
-    const getrunData = () => {
-      api.instance.getrun_status({ id: state.detail.id }).then((res: any) => {
-          state.areaData = res
-          let properties=state.areaData.properties;
-
-          var temp = new Array();
-
-          properties.forEach(function (item, index) {
-              let datalist=item.list;
-              temp[index] = [];
-              var temps = new Array();
-              datalist.forEach(function (a, b) {
-                 if(b<15){
-                  temps.push(a);
-                 }
-              });
-              temp[index]['name']=item.name
-              temp[index]['key']=item.key
-              temp[index]['type']=item.type
-              temp[index]['unit']=item.unit
-              temp[index]['value']=item.value
-              temp[index]['list']=temps
-
-          });
-
-          state.areaData.properties=temp;
-      });
-
-    };
-
-    const getlogtype = () => {
-      api.instance.getlogcate({}).then((res: any) => {
-        state.logTypeData = res.list;
-      });
-    };
-
-    const getlog = () => {
-      state.logtableData.param.deviceKey = state.detail.key;
-      api.instance.getLogList(state.logtableData.param).then((res: any) => {
-        console.log(res, '22222222');
-        state.logtableData.data = res.list;
-        state.logtableData.total = res.Total;
-      });
-    };
-
-    const CkOption = () => {
-      if (state.developer_status == 2) {
-        api.instance.devoffline({ id: state.detail.id }).then((res: any) => {
-          ElMessage.success('操作成功');
-          state.developer_status = 1;
-        });
-      } else {
-        api.instance.devonline({ id: state.detail.id }).then((res: any) => {
-          ElMessage.success('操作成功');
-          state.developer_status = 2;
-        });
-      }
-    };
-    const tinyAreas = () => {
-      var data = state.data;
-
-      const tinyArea = new TinyArea('container', {
-        height: 60,
-        autoFit: false,
-        data,
-        smooth: true,
-        areaStyle: {
-          fill: '#d6e3fd',
-        },
-      });
-      tinyArea.render();
-    }
-    return {
-      tinyAreas,
-      editDicRef,
-      editAttrRef,
-      listDicRef,
-      editFunRef,
-      editEventRef,
-      editTabRef,
-      onOpenListDetail,
-      getrunData,
-      getlog,
-      getlogtype,
-      onLogDetail,
-      CkOption,
-      onRowDel,
-      onEditFun,
-      onEditEvent,
-      onEditTag,
-      onEditAttr,
-      getList,
-      getproperty,
-      getfunction,
-      getevent,
-      gettab,
-      wuhandleClick,
-      onOpenEditTab,
-      onOpenEditEvent,
-      onOpenEditAttr,
-      onOpenEditFun,
-      onOpenEditDic,
-      handleClick,
-      ...toRefs(state),
-    };
-  },
-});
-</script>
-  <style>
-.content {
-	background: #fff;
-	width: 100%;
-	padding: 20px;
-}
-.content-box {
-	background: #fff;
-	width: 100%;
-	padding: 20px;
-	margin-top: 20px;
-}
-.cont_box {
-	display: flex;
-}
-.cont_box .title {
-	font-size: 24px;
-}
-.cont_box .pro-status {
-	line-height: 40px;
-	margin-left: 30px;
-}
-.cont_box .pro-status .on {
-	background: #52c41a;
-}
-.cont_box .pro-status .off {
-	background: #c41a1a;
-}
-.cont_box .pro-status span {
-	position: relative;
-	top: -1px;
-	display: inline-block;
-	width: 6px;
-	height: 6px;
-	vertical-align: middle;
-	border-radius: 50%;
-	margin-right: 5px;
-}
-.cont_box .pro-option {
-	line-height: 40px;
-	margin-left: 10px;
-	color: #1890ff;
-	cursor: pointer;
-}
-.content-box .pro-box {
-	display: flex;
-	padding: 10px;
-  justify-content: space-between;
-
-}
-.content-box .pro-box .protitle {
-	font-size: 18px;
-	font-weight: bold;
-	line-height: 35px;
-}
-.content-box .pro-box .buttonedit {
-	border: 0px;
-	color: #1890ff;
-}
-table {
-	border-collapse: collapse;
-	text-indent: initial;
-	border-spacing: 2px;
-}
-tbody {
-	box-sizing: border-box;
-	display: table-row-group;
-	vertical-align: middle;
-	border-color: inherit;
-}
-
-tr {
-	display: table-row;
-	vertical-align: inherit;
-	border-color: inherit;
-}
-.ant-descriptions-view {
-	width: 100%;
-	overflow: hidden;
-	border-radius: 4px;
-}
-.ant-descriptions-view {
-	border: 1px solid #e8e8e8;
-}
-.ant-descriptions-view table {
-	width: 100%;
-	table-layout: fixed;
-}
-.ant-descriptions-view > table {
-	table-layout: auto;
-}
-.ant-descriptions-row {
-	border-bottom: 1px solid #e8e8e8;
-}
-.ant-descriptions-item-label {
-	color: rgba(0, 0, 0, 0.85);
-	font-weight: 400;
-	font-size: 14px;
-	line-height: 1.5;
-}
-.ant-descriptions-item-label {
-	padding: 16px 24px;
-	border-right: 1px solid #e8e8e8;
-}
-.ant-descriptions-item-label {
-	background-color: #fafafa;
-}
-.ant-descriptions-item-content {
-	padding: 16px 24px;
-	border-right: 1px solid #e8e8e8;
-	display: table-cell;
-	color: rgba(0, 0, 0, 0.65);
-	font-size: 14px;
-	line-height: 1.5;
-}
-.wu-box {
-	border: #e8e8e8 solid 1px;
-	padding: 20px;
-	width: 100%;
-}
-.wu-box .wu-title {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	padding: 20px;
-	border-bottom: #e8e8e8 1px solid;
-}
-.wu-box .wu-title .title {
-	font-size: 18px;
-}
-.ant-card {
-	box-sizing: border-box;
-	margin: 10px;
-	width: 23.2%;
-	font-size: 14px;
-	font-variant: tabular-nums;
-  border: 1px solid  var(--next-border-color-light);
-
-	line-height: 1.5;
-	list-style: none;
-	font-feature-settings: 'tnum';
-	position: relative;
-	border-radius: 2px;
-	transition: all 0.3s;
-}
-.ant-card-body {
-	padding: 24px;
-	zoom: 1;
-}
-.cardflex {
-	display: flex;
-	justify-content: space-between;
-}
-.statusname {
-	font-size: 30px;
-	margin-top: 10px;
-  margin-bottom: 15px;
-}
-.comtest {
-	margin-top: 20px;
-	height: 30px;
-	line-height: 30px;
-}
-</style>
-
-