Merge pull request #38 from lawrencehj/wvp-28181-2.0

648540858

2021-01-15 c8b6ed5823fbe8e7eeef2e733859b4406b2ba4c5

 web_src/src/components/platformEdit.vue

@@ -1,382 +1,424 @@
<template>
<div id="addlatform" v-loading="isLoging">
    <el-dialog title="添加平台" width="70%" top="2rem" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
        <div id="shared" style="text-align: right; margin-top: 1rem;">

            <el-row :gutter="24">
                <el-col :span="11">
                    <el-form ref="platform1" :rules="rules" :model="platform" label-width="160px" >
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="platform.name"></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务国标编码" prop="serverGBId">
                            <el-input v-model="platform.serverGBId" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务国标域" prop="serverGBDomain">
                            <el-input v-model="platform.serverGBDomain" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务IP" prop="serverIP">
                            <el-input v-model="platform.serverIP" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务端口" prop="serverPort">
                            <el-input v-model="platform.serverPort" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="设备国标编号" prop="deviceGBId">
                            <el-input v-model="platform.deviceGBId" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="本地IP" prop="deviceIp">
                            <el-input v-model="platform.deviceIp" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="本地端口" prop="devicePort">
                            <el-input v-model="platform.devicePort" :disabled="true"></el-input>
                        </el-form-item>
                        
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form ref="platform2" :rules="rules" :model="platform" label-width="160px">
                        <el-form-item label="SIP认证用户名" prop="username">
                            <el-input v-model="platform.username"></el-input>
                        </el-form-item>
                        <el-form-item label="SIP认证密码" prop="password">
                            <el-input v-model="platform.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="注册周期(秒)" prop="expires">
                            <el-input v-model="platform.expires"></el-input>
                        </el-form-item>
                        <el-form-item label="心跳周期(秒)" prop="keepTimeout">
                            <el-input v-model="platform.keepTimeout"></el-input>
                        </el-form-item>
                        <el-form-item label="信令传输" prop="transport">
                            <el-select  v-model="platform.transport" style="width:100%" placeholder="请选择信令传输方式">
                                <el-option label="UDP" value="UDP"></el-option>
                                <el-option label="TCP" value="TCP"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item  label="字符集"  prop="characterSet">
                            <el-select v-model="platform.characterSet" style="width:100%" placeholder="请选择字符集">
                                <el-option label="GB2312" value="GB2312"></el-option>
                                <el-option label="UTF-8" value="UTF-8"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="其他选项" >
                            <el-checkbox label="启用" v-model="platform.enable" ></el-checkbox>
                            <el-checkbox label="允许云台控制" v-model="platform.PTZEnable"></el-checkbox>
                            <el-checkbox label="启用RTCP保活" v-model="platform.rtcp"></el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">{{onSubmit_text}}</el-button>
                            <el-button @click="close">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
  <div id="addlatform" v-loading="isLoging">
    <el-dialog
      title="添加平台"
      width="70%"
      top="2rem"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :destroy-on-close="true"
      @close="close()"
    >
      <div id="shared" style="text-align: right; margin-top: 1rem">
        <el-row :gutter="24">
          <el-col :span="11">
            <el-form ref="platform1" :rules="rules" :model="platform" label-width="160px">
              <el-form-item label="名称" prop="name">
                <el-input v-model="platform.name"></el-input>
              </el-form-item>
              <el-form-item label="SIP服务国标编码" prop="serverGBId">
                <el-input v-model="platform.serverGBId" clearable></el-input>
              </el-form-item>
              <el-form-item label="SIP服务国标域" prop="serverGBDomain">
                <el-input v-model="platform.serverGBDomain" clearable></el-input>
              </el-form-item>
              <el-form-item label="SIP服务IP" prop="serverIP">
                <el-input v-model="platform.serverIP" clearable></el-input>
              </el-form-item>
              <el-form-item label="SIP服务端口" prop="serverPort">
                <el-input v-model="platform.serverPort" clearable></el-input>
              </el-form-item>
              <el-form-item label="设备国标编号" prop="deviceGBId">
                <el-input v-model="platform.deviceGBId" clearable></el-input>
              </el-form-item>
              <el-form-item label="本地IP" prop="deviceIp">
                <el-input v-model="platform.deviceIp" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="本地端口" prop="devicePort">
                <el-input v-model="platform.devicePort" :disabled="true"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form ref="platform2" :rules="rules" :model="platform" label-width="160px">
              <el-form-item label="SIP认证用户名" prop="username">
                <el-input v-model="platform.username"></el-input>
              </el-form-item>
              <el-form-item label="SIP认证密码" prop="password">
                <el-input v-model="platform.password" ></el-input>
              </el-form-item>
              <el-form-item label="注册周期(秒)" prop="expires">
                <el-input v-model="platform.expires"></el-input>
              </el-form-item>
              <el-form-item label="心跳周期(秒)" prop="keepTimeout">
                <el-input v-model="platform.keepTimeout"></el-input>
              </el-form-item>
              <el-form-item label="信令传输" prop="transport">
                <el-select
                  v-model="platform.transport"
                  style="width: 100%"
                  placeholder="请选择信令传输方式"
                >
                  <el-option label="UDP" value="UDP"></el-option>
                  <el-option label="TCP" value="TCP"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="字符集" prop="characterSet">
                <el-select
                  v-model="platform.characterSet"
                  style="width: 100%"
                  placeholder="请选择字符集"
                >
                  <el-option label="GB2312" value="GB2312"></el-option>
                  <el-option label="UTF-8" value="UTF-8"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="其他选项">
                <el-checkbox label="启用" v-model="platform.enable" @change="checkExpires"></el-checkbox>
                <el-checkbox label="云台控制" v-model="platform.PTZEnable"></el-checkbox>
                <el-checkbox label="RTCP保活" v-model="platform.rtcp"></el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">{{
                  onSubmit_text
                }}</el-button>
                <el-button @click="close">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
