NEZ-1433 feat:chart-endpointInfo 组件开发
This commit is contained in:
@@ -196,7 +196,7 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isNoData () {
|
isNoData () {
|
||||||
return lodash.isEmpty(this.chartData) && ['text', 'url'].indexOf(this.chartInfo.type) === -1
|
return lodash.isEmpty(this.chartData) && ['text', 'url', 'assetInfo', 'endpointInfo'].indexOf(this.chartInfo.type) === -1
|
||||||
},
|
},
|
||||||
chartOption () {
|
chartOption () {
|
||||||
if (this.customChartOption) {
|
if (this.customChartOption) {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<chart-detail v-if="chartInfo.type === 'assetInfo'" :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
|
<chart-detail :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -17,21 +17,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
chartData: {
|
|
||||||
deep: true,
|
|
||||||
handler (n) {
|
|
||||||
console.log(n)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,12 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<chart-detail v-if="chartInfo === 'endpointInfo'" :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
|
<chart-detail :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import chartDetail from '@/components/chart/chartDetail'
|
||||||
export default {
|
export default {
|
||||||
name: 'chartEndpointInfo',
|
name: 'chartEndpointInfo',
|
||||||
|
components: {
|
||||||
|
chartDetail
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
chartData: Array,
|
chartData: Object,
|
||||||
chartInfo: Object
|
chartInfo: Object
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
@@ -16,7 +20,3 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,32 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="chartDetail" class="chart-detail">
|
<div ref="chartDetail" class="chart-detail">
|
||||||
<div class="chart-detail-title" v-if="chartInfo.type === 'assetInfo'">{{$t('panel.assetInfo')}}</div>
|
<!-- <div class="chart-detail-title" v-if="chartInfo.type === 'assetInfo'">{{$t('project.chart.assetInfo')}}</div>-->
|
||||||
<div class="chart-detail-title" v-else>{{$t('panel.endpointInfo')}}</div>
|
<!-- <div class="chart-detail-title" v-else-if="chartInfo.type === 'endpointInfo'">{{$t('project.chart.endpointInfo')}}</div>-->
|
||||||
<div class="basic-info">
|
<div class="basic-info">
|
||||||
<div class="basic-info-title" @click="hideElement">
|
<div class="basic-info-title" @click="hideElement">
|
||||||
<span><i :class="{'nz-icon nz-icon-caret-right': showBasicInfo,'nz-icon nz-icon-caret-bottom': !showBasicInfo}"></i></span>
|
<span><i :class="{'nz-icon nz-icon-caret-right': showBasicInfo,'nz-icon nz-icon-caret-bottom': !showBasicInfo}"></i></span>
|
||||||
<span>{{$t('panel.basicInfo')}}</span>
|
<span>Basic info</span>
|
||||||
</div>
|
</div>
|
||||||
<el-collapse-transition>
|
<el-collapse-transition>
|
||||||
|
<!--asset info-->
|
||||||
<div v-if="!showBasicInfo && chartInfo.type === 'assetInfo'" class="basic-info-table">
|
<div v-if="!showBasicInfo && chartInfo.type === 'assetInfo'" class="basic-info-table">
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.id')}}</div>
|
<div class="basic-info-table-title">ID</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail ? chartDetail.id : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail ? chartDetail.id : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.name')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.name')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail? chartDetail.name : '--' }}</div>
|
<div class="basic-info-table-value">{{chartDetail? chartDetail.name : '--' }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.manageIp')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.manageIp')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail ? chartDetail.manageIp : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail ? chartDetail.manageIp : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.type')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.type')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.type ? chartDetail.type.name : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail.type ? chartDetail.type.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.state')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.state')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.state ? chartDetail.state.name : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail.state ? chartDetail.state.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
@@ -37,24 +38,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.dc')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.dc')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.dc ? chartDetail.dc.name : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail.dc ? chartDetail.dc.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.cabinet')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.cabinet')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.cabinet ? chartDetail.cabinet.name : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail.cabinet ? chartDetail.cabinet.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.brand')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.brand')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.brand ? chartDetail.brand.name : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail.brand ? chartDetail.brand.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.model')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.model')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.model ? chartDetail.model.name : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail.model ? chartDetail.model.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.label')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.labels')}}</div>
|
||||||
<div class="basic-info-table-value" style="display:flex">
|
<div class="basic-info-table-value" style="display:flex" v-if="chartDetail.fields.length > 0">
|
||||||
<div v-for="item in chartDetail.fields" :key="item.id">
|
<div v-for="item in chartDetail.fields" :key="item.id">
|
||||||
<div class="label-table">
|
<div class="label-table">
|
||||||
<div class="label-table-name">{{item.name}}</div>
|
<div class="label-table-name">{{item.name}}</div>
|
||||||
@@ -62,6 +63,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="basic-info-table-value">--</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{ $t('asset') }}</div>
|
<div class="basic-info-table-title">{{ $t('asset') }}</div>
|
||||||
@@ -78,73 +80,68 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="basic-info-table">
|
<!--Endpoint info-->
|
||||||
|
<div v-else-if="!showBasicInfo && chartInfo.type === 'endpointInfo'" class="basic-info-table">
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.id')}}</div>
|
<div class="basic-info-table-title">ID</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail ? chartDetail.id : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail ? chartDetail.id : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.name')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.name')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail? chartDetail.name : '--' }}</div>
|
<div class="basic-info-table-value">{{chartDetail? chartDetail.name : '--' }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.manageIp')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.project')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail ? chartDetail.manageIp : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail && chartDetail.project ? chartDetail.project.name : '--' }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.type')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.module')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.type ? chartDetail.type.name : '--'}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="basic-info-table-list">
|
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.state')}}</div>
|
|
||||||
<div class="basic-info-table-value">{{chartDetail.state ? chartDetail.state.name : '--'}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="basic-info-table-list">
|
|
||||||
<div class="basic-info-table-title">Ping</div>
|
|
||||||
<div class="basic-info-table-value">
|
<div class="basic-info-table-value">
|
||||||
<div :class="{'green-bg': chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.status === 1,'red-bg': chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.status === 0}" class="active-icon"></div>
|
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
|
||||||
<span>{{chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.rtt ? chartDetail.pingInfo.rtt + 'ms':''}}</span>
|
<span>{{chartDetail.module && chartDetail.module ? chartDetail.module.name : '--'}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.dc')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.asset')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.dc ? chartDetail.dc.name : '--'}}</div>
|
<div class="basic-info-table-value">
|
||||||
</div>
|
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
|
||||||
<div class="basic-info-table-list">
|
<span>{{chartDetail && chartDetail.asset ? chartDetail.asset.name : '--'}}</span>
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.cabinet')}}</div>
|
|
||||||
<div class="basic-info-table-value">{{chartDetail.cabinet ? chartDetail.cabinet.name : '--'}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="basic-info-table-list">
|
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.brand')}}</div>
|
|
||||||
<div class="basic-info-table-value">{{chartDetail.brand ? chartDetail.brand.name : '--'}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="basic-info-table-list">
|
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.model')}}</div>
|
|
||||||
<div class="basic-info-table-value">{{chartDetail.model ? chartDetail.model.name : '--'}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="basic-info-table-list">
|
|
||||||
<div class="basic-info-table-title">{{$t('panel.asset.label')}}</div>
|
|
||||||
<div class="basic-info-table-value" style="display:flex">
|
|
||||||
<div v-for="item in chartDetail.fields" :key="item.id">
|
|
||||||
<div class="label-table">
|
|
||||||
<div class="label-table-name">{{item.name}}</div>
|
|
||||||
<span class="label-table-value">{{item.value[0]}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{ $t('asset') }}</div>
|
<div class="basic-info-table-title">{{$t('overall.alert')}}</div>
|
||||||
<div class="basic-info-table-value">
|
<div class="basic-info-table-value">
|
||||||
<i :class="chartDetail && chartDetail.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
|
<i :class="chartDetail && chartDetail.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
|
||||||
<span>{{chartDetail ? chartDetail.alertNum : 0}}</span>
|
<span>{{chartDetail && chartDetail.alertNum ? chartDetail.alertNum : 0}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">Endpoint</div>
|
<div class="basic-info-table-title">{{$t('overall.state')}}</div>
|
||||||
<div class="basic-info-table-value">
|
<div class="basic-info-table-value">
|
||||||
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>
|
<span style="width: auto">
|
||||||
<span>{{chartDetail ? chartDetail.endpointNum : 0}}</span>
|
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
|
||||||
|
<span v-if="chartDetail && chartDetail.configs[0].state === 0">
|
||||||
|
<span class="active-icon red-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="chartDetail && chartDetail.configs[0].state === 1">
|
||||||
|
<span class="active-icon green-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="chartDetail && chartDetail.configs[0].state">
|
||||||
|
<span class="active-icon gray-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span style="width: auto">
|
||||||
|
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
|
||||||
|
<span v-if="chartDetail && chartDetail.configs[1].state === 0">
|
||||||
|
<span class="active-icon red-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="chartDetail && chartDetail.configs[1].state === 1">
|
||||||
|
<span class="active-icon green-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="chartDetail && chartDetail.configs[1].state">
|
||||||
|
<span class="active-icon gray-bg inline-block"></span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -45,6 +45,7 @@
|
|||||||
@edit-chart="$emit('edit-chart', item)"
|
@edit-chart="$emit('edit-chart', item)"
|
||||||
:chart-info="item"
|
:chart-info="item"
|
||||||
:time-range="timeRange"
|
:time-range="timeRange"
|
||||||
|
:chart-detail-info="chartDetailInfo"
|
||||||
@showFullscreen="showFullscreen"
|
@showFullscreen="showFullscreen"
|
||||||
></panel-chart>
|
></panel-chart>
|
||||||
</grid-item>
|
</grid-item>
|
||||||
@@ -92,8 +93,8 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
// TODO isModel
|
// TODO isModel
|
||||||
from: { type: String },
|
from: { type: String },
|
||||||
panelId: { },
|
panelId: {},
|
||||||
obj: Object,
|
chartDetailInfo: Object,
|
||||||
timeRange: Array, // 时间范围
|
timeRange: Array, // 时间范围
|
||||||
panelLock: { type: Boolean, default: true },
|
panelLock: { type: Boolean, default: true },
|
||||||
isGroup: { type: Boolean, default: false },
|
isGroup: { type: Boolean, default: false },
|
||||||
@@ -282,19 +283,23 @@ export default {
|
|||||||
this.gridLayoutLoading = true
|
this.gridLayoutLoading = true
|
||||||
this.noData = !n || n.length < 1
|
this.noData = !n || n.length < 1
|
||||||
const tempList = n.map(item => {
|
const tempList = n.map(item => {
|
||||||
const param = item.param
|
let param = ''
|
||||||
// try {
|
let height = ''
|
||||||
// param = JSON.parse(item.param)
|
if (item.param) {
|
||||||
// } catch (e) {
|
param = item.param
|
||||||
// console.info(e)
|
// try {
|
||||||
// }
|
// param = JSON.parse(item.param)
|
||||||
const height = (item.type === 'group' && item.param.collapse) ? this.headerH : item.height
|
// } catch (e) {
|
||||||
param.showHeader = true
|
// console.info(e)
|
||||||
|
// }
|
||||||
|
height = (item.type === 'group' && item.param.collapse) ? this.headerH : item.height
|
||||||
|
param.showHeader = true
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
...item,
|
...item,
|
||||||
i: item.id,
|
i: item.id,
|
||||||
w: item.span,
|
w: item.span,
|
||||||
h: height,
|
h: height || 4,
|
||||||
x: item.x || 0,
|
x: item.x || 0,
|
||||||
y: item.y || 0,
|
y: item.y || 0,
|
||||||
param
|
param
|
||||||
|
|||||||
@@ -45,7 +45,8 @@ export default {
|
|||||||
chartInfo: Object, // 其中的param json串已转化为对象
|
chartInfo: Object, // 其中的param json串已转化为对象
|
||||||
timeRange: Array, // 时间范围
|
timeRange: Array, // 时间范围
|
||||||
isFullscreen: Boolean,
|
isFullscreen: Boolean,
|
||||||
panelLock: Boolean
|
panelLock: Boolean,
|
||||||
|
chartDetailInfo: Object
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
@@ -94,7 +95,20 @@ export default {
|
|||||||
query (elements, startTime, endTime, step) {
|
query (elements, startTime, endTime, step) {
|
||||||
try {
|
try {
|
||||||
switch (this.chartInfo.datasource) {
|
switch (this.chartInfo.datasource) {
|
||||||
case 'metrics':
|
case 'metrics': {
|
||||||
|
if (this.chartInfo.type === 'assetInfo') {
|
||||||
|
console.log(this.chartDetailInfo)
|
||||||
|
this.$get('asset/asset/' + this.chartDetailInfo.id).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
this.chartData = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.chartInfo.type === 'endpointInfo') {
|
||||||
|
this.$get('monitor/endpoint/' + this.chartDetailInfo.id).then(res => {
|
||||||
|
this.chartData = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
case 'logs': {
|
case 'logs': {
|
||||||
let urlPre = ''
|
let urlPre = ''
|
||||||
if (this.chartInfo.datasource === 'metrics') {
|
if (this.chartInfo.datasource === 'metrics') {
|
||||||
@@ -141,7 +155,7 @@ export default {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 'system': {
|
case 'system': {
|
||||||
console.log(this.chartInfo)
|
console.log(this.chartInfo.type)
|
||||||
const params = {
|
const params = {
|
||||||
q: '',
|
q: '',
|
||||||
stat: startTime,
|
stat: startTime,
|
||||||
@@ -180,20 +194,6 @@ export default {
|
|||||||
if (this.chartInfo.type === 'map') {
|
if (this.chartInfo.type === 'map') {
|
||||||
this.chartData = ['map']
|
this.chartData = ['map']
|
||||||
}
|
}
|
||||||
if (this.chartInfo.type === 'assetInfo') {
|
|
||||||
this.$get('asset/asset/' + 545).then(res => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
this.chartData = res.data
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (this.chartInfo.type === 'endpointInfo') {
|
|
||||||
this.$get('monitor/endpoint/' + 1).then(res => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
this.chartData = res.data
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -94,21 +94,30 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot>
|
<!--图表-->
|
||||||
<div class="panel">
|
<div id="tableList" class="table-list">
|
||||||
<!--图表-->
|
<div id="dashboardScrollbar" ref="dashboardScrollbar" class="table-list-box">
|
||||||
<div class="table-list" id="tableList">
|
<div class="box-content" v-loading="chartListLoading">
|
||||||
<div ref="dashboardScrollbar" id="dashboardScrollbar" style="height: 100%; overflow: auto;">
|
<chart-list
|
||||||
<div class="box-content">
|
ref="chartList"
|
||||||
<chart-list :nowTimeType='nowTimeType' :draggable="draggable" :from="from" :is-model="from === fromRoute.model" :obj="obj" @on-edit-chart="editChart"
|
name="panel"
|
||||||
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelDataList"
|
:panelId="showPanel.id"
|
||||||
@on-add-group-item-chart="addGroupItem"></chart-list>
|
:class="{'show-top':showTopBtn}"
|
||||||
</div>
|
:data-list="dataList"
|
||||||
</div>
|
:nowTimeType="nowTimeType"
|
||||||
|
:from="fromRoute.panel"
|
||||||
|
:panel-lock="panelLock"
|
||||||
|
:time-range="searchTime"
|
||||||
|
@edit-chart="editChart"
|
||||||
|
@on-refresh-time="refreshTime"
|
||||||
|
@on-remove-chart="delChart"
|
||||||
|
@on-add-group-item-chart="addGroupItem"
|
||||||
|
:loading="chartListLoading"
|
||||||
|
:chart-detail-info="chartDetailInfo"
|
||||||
|
></chart-list>
|
||||||
</div>
|
</div>
|
||||||
<button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</nz-bottom-data-list>
|
</nz-bottom-data-list>
|
||||||
<transition name="right-box">
|
<transition name="right-box">
|
||||||
<chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
|
<chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
|
||||||
@@ -121,7 +130,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import chartBox from '../../../page/dashboard/chartBox'
|
import chartBox from '../../../page/dashboard/chartBox'
|
||||||
import chartList from '../../../charts/chart-list'
|
import chartList from '@/components/chart/chartList'
|
||||||
import bus from '../../../../libs/bus'
|
import bus from '../../../../libs/bus'
|
||||||
import subDataListMixin from '@/components/common/mixin/subDataList'
|
import subDataListMixin from '@/components/common/mixin/subDataList'
|
||||||
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
|
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
|
||||||
@@ -148,6 +157,7 @@ export default {
|
|||||||
panelLock: true,
|
panelLock: true,
|
||||||
showTopBtn: false, // top按钮
|
showTopBtn: false, // top按钮
|
||||||
visible: false,
|
visible: false,
|
||||||
|
chartListLoading: true,
|
||||||
rightBox: { // 面板弹出框相关
|
rightBox: { // 面板弹出框相关
|
||||||
chart: {
|
chart: {
|
||||||
show: false
|
show: false
|
||||||
@@ -222,7 +232,8 @@ export default {
|
|||||||
scrollbarWrap: null,
|
scrollbarWrap: null,
|
||||||
panelDataList: [],
|
panelDataList: [],
|
||||||
batchDeleteObjs: [],
|
batchDeleteObjs: [],
|
||||||
nowTimeType: {}
|
nowTimeType: {},
|
||||||
|
chartDetailInfo: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
@@ -336,17 +347,29 @@ export default {
|
|||||||
},
|
},
|
||||||
// 获取数据,用在子页面
|
// 获取数据,用在子页面
|
||||||
getData (params) {
|
getData (params) {
|
||||||
|
if (!this.hasButton('panel_view')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chartListLoading = true
|
||||||
if (params.start_time === '' || params.end_time === '') {
|
if (params.start_time === '' || params.end_time === '') {
|
||||||
const now = bus.getTimezontDateRange()
|
const now = bus.getTimezontDateRange()
|
||||||
const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
|
const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
|
||||||
const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
|
const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
|
||||||
params.start_time = startTimeTmp
|
params.start_time = startTimeTmp
|
||||||
params.end_time = endTimeTmp
|
params.end_time = endTimeTmp
|
||||||
params.from = this.from
|
|
||||||
}
|
|
||||||
if (this.$refs.chartList) {
|
|
||||||
this.$refs.chartList.initData(params)
|
|
||||||
}
|
}
|
||||||
|
this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.chartListLoading = false
|
||||||
|
this.dataList = response.data.list.map(item => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
|
||||||
|
loaded: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 图表相关操作--end */
|
/* 图表相关操作--end */
|
||||||
@@ -596,6 +619,7 @@ export default {
|
|||||||
this.searchLabel.assetIds = n.id
|
this.searchLabel.assetIds = n.id
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.chartDetailInfo = n
|
||||||
}, 500)
|
}, 500)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -153,9 +153,9 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
...mapActions(['loginSuccess']),
|
...mapActions(['loginSuccess']),
|
||||||
login () {
|
login () {
|
||||||
if (this.loading || !this.license.valid || !this.license.token) {
|
// if (this.loading || !this.license.valid || !this.license.token) {
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
|
if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
this.$post('/sys/login', this.loginData).then(res => {
|
this.$post('/sys/login', this.loginData).then(res => {
|
||||||
|
|||||||
Reference in New Issue
Block a user