park-h/src/views/xh.vue

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

  <container>
    <template v-slot:left>
      <side-item title="大事记">
        <memorabilia />
      </side-item>
      <side-item title="饱和量仪表盘">
        <div class="flex justify-between" style="width:100%;height:100%">
          <parking-space />
          <usable-area />
        </div>
      </side-item>
      <side-item title="仓库吞吐量对比图">
        <warehouse />
      </side-item>
    </template>

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

    <template v-slot:right>
      <side-item title="货物吞吐量曲线">
        <curve />
      </side-item>
      <side-item title="进出车次统计">
        <amount />
      </side-item>
      <side-item title="园区财务统计表">
        <finance />
      </side-item>
    </template>
  </container>

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

  <!-- 监控1 -->
  <img @click="getWarehouses('show1')" 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="iframeSrc1" 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="iframeSrc1" @closeScreen="closeScreen" v-if="showScreen" />

  <!-- 监控2 -->
  <img
    @click="getWarehouses('show2')"
    class="monitor—btn monitor—btn1"
    src="../assets/img/monitor-left.png"
    style
  />
  <div class="vedio" v-show="show2">
    <div class="head">
      <div class="camera">摄像头监控视频</div>
      <img @click="show2 = false" class="close" src="../assets/img/close.png" />
    </div>
    <div class="monitor">
      <div class="monitor1">
        <iframe :src="iframeSrc2" 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="iframeSrc2" @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 Amount from "@/components/amount.vue";
import Finance from "@/components/finance.vue";
import Warehouse from "@/components/warehouse.vue";
import ParkingSpace from "@/components/parkingSpace.vue";
import UsableArea from "@/components/usableArea.vue";
import Memorabilia from "@/components/memorabilia.vue";
import VideoScreen from "@/components/videoScreen.vue";
import { getWarehouses } from "api/index";

export default defineComponent({
  components: {
    TopBar,
    Container,
    SideItem,
    FooterBar,
    Curve,
    Amount,
    Finance,
    Warehouse,
    ParkingSpace,
    UsableArea,
    Memorabilia,
    VideoScreen,
  },
  data() {
    return {
      show: false,
      show2: false,
      showScreen: false,
      showIndex: 1,
      iframeSrc1: "",
      iframeSrc2: "",
    };
  },
  methods: {
    // 关闭大屏
    closeScreen() {
      this.showScreen = false;
    },

    // 获取仓库信息
    async getWarehouses(value) {
      try {
        if (value === "show1") {
          if (this.show2) {
            this.show2 = false;
          }
          this.show = true;
        }
        if (value === "show2") {
          if (this.show) {
            this.show = false;
          }
          this.show2 = true;
        }
        const data = await getWarehouses({ parkId: 2 });
        if (data && data.parkEquipment && data.parkEquipment.length) {
          this.iframeSrc1 = data.parkEquipment[0].equipmentLocation;
          this.iframeSrc2 = data.parkEquipment[1].equipmentLocation;
        }
      } catch (error) {
        console.log("error: ", error);
      }
    },
  },
});
</script>

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

.monitor—btn1 {
  top: 28%;
}

.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 {
  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>