jayq_vue_newbigdata/src/views/safe/right/rightSafe.vue

<template>
  <div class="right_safe">
    <!-- 景区防火监控标题区域 -->
    <div class="safe_title top"></div>

    <!-- 景区防火监控内容区域 -->
    <div class="safe_video">
      <!-- 左边边框线区域 -->
      <div class="video_line left"></div>
      <!-- 右边边框线区域 -->
      <div class="video_line right"></div>
      <!-- 每一个监控区域 -->
      <div class="video_item" v-for="(item, index) in videoList" :key="index">
        <div class="item_noSignal">无信号</div>
        <div class="item_box" :id="item.id" v-show="item.isShow"></div>
        <div class="item_mask">{{ item.name }}</div>
      </div>
    </div>

    <!-- 景区防火统计标题区域 -->
    <div class="safe_title center"></div>

    <!-- 景区防火统计内容区域 -->
    <div class="safe_fire">
      <!-- 当前防火等级提示区域 -->
      <div class="fire_left">
        <div class="left_title">当前防火等级提示</div>
        <div class="left_content">
          <div class="content_level">
            {{
              fireLevel == "1"
                ? "I"
                : fireLevel == "2"
                ? "II"
                : fireLevel == "3"
                ? "III"
                : "IV"
            }}
          </div>
          <div class="content_text">防火等级</div>
          <div class="content_type">
            {{
              fireLevel == "1"
                ? "极其危险"
                : fireLevel == "2"
                ? "高度危险"
                : fireLevel == "3"
                ? "中度危险"
                : "低度危险"
            }}
          </div>
        </div>
      </div>
      <!-- 处置情况区域 -->
      <div class="fire_center">
        <div class="center_title">处置情况</div>
        <div class="center_content">
          <!-- 每一个盒子区域 -->
          <div
            class="content_box"
            :title="item.name"
            :class="{ click: item.name === '冒烟警告' }"
            v-for="item in iconList"
            :key="item.id"
            @click="handleClickFire(item)"
          >
            <div class="box_img">
              <img :src="item.url" />
            </div>
            <div class="box_info">
              <div class="info_name">
                {{ item.name }}
              </div>
              <div class="info_num">
                <div ref="infoNum" :data-value="item.num">{{ item.num }}</div>
                <span>次</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 防火记录区域 -->
      <div class="fire_right">
        <div class="right_title">防火记录</div>
        <div class="right_table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="70"
              align="center"
            />
            <el-table-column
              prop="publishTime"
              label="发现时间"
              align="center"
            />
            <el-table-column
              prop="place"
              label="地点"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column label="处置情况" align="center">
              <template #default="{ row }">
                {{ row.handleStatus == 1 ? "处置中" : "已处置" }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="{ row }">
                <div class="table_btn" @click="handleClickDetail(row)">
                  查看详情
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 应急广播标题区域 -->
    <div class="safe_title bottom"></div>

    <!-- 应急广播内容区域 -->
    <div class="safe_broadcast">
      <!-- 播发时间区域 -->
      <div class="broadcast_left">
        <div class="left_title">播发时间</div>
        <div class="left_container">
          <div class="container_box">
            <!-- 每一个时间段区域 -->
            <div
              class="box_time"
              v-for="(item, index) in timeList"
              :key="index"
            >
              {{ item[0].slice(0, 5) }}-{{ item[1].slice(0, 5) }}
            </div>
          </div>
        </div>
      </div>
      <!-- 调度统计区域 -->
      <div class="broadcast_center">
        <div class="center_title">调度统计</div>
        <div class="center_container">
          <!-- 每一个统计区域 -->
          <div class="container_item" v-for="item in list" :key="item.id">
            <div class="item_icon">
              <img src="@/assets/images/26.png" />
            </div>

            <div class="item_msg">
              <div class="msg_box"></div>
              <div class="msg_line"></div>
              <div class="msg_text">{{ item.name }}</div>
              <div class="msg_border"></div>
              <div class="msg_num" ref="msgNum" :data-value="item.num">
                {{ item.num }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 播发记录区域 -->
      <div class="broadcast_right">
        <div class="right_title">
          <div>
            播发记录
            <span
              style="
                margin-left: 20px;
                font-size: 20px;
                color: #2493f1;
                cursor: pointer;
              "
              @click="goPage"
            >
              点击进入
            </span>
          </div>
          <div class="icon_box" @click="handleClickMore">
            查看更多
            <img src="@/assets/images/right.png" />
          </div>
        </div>
        <div class="right_table">
          <el-table :data="broadcastData" style="width: 100%">
            <el-table-column
              prop="title"
              label="播发内容"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              prop="address"
              label="播发地点"
              show-overflow-tooltip
              align="center"
            /><el-table-column
              prop="broadcastType"
              label="广播类型"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              prop="messageType"
              label="消息类型"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              prop="playTime"
              label="播出时间"
              show-overflow-tooltip
              align="center"
              width="150"
            />
          </el-table>
        </div>
      </div>
    </div>
  </div>

  <!-- 防火记录查看详情弹窗区域 -->
  <Transition name="fade">
    <FireDetailDialog v-if="showDetail" :showObj="showObj" @close="close" />
  </Transition>

  <!-- 冒烟警告列表弹窗区域 -->
  <Transition name="fade">
    <SmokeList v-if="showSmoke" @closeDialog="closeDialog" />
  </Transition>

  <!-- 播发记录列表弹窗区域 -->
  <Transition name="fade">
    <BroadcastList v-if="showBroadcast" @closeDialog="closeDialog" />
  </Transition>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import FireDetailDialog from "./fireDetailDialog.vue";
import BroadcastList from "./broadcastList.vue";
import SmokeList from "./smokeList.vue";
import img from "@/assets/images/23.png";
import img2 from "@/assets/images/76.png";
import img3 from "@/assets/images/77.png";
import img4 from "@/assets/images/78.png";
import { countUpNum } from "@/utils/countUpNum.ts";
// 引入监控相关的数据接口
import { getVedio } from "@/api/video/index";
// 引入广播相关的数据接口
import { reqBroadcastInfo, reqBroadcastList } from "@/api/broadcast/index";
// 引入防火相关的数据接口
import { reqFireLevel, reqDisposeMsg, reqFireData } from "@/api/fire/index";
// @ts-ignore
import WasmPlayer from "@easydarwin/easywasmplayer";
import { changeArray } from "@/utils/changeArray";

// 防火记录查看详情弹窗显示隐藏控制
const showDetail = ref(false);
// 冒烟警告列表弹窗显示隐藏控制
const showSmoke = ref(false);
// 播发记录列表弹窗显示隐藏控制
const showBroadcast = ref(false);

// DOM标识
const infoNum = ref();
const msgNum = ref();

// 监控实例数组
const playerList = ref<any>([]);

// 播发时间列表
const timeList = ref<any>([]);
// 防火等级
const fireLevel = ref("");

// 延时器实例数组
const timerList = ref<any>([]);

// 监控列表
const videoList = ref<any>([
  {
    id: "4",
    name: "宝峰小湾森林防火",
    rtspaddr: "rtsp://admin:hik12345@6.205.67.206:554/Streaming/Channels/102",
    isShow: false,
    timer: null,
  },
  {
    id: "5",
    name: "三爪仑虎啸峡森林防火",
    rtspaddr: "rtsp://admin:hik12345@6.205.67.207:554/Streaming/Channels/102",
    isShow: false,
    timer: null,
  },
  {
    id: "6",
    name: "中源景区防火",
    rtspaddr: "rtsp://admin:hik12345@6.205.67.208:554/Streaming/Channels/102",
    isShow: false,
    timer: null,
  },
]);

// 防火记录列表
const tableData = ref([]);

// 处置情况列表
const iconList = ref([
  {
    id: 1,
    name: "扑救火灾",
    num: 0,
    url: img,
  },
  {
    id: 2,
    name: "转移安置人员",
    num: 0,
    url: img2,
  },
  {
    id: 3,
    name: "救治负伤",
    num: 0,
    url: img3,
  },
  {
    id: 4,
    name: "保护重要目标",
    num: 0,
    url: img4,
  },
  {
    id: 5,
    name: "维护社会治安",
    num: 0,
    url: img,
  },
  {
    id: 6,
    name: "发布信息",
    num: 0,
    url: img,
  },
  {
    id: 7,
    name: "稍后处置",
    num: 0,
    url: img,
  },
  {
    id: 8,
    name: "火场清理",
    num: 0,
    url: img,
  },
  {
    id: 9,
    name: "冒烟警告",
    num: 1,
    url: img,
  },
]);

// 播发记录列表
const broadcastData = ref([]);

// 调度统计数据
const list = ref([
  {
    id: 1,
    name: "设备总数",
    num: 0,
  },
  {
    id: 2,
    name: "播发统计",
    num: 0,
  },
  {
    id: 3,
    name: "设备在线数",
    num: 0,
  },
]);

// 防火记录详情弹窗数据
const showObj = ref({});

onMounted(() => {
  // 获取监控视频地址
  getVideosData();
  // 获取当前防火等级
  getFireLevel();
  // 获取处置情况信息
  getDisposeMsg();
  // 获取防火记录列表
  getFireData();
  // 获取应急广播信息
  getBroadcastInfo();
  // 获取播发记录列表
  getBroadcastList();
});

onUnmounted(() => {
  // 销毁WasmPlayer实例
  destroyVideos();
  // 销毁延时器实例
  destroyTimers();
});

// 获取监控视频地址
const getVideosData = () => {
  videoList.value.forEach(async (ele: any) => {
    const res = await getVedio(ele.rtspaddr);

    let player = new WasmPlayer(null, ele.id, (a: any) => {
      // a表示当前播放的状态
      if (a === "videoTimestamp") {
        ele.isShow = true;
      } else {
        // 开启一个延时20秒的延时器
        if (!ele.timer) {
          ele.timer = setTimeout(() => {
            //  如果isShow为false表示播放失败，此时断开连接节约性能
            if (!ele.isShow) {
              player.destroy();
            }
            // 收集延时器实例方便后面销毁
            timerList.value.push(ele.timer);
          }, 20000);
        }
      }
    });

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

// 获取当前防火等级
const getFireLevel = async () => {
  const res = await reqFireLevel();
  // console.log(res);
  fireLevel.value = res.data.level;
};

// 获取处置情况信息
const getDisposeMsg = async () => {
  const res = await reqDisposeMsg();
  // console.log(res);

  // 扑救火灾次数
  iconList.value[0].num = res.data.numOfPutOutTheFire;
  // 转移安置人员
  iconList.value[1].num = res.data.numOfTransfer;
  // 救治负伤
  iconList.value[2].num = res.data.numOfCure;
  // 保护重要目标
  iconList.value[3].num = res.data.numOfImportantTarget;
  // 维护社会治安
  iconList.value[4].num = res.data.numOfPublicSecurity;
  // 发布信息
  iconList.value[5].num = res.data.numOfInfo;
  // 稍后处置
  iconList.value[6].num = res.data.numOfAftermath;
  // 火场清理
  iconList.value[7].num = res.data.numOfFireClean;
  // 冒烟警告
  iconList.value[8].num = res.data.numOfSmoke;

  // 让数字跳动
  nextTick(() => {
    infoNum.value.forEach((ele: any) => {
      countUpNum(ele, ele.dataset.value);
    });
  });
};

// 获取防火记录列表
const getFireData = async () => {
  const res = await reqFireData({
    cur: 1,
    pageSize: 4,
  });
  // console.log(res);
  tableData.value = res.data.list;
};

// 获取应急广播信息
const getBroadcastInfo = async () => {
  const res = await reqBroadcastInfo();
  // console.log(res);
  // 把时间数据变成一个数组
  let arr = res.data.broadcastTime.split(",");
  // 转变成二维数组
  timeList.value = changeArray(arr, 2);

  // 设备总数
  list.value[0].num = res.data.numOfDevice;
  // 播发条数统计
  list.value[1].num = res.data.numOfBroadcasts;
  // 设备在线数
  list.value[2].num = res.data.numOfDevice * (res.data.rateOfInline * 0.01);
  // 让数字跳动
  nextTick(() => {
    msgNum.value.forEach((ele: any) => {
      countUpNum(ele, ele.dataset.value);
    });
  });
};

// 获取播发记录列表
const getBroadcastList = async () => {
  const res = await reqBroadcastList({
    curPage: 1,
    pageSize: 4,
  });
  // console.log(res);
  broadcastData.value = res.data.recordPage.list;
};

// 销毁WasmPlayer实例
const destroyVideos = () => {
  playerList.value.forEach((ele: any) => {
    ele.destroy();
  });
};

// 销毁延时器实例
const destroyTimers = () => {
  timerList.value.forEach((ele: any) => {
    clearTimeout(ele);
  });
};

// 点击查看详情按钮回调
const handleClickDetail = (row: any) => {
  showDetail.value = true;
  showObj.value = row;
};

// 点击冒烟告警回调
const handleClickFire = (item: any) => {
  if (item.name === "冒烟警告") {
    // console.log(item);
    showSmoke.value = true;
  }
};

// 播发记录点击查看更多回调
const handleClickMore = () => {
  showBroadcast.value = true;
};

// 自定义事件
const close = (data: boolean) => {
  showDetail.value = data;
};

const closeDialog = (data: boolean) => {
  showSmoke.value = data;
  showBroadcast.value = data;
};

const goPage = () => {
  window.open("http://6.200.0.4/admin/auth/login");
};
</script>

<style lang="scss" scoped>
.right_safe {
  padding-right: 132px;
  width: 2000px;
  height: 100%;

  .safe_title {
    width: 100%;
    height: 96px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .top {
    background-image: url(@/assets/images/16.png);
  }

  .safe_video {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0 96px;
    margin: 32px 0;
    width: 100%;
    height: 377px;

    .video_line {
      position: absolute;
      top: 20px;
      width: 32px;
      height: 356px;
      background-image: url(@/assets/images/19.png);
      background-size: 100% 100%;
    }

    .left {
      left: 0;
    }

    .right {
      right: 0;
      transform: rotateY(180deg);
    }

    .video_item {
      position: relative;
      width: 548px;
      height: 377px;
      border-radius: 10px 10px 0 0;
      overflow: hidden;

      .item_noSignal {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        background-color: #000;
      }

      .item_box {
        width: 100%;
        height: 100%;
      }

      .item_mask {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 11px 0 0 24px;
        width: 548px;
        height: 70px;
        font-size: 26px;
        background-color: rgba(52, 77, 94, 0.8);
      }
    }
  }

  .center {
    background-image: url(@/assets/images/17.png);
  }

  .safe_fire {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 483px;

    .fire_left {
      width: 450px;
      height: 100%;

      .left_title {
        padding-left: 44px;
        margin-top: 32px;
        width: 100%;
        height: 48px;
        font-size: 28px;
        font-family: "庞门正道标题体";
        background-image: url(@/assets/images/20.png);
        background-size: 100% 100%;
      }

      .left_content {
        position: relative;
        margin-top: 22px;
        width: 100%;
        height: 346px;
        background-image: url(@/assets/images/29.png);
        background-size: 100% 100%;

        .content_level {
          position: absolute;
          top: 100px;
          left: 150px;
          width: 120px;
          text-align: center;
          font-size: 50px;
          font-family: "庞门正道标题体";
        }
        .content_text {
          position: absolute;
          top: 161px;
          left: 150px;
          width: 120px;
          text-align: center;
          font-size: 16px;
        }
        .content_type {
          position: absolute;
          top: 254px;
          left: 83px;
          width: 260px;
          height: 51px;
          line-height: 51px;
          text-align: center;
          color: #00cfff;
          font-size: 24px;
          font-family: "庞门正道标题体";
        }
      }
    }
    .fire_center {
      width: 700px;
      height: 100%;

      .center_title {
        padding-left: 44px;
        margin-top: 32px;
        width: 100%;
        height: 48px;
        font-size: 28px;
        font-family: "庞门正道标题体";
        background-image: url(@/assets/images/21.png);
        background-size: 100% 100%;
      }

      .center_content {
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        margin-top: 36px;
        margin-left: 10px;
        width: 100%;
        height: 335px;

        .content_box {
          display: flex;
          align-items: center;

          .box_img {
            width: 78px;
            height: 78px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .box_info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 17.5px;
            width: 120px;
            height: 78px;
            overflow: hidden;

            .info_name {
              font-size: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .info_num {
              display: flex;
              font-size: 25px;
              color: #99ceff;

              span {
                align-self: flex-end;
                margin-left: 5px;
                font-size: 12px;
              }
            }
          }
        }

        .click {
          color: #57b9ff;
          cursor: pointer;
        }
      }
    }
    .fire_right {
      width: 640px;
      height: 100%;

      .right_title {
        padding-left: 44px;
        margin-top: 32px;
        width: 100%;
        height: 48px;
        font-size: 28px;
        font-family: "庞门正道标题体";
        background-image: url(@/assets/images/22.png);
        background-size: 100% 100%;
      }

      .right_table {
        margin-top: 40px;
        width: 100%;
        height: 345px;
        overflow-y: auto;

        .table_btn {
          color: #2493f1;
          cursor: pointer;
        }
      }
    }
  }

  .bottom {
    background-image: url(@/assets/images/18.png);
  }

  .safe_broadcast {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 438px;

    .broadcast_left {
      width: 450px;
      height: 100%;

      .left_title {
        padding-left: 44px;
        margin-top: 32px;
        width: 100%;
        height: 48px;
        font-size: 28px;
        font-family: "庞门正道标题体";
        background-image: url(@/assets/images/20.png);
        background-size: 100% 100%;
      }

      .left_container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 22px;
        width: 100%;
        height: 275px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.2);

        .container_box {
          padding: 25px 36px;
          width: 96%;
          height: 255px;
          border-radius: 10px;
          background-color: rgba(142, 207, 250, 0.1);

          .box_time {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 16.5px;
            width: 357px;
            height: 57px;
            font-size: 24px;
            border-left: 3px solid #8eb2fa;
            box-shadow: 0 0 15px 15px rgb(2, 2, 28, 0.8);
            background-image: url(@/assets/images/24.png);
            background-size: 100% 100%;
          }
        }
      }
    }

    .broadcast_center {
      width: 700px;
      height: 100%;

      .center_title {
        padding-left: 44px;
        margin-top: 32px;
        width: 100%;
        height: 48px;
        font-size: 28px;
        font-family: "庞门正道标题体";
        background-image: url(@/assets/images/21.png);
        background-size: 100% 100%;
      }

      .center_container {
        display: flex;
        justify-content: space-between;
        margin-top: 56px;
        width: 100%;
        height: 242px;

        .container_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 210px;
          height: 242px;

          .item_icon {
            width: 120px;
            height: 103px;
            text-align: center;
            background-image: url(@/assets/images/25.png);
            background-size: 100% 100%;
            animation: float2 3s linear infinite;

            img {
              width: 63px;
              height: 60px;
            }
          }

          .item_msg {
            position: relative;
            width: 100%;
            height: 139px;

            .msg_box {
              position: absolute;
              top: 46px;
              left: 30px;
              width: 14px;
              height: 14px;
              background-color: #ede27b;
            }

            .msg_line {
              position: absolute;
              top: 60px;
              left: 37px;
              width: 13.5px;
              height: 47.5px;
              background-image: url(@/assets/images/27.png);
              background-size: 100% 100%;
            }

            .msg_text {
              position: absolute;
              top: 30px;
              left: 57px;
              font-size: 24px;
            }

            .msg_border {
              position: absolute;
              top: 54px;
              left: 50px;
              width: 156px;
              height: 6px;
              background-image: url(@/assets/images/28.png);
              background-size: 100% 100%;
            }

            .msg_num {
              position: absolute;
              top: 87px;
              left: 55px;
              font-size: 40px;
              font-weight: bold;
            }
          }
        }
      }
    }

    .broadcast_right {
      width: 640px;
      height: 100%;

      .right_title {
        display: flex;
        justify-content: space-between;
        padding-left: 44px;
        margin-top: 32px;
        width: 100%;
        height: 48px;
        font-size: 28px;
        font-family: "庞门正道标题体";
        background-image: url(@/assets/images/22.png);
        background-size: 100% 100%;

        .icon_box {
          display: flex;
          font-size: 18px;
          font-family: "";
          color: #a8d5ff;
          cursor: pointer;

          img {
            margin-right: 28px;
            margin-left: 12px;
            width: 21px;
            height: 21px;
          }
        }
      }

      .right_table {
        margin-top: 39px;
        width: 100%;
        height: 320px;
        overflow-y: auto;
      }
    }
  }
}

/*最外层透明*/
.right_table ::v-deep(.el-table),
.right_table ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.right_table ::v-deep(.el-table th),
.right_table ::v-deep(.el-table tr),
.right_table ::v-deep(.el-table td) {
  background-color: transparent !important;
  color: white;
  font-size: 20px;
  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(52, 70, 94, 0.2);
}
// 清除表格默认padding
::v-deep(.el-table .el-table__body-wrapper .el-table__cell) {
  // padding: 0;
  height: 52px;
}
</style>