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

style： project modue endpoint 样式微调

Browse Source
This commit is contained in:
zhangyu
2021-04-21 16:35:48 +08:00
parent ead11e248c
commit 2803cbe695
13 changed files with 1199 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/components/common/language/cn.js
View File

@@ -47,6 +47,7 @@ const cn = {
createChart: '新增图表',
createProject: '新增系统',
createEndpoint: '新增Endpoint',
batchEndpoint: '批量修改Endpoint',
createAsset: '新增资产',
createAlertRule: '新增告警规则',
createUser: '新增用户',

1
nezha-fronted/src/components/common/language/en.js
View File

@@ -54,6 +54,7 @@ const en = {
createChart: 'Create chart',
createProject: 'Create project',
createEndpoint: 'Create endpoint',
batchEndpoint: 'Batch modify endpoint',
createAsset: 'Create asset',
createAlertRule: 'Create alert rule',
createUser: 'Create user',

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

@@ -3,7 +3,7 @@
@import "./L5/css/props.css";
</style>
<template>
<div class="project-box" v-loading="topologyLoading">
<div class="project-box list-page" v-loading="topologyLoading">
<!--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">
@@ -110,22 +110,22 @@
</button>
</span>
</div>
<div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right">
<div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
<div>{{topologyInfo.name}}</div>
<span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
<button @click="changeScreen" class="top-tool-btn float-right"
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
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 @click="editTopology" class="top-tool-btn float-right"
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
>
<i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
</button>
<pick-time
v-show="!editTopologyFlag"
class="float-right pickTime"
class="float-right pickTime top-tool-btn-group"
:refresh-data-func="dateChange"
v-model="searchTime"
:use-chart-unit="false"
@@ -2471,11 +2471,10 @@ export default {
overflow: hidden;
background: #fff;
.pickTime{
margin-top: -13px;
margin-right: 10px;
}
.project-title {
height: 34px;
padding-top: 20px;
height: 55px;
padding-bottom: 0px;
}

3
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -253,7 +253,7 @@ export default {
},
pageObj: {
pageNo: 1,
pageSize: 2
pageSize: 10
},
pages: {
total: 0,
@@ -606,7 +606,6 @@ export default {
assetId: item.assetId,
name: item.name,
configs: JSON.stringify(item.configs),
port: 9100
}
endpointList.push(endpoint)
})

1035
nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue Normal file
View File

File diff suppressed because it is too large Load Diff

2
nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
View File

@@ -592,7 +592,7 @@ export default {
document.execCommand('Copy') // 执行浏览器复制命令
const creatDom = document.getElementById('creatDom')
creatDom.parentNode.removeChild(creatDom)
this.$message(this.$t('overall.copySuccess'))
this.$message.success(this.$t('overall.copySuccess'))
},
syntaxHighlight (json) {
if (typeof json != 'string') {

2
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -584,7 +584,7 @@ export default {
document.execCommand('Copy') // 执行浏览器复制命令
const creatDom = document.getElementById('creatDom')
creatDom.parentNode.removeChild(creatDom)
this.$message(this.$t('overall.copySuccess'))
this.$message.success(this.$t('overall.copySuccess'))
},
syntaxHighlight (json) {
if (typeof json != 'string') {

70
nezha-fronted/src/components/common/table/settings/endpointTable.vue
View File

@@ -7,7 +7,7 @@
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="(selection) => { batchDeleteObjs = selection }"
@selection-change="selectionChange"
>
<el-table-column
:resizable="false"
@@ -46,14 +46,24 @@
{{scope.row[item.prop].name}}
</template>
<template v-else-if="item.prop === 'alerts'">
<span class="endpoint-num" :class="scope.row.alertNum>0?'bagEF7458':'bag23BF9A'">
{{scope.row.alertNum}} active
<span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
<i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
{{scope.row.alertNum}}
</span>
</template>
<template v-else-if="item.prop === 'asset'">
<span >
<i class="nz-icon nz-icon-asset" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
{{scope.row.asset.name}}
</span>
</template>
<template v-else-if="item.prop === 'configs'">
<el-tooltip placement="right" effect="light">
<span class="configs-endpoint">{}</span>
<div slot="content">{{scope.row[item.prop]}}</div>
<el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'">
<span class="configs-endpoint">{ ... }</span>
<div class="endpointConfigsTips" slot="content">
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row[item.prop])"></i></span>
<pre >{{JSON.stringify(JSON.parse(scope.row[item.prop]),null,2)}}</pre>
</div>
</el-tooltip>
</template>
<template v-else-if="item.prop === 'state'">
@@ -109,18 +119,24 @@ export default {
prop: 'project',
show: true
},
{
label: this.$t('project.endpoint.asset'),
prop: 'asset',
show: true
},
{
label: this.$t('project.module.module'),
prop: 'module',
show: true
}, {
label: this.$t('project.endpoint.alerts'),
prop: 'alerts',
show: true
},
{
label: this.$t('project.endpoint.configs'),
prop: 'configs',
show: false
},
{
label: this.$t('project.endpoint.alerts'),
prop: 'alerts',
show: true
},
{
@@ -132,6 +148,17 @@ export default {
}
},
methods: {
copyValue (str) {
const domUrl = document.createElement('input')
domUrl.value = str
domUrl.id = 'creatDom'
document.body.appendChild(domUrl)
domUrl.select() // 选择对象
document.execCommand('Copy') // 执行浏览器复制命令
const creatDom = document.getElementById('creatDom')
creatDom.parentNode.removeChild(creatDom)
this.$message.success(this.$t('overall.copySuccess'))
}
},
computed: {}
}
@@ -151,9 +178,28 @@ export default {
color: #fff;
}
.configs-endpoint{
background: #FA901C;
border-radius: 4px;
padding: 2px 7px;
color: #fff;
color: #3C92F1;
}
.colorEF7458{
color: #EF7458;
}
.color23BF9A{
color: #23BF9A;
}
.endpoint-num, .alert-num{
cursor: pointer;
}
</style>
<style>
.endpointConfigsTips{
height: 200px;
overflow-y: auto;
}
.copy-value-content{
position: absolute;
right: 1px;
top: 4px;
}
</style>

24
nezha-fronted/src/components/common/table/settings/moduleTable.vue
View File

@@ -7,7 +7,7 @@
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="(selection) => { batchDeleteObjs = selection }"
@selection-change="selectionChange"
>
<el-table-column
:resizable="false"
@@ -43,10 +43,16 @@
{{scope.row[item.prop].name}}
</template>
<template v-else-if="item.prop === 'endpointNum'">
<span class="endpoint-num" @click="showBottomBox('endpoint', scope.row)">
<i class="nz-icon nz-icon-endpoint" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
{{scope.row[item.prop]}}
</span>
</template>
<template v-else-if="item.prop === 'alertNum'">
<span class="alert-num" @click="showBottomBox('moduleAlertMessage', scope.row)">
<i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
{{scope.row[item.prop]}}
</span>
</template>
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
</template>
@@ -89,10 +95,11 @@ export default {
label: this.$t('project.module.moduleName'),
prop: 'name',
show: true,
minWidth: 200
}, {
label: this.$t('project.module.type'),
prop: 'type',
show: true,
show: false,
width: 150
}, {
label: this.$t('project.project.project'),
@@ -114,7 +121,7 @@ export default {
{
label: this.$t('overall.remark'),
prop: 'remark',
show: true,
show: false,
minWidth: 150
}
]
@@ -132,3 +139,14 @@ export default {
}
}
</script>
<style scoped>
.colorEF7458{
color: #EF7458;
}
.color23BF9A{
color: #23BF9A;
}
.endpoint-num, .alert-num{
cursor: pointer;
}
</style>

37
nezha-fronted/src/components/common/table/settings/projectTable.vue
View File

@@ -7,7 +7,7 @@
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="(selection) => { batchDeleteObjs = selection }"
@selection-change="selectionChange"
>
<el-table-column
:resizable="false"
@@ -34,23 +34,26 @@
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'name'">
<span class="module-num">
<span class="">
{{scope.row[item.prop]}}
</span>
</template>
<template v-else-if="item.prop === 'moduleNum'" >
<span class="module-num" @click="jumpModule(scope.row)">
<i class="nz-icon nz-icon-overview-module"/>
{{scope.row[item.prop]}}
</span>
</template>
<template v-else-if="item.prop === 'endpointNum'">
<span class="endpoint-num" :class="scope.row[item.prop]>0?'bagEF7458':'bag23BF9A'" @click="jumpEndpoint(scope.row)">
<span class="endpoint-num" @click="jumpEndpoint(scope.row)" >
<i class="nz-icon nz-icon-endpoint" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
{{scope.row[item.prop]}}
</span>
</template>
<template v-else-if="item.prop === 'alertNum'">
<span class="endpoint-num" :class="scope.row[item.prop]>0?'bagEF7458':'bag23BF9A'">
{{scope.row[item.prop]}} active
<span class="alert-num">
<i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
{{scope.row[item.prop]}}
</span>
</template>
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
@@ -94,7 +97,7 @@ export default {
label: this.$t('project.project.project'),
prop: 'name',
show: true,
width: 150
minWidth: 150
}, {
label: this.$t('project.module.module'),
prop: 'moduleNum',
@@ -106,7 +109,7 @@ export default {
show: true,
width: 150
}, {
label: this.$t('project.endpoint.endpoint'),
label: this.$t('project.endpoint.alerts'),
prop: 'alertNum',
show: true,
width: 150
@@ -114,7 +117,7 @@ export default {
{
label: this.$t('overall.remark'),
prop: 'remark',
show: true,
show: false,
minWidth: 150
}
]
@@ -142,26 +145,26 @@ export default {
}
}
</script>
<style scoped>
<style scoped lang="scss">
.module-num{
font-size: 14px;
color: #3C92F1;
font-weight: 400;
cursor: pointer;
padding: 0 3px;
cursor: pointer;
.nz-icon-overview-module{
color: rgb(122, 208, 188)
}
.endpoint-num{
}
.alert-num{
padding: 0 3px;
cursor: pointer;
border-radius: 2px;
}
.bagEF7458{
background: #EF7458;
color: #fff;
.colorEF7458{
color: #EF7458;
}
.bag23BF9A{
background: #23BF9A;
color: #fff;
.color23BF9A{
color: #23BF9A;
}
</style>

35
nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
View File

@@ -3,6 +3,7 @@
<nz-data-list
ref="dataList"
:api="url"
:tableId="tableId"
class="dataList"
:custom-table-title.sync="tools.customTableTitle"
:from="fromRoute.endpoint"
@@ -22,13 +23,17 @@
class="top-tool-export margin-r-10"
>
<template slot="optionZone">
<button id="account-add" v-has="'monitor_endpoint_add'" :title="$t('overall.createUser')" class="top-tool-btn margin-l-20"
<button id="account-add" v-has="'monitor_endpoint_add'" class="top-tool-btn margin-l-20"
type="button" @click="add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</template>
</export-excel>
<delete-button id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
<button id="account-batch-modify" v-has="'monitor_endpoint_add'" :class="{'nz-btn-disabled' : batchDeleteObjs.length<1}" class="top-tool-btn margin-l-20 margin-r-20"
type="button" @click="batchModify">
<i class="nz-icon-batch-edit nz-icon"></i>
</button>
</template>
<template v-slot:search>
<clickSearch :titleSearchList="titleSearchList" :selectValue.sync="selectValue" @reload="reloadTable"/>
@@ -41,10 +46,12 @@
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"
:tableId="tableId"
@del="del"
@edit="edit"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"
@showBottomBox="(targetTab, item) => { $refs.dataList.showBottomBox(targetTab, item) }"></endpoint-table>
</template>
<template v-slot:pagination>
@@ -59,6 +66,9 @@
<transition name="right-box">
<edit-endpoint-box-new v-if="rightBox.editShow" :module="object" @close="closeRightEditBox" :disabled="true" :type="'edit'"></edit-endpoint-box-new>
</transition>
<transition name="right-box">
<batchModifyEndpoint v-if="rightBox.batchModify" :module="object" @close="closeRightBatchModify" :selectEndpointList="batchDeleteObjs" :disabled="true" :type="'edit'"></batchModifyEndpoint>
</transition>
</div>
</template>
<script>
@@ -69,6 +79,7 @@ import nzDataList from '@/components/common/table/nzDataList'
import dataListMixin from '@/components/common/mixin/dataList'
import endpointTable from '@/components/common/table/settings/endpointTable'
import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
import batchModifyEndpoint from '@/components/common/rightBox/batchModifyEndpoint'
import clickSearch from '@/components/common/clickSearch'
export default {
@@ -84,7 +95,8 @@ export default {
deleteButton,
endpointTable,
'export-excel': exportXLSX,
clickSearch
clickSearch,
batchModifyEndpoint
},
mixins: [dataListMixin],
data () {
@@ -119,7 +131,8 @@ export default {
roles: [],
rightBox: {
editShow: false,
show: false
show: false,
batchModify: false
},
titleSearch: {},
titleSearchList: {
@@ -199,6 +212,13 @@ export default {
this.getTableData()
}
},
closeRightBatchModify (refresh) {
this.rightBox.batchModify = false
if (refresh) {
this.delFlag = true
this.getTableData()
}
},
getTableData () {
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -258,6 +278,12 @@ export default {
}
})
this.titleSearchList.state.children = [{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }]
},
batchModify () {
if (!this.batchDeleteObjs.length) {
return
}
this.rightBox.batchModify = true
}
},
computed: {
@@ -294,4 +320,7 @@ export default {
flex: 1;
width: 100%;
}
/deep/ .nz-btn-disabled {
opacity: 0.5;
}
</style>

9
nezha-fronted/src/components/page/monitor/module/moduleList.vue
View File

@@ -3,6 +3,7 @@
<nz-data-list
ref="dataList"
:api="url"
:tableId="tableId"
:custom-table-title.sync="tools.customTableTitle"
:from="fromRoute.module"
:layout="['searchInput', 'elementSet']"
@@ -33,6 +34,7 @@
ref="dataTable"
v-loading="slotProps.loading"
:api="url"
:tableId="tableId"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"
@@ -40,6 +42,7 @@
@edit="edit"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></module-table>
</template>
<template v-slot:pagination>
@@ -196,9 +199,8 @@ export default {
this.searchLabel.projectIds = localStorage.getItem('moduleProjectId')
}
},
mounted () {
if (localStorage.getItem('moduleProjectId')) {
setTimeout(()=>{
this.$refs.dataList.$refs.searchInput.select_list.push({
id: 11,
name: 'project id',
@@ -208,7 +210,10 @@ export default {
val: localStorage.getItem('moduleProjectId')
})
this.$refs.dataList.$refs.searchInput.sreach_num = 1
})
}
},
mounted () {
}
}
</script>

3
nezha-fronted/src/components/page/monitor/project/projectList.vue
View File

@@ -3,6 +3,7 @@
<nz-data-list
ref="dataList"
:api="url"
:tableId="tableId"
:custom-table-title.sync="tools.customTableTitle"
:from="fromRoute.project"
:layout="['searchInput', 'elementSet']"
@@ -22,10 +23,12 @@
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"
:tableId="tableId"
@del="del"
@edit="edit"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></project-table>
</template>
<template v-slot:pagination>