285 lines
8.1 KiB
Vue
285 lines
8.1 KiB
Vue
<template>
|
|
<div id="dayReport" class="dayReport" :style="styles">
|
|
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
|
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
|
<ReportHeader :dateData="dateData" 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 :factory="factory" @baseChange="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: 804px 804px;
|
|
">
|
|
<monthlyOverview :month="month" :monthData="monthData" :title="'月度概览'" />
|
|
<totalOverview :ytdData="ytdData" :title="'累计概览'" />
|
|
|
|
</div>
|
|
</div>
|
|
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">
|
|
<div class="left-three" style="
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: 804px 804px;
|
|
">
|
|
<monthlyRelatedMetrics :dateData="dateData" :factory="factory" :monthAnalysis="monthAnalysis"
|
|
:title="'月度·相关指标分析'" />
|
|
<yearRelatedMetrics :dateData="dateData" :factory="factory" :ytdAnalysis="ytdAnalysis" :title="'累计·相关指标分析'" />
|
|
|
|
</div>
|
|
</div>
|
|
<div class="bottom" style="display: flex; gap: 16px;margin-top: 6px;">
|
|
<div class="left-three" style="
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: 1624px;
|
|
">
|
|
<dataTrend @handleChange="handleChange" :trend="trend" :title="'数据趋势'" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ReportHeader from "../components/noRouterHeader.vue";
|
|
import { Sidebar } from "../../../layout/components";
|
|
import screenfull from "screenfull";
|
|
import changeBase from "../components/changeBase.vue";
|
|
import monthlyOverview from "../operatingComponents/monthlyOverview.vue";
|
|
import totalOverview from "../operatingComponents/totalOverview.vue";
|
|
import monthlyRelatedMetrics from "../operatingComponents/monthlyRelatedMetrics.vue";
|
|
import yearRelatedMetrics from "../operatingComponents/yearRelatedMetrics.vue";
|
|
import dataTrend from "../operatingComponents/dataTrend.vue";
|
|
|
|
import profitLineChart from "../costComponents/profitLineChart.vue";
|
|
import { mapState } from "vuex";
|
|
import { getSalesRevenueFactoryData } from '@/api/cockpit'
|
|
import moment from "moment";
|
|
import navigationStateMixin from "@/utils/mixins/navigationStateMixin";
|
|
export default {
|
|
name: "DayReport",
|
|
mixins: [navigationStateMixin],
|
|
components: {
|
|
ReportHeader,
|
|
changeBase,
|
|
profitLineChart,
|
|
monthlyOverview,
|
|
Sidebar,
|
|
totalOverview,
|
|
monthlyRelatedMetrics,
|
|
yearRelatedMetrics,
|
|
dataTrend
|
|
},
|
|
data() {
|
|
return {
|
|
isFullScreen: false,
|
|
timer: null,
|
|
beilv: 1,
|
|
month:'',
|
|
value: 100,
|
|
// factory 和 dateData 由 mixin 提供
|
|
index: '营业收入',
|
|
monthData: undefined,
|
|
ytdData: undefined,
|
|
monthAnalysis:[],
|
|
ytdAnalysis: [],
|
|
trend:[]
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.init();
|
|
this.windowWidth(document.documentElement.clientWidth);
|
|
// 使用 mixin 初始化导航状态恢复
|
|
this._initNavigationStateMixin(({ factory, dateData }) => {
|
|
if (factory != null && dateData && dateData.startTime != null) {
|
|
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: {
|
|
handleChange(value) {
|
|
this.index =value
|
|
this.getData()
|
|
},
|
|
getData() {
|
|
const requestParams = {
|
|
startTime: this.dateData.startTime,
|
|
endTime: this.dateData.endTime,
|
|
index: this.index,
|
|
sort:1,
|
|
factory: Number(this.factory)
|
|
};
|
|
// 调用接口
|
|
getSalesRevenueFactoryData(requestParams).then((res) => {
|
|
this.monthData = res.data.month
|
|
this.ytdData = res.data.ytd
|
|
this.monthAnalysis = res.data.monthAnalysis
|
|
this.ytdAnalysis = res.data.ytdAnalysis
|
|
this.trend = res.data.trend
|
|
});
|
|
},
|
|
|
|
handleTimeChange(obj) {
|
|
this.month = obj.targetMonth
|
|
this.dateData = {
|
|
startTime: obj.startTime,
|
|
endTime: obj.endTime,
|
|
}
|
|
this.getData()
|
|
},
|
|
selectChange(data) {
|
|
this.factory = 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() {
|
|
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;
|
|
if (this.date === moment().format("yyyy-MM-DD")) {
|
|
this.loopTime();
|
|
} else {
|
|
clearInterval(this.timer);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</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>
|