上传组件回复至三方原始包,数据栈根据文件夹动态传入资源类型;联动刷新底图修复

hanbaoshan

2020-11-05 e1467b19874294a9a36dcfb06083081f9d4b504d

上传组件回复至三方原始包,数据栈根据文件夹动态传入资源类型;联动刷新底图修复

 src/components/canvas/index.vue

@@ -169,7 +169,7 @@
          .then(res => {
            if (res.data.cameraId === this.currentCameraId) {
              this.baseImg = res.data.snapshotUrl;
              this.$emit('refresh', res.data.snapshotUrl)
              this.$emit('refresh', res.data.snapshotUrl,this.currentCameraId)
              this.$forceUpdate()
              this.$notify({
                type: "success",

 src/components/subComponents/FileUpload/btn.vue

@@ -27,25 +27,22 @@
        return {}
      }
    },

  },
  watch: {
    attrs: {
      handler(n, o) {
        //this.$nextTick(() => {
          if(n){
            this.uploader.uploader.assignBrowse(this.$refs.btn, this.directory, this.single, n)
          }
          
        //})
      },
      deep: true
    sourceType: {
      type: Number,
    }
  },
 
  mounted() {
    this.$nextTick(() => {
      console.log('attrs', this.attrs)
      this.uploader.uploader.assignBrowse(this.$refs.btn, this.directory, this.single, this.attrs)
      console.log('btn attrs', this.attrs)
      console.log("btn sourceType", this.sourceType)
      let props = {accept:''};
      if(this.sourceType == 1){
        props.accept = '.mp4';
      }else if(this.sourceType == 2){
        props.accept = '.jpg,.jpeg,.png';
      }
      this.uploader.uploader.assignBrowse(this.$refs.btn, this.directory, this.single, props)
    })
  }
}

 src/components/subComponents/FileUpload/index.vue

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

      :options="options"

      :file-status-text="statusText"

      :attrs="attrs"

      class="uploader-single"

      @file-added="onFileAdded"

      @complete="onComplete"

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

      v-else

      ref="uploader"

      :attrs="attrs"

      :options="options"

      :file-status-text="statusText"

      class="uploader-example"

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

      @close="closeHandle"

    >

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

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

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

        上传

      </uploader-btn>

@@ -55,9 +53,8 @@
    UploaderList

  },

  props: {

    acptTypes: {

      type: String,

      default: ''

    sourceType: {

      type: Number,

    },

    tip: {

      type: Boolean,

@@ -162,15 +159,6 @@
      }

    },

    computeMD5Success(md5, file) {

      // 将自定义参数直接加载uploader实例的opts上

      // if (this.$route.path.indexOf("VideoManage") >= 0) {

      //   Object.assign(this.uploader.opts, {

      //     query: {

      //       stackId: this.DataStackPool.selectedDir.id

      //       // ...this.params,

      //     }

      //   })

      // }

      //将自定义参数直接加载uploader实例的opts上

      if (location.href.indexOf("dataStack") >= 0) {

        Object.assign(this.uploader.opts, {

@@ -196,7 +184,7 @@
  },

  mounted() {

    this.$nextTick(() => {

      console.log(this.acptTypes)

      console.log(this.sourceType)

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

    })

  }


 src/components/subComponents/FileUpload/uploader.vue

@@ -14,9 +14,7 @@
</template>

<script>
//import Uploader from 'simple-uploader.js'
//require('./common/uploader-simple')
import './common/uploader-simple'
import Uploader from 'simple-uploader.js'
import { kebabCase } from './common/utils'
import UploaderBtn from './btn.vue'
import UploaderDrop from './drop.vue'
@@ -34,19 +32,6 @@
    return {
      uploader: this
    }
  },
  watch:{
    attrs:{
      handler(n,o){
        console.log('uploader attrs update',n)
        //this.$nextTick(()=>{
          this.unBindUploader();
          this.bindUploader();
        //})
      },
      deep: true
    },
    
  },
  props: {
    attrs: {
@@ -134,54 +119,31 @@
    },
    closeHandle() {
      this.$emit("close")
    },
    bindUploader(){
      console.log('new Uploader')
      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)
    },
    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
    }
  },
  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)
    // 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)
  },
  mounted(){
    //this.bindUploader();
  },

  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
    //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/cameraAccess/components/DataStackInfo.vue

@@ -271,7 +271,7 @@

    <template v-for="stack in DataStackPool.dirs">
      <!-- 文件上传组件 -->
      <file-uploader :ref="`uploader_${stack.id}`" :key="stack.id" v-show="activeName === 'uploading' && stack.id == DataStackPool.selectedDir.id" :attrs="attrs" />
      <file-uploader :ref="`uploader_${stack.id}`" :key="stack.id" v-show="activeName === 'uploading' && stack.id == DataStackPool.selectedDir.id" :sourceType="stack.type" />
      <!-- <file-uploader ref="uploader" v-show="activeName === 'uploading'" /> -->
    </template>
    <!-- 文件预览 -->
@@ -416,9 +416,7 @@
      timer: 0,
      targetDir: "",
      targetFile: "",
      attrs: {
        accept: ""
      }
      
    };
  },
  mounted () {
@@ -437,18 +435,7 @@
        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', ".jpg,.jpeg,.png");
        }
      }
    }

  },
  methods: {
    preview (row) {
@@ -482,11 +469,9 @@
      this.fileList = [];
    },
    selectDir (node) {

      if (node.id === "") {
        return
      }

      this.isDisabled = false;
      this.isAdd = false;
      this.videoItem = null;
@@ -517,9 +502,7 @@
      if (uid !== this.taskUid || this.form.id === "") {
        return;
      }

      this.fetchFileList();

      let _this = this;
      this.timer = setTimeout(() => {
        _this.timingtask(uid);
@@ -545,7 +528,6 @@
      }).catch(err => {
        console.log(err)
      })

    },

    // 保存
@@ -612,7 +594,6 @@
    },
    handleUpload () {
      console.log(this.DataStackPool.selectedDir.id)
      debugger
      console.log(this.$refs[`uploader_${this.DataStackPool.selectedDir.id}`][0].$refs.button.$refs.btn.click())
    },
    handleRefrashFileList (val) {

 src/pages/cameraAccess/components/LinkageRule.vue

@@ -74,6 +74,7 @@
                    :currentCameraId="data.cameraId"
                    @changeLoading="changeLoading"
                    @fromCanvas="getCanvasData"
                    @refresh="refresh"
                  ></polygon-canvas>
                </swiper-slide>
              </swiper>
@@ -236,6 +237,14 @@
      }
      this.swipercanvasData = swipers;
    },
    refresh(url,id) {
      this.swipercanvasData.forEach(data=>{
        if(data.cameraId == id){
          data.baseImg = url;
        }
      })
      //this.Camera.baseImg = url
    },
    getCanvasData() { },
    showRules() {
      this.tableRuleList = [];