xiugai
This commit is contained in:
@@ -32,7 +32,7 @@
|
||||
<div class="label">
|
||||
<span class="label-text">月份选择</span>
|
||||
</div>
|
||||
<el-date-picker v-model="date" type="month" placeholder="请选择月份" class="custom-date-picker"
|
||||
<el-date-picker :clearable="false" v-model="date" type="month" placeholder="请选择月份" class="custom-date-picker"
|
||||
style="width: 132px;height: 29px;" @change="emitTimeRange" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,7 +45,11 @@ export default {
|
||||
name: 'Header',
|
||||
props: {
|
||||
isFullScreen: { type: Boolean, default: false },
|
||||
topTitle: { type: String, default: '' }
|
||||
topTitle: { type: String, default: '' },
|
||||
dateData: {
|
||||
type: Object,
|
||||
default: {} // 默认值设为350px
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -162,6 +166,19 @@ export default {
|
||||
this.date = undefined;
|
||||
// this.emitTimeRange();
|
||||
}
|
||||
},
|
||||
dateData: {
|
||||
immediate: true, // 初始化时立即执行
|
||||
handler(newVal) {
|
||||
if (newVal && (newVal.startTime || newVal.endTime)) {
|
||||
// 优先使用 startTime 转换为月份格式
|
||||
const timeStamp = newVal.startTime || newVal.endTime;
|
||||
if (timeStamp !== 0) {
|
||||
const monthStr = moment(timeStamp).format('YYYY-MM');
|
||||
this.date = monthStr; // 赋值给选择器
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@@ -137,7 +137,7 @@ export default {
|
||||
nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
|
||||
min: () => 0,
|
||||
max: (value) => Math.ceil(value.max),
|
||||
scale: true,
|
||||
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
|
||||
splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
export default {
|
||||
name: "Container",
|
||||
components: {},
|
||||
props: ["purchase"],
|
||||
props: ["purchase",'dateData'],
|
||||
data() {
|
||||
return {
|
||||
itemList: []
|
||||
@@ -62,7 +62,10 @@ export default {
|
||||
methods: {
|
||||
handleRoute(path) {
|
||||
this.$router.push({
|
||||
path:path
|
||||
path: path,
|
||||
query: {
|
||||
dateData: this.dateData
|
||||
}
|
||||
})
|
||||
},
|
||||
transformData(rawData) {
|
||||
@@ -114,7 +117,9 @@ export default {
|
||||
background: #f9fcff;
|
||||
padding: 12px 12px 0 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 12px 2px #B5CDE5;
|
||||
}
|
||||
.unit {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<Container name="采购重点指标" nameTwo="存货重点指标" icon="cockpitItemIcon" size="bottomBasic">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度,改为自适应 -->
|
||||
<div class="bottom-left-content" style="display: flex;gap: 9px;padding: 14px 16px;">
|
||||
<coreBottomLeftItem :purchase="purchase">
|
||||
<coreBottomLeftItem :dateData="dateData" :purchase="purchase">
|
||||
</coreBottomLeftItem>
|
||||
<div class="content-right" style="background: #F9FCFF;padding: 15px 12px;">
|
||||
<base-table style="height: 180px;width: 260px;" :page="1" :limit="10" :show-index="true" :beilv="1"
|
||||
@@ -29,6 +29,10 @@ export default {
|
||||
type: Object,
|
||||
default: () => {} // 默认空数组,避免报错
|
||||
},
|
||||
dateData: { // 接收父组件传递的设备数据数组
|
||||
type: Object,
|
||||
default: () => { } // 默认空数组,避免报错
|
||||
},
|
||||
inventory: { // 恢复生产概览数据(原代码注释了,需根据实际需求保留)
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
|
||||
@@ -78,7 +78,7 @@ export default {
|
||||
label: { backgroundColor: '#6a7985' }
|
||||
}
|
||||
},
|
||||
grid: { top: 10, bottom: 20, right: 25, left: 70 },
|
||||
grid: { top: 35, bottom: 20, right: 25, left: 70 },
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
@@ -119,10 +119,12 @@ export default {
|
||||
],
|
||||
yAxis: {
|
||||
// type: 'value',
|
||||
nameTextStyle: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 14, align: 'left' },
|
||||
name: '元/㎡',
|
||||
// nameLocation:'center',
|
||||
nameTextStyle: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 14, align: 'right' },
|
||||
// min: () => 0,
|
||||
// max: (value) => Math.ceil(value.max),
|
||||
scale: true,
|
||||
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 12 },
|
||||
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
|
||||
@@ -41,7 +41,11 @@ export default {
|
||||
cost: { // 接收父组件传递的 cost 数据对象
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
dateData: { // 接收父组件传递的 cost 数据对象
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -65,7 +69,8 @@ export default {
|
||||
this.$router.push({
|
||||
path: path,
|
||||
query: {
|
||||
factory: this.$route.query.factory ? this.$route.query.factory : 5
|
||||
factory: this.$route.query.factory ? this.$route.query.factory : 5,
|
||||
dateData: this.dateData
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -134,7 +139,10 @@ export default {
|
||||
background: #f9fcff;
|
||||
padding: 12px 0px 17px 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 12px 2px #B5CDE5;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.unit {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
</template>
|
||||
<template v-else-if="activeTab === 'inventory'">
|
||||
<!-- 存货重点指标对应的内容 -->
|
||||
<costItem :cost="cost"></costItem>
|
||||
<costItem :dateData="dateData" :cost="cost"></costItem>
|
||||
<div class="bottom"
|
||||
style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
|
||||
<CostsBottomBar :line="cost.line" :dateData="dateData">
|
||||
@@ -144,7 +144,7 @@ export default {
|
||||
nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
|
||||
min: 0,
|
||||
max: (value) => Math.ceil(value.max),
|
||||
scale: true,
|
||||
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
|
||||
splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
|
||||
|
||||
@@ -42,7 +42,7 @@ export default {
|
||||
tableData: [],
|
||||
tableProps: [
|
||||
{ prop: 'name', label: '攻坚指标', align: 'center' },
|
||||
{ prop: 'target', label: '攻坚目标', align: 'center' },
|
||||
{ prop: 'target', label: '攻坚预算', align: 'center' },
|
||||
{ prop: 'monthlyActual', label: '当月实际', align: 'center' },
|
||||
{ prop: 'accumulated', label: '累计', align: 'center', subcomponent: finishDiv },
|
||||
]
|
||||
|
||||
@@ -46,7 +46,11 @@ export default {
|
||||
leftMargin: {
|
||||
type: [String, Number],
|
||||
default: '350px' // 默认值设为350px
|
||||
}
|
||||
},
|
||||
dateData: {
|
||||
type: Object,
|
||||
default: {} // 默认值设为350px
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -75,11 +79,26 @@ export default {
|
||||
this.date = undefined;
|
||||
// this.emitTimeRange();
|
||||
}
|
||||
},
|
||||
dateData: {
|
||||
immediate: true, // 初始化时立即执行
|
||||
handler(newVal) {
|
||||
console.log('newVal', newVal);
|
||||
|
||||
if (newVal && (newVal.startTime || newVal.endTime)) {
|
||||
// 优先使用 startTime 转换为月份格式
|
||||
const timeStamp = newVal.startTime || newVal.endTime;
|
||||
if (timeStamp !== 0) {
|
||||
const monthStr = moment(timeStamp).format('YYYY-MM');
|
||||
this.date = monthStr; // 赋值给选择器
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化默认日期(当前月,格式:yyyy-MM)
|
||||
console.log(this.$router);
|
||||
// console.log(this.$router);
|
||||
this.date = moment().format('YYYY-MM');
|
||||
this.$nextTick(() => this.emitTimeRange());
|
||||
},
|
||||
|
||||
@@ -120,7 +120,7 @@ export default {
|
||||
},
|
||||
// min: 0,
|
||||
// max: (value) => Math.ceil((value.max || 0) * 1.1),
|
||||
scale: true,
|
||||
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
|
||||
@@ -117,7 +117,7 @@ export default {
|
||||
fontSize: 12,
|
||||
align: 'right'
|
||||
},
|
||||
scale: true,
|
||||
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
|
||||
@@ -115,7 +115,7 @@ export default {
|
||||
fontSize: 12,
|
||||
align: 'right'
|
||||
},
|
||||
scale: true,
|
||||
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
@@ -144,7 +144,7 @@ export default {
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
// scale: true,
|
||||
//
|
||||
splitNumber: 4,
|
||||
}
|
||||
],
|
||||
|
||||
@@ -31,7 +31,9 @@
|
||||
<div class="yield" style="display: flex;justify-content: space-between;">
|
||||
<div class="progress-percent">完成率</div>
|
||||
<!-- 百分比颜色动态绑定 -->
|
||||
<div class="progress-percent">
|
||||
<div class="progress-percent" :style="{
|
||||
color: getColor(itemList[0].currentValue, itemList[0].targetValue)
|
||||
}">
|
||||
{{ itemList[0].progress }}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -97,7 +97,7 @@ export default {
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 20,
|
||||
top: 35,
|
||||
bottom: 20,
|
||||
right: 25,
|
||||
},
|
||||
@@ -140,14 +140,12 @@ export default {
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 14,
|
||||
align: 'left'
|
||||
},
|
||||
name: '元/㎡',
|
||||
// nameLocation:'center',
|
||||
nameTextStyle: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 14, align: 'right' },
|
||||
min: 0,
|
||||
// max: function (value) { return Math.ceil(value.max * 1.1); }, // 增加一点余量
|
||||
scale: true,
|
||||
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
|
||||
@@ -151,7 +151,7 @@ export default {
|
||||
fontSize: 12,
|
||||
align: 'right'
|
||||
},
|
||||
scale: true,
|
||||
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
|
||||
@@ -121,7 +121,7 @@ export default {
|
||||
path: route,
|
||||
query: {
|
||||
// 关键修复4:dateData是对象,需序列化后传递(否则路由query无法正常接收对象)
|
||||
dateData: JSON.stringify(this.dateData)
|
||||
dateData: this.dateData
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -120,7 +120,7 @@ export default {
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 252px;
|
||||
width: 253px;
|
||||
height: 110px;
|
||||
background: #f9fcff;
|
||||
padding: 12px;
|
||||
|
||||
@@ -181,10 +181,16 @@ export default {
|
||||
|
||||
.coreItem> :nth-child(4) {
|
||||
grid-area: item4;
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 12px 2px #B5CDE5;
|
||||
}
|
||||
}
|
||||
|
||||
.coreItem> :nth-child(5) {
|
||||
grid-area: item5;
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 12px 2px #B5CDE5;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
Reference in New Issue
Block a user