From 01a3394ffa497819fc826c59ee6988fcb49e913f Mon Sep 17 00:00:00 2001
From: zhangyu <m13716206235@163.com>
Date: Fri, 28 Aug 2020 11:06:14 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Aendpoint=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/project/popData/endpointTable.vue  | 284 +++++++++++++++++-
 .../common/project/popData/lineChart.vue      |   5 +
 .../common/project/popData/totalChart.vue     |   6 +-
 .../components/common/project/topology.vue    |   4 +-
 4 files changed, 290 insertions(+), 9 deletions(-)

diff --git a/nezha-fronted/src/components/common/project/popData/endpointTable.vue b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
index 1f3048b41..decb34362 100644
--- a/nezha-fronted/src/components/common/project/popData/endpointTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
@@ -1,13 +1,287 @@
 <template>
-    
+  <div class="mc" @click.self="clickOutside">
+    <div class="right-box right-box-project-alert">
+      <!-- begin--顶部按钮-->
+      <div class="right-box-top-btns">
+        <!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
+        <!--<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>-->
+        <!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
+        <!--</button>-->
+      </div>
+      <!-- end--顶部按钮-->
+
+      <!-- begin--标题-->
+      <div class="right-box-title">Endpoint</div>
+      <!-- end--标题-->
+
+      <!-- begin--表格-->
+      <el-scrollbar class="right-box-form-box">
+        <el-table
+          :data="tableData"
+          border
+          class="nz-table endpoint-table"
+          :height="mainTableHeight"
+          v-scrollBar:el-table="'large'"
+          ref="endpointTable"
+          v-loading="loading"
+          style="width: 100%;"
+          @sort-change="tableDataSort"
+        >
+          <el-table-column
+            :resizable="false"
+            v-for="(item, index) in tableTitle"
+            v-if="item.show"
+            :width="item.width"
+            :key="`col-${index}`"
+            :label="item.label"
+            min-width="110px"
+            :sortable="$tableSet.sortableShow(item.prop,'project')"
+            :prop="$tableSet.propTitle(item.prop,'project')"
+            :sort-orders="['ascending', 'descending']"
+          >
+            <template slot-scope="scope" :column="item" >
+              <span v-if="item.prop == 'asset' && scope.row[item.prop]">{{scope.row[item.prop].host}}</span>
+              <span v-else-if="item.prop == 'param'">
+              <template v-if="scope.row.paramObj">
+                <span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
+              </template>
+              <template v-else>-</template>
+            </span>
+              <template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
+              <div v-else-if="item.prop == 'option'" class="content-right-options">
+                <span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+                &nbsp;
+                <span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
+                &nbsp;
+                <span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+              </div>
+              <span v-else-if="item.prop == 'state'" >
+              <el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
+                <div slot="reference" style="width: 20px">
+                  <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
+                </div>
+                <div >
+                  <div v-if="scope.row.state == '1'">up</div>
+                  <div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
+                </div>
+              </el-popover>
+            </span>
+              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+              <template v-else>-</template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-scrollbar>
+      <!-- end--表格-->
+
+      <!--底部分頁-->
+      <div class="pagination-bottom">
+        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		name:"endpointTable"
-	}
+  import bus from '@/libs/bus';
+  import axios from 'axios';
+  import nzAlertTag from '@/components/page/alert/nzAlertTag';
+  import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
+  import alertLabel from '@/components/common/alert/alertLabel'
+  export default {
+    name:"endpointTable",
+    props:{
+      moduleId:{},
+      projectId:{},
+    },
+    components: {
+      'nz-alert-tag': nzAlertTag,
+      'alertRuleInfo':alertRuleInfo,
+      'alertLabel':alertLabel,
+    },
+    watch:{
+    },
+    computed: {
+      tagType() {
+        return (key) => {
+          if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+            return "normal";
+          } else {
+            return "info";
+          }
+        }
+      },
+      tagValue() {
+        return (key, value) => {
+          if (key == 'type') {
+            if (value ==  1) {
+              value = this.$t("project.project.project");
+            } else if (value == 2) {
+              value = this.$t("module.module.module");
+            } else if (value == 3) {
+              value = this.$t("asset.asset");
+            }
+          }
+          return key + "：" + value;
+        }
+      }
+    },
+    data(){
+      return{
+        pageObj: {
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        mainTableHeight:'100%',
+        tableTitle: [
+          {
+            label: this.$t("project.endpoint.endpointId"),
+            prop: 'id',
+            show: true,
+            width: 150
+          },{
+            label: this.$t("project.endpoint.asset"),
+            prop: 'asset',
+            show: true,
+          },{
+            label: this.$t("project.endpoint.port"),
+            prop: 'port',
+            show: true,
+          },{
+            label: this.$t("project.endpoint.path"),
+            prop: 'path',
+            show: true,
+          },{
+            label: this.$t("alert.list.state"),
+            prop: 'state',
+            show: true,
+          },
+          // {
+          //   label: this.$t("project.endpoint.lastUpdate"),
+          //   prop: 'lastUpdate',
+          //   show: true,
+          // },
+        ],
+        tableData:[],
+        loading:false,
+        tableHeight:'100%',
+        searchLabel:{
+
+        },
+        deleteBox:{}
+      }
+    },
+    mounted(){
+      this.getEndpointList();
+    },
+    methods:{
+      getEndpointList: function () {
+        this.loading=true;
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.$set(this.searchLabel, "moduleId", this.moduleId);
+        this.$get('endpoint', this.searchLabel).then(response => {
+          this.loading = false;
+          if (response.code === 200) {
+            // for (let i = 0; i < response.data.list.length; i++) {
+            //   try {
+            //     let tempObj = JSON.parse(response.data.list[i].param);
+            //     response.data.list[i].paramObj = [];
+            //     for (let k in tempObj) {
+            //       response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
+            //     }
+            //   } catch (err) {
+            //     //console.error(response.data.list[i], err);
+            //   }
+            // }
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total;
+          }
+        });
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getEndpointList();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
+        this.getEndpointList();
+      },
+      selectChange(s) {
+        let ids = [];
+        this.deleteBox.ids = "";
+        s.forEach(item => {
+          ids.push(item.id);
+        });
+        this.deleteBox.ids = ids.join(",");
+      },
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.pageObj.orderBy=orderBy;
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getEndpointList();
+      },
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      messageStyle(e) {
+        if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
+          if (e.row.alertNum > 0) {
+            return 'danger';
+          } else {
+            return 'success';
+          }
+        }
+        return '';
+      },
+      formatPingTime:function(str){
+        if(!str || str == ''){
+          return this.$t('asset.assetStatPre')+this.$t('asset.assetStatDown');
+        }
+        let ds='-';
+        let ts=':';
+        let time=new Date(str);
+        let year=time.getFullYear();
+        let month=time.getMonth()+1 > 9 ? time.getMonth()+1 : ('0'+(time.getMonth()+1));
+        let day=time.getDate() > 9 ? time.getDate():('0'+time.getDate());
+        let hours=time.getHours() > 9? time.getHours():('0'+time.getHours());
+        let minutes=time.getMinutes() > 9 ?time.getMinutes():('0'+time.getMinutes());
+        let seconds=time.getSeconds() > 9 ? time.getSeconds():('0'+time.getSeconds());
+        return this.$t('asset.assetStatPre')+year+ds+month+ds+day+' '+hours+ts+minutes+ts+seconds;
+
+      },
+    },
+
+  }
 </script>
 
 <style scoped>
