| | |
| | | </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> |
| | |
| | | v-show="activeName === 'uploaded' " |
| | | :data="fileList" |
| | | tooltip-effect="dark" |
| | | style="width: 99%" |
| | | |
| | | border |
| | | :header-cell-style="{background:'#f8f8f8', color:'#222222', textAlign:'center'}" |
| | | @select="handleSelect" |
| | |
| | | <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> |
| | |
| | | |
| | | <!-- 文件预览 --> |
| | | <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"> |
| | |
| | | data() { |
| | | return { |
| | | videoUrl: "", |
| | | imgUrl: "", |
| | | previewDialog: false, |
| | | fileDialog: false, |
| | | isDisabled: true, |
| | |
| | | }, |
| | | mounted() { |
| | | this.initFormData(); |
| | | console.log(this.PollData.barCharts) |
| | | }, |
| | | beforeDestroy() { |
| | | this.taskUid = 0; |
| | | }, |
| | | methods: { |
| | | preview(row) { |
| | | if (this.form.type === 1) { |
| | | this.previewDialog = true; |
| | | 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) |
| | | } |
| | | }, |
| | | // 清空输入框 |
| | |
| | | this.isAdd = true; |
| | | this.isDisabled = false; |
| | | this.initFormData(); |
| | | this.DataStackPool.clean(); |
| | | this.fileList = []; |
| | | }, |
| | | selectDir(node) { |
| | | |
| | | if (node.id === "") { |
| | | return |
| | | } |
| | |
| | | this.total = 0; |
| | | this.multipleSelection = []; // 清空选中状态 |
| | | this.initFetchListTask(); |
| | | this.videoUrl = ''; |
| | | this.imgUrl = ''; |
| | | }, |
| | | initFetchListTask() { |
| | | const uid = Math.round(Math.random() * 1000); |
| | |
| | | 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); |
| | |
| | | this.multipleSelection = []; |
| | | }, |
| | | handleUpload() { |
| | | console.log(this.DataStackPool.selectedDir.id) |
| | | console.log(this.$refs.uploader.$refs.button.$refs.btn.click()) |
| | | }, |
| | | handleRefrashFileList(val) { |
| | |
| | | .data-stack-info { |
| | | width: 100%; |
| | | height: 100%; |
| | | margin-left: 20px; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | overflow: auto; |
| | | .ai-select { |
| | | text-align: left; |
| | | } |
| | | .el-form-item__label { |
| | | text-align: left; |
| | | } |
| | | .el-button--primary.is-disabled{ |
| | | background-color: #9eb4f0 !important; |
| | | border-color: #9eb4f0 !important; |
| | | } |
| | | .label { |
| | | color: #606266; |
| | |
| | | .btn-right { |
| | | float: right; |
| | | margin-top: -5px; |
| | | margin-right: 10px; |
| | | .btn { |
| | | cursor: pointer; |
| | | font-size: 20px; |
| | |
| | | vertical-align: middle; |
| | | } |
| | | .snapshot-video { |
| | | background: url("../../../assets/img/video.png"); |
| | | background: url("/images/cameraAccess/video.png"); |
| | | background-repeat: round; |
| | | } |
| | | .snapshot-image { |
| | | background: url("../../../assets/img/image.png"); |
| | | background: url("/images/cameraAccess/image.png"); |
| | | background-repeat: round; |
| | | } |
| | | .snapshot-audio { |
| | | background: url("../../../assets/img/audio.png"); |
| | | background: url("/images/cameraAccess/audio.png"); |
| | | background-repeat: round; |
| | | } |
| | | .snapshot-files { |
| | | background: url("../../../assets/img/files.png"); |
| | | background: url("/images/cameraAccess/files.png"); |
| | | background-repeat: round; |
| | | } |
| | | } |