tcZz-big/src/views/privateOrder/Screen.vue

<template>
  <!-- <div class="pc"> -->
  <div class="container">
    <div class="main-container">
      <div class="top_nav">
        <div class="top_left">
          <router-link
            v-for="item in menus.slice(0, 2)"
            :key="item.id"
            class="nav_item left_nav"
            active-class="selected_nav"
            exact
            :to="{ path: item.path }"
          >
            {{ item.name }}
          </router-link>
        </div>
        <div class="center_title">太仓市网络综合治理平台</div>
        <div class="top_right">
          <router-link
            v-for="item in menus.slice(2, 4)"
            :key="item.id"
            class="nav_item right_nav"
            active-class="selected_nav"
            exact
            :to="{ path: item.path }"
          >
            {{ item.name }}
          </router-link>
        </div>
        <div class="time-wrap">
          <div class="icon" />
          <span class="date">{{ now.date }}</span>
          <span class="time">
            {{ now.hour + ":" + now.minute + ":" + now.second }}
          </span>
        </div>
        <div class="year-wrap"></div>
      </div>
      <router-view />
    </div>
    <div>
      <el-button
        v-if="!dialogDetails && $route.name === '网络舆情'"
        type="primary"
        style="
          background-color: rgba(255, 255, 255, 0.2);
          position: absolute;
          top: 160px;
          left: 1600px;
          z-index: 9999;
        "
        @click="dialogDetails = !dialogDetails"
        >切换</el-button
      >
    </div>
    <el-dialog
      v-if="dialogDetails"
      v-el-drag-dialog
      class="screen-dialog"
      :visible.sync="dialogDetails"
      width="2530px"
      top="20px"
      :modal-append-to-body="true"
      center
      :modal="false"
    >
      <div class="iframeBox">
        <commandControl />
      </div>
    </el-dialog>
    <div class="left-tabs-box" v-if="isShow">
      <router-link
        v-for="item in menusTwo"
        :key="item.id"
        class="nav_item_two"
        active-class="selected_nav_two"
        exact
        :to="{ path: item.path }"
      >
        {{ item.name }}
      </router-link>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import commandControl from "@/views/privateOrder/sentiment/components/commandControl/index.vue";
