feat： project重构 （45%）

nezha-fronted/src/assets/css/common/rightBoxCommon.scss

@@ -48,6 +48,10 @@
     padding: 5px 70px 4px 10px;
   }
 }
+.right-box__container.pens-data{
+  height: 100%;
+  padding: 0;
+}
 .right-box__container {
   color: $--color-text-regular;
   .right-box-form{

nezha-fronted/src/assets/css/components/common/project/meta2dHeader.scss

@@ -0,0 +1,9 @@
+.topo-header {
+  height: 60px;
+  box-sizing: border-box;
+  padding: 14px 20px 14px 10px;
+  display: flex;
+  .tools-left{
+    display: flex;
+  }
+}

nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss

@@ -0,0 +1,17 @@
+.meta2d-box{
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.meta2d-main{
+  width: 100%;
+  height: 100%;
+}
+.meta2d-chart{
+
+}
+.meta2d-project{
+  height: calc(100% - 78px);
+  border: 1px solid;
+  border-color: $--border-color-light;
+}

nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss

@@ -0,0 +1,51 @@
+.meta2d-box {
+  .el-tab-pane{
+    height: 100%;
+  }
+  .props-box {
+    width: 500px;
+    position: absolute;
+    height: calc(100% - 78px);
+    top: 61px;
+    padding: 0 !important;
+    box-sizing: border-box;
+    right: 0;
+  }
+  .form-row-item{
+    vertical-align: top;
+    width: calc(50% - 15px);
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 0 5px;
+    margin-bottom: 10px;
+    .form-row-key{
+      margin-bottom: 5px;
+    }
+  }
+  .special-meta2d-select {
+   .el-input.el-input--prefix.el-input--suffix{
+      border: 1px solid $--border-color-light;
+      height: 28px;
+    }
+    .el-select--small{
+      width: 100%;
+    }
+    .el-input__inner{
+      display: none;
+    }
+  }
+  .form-row-item-full{
+    width: 100%;
+  }
+  .form-row-item:nth-of-type(even) {
+    /*margin-left: 10px;*/
+  }
+  .form-row-title{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+  }
+  .form-row-content{
+    margin-bottom: 5px;
+  }
+}

nezha-fronted/src/assets/css/components/index.scss

@@ -37,6 +37,9 @@
 @import './common/project/L5/topologyTopTool.scss';
 @import './common/project/L5/topoTooltip.scss';
 @import './common/project/chart.scss';
+@import './common/project/meta2dHeader.scss';
+@import './common/project/meta2dMain.scss';
+@import './common/project/meta2dProps.scss';
 @import './common/project/topology.scss';
 @import './common/project/topologyL5.scss';
 @import './common/rightBox/asset/assetBox.scss';

nezha-fronted/src/components/common/mixin/beforeMeta2d.js

@@ -3,7 +3,8 @@ export default {
     return {
       topoData: {},
       querysArray: {},
-      meta2dType: ''
+      meta2dType: '',
+      timeType: 1,
     }
   },
   mounted () {
@@ -26,6 +27,7 @@ export default {
         }
         this.topoData = res.topo
         this.querysArray = res.elements
+        this.timeType = res.timeType || 1
       })
     }
   }

nezha-fronted/src/components/common/project/meta2d/meta2dData.vue

@@ -1,12 +1,390 @@
 <template>
