Merge branch 'master' of http://192.168.5.5:10010/r/web/vue-smart-ai

ZZJ

2021-11-03 b4d2703e653bf702d705b18c20d9edb9066c7c8a

 src/pages/cameraAccess/components/SeparateRules.vue

@@ -28,25 +28,13 @@
          </div>

          <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
            <span class="label">分辨率</span>
            <el-select
              v-model="Camera.selectResolution"
              placeholder="请选择"
              size="mini"
              style="width: 134px;
                margin-left:10px;"
            >
              <el-option
                v-for="item in Camera.resolutionOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <span
              class="label"
            >分辨率: {{(Camera.camearInfo.resolution_width == 0 || Camera.camearInfo.resolution_height == 0) ? '本机分辨率': `${Camera.camearInfo.resolution_width} * ${Camera.camearInfo.resolution_height}` }}</span>
          </div>

          <div v-if="Camera.analytics" class="flex-box">
            <span class="label">智能计算节点: {{ Camera.runServerName}}</span>
            <span class="label">SmartAI节点: {{ Camera.runServerName}}</span>
          </div>

          <div v-if="Camera.analytics" class="flex-box">
@@ -144,7 +132,7 @@
                ></polygon-canvas>
              </template>
              <template v-else>
                <div style="width:100%" v-loading='getStackFileLoading'>
                <div style="width:100%" v-loading="getStackFileLoading">
                  <swiper
                    ref="swiper"
                    :auto-update="true"
@@ -182,12 +170,20 @@
                      </div>
                    </swiper-slide>
                  </swiper>
                  <div class="swiper-local-prev" v-show="swipercanvasData.length>1" @click="prevClick">
                  <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="swiper-local-next"
                    v-show="swipercanvasData.length>1"
                    @click="nextClick"
                  >
                    <div class="icon-btn" slot="button-next">
                      <i class="iconfont iconyou1"></i>
                    </div>
@@ -262,11 +258,11 @@
    }
  },
  computed: {
    cameraType () {
    cameraType() {
      return this.TreeDataPool.treeActiveName === 'camera' ? "camera" : "dataStack"
    }
  },
  data () {
  data() {
    return {
      mockSceneData: [],
      loading: false,
@@ -313,20 +309,21 @@
      stackFilesSize: 5,
    };
  },
  mounted () {
  mounted() {
    this.mockAsync();
    this.PollData.statistics();

  },
  watch: {
    'Camera.cameraId':{
      handler(n,o){
    'Camera.cameraId': {
      handler(n, o) {
        if (n) {
          if (this.TreeDataPool.treeActiveName == "dataStack") {
            this.stackFilesPage = 1;
            this.stackFilesSize = 5;
            this.stackId = n;
            if(this.stackId){
            if (this.stackId) {
              // console.log('getStackFiles')
              this.swipercanvasData = [];
              this.getStackFiles()
            }
@@ -336,45 +333,44 @@
    }
  },
  methods: {
    prevClick(){
      console.log(this.swiperIndex)
      console.log(this.$refs.swiper.swiper.activeIndex)
      if(this.swiperIndex == 0){
        console.log('本次分页的第一条')
    prevClick() {
      // console.log(this.swiperIndex)
      // console.log(this.$refs.swiper.swiper.activeIndex)
      if (this.swiperIndex == 0) {
        // console.log('本次分页的第一条')
        //请求上一页
        if(this.stackFilesPage > 1){
        if (this.stackFilesPage > 1) {
          this.stackFilesPage--;
          this.getStackFiles();
        }else{
          this.getStackFiles(true);
        } else {
          this.$message({
            type:'info',
            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('最后一张,加载更多')
    nextClick() {
      if (this.swiperIndex == this.swipercanvasData.length - 1) {
        // 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 => {
        if (res && res.success ) {
          if(res.data.dataList.length > 0){
        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,
                baseImg: item.type == 2 ? `/files/${item.path.substr(item.path.lastIndexOf('/') + 1)}` : item.snapshot_url,
                type: item.type,
                id: item.id,
                loading: false
@@ -382,31 +378,32 @@
            });
            this.swiperIndex = 0;
            this.$refs.swiper.swiper.activeIndex = 0;
            
          }else{
            console.log(this.swipercanvasData)
            this.$message({
              type:'info',
              message:'已无更多数据!'
            });

          } else {
            if (onClick) {
              this.$message({
                type: 'warning',
                message: '已无更多数据!'
              });
            }
          }
        }else{
          console.log(this.swipercanvasData)
        } else {
          // console.log(this.swipercanvasData)
          this.$message({
            type:'error',
            message:'数据请求失败,请稍后重试!'
            type: 'error',
            message: '数据请求失败,请稍后重试!'
          });
        }
        this.getStackFileLoading = false;  
        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"] },
@@ -432,29 +429,35 @@
        ];
      }, 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 => {
        this.Camera.getPolygon();
        this.Camera.getCameraTask();
        //this.Camera.getCameraTask();
      });
    },
    refresh (url) {
    refresh(url) {
      this.Camera.baseImg = url
    },
    // 初始化摄像机信息，父组件调用
    async initCameraData (id) {
    async initCameraData(id) {
      this.Camera = new VideoRuleData();

      if (id && id !== "") {
        this.loading = false;
        this.Camera.cameraId = id;
        await this.Camera.update();
        debugger

      }

      this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
@@ -468,7 +471,7 @@

    },

    saveSceneRule (groupRule) {
    saveSceneRule(groupRule) {
      const payload = { ...groupRule }
      payload.cameraIds = [this.Camera.cameraId];
      let _this = this;
@@ -480,21 +483,21 @@
            message: "策略保存成功！"
          });
          //刷新左侧树
          debugger

          _this.$root.$children[0].$children[0].querySearchAsync('camera')

        }
      });
    },
    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) {
@@ -530,8 +533,9 @@
      this.PollData.statisticTaskInfo();
    },
    //实时、轮询切换
    changePoll (row) {
    changePoll(row) {
      //判断是新增还是更新
      debugger
      if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
        if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
          if (row.value) {
@@ -579,7 +583,7 @@
      }
    },
    //复制
    ctrlC () {
    ctrlC() {
      this.TreeDataPool.ctrlCameraId = this.Camera.cameraId;
      this.TreeDataPool.ctrlCameraName = this.Camera.cameraName;
      this.$notify({
@@ -587,7 +591,7 @@
        message: "复制算法成功！"
      })
    },
    ctrlV () {
    ctrlV() {
      if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) {
        this.$notify({
          type: "warning",
@@ -624,8 +628,8 @@
};
</script>
<style lang="scss">
.el-message--info .el-message__content{
  color: #999;
.el-message--info .el-message__content {
  color: #999 !important;
}
.swiper-container {
  margin-left: auto;
@@ -1011,7 +1015,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;