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

fix：修改 topology 相关右滑表格的样式问题

Browse Source
This commit is contained in:
zhangyu
2021-05-19 16:09:05 +08:00
parent 55ed744186
commit 42b4fc2e17
6 changed files with 2056 additions and 2225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
nezha-fronted/src/components/common/project/popData/Info.vue
View File

@@ -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: {},

292
nezha-fronted/src/components/common/project/popData/alertTable.vue
View File

@@ -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"
<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"
>
<!--<el-table-column-->
<!--:resizable="false"-->
<!--type="selection"-->
<!--width="38"-->
<!--align="center"-->
<!--&gt;-->
<!--</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 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-else-if="item.prop == 'summary'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</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-else-if="item.prop == 'description'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-else>-</span>
<!-- 分页组件 -->
<template v-slot:pagination>
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</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>&nbsp;{{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>
</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'),
searchLabelList: [
{
id: 26,
name: this.$t('alert.list.id'),
type: 'id',
label: 'id',
disabled: false
},
{
name: this.$t('alert.alertRule'),
type: 'input',
label: 'alertName',
disabled: false
}, /* {
id: 3,
name: this.$t('alert.list.type'),
type: 'select',
label: 'alertType',
disabled: false
}, */{
id: 20,
name: this.$t('alert.severity'),
type: 'selectString',
label: 'severity',
label: 'ruleName',
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',
label: 'assetName',
disabled: false
}, {
id: 25,
name: this.$t('alert.list.state'),
type: 'select',
label: 'alertMessageState',
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>

232
nezha-fronted/src/components/common/project/popData/assetTable.vue
View File

@@ -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"
<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"
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>
: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>
</el-table-column>
</el-table>
</div>
<!-- end--表格-->
<!--底部分頁-->
<div class="pagination-bottom">
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</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>

175
nezha-fronted/src/components/common/project/popData/endpointTable.vue
View File

@@ -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>
</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"
<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"
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>
:table-data="tableData"
:tableId="tableId"
@orderBy="tableDataSort"
@reload="getTableData"
></endpoint-table>
</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>
&nbsp;
<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>
&nbsp;
<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>
<template v-slot:pagination>
<div class="endpoint-page">
<Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</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>
</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,
searchLabelList: [
{
id: 13,
name: 'ID',
type: 'input',
label: 'id',
label: 'ids',
disabled: false
}, {
id: 11,
name: this.$t('asset.asset'),
type: 'asset',
label: 'asset',
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>

11
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -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>

235
nezha-fronted/src/components/common/project/topologyPrev.vue
View File

@@ -4,9 +4,9 @@
</style>
<template>
<div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
<!--project主要信息-->
<div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
<div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
<div class="main-list">
<div class="main-container" :class="fromOverView?'from-overview':'from-project'">
<div v-if="editTopologyFlag" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);">
<!--工具栏-->
<span class="project-topology-tool">
<el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
@@ -40,7 +40,7 @@
<div class="upload-pic-box" @click="uploadPicChange" v-has="'topo_icon_save'">
<i class="el-icon-plus"></i>
<span>
Upload custom picture
{{ $t('overall.uploadCustomPicture') }}
</span>
</div>
</div>
@@ -110,58 +110,62 @@
</button>
</span>
</div>
<div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px;padding-top: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
<div v-if="!editTopologyFlag&&!fromOverView" class="top-tools" style="padding-left: 10px">
<div>{{topologyInfo.name}}</div>
<span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
<button class="top-tool-btn" @click="changeScreen"
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
>
<i class="nz-icon" :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'"></i>
</button>
<button class="top-tool-btn" @click="editTopology"
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button" v-has="'project_topo_update'"
>
<i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
</button>
<div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
<pick-time
v-show="!editTopologyFlag"
class="float-right pickTime top-tool-btn-group"
:refresh-data-func="dateChange"
ref="pickTime"
v-model="searchTime"
:use-chart-unit="false"
:refresh-data-func="dateChange"
:showTimePicker="false"
ref="pickTime">
:use-chart-unit="false"
class="pickTime margin-r-10">
</pick-time>
</span>
<button v-has="'project_topo_update'" class="top-tool-btn margin-r-10" type="button" @click="editTopology">
<i :title="$t('project.topology.edit')" class="nz-icon nz-icon-edit"></i>
</button>
<button class="top-tool-btn" type="button" @click="changeScreen">
<i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
</button>
</div>
</div>
<div :class="['page',fromOverView?'overview-page':'']" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
<div class="nz-table2">
<!--悬浮network部分-->
<div class="network-info">
<div v-if="popDataShow.main">
<popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
</div>
<div v-if="popDataShow.info">
<popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
</div>
</div>
<div :class="['page',fromOverView?'overview-page':'']" :style="`border: 1px solid ${theme.rightBoxBorderColor};`">
<!--画布部分-->
<div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
<div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full"></div>
<!--设置属性-->
<div class="props" v-if="editTopologyFlag&&toolShow.attr">
<CanvasProps :selection.sync="props"
@change="onUpdateProps"
@animate="animateCanvas"
@changeProjectTitle="changeProjectTitle"
@notModuleIDArrChange="notModuleIDArrChange"
<div v-if="editTopologyFlag&&toolShow.attr" class="props">
<CanvasProps ref="CanvasProps"
:index="topologyIndex"
@del="delPen"
:modules="modules"
ref="CanvasProps">
:selection.sync="props"
@animate="animateCanvas"
@change="onUpdateProps"
@changeProjectTitle="changeProjectTitle"
@del="delPen"
@notModuleIDArrChange="notModuleIDArrChange">
</CanvasProps>
</div>
<!--所有节点上的小图标-->
<div v-for="(item,index) in nodesArr" :key="index"
<div v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
:key="index"
:style="{position: 'absolute',top:item.rect.y - (48*(fromOverView?penToolTipScale:1))+'px',left:item.rect.center.x - (24*(fromOverView?penToolTipScale:1)) +'px',transform:'scale('+(fromOverView?penToolTipScale:1)+')'}"
v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
class="network-pop"
>
<i
:class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
:ref="'modelTopId'+index"
:class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
@click="showNodeTools(index,item)"
>
<i class="nz-icon nz-icon-model"></i>
@@ -183,6 +187,7 @@
</div>
<!--提示未添加module id的块-->
<div v-for="(item, index) in notModuleIDArr"
v-if="editTopologyFlag&&!fromPrev"
:key="index"
:style="{
position: 'absolute',
@@ -190,23 +195,35 @@
left:item.rect.x - 10+'px',
transform:'scale('+(fromOverView?penToolTipScale:1)+')',
}"
v-if="editTopologyFlag&&!fromPrev"
>
<div class="module-rect-top" :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}"></div>
<div class="module-rect-right" :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}"></div>
<div class="module-rect-bottom" :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}"></div>
<div class="module-rect-left" :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}"></div>
<div :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-top"></div>
<div :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}" class="module-rect-right"></div>
<div :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-bottom"></div>
<div :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}" class="module-rect-left"></div>
</div>
<!--节点连线相关的 tooltip-->
<div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
v-if="tooltipPosition.show&&!editTopologyFlag"
@mouseover="tooltipOver"
@mouseout="tooltipOut"
<div v-if="tooltipPosition.show&&!editTopologyFlag"
ref="topoTooltip"
:style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
@mouseout="tooltipOut"
@mouseover="tooltipOver"
>
<topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
</div>
</div>
<!--endpoint-->
<transition name="right-box">
<endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
@close="popDataShowUpdate('',true)">endpoint
</endpointTable>
</transition>
<div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev" class="right-bottom-zoom">
<div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
<div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
</div>
</div>
</div>
</div>
<!--<div class="left-bottom" v-if="editTopologyFlag">-->
<!--<div class="title">小提示</div>-->
<!--<ul class="group">-->
@@ -216,21 +233,6 @@
<!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
<!--</ul>-->
<!--</div>-->
<!--悬浮network部分-->
<div class="network-info">
<div v-if="popDataShow.main">
<popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
</div>
<div v-if="popDataShow.info">
<popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
</div>
</div>
<!--endpoint-->
<transition name="right-box">
<endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
@close="popDataShowUpdate('',true)">endpoint
</endpointTable>
</transition>
<!--asset-->
<transition name="right-box">
<assetTable v-if="popDataShow.asset" :moduleId="moduleId" :projectId="projectInfo.id"
@@ -262,19 +264,19 @@
</el-dialog>
<!--Custom picture-->
<el-dialog
title="Custom picture"
:title="title"
:visible.sync="uploadPicShow"
width="auto"
@close="uploadPicShow = false"
destroy-on-close>
<el-row class="upload-pic-row">
<el-col :span="4" class="upload-pic-label">Name</el-col>
<el-col :span="4" class="upload-pic-label">{{ $t('overall.name') }}</el-col>
<el-col :span="20">
<el-input v-model="uploadPic.name" size="small" :placeholder="$t('project.topology.placeholderImg')"></el-input>
</el-col>
</el-row>
<el-row class="upload-pic-row">
<el-col :span="4" class="upload-pic-label">Folder</el-col>
<el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
<el-col :span="20">
<el-autocomplete
class="inline-input"
@@ -322,16 +324,12 @@
</div>
</el-dialog>
<div class="right-bottom-zoom" v-if="!fromOverView&&!editTopologyFlag&&!fromPrev">
<div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
<div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
</div>
</div>
</template>
<script>
import { Topology, registerNode } from '@topology/core'
import {
import { Topology, registerNode } from '@topology/core'
import {
Tools,
canvasRegister,
imageTemp,
@@ -343,34 +341,35 @@ import {
onChangeAnimateLine,
myCubec,
myCubeAnchors
} from './L5/services/canvas.js'
import { getTopology, setTopology } from '../js/common'
import CanvasProps from './L5/CanvasProps'
import topologyTopTool from './L5//topologyTopTool'
import popDataMain from './popData/Main'
import popDataInfo from './popData/Info'
import alertTable from './popData/alertTable'
import assetTable from './popData/assetTable'
import endpointTable from './popData/endpointTable'
import topoTooltip from './L5/topoTooltip'
import { getMetricTypeValue } from '../js/tools'
import bus from '../../../libs/bus'
import topologyPrev from './topologyPrev'
// 注册到画布
registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
registerNode('myCube', myCubec, myCubeAnchors, null, null)
} from './L5/services/canvas.js'
import { getTopology, setTopology } from '../js/common'
import CanvasProps from './L5/CanvasProps'
import topologyTopTool from './L5//topologyTopTool'
import popDataMain from './popData/Main'
import popDataInfo from './popData/Info'
import alertTable from './popData/alertTable'
import assetTable from './popData/assetTable'
import endpointTable from './popData/endpointTable'
import topoTooltip from './L5/topoTooltip'
import { getMetricTypeValue } from '../js/tools'
import bus from '../../../libs/bus'
import topologyPrev from './topologyPrev'
// 注册到画布
registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
registerNode('myCube', myCubec, myCubeAnchors, null, null)
const canvasOptions = {
const canvasOptions = {
rotateCursor: '/img/rotate.cur',
translateKey: 'None',
disableEmptyLine: true,
autoExpandDistance: 0,
minScale: 0.01
}
export default {
}
export default {
name: 'topologyL5',
data () {
return {
title: this.$t("overall.customPicture"),
objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
chartDataInfo: {},
topoPrevData: {}, // 预览数据
@@ -589,7 +588,8 @@ export default {
},
topoScreen (n) {
getTopology(this.topologyIndex).resize()
getTopology(this.topologyIndex).centerView(20)
getTopology(this.topologyIndex).centerView()
// getTopology(this.topologyIndex).fitView(30)
}
},
computed: {
@@ -674,11 +674,13 @@ export default {
return
}
if (item.rect.ex > position.x || item.rect.ey > position.y) {
if (this.fromOverView) {
getTopology(this.topologyIndex).fitView(20)
}
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 => {
@@ -760,6 +762,7 @@ export default {
}
this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
let data = res.data.topo
// data = JSON.parse(localStorage.getItem('topoData'))
if (!res.data.topo || !data.pens) {
data = {
bkColor: '#FFFFFF',
@@ -803,6 +806,7 @@ export default {
}
data.pens.forEach(item => {
if (item.type === 0 && item.data.imageId) {
console.log(item,item.data.imageId,this.iconArray.find(item1 => item1.id == 44))
item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
}
if (item.type === 0) {
@@ -1792,6 +1796,7 @@ export default {
// 保存
saveTopology () {
const topologyData = getTopology(this.topologyIndex).pureData()
console.log(JSON.stringify(topologyData))
let flag = true
const arr = []
this.notModuleIDArr = []
@@ -1924,11 +1929,11 @@ export default {
return
}
if (item.rect.ex > position.x || item.rect.ey > position.y) {
getTopology(this.topologyIndex).fitView(20)
// getTopology(this.topologyIndex).fitView(20)
flag = true
}
})
getTopology(this.topologyIndex).centerView(20)
getTopology(this.topologyIndex).centerView()
this.getNodesArr()
}, 100)
},
@@ -2031,7 +2036,7 @@ export default {
}
window.removeEventListener('resize', this.winResize)
}
}
}
</script>
<style lang="scss">
.el-dropdown-menu {
@@ -2470,8 +2475,6 @@ export default {
.project-box {
width: 100%;
height: calc(100% - 20px);
margin-top: 10px;
position: relative;
border-radius: 2px;
overflow: hidden;
@@ -2499,14 +2502,18 @@ export default {
.page {
display: flex;
height: calc(100% - 1px);
width: 100%;
/*
height: calc(100% - 65px);
width: calc(100% - 10px);
margin: 5px;
*/
position: relative;
.tools {
width: 300px;
height: 100%;
height: calc(100% - 1px);
border: none;
position: absolute;
z-index: 1 !important;
@@ -2631,4 +2638,42 @@ export default {
.top-tool-btn:focus .nz-icon{
color: #FBCEA4;
}
.right-bottom-zoom{
position: absolute;
bottom: 30px;
right: 40px;
height: 90px;
width: 35px;
border: 1px solid #E7EAED;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
.zoom-option{
width: 100%;
height: 50%;
opacity: 0.42;
background: #FFF;
align-items: center;
display: flex;
justify-content: center;
}
.zoom-option:hover{
cursor: pointer;
}
}
.from-overview{
padding:0 !important;
width: calc(100% - 2px);
height: calc(100% - 2px) !important;
.nz-table2{
padding: 0 !important;
height: 100%;
}
}
.from-project{
padding-left: 0;
.nz-table2{
padding: 0 5px 10px 5px;
box-sizing: content-box;
overflow: hidden;
}
}
</style>