修改
This commit is contained in:
‘937886381’
251
src/views/home/costComponents/raw-Item.vue
Normal file
251
src/views/home/costComponents/raw-Item.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div class="coreItem-container" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
|
||||
@mouseleave="handleMouseUp" :style="{ cursor: isDragging ? 'grabbing' : 'grab' }">
|
||||
<div class="coreItem">
|
||||
<div class="item" @click="handleRoute(item)" v-for="(item, index) in itemList" :key="index">
|
||||
<div class="item-header">
|
||||
<div class="unit">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="content-wrapper">
|
||||
<div class="value-group">
|
||||
<div class="value-item">
|
||||
<div class="number" style="color: rgba(103, 103, 103, 0.79);">{{ item.target }}</div>
|
||||
<div class="title">目标值</div>
|
||||
</div>
|
||||
<div class="middle-line"></div>
|
||||
<!-- 当前值数字：根据 flag 变色 -->
|
||||
<div class="value-item">
|
||||
<div class="number" :style="{ color: item.flag === 1 ? '#36B58A' : '#F9A44A' }">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
<div class="title">当前值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-yield-group">
|
||||
<div class="progress-group">
|
||||
<div class="progress-container">
|
||||
<!-- 进度条：根据 flag 变色 -->
|
||||
<div class="progress-bar" :style="{
|
||||
width: (item.proportion ? item.proportion : 0) + '%',
|
||||
background: item.flag === 1 ? 'rgba(54, 181, 138, 1)' : 'rgba(249, 164, 74, 1)'
|
||||
}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yield">
|
||||
<span class="progress-percent" :style="{ color: item.flag === 1 ? '#36B58A' : '#F9A44A' }">完成率</span>
|
||||
<!-- 完成率百分比：根据 flag 变色 -->
|
||||
<span class="progress-percent progress-value"
|
||||
:style="{ color: item.flag === 1 ? '#36B58A' : '#F9A44A' }">
|
||||
{{ (item.proportion ? item.proportion : 0 ) }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Container",
|
||||
components: {},
|
||||
props: ["name", "size", "icon", "itemList",'route'],
|
||||
data() {
|
||||
return {
|
||||
// parentItemList: [
|
||||
// { name: "燃料成本", target: 0, value: 0, proportion: 0, flag: 0 },
|
||||
// { name: "天然气", target: 0, value: 0, proportion: 0, flag: 0 }
|
||||
// ],
|
||||
isDragging: false,
|
||||
startX: 0,
|
||||
scrollLeft: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleRoute(item) {
|
||||
this.$router.push({
|
||||
name: item.route,
|
||||
query: {
|
||||
name: item.name,
|
||||
}
|
||||
})
|
||||
},
|
||||
handleMouseDown(e) {
|
||||
this.isDragging = true;
|
||||
this.startX = e.pageX - this.$el.offsetLeft;
|
||||
this.scrollLeft = this.$el.scrollLeft;
|
||||
this.$el.style.userSelect = "none";
|
||||
},
|
||||
handleMouseMove(e) {
|
||||
if (!this.isDragging) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - this.$el.offsetLeft;
|
||||
const walk = (x - this.startX) * 1.2;
|
||||
this.$el.scrollLeft = this.scrollLeft - walk;
|
||||
},
|
||||
handleMouseUp() {
|
||||
this.isDragging = false;
|
||||
this.$el.style.userSelect = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 样式保持不变，仅删除 progress-bar 和 progress-value 的固定颜色 */
|
||||
.coreItem-container {
|
||||
width: 100%;
|
||||
height: 270px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.coreItem {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 0 8px;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 280px;
|
||||
height: 265px;
|
||||
background: #f9fcff;
|
||||
padding: 10px 20px 0 27px;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 12px 2px #B5CDE5;
|
||||
}
|
||||
.item-header {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.value-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.value-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.middle-line {
|
||||
width: 207px;
|
||||
height: 1px;
|
||||
// border: 1px solid;
|
||||
background: linear-gradient(to left, rgba(255, 0, 0, 0), #cbcbcb);
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
/* 移除固定颜色，由模板动态绑定 */
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.progress-yield-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.progress-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #F5F7FA;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease;
|
||||
/* 移除固定背景色，由模板动态绑定 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
font-weight: 500;
|
||||
/* 移除固定颜色，由模板动态绑定 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user