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" :disabled="props.dataLevel == 'Primary'">
                        <el-option value="Primary" label="一次值"></el-option>
                        <el-option value="Secondary" label="二次值"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据类型" label-width="80px">
                    <el-select v-model="form.statMethod" placeholder="请选择值类型">
                        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
                            :value="item.id"></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'
import { yMethod } from '@/utils/echartMethod'

interface Props {
    detail: anyObj
    dataLevel: string
}

const props = withDefaults(defineProps<Props>(), {
    detail: () => {
        return {}
    },
    dataLevel: () => {
        return ''
    }
})
const datePickerRef = ref()
const form: any = reactive({
    code: '',
    icon: '',
    id: '',
    name: '',
    path: '',
    pid: '0',
    remark: '',
    routeName: '',
    sort: 100,
    dataLevel: '',
    statMethod: 'avg'
})
const typeOptions = [
    {
        name: '平均值',
        id: 'avg'
    },
    {
        name: '最大值',
        id: 'max'
    },
    {
        name: '最小值',
        id: 'min'
    },
    {
        name: 'CP95值',
        id: 'cp95'
    }
]
const echartsData = ref<any>(null)
const dialogVisible = ref(false)
const loading = ref(true)
onMounted(() => {
    if (props.dataLevel == 'Secondary') {
        form.dataLevel = 'Primary'
    } else {
        form.dataLevel = props.dataLevel
    }
    init()
})
const init = () => {
    echartsData.value = null
    loading.value = true
    console.log(props.detail.children, 'props.detail.children')
    let statisticalParams = props.detail.children
    statisticalParams[0].statMethod = form.statMethod
    getDeviceDataTrend({
        devId: props.detail.devId,
        endTime: datePickerRef.value.timeValue[1],
        lineId: props.detail.lineId,
        startTime: datePickerRef.value.timeValue[0],
        statisticalParams: statisticalParams,
        dataLevel: form.dataLevel,
        statMethod: form.statMethod
    }).then(res => {


        if (res.data.length && res.data[0].length) {
            let arr: any[] = []
            res.data.forEach((item: any[]) => {
                arr.push(...item)
            })
            let [min, max] = yMethod(arr.map((item: any) => item.statisticalData.toFixed(2)))
            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, i: any) => {
                                return [res.data[0][i].time, item.statisticalData.toFixed(2)]
                            }),
                            // data: [
                            //     [1584086222000, '573'],
                            //     [1584086342000, '57'],
                            //     [1584086462000, '56']
                            // ],
                            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
                        }
                    })
                },
                tooltip: {
                    axisPointer: {
                        type: 'cross',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                legend: {
                    data: res.data.map((item: any[]) => {
                        return item[0]?.anotherName
                    })
                },
                yAxis: {
                    name: `单位:(${arr[0].unit == null ? ' / ' : arr[0].unit})`,
                    type: 'value',
                    axisLine: {
                        show: true
                    },

                    min: min,
                    max: max,
                    // interval:interval,
                   
                    // min: 134,
                    // max: 500,
                    // min: Math.ceil(
                    //     arr
                    //         .map((item: any) => item.statisticalData)
                    //         .sort((a, b) => {
                    //             return a - b
                    //         })[0]
                    // ),
                    // max: Math.floor(
                    //     arr
                    //         .map(item => item.statisticalData)
                    //         .sort((a, b) => {
                    //             return b - a
                    //         })[0]
                    // ),
                    // interval: (Math.floor(
                    //     arr
                    //         .map(item => item.statisticalData)
                    //         .sort((a, b) => {
                    //             return b - a
                    //         })[0]
                    // ) - Math.ceil(
                    //     arr
                    //         .map((item: any) => item.statisticalData)
                    //         .sort((a, b) => {
                    //             return a - b
                    //         })[0]
                    // )) / 5,
                 

                },

                xAxis: {
                    type: 'time',
                    axisLabel: {
                        formatter: {
                            day: '{MM}-{dd}',
                            month: '{MM}',
                            year: '{yyyy}',
                        }
                    }
                    // data: res.data[0].map((item: any) => {
                    //     return item.time
                    // }),

                    // axisLabel: {
                    //     formatter: function (value: string) {
                    //         return value.split(' ').join('\n')
                    //     }
                    // }
                }
            }
            if ((echartsData.value.legend = ['A相', 'B相', 'C相'])) {
                echartsData.value.color = ['#FFCC00', '#009900', '#CC0000']
            }
        } else {
            echartsData.value = null
        }
        loading.value = false
    })
}
defineExpose({ open })
</script>
<style lang="scss">
.device-control-detail {
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.el-form--inline .el-form-item {
    margin-bottom: 10px !important;
}
</style>