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

<template>
  <div class="menu-content">
    <div class="container">
      <div class="gradient-text title">台风视频</div>
    </div>
    <!--    <div class="section-box">-->
    <div class="title2">路径列表</div>
    <div style="display: flex; align-content: center; justify-content: flex-start">
      <span style="margin-right: 15px; white-space: nowrap; font-size: 38px; height: 100px">选择台风:</span>
      <el-select
        v-model="selectedYear"
        placeholder="请选择年份"
        class="custom-select"
        popper-class="custom-select-popper"
        :teleported="false"
        style="width: 1200px; margin-left: 30px"
        @change="handleYearChange"
      >
        <el-option v-for="year in yearList" :key="year" :label="year" :value="year"></el-option>
      </el-select>
      <el-select
        v-model="selectedTyphoon"
        placeholder="请选择台风名称"
        class="custom-select"
        popper-class="custom-select-popper"
        :teleported="false"
        style="width: 1200px; margin-left: 30px"
        @change="handleTyphoonChange"
      >
        <el-option v-for="typhoon in TyphoonList" :key="typhoon.id" :label="typhoon.typhoon_name" :value="typhoon.typhoon_name"></el-option>
      </el-select>
    </div>

    <div class="custom-table">
      <div class="th">
        <div class="td">过去时间</div>
        <div class="td">经纬度</div>
        <div class="td">位置</div>
        <div class="td">操作</div>
      </div>
      <div class="table-content">
        <div v-for="(item, index) in dataList" :key="item.id" class="tr">
          <div class="td">{{ parseTime(item.record_time) }}</div>
          <div class="td">{{ item.longitude }},{{ item.latitude }}</div>
          <div class="td">{{ item.record_address }}</div>
          <div class="td">
            <div class="text" @click="handleConnect(index, item)">周边视频</div>
          </div>
        </div>
      </div>
    </div>
    <Dialog v-if="showDialog" v-model="showDialog" draggable type="md" title="台风视频" hide-footer>
      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
        <HKVideo :dot_data="videoMonitorData" />
      </div>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getTyphoonList, getTyphoonTrajectory, getTyphoonYearList } from '@/api/globalMap/TyphoonVideo';

const selectedYear = ref(''); // selectedYear 用于存储用户选择的年份
const yearList = ref([]); // yearList 用于存储从 getTyphoonYearList 获取的年份列表
const TyphoonList = ref([]);
const selectedTyphoon = ref('');
const dataList = reactive([]); // 数据列表
const queryParams = reactive({
  typhoon_code: '',
  year_n: ''
});
let showDialog = ref(false);
let videoMonitorData = ref({});
const handleConnect = (index: number, item: any) => {
  videoMonitorData.value = item; // 将当前行数据赋值给videoMonitorData
  showDialog.value = true; // 显示弹窗
};
// 调用函数
onMounted(() => {
  initData();
});

const handleYearChange = async () => {
  if (selectedYear.value) {
    try {
      const typhoons = await getTyphoonList({ query: { year_n: selectedYear.value } });
      if (typhoons.code === 0) {
        TyphoonList.value = typhoons.rows;
        if (TyphoonList.value.length > 0) {
          selectedTyphoon.value = TyphoonList.value[0].typhoon_name; // 默认选择第一个台风
          initDataByTyphoon();
        } else {
          console.error('No typhoons found for the selected year');
        }
      } else {
        console.error('Failed to fetch typhoon list:', typhoons);
      }
    } catch (error) {
      console.error('Error fetching typhoon list:', error);
    }
  }
};
const handleTyphoonChange = async () => {
  if (selectedTyphoon.value && selectedYear.value) {
    initDataByTyphoon();
  }
};
const initDataByTyphoon = async () => {
  const typhoon = TyphoonList.value.find((t) => t.typhoon_name === selectedTyphoon.value);
  if (typhoon && typhoon.typhoon_code) {
    try {
      const trajectory = await getTyphoonTrajectory({ query: { typhoon_code: typhoon.typhoon_code } });
      if (trajectory.code === 0 && Array.isArray(trajectory.rows)) {
        dataList.splice(0, dataList.length, ...trajectory.rows);
      } else {
        console.error('Invalid response from server:', trajectory);
        dataList.splice(0, dataList.length); // 清空数据列表
      }
    } catch (error) {
      console.error('Error fetching typhoon trajectory:', error);
    }
  } else {
    console.error('No typhoon code found for selected typhoon name');
  }
};

const fetchData = async (apiFunction, params) => {
  try {
    const response = await apiFunction(params);
    if (response.code !== 0) {
      throw new Error('Invalid response from server');
    }
    return response.rows;
  } catch (error) {
    console.error('Error fetching data:', error);
    return [];
  }
};

const initData = async () => {
  try {
    const years = await fetchData(getTyphoonYearList, {});
    // 对获取到的年份进行降序排序，并选取第一个（即最新年份）
    yearList.value = years.map((item) => item.year_n).sort((a, b) => b - a);
    const latestYear = yearList.value[0]; // 获取最新年份
    if (latestYear) {
      selectedYear.value = latestYear; // 设置最新年份为默认选中值
      const typhoons = await fetchData(getTyphoonList, { query: { year_n: latestYear } });
      TyphoonList.value = typhoons;
      if (TyphoonList.value.length > 0) {
        selectedTyphoon.value = TyphoonList.value[0].typhoon_name; // 默认选择第一个台风
        const typhoonCode = TyphoonList.value[0].typhoon_code;
        if (typhoonCode) {
          const trajectory = await fetchData(getTyphoonTrajectory, { query: { typhoon_code: typhoonCode } });
          dataList.splice(0, dataList.length, ...trajectory);
        } else {
          console.error('No typhoon code found in the list');
        }
      } else {
        console.error('No typhoons found for the selected year');
      }
    } else {
      console.error('No year found in the list');
    }
  } catch (error) {
    console.error('Error initializing data:', error);
  }
};
</script>

<style lang="scss" scoped>
.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: #ffffff;
}

.custom-input {
  height: 60px;
  line-height: 40px;
}

.box-left {
  display: flex;
  margin-top: 30px;
  margin-bottom: 20px;
  .btn {
    width: 140px;
    min-width: 140px;
    height: 60px;
    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 20px;
    color: #ffffff;
    font-size: 32px;
  }
}

.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%);
  }
}

.title2 {
  font-size: 36px;
  height: 80px;
}

.title {
  font-size: 60px;
  position: absolute;
  top: 30px;
  left: 160px;
}

.text {
  cursor: pointer;
  font-size: 38px;
  color: #00e8ff;
  margin-right: 20px;
  &:last-child {
    margin-right: 0;
  }
}
</style>