萤石摄像头

src/views/other/ys7Device/component/detail.vue

@@ -0,0 +1,149 @@
+<template>
+  <!-- 荧石摄像头详情抽屉 -->  
+  <div class="system-ys7Devices-detail">
+    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
+      <template #header>
+        <h4>荧石摄像头详情</h4>
+      </template>
+      <el-form ref="formRef" :model="formData" label-width="100px">          
+        <el-row>          
+          <el-col :span="12">
+            <el-form-item label="创建时间">{{ proxy.parseTime(formData.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-form-item>
+          </el-col>        
+          <el-col :span="12">          
+            <el-form-item label="设备串号">{{ formData.deviceSerial }}</el-form-item>          
+          </el-col>        
+          <el-col :span="12">          
+            <el-form-item label="设备名称">{{ formData.deviceName }}</el-form-item>          
+          </el-col>        
+          <el-col :span="12">          
+            <el-form-item label="设备类型">{{ formData.deviceType }}</el-form-item>          
+          </el-col>        
+          <el-col :span="12">          
+            <el-form-item label="状态">{{ formData.status }}</el-form-item>          
+          </el-col>        
+          <!-- <el-col :span="12">          
+            <el-form-item label="">{{ formData.defence }}</el-form-item>          
+          </el-col>         -->
+          <el-col :span="12">          
+            <el-form-item label="设备版本">{{ formData.deviceVersion }}</el-form-item>          
+          </el-col>        
+          <el-col :span="12">          
+            <el-form-item label="所属项目">{{ formData.projectId }}</el-form-item>          
+          </el-col>      
+        </el-row>      
+      </el-form>
+    </el-drawer>
+  </div>
+</template>
+<script lang="ts">
+  import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
+  import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';  
+  import {
+    listYs7Devices,
+    getYs7Devices,
+    delYs7Devices,
+    addYs7Devices,
+    updateYs7Devices,    
+  } from "/@/api/system/ys7Devices";  
+  import {
+    Ys7DevicesTableColumns,
+    Ys7DevicesInfoData,
+    Ys7DevicesTableDataState,
+    Ys7DevicesEditState,    
+  } from "/@/views/system/ys7Devices/list/component/model"
+  export default defineComponent({
+    name:"apiV1SystemYs7DevicesDetail",
+    components:{      
+    },
+    props:{      
+    },
+    setup(props,{emit}) {      
+      const {proxy} = <any>getCurrentInstance()
+      const formRef = ref<HTMLElement | null>(null);
+      const menuRef = ref();      
+      const state = reactive<Ys7DevicesEditState>({
+        loading:false,
+        isShowDialog: false,
+        formData: {          
+          id: undefined,          
+          createdAt: undefined,          
+          deviceSerial: undefined,          
+          deviceName: undefined,          
+          deviceType: undefined,          
+          status: undefined,          
+          defence: undefined,          
+          deviceVersion: undefined,          
+          projectId: undefined,          
+        },
+        // 表单校验
+        rules: {          
+          id : [
+              { required: true, message: "id不能为空", trigger: "blur" }
+          ],          
+        }
+      });
+        // 打开弹窗
+        const openDialog = (row?: Ys7DevicesInfoData) => {
+          resetForm();
+          if(row) {
+            getYs7Devices(row.id!).then((res:any)=>{
+              const data = res.data;              
+              state.formData = data;              
+            })
+          }
+          state.isShowDialog = true;
+        };
+        // 关闭弹窗
+        const closeDialog = () => {
+          state.isShowDialog = false;
+        };
+        // 取消
+        const onCancel = () => {
+          closeDialog();
+        };
+        const resetForm = ()=>{
+          state.formData = {            
+            id: undefined,            
+            createdAt: undefined,            
+            deviceSerial: undefined,            
+            deviceName: undefined,            
+            deviceType: undefined,            
+            status: undefined,            
+            defence: undefined,            
+            deviceVersion: undefined,            
+            projectId: undefined,            
+          }
+        };        
+        return {
+          proxy,
+          openDialog,
+          closeDialog,
+          onCancel,
+          menuRef,
+          formRef,          
+          ...toRefs(state),
+        };
+      }
+  })
+</script>
+<style scoped>  
+  .system-ys7Devices-detail :deep(.el-form-item--large .el-form-item__label){
+    font-weight: bolder;
+  }
+  .pic-block{
+    margin-right: 8px;
+  }
+  .file-block{
+    width: 100%;
+    border: 1px solid var(--el-border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+    margin-bottom: 5px;
+    padding: 3px 6px;
+  }
+  .ml-2{margin-right: 5px;}
+</style>