统计分析

ui/dasadmin/src/views/backend/statAnalysis/index.vue

@@ -4,7 +4,7 @@
             <el-menu-item v-for="(item, index) in headerList" :index="index" :key="index"> {{ item }} </el-menu-item>
         </el-menu>
         <TrendAnalysis v-if="activeIndex == 1"></TrendAnalysis>
-        <!-- <TrendComparison v-if="activeIndex == 2"></TrendComparison> -->
+        <TrendComparison v-if="activeIndex == 2"></TrendComparison>
     </div>
 </template>
 <script setup lang="ts">
@@ -12,9 +12,9 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useConfig } from '/@/stores/config'
 import TrendAnalysis from './trendAnalysis.vue'
-// import TrendComparison from './trendComparison.vue'
+import TrendComparison from './trendComparison.vue'
 const config = useConfig()
-const activeIndex = ref(1)
+const activeIndex = ref(2)
 const { t } = useI18n()
 const headerList = [t('statAnalysis.PowerCurveAnalysis'), t('statAnalysis.trendAnalysis'), t('statAnalysis.trendComparison')]
 

ui/dasadmin/src/views/backend/statAnalysis/trendAnalysis.vue

@@ -44,7 +44,7 @@
             <div class="headerPart" v-for="(time, index) in times" :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.time') }}</span>
                         <el-date-picker
                             class="datetime-picker"
