From 84a14c24edf92f7072e50b51ee37143d658ecfd4 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 11 三月 2025 14:28:09 +0800
Subject: [PATCH] 项目库展示总年度投资金额
---
src/views/components/projectOverview.vue | 627 +++++++++++++++++++++++++++++++-------------------------
1 files changed, 349 insertions(+), 278 deletions(-)
diff --git a/src/views/components/projectOverview.vue b/src/views/components/projectOverview.vue
index 0cb5697..49d5c32 100644
--- a/src/views/components/projectOverview.vue
+++ b/src/views/components/projectOverview.vue
@@ -1,308 +1,379 @@
<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 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="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 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="overview-div custom-min-width">
+ <div
+ v-for="i in calculation"
+ :key="i.text"
+ :style="setbcStyle(i.text)"
+ class="listings"
+ @click="showDetail(i.text)"
+ >
+ <div :style="setTextStyle(i.text)" class="title">
+ {{ i.text }}
+ </div>
+ <div class="conter">
+ <div :style="setTextColor(i.text)" class="mun">
+ {{ i.mun }}
+ </div>
+ <div class="statistics">
+ <div>{{ i.statistics }}</div>
+ <div :style="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 >
+<script>
export default {
- name: "Index",
- data() {
- return {}
+ name: "Index",
+ data() {
+ return {}
+ },
+ props: {
+ calculation: Array,
+ countExceptionProjectData: Object,
+ },
+ watch: {
+ // calculation: {
+ // handler(val) {
+ // console.log("11111" + val);
+
+ // },
+ // },
+ // countExceptionProjectData: {
+ // handler(val) {
+ // console.log("22222" + val);
+
+ // },
+ // },
+ },
+ methods: {
+ setTextStyle(text) {
+ if (text === '鍌�') return 'background-color:#3369FF';
+ if (text === '寤�') return 'background-color:#64ADFD';
+ if (text === '鐪�') return 'background-color:#FF5E57';
+ if (text === '甯�') return 'background-color:#FFA83F';
+ if (text === '鏂�') return 'background-color:#5DD1E5';
+ if (text === '绔�') return 'background-color:#576BF5';
+ if (text === '鍘�') return 'background-color:#3369FF';
+ if (text === '鏅�') return 'background-color:#64ADFD';
+ return '';
},
- props: {
- calculation: Array,
- countExceptionProjectData:Object,
+
+ setTextColor(text) {
+ if (text === '鍌�') return 'color:#3369FF';
+ if (text === '寤�') return 'color:#64ADFD';
+ if (text === '鐪�') return 'color:#FF5E57';
+ if (text === '甯�') return 'color:#FFA83F';
+ if (text === '鏂�') return 'color:#5DD1E5';
+ if (text === '绔�') return 'color:#576BF5';
+ if (text === '鍘�') return 'color:#3369FF';
+ if (text === '鏅�') return 'color:#64ADFD';
+ return '';
},
- 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 '';
- },
+ setbcStyle(text) {
+ if (text === '鍌�') return 'background-color:#EAF0FF';
+ if (text === '寤�') return 'background-color:#EFF7FF';
+ if (text === '鐪�') return 'background-color:#FEEEED';
+ if (text === '甯�') return 'background-color:#FFF6EB';
+ if (text === '鏂�') return 'background-color:#EEFAFC';
+ if (text === '绔�') return 'background-color:#EEF0FE';
+ if (text === '鍘�') return 'background-color:#EAF0FF';
+ if (text === '鏅�') return 'background-color:#EFF7FF';
+ return '';
+ },
+ // 璺宠浆鍒板紓甯搁」鐩�
+ showAbnormal() {
+ console.log('璺宠浆寮傚父椤圭洰');
+ this.$router.push({
+ path: 'projectEngineering/project/abnormalProject'
+ });
+ },
- 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;
+ // 璺宠浆鍒板搴旂殑椤圭洰搴�
+ showDetail(text) {
+ console.log('璺宠浆鍒板搴旂殑椤圭洰搴�', text);
+ switch (text) {
+ case '鍌�':
+ this.$router.push({
+ path: '/projectEngineering/project/reserveProjects',
+ query: {
+ projectPhase: '1'
}
- }
+ });
+ break;
+ case '鏂�':
+ this.$router.push({
+ path: '/projectEngineering/project/previousProjects',
+ query: {
+ projectPhase: '2'
+ }
+ });
+ break;
+ case '寤�':
+ this.$router.push({
+ path: '/projectEngineering/project/implementationProject',
+ query: {
+ projectPhase: '3'
+ }
+ });
+ break;
+ case '绔�':
+ this.$router.push({
+ path: '/projectEngineering/project/completedProjects',
+ query: {
+ projectPhase: '4'
+ }
+ });
+ break;
+ case '鐪�':
+ this.$router.push({
+ path: '/projectEngineering/project/projectLibrary',
+ query: {
+ importanceType: 'provincial_key'
+ }
+ });
+ break;
+ case '鍘�':
+ this.$router.push({
+ path: '/projectEngineering/project/projectLibrary',
+ query: {
+ importanceType: 'shehong_key'
+ }
+ });
+ break;
+ case '甯�':
+ this.$router.push({
+ path: '/projectEngineering/project/projectLibrary',
+ query: {
+ importanceType: 'suining_key'
+ }
+ });
+ break;
+ case '鏅�':
+ this.$router.push({
+ path: '/projectEngineering/project/projectLibrary',
+ query: {
+ importanceType: 'normal'
+ }
+ });
+ break;
+ default:
+ break;
+ }
}
+ }
}
</script>
<style lang="scss" scoped>
.overview-bottom {
+ display: flex;
+ justify-content: space-between;
+
+ .abnormal:hover {
+ cursor: pointer;
+ }
+ .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:hover {
+ cursor: pointer;
+ }
+ .listings {
+ width: 300px;
+ height: 90px;
+ border-radius: 6px;
display: flex;
- justify-content: space-between;
+ align-items: center;
- .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);
- }
+ .title {
+ width: 45px;
+ height: 45px;
+ font-size: 24px;
+ border-radius: 8px;
+ line-height: 45px;
+ text-align: center;
+ margin-left: 15px;
+ color: #ffffff;
}
- .custom-min-width {
- min-width: 1250px;
- width: 1250px;
+ .active {
+ background-color: #3369ff;
}
- .listings {
- width: 300px;
- height: 90px;
- border-radius: 6px;
+ .conter {
+ margin-left: 10px;
+
+ .mun {
+ font-size: 30px;
+ line-height: 32px;
+ }
+
+ .statistics {
+ width: 200px;
display: flex;
+ justify-content: space-between;
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;
- // }
- }
- }
+ // .statistics-mun {
+ // // color: #3369FF;
+ // }
+ }
}
+ }
}
+.overview-div {
+ min-width: 1250px;
+ width: 1250px;
+ gap: 10px;
+ flex-wrap: wrap;
+ display: flex;
+ margin-left: 10px;
+}
</style>
--
Gitblit v1.8.0