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 | 379 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 251 insertions(+), 128 deletions(-)
diff --git a/src/views/screen/temperature/statics/index.vue b/src/views/screen/temperature/statics/index.vue
index f9c8747..e2a2350 100644
--- a/src/views/screen/temperature/statics/index.vue
+++ b/src/views/screen/temperature/statics/index.vue
@@ -1,134 +1,236 @@
<script setup>
-import {onMounted, ref} from "vue";
+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 wenduType = ref(3)
+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()
-let wenduCharts = null;
-const wenduTimeValue = ref()
-const shuiweiType = ref(3)
const shuiweiChartRef = ref()
+let wenduCharts = null;
let shuiweiCharts = null
-const shuiweiTimeValue = ref()
const handleSelectType = (type) => {
if(type === 'wendu') {
- wenduTimeValue.value = 0
- } else if (type === 'shuiwei') {
- shuiweiTimeValue.value = 0
+ wendu.time = ''
+ wendu.value = ''
+ } else if (type === 'warn') {
+ warn.time = ''
+ warn.value = ''
}
}
-const initwenduChart = () => {
+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);
- 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()
+ initCharts()
+ getTempMonitor()
+ getalarmData()
})
</script>
@@ -138,66 +240,73 @@
<div class="item-t">
<div class="name">水温汇总统计</div>
<div class="select">
- <el-radio-group v-model="wenduType" @change="handleSelectType('wendu')">
+ <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="2">月</el-radio>
- <el-radio :value="3">年</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="wenduType === 1"
- v-model="wenduTimeValue"
+ 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="wenduType === 2"
- v-model="wenduTimeValue"
+ 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="wenduTimeValue"
+ 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="name">报警汇总统计</div>
<div class="select">
- <el-radio-group v-model="shuiweiType" @change="handleSelectType('shuiwei')">
+ <el-radio-group v-model="warn.type" @change="handleSelectType('warn')">
<el-radio :value="1">日</el-radio>
- <el-radio :value="2">月</el-radio>
- <el-radio :value="3">年</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="wenduType === 1"
- v-model="shuiweiTimeValue"
+ 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="wenduType === 2"
- v-model="shuiweiTimeValue"
+ 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="shuiweiTimeValue"
+ v-model="warn.time"
type="year"
placeholder="请选择时间"
+ @change="(value) => getTime(value, warn.type, 'warn')"
/>
<div>电站平均水位汇总</div>
</div>
@@ -230,6 +339,20 @@
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;
}
@@ -255,7 +378,7 @@
font-size: 26px;
color: #fff;
:deep(.el-date-editor){
- width: 10rem;
+ width: 12rem;
}
:deep(.el-input__wrapper){
background-color: transparent;
--
Gitblit v1.9.3