<template>
|
<div class="overview-bottom">
|
<div class="abnormal" @click="showAbnormal">
|
<div style="margin-bottom: 30px">异常项目情况统计</div>
|
<div>
|
<div class="abnormal-center">
|
流程异常项目：<span
|
style="font-size: 16px; font-weight: 700"
|
>{{
|
countExceptionProjectData.processExceptionProject
|
}}</span
|
>
|
</div>
|
<div class="abnormal-center">
|
资金异常项目：<span
|
style="font-size: 16px; font-weight: 700"
|
>0</span
|
>
|
</div>
|
<div class="abnormal-center">
|
进度异常项目：<span
|
style="font-size: 16px; font-weight: 700"
|
>0</span
|
>
|
</div>
|
</div>
|
<div class="abnormal-img"></div>
|
</div>
|
<div class="flex gap-[10px] ml-[10px] flex-wrap custom-min-width">
|
<div
|
v-for="i in calculation"
|
:key="i.text"
|
:class="setbcStyle(i.text)"
|
class="listings"
|
@click="showDetail(i.text)"
|
>
|
<div :class="setTextStyle(i.text)" class="title">
|
{{ i.text }}
|
</div>
|
<div class="conter">
|
<div :class="setTextColor(i.text)" class="mun">
|
{{ i.mun }}
|
</div>
|
<div class="statistics">
|
<div>{{ i.statistics }}</div>
|
<div :class="setTextColor(i.text)">
|
{{ i.statisticsMun
|
}}<span style="font-size: 18px">亿</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="listings">
|
<div class="title">
|
储
|
</div>
|
<div class="conter">
|
<div class="mun">44</div>
|
<div class="statistics">
|
<div>储备项目数量统计</div>
|
<div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="listings">
|
<div class="title">
|
储
|
</div>
|
<div class="conter">
|
<div class="mun">44</div>
|
<div class="statistics">
|
<div>储备项目数量统计</div>
|
<div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="listings">
|
<div class="title">
|
储
|
</div>
|
<div class="conter">
|
<div class="mun">44</div>
|
<div class="statistics">
|
<div>储备项目数量统计</div>
|
<div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="listings">
|
<div class="title">
|
储
|
</div>
|
<div class="conter">
|
<div class="mun">44</div>
|
<div class="statistics">
|
<div>储备项目数量统计</div>
|
<div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="listings">
|
<div class="title">
|
储
|
</div>
|
<div class="conter">
|
<div class="mun">44</div>
|
<div class="statistics">
|
<div>储备项目数量统计</div>
|
<div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="listings">
|
<div class="title">
|
储
|
</div>
|
<div class="conter">
|
<div class="mun">44</div>
|
<div class="statistics">
|
<div>储备项目数量统计</div>
|
<div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="listings">
|
<div class="title active">
|
储
|
</div>
|
<div class="conter">
|
<div class="mun">44</div>
|
<div class="statistics">
|
<div>储备项目数量统计</div>
|
<div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
|
</div>
|
</div>
|
</div> -->
|
</div>
|
</div>
|
</template>
|
|
<script >
|
export default {
|
name: "Index",
|
data() {
|
return {}
|
},
|
props: {
|
calculation: Array,
|
countExceptionProjectData:Object,
|
},
|
methods: {
|
setTextStyle(text) {
|
if (text === '储') return 'bg-[#3369FF]';
|
if (text === '建') return 'bg-[#64ADFD]';
|
if (text === '省') return 'bg-[#FF5E57]';
|
if (text === '市') return 'bg-[#FFA83F]';
|
if (text === '新') return 'bg-[#5DD1E5]';
|
if (text === '竣') return 'bg-[#576BF5]';
|
if (text === '县') return 'bg-[#3369FF]';
|
if (text === '普') return 'bg-[#64ADFD]';
|
return '';
|
},
|
|
|
setTextColor(text) {
|
if (text === '储') return 'text-[#3369FF]';
|
if (text === '建') return 'text-[#64ADFD]';
|
if (text === '省') return 'text-[#FF5E57]';
|
if (text === '市') return 'text-[#FFA83F]';
|
if (text === '新') return 'text-[#5DD1E5]';
|
if (text === '竣') return 'text-[#576BF5]';
|
if (text === '县') return 'text-[#3369FF]';
|
if (text === '普') return 'text-[#64ADFD]';
|
return '';
|
},
|
|
// 跳转到异常项目
|
showAbnormal() {
|
console.log('跳转异常项目');
|
this.$router.push({
|
path: 'projectEngineering/project/abnormalProject'
|
});
|
},
|
|
// 跳转到对应的项目库
|
showDetail(text) {
|
console.log('跳转到对应的项目库', text);
|
switch (text) {
|
case '储':
|
this.$router.push({
|
path: '/projectEngineering/project/reserveProjects',
|
query: {
|
projectCategory: '1'
|
}
|
});
|
break;
|
case '新':
|
this.$router.push({
|
path: '/projectEngineering/project/previousProjects',
|
query: {
|
projectCategory: '2'
|
}
|
});
|
break;
|
case '建':
|
this.$router.push({
|
path: '/projectEngineering/project/implementationProject',
|
query: {
|
projectCategory: '3'
|
}
|
});
|
break;
|
case '竣':
|
this.$router.push({
|
path: '/projectEngineering/project/completedProjects',
|
query: {
|
projectCategory: '4'
|
}
|
});
|
break;
|
default:
|
break;
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.overview-bottom {
|
display: flex;
|
justify-content: space-between;
|
|
.abnormal {
|
position: relative;
|
width: 25%;
|
min-width: 342px;
|
height: 200px;
|
background-image: url(../../assets/images/b.png);
|
background-size: 100% auto;
|
border-radius: 6px;
|
font-size: 16px;
|
color: #ffffff;
|
padding: 20px 0 0 20px;
|
|
.abnormal-center {
|
margin-bottom: 15px;
|
}
|
|
.abnormal-img {
|
position: absolute;
|
right: 50px;
|
bottom: 20px;
|
width: 100px;
|
height: 100px;
|
background-image: url(../../assets/images/c.png);
|
}
|
}
|
|
.custom-min-width {
|
min-width: 1250px;
|
width: 1250px;
|
}
|
|
.listings {
|
width: 300px;
|
height: 90px;
|
border-radius: 6px;
|
display: flex;
|
align-items: center;
|
|
.title {
|
width: 45px;
|
height: 45px;
|
font-size: 24px;
|
border-radius: 8px;
|
line-height: 45px;
|
text-align: center;
|
margin-left: 15px;
|
color: #ffffff;
|
}
|
|
.active {
|
background-color: #3369ff;
|
}
|
|
.conter {
|
margin-left: 10px;
|
|
.mun {
|
font-size: 30px;
|
line-height: 32px;
|
}
|
|
.statistics {
|
width: 200px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
// .statistics-mun {
|
// // color: #3369FF;
|
// }
|
}
|
}
|
}
|
}
|
|
</style>
|
