增加统计组件

components/layout/AiDvSummary/AiDvSummary.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="AiSummary">
-    <component :is="type" :theme="theme" :data="data" :keys="keys" :value="value"
-               :summaryTitle="summaryTitle"></component>
+    <component :is="type" :theme="theme" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"/>
   </div>
 </template>
 
@@ -26,11 +25,13 @@ import Summary16 from './components/Summary16'
 import Summary17 from './components/Summary17'
 import Summary18 from './components/Summary18'
 import Summary19 from "./components/Summary19";
+import Summary20 from "./components/Summary20";
 
 export default {
   name: 'AiDvSummary',
 
   components: {
+    Summary20,
     Summary19,
     Summary0,
     Summary1,

components/layout/AiDvSummary/components/Summary20.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="summary20">
+    <div class="item" v-for="(item, i) in list" :key="i">
+      <div class="label" v-text="item[keys]"/>
+      <div class="value" v-text="item[value]"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'summary20',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+
+    keys: {
+      type: String,
+      default: 'key'
+    },
+
+    value: {
+      type: String,
+      default: 'value'
+    }
+  },
+  computed: {
+    list: v => v.data?.slice(0, 4) || []
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.summary20 {
+  .item {
+    margin-bottom: 20px;
+  }
+
+  .label {
+    font-weight: 500;
+    font-size: 18px;
+    color: #9BB7D4;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+
+    &:before {
+      content: ">";
+      color: #FFDA52;
+      margin-right: 6px;
+      font-size: 14px;
+    }
+  }
+
+  .value {
+    width: 100%;
+    padding: 6px 14px;
+    font-family: DIN;
+    font-weight: 700;
+    font-size: 30px;
+    background-image: linear-gradient(90deg, #01c4ec07 0%, #01c4ec27 100%);
+  }
+}
+</style>

packages/bigscreen/designer/components/componentConfig.vue

@@ -202,19 +202,16 @@
             </div>
           </div>
         </template>
-        <div class="layout-config__item" v-if="config.type === 'summary'">
-          <label>数据汇总</label>
-          <div class="layout-config__item--right">
-            <el-select size="mini" v-model="config.display" placeholder="请选择类型" clearable>
-              <el-option
-                  v-for="(item, index) in summaryList"
-                  :key="index"
-                  :label="item"
-                  :value="item">
-              </el-option>
-            </el-select>
-          </div>
-        </div>
+        <config-item label="数据汇总" v-if="config.type === 'summary'">
+          <el-select size="mini" v-model="config.display" placeholder="请选择类型" clearable>
+            <el-option
+                v-for="(item, index) in summaryList"
+                :key="index"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </config-item>
       </div>
     </div>
     <div class="layout-right__content--wrapper">
@@ -237,10 +234,11 @@
 import ConfigItem from "./configItem.vue";
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 import {monitorTypes} from "../config";
+import AiDvSummary from "../../../../components/layout/AiDvSummary/AiDvSummary.vue";
 
 export default {
   name: 'componentConfig',
-  components: {AiDialogBtn, ConfigItem},
+  components: {AiDvSummary, AiDialogBtn, ConfigItem},
   props: {
     config: {default: () => ({})},
     instance: Function,
@@ -250,9 +248,6 @@ export default {
     return {
       borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
         'border11', 'border12', 'border13', 'border14', 'border15'],//边框待选项
-      summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5',
-        'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14',
-        'summary15', 'summary16', 'summary17', 'summary18', 'summary19'],//汇总待选项
       //是否显示排名
       tableStatus: [
         {label: '是', value: '1'},
@@ -262,6 +257,9 @@ export default {
       monitorTypes
     }
   },
+  computed: {
+    summaryList: () => Object.keys(AiDvSummary.components)
+  }
 }
 </script>