初始化

frontend/packages/BasicComponents/IndexCard/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div
+    :class="`bs-indexCard`"
+    style="width: 100%;height: 100%;position: relative;"
+  >
+    <div
+      :style="{
+        'background-image': `linear-gradient(${customize.gradientDirection}, ${
+          gradientColor0 ? gradientColor0 : gradientColor1
+        } , ${gradientColor1 ? gradientColor1 : gradientColor0})`,
+        'border-radius':customize.borderRadius + 'px',
+        border:`${customize.borderWidth}px solid ${customize.borderColor}`,
+      }"
+      class="content"
+    >
+      <div
+        :style="{
+          'margin-right':customize.distance + 'px'
+        }"
+        class="content-left"
+      >
+        <el-image
+          :style="{
+            width: customize.imgSize + 'px',
+            height: customize.imgSize + 'px',
+          }"
+          :src="customize.src?customize.src:imgUrl"
+          fit="contain"
+        />
+      </div>
+      <div class="content-right">
+        <span
+          class="content-right-first"
+          :style="{
+            'font-family': config.customize.fontFamily,
+            'font-size': customize.firstSize + 'px',
+            'height':customize.firstSize + 'px',
+            color:customize.firstColor,
+            'font-weight':customize.firstWeight,
+            'margin-bottom':customize.lineDistance +'px'
+          }"
+        >
+          {{ indicatorData || 0 }}
+          <span
+            :style="{
+              'margin-left':'10px',
+              'font-size': customize.unitSize + 'px',
+              color:customize.unitColor,
+            }"
+          >
+            {{ unit }}
+          </span>
+        </span>
+        <span
+          :style="{
+            'font-size': customize.secondSize + 'px',
+            'height':customize.secondSize + 'px',
+            color:customize.secondColor,
+            'font-weight':customize.secondWeight,
+          }"
+          class="content-right-second"
+        >
+          {{ customize.secondLine }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import commonMixins from 'data-room-ui/js/mixins/commonMixins'
+import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
+import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+export default {
+  name: 'Card',
+  components: {},
+  mixins: [paramsMixins, commonMixins, linkageMixins],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      imgUrl: require('data-room-ui/assets/images/cardImg/cardicon.png'),
+      customClass: {},
+      indicatorData: 80
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  computed: {
+    gradientColor0 () {
+      return this.config.customize.gradientColor0 || this.config.customize.gradientColor1 || 'transparent'
+    },
+    gradientColor1 () {
+      return this.config.customize.gradientColor1 || this.config.customize.gradientColor0 || 'transparent'
+    },
+    unit () {
+      return this.config?.customize.unit || ''
+    },
+    option () {
+      return this.config?.option
+    },
+    optionData () {
+      return this.option?.data ?? 80
+    },
+    customize () {
+      return this.config?.customize
+    }
+  },
+  methods: {
+    dataFormatting (config, data) {
+      let dataList = ''
+      if (data.success) {
+        if (data.data instanceof Array) {
+          dataList = config.dataSource.dimensionField
+            ? data.data[0][config.dataSource.dimensionField]
+            : data.data[0].value
+        } else {
+          dataList = data.data[config.dataSource.dimensionField]
+        }
+      } else {
+        dataList = 80
+      }
+      config.option = {
+        ...config.option,
+        data: dataList
+      }
+      this.indicatorData= config.option.data
+
+      return config
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  // background-color: aliceblue;
+  justify-content: center;
+  .content-left{
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+  }
+  .content-right{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+  }
+  .content-right-first{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 5px;
+  }
+  .content-right-second{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>