fixed:首页调整
This commit is contained in:
parent
8beb8b143e
commit
285703dbad
|
|
@ -103,4 +103,13 @@ export default {
|
|||
);
|
||||
}
|
||||
},
|
||||
enstat2: {
|
||||
name: "全厂统计记录",
|
||||
req: async function(data){
|
||||
return await http.get(
|
||||
`${config.API_URL}/enm/enstat2/`,
|
||||
data
|
||||
);
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -13,117 +13,115 @@
|
|||
<el-row :gutter="6" style="padding: 10px;">
|
||||
|
||||
<el-col>
|
||||
<el-card header="产量及完成度" style="border-radius: 6px;">
|
||||
<el-card header="产量及完成度" style="border-radius: 5px;box-shadow: none;">
|
||||
<div class="itemsWrap">
|
||||
<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>
|
||||
<el-progress :percentage="90">
|
||||
<span class="item-percent">月完成度</span>
|
||||
<el-progress :percentage="90" :text-inside="true" :stroke-width="14">
|
||||
<span class="item-percent">90%</span>
|
||||
</el-progress>
|
||||
<div class="item-percent">90%</div>
|
||||
<!-- <div class="item-percent">90%</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
<el-progress :percentage="95">
|
||||
<span class="item-percent">月完成度</span>
|
||||
<el-progress :percentage="95" :text-inside="true" :stroke-width="14">
|
||||
<span class="item-percent">95%</span>
|
||||
</el-progress>
|
||||
<div class="item-percent">95%</div>
|
||||
<!-- <div class="item-percent">95%</div> -->
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<el-progress :percentage="98">
|
||||
<span class="item-percent">月完成度</span>
|
||||
<el-progress :percentage="98" :text-inside="true" :stroke-width="14">
|
||||
<span class="item-percent">98%</span>
|
||||
</el-progress>
|
||||
<div class="item-percent">98%</div>
|
||||
<!-- <div class="item-percent">98%</div> -->
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<el-progress :percentage="95">
|
||||
<span class="item-percent">月完成度</span>
|
||||
<el-progress :percentage="95" :text-inside="true" :stroke-width="14">
|
||||
<span class="item-percent">95%</span>
|
||||
</el-progress>
|
||||
<div class="item-percent">95%</div>
|
||||
<!-- <div class="item-percent">95%</div> -->
|
||||
</div>
|
||||
|
||||
<div style="display: inline-block;">
|
||||
<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>
|
||||
<el-progress :percentage="75" status="success">
|
||||
<span class="item-percent">年完成度</span>
|
||||
<el-progress :percentage="75" status="success" :text-inside="true" :stroke-width="14">
|
||||
<span class="item-percent">75%</span>
|
||||
</el-progress>
|
||||
<div class="item-percent">75%</div>
|
||||
<!-- <div class="item-percent">75%</div> -->
|
||||
</div>
|
||||
<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>
|
||||
<el-progress :percentage="70" status="success">
|
||||
<span class="item-percent">年完成度</span>
|
||||
<el-progress :percentage="70" status="success" :text-inside="true" :stroke-width="14">
|
||||
<span class="item-percent">70%</span>
|
||||
</el-progress>
|
||||
<div class="item-percent">70%</div>
|
||||
<!-- <div class="item-percent">70%</div> -->
|
||||
</div>
|
||||
<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>
|
||||
<el-progress :percentage="80" status="success">
|
||||
<span class="item-percent">年完成度</span>
|
||||
<el-progress :percentage="80" status="success" :text-inside="true" :stroke-width="14">
|
||||
<span class="item-percent">80%</span>
|
||||
</el-progress>
|
||||
<div class="item-percent">80%</div>
|
||||
<!-- <div class="item-percent">80%</div> -->
|
||||
</div>
|
||||
<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>
|
||||
<el-progress :percentage="75" status="success">
|
||||
<span class="item-percent">年完成度</span>
|
||||
<el-progress :percentage="75" status="success" :text-inside="true" :stroke-width="14">
|
||||
<span class="item-percent">75%</span>
|
||||
</el-progress>
|
||||
<div class="item-percent">75%</div>
|
||||
<!-- <div class="item-percent">75%</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</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="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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<div style="display: inline-block;">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -132,36 +130,36 @@
|
|||
</div>
|
||||
<div class="itemsWrap">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<div style="display: inline-block;">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -170,22 +168,22 @@
|
|||
</el-card>
|
||||
</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="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>
|
||||
<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-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>
|
||||
</div>
|
||||
|
|
@ -221,7 +219,6 @@
|
|||
//小组件分布，com取值:views/home/components 文件名
|
||||
copmsList: [
|
||||
['echarts'],
|
||||
// ['eventlist'],
|
||||
['progress'],
|
||||
['time'],
|
||||
['ver'],
|
||||
|
|
@ -229,81 +226,10 @@
|
|||
],
|
||||
},
|
||||
grid: [],
|
||||
myOption : {
|
||||
color: colors,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
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
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
year_s:'',
|
||||
month_s:'',
|
||||
yearData:[],
|
||||
monthData:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
|
@ -311,10 +237,18 @@
|
|||
},
|
||||
mounted() {
|
||||
this.$emit('on-mounted');
|
||||
this.showTime()
|
||||
setInterval(()=>{
|
||||
this.showTime()
|
||||
},1000)
|
||||
let that = this;
|
||||
var myDate = new Date();
|
||||
let year = myDate.getFullYear();
|
||||
let month = myDate.getMonth()+1;
|
||||
that.year_s = year;
|
||||
that.month_s = month;
|
||||
that.getYearData();
|
||||
that.getMonthData();
|
||||
// this.showTime();
|
||||
// setInterval(()=>{
|
||||
// this.showTime()
|
||||
// },1000)
|
||||
},
|
||||
computed: {
|
||||
allCompsList(){
|
||||
|
|
@ -341,10 +275,50 @@
|
|||
}
|
||||
},
|
||||
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(){
|
||||
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||||
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -384,14 +358,16 @@
|
|||
.items{
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
padding: 0 20px;
|
||||
margin: 10px 0 20px 0;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px dashed #cccccc;
|
||||
}
|
||||
.items:last-child{
|
||||
border-right: 0;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px 6px #eeeeee57;
|
||||
}
|
||||
// .items:last-child{
|
||||
// border-right: 0;
|
||||
// }
|
||||
.item-number{
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
|
|
@ -408,7 +384,7 @@
|
|||
line-height: 20px;
|
||||
}
|
||||
.item-percent{
|
||||
font-size: 9px;
|
||||
font-size: 12px;
|
||||
color: #b5c0ce;
|
||||
letter-spacing: .08px;
|
||||
text-align: left;
|
||||
|
|
|
|||
Loading…
Reference in New Issue