feat: asset/project的panel

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -39,7 +39,8 @@
       </template>
 
       <!-- model-panel/asset-detail/project-overview的panel-->
-      <panel-tab v-if="from == 'model' && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"></panel-tab>
+      <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
+                 @changeTab="changeTab" :targetTab.sync="targetTab"></panel-tab>
 
     </div>
   </span>

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue

@@ -3,10 +3,10 @@
     <div class="sub-top-tools">
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">
-          <template v-if="from == 'asset'">{{$t("project.endpoint.asset")}}：{{obj.host}}</template>
+          <template v-if="from == 'asset'">{{obj.host}}</template>
-          <template v-if="from == 'alertRule'">{{$t("alert.alertName")}}：{{obj.alertName}}</template>
+          <template v-if="from == 'alertRule'">{{obj.alertName}}</template>
         </div><div
-        class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
+        class="sub-list-tab" @click="changeTab(from == 'asset' ? 'panel' : 'detail')">{{$t("overall.detail")}}</div><div
         class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.alerts")}}</div><div v-if="from == 'asset'"
         class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
       </div>

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -108,7 +108,7 @@
       <chart ref="endpointChart" :unit="chartUnit"></chart>
     </el-dialog>
 
-    <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData"></chart-box>
+    <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData" :show-panel="{}"></chart-box>
   </span>
 </template>
 

nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue

@@ -2,8 +2,8 @@
   <span>
     <div class="sub-top-tools">
       <div class="sub-list-tabs">
-        <div class="sub-list-tab-title">{{$t("project.endpoint.asset")}}：{{obj.host}}</div><div
+        <div class="sub-list-tab-title">{{obj.host}}</div><div
-        class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
+        class="sub-list-tab" @click="changeTab('panel')">{{$t("overall.detail")}}</div><div
         class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div><div
         class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.modules")}}</div>
       </div>

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -1,10 +1,16 @@
 <template>
-  <div class="panel sub-list">
+  <div class="panel" :class="{'sub-list': from != 'project'}">
-    <div class="sub-top-tools">
+    <!--model和asset的工具栏-->
+    <div class="sub-top-tools" v-if="from != 'project'">
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">
           <template v-if="from == 'model'">{{obj.name}}</template>
-        </div><div class="sub-list-tab">{{$t("dashboard.panel.title")}}</div>
+          <template v-else-if="from == 'asset'">{{obj.host}}</template>
+        </div><div class="sub-list-tab sub-list-tab-active" v-if="from == 'model'">{{$t("dashboard.panel.title")}}</div><template v-if="from == 'asset'"><div
+          class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
+          class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div><div
+          class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
+        </template>
       </div>
       <div class="top-tool-right">
         <div class="top-tool-search margin-r-20">
@@ -39,6 +45,48 @@
         </button>
       </div>
     </div>
+
+    <!--project的工具栏-->
+    <div class="top-tools" v-else>
+      <div class="top-tool-main-right">
+        <div class="top-tool-search relative-position margin-r-20">
+          <el-input ref="queryPanel" @clear="clearInput" id="queryPanel2" @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 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>
+      </div>
+    </div>
+
+    <!--图表-->
     <div class="table-list" id="tableList">
       <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
         <div class="box-content">
@@ -137,7 +185,7 @@
         },
         showPanel: {
           name: '',
-          type: 'model',
+          type: this.from,
           id: ''
         },
         panelId: 0,
@@ -170,6 +218,10 @@
         this.$refs.addChartModal.show(true);
         this.$refs.addChartModal.createData(this.panelId); //初始化创建图表需要的初始数据
       },
+      // 切换tab
+      changeTab(tab) {
+        this.$emit('changeTab', tab);
+      },
       scrollbarHeightHandler() {
         setTimeout(() => {
           let top = '';

nezha-fronted/src/components/common/language/cn.js

@@ -115,6 +115,7 @@ const cn = {
         type: "类型",
         url: "URL",
         statistics:'Statistics',
+        sync: '同步到设备',
         typeVal: {
           line: {
             label: "曲线图"

nezha-fronted/src/components/common/language/en.js

@@ -126,6 +126,7 @@ const en = {
         legend:'Legend',
         statistics:'Statistics',
         legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
+        sync: 'Sync to assets',
         typeVal:{
           line:{
             label:'Line Chart' //"曲线图"

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

@@ -247,6 +247,7 @@
         endpointTouch: false,
         endpointForm: {projectId: '', moduleId: '', endpointList: []},
         currentModuleCopy: {},
+        currentProjectCopy: {id: ''},
         tempParamObj: [],
         tempEndpoint: {},
         tempEndpoint2: {},

nezha-fronted/src/components/page/alert/list.vue

@@ -292,6 +292,7 @@
             label: this.$t("alert.list.labels"),
             prop: 'labels',
             show: true,
+            width: 200
           }, {
             label: this.$t("alert.severity"),
             prop: 'severity',

nezha-fronted/src/components/page/asset/asset.vue

@@ -796,7 +796,7 @@
         }
         if (data === 'showView') {
           this.alertMsgAsset = Object.assign({}, id);
-          this.targetTab = "detail";
+          this.targetTab = "panel";
           this.showSubList = true;
           /*this.editUnitShow = true
           this.$refs['assetEditUnit'].getAssetData(id)

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -74,7 +74,7 @@
         <!-- begin--表单-->
         <el-scrollbar class="right-box-form-box" ref="scrollbar">
           <el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
-            <el-form-item :label="$t('dashboard.panel.title')" prop="panel" v-if="showPanel.type != 'model'">
+            <el-form-item :label="$t('dashboard.panel.title')" prop="panel" v-if="!showPanel.type">
               <el-autocomplete
                 :fetch-suggestions="panelSuggestion"
                 v-model.trim="panelName2"
@@ -186,7 +186,9 @@
             <el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }">
               <el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="chart.param.url"></el-input>
             </el-form-item>
-
+            <el-form-item :label="$t('dashboard.panel.chartForm.sync')" v-if="showPanel.type && showPanel.type == 'model'">
+              <el-switch class="exporter-switch" v-model="chart.sync" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
             <div v-if="!isUrl" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
             <div v-if="!isUrl" class="line-100"></div>
 
@@ -236,7 +238,6 @@
             <button v-if="!isUrl && !isSingleStat" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
               <span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
             </button>
-
           </el-form>
         </el-scrollbar>
 
@@ -268,7 +269,7 @@
     name: "chartBox",
     props: {
       panelData: Array,
-      showPanel:{}
+      showPanel: Object
     },
     data() {
       return {
@@ -293,7 +294,8 @@
             type: '',
             legend:'',
           },
-          panel: ''
+          panel: '',
+          sync: 0
         },
         isUrl:false,
         isSingleStat:false,
@@ -572,7 +574,7 @@
       addCharts(params) {
         let panelId;
         //先处理panel
-        if (this.showPanel.type == 'model') {
+        if (this.showPanel.type) {
           panelId = this.panelData[0].id;
         } else {
           panelId = this.autocompleteExist(this.panelName2);
@@ -655,8 +657,9 @@
               type: this.chart.type,
               unit:this.chart.unit,
               param:{
-              statistics:target.statistics
+                statistics:target.statistics
-              }
+              },
+              sync: this.chart.sync
             };
 
             //生成指标数组
@@ -1020,7 +1023,7 @@
         deep: true,
         immediate: true,
         handler(n, o) {
-          if (this.showPanel.type != 'model') {
+          if (!this.showPanel.type) {
             if (this.selectFirstPanel) {
               this.selectFirstPanel = false;
               this.panelId = n[0].id;

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

@@ -174,11 +174,9 @@
                   :from="'endpoint'" :targetTab.sync="targetTab" :detail="endpointDetail" :obj="curEndpoint" :assetDetail="assetDetail"
                   @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
     </div>
-      <div slot="content-right" class="slot-content" v-show="pageType == 'project'">
+    <div slot="content-right" class="slot-content" v-show="pageType == 'project'">
-        <div style="height: 100%;width:100%;position: relative;">
+      <panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>
-          <div style="position: absolute;top: 50%;left: 50%;">come soon</div>
+    </div>
-        </div>
-      </div>
     </left-menu>
 
     <element-set
@@ -202,6 +200,7 @@
   import loading from "../../common/loading";
   import chartDataFormat from "../../charts/chartDataFormat";
   import bus from '../../../libs/bus'
+  import panelTab from '../../common/bottomBox/tabs/panelTab'
 
   var vm;
   export default {
@@ -209,6 +208,7 @@
     components: {
       'export-excel':exportXLSX,
       'loading': loading,
+      'panel-tab': panelTab
     },
     data() {
       vm = this;
@@ -469,7 +469,7 @@
         // }
       },
       detailProjectInfo:function(event,project){
-        this.pageType='project'
+        this.pageType = 'project';
         if(event){
           if(project){
             this.currentProject=project;