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

feat：修改样式 50%

Browse Source
This commit is contained in:
zhangyu
2021-02-02 10:30:45 +08:00
parent 6d8fbccb3e
commit 6a10f90567
5 changed files with 1019 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/components/common/language/cn.js
View File

@@ -951,6 +951,7 @@ const cn = {
selTwoNode:'请选择两个模块', selTwoNode:'请选择两个模块',
save:'保存', save:'保存',
cancel:'取消', cancel:'取消',
preview:'预览',
addLine:'添加连线', addLine:'添加连线',
editLine:'编辑连线', editLine:'编辑连线',
lineName:'连线名称', lineName:'连线名称',

1
nezha-fronted/src/components/common/language/en.js
View File

@@ -957,6 +957,7 @@ const en = {
selTwoNode:'Please select two module', selTwoNode:'Please select two module',
save:'save', save:'save',
cancel:'cancel', cancel:'cancel',
preview:'preview',
addLine:'Add line', addLine:'Add line',
editLine:'Edit line', editLine:'Edit line',
lineName:'Line Name', lineName:'Line Name',

767
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -107,22 +107,62 @@
</span> </span>
</el-row> </el-row>
<!--value mapping--> <!--value mapping-->
<el-row class="value-mapping-title"> <!--<el-row class="value-mapping-title">-->
<el-col>level</el-col> <!--<el-col>level</el-col>-->
<el-col>color</el-col> <!--<el-col>color</el-col>-->
<el-col>value</el-col> <!--<el-col>value</el-col>-->
<el-col>animation</el-col> <!--<el-col>animation</el-col>-->
<el-col></el-col> <!--<el-col></el-col>-->
</el-row> <!--</el-row>-->
<el-row class="value-mapping-content"> <!--<el-row class="value-mapping-content">-->
<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index"> <!--<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">-->
<el-col>level</el-col> <!--<el-col>level</el-col>-->
<el-col>color</el-col> <!--<el-col>color</el-col>-->
<el-col>value</el-col> <!--<el-col>value</el-col>-->
<el-col>animation</el-col> <!--<el-col>animation</el-col>-->
<el-col></el-col> <!--<el-col></el-col>-->
</el-row> <!--</el-row>-->
</el-row> <!--</el-row>-->
<el-table v-model="selection.pen.data.valueMapping">
<el-table-column
prop="level"
:label="'level'"
>
<template slot-scope="scope">
{{scope.$index}}
</template>
</el-table-column>
<el-table-column
prop="color"
:label="'color'"
>
</el-table-column>
<el-table-column
prop="value"
:label="'value'"
>
<template slot-scope="scope">
<el-input v-model="scope.row.value" @change="valueMappingValueChange(scope.$index, scope.row)"/>
</template>
</el-table-column>
<el-table-column
prop="animation"
:label="'animation'"
>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
</template>
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click="valueMappingDel(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<div @click="valueMappingAdd()">add</div>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="属性" name="4"> <el-tab-pane label="属性" name="4">
@@ -506,292 +546,320 @@
</el-tabs> </el-tabs>
<div v-if="selection.pens" class=""> <!--选择多个节点-->
<el-collapse v-model="activeNames"> <!--<div v-if="selection.pens" class="">-->
<!--对齐方式--> <!--<el-collapse v-model="activeNames">-->
<el-collapse-item title="对齐" name="1" v-if="selection.pens"> <!--&lt;!&ndash;对齐方式&ndash;&gt;-->
<label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc"> <!--<el-collapse-item title="对齐" name="1" v-if="selection.pens">-->
<i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]" <!--<label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc">-->
@click="onNodesAlign(item.value)"></i> <!--<i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"-->
</label> <!--@click="onNodesAlign(item.value)"></i>-->
</el-collapse-item> <!--</label>-->
<!--排版--> <!--</el-collapse-item>-->
<el-collapse-item title="排版" name="2" v-if="selection.pens"> <!--&lt;!&ndash;排版&ndash;&gt;-->
<div class="mt10"> <!--<el-collapse-item title="排版" name="2" v-if="selection.pens">-->
<div class="flex middle mb10"> <!--<div class="mt10">-->
<label>最大宽度：</label> <!--<div class="flex middle mb10">-->
<div class="full pr10"> <!--<label>最大宽度：</label>-->
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small" <!--<div class="full pr10">-->
v-model.number="layout.maxWidth" title="超出最大宽度换行"></el-input-number> <!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
</div> <!--v-model.number="layout.maxWidth" title="超出最大宽度换行"></el-input-number>-->
</div> <!--</div>-->
<div class="flex middle mb10"> <!--</div>-->
<label>节点宽度：</label> <!--<div class="flex middle mb10">-->
<div class="full pr10"> <!--<label>节点宽度：</label>-->
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small" <!--<div class="full pr10">-->
v-model.number="layout.nodeWidth" title="固定每个节点的宽度"></el-input-number> <!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
</div> <!--v-model.number="layout.nodeWidth" title="固定每个节点的宽度"></el-input-number>-->
</div> <!--</div>-->
<div class="flex middle mb10"> <!--</div>-->
<label>节点高度：</label> <!--<div class="flex middle mb10">-->
<div class="full pr10"> <!--<label>节点高度：</label>-->
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small" <!--<div class="full pr10">-->
v-model.number="layout.nodeHeight" title="固定每个节点的高度"></el-input-number> <!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
</div> <!--v-model.number="layout.nodeHeight" title="固定每个节点的高度"></el-input-number>-->
</div> <!--</div>-->
<div class="flex middle mb10"> <!--</div>-->
<label>水平个数：</label> <!--<div class="flex middle mb10">-->
<div class="full pr10"> <!--<label>水平个数：</label>-->
<el-input-number :precision="2" type="number" controls-position="right" class="input" size="small" <!--<div class="full pr10">-->
v-model.number="layout.maxCount" <!--<el-input-number :precision="2" type="number" controls-position="right" class="input" size="small"-->
title="超出最大个数，将自动计算水平间距（下面水平间距设置将无效）"></el-input-number> <!--v-model.number="layout.maxCount"-->
</div> <!--title="超出最大个数，将自动计算水平间距（下面水平间距设置将无效）"></el-input-number>-->
</div> <!--</div>-->
<div class="flex middle mb10"> <!--</div>-->
<label>水平间距：</label> <!--<div class="flex middle mb10">-->
<div class="full pr10"> <!--<label>水平间距：</label>-->
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small" <!--<div class="full pr10">-->
v-model.number="layout.spaceWidth" title="节点之间水平间距（px）"></el-input-number> <!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
</div> <!--v-model.number="layout.spaceWidth" title="节点之间水平间距（px）"></el-input-number>-->
</div> <!--</div>-->
<div class="flex middle mb10"> <!--</div>-->
<label>垂直间距：</label> <!--<div class="flex middle mb10">-->
<div class="full pr10"> <!--<label>垂直间距：</label>-->
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small" <!--<div class="full pr10">-->
v-model.number="layout.spaceHeight" title="节点之间垂直间距（px）"></el-input-number> <!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
</div> <!--v-model.number="layout.spaceHeight" title="节点之间垂直间距（px）"></el-input-number>-->
</div> <!--</div>-->
<div class="flex middle"> <!--</div>-->
<label></label> <!--<div class="flex middle">-->
<div class="full pr10"> <!--<label></label>-->
<button class="button primary" @click="onLayout">开始排版</button> <!--<div class="full pr10">-->
</div> <!--<button class="button primary" @click="onLayout">开始排版</button>-->
</div> <!--</div>-->
</div> <!--</div>-->
</el-collapse-item> <!--</div>-->
</el-collapse> <!--</el-collapse-item>-->
</div> <!--</el-collapse>-->
<!--</div>-->
<!-- 选中为空 --> <!-- 选中为空 -->
<div v-if="!selection.pen && !selection.pens"> <div v-if="!selection.pen && !selection.pens">
<div class="mt10"> <div class="project-title">
<div class="flex middle mb10"> Project
<label>文件名称：</label> </div>
<div class="full pr10"> <div class="project-content">
<el-input class="input" size="small" v-model="topologyData.data.name" placeholder="topo名称"></el-input> <div class="project-content-title">Title</div>
<div class="project-content-box" style="width: 100%">
<div class="project-content-item">
<label>Name：</label>
<div class="full pr10">
<el-input class="input" size="small" v-model="topologyData.data.name" placeholder="请输入名称" @change="changeTopologyOpt"></el-input>
</div>
</div> </div>
</div> </div>
<div class="flex middle special-select mb10"> <div class="project-content-title">Appearance</div>
<label>默认线型：</label>
<div class="full pr10"> <div class="project-content-box" style="width: 100%">
<el-select v-model="topologyData.data.lineName" placeholder="请选择" size="small" <div class="project-content-item half">
:popper-append-to-body="false" <label>Backgroud：</label>
@change="changeTopologyOpt(topologyData.data.lineName,'lineName')"> <div class="full pr10 h32">
<div slot="prefix"> <el-color-picker @active-change="(val)=>changeTopologyOpt(val,'bkColor')"
<div class="icon-item"> v-model="topologyData.data.bkColor" size="mini"></el-color-picker>
<svg> </div>
<g fill="none" stroke="black" stroke-width="1"> </div>
<path
:d="penLineType.find((item,i)=>item.name==topologyData.data.lineName).d" <div class="project-content-item half">
> <label>Image：</label>
</path> <div class="full pr10 h32">
</g> <!--暂时是input 输入网址-->
</svg> <el-input class="input" size="small" v-model="topologyData.data.bkImage" placeholder="背景图片网址"></el-input>
</div>
</div>
<div class="project-content-item half">
<label>默认线宽：</label>
<div class="full pr10 h32">
<el-input-number :precision="2"
controls-position="right"
size="small"
name="x" class="input"
v-model.number="topologyData.data.lineWidth"
required
@change="changeTopologyOpt(topologyData.data.lineWidth,'lineWidth')">
</el-input-number>
</div>
</div>
<div class="project-content-item half">
<label>背景网格：</label>
<div class="full pr10 h32">
<el-switch
v-model="topologyData.data.grid"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@change="changeTopologyOpt(topologyData.data.grid,'grid')">
</el-switch>
</div>
</div>
<div class="project-content-item half">
<label>网格大小：</label>
<div class="full pr10 h32">
<el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
v-model.number="topologyData.data.gridSize"
:readonly="readonly" required
@change="changeTopologyOpt(topologyData.data.gridSize,'gridSize')"></el-input-number>
</div>
</div>
<div class="project-content-item half">
<label>网格颜色：</label>
<div class="full pr10 h32">
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'gridColor')"
v-model="topologyData.data.gridColor" size="mini"
popper-class="can-clear"></el-color-picker>
</div>
</div>
<div class="project-content-item half">
<label>标尺：</label>
<div class="full pr10 h32">
<el-switch
v-model="topologyData.data.rule"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@change="changeTopologyOpt(topologyData.data.rule,'rule')">
</el-switch>
</div>
</div>
<div class="project-content-item half">
<label>标尺颜色：</label>
<div class="full pr10 h32">
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'ruleColor')"
v-model="topologyData.data.ruleColor" size="mini"
popper-class="can-clear"></el-color-picker>
</div>
</div>
<div class="project-content-item half special-select">
<label>默认开始箭头：</label>
<div class="full pr10 h32">
<el-select v-model="topologyData.data.fromArrow" placeholder="请选择" size="small"
:popper-append-to-body="false"
@change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="topologyData.data.fromArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div> </div>
</div> <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index"> <div class="icon-item">
<div class="icon-item"> <svg>
<svg> <g fill="none" :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':'black'"
<g fill="none" :stroke="(topologyData.data.lineName==item.name)?'#ee9d3f':'black'" stroke-width="1"> stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path> <path :d="item.d"></path>
</g> <polygon
</svg> v-if="item.points"
:points="item.points"
:fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>
<div class="project-content-item half special-select">
<label>默认结束箭头：</label>
<div class="full pr10 h32">
<el-select v-model="topologyData.data.toArrow" placeholder="请选择" size="small" :popper-append-to-body="false"
@change="changeTopologyOpt('toArrow')">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="topologyData.data.toArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div> </div>
</el-option> <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
</el-select> <div class="icon-item">
<svg>
<g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'" stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div> </div>
</div> </div>
<div class="flex middle mb10"> <div class="project-content-title">Appearance</div>
<label>默认线宽：</label>
<div class="full pr10"> <div class="project-content-box" style="width: 100%">
<el-input-number :precision="2"
controls-position="right" <div class="project-content-item half">
size="small" <label>Project Info：</label>
name="x" class="input" <div class="full pr10 h32">
v-model.number="topologyData.data.lineWidth" <el-switch
required v-model="topologyData.data.projectInfo"
@change="changeTopologyOpt(topologyData.data.lineWidth,'lineWidth')"> :active-value="true"
</el-input-number> :inactive-value="false"
active-color="#ee9d3f"
@change="changeTopologyOpt(topologyData.data.projectInfo,'projectInfo')">
</el-switch>
</div>
</div> </div>
<div class="project-content-item half">
<label>Alert Info：</label>
<div class="full pr10 h32">
<el-switch
v-model="topologyData.data.alertInfo"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@change="changeTopologyOpt(topologyData.data.alertInfo,'alertInfo')">
</el-switch>
</div>
</div>
</div> </div>
<div class="flex middle special-select mb10"> <div class="project-content-title">Link</div>
<label>默认开始箭头：</label>
<div class="full pr10">
<el-select v-model="topologyData.data.fromArrow" placeholder="请选择" size="small"
:popper-append-to-body="false"
@change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="topologyData.data.fromArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':'black'"
stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>
<div class="flex middle special-select mb10"> <div class="project-content-box" style="width: 100%">
<label>默认结束箭头：</label>
<div class="full pr10">
<el-select v-model="topologyData.data.toArrow" placeholder="请选择" size="small" :popper-append-to-body="false"
@change="changeTopologyOpt('toArrow')">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="topologyData.data.toArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'" stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>
<div class="flex middle mb10"> <div class="project-content-item">
<label>背景颜色：</label> <label>Url：</label>
<div class="full pr10"> <div class="full pr10">
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'bkColor')" <el-input class="input" size="small" v-model="topologyData.data.url" placeholder="请输入名称" @change="changeTopologyOpt"></el-input>
v-model="topologyData.data.bkColor" size="mini" popper-class="can-clear"></el-color-picker> </div>
</div> </div>
</div>
<div class="flex middle mb10">
<label>背景图片：</label>
<div class="full pr10">
<!--暂时是input 输入网址-->
<el-input class="input" size="small" v-model="topologyData.data.bkImage" placeholder="背景图片网址"></el-input>
</div>
</div>
<div class="flex middle mb10">
<label>背景网格：</label>
<div class="full pr10">
<el-switch
v-model="topologyData.data.grid"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@change="changeTopologyOpt(topologyData.data.grid,'grid')">
</el-switch>
</div>
</div>
<div class="flex middle mb10">
<label>网格颜色：</label>
<div class="full pr10">
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'gridColor')"
v-model="topologyData.data.gridColor" size="mini"
popper-class="can-clear"></el-color-picker>
</div>
</div>
<div class="flex middle mb10">
<label>网格大小：</label>
<div class="full pr10">
<el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
v-model.number="topologyData.data.gridSize"
:readonly="readonly" required
@change="changeTopologyOpt(topologyData.data.gridSize,'gridSize')"></el-input-number>
</div>
</div>
<div class="flex middle mb10">
<label>标尺：</label>
<div class="full pr10">
<el-switch
v-model="topologyData.data.rule"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@change="changeTopologyOpt(topologyData.data.rule,'rule')">
</el-switch>
</div>
</div>
<div class="flex middle mb10">
<label>标尺颜色：</label>
<div class="full pr10">
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'ruleColor')"
v-model="topologyData.data.ruleColor" size="mini"
popper-class="can-clear"></el-color-picker>
</div>
</div> </div>
</div> </div>
@@ -878,7 +946,7 @@
topologyData:{ topologyData:{
data:{ data:{
name:'', name:'',
bkColor:undefined, bkColor:'#FFFFFF',
bkImage:'', bkImage:'',
grid:false, grid:false,
gridSize:'', gridSize:'',
@@ -889,6 +957,9 @@
lineWidth:1, lineWidth:1,
fromArrow:'', fromArrow:'',
toArrow:'triangleSolid', toArrow:'triangleSolid',
projectInfo:true,
alertInfo:true,
url:'',
} }
}, },
pen:{ pen:{
@@ -997,28 +1068,35 @@
deep:true, deep:true,
immediate:true, immediate:true,
}, },
'topologyData.data':{ // 'topologyData.data':{
handler(n){ // handler(n){
setTimeout(()=>{ // setTimeout(()=>{
let data=getTopology(this.index).data; // let dataOption=getTopology(this.index).data;
Object.keys(this.topologyData.data).forEach((key)=>{ // Object.keys(this.topologyData.data).forEach((key)=>{
data[key]=this.topologyData.data[key]; // dataOption[key]=this.topologyData.data[key];
}); // });
getTopology(this.index).render(); // getTopology(this.index).render();
}) // })
}, // },
deep:true, // deep:true,
immediate:true, // immediate:false,
} // }
},
created(){
let dataOption=getTopology(this.index).data;
console.log(dataOption);
Object.keys(this.topologyData.data).forEach((key)=>{
console.log()
this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]);
});
}, },
mounted(){ mounted(){
this.queryMetrics(); this.queryMetrics();
let dataOption=getTopology(this.index).data; // this.topologyData.data.grid= !!dataOption.grid;
Object.keys(this.topologyData.data).forEach((key)=>{ // this.topologyData.data.rule= !!dataOption.rule;
this.topologyData.data[key]=dataOption[key]?dataOption[key]:this.topologyData.data[key] // this.topologyData.data.projectInfo= !!dataOption.projectInfo;
}); // this.topologyData.data.alertInfo= !!dataOption.alertInfo;
this.topologyData.data.grid= !!getTopology(this.index).data.grid; console.log(this.topologyData);
this.topologyData.data.rule= !!getTopology(this.index).data.rule;
}, },
updated(){ updated(){
if(!this.selection.pen){//没选中node line返回 if(!this.selection.pen){//没选中node line返回
@@ -1158,11 +1236,19 @@
this.onChange(); this.onChange();
}, },
changeTopologyOpt(val,key){ changeTopologyOpt(val,key){
this.topologyData.data[key]=this.colorRGBtoHex(val); // this.topologyData.data[key]=this.colorRGBtoHex(val);
// getTopology(this.index).data[key]=val; // getTopology(this.index).data[key]=val;
// getTopology(this.index).render(); // getTopology(this.index).render();
this.topologyData.data[key]=val;
Object.keys(this.topologyData.data).forEach((key1)=>{
getTopology(this.index).data[key1]=this.topologyData.data[key1];
});
// console.log(dataOption[key]);
getTopology(this.index).render();
console.log(123213123);
}, },
colorRGBtoHex(color){//获取颜色16进制数 colorRGBtoHex(color){//获取颜色16进制数
return color;
if(!color){ if(!color){
return "" return ""
} }
@@ -1217,6 +1303,23 @@
}); });
} }
}, },
valueMappingAdd(){
this.selection.pen.data.valueMapping.push({
color:{
border:'#000',
bac:'#fff',
text:'#000',
},
animation:'upDown',
value:'',
});
},
valueMappingValueChange(index,row){
console.log(index,row)
},
valueMappingDel(index,row){
console.log(index,row)
},
} }
} }
</script> </script>
@@ -1243,6 +1346,51 @@
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.project-title{
background: #eeeeee;
height: 36px;
line-height: 36px;
border-radius:10px 0 0 0;
padding-left: 10px;
}
.project-content{
margin: 10px;
.project-content-title{
background: #F6F6F6;
padding-left: 10px;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 400;
height: 32px;
line-height: 31px;
margin-bottom: 5px;
}
.project-content-box{
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
}
.half.project-content-item{
width: calc(50% - 15px);
height: 64px;
}
.project-content-item{
padding-left: 10px;
display: inline-block;
width: 100%;
label{
font-family: PingFangSC-Regular;
font-size: 14px;
color: #666666;
letter-spacing: 0;
font-weight: 400;
}
.h32{
height: 32px;
}
}
}
/deep/ .el-tabs.el-tabs--card { /deep/ .el-tabs.el-tabs--card {
height: 100%; height: 100%;
@@ -1281,7 +1429,6 @@
.pl0 { .pl0 {
padding-left: 0; padding-left: 0;
} }
.special-select .el-select.el-select--small { .special-select .el-select.el-select--small {
width: 100%; width: 100%;
} }
@@ -1310,9 +1457,9 @@
.props-box { .props-box {
position: relative; position: relative;
width: calc(100% - 20px); width: calc(100% - 20px);
height: calc(100% - 35px); height: calc(100% - 20px);
padding-left: 10px; overflow-y: scroll;
padding-bottom: 20px;
.iconfont { .iconfont {
cursor: pointer; cursor: pointer;
} }

110
nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
View File

@@ -1,15 +1,28 @@
<template> <template>
<div class="tool-top"> <div class="tool-top" id="tool-top">
<div class="top-tool-item" @click="undo"> 撤销 </div> <div id="undo" :class="['top-tool-item',cachesIndex>0?'':'top-tool-item-disabled']" @click="undo"> <i class="nz-icon nz-icon-jiantou-left" /> </div>
<div class="top-tool-item" @click="redo"> 重做 </div> <div id="redo" :class="['top-tool-item',redoFlag?'':'top-tool-item-disabled']" @click="redo"> <i class="nz-icon nz-icon-jiantou-right" /> </div>
<div class="top-tool-item" @click="centerView"> 居中</div> <!--<div class="top-tool-item" @click="centerView"> 居中</div>-->
<div class="top-tool-item" @click="fitView"> 自适应</div> <!--<div class="top-tool-item" @click="fitView"> 自适应</div>-->
<div class="top-tool-item"> 缩放大小 <el-input-number size="mini" v-model="option.scale" @change="scale" :min="0.25" :max="5" :step="0.2" :precision="2"></el-input-number> </div> <!--<div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </div>-->
<div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </div> <!--<div :class="['top-tool-item',toolShow.attr?'tool-item-active':'']" @click="toolShowChange('attr')"> 属性工具 </div>-->
<div :class="['top-tool-item',toolShow.attr?'tool-item-active':'']" @click="toolShowChange('attr')"> 属性工具 </div>
<!--<div> 保存为图片 </div>--> <!--<div> 保存为图片 </div>-->
<div class="top-tool-item" @click="del"> 删除 </div> <div class="top-tool-item" @click="del"> <i class="nz-icon nz-icon-delete"/> </div>
<div class="top-tool-item" @click="clear"> 清空画布 </div> <div class="top-tool-item top-tool-item-scale">
<el-input-number
size="mini"
v-model="scaleNum"
:max="500"
:min="25"
:step="20"
:precision="0"
id="scaleNum"
@change="scale">
</el-input-number>
<span class="percent">%</span>
</div>
<!--<div class="top-tool-item" @click="clear"> 清空画布 </div>-->
</div> </div>
</template> </template>
@@ -25,8 +38,9 @@
lineWidth:1, lineWidth:1,
fromArrow:'', fromArrow:'',
toArrow:'triangleSolid', toArrow:'triangleSolid',
scale:1, scale:100,
}, },
scaleNum:100,
penLineType:[ penLineType:[
{d:'M5 14 a100,50 0 0,1 85,0',"stroke-dasharray":"",name:'curve'}, {d:'M5 14 a100,50 0 0,1 85,0',"stroke-dasharray":"",name:'curve'},
{d:'M5 8 l40 0 l0 12 l40 0',"stroke-dasharray":"",name:'polyline'}, {d:'M5 8 l40 0 l0 12 l40 0',"stroke-dasharray":"",name:'polyline'},
@@ -40,6 +54,7 @@
{d:'M5 14 l85 0',fill:'#000000', stroke:"",'stroke-width':"",cx:"10",cy:"14",r:"5",name:'circleSolid'}, {d:'M5 14 l85 0',fill:'#000000', stroke:"",'stroke-width':"",cx:"10",cy:"14",r:"5",name:'circleSolid'},
{d:'M5 14 l85 0',fill:'#ffffff', stroke:"#000000",'stroke-width':"1",cx:"10",cy:"14",r:"5",name:'circle'}, {d:'M5 14 l85 0',fill:'#ffffff', stroke:"#000000",'stroke-width':"1",cx:"10",cy:"14",r:"5",name:'circle'},
], ],
redoFlag:false,
} }
}, },
props:{ props:{
@@ -54,12 +69,20 @@
toolShow:{ toolShow:{
type:Object, type:Object,
require:true require:true
},
cachesIndex:{
type:Number,
require:true,
} }
}, },
mounted(){ mounted(){
let dataOption=getTopology(this.index).data; let dataOption=getTopology(this.index).data;
Object.keys(this.option).forEach(key=>{ Object.keys(this.option).forEach(key=>{
this.option[key]=(dataOption[key]?dataOption[key]:this.option[key]); if(key==='scale'){
this.scaleNum=(JSON.stringify(dataOption[key])?dataOption[key]*100:this.scaleNum)
}else{
this.option[key]=(dataOption[key]?dataOption[key]:this.option[key]);
}
}) })
}, },
methods:{ methods:{
@@ -69,6 +92,9 @@
}, },
undo(){//撤销 undo(){//撤销
getTopology(this.index).undo(); getTopology(this.index).undo();
setTimeout(()=>{
this.redoFlag=true;
},200)
}, },
redo(){//重做 redo(){//重做
getTopology(this.index).redo(); getTopology(this.index).redo();
@@ -79,8 +105,8 @@
fitView(){//自适应画布大小 fitView(){//自适应画布大小
getTopology(this.index).fitView(); getTopology(this.index).fitView();
}, },
scale(){ scale(val){
getTopology(this.index).scaleTo(this.option.scale); getTopology(this.index).scaleTo(val/100);
}, },
del(){ del(){
let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens
@@ -99,20 +125,60 @@
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.tool-top { .tool-top {
border: 1px solid #1a1a1a;
border-radius: 2px; border-radius: 2px;
display: inline-flex; display: inline-flex;
} .nz-icon{
.tool-top > div{ font-size: 14px;
padding: 3px 5px; color: #666666;
} }
.tool-top > div:not(:last-child){
border-right: 1px solid #1a1a1a ;
} }
.top-tool-item{ .top-tool-item{
cursor: pointer; cursor: pointer;
background: #FFFFFF;
border: 1px solid #DEDEDE;
border-radius: 2px;
padding: 8px 11px;
line-height: 14px;
margin-right: 10px;
}
.top-tool-item-scale{
margin-left: 40px;
padding: 0;
position: relative;
.percent{
position: absolute;
top: 7px;
left: 68px;
font-size:12px ;
}
/deep/ .el-input--mini{
input{
border: none;
}
}
/deep/ .el-input-number--mini {
width: 111px;
}
/deep/ .el-input-number__decrease,/deep/ .el-input-number__increase{
border: none;
border-radius: 100%;
width: 16px;
height: 16px;
line-height: 16px;
margin-top: 6px;
}
/deep/ .el-input-number__decrease{
margin-left: 5px;
}
/deep/ .el-input-number__increase{
margin-right: 5px;
}
}
.top-tool-item-disabled{
color: #CECECE;
opacity: 0.3;
} }
.tool-item-active{ .tool-item-active{
background: #1a1a1a; background: #1a1a1a;

751
nezha-fronted/src/components/common/project/topologyL5.vue
View File

File diff suppressed because it is too large Load Diff