fix:对接报表数据

web

2 天以前 c6159b0a5a424250adeca1bc2b475da5324fe038

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

@@ -1,133 +1,236 @@
<script setup>
import {onMounted, ref} from "vue";
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 wenduType = ref(3)
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()
let wenduCharts = null;
const wenduTimeValue = ref()
const shuiweiType = ref(3)
const shuiweiChartRef = ref()
let wenduCharts = null;
let shuiweiCharts = null
const shuiweiTimeValue = ref()

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

const initwenduChart = () => {
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);
        const options = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: 80,
                left: 60,
                right: 60,
                bottom: 60
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                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, 36],
                    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 initshuiweiChart = () => {
    if(shuiweiChartRef.value) {
        shuiweiCharts = echarts.init(shuiweiChartRef.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: 'm',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: '1.2rem'
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            series: [
                {
                    data: [36, 44, 38, 24, 63],
                    type: 'bar',
                    itemStyle: {
                        color: '#BBCFFF'
                    }
                }
            ]
        }
        shuiweiCharts.setOption(options);
    }
}

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

@@ -137,66 +240,73 @@
            <div class="item-t">
                <div class="name">水温汇总统计</div>
                <div class="select">
                    <el-radio-group v-model="wenduType" @change="handleSelectType('wendu')">
                    <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="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>
            <div class="charts" ref="wenduChartRef"></div>
            <div class="title">
                <el-date-picker
                    v-if="wenduType === 1"
                    v-model="wenduTimeValue"
                    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="wenduType === 2"
                    v-model="wenduTimeValue"
                    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="wenduTimeValue"
                    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="name">报警汇总统计</div>
                <div class="select">
                    <el-radio-group v-model="shuiweiType" @change="handleSelectType('shuiwei')">
                    <el-radio-group v-model="warn.type" @change="handleSelectType('warn')">
                        <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>
            <div class="charts" ref="shuiweiChartRef"></div>
            <div class="title">
                <el-date-picker
                    v-if="wenduType === 1"
                    v-model="shuiweiTimeValue"
                    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="wenduType === 2"
                    v-model="shuiweiTimeValue"
                    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="shuiweiTimeValue"
                    v-model="warn.time"
                    type="year"
                    placeholder="请选择时间"
                    @change="(value) => getTime(value, warn.type, 'warn')"
                />
                <div>电站平均水位汇总</div>
            </div>
@@ -229,6 +339,20 @@
                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;
                }
@@ -254,7 +378,7 @@
            font-size: 26px;
            color: #fff;
            :deep(.el-date-editor){
                width: 10rem;
                width: 12rem;
            }
            :deep(.el-input__wrapper){
                background-color: transparent;