From c6159b0a5a424250adeca1bc2b475da5324fe038 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期五, 18 四月 2025 17:16:30 +0800
Subject: [PATCH] fix:对接报表数据
---
src/views/screen/temperature/statics/index.vue | 396 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 393 insertions(+), 3 deletions(-)
diff --git a/src/views/screen/temperature/statics/index.vue b/src/views/screen/temperature/statics/index.vue
index 63edf7c..e2a2350 100644
--- a/src/views/screen/temperature/statics/index.vue
+++ b/src/views/screen/temperature/statics/index.vue
@@ -1,13 +1,403 @@
<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>
- 汇总统计
+ <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>
\ No newline at end of file
--
Gitblit v1.9.3