admin-sjzx/src/views/pqs/runManage/cleaning/components/abnormal.vue

<!--业务用户管理界面-->
<template>
    <div>
        <TableHeader date-picker ref="TableHeaderRef">
            <template v-slot:select>
                <el-form-item label="对象类型">
                    <el-select
                        v-model="tableStore.table.params.objType"
                        clearable
                        style="width: 100%"
                        placeholder="请选择对象类型"
                    >
                        <el-option
                            v-for="item in objTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </template>

            <template v-slot:operation></template>
        </TableHeader>
        <div class="card-list pt10">
            <div class="monitoringPoints">
                <el-card style="height: 200px">
                    <template #header>
                        <div class="card-header">
                            <span>监测点统计</span>
                        </div>
                    </template>
                    <div>
                        <div class="statistics">
                            <div class="divBox">
                                <span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
                                <span class="divBox_title">监测点总数</span>
                                <span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
                            </div>
                            <div class="divBox" style="width: 200px">
                                <span class="iconfont icon-igw-f-warning-data" style="color: #fca955"></span>
                                <span class="divBox_title">异常测点数</span>
                                <span class="divBox_num" style="color: #fca955">
                                    {{ monitoringPoints.abnormalNum }}
                                </span>
                            </div>
                        </div>
                        <div class="echartTitle">
                            <div>异常占比</div>
                            <div>
                                {{
                                    isNaN((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100)
                                        ? 0
                                        : ((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100).toFixed(2)
                                }}%
                            </div>
                        </div>
                        <div style="height: 30px">
                            <MyEchart :options="percentage"></MyEchart>
                        </div>
                    </div>
                </el-card>
                <el-card class="mt10">
                    <template #header>
                        <div class="card-header">
                            <span>异常指标统计</span>
                        </div>
                    </template>
                    <div class="mb5" style="height: 40px">
                        <el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
                    </div>
                    <div class="header">
                        <span style="width: 170px; text-align: left">指标名称</span>
                        <span style="flex: 1">合理范围</span>
                        <span style="width: 90px">异常测点数</span>
                    </div>
                    <div :style="indicatorHeight" style="overflow-y: auto">
                        <div v-for="o in abnormal" class="abnormal mb10">
                            <span style="width: 170px; height: 24px" class="iconDiv">
                                <div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
                                {{ o.targetName }}
                            </span>
                            <span style="flex: 1; text-align: center">
                                <!-- 合理范围： -->
                                <span style="color: #388e3c" class="text">{{ o.rangeDesc }}</span>
                            </span>
                            <span style="width: 90px; text-align: center">
                                <span
                                    style="color: #ff9800; cursor: pointer; text-decoration: underline"
                                    class="text"
                                    @click="quantityClick(o)"
                                >
                                    {{ o.ids.length }}
                                </span>
                            </span>
                        </div>
                    </div>
                </el-card>
            </div>
            <el-card class="detail ml10" :style="pageHeight">
                <template #header>
                    <div class="card-header">
                        <span>异常详情统计</span>
                    </div>
                </template>
                <div style="height: 350px">
                    <MyEchart :options="options"></MyEchart>
                </div>
                <el-form :inline="true" class="form">
                    <el-form-item label="异常持续天数"></el-form-item>
                    <el-form-item label="异常阀值(天)">
                        <el-input-number
                            v-model="tableStore.table.params.alarmDayLimit"
                            :min="0"
                            :step="1"
                            step-strictly
                        />
                    </el-form-item>
                    <el-form-item label="预警阀值(天)">
                        <el-input-number
                            v-model="tableStore.table.params.warnDayLimit"
                            :min="0"
                            :step="1"
                            step-strictly
                        />
                    </el-form-item>
                    <el-form-item class="form_but">
                        <el-button type="primary" @click="MonitorVerify" icon="el-icon-Refresh">更新</el-button>
                        <el-button type="primary" @click="onExport" icon="el-icon-Download">导出</el-button>
                    </el-form-item>
                </el-form>
                <!--表格-->
                <Table ref="tableRef"></Table>
            </el-card>
        </div>
        <anomalyDetails ref="anomalyDetailsRef" />
    </div>
</template>

<script setup lang="ts">
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue'
import anomalyDetails from './anomalyDetails.vue'
import { getMonitorVerifyDay } from '@/api/device-boot/dataVerify'
import { queryFirstNode } from '@/api/auth'

const anomalyDetailsRef = ref()
const dictData = useDictData()
//字典获取监督对象类型
const objTypeList: any = ref([])
const pageHeight = mainHeight(155)
const indicatorHeight = mainHeight(507)
const tableRef = ref()
const monitoringPoints = ref({
    runNum: 0,
    abnormalNum: 0
})

const percentage = ref({})
const TableHeaderRef = ref()
const abnormal: any = ref([])
const mapList: any = ref([])
const segmented = ref(1)
const segmentedList = [
    {
        label: '基础数据',
        value: 1
    },
    {
        label: '稳态数据',
        value: 2
    },
    {
        label: '暂态数据',
        value: 3
    }
]
const tableStore = new TableStore({
    url: '/device-boot/dataVerify/getMonitorVerifyData',
    method: 'POST',
    showPage: false,
    filename: '异常数据',
    publicHeight: 530,
    column: [
        {
            title: '序号',
            width: 80,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        {
            title: '监测点名称',
            field: 'monitorName',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '所属终端名称',
            field: 'devName',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '所属电站',
            field: 'stationName',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '监测对象类型',
            field: 'objType'
        },
        {
            title: '监测对象名称',
            field: 'objName'
        },
        { title: '电压等级', field: 'voltageLevel' },
        {
            title: '异常天数',
            field: 'abnormalDay',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '严重度',
            field: 'severity',
            render: 'tag',
            custom: {
                0: 'warning',
                1: 'danger'
            },

            replaceValue: {
                0: '预警',
                1: '告警'
            }
        },
        // {
        //     title: '操作',
        //     width: '120',
        //     render: 'buttons',
        //     buttons: [
        //         {
        //             name: 'edit',
        //             title: '工单',
        //             type: 'primary',
        //             icon: 'el-icon-Plus',
        //             render: 'basicButton',
        //             click: row => {}
        //         }
        //     ]
        // }
    ],
    loadCallback: () => {
        // console.log('🚀 ~   abnormal.value:', tableStore.table.data)
        monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
        monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //异常测点数
        abnormal.value = tableStore.table.data.targetList
        mapList.value = tableStore.table.data.mapList
        tableStore.table.allData = tableStore.table.data.monitorAlarmInfo
        tableStore.table.data = tableStore.table.data.monitorAlarmInfo

        echart()
    }
})

const options = ref({})
const echart = () => {
    percentage.value = {
        color: ['#ff9800'],
        options: {
            dataZoom: null,
            toolbox: {
                show: false
            },
            grid: {
                top: '0%',
                left: '0%',
                right: '0%',
                bottom: '0%'
            },
            tooltip: {
                show: false
            },
            legend: {
                show: false
            },
            yAxis: {
                show: false,
                data: ['']
            },
            xAxis: [
                {
                    show: false,
                    type: 'value'
                }
            ],

            series: [
                {
                    name: '异常占比',
                    type: 'bar',
                    barWidth: 12,
                    data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
                    z: 0,
                    zlevel: 0,

                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#FD6E6A' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#ff9800' // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    }
                },
                {
                    type: 'pictorialBar',
                    itemStyle: {
                        normal: {
                            color: '#fff'
                        }
                    },
                    symbolRepeat: 50,
                    // symbolMargin: 300,
                    symbol: 'rect',
                    symbolClip: true,
                    symbolSize: [2, 15],
                    symbolPosition: 'start',
                    symbolOffset: [0, 0],
                    data: [100],
                    z: 1,
                    zlevel: 0
                },
                {
                    name: '机器故障率',
                    type: 'bar',
                    barGap: '-125%',
                    data: [100],
                    barWidth: 18,

                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            barBorderColor: 'rgb(148,217,249)',
                            barBorderWidth: 1
                        }
                    },
                    z: 2
                }
            ]
        }
    }
    options.value = {
        title: {
            text: `监测点异常情况(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
        },
        xAxis: {
            name: '时间',
            axisLine: {
                show: true
            },
            data: mapList.value.map(item => item.time),
            axisLabel: {
                formatter: function (value) {
                    let time = ''
                    if (value.slice(-2) == '01') {
                        time = value
                    } else {
                        time = value.slice(5, 10)
                    }
                    return time
                }
            }
        },
        yAxis: {
            name: '数量' // 给X轴加单位
        },
        grid: {},

        options: {
            series: [
                {
                    name: '异常监测点数量',
                    type: 'bar',

                    data: mapList.value.map(item => item.val)
                    // mapList.value.map(item => ({
                    //     value: [item.time, item.val]
                    // }))
                }
            ]
        }
    }
}
tableStore.table.params.deptId = dictData.state.area[0].id
tableStore.table.params.objType = ''
tableStore.table.params.alarmDayLimit = 5
tableStore.table.params.warnDayLimit = 1

const quantityClick = (e: any) => {
    anomalyDetailsRef.value.open(e)
}
// 更新
const MonitorVerify = () => {
    tableStore.table.loading = true
    getMonitorVerifyDay(tableStore.table.params).then(res => {
        tableStore.table.data = res.data
        tableStore.table.allData = res.data
        tableStore.table.loading = false
    })
}
// 导出
const onExport = () => {
    tableStore.table.allFlag = true
}
onMounted(() => {
    TableHeaderRef.value.setDatePicker([
        { label: '年份', value: 1 },
        { label: '季度', value: 2 },
        { label: '月份', value: 3 }
    ])
    queryFirstNode({ type: 0 }).then(res => {
        objTypeList.value = res.data
    })
    // 加载数据
    tableStore.index()
})

tableStore.table.params.name = ''
provide('tableStore', tableStore)
</script>
<style lang="scss" scoped>
.card-list {
    display: flex;
    .monitoringPoints {
        width: 440px;
        position: relative;
        .statistics {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 10px;
            .divBox {
                width: 200px;
                height: 70px;
                padding: 10px;
                display: flex;

                .iconfont {
                    font-size: 40px;
                    margin-right: 5px;
                }
                .divBox_title {
                    font-weight: 550;
                }
                .divBox_num {
                    font-size: 20px;
                    font-weight: 550;
                    margin-left: auto;
                    font-family: AlimamaDongFangDaKai;
                }
                align-items: center;
                // text-align: center;
                border-radius: 5px;
                &:nth-child(1) {
                    background-color: #eef8f0;
                }
                &:nth-child(2) {
                    background-color: #fff6ed;
                }
                &:nth-child(3) {
                    background-color: #e5f8f6;
                }
            }
        }
    }
    .detail {
        flex: 1;
    }
    .abnormal {
        width: 100%;
        background-color: #f3f6f9;
        border-radius: 5px;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        padding: 5px 0px 5px 10px;
        .iconDiv {
            display: flex;
            align-items: center;
            div {
                width: 4px;
                height: 18px;
                margin-right: 5px;
                background-color: var(--el-color-primary);
            }
        }
        .text {
            font-weight: 700;
            font-size: 16px;
            font-family: 'Source Code Pro', monospace;

            // font-feature-settings: 'tnum';
        }
    }
}
.header {
    display: flex;
    text-align: center;

    font-weight: 700;
    padding: 5px;
}
:deep(.el-card__header) {
    padding: 10px;
    span {
        font-weight: 600;
    }
}
:deep(.el-card__body) {
    padding: 10px;
}
.iconFont {
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
}
.form {
    position: relative;
    .form_but {
        position: absolute;
        right: -22px;
    }
}
.card-header {
    font-size: 16px;
}
:deep(.table_name) {
    color: var(--el-color-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.echartTitle {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    div:nth-child(2) {
        font-size: 16px;
        color: #fca955;
    }
}

:deep(.el-segmented__item-selected, ) {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented__item, ) {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented) {
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
</style>