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

perf: project样式调整

Browse Source
This commit is contained in:
chenjinsong
2021-04-30 17:11:34 +08:00
parent ceef9ba5dc
commit 24c6f8d052
11 changed files with 728 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -190,7 +190,7 @@
.el-table { .el-table {
position: absolute; position: absolute;
width: calc(100% - 40px); width: calc(100% - 40px);
border: 1px solid #E7EAED; border: 1px solid $--right-box-border-color;
border-bottom: none; border-bottom: none;
.caret-wrapper { .caret-wrapper {
@@ -209,10 +209,10 @@
td { td {
padding: 9px 0; padding: 9px 0;
border-bottom: 1px solid #E7EAED; border-bottom: 1px solid $--right-box-border-color;
} }
th { th {
border-color: #E7EAED; border-color: $--right-box-border-color;
} }
.el-table__header th:first-of-type { .el-table__header th:first-of-type {
border-left: none; border-left: none;
@@ -221,7 +221,7 @@
position: fixed; position: fixed;
right: 31px; right: 31px;
height: 49px; height: 49px;
border-bottom: 1px solid #E7EAED; border-bottom: 1px solid $--right-box-border-color;
background-color: white; background-color: white;
} }
thead { thead {
@@ -284,7 +284,7 @@
} }
/* start--覆盖el-table边框、gutter等样式 */ /* start--覆盖el-table边框、gutter等样式 */
.el-table__body-wrapper, .el-table__fixed-body-wrapper { .el-table__body-wrapper, .el-table__fixed-body-wrapper {
box-shadow: 1px 0 #E7EAED; box-shadow: 1px 0 $--right-box-border-color;
.cell { .cell {
color: #333; color: #333;
@@ -298,20 +298,20 @@
} }
/* 最后一列用box-shadow模拟边框 */ /* 最后一列用box-shadow模拟边框 */
.el-table:not(.no-operation).el-table--border .el-table__body-wrapper td:nth-last-child(2) { .el-table:not(.no-operation).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
box-shadow: 1px 0 #E7EAED; box-shadow: 1px 0 $--right-box-border-color;
} }
.el-table:not(.no-operation).el-table--border .el-table__header-wrapper th:nth-last-child(3) { .el-table:not(.no-operation).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
border-right: none !important; border-right: none !important;
box-shadow: 1px 0 #E7EAED; box-shadow: 1px 0 $--right-box-border-color;
} }
.el-table__fixed-body-wrapper { .el-table__fixed-body-wrapper {
td:not(.is-hidden) { td:not(.is-hidden) {
border-left: 1px solid #E7EAED; border-left: 1px solid $--right-box-border-color;
} }
} }
.el-table__fixed-header-wrapper { .el-table__fixed-header-wrapper {
th:not(.is-hidden) { th:not(.is-hidden) {
border-left: 1px solid #E7EAED; border-left: 1px solid $--right-box-border-color;
} }
th:last-of-type { th:last-of-type {
border-right: none !important; border-right: none !important;

2
nezha-fronted/src/assets/css/theme.scss
View File

@@ -50,6 +50,8 @@ $--monitor-color: #98AEC5; //全局停用色灰色
warningColor: var(--theme-color); warningColor: var(--theme-color);
suspendedColor: $--suspended-color; suspendedColor: $--suspended-color;
monitorColor: $--monitor-color; monitorColor: $--monitor-color;
primaryBorderColor: $--primary-border-color;
rightBoxBorderColor: $--right-box-border-color;
} }
/* element-ui变量覆盖 */ /* element-ui变量覆盖 */
/*$--color-primary: red; // 覆盖element-ui的主题色 /*$--color-primary: red; // 覆盖element-ui的主题色

21
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -2073,27 +2073,6 @@ li{
line-height: 20px; line-height: 20px;
} }
.right-bottom-zoom{
position: absolute;
top: calc(100% - 100px);
left: calc(100% - 45px);
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;
}
}
.nz-icon-arrow-down{ .nz-icon-arrow-down{
font-size: 14px; font-size: 14px;
} }

2
nezha-fronted/src/components/common/labelFilter/clickSearch.vue
View File

@@ -212,7 +212,7 @@ export default {
justify-content: space-between; justify-content: space-between;
padding: 15px 0 15px 17px; padding: 15px 0 15px 17px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #E7EAED; border: 1px solid $--right-box-border-color;
background-color: #FFFFFF; background-color: #FFFFFF;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;

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

@@ -1,12 +1,12 @@
<style> <style>
@import "./L5/css/iconfont.css"; @import "./L5/css/iconfont.css";
@import "./L5/css/props.css"; @import "./L5/css/props.css";
</style> </style>
<template> <template>
<div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'"> <div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
<!--project主要信息--> <div class="main-list">
<div v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }" class="project-title"> <div class="main-container" style="padding-left: 0">
<div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px"> <div v-if="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
<!--工具栏--> <!--工具栏-->
<span class="project-topology-tool"> <span class="project-topology-tool">
<el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'"> <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
@@ -110,19 +110,9 @@
</button> </button>
</span> </span>
</div> </div>
<div v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools" style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px;padding-top: 10px"> <div v-if="!editTopologyFlag&&!fromOverView" class="top-tools" style="padding-left: 10px">
<div>{{topologyInfo.name}}</div> <div>{{topologyInfo.name}}</div>
<span v-show="!editTopologyFlag&&!fromPrev&&!fromOverView" class="edit-topologyLine" style="padding-top: 5px"> <div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
<button class="top-tool-btn float-right" style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;"
type="button" @click="changeScreen"
>
<i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
</button>
<button v-has="'project_topo_update'" class="top-tool-btn float-right"
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button" @click="editTopology"
>
<i :title="$t('project.topology.edit')" class="nz-icon nz-icon-edit"></i>
</button>
<pick-time <pick-time
v-show="!editTopologyFlag" v-show="!editTopologyFlag"
ref="pickTime" ref="pickTime"
@@ -130,38 +120,52 @@
:refresh-data-func="dateChange" :refresh-data-func="dateChange"
:showTimePicker="false" :showTimePicker="false"
:use-chart-unit="false" :use-chart-unit="false"
class="float-right pickTime top-tool-btn-group"> class="pickTime margin-r-10">
</pick-time> </pick-time>
<button v-has="'project_topo_update'" class="top-tool-btn margin-r-10" type="button" @click="editTopology">
</span> <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> </div>
<div :class="['page',fromOverView?'overview-page':'']" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}"> <div class="nz-table2" style="padding: 0 20px 10px 5px;">
<!--悬浮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"> <div v-if="editTopologyFlag&&toolShow.attr" class="props">
<CanvasProps :selection.sync="props" <CanvasProps ref="CanvasProps"
@change="onUpdateProps"
@animate="animateCanvas"
@changeProjectTitle="changeProjectTitle"
@notModuleIDArrChange="notModuleIDArrChange"
:index="topologyIndex" :index="topologyIndex"
@del="delPen"
:modules="modules" :modules="modules"
ref="CanvasProps"> :selection.sync="props"
@animate="animateCanvas"
@change="onUpdateProps"
@changeProjectTitle="changeProjectTitle"
@del="delPen"
@notModuleIDArrChange="notModuleIDArrChange">
</CanvasProps> </CanvasProps>
</div> </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)+')'}" :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" class="network-pop"
> >
<i <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" :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)" @click="showNodeTools(index,item)"
> >
<i class="nz-icon nz-icon-model"></i> <i class="nz-icon nz-icon-model"></i>
@@ -183,6 +187,7 @@
</div> </div>
<!--提示未添加module id的块--> <!--提示未添加module id的块-->
<div v-for="(item, index) in notModuleIDArr" <div v-for="(item, index) in notModuleIDArr"
v-if="editTopologyFlag&&!fromPrev"
:key="index" :key="index"
:style="{ :style="{
position: 'absolute', position: 'absolute',
@@ -190,23 +195,35 @@
left:item.rect.x - 10+'px', left:item.rect.x - 10+'px',
transform:'scale('+(fromOverView?penToolTipScale:1)+')', 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 :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-top"></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 :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}" class="module-rect-right"></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 :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-bottom"></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:0,height:item.rect.height+15+'px'}" class="module-rect-left"></div>
</div> </div>
<!--节点连线相关的 tooltip--> <!--节点连线相关的 tooltip-->
<div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}" <div v-if="tooltipPosition.show&&!editTopologyFlag"
v-if="tooltipPosition.show&&!editTopologyFlag"
@mouseover="tooltipOver"
@mouseout="tooltipOut"
ref="topoTooltip" 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"/> <topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
</div> </div>
</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="left-bottom" v-if="editTopologyFlag">-->
<!--<div class="title">小提示</div>--> <!--<div class="title">小提示</div>-->
<!--<ul class="group">--> <!--<ul class="group">-->
@@ -216,21 +233,6 @@
<!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>--> <!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
<!--</ul>--> <!--</ul>-->
<!--</div>--> <!--</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--> <!--asset-->
<transition name="right-box"> <transition name="right-box">
<assetTable v-if="popDataShow.asset" :moduleId="moduleId" :projectId="projectInfo.id" <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :projectId="projectInfo.id"
@@ -322,10 +324,6 @@
</div> </div>
</el-dialog> </el-dialog>
<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>
</template> </template>
@@ -1549,7 +1547,6 @@ export default {
upload () { upload () {
const form = new FormData() const form = new FormData()
form.append('file', this.file) form.append('file', this.file)
console.log(this.file)
if (this.uploadPic.name) { if (this.uploadPic.name) {
form.append('name', this.uploadPic.name) form.append('name', this.uploadPic.name)
} else { } else {
@@ -1562,7 +1559,7 @@ export default {
if (res.code == 200) { if (res.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.uploadPicShow = false this.uploadPicShow = false
this.dealImg(`monitor/project/topo/icon/${res.data.id}/0`).then((data,header) => { this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data,header) => {
const group = this.tools.find(tool => tool.group === this.uploadPic.unit) const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
if (group) { if (group) {
group.children.push({ group.children.push({
@@ -1618,7 +1615,7 @@ export default {
res.data.list.forEach((item, index) => { res.data.list.forEach((item, index) => {
item.imageName = item.name item.imageName = item.name
delete item.name delete item.name
promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/0`)) promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
imgArr.push({ ...item }) imgArr.push({ ...item })
}) })
Promise.all(promiseArr).then((res2,header) => { Promise.all(promiseArr).then((res2,header) => {
@@ -1662,7 +1659,7 @@ export default {
const promiseArr = [] const promiseArr = []
imgidList.forEach((item, index) => { imgidList.forEach((item, index) => {
if (item.data.imageId) { if (item.data.imageId) {
promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/0`)) promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
} else { } else {
promiseArr.push('') promiseArr.push('')
} }
@@ -1688,13 +1685,10 @@ export default {
if (url) { if (url) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$axios this.$axios
.get(url, { .get(url)
responseType: 'arraybuffer' .then((res) => {
})
.then((res, resHeader) => {
return { return {
data: ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))), data: ('data:image/jpeg;base64,' + res.data),
header: resHeader
} }
}) })
.then(data => { .then(data => {
@@ -2038,7 +2032,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.el-dropdown-menu { .el-dropdown-menu {
.project-topology-add-node { .project-topology-add-node {
.el-collapse-item__header { .el-collapse-item__header {
padding: 0 10px; padding: 0 10px;
@@ -2180,10 +2174,10 @@ export default {
.avatar-uploader:active .el-upload--picture-card:hover, .avatar-uploader:active .el-upload:focus { .avatar-uploader:active .el-upload--picture-card:hover, .avatar-uploader:active .el-upload:focus {
color: #DB8B8B; color: #DB8B8B;
} }
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.project-box{ .project-box{
@keyframes model-error-animation { @keyframes model-error-animation {
0% { 0% {
transform: scale(0.7); transform: scale(0.7);
@@ -2452,13 +2446,13 @@ export default {
.align--center{ .align--center{
text-align: center; text-align: center;
} }
} }
.project-topology-tool { .project-topology-tool {
display: inline-flex; display: inline-flex;
height: 30px; height: 30px;
} }
.el-dropdown-title { .el-dropdown-title {
background: #FFFFFF; background: #FFFFFF;
border: 1px solid $--primary-border-color; border: 1px solid $--primary-border-color;
border-radius: 2px; border-radius: 2px;
@@ -2470,12 +2464,10 @@ export default {
.icon-cube { .icon-cube {
margin-left: 15px; margin-left: 15px;
} }
} }
.project-box { .project-box {
width: 100%; width: 100%;
height: calc(100% - 20px);
margin-top: 10px;
position: relative; position: relative;
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
@@ -2499,18 +2491,22 @@ export default {
left: 10px; left: 10px;
bottom: 10px; bottom: 10px;
} }
} }
.page { .page {
display: flex; display: flex;
height: calc(100% - 1px);
width: 100%;
/*
height: calc(100% - 65px); height: calc(100% - 65px);
width: calc(100% - 10px); width: calc(100% - 10px);
margin: 5px; margin: 5px;
*/
position: relative; position: relative;
.tools { .tools {
width: 300px; width: 300px;
height: 100%; height: calc(100% - 1px);
border: none; border: none;
position: absolute; position: absolute;
z-index: 1 !important; z-index: 1 !important;
@@ -2539,49 +2535,49 @@ export default {
box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09); box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
border-radius: 0px; border-radius: 0px;
} }
} }
.overview-page{ .overview-page{
height: 100%; height: 100%;
} }
.special-select svg { .special-select svg {
width: 75px; width: 75px;
height: 30px; height: 30px;
} }
.special-select .el-select.el-select--small { .special-select .el-select.el-select--small {
width: 100%; width: 100%;
} }
.special-select /deep/ .el-select-dropdown { .special-select /deep/ .el-select-dropdown {
width: 130px !important; width: 130px !important;
.el-select-dropdown__item { .el-select-dropdown__item {
padding: 0 0 0 10px; padding: 0 0 0 10px;
} }
} }
.special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix { .special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;
height: 28px; height: 28px;
} }
.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner { .special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
display: none; display: none;
} }
.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix { .special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
color: #899FB7; color: #899FB7;
width: 100%; width: 100%;
} }
.special-select /deep/ .el-input__prefix > div { .special-select /deep/ .el-input__prefix > div {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.upload-pic-row{ .upload-pic-row{
width: 420px; width: 420px;
margin-bottom: 10px; margin-bottom: 10px;
.upload-pic-label{ .upload-pic-label{
@@ -2600,8 +2596,8 @@ export default {
width: 100%; width: 100%;
} }
} }
} }
.upload-pic-box{ .upload-pic-box{
width: 284px; width: 284px;
height: 30px; height: 30px;
text-align: center; text-align: center;
@@ -2613,8 +2609,8 @@ export default {
.el-icon-plus{ .el-icon-plus{
color: #FA901C; color: #FA901C;
} }
} }
.top-tool-btn{ .top-tool-btn{
height: 32px; height: 32px;
width: 32px; width: 32px;
border: 1px solid $--primary-border-color; border: 1px solid $--primary-border-color;
@@ -2624,15 +2620,36 @@ export default {
-webkit-transition: background-color linear .1s; -webkit-transition: background-color linear .1s;
transition: background-color linear .1s; transition: background-color linear .1s;
padding: 0; padding: 0;
} }
.top-tool-btn:hover{ .top-tool-btn:hover{
background-color: #fff; background-color: #fff;
} }
.top-tool-btn:focus{ .top-tool-btn:focus{
background-color: #fff; background-color: #fff;
border-color: #FBCEA4; border-color: #FBCEA4;
} }
.top-tool-btn:focus .nz-icon{ .top-tool-btn:focus .nz-icon{
color: #FBCEA4; 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;
}
}
</style> </style>

6
nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
View File

@@ -851,7 +851,7 @@ export default {
width: 37.5%; width: 37.5%;
margin-right: 2%; margin-right: 2%;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #E7EAED; border: 1px solid $--right-box-border-color;
border-radius: 2px; border-radius: 2px;
position: relative; position: relative;
} }
@@ -875,7 +875,7 @@ export default {
width: 100%; width: 100%;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #E7EAED; border: 1px solid $--right-box-border-color;
border-radius: 2px; border-radius: 2px;
} }
/* end--table*/ /* end--table*/
@@ -884,7 +884,7 @@ export default {
.search-box{ .search-box{
width: calc(100% - 10px); width: calc(100% - 10px);
padding: 10px 5px; padding: 10px 5px;
border-bottom: 1px solid #E7EAED; border-bottom: 1px solid $--right-box-border-color;
display: flex; display: flex;
} }
/deep/ .new-search .search-input-all{ /deep/ .new-search .search-input-all{

8
nezha-fronted/src/components/common/table/nzDataList.vue
View File

@@ -5,7 +5,7 @@
<!-- 顶部工具栏 --> <!-- 顶部工具栏 -->
<div class="main-modal"></div> <div class="main-modal"></div>
<div class="main-container"> <div class="main-container">
<div v-show="bottomBox.mainResizeShow" class="top-tools"> <div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'padding-right: 5px' : ''" class="top-tools">
<div class="top-tool-left" style="min-width: 300px"> <div class="top-tool-left" style="min-width: 300px">
<slot name="top-tool-left"></slot> <slot name="top-tool-left"></slot>
</div> </div>
@@ -25,10 +25,10 @@
<div v-if="showLayout.indexOf('clickSearch') > -1" class="search-box"> <div v-if="showLayout.indexOf('clickSearch') > -1" class="search-box">
<slot name="search"></slot> <slot name="search"></slot>
</div> </div>
<div v-show="bottomBox.mainResizeShow" class="nz-table2"> <div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'padding-right: 5px' : ''" class="nz-table2">
<slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot> <slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
</div> </div>
<div v-show="bottomBox.mainResizeShow" class="pagination-bottom"> <div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'width: calc(100% - 15px);bottom: 18px' : ''" class="pagination-bottom">
<slot name="pagination"></slot> <slot name="pagination"></slot>
</div> </div>
</div> </div>
@@ -62,6 +62,7 @@
</template> </template>
<script> <script>
import { fromRoute } from '@/components/common/js/constants'
import bottomBox from '@/components/common/bottomBox/bottomBox' import bottomBox from '@/components/common/bottomBox/bottomBox'
import { bottomBoxWindow } from '@/components/common/js/tools' import { bottomBoxWindow } from '@/components/common/js/tools'
@@ -91,6 +92,7 @@ export default {
}, },
data () { data () {
return { return {
fromRoute: fromRoute,
/* 二级页面相关 */ /* 二级页面相关 */
bottomBox: { bottomBox: {
object: {}, object: {},

3
nezha-fronted/src/components/common/table/settings/operationLogTable.vue
View File

@@ -126,9 +126,6 @@ export default {
return '-' return '-'
} }
} }
},
mounted () {
console.info(this.customTableTitle)
} }
} }
</script> </script>

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

@@ -4,6 +4,7 @@
ref="dataTable" ref="dataTable"
:data="tableData" :data="tableData"
:height="height" :height="height"
style="width: calc(100% - 25px)"
border border
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"

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

@@ -549,13 +549,6 @@ export default {
} }
} }
}, },
getUserData () {
this.$get('sys/user/list').then(response => {
if (response.code === 200) {
this.userData = response.data.list
}
})
},
// 刷新拓扑图 // 刷新拓扑图
visNetworkReload () { visNetworkReload () {
this.$refs.facade.$refs.visNetwork.reload() this.$refs.facade.$refs.visNetwork.reload()
@@ -617,7 +610,6 @@ export default {
if (pageSize) { if (pageSize) {
this.endpointPageObj.pageSize = pageSize this.endpointPageObj.pageSize = pageSize
} }
this.getUserData()
}, },
mounted () { mounted () {
// 初始化表头 // 初始化表头

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

@@ -23,9 +23,10 @@
v-loading="slotProps.loading" v-loading="slotProps.loading"
:api="url" :api="url"
:custom-table-title="tools.customTableTitle" :custom-table-title="tools.customTableTitle"
:height="mainTableHeight" :height="projectTableHeight"
:table-data="tableData" :table-data="tableData"
:tableId="tableId" :tableId="tableId"
style="padding-right: 0"
@del="del" @del="del"
@edit="edit" @edit="edit"
@orderBy="tableDataSort" @orderBy="tableDataSort"
@@ -35,7 +36,8 @@
</template> </template>
<template v-slot:pagination> <template v-slot:pagination>
<div class="project-page"> <div class="project-page">
<Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination> <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" style="width: calc(100% - 15px);padding-bottom: 6px;" @pageNo='pageNo'
@pageSize='pageSize'></Pagination>
</div> </div>
</template> </template>
</nz-data-list> </nz-data-list>
@@ -68,6 +70,7 @@ export default {
name: '', name: '',
remark: '' remark: ''
}, },
projectTableHeight: 'calc(100% - 58px)',
tableId: 'projectTable', tableId: 'projectTable',
queryPermission: 'account_view', queryPermission: 'account_view',
searchMsg: { // 给搜索框子组件传递的信息 searchMsg: { // 给搜索框子组件传递的信息
@@ -140,8 +143,8 @@ export default {
<style lang="scss"> <style lang="scss">
.project-list{ .project-list{
.project-page{ .project-page{
margin: 0 10px 0 20px; margin: 0 0 0 20px;
border: 1px solid #eeeeee; border: 1px solid $--right-box-border-color;
border-top: none; border-top: none;
/deep/ .pagination{ /deep/ .pagination{
padding-top: 0; padding-top: 0;