拍照装置管理--参数配置

hn2.0
13703816893 2 years ago
parent cd25ab2d2e
commit 7e474255b6

@ -205,9 +205,9 @@
/>
</viewer> -->
<img
@load="imgOnload"
ref="picJpg"
class="animImg"
@load="imgOnload"
:src="photoPic + '!1280x720'"
/>
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
@ -327,11 +327,6 @@ export default {
this.getTableList();
},
methods: {
imgOnload() {
console.log("加载完成");
//this.alarmLoading = false;
this.canvasloading = false;
},
handleBigPicbox(val) {
this.canvasloading = true;
if (val.path !== "" && this.tableData.length !== 0) {
@ -504,10 +499,10 @@ export default {
//
handleRowClick(row) {
//this.$refs.multipleTable.toggleRowSelection(row);
//this.alarmLoading = true;
console.log(row);
console.log(this.$refs.picJpg.complete);
this.alarmLoading = true;
this.photoPic = row.path;
console.log(this.photoPic);
this.selectRow = row;
//
if (row.isread == 0) {
@ -525,13 +520,10 @@ export default {
});
}, 300);
}
setTimeout(function () {
console.log("关闭遮罩");
this.alarmLoading = false;
}, 1000);
this.$nextTick(() => {
this.drawline(row);
this.imgOnload();
});
},
//
@ -598,6 +590,11 @@ export default {
}
return moment(date).format("YYYY-MM-DD HH:mm:ss");
},
imgOnload() {
console.log("加载完成");
this.alarmLoading = false;
this.canvasloading = false;
},
},
};
</script>

