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

<template>
  <div class="menu-content">
    <div class="gradient-text title">易涝隐患点</div>
    <div class="box1">
<!--      <div class="title-box">列表</div>-->
      <div class="date-box">
        <div class="text1">更新</div>
        <div class="text-box">
          <div class="text2">{{ timeArr[0] }}</div>
          <div class="text1">年</div>
          <div class="text2">{{ timeArr[1] }}</div>
          <div class="text1">月</div>
          <div class="text2">{{ timeArr[2] }}</div>
          <div class="text1">日</div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="box-left">
        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" style="width: 600px" @input="initData">
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
        <div class="btn" @click="handleCancel">取消</div>
      </div>
      <div class="btn2" @click="showMoreVideos">
        <div class="video-icon"></div>
        <div>全部视频</div>
      </div>
    </div>
    <div class="custom-table">
      <div class="table-header">
        <div class="td">
          <el-select
            v-model="queryParams.area"
            placeholder="所有区县"
            size="large"
            class="custom-select2"
            popper-class="custom-select-popper2"
            :teleported="false"
            @change="initData"
          >
            <el-option label="所有区县" value="" />
            <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.label" />
          </el-select>
        </div>
        <div class="td">易涝点名称</div>
        <div class="td">提供单位</div>
      </div>
      <div class="table-content">
        <div v-for="(item, index) in dataList" :key="index" class="tr" @click="handleShowDialog(item)">
          <div class="td">{{ item.area }}</div>
          <div class="td btn3">
            <div class="video-icon"></div>
            {{ item.flood_name }}
          </div>
          <div class="td">{{ item.unit }}</div>
        </div>
      </div>
    </div>
  </div>
  <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" />
  <NearbyVideos v-if="showNearbyVideos2" v-model="showNearbyVideos2" :getDataMethod="getDataMethod" />
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue';
import {
  getWaterloggedAllVideoInfo,
  getWaterloggedRoadsList,
  getWaterloggedRoadsUpdateTime
} from '@/api/globalMap/potentialFloodHazard';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
const getMap = inject('getMap');
const queryParams = reactive({
  area: '',
  keyword: ''
});
const dataList = ref([]);
const showNearbyVideos = ref(false);
const showNearbyVideos2 = ref(false);
const getDataMethod = ref(null);
let location = ref([]);
const initData = () => {
  getWaterloggedRoadsList(queryParams).then((res) => {
    dataList.value = res.data.list;
  });
};
const handleCancel = () => {
  queryParams.keyword = '';
  initData();
};
const showMoreVideos = () => {
  getDataMethod.value = getWaterloggedAllVideoInfo;
  showNearbyVideos2.value = true;
};
const handleShowDialog = (item) => {
  location.value = [item.lng, item.lat];
  getMap().setCenter(location.value);
  showNearbyVideos.value = true;
};
let timeArr = ref([]);
onMounted(() => {
  initData();
  getWaterloggedRoadsUpdateTime().then((res) => {
    const dateTimeStr = res.data.list[0].update_time;
    let parts = dateTimeStr.split(' ');
    timeArr.value = parts[0].split('-');
  });
});
</script>

<style lang="scss" scoped>
.menu-content {
  width: 1584px;
  height: 2066px;
  background: url('@/assets/images/map/rightMenu/potentialFloodHazard/dialog.png') no-repeat;
  padding: 130px 30px 20px 40px;
  font-size: 36px;
  position: relative;
  color: #ffffff;
  .box1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .title-box {
      width: 370px;
      height: 35px;
      background-image: url('@/assets/images/map/rightMenu/rainMonitor/titleBox.png');
      background-repeat: no-repeat;
      background-position: bottom left;
      font-size: 44px;
      color: #fff;
      padding-left: 50px;
      display: flex;
      align-items: center;
      margin-bottom: 30px;
    }
    .date-box {
      width: 672px;
      height: 144px;
      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/dateBox.png') no-repeat;
      display: flex;
      align-items: center;
      padding-left: 200px;
      .text-box {
        display: flex;
        align-content: center;
        padding-left: 15px;
      }
      .text1 {
        font-size: 36px;
      }
      .text2 {
        font-size: 40px;
        color: transparent;
        background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
        -webkit-background-clip: text;
        background-clip: text;
        display: inline-block;
        font-family: BEBAS-1;
        margin: 0 15px;
      }
    }
  }
  .box2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    .box-left {
      display: flex;
      .btn {
        width: 140px;
        height: 56px;
        background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin-left: 20px;
      }
    }
    .btn2 {
      width: 300px;
      height: 120px;
      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn2.png') no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin-left: 20px;
      color: #edfaff;
      font-size: 32px;
      .video-icon {
        width: 41px;
        height: 38px;
        background: url('@/assets/images/map/rightMenu/potentialFloodHazard/video.png') no-repeat;
        display: flex;
      }
    }
  }
}
.custom-table {
  .table-header {
    width: 1490px;
    height: 88px;
    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/header.png') no-repeat;
    display: flex;
    align-items: center;
    padding: 0 30px;
  }
  .td {
    &:nth-child(1) {
      width: 260px;
    }
    &:nth-child(2) {
      flex: 5;
    }
    &:nth-child(3) {
      flex: 2;
    }
  }
  .table-content {
    height: 1530px;
    overflow-y: auto;
    .tr {
      width: 1490px;
      height: 88px;
      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/tr.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      margin-top: 8px;
      padding: 0 30px;
      cursor: default;
      &:hover {
        background: url('@/assets/images/map/rightMenu/potentialFloodHazard/trActive.png') no-repeat;
      }
      .td {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .btn3 {
        cursor: pointer;
        color: #00d0ee;
        display: flex;
        .video-icon {
          width: 54px;
          height: 54px;
          background: url('@/assets/images/map/rightMenu/potentialFloodHazard/icon1.png') no-repeat;
        }
      }
    }
  }
}
.title {
  font-size: 60px;
  position: absolute;
  top: 30px;
  left: 160px;
}
</style>