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

<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 label="值类型">
                    <el-select v-model="form.dataLevel">
                        <el-option value="Primary" label="一次值"></el-option>
                        <el-option value="Secondary" label="二次值"></el-option>
                    </el-select>
                </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,
    dataLevel: ''
})
const echartsData = ref<any>(null)
const dialogVisible = ref(false)
const loading = ref(true)
onMounted(() => {
    init()
})
const init = () => {
    echartsData.value = null
    loading.value = true
    form.dataLevel = props.detail.dataLevel
    getDeviceDataTrend({
        devId: props.detail.devId,
        endTime: datePickerRef.value.timeValue[1],
        lineId: props.detail.lineId,
        startTime: datePickerRef.value.timeValue[0],
        statisticalParams: props.detail.children,
        dataLevel: form.dataLevel
    }).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>