新增数据源详情

新增设备详情

src/api/device/index.ts

@@ -14,7 +14,8 @@ export default {
     message_protocol_list: (params: object) => get('/product/protocol/message_protocol_list', params),
     trunsport_protocol_list: (params: object) => get('/product/protocol/trunsport_protocol_list', params),
     getDataType: (params: object) => get('/product/tsl/data_type', params),
-  },
+    deploy: (data: object) => post('/product/deploy', data),
+    undeploy: (data: object) => post('/product/undeploy0', data),  },
   category:{
     getList: (params: object) => get('/product/category/list', params),
     add: (data: object) => post('/product/category/add', data),

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

@@ -0,0 +1,150 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog title="查看数据源" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
+       
+        <el-form-item label="数据源名称" prop="name">
+          {{ruleForm.name}}
+        </el-form-item>
+
+        <el-form-item label="数据类型" prop="types">
+           {{ruleForm.types}}
+        </el-form-item>
+
+        <el-form-item label="地址" prop="host">
+          {{ruleForm.host}}
+        </el-form-item>
+
+         <el-form-item label="端口" prop="port">
+          {{ruleForm.port}}
+        </el-form-item>
+        <el-form-item label="用户名" prop="userName">
+          {{ruleForm.userName}}
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+           {{ruleForm.password}}
+        </el-form-item>
+  	
+        <el-form-item label="备注" prop="description">
+        {{ruleForm.description}}
+        </el-form-item>
+			</el-form>
+		
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import api from '/@/api/datahub';
+import {ElMessage} from "element-plus";
+interface RuleFormState {
+  id:number;
+  name:string;
+  types:string;
+  host:string;
+  port:string;
+  userName:string;
+  password:string;
+  description:string;
+  status:number;
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+  rules:{}
+}
+
+export default defineComponent({
+	name: 'deviceEditPro',
+	setup(prop,{emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			isShowDialog: false,
+			ruleForm: {
+        id:0,
+        name:'',
+        types:'',
+        host:'',
+        port:'',
+        userName:'',
+        password:'',
+        description:'',
+        status:1,
+
+			},
+      rules: {
+       
+      }
+		});
+		// 打开弹窗
+		const openDialog = (row: RuleFormState|null) => {
+      resetForm();
+
+
+      if (row){
+        // api.dict.getType(row.id).then((res:any)=>{
+        //   state.ruleForm = res.data.dictType
+        // })
+        state.ruleForm = row;
+      }
+			state.isShowDialog = true;
+		};
+    const resetForm = ()=>{
+      state.ruleForm = {
+       id:0,
+        name:'',
+        types:'',
+        host:'',
+        port:'',
+        userName:'',
+        password:'',
+        description:'',
+        status:1
+      }
+    };
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if(state.ruleForm.id!==0){
+            //修改
+            api.common.edit(state.ruleForm).then(()=>{
+              ElMessage.success('数据源类型修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }else{
+            //添加
+            api.common.add(state.ruleForm).then(()=>{
+              ElMessage.success('数据源类型添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }
+        }
+      });
+		};
+
+
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>

src/views/datahub/source/component/edit.vue

@@ -25,7 +25,7 @@
           <el-input v-model="ruleForm.password" placeholder="请输入密码" />
         </el-form-item>
   	<el-form-item label="状态" prop="status">
-					<el-radio-group v-model="ruleForm.status" >
+					<el-radio-group v-model="ruleForm.status"  >
 						<el-radio label="0">未启用</el-radio>
 
 						<el-radio label="1">启用</el-radio>
@@ -81,7 +81,7 @@ export default defineComponent({
         userName:'',
         password:'',
         description:'',
-        status:1
+        status:1,
 
 			},
       rules: {

src/views/datahub/source/detail.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="system-dic-container">
-  </div>
- </template>
-    

src/views/datahub/source/index.vue

@@ -57,9 +57,8 @@
         </el-table-column>
         <el-table-column label="操作" width="200" align="center">
           <template #default="scope">
-		   <router-link :to="'/datahub/source/detail/' + scope.row.id" class="link-type" style="padding-right: 10px;color: #409eff;">
-              <span>详情</span>
-            </router-link>
+		   			 <el-button size="small" text type="primary" @click="onOpenDetail(scope.row)">详情</el-button>
+
             <el-button size="small" text type="warning" @click="onOpenEdit(scope.row)">修改</el-button>
             <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
           </template>
@@ -68,6 +67,8 @@
       <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
     </el-card>
     <EditDic ref="editDicRef" @typeList="typeList" />
+	    <Detail ref="detailRef"  />
+
   </div>
 </template>
 
@@ -76,6 +77,7 @@ import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import EditDic from './component/edit.vue';
 import api from '/@/api/datahub';
+import Detail from './component/detail.vue';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
@@ -105,11 +107,12 @@ interface TableDataState {
 
 export default defineComponent({
 	name: 'deviceInstance',
-	components: { EditDic },
+	components: { EditDic,Detail },
 	setup() {
 		const addDicRef = ref();
 		const editDicRef = ref();
 		const queryRef = ref();
+		const detailRef=ref();
 		const state = reactive<TableDataState>({
 			ids: [],
 			tableData: {
@@ -176,11 +179,17 @@ export default defineComponent({
 		const handleSelectionChange = (selection: TableDataRow[]) => {
 			state.ids = selection.map((item) => item.id);
 		};
+		//查看详情
+		const onOpenDetail=(row: TableDataRow)=>{
+			detailRef.value.openDialog(row);
+		}
 		return {
 			addDicRef,
 			editDicRef,
 			queryRef,
+			detailRef,
 			onOpenAdd,
+			onOpenDetail,
 			onOpenEdit,
 			onRowDel,
 			typeList,

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

@@ -0,0 +1,165 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog title="查看设备" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
+       <el-form-item label="设备标识" prop="key">
+          {{ruleForm.key}}
+        </el-form-item>
+        <el-form-item label="设备名称" prop="name">
+          {{ruleForm.name}}
+        </el-form-item>
+
+        
+
+           <el-form-item label="所属产品" prop="productId">
+       
+                {{ruleForm.productName}}
+            </el-form-item> 
+
+         <el-form-item label="所属部门" prop="deptId">
+               {{ruleForm.deptName}}
+            </el-form-item> 
+
+           
+        
+        <el-form-item label="设备证书" prop="certificate">
+            {{ruleForm.certificate}}
+        </el-form-item>
+
+        <el-form-item label="设备秘钥" prop="secureKey">
+            {{ruleForm.secureKey}}
+        </el-form-item>
+
+         <el-form-item label="固件版本号" prop="version">
+          {{ruleForm.version}}
+        </el-form-item>
+      
+  
+        <el-form-item label="备注" prop="desc">
+           {{ruleForm.desc}}
+        </el-form-item>
+			</el-form>
+
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import api from '/@/api/device';
+import {ElMessage} from "element-plus";
+interface RuleFormState {
+  id:number;
+  name:string;
+  certificate:string;
+  secureKey:string;
+  version:string;
+  productId:number;
+  deptId:number;
+  desc:string;
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+  rules:{}
+}
+
+export default defineComponent({
+	name: 'deviceEditPro',
+	setup(prop,{emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			isShowDialog: false,
+      productData: [], // 分类数据
+      deptData: [], // 
+			ruleForm: {
+        id:0,
+        name:'',
+        productId:'',
+        deptId:0,
+        certificate:'',
+        secureKey:'',
+        version:'',
+        desc:''
+			},
+      rules: {
+       
+      }
+		});
+		// 打开弹窗
+		const openDialog = (row: RuleFormState|null) => {
+      resetForm();
+
+        api.product.getLists({ status: 1 }).then((res: any) => {
+          state.productData = res.product || [];
+        });
+        api.dept.getList({ status: -1 }).then((res: any) => {
+          state.deptData = res || [];
+        });
+
+
+      if (row){
+        // api.dict.getType(row.id).then((res:any)=>{
+        //   state.ruleForm = res.data.dictType
+        // })
+        state.ruleForm = row;
+      }
+			state.isShowDialog = true;
+		};
+    const resetForm = ()=>{
+      state.ruleForm = {
+        id:0,
+        name:'',
+        productId:'',
+        deptId:0,
+        certificate:'',
+        secureKey:'',
+        version:'',
+        desc:''
+      }
+    };
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if(state.ruleForm.id!==0){
+            //修改
+            api.instance.edit(state.ruleForm).then(()=>{
+              ElMessage.success('设备类型修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }else{
+            //添加
+            api.instance.add(state.ruleForm).then(()=>{
+              ElMessage.success('设备类型添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }
+        }
+      });
+		};
+
+
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>

src/views/device/instance/detail.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="system-dic-container">
-  </div>
- </template>
-    

src/views/device/instance/index.vue

@@ -52,8 +52,8 @@
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="ID" align="center" prop="id" width="80" />
+	    <el-table-column label="设备标识" prop="key" :show-overflow-tooltip="true" />
         <el-table-column label="设备名称" prop="name" :show-overflow-tooltip="true" />
-        <el-table-column label="设备标识" prop="key" :show-overflow-tooltip="true" />
         <el-table-column label="产品名称" prop="productName" :show-overflow-tooltip="true" />
         <el-table-column label="部门名称" prop="deptName" :show-overflow-tooltip="true" />
        
@@ -69,9 +69,8 @@
          <el-table-column prop="lastOnlineTime" label="最后上线时间" align="center" width="180"></el-table-column> 
         <el-table-column label="操作" width="200" align="center">
           <template #default="scope">
-		   <router-link :to="'/device/instance/detail/' + scope.row.id" class="link-type" style="padding-right: 10px;color: #409eff;">
-              <span>详情</span>
-            </router-link>
+	
+			 <el-button size="small" text type="primary" @click="onOpenDetail(scope.row)">详情</el-button>
             <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)">修改</el-button>
             <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
           </template>
@@ -80,6 +79,7 @@
       <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
     </el-card>
     <EditDic ref="editDicRef" @typeList="typeList" />
+    <Detail ref="detailRef"  />
   </div>
 </template>
 
@@ -87,6 +87,7 @@
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import EditDic from './component/edit.vue';
+import Detail from './component/detail.vue';
 import api from '/@/api/device';
 
 // 定义接口来定义对象的类型
@@ -117,10 +118,11 @@ interface TableDataState {
 
 export default defineComponent({
 	name: 'deviceInstance',
-	components: { EditDic },
+	components: { EditDic,Detail },
 	setup() {
 		const addDicRef = ref();
 		const editDicRef = ref();
+		const detailRef=ref();
 		const queryRef = ref();
 		const state = reactive<TableDataState>({
 			ids: [],
@@ -149,6 +151,11 @@ export default defineComponent({
 				state.tableData.total = res.total;
 			});
 		};
+
+		//查看详情
+		const onOpenDetail=(row: TableDataRow)=>{
+			detailRef.value.openDialog(row);
+		}
 		// 打开新增产品弹窗
 		const onOpenAddDic = () => {
 			editDicRef.value.openDialog();
@@ -201,7 +208,9 @@ export default defineComponent({
 		return {
 			addDicRef,
 			editDicRef,
+			detailRef,
 			queryRef,
+			onOpenDetail,
 			onOpenAddDic,
 			onOpenEditDic,
 			onRowDel,

src/views/device/product/detail.vue

@@ -3,8 +3,9 @@
 		<div class="content">
 			<div class="cont_box">
 				<div class="title">产品：{{ detail.name }}</div>
-				<div class="pro-status"><span class="on"></span>已发布</div>
-				<div class="pro-option">停用</div>
+				<div class="pro-status" ><span :class="developer_status==1?'on':'off'"></span>{{developer_status==1?'已发布':'未发布'}}</div>
+			
+				<div class="pro-option"  @click="CkOption"> {{developer_status==1?'停用':'启用'}}</div>
 			</div>
 		</div>
 
@@ -215,6 +216,7 @@ export default defineComponent({
 			activeName: '1', // 分类数据
 			activetab: 'attr', // 分类数据
 			detail: [],
+			developer_status:0,
 			tableData: {
 				data: [],
 				total: 0,
@@ -233,6 +235,7 @@ export default defineComponent({
 			const ids = route.params && route.params.id;
 			api.product.detail(ids).then((res: any) => {
 				state.detail = res.data;
+				state.developer_status=res.data.status
 			});
 
 			//第一次加载
@@ -382,6 +385,25 @@ export default defineComponent({
 			console.log(tab, event);
 		};
 
+		const CkOption=()=>{
+
+			if(state.developer_status==1){
+				api.product.undeploy({id:route.params.id}).then((res: any) => {
+					ElMessage.success('操作成功');
+					state.developer_status=0;
+				});
+			}else{
+				api.product.deploy({id:route.params.id}).then((res: any) => {
+					ElMessage.success('操作成功');
+					state.developer_status=1;
+				});
+			}
+			
+
+			
+
+		}
+
 		return {
 			Edit,
 			editDicRef,
@@ -389,6 +411,7 @@ export default defineComponent({
 			editFunRef,
 			editEventRef,
 			editTabRef,
+			CkOption,
 			onRowDel,
 			onEditAttr,
 			getList,
@@ -450,6 +473,7 @@ export default defineComponent({
 	line-height: 40px;
 	margin-left: 10px;
 	color: #1890ff;
+	cursor: pointer;
 }
 .content-box .pro-box {
 	display: flex;