admin-govern/src/views/govern/device/control/popup.vue

<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: 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">
.control-popup {
    .el-dialog__body {
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
    }
}
</style>