gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style： 格式化代码

Browse Source
This commit is contained in:
zhangyu
2020-08-21 15:33:44 +08:00
parent 92cfd0117d
commit edf7329165
3 changed files with 105 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
nezha-fronted/src/components/common/project/addLine.vue
View File

@@ -1,67 +1,73 @@
<template> <template>
<div class="right-box right-box-edit-endpoint"> <!--<div class="mc" @click.self="clickOutside">-->
<!-- begin--顶部按钮--> <div class="right-box right-box-edit-endpoint">
<div class="right-box-top-btns"> <!-- begin--顶部按钮-->
<!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">--> <div class="right-box-top-btns">
<!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
<!--<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>--> <!--<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>-->
<!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>--> <!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
<!--</button>--> <!--</button>-->
</div> </div>
<!-- end--顶部按钮--> <!-- end--顶部按钮-->
<!-- begin--标题--> <!-- begin--标题-->
<div class="right-box-title">Add Line</div> <div class="right-box-title">Add Line</div>
<!-- end--标题--> <!-- end--标题-->
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form ref="form" :model="form" label-width="120px" :rules="rules"> <el-form ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item label="Line Name" prop="lineName" class="line-name"> <el-form-item label="Line Name" prop="lineName" class="line-name">
<el-input v-model="form.lineName"></el-input> <el-input v-model="form.lineName"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="箭头方向" prop="arrows" @change="iconChange" class="arrows"> <el-row class="form-title">Option</el-row>
<el-select v-model="form.arrows" placeholder=""> <el-form-item label="width" prop="width" class="line-name">
<div slot="prefix"> <el-input v-model="form.width"></el-input>
<img v-if="form.arrows=='from'" src="./leftArrow.png" /> </el-form-item>
<img v-if="form.arrows=='to'" src="./rightArrow.png" /> <el-form-item label="箭头方向" prop="arrows" @change="iconChange" class="arrows">
<img v-if="form.arrows=='from;to'" src="./LRArrow.png" /> <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false">
<img v-if="form.arrows=='0'" src="./noArrow.png" /> <div slot="prefix">
<img v-if="form.arrows=='from'" src="./leftArrow.png" />
<img v-if="form.arrows=='to'" src="./rightArrow.png" />
<img v-if="form.arrows=='from;to'" src="./LRArrow.png" />
<img v-if="form.arrows=='0'" src="./noArrow.png" />
</div>
<el-option label="from" value="from"><img src="./leftArrow.png" /></el-option>
<el-option label="to" value="to"><img src="./rightArrow.png" /></el-option>
<el-option label="from;to" value="from;to"><img src="./LRArrow.png" /></el-option>
<el-option label="" value="0"><img src="./noArrow.png" /></el-option>
</el-select>
</el-form-item>
<el-form-item label="color" class="color">
<div class="color-show" @click="colorPickerClick">
<div class="color-show-left" :style="{background:form.color}"></div>
<span> {{form.color}}</span>
</div> </div>
<el-option label="from" value="from"><img src="./leftArrow.png" /></el-option> <div class="color-content" ref="color-content">
<el-option label="to" value="to"><img src="./rightArrow.png" /></el-option> <el-color-picker
<el-option label="from;to" value="from;to"><img src="./LRArrow.png" /></el-option> v-model="form.color"
<el-option label="" value="0"><img src="./noArrow.png" /></el-option> :predefine="predefineColors"
</el-select> ref="colorPicker"
</el-form-item> >
<el-form-item label="color" class="color"> </el-color-picker>
<div class="color-show" @click="colorPickerClick"> </div>
<div class="color-show-left" :style="{background:form.color}"></div> </el-form-item>
<span> {{form.color}}</span> </el-form>
</div> </el-scrollbar>
<div class="color-content">
<el-color-picker
v-model="form.color"
:predefine="predefineColors"
ref="colorPicker"
>
</el-color-picker>
</div>
</el-form-item>
</el-form>
</el-scrollbar>
<!-- end--表单--> <!-- end--表单-->
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100"> <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100"> <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div>
</div> </div>
</div> <!--</div>-->
</template> </template>
<script> <script>
@@ -91,6 +97,7 @@
color:'#1e90ff', color:'#1e90ff',
lineName:'', lineName:'',
lineId:'', lineId:'',
width:''
}, },
predefineColors: [ predefineColors: [
'#ff4500', '#ff4500',
@@ -117,6 +124,7 @@
this.$refs['form'].validate((valid) => { this.$refs['form'].validate((valid) => {
if (valid) { if (valid) {
let model=Object.assign({id:Math.random()*100},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}}); let model=Object.assign({id:Math.random()*100},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
model.width = parseInt(model.width) || 4;
this.$emit('addLine',model); this.$emit('addLine',model);
} }
}); });
@@ -133,7 +141,6 @@
this.esc(); this.esc();
}, },
colorPickerClick(){ colorPickerClick(){
console.log(this.$refs['colorPicker']);
this.$refs['colorPicker'].showPicker=true; this.$refs['colorPicker'].showPicker=true;
}, },
iconChange (val) { iconChange (val) {
@@ -159,6 +166,13 @@
</script> </script>
<style scoped> <style scoped>
/*.mc{*/
/*position: fixed;*/
/*width: 100vw;*/
/*height: 100vh;*/
/*top: 0;*/
/*left: 0;*/
/*}*/
.color-content{ .color-content{
height: 0; height: 0;
width: 0; width: 0;
@@ -187,8 +201,16 @@
.line-name{ .line-name{
width: calc(100% - 30px); width: calc(100% - 30px);
} }
.arrows{ .form-title{
font-size: 14px;
color: #333333;
padding-left: 28px;
margin-bottom: 15px;
}
/deep/ .el-form-item__label{
font-size: 14px;
color: #666666;
opacity: 0.6;
} }
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix{ .arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;

2
nezha-fronted/src/components/common/project/projectFacade.vue
View File

@@ -40,7 +40,7 @@
</div> </div>
<div class="facade-top-right" v-loading="alertData.loading"> <div class="facade-top-right" v-loading="alertData.loading">
<div class="facade-top-title"> <div class="facade-top-title">
<span class="label">{{alertData.title}}:</span> <span class="label">{{alertData.title}}</span>
{{alertData.sssObj.total}} {{alertData.sssObj.total}}
</div> </div>
<div class="facade-top-right-content"> <div class="facade-top-right-content">

29
nezha-fronted/src/components/common/project/topology.vue
View File

@@ -71,10 +71,27 @@
</div> </div>
<transition name="right-box"> <transition name="right-box">
<add-model v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd" :moduleDataS="moduleDataS"></add-model> <add-model
v-if="addNodeShow"
@addModel="addModel"
:nodeData="nodeData"
@close="addNodeShow=false"
@del="nodeDel"
:isAdd="isNodeAdd"
:moduleDataS="moduleDataS"
></add-model>
</transition> </transition>
<transition name="right-box"> <transition name="right-box">
<add-line v-if="addLineShow" @addLine="addLine" @lineDel="lineDel" :selectNode="NodeArr" :lineData="lineData" :isAdd="isLineAdd" @close="closeAddLine" @del="lineDel"></add-line> <add-line
v-if="addLineShow"
@addLine="addLine"
@lineDel="lineDel"
:selectNode="NodeArr"
:lineData="lineData"
:isAdd="isLineAdd"
@close="closeAddLine"
@del="lineDel"
></add-line>
</transition> </transition>
</div> </div>
</template> </template>
@@ -318,7 +335,9 @@
nodesArray.push(model); nodesArray.push(model);
this.$emit("setTopologyData",nodesArray,this.edgesArray); this.$emit("setTopologyData",nodesArray,this.edgesArray);
this.setNetworkData(nodesArray,this.edgesArray); this.setNetworkData(nodesArray,this.edgesArray);
this.arrayDiff(); this.$nextTick(()=>{
this.arrayDiff();
})
}, },
addModelShow(){ // 显示添加节点弹窗 addModelShow(){ // 显示添加节点弹窗
this.addNodeShow=true; this.addNodeShow=true;
@@ -495,7 +514,7 @@
this_.NodeArr=this_.NodeArr.filter((item,i)=> i != index); this_.NodeArr=this_.NodeArr.filter((item,i)=> i != index);
return return
} }
if(this_.selectNodeTitle){ if(this_.selectNodeTitle&&this_.NodeArrShow){
this_.NodeArr.push(selId); this_.NodeArr.push(selId);
this_.network.selectNodes(this_.NodeArr,true); this_.network.selectNodes(this_.NodeArr,true);
return return
@@ -505,7 +524,7 @@
}); });
this.network.on("selectEdge", function (params) { // 选择边 this.network.on("selectEdge", function (params) { // 选择边
// this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]); this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
// this_.lineData.color=this_.lineData.color.color; // this_.lineData.color=this_.lineData.color.color;
// this_.addLineShow=true; // this_.addLineShow=true;
// this_.isLineAdd=false; // this_.isLineAdd=false;