424 lines
11 KiB
Vue
424 lines
11 KiB
Vue
<template>
|
|
<div class="home-page">
|
|
<div class="date-tabs">
|
|
<!-- @tab-click="handleClick" -->
|
|
<el-tabs v-model="activeName" @tab-click="timedayChange" :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="detail">
|
|
<el-date-picker
|
|
v-model="timeday"
|
|
align="right"
|
|
type="date"
|
|
format="yyyy-MM-dd"
|
|
valueFormat="yyyy-MM-dd"
|
|
:clearable="false"
|
|
@change="timedayChange"
|
|
placeholder="选择日期"
|
|
:picker-options="pickerOptions"></el-date-picker>
|
|
</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';
|
|
import { getUserProfile } from '@/api/system/user';
|
|
|
|
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: '日',
|
|
user: '',
|
|
lineChartData: lineChartData.newVisitis,
|
|
homeData: {},
|
|
timeday: moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'),
|
|
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',
|
|
|
|
pickerOptions: {
|
|
disabledDate(time) {
|
|
return time.getTime() + 3600 * 1000 * 24 > Date.now();
|
|
},
|
|
shortcuts: [
|
|
{
|
|
text: '今天',
|
|
onClick(picker) {
|
|
picker.$emit('pick', new Date());
|
|
},
|
|
},
|
|
{
|
|
text: '昨天',
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
picker.$emit('pick', date);
|
|
},
|
|
},
|
|
{
|
|
text: '一周前',
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.$emit('pick', date);
|
|
},
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
},
|
|
beforeDestroy() {
|
|
},
|
|
methods: {
|
|
getData() {
|
|
let listQuery = {
|
|
//分页
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
|
|
startTime: this.timeday + ' 00:00:00',
|
|
};
|
|
getData(listQuery).then((response) => {
|
|
this.homeData = response.data;
|
|
for (let i in this.homeData) {
|
|
this.homeData[i] = Number(this.homeData[i]).toFixed(2);
|
|
}
|
|
});
|
|
},
|
|
timedayChange() {
|
|
let listQuery = {
|
|
//分页
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
|
|
startTime: this.timeday + ' 00:00:00',
|
|
};
|
|
getData(listQuery).then((response) => {
|
|
this.homeData = response.data;
|
|
for (let i in this.homeData) {
|
|
this.homeData[i] = Number(this.homeData[i]).toFixed(2);
|
|
}
|
|
});
|
|
},
|
|
goDetail() {
|
|
this.$router.push({ path: 'indexDetail' });
|
|
},
|
|
},
|
|
};
|
|
</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;
|
|
margin-bottom: 20px;
|
|
}
|
|
: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;
|
|
}
|
|
}
|
|
.detail {
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 260px;
|
|
top: 10px;
|
|
}
|
|
:deep(.detail) {
|
|
.el-input__inner {
|
|
background-color: transparent;
|
|
color: white;
|
|
}
|
|
}
|
|
// .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: calc(100vw * 20 / 1920);
|
|
}
|
|
}
|
|
.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: calc(100vw * 40 / 1920);
|
|
}
|
|
.unit-style {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-size: calc(100vw * 18 / 1920);
|
|
}
|
|
}
|
|
.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>
|