From 56fefc5023550b24df05684f8908bc1cbaec1a9c Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期一, 16 十一月 2020 15:51:55 +0800 Subject: [PATCH] 数据栈添加分辨率信息维护 --- src/pages/cameraAccess/components/DataStackInfo.vue | 113 ++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 80 insertions(+), 33 deletions(-) diff --git a/src/pages/cameraAccess/components/DataStackInfo.vue b/src/pages/cameraAccess/components/DataStackInfo.vue index a2ce20f..a4801b3 100644 --- a/src/pages/cameraAccess/components/DataStackInfo.vue +++ b/src/pages/cameraAccess/components/DataStackInfo.vue @@ -13,7 +13,22 @@ <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" @@ -50,7 +65,7 @@ <li> <info-card style="width: 100%;min-width: 440px" - :realtime="PollData.RealTimeSum" + :realtime="PollData.RealTimeValidCount" :polling="PollData.PollValidCount" :dataStack="PollData.stackChannelCount" ></info-card> @@ -105,10 +120,20 @@ </el-tooltip> <!-- 鏂囦欢涓婁紶 --> - <el-button type="primary" size="small" :disabled="!DataStackPool.selectedDir.id" @click="handleUpload"> - 涓婁紶 - <i class="el-icon-upload el-icon--right"></i> - </el-button> + <template v-for="stack in DataStackPool.dirs"> + <el-button + :class="`uploader_${stack.id}`" + :key="stack.id" + type="primary" + size="small" + v-show="stack.id == DataStackPool.selectedDir.id" + :disabled="!DataStackPool.selectedDir.id" + @click="handleUpload" + > + 涓婁紶 + <i class="el-icon-upload el-icon--right"></i> + </el-button> + </template> </div> </div> @@ -118,13 +143,12 @@ v-show="activeName === 'uploaded' " :data="fileList" tooltip-effect="dark" - border :header-cell-style="{background:'#f8f8f8', color:'#222222', textAlign:'center'}" @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"> @@ -139,10 +163,10 @@ </el-image> <el-image v-if="row.type==2" - style="width: 30x; height: 30px" - :src="`/files/${row.identifier}.jpg`" + style="width: 30x; height: 30px;background:#fff;" + :src="`/files/${row.path.substr(row.path.lastIndexOf('/')+1)}`" fit="fill" - :preview-src-list="[`/files/${row.identifier}.jpg`]" + :preview-src-list="[`/files/${row.path.substr(row.path.lastIndexOf('/')+1)}`]" > <div slot="error" :class="snapshotClass"></div> </el-image> @@ -163,7 +187,7 @@ >{{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> @@ -248,10 +272,11 @@ <!-- 鍒嗛〉 --> <div class="pagination"> <el-pagination + v-show="activeName=='uploaded'" @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" @@ -259,9 +284,15 @@ ></el-pagination> </div> - <!-- 鏂囦欢涓婁紶缁勪欢 --> - <file-uploader ref="uploader" v-show="activeName === 'uploading'" /> - + <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" + :sourceType="stack.type" + /> + </template> <!-- 鏂囦欢棰勮 --> <el-dialog title="鏌ョ湅鏂囦欢" :visible.sync="previewDialog" width="500px"> <video v-if="videoUrl" :src="videoUrl" controls style="margin-top: 12px;">鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video> @@ -384,7 +415,8 @@ multipleSelection: [], searchInput: "", form: { - id: "" + id: "", + resolution: "" }, fileList: [], // 璁板綍娣诲姞鐘舵�� @@ -403,25 +435,39 @@ editRowId: "", timer: 0, targetDir: "", - targetFile: "" + targetFile: "", }; }, mounted() { this.initFormData(); console.log(this.PollData.barCharts) + }, beforeDestroy() { this.taskUid = 0; }, + watch: { + 'fileList.length': { + handler(n, o) { + //鏁版嵁鏍堟枃浠舵暟閲忓彉鏇� + //鏇存柊鐙珛鍦烘櫙鏁版嵁鏍堟枃浠� + this.$root.$children[0].$children[1].$refs['sepRule'].getStackFiles(); + } + }, + }, methods: { + 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){ - - this.imgUrl = "/files/" + row.identifier + ".jpg" + } else if (row.type === 2) { + + this.imgUrl = "/files/" + row.path.substr(row.path.lastIndexOf('/') + 1) } }, // 娓呯┖杈撳叆妗� @@ -445,11 +491,10 @@ this.fileList = []; }, selectDir(node) { - debugger if (node.id === "") { return } - + console.log('閫夋嫨鏁版嵁鏍�',node) this.isDisabled = false; this.isAdd = false; this.videoItem = null; @@ -457,6 +502,7 @@ // 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; @@ -480,9 +526,7 @@ if (uid !== this.taskUid || this.form.id === "") { return; } - this.fetchFileList(); - let _this = this; this.timer = setTimeout(() => { _this.timingtask(uid); @@ -490,10 +534,9 @@ }, 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) { + 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}) @@ -507,7 +550,6 @@ }).catch(err => { console.log(err) }) - }, // 淇濆瓨 @@ -574,7 +616,7 @@ }, handleUpload() { console.log(this.DataStackPool.selectedDir.id) - console.log(this.$refs.uploader.$refs.button.$refs.btn.click()) + console.log(this.$refs[`uploader_${this.DataStackPool.selectedDir.id}`][0].$refs.button.$refs.btn.click()) }, handleRefrashFileList(val) { this.page = val; @@ -593,6 +635,9 @@ }) 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: "鏂囦欢鎺掑簭鎴愬姛锛�" @@ -631,6 +676,7 @@ cmd.cb(cmd.data); }, handleFileDelete(rows, multi = false) { + let _this = this; let ids = this.multipleSelection; if (!multi) { ids = [rows.id]; @@ -652,7 +698,8 @@ type: "error", message: "鏂囦欢宸插垹闄�" }) - }) + }); + }).catch(() => { }) }, handleFileMove(row) { @@ -740,9 +787,9 @@ .el-form-item__label { text-align: left; } - .el-button--primary.is-disabled{ + .el-button--primary.is-disabled { background-color: #9eb4f0 !important; - border-color: #9eb4f0 !important; + border-color: #9eb4f0 !important; } .label { color: #606266; -- Gitblit v1.8.0