Browse Source

设备档案api待对接

yukai 1 year ago
parent
commit
818cde1e4b

+ 240 - 0
src/views/iot/device/dossier/edit.vue

@@ -0,0 +1,240 @@
+<template>
+	<el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑设备档案' : '新增设备档案'}`" width="800px"
+		:close-on-click-modal="false" :close-on-press-escape="false">
+		<el-form class="inline-form" ref="formRef" :model="formData" :rules="ruleForm" label-width="120px">
+
+			<el-row>
+				<el-col :span="12">
+					<el-form-item label="选择产品" prop="name">
+						<el-select v-model="formData.name" placeholder="请选择产品" class="w100" clearable>
+							<el-option label="Zone one" value="shanghai" />
+							<el-option label="Zone two" value="beijing" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12">
+					<el-form-item label="选择设备" prop="name">
+						<el-select v-model="formData.name" placeholder="请选择设备" class="w100" clearable>
+							<el-option label="Zone one" value="shanghai" />
+							<el-option label="Zone two" value="beijing" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+			</el-row>
+
+			<el-row>
+				<el-col :span="12">
+					<el-form-item label="设备ID" prop="name">
+						<el-input v-model.trim="formData.name" placeholder="请输入场景名称" />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12">
+					<el-form-item label="设备编码" prop="name">
+						<el-input v-model.trim="formData.name" placeholder="请输入场景名称" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+
+
+			<el-row>
+				<el-col :span="12">
+					<el-form-item label="所属区域" prop="area">
+						<el-cascader :options="orgData"
+							:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
+							placeholder="请选择区域" clearable class="w100" v-model="ruleForm.area">
+							<template #default="{ node, data }">
+								<span>{{ data.name }}</span>
+								<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+							</template>
+						</el-cascader>
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12">
+					<el-form-item label="安装时间">
+						<el-date-picker v-model="formData.date" type="date" placeholder="请选择时间" class="w100" clearable />
+					</el-form-item>
+				</el-col>
+			</el-row>
+
+
+
+
+
+
+
+			<el-form-item label="详细地址">
+				<el-input v-model.trim="formData.name" placeholder="请输入详细地址" />
+			</el-form-item>
+
+
+			<el-form-item label="地图坐标">
+				<el-row>
+					<el-col :span="7" class="mr10">
+						<el-select v-model="formData.name" placeholder="请选择坐标系" class="w100 " clearable>
+							<el-option label="Zone one" value="shanghai" />
+							<el-option label="Zone two" value="beijing" />
+						</el-select>
+					</el-col>
+
+					<el-col :span="7" class="mr10">
+						<el-input v-model.trim="formData.name" placeholder="经度" class="w100" />
+
+					</el-col>
+					<el-col :span="8">
+						<el-input v-model.trim="formData.name" placeholder="纬度" class="w100" />
+
+					</el-col>
+				</el-row>
+			</el-form-item>
+
+			<el-form-item label="建设单位">
+				<el-row>
+					<el-col :span="7" class="mr10">
+						<el-input v-model.trim="formData.name" placeholder="单位名称" class="w100" />
+
+					</el-col>
+
+					<el-col :span="7" class="mr10">
+						<el-input v-model.trim="formData.name" placeholder="单位联系人" class="w100" />
+
+					</el-col>
+					<el-col :span="8">
+						<el-input v-model.trim="formData.name" placeholder="联系电话" class="w100" />
+
+					</el-col>
+				</el-row>
+			</el-form-item>
+
+			<el-form-item label="管理单位">
+				<el-row>
+					<el-col :span="7" class="mr10">
+						<el-input v-model.trim="formData.name" placeholder="单位名称" class="w100" />
+
+					</el-col>
+
+					<el-col :span="7" class="mr10">
+						<el-input v-model.trim="formData.name" placeholder="单位联系人" class="w100" />
+
+					</el-col>
+					<el-col :span="8">
+						<el-input v-model.trim="formData.name" placeholder="联系电话" class="w100" />
+
+					</el-col>
+				</el-row>
+			</el-form-item>
+
+			<el-form-item label="维护单位">
+				<el-row>
+					<el-col :span="7" class="mr10">
+						<el-input v-model.trim="formData.name" placeholder="单位名称" class="w100" />
+
+					</el-col>
+
+					<el-col :span="7" class="mr10">
+						<el-input v-model.trim="formData.name" placeholder="单位联系人" class="w100" />
+
+					</el-col>
+					<el-col :span="8">
+						<el-input v-model.trim="formData.name" placeholder="联系电话" class="w100" />
+
+					</el-col>
+				</el-row>
+			</el-form-item>
+
+			<el-form-item label="设备类型">
+				<el-select v-model="formData.name" placeholder="请选择设备类型" class="w100 " clearable>
+							<el-option label="Zone one" value="shanghai" />
+							<el-option label="Zone two" value="beijing" />
+						</el-select>
+				</el-form-item>
+
+			
+			<el-form-item label="备注">
+				<el-input v-model.trim="formData.name" placeholder="备注" />
+			</el-form-item>
+
+
+
+		</el-form>
+
+
+
+
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="showDialog = false">取消</el-button>
+				<el-button type="primary" @click="onSubmit">确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, nextTick } from 'vue';
+import api from '/@/api/scene';
+import system from '/@/api/system';
+
+import { ruleRequired } from '/@/utils/validator';
+import { ElMessage } from 'element-plus';
+
+const emit = defineEmits(['getList']);
+
+const showDialog = ref(false);
+const formRef = ref();
+const orgData = ref();
+
+const baseForm = {
+	id: undefined,
+	name: '',
+	sceneType: "device",
+	description: '',
+
+};
+
+const formData = reactive({
+	...baseForm,
+});
+
+const ruleForm = {
+	name: [ruleRequired('场景名称不能为空')],
+};
+
+const onSubmit = async () => {
+	await formRef.value.validate();
+
+	const theApi = formData.id ? api.manage.edit : api.manage.add;
+
+	await theApi(formData);
+
+	ElMessage.success('操作成功');
+	resetForm();
+	showDialog.value = false;
+	emit('getList');
+};
+
+const resetForm = async () => {
+	Object.assign(formData, { ...baseForm });
+	formRef.value && formRef.value.resetFields();
+};
+
+const open = async (row: any) => {
+	resetForm();
+	showDialog.value = true;
+	nextTick(() => {
+		Object.assign(formData, { ...row });
+		system.org.getList({ status: 1 }).then((res: any) => {
+			orgData.value = res || [];
+		});
+	});
+};
+
+defineExpose({ open });
+</script>
+<style scoped lang="scss">
+.demo-form-inline .el-input {
+	--el-input-width: 320px;
+}
+</style>