@@ -121,11 +121,11 @@ const statAnalysisSelect = reactive({
 const times = reactive([{ time: '' }])
 const addTime = (index) => {
     times.push({ time: '' })
-    customName.value.push(index + 2)
+    customName.push(index + 2)
 }
 const switchTime = (index) => {
     times.splice(index, 1)
-    customName.value.splice(index, 1)
+    customName.splice(index, 1)
     calculate.splice(index, 1)
 }
 const timechange = (value) => {
@@ -176,16 +176,6 @@ const selectstatAnalysisAttributes = () => {
 const chartContainer = ref<HTMLElement | null>(null)
 
 const option = {
-    dataZoom: [
-        {
-            type: 'inside',
-            start: 0,
-            end: 100,
-        },
-        {
-            start: 0,
-        },
-    ],
     tooltip: {},
     legend: {
         icon: 'circle',
@@ -218,8 +208,9 @@ const statAnalysisSelectOptions = reactive({
     ],
     deviceId: [],
 })
-const customName = ref(['1'])
+const customName = reactive(['1'])
 const chart = ref(null)
+
 onMounted(() => {
     if (chartContainer.value) {
         chart.value = echarts.init(chartContainer.value)
@@ -252,42 +243,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 = getFormattedDate(-1) + ' 00:00:00'
-            const start = new Date()
+            const end = getFormattedDate(-1) + ' 23:59:59'
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
             return [start, end]
         },
     },
     {
-        text: '前七天',
+        text: '前3天',
         value: () => {
-            const end = new Date()
+            const start = getFormattedDate(-3) + ' 00:00:00'
-            const start = new Date()
+            const end = getFormattedDate(-1) + ' 23:59:59'
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
             return [start, end]
         },
     },
     {
-        text: '上个月',
+        text: '本周',
         value: () => {
-            const end = new Date()
+            return getDateRange('week')
-            const start = new Date()
+        },
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+    },
-            return [start, end]
+    {
+        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 getTimeIntervals = (startTimestamp, endTimestamp) => {
     const startDate = new Date(startTimestamp)
     const endDate = new Date(endTimestamp)
@@ -317,8 +337,7 @@ const getTimeIntervals = (startTimestamp, endTimestamp) => {
 }
 const statAnalysisOperate = () => {
     option.series = []
-    chart.value.setOption(option)
+    chart.value.setOption(option, { notMerge: true })
-    chart.value.clear()
     times.forEach((time, index) => {
         if (time[0] && time[1]) {
             const requestData = {
@@ -360,12 +379,14 @@ const historyDataReq = (data, index) => {
                 }
                 option.xAxis.data = Array.from({ length: xData.length }, (_, index) => index)
                 const seriesData = {
-                    name: String(index + 1),
+                    name: customName[index],
                     type: 'line',
                     data: yData,
                 }
-                option.legend.data.push(String(index + 1))
+                console.log(seriesData)
+                option.legend.data.push(customName[index])
                 option.series.push(seriesData)
+                console.log(option)
                 chart.value.setOption(option)
             } else {
                 ElMessage.warning('查询失败1')
@@ -447,6 +468,10 @@ const timestampToTime = (timestamp) => {
                     border: 1px solid #0064aa;
                     color: #0064aa;
                 }
+                .customName {
+                    width: 80px;
+                    margin-right: 10px;
+                }
             }
             .dialog-footer button:first-child {
                 margin-right: 10px;

ui/dasadmin/src/views/backend/statAnalysis/trendComparison.vue

@@ -0,0 +1,435 @@
+<template>
+    <div class="contain">
+        <el-header 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 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" :class="{ expand: isExpand }">
+            <div class="headerPart" v-for="(deviceId, index) in statAnalysisDeviceId" :key="index">
+                <div class="topLeft">
+                    <div class="selectPart">
+                        <span>{{ index + 1 }}</span>
+                        <span>{{ t('statAnalysis.deviceId') }}</span>
+                        <el-select
+                            v-model="statAnalysisDeviceId[index]"
+                            :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 class="selectPart">
+                        <span>{{ t('statAnalysis.attributes') }}</span>
+                        <el-input
+                            class="statAnalysisSelect"
+                            v-model="statAnalysisAttributes[index]"
+                            @click="selectAtteibutes(index, statAnalysisAttributes[index])"
+                            :placeholder="'请选择' + t('statAnalysis.attributes')"
+                        ></el-input>
+                    </div>
+                    <div class="topLeft">
+                        <div class="icon">
+                            <el-button
+                                v-show="index === statAnalysisDeviceId.length - 1"
+                                type="primary"
+                                size="small"
+                                :icon="Plus"
+                                circle
+                                @click="addDevice(index)"
+                            >
+                            </el-button>
+                        </div>
+                        <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']">
+                            <span>{{ t('statAnalysis.max') }}</span>
+                            <span class="max">{{ calculate[index]['max'] }}</span>
+                        </div>
+                        <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']">
+                            <span>{{ t('statAnalysis.average') }}</span>
+                            <span class="average">{{ calculate[index]['average'] }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <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>
+        <el-dialog v-model="showMeasure" title="测点名称" :width="800">
+            <template #header>
+                <div class="measureSlotHeader">
+                    <span style="font-size: 20px">测点名称</span>
+                </div>
+            </template>
+            <div class="measureSlot">
+                <MeasurementPage :show="showMeasure" :iotModelId="iotModelId" @handleRadioChange="handleRadioChange"></MeasurementPage>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="showMeasure = false">取消</el-button>
+                    <el-button type="primary" @click="selectstatAnalysisAttributes"> 确认 </el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { onUnmounted, reactive, ref, watch, nextTick, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { queryWindTurbinesPages, historyReq } from '/@/api/backend/statAnalysis/request'
+import { ElMessage, ElMenu } from 'element-plus'
+import { DArrowRight, Plus, Delete } from '@element-plus/icons-vue'
+import MeasurementPage from './analysisAttributes.vue'
+import * as echarts from 'echarts'
+const { t } = useI18n()
+const statAnalysisTime = ref('')
+const statAnalysisInterval = ref('')
+const statAnalysisDeviceId = reactive([''])
+const statAnalysisAttributes = reactive([''])
+const statAnalysisAttributeCode = reactive([])
+const statAnalysisSelectOptions = reactive({
+    interval: [
+        { label: '五分钟', value: '5m' },
+        { label: '十五分钟', value: '15m' },
+        { label: '一小时', value: '1h' },
+        { label: '一天', value: '1d' },
+        { label: '原始', value: 'NONE' },
+    ],
+    deviceId: [],
+})
+const openModelIndex = ref(0)
+const selectediotModelId = ref('')
+const addDevice = (index) => {
+    statAnalysisDeviceId.push('')
+    statAnalysisAttributes.push('')
+    customName.value.push(index + 2)
+}
+const switchDevice = (index) => {
+    statAnalysisDeviceId.splice(index, 1)
+    statAnalysisAttributes.splice(index, 1)
+    statAnalysisAttributeCode.splice(index, 1)
+    customName.value.splice(index, 1)
+    calculate.splice(index, 1)
+}
+
+const isExpand = ref(false)
+const handleClick = () => {
+    isExpand.value = !isExpand.value
+}
+const iotModelId = ref('')
+const irn = ref('')
+const selectAtteibutes = (index, data = '') => {
+    console.log('🚀 ~ selectAtteibutes ~ data:', data)
+    showMeasure.value = true
+    openModelIndex.value = index
+    const row = statAnalysisSelectOptions.deviceId.filter((item) => {
+        return item.value == statAnalysisDeviceId[index]
+    })
+    iotModelId.value = row[0].iotModelId
+    irn.value = data
+}
+
+const showMeasure = ref(false)
+const selectedAttrRow = reactive({
+    attributeCode: '',
+    attributeName: '',
+})
+const handleRadioChange = (value) => {
+    const { attributeCode, attributeName } = { ...value }
+    selectedAttrRow.attributeCode = attributeCode
+    selectedAttrRow.attributeName = attributeName
+}
+const selectstatAnalysisAttributes = () => {
+    statAnalysisAttributes[openModelIndex.value] = selectedAttrRow.attributeName
+    statAnalysisAttributeCode[openModelIndex.value] = selectedAttrRow.attributeCode
+    console.log(statAnalysisAttributeCode)
+    showMeasure.value = false
+}
+
+const chartContainer = ref<HTMLElement | null>(null)
+
+const option = {
+    tooltip: {},
+    legend: {
+        icon: 'circle',
+        itemGap: 20,
+        itemWidth: 8,
+        itemHeight: 8,
+        data: [],
+    },
+    xAxis: {
+        type: 'category',
+        data: [],
+    },
+    yAxis: {
+        type: 'value',
+    },
+    series: [],
+    grid: {
+        left: '3%',
+        right: '3%',
+    },
+}
+
+const customName = ref(['1'])
+const chart = 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) => {
+                return {
+                    value: item.irn,
+                    label: item.name ?? '-',
+                    iotModelId: item.modelId,
+                }
+            })
+        }
+    })
+}
+
+window.onresize = () => {
+    chart.value.resize()
+}
+
+const handleSelect = (index) => {
+    activeIndex.value = index
+}
+const selectstatAnalysis = () => {}
+
+const shortcuts = [
+    {
+        text: '昨日',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24)
+            return [start, end]
+        },
+    },
+    {
+        text: '前三天',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
+            return [start, end]
+        },
+    },
+    {
+        text: '前七天',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            return [start, end]
+        },
+    },
+    {
+        text: '上个月',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            return [start, end]
+        },
+    },
+]
+
+const statAnalysisOperate = () => {
+    option.series = []
+    chart.value.setOption(option, { notMerge: true })
+    const attributes = statAnalysisAttributeCode
+    const devices = statAnalysisDeviceId.reduce((deviceId, curr, index) => {
+        const existing = deviceId.find((item) => item.deviceId === curr)
+        if (existing) {
+            existing.attributes.push(statAnalysisAttributeCode[index])
+        } else {
+            deviceId.push({ deviceId: curr, attributes: [statAnalysisAttributeCode[index]] })
+        }
+        return deviceId
+    }, [])
+    console.log(devices)
+    const requestData = {
+        devices: devices,
+        interval: statAnalysisInterval.value,
+        startTime: new Date(statAnalysisTime.value[0]).getTime(),
+        endTime: new Date(statAnalysisTime.value[1]).getTime(),
+    }
+    historyDataReq(requestData, devices)
+}
+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 seriesData = {
+                            name: attribute,
+                            type: 'line',
+                            data: yData,
+                        }
+                        option.xAxis.data = xData.map((item) => timestampToTime(item))
+                        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 {
+    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;
+                }
+                .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 {
+            // width: 436px;
+            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>