305 lines
9.4 KiB
Vue
305 lines
9.4 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: 414px 1194px;
|
||
">
|
||
<costOverview :productSaleData="productSaleData" />
|
||
<PSDO :stockVO="stockVO" />
|
||
</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: 1624px;
|
||
">
|
||
<psiLineChart :saleAndProductData="saleAndProductData" />
|
||
<!-- <keyWork /> -->
|
||
</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 "./components/costOverview.vue";
|
||
// import salesDataOverview from "./components/salesDataOverview.vue";
|
||
import { mapState } from "vuex";
|
||
import PSDO from "./components/PSDO.vue";
|
||
import psiLineChart from "./components/psiLineChart.vue";
|
||
import { getProductSaleAnalysis } 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 html2canvas from 'html2canvas'
|
||
// import JsPDF from 'jspdf'
|
||
export default {
|
||
name: "DayReport",
|
||
components: {
|
||
ReportHeader,
|
||
costOverview,
|
||
PSDO,
|
||
Sidebar,
|
||
psiLineChart
|
||
},
|
||
data() {
|
||
return {
|
||
weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||
isFullScreen: false,
|
||
timer: null,
|
||
beilv: 1,
|
||
value: 100,
|
||
coreProductVisualAlarmVO: [],
|
||
defect: {},
|
||
centerEqInfo: [
|
||
{ title: "工单数量", num: 0 },
|
||
{ title: "总产量/吨", num: 0 },
|
||
{ title: "生产合格率", num: "0%" },
|
||
{ title: "设备运行数量", num: 0 },
|
||
{ title: "累计能耗/kwh", num: 0 },
|
||
],
|
||
productSaleData: [],
|
||
stockVO: {},
|
||
saleAndProductData:[],
|
||
};
|
||
},
|
||
|
||
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 startTime = moment().startOf("week").format("YYYY-MM-DD");
|
||
const endTime = moment().format("YYYY-MM-DD");
|
||
console.log(this.date, "date");
|
||
this.date = [startTime, endTime];
|
||
// this.weekDay = this.weekArr[moment(this.date).format('e')]
|
||
// this.getData()
|
||
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) {
|
||
getProductSaleAnalysis({
|
||
startTime: 1762704000000,
|
||
endTime: 1762790400000,
|
||
mode: 1
|
||
}).then((res) => {
|
||
console.log(res);
|
||
this.productSaleData = [
|
||
{
|
||
name: "销量",
|
||
targetValue: res.data.productSaleData.saleTarget, // 销量目标：100
|
||
value: res.data.productSaleData.saleValue, // 实际销量：100
|
||
proportion: res.data.productSaleData.saleProportion, // 销量占比：1（100%）
|
||
completed: res.data.productSaleData.saleCompleted
|
||
},
|
||
{
|
||
name: "产量",
|
||
targetValue: res.data.productSaleData.productTarget, // 产量目标：2000
|
||
value: res.data.productSaleData.productValue, // 实际产量：1000
|
||
proportion: res.data.productSaleData.productProportion, // 产量占比：0.5（50%）
|
||
completed: res.data.productSaleData.productCompleted
|
||
},
|
||
{
|
||
name: "累计完成产销率",
|
||
targetValue: res.data.productSaleData.productAndSaleTarget, // 数据源中无产销率目标，默认为 null
|
||
// 产销率 = 销量 / 产量 * 100%（避免除数为0）
|
||
value: res.data.productSaleData.productAndSaleValue,
|
||
proportion: res.data.productSaleData.productAndSaleProportion,
|
||
completed: res.data.productSaleData.productAndSaleCompleted
|
||
}
|
||
];
|
||
this.stockVO = {
|
||
avgValue: res.data.productSaleData.avgValue,
|
||
endMonthValue: res.data.productSaleData.endMonthValue,
|
||
totalDays: res.data.productSaleData.totalDays,
|
||
stockValues: res.data.productSaleAnalysisBaseFormatVOS
|
||
}
|
||
this.saleAndProductData = res.data.productSaleAnalysisBaseFormatVOS
|
||
})
|
||
},
|
||
handleTimeChange(obj) {
|
||
console.log(obj, '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);
|
||
},
|
||
changeDate(val) {
|
||
this.date = val;
|
||
// this.weekDay = this.weekArr[moment(this.date).format('e')]
|
||
// this.getData()
|
||
if (this.date === moment().format("yyyy-MM-DD")) {
|
||
this.loopTime();
|
||
} else {
|
||
clearInterval(this.timer);
|
||
}
|
||
},
|
||
// 导出
|
||
// 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>
|