疏浚船舶列表

src/apis/hdsj.js

@@ -17,6 +17,14 @@ export function GetFstj(id) {
     }
   })
 }
+export  function  getDredgingShip(data) {
+  return request({
+    url: '/DigitalTwain/dredging/getDredgingShip',
+    method: "post",
+    data:data
+  })
+}
+
 
 export function GetFstjByDay(time, id) {
   return request({

src/views/hdsj/Index.vue

@@ -68,8 +68,8 @@
         <span class="pro-name">{{ currentProject.name }}</span>
         <span class="title2-right">工程概况</span>
         <div class="part1-item" v-for="item in data_gcgk.sta">
-          <img :src="item.iconUrl" alt="">
-          <div>
+          <img :src="item.iconUrl" @click="item.title=='疏浚船舶' ? handleShowBoats(true) : handleShowBoats(false)" alt="">
+          <div @click="item.title=='疏浚船舶' ? handleShowBoats(true) : handleShowBoats(false)" >
             <span>{{ item.title }}</span>
             <div>
               <span>{{ item.value }}</span>
@@ -142,6 +142,8 @@
 
       <BingTu v-if="showSuJun" :datas="listData_gcxx.value" :types="type" @closeFun="handleCloseBingTu" />
 
+        <BoatList  v-if="showBoats" :objId="currentProject.id"  @closeBoatList="handleShowBoats(false)"/>
+
       <ButonSuJun   @backFunction="handleShowBingTu" />
   </div>
 
@@ -169,7 +171,7 @@
   } from '@/utils/UIInteractions'
   import BingTu from "@/views/hdsj/cpns/BingTu"
   import ButonSuJun from "@/views/hdsj/cpns/ButtonSuJun"
-
+   import BoatList from "@/views/hdsj/cpns/BoatList";
   import bus from '@/utils/bus';
   import WaterDepthList from './cpns/WaterDepthList.vue'
   import { asideShow } from '@/store/index'
@@ -196,7 +198,7 @@ function handleShowBingTu()
   const listShow_whss = ref(false)
 
   const showSuJun = ref(false)
-
+  const showBoats = ref(false)
   function handlePickWhss(item) {
     data_ssgl.value[0].value = Math.abs(+item.height)
     ueCallCloseMaintain()
@@ -205,6 +207,11 @@ function handleShowBingTu()
     }, 500);
   }
 
+  function handleShowBoats(value)
+  {
+    showBoats.value=value
+  }
+
   function handleCloseBingTu() {
     showSuJun.value=false
   }

src/views/hdsj/cpns/BoatList.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="boat-dock-list">
+    <span class="dialog-close" @click="handleClose"></span>
+    <span class="title-dialog">疏浚船舶</span>
+    <template v-if="list.length>0">
+      <el-table :data="list" class="table-default dw-table"  stripe>
+        <el-table-column label="序号"  type="index" :dataformatas="indexCreate" />
+        <el-table-column label="船舶名称"    prop="SHIPNAME" min-width="100" show-overflow-tooltip />
+        <el-table-column label="船舶类型" prop="SHIPTYPE" min-width="100" show-overflow-tooltip />
+        <el-table-column label="吞吐量" prop="TONNAGE" min-width="100" show-overflow-tooltip />
+      </el-table>
+      <el-pagination
+            class="pagi-default"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="total"
+            layout="prev, pager, next"
+            @current-change="handlePageChange"
+            @size-change="handleSizeChange"
+    >
+    </el-pagination>
+    </template>
+
+    <div class="no-data" v-else>
+      无数据
+    </div>
+    <!-- <transition name="loading">
+      <div class="loading" v-if="showLoading">加载中...</div>
+    </transition> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BoatDockList',
+}
+</script>
+
+<script setup>
+  import { onMounted,onBeforeMount, reactive, ref } from 'vue'
+  import { getDredgingShip } from '@/apis/hdsj'
+  import {clearMap} from "@/utils/map/ArcgisUtil";
+  import { ElTable, ElTableColumn, ElPagination } from 'element-plus'
+  import 'element-plus/es/components/table/style/css'
+  import 'element-plus/es/components/table-column/style/css'
+  import 'element-plus/es/components/pagination/style/css'
+  const props = defineProps(['objId'])
+  // const showLoading = ref(false)
+
+  const list = ref([])
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+  const total = ref(0)
+
+  const reqs=ref({projectId:props.objId,index:currentPage.value,size:pageSize.value})
+
+  onMounted(()=>{
+    console.log("入参数据：",reqs.value)
+    getBoats(reqs.value)
+  })
+  const emit = defineEmits(['closeBoatList'])
+
+  function handleClose() {
+    emit('closeBoatList')
+  }
+  function  indexCreate(row, column, cellValue, index) {
+    return index + 1 + pageSize.value*(currentPage.value - 1)
+  }
+
+  function handlePageChange(val) {
+    currentPage.value = val
+    getBoats(reqs.value)
+  }
+
+  function handleSizeChange(val) {
+    // debugger
+    pageSize.value = val
+    currentPage.value = 1
+    getBoats(reqs.value)
+
+  }
+  function  getBoats(prop) {
+    getDredgingShip(prop).then(req=>{
+      console.log("出参数据：",req)
+          if (req.code=='200'){
+            console.log("出参数据：",req.data.Rows)
+            list.value=req.data.Rows
+          }
+    })
+  }
+
+</script>
+
+<style lang="scss" scoped>
+.boat-dock-list {
+  position: absolute;
+  top: 15vh;
+  right: 30vh;
+  box-sizing: border-box;
+  padding: 20px;
+  width: 423px;
+  height: 650px;
+  overflow: hidden;
+  background: url('@/assets/imgs/page_ssky/bg-popup.png') no-repeat;
+  background-size: 100% 100%;
+
+  .no-data {
+    position: absolute;
+    top: 50%;
+    width: calc(100% - 40px);
+    text-align: center;
+    color: #eee;
+  }
+
+  // .loading {
+  //   position: absolute;
+  //   bottom: 0;
+  //   left: 0;
+  //   width: 100%;
+  //   height: 40px;
+  //   text-align: center;
+  //   color: #ddd;
+  //   font-size: 14px;
+  //   line-height: 40px;
+  //   background: linear-gradient(0deg, rgb(26, 48, 86, 1) 0%, rgba(26, 48, 86, 0.2) 100%);
+  // }
+
+
+  // .loading-enter-active,.loading-leave-active{
+  //   transition: all 0.2s ease;
+  // }
+  // .loading-enter-from,.loading-leave-to {
+  //   opacity: 0;
+  //   transform: translateY(40px);
+  // }
+  .dw-table {
+    height: 90%;
+    padding-top: 2vh;
+    margin-bottom: 7px;
+    .el-table__body-wrapper::-webkit-scrollbar{
+      width: 0;
+      height: 0;
+    }
+  }
+
+}
+</style>