NEZ-1779 fix : 恢复和删除接口功能实现 Lint代码
This commit is contained in:
zhangxiaolong
2070
nezha-fronted/package-lock.json
generated
2070
nezha-fronted/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -13,8 +13,8 @@
|
||||
"dependencies": {
|
||||
"@johmun/vue-tags-input": "^2.1.0",
|
||||
"@riophae/vue-treeselect": "^0.4.0",
|
||||
"@svgdotjs/svg.js": "^3.0.16",
|
||||
"@svgdotjs/svg.panzoom.js": "^2.1.1",
|
||||
"@svgdotjs/svg.js": "3.0.16",
|
||||
"@svgdotjs/svg.panzoom.js": "2.1.1",
|
||||
"@topology/activity-diagram": "^0.3.0",
|
||||
"@topology/chart-diagram": "^0.3.0",
|
||||
"@topology/class-diagram": "^0.3.0",
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "nz-icon"; /* Project id 2030432 */
|
||||
src: url('iconfont.woff2?t=1647598587378') format('woff2'),
|
||||
url('iconfont.woff?t=1647598587378') format('woff'),
|
||||
url('iconfont.ttf?t=1647598587378') format('truetype');
|
||||
src: url('iconfont.woff2?t=1649732646689') format('woff2'),
|
||||
url('iconfont.woff?t=1649732646689') format('woff'),
|
||||
url('iconfont.ttf?t=1649732646689') format('truetype');
|
||||
}
|
||||
|
||||
.nz-icon {
|
||||
@@ -13,6 +13,50 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.nz-icon-tool:before {
|
||||
content: "\e76f";
|
||||
}
|
||||
|
||||
.nz-icon-export-pdf:before {
|
||||
content: "\e770";
|
||||
}
|
||||
|
||||
.nz-icon-Router:before {
|
||||
content: "\e766";
|
||||
}
|
||||
|
||||
.nz-icon-Computer:before {
|
||||
content: "\e767";
|
||||
}
|
||||
|
||||
.nz-icon-a-Networkdevices:before {
|
||||
content: "\e768";
|
||||
}
|
||||
|
||||
.nz-icon-Other:before {
|
||||
content: "\e769";
|
||||
}
|
||||
|
||||
.nz-icon-a-Virtualmachine:before {
|
||||
content: "\e76a";
|
||||
}
|
||||
|
||||
.nz-icon-Switch:before {
|
||||
content: "\e76b";
|
||||
}
|
||||
|
||||
.nz-icon-Server:before {
|
||||
content: "\e76c";
|
||||
}
|
||||
|
||||
.nz-icon-ADC:before {
|
||||
content: "\e76d";
|
||||
}
|
||||
|
||||
.nz-icon-Firewall:before {
|
||||
content: "\e76e";
|
||||
}
|
||||
|
||||
.nz-icon-Topology:before {
|
||||
content: "\e763";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
1612
nezha-fronted/src/assets/css/font/iconfont.json
Normal file
1612
nezha-fronted/src/assets/css/font/iconfont.json
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "nz-icon"; /* Project id 2030432 */
|
||||
src: url('./font/iconfont.woff2?t=1647598587378') format('woff2'),
|
||||
url('./font/iconfont.woff?t=1647598587378') format('woff'),
|
||||
url('./font/iconfont.ttf?t=1647598587378') format('truetype');
|
||||
src: url('./font/iconfont.woff2?t=1649732646689') format('woff2'),
|
||||
url('./font/iconfont.woff?t=1649732646689') format('woff'),
|
||||
url('./font/iconfont.ttf?t=1649732646689') format('truetype');
|
||||
}
|
||||
|
||||
.nz-icon {
|
||||
@@ -13,6 +13,50 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.nz-icon-tool:before {
|
||||
content: "\e76f";
|
||||
}
|
||||
|
||||
.nz-icon-export-pdf:before {
|
||||
content: "\e770";
|
||||
}
|
||||
|
||||
.nz-icon-Router:before {
|
||||
content: "\e766";
|
||||
}
|
||||
|
||||
.nz-icon-Computer:before {
|
||||
content: "\e767";
|
||||
}
|
||||
|
||||
.nz-icon-a-Networkdevices:before {
|
||||
content: "\e768";
|
||||
}
|
||||
|
||||
.nz-icon-Other:before {
|
||||
content: "\e769";
|
||||
}
|
||||
|
||||
.nz-icon-a-Virtualmachine:before {
|
||||
content: "\e76a";
|
||||
}
|
||||
|
||||
.nz-icon-Switch:before {
|
||||
content: "\e76b";
|
||||
}
|
||||
|
||||
.nz-icon-Server:before {
|
||||
content: "\e76c";
|
||||
}
|
||||
|
||||
.nz-icon-ADC:before {
|
||||
content: "\e76d";
|
||||
}
|
||||
|
||||
.nz-icon-Firewall:before {
|
||||
content: "\e76e";
|
||||
}
|
||||
|
||||
.nz-icon-Topology:before {
|
||||
content: "\e763";
|
||||
}
|
||||
|
||||
@@ -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'
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -297,4 +297,3 @@ export default {
|
||||
setChart(this.chartId, null)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -99,7 +99,8 @@ export default {
|
||||
showAllData: false,
|
||||
allDataLength: 0,
|
||||
severityData: this.$store.getters.severityData,
|
||||
severityDataWeight: this.$store.getters.severityDataWeight
|
||||
severityDataWeight: this.$store.getters.severityDataWeight,
|
||||
isExportData: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -161,6 +162,9 @@ export default {
|
||||
query (elements, startTime, endTime, step, params) {
|
||||
this.isError = false
|
||||
this.allDataLength = 0
|
||||
if (this.isExportData) {
|
||||
this.chartData = this.chartInfo.chartData
|
||||
}
|
||||
try {
|
||||
switch (this.chartInfo.datasource) {
|
||||
case 'metrics':
|
||||
|
||||
@@ -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>
|
||||
@@ -56,10 +56,10 @@
|
||||
import ChartScreenHeader from '@/components/chart/ChartScreenHeader'
|
||||
import chart from '@/components/chart/chart'
|
||||
import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from '@/components/chart/chart/tools'
|
||||
import {alertMessage as alertMessageConstant, chartType, fromRoute} from '@/components/common/js/constants'
|
||||
import { alertMessage as alertMessageConstant, 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'
|
||||
import alertMessageInfoTab from '@/components/common/alert/alertMessageInfoTab'
|
||||
|
||||
@@ -77,7 +77,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',
|
||||
@@ -149,7 +149,6 @@ export default {
|
||||
})
|
||||
},
|
||||
returnColor (obj) {
|
||||
console.log(obj, this.severityDataWeight)
|
||||
let color = ''
|
||||
if (!obj) {
|
||||
color = '#23bf9a'
|
||||
|
||||
@@ -126,7 +126,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'
|
||||
|
||||
@@ -41,6 +41,9 @@
|
||||
<el-dropdown-item v-has="'main_edit'">
|
||||
<div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-has="'main_edit'">
|
||||
<div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
</top-tool-more-options>
|
||||
</div>
|
||||
@@ -72,6 +75,9 @@
|
||||
<el-dropdown-item v-has="'main_edit'">
|
||||
<div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-has="'main_edit'">
|
||||
<div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
</top-tool-more-options>
|
||||
</div>
|
||||
@@ -146,9 +152,10 @@ import chartTempBox from '@/components/common/rightBox/chartTempBox'
|
||||
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
|
||||
import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
|
||||
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
||||
import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
|
||||
export default {
|
||||
name: 'panelTabNew',
|
||||
mixins: [subDataListMixin, detailViewRightMixin],
|
||||
mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin],
|
||||
props: {
|
||||
from: String,
|
||||
obj: Object,
|
||||
@@ -172,6 +179,7 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
fromRoute,
|
||||
pdfId: 'pdfDom',
|
||||
panelTabLoading: false,
|
||||
showTopBtn: false, // top按钮
|
||||
visible: false,
|
||||
@@ -724,6 +732,43 @@ export default {
|
||||
if (type === 'duplicate') {
|
||||
this.editChart(chartInfo, true)
|
||||
}
|
||||
},
|
||||
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
|
||||
this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
|
||||
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.getElementsByTagName('html')[0].style.overflow = 'visible'
|
||||
const position = dom.getBoundingClientRect()
|
||||
console.log(position)
|
||||
this.getPdf(dom, -1 * position.left, -1 * position.top)
|
||||
// this.getPdf(dom, 0, 0)
|
||||
}, 2000)
|
||||
}
|
||||
}, 200)
|
||||
} else {
|
||||
this.showScreenLoading(false)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartDataFormat from '../charts/chartDataFormat'
|
||||
import chartDataFormat from '../chart/chartDataFormat'
|
||||
export default {
|
||||
name: 'chartUnit',
|
||||
model: {
|
||||
|
||||
@@ -108,7 +108,7 @@ export default {
|
||||
label: this.$t('project.endpoint.state'),
|
||||
prop: 'state',
|
||||
show: true,
|
||||
minWidth: 200,
|
||||
minWidth: 200
|
||||
}
|
||||
// {
|
||||
// label: this.$t('project.endpoint.status'),
|
||||
|
||||
@@ -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,0,0,.3)'
|
||||
})
|
||||
} else {
|
||||
if (loading) {
|
||||
loading.close()
|
||||
// loading.close()
|
||||
document.body.style.height = '100%'
|
||||
document.getElementsByTagName('html')[0].style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
@@ -200,14 +200,12 @@ export function arrLength (rule, value, callback) { // 校验数组
|
||||
}
|
||||
}
|
||||
export function datePicker (rule, value, callback) { // 校验时间选择
|
||||
if(value[0]&&value[1]){
|
||||
if (value[0] && value[1]) {
|
||||
callback()
|
||||
}else{
|
||||
} else {
|
||||
callback(new Error(vm.$t('validate.required')))
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export function sysObjectIdInput (rule, value, callback) {
|
||||
const sysId = /^(\d{1,9}\.){0,}[\d]+$/
|
||||
|
||||
@@ -5,7 +5,7 @@ export default {
|
||||
type: Array
|
||||
},
|
||||
targetTab: String,
|
||||
from: String,
|
||||
from: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -114,7 +114,7 @@ export default {
|
||||
label: this.$t('asset.alertNum'),
|
||||
prop: 'alertNum',
|
||||
show: true,
|
||||
width: 120,
|
||||
width: 120
|
||||
}, {
|
||||
label: this.$t('asset.endpointNum2'),
|
||||
prop: 'endpointNum',
|
||||
|
||||
@@ -169,88 +169,88 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from "@/libs/bus";
|
||||
import { put } from "@/http";
|
||||
import { arrLength, datePicker } from "@/components/common/js/validate";
|
||||
import moment from "moment-timezone";
|
||||
import bus from '@/libs/bus'
|
||||
import { put } from '@/http'
|
||||
import { arrLength, datePicker } from '@/components/common/js/validate'
|
||||
import moment from 'moment-timezone'
|
||||
|
||||
export default {
|
||||
name: "backupsBox",
|
||||
name: 'backupsBox',
|
||||
props: {
|
||||
obj: {
|
||||
type: Object,
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
editBackup: {
|
||||
status: "",
|
||||
status: '',
|
||||
checkDays: [],
|
||||
checkDay: [],
|
||||
timepicker: "",
|
||||
datepicker: "",
|
||||
retention: "",
|
||||
state: "",
|
||||
timepicker: '',
|
||||
datepicker: '',
|
||||
retention: '',
|
||||
state: '',
|
||||
schedule: {
|
||||
repeat: "",
|
||||
stime: "",
|
||||
type: "",
|
||||
nums: [],
|
||||
repeat: '',
|
||||
stime: '',
|
||||
type: '',
|
||||
nums: []
|
||||
}
|
||||
},
|
||||
},
|
||||
whoshow: "",
|
||||
activeName: "",
|
||||
dateFormatStr: localStorage.getItem("nz-default-dateFormat")
|
||||
? localStorage.getItem("nz-default-dateFormat")
|
||||
: "YYYY-MM-DD HH:ss:mm",
|
||||
whoshow: '',
|
||||
activeName: '',
|
||||
dateFormatStr: localStorage.getItem('nz-default-dateFormat')
|
||||
? localStorage.getItem('nz-default-dateFormat')
|
||||
: 'YYYY-MM-DD HH:ss:mm',
|
||||
rules: {
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "change",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
datepicker: [{ validator: datePicker, trigger: "blur" }],
|
||||
datepicker: [{ validator: datePicker, trigger: 'blur' }],
|
||||
checkDays: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "change",
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'change'
|
||||
},
|
||||
{ validator: arrLength, trigger: "blur" },
|
||||
{ validator: arrLength, trigger: 'blur' }
|
||||
],
|
||||
retention: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
Status: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "change",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
repeat: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
checkDay: [{ validator: arrLength, trigger: "blur" }],
|
||||
checkDay: [{ validator: arrLength, trigger: 'blur' }]
|
||||
},
|
||||
week: [
|
||||
this.$t("week.Mon"),
|
||||
this.$t("week.Tue"),
|
||||
this.$t("week.Wed"),
|
||||
this.$t("week.Thu"),
|
||||
this.$t("week.Fri"),
|
||||
this.$t("week.Sat"),
|
||||
this.$t("week.Sun"),
|
||||
this.$t('week.Mon'),
|
||||
this.$t('week.Tue'),
|
||||
this.$t('week.Wed'),
|
||||
this.$t('week.Thu'),
|
||||
this.$t('week.Fri'),
|
||||
this.$t('week.Sat'),
|
||||
this.$t('week.Sun')
|
||||
],
|
||||
month: [
|
||||
1,
|
||||
@@ -284,209 +284,207 @@ export default {
|
||||
29,
|
||||
30,
|
||||
31,
|
||||
"Last",
|
||||
],
|
||||
};
|
||||
'Last'
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
components: {},
|
||||
|
||||
computed: {},
|
||||
|
||||
created() {
|
||||
const dateFormatStr = localStorage.getItem("nz-default-dateFormat");
|
||||
created () {
|
||||
const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
|
||||
if (dateFormatStr) {
|
||||
this.dateFormatStr = dateFormatStr.split(" ")[0];
|
||||
this.dateFormatStr = dateFormatStr.split(' ')[0]
|
||||
} else {
|
||||
this.dateFormatStr = "YYYY-MM-DD";
|
||||
this.dateFormatStr = 'YYYY-MM-DD'
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {},
|
||||
beforeMount () {},
|
||||
|
||||
mounted() {},
|
||||
mounted () {},
|
||||
|
||||
methods: {
|
||||
changeCheck(item) {
|
||||
changeCheck (item) {
|
||||
if (this.editBackup.type == 3) {
|
||||
const nums = [];
|
||||
this.editBackup.nums = [];
|
||||
const nums = []
|
||||
this.editBackup.nums = []
|
||||
for (const i in this.editBackup.checkDay) {
|
||||
nums.push(Number(this.editBackup.checkDay[i]) + 1);
|
||||
nums.push(Number(this.editBackup.checkDay[i]) + 1)
|
||||
}
|
||||
this.editBackup.nums = nums;
|
||||
this.editBackup.nums = nums
|
||||
} else if (this.editBackup.type == 4) {
|
||||
|
||||
const nums = [];
|
||||
this.editBackup.nums = [];
|
||||
const nums = []
|
||||
this.editBackup.nums = []
|
||||
this.editBackup.checkDays.forEach((e, i) => {
|
||||
if (e === 31) {
|
||||
nums.push(-1);
|
||||
nums.push(-1)
|
||||
} else {
|
||||
nums.push(Number(this.editBackup.checkDays[i]) + 1);
|
||||
nums.push(Number(this.editBackup.checkDays[i]) + 1)
|
||||
}
|
||||
});
|
||||
this.editBackup.nums = nums;
|
||||
})
|
||||
this.editBackup.nums = nums
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.$forceUpdate()
|
||||
},
|
||||
statusChange(item) {
|
||||
this.$forceUpdate();
|
||||
statusChange (item) {
|
||||
this.$forceUpdate()
|
||||
if (item == true) {
|
||||
this.editBackup.state = 1;
|
||||
this.editBackup.state = 1
|
||||
} else {
|
||||
this.editBackup.state = 0;
|
||||
this.editBackup.state = 0
|
||||
}
|
||||
},
|
||||
save() {
|
||||
save () {
|
||||
this.$refs.backupsForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.editBackup.datepicker[0] = bus
|
||||
.timeFormate(this.editBackup.datepicker[0])
|
||||
.split(" ")[0];
|
||||
.split(' ')[0]
|
||||
|
||||
this.editBackup.stime = this.editBackup.datepicker.join(" ");
|
||||
let offset = localStorage.getItem("nz-sys-timezone");
|
||||
offset = moment.tz(offset).format("Z");
|
||||
this.editBackup.stime = new Date(this.editBackup.stime).getTime();
|
||||
offset = Number.parseInt(offset);
|
||||
this.editBackup.stime -= offset * 60 * 60 * 1000;
|
||||
this.editBackup.stime = this.editBackup.datepicker.join(' ')
|
||||
let offset = localStorage.getItem('nz-sys-timezone')
|
||||
offset = moment.tz(offset).format('Z')
|
||||
this.editBackup.stime = new Date(this.editBackup.stime).getTime()
|
||||
offset = Number.parseInt(offset)
|
||||
this.editBackup.stime -= offset * 60 * 60 * 1000
|
||||
|
||||
put("/sys/backup", {
|
||||
put('/sys/backup', {
|
||||
state: Number(this.editBackup.state),
|
||||
schedule: {
|
||||
type: Number(this.editBackup.type),
|
||||
stime: this.editBackup.stime,
|
||||
repeat: Number(this.editBackup.repeat),
|
||||
nums: this.editBackup.nums,
|
||||
nums: this.editBackup.nums
|
||||
},
|
||||
retention: Number(this.editBackup.retention),
|
||||
retention: Number(this.editBackup.retention)
|
||||
}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.esc(true);
|
||||
this.esc(true)
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
inputchange(n) {
|
||||
this.$forceUpdate();
|
||||
inputchange (n) {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
datasourceChange(tab) {
|
||||
datasourceChange (tab) {
|
||||
switch (tab.name) {
|
||||
case "2":
|
||||
this.whoshow = 2;
|
||||
break;
|
||||
case "1":
|
||||
this.whoshow = 1;
|
||||
break;
|
||||
case "3":
|
||||
this.whoshow = 3;
|
||||
break;
|
||||
case "4":
|
||||
this.whoshow = 4;
|
||||
break;
|
||||
case '2':
|
||||
this.whoshow = 2
|
||||
break
|
||||
case '1':
|
||||
this.whoshow = 1
|
||||
break
|
||||
case '3':
|
||||
this.whoshow = 3
|
||||
break
|
||||
case '4':
|
||||
this.whoshow = 4
|
||||
break
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.$forceUpdate()
|
||||
},
|
||||
clickOutside() {
|
||||
this.esc(false);
|
||||
clickOutside () {
|
||||
this.esc(false)
|
||||
},
|
||||
/* 关闭弹框 */
|
||||
esc(refresh) {
|
||||
this.$emit("close", refresh);
|
||||
},
|
||||
esc (refresh) {
|
||||
this.$emit('close', refresh)
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
obj: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.editBackup = JSON.parse(JSON.stringify(n));
|
||||
this.editBackup.checkDay = [];
|
||||
this.editBackup.checkDays = [];
|
||||
this.editBackup.type = this.editBackup.type + "";
|
||||
const stime1 = this.utcTimeToTimezoneStr(this.editBackup.stime);
|
||||
const stime = this.utcTimeToTimezone(this.editBackup.stime);
|
||||
const time = stime1.split(" ");
|
||||
time[0] = stime;
|
||||
this.$set(this.editBackup, "datepicker", time);
|
||||
handler (n) {
|
||||
this.editBackup = JSON.parse(JSON.stringify(n))
|
||||
this.editBackup.checkDay = []
|
||||
this.editBackup.checkDays = []
|
||||
this.editBackup.type = this.editBackup.type + ''
|
||||
const stime1 = this.utcTimeToTimezoneStr(this.editBackup.stime)
|
||||
const stime = this.utcTimeToTimezone(this.editBackup.stime)
|
||||
const time = stime1.split(' ')
|
||||
time[0] = stime
|
||||
this.$set(this.editBackup, 'datepicker', time)
|
||||
if (this.editBackup.state == 1) {
|
||||
this.editBackup.status = true;
|
||||
this.$emit("statechange", true);
|
||||
this.editBackup.status = true
|
||||
this.$emit('statechange', true)
|
||||
} else {
|
||||
this.editBackup.status = false;
|
||||
this.$emit("statechange", false);
|
||||
this.editBackup.status = false
|
||||
this.$emit('statechange', false)
|
||||
}
|
||||
switch (this.editBackup.type) {
|
||||
case "1":
|
||||
this.activeName = "1";
|
||||
this.whoshow = 1;
|
||||
break;
|
||||
case "2":
|
||||
this.activeName = "2";
|
||||
this.whoshow = 2;
|
||||
break;
|
||||
case "3":
|
||||
this.activeName = "3";
|
||||
this.whoshow = 3;
|
||||
break;
|
||||
case "4":
|
||||
this.activeName = "4";
|
||||
this.whoshow = 4;
|
||||
break;
|
||||
case '1':
|
||||
this.activeName = '1'
|
||||
this.whoshow = 1
|
||||
break
|
||||
case '2':
|
||||
this.activeName = '2'
|
||||
this.whoshow = 2
|
||||
break
|
||||
case '3':
|
||||
this.activeName = '3'
|
||||
this.whoshow = 3
|
||||
break
|
||||
case '4':
|
||||
this.activeName = '4'
|
||||
this.whoshow = 4
|
||||
break
|
||||
}
|
||||
const checkdays = [];
|
||||
const checkdays = []
|
||||
|
||||
this.checkDay = [];
|
||||
this.checkDay = []
|
||||
if (this.editBackup.type == 3) {
|
||||
this.editBackup.nums.forEach((e) => {
|
||||
if (e == -1 ) {
|
||||
checkdays.push(6);
|
||||
}else{
|
||||
checkdays.push(e - 1);
|
||||
|
||||
if (e == -1) {
|
||||
checkdays.push(6)
|
||||
} else {
|
||||
checkdays.push(e - 1)
|
||||
}
|
||||
});
|
||||
this.$set(this.editBackup, "checkDay", checkdays);
|
||||
})
|
||||
this.$set(this.editBackup, 'checkDay', checkdays)
|
||||
} else if (this.editBackup.type == 4) {
|
||||
this.editBackup.nums.forEach((e) => {
|
||||
if (e == -1) {
|
||||
checkdays.push(31);
|
||||
checkdays.push(31)
|
||||
} else {
|
||||
checkdays.push(e - 1);
|
||||
checkdays.push(e - 1)
|
||||
}
|
||||
});
|
||||
this.$set(this.editBackup, "checkDays", checkdays);
|
||||
})
|
||||
this.$set(this.editBackup, 'checkDays', checkdays)
|
||||
}
|
||||
this.$forceUpdate()
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
},
|
||||
"editBackup.status": {
|
||||
'editBackup.status': {
|
||||
deep: true,
|
||||
handler(n) {
|
||||
handler (n) {
|
||||
if (n) {
|
||||
this.editBackup.state = 1;
|
||||
this.editBackup.status = n;
|
||||
this.$emit("statechange", true);
|
||||
this.editBackup.state = 1
|
||||
this.editBackup.status = n
|
||||
this.$emit('statechange', true)
|
||||
} else {
|
||||
this.editBackup.state = 0;
|
||||
this.editBackup.status = n;
|
||||
this.$emit("statechange", false);
|
||||
this.editBackup.state = 0
|
||||
this.editBackup.status = n
|
||||
this.$emit('statechange', false)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
"editBackup.datepicker": {
|
||||
'editBackup.datepicker': {
|
||||
deep: true,
|
||||
handler(n) {
|
||||
handler (n) {
|
||||
this.editBackup.datepicker[0] = bus
|
||||
.timeFormate(new Date(n[0]))
|
||||
.split(" ")[0];
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
.split(' ')[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
|
||||
@@ -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',
|
||||
@@ -642,7 +642,7 @@ export default {
|
||||
handler (n, o) {
|
||||
this.isEdit = true
|
||||
this.editAlertRule = JSON.parse(JSON.stringify(n))
|
||||
console.log(this.editAlertRule);
|
||||
console.log(this.editAlertRule)
|
||||
if (this.editAlertRule.id || this.editAlertRule.name) {
|
||||
this.expressions = [this.editAlertRule.expr]
|
||||
this.showTypeSelect = true // 当 edit 时禁用 type下拉框
|
||||
|
||||
@@ -93,7 +93,7 @@ export default {
|
||||
default: return false
|
||||
}
|
||||
},
|
||||
isThresholdConfig(type) {
|
||||
isThresholdConfig (type) {
|
||||
switch (type) {
|
||||
case 'line':
|
||||
case 'area':
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -139,7 +139,7 @@
|
||||
import bus from '../../../../libs/bus'
|
||||
import axios from 'axios'
|
||||
import table from '@/components/common/mixin/table'
|
||||
import chartDataFormat from '../../../charts/chartDataFormat'
|
||||
import chartDataFormat from '../../../chart/chartDataFormat'
|
||||
import alertRuleInfo from '../../alert/alertRuleInfo'
|
||||
import { calcDurationByStringTimeB } from '../../js/tools'
|
||||
import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
|
||||
@@ -148,7 +148,7 @@ import alertMessageLabelMixin from '@/components/common/alert/alertMessageLabelM
|
||||
export default {
|
||||
name: 'alertMessageTable',
|
||||
components: {
|
||||
alertRuleInfo: alertRuleInfo,
|
||||
alertRuleInfo: alertRuleInfo
|
||||
},
|
||||
props: {
|
||||
nowTime: {
|
||||
|
||||
@@ -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],
|
||||
|
||||
@@ -300,7 +300,7 @@ export default {
|
||||
hideTableTooltip,
|
||||
tableDataSort (item) {
|
||||
let orderBy = ''
|
||||
let str = item.prop
|
||||
const str = item.prop
|
||||
if (str === 'dc') {
|
||||
orderBy = str
|
||||
}
|
||||
|
||||
@@ -65,11 +65,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post ,put} from '@/http'
|
||||
import { post, put } from '@/http'
|
||||
import lodash from 'lodash'
|
||||
import bus from '@/libs/bus'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'backupsTable',
|
||||
mixins: [],
|
||||
@@ -79,7 +78,7 @@ export default {
|
||||
customTableTitle: Array,
|
||||
isConfigurations: Boolean,
|
||||
tableData: Array,
|
||||
tableData2: Array,
|
||||
tableData2: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -110,52 +109,46 @@ export default {
|
||||
|
||||
computed: {},
|
||||
|
||||
|
||||
|
||||
methods: {
|
||||
changeType(item){
|
||||
if(item == 1){
|
||||
changeType (item) {
|
||||
if (item == 1) {
|
||||
return this.$t('backup.only')
|
||||
}else if(item ==2){
|
||||
} else if (item == 2) {
|
||||
return this.$t('backup.Daily')
|
||||
|
||||
}else if(item == 3 ){
|
||||
} else if (item == 3) {
|
||||
return this.$t('backup.Weekly')
|
||||
|
||||
}else{
|
||||
} else {
|
||||
return this.$t('backup.Monthly')
|
||||
|
||||
}
|
||||
},
|
||||
Restore(row){
|
||||
put('/sys/backup/restore',{filename:row.fileName}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$emit("getTableData",'recent')
|
||||
}else {
|
||||
Restore (row) {
|
||||
put('/sys/backup/restore', { filename: row.fileName }).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$emit("getTableData", 'recent')
|
||||
} else {
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
del(row){
|
||||
this.$delete('/sys/backup?filename='+row.fileName).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$emit("getTableData",'recent')
|
||||
}else {
|
||||
del (row) {
|
||||
this.$delete('/sys/backup?filename=' + row.fileName).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$emit("getTableData", 'recent')
|
||||
} else {
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
changeDate(item){
|
||||
let time =Date.parse(item)
|
||||
let time1 = this.timeFormate(time)
|
||||
changeDate (item) {
|
||||
const time = Date.parse(item)
|
||||
const time1 = this.timeFormate(time)
|
||||
return time1
|
||||
},
|
||||
getNum(item){
|
||||
getNum (item) {
|
||||
return bus.getNumStr(item)
|
||||
},
|
||||
backupNow (item) {
|
||||
post('/sys/backup').then((res) => {
|
||||
// console.log(res)
|
||||
})
|
||||
},
|
||||
edit () {
|
||||
|
||||
@@ -115,12 +115,12 @@ export default {
|
||||
label: 'MAC',
|
||||
prop: 'mac',
|
||||
show: true,
|
||||
minWidth: 200,
|
||||
minWidth: 200
|
||||
}, {
|
||||
label: this.$t('config.ipamip.asset'),
|
||||
prop: 'asset',
|
||||
show: true,
|
||||
width: 200,
|
||||
width: 200
|
||||
}, {
|
||||
label: this.$t('overall.state'),
|
||||
prop: 'state',
|
||||
|
||||
@@ -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-my-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,
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
:resizable="true"
|
||||
:width="`${item.width}`"
|
||||
class="data-column"
|
||||
:sortable="item.sortable"
|
||||
>
|
||||
<template slot="header">
|
||||
<span class="data-column__span">{{item.label}}</span>
|
||||
@@ -30,8 +31,8 @@
|
||||
</template>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop === 'state'">
|
||||
<div class="active-icon green-bg inline-block" v-if="scope.row.state"></div>
|
||||
<div class="active-icon gray-bg inline-block" v-else></div>
|
||||
<div class="active-icon green-bg inline-block" v-if="scope.row.state===1"></div>
|
||||
<div class="active-icon red-bg inline-block" v-else></div>
|
||||
</template>
|
||||
<span v-else-if="item.prop === 'dc'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop].name}}</span>
|
||||
<span v-else-if="item.prop === 'rate'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}%</span>
|
||||
@@ -65,28 +66,36 @@ export default {
|
||||
tableTitle: [ // 原table列
|
||||
{
|
||||
label: this.$t('overall.dc'),
|
||||
prop: 'dc'
|
||||
prop: 'dc',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('ping.sourceIp'),
|
||||
prop: 'source'
|
||||
prop: 'source',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('ping.targetIp'),
|
||||
prop: 'ip'
|
||||
prop: 'ip',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('overall.state'),
|
||||
prop: 'state'
|
||||
prop: 'state',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('ping.packetLossRate'),
|
||||
prop: 'rate'
|
||||
prop: 'rate',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('ping.rttAverage'),
|
||||
prop: 'avg'
|
||||
prop: 'avg',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('ping.rttMinimum'),
|
||||
prop: 'min'
|
||||
prop: 'min',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('ping.rttMaximum'),
|
||||
prop: 'max'
|
||||
prop: 'max',
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
:resizable="true"
|
||||
:width="`${item.width}`"
|
||||
class="data-column"
|
||||
:sortable="item.sortable"
|
||||
>
|
||||
<template slot="header">
|
||||
<span class="data-column__span">{{item.label}}</span>
|
||||
@@ -30,12 +31,11 @@
|
||||
</template>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop === 'state'">
|
||||
<div class="active-icon green-bg inline-block" v-if="scope.row.state"></div>
|
||||
<div class="active-icon gray-bg inline-block" v-else></div>
|
||||
<div class="active-icon green-bg inline-block" v-if="scope.row.state===1"></div>
|
||||
<div class="active-icon red-bg inline-block" v-else></div>
|
||||
</template>
|
||||
<span v-else-if="item.prop === 'dc'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop].name}}</span>
|
||||
<span v-else-if="item.prop === 'rate'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}%</span>
|
||||
<span v-else-if="(item.prop === 'avg'||item.prop === 'min'||item.prop === 'max')&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}ms</span>
|
||||
<span v-else-if="item.prop === 'time'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}ms</span>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
@@ -65,28 +65,24 @@ export default {
|
||||
tableTitle: [ // 原table列
|
||||
{
|
||||
label: this.$t('overall.dc'),
|
||||
prop: 'dc'
|
||||
prop: 'dc',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('ping.sourceIp'),
|
||||
prop: 'source'
|
||||
prop: 'source',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('ping.targetIp'),
|
||||
prop: 'ip'
|
||||
prop: 'ip',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('overall.state'),
|
||||
prop: 'state'
|
||||
prop: 'state',
|
||||
sortable: true
|
||||
}, {
|
||||
label: this.$t('ping.packetLossRate'),
|
||||
prop: 'rate'
|
||||
}, {
|
||||
label: this.$t('ping.rttAverage'),
|
||||
prop: 'avg'
|
||||
}, {
|
||||
label: this.$t('ping.rttMinimum'),
|
||||
prop: 'min'
|
||||
}, {
|
||||
label: this.$t('ping.rttMaximum'),
|
||||
prop: 'max'
|
||||
label: this.$t('trace.totalTime'),
|
||||
prop: 'time',
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -35,7 +35,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
containerShow: true,
|
||||
containerShow: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -18,9 +18,15 @@
|
||||
<template v-for="(secondMenu, secondIndex) in menu.children">
|
||||
<el-submenu v-if="secondMenu.children && secondMenu.children.length > 0" :key="secondIndex" :index="`${index}-${secondIndex}`">
|
||||
<span slot="title" class="data-column__span">{{$t(secondMenu.i18n)}}</span>
|
||||
<el-menu-item v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`" :index="thirdMenu.route">{{$t(thirdMenu.i18n)}}</el-menu-item>
|
||||
<el-menu-item v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`" :index="thirdMenu.route">
|
||||
<i :class="thirdMenu.icon"></i>
|
||||
<span slot="title" class="data-column__span">{{$t(thirdMenu.i18n)}}</span>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else :key="secondIndex" :index="secondMenu.route">{{$t(secondMenu.i18n)}}</el-menu-item>
|
||||
<el-menu-item v-else :key="secondIndex" :index="secondMenu.route">
|
||||
<i :class="secondMenu.icon"></i>
|
||||
<span slot="title" class="data-column__span">{{$t(secondMenu.i18n)}}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else :key="index" :index="menu.route">
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="system">
|
||||
<div class="system-config-form system-config-backup">
|
||||
<div class="system-title">{{$t('backup.configurations')}}</div>
|
||||
<div class="system-title">{{ $t("backup.configurations") }}</div>
|
||||
<nz-data-list
|
||||
ref="dataList"
|
||||
id="modelTable"
|
||||
@@ -16,7 +16,6 @@
|
||||
:is-configurations="true"
|
||||
:table-data="tableData"
|
||||
@edit="edit"
|
||||
|
||||
>
|
||||
</backups-table>
|
||||
</template>
|
||||
@@ -24,7 +23,7 @@
|
||||
</div>
|
||||
|
||||
<div class="system-config-form system-config-backup">
|
||||
<div class="system-title">{{$t('backup.recent')}}</div>
|
||||
<div class="system-title">{{ $t("backup.recent") }}</div>
|
||||
<nz-data-list
|
||||
ref="dataList"
|
||||
id="modelTable"
|
||||
@@ -40,14 +39,18 @@
|
||||
key="backups2"
|
||||
:table-data2="tableData2"
|
||||
@getTableData="getTableData"
|
||||
|
||||
>
|
||||
</backups-table>
|
||||
</template>
|
||||
</nz-data-list>
|
||||
</div>
|
||||
<transition name="right-box">
|
||||
<backups-box v-if="rightBoxshow" :obj="object" @close="closeRightBox" class="backup_box"></backups-box>
|
||||
<backups-box
|
||||
v-if="rightBoxshow"
|
||||
:obj="object"
|
||||
@close="closeRightBox"
|
||||
class="backup_box"
|
||||
></backups-box>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
@@ -109,13 +112,12 @@ export default {
|
||||
methods: {
|
||||
|
||||
getTableData (item) {
|
||||
console.log(item);
|
||||
if(!item){
|
||||
if (!item) {
|
||||
this.$get('/sys/backup').then((res) => {
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
this.tableData[0].retention = res.data.retention
|
||||
this.tableData[0].state = res.data.state == 1? true :false
|
||||
this.tableData[0].state = res.data.state == 1
|
||||
for (const i in res.data.schedule) {
|
||||
this.tableData[0].schedule[i] = res.data.schedule[i]
|
||||
}
|
||||
@@ -126,39 +128,45 @@ export default {
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
this.tableData2 = res.data
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}else if(item == 'backup'){
|
||||
} else if (item == 'backup') {
|
||||
this.$get('/sys/backup').then((res) => {
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
this.tableData[0].retention = res.data.retention
|
||||
this.tableData[0].state = res.data.state == 1? true :false
|
||||
this.tableData[0].state = res.data.state == 1
|
||||
for (const i in res.data.schedule) {
|
||||
this.tableData[0].schedule[i] = res.data.schedule[i]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}else if(item == 'recent'){
|
||||
|
||||
this.$post('/sys/backup/list').then((res) => {
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
this.tableData2 = res.data
|
||||
}
|
||||
}
|
||||
})
|
||||
} else if (item == 'recent') {
|
||||
this.$post('/sys/backup/list').then((res) => {
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
this.tableData2 = res.data
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log(this.tableData);
|
||||
},
|
||||
edit (row) {
|
||||
this.object = { ...row ,
|
||||
checkDay:'',
|
||||
checkDays:'',
|
||||
datepicker:''
|
||||
this.object = {
|
||||
...row,
|
||||
checkDay: '',
|
||||
checkDays: '',
|
||||
datepicker: ''
|
||||
}
|
||||
this.object.name = this.$t('backup.edit')
|
||||
if (this.object.schedule) {
|
||||
@@ -173,7 +181,7 @@ export default {
|
||||
this.getTableData('backup')
|
||||
}
|
||||
this.rightBoxshow = false
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
watch: {}
|
||||
|
||||
@@ -82,7 +82,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
edit (row, copyFlag) {
|
||||
console.log(row,copyFlag);
|
||||
this.object = { ...row }
|
||||
if (copyFlag) {
|
||||
this.object.name = this.object.name + '-copy'
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -77,6 +77,9 @@
|
||||
<el-dropdown-item v-has="'main_add'">
|
||||
<div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-has="'main_add'">
|
||||
<div id="chart-htmltoData" @click="exportData"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
</top-tool-more-options>
|
||||
</div>
|
||||
@@ -110,20 +113,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-my-loading="rightBox.loading"
|
||||
@@ -150,7 +139,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'
|
||||
@@ -163,6 +151,7 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
||||
import { lineChartMove } from '@/components/common/js/common'
|
||||
import routerPathParams from '@/components/common/mixin/routerPathParams'
|
||||
import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
|
||||
import FileSaver from 'file-saver'
|
||||
// import chartData from './testData'
|
||||
|
||||
export default {
|
||||
@@ -285,7 +274,6 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'chart-box': ChartBox,
|
||||
'pick-time': pickTime,
|
||||
'panel-box': panelBox,
|
||||
topToolMoreOptions,
|
||||
@@ -832,9 +820,10 @@ export default {
|
||||
this.panelReloadOnlyPanel()
|
||||
},
|
||||
htmlToPdf () {
|
||||
let dom = document.getElementsByClassName(this.pdfId)[0]
|
||||
const 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,9 +844,9 @@ 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)
|
||||
this.getPdf(dom, -1 * position.left, -1 * position.top)
|
||||
// this.getPdf(dom, 0, 0)
|
||||
}, 2000)
|
||||
@@ -866,6 +855,44 @@ export default {
|
||||
} else {
|
||||
this.showScreenLoading(false)
|
||||
}
|
||||
},
|
||||
exportData () {
|
||||
this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
|
||||
this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
|
||||
let flag = 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(() => {
|
||||
this.dataList.forEach(item => {
|
||||
if (item.type === 'group') {
|
||||
item.chartData = [item.children]
|
||||
}
|
||||
if (item.type === 'group' && !item.param.collapse) {
|
||||
item.children.forEach(child => {
|
||||
child.chartData = this.$refs.chartList.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.$refs['chart' + child.id][0].chartData
|
||||
})
|
||||
} else {
|
||||
item.chartData = this.$refs.chartList.$refs['chart' + item.id][0].chartData
|
||||
}
|
||||
})
|
||||
const data = JSON.stringify(this.dataList)
|
||||
const blob = new Blob([data], { type: '' })
|
||||
FileSaver.saveAs(blob, 'ceshi.json')
|
||||
}, 2000)
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
Reference in New Issue
Block a user