From 728311a10fb825369cd4ad141af203de4d668e8f Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期四, 27 三月 2025 17:28:03 +0800
Subject: [PATCH] fix:对接生态流量数据
---
src/views/screen/flow/ecology/index.vue | 252 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 250 insertions(+), 2 deletions(-)
diff --git a/src/views/screen/flow/ecology/index.vue b/src/views/screen/flow/ecology/index.vue
index be8b55d..1517ac2 100644
--- a/src/views/screen/flow/ecology/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3