From 69b01c1de544bdaedfa12aaf13600239dabbcb3c Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期五, 29 十一月 2024 16:51:07 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/components/projectOverview.vue | 654 +++++++++++++++++++++++++++++++---------------------------- 1 files changed, 344 insertions(+), 310 deletions(-) diff --git a/src/views/components/projectOverview.vue b/src/views/components/projectOverview.vue index 3bda1ba..77f5e12 100644 --- a/src/views/components/projectOverview.vue +++ b/src/views/components/projectOverview.vue @@ -1,339 +1,373 @@ <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="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 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 ''; }, - watch: { - // calculation: { - // handler(val) { - // console.log("11111" + val); - // }, - // }, - // countExceptionProjectData: { - // handler(val) { - // console.log("22222" + val); - - // }, - // }, + 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 ''; }, - 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 ''; - }, + // 璺宠浆鍒板紓甯搁」鐩� + showAbnormal() { + console.log('璺宠浆寮傚父椤圭洰'); + this.$router.push({ + path: 'projectEngineering/project/abnormalProject' + }); + }, - 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; + // 璺宠浆鍒板搴旂殑椤圭洰搴� + 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; + 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; + 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 { + 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); - } + .abnormal-center { + margin-bottom: 15px; } - .custom-min-width { - min-width: 1250px; - width: 1250px; + .abnormal-img { + position: absolute; + right: 50px; + bottom: 20px; + width: 100px; + height: 100px; + background-image: url(../../assets/images/c.png); } + } - .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 { + .custom-min-width { min-width: 1250px; width: 1250px; - gap: 10px; - flex-wrap: wrap; + } + + .listings { + width: 300px; + height: 90px; + border-radius: 6px; display: flex; - margin-left: 10px; + 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