fix：调整react-JSX语法为 vueJSX 解决控制台报错

nezha-fronted/.babelrc

@@ -12,7 +12,8 @@
           ]
         }
       }
-    ]
+    ],
+    "@vue/babel-preset-jsx"
   ],
   "plugins": [
     "transform-vue-jsx",

nezha-fronted/build/webpack.base.conf.js

@@ -65,7 +65,7 @@ const baseConfig = {
         ],
         exclude: '/node_modules/',
         options: {
-          presets: ['@babel/preset-env', '@babel/preset-react']
+          presets: ['@babel/preset-env', '@vue/babel-preset-jsx']
         }
       },
       {

nezha-fronted/package.json

@@ -50,6 +50,8 @@
     "@topology/flow-diagram": "^1.1.1",
     "@topology/form-diagram": "^1.1.32",
     "@topology/sequence-diagram": "^1.1.0",
+    "@vue/babel-preset-app": "^5.0.8",
+    "@vue/babel-preset-jsx": "^1.4.0",
     "awesome-qr": "^2.1.5-rc.0",
     "axios": "^0.19.0",
     "babel-loader": "^8.3.0",
@@ -99,6 +101,7 @@
     "vue-grid-layout": "^2.3.12",
     "vue-i18n": "^8.15.1",
     "vue-introjs": "^1.3.2",
+    "vue-jsx": "^0.2.9",
     "vue-monaco": "^1.2.2",
     "vue-quill-editor": "^3.0.6",
     "vue-resource": "^1.5.1",
@@ -115,21 +118,6 @@
   "devDependencies": {
     "@babel/cli": "^7.7.0",
     "@babel/core": "^7.7.2",
-    "@babel/plugin-syntax-jsx": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.7.1",
-    "@babel/register": "^7.7.0",
-    "@vue/test-utils": "^1.0.0-beta.29",
-    "autoprefixer": "^9.6.4",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-component": "^1.1.1",
-    "babel-plugin-dynamic-import-node": "^2.3.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "babel-plugin-transform-vue-jsx": "^3.7.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-decorators": "^7.0.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
@@ -140,8 +128,23 @@
     "@babel/plugin-proposal-throw-expressions": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/plugin-syntax-jsx": "^7.2.0",
     "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/register": "^7.7.0",
+    "@vue/test-utils": "^1.0.0-beta.29",
+    "autoprefixer": "^9.6.4",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.3",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-jest": "^23.4.2",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-component": "^1.1.1",
+    "babel-plugin-dynamic-import-node": "^2.3.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
     "cache-loader": "^4.1.0",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",

nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss

@@ -71,6 +71,13 @@
     padding-left: 10px;
   }
 }
+.legend-title-new {
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: $--color-text-regular;
+  letter-spacing: 0;
+  font-weight: 400;
+}
 /*metric样式--end*/
 .label-center{
   vertical-align: middle;

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -95,24 +95,44 @@
                 ></promql-input>
               </el-form-item>
               <el-row style="margin-top: 18px;display: flex">
-                <el-col class="legend-title">
+                <div style="width: 310px;flex-shrink: 0">
+                  <div class="legend-title-new">
                     <span class="legend-title__span">{{$t('dashboard.dashboard.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.dashboard.chartForm.legendTip')}}</div>
                       <!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.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>
+                  </div>
-                <el-col style="flex: 1">
+                  <div>
                     <el-input maxlength="512" size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
-                </el-col>
+                  </div>
-                <el-col class="legend-title" style="margin-left: 10px">
+                </div>
+                <div style="margin-left: 10px;">
+                  <div class="legend-title-new" style="width: 55px">
+                    <span class="legend-title__span">{{$t('overall.type')}}&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.dashboard.chartForm.legendTip')}}</div>
+                      <!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.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>
+                  </div>
+                  <div style="flex: 1">
+                    <el-select size="small" v-model="expressionsShow[index-1].queryType">
+                      <el-option :label="'range'" :value="'range'">range</el-option>
+                      <el-option :label="'instant'" :value="'instant'">instant</el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div style="margin-left: 10px;">
+                  <div class="legend-title-new" style="margin-left: 10px;width: 55px">
                     <span class="legend-title__span">{{$t('overall.step')}}&nbsp;</span>
-                </el-col>
+                  </div>
-                <el-col style="flex: 1">
+                  <div style="flex: 1">
                     <el-input-number @change="expressionChange" v-model="expressionsShow[index-1].step" size="small" :min="minStep" :precision="0" :controls="false" class="append_unit" :placeholder="$t('overall.auto')" :data-unit="$t('overall.seconds')">
                     </el-input-number>
-                </el-col>
+                  </div>
+                </div>
               </el-row>
             </el-row>
           </transition>

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -384,7 +384,7 @@ export default {
           height: 2,
           unit: 2,
           type: 'line',
-          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined }],
+          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 'range' }],
           param: {
             stack: 0,
             nullType: 'null',
@@ -427,7 +427,7 @@ export default {
             height: 2,
             unit: 2,
             type: 'line',
-            elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined }],
+            elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 'range' }],
             param: {
               stack: 0,
               nullType: 'null',
@@ -468,7 +468,7 @@ export default {
             height: 2,
             unit: 2,
             type: 'log',
-            elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined }],
+            elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 'range' }],
             param: {
               enable: {
                 thresholds: false,
@@ -610,6 +610,14 @@ export default {
       immediate: true,
       handler (n) {
         const obj = JSON.parse(JSON.stringify(n))
+        console.log(obj)
+        if (obj && obj.elements) {
+          obj.elements.forEach((item)=>{
+            if (!item.queryType) {
+              item.queryType = 'range'
+            }
+          })
+        }
         if (obj.param && !obj.param.valueMapping) {
           obj.param.valueMapping = []
         }

nezha-fronted/src/components/common/rightBox/chart/publicConfig.js

@@ -329,14 +329,15 @@ export default {
               name: this.expressionName[i],
               state: this.expressionsShow[i].state,
               orderNum: i,
-              step: this.expressionsShow[i].step
+              step: this.expressionsShow[i].step,
+              queryType: this.expressionsShow[i].queryType,
             })
           }
         })
       } else {
         this.chartConfig.elements = []
       }
-      this.$refs.chartForm.validate('elements.' + (index) + '.expression')
+      this.$refs.chartForm?.clearValidate('elements.' + (index) + '.expression')
       this.change()
     },
     switchExpression (index, flag) {
@@ -412,7 +413,8 @@ export default {
           legend: '',
           elementId: '',
           state: 1,
-          step: undefined
+          step: undefined,
+          queryType: 'range'
         })
         this.expressionChange()
       } else {
@@ -427,7 +429,8 @@ export default {
           elementId: item.id,
           legend: item.legend,
           state: item.state,
-          step: item.step
+          step: item.step,
+          queryType: item.queryType
         })
       }
     },

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

@@ -273,7 +273,7 @@ export default {
             sort: 'none'
           },
         },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0, step: undefined }],
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0, step: undefined, queryType: 'range' }],
         panel: '',
         sync: 0,
         remark: '',