vue2-client 1.8.310 → 1.8.312

package/src/base-client/components/common/XDataCard/XDataCard.vue

@@ -0,0 +1,355 @@
+<template>
+  <div>
+    <div v-if="render" class="XCard">
+      <template v-for="(card, itemIndex) in data">
+        <div class="data-card" :key="'card' + itemIndex">
+          <!--  标题  -->
+          <div class="header">
+            <span>{{ card[config.title] }}</span>
+          </div>
+          <!--  主体  -->
+          <div class="body">
+            <template v-for="(item, bodyIndex) in config.content" v-if="bodyIndex < 6">
+              <div :key="'body' + bodyIndex" class="body-item">
+                <span class="body-item-label">{{ item.label }}:</span>
+                <template v-if="item.type === 'progress'">
+                  <div class="progress">
+                    <div class="progress-bar">
+                      <div class="progress-done" :style="'width:' + card[item.key] * 100 + '%;backgroundColor: ' + determineRatioColor(card[item.key] * 100)"></div>
+                    </div>
+                  </div>
+                  <div class="progress-num">{{ card[item.key] * 100 }}%</div>
+                </template>
+                <template v-else>
+                  <span class="body-item-value">{{ card[item.key] }}</span>
+                </template>
+              </div>
+              <a-divider
+                v-if="bodyIndex !== config.content.length - 1"
+                dashed
+                :key="'body' + bodyIndex + 'after'"
+                class="body-split"/>
+            </template>
+          </div>
+          <!--  下方按钮  -->
+          <div class="footer">
+            <a-row align="middle">
+              <template v-for="(item, footerIndex) in config.footer">
+                <a-col :key="'footer_' + footerIndex" class="footer-item" :span="11" @click="clickFooter(card, item.emit)">
+                  <span>
+                    <a-icon :type="item.icon" class="footer-icon"/>
+                    <span>{{ item.label }}</span>
+                  </span>
+                </a-col>
+                <a-col
+                  v-if="footerIndex !== config.footer.length - 1"
+                  :span="1"
+                  :key="'footer_' + footerIndex + 'after'"
+                  class="footer-item-split">
+                  |
+                </a-col>
+              </template>
+            </a-row>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div v-else>
+      <a-skeleton/>
+    </div>
+    <div v-if="this.showPagination">
+      <a-divider/>
+      <a-pagination
+        v-model="pageNum"
+        style="float: right"
+        :total="total"
+        show-less-items
+        :page-size="pageSize"
+        :page-size-options="pageSizeOptions"
+        show-size-changer
+        :showTotal="paginationShowTotal"
+        @showSizeChange="pageSizeChange">
+      </a-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'XDataCard',
+  props: {
+    // 卡片数据更新方法
+    cardData: {
+      type: Function,
+      default: undefined
+    },
+    // 卡片的配置
+    cardConfig: {
+      type: Object,
+      default: undefined
+    },
+    showPagination: {
+      type: Boolean,
+      default: false
+    },
+    // 临时
+    testData: {
+      type: Array,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      // 配置
+      config: {},
+      // 数据
+      data: {},
+      // 当前页码
+      pageNum: 1,
+      // 控制渲染
+      render: true,
+      // 分页大小
+      pageSize: 10,
+      // 分页大小选项
+      pageSizeOptions: ['4', '6', '8', '10'],
+      // 数据总数
+      total: 0
+    }
+  },
+  mounted () {
+    // 配置初始化
+    if (this.cardConfig) {
+      this.config = this.cardConfig
+    } else {
+      this.config = {
+        title: '未获取到配置',
+        content: [
+          {
+            label: '未获取到配置',
+            key: 'one'
+          },
+          {
+            label: '未获取到配置',
+            key: 'two'
+          },
+          {
+            label: '未获取到配置',
+            key: 'three'
+          },
+          {
+            label: '未获取到配置',
+            key: 'four'
+          },
+          {
+            label: '未获取到配置',
+            key: 'five'
+          },
+          {
+            label: '未获取到配置',
+            key: 'six',
+            type: 'progress'
+          }
+        ],
+        footer: [
+          {
+            icon: 'edit',
+            label: '未获取到配置',
+            emit: 'planEdit'
+          },
+          {
+            icon: 'user',
+            label: '未获取到配置',
+            emit: 'user'
+          }
+        ]
+      }
+    }
+
+    // 数据初始化
+    if (this.cardData) {
+      this.loadData()
+    } else {
+      this.data = {
+        one: '无数据',
+        two: '无数据',
+        three: '无数据',
+        four: '无数据',
+        five: '无数据',
+        six: 70
+      }
+    }
+
+    // 测试数据初始化
+    if (this.testData) {
+      this.data = this.testData
+    }
+  },
+  methods: {
+    // 根据比例计算出颜色
+    determineRatioColor (ratio, isNum = false) {
+      let result
+      // 如果是数字，并且比例大于79，则将数字显示为黑色
+      if (isNum && ratio > 79) {
+        return 'rgb(0,0,0)'
+      }
+      if (ratio >= 90) {
+        result = 'rgb(   1,245, 38 )'
+      } else if (ratio >= 75) {
+        result = 'rgb( 139,245,  0)'
+      } else if (ratio >= 40) {
+        result = 'rgb(245,163,  0)'
+      } else if (ratio >= 20) {
+        result = 'rgb(244, 96,  0)'
+      } else {
+        result = 'rgb(255,  0,  0)'
+      }
+      return result
+    },
+    // 点击按钮
+    clickFooter (data, eventName) {
+      this.$emit('cardEmit', data, eventName)
+    },
+    // 获取数据
+    loadData () {
+      this.render = false
+      const parameter = Object.assign({
+          querySummary: false, // 分页查询的情况不重新获取汇总数据
+          pageNo: this.pageNum,
+          pageSize: this.pageSize
+        }
+      )
+      this.cardData(parameter).then(res => {
+        this.data = res.data
+        this.total = res.totalCount
+        this.render = true
+      })
+    },
+    // 分页大小改变
+    pageSizeChange (current, pageSize) {
+      this.pageSize = pageSize
+      this.loadData()
+    },
+    // 刷新
+    refresh () {
+      this.loadData()
+    },
+    // 分页前展示当前项和总数
+    paginationShowTotal () {
+      return `${(this.pageNum - 1) * this.pageSize + 1 } - ${ this.pageNum * this.pageSize } | 共 ${ this.total } 项`
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.XCard {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+
+  .data-card {
+    height: 32vh;
+    width: 15vw;
+    border: 2px solid rgb(244,244,244);
+    border-radius: 5px;
+    margin-bottom: 1%;
+
+    .header {
+      height: 14%;
+      width: 100%;
+      background-color: rgb(244,244,244);
+      padding-top: 3%;
+      padding-left: 5%;
+
+      span {
+        font-weight: bold;
+        font-size: 1.1em;
+      }
+    }
+
+    .body {
+      height: 70%;
+      width: 100%;
+      padding: 3%;
+
+      .body-item {
+        height: 12%;
+      }
+
+      .body-split {
+        padding-bottom: 1%;
+        margin: 1%;
+      }
+
+      .body-item-label {
+        color: rgba(117, 117, 117, 0.8);
+        font-size: 0.95em;
+        padding-left: 1.5%;
+      }
+
+      .body-item-value {
+        padding-right: 1.5%;
+        color: black;
+        float: right;
+      }
+
+      .progress {
+        display: inline-block;
+        width: 60%;
+        height: 60%;
+        float: right;
+        padding-right: 1.5%;
+        margin-top: 0.5%;
+
+        .progress-bar {
+          width: 100%;
+          height: 90%;
+          display: inline-block;
+          border-radius: 10%;
+          background-color: rgba(212,217,218, 0.6);
+
+          .progress-done {
+            float: left;
+            display: inline-block;
+            height: 100%;
+            border-radius: 10%;
+          }
+        }
+      }
+      .progress-num {
+        position: relative;
+        top: -88%;
+        left: 78%;
+        color: black;
+      }
+    }
+
+    .footer {
+      height: 16%;
+      width: 100%;
+      background-color: rgb(244,244,244);
+      padding-top: 5%;
+
+      .footer-icon {
+        margin-right: 3%;
+      }
+
+      .footer-item-split {
+        color: rgba(220, 220, 220, 0.59);
+      }
+
+      .footer-item {
+        color: rgba(117, 117, 117, 0.8);
+        font-size: 1em;
+        text-align: center;
+      }
+
+      .footer-item:hover {
+        color: rgb( 24,144,255 );
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

package/src/base-client/components/common/XDataCard/index.js

@@ -0,0 +1,3 @@
+import XDataCard from './XDataCard.vue'
+
+export default XDataCard

package/src/base-client/components/common/XDataCard/index.md

@@ -0,0 +1 @@
+# XDataCard