feat:tkx 页面修改
This commit is contained in:
parent
17dc188e25
commit
cdf271877d
|
|
@ -1015,15 +1015,25 @@ const routes = [
|
|||
},
|
||||
component: "enm_energy/hour_base",
|
||||
},
|
||||
{
|
||||
name: "water",
|
||||
path: "/enm_energy/water",
|
||||
meta: {
|
||||
title: "水报表",
|
||||
// icon: "el-icon-grid",
|
||||
perms: ["hour_base"],
|
||||
},
|
||||
component: "enm_energy/water",
|
||||
},
|
||||
// {
|
||||
// name: "dayBase",
|
||||
// path: "/enm_energy/dayBase",
|
||||
// name: "ct_elec",
|
||||
// path: "/enm_energy/ct_elec",
|
||||
// meta: {
|
||||
// title: "电量消耗日报表",
|
||||
// title: "峰谷平电量",
|
||||
// // icon: "el-icon-grid",
|
||||
// perms: ["day_base"],
|
||||
// perms: ["hour_base"],
|
||||
// },
|
||||
// component: "enm_energy/day_base",
|
||||
// component: "enm_energy/ct_elec",
|
||||
// },
|
||||
// {
|
||||
// name: "monthBase",
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
<div class="flexItem">
|
||||
<div class="itemTitle">
|
||||
<div class="itemTitleIcon"></div>
|
||||
<div>设备运转率</div>
|
||||
<div>台时产量</div>
|
||||
</div>
|
||||
<div class="itemBody itemBodyCircle">
|
||||
<div
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
>
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value"
|
||||
>{{ percentage }}%</span
|
||||
>{{ percentage }}t</span
|
||||
>
|
||||
<p class="percentage-label">{{ item.name }}</p>
|
||||
</template>
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
<div class="flexItem">
|
||||
<div class="itemTitle">
|
||||
<div class="itemTitleIcon"></div>
|
||||
<div>质量分析</div>
|
||||
<div>能源消耗</div>
|
||||
</div>
|
||||
<div class="itemBody" id="line3"></div>
|
||||
</div>
|
||||
|
|
@ -444,7 +444,7 @@ export default {
|
|||
{ name: "电石渣", value: 0 },
|
||||
{ name: "原料磨", value: 0 },
|
||||
{ name: "煤磨", value: 0 },
|
||||
{ name: "回转窑", value: 0 },
|
||||
{ name: "烧成", value: 0 },
|
||||
{ name: "水泥磨", value: 0 },
|
||||
{ name: "水泥包装", value: 0 },
|
||||
],
|
||||
|
|
@ -956,53 +956,53 @@ export default {
|
|||
let seriesData5 = new Array(31).fill(0); // 水泥车间用水
|
||||
|
||||
// 定义查询参数的生成函数
|
||||
function generateQuery(deptId) {
|
||||
function generateQuery(mpointId) {
|
||||
return {
|
||||
page: 0,
|
||||
year_s: that.currentYear,
|
||||
month_s: that.currentMonth,
|
||||
type: "day_s",
|
||||
mgroup__belong_dept: deptId,
|
||||
year: that.currentYear,
|
||||
month: that.currentMonth,
|
||||
type: "day",
|
||||
mpoint: mpointId,
|
||||
};
|
||||
}
|
||||
|
||||
// 第一个API查询
|
||||
let query1 = generateQuery("3626222645575802880");
|
||||
this.$API.enm.enstat.req(query1).then((response) => {
|
||||
let query1 = generateQuery("3631858687335112704");
|
||||
this.$API.enm.mpointstat.list.req(query1).then((response) => {
|
||||
//反转response数据
|
||||
response.reverse();
|
||||
response.forEach((item) => {
|
||||
|
||||
if (item.mgroup_name === "原料车间用水") {
|
||||
let ind = item.day_s - 1;
|
||||
seriesData1[ind] = item.water_consume || 0;
|
||||
}
|
||||
let ind = item.day - 1;
|
||||
seriesData1[ind] = item.val || 0;
|
||||
});
|
||||
|
||||
// 第二个API查询
|
||||
let query2 = generateQuery("3626252143184752640");
|
||||
return this.$API.enm.enstat.req(query2);
|
||||
let query2 = generateQuery("3631858394648182784");
|
||||
return this.$API.enm.mpointstat.list.req(query2);
|
||||
|
||||
}).then((response) => {
|
||||
response.reverse();
|
||||
response.forEach((item) => {
|
||||
if (item.mgroup_name === "烧成车间用水") {
|
||||
let ind = item.day_s - 1;
|
||||
seriesData3[ind] = item.water_consume || 0;
|
||||
}
|
||||
let ind = item.day - 1;
|
||||
seriesData3[ind] = item.val || 0;
|
||||
|
||||
});
|
||||
|
||||
// 第三个API查询
|
||||
let query3 = generateQuery("3626252144132665344");
|
||||
return this.$API.enm.enstat.req(query3);
|
||||
let query3 = generateQuery("3631858982832218112");
|
||||
response.reverse();
|
||||
return this.$API.enm.mpointstat.list.req(query3);
|
||||
}).then((response) => {
|
||||
response.reverse();
|
||||
response.forEach((item) => {
|
||||
if (item.mgroup_name === "水泥车间用水") {
|
||||
let ind = item.day_s - 1;
|
||||
seriesData5[ind] = item.water_consume || 0;
|
||||
}
|
||||
let ind = item.day - 1;
|
||||
seriesData5[ind] = item.val || 0;
|
||||
});
|
||||
// 更新图表数据
|
||||
option3.color = ['#FFBF00','#6495ED', '#CC00FF']
|
||||
option3.legend.data = [
|
||||
{
|
||||
name: "原料车间用水",
|
||||
name: "生活水",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
|
|
@ -1012,7 +1012,7 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
name: "烧成车间用水",
|
||||
name: "绿化水",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
|
|
@ -1022,7 +1022,7 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
name: "水泥车间用水",
|
||||
name: "工业水",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
|
|
@ -1034,7 +1034,7 @@ export default {
|
|||
];
|
||||
option3.series = [
|
||||
{
|
||||
name: '原料车间用水',
|
||||
name: '生活水',
|
||||
type: 'line',
|
||||
data: seriesData1,
|
||||
lineStyle: {
|
||||
|
|
@ -1042,7 +1042,7 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
name: '烧成车间用水',
|
||||
name: '绿化水',
|
||||
type: 'line',
|
||||
data: seriesData3,
|
||||
lineStyle: {
|
||||
|
|
@ -1050,7 +1050,7 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
name: '水泥车间用水',
|
||||
name: '工业水',
|
||||
type: 'line',
|
||||
data: seriesData5,
|
||||
lineStyle: {
|
||||
|
|
@ -1073,7 +1073,7 @@ export default {
|
|||
|
||||
})
|
||||
},
|
||||
//设备运转率
|
||||
//台时产量
|
||||
eqRate() {
|
||||
let that = this;
|
||||
let query = {};
|
||||
|
|
@ -1086,17 +1086,23 @@ export default {
|
|||
let data = response;
|
||||
data.forEach((item) => {
|
||||
if (item.mgroup_name == "电石渣") {
|
||||
that.rateData[0].value = Number(item.run_rate);
|
||||
that.rateData[0].value = item.production_hour
|
||||
;
|
||||
} else if (item.mgroup_name == "原料磨") {
|
||||
that.rateData[1].value = Number(item.run_rate);
|
||||
that.rateData[1].value = item.production_hour
|
||||
;
|
||||
} else if (item.mgroup_name == "煤磨") {
|
||||
that.rateData[2].value = Number(item.run_rate);
|
||||
that.rateData[2].value = item.production_hour
|
||||
;
|
||||
} else if (item.mgroup_name == "回转窑") {
|
||||
that.rateData[3].value = Number(item.run_rate);
|
||||
that.rateData[3].value = item.production_hour
|
||||
;
|
||||
} else if (item.mgroup_name == "水泥磨") {
|
||||
that.rateData[4].value = Number(item.run_rate);
|
||||
that.rateData[4].value = item.production_hour
|
||||
;
|
||||
} else if (item.mgroup_name == "水泥包装") {
|
||||
that.rateData[5].value = Number(item.run_rate);
|
||||
that.rateData[5].value = item.production_hour
|
||||
;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1231,7 +1237,7 @@ export default {
|
|||
radarChart.setOption(that.radarOption);
|
||||
});
|
||||
},
|
||||
//质量分析
|
||||
//能源消耗
|
||||
qualAnalys() {
|
||||
let that = this;
|
||||
// 初始化option2和图表
|
||||
|
|
@ -1240,48 +1246,55 @@ export default {
|
|||
let myChart = echarts.init(chartDom);
|
||||
|
||||
// 初始化各个series数据数组
|
||||
let seriesData = new Array(31).fill(0);
|
||||
let seriesData1 = new Array(31).fill(0);
|
||||
let seriesData2 = new Array(31).fill(0);
|
||||
let seriesData3 = new Array(31).fill(0);
|
||||
let seriesData4 = new Array(31).fill(0);
|
||||
let seriesData = new Array(12).fill(0);
|
||||
let seriesData1 = new Array(12).fill(0);
|
||||
// let seriesData2 = new Array(31).fill(0);
|
||||
// let seriesData3 = new Array(31).fill(0);
|
||||
// let seriesData4 = new Array(31).fill(0);
|
||||
|
||||
// 定义查询参数的生成函数
|
||||
function generateQuery(mgroupId) {
|
||||
return {
|
||||
page: 0,
|
||||
year_s: that.currentYear,
|
||||
month_s: that.currentMonth,
|
||||
type: "day_s",
|
||||
//获取当前年的第一个月
|
||||
start_time: that.currentYear + "-01-01 00:00:00",
|
||||
end_time: that.currentYear + "-12-31 00:00:00",
|
||||
type: "month_s",
|
||||
mgroup: mgroupId,
|
||||
};
|
||||
}
|
||||
// 第一个API查询
|
||||
function generateQueryMpoint(mpointId) {
|
||||
return {
|
||||
page: 0,
|
||||
type: "month",
|
||||
year: that.currentYear,
|
||||
mpoint: mpointId,
|
||||
};
|
||||
}
|
||||
// 第一个API查询 煤磨总产量 月数据
|
||||
let query1 = generateQuery("3626253029718056960");
|
||||
this.$API.enm.enstat.req(query1).then((response) => {
|
||||
response.forEach((item) => {
|
||||
if (item.qua_data.length > 0) {
|
||||
let ind = item.day_s - 1;
|
||||
seriesData[ind] = item.出窑熟料_fCaO_rate_pass || 0;
|
||||
seriesData1[ind] = item.出窑熟料_立升重_rate_pass || 0;
|
||||
let ind = item.month_s - 1;
|
||||
seriesData[ind] = item.total_production || 0;
|
||||
}
|
||||
});
|
||||
let query2 = generateQuery("3626253601661739008");
|
||||
return this.$API.enm.enstat.req(query2);
|
||||
// 获取每个月的全厂电量
|
||||
let query2 = generateQueryMpoint("3631880992400515072");
|
||||
return this.$API.enm.mpointstat.list.req(query2);
|
||||
}).then((response) => {
|
||||
console.log(response,'query2');
|
||||
response.forEach((item) => {
|
||||
if (item.qua_data.length > 0) {
|
||||
let ind = item.day_s - 1;
|
||||
seriesData2[ind] = item.出磨水泥_SO3_rate_pass || 0;
|
||||
seriesData3[ind] = item.出磨水泥_比表面积_rate_pass || 0;
|
||||
seriesData4[ind] = item.出磨水泥_掺量_rate_pass || 0;
|
||||
}
|
||||
let ind = item.month - 1;
|
||||
seriesData1[ind] = item.val || 0;
|
||||
});
|
||||
// 更新图表数据
|
||||
option5.color = ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
|
||||
|
||||
option5.legend.data = [
|
||||
{
|
||||
name: "f-CaO",
|
||||
name: "原煤消耗(t)",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
|
|
@ -1291,7 +1304,7 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
name: "立升重",
|
||||
name: "全厂电量(kwh)",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
|
|
@ -1300,65 +1313,35 @@ export default {
|
|||
color: "#00DDFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "SO3",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
borderRadius: 2,
|
||||
itemStyle: {
|
||||
color: "#37A2FF",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "比表面积",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
borderRadius: 2,
|
||||
itemStyle: {
|
||||
color: "#FF0087",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "掺量",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
borderRadius: 2,
|
||||
itemStyle: {
|
||||
color: "#FFBF00",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
option5.series = [
|
||||
{
|
||||
name: 'f-CaO',
|
||||
name: '原煤消耗(t)',
|
||||
type: 'line',
|
||||
data: seriesData
|
||||
},
|
||||
{
|
||||
name: '立升重',
|
||||
name: '全厂电量(kwh)',
|
||||
type: 'line',
|
||||
data: seriesData1
|
||||
},
|
||||
{
|
||||
name: 'SO3',
|
||||
type: 'line',
|
||||
data: seriesData2
|
||||
},
|
||||
{
|
||||
name: '比表面积',
|
||||
type: 'line',
|
||||
data: seriesData3
|
||||
},
|
||||
{
|
||||
name: '掺量',
|
||||
type: 'line',
|
||||
data: seriesData4
|
||||
},
|
||||
]
|
||||
option5.yAxis.axisLabel.show = false;
|
||||
option5.xAxis.data = [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
];
|
||||
myChart.setOption(option5); // 设置更新后的图表
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -46,6 +46,9 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="购置日期" prop="buy_date">
|
||||
</el-table-column>
|
||||
<el-table-column label="设备负责人" prop="device_people" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" prop="update_time"></el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.state === 10" type="success">
|
||||
|
|
@ -74,9 +77,9 @@
|
|||
<el-table-column label="所在工段" show-overflow-tooltip>
|
||||
<template #default="scope">{{ scope.row.mgroup_name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="保管人">
|
||||
<!-- <el-table-column label="保管人">
|
||||
<template #default="scope">{{ scope.row.keeper_name }}</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="存放位置" show-overflow-tooltip>
|
||||
<template #default="scope">{{ scope.row.place }}</template>
|
||||
</el-table-column>
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :md="12" :sm="24">
|
||||
<el-form-item label="设备编号" prop="number">
|
||||
<el-input v-model="form.number" placeholder="设备编号" />
|
||||
<el-form-item label="设备位号" prop="number">
|
||||
<el-input v-model="form.number" placeholder="设备位号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :md="12" :sm="24" v-if="form.type == 10">
|
||||
|
|
@ -138,13 +138,18 @@
|
|||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :md="12" :sm="24">
|
||||
<!-- <el-col :md="12" :sm="24">
|
||||
<el-form-item label="责任人" prop="leader_name">
|
||||
<span style="display:flex">
|
||||
<el-input readonly v-model="form.keeper"></el-input>
|
||||
<ehsUserSelect :multiple="false" @submit="getReceptionist" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :md="12" :sm="24">
|
||||
<el-form-item label="设备负责人">
|
||||
<el-input v-model="form.device_people" placeholder="设备负责人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :md="12" :sm="24">
|
||||
<el-form-item label="存放位置">
|
||||
|
|
|
|||
|
|
@ -28,15 +28,28 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="型号规格" prop="model">
|
||||
</el-table-column>
|
||||
<el-table-column label="仪表类型" prop="model">
|
||||
<el-table-column label="仪表类型" prop="meter_type">
|
||||
</el-table-column>
|
||||
<el-table-column label="量范" prop="model">
|
||||
<el-table-column label="量范" prop="measurement_range">
|
||||
</el-table-column>
|
||||
<el-table-column label="出厂编号" prop="model">
|
||||
<el-table-column label="出厂编号" prop="number_factory">
|
||||
</el-table-column>
|
||||
<el-table-column label="启用日期" prop="model">
|
||||
<el-table-column label="启用日期" prop="use_date">
|
||||
</el-table-column>
|
||||
<el-table-column label="测量介质" prop="model">
|
||||
<el-table-column label="用电功率(kw)" prop="power_kw">
|
||||
</el-table-column>
|
||||
<el-table-column label="设备重要性" prop="importance">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.importance === 10" type="A">
|
||||
{{ importance[scope.row.importance] }}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="scope.row.importance === 20" type="B">
|
||||
{{ importance[scope.row.importance] }}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="scope.row.importance === 30" type="C">
|
||||
{{ importance[scope.row.importance] }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="生产厂家" prop="factory" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
|
@ -64,6 +77,9 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="安装位置" prop="place" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备负责人" prop="device_people" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" prop="update_time"></el-table-column>
|
||||
<el-table-column label="备注" show-overflow-tooltip>
|
||||
<template #default="scope">{{ scope.row.description }}</template>
|
||||
</el-table-column>
|
||||
|
|
@ -186,6 +202,11 @@ export default {
|
|||
30: '在修',
|
||||
40: '禁用',
|
||||
},
|
||||
importance: {
|
||||
10: 'A',
|
||||
20: 'B',
|
||||
30: 'C',
|
||||
},
|
||||
options: [
|
||||
{ id: 10, name: '正常' },
|
||||
{ id: 20, name: '异常' }
|
||||
|
|
|
|||
|
|
@ -240,7 +240,6 @@ let yAxis = [
|
|||
},
|
||||
];
|
||||
import scEcharts from "@/components/scEcharts";
|
||||
import { th } from "element-plus/es/locales.mjs";
|
||||
import { defineAsyncComponent } from "vue";
|
||||
export default {
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -371,9 +371,6 @@ export default {
|
|||
that.timeStamp = nowDate.getTime();
|
||||
that.headerLength = that.days + 4;
|
||||
that.tableWidth = that.headerLength * 100 + "";
|
||||
for (let n = 1; n <= that.days; n++) {
|
||||
that.xAxisData_day.push(n + "日");
|
||||
}
|
||||
for (let n = 1; n < 13; n++) {
|
||||
that.xAxisData_month.push(n + "月");
|
||||
}
|
||||
|
|
@ -416,6 +413,10 @@ export default {
|
|||
let arr = that.query.month.split('-');
|
||||
that.year = Number(arr[0]);
|
||||
that.month = Number(arr[1]);
|
||||
that.days = new Date(that.year, that.month, 0).getDate();
|
||||
for (let n = 1; n <= that.days; n++) {
|
||||
that.xAxisData_day.push(n + "日");
|
||||
}
|
||||
that.dataLoop1();
|
||||
}else if (that.query.type==2){
|
||||
that.year = that.query.year;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,700 @@
|
|||
<!-- 全厂水量统计 -->
|
||||
<template>
|
||||
<div class="app-container" id="app-container" style="height: 100%">
|
||||
<el-header id="app-header">
|
||||
<div class="left-panel">
|
||||
<el-select
|
||||
v-model="query.type"
|
||||
placeholder="查询类型"
|
||||
clearable
|
||||
class="headerSearch"
|
||||
@change="typeCange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="query.day"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
format="YYYY-MM-DD"
|
||||
placeholder="天"
|
||||
v-if="query.type==0"
|
||||
style="margin-right: 6px"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="query.month"
|
||||
type="month"
|
||||
value-format="YYYY-MM"
|
||||
format="YYYY-MM"
|
||||
placeholder="查询月份"
|
||||
v-if="query.type==1"
|
||||
class="headerSearch"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="query.year"
|
||||
type="year"
|
||||
value-format="YYYY"
|
||||
format="YYYY"
|
||||
placeholder="查询年份"
|
||||
v-if="query.type==2"
|
||||
class="headerSearch"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="dateChange"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="exportExcel()"
|
||||
:loading="exportLoading"
|
||||
>导出xlsx
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handlePrint">打印 </el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-card>
|
||||
<div>
|
||||
<div ref="print" id="myReport" class="printContainer">
|
||||
<el-table
|
||||
v-if="query.type==0"
|
||||
id="hourBaseTable"
|
||||
:data="tableDatas2"
|
||||
style="width: 100%"
|
||||
border
|
||||
:height="tableHeight"
|
||||
@cell-click="handleCellClick"
|
||||
>
|
||||
<el-table-column
|
||||
label="分类"
|
||||
prop="nickname"
|
||||
width="110"
|
||||
fixed
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" prop="unit" fixed>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="(item, index) in 24"
|
||||
:key="item"
|
||||
:label="index + '时'"
|
||||
:prop="index + '时'"
|
||||
width="120"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="合计"
|
||||
prop="sum"
|
||||
width="130"
|
||||
fixed="right"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
v-if="query.type==1"
|
||||
id="hourBaseTable"
|
||||
:data="tableDatas_day"
|
||||
style="width: 100%"
|
||||
border
|
||||
:height="tableHeight"
|
||||
@cell-click="handleCellClick1"
|
||||
>
|
||||
<el-table-column
|
||||
label="分类"
|
||||
prop="nickname"
|
||||
width="110"
|
||||
fixed
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" prop="unit" fixed>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="item in xAxisData_day"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:prop="item"
|
||||
width="120"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="合计"
|
||||
prop="sum"
|
||||
width="130"
|
||||
fixed="right"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
v-if="query.type==2"
|
||||
id="hourBaseTable"
|
||||
:data="tableDatas_month"
|
||||
style="width: 100%"
|
||||
border
|
||||
:height="tableHeight"
|
||||
@cell-click="handleCellClick_month"
|
||||
>
|
||||
<el-table-column
|
||||
label="分类"
|
||||
prop="nickname"
|
||||
width="110"
|
||||
fixed
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" prop="unit" fixed>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="item in months"
|
||||
:key="item"
|
||||
:label="item + '月'"
|
||||
:prop="item + '月'"
|
||||
width="120"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="合计"
|
||||
prop="sum"
|
||||
width="130"
|
||||
fixed="right"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-main>
|
||||
<el-dialog v-model="itemVisible" :title="itemChartTitle" width="1100px">
|
||||
<scEcharts
|
||||
height="400px"
|
||||
width="1033px"
|
||||
:option="option"
|
||||
></scEcharts>
|
||||
<template #footer>
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import scEcharts from "@/components/scEcharts";
|
||||
export default {
|
||||
components: {
|
||||
scEcharts,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
days: 30,
|
||||
day: "",
|
||||
year: "",
|
||||
month: "",
|
||||
search_date: "",
|
||||
query:{
|
||||
type:0,
|
||||
day:'',
|
||||
year:'',
|
||||
month:'',
|
||||
yearStart:'',
|
||||
},
|
||||
mgroupObj: {},
|
||||
indexList: [],
|
||||
mpointList: [],
|
||||
tableDatas: [],
|
||||
options: [
|
||||
{id:0,name:'日统计'},
|
||||
{id:1,name:'月统计'},
|
||||
{id:2,name:'年统计'},
|
||||
],
|
||||
tableDatas2: [],
|
||||
tableDatas_day:[],
|
||||
tableDatas_month:[],
|
||||
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||
hours: [
|
||||
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
|
||||
19, 20, 21, 22, 23, 24,
|
||||
],
|
||||
mgroupList: [
|
||||
"石灰石破碎",
|
||||
"原料磨",
|
||||
"回转窑",
|
||||
"煤磨",
|
||||
"余热发电",
|
||||
"空压机",
|
||||
"富氧燃烧系统",
|
||||
"生产总耗电量",
|
||||
"全厂进线",
|
||||
],
|
||||
tableHeight: 600,
|
||||
mgroup: "石灰石破碎",
|
||||
itemChartTitle: "",
|
||||
itemChartData: [],
|
||||
itemChartXData: [],
|
||||
itemChartYData: [],
|
||||
itemChartLegend: [],
|
||||
itemChartSeries: [],
|
||||
timeStamp: null,
|
||||
itemVisible: false,
|
||||
exportLoading: false,
|
||||
tableName: "全厂电量小时统计",
|
||||
sourceData: {},
|
||||
option: {
|
||||
title: {
|
||||
// text: "全厂电量小时统计",
|
||||
x: "center",
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "3%",
|
||||
right: "10%",
|
||||
bottom: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
x: "right",
|
||||
y: "10",
|
||||
data: [],
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [],
|
||||
name: "时间",
|
||||
|
||||
nameTextStyle: {
|
||||
fontWeight: 600,
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#3366CC",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 45,
|
||||
interval: 0,
|
||||
},
|
||||
boundaryGap: false,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "对象值",
|
||||
nameTextStyle: {
|
||||
fontWeight: 500,
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#3366CC",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
axis: "auto",
|
||||
snap: true,
|
||||
},
|
||||
showContent: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
data: [],
|
||||
type: "line",
|
||||
symbolSize: 8,
|
||||
symbol: "circle",
|
||||
smooth: 0.5,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: "dotted",
|
||||
color: "#3366CC",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
xAxisData: [],
|
||||
xAxisData_day: [],
|
||||
xAxisData_month: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
var nowDate = new Date();
|
||||
let year = nowDate.getFullYear();
|
||||
let month = nowDate.getMonth() + 1;
|
||||
let day = nowDate.getDate();
|
||||
that.timeStamp = nowDate.getTime();
|
||||
that.days = new Date(year, month, 0).getDate();
|
||||
that.day = day;
|
||||
that.year = year;
|
||||
that.month = month;
|
||||
for (let n = 0; n < 24; n++) {
|
||||
that.xAxisData.push(n + "时");
|
||||
}
|
||||
that.timeStamp = nowDate.getTime();
|
||||
that.headerLength = that.days + 4;
|
||||
that.tableWidth = that.headerLength * 100 + "";
|
||||
for (let n = 1; n < 13; n++) {
|
||||
that.xAxisData_month.push(n + "月");
|
||||
}
|
||||
this.getMPoints();
|
||||
let heightContainer =
|
||||
document.getElementById("app-container").clientHeight;
|
||||
let heightHeader = document.getElementById("app-header").clientHeight;
|
||||
let heightTable = heightContainer - heightHeader - 35;
|
||||
that.tableHeight = heightTable;
|
||||
},
|
||||
methods: {
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
let that = this;
|
||||
if (columnIndex == 0) {
|
||||
if (that.indexList.indexOf(rowIndex) > -1) {
|
||||
let rowspans = that.mgroupObj[row.mgroupName];
|
||||
return {
|
||||
rowspan: rowspans,
|
||||
colspan: 1,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
rowspan: 1,
|
||||
colspan: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
dateChange() {
|
||||
let that = this;
|
||||
that.tableDatas = [];
|
||||
let arr = [];
|
||||
if(that.query.type==0){//日
|
||||
arr = that.query.day.split('-');
|
||||
that.year = Number(arr[0]);
|
||||
that.month = Number(arr[1]);
|
||||
that.day = Number(arr[2]);
|
||||
that.dataLoop();
|
||||
}else if(that.query.type==1){//月
|
||||
let arr = that.query.month.split('-');
|
||||
that.year = Number(arr[0]);
|
||||
that.month = Number(arr[1]);
|
||||
that.days = new Date(that.year, that.month, 0).getDate();
|
||||
that.xAxisData_day = [];
|
||||
for (let n = 1; n <= that.days; n++) {
|
||||
that.xAxisData_day.push(n + "日");
|
||||
}
|
||||
that.dataLoop1();
|
||||
}else if (that.query.type==2){
|
||||
that.year = that.query.year;
|
||||
that.dataLoop_month();
|
||||
}
|
||||
let nowDate = new Date();
|
||||
that.timeStamp = nowDate.getTime();
|
||||
// that.getLengthData();
|
||||
},
|
||||
getMPoints() {
|
||||
let that = this;
|
||||
that.$API.enm.mpoint.list
|
||||
.req({
|
||||
page: 0,
|
||||
// enabled: 1,
|
||||
// need_display: 1,
|
||||
ordering: "report_sortstr",
|
||||
code__in: "4294967295_2,233227_2,233217_2",
|
||||
query: "{ id, name, nickname, mgroup_name, unit, report_sortstr }",
|
||||
})
|
||||
.then((res) => {
|
||||
// that.mpointList = that.mockDatas.filter((item) => {
|
||||
that.mpointList = res
|
||||
that.dataLoop();
|
||||
});
|
||||
},
|
||||
getLengthData() {
|
||||
let that = this;
|
||||
let arrs = [];
|
||||
that.mpointList.forEach((item, index) => {
|
||||
if (arrs.indexOf(item.mgroup_name) == -1) {
|
||||
arrs.push(item.mgroup_name);
|
||||
}
|
||||
});
|
||||
},
|
||||
dataLoop() {
|
||||
let that = this;
|
||||
that.tableDatas = [];
|
||||
that.tableDatas2 = [];
|
||||
let _mgroup = [],
|
||||
_nameLength = [],
|
||||
indexList = [];
|
||||
let mgroupObj = {};
|
||||
that.mpointList.forEach((item, index) => {
|
||||
let indexs = _mgroup.indexOf(item.mgroup_name);
|
||||
if (indexs > -1) {
|
||||
_nameLength[indexs] += 1;
|
||||
} else {
|
||||
_mgroup.push(item.mgroup_name);
|
||||
_nameLength.push(1);
|
||||
indexList.push(index);
|
||||
}
|
||||
|
||||
for (let i = 0; i < _mgroup.length; i++) {
|
||||
mgroupObj[_mgroup[i]] = _nameLength[i];
|
||||
}
|
||||
let arr = [];
|
||||
arr[0] =
|
||||
item.mgroup_name != null ? item.mgroup_name : item.name;
|
||||
arr[1] = item.nickname != null ? item.nickname : item.name;
|
||||
arr[2] = item.unit;
|
||||
for (let i = 0; i < 24; i++) {
|
||||
arr[i + 3] = 0;
|
||||
}
|
||||
that.tableDatas.push(arr);
|
||||
let obj = {};
|
||||
obj.mgroupName =
|
||||
item.mgroup_name != null ? item.mgroup_name : item.name;
|
||||
obj.nickname =
|
||||
item.nickname != null && item.nickname != ""
|
||||
? item.nickname
|
||||
: item.name;
|
||||
obj.unit = item.unit;
|
||||
that.tableDatas2.push(obj);
|
||||
that.getData(item.id, index);
|
||||
});
|
||||
that.mgroupObj = mgroupObj;
|
||||
that.indexList = indexList;
|
||||
},
|
||||
getData(id, index) {
|
||||
let that = this;
|
||||
let obj = {};
|
||||
obj.type = "hour";
|
||||
obj.year = that.year;
|
||||
obj.month = that.month;
|
||||
obj.day = that.day;
|
||||
obj.mpoint = id;
|
||||
obj.page = 0;
|
||||
this.$API.enm.mpoint.stat.req(obj).then((res) => {
|
||||
// console.log(res);
|
||||
let sum = 0;
|
||||
res.forEach((item) => {
|
||||
let ind = item.hour + 3;
|
||||
that.tableDatas[index][ind] = item.val;
|
||||
sum += Number(item.val);
|
||||
let keyName = item.hour + "时";
|
||||
that.tableDatas2[index][keyName] = item.val;
|
||||
});
|
||||
sum = sum * 100;
|
||||
sum = Math.round(sum);
|
||||
sum = sum / 100;
|
||||
that.tableDatas[index][27] = sum.toFixed(2);
|
||||
that.tableDatas2[index].sum = sum.toFixed(2);
|
||||
that.$forceUpdate();
|
||||
});
|
||||
},
|
||||
dataLoop1() {
|
||||
let that = this;
|
||||
that.tableDatas = [];
|
||||
that.tableDatas_day = [];
|
||||
let _mgroup = [],
|
||||
_nameLength = [],
|
||||
indexList = [];
|
||||
let mgroupObj = {};
|
||||
that.mpointList.forEach((item, index) => {
|
||||
let indexs = _mgroup.indexOf(item.mgroup_name);
|
||||
if (indexs > -1) {
|
||||
_nameLength[indexs] += 1;
|
||||
} else {
|
||||
_mgroup.push(item.mgroup_name);
|
||||
_nameLength.push(1);
|
||||
indexList.push(index);
|
||||
}
|
||||
|
||||
for (let i = 0; i < _mgroup.length; i++) {
|
||||
mgroupObj[_mgroup[i]] = _nameLength[i];
|
||||
}
|
||||
let arr = [];
|
||||
arr[0] =
|
||||
item.mgroup_name != null
|
||||
? item.mgroup_name
|
||||
: item.nickname != null
|
||||
? item.nickname
|
||||
: item.name;
|
||||
arr[1] = item.nickname != null ? item.nickname : item.name;
|
||||
arr[2] = item.unit;
|
||||
for (let i = 0; i < that.days; i++) {
|
||||
arr[i + 3] = 0;
|
||||
}
|
||||
that.tableDatas.push(arr);
|
||||
let obj = {};
|
||||
obj.mgroupName =
|
||||
item.mgroup_name != null ? item.mgroup_name : item.name;
|
||||
obj.nickname =
|
||||
item.nickname != null && item.nickname != ""
|
||||
? item.nickname
|
||||
: item.name;
|
||||
obj.unit = item.unit;
|
||||
|
||||
that.tableDatas_day.push(obj);
|
||||
that.getData1(item.id, index);
|
||||
});
|
||||
that.mgroupObj = mgroupObj;
|
||||
that.indexList = indexList;
|
||||
},
|
||||
getData1(id, index) {
|
||||
let that = this;
|
||||
let obj = {};
|
||||
obj.type = "day";
|
||||
obj.year = that.year;
|
||||
obj.month = that.month;
|
||||
obj.mpoint = id;
|
||||
obj.page = 0;
|
||||
this.$API.enm.mpoint.stat.req(obj).then((res) => {
|
||||
let sum = 0;
|
||||
res.forEach((item) => {
|
||||
let ind = item.day + 2;
|
||||
that.tableDatas[index][ind] = item.val;
|
||||
sum += Number(item.val);
|
||||
let keyName = item.day + "日";
|
||||
that.tableDatas_day[index][keyName] = item.val;
|
||||
});
|
||||
sum = sum * 100;
|
||||
sum = Math.round(sum);
|
||||
sum = sum / 100;
|
||||
let dayss = 0;
|
||||
dayss = this.days + 3;
|
||||
that.tableDatas[index][dayss] = sum.toFixed(2);
|
||||
that.tableDatas_day[index].sum = sum.toFixed(2);
|
||||
that.$forceUpdate();
|
||||
});
|
||||
},
|
||||
dataLoop_month() {
|
||||
let that = this;
|
||||
that.tableDatas = [];
|
||||
that.tableDatas_month = [];
|
||||
let _mgroup = [],
|
||||
_nameLength = [],
|
||||
indexList = [];
|
||||
let mgroupObj = {};
|
||||
that.mpointList.forEach((item, index) => {
|
||||
let indexs = _mgroup.indexOf(item.mgroup_name);
|
||||
if (indexs > -1) {
|
||||
_nameLength[indexs] += 1;
|
||||
} else {
|
||||
_mgroup.push(item.mgroup_name);
|
||||
_nameLength.push(1);
|
||||
indexList.push(index);
|
||||
}
|
||||
|
||||
for (let i = 0; i < _mgroup.length; i++) {
|
||||
mgroupObj[_mgroup[i]] = _nameLength[i];
|
||||
}
|
||||
let arr = [];
|
||||
arr[0] =
|
||||
item.mgroup_name != null ? item.mgroup_name : item.name;
|
||||
arr[1] = item.nickname != null ? item.nickname : item.name;
|
||||
arr[2] = item.unit;
|
||||
for (let i = 0; i < 12; i++) {
|
||||
arr[i + 3] = 0;
|
||||
}
|
||||
that.tableDatas.push(arr);
|
||||
let obj = {};
|
||||
obj.mgroupName =
|
||||
item.mgroup_name != null ? item.mgroup_name : item.name;
|
||||
obj.nickname =
|
||||
item.nickname != null && item.nickname != ""
|
||||
? item.nickname
|
||||
: item.name;
|
||||
obj.unit = item.unit;
|
||||
that.tableDatas_month.push(obj);
|
||||
that.getData_month(item.id, index);
|
||||
});
|
||||
that.mgroupObj = mgroupObj;
|
||||
that.indexList = indexList;
|
||||
},
|
||||
getData_month(id, index) {
|
||||
let that = this;
|
||||
let obj = {};
|
||||
obj.type = "month";
|
||||
obj.year = that.year;
|
||||
obj.mpoint = id;
|
||||
obj.page = 0;
|
||||
this.$API.enm.mpoint.stat.req(obj).then((res) => {
|
||||
console.log(res);
|
||||
let sum = 0;
|
||||
res.forEach((item) => {
|
||||
let ind = item.month + 2;
|
||||
that.tableDatas[index][ind] = item.val;
|
||||
sum += Number(item.val);
|
||||
let keyName = item.month + "月";
|
||||
that.tableDatas_month[index][keyName] = item.val;
|
||||
});
|
||||
sum = sum * 100;
|
||||
sum = Math.round(sum);
|
||||
sum = sum / 100;
|
||||
that.tableDatas[index][15] = sum.toFixed(2);
|
||||
that.tableDatas_month[index].sum = sum.toFixed(2);
|
||||
that.$forceUpdate();
|
||||
});
|
||||
},
|
||||
|
||||
handleCellClick(row, column, cell, event) {
|
||||
let that = this;
|
||||
console.log("row", row);
|
||||
console.log("column", column);
|
||||
console.log("cell", cell);
|
||||
let index = that.tableDatas2.indexOf(row);
|
||||
console.log(index, "index");
|
||||
let lineData = that.tableDatas[index].slice(2, 26);
|
||||
that.option.xAxis.data = that.xAxisData;
|
||||
that.option.series[0].data = lineData;
|
||||
this.itemVisible = true;
|
||||
},
|
||||
handleCellClick1(row, column, cell, event) {
|
||||
let that = this;
|
||||
let index = that.tableDatas_day.indexOf(row);
|
||||
console.log('row', row)
|
||||
that.tableName = `${row.nickname}-电量日统计`
|
||||
let lineData = that.tableDatas[index].slice(3, that.days + 3);
|
||||
that.option.xAxis.data = that.xAxisData_day;
|
||||
that.option.series[0].data = lineData;
|
||||
this.itemVisible = true;
|
||||
},
|
||||
handleCellClick_month(row, column, cell, event) {
|
||||
let that = this;
|
||||
let index = that.tableDatas_month.indexOf(row);
|
||||
that.tableName = `${row.nickname}-电量日统计`
|
||||
//获取图数据
|
||||
let lineData = that.tableDatas[index].slice(2, 13);
|
||||
that.option.xAxis.data = that.xAxisData_month;
|
||||
that.option.series[0].data = lineData;
|
||||
this.itemVisible = true;
|
||||
},
|
||||
exportExcel() {
|
||||
this.exportLoading = true;
|
||||
this.$XLSX("#hourBaseTable", this.tableName);
|
||||
this.exportLoading = false;
|
||||
},
|
||||
handlePrint() {
|
||||
this.$PRINT("#myReport");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.printWrap {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.printContainer {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue