feat:新增指标卡组件

data-room-ui/packages/BasicComponents/IndexCard/index.vue

@@ -36,7 +36,17 @@
             'font-weight':customize.firstWeight,
             'margin-bottom':customize.lineDistance +'px'
           }"
-        >{{ optionData}}</span>
+        >
+        {{ optionData}}
+        <span
+        :style="{
+            'margin-left':'10px',
+            'font-size': customize.unitSize + 'px',
+            color:customize.unitColor,
+          }">
+          {{unit}}
+        </span>
+        </span>
         <span
           :style="{
             'font-size': customize.secondSize + 'px',
@@ -76,6 +86,9 @@ export default {
   mounted () {
   },
   computed: {
+     unit(){
+      return this.config?.customize.unit || ''
+    },
     option () {
       return this.config?.option
     },

data-room-ui/packages/BasicComponents/IndexCard/setting.vue

@@ -77,6 +77,31 @@
             >
             </el-input>
           </el-form-item>
+          <el-form-item
+            label="单位"
+            label-width="100px"
+          >
+            <el-input
+              v-model="config.customize.unit"
+              clearable
+              placeholder="请输入单位"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item label-width="100px" label="单位字体大小">
+            <el-input-number
+              v-model="config.customize.unitSize"
+              :precision="0"
+              class="bs-el-input-number"
+              label="请输入单位字体大小"
+            />
+          </el-form-item>
+          <el-form-item label-width="100px" label="单位字体颜色">
+            <ColorPicker
+              v-model="config.customize.unitColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
           <el-form-item label-width="100px" label="左右间距">
             <el-input-number
               v-model="config.customize.distance"

data-room-ui/packages/BasicComponents/IndexCard/settingConfig.js

@@ -42,18 +42,21 @@ const customConfig = {
     src: 'http://60.174.249.206:11080/upload/webDesign/uiSucai/dir/icon/icon_top6.png',
     borderRadius: 0,
     borderWidth: 0,
-    lineDistance: 25,
+    lineDistance: 6,
     borderColor: '',
-    bgColor: '',
+    bgColor: 'rgba(0, 122, 255, 0.07)',
     distance: 30,
-    imgSize: 110,
-    firstSize: 50,
-    firstColor: '#ffffff',
+    imgSize: 80,
+    firstSize: 64,
+    firstColor: '#007aff',
     firstWeight: 500,
-    secondSize: 50,
+    secondSize: 21,
     secondColor: '#ffffff',
     secondWeight: 500,
-    secondLine: '装机处理及时率'
+    secondLine: '装机处理及时率',
+    unit: '',
+    unitSize: 32,
+    unitColor:'#fff'
   }
 }
 export const dataConfig = {

data-room-ui/packages/BasicComponents/IndexCard2/index.vue

@@ -47,6 +47,14 @@
           class="content-right-second"
         >
         {{ optionData}}
+        <span
+        :style="{
+             'margin-left':'10px',
+            'font-size': customize.unitSize + 'px',
+            color:customize.unitColor,
+          }">
+          {{unit}}
+        </span>
         </span>
       </div>
     </div>
@@ -76,6 +84,9 @@ export default {
   mounted () {
   },
   computed: {
+    unit(){
+      return this.config?.customize.unit || ''
+    },
     option () {
       return this.config?.option
     },

data-room-ui/packages/BasicComponents/IndexCard2/setting.vue

@@ -76,6 +76,31 @@
               placeholder="请输入链接"
             >
             </el-input>
+          </el-form-item>
+           <el-form-item
+            label="单位"
+            label-width="100px"
+          >
+            <el-input
+              v-model="config.customize.unit"
+              clearable
+              placeholder="请输入单位"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item label-width="100px" label="单位字体大小">
+            <el-input-number
+              v-model="config.customize.unitSize"
+              :precision="0"
+              class="bs-el-input-number"
+              label="请输入单位字体大小"
+            />
+          </el-form-item>
+          <el-form-item label-width="100px" label="单位字体颜色">
+            <ColorPicker
+              v-model="config.customize.unitColor"
+              :predefine="predefineThemeColors"
+            />
           </el-form-item>
           <el-form-item label-width="100px" label="左右间距">
             <el-input-number

data-room-ui/packages/BasicComponents/IndexCard2/settingConfig.js

@@ -42,18 +42,21 @@ const customConfig = {
     src: 'http://60.174.249.206:11080/upload/webDesign/uiSucai/dir/icon/icon_top6.png',
     borderRadius: 0,
     borderWidth: 0,
-    lineDistance: 25,
+    lineDistance: 6,
     borderColor: '',
-    bgColor: '',
+    bgColor: 'rgba(0, 122, 255, 0.07)',
     distance: 30,
-    imgSize: 110,
-    firstSize: 50,
+    imgSize: 80,
+    firstSize: 21,
     firstColor: '#ffffff',
     firstWeight: 500,
-    secondSize: 50,
-    secondColor: '#ffffff',
+    secondSize: 64,
+    secondColor: '#007aff',
     secondWeight: 500,
-    secondLine: '装机处理及时率'
+    secondLine: '装机处理及时率',
+    unit: '',
+    unitSize: 32,
+    unitColor:'#fff'
   }
 }
 export const dataConfig = {

data-room-ui/packages/BasicComponents/IndicatorCard/index.vue

@@ -13,15 +13,28 @@
     >
       <div
         class="content-right-first"
+        :style="{
+          'height': customize.firstSize + 'px',
+        }"
+      >
+        <span
         :style="{
           'font-size': customize.firstSize + 'px',
-          'height':customize.firstSize + 'px',
           color:customize.firstColor,
           'font-weight':customize.firstWeight,
           'margin-bottom':customize.lineDistance +'px'
         }"
-      >
-        {{ optionData }}
+        >{{ optionData }}</span>
+        <span
+        :style="{
+             'margin-left':'10px',
+            'font-size': customize.unitSize + 'px',
+            'line-height':customize.unitSize + 'px',
+            color:customize.unitColor,
+            'margin-bottom':customize.lineDistance +'px'
+          }">
+          {{unit}}
+        </span>
       </div>
       <div
         :style="{
@@ -63,6 +76,9 @@ export default {
     // this.chartInit()
   },
   computed: {
+    unit(){
+      return this.config?.customize.unit || ''
+    },
     option () {
       return this.config?.option
     },
@@ -117,9 +133,11 @@ export default {
   text-align: center;
   justify-content: center;
   .content-right-first{
-    width: 100%;
-    text-align: center;
-    padding-bottom: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // width: 100%;
+    // text-align: center;
   }
   .content-right-second{
     width: 100%;

data-room-ui/packages/BasicComponents/IndicatorCard/setting.vue

@@ -66,6 +66,31 @@
               label="请输入圆角值"
             />
           </el-form-item>
+          <el-form-item
+            label="单位"
+            label-width="100px"
+          >
+            <el-input
+              v-model="config.customize.unit"
+              clearable
+              placeholder="请输入单位"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item label-width="100px" label="单位字体大小">
+            <el-input-number
+              v-model="config.customize.unitSize"
+              :precision="0"
+              class="bs-el-input-number"
+              label="请输入单位字体大小"
+            />
+          </el-form-item>
+          <el-form-item label-width="100px" label="单位字体颜色">
+            <ColorPicker
+              v-model="config.customize.unitColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
           <el-form-item label-width="100px" label="上下间距">
             <el-input-number
               v-model="config.customize.lineDistance"

data-room-ui/packages/BasicComponents/IndicatorCard/settingConfig.js

@@ -43,14 +43,17 @@ const customConfig = {
     borderWidth: 0,
     lineDistance: 25,
     borderColor: '',
-    bgColor: '',
+    bgColor: 'rgba(0, 122, 255, 1)',
     firstSize: 50,
     firstColor: '#ffffff',
     firstWeight: 500,
-    secondSize: 50,
+    secondSize: 32,
     secondColor: '#ffffff',
     secondWeight: 500,
-    secondLine: '装机处理及时率'
+    secondLine: '装机处理及时率',
+    unit: '',
+    unitSize: 32,
+    unitColor:'#fff'
   }
 }
 export const dataConfig = {

data-room-ui/packages/BasicComponents/IndicatorCard2/index.vue

@@ -25,14 +25,27 @@
       </div>
       <div
         :style="{
-          'font-size': customize.secondSize + 'px',
-          'height':customize.secondSize + 'px',
-          color:customize.secondColor,
-          'font-weight':customize.secondWeight,
+          'height': customize.secondSize + 'px',
         }"
         class="content-right-second"
       >
+      <span
+      :style="{
+          'font-size': customize.secondSize + 'px',
+          color:customize.secondColor,
+          'font-weight':customize.secondWeight,
+        }">
         {{ optionData }}
+      </span>
+        <span
+        :style="{
+             'margin-left':'10px',
+            'font-size': customize.unitSize + 'px',
+            'line-height':customize.unitSize + 'px',
+            color:customize.unitColor,
+          }">
+          {{unit}}
+        </span>
       </div>
     </div>
   </div>
@@ -63,6 +76,9 @@ export default {
     // this.chartInit()
   },
   computed: {
+     unit(){
+      return this.config?.customize.unit || ''
+    },
     option () {
       return this.config?.option
     },
@@ -122,8 +138,9 @@ export default {
     padding-bottom: 5px;
   }
   .content-right-second{
-    width: 100%;
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }
 </style>

data-room-ui/packages/BasicComponents/IndicatorCard2/setting.vue

@@ -66,6 +66,31 @@
               label="请输入圆角值"
             />
           </el-form-item>
+          <el-form-item
+            label="单位"
+            label-width="100px"
+          >
+            <el-input
+              v-model="config.customize.unit"
+              clearable
+              placeholder="请输入单位"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item label-width="100px" label="单位字体大小">
+            <el-input-number
+              v-model="config.customize.unitSize"
+              :precision="0"
+              class="bs-el-input-number"
+              label="请输入单位字体大小"
+            />
+          </el-form-item>
+          <el-form-item label-width="100px" label="单位字体颜色">
+            <ColorPicker
+              v-model="config.customize.unitColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
           <el-form-item label-width="100px" label="上下间距">
             <el-input-number
               v-model="config.customize.lineDistance"

data-room-ui/packages/BasicComponents/IndicatorCard2/settingConfig.js

@@ -43,14 +43,17 @@ const customConfig = {
     borderWidth: 0,
     lineDistance: 25,
     borderColor: '',
-    bgColor: '',
-    firstSize: 50,
+    bgColor: 'rgba(0, 122, 255, 1)',
+    firstSize: 32,
     firstColor: '#ffffff',
     firstWeight: 500,
     secondSize: 50,
     secondColor: '#ffffff',
     secondWeight: 500,
-    secondLine: '装机处理及时率'
+    secondLine: '装机处理及时率',
+    unit: '',
+    unitSize: 32,
+    unitColor:'#fff'
   }
 }
 export const dataConfig = {

data-room-ui/packages/js/utils/getComponentConfig.js

@@ -289,10 +289,11 @@ export default function getComponentConfig (type) {
         return {
           name: '指标卡',
           title: '指标卡',
-          icon: Icon.getNameList()[26],
+          icon: null,
+          img: require('data-room-ui/assets/images/cardImg/card.png'),
           className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndicatorCardChart',
-          w: 500,
-          h: 250,
+          w: 400,
+          h: 170,
           x: 0,
           y: 0,
           type
@@ -302,10 +303,11 @@ export default function getComponentConfig (type) {
         return {
           name: '指标卡一',
           title: '指标卡一',
-          icon: Icon.getNameList()[27],
+          icon: null,
+          img: require('data-room-ui/assets/images/cardImg/indicard.png'),
           className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndexCardChart',
-          w: 600,
-          h: 250,
+          w: 400,
+          h: 200,
           x: 0,
           y: 0,
           type
@@ -314,10 +316,11 @@ export default function getComponentConfig (type) {
         return {
           name: '指标卡二',
           title: '指标卡二',
-          icon: Icon.getNameList()[27],
+          icon: null,
+          img: require('data-room-ui/assets/images/cardImg/card2.png'),
           className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndicatorCardChart',
-          w: 600,
-          h: 250,
+          w: 400,
+          h: 170,
           x: 0,
           y: 0,
           type
@@ -326,10 +329,11 @@ export default function getComponentConfig (type) {
           return {
             name: '指标卡三',
             title: '指标卡三',
-            icon: Icon.getNameList()[27],
+            icon: null,
+            img: require('data-room-ui/assets/images/cardImg/indcard2.png'),
             className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndexCardChart',
-            w: 600,
-            h: 250,
+            w: 400,
+            h: 200,
             x: 0,
             y: 0,
             type