重构projec页面
This commit is contained in:
zhangyu
@@ -153,7 +153,7 @@
|
||||
import draggable from 'vuedraggable'
|
||||
import chartDataFormat from "./chartDataFormat";
|
||||
import chartAlertList from './chart-alert-list'
|
||||
import visNetwork from './visNetwork'
|
||||
// import visNetwork from './visNetwork'
|
||||
export default {
|
||||
name: 'chartList',
|
||||
props: {
|
||||
@@ -170,7 +170,7 @@
|
||||
chartUrl,
|
||||
chartSingleStat,
|
||||
draggable,
|
||||
visNetwork,
|
||||
// visNetwork,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -655,23 +655,23 @@
|
||||
}
|
||||
|
||||
this.dataList = [...this.dataTotalList];
|
||||
this.dataList.push({ // 拓扑图
|
||||
id: -10,
|
||||
panelId: 0,
|
||||
title: this.$t("alert.config.chart.alertNumTrend"),
|
||||
span: 8,
|
||||
height: 800,
|
||||
type: "topology",
|
||||
prev: -11,
|
||||
next: -1,
|
||||
unit: 1,
|
||||
buildIn: 1,
|
||||
elements: [{
|
||||
id: '',
|
||||
expression: `nz_alert_nums{id="${3333}"}`,
|
||||
type: ''
|
||||
}]
|
||||
});
|
||||
// this.dataList.push({ // 拓扑图
|
||||
// id: -10,
|
||||
// panelId: 0,
|
||||
// title: this.$t("alert.config.chart.alertNumTrend"),
|
||||
// span: 8,
|
||||
// height: 800,
|
||||
// type: "topology",
|
||||
// prev: -11,
|
||||
// next: -1,
|
||||
// unit: 1,
|
||||
// buildIn: 1,
|
||||
// elements: [{
|
||||
// id: '',
|
||||
// expression: `nz_alert_nums{id="${3333}"}`,
|
||||
// type: ''
|
||||
// }]
|
||||
// });
|
||||
this.$nextTick(() => {
|
||||
if (this.dataList.length > 0 ) {
|
||||
this.dataList.forEach((item,index) => {
|
||||
|
||||
BIN
nezha-fronted/src/components/common/project/a.png
Normal file
BIN
nezha-fronted/src/components/common/project/a.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
11
nezha-fronted/src/components/common/project/a.svg
Normal file
11
nezha-fronted/src/components/common/project/a.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="8px" height="32px" viewBox="0 0 8 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>矩形</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="画板" transform="translate(-114.000000, -46.000000)" fill="#2D88FA">
|
||||
<path d="M114,46 L114,46 C118.418278,46 122,49.581722 122,54 L122,70 C122,74.418278 118.418278,78 114,78 L114,46 Z" id="矩形"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 674 B |
302
nezha-fronted/src/components/common/project/addLine.vue
Normal file
302
nezha-fronted/src/components/common/project/addLine.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div class="right-box right-box-edit-endpoint">
|
||||
<!-- begin--顶部按钮-->
|
||||
<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-txt">{{$t('overall.delete')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{$t("project.endpoint.editEndpoint") + " ID：" + lineData.id}}</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin--表单-->
|
||||
<el-scrollbar class="right-box-form-box">
|
||||
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
|
||||
<el-form-item label="Id">
|
||||
<el-input v-model="form.lineId"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="箭头方向" prop="arrows">
|
||||
<el-select v-model="form.arrows" placeholder="请选择活动区域">
|
||||
<el-option label="from" value="from"></el-option>
|
||||
<el-option label="to" value="to"></el-option>
|
||||
<el-option label="from;to" value="from;to"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="color">
|
||||
<el-color-picker
|
||||
v-model="form.color"
|
||||
:predefine="predefineColors">
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="Label">
|
||||
<el-input v-model="form.label"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<!-- end--表单-->
|
||||
|
||||
<!--底部按钮-->
|
||||
<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">
|
||||
<span>{{$t('overall.cancel')}}</span>
|
||||
</button>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"addLine",
|
||||
props:{
|
||||
lineData:{},
|
||||
},
|
||||
watch:{
|
||||
lineData:{
|
||||
handler(n){
|
||||
this.form={
|
||||
arrows:n.arrows,
|
||||
label:n.label,
|
||||
color:n.color,
|
||||
lineId:n.id,
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
form:{
|
||||
arrows:'',
|
||||
label:'',
|
||||
color:'#1e90ff',
|
||||
lineId:'',
|
||||
},
|
||||
predefineColors: [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
],
|
||||
rules:{
|
||||
arrows: [
|
||||
{ required: true, message: '请输入活动名称', trigger: 'change' },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onSubmit(){
|
||||
let model=Object.assign({id:this.form.lineId},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
|
||||
this.$emit('addLine',model)
|
||||
},
|
||||
/*关闭弹框*/
|
||||
esc(refresh) {
|
||||
this.$emit("close", refresh);
|
||||
},
|
||||
clickOutside() {
|
||||
this.esc(false);
|
||||
},
|
||||
del(){
|
||||
this.$emit('del');
|
||||
this.esc();
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nz-btn-edit-ok{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right:0;
|
||||
}
|
||||
.nz-btn-edit-esc{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
/* begin--搜索框*/
|
||||
.endpoint-asset-search {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-top: -16px;
|
||||
}
|
||||
.endpoint-asset-search button {
|
||||
height: 22px !important;
|
||||
}
|
||||
.endpoint-asset-search-dropdown {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
width: 44px;
|
||||
left: 0;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item {
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
cursor: default;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
.endpoint-asset-label-txt {
|
||||
display: inline-block;
|
||||
width: 19px;
|
||||
text-align: center;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item:first-of-type {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item:last-of-type {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item:hover {
|
||||
background-color: #222;
|
||||
color: #ff9900;
|
||||
}
|
||||
.endpoint-asset-search-input {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* end--搜索框*/
|
||||
|
||||
/* begin--table*/
|
||||
.endpoint-sub-table {
|
||||
padding-top: 30px;
|
||||
height: 440px;
|
||||
}
|
||||
.line-100 {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.endpoint-sub-table-head {
|
||||
line-height: 28px;
|
||||
height: 30px;
|
||||
}
|
||||
.endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
|
||||
line-height: 28px;
|
||||
height: 30px;
|
||||
color: #656565;
|
||||
}
|
||||
.endpoint-sub-table-row:hover {
|
||||
background-color: #dadada;
|
||||
cursor: default;
|
||||
}
|
||||
.endpoint-sub-table-row-active {
|
||||
background-color: #dadada;
|
||||
}
|
||||
.endpoint-sub-table-row-selected {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
}
|
||||
.endpoint-sub-table-col {
|
||||
display: inline-block;
|
||||
width: calc(50% - 15px);
|
||||
padding-left: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.endpoint-sub-table-paginate-all {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 17px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.endpoint-sub-table-body {
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
height: calc(100% - 34px);
|
||||
}
|
||||
.endpoint-sub-table-body-dialog {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e9ebec;
|
||||
position: absolute;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.endpoints-clear-btn {
|
||||
margin: 6px 0 0 7px;
|
||||
}
|
||||
/* end--table*/
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.right-box-edit-endpoint .el-pagination__total {
|
||||
float: left;
|
||||
}
|
||||
right-box-edit-endpoint .pagination {
|
||||
padding-top: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
|
||||
font-size: 13px;
|
||||
min-width: 20px !important;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(154,154,154,0.20);
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
color: white !important;
|
||||
}
|
||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
|
||||
color: #666;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
|
||||
line-height: 20px;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination .el-pager .more::before {
|
||||
line-height: 20px;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pager li.number{
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pager li.number.active{
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: $global-text-color-active;
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
|
||||
height: 20px;
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
</style>
|
||||
|
||||
472
nezha-fronted/src/components/common/project/addNode.vue
Normal file
472
nezha-fronted/src/components/common/project/addNode.vue
Normal file
@@ -0,0 +1,472 @@
|
||||
<template>
|
||||
<div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
|
||||
<!-- begin--顶部按钮-->
|
||||
<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-txt">{{$t('overall.delete')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{$t("project.endpoint.editEndpoint") + " ID：" + nodeData.id}}</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin--表单-->
|
||||
<el-scrollbar class="right-box-form-box">
|
||||
<el-form ref="form" :model="form" label-width="160px" :rules="rules">
|
||||
<el-form-item label="Module Name" prop="modelId">
|
||||
<el-select v-model="form.modelId" placeholder="" popper-class="asset-dropdown">
|
||||
<el-option
|
||||
v-for="item in nodesArray"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Label" prop="imgId">
|
||||
<el-select v-model="form.imgId" placeholder="" popper-class="asset-dropdown">
|
||||
<el-option
|
||||
v-for="item in iconArray"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id">
|
||||
<span style="float: left">
|
||||
<img :src="item.image" />
|
||||
</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!--<el-form-item label="image">-->
|
||||
<!--<el-input v-model="form.image"></el-input>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<div class="right-box-sub-title">-->
|
||||
<!--<span>{{$t('alert.config.expr')}}</span>-->
|
||||
<!--<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>-->
|
||||
<!--</div>-->
|
||||
<!--<el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">-->
|
||||
<!--<promql-input-->
|
||||
<!--:ref="'promql-'+(index-1)"-->
|
||||
<!--:id="promqlKeys[index-1]"-->
|
||||
<!--:key="promqlKeys[index-1]"-->
|
||||
<!--:expression-list="expressions"-->
|
||||
<!--:index="index-1"-->
|
||||
<!--:styleType="2"-->
|
||||
<!--:plugins="['metric-selector', 'metric-input', 'remove']"-->
|
||||
<!--@change="expressionChange"-->
|
||||
<!--@removeExpression="removeExpression"-->
|
||||
<!--></promql-input>-->
|
||||
<!--<el-row>-->
|
||||
<!--<template v-if="editChart.type != 'singleStat'">-->
|
||||
<!--<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">-->
|
||||
<!--{{$t('dashboard.panel.chartForm.legend')}} -->
|
||||
<!--<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">-->
|
||||
<!--<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>-->
|
||||
<!--</el-popover>-->
|
||||
<!--</el-col>-->
|
||||
<!--<el-col style="width: calc(100% - 120px);">-->
|
||||
<!--<el-input v-model="legends[index-1]" type="text" size="small"></el-input>-->
|
||||
<!--</el-col>-->
|
||||
<!--</template>-->
|
||||
<!--<template v-else>-->
|
||||
<!--<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">-->
|
||||
<!--{{$t('dashboard.panel.chartForm.statistics')}} -->
|
||||
<!--</el-col>-->
|
||||
<!--<el-col style="width: calc(100% - 120px);">-->
|
||||
<!--<el-select popper-class="chart-box-dropdown-mini" v-model="statistics" placeholder="" size="small">-->
|
||||
<!--<el-option v-for="item in statisticsList" :key="item.value" :label="item.label" :value="item.value">-->
|
||||
<!--<span class="panel-dropdown-label-txt" >{{item.label}}</span>-->
|
||||
<!--</el-option>-->
|
||||
<!--</el-select>-->
|
||||
<!--</el-col>-->
|
||||
<!--</template>-->
|
||||
<!--</el-row>-->
|
||||
<!--</el-row>-->
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<!-- end--表单-->
|
||||
|
||||
<!--底部按钮-->
|
||||
<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">
|
||||
<span>{{$t('overall.cancel')}}</span>
|
||||
</button>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import promqlInput from "@compotents/page/dashboard/explore/promqlInput";
|
||||
import a from './a.png'
|
||||
import b from './b.png'
|
||||
import c from './c.png'
|
||||
import d from './d.png'
|
||||
import e from './e.png'
|
||||
import f from './f.png'
|
||||
export default {
|
||||
name:"addNode",
|
||||
components:{
|
||||
// 'promql-input': promqlInput,
|
||||
},
|
||||
props:{
|
||||
nodeData:{}
|
||||
},
|
||||
watch:{
|
||||
nodeData:{
|
||||
handler(n){
|
||||
for(let key in this.form){
|
||||
this.form[key]=n[key]
|
||||
}
|
||||
this.form.modelId=n.id;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
form:{
|
||||
modelId:'',
|
||||
imgId:'',
|
||||
},
|
||||
promqlKeys:[],
|
||||
expressions: [],
|
||||
rules:{
|
||||
modelId:[
|
||||
{ required: true, message: '请选择module', trigger: 'blur' },
|
||||
],
|
||||
imgId:[
|
||||
{ required: true, message: '请选择module', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
nodesArray:[
|
||||
{ id: 1, label: "model1",
|
||||
image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
|
||||
shape:'image',shapeProperties:{useImageSize:false},
|
||||
x:1,y:-63,
|
||||
},
|
||||
{id: 2, label: "model2", },
|
||||
{id: 3, label: "model3",},
|
||||
{id: 4, label: "model4", },
|
||||
{id: 5, label: "model5",},
|
||||
{id: 6, label: "model6",},
|
||||
{id: 7, label: "model7",},
|
||||
|
||||
{id: 9, label: "model9", },
|
||||
{id: 10, label: "model10", },
|
||||
{id: 11, label: "model11",},
|
||||
{id: 12, label: "model12",},
|
||||
{id: 13, label: "model13",},
|
||||
{id: 14, label: "model14",},
|
||||
],
|
||||
iconArray:[
|
||||
{id:1,image:a,label:'model1',},
|
||||
{id:2,image:b,label:'model2',},
|
||||
{id:3,image:c,label:'model3',},
|
||||
{id:4,image:d,label:'model4',},
|
||||
{id:5,image:e,label:'model5',},
|
||||
{id:6,image:f,label:'model6',},
|
||||
// {id:7,img:'./a.png',label:'model',},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onSubmit(){
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let module=this.nodesArray.find(item=>item.id===this.form.modelId);
|
||||
let img=this.iconArray.find(item=>item.id===this.form.imgId);
|
||||
let model=Object.assign({...this.form},{...module},{...img},{id:this.form.modelId,shape:'image',shapeProperties:{useImageSize:false}},);
|
||||
this.$emit('addModel',model)
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
expressionChange: function () {
|
||||
|
||||
},
|
||||
addExpression() {
|
||||
this.expressions.push('');
|
||||
this.legends.push('');
|
||||
this.promqlKeys.push(getUUID());
|
||||
this.elementIds.push("");
|
||||
this.promqlCount++;
|
||||
},
|
||||
removeExpression(index) {
|
||||
if (this.promqlCount > 1) {
|
||||
this.expressions.splice(index, 1);
|
||||
this.legends.splice(index, 1);
|
||||
this.promqlKeys.splice(index, 1);
|
||||
this.elementIds.splice(index, 1);
|
||||
this.promqlCount--;
|
||||
this.$nextTick(() => {
|
||||
this.expressions.forEach((ex, index) => {
|
||||
if (ex) {
|
||||
this.$refs[`promql-${index}`][0].metricChange(ex);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
/*关闭弹框*/
|
||||
esc(refresh) {
|
||||
this.$emit("close", refresh);
|
||||
},
|
||||
clickOutside() {
|
||||
this.esc(false);
|
||||
},
|
||||
del(){
|
||||
this.$emit('del');
|
||||
this.esc();
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nz-btn-edit-ok{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right:0;
|
||||
}
|
||||
.nz-btn-edit-esc{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
/* begin--搜索框*/
|
||||
.endpoint-asset-search {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-top: -16px;
|
||||
}
|
||||
.endpoint-asset-search button {
|
||||
height: 22px !important;
|
||||
}
|
||||
.endpoint-asset-search-dropdown {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
width: 44px;
|
||||
left: 0;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item {
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
cursor: default;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
.endpoint-asset-label-txt {
|
||||
display: inline-block;
|
||||
width: 19px;
|
||||
text-align: center;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item:first-of-type {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item:last-of-type {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item:hover {
|
||||
background-color: #222;
|
||||
color: #ff9900;
|
||||
}
|
||||
.endpoint-asset-search-input {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* end--搜索框*/
|
||||
|
||||
/* begin--table*/
|
||||
.endpoint-sub-table {
|
||||
padding-top: 30px;
|
||||
height: 440px;
|
||||
}
|
||||
.line-100 {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.endpoint-sub-table-head {
|
||||
line-height: 28px;
|
||||
height: 30px;
|
||||
}
|
||||
.endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
|
||||
line-height: 28px;
|
||||
height: 30px;
|
||||
color: #656565;
|
||||
}
|
||||
.endpoint-sub-table-row:hover {
|
||||
background-color: #dadada;
|
||||
cursor: default;
|
||||
}
|
||||
.endpoint-sub-table-row-active {
|
||||
background-color: #dadada;
|
||||
}
|
||||
.endpoint-sub-table-row-selected {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
}
|
||||
.endpoint-sub-table-col {
|
||||
display: inline-block;
|
||||
width: calc(50% - 15px);
|
||||
padding-left: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.endpoint-sub-table-paginate-all {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 17px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.endpoint-sub-table-body {
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
height: calc(100% - 34px);
|
||||
}
|
||||
.endpoint-sub-table-body-dialog {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e9ebec;
|
||||
position: absolute;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.endpoints-clear-btn {
|
||||
margin: 6px 0 0 7px;
|
||||
}
|
||||
/* end--table*/
|
||||
|
||||
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple {
|
||||
background: white;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.common-float-left {
|
||||
float: left;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.el-inner {
|
||||
width: 200px;
|
||||
border-top-width: 0px;
|
||||
border-left-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 10px;
|
||||
border-color:red;
|
||||
/*outline: medium;*/
|
||||
}
|
||||
|
||||
.element-bottom-border {
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #dfe7f2;
|
||||
margin-top: 15px;
|
||||
}
|
||||
/*metric样式--begin*/
|
||||
.element-item {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px dashed #dfe7f2;
|
||||
width: 100%;
|
||||
}
|
||||
/*metric样式--end*/
|
||||
.label-center{
|
||||
vertical-align: middle;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.z-top {
|
||||
z-index: 2900;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.right-box-edit-endpoint .el-pagination__total {
|
||||
float: left;
|
||||
}
|
||||
right-box-edit-endpoint .pagination {
|
||||
padding-top: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
|
||||
font-size: 13px;
|
||||
min-width: 20px !important;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(154,154,154,0.20);
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
color: white !important;
|
||||
}
|
||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
|
||||
color: #666;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
|
||||
line-height: 20px;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination .el-pager .more::before {
|
||||
line-height: 20px;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pager li.number{
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pager li.number.active{
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: $global-text-color-active;
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
|
||||
height: 20px;
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
</style>
|
||||
BIN
nezha-fronted/src/components/common/project/b.png
Normal file
BIN
nezha-fronted/src/components/common/project/b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 825 B |
BIN
nezha-fronted/src/components/common/project/c.png
Normal file
BIN
nezha-fronted/src/components/common/project/c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
597
nezha-fronted/src/components/common/project/chart.scss
Normal file
597
nezha-fronted/src/components/common/project/chart.scss
Normal file
@@ -0,0 +1,597 @@
|
||||
.clearfix:after{
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.clearfix{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.hidden{
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible{
|
||||
visibility: visible;
|
||||
}
|
||||
.legend-shape{
|
||||
display:inline-block;
|
||||
margin-right:5px;
|
||||
border-radius:10px;
|
||||
width:15px;
|
||||
height:5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ft-gr{
|
||||
color:lightgray;
|
||||
}
|
||||
.legend-container{
|
||||
width: calc(100% - 30px);
|
||||
max-height:80px;
|
||||
min-height:25px;
|
||||
font-size:12px;
|
||||
text-align:left;
|
||||
left: 10px;
|
||||
bottom: 0px;
|
||||
line-height: 18px;
|
||||
position: absolute;
|
||||
padding-bottom:3px;
|
||||
}
|
||||
.nz-icon-warning{
|
||||
color: #e6a23c;
|
||||
}
|
||||
.legend-container-screen.legend-container {
|
||||
max-height: 80px;
|
||||
min-height:25px;
|
||||
}
|
||||
.legend-item{
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
/*width:100%;*/
|
||||
margin-right:10px;
|
||||
overflow-x:hidden;
|
||||
cursor:pointer;
|
||||
display:inline-block;
|
||||
float:left;
|
||||
line-height: 20px;
|
||||
}
|
||||
.nz-chart-dropdown {
|
||||
height: 180px;
|
||||
li {
|
||||
padding-left:15px !important;
|
||||
padding-right:0px !important;
|
||||
width:140px;
|
||||
text-align: left;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nz-chart-dropdown-one {
|
||||
height: 36px;
|
||||
li {
|
||||
padding-left:15px !important;
|
||||
padding-right:0px !important;
|
||||
width:140px;
|
||||
text-align: left;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.panel-info-corner {
|
||||
color: #767980;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
}
|
||||
.panel-info-corner--error {
|
||||
display: block;
|
||||
color: #fff;
|
||||
}
|
||||
.panel-info-corner .fa {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
font-size: 75%;
|
||||
z-index: 3;
|
||||
}
|
||||
.panel-info-corner .fa-model {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: 4px;
|
||||
font-size: 75%;
|
||||
z-index: 3;
|
||||
}
|
||||
.fa, .fa-model{
|
||||
display: inline-block;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.panel-info-corner--error .panel-info-corner-inner {
|
||||
border-left: 28px solid #e02f44;
|
||||
border-right: none;
|
||||
border-bottom: 28px solid rgba(0,0,0,0);
|
||||
}
|
||||
.panel-info-corner-inner {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.chart-error-popper[x-placement^=top] .popper__arrow::after {
|
||||
border-top-color: #e02f44;
|
||||
bottom:0px;
|
||||
}
|
||||
.chart-error-popper[x-placement^=bottom] .popper__arrow::after {
|
||||
border-bottom-color: #e02f44;
|
||||
}
|
||||
.popper__arrow::after{
|
||||
border:solid 3px yellow
|
||||
}
|
||||
.chart-error-popper{
|
||||
background-color:#e02f44;
|
||||
color:#FFF;
|
||||
word-wrap:break-word;
|
||||
word-break:break-word;
|
||||
max-width:280px;
|
||||
border: 1px solid #e02f44;
|
||||
}
|
||||
.chart-warring-popper[x-placement^=top] .popper__arrow::after {
|
||||
border-top-color: #e6a23c;
|
||||
bottom:0px;
|
||||
}
|
||||
.chart-warring-popper[x-placement^=bottom] .popper__arrow::after {
|
||||
border-bottom-color: #e6a23c;
|
||||
}
|
||||
.popper__arrow::after{
|
||||
border:solid 3px yellow
|
||||
}
|
||||
.chart-warring-popper{
|
||||
background-color:#e6a23c;
|
||||
color:#FFF;
|
||||
word-wrap:break-word;
|
||||
word-break:break-word;
|
||||
max-width:280px;
|
||||
border: 1px solid #e6a23c;
|
||||
}
|
||||
.moreTitle{
|
||||
.panel-info-corner--error .panel-info-corner-inner {
|
||||
border-left: 28px solid #e6a23c;
|
||||
border-right: none;
|
||||
border-bottom: 28px solid rgba(0,0,0,0);
|
||||
}
|
||||
.panel-info-corner-inner {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.nz-icon-warning:before {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.nz-chart-resize {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.resize-box {
|
||||
border: 1px solid #d8dce1;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.resize-shadow {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.resize-shadow-active {
|
||||
background-color: #f5f9ff;
|
||||
border: 1px solid #b7d0f7;
|
||||
box-shadow: 1px 1px 1px #d3e1f8;
|
||||
}
|
||||
.drag-disabled .el-dropdown-link {
|
||||
cursor: default !important;
|
||||
}
|
||||
.resize-box {
|
||||
.pagination {
|
||||
padding-top: 0;
|
||||
}
|
||||
.success {
|
||||
background-color: #50d050;
|
||||
color: white;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.danger {
|
||||
background-color: #d64f40;
|
||||
color: white;
|
||||
padding:2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.chart-table, .chart-alert-info {
|
||||
width: 100%;
|
||||
.table-container {
|
||||
padding: 0 6px;
|
||||
box-sizing: border-box;
|
||||
.nz-table {
|
||||
margin-top: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-single-stat {
|
||||
width: 100%;
|
||||
.single-stat-container {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
display: table;
|
||||
text-align: center;
|
||||
width: calc(100% - 16px);
|
||||
.single-stat-content{
|
||||
text-align:center;
|
||||
vertical-align: middle;
|
||||
display:table-cell;
|
||||
font-size:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-container.chart-detail {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
.chart-title:hover {
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.chart-title:not(.drag-disabled) {
|
||||
cursor: move;
|
||||
}
|
||||
.chart-title {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 30px;
|
||||
padding: 1px 3px 0 3px;
|
||||
box-sizing: border-box;
|
||||
.nz-chart-top{
|
||||
width:100%;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: move;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
.chart-title-text {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
color: #52545c;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
max-width:calc(100% - 20px);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
.chart-title-icon{
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-info {
|
||||
padding-top: 6px;
|
||||
width: 100%;
|
||||
height: calc(100% - 34px);
|
||||
}
|
||||
.active-icon {
|
||||
margin: 0;
|
||||
}
|
||||
.chart-sub {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 5px;
|
||||
:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.chart-sub-title {
|
||||
background-color: #efefef;
|
||||
font-size: 13px;
|
||||
color: #505255;
|
||||
padding-left: 2px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
user-select: none;
|
||||
}
|
||||
.chart-sub-content, .chart-third-content, .chart-forth-content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
>.content-item>.item-tip {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
>.content-item>.item-tip:not(.content-item-value-muti) {
|
||||
padding: 0 3px 0 13px;
|
||||
}
|
||||
>.content-item {
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
border-top: 1px solid rgb(235, 238, 245);
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
.item-tip> {
|
||||
.item-tip-hide {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 34px;
|
||||
min-width: 50px;
|
||||
white-space: normal;
|
||||
}
|
||||
.item-tip-key {
|
||||
left: 17%;
|
||||
transform: translateX(-50%);
|
||||
width: 33%;
|
||||
}
|
||||
.item-tip-value {
|
||||
left: 67%;
|
||||
width: 63%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.item-tip-hide::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed dashed solid dashed;
|
||||
border-color: white transparent transparent transparent;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 10px);
|
||||
}
|
||||
}
|
||||
.item-tip:hover>.item-tip-show {
|
||||
display: block;
|
||||
}
|
||||
.item-tip.deep {
|
||||
padding-left: 26px;
|
||||
box-sizing: border-box;
|
||||
height: 26px;
|
||||
}
|
||||
.item-tip.deepp {
|
||||
padding-left: 39px;
|
||||
box-sizing: border-box;
|
||||
height: 26px;
|
||||
}
|
||||
.item-tip.deep:nth-of-type(2) {
|
||||
padding-left: 13px;
|
||||
box-sizing: border-box;
|
||||
height: 26px;
|
||||
}
|
||||
.item-tip.deepp:last-of-type {
|
||||
padding-left: 13px;
|
||||
box-sizing: border-box;
|
||||
height: 26px;
|
||||
}
|
||||
.tag-value:hover .item-tip-show {
|
||||
display: block;
|
||||
}
|
||||
.tag-value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.content-item-key {
|
||||
color: #666;
|
||||
width: 35%;
|
||||
height: 26px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.content-item-key .no-overflow, .content-item-value .no-overflow {
|
||||
text-overflow: unset;
|
||||
white-space: normal;
|
||||
}
|
||||
.content-item-value {
|
||||
.item-value-sub {
|
||||
padding: 0 3px 0 13px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.item-value-sub:not(:last-of-type) {
|
||||
border-bottom: 1px solid rgb(235, 238, 245);
|
||||
}
|
||||
.nz-table {
|
||||
th .cell {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
td .cell {
|
||||
min-height: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.el-table__body {
|
||||
background-color: white;
|
||||
}
|
||||
.el-table__body tr:last-of-type td {
|
||||
border: none;
|
||||
}
|
||||
.el-table__body tr td {
|
||||
background-color: white;
|
||||
}
|
||||
.el-table__body tr:hover>td {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-left: 1px solid rgb(235, 238, 245);
|
||||
color: #1a1a1a;
|
||||
width: 65%;
|
||||
height: 99%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-sub-content {
|
||||
>.content-item:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
>.content-item:last-of-type {
|
||||
border-bottom: 1px solid rgb(235, 238, 245);
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-url {
|
||||
.url-container {
|
||||
padding: 0 8px 8px 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info ,.vis-network{
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
.chartTitle:hover {
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.chartTitle {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 30px;
|
||||
height: 28px;
|
||||
padding: 1px 3px 0 3px;
|
||||
box-sizing: border-box;
|
||||
.nz-chart-top{
|
||||
width:100%;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: move;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
color: #52545c;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
.chart-title-text{
|
||||
max-width:calc(100% - 20px);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chart-title-icon{
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line-area {
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
min-height: 95px;
|
||||
padding-left:8px;
|
||||
padding-right:8px;
|
||||
}
|
||||
.button-panel-height{
|
||||
height:26px;
|
||||
}
|
||||
.button-panel-height button{
|
||||
height:26px;
|
||||
}
|
||||
.edit {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 17px;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
.chart-select {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 25px;
|
||||
z-index: 10;
|
||||
font-size: 14px;
|
||||
.chart-select-btn {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: #5aacff;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*没有数据显示*/
|
||||
.null {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-tool {
|
||||
margin-right: 40px;
|
||||
}
|
||||
.line-chart-block-modal {
|
||||
.el-dialog{
|
||||
height: 80%;
|
||||
}
|
||||
.line-area {
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
height: 100%;
|
||||
span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/
|
||||
display: block !important;
|
||||
width: 50%;
|
||||
font-size: 14px !important;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word !important;
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
}
|
||||
.element-top-border {
|
||||
padding-bottom: 5px;
|
||||
border-top: 1px solid #dfe7f2;
|
||||
margin-top:-25px;
|
||||
}
|
||||
|
||||
.element-bottom-border {
|
||||
border-bottom: 1px solid #dfe7f2;
|
||||
margin-bottom:-20px;
|
||||
}
|
||||
.pt10{
|
||||
padding-top:10px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
|
||||
.el-dialog__header{
|
||||
padding: 20px 20px 0px;
|
||||
}
|
||||
|
||||
}
|
||||
BIN
nezha-fronted/src/components/common/project/d.png
Normal file
BIN
nezha-fronted/src/components/common/project/d.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 551 B |
BIN
nezha-fronted/src/components/common/project/e.png
Normal file
BIN
nezha-fronted/src/components/common/project/e.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 817 B |
BIN
nezha-fronted/src/components/common/project/f.png
Normal file
BIN
nezha-fronted/src/components/common/project/f.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 858 B |
143
nezha-fronted/src/components/common/project/projectFacade.vue
Normal file
143
nezha-fronted/src/components/common/project/projectFacade.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div style="background: #F9F9F9;height: 100%">
|
||||
<div class="top-tools">
|
||||
<template>
|
||||
<div class="top-tool-main-right">
|
||||
<div class="top-tool-search relative-position margin-r-20">
|
||||
<el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput" @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable >
|
||||
<i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="project-facade">
|
||||
<div class="facade-top">
|
||||
<div>123</div>
|
||||
<div>456</div>
|
||||
</div>
|
||||
<vis-network
|
||||
:panel-id="item.id"
|
||||
:chart-data="item"
|
||||
:chart-index="0"
|
||||
class="facade-content"
|
||||
>
|
||||
</vis-network>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import visNetwork from './visNetwork'
|
||||
import draggable from 'vuedraggable'
|
||||
import pickTime from "@/components/common/pickTime";
|
||||
import bus from '@/libs/bus';
|
||||
import timePicker from '@/components/common/timePicker'
|
||||
export default {
|
||||
name:"projectFacade",
|
||||
components: {
|
||||
visNetwork,
|
||||
draggable,
|
||||
'pick-time':pickTime,
|
||||
'time-picker':timePicker,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
item:{ // 拓扑图
|
||||
id: -10,
|
||||
panelId: 0,
|
||||
title: this.$t("alert.config.chart.alertNumTrend"),
|
||||
span: 8,
|
||||
height: 800,
|
||||
type: "topology",
|
||||
prev: -11,
|
||||
next: -1,
|
||||
unit: 1,
|
||||
buildIn: 1,
|
||||
elements: [{
|
||||
id: '',
|
||||
expression: `nz_alert_nums{id="${3333}"}`,
|
||||
type: ''
|
||||
}]
|
||||
},
|
||||
panelData: [],
|
||||
toAdd() {
|
||||
this.$refs.panelBox.show(true);
|
||||
this.panel = {
|
||||
id: '',
|
||||
name: ''
|
||||
};
|
||||
this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
|
||||
},
|
||||
showPanel: { //panel下拉列表
|
||||
id: '',
|
||||
name: ''
|
||||
},
|
||||
filter: { // 过滤条件
|
||||
panelId: 0,
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
searchName: ''
|
||||
},
|
||||
searchTime: [
|
||||
new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
|
||||
new Date(bus.computeTimezone(new Date().getTime()))
|
||||
],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
focusInput() {
|
||||
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
|
||||
classVal=classVal.replace('query-input-inactive','query-input-active');
|
||||
document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
|
||||
this.$refs.queryPanel.focus();
|
||||
},
|
||||
blurInput() {
|
||||
if(!this.filter.searchName || this.filter.searchName == ''){
|
||||
setTimeout(function(){
|
||||
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
|
||||
classVal=classVal.replace('query-input-active','query-input-inactive');
|
||||
document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
|
||||
},100)
|
||||
}
|
||||
},
|
||||
clearInput() {
|
||||
this.$refs.queryPanel.focus();
|
||||
},
|
||||
dateChange(val) {
|
||||
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
|
||||
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
|
||||
this.filter.panelId = this.showPanel.id;
|
||||
// this.getData(this.filter);
|
||||
console.log(this.filter)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project-facade{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.facade-top{
|
||||
min-height: 178px;
|
||||
display: flex;
|
||||
margin: 12px 0;
|
||||
height: 16%;
|
||||
}
|
||||
.facade-top > div{
|
||||
height: 100%;
|
||||
width: 18%;
|
||||
min-width: 280px;
|
||||
background: #FFFFFF;
|
||||
margin-right: 9px;
|
||||
}
|
||||
.facade-content{
|
||||
flex: 1;
|
||||
min-height: 800px;
|
||||
}
|
||||
</style>
|
||||
668
nezha-fronted/src/components/common/project/topology.vue
Normal file
668
nezha-fronted/src/components/common/project/topology.vue
Normal file
@@ -0,0 +1,668 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="editTopology">
|
||||
<span v-show="!selectNodeTitle" class="editTopologyModule">
|
||||
Module element :
|
||||
<span class="editTopologyAdd" @click="addModelShow">Add</span>
|
||||
<span class="editTopologyRemove" @click="nodeDel">Remove</span>
|
||||
</span>
|
||||
<span v-show="!selectNodeTitle" class="editTopologyLine">
|
||||
Line :
|
||||
<span class="editTopologyAdd" @click="addLineTitleShow">Add</span>
|
||||
<span class="editTopologyRemove" @click="lineDel">Remove</span>
|
||||
</span>
|
||||
<span class="editTopologyLineCancel" v-show="selectNodeTitle">Please select two nodes <span class="editTopologyCancel" @click="closeAddLine">Cancel</span></span>
|
||||
</div>
|
||||
<div class="network" v-clickoutside="networkPopClose">
|
||||
<!--图拓扑图-->
|
||||
<div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
|
||||
<!--拓扑图工具-->
|
||||
<div
|
||||
id="networkPop"
|
||||
class="networkPop"
|
||||
:style="{transform:'scale('+zoom+')'}"
|
||||
v-show="networkPopShow"
|
||||
>
|
||||
<i class="nz-icon nz-icon-hexagonBorder" v-for="item in popData" :style="{top:item.top,left:item.left}" @click="popClick(item.id)">
|
||||
<i class="nz-icon nz-icon-liubianxing"></i>
|
||||
<i :class="[item.className,{'nz-icon':item.className},'noMove']"></i>
|
||||
</i>
|
||||
<!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>-->
|
||||
</div>
|
||||
<!--拓扑图选中-->
|
||||
<div class="selNode" id="nodeArr1" v-show="NodeArr[0]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
|
||||
<div class="selNodeTop"></div>
|
||||
<div class="selNodeRight"></div>
|
||||
<div class="selNodeBottom"></div>
|
||||
<div class="selNodeLeft"></div>
|
||||
</div>
|
||||
<div class="selNode" id="nodeArr2" v-show="NodeArr[1]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
|
||||
<div class="selNodeTop"></div>
|
||||
<div class="selNodeRight"></div>
|
||||
<div class="selNodeBottom"></div>
|
||||
<div class="selNodeLeft"></div>
|
||||
</div>
|
||||
<!--图谱图右侧-->
|
||||
<!--<div class="networkContent">33333</div>-->
|
||||
<!--model上的图标-->
|
||||
<i class="nz-icon nz-icon-shuidi"
|
||||
v-show="item.show"
|
||||
v-for="(item,index) in modelTop"
|
||||
:style="{top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px',transform:'scale('+zoom+')'}"
|
||||
:ref="'modelTopId'+index"
|
||||
@mousedown="modelTopMouseDown(item,index)"
|
||||
@mouseup="modelTopMouseUp(item,index)"
|
||||
>
|
||||
<i class="nz-icon nz-icon-model"></i>
|
||||
</i>
|
||||
</div>
|
||||
<transition name="right-box">
|
||||
<add-model v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd"></add-model>
|
||||
</transition>
|
||||
<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>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vis from 'vis'
|
||||
import addNode from './addNode'
|
||||
import addLine from './addLine'
|
||||
export default {
|
||||
name:"topology",
|
||||
components: {
|
||||
'add-model':addNode,
|
||||
'add-line':addLine,
|
||||
},
|
||||
props:{
|
||||
nodesArray:{
|
||||
type:Array
|
||||
},
|
||||
edgesArray:{
|
||||
type:Array
|
||||
},
|
||||
isFullScreen:{
|
||||
type:Boolean,
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
NodeArr(n){
|
||||
if(n.length==2){
|
||||
this.lineData={
|
||||
arrows:'',
|
||||
label:'',
|
||||
color:'#1e90ff',
|
||||
lineId:'',
|
||||
id:'',
|
||||
}
|
||||
this.addLineShow=true;
|
||||
this.selectNodeTitle=false;
|
||||
this.isLineAdd=true;
|
||||
}
|
||||
this.selNodeArrUpdate()
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
zoom:1,
|
||||
domScale:1,
|
||||
selectNodeTitle:false,
|
||||
// 拓扑图工具
|
||||
networkPopTop:0,
|
||||
networkPopLeft:0,
|
||||
networkPopShow:false,
|
||||
addNodeShow:false,
|
||||
addLineShow:false,
|
||||
NodeArrShow:false,
|
||||
cursorMove:false,
|
||||
NodeArr:[],
|
||||
selNodeId:'',
|
||||
lineData:{
|
||||
arrows:'',
|
||||
label:'',
|
||||
color:'#1e90ff',
|
||||
lineId:'',
|
||||
id:'',
|
||||
},
|
||||
isLineAdd:true,
|
||||
isNodeAdd:true,
|
||||
nodeData:{
|
||||
modelId:'',
|
||||
label:'',
|
||||
x:'',
|
||||
y:'',
|
||||
image:'',
|
||||
},
|
||||
popData:[
|
||||
{top:'-20px', left:'-17px',className:'nz-icon-edit',id:'edit'},
|
||||
{top:'-20px', left:'28px',className:'nz-icon-chart',id:'2'},
|
||||
{top:'18px', left:'52px',className:'nz-icon-chart',id:'3'},
|
||||
{top:'56px', left:'28px',className:'',id:'4'},
|
||||
{top:'56px', left:'-17px',className:'nz-icon-chart',id:'5'},
|
||||
{top:'18px', left:'-38px',className:'nz-icon-chart',id:'6'},
|
||||
],
|
||||
modelTop:[],
|
||||
//viewsCenter
|
||||
viewsCenter:{
|
||||
x:0,y:0
|
||||
},
|
||||
// 拓扑图数据
|
||||
nodes:[],
|
||||
edges:[],
|
||||
// network:null,
|
||||
container:null,
|
||||
options:{},
|
||||
data:{}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//拓扑图方法
|
||||
init(type){
|
||||
let this_ = this;
|
||||
this_.nodes = new Vis.DataSet(this_.nodesArray);
|
||||
this_.edges = new Vis.DataSet(this_.edgesArray);
|
||||
this_.container = this.$refs.visNetwork;
|
||||
this_.networkPop = document.getElementById('networkPop');
|
||||
this_.data = {
|
||||
nodes: this_.nodes,
|
||||
edges: this_.edges
|
||||
};
|
||||
this_.options = {
|
||||
autoResize: true,
|
||||
clickToUse:true,
|
||||
groups:{
|
||||
useDefaultGroups: true,
|
||||
myGroupId:{
|
||||
/*node options*/
|
||||
}
|
||||
},
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 40,
|
||||
borderWidth: 2,
|
||||
font:{
|
||||
size:20,
|
||||
},
|
||||
},
|
||||
|
||||
edges: {
|
||||
width: 2,
|
||||
smooth:{ //设置两个节点之前的连线的状态
|
||||
enabled: true,//默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
|
||||
roundness:0.5,
|
||||
type: "curvedCW",
|
||||
},
|
||||
selfReferenceSize:40,
|
||||
},
|
||||
layout:{
|
||||
randomSeed: 666,
|
||||
},
|
||||
physics: { //计算节点之前斥力，进行自动排列的属性
|
||||
enabled: false, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
|
||||
barnesHut: {
|
||||
gravitationalConstant: -4000,
|
||||
centralGravity: 0.3,
|
||||
springLength: 120,
|
||||
springConstant: 0.04,
|
||||
damping: 0.09,
|
||||
avoidOverlap: 0
|
||||
}
|
||||
},
|
||||
|
||||
interaction:{
|
||||
dragNodes: true, //是否能拖动节点
|
||||
dragView: true, //是否能拖动画布
|
||||
hover: true, //鼠标移过后加粗该节点和连接线
|
||||
multiselect: false, //按 ctrl 多选
|
||||
selectable: true, //是否可以点击选择
|
||||
selectConnectedEdges: false, //选择节点后是否显示连接线
|
||||
hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
|
||||
zoomView: true, //是否能缩放画布
|
||||
navigationButtons:true,
|
||||
},
|
||||
|
||||
manipulation: { //该属性表示可以编辑，出现编辑操作按钮
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
this_.network = new Vis.Network(this_.container, this_.data, this_.options);
|
||||
this_.network.moveTo({
|
||||
position: this_.viewsCenter,
|
||||
scale: this_.isFullScreen?1.5:1,
|
||||
offset: {x:0, y:0},
|
||||
});
|
||||
if(this_.isFullScreen) {
|
||||
console.log(this_.viewsCenter)
|
||||
}
|
||||
this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
|
||||
this_.modelTopUpdate();
|
||||
this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
|
||||
console.log(this_.zoom);
|
||||
},
|
||||
resetAllNodes() {
|
||||
this.setNetworkData(this.nodesArray,this.edgesArray);
|
||||
},
|
||||
resetAllNodesStabilize() {
|
||||
let this_ = this;
|
||||
this_.resetAllNodes();
|
||||
this_.network.stabilize();
|
||||
},
|
||||
setNetworkData(nodes,edges){//动态设置拓扑图数据
|
||||
let this_ = this;
|
||||
this.nodes = new Vis.DataSet(nodes);
|
||||
this.edges = new Vis.DataSet(edges);
|
||||
this.network.setData({
|
||||
nodes:this_.nodes,
|
||||
edges: this_.edges
|
||||
});
|
||||
this_.network.moveTo({
|
||||
position: this_.viewsCenter,
|
||||
scale: this_.isFullScreen?1.5:1,
|
||||
offset: {x:0, y:0},
|
||||
});
|
||||
console.log( this.nodes,this.edges);
|
||||
if(this_.isFullScreen) {
|
||||
console.log(this_.viewsCenter)
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
this_.modelTopUpdate();
|
||||
})
|
||||
},
|
||||
addModel(model){ // 添加model
|
||||
this.addNodeShow=false;
|
||||
if(!model){return}
|
||||
let nodesArray=[...this.nodesArray];
|
||||
if(!this.isNodeAdd){
|
||||
model={...nodesArray.find(item=>item.id===model.id),...model};
|
||||
nodesArray=nodesArray.filter(item=>item.id!==model.id);
|
||||
}else{
|
||||
model={...model,...this.network.DOMtoCanvas({x:40,y:40})};
|
||||
}
|
||||
nodesArray.push(model);
|
||||
this.$emit("setTopologyData",nodesArray,this.edgesArray);
|
||||
this.setNetworkData(nodesArray,this.edgesArray);
|
||||
},
|
||||
addModelShow(){ // 显示添加节点弹窗
|
||||
this.addNodeShow=true;
|
||||
this.isNodeAdd=true;
|
||||
this.nodeData={
|
||||
modelId:'',
|
||||
label:'',
|
||||
x:'',
|
||||
y:'',
|
||||
image:'',
|
||||
}
|
||||
},
|
||||
addLine(edges){ // 添加或者編輯line
|
||||
this.addLineShow=false;
|
||||
console.log(edges);
|
||||
if(!edges){return}
|
||||
let edgesArray =[...this.edgesArray];
|
||||
if(!this.isLineAdd){
|
||||
console.log(edgesArray.find(item=>item.id ===edges.id));
|
||||
edges={...edgesArray.find(item=>item.id===edges.id),...edges};
|
||||
edgesArray=edgesArray.filter(item=>item.id!==edges.id);
|
||||
}else{
|
||||
edges.from=this.NodeArr[0];
|
||||
edges.to=this.NodeArr[1];
|
||||
edges.dashes=[15,15];
|
||||
}
|
||||
edgesArray.push(edges);
|
||||
console.log(edgesArray,edges);
|
||||
this.$emit("setTopologyData",this.nodesArray,edgesArray);
|
||||
this.setNetworkData(this.nodesArray,edgesArray);
|
||||
this.NodeArr=[];
|
||||
this.NodeArrShow=false;
|
||||
},
|
||||
addLineTitleShow(){ // 显示添加线弹窗
|
||||
// this.addLineShow=true;
|
||||
this.selectNodeTitle=true;
|
||||
this.NodeArrShow=true;
|
||||
},
|
||||
closeAddLine(){
|
||||
this.selectNodeTitle=false;
|
||||
this.addLineShow=false;
|
||||
this.NodeArr=[];
|
||||
this.NodeArrShow=false;
|
||||
this.network.unselectAll();
|
||||
},
|
||||
setNodePosition(selId){ // 移动节点后 设置节点坐标
|
||||
let position = this.network.getPositions([selId]);
|
||||
let selItem = this.nodesArray.find((item)=>item.id===selId);
|
||||
this.nodeData = selItem;
|
||||
selItem.x=position[selId].x;
|
||||
selItem.y=position[selId].y;
|
||||
console.log(this.nodesArray);
|
||||
this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
|
||||
},
|
||||
setPopPosition(selId,params){//设置节点工具栏位置
|
||||
console.log(selId);
|
||||
if(!selId){return}
|
||||
let position=this.network.canvasToDOM(this.network.getPositions([selId])[selId]);
|
||||
this.networkPop.style.top = position.y - 85 + 7*(10-this.zoom*10)+'px';
|
||||
this.networkPop.style.left = position.x - 32*this.zoom - 5*(1-this.zoom*1) +'px';
|
||||
if(!this.isFullScreen&&this.NodeArr.length==0){
|
||||
this.networkPopShow=true;
|
||||
}
|
||||
this.NodeArr=[...this.NodeArr]
|
||||
},
|
||||
networkPopClose(){//关闭节点工具栏
|
||||
this.networkPopShow=false;
|
||||
this.selNodeId=''
|
||||
this.network.unselectAll();
|
||||
},
|
||||
//工具栏
|
||||
nodeDel(){
|
||||
let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
|
||||
let edgesArray=this.edgesArray.filter((item)=>item.from!==this.selNodeId || this.to!==this.selNodeId);
|
||||
this.$emit('setTopologyData',nodesArray, edgesArray);
|
||||
this.setNetworkData(nodesArray, edgesArray);
|
||||
this.networkPopClose();
|
||||
},
|
||||
nodeEdit(){
|
||||
this.addNodeShow=true;
|
||||
this.isNodeAdd=false;
|
||||
},
|
||||
lineDel(){
|
||||
if(!this.lineData.id){return}
|
||||
let edgesArray=this.edgesArray.filter((item)=>item.id!==this.lineData.id);
|
||||
this.$emit('setTopologyData',this.nodesArray, edgesArray);
|
||||
this.setNetworkData(this.nodesArray,edgesArray);
|
||||
},
|
||||
|
||||
// 工具的点击 对应的操作
|
||||
popClick(id){
|
||||
if(id=='edit'){
|
||||
this.nodeEdit()
|
||||
}
|
||||
|
||||
},
|
||||
modelTopUpdate(){//model上的图标 实时更新
|
||||
this.modelTop=[];
|
||||
this.nodesArray.forEach((item)=>{
|
||||
let position=this.network.canvasToDOM({x:item.x,y:item.y});
|
||||
if(item.id===1){console.log(position)};
|
||||
this.modelTop.push({
|
||||
show:true,
|
||||
x:position.x,
|
||||
y:position.y,
|
||||
id:item.id,
|
||||
})
|
||||
})
|
||||
},
|
||||
selNodeArrUpdate(){// 选中狂位置更新
|
||||
this.NodeArr.forEach((id,index)=>{
|
||||
let selNode = this.nodesArray.find(item=>item.id===id);
|
||||
let position=this.network.canvasToDOM({x:selNode.x,y:selNode.y});
|
||||
document.getElementById('nodeArr'+(index+1)).style.top=position.y+'px';
|
||||
document.getElementById('nodeArr'+(index+1)).style.left=position.x+'px';
|
||||
})
|
||||
},
|
||||
modelTopMouseDown(item,index){
|
||||
console.log(this.$refs['modelTopId'+index]);
|
||||
this.$refs['modelTopId'+index][0].addEventListener('mousemove',this.modelTopMouseMove)
|
||||
},
|
||||
modelTopMouseUp(item,index){
|
||||
console.log(this.$refs['modelTopId'+index]);
|
||||
this.$refs['modelTopId'+index][0].removeEventListener('mousemove',this.modelTopMouseMove);
|
||||
},
|
||||
modelTopMouseMove(e){
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
setTimeout(()=>{
|
||||
let this_=this;
|
||||
this.init('modal');
|
||||
this.network.on("click", function (params) {
|
||||
let selId=params.nodes[0];
|
||||
this_.networkPopClose();
|
||||
if(selId){
|
||||
this_.selNodeId=selId;
|
||||
this_.cursorMove=true;
|
||||
this_.nodeData=this_.nodesArray.find((item)=>item.id==selId);
|
||||
console.log(this_.NodeArr.indexOf(selId));
|
||||
if(this_.NodeArr.indexOf(selId)!==-1){
|
||||
let index = this_.NodeArr.indexOf(selId);
|
||||
this_.NodeArr=this_.NodeArr.filter((item,i)=> i != index);
|
||||
return
|
||||
}
|
||||
if(this_.selectNodeTitle){
|
||||
this_.NodeArr.push(selId);
|
||||
this_.network.selectNodes(this_.NodeArr,true);
|
||||
return
|
||||
}
|
||||
this_.setPopPosition(selId,params);
|
||||
}
|
||||
});
|
||||
|
||||
this.network.on("selectEdge", function (params) { // 选择边
|
||||
this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
|
||||
this_.lineData.color=this_.lineData.color.color;
|
||||
this_.addLineShow=true;
|
||||
this_.isLineAdd=false;
|
||||
console.log(this_.lineData)
|
||||
});
|
||||
|
||||
this.network.on("dragStart", function (params) {//节点移动开始
|
||||
this_.networkPopShow=false;
|
||||
this_.NodeArrShow=false;
|
||||
let selId=params.nodes[0];
|
||||
if(selId){
|
||||
this_.modelTop.find(item=>item.id===selId).show=false;
|
||||
}
|
||||
if(!selId){
|
||||
this_.modelTop.forEach(item=>{
|
||||
item.show=false;
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
this.network.on("dragging", function (params,event) {//节点移动中
|
||||
|
||||
});
|
||||
|
||||
this.network.on("dragEnd", function (params) {//节点移动结束
|
||||
this_.viewsCenter=this_.network.getViewPosition();
|
||||
let selId=params.nodes[0];
|
||||
if(selId){
|
||||
this_.setPopPosition(selId,params);
|
||||
this_.setNodePosition(selId)
|
||||
}
|
||||
if(this_.NodeArr.length>0){
|
||||
this_.NodeArrShow=true;
|
||||
}
|
||||
this_.modelTopUpdate();
|
||||
this_.selNodeArrUpdate();
|
||||
});
|
||||
|
||||
this.network.on("hoverNode", function (params) {//hoverNode
|
||||
this_.cursorMove=true;
|
||||
});
|
||||
|
||||
this.network.on("blurNode", function (params) {//blurNode
|
||||
this_.cursorMove=false;
|
||||
});
|
||||
|
||||
this.network.on("zoom", function (params) {//检测缩放
|
||||
// this_.zoom=Math.round(params.scale*100)/100-0.1;
|
||||
this_.zoom=params.scale;
|
||||
// console.log(this_.nodesArray);
|
||||
// console.log(this_.network.getPositions());
|
||||
this_.modelTopUpdate();
|
||||
this_.selNodeArrUpdate();
|
||||
this_.setPopPosition(this_.selNodeId);
|
||||
console.log(this_.zoom);
|
||||
return false
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content{
|
||||
height: 100%;
|
||||
}
|
||||
.editTopology{
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
}
|
||||
.network{
|
||||
display: flex;
|
||||
height: calc(100% - 30px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.networkPop{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
/*border: 1px solid #e6e6e6;*/
|
||||
border-radius: 5px;
|
||||
height: 32px;
|
||||
/*background: #fff;*/
|
||||
padding: 0 3px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.networkPop .nz-icon-hexagonBorder{
|
||||
position: absolute;
|
||||
font-size: 48px;
|
||||
color: #84d5c2;
|
||||
}
|
||||
.networkPop .nz-icon-liubianxing{
|
||||
color:#e2f3ef;
|
||||
font-size: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 2px;
|
||||
}
|
||||
.nz-icon.noMove{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 14px;
|
||||
font-size: 20px;
|
||||
color: #27c09c;
|
||||
}
|
||||
.networkPop .nz-icon-hexagonBorder:hover{
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.networkPop .nz-icon-hexagonBorder:hover .nz-icon-liubianxing{
|
||||
transform: scale(1.1);
|
||||
left: 4px;
|
||||
font-size: 41px;
|
||||
}
|
||||
.networkPop .nz-icon-hexagonBorder:hover .noMove{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.btmTriangle{
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-color:#e6e6e6 transparent transparent transparent;
|
||||
bottom: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.btmTriangle:after{
|
||||
content: '';
|
||||
display:block;
|
||||
width:0;
|
||||
height:0;
|
||||
border-width: 10px;
|
||||
border-style:solid;
|
||||
border-color:#fff transparent transparent transparent;
|
||||
position:absolute;
|
||||
bottom: -7px;
|
||||
left: -9px;
|
||||
}
|
||||
#network_id{
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
}
|
||||
.cursorMove{
|
||||
cursor: move;
|
||||
}
|
||||
#network_id2{
|
||||
height: 100%;
|
||||
}
|
||||
.networkContent{
|
||||
width: 40%;
|
||||
}
|
||||
.nz-icon-delete{
|
||||
cursor: pointer;
|
||||
color: #ee6723;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.nz-icon-edit{
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.editTopology{
|
||||
color: #1a1a1a;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.editTopologyModule,.editTopologyLineCancel{
|
||||
margin-left: 30px;
|
||||
}
|
||||
.editTopologyLine{
|
||||
margin-left: 130px;
|
||||
}
|
||||
.editTopologyAdd,.editTopologyRemove,.editTopologyCancel{
|
||||
color: #1989fa;
|
||||
margin-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selNode{
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.selNodeTop {
|
||||
width: 120px;
|
||||
height: 0;
|
||||
border-top: 4px dashed yellow;
|
||||
position: absolute;
|
||||
left: -60px;
|
||||
top: -60px;
|
||||
}
|
||||
.selNodeRight {
|
||||
width: 0px;
|
||||
height: 120px;
|
||||
border-right: 4px dashed yellow;
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: -60px;
|
||||
}
|
||||
.selNodeBottom {
|
||||
width: 120px;
|
||||
height: 0;
|
||||
border-bottom: 4px dashed yellow;
|
||||
position: absolute;
|
||||
left: -60px;
|
||||
top: 60px;
|
||||
}
|
||||
.selNodeLeft {
|
||||
width: 0px;
|
||||
height: 120px;
|
||||
border-left: 4px dashed yellow;
|
||||
position: absolute;
|
||||
left: -60px;
|
||||
top: -60px;
|
||||
}
|
||||
.nz-icon-shuidi{
|
||||
position: absolute;
|
||||
font-size: 48px;
|
||||
color: rgba(132,213,194,0.5);
|
||||
}
|
||||
.nz-icon-model{
|
||||
color: #23BF9A;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
418
nezha-fronted/src/components/common/project/visNetwork.vue
Normal file
418
nezha-fronted/src/components/common/project/visNetwork.vue
Normal file
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-table" ref="resizeBox">
|
||||
<div class="vis-network" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle text-right" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-popover
|
||||
v-if="isError"
|
||||
:close-delay=10
|
||||
placement="top-start"
|
||||
trigger="hover"
|
||||
popper-class="chart-error-popper">
|
||||
<div >{{errorContent}}</div>
|
||||
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
|
||||
<i class="nz-icon nz-icon-warning fa"></i>
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span></span>
|
||||
<span>
|
||||
<span class="chart-title-text">{{chartData.title}}</span>
|
||||
<!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
|
||||
</span>
|
||||
<span>
|
||||
<i class="nz-icon nz-icon-edit float-right"></i>
|
||||
<i class="nz-icon nz-icon-zoomin float-right"></i>
|
||||
<i class="nz-icon nz-icon-exit-full-screen float-right"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="vis-network-content">
|
||||
<topology :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="false" ref="topology"></topology>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import a from './a.png'
|
||||
import b from './b.png'
|
||||
import c from './c.png'
|
||||
import d from './d.png'
|
||||
import e from './e.png'
|
||||
import f from './f.png'
|
||||
import bus from '@/libs/bus';
|
||||
import {Loading} from 'element-ui';
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import loading from "@/components/common/loading";
|
||||
import timePicker from '@/components/common/timePicker';
|
||||
import topology from './topology'
|
||||
export default {
|
||||
name: 'visNetwork',
|
||||
components: {
|
||||
'loading': loading,
|
||||
'time-picker':timePicker,
|
||||
'topology':topology,
|
||||
},
|
||||
props:{
|
||||
chartIndex:{
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
//其他
|
||||
tableHeight: 0,
|
||||
data: {}, // 该图表信息,chartItem
|
||||
unit:{},
|
||||
isError:false,
|
||||
errorContent:'',
|
||||
pageSizes:[50,100,200],
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
total: 0
|
||||
},
|
||||
screenPageObj:{
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
total: 0
|
||||
},
|
||||
storedTableData:[],
|
||||
storedScreanTableData:[],
|
||||
seriesItem: [], // 保存信息
|
||||
seriesItemScreen:[],//全屏数据
|
||||
images: '',
|
||||
loading:Object,
|
||||
items: {
|
||||
metric_name: [], // 每条数据列名称
|
||||
xAxis: [],
|
||||
theData: [], // series数据组
|
||||
},
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: true, // 是否第一次加载
|
||||
chartType: 'table', // 图表类型
|
||||
screenModal: false,
|
||||
// 查询数据使用
|
||||
filter: {
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
},
|
||||
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow:false,
|
||||
dragTitleShow:false,
|
||||
dropdownMenuShow:false,
|
||||
divFirstShow:false,
|
||||
columns: [
|
||||
{
|
||||
title:'Element',
|
||||
key:'element',
|
||||
sortable: true
|
||||
}
|
||||
, {
|
||||
title: '采集时间',
|
||||
key: 'time',
|
||||
width: 160,
|
||||
render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
|
||||
}, {
|
||||
title: '数值',
|
||||
key: 'value',
|
||||
width: 160,
|
||||
sortable: true,
|
||||
render: (h, params) => h('span', this.getNumStr(params.row.value)),
|
||||
}],
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
||||
oldSearchTime: [],
|
||||
nodesArray:[
|
||||
{ id: 1, label: "model",
|
||||
image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
|
||||
shape:'image',shapeProperties:{useImageSize:false},
|
||||
x:1,y:-63,
|
||||
imgId:0,
|
||||
scaling:{min:0.5,max:10,}
|
||||
},
|
||||
{id: 2, imgId:1, scaling:{min:0.5,max:10,}, label: "model", x:-236,y:-163, image: a, shape:'image',shapeProperties:{useImageSize:false}},
|
||||
{id: 3, imgId:2, scaling:{min:0.5,max:10,}, label: "model", x:-346,y:-155, image: b, shape:'image',shapeProperties:{useImageSize:false}},
|
||||
{id: 4, imgId:3, scaling:{min:0.5,max:10,}, label: "model", x:-129,y:169, image: c, shape:'image',shapeProperties:{useImageSize:false}},
|
||||
{id: 5, imgId:4, scaling:{min:0.5,max:10,}, label: "model", x:-388,y:35, image: d, shape:'image',shapeProperties:{useImageSize:false}},
|
||||
{id: 6, imgId:5, scaling:{min:0.5,max:10,}, label: "model", x:-345,y:-53, image: e, shape:'image',shapeProperties:{useImageSize:false}},
|
||||
{id: 7, imgId:6, scaling:{min:0.5,max:10,}, label: "model", x:316,y:22, image: f, shape:'image',shapeProperties:{useImageSize:false}},
|
||||
],
|
||||
edgesArray:[
|
||||
{id: 0,from: 2, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to', color: {color:'#ff4500',highlight:'#ff4500',hover:'#ff4500',opacity:1.0}},
|
||||
{id: 1,from: 3, to: 1, dashes:[15,15],label:"hahah",arrows:'from',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
|
||||
{id: 2,from: 5, to: 4, dashes:[15,15],label:"hahah",arrows:'to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
|
||||
{id: 3,from: 4, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
|
||||
{id: 4,from: 4, to: 6, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
|
||||
{id: 5,from: 1, to: 7, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
|
||||
],
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
methods:{
|
||||
// 其他
|
||||
filterShowData(source,pageObj){
|
||||
return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
|
||||
},
|
||||
startResize(e) {
|
||||
let vm = this;
|
||||
this.$chartResizeTool.start(vm, this.data, e);
|
||||
},
|
||||
screenPageNo(val) {
|
||||
this.screenPageObj.pageNo = val;
|
||||
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
|
||||
},
|
||||
screenPageSize(val) {
|
||||
this.screenPageObj.pageSize = val;
|
||||
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
|
||||
},
|
||||
startLoading(area){
|
||||
if(area==='screen'){
|
||||
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
|
||||
}else {
|
||||
this.$refs['localLoading'+this.chartIndex].startLoading();
|
||||
}
|
||||
},
|
||||
endLoading(area){
|
||||
if(area==='screen'){
|
||||
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
|
||||
}else {
|
||||
this.$refs['localLoading'+this.chartIndex].endLoading();
|
||||
}
|
||||
},
|
||||
resize(chartItem) {
|
||||
let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
|
||||
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
|
||||
container.style.height = `calc(100% - ${deHeight*2}px)`;
|
||||
this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
|
||||
this.$nextTick(() => {
|
||||
container.querySelector(".el-table__body-wrapper")._ps_.update();
|
||||
});
|
||||
},
|
||||
showLoad(chartItem) {
|
||||
//设置高度 chart-table
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem);
|
||||
});
|
||||
this.startLoading();
|
||||
this.divFirstShow = true;
|
||||
},
|
||||
// 重新请求数据 刷新操作-local
|
||||
refreshChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.startLoading();
|
||||
this.firstShow = false;
|
||||
this.$emit('on-refresh-data', this.data.id);
|
||||
},
|
||||
// 编辑图表
|
||||
editChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.$emit('on-edit-chart-block', this.data.id);
|
||||
},
|
||||
// 删除该图表
|
||||
removeChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.$emit('on-remove-chart-block', this.data.id);
|
||||
},
|
||||
//全屏时间条件查询
|
||||
dateChange(time) {
|
||||
this.searchTime = [...time];
|
||||
this.seriesItemScreen = [];
|
||||
for(let i=0;i<8;i++){
|
||||
this.seriesItemScreen.push({//表格数据
|
||||
element:'',
|
||||
time: '',//采集时间
|
||||
value: '',//数值
|
||||
});
|
||||
}
|
||||
this.startLoading('screen');
|
||||
this.$emit('on-search-data', this.data.id, this.searchTime);
|
||||
},
|
||||
clickos() {
|
||||
this.dropdownMenuShow=false;
|
||||
},
|
||||
clearChart(){
|
||||
this.data = {};
|
||||
},
|
||||
duplicate(){
|
||||
this.dropdownMenuShow=false;
|
||||
const param = {id:this.data.id};
|
||||
this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t("tip.duplicateSuccess")
|
||||
});
|
||||
this.$emit('on-duplicate-chart-block', this.data.id,response.data);
|
||||
}else {
|
||||
if(response.msg){
|
||||
this.$message.error(response.msg);
|
||||
}else if(response.error){
|
||||
this.$message.error(response.error);
|
||||
}else {
|
||||
this.$message.error(response);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen() {
|
||||
this.dropdownMenuShow=false;
|
||||
// 初始化同步时间
|
||||
this.searchTime = [];
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
|
||||
this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
|
||||
this.seriesItemScreen = this.seriesItem;
|
||||
this.screenModal = true;
|
||||
if(this.$refs.topologyFull){
|
||||
setTimeout(()=>{
|
||||
this.$refs.topologyFull.resetAllNodes();
|
||||
})
|
||||
}
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
|
||||
if(errorMsg && errorMsg!==''){
|
||||
this.isError = true;
|
||||
this.errorContent = errorMsg;
|
||||
}else {
|
||||
this.isError = false;
|
||||
this.errorContent = '';
|
||||
}
|
||||
if(area==='showFullScreen'){//全屏按时间查询
|
||||
this.data = chartItem;
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit);
|
||||
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time;
|
||||
// this.seriesItemScreen = seriesItem;
|
||||
this.storedScreanTableData=seriesItem;
|
||||
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
|
||||
this.screenPageObj.total=this.storedScreanTableData.length;
|
||||
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
|
||||
this.endLoading('screen');
|
||||
} else{
|
||||
//设置高度 chart-table
|
||||
this.divFirstShow = true;
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem);
|
||||
});
|
||||
this.firstShow = true; // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId;
|
||||
this.data = chartItem;
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit);
|
||||
this.storedTableData =seriesItem;
|
||||
this.storedScreanTableData=seriesItem;
|
||||
this.storedTableData=Object.assign([],this.storedTableData.reverse());
|
||||
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
|
||||
this.pageObj.total=this.storedTableData.length;
|
||||
this.screenPageObj.total=this.storedScreanTableData.length;
|
||||
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj);
|
||||
this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
|
||||
if (filter) { // 保存数据,用于同步时间
|
||||
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time;
|
||||
this.oldSearchTime[0] = this.searchTime[0];
|
||||
this.oldSearchTime[1] = this.searchTime[1];
|
||||
}
|
||||
this.endLoading();
|
||||
}
|
||||
},
|
||||
dealLegendAlias:function(legend,expression){
|
||||
if(/\{\{.+\}\}/.test(expression)){
|
||||
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
|
||||
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
|
||||
let reg=new RegExp(label+'=".+?"')
|
||||
let value=null;
|
||||
if(reg.test(legend)){
|
||||
let find=legend.match(reg)[0];
|
||||
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
|
||||
}
|
||||
return value?value:label;
|
||||
})
|
||||
return labelValue
|
||||
}else{
|
||||
return expression;
|
||||
}
|
||||
},
|
||||
// 获取格式
|
||||
getNumStr(num) {
|
||||
if (num) {
|
||||
if (num >= 1000) {
|
||||
const kbNum = num / 1000;
|
||||
if (kbNum >= 1000) {
|
||||
const mbNum = kbNum / 1000;
|
||||
if (mbNum >= 1000) {
|
||||
const gbNum = mbNum / 1000;
|
||||
if (gbNum >= 1000) {
|
||||
const tbNum = gbNum / 1000;
|
||||
if (tbNum >= 1000) {
|
||||
const pbNum = tbNum / 1000;
|
||||
return `${pbNum.toFixed(2)}PB`;
|
||||
}
|
||||
return `${tbNum.toFixed(2)}TB`;
|
||||
}
|
||||
return `${gbNum.toFixed(2)}GB`;
|
||||
}
|
||||
return `${mbNum.toFixed(2)}MB`;
|
||||
}
|
||||
return `${kbNum.toFixed(2)}KB`;
|
||||
}
|
||||
return num.toFixed(2);
|
||||
}
|
||||
return num;
|
||||
},
|
||||
// 设置拓扑图数据
|
||||
setTopologyData(nodesArr,edgesArr){
|
||||
this.nodesArray=nodesArr;
|
||||
this.edgesArray=edgesArr;
|
||||
},
|
||||
//退出全屏
|
||||
exitFull(){
|
||||
this.screenModal = false;
|
||||
this.$refs.topology.resetAllNodes()
|
||||
}
|
||||
},
|
||||
|
||||
mounted(){
|
||||
this.firstLoad = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import './chart.scss';
|
||||
</style>
|
||||
<style scoped>
|
||||
.table-container{
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
.nz-icon{
|
||||
cursor: pointer;
|
||||
}
|
||||
.resize-box .vis-network .text-right{
|
||||
text-align: right;
|
||||
}
|
||||
.resize-box .vis-network .chartTitle .chart-title{
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
.vis-network-content{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -125,7 +125,8 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="pageType == 'project'">
|
||||
<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>
|
||||
<!--<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>-->
|
||||
<facade />
|
||||
</template>
|
||||
|
||||
<transition name="el-zoom-in-bottom">
|
||||
@@ -147,13 +148,14 @@
|
||||
import loading from "../../common/loading";
|
||||
import panelTab from '../../common/bottomBox/tabs/panelTab'
|
||||
import bus from '../../../libs/bus'
|
||||
|
||||
import facade from '@/components/common/project/projectFacade'
|
||||
export default {
|
||||
name: "project2",
|
||||
components: {
|
||||
'export-excel':exportXLSX,
|
||||
'loading': loading,
|
||||
'panel-tab': panelTab
|
||||
'panel-tab': panelTab,
|
||||
facade,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user