统计分析

This commit is contained in:
geting 2024-10-31 12:17:53 +08:00
parent 68597dbd8a
commit 5f2ec82b42
4 changed files with 141 additions and 67 deletions

View File

@ -11,7 +11,11 @@
:sortable="item.sortable"
>
<template #default="scope">
<el-radio v-if="item.prop === 'index'" :label="scope.row.id" v-model="selectedIndex" @change="handleRadioChange(scope.row)"
<el-radio
v-if="item.prop === 'index'"
:label="scope.row.attributeCode"
v-model="selectedIndex"
@change="handleRadioChange(scope.row)"
>&nbsp;</el-radio
>
</template>
@ -47,6 +51,10 @@ const props = defineProps({
type: String,
default: '',
},
irn: {
type: String,
default: '',
},
show: {
type: Boolean,
default: false,
@ -91,7 +99,7 @@ const tableColumn = [
const tableData = ref<any[]>([])
const emit = defineEmits(['handleRadioChange'])
const handleRadioChange = (row) => {
selectedIndex.value = row.id
selectedIndex.value = row.attributeCode
emit('handleRadioChange', row)
}
const getAttributeList = () => {
@ -204,6 +212,7 @@ watch(
(newVal) => {
if (newVal) {
getCompleteData()
selectedIndex.value = props.irn
}
},
{

View File

@ -14,7 +14,7 @@ import { useConfig } from '/@/stores/config'
import TrendAnalysis from './trendAnalysis.vue'
import TrendComparison from './trendComparison.vue'
const config = useConfig()
const activeIndex = ref(2)
const activeIndex = ref(1)
const { t } = useI18n()
const headerList = [t('statAnalysis.PowerCurveAnalysis'), t('statAnalysis.trendAnalysis'), t('statAnalysis.trendComparison')]

View File

@ -6,7 +6,7 @@
<span>{{ t('statAnalysis.deviceId') }}</span>
<el-select
v-model="statAnalysisSelect.deviceId"
@change="selectstatAnalysis('deviceId')"
@change="deviceIdChange"
:placeholder="'请选择' + t('statAnalysis.deviceId')"
class="statAnalysisSelect"
>
@ -18,7 +18,7 @@
<el-input
class="statAnalysisSelect"
v-model="statAnalysisSelect.attributes"
@click="showMeasure = true"
@click="attributesChange"
:placeholder="'请选择' + t('statAnalysis.attributes')"
></el-input>
</div>
@ -91,7 +91,7 @@
</div>
</template>
<div class="measureSlot">
<MeasurementPage :show="showMeasure" :iotModelId="iotModelId" @handleRadioChange="handleRadioChange"></MeasurementPage>
<MeasurementPage :show="showMeasure" :iotModelId="iotModelId" :irn="irn" @handleRadioChange="handleRadioChange"></MeasurementPage>
</div>
<template #footer>
<span class="dialog-footer">
@ -121,12 +121,13 @@ const statAnalysisSelect = reactive({
const times = reactive([{ time: '' }])
const addTime = (index) => {
times.push({ time: '' })
customName.push(index + 2)
customName.push(String(index + 2))
}
const switchTime = (index) => {
times.splice(index, 1)
customName.splice(index, 1)
calculate.splice(index, 1)
xData.splice(index, 1)
}
const timechange = (value) => {
const count = getTimeIntervals(times[0][0], times[0][1])
@ -142,20 +143,24 @@ const handleClick = () => {
}
const iotModelId = ref('')
watch(
() => statAnalysisSelect.deviceId,
(newVal) => {
if (newVal) {
const row = statAnalysisSelectOptions.deviceId.filter((item) => {
return item.value == newVal
})
iotModelId.value = row[0].iotModelId
}
},
{
immediate: true,
const irn = ref('')
const attributesChange = () => {
const row = statAnalysisSelectOptions.deviceId.filter((item) => {
return item.value == statAnalysisSelect.deviceId
})
if (row.length) {
iotModelId.value = row[0].iotModelId
showMeasure.value = true
irn.value = statAnalysisSelect.attributeCode || ''
} else {
ElMessage.warning('请选择风机!!')
}
)
}
const deviceIdChange = () => {
statAnalysisSelect.attributes = ''
statAnalysisSelect.attributeCode = ''
}
const showMeasure = ref(false)
const selectedAttrRow = ref({
@ -337,6 +342,7 @@ const getTimeIntervals = (startTimestamp, endTimestamp) => {
}
const statAnalysisOperate = () => {
option.series = []
option.legend.data = []
chart.value.setOption(option, { notMerge: true })
times.forEach((time, index) => {
if (time[0] && time[1]) {
@ -356,6 +362,7 @@ const statAnalysisOperate = () => {
})
}
const calculate = reactive([{ max: '', min: '', average: '' }])
const xDatas = reactive([])
const historyDataReq = (data, index) => {
historyReq(data).then((res) => {
if (res.code == 200) {
@ -370,11 +377,13 @@ const historyDataReq = (data, index) => {
min: Math.floor(Math.min(...yData)),
average: Math.floor(yData.reduce((a, b) => a + b, 0) / yData.length),
}
xDatas.push(xData)
option.tooltip = {
show: true,
formatter: function (params) {
const x = timestampToTime(xData[params.dataIndex])
return `${params.marker} ${params.seriesName} ${x} : ${params.data}`
const index = customName.indexOf(params.seriesName)
const x = timestampToTime(xDatas[index][params.dataIndex])
return `${params.marker} ${params.seriesName} <br/> ${x} <b>${params.data}</b>`
},
}
option.xAxis.data = Array.from({ length: xData.length }, (_, index) => index)
@ -383,10 +392,8 @@ const historyDataReq = (data, index) => {
type: 'line',
data: yData,
}
console.log(seriesData)
option.legend.data.push(customName[index])
option.series.push(seriesData)
console.log(option)
chart.value.setOption(option)
} else {
ElMessage.warning('查询失败1')

View File

@ -30,10 +30,11 @@
<div class="headerPart" v-for="(deviceId, index) in statAnalysisDeviceId" :key="index">
<div class="topLeft">
<div class="selectPart">
<span>{{ index + 1 }}</span>
<el-input v-model="customName[index]" class="customName"></el-input>
<span>{{ t('statAnalysis.deviceId') }}</span>
<el-select
v-model="statAnalysisDeviceId[index]"
@change="deviceIdChange(index)"
:placeholder="'请选择' + t('statAnalysis.deviceId')"
class="statAnalysisSelect"
>
@ -45,7 +46,7 @@
<el-input
class="statAnalysisSelect"
v-model="statAnalysisAttributes[index]"
@click="selectAtteibutes(index, statAnalysisAttributes[index])"
@click="selectAtteibutes(index)"
:placeholder="'请选择' + t('statAnalysis.attributes')"
></el-input>
</div>
@ -64,15 +65,15 @@
<div class="icon">
<el-button v-show="index !== 0" type="danger" size="small" :icon="Delete" @click="switchDevice(index)" circle></el-button>
</div>
<div class="selectPart" v-if="calculate[index] && calculate[index]['max']">
<div class="selectPart" v-if="calculate[index] && calculate[index]['max'] != ''">
<span>{{ t('statAnalysis.max') }}</span>
<span class="max">{{ calculate[index]['max'] }}</span>
</div>
<div class="selectPart" v-if="calculate[index] && calculate[index]['min']">
<div class="selectPart" v-if="calculate[index] && calculate[index]['min'] != ''">
<span>{{ t('statAnalysis.min') }}</span>
<span class="min">{{ calculate[index]['min'] }}</span>
</div>
<div class="selectPart" v-if="calculate[index] && calculate[index]['average']">
<div class="selectPart" v-if="calculate[index] && calculate[index]['average'] != ''">
<span>{{ t('statAnalysis.average') }}</span>
<span class="average">{{ calculate[index]['average'] }}</span>
</div>
@ -91,7 +92,7 @@
</div>
</template>
<div class="measureSlot">
<MeasurementPage :show="showMeasure" :iotModelId="iotModelId" @handleRadioChange="handleRadioChange"></MeasurementPage>
<MeasurementPage :show="showMeasure" :iotModelId="iotModelId" :irn="irn" @handleRadioChange="handleRadioChange"></MeasurementPage>
</div>
<template #footer>
<span class="dialog-footer">
@ -131,13 +132,13 @@ const selectediotModelId = ref('')
const addDevice = (index) => {
statAnalysisDeviceId.push('')
statAnalysisAttributes.push('')
customName.value.push(index + 2)
customName.push(String(index + 2))
}
const switchDevice = (index) => {
statAnalysisDeviceId.splice(index, 1)
statAnalysisAttributes.splice(index, 1)
statAnalysisAttributeCode.splice(index, 1)
customName.value.splice(index, 1)
customName.splice(index, 1)
calculate.splice(index, 1)
}
@ -147,15 +148,23 @@ const handleClick = () => {
}
const iotModelId = ref('')
const irn = ref('')
const selectAtteibutes = (index, data = '') => {
console.log('🚀 ~ selectAtteibutes ~ data:', data)
showMeasure.value = true
openModelIndex.value = index
const selectAtteibutes = (index) => {
const row = statAnalysisSelectOptions.deviceId.filter((item) => {
return item.value == statAnalysisDeviceId[index]
})
iotModelId.value = row[0].iotModelId
irn.value = data
if (row.length) {
iotModelId.value = row[0].iotModelId
irn.value = statAnalysisAttributeCode[index] || ''
showMeasure.value = true
openModelIndex.value = index
} else {
ElMessage.warning('请选择风机!!')
}
}
const deviceIdChange = (index) => {
statAnalysisAttributeCode[index] = ''
statAnalysisAttributes[index] = ''
}
const showMeasure = ref(false)
@ -171,7 +180,6 @@ const handleRadioChange = (value) => {
const selectstatAnalysisAttributes = () => {
statAnalysisAttributes[openModelIndex.value] = selectedAttrRow.attributeName
statAnalysisAttributeCode[openModelIndex.value] = selectedAttrRow.attributeCode
console.log(statAnalysisAttributeCode)
showMeasure.value = false
}
@ -200,7 +208,7 @@ const option = {
},
}
const customName = ref(['1'])
const customName = reactive(['1'])
const chart = ref(null)
onMounted(() => {
if (chartContainer.value) {
@ -234,42 +242,71 @@ const selectstatAnalysis = () => {}
const shortcuts = [
{
text: '昨日',
text: '今天',
value: () => {
const start = getFormattedDate(0) + ' 00:00:00'
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24)
return [start, end]
},
},
{
text: '前三天',
text: '天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
const start = getFormattedDate(-1) + ' 00:00:00'
const end = getFormattedDate(-1) + ' 23:59:59'
return [start, end]
},
},
{
text: '前天',
text: '前3天',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
const start = getFormattedDate(-3) + ' 00:00:00'
const end = getFormattedDate(-1) + ' 23:59:59'
return [start, end]
},
},
{
text: '上个月',
text: '本周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
return getDateRange('week')
},
},
{
text: '本月',
value: () => {
return getDateRange('month')
},
},
]
const getFormattedDate = (offset) => {
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 statAnalysisOperate = () => {
option.series = []
@ -284,7 +321,6 @@ const statAnalysisOperate = () => {
}
return deviceId
}, [])
console.log(devices)
const requestData = {
devices: devices,
interval: statAnalysisInterval.value,
@ -297,30 +333,48 @@ const calculate = reactive([{ max: '', min: '', average: '' }])
const historyDataReq = (data, devices) => {
historyReq(data).then((res) => {
if (res.code == 200) {
devices.forEach((item) => {
const deviceId = item.deviceId
item.attributes.forEach((attribute) => {
if (res.data && res.data[deviceId] && res.data[deviceId][attribute]) {
const resData = res.data[deviceId][attribute]
const xData = resData['times']
const yData = resData['values']
const resData = res.data
const deviceIdKeys = Object.keys(resData)
const attributeKeys = []
if (deviceIdKeys.length) {
deviceIdKeys.forEach((item) => {
const indexList1 = findAllOccurrences(statAnalysisDeviceId, item)
Object.keys(resData[item]).forEach((value) => {
const indexList2 = findAllOccurrences(statAnalysisAttributeCode, value)
const dataIndex = getCommonElements(indexList1, indexList2)[0]
const historyData = resData[item][value]
const xData = historyData['times']
const yData = historyData['values']
const seriesData = {
name: attribute,
name: customName[dataIndex],
type: 'line',
data: yData,
}
calculate[dataIndex] = {
max: Math.floor(Math.max(...yData)),
min: Math.floor(Math.min(...yData)),
average: Math.floor(yData.reduce((a, b) => a + b, 0) / yData.length),
}
option.legend.data.push(customName[dataIndex])
option.xAxis.data = xData.map((item) => timestampToTime(item))
option.series.push(seriesData)
chart.value.setOption(option)
}
})
})
})
}
} else {
ElMessage.warning('查询失败')
}
})
}
const findAllOccurrences = (arr, target) => {
return arr.map((value, index) => (value === target ? index : -1)).filter((index) => index !== -1)
}
const getCommonElements = (arr1, arr2) => {
return arr1.filter((item) => arr2.some((x) => x === item))
}
const statAnalysisExport = () => {}
const statAnalysiImport = () => {}
@ -359,6 +413,10 @@ const timestampToTime = (timestamp) => {
span {
margin-right: 10px;
}
.customName {
width: 80px;
margin-right: 10px;
}
.statAnalysisSelect {
width: 200px;
:deep(.el-select__wrapper) {