设备配置界面调整

src/views/deviceManagement/deviceConfig.vue

@@ -17,16 +17,22 @@
         :filter-node-method="filterNode"
         @node-click="handleNodeClick"
       >
-      <span slot-scope="{node,data}">
-                    <!-- <el-image :src="data.url"></el-image> -->
-                    <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
-                    <span class="operate_btns">
-                        <dropdown :events="data.id ? menuEvents : subMenuEvents" :data="{ node, data }"
-                            @itemClick="dropDownClick"></dropdown>
-                    </span>
-                </span>
+        <span slot-scope="{ node, data }">
+          <!-- <el-image :src="data.url"></el-image> -->
+          <span style="padding-left: 10px; vertical-align: text-bottom">{{
+            node.label
+          }}</span>
+          <span class="operate_btns">
+            <dropdown
+              :events="data.id ? menuEvents : subMenuEvents"
+              :data="{ node, data }"
+              @itemClick="dropDownClick"
+            ></dropdown>
+          </span>
+        </span>
       </el-tree>
-      <el-button class="newDevice"
+      <el-button
+        class="newDevice"
         @click="newDeviceType()"
         style="color: #fff; background: #3da0d6"
         ><i class="el-icon-s-order"></i>新建设备类别</el-button
@@ -39,9 +45,9 @@
           <el-button @click="dataImport()" class="import-btn"
             >批量导入</el-button
           >
-          <el-button @click="batchDelete" class="delete-btn"
+          <!-- <el-button @click="batchDelete" class="delete-btn"
             >批量删除</el-button
-          >
+          > -->
           <el-input
             class="search-input"
             v-model="searchInput"
@@ -124,7 +130,7 @@ import NewDeviceType from "./messageDailog/newDeviceType";
 import dataImport from "./messageDailog/dataImport";
 import addDevice from "./messageDailog/addDevice";
 import deviceEdit from "./messageDailog/deviceEdit";
