<!--<template>-->
|
<!-- <div>-->
|
<!-- <div class="center">-->
|
<!-- <div style="display: flex;margin-bottom: 20px">-->
|
<!-- <el-input size="small" v-model="queryForm.name" placeholder="资源名称搜索" clearable @clear="handlerSearch" @input="handlerSearch"/>-->
|
<!-- <el-button style="margin-left: 10px" size="small" @click="handlerSearch">搜索</el-button>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="center">-->
|
<!-- <div>-->
|
<!-- <el-table-->
|
<!-- :data="tableData"-->
|
<!-- border-->
|
<!-- style="width: 100%">-->
|
<!-- <el-table-column-->
|
<!-- fixed-->
|
<!-- prop="indexCode"-->
|
<!-- label="资源唯一编码"-->
|
<!-- width="350">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="name"-->
|
<!-- label="资源名称"-->
|
<!-- width="250">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="regionName"-->
|
<!-- label="所属区域"-->
|
<!-- width="120">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="regionPathName"-->
|
<!-- label="所属区域路径"-->
|
<!-- width="300">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="cameraType"-->
|
<!-- label="摄像机类型"-->
|
<!-- :formatter="cameraTypeFormatter"-->
|
<!-- width="120">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="createTime"-->
|
<!-- label="创建时间"-->
|
<!-- width="250">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- fixed="right"-->
|
<!-- label="操作"-->
|
<!-- width="100">-->
|
<!-- <template slot-scope="scope">-->
|
<!-- <el-button @click="lookVideo(scope.row)" type="text" size="small">查看</el-button>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- </el-table>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="center" style="margin-top: 20px">-->
|
<!-- <el-pagination-->
|
<!-- @size-change="handleSizeChange"-->
|
<!-- @current-change="handleCurrentChange"-->
|
<!-- :current-page="queryForm.pageNo"-->
|
<!-- :page-sizes="[10, 15, 20, 50]"-->
|
<!-- :page-size="100"-->
|
<!-- layout="total, sizes, prev, pager, next, jumper"-->
|
<!-- :total="total">-->
|
<!-- </el-pagination>-->
|
<!-- </div>-->
|
|
<!-- <el-dialog-->
|
<!-- title="查看视频"-->
|
<!-- :visible.sync="showVideo"-->
|
<!-- width="1300px"-->
|
<!-- :close-on-click-modal="false"-->
|
<!-- :destroy-on-close="true"-->
|
<!-- >-->
|
<!-- <div style="display: flex;flex-direction: row;">-->
|
<!-- <div style="width: 700px">-->
|
<!-- <easy-player :video-url="url" style="width:700px;height: 370px"></easy-player>-->
|
<!-- </div>-->
|
<!-- <div v-if="cameraType === 1 || cameraType === 2 || cameraType === 3" style="width: 550px;margin-left: 20px">-->
|
<!-- <div style="height: 140px; position: relative">-->
|
<!-- <div style="position: absolute; top: 0px;left: 5px">方向控制</div>-->
|
<!-- <div style="margin-left: 20px">-->
|
<!-- <div class="fx">-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item icon" @mousedown="setCameraCommand('LEFT_UP', 0)" @mouseup="setCameraCommand('LEFT_UP', 1)"><i class="el-icon-top-left"></i></div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item icon" @mousedown="setCameraCommand('UP', 0)" @mouseup="setCameraCommand('UP', 1)"><i class="el-icon-top"></i></div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item icon" @mousedown="setCameraCommand('RIGHT_UP', 0)" @mouseup="setCameraCommand('RIGHT_UP', 1)"><i class="el-icon-top-right"></i></div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="fx">-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item icon" @mousedown="setCameraCommand('LEFT', 0)" @mouseup="setCameraCommand('LEFT', 1)"><i class="el-icon-back"></i></div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div style="min-width: 54px"> </div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item icon" @mousedown="setCameraCommand('RIGHT', 0)" @mouseup="setCameraCommand('RIGHT', 1)"><i class="el-icon-right"></i></div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="fx">-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item icon" @mousedown="setCameraCommand('LEFT_DOWN', 0)" @mouseup="setCameraCommand('LEFT_DOWN', 1)"><i class="el-icon-bottom-left"></i></div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item icon" @mousedown="setCameraCommand('DOWN', 0)" @mouseup="setCameraCommand('DOWN', 1)"><i class="el-icon-bottom"></i></div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item icon" @mousedown="setCameraCommand('RIGHT_DOWN', 0)" @mouseup="setCameraCommand('RIGHT_DOWN', 1)"><i class="el-icon-bottom-right"></i></div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div style="height: 50px; position: relative">-->
|
<!-- <div style="position: absolute; top: 0px;left: 5px">焦距控制</div>-->
|
<!-- <div style="margin-left: 20px">-->
|
<!-- <div class="fx">-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('ZOOM_IN', 0)" @mouseup="setCameraCommand('ZOOM_IN', 1)">焦距变大</div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('ZOOM_OUT', 0)" @mouseup="setCameraCommand('ZOOM_OUT', 1)">焦距变小</div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div style="height: 50px; position: relative">-->
|
<!-- <div style="position: absolute; top: 0px;left: 5px">焦点控制</div>-->
|
<!-- <div style="margin-left: 20px">-->
|
<!-- <div class="fx">-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('FOCUS_NEAR', 0)" @mouseup="setCameraCommand('FOCUS_NEAR', 1)">焦点前移</div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('FOCUS_FAR', 0)" @mouseup="setCameraCommand('FOCUS_FAR', 1)">焦点后移</div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div style="height: 50px; position: relative">-->
|
<!-- <div style="position: absolute; top: 0px;left: 5px">光圈控制</div>-->
|
<!-- <div style="margin-left: 20px">-->
|
<!-- <div class="fx">-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('IRIS_ENLARGE', 0)" @mouseup="setCameraCommand('IRIS_ENLARGE', 1)">光圈扩大</div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('IRIS_REDUCE', 0)" @mouseup="setCameraCommand('IRIS_REDUCE', 1)">光圈缩小</div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div style="height: 50px; position: relative">-->
|
<!-- <div style="position: absolute; top: 0px;left: 5px">路线</div>-->
|
<!-- <div style="margin-left: 20px">-->
|
<!-- <div class="fx">-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('START_RECORD_TRACK', 0)" @mouseup="setCameraCommand('START_RECORD_TRACK', 1)">开始记录路线</div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('STOP_RECORD_TRACK', 0)" @mouseup="setCameraCommand('STOP_RECORD_TRACK', 1)">停止记录路线</div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('START_TRACK', 0)" @mouseup="setCameraCommand('START_TRACK', 1)">开始路线</div>-->
|
<!-- </div>-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('STOP_TRACK', 0)" @mouseup="setCameraCommand('STOP_TRACK', 1)">停止路线</div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div style="height: 50px; position: relative">-->
|
<!-- <div style="position: absolute; top: 0px;left: 5px">接通雨刷开关</div>-->
|
<!-- <div style="margin-left: 20px">-->
|
<!-- <div class="fx">-->
|
<!-- <div class="b-item">-->
|
<!-- <div class="b-item-item" @mousedown="setCameraCommand('WIPER_SWITCH', 0)" @mouseup="setCameraCommand('WIPER_SWITCH', 1)">接通雨刷开关</div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div v-else style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%">-->
|
<!-- <el-alert-->
|
<!-- title="该摄像机类型不支持云台操作"-->
|
<!-- type="info"-->
|
<!-- :closable="false"-->
|
<!-- show-icon>-->
|
<!-- </el-alert>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </el-dialog>-->
|
<!-- </div>-->
|
<!--</template>-->
|
|
<!--<script>-->
|
<!--import { getCamerasPage, getCameraVideoStreamUrl, setCameraCommand } from '@/api/camear'-->
|
<!--import EasyPlayer from '@easydarwin/easyplayer'-->
|
|
<!--export default {-->
|
<!-- name: 'CameraController',-->
|
<!-- components: { EasyPlayer },-->
|
<!-- data () {-->
|
<!-- return {-->
|
<!-- showVideo: false,-->
|
<!-- tableData: [],-->
|
<!-- total: 0,-->
|
<!-- queryForm: {-->
|
<!-- name: '',-->
|
<!-- pageNo: 1,-->
|
<!-- pageSize: 10-->
|
<!-- },-->
|
<!-- url: '',-->
|
<!-- indexCode: '', // 当前查看的设备编码-->
|
<!-- cameraType: null, // 当前查看的摄像机类型-->
|
<!-- command: '' // 当前操作的命令-->
|
<!-- }-->
|
<!-- },-->
|
<!-- mounted () {-->
|
<!-- this.getCameraPage()-->
|
<!-- },-->
|
<!-- methods: {-->
|
<!-- cameraTypeFormatter (row) {-->
|
<!-- if (row.cameraType === 0) {-->
|
<!-- return '枪机'-->
|
<!-- } else if (row.cameraType === 1) {-->
|
<!-- return '半球'-->
|
<!-- } else if (row.cameraType === 2) {-->
|
<!-- return '快球'-->
|
<!-- } else if (row.cameraType === 3) {-->
|
<!-- return '带云台枪机'-->
|
<!-- }-->
|
<!-- },-->
|
<!-- setCameraCommand (command, startOrEnd) {-->
|
<!-- const formData = {-->
|
<!-- indexCode: this.indexCode,-->
|
<!-- action: startOrEnd, // 0开始 1结束-->
|
<!-- command: command-->
|
<!-- }-->
|
<!-- this.command = command-->
|
<!-- setCameraCommand(formData).then(res => {-->
|
<!-- if (startOrEnd === 0) {-->
|
<!-- this.$notify({-->
|
<!-- title: '提示',-->
|
<!-- dangerouslyUseHTMLString: true,-->
|
<!-- message: '开始设置云台操作',-->
|
<!-- type: 'success'-->
|
<!-- })-->
|
<!-- } else if (startOrEnd === 1) {-->
|
<!-- this.$notify({-->
|
<!-- title: '提示',-->
|
<!-- dangerouslyUseHTMLString: true,-->
|
<!-- message: '结束云台操作，稍等一下，设置正在应用中...',-->
|
<!-- type: 'success'-->
|
<!-- })-->
|
<!-- this.command = ''-->
|
<!-- // const params = {-->
|
<!-- // indexCode: this.indexCode,-->
|
<!-- // protocol: 'hls'-->
|
<!-- // }-->
|
<!-- // getCameraVideoStreamUrl(params).then(res => {-->
|
<!-- // this.url = res.data.data-->
|
<!-- // })-->
|
<!-- }-->
|
<!-- })-->
|
<!-- },-->
|
<!-- lookVideo (row) {-->
|
<!-- this.indexCode = row.indexCode-->
|
<!-- this.cameraType = row.cameraType-->
|
<!-- const params = {-->
|
<!-- indexCode: row.indexCode,-->
|
<!-- protocol: 'hls'-->
|
<!-- }-->
|
<!-- getCameraVideoStreamUrl(params).then(res => {-->
|
<!-- this.url = res.data.data-->
|
<!-- this.showVideo = true-->
|
<!-- })-->
|
<!-- },-->
|
<!-- handlerSearch () {-->
|
<!-- this.queryForm.pageNo = 1-->
|
<!-- this.getCameraPage()-->
|
<!-- },-->
|
<!-- getCameraPage () {-->
|
<!-- getCamerasPage(this.queryForm).then(res => {-->
|
<!-- this.tableData = res.data.data-->
|
<!-- this.total = res.data.total-->
|
<!-- })-->
|
<!-- },-->
|
<!-- handleSizeChange (val) {-->
|
<!-- this.queryForm.pageSize = val-->
|
<!-- this.getCameraPage()-->
|
<!-- },-->
|
<!-- handleCurrentChange (val) {-->
|
<!-- this.queryForm.pageNo = val-->
|
<!-- this.getCameraPage()-->
|
<!-- }-->
|
<!-- }-->
|
<!--}-->
|
<!--</script>-->
|
|
<!--<style scoped>-->
|
<!--.center {-->
|
<!-- width: 100%;-->
|
<!-- display: flex;-->
|
<!-- flex-direction: row;-->
|
<!-- justify-content: center;-->
|
<!-- align-items: center;-->
|
<!--}-->
|
<!--.fx {-->
|
<!-- display: flex;justify-content: center;align-items: center;height: 35px;margin-bottom: 8px;-->
|
<!--}-->
|
<!--.b-item {-->
|
<!-- margin-right: 8px;-->
|
<!--}-->
|
<!--.b-item-item {-->
|
<!-- padding: 10px;-->
|
<!-- background-color: #eaeaea;-->
|
<!--}-->
|
<!--.b-item-item:hover {-->
|
<!-- cursor: pointer;-->
|
<!--}-->
|
<!--.icon {-->
|
<!-- min-width: 34px;-->
|
<!--}-->
|
<!--.bgc {-->
|
<!-- background-color: #409EFF;-->
|
<!--}-->
|
<!--#my-video {-->
|
<!-- /*width: 800px;*/-->
|
<!-- /*height: 400px;*/-->
|
<!--}-->
|
<!--</style>-->
|
