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

feat：project overview重构 初版样式未调整

Browse Source
This commit is contained in:
zhangyu
2021-01-29 19:09:21 +08:00
parent 6fc9c8d355
commit 6d8fbccb3e
13 changed files with 6138 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -203,7 +203,10 @@ const cn = {
range:'Range',
},
legendValue:'Legend option',
content:'内容'
content:'内容',
tooltip:'Tooltip',
displayChart:'Display chart',
aggregation:"Aggregation",
},
chartTableColumn: {
metric: "指标",

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

@@ -210,7 +210,10 @@ const en = {
range:'Range',
},
legendValue:'Legend option',
content:'Content'
content:'Content',
tooltip:'Tooltip',
displayChart:'Display chart',
aggregation:"Aggregation",
},
chartTableColumn:{
metric:'Metric', //'指标'

195
nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue Normal file
View File

@@ -0,0 +1,195 @@
<template>
<div class="menus">
<div>
<a :class="{disabled:!props.node && !props.nodes}" @click="onTop()">置顶</a>
</div>
<div>
<a :class="{disabled:!props.node && !props.nodes}" @click="onBottom()">置底</a>
</div>
<div class="line"></div>
<div v-if="props.nodes">
<a @click="onCombine()">组合</a>
<div>
<a @click="onCombine(true)">包含</a>
</div>
</div>
<div v-if="props.node && props.node.name === 'combine'">
<a @click="onUncombine()">取消组合/包含</a>
</div>
<div>
<a
:class="{disabled:!props.node && !props.nodes}"
@click="onLock()"
>{{ props.locked ? '解锁' : '锁定' }}</a>
</div>
<div class="line"></div>
<div>
<a :class="{disabled:!props.node && !props.nodes && !props.line}" @click="onDel()">删除</a>
</div>
<div class="line"></div>
<div>
<a @click="canvas.undo()" class="flex">
<span class="full">撤消</span>
<span class="ml50">Ctrl + Z</span>
</a>
</div>
<div>
<a @click="canvas.redo()">
恢复
<span class="ml50">Ctrl + Shift+ Z</span>
</a>
</div>
<div class="line"></div>
<div>
<a @click="canvas.cut()" class="flex">
<span class="full">剪切</span>
<span class="ml50">Ctrl + X</span>
</a>
</div>
<div>
<a @click="canvas.copy()" class="flex">
<span class="full">复制</span>
<span class="ml50">Ctrl + C</span>
</a>
</div>
<div>
<a @click="canvas.paste()" class="flex">
<span class="full">粘贴</span>
<span class="ml50">Ctrl + V</span>
</a>
</div>
<div class="line"></div>
<div>
<a :class="{disabled:!props.node || !props.node.image}" @click="onCopyImage()" class="flex">
<span class="full">复制节点图片地址</span>
</a>
</div>
</div>
</template>
<script >
export default {
data() {
return {}
},
props: {
canvas: {
type: Object,
require: true
},
props: {
type: Object,
require: true
}
},
methods: {
onTop() {
if (this.props.node) {
this.canvas.top(this.props.node)
}
if (this.props.nodes) {
for (const item of this.props.nodes) {
this.canvas.top(item)
}
}
this.canvas.render()
},
onBottom() {
if (this.props.node) {
this.canvas.bottom(this.props.node)
}
if (this.props.nodes) {
for (const item of this.props.nodes) {
this.canvas.bottom(item)
}
}
this.canvas.render()
},
onCombine(stand) {
if (!this.props.nodes) {
return
}
this.canvas.combine(this.props.nodes, stand)
this.canvas.render()
},
onUncombine() {
if (!this.props.node) {
return
}
this.canvas.uncombine(this.props.node)
this.canvas.render()
},
onLock() {
this.props.locked = !this.props.locked
if (this.props.node) {
this.props.node.locked = this.props.locked
}
if (this.props.nodes) {
for (const item of this.props.nodes) {
item.locked = this.props.locked
}
}
if (this.props.lines) {
for (const item of this.props.lines) {
item.locked = this.props.locked
}
}
this.canvas.render(true)
},
onDel() {
this.canvas.delete()
}
}
}
</script>
<style lang="scss">
.menus {
color: #000;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
min-width: 1.8rem;
text-align: left;
padding: 0.08rem 0;
& > div {
line-height: 2.2;
a {
color: #314659;
display: block;
padding: 0 0.2rem;
text-decoration: none;
cursor: pointer;
&:hover {
color: #1890ff;
}
&.flex {
display: flex;
}
&.disabled {
color: #ccc;
cursor: default;
}
}
}
.line {
background-color: transparent !important;
padding: 0;
margin: 0.05rem 0;
border-top: 1px solid #eee;
}
}
</style>

1375
nezha-fronted/src/components/common/project/L5/CanvasProps.vue Normal file
View File

File diff suppressed because it is too large Load Diff

640
nezha-fronted/src/components/common/project/L5/css/iconfont.css Normal file
View File

File diff suppressed because one or more lines are too long

464
nezha-fronted/src/components/common/project/L5/css/props.css Normal file
View File

File diff suppressed because one or more lines are too long

585
nezha-fronted/src/components/common/project/L5/services/canvas.js Normal file
View File

@@ -0,0 +1,585 @@
import {register as registerFlow} from '@topology/flow-diagram'
import {register as registerActivity} from '@topology/activity-diagram'
import {register as registerSequence} from '@topology/sequence-diagram'
import {register as registerChart} from '@topology/chart-diagram';
import { Node, Rect,Point, Direction } from '@topology/core';
// import { register as registerClass } from './class-diagram/index'
export let canvas;
export function canvasRegister(){
registerFlow();
registerActivity();
registerSequence();
registerChart();
// registerClass()
}
export const Tools=[
{
group:'基本形状',
children:[
{
name:'rectangleImg',
icon:'icon-rect',
data:{
text:'rect',
rect:{
width:100,
height:100
},
paddingLeft:10,
paddingRight:10,
paddingTop:10,
paddingBottom:10,
name:'rectangleImg',
icon: '\ue680',
iconFamily: 'nz-icon',
iconColor: ''
}
},
{
name: 'rectangle',
icon: 'icon-cube',
data: {
rect: {
width: 100,
height: 100
},
is3D: true,
z: 20,
zRotate: 15,
name: 'myCube',
iconFamily: 'topology',
iconColor: '#777',
iconSize: 30
}
},
{
name:'rectangle',
icon:'icon-rect',
data:{
text:'rect',
rect:{
width:100,
height:100
},
paddingLeft:10,
paddingRight:10,
paddingTop:10,
paddingBottom:10,
name:'rectangle',
}
},
{
name:'rectangle',
icon:'icon-rectangle',
data:{
text:'rectangle',
rect:{
width:200,
height:50
},
paddingLeft:10,
paddingRight:10,
paddingTop:10,
paddingBottom:10,
borderRadius:0.1,
name:'rectangle',
// icon: '\ue680',
// iconFamily: 'nz-icon',
// iconColor: ''
}
},
{
name:'circle',
icon:'icon-circle',
data:{
text:'circle',
rect:{
width:100,
height:100
},
name:'circle',
textMaxLine:1
}
},
{
name:'triangle',
icon:'icon-triangle',
data:{
text:'triangle',
rect:{
width:100,
height:100
},
name:'triangle'
}
},
{
name:'diamond',
icon:'icon-diamond',
data:{
text:'diamond',
rect:{
width:100,
height:100
},
name:'diamond'
}
},
{
name:'pentagon',
icon:'icon-pentagon',
data:{
text:'pentagon',
rect:{
width:100,
height:100
},
name:'pentagon'
}
},
{
name:'hexagon',
icon:'icon-hexagon',
data:{
text:'hexagon',
rect:{
width:100,
height:100
},
paddingTop:10,
paddingBottom:10,
name:'hexagon'
}
},
{
name:'pentagram',
icon:'icon-pentagram',
data:{
text:'pentagram',
rect:{
width:100,
height:100
},
name:'pentagram'
}
},
{
name:'image',
icon:'icon-image',
data:{
text:'Nezha',
rect:{
width:100,
height:100
},
name:'image',
image:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3488940205,2956353665&fm=26&gp=0.jpg'
}
},
]
},
{
group: '自定义图片',
children: [
{
name: 'rectangle',
icon: 'icon-image',
data: {
text: 'Nezha',
rect: {
width: 100,
height: 100
},
name: 'rectangle',
image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3488940205,2956353665&fm=26&gp=0.jpg',
imageRatio:true,
"imageAlign":"center",
iconRect:{
"width":80,
"height":80,
},
"fullIconRect":{"width":80,"height":90,"center":{"x":972,"y":456},"ex":1012,"ey":496}
}
},
],
},
];
export const imageTemp={
name: 'rectangleImg',
icon: 'icon-image',
data: {
"type":0,
"rect":{
"x":922,
"y":406,
"width":100,
"height":100,
},
"lineWidth":0,
"rotate":0,
"offsetRotate":0,
"globalAlpha":1,
"dash":0,
"strokeStyle":"#000000",
"animatePos":0,
"name":"rectangleImg",
"lineDashOffset":0,
"text":"",
"textOffsetX":0,
"textOffsetY":0,
"visible":true,
"zRotate":0,
"animateDuration":0,
"animateFrames":[],
"animateFrame":0,
"borderRadius":0,
"icon":"",
"image":"",
"imageAlign":"center",
"bkType":0,
"gradientAngle":0,
"gradientRadius":0.01,
"paddingTop":5,
"paddingBottom":5,
"paddingLeft":5,
"paddingRight":5,
"paddingLeftNum":5,
"paddingRightNum":5,
"paddingTopNum":5,
"paddingBottomNum":5,
"fullIconRect":{"width":80,"height":90,"center":{"x":972,"y":456},"ex":1012,"ey":496}
}
};
/*自定义图片组件*/
export function myShape(ctx, node) { //自定义图片组件
ctx.beginPath();
ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
if(node.data.lineWidth<=0){
ctx.strokeStyle = 'rgba(0,0,0,0)';
}
// 必须判空再填充
(node.fillStyle || node.bkType) && ctx.fill();
ctx.stroke();
}
export function myAnchors(node) {
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
}
export function myIconRect(node) {
node.iconRect = new Rect(node.rect.x+node.paddingLeft, node.rect.y+node.paddingTop, node.rect.width-(node.paddingLeft+node.paddingRight), node.rect.height-20-(node.paddingTop+node.paddingBottom));
node.fullIconRect = node.rect;
}
export function myTextRect(node) {
node.textRect = new Rect(
node.rect.x +node.paddingLeft,
node.rect.y+node.rect.height-20-node.paddingBottom,
node.rect.width -(node.paddingLeft+node.paddingRight),
20,
);
node.fullTextRect = node.rect;
}
/*自定义图片组件*/
/*自定义立方体*/
export function myCubec(ctx, node) {//立方体
// ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
let x=node.rect.x+10,y=node.rect.y+10,w=node.rect.width-20,h=node.rect.height-20;
// LINE MODE
ctx.lineJoin = "round";
// center face
ctx.beginPath();
ctx.moveTo(x, y+h/3);
ctx.lineTo(x + w*2/3, y+h/3 );
ctx.lineTo(x + w*2/3, y +h);
ctx.lineTo(x, y + h);
ctx.closePath();
ctx.fillStyle = node.fillStyle;
ctx.strokeStyle = node.strokeStyle;
ctx.stroke();
(node.fillStyle || node.bkType) && ctx.fill();
// top face
ctx.beginPath();
ctx.moveTo(x, y+h/3);
ctx.lineTo(x + w/3, y);
ctx.lineTo(x + w, y);
ctx.lineTo(x + w*2/3, y+h/3 );
ctx.closePath();
ctx.fillStyle = node.fillStyle;
ctx.strokeStyle = node.strokeStyle;
ctx.stroke();
(node.fillStyle || node.bkType) && ctx.fill();
// right face
ctx.beginPath();
ctx.moveTo(x + w*2/3, y+h/3 );
ctx.lineTo(x + w, y);
ctx.lineTo(x + w, y+h*2/3);
ctx.lineTo(x + w*2/3, y + h);
ctx.closePath();
ctx.fillStyle = node.fillStyle;
ctx.strokeStyle = node.strokeStyle;
ctx.stroke();
(node.fillStyle || node.bkType) && ctx.fill();
// 必须判空再填充
}
export function myCubeAnchors(node) {//立方体锚点
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
}
/*自定义立方体*/
export function onChangeAnimate(node,animateType) {
if (node.animateType === 'custom') {
return;
}
node.animateFrames = [];
const state = Node.cloneState(node);
switch (animateType) {
case 'upDown':
state.rect.y -= 10;
state.rect.ey -= 10;
node.animateFrames.push({
duration: 100,
linear: true,
state
});
node.animateFrames.push({
duration: 100,
linear: true,
state: Node.cloneState(node)
});
node.animateFrames.push({
duration: 200,
linear: true,
state: Node.cloneState(state)
});
break;
case 'leftRight':
state.rect.x -= 10;
state.rect.ex -= 10;
node.animateFrames.push({
duration: 100,
linear: true,
state: Node.cloneState(state)
});
state.rect.x += 20;
state.rect.ex += 20;
node.animateFrames.push({
duration: 80,
linear: true,
state: Node.cloneState(state)
});
state.rect.x -= 20;
state.rect.ex -= 20;
node.animateFrames.push({
duration: 50,
linear: true,
state: Node.cloneState(state)
});
state.rect.x += 20;
state.rect.ex += 20;
node.animateFrames.push({
duration: 30,
linear: true,
state: Node.cloneState(state)
});
node.animateFrames.push({
duration: 300,
linear: true,
state: Node.cloneState(node)
});
break;
case 'heart':
state.rect.x -= 5;
state.rect.ex += 5;
state.rect.y -= 5;
state.rect.ey += 5;
state.rect.width += 5;
state.rect.height += 10;
node.animateFrames.push({
duration: 100,
linear: true,
state
});
node.animateFrames.push({
duration: 400,
linear: true,
state: Node.cloneState(node)
});
break;
case 'success':
state.strokeStyle = '#237804';
node.animateFrames.push({
duration: 100,
linear: true,
state
});
node.animateFrames.push({
duration: 100,
linear: true,
state: Node.cloneState(node)
});
state.strokeStyle = '#237804';
node.animateFrames.push({
duration: 100,
linear: true,
state
});
node.animateFrames.push({
duration: 100,
linear: true,
state: Node.cloneState(node)
});
state.strokeStyle = '#237804';
state.fillStyle = '#389e0d22';
node.animateFrames.push({
duration: 3000,
linear: true,
state
});
break;
case 'warning':
state.strokeStyle = '#fa8c16';
state.fillStyle = '#fa8c16';
state.lineWidth=5;
state.dash = 2;
node.animateFrames.push({
duration: 500,
linear: true,
state
});
state.strokeStyle = '#fa8c16';
state.dash = 0;
state.lineWidth=1;
state.fillStyle = '#ffffff';
node.animateFrames.push({
duration: 500,
linear: true,
state: Node.cloneState(state)
});
state.strokeStyle = '#fa8c16';
state.dash = 2;
state.lineWidth=5;
state.fillStyle = '#fa8c16';
node.animateFrames.push({
duration: 300,
linear: true,
state: Node.cloneState(state)
});
break;
case 'error':
state.strokeStyle = '#cf1322';
// state.fillStyle = '#cf132222';
state.lineWidth=5;
state.dash = 2;
node.animateFrames.push({
duration: 100,
linear: true,
state
});
state.strokeStyle = '#cf1322';
state.dash = 0;
state.lineWidth=1;
node.animateFrames.push({
duration: 500,
linear: true,
state: Node.cloneState(state)
});
state.strokeStyle = '#cf1322';
state.dash = 2;
state.lineWidth=5;
node.animateFrames.push({
duration: 300,
linear: true,
state: Node.cloneState(state)
});
break;
case 'show':
state.strokeStyle = '#fa541c';
state.rotate = -10;
node.animateFrames.push({
duration: 100,
linear: true,
state: Node.cloneState(state)
});
state.rotate = 10;
node.animateFrames.push({
duration: 100,
linear: true,
state: Node.cloneState(state)
});
state.rotate = 0;
node.animateFrames.push({
duration: 100,
linear: true,
state: Node.cloneState(state)
});
break;
}
node.animatePlay=true;
}
export function onChangeAnimateLine(line,type){
line.animateType=type;
line.animatePlay=true;
}
export function changeImage (dataImg, callback) {
let self = this;
var base64Img = document.createElement("base64Img"),
canvas = document.createElement("canvas"),
context = canvas.getContext("2d");
// 创建新图片
var img = new Image();
img.src = dataImg;
img.addEventListener(
"load",
function () {
// 绘制图片到canvas上
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);
// 将canvas的透明背景设置成白色
var imageData = context.getImageData(
0,
0,
canvas.width,
canvas.height
);
for (var i = 0; i < imageData.data.length; i += 4) {
//rgb大于250的透明度y均设置成0
if (
imageData.data[i] > 0 &&
imageData.data[i + 1] > 0 &&
imageData.data[i + 2] > 0
) {
imageData.data[i + 3] = 200;
}
}
context.putImageData(imageData, 0, 0);
let baseImg = canvas.toDataURL("image/png");//返回base64
if (typeof callback !== undefined) {
if (callback) callback(baseImg);
}
img.remove();
},
false
);
}

