NEZ-290 feat: panel-alertList样式调整、resize实现
This commit is contained in:
chenjinsong
@@ -1,22 +1,12 @@
|
||||
<style lang="scss">
|
||||
@import './chart.scss';
|
||||
</style>
|
||||
<style>
|
||||
.max-width-90{
|
||||
max-width: 90px;
|
||||
}
|
||||
@import './chart.scss';
|
||||
</style>
|
||||
<template>
|
||||
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" :style="{'border':isPreview?'unset':'1px solid #d8dce1','height':isPreview?'92%':'100%'}">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<!--
|
||||
<div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
|
||||
<div class="el-loading-spinner">
|
||||
<img width="42px" height="42px" src="../../assets/img/loading.gif"/>
|
||||
<p class="el-loading-text loading-font">loading</p>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-alert" ref="resizeBox">
|
||||
<div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @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"
|
||||
@@ -25,9 +15,9 @@
|
||||
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 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" v-show="!isPreview&&firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
|
||||
@@ -49,7 +39,6 @@
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
|
||||
</div>
|
||||
<div class="mt-10 table-container" v-cloak v-show="firstShow || isPreview">
|
||||
<transition name="el-zoom-in-bottom">
|
||||
@@ -60,9 +49,9 @@
|
||||
<el-table
|
||||
:id="'tableContainer'+chartIndex"
|
||||
class="nz-table"
|
||||
:height="290"
|
||||
:data="storedTableData"
|
||||
border
|
||||
:height="tableHeight"
|
||||
ref="alertListTable"
|
||||
tooltip-effect="light"
|
||||
v-scrollBar:el-table="'large'"
|
||||
@@ -147,147 +136,148 @@
|
||||
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination" :append-to-body="false"></Pagination>
|
||||
</div>
|
||||
<!--全屏-->
|
||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenDialogClose" >
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{data.title}}</span>
|
||||
<div class="float-right panel-calendar dialog-tool">
|
||||
</div>
|
||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenDialogClose" >
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{data.title}}</span>
|
||||
<div class="float-right panel-calendar dialog-tool">
|
||||
</div>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0">
|
||||
<i style="cursor: pointer" class="el-icon-delete"></i>
|
||||
</div>
|
||||
</transition>
|
||||
<el-table
|
||||
:id="'tableContainer'+chartIndex"
|
||||
class="nz-table"
|
||||
:data="storedScreanTableData"
|
||||
border
|
||||
height="95%"
|
||||
ref="alertListScreenTable"
|
||||
tooltip-effect="light"
|
||||
v-scrollBar:el-table="'large'"
|
||||
:cell-class-name="labelsClassName"
|
||||
@selection-change="selectChange"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
type="selection"
|
||||
width="38"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:show-overflow-tooltip="item.prop != 'labels'"
|
||||
min-width="110px"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'alertRule'">
|
||||
<div class="too-long-split"
|
||||
@click="" :id="'view-rule-'+scope.row[item.prop].id"
|
||||
v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'summary'">
|
||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'description'">
|
||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<span v-else-if="item.prop == 'severity'">
|
||||
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i> {{severityData[1].value}}</span>
|
||||
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
|
||||
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i> {{severityData[2].value}}</span>
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'labels'">
|
||||
<nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
|
||||
:cursor-point="tagType(key) == 'info' ? false : true"
|
||||
:key="key"
|
||||
v-if="key != 'alertname' && key != 'severity'"
|
||||
v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
|
||||
</template>
|
||||
<div v-else-if="item.prop == 'state'">
|
||||
<span class="">
|
||||
{{scope.row['state'] == 1 ? "Pending" : ""}}
|
||||
{{scope.row['state'] == 2 ? "Expired" : ""}}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else-if="item.prop == 'current'" class="too-long-split" >
|
||||
<span v-if="!scope.row.current">-</span>
|
||||
<el-popover v-else placement="right" trigger="hover">
|
||||
<span slot="reference">{{scope.row.current[1]}}</span>
|
||||
<div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
|
||||
<span :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'alert-list-delete-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
</div>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0">
|
||||
<i style="cursor: pointer" class="el-icon-delete"></i>
|
||||
</div>
|
||||
</transition>
|
||||
<el-table
|
||||
:id="'tableContainer'+chartIndex"
|
||||
class="nz-table"
|
||||
:data="storedScreanTableData"
|
||||
border
|
||||
height="95%"
|
||||
ref="alertListScreenTable"
|
||||
tooltip-effect="light"
|
||||
v-scrollBar:el-table="'large'"
|
||||
:cell-class-name="labelsClassName"
|
||||
@selection-change="selectChange"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
type="selection"
|
||||
width="38"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:show-overflow-tooltip="item.prop != 'labels'"
|
||||
min-width="110px"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'alertRule'">
|
||||
<div class="too-long-split"
|
||||
@click="" :id="'view-rule-'+scope.row[item.prop].id"
|
||||
v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
<template v-else-if="item.prop == 'summary'">
|
||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'description'">
|
||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<span v-else-if="item.prop == 'severity'">
|
||||
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i> {{severityData[1].value}}</span>
|
||||
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
|
||||
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i> {{severityData[2].value}}</span>
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'labels'">
|
||||
<nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
|
||||
:cursor-point="tagType(key) == 'info' ? false : true"
|
||||
:key="key"
|
||||
v-if="key != 'alertname' && key != 'severity'"
|
||||
v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
|
||||
</template>
|
||||
<div v-else-if="item.prop == 'state'">
|
||||
<span class="">
|
||||
{{scope.row['state'] == 1 ? "Pending" : ""}}
|
||||
{{scope.row['state'] == 2 ? "Expired" : ""}}
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination :pageObj="screenPageObj" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.prop == 'current'" class="too-long-split" >
|
||||
<span v-if="!scope.row.current">-</span>
|
||||
<el-popover v-else placement="right" trigger="hover">
|
||||
<span slot="reference">{{scope.row.current[1]}}</span>
|
||||
<div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
|
||||
<span :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'alert-list-delete-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination :pageObj="screenPageObj" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
<div class="export-xlsx">
|
||||
<el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">
|
||||
<div class="upload-body">
|
||||
<el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>
|
||||
<div style="text-align: right; margin-top: 10px;">
|
||||
<button @click="closeDialog" class="el-button el-button--default el-button--small">
|
||||
<span>{{$t('tip.no')}}</span>
|
||||
</button>
|
||||
<button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">
|
||||
<span>{{$t('tip.yes')}}</span>
|
||||
</button>
|
||||
<div class="export-xlsx">
|
||||
<el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">
|
||||
<div class="upload-body">
|
||||
<el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>
|
||||
<div style="text-align: right; margin-top: 10px;">
|
||||
<button @click="closeDialog" class="el-button el-button--default el-button--small">
|
||||
<span>{{$t('tip.no')}}</span>
|
||||
</button>
|
||||
<button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">
|
||||
<span>{{$t('tip.yes')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
|
||||
:title="$t('overall.detail')"
|
||||
:visible.sync="graphShow"
|
||||
width="90%"
|
||||
:append-to-body="true"
|
||||
id="viewGraphDialog"
|
||||
@close="dialogClose">
|
||||
<div slot="title">
|
||||
{{$t("project.endpoint.dialogTitle")}}
|
||||
<div class="float-right panel-calendar dialog-tool" style="display: flex">
|
||||
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
|
||||
</div>
|
||||
</div>
|
||||
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
|
||||
</el-dialog>
|
||||
<element-set
|
||||
path="/alertList"
|
||||
:table-title="tableTitle"
|
||||
:dropCol="dropCol"
|
||||
@tablelable="tablelabelEmit"
|
||||
ref="elementset"
|
||||
></element-set>
|
||||
</div>
|
||||
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
|
||||
:title="$t('overall.detail')"
|
||||
:visible.sync="graphShow"
|
||||
width="90%"
|
||||
:append-to-body="true"
|
||||
id="viewGraphDialog"
|
||||
@close="dialogClose">
|
||||
<div slot="title">
|
||||
{{$t("project.endpoint.dialogTitle")}}
|
||||
<div class="float-right panel-calendar dialog-tool" style="display: flex">
|
||||
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
|
||||
</div>
|
||||
</div>
|
||||
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
|
||||
</el-dialog>
|
||||
<span class="vue-resizable-handle" @mousedown="dragResize" v-if="!isPreview"></span>
|
||||
<element-set
|
||||
path="/alertList"
|
||||
:table-title="tableTitle"
|
||||
:dropCol="dropCol"
|
||||
@tablelable="tablelabelEmit"
|
||||
ref="elementset"
|
||||
></element-set>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -301,7 +291,7 @@ import axios from "axios";
|
||||
import pickTime from "../common/pickTime";
|
||||
import chart from "../page/dashboard/overview/chart";
|
||||
export default {
|
||||
name: 'chartTable',
|
||||
name: 'chartTable',
|
||||
components: {
|
||||
'loading': loading,
|
||||
'time-picker':timePicker,
|
||||
@@ -309,160 +299,157 @@ export default {
|
||||
'chart':chart,
|
||||
'pick-time':pickTime,
|
||||
},
|
||||
props: {
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId',
|
||||
},
|
||||
chartIndex:{
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
chartInfo:{
|
||||
|
||||
}
|
||||
props: {
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
unit:{},
|
||||
isError:false,
|
||||
errorContent:'',
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
total: 0
|
||||
},
|
||||
screenPageObj:{
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
total: 0
|
||||
},
|
||||
storedTableData:[],
|
||||
storedScreanTableData:[],
|
||||
images: '',
|
||||
//toolbox: false,
|
||||
loading:Object,
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
//showLoading:true,
|
||||
//showLoadingScreen:false,
|
||||
//showTable:true,
|
||||
chartType: 'alertLIst', // 图表类型
|
||||
screenModal: false,
|
||||
// 查询数据使用
|
||||
filter: {
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
},
|
||||
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
|
||||
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
|
||||
pageHeight:40,
|
||||
divFirstShow:false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
||||
oldSearchTime: [],
|
||||
tableTitle: [
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 80
|
||||
}, {
|
||||
label: this.$t("alert.alertName"),
|
||||
prop: 'alertRule',
|
||||
show: true,
|
||||
width: 180
|
||||
}, /*{
|
||||
label: this.$t("alert.list.type"),
|
||||
prop: 'type',
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId',
|
||||
},
|
||||
chartIndex:{
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
chartInfo:{}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableHeight: 0,
|
||||
data: {}, // 该图表信息,chartItem
|
||||
unit:{},
|
||||
isError:false,
|
||||
errorContent:'',
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
total: 0
|
||||
},
|
||||
screenPageObj:{
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
total: 0
|
||||
},
|
||||
storedTableData:[],
|
||||
storedScreanTableData:[],
|
||||
images: '',
|
||||
//toolbox: false,
|
||||
loading:Object,
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
//showLoading:true,
|
||||
//showLoadingScreen:false,
|
||||
//showTable:true,
|
||||
chartType: 'alertLIst', // 图表类型
|
||||
screenModal: false,
|
||||
// 查询数据使用
|
||||
filter: {
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
},
|
||||
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
|
||||
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
|
||||
pageHeight:40,
|
||||
divFirstShow:false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
||||
oldSearchTime: [],
|
||||
tableTitle: [
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 80
|
||||
}, {
|
||||
label: this.$t("alert.alertName"),
|
||||
prop: 'alertRule',
|
||||
show: true,
|
||||
width: 180
|
||||
}, /*{
|
||||
label: this.$t("alert.list.type"),
|
||||
prop: 'type',
|
||||
show: true,
|
||||
width: 100
|
||||
}, {
|
||||
label: this.$t("alert.list.linked"),
|
||||
prop: 'linkObject',
|
||||
show: true,
|
||||
width: 140
|
||||
}, */{
|
||||
label: this.$t("alert.list.labels"),
|
||||
prop: 'labels',
|
||||
show: true,
|
||||
width: 200
|
||||
}, {
|
||||
label: this.$t("alert.severity"),
|
||||
prop: 'severity',
|
||||
show: true,
|
||||
width: 100
|
||||
}, {
|
||||
label: this.$t("alert.list.linked"),
|
||||
prop: 'linkObject',
|
||||
label: this.$t('alert.summary'),
|
||||
prop: 'summary',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('alert.description'),
|
||||
prop: 'description',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('alert.list.state'),
|
||||
prop: 'state',
|
||||
show: true,
|
||||
width: 140
|
||||
}, */{
|
||||
label: this.$t("alert.list.labels"),
|
||||
prop: 'labels',
|
||||
show: true,
|
||||
width: 200
|
||||
}, {
|
||||
label: this.$t("alert.severity"),
|
||||
prop: 'severity',
|
||||
show: true,
|
||||
width: 100
|
||||
}, {
|
||||
label: this.$t('alert.summary'),
|
||||
prop: 'summary',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('alert.description'),
|
||||
prop: 'description',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('alert.list.state'),
|
||||
prop: 'state',
|
||||
show: true,
|
||||
width: 100
|
||||
}, {
|
||||
label: this.$t("alert.startAt"),
|
||||
prop: 'startAt',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t('alert.endAt'),
|
||||
prop: 'endAt',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t('alert.list.current'),
|
||||
prop: 'current',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('overall.option'),
|
||||
prop: 'option',
|
||||
show: true,
|
||||
width: 90
|
||||
}
|
||||
],
|
||||
tablelable:[],
|
||||
dropCol: [],
|
||||
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
|
||||
tableHover: false, //控制滚动条和top按钮同时出现
|
||||
showTopBtn: false,
|
||||
severityData: [
|
||||
{
|
||||
key: 'medium',
|
||||
value: this.$t("alert.config.medium")
|
||||
},
|
||||
{
|
||||
key: 'high',
|
||||
value: this.$t("alert.config.high")
|
||||
},
|
||||
{
|
||||
key: 'low',
|
||||
value: this.$t("alert.config.low")
|
||||
}
|
||||
],
|
||||
graphShow: false,
|
||||
chartDatas: [],
|
||||
chartUnit:5,
|
||||
deleteBox: {show: false, ids: "", remark: '', state: 2},
|
||||
isPreview:false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
width: 100
|
||||
}, {
|
||||
label: this.$t("alert.startAt"),
|
||||
prop: 'startAt',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t('alert.endAt'),
|
||||
prop: 'endAt',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t('alert.list.current'),
|
||||
prop: 'current',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('overall.option'),
|
||||
prop: 'option',
|
||||
show: true,
|
||||
width: 90
|
||||
}
|
||||
],
|
||||
tablelable:[],
|
||||
dropCol: [],
|
||||
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
|
||||
tableHover: false, //控制滚动条和top按钮同时出现
|
||||
showTopBtn: false,
|
||||
severityData: [
|
||||
{
|
||||
key: 'medium',
|
||||
value: this.$t("alert.config.medium")
|
||||
},
|
||||
{
|
||||
key: 'high',
|
||||
value: this.$t("alert.config.high")
|
||||
},
|
||||
{
|
||||
key: 'low',
|
||||
value: this.$t("alert.config.low")
|
||||
}
|
||||
],
|
||||
graphShow: false,
|
||||
chartDatas: [],
|
||||
chartUnit:5,
|
||||
deleteBox: {show: false, ids: "", remark: '', state: 2},
|
||||
isPreview:false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagType() {
|
||||
return (key) => {
|
||||
@@ -498,6 +485,10 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startResize(e) {
|
||||
let vm = this;
|
||||
this.$chartResizeTool.start(vm, this.data, e);
|
||||
},
|
||||
labelsClassName(row) {
|
||||
if (row.column.label == this.$t("alert.list.labels")) {
|
||||
return "alert-message-list-labels";
|
||||
@@ -635,94 +626,95 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
getAlertList: function (filterType,isPreview=false) {
|
||||
this.isPreview = isPreview;
|
||||
let queryParam={
|
||||
pageSize:this.pageObj.pageSize,
|
||||
pageNo:this.pageObj.pageNo,
|
||||
}
|
||||
if(this.chartInfo&&this.chartInfo.param){ //按照粒度，project>module>endpoint 查询只传最细粒度
|
||||
let param=this.chartInfo.param;
|
||||
if(param.endpointId&¶m.endpointId != ''){
|
||||
queryParam.endpointId=param.endpointId;
|
||||
getAlertList: function (filterType,isPreview=false) {
|
||||
this.resize();
|
||||
this.isPreview = isPreview;
|
||||
let queryParam={
|
||||
pageSize:this.pageObj.pageSize,
|
||||
pageNo:this.pageObj.pageNo,
|
||||
}
|
||||
if(this.chartInfo&&this.chartInfo.param){ //按照粒度，project>module>endpoint 查询只传最细粒度
|
||||
let param=this.chartInfo.param;
|
||||
if(param.endpointId&¶m.endpointId != ''){
|
||||
queryParam.endpointId=param.endpointId;
|
||||
}else{
|
||||
if(param.moduleId&¶m.moduleId!=''){
|
||||
queryParam.moduleId=param.moduleId;
|
||||
}else{
|
||||
if(param.moduleId&¶m.moduleId!=''){
|
||||
queryParam.moduleId=param.moduleId;
|
||||
}else{
|
||||
if(param.projectId&¶m.projectId!=''){
|
||||
queryParam.projectId=param.projectId;
|
||||
}
|
||||
if(param.projectId&¶m.projectId!=''){
|
||||
queryParam.projectId=param.projectId;
|
||||
}
|
||||
}
|
||||
|
||||
if(param.ruleId&¶m.ruleId!=''){
|
||||
queryParam.ruleId=param.ruleId;
|
||||
}
|
||||
if(param.severity&¶m.severity!=''){
|
||||
queryParam.severity=param.severity;
|
||||
}
|
||||
if(param.state&¶m.state!=''){
|
||||
queryParam.state=param.state;
|
||||
}
|
||||
}
|
||||
|
||||
this.startLoading(filterType);
|
||||
this.$get('/alert/message', queryParam).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.storedTableData = response.data.list;
|
||||
this.storedScreanTableData=response.data.list;
|
||||
this.storedTableData.forEach((item) => {
|
||||
item.labels = JSON.parse(item.labels);
|
||||
let paramStr = JSON.stringify(this.promQueryParamConvert(item));
|
||||
if(paramStr&& paramStr !='""'){
|
||||
this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
|
||||
let current = [];
|
||||
if (response2.data && response2.data.result && response2.data.result.length > 0) {
|
||||
current = response2.data.result[0].value.map((item, i) => {
|
||||
if (i == 0) {
|
||||
return bus.computeTimezone(item);
|
||||
} else {
|
||||
return parseFloat(item).toFixed(2);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.$set(item, "current", current);
|
||||
});
|
||||
}
|
||||
});
|
||||
this.pageObj.total = response.data.total;
|
||||
this.isError = false;
|
||||
this.errorContent = '';
|
||||
this.divFirstShow = true;
|
||||
if(param.ruleId&¶m.ruleId!=''){
|
||||
queryParam.ruleId=param.ruleId;
|
||||
}
|
||||
if(param.severity&¶m.severity!=''){
|
||||
queryParam.severity=param.severity;
|
||||
}
|
||||
if(param.state&¶m.state!=''){
|
||||
queryParam.state=param.state;
|
||||
}
|
||||
}
|
||||
|
||||
this.firstShow = true; // 展示操作按键
|
||||
this.endLoading(filterType);
|
||||
}else{
|
||||
this.isError = true;
|
||||
this.errorContent = response.msg;
|
||||
}
|
||||
});
|
||||
},
|
||||
promQueryParamConvert(obj) {
|
||||
if(obj){
|
||||
return "(" + obj.alertRule.expr + ") and (" + function(){
|
||||
let q = "{";
|
||||
for (let k in obj.labels) {
|
||||
if (k != 'alertname' && k != 'severity') {
|
||||
q += k;
|
||||
q += "=";
|
||||
q += ("'" + obj.labels[k] + "',");
|
||||
}
|
||||
};
|
||||
if (q.length > 1) {
|
||||
q = q.substring(0, q.length-1);
|
||||
this.startLoading(filterType);
|
||||
this.$get('/alert/message', queryParam).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.storedTableData = response.data.list;
|
||||
this.storedScreanTableData=response.data.list;
|
||||
this.storedTableData.forEach((item) => {
|
||||
item.labels = JSON.parse(item.labels);
|
||||
let paramStr = JSON.stringify(this.promQueryParamConvert(item));
|
||||
if(paramStr&& paramStr !='""'){
|
||||
this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
|
||||
let current = [];
|
||||
if (response2.data && response2.data.result && response2.data.result.length > 0) {
|
||||
current = response2.data.result[0].value.map((item, i) => {
|
||||
if (i == 0) {
|
||||
return bus.computeTimezone(item);
|
||||
} else {
|
||||
return parseFloat(item).toFixed(2);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.$set(item, "current", current);
|
||||
});
|
||||
}
|
||||
q += "}";
|
||||
return q;
|
||||
}() + ")";
|
||||
});
|
||||
this.pageObj.total = response.data.total;
|
||||
this.isError = false;
|
||||
this.errorContent = '';
|
||||
this.divFirstShow = true;
|
||||
|
||||
this.firstShow = true; // 展示操作按键
|
||||
this.endLoading(filterType);
|
||||
}else{
|
||||
this.isError = true;
|
||||
this.errorContent = response.msg;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
});
|
||||
},
|
||||
promQueryParamConvert(obj) {
|
||||
if(obj){
|
||||
return "(" + obj.alertRule.expr + ") and (" + function(){
|
||||
let q = "{";
|
||||
for (let k in obj.labels) {
|
||||
if (k != 'alertname' && k != 'severity') {
|
||||
q += k;
|
||||
q += "=";
|
||||
q += ("'" + obj.labels[k] + "',");
|
||||
}
|
||||
};
|
||||
if (q.length > 1) {
|
||||
q = q.substring(0, q.length-1);
|
||||
}
|
||||
q += "}";
|
||||
return q;
|
||||
}() + ")";
|
||||
}
|
||||
return '';
|
||||
},
|
||||
elementsetShow(s, e) {
|
||||
var eventfixed = {
|
||||
shezhi: 0,
|
||||
@@ -944,72 +936,64 @@ export default {
|
||||
this.$refs['localLoading'+this.chartIndex].endLoading();
|
||||
}
|
||||
},
|
||||
clearData(){
|
||||
},
|
||||
showLoad(chartItem) {
|
||||
//设置高度 chart-table
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
|
||||
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
|
||||
if(height<this.minHeight){
|
||||
height = this.minHeight;
|
||||
}
|
||||
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
|
||||
const tableBox = document.getElementById('tableContainer'+this.chartIndex);
|
||||
//tableBox.style.height = `${height-75-32}px`;
|
||||
tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
|
||||
resize(chartItem) {
|
||||
let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
|
||||
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
|
||||
container.style.height = `calc(100% - ${deHeight}px)`;
|
||||
this.tableHeight = `calc(100% - 34px)`;
|
||||
this.$nextTick(() => {
|
||||
container.querySelector(".el-table__body-wrapper")._ps_.update();
|
||||
});
|
||||
},
|
||||
showLoad(chartItem) {
|
||||
//设置高度 chart-table
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem);
|
||||
});
|
||||
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);
|
||||
},
|
||||
//全屏时间条件查询
|
||||
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.showTable = false;
|
||||
this.searchTime = [...time];
|
||||
this.seriesItemScreen = [];
|
||||
for(let i=0;i<8;i++){
|
||||
this.seriesItemScreen.push({//表格数据
|
||||
// label: '',//label
|
||||
// metric: '',//metric列
|
||||
element:'',
|
||||
time: '',//采集时间
|
||||
value: '',//数值
|
||||
});
|
||||
this.startLoading();
|
||||
this.divFirstShow = true;
|
||||
//this.tableLoading = true;
|
||||
},
|
||||
// 展示图表编辑区
|
||||
/*
|
||||
showTool() {
|
||||
this.toolbox = !this.toolbox;
|
||||
},
|
||||
*/
|
||||
// 重新请求数据 刷新操作-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.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.showTable = false;
|
||||
this.searchTime = [...time];
|
||||
this.seriesItemScreen = [];
|
||||
for(let i=0;i<8;i++){
|
||||
this.seriesItemScreen.push({//表格数据
|
||||
// label: '',//label
|
||||
// metric: '',//metric列
|
||||
element:'',
|
||||
time: '',//采集时间
|
||||
value: '',//数值
|
||||
});
|
||||
}
|
||||
this.startLoading('screen');
|
||||
//this.tableLoading = true;
|
||||
//this.firstShow = false;
|
||||
this.$emit('on-search-data', this.data.id, this.searchTime);
|
||||
},
|
||||
clickos() {
|
||||
this.dropdownMenuShow=false;
|
||||
},
|
||||
}
|
||||
this.startLoading('screen');
|
||||
//this.tableLoading = true;
|
||||
//this.firstShow = false;
|
||||
this.$emit('on-search-data', this.data.id, this.searchTime);
|
||||
},
|
||||
clickos() {
|
||||
this.dropdownMenuShow=false;
|
||||
},
|
||||
clearChart(){
|
||||
this.data = {};
|
||||
},
|
||||
@@ -1045,7 +1029,7 @@ export default {
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
|
||||
|
||||
console.info(chartItem,title)
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user