yjhtgl-web/src/views/globalMap/RightMenu/Helicopter.vue

<template>
  <div class="menu-content">
    <div class="container">
      <div class="gradient-text common-dialog-title2">直升机</div>
      <!--    <div class="box2">-->
      <div class="box-left">
        <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
        <div class="btn" @click="handleCancel">取消</div>
      </div>
    </div>
    <div class="custom-table">
      <div class="th">
        <div class="td">直升机</div>
        <div class="td" style="width: 80px; flex: unset">操作</div>
      </div>
      <div class="table-content">
        <div v-for="item in dataList" :key="item.id" class="tr">
          <div class="td">{{ item.drone_name }}</div>
          <div class="td" style="width: 80px; flex: unset">
            <div class="text" @click="handleConnect">连线</div>
            <!--            <div class="text" @click="handleCollaborate(index, item)">协同</div>-->
            <div class="text" @click="handleTrack(item)">轨迹</div>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-pagination
          background
          :hide-on-single-page="true"
          layout="total, prev, pager, next"
          :total="total"
          :page-size="queryParams.size"
          :current-page="queryParams.current"
          @current-change="handleChangePage"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { onMounted, reactive } from 'vue';
import { getDroneResourcesList, getDroneResourcesTrajectory } from '@/api/globalMap/MobileCommandVehicle';
const trackPlayback = inject('trackPlayback');
// 数据列表,直接定义为数组
const dataList = ref([]);
// 入参
const queryParams = reactive({
  current: 1,
  size: 10,
  keywords: ''
});
const total = ref(0);
//调接口
const initData = () => {
  getDroneResourcesList({
    current: queryParams.current,
    size: queryParams.size,
    query: {
      keywords: queryParams.keywords
    }
  }).then((res) => {
    dataList.value = res.rows;
    total.value = res.total;
  });
};

const handleChangePage = (newNum) => {
  queryParams.current = newNum;
  initData();
};

// 取消按钮的逻辑，搜索框清空并重新加载数据
const handleCancel = () => {
  queryParams.keywords = '';
  queryParams.current = 1;
  initData();
};
const handleConnect = () => {};
const handleCollaborate = () => {};
// 轨迹
const handleTrack = (item) => {
  getDroneResourcesTrajectory(item.id).then((res) => {
    const trajectory = [];
    res.rows.forEach((item) => {
      trajectory.push([item.longitude, item.latitude]);
    });
    trackPlayback(trajectory);
  });
};
//调用函数
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.menu-content {
  width: 574px;
  height: 581px;
  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
  background-size: 100% 100%;
  padding: 60px 10px 10px 15px;
  font-size: 14px;
  position: relative;
  color: #ffffff;
  .box-left {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .btn {
      width: 59px;
      height: 23px;
      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin-left: 20px;
    }
  }
}
.custom-table {
  width: 100%;
  height: 470px;
  display: flex;
  flex-direction: column;
  .table-content {
    flex: 1;
    overflow-y: auto;
  }
  .th {
    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding: 7px 12px;
    height: 32px;
  }
  .tr {
    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding: 7px 12px;
    &:hover {
      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .td {
    flex: 1;
    color: #edfaff;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .td-text {
    /* 设置字体透明 */
    color: transparent;
    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
    -webkit-background-clip: text;
    /* 非Webkit内核浏览器需要使用标准前缀 */
    background-clip: text;
    font-family: 'YouSheBiaoTiHei';
    /* 设置线性渐变，从红色渐变到蓝色 */
    background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
    font-size: 14px;
  }
  .text-green {
    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
  }
  .text-danger {
    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
  }
}
.text {
  font-size: 14px;
  color: #00e8ff;
  margin-right: 7px;
  &:last-child {
    margin-right: 0;
  }
}

.flex-container {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中对齐 */
}
.text-item {
  font-size: 16px; /* 根据需要设置字体大小 */
  margin-bottom: 10px;
}

.button-item {
  font-size: 14px; /* 根据需要设置字体大小 */
  line-height: 1; /* 确保行高一致 */
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  .pagination-container {
    margin: 0;
  }
  :deep(.el-pagination__total) {
    color: #a7ccdf !important;
  }
  :deep(.el-pagination) {
    .btn-next,
    .btn-prev {
      background-color: transparent !important;
      border: none !important;
      .el-icon {
        color: #a7ccdf !important;
      }
    }
    .btn-prev:disabled,
    .btn-next:disabled {
      background-color: transparent !important;
      border: none;
    }
    .el-pager li {
      text-align: center;
      color: #a7ccdf !important;
      background-color: #0e3064 !important;
      border: 1px solid #0c57a7 !important;
      &:hover {
        background-color: #038dff !important;
        border: 1px solid #038dff !important;
      }
    }
    .el-pager li.is-active {
      background-color: #038dff !important;
      border: 1px solid #038dff !important;
    }
    .el-pagination__goto {
      color: #a7ccdf !important;
    }
  }
}
</style>