+ 153 - 0
src/views/iot/device/dossier/index.vue

@@ -0,0 +1,153 @@
+<template>
+	<el-card shadow="hover">
+		<div class="search">
+			<el-form :inline="true" ref="queryRef" @keyup.enter="getList(1)">
+				<el-form-item label="场景名称:" prop="keyWord">
+					<el-input v-model="params.keyWord" placeholder="请输入场景名称" clearable size="default" style="width: 240px" />
+				</el-form-item>
+
+				<el-form-item label="触发方式" prop="sceneType" style="width: 200px;">
+					<el-select v-model="params.sceneType" placeholder="触发方式" clearable size="default" style="width: 240px">
+						<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 size="default" style="width: 240px">
+						<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 size="default" 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-button type="primary" v-auth="'add'" @click="addOrEdit()">
+						<el-icon>
+							<ele-FolderAdd />
+						</el-icon>
+						批量添加
+					</el-button>
+
+					<el-button type="danger" v-auth="'add'" @click="addOrEdit()">
+						<el-icon>
+							<ele-FolderAdd />
+						</el-icon>
+						批量删除
+					</el-button>
+
+				</el-form-item>
+			</el-form>
+		</div>
+		<el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
+			<el-table-column prop="id" label="设备名称" min-width="100" show-overflow-tooltip v-col="'id'"></el-table-column>
+			<el-table-column prop="name" label="设备ID" show-overflow-tooltip v-col="'name'"></el-table-column>
+			<el-table-column prop="sceneType" label="设备编码" align="center" v-col="'sceneType'">
+				<template #default="scope">
+					<el-tag size="small" v-if="scope.row.sceneType == 'device'">设备触发</el-tag>
+					<el-tag size="small" v-if="scope.row.sceneType == 'manual'">手动触发</el-tag>
+					<el-tag size="small" v-if="scope.row.sceneType == 'timer'">定时触发</el-tag>
+				</template>
+			</el-table-column>
+
+			<el-table-column prop="name" label="所属区域" show-overflow-tooltip v-col="'name'"></el-table-column>
+			<el-table-column prop="name" label="管理单位" show-overflow-tooltip v-col="'name'"></el-table-column>
+			<el-table-column prop="name" label="建设单位" show-overflow-tooltip v-col="'name'"></el-table-column>
+			<el-table-column prop="name" label="维护单位" show-overflow-tooltip v-col="'name'"></el-table-column>
+			<el-table-column prop="name" label="设备类型" show-overflow-tooltip v-col="'name'"></el-table-column>
+
+
+			<el-table-column prop="status" label="状态" align="center" v-col="'status'">
+				<template #default="scope">
+					<el-tag size="small" type="success" v-if="scope.row.status == 1">启用</el-tag>
+					<el-tag size="small" type="info" v-if="scope.row.status == 0">禁用</el-tag>
+				</template>
+			</el-table-column>
+
+			<el-table-column prop="createdAt" label="创建时间" width="160" align="center" v-col="'createdAt'"></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="toDetail(scope.row.id)">属性</el-button>
+					<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()" />
+		<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
+	</el-card>
+</template>
+
+<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 EditForm from './edit.vue';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const queryRef = ref();
+const router = useRouter();
+
+const editFormRef = ref();
+
+const { params, tableData, getList, loading } = useSearch<any[]>(api.manage.getList, 'Data', { keyWord: '' });
+getList();
+const toDetail = (id: number) => {
+	router.push(`/device/dossier/manage/${id}`)
+};
+
+const addOrEdit = async (row?: any) => {
+
+	if (row) {
+		editFormRef.value.open(row);
+		return;
+	} else {
+		editFormRef.value.open();
+	}
+};
+const onActionStatus = (item: any) => {
+	if (item.status == 0) {
+		api.manage.status({ id: item.id, status: 1 }).then((res: any) => {
+			getList();
+			ElMessage.success(res.message || '操作成功');
+		});
+	} else {
+		api.manage.status({ id: item.id, status: 0 }).then((res: any) => {
+			getList();
+			ElMessage.success(res.message || '操作成功');
+		});
+	}
+}
+const del = (row: any) => {
+	ElMessageBox.confirm('是否确认删除场景名称为:"' + row.name + '"的数据项?', '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.manage.del(row.id);
+		ElMessage.success('删除成功');
+		getList();
+	});
+};
+</script>

