fixed:首页调整

This commit is contained in:
shijing 2023-08-18 17:15:53 +08:00
parent 8beb8b143e
commit 285703dbad
2 changed files with 134 additions and 149 deletions

View File

@ -103,4 +103,13 @@ export default {
); );
} }
}, },
enstat2: {
name: "全厂统计记录",
req: async function(data){
return await http.get(
`${config.API_URL}/enm/enstat2/`,
data
);
}
},
} }

View File

@ -13,117 +13,115 @@
<el-row :gutter="6" style="padding: 10px;"> <el-row :gutter="6" style="padding: 10px;">
<el-col> <el-col>
<el-card header="产量及完成度" style="border-radius: 6px;"> <el-card header="产量及完成度" style="border-radius: 5px;box-shadow: none;">
<div class="itemsWrap"> <div class="itemsWrap">
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.电石渣">{{ monthData.电石渣.total_production }}</div>
<div class="item-name">月电石渣产量</div> <div class="item-name">月电石渣产量</div>
<el-progress :percentage="90"> <el-progress :percentage="90" :text-inside="true" :stroke-width="14">
<span class="item-percent">月完成度</span> <span class="item-percent">90%</span>
</el-progress> </el-progress>
<div class="item-percent">90%</div> <!-- <div class="item-percent">90%</div> -->
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.原料磨">{{ monthData.原料磨.total_production }}</div>
<div class="item-name">月生料产量</div> <div class="item-name">月生料产量</div>
<el-progress :percentage="95"> <el-progress :percentage="95" :text-inside="true" :stroke-width="14">
<span class="item-percent">月完成度</span> <span class="item-percent">95%</span>
</el-progress> </el-progress>
<div class="item-percent">95%</div> <!-- <div class="item-percent">95%</div> -->
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.回转窑">{{ monthData.回转窑.total_production }}</div>
<div class="item-name">月熟料产量</div> <div class="item-name">月熟料产量</div>
<el-progress :percentage="98"> <el-progress :percentage="98" :text-inside="true" :stroke-width="14">
<span class="item-percent">月完成度</span> <span class="item-percent">98%</span>
</el-progress> </el-progress>
<div class="item-percent">98%</div> <!-- <div class="item-percent">98%</div> -->
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.水泥磨">{{ monthData.水泥磨.total_production }}</div>
<div class="item-name">月水泥产量</div> <div class="item-name">月水泥产量</div>
<el-progress :percentage="95"> <el-progress :percentage="95" :text-inside="true" :stroke-width="14">
<span class="item-percent">月完成度</span> <span class="item-percent">95%</span>
</el-progress> </el-progress>
<div class="item-percent">95%</div> <!-- <div class="item-percent">95%</div> -->
</div> </div>
<div style="display: inline-block;"> <div style="display: inline-block;">
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.电石渣">{{ yearData.电石渣.total_production }}</div>
<div class="item-name">本年累计电石渣产量</div> <div class="item-name">本年累计电石渣产量</div>
<el-progress :percentage="75" status="success"> <el-progress :percentage="75" status="success" :text-inside="true" :stroke-width="14">
<span class="item-percent">年完成度</span> <span class="item-percent">75%</span>
</el-progress> </el-progress>
<div class="item-percent">75%</div> <!-- <div class="item-percent">75%</div> -->
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.原料磨">{{ yearData.原料磨.total_production }}</div>
<div class="item-name">本年累计生料产量</div> <div class="item-name">本年累计生料产量</div>
<el-progress :percentage="70" status="success"> <el-progress :percentage="70" status="success" :text-inside="true" :stroke-width="14">
<span class="item-percent">年完成度</span> <span class="item-percent">70%</span>
</el-progress> </el-progress>
<div class="item-percent">70%</div> <!-- <div class="item-percent">70%</div> -->
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.回转窑">{{ yearData.回转窑.total_production }}</div>
<div class="item-name">本年累计熟料产量</div> <div class="item-name">本年累计熟料产量</div>
<el-progress :percentage="80" status="success"> <el-progress :percentage="80" status="success" :text-inside="true" :stroke-width="14">
<span class="item-percent">年完成度</span> <span class="item-percent">80%</span>
</el-progress> </el-progress>
<div class="item-percent">80%</div> <!-- <div class="item-percent">80%</div> -->
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.水泥磨">{{ yearData.水泥磨.total_production }}</div>
<div class="item-name">本年累计水泥产量</div> <div class="item-name">本年累计水泥产量</div>
<el-progress :percentage="75" status="success"> <el-progress :percentage="75" status="success" :text-inside="true" :stroke-width="14">
<span class="item-percent">年完成度</span> <span class="item-percent">75%</span>
</el-progress> </el-progress>
<div class="item-percent">75%</div> <!-- <div class="item-percent">75%</div> -->
</div> </div>
</div> </div>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col> <el-col>
<el-card header="能耗" style="border-radius: 6px;"> <el-card header="能耗" style="border-radius: 5px;box-shadow: none;">
<div class="itemsWrap"> <div class="itemsWrap">
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.电石渣">{{ monthData.电石渣.elec_consume_unit }}</div>
<div class="item-name">月电石渣分布电耗</div> <div class="item-name">月电石渣分布电耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.原料磨">{{ monthData.原料磨.elec_consume_unit }}</div>
<div class="item-name">月生料分布电耗</div> <div class="item-name">月生料分布电耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.回转窑">{{ monthData.回转窑.elec_consume_unit }}</div>
<div class="item-name">月熟料分布电耗</div> <div class="item-name">月熟料分布电耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.回转窑">{{ monthData.回转窑.coal_consume_unit }}</div>
<div class="item-name">熟料月单位标煤耗</div> <div class="item-name">熟料月单位标煤耗</div>
</div> </div>
<div style="display: inline-block;"> <div style="display: inline-block;">
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.回转窑">{{ monthData.回转窑.celec_consume_unit }}</div>
<div class="item-name">熟料月综合电耗</div> <div class="item-name">熟料月综合电耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.回转窑">{{ monthData.回转窑.cen_consume_unit }}</div>
<div class="item-name">熟料月综合能耗</div> <div class="item-name">熟料月综合能耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.水泥磨">{{ monthData.水泥磨.elec_consume_unit }}</div>
<div class="item-name">月水泥粉磨分布电耗</div> <div class="item-name">月水泥粉磨分布电耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.水泥磨">{{ monthData.水泥磨.cen_consume_unit }}</div>
<div class="item-name">水泥月综合能耗</div> <div class="item-name">水泥月综合能耗</div>
</div> </div>
@ -132,36 +130,36 @@
</div> </div>
<div class="itemsWrap"> <div class="itemsWrap">
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.电石渣">{{ yearData.电石渣.elec_consume_unit }}</div>
<div class="item-name">本年度电石渣分布电耗</div> <div class="item-name">本年度电石渣分布电耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.原料磨">{{ yearData.原料磨.elec_consume_unit }}</div>
<div class="item-name">本年度生料分布电耗</div> <div class="item-name">本年度生料分布电耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.回转窑">{{ yearData.回转窑.elec_consume_unit }}</div>
<div class="item-name">本年度熟料分布电耗</div> <div class="item-name">本年度熟料分布电耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.回转窑">{{ yearData.回转窑.coal_consume_unit }}</div>
<div class="item-name">本年度熟料单位标煤耗</div> <div class="item-name">本年度熟料单位标煤耗</div>
</div> </div>
<div style="display: inline-block;"> <div style="display: inline-block;">
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.回转窑">{{ yearData.回转窑.celec_consume_unit }}</div>
<div class="item-name">本年度熟料综合电耗</div> <div class="item-name">本年度熟料综合电耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.回转窑">{{ yearData.回转窑.cen_consume_unit }}</div>
<div class="item-name">本年度熟料综合能耗</div> <div class="item-name">本年度熟料综合能耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.水泥磨">{{ yearData.水泥磨.elec_consume_unit }}</div>
<div class="item-name">本年度水泥粉磨分布电耗</div> <div class="item-name">本年度水泥粉磨分布电耗</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="yearData.水泥磨">{{ yearData.水泥磨.cen_consume_unit }}</div>
<div class="item-name">本年度水泥综合能耗</div> <div class="item-name">本年度水泥综合能耗</div>
</div> </div>
</div> </div>
@ -170,22 +168,22 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col> <el-col>
<el-card header="成本统计" style="border-radius: 6px;"> <el-card header="成本统计" style="border-radius: 5px;box-shadow: none;">
<div class="itemsWrap"> <div class="itemsWrap">
<div class="items"> <div class="items">
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.电石渣">{{ monthData.电石渣.production_cost_unit }}</div>
<div class="item-name">月电石渣成本</div> <div class="item-name">月电石渣成本</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.原料磨">{{ monthData.原料磨.production_cost_unit }}</div>
<div class="item-name">月熟料成</div>
</div>
<div class="items" >
<div class="item-number">1208</div>
<div class="item-name">月生料成本</div> <div class="item-name">月生料成本</div>
</div> </div>
<div class="items" > <div class="items" >
<div class="item-number">1208</div> <div class="item-number" v-if="monthData.回转窑">{{ monthData.回转窑.production_cost_unit }}</div>
<div class="item-name">月熟料成本</div>
</div>
<div class="items" >
<div class="item-number" v-if="monthData.水泥磨">{{ monthData.水泥磨.production_cost_unit }}</div>
<div class="item-name">月水泥成本</div> <div class="item-name">月水泥成本</div>
</div> </div>
</div> </div>
@ -221,7 +219,6 @@
//com:views/home/components //com:views/home/components
copmsList: [ copmsList: [
['echarts'], ['echarts'],
// ['eventlist'],
['progress'], ['progress'],
['time'], ['time'],
['ver'], ['ver'],
@ -229,81 +226,10 @@
], ],
}, },
grid: [], grid: [],
myOption : { year_s:'',
color: colors, month_s:'',
tooltip: { yearData:[],
trigger: 'axis', monthData:[],
axisPointer: {
type: 'cross'
}
},
grid: {
top:'10%',
left:'5%',
right: '5%',
bottom:'6%'
},
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
legend: {
icon: "stack",
data: ['年消耗', '月消耗'],
orient: 'horizontal',
x: 'center',
y: '2',
},
xAxis: [
{
axisLabel: {
rotate: 45,
interval: 0
},
type: 'category',
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: ['熟料综合电耗', '熟料单位标煤耗', '熟料综合能耗', '水泥综合能耗', '电石渣分布电耗', '生料分布电耗', '熟料分布电耗', '水泥粉磨分布电耗', '水泥包装分布电耗']
}
],
yAxis: {
type: 'value',
name: 'KW.h',
position: 'left',
offset:5,
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa'
}
},
axisLabel: {
formatter: '{value}'
}
},
series: [
{
name: '年消耗',
type: 'bar',
data: [
100,150,200,150,120,110,180,200,190
]
},
{
name: '月消耗',
type: 'bar',
data: [
10,15,20,15,12,11,18,20,19
]
}
]
}
} }
}, },
created(){ created(){
@ -311,10 +237,18 @@
}, },
mounted() { mounted() {
this.$emit('on-mounted'); this.$emit('on-mounted');
this.showTime() let that = this;
setInterval(()=>{ var myDate = new Date();
this.showTime() let year = myDate.getFullYear();
},1000) let month = myDate.getMonth()+1;
that.year_s = year;
that.month_s = month;
that.getYearData();
that.getMonthData();
// this.showTime();
// setInterval(()=>{
// this.showTime()
// },1000)
}, },
computed: { computed: {
allCompsList(){ allCompsList(){
@ -341,10 +275,50 @@
} }
}, },
methods: { methods: {
getYearData(){
let that = this;
let obj = {};
obj.year_s = this.year_s;
obj.type = 'year_s';
obj.page = 0;
this.$API.enm.enstat.req(obj).then((res) => {
debugger;
console.log('getYearData:')
console.log(res)
let yearData = {};
res.forEach(item => {
let label = item.mgroup_name;
yearData[label] = item;
});
console.log(yearData)
that.yearData = yearData;
})
},
getMonthData(){
let that = this;
let obj = {};
obj.year_s = this.year_s;
obj.month_s = this.month_s;
obj.type = 'month_s';
obj.page = 0;
that.$API.enm.enstat.req(obj).then((res) => {
console.log('getMonthData:')
console.log(res)
let monthData = {};
res.forEach(item => {
let label = item.mgroup_name;
monthData[label] = item;
});
console.log(monthData.电石渣)
console.log(monthData.电石渣.total_production)
that.monthData = monthData;
})
},
showTime(){ showTime(){
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss') this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日') this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
} },
} }
} }
</script> </script>
@ -384,14 +358,16 @@
.items{ .items{
display: inline-block; display: inline-block;
width: 200px; width: 200px;
padding: 0 20px; padding: 20px;
margin: 10px 0 20px 0; margin: 10px;
box-sizing: border-box; box-sizing: border-box;
border-right: 1px dashed #cccccc; border: 1px solid #cccccc;
} border-radius: 10px;
.items:last-child{ box-shadow: 0 0 10px 6px #eeeeee57;
border-right: 0;
} }
// .items:last-child{
// border-right: 0;
// }
.item-number{ .item-number{
font-weight: 600; font-weight: 600;
font-size: 24px; font-size: 24px;
@ -408,7 +384,7 @@
line-height: 20px; line-height: 20px;
} }
.item-percent{ .item-percent{
font-size: 9px; font-size: 12px;
color: #b5c0ce; color: #b5c0ce;
letter-spacing: .08px; letter-spacing: .08px;
text-align: left; text-align: left;