xy-frontend/src/views/waterMark/index.vue

<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>