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: {
|
mplogx: {
|
||||||
name: "测点采集数据",
|
name: "测点采集数据",
|
||||||
req: async function(data){
|
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",
|
"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