From 20e6eab3129e0d40a2c66650deae79cbfdd46526 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期五, 28 三月 2025 17:07:13 +0800
Subject: [PATCH] fix:修改图表配置
---
src/views/screen/temperature/statics/index.vue | 272 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 269 insertions(+), 3 deletions(-)
diff --git a/src/views/screen/temperature/statics/index.vue b/src/views/screen/temperature/statics/index.vue
index 63edf7c..bbc1fc9 100644
--- a/src/views/screen/temperature/statics/index.vue
+++ b/src/views/screen/temperature/statics/index.vue
@@ -1,13 +1,279 @@
<script setup>
+import {onMounted, ref} from "vue";
+import * as echarts from 'echarts/core';
+const wenduType = ref(3)
+const wenduChartRef = ref()
+let wenduCharts = null;
+const wenduTimeValue = ref()
+const shuiweiType = ref(3)
+const shuiweiChartRef = ref()
+let shuiweiCharts = null
+const shuiweiTimeValue = ref()
+
+const handleSelectType = (type) => {
+ if(type === 'wendu') {
+ wenduTimeValue.value = 0
+ } else if (type === 'shuiwei') {
+ shuiweiTimeValue.value = 0
+ }
+}
+
+const initwenduChart = () => {
+ if(wenduChartRef.value) {
+ wenduCharts = echarts.init(wenduChartRef.value);
+ const options = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ top: 80,
+ left: 60,
+ right: 60,
+ bottom: 60
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: '℃',
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ },
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ }
+ },
+ series: [
+ {
+ data: [36, 44, 38, 24, 36],
+ type: 'line',
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {offset: 0.2, color: 'rgba(0,255,255,0.5)' },
+ {offset: 1, color: 'rgba(0,255,255,0.1)' },
+ ],
+ global: false // 缺省为 false
+ }
+ }
+ }
+ ]
+ }
+ wenduCharts.setOption(options);
+ }
+}
+
+const initshuiweiChart = () => {
+ if(shuiweiChartRef.value) {
+ shuiweiCharts = echarts.init(shuiweiChartRef.value);
+ const options = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ top: 80,
+ left: 60,
+ right: 60,
+ bottom: 60
+ },
+ xAxis: {
+ type: 'category',
+ data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: 'm',
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ },
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ }
+ },
+ series: [
+ {
+ data: [36, 44, 38, 24, 63],
+ type: 'bar',
+ itemStyle: {
+ color: '#BBCFFF'
+ }
+ }
+ ]
+ }
+ shuiweiCharts.setOption(options);
+ }
+}
+
+onMounted(() => {
+ initwenduChart()
+ initshuiweiChart()
+})
</script>
<template>
- <div>
- 汇总统计
+ <div class="statis">
+ <div class="item">
+ <div class="item-t">
+ <div class="name">水温汇总统计</div>
+ <div class="select">
+ <el-radio-group v-model="wenduType" @change="handleSelectType('wendu')">
+ <el-radio :value="1">日</el-radio>
+ <el-radio :value="2">月</el-radio>
+ <el-radio :value="3">年</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ <div class="charts" ref="wenduChartRef"></div>
+ <div class="title">
+ <el-date-picker
+ v-if="wenduType === 1"
+ v-model="wenduTimeValue"
+ type="date"
+ placeholder="请选择时间"
+ />
+ <el-date-picker
+ v-else-if="wenduType === 2"
+ v-model="wenduTimeValue"
+ type="month"
+ placeholder="请选择时间"
+ />
+ <el-date-picker
+ v-else
+ v-model="wenduTimeValue"
+ type="year"
+ placeholder="请选择时间"
+ />
+ <div>电站平均水温汇总</div>
+ </div>
+ </div>
+ <div class="item">
+ <div class="item-t">
+ <div class="name">水位汇总统计</div>
+ <div class="select">
+ <el-radio-group v-model="shuiweiType" @change="handleSelectType('shuiwei')">
+ <el-radio :value="1">日</el-radio>
+ <el-radio :value="2">月</el-radio>
+ <el-radio :value="3">年</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ <div class="charts" ref="shuiweiChartRef"></div>
+ <div class="title">
+ <el-date-picker
+ v-if="wenduType === 1"
+ v-model="shuiweiTimeValue"
+ type="date"
+ placeholder="请选择时间"
+ />
+ <el-date-picker
+ v-else-if="wenduType === 2"
+ v-model="shuiweiTimeValue"
+ type="month"
+ placeholder="请选择时间"
+ />
+ <el-date-picker
+ v-else
+ v-model="shuiweiTimeValue"
+ type="year"
+ placeholder="请选择时间"
+ />
+ <div>电站平均水位汇总</div>
+ </div>
+ </div>
</div>
</template>
<style scoped lang="scss">
-
+.statis{
+ 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;
+ border-radius: 8px;
+ .item-t{
+ height: 10%;
+ padding: 0 30px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .name{
+ font-size: 36px;
+ color: #fff;
+ }
+ .select{
+ :deep(.el-radio){
+ color: #fff;
+ }
+ :deep(.el-radio__label){
+ font-size: 20px;
+ }
+ :deep(.el-radio__input.is-checked+.el-radio__label){
+ color: #00ff00;
+ }
+ :deep(.el-radio__input.is-checked .el-radio__inner){
+ background-color: #00ff00;
+ }
+ }
+ }
+ .charts{
+ height: 80%;
+ }
+ .title{
+ height: 10%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 26px;
+ color: #fff;
+ :deep(.el-date-editor){
+ width: 10rem;
+ }
+ :deep(.el-input__wrapper){
+ background-color: transparent;
+ box-shadow: none;
+ border-radius: 0;
+ .el-input__prefix{
+ color: #fff;
+ font-size: 1.2rem;
+ }
+ .el-input__inner{
+ color: #fff;
+ font-size: 1.2rem;
+ &::placeholder{
+ color: #fff;
+ font-size: 1.2rem;
+ }
+ }
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3