1.增加设备列表抽屉功能、增加表单公共组件

src/assets/styles/element-ui.scss

@@ -94,3 +94,7 @@
 .el-dropdown .el-dropdown-link{
   color: var(--el-color-primary) !important;
 }
+// 抽屉中的body内边距
+.el-drawer__body{
+  padding: $--el-drawer-padding-primary !important;
+}

src/assets/styles/variables.module.scss

@@ -43,10 +43,13 @@ $--color-danger: #F56C6C;
 $--color-info: #909399;
 
 $base-sidebar-width: 200px;
+// 抽屉中的body内边距
+$--el-drawer-padding-primary: var(--el-dialog-padding-primary, 0px);
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
+  drawerPaddingprimary:$--el-drawer-padding-primary;
   menuColor: $base-menu-color;
   menuLightColor: $base-menu-light-color;
   menuColorActive: $base-menu-color-active;

src/views/big/device/components/Wform.vue

@@ -0,0 +1,48 @@
+<!--
+ * @FilePath: \code\Goats-Cloud-ui\src\views\big\device\components\Wform.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-06-27 16:27:26
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+ <el-form :model="data" :label-position="config.labelPosition">
+    <el-form-item :label="item.label" v-for="item in config.formItem" :key="item.model" :label-width="item.labelWidth">
+      <el-input v-if="item.content.type=='input'" v-model="data[item.content.model]"  :readonly="item.content.readonly" :disabled="item.content.disabled"/>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue"
+const prop = defineProps({
+    config: {
+        type: Object,
+        default: {
+            labelPosition:'top',
+            formItem:[{
+            label:'默认',
+            labelWidth:'120px',
+            content:{
+                type:'input',
+                model:"name",
+                readonly:true,
+                disabled:true,
+            }
+            }]
+        },
+    },
+    data: {
+        type: Object,
+        default: {
+            name:''
+        },
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/big/device/components/devInfo.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-drawer :model-value="prop.visible" title="prop.title" :with-header="false" @close="handleClose" class="drawer-class">
+    <div class="info-header">
+        <h2>{{prop.title}}</h2>
+        <span>设备详情 </span>
+    </div>
+    <div  class="info-body">
+    <el-tabs v-model="activeinfo" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="详情" name="info">
+        <div style="margin: 0 20px;">
+            <Wform :config="formconfig" :data="formdata"></Wform>
+        </div>
+        
+    </el-tab-pane>
+    <el-tab-pane label="属性" name="attribute">User</el-tab-pane>
+    <el-tab-pane label="最新遥测数据" name="newDAata">Role</el-tab-pane>
+    <el-tab-pane label="pdf" name="pdf">Task</el-tab-pane>
+    </el-tabs>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue"
+import Wform from "./Wform.vue"
+import type { TabsPaneContext } from 'element-plus'
+
+const activeinfo=ref('info')
+const prop = defineProps({
+    visible: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: '信息详情',
+    },
+    form: {
+        type: Object,
+        default: {
+            id: '',
+            inspector: '',
+            assemblyGroup: '',
+            electricGroup: ''
+        },
+    }
+})
+const formconfig=ref({
+    labelPosition:'top',
+    formItem:[{
+            label:'名称',
+            labelWidth:'auto',
+            content:{
+                type:'input',
+                model:"name",
+                readonly:true,
+                disabled:true,
+            }
+            },
+            {
+            label:'设备配置',
+            labelWidth:'auto',
+            content:{
+                type:'input',
+                model:"name",
+                readonly:true,
+                disabled:true,
+            }
+            },
+            {
+            label:'机架号',
+            labelWidth:'auto',
+            content:{
+                type:'input',
+                model:"name",
+                readonly:true,
+                disabled:true,
+            }
+            },
+            {
+            label:'说明',
+            labelWidth:'auto',
+            content:{
+                type:'input',
+                model:"name",
+                readonly:true,
+                disabled:true,
+            }
+            }]
+})
+const formdata=ref({
+    name:'默认'
+})
+const handleClose = () => {
+    //baseFormRef.value.reset()
+    emit('closeDialog')
+}
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+// 刷新表格事件
+const emit = defineEmits([ 'closeDialog'])
+
+</script>
+
+<style lang="scss" scoped>
+
+.info-header{
+    width: 100%;
+    height: 130px;
+    background-color: #409EFF;
+    color: #fff;
+    padding-left: 20px;
+    padding-top: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    & h2{
+        margin: 0;
+        font-size: 30px;
+        font-weight: 600;
+    }
+}
+:deep(.el-tabs__nav){
+    margin-left: 20px;
+}
+</style>

src/views/big/device/index.vue

@@ -1,3 +1,12 @@
+<!--
+ * @FilePath: \code\Goats-Cloud-ui\src\views\big\device\index.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-06-17 08:22:57
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
 <template>
     <div class="app-container">
         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
@@ -64,6 +73,10 @@
                         <el-button link type="primary" v-hasPermi="['big:device:update']" icon="Document"
                             @click="handleAssembly(scope.row)"></el-button>
                     </el-tooltip>
+                    <el-tooltip content="设备详情" placement="top" v-if="scope.row.roleId !== 1">
+                        <el-button link type="primary" v-hasPermi="['big:device:info']" icon="Discount"
+                            @click="handleDevInfo(scope.row)"></el-button>
+                    </el-tooltip>
                     <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
                         <el-button link type="primary" v-hasPermi="['big:device:update']" icon="Edit"
                             @click="handleUpdate(scope.row.id)"></el-button>
@@ -85,6 +98,7 @@
         <el-dialog v-model="imgDialogVisible">
             <img w-full :src="dialogImageUrl" alt="Preview Image" class="img-preview" />
         </el-dialog>
+        <devInfo @closeDialog="devinfoopen = false" :visible="devinfoopen" :form="devinfoForm" :title="devinfoTitle"></devInfo>
     </div>
 </template>
   
@@ -98,6 +112,7 @@ import useDeviceStore from '@/store/modules/device'
 import add_edit from './components/add_edit.vue'
 import useUserStore from '@/store/modules/user'
 import assemblyVue from './components/assembly'
+import devInfo from './components/devInfo.vue'
 const store = useDeviceStore()
 const userStore = useUserStore()
 const { proxy } = getCurrentInstance();
@@ -139,6 +154,9 @@ const assemblyTitle = ref("设备装配信息")
 const assemblyOpen = ref(false)
 const typeList = ref([])
 const assemblyForm = ref({})
+const devinfoopen=ref(false)
+const devinfoTitle=ref('设备信息详情')
+const devinfoForm=ref({})
 /** 查询设备列表 */
 function getList() {
     loading.value = true;
@@ -203,6 +221,12 @@ function handleAssembly(row) {
     assemblyOpen.value = true;
     assemblyForm.value = row;
 }
+//设备详情
+function handleDevInfo(row) {
+    devinfoTitle.value= row.name;
+    devinfoopen.value = true;
+    devinfoForm.value = row;
+}
 
 /** 删除按钮操作 */
 function handleDelete(row) {