修改
This commit is contained in:
‘937886381’
259
src/views/home/cost.vue
Normal file
259
src/views/home/cost.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<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"
|
||||
@timeRangeChange="handleTimeChange" />
|
||||
<div class="main-body" style="
|
||||
margin-top: -20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 0px 16px 0 272px;
|
||||
flex-direction: column;
|
||||
">
|
||||
<div class="top" style="display: flex; gap: 16px">
|
||||
<div class="top-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 530px 1078px;
|
||||
">
|
||||
<costOverview :costOverviews="costOverviews" />
|
||||
<costItemOverview :piecesCostViews="piecesCostViews" :processCostViews="processCostViews" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
|
||||
<div class="top-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 530px 530px 530px;
|
||||
">
|
||||
<overviewTrendChart :trendViews="trendViews" />
|
||||
<rawMaterialCost :trendViews="piecesCostTrendViews" />
|
||||
<processingCostTrendChart :trendViews="processCostTrendViews" />
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div class="centerImg" style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1; /* 确保在 backp 之上、内容之下 */
|
||||
"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ReportHeader from "./components/noRouterHeader.vue";
|
||||
import { Sidebar } from "../../layout/components";
|
||||
import screenfull from "screenfull";
|
||||
import costOverview from "./costComponents/costOverview.vue";
|
||||
import costItemOverview from "./costComponents/costItemOverview.vue";
|
||||
import { mapState } from "vuex";
|
||||
// import KFAP from "./costComponents/KFAP.vue";
|
||||
import overviewTrendChart from "./costComponents/overviewTrendChart.vue";
|
||||
import rawMaterialCost from "./costComponents/rawMaterialCost.vue";
|
||||
import processingCostTrendChart from "./costComponents/processingCostTrendChart.vue";
|
||||
|
||||
import { getCostAnalysisList } from '@/api/cockpit'
|
||||
|
||||
|
||||
// import coreBottomLeft from "./components/coreBottomLeft.vue";
|
||||
// import orderProgress from "./components/orderProgress.vue";
|
||||
// import keyWork from "./components/keyWork.vue";
|
||||
import moment from "moment";
|
||||
// import { getCostAnalysisList } from "../../api/cockpit";
|
||||
// import html2canvas from 'html2canvas'
|
||||
// import JsPDF from 'jspdf'
|
||||
export default {
|
||||
name: "DayReport",
|
||||
components: {
|
||||
ReportHeader,
|
||||
costOverview,
|
||||
costItemOverview,
|
||||
Sidebar,
|
||||
processingCostTrendChart,
|
||||
rawMaterialCost,
|
||||
overviewTrendChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
costOverviews: [],
|
||||
piecesCostViews: [],
|
||||
processCostViews: [],
|
||||
trendViews: [],
|
||||
piecesCostTrendViews: [],
|
||||
processCostTrendViews:[],
|
||||
};
|
||||
},
|
||||
|
||||
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: {
|
||||
getData(obj) {
|
||||
// obj.levelId = 1
|
||||
getCostAnalysisList({
|
||||
startTime: 1762704000000,
|
||||
endTime: 1762790400000,
|
||||
mode:1
|
||||
}).then((res) => {
|
||||
this.costOverviews = res.data.costOverviews
|
||||
this.piecesCostViews = res.data.piecesCostViews
|
||||
this.processCostViews = res.data.processCostViews
|
||||
this.trendViews = res.data.trendViews
|
||||
this.piecesCostTrendViews = res.data.piecesCostTrendViews
|
||||
this.processCostTrendViews = res.data.processCostTrendViews
|
||||
|
||||
// this.profitTotalData = res.data.productAndSaleData.filter(item => {
|
||||
// return item.name === "利润总额" || item.name === "毛利率";
|
||||
// });
|
||||
// this.salesAndOutputData = res.data.productAndSaleData.filter(item => {
|
||||
// // 只保留name为“销量”或“产量”的项
|
||||
// return item.name === "销量" || item.name === "产量";
|
||||
// });
|
||||
// this.middleItemData = res.data.productAndSaleData.filter(item => {
|
||||
// return item.name === "营业收入" || item.name === "成本";
|
||||
// });
|
||||
// this.middleChartData = res.data.productFactors
|
||||
// this.bottomChartData = res.data.productFactors
|
||||
})
|
||||
},
|
||||
handleTimeChange(obj) {
|
||||
this.getData(obj)
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user