统计分析

2024-11-01 15:08:49 +08:00 · 2024-11-01 15:08:49 +08:00 · 422704d5dd
commit 422704d5dd
parent b8c16155b4
4 changed files with 353 additions and 5 deletions
--- a/ui/dasadmin/src/views/backend/statAnalysis/index.vue
+++ b/ui/dasadmin/src/views/backend/statAnalysis/index.vue
@ -3,6 +3,7 @@
        <el-menu :default-active="activeIndex" class="headerList" mode="horizontal" @select="handleSelect">
            <el-menu-item v-for="(item, index) in headerList" :index="index" :key="index"> {{ item }} </el-menu-item>
        </el-menu>
+        <PowerCurveAnalysis v-if="activeIndex == 0"></PowerCurveAnalysis>
        <TrendAnalysis v-if="activeIndex == 1"></TrendAnalysis>
        <TrendComparison v-if="activeIndex == 2"></TrendComparison>
    </div>
@ -13,8 +14,9 @@ import { useI18n } from 'vue-i18n'
 import { useConfig } from '/@/stores/config'
 import TrendAnalysis from './trendAnalysis.vue'
 import TrendComparison from './trendComparison.vue'
+import PowerCurveAnalysis from './powerCurveAnalysis.vue'
 const config = useConfig()
-const activeIndex = ref(1)
+const activeIndex = ref(0)
 const { t } = useI18n()
 const headerList = [t('statAnalysis.PowerCurveAnalysis'), t('statAnalysis.trendAnalysis'), t('statAnalysis.trendComparison')]

