<script setup>
|
import {onMounted, ref, reactive} from "vue";
|
import * as echarts from 'echarts/core';
|
import {getStatisticsData, getStatisticsAlarm} from '@/api/screen/statics/index.js'
|
import {getTemperaturePointList} from '@/api/screen/index.js'
|
import moment from "moment";
|
|
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', expandTrigger: 'hover', emitPath: false }; //级联选择器配置
|
|
const menuList = ref([])
|
const pointId = ref('')
|
const wendu = reactive({
|
type: 1,
|
time: moment().format('YYYY-MM-DD'),
|
value: moment().format('YYYY-MM-DD'),
|
data: []
|
})
|
const warn = reactive({
|
type: 1,
|
time: moment().format('YYYY-MM-DD'),
|
value: moment().format('YYYY-MM-DD'),
|
data: []
|
})
|
|
const wenduChartRef = ref()
|
const shuiweiChartRef = ref()
|
let wenduCharts = null;
|
let shuiweiCharts = null
|
|
const handleSelectType = (type) => {
|
if(type === 'wendu') {
|
wendu.time = ''
|
wendu.value = ''
|
} else if (type === 'warn') {
|
warn.time = ''
|
warn.value = ''
|
}
|
}
|
|
const updatewenduChart = () => {
|
let xdata = []
|
let sdata = []
|
wendu.data[0]?.dataVOList?.length > 0 && wendu.data[0]?.dataVOList.forEach(item => {
|
xdata.push(item.dataTime)
|
sdata.push(item.avgValue)
|
})
|
const options = {
|
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: '℃',
|
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.2, color: 'rgba(0,255,255,0.5)' },
|
{offset: 1, color: 'rgba(0,255,255,0.1)' },
|
],
|
global: false // 缺省为 false
|
}
|
}
|
}
|
]
|
}
|
wenduCharts.setOption(options);
|
}
|
|
const updatewarnChart = () => {
|
let xdata = []
|
let sdata = []
|
warn.data?.length > 0 && warn.data.forEach(item => {
|
xdata.push(item.key)
|
sdata.push(item.value)
|
})
|
const options = {
|
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: 'm',
|
nameTextStyle: {
|
color: '#fff',
|
fontSize: '1.2rem'
|
},
|
axisLabel: {
|
color: '#fff',
|
fontSize: '1.2rem'
|
}
|
},
|
series: [
|
{
|
data: sdata,
|
type: 'bar',
|
itemStyle: {
|
color: '#BBCFFF'
|
}
|
}
|
]
|
}
|
shuiweiCharts.setOption(options);
|
}
|
|
// 获取时间
|
const getTime = (value, type, types) => {
|
const momentValue = moment(value)
|
const time = momentValue.format('YYYY-MM-DD')
|
let data = ''
|
switch (type) {
|
case 1:
|
data = ''
|
break;
|
case 3:
|
data = momentValue.add(1, 'month').format('YYYY-MM-DD')
|
break;
|
case 5:
|
data = momentValue.add(1, 'year').format('YYYY-MM-DD')
|
break;
|
default:
|
break;
|
}
|
if(types === 'wendu') {
|
if(data) {
|
wendu.value = time + '~' + data
|
} else {
|
wendu.value = time
|
}
|
getTempData()
|
} else {
|
if(data) {
|
warn.value = time + '~' + data
|
} else {
|
warn.value = time
|
}
|
getalarmData()
|
}
|
}
|
|
// 获取水温监控点菜单
|
const getTempMonitor = () => {
|
getTemperaturePointList().then(res => {
|
menuList.value = res.data
|
pointId.value = res.data?.[0]?.childrenList?.[0]?.id
|
getTempData()
|
})
|
}
|
|
// 获取水温数据
|
const getTempData = () => {
|
const data = {
|
type: wendu.type,
|
dataTime: wendu.value,
|
pointId: pointId.value
|
}
|
getStatisticsData(data).then(res => {
|
wendu.data = res.data
|
updatewenduChart()
|
})
|
}
|
|
// 获取报警数据
|
const getalarmData = () => {
|
const data = {
|
type: warn.type,
|
dataTime: warn.value
|
}
|
getStatisticsAlarm(data).then(res => {
|
warn.data = res.data
|
updatewarnChart()
|
})
|
}
|
|
const initCharts = () => {
|
if(wenduChartRef.value) {
|
wenduCharts = echarts.init(wenduChartRef.value);
|
}
|
if(shuiweiChartRef.value) {
|
shuiweiCharts = echarts.init(shuiweiChartRef.value);
|
}
|
}
|
|
onMounted(() => {
|
initCharts()
|
getTempMonitor()
|
getalarmData()
|
})
|
</script>
|
|
<template>
|
<div class="statis">
|
<div class="item">
|
<div class="item-t">
|
<div class="name">水温汇总统计</div>
|
<div class="select">
|
<el-cascader size="large" v-model="pointId" :options="menuList" :show-all-levels="false" :props="cascaderOption" clearable @change="getTempData" />
|
<el-radio-group v-model="wendu.type" @change="handleSelectType('wendu')">
|
<el-radio :value="1">日</el-radio>
|
<el-radio :value="3">月</el-radio>
|
<el-radio :value="5">年</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
<div class="charts" ref="wenduChartRef"></div>
|
<div class="title">
|
<el-date-picker
|
v-if="wendu.type === 1"
|
v-model="wendu.time"
|
type="date"
|
placeholder="请选择时间"
|
@change="(value) => getTime(value, wendu.type, 'wendu')"
|
/>
|
<el-date-picker
|
v-else-if="wendu.type === 3"
|
v-model="wendu.time"
|
type="month"
|
placeholder="请选择时间"
|
@change="(value) => getTime(value, wendu.type, 'wendu')"
|
/>
|
<el-date-picker
|
v-else
|
v-model="wendu.time"
|
type="year"
|
placeholder="请选择时间"
|
@change="(value) => getTime(value, wendu.type, 'wendu')"
|
/>
|
<div>电站平均水温汇总</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="item-t">
|
<div class="name">报警汇总统计</div>
|
<div class="select">
|
<el-radio-group v-model="warn.type" @change="handleSelectType('warn')">
|
<el-radio :value="1">日</el-radio>
|
<el-radio :value="3">月</el-radio>
|
<el-radio :value="5">年</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
<div class="charts" ref="shuiweiChartRef"></div>
|
<div class="title">
|
<el-date-picker
|
v-if="warn.type === 1"
|
v-model="warn.time"
|
type="date"
|
placeholder="请选择时间"
|
@change="(value) => getTime(value, warn.type, 'warn')"
|
/>
|
<el-date-picker
|
v-else-if="warn.type === 3"
|
v-model="warn.time"
|
type="month"
|
placeholder="请选择时间"
|
@change="(value) => getTime(value, warn.type, 'warn')"
|
/>
|
<el-date-picker
|
v-else
|
v-model="warn.time"
|
type="year"
|
placeholder="请选择时间"
|
@change="(value) => getTime(value, warn.type, 'warn')"
|
/>
|
<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-cascader){
|
margin-right: 2rem;
|
.el-input__wrapper{
|
background-color: transparent;
|
box-shadow: none;
|
border: 1px solid #fff;
|
}
|
.el-input__inner{
|
color: #fff;
|
&::placeholder{
|
color: #fff;
|
}
|
}
|
}
|
: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: 12rem;
|
}
|
: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>
|
