From 87e3d52c62233ad44bd7bac3f43e5348a2de4e94 Mon Sep 17 00:00:00 2001
From: luohairen <3399054449@qq.com>
Date: 星期一, 25 十一月 2024 10:36:16 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/components/projectOverview.vue | 339 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 339 insertions(+), 0 deletions(-)
diff --git a/src/views/components/projectOverview.vue b/src/views/components/projectOverview.vue
new file mode 100644
index 0000000..3bda1ba
--- /dev/null
+++ b/src/views/components/projectOverview.vue
@@ -0,0 +1,339 @@
+<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="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 >
+export default {
+ 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 '';
+ },
+
+ 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 '';
+ },
+
+ 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'
+ });
+ },
+
+ // 璺宠浆鍒板搴旂殑椤圭洰搴�
+ 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;
+ // }
+ }
+ }
+ }
+}
+.overview-div {
+ min-width: 1250px;
+ width: 1250px;
+ gap: 10px;
+ flex-wrap: wrap;
+ display: flex;
+ margin-left: 10px;
+}
+</style>
--
Gitblit v1.8.0