wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity
hi-ucs/front/src/views/assertReport/components/ReservoirRight.vue

544 lines
16 KiB
Vue
Raw Blame History

<template>
<div class="right-survey">
<!--最上面 部门排行榜-->
<div class="platform-overview-top">
<div class="top"><span class="title">部门排行榜</span></div>
<div class="bottom1">
<div class="bottom-item">
<div class="inner-title">
<p style="width: 220px">市级部门共享贡献资金排行</p>
</div>
<div class="left-list">
<div class="left-list1">排行</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div class="left-list" v-for="(item, index) in top5DistrictList">
<div class="left-list1" v-if="item.img">
<img :src="item.img" />
</div>
<div class="left-list1" v-else>{{ index + 1 }}</div>
<a-tooltip>
<template #title>{{ item.deptName }}</template>
<div class="left-list2">{{ item.deptName }}</div>
</a-tooltip>
<div class="left-list1">{{ item.resourceCount }}</div>
<div class="left-list1" style="color: #1ffefd">
{{ item.applyPrice }}
</div>
</div>
</div>
<!-- <div class="bottom-item">
<div class="inner-title">
<p style="width: 220px">市级部门审评节省资金排行</p>
</div>
<div class="left-list">
<div class="left-list1">排行</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div class="left-list" v-for="(item, index) in top5DeptFundList">
<div class="left-list1" v-if="item.img">
<img :src="item.img" />
</div>
<div class="left-list1" v-else>{{ index + 1 }}</div>
<a-tooltip>
<template #title>{{ item.deptName }}</template>
<div class="left-list2">{{ item.deptName }}</div>
</a-tooltip>
<div class="left-list1">{{ item.applyCount }}</div>
<div class="left-list1" style="color: #1ffefd">
{{ item.applyPrice }}
</div>
</div>
</div> -->
</div>
<div class="bottom1">
<!-- <div class="bottom-item">
<div class="inner-title">
<p style="width: 220px">市级部门共享贡献资金排行</p>
</div>
<div class="left-list">
<div class="left-list1">排行</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div class="left-list" v-for="(item, index) in top5DistrictList">
<div class="left-list1" v-if="item.img">
<img :src="item.img" />
</div>
<div class="left-list1" v-else>{{ index + 1 }}</div>
<a-tooltip>
<template #title>{{ item.deptName }}</template>
<div class="left-list2">{{ item.deptName }}</div>
</a-tooltip>
<div class="left-list1">{{ item.resourceCount }}</div>
<div class="left-list1" style="color: #1ffefd">
{{ item.applyPrice }}
</div>
</div>
</div> -->
<div class="bottom-item">
<div class="inner-title">
<p style="width: 220px">市级部门审评节省资金排行</p>
</div>
<div class="left-list">
<div class="left-list1">排行</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div class="left-list" v-for="(item, index) in top5DeptFundList">
<div class="left-list1" v-if="item.img">
<img :src="item.img" />
</div>
<div class="left-list1" v-else>{{ index + 1 }}</div>
<a-tooltip>
<template #title>{{ item.deptName }}</template>
<div class="left-list2">{{ item.deptName }}</div>
</a-tooltip>
<div class="left-list1">{{ item.applyCount }}</div>
<div class="left-list1" style="color: #1ffefd">
{{ item.applyPrice }}
</div>
</div>
</div>
</div>
<div class="bottom2">
<div class="bottom-item">
<div class="inner-title">
<p style="width: 220px">区市部门共享贡献资金排行</p>
</div>
<div class="left-list">
<div class="left-list1">序号</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div style="height: 300px; overfolw-y: auto">
<div
class="left-list"
v-for="(item, index) in top5eDistrictFundList"
>
<div class="left-list1" v-if="item.img">
<img :src="item.img" />
</div>
<div class="left-list1" v-else>{{ index + 1 }}</div>
<a-tooltip>
<template #title>{{ item.districtName }}</template>
<div class="left-list2">{{ item.districtName }}</div>
</a-tooltip>
<div class="left-list1">{{ item.applyCount }}</div>
<div class="left-list1" style="color: #1ffefd">
{{ item.applyPrice }}
</div>
</div>
</div>
</div>
<div class="bottom-item">
<div class="inner-title">
<p style="width: 220px">区市部门申请节省资金排行</p>
</div>
<div class="left-list">
<div class="left-list1">序号</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div style="height: 200px; overfolw-y: auto">
<div
class="left-list"
v-for="(item, index) in top5ApplyDistrictList"
>
<div class="left-list1" v-if="item.img">
<img :src="item.img" />
</div>
<div class="left-list1" v-else>{{ index + 1 }}</div>
<a-tooltip>
<template #title>{{ item.districtName }}</template>
<div class="left-list2">{{ item.districtName }}</div>
</a-tooltip>
<div class="left-list1">{{ item.applyCount }}</div>
<div class="left-list1" style="color: #1ffefd">
{{ item.applyPrice }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="platform-overview-bottom">
<div class="top"><span class="title">资源汇聚总量</span></div>
<div class="bottom">
<div
v-for="(item, index) in servicesNum"
:key="index"
class="component-services-content-right-left-content-son"
>
<p>{{ item.type }}</p>
<p class="num">{{ item.count }}</p>
</div>
</div>
</div> -->
</div>
</template>
<script>
import {
getProvideDeptFundStatement,
getApplyDeptFundStatement,
getProvideDistrictFundStatement,
getApplyDistrictFundStatement,
selectTotal,
} from '@/api/assertReport'
export default {
components: {},
created() {},
destroyed() {},
mounted() {
this.getgetProvideDeptFund()
this.getApplyDeptFund()
this.getProvideDistrict()
this.getApplyDistrictFund()
this.selectAllTotal()
},
data() {
//这里存放数据
return {
//市级部门共享排行
top5DistrictList: [],
//市级部门申请排行
top5DeptFundList: [],
//区市提供排行
top5eDistrictFundList: [],
//区市申请排行
top5ApplyDistrictList: [],
servicesNum: [],
}
},
methods: {
getgetProvideDeptFund() {
getProvideDeptFundStatement().then((res) => {
let result = res.data.data
if (result.length > 0) {
for (let i = 0; i < result.length; i++) {
if (i === 0) {
result[i].img = require('../image/one.png')
}
if (i === 1) {
result[i].img = require('../image/two.png')
}
if (i === 2) {
result[i].img = require('../image/three.png')
}
}
}
this.top5DistrictList = result
})
},
getApplyDeptFund() {
getApplyDeptFundStatement().then((res) => {
let result = res.data.data
if (result.length > 0) {
for (let i = 0; i < result.length; i++) {
if (i === 0) {
result[i].img = require('../image/one.png')
}
if (i === 1) {
result[i].img = require('../image/two.png')
}
if (i === 2) {
result[i].img = require('../image/three.png')
}
}
}
this.top5DeptFundList = result
})
},
getProvideDistrict() {
getProvideDistrictFundStatement().then((res) => {
let result = res.data.data
// if(result.length>0){
// for(let i=0;i<result.length;i++){
// if(i===0){
// result[i].img=require('../image/one.png')
// }
// if(i===1){
// result[i].img=require('../image/two.png')
// }
// if(i===2){
// result[i].img= require('../image/three.png')
// }
// }
// }
this.top5eDistrictFundList = result
})
},
getApplyDistrictFund() {
getApplyDistrictFundStatement().then((res) => {
let result = res.data.data
// if(result.length>0){
// for(let i=0;i<result.length;i++){
// if(i===0){
// result[i].img=require('../image/one.png')
// }
// if(i===1){
// result[i].img=require('../image/two.png')
// }
// if(i===2){
// result[i].img= require('../image/three.png')
// }
// }
// }
this.top5ApplyDistrictList = result
})
},
selectAllTotal() {
selectTotal().then((res) => {
this.servicesNum = res.data.data.total
})
},
},
}
</script>
<style lang='less' scoped>
@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;
}
}
.top5-content::-webkit-scrollbar {
width: 6px;
/*height: 4px;*/
}
.top5-content::-webkit-scrollbar-thumb {
background-color: #00deff;
}
.map-search-result::-webkit-scrollbar-track,
.top5-content::-webkit-scrollbar-track {
background-color: #424748;
}
@keyframes topup50 {
from {
top: 50%;
}
to {
top: -100%;
}
}
.right-survey {
width: 620px;
height: 100%;
color: #f0fafa;
font-size: 18px;
display: flex;
flex-direction: column;
.platform-overview-top {
width: 100%;
height: 9.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;
}
.bottom1 {
margin-top: 10px;
width: 100%;
display: table;
justify-content: space-between;
align-items: center;
height: 1.8rem;
.bottom-item {
width: 98%;
}
}
.bottom2 {
margin-top: 10px;
// margin-top:10px;
width: 100%;
display: table;
justify-content: space-between;
align-items: center;
height: 4.0rem;
.bottom-item {
width: 48%;
}
}
:hover.bottom-item {
background: rgba(0, 108, 188, 0.5);
}
.bottom-item {
height: 100%;
overflow-y: auto;
background: rgba(0, 108, 188, 0.2);
border-radius: 2px;
margin: 2px 5px;
border: 1px solid #10496f;
.inner-title {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 5px;
font-weight: bold;
color: #ffffff;
p {
font-size: 16px;
line-height: 27px;
background: linear-gradient(
90deg,
#041d2f 0,
rgba(8, 115, 193, 0) 90%
);
color: #1ffefd;
width: auto;
padding-left: 5px;
}
}
display: inline-table;
.left-list {
text-align: center;
color: #fff;
width: 100%;
height: 26px;
margin-right: 10px;
margin-top: 5px;
font-size: 16px;
.left-list1 {
font-size: 16x;
float: left;
width: 22%;
height: 0.32rem;
line-height: 0.32rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
.left-list2 {
height: 0.32rem;
line-height: 0.32rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
cursor: pointer;
font-size: 16px;
float: left;
width: 30%;
&:hover {
color: rgb(0 255 255);
}
}
.active-item {
cursor: pointer;
font-size: 14px;
float: left;
width: 40%;
color: rgb(0 255 255);
font-weight: bold;
text-decoration: underline;
}
}
}
}
.platform-overview-top:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
.platform-overview-bottom {
margin-top: 20px;
width: 100%;
height: 1.7rem;
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 {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0rem 0.2rem;
.component-services-content-right-left-content-son {
background: url('~@/assets/capabilityCloud/Component_services_snum.png')
no-repeat;
background-size: 1.1rem 0.59rem;
background-position: center;
text-align: center;
& > p:first-child {
color: #ffffff;
font-size: 0.16rem;
line-height: 0.16rem;
margin-bottom: 0.12rem;
}
& > p:last-child {
color: #1ef6f5;
font-size: 0.28rem;
line-height: 0.28rem;
padding-bottom: 0.24rem;
margin: 0;
}
}
}
}
.platform-overview-bottom:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink