邓洁 : 站点管理接口对接

src/api/site.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request.js'
+
+export const getSiteList = () => {
+  return request({
+    url: '/tunnel/site',
+    method: 'get'
+  })
+}
+export const getSiteDetail = (siteId) => {
+  return request({
+    url: `/tunnel/site/${siteId}`,
+    method: 'get'
+  })
+}
+export const editSite = (data) => {
+  return request({
+    url: '/tunnel/site',
+    method: 'put',
+    data
+  })
+}
+export const addSite = (data) => {
+  return request({
+    url: '/tunnel/site',
+    method: 'post',
+    data
+  })
+}
+export const deleteSite = (siteIdList) => {
+  return request({
+    url: `/tunnel/site/${siteIdList}`,
+    method: 'delete'
+  })
+}

src/components/manageBtn/index.vue

@@ -20,7 +20,6 @@ const btnList = ref([
     icon: 'sp_icon_zdgl.png',
     name: '站点管理'
   },
-
   {
     icon: 'sp_icon_sdgl.png',
     name: '隧道管理'

src/views/site/index.vue

@@ -10,7 +10,7 @@
         <div class="all-btn">
           全选
         </div>
-        <div class="all-btn del-btn">
+        <div class="all-btn del-btn" @click="handleMoreDelete">
           删除
         </div>
       </div>
@@ -19,7 +19,7 @@
       <div class="site-box" v-for="item in siteList">
         <div class="top">
           <span>站点名称：{{ item.siteName }}</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 class="left-img"></div>
@@ -42,7 +42,7 @@
             </div>
           </div>
         </div>
-        <div class="edit-btn" @click="handleEdit">
+        <div class="edit-btn" @click="handleEdit(item.siteId)">
           <div class="edit-icon"></div>
           <div>站点编辑</div>
         </div>
@@ -54,30 +54,31 @@
     </div>
     <el-dialog v-model="isVisited" width="1958px">
       <div class="siteId">
-        <span>{{title}}</span>
+        <span>{{ title }}</span>
       </div>
-      <el-form :model="form" :label-position="right" label-width="168px">
+      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px">
+        <el-form-item label="站点名称">
+          <el-input v-model="form.siteName" placeholder="请输入站点名称"/>
+        </el-form-item>
         <el-form-item label="站点地址">
           <el-input v-model="form.address" placeholder="请输入站点地址"/>
         </el-form-item>
-        <el-form-item label="站点名称">
-          <el-input v-model="form.name" placeholder="请输入站点名称"/>
-        </el-form-item>
         <el-form-item label="站点描述">
-          <el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 5, maxRows: 7 }" placeholder="请输入站点信息"/>
+          <el-input v-model="form.describe" type="textarea" :autosize="{ minRows: 5, maxRows: 7 }"
-        </el-form-item>
+                    placeholder="请输入站点信息"/>
-        <el-form-item label="备注">
-          <el-input v-model="form.remark" placeholder="请输入备注"/>
         </el-form-item>
       </el-form>
-      <div class="btns">
+
-        <div class="cancel-btn" @click="isVisited=false">
+      <template #footer>
-          取消
+        <div class="btns">
+          <div class="cancel-btn" @click="isVisited=false">
+            取消
+          </div>
+          <div class="sure-btn" @click="handleSubmit(formInstance)">
+            确定
+          </div>
         </div>
-        <div class="sure-btn">
+      </template>
-          确定
-        </div>
-      </div>
     </el-dialog>
     <div class="pagination">
       <span>首页</span>
@@ -88,59 +89,138 @@
 </template>
 
 <script setup>
+import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
+import {ElMessage, ElMessageBox} from "element-plus";
+
 const router = useRouter()
-const siteList = ref([
+const siteList = ref([])
-  {
+const siteIds = ref([])
-    siteName: '松江站',
+const siteNameList = ref([])
-    num: 1,
+const title = ref('新增站点')
-    sortTunnel: '一号隧道',
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    siteName: '松江站',
-    num: 1,
-    sortTunnel: '一号隧道',
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    siteName: '松江站',
-    num: 1,
-    sortTunnel: '一号隧道',
-    constructionLength: 500,
-    implementationLength: 10
-  }
-])
-const siteId = ref('iu78686')
-const siteManageId = ref('j98h0')
-const title=ref('新增站点')
 const isClick = ref(false);
 const isVisited = ref(false);
 const form = ref({
   address: '',
-  name: '',
+  siteName: '',
-  desc: '',
+  describe: ''
-  remark: ''
 });
-const handleClickSite = () => {
+const formRules = ref({
-  isClick.value = !isClick.value
+  siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
+})
+const formInstance = ref()
+const getList = () => {
+  getSiteList().then((res) => {
+    res.data.rows.map(item => {
+      item.checked = false
+    })
+    siteList.value = res.data.rows;
+  });
 }
-const goToAddTunnel=()=>{
+getList()
+const handleClickSite = (type) => {
+  if (type.checked) {
+    siteIds.value.push(type.siteId)
+    siteNameList.value.push(type.siteName)
+  } else {
+    siteIds.value.map((item, index) => {
+      if (item === type.siteId) {
+        siteIds.value.splice(index, 1)
+      }
+    })
+    siteNameList.value.map((item, index) => {
+      if (item === type.siteName) {
+        siteNameList.value.splice(index, 1)
+      }
+    })
+  }
+}
+const goToAddTunnel = () => {
   router.push('/tunnel')
 }
-const handleEdit=()=>{
+//重置from表单
-  title.value='编辑站点'
+const restFrom = () => {
-  isVisited.value=true
+  form.value = {
+    address: '',
+    siteName: '',
+    describe: ''
+  }
+}
+const handleEdit = (siteId) => {
+  title.value = '编辑站点'
+  restFrom()
+  getSiteDetail(siteId).then((res) => {
+    form.value = res.data;
+    isVisited.value = true
+  });
 }
 
-const handleAdd=()=>{
+const handleAdd = () => {
-  title.value='新增站点'
+  restFrom()
-  isVisited.value=true
+  title.value = '新增站点'
+  isVisited.value = true
+}
+const handleSubmit = (instance) => {
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    if (title.value === '编辑站点') {
+      editSite(form.value).then(() => {
+        isVisited.value = false
+        getList()
+      });
+    } else {
+      addSite(form.value).then(() => {
+        isVisited.value = false
+        getList()
+      });
+    }
+  })
+}
+const handleMoreDelete = () => {
+  ElMessageBox.confirm(`确认删除名称为${siteNameList.value}的站点吗?`, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteSite(siteIds.value).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success(res.msg)
+        getList()
+      } else {
+        ElMessage.error(res.msg)
+      }
+    })
+  })
 }
 </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;
