
<template>
  <div class="reservoir-survey">

    <!-- 最上面 组件资源 -->
    <div class="platform-overview-top">
    <div class="top"><span class="title">组件资源</span></div>
    <div class="bottom">
      <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省{{componetsData.total}}万元 </span><img src="../image/xing1.png" /></div>
      <div class="left">
        <div class="item" v-for="item in componetsData.list">
          <div class="content1">
          <div class="img"> </div>
            <div class="num">{{item.resourceType}}</div> 
        </div>
          <div class="content">
            <div class="name">节省</div>
            <div claSS="num">{{item.applyPrice }}万元</div>
          </div>
          <div class="content">
            <div class="name">数量</div>
            <div claSS="num">{{item.resourceAmount}}个</div>
          </div>
          <div class="content">
            <div class="name">共申请</div>
            <div claSS="num">{{item.applyCount}}次</div>
          </div>
        </div>
      </div>
    </div>
  </div>


    <!-- 中间 应用资源-->
    <div class="platform-overview-mid">
    <div class="top"><span class="title">应用资源</span></div>
    <div class="bottom">
    <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省{{resoureData.total}}万元 </span><img src="../image/xing1.png" /></div>
    <div class="component-services-content-right-right-bottom-right">
              <div>
                <span>排行</span>
                <span>资源名称</span>
                <span >提供部门</span>
                <span >次数</span>
                <span >贡献金额</span>
              </div>
              <div v-for="(item, index) in resoureData.list" :key="index">
                <span>{{ index + 1 }}</span>
                <a-tooltip>
                  <template #title>{{ item.resourceName }}</template>
                  <span>{{ item.resourceName }}</span>
                </a-tooltip>
                <a-tooltip>
                  <template #title>{{ item.deptName}}</template>
                  <span>{{ item.deptName  }}</span>
                </a-tooltip>
                <span>{{ item.applyCount || 0 }}</span>
                <span>{{ item.applyPrice || 0 }}</span>
              </div>
            </div>
    </div>
  </div>

    <!-- 最下方 基础设施 -->
    <div class="platform-overview-bottom">
    <div class="top"><span class="title">基础设施</span></div>
    <div class="bottom">
      <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省{{infrastructureData.total}}万元 </span><img src="../image/xing1.png" /></div>
    <div class="huiketing">
      <div style="float:left;width:30%">
      <img :src="leftImg" alt="" /> 
    </div>
    <div style="float:left;width:70%;margin-top: 30px;" v-for="item in infrastructureData.list">
      <span style="font-size:22x">{{item.resourceName}}</span> 
      <span style="font-size:22px">节省 </span>
      <span style="margin-right:10px;font-size:24px;  color: #1ef6f5;">{{item.applyPrice}}</span>
        <span style="font-size:20px"> 万元</span>
      </div>
    </div>
    </div>
    
    </div>


  </div>
</template>

<script>
  import {
    getComponentFundStatement,
    getResourceFundStatement,
    getInfrastructureFundStatement
  } from '@/api/assertReport'
import ResourceOverviewAnimation from "@/views/assertReport/components/ResourceOverviewAnimation.vue";
export default {
  components: {
    ResourceOverviewAnimation
  },
  created() {
   
  },

  mounted() {
//组件资源
  this.getComponent()
  //应用资源
  this.getResource()
  //基础设施
  this.getInfrastructure()
  },
  data() {

    return {
      componetsData:{
        total:'',
        list:[]
    },
    resoureData:{
      total:'',
        list:[]  
    },
    infrastructureData:{
       total:'',
        list:'',
    },
      leftImg:require('@/assets/capabilityCloud/resources-left.png'),
      dataList:[{name:'第一个',count:43},{name:'第二个',count:43},
      {name:'第三个',count:43},{name:'第四个',count:43},{name:'第五个',count:43}]

    };
  },

  methods: {
    getComponent(){
      getComponentFundStatement().then((res) => {
       this.componetsData.total=res.data.data.total
       this.componetsData.list=res.data.data.list
      })
    },
    getResource(){
      getResourceFundStatement().then((res) => {
       this.resoureData.total=res.data.data.total
       this.resoureData.list=res.data.data.list
      })
    },
    getInfrastructure(){
      getInfrastructureFundStatement().then((res) => {
      this.infrastructureData.total=res.data.data.total
       this.infrastructureData.list=res.data.data.list
      })
    }

  },

 
};
</script>
<style lang='less' scoped>

@keyframes topup50 {
  from {
    top: 50%;
  }
  to {
    top: -100%;
  }
}
.jiesheng{
       text-align: center;
    margin-bottom: 5px;
    color: #f4fcfe; border-color: #107bb0;
      box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset
      }

  @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;
    }
  }
.reservoir-survey {


  width: 520px;
  height: 100%;
  color: #f0fafa;
  font-size: 18px;
  display: flex;
  flex-direction: column;


.platform-overview-top {
   width: 100%;
    height: 3.8rem;
    background: rgba(0, 108, 188, 0.2);
    border-radius: 2px;
    border: 1px solid rgba(0, 108, 188, 0.7);
    text-decoration: none;
    outline: none;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    .top {
      font-size: 24px;
      background:  url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
    }
    .bottom {
    
   
      padding: 0.1rem;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        .item {
          width: 100%;
          height: 0.6rem;
          background: linear-gradient(
            to bottom,
            rgba(33, 54, 88, 0.5),
            rgba(33, 54, 88, 0)
          );
          margin-top: 0.14rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .content1 {
            width: 1.8rem;
            .img {
            width: 0.36rem;
            height: 0.36rem;
            margin-left: 0.2rem;
            margin-right: 0.2rem;
            text-decoration: none;
            outline: none;
            -webkit-transition: all 800ms ease-out;
            -moz-transition: all 800ms ease-out;
            transition: all 800ms ease-out;
          }
          .img:hover {
            width: 0.4rem;
            height: 0.4rem;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
            -webkit-transition-delay: 0.2s;
            -moz-transition-delay: 0.2s;
            transition-delay: 0.2s;
          }
            .num {
              font-size: 18px;
              color: #1ef6f5;
              margin-left: 10px;
            }
          }
        
          .content {
            width: 1.5rem;
            .name {
              font-size: 14px;
              color: #fff;
            }
            .num {
              font-size: 18px;
              color: #1ef6f5;
            }
          }
        }
        .item:hover {
         background: linear-gradient(
            to bottom,
            rgba(33, 54, 88, 0.7),
            rgba(33, 54, 88, 0.9)
          );
        }
        .item:nth-of-type(1) {
          margin-top: 10px;
          .img {
            background: url('~@/assets/capabilityCloud/zyys.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .item:nth-of-type(2) .img {
          background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
          background-size: 100% 100%;
        }
        .item:nth-of-type(3) .img {
          background: url('~@/assets/capabilityCloud/tyyys.png') no-repeat;
          background-size: 100% 100%;
        }
        .item:nth-of-type(4) .img {
          background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .platform-overview-top:hover {
    border: 2px solid;
    animation: turn 5s linear infinite;
  }
  .platform-overview-mid {
    margin-top:20px;
    width: 100%;
    height: 3.9rem;
    background: rgba(0, 108, 188, 0.2);
    border-radius: 2px;
    border: 1px solid rgba(0, 108, 188, 0.7);
    text-decoration: none;
    outline: none;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    .top {
      font-size: 24px;
      background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      margin-bottom: 8px;
    }
    .bottom {
      
      
      align-items: center;
      padding: 0rem  0.1rem;
      .component-services-content-right-right-bottom-right {
              width: 100%;
              font-size: 0.16rem;
              border: 0.01rem rgba(0, 108, 188, 0.7) solid;
              color: rgba(255, 255, 255, 0.8);
              height: 2.9rem;
               overflow-y: auto;
              & > div {
                height: 0.32rem;
                & > span {
                  display: inline-block;
                  height: 0.32rem;
                  line-height: 0.32rem;
                  border-right: 0.01rem rgba(0, 108, 188, 0.7) solid;
                  border-bottom: 0.01rem rgba(0, 108, 188, 0.7) solid;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  word-break: break-all;
                }
                & > span:first-child {
                  width: 0.47rem;
                  text-align: center;
                }
                & > span:nth-child(2) {
                  width: 1.57rem;
                  padding-left: 0.05rem;
                  //text-align: center;
                }
                & > span:nth-child(3) {
                  width: 1.47rem;
                  padding-left: 0.05rem;
                 // text-align: center;
                }
                & > span:nth-child(4) {
                  width: 0.5rem;
                  padding-left: 0.05rem;
                  text-align: center;
                }
                & > span:last-child {
                  width: 0.7rem;
                  color: #1ffefd;
                  text-align: center;
                  border-right: 0;
                  text-align: center;
                }
              }
              & > div:first-child {
                color: #1ffefd;
                background: #27528c;
              }
            }
    }
  }

  .platform-overview-mid:hover {
    border: 2px solid;
    animation: turn 5s linear infinite;
  }
  .platform-overview-bottom {
    margin-top:20px;
    width: 100%;
    height: 1.8rem;
    background: rgba(0, 108, 188, 0.2);
    border-radius: 2px;
    border: 1px solid rgba(0, 108, 188, 0.7);
    text-decoration: none;
    outline: none;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    .top {
      font-size: 24px;
      background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
    }
    .bottom {
     
      align-items: center;
      padding: 0.1rem;
      .huiketing{
        display: flex;
    
        img {
          width: 90px;
          width: 90px;
          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);
            }
          }
        }

      }
   
    }
  }
  .platform-overview-bottom:hover {
    border: 2px solid;
    animation: turn 5s linear infinite;
  }
}

</style>
