411 lines
11 KiB
Vue
411 lines
11 KiB
Vue
<template>
|
|
<div class="home-page">
|
|
<div class="date-tabs">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
|
|
<el-tab-pane
|
|
:label="'\u2002\u2002日\u2002\u2002'"
|
|
name="日"></el-tab-pane>
|
|
<el-tab-pane
|
|
:label="'\u2002\u2002周\u2002\u2002'"
|
|
name="周"></el-tab-pane>
|
|
<el-tab-pane
|
|
:label="'\u2002\u2002月\u2002\u2002'"
|
|
name="月"></el-tab-pane>
|
|
<el-tab-pane
|
|
:label="'\u2002\u2002年\u2002\u2002'"
|
|
name="年"></el-tab-pane>
|
|
</el-tabs>
|
|
<div class="current-date">( {{ showTime }} )</div>
|
|
<div class="current-time">
|
|
<span style="display: inline-block; margin-right: 16px">
|
|
{{ topTime + timeZone }}
|
|
</span>
|
|
<span>{{ topDate }}</span>
|
|
</div>
|
|
</div>
|
|
<el-row class="main-top" :gutter="16">
|
|
<el-col :span="24" style="position: relative">
|
|
<div class="title">
|
|
<svg-icon icon-class="home-produce" />
|
|
<span class="title-inner">生产总成本</span>
|
|
</div>
|
|
<el-row class="box">
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.priceS }}万元</div>
|
|
<div class="unit-style">总计成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.matPriceS }}万元</div>
|
|
<div class="unit-style">原料成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.energyPriceS }}万元</div>
|
|
<div class="unit-style">能源成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.otherPriceS }}万元</div>
|
|
<div class="unit-style">其他成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.ratioS }}</div>
|
|
<div class="unit-style">综合良品率/%</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.areaPriceS }}元</div>
|
|
<div class="unit-style">综合每平米成本</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="24" style="position: relative">
|
|
<div class="title">
|
|
<svg-icon icon-class="home-produce" />
|
|
<span class="title-inner">原片成本</span>
|
|
</div>
|
|
<el-row class="box">
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.priceO }}万元</div>
|
|
<div class="unit-style">原片总成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.matPriceO }}万元</div>
|
|
<div class="unit-style">原料成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.energyPriceO }}万元</div>
|
|
<div class="unit-style">能源成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.otherPriceO }}万元</div>
|
|
<div class="unit-style">其他成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.ratioO }}</div>
|
|
<div class="unit-style">原片良品率/%</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.areaPriceO }}元</div>
|
|
<div class="unit-style">原片每平米成本</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="24" style="position: relative">
|
|
<div class="title">
|
|
<svg-icon icon-class="home-produce" />
|
|
<span class="title-inner">深加工成本</span>
|
|
</div>
|
|
<el-row class="box">
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.priceD }}万元</div>
|
|
<div class="unit-style">深加工总成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.energyPriceD }}万元</div>
|
|
<div class="unit-style">能源成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.otherPriceD }}万元</div>
|
|
<div class="unit-style">其他成本</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.ratioD }}</div>
|
|
<div class="unit-style">深加工良品率/%</div>
|
|
</el-col>
|
|
<el-col :span="4" class="num-box shadow">
|
|
<div class="num-style">{{ homeData.areaPriceD }}元</div>
|
|
<div class="unit-style">深加工每平米成本</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row class="main-bottom" :gutter="16" v-if="false">
|
|
<el-col :span="9">
|
|
<div class="chart-wrapper">
|
|
<line-chart :chart-data="lineChartData" />
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<div class="chart-wrapper">
|
|
<pie-chart />
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="chart-wrapper">
|
|
<bar-chart />
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div
|
|
class="main-footer"
|
|
style="
|
|
color: #c7c7c7;
|
|
user-select: none;
|
|
font-size: 14px;
|
|
letter-spacing: 1px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-content: center;
|
|
">
|
|
© 中建材智能自动化研究院有限公司
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment';
|
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
|
import LineChart from '../dashboard/LineChart';
|
|
import PieChart from '../dashboard/PieChart';
|
|
import BarChart from '../dashboard/BarChart';
|
|
import PanelGroup from '../dashboard/PanelGroup';
|
|
import { getData } from '@/api/cost/allCost';
|
|
|
|
const lineChartData = {
|
|
newVisitis: {
|
|
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
|
actualData: [120, 82, 91, 154, 162, 140, 145],
|
|
},
|
|
messages: {
|
|
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
|
actualData: [180, 160, 151, 106, 145, 150, 130],
|
|
},
|
|
purchases: {
|
|
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
|
actualData: [120, 90, 100, 138, 142, 130, 130],
|
|
},
|
|
shoppings: {
|
|
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
|
actualData: [120, 82, 91, 154, 162, 140, 130],
|
|
},
|
|
};
|
|
|
|
export default {
|
|
name: 'Home',
|
|
mixins: [tableHeightMixin],
|
|
components: {
|
|
LineChart,
|
|
PieChart,
|
|
PanelGroup,
|
|
BarChart,
|
|
},
|
|
computed: {
|
|
gradientBackground() {
|
|
return {
|
|
'background-image':
|
|
'linear-gradient(90deg, #f0f0f0 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, #f0f0f0 50%, #f0f0f0 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0))',
|
|
'background-size': '100px 100px', // 调整条纹的大小
|
|
};
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: '日',
|
|
topDate: '',
|
|
topTime: '',
|
|
timeZone: '',
|
|
lineChartData: lineChartData.newVisitis,
|
|
homeData: {},
|
|
startTime:
|
|
moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD') +
|
|
' 00:00:00',
|
|
endTime:
|
|
moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
|
|
' 00:00:00',
|
|
};
|
|
},
|
|
created() {
|
|
this.getTime();
|
|
this.handleClick();
|
|
this.showTime = moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD');
|
|
this.getData();
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer);
|
|
},
|
|
methods: {
|
|
getData() {
|
|
let listQuery = {
|
|
//分页
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
|
|
startTime: this.startTime,
|
|
endTime: this.endTime,
|
|
};
|
|
getData(listQuery).then((response) => {
|
|
this.homeData = response.data;
|
|
for (let i in this.homeData) {
|
|
this.homeData[i] = Number(this.homeData[i]).toFixed(2);
|
|
}
|
|
});
|
|
},
|
|
handleClick() {
|
|
let start = Date.parse(new Date());
|
|
let end = Date.parse(new Date());
|
|
switch (this.activeName) {
|
|
case '日':
|
|
this.showTime = moment(new Date())
|
|
.subtract(0, 'days')
|
|
.format('YYYY-MM-DD');
|
|
this.lineChartData = lineChartData.newVisitis;
|
|
break;
|
|
case '周':
|
|
start = moment(new Date()).subtract(6, 'days').format('x');
|
|
this.showTime =
|
|
moment(new Date()).subtract(6, 'days').format('MM-DD') +
|
|
' ~ ' +
|
|
moment(new Date()).subtract(0, 'days').format('MM-DD');
|
|
this.lineChartData = lineChartData.messages;
|
|
break;
|
|
case '月':
|
|
start = moment(new Date()).subtract(1, 'month').format('x');
|
|
this.showTime =
|
|
moment(new Date()).subtract(1, 'month').format('MM-DD') +
|
|
' ~ ' +
|
|
moment(new Date()).subtract(0, 'days').format('MM-DD');
|
|
this.lineChartData = lineChartData.purchases;
|
|
break;
|
|
case '年':
|
|
start = moment(new Date()).subtract(1, 'year').format('x');
|
|
this.showTime =
|
|
moment(new Date()).subtract(1, 'year').format('YYYY') +
|
|
' ~ ' +
|
|
moment(new Date()).subtract(0, 'days').format('YYYY');
|
|
this.lineChartData = lineChartData.shoppings;
|
|
break;
|
|
default:
|
|
console.log(val);
|
|
}
|
|
this.getData()
|
|
},
|
|
getTime() {
|
|
let _this = this;
|
|
this.timer = setInterval(function () {
|
|
_this.topDate = moment().format('YYYY.MM.DD');
|
|
let temp = moment().format('A-hh:mm').split('-');
|
|
_this.timeZone = temp[0];
|
|
_this.topTime = temp[1];
|
|
}, 1000);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-page::before {
|
|
background-image: url('~@/assets/img/home-bg.png');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: rotate(180deg);
|
|
}
|
|
.date-tabs {
|
|
padding-left: 40px;
|
|
padding-top: 20px;
|
|
position: relative;
|
|
}
|
|
:deep(.date-tabs) {
|
|
.el-tabs__header {
|
|
margin-bottom: 8px;
|
|
display: inline-block;
|
|
transform: translateY(-12px);
|
|
}
|
|
|
|
.el-tabs__content {
|
|
overflow: visible;
|
|
}
|
|
|
|
.el-tabs__item {
|
|
font-size: 18px;
|
|
color: #fff;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
line-height: 36px !important;
|
|
height: 36px;
|
|
}
|
|
.el-tabs__item.is-active {
|
|
color: #0b58ff;
|
|
}
|
|
}
|
|
.current-date {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
position: absolute;
|
|
left: 260px;
|
|
top: 14px;
|
|
}
|
|
.current-time {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
position: absolute;
|
|
right: 38px;
|
|
top: 14px;
|
|
}
|
|
.main-top {
|
|
width: 100%;
|
|
padding: 0 20px 0 40px;
|
|
.title {
|
|
position: absolute;
|
|
left: 34px;
|
|
top: 20px;
|
|
width: 180px;
|
|
font-size: 32px;
|
|
z-index: 10;
|
|
.title-inner {
|
|
position: absolute;
|
|
left: 42px;
|
|
top: 5px;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
.box {
|
|
background-color: #fff;
|
|
border-radius: 24px;
|
|
height: 192px;
|
|
padding: 40px 24px 32px 24px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 8px 8px 0 gray;
|
|
.num-box {
|
|
height: 120px;
|
|
padding-top: 26px;
|
|
text-align: center;
|
|
.num-style {
|
|
color: #000;
|
|
font-size: 40px;
|
|
}
|
|
.unit-style {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.shadow {
|
|
background: linear-gradient(90deg, #ffffff 80%, #f2f4f9 100%);
|
|
}
|
|
}
|
|
}
|
|
.main-bottom {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
.chart-wrapper {
|
|
margin-left: 10px;
|
|
height: 425px;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
box-shadow: 0 3px 3px 0 gray;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.home-page {
|
|
.el-progress-bar__inner {
|
|
background-image: url('~@/assets/img/home-progress-bg.png');
|
|
background-size: cover;
|
|
}
|
|
}
|
|
</style>
|