624 lines
22 KiB
Vue
624 lines
22 KiB
Vue
<template>
|
|
<div class="report" style="width: 100%; height: 100%">
|
|
<div class="topForm">
|
|
<div class="forms">
|
|
<el-space>
|
|
<div style="min-width: 30px">{{ t('statAnalysis.deviceId') }}</div>
|
|
<el-select
|
|
v-model="windBlowerValue"
|
|
@change="selectWindBlower"
|
|
:placeholder="'请选择' + t('statAnalysis.deviceId')"
|
|
class="commonSelect"
|
|
>
|
|
<el-option v-for="v in windBlowerList" :key="v.irn" :label="v.name" :value="v.irn"></el-option>
|
|
</el-select>
|
|
<div style="width: 20px"></div>
|
|
<div style="min-width: 30px">时间</div>
|
|
<el-date-picker
|
|
style="height: 40px"
|
|
v-model="timeRange"
|
|
type="datetimerange"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
range-separator="-"
|
|
:start-placeholder="t('alarm.selectDate')"
|
|
:end-placeholder="t('alarm.selectDate')"
|
|
:shortcuts="shortcuts"
|
|
/>
|
|
<div style="width: 20px"></div>
|
|
<div style="min-width: 30px">{{ t('statAnalysis.interval') }}</div>
|
|
<el-select v-model="interval" :placeholder="'请选择' + t('statAnalysis.interval')" class="commonSelect">
|
|
<el-option v-for="v in intervals" :key="v.value" :label="v.label" :value="v.value"></el-option>
|
|
</el-select>
|
|
<div style="width: 20px"></div>
|
|
<div style="min-width: 30px">{{ t('statAnalysis.calFunction') }}</div>
|
|
<el-select v-model="calFunction" :placeholder="'请选择' + t('statAnalysis.calFunction')" class="commonSelect">
|
|
<el-option v-for="v in calFunctions" :key="v.value" :label="v.label" :value="v.value"></el-option>
|
|
</el-select>
|
|
</el-space>
|
|
<div>
|
|
<el-space style="margin-top: 10px">
|
|
<div style="min-width: 30px">模板</div>
|
|
<el-select v-model="template" placeholder="请选择模板" class="templateSelect commonSelect">
|
|
<el-option v-for="v in reportTemplateList" :key="v.value" :label="v.label" :value="v.value" @click="changeTemplate">
|
|
<template #default>
|
|
<div class="tamplateOption">
|
|
<span>{{ v.label }}</span>
|
|
<el-icon style="color: red" @click="delReportTemplate(v.value)">
|
|
<Delete />
|
|
</el-icon>
|
|
</div>
|
|
</template>
|
|
</el-option>
|
|
</el-select>
|
|
<div style="width: 20px"></div>
|
|
<!-- <div>{{ t('statAnalysis.attributes') }}</div>
|
|
<el-input
|
|
style="width: 200px; height: 40px"
|
|
v-model="currentChoose"
|
|
:placeholder="'请选择' + t('statAnalysis.attributes')"
|
|
></el-input>
|
|
<el-button type="primary" size="small" :icon="Plus" circle @click="chooseMeasurePoint"> </el-button> -->
|
|
</el-space>
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<el-button class="button" :icon="Search" @click="queryHistoryData" type="primary">查询</el-button>
|
|
<el-button class="button" :icon="Upload" type="primary" plain @click="exportCsv">导出</el-button>
|
|
<el-button class="button" :icon="Notebook" type="primary" @click="addReportTemplate" plain>保存为模板</el-button>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
class="mainReport"
|
|
:columns="reportTableColumn"
|
|
:data="reportTableData"
|
|
:row-key="(row: any) => row.id"
|
|
:row-style="tableRowClassName"
|
|
v-loading="reportLoading"
|
|
>
|
|
<el-table-column prop="time" label="时间" fixed width="180px" align="center"> </el-table-column>
|
|
<el-table-column
|
|
v-for="item in reportTableColumn.length ? reportTableColumn : [{ prop: '', label: '', unit: '' }]"
|
|
:key="item.prop"
|
|
:label="item.label"
|
|
:prop="item.prop"
|
|
align="center"
|
|
>
|
|
<template #header="scope">
|
|
<div class="header-cell">
|
|
<div style="margin-right: 2px">
|
|
{{ item.label }} <br />
|
|
{{ item.unit ? `(${item.unit})` : '' }}
|
|
</div>
|
|
<el-popconfirm v-if="item.label" title="确定删除？" @confirm="removeColumn(scope)">
|
|
<template #reference>
|
|
<el-button class="delete-icon" type="danger" size="small">-</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="80" align="center" fixed="right">
|
|
<template #header="scope">
|
|
<el-button type="primary" size="small" :icon="Plus" @click="chooseMeasurePoint"> </el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-dialog v-model="showMeasure" title="测点名称" :width="900" :destroy-on-close="true">
|
|
<template #header>
|
|
<div class="measureSlotHeader">
|
|
<span style="font-size: 20px">测点名称</span>
|
|
</div>
|
|
</template>
|
|
<div class="measureSlot">
|
|
<Measurement
|
|
ref="measureRef"
|
|
:show="showMeasure"
|
|
:iotModelId="iotModelId"
|
|
@handleSelections="handleSelections"
|
|
:reportTableColumn="reportTableColumn"
|
|
></Measurement>
|
|
</div>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button type="primary" @click="selectMeasurePoint"> 保存 </el-button>
|
|
<el-button @click="showMeasure = false">取消</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref, nextTick, onMounted } from 'vue'
|
|
import { ElMessage, TableInstance, TreeInstance, ElMessageBox } from 'element-plus'
|
|
import { Search, Upload, Notebook, Plus, Delete } from '@element-plus/icons-vue'
|
|
import { WindBlowerList, RequestData, Devices } from './type'
|
|
import {
|
|
queryWindTurbinesPages,
|
|
historyReq,
|
|
windowReq,
|
|
getReportTemplateListReq,
|
|
addReportTemplateListReq,
|
|
delReportTemplateListReq,
|
|
} from '/@/api/backend/statAnalysis/request'
|
|
import Measurement from './measureList.vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
const { t } = useI18n()
|
|
import { useAdminInfo } from '/@/stores/adminInfo'
|
|
import { cloneDeep } from 'lodash-es'
|
|
const adminInfo = useAdminInfo()
|
|
import { useEnumStore } from '/@/stores/enums'
|
|
const enumStore = useEnumStore()
|
|
const shortcuts = [
|
|
{
|
|
text: '今天',
|
|
value: () => {
|
|
const start = getFormattedDate(0) + ' 00:00:00'
|
|
const end = getFormattedDate(0) + ' 23:59:59'
|
|
return [start, end]
|
|
},
|
|
},
|
|
{
|
|
text: '昨天',
|
|
value: () => {
|
|
const start = getFormattedDate(-1) + ' 00:00:00'
|
|
const end = getFormattedDate(-1) + ' 23:59:59'
|
|
return [start, end]
|
|
},
|
|
},
|
|
{
|
|
text: '前3天',
|
|
value: () => {
|
|
const start = getFormattedDate(-3) + ' 00:00:00'
|
|
const end = getFormattedDate(-1) + ' 23:59:59'
|
|
return [start, end]
|
|
},
|
|
},
|
|
{
|
|
text: '本周',
|
|
value: () => {
|
|
return getDateRange('week')
|
|
},
|
|
},
|
|
{
|
|
text: '本月',
|
|
value: () => {
|
|
return getDateRange('month')
|
|
},
|
|
},
|
|
]
|
|
const tableRowClassName = ({ rowIndex }: any) => {
|
|
if (rowIndex % 2 === 1) {
|
|
return { background: '#ebf3f9' }
|
|
}
|
|
return {}
|
|
}
|
|
|
|
const activeIndex = ref('2')
|
|
const handleClick = (val: any) => {
|
|
activeIndex.value = val.props.name
|
|
}
|
|
|
|
// 运行报表
|
|
const dateValue = ref('')
|
|
// 单机报表
|
|
// 风机
|
|
const windBlowerValue = ref('')
|
|
const windBlowerList = ref<WindBlowerList[]>([])
|
|
// 时间
|
|
const timeRange = ref([]) as any
|
|
// 间隔
|
|
const interval = ref('15m')
|
|
const intervals = [
|
|
{ label: '一分钟', value: '1m' },
|
|
{ label: '五分钟', value: '5m' },
|
|
{ label: '十分钟', value: '10m' },
|
|
{ label: '十五分钟', value: '15m' },
|
|
{ label: '一小时', value: '1h' },
|
|
{ label: '一天', value: '1d' },
|
|
{ label: '原始', value: 'NONE' },
|
|
]
|
|
const calFunction = ref('interpolation')
|
|
const calFunctions = [
|
|
{ label: '瞬时值', value: 'interpolation' },
|
|
{ label: '平均值', value: 'average' },
|
|
{ label: '最大值', value: 'max' },
|
|
{ label: '最小值', value: 'min' },
|
|
]
|
|
// 模板
|
|
const template = ref('')
|
|
const reportTemplateList = ref<{ label: string; value: string; columns: any[]; interval: string; calFunction: string }[]>([])
|
|
const getReportTemplateList = () => {
|
|
getReportTemplateListReq({
|
|
pageNum: 1,
|
|
pageSize: 1000,
|
|
category: '单机报表',
|
|
}).then((res) => {
|
|
if (res.success) {
|
|
reportTemplateList.value = res.data.rows.map((item) => {
|
|
const tem = item.template ? JSON.parse(item.template) : {}
|
|
return {
|
|
label: tem.name,
|
|
value: item.id,
|
|
columns: tem.columns,
|
|
interval: tem.interval,
|
|
calFunction: tem.calFunction,
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
const exportCsv = () => {
|
|
const exportColumnLabel = [{ prop: 'time', label: '时间' }, ...reportTableColumn.value]
|
|
const itemsRest = cloneDeep(reportTableData.value).map((item: any) => {
|
|
const { id, ...rest } = item
|
|
return rest
|
|
})
|
|
const csvContent = [
|
|
exportColumnLabel.map((header: any) => header.label).join(', '),
|
|
...itemsRest.map((row: any) => exportColumnLabel.map((header) => row[header.prop] ?? '-').join(', ')),
|
|
].join('\n')
|
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
|
|
const link = document.createElement('a')
|
|
link.href = URL.createObjectURL(blob)
|
|
link.download = Date.now() + '.csv'
|
|
link.style.display = 'none'
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
}
|
|
const addReportTemplate = () => {
|
|
ElMessageBox.prompt('请输入模板名称', '添加模板', {
|
|
confirmButtonText: '提交',
|
|
cancelButtonText: '取消',
|
|
inputPattern: /\S/,
|
|
inputErrorMessage: '模板名称不能为空',
|
|
}).then(({ value }) => {
|
|
const tem = {
|
|
name: value,
|
|
interval: interval.value,
|
|
calFunction: calFunction.value,
|
|
columns: reportTableColumn.value,
|
|
}
|
|
const data = {
|
|
category: '单机报表' as const,
|
|
template: JSON.stringify(tem),
|
|
}
|
|
|
|
addReportTemplateListReq(data).then((res) => {
|
|
if (res.success) {
|
|
ElMessage.success('添加成功！')
|
|
getReportTemplateList()
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
const delReportTemplate = (id: string) => {
|
|
ElMessageBox.confirm('确定删除该模板吗？', '删除模板', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}).then(() => {
|
|
delReportTemplateListReq({ id }).then((res) => {
|
|
if (res.success) {
|
|
ElMessage.success('删除成功！')
|
|
getReportTemplateList()
|
|
template.value = ''
|
|
if (template.value == id) {
|
|
reportTableColumn.value = JSON.parse(JSON.stringify(originReportColumn))
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
const changeTemplate = (val: string) => {
|
|
const target = reportTemplateList.value.find((item) => item.value === template.value)
|
|
if (target) {
|
|
interval.value = target.interval ? target.interval : interval.value
|
|
calFunction.value = target.calFunction ? target.calFunction : calFunction.value
|
|
reportTableColumn.value = target.columns
|
|
}
|
|
}
|
|
// 测点名称
|
|
const showMeasure = ref(false)
|
|
const currentChoose = ref('')
|
|
const currentChooseRows = ref([])
|
|
|
|
const iotModelId = ref('')
|
|
const measureRef = ref()
|
|
const queryWindBlower = () => {
|
|
queryWindTurbinesPages().then((res) => {
|
|
if (res.code == 200) {
|
|
windBlowerList.value = res.data.map((item: WindBlowerList) => {
|
|
return {
|
|
irn: item.irn,
|
|
name: item.name ?? '-',
|
|
modelId: item.modelId,
|
|
}
|
|
})
|
|
windBlowerValue.value = windBlowerList.value?.[0].irn
|
|
}
|
|
})
|
|
}
|
|
const selectWindBlower = (val: any) => {
|
|
console.log(val, 9999)
|
|
}
|
|
|
|
const chooseMeasurePoint = () => {
|
|
if (!windBlowerValue.value) return ElMessage.warning('请先选择风机！')
|
|
iotModelId.value = windBlowerList.value.find((val) => val.irn == windBlowerValue.value)!.modelId
|
|
|
|
showMeasure.value = true
|
|
}
|
|
const removeColumn = (val: any) => {
|
|
const columnName = val.column.property
|
|
reportTableColumn.value = reportTableColumn.value.filter((val: any) => val.prop !== columnName)
|
|
}
|
|
|
|
const handleSelections = (value: any) => {
|
|
currentChooseRows.value = JSON.parse(JSON.stringify(value))
|
|
}
|
|
// 去重
|
|
const uniqueByProp = (arr: any) => {
|
|
const seen = new Set()
|
|
return arr.filter((item: any) => {
|
|
if (!seen.has(item.prop)) {
|
|
seen.add(item.prop)
|
|
return true
|
|
}
|
|
return false
|
|
})
|
|
}
|
|
const selectMeasurePoint = () => {
|
|
reportTableColumn.value = currentChooseRows.value.map((val: any) => {
|
|
return {
|
|
label: val.label || val.attributeName,
|
|
prop: val.prop || val.attributeCode,
|
|
unit: val.unit || '',
|
|
}
|
|
})
|
|
reportTableColumn.value = uniqueByProp(reportTableColumn.value)?.filter((item: any) => {
|
|
return item.prop != null && item.prop !== ''
|
|
})
|
|
if (!reportTableColumn.value.length) {
|
|
reportTableData.value = []
|
|
}
|
|
showMeasure.value = false
|
|
}
|
|
const reportLoading = ref(false)
|
|
const originReportColumn = [
|
|
{
|
|
label: `风速`,
|
|
prop: 'iWindSpeed',
|
|
unit: 'm/s',
|
|
},
|
|
{
|
|
label: '有功功率',
|
|
prop: 'iGenPower',
|
|
unit: 'MW',
|
|
},
|
|
{
|
|
label: '日发电量',
|
|
prop: 'iKWhThisDay',
|
|
unit: 'kWh',
|
|
},
|
|
{
|
|
label: '总发电量',
|
|
prop: 'iKWhOverall',
|
|
unit: 'kWh',
|
|
},
|
|
{
|
|
label: '机舱角度',
|
|
prop: 'iVaneDirection',
|
|
unit: '',
|
|
},
|
|
{
|
|
label: '叶轮转速',
|
|
prop: 'iRotorSpeed',
|
|
unit: 'rmp',
|
|
},
|
|
{
|
|
label: '发电机转速',
|
|
prop: 'iReactivePower',
|
|
unit: 'rmp',
|
|
},
|
|
{
|
|
label: '机舱温度',
|
|
prop: 'iTempNacelle_1sec',
|
|
unit: '℃',
|
|
},
|
|
{
|
|
label: '主由路压力',
|
|
prop: 'iHydrPress',
|
|
unit: 'kpa',
|
|
},
|
|
]
|
|
const reportTableColumn = ref(JSON.parse(JSON.stringify(originReportColumn)))
|
|
|
|
const reportTableData = ref([]) as any
|
|
const idCounter = ref(0)
|
|
const queryHistoryData = () => {
|
|
if (!windBlowerValue.value) return ElMessage.warning('请选择风机！')
|
|
if (!timeRange.value.length) return ElMessage.warning('请选择时间！')
|
|
if (!interval.value) return ElMessage.warning('请选择间隔！')
|
|
const attributeCodes = reportTableColumn.value.map((val: any) => val.prop).filter((item: any) => item != null && item !== '')
|
|
if (!attributeCodes.length) return ElMessage.warning('请添加测点！')
|
|
reportLoading.value = true
|
|
const requestData = {
|
|
devices: [
|
|
{
|
|
deviceId: windBlowerValue.value,
|
|
attributes: [...attributeCodes],
|
|
},
|
|
],
|
|
interval: interval.value,
|
|
startTime: new Date(timeRange.value[0]).getTime(),
|
|
endTime: new Date(timeRange.value[1]).getTime(),
|
|
calFunction: calFunction.value,
|
|
} as anyObj
|
|
if (calFunction.value == 'interpolation') {
|
|
historyReq(requestData)
|
|
.then((res) => {
|
|
handleRes(res, attributeCodes)
|
|
})
|
|
.finally(() => {
|
|
reportLoading.value = false
|
|
})
|
|
} else {
|
|
windowReq(requestData)
|
|
.then((res) => {
|
|
handleRes(res, attributeCodes)
|
|
})
|
|
.finally(() => {
|
|
reportLoading.value = false
|
|
})
|
|
}
|
|
}
|
|
|
|
const handleRes = (res: any, attributeCodes: any) => {
|
|
if (res.code == 200) {
|
|
const result = res.data
|
|
if (Object.keys(result)?.length) {
|
|
const realResult = result[windBlowerValue.value]
|
|
let tableData = [] as any
|
|
attributeCodes.forEach((item: any) => {
|
|
if (Object.keys(realResult).includes(item)) {
|
|
tableData.push({
|
|
name: item,
|
|
times: realResult[item].times,
|
|
value: realResult[item].values.map((val: any) => (val === 0 ? 0 : val?.toFixed(2))),
|
|
})
|
|
}
|
|
})
|
|
const processedData = new Map()
|
|
idCounter.value = 0
|
|
if (tableData.length) {
|
|
tableData.forEach(({ name, times, value }: any) => {
|
|
times.forEach((time: number, index: number) => {
|
|
if (!processedData.has(time)) {
|
|
processedData.set(time, { id: idCounter.value++, time: timestampToTime(time) })
|
|
}
|
|
const values = value[index]
|
|
processedData.get(time)[name] = enumStore.keys.includes(name) ? enumStore.data?.[name]?.[values] : values
|
|
})
|
|
})
|
|
}
|
|
reportTableData.value = Array.from(processedData.values())
|
|
if (!reportTableData.value.length) {
|
|
ElMessage.warning('查询数据为空!')
|
|
reportTableData.value = []
|
|
}
|
|
reportLoading.value = false
|
|
} else {
|
|
ElMessage.warning('查询数据为空!')
|
|
reportTableData.value = []
|
|
reportLoading.value = false
|
|
}
|
|
} else {
|
|
reportLoading.value = false
|
|
ElMessage.warning('查询失败')
|
|
}
|
|
}
|
|
|
|
// 时间转换
|
|
const getFormattedDate = (offset: number) => {
|
|
const date = new Date()
|
|
date.setDate(date.getDate() + offset)
|
|
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
return `${year}-${month}-${day}`
|
|
}
|
|
const getDateRange = (type: 'week' | 'month') => {
|
|
const today = new Date()
|
|
if (type === 'week') {
|
|
const dayOfWeek = today.getDay()
|
|
const startOfWeek = new Date(today)
|
|
startOfWeek.setDate(today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1))
|
|
startOfWeek.setHours(0, 0, 0, 0)
|
|
const endOfWeek = new Date(startOfWeek)
|
|
endOfWeek.setDate(startOfWeek.getDate() + 6)
|
|
endOfWeek.setHours(23, 59, 59, 999)
|
|
return [startOfWeek, endOfWeek]
|
|
}
|
|
if (type === 'month') {
|
|
const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
|
|
startOfMonth.setHours(0, 0, 0, 0)
|
|
const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0)
|
|
endOfMonth.setHours(23, 59, 59, 999)
|
|
return [startOfMonth, endOfMonth]
|
|
}
|
|
}
|
|
const timestampToTime = (timestamp: any) => {
|
|
let timestamps = timestamp ? timestamp : null
|
|
let date = new Date(timestamps)
|
|
let Y = date.getFullYear() + '-'
|
|
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
|
|
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
|
|
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
|
|
let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
|
|
let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
|
|
return Y + M + D + h + m + s
|
|
}
|
|
|
|
getReportTemplateList()
|
|
onMounted(() => {
|
|
timeRange.value = shortcuts[0].value()
|
|
queryWindBlower()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.topForm {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
overflow-x: auto;
|
|
height: 110px;
|
|
.buttons {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex: 1;
|
|
}
|
|
}
|
|
.mainReport {
|
|
width: 100%;
|
|
height: calc(100% - 155px);
|
|
}
|
|
|
|
.commonSelect {
|
|
min-width: 150px;
|
|
:deep(.el-select__wrapper) {
|
|
height: 40px;
|
|
}
|
|
}
|
|
.templateSelect {
|
|
min-width: 223px;
|
|
}
|
|
|
|
.button {
|
|
height: 40px;
|
|
}
|
|
.delete-icon {
|
|
cursor: pointer;
|
|
display: none;
|
|
}
|
|
.header-cell {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&:hover .delete-icon {
|
|
display: block;
|
|
transition: 0.2;
|
|
}
|
|
}
|
|
.tamplateOption {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|