feat:新增能耗分析：综合指标分析(日/月）页面
This commit is contained in:
17630416519
parent
0c823cfe79
commit
1525a55e78
@ -4,24 +4,13 @@
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
|
||||
<el-form-item label="能源类型" prop="energyType">
|
||||
<el-select v-model="queryParams.energyType" placeholder="请选择能源类型">
|
||||
<el-option
|
||||
:label="item.enername"
|
||||
:value="item.enersno"
|
||||
v-for="item in energyTypeList"
|
||||
:key="item.enersno"
|
||||
/>
|
||||
<el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
|
||||
:key="item.enersno" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.dataTime"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
:clearable="false"
|
||||
/>
|
||||
<el-date-picker v-model="queryParams.dataTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||||
placeholder="选择日期" style="width: 100%" :clearable="false" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
@ -39,27 +28,13 @@
|
||||
<el-table-column fixed prop="indexName" label="指标名称" width="210px">
|
||||
<template #default="scope">
|
||||
<div style="width: 100%; text-align: left">
|
||||
<el-button
|
||||
v-if="scope.row.indexId == queryParams.indexId"
|
||||
icon="search"
|
||||
circle
|
||||
<el-button v-if="scope.row.indexId == queryParams.indexId" icon="search" circle
|
||||
@click="selectChange(scope.row)"
|
||||
style="color: #fff; background: #409eff; margin-right: 8px"
|
||||
></el-button>
|
||||
<el-button
|
||||
v-else
|
||||
icon="search"
|
||||
circle
|
||||
@click="selectChange(scope.row)"
|
||||
style="margin-right: 8px"
|
||||
></el-button>
|
||||
<el-tooltip
|
||||
v-if="scope.row.indexName && scope.row.indexName.length > 9"
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="scope.row.indexName"
|
||||
placement="top-end"
|
||||
>
|
||||
style="color: #fff; background: #409eff; margin-right: 8px"></el-button>
|
||||
<el-button v-else icon="search" circle @click="selectChange(scope.row)"
|
||||
style="margin-right: 8px"></el-button>
|
||||
<el-tooltip v-if="scope.row.indexName && scope.row.indexName.length > 9" class="item" effect="dark"
|
||||
:content="scope.row.indexName" placement="top-end">
|
||||
<span>
|
||||
{{ scope.row.indexName.substr(0, 9) + "..." }}
|
||||
</span>
|
||||
@ -122,53 +97,234 @@ let queryParams = ref({
|
||||
|
||||
const energyList = ref([])
|
||||
const lineChartData = ref({})
|
||||
// 模拟数据 - energyList
|
||||
function generateMockEnergyList() {
|
||||
const mockData = []
|
||||
|
||||
// 定义一些模拟的指标名称和单位
|
||||
const indexNames = [
|
||||
"注塑车间注塑电源1",
|
||||
"注塑车间注塑电源2",
|
||||
"注塑车间注塑辅助电源1",
|
||||
"注塑车间辅助电源2",
|
||||
"总装车间电力电源（一层）",
|
||||
"总装车间电力电源（二层）",
|
||||
"总装车间电力电源（三层）",
|
||||
"3#厂房照明",
|
||||
"备用",
|
||||
'涂装空调机操室电源',
|
||||
"4#楼照明",
|
||||
'涂装车间空压机、电梯',
|
||||
"2#楼空调",
|
||||
"2#楼照明",
|
||||
"2#楼电力电源"
|
||||
]
|
||||
|
||||
const units = ["m³/h", "kWh", "t/h"]
|
||||
|
||||
|
||||
for (let i = 0; i < indexNames.length; i++) {
|
||||
const item = {
|
||||
indexId: (i + 1).toString(),
|
||||
indexName: indexNames[i],
|
||||
unitId: units[i % units.length]
|
||||
}
|
||||
|
||||
// 使用 for 循环生成31天的数据（value1 到 value31）
|
||||
for (let j = 1; j <= 31; j++) {
|
||||
const valueKey = `value${j}`
|
||||
// 根据不同的指标类型设置不同的数值范围
|
||||
if (i === 0 || i === 4 || i === 5) { // 水表类
|
||||
// 生成0.01-0.05之间的随机数，保留3位小数
|
||||
item[valueKey] = parseFloat((0.01 + Math.random() * 0.04).toFixed(3))
|
||||
} else if (i === 1 || i === 6) { // 电能类
|
||||
// 生成5.0-6.5之间的随机数，保留2位小数
|
||||
item[valueKey] = parseFloat((5.0 + Math.random() * 1.5).toFixed(2))
|
||||
} else if (i === 2) { // 蒸汽类
|
||||
// 生成0.2-0.3之间的随机数，保留2位小数
|
||||
item[valueKey] = parseFloat((0.2 + Math.random() * 0.1).toFixed(2))
|
||||
} else if (i === 3) { // 冷却系统
|
||||
// 生成0.005-0.02之间的随机数，保留3位小数
|
||||
item[valueKey] = parseFloat((0.005 + Math.random() * 0.015).toFixed(3))
|
||||
} else {
|
||||
// 默认数据 1-10之间的随机数，保留2位小数
|
||||
item[valueKey] = parseFloat((1 + Math.random() * 9).toFixed(2))
|
||||
}
|
||||
}
|
||||
|
||||
mockData.push(item)
|
||||
}
|
||||
|
||||
return mockData
|
||||
}
|
||||
// function getList() {
|
||||
// queryParams.value.indexCode = proxy.$route.query.modelCode
|
||||
// getDataList({
|
||||
// ...queryParams.value,
|
||||
// timeType: "HOUR",
|
||||
// }).then((response) => {
|
||||
// energyList.value = response.data
|
||||
// if (response.data && response.data.length !== 0) {
|
||||
// selectChange(response.data[0])
|
||||
// } else {
|
||||
// lineChartData.value = {}
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
function generateMockLineChartData(selectedRow) {
|
||||
const xData = []
|
||||
const yData = []
|
||||
|
||||
// 生成24小时的时间轴数据
|
||||
for (let i = 0; i < 24; i++) {
|
||||
xData.push(`${i}时`)
|
||||
}
|
||||
|
||||
// 根据选中的行生成对应的数据
|
||||
if (selectedRow) {
|
||||
// 生成24小时的数值数据
|
||||
for (let i = 0; i < 24; i++) {
|
||||
// 根据指标名称设置不同的数值范围
|
||||
if (selectedRow.indexName.includes("冷却用水") || selectedRow.indexName.includes("流量智控水表") || selectedRow.indexName.includes("原料处理")) {
|
||||
// 水表类数据，数值较小 0.01-0.05
|
||||
yData.push(parseFloat((0.01 + Math.random() * 0.04).toFixed(3)))
|
||||
} else if (selectedRow.indexName.includes("蒸汽")) {
|
||||
// 蒸汽类数据 0.2-0.3
|
||||
yData.push(parseFloat((0.2 + Math.random() * 0.1).toFixed(3)))
|
||||
} else if (selectedRow.indexName.includes("冷却系统")) {
|
||||
// 冷却系统数据，数值最小 0.005-0.02
|
||||
yData.push(parseFloat((0.005 + Math.random() * 0.015).toFixed(3)))
|
||||
} else if (selectedRow.indexName.includes("配电室") || selectedRow.indexName.includes("其他能源")) {
|
||||
// 电能类数据，数值较大 5.0-6.5
|
||||
yData.push(parseFloat((5.0 + Math.random() * 1.5).toFixed(2)))
|
||||
} else {
|
||||
// 默认数据 1-10
|
||||
yData.push(parseFloat((1 + Math.random() * 9).toFixed(2)))
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
xData: xData,
|
||||
yData: yData,
|
||||
title: `${selectedRow.indexName}(${selectedRow.unitId || ""})`
|
||||
}
|
||||
} else {
|
||||
// 默认数据 1-10
|
||||
for (let i = 0; i < 24; i++) {
|
||||
yData.push(parseFloat((1 + Math.random() * 9).toFixed(2)))
|
||||
}
|
||||
|
||||
return {
|
||||
xData: xData,
|
||||
yData: yData,
|
||||
title: "默认图表"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getList() {
|
||||
queryParams.value.indexCode = proxy.$route.query.modelCode
|
||||
getDataList({
|
||||
...queryParams.value,
|
||||
timeType: "HOUR",
|
||||
}).then((response) => {
|
||||
energyList.value = response.data
|
||||
if (response.data && response.data.length !== 0) {
|
||||
selectChange(response.data[0])
|
||||
} else {
|
||||
lineChartData.value = {}
|
||||
}
|
||||
})
|
||||
|
||||
// 使用 for 循环生成的模拟数据
|
||||
energyList.value = generateMockEnergyList()
|
||||
|
||||
// 默认选中第一行并显示图表
|
||||
if (energyList.value && energyList.value.length > 0) {
|
||||
setTimeout(() => {
|
||||
selectChange(energyList.value[0])
|
||||
}, 100)
|
||||
}
|
||||
|
||||
// 如果需要从接口获取数据，取消下面的注释
|
||||
// getDataList({
|
||||
// ...queryParams.value,
|
||||
// }).then((response) => {
|
||||
// console.log("1111111111", response)
|
||||
// energyList.value = response.data.tabledata
|
||||
// if (energyList.value && energyList.value.length !== 0) {
|
||||
// selectChange(energyList.value[0])
|
||||
// } else {
|
||||
// lineChartData.value = {}
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
const LineChartRef = ref()
|
||||
// function selectChange(row) {
|
||||
// queryParams.value.indexId = row ? row.indexId : undefined
|
||||
// queryParams.value.timeType = "HOUR"
|
||||
// getlistChart(queryParams.value).then((response) => {
|
||||
// let actualData = []
|
||||
// let expectedData = []
|
||||
// let title = ""
|
||||
// response.data.forEach((item) => {
|
||||
// expectedData.push(numFilter(item.value))
|
||||
// actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时")
|
||||
// title = item.indexName + "(" + (item.unitId || "") + ")"
|
||||
// })
|
||||
|
||||
// console.log(response)
|
||||
// console.log(actualData)
|
||||
// console.log(expectedData)
|
||||
|
||||
// lineChartData.value = {
|
||||
// xData: actualData,
|
||||
// yData: expectedData,
|
||||
// title,
|
||||
// }
|
||||
// // LineChartRef.value.initChart()
|
||||
// // this.lineChartData.actualData = actualData;
|
||||
// // this.lineChartData.expectedData = expectedData;
|
||||
// // this.lineChartData.title = title;
|
||||
// // this.$refs.LineChart.initChart(this.lineChartData);
|
||||
// // this.$refs.BarChart.initChart(this.lineChartData);
|
||||
// })
|
||||
// }
|
||||
function selectChange(row) {
|
||||
console.log('selectChange 被调用，选中的行：', row)
|
||||
queryParams.value.indexId = row ? row.indexId : undefined
|
||||
queryParams.value.timeType = "HOUR"
|
||||
getlistChart(queryParams.value).then((response) => {
|
||||
let actualData = []
|
||||
let expectedData = []
|
||||
let title = ""
|
||||
response.data.forEach((item) => {
|
||||
expectedData.push(numFilter(item.value))
|
||||
actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时")
|
||||
title = item.indexName + "(" + (item.unitId || "") + ")"
|
||||
})
|
||||
|
||||
console.log(response)
|
||||
console.log(actualData)
|
||||
console.log(expectedData)
|
||||
// 使用 for 循环生成的模拟数据
|
||||
const mockChartData = generateMockLineChartData(row)
|
||||
console.log('生成的图表数据：', mockChartData)
|
||||
lineChartData.value = mockChartData
|
||||
|
||||
lineChartData.value = {
|
||||
xData: actualData,
|
||||
yData: expectedData,
|
||||
title,
|
||||
}
|
||||
// LineChartRef.value.initChart()
|
||||
// this.lineChartData.actualData = actualData;
|
||||
// this.lineChartData.expectedData = expectedData;
|
||||
// this.lineChartData.title = title;
|
||||
// this.$refs.LineChart.initChart(this.lineChartData);
|
||||
// this.$refs.BarChart.initChart(this.lineChartData);
|
||||
})
|
||||
// 如果需要从接口获取数据，取消下面的注释
|
||||
// getlistChart(queryParams.value).then((response) => {
|
||||
// let actualData = []
|
||||
// let expectedData = []
|
||||
// let title = ""
|
||||
// response.data.forEach((item) => {
|
||||
// expectedData.push(numFilter(item.value))
|
||||
// actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时")
|
||||
// title = item.indexName + "(" + (item.unitId || "") + ")"
|
||||
// })
|
||||
|
||||
// console.log(response)
|
||||
// console.log(actualData)
|
||||
// console.log(expectedData)
|
||||
|
||||
// lineChartData.value = {
|
||||
// xData: actualData,
|
||||
// yData: expectedData,
|
||||
// title,
|
||||
// }
|
||||
// })
|
||||
}
|
||||
// 模拟数据 - lineChartData
|
||||
const mockLineChartData = {
|
||||
xData: [
|
||||
"0时", "1时", "2时", "3时", "4时", "5时", "6时", "7时", "8时", "9时",
|
||||
"10时", "11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时",
|
||||
"19时", "20时", "21时", "22时", "23时"
|
||||
],
|
||||
yData: [
|
||||
0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03,
|
||||
0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03,
|
||||
0.03, 0.03, 0.03, 0.03, 0.03
|
||||
],
|
||||
title: "加工车间原料处理用水表(m³/h)"
|
||||
}
|
||||
|
||||
function getTime() {
|
||||
var date = new Date()
|
||||
var year = date.getFullYear()
|
||||
|
||||
@ -118,52 +118,191 @@ let queryParams = ref({
|
||||
|
||||
const energyList = ref([])
|
||||
const lineChartData = ref({})
|
||||
|
||||
//模拟数据
|
||||
function generateMockEnergyList() {
|
||||
const mockData = []
|
||||
|
||||
// 定义一些模拟的指标名称和单位
|
||||
const indexNames = [
|
||||
"注塑车间注塑电源1",
|
||||
"注塑车间注塑电源2",
|
||||
"注塑车间注塑辅助电源1",
|
||||
"注塑车间辅助电源2",
|
||||
"总装车间电力电源（一层）",
|
||||
"总装车间电力电源（二层）",
|
||||
"总装车间电力电源（三层）",
|
||||
"3#厂房照明",
|
||||
"备用",
|
||||
'涂装空调机操室电源',
|
||||
"4#楼照明",
|
||||
'涂装车间空压机、电梯',
|
||||
"2#楼空调",
|
||||
"2#楼照明",
|
||||
"2#楼电力电源"
|
||||
]
|
||||
|
||||
const units = ["m³/h", "kWh", "t/h"]
|
||||
|
||||
|
||||
for (let i = 0; i < indexNames.length; i++) {
|
||||
const item = {
|
||||
indexId: (i + 1).toString(),
|
||||
indexName: indexNames[i],
|
||||
unitId: units[i % units.length]
|
||||
}
|
||||
|
||||
// 使用 for 循环生成31天的数据（value1 到 value31）
|
||||
for (let j = 1; j <= 31; j++) {
|
||||
const valueKey = `value${j}`
|
||||
// 根据不同的指标类型设置不同的数值范围
|
||||
if (i === 0 || i === 4 || i === 5) { // 水表类
|
||||
// 生成0.01-0.05之间的随机数，保留3位小数
|
||||
item[valueKey] = parseFloat((0.01 + Math.random() * 0.04).toFixed(3))
|
||||
} else if (i === 1 || i === 6) { // 电能类
|
||||
// 生成5.0-6.5之间的随机数，保留2位小数
|
||||
item[valueKey] = parseFloat((5.0 + Math.random() * 1.5).toFixed(2))
|
||||
} else if (i === 2) { // 蒸汽类
|
||||
// 生成0.2-0.3之间的随机数，保留2位小数
|
||||
item[valueKey] = parseFloat((0.2 + Math.random() * 0.1).toFixed(2))
|
||||
} else if (i === 3) { // 冷却系统
|
||||
// 生成0.005-0.02之间的随机数，保留3位小数
|
||||
item[valueKey] = parseFloat((0.005 + Math.random() * 0.015).toFixed(3))
|
||||
} else {
|
||||
// 默认数据 1-10之间的随机数，保留2位小数
|
||||
item[valueKey] = parseFloat((1 + Math.random() * 9).toFixed(2))
|
||||
}
|
||||
}
|
||||
|
||||
mockData.push(item)
|
||||
}
|
||||
|
||||
return mockData
|
||||
}
|
||||
|
||||
|
||||
function getList() {
|
||||
queryParams.value.indexCode = proxy.$route.query.modelCode
|
||||
getDataList({
|
||||
...queryParams.value,
|
||||
}).then((response) => {
|
||||
console.log("1111111111", response)
|
||||
energyList.value = response.data.tabledata
|
||||
if (energyList.value && energyList.value.length !== 0) {
|
||||
|
||||
// 使用 for 循环生成的模拟数据
|
||||
energyList.value = generateMockEnergyList()
|
||||
|
||||
// 默认选中第一行并显示图表
|
||||
if (energyList.value && energyList.value.length > 0) {
|
||||
setTimeout(() => {
|
||||
selectChange(energyList.value[0])
|
||||
} else {
|
||||
lineChartData.value = {}
|
||||
}
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
|
||||
// 如果需要从接口获取数据，取消下面的注释
|
||||
// getDataList({
|
||||
// ...queryParams.value,
|
||||
// }).then((response) => {
|
||||
// console.log("1111111111", response)
|
||||
// energyList.value = response.data.tabledata
|
||||
// if (energyList.value && energyList.value.length !== 0) {
|
||||
// selectChange(energyList.value[0])
|
||||
// } else {
|
||||
// lineChartData.value = {}
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// function getList() {
|
||||
// queryParams.value.indexCode = proxy.$route.query.modelCode
|
||||
// getDataList({
|
||||
// ...queryParams.value,
|
||||
// }).then((response) => {
|
||||
// console.log("1111111111", response)
|
||||
// energyList.value = response.data.tabledata
|
||||
// if (energyList.value && energyList.value.length !== 0) {
|
||||
// selectChange(energyList.value[0])
|
||||
// } else {
|
||||
// lineChartData.value = {}
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
const LineChartRef = ref()
|
||||
// function selectChange(row) {
|
||||
// queryParams.value.indexId = row ? row.indexId : undefined
|
||||
// getlistChart(queryParams.value).then((response) => {
|
||||
// let actualData = []
|
||||
// let expectedData = []
|
||||
// let title = ""
|
||||
// response.data.forEach((item) => {
|
||||
// expectedData.push(numFilter(item.value))
|
||||
// actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "日")
|
||||
// title = item.indexName + "(" + (item.unitId || "") + ")"
|
||||
// })
|
||||
|
||||
// console.log(response)
|
||||
// console.log(actualData)
|
||||
// console.log(expectedData)
|
||||
|
||||
// lineChartData.value = {
|
||||
// xData: actualData,
|
||||
// yData: expectedData,
|
||||
// title,
|
||||
// }
|
||||
// // LineChartRef.value.initChart()
|
||||
// // this.lineChartData.actualData = actualData;
|
||||
// // this.lineChartData.expectedData = expectedData;
|
||||
// // this.lineChartData.title = title;
|
||||
// // this.$refs.LineChart.initChart(this.lineChartData);
|
||||
// // this.$refs.BarChart.initChart(this.lineChartData);
|
||||
// })
|
||||
// }
|
||||
function selectChange(row) {
|
||||
console.log('selectChange 被调用，选中的行：', row)
|
||||
queryParams.value.indexId = row ? row.indexId : undefined
|
||||
getlistChart(queryParams.value).then((response) => {
|
||||
let actualData = []
|
||||
let expectedData = []
|
||||
let title = ""
|
||||
response.data.forEach((item) => {
|
||||
expectedData.push(numFilter(item.value))
|
||||
actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "日")
|
||||
title = item.indexName + "(" + (item.unitId || "") + ")"
|
||||
})
|
||||
|
||||
console.log(response)
|
||||
console.log(actualData)
|
||||
console.log(expectedData)
|
||||
|
||||
lineChartData.value = {
|
||||
xData: actualData,
|
||||
yData: expectedData,
|
||||
title,
|
||||
|
||||
// 按月份生成图表数据
|
||||
const xData = []
|
||||
const yData = []
|
||||
let title = ""
|
||||
|
||||
if (row) {
|
||||
// 生成12个月的数据（value1 到 value12）
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
xData.push(`${i}月`)
|
||||
const valueKey = `value${i}`
|
||||
// 如果数据中没有value1-value12，我们生成模拟的月度数据
|
||||
if (row[valueKey] !== undefined) {
|
||||
yData.push(numFilter(row[valueKey]))
|
||||
} else {
|
||||
// 生成模拟的月度数据
|
||||
let monthlyValue = 0
|
||||
if (row.indexName.includes("冷却用水") || row.indexName.includes("流量智控水表") || row.indexName.includes("原料处理")) {
|
||||
// 水表类：每月 0.5-2.0
|
||||
monthlyValue = 0.5 + Math.random() * 1.5
|
||||
} else if (row.indexName.includes("配电室") || row.indexName.includes("其他能源")) {
|
||||
// 电能类：每月 100-200
|
||||
monthlyValue = 100 + Math.random() * 100
|
||||
} else if (row.indexName.includes("蒸汽")) {
|
||||
// 蒸汽类：每月 5-15
|
||||
monthlyValue = 5 + Math.random() * 10
|
||||
} else {
|
||||
// 默认：每月 20-80
|
||||
monthlyValue = 20 + Math.random() * 60
|
||||
}
|
||||
yData.push(parseFloat(monthlyValue.toFixed(2)))
|
||||
}
|
||||
}
|
||||
// LineChartRef.value.initChart()
|
||||
// this.lineChartData.actualData = actualData;
|
||||
// this.lineChartData.expectedData = expectedData;
|
||||
// this.lineChartData.title = title;
|
||||
// this.$refs.LineChart.initChart(this.lineChartData);
|
||||
// this.$refs.BarChart.initChart(this.lineChartData);
|
||||
})
|
||||
|
||||
title = `${row.indexName}(${row.unitId || ""})`
|
||||
}
|
||||
|
||||
lineChartData.value = {
|
||||
xData: xData,
|
||||
yData: yData,
|
||||
title: title,
|
||||
}
|
||||
}
|
||||
|
||||
function getTime() {
|
||||
var date = new Date()
|
||||
var year = date.getFullYear()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user