| | |
| | | <el-radio v-model="form.type" :label="3" :disabled="!isAdd">音频</el-radio> |
| | | <el-radio v-model="form.type" :label="4" :disabled="!isAdd">其他数据</el-radio> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="处理分辨率" style="width:440px"> |
| | | <el-select |
| | | v-model="form.resolution" |
| | | placeholder="本机分辨率" |
| | | style="position: absolute;left: 0;" |
| | | size="small" |
| | | @change="checkResolution" |
| | | > |
| | | <el-option |
| | | v-for="item in form.resolutions" |
| | | :key="`${item.width}*${item.height}`" |
| | | :label="`${item.width}*${item.height}`=='0*0'?'本机分辨率':`${item.width}*${item.height}`" |
| | | :value="`${item.width}*${item.height}`" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item |
| | | label="处理完成后自动删除文件" |
| | | prop="isAutoDelFile" |
| | |
| | | @select="handleSelect" |
| | | @select-all="handleSelect" |
| | | > |
| | | <el-table-column type="selection" width="50" align="center" :selectable="isSelectable"></el-table-column> |
| | | <el-table-column type="selection" align="center" :selectable="isSelectable"></el-table-column> |
| | | <el-table-column prop="name" label="文件名"> |
| | | <template slot-scope="{row}"> |
| | | <div :class="snapshotClass"> |
| | |
| | | >{{row.name}}</a> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="fileSize" label="大小" width="120"> |
| | | <el-table-column prop="fileSize" label="大小"> |
| | | <template slot-scope="scope">{{scope.row.size | readFileSizeUnit}}</template> |
| | | </el-table-column> |
| | | <el-table-column prop="duration" label="时长" show-overflow-tooltip align="center"></el-table-column> |
| | |
| | | :disabled="scope.row.status == 2" |
| | | class="iconfont iconzhongxinkaishi btn" |
| | | @click="handleFileStatus(scope.row, 1)" |
| | | v-show="scope.row.status === 9" |
| | | v-show="scope.row.status === 9 || scope.row.status === -2" |
| | | ></el-button> |
| | | </el-tooltip> |
| | | |
| | |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleRefrashFileList" |
| | | :current-page="page" |
| | | :page-sizes="[5, 10, 15, 20]" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :page-size="size" |
| | | style="position:absolute;right:10px;bottom:5px" |
| | | :total="total" |
| | |
| | | |
| | | <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" v-show="activeName === 'uploading'" /> --> |
| | | <file-uploader |
| | | :ref="`uploader_${stack.id}`" |
| | | :key="stack.id" |
| | | v-show="activeName === 'uploading' && stack.id == DataStackPool.selectedDir.id" |
| | | :sourceType="stack.type" |
| | | /> |
| | | </template> |
| | | <!-- 文件预览 --> |
| | | <el-dialog title="查看文件" :visible.sync="previewDialog" width="500px"> |
| | |
| | | } |
| | | }, |
| | | filters: { |
| | | statusFormat (value) { |
| | | statusFormat(value) { |
| | | let statusCode = { |
| | | "-2": "处理异常", |
| | | "-1": "已删除", |
| | | "0": "暂停处理", |
| | | "1": "等待处理", |
| | |
| | | } |
| | | 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]; |
| | |
| | | } |
| | | }, |
| | | computed: { |
| | | snapshotClass () { |
| | | snapshotClass() { |
| | | let classs = ["snapshot"]; |
| | | if (this.form.type === 1) { |
| | | classs.push("snapshot-video") |
| | |
| | | |
| | | return classs; |
| | | }, |
| | | dirOptions () { |
| | | dirOptions() { |
| | | return this.DataStackPool.dirs.filter(dir => { |
| | | return dir.id !== this.DataStackPool.selectedDir.id |
| | | }) |
| | | } |
| | | }, |
| | | data () { |
| | | data() { |
| | | return { |
| | | videoUrl: "", |
| | | imgUrl: "", |
| | |
| | | multipleSelection: [], |
| | | searchInput: "", |
| | | form: { |
| | | id: "" |
| | | id: "", |
| | | resolution: "" |
| | | }, |
| | | fileList: [], |
| | | // 记录添加状态 |
| | |
| | | timer: 0, |
| | | targetDir: "", |
| | | targetFile: "", |
| | | attrs: { |
| | | accept: "" |
| | | } |
| | | }; |
| | | }, |
| | | mounted () { |
| | | mounted() { |
| | | this.initFormData(); |
| | | console.log(this.PollData.barCharts) |
| | | |
| | | }, |
| | | beforeDestroy () { |
| | | beforeDestroy() { |
| | | this.taskUid = 0; |
| | | }, |
| | | watch: { |
| | | 'fileList.length': { |
| | | handler (n, o) { |
| | | //数据栈文件数量变更 |
| | | //更新独立场景数据栈文件 |
| | | 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) { |
| | | checkResolution(val) { |
| | | this.form.resolution_width = Number(val.split('*')[0]); |
| | | this.form.resolution_height = Number(val.split('*')[1]); |
| | | }, |
| | | preview(row) { |
| | | this.previewDialog = true; |
| | | if (row.type === 1) { |
| | | |
| | | this.videoUrl = "/files/" + row.identifier + ".mp4" |
| | | } else if (row.type === 2) { |
| | | |
| | | // 为朔黄使用数据栈定制, 没有MD5 |
| | | if (row.identifier == "") { |
| | | this.videoUrl = row.path.replace("/opt/vasystem", ""); |
| | | } |
| | | } else if (row.type === 2) { |
| | | this.imgUrl = "/files/" + row.path.substr(row.path.lastIndexOf('/') + 1) |
| | | } |
| | | }, |
| | | // 清空输入框 |
| | | initFormData () { |
| | | initFormData() { |
| | | this.form = { |
| | | enable: false, |
| | | id: "", |
| | |
| | | }; |
| | | }, |
| | | // 添加设备 |
| | | 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 |
| | | } |
| | |
| | | // this.initFormData(); |
| | | // this.$refs.addForm.clearValidate(); |
| | | this.form = { ...node }; |
| | | this.form.resolution = `${node.resolution_width}*${node.resolution_height}`; |
| | | delete this.form.createTime; |
| | | delete this.form.updateTime; |
| | | delete this.form.status; |
| | |
| | | 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; |
| | | } |
| | | |
| | | this.fetchFileList(); |
| | | |
| | | let _this = this; |
| | | this.timer = setTimeout(() => { |
| | | _this.timingtask(uid); |
| | | }, 2 * 1000); |
| | | }, |
| | | 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); |
| | | }) |
| | | } |
| | | }); |
| | | } |
| | | }).catch(err => { |
| | | console.log(err) |
| | | }) |
| | | |
| | | 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); |
| | | }) |
| | | } |
| | | }); |
| | | } |
| | | }).catch(err => { |
| | | console.log(err) |
| | | }) |
| | | }, |
| | | |
| | | // 保存 |
| | | onSubmit (formName) { |
| | | onSubmit(formName) { |
| | | if (formName == 'addForm') { |
| | | if (this.form.name.indexOf('/') >= 0) { |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "保存失败,数据栈名称不能包含'/'!" |
| | | }); |
| | | return; |
| | | } |
| | | } |
| | | this.$refs[formName].validate(async valid => { |
| | | if (valid) { |
| | | saveDir(this.form).then(rsp => { |
| | |
| | | }); |
| | | }, |
| | | // 删除摄像机 |
| | | deleteDir () { |
| | | deleteDir() { |
| | | this.$confirm("是否删除此文件夹?", { |
| | | center: true, |
| | | cancelButtonClass: "comfirm-class-cancle", |
| | |
| | | }); |
| | | }); |
| | | }, |
| | | 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) |
| | | debugger |
| | | console.log(this.$refs[`uploader_${this.DataStackPool.selectedDir.id}`][0].$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 |
| | |
| | | }) |
| | | } |
| | | }, |
| | | async handleFileStatus (row, status, multi = false) { |
| | | async handleFileStatus(row, status, multi = false) { |
| | | let ids = this.multipleSelection; |
| | | if (!multi) { |
| | | ids = [row.id]; |
| | |
| | | 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) { |
| | |
| | | |
| | | }).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) { |
| | |
| | | } |
| | | }) |
| | | }, |
| | | 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({ |
| | |
| | | } |
| | | }) |
| | | }, |
| | | cellFileMove () { |
| | | cellFileMove() { |
| | | moveFile({ id: this.targetFile, stackId: this.targetDir }).then(rsp => { |
| | | if (rsp && rsp.success) { |
| | | this.$notify({ |
| | |
| | | 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; |
| | | } |
| | | } |