设备监控弹框修改

2024-02-01 16:19:28 +08:00
parent 5bc06899d7
commit a146bba7a1
13 changed files with 171 additions and 140 deletions
--- a/src/views/govern/device/control/detail.vue
+++ b/src/views/govern/device/control/detail.vue
@@ -0,0 +1,154 @@
+<template>
+    <div class="device-control-detail child-router">
+        <div class="custom-table-header">
+            <el-form :inline="true">
+                <el-form-item label="">
+                    <el-page-header @back="$emit('close')">
+                        <template #content>
+                            <span class="text-large font-600 mr-3">{{ props.detail.name }}</span>
+                        </template>
+                    </el-page-header>
+                </el-form-item>
+                <el-form-item label="日期">
+                    <DatePicker ref="datePickerRef"></DatePicker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-Search" @click="init">查询</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <MyEchart :options="echartsData" v-if="echartsData" style="flex: 1" class="mt10" />
+        <el-empty description="暂无数据" v-else style="flex: 1" v-loading="loading"></el-empty>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, inject, nextTick, onMounted } 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'
+
+interface Props {
+    detail: anyObj
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    detail: () => {
+        return {}
+    }
+})
+const datePickerRef = ref()
+const form: any = reactive({
+    code: '',
+    icon: '',
+    id: '',
+    name: '',
+    path: '',
+    pid: '0',
+    remark: '',
+    routeName: '',
+    sort: 100,
+    type: 0
+})
+const echartsData = ref<any>(null)
+const dialogVisible = ref(false)
+const loading = ref(true)
+onMounted(() => {
+    init()
+})
+const init = () => {
+    echartsData.value = null
+    loading.value = true
+    getDeviceDataTrend({
+        endTime: datePickerRef.value.timeValue[1],
+        lineId: props.detail.lineId,
+        startTime: datePickerRef.value.timeValue[0],
+        statisticalParams: props.detail.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: 0.1,
+                    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">
+.device-control-detail{
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+}
+</style>