From bc2e5e7a37876b597668db5d8c4af273deca3aea Mon Sep 17 00:00:00 2001 From: 648540858 <648540858@qq.com> Date: 星期四, 17 十二月 2020 14:55:22 +0800 Subject: [PATCH] Merge pull request #14 from lawrencehj/wvp-28181-2.0 --- web_src/src/components/platformEdit.vue | 662 +++++++++++++++++++++++++++--------------------------- 1 files changed, 335 insertions(+), 327 deletions(-) diff --git a/web_src/src/components/platformEdit.vue b/web_src/src/components/platformEdit.vue index 7dee4ca..7b5a258 100644 --- a/web_src/src/components/platformEdit.vue +++ b/web_src/src/components/platformEdit.vue @@ -1,410 +1,418 @@ <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" 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> </el-dialog> -</div> + </div> </template> <script> export default { - name: 'platformEdit', - props: {}, - computed: { - + 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: "璇疯緭鍏IP鏈嶅姟鍥芥爣缂栫爜", trigger: "blur" }, + ], + serverGBDomain: [ + { required: true, message: "璇疯緭鍏IP鏈嶅姟鍥芥爣鍩�", trigger: "blur" }, + ], + serverIP: [{ required: true, message: "璇疯緭鍏IP鏈嶅姟IP", trigger: "blur" }], + serverPort: [{ required: true, message: "璇疯緭鍏IP鏈嶅姟绔彛", trigger: "blur" }], + deviceGBId: [{ validator: deviceGBIdRules, trigger: "blur" }], + username: [{ required: false, message: "璇疯緭鍏IP璁よ瘉鐢ㄦ埛鍚�", trigger: "blur" }], + password: [{ required: false, message: "璇疯緭鍏IP璁よ瘉瀵嗙爜", 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 { + } }, - 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(); + 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(); } } - }; - 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:"璇疯緭鍏IP鏈嶅姟鍥芥爣缂栫爜", trigger: 'blur' } - ], - serverGBDomain: [ - { required: true, message:"璇疯緭鍏IP鏈嶅姟鍥芥爣鍩�", trigger: 'blur' } - ], - serverIP: [ - { required: true, message:"璇疯緭鍏IP鏈嶅姟IP", trigger: 'blur' } - ], - serverPort: [ - { required: true, message:"璇疯緭鍏IP鏈嶅姟绔彛", trigger: 'blur' } - ], - deviceGBId: [ - {validator: deviceGBIdRules, trigger: 'blur' } - ], - username: [ - { required: false, message:"璇疯緭鍏IP璁よ瘉鐢ㄦ埛鍚�", trigger: 'blur' } - ], - password: [ - { required: false, message:"璇疯緭鍏IP璁よ瘉瀵嗙爜", 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' } - ] - } - }; + }) + .catch(function (error) { + console.log(error); + }); }, - 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(); - }, - 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; - - } - - } + 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; + }, + }, }; </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; + 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> -- Gitblit v1.8.0