-  <div>
+  <div class="pens-data right-box__container">
-    data
+    <div class="form-row-box chart-config">
+      <div class="form-row-item">
+        <div class="form-row-key">
+          Time Range
+        </div>
+        <div class="form-row-value">
+          <el-select v-model="dataTimeType"/>
+        </div>
+      </div>
+      <div class="form-row-item form-row-item-full">
+        <div
+          v-if="elements && elements.length"
+          class="metrics-input-box"
+        >
+          <draggable
+            v-model="elements"
+            :move="move"
+            @end="end"
+            @start="start"
+            :scroll-sensitivity="150"
+            :options="{
+            dragClass:'drag-chart-class',
+            fallbackClass:'fallback-class',
+            forceFallback:true,
+            ghostClass:'chart-ghost',
+            chosenClass:'choose-class',
+            scroll:true,
+            filter: '.drag-disabled',
+            animation: 150,
+            handle: '.drag-sort'
+          }">
+            <el-row
+              class="element-item form-row-item form-row-item-full thresholds-from-item"
+              style="margin-bottom: 10px !important"
+              v-for="index of elements.length"
+              :key="index"
+            >
+              <div class="chart-title chart-title-config">
+            <span class="chart-title-content el-form-item" :class="{
+              'is-error' : expressionsShow[index-1].error,
+              'hide-input': expressionsShow[index-1].hideInput
+            }">
+              <i class="nz-icon nz-icon-arrow-down" :class="expressionsShow[index-1].show?'':'is-active'" @click.stop="showExpression(index)"></i>
+              <el-input
+                style="width: 120px"
+                @mousedown.stop
+                v-model="expressionName[index-1]"
+                size="small"
+                @input="(val)=>{expressionNameInput(val,index-1)}"
+                @change="expressionNameChange(index-1)"
+                @focus.stop="showInput(index-1,false)"
+                @blur="showInput(index-1,true)"
+              />
+              <div v-if="expressionsShow[index-1].error"  class="el-form-item__error" style="top: 10px;left: 164px"> {{expressionsShow[index-1].error}}</div>
+            </span>
+                <span>
+              <!-- 显示隐藏 -->
+              <span v-if="expressionsShow[index-1].state === 1" @click="()=>{switchExpression(index - 1,1)}" :title="$t('overall.visible')" style="margin-right: 5px;padding-left: 10px">
+                <i class="nz-icon nz-icon-mimakejian"></i>
+              </span>
+              <span v-else @click="()=>{switchExpression(index - 1,0)}" :title="$t('overall.invisible')" style="margin-right: 5px;padding-left: 10px">
+                <i class="nz-icon nz-icon-mimabukejian"></i>
+              </span>
+              <span @click="()=>{addExpression()}" style="margin-right: 5px" :title="$t('tip.add')">
+                <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+              </span>
+              <span @click="copyExpression(index - 1)" style="margin-right: 5px" :title="$t('overall.duplicate')">
+                <i class="nz-icon nz-icon-override"></i>
+              </span>
+              <span @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px" :title="$t('overall.delete')">
+                <i class="nz-icon nz-icon-minus"></i>
+              </span>
+              <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
+                <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
+              </span>
+            </span>
+              </div>
+              <transition name="el-zoom-in-top">
+                <el-row v-show="expressionsShow[index-1].show">
+                  <div :prop="'elements.' + (index -1) + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}">
+                    <promql-input
+                      :from-father-data="true"
+                      :metricOptionsParent="metricOptions"
+                      :expressionList="expressions"
+                      :id="'promqlKeys' + [index-1]"
+                      :index="index-1"
+                      :required = 'true'
+                      :type="promqlType"
+                      :key="index-1"
+                      :plugins="['metric-selector', 'metric-input', 'remove']"
+                      :ref="'promql-'+(index-1)"
+                      :showRemove="false"
+                      :styleType="2"
+                      @change="expressionChange"
+                      @removeExpression="removeExpression"
+                    ></promql-input>
+                  </div>
+                  <el-row style="margin-top: 18px;display: flex">
+                    <el-col class="legend-title">
+                      <span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span>
+                      <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
+                        <div style="white-space: normal" :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
+                        <!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div> -->
+                        <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                      </el-popover>
+                    </el-col>
+                    <el-col style="flex: 1">
+                      <el-input maxlength="512" show-word-limit size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-row>
+              </transition>
+            </el-row>
+          </draggable>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import promqlInput from '@/components/page/dashboard/explore/promqlInput'
+import promqlInputMixin from '@/components/common/mixin/promqlInput.js'
+import {isStat} from "@/components/chart/chart/tools";
+import {ColorReverse, randomcolor} from "@/components/common/js/radomcolor/randomcolor";
+import {getUUID, resetZIndex} from "@/components/common/js/common";
+import lodash from "lodash";
+import draggable from 'vuedraggable'
+const rz = {
+  methods: {
+    rz (e) {
+      resetZIndex(e)
+    }
+  }
+}
 export default {
-  name: 'meta2dData'
+  name: 'meta2dData',
+  mixins: [promqlInputMixin, rz],
+  components: {
+    draggable,
+    promqlInput
+  },
+  data () {
+    return {
+      language: localStorage.getItem('nz-language') || 'en',
+      elements: [],
+      promqlType: 'metrics',
+      expressions: [],
+      expressionName: [],
+      expressionsShow: [],
+      letter: [
+        'A', 'B', 'C', 'D', 'E', 'F', 'G',
+        'H', 'I', 'J', 'K', 'L', 'M', 'N',
+        'O', 'P', 'Q', 'R', 'S', 'T',
+        'U', 'V', 'W', 'X', 'Y', 'Z'
+      ],
+      dataTimeType: 1
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    expressionChange: function () {
+      if (this.expressions.length) {
+        this.elements = []
+        this.expressions.forEach((expr, i) => {
+          this.elements.push({
+            id: this.expressionsShow[i].elementId,
+            expression: expr,
+            type: 'expert',
+            legend: this.expressionsShow[i].legend,
+            name: this.expressionName[i],
+            state: this.expressionsShow[i].state,
+            orderNum: i
+          })
+        })
+      } else {
+        this.elements = []
+      }
+      this.change()
+    },
+    switchExpression (index, flag) {
+      if (flag === 1) {
+        this.$set(this.expressionsShow[index], 'state', 0)
+      } else {
+        this.$set(this.expressionsShow[index], 'state', 1)
+      }
+      this.expressionChange()
+    },
+    expressionNameChange (index) {
+      if (this.expressionsShow[index].error) {
+        this.expressionName[index] = this.expressionsShow[index].oldName
+        this.expressionsShow[index].error = ''
+      } else if (!this.expressionName[index]) {
+        this.expressionName[index] = this.expressionsShow[index].oldName
+      } else {
+        this.param.rightYAxis && this.param.rightYAxis.elementNames.forEach((item, index) => {
+          if (item == this.expressionsShow[index].oldName) {
+            this.param.rightYAxis.elementNames[index] = this.expressionName[index]
+          }
+        })
+        this.expressionsShow[index].oldName = this.expressionName[index]
+      }
+      this.expressionChange()
+    },
+    expressionNameInput (val, index) {
+      const findIndex = this.expressionName.indexOf(val)
+      const lastIndex = this.expressionName.lastIndexOf(val)
+      if (findIndex !== -1 && lastIndex != -1 && lastIndex !== findIndex) {
+        this.expressionsShow[index].error = this.$t('error.nameDuplicate')
+      } else if (!val) {
+        this.expressionsShow[index].error = this.$t('validate.required')
+      } else {
+        this.expressionsShow[index].error = ''
+      }
+    },
+    showInput (index, flag) {
+      this.expressionsShow[index].hideInput = flag
+    },
+    transformNumToLetter (num) { // 相当于26进制 获取idaddExpression
+      const self = this
+      let letter = ''
+      const loopNum = parseInt(num / 26)
+      if (loopNum > 0) {
+        letter += this.transformNumToLetter(loopNum - 1)
+      }
+      letter += self.letter[num % 26]
+      return letter
+    },
+    getExpressionName () {
+      let name = ''
+      for (let i = 0; i <= this.expressionName.length; i++) {
+        name = this.transformNumToLetter(i)
+        if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
+          break
+        }
+      }
+      return name
+    },
+    addExpression (item) {
+      if (!item) {
+        this.expressions.push('')
+        const expressionName = this.getExpressionName()
+        this.expressionName.push(expressionName)
+        this.expressionsShow.push({
+          show: true,
+          hideInput: true,
+          oldName: expressionName,
+          error: '',
+          legend: '',
+          elementId: '',
+          state: 1
+        })
+        this.expressionChange()
+      } else {
+        this.expressions.push(item.expression)
+        this.expressionName.push(item.name)
+        this.expressionsShow.push({
+          show: true,
+          hideInput: true,
+          oldName: item.name,
+          error: '',
+          elementId: item.id,
+          legend: item.legend,
+          state: item.state
+        })
+      }
+    },
+    copyExpression (index) {
+      this.expressions.push(this.expressions[index])
+      const expressionName = this.getExpressionName()
+      this.expressionName.push(expressionName)
+      this.expressionsShow.push(
+        {
+          ...this.expressionsShow[index],
+          show: true,
+          hideInput: true,
+          oldName: expressionName,
+          error: '',
+          elementId: ''
+        }
+      )
+      this.$nextTick(() => {
+        this.expressions.forEach((ex, index) => {
+          this.$refs[`promql-${index}`][0].metricChange(ex)
+          this.$refs[`promql-${index}`][0].promqlInputChange(ex)
+        })
+      })
+      this.expressionChange()
+    },
+    removeExpression (index) {
+      if (this.expressionsShow.length > 1) {
+        this.param.rightYAxis && this.param.rightYAxis.elementNames.forEach((elementName, subIndex) => {
+          if (elementName == this.expressionName[index]) {
+            this.param.rightYAxis.elementNames.splice(subIndex, 1)
+          }
+        })
+
+        this.expressions.splice(index, 1)
+        this.expressionName.splice(index, 1)
+        this.expressionsShow.splice(index, 1)
+        this.$nextTick(() => {
+          this.expressions.forEach((ex, index) => {
+            this.$refs[`promql-${index}`][0].metricChange(ex)
+            this.$refs[`promql-${index}`][0].promqlInputChange(ex)
+          })
+        })
+        this.expressionChange()
+      }
+    },
+    showExpression (index) {
+      this.expressionsShow[index - 1].show = !this.expressionsShow[index - 1].show
+      this.$set(this.expressionsShow, index - 1, this.expressionsShow[index - 1])
+    },
+    unitSelected: function (value) {
+      // this.unit=value[value.length-1];
+      this.change()
+    },
+    change (key, index) {
+      this.$nextTick(() => {
+        if (key) {
+          this.hideError(key, index)
+        }
+        this.$emit('change', this)
+      })
+    },
+    showError () {
+    },
+    hideError (key, index) {
+      if (!this.param[key] || !this.param[key].length) {
+        return
+      }
+      this.param[key][index].error = false
+      this.$forceUpdate()
+    },
+    move () {
+
+    },
+    end (event) {
+      this.expressions = []
+      this.expressionName = []
+      if (!this.elements.length) {
+        this.addExpression()
+      } else {
+        const expressionsShow = this.$loadsh.cloneDeep(this.expressionsShow)
+        this.elements.forEach((item, index) => {
+          this.expressions.push(item.expression)
+          this.expressionName.push(item.name)
+          // 更新promqlInput视图
+          this.$nextTick(() => {
+            this.$refs[`promql-${index}`][0].promqlInputChange(item)
+          })
+          // 设置orderNum排序
+          item.orderNum = index
+          // expressionsShow调整顺序
+          expressionsShow.forEach((subItem) => {
+            if (item.name == subItem.oldName) {
+              this.$set(this.expressionsShow, index, this.$loadsh.cloneDeep(subItem))
+            }
+          })
+        })
+      }
+      this.change()
+    },
+    start () {
+
+    },
+    init () {
+      // 重置相关属性
+      this.expressions = []
+      this.expressionsShow = []
+      this.expressionName = []
+      if (!this.elements.length) {
+        this.addExpression()
+      } else {
+        // 根据orderNum排序
+        this.elements = this.elements.sort((a, b) => a.orderNum - b.orderNum)
+        this.elements.forEach(item => {
+          this.addExpression(item)
+        })
+        this.expressionChange()
+      }
+    }
+  }
 }
 </script>
 

nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue

@@ -851,41 +851,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .form-row-item{
+
-    vertical-align: top;
-    width: calc(50% - 15px);
-    display: inline-block;
-    box-sizing: border-box;
-    padding: 0 5px;
-    margin-bottom: 10px;
-    .form-row-key{
-      margin-bottom: 5px;
-    }
-  }
-  .special-meta2d-select {
-    /deep/ .el-input.el-input--prefix.el-input--suffix{
-      border: 1px solid #E7EAED;
-      height: 28px;
-    }
-    /deep/ .el-select--small{
-      width: 100%;
-    }
-    /deep/ .el-input__inner{
-      display: none;
-    }
-  }
-  .form-row-item-full{
-    width: 100%;
-  }
-  .form-row-item:nth-of-type(even) {
-    /*margin-left: 10px;*/
-  }
-  .form-row-title{
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 15px;
-  }
-  .form-row-content{
-    margin-bottom: 5px;
-  }
 </style>

nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue

@@ -94,13 +94,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.topo-header {
+
-  height: 60px;
-  box-sizing: border-box;
-  padding: 14px 20px 14px 10px;
-  display: flex;
-  .tools-left{
-    display: flex;
-  }
-}
 </style>

nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue

@@ -4,7 +4,7 @@
     <div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'">
       <div :id="meta2dId" style="height: 100%;width: 100%"></div>
     </div>
