feat： system-chart-config(30%)

nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss

@@ -113,5 +113,32 @@
         padding: 1px 3px;
       }
     }
+    .system-chart-config {
+      display: flex;
+      height: 150px;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+    .system-chart-config-left{
+      width: 40%;
+      height: 100%;
+      overflow-y: auto;
+      .system-chart-item {
+        font-size: 14px;
+        padding: 3px 5px;
+      }
+      .system-chart-item:hover{
+        color: $--color-primary;
+        background: $--background-color-base !important;
+      }
+      .system-chart-item.is-select{
+        color: $--color-text-secondary;
+      }
+    }
+    .system-chart-config-right{
+      flex: 1;
+      margin-left: 10px;
+      height: 100%;
+    }
   }
 }

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

@@ -67,7 +67,7 @@
           <el-tab-pane label="System" name="3">
             <system-chart-config ref="childrenFrom3" v-if="editChart.datasource == 3" :params.sync="editChart"/>
           </el-tab-pane>
-          <el-tab-pane label="Other" name="4">
+          <el-tab-pane label="Misc" name="4">
             <other-chart-config ref="childrenFrom4" v-if="editChart.datasource == 4" :params.sync="editChart"/>
           </el-tab-pane>
         </el-tabs>
@@ -261,6 +261,24 @@ export default {
           }
         }
       }
