fix：修改 topology 相关右滑表格的样式问题
This commit is contained in:
zhangyu
@@ -20,16 +20,12 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title">Port</span>
|
||||
<span class="content-text">{{moduleInfo.port?moduleInfo.port:'--'}}</span>
|
||||
<span class="content-title">Asset</span>
|
||||
<span class="content-text">{{moduleInfo.assetNum?moduleInfo.assetNum:'--'}}</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title">Path</span>
|
||||
<span class="content-text">{{moduleInfo.path?moduleInfo.path:'--'}}</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title">Parameter</span>
|
||||
<span class="content-text">{{moduleInfo.seq?moduleInfo.seq:'--'}}</span>
|
||||
<span class="content-title">Endpoint</span>
|
||||
<span class="content-text">{{moduleInfo.endpointNum?moduleInfo.endpointNum:'--'}}</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title">Descripsion</span>
|
||||
@@ -58,15 +54,17 @@ export default {
|
||||
remark: '',
|
||||
port: '',
|
||||
path: '',
|
||||
seq: ''
|
||||
seq: '',
|
||||
assetNum: '',
|
||||
endpointNum: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.loading = true
|
||||
this.$get('/module', { id: this.moduleId }).then(res => {
|
||||
this.$get('/monitor/module/' + this.moduleId).then(res => {
|
||||
this.loading = false
|
||||
this.moduleInfo = res.data.list[0]
|
||||
this.moduleInfo = res.data
|
||||
})
|
||||
},
|
||||
methods: {},
|
||||
|
||||
@@ -1,163 +1,41 @@
|
||||
<template>
|
||||
<div class="mc" @click.self="clickOutside">
|
||||
<div class="right-box right-box-project-alert">
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">Alert messages</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin搜素框-->
|
||||
<div class="top-tools">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': false}">
|
||||
<pick-time :refresh-data-func="getAlertList" v-model="searchTime" :use-chart-unit="false" :use-refresh="false" :default-pick="12" :show-empty="true"></pick-time>
|
||||
<div class="top-tool-search">
|
||||
<search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
|
||||
</div>
|
||||
<!--<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"-->
|
||||
<!--class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">-->
|
||||
<!--<i class="nz-icon nz-icon-download1"></i>-->
|
||||
<!--</button>-->
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<!-- end搜素框-->
|
||||
|
||||
<!-- begin--表格-->
|
||||
<div class="right-box-form-box">
|
||||
<el-table
|
||||
class="nz-table tabelH100"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="alertListTable"
|
||||
tooltip-effect="light"
|
||||
:height="tableHeight"
|
||||
v-loading="loading"
|
||||
:cell-class-name="labelsClassName"
|
||||
@selection-change="selectChange"
|
||||
style="width: 100%;height: 100%"
|
||||
@sort-change="tableDataSort"
|
||||
:id="projectId"
|
||||
>
|
||||
<!--<el-table-column-->
|
||||
<!--:resizable="false"-->
|
||||
<!--type="selection"-->
|
||||
<!--width="38"-->
|
||||
<!--align="center"-->
|
||||
<!-->-->
|
||||
<!--</el-table-column>-->
|
||||
<el-table-column
|
||||
:resizable="true"
|
||||
v-for="(item, index) in tableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:minWidth="item.minWidth"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:show-overflow-tooltip="item.prop != 'labels'"
|
||||
min-width="110px"
|
||||
:sortable="$tableSet.sortableShow(item.prop,'alertMessage')"
|
||||
:prop="$tableSet.propTitle(item.prop,'alertMessage')"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'alertRule'">
|
||||
<div v-if="scope.row.alertRule.alertName" >
|
||||
<span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)">{{scope.row.alertRule.alertName}}</span>
|
||||
<alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo>
|
||||
</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'" class="severity">
|
||||
<span v-if="scope.row[item.prop] == 'P1'" class="P1">P1</span>
|
||||
<!--<i class="nz-icon nz-icon-arrow-up"></i> {{returnSeverityLabel(scope.row[item.prop])}}-->
|
||||
<span v-if="scope.row[item.prop] == 'P2'" class="P2">P2</span>
|
||||
<!--{{returnSeverityLabel(scope.row[item.prop])}}-->
|
||||
<span v-if="scope.row[item.prop] == 'P3'" class="P3">P3</span>
|
||||
<!--<i class="nz-icon nz-icon-arrow-down"></i> {{returnSeverityLabel(scope.row[item.prop])}}-->
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'labels'" class="labels">
|
||||
<span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
|
||||
<span @mouseenter="labelHover(scope.row,scope.$index, item.label, true, $event)" @mouseleave="labelHover(scope.row,scope.$index, item.label, false)">
|
||||
<nz-alert-tag
|
||||
v-if="item.label != 'alertname' && item.label != 'severity'" :key="item.label" :cursor-point="tagType(item.label) == 'info' ? false : true"
|
||||
:label="item.label"
|
||||
:type="tagType(item.label)"
|
||||
style="margin: 5px 0 5px 5px;"
|
||||
>
|
||||
{{item.value}}
|
||||
</nz-alert-tag>
|
||||
</span>
|
||||
<alertLabel
|
||||
v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
|
||||
:id="scope.row[item.label].id"
|
||||
:that="scope.row[item.label]"
|
||||
:type="item.label"
|
||||
></alertLabel>
|
||||
</span>
|
||||
|
||||
<!--<el-tooltip
|
||||
v-for="(item,i) in labelsSort(scope.row.labels)"
|
||||
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
|
||||
effect="light"
|
||||
:disabled="!(item.label === 'asset' ||item.label === 'module' || item.label === 'project')"
|
||||
:key="item.label"
|
||||
>
|
||||
<alertLabel
|
||||
v-if="item.label === 'asset' ||item.label === 'module' || item.label === 'project'"
|
||||
slot="content"
|
||||
:id="scope.row[item.label].id"
|
||||
:type="item.label"
|
||||
:labelLoading="scope.row[item.label].loading"
|
||||
></alertLabel>
|
||||
<span @mouseover="labelHover(scope.row,scope.$index,item.label)" >
|
||||
<nz-alert-tag
|
||||
:label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
|
||||
:cursor-point="tagType(item.label) == 'info' ? false : true"
|
||||
:key="item.label"
|
||||
v-if="item.label != 'alertname' && item.label != 'severity'"
|
||||
>
|
||||
{{item.value}}
|
||||
</nz-alert-tag>
|
||||
</span>
|
||||
</el-tooltip>-->
|
||||
|
||||
</template>
|
||||
<span v-else-if="item.prop == 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
|
||||
{{scope.row['state'] == 1 ? "Pending" : ""}}
|
||||
{{scope.row['state'] == 2 ? "Expired" : ""}}
|
||||
</span>
|
||||
<div v-else-if="item.prop == 'current'" class="too-long-split pointer" @click="detail(scope.row)">
|
||||
<span v-if="!scope.row.current">-</span>
|
||||
<el-popover v-else placement="right" trigger="hover">
|
||||
<div slot="reference">
|
||||
<span class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
|
||||
<span>{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</span>
|
||||
</div>
|
||||
<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.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'alert-list-delete-'+scope.row.id"><i class="nz-icon nz-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>
|
||||
</div>
|
||||
<!-- end--表格-->
|
||||
|
||||
<!--底部分頁-->
|
||||
<div class="pagination-bottom">
|
||||
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
<div class="right-box-title">{{$t('dashboard.overview.alert.alertMessage')}}</div>
|
||||
<nz-data-list
|
||||
ref="dataList"
|
||||
:api="url"
|
||||
:custom-table-title.sync="tableTitle"
|
||||
:from="fromRoute.alertMessage"
|
||||
:layout="['searchInput']"
|
||||
:search-msg="searchMsg"
|
||||
@search="search"
|
||||
v-loading="tools.loading"
|
||||
>
|
||||
<template v-slot:top-tool-right>
|
||||
<el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData">
|
||||
<el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-slot:default="slotProps">
|
||||
<alert-message-table
|
||||
ref="dataTable"
|
||||
:api="url"
|
||||
:custom-table-title="tableTitle"
|
||||
:height="mainTableHeight"
|
||||
:now-time="nowTime"
|
||||
:table-data="tableData"
|
||||
@del="del"
|
||||
@edit="edit"
|
||||
@orderBy="tableDataSort"
|
||||
@reload="getTableData"
|
||||
@selectionChange="selectionChange"></alert-message-table>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template v-slot:pagination>
|
||||
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
|
||||
</template>
|
||||
</nz-data-list>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -167,6 +45,10 @@ import bus from '@/libs/bus'
|
||||
import nzAlertTag from '@/components/page/alert/nzAlertTag'
|
||||
import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
|
||||
import alertLabel from '@/components/common/alert/alertLabel'
|
||||
import nzDataList from '@/components/common/table/nzDataList'
|
||||
import dataListMixin from '@/components/common/mixin/dataList'
|
||||
import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
|
||||
import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
|
||||
export default {
|
||||
name: 'alertTable',
|
||||
props: {
|
||||
@@ -176,8 +58,11 @@ export default {
|
||||
components: {
|
||||
'nz-alert-tag': nzAlertTag,
|
||||
alertRuleInfo: alertRuleInfo,
|
||||
alertLabel: alertLabel
|
||||
alertLabel: alertLabel,
|
||||
nzDataList,
|
||||
alertMessageTable
|
||||
},
|
||||
mixins: [dataListMixin],
|
||||
watch: {
|
||||
},
|
||||
computed: {
|
||||
@@ -207,6 +92,10 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: 'alert/message',
|
||||
state: '1',
|
||||
tableId: '',
|
||||
stateOptions: alertMessageConstant.states,
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: this.$CONSTANTS.defaultPageSize,
|
||||
@@ -248,56 +137,41 @@ export default {
|
||||
],
|
||||
searchTime: [],
|
||||
searchMsg: { // 给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [{
|
||||
id: 1,
|
||||
name: this.$t('alert.alertName'),
|
||||
type: 'input',
|
||||
label: 'alertName',
|
||||
disabled: false
|
||||
}, /* {
|
||||
id: 3,
|
||||
name: this.$t('alert.list.type'),
|
||||
type: 'select',
|
||||
label: 'alertType',
|
||||
searchLabelList: [
|
||||
{
|
||||
id: 26,
|
||||
name: this.$t('alert.list.id'),
|
||||
type: 'id',
|
||||
label: 'id',
|
||||
disabled: false
|
||||
}, */{
|
||||
id: 20,
|
||||
name: this.$t('alert.severity'),
|
||||
type: 'selectString',
|
||||
label: 'severity',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 21,
|
||||
name: this.$t('asset.asset'),
|
||||
type: 'asset',
|
||||
label: 'asset',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 22,
|
||||
name: this.$t('project.project.projectName'),
|
||||
type: 'project',
|
||||
label: 'project',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 23,
|
||||
name: this.$t('project.module.module'),
|
||||
type: 'module',
|
||||
label: 'module',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 24,
|
||||
name: this.$t('project.endpoint.endpoint'),
|
||||
type: 'input',
|
||||
label: 'endpointId',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 25,
|
||||
name: this.$t('alert.list.state'),
|
||||
type: 'select',
|
||||
label: 'alertMessageState',
|
||||
disabled: false
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: this.$t('alert.alertRule'),
|
||||
type: 'input',
|
||||
label: 'ruleName',
|
||||
disabled: false
|
||||
}, {
|
||||
name: this.$t('asset.asset'),
|
||||
type: 'input',
|
||||
label: 'assetName',
|
||||
disabled: false
|
||||
}, {
|
||||
name: 'Endpoint',
|
||||
type: 'input',
|
||||
label: 'endpointName',
|
||||
disabled: false
|
||||
}, {
|
||||
name: this.$t('alert.summary'),
|
||||
type: 'input',
|
||||
label: 'summary',
|
||||
disabled: false
|
||||
}, {
|
||||
name: 'Labels',
|
||||
type: 'input',
|
||||
label: 'labels',
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
},
|
||||
tableData: [],
|
||||
loading: false,
|
||||
@@ -317,14 +191,14 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getAlertList()
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
getAlertList: function () {
|
||||
this.loading = true
|
||||
getTableData: function () {
|
||||
this.tools.loading = true
|
||||
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
|
||||
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
|
||||
this.$set(this.searchLabel, 'moduleId', this.moduleId)
|
||||
this.$set(this.searchLabel, 'moduleIds', this.moduleId)
|
||||
if (this.searchTime && this.searchTime.length > 1) {
|
||||
this.$set(this.searchLabel, 'startAt', bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss'))
|
||||
this.$set(this.searchLabel, 'endAt', bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss'))
|
||||
@@ -332,8 +206,8 @@ export default {
|
||||
delete this.searchLabel.startAt
|
||||
delete this.searchLabel.endAt
|
||||
}
|
||||
this.$get('alert/message', { ...this.searchLabel }).then(response => {
|
||||
this.loading = false
|
||||
this.$get(this.url + '?state=' + this.state, { ...this.searchLabel }).then(response => {
|
||||
this.tools.loading = false
|
||||
if (response.code == 200) {
|
||||
this.nowTime = this.utcTimeToTimezoneStr(response.time)
|
||||
this.tableData = response.data.list
|
||||
@@ -369,12 +243,12 @@ export default {
|
||||
},
|
||||
pageNo (val) {
|
||||
this.pageObj.pageNo = val
|
||||
this.getAlertList()
|
||||
this.getTableData()
|
||||
},
|
||||
pageSize (val) {
|
||||
this.pageObj.pageSize = val
|
||||
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
|
||||
this.getAlertList()
|
||||
this.getTableData()
|
||||
},
|
||||
selectChange (s) {
|
||||
const ids = []
|
||||
@@ -432,7 +306,7 @@ export default {
|
||||
}
|
||||
this.pageObj.orderBy = orderBy
|
||||
this.$set(this.searchLabel, 'orderBy', orderBy)
|
||||
this.getAlertList()
|
||||
this.getTableData()
|
||||
},
|
||||
/* 关闭弹框 */
|
||||
esc (refresh) {
|
||||
@@ -463,7 +337,7 @@ export default {
|
||||
if (this.$refs.alertListTable && this.$refs.alertListTable.bodyWrapper) {
|
||||
this.$refs.alertListTable.bodyWrapper.scrollTop = 0
|
||||
}
|
||||
this.getAlertList()
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
showExportDialog () {
|
||||
@@ -483,6 +357,9 @@ export default {
|
||||
}
|
||||
.right-box-title{
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.mc{
|
||||
position: fixed;
|
||||
@@ -527,5 +404,8 @@ export default {
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.right-box /deep/ .list-page .main-container{
|
||||
background: #fff;
|
||||
}
|
||||
/* end--table*/
|
||||
</style>
|
||||
|
||||
@@ -1,119 +1,51 @@
|
||||
<template>
|
||||
<div class="mc" @click.self="clickOutside">
|
||||
<div class="right-box right-box-project-alert">
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns">
|
||||
<!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
|
||||
<!--<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>-->
|
||||
<!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
|
||||
<!--</button>-->
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">Asset</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin搜素框-->
|
||||
<div class="top-tools">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': false}">
|
||||
<div class="top-tool-search">
|
||||
<search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
|
||||
</div>
|
||||
<!--<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"-->
|
||||
<!--class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">-->
|
||||
<!--<i class="nz-icon nz-icon-download1"></i>-->
|
||||
<!--</button>-->
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<!-- end搜素框-->
|
||||
|
||||
<!-- begin--表格-->
|
||||
<div class="right-box-form-box">
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:height="mainTableHeight"
|
||||
style="width: 100%;"
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
tooltip-effect="light"
|
||||
ref="assetTable"
|
||||
:cell-class-name="messageStyle"
|
||||
@sort-change="tableDataSort"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="true"
|
||||
v-for="(item, index) in tableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col_${index}`"
|
||||
:label="item.label"
|
||||
:fixed="item.fixed"
|
||||
:show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
|
||||
min-width="110px"
|
||||
:class-name="item.prop == 'option' ? 'content-right-options' : ''"
|
||||
:sortable="$tableSet.sortableShow(item.prop,'asset')"
|
||||
:prop="$tableSet.propTitle(item.prop,'asset')"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop=='HOST'">
|
||||
<span>{{scope.row.host}}</span>
|
||||
</div>
|
||||
<div v-if="item.prop=='assetType'">
|
||||
<span>{{scope.row.model.type.value}}</span>
|
||||
</div>
|
||||
<template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
|
||||
<div v-if="item.prop=='state'">
|
||||
<span v-if="scope.row.state==1">{{ $t('asset.inStock')}}</span>
|
||||
<span v-if="scope.row.state==2">{{ $t('asset.notInStock')}}</span>
|
||||
<span v-if="scope.row.state==3">{{ $t('asset.suspended')}}</span>
|
||||
</div>
|
||||
<div v-if="item.prop == 'pingStatus'">
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
:content="formatPingTime(scope.row.pingLastUpdate)">
|
||||
<div slot="reference" style="width: 20px">
|
||||
<div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<template v-if="item.prop=='Alert'">
|
||||
|
||||
<el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
|
||||
<span :id="'asset-alerts-'+scope.row.id" class="link">
|
||||
<!--@click="jumpToAlertMsg(scope.row)"-->
|
||||
{{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
|
||||
<sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
|
||||
{{' ' + $t('overall.active')}}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- end--表格-->
|
||||
|
||||
<!--底部分頁-->
|
||||
<div class="pagination-bottom">
|
||||
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
<div class="right-box-title">{{$t('asset.asset')}}</div>
|
||||
<nz-data-list
|
||||
ref="dataList"
|
||||
:api="url"
|
||||
:custom-table-title.sync="tableTitle"
|
||||
:from="fromRoute.asset"
|
||||
:layout="dataListLayout"
|
||||
:search-msg="searchMsg"
|
||||
@search="search"
|
||||
>
|
||||
<template v-slot:default="slotProps">
|
||||
<asset-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tableTitle"
|
||||
:height="mainTableHeight"
|
||||
:table-data="tableData"
|
||||
@orderBy="tableDataSort"
|
||||
@reload="getTableData"></asset-table>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template v-slot:pagination>
|
||||
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
|
||||
</template>
|
||||
</nz-data-list>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nzDataList from '@/components/common/table/nzDataList'
|
||||
import dataListMixin from '@/components/common/mixin/dataList'
|
||||
import assetTable from '@/components/common/table/asset/assetTable'
|
||||
export default {
|
||||
name: 'assetTable',
|
||||
name: 'assetTableProject',
|
||||
props: {
|
||||
moduleId: {},
|
||||
projectId: {}
|
||||
},
|
||||
components: {
|
||||
nzDataList,
|
||||
assetTable
|
||||
},
|
||||
mixins: [dataListMixin],
|
||||
watch: {
|
||||
},
|
||||
computed: {
|
||||
@@ -143,6 +75,9 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: 'asset/asset',
|
||||
tableId: 'projectAsset',
|
||||
dataListLayout: ['searchInput'],
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: this.$CONSTANTS.defaultPageSize,
|
||||
@@ -151,30 +86,41 @@ export default {
|
||||
mainTableHeight: '100%',
|
||||
tableTitle: [
|
||||
{
|
||||
label: this.$t('asset.host'),
|
||||
prop: 'HOST',
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 130,
|
||||
fixed: 'left'
|
||||
width: 110,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('overall.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.device'),
|
||||
prop: 'SN',
|
||||
label: this.$t('asset.manageIp'),
|
||||
prop: 'manageIp',
|
||||
show: true,
|
||||
width: 130
|
||||
width: 140,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.assetType'),
|
||||
prop: 'assetType',
|
||||
show: true
|
||||
label: this.$t('asset.pingInfo'),
|
||||
prop: 'pingInfo',
|
||||
show: true,
|
||||
width: 110
|
||||
},{
|
||||
label: this.$t('asset.alertNum'),
|
||||
prop: 'alertNum',
|
||||
show: true,
|
||||
width: 140,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('asset.assetState'),
|
||||
prop: 'state',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('asset.assetPing'),
|
||||
prop: 'pingStatus',
|
||||
show: true
|
||||
label: this.$t('asset.endpointNum2'),
|
||||
prop: 'endpointNum',
|
||||
show: true,
|
||||
width: 160,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('asset.alerts'),
|
||||
prop: 'Alert',
|
||||
@@ -182,36 +128,30 @@ export default {
|
||||
width: 100
|
||||
}],
|
||||
searchMsg: { // 给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [{
|
||||
id: 1,
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
label: 'id',
|
||||
label: 'ids',
|
||||
disabled: false
|
||||
}, {
|
||||
name: 'Name',
|
||||
type: 'input',
|
||||
label: 'name',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 20,
|
||||
name: 'SN',
|
||||
type: 'input',
|
||||
label: 'sn',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 21,
|
||||
name: 'Host',
|
||||
name: 'IP',
|
||||
type: 'input',
|
||||
label: 'host',
|
||||
label: 'manageIp',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 22,
|
||||
name: this.$t('asset.state'),
|
||||
type: 'select',
|
||||
label: 'assetState',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 23,
|
||||
name: 'pingStatus',
|
||||
type: 'select',
|
||||
label: 'pingStatus',
|
||||
type: 'assetState',
|
||||
label: 'stateIds',
|
||||
disabled: false
|
||||
}]
|
||||
},
|
||||
@@ -233,16 +173,16 @@ export default {
|
||||
},
|
||||
mounted () {
|
||||
this.getTableTitle()
|
||||
this.getAssetList()
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
getAssetList: function () {
|
||||
this.loading = true
|
||||
getTableData: function () {
|
||||
this.tools.loading = true
|
||||
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
|
||||
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
|
||||
this.$set(this.searchLabel, 'moduleId', this.moduleId)
|
||||
this.$get('asset', { ...this.searchLabel }).then(response => {
|
||||
this.loading = false
|
||||
this.$set(this.searchLabel, 'moduleIds', this.moduleId)
|
||||
this.$get(this.url, { ...this.searchLabel }).then(response => {
|
||||
this.tools.loading = false
|
||||
if (response.code == 200) {
|
||||
this.tableData = response.data.list
|
||||
this.deleteBox.ids = ''
|
||||
@@ -252,12 +192,12 @@ export default {
|
||||
},
|
||||
pageNo (val) {
|
||||
this.pageObj.pageNo = val
|
||||
this.getAssetList()
|
||||
this.getTableData()
|
||||
},
|
||||
pageSize (val) {
|
||||
this.pageObj.pageSize = val
|
||||
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
|
||||
this.getAssetList()
|
||||
this.getTableData()
|
||||
},
|
||||
selectChange (s) {
|
||||
const ids = []
|
||||
@@ -277,7 +217,7 @@ export default {
|
||||
}
|
||||
this.pageObj.orderBy = orderBy
|
||||
this.$set(this.searchLabel, 'orderBy', orderBy)
|
||||
this.getAssetList()
|
||||
this.getTableData()
|
||||
},
|
||||
/* 关闭弹框 */
|
||||
esc (refresh) {
|
||||
@@ -334,7 +274,7 @@ export default {
|
||||
if (this.$refs.assetTable && this.$refs.assetTable.bodyWrapper) {
|
||||
this.$refs.assetTable.bodyWrapper.scrollTop = 0
|
||||
}
|
||||
this.getAssetList()
|
||||
this.getTableData()
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
@@ -350,6 +290,9 @@ export default {
|
||||
}
|
||||
.right-box-title{
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.mc{
|
||||
position: fixed;
|
||||
@@ -368,5 +311,8 @@ export default {
|
||||
/deep/ .top-tools>div{
|
||||
margin-top: 6px;
|
||||
}
|
||||
.right-box /deep/ .list-page .main-container{
|
||||
background: #fff;
|
||||
}
|
||||
/* end--table*/
|
||||
</style>
|
||||
|
||||
@@ -1,107 +1,56 @@
|
||||
<template>
|
||||
<div class="mc" @click.self="clickOutside">
|
||||
<div class="right-box right-box-project-alert">
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns">
|
||||
<!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
|
||||
<!--<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>-->
|
||||
<!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
|
||||
<!--</button>-->
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">Endpoint</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin搜素框-->
|
||||
<div class="top-tools">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': false}">
|
||||
<div class="top-tool-search">
|
||||
<search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
|
||||
<div class="right-box-title">{{$t('project.endpoint.endpoint')}}</div>
|
||||
<nz-data-list
|
||||
ref="dataList"
|
||||
:api="url"
|
||||
:custom-table-title.sync="tableTitle"
|
||||
:from="fromRoute.endpoint"
|
||||
:layout="['searchInput']"
|
||||
:search-msg="searchMsg"
|
||||
@search="search"
|
||||
>
|
||||
<template v-slot:default="slotProps">
|
||||
<endpoint-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tableTitle"
|
||||
:height="mainTableHeight"
|
||||
:table-data="tableData"
|
||||
:tableId="tableId"
|
||||
@orderBy="tableDataSort"
|
||||
@reload="getTableData"
|
||||
></endpoint-table>
|
||||
</template>
|
||||
<template v-slot:pagination>
|
||||
<div class="endpoint-page">
|
||||
<Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<!-- end搜素框-->
|
||||
|
||||
<!-- begin--表格-->
|
||||
<div class="right-box-form-box">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
class="nz-table endpoint-table"
|
||||
:height="mainTableHeight"
|
||||
ref="endpointTable"
|
||||
v-loading="loading"
|
||||
style="width: 100%;"
|
||||
@sort-change="tableDataSort"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
min-width="110px"
|
||||
:sortable="$tableSet.sortableShow(item.prop,'project')"
|
||||
:prop="$tableSet.propTitle(item.prop,'project')"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item" >
|
||||
<span v-if="item.prop == 'asset' && scope.row[item.prop]">{{scope.row[item.prop].host}}</span>
|
||||
<span v-else-if="item.prop == 'param'">
|
||||
<template v-if="scope.row.paramObj">
|
||||
<span v-for="(p, i) in scope.row.paramObj" :key="i">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
|
||||
<span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="nz-icon nz-icon-search"></i></span>
|
||||
|
||||
<span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
</div>
|
||||
<span v-else-if="item.prop == 'state'" >
|
||||
<el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
|
||||
<div slot="reference" style="width: 20px">
|
||||
<div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0','active-icon gray':scope.row.state == '2'}"></div>
|
||||
</div>
|
||||
<div >
|
||||
<div v-if="scope.row.state == '1'">up</div>
|
||||
<div v-else-if="scope.row.state == '0'">down:<br/>{{getStateErrorMsg(scope.row)}}</div>
|
||||
<div v-else-if="scope.row.state == '2'">suspended</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</span>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- end--表格-->
|
||||
|
||||
<!--底部分頁-->
|
||||
<div class="pagination-bottom">
|
||||
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
</template>
|
||||
</nz-data-list>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nzDataList from '@/components/common/table/nzDataList'
|
||||
import endpointTable from '@/components/common/table/settings/endpointTable'
|
||||
import dataListMixin from '@/components/common/mixin/dataList'
|
||||
export default {
|
||||
name: 'endpointTable',
|
||||
name: 'endpointTableProject',
|
||||
props: {
|
||||
moduleId: {},
|
||||
projectId: {}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
components: {
|
||||
nzDataList,
|
||||
endpointTable
|
||||
},
|
||||
mixins: [dataListMixin],
|
||||
computed: {
|
||||
tagType () {
|
||||
return (key) => {
|
||||
@@ -129,6 +78,8 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: 'monitor/endpoint',
|
||||
tableId:'endpointTableProject',
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: this.$CONSTANTS.defaultPageSize,
|
||||
@@ -158,27 +109,29 @@ export default {
|
||||
prop: 'state',
|
||||
show: true
|
||||
}
|
||||
// {
|
||||
// label: this.$t("project.endpoint.lastUpdate"),
|
||||
// prop: 'lastUpdate',
|
||||
// show: true,
|
||||
// },
|
||||
],
|
||||
searchMsg: { // 给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [{
|
||||
id: 1,
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
label: 'id',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 11,
|
||||
name: this.$t('asset.asset'),
|
||||
type: 'asset',
|
||||
label: 'asset',
|
||||
disabled: false
|
||||
}]
|
||||
searchLabelList: [
|
||||
{
|
||||
id: 13,
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
label: 'ids',
|
||||
disabled: false
|
||||
}, {
|
||||
name: 'Name',
|
||||
type: 'input',
|
||||
label: 'name',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: this.$t('asset.asset'),
|
||||
type: 'input',
|
||||
label: 'assetName',
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
},
|
||||
tableData: [],
|
||||
loading: false,
|
||||
@@ -197,16 +150,16 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getEndpointList()
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
getEndpointList: function () {
|
||||
this.loading = true
|
||||
getTableData: function () {
|
||||
this.tools.loading = true
|
||||
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
|
||||
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
|
||||
this.$set(this.searchLabel, 'moduleId', this.moduleId)
|
||||
this.$get('endpoint', this.searchLabel).then(response => {
|
||||
this.loading = false
|
||||
this.$set(this.searchLabel, 'moduleIds', this.moduleId)
|
||||
this.$get(this.url, this.searchLabel).then(response => {
|
||||
this.tools.loading = false
|
||||
if (response.code === 200) {
|
||||
// for (let i = 0; i < response.data.list.length; i++) {
|
||||
// try {
|
||||
@@ -226,12 +179,12 @@ export default {
|
||||
},
|
||||
pageNo (val) {
|
||||
this.pageObj.pageNo = val
|
||||
this.getEndpointList()
|
||||
this.getTableData()
|
||||
},
|
||||
pageSize (val) {
|
||||
this.pageObj.pageSize = val
|
||||
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
|
||||
this.getEndpointList()
|
||||
this.getTableData()
|
||||
},
|
||||
selectChange (s) {
|
||||
const ids = []
|
||||
@@ -251,7 +204,7 @@ export default {
|
||||
}
|
||||
this.pageObj.orderBy = orderBy
|
||||
this.$set(this.searchLabel, 'orderBy', orderBy)
|
||||
this.getEndpointList()
|
||||
this.getTableData()
|
||||
},
|
||||
/* 关闭弹框 */
|
||||
esc (refresh) {
|
||||
@@ -320,7 +273,7 @@ export default {
|
||||
if (this.$refs.endpointTable) {
|
||||
this.$refs.endpointTable.bodyWrapper.scrollTop = 0
|
||||
}
|
||||
this.getEndpointList()
|
||||
this.getTableData()
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
@@ -336,6 +289,9 @@ export default {
|
||||
}
|
||||
.right-box-title{
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.mc{
|
||||
position: fixed;
|
||||
@@ -354,5 +310,8 @@ export default {
|
||||
/deep/ .top-tools>div{
|
||||
margin-top: 6px;
|
||||
}
|
||||
.right-box /deep/ .list-page .main-container{
|
||||
background: #fff;
|
||||
}
|
||||
/* end--table*/
|
||||
</style>
|
||||
|
||||
@@ -588,7 +588,7 @@ export default {
|
||||
},
|
||||
topoScreen (n) {
|
||||
getTopology(this.topologyIndex).resize()
|
||||
getTopology(this.topologyIndex).centerView(20)
|
||||
getTopology(this.topologyIndex).centerView()
|
||||
// getTopology(this.topologyIndex).fitView(30)
|
||||
}
|
||||
},
|
||||
@@ -680,7 +680,7 @@ export default {
|
||||
flag = true
|
||||
}
|
||||
})
|
||||
getTopology(this.topologyIndex).centerView(20)
|
||||
getTopology(this.topologyIndex).centerView()
|
||||
this.penToolTipScale = getTopology(this.topologyIndex).data.scale
|
||||
setTimeout(() => {
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item => {
|
||||
@@ -1933,7 +1933,7 @@ export default {
|
||||
flag = true
|
||||
}
|
||||
})
|
||||
getTopology(this.topologyIndex).centerView(20)
|
||||
getTopology(this.topologyIndex).centerView()
|
||||
this.getNodesArr()
|
||||
}, 100)
|
||||
},
|
||||
@@ -2347,6 +2347,7 @@ export default {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.facade-top{
|
||||
@@ -2671,7 +2672,9 @@ export default {
|
||||
.from-project{
|
||||
padding-left: 0;
|
||||
.nz-table2{
|
||||
padding: 0 20px 10px 5px;
|
||||
padding: 0 5px 10px 5px;
|
||||
box-sizing: content-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user