邓洁 : 设备管理及修复

src/views/tunnel-manage/index.vue

@@ -7,6 +7,9 @@
       </div>
       <div class="tunnel-title"></div>
       <div class="all-del-btn">
+        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
+          添加
+        </div>
         <div class="all-btn">
           全选
         </div>
@@ -84,7 +87,7 @@
     </el-dialog>
     <div class="pagination">
       <span>首页</span>
-      <el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
+      <el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next" />
       <span>尾页</span>
     </div>
   </div>
@@ -92,6 +95,7 @@
 
 <script setup>
 const router = useRouter()
+const showAddIcon = ref(true)
 const siteId = reactive(router.currentRoute.value.params.siteId)
 const siteList = ref([
   {
@@ -159,51 +163,49 @@ const siteList = ref([
     num: 1,
     constructionLength: 500,
     implementationLength: 10
-  },
-
-
+  }
 ])
 const iconsList = ref([
   {
-    icon: 'white-state-icon.png',
+    icon: 'sd_icon_fj.png',
     name: '风机',
     num: 2
   },
   {
-    icon: 'white-state-icon.png',
-    name: '风机',
-    num: 11
-  },
-  {
-    icon: 'white-state-icon.png',
-    name: '风机',
+    icon: 'sd_icon_sd.png',
+    name: '湿度',
     num: '无'
   },
   {
-    icon: 'white-state-icon.png',
-    name: '风机',
-    num: 2
+    icon: 'sd_icon_fy.png',
+    name: '风压',
+    num: 10
   },
   {
-    icon: 'white-state-icon.png',
-    name: '风机',
-    num: 11
-  },
-  {
-    icon: 'white-state-icon.png',
-    name: '风机',
+    icon: 'sd_icon_yq.png',
+    name: '氧气',
     num: '无'
   },
   {
-    icon: 'white-state-icon.png',
-    name: '风机',
+    icon: 'sd_icon_fs.png',
+    name: '风速',
     num: 11
   },
   {
-    icon: 'white-state-icon.png',
-    name: '风机',
+    icon: 'sd_icon_fc.png',
+    name: '粉尘',
+    num: 1
+  },
+  {
+    icon: 'sd_icon_wd.png',
+    name: '温度',
     num: 11
   },
+  {
+    icon: 'sd_icon_qt.png',
+    name: '有害气体',
+    num: '无'
+  },
 ])
 const title = ref('新增隧道')
 const isVisited = ref(false);
@@ -215,12 +217,13 @@ const form = ref({
   tunnelLength: '',
   remarks: ''
 });
+
 const handleEdit = () => {
   title.value = '编辑隧道'
   isVisited.value = true
 }
 const handleEditDevice = () => {
-  router.push('/device/'+1)
+  router.push('/device/' + 1)
 }
 
 const handleAdd = () => {
@@ -299,37 +302,6 @@ const handleClickSite = (type) => {
   color: #FFFFFF;
 }
 
-.btns {
-  display: flex;
-  justify-content: space-around;
-  margin-top: 80px;
-
-  .cancel-btn {
-    cursor: pointer;
-    width: 220px;
-    height: 80px;
-    border-radius: 11px;
-    border: 2px solid #08B7B8;
-    color: #08B7B8;
-    line-height: 80px;
-    padding-left: 67px;
-    font-size: 38px;
-    box-sizing: border-box;
-  }
-
-  .sure-btn {
-    cursor: pointer;
-    width: 220px;
-    height: 80px;
-    line-height: 80px;
-    background: #08B7B8;
-    border-radius: 11px;
-    color: #FFFFFF;
-    font-size: 38px;
-    padding-left: 67px;
-  }
-}
-
 .tunnel-bgc {
   background-color: #072348;
   padding: 85px 0 0 0;
@@ -393,12 +365,14 @@ const handleClickSite = (type) => {
   }
 
   .box-content {
+    height: 1850px;
     display: flex;
     flex-wrap: wrap;
     padding-left: 67px;
     padding-right: 70px;
     justify-content: space-between;
-
+    box-sizing: border-box;
+    overflow: hidden;
     .add-box {
       cursor: pointer;
       font-weight: bold;
@@ -419,7 +393,7 @@ const handleClickSite = (type) => {
 
     .site-box {
       margin-top: 50px;
-      //margin-right: 122px;
+      margin-right: 1.5%;
       padding: 40px 30px;
       width: 925px;
       height: 550px;
@@ -427,7 +401,7 @@ const handleClickSite = (type) => {
       //box-sizing: border-box;
       position: relative;
 
-      &:nth-child(3) {
+      &:nth-child(4n) {
         margin-right: 0;
       }
 
@@ -474,13 +448,13 @@ const handleClickSite = (type) => {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            margin-right:30px;
+            margin-right: 30px;
           }
         }
 
         .left-img {
           margin-top: 110px;
-          margin-right: 70px;
+          margin-right: 50px;
           width: 340px;
           height: 148px;
           background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
@@ -492,7 +466,7 @@ const handleClickSite = (type) => {
           display: flex;
           align-items: center;
           justify-content: flex-start;
-          font-size: 34px;
+          font-size: 30px;
           color: #60DDDE;
           //margin-left: 175px;
 
@@ -538,10 +512,14 @@ const handleClickSite = (type) => {
               justify-content: space-between;
               align-items: center;
               color: #FFFFFF;
-              font-size: 36px;
-              margin-right: 27px;
+              font-size: 34px;
+              margin-right: 17px;
               margin-bottom: 30px;
 
+              &:first-child {
+                margin-right: 37px;
+              }
+
               &:nth-child(2n) {
                 margin-right: 0;
               }
@@ -563,7 +541,7 @@ const handleClickSite = (type) => {
     align-items: center;
     position: absolute;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     bottom: 50px;
     color: #60DDDE;
     font-size: 38px;