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

<template>
  <div class="center_analyse">
    <!-- 靖安进出人流区域 -->
    <div class="center_analyse_left">
      <div class="left_title">
        <div class="title_name">靖安进出人流</div>
        <div class="title_detail" @click="morePeopleDetail">
          <div>查看详情</div>
          <div class="title_icon"></div>
        </div>
      </div>
      <div class="left_info">
        <div class="info_box">
          <div class="now">实时（人次）</div>
          <div class="box">
            <div class="num" ref="realDom">{{ realValue }}</div>
          </div>
        </div>
        <div class="info_box">
          <div class="now">累计（人次）</div>
          <div class="box">
            <div class="num" ref="addDom">{{ addValue }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 公告区域 -->
    <div class="center_analyse_center">
      <div class="msg">
        <div class="msg_title">公告</div>
        <div class="msg_more" @click="handleMoreNews">查看更多</div>
      </div>
      <div class="info">
        <div class="info_icon"></div>
        <div class="info_detail">
          <div class="marquee" ref="marqueeDom">
            {{ noticeContent }}
          </div>
        </div>
        <div class="info_time">{{ noticeTime }}</div>
      </div>
    </div>

    <!-- 靖安景区人流区域 -->
    <div class="center_analyse_right">
      <div class="right_title">
        <div class="title_name">靖安景区人流</div>
        <div class="title_detail" @click="handleMoreScenic">
          <div class="title_icon"></div>
          <div>查看详情</div>
        </div>
      </div>
      <div class="right_info">
        <div class="info_box">
          <div class="now">累计（人次）</div>
          <div class="box">
            <div class="num" ref="addDom2">{{ addValue2 }}</div>
          </div>
        </div>
        <div class="info_box">
          <div class="now">实时（人次）</div>
          <div class="box">
            <div class="num" ref="realDom2">{{ realValue2 }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部线条区域 -->
    <div class="bottom_line"></div>

    <!-- 靖安进出人流查看详情弹窗区域 -->
    <Transition name="fade">
      <PeopleDetailDialog
        v-if="showPeopleDetail"
        @changeShowClosePeople="changeShowClosePeople"
      />
    </Transition>

    <!-- 新闻列表弹窗区域 -->
    <Transition name="fade">
      <NewsListDialog v-if="showNewsList" @changeShowClose="changeShowClose" />
    </Transition>

    <!-- 靖安景区人流查看详情弹窗区域 -->
    <Transition name="fade">
      <ScenicDetailDialog
        v-if="showScenicDetail"
        @changeShowCloseScenic="changeShowCloseScenic"
      />
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, onUnmounted } from "vue";
import NewsListDialog from "./newsListDialog.vue";
import ScenicDetailDialog from "./scenicDetailDialog.vue";
import PeopleDetailDialog from "./peopleDetailDialog.vue";
import { countUpNum } from "@/utils/countUpNum.ts";
// 引入新闻相关的接口
import { reqGetNewsList } from "@/api/news/index";
// 引入路口相关的接口
import { reqAllJtNumByDay, reqAllJtNumByTotal } from "@/api/junction/index";
// 引入景区相关的接口
import { reqGetAllNumByReal, reqGetAllNumByAdd } from "@/api/scenic/index";

// 进出人流实时Dom元素
const realDom = ref();
// 进出人流实时数据
const realValue = ref<number>(0);

// 进出人流累计Dom元素
const addDom = ref();
// 进出人流累计数据
const addValue = ref<number>(0);

// 景区人流实时Dom元素
const realDom2 = ref();
// 景区人流实时数据
const realValue2 = ref<number>(0);

// 景区人流累计Dom元素
const addDom2 = ref();
// 景区人流累计数据
const addValue2 = ref<number>(0);

// 靖安进出人流查看详情弹窗显示隐藏控制
const showPeopleDetail = ref<boolean>(false);

// 新闻列表弹窗显示隐藏控制
const showNewsList = ref<boolean>(false);

// 靖安景区人流查看详情弹窗显示隐藏控制
const showScenicDetail = ref<boolean>(false);

// 公告内容
const noticeContent = ref("");
// 公告时间
const noticeTime = ref("");
// 滚动DOM元素
const marqueeDom = ref();
// 完成动画需要的时间
const marqueeTime = ref();

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

onMounted(() => {
  // 获取所有路口当日人数
  getAllJtNumByDay(true);
  // 获取所有路口累计人数
  getAllJtNumByTotal(true);
  // 获取公告数据
  getNotice();
  // 获取所有景区当日人数
  getAllNumByReal(true);
  // 获取所有景区累计人数
  getAllNumByAdd(true);

  // 每10秒刷新数据
  timer.value = setInterval(() => {
    getAllJtNumByDay(false);
    getAllJtNumByTotal(false);
    getNotice();
    getAllNumByReal(false);
    getAllNumByAdd(false);
  }, 10000);
});

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

// 获取所有路口当日人数
const getAllJtNumByDay = async (flag: boolean) => {
  const res = await reqAllJtNumByDay();
  // console.log(res);
  realValue.value = res.data[0].num;
  // 让数字跳动
  if (flag) {
    countUpNum(realDom.value, realValue.value);
  }
};

// 获取所有路口累计人数
const getAllJtNumByTotal = async (flag: boolean) => {
  const res = await reqAllJtNumByTotal();
  // console.log(res);
  addValue.value = res.data[0].num;
  // 让数字跳动
  if (flag) {
    countUpNum(addDom.value, addValue.value);
  }
};

// 获取公告数据
const getNotice = async () => {
  const res = await reqGetNewsList({
    curPage: 1,
    pageSize: 1,
  });
  // console.log(res);
  if (res.data.list.length) {
    // 公告内容
    noticeContent.value = res.data.list[0].content;
    // 公告时间
    noticeTime.value = res.data.list[0].publishTime;

    nextTick(() => {
      // 滚动速度，数字越小速度越慢
      const step = 100;
      // 计算出完成动画需要的时间
      marqueeTime.value = marqueeDom.value.offsetWidth / step + "s";
    });
  }
};

// 获取所有景区当日人数
const getAllNumByReal = async (flag: boolean) => {
  const res = await reqGetAllNumByReal();
  // console.log(res);
  realValue2.value = res.data.num * 1;
  // 让数字跳动
  if (flag) {
    countUpNum(realDom2.value, realValue2.value);
  }
};

// 获取所有景区累计人数
const getAllNumByAdd = async (flag: boolean) => {
  const res = await reqGetAllNumByAdd();
  // console.log(res);
  addValue2.value = res.data.num * 1;
  // 让数字跳动
  if (flag) {
    countUpNum(addDom2.value, addValue2.value);
  }
};

// 点击靖安进出人流查看详情按钮回调
const morePeopleDetail = () => {
  showPeopleDetail.value = true;
};

// 公告区域点击查看更多按钮回调
const handleMoreNews = () => {
  showNewsList.value = true;
};

// 点击靖安景区人流查看详情按钮回调
const handleMoreScenic = () => {
  showScenicDetail.value = true;
};

// 子组件触发的自定义事件
const changeShowClosePeople = (data: boolean) => {
  showPeopleDetail.value = data;
};
const changeShowClose = (data: boolean) => {
  showNewsList.value = data;
};
const changeShowCloseScenic = (data: boolean) => {
  showScenicDetail.value = data;
};
</script>

<style lang="scss" scoped>
.center_analyse {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  margin-top: 103px;
  width: 4019px;
  height: 160px;
  color: #fff;
  background-image: url(@/assets/images/analyse-center-background.png);
  background-size: 100% 100%;

  .center_analyse_left {
    margin-top: -33px;
    width: 1140px;
    height: 255px;

    .left_title {
      display: flex;
      justify-content: space-between;
      width: 1140px;
      height: 61px;
      background-image: url(@/assets/images/analyse-center-title.png);
      background-size: 100% 100%;

      .title_name {
        margin-left: 55px;
        font-size: 31.5px;
        font-weight: bold;
      }

      .title_detail {
        display: flex;
        margin-left: auto;
        color: #a8d5ff;
        font-size: 26px;
        cursor: pointer;

        .title_icon {
          margin-top: -5px;
          margin-left: 23px;
          width: 39px;
          height: 39px;
          background-image: url(@/assets/images/right.png);
          background-size: 100% 100%;
        }
      }
    }

    .left_info {
      display: flex;
      justify-content: space-between;
      width: 1140px;
      height: 194px;

      .info_box {
        width: 543px;
        height: 194px;

        .now {
          display: flex;
          align-items: center;
          width: 543px;
          height: 92px;
          font-size: 24px;
        }
        .box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 31px;
          width: 543px;
          height: 102px;
          font-weight: bold;
          background-color: rgba($color: #000000, $alpha: 0.3);

          .num {
            font-size: 50px;
          }
        }
      }
    }
  }

  .center_analyse_center {
    width: 1079px;
    height: 176px;

    .msg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 1079px;
      height: 88px;
      .msg_title {
        font-size: 32px;
      }

      .msg_more {
        font-size: 26px;
        color: #a8d5ff;
        cursor: pointer;
      }
    }
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 23px 0 40px;
      width: 1079px;
      height: 88px;
      background-image: url(@/assets/images/msg-background.png);
      background-size: 100% 100%;

      .info_icon {
        width: 51px;
        height: 51px;
        background-image: url(@/assets/images/msg-icon.png);
        background-size: 100% 100%;
      }
      .info_detail {
        width: 598px;
        font-size: 24px;
        overflow: hidden;

        .marquee {
          float: left;
          white-space: nowrap;
          animation: marqueeLeft v-bind(marqueeTime) 0.5s linear infinite;
        }
      }

      .info_time {
        font-size: 20px;
      }
    }
  }

  .center_analyse_right {
    margin-top: -33px;
    width: 1148px;
    height: 236px;

    .right_title {
      display: flex;
      justify-content: space-between;
      width: 1140px;
      height: 61px;
      background-image: url(@/assets/images/analyse-center-title.png);
      background-size: 100% 100%;
      transform: rotateY(180deg);

      .title_name {
        margin-left: 55px;
        font-size: 31.5px;
        font-weight: bold;
        transform: rotateY(180deg);
      }

      .title_detail {
        display: flex;
        color: #a8d5ff;
        font-size: 26px;
        cursor: pointer;
        transform: rotateY(180deg);

        .title_icon {
          margin-top: -5px;
          margin-right: 23px;
          width: 39px;
          height: 39px;
          background-image: url(@/assets/images/right.png);
          background-size: 100% 100%;
          transform: rotateY(180deg);
        }
      }
    }

    .right_info {
      display: flex;
      justify-content: space-between;
      width: 1140px;
      height: 194px;

      .info_box {
        width: 543px;
        height: 194px;

        .now {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          width: 543px;
          height: 92px;
          font-size: 24px;
        }
        .box {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding: 0 31px;
          width: 543px;
          height: 102px;
          font-weight: bold;
          background-color: rgba($color: #000000, $alpha: 0.3);

          .num {
            font-size: 50px;
          }
        }
      }
    }
  }

  .bottom_line {
    position: absolute;
    top: 200px;
    left: 30px;
    width: 4023px;
    height: 72px;
    background-image: url(@/assets/images/analyse-center-line.png);
    background-size: 100% 100%;
  }
}
</style>