feat:添加综合查询
This commit is contained in:
parent
4643728a9f
commit
4dc039bef6
|
|
@ -151,6 +151,15 @@ export default {
|
|||
);
|
||||
}
|
||||
},
|
||||
analyze: {
|
||||
name: "一段时间范围的工段分析数据",
|
||||
req: async function(data){
|
||||
return await http.post(
|
||||
`${config.API_URL}/enm/enstat/analyze/`,
|
||||
data
|
||||
);
|
||||
}
|
||||
},
|
||||
mplogx: {
|
||||
name: "测点采集数据",
|
||||
req: async function(data){
|
||||
|
|
|
|||
|
|
@ -2339,6 +2339,17 @@ const routes = [
|
|||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/enm_base/search",
|
||||
"name": "search",
|
||||
"meta": {
|
||||
"title": "综合查询",
|
||||
"icon": "el-icon-postcard",
|
||||
"type": "menu",
|
||||
"perms": ["enm_base"]
|
||||
},
|
||||
"component": "enm_base/search"
|
||||
},
|
||||
//基础配置
|
||||
{
|
||||
"name": "enm_base",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,357 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-header>
|
||||
<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>
|
||||
时间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-card style="margin-top: 5px">
|
||||
<div class="printWrap">
|
||||
<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>
|
||||
<!-- <td
|
||||
v-for="(item0, index0) in item"
|
||||
:key="index0"
|
||||
class="numCell"
|
||||
>
|
||||
{{ item0 }}
|
||||
</td> -->
|
||||
</tr>
|
||||
</table>
|
||||
<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>
|
||||
<!-- <td
|
||||
v-for="(item0, index0) in item"
|
||||
:key="index0"
|
||||
class="numCell"
|
||||
>
|
||||
{{ item0 }}
|
||||
</td> -->
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<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.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<div id="myChart" style="width: 1200px; height: 400px"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
const colors = ["#647bfe", "#91CC75"];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mgroupName: "",
|
||||
timeStamp: 0,
|
||||
query: {
|
||||
searchData: "",
|
||||
page: 0,
|
||||
type: "month_st",
|
||||
mgroup: "",
|
||||
},
|
||||
tableDatas1: [
|
||||
{ mgroup_name: "石灰石破碎" },
|
||||
{ mgroup_name: "原料磨" },
|
||||
{ mgroup_name: "煤磨" },
|
||||
{ mgroup_name: "回转窑" },
|
||||
{ mgroup_name: "余热发电" },
|
||||
],
|
||||
tableDatas2: [
|
||||
{ mgroup_name: "石灰石破碎" },
|
||||
{ mgroup_name: "原料磨" },
|
||||
{ mgroup_name: "煤磨" },
|
||||
{ mgroup_name: "回转窑" },
|
||||
{ mgroup_name: "余热发电" },
|
||||
],
|
||||
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.getMgroup();
|
||||
},
|
||||
methods: {
|
||||
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.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>
|
||||
Loading…
Reference in New Issue