perf：删除没有用到的代码
This commit is contained in:
zhangyu
@@ -29,7 +29,16 @@
|
||||
margin-top: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.export-pdf-mask {
|
||||
.el-loading-spinner {
|
||||
.el-loading-text{
|
||||
white-space: nowrap;
|
||||
margin-left: 54px;
|
||||
margin-top: 10px;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 自定义的dropdown */
|
||||
.nz-dropdown {
|
||||
width: 90px;
|
||||
|
||||
@@ -119,8 +119,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '../../libs/bus'
|
||||
import chartDataFormat from './chartDataFormat'
|
||||
import bus from '../../../libs/bus'
|
||||
import chartDataFormat from '../chartDataFormat'
|
||||
import chartDataList from '@/components/common/mixin/chartDataList'
|
||||
|
||||
export default {
|
||||
@@ -25,7 +25,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
|
||||
import * as echarts from 'echarts'
|
||||
import { getChart, setChart } from '@/components/common/js/common'
|
||||
import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { initColor } from '@/components/chart/chart/tools'
|
||||
import lodash from 'lodash'
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
import chartMixin from '@/components/chart/chartMixin'
|
||||
import chartFormat from '@/components/chart/chartFormat'
|
||||
import { getMetricTypeValue } from '@/components/common/js/tools'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import * as echarts from 'echarts'
|
||||
import lodash from 'lodash'
|
||||
import { getChart } from '@/components/common/js/common'
|
||||
|
||||
@@ -22,7 +22,7 @@ import chartFormat from '@/components/chart/chartFormat'
|
||||
import { initColor } from '@/components/chart/chart/tools'
|
||||
import '@svgdotjs/svg.panzoom.js'
|
||||
import { getMetricTypeValue } from '@/components/common/js/tools'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
export default {
|
||||
name: 'chartHexagonD3',
|
||||
mixins: [chartMixin, chartFormat],
|
||||
|
||||
@@ -93,7 +93,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
|
||||
import * as echarts from 'echarts'
|
||||
import { getChart, setChart } from '@/components/common/js/common'
|
||||
import { dealLegendAlias, formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { initColor } from '@/components/chart/chart/tools'
|
||||
import lodash from 'lodash'
|
||||
import axios from 'axios'
|
||||
|
||||
@@ -24,7 +24,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
|
||||
import * as echarts from 'echarts'
|
||||
import { getChart, setChart } from '@/components/common/js/common'
|
||||
import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { initColor } from '@/components/chart/chart/tools'
|
||||
import lodash from 'lodash'
|
||||
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
import chartMixin from '@/components/chart/chartMixin'
|
||||
import chartFormat from '@/components/chart/chartFormat'
|
||||
import { getMetricTypeValue } from '@/components/common/js/tools'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
||||
import { initColor } from '@/components/chart/chart/tools'
|
||||
// import fontWidth from '@/components/chart/chart/options/fontWidth'
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
import chartMixin from '@/components/chart/chartMixin'
|
||||
import chartFormat from '@/components/chart/chartFormat'
|
||||
import { getMetricTypeValue } from '@/components/common/js/tools'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import lodash from 'lodash'
|
||||
export default {
|
||||
name: 'chart-table',
|
||||
|
||||
@@ -23,7 +23,7 @@ import * as echarts from 'echarts'
|
||||
import moment from 'moment-timezone'
|
||||
import bus from '@/libs/bus'
|
||||
import { formatScientificNotation } from '@/components/common/js/tools'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
||||
import { chartLegendPlacement } from '@/components/common/js/constants'
|
||||
import { getChart, setChart } from '@/components/common/js/common'
|
||||
|
||||
@@ -25,7 +25,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
|
||||
import * as echarts from 'echarts'
|
||||
import { getChart, setChart } from '@/components/common/js/common'
|
||||
import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { initColor } from '@/components/chart/chart/tools'
|
||||
import lodash from 'lodash'
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
<script>
|
||||
import lodash from 'lodash'
|
||||
import { getChart } from '@/components/common/js/common'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { statisticsList } from '@/components/common/js/constants'
|
||||
export default {
|
||||
name: 'chartLegend',
|
||||
|
||||
@@ -200,13 +200,13 @@
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import * as echarts from 'echarts'
|
||||
import bus from '../../libs/bus'
|
||||
import loading from '../common/loading'
|
||||
import chartDataFormat from './chartDataFormat'
|
||||
import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
|
||||
import chartConfig from '../page/dashboard/overview/chartConfig'
|
||||
import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
|
||||
import { getMetricTypeValue, chartResizeTool, formatScientificNotation, dealLegendAlias } from '../common/js/tools'
|
||||
import bus from '../../../libs/bus'
|
||||
import loading from '../../common/loading'
|
||||
import chartDataFormat from '../chartDataFormat'
|
||||
import { randomcolor } from '../../common/js/radomcolor/randomcolor.js'
|
||||
import chartConfig from '../../page/dashboard/overview/chartConfig'
|
||||
import { getChart, setChart, lineChartMove, getMousePoint } from '../../common/js/common'
|
||||
import { getMetricTypeValue, chartResizeTool, formatScientificNotation, dealLegendAlias } from '../../common/js/tools'
|
||||
import moment from 'moment-timezone'
|
||||
import chartDataList from '@/components/common/mixin/chartDataList'
|
||||
|
||||
@@ -65,7 +65,7 @@ import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from './chart/tools
|
||||
import { chartType, fromRoute } from '@/components/common/js/constants'
|
||||
import bus from '@/libs/bus'
|
||||
import axios from 'axios'
|
||||
import chartTempData from '@/components/charts/chartTempData'
|
||||
import chartTempData from '@/components/chart/chartTempData'
|
||||
import logsData from '@/components/chart/logsData'
|
||||
import lodash from 'lodash'
|
||||
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
|
||||
``` bash
|
||||
# list
|
||||
向下传递 index
|
||||
|
||||
# groupList
|
||||
是 chart type=’group‘ 的子组件
|
||||
向下传递的是处理过后的 chartIndex
|
||||
```
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,807 +0,0 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-echarts" ref="resizeBox">
|
||||
<div class="chart-single-stat" :id="'chartPieChart'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :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>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<!-- <span class="chart-title-text">{{chartData.name}}</span>-->
|
||||
<span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
|
||||
<transition name="el-fade-in-linear">
|
||||
<span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
|
||||
</transition>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div :id="'pie-chart-local-'+chartIndex" ref="pieChartLocal" style="display: flex;justify-content: center"></div>
|
||||
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||
<div class='legend-container' ref="legendArea" v-show="firstShow">
|
||||
<div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
|
||||
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--全屏-->
|
||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" @opened="initChart('screen')"
|
||||
:visible.sync="screenModal"
|
||||
width="96%" @close="screenModal = false" :modal-append-to-body="false">
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{data.name}}</span>
|
||||
<div class="float-right panel-calendar dialog-tool">
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-stat-screen-container" >
|
||||
<div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
|
||||
<div :id="'screenLegendArea'+chartIndex" class="legend-container legend-container-screen">
|
||||
<div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
|
||||
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
|
||||
<br/><!--bgColorList[index]-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartDataFormat from './chartDataFormat'
|
||||
import loading from '../common/loading'
|
||||
import * as echarts from 'echarts'
|
||||
import { getChart, setChart, getMousePoint } from '../common/js/common'
|
||||
import chartConfig from '../page/dashboard/overview/chartConfig'
|
||||
import { randomcolor } from '../common/js/radomcolor/randomcolor'
|
||||
import { chartResizeTool, formatScientificNotation } from '@/components/common/js/tools'
|
||||
import chartDataList from '@/components/common/mixin/chartDataList'
|
||||
export default {
|
||||
name: 'pieChart', // 饼图 或者 柱状图的统计
|
||||
components: {
|
||||
loading: loading
|
||||
},
|
||||
props: {
|
||||
tempDom: Object,
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId'
|
||||
},
|
||||
chartIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
from: { type: String },
|
||||
isLock: { type: Boolean, default: false }
|
||||
},
|
||||
mixins: [chartDataList],
|
||||
data () {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
noData: false,
|
||||
unit: {},
|
||||
isError: false,
|
||||
errorContent: '',
|
||||
seriesItem: [], // 保存信息
|
||||
seriesItemScreen: [], // 全屏数据
|
||||
pieData: [],
|
||||
mapping: '', // 满足valueMapping时 mapping的值
|
||||
images: '',
|
||||
loading: Object,
|
||||
items: {
|
||||
metric_name: [], // 每条数据列名称
|
||||
xAxis: [],
|
||||
theData: [] // series数据组
|
||||
},
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
// 查询数据使用
|
||||
filter: {
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
},
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow: false,
|
||||
dragTitleShow: false,
|
||||
dropdownMenuShow: false,
|
||||
divFirstShow: false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
|
||||
oldSearchTime: [],
|
||||
legend: [],
|
||||
legendScreen: [],
|
||||
isGrey: [],
|
||||
isGreyScreen: [],
|
||||
echart: null,
|
||||
echartScreen: null,
|
||||
bgColorList: [],
|
||||
stableFilter: {},
|
||||
option: {
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: 30,
|
||||
left: 10,
|
||||
right: 30,
|
||||
containLabel: true,
|
||||
bottom: 20// 156
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(221,228,237,1)',
|
||||
borderColor: 'rgba(255,255,255,0)',
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
axisPointer: {
|
||||
snap: false,
|
||||
animation: false
|
||||
},
|
||||
extraCssText: 'z-index:1000;'
|
||||
},
|
||||
series: null,
|
||||
stepWidth: null,
|
||||
chartDot: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
dropdownMenuShow (n) {
|
||||
this.$emit('dropmenu-change', n)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize (e) {
|
||||
const vm = this
|
||||
this.$chartResizeTool.start(vm, this.data, e, this.chartIndex)
|
||||
},
|
||||
startLoading (area) {
|
||||
if (area === 'screen') {
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
|
||||
} else {
|
||||
// this.showLoading = true;
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
}
|
||||
},
|
||||
endLoading (area) {
|
||||
if (area === 'screen') {
|
||||
// this.showLoadingScreen = false;
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
|
||||
} else {
|
||||
// this.showLoading = false;
|
||||
this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
|
||||
}
|
||||
},
|
||||
showLoad (chartItem) {
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartPieChart' + this.chartIndex)
|
||||
let height = Math.floor(chartItem.height / this.$chartResizeTool.stepHeight) * this.$chartResizeTool.stepHeight// 图表高度四舍五入
|
||||
if (height < this.$chartResizeTool.minHeight) {
|
||||
height = this.$chartResizeTool.minHeight
|
||||
}
|
||||
chartBox.style.height = `${height - this.$chartResizeTool.chartBlankHeight}px`
|
||||
})
|
||||
this.clearData()
|
||||
this.firstShow = false
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
this.divFirstShow = true
|
||||
},
|
||||
clearData () {
|
||||
if (getChart(this.chartIndex)) {
|
||||
getChart(this.chartIndex).clear()
|
||||
// getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
|
||||
}
|
||||
},
|
||||
screenRefreshChart () {
|
||||
this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
|
||||
},
|
||||
// 重新请求数据 刷新操作-local
|
||||
refreshChart () {
|
||||
this.dropdownMenuShow = false
|
||||
const id = this.data.id
|
||||
this.clearChart()
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
this.firstShow = false
|
||||
this.$emit('on-refresh-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.seriesItemScreen = []
|
||||
this.seriePieChart = ''
|
||||
this.startLoading('screen')
|
||||
this.$emit('on-search-data', this.data.id, this.searchTime)
|
||||
},
|
||||
clickos () {
|
||||
this.dropdownMenuShow = false
|
||||
},
|
||||
clearChart () {
|
||||
this.data = {}
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
this.dropdownMenuShow = false
|
||||
this.searchTime = []
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0])
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1])
|
||||
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
|
||||
this.screenModal = true
|
||||
},
|
||||
resize (chartItem) {
|
||||
if (getChart(this.chartIndex)) {
|
||||
const divHeight = this.$refs.legendArea.offsetHeight
|
||||
getChart(this.chartIndex).resize({ height: (this.data.height * this.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
|
||||
}
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
|
||||
this.data = chartItem
|
||||
if (chartItem.type === 'bar') {
|
||||
this.option.xAxis = {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
showAllSymbol: false,
|
||||
axisPointer: { // y轴上显示指针对应的值
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 8,
|
||||
formatter (params) {
|
||||
const dataLength = seriesItem.length || 1
|
||||
const chartWidth = (document.getElementById('chart-' + chartItem.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余
|
||||
const length = Math.ceil((chartWidth) / 16)
|
||||
let val = ''
|
||||
if (params.length > length) {
|
||||
val = params.substr(0, length) + '...'
|
||||
return val
|
||||
} else {
|
||||
return params
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const maxValueCopies = this.getMaxValue(seriesItem, chartItem)
|
||||
let dot = this.chartDot = maxValueCopies.dot || 2
|
||||
const maxValue = maxValueCopies.maxValue
|
||||
const copies = maxValueCopies.copies
|
||||
const unit = maxValueCopies.unit
|
||||
this.option.yAxis = {
|
||||
type: 'value',
|
||||
// maxInterval:{},
|
||||
// 去掉y轴--start
|
||||
minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
|
||||
maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(seriesItem.length / 5),
|
||||
// 去掉y轴--end
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
formatter (val, index) {
|
||||
const value = formatScientificNotation(val, 2)
|
||||
// const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
|
||||
if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
|
||||
dot = 2
|
||||
}
|
||||
if (dot == 0) {
|
||||
dot = 1
|
||||
}
|
||||
return unit.compute(value, index, -1, dot)
|
||||
}
|
||||
}
|
||||
// boundaryGap:[0,0.2]
|
||||
}
|
||||
const nweSeriesItem = []
|
||||
seriesItem[0].data.forEach((item, index) => {
|
||||
const obj = { ...seriesItem[0] }
|
||||
const legendShow = legend[index].alias ? legend[index].alias : legend[index].name
|
||||
obj.name = legend[index].name
|
||||
obj.data = [[legendShow, item.value]]
|
||||
obj.stack = true
|
||||
if (chartItem.param.threshold) {
|
||||
obj.markLine = {
|
||||
silent: true,
|
||||
symbol: ['circle', 'circle'],
|
||||
label: {
|
||||
distance: this.computeDistance(chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(chartItem.param.threshold)),
|
||||
formatter (params) {
|
||||
return chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(params.value)
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#d64f40',
|
||||
width: 2,
|
||||
type: 'dotted'
|
||||
},
|
||||
data: [{
|
||||
yAxis: Number(chartItem.param.threshold)
|
||||
}]
|
||||
}
|
||||
}
|
||||
nweSeriesItem.push(obj)
|
||||
})
|
||||
seriesItem = nweSeriesItem
|
||||
}
|
||||
if (filter) {
|
||||
this.stableFilter = filter
|
||||
}
|
||||
if (errorMsg && errorMsg !== '') {
|
||||
this.isError = true
|
||||
this.errorContent = errorMsg
|
||||
} else {
|
||||
this.isError = false
|
||||
this.errorContent = ''
|
||||
}
|
||||
if (seriesItem || seriesItem.data.length < 1) { // 0 为false
|
||||
this.noData = false
|
||||
} else {
|
||||
this.noData = true
|
||||
}
|
||||
this.legend = legend
|
||||
this.legendScreen = legend
|
||||
legend && this.setColor(legend.length)
|
||||
legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
|
||||
|
||||
this.$set(this.option, 'color', this.bgColorList)
|
||||
this.pieData = seriesItem
|
||||
if (area === 'showFullScreen') { // 全屏按时间查询
|
||||
this.data = chartItem
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit)
|
||||
this.initChart('screen')
|
||||
this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time
|
||||
this.endLoading('screen')
|
||||
} else {
|
||||
this.divFirstShow = true
|
||||
|
||||
this.firstShow = true // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId
|
||||
this.data = chartItem
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit)
|
||||
this.initChart('local')
|
||||
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()
|
||||
}
|
||||
},
|
||||
computeDistance (str) {
|
||||
const span = document.querySelector('.temp-dom')
|
||||
span.textContent = str
|
||||
const txtWidth = parseFloat(window.getComputedStyle(span).width)
|
||||
return Number('-' + (txtWidth + 5))
|
||||
},
|
||||
formatLegend (chartWidth, name) {
|
||||
if (!name) {
|
||||
return ''
|
||||
}
|
||||
// 计算宽度
|
||||
const span = document.querySelector('.temp-dom')
|
||||
span.textContent = name
|
||||
const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
|
||||
if (txtWidth < chartWidth) {
|
||||
return name
|
||||
} else {
|
||||
const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
|
||||
return name.slice(0, charNum) + '...'
|
||||
}
|
||||
},
|
||||
initChart (type) {
|
||||
this.option.series = this.pieData
|
||||
this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
|
||||
if (type == 'local') {
|
||||
this.initLocal()
|
||||
} else {
|
||||
this.initScreen()
|
||||
}
|
||||
},
|
||||
initLocal () {
|
||||
const self = this
|
||||
const dom = document.getElementById('pie-chart-local-' + this.chartIndex)
|
||||
if (!this.echart) {
|
||||
this.echart = echarts.init(dom)
|
||||
setChart(this.chartIndex, this.echart)
|
||||
}
|
||||
if (this.legend) {
|
||||
this.isGrey = []
|
||||
this.legend.map((item, i) => {
|
||||
const legend = {
|
||||
name: item.name,
|
||||
alias: item.alias,
|
||||
color: item.color,
|
||||
showText: this.formatLegend(dom.clientWidth, item.name)
|
||||
}
|
||||
self.isGrey.push(false)
|
||||
return legend
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
const vm = this
|
||||
setTimeout(function () {
|
||||
const divHeight = self.$refs.legendArea ? self.$refs.legendArea.offsetHeight : 20
|
||||
if (!self.chartData.height) {
|
||||
getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
|
||||
} else {
|
||||
getChart(self.chartIndex).resize({ height: (self.chartData.height * vm.stepWidth - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
|
||||
}
|
||||
self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
|
||||
self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {
|
||||
dom.style.transform = 'translateZ(0)'
|
||||
const windowWidth = window.innerWidth// 窗口宽度
|
||||
const windowHeight = window.innerHeight// 窗口高度
|
||||
const windowMouse = getMousePoint()
|
||||
// 提示框位置
|
||||
let x = 0
|
||||
let y = 0
|
||||
// 当前鼠标位置
|
||||
const pointX = point[0]
|
||||
const pointY = point[1]
|
||||
// 外层div大小
|
||||
const viewWidth = size.viewSize[0]
|
||||
// const viewHeight = size.viewSize[1]
|
||||
// 提示框大小
|
||||
const boxWidth = size.contentSize[0]
|
||||
const boxHeight = size.contentSize[1]
|
||||
if (!self.screenModal) { // 本地显示
|
||||
const chartDom = document.getElementById(self.chartData.name + '_' + self.chartData.id)
|
||||
if (chartDom) {
|
||||
// const parTop = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetTop
|
||||
const parleft = document.getElementById(self.chartData.name + '_' + self.chartData.id).offsetLeft
|
||||
|
||||
const parent = document.getElementById('tableList')
|
||||
// const parClientHeight = parent.clientHeight// 可视高度
|
||||
const parClientWidth = parent.clientWidth// 可视宽度
|
||||
// const parScrollTop = parent.scrollTop
|
||||
if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
|
||||
x = pointX + 10
|
||||
} else {
|
||||
x = pointX - boxWidth
|
||||
}
|
||||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||||
y = pointY + 15
|
||||
} else {
|
||||
y = pointY - boxHeight - 10
|
||||
}
|
||||
return [x, y]
|
||||
} else { // preview page
|
||||
if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||||
x = pointX + 15
|
||||
} else {
|
||||
x = pointX - boxWidth - 15
|
||||
}
|
||||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||||
y = pointY + 15
|
||||
} else {
|
||||
y = pointY - boxHeight - 10
|
||||
}
|
||||
return [x, y]
|
||||
}
|
||||
} else {
|
||||
if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||||
x = pointX + 10
|
||||
} else {
|
||||
x = pointX - boxWidth
|
||||
}
|
||||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||||
y = pointY + 15
|
||||
} else {
|
||||
y = pointY - boxHeight - 10
|
||||
}
|
||||
return [x, y]
|
||||
}
|
||||
})
|
||||
if (self.pieData[0]) {
|
||||
if (self.pieData[0].data.length > 0) {
|
||||
getChart(self.chartIndex).clear()
|
||||
getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
|
||||
self.noData = false
|
||||
} else {
|
||||
self.noData = true
|
||||
self.option = chartConfig.getOption('noData')
|
||||
getChart(self.chartIndex).clear()
|
||||
getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
|
||||
}
|
||||
}
|
||||
self.$refs['localLoading' + self.chartIndex] && self.$refs['localLoading' + self.chartIndex].endLoading()
|
||||
self.firstShow = true // 展示操作按键
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
initScreen () {
|
||||
const self = this
|
||||
const dom = document.getElementById('pie-chart-screen-' + this.chartIndex)
|
||||
if (!this.echartScreen) {
|
||||
this.echartScreen = echarts.init(dom)
|
||||
}
|
||||
if (this.legendScreen) {
|
||||
this.isGreyScreen = []
|
||||
this.legendScreen = this.legendScreen.map((item, i) => {
|
||||
const legend = {
|
||||
name: item.name,
|
||||
alias: item.alias,
|
||||
color: item.color,
|
||||
showText: this.formatLegend(dom.clientWidth, item.name)
|
||||
}
|
||||
self.isGreyScreen.push(false)
|
||||
return legend
|
||||
})
|
||||
}
|
||||
if (self.echartScreen) {
|
||||
self.echartScreen.clear()
|
||||
self.showLegend = true
|
||||
self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
|
||||
const divHeight = legendDiv.offsetHeight
|
||||
const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
|
||||
const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
|
||||
self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
|
||||
self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
|
||||
setTimeout(function () {
|
||||
self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
|
||||
if (self.pieData[0].data.length > 0) {
|
||||
self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
|
||||
self.noData = false
|
||||
} else {
|
||||
self.noData = true
|
||||
self.option = chartConfig.getOption('noData')
|
||||
self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
|
||||
}
|
||||
self.echartScreen.on('finished', function () {
|
||||
const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
|
||||
const divHeight = legendDiv.offsetHeight
|
||||
const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
|
||||
const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
|
||||
self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
|
||||
self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
|
||||
self.echartScreen.off('finished')
|
||||
})
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
clickLegend (legendName, index) {
|
||||
/* 点击legend
|
||||
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
|
||||
* 2.如果点击的是唯一高亮的legend，则变为全高亮状态
|
||||
* 3.否则只改变被点击的legend状态
|
||||
* */
|
||||
let highlightNum = 0 // 高亮数量
|
||||
this.isGrey.forEach(g => {
|
||||
if (!g) {
|
||||
highlightNum++
|
||||
}
|
||||
})
|
||||
const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
|
||||
const curIsGrey = this.isGrey[index] // 当前legend的状态
|
||||
const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
|
||||
|
||||
const echart = getChart(this.chartIndex)
|
||||
if (echart) {
|
||||
if (!hasGrey) { // 1.除当前legend外全置灰
|
||||
echart.dispatchAction({
|
||||
type: 'legendInverseSelect'
|
||||
})
|
||||
echart.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: legendName
|
||||
})
|
||||
this.isGrey = this.isGrey.map((g, i) => i !== index)
|
||||
} else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
|
||||
echart.dispatchAction({
|
||||
type: 'legendAllSelect'
|
||||
})
|
||||
this.isGrey = this.isGrey.map(() => false)
|
||||
} else {
|
||||
const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
|
||||
echart.dispatchAction({
|
||||
type: type,
|
||||
name: legendName
|
||||
})
|
||||
this.$set(this.isGrey, index, !this.isGrey[index])
|
||||
}
|
||||
}
|
||||
},
|
||||
clickScreenLegend (legendName, index) {
|
||||
/* 点击legend
|
||||
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
|
||||
* 2.如果点击的是唯一高亮的legend，则变为全高亮状态
|
||||
* 3.否则只改变被点击的legend状态
|
||||
* */
|
||||
let highlightNum = 0 // 高亮数量
|
||||
this.isGreyScreen.forEach(g => {
|
||||
if (!g) {
|
||||
highlightNum++
|
||||
}
|
||||
})
|
||||
const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
|
||||
const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
|
||||
const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
|
||||
|
||||
const echart = this.echartScreen
|
||||
if (echart) {
|
||||
if (!hasGrey) { // 1.除当前legend外全置灰
|
||||
echart.dispatchAction({
|
||||
type: 'legendInverseSelect'
|
||||
})
|
||||
echart.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: legendName
|
||||
})
|
||||
this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
|
||||
} else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
|
||||
echart.dispatchAction({
|
||||
type: 'legendAllSelect'
|
||||
})
|
||||
this.isGreyScreen = this.isGreyScreen.map(() => false)
|
||||
} else {
|
||||
const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
|
||||
echart.dispatchAction({
|
||||
type: type,
|
||||
name: legendName
|
||||
})
|
||||
this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
|
||||
}
|
||||
}
|
||||
},
|
||||
setColor (colorNum) {
|
||||
this.bgColorList = [
|
||||
'#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
|
||||
'#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
|
||||
'#FF8BEA', '#4D7693', '#72577C', '#99D750',
|
||||
'#DD8270', '#C475EE', '#7E83FB', '#7EB090',
|
||||
'#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
|
||||
]
|
||||
for (let i = 0; i < colorNum - 19; i++) {
|
||||
this.bgColorList.push(randomcolor())
|
||||
}
|
||||
},
|
||||
formatterFunc (params, ticket, callback) {
|
||||
const chartInfo = this.chartData
|
||||
return `
|
||||
<div>
|
||||
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
|
||||
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.seriesIndex].alias}</div>
|
||||
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
||||
<div>value</div>
|
||||
<div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value[1], null, -1, this.chartDot ? this.chartDot : 2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
getMaxValue (dataArg, chartInfo) {
|
||||
let maxValue = 0
|
||||
let minValue = 0
|
||||
if (chartInfo.unit && dataArg.length > 0) {
|
||||
maxValue = 0
|
||||
minValue = 0
|
||||
for (let j = 0; j < dataArg.length; j++) {
|
||||
for (let i = 0; i < dataArg[j].data.length; i++) {
|
||||
if (!isNaN(dataArg[j].data[i].value)) {
|
||||
maxValue = (maxValue < Number(dataArg[j].data[i].value) ? Number(dataArg[j].data[i].value) : maxValue)
|
||||
minValue = (minValue > Number(dataArg[j].data[i].value) ? Number(dataArg[j].data[i].value) : minValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const chartUnit = chartInfo.unit ? chartInfo.unit : 2
|
||||
const unit = chartDataFormat.getUnit(chartUnit)
|
||||
minValue = minValue > 0 ? 0 : minValue
|
||||
maxValue = maxValue - minValue
|
||||
maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
|
||||
let oldValue = maxValue
|
||||
let dot = 0
|
||||
if (maxValue == 1) {
|
||||
dot++
|
||||
}
|
||||
if (oldValue > 10) {
|
||||
while (oldValue > 10) {
|
||||
oldValue = oldValue / 10
|
||||
}
|
||||
} else if (oldValue < 1 && maxValue !== 0) {
|
||||
while (oldValue < 1 && oldValue > 0) {
|
||||
oldValue = oldValue * 10
|
||||
dot++
|
||||
}
|
||||
maxValue = Math.floor(oldValue) / Math.pow(10, dot)
|
||||
dot++
|
||||
}
|
||||
const copies = chartDataFormat.copies(oldValue, unit.type)
|
||||
let oldDot = 2
|
||||
if (maxValue <= 1) {
|
||||
oldDot = dot > 6 ? 6 : dot
|
||||
}
|
||||
return {
|
||||
maxValue,
|
||||
dot,
|
||||
copies,
|
||||
minValue,
|
||||
unit,
|
||||
oldDot
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.firstLoad = false
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,562 +0,0 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box" ref="resizeBox">
|
||||
<div class="chart-container chart-detail" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
|
||||
<loading :ref="'localLoading' + chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :class="{'drag-disabled': !data.draggable,}" :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" 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="{'move-able':!isLock}"><span class="el-dropdown-link chart-title-text chart-title" @click="dropdownMenuShow = !dropdownMenuShow">{{data.name}}</span></span>
|
||||
|
||||
</div>
|
||||
<div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
|
||||
<div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;">
|
||||
<div v-for="(item, index) in detail" :key="index" class="chart-sub">
|
||||
<template v-if="isNotEmptyTab(item)">
|
||||
<div class="chart-sub-title" @click="hideElement(index)">
|
||||
<span v-if="data.from !== fromRoute.endpoint"><i :class="{'nz-icon nz-icon-caret-right': show.indexOf(index) === -1,'nz-icon nz-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<div v-show="show.indexOf(index) > -1" class="chart-sub-content">
|
||||
<template v-for="(value, key, i) in item.data">
|
||||
<!-- endpoint-detail、asset、model的assetInfo的asset详情-->
|
||||
<div v-if="(data.from === fromRoute.endpoint || data.from === fromRoute.asset || data.from === fromRoute.model) && data.type === 'assetInfo' && item.type === 'basic' && assetKey[key]" :key="i" class="content-item">
|
||||
<div :id="`key-${index}-${i}`" class="content-item-key item-tip">
|
||||
<span class="content-text">{{assetKey[key]}}</span>
|
||||
<div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{assetKey[key]}}</div>
|
||||
</div>
|
||||
<div :id="`value-${index}-${i}`" class="content-item-value item-tip">
|
||||
<span v-if="key === 'name'">{{value}}</span>
|
||||
<span v-else-if="key === 'type'">{{value}}</span>
|
||||
<span v-else-if="key === 'state'">{{value}}</span>
|
||||
<span v-else-if="key === 'brand'">{{value}}</span>
|
||||
<span v-else-if="key === 'alert'" class="as-button"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i> {{value}}</span>
|
||||
<span v-else-if="key === 'endpoint'" class="as-button"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> {{value}}</span>
|
||||
<div v-else-if="key === 'tags'" class="no-overflow" style="padding-bottom: 5px;">
|
||||
<template v-if="value && value.length > 0">
|
||||
<nz-alert-tag v-for="(tagItem, tagIndex) in value" :key="tagItem.id" :cursor-point="false"
|
||||
:label="tagItem.name"
|
||||
style="margin: 5px 5px 0 0; vertical-align: middle;"
|
||||
type="normal">
|
||||
<div :id="`tag-${index}-${tagIndex}`" class="tag-value">
|
||||
<span class="content-text">{{tagItem.value.join(',')}}</span>
|
||||
</div>
|
||||
</nz-alert-tag>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</div>
|
||||
<template v-else-if="key === 'cabinet'">
|
||||
<span v-if="value&&item.data.cabinetStart&&item.data.cabinetEnd">{{value + '['+item.data.cabinetStart+'-'+item.data.cabinetEnd+']'}}</span>
|
||||
<span v-else-if="value&&!(item.data.cabinetStart||item.data.cabinetEnd)">{{value}}</span>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
<template v-else-if="key === 'pingRtt'">
|
||||
<div :class="{'green-bg': item.data.pingStatus == 1, 'red-bg': item.data.pingStatus == 1 != 1}" class="active-icon"></div>
|
||||
<span>{{value ? value + 'ms' : ''}}</span>
|
||||
</template>
|
||||
<template v-else-if="assetKey[key]">
|
||||
<span v-if="key!=='pingLastReply'" class="content-text">{{value ? value : " "}}</span>
|
||||
<span v-else class="content-text">{{value ? timeFormat(value): " "}}</span>
|
||||
<div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- endpoint-detail、asset、model的assetInfo的feature-->
|
||||
<div v-if="(data.from === fromRoute.endpoint || data.from === fromRoute.asset || data.from === fromRoute.model) && data.type === 'assetInfo' && item.type === 'attribute'" :key="i" class="content-item">
|
||||
<div :id="`key-${index}-${i}`" class="content-item-key item-tip">
|
||||
<span class="content-text">{{key}}</span>
|
||||
<div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{key}}</div>
|
||||
</div>
|
||||
|
||||
<div :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}" class="content-item-value item-tip">
|
||||
<template v-if="Array.isArray(value) && value.length>0">
|
||||
<template v-if="typeof value[0] == 'string'">
|
||||
<div v-for="(_item, _index) in value" :key="_index" class="item-value-sub">{{_item}}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-table
|
||||
ref="dataTable"
|
||||
:data="value"
|
||||
class="nz-table asset-info-table"
|
||||
height="100%"
|
||||
tooltip-effect="light"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="(_item, _index) in setLabels(value)"
|
||||
v-if="_item.show"
|
||||
:key="`col-${_index}`"
|
||||
:label="_item.label"
|
||||
:resizable="true"
|
||||
>
|
||||
<template slot-scope="scope" :column="_item">
|
||||
<template >
|
||||
<span v-html="scope.row[_item.prop]"></span>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
<template v-else-if="key">
|
||||
<span class="content-text">{{value ? value : " "}}</span>
|
||||
<div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- endpoint-detail的endpointInfo的endpoint详情-->
|
||||
<div v-else-if="data.from === fromRoute.endpoint && data.type === 'endpointInfo'" :key="i" class="content-item">
|
||||
<div :id="`key-${index}-${i}`" class="content-item-key item-tip">
|
||||
<span class="content-text">{{endpointKey[key]}}</span>
|
||||
<div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{endpointKey[key]}}</div>
|
||||
</div>
|
||||
<div :id="`value-${index}-${i}`" class="content-item-value item-tip">
|
||||
<span v-if="key === 'alert'"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i> {{value}}</span>
|
||||
<span v-else-if="key === 'asset'"><i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/> {{value}}</span>
|
||||
<span v-else-if="key === 'module'"><i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/> {{value}}</span>
|
||||
<span v-else-if="key === 'state'">
|
||||
<span style="width: auto">
|
||||
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
|
||||
<span v-if="value[0].state === 0">
|
||||
<span class="active-icon red-bg inline-block"></span>
|
||||
</span>
|
||||
<span v-else-if="value[0].state === 1">
|
||||
<span class="active-icon green-bg inline-block"></span>
|
||||
</span>
|
||||
<span v-else-if="value[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 colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
|
||||
<span v-if="value[1].state === 0">
|
||||
<span class="active-icon red-bg inline-block"></span>
|
||||
</span>
|
||||
<span v-else-if="value[1].state === 1">
|
||||
<span class="active-icon green-bg inline-block"></span>
|
||||
</span>
|
||||
<span v-else-if="value[1].state">
|
||||
<span class="active-icon gray-bg inline-block"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<template v-else-if="endpointKey[key]">
|
||||
<span class="content-text">{{value || value === 0 ? value : " "}}</span>
|
||||
<div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- alertRule-detail的详情-->
|
||||
<div v-else-if="data.from == fromRoute.rule && data.type == 'alertRuleInfo' && key != '_module_'" :key="i" class="content-item" @click="showDeep(`deep-${index}-${i}`)">
|
||||
<div :id="`key-${index}-${i}`" class="content-item-key item-tip">
|
||||
<span class="content-text">
|
||||
<span><i v-if="item.data._module_[key]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}`) > -1}"></i></span>
|
||||
<span>{{key}}</span>
|
||||
<!--<span v-if="item.data._module_[key]">{{Object.keys(item.data._module_[key]).length-1}}个module</span>-->
|
||||
</span>
|
||||
<div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{key}}</div>
|
||||
</div>
|
||||
<div :id="`value-${index}-${i}`" class="content-item-value item-tip">
|
||||
<span class="content-text">{{value ? value : " "}}</span>
|
||||
</div>
|
||||
<!-- module -->
|
||||
<el-collapse-transition>
|
||||
<div v-show="deepShow.indexOf(`deep-${index}-${i}`) > -1" class="chart-third-content">
|
||||
<template v-for="(module, mProjectName, ti) in item.data._module_" v-if="mProjectName == key">
|
||||
<div v-for="(moduleNum, moduleName, fi) in module" v-if="moduleName != '_endpoint_'" :key="fi" class="content-item" @click.stop="showDeep(`deep-${index}-${i}-${ti}-${fi}`)">
|
||||
<div :id="`key-${index}-${i}-${ti}-${fi}`" class="content-item-key item-tip deep">
|
||||
<span class="content-text">
|
||||
<span><i v-if="module._endpoint_[moduleName]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1}"></i></span>
|
||||
<span>{{moduleName}}</span>
|
||||
<!--<span v-if="module._endpoint_[moduleName]">{{Object.keys(module._endpoint_[moduleName]).length-1}}个endpoint</span>-->
|
||||
</span>
|
||||
<div :class="itemTip(`key-${index}-${i}-${ti}`, moduleName, fi, ready)" class="item-tip-hide item-tip-key el-popover">{{moduleName}}</div>
|
||||
</div>
|
||||
<div :id="`value-${index}-${i}-${ti}-${fi}`" class="content-item-value item-tip deep">
|
||||
<span class="content-text">{{moduleNum ? moduleNum : " "}}</span>
|
||||
</div>
|
||||
<!-- endpoint -->
|
||||
<el-collapse-transition>
|
||||
<div v-show="deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1" class="chart-forth-content">
|
||||
<template v-for="(endpoint, eModuleName, si) in module._endpoint_" v-if="eModuleName == moduleName">
|
||||
<div v-for="(endpointNum, endpointName, ei) in endpoint" :key="ei" class="content-item" @click.stop>
|
||||
<div :id="`key-${index}-${i}-${ti}-${fi}-${si}-${ei}`" class="content-item-key item-tip deepp">
|
||||
<span class="content-text">
|
||||
<span>{{endpointName}}</span>
|
||||
</span>
|
||||
<div :class="itemTip(`key-${index}-${i}-${ti}-${fi}-${si}`, endpointName, ei, ready)" class="item-tip-hide item-tip-key el-popover">{{endpointName}}</div>
|
||||
</div>
|
||||
<div :id="`value-${index}-${i}-${ti}-${fi}-${si}-${ei}`" class="content-item-value item-tip deepp">
|
||||
<span class="content-text">{{endpointNum ? endpointNum : " "}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="data.resizable&&!isLock" class="vue-resizable-handle" @mousedown="startResize"></span>
|
||||
</div>
|
||||
<!--preview -->
|
||||
<chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loading from '../common/loading'
|
||||
import chartPreview from './chartPreview'
|
||||
import * as echarts from 'echarts'
|
||||
import nzAlertTag from '../page/alert/nzAlertTag'
|
||||
import bus from '../../libs/bus'
|
||||
import { fromRoute } from '@/components/common/js/constants'
|
||||
export default {
|
||||
name: 'chartDetail',
|
||||
components: {
|
||||
loading: loading,
|
||||
'chart-preview': chartPreview,
|
||||
'nz-alert-tag': nzAlertTag
|
||||
},
|
||||
props: {
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId'
|
||||
},
|
||||
chartIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
isLock: { type: Boolean, default: false }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fromRoute,
|
||||
ready: false,
|
||||
data: {}, // 该图表信息,chartItem
|
||||
detail: [], // 展示的详情
|
||||
unit: {},
|
||||
show: [0], // 控制展开/隐藏
|
||||
deepShow: [], // 控制二级/三级的展开/隐藏
|
||||
isError: false,
|
||||
errorContent: '',
|
||||
loading: Object,
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
// 查询数据使用
|
||||
filter: {
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
},
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow: false,
|
||||
dropdownMenuShow: false,
|
||||
divFirstShow: false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
|
||||
oldSearchTime: [],
|
||||
|
||||
assetKey: {
|
||||
// host: this.$t('asset.host'),
|
||||
id: 'Id',
|
||||
name: this.$t('overall.name'),
|
||||
manageIp: this.$t('overall.manageIp'),
|
||||
type: this.$t('overall.type'),
|
||||
// assetType: this.$t('asset.assetType'),
|
||||
// sn: this.$t('asset.device'),
|
||||
state: this.$t('asset.assetState'),
|
||||
pingRtt: this.$t('asset.assetPing'),
|
||||
dataCenter: this.$t('asset.dataCenter'),
|
||||
cabinet: this.$t('asset.cabinet'),
|
||||
brand: this.$t('asset.brand'),
|
||||
model: this.$t('asset.model'),
|
||||
tags: this.$t('overall.labels'),
|
||||
alert: this.$t('asset.alerts'),
|
||||
endpoint: this.$t('asset.modules')
|
||||
// vendor: this.$t('asset.vendor'),
|
||||
// purchaseDate: this.$t('asset.procurementDate'),
|
||||
// principal: this.$t('asset.principal'),
|
||||
// tel: this.$t('asset.principalTel'),
|
||||
// pingStatus: this.$t('asset.assetPing'),
|
||||
// pingLastReply: this.$t('asset.lastReply'),
|
||||
|
||||
},
|
||||
projectKey: {
|
||||
id: 'ID',
|
||||
name: this.$t('overall.name'),
|
||||
remark: this.$t('overall.remark'),
|
||||
alertStat: this.$t('project.chart.alertStat')
|
||||
},
|
||||
moduleKey: {
|
||||
id: 'ID',
|
||||
name: this.$t('overall.name'),
|
||||
type: this.$t('overall.type'),
|
||||
remark: this.$t('overall.remark'),
|
||||
endpointStat: this.$t('project.chart.endpointStat'),
|
||||
alertStat: this.$t('project.chart.alertStat')
|
||||
},
|
||||
endpointKey: {
|
||||
id: 'ID',
|
||||
name: this.$t('overall.name'),
|
||||
// type: this.$t('overall.type'),
|
||||
project: this.$t('overall.project'),
|
||||
module: this.$t('project.module.module'),
|
||||
asset: this.$t('overall.asset'),
|
||||
alert: this.$t('project.endpoint.alerts'),
|
||||
state: this.$t('project.endpoint.state')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
itemTip () {
|
||||
return function (type, content, index, ready) {
|
||||
const className = 'item-tip-show'
|
||||
this.$nextTick(() => {
|
||||
if (ready) {
|
||||
const cellDom = document.querySelector(`#${type}-${index}`)
|
||||
const spanDom = document.querySelector(`#${type}-${index} .content-text`)
|
||||
if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
|
||||
document.querySelector(`#${type}-${index}>.el-popover`).classList.add(className)
|
||||
} else {
|
||||
document.querySelector(`#${type}-${index}>.el-popover`).classList.remove(className)
|
||||
}
|
||||
}
|
||||
})
|
||||
return ''
|
||||
}
|
||||
},
|
||||
isNotEmptyTab () {
|
||||
return function (item) {
|
||||
return item.data && Object.keys(item.data).length > 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize (e) {
|
||||
const vm = this
|
||||
this.$chartResizeTool.start(vm, this.data, e)
|
||||
},
|
||||
setLabels: function (source) {
|
||||
let labels = Object.keys(source[0])
|
||||
labels = labels.map(item => {
|
||||
return {
|
||||
label: this.replaceSplit(item),
|
||||
prop: item,
|
||||
show: true
|
||||
}
|
||||
})
|
||||
return labels
|
||||
},
|
||||
replaceSplit (key) {
|
||||
if (key) {
|
||||
return key.replace(/\$_\$/g, ' ')
|
||||
}
|
||||
},
|
||||
hideElement (index) {
|
||||
if (this.data.from === fromRoute.endpoint) {
|
||||
return
|
||||
}
|
||||
if (this.show.indexOf(index) > -1) {
|
||||
this.show.splice(this.show.indexOf(index), 1)
|
||||
} else {
|
||||
this.show.push(index)
|
||||
}
|
||||
},
|
||||
showDeep (index) {
|
||||
if (this.deepShow.indexOf(index) > -1) {
|
||||
this.deepShow.splice(this.deepShow.indexOf(index), 1)
|
||||
} else {
|
||||
this.deepShow.push(index)
|
||||
}
|
||||
},
|
||||
startLoading (area) {
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
},
|
||||
endLoading (area) {
|
||||
this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
|
||||
},
|
||||
preview () {
|
||||
this.$refs.chartsPreview.show(this.data)
|
||||
},
|
||||
resize () {
|
||||
const container = document.querySelector('#chartInfoDiv' + this.chartIndex)
|
||||
container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight}px)`
|
||||
},
|
||||
showLoad (chartItem) {
|
||||
this.$nextTick(() => {
|
||||
this.resize()
|
||||
})
|
||||
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)
|
||||
},
|
||||
clearChart () {
|
||||
this.data = {}
|
||||
},
|
||||
|
||||
// 设置数据, filter区分
|
||||
setData (chartItem, detail, panelId, filter, area, errorMsg) {
|
||||
if (errorMsg && errorMsg !== '') {
|
||||
this.isError = true
|
||||
this.errorContent = errorMsg
|
||||
} else {
|
||||
this.isError = false
|
||||
this.errorContent = ''
|
||||
}
|
||||
this.divFirstShow = true
|
||||
|
||||
this.firstShow = true // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId
|
||||
this.data = chartItem
|
||||
this.detail = detail
|
||||
// console.info(this.data, this.detail)
|
||||
/* if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表
|
||||
this.$nextTick(() => {
|
||||
this.initChart(this.detail[0].data.stateSeries)
|
||||
})
|
||||
} */
|
||||
this.endLoading()
|
||||
},
|
||||
initChart (series) {
|
||||
series.forEach((item) => {
|
||||
item.areaStyle = {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgb(35,191,154)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgb(255, 255, 255)' // 100% 处的颜色
|
||||
}],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
})
|
||||
const option = {
|
||||
title: { show: false },
|
||||
grid: { top: 20, bottom: 20 },
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
extraCssText: 'z-index:3100;',
|
||||
position: [100, 1],
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
},
|
||||
padding: 3,
|
||||
formatter: function (param) {
|
||||
let time = param[0].data[0]
|
||||
time = bus.computeTimezone(time)
|
||||
const date = new Date(time)
|
||||
let hour = date.getHours()
|
||||
hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
|
||||
let minute = date.getMinutes()
|
||||
minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
|
||||
|
||||
let value = param[0].data[1]
|
||||
if (value == '1') {
|
||||
value = 'up'
|
||||
} else {
|
||||
value = 'down'
|
||||
}
|
||||
return [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('/') + ' ' + [hour, minute].join(':') + '\n' + value
|
||||
}
|
||||
},
|
||||
legend: { show: false },
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: 'time'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false
|
||||
},
|
||||
useUTC: false, // 使用本地时间
|
||||
visualMap: {
|
||||
show: false,
|
||||
pieces: [{
|
||||
gt: -0.5,
|
||||
lt: 0.5,
|
||||
color: '#d64f40'
|
||||
}, {
|
||||
gt: 0.6,
|
||||
lt: 1.5,
|
||||
color: '#50d050'
|
||||
}]
|
||||
},
|
||||
series: series
|
||||
}
|
||||
const chart = echarts.init(document.querySelector('#littleChart'))
|
||||
chart && chart.setOption(option)// 创建图表
|
||||
},
|
||||
timeFormat (val) {
|
||||
return this.utcTimeToTimezoneStr(val)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.firstLoad = false
|
||||
setTimeout(() => {
|
||||
this.ready = true
|
||||
}, 300)
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.colorFA901C{
|
||||
color: #fa901c;
|
||||
}
|
||||
.endpoint-cell-left{
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,313 +0,0 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-group" ref="resizeBox">
|
||||
<div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">
|
||||
<span @click="showListChange">
|
||||
<i class="nz-icon nz-icon-arrow-down" :class="showList?'':'is-active'"/>
|
||||
</span>
|
||||
{{chartData.name}}
|
||||
<span v-show="!showList" class="collapse-content">({{chartData.children.length}} charts)</span>
|
||||
</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span v-has="'main_edit'" :title="$t('dashboard.panel.createChartTitle')" class="" @click="addGroupItemChart">
|
||||
<i class="nz-icon nz-icon-plus"></i>
|
||||
</span>
|
||||
<!-- <span @click="showAllScreen" class="" :title="$t('dashboard.screen')">-->
|
||||
<!-- <i class="nz-icon nz-icon-maxview"></i>-->
|
||||
<!-- </span>-->
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
|
||||
</span>
|
||||
<!-- <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">-->
|
||||
<!-- <span v-has="'main_edit'" :title="$t('dashboard.panel.createChartTitle')" class="" @click="addGroupItemChart">-->
|
||||
<!-- <i class="nz-icon nz-icon-plus"></i>-->
|
||||
<!-- </span>-->
|
||||
<!-- </span>-->
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li v-has="'main_delete'" v-if="from !== 'chartTemp'" class="el-dropdown-menu__item" @click="removeChart">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||||
<!-- <li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">-->
|
||||
<!-- <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>-->
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<div :id="'chartUrl'+chartIndex" class="mt-10 url-container" v-show="showList">
|
||||
<chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter" :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId" @on-edit-group-chart="editGroupItem" @on-duplicate-group-chart="duplicateGroupItem" @on-remove-chart="removeChartGroup" @moveGroupItem="moveGroupItem" @on-remove-group-chart="removeGroupItem" :groupId="chartData.id"></chart-list-group>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
<div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
|
||||
<div :id="'staticContainer'+chartIndex" class="center-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loading from '../common/loading'
|
||||
import chartListGroup from './chart-list-group'
|
||||
export default {
|
||||
name: 'chartGroup',
|
||||
components: {
|
||||
loading: loading,
|
||||
chartListGroup
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId'
|
||||
},
|
||||
chartIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
from: { type: String },
|
||||
isLock: { type: Boolean, default: false },
|
||||
filter: {},
|
||||
panelLock: { type: Boolean, default: false },
|
||||
dataList: {}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
unit: {},
|
||||
|
||||
images: '',
|
||||
loading: Object,
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow: false,
|
||||
dragTitleShow: false,
|
||||
dropdownMenuShow: false,
|
||||
minHeight: 200,
|
||||
chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
|
||||
titleHeight: 38, // title-height:28,magrin-bottom:10
|
||||
paddingBottom: 6,
|
||||
divFirstShow: false,
|
||||
showStatic: false,
|
||||
showList: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize (e) {
|
||||
const vm = this
|
||||
this.$chartResizeTool.start(vm, this.chartData, e)
|
||||
},
|
||||
resize (chartItem) {
|
||||
const chartBox = document.getElementById('chartUrlDiv' + this.chartIndex)
|
||||
chartBox.querySelector('.url-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
|
||||
},
|
||||
setData (chartItem) {
|
||||
this.data = chartItem
|
||||
},
|
||||
showLoad (chartItem) {
|
||||
this.data = chartItem
|
||||
this.panelIdInner = this.panelId
|
||||
// 设置高度
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem)
|
||||
})
|
||||
this.divFirstShow = true
|
||||
},
|
||||
setStaticContent: function () {
|
||||
const that = this
|
||||
this.$nextTick(() => {
|
||||
const staticDiv = document.querySelector('#staticContainer' + this.chartIndex)
|
||||
staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
|
||||
that.firstShow = true
|
||||
that.endLoading()
|
||||
})
|
||||
},
|
||||
setLoadFrame () {
|
||||
const that = this
|
||||
this.$nextTick(() => {
|
||||
const iframe = document.querySelector('#urlContainer' + this.chartIndex)
|
||||
// 处理兼容行问题
|
||||
if (iframe.attachEvent) {
|
||||
iframe.attachEvent('onload', function () {
|
||||
// iframe加载完毕以后执行操作
|
||||
that.firstShow = true
|
||||
// console.log('iframe已加载完毕');
|
||||
that.endLoading()
|
||||
})
|
||||
} else {
|
||||
iframe.onload = function () {
|
||||
// iframe加载完毕以后执行操作
|
||||
that.firstShow = true
|
||||
// console.log('iframe已加载完毕');
|
||||
that.endLoading()
|
||||
}
|
||||
}
|
||||
iframe.src = that.data.param.url
|
||||
})
|
||||
},
|
||||
initDialog () {
|
||||
this.startLoading('screen')
|
||||
if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
|
||||
this.showStatic = true
|
||||
this.setStaticContentFull()
|
||||
} else {
|
||||
this.showStatic = false
|
||||
this.setLoadFrameFull()
|
||||
}
|
||||
},
|
||||
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] && this.$refs['localLoading' + this.chartIndex].endLoading()
|
||||
}
|
||||
},
|
||||
clearChart () {
|
||||
this.data = {}
|
||||
},
|
||||
screenRefreshChart () {
|
||||
('urlContainerFull' + this.chartIndex).window.location.reload()
|
||||
},
|
||||
// 重新请求数据 刷新操作-local
|
||||
refreshChart () {
|
||||
this.dropdownMenuShow = false
|
||||
// this.startLoading()
|
||||
this.firstShow = false
|
||||
this.$refs.listGroup.refresh()
|
||||
},
|
||||
// 编辑图表
|
||||
editChart () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-edit-chart-block', this.data.id)
|
||||
},
|
||||
editGroupItem (chart) {
|
||||
chart.isGroup = true
|
||||
this.$emit('on-edit-group-chart', chart)
|
||||
},
|
||||
duplicateGroupItem (chart) {
|
||||
chart.isGroup = true
|
||||
this.$emit('on-duplicate-group-chart', chart)
|
||||
},
|
||||
// 删除该图表
|
||||
removeChart () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-remove-chart-block', this.data.id)
|
||||
},
|
||||
removeGroupItem (chart) {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-remove-group-chart', chart)
|
||||
},
|
||||
// 删除group 下的该图表
|
||||
removeChartGroup (chart) {
|
||||
this.$emit('on-remove-group-chart', chart)
|
||||
},
|
||||
addGroupItemChart () {
|
||||
this.$emit('on-add-group-item-chart', this.data.id)
|
||||
},
|
||||
clickos () {
|
||||
this.dropdownMenuShow = false
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
this.dropdownMenuShow = false
|
||||
this.screenModal = true
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
moveGroupItem (groupList) {
|
||||
this.$emit('moveGroupItem', { groupId: this.data.id, children: groupList })
|
||||
},
|
||||
setLoadFrameFull () {
|
||||
const that = this
|
||||
this.$nextTick(() => {
|
||||
const iframe = document.querySelector('#urlContainerFull' + this.chartIndex)
|
||||
|
||||
// 处理兼容行问题
|
||||
if (iframe.attachEvent) {
|
||||
iframe.attachEvent('onload', function () {
|
||||
// iframe加载完毕以后执行操作
|
||||
that.firstShow = true
|
||||
that.endLoading('screen')
|
||||
})
|
||||
} else {
|
||||
iframe.onload = function () {
|
||||
// iframe加载完毕以后执行操作
|
||||
that.firstShow = true
|
||||
that.endLoading('screen')
|
||||
}
|
||||
}
|
||||
|
||||
iframe.src = this.data.param.url
|
||||
})
|
||||
},
|
||||
setStaticContentFull: function () {
|
||||
const that = this
|
||||
this.$nextTick(() => {
|
||||
const staticDiv = document.querySelector('#staticContainerFull' + this.chartIndex)
|
||||
staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
|
||||
that.firstShow = true
|
||||
that.endLoading('screen')
|
||||
})
|
||||
},
|
||||
showListChange () {
|
||||
this.showList = !this.showList
|
||||
if (this.showList) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.listGroup.resize()
|
||||
})
|
||||
}
|
||||
const scrollbarWrap = document.getElementById('dashboardScrollbar')
|
||||
this.$emit('loadChartData', scrollbarWrap.scrollTop)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dropdownMenuShow (n) {
|
||||
this.$emit('dropmenu-change', n)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.firstLoad = false
|
||||
if (this.chartData.param) {
|
||||
this.showList = !this.chartData.param.collapse
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,658 +0,0 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-echarts" ref="resizeBox">
|
||||
<div class="chart-single-stat" :id="'chartPieChart'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :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>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<!-- <span class="chart-title-text">{{chartData.name}}</span>-->
|
||||
<span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
|
||||
<transition name="el-fade-in-linear">
|
||||
<span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
|
||||
</transition>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div :id="'pie-chart-local-'+chartIndex" ref="pieChartLocal" style="display: flex;justify-content: center"></div>
|
||||
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||
<div class='legend-container' ref="legendArea" v-show="firstShow">
|
||||
<div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
|
||||
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--全屏-->
|
||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" @opened="initChart('screen')"
|
||||
:visible.sync="screenModal"
|
||||
width="96%" @close="screenModal = false" :modal-append-to-body="false">
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{data.name}}</span>
|
||||
<div class="float-right panel-calendar dialog-tool">
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-stat-screen-container" >
|
||||
<div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
|
||||
<div :id="'screenLegendArea'+chartIndex" class="legend-container legend-container-screen">
|
||||
<div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
|
||||
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
|
||||
<br/><!--bgColorList[index]-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartDataFormat from './chartDataFormat'
|
||||
import loading from '../common/loading'
|
||||
import * as echarts from 'echarts'
|
||||
import { getChart, setChart, getMousePoint } from '../common/js/common'
|
||||
import chartConfig from '../page/dashboard/overview/chartConfig'
|
||||
import { randomcolor } from '../common/js/radomcolor/randomcolor'
|
||||
import chartDataList from '@/components/common/mixin/chartDataList'
|
||||
import { chartResizeTool } from '@/components/common/js/tools'
|
||||
export default {
|
||||
name: 'pieChart',
|
||||
components: {
|
||||
loading: loading
|
||||
},
|
||||
props: {
|
||||
tempDom: Object,
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId'
|
||||
},
|
||||
chartIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
from: { type: String },
|
||||
isLock: { type: Boolean, default: false }
|
||||
},
|
||||
mixins: [chartDataList],
|
||||
data () {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
noData: false,
|
||||
unit: {},
|
||||
isError: false,
|
||||
errorContent: '',
|
||||
seriesItem: [], // 保存信息
|
||||
seriesItemScreen: [], // 全屏数据
|
||||
pieData: [],
|
||||
mapping: '', // 满足valueMapping时 mapping的值
|
||||
images: '',
|
||||
loading: Object,
|
||||
items: {
|
||||
metric_name: [], // 每条数据列名称
|
||||
xAxis: [],
|
||||
theData: [] // series数据组
|
||||
},
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
// 查询数据使用
|
||||
filter: {
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
},
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow: false,
|
||||
dragTitleShow: false,
|
||||
dropdownMenuShow: false,
|
||||
divFirstShow: false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
|
||||
oldSearchTime: [],
|
||||
legend: [],
|
||||
legendScreen: [],
|
||||
isGrey: [],
|
||||
isGreyScreen: [],
|
||||
echart: null,
|
||||
echartScreen: null,
|
||||
bgColorList: [],
|
||||
stableFilter: {},
|
||||
option: {
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: 'center',
|
||||
top: 'middle'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(221,228,237,1)',
|
||||
borderColor: 'rgba(255,255,255,0)',
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
axisPointer: {
|
||||
snap: false,
|
||||
animation: false
|
||||
},
|
||||
extraCssText: 'z-index:1000;'
|
||||
},
|
||||
series: null,
|
||||
stepWidth: null
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
dropdownMenuShow (n) {
|
||||
this.$emit('dropmenu-change', n)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize (e) {
|
||||
const vm = this
|
||||
this.$chartResizeTool.start(vm, this.data, e, this.chartIndex)
|
||||
},
|
||||
startLoading (area) {
|
||||
if (area === 'screen') {
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
|
||||
} else {
|
||||
// this.showLoading = true;
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
}
|
||||
},
|
||||
endLoading (area) {
|
||||
if (area === 'screen') {
|
||||
// this.showLoadingScreen = false;
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
|
||||
} else {
|
||||
// this.showLoading = false;
|
||||
this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
|
||||
}
|
||||
},
|
||||
showLoad (chartItem) {
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartPieChart' + this.chartIndex)
|
||||
let height = Math.floor(chartItem.height / this.$chartResizeTool.stepHeight) * this.$chartResizeTool.stepHeight// 图表高度四舍五入
|
||||
if (height < this.$chartResizeTool.minHeight) {
|
||||
height = this.$chartResizeTool.minHeight
|
||||
}
|
||||
chartBox.style.height = `${height - this.$chartResizeTool.chartBlankHeight}px`
|
||||
})
|
||||
this.clearData()
|
||||
this.firstShow = false
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
this.divFirstShow = true
|
||||
},
|
||||
clearData () {
|
||||
if (getChart(this.chartIndex)) {
|
||||
getChart(this.chartIndex).clear()
|
||||
// getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
|
||||
}
|
||||
},
|
||||
screenRefreshChart () {
|
||||
this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
|
||||
},
|
||||
// 重新请求数据 刷新操作-local
|
||||
refreshChart () {
|
||||
this.dropdownMenuShow = false
|
||||
const id = this.data.id
|
||||
this.clearChart()
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
this.firstShow = false
|
||||
this.$emit('on-refresh-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.seriesItemScreen = []
|
||||
this.seriePieChart = ''
|
||||
this.startLoading('screen')
|
||||
this.$emit('on-search-data', this.data.id, this.searchTime)
|
||||
},
|
||||
clickos () {
|
||||
this.dropdownMenuShow = false
|
||||
},
|
||||
clearChart () {
|
||||
this.data = {}
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
this.dropdownMenuShow = false
|
||||
this.searchTime = []
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0])
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1])
|
||||
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
|
||||
this.screenModal = true
|
||||
},
|
||||
resize (chartItem) {
|
||||
if (getChart(this.chartIndex)) {
|
||||
const divHeight = this.$refs.legendArea.offsetHeight
|
||||
getChart(this.chartIndex).resize({ height: (this.data.height * this.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
|
||||
}
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
|
||||
if (filter) {
|
||||
this.stableFilter = filter
|
||||
}
|
||||
if (errorMsg && errorMsg !== '') {
|
||||
this.isError = true
|
||||
this.errorContent = errorMsg
|
||||
} else {
|
||||
this.isError = false
|
||||
this.errorContent = ''
|
||||
}
|
||||
if (seriesItem || seriesItem.data.length < 1) { // 0 为false
|
||||
this.noData = false
|
||||
} else {
|
||||
this.noData = true
|
||||
}
|
||||
this.legend = legend
|
||||
this.legendScreen = legend
|
||||
legend && this.setColor(legend.length)
|
||||
legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
|
||||
|
||||
this.$set(this.option, 'color', this.bgColorList)
|
||||
this.pieData = seriesItem
|
||||
if (area === 'showFullScreen') { // 全屏按时间查询
|
||||
this.data = chartItem
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit)
|
||||
this.initChart('screen')
|
||||
this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time
|
||||
this.endLoading('screen')
|
||||
} else {
|
||||
this.divFirstShow = true
|
||||
|
||||
this.firstShow = true // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId
|
||||
this.data = chartItem
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit)
|
||||
this.initChart('local')
|
||||
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()
|
||||
}
|
||||
},
|
||||
formatLegend (chartWidth, name) {
|
||||
if (!name) {
|
||||
return ''
|
||||
}
|
||||
// 计算宽度
|
||||
const span = document.querySelector('.temp-dom')
|
||||
span.textContent = name
|
||||
const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
|
||||
if (txtWidth < chartWidth) {
|
||||
return name
|
||||
} else {
|
||||
const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
|
||||
return name.slice(0, charNum) + '...'
|
||||
}
|
||||
},
|
||||
initChart: function (type) {
|
||||
this.option.series = this.pieData
|
||||
this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
|
||||
if (type == 'local') {
|
||||
this.initLocal()
|
||||
} else {
|
||||
this.initScreen()
|
||||
}
|
||||
},
|
||||
initLocal: function () {
|
||||
const self = this
|
||||
const dom = document.getElementById('pie-chart-local-' + this.chartIndex)
|
||||
if (!this.echart) {
|
||||
this.echart = echarts.init(dom)
|
||||
setChart(this.chartIndex, this.echart)
|
||||
}
|
||||
if (this.legend) {
|
||||
this.isGrey = []
|
||||
this.legend.map((item, i) => {
|
||||
const legend = {
|
||||
name: item.name,
|
||||
alias: item.alias,
|
||||
color: item.color,
|
||||
showText: this.formatLegend(dom.clientWidth, item.name)
|
||||
}
|
||||
self.isGrey.push(false)
|
||||
return legend
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
const vm = this
|
||||
setTimeout(function () {
|
||||
const divHeight = self.$refs.legendArea ? self.$refs.legendArea.offsetHeight : 20
|
||||
if (!self.chartData.height) {
|
||||
getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
|
||||
} else {
|
||||
getChart(self.chartIndex).resize({ height: (self.chartData.height * vm.stepWidth - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
|
||||
}
|
||||
self.option.tooltip && self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
|
||||
self.option.tooltip && self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {
|
||||
dom.style.transform = 'translateZ(0)'
|
||||
const windowWidth = window.innerWidth// 窗口宽度
|
||||
const windowHeight = window.innerHeight// 窗口高度
|
||||
const windowMouse = getMousePoint()
|
||||
// 提示框位置
|
||||
let x = 0
|
||||
let y = 0
|
||||
// 当前鼠标位置
|
||||
const pointX = point[0]
|
||||
const pointY = point[1]
|
||||
// 外层div大小
|
||||
const viewWidth = size.viewSize[0]
|
||||
// const viewHeight = size.viewSize[1]
|
||||
// 提示框大小
|
||||
const boxWidth = size.contentSize[0]
|
||||
const boxHeight = size.contentSize[1]
|
||||
if (!self.screenModal) { // 本地显示
|
||||
const chartDom = document.getElementById(self.chartData.name + '_' + self.chartData.id)
|
||||
if (chartDom) {
|
||||
// const parTop = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetTop
|
||||
const parleft = document.getElementById(self.chartData.name + '_' + self.chartData.id).offsetLeft
|
||||
|
||||
const parent = document.getElementById('tableList')
|
||||
// const parClientHeight = parent.clientHeight// 可视高度
|
||||
const parClientWidth = parent.clientWidth// 可视宽度
|
||||
// const parScrollTop = parent.scrollTop
|
||||
if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
|
||||
x = pointX + 10
|
||||
} else {
|
||||
x = pointX - boxWidth
|
||||
}
|
||||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||||
y = pointY + 15
|
||||
} else {
|
||||
y = pointY - boxHeight - 10
|
||||
}
|
||||
return [x, y]
|
||||
} else { // preview page
|
||||
if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||||
x = pointX + 15
|
||||
} else {
|
||||
x = pointX - boxWidth - 15
|
||||
}
|
||||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||||
y = pointY + 15
|
||||
} else {
|
||||
y = pointY - boxHeight - 10
|
||||
}
|
||||
return [x, y]
|
||||
}
|
||||
} else {
|
||||
if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||||
x = pointX + 10
|
||||
} else {
|
||||
x = pointX - boxWidth
|
||||
}
|
||||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||||
y = pointY + 15
|
||||
} else {
|
||||
y = pointY - boxHeight - 10
|
||||
}
|
||||
return [x, y]
|
||||
}
|
||||
})
|
||||
if (self.pieData[0].data.length > 0) {
|
||||
getChart(self.chartIndex).clear()
|
||||
getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
|
||||
self.noData = false
|
||||
} else {
|
||||
self.noData = true
|
||||
self.option = chartConfig.getOption('noData')
|
||||
getChart(self.chartIndex).clear()
|
||||
getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
|
||||
}
|
||||
|
||||
self.$refs['localLoading' + self.chartIndex] && self.$refs['localLoading' + self.chartIndex].endLoading()
|
||||
self.firstShow = true // 展示操作按键
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
initScreen: function () {
|
||||
const self = this
|
||||
const dom = document.getElementById('pie-chart-screen-' + this.chartIndex)
|
||||
if (!this.echartScreen) {
|
||||
this.echartScreen = echarts.init(dom)
|
||||
}
|
||||
if (this.legendScreen) {
|
||||
this.isGreyScreen = []
|
||||
this.legendScreen = this.legendScreen.map((item, i) => {
|
||||
const legend = {
|
||||
name: item.name,
|
||||
alias: item.alias,
|
||||
color: item.color,
|
||||
showText: this.formatLegend(dom.clientWidth, item.name)
|
||||
}
|
||||
self.isGreyScreen.push(false)
|
||||
return legend
|
||||
})
|
||||
}
|
||||
if (self.echartScreen) {
|
||||
self.echartScreen.clear()
|
||||
self.showLegend = true
|
||||
self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
|
||||
const divHeight = legendDiv.offsetHeight
|
||||
const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
|
||||
const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
|
||||
self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
|
||||
self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
|
||||
setTimeout(function () {
|
||||
if (self.pieData[0].data.length > 0) {
|
||||
self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
|
||||
self.noData = false
|
||||
} else {
|
||||
self.noData = true
|
||||
self.option = chartConfig.getOption('noData')
|
||||
self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
|
||||
}
|
||||
self.echartScreen.on('finished', function () {
|
||||
const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
|
||||
const divHeight = legendDiv.offsetHeight
|
||||
const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
|
||||
const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
|
||||
self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
|
||||
self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
|
||||
self.echartScreen.off('finished')
|
||||
})
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
clickLegend (legendName, index) {
|
||||
/* 点击legend
|
||||
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
|
||||
* 2.如果点击的是唯一高亮的legend，则变为全高亮状态
|
||||
* 3.否则只改变被点击的legend状态
|
||||
* */
|
||||
let highlightNum = 0 // 高亮数量
|
||||
this.isGrey.forEach(g => {
|
||||
if (!g) {
|
||||
highlightNum++
|
||||
}
|
||||
})
|
||||
const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
|
||||
const curIsGrey = this.isGrey[index] // 当前legend的状态
|
||||
const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
|
||||
|
||||
const echart = getChart(this.chartIndex)
|
||||
if (echart) {
|
||||
if (!hasGrey) { // 1.除当前legend外全置灰
|
||||
echart.dispatchAction({
|
||||
type: 'legendInverseSelect'
|
||||
})
|
||||
echart.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: legendName
|
||||
})
|
||||
this.isGrey = this.isGrey.map((g, i) => i !== index)
|
||||
} else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
|
||||
echart.dispatchAction({
|
||||
type: 'legendAllSelect'
|
||||
})
|
||||
this.isGrey = this.isGrey.map(() => false)
|
||||
} else {
|
||||
const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
|
||||
echart.dispatchAction({
|
||||
type: type,
|
||||
name: legendName
|
||||
})
|
||||
this.$set(this.isGrey, index, !this.isGrey[index])
|
||||
}
|
||||
}
|
||||
},
|
||||
clickScreenLegend (legendName, index) {
|
||||
/* 点击legend
|
||||
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
|
||||
* 2.如果点击的是唯一高亮的legend，则变为全高亮状态
|
||||
* 3.否则只改变被点击的legend状态
|
||||
* */
|
||||
let highlightNum = 0 // 高亮数量
|
||||
this.isGreyScreen.forEach(g => {
|
||||
if (!g) {
|
||||
highlightNum++
|
||||
}
|
||||
})
|
||||
const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
|
||||
const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
|
||||
const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
|
||||
|
||||
const echart = this.echartScreen
|
||||
if (echart) {
|
||||
if (!hasGrey) { // 1.除当前legend外全置灰
|
||||
echart.dispatchAction({
|
||||
type: 'legendInverseSelect'
|
||||
})
|
||||
echart.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: legendName
|
||||
})
|
||||
this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
|
||||
} else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
|
||||
echart.dispatchAction({
|
||||
type: 'legendAllSelect'
|
||||
})
|
||||
this.isGreyScreen = this.isGreyScreen.map(() => false)
|
||||
} else {
|
||||
const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
|
||||
echart.dispatchAction({
|
||||
type: type,
|
||||
name: legendName
|
||||
})
|
||||
this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
|
||||
}
|
||||
}
|
||||
},
|
||||
setColor (colorNum) {
|
||||
this.bgColorList = [
|
||||
'#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
|
||||
'#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
|
||||
'#FF8BEA', '#4D7693', '#72577C', '#99D750',
|
||||
'#DD8270', '#C475EE', '#7E83FB', '#7EB090',
|
||||
'#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
|
||||
]
|
||||
for (let i = 0; i < colorNum - 19; i++) {
|
||||
this.bgColorList.push(randomcolor())
|
||||
}
|
||||
},
|
||||
formatterFunc: function (params, ticket, callback) {
|
||||
const chartInfo = this.chartData
|
||||
return `
|
||||
<div>
|
||||
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
|
||||
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.dataIndex].alias}</div>
|
||||
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
||||
<div>value</div>
|
||||
<div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value, null, -1, 2)}</div>
|
||||
</div>
|
||||
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
||||
<div>percent</div>
|
||||
<div>${params.percent}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.firstLoad = false
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,482 +0,0 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-single" ref="resizeBox">
|
||||
<div class="chart-single-stat" :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :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>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
|
||||
<transition name="el-fade-in-linear">
|
||||
<span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
|
||||
</transition>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="mt-10 single-stat-container" v-cloak v-show="firstShow" >
|
||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" :style="{color:mapping?mapping.color.text:'',background:mapping?mapping.color.bac:''}" class="single-stat-content">
|
||||
{{serieSingleStat}}
|
||||
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--全屏-->
|
||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
|
||||
:visible.sync="screenModal"
|
||||
width="96%" @close="screenModal = false" :modal-append-to-body="false">
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{data.name}}</span>
|
||||
<div class="float-right panel-calendar dialog-tool">
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-stat-screen-container" >
|
||||
<div id="chartScreenContainer" ref="chartScreenContainer" :style="{color:mapping?mapping.color.text:'',background:mapping?mapping.color.bac:''}" class="single-stat-content">
|
||||
{{serieSingleStat}}
|
||||
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||
</div>
|
||||
</div>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartDataFormat from './chartDataFormat'
|
||||
import chartDataList from '@/components/common/mixin/chartDataList'
|
||||
|
||||
export default {
|
||||
name: 'chartSingleStat',
|
||||
mixins: [chartDataList, chartDataList],
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId'
|
||||
},
|
||||
chartIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
from: { type: String },
|
||||
isLock: { type: Boolean, default: false }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
noData: false,
|
||||
unit: {},
|
||||
isError: false,
|
||||
errorContent: '',
|
||||
seriesItem: [], // 保存信息
|
||||
seriesItemScreen: [], // 全屏数据
|
||||
serieSingleStat: '',
|
||||
mapping: '', // 满足valueMapping时 mapping的值
|
||||
images: '',
|
||||
loading: Object,
|
||||
items: {
|
||||
metric_name: [], // 每条数据列名称
|
||||
xAxis: [],
|
||||
theData: [] // series数据组
|
||||
},
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
// 查询数据使用
|
||||
filter: {
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
},
|
||||
stableFilter: {},
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow: false,
|
||||
dragTitleShow: false,
|
||||
dropdownMenuShow: false,
|
||||
divFirstShow: false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
|
||||
oldSearchTime: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
dropdownMenuShow (n) {
|
||||
this.$emit('dropmenu-change', n)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize (e) {
|
||||
const vm = this
|
||||
this.$chartResizeTool.start(vm, this.data, e)
|
||||
},
|
||||
dragResize: function (e) {
|
||||
const diffWidth = 20 // 界面的宽度空白的地方的宽度
|
||||
const chartBoxPadding = 22
|
||||
const targetDiv = document.getElementById('chartSingleStatDiv' + this.chartIndex) // e.target.parentNode.parentNode;.children[0]
|
||||
const targetDivContainer = document.getElementById('listContainer') // e.target.parentNode.parentNode;.children[0]
|
||||
const maxWidth = targetDivContainer.offsetWidth - diffWidth
|
||||
const minWidth = maxWidth / 12
|
||||
const stepWidth = maxWidth / 12
|
||||
const stepHeight = 10
|
||||
|
||||
// 得到点击时该容器的宽高：
|
||||
const targetDivHeight = targetDiv.offsetHeight
|
||||
const targetDivWidth = targetDiv.offsetWidth
|
||||
const startY = e.clientY
|
||||
const startX = e.clientX
|
||||
const _this = this
|
||||
|
||||
document.onmousemove = function (e) {
|
||||
e.preventDefault()
|
||||
// 得到鼠标拖动的宽高距离：取绝对值
|
||||
const distY = Math.abs(e.clientY - startY)
|
||||
const distX = Math.abs(e.clientX - startX)
|
||||
|
||||
// 往上方拖动：
|
||||
if (e.clientY < startY) {
|
||||
targetDiv.style.height = targetDivHeight - distY + 'px'
|
||||
// heightTmp = targetDivHeight-distY;
|
||||
}
|
||||
if (e.clientX < startX) {
|
||||
targetDiv.style.width = targetDivWidth - distX + 'px'
|
||||
// widthTmp = targetDivWidth-distX;
|
||||
}
|
||||
// 往下方拖动：
|
||||
if (e.clientY > startY) {
|
||||
targetDiv.style.height = (targetDivHeight + distY) + 'px'
|
||||
// heightTmp = targetDivHeight+distY;
|
||||
}
|
||||
if (e.clientX > startX) {
|
||||
targetDiv.style.width = (targetDivWidth + distX) + 'px'
|
||||
// widthTmp = targetDivWidth+distX;
|
||||
}
|
||||
|
||||
if (parseInt(targetDiv.style.height) <= _this.minHeight) {
|
||||
targetDiv.style.height = _this.minHeight + 'px'
|
||||
// heightTmp = _this.minHeight;
|
||||
}
|
||||
|
||||
if (parseInt(targetDiv.style.width) >= maxWidth) {
|
||||
targetDiv.style.width = maxWidth + 'px'
|
||||
// widthTmp = maxWidth;
|
||||
}
|
||||
if (parseInt(targetDiv.style.width) <= minWidth) {
|
||||
targetDiv.style.width = minWidth + 'px'
|
||||
// widthTmp = minWidth;
|
||||
}
|
||||
// 调整表格大小
|
||||
const containerHeight = parseInt(targetDiv.style.height)
|
||||
const containerWidth = parseInt(targetDiv.style.width)
|
||||
const chartBox = document.getElementsByClassName('chartBox')
|
||||
chartBox[_this.chartIndex].style.width = (containerWidth + chartBoxPadding) + 'px'
|
||||
// chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
|
||||
// 表格的高度
|
||||
const chartSingleStatBox = document.getElementById('chartContainer' + _this.chartIndex)
|
||||
chartSingleStatBox.style.height = `${containerHeight - _this.titleHeight}px`// -75-32+25
|
||||
}
|
||||
|
||||
document.onmouseup = function () {
|
||||
const targetDivHeightNew = parseInt(targetDiv.style.height)
|
||||
// let targetDivHeightNew = heightTmp
|
||||
const targetDivWidthNew = parseInt(targetDiv.style.width)
|
||||
// let targetDivWidthNew = widthTmp;
|
||||
|
||||
const diffHeight = Math.abs(targetDivHeight - targetDivHeightNew)
|
||||
if (targetDivHeight > targetDivHeightNew) {
|
||||
const finalDiffHeight = Math.floor(diffHeight / stepHeight) * stepHeight
|
||||
// alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
|
||||
targetDiv.style.height = (targetDivHeight - finalDiffHeight) + 'px'
|
||||
}
|
||||
if (targetDivHeight < targetDivHeightNew) {
|
||||
const finalDiffHeight = Math.ceil(diffHeight / stepHeight) * stepHeight
|
||||
targetDiv.style.height = (targetDivHeight + finalDiffHeight) + 'px'
|
||||
}
|
||||
|
||||
let span = _this.data.span
|
||||
if (targetDivWidth > targetDivWidthNew) {
|
||||
span = Math.floor((targetDivWidthNew * 12) / maxWidth)
|
||||
const finalWidth = Math.floor((targetDivWidthNew * 12) / maxWidth) * stepWidth
|
||||
if ((finalWidth) < minWidth) {
|
||||
targetDiv.style.width = minWidth + 'px'
|
||||
span = 1
|
||||
} else {
|
||||
targetDiv.style.width = finalWidth + 'px'
|
||||
}
|
||||
}
|
||||
if (targetDivWidth < targetDivWidthNew) {
|
||||
span = Math.ceil((targetDivWidthNew * 12) / maxWidth)
|
||||
const spanUnit = Math.ceil((targetDivWidthNew * 12) / maxWidth)
|
||||
const finalWidth = spanUnit * stepWidth
|
||||
if (finalWidth > maxWidth || spanUnit === 12) {
|
||||
targetDiv.style.width = maxWidth + 'px'
|
||||
span = 12
|
||||
} else {
|
||||
targetDiv.style.width = finalWidth + 'px'
|
||||
}
|
||||
}
|
||||
// 调整表格大小
|
||||
const containerHeight = parseInt(targetDiv.style.height)
|
||||
const containerWidth = parseInt(targetDiv.style.width)
|
||||
|
||||
const chartBox = document.getElementsByClassName('chartBox')
|
||||
chartBox[_this.chartIndex].style.width = (containerWidth + chartBoxPadding) + 'px'
|
||||
// chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
|
||||
// 表格的高度
|
||||
const chartSingleStatBox = document.getElementById('chartContainer' + _this.chartIndex)
|
||||
chartSingleStatBox.style.height = `${containerHeight - _this.titleHeight}px`
|
||||
|
||||
const modifyParams = {
|
||||
id: _this.data.id,
|
||||
span: span,
|
||||
height: (containerHeight + _this.chartSpaceHeight),
|
||||
prev: parseInt(_this.data.prev),
|
||||
next: parseInt(_this.data.next)
|
||||
}
|
||||
targetDiv.style.height = (Math.floor((containerHeight + _this.chartSpaceHeight) / 10) * 10 - _this.chartSpaceHeight) + 'px'// 图表实际渲染高度，采用个位数字四舍五入
|
||||
_this.$put('panel/' + _this.panelIdInner + '/charts/modify', modifyParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
// 更新当前图表数据
|
||||
_this.data.span = span
|
||||
_this.data.height = containerHeight + _this.chartSpaceHeight
|
||||
_this.$emit('on-drag-chart', _this.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
_this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
_this.$message.error(response.error)
|
||||
} else {
|
||||
_this.$message.error(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
document.onmousemove = null
|
||||
document.onmouseup = null
|
||||
}
|
||||
},
|
||||
startLoading (area) {
|
||||
if (area === 'screen') {
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
|
||||
} else {
|
||||
// this.showLoading = true;
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
}
|
||||
},
|
||||
endLoading (area) {
|
||||
if (area === 'screen') {
|
||||
// this.showLoadingScreen = false;
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
|
||||
} else {
|
||||
// this.showLoading = false;
|
||||
this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
|
||||
}
|
||||
},
|
||||
showLoad (chartItem) {
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
|
||||
let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
|
||||
if (height < this.minHeight) {
|
||||
height = this.minHeight
|
||||
}
|
||||
chartBox.style.height = `${height - this.chartSpaceHeight}px`
|
||||
const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
|
||||
singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
|
||||
})
|
||||
this.startLoading()
|
||||
this.divFirstShow = true
|
||||
},
|
||||
screenRefreshChart () {
|
||||
this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
|
||||
},
|
||||
// 重新请求数据 刷新操作-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.seriesItemScreen = []
|
||||
this.serieSingleStat = ''
|
||||
this.startLoading('screen')
|
||||
this.$emit('on-search-data', this.data.id, this.searchTime)
|
||||
},
|
||||
clickos () {
|
||||
this.dropdownMenuShow = false
|
||||
},
|
||||
clearChart () {
|
||||
this.data = {}
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
this.dropdownMenuShow = false
|
||||
this.searchTime = []
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0])
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1])
|
||||
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
|
||||
|
||||
this.seriesItemScreen = this.seriesItem
|
||||
this.screenModal = true
|
||||
},
|
||||
resize (chartItem) {
|
||||
document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .single-stat-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData (chartItem, seriesItem, panelId, filter, area, errorMsg) {
|
||||
if (filter) {
|
||||
this.stableFilter = filter
|
||||
}
|
||||
if (errorMsg && errorMsg !== '') {
|
||||
this.isError = true
|
||||
this.errorContent = errorMsg
|
||||
} else {
|
||||
this.isError = false
|
||||
this.errorContent = ''
|
||||
}
|
||||
if (seriesItem || (typeof seriesItem === 'number' && seriesItem == 0) || (typeof seriesItem === 'string' && seriesItem != '')) { // 0 为false
|
||||
this.noData = false
|
||||
} else {
|
||||
this.noData = true
|
||||
}
|
||||
|
||||
if (area === 'showFullScreen') { // 全屏按时间查询
|
||||
this.data = chartItem
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit)
|
||||
if (Number(seriesItem)) {
|
||||
const singleStatTmp = parseFloat(Number(seriesItem).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
|
||||
if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
|
||||
const type = chartItem.param.valueMapping.type
|
||||
const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
|
||||
let mapping
|
||||
if (type == 'value') {
|
||||
mapping = mappings.find(item => { return item.value == singleStatTmp })
|
||||
} else {
|
||||
mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
|
||||
}
|
||||
this.mapping = mapping
|
||||
if (this.mapping && !this.mapping.color) {
|
||||
this.mapping.color = { bac: '#fff', text: '#000' }
|
||||
}
|
||||
this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
|
||||
} else {
|
||||
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
|
||||
}
|
||||
} else {
|
||||
this.serieSingleStat = seriesItem
|
||||
}
|
||||
this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time
|
||||
this.endLoading('screen')
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem)
|
||||
})
|
||||
this.divFirstShow = true
|
||||
|
||||
this.firstShow = true // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId
|
||||
this.data = chartItem
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit)
|
||||
if (Number(seriesItem)) {
|
||||
const singleStatTmp = parseFloat(Number(seriesItem).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
|
||||
if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
|
||||
const type = chartItem.param.valueMapping.type
|
||||
const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
|
||||
let mapping
|
||||
if (type == 'value') {
|
||||
mapping = mappings.find(item => { return item.value == singleStatTmp })
|
||||
} else {
|
||||
mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
|
||||
}
|
||||
this.mapping = mapping
|
||||
if (this.mapping && !this.mapping.color) {
|
||||
this.mapping.color = { bac: '#fff', text: '#000' }
|
||||
}
|
||||
this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
|
||||
} else {
|
||||
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
|
||||
}
|
||||
} else {
|
||||
this.serieSingleStat = seriesItem
|
||||
}
|
||||
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()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.firstLoad = false
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,290 +0,0 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-url" ref="resizeBox">
|
||||
<div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<!-- <span class="chart-title-text">{{chartData.name}}</span>-->
|
||||
<span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
|
||||
<transition name="el-fade-in-linear">
|
||||
<span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
|
||||
</transition>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
|
||||
</div>
|
||||
<div :id="'chartUrl'+chartIndex" class="mt-10 url-container" v-show="firstShow" >
|
||||
<iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto v-if="!showStatic"
|
||||
style="z-index:5000;padding-bottom:6px;"
|
||||
></iframe>
|
||||
</div>
|
||||
<div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
|
||||
<div :id="'staticContainer'+chartIndex" class="center-content"></div>
|
||||
</div>
|
||||
<!--全屏-->
|
||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @opened="initDialog" @close="screenModal = false" >
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{chartData.name}}</span>
|
||||
</div>
|
||||
<iframe :id="'urlContainerFull'+chartIndex" frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
|
||||
style="z-index:5000;padding-bottom:6px;"
|
||||
></iframe>
|
||||
<div style="position: absolute;width: 100%; top:calc(50% - 100px);text-align: center;" v-if="showStatic">
|
||||
<div :id="'staticContainerFull'+chartIndex" class="center-content"></div>
|
||||
</div>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loading from '../common/loading'
|
||||
import chartDataList from '@/components/common/mixin/chartDataList'
|
||||
|
||||
export default {
|
||||
name: 'chartUrl',
|
||||
components: {
|
||||
loading: loading
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId'
|
||||
},
|
||||
chartIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
from: { type: String },
|
||||
isLock: { type: Boolean, default: false }
|
||||
},
|
||||
mixins: [chartDataList],
|
||||
data () {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
unit: {},
|
||||
|
||||
images: '',
|
||||
loading: Object,
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow: false,
|
||||
dragTitleShow: false,
|
||||
dropdownMenuShow: false,
|
||||
minHeight: 200,
|
||||
chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
|
||||
titleHeight: 38, // title-height:28,magrin-bottom:10
|
||||
paddingBottom: 6,
|
||||
divFirstShow: false,
|
||||
showStatic: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize (e) {
|
||||
const vm = this
|
||||
this.$chartResizeTool.start(vm, this.chartData, e)
|
||||
},
|
||||
resize (chartItem) {
|
||||
const chartBox = document.getElementById('chartUrlDiv' + this.chartIndex)
|
||||
chartBox.querySelector('.url-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
|
||||
},
|
||||
showLoad (chartItem) {
|
||||
this.data = chartItem
|
||||
this.panelIdInner = this.panelId
|
||||
// 设置高度
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem)
|
||||
})
|
||||
this.startLoading()
|
||||
|
||||
if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
|
||||
this.showStatic = true
|
||||
this.setStaticContent()
|
||||
} else {
|
||||
this.showStatic = false
|
||||
this.setLoadFrame()
|
||||
}
|
||||
this.divFirstShow = true
|
||||
},
|
||||
setStaticContent: function () {
|
||||
const that = this
|
||||
this.$nextTick(() => {
|
||||
const staticDiv = document.querySelector('#staticContainer' + this.chartIndex)
|
||||
staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
|
||||
that.firstShow = true
|
||||
that.endLoading()
|
||||
})
|
||||
},
|
||||
setLoadFrame () {
|
||||
const that = this
|
||||
this.$nextTick(() => {
|
||||
const iframe = document.querySelector('#urlContainer' + this.chartIndex)
|
||||
// 处理兼容行问题
|
||||
if (iframe.attachEvent) {
|
||||
iframe.attachEvent('onload', function () {
|
||||
// iframe加载完毕以后执行操作
|
||||
that.firstShow = true
|
||||
// console.log('iframe已加载完毕');
|
||||
that.endLoading()
|
||||
})
|
||||
} else {
|
||||
iframe.onload = function () {
|
||||
// iframe加载完毕以后执行操作
|
||||
that.firstShow = true
|
||||
// console.log('iframe已加载完毕');
|
||||
that.endLoading()
|
||||
}
|
||||
}
|
||||
iframe.src = that.data.param.url
|
||||
})
|
||||
},
|
||||
initDialog () {
|
||||
this.startLoading('screen')
|
||||
if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
|
||||
this.showStatic = true
|
||||
this.setStaticContentFull()
|
||||
} else {
|
||||
this.showStatic = false
|
||||
this.setLoadFrameFull()
|
||||
}
|
||||
},
|
||||
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] && this.$refs['localLoading' + this.chartIndex].endLoading()
|
||||
}
|
||||
},
|
||||
clearChart () {
|
||||
this.data = {}
|
||||
},
|
||||
screenRefreshChart () {
|
||||
('urlContainerFull' + this.chartIndex).window.location.reload()
|
||||
},
|
||||
// 重新请求数据 刷新操作-local
|
||||
refreshChart () {
|
||||
this.dropdownMenuShow = false
|
||||
this.startLoading()
|
||||
this.firstShow = false
|
||||
const iframe = document.querySelector('#urlContainer' + this.chartIndex)
|
||||
iframe.src = ''
|
||||
iframe.src = this.data.param.url
|
||||
},
|
||||
// 编辑图表
|
||||
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)
|
||||
},
|
||||
clickos () {
|
||||
this.dropdownMenuShow = false
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
this.dropdownMenuShow = false
|
||||
this.screenModal = true
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
setLoadFrameFull () {
|
||||
const that = this
|
||||
this.$nextTick(() => {
|
||||
const iframe = document.querySelector('#urlContainerFull' + this.chartIndex)
|
||||
|
||||
// 处理兼容行问题
|
||||
if (iframe.attachEvent) {
|
||||
iframe.attachEvent('onload', function () {
|
||||
// iframe加载完毕以后执行操作
|
||||
that.firstShow = true
|
||||
// console.log('iframe已加载完毕');
|
||||
that.endLoading('screen')
|
||||
})
|
||||
} else {
|
||||
iframe.onload = function () {
|
||||
// iframe加载完毕以后执行操作
|
||||
that.firstShow = true
|
||||
// console.log('iframe已加载完毕');
|
||||
that.endLoading('screen')
|
||||
}
|
||||
}
|
||||
|
||||
iframe.src = this.data.param.url
|
||||
})
|
||||
},
|
||||
setStaticContentFull: function () {
|
||||
const that = this
|
||||
this.$nextTick(() => {
|
||||
const staticDiv = document.querySelector('#staticContainerFull' + this.chartIndex)
|
||||
staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
|
||||
that.firstShow = true
|
||||
that.endLoading('screen')
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dropdownMenuShow (n) {
|
||||
this.$emit('dropmenu-change', n)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.firstLoad = false
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,225 +0,0 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-single" ref="resizeBox">
|
||||
<div class="chart-text" :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<!-- <span class="chart-title-text">{{chartData.name}}</span>-->
|
||||
<span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
|
||||
<transition name="el-fade-in-linear">
|
||||
<span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
|
||||
</transition>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="mt-10 rich-text-container" v-cloak v-show="firstShow" >
|
||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="text-content" >
|
||||
<diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram" :chartInfo="chartData"/>
|
||||
</div>
|
||||
</div>
|
||||
<!--全屏-->
|
||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
|
||||
:visible.sync="screenModal"
|
||||
width="96%" @close="screenModal = false" :modal-append-to-body="false">
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{data.name}}</span>
|
||||
</div>
|
||||
<div class="rich-text-screen-container" >
|
||||
<div id="chartScreenContainer" ref="chartScreenContainer" class="text-content" >
|
||||
<diagram :topoData="data.param.topo" :fromChart="true" :isScreen="true" :topologyIndexF="chartData.id + '-' + 'chartIndex'"/>
|
||||
</div>
|
||||
</div>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock" :fromChart="true" :chartInfo="chartData"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loading from '../common/loading'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import diagram from '@/components/common/ChartDiagram/diagram'
|
||||
import chartDataList from '@/components/common/mixin/chartDataList'
|
||||
export default {
|
||||
name: 'diagram-chart',
|
||||
components: {
|
||||
loading: loading,
|
||||
diagram
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId'
|
||||
},
|
||||
chartIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
from: { type: String },
|
||||
isLock: { type: Boolean, default: false }
|
||||
},
|
||||
mixins: [chartDataList],
|
||||
data () {
|
||||
return {
|
||||
data: {
|
||||
param: {
|
||||
topo: {}
|
||||
}
|
||||
}, // 该图表信息,chartItem
|
||||
noData: false,
|
||||
unit: {},
|
||||
text: '', // 保存信息
|
||||
screenText: '', // 全屏数据
|
||||
loading: Object,
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow: false,
|
||||
dragTitleShow: false,
|
||||
dropdownMenuShow: false,
|
||||
divFirstShow: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
dropdownMenuShow (n) {
|
||||
this.$emit('dropmenu-change', n)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize (e) {
|
||||
const vm = this
|
||||
this.$chartResizeTool.start(vm, this.data, e)
|
||||
},
|
||||
startLoading (area) {
|
||||
if (area === 'screen') {
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
|
||||
} else {
|
||||
// this.showLoading = true;
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
}
|
||||
},
|
||||
endLoading (area) {
|
||||
if (area === 'screen') {
|
||||
// this.showLoadingScreen = false;
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
|
||||
} else {
|
||||
// this.showLoading = false;
|
||||
this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
|
||||
}
|
||||
},
|
||||
showLoad (chartItem) {
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
|
||||
let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
|
||||
if (height < this.minHeight) {
|
||||
height = this.minHeight
|
||||
}
|
||||
chartBox.style.height = `${height - this.chartSpaceHeight}px`
|
||||
const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
|
||||
singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
|
||||
})
|
||||
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)
|
||||
},
|
||||
clickos () {
|
||||
this.dropdownMenuShow = false
|
||||
},
|
||||
clearChart () {
|
||||
this.data = {}
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
this.dropdownMenuShow = false
|
||||
this.screenModal = true
|
||||
},
|
||||
resize (chartItem) {
|
||||
document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
|
||||
this.$refs.diagram.winResize()
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData (chartItem, seriesItem, panelId, filter, area) {
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem)
|
||||
})
|
||||
this.divFirstShow = true
|
||||
|
||||
this.firstShow = true // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId
|
||||
this.data = chartItem
|
||||
this.text = chartItem.param.text
|
||||
this.screenText = chartItem.param.text
|
||||
this.endLoading()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.firstLoad = false
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,731 +0,0 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-single" ref="resizeBox">
|
||||
<div class="chart-text" :id="'logsDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-popover
|
||||
v-if="isError"
|
||||
placement="top-start"
|
||||
:close-delay=10
|
||||
trigger="hover"
|
||||
popper-class="chart-error-popper">
|
||||
<div >{{errorContent}}</div>
|
||||
<span slot="reference" 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>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="mt-10 rich-text-container" v-cloak v-show="firstShow" >
|
||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="logs-content" >
|
||||
<div v-if="showTab.length==2" class="show-tab-icon">
|
||||
<i class="nz-icon nz-icon-link-chart" :class="showTabActive == '1'?'is-active-icon':''" @click="showTabActive = '1'"/>
|
||||
<i class="nz-icon nz-icon-logs" :class="showTabActive == '2'?'is-active-icon':''" @click="showTabActive = '2'"/>
|
||||
</div>
|
||||
<div v-show="showTab.indexOf('1') > -1 && showTabActive == '1'" name="1" title="Graph" style="height: 100%">
|
||||
<div class="chart-room" style="height: 100%">
|
||||
<chart ref="logChart" :unit="chartUnit"></chart>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="showTab.indexOf('2') > -1 && showTabActive == '2'" name="2" title="Logs" class="logs-box">
|
||||
<log-tab ref="logDetail" v-show="!noData" :log-data="logData" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
|
||||
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--全屏-->
|
||||
<el-dialog class="nz-dialog table-chart-dialog"
|
||||
:title="$t('dashboard.panel.view')"
|
||||
:visible.sync="screenModal"
|
||||
width="90%"
|
||||
@close="screenModal = false;screenLegendListMore=[]"
|
||||
style="margin-top: 1vh !important;"
|
||||
@opened="initDialog"
|
||||
@closed="closeDialog"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<el-popover
|
||||
v-if="isError"
|
||||
placement="top-start"
|
||||
:close-delay=10
|
||||
trigger="hover"
|
||||
popper-class="chart-error-popper">
|
||||
<div >{{errorContent}}</div>
|
||||
<span slot="reference" class="panel-info-corner panel-info-corner--error">
|
||||
<i class="nz-icon nz-icon-warning fa-model" ></i>
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
<div slot="title" >
|
||||
<span class="nz-dialog-title">{{chartData.name}}</span>
|
||||
<div class="float-right panel-calendar dialog-tool">
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
|
||||
</div>
|
||||
</div>
|
||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="logs-content" >
|
||||
<div v-if="showTabScreen.length==2" class="show-tab-icon">
|
||||
<i class="nz-icon nz-icon-link-chart" :class="showTabScreenActive == '1'?'is-active-icon':''" @click="showTabScreenActive = '1'"/>
|
||||
<i class="nz-icon nz-icon-logs" :class="showTabScreenActive == '2'?'is-active-icon':''" @click="showTabScreenActive = '2'"/>
|
||||
</div>
|
||||
<div v-show="showTabScreen.indexOf('1') > -1 && showTabScreenActive == '1'" name="1" title="Graph" style="height: 100%">
|
||||
<div class="chart-room" style="height: 100%">
|
||||
<chart ref="logChartScreen" :unit="chartUnit"></chart>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="showTabScreen.indexOf('2') > -1 && showTabScreenActive == '2'" name="2" title="Logs" class="logs-box">
|
||||
<log-tab ref="logDetailScreen" v-show="!noDataScreen" :log-data="logDataScreen" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
|
||||
<div class="chart-no-data" v-show="noDataScreen">No Data</div>
|
||||
</div>
|
||||
</div>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loading from '../common/loading'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import axios from 'axios'
|
||||
import chart from '@/components/page/dashboard/overview/chart'
|
||||
import logTab from '@/components/page/dashboard/explore/logTab'
|
||||
import bus from '@/libs/bus'
|
||||
import logsTempData from '@/components/charts/logsTempData'
|
||||
import { fromRoute } from '@/components/common/js/constants'
|
||||
import { dealLegendAlias } from '@/components/common/js/tools'
|
||||
export default {
|
||||
name: 'logs',
|
||||
components: {
|
||||
loading: loading,
|
||||
chart,
|
||||
logTab
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId'
|
||||
},
|
||||
chartIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
from: { type: String },
|
||||
startTime: {},
|
||||
endTime: {},
|
||||
isLock: { type: Boolean, default: false }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
noData: false,
|
||||
noDataScreen: false,
|
||||
unit: {},
|
||||
text: '', // 保存信息
|
||||
screenText: '', // 全屏数据
|
||||
loading: Object,
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow: false,
|
||||
dragTitleShow: false,
|
||||
dropdownMenuShow: false,
|
||||
divFirstShow: false,
|
||||
showTab: ['1', '2'],
|
||||
showTabActive: '1',
|
||||
showTabScreen: ['1', '2'],
|
||||
showTabScreenActive: '1',
|
||||
chartUnit: 2,
|
||||
logData: [],
|
||||
logDataScreen: [],
|
||||
tabIndex: 1,
|
||||
isError: false,
|
||||
errorContent: '',
|
||||
seriesItem: '',
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
|
||||
oldSearchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
|
||||
filter: {},
|
||||
stableFilter: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
dropdownMenuShow (n) {
|
||||
this.$emit('dropmenu-change', n)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize (e) {
|
||||
const vm = this
|
||||
this.$chartResizeTool.start(vm, this.data, e)
|
||||
},
|
||||
startLoading (area) {
|
||||
if (area === 'screen') {
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
|
||||
} else {
|
||||
// this.showLoading = true;
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
}
|
||||
},
|
||||
endLoading (area) {
|
||||
if (area === 'screen') {
|
||||
// this.showLoadingScreen = false;
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
|
||||
} else {
|
||||
// this.showLoading = false;
|
||||
this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
|
||||
}
|
||||
},
|
||||
showLoad (chartItem) {
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('logsDiv' + this.chartIndex)
|
||||
let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
|
||||
if (height < this.minHeight) {
|
||||
height = this.minHeight
|
||||
}
|
||||
chartBox.style.height = `${height - this.chartSpaceHeight}px`
|
||||
const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
|
||||
singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
|
||||
})
|
||||
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)
|
||||
},
|
||||
clickos () {
|
||||
this.dropdownMenuShow = false
|
||||
},
|
||||
clearChart () {
|
||||
this.data = {}
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
this.dropdownMenuShow = false
|
||||
// 初始化同步时间
|
||||
this.filter.start_time = this.stableFilter.start_time
|
||||
this.filter.end_time = this.stableFilter.end_time
|
||||
// this.searchTime = this.oldSearchTime;
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0])
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1])
|
||||
this.screenModal = true
|
||||
this.isGreyScreen = []
|
||||
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
|
||||
this.seriesItemScreen = this.seriesItem
|
||||
this.showTabScreenActive = '1'
|
||||
this.screenModal = true
|
||||
},
|
||||
resize (chartItem) {
|
||||
document.querySelector('#logsDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData (chartItem, seriesItem, panelId, filter, area) {
|
||||
if (filter) { // 保存数据,用于同步时间
|
||||
this.stableFilter = 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.$nextTick(() => {
|
||||
this.resize(chartItem)
|
||||
})
|
||||
this.divFirstShow = true
|
||||
|
||||
this.firstShow = true // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId
|
||||
this.data = chartItem
|
||||
this.text = chartItem.param.text
|
||||
this.screenText = chartItem.param.text
|
||||
this.chartUnit = chartItem.unit
|
||||
this.endLoading()
|
||||
this.queryLogData(this.data.param.limit)
|
||||
},
|
||||
queryLogData (limit) { // log的chart和table是一个请求
|
||||
if (!limit) {
|
||||
limit = this.data.param.limit || 1000
|
||||
}
|
||||
this.expressions = this.chartData.elements.map(elements => elements.expression)
|
||||
if (this.expressions.length > 0) {
|
||||
const requestArr = []
|
||||
this.expressions.forEach((item, index) => {
|
||||
if (item != '' && this.from.trim() != fromRoute.chartTemp) {
|
||||
requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(this.startTime) + '&end=' + this.$stringTimeParseToUnix(this.endTime) + '&limit=' + limit))
|
||||
} else if (item != '' && this.from.trim() == fromRoute.chartTemp) {
|
||||
requestArr.push(logsTempData[index % 2])
|
||||
}
|
||||
})
|
||||
if (requestArr.length > 0) {
|
||||
this.showIntroduce = false
|
||||
this.saveDisabled = false
|
||||
}
|
||||
axios.all(requestArr).then(res => {
|
||||
const errorRowIndex = []
|
||||
res.forEach((r, i) => {
|
||||
if (typeof r === 'string') {
|
||||
errorRowIndex.push(i)
|
||||
}
|
||||
})
|
||||
if (errorRowIndex.length > 0) {
|
||||
this.$message.error(this.$t('tip.errorInRow') + ': ' + errorRowIndex.map(e => e + 1).join(' ,'))
|
||||
res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
|
||||
}
|
||||
if (res.length > 0) {
|
||||
const logData = res.map(r => r.data)
|
||||
const hasGraph = logData.some(d => d.resultType === 'matrix')
|
||||
const hasLog = logData.some(d => d.resultType === 'streamsFormat')
|
||||
const graphTabIndex = this.showTab.indexOf('1')
|
||||
if (hasGraph) {
|
||||
if (graphTabIndex === -1) {
|
||||
this.showTab.push('1')
|
||||
}
|
||||
} else {
|
||||
if (graphTabIndex > -1) {
|
||||
this.showTab.splice(graphTabIndex, 1)
|
||||
}
|
||||
}
|
||||
const logTabIndex = this.showTab.indexOf('2')
|
||||
if (hasLog) {
|
||||
if (logTabIndex === -1) {
|
||||
this.showTab.push('2')
|
||||
}
|
||||
this.noData = true
|
||||
logData.forEach(item => {
|
||||
if (item.resultType === 'streamsFormat' && item.result.length > 0) {
|
||||
this.noData = false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (logTabIndex > -1) {
|
||||
this.showTab.splice(logTabIndex, 1)
|
||||
}
|
||||
}
|
||||
this.showTabActive = this.showTab[0]
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.logDetail) {
|
||||
this.$refs.logDetail.time = this.chartData.param.time
|
||||
this.$refs.logDetail.wrapLines = this.chartData.param.wrapLines
|
||||
this.$refs.logDetail.operations.descending = this.chartData.param.descending
|
||||
}
|
||||
logData.forEach((item, index) => {
|
||||
item.result.forEach(result => {
|
||||
result.elements = this.chartData.elements[index]
|
||||
})
|
||||
})
|
||||
this.logData = logData
|
||||
this.logDataScreen = logData
|
||||
hasGraph && this.loadLogGraph()
|
||||
})
|
||||
}
|
||||
}).catch(e => {
|
||||
this.isError = true
|
||||
this.errorContent = this.$t('terminallog.statusItem.unknownError')
|
||||
this.$message.error(this.$t('terminallog.statusItem.unknownError'))
|
||||
})
|
||||
}
|
||||
},
|
||||
queryLogDataScreen (limit) { // log的chart和table是一个请求
|
||||
if (!limit) {
|
||||
limit = this.data.param.limit || 1000
|
||||
}
|
||||
this.expressions = this.chartData.elements.map(elements => elements.expression)
|
||||
if (this.expressions.length > 0) {
|
||||
const requestArr = []
|
||||
this.expressions.forEach((item, index) => {
|
||||
if (item != '' && this.from.trim() != fromRoute.chartTemp) {
|
||||
requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(this.searchTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.searchTime[1]) + '&limit=' + limit))
|
||||
} else if (item != '' && this.from.trim() == fromRoute.chartTemp) {
|
||||
requestArr.push(logsTempData[index % 2])
|
||||
}
|
||||
})
|
||||
if (requestArr.length > 0) {
|
||||
this.showIntroduce = false
|
||||
this.saveDisabled = false
|
||||
}
|
||||
axios.all(requestArr).then(res => {
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
|
||||
const errorRowIndex = []
|
||||
res.forEach((r, i) => {
|
||||
if (typeof r === 'string') {
|
||||
errorRowIndex.push(i)
|
||||
}
|
||||
})
|
||||
if (errorRowIndex.length > 0) {
|
||||
this.$message.error(this.$t('tip.errorInRow') + ': ' + errorRowIndex.map(e => e + 1).join(' ,'))
|
||||
res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
|
||||
}
|
||||
if (res.length > 0) {
|
||||
const logData = res.map(r => r.data)
|
||||
const hasGraph = logData.some(d => d.resultType === 'matrix')
|
||||
const hasLog = logData.some(d => d.resultType === 'streamsFormat')
|
||||
const graphTabIndex = this.showTabScreen.indexOf('1')
|
||||
if (hasGraph) {
|
||||
if (graphTabIndex === -1) {
|
||||
this.showTabScreen.push('1')
|
||||
}
|
||||
} else {
|
||||
if (graphTabIndex > -1) {
|
||||
this.showTabScreen.splice(graphTabIndex, 1)
|
||||
}
|
||||
}
|
||||
const logTabIndex = this.showTabScreen.indexOf('2')
|
||||
if (hasLog) {
|
||||
if (logTabIndex === -1) {
|
||||
this.showTabScreen.push('2')
|
||||
}
|
||||
this.noDataScreen = true
|
||||
logData.forEach(item => {
|
||||
if (item.resultType === 'streamsFormat' && item.result.length > 0) {
|
||||
this.noDataScreen = false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (logTabIndex > -1) {
|
||||
this.showTabScreen.splice(logTabIndex, 1)
|
||||
}
|
||||
}
|
||||
this.showTabScreenActive = this.showTabScreen[0]
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.logDetail) {
|
||||
this.$refs.logDetail.time = this.chartData.param.time
|
||||
this.$refs.logDetail.wrapLines = this.chartData.param.wrapLines
|
||||
this.$refs.logDetail.operations.descending = this.chartData.param.descending
|
||||
}
|
||||
logData.forEach((item, index) => {
|
||||
item.result.forEach(result => {
|
||||
result.elements = this.chartData.elements[index]
|
||||
})
|
||||
})
|
||||
this.logDataScreen = logData
|
||||
hasGraph && this.loadLogGraphScreen()
|
||||
})
|
||||
}
|
||||
}).catch(e => {
|
||||
this.isError = true
|
||||
this.errorContent = this.$t('terminallog.statusItem.unknownError')
|
||||
// this.$message.error(this.$t('terminallog.statusItem.unknownError'))
|
||||
})
|
||||
}
|
||||
},
|
||||
loadLogGraph () {
|
||||
const graphData = this.logData.filter(l => l.resultType === 'matrix')
|
||||
if (graphData && graphData.length > 0) {
|
||||
this.$refs.logChart.startLoading()
|
||||
const queryExpression = []
|
||||
let series = []
|
||||
const legend = []
|
||||
this.expressions.forEach((item, index) => {
|
||||
if (item !== '') {
|
||||
queryExpression.push(item)
|
||||
}
|
||||
})
|
||||
this.logData.forEach((response, index) => {
|
||||
if (response.resultType === 'matrix') {
|
||||
const data = response.result
|
||||
if (!data || data.length < 1) {
|
||||
return
|
||||
}
|
||||
data.forEach((result, i) => {
|
||||
const seriesItem = {
|
||||
name: '',
|
||||
symbol: 'emptyCircle', // 去掉点
|
||||
symbolSize: [2, 2],
|
||||
showSymbol: false,
|
||||
smooth: 0.2, // 曲线变平滑
|
||||
data: [],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
},
|
||||
type: 'line'
|
||||
}
|
||||
seriesItem.data = result.values.map((item) => {
|
||||
return [item[0] * 1000, item[1]]
|
||||
})
|
||||
let host = ''// up,
|
||||
let alias = ''
|
||||
if (result.metric && Object.keys(result.metric).length > 0) {
|
||||
const metric = Object.keys(result.metric)
|
||||
if (metric.__name__) {
|
||||
host = `${metric.__name__}{`// up,
|
||||
}
|
||||
metric.forEach((tag, i) => {
|
||||
if (tag !== '__name__') {
|
||||
host += `${tag}="${result.metric[tag]}",`
|
||||
}
|
||||
})
|
||||
if (host.endsWith(',')) {
|
||||
host = host.substr(0, host.length - 1)
|
||||
}
|
||||
if (metric.__name__) {
|
||||
host += '}'
|
||||
}
|
||||
// 处理legend别名
|
||||
alias = dealLegendAlias(host, this.chartData.elements[index].legend)
|
||||
if (!alias || alias === '') {
|
||||
alias = host
|
||||
}
|
||||
} else {
|
||||
alias = queryExpression[index]
|
||||
}
|
||||
seriesItem.name = alias + '-' + index
|
||||
series.push(seriesItem)
|
||||
legend.push({ name: seriesItem.name, alias: alias, isGray: false })
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$refs.logChart.setLegend(legend)
|
||||
this.$refs.logChart.setRandomColors(series.length)
|
||||
if (!series.length) {
|
||||
series = ''
|
||||
}
|
||||
this.$refs.logChart.setSeries(series)
|
||||
this.defaultChartVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.logChart.endLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
loadLogGraphScreen () {
|
||||
const graphData = this.logDataScreen.filter(l => l.resultType === 'matrix')
|
||||
if (graphData && graphData.length > 0) {
|
||||
this.$refs.logChartScreen.startLoading()
|
||||
const queryExpression = []
|
||||
let series = []
|
||||
const legend = []
|
||||
this.expressions.forEach((item, index) => {
|
||||
if (item !== '') {
|
||||
queryExpression.push(item)
|
||||
}
|
||||
})
|
||||
this.logDataScreen.forEach((response, index) => {
|
||||
if (response.resultType === 'matrix') {
|
||||
const data = response.result
|
||||
if (!data || data.length < 1) {
|
||||
return
|
||||
}
|
||||
data.forEach((result, i) => {
|
||||
const seriesItem = {
|
||||
name: '',
|
||||
symbol: 'emptyCircle', // 去掉点
|
||||
symbolSize: [2, 2],
|
||||
showSymbol: false,
|
||||
smooth: 0.2, // 曲线变平滑
|
||||
data: [],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
},
|
||||
type: 'line'
|
||||
}
|
||||
seriesItem.data = result.values.map((item) => {
|
||||
return [item[0] * 1000, item[1]]
|
||||
})
|
||||
let host = ''// up,
|
||||
let alias = ''
|
||||
if (result.metric && Object.keys(result.metric).length > 0) {
|
||||
const metric = Object.keys(result.metric)
|
||||
if (metric.__name__) {
|
||||
host = `${metric.__name__}{`// up,
|
||||
}
|
||||
metric.forEach((tag, i) => {
|
||||
if (tag !== '__name__') {
|
||||
host += `${tag}="${result.metric[tag]}",`
|
||||
}
|
||||
})
|
||||
if (host.endsWith(',')) {
|
||||
host = host.substr(0, host.length - 1)
|
||||
}
|
||||
if (metric.__name__) {
|
||||
host += '}'
|
||||
}
|
||||
// 处理legend别名
|
||||
alias = dealLegendAlias(host, this.chartData.elements[index].legend)
|
||||
if (!alias || alias === '') {
|
||||
alias = host
|
||||
}
|
||||
} else {
|
||||
alias = queryExpression[index]
|
||||
}
|
||||
seriesItem.name = alias + '-' + index
|
||||
series.push(seriesItem)
|
||||
legend.push({ name: seriesItem.name, alias: alias, isGray: false })
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$refs.logChartScreen.setLegend(legend)
|
||||
this.$refs.logChartScreen.setRandomColors(series.length)
|
||||
if (!series.length) {
|
||||
series = ''
|
||||
}
|
||||
this.$refs.logChartScreen.setSeries(series)
|
||||
this.defaultChartVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.logChartScreen.endLoading()
|
||||
this.$refs.logChartScreen.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
chartUnitChange (unit) {
|
||||
this.chartUnit = unit
|
||||
this.$nextTick(() => {
|
||||
this.expressionChange()
|
||||
})
|
||||
},
|
||||
exportLog ({ limit, descending }) {
|
||||
const params = {
|
||||
logql: this.expressions,
|
||||
start: this.$stringTimeParseToUnix(this.filterTime[0]),
|
||||
end: this.$stringTimeParseToUnix(this.filterTime[1]),
|
||||
direction: descending ? 'backward' : 'forward',
|
||||
limit
|
||||
}
|
||||
axios.get('/logs/loki/export', { responseType: 'blob', params: params }).then(res => {
|
||||
if (window.navigator.msSaveOrOpenBlob) {
|
||||
// 兼容ie11
|
||||
const blobObject = new Blob([res.data])
|
||||
window.navigator.msSaveOrOpenBlob(blobObject, 'log')
|
||||
} else {
|
||||
const url = URL.createObjectURL(new Blob([res.data]))
|
||||
const a = document.createElement('a')
|
||||
document.body.appendChild(a) // 此处增加了将创建的添加到body当中
|
||||
a.href = url
|
||||
a.download = 'log'
|
||||
a.target = '_blank'
|
||||
a.click()
|
||||
a.remove() // 将a标签移除
|
||||
}
|
||||
}, error => {
|
||||
const $self = this
|
||||
const reader = new FileReader()
|
||||
reader.onload = function (event) {
|
||||
const responseText = reader.result
|
||||
const exception = JSON.parse(responseText)
|
||||
if (exception.message) {
|
||||
$self.$message.error(exception.message)
|
||||
} else {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
reader.readAsText(error.response.data)
|
||||
})
|
||||
},
|
||||
dateChange (time) {
|
||||
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.echartModalStore.clear()
|
||||
this.showLegend = false
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
|
||||
this.queryLogDataScreen()
|
||||
},
|
||||
initDialog () {
|
||||
this.queryLogDataScreen(this.data.param.limit)
|
||||
},
|
||||
closeDialog () {}
|
||||
},
|
||||
mounted () {
|
||||
this.firstLoad = false
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.chartTitle{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.logs-content{
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.show-tab-icon{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
.show-tab-icon .nz-icon{
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.show-tab-icon .nz-icon.is-active-icon{
|
||||
color: #BDE3FD;
|
||||
}
|
||||
.chart-no-data{
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
.log-detail .log-table .nz-table2 {
|
||||
padding: 0;
|
||||
}
|
||||
.logs-box{
|
||||
overflow-y: auto;height: calc(100% - 15px);margin-top: 10px
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -1,222 +0,0 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-single" ref="resizeBox">
|
||||
<div class="chart-text" :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<!-- <span class="chart-title-text">{{chartData.name}}</span>-->
|
||||
<span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
|
||||
<transition name="el-fade-in-linear">
|
||||
<span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
|
||||
</transition>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="mt-10 rich-text-container" v-cloak v-show="firstShow" >
|
||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="text-content" >
|
||||
<el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
|
||||
<div style="height: 100%;" v-html="text" ></div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<!--全屏-->
|
||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
|
||||
:visible.sync="screenModal"
|
||||
width="96%" @close="screenModal = false" :modal-append-to-body="false">
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{data.name}}</span>
|
||||
</div>
|
||||
<div class="rich-text-screen-container" >
|
||||
<div id="chartScreenContainer" ref="chartScreenContainer" class="text-content" >
|
||||
<el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
|
||||
<div style="height: 100%;" v-html="screenText" ></div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loading from '../common/loading'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import chartDataList from '@/components/common/mixin/chartDataList'
|
||||
export default {
|
||||
name: 'chartSingleStat',
|
||||
components: {
|
||||
loading: loading
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId'
|
||||
},
|
||||
chartIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
from: { type: String },
|
||||
isLock: { type: Boolean, default: false }
|
||||
},
|
||||
mixins: [chartDataList],
|
||||
data () {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
noData: false,
|
||||
unit: {},
|
||||
text: '', // 保存信息
|
||||
screenText: '', // 全屏数据
|
||||
loading: Object,
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow: false,
|
||||
dragTitleShow: false,
|
||||
dropdownMenuShow: false,
|
||||
divFirstShow: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
dropdownMenuShow (n) {
|
||||
this.$emit('dropmenu-change', n)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize (e) {
|
||||
const vm = this
|
||||
this.$chartResizeTool.start(vm, this.data, e)
|
||||
},
|
||||
startLoading (area) {
|
||||
if (area === 'screen') {
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
|
||||
} else {
|
||||
// this.showLoading = true;
|
||||
this.$refs['localLoading' + this.chartIndex].startLoading()
|
||||
}
|
||||
},
|
||||
endLoading (area) {
|
||||
if (area === 'screen') {
|
||||
// this.showLoadingScreen = false;
|
||||
this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
|
||||
} else {
|
||||
// this.showLoading = false;
|
||||
this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
|
||||
}
|
||||
},
|
||||
showLoad (chartItem) {
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
|
||||
let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
|
||||
if (height < this.minHeight) {
|
||||
height = this.minHeight
|
||||
}
|
||||
chartBox.style.height = `${height - this.chartSpaceHeight}px`
|
||||
const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
|
||||
singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
|
||||
})
|
||||
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)
|
||||
},
|
||||
clickos () {
|
||||
this.dropdownMenuShow = false
|
||||
},
|
||||
clearChart () {
|
||||
this.data = {}
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
this.dropdownMenuShow = false
|
||||
this.screenModal = true
|
||||
},
|
||||
resize (chartItem) {
|
||||
document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData (chartItem, seriesItem, panelId, filter, area) {
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem)
|
||||
})
|
||||
this.divFirstShow = true
|
||||
|
||||
this.firstShow = true // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId
|
||||
this.data = chartItem
|
||||
this.text = chartItem.param.text
|
||||
this.screenText = chartItem.param.text
|
||||
this.endLoading()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.firstLoad = false
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -69,7 +69,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartDataFormat from '../../charts/chartDataFormat'
|
||||
import chartDataFormat from '../../chart/chartDataFormat'
|
||||
import trendMixins from '@/components/common/alert/trendMixins'
|
||||
export default {
|
||||
name: 'alert-rule-info',
|
||||
|
||||
@@ -125,7 +125,7 @@ import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
|
||||
import axios from 'axios'
|
||||
import bus from '@/libs/bus'
|
||||
import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import chart from '@/components/page/dashboard/overview/chart'
|
||||
import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
|
||||
import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
|
||||
|
||||
@@ -1,725 +0,0 @@
|
||||
<style scope>
|
||||
.plTableBox.nz-table /deep/ .el-table{
|
||||
display: block !important;
|
||||
}
|
||||
.project-calendar{
|
||||
margin-top: 2px;
|
||||
}
|
||||
.control-icon-unchecked {
|
||||
color: #999999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.endpoint-dialog .el-dialog__body{
|
||||
height: calc(100% - 48px) !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<span style="z-index: 1999;position: relative">
|
||||
<div class="sub-top-tools">
|
||||
<div class="sub-list-tabs">
|
||||
<div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
|
||||
class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
|
||||
<div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.alerts")}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
|
||||
</div>
|
||||
<div class="top-tool-right">
|
||||
<div class="top-tool-search margin-r-20">
|
||||
<el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput" @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable :placeholder="$t('project.endpoint.promExpr')" >
|
||||
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
|
||||
<button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button>
|
||||
<my-date-picker
|
||||
v-model="formatTime"
|
||||
type="datetime"
|
||||
size="mini"
|
||||
class="project-calendar nz-input-group-middle"
|
||||
clearable
|
||||
:time-arrow-control="true"
|
||||
placeholder="Moment"
|
||||
:value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
|
||||
:format="timeFormatStrToDatePickFormat(timeFormatMain)"
|
||||
@change="pickTime"
|
||||
>
|
||||
</my-date-picker>
|
||||
<button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
|
||||
</div>
|
||||
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
|
||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
|
||||
<i class="nz-icon nz-icon-chart" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
|
||||
</button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
|
||||
<i class="nz-icon nz-icon-arrow-down"></i>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
|
||||
<span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
|
||||
<el-switch v-model="hideSameLabels" size="small"></el-switch>
|
||||
</div>
|
||||
</transition>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
|
||||
<pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
|
||||
:pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-loading="loading"
|
||||
v-if="tableShow && plTableSHow" id="endpoint-list-table" :tooltip-effect="'light'" @selection-change="selectChange">
|
||||
<pl-table-column
|
||||
type="selection"
|
||||
width="39"
|
||||
align="center"
|
||||
column-key="sel"
|
||||
:selectable="selectable">
|
||||
</pl-table-column>
|
||||
<pl-table-column
|
||||
prop="element"
|
||||
:resizable="true"
|
||||
:min-width="1000"
|
||||
column-key="element"
|
||||
:show-overflow-tooltip="true"
|
||||
:label="$t('project.endpoint.element')">
|
||||
<template v-slot="scope">
|
||||
<el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
|
||||
<div>
|
||||
<ul>
|
||||
<li><span class="metirc-tip-list">metric : </span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'--'}}</span></li>
|
||||
<li><span class="metirc-tip-list">type : </span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
|
||||
<li><span class="metirc-tip-list">help : </span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'--'}}</span></li>
|
||||
<li><span class="metirc-tip-list">unit : </span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'--'}}</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
|
||||
</el-popover>
|
||||
<span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
|
||||
</template>
|
||||
</pl-table-column>
|
||||
<pl-table-column
|
||||
:resizable="false"
|
||||
prop="value"
|
||||
column-key="value"
|
||||
:label="$t('project.endpoint.value')"
|
||||
min-width="180">
|
||||
</pl-table-column>
|
||||
</pl-table>
|
||||
<button :class="{'to-top-is-hover': tools.tableHover}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn" id="endpoint-list-totop"><i class="nz-icon nz-icon-top"></i></button>
|
||||
|
||||
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
|
||||
:title="$t('project.endpoint.dialogTitle')"
|
||||
:visible.sync="graphShow"
|
||||
width="90%"
|
||||
:modal-append-to-body="false"
|
||||
@close="dialogClose">
|
||||
<div slot="title">
|
||||
{{$t("project.endpoint.dialogTitle")}}
|
||||
<div class="float-right panel-calendar dialog-tool" style="display: flex">
|
||||
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
|
||||
<button id="endpoint-query-full-chart-save" v-has="'project_endpoint_query_chart_toAdd'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime"></chart>
|
||||
</el-dialog>
|
||||
<transition name="right-box">
|
||||
<chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
|
||||
</transition>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartBox from '../../../page/dashboard/chartBox'
|
||||
import axios from 'axios'
|
||||
import bus from '../../../../libs/bus'
|
||||
import chart from '../../../page/dashboard/overview/chart'
|
||||
|
||||
let timeout
|
||||
let internal
|
||||
export default {
|
||||
name: 'endpointQueryTab',
|
||||
components: {
|
||||
'chart-box': chartBox,
|
||||
chart: chart
|
||||
},
|
||||
props: {
|
||||
obj: Object, // 关联的实体对象
|
||||
from: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: {},
|
||||
tableShow: true,
|
||||
dropdownShow: false,
|
||||
loading: false,
|
||||
tools: {
|
||||
showTopBtn: false, // 主列表top按钮
|
||||
tableHover: false
|
||||
},
|
||||
currentEndpoint: {},
|
||||
queryData: [], // endpoint 查询列表数据
|
||||
tableData: [],
|
||||
tableDataCopy: '',
|
||||
queryExpression: '',
|
||||
elementMetricDatas: [], // element 列提示信息列表
|
||||
formatTime: '', // 查询endpoint的时间，
|
||||
selectedEndpoints: [], // 选中的metric{label='value'}
|
||||
chartDatas: [], // 从query_range查询到的数据
|
||||
legend: [], // echart legend
|
||||
graphShow: false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
|
||||
panelData: [], // chart-box的panel下拉框数据,
|
||||
hideSameLabels: true,
|
||||
sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
|
||||
chartUnit: 5,
|
||||
rightBox: { show: false },
|
||||
plTableSHow: true,
|
||||
scrollTop: 0,
|
||||
scrollbarWrap: null,
|
||||
minusTime: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab (tab) {
|
||||
this.$emit('changeTab', tab)
|
||||
},
|
||||
saveChart () { // 新增chart
|
||||
const chart = {
|
||||
title: '',
|
||||
type: 'line',
|
||||
span: 12,
|
||||
height: '400',
|
||||
unit: this.chartUnit,
|
||||
param: {
|
||||
url: '',
|
||||
threshold: ''
|
||||
},
|
||||
elements: [],
|
||||
panel: '',
|
||||
sync: 0
|
||||
}
|
||||
for (let i = 0; i < this.selectedEndpoints.length; i++) {
|
||||
if (this.selectedEndpoints[i] && this.selectedEndpoints[i].element !== '') {
|
||||
chart.elements.push({ chartId: '', expression: this.selectedEndpoints[i].element, type: 'expert' })
|
||||
}
|
||||
}
|
||||
this.chart = chart
|
||||
this.rightBox.show = true
|
||||
},
|
||||
dropdownHandler (show) {
|
||||
if (show) {
|
||||
clearTimeout(timeout)
|
||||
this.dropdownShow = true
|
||||
} else {
|
||||
timeout = setTimeout(() => {
|
||||
this.dropdownShow = false
|
||||
}, 700)
|
||||
}
|
||||
},
|
||||
createSuccess (type, response, param, panel) {
|
||||
this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'success'
|
||||
}).then(() => {
|
||||
bus.$emit('menu-change', 'panel')
|
||||
this.$store.state.showPanel.id = panel.id
|
||||
this.$store.state.showPanel.name = panel.name
|
||||
this.$router.push({
|
||||
path: '/panel',
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
tableReload () {
|
||||
const table = this.$refs.endpointQueryTable
|
||||
internal = setInterval(() => {
|
||||
if (!window.resizing) {
|
||||
table.setHeight()
|
||||
clearInterval(internal)
|
||||
}
|
||||
}, 200)
|
||||
},
|
||||
queryEndpoint () {
|
||||
this.loading = true
|
||||
this.queryElementTips()
|
||||
this.queryData = []
|
||||
this.tableData = []
|
||||
this.tableDataCopy = ''
|
||||
setTimeout(() => {
|
||||
this.$get('/prom/api/v1/query?query=' + encodeURIComponent("{endpoint_id='" + this.currentEndpoint.id + "'}") + '&time=' + this.formatTime).then(response => {
|
||||
this.loading = false
|
||||
if (response.status === 'success') {
|
||||
const results = response.data.result
|
||||
this.queryData = JSON.parse(JSON.stringify(results))
|
||||
this.tableData = this.handlerTableData(results)
|
||||
this.tableDataCopy = JSON.stringify(this.tableData)
|
||||
this.$nextTick(this.$refs.endpointQueryTable.doLayout())
|
||||
if (!this.scrollbarWrap) {
|
||||
this.$nextTick(() => {
|
||||
this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper
|
||||
this.toTopBtnHandler(this.scrollbarWrap)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 450)
|
||||
},
|
||||
clearSelectedMetrics () {
|
||||
this.$refs.endpointQueryTable.clearSelection()
|
||||
},
|
||||
changeTime (size, unit) {
|
||||
this.formatTime = this.getTime(size, unit)
|
||||
this.showEndpoint()
|
||||
},
|
||||
pickTime () {
|
||||
this.showEndpoint()
|
||||
},
|
||||
getTime (size, unit) { // 计算时间
|
||||
const now = !this.formatTime ? new Date(bus.computeTimezone(new Date().getTime())) : new Date(this.formatTime)
|
||||
if (unit) {
|
||||
switch (unit) {
|
||||
case 'y':
|
||||
now.setFullYear(now.getFullYear() + size)
|
||||
break
|
||||
case 'M':
|
||||
now.setMonth(now.getMonth() + size)
|
||||
break
|
||||
case 'd':
|
||||
now.setDate(now.getDate() + size)
|
||||
break
|
||||
case 'h':
|
||||
now.setHours(now.getHours() + size)
|
||||
break
|
||||
case 'm':
|
||||
now.setMinutes(now.getMinutes() + size)
|
||||
break
|
||||
case 's':
|
||||
now.setSeconds(now.getSeconds() + size)
|
||||
break
|
||||
default:
|
||||
console.error('unit error')
|
||||
}
|
||||
} else {
|
||||
now.setSeconds(now.getSeconds() + size)
|
||||
}
|
||||
const year = now.getFullYear()
|
||||
let month = now.getMonth() + 1
|
||||
month = month < 10 ? '0' + month : month
|
||||
let day = now.getDate()
|
||||
day = day < 10 ? '0' + day : day
|
||||
let hour = now.getHours()
|
||||
hour = hour < 10 ? '0' + hour : hour
|
||||
let minute = now.getMinutes()
|
||||
minute = minute < 10 ? '0' + minute : minute
|
||||
let second = now.getSeconds()
|
||||
second = second < 10 ? '0' + second : second
|
||||
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
|
||||
},
|
||||
handlerTableData (results) {
|
||||
const tableData = []
|
||||
for (const result of results) {
|
||||
const metricName = result.metric.__name__
|
||||
let temp = metricName
|
||||
let simpleTemp = metricName// 显示简略信息：隐藏same labels后的结果
|
||||
const metricColor = ''
|
||||
const bracketsColor = '#eb7b18'// #eb7b18
|
||||
const labelColor = '#65bbd1'// #66d9ef
|
||||
const valueColor = '#61c261'// #74e680
|
||||
let colorTemp = `<span style="${metricColor}">${metricName}</span>`
|
||||
let colorSimpleTemp = `<span>${metricName}</span>`
|
||||
let metricTip = {}
|
||||
const queryInfos = (this.elementMetricDatas.filter((item) => {
|
||||
return item.metric === temp
|
||||
}))
|
||||
if (queryInfos && queryInfos.length > 0) {
|
||||
metricTip = queryInfos[0]
|
||||
} else {
|
||||
metricTip.metric = temp
|
||||
}
|
||||
delete result.metric.__name__
|
||||
temp += '{'
|
||||
simpleTemp += '{'
|
||||
colorTemp += `<span style="color: ${bracketsColor}">{</span>`
|
||||
colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`
|
||||
const keys = Object.keys(result.metric)
|
||||
for (const index in keys) {
|
||||
const key = keys[index]
|
||||
temp += key + "='" + result.metric[key] + "',"
|
||||
colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
|
||||
if (!this.sameLabels.some((i) => { return i == key })) {
|
||||
simpleTemp += key + "='" + result.metric[key] + "',"
|
||||
colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
|
||||
}
|
||||
}
|
||||
if (temp.indexOf(',') !== -1) {
|
||||
temp = temp.substr(0, temp.length - 1)
|
||||
}
|
||||
if (simpleTemp.indexOf(',') !== -1) {
|
||||
simpleTemp = simpleTemp.substr(0, simpleTemp.length - 1)
|
||||
}
|
||||
if (colorTemp.indexOf(',') !== -1) {
|
||||
colorTemp = colorTemp.substr(0, colorTemp.length - 1)
|
||||
}
|
||||
if (colorSimpleTemp.indexOf(',') !== -1) {
|
||||
colorSimpleTemp = colorSimpleTemp.substr(0, colorSimpleTemp.length - 1)
|
||||
}
|
||||
|
||||
temp += '}'
|
||||
simpleTemp += '}'
|
||||
colorTemp += `<span style="color: ${bracketsColor}">}</span>`
|
||||
colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`
|
||||
if (!/.+\{.+\}/.test(simpleTemp)) {
|
||||
simpleTemp = simpleTemp.substr(0, simpleTemp.length - 2)
|
||||
}
|
||||
|
||||
if (!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)) {
|
||||
const metricReg = new RegExp('<span.*?>' + metricName + '<\/span>')
|
||||
colorSimpleTemp = metricReg.exec(colorSimpleTemp)[0]
|
||||
}
|
||||
|
||||
const edpQueryData = { element: temp, simpleElement: simpleTemp, colorElement: colorTemp, colorSimpleElement: colorSimpleTemp, value: result.value[1], type: (result.metric.type ? result.metric.type : '2'), metricTip: metricTip }
|
||||
// this.tableData.push(edpQueryData);
|
||||
tableData.push(edpQueryData)
|
||||
}
|
||||
return tableData
|
||||
},
|
||||
selectChange (selection) { // selection 选中的row的数组
|
||||
this.selectedEndpoints = selection
|
||||
},
|
||||
selectable (row, index) {
|
||||
if (this.selectedEndpoints.length >= 20 && !this.selectedEndpoints.includes(row)) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
viewGraph () {
|
||||
if (this.selectedEndpoints.length < 1) {
|
||||
return
|
||||
}
|
||||
|
||||
this.chartDatas = []
|
||||
this.legend = []
|
||||
this.graphShow = true
|
||||
this.$refs.pickTime.$refs.multipleTime.searchTime = []
|
||||
this.$refs.pickTime.$refs.multipleTime.showTime = {
|
||||
id: 12,
|
||||
text: this.$t('dashboard.panel.noDate')
|
||||
}
|
||||
this.$refs.pickTime.$refs.multipleTime.showDropdown = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs.endpointChart.startLoading()
|
||||
this.queryChartDate()
|
||||
})
|
||||
},
|
||||
dialogClose () {
|
||||
this.$refs.pickTime.$refs.multipleTime.searchTime = []
|
||||
this.$refs.pickTime.$refs.multipleTime.showTime = {
|
||||
id: 12,
|
||||
text: this.$t('dashboard.panel.noDate')
|
||||
}
|
||||
this.$refs.pickTime.$refs.multipleTime.showDropdown = false
|
||||
this.graphShow = false
|
||||
},
|
||||
chartUnitChange (unit) {
|
||||
this.chartUnit = unit
|
||||
this.$nextTick(() => {
|
||||
this.queryChartDate()
|
||||
})
|
||||
},
|
||||
queryChartDate () {
|
||||
const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
|
||||
const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
|
||||
this.searchTime = [start, end]
|
||||
const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
|
||||
// end - start < 1 day : 15s
|
||||
// end - start < 7 day : 5m
|
||||
// end - start < 30 day : 10m
|
||||
// end - start > 30 day : 30m
|
||||
let step = '15s'
|
||||
if (timeDiff < 1) {
|
||||
step = '15s'
|
||||
} else if (timeDiff < 7) {
|
||||
step = '5m'
|
||||
} else if (timeDiff < 30) {
|
||||
step = '10m'
|
||||
} else {
|
||||
step = '30m'
|
||||
}
|
||||
const axiosArr = []
|
||||
for (const endpoint of this.selectedEndpoints) {
|
||||
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
|
||||
}
|
||||
if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
|
||||
const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
|
||||
const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
|
||||
for (const endpoint of this.selectedEndpoints) {
|
||||
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
|
||||
}
|
||||
}
|
||||
this.legend = []
|
||||
this.chartDatas = []
|
||||
axios.all(axiosArr).then(res => {
|
||||
res.forEach((response, promIndex) => {
|
||||
if (response.status == 200) {
|
||||
if (response.data.status == 'success') {
|
||||
const queryData = response.data.data.result[0]
|
||||
if (queryData) {
|
||||
const chartData = {
|
||||
type: 'line',
|
||||
symbol: 'none', // 去掉点
|
||||
smooth: 0.2,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
}
|
||||
}
|
||||
chartData.name = queryData.metric.__name__
|
||||
let alias = queryData.metric.__name__
|
||||
delete queryData.metric.__name__
|
||||
chartData.name += '{'
|
||||
alias += '{'
|
||||
Object.keys(queryData.metric).forEach((item, index) => {
|
||||
const label = item
|
||||
const value = queryData.metric[label]
|
||||
chartData.name += label + "='" + value + "',"
|
||||
if (!this.sameLabels.some((i) => { return i == label })) {
|
||||
alias += label + "='" + value + "',"
|
||||
}
|
||||
})
|
||||
chartData.name = chartData.name.charAt(chartData.name.length - 1) === ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
|
||||
alias = alias.charAt(alias.length - 1) === ',' ? alias.substr(0, alias.length - 1) : alias
|
||||
chartData.name += '}'
|
||||
alias += '}'
|
||||
if (!/.+\{.+\}/.test(alias)) {
|
||||
alias = alias.substr(0, alias.length - 2)
|
||||
}
|
||||
const legend = {
|
||||
name: chartData.name,
|
||||
alias: alias,
|
||||
// showText:this.formatLegend(chartData.name),
|
||||
isGray: false
|
||||
}
|
||||
if (promIndex >= this.selectedEndpoints.length) {
|
||||
legend.name = 'Previous ' + legend.name
|
||||
chartData.name = legend.name
|
||||
legend.alias = 'Previous ' + legend.alias
|
||||
}
|
||||
this.legend.push(legend)
|
||||
chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
|
||||
return [dpsItem[0] * 1000, Number(dpsItem[1])]
|
||||
})
|
||||
this.chartDatas.push(chartData)
|
||||
}
|
||||
} else {
|
||||
this.$message.error(response.data.error)
|
||||
console.error(response.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.selectedEndpoints.length) {
|
||||
const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
|
||||
this.minusTime = minusTime
|
||||
let cutPoint = 0
|
||||
res.forEach((item, index) => {
|
||||
if (index < res.length / 2) {
|
||||
cutPoint += res[index].data.data.result.length
|
||||
}
|
||||
})
|
||||
this.chartDatas.forEach((item, index) => {
|
||||
if (index >= cutPoint) {
|
||||
this.chartDatas[index].data.forEach((item1, index1) => {
|
||||
item1[0] = item1[0] + minusTime
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.endpointChart) {
|
||||
this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
|
||||
this.$refs.endpointChart.setLegend(this.legend)
|
||||
this.$refs.endpointChart.modifyOption('tooltip', 'backgroundColor', 'rgba(221,228,237,1)')
|
||||
this.$refs.endpointChart.modifyOption('tooltip', 'textStyle', { color: '#000' })
|
||||
this.$refs.endpointChart.modifyOption('grid', 'top', 30)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'left', 0)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'right', 30)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'bottom', 8)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'containLabel', true)
|
||||
this.$refs.endpointChart.setSeries(this.chartDatas)
|
||||
this.$refs.endpointChart.endLoading()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
cellClass (row) { // 给复选框那一列添加 类名为 ‘disabledCheck’
|
||||
if (row.columnIndex === 0) {
|
||||
return 'disabledCheck'
|
||||
}
|
||||
},
|
||||
getPanelData () { // 获取panel数据
|
||||
this.$get('panel?pageNo=1&pageSize=-1').then(response => {
|
||||
if (response.code === 200) {
|
||||
this.panelData = response.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
tableFilter () {
|
||||
const temp = this
|
||||
const tableDatas = JSON.parse(this.tableDataCopy)
|
||||
this.tableData = tableDatas.filter((item) => {
|
||||
const element = temp.hideSameLabels ? item.simpleElement : item.element
|
||||
return element.indexOf(this.queryExpression) !== -1
|
||||
})
|
||||
},
|
||||
tableFilterHistory (expression) {
|
||||
let metric = ''
|
||||
let labels = []
|
||||
if (/\w*\{.*\}.*/i.test(expression)) {
|
||||
metric = expression.substr(0, expression.indexOf('{'))
|
||||
const labelStr = expression.substr(expression.indexOf('{') + 1, expression.indexOf('}') - expression.indexOf('{') - 1)
|
||||
const labelArr = labelStr.split(',')
|
||||
|
||||
if (labelArr.length > 0) {
|
||||
labels = labelArr.map((item, index) => {
|
||||
const temp = item.split('=')
|
||||
const label = temp[0] ? temp[0] : null
|
||||
const value = temp[1] ? temp[1] : null
|
||||
return label ? { label: label, value: value } : null
|
||||
})
|
||||
}
|
||||
} else {
|
||||
metric = expression
|
||||
}
|
||||
this.tableData = []
|
||||
let sourceData = JSON.parse(JSON.stringify(this.queryData))
|
||||
sourceData = sourceData.filter((item) => {
|
||||
const metricName = item.metric.__name__
|
||||
if (metricName.indexOf(metric) === -1) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (labels.length > 0) {
|
||||
for (const i in labels) {
|
||||
const label = labels[i]
|
||||
if (label && label.label) {
|
||||
const value = item.metric[label.label]
|
||||
let queryVal = label.value
|
||||
if (/^'.+'$/.test(queryVal)) {
|
||||
queryVal = queryVal.substr(1, queryVal.length - 2)
|
||||
}
|
||||
if (!value || value != queryVal) {
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
})
|
||||
for (const i in sourceData) {
|
||||
const item = sourceData[i]
|
||||
// {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
|
||||
const metricName = item.metric.__name__
|
||||
let temp = metricName
|
||||
delete item.metric.__name__
|
||||
temp += '{'
|
||||
const hasLabel = true
|
||||
for (const key in item.metric) {
|
||||
const label = key
|
||||
const value = item.metric[label]
|
||||
temp += label + "='" + value + "',"
|
||||
}
|
||||
temp = temp.charAt(temp.length - 1) == ',' ? temp.substr(0, temp.length - 1) : temp
|
||||
temp += '}'
|
||||
if (hasLabel) {
|
||||
const edpQueryData = { element: temp, value: item.value[1], type: (item.metric.type ? item.metric.type : '2') }
|
||||
this.tableData.push(edpQueryData)
|
||||
}
|
||||
}
|
||||
},
|
||||
focusInput () {
|
||||
let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
|
||||
classVal = classVal.replace('query-input-inactive', 'query-input-active')
|
||||
document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
|
||||
this.$refs.elementQuery.focus()
|
||||
},
|
||||
blurInput () {
|
||||
if (!this.queryExpression || this.queryExpression == '') {
|
||||
setTimeout(function () {
|
||||
let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
|
||||
classVal = classVal.replace('query-input-active', 'query-input-inactive')
|
||||
document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
clearInput () {
|
||||
this.$refs.elementQuery.focus()
|
||||
},
|
||||
queryElementTips: async function () {
|
||||
this.elementMetricDatas = []
|
||||
const response = await axios.get('/metric/metadata?endpointId=' + this.currentEndpoint.id)
|
||||
if (response && response.status === 200) {
|
||||
if (response.data.msg === 'success') {
|
||||
this.elementMetricDatas = response.data.data.list
|
||||
}
|
||||
}
|
||||
},
|
||||
getStateContent (row) {
|
||||
if (row) {
|
||||
if (row.state == 1) {
|
||||
return 'up' + '[' + this.formatUpdateTime(row.lastUpdate) + ']'
|
||||
} else {
|
||||
return 'down' + '[' + this.getStateErrorMsg(row) + ']'
|
||||
}
|
||||
}
|
||||
},
|
||||
formatUpdateTime (date) {
|
||||
const time = new Date(date)
|
||||
const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
|
||||
const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
|
||||
|
||||
return hours + ':' + minutes
|
||||
},
|
||||
getStateErrorMsg (row) {
|
||||
const errCodes = [230009, 230010, 230011]
|
||||
if (row) {
|
||||
if (row.state == 0) {
|
||||
if (errCodes.find((item) => { return row.stateInfo.code == item })) {
|
||||
return this.$t('project.endpoint.stateInfo_' + row.stateInfo.code)
|
||||
} else {
|
||||
this.$message.error('state code error')
|
||||
return row.stateInfo.msg
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
obj: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
if (n) {
|
||||
this.currentEndpoint = JSON.parse(JSON.stringify(n))
|
||||
this.queryEndpoint()
|
||||
}
|
||||
}
|
||||
},
|
||||
queryExpression (n, o) {
|
||||
const temp = this
|
||||
setTimeout(function () {
|
||||
temp.tableFilter()
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getPanelData()
|
||||
setTimeout(() => { this.$refs.endpointQueryTable.setHeight() }, 700)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -735,6 +735,7 @@ export default {
|
||||
},
|
||||
htmlToPdf () {
|
||||
const dom = document.getElementsByClassName(this.pdfId)[0]
|
||||
this.htmlTitle = this.obj.name || 'pdf'
|
||||
if (dom) {
|
||||
// dom = dom.getElementsByClassName('vue-grid-layout')[0]
|
||||
this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartDataFormat from '../charts/chartDataFormat'
|
||||
import chartDataFormat from '../chart/chartDataFormat'
|
||||
export default {
|
||||
name: 'chartUnit',
|
||||
model: {
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
|
||||
<script>
|
||||
import lodash from 'lodash'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
|
||||
export default {
|
||||
name: 'searchItemInfo',
|
||||
|
||||
@@ -21,6 +21,7 @@ export default {
|
||||
}).then(function (canvas) {
|
||||
loading.close()
|
||||
document.body.style.height = '100%'
|
||||
document.getElementsByClassName('left-menu')[0].style.height = '100%'
|
||||
document.getElementsByTagName('html')[0].style.overflow = 'hidden'
|
||||
const contentWidth = canvas.width
|
||||
const contentHeight = canvas.height
|
||||
@@ -53,12 +54,13 @@ export default {
|
||||
if (flag) {
|
||||
loading = Loading.service({
|
||||
lock: true,
|
||||
customClass: 'export-pdf-mask',
|
||||
text: this.$t('overall.downloadProgress') + 'pdf...',
|
||||
background: 'rgba(0,500,200,.5)'
|
||||
background: 'rgba(0,0,0,.3)'
|
||||
})
|
||||
} else {
|
||||
if (loading) {
|
||||
loading.close()
|
||||
// loading.close()
|
||||
document.body.style.height = '100%'
|
||||
document.getElementsByTagName('html')[0].style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
@@ -1093,7 +1093,7 @@
|
||||
<script>
|
||||
import { alignNodes, spaceBetween, layout } from '@topology/layout'
|
||||
import { getTopology, resetZIndex } from '../../js/common'
|
||||
import chartDataFormat from '../../../charts/chartDataFormat'
|
||||
import chartDataFormat from '../../../chart/chartDataFormat'
|
||||
import promqlInput from '../../../page/dashboard/explore/promqlInput'
|
||||
import nezhaColor from '../../nezhaColor'
|
||||
import promqlInputMixin from '@/components/common/mixin/promqlInput'
|
||||
|
||||
@@ -32,14 +32,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lineChartBlock from '../../../charts/line-chart-block'
|
||||
import chartTable from '../../../charts/chart-table'
|
||||
import lineChartBlock from '@/components/chart/chart/line-chart-block'
|
||||
import chartTable from '@/components/chart/chart/chart-table'
|
||||
import bus from '../../../../libs/bus'
|
||||
import ExpressionInfo from '../popData/expressionInfo'
|
||||
import { fromRoute } from '@/components/common/js/constants'
|
||||
import chartTempData from '@/components/charts/chartTempData'
|
||||
import chartTempData from '@/components/chart/chartTempData'
|
||||
import axios from 'axios'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { dealLegendAlias } from '@/components/common/js/tools'
|
||||
export default {
|
||||
name: 'topoTooltip',
|
||||
|
||||
@@ -342,11 +342,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartDataFormat from '../../charts/chartDataFormat'
|
||||
import chartDataFormat from '../../chart/chartDataFormat'
|
||||
import promqlInput from '../../page/dashboard/explore/promqlInput'
|
||||
import { noSpecialChar, nzNumber } from '../js/validate'
|
||||
import editRigthBox from '../mixin/editRigthBox'
|
||||
import richTextEditor from '@/components/charts/richTextEditor'
|
||||
import richTextEditor from '@/components/chart/richTextEditor'
|
||||
import promqlInputMixin from '@/components/common/mixin/promqlInput'
|
||||
export default {
|
||||
name: 'alertRuleBox',
|
||||
|
||||
@@ -156,7 +156,7 @@
|
||||
import publicConfig from '@/components/common/rightBox/chart/publicConfig'
|
||||
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
|
||||
import diagram from '@/components/common/ChartDiagram/diagram'
|
||||
import richTextEditor from '@/components/charts/richTextEditor'
|
||||
import richTextEditor from '@/components/chart/richTextEditor'
|
||||
export default {
|
||||
name: 'otherChartConfig',
|
||||
mixins: [publicConfig, chartTypeShow],
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { getUUID, resetZIndex } from '@/components/common/js/common'
|
||||
import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
|
||||
import { isStat } from '@/components/chart/chart/tools'
|
||||
|
||||
@@ -140,7 +140,7 @@ import bus from '../../../../libs/bus'
|
||||
import axios from 'axios'
|
||||
import table from '@/components/common/mixin/table'
|
||||
import nzAlertTag from '../../../page/alert/nzAlertTag'
|
||||
import chartDataFormat from '../../../charts/chartDataFormat'
|
||||
import chartDataFormat from '../../../chart/chartDataFormat'
|
||||
import alertRuleInfo from '../../alert/alertRuleInfo'
|
||||
import alertLabel from '../../alert/alertLabel'
|
||||
import { calcDurationByStringTimeB } from '../../js/tools'
|
||||
|
||||
@@ -158,7 +158,7 @@
|
||||
|
||||
<script>
|
||||
import table from '@/components/common/mixin/table'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
export default {
|
||||
name: 'alertRuleTable',
|
||||
mixins: [table],
|
||||
|
||||
@@ -71,41 +71,10 @@
|
||||
@showFullscreen="showFullscreen"
|
||||
></panel-chart>
|
||||
</el-dialog>
|
||||
<!-- <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"-->
|
||||
<!-- :title="$t('project.endpoint.dialogTitle')"-->
|
||||
<!-- :visible.sync="graphShow"-->
|
||||
<!-- width="90%"-->
|
||||
<!-- height="80%"-->
|
||||
<!-- :modal-append-to-body="false"-->
|
||||
<!-- id="viewGraphDialog"-->
|
||||
<!-- @close="dialogClose">-->
|
||||
<!-- <div slot="title">-->
|
||||
<!-- {{$t("project.endpoint.dialogTitle")}}-->
|
||||
<!-- <div class="float-right panel-calendar dialog-tool" style="display: flex;margin-right: 30px">-->
|
||||
<!-- <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>-->
|
||||
<!-- <button id="endpoint-query-full-chart-save" v-has="'main_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime" v-if="graphShow"></chart>-->
|
||||
<!-- </el-dialog>-->
|
||||
<transition name="right-box">
|
||||
<chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
|
||||
</transition>
|
||||
<transition name="right-box">
|
||||
<!-- <chart-box-->
|
||||
<!-- v-if="rightBox.chart.show"-->
|
||||
<!-- ref="addChartModal"-->
|
||||
<!-- :chart="chart"-->
|
||||
<!-- :from="fromRoute.panel"-->
|
||||
<!-- :panel-data="panelData"-->
|
||||
<!-- :show-panel="showPanel"-->
|
||||
<!-- @close="closeChartBox"-->
|
||||
<!-- @reload="panelReload"-->
|
||||
<!-- @reloadOnlyPanel="panelReloadOnlyPanel"-->
|
||||
<!-- @delete-chart="delChart"-->
|
||||
<!-- @on-create-success="createSuccess"-->
|
||||
<!-- @on-delete-success="delChartOk"-->
|
||||
<!-- ></chart-box>-->
|
||||
<chart-right-box
|
||||
v-if="chartRightBoxShow"
|
||||
v-loading="rightBox.loading"
|
||||
@@ -122,9 +91,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartBox from '@/components/page/dashboard/chartBox'
|
||||
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
|
||||
import axios from 'axios'
|
||||
import bus from '../../../../libs/bus'
|
||||
import chart from '@/components/page/dashboard/overview/chart'
|
||||
import { sameLabels, fromRoute } from '@/components/common/js/constants'
|
||||
@@ -135,7 +102,6 @@ import lineData from '@/components/chart/defaultLineData'
|
||||
export default {
|
||||
name: 'endpointQueryTab',
|
||||
components: {
|
||||
chartBox,
|
||||
chart,
|
||||
metaData,
|
||||
panelChart,
|
||||
|
||||
@@ -151,7 +151,7 @@ import alertMessageTable from '@/components/common/table/alert/alertMessageTable
|
||||
import deleteButton from '@/components/common/deleteButton'
|
||||
import nzDataList from '@/components/common/table/nzDataList'
|
||||
import dataListMixin from '@/components/common/mixin/dataList'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import chart from '@/components/page/dashboard/overview/chart'
|
||||
import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
|
||||
import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
|
||||
|
||||
@@ -100,7 +100,6 @@
|
||||
|
||||
<script>
|
||||
import exportXLSX from '@/components/common/exportXLSX'
|
||||
import chartBox from '@/components/page/dashboard/chartBox'
|
||||
import deleteButton from '@/components/common/deleteButton'
|
||||
import dataListMixin from '@/components/common/mixin/dataList'
|
||||
import chartTmplTable from '@/components/common/table/settings/chartTmplTable'
|
||||
@@ -112,7 +111,6 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
||||
export default {
|
||||
name: 'chartTemp',
|
||||
components: {
|
||||
chartBox,
|
||||
deleteButton,
|
||||
chartTmplTable,
|
||||
'export-excel': exportXLSX,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -331,9 +331,8 @@ import bus from '../../../../libs/bus'
|
||||
import promqlInput from './promqlInput'
|
||||
import chart from '../overview/chart'
|
||||
import axios from 'axios'
|
||||
import chartBox from '../../../page/dashboard/chartBox'
|
||||
import { getUUID } from '../../../common/js/common'
|
||||
import chartDataFormat from '../../../charts/chartDataFormat'
|
||||
import chartDataFormat from '../../../chart/chartDataFormat'
|
||||
import logTab from './logTab'
|
||||
import promqlInputMixin from '@/components/common/mixin/promqlInput'
|
||||
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
|
||||
@@ -342,7 +341,6 @@ export default {
|
||||
name: 'exploreItem',
|
||||
components: {
|
||||
'promql-input': promqlInput,
|
||||
'chart-box': chartBox,
|
||||
chartRightBox,
|
||||
chart,
|
||||
logTab
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import chartDataFormat from '../../../charts/chartDataFormat'
|
||||
import chartDataFormat from '../../../chart/chartDataFormat'
|
||||
import loading from '../../../common/loading'
|
||||
import chartConfig from './chartConfig'
|
||||
import bus from '../../../../libs/bus'
|
||||
|
||||
@@ -110,20 +110,6 @@
|
||||
<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>
|
||||
|
||||
<transition name="right-box">
|
||||
<!-- <chart-box-->
|
||||
<!-- v-if="rightBox.chart.show"-->
|
||||
<!-- ref="addChartModal"-->
|
||||
<!-- :chart="chart"-->
|
||||
<!-- :from="fromRoute.panel"-->
|
||||
<!-- :panel-data="panelData"-->
|
||||
<!-- :show-panel="showPanel"-->
|
||||
<!-- @close="closeChartBox"-->
|
||||
<!-- @reload="panelReload"-->
|
||||
<!-- @reloadOnlyPanel="panelReloadOnlyPanel"-->
|
||||
<!-- @delete-chart="delChart"-->
|
||||
<!-- @on-create-success="createSuccess"-->
|
||||
<!-- @on-delete-success="delChartOk"-->
|
||||
<!-- ></chart-box>-->
|
||||
<chart-right-box
|
||||
v-if="chartRightBoxShow"
|
||||
v-loading="rightBox.loading"
|
||||
@@ -150,7 +136,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChartBox from './chartBox'
|
||||
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
|
||||
import bus from '../../../libs/bus'
|
||||
import pickTime from '../../common/pickTime'
|
||||
@@ -285,7 +270,6 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'chart-box': ChartBox,
|
||||
'pick-time': pickTime,
|
||||
'panel-box': panelBox,
|
||||
topToolMoreOptions,
|
||||
@@ -835,6 +819,7 @@ export default {
|
||||
let dom = document.getElementsByClassName(this.pdfId)[0]
|
||||
if (dom) {
|
||||
// dom = dom.getElementsByClassName('vue-grid-layout')[0]
|
||||
this.htmlTitle = this.panel.name
|
||||
this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
|
||||
this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
|
||||
let flag = true
|
||||
@@ -855,6 +840,7 @@ export default {
|
||||
timer = null
|
||||
setTimeout(() => {
|
||||
document.body.style.height = 'auto'
|
||||
document.getElementsByClassName('left-menu')[0].style.height = '100vh'
|
||||
// document.getElementsByTagName('html')[0].style.overflow = 'visible'
|
||||
const position = dom.getBoundingClientRect()
|
||||
console.log(position)
|
||||
|
||||
Reference in New Issue
Block a user