jayq_vue_newbigdata/src/views/analyse/left/mapCrossingDialog.vue

<template>
  <div class="detail">
    <!-- 标题区域 -->
    <div class="detail_title">路口详情</div>

    <!-- 视频区域 -->
    <div class="detail_video">
      <div id="videoDom2"></div>
      <div class="video_title">{{ detailObj.name }}</div>
    </div>

    <!-- 详细信息区域 -->
    <div class="detail_msg">
      <div class="msg_img">
        <img src="@/assets/images/87.png" />
      </div>
      <div class="msg_info">
        <div class="info_title">{{ detailObj.name }}</div>
        <div class="info_num">
          当日：{{ dayNum }}人&nbsp;&nbsp;&nbsp;&nbsp;累计：{{ addNum }}人
        </div>
      </div>
    </div>

    <!-- 边框线区域 -->
    <div class="detail_line"></div>

    <!-- 表格区域 -->
    <div class="detail_form">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-background="rgba(1,18,38, 0.8)"
      >
        <el-table-column prop="sm_name" label="姓名" align="center" />
        <el-table-column prop="sm_phone" label="电话" align="center" />
        <el-table-column prop="sm_time" label="时间" align="center" />
      </el-table>
    </div>

    <!-- 关闭按钮区域 -->
    <div class="detail_close" @click="handleCloseDetail"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted } from "vue";
// 引入路口相关的接口
import {
  reqJtNumByDay,
  reqJtNumByTotal,
  reqJtTableData,
} from "@/api/junction/index";
// 引入路口数据
import { junctionData } from "@/components/map/junctionData";
// 引入监控相关的数据接口
import { getVedio } from "@/api/video/index";
// @ts-ignore
import WasmPlayer from "@easydarwin/easywasmplayer";

// 父组件传递过来的数据
const props = defineProps(["detailObj"]);

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

// 表格数据
const tableData = ref([]);

// loading加载效果控制
const loading = ref(true);

// 当前路口累计人数
const addNum = ref(0);

// 当前路口当日人数
const dayNum = ref(0);

// 监控实例
const player = ref();

onMounted(() => {
  // 获取视频地址
  getVideosData();
  // 获取各路口当日人数
  getJtNumByDay();
  // 获取各路口累计人数
  getJtNumByTotal();
  // 获取表格数据
  getTableData();
});

onUnmounted(() => {
  // 页面卸载时销毁WasmPlayer实例
  player.value.destroy();
});

// 监听路口变化更新数据
watch(props.detailObj, () => {
  player.value?.destroy();
  getVideosData();
  getJtNumByDay();
  getJtNumByTotal();
  getTableData();
});

// 获取视频地址
const getVideosData = async () => {
  const Obj = junctionData.find((ele) => ele.title === props.detailObj.name);

  const res = await getVedio(Obj?.rtspaddr as string);
  player.value = new WasmPlayer(null, "videoDom2");

  player.value.play(res, 1);
};

// 获取各路口当日人数
const getJtNumByDay = async () => {
  const res = await reqJtNumByDay();
  // console.log(res);
  // 匹配出当前路口的当日人数
  res.data.forEach((ele: any) => {
    if (ele.place_name === props.detailObj.name) {
      dayNum.value = ele.num;
    }
  });
};

// 获取各路口累计人数
const getJtNumByTotal = async () => {
  const res = await reqJtNumByTotal();
  // console.log(res);
  // 匹配出当前路口的累计人数
  res.data.forEach((ele: any) => {
    if (ele.place_name === props.detailObj.name) {
      addNum.value = ele.num;
    }
  });
};

// 获取表格数据
const getTableData = async () => {
  const res = await reqJtTableData(props.detailObj.name);
  // console.log(res);
  tableData.value = res.data;
  loading.value = false;
};

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

<style lang="scss" scoped>
.detail {
  position: absolute;
  top: -125px;
  left: 2530px;
  width: 1016px;
  height: 1378px;
  color: #fff;
  background-image: url(@/assets/images/news-detail-background.png);
  background-size: 100% 100%;

  .detail_title {
    margin-top: 70px;
    font-size: 30px;
    font-weight: bold;
  }

  .detail_video {
    position: relative;
    margin-left: 15px;
    margin-top: 75px;
    width: 874px;
    height: 491px;

    .video_title {
      z-index: 10;
      position: absolute;
      top: 31px;
      left: 44px;
      padding: 15px 15px 0;
      font-size: 27px;
      background: linear-gradient(
        270deg,
        rgba(116, 180, 232, 0.29) 0%,
        rgba(44, 95, 143, 1) 100%
      );
    }
  }

  .detail_msg {
    display: flex;
    margin-top: 59px;
    margin-left: 57px;
    width: 768px;
    height: 74px;

    .msg_img {
      margin-right: 20px;
      width: 106px;
      height: 74px;
      border-radius: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .msg_info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .info_title {
        font-size: 24px;
        font-weight: bold;
      }

      .info_num {
        font-size: 18px;
      }
    }
  }

  .detail_line {
    margin-top: 30px;
    margin-left: 63px;
    width: 772px;
    height: 6px;
    background-image: url(@/assets/images/news-list-bottomLine.png);
    background-size: 100% 100%;
  }

  .detail_form {
    margin-top: 24px;
    margin-left: 58px;
    width: 773px;
    height: 480px;
    overflow-y: auto;
  }

  .detail_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 98px;
    height: 98px;
    cursor: pointer;
  }
}

/*最外层透明*/
.detail_form ::v-deep(.el-table),
.detail_form ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.detail_form ::v-deep(.el-table th),
.detail_form ::v-deep(.el-table tr),
.detail_form ::v-deep(.el-table td) {
  background-color: transparent !important;
  color: white;
  font-size: 16px;
  border-color: rgba(255, 255, 255, 0.1);
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(58, 126, 199, 0.5);
}
// 清除表格默认padding
::v-deep(.el-table .el-table__body-wrapper .el-table__cell) {
  padding: 0;
  height: 55px;
}
</style>