919
nezha-fronted/src/components/common/project/L5/services/canvasRef.js Normal file
View File

@@ -0,0 +1,919 @@
import { register as registerFlow } from '@topology/flow-diagram'
import { register as registerActivity } from '@topology/activity-diagram'
import { register as registerSequence } from '@topology/sequence-diagram'
import { register as registerChart } from '@topology/chart-diagram';
// import { register as registerClass } from './class-diagram/index'
export let canvas;
export function canvasRegister() {
registerFlow();
registerActivity();
registerSequence();
registerChart();
// registerClass()
}
export const Tools = [
{
group: '基本形状',
children: [
{
name: 'rectangle',
icon: 'icon-rect',
data: {
text: 'rect',
rect: {
width: 100,
height: 100
},
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
name: 'rectangle',
}
},
{
name: 'rectangle',
icon: 'icon-rectangle',
data: {
text: 'rectangle',
rect: {
width: 200,
height: 50
},
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
borderRadius: 0.1,
name: 'rectangle'
}
},
{
name: 'circle',
icon: 'icon-circle',
data: {
text: 'circle',
rect: {
width: 100,
height: 100
},
name: 'circle',
textMaxLine: 1
}
},
{
name: 'triangle',
icon: 'icon-triangle',
data: {
text: 'triangle',
rect: {
width: 100,
height: 100
},
name: 'triangle'
}
},
{
name: 'diamond',
icon: 'icon-diamond',
data: {
text: 'diamond',
rect: {
width: 100,
height: 100
},
name: 'diamond'
}
},
{
name: 'pentagon',
icon: 'icon-pentagon',
data: {
text: 'pentagon',
rect: {
width: 100,
height: 100
},
name: 'pentagon'
}
},
{
name: 'hexagon',
icon: 'icon-hexagon',
data: {
text: 'hexagon',
rect: {
width: 100,
height: 100
},
paddingTop: 10,
paddingBottom: 10,
name: 'hexagon'
}
},
{
name: 'pentagram',
icon: 'icon-pentagram',
data: {
text: 'pentagram',
rect: {
width: 100,
height: 100
},
name: 'pentagram'
}
},
{
name: 'leftArrow',
icon: 'icon-arrow-left',
data: {
text: '左箭头',
rect: {
width: 200,
height: 100
},
name: 'leftArrow'
}
},
{
name: 'rightArrow',
icon: 'icon-arrow-right',
data: {
text: '右箭头',
rect: {
width: 200,
height: 100
},
name: 'rightArrow'
}
},
{
name: 'twowayArrow',
icon: 'icon-twoway-arrow',
data: {
text: '双向箭头',
rect: {
width: 200,
height: 100
},
name: 'twowayArrow'
}
},
{
name: 'line',
icon: 'icon-line',
data: {
text: '直线',
rect: {
width: 100,
height: 100
},
name: 'line'
}
},
{
name: 'cloud',
icon: 'icon-cloud',
data: {
text: '云',
rect: {
width: 100,
height: 100
},
name: 'cloud'
}
},
{
name: 'message',
icon: 'icon-msg',
data: {
text: '消息框',
rect: {
width: 100,
height: 100
},
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
name: 'message'
}
},
{
name: 'file',
icon: 'icon-file',
data: {
text: '文档',
rect: {
width: 80,
height: 100
},
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
name: 'file'
}
},
{
name: 'text',
icon: 'icon-text',
data: {
text: 'Nezha',
rect: {
width: 160,
height: 30
},
name: 'text'
}
},
{
name: 'cube',
icon: 'icon-cube',
data: {
rect: {
width: 50,
height: 70
},
is3D: true,
z: 10,
zRotate: 15,
fillStyle: '#ddd',
name: 'cube',
icon: '\ue63c',
iconFamily: 'topology',
iconColor: '#777',
iconSize: 30
}
},
{
name: 'people',
icon: 'icon-people',
data: {
rect: {
width: 70,
height: 100
},
name: 'people'
}
},
{
name: '视频/网页',
icon: 'icon-pc',
data: {
text: '视频/网页',
rect: {
width: 200,
height: 200
},
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
// strokeStyle: 'transparent',
name: 'div'
}
}
]
},
// {
// group: '自定义图片',
// children: [
// {
// name: 'image',
// icon: 'icon-image',
// data: {
// text: 'Nezha',
// rect: {
// width: 100,
// height: 100
// },
// name: 'image',
// image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3488940205,2956353665&fm=26&gp=0.jpg'
// }
// },
// ],
// },
// {
// group: '流程图',
// children: [
// {
// name: '开始/结束',
// icon: 'icon-flow-start',
// data: {
// text: '开始',
// rect: {
// width: 120,
// height: 40
// },
// borderRadius: 0.5,
// name: 'rectangle'
// }
// },
// {
// name: '流程',
// icon: 'icon-rectangle',
// data: {
// text: '流程',
// rect: {
// width: 120,
// height: 40
// },
// name: 'rectangle'
// }
// },
// {
// name: '判定',
// icon: 'icon-diamond',
// data: {
// text: '判定',
// rect: {
// width: 120,
// height: 60
// },
// name: 'diamond'
// }
// },
// {
// name: '数据',
// icon: 'icon-flow-data',
// data: {
// text: '数据',
// rect: {
// width: 120,
// height: 50
// },
// name: 'flowData'
// }
// },
// {
// name: '准备',
// icon: 'icon-flow-ready',
// data: {
// text: '准备',
// rect: {
// width: 120,
// height: 50
// },
// name: 'hexagon'
// }
// },
// {
// name: '子流程',
// icon: 'icon-flow-subprocess',
// data: {
// text: '子流程',
// rect: {
// width: 120,
// height: 50
// },
// name: 'flowSubprocess'
// }
// },
// {
// name: '数据库',
// icon: 'icon-db',
// data: {
// text: '数据库',
// rect: {
// width: 80,
// height: 120
// },
// name: 'flowDb'
// }
// },
// {
// name: '文档',
// icon: 'icon-flow-document',
// data: {
// text: '文档',
// rect: {
// width: 120,
// height: 100
// },
// name: 'flowDocument'
// }
// },
// {
// name: '内部存储',
// icon: 'icon-internal-storage',
// data: {
// text: '内部存储',
// rect: {
// width: 120,
// height: 80
// },
// name: 'flowInternalStorage'
// }
// },
// {
// name: '外部存储',
// icon: 'icon-extern-storage',
// data: {
// text: '外部存储',
// rect: {
// width: 120,
// height: 80
// },
// name: 'flowExternStorage'
// }
// },
// {
// name: '队列',
// icon: 'icon-flow-queue',
// data: {
// text: '队列',
// rect: {
// width: 100,
// height: 100
// },
// name: 'flowQueue'
// }
// },
// {
// name: '手动输入',
// icon: 'icon-flow-manually',
// data: {
// text: '手动输入',
// rect: {
// width: 120,
// height: 80
// },
// name: 'flowManually'
// }
// },
// {
// name: '展示',
// icon: 'icon-flow-display',
// data: {
// text: '展示',
// rect: {
// width: 120,
// height: 80
// },
// name: 'flowDisplay'
// }
// },
// {
// name: '并行模式',
// icon: 'icon-flow-parallel',
// data: {
// text: '并行模式',
// rect: {
// width: 120,
// height: 50
// },
// name: 'flowParallel'
// }
// },
// {
// name: '注释',
// icon: 'icon-flow-comment',
// data: {
// text: '注释',
// rect: {
// width: 100,
// height: 100
// },
// name: 'flowComment'
// }
// }
// ]
// },
// {
// group: '活动图',
// children: [
// {
// name: '开始',
// icon: 'icon-inital',
// data: {
// text: '',
// rect: {
// width: 30,
// height: 30
// },
// name: 'circle',
// fillStyle: '#555',
// strokeStyle: 'transparent'
// }
// },
// {
// name: '结束',
// icon: 'icon-final',
// data: {
// text: '',
// rect: {
// width: 30,
// height: 30
// },
// name: 'activityFinal'
// }
// },
// {
// name: '活动',
// icon: 'icon-action',
// data: {
// text: '活动',
// rect: {
// width: 120,
// height: 50
// },
// borderRadius: 0.25,
// name: 'rectangle'
// }
// },
// {
// name: '决策/合并',
// icon: 'icon-diamond',
// data: {
// text: '决策',
// rect: {
// width: 120,
// height: 50
// },
// name: 'diamond'
// }
// },
// {
// name: '垂直泳道',
// icon: 'icon-swimlane-v',
// data: {
// text: '垂直泳道',
// rect: {
// width: 200,
// height: 500
// },
// name: 'swimlaneV'
// }
// },
// {
// name: '水平泳道',
// icon: 'icon-swimlane-h',
// data: {
// text: '水平泳道',
// rect: {
// width: 500,
// height: 200
// },
// name: 'swimlaneH'
// }
// },
// {
// name: '垂直分岔/汇合',
// icon: 'icon-fork-v',
// data: {
// text: '',
// rect: {
// width: 10,
// height: 150
// },
// name: 'forkV',
// fillStyle: '#555',
// strokeStyle: 'transparent'
// }
// },
// {
// name: '水平分岔/汇合',
// icon: 'icon-fork',
// data: {
// text: '',
// rect: {
// width: 150,
// height: 10
// },
// name: 'forkH',
// fillStyle: '#555',
// strokeStyle: 'transparent'
// }
// }
// ]
// },
// {
// group: '时序图和类图',
// children: [
// {
// name: '生命线',
// icon: 'icon-lifeline',
// data: {
// text: '生命线',
// rect: {
// width: 150,
// height: 400
// },
// name: 'lifeline'
// }
// },
// {
// name: '激活',
// icon: 'icon-focus',
// data: {
// text: '',
// rect: {
// width: 12,
// height: 200
// },
// name: 'sequenceFocus'
// }
// },
// {
// name: '简单类',
// icon: 'icon-simple-class',
// data: {
// text: 'Topolgoy',
// rect: {
// width: 270,
// height: 200
// },
// paddingTop: 40,
// font: {
// fontFamily: 'Arial',
// color: '#222',
// fontWeight: 'bold'
// },
// fillStyle: '#ffffba',
// strokeStyle: '#7e1212',
// name: 'simpleClass',
// children: [
// {
// text: '- name: string\n+ setName(name: string): void',
// name: 'text',
// paddingLeft: 10,
// paddingRight: 10,
// paddingTop: 10,
// paddingBottom: 10,
// rectInParent: {
// x: 0,
// y: 0,
// width: '100%',
// height: '100%',
// rotate: 0
// },
// font: {
// fontFamily: 'Arial',
// color: '#222',
// textAlign: 'left',
// textBaseline: 'top'
// }
// }
// ]
// }
// },
// {
// name: '类',
// icon: 'icon-class',
// data: {
// text: 'Topolgoy',
// rect: {
// width: 270,
// height: 200
// },
// paddingTop: 40,
// font: {
// fontFamily: 'Arial',
// color: '#222',
// fontWeight: 'bold'
// },
// fillStyle: '#ffffba',
// strokeStyle: '#7e1212',
// name: 'interfaceClass',
// children: [
// {
// text: '- name: string',
// name: 'text',
// paddingLeft: 10,
// paddingRight: 10,
// paddingTop: 10,
// paddingBottom: 10,
// rectInParent: {
// x: 0,
// y: 0,
// width: '100%',
// height: '50%',
// rotate: 0
// },
// font: {
// fontFamily: 'Arial',
// color: '#222',
// textAlign: 'left',
// textBaseline: 'top'
// }
// },
// {
// text: '+ setName(name: string): void',
// name: 'text',
// paddingLeft: 10,
// paddingRight: 10,
// paddingTop: 10,
// paddingBottom: 10,
// rectInParent: {
// x: 0,
// y: '50%',
// width: '100%',
// height: '50%',
// rotate: 0
// },
// font: {
// fontFamily: 'Arial',
// color: '#222',
// textAlign: 'left',
// textBaseline: 'top'
// }
// }
// ]
// }
// }
// ]
// },
// {
// group: '图表控件',
// children: [
// {
// name: '折线图',
// icon: 'icon-line-chart',
// data: {
// text: '折线图',
// rect: {
// width: 300,
// height: 200
// },
// name: 'echarts',
// data: {
// echarts: {
// option: {
// xAxis: {
// type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// },
// yAxis: {
// type: 'value'
// },
// series: [
// {
// data: [820, 932, 901, 934, 1290, 1330, 1320],
// type: 'line'
// }
// ]
// }
// }
// }
// }
// },
// {
// name: '柱状图',
// icon: 'icon-bar-chart',
// data: {
// text: '柱状图',
// rect: {
// width: 300,
// height: 200
// },
// name: 'echarts',
// data: {
// echarts: {
// option: {
// color: ['#3398DB'],
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
// }
// },
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
// xAxis: [
// {
// type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// axisTick: {
// alignWithLabel: true
// }
// }
// ],
// yAxis: [
// {
// type: 'value'
// }
// ],
// series: [
// {
// name: '直接访问',
// type: 'bar',
// barWidth: '60%',
// data: [10, 52, 200, 334, 390, 330, 220]
// }
// ]
// }
// }
// }
// }
// },
// {
// name: '饼图',
// icon: 'icon-pie-chart',
// data: {
// text: '饼图',
// rect: {
// width: 200,
// height: 200
// },
// name: 'echarts',
// data: {
// echarts: {
// option: {
// tooltip: {
// trigger: 'item',
// formatter: '{a} <br/>{b}: {c} ({d}%)'
// },
// legend: {
// orient: 'vertical',
// x: 'left',
// data: [
// '直接访问',
// '邮件营销',
// '联盟广告',
// '视频广告',
// '搜索引擎'
// ]
// },
// series: [
// {
// name: '访问来源',
// type: 'pie',
// radius: ['50%', '70%'],
// avoidLabelOverlap: false,
// label: {
// normal: {
// show: false,
// position: 'center'
// },
// emphasis: {
// show: true,
// textStyle: {
// fontSize: '30',
// fontWeight: 'bold'
// }
// }
// },
// labelLine: {
// normal: {
// show: false
// }
// },
// data: [
// { value: 335, name: '直接访问' },
// { value: 310, name: '邮件营销' },
// { value: 234, name: '联盟广告' },
// { value: 135, name: '视频广告' },
// { value: 1548, name: '搜索引擎' }
// ]
// }
// ]
// }
// }
// }
// }
// },
// {
// name: '仪表盘',
// icon: 'icon-dashboard-chart',
// data: {
// text: '仪表盘',
// rect: {
// width: 300,
// height: 300
// },
// name: 'echarts',
// data: {
// echarts: {
// option: {
// tooltip: {
// formatter: '{a} <br/>{b} : {c}%'
// },
// toolbox: {
// feature: {
// restore: {},
// saveAsImage: {}
// }
// },
// series: [
// {
// name: '业务指标',
// type: 'gauge',
// detail: { formatter: '{value}%' },
// data: [{ value: 50, name: '完成率' }]
// }
// ]
// }
// }
// }
// }
// }
// ]
// },
]

