From c8ebbae234cb1054e37610273961acc8a23d609a Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 13 May 2020 19:10:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B2=A1=E6=9C=89=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=97=B6panel=E3=80=81module=E3=80=81project=E3=80=81asset?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |   3 +
 .../src/components/common/header.vue          |  50 +++++---
 .../src/components/page/dashboard/panel.vue   | 120 ++++++++----------
 .../src/components/page/project/project.vue   |  32 +++--
 4 files changed, 112 insertions(+), 93 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index c49751808..b9dc2d05a 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -469,6 +469,9 @@ li{
   margin: 0 0 12px;
   display: block;
 }
+.content-left .sidebar-info-item-add {
+  padding-left: calc(50% - 14px);
+}
 .content-left .sidebar-info-item.el-checkbox {
   padding: 0;
 }
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index be6a8972c..751dae51b 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -15,9 +15,9 @@
       </el-menu-item>
       <el-submenu index="0" popper-class="nz-submenu" class="icon-menu-item">
         <template slot="title">
-            <div class="menu-icon-create ">
-             <i class="nz-icon-create-square nz-icon" ></i>
-            </div>
+          <div class="menu-icon-create ">
+           <i class="nz-icon-create-square nz-icon" ></i>
+          </div>
         </template>
         <template v-for="(item, index) in createMenu">
           <el-menu-item :index="'0-' + index">
@@ -49,29 +49,35 @@
 
       <el-submenu index="2" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpToProject(projectData[0], 0)" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
+          <div v-if="projectData.length == 0">{{$t('overall.project')}}</div>
+          <div v-else @click="jumpToProject(projectData[0], 0)" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
         </template>
-        <template v-for="(item, index) in projectData">
-          <el-menu-item :index="'2-' + index">
-<!--            <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item.id)}">-->
-            <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" >
-              <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
-              <div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="nz-icon nz-icon-edit"></i></div>
-            </div>
-          </el-menu-item>
+        <template>
+          <el-menu-item v-if="projectData.length == 0" index="2-0"><span @click="createBox({type: 1})" class="header-dropdown-add"><i class="nz-icon nz-icon-create-square"></i></span></el-menu-item>
+          <template v-else>
+            <el-menu-item :index="'2-' + index" v-for="(item, index) in projectData">
+              <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" >
+                <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
+                <div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="nz-icon nz-icon-edit"></i></div>
+              </div>
+            </el-menu-item>
+          </template>
         </template>
       </el-submenu>
       <el-submenu index="3" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('asset')" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
+          <div v-if="projectData.length == 0">{{$t('overall.asset')}}</div>
+          <div v-else @click="jumpTo('asset')" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
         </template>
-        <template v-for="(item, index) in assetData">
-          <el-menu-item :index="'3-' + index">
-<!--            <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">-->
-            <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
-              <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
-            </div>
-          </el-menu-item>
+        <template>
+          <el-menu-item v-if="assetData.length == 0" index="3-0"><span @click="createBox({type: 4})" class="header-dropdown-add"><i class="nz-icon nz-icon-create-square"></i></span></el-menu-item>
+          <template v-else>
+            <el-menu-item :index="'3-' + index" v-for="(item, index) in assetData">
+              <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
+                <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
+              </div>
+            </el-menu-item>
+          </template>
         </template>
       </el-submenu>
       <el-submenu index="4-0" popper-class="nz-submenu">
@@ -599,6 +605,10 @@
     min-width: 50px !important;
     /*margin-right:20px;*/
   }