+  left: 6.5px;
+  width: 25px;
+  height: 25px;
+  background-color: #05FEFF;
+  border-radius: 25px;
+}
+
 .siteId {
   display: flex;
   justify-content: center;
@@ -155,6 +235,8 @@ const handleAdd=()=>{
   margin-top: 80px;
 
   .cancel-btn {
+    display: flex;
+    justify-content: center;
     cursor: pointer;
     width: 220px;
     height: 80px;
@@ -162,12 +244,13 @@ const handleAdd=()=>{
     border: 2px solid #08B7B8;
     color: #08B7B8;
     line-height: 80px;
-    padding-left: 67px;
     font-size: 38px;
     box-sizing: border-box;
   }
 
   .sure-btn {
+    display: flex;
+    justify-content: center;
     cursor: pointer;
     width: 220px;
     height: 80px;
@@ -176,9 +259,9 @@ const handleAdd=()=>{
     border-radius: 11px;
     color: #FFFFFF;
     font-size: 38px;
-    padding-left: 67px;
   }
 }
+
 :deep(.el-dialog) {
   border: 2px solid #05FEFF;
   background: #0D6578;
@@ -229,6 +312,7 @@ const handleAdd=()=>{
 
 
 .site-bgc {
+  background-color: #072348;
   padding: 85px 0 0 0;
   width: 100%;
   height: 100%;
@@ -343,16 +427,6 @@ const handleAdd=()=>{
           border: 2px solid #05FEFF;
           border-radius: 25px;
           position: relative;
-
-          .clickColor {
-            position: absolute;
-            top: 7px;
-            left: 6.5px;
-            width: 25px;
-            height: 25px;
-            background-color: #05FEFF;
-            border-radius: 25px;
-          }
         }
       }
 
@@ -476,7 +550,7 @@ const handleAdd=()=>{
   .pagination {
     position: absolute;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     bottom: 80px;
     display: flex;
     align-items: center;

src/views/tunnel-manage/index.vue

@@ -1,7 +1,7 @@
 <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>
@@ -302,6 +302,7 @@ const getImageUrl = (name) => {
 }
 
 .tunnel-bgc {
+  background-color: #072348;
   padding: 85px 0 0 0;
   width: 100%;
   height: 100%;

src/views/tunnel/index.vue

@@ -244,6 +244,7 @@ initWebSocket();
 #main {
   height: 100%;
   width: 100%;
+  background-color: #072348;
   #tunnel-box {
     height: 100%;
   }