233 lines
7.9 KiB
Vue
Executable File
233 lines
7.9 KiB
Vue
Executable File
<template>
|
||
<div id="configInfo">
|
||
<el-dialog
|
||
v-el-drag-dialog
|
||
title="立即拍摄"
|
||
width="65%"
|
||
top="2rem"
|
||
:close-on-click-modal="false"
|
||
:visible.sync="showDialog"
|
||
:destroy-on-close="true"
|
||
@close="close()"
|
||
>
|
||
<el-form size="small" @submit.native.prevent>
|
||
<el-form-item>
|
||
<el-form inline @submit.native.prevent>
|
||
<el-form-item style="margin-right: 14.5rem">
|
||
<el-radio-group v-model="commandType">
|
||
<el-radio :label="true" border>拍摄</el-radio>
|
||
<el-radio :label="false" border>录像</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-form inline size="small" @submit.native.prevent>
|
||
<el-form-item label="录像时长" v-if="!commandType">
|
||
<el-input type="number" v-model="time" placeholder="一直录像" style="width: 8rem"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="连拍" v-if="commandType">
|
||
<el-input type="number" v-model="commandNumber" placeholder="连拍张数" style="width: 4rem"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="拍照间隔" v-if="commandType">
|
||
<el-input type="number" v-model="time" placeholder="最小间隔拍照" style="width: 8rem"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="存储方式">
|
||
<el-select
|
||
v-model="save"
|
||
style="width: 8rem"
|
||
placeholder="请选择存储方式"
|
||
>
|
||
<el-option label="实时上传" :value="0" />
|
||
<el-option label="保存" :value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="通道">
|
||
<el-select
|
||
v-model="chanelId"
|
||
style="width: 8rem"
|
||
placeholder="请选择通道"
|
||
>
|
||
<el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.channelId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="分辨率">
|
||
<el-select
|
||
v-model="resolvingPower"
|
||
style="width: 8rem"
|
||
placeholder="请选择分辨率"
|
||
>
|
||
<el-option label="最低分辨率" :value="0x00" />
|
||
<el-option label="320×240" :value="0x01" />
|
||
<el-option label="640×480" :value="0x02" />
|
||
<el-option label="800×600" :value="0x03" />
|
||
<el-option label="1024×768" :value="0x04" />
|
||
<el-option label="176×144" :value="0x05" />
|
||
<el-option label="352×288" :value="0x06" />
|
||
<el-option label="704×288" :value="0x07" />
|
||
<el-option label="704×576" :value="0x08" />
|
||
<el-option label="最高分辨率" :value="0xff" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-checkbox v-model="showImageConfig">高级配置</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item style="margin-left: 2rem; text-align: right" >
|
||
<el-button v-if="!commandType" type="danger" icon="el-icon-video-camera" @click="stopRecord()" >
|
||
停止录像
|
||
</el-button>
|
||
<el-button v-if="!commandType" type="primary" icon="el-icon-video-camera" @click="shooting()" >
|
||
开始录像
|
||
</el-button>
|
||
<el-button v-if="commandType" type="primary" icon="el-icon-camera" @click="shooting()" >
|
||
拍照
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-form-item>
|
||
<el-form-item v-if="showImageConfig">
|
||
<el-form size="small" label-width="80px" style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.5rem">
|
||
<el-form-item label="质量" prop="topSpeed" >
|
||
<el-slider v-model="quality" show-input :height="1" :marks="qualityMarks" :min="1" :max="10" :step="1"/>
|
||
</el-form-item>
|
||
<el-form-item label="亮度" prop="brightness">
|
||
<el-slider v-model="brightness" show-input :height="1" :min="0" :max="255" :step="1" />
|
||
</el-form-item>
|
||
<el-form-item label="对比度" prop="contrastRatio">
|
||
<el-slider v-model="contrastRatio" show-input :height="1" :min="0" :max="127" :step="1"/>
|
||
</el-form-item>
|
||
<el-form-item label="饱和度" prop="saturation">
|
||
<el-slider v-model="saturation" show-input :height="1" :min="0" :max="127" :step="1"/>
|
||
</el-form-item>
|
||
<el-form-item label="色度" prop="chroma">
|
||
<el-slider v-model="chroma" show-input :height="1" :min="0" :max="255" :step="1"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-form-item>
|
||
</el-form>
|
||
<queryMediaList :phoneNumber="phoneNumber" :deviceId="deviceId" :channelList="channelList"></queryMediaList>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import elDragDialog from '@/directive/el-drag-dialog'
|
||
import queryMediaList from './queryMediaList.vue'
|
||
|
||
export default {
|
||
name: 'ConfigInfo',
|
||
directives: { elDragDialog },
|
||
components: { queryMediaList },
|
||
props: {},
|
||
data() {
|
||
return {
|
||
deviceId: null,
|
||
phoneNumber: null,
|
||
showDialog: false,
|
||
queryLoading: false,
|
||
showImageConfig: false,
|
||
commandType: true,
|
||
commandNumber: 1,
|
||
time: null,
|
||
save: 1,
|
||
chanelId: null,
|
||
resolvingPower: 0xff,
|
||
qualityMarks: {
|
||
1: '最优',
|
||
10: '最差'
|
||
},
|
||
quality: 1,
|
||
brightness: 125,
|
||
contrastRatio: 63,
|
||
saturation: 63,
|
||
chroma: 125,
|
||
channelList: [],
|
||
}
|
||
},
|
||
computed: {},
|
||
created() {},
|
||
methods: {
|
||
openDialog: function(phoneNumber, deviceId) {
|
||
console.log(phoneNumber)
|
||
this.showDialog = true
|
||
this.phoneNumber = phoneNumber
|
||
this.deviceId = deviceId
|
||
this.$store.dispatch('jtDevice/queryChannels', {
|
||
page: 1,
|
||
count: 1000,
|
||
deviceId: this.deviceId
|
||
})
|
||
.then(data => {
|
||
this.channelList = data.list
|
||
this.chanelId = data.list[0].channelId
|
||
})
|
||
|
||
},
|
||
close: function() {
|
||
this.showDialog = false
|
||
this.channelList = []
|
||
this.type = 0
|
||
this.chanelId = null
|
||
},
|
||
shooting: function() {
|
||
this.$store.dispatch('jtDevice/shooting', {
|
||
phoneNumber: this.phoneNumber,
|
||
shootingCommand: {
|
||
chanelId: this.chanelId,
|
||
command: !this.commandType? 0xFFFF : this.commandNumber,
|
||
time: this.time,
|
||
save: this.save,
|
||
resolvingPower: this.resolvingPower,
|
||
quality: this.quality,
|
||
brightness: this.brightness,
|
||
contrastRatio: this.contrastRatio,
|
||
saturation: this.saturation,
|
||
chroma: this.chroma
|
||
}
|
||
})
|
||
.then( data => {
|
||
this.$message.success({
|
||
showClose: true,
|
||
message: '消息已经下发'
|
||
})
|
||
})
|
||
},
|
||
stopRecord: function() {
|
||
this.$store.dispatch('jtDevice/shooting', {
|
||
phoneNumber: this.phoneNumber,
|
||
shootingCommand: {
|
||
chanelId: this.chanelId,
|
||
command: 0,
|
||
time: 0,
|
||
save: 1,
|
||
resolvingPower: 0xff,
|
||
quality: 0,
|
||
brightness: 0,
|
||
contrastRatio: 0,
|
||
saturation: 0,
|
||
chroma: 0
|
||
}
|
||
})
|
||
.then( data => {
|
||
this.$message.success({
|
||
showClose: true,
|
||
message: '消息已经下发'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
>>> .el-upload {
|
||
width: 100% !important;
|
||
}
|
||
>>> .el-slider__marks-text {
|
||
margin-top: -36px;
|
||
font-size: 12px;
|
||
width: 2rem !important;
|
||
}
|
||
</style>
|