--- a/ui/dasadmin/src/views/backend/statAnalysis/powerCurveAnalysis.vue
+++ b/ui/dasadmin/src/views/backend/statAnalysis/powerCurveAnalysis.vue
@ -0,0 +1,348 @@
+<template>
+    <div class="contain">
+        <el-header class="headerPart">
+            <div class="topLeft">
+                <div class="selectPart">
+                    <span>{{ t('statAnalysis.deviceId') }}</span>
+                    <el-select v-model="statAnalysisDeviceId" :placeholder="'请选择' + t('statAnalysis.deviceId')" class="statAnalysisSelect">
+                        <el-option v-for="v in statAnalysisSelectOptions.deviceId" :key="v.value" :label="v.label" :value="v.value"></el-option>
+                    </el-select>
+                </div>
+            </div>
+            <div class="topRight">
+                <el-button type="primary" @click="statAnalysisOperate()">{{ t('statAnalysis.search') }}</el-button>
+                <el-button style="color: #0064aa" @click="statAnalysiImport()">{{ t('statAnalysis.import') }}</el-button>
+                <el-button style="color: #0064aa" @click="statAnalysisExport()">{{ t('statAnalysis.export') }}</el-button>
+            </div>
+        </el-header>
+        <div class="timeColumns">
+            <div class="headerPart">
+                <div class="topLeft">
+                    <div class="selectPart">
+                        <span>{{ t('statAnalysis.time') }}</span>
+                        <el-date-picker
+                            class="datetime-picker"
+                            v-model="statAnalysisTime"
+                            :type="statAnalysisInterval == '1d' ? 'daterange' : 'datetimerange'"
+                            :value-format="statAnalysisInterval == '1d' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
+                            :teleported="false"
+                            :shortcuts="shortcuts"
+                        />
+                    </div>
+                    <div class="selectPart">
+                        <span>{{ t('statAnalysis.interval') }}</span>
+                        <el-select v-model="statAnalysisInterval" :placeholder="'请选择' + t('statAnalysis.interval')" class="statAnalysisSelect">
+                            <el-option v-for="v in statAnalysisSelectOptions.interval" :key="v.value" :label="v.label" :value="v.value"></el-option>
+                        </el-select>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div ref="chartContainer" style="width: 100%; height: 400px; border: 1px solid rgb(217, 217, 217)"></div>
+    </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { queryWindTurbinesPages, historyReq } from '/@/api/backend/statAnalysis/request'
+import { ElMessage } from 'element-plus'
+import * as echarts from 'echarts'
+import { index } from '/@/api/backend'
+const { t } = useI18n()
+const statAnalysisTime = ref('')
+const statAnalysisInterval = ref('')
+const statAnalysisDeviceId = ref('')
+const statAnalysisSelectOptions: any = reactive({
+    interval: [
+        { label: '五分钟', value: '5m' },
+        { label: '十五分钟', value: '15m' },
+        { label: '一小时', value: '1h' },
+        { label: '一天', value: '1d' },
+        { label: '原始', value: 'NONE' },
+    ],
+    deviceId: [],
+})
+
+const chartContainer = ref<HTMLElement | null>(null)
+
+const option: any = {
+    tooltip: {
+        formatter: function (params: any) {
+            return '功率:' + params.value[0] + 'KW ' + ' <br/>' + '风速：' + params.value[1] + 'm/s'
+        },
+    },
+    legend: {
+        icon: 'circle',
+        itemGap: 20,
+        itemWidth: 8,
+        itemHeight: 8,
+        data: [],
+    },
+    xAxis: {
+        type: 'value',
+        name: 'KW',
+        splitLine: {
+            show: false,
+        },
+    },
+    yAxis: {
+        name: 'm/s',
+        splitLine: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+    },
+    series: [],
+    grid: {
+        left: '3%',
+        right: '3%',
+    },
+}
+
+const chart: any = ref(null)
+onMounted(() => {
+    if (chartContainer.value) {
+        chart.value = echarts.init(chartContainer.value)
+        chart.value.setOption(option)
+    }
+    queryWindTurbines()
+})
+const queryWindTurbines = () => {
+    queryWindTurbinesPages().then((res) => {
+        if (res.code == 200) {
+            statAnalysisSelectOptions.deviceId = res.data.map((item: any) => {
+                return {
+                    value: item.irn,
+                    label: item.name ?? '-',
+                    iotModelId: item.modelId,
+                }
+            })
+            // console.log(statAnalysisSelectOptions.deviceId)
+        }
+    })
+}
+
+window.onresize = () => {
+    chart.value.resize()
+}
+
+const shortcuts = [
+    {
+        text: '今天',
+        value: () => {
+            const start = getFormattedDate(0) + ' 00:00:00'
+            const end = new Date()
+            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 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 statAnalysisOperate = () => {
+    option.series = []
+    chart.value.setOption(option, { notMerge: true })
+
+    const requestData = {
+        devices: [
+            {
+                deviceId: statAnalysisDeviceId.value,
+                attributes: ['iGenPower', 'iWindSpeed'],
+            },
+        ],
+        interval: statAnalysisInterval.value,
+        startTime: new Date(statAnalysisTime.value[0]).getTime(),
+        endTime: new Date(statAnalysisTime.value[1]).getTime(),
+    }
+    historyDataReq(requestData)
+}
+const historyDataReq = (data: any) => {
+    historyReq(data).then((res) => {
+        if (res.code == 200) {
+            const resData = res.data[statAnalysisDeviceId.value]
+            console.log(resData)
+            if (resData) {
+                const iGenPower = resData['iGenPower']['values']
+                const iWindSpeed = resData['iWindSpeed']['values']
+                const seriesData = iGenPower.map((item: any, index: number) => {
+                    return [item, iWindSpeed[index]]
+                })
+                const series = {
+                    type: 'scatter',
+                    data: seriesData,
+                }
+                option.series.push(series)
+                console.log('🚀 ~ historyReq ~ option:', option)
+
+                chart.value.setOption(option)
+            }
+        } else {
+            ElMessage.warning('查询失败')
+        }
+    })
+}
+
+const statAnalysisExport = () => {}
+const statAnalysiImport = () => {}
+</script>
+<style scoped lang="scss">
+.statAnalysis {
+    height: 100%;
+    .headerPart {
+        padding: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .topLeft {
+            display: flex;
+            .icon {
+                width: 40px;
+                height: 40px;
+                padding: 10px 0;
+            }
+            .selectPart {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: 40px;
+                margin-right: 20px;
+                span {
+                    margin-right: 10px;
+                }
+                .customName {
+                    width: fit-content;
+                    margin-right: 10px;
+                }
+                .statAnalysisSelect {
+                    width: 200px;
+                    :deep(.el-select__wrapper) {
+                        height: 40px;
+                    }
+                    :deep(.el-input__inner) {
+                        height: 38px;
+                    }
+                }
+                .max,
+                .min,
+                .average {
+                    border-radius: 6px;
+                    height: 40px;
+                    width: 72px;
+                    text-align: center;
+                    line-height: 40px;
+                }
+                .max {
+                    background: rgba(254, 55, 49, 0.2);
+                    border: 1px solid #fe3731;
+                    color: #fe3731;
+                }
+                .min {
+                    background: rgba(0, 160, 150, 0.2);
+                    border: 1px solid #00a096;
+                    color: #00a096;
+                }
+                .average {
+                    background: rgba(0, 100, 170, 0.2);
+                    border: 1px solid #0064aa;
+                    color: #0064aa;
+                }
+            }
+            .dialog-footer button:first-child {
+                margin-right: 10px;
+            }
+        }
+        .topRight {
+            display: flex;
+            justify-content: space-between;
+            .el-button {
+                width: 100px;
+                height: 40px;
+            }
+        }
+    }
+    .timeColumns {
+        max-height: 120px;
+        overflow: hidden;
+        .headerPart {
+            padding: 10px 20px;
+        }
+        &.expand {
+            max-height: max-content;
+            height: auto;
+            overflow: inherit;
+        }
+    }
+    .timeColumns.expand + div.ralIcon {
+        transform: rotate(-90deg);
+    }
+    .ralIcon {
+        width: 100%;
+        text-align: center;
+        transform: rotate(90deg);
+    }
+    #myEChart {
+        width: 100%;
+        height: 300px;
+    }
+}
+</style>
--- a/ui/dasadmin/src/views/backend/statAnalysis/trendAnalysis.vue
+++ b/ui/dasadmin/src/views/backend/statAnalysis/trendAnalysis.vue
@ -78,7 +78,7 @@
        <div v-if="times.length > 2" class="ralIcon" @click="handleClick">
            <el-icon :size="20" color="#0064AA"><DArrowRight /></el-icon>
        </div>
-        <div ref="chartContainer" style="width: 100%; height: 400px"></div>
+        <div ref="chartContainer" style="width: 100%; height: 400px; border: 1px solid rgb(217, 217, 217)"></div>
        <el-dialog v-model="showMeasure" title="测点名称" :width="800">
            <template #header>
                <div class="measureSlotHeader">
@ -187,7 +187,6 @@ const option: any = {
        data: [],
    },
    xAxis: {
-        type: 'category',
        data: [],
    },
    yAxis: {
--- a/ui/dasadmin/src/views/backend/statAnalysis/trendComparison.vue
+++ b/ui/dasadmin/src/views/backend/statAnalysis/trendComparison.vue
@ -84,7 +84,7 @@
        <div v-if="statAnalysisDeviceId.length > 2" class="ralIcon" @click="handleClick">
            <el-icon :size="20" color="#0064AA"><DArrowRight /></el-icon>
        </div>
-        <div ref="chartContainer" style="width: 100%; height: 400px"></div>
+        <div ref="chartContainer" style="width: 100%; height: 400px; border: 1px solid rgb(217, 217, 217)"></div>
        <el-dialog v-model="showMeasure" title="测点名称" :width="800">
            <template #header>
                <div class="measureSlotHeader">
@ -197,7 +197,6 @@ const option: any = {
        data: [],
    },
    xAxis: {
-        type: 'category',
        data: [],
        axisLabel: {
            rotate: 15,