Merge pull request 'dengjie' (#146) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/146

src/assets/styles/index.scss

@@ -419,25 +419,22 @@ html, body, #app, .el-container, .el-aside, .el-main {
     }
   }
 }
-//el-select 下拉框样式
-.dialog-dropdown{
 
-}
+//el-select 下拉框样式
 .el-select__popper {
   margin-top: -12px!important;
   background: #072247!important;
   border: 1px solid #0F82AF!important;
 }
 .el-popper {
-
+  max-width: 202px!important;
-  max-width: 204px!important;
   box-sizing: border-box;
 }
 .el-popper__arrow::before{
   display: none;
 }
 .el-select-dropdown{
-  width: 202px!important;
+   width: 200px!important;
 }
 .el-select-dropdown__item{
     color: #fff!important;
@@ -460,3 +457,28 @@ html, body, #app, .el-container, .el-aside, .el-main {
     }
   }
 }
+//input number 右侧加减隐藏
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+//checkbox
+.el-checkbox__inner {
+  width: 40px !important;
+  height: 40px !important;
+  border-radius: 25px!important;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  width: 25px;
+  height: 25px;
+  background-color: #05FEFF!important;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner::after {
+  display: none;
+}

src/components/content/tunnelScene/editEquComp/editDialog.vue

@@ -17,7 +17,6 @@
           :fit-input-width="true"
           filterable
           clearable
-          popper-class="dialog-dropdown"
           placeholder="请选择设备类型"
         >
           <el-option
@@ -35,7 +34,6 @@
           :fit-input-width="true"
           filterable
           clearable
-          popper-class="dialog-dropdown"
           placeholder="请选择设备类型"
         >
           <el-option
