perf: project样式调整

nezha-fronted/src/assets/css/common/tableCommon.scss

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

nezha-fronted/src/assets/css/theme.scss

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

nezha-fronted/src/assets/stylus/main.scss

@@ -2073,27 +2073,6 @@ li{
   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{
   font-size: 14px;
 }

nezha-fronted/src/components/common/labelFilter/clickSearch.vue

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

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -4,9 +4,9 @@
 </style>
 <template>
   <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">
           <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
@@ -110,19 +110,9 @@
            </button>
          </span>
         </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>
-        <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
               v-show="!editTopologyFlag"
               ref="pickTime"
@@ -130,38 +120,52 @@
               :refresh-data-func="dateChange"
               :showTimePicker="false"
               :use-chart-unit="false"
-            class="float-right pickTime top-tool-btn-group">
+              class="pickTime margin-r-10">
             </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 :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"
-                     @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 :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>
             <!--节点连线相关的 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"
+                 :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"
@@ -322,10 +324,6 @@
       </div>
 
     </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>
 </template>
 
@@ -1549,7 +1547,6 @@ export default {
     upload () {
       const form = new FormData()
       form.append('file', this.file)
-      console.log(this.file)
       if (this.uploadPic.name) {
         form.append('name', this.uploadPic.name)
       } else {
@@ -1562,7 +1559,7 @@ export default {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           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)
             if (group) {
               group.children.push({
@@ -1618,7 +1615,7 @@ export default {
           res.data.list.forEach((item, index) => {
             item.imageName = 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 })
           })
           Promise.all(promiseArr).then((res2,header) => {
@@ -1662,7 +1659,7 @@ export default {
         const promiseArr = []
         imgidList.forEach((item, index) => {
           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 {
             promiseArr.push('')
           }
@@ -1688,13 +1685,10 @@ export default {
       if (url) {
         return new Promise((resolve, reject) => {
           this.$axios
-            .get(url, {
+            .get(url)
-              responseType: 'arraybuffer'
+            .then((res) => {
-            })
-            .then((res, resHeader) => {
               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 => {
@@ -2474,8 +2468,6 @@ export default {
 
   .project-box {
     width: 100%;
-  height: calc(100% - 20px);
-  margin-top: 10px;
     position: relative;
     border-radius: 2px;
     overflow: hidden;
@@ -2503,14 +2495,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;
@@ -2635,4 +2631,25 @@ 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;
+    }
+  }
 </style>

nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue

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

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -5,7 +5,7 @@
       <!-- 顶部工具栏 -->
       <div class="main-modal"></div>
       <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">
             <slot name="top-tool-left"></slot>
           </div>
@@ -25,10 +25,10 @@
         <div v-if="showLayout.indexOf('clickSearch') > -1" class="search-box">
           <slot name="search"></slot>
         </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>
         </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>
         </div>
       </div>
@@ -62,6 +62,7 @@
 </template>
 
 <script>
+import { fromRoute } from '@/components/common/js/constants'
 import bottomBox from '@/components/common/bottomBox/bottomBox'
 import { bottomBoxWindow } from '@/components/common/js/tools'
 
@@ -91,6 +92,7 @@ export default {
   },
   data () {
     return {
+      fromRoute: fromRoute,
       /* 二级页面相关 */
       bottomBox: {
         object: {},

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

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

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

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

nezha-fronted/src/components/page/monitor/project/project.vue

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

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

@@ -23,9 +23,10 @@
           v-loading="slotProps.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
+          :height="projectTableHeight"
           :table-data="tableData"
           :tableId="tableId"
+          style="padding-right: 0"
           @del="del"
           @edit="edit"
           @orderBy="tableDataSort"
@@ -35,7 +36,8 @@
       </template>
       <template v-slot:pagination>
         <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>
       </template>
     </nz-data-list>
@@ -68,6 +70,7 @@ export default {
         name: '',
         remark: ''
       },
+      projectTableHeight: 'calc(100% - 58px)',
       tableId: 'projectTable',
       queryPermission: 'account_view',
       searchMsg: { // 给搜索框子组件传递的信息
@@ -140,8 +143,8 @@ export default {
 <style lang="scss">
   .project-list{
     .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;
       /deep/ .pagination{
         padding-top: 0;