制造成本分析部分字段

This commit is contained in:
2026-04-24 14:33:54 +08:00
parent 62340233e2
commit 59a1654cbd
13 changed files with 488 additions and 21 deletions

View File

@@ -0,0 +1,252 @@
<template>
<div id="dayReport" class="dayReport" :style="styles">
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<ReportHeader top-title="预算填报" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
@getTimeType="handleTimeChange" :isBudget="true" />
<div class="main-body" style="
flex: 1;
display: flex;
padding: 0px 16px 0 272px;
flex-direction: column;
">
<div class="top" style="margin-top: -20px; display: flex; gap: 16px">
<div class="top-three" style="
display: grid;
gap: 12px;
grid-template-columns:186px 1422px;
">
<indicatorCalendar :timeType="timeType" :calendarObj='calendarObj'/>
<indicatorDetails :timeType="timeType" @updateLeft='getData' @updateLevel='getLevel'/>
</div>
</div>
<!-- <div class="top" style="margin-top: -20px; display: flex; gap: 16px">
<div class="top-three" style="
display: grid;
gap: 12px;
grid-template-columns:416px 1192px;
">
</div>
</div> -->
<!-- <div class="centerImg" style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* 确保在 backp 之上、内容之下 */
"></div> -->
</div>
</div>
</template>
<script>
import ReportHeader from "./components/budgetHeader.vue";
import { Sidebar } from "../../layout/components";
import screenfull from "screenfull";
import indicatorCalendar from "./components/budgetCalendar.vue";
import indicatorDetails from "./components/budgetDetails.vue";
// import premProdStatus from "./components/premProdStatus.vue";
import { mapState } from "vuex";
// import operatingLineChart from "../operatingComponents/operatingLineChart";
// import operatingLineChartCumulative from "../operatingComponents/operatingLineChartCumulative.vue";
import { getSalesRevenueGroupData } from '@/api/cockpit'
import moment from "moment";
import {getCalendar, getCalendarYear} from '@/api/cockpit';
export default {
name: "DayReport",
components: {
ReportHeader,
indicatorCalendar,
indicatorDetails,
// operatingLineChartCumulative,
// operatingLineChart,
// premProdStatus,
Sidebar,
},
data() {
return {
weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
isFullScreen: false,
timer: null,
beilv: 1,
timeType:'month',
value: 100,
sort:1,
selectDate:{},
monthData: {},
ytdData: {},
calendarObj:{},
levelId: null
};
},
created() {
this.init();
this.windowWidth(document.documentElement.clientWidth);
},
computed: {
...mapState({
theme: (state) => state.settings.theme,
sideTheme: (state) => state.settings.sideTheme,
sidebar: (state) => state.app.sidebar,
device: (state) => state.app.device,
needTagsView: (state) => state.settings.tagsView,
fixedHeader: (state) => state.settings.fixedHeader,
}),
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === "mobile",
};
},
variables() {
return variables;
},
// ...mapGetters(['sidebar']),
styles() {
const v = Math.floor(this.value * this.beilv * 100) / 10000;
return {
transform: `scale(${v})`,
transformOrigin: "left top",
// overflow: hidden;
};
},
},
watch: {
clientWidth(val) {
if (!this.timer) {
this.clientWidth = val;
this.beilv2 = this.clientWidth / 1920;
this.timer = true;
let _this = this;
setTimeout(function () {
_this.timer = false;
}, 500);
}
// 这里可以添加修改时的方法
this.windowWidth(val);
},
},
beforeDestroy() {
clearInterval(this.timer);
this.destroy();
},
mounted() {
const _this = this;
_this.beilv = document.documentElement.clientWidth / 1920;
window.onresize = () => {
return (() => {
_this.clientWidth = `${document.documentElement.clientWidth}`;
this.beilv = _this.clientWidth / 1920;
})();
};
// this.getData()
},
methods: {
getData() {
if(this.timeType == 'month'){
getCalendar({levelId: this.levelId}).then((res) => {
this.calendarObj = res.data
})
}else{
getCalendarYear({levelId: this.levelId}).then((res) => {
this.calendarObj = res.data
})
}
},
// 层级变动
getLevel(id) {
this.levelId = id
this.getData()
},
handleTimeChange(obj) {
console.log(obj, 'obj');
this.timeType = obj
this.getData()
},
handleClickOutside() {
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
},
windowWidth(value) {
this.clientWidth = value;
this.beilv2 = this.clientWidth / 1920;
},
change() {
this.isFullScreen = screenfull.isFullscreen;
},
init() {
if (!screenfull.isEnabled) {
this.$message({
message: "you browser can not work",
type: "warning",
});
return false;
}
screenfull.on("change", this.change);
},
destroy() {
if (!screenfull.isEnabled) {
this.$message({
message: "you browser can not work",
type: "warning",
});
return false;
}
screenfull.off("change", this.change);
},
// 全屏
screenfullChange() {
console.log("screenfull.enabled", screenfull.isEnabled);
if (!screenfull.isEnabled) {
this.$message({
message: "you browser can not work",
type: "warning",
});
return false;
}
screenfull.toggle(this.$refs.dayReportB);
},
// 导出
// exportPDF() {
// this.$message.success('正在导出,请稍等!')
// const element = document.getElementById('dayRepDom')
// element.style.display = 'block'
// const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
// html2canvas(element, {
// dpi: 300, // Set to 300 DPI
// scale: 3 // Adjusts your resolution
// }).then(function(canvas) {
// const imgWidth = 595.28
// const imgHeight = 841.89
// const pageData = canvas.toDataURL('image/jpeg', 1.0)
// const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
// PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
// setTimeout(() => {
// PDF.save(fileName) // 导出文件名
// }, 1000)
// })
// element.style.display = 'none'
// }
},
};
</script>
<style scoped lang="scss">
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.dayReport {
width: 1920px;
height: 1080px;
background: url("../../assets/img/backp.png") no-repeat;
background-size: cover;
}
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
.sidebarHide .fixed-header {
width: calc(100%);
}
.mobile .fixed-header {
width: 100%;
}
</style>

