From ad3853de89560c5dbc675e92d2683daee47b8656 Mon Sep 17 00:00:00 2001
From: zhangyu <m13716206235@163.com>
Date: Wed, 26 Aug 2020 10:05:56 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Aproject=20=E4=BE=A7=E6=BB=91?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/project/popData/alertTable.vue     | 433 ++++++++++++++++++
 .../common/project/popData/assetTable.vue     |  13 +
 .../common/project/popData/endpointTable.vue  |  13 +
 3 files changed, 459 insertions(+)
 create mode 100644 nezha-fronted/src/components/common/project/popData/alertTable.vue
 create mode 100644 nezha-fronted/src/components/common/project/popData/assetTable.vue
 create mode 100644 nezha-fronted/src/components/common/project/popData/endpointTable.vue

diff --git a/nezha-fronted/src/components/common/project/popData/alertTable.vue b/nezha-fronted/src/components/common/project/popData/alertTable.vue
new file mode 100644
index 000000000..4b806fc6c
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/popData/alertTable.vue
@@ -0,0 +1,433 @@
+<template>
+  <div class="mc" @click.self="clickOutside">
+    <div class="right-box right-box-edit-endpoint">
+      <!-- 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">Add Line</div>
+      <!-- end--标题-->
+
+      <!-- begin--表格-->
+      <el-scrollbar class="right-box-form-box">
+        12313212313
+      </el-scrollbar>
+
+      <!-- end--表格-->
+
+      <!--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+          <span>{{$t('overall.cancel')}}</span>
+        </button>
+        <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+          <span>{{$t('overall.save')}}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  var rz = {
+    methods: {
+      rz(e) {
+        resetZIndex(e);
+      }
+    }
+  };
+  export default {
+    name:"addLine",
+    props:{
+      moduleId:{},
+      projectId:{},
+    },
+    components:{
+      'promql-input': promqlInput,
+    },
+    mixins: [rz],
+    watch:{
+      lineData:{
+        handler(n){
+          this.form={
+            arrows:n.arrows,
+            color:n.color,
+            lineId:n.id,
+          }
+        },
+        immediate: true,
+        deep: true,
+      }
+    },
+    data(){
+      return{
+        form:{
+          arrows:'',
+          label:'',
+          color:'#1e90ff',
+          lineName:'',
+          lineId:'',
+          width:'',
+          type:'',
+          roundness:'',
+        },
+        predefineColors: [
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+        ],
+        unitOptions: chartDataFormat.unitOptions(),
+        promqlKeys:[],
+        expressions: [],
+        promqlCount:0,
+        elementIds:[],
+        legends:[],
+        name:[],
+        unit:[],
+        rules:{
+          arrows: [
+            { required: true, message: '', trigger: 'change' },
+          ],
+          lineName: [
+            { required: true, message: '', trigger: 'change' },
+          ],
+        }
+      }
+    },
+    mounted(){
+      this.addExpression();
+    },
+    methods:{
+      onSubmit(){
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            let model=Object.assign({id:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
+            model.width = parseInt(model.width) || 4;
+            model.smooth={
+              roundness:model.roundness,
+              type:model.type ,
+            };
+            model.expressions=[];
+            this.promqlKeys.forEach((item,index)=>{
+              model.expressions.push({
+                "name": this.name[index],
+                "unit": this.unit[index],
+                "metric": this.expressions[index],
+                "legend": this.legends[index],
+              })
+            });
+            this.$emit('addLine',model);
+          }
+        });
+      },
+      expressionChange: function () {
+
+      },
+      addExpression() {
+        this.expressions.push('');
+        this.legends.push('');
+        this.name.push('');
+        this.unit.push('');
+        this.promqlKeys.push(getUUID());
+        this.elementIds.push("");
+        this.promqlCount++;
+      },
+      removeExpression(index) {
+        if (this.promqlCount > 1) {
+          this.expressions.splice(index, 1);
+          this.legends.splice(index, 1);
+          this.name.splice(index, 1);
+          this.unit.splice(index, 1);
+          this.promqlKeys.splice(index, 1);
+          this.elementIds.splice(index, 1);
+          this.promqlCount--;
+          this.$nextTick(() => {
+            this.expressions.forEach((ex, index) => {
+              if (ex) {
+                this.$refs[`promql-${index}`][0].metricChange(ex);
+              }
+            });
+          });
+        }
+      },
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      del(){
+        this.$emit('del');
+        this.esc();
+      },
+      colorPickerClick(){
+        this.$refs['colorPicker'].showPicker=true;
+      },
+      colorChange(val){
+        this.form.color=this.colorRGBtoHex(val)
+      },
+      colorRGBtoHex(color) {
+        let rgb = color.split(',');
+        let r = parseInt(rgb[0].split('(')[1]);
+        let g = parseInt(rgb[1]);
+        let b = parseInt(rgb[2].split(')')[0]);
+        let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+        return hex;
+      }
+
+    },
+
+  }
+</script>
+
+<style scoped>
+  .mc{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+  }
+  .color-content{
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 140px;
+  }
+  .color{
+    position: relative;
+  }
+  .color-show{
+    border: 1px solid #E7EAED;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    width: calc(100% - 30px);
+  }
+  .color-show-left{
+    width: 18px;
+    height: 18px;
+    border: 1px solid #E7EAED;
+    border-radius: 5px;
+    margin: 0 5px;
+  }
+  .line-name{
+    width: calc(100% - 30px);
+  }
+  .form-title{
+    font-size: 14px;
+    color: #333333;
+    padding-left: 28px;
+    margin-bottom: 15px;
+  }
+  /deep/ .el-form-item__label{
+    font-size: 14px;
+    color: #666666;
+    opacity: 0.6;
+  }
+  .arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
+    border: 1px solid #DCDFE6;
+    height: 41px;
+    width: calc(100% - 30px);
+  }
+  .arrows /deep/ .el-input__inner{
+    display: none;
+  }
+  /deep/ .el-select{
+    width: 262px;
+  }
+  .nz-btn-edit-ok{
+    position: absolute;
+    bottom: 0;
+    right:0;
+  }
+  .nz-btn-edit-esc{
+    position: absolute;
+    bottom: 0;
+    left:0;
+  }
+
+  /* begin--搜索框*/
+  .endpoint-asset-search {
+    display: inline-block;
+    position: relative;
+    margin-top: -16px;
+  }
+  .endpoint-asset-search button {
+    height: 22px !important;
+  }
+  .endpoint-asset-search-dropdown {
+    position: absolute;
+    top: 25px;
+    background-color: #444;
+    border-radius: 4px;
+    width: 44px;
+    left: 0;
+  }
+  .endpoint-asset-search-dropdown-item {
+    text-align: center;
+    line-height: 22px;
+    height: 22px;
+    cursor: default;
+    color: white;
+    font-size: 12px;
+  }
+  .endpoint-asset-label-txt {
+    display: inline-block;
+    width: 19px;
+    text-align: center;
+  }
+  .endpoint-asset-search-dropdown-item:first-of-type {
+    border-radius: 4px 4px 0 0;
+  }
+  .endpoint-asset-search-dropdown-item:last-of-type {
+    border-radius: 0 0 4px 4px;
+  }
+  .endpoint-asset-search-dropdown-item:hover {
+    background-color: #222;
+    color: #ff9900;
+  }
+  .endpoint-asset-search-input {
+    display: inline-block;
+    width: 150px;
+    vertical-align: top;
+  }
+  /* end--搜索框*/
+
+  /* begin--table*/
+  .endpoint-sub-table {
+    padding-top: 30px;
+    height: 440px;
+  }
+  .line-100 {
+    margin-bottom: 3px;
+  }
+  .endpoint-sub-table-head {
+    line-height: 28px;
+    height: 30px;
+  }
+  .endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
+    line-height: 28px;
+    height: 30px;
+    color: #656565;
+  }
+  .endpoint-sub-table-row:hover {
+    background-color: #dadada;
+    cursor: default;
+  }
+  .endpoint-sub-table-row-active {
+    background-color: #dadada;
+  }
+  .endpoint-sub-table-row-selected {
+    background-color: #656565;
+    color: white;
+  }
+  .endpoint-sub-table-col {
+    display: inline-block;
+    width: calc(50% - 15px);
+    padding-left: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .endpoint-sub-table-paginate-all {
+    position: absolute;
+    left: 10px;
+    bottom: 17px;
+    color: #5a5a5a;
+  }
+  .endpoint-sub-table-body {
+    font-size: 15px;
+    position: relative;
+    overflow: auto;
+    height: calc(100% - 34px);
+  }
+  .endpoint-sub-table-body-dialog {
+    width: 100%;
+    height: 100%;
+    background-color: #e9ebec;
+    position: absolute;
+    opacity: 0.2;
+  }
+  .endpoints-clear-btn {
+    margin: 6px 0 0 7px;
+  }
+  /* end--table*/
+</style>
+
+<style lang="scss">
+  .right-box-edit-endpoint .el-pagination__total {
+    float: left;
+  }
+  right-box-edit-endpoint .pagination {
+    padding-top: 12px;
+    text-align: center;
+  }
+
+  .endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
+    font-size: 13px;
+    min-width: 20px !important;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    text-align: center;
+    border: 1px solid rgba(154,154,154,0.20);
+    border-radius: 2px;
+    border-radius: 2px;
+  }
+  .endpoint-sub-table-paginate  .el-pagination.is-background .el-pager li:not(.disabled).active {
+    color: white !important;
+  }
+  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
+    color: #666;
+  }
+  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
+    line-height: 20px;
+  }
+  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
+    line-height: 20px;
+  }
+  .right-box-edit-endpoint .el-pager li.number{
+    font-family: NotoSansSC-Regular;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .right-box-edit-endpoint .el-pager li.number.active{
+    font-family: NotoSansSC-Regular;
+    color: #FFFFFF;
+    letter-spacing: 0;
+  }
+
+  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: $global-text-color-active;
+    border-radius: 2px;
+    border-radius: 2px;
+  }
+  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
+    font-family: NotoSansSC-Regular;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
+    height: 20px;
+    border-color: rgba(154,154,154,0.20);
+  }
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
+    border-color: rgba(154,154,154,0.20);
+  }
+</style>
+
diff --git a/nezha-fronted/src/components/common/project/popData/assetTable.vue b/nezha-fronted/src/components/common/project/popData/assetTable.vue
new file mode 100644
index 000000000..fc216ce42
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/popData/assetTable.vue
@@ -0,0 +1,13 @@
+<template>
+    
+</template>
+
+<script>
+	export default {
+		name:"assetTable"
+	}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/common/project/popData/endpointTable.vue b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
new file mode 100644
index 000000000..1f3048b41
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
@@ -0,0 +1,13 @@
+<template>
+    
+</template>
+
+<script>
+	export default {
+		name:"endpointTable"
+	}
+</script>
+
+<style scoped>
+
+</style>