-import dropdown from '@/components/Dropdown/index';
+import dropdown from "@/components/Dropdown/index";
 export default {
   components: {
     checkbox,
@@ -133,7 +139,7 @@ export default {
     dataImport,
     addDevice,
     deviceEdit,
-    dropdown
+    dropdown,
   },
   data() {
     return {
@@ -145,16 +151,12 @@ export default {
       },
       data: [
         {
-          id:1,
-          label: "楼层",
-          children: [
-            {
-              label: "A设备",
-            },
-            {
-              label: "B设备",
-            },
-          ],
+          id: 1,
+          label: "A设备",
+        },
+        {
+          id: 2,
+          label: "B设备",
         },
       ],
       defaultProps: {
@@ -162,15 +164,19 @@ export default {
         label: "label",
       },
       menuEvents: [
-                { label: '新建', funcName: 'addNode' }
-            ],
-            subMenuEvents: [
-                { label: '新建', funcName: 'addNode' },
-                { label: '上移', funcName: 'moveUp' },
-                { label: '下移', funcName: 'moveDown' },
-                { label: '编辑', funcName: 'editNode' },
-                { label: '删除', funcName: 'removeNode' }
-            ],
+        { label: "新建", funcName: "addNode" },
+        { label: "上移", funcName: "moveUp" },
+        { label: "下移", funcName: "moveDown" },
+        { label: "编辑", funcName: "editNode" },
+        { label: "删除", funcName: "removeNode" },
+      ],
+      subMenuEvents: [
+        { label: "新建", funcName: "addNode" },
+        { label: "上移", funcName: "moveUp" },
+        { label: "下移", funcName: "moveDown" },
+        { label: "编辑", funcName: "editNode" },
+        { label: "删除", funcName: "removeNode" },
+      ],
       tableData: [
         {
           deviceName: "摄像头",
@@ -224,7 +230,7 @@ export default {
   },
   methods: {
     searchTypeEvent() {},
-    dropDownClick(){},
+    dropDownClick() {},
     getTableData(val) {},
     handleSizeChange(val) {},
     filterNode(value, data) {
@@ -269,63 +275,58 @@ export default {
   display: flex;
   align-items: center;
 
-
   .left-pane {
-        width: 300px;
-        padding: 15px;
-        height: calc(100% - 30px);
-
-        .el-tree {
-          
-            margin-top: 10px;
-            height: calc(98% - 30px);
-            background-color: #FAFAFA;
+    width: 300px;
+    padding: 15px;
+    height: calc(100% - 30px);
 
+    .el-tree {
+      margin-top: 10px;
+      height: calc(98% - 30px);
+      background-color: #fafafa;
 
-            /deep/.el-tree-node__content {
-                align-items: center;
-                height: 30px;
-                cursor: pointer;
-                font-size: 16px;
-                position: relative;
-                color: #999999;
-                padding-top: 10px;
-                padding-left: 30px !important;
-
-                .operate_btns {
-                    position: absolute;
-                    right: 20px;
-                    display: none;
-                }
+      /deep/.el-tree-node__content {
+        align-items: center;
+        height: 30px;
+        cursor: pointer;
+        font-size: 16px;
+        position: relative;
+        color: #999999;
+        padding-top: 10px;
+        padding-left: 30px !important;
 
-                &:hover,
-                :focus-within {
-                    background-color: #f7fbff;
+        .operate_btns {
+          position: absolute;
+          right: 20px;
+          display: none;
+        }
 
-                    .operate_btns {
-                        display: inline;
-                    }
-                }
-            }
+        &:hover,
+        :focus-within {
+          background-color: #f7fbff;
 
-            /deep/.el-tree-node__children {
-                .el-tree-node__content {
-                    padding-left: 60px !important;
-                }
-            }
-            
+          .operate_btns {
+            display: inline;
+          }
         }
+      }
 
+      /deep/.el-tree-node__children {
+        .el-tree-node__content {
+          padding-left: 60px !important;
+        }
+      }
     }
-    .newDevice{
-        position: relative;
-        bottom: 50px;
-        width: 250px;
-        text-align: center;
-        font-size: 16px;
-        color: #fff;
-        background: #3da0d6;
-    }
+  }
+  .newDevice {
+    position: relative;
+    bottom: 50px;
+    width: 250px;
+    text-align: center;
+    font-size: 16px;
+    color: #fff;
+    background: #3da0d6;
+  }
 
   .right-pane {
     width: calc(100% - 300px);
@@ -452,13 +453,9 @@ export default {
     }
   }
 
-  /deep/.el-dialog {
-    height: 30vh;
-  }
-
-  /deep/.el-dialog__title {
-    margin-right: 330px;
-  }
+  // /deep/.el-dialog__title {
+  //   margin-right: 330px;
+  // }
 
   /deep/.el-dialog__headerbtn {
     font-size: 25px;

src/views/deviceManagement/deviceWarning.vue

@@ -12,25 +12,33 @@
         :filter-node-method="filterNode"
         @node-click="handleNodeClick"
       >
-      <span slot-scope="{node,data}">
-                    <!-- <el-image :src="data.url"></el-image> -->
-                    <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
-                    <span class="operate_btns">
-                        <dropdown :events="data.id ? menuEvents : subMenuEvents" :data="{ node, data }"
-                            @itemClick="dropDownClick"></dropdown>
-                    </span>
-                </span>
+        <span slot-scope="{ node, data }">
+          <!-- <el-image :src="data.url"></el-image> -->
+          <span style="padding-left: 10px; vertical-align: text-bottom">{{
+            node.label
+          }}</span>
+          <span class="operate_btns">
+            <dropdown
+              :events="data.id ? menuEvents : subMenuEvents"
+              :data="{ node, data }"
+              @itemClick="dropDownClick"
+            ></dropdown>
+          </span>
+        </span>
       </el-tree>
-      <el-button class="newWarning" style="color: #fff; background: #3da0d6" @click="newAlarmType"
+      <el-button
+        class="newWarning"
+        style="color: #fff; background: #3da0d6"
+        @click="newAlarmType"
         ><i class="el-icon-s-order"></i>新建告警类别</el-button
       >
     </div>
     <div class="right-pane">
       <div class="right-pane-inner">
         <div class="top">
-          <el-button @click="batchDelete" class="delete-btn"
+          <!-- <el-button @click="batchDelete" class="delete-btn"
             >批量删除</el-button
-          >
+          > -->
           <el-input
             class="search-input"
             v-model="searchInput"
@@ -88,7 +96,7 @@
 <script>
 import checkbox from "@/components/Checkbox/index";
 import page from "@/components/pagination/index";
-import dropdown from '@/components/Dropdown/index';
+import dropdown from "@/components/Dropdown/index";
 export default {
   components: { checkbox, page, dropdown },
   data() {
@@ -98,29 +106,33 @@ export default {
       input: "",
       data: [
         {
-          id:1,
+          id: 1,
           label: "紧急告警",
           children: [],
         },
         {
-          id:2,
+          id: 2,
           label: "重要告警",
         },
         {
-          id:3,
+          id: 3,
           label: "一般告警",
         },
       ],
       menuEvents: [
-                { label: '新建', funcName: 'addNode' }
-            ],
-            subMenuEvents: [
-                { label: '新建', funcName: 'addNode' },
-                { label: '上移', funcName: 'moveUp' },
-                { label: '下移', funcName: 'moveDown' },
-                { label: '编辑', funcName: 'editNode' },
-                { label: '删除', funcName: 'removeNode' }
-            ],
+        { label: "新建", funcName: "addNode" },
+        { label: "上移", funcName: "moveUp" },
+        { label: "下移", funcName: "moveDown" },
+        { label: "编辑", funcName: "editNode" },
+        { label: "删除", funcName: "removeNode" },
+      ],
+      subMenuEvents: [
+        { label: "新建", funcName: "addNode" },
+        { label: "上移", funcName: "moveUp" },
+        { label: "下移", funcName: "moveDown" },
+        { label: "编辑", funcName: "editNode" },
+        { label: "删除", funcName: "removeNode" },
+      ],
       defaultProps: {
         children: "children",
         label: "label",
@@ -167,7 +179,7 @@ export default {
   methods: {
     // 新建告警类别
     newAlarmType() {},
-    dropDownClick(){},
+    dropDownClick() {},
     handleClick() {
       //
     },
@@ -203,62 +215,58 @@ export default {
   align-items: center;
 
   .left-pane {
-        width: 300px;
-        padding: 15px;
-        height: calc(100% - 30px);
+    width: 300px;
+    padding: 15px;
+    height: calc(100% - 30px);
 
-        .el-tree {
-          
-            margin-top: 10px;
-            height: calc(98% - 30px);
-            background-color: #FAFAFA;
+    .el-tree {
+      margin-top: 10px;
+      height: calc(98% - 30px);
+      background-color: #fafafa;
 
+      /deep/.el-tree-node__content {
+        align-items: center;
+        height: 30px;
+        cursor: pointer;
+        font-size: 16px;
+        position: relative;
+        color: #999999;
+        padding-top: 10px;
+        padding-left: 30px !important;
 
-            /deep/.el-tree-node__content {
-                align-items: center;
-                height: 30px;
-                cursor: pointer;
-                font-size: 16px;
-                position: relative;
-                color: #999999;
-                padding-top: 10px;
-                padding-left: 30px !important;
-
-                .operate_btns {
-                    position: absolute;
-                    right: 20px;
-                    display: none;
-                }
-
-                &:hover,
-                :focus-within {
-                    background-color: #f7fbff;
+        .operate_btns {
+          position: absolute;
+          right: 20px;
+          display: none;
+        }
 
-                    .operate_btns {
-                        display: inline;
-                    }
-                }
-            }
+        &:hover,
+        :focus-within {
+          background-color: #f7fbff;
 
-            /deep/.el-tree-node__children {
-                .el-tree-node__content {
-                    padding-left: 60px !important;
-                }
-            }
-            
+          .operate_btns {
+            display: inline;
+          }
         }
+      }
 
+      /deep/.el-tree-node__children {
+        .el-tree-node__content {
+          padding-left: 60px !important;
+        }
+      }
     }
-    
-    .newWarning{
-        position: relative;
-        bottom: 50px;
-        width: 250px;
-        text-align: center;
-        font-size: 16px;
-        color: #fff;
-        background: #3da0d6;
-    }
+  }
+
+  .newWarning {
+    position: relative;
+    bottom: 50px;
+    width: 250px;
+    text-align: center;
+    font-size: 16px;
+    color: #fff;
+    background: #3da0d6;
+  }
   .right-pane {
     width: calc(100% - 300px);
     height: 100%;

src/views/deviceManagement/messageDailog/addDevice.vue

@@ -5,8 +5,8 @@
       class="dialog"
       title="添加设备"
       :visible.sync="dialogVisible"
-      width="25%"
-      center
+      width="460px"
+      left
     >
       <el-divider></el-divider>
       <div class="container">
@@ -47,7 +47,7 @@
       <div slot="footer" class="dialog-footer">
         <el-button
           @click="dialogVisible = false"
-          style="background: #b3b3b3; color: #fff"
+          style="background: #2ea8e6; color: #fff"
           >取消</el-button
         >
         <el-button type="primary" style="background: #2ea8e6">确认</el-button>
@@ -112,25 +112,26 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
-  height: 450px;
+  height: 400px;
   width: 95%;
-  margin-left: 2.5%;
+  // margin-left: 2.5%;
   border: 0.5px solid rgb(247, 245, 243);
-  margin-top: 20px;
+  // margin-top: 20px;
   display: flex;
 
   .leftpane {
-    width: 150px;
+    width: 100px;
 
     .el-tree {
-      height: 450px;
+      width: 110px;
+      height: 100%;
       background-color: rgb(247, 245, 243);
     }
   }
 
   .rightpane {
     .search {
-      width: 250px;
+      width: 250.8px;
       margin-left: 60px;
 
       /deep/.el-input__inner {
@@ -199,14 +200,13 @@ export default {
   width: 280px;
 }
 
-/deep/.el-dialog {
-  height: 30vh;
-}
 
-/deep/.el-dialog__title {
-  margin-right: 330px;
+/deep/.el-dialog__header {
+    padding-bottom:0;
+    color:#333333;
 }
 
+
 /deep/.el-dialog__headerbtn {
   font-size: 25px;
 }
@@ -224,7 +224,7 @@ export default {
 }
 
 /deep/.el-dialog__footer {
-  margin-top: -20px;
+  text-align: center;
 }
 
 .el-button {

src/views/deviceManagement/messageDailog/dataImport.vue

@@ -5,11 +5,42 @@
       class="dialog"
       title="批量导入数据"
       :visible.sync="dialogVisible"
-      width="25%"
-      center
+      width="375px"
+      left
     >
       <el-divider></el-divider>
-      <el-timeline>
+      <div class="batch-import-step">
+        <el-steps direction="vertical" :active="1">
+          <el-step title="下载 Excel 模板">
+            <template slot="description">
+              <div
+                style="line-height: 30px; cursor: pointer; font-size: 14px"
+                @click="downloadTemplate"
+              >
+                点击下载《A设备导入模板》
+              </div>
+            </template>
+          </el-step>
+          <el-step title="编辑 Excel 模板"></el-step>
+          <el-step title="上传已编辑好的 Excel 模板"></el-step>
+        </el-steps>
+      </div>
+      <div class="upload-box">
+        <el-input
+          v-model="input"
+          placeholder="文件名称"
+          style="position: absolute; left: 25px; top: 10px; width: 220px"
+        ></el-input>
+        <el-upload
+          :action="action"
+          style="position: absolute; right: -6px; top: -14px"
+        >
+          <el-button type="primary" style="background: #2ea8e6"
+            >选择文件</el-button
+          >
+        </el-upload>
+      </div>
+      <!-- <el-timeline>
         <el-timeline-item
           >下载 Excel 模板
           <el-button
@@ -28,12 +59,20 @@
         </el-timeline-item>
         <el-timeline-item>编辑 Excel 模板</el-timeline-item>
         <el-timeline-item>上传已编辑好的 Excel 模板</el-timeline-item>
-      </el-timeline>
+      </el-timeline> -->
+
       <div slot="footer" class="dialog-footer">
-        <el-input v-model="input" placeholder="文件名称"></el-input>
-        <el-upload :action="action">
-          <el-button type="primary" style="background: #2ea8e6;">选择文件</el-button>
-        </el-upload>
+        <el-button
+          @click="dialogVisible = false"
+          style="background: #2ea8e6; color: #fff"
+          >取消</el-button
+        >
+        <el-button
+          type="primary"
+          style="background: #2ea8e6"
+          @click="confirmEvent"
+          >确认</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -59,20 +98,22 @@ export default {
       ],
     };
   },
-  methods: {},
+  methods: {
+    confirmEvent() {
+      console.log("确认导入");
+    },
+    downloadTemplate() {},
+  },
 };
 </script>
 <style lang="less" scoped>
 /deep/.el-dialog {
-  height: 500px !important;
+  height: 420px !important;
 }
 
-/deep/.el-dialog {
-  height: 30vh;
-}
-
-/deep/.el-dialog__title {
-  margin-right: 330px;
+/deep/.el-dialog__header {
+  padding-bottom: 0;
+  color: #333333;
 }
 
 /deep/.el-dialog__headerbtn {
@@ -81,27 +122,34 @@ export default {
 
 /deep/.el-dialog__body {
   padding: 0;
-}
-
-/deep/.el-dialog__footer {
-  margin-top: -40px;
-}
-
-.el-timeline {
-  margin: 40px 0 0 80px;
-  list-style: none;
-  font-size: 18px;
-
-  .el-timeline-item {
+  .batch-import-step {
+    height: 180px;
     position: relative;
-    padding-bottom: 80px;
+    left: 40px;
+    margin-bottom: 10px;
   }
-
-  /deep/.el-timeline-item__content {
-    display: grid;
+  .upload-box {
+    height: 40px;
+    position: relative;
   }
 }
 
+// .el-timeline {
+//   margin-left:50px;
+//   // margin: 40px 0 0 80px;
+//   list-style: none;
+//   font-size: 18px;
+
+//   .el-timeline-item {
+//     position: relative;
+//     // padding-bottom: 80px;
+//   }
+
+//   /deep/.el-timeline-item__content {
+//     display: grid;
+//   }
+// }
+
 /deep/.el-divider--horizontal {
   display: block;
   height: 1px;
@@ -110,23 +158,6 @@ export default {
   margin-left: 2.5%;
 }
 
-.dialog-footer {
-  display: flex;
-  margin-left: 10px;
-
-  /deep/.el-input {
-    height: 40px;
-    width: 300px;
-    margin-right: 10px;
-  }
-
-  /deep/.el-button {
-    margin: 0;
-    height: 40px;
-    width: 100px;
-  }
-}
-
 .el-button {
   width: 100px;
   height: 30px;

src/views/deviceManagement/messageDailog/deviceEdit.vue

@@ -5,11 +5,11 @@
       class="dialog"
       title="设备编辑"
       :visible.sync="dialogVisible"
-      width="470px"
-      center
+      width="460px"
+      left
     >
       <el-divider></el-divider>
-      <div style="height: 470px">
+      <div style="height: 530px">
         <el-scrollbar style="height: 100%">
           <el-form
             ref="form"
@@ -17,48 +17,77 @@
             label-position="left"
             label-width="75px"
           >
-            <el-form-item label="设备名称：" prop="name">
+            <el-form-item label="设备名称：">
               <el-input v-model="form.name"></el-input>
             </el-form-item>
-            <el-form-item label="设备ID：" prop="id">
+            <el-form-item label="设备ID：">
               <el-input v-model="form.id"></el-input>
             </el-form-item>
-            <el-form-item label="设备类别：" prop="type">
-              <el-select v-model="form.type" placeholder="请选择">
-                <el-option value="test"></el-option>
+            <el-form-item label="设备类别：">
+              <el-select v-model="form.type" placeholder="请选择设备类别">
+                <el-option
+                  v-for="item in deviceTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="设备用途：" prop="use">
-              <el-select v-model="form.use" placeholder="请选择">
-                <el-option value="test"></el-option>
+            <el-form-item label="设备用途：">
+              <el-select v-model="form.use" placeholder="请选择设备用途">
+                <el-option
+                  v-for="item in purposeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="设备位置：" prop="position">
-              <el-select v-model="form.position" placeholder="请选择">
-                <el-option value="test"></el-option>
-              </el-select>
+            <el-form-item label="设备位置：">
+              <el-input
+                v-model="form.position"
+                placeholder="请输入位置"
+              ></el-input>
             </el-form-item>
-            <el-form-item
-              label-width="105px"
-              label="设备使用年限："
-              prop="life"
-            >
-              <el-input class="life" v-model="form.life"></el-input>
+            <el-form-item label-width="105px" label="设备使用年限：">
+              <el-input
+                class="life"
+                v-model="form.life"
+                placeholder="请输入使用时间"
+              ></el-input>
             </el-form-item>
-            <el-form-item label-width="90px" label="设备责任人：" prop="person">
-              <el-input class="person" v-model="form.person"></el-input>
+            <el-form-item label-width="90px" label="设备责任人：">
+              <el-input
+                class="person"
+                v-model="form.person"
+                placeholder="请输入负责人姓名"
+              ></el-input>
             </el-form-item>
-            <el-form-item label="公司名称：" prop="corpor_name">
+            <el-form-item label="公司名称：">
               <el-select v-model="form.corpor_name" placeholder="请选择">
-                <el-option value="test"></el-option>
+                <el-option
+                  v-for="item in companyOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="部门名称：" prop="depart_name">
+            <el-form-item label="部门名称：">
               <el-select v-model="form.depart_name" placeholder="请选择">
-                <el-option value="test"></el-option>
+                <el-option
+                  v-for="item in departOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label-width="45px" label="备注：" prop="note">
+            <el-form-item label-width="45px" label="备注：">
               <el-input
                 class="note"
                 type="textarea"
@@ -71,7 +100,6 @@
               style="width: 370px"
               :model="form.attachment"
               label="附件："
-              prop="attachment"
             >
               <el-upload class="attachment" drag :action="action" multiple>
                 <i class="el-icon-upload"></i>
@@ -91,7 +119,7 @@
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" style="background: #2ea8e6">下一个</el-button>
         <el-button
-          style="background: #b3b3b3; color: #fff"
+          style="background: #2ea8e6; color: #fff"
           @click="resetForm('form')"
           >重置</el-button
         >
@@ -125,6 +153,46 @@ export default {
         attachment: "",
       },
       action: "",
+      deviceTypeOptions: [
+        {
+          value: "0",
+          label: "不限",
+        },
+        {
+          value: "1",
+          label: "设备1",
+        },
+      ],
+      purposeOptions: [
+        {
+          value: "0",
+          label: "不限",
+        },
+        {
+          value: "1",
+          label: "用途1",
+        },
+      ],
+      companyOptions: [
+        {
+          value: "0",
+          label: "全部",
+        },
+        {
+          value: "1",
+          label: "北京电信规划设计院有限公司",
+        },
+      ],
+      departOptions: [
+        {
+          value: "0",
+          label: "全部",
+        },
+        {
+          value: "1",
+          label: "创新产品研发中心",
+        },
+      ],
     };
   },
   methods: {
@@ -144,12 +212,12 @@ export default {
 </script>
 <style lang="less" scoped>
 /deep/.el-dialog {
-  height: 600px !important;
+  height: 725px !important;
 }
 
 .el-form {
   .el-form-item {
-    margin: 20px 0 0 40px;
+    margin: 10px 0 0 40px;
     width: 400px;
 
     /deep/.el-form-item__label {
@@ -184,14 +252,19 @@ export default {
 
 .dialog-footer {
   display: flex;
+  margin-top: 10px;
 }
 
-/deep/.el-dialog {
-  height: 30vh;
-}
+// /deep/.el-dialog {
+//   height: 30vh;
+// }
 
-/deep/.el-dialog__title {
-  margin-right: 330px;
+// /deep/.el-dialog__title {
+//   margin-right: 330px;
+// }
+/deep/.el-dialog__header {
+  padding-bottom: 0;
+  color: #333333;
 }
 
 /deep/.el-dialog__headerbtn {
@@ -211,7 +284,7 @@ export default {
 }
 
 /deep/.el-dialog__footer {
-  margin-top: -20px;
+  padding: 0;
 }
 
 .el-button {

src/views/deviceManagement/messageDailog/newDeviceType.vue

@@ -1,102 +1,107 @@
 <template>
-    <div>
-        <el-dialog v-dialog-drag class="dialog" title="新建设备类别" :visible.sync="dialogVisible" width="25%" center>
-            <el-divider></el-divider>
-            <el-form :model="form" label-position="left" label-width="80px">
-                <el-form-item :model="form.typeName" label="类别名称：">
-                    <el-select v-model="value" placeholder="请输入">
-                        <el-option value="test"></el-option>
-                    </el-select>
-                </el-form-item>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="addType">确认</el-button>
-            </div>
-        </el-dialog>
-    </div>
+  <div>
+    <el-dialog
+      v-dialog-drag
+      class="dialog"
+      title="新建设备类别"
+      :visible.sync="dialogVisible"
+      width="360px"
+      left
+    >
+      <el-divider></el-divider>
+      <el-form label-position="left" label-width="80px">
+        <el-form-item :model="form.typeName" label="类别名称：">
+          <el-input v-model="value"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false" type="primary"
+          >取消</el-button
+        >
+        <el-button type="primary" @click="addType">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            value: '',
-            dialogVisible: false,
-            form: {
-                typeName: '',
-            },
-        }
-    },
-    methods: {
-        addType() {
-
-        },
-    }
-
-}
+  data() {
+    return {
+      value: "",
+      dialogVisible: false,
+      form: {
+        typeName: "",
+      },
+    };
+  },
+  methods: {
+    addType() {},
+  },
+};
 </script>
 <style lang="less" scoped>
 /deep/.el-dialog {
-    height: 350px !important;
+  height: 295px !important;
 }
 
 .el-select {
-    width: 280px;
+  width: 280px;
 }
 
 .el-form {
-    margin: 40px 0 0 20px;
 
-    .el-form-item {
-        padding-top: 20px;
-        margin-inline: 20px;
-        margin-bottom: 0;
-    }
+  .el-form-item {
+    margin-inline: 20px;
+    // margin-bottom: 0;
+  }
 
-    /deep/.el-form-item__label {
-        padding: 0;
-    }
+  /deep/.el-form-item__label {
+    padding: 0;
+  }
 
-    /deep/.el-form-item__content {
-        display: flex;
-    }
+  /deep/.el-form-item__content {
+    display: flex;
+  }
 }
 
+// /deep/.el-dialog {
+//   height: 30vh;
+// }
 
-/deep/.el-dialog {
-    height: 30vh;
-}
-
-/deep/.el-dialog__title {
-    margin-right: 330px;
+// /deep/.el-dialog__title {
+//   margin-right: 330px;
+// }'
+/deep/.el-dialog__header {
+  padding-bottom: 0;
+  color: #333333;
 }
 
 /deep/.el-dialog__headerbtn {
-    font-size: 25px;
+  font-size: 25px;
 }
 
 /deep/.el-dialog__body {
-    padding: 0;
+  padding: 0;
 }
 
 /deep/.el-divider--horizontal {
-    display: block;
-    height: 1px;
-    width: 95%;
-    margin: 0;
-    margin-left: 2.5%;
+  display: block;
+  height: 1px;
+  width: 95%;
+  margin: 0;
+  margin-left: 2.5%;
 }
 
 /deep/.el-dialog__footer {
-    margin-top: 80px;
+  margin-top: 60px;
 }
 
 .el-button {
-    width: 100px;
-    height: 30px;
-    text-align: center;
-    margin: 30px;
-    padding: 5px;
+  width: 100px;
+  height: 30px;
+  text-align: center;
+  margin: 30px;
+  padding: 5px;
 }
-</style>
+</style>