数据栈文件上传动态限制类型调试,标注切换摄像机获取底图

hanbaoshan

2020-10-27 da98d2a8a686cde09b20345e4a2b55a85410fde4

数据栈文件上传动态限制类型调试,标注切换摄像机获取底图

 src/components/subComponents/FileUpload/btn.vue

@@ -28,8 +28,20 @@
      }
    }
  },
  watch:{
    attrs:{
      handler(n,o){
        debugger
        this.$nextTick(()=>{
          this.uploader.uploader.assignBrowse(this.$refs.btn, this.directory, this.single, n)
        })
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log('attrs',this.attrs)
      this.uploader.uploader.assignBrowse(this.$refs.btn, this.directory, this.single, this.attrs)
    })
  }

 src/components/subComponents/FileUpload/index.vue

@@ -5,6 +5,7 @@
      ref="uploader"

      :options="options"

      :file-status-text="statusText"

      :attrs="attrs"

      class="uploader-single"

      @file-added="onFileAdded"

      @complete="onComplete"

@@ -23,6 +24,7 @@
    <uploader

      v-else

      ref="uploader"

      :attrs="attrs"

      :options="options"

      :file-status-text="statusText"

      class="uploader-example"

@@ -31,7 +33,7 @@
      @complete="onComplete"

      @close="closeHandle"

    >

      <uploader-btn ref="button">        
      <uploader-btn ref="button" :attrs="attrs">

        <i class="el-icon-upload2" style="font-size:18px; color:#0088ff"></i>

        上传

      </uploader-btn>

