From a95e7638bb443967cee7ac5f48307d097b425c34 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 25 Mar 2021 12:38:29 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=B7=BB=E5=8A=A0=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bottomBox/tabs/endpointQueryTab.vue       |   1 -
 .../bottomBox/tabs/terminalLogMonitorTab.vue  |   1 -
 .../src/components/common/js/tools.js         |   2 +-
 .../src/components/common/language/cn.js      |  14 +-
 .../src/components/common/language/en.js      |  14 +-
 .../common/project/L5/services/canvas.js      |   1 -
 .../common/rightBox/assetMetaBox.vue          |  52 +++---
 .../src/components/page/alert/silence.vue     |   1 -
 .../page/asset/components/assetTagEx.vue      | 161 ++++++++++++++++++
 .../src/components/page/config/assetMeta.vue  |   4 -
 .../src/components/page/config/exprTemp.vue   |   1 -
 .../page/dashboard/overview/chart.vue         |   1 -
 12 files changed, 220 insertions(+), 33 deletions(-)
 create mode 100644 nezha-fronted/src/components/page/asset/components/assetTagEx.vue

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 792c06b77..9ffc89889 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -254,7 +254,6 @@ export default {
             if (!this.scrollbarWrap) {
               this.$nextTick(() => {
                 this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper
-                console.info(this.scrollbarWrap)
                 this.toTopBtnHandler(this.scrollbarWrap)
               })
             }
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
index d7e2d02dc..a87610a39 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
@@ -91,7 +91,6 @@ export default {
       }
       /// monitor
       const url = baseUrl + '/terminal/monitor.ws?' + '&token=' + token + '&uuid=' + this.obj.uuid
-      console.info(url)
       if (this.terminalSocket) { // 如果存在之前的链接 先断开 再链接新的
         this.terminalSocket.close()
       }
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 539127430..62b0e2972 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -2,7 +2,7 @@ import { getChart } from './common'
 import MessageBox from 'element-ui/packages/message-box/src/main'
 import i18n from '../i18n'
 /* 弹窗点击外部后关闭 */
-const exceptClassName = ['config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'asset-dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
+const exceptClassName = ['config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'asset-dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box','el-time-panel'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
   // 初始化指令
   bind (el, binding, vnode) {
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index b3db77108..d4e50901f 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -958,7 +958,19 @@ const cn = {
       integer: '整数',
       double: '小数',
       datetime: '日期',
-      email: '邮箱'
+      email: '邮箱',
+      option: '选项',
+      isCheck: '是否默认选择',
+      operate: '操作',
+      default: '默认',
+      dateType: '日期类型',
+      date: '日期',
+      time: '时间',
+      datetimes: '时间+时间',
+      interval: '区间',
+      decimals: '精度',
+      moreOptionsError: '选项最多20条',
+      onlyOptionError: '至少需要一个选项'
     },
     exprTemp: {
       exprTemp: 'expression模板',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 23c38424a..e4eab3932 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -961,7 +961,19 @@ const en = {
       integer: 'INTEGER',
       double: 'DOUBLE',
       datetime: 'DATETIME',
-      email: 'EMAIL'
+      email: 'EMAIL',
+      option: 'Options',
+      isCheck: 'Is check',
+      operate: 'Operate',
+      default: 'Default',
+      dateType: 'Date type',
+      date: 'Date',
+      time: 'Time',
+      datetimes: 'Date + Time',
+      interval: 'Interval',
+      decimals: 'Decimals',
+      moreOptionsError: 'There are up to 20 options',
+      onlyOptionError: 'You need at least one option'
     },
     exprTemp: {
       exprTemp: 'Expression template',
diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
index dbc8dde60..3b8a79792 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -305,7 +305,6 @@ export function myCubeAnchors (node) { // 立方体锚点
 /* 自定义立方体 */
 
 export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
-  console.log(node)
   node.animateType = animateType
   if (node.animateType === 'custom') {
     return
diff --git a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
index d6fee2200..a2e5db177 100644
--- a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
@@ -75,13 +75,13 @@
             <div v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='checkbox' || editAssetMeta.type==='select'" class="meta-option-box">
               <el-row class="asset-meta-param-row asset-meta-param-header">
                 <el-col :span="12">
-                  选项
+                  {{$t('config.assetMeta.option')}}
                 </el-col>
                 <el-col :span="6">
-                  是否默认
+                  {{$t('config.assetMeta.isCheck')}}
                 </el-col>
                 <el-col :span="6">
-                  操作
+                  {{$t('config.assetMeta.operate')}}
                 </el-col>
               </el-row>
               <el-row v-for="(item,index) in editAssetMeta.param.items" :key="index" class="asset-meta-param-row">
@@ -89,9 +89,9 @@
                   <el-input v-model = "item.name" size="small" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" @input="(val)=>{inputChange(index, val)}" :ref="'metaNameOption'+index"></el-input>
                 </el-col>
                 <el-col :span="6">
-                  <el-radio v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='select'" v-model = "item.check" :label="true" @change="radioChange(index)">默认</el-radio>
+                  <el-radio v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='select'" v-model = "item.check" :label="true" @change="radioChange(index)">{{$t('config.assetMeta.default')}}</el-radio>
 
-                  <el-checkbox v-else v-model="item.check" @change="checkBoxChange">默认</el-checkbox>
+                  <el-checkbox v-else v-model="item.check" @change="checkBoxChange"> {{$t('config.assetMeta.default')}}</el-checkbox>
 
                 </el-col>
                 <el-col :span="6">
@@ -109,15 +109,15 @@
 
             <div v-if="editAssetMeta.type==='datetime'">
               <el-row style="margin-bottom: 10px">
-                <span class="datetime-header">日期类型: </span>
-                <el-radio-group v-model="editAssetMeta.param.subType" @change="()=>{console.log(editAssetMeta.param.subType)}">
-                  <el-radio :label="'date'">日期</el-radio>
-                  <el-radio :label="'time'">时间</el-radio>
-                  <el-radio :label="'dateTime'">日期+时间</el-radio>
+                <span class="datetime-header">{{$t('config.assetMeta.dateType')}}: </span>
+                <el-radio-group v-model="editAssetMeta.param.subType">
+                  <el-radio :label="'date'">{{$t('config.assetMeta.date')}}</el-radio>
+                  <el-radio :label="'time'">{{$t('config.assetMeta.time')}}</el-radio>
+                  <el-radio :label="'datetime'">{{$t('config.assetMeta.datetimes')}}</el-radio>
                 </el-radio-group>
               </el-row>
               <el-row>
-                <span class="datetime-header">是否区间: </span>
+                <span class="datetime-header">{{$t('config.assetMeta.interval')}}: </span>
                 <el-switch
                   v-model="editAssetMeta.param.interval"
                   @change="$forceUpdate"
@@ -126,6 +126,12 @@
               </el-row>
             </div>
 
+            <div v-if="editAssetMeta.type==='double'">
+              <el-row>
+                <span class="datetime-header">{{$t('config.assetMeta.decimals')}}: </span>
+                <el-input-number v-model="editAssetMeta.param.decimals" @change="$forceUpdate" :min="0" :max="10" :controls="false" size="small"></el-input-number>
+              </el-row>
+            </div>
           </el-form-item>
 
           <el-form-item :label='$t("overall.remark")' prop="remark">
@@ -133,6 +139,7 @@
           </el-form-item>
 
           <el-form-item :label='$t("config.assetMeta.example")'>
+            <assetTagEx :type="editAssetMeta.type" :param="editAssetMeta.param"/>
           </el-form-item>
 
         </el-form>
@@ -155,12 +162,13 @@
 </template>
 
 <script>
+import assetTagEx from '../../page/asset/components/assetTagEx'
 export default {
   name: 'assetMetaBox',
   props: {
     assetMeta: {}
   },
-  components: {},
+  components: { assetTagEx },
   data () {
     return {
       editAssetMeta: {
@@ -261,7 +269,7 @@ export default {
       this.$refs.editAssetMetaForm.validate((valid) => {
         if (valid) {
           const param = { ...this.editAssetMeta }
-          if (param.type !== 'radio' && param.type !== 'checkbox' && param.type !== 'select' && param.type !== 'datetime'){
+          if (param.type !== 'radio' && param.type !== 'checkbox' && param.type !== 'select' && param.type !== 'datetime') {
             delete param.param
           } else {
             param.param = JSON.stringify(param.param)
@@ -321,12 +329,10 @@ export default {
       this.$get('asset/field/group', { pageSize: -1 }).then(response => {
         if (response.code == 200) {
           this.groupData = response.data.list
-          console.log(this.groupData)
         }
       })
     },
     selectType (val, init) {
-      console.log(val)
       switch (val) {
         case 'radio' :
         case 'checkbox' :
@@ -350,6 +356,13 @@ export default {
             interval: false
           }
           break
+        case 'double' :
+          this.showParam = true
+          if (init) return
+          this.editAssetMeta.param = {
+            decimals: 2
+          }
+          break
         default:
           this.showParam = false
           break
@@ -361,7 +374,6 @@ export default {
       this.$forceUpdate()
     },
     radioChange (i) {
-      console.log(i)
       this.editAssetMeta.param.items.forEach((item, index) => {
         if (index === i) {
           item.check = !!item.check
@@ -375,8 +387,8 @@ export default {
       this.$forceUpdate()
     },
     addParam () {
-      if (this.editAssetMeta.param.items.length > 20) {
-        this.$message.error('选项最多20条')
+      if (this.editAssetMeta.param.items.length >= 20) {
+        this.$message.error(this.$t('config.assetMeta.moreOptionsError'))
         return
       }
       this.editAssetMeta.param.items.push({
@@ -386,8 +398,8 @@ export default {
       this.$forceUpdate()
     },
     deleteParam (index) {
-      if (this.editAssetMeta.param.items.length > 20) {
-        this.$message.error('至少需要一个选项')
+      if (this.editAssetMeta.param.items.length === 1) {
+        this.$message.error(this.$t('config.assetMeta.onlyOptionError'))
         return
       }
       this.editAssetMeta.param.items.splice(index, 1)
diff --git a/nezha-fronted/src/components/page/alert/silence.vue b/nezha-fronted/src/components/page/alert/silence.vue
index 64c6bfe33..2a3a7e91d 100644
--- a/nezha-fronted/src/components/page/alert/silence.vue
+++ b/nezha-fronted/src/components/page/alert/silence.vue
@@ -354,7 +354,6 @@ export default {
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
           this.nowTime = this.utcTimeToTimezoneStr(response.time)
-          console.info(this.$refs.alertSilenceTable)
           if (!this.scrollbarWrap) {
             this.$nextTick(() => {
               this.scrollbarWrap = this.$refs.alertSilenceTable.bodyWrapper
diff --git a/nezha-fronted/src/components/page/asset/components/assetTagEx.vue b/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
new file mode 100644
index 000000000..14596c54b
--- /dev/null
+++ b/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <div v-if="type==='text'">
+      <el-input size="small" maxlength="128"/>
+    </div>
+    <div v-else-if="type==='multitext'">
+      <el-row v-for="(item, index) in inputArr" :key="index" style="margin-bottom: 10px">
+        <el-col :span="20"><el-input v-model="item.value"  size="small" maxlength="128"/></el-col>
+        <el-col :span="2" style="text-align: center">
+        <span class="nz-icon-minus-medium">
+          <i @click="deleteInput(index)" class="nz-icon nz-icon-minus"></i>
+        </span>
+        </el-col>
+        <el-col :span="2" style="text-align: center">
+          <span v-if=" index=== inputArr.length-1" @click="addInput" style="display: inline-block;">
+      <span class="create-square-box">
+        <i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
+      </span>
+    </span>
+        </el-col>
+      </el-row>
+    </div>
+    <div v-else-if="type==='textarea'">
+      <el-input size="small" type="textarea" maxlength="512" :autosize="{ minRows: 2, maxRows: 4}"/>
+    </div>
+    <div v-else-if="type==='radio'">
+      <el-radio-group v-model="optionValue" >
+        <el-radio v-for="(item,index) in option.items" :label="item.name" :key="index">{{item.name}}</el-radio>
+      </el-radio-group>
+    </div>
+    <div v-else-if="type==='checkbox'">
+      <el-checkbox-group v-model="checkOption" >
+        <el-checkbox  v-for="(item,index) in option.items" :label="item.name" :key="index">{{item.name}}</el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <div v-else-if="type==='select'">
+      <el-select v-model="optionValue" :popper-append-to-body="false" size="small">
+        <el-option  v-for="(item,index) in option.items" :label="item.name" :value="item.name" :key="index"></el-option>
+      </el-select>
+    </div>
+    <div v-else-if="type==='integer'">
+      <el-input-number size="small" maxlength="64" :controls="false"></el-input-number>
+    </div>
+    <div v-else-if="type==='double'">
+      <el-input-number  size="small" :precision="param.decimals" :controls="false"></el-input-number>
+    </div>
+    <div v-else-if="type==='datetime'">
+      <div v-if="param.subType==='date'">
+        <el-date-picker
+          size="small"
+          :type="param.interval?'daterange':'date'"
+          :range-separator="$t('dashboard.panel.to')"
+          :placeholder="$t('alert.silence.selectTime')"
+          :start-placeholder="$t('dashboard.panel.startTime')"
+          :end-placeholder="$t('dashboard.panel.endTime')"
+        >
+        </el-date-picker>
+      </div>
+      <div v-if="param.subType==='time'">
+        <el-time-picker
+          size="small"
+          :is-range="param.interval"
+          :range-separator="$t('dashboard.panel.to')"
+          :placeholder="$t('alert.silence.selectTime')"
+          :start-placeholder="$t('dashboard.panel.startTime')"
+          :end-placeholder="$t('dashboard.panel.endTime')"
+        >
+        </el-time-picker>
+      </div>
+      <div v-if="param.subType==='datetime'">
+        <el-date-picker
+          size="small"
+          :type="param.interval?'datetimerange':'datetime'"
+          :range-separator="$t('dashboard.panel.to')"
+          :placeholder="$t('alert.silence.selectTime')"
+          :start-placeholder="$t('dashboard.panel.startTime')"
+          :end-placeholder="$t('dashboard.panel.endTime')">
+        </el-date-picker>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'assetTagEx',
+  props: {
+    type: {},
+    option: {
+      type: Object,
+      default: () => {
+        return {
+          items: [{ name: 'option 1', check: true }, { name: 'option 2', check: false }]
+        }
+      }
+    },
+    param: {
+      type: Object
+    },
+    value: {}
+  },
+  components: {},
+  data () {
+    return {
+      inputArr: [{ value: '' }],
+      optionValue: '',
+      checkOption: [],
+      daterange: [],
+      date: null
+    }
+  },
+  watch: {
+    option: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          if (this.type === 'radio' || this.type === 'select') {
+            n.items.forEach(item => {
+              if (item.check) {
+                this.optionValue = item.name
+              }
+            })
+          } else if (this.type === 'checkbox') {
+            n.items.forEach(item => {
+              if (item.check) {
+                this.checkOption.push(item.name)
+              }
+            })
+          }
+        }
+      }
+    },
+    param: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (this.type === 'datetime') {
+          // console.log(12312312)
+        }
+      }
+    }
+  },
+  mounted () {},
+  methods: {
+    addInput () {
+      this.inputArr.push({ value: '' })
+    },
+    deleteInput (index) {
+      if (this.inputArr.length <= 1) {
+        this.$message.error(this.$t('config.assetMeta.onlyOptionError'))
+        return
+      }
+      this.inputArr.splice(index, 1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/page/config/assetMeta.vue b/nezha-fronted/src/components/page/config/assetMeta.vue
index 16fee2391..bf73bd649 100644
--- a/nezha-fronted/src/components/page/config/assetMeta.vue
+++ b/nezha-fronted/src/components/page/config/assetMeta.vue
@@ -352,7 +352,6 @@ export default {
         this.tools.loading = false
         if (response.code == 200) {
           this.groupData[0].children = response.data.list
-          console.log(this.groupData)
           this.$forceUpdate()
         }
       })
@@ -423,18 +422,15 @@ export default {
       this.getAssetMeta()
     },
     addGroup () {
-      console.log(123123123123)
       this.metaGroup = JSON.parse(JSON.stringify(this.blackMetaGroup))
       this.rightBox.groupShow = true
     },
     editGroup (group) {
-      console.log(group)
       this.metaGroup = JSON.parse(JSON.stringify(group))
       this.rightBox.groupShow = true
     },
     delGroup (group) {
       const selectKey = this.$refs.groupTree.getCurrentKey()
-      console.log(selectKey)
       if (this.prevent_opt.save) {
         return
       }
diff --git a/nezha-fronted/src/components/page/config/exprTemp.vue b/nezha-fronted/src/components/page/config/exprTemp.vue
index c689f10e0..1e9607bc9 100644
--- a/nezha-fronted/src/components/page/config/exprTemp.vue
+++ b/nezha-fronted/src/components/page/config/exprTemp.vue
@@ -312,7 +312,6 @@ export default {
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
           this.nowTime = this.utcTimeToTimezoneStr(response.time)
-          console.info(this.$refs.exprTempTable)
           if (!this.scrollbarWrap) {
             this.$nextTick(() => {
               this.scrollbarWrap = this.$refs.exprTempTable.bodyWrapper
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index 007672a14..ef07da359 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -178,7 +178,6 @@ export default {
         if (this.option.series instanceof Array) {
           this.option.series = this.option.series.filter((item, index) => index < this.dataSize)
         }
-        console.log('option', this.option)
         this.chart.setOption(this.option)
       } else {
         this.noData = true