统计分析
This commit is contained in:
geting
parent
9124d4b745
commit
08e62beb26
@ -48,7 +48,7 @@
|
||||
<div class="headerPart" v-for="(time, index) in times" :key="index">
|
||||
<div class="topLeft">
|
||||
<div class="selectPart">
|
||||
<span>{{ customName }}</span>
|
||||
<span>{{ index + 1 }}</span>
|
||||
<span>{{ t('statAnalysis.time') }}</span>
|
||||
<el-date-picker
|
||||
class="datetime-picker"
|
||||
@ -67,17 +67,17 @@
|
||||
<div class="selectPart" v-if="index !== 0">
|
||||
<el-button type="danger" size="small" :icon="Delete" @click="switchTime(index)" circle />
|
||||
</div>
|
||||
<div class="selectPart">
|
||||
<div class="selectPart" v-if="calculate[index] && calculate[index]['max']">
|
||||
<span>{{ t('statAnalysis.max') }}</span>
|
||||
<span class="max">11</span>
|
||||
<span class="max">{{ calculate[index]['max'] }}</span>
|
||||
</div>
|
||||
<div class="selectPart">
|
||||
<div class="selectPart" v-if="calculate[index] && calculate[index]['min']">
|
||||
<span>{{ t('statAnalysis.min') }}</span>
|
||||
<span class="min">22</span>
|
||||
<span class="min">{{ calculate[index]['min'] }}</span>
|
||||
</div>
|
||||
<div class="selectPart">
|
||||
<div class="selectPart" v-if="calculate[index] && calculate[index]['average']">
|
||||
<span>{{ t('statAnalysis.average') }}</span>
|
||||
<span class="average">33</span>
|
||||
<span class="average">{{ calculate[index]['average'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -132,26 +132,25 @@ const statAnalysisSelect = reactive({
|
||||
})
|
||||
const times = reactive([{ time: '' }])
|
||||
const addTime = (index) => {
|
||||
console.log(index)
|
||||
console.log(times)
|
||||
times.push({ time: '' })
|
||||
customName.value.push(index + 2)
|
||||
}
|
||||
const switchTime = (index) => {
|
||||
times.splice(index, 1)
|
||||
customName.value.splice(index, 1)
|
||||
calculate.splice(index, 1)
|
||||
}
|
||||
const timechange = (value) => {
|
||||
const count = getTimeIntervals(times[0][0], times[0][1])
|
||||
const count1 = getTimeIntervals(times[value][0], times[value][1])
|
||||
if (count !== count1) {
|
||||
times[value] = { time: '' }
|
||||
value = ElMessage.warning('查询时间点错误，请重新舒服')
|
||||
value = ElMessage.warning('查询时间点错误，请重新输入')
|
||||
}
|
||||
console.log('🚀 ~ timechange ~ count:', count)
|
||||
}
|
||||
const isExpand = ref(false)
|
||||
const handleClick = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
console.log(isExpand)
|
||||
}
|
||||
|
||||
const iotModelId = ref('')
|
||||
@ -160,12 +159,9 @@ watch(
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
const row = statAnalysisSelectOptions.deviceId.filter((item) => {
|
||||
console.log(item.value == newVal)
|
||||
return item.value == newVal
|
||||
})
|
||||
console.log()
|
||||
iotModelId.value = row[0].iotModelId
|
||||
console.log('🚀 ~ iotModelId:', iotModelId)
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -185,42 +181,30 @@ const handleRadioChange = (value) => {
|
||||
}
|
||||
const selectstatAnalysisAttributes = () => {
|
||||
statAnalysisSelect.attributes = selectedAttrRow.attributeName
|
||||
console.log('🚀 ~ selectstatAnalysisAttributes ~ selectedAttrRow:', selectedAttrRow)
|
||||
statAnalysisSelect.attributeCode = selectedAttrRow.attributeCode
|
||||
showMeasure.value = false
|
||||
}
|
||||
|
||||
const chartContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
const option = {
|
||||
// dataZoom: [
|
||||
// {
|
||||
// type: 'inside',
|
||||
// start: 0,
|
||||
// end: 100,
|
||||
// },
|
||||
// {
|
||||
// start: 0,
|
||||
// },
|
||||
// ],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'cross',
|
||||
// label: {
|
||||
// backgroundColor: '#6a7985',
|
||||
// },
|
||||
// },
|
||||
},
|
||||
const option = reactive({
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
},
|
||||
],
|
||||
tooltip: {},
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 0,
|
||||
icon: 'rect',
|
||||
icon: 'circle',
|
||||
itemGap: 20,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
data: [],
|
||||
selected: {},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@ -234,7 +218,7 @@ const option = {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const statAnalysisSelectOptions = reactive({
|
||||
interval: [
|
||||
@ -246,7 +230,7 @@ const statAnalysisSelectOptions = reactive({
|
||||
],
|
||||
deviceId: [],
|
||||
})
|
||||
const customName = ref('第一条数据')
|
||||
const customName = ref(['1'])
|
||||
const chart = ref(null)
|
||||
onMounted(() => {
|
||||
if (chartContainer.value) {
|
||||
@ -270,7 +254,7 @@ const queryWindTurbines = () => {
|
||||
}
|
||||
|
||||
window.onresize = () => {
|
||||
chart.resize()
|
||||
// chart.resize()
|
||||
}
|
||||
|
||||
const handleSelect = () => {}
|
||||
@ -333,7 +317,7 @@ const getTimeIntervals = (startTimestamp, endTimestamp) => {
|
||||
count = Math.floor((endDate - startDate) / (1 * 60 * 60 * 1000))
|
||||
break
|
||||
case '1d':
|
||||
count = Math.floor((endDate - startDate) / (1 * 24 * 60 * 60 * 1000))
|
||||
count = c((endDate - startDate) / (1 * 24 * 60 * 60 * 1000))
|
||||
break
|
||||
// default:
|
||||
// throw new Error('Invalid interval')
|
||||
@ -342,9 +326,11 @@ const getTimeIntervals = (startTimestamp, endTimestamp) => {
|
||||
return count
|
||||
}
|
||||
const statAnalysisOperate = () => {
|
||||
console.log(statAnalysisSelect)
|
||||
console.log(times)
|
||||
times.forEach((time) => {
|
||||
option.tooltip = {}
|
||||
option.xAxis.data = []
|
||||
option.legend.data = []
|
||||
option.series = []
|
||||
times.forEach((time, index) => {
|
||||
if (time[0] && time[1]) {
|
||||
const requestData = {
|
||||
devices: [
|
||||
@ -357,60 +343,63 @@ const statAnalysisOperate = () => {
|
||||
startTime: new Date(time[0]).getTime(),
|
||||
endTime: new Date(time[1]).getTime(),
|
||||
}
|
||||
historyDataReq(requestData)
|
||||
console.log(requestData)
|
||||
historyDataReq(requestData, index)
|
||||
}
|
||||
})
|
||||
}
|
||||
const historyDataReq = (data) => {
|
||||
// historyReq(data).then((res) => {
|
||||
// console.log(res)
|
||||
const res = {
|
||||
//设备ID
|
||||
'129476828342323': {
|
||||
//属性名
|
||||
power: {
|
||||
//时间戳列表
|
||||
times: [123452435924242, 123452435924342, 123452435924442, 123452435924542],
|
||||
//值列表
|
||||
values: [123.23, 35.21, 34.56, 67],
|
||||
},
|
||||
},
|
||||
}
|
||||
const deviceId = statAnalysisSelect.deviceId
|
||||
const attributeCode = statAnalysisSelect.attributeCode
|
||||
const resData = res['129476828342323']['power']
|
||||
const calculate = reactive([{ max: '', min: '', average: '' }])
|
||||
const historyDataReq = (data, index) => {
|
||||
historyReq(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
const deviceId = statAnalysisSelect.deviceId
|
||||
const attributeCode = statAnalysisSelect.attributeCode
|
||||
const resData = res.data[deviceId][attributeCode]
|
||||
if (resData) {
|
||||
const xData = resData['times']
|
||||
const yData = resData['values']
|
||||
|
||||
const xData = resData['times']
|
||||
const yData = resData['values']
|
||||
option.tooltip = {
|
||||
trigger: 'axis',
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
console.log('🚀 ~ //historyReq ~ params:', params)
|
||||
return params
|
||||
.map((item) => {
|
||||
return `${item.seriesName} (${xData[item.dataIndex]}): ${item.data}`
|
||||
})
|
||||
.join('<br/>')
|
||||
},
|
||||
}
|
||||
option.xAxis.data = Array.from({ length: xData.length }, (_, index) => index)
|
||||
calculate[index] = {
|
||||
max: Math.max(...yData),
|
||||
min: Math.min(...yData),
|
||||
average: Math.floor(yData.reduce((a, b) => a + b, 0) / yData.length),
|
||||
}
|
||||
|
||||
option.series = [
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
data: yData,
|
||||
},
|
||||
]
|
||||
console.log('🚀 ~ //historyReq ~ option:', option)
|
||||
chart.value.setOption(option)
|
||||
// })
|
||||
option.tooltip = {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
const x = timestampToTime(xData[params.dataIndex])
|
||||
return `${params.marker} ${params.seriesName} ${x} : ${params.data}`
|
||||
},
|
||||
}
|
||||
option.xAxis.data = Array.from({ length: xData.length }, (_, index) => index)
|
||||
const seriesData = {
|
||||
name: index + 1,
|
||||
type: 'line',
|
||||
data: yData,
|
||||
}
|
||||
option.legend.data.push(index + 1)
|
||||
option.series.push(seriesData)
|
||||
chart.value.setOption(option)
|
||||
}
|
||||
} else {
|
||||
ElMessage.warning('查询失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const statAnalysisExport = () => {}
|
||||
const statAnalysiImport = () => {}
|
||||
|
||||
const timestampToTime = (timestamp) => {
|
||||
timestamp = timestamp ? timestamp : null
|
||||
let date = new Date(timestamp)
|
||||
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()
|
||||
return Y + M + D + h + m
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.statAnalysis {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user