邓洁 : 设备管理雏形

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: '',
-  remark: ''
+  serialNumber: '',
+  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">