数据栈独立场景显示文件底图

hanbaoshan

2020-09-24 bb228ead0110a8626a0d0bceeea74522ff1a0a8f

 src/pages/cameraAccess/components/SeparateRules.vue

@@ -15,11 +15,7 @@
            </span>
          </div>

          <div
            v-if="Camera.analytics"
            class="flex-box"
            v-show="cameraType === 'camera'"
          >
          <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
            <span class="label" >处理方式</span>
            <toggle-button
              :value="Camera.dealWay"
@@ -31,11 +27,7 @@
            />
          </div>

          <div
            v-if="Camera.analytics"
            class="flex-box"
            v-show="cameraType === 'camera'"
          >
          <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
            <span class="label" >分辨率</span>
            <el-select
              v-model="Camera.selectResolution"
@@ -57,10 +49,7 @@
            <span class="label" >智能计算节点: {{ Camera.runServerName}}</span>
          </div>

          <div
            v-if="Camera.analytics"
            class="flex-box"
          >
          <div v-if="Camera.analytics" class="flex-box">
            <span class="label">算法快速通道</span>
            <div class="channel flex-box" >
              <el-tooltip
@@ -133,6 +122,7 @@
              >{{ Camera.camearInfo.alias ? Camera.camearInfo.alias: Camera.camearInfo.name }}</b>
            </div>
            <div class="img-box">
              <template v-if="TreeDataPool.treeActiveName == 'camera'">
              <polygon-canvas
                class="cavas"
                ref="canvas"
@@ -152,6 +142,58 @@
                @changeLoading="changeLoading"
                @refresh="refresh"
              ></polygon-canvas>
              </template>
              <template v-else>
                <div style="width:100%" v-loading='getStackFileLoading'>
                  <swiper
                    ref="swiper"
                    :auto-update="true"
                    :options="canvasSwiperOption"
                    @slideChange="swiperSlideChange"
                    class="swiper-box-container2"
                    style="width:100%"
                  >
                    <swiper-slide v-for="(data, index) in swipercanvasData" :key="index">
                      <div>
                        <b
                          class="video-title"
                          style="font-size:14px;margin-top:-10px"
                        >{{ data.name }}</b>
                        <polygon-canvas
                          class="cavas"
                          ref="canvas"
                          v-if="showCanvas"
                          v-loading="loading"
                          element-loading-text="刷新中，请稍等..."
                          element-loading-background="rgba(0, 0, 0, 0.8)"
                          :isShowDrawArrow="false"
                          :isShowRefresh="false"
                          :sourceType="data.type"
                          :disabled="false"
                          :snapshot_url="data.baseImg"
                          :canvasDataShow="Camera.canvasData"
                          :currentCameraId="data.stackId"
                          :loading="data.loading"
                          :canvasWidth="canvasWidth"
                          :canvasHeight="canvasHeight"
                          @fromCanvas="getCanvasData"
                          @changeLoading="changeLoading"
                        ></polygon-canvas>
                      </div>
                    </swiper-slide>
                  </swiper>
                  <div class="swiper-local-prev" v-show="swipercanvasData.length>1" @click="prevClick">
                    <div class="icon-btn" slot="button-prev">
                      <i class="iconfont iconzuo"></i>
                    </div>
                  </div>
                  <div class="swiper-local-next" v-show="swipercanvasData.length>1" @click="nextClick">
                    <div class="icon-btn" slot="button-next">
                      <i class="iconfont iconyou1"></i>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div style="float:left;width:calc(10% - 90px);height:100%;"></div>
@@ -192,7 +234,7 @@
} from '@/api/scene'

import { changeRunType } from "@/api/pollConfig";

import { findAllFileByStackId } from "@/api/localVedio";
import VideoRuleData from "@/Pool/VideoRuleData";

import TimeSlider from "./TimeSlider";
@@ -201,6 +243,8 @@
import Sysinfo from "@/components/subComponents/SystemInfo";
import SceneRule from "./SceneRule";
import SlideScene from "./scene/SlideScene";
import { duration } from 'moment';


