能源管理
This commit is contained in:
parent
e337c41e40
commit
d81dccac01
|
|
@ -25,7 +25,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
// title: '航玻生产管理系统',
|
||||
title: '玻璃生加工生产管理系统',
|
||||
title: '玻璃深加工生产管理系统',
|
||||
logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -459,6 +459,21 @@ export const asyncRoutes = [
|
|||
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/energyManage',
|
||||
// component: Layout,
|
||||
// redirect: '/energyManage/energy',
|
||||
// name: 'energyManage',
|
||||
// meta: { title: '能源管理', icon: 'materialStatistics' },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'energy',
|
||||
// name: 'energy',
|
||||
// component: () => import('@/views/energyManage/energy'),
|
||||
// meta: { title: '能源统计', icon: 'materialStatistics'}
|
||||
// },
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
path: '/personnel',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -376,8 +376,10 @@
|
|||
data:newData.xData,
|
||||
top: 'top',
|
||||
left: 'right',
|
||||
right:'5%',
|
||||
orient: "vertical",
|
||||
textStyle: {
|
||||
fontSize:10,
|
||||
color: "#556677", // 文字的颜色。
|
||||
}
|
||||
},
|
||||
|
|
@ -393,8 +395,8 @@
|
|||
{
|
||||
name: '人员到岗率',
|
||||
type: 'pie', // 设置图表类型为饼图
|
||||
radius: ['30%', '50%'], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
|
||||
center: ['50%', '45%'], //圆心位置
|
||||
radius: ['25%', '45%'], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
|
||||
center: ['50%', '35%'], //圆心位置
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 20,
|
||||
|
|
@ -1033,11 +1035,11 @@
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
let hei = document.getElementsByClassName('app-main')[0].clientHeight;
|
||||
let hei = document.getElementById('app').clientHeight;
|
||||
let heig = document.getElementsByClassName('dashboardTopCard')[0].clientHeight;
|
||||
let domHeight = ((hei - heig - 240) / 2);
|
||||
let domHeight = ((hei - heig - 165) / 2)-77;
|
||||
this.cardTabelHeight = domHeight;
|
||||
this.pieHeight=domHeight+'px';
|
||||
this.pieHeight=(domHeight-76)+'px';
|
||||
this.ganttHeight = domHeight;
|
||||
document.getElementById('chartColumn').style.height = domHeight + 'px';
|
||||
this.getUserList();//用户列表
|
||||
|
|
@ -1120,7 +1122,7 @@
|
|||
float: left;
|
||||
font-size: 14px;
|
||||
border-radius: 15px;
|
||||
padding: 30px 20px 30px 40px;
|
||||
padding: 30px 20px 30px 30px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,515 @@
|
|||
<template>
|
||||
<div class="app-container" style="background-color: #ffffff;">
|
||||
<div style="display: flex;">
|
||||
<div class="searchLabel">能源范围</div>
|
||||
<el-select
|
||||
v-model="showType"
|
||||
placeholder="能源范围"
|
||||
clearable
|
||||
style="width: 120px"
|
||||
class="filter-item"
|
||||
@change="handleFilter"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="searchLabel">时间类型</div>
|
||||
<el-select
|
||||
v-model="timeType"
|
||||
placeholder="时间类型"
|
||||
clearable
|
||||
style="width: 120px"
|
||||
class="filter-item"
|
||||
@change="handleFilter"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeOption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="searchLabel">开始时间</div>
|
||||
<el-date-picker
|
||||
v-model="startTime"
|
||||
:type="timeType"
|
||||
style="width: 120px"
|
||||
placeholder="开始时间">
|
||||
</el-date-picker>
|
||||
<div class="searchLabel">结束时间</div>
|
||||
<el-date-picker
|
||||
v-model="endTime"
|
||||
:type="timeType"
|
||||
style="width: 120px"
|
||||
placeholder="结束时间">
|
||||
</el-date-picker>
|
||||
<el-button
|
||||
class="filter-item searchBtn"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
>查询
|
||||
</el-button>
|
||||
</div>
|
||||
<el-row :gutter="20" v-if="showType=='全厂'">
|
||||
<el-col :span="12">
|
||||
<div style="border:1px solid #cccccc;border-radius: 10px;">
|
||||
<div class="chartsTitle">分项统计</div>
|
||||
<charts
|
||||
:id="chartId"
|
||||
:options="barOptions"
|
||||
:className="chartsName"
|
||||
:height="domHeight"
|
||||
width="100%"
|
||||
>
|
||||
</charts>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div style="border:1px solid #cccccc;border-radius: 10px;">
|
||||
<div class="chartsTitle">能耗占比分析(:kwh)</div>
|
||||
<Echart
|
||||
:options="pieOptions"
|
||||
id="pieChart"
|
||||
:height="domHeight"
|
||||
></Echart>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" v-else>
|
||||
<el-col :span="12">
|
||||
<div style="border:1px solid #cccccc;border-radius: 10px;">
|
||||
<div class="chartsTitle">分项统计</div>
|
||||
<charts
|
||||
:id="chartId1"
|
||||
:options="barOptions1"
|
||||
:className="chartsName"
|
||||
:height="domHeight"
|
||||
width="100%"
|
||||
>
|
||||
</charts>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div style="border:1px solid #cccccc;border-radius: 10px;">
|
||||
<div class="chartsTitle">能耗占比分析(:kwh)</div>
|
||||
<Echart
|
||||
:options="pieOptions1"
|
||||
id="pieChart1"
|
||||
:height="domHeight"
|
||||
></Echart>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="5" style="margin-top: 5px;">
|
||||
<el-col style="border:1px solid #cccccc;border-radius: 10px;">
|
||||
<!-- <el-table
|
||||
small
|
||||
v-loading="orderLoading"
|
||||
:data="orderList.results"
|
||||
border
|
||||
fit
|
||||
stripe
|
||||
size="mini"
|
||||
highlight-current-row
|
||||
height="100"
|
||||
v-el-height-adaptive-table="{bottomOffset: 42}"
|
||||
>
|
||||
<el-table-column label="" width="120" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.number }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品名称" width="160" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.product_.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品数量">
|
||||
<template slot-scope="scope">{{ scope.row.count }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="已交货数量">
|
||||
<template slot-scope="scope">{{ scope.row.delivered_count }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="交货日期">
|
||||
<template slot-scope="scope">{{ scope.row.delivery_date }}</template>
|
||||
</el-table-column>
|
||||
</el-table> -->
|
||||
<table class="tableData">
|
||||
<th class="tableTh">
|
||||
<td class="thtd" v-for="item in thLists">{{ item }}</td>
|
||||
</th>
|
||||
<tr class="tableTr" v-for="itemtr in trList">
|
||||
<td class="trtd" v-for="itemtd in itemtr">{{ itemtd }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import charts from './../statistics/charts.vue'
|
||||
import Echart from '@/components/echart';
|
||||
import { getOrderList } from "@/api/sam";
|
||||
export default {
|
||||
name: "progressStatistics",
|
||||
components: {
|
||||
Echart,
|
||||
charts,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartsName:'barChart',
|
||||
chartId:'chart1',
|
||||
chartId1:'chart2',
|
||||
pieOptions: {},
|
||||
pieOptions1: {},
|
||||
barOptions: {},
|
||||
barOptions1: {},
|
||||
showType:'全厂',
|
||||
options:['全厂','车间工序'],
|
||||
timeType:'month',
|
||||
timeOption:[{id:'month',name:'月'},{id:'year',name:'年'}],
|
||||
orderList: {
|
||||
count: 0,
|
||||
results:[]
|
||||
},
|
||||
orderQuery: {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
},
|
||||
planQuery: {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
},
|
||||
startTime:'',
|
||||
endTime:'',
|
||||
thLists:['名称','2022-07','2022-08','2022-09','2022-10','2022-11','2022-12','2023-01'],
|
||||
trList:[
|
||||
['办公用电','736','235','260','402','401','424','431'],
|
||||
['照明','387','192','180','340','377','345','270'],
|
||||
['空调','10362','3430','706','468','589','2920','3031'],
|
||||
['动力','1573','360','919','189','410','187','741'],
|
||||
|
||||
],
|
||||
cdata: {
|
||||
xData: ["办公用电", "照明", "空调", "动力"],
|
||||
seriesData: [
|
||||
{value: 4500, name: "办公用电"},
|
||||
{value: 4000, name: "照明"},
|
||||
{value: 31000, name: "空调"},
|
||||
{value: 7000, name: "动力"},
|
||||
]
|
||||
},
|
||||
cdata1: {
|
||||
xData: ["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
|
||||
seriesData: [
|
||||
{value: 4000, name: "冷加工"},
|
||||
{value: 7000, name: "热弯"},
|
||||
{value: 10000, name: "钢化"},
|
||||
{value: 4500, name: "镀膜"},
|
||||
{value: 4000, name: "夹层"},
|
||||
{value: 1000, name: "包边"},
|
||||
{value: 1500, name: "装框"},
|
||||
]
|
||||
},
|
||||
domHeight:'300px',
|
||||
xAxisbar:["办公用电", "照明", "空调", "动力"],
|
||||
barData: [4500, 4000, 31000, 7000],
|
||||
xAxisbar1:["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
|
||||
barData1: [4000, 7000, 10000, 4500, 4000, 1000, 1500],
|
||||
|
||||
planLoading: false,
|
||||
orderLoading: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler(newData) {
|
||||
this.pieOptions = {
|
||||
color: [
|
||||
"#5ab1ef",
|
||||
"#ffb980",
|
||||
"#2ec7c9",
|
||||
"#b6a2de",
|
||||
],
|
||||
legend: {
|
||||
data:newData.xData,
|
||||
top: 'top',
|
||||
left: 'left',
|
||||
orient: "vertical",
|
||||
textStyle: {
|
||||
color: "#556677", // 文字的颜色。
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
toolbox: {
|
||||
show: true
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: '能耗占比分析(:kwh)',
|
||||
type: 'pie', // 设置图表类型为饼图
|
||||
radius: '65%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
|
||||
center: ['50%', '50%'], //圆心位置
|
||||
data:newData.seriesData
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
cdata1: {
|
||||
handler(newData) {
|
||||
this.pieOptions1 = {
|
||||
color: [
|
||||
"#5ab1ef",
|
||||
"#ffb980",
|
||||
"#2ec7c9",
|
||||
"#b6a2de",
|
||||
"#5ab1ef",
|
||||
"#ffb980",
|
||||
"#2ec7c9",
|
||||
"#b6a2de",
|
||||
],
|
||||
legend: {
|
||||
data:newData.xData,
|
||||
top: 'top',
|
||||
left: 'left',
|
||||
orient: "vertical",
|
||||
textStyle: {
|
||||
color: "#556677", // 文字的颜色。
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
toolbox: {
|
||||
show: true
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: '能耗占比分析',
|
||||
type: 'pie', // 设置图表类型为饼图
|
||||
radius: '65%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
|
||||
center: ['50%', '50%'], //圆心位置
|
||||
data:newData.seriesData
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
methods: {
|
||||
handleFilter(){
|
||||
|
||||
},
|
||||
getList() {
|
||||
this.orderLoading = true;
|
||||
getOrderList(this.orderQuery).then((response) => {
|
||||
if (response.data) {
|
||||
this.orderList = response.data;
|
||||
}
|
||||
this.orderLoading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let hei = document.getElementsByClassName('app-main')[0].clientHeight;
|
||||
this.domHeight =( hei- 60)/2+'px';
|
||||
this.getList();
|
||||
//全场
|
||||
this.barOptions ={
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
let color = params.color;//图例颜色
|
||||
let htmlStr = '<div>';
|
||||
htmlStr += params.name + '<br/>';
|
||||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||||
htmlStr += params.seriesName + '：' + params.value + 'kwh';
|
||||
htmlStr += '</div>';
|
||||
return htmlStr;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //去掉X轴分割线
|
||||
},
|
||||
data: this.xAxisbar,
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,//y轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false//Y轴刻度线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333333'//Y轴文本颜色
|
||||
},
|
||||
splitLine: {
|
||||
show: true, //Y轴分割线
|
||||
lineStyle: {
|
||||
color: '#dddddd'//Y轴分割线颜色
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '分项统计',
|
||||
type: 'bar',
|
||||
data: this.barData,
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
formatter: '{c}',//显示百分号
|
||||
textStyle: { //数值样式
|
||||
color: 'black',//字体颜色
|
||||
fontSize: 10//字体大小
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
}]
|
||||
}
|
||||
//车间
|
||||
this.barOptions1 ={
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
let color = params.color;//图例颜色
|
||||
let htmlStr = '<div>';
|
||||
htmlStr += params.name + '<br/>';
|
||||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||||
htmlStr += params.seriesName + '：' + params.value ;
|
||||
htmlStr += '</div>';
|
||||
return htmlStr;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //去掉X轴分割线
|
||||
},
|
||||
data: this.xAxisbar1,
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,//y轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false//Y轴刻度线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333333'//Y轴文本颜色
|
||||
},
|
||||
splitLine: {
|
||||
show: true, //Y轴分割线
|
||||
lineStyle: {
|
||||
color: '#dddddd'//Y轴分割线颜色
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '分项统计',
|
||||
type: 'bar',
|
||||
// barWidth: 20,
|
||||
data: this.barData1,
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
formatter: '{c}',//显示百分号
|
||||
textStyle: { //数值样式
|
||||
color: 'black',//字体颜色
|
||||
fontSize: 10//字体大小
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
}]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.searchLabel{
|
||||
height:36px;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
color:#777;
|
||||
margin-left: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.searchBtn{
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.chartsTitle{
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.tableData{
|
||||
width: 100%;
|
||||
}
|
||||
.tableTh{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
.thtd{
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.tableTr{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.trtd{
|
||||
flex: 1;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue