1311 lines
45 KiB
Vue
1311 lines
45 KiB
Vue
<template>
|
||
<div class="panel list-page" v-my-loading="dashboardLoading">
|
||
<div class="main-list">
|
||
<div>
|
||
<transition name="el-zoom-in-center">
|
||
<div v-if="isLoading" class="panel-loading"></div>
|
||
</transition>
|
||
</div>
|
||
<div class="main-container">
|
||
<div class="top-tools panel-top-tools" :class="showTopLine? 'panel-top-tools-bottom' : ''">
|
||
<div class="top-tool-left" v-show="panelData.length === 0">
|
||
<button style="margin-left: 10px;" v-if="panelData.length === 0" id="dashboard-add-panel" class="nz-btn nz-btn-style-light nz-btn-size-small" v-has="'main_add'" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i> {{$t("overall.addDashboard")}}</button>
|
||
</div>
|
||
<div v-if="panelData.length" class="top-tool-left" style="cursor: pointer;">
|
||
<select-dashboard
|
||
ref="selectDashboard"
|
||
:panel-data="panelData"
|
||
:panel-lock="panelLock"
|
||
:placement="'bottom-start'"
|
||
:show-panel="showPanel"
|
||
class="selectDashboard"
|
||
@deletePanel="del"
|
||
@editPanel="edit"
|
||
@selectDashboard="panelChange"
|
||
@startPlay="startPlay"
|
||
>
|
||
<template v-slot:trigger>
|
||
<div class="selectDashboard-select">
|
||
<i style="color: #BEBEBE" class="el-icon-menu"></i>
|
||
<span :title="showPanel.name + ' (' + (showPanel.chartNum || 0) +' charts)' " class="show-panel-name">{{showPanel.name||$t('overall.notFound')}}</span>
|
||
<i @click.stop="delStarred(showPanel)" v-if="showPanel.starred===1" class="nz-icon nz-icon-a-xingzhuang2" :title ="$t('overall.starred')"></i>
|
||
<i @click.stop="addStarred(showPanel)" v-else class="nz-icon nz-icon-xingzhuang" :title ="$t('overall.unstarred')"></i>
|
||
<i class="el-icon-arrow-down"></i>
|
||
</div>
|
||
</template>
|
||
<!-- 按钮插槽 -->
|
||
<template slot="button">
|
||
<span class="dashboard-select-add" v-has="'main_add'" :title='$t("overall.addDashboard")' @click="toAdd">
|
||
<i class="nz-icon nz-icon-create-square"></i> {{$t('overall.addDashboard')}}
|
||
</span>
|
||
<!-- 通过dashboard模板创建 -->
|
||
<span v-has="'main_add'" @click="addByTemplate" :title='$t("dashboard.dashboard.addByTemplate")' class="dashboard-addBy-template">
|
||
<i class="nz-icon nz-icon-template1"></i>
|
||
</span>
|
||
</template>
|
||
</select-dashboard>
|
||
</div>
|
||
|
||
<div v-if="panelData.length" class="top-tool-right">
|
||
<!-- 仪表盘轮播 -->
|
||
<playlist v-if="playListControls" :playlistObj="playlistObj" :panelData="panelData" @stopPlaylist="stopPlaylist" @changePlay="panelChange"></playlist>
|
||
|
||
<pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :show-locked="true" class="margin-r-10" :sign="showPanel.id" :from="fromRoute.dashboard"></pick-time>
|
||
|
||
<template v-if="!playListControls">
|
||
<!-- 切换查看模式 -->
|
||
<button class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
|
||
<i class="nz-icon nz-icon-moshiqiehuan"></i>
|
||
</button>
|
||
|
||
<!-- 新增图表 -->
|
||
<button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChartBefore">
|
||
<i class="nz-icon-create-square nz-icon"></i>
|
||
</button>
|
||
|
||
<top-tool-more-options
|
||
:delete-objs="batchDeleteObjs"
|
||
ref="topTool"
|
||
id="panel"
|
||
:params="filter"
|
||
:permissions="{
|
||
import: 'main_add',
|
||
export: 'main_edit'
|
||
}"
|
||
:paramsType="'dashboard'"
|
||
class="top-tool-export"
|
||
export-file-name="chart"
|
||
export-url="/visual/dashboard/export"
|
||
import-url="/visual/dashboard/import"
|
||
:only-json="true"
|
||
@export="exportType"
|
||
@afterImport="afterImport"
|
||
>
|
||
<template v-slot:before>
|
||
<el-dropdown-item v-has="'main_edit'">
|
||
<div id="panel-lock" @click="$store.dispatch('dispatchPanelLock',{flag:!panelLock})"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t('overall.locked') : $t('overall.unlocked')}}</div>
|
||
</el-dropdown-item>
|
||
</template>
|
||
<template v-slot:after>
|
||
<el-dropdown-item v-has="'dashboard_view'">
|
||
<div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-kuaizhao"></i>{{ $t('overall.snapshoot') }}</div>
|
||
</el-dropdown-item>
|
||
</template>
|
||
</top-tool-more-options>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div id="tableList" class="table-list" style='overflow-y: unset'>
|
||
<div class="table-list-box">
|
||
<div id="dashboardScrollbar" class="box-content" v-my-loading="chartListLoading" ref="dashboardScrollbar" style='overflow-y: scroll;display: flex;flex-direction: column;overflow-x: hidden'>
|
||
<panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
|
||
<chart-list
|
||
ref="chartList"
|
||
:variablesInit="variablesInit"
|
||
name="dashboard"
|
||
:dashboardId="showPanel.id"
|
||
:class="{'show-top':showTopBtn, 'is-dashboard': true}"
|
||
:data-list="dataList"
|
||
:is-export-html="false"
|
||
:nowTimeType="nowTimeType"
|
||
:from="fromRoute.dashboard"
|
||
:time-range="searchTime"
|
||
@edit-chart="editChart"
|
||
@on-refresh-time="refreshTime"
|
||
@on-remove-chart="delChart"
|
||
@on-add-group-item-chart="addGroupItem"
|
||
@refreshPanel="refreshPanel"
|
||
:loading="chartListLoading"
|
||
></chart-list>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: -10px;" v-show="showTopBtn" :title="$t('overall.backToTop')"><i class="nz-icon nz-icon-top"></i></button>
|
||
|
||
<transition name="right-box">
|
||
<chart-right-box
|
||
v-if="chartRightBoxShow"
|
||
v-my-loading="rightBox.loading"
|
||
ref="addChartModal"
|
||
:chart="chart"
|
||
:from="fromRoute.dashboard"
|
||
:panel-data="panelData"
|
||
:show-panel="showPanel"
|
||
@close="closeChartBox"
|
||
@reload="panelReload"
|
||
@reloadOnlyPanel="panelReloadOnlyPanel"
|
||
@on-create-success="createSuccess"
|
||
></chart-right-box>
|
||
</transition>
|
||
<transition name="right-box">
|
||
<chart-temp-box v-if="rightBox.chartTemp.show" :from="fromRoute.dashboard" :obj="chart" :panel-data="panelData" :show-panel="showPanel" @close="closeChartTempBox" @on-create-success="createSuccess"></chart-temp-box>
|
||
</transition>
|
||
<transition name="right-box">
|
||
<panel-box v-if="rightBox.panel.show" :from="fromRoute.dashboard" ref="panelBox" :obj="panel" @close="closePanelBox" @reload="panelReload" @reloadForDel="panelReloadForDel" ></panel-box>
|
||
</transition>
|
||
<!-- dashboard模板 -->
|
||
<transition name="right-box">
|
||
<dashboardTempBox v-if="rightBox.dashboardTemp.show" :from="fromRoute.dashboard" @close="closeDashboardTempBox"></dashboardTempBox>
|
||
</transition>
|
||
<!-- 快照进度 -->
|
||
<snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="searchTime" :snapshotVisible.sync="snapshotVisible" api="dashboard"></snapshotProgress>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
import { chartCache, clearTopology } from '@/components/common/js/common'
|
||
import { data as le5leData, observers as le5leObservers } from 'le5le-store/store/data.js'
|
||
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
|
||
import bus from '../../../libs/bus'
|
||
import pickTime from '../../common/pickTime'
|
||
import selectDashboard from '../../common/popBox/selectDashboard'
|
||
import panelBox from '@/components/common/rightBox/panelBox'
|
||
import chartTempBox from '@/components/common/rightBox/chartTempBox'
|
||
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
|
||
import { fromRoute } from '@/components/common/js/constants'
|
||
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
||
import routerPathParams from '@/components/common/mixin/routerPathParams'
|
||
import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
|
||
import exportHtmlMixin from '@/components/common/mixin/exportHtml'
|
||
import panelVariables from '@/components/common/panel/panelVariables'
|
||
import snapshotProgress from '@/components/common/snapshotProgress/snapshotProgress.vue'
|
||
import dashboardTempBox from '@/components/common/rightBox/dashboardTempBox'
|
||
import playlist from '@/components/common/playlist'
|
||
|
||
// import FileSaver from 'file-saver'
|
||
// import chartData from './testData'
|
||
export default {
|
||
name: 'dashboard',
|
||
mixins: [routerPathParams, htmlToPdfMixin, exportHtmlMixin],
|
||
data () {
|
||
return {
|
||
fromRoute,
|
||
pdfId: 'pdfDom',
|
||
htmlTitle: 'dashboard',
|
||
dashboardLoading: false,
|
||
overScroll10: false,
|
||
isLoading: true,
|
||
showTopBtn: false, // top按钮
|
||
visible: false,
|
||
chartListLoading: true,
|
||
rightBox: { // 面板弹出框相关
|
||
chart: { show: false },
|
||
chartTemp: { show: false },
|
||
dashboardTemp: { show: false },
|
||
panel: { show: false },
|
||
loading: false
|
||
},
|
||
tableHover: false,
|
||
searchTime: bus.getTimezontDateRange(),
|
||
intervalTimer: null,
|
||
interval: 0,
|
||
showPanel: { // panel下拉列表
|
||
id: '',
|
||
name: '',
|
||
type: 'dashboard'
|
||
},
|
||
panel: { // 新增panel
|
||
id: '',
|
||
name: '',
|
||
remark: '',
|
||
param: {
|
||
report: {
|
||
enable: false,
|
||
receivers: [],
|
||
range: {
|
||
unit: ''
|
||
},
|
||
schedule: {
|
||
repeat: 0,
|
||
nums: [],
|
||
type: 0
|
||
}
|
||
}
|
||
}
|
||
},
|
||
chart: {},
|
||
blankChart: {
|
||
id: '',
|
||
name: '',
|
||
type: 'line',
|
||
span: 6,
|
||
datasource: 'metrics',
|
||
height: 2,
|
||
unit: 2,
|
||
param: {
|
||
stack: 0,
|
||
nullType: 'null',
|
||
legend: { placement: 'bottom', values: [], show: true },
|
||
enable: {
|
||
legend: true,
|
||
valueMapping: false,
|
||
thresholds: false,
|
||
visibility: false,
|
||
rightYAxis: false,
|
||
tooltip: true
|
||
},
|
||
thresholdShow: true,
|
||
thresholds: [{ value: undefined, color: randomcolor() }],
|
||
showHeader: 1,
|
||
visibility: {
|
||
varName: '',
|
||
operator: 'equal',
|
||
varValue: '',
|
||
result: 'show'
|
||
},
|
||
rightYAxis: {
|
||
elementNames: [],
|
||
style: 'line',
|
||
unit: 2,
|
||
label: '',
|
||
min: undefined,
|
||
max: undefined
|
||
},
|
||
dataLink: [],
|
||
tooltip: {
|
||
mode: 'all',
|
||
sort: 'none'
|
||
},
|
||
},
|
||
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0, step: undefined, queryType: 1 }],
|
||
panel: '',
|
||
sync: 0,
|
||
remark: '',
|
||
groupId: '',
|
||
varType: ''
|
||
},
|
||
pageObj: {
|
||
pageNo: 1,
|
||
pageSize: -1, // 此处获取所有数据
|
||
total: 0
|
||
},
|
||
panelData: [],
|
||
panelDataDragTmp: [],
|
||
searchMsg: { // 给搜索框子组件传递的信息
|
||
searchLabelList: [
|
||
{
|
||
name: 'ID',
|
||
type: 'input',
|
||
label: 'ids',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: this.$t('overall.name'),
|
||
type: 'input',
|
||
label: 'name',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: this.$t('overall.type'),
|
||
type: 'selectString',
|
||
label: 'chartType',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: this.$t('dashboard.dashboard.chartForm.varType'),
|
||
type: 'select',
|
||
label: 'varType',
|
||
disabled: false
|
||
}
|
||
]
|
||
},
|
||
searchLabel: {}, // 搜索参数
|
||
// ---图表相关参数--start
|
||
dataList: [], // 数据列表
|
||
filter: { // 过滤条件
|
||
dashboardId: 0
|
||
},
|
||
dashboardId: 0,
|
||
// ---图表相关参数--end
|
||
scrollbarWrap: null,
|
||
batchDeleteObjs: [],
|
||
nowTimeType: {},
|
||
showTopLine: false,
|
||
// 查看模式
|
||
mode: '',
|
||
variables: [],
|
||
variablesInit: false, // 判断variables 是否加载完成
|
||
snapshotVisible: false,
|
||
stableTime: null,
|
||
timeData: [
|
||
{ id: 1, text: this.$t('dashboard.dashboard.lastFiveMin'), type: 'minute', value: 5 },
|
||
{ id: 2, text: this.$t('dashboard.dashboard.lastFifteenMin'), type: 'minute', value: 15 },
|
||
{ id: 3, text: this.$t('dashboard.dashboard.lastThirtyMin'), type: 'minute', value: 30 },
|
||
{ id: 4, text: this.$t('dashboard.dashboard.lastOneHour'), type: 'hour', value: 1 },
|
||
{ id: 5, text: this.$t('dashboard.dashboard.lastThreeHour'), type: 'hour', value: 3 },
|
||
{ id: 6, text: this.$t('dashboard.dashboard.lastSixHour'), type: 'hour', value: 6 },
|
||
{ id: 7, text: this.$t('dashboard.dashboard.lastTwelveHour'), type: 'hour', value: 12 },
|
||
{ id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
|
||
{ id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
|
||
{ id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
|
||
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 },
|
||
{ id: 13, text: 'today', type: 'relative', value: 0 },
|
||
{ id: 14, text: 'Yesterday ', type: 'relative', value: 1 },
|
||
{ id: 15, text: 'The day before yesterday', type: 'relative', value: 2 },
|
||
{ id: 16, text: 'This day last week', type: 'relative', value: 7 },
|
||
{ id: 17, text: 'This week', type: 'relative', value: 0 },
|
||
{ id: 18, text: 'Previous week', type: 'relative', value: 1 },
|
||
{ id: 19, text: 'This month', type: 'relative', value: 0 },
|
||
{ id: 20, text: 'Previous month', type: 'relative', value: 1 }
|
||
],
|
||
intervalList: [
|
||
{ value: 0, label: this.$t('dashboard.dashboard.chartForm.lockList.off') },
|
||
{ value: 30, label: '30s' },
|
||
{ value: 60, label: '1m' },
|
||
{ value: 300, label: '5m' },
|
||
{ value: 900, label: '15m' },
|
||
{ value: 1800, label: '30m' }
|
||
],
|
||
playListControls: false, // 显示隐藏轮播按钮
|
||
playlistObj: {} // 轮播仪表盘配置
|
||
}
|
||
},
|
||
components: {
|
||
'pick-time': pickTime,
|
||
'panel-box': panelBox,
|
||
topToolMoreOptions,
|
||
selectDashboard,
|
||
chartTempBox,
|
||
chartRightBox,
|
||
panelVariables, // 处理panel变量的组件
|
||
snapshotProgress, // 快照进度
|
||
dashboardTempBox, // dashboard模板
|
||
playlist
|
||
},
|
||
computed: {
|
||
chartRightBoxShow () {
|
||
return this.$store.getters.getShowRightBox
|
||
},
|
||
delChartFlag () {
|
||
return this.$store.getters.getDelChart
|
||
},
|
||
panelLock () {
|
||
return this.$store.getters.getPanelLock
|
||
},
|
||
timePickerLocked () {
|
||
return this.$store.getters.getTimePickerLocked
|
||
},
|
||
timePickerRange () {
|
||
return this.$store.getters.getTimePickerRange
|
||
}
|
||
},
|
||
methods: {
|
||
// 开始轮播列表
|
||
async startPlay (data) {
|
||
this.playlistObj = data
|
||
let mode = data.mode
|
||
if (!mode || mode == 'normal') {
|
||
mode = ''
|
||
}
|
||
this.mode = mode
|
||
this.$store.commit('setMode', this.mode)
|
||
this.playListControls = true
|
||
},
|
||
// 结束轮播列表
|
||
stopPlaylist () {
|
||
this.clearPlaylist()
|
||
const param = { ...this.$route.query }
|
||
if (param.mode) {
|
||
delete param.mode
|
||
const path = this.fromRoute.dashboard
|
||
this.updatePath(param, path)
|
||
}
|
||
},
|
||
clearPlaylist () {
|
||
if (this.mode) {
|
||
this.mode = ''
|
||
this.$store.commit('setMode', this.mode)
|
||
}
|
||
this.playListControls = false
|
||
this.playlistObj = {}
|
||
},
|
||
closeDashboardTempBox (refresh) {
|
||
this.rightBox.dashboardTemp.show = false
|
||
if (refresh) {
|
||
this.getTableData()
|
||
}
|
||
},
|
||
// 通过dashboard模板创建
|
||
addByTemplate () {
|
||
this.rightBox.dashboardTemp.show = true
|
||
// 关闭selectDashboard弹框
|
||
this.$refs.selectDashboard && this.$refs.selectDashboard.esc()
|
||
},
|
||
// 新增收藏
|
||
addStarred (data) {
|
||
this.$refs.selectDashboard.addStarred(data)
|
||
},
|
||
// 删除收藏
|
||
delStarred (data) {
|
||
this.$refs.selectDashboard.delStarred(data)
|
||
},
|
||
// 刷新
|
||
refreshPanel () {
|
||
this.getData(this.filter)
|
||
},
|
||
|
||
del (u) {
|
||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||
confirmButtonText: this.$t('tip.yes'),
|
||
cancelButtonText: this.$t('tip.no'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$delete('visual/dashboard?ids=' + u.id).then((response) => {
|
||
if (response.code === 200) {
|
||
this.$message({
|
||
duration: 1000,
|
||
type: 'success',
|
||
message: this.$t('tip.deleteSuccess')
|
||
})
|
||
// 判断删除的是否是当前面板
|
||
if (this.showPanel.id == u.id) {
|
||
this.clearPlaylist()
|
||
const param = { t: +new Date() }
|
||
const path = this.fromRoute.dashboard
|
||
this.updatePath(param, path)
|
||
this.getTableData(true)
|
||
} else {
|
||
this.getTableData(false)
|
||
}
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
this.$store.dispatch('clearPanel')
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$store.dispatch('clearPanel')
|
||
})
|
||
},
|
||
edit (u) {
|
||
this.$get('visual/dashboard/' + u.id).then(res => {
|
||
if (res.code === 200) {
|
||
this.panel = res.data
|
||
if (!this.$lodash.get(this.panel, 'param.report', '')) {
|
||
this.panel = {
|
||
...this.panel,
|
||
param: {
|
||
report: {
|
||
enable: false,
|
||
range: {
|
||
unit: 'day'
|
||
},
|
||
schedule: {
|
||
type: '2',
|
||
repeat: 1,
|
||
nums: [],
|
||
stime: '',
|
||
etime: ''
|
||
},
|
||
receivers: []
|
||
},
|
||
chartShare: 'none',
|
||
defaultTimeRange: 4,
|
||
refresh: 0
|
||
}
|
||
}
|
||
}
|
||
this.panel.param.report.schedule.type = this.panel.param.report.schedule.type + ''
|
||
const startTime = this.$lodash.get(this.panel, 'param.report.schedule.stime', '')
|
||
if (startTime !== '') {
|
||
this.panel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss')
|
||
} else {
|
||
this.panel.param.report.schedule.stime = ''
|
||
}
|
||
const endTime = this.$lodash.get(this.panel, 'param.report.schedule.etime', '')
|
||
if (endTime !== '') {
|
||
this.panel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss')
|
||
} else {
|
||
this.panel.param.report.schedule.etime = ''
|
||
}
|
||
this.rightBox.panel.show = true
|
||
}
|
||
})
|
||
// this.panel = Object.assign({}, u)
|
||
},
|
||
toAdd () {
|
||
if (!this.hasButton('dashboard_view')) {
|
||
return
|
||
}
|
||
this.rightBox.panel.show = true
|
||
// 关闭selectDashboard弹框
|
||
this.$refs.selectDashboard && this.$refs.selectDashboard.esc()
|
||
this.panel = {
|
||
id: '',
|
||
name: '',
|
||
remark: '',
|
||
param: {
|
||
report: {
|
||
enable: false,
|
||
receivers: [],
|
||
range: {
|
||
unit: 'day'
|
||
},
|
||
schedule: {
|
||
stime: '',
|
||
etime: '',
|
||
nums: [],
|
||
type: 2 + '',
|
||
repeat: 1
|
||
}
|
||
},
|
||
chartShare: 'none',
|
||
defaultTimeRange: 4,
|
||
refresh: 0
|
||
}
|
||
}
|
||
},
|
||
panelReload (clearShowPanel) {
|
||
this.getTableData(clearShowPanel)
|
||
},
|
||
refreshTime (st, et) {
|
||
const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
|
||
const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
|
||
this.searchTime = [startTime, endTime, '']
|
||
},
|
||
panelReloadForDel: function () {
|
||
if (this.showPanel.id === this.panel.id) {
|
||
this.showPanel.id = ''
|
||
}
|
||
this.getTableData()
|
||
},
|
||
/* 图表相关操作--start */
|
||
addChart () {
|
||
this.chart = this.newChart()
|
||
this.chart.param.thresholds = [{ value: undefined, color: randomcolor() }]
|
||
this.chart.dashboardId = this.showPanel.id
|
||
this.chart.panelName = this.showPanel.name
|
||
this.$nextTick(() => {
|
||
this.$refs.addChartModal.isStable = 'stable'
|
||
})
|
||
},
|
||
addGroupItem (groupId) {
|
||
this.chart = this.newChart()
|
||
this.chart.groupId = groupId
|
||
this.chart.dashboardId = this.showPanel.id
|
||
this.chart.panelName = this.showPanel.name
|
||
this.chart.isGroup = true
|
||
this.$nextTick(() => {
|
||
this.$refs.addChartModal.isStable = 'stable'
|
||
})
|
||
},
|
||
newChart () {
|
||
return JSON.parse(JSON.stringify(this.blankChart))
|
||
},
|
||
// 编辑图表信息,打开编辑弹窗
|
||
editChart (data, copy) {
|
||
if (copy) {
|
||
this.chart = JSON.parse(JSON.stringify(data))
|
||
this.chart.x = 0
|
||
this.chart.y = 0
|
||
this.chart.dashboardId = this.showPanel.id
|
||
this.chart.panelName = this.showPanel.name
|
||
this.chart.id = ''
|
||
this.chart.elements.forEach((item) => {
|
||
item.id = ''
|
||
item.chartId = ''
|
||
delete item.seq
|
||
})
|
||
if (this.chart.datasource !== 'metrics' && this.chart.datasource !== 'logs') {
|
||
delete this.chart.elements
|
||
}
|
||
if (!this.chart.groupId || this.chart.groupId == -1) {
|
||
this.chart.groupId = ''
|
||
}
|
||
if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) {
|
||
this.chart.param.collapse = false
|
||
}
|
||
setTimeout(() => {
|
||
this.$refs.addChartModal.isStable = 'stable'
|
||
})
|
||
} else {
|
||
this.rightBox.loading = true
|
||
this.$get('visual/dashboard/chart/' + data.id).then(res => {
|
||
this.rightBox.loading = false
|
||
if (res.code === 200) {
|
||
const chartData = res.data
|
||
this.chart = JSON.parse(JSON.stringify(chartData))
|
||
this.chart.dashboardId = this.showPanel.id
|
||
this.chart.panelName = this.showPanel.name
|
||
if (this.chart.param) {
|
||
this.chart.param = JSON.parse(this.chart.param)
|
||
} else {
|
||
this.chart.param = {}
|
||
}
|
||
if (!this.chart.groupId || this.chart.groupId == -1) {
|
||
this.chart.groupId = ''
|
||
}
|
||
if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) {
|
||
this.chart.param.collapse = false
|
||
}
|
||
setTimeout(() => {
|
||
this.$refs.addChartModal.isStable = 'stable'
|
||
})
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
closeChartBox (refresh) {
|
||
this.chart = {}
|
||
this.$store.dispatch('clearPanel')
|
||
},
|
||
closeChartTempBox (refresh) {
|
||
this.rightBox.chartTemp.show = false
|
||
if (refresh) {
|
||
this.getData(this.filter)
|
||
}
|
||
},
|
||
closePanelBox (refresh) {
|
||
this.rightBox.panel.show = false
|
||
if (refresh) {
|
||
this.getTableData()
|
||
}
|
||
},
|
||
// 移除图表:弹出确认框询问
|
||
delChart (data, from) {
|
||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||
confirmButtonText: this.$t('tip.yes'),
|
||
cancelButtonText: this.$t('tip.no'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$delete('visual/dashboard/chart?ids=' + data.id).then(response => {
|
||
if (response.code === 200) {
|
||
this.$message({
|
||
duration: 2000,
|
||
type: 'success',
|
||
message: this.$t('tip.deleteSuccess')
|
||
})
|
||
this.getData(this.filter)
|
||
this.chart = {}
|
||
this.$store.dispatch('clearPanel')
|
||
// this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
|
||
// if(nextChart&&prevChart){ //删除图表为中间位置
|
||
// prevChart.next = nextChart.id;
|
||
// nextChart.prev = prevChart.id;
|
||
// }else{
|
||
// if(!nextChart) prevChart.next = -1;
|
||
// if(!prevChart) nextChart.prev = 0;
|
||
// }
|
||
// this.getTableData(); //删除相关图表后，刷新面板数据
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
this.$store.dispatch('clearPanel')
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.chart = {}
|
||
this.$store.dispatch('clearPanel')
|
||
})
|
||
},
|
||
// 图表创建成功，回调panel页面，进行图表的刷新
|
||
createSuccess (msg, data, params, panel) {
|
||
this.filter.dashboardId = this.showPanel.id
|
||
this.getData(this.filter)
|
||
this.$store.dispatch('clearPanel')
|
||
},
|
||
// 获取数据,用在子页面
|
||
getData (params) {
|
||
if (!this.hasButton('dashboard_view')) {
|
||
return
|
||
}
|
||
this.dataList = []
|
||
this.chartListLoading = true
|
||
if (le5leData) {
|
||
Object.keys(le5leData).forEach(key => {
|
||
le5leData[key] = null
|
||
delete le5leData[key]
|
||
})
|
||
}
|
||
if (le5leObservers) {
|
||
Object.keys(le5leObservers).forEach(key => {
|
||
le5leObservers[key] = null
|
||
delete le5leObservers[key]
|
||
})
|
||
}
|
||
this.$get('visual/dashboard/chart?dashboardId=' + params.dashboardId + '&groupId=0' + '&pageSize=-1').then(response => {
|
||
if (response.code === 200) {
|
||
this.chartListLoading = false
|
||
this.dataList = response.data.list.map(item => {
|
||
return {
|
||
...item,
|
||
loaded: false
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 面板相关操作
|
||
panelChange (val, type) {
|
||
if (!val) {
|
||
return false
|
||
}
|
||
clearTopology()
|
||
const param = {
|
||
dashboardId: val.id
|
||
}
|
||
if (type === 'select') {
|
||
// 切换面板 则停止仪表盘轮播
|
||
this.clearPlaylist()
|
||
} else {
|
||
param.mode = this.mode
|
||
}
|
||
const path = this.fromRoute.dashboard
|
||
this.updatePath(param, path)
|
||
setTimeout(() => {
|
||
this.variablesInit = false
|
||
this.showPanel = val
|
||
this.variables = this.$lodash.cloneDeep(this.$lodash.get(this, 'showPanel.param.variables', []) || [])
|
||
this.showPanel.type = 'dashboard'
|
||
this.filter.dashboardId = this.showPanel.id
|
||
this.dashboardId = this.showPanel.id
|
||
this.getData(this.filter)
|
||
this.$refs.chartList.cleanData()
|
||
})
|
||
},
|
||
|
||
/* 图表相关操作--end */
|
||
/* 时间条件查询--start */
|
||
// 选择日期变化
|
||
dateChange (timeRange) {
|
||
clearTopology()
|
||
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||
this.setSearchTime('searchTime')
|
||
this.getData(this.filter)
|
||
this.$store.dispatch('dispatchPanelTime', {
|
||
time: this.searchTime,
|
||
nowTimeType: this.nowTimeType
|
||
})
|
||
this.$store.dispatch('dispatchTimePickerRange', {
|
||
time: this.searchTime,
|
||
nowTimeType: this.nowTimeType
|
||
})
|
||
// 选择时间范围时更新路由
|
||
if (timeRange) {
|
||
const param = { ...this.$route.query }
|
||
param.nowTimeType = JSON.stringify(this.nowTimeType)
|
||
param.searchTime = JSON.stringify(this.searchTime)
|
||
const path = this.fromRoute.dashboard
|
||
this.updatePath(param, path)
|
||
}
|
||
},
|
||
storeDispatchPanelTime () { // 设置searchTime
|
||
this.$store.dispatch('dispatchPanelTime', {
|
||
time: this.searchTime,
|
||
nowTimeType: this.nowTimeType
|
||
})
|
||
},
|
||
/* 时间条件查询--end */
|
||
// 公用操作
|
||
jumpTo (data, id) {
|
||
bus.$emit('menu-change', data)
|
||
this.$router.push({
|
||
path: '/' + data,
|
||
query: {
|
||
t: +new Date()
|
||
}
|
||
})
|
||
},
|
||
panelReloadOnlyPanel () { // 仅刷新panel数据
|
||
if (!this.hasButton('dashboard_view')) {
|
||
return
|
||
}
|
||
this.$get('visual/dashboard?pageSize=-1').then(response => {
|
||
if (response.code === 200) {
|
||
this.panelData = response.data.list
|
||
for (let i = 0; i < this.panelData.length; i++) {
|
||
if (this.panelData[i].id == this.showPanel.id) {
|
||
this.showPanel = this.panelData[i]
|
||
break
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
async getTableData (clearShowPanel) {
|
||
const vm = this
|
||
let response
|
||
try {
|
||
response = await this.$get('visual/dashboard?type=dashboard&pageSize=-1')
|
||
} catch (error) {
|
||
// console.log('error................'+JSON.stringify(error));
|
||
if (error) {
|
||
console.error(error)
|
||
this.$message.error(error.toString())
|
||
}
|
||
}
|
||
if (response.code === 200) {
|
||
let isInitData = false
|
||
this.panelData = JSON.parse(JSON.stringify(response.data.list))
|
||
if (response.data.list.length > 0) {
|
||
if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
|
||
this.showPanel = JSON.parse(JSON.stringify(this.$store.state.showPanel))
|
||
}
|
||
if (clearShowPanel) {
|
||
this.showPanel.id = ''
|
||
}
|
||
if (!this.showPanel.id) {
|
||
this.showPanel = response.data.list[0]
|
||
this.filter.dashboardId = this.showPanel.id
|
||
this.getData(this.filter)
|
||
isInitData = true
|
||
} else {
|
||
handler(response.data.list)
|
||
this.filter.dashboardId = this.showPanel.id
|
||
}
|
||
this.isLoading = false
|
||
} else {
|
||
this.showPanel.id = ''
|
||
this.filter.dashboardId = ''
|
||
this.isLoading = !response.data.list.length === 0
|
||
}
|
||
this.pageObj.total = response.data.total
|
||
if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) {
|
||
this.getData(this.filter)
|
||
}
|
||
this.$store.state.showPanel.id = 0
|
||
this.$store.state.showPanel.name = ''
|
||
this.$store.state.showPanel.type = 'dashboard'
|
||
} else {
|
||
if (response.msg) {
|
||
this.$message.error(response.msg)
|
||
} else if (response.error) {
|
||
this.$message.error(response.error)
|
||
} else {
|
||
this.$message.error(response)
|
||
}
|
||
}
|
||
this.variables = this.$lodash.get(this, 'showPanel.param.variables', []) || []
|
||
|
||
function handler (panelData) {
|
||
panelData.forEach(panel => {
|
||
if (panel.id == vm.showPanel.id) {
|
||
vm.showPanel = panel
|
||
} else {
|
||
if (panel.children && panel.children.length > 0) {
|
||
handler(panel.children)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 定期刷新
|
||
selectInterval (val) {
|
||
this.visible = false
|
||
clearInterval(this.intervalTimer)
|
||
if (val) {
|
||
this.interval = val
|
||
const start = new Date(this.searchTime[1])
|
||
const now = new Date()
|
||
const interval = Math.floor((now.getTime() - start.getTime()) / 1000) // 计算当前结束时间到现在的间隔（秒）
|
||
if (interval >= 60) { // 如果结束时间到现在超过1分钟，则
|
||
this.getIntervalData(interval)
|
||
}
|
||
this.intervalTimer = setInterval(() => {
|
||
this.getIntervalData(this.interval)
|
||
}, val * 1000)
|
||
}
|
||
},
|
||
getIntervalData (interval) { // interval:结束时间到现在的秒数
|
||
const start = new Date(this.searchTime[0])
|
||
const end = new Date(this.searchTime[1])
|
||
start.setSeconds(start.getSeconds() + interval)
|
||
end.setSeconds(end.getSeconds() + interval)
|
||
const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm')
|
||
const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm')
|
||
this.searchTime = [startTime, endTime]
|
||
// 刷新数据
|
||
this.dateChange()
|
||
},
|
||
// 滚动事件触发下拉加载
|
||
onScroll () {
|
||
const _self = this
|
||
this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
|
||
_self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
|
||
_self.overScroll10 = _self.scrollbarWrap.scrollTop > 50
|
||
_self.$refs.chartList.onScroll(_self.scrollbarWrap.scrollTop)
|
||
}, 300, function () {
|
||
_self.showTopLine = _self.scrollbarWrap.scrollTop > 10
|
||
}))
|
||
},
|
||
tableListEnter () {
|
||
this.tableHover = true
|
||
},
|
||
tableListLeave () {
|
||
this.tableHover = false
|
||
},
|
||
toTop (wrap) {
|
||
let currentTop = wrap.scrollTop
|
||
const interval = currentTop / 10
|
||
const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
|
||
if (currentTop === 0) {
|
||
clearInterval(intervalFunc)
|
||
} else {
|
||
currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
|
||
wrap.scrollTop = currentTop
|
||
}
|
||
}, 20)
|
||
},
|
||
load () {
|
||
|
||
},
|
||
addChartBefore () {
|
||
this.$store.dispatch('dispatchEditChart', {
|
||
chart: '',
|
||
type: 'add'
|
||
})
|
||
},
|
||
disposeChart () {
|
||
const chartInfo = this.$store.getters.getChart
|
||
const groupId = this.$store.getters.getGroupId
|
||
const type = this.$store.getters.getType
|
||
if (type === 'add') {
|
||
this.addChart()
|
||
}
|
||
if (type === 'edit') {
|
||
this.editChart(chartInfo)
|
||
}
|
||
if (type === 'addGroupItem') {
|
||
this.addGroupItem(groupId)
|
||
}
|
||
if (type === 'delete') {
|
||
this.delChart(chartInfo)
|
||
}
|
||
if (type === 'duplicate') {
|
||
this.editChart(chartInfo, true)
|
||
}
|
||
},
|
||
afterImport () {
|
||
this.dateChange()
|
||
this.panelReloadOnlyPanel()
|
||
},
|
||
htmlToPdf () {
|
||
const dom = document.getElementsByClassName(this.pdfId)[0]
|
||
if (dom) {
|
||
// dom = dom.getElementsByClassName('vue-grid-layout')[0]
|
||
this.htmlTitle = this.showPanel.name
|
||
this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
|
||
this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
|
||
// const div = document.createElement('div')
|
||
// div.setAttribute('class', 'el-loading-spinner')
|
||
// div.innerText = '12321312312312321'
|
||
// dom.insertBefore(div,)
|
||
let flag = true
|
||
this.showScreenLoading(true)
|
||
let timer = setInterval(() => {
|
||
flag = true
|
||
this.$refs.chartList.copyDataList.forEach(chart => {
|
||
if (chart.type !== 'group') {
|
||
flag = flag && chart.loaded
|
||
} else if (chart.collapse) {
|
||
chart.children.forEach(groupChart => {
|
||
flag = flag && groupChart.loaded
|
||
})
|
||
}
|
||
})
|
||
if (flag) {
|
||
clearInterval(timer)
|
||
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()
|
||
this.getPdf(dom, -1 * position.left, -1 * position.top, this.searchTime)
|
||
// this.getPdf(dom, 0, 0)
|
||
}, 2000)
|
||
}
|
||
}, 200)
|
||
} else {
|
||
this.showScreenLoading(false)
|
||
}
|
||
this.$refs.topTool.closeDialog()
|
||
},
|
||
exportType (type) {
|
||
if (type === 'PDF') {
|
||
this.htmlToPdf()
|
||
} else {
|
||
// this.exportToHtml(this.showPanel.name)
|
||
this.snapshotVisible = true
|
||
}
|
||
},
|
||
// 切换查看模式
|
||
cycle () {
|
||
if (!this.mode) {
|
||
// TV模式（隐藏 menu，header）
|
||
this.mode = 'tv'
|
||
} else if (this.mode === 'tv') {
|
||
// 简易模式（隐藏 menu，header 和 操作栏）
|
||
this.mode = 'se'
|
||
this.$message({
|
||
type: 'success',
|
||
message: this.$t('overall.toExit')
|
||
})
|
||
} else if (this.mode === 'se') {
|
||
// 默认模式
|
||
this.mode = ''
|
||
}
|
||
this.$store.commit('setMode', this.mode)
|
||
const param = { ...this.$route.query, mode: this.mode }
|
||
const path = this.fromRoute.dashboard
|
||
this.updatePath(param, path)
|
||
},
|
||
// 按ESC键退出查看模式
|
||
escExit (e) {
|
||
// 轮播时禁止esc
|
||
if (this.playListControls) {
|
||
return
|
||
}
|
||
const message = document.querySelectorAll('.el-message-box__wrapper')
|
||
const showMessage = message.length && Array.from(message).some(item => {
|
||
return item.style.display !== 'none'
|
||
})
|
||
const dialog = document.querySelectorAll('.el-dialog__wrapper')
|
||
const showDialog = dialog.length && Array.from(dialog).some(item => {
|
||
return item.style.display !== 'none'
|
||
})
|
||
// 防止ESC键冲突
|
||
if (showMessage || showDialog) {
|
||
return false
|
||
}
|
||
if (e.keyCode === 27 && this.mode) {
|
||
// 默认模式
|
||
this.mode = ''
|
||
this.$store.commit('setMode', this.mode)
|
||
const param = { ...this.$route.query }
|
||
delete param.mode
|
||
const path = this.fromRoute.dashboard
|
||
this.updatePath(param, path)
|
||
}
|
||
},
|
||
getPanelData () {
|
||
this.variablesInit = true
|
||
this.$nextTick(() => {
|
||
this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
|
||
})
|
||
},
|
||
// 时间选择器设置默认时间范围
|
||
setDefaultTimeRange () {
|
||
this.$nextTick(() => {
|
||
if (this.$route.query.searchTime) return
|
||
let nowTimeType = this.$lodash.cloneDeep(this.timeData[3])
|
||
const defaultTimeRange = this.$lodash.get(this.showPanel, 'param.defaultTimeRange')
|
||
if (defaultTimeRange) {
|
||
nowTimeType = this.timeData.find(item => item.id == defaultTimeRange)
|
||
}
|
||
this.nowTimeType = this.$lodash.cloneDeep(nowTimeType)
|
||
// 刷新时间范围
|
||
this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
|
||
this.setSearchTime('searchTime')
|
||
this.$store.dispatch('dispatchPanelTime', {
|
||
time: this.searchTime,
|
||
nowTimeType: this.nowTimeType
|
||
})
|
||
// this.$store.dispatch('dispatchTimePickerRange', {
|
||
// time: this.searchTime,
|
||
// nowTimeType: this.nowTimeType
|
||
// })
|
||
})
|
||
},
|
||
setTimePickerRange () {
|
||
this.$nextTick(() => {
|
||
if (this.$route.query.searchTime) return
|
||
if (!this.timePickerLocked || !this.timePickerRange.nowTimeType) {
|
||
this.setDefaultTimeRange()
|
||
}
|
||
const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
|
||
this.searchTime = this.timePickerRange.time
|
||
this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.searchTime)
|
||
this.setSearchTime('searchTime')
|
||
})
|
||
},
|
||
// 设置默认刷新
|
||
setDefaultRefresh () {
|
||
this.$nextTick(() => {
|
||
if (this.$route.query.refresh) return
|
||
let refresh = this.$lodash.cloneDeep(this.intervalList[0])
|
||
const defaultRefresh = this.$lodash.get(this.showPanel, 'param.refresh')
|
||
if (defaultRefresh) {
|
||
refresh = this.intervalList.find(item => item.value == defaultRefresh)
|
||
}
|
||
this.$refs.pickTime.selectInterval(refresh)
|
||
})
|
||
}
|
||
},
|
||
async created () {
|
||
const searchKeys = {
|
||
// key: path 键
|
||
// value: vue set 参数
|
||
dashboardId: { target: this, propertyName: 'dashboardId', type: 'number' },
|
||
searchTime: { target: this, propertyName: 'searchTime', type: 'jsonParse' },
|
||
nowTimeType: { target: this, propertyName: 'nowTimeType', type: 'jsonParse' },
|
||
mode: { target: this, propertyName: 'mode', type: 'string' }
|
||
}
|
||
this.initQueryFromPath(searchKeys)
|
||
if (this.$route.query.searchTime) {
|
||
this.$store.dispatch('dispatchTimePickerRange', {
|
||
time: this.searchTime,
|
||
nowTimeType: this.nowTimeType
|
||
})
|
||
}
|
||
this.showPanel.id = this.dashboardId
|
||
this.filter.dashboardId = this.dashboardId
|
||
// 设置查看模式
|
||
this.$store.commit('setMode', this.mode)
|
||
await this.getTableData()
|
||
if (this.nowTimeType.type) {
|
||
this.setSearchTime('searchTime', this.nowTimeType)
|
||
}
|
||
if (this.nowTimeType) {
|
||
this.nowTimeType.start_time = this.searchTime[0]
|
||
this.nowTimeType.end_time = this.searchTime[1]
|
||
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowTimeType)
|
||
}
|
||
this.$store.dispatch('dispatchPanelTime', {
|
||
time: this.searchTime,
|
||
nowTimeType: this.nowTimeType
|
||
})
|
||
if (this.$route.query.refresh) {
|
||
const refresh = this.intervalList.find(item => item.label == this.$route.query.refresh)
|
||
this.$refs.pickTime.selectInterval(refresh)
|
||
}
|
||
},
|
||
mounted () {
|
||
// 监听键盘ESC事件
|
||
document.addEventListener('keydown', this.escExit)
|
||
bus.$on('refreshPanel', this.refreshPanel)
|
||
this.scrollbarWrap = this.$refs.dashboardScrollbar
|
||
this.onScroll()
|
||
document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
|
||
document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
|
||
},
|
||
watch: {
|
||
showPanel: {
|
||
handler () {
|
||
this.$nextTick(() => {
|
||
if (this.timePickerLocked && this.timePickerRange && this.timePickerRange.nowTimeType) {
|
||
this.setTimePickerRange()
|
||
} else {
|
||
this.setDefaultTimeRange()
|
||
}
|
||
this.setDefaultRefresh()
|
||
})
|
||
}
|
||
},
|
||
// 监听图表联动配置
|
||
'showPanel.param.chartShare': {
|
||
handler (value) {
|
||
// 每次切换联动模式 tooltip设置显示
|
||
const option = {
|
||
tooltip: {
|
||
className: 'chart-time-series'
|
||
}
|
||
}
|
||
for (const key in chartCache) {
|
||
if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') {
|
||
continue
|
||
}
|
||
chartCache[key].setOption(option)
|
||
}
|
||
this.$store.commit('setCurrentMousemove', 0)
|
||
if (value && value !== 'none') {
|
||
this.$store.commit('setConnect', value)
|
||
echarts.connect('timeSeriesGroup')
|
||
} else {
|
||
this.$store.commit('setConnect', value)
|
||
echarts.disconnect('timeSeriesGroup')
|
||
}
|
||
}
|
||
},
|
||
searchTime: {
|
||
immediate: true,
|
||
deep: true,
|
||
handler (n) {
|
||
// localStorage.setItem('dashboardTime', JSON.stringify(n))
|
||
}
|
||
},
|
||
chartRightBoxShow: {
|
||
immediate: false,
|
||
deep: true,
|
||
handler (n) {
|
||
if (n) {
|
||
this.disposeChart()
|
||
} else {
|
||
this.$refs.addChartModal.isStable = 'instability'
|
||
if (this.stableTime) {
|
||
clearTimeout(this.stableTime)
|
||
this.stableTime = null
|
||
}
|
||
}
|
||
}
|
||
},
|
||
delChartFlag: {
|
||
immediate: false,
|
||
deep: true,
|
||
handler (n) {
|
||
if (n) {
|
||
this.disposeChart()
|
||
}
|
||
}
|
||
},
|
||
$route: {
|
||
immediate: true,
|
||
handler () {
|
||
// 是否弹出侧滑
|
||
const add = this.$route.query.add
|
||
this.$nextTick(() => {
|
||
if (add) {
|
||
if (add === 'chart') {
|
||
this.addChartBefore()
|
||
}
|
||
if (add === 'dashboard') {
|
||
this.toAdd()
|
||
}
|
||
const newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝
|
||
delete newQuery.add
|
||
this.$router.replace({ query: newQuery })
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
beforeDestroy () {
|
||
// 移除键盘ESC事件
|
||
document.removeEventListener('keydown', this.escExit)
|
||
bus.$off('refreshPanel')
|
||
this.$store.dispatch('dispatchPanelLock', { flag: true })
|
||
this.$store.dispatch('dispatchPanelTime', {
|
||
time: [],
|
||
nowTimeType: {}
|
||
})
|
||
if (document.querySelector('#tableList')) {
|
||
document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
|
||
document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
|
||
}
|
||
if (this.scrollbarWrap) {
|
||
this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
|
||
}
|
||
localStorage.removeItem('dashboardTime')
|
||
if (!document.onmousemove) { // 添加鼠标移动事件监听
|
||
document.onmousemove = null
|
||
}
|
||
|
||
// 页面销毁 清除图表联动
|
||
this.$store.commit('setCurrentMousemove', 0)
|
||
this.$store.commit('setConnect', 'none')
|
||
echarts.disconnect('timeSeriesGroup')
|
||
|
||
this.$store.commit('setMode', '')
|
||
|
||
clearTopology()
|
||
}
|
||
}
|
||
</script>
|