View File

@@ -0,0 +1,197 @@
<template>
<div id="dayReport" class="dayReport" :style="styles">
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<ReportHeader top-title="指标填报" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
:isBudget="false" />
<div class="main-body" style="
flex: 1;
display: flex;
padding: 0px 16px 0 272px;
flex-direction: column;
">
<div class="top" style="margin-top: -20px; display: flex; gap: 16px">
<div class="top-three" style="
display: grid;
gap: 12px;
grid-template-columns:186px 1422px;
">
<indicatorCalendar :calendarList="calendarList" />
<indicatorDetails @updateLeft='getData' @updateLevel='getLevel'/>
</div>
</div>
</div>
</div>
</template>
<script>
import ReportHeader from "./components/budgetHeader.vue";
import { Sidebar } from "../../layout/components";
import screenfull from "screenfull";
import indicatorCalendar from "./components/indicatorCalendar.vue";
import indicatorDetails from "./components/indicatorDetails.vue";
import { mapState } from "vuex";
import { getRealMonthCalendar } from '@/api/cockpit'
export default {
name: "DayReport",
components: {
ReportHeader,
indicatorCalendar,
indicatorDetails,
Sidebar,
},
data() {
return {
weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
isFullScreen: false,
timer: null,
beilv: 1,
value: 100,
sort:1,
selectDate:{},
monthData: {},
ytdData: {},
calendarList:{},
levelId:null
};
},
created() {
this.init();
this.windowWidth(document.documentElement.clientWidth);
},
computed: {
...mapState({
theme: (state) => state.settings.theme,
sideTheme: (state) => state.settings.sideTheme,
sidebar: (state) => state.app.sidebar,
device: (state) => state.app.device,
needTagsView: (state) => state.settings.tagsView,
fixedHeader: (state) => state.settings.fixedHeader,
}),
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === "mobile",
};
},
variables() {
return variables;
},
// ...mapGetters(['sidebar']),
styles() {
const v = Math.floor(this.value * this.beilv * 100) / 10000;
return {
transform: `scale(${v})`,
transformOrigin: "left top",
// overflow: hidden;
};
},
},
watch: {
clientWidth(val) {
if (!this.timer) {
this.clientWidth = val;
this.beilv2 = this.clientWidth / 1920;
this.timer = true;
let _this = this;
setTimeout(function () {
_this.timer = false;
}, 500);
}
// 这里可以添加修改时的方法
this.windowWidth(val);
},
},
beforeDestroy() {
clearInterval(this.timer);
this.destroy();
},
mounted() {
const _this = this;
_this.beilv = document.documentElement.clientWidth / 1920;
window.onresize = () => {
return (() => {
_this.clientWidth = `${document.documentElement.clientWidth}`;
this.beilv = _this.clientWidth / 1920;
})();
};
},
methods: {
// 层级变动
getLevel(id) {
this.levelId = id
this.getData()
},
getData() {
getRealMonthCalendar({
levelId: this.levelId
}).then((res) => {
console.log(res, 'res');
this.calendarList = res.data
})
},
handleClickOutside() {
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
},
windowWidth(value) {
this.clientWidth = value;
this.beilv2 = this.clientWidth / 1920;
},
change() {
this.isFullScreen = screenfull.isFullscreen;
},
init() {
if (!screenfull.isEnabled) {
this.$message({
message: "you browser can not work",
type: "warning",
});
return false;
}
screenfull.on("change", this.change);
},
destroy() {
if (!screenfull.isEnabled) {
this.$message({
message: "you browser can not work",
type: "warning",
});
return false;
}
screenfull.off("change", this.change);
},
// 全屏
screenfullChange() {
console.log("screenfull.enabled", screenfull.isEnabled);
if (!screenfull.isEnabled) {
this.$message({
message: "you browser can not work",
type: "warning",
});
return false;
}
screenfull.toggle(this.$refs.dayReportB);
}
},
};
</script>
<style scoped lang="scss">
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.dayReport {
width: 1920px;
height: 1080px;
background: url("../../assets/img/backp.png") no-repeat;
background-size: cover;
}
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
.sidebarHide .fixed-header {
width: calc(100%);
}
.mobile .fixed-header {
width: 100%;
}
</style>

