From ae8d9d380854076d0b2da145576ae08f14a8f835 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期三, 19 三月 2025 17:26:47 +0800
Subject: [PATCH] feat: 添加生态流量页面&做大屏分辨率适配
---
src/views/screen/flow/ecology/index.vue | 302 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 299 insertions(+), 3 deletions(-)
diff --git a/src/views/screen/flow/ecology/index.vue b/src/views/screen/flow/ecology/index.vue
index be8b55d..08b2146 100644
--- a/src/views/screen/flow/ecology/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3