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"; import { Message } from "element-ui";
let messageInstance = null; let messageInstance = null;
const resetMessage = (options) => { const resetMessage = (options) => {
if (messageInstance) { if (messageInstance) {
messageInstance.close(); messageInstance.close();
} }
Message.closeAll(); //手动关闭所有消息提示实例
messageInstance = Message(options); messageInstance = Message(options);
// console.log(Message(options));
}; };
["error", "success", "info", "warning"].forEach((type) => { ["error", "success", "info", "warning"].forEach((type) => {
resetMessage[type] = (options) => { resetMessage[type] = (options) => {
if (typeof options === "string") { if (typeof options === "string") {
@ -19,4 +24,5 @@ const resetMessage = (options) => {
return resetMessage(options); return resetMessage(options);
}; };
}); });
export const message = resetMessage; 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 "element-ui/lib/theme-chalk/index.css";
import { message } from "./components/message.js"; import { message } from "./components/message.js";
Vue.prototype.$message = message; Vue.prototype.$message = message;
Vue.use(ElementUI, { Vue.use(ElementUI, {
size: "small", size: "small",

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

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

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

@ -1,16 +1,79 @@
<template> <template>
<el-dialog <el-dialog
class="setTimeDialog" class="setimgDialog"
title="图像采集参数" title="图像采集参数"
:visible.sync="isShow" :visible.sync="isShow"
:close-on-click-modal="false" :close-on-click-modal="false"
width="60%" width="60%"
> >
<el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading"> <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
<el-tab-pane label="查询实际参数" name="1"> <el-tab-pane label="查询实际参数" name="1">
<div class="flexnr"> <div class="flexnr">
<div class="wt80">通道:</div> <div class="wt80">通道:</div>
<el-select v-model="selaccess" placeholder="请选择" class="mr20"> <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 <el-option
v-for="item in accesslist" v-for="item in accesslist"
:key="item.channelid" :key="item.channelid"
@ -18,330 +81,310 @@
:value="item.channelid" :value="item.channelid"
></el-option> ></el-option>
</el-select> </el-select>
<el-button type="primary" @click="inquirebtn()">查询</el-button> </el-form-item>
</div> <el-form-item label="色彩选择" prop="color">
<div class="flexno bt30"> <el-select
<div class="wt80">色彩选择:</div> v-model="setForm.color"
<el-input v-model="capturenr.color" :disabled="true" class="wt280"></el-input> placeholder="请选择"
</div> class="mr20"
<div class="flexno bt30"> >
<div class="wt80">图像分辨率:</div> <el-option
<el-input v-model="capturenr.resolution" :disabled="true" class="wt280"></el-input> v-for="item in colorlist"
</div> :key="item.id"
<div class="flexno bt30"> :label="item.name"
<div class="wt80">亮度:</div> :value="item.id"
<el-input v-model="capturenr.luminance" :disabled="true" class="wt280"></el-input> ></el-option>
</div> </el-select>
<div class="flexno bt30"> </el-form-item>
<div class="wt80">对比度:</div> <el-form-item label="对比度" prop="contrast">
<el-input v-model="capturenr.contrast" :disabled="true" class="wt280"></el-input> <el-input-number
</div> v-model="setForm.contrast"
<div class="flexno bt30"> :min="1"
<div class="wt80">饱和度:</div> :max="100"
<el-input v-model="capturenr.saturation" :disabled="true" class="wt280"></el-input> ></el-input-number>
</div> </el-form-item>
</el-tab-pane> <el-form-item label="亮度" prop="luminance">
<el-tab-pane label="设置参数" name="2"> <el-input-number
<el-form :model="setForm" :rules="rules" ref="setForm" label-width="120px" > v-model="setForm.luminance"
<el-form-item label="通道" prop="channelId"> :min="1"
<el-select v-model="setForm.channelId" placeholder="请选择" class="mr20"> :max="100"
<el-option ></el-input-number>
v-for="item in accesslist" </el-form-item>
:key="item.channelid" <el-form-item label="图像分辨率" prop="resolution">
:label="item.channelname" <el-select
:value="item.channelid" v-model="setForm.resolution"
></el-option> placeholder="请选择"
</el-select> class="mr20"
</el-form-item> >
<el-form-item label="色彩选择" prop="color"> <el-option
<el-select v-model="setForm.color" placeholder="请选择" class="mr20"> v-for="item in ratiolist"
<el-option :key="item.id"
v-for="item in colorlist" :label="item.name"
:key="item.id" :value="item.id"
:label="item.name" ></el-option>
:value="item.id" </el-select>
></el-option> </el-form-item>
</el-select> <el-form-item label="饱和度" prop="saturation">
</el-form-item> <el-input-number
<el-form-item label="对比度" prop="contrast"> v-model="setForm.saturation"
<el-input-number v-model="setForm.contrast" :min="1" :max="100"></el-input-number> :min="1"
</el-form-item> :max="100"
<el-form-item label="亮度" prop="luminance"> ></el-input-number>
<el-input-number v-model="setForm.luminance" :min="1" :max="100"></el-input-number> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item label="图像分辨率" prop="resolution"> <el-button type="primary" @click="submitbtn('setForm')"
<el-select v-model="setForm.resolution" placeholder="请选择" class="mr20"> >确认</el-button
<el-option >
v-for="item in ratiolist" </el-form-item>
:key="item.id" </el-form>
:label="item.name" </el-tab-pane>
:value="item.id" </el-tabs>
></el-option> </el-dialog>
</el-select> </template>
</el-form-item> <script>
<el-form-item label="饱和度" prop="saturation"> import {
<el-input-number v-model="setForm.saturation" :min="1" :max="100"></el-input-number> getChannelListJoggle,
</el-form-item> getPhotoParamApi,
<el-form-item> setPhotoParamApi,
<el-button type="primary" @click="submitbtn('setForm')">确认</el-button> getPhotoParamnrApi,
</el-form-item> getResolutionRatio,
</el-form> } from "@/utils/api/index";
</el-tab-pane> export default {
</el-tabs> data() {
</el-dialog> return {
</template> loading: false,
<script> isShow: false,
import { activeName: "1", //选项卡
getChannelListJoggle, accesslist: [], //通道选择器
getPhotoParamApi, colorlist: [
setPhotoParamApi, {
getPhotoParamnrApi, name: "黑白",
getResolutionRatio id: 0,
} from "@/utils/api/index"; },
export default { {
data() { name: "彩色",
return { id: 1,
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' }
],
}, },
timer:null, ], //色彩选择器
seltermid:'',//装置id ratiolist: [], //图像分辨率
selcmdId:'',//cmdId selaccess: "", //选中的通道
requestId:'' 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) { getRatio() {
console.log(tab, event); this.$set(this.setForm, "color", this.colorlist[0].id);
}, getResolutionRatio()
//获取设备通道 .then((res) => {
getSingleAccess(val) { this.ratiolist = res.data.list;
this.setForm={} this.$set(this.setForm, "resolution", res.data.list[0].id);
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,
}) })
.then((res) => { .catch((err) => {});
if (res.code == 200) { },
this.requestId = res.data.requestId; //查询触发
this.inquirenr() inquirebtn() {
this.timer = window.setInterval(() => { this.loading = true;
this.inquirenr(); getPhotoParamApi({
}, 10000); channelId: this.selaccess,
}else{ cmdId: this.selcmdId,
this.$message.error(res.code.msg); })
} .then((res) => {
}) if (res.code == 200) {
.catch((err) => {}); this.requestId = res.data.requestId;
}, this.inquirenr();
//查询接口 this.timer = window.setInterval(() => {
inquirenr(){ this.inquirenr();
getPhotoParamnrApi({ }, 10000);
channelId: this.selaccess, } else {
termId: this.seltermid, this.$message.error(res.code.msg);
requestId: this.requestId }
}) })
.then((res) => { .catch((err) => {});
this.loading = false; },
if (res.code == 200) { //查询接口
if (res.data.isNew == true) { inquirenr() {
this.$message.success("查询已更新"); getPhotoParamnrApi({
this.capturenr = res.data; channelId: this.selaccess,
clearInterval(this.timer); termId: this.seltermid,
}else{ requestId: this.requestId,
this.capturenr = res.data; })
} .then((res) => {
}else{ this.loading = false;
this.$message.error(res.code.msg); 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 { } else {
return false; this.$message.error(res.code.msg);
} }
}); })
}, .catch((err) => {});
display() {
this.isShow = true;
},
hide() {
this.isShow = false;
},
}, },
}; //确认
</script> submitbtn(setForm) {
<style lang="less" scoped> this.$set(this.setForm, "cmdId", this.selcmdId);
.setTimeDialog { this.$set(this.setForm, "termId", this.seltermid);
.el-tabs__content { this.$refs[setForm].validate((valid) => {
height: 400px; if (valid) {
overflow: auto; setPhotoParamApi(this.setForm)
.el-tab-pane { .then((res) => {
height: calc(100% - 16px); if (res.code == 200) {
} this.$message.success("设置成功");
} this.isShow = false;
.flexonly { } else {
display: flex; this.$message.error(res.code.msg);
flex-wrap: wrap; }
} })
.flexno { .catch((err) => {
display: flex; this.$message.error("设置失败");
margin-top: 24px; });
padding: 0px 8px; } else {
align-items: center; 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; display: flex;
align-items: center; flex-direction: row;
margin-top: 16px; li {
padding: 0px 8px; list-style: none;
} margin-right: 24px;
.mt10 { line-height: 24px;
margin-bottom: 10px; span {
} margin-right: 4px;
.mr10 { }
margin-right: 10px; .el-tag--small {
} height: 16px;
.w8 { padding: 0 8px;
width: 8%; line-height: 16px;
}
.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 { .setRoadDialog {
height: 400px; .el-dialog__body {
overflow: auto; height: 400px;
.el-form { overflow: auto;
height: 100%; .el-form {
//background: #fcc; height: 100%;
//background: #fcc;
}
.setTimeTd {
h3 {
margin: 8px 0px;
font-size: 16px;
line-height: 24px;
} }
.setTimeTd { .timename {
h3 { margin: 8px 0px;
margin: 8px 0px;
font-size: 16px;
line-height: 24px;
}
.timename {
margin: 8px 0px;
}
} }
} }
} }
</style> }
</style>

Write Preview
Loading…
Cancel
Save