标定添加关联摄像机tab,绘制区域组件参数更新

hanbaoshan

2020-12-20 ecb6cadc3f016cf9968f48e0cc77479a1e56365b

 src/pages/cameraAccess/components/LinkageRule.vue

@@ -1,32 +1,47 @@
<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>
      <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: 25px;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
        style="width: calc(100% + 80px);height: 10px;background-color: #E9EBF2;p;position:relative;left:-50px"
      ></div>
      <div class="devide"></div>
      <div class="bottom-right">
        <div class="draw-and-time-box">
          <div class="draw-box">
@@ -59,6 +74,7 @@
                    :currentCameraId="data.cameraId"
                    @changeLoading="changeLoading"
                    @fromCanvas="getCanvasData"
                    @refresh="refresh"
                  ></polygon-canvas>
                </swiper-slide>
              </swiper>
@@ -108,7 +124,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";

@@ -192,7 +209,7 @@
      this.$nextTick(() => {
        this.Carmeras = [];
        this.loading = false;
        this.showSysInfo = true
        this.showSysInfo = true;
        if (this.TreeDataPool.treeActiveName == 'dataStack') {
          this.TreeDataPool.checkedLocalVedio.forEach(camera => {
            this.Carmeras.push(new VideoRuleData(camera.id));
@@ -219,6 +236,14 @@
        });
      }
      this.swipercanvasData = swipers;
    },
    refresh(url,id) {
      this.swipercanvasData.forEach(data=>{
        if(data.cameraId == id){
          data.baseImg = url;
        }
      })
      //this.Camera.baseImg = url
    },
    getCanvasData() { },
    showRules() {
@@ -277,26 +302,28 @@
<style lang="scss">
.s-linkage-rules {
  width: 100%;
  height: 100%;
  //height: 100%;
  //padding: 13px 0 20px;
  position: relative;
  .devide{
    height: 10px;
    background: #E9EBF2;
  }
  .top {
    width: 100%;
    height: 174px;
    position: relative;
    top: 0;
    padding: 10px 20px;
    box-sizing: border-box;
    .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;
@@ -335,10 +362,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;
        }
@@ -380,8 +403,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;
@@ -391,9 +423,7 @@

  .bottom {
    width: 100%;
    height: calc(100% - 190px);
    position: absolute;
    top: 190px;
    margin-bottom: 20px;
    .bottom-side {
      height: 100%;
      width: 250px;
@@ -419,14 +449,10 @@
      }
    }
    .bottom-right {
      width: calc(100% + 30px);
      height: 100%;
      float: left;
      overflow: auto;
      padding: 10px 0px;
      padding: 10px 20px 20px;
      box-sizing: border-box;
      .draw-and-time-box {
        height: 430px;
        height: 410px;
        width: 100%;
        .draw-box,
        .time-box {
@@ -551,13 +577,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>