yjdp-web/src/views/globalMap/RightMenu/UAV.vue

<template>
  <div class="menu-content">
    <div class="gradient-text title">无人机资源</div>
    <div class="flex-box">
      <el-select
        v-model="planForm.planType"
        :teleported="false"
        class="custom-select"
        placeholder="请选择行政区"
        popper-class="custom-select-popper"
        size="large"
      >
        <el-option v-for="item in plan_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="custom-table">
      <div class="th">
        <div class="td">无人机名称</div>
        <div class="td">
          <div style="width: 201px">
            <el-select
              v-model="queryParams.area"
              placeholder="类型"
              size="large"
              class="custom-select2"
              popper-class="custom-select-popper2"
              :teleported="false"
            >
              <el-option label="多旋翼" value="" />
            </el-select>
          </div>
        </div>
      </div>
      <div class="table-content">
        <div v-for="(item, index) in droneResourcesData.listData" :key="index" class="tr">
          <div class="td">{{ item.drone_name }}</div>
          <div class="td">{{ item.drone_type }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getDroneResourcesList } from '@/api/globalMap/UAV';

// 请求参数
const queryParams = reactive({
  area: '',
  drone_type: ''
});

// 返回数据
const droneResourcesData = reactive({
  // time: '',
  // statusList: [],
  listData: []
});

// 获取数据
const initData = async () => {
  getDroneResourcesList(queryParams).then((res) => {
    droneResourcesData.listData = res.data.list;
  });
};
initData();

const planForm = reactive({
  planType: ''
});

// 固定的下拉选项数据
const plan_type = [
  { label: '茂南区', value: 'maonan' },
  { label: '高州市', value: 'gaozhou' },
  { label: '电白区', value: 'dianbai' },
  { label: '信宜市', value: 'xinyi' },
  { label: '化州市', value: 'huazhou' }
];

const dropdown_options = [{ label: '多旋翼', value: '多旋翼' }];
</script>

<style lang="scss" scoped>
.detail-container {
  font-size: 36px;
  .dialog-content {
    display: flex;
  }
  .info-box {
    width: 834px;
    height: 459px;
    background: url('@/assets/images/map/rightMenu/box2.png') no-repeat;
    padding: 11px;
    .info-header {
      width: 311px;
      height: 56px;
      padding-left: 50px;
      background: url(@/assets/images/map/rightMenu/titleBox1.png) no-repeat;
    }
    .info-content {
      padding: 0 37px 26px 37px;
      font-size: 32px;
      color: #a8ccde;
    }
    .info-item {
      display: flex;
      align-items: center;
      height: 72px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .box1 {
    width: 776px;
    height: 459px;
    display: flex;
    flex-direction: column;
    margin-left: 94px;
    margin-right: 110px;
    .box1-title {
      width: 372px;
      height: 54px;
      background: url('@/assets/images/map/rightMenu/titleBox2.png');
      padding-left: 65px;
      font-size: 44px;
      color: #f4f7fa;
    }
  }
  .box2 {
    margin-top: 45px;
    .box2-title {
      height: 54px;
      background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
      padding-left: 65px;
      font-size: 44px;
      color: #f4f7fa;
    }
  }
}

.menu-content {
  width: 1579px;
  height: 1394px;
  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
  padding: 130px 20px 20px 20px;
  font-size: 36px;
  position: relative;
  color: #000000;
}
.title {
  font-size: 60px;
  position: absolute;
  top: 30px;
  left: 160px;
}

.flex-box {
  display: flex;
  width: 100%;
  color: #fff;
  font-size: 38px;
  margin: 20px 0;
  .custom-select {
    width: 100%;
  }
}

.custom-table {
  width: 100%;
  height: 1030px;
  overflow-y: auto;
  overflow-x: hidden;
  .table-content {
    height: 880px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .th {
    width: 100%;
    height: 151px;
    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
  }
  .tr {
    width: 100%;
    height: 139px;
    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding-right: 20px;
    &:hover {
      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .td {
    flex: 1;
    color: #edfaff;
    font-size: 38px;
    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: 48px;
  }
  .text-green {
    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
  }
  .text-danger {
    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
  }
}

.gradient-text2 {
  color: transparent !important;
}
</style>