fix:对接报表数据

web

2 天以前 c6159b0a5a424250adeca1bc2b475da5324fe038

 src/views/screen/flow/warning/index.vue

@@ -1,13 +1,316 @@
<script setup>
import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import Table from '@/components/Table/index.vue'
import { warnHistory, exportWarnHistory, editConfirm, getWarnChartsInfo } from '@/api/screen/warning/index.js'
import { exportBlobFile } from '@/utils/index.js'
import { ElMessage } from 'element-plus'

const tableRef = ref(null)
const timeType = ref(1)
const warnChartRef = ref()
const exportTime = ref()
const searchData = reactive({
    createTimeRange: '',
    monitorType: 2
})

const openDialog = ref(false)
const dialogInfo = ref()
const warnStatus = ref(0)

const warnChartData = ref([])

let warnCharts = null;
let tableHead = [
    { prop: 'code', label: '报警代码' },
    { prop: 'facilityName', label: '报警设备', },
    { prop: 'description', label: '报警内容' },
    { prop: 'lastTimeView', label: '报警时间' },
    { prop: 'isConfirm', label: '报警确认', slot: true },
]

const initWarnCgart = () => {
    if(warnChartRef.value) {
        warnCharts = echarts.init(warnChartRef.value);
    }
}

const updateWarnChart = () => {
    let xdata = []
    let sdata = []
    warnChartData.value?.forEach(item => {
        xdata.push(item.key)
        sdata.push(item.value)
    })
    const options = {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top: 80,
            left: 60,
            right: 60,
            bottom: 60
        },
        xAxis: {
            type: 'category',
            data: xdata,
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
        },
        yAxis: {
            type: 'value',
            name: '次',
            nameTextStyle: {
                color: '#fff',
                fontSize: '1.2rem'
            },
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
        },
        series: [
            {
                data: sdata,
                type: 'bar',
                itemStyle: {
                    color: 'rgba(187,207,255,0.6)'
                }
            }
        ]
    }
    warnCharts.setOption(options);
}

const searchTable = () => {
    if(exportTime.value && exportTime.value.length > 0) {
        searchData.createTimeRange = exportTime.value[0] + '~' + exportTime.value[1]
    }else {
        searchData.createTimeRange = ''
    }
    tableRef.value.getData()
}

// 导出报警报表
const exportWarnTabl = () => {
    exportWarnHistory({ createTimeRange: searchData.createTimeRange }).then(res => {
        exportBlobFile(res, '报警记录')
    })
}

// 获取报警内容
const getWarnInfi = (data) => {
    dialogInfo.value = data
    openDialog.value = true
}

// 处理报警内容
const handleComfirm = () => {
    if(!warnStatus.value) ElMessage.warning('请选择报警类型')
    editConfirm({ id: dialogInfo.value.id, status: warnStatus.value }).then(res => {
        ElMessage.success('提交成功')
        tableRef.value.getData()
    }).catch(err => {
        ElMessage.warning('提交失败')
    }).then(() => {
        warnStatus.value = 0
        openDialog.value = false
    })
}

// 获取报警分析
const getWarnCharts = () => {
    getWarnChartsInfo({ type: timeType.value }).then(res => {
        warnChartData.value = res.data
        updateWarnChart()
    })
}

onMounted(() => {
    initWarnCgart()
    getWarnCharts()
})
</script>

