From 0d9abacf882a5da9e1200c5539f4bed422d95871 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Thu, 26 Dec 2019 13:00:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD=201.D?=
 =?UTF-8?q?ashboard=E4=B8=8B=E5=A2=9E=E5=8A=A0=E5=AD=90=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=EF=BC=9APanel=E3=80=81MetricPreview=202.Panel=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E4=B8=8B=E5=AE=8C=E6=88=90=E4=BB=A5=E4=B8=8B=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20=20=20=20=EF=BC=881=EF=BC=89panel=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E4=B8=AD=E7=9A=84=E6=96=B0=E5=A2=9E=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20=20=20=20=EF=BC=882=EF=BC=89panel=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E4=B8=AD=E5=AF=B9=E5=BA=94=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E7=9A=84=E5=88=A0=E9=99=A4=E5=92=8C=E4=BF=AE=E6=94=B9=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20=20=20=20=EF=BC=883=EF=BC=89Add=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=9A=84=E6=96=B0=E5=A2=9Epanel=E5=8A=9F=E8=83=BD=203.MetricPr?=
 =?UTF-8?q?eview=E8=8F=9C=E5=8D=95=E5=AE=8C=E6=88=90=E4=BA=86=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E5=88=97=E8=A1=A8=E7=9A=84=E8=B7=B3=E8=BD=AC=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/main.css         |   2 +-
 .../src/components/common/header.vue          |  16 +-
 .../src/components/common/language/cn.js      |  17 +
 .../src/components/common/language/en.js      |  18 +
 .../page/dashboard/metricPreview.vue          |  49 +++
 .../src/components/page/dashboard/panel.vue   | 318 ++++++++++++++++++
 nezha-fronted/src/router/index.js             |   8 +
 7 files changed, 422 insertions(+), 6 deletions(-)
 create mode 100644 nezha-fronted/src/components/page/dashboard/metricPreview.vue
 create mode 100644 nezha-fronted/src/components/page/dashboard/panel.vue

diff --git a/nezha-fronted/src/assets/css/main.css b/nezha-fronted/src/assets/css/main.css
index 11deb373c..a4c25ba6a 100644
--- a/nezha-fronted/src/assets/css/main.css
+++ b/nezha-fronted/src/assets/css/main.css
@@ -267,7 +267,7 @@ html {
 }
 
   /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
