fix:对接报表数据

web

2 天以前 c6159b0a5a424250adeca1bc2b475da5324fe038

 src/views/screen/temperature/statics/index.vue

@@ -1,13 +1,403 @@
<script setup>
import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import {getStatisticsData, getStatisticsAlarm} from '@/api/screen/statics/index.js'
import {getTemperaturePointList} from '@/api/screen/index.js'
import moment from "moment";

const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', expandTrigger: 'hover', emitPath: false }; //级联选择器配置

const menuList = ref([])
const pointId = ref('')
const wendu = reactive({
    type: 1,
    time: moment().format('YYYY-MM-DD'),
    value: moment().format('YYYY-MM-DD'),
    data: []
})
const warn = reactive({
    type: 1,
    time: moment().format('YYYY-MM-DD'),
    value: moment().format('YYYY-MM-DD'),
    data: []
})

const wenduChartRef = ref()
const shuiweiChartRef = ref()
let wenduCharts = null;
let shuiweiCharts = null

const handleSelectType = (type) => {
    if(type === 'wendu') {
        wendu.time = ''
        wendu.value = ''
    } else if (type === 'warn') {
        warn.time = ''
        warn.value = ''
    }
}

const updatewenduChart = () => {
    let xdata = []
    let sdata = []
    wendu.data[0]?.dataVOList?.length > 0 && wendu.data[0]?.dataVOList.forEach(item => {
        xdata.push(item.dataTime)
        sdata.push(item.avgValue)
    })
    const options = {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top: 80,
            left: 60,
            right: 60,
            bottom: 60
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            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: 'line',
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {offset: 0.2, color: 'rgba(0,255,255,0.5)' },
                            {offset: 1, color: 'rgba(0,255,255,0.1)' },
                        ],
                        global: false // 缺省为 false
                    }
                }
            }
        ]
    }
    wenduCharts.setOption(options);
}

const updatewarnChart = () => {
    let xdata = []
    let sdata = []
    warn.data?.length > 0 && warn.data.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: 'm',
            nameTextStyle: {
                color: '#fff',
                fontSize: '1.2rem'
            },
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
        },
        series: [
            {
                data: sdata,
                type: 'bar',
                itemStyle: {
                    color: '#BBCFFF'
                }
            }
        ]
    }
    shuiweiCharts.setOption(options);
}

// 获取时间
const getTime = (value, type, types) => {
    const momentValue = moment(value)
    const time = momentValue.format('YYYY-MM-DD')
    let data = ''
    switch (type) {
        case 1:
            data = ''
            break;
        case 3:
            data = momentValue.add(1, 'month').format('YYYY-MM-DD')
            break;
        case 5:
            data = momentValue.add(1, 'year').format('YYYY-MM-DD')
            break;
        default:
            break;
    }
    if(types === 'wendu') {
        if(data) {
            wendu.value = time + '~' + data
        } else {
            wendu.value = time
        }
        getTempData()
    } else {
        if(data) {
            warn.value = time + '~' + data
        } else {
            warn.value = time
        }
        getalarmData()
    }
}

// 获取水温监控点菜单
const getTempMonitor = () => {
    getTemperaturePointList().then(res => {
        menuList.value = res.data
        pointId.value = res.data?.[0]?.childrenList?.[0]?.id
        getTempData()
    })
}

// 获取水温数据
const getTempData = () => {
    const data = {
        type: wendu.type,
        dataTime: wendu.value,
        pointId: pointId.value
    }
    getStatisticsData(data).then(res => {
        wendu.data = res.data
        updatewenduChart()
    })
}

// 获取报警数据
const getalarmData = () => {
    const data = {
        type: warn.type,
        dataTime: warn.value
    }
    getStatisticsAlarm(data).then(res => {
        warn.data = res.data
        updatewarnChart()
    })
}

const initCharts = () => {
    if(wenduChartRef.value) {
        wenduCharts = echarts.init(wenduChartRef.value);
    }
    if(shuiweiChartRef.value) {
        shuiweiCharts = echarts.init(shuiweiChartRef.value);
    }
}

onMounted(() => {
    initCharts()
    getTempMonitor()
    getalarmData()
})
</script>

<template>
    <div>
        汇总统计
    <div class="statis">
        <div class="item">
            <div class="item-t">
                <div class="name">水温汇总统计</div>
                <div class="select">
                    <el-cascader size="large" v-model="pointId" :options="menuList" :show-all-levels="false" :props="cascaderOption" clearable @change="getTempData" />
                    <el-radio-group v-model="wendu.type" @change="handleSelectType('wendu')">
                        <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="wenduChartRef"></div>
            <div class="title">
                <el-date-picker
                    v-if="wendu.type === 1"
                    v-model="wendu.time"
                    type="date"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, wendu.type, 'wendu')"
                />
                <el-date-picker
                    v-else-if="wendu.type === 3"
                    v-model="wendu.time"
                    type="month"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, wendu.type, 'wendu')"
                />
                <el-date-picker
                    v-else
                    v-model="wendu.time"
                    type="year"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, wendu.type, 'wendu')"
                />
                <div>电站平均水温汇总</div>
            </div>
        </div>
        <div class="item">
            <div class="item-t">
                <div class="name">报警汇总统计</div>
                <div class="select">
                    <el-radio-group v-model="warn.type" @change="handleSelectType('warn')">
                        <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="shuiweiChartRef"></div>
            <div class="title">
                <el-date-picker
                    v-if="warn.type === 1"
                    v-model="warn.time"
                    type="date"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, warn.type, 'warn')"
                />
                <el-date-picker
                    v-else-if="warn.type === 3"
                    v-model="warn.time"
                    type="month"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, warn.type, 'warn')"
                />
                <el-date-picker
                    v-else
                    v-model="warn.time"
                    type="year"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, warn.type, 'warn')"
                />
                <div>电站平均水位汇总</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">

.statis{
    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;
            }
            .select{
                :deep(.el-cascader){
                    margin-right: 2rem;
                    .el-input__wrapper{
                        background-color: transparent;
                        box-shadow: none;
                        border: 1px solid #fff;
                    }
                    .el-input__inner{
                        color: #fff;
                        &::placeholder{
                            color: #fff;
                        }
                    }
                }
                :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: 80%;
        }
        .title{
            height: 10%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            color: #fff;
            :deep(.el-date-editor){
                width: 12rem;
            }
            :deep(.el-input__wrapper){
                background-color: transparent;
                box-shadow: none;
                border-radius: 0;
                .el-input__prefix{
                    color: #fff;
                    font-size: 1.2rem;
                }
                .el-input__inner{
                    color: #fff;
                    font-size: 1.2rem;
                    &::placeholder{
                        color: #fff;
                        font-size: 1.2rem;
                    }
                }
            }
        }
    }
}
</style>