hi-ucs/front/src/views/capabilityCloud/components/DataResources.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-19 10:15:33
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-19 18:08:39
 * @Description: 告诉大家这是什么
-->
<template>
  <div class="data-resources">
    <div class="resources-top">
      <span class="title">数据资源</span>
    </div>
    <div class="resources-bottom">
      <div class="resources-left">
        <div v-for="(item, index) in resourcesLeft" :key="index">
          <h3>{{ item.name }}</h3>
          <h2 class="num">{{ item.num || '0' }}</h2>
        </div>
        <img :src="leftImg" alt="" />
      </div>
      <div class="resources-right">
        <div class="resources-right-title">
          <h3>数据赋能排行</h3>
        </div>
        <div class="resources-right-table">
          <a-table
            :data-source="assignRankings"
            :columns="columns"
            :pagination="false"
            bordered="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import { count, getRecord } from '@/api/file'
  // import { abc } from './dataABC.json'
  // 左侧数据
  const resourcesLeft = ref([
    {
      name: '总数据数',
      num: '',
    },
    {
      name: '总申请次数',
      num: '',
    },
    {
      name: '满足率',
      num: '',
    },
  ])
  // 右侧数据
  const assignRankings = ref([
    {
      index: '1',
      name: ' ',
      operation: ' ',
    },
    {
      index: '2',
      name: ' ',
      operation: ' ',
    },
    {
      index: '3',
      name: ' ',
      operation: ' ',
    },
    {
      index: '4',
      name: ' ',
      operation: ' ',
    },
    {
      index: '5',
      name: ' ',
      operation: ' ',
    },
  ])
  const columns = ref([
    {
      title: 'Top',
      dataIndex: 'index',
      key: 'index',
      width: '15%',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '55%',
      ellipsis: true,
    },
    {
      title: '应用数',
      dataIndex: 'operation',
      key: 'operation',
      width: '30%',
    },
  ])
  // 左侧图片
  const leftImg = require('@/assets/capabilityCloud/resources-left.png')
  // 请求左侧数据开始
  const obj = {
    serviceName: '',
    orderField: 'updateTime',
    orderType: 'desc',
    pageNum: 1,
    pageSize: 5,
    serviceType: 'data',
  }
  getRecord(obj).then((res) => {
    if (res.data.data) {
      // res.data.data.list.forEach((val) => {
      //   val.name = val.serviceName
      //   val.createDate = val.updateTime
      //   val.id = val.serviceId // "requestNum": 0, // "requestQuantity": 0, // "starNum": 4, // "shareStatus": "2"
      // })
      // resourceList.data = res.data.data.list || []
      resourcesLeft.value[0].num = res.data.data.total || '0' // getShoppingCartList(resourceData.value.data.records)
      console.log('数据资源~~~~~~~~~~~', resourcesLeft.value[0].num)
    }
  })
  // 请求左侧数据结束
  // 请求右侧数据开始
  const contentData = ref([])
  count().then((res) => {
    contentData.value = res.data.data
    console.log(contentData.value)
    // 总申请次数
    resourcesLeft.value[1].num = contentData.value.requestCount || '0'
    // 总满足率
    resourcesLeft.value[2].num =
      contentData.value.satisfactionRate + '%' || '0' + '%'
    // 排行
    for (let i = 1; i < 6; i++) {
      // TOP
      assignRankings.value[i - 1].index = i
      //
      assignRankings.value[i - 1].name =
        contentData.value.resourceTop5[i - 1].service_name || 'wowoow'
      assignRankings.value[i - 1].opacity =
        contentData.value.resourceTop5[i - 1].count || ' '
    }
  })
  // 请求右侧数据结束
</script>
<style lang="less" scoped>
  .data-resources {
    width: 4.4rem;
    height: 4.63rem;
    background: rgba(0, 108, 188, 0.1);
    border-radius: 0.02rem;
    border: 0.01rem solid rgba(0, 108, 188, 0.7);
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    .resources-top {
      height: 0.6rem;
      background: url('~@/assets/capabilityCloud/resources-title.png') no-repeat;
      text-align: center;
      font-size: 0.24rem;
    }
    .resources-bottom {
      width: 100%;
      display: flex;
      .resources-left {
        width: 1.56rem;
        height: 2.75rem;
        background-image: linear-gradient(#214678, transparent);
        text-align: center;
        margin-left: 0.18rem;
        position: relative;
        div {
          margin: 0 0.1rem;
          border-bottom: 0.01rem solid #1f557c;
          h3 {
            font-size: 0.16rem;
            color: #ffffff;
            margin-bottom: 0rem;
            padding-top: 0.16rem;
          }
          .num {
            font-size: 0.28rem;
            color: #1ef6f5;
            margin-bottom: 0rem;
          }
        }
        div:last-of-type {
          border-bottom: none;
        }
        img {
          width: 90%;
          position: absolute;
          left: 50%;
          bottom: -1.38rem;
          margin-left: -45%;
          animation: move 5s linear 0s infinite;
          @keyframes move {
            from {
              transform: rotateY(360deg);
            }
            to {
              transform: rotateY(0deg);
            }
          }
        }
      }
      .resources-right {
        margin-left: 0.18rem;
        width: 2.35rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        .resources-right-title {
          width: 2.24rem;
          height: 1rem;
          text-align: center;
          background: url('~@/assets/capabilityCloud/resources-right.png')
            no-repeat center;
          display: flex;
          align-items: center;
          h3 {
            font-size: 0.18rem;
            color: #ffffff;
            width: 100%;
            height: 0.38rem;
            line-height: 0.38rem;
            background: linear-gradient(
              to right,
              rgba(0, 0, 0, 0) 0%,
              #1b76cc 50%,
              rgba(0, 0, 0, 0) 100%
            );
            text-shadow: 0rem 0rem 0.02rem rgba(0, 0, 0, 0.6);
          }
        }
        .resources-right-table {
          width: 100%;
          :deep(.ant-table-thead > tr > th) {
            background-color: #1f557c;
            border: none;
            color: #1ef6f5;
            height: 0.32rem;
            padding: 0;
          }
          :deep(.ant-table-row) {
            height: 0.45rem;
          }
          :deep(.ant-table-cell) {
            text-align: center;
            transition: all 0s;
            background: transparent;
            border-bottom: 0.01rem solid #1f557c;
            border-right: 0.01rem solid #1f557c;
            padding: 0;
          }
          :deep(.ant-table-cell:nth-child(1)) {
            border-left: 0.01rem solid #1f557c;
          }
          :deep(.ant-table-cell:nth-child(2)) {
            text-align: left;
            padding-left: 0.1rem;
          }
          :deep(.ant-table-cell:nth-child(3)) {
            color: #1ef6f5;
          }
          :deep(.ant-table-tbody) {
            color: #ffffff;
          }
          :deep(.ant-table) {
            border: none;
            background: transparent;
          }
          :deep(.ant-table-content > table) {
            border: none;
          }
          :deep(.ant-table-container) {
            border: none;
          }
          :deep(.ant-table-cell-row-hover) {
            transition: all 0s;
            background: transparent;
          }
        }
      }
    }
  }
  .data-resources:hover {
    border: 2px solid;
    animation: turn 5s linear infinite;
  }
  @keyframes turn {
    0% {
      border-image: linear-gradient(to right, #003194, #00ffea) 1;
    }
    25% {
      border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
    }
    50% {
      border-image: linear-gradient(to left, #003194, #00ffea) 1;
    }
    75% {
      border-image: linear-gradient(to top, #003194, #00ffea) 1;
    }
    100% {
      border-image: linear-gradient(to right, #003194, #00ffea) 1;
    }
  }
</style>