313 lines
9.5 KiB
Vue
313 lines
9.5 KiB
Vue
<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 size="psi" 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: 1624px;
|
|
">
|
|
<singleTopSelect :defaultType="'包装物辅材成本'" :typeList="typeList" @query="handleGetData" typeName="包装辅材" />
|
|
</div>
|
|
</div>
|
|
<div class="top" style="display: flex; gap: 16px;margin-top: 8px;">
|
|
<div class="left-three" style="
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: 804px 804px;
|
|
">
|
|
<topLeftChart :dateData="dateData" :pupList="pupList" :name=" '采购单价·元/只' " />
|
|
<topRightChart :dateData="dateData" :consumptionList="consumptionList" :name="'消耗量·只'" />
|
|
|
|
</div>
|
|
</div>
|
|
<div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
|
|
<div class="left-three" style="
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: 804px 804px;
|
|
">
|
|
<bottomLeftChart :dateData="dateData" :unitConsumptionList="unitConsumptionList" :name="'单耗趋势·只/㎡'" />
|
|
<bottomRightChart :dateData="dateData" :outputList="outputList" :name="'产量·㎡'" />
|
|
</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 "./costComponents/single/noRouterHeader.vue";
|
|
import { Sidebar } from "../../layout/components";
|
|
import screenfull from "screenfull";
|
|
// import changeBase from "./costComponents/changeBase";
|
|
import singleTopSelect from "./costComponents/singleTopSelect.vue";
|
|
import costItemOverviewItem from "./costComponents/costItemOverviewItem.vue";
|
|
import profitLineChart from "./costComponents/profitLineChart.vue";
|
|
import { mapState } from "vuex";
|
|
import topLeftChart from "./costComponents/single/topLeftChart.vue";
|
|
import topRightChart from "./costComponents/single/topRightChart.vue";
|
|
import bottomLeftChart from "./costComponents/single/bottomLeftChart.vue";
|
|
import bottomRightChart from "./costComponents/single/bottomRightChart.vue";
|
|
import { getCostAnalysisXXCostList } from '@/api/cockpit'
|
|
// import PSDO from "./components/PSDO.vue";
|
|
// import psiLineChart from "./components/psiLineChart.vue";
|
|
|
|
// import coreBottomLeft from "./components/coreBottomLeft.vue";
|
|
// import orderProgress from "./components/orderProgress.vue";
|
|
// import keyWork from "./components/keyWork.vue";
|
|
import moment from "moment";
|
|
// import html2canvas from 'html2canvas'
|
|
// import JsPDF from 'jspdf'
|
|
export default {
|
|
name: "DayReport",
|
|
components: {
|
|
ReportHeader,
|
|
singleTopSelect,
|
|
topLeftChart,
|
|
profitLineChart,
|
|
costItemOverviewItem,
|
|
Sidebar,
|
|
topRightChart,
|
|
bottomRightChart,
|
|
bottomLeftChart
|
|
// psiLineChart
|
|
},
|
|
data() {
|
|
return {
|
|
weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
|
isFullScreen: false,
|
|
timer: null,
|
|
beilv: 1,
|
|
value: 100,
|
|
pupList: [],
|
|
consumptionList: [],
|
|
unitConsumptionList: [],
|
|
outputList: [],
|
|
dateData:{},
|
|
analysisObject: [],
|
|
typeList: [{
|
|
name: '包装物辅材成本',
|
|
id: 1,
|
|
}]
|
|
};
|
|
},
|
|
|
|
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;
|
|
})();
|
|
};
|
|
if (this.$route.query.name) {
|
|
this.analysisObject = [this.$route.query.name]
|
|
} else {
|
|
this.analysisObject = ['包装物辅材成本']
|
|
}
|
|
},
|
|
methods: {
|
|
getData() {
|
|
// 基于选中的数据构建请求参数（根据实际接口需求调整）
|
|
// let analysisObject = []
|
|
|
|
const requestParams = {
|
|
// startTime: this.startTime,
|
|
// endTime: this.endTime,
|
|
// mode: this.mode,
|
|
startTime: this.dateData.startTime,
|
|
endTime: this.dateData.endTime,
|
|
mode: this.dateData.mode,
|
|
analysisObject: this.analysisObject,
|
|
levelId: this.levelId ? this.levelId : 1
|
|
};
|
|
// 调用接口
|
|
getCostAnalysisXXCostList(requestParams).then((res) => {
|
|
this.pupList = res.data[0]
|
|
this.consumptionList = res.data[1]
|
|
this.unitConsumptionList = res.data[2]
|
|
this.outputList = res.data[3]
|
|
});
|
|
},
|
|
|
|
handleTimeChange(obj) {
|
|
console.log(obj, 'obj');
|
|
this.dateData = {
|
|
startTime: obj.startTime,
|
|
endTime: obj.endTime,
|
|
mode: obj.mode,
|
|
}
|
|
this.getData()
|
|
},
|
|
handleGetData(data) {
|
|
console.log('从子组件接收的参数：', data);
|
|
// params中包含type和levelId
|
|
const { type, levelId } = data;
|
|
this.analysisObject = []
|
|
this.analysisObject.push(type)
|
|
this.levelId = levelId
|
|
// 在这里进行后续处理，如发起请求等
|
|
if (this.dateData.startTime && this.dateData.endTime) {
|
|
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>
|