fix:对接报表数据

web

昨天 c6159b0a5a424250adeca1bc2b475da5324fe038

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

@@ -2,21 +2,24 @@
import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import Table from '@/components/Table/index.vue'
import { warnHistory, exportWarnHistory, editConfirm } 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 = [
@@ -27,51 +30,60 @@
    { 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 = () => {
@@ -98,6 +110,7 @@

// 处理报警内容
const handleComfirm = () => {
    if(!warnStatus.value) ElMessage.warning('请选择报警类型')
    editConfirm({ id: dialogInfo.value.id, status: warnStatus.value }).then(res => {
        ElMessage.success('提交成功')
        tableRef.value.getData()
@@ -109,8 +122,17 @@
    })
}

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

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

@@ -120,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>