From bee01aad49fae946c0ea4935b80d5eb238fd462b Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 19 May 2020 20:26:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20model-panel=EF=BC=88=E6=98=AF=E5=90=A6?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E7=9A=84=E5=BC=80=E5=85=B3=E6=9C=AA=E5=8A=A0?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |   1 -
 .../components/common/bottomBox/bottomBox.vue |   8 +-
 .../common/bottomBox/tabs/panelTab.vue        | 634 ++++++++++++++++++
 .../src/components/page/config/model.vue      | 133 ++--
 .../src/components/page/config/promServer.vue |  11 -
 .../components/page/dashboard/chartBox.vue    |  56 +-
 6 files changed, 756 insertions(+), 87 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 892f191e7..953b21fc6 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -643,7 +643,6 @@ li{
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top: 3px;
   cursor: ns-resize;
 }
 .sub-list-window-control {
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 1dbde1915..24175e9a9 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -37,6 +37,10 @@
         <common-detail-tab v-show="subResizeShow" :from="from" :targetTab.sync="targetTab" v-for="(item, index) in tabList" :key="index" :detail="detailList[index]"
                            v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab>
       </template>
+
+      <!-- model-panel/asset-detail/project-overview的panel-->
+      <panel-tab v-if="from == 'model' && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj"></panel-tab>
+
     </div>
   </span>
 </template>
@@ -47,15 +51,17 @@
   import alertMessageTab from "./tabs/alertMessageTab";
   import endpointQueryTab from "./tabs/endpointQueryTab";
   import endpointTab from "./tabs/endpointTab";
+  import panelTab from "./tabs/panelTab";
 
   export default {
-    name: "cabinetBox",
+    name: "bottomBox",
     components:{
       'common-detail-tab': commonDetailTab,
       'cabinet-tab': cabinetTab,
       'alert-message-tab': alertMessageTab,
       'endpoint-query-tab': endpointQueryTab,
       'endpoint-tab': endpointTab,
+      'panel-tab': panelTab,
     },
     props: {
       isFullScreen: false, //是否全屏
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
new file mode 100644
index 000000000..d4ad7ffd3
--- /dev/null
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
@@ -0,0 +1,634 @@
+<template>
+  <div class="panel sub-list">
+    <div class="sub-top-tools">
+      <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>
+      </div>
+      <div class="top-tool-right">
+        <div class="top-tool-search 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 class="panel-calendar margin-r-20" v-if="from != 'model'">
+          <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange" style="height: 26px; margin-top: -1px;"></time-picker>
+        </div>
+        <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20" style="height: 24px;" v-if="from != 'model'">
+          <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">
+          <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
+                      ref="chartList"></chart-list>
+        </div>
+      </el-scrollbar>
+    </div>
+    <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
+
+    <chart-box ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+  </div>
+</template>
+
+<script>
+  import ChartBox from "../../../page/dashboard/chartBox";
+  import ChartList from '../../../charts/chart-list';
+  import bus from '../../../../libs/bus';
+  import timePicker from '../../../common/timePicker'
+
+  export default {
+    name: "panel",
+    props: {
+      from: String,
+      obj: Object
+    },
+    data() {
+      return {
+        showTopBtn: false, //top按钮
+        visible: false,
+        rightBox: { //面板弹出框相关
+          show: false,
+          title: this.$t('dashboard.panel.createPanelTitle')
+        },
+        tableHover: false,
+        searchTime: [
+          new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
+          new Date(bus.computeTimezone(new Date().getTime()))
+        ],
+        intervalTimer: null,
+        intervalList: [{
+          value: 0,
+          name: this.$t("dashboard.panel.refreshInterval.never"),
+        }, {
+          value: 60,
+          name: this.$t("dashboard.panel.refreshInterval.oneMinute"),
+        }, {
+          value: 180,
+          name: this.$t("dashboard.panel.refreshInterval.threeMinutes"),
+        }, {
+          value: 300,
+          name: this.$t("dashboard.panel.refreshInterval.fiveMinutes"),
+        }, {
+          value: 600,
+          name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
+        }],
+        interval: 0,
+        panel: { //新增panel
+          id: '',
+          name: ''
+        },
+        chart: {
+          id: '',
+          title: '',
+          type: 'line',
+          span: 12,
+          height: 400,
+          elements: {
+            id: '',
+            expression: '',
+            type: ''
+          }
+        },
+        pageObj: {
+          pageNo: 1,
+          pageSize: -1, //此处获取所有数据，所以设置一个较大的值
+          total: 0
+        },
+        chartsData: [], //中间部分图表相关数据
+        panelData: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [
+          ],
+        },
+        searchLabel: {}, //搜索参数
+        //---图表相关参数--start
+        dataList: [], // 数据列表
+        //searchName: '', //  搜索名称
+        filter: { // 过滤条件
+          //productId: 0,
+          panelId: 0,
+          start_time: '',
+          end_time: '',
+          searchName: ''
+        },
+        showPanel: {
+          name: '',
+          type: 'model',
+          id: ''
+        },
+        panelId: 0,
+        //removeModal: false, // 删除弹出
+        //deleteObj: {}, // 删除对象
+        //---图表相关参数--end
+      }
+    },
+    components: {
+      'chart-box': ChartBox,
+      'chart-list': ChartList,
+      'time-picker':timePicker
+    },
+    methods: {
+      //刷新
+      Refresh() {
+        this.getTableData();
+      },
+      refreshTime(st, et) {
+        const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm');
+        const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm');
+        this.searchTime = [startTime, endTime];
+      },
+      panelReloadForDel: function () {
+        this.getTableData();
+      },
+      /*图表相关操作--start*/
+      toAddChart: function () {
+        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
+        this.$refs.addChartModal.show(true);
+        this.$refs.addChartModal.createData(this.panelId); //初始化创建图表需要的初始数据
+      },
+      scrollbarHeightHandler() {
+        setTimeout(() => {
+          let top = '';
+          let top2 = '';
+          document.querySelector("body>.el-dropdown-menu").addEventListener("ps-y-reach-end", () => {
+            let yDom = document.querySelector("body>.el-dropdown-menu>.ps__rail-y");
+            let yDom2 = document.querySelector("body>.el-dropdown-menu>.ps__rail-y>.ps__thumb-y");
+            if (top) {
+              yDom.style.top = top;
+            } else {
+              top = yDom.style.top;
+            }
+            if (top2) {
+              yDom2.style.top = top2;
+            } else {
+              top2 = yDom2.style.top;
+            }
+          });
+        }, 100);
+      },
+      // 编辑图表信息,打开编辑弹窗
+      editData(data) {
+        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
+        this.$refs.addChartModal.show(true);
+        this.$refs.addChartModal.editData(data, this.panelId);
+      },
+      // 移除图表:弹出确认框询问
+      removeData(data,from) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("panel/" + this.panelId + "/charts?ids=" + data.id).then(response => {
+            if (response.code === 200) {
+              this.$message({
+                duration: 2000,
+                type: 'success',
+                message: this.$t("tip.deleteSuccess")
+              });
+              let chartList=this.$refs.chartList.dataList;
+              for (let i =0;i< chartList.length;i++){
+                if(chartList[i].id === data.id){
+                  chartList.splice(i,1);
+                  break;
+                }
+              }
+              this.getTableData(); //删除相关图表后，刷新面板数据
+            } else {
+              console.error(response.msg);
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      delChartOk() {
+        this.getData(this.filter);
+      },
+      // 图表创建成功，回调panel页面，进行图表的刷新
+      createSuccess(msg, data, params) {
+        this.getData(this.filter);
+      },
+      // 获取数据,用在子页面
+      getData(params) {
+        if (params.start_time === '' || params.end_time === '') {
+          let now = new Date();
+          let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+          let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss');
+          params.start_time = startTimeTmp;
+          params.end_time = endTimeTmp;
+        }
+        if(this.$refs.chartList){
+          this.$refs.chartList.initData(params);
+        }
+      },
+
+      /*图表相关操作--end*/
+      /*时间条件查询--start*/
+      // 选择日期变化
+      dateChange(val) {
+        this.searchTime = [...val];
+        this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+        this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+        this.filter.panelId = this.panelId;
+        this.getData(this.filter);
+      },
+      /*时间条件查询--end*/
+      //公用操作
+      jumpTo(data, id) {
+        bus.$emit("menu-change", data);
+        this.$router.push({
+          path: "/" + data,
+          query: {
+            t: +new Date()
+          }
+        });
+      },
+      getTableData(linkId) {
+        this.$get('panel', {pageNo: 1, pageSize: -1, type: this.from, link: linkId}).then(response => {
+          if (response.code === 200) {
+            this.panelData = response.data.list;
+            if (this.panelData.length > 0) {
+              this.panelId = this.filter.panelId = this.panelData[0].id;
+              this.getData(this.filter);
+            }
+          }else {
+            if(response.msg){
+              console.error(response.msg);
+              this.$message.error(response.msg);
+            }else if(response.error){
+              console.error(response.error);
+              this.$message.error(response.error);
+            }else {
+              console.error(response);
+              this.$message.error(response);
+            }
+          }
+        }).catch((error) => {
+          if (error) {
+            console.error(error);
+            this.$message.error(error.toString());
+          }
+        });
+      },
+      //定期刷新
+      selectInterval(val) {
+        this.visible = false;
+        clearInterval(this.intervalTimer);
+        if (val) {
+          this.interval = val;
+          const start = new Date(this.searchTime[1]);
+          const now = new Date();
+          const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
+          if (interval >= 60) { //如果结束时间到现在超过1分钟，则
+            this.getIntervalData(interval);
+          }
+          this.intervalTimer = setInterval(() => {
+            this.getIntervalData(this.interval);
+          }, val * 1000);
+        }
+      },
+      getIntervalData(interval) { //interval:结束时间到现在的秒数
+        const start = new Date(this.searchTime[0]);
+        const end = new Date(this.searchTime[1]);
+        start.setSeconds(start.getSeconds() + interval);
+        end.setSeconds(end.getSeconds() + interval);
+        const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm');
+        const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm');
+        this.searchTime = [startTime, endTime];
+        //刷新数据
+        this.dateChange();
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        this.getTableData();
+      },
+      search:function(){
+        if(this.$refs.chartList){
+          this.$refs.chartList.searchCharts(this.filter.searchName);
+        }
+      },
+      // 滚动事件触发下拉加载
+      onScroll() {
+        let _self = this;
+        let scrollbarWrap = this.$refs.dashboardScrollbar.wrap;
+        scrollbarWrap.onscroll = function() {
+          if (scrollbarWrap.scrollTop > 50) {
+            _self.showTopBtn = true;
+          } else {
+            _self.showTopBtn = false;
+          }
+          if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
+            _self.$refs.chartList.pageDataList(true, _self.panelId);
+          }
+        }
+      },
+      focusInput:function(){
+        let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
+        classVal=classVal.replace('query-input-inactive','query-input-active');
+        document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
+        this.$refs.queryPanel.focus();
+      },
+      blurInput:function(){
+        if(!this.filter.searchName || this.filter.searchName == ''){
+          setTimeout(function(){
+            let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
+            classVal=classVal.replace('query-input-active','query-input-inactive');
+            document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
+          },100)
+        }
+      },
+      clearInput:function(){
+        this.$refs.queryPanel.focus();
+      }
+    },
+    mounted: function () {
+      this.onScroll();
+      document.querySelector("#tableList").addEventListener("mouseenter", () => {
+        this.tableHover = true;
+      });
+      document.querySelector("#tableList").addEventListener("mouseleave", () => {
+        this.tableHover = false;
+      });
+    },
+    watch: {
+      'filter.searchName':function(n,o){
+        let temp=this;
+        setTimeout(function(){
+          temp.search();
+        },1000)
+      },
+      obj: {
+        immediate: true,
+        handler(n) {
+          this.getTableData(n.id);
+        }
+      }
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .panel {
+    height: 100%;
+  }
+
+  .panel .el-table {
+    border-radius: 5px;
+  }
+
+  .panel-list-width {
+    width:240px;
+  }
+
+  .panel-dropdown-title {
+    line-height:24px;
+    padding-left:5px;
+    margin-left:10px;
+    margin-top: 3px;
+    text-align:left;
+    border-radius:4px;
+    width:120px;
+    height:24px;
+    border:solid 1px  #d8dce1;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+  .panel-list-title {
+    min-height:24px;
+    width:100px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .panel-list-item {
+    width:190px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .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;
+  }
+
+  /* begin-chart list*/
+  .table-list {
+    margin-top: 6px;
+    overflow-y: auto;
+    height: calc(100% - 56px);
+  }
+
+  .box-content {
+    position: relative;
+  }
+
+  /* end-chart list*/
+  /* 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下拉框样式*/
+  .panel-select-width {
+    width: 150px;
+  }
+
+  .panel-refresh-interval {
+    margin-right: 5px;
+    float: right;
+  }
+
+  .panel-refresh-interval-select {
+    width: 95px;
+  }
+
+  .panel-calendar {
+    float: right;
+    margin-right: 1px;
+  }
+
+  .top-tools {
+    button {
+      background: $btn-light-background-color;
+      outline: none;
+      border: 1px solid #ccc;
+    }
+
+    button:hover {
+      background: $btn-light-background-color-hover;
+    }
+  }
+
+  .nz-dashboard-dropdown {
+    height: 300px;
+    overflow-y: auto;
+    li {
+      /*padding: 0 20px !important;*/
+      padding-left:20px !important;
+      padding-right:0px !important;
+      width:240px;
+      white-space:nowrap;
+      overflow-x:hidden;
+      text-overflow:ellipsis;
+    }
+  }
+
+  .nz-dashboard-dropdown-bg {
+    background: $global-text-color-active;
+    color: #fff;
+  }
+
+  .el-dropdown-link {
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  .refresh {
+    display: flex;
+    background: #fff;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    margin: 0 10px;
+    border: 1px solid #ccc;
+    background: $btn-light-background-color;
+
+    span {
+      display: inline-block;
+      padding: 1px 8px;
+    }
+  }
+
+  .popover_ul li {
+    padding: 10px 3px;
+    cursor: pointer;
+  }
+
+  .popover_ul li:hover {
+    background: $dropdown-hover-background-color !important;
+    color: $global-text-color-active !important;
+  }
+
+  .nz-dashboard-refresh {
+    border-right: 1px solid #ccc;
+    color: #F0BF84;
+  }
+
+  .nz-dashboard-picker {
+  }
+
+</style>
+<style lang="scss">
+  .panel .top-tools input {
+    background-color: $content-right-background-color;
+  }
+  .panel .top-tools  .el-input__inner {
+    background-color: $content-right-background-color;
+  }
+  .panel-calendar .el-range-editor--mini.el-input__inner {
+    height: 25px !important;
+    border-color: #d8d8d8;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range__close-icon {
+    line-height: 18px;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range__icon {
+    display: none;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range-separator {
+    line-height: 17px;
+  }
+
+  .panel-calendar .el-date-editor--datetimerange.el-input, .panel-calendar .el-date-editor--datetimerange.el-input__inner {
+    padding-right: 0;
+    vertical-align: top;
+  }
+
+  .nz-dashboard-dropdown .nz-icon-edit {
+    font-size: 12px;
+  }
+</style>
+
diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue
index 391037593..1818ef048 100644
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -34,57 +34,64 @@
       </div>
     </div>
     <div slot="content-right" class="slot-content">
-      <div class="top-tools">
-        <div class="top-tool-main-right">
-          <div class="top-tool-search">
-            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
+        <div class="top-tools" v-show="mainResizeShow">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+            <div class="top-tool-search">
+              <search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
+            </div>
+            <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createModel')"
+                    id="model-add">
+                      <i class="nz-icon-create-square nz-icon"></i>
+            </button>
           </div>
-          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createModel')"
-                  id="model-add">
-                    <i class="nz-icon-create-square nz-icon"></i>
-          </button>
+          <div class="pagination-top pagination-top-hide display-none"></div>
+        </div>
+        <el-table :data="tableData" border style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table="'large'"
+                  v-loading="loading" :cell-class-name="assetStatClassName" v-show="mainResizeShow" :height="mainTableHeight">
+          <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
+                           :key="`col-${index}`" :label="item.label">
+            <template slot-scope="scope" :column="item">
+              <template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
+              <template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template>
+              <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat" >
+                <el-popover
+                  placement="top"
+                  trigger="hover"
+                  :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.createAssetTab.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.createAssetTab.notInStock') + '：' + scope.row.assetStat.outStock">
+                    <div slot="reference" class="dc-asset-states">
+                      <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
+                      <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
+                      <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
+                    </div>
+                  </el-popover>
+              </template>
+              <div v-else-if="item.prop == 'option'" class="content-right-options">
+                <span :title="$t('dashboard.panel.title')" @click="panel(scope.row)" class="content-right-option" :id="'model-panel-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
+                <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'model-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+                <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'model-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+              </div>
+              <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+              <template v-else>-</template>
+            </template>
+          </el-table-column>
+          <el-table-column :resizable="false" width="28">
+            <template slot="header" slot-scope="scope">
+              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+                <i class="nz-icon nz-icon-gear"></i>
+              </span>
+            </template>
+            <template v-slot="scope">
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination-bottom" v-show="!showSubList">
+          <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
       </div>
-      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table="'large'"
-                v-loading="loading" :cell-class-name="assetStatClassName">
-        <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
-                         :key="`col-${index}`" :label="item.label">
-          <template slot-scope="scope" :column="item">
-            <template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
-            <template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template>
-            <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat" >
-              <el-popover
-                placement="top"
-                trigger="hover"
-                :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.createAssetTab.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.createAssetTab.notInStock') + '：' + scope.row.assetStat.outStock">
-                  <div slot="reference" class="dc-asset-states">
-                    <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
-                    <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
-                    <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
-                  </div>
-                </el-popover>
-            </template>
-            <div v-else-if="item.prop == 'option'" class="content-right-options">
-              <!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'model-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>-->
-              <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'model-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'model-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
-            </div>
-            <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-            <template v-else>-</template>
-          </template>
-        </el-table-column>
-        <el-table-column :resizable="false" width="28">
-          <template slot="header" slot-scope="scope">
-            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-              <i class="nz-icon nz-icon-gear"></i>
-            </span>
-          </template>
-          <template v-slot="scope">
-            <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" from="model" :targetTab.sync="targetTab" :obj="modelForPanel"
+                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
     </div>
     </left-menu>
     <element-set
@@ -104,6 +111,16 @@
     name: "model",
     data() {
       return {
+        /*二级列表相关*/
+        targetTab: '', //展示二级列表中的哪个页签
+        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        mainResizeShow: true, //dom高度改变时部分内容是否展示
+        subResizeShow: true,
+        isFullScreen: false,
+        showSubList: false, //是否展示二级列表
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        modelForPanel: {},
+
         tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
 
@@ -218,6 +235,23 @@
       clickos() {
         this.rightBox.show = false;
       },
+      panel(obj) {
+        this.showSubList = true;
+        this.modelForPanel = obj;
+        this.targetTab = "panel";
+      },
+      // 全屏
+      fullScreen() {
+        this.$bottomBoxWindow.fullScreen(vm);
+      },
+      // 退出全屏
+      exitFullScreen() {
+        this.$bottomBoxWindow.exitFullScreen(vm);
+      },
+      // 鼠标拖动二级列表
+      listResize(e) {
+        this.$bottomBoxWindow.listResize(vm, e);
+      },
       toEdit: function (u) {
         this.model = Object.assign({}, u);
         this.$refs.modelBox.show(true, true);
@@ -341,6 +375,9 @@
         : this.tableTitle;
     },
     watch: {
+      showSubList(n) {
+        this.$bottomBoxWindow.showSubListWatch(vm, n);
+      },
     }
   }
 </script>
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 645df195b..1ba86f920 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -47,17 +47,6 @@
           </div>
           <div class="pagination-top pagination-top-hide display-none"></div>
         </div>
-        <!--<div class="top-tools">
-          <div class="top-tool-main-right">
-            <div class="top-tool-search">
-              <search-input :searchMsg="searchMsg" @search="search"></search-input>
-            </div>
-            <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20"  :title="$t('overall.createPrometheusServer')"
-                    id="prom-add">
-              <i class="nz-icon-create-square nz-icon"></i>
-            </button>
-          </div>
-        </div>-->
         <el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;"
                   v-loading="loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'">
           <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 3535d77ea..2bb417f37 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -54,7 +54,7 @@
 </style>
 <template key="chartBox">
   <div v-clickoutside="clickos">
-    <panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
+    <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
 
     <transition name="right-box">
       <div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" >
@@ -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">
+            <el-form-item :label="$t('dashboard.panel.title')" prop="panel" v-if="showPanel.type != 'model'">
               <el-autocomplete
                 :fetch-suggestions="panelSuggestion"
                 v-model.trim="panelName2"
@@ -570,32 +570,34 @@
       },
       // 新建图表
       addCharts(params) {
+        let panelId;
         //先处理panel
-        let panelId = this.autocompleteExist(this.panelName2);
-        if (panelId) {
-          this.panelId = panelId;
+        if (this.showPanel.type == 'model') {
+          panelId = this.panelData[0].id;
         } else {
-          this.$post('panel', {name: this.panelName2}).then(response => {
-            if (response.code === 200) {
-              this.$emit("reloadOnlyPanel");
-              this.$store.commit('panelListChange', true);
-            } else {
-              if(response.msg){
-                this.$message.error(response.msg);
-              }else {
-                this.$message.error(response);
+          panelId = this.autocompleteExist(this.panelName2);
+          if (!panelId) {
+            this.$post('panel', {name: this.panelName2}).then(response => {
+              if (response.code === 200) {
+                this.$emit("reloadOnlyPanel");
+                this.$store.commit('panelListChange', true);
+                panelId = this.autocompleteExist(this.panelName2);
+              } else {
+                if(response.msg){
+                  this.$message.error(response.msg);
+                }else {
+                  this.$message.error(response);
+                }
               }
-
-            }
-          });
+            });
+          }
         }
 
+
         let intervalTime = 1; //设置3秒超时
         let interval = setInterval(() => {
-          panelId = this.autocompleteExist(this.panelName2);
           if (panelId) {
             this.panelId = panelId;
-            console.log('___params___',params)
             this.$post('panel/' + this.panelId + '/charts', params).then(response => {
               if (response.code === 200) {
                 this.esc();
@@ -1018,13 +1020,15 @@
         deep: true,
         immediate: true,
         handler(n, o) {
-          if (this.selectFirstPanel) {
-            this.selectFirstPanel = false;
-            this.panelId = n[0].id;
-          } else if (this.panelName) {
-            for (let i = 0; i < n.length; i++) {
-              if (n[i].name == this.panelName) {
-                this.panelId = n[i].id;
+          if (this.showPanel.type != 'model') {
+            if (this.selectFirstPanel) {
+              this.selectFirstPanel = false;
+              this.panelId = n[0].id;
+            } else if (this.panelName) {
+              for (let i = 0; i < n.length; i++) {
+                if (n[i].name == this.panelName) {
+                  this.panelId = n[i].id;
+                }
               }
             }
           }