319 lines
6.9 KiB
Vue
319 lines
6.9 KiB
Vue
<template>
|
||
<Card title="材料统计">
|
||
<div class="contentBox">
|
||
<div class="person">
|
||
<div class="typeName">材料类别</div>
|
||
<div>
|
||
<el-select v-model="typeId" placeholder="请选择"
|
||
@change="checkTypes"
|
||
style="background:transparent;width: 100px;">
|
||
<el-option v-for="item in typesList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
|
||
</el-select>
|
||
</div>
|
||
<div style="margin-left: 20px;">
|
||
<el-date-picker
|
||
v-model="checkDate"
|
||
type="month"
|
||
value-format="yyyy-MM"
|
||
@change="checkTypes"
|
||
placeholder="选择月">
|
||
</el-date-picker>
|
||
</div>
|
||
</div>
|
||
<div class="carbonEmission">
|
||
<div class="photovoltaicOne">
|
||
<div class="textKwh">{{messageList.planValue||0}}t</div>
|
||
<div class="textBottom">计划用量</div>
|
||
</div>
|
||
<div class="photovoltaicTwo">
|
||
<div class="textKwh">{{messageList.passValue||0}}t</div>
|
||
<div class="textBottom">进场量</div>
|
||
</div>
|
||
<div class="photovoltaicThree">
|
||
<div class="textKwh">{{messageList.consumeValue||0}}t</div>
|
||
<div class="textBottom">消耗量</div>
|
||
</div>
|
||
<div class="photovoltaicFour">
|
||
<div class="textKwh">{{messageList.stockValue||0}}t</div>
|
||
<div class="textBottom">库存量</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import Card from '../components/Card.vue'
|
||
import { getMaterialTypeApi,//查询类别
|
||
getDetailsStatisticsApi,//查询年月
|
||
} from '@/assets/js/api/zhongjianFourth.js'
|
||
export default {
|
||
components: { Card },
|
||
data(){
|
||
return{
|
||
messageList:{},
|
||
sn:'',
|
||
typesList:[],
|
||
dateList:[],
|
||
typeValue:"",
|
||
checkDate:'',
|
||
typeId:'',
|
||
}
|
||
},
|
||
mounted(){
|
||
this.getList()
|
||
// this.getData()
|
||
},
|
||
methods:{
|
||
checkTypes(val) {
|
||
console.log("类型或者时间修改事件值 ：", val);
|
||
this.getData()
|
||
},
|
||
|
||
//查询材料类别
|
||
getList(){
|
||
this.sn = this.$store.state.projectSn
|
||
getMaterialTypeApi({ projectSn: this.sn }).then(res => {
|
||
this.typesList = res.result
|
||
if(res.result.length >= 1) {
|
||
this.typeId=res.result[0].id
|
||
this.checkDate = "2023-01"
|
||
this.getData()
|
||
}
|
||
|
||
console.log('查询材料类别',res);
|
||
})
|
||
},
|
||
//查询年月材料明细
|
||
getData(){
|
||
getDetailsStatisticsApi({
|
||
date:this.checkDate,
|
||
typeId:this.typeId
|
||
}).then(res=>{
|
||
console.log('查询年月',res);
|
||
this.dateList=res.result
|
||
this.messageList=res.result
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.car-count {
|
||
padding-top: 20px;
|
||
padding-left: 30px;
|
||
font-size: 18px;
|
||
color: rgba(110, 228, 240, 0.8500);
|
||
display: flex;
|
||
align-items: center;
|
||
span {
|
||
margin-left: 40px;
|
||
margin-right: 20px;
|
||
width: 140px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
background: url(../assets/images/sourse/bg-car-count.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.list {
|
||
box-sizing: border-box;
|
||
padding-top: 30px;
|
||
height: calc(100% - 120px);
|
||
}
|
||
.contentBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-top: 2%;
|
||
margin-left: 10px;
|
||
color: #fff;
|
||
.person {
|
||
margin-top: 4%;
|
||
margin-left: 37%;
|
||
height: 20px;
|
||
line-height: 25px;
|
||
display: flex;
|
||
.typeName{
|
||
width: 65px;
|
||
height: 40px;
|
||
font-weight: 500;
|
||
line-height: 40px;
|
||
margin: 0 20px 0 0;
|
||
}
|
||
}
|
||
|
||
.contentTop {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.img,
|
||
.contentBtn {
|
||
margin-right: 20px;
|
||
font-size: 14px;
|
||
.num1 {
|
||
color: #53a9b1;
|
||
font-size: 22px;
|
||
}
|
||
.num2 {
|
||
color: #f56c35;
|
||
font-size: 22px;
|
||
}
|
||
.text {
|
||
margin-top: 5px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
.img {
|
||
img {
|
||
height: 56px;
|
||
width: 56px;
|
||
}
|
||
}
|
||
}
|
||
.rowInfo {
|
||
color: #fff;
|
||
margin-top: 3%;
|
||
position: relative;
|
||
span {
|
||
font-size: 16px;
|
||
margin-left: 10px;
|
||
display: inline-block;
|
||
height: 25px;
|
||
line-height: 30px;
|
||
}
|
||
.leftlogo::after{
|
||
position: absolute;
|
||
content: url(../assets/images/common/icon_jt.png);
|
||
top: 10%;
|
||
width: 20px;
|
||
height: 20px;
|
||
left: 44%;
|
||
}
|
||
.leftnum{
|
||
display: inline-block;
|
||
margin-left: 40px;
|
||
}
|
||
}
|
||
.mintit{
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
padding-left: 20px;
|
||
margin-top: 5px;
|
||
position: relative;
|
||
span{
|
||
margin-left: 20px;
|
||
}
|
||
.blueline::after{
|
||
position: absolute;
|
||
content: '';
|
||
width: 30px;
|
||
height: 2px;
|
||
border-radius: 10%;
|
||
background-color: #5CE2F6;
|
||
top: 88%;
|
||
left: 13%;
|
||
}
|
||
}
|
||
|
||
.echarts {
|
||
width: 100%;
|
||
height: 55%;
|
||
display: flex;
|
||
.checkChart {
|
||
width: 78%;
|
||
height: 100%;
|
||
}
|
||
.right {
|
||
margin-top: 45px;
|
||
font-size: 12px;
|
||
.point {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
background-color: #fb6a2e;
|
||
margin-right: 15px;
|
||
}
|
||
.point2{
|
||
background-color: #65d3d8;
|
||
}
|
||
|
||
.num{
|
||
color: #fff;
|
||
margin: 5px 0px 30px 25px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.carbonEmission {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 30px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.photovoltaicOne {
|
||
width: 180px;
|
||
height: 130px;
|
||
background-image: url("../assets/images/carbon/kwh1.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
}
|
||
.photovoltaicTwo {
|
||
width: 180px;
|
||
height: 130px;
|
||
background-image: url("../assets/images/carbon/kwh2.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-left: 100px;
|
||
text-align: center;
|
||
}
|
||
.photovoltaicThree {
|
||
margin-top: 40px;
|
||
width: 180px;
|
||
height: 130px;
|
||
background-image: url("../assets/images/carbon/kwh4.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
}
|
||
.photovoltaicFour {
|
||
margin-top: 40px;
|
||
width: 180px;
|
||
height: 130px;
|
||
background-image: url("../assets/images/carbon/kwh3.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-left: 100px;
|
||
text-align: center;
|
||
|
||
}
|
||
.textKwh{
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
margin: 29px 0 0 0;
|
||
}
|
||
.textBottom{
|
||
font-size: 17px;
|
||
margin: 79px 0 0 0;
|
||
}
|
||
}
|
||
::v-deep .el-input--suffix .el-input__inner {
|
||
background: transparent !important;
|
||
color: #fff !important;
|
||
border: 1px solid #66D3D8 !important ;
|
||
z-index: 999;
|
||
}
|
||
::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
|
||
width: 160px;
|
||
}
|
||
</style>
|