+  .header-dropdown-add {
+    display: block;
+    text-align: center;
+  }
   .header .vertical-line{
     display:inline-block;
     border-left:solid 1px white;
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index b626f5b1b..babacab76 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -11,76 +11,68 @@
     </div>
     <div slot="content-right" class="slot-content">
       <div class="top-tools">
-        <div class="top-tool-main-left">
-          <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown>
-            <el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="">
-              <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
-              <el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
-            </el-row>
-            <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
-              <el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
-              <el-dropdown-item v-for="item in panelData" :key="item.id+1"
-                                :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
-                <!--{{item.name}}-->
-                <el-row  :gutter="10" class="panel-list-width" >
-                  <el-col :span="19" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
-                  <el-col :span="2"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
-                  <el-col :span="1">&nbsp;</el-col>
-                  <el-col :span="2"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
-                </el-row>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+        <div class="top-tool-main-left" v-if="panelData.length == 0" style="margin-left: 10px;">
+          <button @click="toAdd" class="nz-btn nz-btn-style-light nz-btn-size-small">{{$t("dashboard.panel.createPanelTitleSec")}}</button>
         </div>
-        <div class="top-tool-main-right">
-          <div class="top-tool-search relative-position margin-r-20">
-            <el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >
-              <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
-            </el-input>
+        <template v-else>
+          <div class="top-tool-main-left">
+            <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown>
+              <el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="">
+                <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
+                <el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
+              </el-row>
+              <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
+                <el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
+                <el-dropdown-item v-for="item in panelData" :key="item.id+1"
+                                  :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
+                  <!--{{item.name}}-->
+                  <el-row  :gutter="10" class="panel-list-width" >
+                    <el-col :span="19" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
+                    <el-col :span="2"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
+                    <el-col :span="1">&nbsp;</el-col>
+                    <el-col :span="2"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
+                  </el-row>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </div>
-
-          <div class="panel-calendar margin-r-20">
-            <div class="block">
-              <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
-              <!--
-<el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
-                              format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
-                              :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
-                              :start-placeholder="$t('dashboard.panel.startTime')"
-                              :end-placeholder="$t('dashboard.panel.endTime')" align="right">
-              </el-date-picker>
-              -->
+          <div class="top-tool-main-right">
+            <div class="top-tool-search relative-position margin-r-20">
+              <el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >
+                <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
+              </el-input>
             </div>
-          </div>
 
-          <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
-            <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
-              <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
-            </button><el-popover
-            v-model="visible" placement="bottom-start" width="200" trigger="click">
-            <ul class="popover_ul">
-              <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
-                  @click="selectInterval(i.value)">
-                {{i.name}}
-              </li>
-            </ul>
-            <button type="button" style="border-radius: 0 4px 4px 0"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
-              <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
+            <div class="panel-calendar margin-r-20">
+              <div class="block">
+                <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
+              </div>
+            </div>
+
+            <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
+              <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
+                      class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
+                <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
+              </button><el-popover
+              v-model="visible" placement="bottom-start" width="200" trigger="click">
+              <ul class="popover_ul">
+                <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
+                    @click="selectInterval(i.value)">
+                  {{i.name}}
+                </li>
+              </ul>
+              <button type="button" style="border-radius: 0 4px 4px 0"
+                      class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
+                <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
+              </button>
+            </el-popover>
+            </div>
+            <button @click="toAddChart" :title="$t('overall.createChart')"
+                    class="nz-btn nz-btn-size-normal nz-btn-style-light ">
+              <i class="nz-icon-create-square nz-icon"></i>
             </button>
-          </el-popover>
           </div>
-          <!-- 2020-02-14 使用普通搜索框-->
-          <!--          <div class="top-tool-search">-->
-          <!--            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>-->
-          <!--          </div>-->
-
-          <button @click="toAddChart" :title="$t('overall.createChart')"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light ">
-            <i class="nz-icon-create-square nz-icon"></i>
-          </button>
-        </div>
+        </template>
       </div>
       <div class="table-list" id="tableList">
         <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 5e9fb4c36..9758d5501 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -58,15 +58,20 @@
               </div>
             </template>
             <div class="sidebar-info sub-sidebar-info" >
-              <div v-for="module in getProjectModule(item.id)" class="sidebar-info-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(module)" :id="'project-module-'+module.id">
-                <div class="sidebar-info-item-txt">
-                  <el-popover v-if="module.name.length > 16" trigger="hover" placement="top-start" :content="module.name" >
-                    <span slot="reference">{{module.name}}</span>
-                  </el-popover>
-                  <span v-else>{{module.name}}</span>
-                </div>
-                <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="toEditModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
+              <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="toAddModule">
+                <i class="nz-icon nz-icon-create-square"></i>
               </div>
+              <template v-else>
+                <div v-for="module in getProjectModule(item.id)" class="sidebar-info-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(module)" :id="'project-module-'+module.id">
+                  <div class="sidebar-info-item-txt">
+                    <el-popover v-if="module.name.length > 16" trigger="hover" placement="top-start" :content="module.name" >
+                      <span slot="reference">{{module.name}}</span>
+                    </el-popover>
+                    <span v-else>{{module.name}}</span>
+                  </div>
+                  <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="toEditModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
+                </div>
+              </template>
             </div>
           </el-collapse-item>
         </el-collapse>
@@ -446,6 +451,7 @@
         })
       },
       getProjectModule:function(projectId){
+        //return [];
         let moduleList=Object.assign([],this.moduleList);
         return moduleList.filter((item,index)=>{
           return item.project.id==projectId;
@@ -570,6 +576,13 @@
           this.$refs.moduleBox.initWalk();
         });
       },
+      toAddModule() {
+        this.editModule = {id: '', type: '', name: '', project: this.currentProject, port: '', path: '', param: '', paramObj: [], snmpParam: ''};
+        this.rightBoxHandler(2);
+        this.$nextTick(() => {
+          this.$refs.moduleBox.initWalk();
+        });
+      },
 
       //asset弹框控制
       /*tabControl(data) {
@@ -1042,7 +1055,8 @@
   /* end--子弹框*/
   .sub-sidebar-info{
     padding-top: 0px !important;
-    margin-left: 10px;
+    padding-left: 10px;
+    box-sizing: border-box;
   }
   .sub-side-bar-menu-edit{
     margin-right: 18px;