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 | 258 +++++++++++++++++++++------------------------------
1 files changed, 105 insertions(+), 153 deletions(-)
diff --git a/src/views/screen/flow/ecology/index.vue b/src/views/screen/flow/ecology/index.vue
index 08b2146..1517ac2 100644
--- a/src/views/screen/flow/ecology/index.vue
+++ b/src/views/screen/flow/ecology/index.vue
@@ -1,32 +1,25 @@
<script setup>
-import {onMounted, reactive} from 'vue'
+import {onMounted, ref} 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';
+import {getFlowPointList} from "@/api/screen/index.js";
+import {getFlowDate} from "@/api/screen/ecology/index.js";
-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 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},
])
// 获取折线图配置
@@ -34,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',
@@ -60,8 +44,9 @@
data: xdata,
axisLabel: {
color: '#fff',
- fontSize: '1.2rem'
- }
+ fontSize: '1.2rem',
+ rotate: -15,
+ },
},
yAxis: {
type: 'value',
@@ -103,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: {
@@ -156,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>
@@ -231,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"
@@ -247,62 +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;
- .item-t{
- height: 10%;
- padding: 0 30px;
+ border-radius: 8px;
+ .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%
}
}
}
--
Gitblit v1.9.3