export default {
  components: {
@@ -228,6 +272,18 @@
      loading: false,
      Camera: new VideoRuleData(),
      runType: -1,
      getStackFileLoading: false,
      canvasSwiperOption: {
        grabCursor: true,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction"
        },
        navigation: {
          nextEl: ".swiper-local-next",
          prevEl: ".swiper-local-prev"
        }
      },
      swiperOption: {
        slidesPerView: 5,
        spaceBetween: 8,
@@ -249,15 +305,107 @@
      showSysInfo: false,
      showCanvas: true,
      canvasWidth: 576,
      canvasHeight: 324
      canvasHeight: 324,
      stackId: '',
      swiperIndex: 0,
      swipercanvasData: [],
      stackFilesPage: 1,
      stackFilesSize: 5,
    };
  },
  mounted() {
    this.mockAsync();
    this.PollData.statistics();
  },

  },
  watch: {
    'Camera.cameraId':{
      handler(n,o){
        if (n) {
          if (this.TreeDataPool.treeActiveName == "dataStack") {
            this.stackFilesPage = 1;
            this.stackFilesSize = 5;
            this.stackId = n;
            if(this.stackId){
              this.swipercanvasData = [];
              this.getStackFiles()
            }
          }
        }
      }
    }
  },
  methods: {
    prevClick(){
      console.log(this.swiperIndex)
      console.log(this.$refs.swiper.swiper.activeIndex)
      if(this.swiperIndex == 0){
        console.log('本次分页的第一条')
        //请求上一页
        if(this.stackFilesPage > 1){
          this.stackFilesPage--;
          this.getStackFiles();
        }else{
          this.$message({
            type:'info',
            message:'当前已是第一页'
          });
        }
        
      }
    },
    nextClick(){
      console.log(this.swiperIndex)
      console.log(this.$refs.swiper.swiper.activeIndex)
      if(this.swiperIndex == this.swipercanvasData.length-1){
        console.log('最后一张,加载更多')
        //请求下一页
        this.stackFilesPage++;
        this.getStackFiles();
      }
    },
    getStackFiles () {
      this.getStackFileLoading = true;
      findAllFileByStackId({ name: '', stackId: this.stackId, page: this.stackFilesPage, size: this.stackFilesSize, type: 0 }).then(res => {
        if (res && res.success ) {
          if(res.data.dataList.length > 0){
            this.swipercanvasData = [];
            this.swipercanvasData = res.data.dataList.map(item => {
              return {
                name: item.name,
                stackId: item.stack_id,
                baseImg: item.type == 2 ? `/files/${item.identifier}.jpg` : item.snapshot_url,
                type: item.type,
                id: item.id,
                loading: false
              }
            });
            this.swiperIndex = 0;
            this.$refs.swiper.swiper.activeIndex = 0;
            
          }else{
            console.log(this.swipercanvasData)
            this.$message({
              type:'info',
              message:'已无更多数据!'
            });
          }
        }else{
          console.log(this.swipercanvasData)
          this.$message({
            type:'error',
            message:'数据请求失败,请稍后重试!'
          });
        }
        this.getStackFileLoading = false;  
      }).catch(e => {
        console.log(e);
        this.getStackFileLoading = false;
      });
    },
    swiperSlideChange () {
      this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
    },
    mockAsync() {
      setTimeout(() => {
        this.mockSceneData = [
@@ -306,6 +454,7 @@
        this.loading = false;
        this.Camera.cameraId = id;
        await this.Camera.update();
        debugger
      }

      this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
@@ -318,6 +467,7 @@
      })

    },

    saveSceneRule(groupRule) {
      const payload = { ...groupRule }
      payload.cameraIds = [this.Camera.cameraId];
@@ -474,6 +624,47 @@
};
</script>
<style lang="scss">
.el-message--info .el-message__content{
  color: #999;
}
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-local-prev,
.swiper-local-next {
  width: 40px;
  height: 40px;
  position: absolute;
  background: #8888;
  top: 40%;
  z-index: 99;
  border-radius: 4em;
  outline: none;
  .icon-btn {
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 38px;
    cursor: pointer;
  }
}
.swiper-local-prev {
  left: 10px;
}
.swiper-local-prev:hover {
  background: #666;
}
.swiper-local-next {
  left: 90%;
}
.swiper-local-next:hover {
  background: #666;
}
.s-separate-rules {
  width: 100%;
  padding: 13px 0 20px;
@@ -495,11 +686,11 @@
        height: 30px;
        .flex-box{
          .label{
            &+label,&+div{
            & + label,
            & + div {
              margin-left: 10px;
              line-height: 1;
            }
            
          }
        }
      }
@@ -517,7 +708,7 @@
  }
  .devide{
    height: 10px;
    background: #E9EBF2;
    background: #e9ebf2;
  }
  .top {
    width: 100%;
@@ -611,6 +802,7 @@
    .swiper-next-border:hover {
      background: #666;
    }

    .top-right {
      float: right;
      width: 54%;
@@ -819,7 +1011,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;