</div>
  </div>
</template>

<script>
export default {
    name: 'platformEdit',
    props: {},
    computed: {
        
    },
    created() {},
    data() {
        return {
            listChangeCallback: null,
            showDialog: false,
            isLoging: false,
            onSubmit_text:"立即创建",
            // platform: {
            //     enable: false,
            //     PTZEnable: true,
            //     rtcp: false,
            //     name: null,
            //     serverGBId: null,
            //     serverGBDomain: null,
            //     serverIP: null,
            //     serverPort: null,
            //     deviceGBId: null,
            //     deviceIp: null,
            //     devicePort: null,
            //     username: null,
            //     password: null,
            //     expires: 300,
            //     keepTimeout: 60,
            //     transport: "UDP",
            //     characterSet: "GB2312",
            // },
            platform: {
                enable: true,
                PTZEnable: true,
                rtcp: false,
                name: "测试001",
                serverGBId: "34020000002000000001",
                serverGBDomain: "3402000000",
                serverIP: "192.168.1.141",
                serverPort: "5060",
                deviceGBId: "34020000001320001101",
                deviceIp: "192.168.1.20",
                devicePort: "5060",
                username: "34020000001320001101",
                password: "12345678",
                expires: 300,
                keepTimeout: 60,
                transport: "UDP",
                characterSet: "GB2312",
            },
            rules: {
                name: [
                    { required: true, message:"请输入平台名称", trigger: 'blur' }
                ],
                serverGBId: [
                    { required: true, message:"请输入SIP服务国标编码",  trigger: 'blur' }
                ],
                serverGBDomain: [
                    { required: true, message:"请输入SIP服务国标域",   trigger: 'blur' }
                ],
                serverIP: [
                    { required: true, message:"请输入SIP服务IP",   trigger: 'blur' }
                ],
                serverPort: [
                    { required: true, message:"请输入SIP服务端口",   trigger: 'blur' }
                ],
                deviceGBId: [
                    { required: true, message:"请输入设备国标编号",   trigger: 'blur' }
                ],
                username: [
                    { required: false, message:"请输入SIP认证用户名",   trigger: 'blur' }
                ],
                password: [
                    { required: false, message:"请输入SIP认证密码",   trigger: 'blur' }
                ],
                expires: [
                    { required: true, message:"请输入注册周期",   trigger: 'blur' }
                ],
                keepTimeout: [
                    { required: true, message:"请输入心跳周期",   trigger: 'blur' }
                ],
                transport: [
                    { required: true, message:"请选择信令传输",   trigger: 'blur' }
                ],
                characterSet: [
                    { required: true, message:"请选择编码字符集",   trigger: 'blur' }
                ]
                }
        };
    },
    methods: {
        openDialog: function (platform, callback) {
            this.showDialog = true;
            this.listChangeCallback = callback;
            if (platform != null) {
                this.platform = platform;
                this.onSubmit_text = "保存"
            }
            
        },
        onSubmit: function () {
            console.log('onSubmit');
            var that = this;
            that.$axios.post(`/api/platforms/save`, that.platform)
                .then(function (res) {
                    console.log(res)
                    console.log(res.data == "success")
                    if (res.data == "success") {
                        that.$message({
                            showClose: true,
                            message: '保存成功',
                            type: 'success'
                        });
                        that.showDialog = false;
                        if (that.listChangeCallback != null) {
                            that.listChangeCallback()
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        close: function () {
            console.log('关闭添加视频平台');
            this.showDialog = false;
            this.$refs.platform1.resetFields();
            this.$refs.platform2.resetFields();
            
  name: "platformEdit",
  props: {},
  computed: {},
  created() {},
  data() {
    var deviceGBIdRules = async (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入设备国标编号"));
      } else {
        var exit = await this.deviceGBIdExit(value);
        console.log(exit);
        console.log(exit == "true");
        console.log(exit === "true");
        if (exit) {
          callback(new Error("设备国标编号已存在"));
        } else {
          callback();
        }

      }
    };
    return {
      listChangeCallback: null,
      showDialog: false,
      isLoging: false,
      onSubmit_text: "立即创建",
      // platform: {
      //     enable: false,
      //     PTZEnable: true,
      //     rtcp: false,
      //     name: null,
      //     serverGBId: null,
      //     serverGBDomain: null,
      //     serverIP: null,
      //     serverPort: null,
      //     deviceGBId: null,
      //     deviceIp: null,
      //     devicePort: null,
      //     username: null,
      //     password: null,
      //     expires: 300,
      //     keepTimeout: 60,
      //     transport: "UDP",
      //     characterSet: "GB2312",
      // },
      platform: {
        enable: true,
        PTZEnable: true,
        rtcp: false,
        name: "测试001",
        serverGBId: "34020000002000000001",
        serverGBDomain: "3402000000",
        serverIP: "192.168.1.141",
        serverPort: "5060",
        deviceGBId: "34020000001320001101",
        deviceIp: "192.168.1.20",
        devicePort: "5060",
        username: "34020000001320001101",
        password: "12345678",
        expires: 300,
        keepTimeout: 60,
        transport: "UDP",
        characterSet: "GB2312",
      },
      rules: {
        name: [{ required: true, message: "请输入平台名称", trigger: "blur" }],
        serverGBId: [
          { required: true, message: "请输入SIP服务国标编码", trigger: "blur" },
        ],
        serverGBDomain: [
          { required: true, message: "请输入SIP服务国标域", trigger: "blur" },
        ],
        serverIP: [{ required: true, message: "请输入SIP服务IP", trigger: "blur" }],
        serverPort: [{ required: true, message: "请输入SIP服务端口", trigger: "blur" }],
        deviceGBId: [{ validator: deviceGBIdRules, trigger: "blur" }],
        username: [{ required: false, message: "请输入SIP认证用户名", trigger: "blur" }],
        password: [{ required: false, message: "请输入SIP认证密码", trigger: "blur" }],
        expires: [{ required: true, message: "请输入注册周期", trigger: "blur" }],
        keepTimeout: [{ required: true, message: "请输入心跳周期", trigger: "blur" }],
        transport: [{ required: true, message: "请选择信令传输", trigger: "blur" }],
        characterSet: [{ required: true, message: "请选择编码字符集", trigger: "blur" }],
      },
    };
  },
  methods: {
    openDialog: function (platform, callback) {
      var that = this;
      this.$axios
        .get(`/api/platforms/serverconfig`)
        .then(function (res) {
          console.log(res);
          that.platform.deviceGBId = res.data.username;
          that.platform.deviceIp = res.data.deviceIp;
          that.platform.devicePort = res.data.devicePort;
          that.platform.username = res.data.username;
          that.platform.password = res.data.password;
        })
        .catch(function (error) {
          console.log(error);
        });
      this.showDialog = true;
      this.listChangeCallback = callback;
      if (platform != null) {
        this.platform = platform;
        this.onSubmit_text = "保存";
      } else {
        this.onSubmit_text = "立即创建";
      }
    },
    onSubmit: function () {
      console.log("onSubmit");
      var that = this;
      that.$axios
        .post(`/api/platforms/save`, that.platform)
        .then(function (res) {
          console.log(res);
          console.log(res.data == "success");
          if (res.data == "success") {
            that.$message({
              showClose: true,
              message: "保存成功",
              type: "success",
            });
            that.showDialog = false;
            if (that.listChangeCallback != null) {
              that.listChangeCallback();
            }
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    close: function () {
      console.log("关闭添加视频平台");
      this.showDialog = false;
      this.$refs.platform1.resetFields();
      this.$refs.platform2.resetFields();
    },
    deviceGBIdExit: async function (deviceGbId) {
      var result = false;
      var that = this;
      await that.$axios
        .post(`/api/platforms/exit/${deviceGbId}`)
        .then(function (res) {
          result = res.data;
        })
        .catch(function (error) {
          console.log(error);
        });
      return result;
    },
    checkExpires: function() {
      if (this.platform.enable && this.platform.expires == "0") {
        this.platform.expires = "300";
      }
    }
  },
};
</script>

<style>
.control-wrapper {
    position: relative;
    width: 6.25rem;
    height: 6.25rem;
    max-width: 6.25rem;
    max-height: 6.25rem;
    border-radius: 100%;
    margin-top: 2.5rem;
    margin-left: 0.5rem;
    float: left;
.control-wrapper-not-used {
  position: relative;
  width: 6.25rem;
  height: 6.25rem;
  max-width: 6.25rem;
  max-height: 6.25rem;
  border-radius: 100%;
  margin-top: 2.5rem;
  margin-left: 0.5rem;
  float: left;
}

.control-panel {
    position: relative;
    top: 0;
    left: 5rem;
    height: 11rem;
    max-height: 11rem;
  position: relative;
  top: 0;
  left: 5rem;
  height: 11rem;
  max-height: 11rem;
}

.control-btn {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 44%;
    height: 44%;
    border-radius: 5px;
    border: 1px solid #78aee4;
    box-sizing: border-box;
    transition: all 0.3s linear;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 44%;
  height: 44%;
  border-radius: 5px;
  border: 1px solid #78aee4;
  box-sizing: border-box;
  transition: all 0.3s linear;
}

.control-btn i {
    font-size: 20px;
    color: #78aee4;
    display: flex;
    justify-content: center;
    align-items: center;
  font-size: 20px;
  color: #78aee4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-round {
    position: absolute;
    top: 21%;
    left: 21%;
    width: 58%;
    height: 58%;
    background: #fff;
    border-radius: 100%;
  position: absolute;
  top: 21%;
  left: 21%;
  width: 58%;
  height: 58%;
  background: #fff;
  border-radius: 100%;
}

.control-round-inner {
    position: absolute;
    left: 13%;
    top: 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 70%;
    font-size: 40px;
    color: #78aee4;
    border: 1px solid #78aee4;
    border-radius: 100%;
    transition: all 0.3s linear;
  position: absolute;
  left: 13%;
  top: 13%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 70%;
  font-size: 40px;
  color: #78aee4;
  border: 1px solid #78aee4;
  border-radius: 100%;
  transition: all 0.3s linear;
}

.control-inner-btn {
    position: absolute;
    width: 60%;
    height: 60%;
    background: #fafafa;
  position: absolute;
  width: 60%;
  height: 60%;
  background: #fafafa;
}

.control-top {
    top: -8%;
    left: 27%;
    transform: rotate(-45deg);
    border-radius: 5px 100% 5px 0;
  top: -8%;
  left: 27%;
  transform: rotate(-45deg);
  border-radius: 5px 100% 5px 0;
}

.control-top i {
    transform: rotate(45deg);
    border-radius: 5px 100% 5px 0;
  transform: rotate(45deg);
  border-radius: 5px 100% 5px 0;
}

.control-top .control-inner {
    left: -1px;
    bottom: 0;
    border-top: 1px solid #78aee4;
    border-right: 1px solid #78aee4;
    border-radius: 0 100% 0 0;
  left: -1px;
  bottom: 0;
  border-top: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 100% 0 0;
}

.control-top .fa {
    transform: rotate(45deg) translateY(-7px);
  transform: rotate(45deg) translateY(-7px);
}

.control-left {
    top: 27%;
    left: -8%;
    transform: rotate(45deg);
    border-radius: 5px 0 5px 100%;
  top: 27%;
  left: -8%;
  transform: rotate(45deg);
  border-radius: 5px 0 5px 100%;
}

.control-left i {
    transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.control-left .control-inner {
    right: -1px;
    top: -1px;
    border-bottom: 1px solid #78aee4;
    border-left: 1px solid #78aee4;
    border-radius: 0 0 0 100%;
  right: -1px;
  top: -1px;
  border-bottom: 1px solid #78aee4;
  border-left: 1px solid #78aee4;
  border-radius: 0 0 0 100%;
}

.control-left .fa {
    transform: rotate(-45deg) translateX(-7px);
  transform: rotate(-45deg) translateX(-7px);
}

.control-right {
    top: 27%;
    right: -8%;
    transform: rotate(45deg);
    border-radius: 5px 100% 5px 0;
  top: 27%;
  right: -8%;
  transform: rotate(45deg);
  border-radius: 5px 100% 5px 0;
}

.control-right i {
    transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.control-right .control-inner {
    left: -1px;
    bottom: -1px;
    border-top: 1px solid #78aee4;
    border-right: 1px solid #78aee4;
    border-radius: 0 100% 0 0;
  left: -1px;
  bottom: -1px;
  border-top: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 100% 0 0;
}

.control-right .fa {
    transform: rotate(-45deg) translateX(7px);
  transform: rotate(-45deg) translateX(7px);
}

.control-bottom {
    left: 27%;
    bottom: -8%;
    transform: rotate(45deg);
    border-radius: 0 5px 100% 5px;
  left: 27%;
  bottom: -8%;
  transform: rotate(45deg);
  border-radius: 0 5px 100% 5px;
}

.control-bottom i {
    transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.control-bottom .control-inner {
    top: -1px;
    left: -1px;
    border-bottom: 1px solid #78aee4;
    border-right: 1px solid #78aee4;
    border-radius: 0 0 100% 0;
  top: -1px;
  left: -1px;
  border-bottom: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 0 100% 0;
}

.control-bottom .fa {
    transform: rotate(-45deg) translateY(7px);
  transform: rotate(-45deg) translateY(7px);
}
</style>