问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 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>
@@ -93,6 +109,7 @@
          :tableRuleList="tableRuleList"
          :onSaveScene="saveSceneRule"
          @delete-rule="showRules"
          v-loading="loadingRuleList"
        ></scene-rule>
      </div>
    </div>
@@ -108,7 +125,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";

@@ -122,26 +140,13 @@
  },
  computed: {
    selectedCameraIds() {
      let ids = [];
      if (this.TreeDataPool.treeActiveName == 'dataStack') {
        if (this.TreeDataPool.checkedLocalVedio.length > 0) {
          ids = this.TreeDataPool.checkedLocalVedio.map(i => {
            return i.id;
          })

        }
      } else {
        if (this.TreeDataPool.selectedNodes.length > 0) {
          ids = this.TreeDataPool.selectedNodes;
        }
      }

      return ids;
      return this.TreeDataPool.selectedNodes;
    }
  },
  data() {
    return {
      loading: false,
      loadingRuleList: false,
      Carmeras: [],
      Camera: new VideoRuleData(),
      tasksTable: {},
@@ -172,7 +177,8 @@
          prevEl: ".pre-border"
        }
      },
      showSysInfo: false
      showSysInfo: false,
      requestSeq: ""
    };
  },
  watch: {
@@ -191,17 +197,12 @@
    initCameraData() {
      this.$nextTick(() => {
        this.Carmeras = [];
        this.loading = false;
        this.showSysInfo = true
        if (this.TreeDataPool.treeActiveName == 'dataStack') {
          this.TreeDataPool.checkedLocalVedio.forEach(camera => {
            this.Carmeras.push(new VideoRuleData(camera.id));
          });
        } else {
          this.TreeDataPool.selectedNodes.forEach(camera => {
            this.Carmeras.push(new VideoRuleData(camera));
          });
        }
        this.showSysInfo = true;

        this.selectedCameraIds.forEach(cid => {
          this.Carmeras.push(new VideoRuleData(cid));
        });

        this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
        this.showRules();
      })
@@ -220,14 +221,36 @@
      }
      this.swipercanvasData = swipers;
    },
    refresh(url, id) {
      this.swipercanvasData.forEach(data => {
        if (data.cameraId == id) {
          data.baseImg = url;
        }
      })
      //this.Camera.baseImg = url
    },
    getCanvasData() { },
    newUid() {

      let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
      let originChar = "0123456789abcdef";
      let len = originChar.length;
      return originStr.replace(/x/g, function (match) {
        return originChar.charAt(Math.floor(Math.random() * len));
      });
    },
    showRules() {
      this.tableRuleList = [];

      if (this.selectedCameraIds.length > 0) {
        this.loadingRuleList = true;
        let seq = this.newUid();
        this.requestSeq = seq;

        getLinkSceneRule({ cameraIds: this.selectedCameraIds }).then(
          rsp => {
            if (rsp && rsp.success) {
            this.loadingRuleList = false;
            if (rsp && rsp.success && seq === this.requestSeq) {

              this.tableRuleList = rsp.data;

@@ -238,19 +261,30 @@
            }
            // this.TreeDataPool.fetchTreeData();
          }
        );
        ).catch(() => {
          this.loadingRuleList = false;
        });
      }

    },

    saveSceneRule(groupRule) {
      const payload = { ...groupRule }
      if (!payload.rules) {
        this.$message({
          type: "warning",
          message: "规则参数有误"
        });

        return
      }

      payload.cameraIds = this.selectedCameraIds;

      saveLinkScene(payload).then(rsp => {
        if (rsp && rsp.success) {
          //this.Camera.update();
          this.initCameraData();
          // this.showRules();
          this.$notify({
            type: "success",
            message: "任务保存成功！"
@@ -264,7 +298,7 @@
      }).catch(err => {
        this.$message({
          type: "error",
          message: "保存失败！" + err.data
          message: "保存失败！"
        });
      });
    },
@@ -277,26 +311,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 +371,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 +412,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 +432,7 @@

  .bottom {
    width: 100%;
    height: calc(100% - 190px);
    position: absolute;
    top: 190px;
    margin-bottom: 20px;
    .bottom-side {
      height: 100%;
      width: 250px;
@@ -419,14 +458,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 {
@@ -550,13 +585,6 @@
  }
  .add-btn:hover {
    color: #2249b4;
  }
  .task-tip {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #cccccc;
    margin-top: 10%;
    margin-left: 38%;
  }
}
</style>