feat: 添加生态流量页面&做大屏分辨率适配

web

2025-03-19 ae8d9d380854076d0b2da145576ae08f14a8f835

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

@@ -1,13 +1,309 @@
<script setup>
import {onMounted, reactive} from 'vue'
import * as echarts from 'echarts/core';
import { GridComponent, ToolboxComponent, TooltipComponent, TitleComponent } from 'echarts/components';
import { LineChart, BarChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([GridComponent, LineChart, BarChart, CanvasRenderer, UniversalTransition, ToolboxComponent, TooltipComponent, TitleComponent]);

const state = reactive({
    zhakouVal: 1,
    dianzhanVal: 1
})
const zkssChartRef = ref(); //扎口瞬时图表
const zkljChartRef = ref(); //扎口累计图表
const dzssChartRef = ref(); //电站瞬时图表
const dzljChartRef = ref(); //电站累计图表
let zkssCharts = null;
let zkljCharts = null;
let dzssCharts = null;
let dzljCharts = null;

const selectOption = ref([
    { label: '本年', value: 1 },
    { label: '本季', value: 2 },
    { label: '本月', value: 3 },
    { label: '本周', value: 4 },
    { label: '本日', value: 5 },
])

// 获取折线图配置
const getLineOption = (data, startColor, endColor) => {
    let xdata = [];
    let sdata = [];
    data.forEach(item => {
        xdata.push(item.name)
        sdata.push(item.value)
    })
    return {
        title: {
            text: '瞬时流量分析',
            textStyle: {
              color: '#fff'
            },
            padding: [0, 0, 0, 30]
        },
        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: 'm³/s',
            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, color: startColor // 0% 处的颜色
                        }, {
                            offset: 1, color: endColor // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }
        ]
    }
}
// 获取柱状图配置
const getBarOption = (data, color) => {
    let xdata = [];
    let sdata = [];
    data.forEach(item => {
        xdata.push(item.name)
        sdata.push(item.value)
    })
    return {
        title: {
            text: '瞬时流量分析',
            textStyle: {
                color: '#fff'
            },
            padding: [0, 0, 0, 30]
        },
        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: '10⁸m³',
            nameTextStyle: {
                color: '#fff',
                fontSize: '1.2rem'
            },
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
        },
        series: [
            {
                data: sdata,
                type: 'bar',
                itemStyle: {
                    color: color
                }
            }
        ]
    }
}

// 新扎口图表
const initZkLine = () => {
    if(zkssChartRef.value) {
        zkssCharts = echarts.init(zkssChartRef.value);
        let data = [
            { name: '一月', value: 36 },
            { name: '二月', value: 66 },
            { name: '三月', value: 122 },
            { name: '四月', value: 78 },
            { name: '五月', value: 63 },
        ]
        const option = getLineOption(data, 'rgba(94,229,92,1)', 'rgba(94,229,92,0.2)')
        zkssCharts.setOption(option)
    }
}
const initZkBar = () => {
    if(zkljChartRef.value) {
        zkljCharts = echarts.init(zkljChartRef.value);
        let data = [
            { name: '一月', value: 36 },
            { name: '二月', value: 66 },
            { name: '三月', value: 122 },
            { name: '四月', value: 78 },
            { name: '五月', value: 63 },
        ]
        const option = getBarOption(data, 'rgba(94,229,92,1)')
        zkljCharts.setOption(option)
    }
}

// 电站图表
const initDzLine = () => {
    if(dzssChartRef.value) {
        dzssCharts = echarts.init(dzssChartRef.value);
        let data = [
            { name: '一月', value: 36 },
            { name: '二月', value: 66 },
            { name: '三月', value: 122 },
            { name: '四月', value: 78 },
            { name: '五月', value: 63 },
        ]
        const option = getLineOption(data, 'rgba(23,108,229,1)', 'rgba(23,108,229,0.2)')
        dzssCharts.setOption(option)
    }
}
const initDzBar = () => {
    if(dzljChartRef.value) {
        dzljCharts = echarts.init(dzljChartRef.value);
        let data = [
            { name: '一月', value: 36 },
            { name: '二月', value: 66 },
            { name: '三月', value: 122 },
            { name: '四月', value: 78 },
            { name: '五月', value: 63 },
        ]
        const option = getBarOption(data, 'rgba(23,108,229,1)')
        dzljCharts.setOption(option)
    }
}

const initCharts = () => {
    initZkLine()
    initZkBar()
    initDzLine()
    initDzBar()
}

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

<template>
    <div>
        生态流量
    <div class="ecology">
        <div class="ecology-l item">
            <div class="item-t">
                <div class="title">新扎口流量监测点</div>
                <el-select
                    v-model="state.zhakouVal"
                    class="m-2"
                    placeholder="Select"
                    size="large"
                    style="width: 15.5rem"
                >
                    <el-option
                        v-for="item in selectOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="item-chart-ss" ref="zkssChartRef"></div>
            <div class="item-chart-lj" ref="zkljChartRef"></div>
        </div>
        <div class="ecology-r item">
            <div class="item-t">
                <div class="title">水电站流量监测点</div>
                <el-select
                    v-model="state.dianzhanVal"
                    class="m-2"
                    placeholder="Select"
                    size="large"
                    style="width: 15.5rem"
                >
                    <el-option
                        v-for="item in selectOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="item-chart-ss" ref="dzssChartRef"></div>
            <div class="item-chart-lj" ref="dzljChartRef"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">

.ecology{
    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;
        .item-t{
            height: 10%;
            padding: 0 30px;
            display: flex;
            align-items: center;
            .title{
                font-size: 36px;
                color: #fff;
                margin-right: 30px;
            }
        }
        .item-chart-ss{
            height: 45%;
        }
        .item-chart-lj{
            height: 45%
        }
    }
}
</style>