|
|
<template>
|
|
|
<div class="waterMarkBox">
|
|
|
<div class="setWater">
|
|
|
<h4>批量水印下发命令生成</h4>
|
|
|
<div class="waterForm">
|
|
|
<div class="channelBox">
|
|
|
<h5>选择通道</h5>
|
|
|
<el-checkbox-group
|
|
|
v-model="checkList"
|
|
|
class="groupCheck"
|
|
|
@change="handleCheck"
|
|
|
>
|
|
|
<el-checkbox
|
|
|
v-for="item in channelList"
|
|
|
:label="item.id"
|
|
|
:key="item.id"
|
|
|
>{{ item.name }}</el-checkbox
|
|
|
>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
<div class="cmdidBox">
|
|
|
<h5>装置编号</h5>
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
:rows="18"
|
|
|
placeholder="请输入装置编号"
|
|
|
v-model="cmdidtextarea"
|
|
|
>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div class="leftWaterBox">
|
|
|
<h5>左侧水印</h5>
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
:rows="18"
|
|
|
placeholder="请输入左侧水印"
|
|
|
v-model="leftWatertextarea"
|
|
|
>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div class="rghtWaterBox">
|
|
|
<h5>右侧水印</h5>
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
:rows="18"
|
|
|
placeholder="请输入右侧水印"
|
|
|
v-model="rightWatertextarea"
|
|
|
>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-button type="primary" @click="handleSure">确 定</el-button>
|
|
|
<el-button type="primary" @click="copyShare">复 制</el-button>
|
|
|
<el-button class="mlspan" type="text"
|
|
|
><i>{{ issueCommands.length }}</i
|
|
|
>条命令</el-button
|
|
|
>
|
|
|
<div class="commandsBox" id="copy-content">
|
|
|
<div class="aaa" v-for="item in issueCommands" v-html="item"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
name: "waterMark",
|
|
|
data() {
|
|
|
return {
|
|
|
channelList: [
|
|
|
{
|
|
|
id: 1,
|
|
|
name: "通道1",
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
name: "通道2",
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
name: "通道3",
|
|
|
},
|
|
|
{
|
|
|
id: 4,
|
|
|
name: "通道4",
|
|
|
},
|
|
|
],
|
|
|
checkList: [], //选中的通道
|
|
|
cmdidtextarea: "", //输入的值
|
|
|
cmdidArr: [],
|
|
|
leftWatertextarea: "", //输入的值
|
|
|
leftWaterArr: [],
|
|
|
rightWatertextarea: "", //输入的值
|
|
|
rightWaterArr: [],
|
|
|
issueCommands: [], //打印出来下发命令
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
//this.getWater();
|
|
|
},
|
|
|
methods: {
|
|
|
handleCheck(val) {
|
|
|
console.log(this.checkList);
|
|
|
},
|
|
|
handleSure() {
|
|
|
console.log(this.checkList);
|
|
|
if (this.checkList.length == 0) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: "请选择通道号",
|
|
|
type: "warning",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (this.cmdidtextarea !== "") {
|
|
|
this.cmdidArr = [...this.cmdidtextarea.trim().split("\n")]; //装置编号
|
|
|
} else {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: "请输入装置编号",
|
|
|
type: "warning",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (this.leftWatertextarea !== "") {
|
|
|
this.leftWaterArr = [...this.leftWatertextarea.trim().split("\n")]; //左侧水印
|
|
|
} else {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: "请输入左侧水印",
|
|
|
type: "warning",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (this.rightWatertextarea !== "") {
|
|
|
this.rightWaterArr = [...this.rightWatertextarea.trim().split("\n")]; //右侧水印
|
|
|
} else {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: "请输入右侧水印",
|
|
|
type: "warning",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
console.log(this.cmdidArr);
|
|
|
console.log(this.leftWaterArr);
|
|
|
console.log(this.rightWaterArr);
|
|
|
this.issueCommands = [];
|
|
|
this.getWater();
|
|
|
},
|
|
|
getWater() {
|
|
|
for (let j = 0; j < this.checkList.length; j++) {
|
|
|
for (let i = 0; i < this.cmdidArr.length; i++) {
|
|
|
var command =
|
|
|
"/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=osd --cmdid=" +
|
|
|
this.cmdidArr[i] +
|
|
|
" --flag=1 --channel=" +
|
|
|
this.checkList[j] +
|
|
|
' --leftBottom="' +
|
|
|
this.leftWaterArr[i] +
|
|
|
'" --rightBottom="' +
|
|
|
this.rightWaterArr[i] +
|
|
|
'" --clientid=5 --reqid=TS;' +
|
|
|
"<br/>" +
|
|
|
"sleep 1;" +
|
|
|
"<br/>" +
|
|
|
"/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=capture --cmdid=" +
|
|
|
this.cmdidArr[i] +
|
|
|
" --channel=" +
|
|
|
this.checkList[j] +
|
|
|
" --preset=255 --type=0;" +
|
|
|
"<br/>" +
|
|
|
"sleep 1;";
|
|
|
this.issueCommands.push(command); //把命令push
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
copyShare() {
|
|
|
let div = document.getElementById("copy-content");
|
|
|
let range = "";
|
|
|
if (document.body.createTextRange) {
|
|
|
//兼容ie
|
|
|
range = document.body.createTextRange();
|
|
|
range.moveToElementText(div);
|
|
|
range.select();
|
|
|
} else if (window.getSelection) {
|
|
|
// 兼容非IE，比如Firefox/chrome
|
|
|
let selection = window.getSelection();
|
|
|
range = document.createRange();
|
|
|
range.selectNodeContents(div);
|
|
|
selection.removeAllRanges();
|
|
|
selection.addRange(range);
|
|
|
}
|
|
|
document.execCommand("Copy"); // 执行浏览器复制命令
|
|
|
console.log("已复制好，可贴粘");
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.waterMarkBox {
|
|
|
width: calc(100% - 24px);
|
|
|
height: calc(100% - 24px);
|
|
|
padding: 12px 12px;
|
|
|
background: #fff;
|
|
|
.setWater {
|
|
|
border: 1px solid #dddddd;
|
|
|
height: calc(100% - 24px);
|
|
|
padding: 12px;
|
|
|
border-radius: 4px;
|
|
|
.waterForm {
|
|
|
width: 100%;
|
|
|
height: 50%;
|
|
|
margin-top: 16px;
|
|
|
// background: #fcc;
|
|
|
display: flex;
|
|
|
.channelBox {
|
|
|
width: 150px;
|
|
|
border: 1px solid #dddddd;
|
|
|
padding: 12px;
|
|
|
border-radius: 4px;
|
|
|
margin-right: 8px;
|
|
|
.groupCheck {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
margin-top: 12px;
|
|
|
.el-checkbox {
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.cmdidBox {
|
|
|
width: 250px;
|
|
|
border: 1px solid #dddddd;
|
|
|
padding: 12px;
|
|
|
border-radius: 4px;
|
|
|
margin-right: 8px;
|
|
|
.el-textarea {
|
|
|
margin-top: 12px;
|
|
|
}
|
|
|
}
|
|
|
.leftWaterBox {
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
.leftWaterBox,
|
|
|
.rghtWaterBox {
|
|
|
flex: 1;
|
|
|
border: 1px solid #dddddd;
|
|
|
padding: 12px;
|
|
|
border-radius: 4px;
|
|
|
.el-textarea {
|
|
|
margin-top: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.el-button {
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
.commandsBox {
|
|
|
width: auto;
|
|
|
height: calc(50% - 106px);
|
|
|
margin-top: 8px;
|
|
|
border: 1px solid #fcc;
|
|
|
overflow: auto;
|
|
|
padding: 8px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
.mlspan {
|
|
|
// margin-left: 24px;
|
|
|
// height: 32px;
|
|
|
// line-height: 32px;
|
|
|
// margin-top: 4px;
|
|
|
// display: inline-block;
|
|
|
font-size: 14px;
|
|
|
color: #000;
|
|
|
cursor: default;
|
|
|
i {
|
|
|
color: #169e8c;
|
|
|
font-weight: bold;
|
|
|
font-style: normal;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|