admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加安全评分根据分值修改背景光晕颜色

Browse Source
This commit is contained in:
Vce 2024-06-05 14:41:13 +08:00
parent 0763058759
commit 7c82f0abb0
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/commandScreen/commandCenter/centerTop.vue
View File

@ -50,16 +50,24 @@
<span :style="statScore.radio > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{ statScore.radio > 0 ? "↑" : "↓" }} </span>
</div>
</div>
<div class="score-div" @click="openDialogData({ index: 9, title: '月度安全综合评分' })">
<div :class="['score-div', statScore.total >= 80 ? 'scoreBg1':statScore.total >= 60 ? 'scoreBg2':'scoreBg3']" @click="openDialogData({ index: 9, title: '月度安全综合评分' })">
<div class="score-part">
<span>{{ statScore.total }}</span>
<span>分</span>
</div>
<div class="scoreInner">
<span style="font-size:18px">安全评分</span>
<div class="scoreReview">
优秀
</div>
<div class="scoreInner scoreTextBg1" v-if="statScore.total >= 80">
<span style="font-size:18px">安全评分</span>
<div class="scoreReview" >优秀</div>
<div class="scoreStar"></div>
</div>
<div class="scoreInner scoreTextBg2" v-if="statScore.total >= 60 && statScore.total < 80">
<span style="font-size:18px">安全评分</span>
<div class="scoreReview">一般</div>
<div class="scoreStar"></div>
</div>
<div class="scoreInner scoreTextBg3" v-if="statScore.total < 60">
<span style="font-size:18px">安全评分</span>
<div class="scoreReview">差</div>
<div class="scoreStar"></div>
</div>
</div>
@ -197,6 +205,7 @@ const getStatScore = async () => {
const res = await getStatScoreApi({ projectSn: store.sn });
console.log("获取项目信息6666666666666666666666666666666666", res);
statScore.value = res.result;
statScore.value.total = 74
};
function boxStyle(item: any) {
@ -288,6 +297,12 @@ onMounted(async () => {
</script>
<style lang="scss" scoped>
.scoreBg1{background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 115px);}
.scoreBg2{background-image: radial-gradient(circle, rgb(255,175,0) 0px, rgba(255, 255, 255, 0) 115px);}
.scoreBg3{background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 115px);}
.scoreTextBg1{background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 40px);}
.scoreTextBg2{background-image: radial-gradient(circle, rgb(255,175,0) 0px, rgba(255, 255, 255, 0) 40px);}
.scoreTextBg3{background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 40px);}
.centerTop {
// background-color: darkred;
.top-content {
@ -387,9 +402,9 @@ onMounted(async () => {
}
}
}
.score-div {
background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 115px);
color: white;
position: absolute;
// bottom: 210px;
@ -419,13 +434,13 @@ onMounted(async () => {
.scoreInner{
text-align: center;
margin-top: -10px;
width: 100%;
width: 90%;
// height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 40px);
// background-color: red;
.scoreReview{
opacity: 0.7;