消除红色图表未找到的警告和删除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 {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false,
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +61,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
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 {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false,
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +61,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -20,6 +21,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -30,18 +32,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -26,6 +27,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -36,19 +38,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false,
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +61,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.myChart = echarts.init(chartDom);
|
this.myChart = echarts.init(chartDom);
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null,
|
myChart: null,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -39,6 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => this.updateChart());
|
this.$nextTick(() => this.updateChart());
|
||||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||||
this.resizeHandler = () => {
|
this.resizeHandler = () => {
|
||||||
@@ -63,17 +65,17 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log('this.detailData', this.detailData);
|
console.log('this.detailData', this.detailData);
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -27,6 +28,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -44,19 +46,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,17 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
baseNameToIndexMap: {
|
|
||||||
'宜兴': 7,
|
|
||||||
'漳州': 8,
|
|
||||||
'自贡': 3,
|
|
||||||
'桐城': 2,
|
|
||||||
'洛阳': 9,
|
|
||||||
'合肥': 5,
|
|
||||||
'宿迁': 6,
|
|
||||||
'秦皇岛': 10
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -35,6 +25,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +34,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +50,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -42,18 +44,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -42,18 +44,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,8 +18,9 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
flag:0,
|
flag: 0,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -52,19 +54,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
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() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -27,6 +28,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -44,19 +46,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +61,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -42,18 +44,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -42,18 +44,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null,
|
myChart: null,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -39,6 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => this.updateChart());
|
this.$nextTick(() => this.updateChart());
|
||||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||||
this.resizeHandler = () => {
|
this.resizeHandler = () => {
|
||||||
@@ -51,17 +53,17 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -27,6 +28,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -44,19 +46,20 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,12 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +62,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -21,6 +22,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -38,18 +40,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -42,18 +44,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -19,7 +19,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
flag:0,
|
flag:0,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -52,19 +54,20 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
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: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -26,6 +27,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -36,19 +38,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +61,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -19,7 +19,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
flag: 0,
|
flag: 0,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -52,12 +54,12 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -76,7 +78,7 @@ getRateFlag(rate, real, target) {
|
|||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false,
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +61,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -26,6 +27,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -36,19 +38,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +61,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null,
|
myChart: null,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -39,6 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => this.updateChart());
|
this.$nextTick(() => this.updateChart());
|
||||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||||
this.resizeHandler = () => {
|
this.resizeHandler = () => {
|
||||||
@@ -63,17 +65,17 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
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 {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,12 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +62,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true; // 设置挂载标志
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -54,18 +56,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -54,18 +56,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -34,6 +35,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -63,19 +65,20 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,12 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +62,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -42,18 +44,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -42,18 +44,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null,
|
myChart: null,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -39,6 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => this.updateChart());
|
this.$nextTick(() => this.updateChart());
|
||||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||||
this.resizeHandler = () => {
|
this.resizeHandler = () => {
|
||||||
@@ -51,17 +53,18 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log('this.detailData', this.detailData);
|
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() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -27,6 +28,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -56,19 +58,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
@@ -60,7 +62,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -54,18 +56,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -54,18 +56,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null,
|
myChart: null,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -39,6 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => this.updateChart());
|
this.$nextTick(() => this.updateChart());
|
||||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||||
this.resizeHandler = () => {
|
this.resizeHandler = () => {
|
||||||
@@ -63,17 +65,17 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -27,6 +28,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -56,19 +58,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false,
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -39,6 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -47,11 +49,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
},
|
},
|
||||||
showRelated: {
|
showRelated: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
@@ -72,7 +74,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -29,6 +30,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -58,18 +60,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -29,6 +30,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -58,11 +60,11 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
},
|
},
|
||||||
showRelated: {
|
showRelated: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
@@ -78,7 +80,7 @@ export default {
|
|||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null,
|
myChart: null,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -43,6 +44,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => this.updateChart());
|
this.$nextTick(() => this.updateChart());
|
||||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||||
this.resizeHandler = () => {
|
this.resizeHandler = () => {
|
||||||
@@ -67,17 +69,17 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log('this.detailData', this.detailData);
|
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() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -27,6 +28,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -44,19 +46,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +61,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.myChart = echarts.init(chartDom);
|
this.myChart = echarts.init(chartDom);
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -28,6 +29,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -38,18 +40,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.chartRef];
|
const chartDom = this.$refs[this.chartRef];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,8 +18,9 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
flag:0,
|
flag: 0,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -52,19 +54,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -27,6 +28,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -44,19 +46,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +61,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null,
|
myChart: null,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -43,6 +44,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => this.updateChart());
|
this.$nextTick(() => this.updateChart());
|
||||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||||
this.resizeHandler = () => {
|
this.resizeHandler = () => {
|
||||||
@@ -55,17 +57,17 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
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 {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,12 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +62,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.myChart = echarts.init(chartDom);
|
this.myChart = echarts.init(chartDom);
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -25,6 +26,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -42,18 +44,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null,
|
myChart: null,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -39,6 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => this.updateChart());
|
this.$nextTick(() => this.updateChart());
|
||||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||||
this.resizeHandler = () => {
|
this.resizeHandler = () => {
|
||||||
@@ -51,17 +53,18 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return;
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
// 移除 immediate: true，由 mounted 中的 updateChart() 处理初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log('this.detailData', this.detailData);
|
console.log('this.detailData', this.detailData);
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -26,6 +27,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -36,19 +38,19 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
|
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
myChart: null, // 存储图表实例
|
myChart: null, // 存储图表实例
|
||||||
resizeHandler: null, // 存储resize事件处理函数
|
resizeHandler: null, // 存储resize事件处理函数
|
||||||
|
isMounted: false, // 图表挂载标志，避免过早执行
|
||||||
// 核心：基地名称与序号的映射表（固定顺序）
|
// 核心：基地名称与序号的映射表（固定顺序）
|
||||||
baseNameToIndexMap: {
|
baseNameToIndexMap: {
|
||||||
'宜兴': 7,
|
'宜兴': 7,
|
||||||
@@ -35,6 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart(); // 初始化图表（只执行一次）
|
this.initChart(); // 初始化图表（只执行一次）
|
||||||
this.updateChart(); // 更新图表数据
|
this.updateChart(); // 更新图表数据
|
||||||
@@ -43,11 +45,11 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData, 'chartData');
|
console.log(this.chartData, 'chartData');
|
||||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -59,7 +61,7 @@ export default {
|
|||||||
initChart() {
|
initChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null // 存储图表实例，避免重复创建
|
myChart: null, // 存储图表实例，避免重复创建
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
});
|
});
|
||||||
@@ -34,18 +36,18 @@ export default {
|
|||||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
console.log(this.chartData,'chartData');
|
console.log(this.chartData,'chartData');
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs.cockpitEffChip;
|
const chartDom = this.$refs.cockpitEffChip;
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -39,7 +39,8 @@ export default {
|
|||||||
'rgba(153, 102, 255, 1)'
|
'rgba(153, 102, 255, 1)'
|
||||||
],
|
],
|
||||||
myChart: null, // 保存图表实例，便于销毁和缩放
|
myChart: null, // 保存图表实例，便于销毁和缩放
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
@@ -47,13 +48,14 @@ export default {
|
|||||||
// 监听 chartData 变化，只要数据变了，就更新图表
|
// 监听 chartData 变化，只要数据变了，就更新图表
|
||||||
chartData: {
|
chartData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
this.initData(); // 直接调用更新
|
this.initData(); // 直接调用更新
|
||||||
},
|
},
|
||||||
deep: true, // 深度监听数组/对象变化
|
deep: true // 深度监听数组/对象变化
|
||||||
immediate: true // 初始化时立即执行
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initData(); // 初始化图表
|
this.initData(); // 初始化图表
|
||||||
});
|
});
|
||||||
@@ -83,7 +85,7 @@ export default {
|
|||||||
|
|
||||||
const chartDom = this.$refs[this.chartRef];
|
const chartDom = this.$refs[this.chartRef];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error(`图表容器未找到！请确认父组件传递的 chartRef 为 "${this.chartRef}"`);
|
if (process.env.NODE_ENV === 'development') console.warn(`图表容器未找到！请确认父组件传递的 chartRef 为 "${this.chartRef}"`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
myChart: null,
|
myChart: null,
|
||||||
resizeHandler: null // 窗口resize事件处理器
|
resizeHandler: null, // 窗口resize事件处理器
|
||||||
|
isMounted: false // 图表挂载标志，避免过早执行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -39,6 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.isMounted = true;
|
||||||
this.$nextTick(() => this.updateChart());
|
this.$nextTick(() => this.updateChart());
|
||||||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||||||
this.resizeHandler = () => {
|
this.resizeHandler = () => {
|
||||||
@@ -63,17 +65,17 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
detailData: {
|
detailData: {
|
||||||
handler() {
|
handler() {
|
||||||
|
if (!this.isMounted) return; // 挂载前保护
|
||||||
this.updateChart();
|
this.updateChart();
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
immediate: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
const chartDom = this.$refs[this.refName];
|
const chartDom = this.$refs[this.refName];
|
||||||
if (!chartDom) {
|
if (!chartDom) {
|
||||||
console.error('图表容器未找到！');
|
if (process.env.NODE_ENV === 'development') console.warn('图表容器未找到！');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user