<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, 63],
|
type: 'line',
|
areaStyle: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0, color: '#00FFFF' // 0% 处的颜色
|
}, {
|
offset: 1, color: 'rgba(0,255,255,0.2)' // 100% 处的颜色
|
}],
|
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 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>
|
