邓洁: 隧道接口部分对接

src/api/tunnelManage.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request.js'
+
+export const getTunnelList = (params) => {
+  return request({
+    url: '/tunnel/tunnel/screen/list',
+    method: 'get',
+    params
+  })
+}
+export const editTunnel = (data) => {
+  return request({
+    url: '/tunnel/tunnel',
+    method: 'put',
+    data
+  })
+}
+export const addTunnel = (data) => {
+  return request({
+    url: '/tunnel/tunnel',
+    method: 'post',
+    data
+  })
+}
+export const deleteTunnel = (tunnelIdList) => {
+  return request({
+    url: `/tunnel/tunnel/${tunnelIdList}`,
+    method: 'delete'
+  })
+}

src/router/index.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 import NProgress from 'nprogress'//进度条
 import 'nprogress/nprogress.css'
 import { getToken } from '../utils/auth'
@@ -24,7 +24,7 @@ const routes = [
     },
   },
   {
-    path: '/edit',
+    path: '/edit/:tunnelId(\\d+)',
     name: 'tunneledit',
     component: () => import('@/views/edit/edit.vue'),
     meta: {
@@ -80,7 +80,7 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes,
 });
 router.beforeEach((to, form, next) => {

src/views/site/index.vue

@@ -170,7 +170,6 @@ const getList = () => {
     })
 
     siteList.value = res.data.rows;
-    console.log('res',siteList.value)
   });
 }
 getList()