export default {
  components: {
    commandControl,
  },
  data() {
    return {
      dialogDetails: false,
      // 当前选中菜单项id
      selectMenuId: 0,
      // 菜单项集合
      menus: [],
      // 当前时间
      now: {
        date: "",
        hour: "",
        minute: "",
        second: "",
      },
      // 时间切换
      yearChange: [
        { label: "近1月", rightLine: true },
        { label: "近3月", rightLine: true },
        { label: "近1年", rightLine: false },
      ],
      isActive: 0,
      menusTwo: [
        { id: 1, name: "态势感知", path: "/screen/security" },
        { id: 2, name: "供应链安全", path: "/screen/supplyChain" },
        { id: 3, name: "处置与应急", path: "/screen/disposeMeet" },
      ],
      isShow: true,
    };
  },
  watch: {
    $route: {
      handler(route) {
        if(route.path !== "/screen/security" || route.path !== "/screen/supplyChain" || route.path !== "/screen/disposeMeet") {
          this.isShow = true;
        }
        if(route.path == "/screen/sentiment" || route.path == "/screen/ecosphere" || route.path == "/screen/positiveEnergy"){
          this.isShow = false;
        }
      },
      immediate:true
    }
  },
  created() {
    this.menus = [
      { id: 1, name: "网络安全", path: "/screen/security" },
      { id: 2, name: "网络舆情", path: "/screen/sentiment" },
      { id: 3, name: "网络管理", path: "/screen/ecosphere" },
      { id: 4, name: "网络生态", path: "/screen/positiveEnergy" },
    ];

    setInterval(() => {
      this.now.date = this.$moment().format("YYYY-MM-DD");
      this.now.hour = this.$moment().format("HH");
      this.now.minute = this.$moment().format("mm");
      this.now.second = this.$moment().format("ss");
    }, 1000);

    setInterval(() => {
      // this.getHoursWeather();
    }, 1000 * 60 * 10);
  },
  methods: {
    changeTime(val, index) {
      this.isActive = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.pc {
  width: 100%;
  height: $ScreenHeight;
  overflow: scroll;
}
.iframeBox {
  position: relative;
  width: 3305px;
  height: 1006px;
  margin-left: 14px;
  margin-top: -16px;
  overflow: hidden;
}

.container {
  width: $ScreenWidth;
  height: $ScreenHeight;
  width: 1920;
  height: 1080;
  position: relative;
  background: url("~@/assets/privateOrder/topNar/line_right_left.png") no-repeat;
  background-size: 100% 100%;
  position: relative;

  .left-tabs-box {
    position: absolute;
    left: 0px;
    width: 30px;
    top: 130px;
    background-color: transparent;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background-color: #001832;
    height: $iframeHeight;
    .nav_item_two {
      // width: 281px;
      // width: 250px;
      // height: 69px;
      // height: 50px;
      width: 30px;
      height: 250px;
      font-family: PangMenZhengDao;
      // font-size: 40px;
      font-size: 27px;
      letter-spacing: 4px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #85c9ff;
      margin-bottom: 10px;
      // z-index: 1000;
      // display: inline-block; /* 使得 transform 属性生效 */
      // transform: rotate(90deg); /* 旋转90度 */
      // transform-origin: left bottom; /* 设置旋转的基点为左上角 */
      // white-space: nowrap; /* 防止文本换行 */
    }
    .selected_nav_two {
      // width: 281px;
      // width: 250px;
      // height: 69px;
      // height: 50px;
      width: 30px;
      height: 250px;
      position: relative;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      // cursor: pointer;
      color: #ffffff;
      z-index: 1000;
      // transform: rotate(90deg); /* 旋转90度 */
      // transform-origin: left bottom; /* 设置旋转的基点为左上角 */
      // white-space: nowrap; /* 防止文本换行 */
    }
    .selected_nav_two::before {
      content:'';
      position: absolute;
      left: 0;
      top: -30px;
      width: 250px;
      height: 30px;
      background: url("~@/assets/privateOrder/topNar/seleted_nav.png");
      background-size: 100% 100%;
      transform: rotate(90deg); /* 旋转90度 */
      transform-origin: left bottom; /* 设置旋转的基点为左上角 */
      clip-path: inset(0 0 0 0); /* 调整裁剪区域 */
      z-index: -1;
    }
    // div {
    //   font-size: 28px;
    //   color: #fff;
    //   font-family: SourceHanSansCN-Regular;
    //   text-shadow: 0 0 10px #77adeb;
    // }
  }
}

.top_nav {
  width: $ScreenWidth;
  position: absolute;
  height: 130px;
  background: url("~@/assets/privateOrder/topNar/topNav.png");
  background-size: 100% 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;

  .top_left {
    width: 50%;
    height: 100%;
    display: flex;
    padding-right: 230px;
    align-items: center;
    justify-content: flex-end;
  }

  .center_title {
    width: 737px;
    line-height: 106px;
    height: 100%;
    font-family: PangMenZhengDao;
    font-size: 56px;
    letter-spacing: 6px;
    color: #ffffff;
    text-align: center;
  }

  .top_right {
    width: 50%;
    height: 100%;
    display: flex;
    padding-left: 230px;
    align-items: center;
    justify-content: flex-start;
  }
}

.nav_item {
  width: 281px;
  height: 69px;
  font-family: PangMenZhengDao;
  font-size: 44px;
  letter-spacing: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #85c9ff;
}

.selected_nav {
  width: 281px;
  height: 69px;
  background: url("~@/assets/privateOrder/topNar/seleted_nav.png");
  background-size: 100% 100%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.left_nav {
  margin-left: 187px;
}

.right_nav {
  margin-right: 187px;
}

/* .top-nar {
  width: $ScreenWidth;
  position: absolute;
  height: 107px;
  background: url("~@/assets/privateOrder/topNar/bg_banner.png");
  background-size: 100% 100%;
  z-index: 2;
  justify-content: space-between;
  border: 1px solid red;
}

.top-content {
  width: $ScreenWidth;
  height: 107px;
  // background: url("~@/assets/privateOrder/topNar/top_bg.png");
  display: flex;
  justify-content: space-between;
}

.title-wrap {
  margin: 23px 0 0 100px;
  display: flex;
  flex-direction: column;
  & > span:nth-child(1) {
    font-size: 42px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 4px;
    text-align: center;
    font-family: YouSheBiaoTiHei;
    background-image: -webkit-linear-gradient(#fff, #b2ddff);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  & > span:nth-child(2) {
    font-family: ConthraxSb-Regular;
    font-size: 11px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 1px;
    color: rgba($color: #fff, $alpha: 0.5);
  }
}

.nav-wrap {
  display: flex;
  margin-top: 21px;
  height: 110px;
  & > a {
    width: 241px;
    height: 65px;
    font-family: YouSheBiaoTiHei;
    font-size: 34px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 2px;
    color: #b7dfff;
    text-align: center;
    line-height: 65px;
  }

  .active {
    color: #fff;
    background: url("~@/assets/privateOrder/topNar/bg_nav_item.png");
    background-size: 100% 100%;
  }
} */

.time-wrap {
  display: flex;
  align-items: center;
  position: absolute;
  left: 15px;
  top: 33px;

  .icon {
    width: 100px;
    height: 100px;
  }

  .date {
    font-family: DIN-Medium;
    font-size: 32px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 32px;
    letter-spacing: 2px;
    color: #b7dfff;
    margin-left: -15px;
    margin-top: -17px;
  }

  .time {
    font-family: DIN-Bold;
    margin-left: 48px;
    margin-top: -17px;
    font-size: 37px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 32px;
    letter-spacing: 2px;
    color: #ffffff;
  }
}

.year-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  align-content: space-between;
  right: 30px;
  width: 460px;
  height: 67px;
  //background-color: #1fb6e5;
}

.time_name {
  width: 110px;
  text-align: center;
  display: inline-block;
  height: 27px;
  font-family: SourceHanSansCN-Regular;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 27px;
  letter-spacing: 0;
  color: #68cff9;
  cursor: pointer;
}
.active_time {
  width: 110px;
  text-align: center;
  display: inline-block;
  height: 27px;
  font-family: SourceHanSansCN-Bold;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 54px;
  letter-spacing: 0;
  color: #ffffff;
  cursor: pointer;
}
.line-style {
  display: inline-block;
  width: 2px;
  height: 24px;
  background: #b7dfff url("~@/assets/privateOrder/topNar/top-cutline.png");
  opacity: 0.5;
  margin: 0 30px;
}
.wrap-bottom {
  margin-top: 10px;
  width: 110px;
  height: 4px;
  background: url("~@/assets/privateOrder/topNar/tab-act-line.png") 50% 100%;
  border-radius: 2px;
}
.line {
  position: absolute;
  z-index: 999;
}

.line-top {
  top: 8px;
  left: 30px;
}

.line-bottom {
  bottom: 8px;
  left: 30px;
}

.line-left {
  top: 15px;
  left: 10px;
  height: 1590px;
}

.line-right {
  top: 15px;
  right: 10px;
  height: 1590px;
}

.main-container {
  position: relative;
  top: 0;
  left: 0;
  width: $ScreenWidth;
  height: 100%;
  z-index: 1;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: rgba(#1fb6e5, 0.06);
}
.screen-dialog {
  position: absolute;
  z-index: 9999;
  .dialog-btn {
    background: url("~@/assets/dialog/btn-bg.png") no-repeat;
    background-size: 100% 100%;
    width: 160px;
    height: 50px;
    font-family: SourceHanSansCN-Regular;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 10px;
    letter-spacing: 2px;
    color: #ffffff;
  }
  // ::v-deep .el-button {
  //   border: none;
  // }
  .dialog-footer :hover {
    .dialog-btn {
      background: url("~@/assets/dialog/btn-bg-act.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  ::v-deep .el-dialog__header {
    background: rgba(255, 255, 255, 0);
    text-align: left;
    padding-left: 40px;
    .el-dialog__title {
      font-family: SourceHanSansCN-Bold, san-serif;
      font-size: 24px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 38px;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }
  ::v-deep .el-dialog {
    background: url("~@/assets/dialog/弹窗背景-一般.png") no-repeat;
    width: 1820px;
    height: 1092px;
    overflow: hidden;
    background-size: 100% 100%;
  }
  ::v-deep .el-dialog_body {
    height: 1092px;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 0;
    font-size: 30px;
    font-weight: bolder;
  }
  ::v-deep .el-dialog__footer {
    background: rgba(255, 255, 255, 0);
  }
  ::v-deep .el-table th.el-table__cell {
    background-color: rgba(0, 0, 0, 0);
  }
  ::v-deep .el-table {
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
    border: none;
  }
  ::v-deep.el-table::before {
    display: none;
  }
  ::v-deep .el-table tr {
    background-color: rgba(0, 0, 0, 0);
  }
  ::v-deep .el-table .cell {
    font-size: 26px;
    height: 40px;
    line-height: 40px;
  }
  ::v-deep .el-table__header {
    background-color: rgba(76, 162, 248, 0.2);
    color: #fff;
  }
  ::v-deep .el-table__row {
    font-family: SourceHanSansCN-Regular, sans-serif;
    font-size: 26px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #b7dfff;
    background-color: rgba(106, 184, 255, 0.2);
    border: solid 1px #6ab8ff;
  }
  ::v-deep .el-table {
    tbody tr {
      &:hover {
        td {
          background-color: rgba(228, 223, 223, 0.3) !important;
        }
      }
    }
  }
  ::v-deep .el-table td.el-table__cell {
    border: none;
  }
  ::v-deep .el-table th.el-table__cell {
    border: none;
  }
}
</style>