407 lines
9.8 KiB
Vue
407 lines
9.8 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-main>
|
||
<el-container>
|
||
<el-header style="height: 400px; padding: 0">
|
||
<el-container>
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<div class="left-panel">
|
||
时间段1：
|
||
<el-date-picker
|
||
v-model="query.searchData"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="YYYY-MM-DD"
|
||
@change="getList1"
|
||
/>
|
||
<el-button
|
||
type="primary"
|
||
@click="exportExcel()"
|
||
:loading="exportLoading"
|
||
>导出xlsx
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-header>
|
||
<el-main style="background: #ffffff">
|
||
<div
|
||
ref="print"
|
||
id="myReport"
|
||
class="printContainer"
|
||
>
|
||
<table
|
||
border="1"
|
||
width="1200"
|
||
cellspacing="0"
|
||
:key="timeStamp"
|
||
id="myTable"
|
||
class="myTable"
|
||
>
|
||
<thead class="myTableHead">
|
||
<tr>
|
||
<th>工段</th>
|
||
<th>总产量</th>
|
||
<th>台时产量</th>
|
||
<th>运转时间</th>
|
||
<th>运转率</th>
|
||
<th>单位产品电耗</th>
|
||
<th>单位产品综合电耗</th>
|
||
<th>单位产品标煤耗</th>
|
||
<th>单位产品综合能耗</th>
|
||
<th>吨熟料发电量</th>
|
||
</tr>
|
||
</thead>
|
||
<tr
|
||
v-for="(item, index) in tableDatas1"
|
||
:key="index"
|
||
>
|
||
<td>{{ item.mgroup_name }}</td>
|
||
<td>{{ item.total_production }}</td>
|
||
<td>{{ item.production_hour }}</td>
|
||
<td>{{ item.run_hour }}</td>
|
||
<td>{{ item.run_rate }}</td>
|
||
<td>{{ item.elec_consume_unit }}</td>
|
||
<td>{{ item.celec_consume_unit }}</td>
|
||
<td>{{ item.coal_consume_unit }}</td>
|
||
<td>{{ item.cen_consume_unit }}</td>
|
||
<td>{{ item.production_elec_unit }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
</el-header>
|
||
<el-main style="padding: 8px 0 0 0">
|
||
<el-container>
|
||
<el-header>
|
||
<div class="left-panel">
|
||
时间2：
|
||
<el-date-picker
|
||
v-model="query.searchData2"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="YYYY-MM-DD"
|
||
@change="getList2"
|
||
/>
|
||
<el-button type="primary" @click="comparas"
|
||
>对比
|
||
</el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main style="background: #ffffff">
|
||
<div
|
||
ref="print"
|
||
id="myReport"
|
||
class="printContainer"
|
||
>
|
||
<table
|
||
border="1"
|
||
width="1200"
|
||
cellspacing="0"
|
||
:key="timeStamp"
|
||
id="myTable"
|
||
class="myTable"
|
||
>
|
||
<thead class="myTableHead">
|
||
<tr>
|
||
<th>工段</th>
|
||
<th>总产量</th>
|
||
<th>台时产量</th>
|
||
<th>运转时间</th>
|
||
<th>运转率</th>
|
||
<th>单位产品电耗</th>
|
||
<th>单位产品综合电耗</th>
|
||
<th>单位产品标煤耗</th>
|
||
<th>单位产品综合能耗</th>
|
||
<th>吨熟料发电量</th>
|
||
</tr>
|
||
</thead>
|
||
<tr
|
||
v-for="(item, index) in tableDatas2"
|
||
:key="index"
|
||
>
|
||
<td>{{ item.mgroup_name }}</td>
|
||
<td>{{ item.total_production }}</td>
|
||
<td>{{ item.production_hour }}</td>
|
||
<td>{{ item.run_hour }}</td>
|
||
<td>{{ item.run_rate }}</td>
|
||
<td>{{ item.elec_consume_unit }}</td>
|
||
<td>{{ item.celec_consume_unit }}</td>
|
||
<td>{{ item.coal_consume_unit }}</td>
|
||
<td>{{ item.cen_consume_unit }}</td>
|
||
<td>{{ item.production_elec_unit }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
<el-dialog title="对比" v-model="dialogVisible" width="1224">
|
||
<el-select
|
||
v-model="mgroupName"
|
||
placeholder="工段"
|
||
@change="mgroupChange"
|
||
>
|
||
<el-option
|
||
v-for="item in mgroups"
|
||
:key="item"
|
||
:label="item"
|
||
:value="item"
|
||
></el-option>
|
||
</el-select>
|
||
<div id="myChart" style="width: 1200px; height: 400px"></div>
|
||
</el-dialog>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import mockData from "./mock.json";
|
||
import mockData2 from "./mock2.json";
|
||
const colors = ["#647bfe", "#91CC75"];
|
||
export default {
|
||
data() {
|
||
return {
|
||
mgroupName: "",
|
||
timeStamp: 0,
|
||
mockData: mockData,
|
||
mockData2: mockData2,
|
||
query: {
|
||
searchData: "",
|
||
page: 0,
|
||
type: "month_st",
|
||
mgroup: "",
|
||
},
|
||
tableDatas1: [],
|
||
tableDatas2: [],
|
||
chartData1: {},
|
||
chartData2: {},
|
||
mgroups: [],
|
||
searchData: [],
|
||
searchData2: [],
|
||
exportLoading: false,
|
||
dialogVisible: false,
|
||
options: {
|
||
color: ["#647bfe", "#91CC75"],
|
||
tooltip: {
|
||
show: true,
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// type: "cross",
|
||
// },
|
||
// confine: false,
|
||
showContent: true,
|
||
triggerOn: "mousemove",
|
||
},
|
||
grid: {
|
||
right: "7%",
|
||
left: "7%",
|
||
top: "15%",
|
||
},
|
||
legend: {
|
||
top: "2%",
|
||
data: ["时段一", "时段二"],
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false,
|
||
length: 5,
|
||
inside: true,
|
||
},
|
||
data: [
|
||
"总产量",
|
||
"台时产量",
|
||
"运转时间",
|
||
"运转率",
|
||
"单位产品电耗",
|
||
"单位产品综合电耗",
|
||
"单位产品标煤耗",
|
||
"单位产品综合能耗",
|
||
"吨熟料发电量",
|
||
],
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "电量 (KW·h)",
|
||
position: "left",
|
||
alignTicks: true,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colors[0],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "时段一",
|
||
type: "bar",
|
||
yAxisIndex: 0,
|
||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||
},
|
||
{
|
||
name: "时段二",
|
||
type: "bar",
|
||
yAxisIndex: 0,
|
||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||
},
|
||
],
|
||
},
|
||
myChart: null,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.useMock();
|
||
},
|
||
methods: {
|
||
useMock() {
|
||
let that = this;
|
||
that.tableDatas1 = that.mockData;
|
||
that.mockData.forEach((item) => {
|
||
that.mgroups.push(item.mgroup_name);
|
||
that.chartData1[item.mgroup_name] = [];
|
||
let arr = [];
|
||
arr[0] = item.total_production;
|
||
arr[1] = item.production_hour;
|
||
arr[2] = item.run_hour;
|
||
arr[3] = item.run_rate;
|
||
arr[4] = item.elec_consume_unit;
|
||
arr[5] = item.celec_consume_unit;
|
||
arr[6] = item.coal_consume_unit;
|
||
arr[7] = item.cen_consume_unit;
|
||
arr[8] = item.production_elec_unit;
|
||
that.chartData1[item.mgroup_name] = arr;
|
||
});
|
||
|
||
that.tableDatas2 = that.mockData2;
|
||
that.mockData2.forEach((item) => {
|
||
that.chartData2[item.mgroup_name] = [];
|
||
let arr = [];
|
||
arr[0] = item.total_production;
|
||
arr[1] = item.production_hour;
|
||
arr[2] = item.run_hour;
|
||
arr[3] = item.run_rate;
|
||
arr[4] = item.elec_consume_unit;
|
||
arr[5] = item.celec_consume_unit;
|
||
arr[6] = item.coal_consume_unit;
|
||
arr[7] = item.cen_consume_unit;
|
||
arr[8] = item.production_elec_unit;
|
||
that.chartData2[item.mgroup_name] = arr;
|
||
});
|
||
},
|
||
getList1(val) {
|
||
let that = this;
|
||
let start_date = val[0];
|
||
let end_date = val[1];
|
||
this.$API.enm.analyze
|
||
.req({
|
||
start_date: start_date,
|
||
end_date: end_date,
|
||
})
|
||
.then((res) => {
|
||
that.tableDatas1 = res;
|
||
res.forEach((item) => {
|
||
that.mgroups.push(item.mgroup_name);
|
||
that.chartData1[item.mgroup_name] = [];
|
||
let arr = [];
|
||
arr[0] = item.total_production;
|
||
arr[1] = item.production_hour;
|
||
arr[2] = item.run_hour;
|
||
arr[3] = item.run_rate;
|
||
arr[4] = item.elec_consume_unit;
|
||
arr[5] = item.celec_consume_unit;
|
||
arr[6] = item.coal_consume_unit;
|
||
arr[7] = item.cen_consume_unit;
|
||
arr[8] = item.production_elec_unit;
|
||
that.chartData1[item.mgroup_name] = arr;
|
||
});
|
||
});
|
||
},
|
||
getList2(val) {
|
||
let that = this;
|
||
let start_date = val[0];
|
||
let end_date = val[1];
|
||
this.$API.enm.analyze
|
||
.req({
|
||
start_date: start_date,
|
||
end_date: end_date,
|
||
})
|
||
.then((res) => {
|
||
that.tableDatas2 = res;
|
||
res.forEach((item) => {
|
||
that.chartData2[item.mgroup_name] = [];
|
||
let arr = [];
|
||
arr[0] = item.total_production;
|
||
arr[1] = item.production_hour;
|
||
arr[2] = item.run_hour;
|
||
arr[3] = item.run_rate;
|
||
arr[4] = item.elec_consume_unit;
|
||
arr[5] = item.celec_consume_unit;
|
||
arr[6] = item.coal_consume_unit;
|
||
arr[7] = item.cen_consume_unit;
|
||
arr[8] = item.production_elec_unit;
|
||
that.chartData2[item.mgroup_name] = arr;
|
||
});
|
||
});
|
||
},
|
||
getMgroup() {
|
||
this.$API.mtm.mgroup.list.req({ page: 0 }).then((res) => {
|
||
this.mgroups = res;
|
||
});
|
||
},
|
||
//对比
|
||
comparas() {
|
||
let that = this;
|
||
that.dialogVisible = true;
|
||
setTimeout(() => {
|
||
let chartDom = document.getElementById("myChart");
|
||
that.myChart = echarts.init(chartDom);
|
||
that.myChart.setOption(that.options);
|
||
}, 100);
|
||
() => {};
|
||
},
|
||
mgroupChange(val) {
|
||
let that = this;
|
||
that.options.series[0].data = this.chartData1[val];
|
||
that.options.series[1].data = this.chartData2[val];
|
||
that.myChart.clear();
|
||
that.myChart.setOption(that.options);
|
||
},
|
||
handleQuery() {
|
||
this.tableDatas1 = [];
|
||
this.getData();
|
||
},
|
||
itemClick(type, item) {
|
||
this.type = type;
|
||
this.asynDialog = true;
|
||
},
|
||
|
||
handlePrint() {
|
||
this.$PRINT("#myReport");
|
||
},
|
||
exportExcel() {
|
||
this.exportLoading = true;
|
||
this.$XLSX("#myTable", this.tableName);
|
||
this.exportLoading = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.printWrap {
|
||
width: 100%;
|
||
overflow-x: scroll;
|
||
}
|
||
</style>
|