347 lines
8.3 KiB
Vue
347 lines
8.3 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<el-button
|
||
type="primary"
|
||
@click="exportExcel()"
|
||
:loading="exportLoading"
|
||
>导出xlsx
|
||
</el-button>
|
||
<el-button type="primary" @click="handlePrint">打印 </el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-card style="margin-top: 5px">
|
||
<div ref="print" id="myReport" class="printContainer">
|
||
<table
|
||
border="1"
|
||
cellspacing="0"
|
||
:key="timeStamp"
|
||
id="myTable"
|
||
class="myTable"
|
||
>
|
||
<thead class="myTableHead">
|
||
<tr>
|
||
<th colspan="12">全厂能源统计</th>
|
||
</tr>
|
||
<tr>
|
||
<th rowspan="2">月份</th>
|
||
<th rowspan="2">工业总产值（万元）</th>
|
||
<th rowspan="2">工业增加值（万元）</th>
|
||
<th colspan="3">综合能源消费</th>
|
||
<th colspan="3">单位总产值能耗</th>
|
||
<th colspan="3">单位工业增加值能耗</th>
|
||
</tr>
|
||
<tr>
|
||
<th>当期值（tce）</th>
|
||
<th>环比增长率（%）</th>
|
||
<th>同比增长率（%）</th>
|
||
<th>当期值（tce/万元）</th>
|
||
<th>环比增长率（%）</th>
|
||
<th>同比增长率（%）</th>
|
||
<th>当期值（tce/万元）</th>
|
||
<th>环比增长率（%）</th>
|
||
<th>同比增长率（%）</th>
|
||
</tr>
|
||
</thead>
|
||
<tr v-for="(item, index) in tableDatas" :key="index">
|
||
<td class="numCell" v-for="item1 in item" :key="item1">
|
||
{{ item1 }}
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</el-card>
|
||
<div class="chartWrap">
|
||
<div class="chartTitle">本年工业总产值</div>
|
||
<scEcharts
|
||
height="400px"
|
||
width="1033px"
|
||
:option="optionMonth"
|
||
></scEcharts>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import scEcharts from "@/components/scEcharts";
|
||
import { defineAsyncComponent } from "vue";
|
||
const colors = ["#647bfe", "#cbd3fe", "#91CC75", "#EE6666", "#CC00CC", "#551e13"];
|
||
let tooltip = {
|
||
show: true,
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
},
|
||
confine: false,
|
||
showContent: true,
|
||
triggerOn: "mousemove",
|
||
};
|
||
let grid = {
|
||
right: "7%",
|
||
left: "4%",
|
||
top: "15%",
|
||
};
|
||
let toolbox = {
|
||
right: "5%",
|
||
feature: {
|
||
dataView: { show: true, readOnly: false },
|
||
saveAsImage: { show: true },
|
||
},
|
||
};
|
||
let legend = {
|
||
top: "2%",
|
||
data: ["总产量", "分布电耗", "总电耗", "成本", "消耗", "进厂"],
|
||
};
|
||
let yAxis = [
|
||
{
|
||
type: "value",
|
||
name: "产值 (万元)",
|
||
position: "left",
|
||
alignTicks: true,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colors[0],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
},
|
||
}
|
||
];
|
||
export default {
|
||
components: {
|
||
scEcharts,
|
||
charts: defineAsyncComponent(() =>
|
||
import("@/components/scEnm/lineChartsdialog.vue")
|
||
),
|
||
},
|
||
data() {
|
||
return {
|
||
timeStamp: 0,
|
||
year_s: "",
|
||
tableDatas: [],
|
||
optionMonth:{},
|
||
option1: {
|
||
color: colors,
|
||
tooltip: tooltip,
|
||
grid: grid,
|
||
toolbox: toolbox,
|
||
legend: legend,
|
||
xAxis: {
|
||
axisTick: {
|
||
show: true,
|
||
length: 5,
|
||
inside: true,
|
||
},
|
||
data: [],
|
||
},
|
||
yAxis: yAxis,
|
||
series: [
|
||
{
|
||
name: "工业总产值",
|
||
type: "bar",
|
||
yAxisIndex: 0,
|
||
data: [],
|
||
}
|
||
],
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
var myDate = new Date();
|
||
let year = myDate.getFullYear();
|
||
that.year_s = year;
|
||
this.getData();
|
||
let month = (that.month = myDate.getMonth() + 1);
|
||
},
|
||
methods: {
|
||
getData() {
|
||
let that = this;
|
||
let wrapArr = [],
|
||
wrapArr2 = [];
|
||
let obj = {};
|
||
obj.year_s = this.year_s - 1;
|
||
obj.page = 0;
|
||
obj.type = 'month_s';
|
||
that.$API.enm.enstat2.req(obj).then((res) => {
|
||
if (res.length > 0) {
|
||
res.forEach((item) => {
|
||
let ind = item.month_s - 1;
|
||
wrapArr[ind] = item; //上年
|
||
});
|
||
} else {
|
||
wrapArr = [];
|
||
}
|
||
let obj2 = {};
|
||
obj2.year_s = this.year_s;
|
||
obj2.page = 0;
|
||
obj2.type = 'month_s';
|
||
that.$API.enm.enstat2.req(obj2).then((res2) => {
|
||
let seriesData0 = [];
|
||
if (res2.length > 0) {
|
||
res2.forEach((item2) => {
|
||
let ind2 = item2.month_s - 1;
|
||
wrapArr2[ind2] = item2; //本年
|
||
});
|
||
} else {
|
||
}
|
||
|
||
for (let i = 0; i < wrapArr2.length; i++) {
|
||
if (Boolean(wrapArr2[i])) {
|
||
if (this.tableDatas[i]) {
|
||
} else {
|
||
this.tableDatas[i] = [];
|
||
}
|
||
let ind = wrapArr2[i].month_s - 1;
|
||
let time =
|
||
wrapArr2[i].year_s + "." + wrapArr2[i].month_s;
|
||
this.tableDatas[i][0] = time;
|
||
this.tableDatas[i][1] =
|
||
wrapArr2[i].industry_total_val;
|
||
seriesData0[ind] = wrapArr2[i].industry_total_val;
|
||
this.tableDatas[i][2] =
|
||
wrapArr2[i].industry_add_val;
|
||
this.tableDatas[i][3] = wrapArr2[i].en_consume; //当期值
|
||
let tValue3 = 0,
|
||
hValue3 = 0,
|
||
tPercent3 = 0,
|
||
hPercent3 = 0;
|
||
if (wrapArr2[i].month_s > 1 && i>0) {
|
||
tValue3 = wrapArr2[i - 1]
|
||
? wrapArr2[i - 1].en_consume
|
||
: "/";
|
||
} else {
|
||
tValue3 = wrapArr[12]
|
||
? wrapArr[12].en_consume
|
||
: "/";
|
||
}
|
||
if (tValue3 !== "/" && tValue3 !== 0) {
|
||
tPercent3 =
|
||
(((wrapArr2[i].en_consume - tValue3) /
|
||
tValue3) *
|
||
100).toFixed(2);
|
||
} else {
|
||
tPercent3 = "/";
|
||
}
|
||
hValue3 = wrapArr[i] ? wrapArr[i].en_consume : "/";
|
||
if (hValue3 !== "/" && hValue3 !== 0) {
|
||
hPercent3 =
|
||
((wrapArr2[i].en_consume - hValue3) /
|
||
hValue3) *
|
||
100;
|
||
} else {
|
||
hPercent3 = "/";
|
||
}
|
||
this.tableDatas[i][4] = tPercent3; //环比
|
||
this.tableDatas[i][5] = hPercent3; //同比
|
||
this.tableDatas[i][6] = wrapArr2[i].en_consume_unit; //总产值当前
|
||
let tValue6 = 0,
|
||
hValue6 = 0,
|
||
tPercent6 = 0,
|
||
hPercent6 = 0;
|
||
if (wrapArr2[i].month_s > 1 && i > 0) {
|
||
tValue6 = wrapArr2[i - 1]
|
||
? wrapArr2[i - 1].en_consume_unit
|
||
: "/";
|
||
} else {
|
||
tValue6 = wrapArr[12]
|
||
? wrapArr[12].en_consume_unit
|
||
: "/";
|
||
}
|
||
if (tValue6 !== "/" && tValue6 !== 0 && wrapArr2[i].en_consume_unit !== 0) {
|
||
tPercent6 =
|
||
(((wrapArr2[i].en_consume_unit - tValue6) /
|
||
tValue6) *
|
||
100).toFixed(2);
|
||
} else {
|
||
tPercent6 = "/";
|
||
}
|
||
if (isNaN(tPercent6)){
|
||
tPercent6 = 0
|
||
}
|
||
hValue6 = wrapArr[i]
|
||
? wrapArr[i].en_consume_unit
|
||
: "/";
|
||
if (hValue6 !== "/" && hValue6 !== 0) {
|
||
hPercent6 =
|
||
(((wrapArr2[i].en_consume_unit - hValue6) /
|
||
hValue6) * 100).toFixed(2);
|
||
} else {
|
||
hPercent6 = "/";
|
||
}
|
||
if(isNaN(hPercent6)){
|
||
hPercent6 = 0
|
||
}
|
||
this.tableDatas[i][7] = tPercent6; //总产值环比
|
||
this.tableDatas[i][8] = hPercent6; //总产值同比
|
||
this.tableDatas[i][9] =
|
||
wrapArr2[i].en_add_consume_unit;
|
||
let tValue9 = 0,
|
||
hValue9 = 0,
|
||
tPercent9 = 0,
|
||
hPercent9 = 0;
|
||
if (wrapArr2[i].month_s > 1 && i > 0) {
|
||
tValue9 = wrapArr2[i - 1]
|
||
? wrapArr2[i - 1].en_add_consume_unit
|
||
: "/";
|
||
} else {
|
||
tValue9 = wrapArr[12]
|
||
? wrapArr[12].en_add_consume_unit
|
||
: "/";
|
||
};
|
||
if (tValue9 !== "/" && tValue9 !== 0) {
|
||
tPercent9 =
|
||
(((wrapArr2[i].en_add_consume_unit -
|
||
tValue9) /
|
||
tValue9) *
|
||
100).toFixed(2);
|
||
} else {
|
||
tPercent9 = "/";
|
||
};
|
||
if (isNaN(tPercent9)) {
|
||
tPercent9=0
|
||
};
|
||
hValue9 = wrapArr[i]
|
||
? wrapArr[i].en_add_consume_unit
|
||
: "/";
|
||
if (hValue9 !== "/" && hValue9 !== 0) {
|
||
hPercent9 =
|
||
(((wrapArr2[i].en_add_consume_unit -
|
||
hValue9) /
|
||
hValue9) *
|
||
100).toFixed(2);
|
||
} else {
|
||
hPercent9 = "/";
|
||
};
|
||
this.tableDatas[i][10] = tPercent9;
|
||
this.tableDatas[i][11] = hPercent9;
|
||
} else {
|
||
}
|
||
}
|
||
let options = { ...that.option1 };
|
||
options.series[0].data = seriesData0;
|
||
let monthXAxis = [];
|
||
for (let i = 1; i <= that.month; i++) {
|
||
let item = i + "月";
|
||
monthXAxis.push(item);
|
||
}
|
||
options.xAxis.data = monthXAxis;
|
||
that.optionMonth = options;
|
||
});
|
||
});
|
||
},
|
||
exportExcel() {
|
||
this.exportLoading = true;
|
||
this.$XLSX("#myTable", this.tableName);
|
||
this.exportLoading = false;
|
||
},
|
||
handlePrint() {
|
||
this.$PRINT("#myReport");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style></style>
|