fix:对接报表数据

web

2 天以前 c6159b0a5a424250adeca1bc2b475da5324fe038

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

@@ -2,19 +2,24 @@
import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import Table from '@/components/Table/index.vue'
import { warnHistory, exportWarnHistory } from '@/api/screen/warning/index.js'
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(0)
const timeType = ref(1)
const warnChartRef = ref()
const exportTime = ref()
const searchData = reactive({
    createTimeRange: ''
    createTimeRange: '',
    monitorType: 2
})

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

const warnChartData = ref([])

let warnCharts = null;
let tableHead = [
@@ -25,56 +30,67 @@
    { prop: 'isConfirm', label: '报警确认', slot: true },
]

const initWarnChart = () => {
const initWarnCgart = () => {
    if(warnChartRef.value) {
        warnCharts = echarts.init(warnChartRef.value);
        const options = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: 80,
                left: 60,
                right: 60,
                bottom: 60
            },
            xAxis: {
                type: 'category',
                data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            yAxis: {
                type: 'value',
                name: '次',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: '1.2rem'
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            series: [
                {
                    data: [36, 44, 38, 24, 63],
                    type: 'bar',
                    itemStyle: {
                        color: 'rgba(187,207,255,0.6)'
                    }
                }
            ]
        }
        warnCharts.setOption(options);
    }
}

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) {
    if(exportTime.value && exportTime.value.length > 0) {
        searchData.createTimeRange = exportTime.value[0] + '~' + exportTime.value[1]
    }else {
        searchData.createTimeRange = ''
    }
    tableRef.value.getData()
}
@@ -82,7 +98,7 @@
// 导出报警报表
const exportWarnTabl = () => {
    exportWarnHistory({ createTimeRange: searchData.createTimeRange }).then(res => {
        exportBlobFile(res)
        exportBlobFile(res, '报警记录')
    })
}

@@ -93,10 +109,30 @@
}

// 处理报警内容
const handleComfirm = () => {}
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(() => {
    initWarnChart()
    initWarnCgart()
    getWarnCharts()
})
</script>

@@ -106,10 +142,10 @@
            <div class="item-t">
                <div class="name">报警分析</div>
                <div class="select">
                    <el-radio-group v-model="timeType">
                    <el-radio-group v-model="timeType" @change="getWarnCharts">
                        <el-radio :value="1">日</el-radio>
                        <el-radio :value="2">月</el-radio>
                        <el-radio :value="3">年</el-radio>
                        <el-radio :value="3">月</el-radio>
                        <el-radio :value="5">年</el-radio>
                    </el-radio-group>
                </div>
            </div>
@@ -125,6 +161,7 @@
                        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="结束时间"
@@ -136,6 +173,7 @@
                <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>
@@ -155,27 +193,35 @@
            <div class="message">
                <div class="message-item">
                    <div class="title">报警代码:</div>
                    <div class="val">{{dialogInfo.code}}</div>
                    <div class="val">{{dialogInfo?.code}}</div>
                </div>
                <div class="message-item">
                    <div class="title">报警设备:</div>
                    <div class="val">{{dialogInfo.facilityName}}</div>
                    <div class="val">{{dialogInfo?.facilityName}}</div>
                </div>
                <div class="message-item">
                    <div class="title">报警内容:</div>
                    <div class="val">{{dialogInfo.description}}</div>
                    <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.lastTime}}</div>
                    <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="timeType">
                            <el-radio :value="1">已处理</el-radio>
                            <el-radio :value="2">已证实</el-radio>
                            <el-radio :value="3">误  报</el-radio>
                        <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>