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

<template>
  <div class="menu-content">
    <div class="content-header">
      <i class="icon-uva" />
      <div class="box">
        <div class="gradient-text title">省政务领域无人机</div>
      </div>
    </div>
    <div class="flex-box">
     <RegionalSelect @confirm="handleRegionalChange" />
    </div>
    <div class="flex-box" style="align-items: center; margin-top: 40px">
      <el-input v-model="queryParams.keyword" class="custom-input" placeholder="请输入" @confirm="initData" />
      <div class="common-btn-primary2" style="margin-left: 20px" @onclick="initData" >搜索</div>
    </div>
    <div class="flex-box" style="margin-top: 40px; margin-bottom: 40px; position: relative">
      <div class="flex-title1">
        <div class="gradient-text">无人机标签</div>
      </div>
      <div class="flex-right" @click="showTagContent = true">
        <div class="flex-text1">展开</div>
        <i class="icon1" />
      </div>
      <DroneTags v-model="showTagContent" @confirm="handleDroneTagsConfirm" />
    </div>
    <div class="flex-box tr" style="margin-bottom: 0">
      <div class="flex-title2">
        无人机状态
        <i class="icon-info" />
        <div class="flex-content">
          <el-checkbox-group v-model="queryParams.status_list" class="custom-checkbox-group" @change="handleStatusChange" >
            <el-checkbox v-for="item in drone_status" :key="item.value" :label="item.label" :value="item.value" />
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="custom-table">
      <div class="table-content">
        <div v-for="(item, index) in droneResourcesData.listData" :key="index" class="tr" @click="handleItem(item.id)">
          <div class="td">{{ item.drone_name }}</div>
          <div class="td" style="width: 150px; flex: unset; text-align: center">{{item.status_text}}</div>
        </div>
      </div>
    </div>
    <DroneDetail v-if="showDetail" v-model="showDetail" :id="detailId" />
  </div>
</template>

<script setup lang="ts" name="UAV">
import { getDroneResourcesList, getRoughTimeStatusList } from '@/api/globalMap/UAV';
import DroneTags from '@/views/globalMap/RightMenu/UAV/DroneTags.vue';
import RegionalSelect from '@/views/globalMap/RightMenu/UAV/RegionalSelect.vue';
import DroneDetail from '@/views/globalMap/RightMenu/UAV/DroneDetail.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { drone_status } = toRefs<any>(proxy?.useDict('drone_status'));
// 请求参数
const queryParams = reactive({
  area: '',
  keyword: '',
  time: '',
  mode: '',
  type: '',
  status_list: ['1', '2']
});
let showDetail = ref(false);
let detailId = ref('');
let showTagContent = ref(false);
// 返回数据
const droneResourcesData = reactive({
  showDroneStatus: false,
  listData: []
});

// 无人机区域变化
const handleRegionalChange = (id) => {
  // console.log('handleRegionalChange:', id);
  queryParams.area = id;
  initData();
};

// 无人机标签变化
const handleDroneTagsConfirm = (data) => {
  queryParams.time = data.timeData;
  queryParams.mode = data.modeData.toString();
  queryParams.type = data.typeData.toString();
  console.log('handleDroneTagsConfirm:', queryParams);
  initData();
};

const handleStatusChange = (data) => {
  queryParams.status_list = data;
  initData();
};

// 获取数据
const initData = async () => {
  const params = {...queryParams, status: queryParams.status_list.join(",")};
  delete params['status_list'];
  console.log(params);
  getRoughTimeStatusList(params).then((res) => {
    droneResourcesData.listData = res.data.list;
  });
  /*
  getDroneResourcesList({ area: '', drone_type: '' }).then((res) => {
    droneResourcesData.listData = res.data.list;
  });
  */
};

// 详情
const handleItem = (id: string) => {
  detailId.value = id;
  showDetail.value = true;
};
initData();
</script>

<style lang="scss" scoped>
.menu-content {
  width: 1438px;
  height: 2124px;
  background: url('@/assets/images/map/rightMenu/uva/content.png') no-repeat;
  padding: 200px 50px 20px 50px;
  font-size: 36px;
  position: relative;
  color: #000000;
  .content-header {
    position: absolute;
    top: 30px;
    left: 50px;
    display: flex;
    align-items: center;
    .icon-uva {
      width: 144px;
      height: 162px;
      background: url('@/assets/images/map/rightMenu/uva/uva.png') no-repeat;
      background-size: 100% 100%;
    }
    .box {
      width: 795px;
      height: 95px;
      background: url('@/assets/images/map/rightMenu/uva/textBox.png') no-repeat left bottom;
      background-size: 100% 81px;
      padding-left: 80px;
      .title {
        font-size: 60px;
      }
    }
  }
}

.flex-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: #fff;
  font-size: 38px;
  margin: 20px 0;
  .custom-select {
    width: 100%;
  }
  .flex-right {
    display: flex;
    align-items: center;
    cursor: pointer;
    .flex-text1 {
      margin-right: 10px;
    }
  }
  .icon1 {
    display: inline-block;
    width: 27px;
    height: 16px;
    background: url('@/assets/images/map/rightMenu/uva/down.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .flex-title1 {
    width: 372px;
    height: 60px;
    background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat left bottom;
    background-size: 100% 54px;
    padding-left: 75px;
    .gradient-text {
      font-size: 44px;
      font-weight: normal;
    }
  }
  .flex-title2 {
    color: #a7cbda;
    font-size: 38px;
    display: flex;
    align-items: center;
    .icon-info {
      width: 27px;
      height: 27px;
      background: url('@/assets/images/map/rightMenu/uva/info.png') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      margin-left: 10px;
    }
    .flex-content {
      margin-left: 20px;
      :deep(.el-checkbox) {
        .el-checkbox__inner {
          width: 42px;
          height: 42px;
          background-color: transparent;
          border: 4px solid #86a2c2 !important;
        }
        .el-checkbox__label {
          font-size: 38px;
          color: #a7cbda;
        }
      }
      :deep(.el-checkbox.is-checked) {
        .el-checkbox__inner {
          background-color: #0063f7;
          border: 4px solid #0063f7 !important;
          &::after {
            border-width: 4px;
            width: 12px;
            height: 25px;
            top: -2px;
            left: 10px;
            border-color: #081c3f;
          }
        }
      }
    }
  }
}
.tr {
  width: 100%;
  height: 94px;
  background: url('@/assets/images/map/rightMenu/uva/tr.png') no-repeat;
  background-size: 100% 100%;
  padding: 0 30px;
}
.custom-table {
  width: 100%;
  .table-content {
    height: 1430px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .tr {
    width: 100%;
    height: auto;
    min-height: 78px;
    background: url('@/assets/images/map/rightMenu/uva/td.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding: 10px 20px;
    margin-top: 10px;
    &:hover {
      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .td {
    flex: 1;
    color: #edfaff;
    font-size: 38px;
    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>