设备监控

2024-01-11 13:42:54 +08:00
parent ec338efa03
commit f1c76b7ac6
6 changed files with 176 additions and 4 deletions
--- a/src/views/govern/device/control/popup.vue
+++ b/src/views/govern/device/control/popup.vue
@@ -0,0 +1,156 @@
+<template>
+    <el-dialog class="cn-operate-dialog control-popup" v-model="dialogVisible" :title="title">
+        <el-form :inline="true">
+            <el-form-item label="日期">
+                <DatePicker ref="datePickerRef" v-if="dialogVisible"></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" @click="init">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <MyEchart :options="echartsData" v-if="echartsData" style="flex: 1" />
+        <el-empty description="暂无数据" v-else style="flex: 1" v-loading="loading"></el-empty>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject, nextTick } from 'vue'
+import { reactive } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { install$5 } from 'echarts/types/dist/shared'
+const datePickerRef = ref()
+const form: any = reactive({
+    code: '',
+    icon: '',
+    id: '',
+    name: '',
+    path: '',
+    pid: '0',
+    remark: '',
+    routeName: '',
+    sort: 0,
+    type: 0
+})
+const echartsData = ref<any>(null)
+const popupData = ref<any>(null)
+const dialogVisible = ref(false)
+const loading = ref(true)
+const title = ref('')
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    popupData.value = data
+    dialogVisible.value = true
+    nextTick(() => {
+        init()
+    })
+}
+const init = () => {
+    echartsData.value = null
+    loading.value = true
+    getDeviceDataTrend({
+        endTime: datePickerRef.value.timeValue[1],
+        lineId: popupData.value.lineId,
+        startTime: datePickerRef.value.timeValue[0],
+        statisticalParams: popupData.value.children
+    }).then(res => {
+        if (res.data.length && res.data[0].length) {
+            let arr: any[] = []
+            res.data.forEach((item: any[]) => {
+                arr.push(...item)
+            })
+            echartsData.value = {
+                options: {
+                    grid: {
+                        top: '50px',
+                        left: '10px',
+                        right: '20px',
+                        bottom: '40px',
+                        containLabel: true
+                    },
+                    series: res.data.map((item: any) => {
+                        return {
+                            data: item.map((item: any) => {
+                                return item.statisticalData
+                            }),
+                            markPoint: {
+                                symbol: 'circle',
+                                symbolSize: 8,
+                                label: {
+                                    show: false
+                                },
+                                data: [
+                                    { type: 'max', name: 'Max' },
+                                    { type: 'min', name: 'Min' }
+                                ]
+                            },
+                            type: 'line',
+                            showSymbol: false,
+                            smooth: true,
+                            name: item[0].anotherName
+                        }
+                    })
+                },
+                legend: {
+                    data: res.data.map((item: any[]) => {
+                        return item[0].anotherName
+                    })
+                },
+                yAxis: {
+                    name: `单位:(${arr[0].unit})`,
+                    type: 'value',
+                    axisLine: {
+                        show: true
+                    },
+                    minInterval: 1,
+                    interval: parseInt(
+                        (
+                            (arr
+                                .map(item => item.statisticalData)
+                                .sort((a, b) => {
+                                    return b - a
+                                })[0] *
+                                1.5) /
+                            5
+                        ).toFixed(0)
+                    ),
+                    min: 0,
+                    max: parseInt(
+                        (
+                            arr
+                                .map(item => item.statisticalData)
+                                .sort((a, b) => {
+                                    return b - a
+                                })[0] * 1.5
+                        ).toFixed(0)
+                    )
+                },
+                xAxis: {
+                    type: 'category',
+                    data: res.data[0].map((item: any) => {
+                        return item.time
+                    }),
+                    axisLabel: {
+                        formatter: function (value: string) {
+                            return value.split(' ').join('\n')
+                        }
+                    }
+                }
+            }
+        } else {
+            echartsData.value = null
+        }
+        loading.value = false
+    })
+}
+defineExpose({ open })
+</script>
+<style lang="scss">
+.control-popup {
+    .el-dialog__body {
+        padding-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+    }
+}
+</style>