347 lines
10 KiB
Vue
347 lines
10 KiB
Vue
<template>
|
||
<div :class="['widgets-home', customizing?'customizing':'']" ref="main">
|
||
<div class="widgets-content">
|
||
<div class="widgets" ref="widgets">
|
||
<div class="widgets-wrapper">
|
||
<!-- <el-card shadow="hover" class="item-background" style="wdith:100%;padding: 0 20px 0 10px;">
|
||
<div class="time">
|
||
<div>{{ day }}</div>
|
||
<text>当前时间</text>
|
||
<h3>{{ time }}</h3>
|
||
</div>
|
||
</el-card> -->
|
||
<el-row :gutter="6" style="padding: 10px;">
|
||
<el-col>
|
||
<el-card header="成本统计" style="border-radius: 10px;">
|
||
<div class="itemsWrap">
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">月电石渣成本</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">月熟料成</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">月生料成本</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">月水泥成本</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col>
|
||
<el-card header="能耗" style="border-radius: 10px;">
|
||
<div class="itemsWrap">
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">熟料月综合电耗</div>
|
||
<div class="item-percent">1208/35620(年度比)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">熟料月单位标煤耗</div>
|
||
<div class="item-percent">1208/35620(年度比)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">熟料月综合能耗</div>
|
||
<div class="item-percent">1208/35620(年度比)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">水泥月综合能耗</div>
|
||
<div class="item-percent">1208/35620(年度比)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">月电石渣分布电耗</div>
|
||
<div class="item-percent">1208/35620(年度比)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">月生料分布电耗</div>
|
||
<div class="item-percent">1208/35620(年度比)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">月熟料分布电耗</div>
|
||
<div class="item-percent">1208/35620(年度比)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">月水泥粉磨分布电耗</div>
|
||
<div class="item-percent">1208/35620(年度比)</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col>
|
||
<el-card header="产量及完成度" style="border-radius: 10px;">
|
||
<div class="itemsWrap">
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">月电石渣产量</div>
|
||
<div class="item-percent">99%(完成度)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">本年累计电石渣产量</div>
|
||
<div class="item-percent">99%(完成度)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">熟料月单位标煤耗</div>
|
||
<div class="item-percent">100%(完成度)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">本年累计生料产量</div>
|
||
<div class="item-percent">100%(完成度)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">熟料月综合能耗</div>
|
||
<div class="item-percent">100%(完成度)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">本年累计熟料产量</div>
|
||
<div class="item-percent">100%(完成度)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">水泥月综合能耗</div>
|
||
<div class="item-percent">100%(完成度)</div>
|
||
</div>
|
||
<div class="items" style="width: 200px;text-align: center;">
|
||
<div class="item-number">1208</div>
|
||
<div class="item-name">本年累计水泥产量</div>
|
||
<div class="item-percent">100%(完成度)</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import scEcharts from "@/components/scEcharts";
|
||
import draggable from 'vuedraggable'
|
||
import allComps from './components'
|
||
const colors = ['#5470C6', '#91CC75', '#EE6666'];
|
||
export default {
|
||
components: {
|
||
draggable,
|
||
scEcharts
|
||
},
|
||
data() {
|
||
return {
|
||
time: '',
|
||
day: '',
|
||
customizing: false,
|
||
allComps: allComps,
|
||
selectLayout: [],
|
||
defaultGrid: {
|
||
//默认分栏数量和宽度
|
||
layout: [8, 8, 12,8,4,12],
|
||
//小组件分布，com取值:views/home/components 文件名
|
||
copmsList: [
|
||
['echarts'],
|
||
// ['eventlist'],
|
||
['progress'],
|
||
['time'],
|
||
['ver'],
|
||
|
||
],
|
||
},
|
||
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
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
created(){
|
||
this.grid = this.$TOOL.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid))
|
||
},
|
||
mounted() {
|
||
this.$emit('on-mounted');
|
||
this.showTime()
|
||
setInterval(()=>{
|
||
this.showTime()
|
||
},1000)
|
||
},
|
||
computed: {
|
||
allCompsList(){
|
||
var allCompsList = []
|
||
for(var key in this.allComps){
|
||
allCompsList.push({
|
||
key: key,
|
||
title: allComps[key].title,
|
||
icon: allComps[key].icon,
|
||
description: allComps[key].description
|
||
})
|
||
}
|
||
var myCopmsList = this.grid.copmsList.reduce(function(a, b){return a.concat(b)})
|
||
for(let comp of allCompsList){
|
||
const _item = myCopmsList.find((item)=>{return item === comp.key})
|
||
if(_item){
|
||
comp.disabled = true
|
||
}
|
||
}
|
||
return allCompsList
|
||
},
|
||
nowCompsList(){
|
||
return this.grid.copmsList.reduce(function(a, b){return a.concat(b)})
|
||
}
|
||
},
|
||
methods: {
|
||
showTime(){
|
||
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.item-background {background: linear-gradient(to right, #8E54E9, #5683ec);color: #fff;}
|
||
.time{display: flex;justify-content: space-between;}
|
||
.time p {font-size: 14px;margin-top: 13px;opacity: 0.8;}
|
||
.numberCard{
|
||
padding: 5px;
|
||
text-align: left;
|
||
color: #979797;
|
||
border-radius: 5px;
|
||
margin-left: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.costCard{
|
||
width: 100%;
|
||
padding: 5px;
|
||
text-align: left;
|
||
color: #979797;
|
||
border-radius: 5px;
|
||
}
|
||
.itemNumber{
|
||
font-size: 30px;
|
||
color: #46d388;
|
||
text-align: center;
|
||
|
||
}
|
||
.itemNumber.yearNumber{
|
||
color: #7f9eff;
|
||
}
|
||
.itemsWrap{
|
||
display: flex;
|
||
padding: 20px;
|
||
}
|
||
.items{
|
||
border-right: 1px dashed #cccccc;
|
||
}
|
||
.items:last-child{
|
||
border-right: 0;
|
||
}
|
||
.item-number{
|
||
font-weight: 600;
|
||
font-size: 24px;
|
||
color: #1e2126;
|
||
letter-spacing: .1px;
|
||
text-align: center;
|
||
line-height: 36px;
|
||
}
|
||
.item-name{
|
||
font-size: 14px;
|
||
color: #4e5b71;
|
||
letter-spacing: .1px;
|
||
text-align: center;
|
||
line-height: 20px;
|
||
}
|
||
.item-percent{
|
||
font-size: 9px;
|
||
color: #b5c0ce;
|
||
letter-spacing: .08px;
|
||
text-align: center;
|
||
line-height: 12px;
|
||
}
|
||
</style>
|