修复数据栈无法绘制区域的问题

zhangzengfei

2020-10-14 5f93eed344a797eb09018bb37df7d8ea0a1f1ec0

修复数据栈无法绘制区域的问题

 src/pages/cameraAccess/components/SeparateRules.vue

@@ -270,11 +270,11 @@
    }
  },
  computed: {
    cameraType () {
    cameraType() {
      return this.TreeDataPool.treeActiveName === 'camera' ? "camera" : "dataStack"
    }
  },
  data () {
  data() {
    return {
      mockSceneData: [],
      loading: false,
@@ -321,21 +321,21 @@
      stackFilesSize: 5,
    };
  },
  mounted () {
  mounted() {
    this.mockAsync();
    this.PollData.statistics();

  },
  watch: {
    'Camera.cameraId': {
      handler (n, o) {
      handler(n, o) {
        if (n) {
          if (this.TreeDataPool.treeActiveName == "dataStack") {
            this.stackFilesPage = 1;
            this.stackFilesSize = 5;
            this.stackId = n;
            if (this.stackId) {
              console.log('getStackFiles')
              // console.log('getStackFiles')
              this.swipercanvasData = [];
              this.getStackFiles()
            }
@@ -345,15 +345,15 @@
    }
  },
  methods: {
    prevClick () {
      console.log(this.swiperIndex)
      console.log(this.$refs.swiper.swiper.activeIndex)
    prevClick() {
      // console.log(this.swiperIndex)
      // console.log(this.$refs.swiper.swiper.activeIndex)
      if (this.swiperIndex == 0) {
        console.log('本次分页的第一条')
        // console.log('本次分页的第一条')
        //请求上一页
        if (this.stackFilesPage > 1) {
          this.stackFilesPage--;
          this.getStackFiles();
          this.getStackFiles(true);
        } else {
          this.$message({
            type: 'info',
@@ -363,17 +363,15 @@

      }
    },
    nextClick () {
      console.log(this.swiperIndex)
      console.log(this.$refs.swiper.swiper.activeIndex)
    nextClick() {
      if (this.swiperIndex == this.swipercanvasData.length - 1) {
        console.log('最后一张,加载更多')
        // console.log('最后一张,加载更多')
        //请求下一页
        this.stackFilesPage++;
        this.getStackFiles();
        this.getStackFiles(true);
      }
    },
    getStackFiles () {
    getStackFiles(onClick = false) {
      this.getStackFileLoading = true;
      let _this = this;
      findAllFileByStackId({ name: '', stackId: this.stackId, page: this.stackFilesPage, size: this.stackFilesSize, type: 0 }).then(res => {
@@ -390,20 +388,19 @@
                loading: false
              }
            });
            console.log(_this.swipercanvasData)
            console.log(this.swipercanvasData)
            this.swiperIndex = 0;
            this.$refs.swiper.swiper.activeIndex = 0;

          } else {
            console.log(this.swipercanvasData)
            this.$message({
              type: 'info',
              message: '已无更多数据!'
            });
            if (onClick) {
              this.$message({
                type: 'warning',
                message: '已无更多数据!'
              });
            }
          }
        } else {
          console.log(this.swipercanvasData)
          // console.log(this.swipercanvasData)
          this.$message({
            type: 'error',
            message: '数据请求失败,请稍后重试!'
@@ -411,14 +408,14 @@
        }
        this.getStackFileLoading = false;
      }).catch(e => {
        console.log(e);
        // console.log(e);
        this.getStackFileLoading = false;
      });
    },
    swiperSlideChange () {
    swiperSlideChange() {
      this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
    },
    mockAsync () {
    mockAsync() {
      setTimeout(() => {
        this.mockSceneData = [
          { scenename: "name1", id: 1, icon: ["iconrenlianjiance", "icongetijingzhi"] },
@@ -444,10 +441,16 @@
        ];
      }, 3000)
    },
    drawBaseImg () {
      this.$refs.canvas.showModal();
    drawBaseImg() {
      if (Array.isArray(this.$refs.canvas)) {
        if (this.$refs.canvas.length > 0) {
          this.$refs.canvas[0].showModal();
        }
      } else {
        this.$refs.canvas.showModal();
      }
    },
    getCanvasData (data) {
    getCanvasData(data) {
      let polyon = { ...data };
      polyon.camera_id = this.Camera.cameraId;
      savePolygon(polyon).then(rsp => {
@@ -455,11 +458,11 @@
        this.Camera.getCameraTask();
      });
    },
    refresh (url) {
    refresh(url) {
      this.Camera.baseImg = url
    },
    // 初始化摄像机信息，父组件调用
    async initCameraData (id) {
    async initCameraData(id) {
      this.Camera = new VideoRuleData();

      if (id && id !== "") {
@@ -480,7 +483,7 @@

    },

    saveSceneRule (groupRule) {
    saveSceneRule(groupRule) {
      const payload = { ...groupRule }
      payload.cameraIds = [this.Camera.cameraId];
      let _this = this;
@@ -498,15 +501,15 @@
        }
      });
    },
    delScenRule () {
    delScenRule() {
      this.Camera.update();
    },
    changeLoading (params) {
    changeLoading(params) {
      this.loading = params
      // console.log(this.loading,'changeLoading',params)
    },
    //是否进行视频分析处理
    pollEnable (row) {
    pollEnable(row) {
      let val = 0
      if (row) {
        if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
@@ -542,7 +545,7 @@
      this.PollData.statisticTaskInfo();
    },
    //实时、轮询切换
    changePoll (row) {
    changePoll(row) {
      //判断是新增还是更新
      if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
        if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
@@ -591,7 +594,7 @@
      }
    },
    //复制
    ctrlC () {
    ctrlC() {
      this.TreeDataPool.ctrlCameraId = this.Camera.cameraId;
      this.TreeDataPool.ctrlCameraName = this.Camera.cameraName;
      this.$notify({
@@ -599,7 +602,7 @@
        message: "复制算法成功！"
      })
    },
    ctrlV () {
    ctrlV() {
      if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) {
        this.$notify({
          type: "warning",
@@ -1023,7 +1026,7 @@
  }
}
.el-loading-spinner {
  background: url('/images/cameraAccess/loading.gif') no-repeat;
  background: url("/images/cameraAccess/loading.gif") no-repeat;
  top: 50%;
  margin-top: -21px;
  width: calc(100% - 260px) !important;

 src/pages/cameraAccess/index/VideoManage.vue

@@ -1,6 +1,12 @@
<template>
  <div class="s-video-manage">
    <el-tabs class="video-tab" ref="topTab" v-model="activeName" type="border-card" @tab-click="handleClick">
    <el-tabs
      class="video-tab"
      ref="topTab"
      v-model="activeName"
      type="border-card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        :label="firstLabeName"
        name="camera-info"
@@ -108,14 +114,11 @@
    },
    "DataStackPool.selectedDir": {
      handler(node, oldNode) {
        console.log(this.activeName)
        console.log(node, '勾选本地视频')
        if (this.TreeDataPool.treeActiveName !== 'dataStack') {
          return
        }
        this.$nextTick(() => {
          if (this.activeName == "camera-info") {
            console.log("dataStackInfo.selectDir(node)")
            this.$refs.dataStackInfo.selectDir(node);
          } else if (this.activeName == "separate-rule" && node.length !== 0) {
            this.$refs.sepRule.initCameraData(node.id);
@@ -124,7 +127,7 @@
      },
      deep: true
    },
    

  },
  created() {
    if (this.TreeDataPool.treeActiveName == 'camera') {
@@ -230,7 +233,7 @@
<style lang="scss">
.s-video-manage {
  width: 100%;
  min-width:1599px;
  min-width: 1599px;
  height: 100%;
  float: left;
  box-sizing: border-box;
@@ -250,8 +253,8 @@
  .el-tabs--border-card {
    height: 100%;
    width: 100%;
    &.video-tab{
      &>.el-tabs__header{
    &.video-tab {
      & > .el-tabs__header {
        //position: fixed;
        //position: absolute;
        //top:0;