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

NEZ-963 chart 鼠标移入悬浮提示

Browse Source
This commit is contained in:
@changcode
2021-09-02 14:43:06 +08:00
parent cfdb06bd39
commit 1afdff8de1
11 changed files with 108 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
nezha-fronted/src/components/charts/chart-alert-list.vue
View File

@@ -23,7 +23,11 @@
<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?chartData.name:'-'}}</span>
<!-- <span class="chart-title-text">{{chartData?chartData.name:'-'}}</span>-->
<span class="chart-title-text" v-on:mouseover="changeActive()" :mouseout="removeActive()">{{chartData?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&&chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
@@ -144,6 +148,7 @@ import axios from 'axios'
import pickTime from '../common/pickTime'
import chart from '../page/dashboard/overview/chart'
import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
import chartDataList from '@/components/common/mixin/chartDataList'
export default {
name: 'chartTable',
components: {
@@ -176,6 +181,7 @@ export default {
from: { type: String },
isLock: { type: Boolean, default: false }
},
mixins: [chartDataList],
data () {
return {
currentMsg: null,
@@ -884,7 +890,7 @@ export default {
}
this.$set(this.searchLabel, 'orderBy', orderBy)
this.getAlertList()
}
},
},
created () {

8
nezha-fronted/src/components/charts/chart-bar-statistics.vue
View File

@@ -23,7 +23,11 @@
<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">{{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">
@@ -95,6 +99,7 @@ import { getChart, setChart, getMousePoint } from '../common/js/common'
import chartConfig from '../page/dashboard/overview/chartConfig'
import { randomcolor } from '../common/js/radomcolor/randomcolor'
import {formatScientificNotation} from "@/components/common/js/tools";
import chartDataList from '@/components/common/mixin/chartDataList'
export default {
name: 'pieChart', // 饼图 或者 柱状图的统计
components: {
@@ -121,6 +126,7 @@ export default {
from: { type: String },
isLock: { type: Boolean, default: false }
},
mixins: [chartDataList],
data () {
return {
data: {}, // 该图表信息,chartItem

8
nezha-fronted/src/components/charts/chart-pie.vue
View File

@@ -23,7 +23,11 @@
<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">{{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">
@@ -94,6 +98,7 @@ 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'
export default {
name: 'pieChart',
components: {
@@ -120,6 +125,7 @@ export default {
from: { type: String },
isLock: { type: Boolean, default: false }
},
mixins: [chartDataList],
data () {
return {
data: {}, // 该图表信息,chartItem

7
nezha-fronted/src/components/charts/chart-single-stat.vue
View File

@@ -23,7 +23,10 @@
<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">
@@ -85,9 +88,11 @@
<script>
import chartDataFormat from './chartDataFormat'
import chartDataList from '@/components/common/mixin/chartDataList'
export default {
name: 'chartSingleStat',
mixins: [chartDataList, chartDataList],
props: {
chartData: {
type: Object

8
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -24,7 +24,11 @@
<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">{{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">
@@ -122,6 +126,7 @@
<script>
import bus from '../../libs/bus'
import chartDataFormat from './chartDataFormat'
import chartDataList from '@/components/common/mixin/chartDataList'
export default {
name: 'chartTable',
@@ -145,6 +150,7 @@ export default {
from: { type: String },
isLock: { type: Boolean, default: false }
},
mixins: [chartDataList],
data () {
return {
tableHeight: 0,

8
nezha-fronted/src/components/charts/chart-url.vue
View File

@@ -11,7 +11,11 @@
<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">{{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">
@@ -69,6 +73,7 @@
<script>
import loading from '../common/loading'
import chartDataList from '@/components/common/mixin/chartDataList'
export default {
name: 'chartUrl',
@@ -95,6 +100,7 @@ export default {
from: { type: String },
isLock: { type: Boolean, default: false }
},
mixins: [chartDataList],
data () {
return {
data: {}, // 该图表信息,chartItem

13
nezha-fronted/src/components/charts/chart.scss
View File

@@ -756,3 +756,16 @@
flex: 1;
}
}
.chart-title-pit {
position: absolute;
top: 40px;
min-width: 200px;
height: 20px;
line-height: 20px;
padding: 10px;
text-align: left;
z-index: 1000;
border-radius: 5px;
background: #fff;
border: 1px solid #ebeef5;
}

8
nezha-fronted/src/components/charts/diagram-chart.vue
View File

@@ -11,7 +11,11 @@
<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">{{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">
@@ -68,6 +72,7 @@
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: {
@@ -94,6 +99,7 @@ export default {
from: { type: String },
isLock: { type: Boolean, default: false }
},
mixins: [chartDataList],
data () {
return {
data: {

14
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -37,7 +37,11 @@
<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">{{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">
@@ -66,7 +70,11 @@
</el-dropdown>
</div>
<div v-if="from==='topology'" :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.alertRule}" :id="'chartTitle'+chartIndex" class="topology-chart-title">
<span class="topology-chart-title-text">{{chartData.name}}</span>
<!-- <span class="topology-chart-title-text">{{chartData.name}}</span>-->
<span class="topology-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>
</div>
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
@@ -205,6 +213,7 @@ import chartConfig from '../page/dashboard/overview/chartConfig'
import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
import { getMetricTypeValue, chartResizeTool, formatScientificNotation } from '../common/js/tools'
import moment from 'moment-timezone'
import chartDataList from '@/components/common/mixin/chartDataList'
export default {
name: 'lineChartBlock',
@@ -259,6 +268,7 @@ export default {
}
}
},
mixins: [chartDataList],
data () {
return {
data: {}, // 该图表信息,chartItem

8
nezha-fronted/src/components/charts/text-chart.vue
View File

@@ -11,7 +11,11 @@
<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">{{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">
@@ -71,6 +75,7 @@
<script>
import loading from '../common/loading'
import 'quill/dist/quill.snow.css'
import chartDataList from '@/components/common/mixin/chartDataList'
export default {
name: 'chartSingleStat',
components: {
@@ -96,6 +101,7 @@ export default {
from: { type: String },
isLock: { type: Boolean, default: false }
},
mixins: [chartDataList],
data () {
return {
data: {}, // 该图表信息,chartItem

26
nezha-fronted/src/components/common/mixin/chartDataList.js Normal file
View File

@@ -0,0 +1,26 @@
export default {
data () {
return {
chartDataList: false,
timer: null
}
},
methods: {
// 鼠标移入加入class
changeActive () {
// 设置定时器
this.timer = window.setTimeout(() => {
this.chartDataList = true
}, 500)
},
removeActive () {
// 移除定时器
window.clearInterval(this.timer)
this.chartDataList = false
}
},
beforeDestroy () {
// 移除定时器
window.clearInterval(this.timer)
}
}