From 1fbade862552c9387809f7e50dd75d6b019086f1 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期二, 13 十月 2020 15:04:45 +0800 Subject: [PATCH] 数据栈底图修复,场景配置算法关系改为读取字典 --- src/pages/cameraAccess/components/scene/Editor.vue | 89 ++++++++++------- src/pages/settings/components/ClusterManagement.vue | 91 +++++++++-------- src/pages/index/App.vue | 10 + src/pages/settings/components/BasicSetting.vue | 4 src/components/LeftNav.vue | 6 + src/pages/cameraAccess/components/DataStackInfo.vue | 9 + src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue | 6 + src/pages/cameraAccess/components/SceneRule.vue | 1 src/pages/cameraAccess/components/SeparateRules.vue | 70 ++++++++----- 9 files changed, 169 insertions(+), 117 deletions(-) diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue index 8a1411e..86e0a7c 100644 --- a/src/components/LeftNav.vue +++ b/src/components/LeftNav.vue @@ -151,6 +151,9 @@ </el-submenu> </el-menu> </el-tab-pane> + <el-tab-pane label="闆嗙兢" name="cluster" :style="`height:${height - 56}px;`" v-if="showCluster"> + + </el-tab-pane> <el-tab-pane label="鏁版嵁鏍�" name="dataStack" @@ -289,6 +292,9 @@ showCam() { return this.appName === "Camera" || this.appName === "Search"; }, + showCluster() { + return this.appName === "Cluster" + }, showDataStack() { return this.appName === "DataStack" || this.appName === "Search"; }, diff --git a/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue b/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue index ce5f8f3..943753b 100644 --- a/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue +++ b/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue @@ -205,3 +205,9 @@ } }; </script> +<style> + /* .net-svg{ + background-color: aquamarine; + border-radius: 50%; + } */ +</style> diff --git a/src/pages/cameraAccess/components/DataStackInfo.vue b/src/pages/cameraAccess/components/DataStackInfo.vue index a2ce20f..8a29a18 100644 --- a/src/pages/cameraAccess/components/DataStackInfo.vue +++ b/src/pages/cameraAccess/components/DataStackInfo.vue @@ -140,9 +140,9 @@ <el-image v-if="row.type==2" style="width: 30x; height: 30px" - :src="`/files/${row.identifier}.jpg`" + :src="`/files/${row.path.substr(row.path.lastIndexOf('/')+1)}`" fit="fill" - :preview-src-list="[`/files/${row.identifier}.jpg`]" + :preview-src-list="[`/files/${row.path.substr(row.path.lastIndexOf('/')+1)}`]" > <div slot="error" :class="snapshotClass"></div> </el-image> @@ -421,7 +421,7 @@ this.videoUrl = "/files/" + row.identifier + ".mp4" }else if(row.type===2){ - this.imgUrl = "/files/" + row.identifier + ".jpg" + this.imgUrl = "/files/" + row.path.substr(row.path.lastIndexOf('/')+1) } }, // 娓呯┖杈撳叆妗� @@ -445,7 +445,7 @@ this.fileList = []; }, selectDir(node) { - debugger + if (node.id === "") { return } @@ -492,6 +492,7 @@ findAllFileByStackId({ name: this.searchInput, stackId: this.form.id, page: this.page, size: this.size, type: 0 }).then(rsp => { if (rsp && rsp.success && rsp.data.total > 0) { this.fileList = rsp.data.dataList; + this.total = rsp.data.total; // 瀹氭椂鍒锋柊浼氭竻绌洪�変腑鐘舵�侊紝鍦ㄨ繖閲屾仮澶� diff --git a/src/pages/cameraAccess/components/SceneRule.vue b/src/pages/cameraAccess/components/SceneRule.vue index 82e709d..5cdea2c 100644 --- a/src/pages/cameraAccess/components/SceneRule.vue +++ b/src/pages/cameraAccess/components/SceneRule.vue @@ -235,6 +235,7 @@ time_rule_id: "", }; this.$refs.sceneEditor.cleanRule(); + this.$refs.sceneEditor.getSdkConnection(); }, handleCreate() { diff --git a/src/pages/cameraAccess/components/SeparateRules.vue b/src/pages/cameraAccess/components/SeparateRules.vue index b176fa1..6bce67a 100644 --- a/src/pages/cameraAccess/components/SeparateRules.vue +++ b/src/pages/cameraAccess/components/SeparateRules.vue @@ -144,7 +144,7 @@ ></polygon-canvas> </template> <template v-else> - <div style="width:100%" v-loading='getStackFileLoading'> + <div style="width:100%" v-loading="getStackFileLoading"> <swiper ref="swiper" :auto-update="true" @@ -182,12 +182,20 @@ </div> </swiper-slide> </swiper> - <div class="swiper-local-prev" v-show="swipercanvasData.length>1" @click="prevClick"> + <div + class="swiper-local-prev" + v-show="swipercanvasData.length>1" + @click="prevClick" + > <div class="icon-btn" slot="button-prev"> <i class="iconfont iconzuo"></i> </div> </div> - <div class="swiper-local-next" v-show="swipercanvasData.length>1" @click="nextClick"> + <div + class="swiper-local-next" + v-show="swipercanvasData.length>1" + @click="nextClick" + > <div class="icon-btn" slot="button-next"> <i class="iconfont iconyou1"></i> </div> @@ -319,14 +327,15 @@ }, watch: { - 'Camera.cameraId':{ - handler(n,o){ + 'Camera.cameraId': { + handler (n, o) { if (n) { if (this.TreeDataPool.treeActiveName == "dataStack") { this.stackFilesPage = 1; this.stackFilesSize = 5; this.stackId = n; - if(this.stackId){ + if (this.stackId) { + console.log('getStackFiles') this.swipercanvasData = []; this.getStackFiles() } @@ -336,28 +345,28 @@ } }, methods: { - prevClick(){ + prevClick () { console.log(this.swiperIndex) console.log(this.$refs.swiper.swiper.activeIndex) - if(this.swiperIndex == 0){ + if (this.swiperIndex == 0) { console.log('鏈鍒嗛〉鐨勭涓�鏉�') //璇锋眰涓婁竴椤� - if(this.stackFilesPage > 1){ + if (this.stackFilesPage > 1) { this.stackFilesPage--; this.getStackFiles(); - }else{ + } else { this.$message({ - type:'info', - message:'褰撳墠宸叉槸绗竴椤�' + type: 'info', + message: '褰撳墠宸叉槸绗竴椤�' }); } - + } }, - nextClick(){ + nextClick () { console.log(this.swiperIndex) console.log(this.$refs.swiper.swiper.activeIndex) - if(this.swiperIndex == this.swipercanvasData.length-1){ + if (this.swiperIndex == this.swipercanvasData.length - 1) { console.log('鏈�鍚庝竴寮�,鍔犺浇鏇村') //璇锋眰涓嬩竴椤� this.stackFilesPage++; @@ -366,38 +375,41 @@ }, getStackFiles () { this.getStackFileLoading = true; + let _this = this; findAllFileByStackId({ name: '', stackId: this.stackId, page: this.stackFilesPage, size: this.stackFilesSize, type: 0 }).then(res => { - if (res && res.success ) { - if(res.data.dataList.length > 0){ + if (res && res.success) { + if (res.data.dataList.length > 0) { this.swipercanvasData = []; this.swipercanvasData = res.data.dataList.map(item => { return { name: item.name, stackId: item.stack_id, - baseImg: item.type == 2 ? `/files/${item.identifier}.jpg` : item.snapshot_url, + baseImg: item.type == 2 ? `/files/${item.path.substr(item.path.lastIndexOf('/') + 1)}` : item.snapshot_url, type: item.type, id: item.id, loading: false } }); + console.log(_this.swipercanvasData) + console.log(this.swipercanvasData) this.swiperIndex = 0; this.$refs.swiper.swiper.activeIndex = 0; - - }else{ + + } else { console.log(this.swipercanvasData) this.$message({ - type:'info', - message:'宸叉棤鏇村鏁版嵁!' + type: 'info', + message: '宸叉棤鏇村鏁版嵁!' }); } - }else{ + } else { console.log(this.swipercanvasData) this.$message({ - type:'error', - message:'鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!' + type: 'error', + message: '鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!' }); } - this.getStackFileLoading = false; + this.getStackFileLoading = false; }).catch(e => { console.log(e); this.getStackFileLoading = false; @@ -454,7 +466,7 @@ this.loading = false; this.Camera.cameraId = id; await this.Camera.update(); - debugger + } this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id; @@ -480,7 +492,7 @@ message: "绛栫暐淇濆瓨鎴愬姛锛�" }); //鍒锋柊宸︿晶鏍� - debugger + _this.$root.$children[0].$children[0].querySearchAsync('camera') } @@ -624,7 +636,7 @@ }; </script> <style lang="scss"> -.el-message--info .el-message__content{ +.el-message--info .el-message__content { color: #999; } .swiper-container { diff --git a/src/pages/cameraAccess/components/scene/Editor.vue b/src/pages/cameraAccess/components/scene/Editor.vue index 4f540a6..6363c74 100644 --- a/src/pages/cameraAccess/components/scene/Editor.vue +++ b/src/pages/cameraAccess/components/scene/Editor.vue @@ -32,12 +32,13 @@ placeholder="閫夊叧绯�" @change="selConnection(sdkItem)" > - <el-option value="&&" title="and/涓�" label="and/涓�"></el-option> + <el-option :value="item.value" :title="item.name" :label="item.name" v-for="item in sdkConnects" :key="item.id"></el-option> + <!-- <el-option value="&&" title="and/涓�" label="and/涓�"></el-option> <el-option value="||" title="or/鎴�" label="or/鎴�"></el-option> - <el-option value="=>" title="鈥�>/瑙﹀彂" label="鈥�>/瑙﹀彂"></el-option> + <el-option value="=>" title="鈥�>/瑙﹀彂" label="鈥�>/瑙﹀彂"></el-option> --> </el-select> <el-checkbox - v-show="sdkItem.rule_with_pre == '=>'" + v-show="sdkItem.rule_with_pre == '=>' || sdkItem.rule_with_pre == '!=>'" v-model="sdkItem.is_save_anyhow" style="margin-left:30px" >淇濆瓨杩囩▼鏁版嵁</el-checkbox> @@ -386,13 +387,13 @@ sdkGroup: { handler(newV, oldV) { if (newV) { - debugger + newV.forEach(sdk => { let rangeOne = sdk.defaultArg.find( arg => arg.operators[0].operator == 'range' ) if (rangeOne) { - debugger + if (rangeOne.min.trim() && rangeOne.max.trim()) { rangeOne.sdk_arg_value = rangeOne.min + '|' + rangeOne.max } else { @@ -421,13 +422,14 @@ } // ruleList: { // handler(newVal, oldVal) { - // debugger + // // this.editHandle(newVal) // } // } }, mounted() { + this.TaskMange.findAllSdk({ installed: true }) //this.TaskMange.list1 = sdkJson.data; @@ -523,8 +525,18 @@ } }, methods: { + getSdkConnection(){ + console.log(this.VideoManageData.Dictionary) + this.sdkConnects = this.VideoManageData.Dictionary['RULECOMPUTEBETWEEN'].map(r => { + + return { + name: r.name, + value: r.value + } + }); + }, selConnection(sdkItem) { - debugger + }, addSdkItem() { @@ -533,9 +545,9 @@ itemTemp.polygonObj = JSON.parse(JSON.stringify(this.allPolygonData[0])) this.selectPolygonOption(itemTemp) this.sdkGroup.push(itemTemp) + }, delConfigItem(index) { - debugger // if(index != 0){ // this.sdkGroup.splice(index,1); // }else{ @@ -626,7 +638,7 @@ } }, selOptionalArg(sdkItem, optArgItem) { - debugger + let newSort = 0 sdkItem.optNames.forEach(name => { if (name.name == optArgItem.name) { @@ -657,7 +669,7 @@ console.log(argObj.valueOptions) }, setOptArgValueOptions(optArg) { - debugger + let alias = optArg.alias; console.log(this.VideoManageData.Dictionary[alias]) optArg.valueOptions = this.VideoManageData.Dictionary[alias].map(r => { @@ -668,7 +680,7 @@ }); }, validateArgVal(sdkArgItem, e) { - debugger + if (typeof (sdkArgItem.sdk_arg_value) == 'string' && sdkArgItem.sdk_arg_value == '') { this.$notify({ type: 'warning', @@ -688,7 +700,7 @@ let res = sdkArgItem.range.match(reg) let min = Number(res[1]), max = Number(res[2]) - debugger + //鍒ゆ柇闈炲尯闂寸被 if (sdkArgItem.sdk_arg_value && sdkArgItem.operator != 'range') { @@ -822,7 +834,7 @@ this.valideArgValue(rule) }, selectPolygonOption(rule) { - debugger + rule.polygon_id = rule.polygonObj.polygonId ? rule.polygonObj.polygonId : rule.polygon_id @@ -833,7 +845,7 @@ }, //閫夋嫨绠楁硶 resetArgs涓簍rue鏄坊鍔犱负false鏄垵濮嬪寲缂栬緫 selectSDKOption(sdkItem, resetArgs) { - debugger + //sdkItem.sdk_id = sdkItem.sdkObj.id; if (resetArgs) { sdkItem.argDef = JSON.parse(sdkItem.sdkObj.argDef) @@ -849,12 +861,12 @@ if (arg.operators[0].operator == 'range') { //鍖洪棿鍊肩殑澶勭悊 - debugger + //this.$set(arg, 'sdk_arg_value', arg.min+','+arg.max) //this.$set(arg, 'sdk_arg_value', arg.range.substring(1,arg.range.length-1)); } } - debugger + if(arg.type == 'option'){ this.setOptArgValueOptions(arg) } @@ -873,14 +885,14 @@ sort: arg.sort, isSelected: false })) - debugger + sdkItem.initAddOptional = sdkItem.optionalArg.length > 0 ? true : false sdkItem.optArg = [] } //娣诲姞鍦烘櫙鏃�,濡傛灉鍦烘櫙鍚嶇О涓虹┖,灏卞皢閫夋嫨鐨勭涓�涓畻娉曞悕鍚屾鍒板満鏅悕绉� if (this.sdkGroup[0] && resetArgs) { - debugger + this.$emit('sdkNameChange', this.sdkGroup[0].sdkObj.sdk_name) } @@ -912,7 +924,7 @@ }, //閫夋嫨绠楁硶閰嶇疆 selOperator(rule) { - debugger + }, selectArgsOption(rule, resetArgValue) { // rule.operator_type = ""; @@ -1102,7 +1114,7 @@ this.groupRules.splice(index + 1, 0, newRule) }, editHandle(ruleTxt) { - debugger + // if (ruleTxt.length < 1) { // return // } @@ -1127,12 +1139,12 @@ // } }, editRule(ruleGroup) { - debugger + this.sdkGroup = [] this.group_id = '' ruleGroup.forEach(rule => { - debugger + let tempObj = {} if (rule.group_id && rule.group_id != '') { @@ -1170,7 +1182,7 @@ sdkObj = this.TaskMange.list1.find(sdk => sdk.id == rule.sdk_id) argDef = JSON.parse(sdkObj.argDef) - debugger + defaultArg = argDef.filter(arg => !arg.config.isOptional) optionalArg = argDef.filter(arg => arg.config.isOptional) @@ -1202,7 +1214,7 @@ } //鍦╬ush涔嬪墠,闇�瑕佸垽鏂槸鍚﹂厤缃簡杩欎釜鍙�夐」 鍦╯dk_set閰嶇疆鏁扮粍閲�, - debugger + optArg.push(optItem) } else { @@ -1210,14 +1222,14 @@ if (d.sort == arg.sort) { if (arg.sdk_arg_value.indexOf('|') > 0) { - debugger + //鍖洪棿鍊� d.min = arg.sdk_arg_value.split(',')[0]; d.max = arg.sdk_arg_value.split(',')[1]; d.operator = 'range' //} else if(arg.sdk_arg_value.indexOf(',') > 0){ } else if(arg.operator_type == 'option'){ - debugger + //澶氶�夌被鍨嬬殑鍊� d.sdk_arg_value = arg.sdk_arg_value.split(','); this.setOptArgValueOptions(d) @@ -1263,7 +1275,7 @@ tempObj.isAddable = false; } //this.selectSDKOption(tempObj, false) - debugger + this.sdkGroup.push(tempObj) //璁剧疆绠楁硶 }) @@ -1294,7 +1306,7 @@ .catch(() => { }) }, submitRule() { - debugger + let groupRule = { rules: [] } let group_text = '' @@ -1315,7 +1327,7 @@ } else { //鏍¢獙蹇呭~椤� let undefinished = this.sdkGroup.some((sdk, index) => { - debugger + //娌℃湁閰嶇疆绠楁硶 if (Object.keys(sdk.sdkObj).length == 0) { return sdk @@ -1324,7 +1336,7 @@ if (sdk.rule_with_pre === '' && index != 0) { return sdk } - debugger + //澶勭悊鏈睍绀虹殑鍙傛暟鐨勫�� sdk.defaultArg.forEach(arg => { if(!arg.config.isShow){ @@ -1354,7 +1366,7 @@ } else { //鍖洪棿绫诲弬鏁板�兼渶灏�,鏈�澶у�兼槸鍚﹂兘璁剧疆 if (arg.operator == 'range') { - debugger + if (!arg.min.trim() && arg.max.trim()) { return arg } @@ -1395,9 +1407,9 @@ } //鏍¢獙鑻ョ畻娉曞叧绯讳负瑙﹀彂,鍒欑畻娉曞悕涓嶈兘閲� let sameSdk = this.sdkGroup.some((sdk, index) => { - debugger + if (sdk.index != 0 && sdk.rule_with_pre == '=>') { - debugger + if (sdk.sdkObj.id == this.sdkGroup[index - 1].sdkObj.id) { return sdk } @@ -1462,7 +1474,7 @@ } if (arg.operator == 'range') { let valRange = ''; - debugger + valRange = arg.sdk_arg_value.replace(',', '-'); defaultArgDesc += `${arg.name}${arg.operators[0].name}${valRange}${arg.unit || ''}, ` } else { @@ -1472,7 +1484,7 @@ } }); - debugger; + ; defaultArgDesc = defaultArgDesc.substring(0, defaultArgDesc.length - 2); //defaultArgDesc = defaultArgDesc.substring(0,defaultArgDesc.length-3)+defaultArgDesc.substring(defaultArgDesc.length-1,defaultArgDesc.length); @@ -1548,11 +1560,14 @@ case '=>': rule_with_pre = ' -> ' break + case '!=>': + rule_with_pre = ' !-> ' + break default: rule_with_pre = '' } } - debugger; + ; group_text += `${rule_with_pre ? "<br/>" + rule_with_pre + "<br/>" : ""} <span style="background-color:RGB(183,183,183);">${ sdk.sdkObj.sdk_name }</span> ${ @@ -1568,7 +1583,7 @@ group_text.substring(0, group_text.length - 3) + group_text.substring(group_text.length - 2, group_text.length) } - debugger + }) console.log(group_text) } diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue index 22a9f70..a3b5f16 100644 --- a/src/pages/index/App.vue +++ b/src/pages/index/App.vue @@ -1,7 +1,7 @@ <template> <div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`"> <div class="web-site"> - <a href="http://www.aiotlink.com" target="_blank">www.aiotlink.com</a> + <a href="http://www.smartai.com" target="_blank">www.smartai.com</a> </div> <licence /> <div class="right-bg" style> @@ -45,7 +45,7 @@ </el-form-item> </el-form> </div> - <p class="gradient-text gradient-text-one">鈥斺�斺�� {{serverTitle || '鏅� 鑳� 璁� 绠� 鑺� 鐐� 鈥� ReID'}} 鈥斺�斺��</p> + <p class="gradient-text gradient-text-one">鈥斺�斺�� {{serverTitle || 'SmartAI 鈥� ReID'}} 鈥斺�斺��</p> </div> </div> </template> @@ -166,10 +166,11 @@ async getServerName() { let res = await getServerName() if (res && res.success) { + console.log(res.data.serverName) this.serverTitle = res.data.serverName window.document.title = res.data.serverName ? res.data.serverName - : '鏅� 鑳� 璁� 绠� 鑺� 鐐�' + : 'SmartAI' sessionStorage.setItem('title', res.data.serverName) } }, @@ -178,6 +179,9 @@ this.getServerName() this.getScreenHeight() }, + mounted(){ + console.log(this.serverTitle) + }, watch: {}, beforeDestroy() { window.onresize = null diff --git a/src/pages/settings/components/BasicSetting.vue b/src/pages/settings/components/BasicSetting.vue index b3368c8..b6dfad5 100644 --- a/src/pages/settings/components/BasicSetting.vue +++ b/src/pages/settings/components/BasicSetting.vue @@ -257,7 +257,7 @@ <el-tab-pane label="闆嗙兢绠$悊" name="third"> <cluster-management></cluster-management> </el-tab-pane> - <el-tab-pane label="澶栭儴璁块棶" name="fourth"> + <!-- <el-tab-pane label="澶栭儴璁块棶" name="fourth"> <el-menu :default-openeds="openeds" background-color="#fff" @@ -297,7 +297,7 @@ </el-submenu> </el-menu> - </el-tab-pane> + </el-tab-pane> --> <el-tab-pane label="鏉冮檺绠$悊" name="user"> <authority-management v-if="activeName === 'user'"></authority-management> </el-tab-pane> diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue index 76ab639..9a04946 100644 --- a/src/pages/settings/components/ClusterManagement.vue +++ b/src/pages/settings/components/ClusterManagement.vue @@ -7,7 +7,7 @@ <el-col :span="12"> <el-tabs v-model="activeName" id="e-alaycluster" v-if="!isHasColony"> <el-tab-pane label="鍒涘缓闆嗙兢" name="1" :disabled="isHasColony"> - <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px"> + <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="闆嗙兢鍚嶇О" prop="clustername"> <el-input v-model="ruleForm.clustername" placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�" size="small"></el-input> </el-form-item> @@ -19,10 +19,9 @@ <el-button type="text" slot="suffix" @click="generatePassword">鐢熸垚瀵嗙爜</el-button> </el-input> </el-form-item> - - <!-- <el-form-item label="铏氭嫙IP" prop="virtualip"> - <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input> - </el-form-item>--> + <el-form-item label="铏氭嫙/澶栭儴IP" prop="virtualIp"> + <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur"></ip-input> + </el-form-item> <el-form-item style="width:500px"> <el-button type="primary" size="small" @click="submitForm('ruleForm')">淇濆瓨</el-button> </el-form-item> @@ -70,7 +69,7 @@ </el-tabs> <!-- 鏈夐泦缇ょ殑鎯呭喌 --> <div v-if="isHasColony" id="h-alaycluster"> - <el-form :model="ruleForm" ref="ruleForm" label-width="80px"> + <el-form :model="ruleForm" ref="ruleForm" label-width="100px"> <el-form-item label="闆嗙兢鍚嶇О" prop="clustername"> <el-input v-model="ruleForm.clustername" placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�" size="small"></el-input> </el-form-item> @@ -86,9 +85,9 @@ ></el-input> </el-form-item> - <!-- <el-form-item label="铏氭嫙IP" prop="virtualip"> - <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input> - </el-form-item>--> + <el-form-item label="铏氭嫙IP" prop="virtualIp"> + <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur"></ip-input> + </el-form-item> <el-form-item style="width:440px;text-align: right;"> <el-button size="small" type="danger" @click="leave">閫�鍑洪泦缇�</el-button> <el-button @@ -101,32 +100,18 @@ </el-form> </div> </el-col> - <el-col :span="10" style="height: 100%;" v-if="members.length !== 0"> + <el-col :span="12" style="height: 100%;" v-if="members.length !== 0"> <serfDiagram ref="diagram" :members="members" :agent="agentName" v-loading="loading" @selected-node="joinNode" + class="nodes-svg" ></serfDiagram> </el-col> </el-row> - <div class="ui-top-view"> - <div class="ui-top-title">婕傜ЩIP</div> - </div> - <el-row> - <el-col :span="12"> - <el-form :model="vrIpForm" ref="vrIpForm" :rules="vrIpRules" style="padding:20px 40px;"> - <el-form-item label="铏氭嫙IP" prop="virtual_ip"> - <ip-input :ip="vrIpForm.virtual_ip" :on-blur="onIpBlur"></ip-input> - <el-switch v-model="vrIpForm.enable" style="margin-left:30px;"></el-switch> - </el-form-item> - <el-form-item style="width:500px"> - <el-button type="primary" size="small" @click="saveForm('vrIpForm')">淇濆瓨</el-button> - </el-form-item> - </el-form> - </el-col> - </el-row> + <div class="ui-top-view"> <div class="ui-top-title">瀛樺偍闆嗙兢绠$悊</div> </div> @@ -178,6 +163,7 @@ </el-tabs> </el-col> </el-row> + </div> </template> @@ -205,7 +191,7 @@ import serfDiagram from "@/components/serfDiagram"; import ipInput from "@/components/subComponents/IPInput"; - +import {isIPv4} from "@/scripts/validate"; export default { components: { serfDiagram, @@ -229,6 +215,7 @@ } }, 1000); }; + return { activeName: "1", sActiveName: "s-first", @@ -240,7 +227,7 @@ ruleForm: { clustername: "", clusterpwd: "", - //virtualip: "" + virtualIp: "" }, vrIpForm: { enable: true, @@ -262,15 +249,15 @@ { required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "change" } ], clusterpwd: [{ validator: checkPwd, trigger: "change" }], - // virtualip: [ - // { required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", trigger: "change" } - // ] - }, - vrIpRules: { - virtualip: [ - { required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", trigger: "change" } + virtualIp: [ + { required: true, validator: isIPv4, trigger: "change" } ] }, + // vrIpRules: { + // virtualIp: [ + // { required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", trigger: "change" } + // ] + // }, joinRules: { clusterpwd: [ { required: true, message: "璇疯緭鍏ラ泦缇ゅ瘑鐮�", trigger: "change" }, @@ -303,12 +290,13 @@ submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { + debugger //alert("submit!"); let json = { clusterId: this.clusterid, clusterName: this.ruleForm.clustername, password: this.ruleForm.clusterpwd, - //virtualip: this.ruleForm.virtualip + virtualIp: this.ruleForm.virtualIp }; this.createCluster(json).then(() => { this.findCluster(); @@ -319,6 +307,7 @@ } }); }, + saveForm(formName) { this.$refs[formName].validate(valid => { if (valid) { @@ -338,7 +327,8 @@ } }); }, - join(formName) { + + join (formName) { this.$refs[formName].validate(valid => { if (valid) { if (Object.keys(this.currentCluster).length === 0) { @@ -482,9 +472,11 @@ this.clusterid = res.data.clusterId; this.ruleForm.clustername = res.data.clusterName; this.ruleForm.clusterpwd = res.data.clusterpwd - //this.ruleForm.virtualip = res.data.virtualip + this.ruleForm.virtualIp = res.data.virtualIp let list = res.data.nodes.map(i => { + debugger let obj = {}; + obj.device_type = i.device_type; obj.cluster_id = i.cluster_id; obj.clusterName = res.data.clusterName; obj.create_time = i.create_time; @@ -612,9 +604,7 @@ this.ruleForm.clusterpwd = uuid.join(""); }, - onIpBlur(ip) { - this.vrIpForm.virtual_ip = ip; - }, + async getEsClusterNodes() { let rsp = await getDevInfo(); let hostIpAddr = ""; @@ -699,8 +689,22 @@ message: rsp.msg }); }) + }, + onIpBlur (ip) { + //this.vrIpForm.virtual_ip = ip; + this.ruleForm.virtualIp = ip; + console.log(this.ruleForm.virtualIp) } - } + + + + }, + mounted () { + this.findCluster(); + + }, + created () { } + }; </script> <style lang="scss"> @@ -772,4 +776,7 @@ height: 30px; line-height: 30px; } +.nodes-svg{ + background-color: aquamarine; +} </style> -- Gitblit v1.8.0