admin-govern/src/views/govern/device/control/tabs/realtime.vue

<template>
    <div class="view">
        <div class="view_top">
            <!-- 左侧仪表盘 -->
            <div class="view_top_left">
                <div class="left_charts_title">电压有效值</div>
                <div class="left_charts"><MyEchart ref="pieChart1" :options="echartsDataV1"></MyEchart></div>
                <div class="left_charts"><MyEchart ref="pieChart2" :options="echartsDataV2"></MyEchart></div>
                <div class="left_charts"><MyEchart ref="pieChart3" :options="echartsDataV3"></MyEchart></div>
            </div>
            <div class="view_top_mid">
                <div class="mid_charts_title">基波电压/电流幅值(相位)</div>
                <div class="mid_charts"><MyEchart :options="echartsData1"></MyEchart></div>
            </div>
            <!-- 右侧仪表盘 -->
            <div class="view_top_right">
                <div class="right_charts_title">电流有效值</div>
                <div class="right_charts"><MyEchart ref="pieChart4" :options="echartsDataA1"></MyEchart></div>
                <div class="right_charts"><MyEchart ref="pieChart5" :options="echartsDataA2"></MyEchart></div>
                <div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
            </div>
        </div>
        <div class="view_bot">
            <div class="view_bot_tables">
                <!-- 表格数据 -->
                <div v-if="tableData.length != 0">
                    <!-- div设计table -->
                    <div class="table" v-for="(item, index) in columnsData" :key="index">
                        <!-- 单层表头 -->
                        <div class="thead">
                            <div class="thead_top">
                                {{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }})
                            </div>
                            <div class="thead_bot">
                                <div class="thead_bot_cell" v-for="(vv, key) in item" :key="key">
                                    {{ vv.phase + '相 ' }}
                                </div>
                            </div>
                        </div>
                        <!-- 有合并表头的数据 -->
                        <div class="tbody">
                            <div class="tbody_cell" v-for="(vv, key) in item" :key="key">
                                {{
                                    tableData.find(item => {
                                        return item.anotherName == vv.showName && item.phase == vv.phase
                                    })?.statisticalData
                                        ? tableData.find(item => {
                                              return item.anotherName == vv.showName && item.phase == vv.phase
                                          })?.statisticalData
                                        : '/'
                                }}
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else style="border: 1px solid #eee" v-loading="loading">
                    <el-empty description="暂无数据" />
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
import * as echarts from 'echarts'
import { split } from 'lodash-es'
const pieChartRef: any = ref()
const pieChart1: any = ref()
const pieChart2: any = ref()
const pieChart3: any = ref()
const pieChart4: any = ref()
const pieChart5: any = ref()
const pieChart6: any = ref()
const echartsData: any = ref({})
const echartsData1: any = ref({})
//电压有效值
const echartsDataV1: any = ref({})
const echartsDataV2: any = ref({})
const echartsDataV3: any = ref({})
//电流有效值
const echartsDataA1: any = ref({})
const echartsDataA2: any = ref({})
const echartsDataA3: any = ref({})
//渲染echarts
const init = () => {
    echartsData.value = {
        options: {
            tooltip: {},
            series: [
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 300,
                    radius: '150%',
                    center: ['55%', '76%'],
                    splitNumber: 3, //刻度数量
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 10,
                            shadowBlur: 0,
                            color: [
                                [0.3, '#91c7a1'],
                                [0.7, '#63869e'],
                                [1, '#002B6A']
                            ]
                        }
                    },

                    itemStyle: {
                        normal: {
                            shadowBlur: 10
                        }
                    },
                    //标题位置
                    title: {
                        fontWeight: 'bolder',
                        fontSize: 12,
                        offsetCenter: ['-130%', '-20%']
                    },
                    //数值位置
                    detail: {
                        fontSize: 12,
                        formatter: '{value}',
                        offsetCenter: ['0%', '25%']
                    },
                    data: [
                        {
                            value: 15,
                            name: 'A相'
                        }
                    ]
                }
            ]
        }
    }
    echartsDataV1.value = echartsData.value
    echartsDataV2.value = echartsData.value
    echartsDataV3.value = echartsData.value
    echartsDataA1.value = echartsData.value
    echartsDataA2.value = echartsData.value
    echartsDataA3.value = echartsData.value

    //中间指针图
    echartsData1.value = {
        options: {
            grid: {
                top: 230
            },
            title: {
                text: '',
                x: 'center'
            },
            tooltip: {
                formatter: '{a} <br/>{c} {b}'
            },
            legend: [],
            series: [
                {
                    name: '基波电流相位',
                    type: 'gauge',
                    // 表盘最小值
                    min: 180,
                    // 表盘最大值
                    max: -180,
                    // 表盘分割数
                    splitNumber: 12,
                    // 圆心位置
                    center: ['50%', '50%'],
                    // 半径
                    radius: '50%',
                    startAngle: 180,
                    endAngle: -179.99,
                    // 指针方向
                    clockWise: true,
                    title: false,
                    // 表盘外框
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [0.25, '#9D322D'],
                                [0.5, '#9D322D'],
                                [0.75, '#9D322D'],
                                [1, '#9D322D']
                            ],
                            width: 2
                        }
                    },
                    // 表盘细分数
                    axisTick: {
                        show: true,
                        splitNumber: 5,
                        length: 4,
                        lineStyle: {
                            color: '#9D322D',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    // 分割线
                    splitLine: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            color: '#9D322D',
                            width: 2,
                            type: 'solid'
                        }
                    },
                    // 分割线标识
                    axisLabel: {
                        show: true,
                        distance: 5,
                        formatter: function (v) {
                            switch (v + '') {
                                case '-180':
                                    return ''
                                default:
                                    return v
                            }
                        }
                    },

                    // 指针设置
                    pointer: {
                        length: '80%',
                        width: 3
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 40,
                            name: 'A相',
                            itemStyle: {
                                color: '#A5292A'
                            }
                        },
                        {
                            value: 10,
                            name: 'B相',
                            itemStyle: {
                                color: '#DAA521'
                            }
                        },
                        {
                            value: 20,
                            name: 'C相',
                            itemStyle: {
                                color: '#2F8A57'
                            }
                        }
                    ]
                },
                {
                    name: '基波电压相位',
                    type: 'gauge',
                    // 表盘最小值
                    min: 180,
                    // 表盘最大值
                    max: -180,
                    // 表盘分割数
                    splitNumber: 12,
                    // 圆心位置
                    center: ['50%', '50%'],
                    // 半径
                    radius: '85%',
                    startAngle: 180,
                    endAngle: -179.99,
                    // 指针方向
                    clockWise: true,
                    title: false,
                    // 表盘外框
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [0.25, '#9D322D'],
                                [0.5, '#9D322D'],
                                [0.75, '#9D322D'],
                                [1, '#9D322D']
                            ],
                            width: 1.5
                        }
                    },
                    // 表盘细分数
                    axisTick: {
                        show: true,
                        splitNumber: 5,
                        length: 6,
                        lineStyle: {
                            color: '#9D322D',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    // 分割线
                    splitLine: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            color: '#9D322D',
                            width: 2,
                            type: 'solid'
                        }
                    },
                    // 分割线标识
                    axisLabel: {
                        show: true,
                        distance: 5,
                        formatter: function (v) {
                            switch (v + '') {
                                case '-180':
                                    return ''
                                default:
                                    return v
                            }
                        }
                    },

                    // 指针设置
                    pointer: {
                        length: '90%',
                        width: 6
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 140,
                            name: 'A相',
                            itemStyle: {
                                color: '#A5292A'
                            }
                        },
                        {
                            value: 110,
                            name: 'B相',
                            itemStyle: {
                                color: '#DAA521'
                            }
                        },
                        {
                            value: 120,
                            name: 'C相',
                            itemStyle: {
                                color: '#2F8A57'
                            }
                        }
                    ]
                }
            ]
        }
    }

    for (var i = 0; i < echartsData1.value.options.series.length; i++) {
        echartsData1.value.options.series[i].type = 'gauge'
        echartsData1.value.options.series[i].startAngle = 90
        echartsData1.value.options.series[i].endAngle = -270
        echartsData1.value.options.series[i].center = ['50%', '50%']
    }
}
//接收父组件传递的table数据
const dataList: any = ref([])
const listV: any = ref([])
const listA: any = ref([])
const loading = ref(false)
//定义表格所需要的数据
const tableData: any = ref([])
loading.value = true
const columnsData: any = ref([])
const getColumns = () => {
    getRealTimeTableList().then(res => {
        columnsData.value = res.data
    })
}
//处理表格数据
const getTableData = (list: any) => {
    tableData.value = list
    columnsData.value.map((item: any) => {
        item.map((vv: any) => {
            vv.statisticalData = list.find((kk: any) => {
                return kk.anotherName == vv.showName && kk.phase == vv.phase
            })?.statisticalData
        })
    })
    loading.value = false
}
//获取实时数据
const getRealTimeData = (val: any) => {
    if (val.length != 0) {
        dataList.value = val
        dataList.value.map((item: any, index: any) => {
            if (item.anotherName == '相电压总有效值') {
                listV.value.push(item)
            }
            if (item.anotherName == '线电压总有效值') {
                listA.value.push(item)
            }
        })

        echartsDataV1.value.options.series[0].data = [
            {
                name:
                    listV.value.find((item: any) => {
                        return item.phase == 'A'
                    })?.phase + '相',
                value: listV.value.find((item: any) => {
                    return item.phase == 'A'
                })?.statisticalData
            }
        ]
        pieChart1.value.initChart()
        echartsDataV2.value.options.series[0].data = [
            {
                name:
                    listV.value.find((item: any) => {
                        return item.phase == 'B'
                    })?.phase + '相',
                value: listV.value.find((item: any) => {
                    return item.phase == 'B'
                })?.statisticalData
            }
        ]
        pieChart2.value.initChart()
        echartsDataV3.value.options.series[0].data = [
            {
                name:
                    listV.value.find((item: any) => {
                        return item.phase == 'C'
                    })?.phase + '相',
                value: listV.value.find((item: any) => {
                    return item.phase == 'C'
                })?.statisticalData
            }
        ]
        pieChart3.value.initChart()
        echartsDataA1.value.options.series[0].data = [
            {
                name:
                    listA.value.find((item: any) => {
                        return item.phase == 'AB'
                    })?.phase + '相',
                value: listA.value.find((item: any) => {
                    return item.phase == 'AB'
                })?.statisticalData
            }
        ]
        pieChart4.value.initChart()
        echartsDataA2.value.options.series[0].data = [
            {
                name:
                    listA.value.find((item: any) => {
                        return item.phase == 'BC'
                    })?.phase + '相',
                value: listA.value.find((item: any) => {
                    return item.phase == 'BC'
                })?.statisticalData
            }
        ]
        pieChart5.value.initChart()
        echartsDataA3.value.options.series[0].data = [
            {
                name:
                    listA.value.find((item: any) => {
                        return item.phase == 'CA'
                    })?.phase + '相',
                value: listA.value.find((item: any) => {
                    return item.phase == 'CA'
                })?.statisticalData
            }
        ]
        pieChart6.value.initChart()
        getColumns()
        getTableData(val)
    } else {
        init()
    }
}
defineExpose({ getRealTimeData })
onMounted(() => {
    init()
})
</script>
<style lang="scss" scoped>
.view {
    width: 100%;
    height: 100%;
    padding-bottom: 200px;
    box-sizing: border-box;
    overflow: auto;
    .view_top {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        border: 1px solid #eee;
        padding: 10px;
        .view_top_left,
        .view_top_right {
            width: 30%;
            height: 100%;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #eee;
            .left_charts,
            .right_charts {
                flex: none;
                width: 100%;
                height: 120px;

                margin-bottom: 16px;
                padding: 10px;
            }
        }
        .view_top_mid {
            flex: 1;
            border: 1px solid #eee;
            margin: 0 10px;
            padding: 10px;
            height: 450px;
            .mid_charts {
                width: 100%;
                height: 100%;
            }
        }

        .left_charts_title,
        .mid_charts_title,
        .right_charts_title {
            width: 100%;
            height: 20px;
            text-align: left;
            font-weight: 800;
            font-weight: 16px;
            line-height: 20px;
        }
    }
    .view_bot {
        min-height: 300px;
        margin: 10px 0 20px 0;
        .view_bot_tables {
            margin-bottom: 10px;
            height: auto;
        }
    }
}
.view::-webkit-scrollbar {
    display: none;
}
.table {
    width: 100%;
    height: 120px;
    border: 1px solid #eee;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    .thead {
        width: 100%;
        height: auto;
        background: #f4f6f9;
        text-align: center;
        display: flex;
        flex-direction: column;
        .thead_top {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border: 1px solid #eee;
            color: #111;
            font-size: 14px;
            font-weight: 800;
        }
        .thead_bot {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            color: #111;
            font-size: 14px;
            font-weight: 800;
            .thead_bot_cell {
                flex: 1;
                border: 1px solid #eee;
            }
        }
    }
    .tbody {
        flex: 1;
        display: flex;
        text-align: center;
        .tbody_cell {
            flex: 1;
            text-align: center;
            line-height: 40px;
            border: 1px solid #eee;
            border-bottom: 0;
        }
    }
    .tbody:hover {
        background: #f4f6f9;
    }
}
</style>