@@ -238,12 +236,12 @@ const equipment = {
       }
     }
     :deep(.el-select) {
-      //width: 284px;
+      width: 284px;
       //height: 51px;
       border: transparent;
     }
     :deep(.el-input--suffix) {
-      //width: 284px;
+      width: 284px;
       height: 51px;
       background: rgba(7, 35, 72, 0.79);
       border: 2px solid #0f82af;

src/router/index.js

@@ -51,7 +51,7 @@ const routes = [
     }
   },
   {
-    path: '/device',
+    path: '/device/:tunnelId(\\d+)',
     name: 'device',
     component: () => import('@/views/device-manage/index.vue'),
     meta: {

src/views/device-manage/index.vue

@@ -1,12 +1,40 @@
 <template>
   <div class="tunnel-bgc">
     <div class="box-top">
-      <div class="back-tunnel" @click="router.push('/')">
+      <div class="back-tunnel" @click="router.back(-1)">
         <div class="back-icon"></div>
         <span>返回</span>
       </div>
+      <div class="tunnel-name">
+        一号隧道
+      </div>
       <div class="tunnel-title"></div>
     </div>
+    <div class="device-content">
+      <div class="device-box">
+        <div class="box-left">
+<!--          <div>风机</div>-->
+<!--          <div>风压</div>-->
+<!--          <div>其他传感器</div>-->
+          <el-menu
+              default-active="1"
+          >
+            <el-menu-item index="1">
+              <span>风机</span>
+            </el-menu-item>
+            <el-menu-item index="2">
+              <span>风压</span>
+            </el-menu-item>
+            <el-menu-item index="3">
+              <span>其他传感器</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+        <div class="box-right">
+
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -15,6 +43,7 @@ const router = useRouter()
 </script>
 
 <style scoped lang="scss">
+
 .tunnel-bgc {
   padding: 85px 0 0 0;
   width: 100%;
@@ -23,7 +52,16 @@ const router = useRouter()
 
   .box-top {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
+
+    .tunnel-name {
+      margin-left: 120px;
+      height: 61px;
+      font-size: 46px;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: 61px;
+    }
 
     .back-tunnel {
       cursor: pointer;
@@ -47,5 +85,37 @@ const router = useRouter()
       }
     }
   }
+
+  .device-content {
+    display: flex;
+    justify-content: center;
+    padding-top: 246px;
+
+    .device-box {
+      display: flex;
+      width: 2194px;
+      height: 1321px;
+      background: #064B66;
+      border-radius: 20px;
+      border: 2px solid #05FEFF;
+      box-sizing: border-box;
+
+      .box-left {
+        width: 300px;
+        height: 1318px;
+        background: #0D5A7A;
+        border-radius: 20px 0px 0px 20px;
+        :deep(.el-menu){
+          border-right: none;
+          margin-top: 261px;
+          background-color: #0D5A7A;
+        }
+      }
+
+      .box-right {
+        flex: 1;
+      }
+    }
+  }
 }
-</style>
+</style>

src/views/site/index.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="tunnel-title"></div>
       <div class="all-del-btn">
-        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon">
+        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
           添加
         </div>
         <div class="all-btn">
@@ -98,7 +98,6 @@
 <script setup>
 import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
 import {ElMessage, ElMessageBox} from "element-plus";
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
 const router = useRouter()
 const siteList = ref([])
@@ -237,22 +236,6 @@ const handleCurrentChange = async (val) => {
 </script>
 
 <style scoped lang="scss">
-:deep(.el-checkbox__inner) {
-  width: 40px !important;
-  height: 40px !important;
-  border-radius: 25px;
-}
-
-:deep(.el-checkbox__input.is-checked .el-checkbox__inner ) {
-  width: 25px;
-  height: 25px;
-  background-color: #05FEFF;
-}
-
-:deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
-  display: none;
-}
-
 .clickColor {
   position: absolute;
   top: 7px;
@@ -418,9 +401,9 @@ const handleCurrentChange = async (val) => {
   .box-content {
     display: flex;
     flex-wrap: wrap;
-    padding-left: 70px;
+    padding-left: 100px;
-    padding-right: 70px;
+    padding-right: 100px;
-    //justify-content: space-between;
+    justify-content: space-between;
 
     .add-box {
       cursor: pointer;
@@ -442,7 +425,7 @@ const handleCurrentChange = async (val) => {
 
     .site-box {
       margin-top: 122px;
-      margin-right: 60px;
+      //margin-right: 60px;
       padding: 40px 50px;
       width: 1250px;
       height: 750px;

src/views/tunnel-manage/index.vue

@@ -20,7 +20,7 @@
         <div class="top">
           <span>{{ item.tunnelName }}</span>
           <span>施工长度500米 隧道长度10公里</span>
-          <div @click.stop="handleClickSite"><span :class="{ clickColor: isClick }"></span></div>
+          <el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
         </div>
         <div class="box-center">
           <div>
@@ -63,6 +63,15 @@
         <el-form-item label="隧道名称">
           <el-input v-model="form.name" placeholder="请输入隧道名称"/>
         </el-form-item>
+        <el-form-item label="序列号">
+          <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
+        </el-form-item>
+        <el-form-item label="隧道长度">
+          <el-input type="number" v-model="form.tunnelLength" placeholder="请输入隧道长度"/>
+        </el-form-item>
+        <el-form-item label="隧道备注">
+          <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
+        </el-form-item>
       </el-form>
       <div class="btns">
         <div class="cancel-btn" @click="isVisited=false">
@@ -198,18 +207,20 @@ const iconsList = ref([
 ])
 const title = ref('新增隧道')
 const isVisited = ref(false);
+const tunnelIds = ref([])
+const tunnelNameList = ref([])
 const form = ref({
-  address: '',
   name: '',
-  desc: '',
+  serialNumber: '',
-  remark: ''
+  tunnelLength: '',
+  remarks: ''
 });
 const handleEdit = () => {
   title.value = '编辑隧道'
   isVisited.value = true
 }
 const handleEditDevice = () => {
-  router.push('/device')
+  router.push('/device/'+1)
 }
 
 const handleAdd = () => {
@@ -219,6 +230,23 @@ const handleAdd = () => {
 const getImageUrl = (name) => {
   return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
 }
+const handleClickSite = (type) => {
+  if (type.checked) {
+    // tunnelIds.value.push(type.siteId)
+    // tunnelNameList.value.push(type.siteName)
+  } else {
+    // tunnelIds.value.map((item, index) => {
+    //   if (item === type.siteId) {
+    //     tunnelIds.value.splice(index, 1)
+    //   }
+    // })
+    // tunnelNameList.value.map((item, index) => {
+    //   if (item === type.siteName) {
+    //     tunnelNameList.value.splice(index, 1)
+    //   }
+    // })
+  }
+}
 </script>
 
 <style scoped lang="scss">