@@ -223,14 +222,16 @@ const handleSubmit = (instance) => {
   instance.validate(async (valid) => {
     if (!valid) return
     if (title.value === '编辑站点') {
-      editSite(form.value).then(() => {
+      editSite(form.value).then((res) => {
         isVisited.value = false
         getList()
+        ElMessage.success(res.msg)
       });
     } else {
-      addSite(form.value).then(() => {
+      addSite(form.value).then((res) => {
         isVisited.value = false
         getList()
+        ElMessage.success(res.msg)
       });
     }
   })

src/views/tunnel-manage/index.vue

@@ -19,18 +19,17 @@
       </div>
     </div>
     <div class="box-content">
-      <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId"
-           @click="handleGoToEditTunnel(item.tunnelId)">
+      <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
         <div class="top">
           <span>{{ item.tunnelName }}</span>
-          <span>施工长度500米 隧道长度10公里</span>
+          <span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}公里</span>
           <el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
         </div>
         <div class="box-center">
           <div>
             <div class="left-img"></div>
             <div>
-              <div class="edit-btn" @click.stop="handleEdit">
+              <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.tunnelId)">
                 <div class="edit-icon"></div>
                 <div>隧道编辑</div>
               </div>
@@ -46,9 +45,9 @@
               <span>风机异常</span>
             </div>
             <div class="icons-block">
-              <div v-for="item in iconsList" :key="item.icon" class="icon-text">
-                <div :style="{ backgroundImage: 'url(' +getImageUrl(item.icon)+')' }" class="icon"></div>
-                <span>{{ item.name }}：{{ item.num }}</span>
+              <div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
+                <div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
+                <span>{{ equItem.name }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
               </div>
             </div>
           </div>
@@ -81,14 +80,16 @@
         <div class="cancel-btn" @click="isVisited=false">
           取消
         </div>
-        <div class="sure-btn">
+        <div class="sure-btn" @click="handleAddTunnel">
           确定
         </div>
       </div>
     </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 v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
+                     :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
+                     @current-change="handleCurrentChange"/>
       <span>尾页</span>
     </div>
   </div>
@@ -96,6 +97,8 @@
 
 <script setup>
 import {ElMessage, ElMessageBox} from "element-plus";
+import {getTunnelList} from "@/api/tunnelManage";
+import {deleteTunnel} from "../../api/tunnelManage";
 
 const router = useRouter()
 const showAddIcon = ref(true)
@@ -172,42 +175,50 @@ const iconsList = ref([
   {
     icon: 'sd_icon_fj.png',
     name: '风机',
-    num: 2
+    type: 'frequency',
+    num: 0
   },
   {
     icon: 'sd_icon_sd.png',
     name: '湿度',
-    num: '无'
+    type: 'humidness',
+    num: 0
   },
   {
     icon: 'sd_icon_fy.png',
     name: '风压',
-    num: 10
+    type: 'windPressure',
+    num: 0
   },
   {
     icon: 'sd_icon_yq.png',
     name: '氧气',
-    num: '无'
+    type: 'oxygen',
+    num: 0
   },
   {
     icon: 'sd_icon_fs.png',
     name: '风速',
-    num: 11
+    type: 'windSpeed',
+    num: 0
   },
   {
     icon: 'sd_icon_fc.png',
     name: '粉尘',
+    type: 'dust',
     num: 1
   },
   {
     icon: 'sd_icon_wd.png',
     name: '温度',
-    num: 11
+    type: 'temperature',
+    num: 0
   },
   {
     icon: 'sd_icon_qt.png',
     name: '有害气体',
-    num: '无'
+    type: 'harmfulGas',
+    num: 0
   },
 ])
 const title = ref('新增隧道')
@@ -221,11 +232,33 @@ const form = ref({
   remarks: ''
 });
 const isEdit = ref(false)
-const bgImage = computed(() => (isEdit.value ? "zdgl_bj.png" : "sdgl_bjtq.png"));
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 12
+});
+const total = ref(10);
+const getList = () => {
+  getTunnelList({
+    ...pageInfo
+  }).then(res => {
+    if (res.code === 1000) {
+      total.value=res.data.total
+      tunnelList.value = res.data.rows
+    }
+  })
+}
+getList()
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+  getList()
+}
+const handleAddTunnel=()=>{
 
+}
 const handleGoToEditTunnel = (tunnelId) => {
   isEdit.value = true
-  router.push('/edit')
+  router.push('/edit/' + tunnelId)
 }
 const handleChooseAll = () => {
   tunnelList.value.map(item => {
@@ -234,13 +267,20 @@ const handleChooseAll = () => {
 }
 const handleEdit = () => {
   title.value = '编辑隧道'
-  isVisited.value = true
+  // isVisited.value = true
 }
 const handleEditDevice = () => {
   router.push('/device/' + 1)
 }
-
+const restFrom = () => {
+  form.value = {
+    address: '',
+    siteName: '',
+    describe: ''
+  }
+}
 const handleAdd = () => {
+  restFrom()
   title.value = '新增隧道'
   isVisited.value = true
 }
@@ -249,19 +289,19 @@ const getImageUrl = (name) => {
 }
 const handleClickSite = (type) => {
   if (type.checked) {
-    tunnelIds.value.push(type.siteId)
-    tunnelNameList.value.push(type.siteName)
+    tunnelIds.value.push(type.tunnelId)
+    tunnelNameList.value.push(type.tunnelName)
   } 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)
-    //   }
-    // })
+    tunnelIds.value.map((item, index) => {
+      if (item === type.tunnelId) {
+        tunnelIds.value.splice(index, 1)
+      }
+    })
+    tunnelNameList.value.map((item, index) => {
+      if (item === type.tunnelName) {
+        tunnelNameList.value.splice(index, 1)
+      }
+    })
   }
 }
 const handleMoreDelete = () => {
@@ -274,16 +314,16 @@ const handleMoreDelete = () => {
       type: 'warning',
       customClass: 'delBox'
     }).then(() => {
-      // deleteSite(tunnelIds.value).then(res => {
-      //   if (res.code === 1000) {
-      //     ElMessage.success(res.msg)
-      //     getList()
-      //     tunnelIds.value = []
-      //     tunnelNameList.value = []
-      //   } else {
-      //     ElMessage.error(res.msg)
-      //   }
-      // })
+      deleteTunnel(tunnelIds.value).then(res => {
+        if (res.code === 1000) {
+          ElMessage.success(res.msg)
+          getList()
+          tunnelIds.value = []
+          tunnelNameList.value = []
+        } else {
+          ElMessage.error(res.msg)
+        }
+      })
     })
   }
 }
@@ -441,9 +481,9 @@ const handleMoreDelete = () => {
       //box-sizing: border-box;
       position: relative;
 
-      &:hover {
-        background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
-      }
+      //&:hover {
+      //  background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
+      //}
 
       &:nth-child(4n) {
         margin-right: 0;

src/views/tunnel/index.vue

@@ -175,6 +175,7 @@ const manageSelect = (index) => {
 };
 const handleCommand = (item) => {
   currentSite.value = item.label
+  currentSiteId.value = item.value
   getTunnel(item.value)
 }
 const closeLeft = () => {