消除红色图表未找到的警告和删除views下多余的vue文件
This commit is contained in:
@@ -1,298 +0,0 @@
|
||||
<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 _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: obj.startTime,
|
||||
endTime: obj.endTime,
|
||||
mode: obj.mode,
|
||||
}).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>
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false,
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,260 +0,0 @@
|
||||
<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>
|
||||
@@ -1,259 +0,0 @@
|
||||
<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: obj.startTime,
|
||||
endTime: obj.endTime,
|
||||
mode: obj.mode,
|
||||
}).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>
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false,
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -20,6 +21,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -30,18 +32,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -26,6 +27,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -36,19 +38,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false,
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
this.myChart = echarts.init(chartDom);
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -39,6 +40,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => this.updateChart());
|
||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||
this.resizeHandler = () => {
|
||||
@@ -63,17 +65,17 @@ export default {
|
||||
watch: {
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
console.log('this.detailData', this.detailData);
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -27,6 +28,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -44,19 +46,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,17 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
'漳州': 8,
|
||||
'自贡': 3,
|
||||
'桐城': 2,
|
||||
'洛阳': 9,
|
||||
'合肥': 5,
|
||||
'宿迁': 6,
|
||||
'秦皇岛': 10
|
||||
}
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -35,6 +25,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +34,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +50,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -42,18 +44,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -42,18 +44,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,8 +18,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
flag:0,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
flag: 0,
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -52,19 +54,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,304 +0,0 @@
|
||||
<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" @timeRangeChange="handleTimeChange" top-title="燃料成本分析" :is-full-screen="isFullScreen"
|
||||
@screenfullChange="screenfullChange" />
|
||||
<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;
|
||||
">
|
||||
<changeBase @selectChange="selectChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex; gap: 16px;margin-top: -20px;">
|
||||
<div class="left-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1624px;
|
||||
">
|
||||
<costItemOverviewItem :itemData="renderList" :title="'燃料成本概述·元/m²'" />
|
||||
</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;
|
||||
">
|
||||
<profitLineChart :yName="'元/㎡'" :trendData="trendData" :dateData="dateData" />
|
||||
</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 changeBase from "./costComponents/changeBase";
|
||||
import costItemOverviewItem from "./costComponents/costItemOverviewItem.vue";
|
||||
import profitLineChart from "./costComponents/profitLineChart.vue";
|
||||
import { mapState } from "vuex";
|
||||
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,
|
||||
changeBase,
|
||||
profitLineChart,
|
||||
costItemOverviewItem,
|
||||
Sidebar,
|
||||
// psiLineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dateData:{},
|
||||
levelId:undefined,
|
||||
itemData: [],
|
||||
trendData: [],
|
||||
parentItemList: [
|
||||
{ name: "燃料成本", target: 0, value: 0, proportion: 0, flag: 1 },
|
||||
{ name: "天然气", target: 0, value: 0, proportion: 0, flag: 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,
|
||||
}),
|
||||
renderList() {
|
||||
if (this.itemData && this.itemData.length > 0) {
|
||||
return this.itemData;
|
||||
}
|
||||
return this.parentItemList;
|
||||
},
|
||||
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() {
|
||||
const requestParams = {
|
||||
// startTime: this.startTime,
|
||||
// endTime: this.endTime,
|
||||
// mode: this.mode,
|
||||
startTime: this.dateData.startTime,
|
||||
endTime: this.dateData.endTime,
|
||||
mode: this.dateData.mode,
|
||||
trendName: "燃料成本",
|
||||
levelId: this.levelId ? this.levelId :1
|
||||
};
|
||||
// 调用接口
|
||||
getCostAnalysisXXCostList(requestParams).then((res) => {
|
||||
this.itemData = res.data[0].map((item) => {
|
||||
return {
|
||||
...item,
|
||||
route: 'singleFuelAnalysis'
|
||||
}
|
||||
})
|
||||
this.trendData= res.data[1]
|
||||
});
|
||||
},
|
||||
|
||||
handleTimeChange(obj) {
|
||||
console.log(obj, 'obj');
|
||||
this.dateData = {
|
||||
startTime: obj.startTime,
|
||||
endTime: obj.endTime,
|
||||
mode: obj.mode,
|
||||
}
|
||||
|
||||
this.getData()
|
||||
},
|
||||
selectChange(data) {
|
||||
console.log('选中的数据：', data);
|
||||
this.levelId = data
|
||||
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);
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
// 导出
|
||||
// () {
|
||||
// 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>
|
||||
@@ -1,307 +0,0 @@
|
||||
<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" @timeRangeChange="handleTimeChange" top-title="燃动力成本分析" :is-full-screen="isFullScreen"
|
||||
@screenfullChange="screenfullChange" />
|
||||
<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;
|
||||
">
|
||||
<changeBase @selectChange="selectChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex; gap: 16px;margin-top: -20px;">
|
||||
<div class="left-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1624px;
|
||||
">
|
||||
<costItemOverviewItem :itemData="renderList" :title="'燃动力成本概述·元/m²'" />
|
||||
</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;
|
||||
">
|
||||
<profitLineChart :yName="'元/㎡'" :trendData="trendData" :dateData="dateData" />
|
||||
</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 changeBase from "./costComponents/changeBase";
|
||||
import costItemOverviewItem from "./costComponents/costItemOverviewItem.vue";
|
||||
import profitLineChart from "./costComponents/profitLineChart.vue";
|
||||
import { mapState } from "vuex";
|
||||
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,
|
||||
changeBase,
|
||||
profitLineChart,
|
||||
costItemOverviewItem,
|
||||
Sidebar,
|
||||
// psiLineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dateData:{},
|
||||
levelId: undefined,
|
||||
itemData: [],
|
||||
trendData: [],
|
||||
parentItemList: [
|
||||
{ name: "能源总成本", target: 0, value: 0, proportion: 0, flag: 1 },
|
||||
// { name: "天然气", target: 0, value: 0, proportion: 0, flag: 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,
|
||||
}),
|
||||
renderList() {
|
||||
if (this.itemData && this.itemData.length > 0) {
|
||||
return this.itemData;
|
||||
}
|
||||
return this.parentItemList;
|
||||
},
|
||||
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() {
|
||||
// 基于选中的数据构建请求参数（根据实际接口需求调整）
|
||||
const requestParams = {
|
||||
// startTime: this.startTime,
|
||||
// endTime: this.endTime,
|
||||
// mode: this.mode,
|
||||
startTime: this.dateData.startTime,
|
||||
endTime: this.dateData.endTime,
|
||||
mode: this.dateData.mode,
|
||||
trendName: "燃动力成本",
|
||||
levelId: this.levelId ? this.levelId : 1
|
||||
};
|
||||
// 调用接口
|
||||
getCostAnalysisXXCostList(requestParams).then((res) => {
|
||||
this.itemData = res.data[0].map((item) => {
|
||||
return {
|
||||
...item,
|
||||
route: 'singlecombustionPowerAnalysis'
|
||||
}
|
||||
})
|
||||
this.trendData = res.data[1]
|
||||
});
|
||||
},
|
||||
|
||||
handleTimeChange(obj) {
|
||||
console.log(obj, 'obj');
|
||||
this.dateData = {
|
||||
startTime: obj.startTime,
|
||||
endTime: obj.endTime,
|
||||
mode: obj.mode,
|
||||
}
|
||||
|
||||
this.getData()
|
||||
},
|
||||
selectChange(data) {
|
||||
console.log('选中的数据：', data);
|
||||
this.levelId = data
|
||||
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);
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
// 导出
|
||||
// () {
|
||||
// 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>
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -27,6 +28,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -44,19 +46,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -42,18 +44,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -42,18 +44,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -39,6 +40,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => this.updateChart());
|
||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||
this.resizeHandler = () => {
|
||||
@@ -51,17 +53,17 @@ export default {
|
||||
watch: {
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -27,6 +28,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -44,19 +46,20 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,12 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +62,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -21,6 +22,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -38,18 +40,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -42,18 +44,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,7 +19,8 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
flag:0,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -52,19 +54,20 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,203 +0,0 @@
|
||||
<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>
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -26,6 +27,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -36,19 +38,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,7 +19,8 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
flag: 0,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -52,12 +54,12 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -76,7 +78,7 @@ getRateFlag(rate, real, target) {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false,
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -26,6 +27,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -36,19 +38,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -39,6 +40,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => this.updateChart());
|
||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||
this.resizeHandler = () => {
|
||||
@@ -63,17 +65,17 @@ export default {
|
||||
watch: {
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,247 +0,0 @@
|
||||
<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="
|
||||
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: 804px 804px;
|
||||
">
|
||||
<operatingSalesRevenue :saleData="saleData" />
|
||||
<premProdStatus :premiumProduct="premiumProduct" :salesProportion="salesProportion" />
|
||||
</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;
|
||||
">
|
||||
<operatingLineChart :salesTrendMap="salesTrendMap" :grossMarginTrendMap="grossMarginTrendMap" />
|
||||
<!-- <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 operatingSalesRevenue from "./components/operatingSalesRevenue.vue";
|
||||
import premProdStatus from "./components/premProdStatus.vue";
|
||||
import { mapState } from "vuex";
|
||||
import operatingLineChart from "./components/operatingLineChart";
|
||||
import { getSalesRevenueData } from '@/api/cockpit'
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: "DayReport",
|
||||
components: {
|
||||
ReportHeader,
|
||||
operatingSalesRevenue,
|
||||
operatingLineChart,
|
||||
premProdStatus,
|
||||
Sidebar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
saleData: {},
|
||||
premiumProduct: {},
|
||||
salesTrendMap: {},
|
||||
grossMarginTrendMap: {},
|
||||
salesProportion:{},
|
||||
};
|
||||
},
|
||||
|
||||
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) {
|
||||
getSalesRevenueData({
|
||||
startTime: obj.startTime,
|
||||
endTime: obj.endTime,
|
||||
timeDim: obj.mode
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.saleData = res.data.SaleData
|
||||
this.premiumProduct = res.data.premiumProduct
|
||||
this.salesTrendMap = res.data.salesTrendMap
|
||||
this.grossMarginTrendMap = res.data.grossMarginTrendMap
|
||||
this.salesProportion = res.data.salesProportion ? res.data.salesProportion : {}
|
||||
})
|
||||
},
|
||||
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);
|
||||
},
|
||||
// 导出
|
||||
// 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>
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,12 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +62,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true; // 设置挂载标志
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -54,18 +56,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -54,18 +56,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -34,6 +35,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -63,19 +65,20 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,12 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +62,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -42,18 +44,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -42,18 +44,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -39,6 +40,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => this.updateChart());
|
||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||
this.resizeHandler = () => {
|
||||
@@ -51,17 +53,18 @@ export default {
|
||||
watch: {
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
console.log('this.detailData', this.detailData);
|
||||
|
||||
@@ -1,306 +0,0 @@
|
||||
<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" @timeRangeChange="handleTimeChange" top-title="包装物辅材成本分析" :is-full-screen="isFullScreen"
|
||||
@screenfullChange="screenfullChange" />
|
||||
<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;
|
||||
">
|
||||
<changeBase @selectChange="selectChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex; gap: 16px;margin-top: -20px;">
|
||||
<div class="left-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1624px;
|
||||
">
|
||||
<costItemOverviewItem :itemData="renderList" :title="'包装物辅材成本概述·元/m²'" />
|
||||
</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;
|
||||
">
|
||||
<profitLineChart :yName="'元/㎡'" :trendData="trendData" :dateData="dateData" />
|
||||
</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/noRouterHeaderPa.vue";
|
||||
import { Sidebar } from "../../layout/components";
|
||||
import screenfull from "screenfull";
|
||||
import changeBase from "./costComponents/changeBase";
|
||||
import costItemOverviewItem from "./costComponents/costItemOverviewItem.vue";
|
||||
import profitLineChart from "./costComponents/profitLineChart.vue";
|
||||
import { mapState } from "vuex";
|
||||
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,
|
||||
changeBase,
|
||||
profitLineChart,
|
||||
costItemOverviewItem,
|
||||
Sidebar,
|
||||
// psiLineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dateData:{},
|
||||
levelId: undefined,
|
||||
itemData: [],
|
||||
trendData: [],
|
||||
parentItemList: [
|
||||
{ name: "包装物辅材总成本", target: 0, value: 0, proportion: 0, flag: 1 },
|
||||
{ name: "辅材1", target: 0, value: 0, proportion: 0, flag: 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,
|
||||
}),
|
||||
renderList() {
|
||||
if (this.itemData && this.itemData.length > 0) {
|
||||
return this.itemData;
|
||||
}
|
||||
return this.parentItemList;
|
||||
},
|
||||
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() {
|
||||
// 基于选中的数据构建请求参数（根据实际接口需求调整）
|
||||
const requestParams = {
|
||||
// startTime: this.startTime,
|
||||
// endTime: this.endTime,
|
||||
// mode: this.mode,
|
||||
startTime: this.dateData.startTime,
|
||||
endTime: this.dateData.endTime,
|
||||
mode: this.dateData.mode,
|
||||
trendName: "包装物辅材成本",
|
||||
levelId: this.levelId ? this.levelId : 1
|
||||
};
|
||||
// 调用接口
|
||||
getCostAnalysisXXCostList(requestParams).then((res) => {
|
||||
this.itemData = res.data[0].map((item) => {
|
||||
return {
|
||||
...item,
|
||||
route: 'singlePackingAnalysis'
|
||||
}
|
||||
})
|
||||
this.trendData = res.data[1]
|
||||
});
|
||||
},
|
||||
|
||||
handleTimeChange(obj) {
|
||||
console.log(obj, 'obj');
|
||||
this.dateData = {
|
||||
startTime: obj.startTime,
|
||||
endTime: obj.endTime,
|
||||
mode: obj.mode,
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
selectChange(data) {
|
||||
console.log('选中的数据：', data);
|
||||
this.levelId = data
|
||||
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);
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
// 导出
|
||||
// () {
|
||||
// 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>
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -27,6 +28,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -56,19 +58,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
},
|
||||
|
||||
},
|
||||
@@ -60,7 +62,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -54,18 +56,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -54,18 +56,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -39,6 +40,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => this.updateChart());
|
||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||
this.resizeHandler = () => {
|
||||
@@ -63,17 +65,17 @@ export default {
|
||||
watch: {
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -27,6 +28,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -56,19 +58,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false,
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -39,6 +40,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -47,11 +49,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
},
|
||||
showRelated: {
|
||||
handler(val) {
|
||||
@@ -72,7 +74,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -29,6 +30,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -58,18 +60,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -29,6 +30,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -58,11 +60,11 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
},
|
||||
showRelated: {
|
||||
handler(val) {
|
||||
@@ -78,7 +80,7 @@ export default {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -43,6 +44,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => this.updateChart());
|
||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||
this.resizeHandler = () => {
|
||||
@@ -67,17 +69,17 @@ export default {
|
||||
watch: {
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
console.log('this.detailData', this.detailData);
|
||||
|
||||
@@ -1,306 +0,0 @@
|
||||
<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" @timeRangeChange="handleTimeChange" top-title="制造费用成本分析" :is-full-screen="isFullScreen"
|
||||
@screenfullChange="screenfullChange" />
|
||||
<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;
|
||||
">
|
||||
<changeBase @selectChange="selectChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex; gap: 16px;margin-top: -20px;">
|
||||
<div class="left-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1624px;
|
||||
">
|
||||
<costItemOverviewItem :itemData="renderList" :title="'制造费用成本概述·元/m²'" />
|
||||
</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;
|
||||
">
|
||||
<profitLineChart :yName="'元/㎡'" :trendData="trendData" :dateData="dateData" />
|
||||
</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/noRouterHeaderPa.vue";
|
||||
import { Sidebar } from "../../layout/components";
|
||||
import screenfull from "screenfull";
|
||||
import changeBase from "./costComponents/changeBase";
|
||||
import costItemOverviewItem from "./costComponents/costItemOverviewItem.vue";
|
||||
import profitLineChart from "./costComponents/profitLineChart.vue";
|
||||
import { mapState } from "vuex";
|
||||
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,
|
||||
changeBase,
|
||||
profitLineChart,
|
||||
costItemOverviewItem,
|
||||
Sidebar,
|
||||
// psiLineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dateData:{},
|
||||
levelId: undefined,
|
||||
itemData: [],
|
||||
trendData: [],
|
||||
parentItemList: [
|
||||
{ name: "制造费用总成本", target: 0, value: 0, proportion: 0, flag: 1 },
|
||||
// { name: "辅材1", target: 0, value: 0, proportion: 0, flag: 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,
|
||||
}),
|
||||
renderList() {
|
||||
if (this.itemData && this.itemData.length > 0) {
|
||||
return this.itemData;
|
||||
}
|
||||
return this.parentItemList;
|
||||
},
|
||||
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() {
|
||||
// 基于选中的数据构建请求参数（根据实际接口需求调整）
|
||||
const requestParams = {
|
||||
// startTime: this.startTime,
|
||||
// endTime: this.endTime,
|
||||
// mode: this.mode,
|
||||
startTime: this.dateData.startTime,
|
||||
endTime: this.dateData.endTime,
|
||||
mode: this.dateData.mode,
|
||||
trendName: "制造费用成本",
|
||||
levelId: this.levelId ? this.levelId : 1
|
||||
};
|
||||
// 调用接口
|
||||
getCostAnalysisXXCostList(requestParams).then((res) => {
|
||||
this.itemData = res.data[0].map((item) => {
|
||||
return {
|
||||
...item,
|
||||
route: 'singleProductionCostsAnalysis'
|
||||
}
|
||||
})
|
||||
this.trendData = res.data[1]
|
||||
});
|
||||
},
|
||||
|
||||
handleTimeChange(obj) {
|
||||
console.log(obj, 'obj');
|
||||
this.dateData = {
|
||||
startTime: obj.startTime,
|
||||
endTime: obj.endTime,
|
||||
mode: obj.mode,
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
selectChange(data) {
|
||||
console.log('选中的数据：', data);
|
||||
this.levelId = data
|
||||
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);
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
// 导出
|
||||
// () {
|
||||
// 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>
|
||||
@@ -1,272 +0,0 @@
|
||||
<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: 804px 804px;
|
||||
">
|
||||
<profitOverview :profitTotalData="profitTotalData" />
|
||||
<salesDataOverview :productAndSaleData="salesAndOutputData" />
|
||||
</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;
|
||||
">
|
||||
<KFAP :middleItemData="middleItemData" :middleChartData="middleChartData" />
|
||||
<!-- <keyWork /> -->
|
||||
</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;
|
||||
">
|
||||
<profitLineChart :bottomChartData="bottomChartData" />
|
||||
<!-- <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 profitOverview from "./components/profitOverview.vue";
|
||||
import salesDataOverview from "./components/salesDataOverview.vue";
|
||||
import { mapState } from "vuex";
|
||||
import KFAP from "./components/KFAP.vue";
|
||||
import profitLineChart from "./components/profitLineChart.vue";
|
||||
import { getProfitAnalysisData } 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,
|
||||
profitOverview,
|
||||
KFAP,
|
||||
salesDataOverview,
|
||||
Sidebar,
|
||||
profitLineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
profitTotalData: [],
|
||||
productAndSaleData: [],
|
||||
middleItemData: [],
|
||||
middleChartData: [],
|
||||
bottomChartData: []
|
||||
};
|
||||
},
|
||||
|
||||
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) {
|
||||
getProfitAnalysisData({
|
||||
startTime: obj.startTime,
|
||||
endTime: obj.endTime,
|
||||
mode: obj.mode,
|
||||
}).then((res) => {
|
||||
|
||||
this.profitTotalData = res.data.overviewProfitData.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);
|
||||
},
|
||||
|
||||
// 导出
|
||||
// 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>
|
||||
@@ -1,285 +0,0 @@
|
||||
<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 @query="handleGetData" :defaultType="'原料'" :typeList="typeList" typeName="分析对象" />
|
||||
</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;
|
||||
">
|
||||
<totalProfit :totalProfitIndict="totalProfitIndict" :dateData="dateData" />
|
||||
</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;
|
||||
">
|
||||
<profitLineChart :trendData="totalProfitTrend" :dateData="dateData" :name=" '总利润趋势·元' " :yName="'元' " />
|
||||
</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 totalProfit from "./costComponents/totalProfit.vue";
|
||||
import profitLineChart from "./costComponents/profitTotalChart.vue";
|
||||
import { mapState } from "vuex";
|
||||
import singleTopSelect from "./costComponents/singleTopSelect.vue";
|
||||
import moment from "moment";
|
||||
import { getProfitImpactList } from '@/api/cockpit'
|
||||
export default {
|
||||
name: "DayReport",
|
||||
components: {
|
||||
ReportHeader,
|
||||
singleTopSelect,
|
||||
profitLineChart,
|
||||
totalProfit,
|
||||
Sidebar,
|
||||
// psiLineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dateData: {},
|
||||
levelId: 1,
|
||||
analysisObject: [],
|
||||
typeList: [{
|
||||
name: '原料',
|
||||
id: 1,
|
||||
}],
|
||||
totalProfitIndict: [],
|
||||
totalProfitTrend:[],
|
||||
};
|
||||
},
|
||||
|
||||
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() {
|
||||
// 基于选中的数据构建请求参数（根据实际接口需求调整）
|
||||
// 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,
|
||||
analysisObject: ["石灰石"],
|
||||
levelId: this.levelId ? this.levelId : 1
|
||||
};
|
||||
// 调用接口
|
||||
getProfitImpactList(requestParams).then((res) => {
|
||||
this.totalProfitIndict = res.data.TotalProfitIndict
|
||||
this.totalProfitTrend = res.data.TotalProfitTrend
|
||||
});
|
||||
},
|
||||
|
||||
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>
|
||||
@@ -1,278 +0,0 @@
|
||||
<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;
|
||||
">
|
||||
<changeBase @selectChange="selectChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex; gap: 16px;margin-top: -20px;">
|
||||
<div class="left-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1624px;
|
||||
">
|
||||
<costItemOverviewItem :itemData="itemData" />
|
||||
</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;
|
||||
">
|
||||
<profitLineChart :yName="'元/㎡'" :dateData="dateData" :trendData="trendData" />
|
||||
</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 costItemOverviewItem from "./costComponents/costItemOverviewItem.vue";
|
||||
import profitLineChart from "./costComponents/profitLineChart.vue";
|
||||
import { mapState } from "vuex";
|
||||
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,
|
||||
changeBase,
|
||||
profitLineChart,
|
||||
costItemOverviewItem,
|
||||
Sidebar,
|
||||
// psiLineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
coreProductVisualAlarmVO: [],
|
||||
dateData:{},
|
||||
itemData: [],
|
||||
trendData: [],
|
||||
};
|
||||
},
|
||||
|
||||
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);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(1111);
|
||||
const _this = this;
|
||||
_this.beilv = document.documentElement.clientWidth / 1920;
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
_this.clientWidth = `${document.documentElement.clientWidth}`;
|
||||
this.beilv = _this.clientWidth / 1920;
|
||||
})();
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
// this.dateData = obj
|
||||
// console.log('obj', obj);
|
||||
getCostAnalysisXXCostList({
|
||||
startTime: this.dateData.startTime,
|
||||
endTime: this.dateData.endTime,
|
||||
mode: this.dateData.mode,
|
||||
trendName: "原料成本",
|
||||
levelId: this.levelId
|
||||
}).then((res) => {
|
||||
this.itemData = res.data[0].map((item) => {
|
||||
return {
|
||||
...item,
|
||||
route:'singleRawMaterialAnalysis'
|
||||
}
|
||||
})
|
||||
this.trendData = res.data[1]
|
||||
})
|
||||
},
|
||||
handleTimeChange(obj) {
|
||||
console.log(obj, 'obj');
|
||||
this.dateData = {
|
||||
startTime: obj.startTime,
|
||||
endTime: obj.endTime,
|
||||
mode: obj.mode,
|
||||
}
|
||||
|
||||
this.getData()
|
||||
},
|
||||
selectChange(data) {
|
||||
console.log('选中的数据：', data);
|
||||
this.levelId = data
|
||||
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>
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -27,6 +28,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -44,19 +46,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
this.myChart = echarts.init(chartDom);
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -28,6 +29,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -38,18 +40,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.chartRef];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,8 +18,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
flag:0,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
flag: 0,
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -52,19 +54,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -27,6 +28,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -44,19 +46,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -43,6 +44,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => this.updateChart());
|
||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||
this.resizeHandler = () => {
|
||||
@@ -55,17 +57,17 @@ export default {
|
||||
watch: {
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,311 +0,0 @@
|
||||
<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=" '采购单价·元/m³' " />
|
||||
<topRightChart :dateData="dateData" :consumptionList="consumptionList" :name="'消耗量·m³'" />
|
||||
|
||||
</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="'单耗趋势·m³/㎡'" />
|
||||
<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 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: [],
|
||||
analysisObject: [],
|
||||
dateData: {},
|
||||
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>
|
||||
@@ -1,312 +0,0 @@
|
||||
<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>
|
||||
@@ -1,294 +0,0 @@
|
||||
<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" />
|
||||
<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;
|
||||
">
|
||||
<changeBase @selectChange="getBase" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex; gap: 16px;margin-top: -20px;">
|
||||
<div class="left-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns:804px 804px;
|
||||
">
|
||||
<productItemOverviewItem :parentItemList="receiveTotal" :title=" '领用汇总' " />
|
||||
<productItemOverviewItem :parentItemList="inStorageTotal" :title="'入账汇总'" />
|
||||
|
||||
</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;
|
||||
">
|
||||
<productLeftTable :tableData="receiveDetailList" />
|
||||
<productRightTable :tableData="accountSumaryList" />
|
||||
</div>
|
||||
</div>
|
||||
</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 productItemOverviewItem from "./costComponents/productItemOverviewItem.vue";
|
||||
import productLeftTable from "./costComponents/productLeftTable.vue";
|
||||
import productRightTable from "./costComponents/productRightTable.vue";
|
||||
import { getReceiveDetailPage, getAccountSumaryPage } from '@/api/cockpit'
|
||||
import { mapState } from "vuex";
|
||||
|
||||
// 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,
|
||||
changeBase,
|
||||
productLeftTable,
|
||||
productItemOverviewItem,
|
||||
productRightTable,
|
||||
Sidebar,
|
||||
// psiLineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
levelId:1,
|
||||
accountSumaryList: [],
|
||||
receiveDetailList: [],
|
||||
receiveTotal: [],
|
||||
inStorageTotal: [],
|
||||
itemLeftList: [
|
||||
{ name: "备品备件", value: 137,},
|
||||
{
|
||||
name: "机物料", value: 16, },
|
||||
{
|
||||
name: "其他", value: 16, },
|
||||
],
|
||||
itemRightList: [
|
||||
{ name: "备品备件", value: 137, },
|
||||
{
|
||||
name: "机物料", value: 16,
|
||||
},
|
||||
{
|
||||
name: "其他", value: 16,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.init();
|
||||
this.windowWidth(document.documentElement.clientWidth);
|
||||
this.getData()
|
||||
},
|
||||
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: {
|
||||
getBase(data) {
|
||||
console.log(data);
|
||||
this.levelId = data
|
||||
this.getData()
|
||||
},
|
||||
getData() {
|
||||
getReceiveDetailPage({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
levelId: this.levelId
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.receiveDetailList = res.data.receiveDetail
|
||||
this.receiveTotal = res.data.receiveTotal.map((item) => {
|
||||
const name = Object.keys(item)[0];
|
||||
const value = item[name];
|
||||
console.log(name);
|
||||
return { name, value };
|
||||
});
|
||||
})
|
||||
getAccountSumaryPage({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
levelId: this.levelId
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.accountSumaryList = res.data.inStorageDetail
|
||||
this.inStorageTotal = res.data.inStorageTotal.map((item) => {
|
||||
const name = Object.keys(item)[0];
|
||||
const value = item[name];
|
||||
return { name, value };
|
||||
});
|
||||
})
|
||||
},
|
||||
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>
|
||||
@@ -1,306 +0,0 @@
|
||||
<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 typeName="原料" @query="handleGetData" :defaultType="'原料成本'" :typeList="rawTypeList" />
|
||||
</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 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 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 {
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dateData: {},
|
||||
levelId: 1,
|
||||
pupList: [],
|
||||
consumptionList: [],
|
||||
dateData: {},
|
||||
unitConsumptionList: [],
|
||||
outputList: [],
|
||||
analysisObject: [],
|
||||
rawTypeList: [{
|
||||
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>
|
||||
@@ -1,312 +0,0 @@
|
||||
<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 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 {
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dateData: {},
|
||||
levelId: 1,
|
||||
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>
|
||||
@@ -1,248 +0,0 @@
|
||||
<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="
|
||||
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:1624px;
|
||||
">
|
||||
<operatingLineChart :salesTrendMap="salesTrendMap" :grossMarginTrendMap="grossMarginTrendMap" />
|
||||
</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;
|
||||
">
|
||||
<operatingLineChartCumulative :salesTrendMap="salesTrendMap" :grossMarginTrendMap="grossMarginTrendMap" />
|
||||
<!-- <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 operatingSalesRevenue from "./operatingComponents/operatingSalesRevenue";
|
||||
// import premProdStatus from "./components/premProdStatus.vue";
|
||||
import { mapState } from "vuex";
|
||||
import operatingLineChart from "./totalProfitComponents/operatingLineChart";
|
||||
import operatingLineChartCumulative from "./totalProfitComponents/operatingLineChartCumulative.vue";
|
||||
|
||||
import { getSalesRevenueData } from '@/api/cockpit'
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: "DayReport",
|
||||
components: {
|
||||
ReportHeader,
|
||||
operatingLineChartCumulative,
|
||||
operatingLineChart,
|
||||
// premProdStatus,
|
||||
Sidebar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
saleData: {},
|
||||
premiumProduct: {},
|
||||
salesTrendMap: {},
|
||||
grossMarginTrendMap: {},
|
||||
salesProportion:{},
|
||||
};
|
||||
},
|
||||
|
||||
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) {
|
||||
getSalesRevenueData({
|
||||
startTime: obj.startTime,
|
||||
endTime: obj.endTime,
|
||||
timeDim: obj.mode
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.saleData = res.data.SaleData
|
||||
this.premiumProduct = res.data.premiumProduct
|
||||
this.salesTrendMap = res.data.salesTrendMap
|
||||
this.grossMarginTrendMap = res.data.grossMarginTrendMap
|
||||
this.salesProportion = res.data.salesProportion ? res.data.salesProportion : {}
|
||||
})
|
||||
},
|
||||
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);
|
||||
},
|
||||
// 导出
|
||||
// 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>
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,12 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +62,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
this.myChart = echarts.init(chartDom);
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -42,18 +44,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -39,6 +40,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => this.updateChart());
|
||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||
this.resizeHandler = () => {
|
||||
@@ -51,17 +53,18 @@ export default {
|
||||
watch: {
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return;
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
console.log('this.detailData', this.detailData);
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -26,6 +27,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -36,19 +38,19 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
isMounted: false, // 图表挂载标志，避免过早执行
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
@@ -35,6 +36,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
@@ -43,11 +45,11 @@ export default {
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,8 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null, // 存储图表实例，避免重复创建
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -24,6 +25,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
@@ -34,18 +36,18 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
console.log(this.chartData,'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -39,7 +39,8 @@ export default {
|
||||
'rgba(153, 102, 255, 1)'
|
||||
],
|
||||
myChart: null, // 保存图表实例，便于销毁和缩放
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
@@ -47,13 +48,14 @@ export default {
|
||||
// 监听 chartData 变化，只要数据变了，就更新图表
|
||||
chartData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
this.initData(); // 直接调用更新
|
||||
},
|
||||
deep: true, // 深度监听数组/对象变化
|
||||
immediate: true // 初始化时立即执行
|
||||
deep: true // 深度监听数组/对象变化
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => {
|
||||
this.initData(); // 初始化图表
|
||||
});
|
||||
@@ -83,7 +85,7 @@ export default {
|
||||
|
||||
const chartDom = this.$refs[this.chartRef];
|
||||
if (!chartDom) {
|
||||
console.error(`图表容器未找到！请确认父组件传递的 chartRef 为 "${this.chartRef}"`);
|
||||
if (process.env.NODE_ENV === 'development') console.warn(`图表容器未找到！请确认父组件传递的 chartRef 为 "${this.chartRef}"`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
resizeHandler: null // 窗口resize事件处理器
|
||||
resizeHandler: null, // 窗口resize事件处理器
|
||||
isMounted: false // 图表挂载标志，避免过早执行
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -39,6 +40,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isMounted = true;
|
||||
this.$nextTick(() => this.updateChart());
|
||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||
this.resizeHandler = () => {
|
||||
@@ -63,17 +65,17 @@ export default {
|
||||
watch: {
|
||||
detailData: {
|
||||
handler() {
|
||||
if (!this.isMounted) return; // 挂载前保护
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user