404
nezha-fronted/src/components/common/project/L5/topoTooltip.vue Normal file
View File

@@ -0,0 +1,404 @@
<template>
<div style="width: 400px;height: 400px;">
<span class="temp-dom"></span>
<line-chart-block v-if="true"
:key="'inner' + 0"
:from="'project'"
:ref="'editChart'+0"
:temp-dom="tempDom"
:panel-id="-1"
:is-lock="true"
:chart-index="0"
:chartTitleShow="false"
:chart-data="chartData">
</line-chart-block>
</div>
</template>
<script>
import chart from '../../../page/dashboard/overview/chart';
import lineChartBlock from '../../../charts/line-chart-block';
import bus from "../../../../libs/bus";
import axios from 'axios';
export default {
name:"topoTooltip",
components:{
lineChartBlock,
},
props:{
chartDataParent:{
type:Object,
},
},
watch:{
chartDataParent:{
immediate: true,
handler(n){
this.process(n)
},
}
},
data(){
return{
tempDom: {height: 400, width: ""},
filterTime: [
bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
],
chartDataTemp:{"id":8832,"prev":null,"next":null,"panelId":0,"title":"123","span":12,"height":400,"createAt":"2021-01-27 07:36:19","type":"line","unit":2,"weight":0,"pid":null,"buildIn":null,"seq":null,"param":{"last":0,"legendValue":{"total":"off","min":"off","avg":"off","last":"off","max":"off"},"threshold":"","valueMapping":{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},"url":"","nullType":"connected"},"elements":[{"id":14926,"chartId":null,"expression":"cache_evictions_total","type":"expert","legend":"","buildIn":null,"seq":null},{"id":14927,"chartId":null,"expression":"appDevice","type":"expert","legend":"","buildIn":null,"seq":null}],"sync":null,"asset":null,"isLoaded":true,"from":"__vue_devtool_undefined__","draggable":true,"resizable":true,"editable":true},
chartData:{},
filter:{
end_time:bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss'),
panelId:0,
searchName:"",
start_time:bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
}
}
},
mounted(){
this.tempDomInit();
},
methods:{
tempDomInit() {
let span = document.querySelector(".temp-dom");
this.tempDom.width = 400;
},
process(item){
let chartData={...this.chartDataTemp,...item};
chartData.elements=[]
chartData.expressArr.forEach((item1,index)=>{
chartData.elements.push({
expression:item1,
legend: chartData.legends[index],
type:"expert",
id:index,
buildIn:null,
seq:null,
})
});
chartData.id=0;
chartData.param={
legendValue:{"total":"off","min":"off","avg":"off","last":"off","max":"off"},
last:0,
nullType:"connected",
threshold:'',
url:'',
valueMapping:{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},
};
chartData.span=12;
setTimeout(()=>{
this.getChartData(chartData,0);
});
this.chartData=chartData
},
// 获取一个图表具体数据,图表信息，图表位置index
getChartData(chartInfo, pos, filterType) {
console.log(chartInfo,'chartInfo')
const chartItem = chartInfo;
const index = pos; // 指标
// 没有数据的设置提示信息暂无数据-针对每一个图
const len = chartItem.elements.length;
if (len === 0) {
this.$nextTick(() => {
if (this.$refs['editChart' + chartItem.id]) {
this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId, this.filter, []);
}
});
} else {
let startTime = '';
let endTime = '';
if (filterType === 'refresh') {//刷新
const now = new Date(bus.computeTimezone(new Date().getTime()));
const origin = new Date(this.filter.end_time);
const numInterval = now.getTime() - origin.getTime();
if (numInterval >= 60000) {//大于1分钟，则start、end均往后移numInterval，否则时间不变
startTime = this.getNewTime(this.filter.start_time, numInterval);
endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
} else {
startTime = this.filter.start_time;
endTime = this.filter.end_time;
}
} else if (filterType === 'showFullScreen') {//全屏时间查询
startTime = this.filter.start_time;
endTime = this.filter.end_time;
//this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
} else {
startTime = this.filter.start_time;
endTime = this.filter.end_time;
}
let step = bus.getStep(startTime, endTime);
this.$nextTick(() => {
// const axiosArr = chartItem.elements.map((ele) => {
// const filterItem = ele;
// let query = encodeURIComponent(filterItem.expression);
// if((chartInfo.type==='line'||chartInfo.type==='bar'||chartInfo.type==='stackArea'||chartInfo.type==='table')&&chartInfo.param){//如果是这三个 默认给connected
// chartInfo.param.nullType=chartInfo.param.nullType||'connected';
// query+='&nullType='+chartInfo.param.nullType;
// }
// if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
// return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
// }
// return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
// });
// 一个图表的所有element单独获取数据
axios.all(chartInfo.res).then((res) => {
console.log(res);
if (res.length > 0) {
let series = [];
let singleStatRlt = '';
let legend = [];
let tableData = [];
/*let sumData = {
name: 'sum',
data: [],
visible: true,
threshold: null,
};*/
let errorMsg = "";
res.forEach((response, innerPos) => {
if (response.status === 'success') {
errorMsg = "";
if (response.data.result) {
// 循环处理每个elements下获取的数据列
if (chartItem.type === 'singleStat') {
if (response.data.result.length === 1) {
let statistics = chartItem.param.statistics;
if (response.data.result[0].values) {
singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
}
} else if (response.data.result.length > 1) {
singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
}
} else {
response.data.result.forEach((queryItem, resIndex) => {
let seriesItem = {
theData: {
name: '',
symbol: 'emptyCircle', //去掉点
symbolSize: [2, 2],
smooth: 0.2, //曲线变平滑
showSymbol: false,
data: [],
lineStyle: {
width: 1,
opacity: 0.9
},
animation: false,
type: chartInfo.type,
},
metric_name: '',
};
if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line';
seriesItem.theData.stack = chartInfo.title;
seriesItem.theData.areaStyle = {"opacity": 0.3};
}
if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
seriesItem.theData.markLine={
silent: true,
symbol:['circle','circle'],
label:{
distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
formatter:function(params){
return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
}
},
lineStyle:{
color:'#d64f40',
width:2,
type:'dotted'
},
data: [{
yAxis: Number(chartInfo.param.threshold)
}, ]
}
}
// 图表中每条线的名字,后半部分
let host = '';//up,
if (queryItem.metric.__name__) {
host = `${queryItem.metric.__name__}{`;//up,
}
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
let tempArr = [];
let dpsArr = [];
tempArr = queryItem.values;
dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
dpsArr = dpsArr.map(item => {
return [item[0], [item[1][0], Number(item[1][1])]]
});
// 判断是否有数据, && tagsArr.length > 0
if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id]) {
tagsArr.forEach((tag, i) => {
if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`;
}
});
if (host.endsWith(',')) {
host = host.substr(0, host.length - 1);
}
if (queryItem.metric.__name__) {
host += "}";
}
if (!host || host === '') {
host = chartItem.elements[innerPos].expression;
}
//处理legend别名
let alias = this.$refs['editChart' + chartItem.id].dealLegendAlias(host, chartItem.elements[innerPos].legend);
if (!alias || alias === '') {
alias = host;
}
legend.push({name: host+"-"+chartItem.elements[innerPos].id+"-" + resIndex, alias: alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host +"-"+chartItem.elements[innerPos].id+"-"+ resIndex;
//alert(seriesItem.theData.name);
seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
/*曲线汇总暂不需要
if (sumData.data[dpsIndex]) {
const sumNum = sumData.data[dpsIndex][1] || 0;
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
} else {
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
}
*/
let t_date = new Date(dpsItem[0] * 1000);
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
tableData.push({//表格数据
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
element: {element: host, alias: alias},
time: timeTmp,//采集时间
value: dpsItem[1],//数值
});
return [dpsItem[0] * 1000, dpsItem[1]];
});
series.push(seriesItem.theData);
seriesItem = null;
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
/*
const currentInfo = chartItem.elements[innerPos];
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
this.$message.warning({
duration: 15,
content: errorMsg,
closable: true,
});
*/
}
});
}
}
} else {
if (response.msg) {
//this.$message.error(response.msg);
errorMsg = response.msg;
} else if (response.error) {
//this.$message.error(response.error);
errorMsg = response.error;
} else {
//this.$message.error(response);
errorMsg = response;
}
}
});
if (this.$refs['editChart' + chartItem.id]) {
let chartData = {
chartItem: chartItem,
series: series,
singleStatRlt: singleStatRlt,
legend: legend,
tableData: tableData,
panelId: this.filter.panelId,
filter: this.filter,
filterType: filterType,
errorMsg: errorMsg,
}
if (chartItem.type === 'table') {//表格
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart' + chartItem.id].setData(chartItem, tableData,
this.filter.panelId, this.filter, filterType, errorMsg);
} else {
this.$refs['editChart' + chartItem.id].setData(chartItem, tableData,
this.filter.panelId, this.filter, '', errorMsg);
}
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
if (series.length && chartItem.type === 4) {//曲线汇总
//series.push(sumData);//后续需要
}
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart' + chartItem.id].setData(chartItem, series,
this.filter.panelId, this.filter, legend, filterType, errorMsg);
} else {
this.$refs['editChart' + chartItem.id].setData(chartItem, series,
this.filter.panelId, this.filter, legend, '', errorMsg);
}
} else if (chartItem.type === 'singleStat') {
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart' + chartItem.id].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter, filterType, errorMsg);
} else {
this.$refs['editChart' + chartItem.id].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter, '', errorMsg);
}
}
}
} else {
const type = chartItem.type;
if (this.$refs['editChart' + chartItem.id] ) {
if (type === 'table') {
if (filterType === 'showFullScreen') {//table的全屏查询
this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
this.filter, filterType);
} else {
this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
this.filter);
}
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
if (filterType === 'showFullScreen') {//table的全屏查询
this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
this.filter, filterType);
} else {
this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
this.filter);
}
} else if (chartItem.type === 'singleStat') {
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart' + chartItem.id].setData(chartItem, '',
this.filter.panelId, this.filter, filterType);
} else {
this.$refs['editChart' + chartItem.id].setData(chartItem, '',
this.filter.panelId, this.filter);
}
}
}
}
}).catch((error) => {
if (error) {
this.$message.error(error.toString());
console.error(error)
}
});
});
}
},
},
}
</script>
<style scoped>
.temp-dom {
visibility: hidden;
font-size: 14px;
position: fixed;
}
</style>

169
nezha-fronted/src/components/common/project/L5/topologyTopTool.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<div class="tool-top">
<div class="top-tool-item" @click="undo"> 撤销 </div>
<div class="top-tool-item" @click="redo"> 重做 </div>
<div class="top-tool-item" @click="centerView"> 居中</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.attr?'tool-item-active':'']" @click="toolShowChange('attr')"> 属性工具 </div>
<!--<div> 保存为图片 </div>-->
<div class="top-tool-item" @click="del"> 删除 </div>
<div class="top-tool-item" @click="clear"> 清空画布 </div>
</div>
</template>
<script>
import {getTopology} from "../../js/common";
export default {
name:"topologyTopTool",
data(){
return {
option:{
lineName:'curve',
lineWidth:1,
fromArrow:'',
toArrow:'triangleSolid',
scale:1,
},
penLineType:[
{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 14 l85 0',"stroke-dasharray":"",name:'line'},
{d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
],
penLineFromTOArrow:[
{d:'M5 14 l85 0',"points":"",fill:'',stroke:"",'stroke-width':"",name:''},
{d:'M5 14 l85 0',"points":"5 14,20 9,20 19",fill:'#000000',stroke:"",'stroke-width':"",name:'triangleSolid'},
{d:'M5 14 l85 0',"points":"5 14,20 9,20 19",fill:'#ffffff', stroke:"#000000",'stroke-width':"1",name:'triangle'},
{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'},
],
}
},
props:{
selection:{
type:Object,
require:true
},
index:{
type:Number,
require:true,
},
toolShow:{
type:Object,
require:true
}
},
mounted(){
let dataOption=getTopology(this.index).data;
Object.keys(this.option).forEach(key=>{
this.option[key]=(dataOption[key]?dataOption[key]:this.option[key]);
})
},
methods:{
// todo 1清空后的 处理属性工具的默认值 2工具栏的移动 以及节点工具和属性工具的移动 3 结束箭头类型的方向
changeOption(key){
getTopology(this.index).data[key]=this.option[key];
},
undo(){//撤销
getTopology(this.index).undo();
},
redo(){//重做
getTopology(this.index).redo();
},
centerView(){//居中显示
getTopology(this.index).centerView();
},
fitView(){//自适应画布大小
getTopology(this.index).fitView();
},
scale(){
getTopology(this.index).scaleTo(this.option.scale);
},
del(){
let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens
this.$emit('del', delObj);
},
clear(){
let data={...getTopology(this.index).data};
data.pens=[];
getTopology(this.index).open(data);
},
toolShowChange(attr){
this.$emit('toolShowChange',attr);
}
}
}
</script>
<style scoped>
.tool-top {
border: 1px solid #1a1a1a;
border-radius: 2px;
display: inline-flex;
}
.tool-top > div{
padding: 3px 5px;
}
.tool-top > div:not(:last-child){
border-right: 1px solid #1a1a1a ;
}
.top-tool-item{
cursor: pointer;
}
.tool-item-active{
background: #1a1a1a;
color: #fff;
}
.mb10 {
margin-bottom: 10px;
}
.mt10 {
margin-top: 10px;
}
.p10{
padding: 10px;
}
.pl0{
padding-left: 0;
}
.special-select{
vertical-align: middle;
}
.special-select .el-select.el-select--small{
width: 100%;
}
.special-select /deep/ .el-input.el-input--prefix.el-input--suffix,.line-width /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6;
height: 28px;
}
.special-select /deep/ .el-input__inner,.line-width /deep/ .el-input__inner{
display: none;
}
.special-select /deep/ .el-input__prefix,.line-width /deep/ .el-input__prefix{
height: 28px;
line-height: 28px;
color: #899FB7;
width: 100%;
}
.special-select /deep/ .el-input__prefix > div{
width: 100%;
height: 100%;
}
.props-pen-item{
display: inline-block;
width: 130px;
}
.icon-item{
width: 100%;
height:100%;
}
.icon-item svg{
width: 100%;
height:100%;
}
</style>

1367
nezha-fronted/src/components/common/project/topologyL5.vue Normal file
View File

File diff suppressed because it is too large Load Diff

9
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -33,7 +33,7 @@
<el-col style="width: calc(100% - 120px); height: 100%;">
<div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
<!--<editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>-->
<el-input v-model="expressionList[index]"></el-input>
<el-input v-model="expressionList[index]" @change="metricChange"></el-input>
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div>
@@ -70,6 +70,7 @@
historyParam:{type:Object},
showRemove:{type:Boolean,default:true},
projectRightBox:{type:Boolean,default:false},
metricOptionsParent:{type:Array},
//metricOptions: {type: Array},
//metricStore: {type: Array}
},
@@ -136,7 +137,7 @@
this.expressionList[this.index]=value;
//this.$refs.editor.setContent(value)
this.dropDownVisible=false;
this.$emit('change')
this.$emit('change',value)
},
expressionChange:function(){
this.$emit('change')
@@ -160,7 +161,11 @@
} else if (this.styleType == 2) {
if (n) {
//console.log(this.$parent.$parent)
if(this.metricOptionsParent){
this.metricOptions=this.metricOptionsParent
}else{
this.metricOptions = this.$parent.$parent.$parent.getMetricOptions();
}
} else {
this.metricOptions = [];
}

5
nezha-fronted/src/components/page/project/project.vue
View File

@@ -178,7 +178,8 @@
</template>
<template v-else-if="pageType == 'project'">
<!--<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>-->
<facade :obj="currentProject" targetTab.sync="panel" ref="facade" v-if="reloadFacade"/>
<!--<facade :obj="currentProject" targetTab.sync="panel" ref="facade" v-if="reloadFacade"/>-->
<topologyL5 :obj="currentProject" targetTab.sync="panel" ref="facade" v-if="reloadFacade"/>
</template>
<transition name="el-zoom-in-bottom">
@@ -215,6 +216,7 @@
import panelTab from '../../common/bottomBox/tabs/panelTab'
import bus from '../../../libs/bus'
import facade from '@/components/common/project/projectFacade'
import topologyL5 from '@/components/common/project/topologyL5'
import deleteButton from "../../common/deleteButton";
export default {
@@ -224,6 +226,7 @@
'loading':loading,
'panel-tab':panelTab,
facade,
topologyL5,
'delete-button':deleteButton,
},
computed:{