| | |
| | | </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" |
| | |
| | | /> |
| | | </div> |
| | | |
| | | <div |
| | | v-if="Camera.analytics" |
| | | class="flex-box" |
| | | v-show="cameraType === 'camera'" |
| | | > |
| | | <span class="label" >分辨率</span> |
| | | <el-select |
| | | v-model="Camera.selectResolution" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 134px; |
| | | margin-left:10px;" |
| | | > |
| | | <el-option |
| | | v-for="item in Camera.resolutionOption" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'"> |
| | | <span |
| | | class="label" |
| | | >分辨率: {{(Camera.camearInfo.resolution_width == 0 || Camera.camearInfo.resolution_height == 0) ? '本机分辨率': `${Camera.camearInfo.resolution_width} * ${Camera.camearInfo.resolution_height}` }}</span> |
| | | </div> |
| | | |
| | | <div v-if="Camera.analytics" class="flex-box"> |
| | | <span class="label" >智能计算节点: {{ Camera.runServerName}}</span> |
| | | <span class="label">SmartAI节点: {{ 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="复制此摄像机算法规则" |
| | |
| | | |
| | | <div class="devide"></div> |
| | | |
| | | <div class="top" > |
| | | <div class="top"> |
| | | <p class="task-css"> |
| | | <b style="font-size: 14px; line-height: 18px;">场景</b> |
| | | </p> |
| | |
| | | :showRealPoll="cameraType === 'camera'" |
| | | :ShowLocalVedio="cameraType === 'dataStack'" |
| | | v-if="showSysInfo" |
| | | style="margin-left: 10px;margin-top:-10px" |
| | | style="margin-top:-10px" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="bottom" > |
| | | <div class="bottom"> |
| | | <div class="devide"></div> |
| | | <div class="bottom-right"> |
| | | <div class="draw-and-time-box"> |
| | |
| | | >{{ 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> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | //import { timeSilderData } from "@/mockData/timeSilder"; |
| | | import { savePolygon } from "@/api/polygon"; |
| | | |
| | | import { |
| | |
| | | |
| | | import { |
| | | saveCameraScene, |
| | | getCameraSceneRule, |
| | | } from '@/api/scene' |
| | | |
| | | import { changeRunType } from "@/api/pollConfig"; |
| | | |
| | | import { findAllFileByStackId } from "@/api/localVedio"; |
| | | import VideoRuleData from "@/Pool/VideoRuleData"; |
| | | |
| | | import TimeSlider from "./TimeSlider"; |
| | | import polygonCanvas from "@/components/canvas"; |
| | | //import Sysinfo from "./SystemInfo"; |
| | | import Sysinfo from "@/components/subComponents/SystemInfo"; |
| | | import SceneRule from "./SceneRule"; |
| | | import SlideScene from "./scene/SlideScene"; |
| | |
| | | loading: false, |
| | | Camera: new VideoRuleData(), |
| | | runType: -1, |
| | | swiperOption: { |
| | | slidesPerView: 5, |
| | | spaceBetween: 8, |
| | | getStackFileLoading: false, |
| | | canvasSwiperOption: { |
| | | grabCursor: true, |
| | | pagination: { |
| | | el: ".swiper-pagination", |
| | | clickable: true |
| | | type: "fraction" |
| | | }, |
| | | navigation: { |
| | | nextEl: ".swiper-next-border", |
| | | prevEl: ".swiper-pre-border" |
| | | nextEl: ".swiper-local-next", |
| | | prevEl: ".swiper-local-prev" |
| | | } |
| | | }, |
| | | // swiperOption: { |
| | | // slidesPerView: 5, |
| | | // spaceBetween: 8, |
| | | // pagination: { |
| | | // el: ".swiper-pagination", |
| | | // clickable: true |
| | | // }, |
| | | // navigation: { |
| | | // nextEl: ".swiper-next-border", |
| | | // prevEl: ".swiper-pre-border" |
| | | // } |
| | | // }, |
| | | tableRuleList: [], |
| | | |
| | | cameraId: "", |
| | | activeTaskIndex: 0, |
| | | activeTaskId: "", |
| | | booleanValue: false, |
| | | showSysInfo: false, |
| | | showCanvas: true, |
| | | canvasWidth: 576, |
| | | canvasHeight: 324 |
| | | canvasHeight: 324, |
| | | stackId: '', |
| | | swiperIndex: 0, |
| | | swipercanvasData: [], |
| | | stackFilesPage: 1, |
| | | stackFilesSize: 5, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.mockAsync() |
| | | }, |
| | | 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: { |
| | | prevClick() { |
| | | if (this.swiperIndex == 0) { |
| | | if (this.stackFilesPage > 1) { |
| | | this.stackFilesPage--; |
| | | this.getStackFiles(true); |
| | | } else { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '当前已是第一页' |
| | | }); |
| | | } |
| | | |
| | | } |
| | | }, |
| | | nextClick() { |
| | | if (this.swiperIndex == this.swipercanvasData.length - 1) { |
| | | this.stackFilesPage++; |
| | | this.getStackFiles(true); |
| | | } |
| | | }, |
| | | getStackFiles(onClick = false) { |
| | | this.getStackFileLoading = true; |
| | | let _this = this; |
| | | 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.path.substr(item.path.lastIndexOf('/') + 1)}` : item.snapshot_url, |
| | | type: item.type, |
| | | id: item.id, |
| | | loading: false |
| | | } |
| | | }); |
| | | this.swiperIndex = 0; |
| | | this.$refs.swiper.swiper.activeIndex = 0; |
| | | |
| | | } else { |
| | | if (onClick) { |
| | | this.$message({ |
| | | type: 'warning', |
| | | message: '已无更多数据!' |
| | | }); |
| | | } |
| | | } |
| | | } else { |
| | | this.$message({ |
| | | type: 'error', |
| | | message: '数据请求失败,请稍后重试!' |
| | | }); |
| | | } |
| | | this.getStackFileLoading = false; |
| | | }).catch(e => { |
| | | this.getStackFileLoading = false; |
| | | }); |
| | | }, |
| | | swiperSlideChange() { |
| | | this.swiperIndex = this.$refs.swiper.swiper.activeIndex; |
| | | }, |
| | | mockAsync() { |
| | | setTimeout(() => { |
| | | this.mockSceneData = [ |
| | |
| | | }, 3000) |
| | | }, |
| | | drawBaseImg() { |
| | | this.$refs.canvas.showModal(); |
| | | if (Array.isArray(this.$refs.canvas)) { |
| | | if (this.$refs.canvas.length > 0) { |
| | | this.$refs.canvas[0].showModal(); |
| | | } |
| | | } else { |
| | | this.$refs.canvas.showModal(); |
| | | } |
| | | }, |
| | | getCanvasData(data) { |
| | | let polyon = { ...data }; |
| | | polyon.camera_id = this.Camera.cameraId; |
| | | savePolygon(polyon).then(rsp => { |
| | | this.Camera.getPolygon(); |
| | | this.Camera.getCameraTask(); |
| | | //this.Camera.getCameraTask(); |
| | | }); |
| | | }, |
| | | refresh(url) { |
| | |
| | | this.loading = false; |
| | | this.Camera.cameraId = id; |
| | | await this.Camera.update(); |
| | | |
| | | } |
| | | |
| | | this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id; |
| | |
| | | }) |
| | | |
| | | }, |
| | | |
| | | saveSceneRule(groupRule) { |
| | | const payload = { ...groupRule } |
| | | payload.cameraIds = [this.Camera.cameraId]; |
| | | let _this = this; |
| | | saveCameraScene(payload).then(rsp => { |
| | | if (rsp && rsp.success) { |
| | | this.Camera.update(); |
| | |
| | | type: "success", |
| | | message: "策略保存成功!" |
| | | }); |
| | | //刷新左侧树 |
| | | |
| | | _this.$root.$children[0].$children[0].querySearchAsync('camera') |
| | | |
| | | } |
| | | }); |
| | | }, |
| | |
| | | }, |
| | | changeLoading(params) { |
| | | this.loading = params |
| | | // console.log(this.loading,'changeLoading',params) |
| | | }, |
| | | //是否进行视频分析处理 |
| | | pollEnable(row) { |
| | |
| | | val = -1 |
| | | } |
| | | if (this.Camera.cameraId && this.Camera.cameraId !== undefined) { |
| | | debugger |
| | | changeRunType({ camera_ids: [this.Camera.cameraId], run_type: val }).then( |
| | | rsp => { |
| | | if (rsp && rsp.success) { |
| | |
| | | message: "配置失败" |
| | | }); |
| | | } |
| | | // this.selectCamera(this.TreeDataPool.selectedNode) |
| | | this.TreeDataPool.fetchTreeData(); |
| | | } |
| | | ); |
| | | } |
| | | this.TreeDataPool.fetchTreeData(); |
| | | this.PollData.statisticTaskInfo(); |
| | | }, |
| | | //实时、轮询切换 |
| | | changePoll(row) { |
| | | //判断是新增还是更新 |
| | | debugger |
| | | if (this.Camera.cameraId && this.Camera.cameraId !== undefined) { |
| | | if (this.PollData.RealTimeSum < this.PollData.channelTotal) { |
| | | if (row.value) { |
| | |
| | | } else { |
| | | this.Camera.dealWay = false |
| | | } |
| | | debugger |
| | | changeRunType({ camera_ids: [this.Camera.cameraId], run_type: this.Camera.dealWay ? 1 : 0 }).then( |
| | | rsp => { |
| | | if (rsp && rsp.success) { |
| | |
| | | } else { |
| | | if (this.Camera.dealWay) { |
| | | this.Camera.dealWay = false |
| | | debugger |
| | | changeRunType({ camera_ids: [this.Camera.cameraId], run_type: this.Camera.dealWay ? 1 : 0 }).then( |
| | | rsp => { |
| | | if (rsp && rsp.success) { |
| | |
| | | sourceId: this.TreeDataPool.ctrlCameraId, |
| | | targetIds: [this.Camera.cameraId] |
| | | }).then((res) => { |
| | | // console.log(res,'复制算法') |
| | | if (res && res.success) { |
| | | this.$notify({ |
| | | type: "success", |
| | |
| | | }) |
| | | } |
| | | }).catch(err => { |
| | | // console.log(err,'复制算法报错!') |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "粘贴算法失败!" |
| | |
| | | }; |
| | | </script> |
| | | <style lang="scss"> |
| | | .el-message--info .el-message__content { |
| | | color: #999 !important; |
| | | } |
| | | .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; |
| | | .ai { |
| | | //width: calc(100% + 76px); |
| | | // 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%; |
| | |
| | | .swiper-box { |
| | | height: 100%; |
| | | float: left; |
| | | width: 48%; |
| | | width: 46%; |
| | | margin-top: -10px; |
| | | position: relative; |
| | | } |
| | | .swiper-container { |
| | | position: initial; |
| | | min-width: 472px; |
| | | width: 80%; |
| | | |
| | | // height: 124px; |
| | | width: 86%; |
| | | } |
| | | .swiper-slide { |
| | | position: relative; |
| | |
| | | backdrop-filter: blur(1px) brightness(100%); |
| | | display: none; |
| | | } |
| | | |
| | | // @media screen and(max-width: 1280px) { |
| | | // max-width: 110px; |
| | | // } |
| | | @media screen and(max-width: 1440px) { |
| | | max-width: 110px; |
| | | } |
| | |
| | | .swiper-next-border:hover { |
| | | background: #666; |
| | | } |
| | | |
| | | .top-right { |
| | | float: right; |
| | | width: 52%; |
| | | width: 54%; |
| | | height: 144px; |
| | | .card-box { |
| | | width: 54% !important; |
| | | } |
| | | .eCharts-box { |
| | | width: 45%; |
| | | canvas { |
| | | width: 98% !important; |
| | | } |
| | | } |
| | | } |
| | | .task-css { |
| | | text-align: left; |
| | |
| | | } |
| | | .bottom { |
| | | width: 100%; |
| | | |
| | | margin-bottom: 15px; |
| | | .bottom-side { |
| | | height: 100%; |
| | | width: 250px; |
| | |
| | | color: #3d68e1; |
| | | margin-left: 10px; |
| | | font-size: 14px; |
| | | } |
| | | .task-tip { |
| | | font-family: PingFangSC-Regular; |
| | | font-size: 12px; |
| | | color: #cccccc; |
| | | margin-top: 10%; |
| | | margin-left: 38%; |
| | | } |
| | | |
| | | .marker { |