securityHtml/src/views/index/index.vue

<template>
  <div class="main-container-box">
    <nav-header></nav-header>
    <div class="panel-box">
      <div class="column1">
        <transition name="fade">
          <sbjk v-if="show"></sbjk>
        </transition>
        <monitor :width="width"  v-if="monitorStatus" @monitorChange="monitorChange"></monitor>
      </div>
      <transition name="fade1">
        <div class="column2" v-if="show">
          <alarm-static></alarm-static>
          <handle-number></handle-number>
          <alarming></alarming>
        </div>
      </transition>
      <div class="panel monitor-setting" v-if="showModal_tow">
        <div class="panel-tit">
          画面配置<img
            class="close"
            src="@/assets/close.png"
            alt=""
            @click="showModal_tow = false"
          />
        </div>
        <div class="monitor-option"></div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </div>
</template>

<script>
import sbjk from "./components/sbjk";
import monitor from "./components/monitor";
import alarming from "./components/alarming";
import handleNumber from "./components/handleNumber";
import alarmStatic from "./components/alarmStatic";

import TimeMenu from "@/components/TimeMenu";
import navHeader from "./components/navHeader";
import { getToken, setToken, removeToken } from "@/utils/auth";

export default {
  components: {
    sbjk,
    monitor,
    alarming,
    handleNumber,
    alarmStatic,
    TimeMenu,
    navHeader,
    getToken,
  },
  data() {
    return {
      showModal_tow: false,
      width: "100rem",
      show: true,
      monitorStatus:true,
    };
  },
  mounted() {
    var that = this;
    window.addEventListener(
      "message",
      function (event) {
        var isDOM = typeof event.data === "object";
        // // 监听父窗口发送过来的数据向服务器发送post请求
        var data = event.data;
        if (isDOM == true) {
          if ("param" in data == true) {
            if (data.param.name === "iframe" && data.param.id === "iframe") {
              that.handleClick();
            }
          }
        }
      },
      false
    );
  },
  methods: {
    handleClick: function () {
      this.show = !this.show;
      this.show == true ? (this.width = "100rem") : (this.width = "100%");
    },
    monitorChange(){
      this.monitorStatus = false
      setTimeout(()=>{
        this.monitorStatus = true
      },1)

    }
  },
};
</script>

<style lang="scss">

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s linear;
  transform: translated3d(0, 0, 0);
}
.fade-enter, .fade-leave-to /*.move-leave-active in below version 2.1.8 */ {
  transform: translate3d(-100%, 0, 0);
}
.fade1-enter-active,
.fade1-leave-active {
  transition: all 0.5s linear;
  transform: translated3d(0, 0, 0);
}
.fade1-enter, .fade1-leave-to /* .move-leave-active in below version 2.1.8 */ {
  transform: translate3d(100%, 0, 0);
}
iframe {
  position: fixed;
  top: 6rem;
  left: 0;
  right: 0;
  z-index: 0;
  margin: 0 auto;
  border: 0px red solid;
  // width: 100rem;
  height: calc(100vh - 7rem);
}
.monitor-setting {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 15;
  margin: 0 auto;
  .monitor-option {
    padding: 2rem 4rem 2rem 4rem;
  }
}
.setting,
.close {
  position: absolute;
  width: 2rem;
  right: 1.5rem;
  top: 1.3rem;
  cursor: pointer;
}
.close {
  width: 1.7rem;
  cursor: pointer;
}
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .main-container-box .el-input input {
    color: $cursor;
  }
}
</style>

<style lang="scss" scoped>
// @import "../../styles/mixin.scss";
</style>

<style lang="scss" >
/* 初始化 */

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

li,
p {
  padding: 0;
  margin: 0;
  list-style: none;
}

.colorSuccess {
  color: #01e416;
}

.colorUnhandle {
  color: rgb(248, 72, 3);
}

.colorOverTime {
  color: #0bc3ff;
}

.colorUnpass {
  color: #fd7700;
}

.colorTotal {
  color: #ffec16;
}
body{
  width:100%;
  height:100%;
  overflow-y: hidden;
}
/* 首页公共css */
.main-container-box {
  min-width: 1024px;
  background: url(../../assets/background_img_03.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-bottom:2rem;
  color: #fff;

}

.panel-box {
  min-width: 1024px;
  // max-width: 1920px;
  position: relative;
  height: calc(100vh - 8rem);
  margin-top: 6rem;
  display: flex;
  > div {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 23%;
  }
  .column1 {
    left: 1rem;
  }
  .column2 {
    right: 1rem ;
  }
}

.panel {
  position: relative;
  background: #021132;
  border: 1px solid #3486da;

  .panel-tit {
    background: linear-gradient(
      to right,
      #021132 0%,
      #3053af 50%,
      #021132 100%
    );
    padding: 1.2rem;
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
    font-family: "impact";
  }
}
.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 5px !important;
  }
  // .el-menu > div:nth-child(7) {
  //   // width: calc(100vw / 33);
  //   // margin-left: 27rem !important;
  // }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 10px !important;
  }
}
</style>

<style  scoped>
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
  min-width: 10rem !important;
}
</style>