xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化提示

Browse Source
master
fanluyan 2 years ago
parent f01e01da70
commit 521cd167c5
4 changed files with 374 additions and 324 deletions
Show Stats Download Patch File Download Diff File

8
src/components/message.js
Unescape Escape View File

@ -1,13 +1,18 @@
/**重置message，防止重复点击重复弹出message弹框 */
//resetMessage.js
/**重置message，防止重复点击重复弹出message消息提示 */
import { Message } from "element-ui";
let messageInstance = null;
const resetMessage = (options) => {
if (messageInstance) {
messageInstance.close();
}
Message.closeAll(); //手动关闭所有消息提示实例
messageInstance = Message(options);
// console.log(Message(options));
};
["error", "success", "info", "warning"].forEach((type) => {
resetMessage[type] = (options) => {
if (typeof options === "string") {
@ -19,4 +24,5 @@ const resetMessage = (options) => {
return resetMessage(options);
};
});
export const message = resetMessage;

1
src/main.js
Unescape Escape View File

@ -8,6 +8,7 @@ import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import { message } from "./components/message.js";
Vue.prototype.$message = message;
Vue.use(ElementUI, {
size: "small",

6
src/views/cameraChannel/components/adddeviceDialog.vue
Unescape Escape View File

@ -87,14 +87,14 @@ export default {
formArr.push(this.formdata);
addChannelapi({ list: formArr })
.then((res) => {
this.errorMsg = "";
//this.errorMsg = "";
if (res.code == 200) {
this.$message.success("添加成功");
this.$parent.deviceList();
this.isShow = false;
} else {
this.errorMsg = res.msg;
//this.$message.error(res.msg);
//this.errorMsg = res.msg;
this.$message.error(res.msg);
}
})
.catch((err) => {

683
src/views/management/monitoringEquipment/photographicDevice/components/imageCapture.vue
Unescape Escape View File

@ -1,16 +1,79 @@
<template>
<el-dialog
class="setTimeDialog"
title="图像采集参数"
:visible.sync="isShow"
:close-on-click-modal="false"
width="60%"
>
<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-dialog
class="setimgDialog"
title="图像采集参数"
:visible.sync="isShow"
:close-on-click-modal="false"
width="60%"
>
<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 type="primary" @click="inquirebtn()">查询</el-button>
</div>
<div class="flexno bt30">
<div class="wt80">色彩选择:</div>
<el-input
v-model="capturenr.color"
:disabled="true"
class="wt280"
></el-input>
</div>
<div class="flexno bt30">
<div class="wt80">图像分辨率:</div>
<el-input
v-model="capturenr.resolution"
:disabled="true"
class="wt280"
></el-input>
</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"
@ -18,330 +81,310 @@
:value="item.channelid"
></el-option>
</el-select>
<el-button type="primary" @click="inquirebtn()">查询</el-button>
</div>
<div class="flexno bt30">
<div class="wt80">色彩选择:</div>
<el-input v-model="capturenr.color" :disabled="true" class="wt280"></el-input>
</div>
<div class="flexno bt30">
<div class="wt80">图像分辨率:</div>
<el-input v-model="capturenr.resolution" :disabled="true" class="wt280"></el-input>
</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="contrast">
<el-input-number v-model="setForm.contrast" :min="1" :max="100"></el-input-number>
</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="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="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,
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' }
],
</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="contrast">
<el-input-number
v-model="setForm.contrast"
:min="1"
:max="100"
></el-input-number>
</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="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="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,
activeName: "1", //选项卡
accesslist: [], //通道选择器
colorlist: [
{
name: "黑白",
id: 0,
},
{
name: "彩色",
id: 1,
},
timer:null,
seltermid:'',//装置id
selcmdId:'',//cmdId
requestId:''
};
], //色彩选择器
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,
seltermid: "", //装置id
selcmdId: "", //cmdId
requestId: "",
};
},
mounted() {},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
mounted() {
//获取设备通道
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) => {});
},
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()
.then((res) => {
this.ratiolist = res.data.list;
this.$set(this.setForm,'resolution',res.data.list[0].id)
})
.catch((err) => {});
},
//查询触发
inquirebtn() {
this.loading = true;
getPhotoParamApi({
channelId: this.selaccess,
cmdId: this.selcmdId,
//获取图像分辨率
getRatio() {
this.$set(this.setForm, "color", this.colorlist[0].id);
getResolutionRatio()
.then((res) => {
this.ratiolist = res.data.list;
this.$set(this.setForm, "resolution", res.data.list[0].id);
})
.then((res) => {
if (res.code == 200) {
this.requestId = res.data.requestId;
this.inquirenr()
this.timer = window.setInterval(() => {
this.inquirenr();
}, 10000);
}else{
this.$message.error(res.code.msg);
}
})
.catch((err) => {});
},
//查询接口
inquirenr(){
getPhotoParamnrApi({
channelId: this.selaccess,
termId: this.seltermid,
requestId: this.requestId
.catch((err) => {});
},
//查询触发
inquirebtn() {
this.loading = 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();
}, 10000);
} else {
this.$message.error(res.code.msg);
}
})
.then((res) => {
this.loading = false;
if (res.code == 200) {
if (res.data.isNew == true) {
this.$message.success("查询已更新");
this.capturenr = res.data;
clearInterval(this.timer);
}else{
this.capturenr = res.data;
}
}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) {
if (res.data.isNew == true) {
this.$message.success("查询已更新");
this.capturenr = res.data;
clearInterval(this.timer);
} else {
this.capturenr = res.data;
}
})
.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;
this.$message.error(res.code.msg);
}
});
},
display() {
this.isShow = true;
},
hide() {
this.isShow = false;
},
})
.catch((err) => {});
},
};
</script>
<style lang="less" scoped>
.setTimeDialog {
.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;
//确认
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;
},
},
};
</script>
<style lang="less" scoped>
.setimgDialog {
.el-tabs__content {
height: 400px;
overflow: auto;
.el-tab-pane {
height: calc(100% - 16px);
}
.flexnr {
}
.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;
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;
}
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;
}
.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;
}
.setTimeTd {
h3 {
margin: 8px 0px;
font-size: 16px;
line-height: 24px;
}
.timename {
margin: 8px 0px;
}
.timename {
margin: 8px 0px;
}
}
}
</style>
}
</style>

Write Preview
Loading…
Cancel
Save