mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 2 Releases Wiki Activity

修改箭头颜色逻辑成本费用相关

Browse Source
This commit is contained in:
朱菊兰
2026-07-07 16:01:07 +08:00
parent 1e8fbc5f5a
commit af01e6a691
7 changed files with 15 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/home/components/cost-Item.vue
View File

@@ -13,7 +13,7 @@
<div class="line"></div>
<div class="right">
<!-- 本月数值：动态绑定颜色 -->
<div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
<div class="number" :style="{ color: getColor(item.thbe) }">
{{ item.currentValue }}
</div>
<div class="title">{{currentTap==='month'?'本月':'本年'}}</div>
@@ -23,7 +23,7 @@
<div class="right">
<!-- 环比额：计算差值并动态绑定颜色 -->
<div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
<div class="number" :style="{ color: getColor(item.thbe) }">
{{ item.thbe }}
</div>
<div class="title">环比额</div>
@@ -126,18 +126,11 @@ export default {
},
// 颜色判断：本月 >= 上月 绿色，否则 橙色
getColor(current, target) {
return current >= target
? "rgba(98, 213, 180, 1)" // 绿色：增长或持平
: "rgba(249, 164, 74, 1)"; // 橙色：下降
},
// 计算环比额（本月 - 上月），保留一位小数
// getData(current, target) {
// const diff = current - target;
// // 正数加"+"号，负数和零保持原样
// return diff > 0 ? `+${diff.toFixed(1)}` : diff.toFixed(1);
// }
getColor(thbe) {
return thbe < 0
? "rgba(98, 213, 180, 1)" // 绿色
: "rgba(249, 164, 74, 1)"; // 橙色
}
},
};
</script>

2
src/views/home/expenseAnalysisComponents/monthlyOverview.vue
View File

@@ -15,7 +15,7 @@
</div>
<div class="mom">
环比{{ monthData?.momRate }}%
<img v-if="monthData?.momRate >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="">
<img v-if="monthData?.momRate < 0" class="arrow" src="../../../assets/img/topArrow.png" alt="">
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="">
</div>
</div>

2
src/views/home/expenseAnalysisComponents/totalOverview.vue
View File

@@ -15,7 +15,7 @@
</div>
<div class="mom">
同比{{ ytdData?.yoyRate || 0 }}%
<img v-if="ytdData?.yoyRate >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="">
<img v-if="ytdData?.yoyRate < 0" class="arrow" src="../../../assets/img/topArrow.png" alt="">
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="">
</div>
</div>

6
src/views/home/operatingComponents/verticalBarChart.vue
View File

@@ -5,7 +5,7 @@
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.diff>=0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
</div>
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
</div>
@@ -18,6 +18,7 @@ export default {
data() {
return {
myChart: null, // 存储图表实例，避免重复创建
flag: 0,
resizeHandler: null, // 窗口resize事件处理器
isMounted: false // 图表挂载标志，避免过早执行
};
@@ -90,7 +91,8 @@ export default {
this.myChart = echarts.init(chartDom);
const diff = this.detailData.diff || 0
const rate = this.detailData.rate || 0
const flagValue = (this.detailData.rate>=100?1:0) || 0
const flagValue = this.detailData.rate>=100?1:0
this.flag = flagValue
const option = {
tooltip: {

2
src/views/home/productionCostAnalysisComponents/monthlyOverview.vue
View File

@@ -13,7 +13,7 @@
</div>
<div class="mom">
环比{{ formatRate(factoryData?.thb) }}%
<img v-if="factoryData?.thb >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="上升">
<img v-if="factoryData?.thb < 0" class="arrow" src="../../../assets/img/topArrow.png" alt="上升">
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="下降">
</div>
</div>

2
src/views/home/productionCostAnalysisComponents/totalOverview.vue
View File

@@ -15,7 +15,7 @@
</div>
<div class="mom">
同比{{ formatRate(factoryData?.thb) }}%
<img v-if="factoryData?.thb >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="上升">
<img v-if="factoryData?.thb < 0" class="arrow" src="../../../assets/img/topArrow.png" alt="上升">
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="下降">
</div>
</div>