fix:修改设备接口

web

10 天以前 a8dd05927a7ca3b34f7729604744a24375f3549f

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

@@ -1,13 +1,261 @@
<script setup>
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts/core';
import {getFlowPointList} from "@/api/screen/index.js";
import {getFlowDate} from "@/api/screen/ecology/index.js";

const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置
const typeOption = ref([])
const pointId = ref()
const timeType = ref(2)
const ssChartRef = ref(); //瞬时图表
const ljChartRef = ref(); //累计图表
let ssCharts = null;
let ljCharts = null;
const tongjiData = ref([])

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

// 获取折线图配置
const getLineOption = (data, startColor, endColor) => {
    let xdata = [];
    let sdata = [];
    data.forEach(item => {
        xdata.push(item.dateTime)
        sdata.push(item.newFlow)
    })
    return {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: 60,
            right: 20,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xdata,
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem',
                rotate: -15,
            },
        },
        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.dateTime)
        sdata.push(item.totalFlow)
    })
    return {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: 60,
            right: 20,
        },
        xAxis: {
            type: 'category',
            data: xdata,
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem',
                rotate: -15,
            }
        },
        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 updateLine = () => {
    const option = getLineOption(tongjiData.value, 'rgba(94,229,92,1)', 'rgba(94,229,92,0.2)')
    ssCharts.setOption(option)
}
const updateBar = () => {
    const option = getBarOption(tongjiData.value, 'rgba(94,229,92,1)')
    ljCharts.setOption(option)
}


// 获取监测点
const getPoint = () => {
    getFlowPointList().then(res => {
        typeOption.value = res.data
        pointId.value = res.data[0]?.childrenList?.[0].id
        getFlowTongjiData()
    })
}

// 获取统计数据
const getFlowTongjiData = () => {
    let params = {
        pointId: pointId.value,
        dataType: timeType.value
    }
    getFlowDate(params).then(res => {
        tongjiData.value = res.data
        updateCharts()
    })
}

// 初始化echarts
const initCharts = () => {
    if (ssChartRef.value) {
        ssCharts = echarts.init(ssChartRef.value);
    }
    if (ljChartRef.value) {
        ljCharts = echarts.init(ljChartRef.value);
    }
}

// 更新echarts
const updateCharts = () => {
    updateLine()
    updateBar()
}

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

<template>
    <div>
        生态流量
    <div class="ecology">
        <div class="ecology-l item">
            <div class="item-t">
                <el-cascader size="large"
                             v-model="pointId"
                             :options="typeOption"
                             :show-all-levels="false"
                             :props="cascaderOption"
                             clearable
                             style="width: 30rem; marginRight:10rem"
                             @change="getFlowTongjiData"
                />
                <el-select
                    v-model="timeType"
                    class="m-2"
                    placeholder="请选择筛选时间"
                    size="large"
                    style="width: 20rem"
                    @change="getFlowTongjiData"
                >
                    <el-option
                        v-for="item in selectOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="charts-t">瞬时流量分析</div>
            <div class="item-chart-ss" ref="ssChartRef"></div>
            <div class="charts-t">累计流量分析</div>
            <div class="item-chart-lj" ref="ljChartRef"></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: 95%;
        height: 96%;
        padding: 1rem 20rem;
        background: rgba(23, 108, 229, 0.3);
        border: 1px solid #176CE5;
        border-radius: 8px;
        .item-t {
            height: 5%;
            display: flex;
            align-items: center;
        }
        .charts-t{
            font-size: 1.5rem;
            color: #fff;
            text-align: right;
        }
        .item-chart-ss {
            height: 44%;
        }

        .item-chart-lj {
            height: 44%
        }
    }
}
</style>