-.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint {
+.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint ,.right-box-panel {
   width: 520px;
   height: calc(100% - 100px);
 }
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index d37a91dfe..dd65b80bb 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -23,11 +23,17 @@
                         </el-menu-item>
                     </template>
                 </el-submenu>
-                <el-menu-item index="1" @click="jumpTo('dashboard')">
-                    <div>
-                        {{$t('overall.dashboard')}}
-                    </div>
-                </el-menu-item>
+                <el-submenu index="1"  popper-class="nz-submenu">
+                    <template slot="title">
+                      <div @click="jumpTo('dashboard')">{{$t('overall.dashboard')}}</div>
+                    </template>
+                    <el-menu-item index="1-0">
+                      <div @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
+                    </el-menu-item>
+                    <el-menu-item index="1-1">
+                      <div @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
+                    </el-menu-item>
+                </el-submenu>
                 <el-submenu index="2" popper-class="nz-submenu">
                     <template slot="title">
                         <div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 8396fba6c..92533f849 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -16,6 +16,23 @@ const cn = {
     add: '新增',
     option: "操作"
   },
+  dashboard:{
+    title:'仪表盘',
+    panel:{
+      title:'看板',
+      //侧滑框
+      createPanelTitle: "创建面板",
+      createPanelTitleSec:"创建新面板",
+      editPanelTitle: "编辑面板",
+      panelForm:{
+        panelName:"面板名称" ,
+        panelId:"ID"
+      }
+    },
+    metricPreview:{
+      title:'指标预览',
+    }
+  },
   asset: {
     tableTitle: {
       id: 'ID',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 99b1425e3..2067495b1 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -21,6 +21,24 @@ const en = {
     cover: 'Cover',
     signOut: 'Sign Out'
   },
+  dashboard:{
+    title:'Dashboard',
+    panel:{
+      title:'Panel',
+      //侧滑框
+      createPanelTitle: "Create Panel",
+      createPanelTitleSec:"Create New Panel",
+      editPanelTitle: "Panel",
+      panelForm:{
+        panelName:"Panel Name",
+        panelId:"ID"
+      }
+    },
+    metricPreview:{
+      title:'MetricPreview',
+    }
+  },
+
   search: {
     searchTip: 'Press Enter or click to search',
     recentSearch: 'Recent Searches',
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
new file mode 100644
index 000000000..9f1ac12fa
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -0,0 +1,49 @@
+<style scoped>
+  .metricPreview {
+    height: 100%;
+  }
+</style>
+<template>
+    <div class="metricPreview">
+        <div class="content-left">
+            <div class="sidebar-title">{{$t('dashboard.title')}}</div>
+            <div class="sidebar-info">
+                <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
+                <div class="sidebar-info-item sidebar-info-item-active">{{$t('dashboard.metricPreview.title')}}</div>
+            </div>
+        </div>
+        <div class="content-right">
+
+        </div>
+
+    </div>
+
+</template>
+<script>
+export default {
+  name: "metricPreview",
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    jumpTo(data,id) {
+      this.$store.state.assetData.moduleData = data;
+      this.$store.state.assetData.selectedData = id;
+      this.$router.push({
+        path: "/" + data,
+        query: {
+          t: +new Date()
+        }
+      });
+    }
+  },
+  mounted: function() {
+
+  },
+  watch: {
+
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
new file mode 100644
index 000000000..75f773b59
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -0,0 +1,318 @@
+<style scoped>
+  .panel {
+    height: 100%;
+  }
+  .panel .el-table {
+    border-radius: 5px;
+  }
+  .content-right-option {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 6px;
+  }
+  .content-right-option .el-icon-delete {
+    color: #F98D9A;
+  }
+  .content-right-option .el-icon-delete:hover {
+    color: #D96D7A;
+  }
+  .content-right-option .el-icon-view {
+    color: #60BEFF;
+  }
+  .content-right-option .el-icon-view:hover {
+    color: #409EFF;
+  }
+
+  .table-list {
+    margin-top: 100px;
+  }
+
+  /* begin--Panel-自定义可编辑的el-select下拉框样式*/
+  .panel-dropdown-btn {
+    display: inline-block;
+    margin-left: 7px;
+    float: right;
+    color: #60BEFF;
+    font-size: 13px
+  }
+  .panel-dropdown-btn:hover {
+    color: #409EFF;
+  }
+  .panel-dropdown-btn-create {
+    display: inline-block;
+    float: left;
+    font-size: 13px;
+    color: #F98D9A;
+    width:100%;
+  }
+  .panel-dropdown-btn-create:hover {
+    color: #D96D7A;
+  }
+
+  .panel-dropdown-btn-delete {
+    color: #F98D9A;
+    font-size: 13px
+  }
+  .panel-dropdown-btn-delete:hover {
+    color: #D96D7A;
+  }
+  .panel-dropdown-error-message {
+    color: #F98D9A;
+  }
+  /* end--Panel-自定义可编辑的el-select下拉框样式*/
+
+
+</style>
+<template>
+    <div class="panel">
+        <div class="content-left">
+            <div class="sidebar-title">{{$t('dashboard.title')}}</div>
+            <div class="sidebar-info">
+                <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('dashboard.panel.title')}}</div>
+                <div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
+            </div>
+        </div>
+        <div class="content-right">
+            <div class="top-tools">
+              <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
+                <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
+              </button>
+              <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
+              <el-select class="right-box-row-with-btn" popper-class="" v-model="showPanel.id" placeholder=""  size="small">
+                <el-option  >
+                  <span class="panel-dropdown-btn-create" @click.stop="toAdd" >{{$t('dashboard.panel.createPanelTitleSec')}}</span>
+                </el-option>
+                <el-option
+                  @click.native=""
+                  v-for="item in panelData"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                  <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+                  <span class="panel-dropdown-btn" @click.stop="toEdit(item)">
+                                        <i class="el-icon-edit-outline" ></i>
+                                    </span>
+                  <span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span>
+                </el-option>
+              </el-select>
+            </div>
+            <div class="table-list">
+              <!--<div class="box-content">
+                <chart-list
+                  @on-edit-chart="editData"
+                  @on-remove-chart="removeData" ref="chartList"></chart-list>
+              </div>
+              -->
+            </div>
+        </div>
+
+        <transition name="right-box">
+            <div class="right-box right-box-panel" v-if="rightBox.show">
+                <!-- begin--顶部按钮-->
+                <div class="right-box-top-btns">
+                    <div class="right-box-top-btn right-box-top-btn-full" @click="esc">
+                        <div class="right-box-btn-icon">
+                            <i class="el-icon-close"></i>
+                        </div>
+                        <span>{{$t('overall.esc')}}</span>
+                    </div>
+                    <div class="right-box-top-btn right-box-top-btn-full" @click="save">
+                        <div class="right-box-btn-icon">
+                            <i class="el-icon-edit-outline"></i>
+                        </div>
+                        <span >{{$t('overall.save')}}</span>
+                    </div>
+                    <div @click="del(panel)" class="right-box-top-btn" v-if="panel.id != ''">
+                        <div class="right-box-btn-icon">
+                            <i class="el-icon-delete"></i>
+                        </div>
+                        <span>{{$t('overall.delete')}}</span>
+                    </div>
+                </div>
+                <!-- end--顶部按钮-->
+
+                <!-- begin--标题-->
+                <div class="right-box-title">{{rightBox.title}}</div>
+                <!-- end--标题-->
+
+                <!-- begin--表单-->
+                <div class="right-box-form">
+                    <div class="right-box-form-row">
+                        <div class="right-box-form-label">{{$t('dashboard.panel.panelForm.panelName')}}</div>
+                        <div class="right-box-form-content">
+                          <el-input placeholder="" maxlength="64" show-word-limit v-model="panel.name" size="small"></el-input>
+                        </div>
+                    </div>
+                </div>
+                <!-- end--表单-->
+
+                <!-- begin--底部按钮-->
+                <div class="right-box-bottom-btns">
+                    <div @click="esc()" :class="{'right-box-bottom-btn-50': true}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()"  class="right-box-bottom-btn right-box-bottom-btn-50">{{panel.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
+                </div>
+                <!-- end--底部按钮-->
+
+            </div>
+        </transition>
+    </div>
+
+</template>
+<script>
+export default {
+  name: "panel",
+  data() {
+    return {
+      rightBox: { //弹出框相关
+        show: false,
+        title: this.$t('dashboard.panel.createPanelTitle')
+      },
+      showPanel:{//panel下拉列表
+        id:'',
+        name:''
+      },
+      panel: {//新增panel
+        id:'',
+        name: ''
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: 9999,//此处获取所有数据，所以设置一个较大的值
+        total:0
+      },
+      chartsData: [],//中间部分图表相关数据
+      panelData: [],
+      searchMsg: { //给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: this.$t("dashboard.panel.panelForm.panelId"),
+          type: 'input',
+          label: 'id',
+          disabled: false
+        },{
+          id: 2,
+          name: this.$t("dashboard.panel.panelForm.panelName"),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }],
+      },
+      searchLabel: {}, //搜索参数
+    }
+  },
+  methods: {
+    del: function(u) {
+      this.$confirm(this.$t("tip.confirmDelete"), {
+        confirmButtonText: this.$t("tip.yes"),
+        cancelButtonText: this.$t("tip.no"),
+        type: 'warning'
+      }).then(() => {
+        this.$delete("panel?ids=" + u.id).then(response => {
+          if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+            if(this.showPanel.id===u.id){
+              this.showPanel.id ='';
+            }
+            this.getTableData();
+            this.rightBox.show = false;
+          } else {
+            this.$message.error(response.msg);
+          }
+        })
+      });
+    },
+    toEdit: function(u) {
+      this.panel = Object.assign({}, u);
+      this.rightBox.title = this.$t("dashboard.panel.editPanelTitle") ;
+      this.rightBox.show = true;
+    },
+    toAdd: function() {
+      this.cleanPanel();
+      this.rightBox.title = this.$t("dashboard.panel.createPanelTitle");
+      this.rightBox.show = true;
+    },
+    save: function() {
+      if (this.panel.id) {
+        this.$put('panel', this.panel).then(response => {
+          if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            this.getTableData();
+            this.esc();
+          } else {
+            this.$message.error(response.msg);
+          }
+        });
+      } else {
+        this.$post('panel', this.panel).then(response => {
+          if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            this.getTableData();
+            this.esc();
+          } else {
+            this.$message.error(response.msg);
+          }
+        });
+      }
+    },
+    esc: function() {
+      this.rightBox.show = false;
+    },
+    jumpTo(data,id) {
+      this.$store.state.assetData.moduleData = data
+      this.$store.state.assetData.selectedData = id
+      this.$router.push({
+        path: "/" + data,
+        query: {
+          t: +new Date()
+        }
+      });
+    },
+    getTableData: function() {
+      this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+      this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+      this.$get('panel', this.searchLabel).then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list;
+          if( response.data.list.length>0 && this.showPanel.id===''){
+            this.showPanel.id = response.data.list[0].id;
+          }
+          this.pageObj.total = response.data.total
+        }
+      })
+    },
+    cleanPanel: function() {
+      this.panel = {
+        id: '',
+        name: ''
+      }
+    },
+    pageNo(val) {
+      this.pageObj.pageNo = val;
+      this.getTableData();
+    },
+    pageSize(val) {
+      this.pageObj.pageSize = val;
+      this.getTableData();
+    },
+    search: function(searchObj) {
+      console.info(searchObj);
+      this.searchLabel = {};
+      for (let item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item]);
+        }
+      }
+      this.getTableData();
+    }
+  },
+  created() {
+    this.getTableData();
+  },
+  mounted: function() {
+
+  },
+  watch: {
+
+  }
+}
+</script>
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 768a1ec2f..fd5f8ef0a 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -21,6 +21,14 @@ export default new Router({
           path: '/dashboard',
           component: resolve => require(['../components/page/dashboard.vue'], resolve),
         },
+        {
+          path: '/panel',
+          component: resolve => require(['../components/page/dashboard/panel.vue'], resolve),
+        },
+        {
+          path: '/metricPreview',
+          component: resolve => require(['../components/page/dashboard/metricPreview.vue'], resolve),
+        },
         {
           path: '/project',
           component: resolve => require(['../components/page/project/project.vue'], resolve),