-    <meta2dProps ref="meta2dProps" :selectPens.sync="selectPens" :querysArray="querysArray" @updatePens="updatePens" v-if="editFlag"/>
+    <meta2dProps ref="meta2dProps" :selectPens.sync="selectPens" :querysArray="querysArray" :timeType="timeType" @updatePens="updatePens" v-if="editFlag"/>
   </div>
 </template>
 
@@ -12,6 +12,7 @@
 import meta2dHeader from '@/components/common/project/meta2d/meta2dHeader'
 import meta2dProps from '@/components/common/project/meta2d/meta2dProps'
 import meta2dMain from '@/components/common/project/meta2d/js/meta2dMain'
+import { getTopology, setTopology } from '@/components/common/js/common'
 export default {
   name: 'meta2dMain',
   mixins: [meta2dMain],
@@ -23,6 +24,7 @@ export default {
       default: false
     },
     querysArray: {},
+    timeType: {},
     projectName: {}
   },
   components: {
@@ -41,27 +43,15 @@ export default {
   },
   methods: {
 
+  },
+  beforeDestroy () {
+    getTopology(this.meta2dId).destroy()
+    setTopology(this.meta2dId, null)
   }
 
 }
 </script>
 
 <style scoped lang="scss">
-  .meta2d-box{
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-  .meta2d-main{
-    width: 100%;
-    height: 100%;
-  }
-  .meta2d-chart{
 
-  }
-  .meta2d-project{
-    height: calc(100% - 78px);
-    border: 1px solid;
-    border-color: #999999;
-  }
 </style>

nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue

@@ -8,7 +8,7 @@
         <meta2dCanvas />
       </el-tab-pane>
       <el-tab-pane label="data" name="data">
-        <meta2dData :querysArray="querysArray"/>
+        <meta2dData :querysArray.sync="querysArray" :timeType.sync="timeType"/>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -22,7 +22,8 @@ export default {
   name: 'meta2dProps',
   props: {
     selectPens: {},
-    querysArray: {}
+    querysArray: {},
+    timeType: {}
   },
   components: {
     meta2dElement,
@@ -61,13 +62,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .props-box {
+
-    width: 500px;
-    position: absolute;
-    height: calc(100% - 78px);
-    top: 61px;
-    padding: 0 !important;
-    box-sizing: border-box;
-    right: 0;
-  }
 </style>

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -715,6 +715,7 @@ export default {
         this.oldcCodeLength = 0
         this.codeMirrorValue[this.index] = ''
         // this.expressionList[this.index] = ''
+        console.log(this.index)
         this.$set(this.expressionList, this.index, '')
         this.$emit('change', '')
       }
@@ -1182,6 +1183,7 @@ export default {
       deep: true,
       immediate: true,
       handler (n, o) {
+        console.log(n)
         this.codeMirrorValue[this.index] = n[this.index]
         if (this.isTopo && this.firstInit) {
           setTimeout(() => {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="project">
 <!--    <topologyL5 v-if="reloadFacade" ref="facade" :obj="currentProject" :topologyIndexF="topologyIndexF" targetTab.sync="panel" @changeTopologyIndexF="changeTopologyIndexF"/>-->
-    <meta2dMain :meta2dId="'projectId'" :topoData="topoData" :querysArray="querysArray" :projectName="currentProject.name"/>
+    <meta2dMain :meta2dId="'projectId'" :topoData="topoData" :querysArray="querysArray" :projectName="currentProject.name" :timeType="timeType"/>
     <transition name="el-zoom-in-bottom">
       <bottom-box
         v-if="bottomBox.showSubList"