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

hanbaoshan

2020-10-27 da98d2a8a686cde09b20345e4a2b55a85410fde4

 src/pages/cameraAccess/components/DataStackInfo.vue

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

        <!-- 文件上传 -->
        <el-button type="primary" size="small" @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"
@@ -129,10 +133,20 @@
        <template slot-scope="{row}">
          <div :class="snapshotClass">
            <el-image
              v-show="row.snapshot_url !== ''"
              v-if="row.type==1"
              style="width: 30x; height: 30px"
              :src="'/httpImage/' + row.snapshot_url"
              fit="fill"
              :preview-src-list="['/httpImage/' + row.snapshot_url]"
            >
              <div slot="error" :class="snapshotClass"></div>
            </el-image>
            <el-image
              v-if="row.type==2"
              style="width: 30x; height: 30px"
              :src="`/files/${row.path.substr(row.path.lastIndexOf('/')+1)}`"
              fit="fill"
              :preview-src-list="[`/files/${row.path.substr(row.path.lastIndexOf('/')+1)}`]"
            >
              <div slot="error" :class="snapshotClass"></div>
            </el-image>
@@ -250,11 +264,13 @@
    </div>

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

    <!-- 文件预览 -->
    <el-dialog title="查看文件" :visible.sync="previewDialog" width="500px">
      <video :src="videoUrl" controls style="margin-top: 12px;">您的浏览器不支持 video 标签。</video>
      <video v-if="videoUrl" :src="videoUrl" controls style="margin-top: 12px;">您的浏览器不支持 video 标签。</video>
      <el-image v-if="imgUrl" :src="imgUrl"></el-image>
    </el-dialog>

    <el-dialog title="移动/复制" :visible.sync="fileDialog" width="500px">
