处理外网端口映射无法跳转的问题

zhangzengfei

2020-09-17 d4cd7df0bd1484c31e37bcb0642e89ecdcf7ab29

 src/pages/cameraAccess/components/LinkageRule.vue

@@ -1,28 +1,45 @@
<template>
  <div class="s-linkage-rules">
    <div class="top">
    <!-- <div class="top">
      <p style="text-align:left;margin-bottom: 14px;">
        <b style="font-size: 14px;line-height: 18px;">已选算法</b>
        <b style="font-size: 14px;line-height: 18px;">场景</b>
      </p>

      <div class="clearfix">
      <div class="clearfix" style="min-width:1570px;">
        <div class="slide-scene">
          <span class="task-tip" v-if="tableRuleList.length == 0 ">暂无算法，请在独立规则中选择算法</span>
          <slide-scene :sceneData="tableRuleList"></slide-scene>
        </div>
        <!-- <slide-scene :sceneData="Camera.rules"></slide-scene> -->
        <!-- 系统信息 -->
        <div class="top-right">
          <sysinfo
            v-if="showSysInfo"
            style="margin-left: 10px;margin-top: -10px;"
            style="margin-top: -10px;"
            :ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'"
            :showRealPoll="this.TreeDataPool.treeActiveName == 'camera'"
          />
        </div>
      </div>
    </div> -->
    <div class="top" >
      <p class="task-css">
        <b style="font-size: 14px; line-height: 18px;">场景</b>
      </p>
      <div class="clearfix">
        <slide-scene :sceneData="tableRuleList"></slide-scene>
        <div class="top-right">
          <sysinfo
            v-if="showSysInfo"
            style="margin-top: -10px;"
            :ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'"
            :showRealPoll="this.TreeDataPool.treeActiveName == 'camera'"
          />
          <!-- <sysinfo
            :showRealPoll="cameraType === 'camera'"
            :ShowLocalVedio="cameraType === 'dataStack'"
            v-if="showSysInfo"
            style="margin-top:-10px"
          /> -->
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="devide"></div>
      <div class="bottom-right">
@@ -106,7 +123,8 @@
import VideoRuleData from "@/Pool/VideoRuleData";
import polygonCanvas from "@/components/canvas";
import TimeSlider from "./TimeSlider";
import Sysinfo from "./SystemInfo"
//import Sysinfo from "./SystemInfo"
import Sysinfo from "@/components/subComponents/SystemInfo";
import SceneRule from "./SceneRule";
import SlideScene from "./scene/SlideScene";

@@ -276,7 +294,7 @@
.s-linkage-rules {
  width: 100%;
  //height: 100%;
  padding: 13px 0 20px;
  //padding: 13px 0 20px;
  position: relative;
  .devide{
    height: 10px;
@@ -286,20 +304,17 @@
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    top: 0;
    .swiper-box {
      height: 100%;
      float: left;
      width: 48%;
      width: 46%;
      margin-top: -10px;
      position: relative;
    }
    .swiper-container {
      position: initial;
      min-width: 472px;
      width: 80%;

      // height: 124px;
      width: 86%;
    }
    .swiper-slide {
      position: relative;
@@ -338,10 +353,6 @@
          backdrop-filter: blur(1px) brightness(100%);
          display: none;
        }

        // @media screen and(max-width: 1280px) {
        //   max-width: 110px;
        // }
        @media screen and(max-width: 1440px) {
          max-width: 110px;
        }
@@ -383,8 +394,17 @@
    }
    .top-right {
      float: right;
      width: 52%;
      width: 54%;
      height: 144px;
      .card-box{
        width: 54%!important;
      }
      .eCharts-box{
        width: 45%;
        canvas{
          width: 98%!important;
        } 
      }
    }
    .task-css {
      text-align: left;
@@ -394,7 +414,7 @@

  .bottom {
    width: 100%;
    
    margin-bottom: 20px;
    .bottom-side {
      height: 100%;
      width: 250px;
@@ -548,13 +568,7 @@
  .add-btn:hover {
    color: #2249b4;
  }
  .task-tip {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #cccccc;
    margin-top: 10%;
    margin-left: 38%;
  }
  
}
</style>
<style lang="scss" scoped>