park-h/src/views/repo-yj.vue

<template>
  <!-- 顶栏 -->
  <top-bar />

  <container>
    <template v-slot:left>
      <side-item title="温度曲线">
        <temperature />
      </side-item>
      <side-item title="湿度曲线">
        <humidity />
      </side-item>
      <side-item title="使用面积、货物占比">
        <div class="flex justify-between" style="width:100%;height:100%">
          <usable-area />
          <total-cargo />
        </div>
      </side-item>
    </template>

    <template v-slot:center>
      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/4"></iframe>
    </template>

    <template v-slot:right>
      <side-item title="货物吞吐量曲线">
        <curve />
      </side-item>
      <side-item title="园区人员统计表">
        <statistics />
      </side-item>
      <side-item title="仓库热力图">
        <heat />
      </side-item>
    </template>
  </container>

  <!-- 底部区域 -->
  <footer-bar :showIndex="showIndex"></footer-bar>

  <!-- 监控 -->
  <img @click="getWarehouses" class="monitor—btn" src="../assets/img/monitor.png" style />
  <div class="vedio" v-show="show">
    <div class="head">
      <div class="camera">摄像头监控视频</div>
      <img @click="show = false" class="close" src="../assets/img/close.png" />
    </div>
    <div class="monitor">
      <div class="monitor1">
        <iframe :src="iframeSrc" frameborder="0" height="100%" scrolling="no" width="100%"></iframe>
        <div class="screen">
          <img @click="showScreen = true" class="monitor2" src="../assets/img/fullScreen.png" />
        </div>
      </div>
    </div>
  </div>
  <!-- 全屏监控 -->
  <video-screen :iframeSrc="iframeSrc" @closeScreen="closeScreen" v-if="showScreen" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import TopBar from "comp/top-bar.vue";
import Container from "comp/content.vue";
import SideItem from "comp/side-item.vue";
import FooterBar from "comp/footer-bar.vue";
import Curve from "comp/curve.vue";
import Heat from "@/components/heat.vue";
import Statistics from "@/components/statistics.vue";
import Humidity from "@/components/humidity.vue";
import Temperature from "@/components/temperature.vue";
import UsableArea from "@/components/usableArea.vue";
import TotalCargo from "@/components/totalCargo.vue";
import VideoScreen from "@/components/videoScreen.vue";
import { getWarehouses } from "api/index";

export default defineComponent({
  components: {
    TopBar,
    Container,
    SideItem,
    FooterBar,
    Curve,
    Heat,
    Statistics,
    Humidity,
    Temperature,
    UsableArea,
    TotalCargo,
    VideoScreen,
  },
  data() {
    return {
      show: false,
      showScreen: false,
      showIndex: 2,
      iframeSrc: "",
    };
  },
  methods: {
    // 关闭大屏
    closeScreen() {
      this.showScreen = false;
    },

    // 查询仓库列表及仓库下的摄像头
    async getWarehouses() {
      try {
        this.show = true;
        const param = { parkId: 1 };
        const data = await getWarehouses(param);
        if (data && data.warehouseInfo && data.warehouseInfo.length) {
          let item = data.warehouseInfo.find(
            (item) => item.warehouseId === "6"
          );
          if (item && item.cameras && item.cameras.length) {
            this.iframeSrc = item.cameras[0].equipmentLocation;
          }
        }
      } catch (error) {
        console.log("error: ", error);
      }
    },
  },
});
</script>

<style scoped>
.frame {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.vedio {
  position: absolute;
  bottom: 15%;
  left: 37%;
  z-index: 99;
  width: 524rem;
  height: 369rem;
  background: url(/src/assets/img/vedio.png) center no-repeat;
  background-size: 100% 100%;
}

.head {
  text-align: center;
  font-size: 20rem;
  padding-top: 30rem;
  padding-bottom: 10rem;
}

.camera {
  color: #fff;
  font-size: 12rem;
}

.close {
  position: absolute;
  top: 7%;
  right: 8%;
  width: 20rem;
  height: 20rem;
}

.monitor—btn {
  position: absolute;
  right: 0;
  top: 20%;
  z-index: 99;
  width: 48rem;
  height: 50rem;
}

.monitor {
  width: 446rem;
  height: 287rem;
  margin: 0 auto;
}

.monitor1 {
  width: 100%;
  height: 100%;
  position: relative;
}

.screen {
  width: 100%;
  height: 40rem;
  position: absolute;
  right: 0;
  bottom: -1px;
  z-index: 9;
  background: rgba(0, 0, 0, 0.5);
}

.monitor2 {
  width: 30rem;
  height: 30rem;
  position: absolute;
  right: 15rem;
  bottom: 5rem;
}
</style>