fix:修改设备接口

web

10 天以前 a8dd05927a7ca3b34f7729604744a24375f3549f

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

@@ -1,26 +1,25 @@
<script setup>
import {onMounted, reactive} from 'vue'
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 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 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: 1 },
    { label: '本季', value: 2 },
    { label: '本月', value: 3 },
    { label: '本周', value: 4 },
    { label: '本日', value: 5 },
    {label: '本年', value: 6},
    {label: '本季', value: 5},
    {label: '本月', value: 4},
    {label: '本周', value: 3},
    {label: '本日', value: 2},
])

// 获取折线图配置
@@ -28,25 +27,16 @@
    let xdata = [];
    let sdata = [];
    data.forEach(item => {
        xdata.push(item.name)
        sdata.push(item.value)
        xdata.push(item.dateTime)
        sdata.push(item.newFlow)
    })
    return {
        title: {
            text: '瞬时流量分析',
            textStyle: {
              color: '#fff'
            },
            padding: [0, 0, 0, 30]
        },
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top: 80,
            left: 60,
            right: 60,
            bottom: 60
            right: 20,
        },
        xAxis: {
            type: 'category',
@@ -54,8 +44,9 @@
            data: xdata,
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
            }
                fontSize: '1.2rem',
                rotate: -15,
            },
        },
        yAxis: {
            type: 'value',
@@ -97,32 +88,24 @@
    let xdata = [];
    let sdata = [];
    data.forEach(item => {
        xdata.push(item.name)
        sdata.push(item.value)
        xdata.push(item.dateTime)
        sdata.push(item.totalFlow)
    })
    return {
        title: {
            text: '瞬时流量分析',
            textStyle: {
                color: '#fff'
            },
            padding: [0, 0, 0, 30]
        },
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top: 80,
            left: 60,
            right: 60,
            bottom: 60
            right: 20,
        },
        xAxis: {
            type: 'category',
            data: xdata,
            axisLabel: {
                color: '#fff',
                fontSize: '1.2rem'
                fontSize: '1.2rem',
                rotate: -15,
            }
        },
        yAxis: {
@@ -150,74 +133,56 @@
}

// 新扎口图表
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 updateLine = () => {
    const option = getLineOption(tongjiData.value, 'rgba(94,229,92,1)', 'rgba(94,229,92,0.2)')
    ssCharts.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 updateBar = () => {
    const option = getBarOption(tongjiData.value, 'rgba(94,229,92,1)')
    ljCharts.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 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 = () => {
    initZkLine()
    initZkBar()
    initDzLine()
    initDzBar()
    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>

@@ -225,13 +190,22 @@
    <div class="ecology">
        <div class="ecology-l item">
            <div class="item-t">
                <div class="title">新扎口流量监测点</div>
                <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="state.zhakouVal"
                    v-model="timeType"
                    class="m-2"
                    placeholder="Select"
                    placeholder="请选择筛选时间"
                    size="large"
                    style="width: 15.5rem"
                    style="width: 20rem"
                    @change="getFlowTongjiData"
                >
                    <el-option
                        v-for="item in selectOption"
@@ -241,63 +215,46 @@
                    />
                </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 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{
.ecology {
    height: 100%;
    background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 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%;

    .item {
        width: 95%;
        height: 96%;
        background: rgba(23,108,229,0.3);
        padding: 1rem 20rem;
        background: rgba(23, 108, 229, 0.3);
        border: 1px solid #176CE5;
        border-radius: 8px;
        .item-t{
            height: 10%;
            padding: 0 30px;
        .item-t {
            height: 5%;
            display: flex;
            align-items: center;
            .title{
                font-size: 36px;
                color: #fff;
                margin-right: 30px;
            }
        }
        .item-chart-ss{
            height: 45%;
        .charts-t{
            font-size: 1.5rem;
            color: #fff;
            text-align: right;
        }
        .item-chart-lj{
            height: 45%
        .item-chart-ss {
            height: 44%;
        }

        .item-chart-lj {
            height: 44%
        }
    }
}