@@ -312,7 +328,7 @@
    }
  },
  filters: {
    statusFormat(value) {
    statusFormat (value) {
      let statusCode = {
        "-1": "已删除",
        "0": "暂停处理",
@@ -322,7 +338,7 @@
      }
      return statusCode[value];
    },
    readFileSizeUnit(value) {
    readFileSizeUnit (value) {
      let UNITS = [' B', ' KB', ' MB', ' GB', ' TB', ' PB', ' EB', ' ZB', ' YB'];
      let format = function (value, power) {
        return (value / Math.pow(1024, power)).toFixed(2) + UNITS[power];
@@ -341,7 +357,7 @@
    }
  },
  computed: {
    snapshotClass() {
    snapshotClass () {
      let classs = ["snapshot"];
      if (this.form.type === 1) {
        classs.push("snapshot-video")
@@ -355,15 +371,16 @@

      return classs;
    },
    dirOptions() {
    dirOptions () {
      return this.DataStackPool.dirs.filter(dir => {
        return dir.id !== this.DataStackPool.selectedDir.id
      })
    }
  },
  data() {
  data () {
    return {
      videoUrl: "",
      imgUrl: "",
      previewDialog: false,
      fileDialog: false,
      isDisabled: true,
@@ -391,24 +408,55 @@
      editRowId: "",
      timer: 0,
      targetDir: "",
      targetFile: ""
      targetFile: "",
      attrs: {
        accept: ""
      }
    };
  },
  mounted() {
  mounted () {
    this.initFormData();
    console.log(this.PollData.barCharts)

  },
  beforeDestroy() {
  beforeDestroy () {
    this.taskUid = 0;
  },
  watch: {
    'fileList.length': {
      handler (n, o) {
        //数据栈文件数量变更
        //更新独立场景数据栈文件
        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");
        }
      }
    }
  },
  methods: {
    preview(row) {
      if (this.form.type === 1) {
        this.previewDialog = true;
    preview (row) {
      this.previewDialog = true;
      if (row.type === 1) {

        this.videoUrl = "/files/" + row.identifier + ".mp4"
      } else if (row.type === 2) {

        this.imgUrl = "/files/" + row.path.substr(row.path.lastIndexOf('/') + 1)
      }
    },
    // 清空输入框
    initFormData() {
    initFormData () {
      this.form = {
        enable: false,
        id: "",
@@ -420,14 +468,15 @@
      };
    },
    // 添加设备
    addDir(node) {
    addDir (node) {
      this.isAdd = true;
      this.isDisabled = false;
      this.initFormData();
      this.DataStackPool.clean();
      this.fileList = [];
    },
    selectDir(node) {
    selectDir (node) {

      if (node.id === "") {
        return
      }
@@ -450,13 +499,15 @@
      this.total = 0;
      this.multipleSelection = []; // 清空选中状态
      this.initFetchListTask();
      this.videoUrl = '';
      this.imgUrl = '';
    },
    initFetchListTask() {
    initFetchListTask () {
      const uid = Math.round(Math.random() * 1000);
      this.taskUid = uid;
      this.timingtask(uid);
    },
    timingtask(uid) {
    timingtask (uid) {
      if (uid !== this.taskUid || this.form.id === "") {
        return;
      }
@@ -468,14 +519,16 @@
        _this.timingtask(uid);
      }, 2 * 1000);
    },
    fetchFileList() {
    fetchFileList () {
      findAllFileByStackId({ name: this.searchInput, stackId: this.form.id, page: this.page, size: this.size, type: 0 }).then(rsp => {
        if (rsp && rsp.success && rsp.data.total > 0) {
          this.fileList = rsp.data.dataList;

          this.total = rsp.data.total;

          // 定时刷新会清空选中状态，在这里恢复
          this.fileList.forEach(row => {
            //this.polygonDatas.push({snapshot_url:row.snapshot_url})
            if (this.multipleSelection.indexOf(row.id) !== -1) {
              this.$nextTick(() => {
                this.$refs.multipleTable.toggleRowSelection(row);
@@ -490,7 +543,7 @@
    },

    // 保存
    onSubmit(formName) {
    onSubmit (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          saveDir(this.form).then(rsp => {
@@ -511,7 +564,7 @@
      });
    },
    // 删除摄像机
    deleteDir() {
    deleteDir () {
      this.$confirm("是否删除此文件夹？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
@@ -540,44 +593,50 @@
        });
      });
    },
    handleTabClick(tab, event) {
    handleTabClick (tab, event) {
      console.log(tab, event);
    },
    handleSelect(val) {
    handleSelect (val) {
      this.multipleSelection = val.map(row => {
        return row.id;
      });
    },
    handelSearchInputChange(val) {
    handelSearchInputChange (val) {
      this.multipleSelection = [];
    },
    handleUpload() {
    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) {
    handleRefrashFileList (val) {
      this.page = val;
      this.multipleSelection = [];
      this.fetchFileList();
    },
    handleSizeChange(val) {
    handleSizeChange (val) {
      this.size = val;
      this.multipleSelection = [];
      this.fetchFileList();
    },
    async handleSortFile(direct, id) {
    async handleSortFile (direct, id) {
      let res = await sortFile({
        id: id,
        direct: direct
      })
      if (res && res.success) {
        this.fetchFileList();
        //更新独立场景数据栈文件
        console.log(this.$root.$children[0].$children[1].$refs['sepRule'])
        this.$root.$children[0].$children[1].$refs['sepRule'].getStackFiles();
        this.$notify({
          type: "success",
          message: "文件排序成功！"
        })
      }
    },
    async handleFileStatus(row, status, multi = false) {
    async handleFileStatus (row, status, multi = false) {
      let ids = this.multipleSelection;
      if (!multi) {
        ids = [row.id];
@@ -605,10 +664,11 @@
        console.log("err")
      }
    },
    dropdownClick(cmd) {
    dropdownClick (cmd) {
      cmd.cb(cmd.data);
    },
    handleFileDelete(rows, multi = false) {
    handleFileDelete (rows, multi = false) {
      let _this = this;
      let ids = this.multipleSelection;
      if (!multi) {
        ids = [rows.id];
@@ -630,20 +690,21 @@
            type: "error",
            message: "文件已删除"
          })
        })
        });

      }).catch(() => { })
    },
    handleFileMove(row) {
    handleFileMove (row) {
      this.targetDir = "";
      this.targetFile = row.id;
      this.fileDialog = true;
    },
    handleFileRename(row) {
    handleFileRename (row) {
      this.editRowId = row.id;
      clearTimeout(this.timer);
      this.timer = null;
    },
    cellRenameFile(row) {
    cellRenameFile (row) {
      this.editRowId = "";
      renameFile({ id: row.id, name: row.name }).then(rsp => {
        if (rsp && rsp.success) {
@@ -666,10 +727,10 @@
        }
      })
    },
    isSelectable(row, rowIndex) {
    isSelectable (row, rowIndex) {
      return row.status !== 2
    },
    cellFileCopy() {
    cellFileCopy () {
      copyFile({ id: this.targetFile, stackIds: [this.targetDir] }).then(rsp => {
        if (rsp && rsp.success) {
          this.$notify({
@@ -685,7 +746,7 @@
        }
      })
    },
    cellFileMove() {
    cellFileMove () {
      moveFile({ id: this.targetFile, stackId: this.targetDir }).then(rsp => {
        if (rsp && rsp.success) {
          this.$notify({
@@ -717,6 +778,10 @@
  }
  .el-form-item__label {
    text-align: left;
  }
  .el-button--primary.is-disabled {
    background-color: #9eb4f0 !important;
    border-color: #9eb4f0 !important;
  }
  .label {
    color: #606266;
@@ -801,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;
  }
}