feat:增加温度系统界面

web

2025-03-21 de1de0e73bd260cb1babe7b15c9e943a381009de

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

@@ -1,13 +1,280 @@
<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts/core';

const wenduType = ref(3)
const wenduChartRef = ref()
let wenduCharts = null;
const wenduTimeValue = ref()
const shuiweiType = ref(3)
const shuiweiChartRef = ref()
let shuiweiCharts = null
const shuiweiTimeValue = ref()

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

const initwenduChart = () => {
    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, 63],
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#00FFFF'  // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(0,255,255,0.2)' // 100% 处的颜色
                            }],
                            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()
})
</script>

<template>
    <div>
        汇总统计
    <div class="statis">
        <div class="item">
            <div class="item-t">
                <div class="name">水温汇总统计</div>
                <div class="select">
                    <el-radio-group v-model="wenduType" @change="handleSelectType('wendu')">
                        <el-radio :value="1">日</el-radio>
                        <el-radio :value="2">月</el-radio>
                        <el-radio :value="3">年</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"
                    type="date"
                    placeholder="请选择时间"
                />
                <el-date-picker
                    v-else-if="wenduType === 2"
                    v-model="wenduTimeValue"
                    type="month"
                    placeholder="请选择时间"
                />
                <el-date-picker
                    v-else
                    v-model="wenduTimeValue"
                    type="year"
                    placeholder="请选择时间"
                />
                <div>电站平均水温汇总</div>
            </div>
        </div>
        <div class="item">
            <div class="item-t">
                <div class="name">水位汇总统计</div>
                <div class="select">
                    <el-radio-group v-model="shuiweiType" @change="handleSelectType('shuiwei')">
                        <el-radio :value="1">日</el-radio>
                        <el-radio :value="2">月</el-radio>
                        <el-radio :value="3">年</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"
                    type="date"
                    placeholder="请选择时间"
                />
                <el-date-picker
                    v-else-if="wenduType === 2"
                    v-model="shuiweiTimeValue"
                    type="month"
                    placeholder="请选择时间"
                />
                <el-date-picker
                    v-else
                    v-model="shuiweiTimeValue"
                    type="year"
                    placeholder="请选择时间"
                />
                <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-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: 10rem;
            }
            :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>