-
+  .right-box-project-alert{
+    width: 1220px;
+  }
+  .mc{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 11;
+  }
+  /deep/.resize-box .danger{
+    background-color: #f9f9f9 !important;
+  }
+  /* end--table*/
 </style>
+
diff --git a/nezha-fronted/src/components/common/project/popData/lineChart.vue b/nezha-fronted/src/components/common/project/popData/lineChart.vue
index 5037a6181..841c3d494 100644
--- a/nezha-fronted/src/components/common/project/popData/lineChart.vue
+++ b/nezha-fronted/src/components/common/project/popData/lineChart.vue
@@ -1388,6 +1388,11 @@
         }
 
       },
+      getNewTime(time, num) {
+        const date = new Date(time);
+        const newDate = new Date(parseInt(date.getTime(), 10) + num);
+        return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss');
+      },
       // 获取格式
       getNumStr(num) {
         if (num >= 1000) {
diff --git a/nezha-fronted/src/components/common/project/popData/totalChart.vue b/nezha-fronted/src/components/common/project/popData/totalChart.vue
index a488b61f3..b610da1f0 100644
--- a/nezha-fronted/src/components/common/project/popData/totalChart.vue
+++ b/nezha-fronted/src/components/common/project/popData/totalChart.vue
@@ -63,8 +63,6 @@
           this.getData(item1, '', '');
         })
       });
-      this.$set(this.filter, "start_time", bus.timeFormate(new Date().getTime()-60*60*1000, "yyyy-MM-dd hh:mm:ss"));
-      this.$set(this.filter, "end_time", bus.timeFormate(new Date().getTime(), "yyyy-MM-dd hh:mm:ss"));
       this.$set(this.filter, "panelId", this.projectId);
     },
     methods:{
@@ -85,7 +83,9 @@
       },
       //获取图表数据
 		  getData(chartInfo, pos, filterType){
-        let startTime =  this.filter.start_time
+        this.$set(this.filter, "start_time", bus.timeFormate(new Date().getTime()-60*60*1000, "yyyy-MM-dd hh:mm:ss"));
+        this.$set(this.filter, "end_time", bus.timeFormate(new Date().getTime(), "yyyy-MM-dd hh:mm:ss"));
+        let startTime =  this.filter.start_time;
         let endTime = this.filter.end_time;
         let step = bus.getStep(startTime, endTime);
         chartInfo.loading=true;
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index 71528267a..8fd566b36 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -104,7 +104,7 @@
     </transition>
     <!--endpoint-->
     <transition name="right-box">
-      <div v-if="popDataShow.endpoint">endpoint</div>
+      <endpointTable v-if="popDataShow.endpoint"  :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" @close="popDataShowUpdate">endpoint</endpointTable>
     </transition>
     <!--asset-->
     <transition name="right-box">
@@ -126,12 +126,14 @@
   import TotalChart from "./popData/totalChart";
   import alertTable from "./popData/alertTable";
   import assetTable from "./popData/assetTable";
+  import endpointTable from "./popData/endpointTable";
 	export default {
 		name:"topology",
     components: {
       TotalChart,
       alertTable,
       assetTable,
+      endpointTable,
       'add-model':addNode,
       'add-line':addLine,
       'popDataMain':popDataMain,