+      if (this.editChart.datasource == 3) {
+        this.editChart = {
+          ...this.editChart,
+          span: 4,
+          height: 4,
+          unit: 2,
+          type: 'stat',
+          param: {
+            refer: 1,
+            system: '',
+            systemGroup: '',
+            systemSelect: '',
+            sort: 'desc',
+            limit: 100
+          }
+        }
+        delete this.editChart.elements
+      }
       if (this.editChart.datasource == 4) {
         this.editChart = {
           ...this.editChart,
@@ -271,6 +289,7 @@ export default {
             url: ''
           }
         }
+        delete this.editChart.elements
       }
     },
     editChartChange (newEditChart) {

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

@@ -46,7 +46,7 @@
                      size="small"/>
         </el-form-item>
       </div>
-      <div class="form-items--half-width-group">
+      <div class="form-items--half-width-group" v-if="!isGroup(chartConfig.type)">
         <!--width-->
         <el-form-item
           :label="$t('dashboard.panel.chartForm.width')"
@@ -137,9 +137,7 @@ export default {
   },
   data () {
     return {
-      rules: {
-        height: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
-      },
+      rules: {},
       topologyDialog: false,
       chartTypeList: [
         {
@@ -168,7 +166,6 @@ export default {
     chartTypeChange (type) {
       switch (type) {
         case 'group':
-          this.chartConfig.height = ''
           this.chartConfig.span = 12
           this.chartConfig.param = {
             collapse: false

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

@@ -1,118 +1,178 @@
 <template>
-  <el-form
-    ref="chartForm"
-    :model="chartConfig"
-    :rules="rules"
-    label-position= "top"
-    label-width="120px"
-  >
-    content
-    <!--title-->
-    <div class="form__sub-title">
-      <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
-    </div>
-    <div class="form-items--half-width-group">
-      <!-- type -->
-      <el-form-item
-        :label="$t('dashboard.panel.chartForm.type')"
-        class="form-item--half-width"
-        prop="type"
-      >
-        <el-select
-          id="chart-box-type"
-          v-model="chartConfig.type"
-          :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
-          placeholder=""
-          popper-class="right-box-select-top prevent-clickoutside"
-          size="small"
-          value-key="chartType"
-          @change="chartTypeChange">
-          <el-option
-            v-for="item in chartTypeList"
-            :key="item.id"
-            :disabled="item.id==='group' && chartConfig.isGroup"
-            :label="item.name"
-            :value="item.id">
-            <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <!--refer-->
-      <el-form-item
-        :label="$t('dashboard.panel.chartForm.refer')"
-        class="form-item--half-width"
-        prop="param.stack"
-      >
-        <el-select
-          id="chart-box-height"
-          v-model="chartConfig.param.refer"
-          placeholder=""
-          popper-class="right-box-select-top prevent-clickoutside"
-          size="small"
-          value-key="chartSpan"
-          @change="change"
-        >
-          <el-option :value="1" label="true">
-          </el-option>
-          <el-option :value="0" label="false">
-          </el-option>
-        </el-select>
-      </el-form-item>
-    </div>
-    <div class="form-items--half-width-group">
-      <!--width-->
-      <el-form-item
-        :label="$t('dashboard.panel.chartForm.width')"
-        class="form-item--half-width"
-        prop="span">
-        <el-select
-          id="chart-box-span"
-          v-model="chartConfig.span"
-          :disabled="chartConfig.type === 'group'"
-          placeholder=""
-          popper-class="right-box-select-top prevent-clickoutside"
-          size="small"
-          value-key="chartSpan"
-          @change="change"
-        >
-          <el-option
-            v-for="item in spanList"
-            :key="item"
-            :label="'span-' + item"
-            :value="item">
-            <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-          </el-option>
-        </el-select>
-      </el-form-item>
+  <div class="chart-config">
+    <el-form
+      ref="chartForm"
+      :model="chartConfig"
+      :rules="rules"
+      label-position= "top"
+      label-width="120px"
+    >
+      <div class="system-chart-config">
+        <div class="system-chart-config-left">
+          <ul>
+            <li v-for="(item,index) in mockData" :key="index" class="system-chart-item" :class="''">{{item.name}}</li>
+          </ul>
+        </div>
+        <div class="system-chart-config-right">
+          <div class="form-items--half-width-group">
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.group')"
+              class="form-item--half-width"
+              prop="param.systemGroup"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <el-select size="small">
 
-      <!--height-->
-      <el-form-item
-        :label="$t('dashboard.panel.chartForm.high')"
-        class="form-item--half-width"
-        prop="height">
-        <!-- 由px改为span -->
-        <el-select
-          id="chart-box-height"
-          v-model="chartConfig.height"
-          :disabled="chartConfig.type === 'group'"
-          placeholder=""
-          popper-class="right-box-select-top prevent-clickoutside"
-          size="small"
-          value-key="chartSpan"
-          @change="change"
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.select')"
+              class="form-item--half-width"
+              prop="param.stack"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <el-input  size="small"/>
+            </el-form-item>
+          </div>
+          <div class="form-items--half-width-group">
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.sort')"
+              class="form-item--half-width"
+              prop="param.sort"
+            >
+              <el-select
+                id="chart-box-height"
+                v-model="chartConfig.param.sort"
+                placeholder=""
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                value-key="chartSpan"
+                @change="change"
+              >
+                <el-option :value="'desc'" :label="$t('dashboard.explore.descending')">
+                </el-option>
+                <el-option :value="'asc'" :label="$t('dashboard.explore.ascending')">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.limit')"
+              class="form-item--half-width"
+              prop="param.limit"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <el-input-number :controls="false" v-model="chartConfig.param.limit"  size="small"/>
+            </el-form-item>
+          </div>
+        </div>
+      </div>
+      <!--title-->
+      <div class="form__sub-title">
+        <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
+      </div>
+      <div class="form-items--half-width-group">
+        <!-- type -->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.type')"
+          class="form-item--half-width"
+          prop="type"
         >
-          <el-option
-            v-for="item in spanList"
-            :key="item"
-            :label="'span-' + item"
-            :value="item"
+          <el-select
+            id="chart-box-type"
+            v-model="chartConfig.type"
+            :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartType"
+            @change="chartTypeChange">
+            <el-option
+              v-for="item in chartTypeList"
+              :key="item.id"
+              :disabled="item.id==='group' && chartConfig.isGroup"
+              :label="item.name"
+              :value="item.id">
+              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <!--refer-->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.refer')"
+          class="form-item--half-width"
+          prop="param.stack"
+        >
+          <el-select
+            id="chart-box-height"
+            v-model="chartConfig.param.refer"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
           >
-            <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-          </el-option>
-        </el-select>
-      </el-form-item>
-    </div>
-  </el-form>
+            <el-option :value="1" label="true">
+            </el-option>
+            <el-option :value="0" label="false">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="form-items--half-width-group">
+        <!--width-->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.width')"
+          class="form-item--half-width"
+          prop="span">
+          <el-select
+            id="chart-box-span"
+            v-model="chartConfig.span"
+            :disabled="chartConfig.type === 'group'"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
+          >
+            <el-option
+              v-for="item in spanList"
+              :key="item"
+              :label="'span-' + item"
+              :value="item">
+              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--height-->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.high')"
+          class="form-item--half-width"
+          prop="height">
+          <!-- 由px改为span -->
+          <el-select
+            id="chart-box-height"
+            v-model="chartConfig.height"
+            :disabled="chartConfig.type === 'group'"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
+          >
+            <el-option
+              v-for="item in spanList"
+              :key="item"
+              :label="'span-' + item"
+              :value="item"
+            >
+              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
 </template>
 
 <script>
@@ -125,26 +185,20 @@ export default {
   data () {
     return {
       mockData,
-      rules: {
-        height: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
-      },
+      rules: {},
       chartTypeList: [
         {
-          id: 'url',
-          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
         },
         {
-          id: 'text',
-          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
         },
         {
-          id: 'diagram',
-          name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
         },
-        {
-          id: 'group',
-          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
-        }
       ]
     }
   },
@@ -179,6 +233,9 @@ export default {
       }
       this.change()
     },
+  },
+  created () {
+    this.init()
   }
 }
 </script>

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

@@ -1,47 +1,48 @@
 const data = [{
   name: 'asset',
   datasql: 'SELECT t.*,atc.vm,atc.vmh,atc.NAME as type,assc.NAME as state,ab.NAME as brand,am.NAME as model,dc.NAME as datacenterName,cabinet.NAME as cabinet,ap.`status` as ping FROM asset_asset t LEFT JOIN asset_type_conf atc ON t.type_id = atc.id LEFT JOIN asset_state_conf assc ON t.state_id = assc.id LEFT JOIN asset_brand ab ON t.brand_id = ab.id LEFT JOIN asset_model am ON t.model_id = am.id LEFT JOIN dc ON t.dc_id = dc.id LEFT JOIN cabinet ON t.cabinet_id = cabinet.id LEFT JOIN asset_ping ap ON t.id = ap.asset_id',
-  group: [{
-    name: 'datacenter',
-    expr: 'datacenterName',
-    type: 2
-  }, {
-    name: 'name',
-    expr: 'name',
-    type: 2
-  }, {
-    name: 'vm',
-    expr: 'vm',
-    type: 2
-  }, {
-    name: 'vmh',
-    expr: 'vmh',
-    type: 2
-  }, {
-    name: 'type',
-    expr: 'type',
-    type: 2
-  }, {
-    name: 'state',
-    expr: 'state',
-    type: 2
-  }, {
-    name: 'brand',
-    expr: 'brand',
-    type: 2
-  }, {
-    name: 'model',
-    expr: 'model',
-    type: 2
-  }, {
-    name: 'cabinet',
-    expr: 'cabinet',
-    type: 2
-  }, {
-    name: 'status',
-    expr: 'ping',
-    type: 2
-  }
+  group: [
+    {
+      name: 'datacenter',
+      expr: 'datacenterName',
+      type: 2
+    }, {
+      name: 'name',
+      expr: 'name',
+      type: 2
+    }, {
+      name: 'vm',
+      expr: 'vm',
+      type: 2
+    }, {
+      name: 'vmh',
+      expr: 'vmh',
+      type: 2
+    }, {
+      name: 'type',
+      expr: 'type',
+      type: 2
+    }, {
+      name: 'state',
+      expr: 'state',
+      type: 2
+    }, {
+      name: 'brand',
+      expr: 'brand',
+      type: 2
+    }, {
+      name: 'model',
+      expr: 'model',
+      type: 2
+    }, {
+      name: 'cabinet',
+      expr: 'cabinet',
+      type: 2
+    }, {
+      name: 'status',
+      expr: 'ping',
+      type: 2
+    }
   ],
   select: [{
     name: 'count',