View File

@@ -179,6 +179,7 @@ export default {
methods: { methods: {
handleChange(value) { handleChange(value) {
this.index =value this.index =value
console.log('+++++++++++++++++++++++++++++++++111111')
this.getData() this.getData()
}, },
getData() { getData() {
@@ -202,19 +203,21 @@ export default {
}, },
handleTimeChange(obj) { handleTimeChange(obj) {
console.log('=====================================222222222222',obj);
this.month = obj.targetMonth this.month = obj.targetMonth
this.dateData = { this.dateData = {
startTime: obj.startTime, startTime: obj.startTime,
endTime: obj.endTime, endTime: obj.endTime,
// mode: obj.mode, // mode: obj.mode,
} }
console.log('+++++++++++++++++++++++++++++++++22222')
this.getData() this.getData()
}, },
selectChange(data) { selectChange(data) {
console.log('选中的数据:', data); console.log('选中的数据:', data);
this.factory = data this.factory = data
if (this.dateData.startTime && this.dateData.endTime) { if (this.dateData.startTime && this.dateData.endTime) {
console.log('+++++++++++++++++++++++++++++++++33333')
this.getData(); this.getData();
} }
}, },
@@ -263,8 +266,6 @@ export default {
}, },
changeDate(val) { changeDate(val) {
this.date = val; this.date = val;
// this.weekDay = this.weekArr[moment(this.date).format('e')]
// this.getData()
if (this.date === moment().format("yyyy-MM-DD")) { if (this.date === moment().format("yyyy-MM-DD")) {
this.loopTime(); this.loopTime();
} else { } else {

View File

@@ -193,7 +193,7 @@ export default {
const requestParams = { const requestParams = {
startTime: this.dateData.startTime, startTime: this.dateData.startTime,
endTime: this.dateData.endTime, endTime: this.dateData.endTime,
trendName: '原料' + this.meterialName + this.trendName, trendName: this.trendName,
analysisObject: [this.meterialName], analysisObject: [this.meterialName],
levelId: this.factory, levelId: this.factory,
isOriginal:0,//0:原片 1:加工 isOriginal:0,//0:原片 1:加工

View File

@@ -187,19 +187,19 @@ export default {
// 调用接口 // 调用接口
getSingleMaterialCostAnalysis(requestParams).then((res) => { getSingleMaterialCostAnalysis(requestParams).then((res) => {
this.monData = res.data.currentMonthData.find(item => { this.monData = res.data.currentMonthData.find(item => {
return item.name === this.overheadName+'成本'; return item.name === '原片'+this.overheadName+'成本';
}); });
this.totalData = res.data.totalMonthData.find(item => { this.totalData = res.data.totalMonthData.find(item => {
return item.name === this.overheadName+'成本'; return item.name === '原片'+this.overheadName+'成本';
}); });
// this.relatedMon = res.data.relatedMon // this.relatedMon = res.data.relatedMon
this.relatedData = { this.relatedData = {
relatedMon: res.data.currentMonthData.filter(item => { relatedMon: res.data.currentMonthData.filter(item => {
return item.name !== this.overheadName+'成本'; return item.name !== '原片'+this.overheadName+'成本';
}), // 兜底月度数据 }), // 兜底月度数据
relatedTotal: res.data.totalMonthData.filter(item => { relatedTotal: res.data.totalMonthData.filter(item => {
return item.name !== this.overheadName+'成本'; return item.name !== '原片'+this.overheadName+'成本';
}) // 兜底累计数据 }) // 兜底累计数据
} }
this.trend = res.data.dataTrend this.trend = res.data.dataTrend

View File

@@ -37,8 +37,8 @@
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyRelatedMetrics :dateData="dateData" :factory="factory" :relatedData="monthRelatedData" <monthlyRelatedMetrics :dateData="dateData" :factory="factory" :relatedData="monthRelatedData"
:title="'月度概览'" /> :title="'月度·相关指标分析'" />
<yearRelatedMetrics :dateData="dateData" :factory="factory" :relatedData="totalRelatedData" :title="'累计概览'" /> <yearRelatedMetrics :dateData="dateData" :factory="factory" :relatedData="totalRelatedData" :title="'累计·相关指标分析'" />
</div> </div>
</div> </div>
<div class="bottom" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="bottom" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -231,17 +231,33 @@ export default {
// 调用接口 // 调用接口
getSingleMaterialAnalysis(requestParams).then((res) => { getSingleMaterialAnalysis(requestParams).then((res) => {
this.monData = res.data.currentMonthData.find(item => { this.monData = res.data.currentMonthData.find(item => {
return item.name === this.fuelName + '成本'; if(this.fuelName === '') {
return item.name === '原片'+this.fuelName + '成本';
}else{
return item.name === this.fuelName + '成本';
}
}); });
this.totalData = res.data.totalMonthData.find(item => { this.totalData = res.data.totalMonthData.find(item => {
return item.name === this.fuelName + '成本'; if(this.fuelName === '') {
return item.name === '原片'+this.fuelName + '成本';
}else{
return item.name === this.fuelName + '成本';
}
}); });
this.relatedData = { this.relatedData = {
relatedMon: res.data.currentMonthData.filter(item => { relatedMon: res.data.currentMonthData.filter(item => {
if(this.fuelName === '水') {
return item.name !== '原片'+this.fuelName + '成本';
}else{
return item.name !== this.fuelName + '成本'; return item.name !== this.fuelName + '成本';
}
}), // 兜底月度数据 }), // 兜底月度数据
relatedTotal: res.data.totalMonthData.filter(item => { relatedTotal: res.data.totalMonthData.filter(item => {
if(this.fuelName === '水') {
return item.name !== '原片'+this.fuelName + '成本';
}else{
return item.name !== this.fuelName + '成本'; return item.name !== this.fuelName + '成本';
}
}) // 兜底累计数据 }) // 兜底累计数据
} }
this.trend = res.data.dataTrend this.trend = res.data.dataTrend

View File

@@ -190,7 +190,7 @@ export default {
const requestParams = { const requestParams = {
startTime: this.dateData.startTime, startTime: this.dateData.startTime,
endTime: this.dateData.endTime, endTime: this.dateData.endTime,
trendName: this.auxMatName + this.trendName, trendName: this.trendName,
analysisObject: [this.auxMatName], analysisObject: [this.auxMatName],
levelId: this.factory, levelId: this.factory,
isOriginal:1,//0:原片 1:加工 isOriginal:1,//0:原片 1:加工
@@ -218,6 +218,7 @@ export default {
}, },
handleTimeChange(obj) { handleTimeChange(obj) {
console.log('=====================================222222222222',obj);
this.month = obj.targetMonth this.month = obj.targetMonth
this.dateData = { this.dateData = {
startTime: obj.startTime, startTime: obj.startTime,

View File

@@ -174,11 +174,11 @@ export default {
// 调用接口 // 调用接口
getSingleMaterialCostAnalysis(requestParams).then((res) => { getSingleMaterialCostAnalysis(requestParams).then((res) => {
this.monData = res.data.currentMonthData.find(item => { this.monData = res.data.currentMonthData.find(item => {
return item.name === this.overheadName+'成本'; return item.name === '加工'+this.overheadName+'成本';
}); });
this.totalData = res.data.totalMonthData.find(item => { this.totalData = res.data.totalMonthData.find(item => {
return item.name === this.overheadName+'成本'; return item.name === '加工'+this.overheadName+'成本';
}); });
this.trend = res.data.dataTrend this.trend = res.data.dataTrend
}); });

View File

@@ -74,7 +74,7 @@ export default {
computed: { computed: {
// 1. 销量数据:从当前激活数据集中筛选(依赖 activeData自动响应变化 // 1. 销量数据:从当前激活数据集中筛选(依赖 activeData自动响应变化
dianData() { dianData() {
return (this.relatedData.find(item => item.name === "电成本")) || { return (this.relatedData.find(item => item.name === "加工电成本")) || {
targetValue: 0, targetValue: 0,
value: 0, value: 0,
completed: 0, completed: 0,
@@ -84,7 +84,7 @@ export default {
}, },
// 2. 单价数据:从当前激活数据集中筛选 // 2. 单价数据:从当前激活数据集中筛选
shuiData() { shuiData() {
return (this.relatedData.find(item => item.name === "水成本")) || { return (this.relatedData.find(item => item.name === "加工水成本")) || {
targetValue: 0, targetValue: 0,
value: 0, value: 0,
proportion: 0, proportion: 0,

View File

@@ -20,7 +20,7 @@
</div> </div>
<div class="dashboard"> <div class="dashboard">
<div class="title"> <div class="title">
产量.{{unitList[1]}} 产量·{{unitList[1]}}
</div> </div>
<div style='font-size: 14px;text-align: right;padding-right: 5px;'> <div style='font-size: 14px;text-align: right;padding-right: 5px;'>
<span>完成率:<span style='color: #0B58FF;'>{{productData.proportion}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{productData.proportion}}%</span></span>

View File

@@ -81,7 +81,7 @@ export default {
const list = (Array.isArray(this.activeData) ? this.activeData : []) const list = (Array.isArray(this.activeData) ? this.activeData : [])
return this.indicatorDefs.map(def => { return this.indicatorDefs.map(def => {
const data = list.find(item => item && item.name === def.label) || fallback const data = list.find(item => item && item.name.includes(def.label)) || fallback
return { return {
...def, ...def,
data, data,

View File

@@ -74,7 +74,7 @@ export default {
computed: { computed: {
// 1. 销量数据:从当前激活数据集中筛选(依赖 activeData自动响应变化 // 1. 销量数据:从当前激活数据集中筛选(依赖 activeData自动响应变化
dianData() { dianData() {
return (this.relatedData.find(item => item.name === "电成本")) || { return (this.relatedData.find(item => item.name === "加工电成本")) || {
targetValue: 0, targetValue: 0,
value: 0, value: 0,
completed: 0, completed: 0,
@@ -84,7 +84,7 @@ export default {
}, },
// 2. 单价数据:从当前激活数据集中筛选 // 2. 单价数据:从当前激活数据集中筛选
shuiData() { shuiData() {
return (this.relatedData.find(item => item.name === "水成本")) || { return (this.relatedData.find(item => item.name === "加工水成本")) || {
targetValue: 0, targetValue: 0,
value: 0, value: 0,
proportion: 0, proportion: 0,