From bb228ead0110a8626a0d0bceeea74522ff1a0a8f Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期四, 24 九月 2020 10:25:07 +0800 Subject: [PATCH] 数据栈独立场景显示文件底图 --- src/components/canvas/Dialog.vue | 6 src/pages/ai/index/App.vue | 2 src/pages/cameraAccess/components/LinkageRule.vue | 2 src/components/canvas/index.vue | 27 +++ src/pages/cameraAccess/components/DataStackInfo.vue | 35 ++++ src/pages/cameraAccess/components/SeparateRules.vue | 344 ++++++++++++++++++++++++++++++++++++++---------- 6 files changed, 325 insertions(+), 91 deletions(-) diff --git a/src/components/canvas/Dialog.vue b/src/components/canvas/Dialog.vue index 8245db6..8d66184 100644 --- a/src/components/canvas/Dialog.vue +++ b/src/components/canvas/Dialog.vue @@ -97,11 +97,7 @@ width="960" height="540" :style=" - `position:static;background:url(${ - snapshot_url - ? `/httpImage/${snapshot_url}` - : backImg - }) 0% 0%/960px 540px no-repeat;` + `position:static;background:url(${snapshot_url}) 0% 0%/960px 540px no-repeat;` " ></canvas> <p diff --git a/src/components/canvas/index.vue b/src/components/canvas/index.vue index ea4715e..cd8f3b5 100644 --- a/src/components/canvas/index.vue +++ b/src/components/canvas/index.vue @@ -4,10 +4,10 @@ ref="myCanvas" :width="canvasWidth" :height="canvasHeight" - :style="`background:url(${snapshot_url ? `/httpImage/${snapshot_url}` : blackImg}) 100% 100% / 576px 324px; no-repeat; background-size: contain;`" + :style="`background:url(${canvasBg}) center / 576px 324px no-repeat; background-size: contain;`" ></canvas> - <el-tooltip content="鍒锋柊搴曞浘" placement="bottom" popper-class="atooltip"> + <el-tooltip content="鍒锋柊搴曞浘" placement="bottom" popper-class="atooltip" v-if="isShowRefresh"> <span class="iconfont icongengxin" @click="refresh"></span> </el-tooltip> <p class="tip" :style="disabled ? `display:block;` : `display:none;`">鎵归噺閰嶇疆鏂瑰紡涓嶅厑璁哥粯鍒跺尯鍩燂紝璇烽�夋嫨鎽勫儚鏈鸿繘琛屽尯鍩熺粯鍒�</p> @@ -21,7 +21,7 @@ <canvas-dialog ref="bigCanvas" :canvasDataToChild="canvasData" - :snapshot_url="snapshot_url" + :snapshot_url="canvasBg" @refresh="refresh" ></canvas-dialog> <span slot="footer" class="dialog-footer"> @@ -47,6 +47,14 @@ isGB28181: { default: false, type: Boolean + }, + isShowRefresh: { + default: true, + type: Boolean + }, + sourceType: { + default: 1, + type: Number }, isShowDrawArrow: { default: false, @@ -87,6 +95,19 @@ default: 324 } }, + computed:{ + canvasBg(){ + if(this.snapshot_url){ + if(this.sourceType == 2){ + return `/files/${this.snapshot_url}` + }else{ + return `/httpImage/${this.snapshot_url}` + } + }else{ + return this.blackImg; + } + } + }, data() { return { blackImg: require("../../assets/img/baseimg.png"), diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue index 320b0d1..83b1d58 100644 --- a/src/pages/ai/index/App.vue +++ b/src/pages/ai/index/App.vue @@ -28,7 +28,7 @@ <div class="mask flex-center"> <div class="info-onmask"> <div>褰撳墠鐗堟湰:{{item.version}}</div> - <div>杩滅鐗堟湰:{{item.remoteVersion}}</div> + <div>鏈�鏂扮増鏈�:{{item.remoteVersion}}</div> </div> <el-button type="primary" class="bot-btn" @click="donwload(item)">鍗囩骇</el-button> </div> diff --git a/src/pages/cameraAccess/components/DataStackInfo.vue b/src/pages/cameraAccess/components/DataStackInfo.vue index fe622ac..a2ce20f 100644 --- a/src/pages/cameraAccess/components/DataStackInfo.vue +++ b/src/pages/cameraAccess/components/DataStackInfo.vue @@ -105,7 +105,7 @@ </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> @@ -129,10 +129,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.identifier}.jpg`" + fit="fill" + :preview-src-list="[`/files/${row.identifier}.jpg`]" > <div slot="error" :class="snapshotClass"></div> </el-image> @@ -254,7 +264,8 @@ <!-- 鏂囦欢棰勮 --> <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"> @@ -364,6 +375,7 @@ data() { return { videoUrl: "", + imgUrl: "", previewDialog: false, fileDialog: false, isDisabled: true, @@ -403,9 +415,13 @@ }, 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.identifier + ".jpg" } }, // 娓呯┖杈撳叆妗� @@ -429,6 +445,7 @@ this.fileList = []; }, selectDir(node) { + debugger if (node.id === "") { return } @@ -451,6 +468,8 @@ this.total = 0; this.multipleSelection = []; // 娓呯┖閫変腑鐘舵�� this.initFetchListTask(); + this.videoUrl = ''; + this.imgUrl = ''; }, initFetchListTask() { const uid = Math.round(Math.random() * 1000); @@ -477,6 +496,7 @@ // 瀹氭椂鍒锋柊浼氭竻绌洪�変腑鐘舵�侊紝鍦ㄨ繖閲屾仮澶� 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); @@ -553,6 +573,7 @@ this.multipleSelection = []; }, handleUpload() { + console.log(this.DataStackPool.selectedDir.id) console.log(this.$refs.uploader.$refs.button.$refs.btn.click()) }, handleRefrashFileList(val) { @@ -719,6 +740,10 @@ .el-form-item__label { text-align: left; } + .el-button--primary.is-disabled{ + background-color: #9eb4f0 !important; + border-color: #9eb4f0 !important; + } .label { color: #606266; font-size: 14px; diff --git a/src/pages/cameraAccess/components/LinkageRule.vue b/src/pages/cameraAccess/components/LinkageRule.vue index afc9aad..dcf7ca7 100644 --- a/src/pages/cameraAccess/components/LinkageRule.vue +++ b/src/pages/cameraAccess/components/LinkageRule.vue @@ -208,7 +208,7 @@ this.$nextTick(() => { this.Carmeras = []; this.loading = false; - this.showSysInfo = true + this.showSysInfo = true; if (this.TreeDataPool.treeActiveName == 'dataStack') { this.TreeDataPool.checkedLocalVedio.forEach(camera => { this.Carmeras.push(new VideoRuleData(camera.id)); diff --git a/src/pages/cameraAccess/components/SeparateRules.vue b/src/pages/cameraAccess/components/SeparateRules.vue index d372181..b176fa1 100644 --- a/src/pages/cameraAccess/components/SeparateRules.vue +++ b/src/pages/cameraAccess/components/SeparateRules.vue @@ -15,12 +15,8 @@ </span> </div> - <div - v-if="Camera.analytics" - class="flex-box" - v-show="cameraType === 'camera'" - > - <span class="label" >澶勭悊鏂瑰紡</span> + <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'"> + <span class="label">澶勭悊鏂瑰紡</span> <toggle-button :value="Camera.dealWay" :width="60" @@ -31,12 +27,8 @@ /> </div> - <div - v-if="Camera.analytics" - class="flex-box" - v-show="cameraType === 'camera'" - > - <span class="label" >鍒嗚鲸鐜�</span> + <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'"> + <span class="label">鍒嗚鲸鐜�</span> <el-select v-model="Camera.selectResolution" placeholder="璇烽�夋嫨" @@ -54,15 +46,12 @@ </div> <div v-if="Camera.analytics" class="flex-box"> - <span class="label" >鏅鸿兘璁$畻鑺傜偣: {{ Camera.runServerName}}</span> + <span class="label">鏅鸿兘璁$畻鑺傜偣: {{ Camera.runServerName}}</span> </div> - <div - v-if="Camera.analytics" - class="flex-box" - > + <div v-if="Camera.analytics" class="flex-box"> <span class="label">绠楁硶蹇�熼�氶亾</span> - <div class="channel flex-box" > + <div class="channel flex-box"> <el-tooltip effect="dark" content="澶嶅埗姝ゆ憚鍍忔満绠楁硶瑙勫垯" @@ -95,7 +84,7 @@ <div class="devide"></div> - <div class="top" > + <div class="top"> <p class="task-css"> <b style="font-size: 14px; line-height: 18px;">鍦烘櫙</b> </p> @@ -112,7 +101,7 @@ </div> </div> - <div class="bottom" > + <div class="bottom"> <div class="devide"></div> <div class="bottom-right"> <div class="draw-and-time-box"> @@ -133,25 +122,78 @@ >{{ Camera.camearInfo.alias ? Camera.camearInfo.alias: Camera.camearInfo.name }}</b> </div> <div class="img-box"> - <polygon-canvas - class="cavas" - ref="canvas" - v-if="showCanvas" - v-loading="loading" - element-loading-text="鍒锋柊涓紝璇风◢绛�..." - element-loading-background="rgba(0, 0, 0, 0.8)" - :isShowDrawArrow="false" - :disabled="false" - :snapshot_url="Camera.baseImg" - :canvasDataShow="Camera.canvasData" - :currentCameraId="Camera.cameraId" - :loading="Camera.loading" - :canvasWidth="canvasWidth" - :canvasHeight="canvasHeight" - @fromCanvas="getCanvasData" - @changeLoading="changeLoading" - @refresh="refresh" - ></polygon-canvas> + <template v-if="TreeDataPool.treeActiveName == 'camera'"> + <polygon-canvas + class="cavas" + ref="canvas" + v-if="showCanvas" + v-loading="loading" + element-loading-text="鍒锋柊涓紝璇风◢绛�..." + element-loading-background="rgba(0, 0, 0, 0.8)" + :isShowDrawArrow="false" + :disabled="false" + :snapshot_url="Camera.baseImg" + :canvasDataShow="Camera.canvasData" + :currentCameraId="Camera.cameraId" + :loading="Camera.loading" + :canvasWidth="canvasWidth" + :canvasHeight="canvasHeight" + @fromCanvas="getCanvasData" + @changeLoading="changeLoading" + @refresh="refresh" + ></polygon-canvas> + </template> + <template v-else> + <div style="width:100%" v-loading='getStackFileLoading'> + <swiper + ref="swiper" + :auto-update="true" + :options="canvasSwiperOption" + @slideChange="swiperSlideChange" + class="swiper-box-container2" + style="width:100%" + > + <swiper-slide v-for="(data, index) in swipercanvasData" :key="index"> + <div> + <b + class="video-title" + style="font-size:14px;margin-top:-10px" + >{{ data.name }}</b> + <polygon-canvas + class="cavas" + ref="canvas" + v-if="showCanvas" + v-loading="loading" + element-loading-text="鍒锋柊涓紝璇风◢绛�..." + element-loading-background="rgba(0, 0, 0, 0.8)" + :isShowDrawArrow="false" + :isShowRefresh="false" + :sourceType="data.type" + :disabled="false" + :snapshot_url="data.baseImg" + :canvasDataShow="Camera.canvasData" + :currentCameraId="data.stackId" + :loading="data.loading" + :canvasWidth="canvasWidth" + :canvasHeight="canvasHeight" + @fromCanvas="getCanvasData" + @changeLoading="changeLoading" + ></polygon-canvas> + </div> + </swiper-slide> + </swiper> + <div class="swiper-local-prev" v-show="swipercanvasData.length>1" @click="prevClick"> + <div class="icon-btn" slot="button-prev"> + <i class="iconfont iconzuo"></i> + </div> + </div> + <div class="swiper-local-next" v-show="swipercanvasData.length>1" @click="nextClick"> + <div class="icon-btn" slot="button-next"> + <i class="iconfont iconyou1"></i> + </div> + </div> + </div> + </template> </div> </div> <div style="float:left;width:calc(10% - 90px);height:100%;"></div> @@ -192,7 +234,7 @@ } from '@/api/scene' import { changeRunType } from "@/api/pollConfig"; - +import { findAllFileByStackId } from "@/api/localVedio"; import VideoRuleData from "@/Pool/VideoRuleData"; import TimeSlider from "./TimeSlider"; @@ -201,6 +243,8 @@ import Sysinfo from "@/components/subComponents/SystemInfo"; import SceneRule from "./SceneRule"; import SlideScene from "./scene/SlideScene"; +import { duration } from 'moment'; + export default { components: { @@ -218,16 +262,28 @@ } }, computed: { - cameraType() { + cameraType () { return this.TreeDataPool.treeActiveName === 'camera' ? "camera" : "dataStack" } }, - data() { + data () { return { mockSceneData: [], loading: false, Camera: new VideoRuleData(), runType: -1, + getStackFileLoading: false, + canvasSwiperOption: { + grabCursor: true, + pagination: { + el: ".swiper-pagination", + type: "fraction" + }, + navigation: { + nextEl: ".swiper-local-next", + prevEl: ".swiper-local-prev" + } + }, swiperOption: { slidesPerView: 5, spaceBetween: 8, @@ -249,16 +305,108 @@ showSysInfo: false, showCanvas: true, canvasWidth: 576, - canvasHeight: 324 + canvasHeight: 324, + stackId: '', + swiperIndex: 0, + swipercanvasData: [], + stackFilesPage: 1, + stackFilesSize: 5, }; }, - mounted() { + mounted () { this.mockAsync(); this.PollData.statistics(); - }, + }, + watch: { + 'Camera.cameraId':{ + handler(n,o){ + if (n) { + if (this.TreeDataPool.treeActiveName == "dataStack") { + this.stackFilesPage = 1; + this.stackFilesSize = 5; + this.stackId = n; + if(this.stackId){ + this.swipercanvasData = []; + this.getStackFiles() + } + } + } + } + } + }, methods: { - mockAsync() { + prevClick(){ + console.log(this.swiperIndex) + console.log(this.$refs.swiper.swiper.activeIndex) + if(this.swiperIndex == 0){ + console.log('鏈鍒嗛〉鐨勭涓�鏉�') + //璇锋眰涓婁竴椤� + if(this.stackFilesPage > 1){ + this.stackFilesPage--; + this.getStackFiles(); + }else{ + this.$message({ + type:'info', + message:'褰撳墠宸叉槸绗竴椤�' + }); + } + + } + }, + nextClick(){ + console.log(this.swiperIndex) + console.log(this.$refs.swiper.swiper.activeIndex) + if(this.swiperIndex == this.swipercanvasData.length-1){ + console.log('鏈�鍚庝竴寮�,鍔犺浇鏇村') + //璇锋眰涓嬩竴椤� + this.stackFilesPage++; + this.getStackFiles(); + } + }, + getStackFiles () { + this.getStackFileLoading = true; + findAllFileByStackId({ name: '', stackId: this.stackId, page: this.stackFilesPage, size: this.stackFilesSize, type: 0 }).then(res => { + if (res && res.success ) { + if(res.data.dataList.length > 0){ + this.swipercanvasData = []; + this.swipercanvasData = res.data.dataList.map(item => { + return { + name: item.name, + stackId: item.stack_id, + baseImg: item.type == 2 ? `/files/${item.identifier}.jpg` : item.snapshot_url, + type: item.type, + id: item.id, + loading: false + } + }); + this.swiperIndex = 0; + this.$refs.swiper.swiper.activeIndex = 0; + + }else{ + console.log(this.swipercanvasData) + this.$message({ + type:'info', + message:'宸叉棤鏇村鏁版嵁!' + }); + } + }else{ + console.log(this.swipercanvasData) + this.$message({ + type:'error', + message:'鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!' + }); + } + this.getStackFileLoading = false; + }).catch(e => { + console.log(e); + this.getStackFileLoading = false; + }); + }, + swiperSlideChange () { + this.swiperIndex = this.$refs.swiper.swiper.activeIndex; + }, + mockAsync () { setTimeout(() => { this.mockSceneData = [ { scenename: "name1", id: 1, icon: ["iconrenlianjiance", "icongetijingzhi"] }, @@ -284,10 +432,10 @@ ]; }, 3000) }, - drawBaseImg() { + drawBaseImg () { this.$refs.canvas.showModal(); }, - getCanvasData(data) { + getCanvasData (data) { let polyon = { ...data }; polyon.camera_id = this.Camera.cameraId; savePolygon(polyon).then(rsp => { @@ -295,17 +443,18 @@ this.Camera.getCameraTask(); }); }, - refresh(url) { + refresh (url) { this.Camera.baseImg = url }, // 鍒濆鍖栨憚鍍忔満淇℃伅锛岀埗缁勪欢璋冪敤 - async initCameraData(id) { + async initCameraData (id) { this.Camera = new VideoRuleData(); if (id && id !== "") { this.loading = false; this.Camera.cameraId = id; await this.Camera.update(); + debugger } this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id; @@ -318,7 +467,8 @@ }) }, - saveSceneRule(groupRule) { + + saveSceneRule (groupRule) { const payload = { ...groupRule } payload.cameraIds = [this.Camera.cameraId]; let _this = this; @@ -332,19 +482,19 @@ //鍒锋柊宸︿晶鏍� debugger _this.$root.$children[0].$children[0].querySearchAsync('camera') - + } }); }, - delScenRule() { + delScenRule () { this.Camera.update(); }, - changeLoading(params) { + changeLoading (params) { this.loading = params // console.log(this.loading,'changeLoading',params) }, //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊 - pollEnable(row) { + pollEnable (row) { let val = 0 if (row) { if (this.PollData.RealTimeSum < this.PollData.channelTotal) { @@ -380,7 +530,7 @@ this.PollData.statisticTaskInfo(); }, //瀹炴椂銆佽疆璇㈠垏鎹� - changePoll(row) { + changePoll (row) { //鍒ゆ柇鏄柊澧炶繕鏄洿鏂� if (this.Camera.cameraId && this.Camera.cameraId !== undefined) { if (this.PollData.RealTimeSum < this.PollData.channelTotal) { @@ -429,7 +579,7 @@ } }, //澶嶅埗 - ctrlC() { + ctrlC () { this.TreeDataPool.ctrlCameraId = this.Camera.cameraId; this.TreeDataPool.ctrlCameraName = this.Camera.cameraName; this.$notify({ @@ -437,7 +587,7 @@ message: "澶嶅埗绠楁硶鎴愬姛锛�" }) }, - ctrlV() { + ctrlV () { if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) { this.$notify({ type: "warning", @@ -474,6 +624,47 @@ }; </script> <style lang="scss"> +.el-message--info .el-message__content{ + color: #999; +} +.swiper-container { + margin-left: auto; + margin-right: auto; + position: relative; + overflow: hidden; + list-style: none; + padding: 0; + z-index: 1; +} +.swiper-local-prev, +.swiper-local-next { + width: 40px; + height: 40px; + position: absolute; + background: #8888; + top: 40%; + z-index: 99; + border-radius: 4em; + outline: none; + .icon-btn { + color: rgb(255, 255, 255); + text-align: center; + line-height: 38px; + cursor: pointer; + } +} +.swiper-local-prev { + left: 10px; +} +.swiper-local-prev:hover { + background: #666; +} +.swiper-local-next { + left: 90%; +} +.swiper-local-next:hover { + background: #666; +} .s-separate-rules { width: 100%; padding: 13px 0 20px; @@ -482,42 +673,42 @@ // height: 38px; // position: absolute; // left: -38px; - height:40px; + height: 40px; .check-area { width: 100%; height: 100%; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; - .ai-select{ + .ai-select { text-align: left; line-height: 30px; height: 30px; - .flex-box{ - .label{ - &+label,&+div{ + .flex-box { + .label { + & + label, + & + div { margin-left: 10px; line-height: 1; } - } } } - .ai-select>div{ + .ai-select > div { display: inline-block; vertical-align: middle; margin-right: 30px; - - .channel{ + + .channel { display: inline-block; vertical-align: middle; } } } } - .devide{ + .devide { height: 10px; - background: #E9EBF2; + background: #e9ebf2; } .top { width: 100%; @@ -611,18 +802,19 @@ .swiper-next-border:hover { background: #666; } + .top-right { float: right; width: 54%; height: 144px; - .card-box{ - width: 54%!important; + .card-box { + width: 54% !important; } - .eCharts-box{ + .eCharts-box { width: 45%; - canvas{ - width: 98%!important; - } + canvas { + width: 98% !important; + } } } .task-css { @@ -819,7 +1011,7 @@ } } .el-loading-spinner { - background: url("/images/cameraAccess/loading.gif") no-repeat; + background: url('/images/cameraAccess/loading.gif') no-repeat; top: 50%; margin-top: -21px; width: calc(100% - 260px) !important; -- Gitblit v1.8.0