+ 7 - 1
src/views/iot/device/instance/detail.vue

@@ -374,6 +374,11 @@
             </el-form-item>
           </el-form>
         </el-tab-pane>
+
+        <el-tab-pane label="设备档案管理" name="8">
+          <Dossier></Dossier>
+        </el-tab-pane>
+
       </el-tabs>
     </div>
     <EditDic ref="editDicRef" @typeList="initData" />
@@ -406,6 +411,7 @@ import 'vue3-json-viewer/dist/index.css';
 import EditDic from './component/edit.vue';
 // import EditDic from '../product/component/editPro.vue';
 import EditAttr from '../product/component/editAttr.vue';
+import Dossier from '../dossier/index.vue';
 import EditFun from '../product/component/editFun.vue';
 import EditEvent from '../product/component/editEvent.vue';
 import EditTab from '../product/component/editTab.vue';
@@ -466,7 +472,7 @@ interface TableDataState {
 }
 export default defineComponent({
   name: 'deviceEditPro',
-  components: { SubDeviceMutipleBind, SubDevice, EditDic, EditAttr, EditFun, EditEvent, EditTab, devantd, ListDic, functionCom, setAttr },
+  components: { SubDeviceMutipleBind, SubDevice, EditDic, EditAttr, EditFun, EditEvent, EditTab, devantd, ListDic, functionCom, setAttr,Dossier },
 
   setup(prop, context) {
     const logqueryRef = ref();

+ 0 - 7
src/views/iot/scene/manage/edit.vue

@@ -1,10 +1,3 @@
-<!--
- * @Author: yukai
- * @Date: 2023-09-18 13:15:34
- * @LastEditors: 
- * @LastEditTime: 2023-11-02 10:36:07
- * @Description: 请填写简介
--->
 <template>
 	<el-dialog
 		class="api-edit"