<template>
    <div>
        预警管理
    <div class="warn">
        <div class="warn-l item">
            <div class="item-t">
                <div class="name">报警分析</div>
                <div class="select">
                    <el-radio-group v-model="timeType" @change="getWarnCharts">
                        <el-radio :value="1">日</el-radio>
                        <el-radio :value="3">月</el-radio>
                        <el-radio :value="5">年</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="charts" ref="warnChartRef"></div>
        </div>
        <div class="warn-r item">
            <div class="item-t">
                <div class="name">报警记录</div>
                <div>
                    <el-date-picker
                        v-model="exportTime"
                        type="datetimerange"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        style="width: 28rem"
                        clearable
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                    />
                    <el-button type="primary" style="margin-left: 15px" @click="searchTable">搜索</el-button>
                </div>
            </div>
            <div class="warn-table">
                <Table :getList="warnHistory" :searchData="searchData" :headList="tableHead" ref="tableRef">
                    <template #isConfirm="scope">
                        <div v-if="scope.row.isConfirm === 200" style="color: #1ab394">已处理</div>
                        <div v-else-if="scope.row.isConfirm === 30"  style="color: #1ab394">误报</div>
                        <div v-else-if="scope.row.isConfirm === 20"  style="color: #e8ab04" @click="getWarnInfi(scope.row)">未处理</div>
                        <div v-else style="color: #f30101" @click="getWarnInfi(scope.row)">待确认</div>
                    </template>
                    <template v-slot:pagination>
                        <el-button type="success" style="width: 6rem" @click="exportWarnTabl">导出</el-button>
                    </template>
                </Table>
            </div>
        </div>
        <el-dialog
            v-model="openDialog"
            title="报警确认框"
            width="40rem"
            show-close
            class="warnDialog"
        >
            <div class="message">
                <div class="message-item">
                    <div class="title">报警代码:</div>
                    <div class="val">{{dialogInfo?.code}}</div>
                </div>
                <div class="message-item">
                    <div class="title">报警设备:</div>
                    <div class="val">{{dialogInfo?.facilityName}}</div>
                </div>
                <div class="message-item">
                    <div class="title">报警次数:</div>
                    <div class="val">{{dialogInfo?.totalCount}}</div>
                </div>
                <div class="message-item">
                    <div class="title">开始报警时间:</div>
                    <div class="val">{{dialogInfo?.createTimeView}}</div>
                </div>
                <div class="message-item">
                    <div class="title">最后报警时间:</div>
                    <div class="val">{{dialogInfo?.lastTimeView}}</div>
                </div>
                <div class="message-line">
                    <div class="title">报警内容:</div>
                    <div class="val">{{dialogInfo?.description}}</div>
                </div>
                <div class="message-line">
                    <div class="title">报警确认:</div>
                    <div class="val">
                        <el-radio-group v-model="warnStatus">
                            <el-radio :value="200">已处理</el-radio>
                            <el-radio :value="20">已证实</el-radio>
                            <el-radio :value="30">误  报</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="openDialog = false">取消</el-button>
                <el-button type="primary" @click="handleComfirm">
                  确定
                </el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">

.warn{
    height: 100%;
    background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    .item{
        width: 48%;
        height: 96%;
        background: rgba(23,108,229,0.3);
        border: 1px solid #176CE5;
        border-radius: 8px;
        .item-t{
            height: 10%;
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name{
                font-size: 36px;
                color: #fff;
            }
            :deep(.el-date-editor){
                flex-grow: 0;
            }
            .select{
                :deep(.el-radio){
                    color: #fff;
                }
                :deep(.el-radio__label){
                    font-size: 20px;
                }
                :deep(.el-radio__input.is-checked+.el-radio__label){
                    color: #00ff00;
                }
                :deep(.el-radio__input.is-checked .el-radio__inner){
                    background-color: #00ff00;
                }
            }
        }
        .charts{
            height: 90%;
        }
        .warn-table{
            padding: 0 20px;
            height: 90%;
        }
    }
}
.warnDialog{
    .message{
        display: flex;
        flex-wrap: wrap;
        .message-item{
            width: 50%;
            display: flex;
            align-items: center;
            padding: 10px 0;
            .val{
                margin-left: 10px;
            }
        }
        .message-line{
            width: 100%;
            padding: 10px 0;
            display: flex;
            align-items: center;
            .val{
                margin-left: 10px;
            }
        }
    }
}
</style>