280 lines
7.7 KiB
Vue
280 lines
7.7 KiB
Vue
<template>
|
||
<div style="flex: 1">
|
||
<Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
|
||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||
<div
|
||
v-for="item in sortedIndicators"
|
||
:key="item.key"
|
||
class="dashboard"
|
||
@click="item.route && handleDashboardClick(item.route)"
|
||
>
|
||
<div class="title">
|
||
{{ item.name }}·{{ item.unit }}
|
||
</div>
|
||
<div style='font-size: 14px;text-align: right;padding-right: 5px;'>
|
||
<span>完成率:<span style='color: #0B58FF;'>{{item.detailData.completeRate}}%</span></span>
|
||
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:item.detailData.flag>0?'#30B590':'#FF9423'}" >{{item.detailData.diff}}</span></span>
|
||
</div>
|
||
<operatingSingleBar :detailData="item.detailData"></operatingSingleBar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import Container from './container.vue'
|
||
import operatingSingleBar from './operatingSingleBar.vue'
|
||
import { pushNavigation, saveNavigationState } from '@/utils/navigationReturnState';
|
||
|
||
export default {
|
||
name: 'ProductionStatus',
|
||
components: { Container, operatingSingleBar },
|
||
props: {
|
||
relatedMon: {
|
||
type: Object,
|
||
default: () => ({
|
||
单价: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
|
||
运费: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
|
||
})
|
||
},
|
||
dateData: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
factory: {
|
||
type: [String, Number],
|
||
default: ''
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null,
|
||
// 兜底数据：防止字段缺失时报错
|
||
defaultData: {
|
||
completeRate: 0,
|
||
diff: 0,
|
||
real: 0,
|
||
target: 0,
|
||
thb: 0
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
indicatorDefs() {
|
||
return [
|
||
{ key: 'djData', name: '单价', unit: '元/㎡', route:'/unitPriceAnalysis/unitPriceAnalysisBase'},
|
||
{ key: 'yfData', name: '运费', unit: '元/㎡',route:null}
|
||
]
|
||
},
|
||
indicators() {
|
||
let _this = this
|
||
const fallback = { target: 0, real: 0, completeRate: 0, diff: 0, flag: 0 }
|
||
const list = Object.entries(_this.relatedMon).map(([title, data]) => {
|
||
return {
|
||
title: title,
|
||
target: data.target,
|
||
real: data.real,
|
||
completeRate: data.completeRate,
|
||
diff: data.diff
|
||
};
|
||
});
|
||
return _this.indicatorDefs.map(def => {
|
||
const data = list.find(item => item && item.title === def.name) || fallback
|
||
const detailData = {
|
||
...data,
|
||
flag: data.completeRate >= 100 ? 1 : 0,
|
||
}
|
||
return {
|
||
...def,
|
||
detailData,
|
||
sortValue: Number((data && data.real) ?? 0)
|
||
}
|
||
})
|
||
},
|
||
sortedIndicators() {
|
||
const unitOrder = ['万㎡','元/㎡']
|
||
const unitRank = (u) => {
|
||
const idx = unitOrder.indexOf(u)
|
||
return idx === -1 ? 999 : idx
|
||
}
|
||
|
||
return this.indicators.slice().sort((a, b) => {
|
||
const ur = unitRank(a.unit) - unitRank(b.unit)
|
||
if (ur !== 0) return ur
|
||
const vr = (b.sortValue ?? -Infinity) - (a.sortValue ?? -Infinity)
|
||
if (vr !== 0) return vr
|
||
return String(a.key).localeCompare(String(b.key))
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
relatedMon: {
|
||
handler(newValue) {
|
||
this.updateChart()
|
||
},
|
||
immediate: true, // 初始化时立即执行
|
||
deep: true
|
||
}
|
||
},
|
||
mounted() {
|
||
// 初始化图表
|
||
this.$nextTick(() => this.updateChart())
|
||
},
|
||
methods: {
|
||
handleDashboardClick(path) {
|
||
// 从路径提取详情页名称，如 '/salesVolumeAnalysis/salesVolumeAnalysisBase' -> 'salesVolumeAnalysisBase'
|
||
const toPage = path.split('/').pop();
|
||
// 保存当前页面状态并入栈
|
||
const currentPath = this.$route.path;
|
||
const state = {
|
||
dateData: {
|
||
startTime: this.dateData.startTime,
|
||
endTime: this.dateData.endTime
|
||
},
|
||
factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
|
||
toPage
|
||
};
|
||
pushNavigation(currentPath, state);
|
||
saveNavigationState(currentPath, state);
|
||
// query 仅支持字符串，时间范围用 startTime/endTime 传递
|
||
this.$router.push({
|
||
path: path,
|
||
query: {
|
||
factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
|
||
startTime: this.dateData && this.dateData.startTime != null ? String(this.dateData.startTime) : '',
|
||
endTime: this.dateData && this.dateData.endTime != null ? String(this.dateData.endTime) : ''
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 图表更新方法：可在这里补充全局的图表刷新逻辑
|
||
* 若子组件内部已监听 chartData 变化，此方法可留空或补充额外逻辑
|
||
*/
|
||
updateChart() {
|
||
console.log('数据更新，当前relatedMon:', this.relatedMon)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||
.scroll-container {
|
||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||
max-height: 210px;
|
||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||
overflow-y: auto;
|
||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||
overflow-x: hidden;
|
||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||
padding: 10px 0;
|
||
|
||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||
/* Chrome/Safari */
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* Firefox */
|
||
scrollbar-width: none;
|
||
/* IE/Edge */
|
||
-ms-overflow-style: none;
|
||
}
|
||
|
||
.dashboard {
|
||
width: 382px;
|
||
height: 205px;
|
||
background: #F9FCFF;
|
||
padding: 16px 0 0 10px;
|
||
|
||
.title {
|
||
// width: 190px;
|
||
height: 18px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #000000;
|
||
line-height: 18px;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.number {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
// width: 190px;
|
||
height: 32px;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 32px;
|
||
color: #0B58FF;
|
||
line-height: 32px;
|
||
letter-spacing: 2px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mom {
|
||
width: 120px;
|
||
height: 18px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #000000;
|
||
line-height: 18px;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
z-index: 1000;
|
||
}
|
||
}
|
||
|
||
// .line {
|
||
// width: 500px;
|
||
// height: 205px;
|
||
// background: #F9FCFF;
|
||
// }
|
||
|
||
// .leftTitle {
|
||
// .item {
|
||
// width: 67px;
|
||
// height: 180px;
|
||
// padding: 37px 23px;
|
||
// background: #F9FCFF;
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 18px;
|
||
// color: #000000;
|
||
// line-height: 25px;
|
||
// letter-spacing: 1px;
|
||
// // text-align: left;
|
||
// font-style: normal;
|
||
// }
|
||
// }
|
||
</style>
|
||
|
||
<!-- <style>
|
||
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
|
||
.production-status-chart-tooltip {
|
||
background: #0a2b4f77 !important;
|
||
border: none !important;
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.production-status-chart-tooltip * {
|
||
color: #fff !important;
|
||
}
|
||
</style> -->
|