@@ -53,6 +55,10 @@
    UploaderList

  },

  props: {

    acptTypes: {

      type: String,

      default: ''

    },

    tip: {

      type: Boolean,

      default: false

@@ -73,14 +79,22 @@
      type: String,

      default: "/data/api-f/file/upload" //"//192.168.20.10:3000/upload"

    },

    attrs: {

      type: Object,

      // default () {

      //   return {



      //   }

      // }

    }

  },

  data() {

    return {

      fileName: "",

      fileMd5: "",

      attrs: {

        accept: 'image/*'

      },

      // attrs: {

      //   accept: 'image/*'

      // },

      statusText: {

        success: '上传成功',

        error: '上传失败',

@@ -183,6 +197,7 @@
  },

  mounted() {

    this.$nextTick(() => {

      console.log(this.acptTypes)

      window.uploader = this.$refs.uploader.uploader

    })

  }

@@ -191,7 +206,8 @@


<style lang="scss">

.file-uploader {

  .el-input__suffix,.el-input__suffix-inner{

  .el-input__suffix,

  .el-input__suffix-inner {

    outline: none!important;

  }

  .el-tooltip.focusing{


 src/components/subComponents/FileUpload/uploader.vue

@@ -5,8 +5,8 @@
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <!-- <p>拖动文件到该区域上传</p> -->
        <uploader-btn>选择文件</uploader-btn>
        <uploader-btn :directory="true">选择文件夹</uploader-btn>
        <uploader-btn :attrs="attrs">选择文件</uploader-btn>
        <uploader-btn :directory="true" :attrs="attrs">选择文件夹</uploader-btn>
      </uploader-drop>
      <uploader-list></uploader-list>
    </slot>
@@ -33,7 +33,26 @@
      uploader: this
    }
  },
  watch:{
    attrs:{
      handler(n,o){
        console.log('uploader attrs update',n)
        this.$nextTick(()=>{
          //this.unBindUploader();
          this.bindUploader();
        })
      },
      deep: true
    },
    
  },
  props: {
    attrs: {
      type: Object,
      default() {
        return {}
      }
    },
    options: {
      type: Object,
      default() {
@@ -94,6 +113,7 @@
      }
    },
    allEvent(...args) {
      console.log(args)
      const name = args[0]
      const EVENTSMAP = {
        [FILE_ADDED_EVENT]: true,
@@ -112,9 +132,9 @@
    },
    closeHandle() {
      this.$emit("close")
    }
  },
  created() {
    bindUploader(){
      console.log('new Uploader')
    this.options.initialPaused = !this.autoStart
    const uploader = new Uploader(this.options)
    this.uploader = uploader
@@ -125,7 +145,7 @@
    uploader.on('fileRemoved', this.fileRemoved)
    uploader.on('filesSubmitted', this.filesSubmitted)
  },
  destroyed() {
    unBindUploader(){
    const uploader = this.uploader
    uploader.off('catchAll', this.allEvent)
    uploader.off(FILE_ADDED_EVENT, this.fileAdded)
@@ -133,6 +153,30 @@
    uploader.off('fileRemoved', this.fileRemoved)
    uploader.off('filesSubmitted', this.filesSubmitted)
    this.uploader = null
    }
  },
  created() {
    console.log('uploader attrs',this.attrs);
    this.bindUploader();
    // this.options.initialPaused = !this.autoStart
    // const uploader = new Uploader(this.options)
    // this.uploader = uploader
    // this.uploader.fileStatusText = this.fileStatusText
    // uploader.on('catchAll', this.allEvent)
    // uploader.on(FILE_ADDED_EVENT, this.fileAdded)
    // uploader.on(FILES_ADDED_EVENT, this.filesAdded)
    // uploader.on('fileRemoved', this.fileRemoved)
    // uploader.on('filesSubmitted', this.filesSubmitted)
  },
  destroyed() {
    this.unBindUploader();
    // const uploader = this.uploader
    // uploader.off('catchAll', this.allEvent)
    // uploader.off(FILE_ADDED_EVENT, this.fileAdded)
    // uploader.off(FILES_ADDED_EVENT, this.filesAdded)
    // uploader.off('fileRemoved', this.fileRemoved)
    // uploader.off('filesSubmitted', this.filesSubmitted)
    // this.uploader = null
  },
  components: {
    UploaderBtn,

 src/pages/ai/index/App.vue

@@ -869,10 +869,10 @@


      downloadSdk({ path: item.id })

        .then(rsp => {

          this.$notify({

            type: "success",

            message: "算法已安装"

          });

          // this.$notify({

          //   type: "success",

          //   message: "算法已安装"

          // });

          item.upgradeLoading = false;

          //this.downloading = false;

          this.downloadItem = "";


 src/pages/cameraAccess/components/DataStackInfo.vue

@@ -105,7 +105,12 @@
        </el-tooltip>

        <!-- 文件上传 -->
        <el-button type="primary" size="small" :disabled="!DataStackPool.selectedDir.id" @click="handleUpload">
        <el-button
          type="primary"
          size="small"
          :disabled="!DataStackPool.selectedDir.id"
          @click="handleUpload"
        >
          上传
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
@@ -118,7 +123,6 @@
      v-show="activeName === 'uploaded' "
      :data="fileList"
      tooltip-effect="dark"
      
      border
      :header-cell-style="{background:'#f8f8f8', color:'#222222', textAlign:'center'}"
      @select="handleSelect"
@@ -260,6 +264,7 @@
    </div>

    <!-- 文件上传组件 -->
    <!-- <file-uploader ref="uploader" v-show="activeName === 'uploading'" :attrs="attrs" /> -->
    <file-uploader ref="uploader" v-show="activeName === 'uploading'" />

    <!-- 文件预览 -->
@@ -403,12 +408,16 @@
      editRowId: "",
      timer: 0,
      targetDir: "",
      targetFile: ""
      targetFile: "",
      attrs: {
        accept: ""
      }
    };
  },
  mounted() {
    this.initFormData();
    console.log(this.PollData.barCharts)

  },
  beforeDestroy() {
    this.taskUid = 0;
@@ -418,8 +427,20 @@
      handler(n,o){
        //数据栈文件数量变更
        //更新独立场景数据栈文件
        console.log(this.$root.$children[0].$children[1].$refs['sepRule'])
        console.log(this.$root.$children[0].$children[1].$refs['sepRule']);
        this.$root.$children[0].$children[1].$refs['sepRule'].getStackFiles();
      }
    },
    'form.type': {
      handler (n, o) {
        console.log(n, o)
        if (n == 1) {
          //仅支持上传视频
          this.$set(this.attrs, 'accept', ".mp4");
        }else if (n == 2) {
          //图片
          this.$set(this.attrs, 'accept', "image/jpg,image/jpeg,image/png");
        }
      }
    }
  },
@@ -584,7 +605,9 @@
      this.multipleSelection = [];
    },
    handleUpload() {

      console.log(this.DataStackPool.selectedDir.id)
      console.log(this.$refs.uploader.$refs.button.attrs)
      console.log(this.$refs.uploader.$refs.button.$refs.btn.click())
    },
    handleRefrashFileList(val) {
@@ -843,19 +866,19 @@
    vertical-align: middle;
  }
  .snapshot-video {
    background: url("/images/cameraAccess/video.png");
    background: url('/images/cameraAccess/video.png');
    background-repeat: round;
  }
  .snapshot-image {
    background: url("/images/cameraAccess/image.png");
    background: url('/images/cameraAccess/image.png');
    background-repeat: round;
  }
  .snapshot-audio {
    background: url("/images/cameraAccess/audio.png");
    background: url('/images/cameraAccess/audio.png');
    background-repeat: round;
  }
  .snapshot-files {
    background: url("/images/cameraAccess/files.png");
    background: url('/images/cameraAccess/files.png');
    background-repeat: round;
  }
}

 src/pages/index/App.vue

@@ -45,7 +45,10 @@
          </el-form-item>
        </el-form>
      </div>
      <p class="gradient-text gradient-text-one">——— {{serverTitle || 'SmartAI — ReID'}} ———</p>
      <!-- <p class="gradient-text gradient-text-one">——— {{serverTitle || 'SmartAI — ReID'}} ———</p> -->
      <p class="gradient-text gradient-text-one">—— <b>SmartAI</b> 人工智能操作系统 ——</p>
      <p class="gradient-text gradient-text-one" style="letter-spacing: 1.8px;font-size:15px;"> V1.0.0 </p>

    </div>
  </div>
</template>
@@ -238,10 +241,10 @@
}
.left-bg {
  position: absolute;
  top: 30%;
  top: 29%;
  right: 18%;
  width: 390px;
  height: 402px;
  height: 426px;
  background: rgba(146, 208, 255, 0.23);
  border-radius: 4px;
  text-align: center;
@@ -261,11 +264,14 @@
    // margin: 24px 10px 40px 10px;
  }
  .gradient-text {
    line-height: 50px;
    font-size: 20px;
    line-height: 36px;
    font-size: 17px;
    font-family: -webkit-pictograph;
    font-weight: bolder;
    position: relative;
    b{
      font-size: 20px;
    }
  }
  .gradient-text-one {
    background-image: linear-gradient(to right, #51feff 5%, #ff8725 100%);

 src/pages/labelMark/components/RightSide.vue

@@ -18,7 +18,7 @@
      <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard" >
        <div class="label" @click="editLabel(item)" v-for="(item,index) in labels" :key="index" :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"></div>
      </div>
      <img :src="baseUrl" alt />
      <img :src="`/httpImage/${snapshot_url}`" alt />
      <div class="popBox" v-show="isShowPop" :style="`top:${curLabel.y + 22}px;left:${curLabel.x}px`">
        <div class="title">标注信息</div>
        <div class="details">
@@ -59,6 +59,7 @@
</template>

<script>
import { getCamerasByServer } from '@/api/pollConfig'
import TreeDataPool from "@/Pool/TreeData";
export default {
  data () {
@@ -76,19 +77,30 @@
        x:'',
        y:''
      },
      baseUrl: ''
      baseUrl: '',
      snapshot_url: '',
      cameraData:[],
    }
  },
  computed: {
    
  },
  mounted(){
    this.getAllCameraData();
    setTimeout(()=>{
      let mockData = [{id:'a1',x:15, y:33, posX:150, posY:330},{id:'b2',x:56, y:87, posX:560, posY:870}];
      this.labels = mockData;
    },1000);
  },
  watch:{
    'TreeDataPool.selectedNode':{
      handler(n,o){
        debugger
        let curCamera = this.cameraData.find(item => item.id==n.id);
        this.snapshot_url = curCamera.snapshot_url;
      },
      deep: true
    },
    isEdit(n,o){
      if(n){
        this.$refs['editBoard'].addEventListener('click',this.bindListen);
@@ -98,6 +110,16 @@
    }
  },
  methods: {
    getAllCameraData(){
      getCamerasByServer().then(res=>{
        if(res.success){
          debugger
          this.cameraData = res.data;
        }
      }).catch(e=>{
        console.log(e)
      })
    },
    bindListen(e){
      this.newLabel(e);
    },
@@ -231,7 +253,7 @@
          align-items: center;
          margin: 5px 0;
          label{
            color: #ccc;
            color: #a9a9a9;
            width:65px;
            display: inline-block;
          }
@@ -250,7 +272,7 @@
          .devide{
            width: 10px;
            height: 1px;
            background: #ccc;
            background: #a9a9a9;
            margin: 0 3px;
          }
        }