@ -1,16 +1,14 @@
<template>
<el-dialog
class="setimgDialog"
title="图像采集参数"
:visible.sync="isShow"
:close-on-click-modal="false"
width="60%"
@close="handleclose"
<el-tabs
v-model="activeName"
type="card"
@tab-click="handleClick"
v-loading="loading"
>
<el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
<el-tab-pane label="查询实际参数" name="1">
<div class="captureBox">
<div class="flexnr">
<div class="wt80">通道:</div>
<div class="wt80">通道</div>
<el-select v-model="selaccess" placeholder="请选择" class="mr20">
<el-option
v-for="item in accesslist"
@ -19,15 +17,9 @@
:value="item.channelid"
></el-option>
</el-select>
<el-button
:loading="searchloading"
type="primary"
@click="inquirebtn()"
>查询</el-button
>
</div>
<div class="flexno bt30">
<div class="wt80">色彩选择:</div>
<div class="wt80">色彩选择</div>
<el-select v-model="capturenr.color" class="wt280" :disabled="true">
<el-option
v-for="item in colorlist"
@ -38,7 +30,7 @@
</el-select>
</div>
<div class="flexno bt30">
<div class="wt80">图像分辨率:</div>
<div class="wt80">图像分辨率</div>
<el-select
v-model="capturenr.resolution"
class="wt280"
@ -53,7 +45,7 @@
</el-select>
</div>
<div class="flexno bt30">
<div class="wt80">亮度:</div>
<div class="wt80">亮度</div>
<el-input
v-model="capturenr.luminance"
:disabled="true"
@ -61,7 +53,7 @@
></el-input>
</div>
<div class="flexno bt30">
<div class="wt80">对比度:</div>
<div class="wt80">对比度</div>
<el-input
v-model="capturenr.contrast"
:disabled="true"
@ -69,15 +61,24 @@
></el-input>
</div>
<div class="flexno bt30">
<div class="wt80">饱和度:</div>
<div class="wt80">饱和度</div>
<el-input
v-model="capturenr.saturation"
:disabled="true"
class="wt280"
></el-input>
</div>
<el-button
class="searchImage"
:loading="searchloading"
type="primary"
@click="inquirebtn()"
>查询</el-button
>
</div>
</el-tab-pane>
<el-tab-pane label="设置参数" name="2">
<div class="captureBox">
<el-form
:model="setForm"
:rules="rules"
@ -154,9 +155,9 @@
>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
</template>
<script>
import {
@ -330,95 +331,49 @@ export default {
};
</script>
<style lang="less">
.setimgDialog {
.el-tabs__content {
height: 400px;
overflow: auto;
.el-tab-pane {
height: calc(100% - 16px);
}
}
.flexonly {
display: flex;
flex-wrap: wrap;
}
.flexno {
display: flex;
.captureBox {
width: 400px;
margin: 0 auto;
margin-top: 24px;
padding: 0px 8px;
align-items: center;
}
.flexnr {
display: flex;
align-items: center;
margin-top: 16px;
padding: 0px 8px;
}
.mt10 {
margin-bottom: 10px;
}
.mr10 {
margin-right: 10px;
}
.w8 {
width: 8%;
}
height: 32px;
line-height: 32px;
margin-bottom: 18px;
.wt80 {
width: 80px;
}
.wt280 {
width: 280px;
}
.w80 {
width: 90%;
overflow-y: auto;
height: 300px;
text-align: right;
float: left;
font-size: 14px;
color: #606266;
margin: 0 12px 0 0;
box-sizing: border-box;
width: 100px;
display: block;
}
.mr20 {
margin-right: 20px;
}
.bt30 {
margin-bottom: 30px;
}
.deviceTable {
padding: 16px 8px 0 8px;
height: calc(100% - 16px);
.rulesBox {
display: flex;
flex-direction: row;
li {
list-style: none;
margin-right: 24px;
line-height: 24px;
span {
margin-right: 4px;
}
.el-tag--small {
height: 16px;
padding: 0 8px;
line-height: 16px;
}
}
}
flex: 1;
}
}
.setRoadDialog {
.el-dialog__body {
height: 400px;
overflow: auto;
.el-form {
height: 100%;
//background: #fcc;
.searchImage {
margin-left: 120px;
}
.setTimeTd {
h3 {
margin: 8px 0px;
font-size: 16px;
line-height: 24px;
}
.timename {
margin: 8px 0px;
.flexno {
display: flex;
height: 32px;
line-height: 32px;
margin-bottom: 18px;
.wt80 {
text-align: right;
float: left;
font-size: 14px;
color: #606266;
margin: 0 12px 0 0;
box-sizing: border-box;
width: 100px;
display: block;
}
.wt280 {
flex: 1;
}
}
}

@ -0,0 +1,425 @@
<template>
<el-dialog
class="setimgDialog"
title="图像采集参数"
:visible.sync="isShow"
:close-on-click-modal="false"
width="60%"
@close="handleclose"
>
<el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
<el-tab-pane label="查询实际参数" name="1">
<div class="flexnr">
<div class="wt80">通道:</div>
<el-select v-model="selaccess" placeholder="请选择" class="mr20">
<el-option
v-for="item in accesslist"
:key="item.channelid"
:label="item.channelname"
:value="item.channelid"
></el-option>
</el-select>
<el-button
:loading="searchloading"
type="primary"
@click="inquirebtn()"
>查询</el-button
>
</div>
<div class="flexno bt30">
<div class="wt80">色彩选择:</div>
<el-select v-model="capturenr.color" class="wt280" :disabled="true">
<el-option
v-for="item in colorlist"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
<div class="flexno bt30">
<div class="wt80">图像分辨率:</div>
<el-select
v-model="capturenr.resolution"
class="wt280"
:disabled="true"
>
<el-option
v-for="item in ratiolist"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
<div class="flexno bt30">
<div class="wt80">亮度:</div>
<el-input
v-model="capturenr.luminance"
:disabled="true"
class="wt280"
></el-input>
</div>
<div class="flexno bt30">
<div class="wt80">对比度:</div>
<el-input
v-model="capturenr.contrast"
:disabled="true"
class="wt280"
></el-input>
</div>
<div class="flexno bt30">
<div class="wt80">饱和度:</div>
<el-input
v-model="capturenr.saturation"
:disabled="true"
class="wt280"
></el-input>
</div>
</el-tab-pane>
<el-tab-pane label="设置参数" name="2">
<el-form
:model="setForm"
:rules="rules"
ref="setForm"
label-width="120px"
>
<el-form-item label="通道" prop="channelId">
<el-select
v-model="setForm.channelId"
placeholder="请选择"
class="mr20"
>
<el-option
v-for="item in accesslist"
:key="item.channelid"
:label="item.channelname"
:value="item.channelid"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="色彩选择" prop="color">
<el-select
v-model="setForm.color"
placeholder="请选择"
class="mr20"
>
<el-option
v-for="item in colorlist"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="图像分辨率" prop="resolution">
<el-select
v-model="setForm.resolution"
placeholder="请选择"
class="mr20"
>
<el-option
v-for="item in ratiolist"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="亮度" prop="luminance">
<el-input-number
v-model="setForm.luminance"
:min="1"
:max="100"
></el-input-number>
</el-form-item>
<el-form-item label="对比度" prop="contrast">
<el-input-number
v-model="setForm.contrast"
:min="1"
:max="100"
></el-input-number>
</el-form-item>
<el-form-item label="饱和度" prop="saturation">
<el-input-number
v-model="setForm.saturation"
:min="1"
:max="100"
></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitbtn('setForm')"
>确认</el-button
>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-dialog>
</template>
<script>
import {
getChannelListJoggle,
getPhotoParamApi,
setPhotoParamApi,
getPhotoParamnrApi,
getResolutionRatio,
} from "@/utils/api/index";
export default {
data() {
return {
loading: false,
isShow: false,
searchloading: false,
activeName: "1", //
accesslist: [], //
colorlist: [
{
name: "黑白",
id: 0,
},
{
name: "彩色",
id: 1,
},
], //
ratiolist: [], //
selaccess: "", //
capturenr: {}, //
setForm: {}, //
rules: {
channelId: [{ required: true, message: "请选择通道", trigger: "blur" }],
color: [{ required: true, message: "请选择色彩", trigger: "blur" }],
contrast: [
{ required: true, message: "请输入对比度", trigger: "blur" },
],
luminance: [{ required: true, message: "请输入亮度", trigger: "blur" }],
resolution: [
{ required: true, message: "请选择图像分辨率", trigger: "blur" },
],
saturation: [
{ required: true, message: "请输入饱和度", trigger: "blur" },
],
},
timer: null,
i: 0,
seltermid: "", //id
selcmdId: "", //cmdId
requestId: "",
};
},
mounted() {},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
//
getSingleAccess(val) {
this.setForm = {};
console.log(val);
this.seltermid = val.id;
this.selcmdId = val.cmdid;
getChannelListJoggle({ termid: this.seltermid })
.then((res) => {
this.accesslist = res.data.list;
this.selaccess = res.data.list[0].channelid;
this.$set(this.setForm, "channelId", res.data.list[0].channelid);
})
.catch((err) => {});
},
//
getRatio() {
this.$set(this.setForm, "color", this.colorlist[0].id);
getResolutionRatio({ type: 0 })
.then((res) => {
this.ratiolist = res.data.list;
this.$set(this.setForm, "resolution", res.data.list[0].id);
})
.catch((err) => {});
},
//
inquirebtn() {
this.loading = true;
this.searchloading = true;
getPhotoParamApi({
channelId: this.selaccess,
cmdId: this.selcmdId,
})
.then((res) => {
if (res.code == 200) {
this.requestId = res.data.requestId;
this.inquirenr();
this.timer = window.setInterval(() => {
this.inquirenr();
this.i++;
}, 1000);
} else {
this.$message.error(res.code.msg);
}
})
.catch((err) => {});
},
//
inquirenr() {
getPhotoParamnrApi({
channelId: this.selaccess,
termId: this.seltermid,
requestId: this.requestId,
})
.then((res) => {
this.loading = false;
if (res.code == 200) {
this.capturenr = res.data;
if (res.data.isNew == true) {
this.searchloading = false;
this.i = 0;
this.$message.success("查询已更新");
clearInterval(this.timer);
this.timer = null;
} else if (this.i > 9) {
this.searchloading = false;
this.i = 0;
this.$message.warning("暂无响应,请稍后再试!");
clearInterval(this.timer);
this.timer = null;
}
} else {
this.$message.error(res.code.msg);
}
})
.catch((err) => {});
},
//
submitbtn(setForm) {
this.$set(this.setForm, "cmdId", this.selcmdId);
this.$set(this.setForm, "termId", this.seltermid);
this.$refs[setForm].validate((valid) => {
if (valid) {
setPhotoParamApi(this.setForm)
.then((res) => {
if (res.code == 200) {
this.$message.success("设置成功");
this.isShow = false;
} else {
this.$message.error(res.code.msg);
}
})
.catch((err) => {
this.$message.error("设置失败");
});
} else {
return false;
}
});
},
display() {
this.isShow = true;
},
hide() {
this.isShow = false;
},
handleclose() {
this.searchloading = false;
this.i = 0;
clearInterval(this.timer);
this.timer = null;
},
},
};
</script>
<style lang="less">
.setimgDialog {
.el-tabs__content {
height: 400px;
overflow: auto;
.el-tab-pane {
height: calc(100% - 16px);
}
}
.flexonly {
display: flex;
flex-wrap: wrap;
}
.flexno {
display: flex;
margin-top: 24px;
padding: 0px 8px;
align-items: center;
}
.flexnr {
display: flex;
align-items: center;
margin-top: 16px;
padding: 0px 8px;
}
.mt10 {
margin-bottom: 10px;
}
.mr10 {
margin-right: 10px;
}
.w8 {
width: 8%;
}
.wt80 {
width: 80px;
}
.wt280 {
width: 280px;
}
.w80 {
width: 90%;
overflow-y: auto;
height: 300px;
}
.mr20 {
margin-right: 20px;
}
.bt30 {
margin-bottom: 30px;
}
.deviceTable {
padding: 16px 8px 0 8px;
height: calc(100% - 16px);
.rulesBox {
display: flex;
flex-direction: row;
li {
list-style: none;
margin-right: 24px;
line-height: 24px;
span {
margin-right: 4px;
}
.el-tag--small {
height: 16px;
padding: 0 8px;
line-height: 16px;
}
}
}
}
}
.setRoadDialog {
.el-dialog__body {
height: 400px;
overflow: auto;
.el-form {
height: 100%;
//background: #fcc;
}
.setTimeTd {
h3 {
margin: 8px 0px;
font-size: 16px;
line-height: 24px;
}
.timename {
margin: 8px 0px;
}
}
}
}
</style>

@ -0,0 +1,364 @@
<template>
<el-dialog
class="parameterSetDialog"
title="参数设置"
:visible.sync="isShow"
:close-on-click-modal="false"
width="1100px"
@close="handleclose"
>
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
<el-tab-pane label="装置时间" name="1">
<div class="deviceTime">
<el-form
:model="deviceTimeForm"
label-position="right"
label-width="84px"
>
<el-form-item label="装置时间">
<el-input
v-model="deviceTimeForm.zztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item label="新装置时间">
<el-input v-model="deviceTimeForm.newzztime"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
<el-button type="primary">设置</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="采样参数" name="2">
<div class="tabsBox">
<el-tabs v-model="tabsActive" type="card">
<el-tab-pane label="查询实际参数" name="first">
<div class="queryParam">
<el-form
:model="deviceTimeForm"
label-position="right"
label-width="124px"
>
<el-form-item label="采集周期(分钟)">
<el-input
v-model="deviceTimeForm.zztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item label="采集周期(分钟)">
<el-input
v-model="deviceTimeForm.newzztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item label="心跳周期(分钟)">
<el-input
v-model="deviceTimeForm.newzztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="设置参数" name="second">
<div class="queryParam">
<el-form
:model="deviceTimeForm"
label-position="right"
label-width="124px"
>
<el-form-item label="采集周期(分钟)">
<el-input v-model="deviceTimeForm.zztime"></el-input>
</el-form-item>
<el-form-item label="采集周期(分钟)">
<el-input v-model="deviceTimeForm.newzztime"></el-input>
</el-form-item>
<el-form-item label="心跳周期(分钟)">
<el-input v-model="deviceTimeForm.newzztime"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">设置</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
<el-tab-pane label="上位机" name="3">
<div class="tabsBox">
<el-tabs v-model="tabsActive" type="card">
<el-tab-pane label="查询实际参数" name="first">
<div class="queryParam">
<el-form
:model="deviceTimeForm"
label-position="right"
label-width="124px"
>
<el-form-item label="IP地址">
<el-input
v-model="deviceTimeForm.zztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item label="端口号">
<el-input
v-model="deviceTimeForm.newzztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item label="域名">
<el-input
v-model="deviceTimeForm.newzztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="设置参数" name="second">
<div class="queryParam">
<el-form
:model="deviceTimeForm"
label-position="right"
label-width="124px"
>
<el-form-item label="IP地址">
<el-input v-model="deviceTimeForm.zztime"></el-input>
</el-form-item>
<el-form-item label="端口号">
<el-input v-model="deviceTimeForm.newzztime"></el-input>
</el-form-item>
<el-form-item label="域名">
<el-input v-model="deviceTimeForm.newzztime"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">设置</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
<el-tab-pane label="ID参数" name="4">
<div class="tabsBox">
<el-tabs v-model="tabsActive" type="card">
<el-tab-pane label="查询实际参数" name="first">
<div class="queryParam">
<el-form
:model="deviceTimeForm"
label-position="right"
label-width="124px"
>
<el-form-item label="CMD_ID">
<el-input
v-model="deviceTimeForm.zztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item label="杆塔ID">
<el-input
v-model="deviceTimeForm.newzztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item label="原始ID">
<el-input
v-model="deviceTimeForm.newzztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="设置参数" name="second">
<div class="queryParam">
<el-form
:model="deviceTimeForm"
label-position="right"
label-width="124px"
>
<el-form-item label="CMD_ID">
<el-input v-model="deviceTimeForm.zztime"></el-input>
</el-form-item>
<el-form-item label="杆塔ID">
<el-input v-model="deviceTimeForm.newzztime"></el-input>
</el-form-item>
<el-form-item label="原始ID">
<el-input
v-model="deviceTimeForm.newzztime"
disabled="disabled"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">设置</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
<el-tab-pane label="图像采集参数" name="5">
<div class="tabsBox">
<imageCapture ref="imageCaptureref"></imageCapture>
</div>
</el-tab-pane>
<el-tab-pane label="视频参数" name="6">
<div class="tabsBox">
<videoCapture ref="videoCaptureref"></videoCapture>
</div>
</el-tab-pane>
<el-tab-pane label="装置运行状态" name="7">装置运行状态</el-tab-pane>
<el-tab-pane label="GPS位置" name="8">GPS位置</el-tab-pane>
<el-tab-pane label="基本操作" name="9">
<div class="resetDevice">
<h3>装置复位</h3>
<el-button type="primary" @click.native.stop="handleDeviceReset"
>复位</el-button
>
</div>
</el-tab-pane>
</el-tabs>
<div slot="footer" class="dialog-footer">
<el-button @click="isShow = false"> </el-button>
</div>
</el-dialog>
</template>
<script>
import { resetTerminalApi } from "@/utils/api/index";
import imageCapture from "./imageCapture.vue";
import videoCapture from "./videoCapture.vue";
export default {
props: {
photoDialog: {
type: Boolean,
},
},
components: {
imageCapture,
videoCapture,
},
data() {
return {
isShow: false,
activeName: "1",
deviceTimeForm: {
zztime: "", //
newzztime: "", //
},
tabsActive: "first",
rowData: {},
};
},
mounted() {},
created() {},
watch: {},
methods: {
//tab
handleClick(tab, event) {
console.log(tab, event);
//
this.tabsActive = "first";
},
//
handleDeviceReset() {
this.$confirm("此操作将复位装置, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
resetTerminalApi({ cmId: this.rowData.cmdId })
.then((res) => {
if (res.code == 200) {
this.$message({
duration: 1500,
showClose: true,
message: "装置已复位",
type: "success",
});
} else {
this.$message({
duration: 1500,
showClose: true,
message: res.msg,
type: "error",
});
}
})
.catch((err) => {});
})
.catch(() => {
// this.$message({
// duration: 1500,
// showClose: true,
// type: "info",
// message: "",
// });
});
},
display(val) {
this.isShow = true;
this.rowData = val;
console.log(this.rowData);
},
hide() {
this.isShow = false;
},
handleclose() {
this.isShow = false;
},
},
};
</script>
<style lang="less">
.parameterSetDialog {
.el-tabs__content {
height: 479px;
.deviceTime {
width: 400px;
margin: 0 auto;
margin-top: 24px;
.el-input {
width: 200px;
}
}
.queryParam {
width: 400px;
margin: 0 auto;
margin-top: 24px;
.el-input {
width: 200px;
}
}
.resetDevice {
h3 {
margin-bottom: 8px;
font-size: 16px;
font-weight: normal;
}
}
.tabsBox {
.el-tabs__item.is-active {
color: #fff;
background-color: #169e8c;
}
}
}
}
</style>
Loading…
Cancel
Save