jayq_vue_newbigdata/src/views/analyse/center/peopleDetailDialog.vue

<template>
  <div class="container">
    <!-- 遮罩层区域 -->
    <div class="mask" @click="handleClick"></div>
    <!-- 弹窗内容区域 -->
    <div class="people_detail">
      <!-- 顶部标题区域 -->
      <div class="detail_top">
        <div class="top_title">
          <div class="title_icon"></div>
          <div class="title_text">靖安进出人流详情</div>
        </div>
        <!-- 关闭按钮区域 -->
        <div class="top_icon" @click="handleClick"></div>
      </div>
      <!-- 内容区域 -->
      <div class="detail_center">
        <!-- 折线图区域 -->
        <PeopleChart />
        <!-- 路口详细信息区域 -->
        <PeopleSlot
          :class="{ mr0: index === 3, ml200: index > 3 }"
          v-for="(item, index) in slotList"
          :key="index"
          :soltObj="item"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import PeopleChart from "./peopleChart.vue";
import PeopleSlot from "./peopleSlot.vue";
// 引入路口数据
import { junctionData } from "@/components/map/junctionData";
// 引入路口相关的接口
import {
  reqJtNumByDay,
  reqJtNumByTotal,
  reqJtTableData,
} from "@/api/junction/index";

const $emit = defineEmits(["changeShowClosePeople"]);

// 路口详细信息数组
const slotList = ref<any>([]);

// 定时器标识
const timer = ref();

onMounted(() => {
  // 获取路口数组数据
  getList();

  // 每5秒刷新数据
  timer.value = setInterval(() => {
    getList();
  }, 5000);
});

onUnmounted(() => {
  // 页面卸载时清除定时器
  clearInterval(timer.value);
});

// 获取路口数组数据
const getList = () => {
  slotList.value = junctionData;

  slotList.value.forEach(async (ele: any) => {
    // 获取累计人数
    ele.addUp = await getAddUp(ele.title);
    // 获取当日人数
    ele.currentDay = await getCurrentDay(ele.title);
    // 获取表格数据
    const res = await reqJtTableData(ele.title);
    ele.table = res.data;
  });
  // console.log(slotList.value);
};

// 获取累计人数
const getAddUp = async (place: string) => {
  const res = await reqJtNumByTotal();
  // console.log(res);

  // 匹配出累计人数
  let count = 0;
  res.data.forEach((ele: any) => {
    if (ele.place_name === place) {
      count = ele.num;
    }
  });
  return count;
};

// 获取当日人数
const getCurrentDay = async (place: string) => {
  const res = await reqJtNumByDay();
  // console.log(res);

  // 匹配出当日人数
  let count = 0;
  res.data.forEach((ele: any) => {
    if (ele.place_name === place) {
      count = ele.num;
    }
  });
  return count;
};

// 点击关闭图标回调
const handleClick = () => {
  $emit("changeShowClosePeople", false);
};
</script>

<style lang="scss" scoped>
.container {
  z-index: 9999;
  position: absolute;
  top: -254px;
  left: -1526px;
  width: 7072px;
  height: 1872px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: 0.6);

  .mask {
    position: absolute;
    top: 0;
    width: 7072px;
    height: 1872px;
  }
  .people_detail {
    position: relative;
    width: 2687px;
    height: 1302px;
    background-image: url(@/assets/images/9.png);
    background-size: 100% 100%;

    .detail_top {
      display: flex;
      align-items: center;
      margin-top: 51px;
      height: 96px;

      .top_title {
        display: flex;
        align-items: center;
        margin-left: 51px;
        width: 2521px;
        height: 96px;
        font-size: 40px;
        font-family: "庞门正道标题体";
        background-image: url(@/assets/images/10.png);
        background-size: 100% 100%;

        .title_icon {
          margin: 15px 22px 0 11px;
          width: 65px;
          height: 85px;
          background-image: url(@/assets/images/11.png);
          background-size: 100% 100%;
        }

        .title_text {
          background-image: linear-gradient(#00dbff, #00b3ff);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .top_icon {
        margin-left: 18px;
        width: 82px;
        height: 82px;
        cursor: pointer;
        background-image: url(@/assets/images/12.png);
        background-size: 100% 100%;
      }
    }

    .detail_center {
      display: flex;
      flex-wrap: wrap;
      padding-top: 61px;
      margin-left: 55px;
      width: 2577px;
      height: 1117px;
      overflow: hidden;

      .mr0 {
        margin: 0;
      }

      .ml200 {
        margin-left: 200px;
      }
    }
  }
}
</style>