From 92e4c0f5deeba69d52603da02bea2ab7836bb9f6 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期一, 05 五月 2025 17:21:08 +0800
Subject: [PATCH] fix:修改水温深度选择
---
.env.development | 2
src/views/screen/temperature/monitor/index.vue | 47 ++++++++++++---
src/views/screen/flow/graphic/index.vue | 9 +-
src/views/screen/temperature/statics/index.vue | 41 ++++++++++++-
src/views/screen/temperature/graphic/index.vue | 35 +++++++++--
5 files changed, 109 insertions(+), 25 deletions(-)
diff --git a/.env.development b/.env.development
index 1f1d4cf..202a22f 100644
--- a/.env.development
+++ b/.env.development
@@ -9,4 +9,4 @@
VITE_APP_IMG_BASEURL='https://www.huiwuyuntong.com/water-hydropower-beta/upload'
#后端本地
- VITE_APP_PUBLIC_REQUEST_API = 'https://www.huiwuyuntong.com/water-hydropower-beta'
+ VITE_APP_PUBLIC_REQUEST_API = 'http://192.168.0.67:8036'
diff --git a/src/views/screen/flow/graphic/index.vue b/src/views/screen/flow/graphic/index.vue
index 364126c..e3d6668 100644
--- a/src/views/screen/flow/graphic/index.vue
+++ b/src/views/screen/flow/graphic/index.vue
@@ -178,7 +178,7 @@
</div>
</div>
<div class="info-btn">
- <div class="fullScreen" @click="handleFullScreen(index)">
+ <div class="fullScreen" v-if="item.url" @click="handleFullScreen(index)">
<img src="@/assets/images/flow/screenIconWhite.png" alt="" />
全屏
</div>
@@ -340,15 +340,14 @@
.info-btn {
width: 15%;
padding: 1rem 0;
- display: flex;
- align-items: flex-end;
- flex-direction: column;
- justify-content: space-between;
+ position: relative;
:deep(.el-button) {
color: #fff;
background: rgba(94, 229, 92, 0.6);
border-radius: 4px 4px 4px 4px;
border: 1px solid rgba(94, 229, 92, 0.6);
+ position: absolute;
+ bottom: 1rem;
}
.fullScreen{
width: 100%;
diff --git a/src/views/screen/temperature/graphic/index.vue b/src/views/screen/temperature/graphic/index.vue
index 8d8d853..4cd23a9 100644
--- a/src/views/screen/temperature/graphic/index.vue
+++ b/src/views/screen/temperature/graphic/index.vue
@@ -7,12 +7,25 @@
import { getGraphicData } from '@/api/screen/graphic/index.js'
import { debounce } from '@/utils/tool.js'
+const deepCOnfig = [
+ { label: '10米', value: 10 },
+ { label: '20米', value: 20 },
+ { label: '30米', value: 30 },
+ { label: '40米', value: 40 },
+ { label: '50米', value: 50 },
+ { label: '60米', value: 60 },
+ { label: '70米', value: 70 },
+ { label: '80米', value: 80 },
+ { label: '90米', value: 90 },
+ { label: '100米', value: 100 },
+]
const menuList = ref([])
const timeType = ref(1) //时间类型 1日 2周 3月 4季 5年
const showTime = ref(moment().format('YYYY-MM-DD')); //展示时间
const timeValue = ref(moment().format('YYYY-MM-DD')) //处理后得时间
const searchVal = ref()
+const tempDeep = ref(50)
const graphicRef = ref(null)
const chartsRef = ref([]) //动态生成图表ref
const chartData = ref([])
@@ -77,8 +90,6 @@
yAxis: {
type: 'value',
name: unit,
- max: 40,
- min: 0,
nameTextStyle: {
color: '#fff',
fontSize: '1rem'
@@ -240,6 +251,7 @@
pointId: point,
pointName: searchVal.value,
dataTime: timeValue.value,
+ waterLevel: tempDeep.value
}
getGraphicData(data).then(async res => {
chartData.value = res.data
@@ -298,7 +310,7 @@
v-model="showTime"
type="date"
placeholder="选择时间"
- style="width: 15rem"
+ style="width: 12rem"
@change="getTime"
/>
<el-date-picker
@@ -307,7 +319,7 @@
type="week"
format="YYYY年 ww[周]"
placeholder="选择时间"
- style="width: 15rem"
+ style="width: 12rem"
@change="getTime"
/>
<el-date-picker
@@ -315,7 +327,7 @@
v-model="showTime"
type="month"
placeholder="选择时间"
- style="width: 15rem"
+ style="width: 12rem"
@change="getTime"
/>
<Quarter
@@ -323,7 +335,7 @@
placeholder="选择时间"
:default-value="showTime"
clearable
- style="width: 15rem"
+ style="width: 12rem"
@change="getTime"
/>
<el-date-picker
@@ -331,9 +343,18 @@
v-model="showTime"
type="year"
placeholder="选择时间"
- style="width: 15rem"
+ style="width: 12rem"
@change="getTime"
/>
+ <div class="name">深度</div>
+ <el-select v-model="tempDeep" style="width: 10rem">
+ <el-option
+ v-for="item in deepCOnfig"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
<el-input v-model="searchVal" style="width: 15rem" clearable placeholder="请输入监测点名称"/>
<el-button @click="() => getChartData()">
<el-icon>
diff --git a/src/views/screen/temperature/monitor/index.vue b/src/views/screen/temperature/monitor/index.vue
index 89bec41..45b5bdc 100644
--- a/src/views/screen/temperature/monitor/index.vue
+++ b/src/views/screen/temperature/monitor/index.vue
@@ -11,6 +11,7 @@
const menuList = ref([])
const monitorList = ref([])
+const selectDeep = ref([])
const monitorConfig = ref({})
const userType = ref(getUserType())
const monitorRef = ref()
@@ -47,7 +48,8 @@
}
pointApi().search(data).then(res => {
//0-未报警， 1-下限报警， 2-上限报警
- monitorList.value = res.data.list.filter(el => el.parentId !== 0).map(item => {
+ monitorList.value = res.data.list.filter(el => el.parentId !== 0).map((item, index) => {
+ selectDeep.value[index] = item?.dataList[0].code
return {
...item,
errorType: Number(item.waterTemperature) < Number(item.lowWaterLevel) ? 1 : Number(item.waterTemperature) > Number(item.tallWaterLevel) ? 2 : 0
@@ -177,11 +179,25 @@
<div class="item-data">
<div class="data">
<div class="name">水温:</div>
- <div class="val"><span>{{ item.waterTemperature }}</span>°C</div>
+ <div class="val"><span>{{ item?.dataList?.find(f => f.code === selectDeep[index]).value }}</span>°C</div>
</div>
<div class="data">
<div class="name">水位:</div>
- <div class="val"><span>{{ item.waterLevel }}</span>m</div>
+ <div class="val">
+ <el-select
+ v-model="selectDeep[index]"
+ class="val-select"
+ placeholder="Select"
+ style="width: 12rem"
+ >
+ <el-option
+ v-for="item in item?.dataList"
+ :key="item.code"
+ :label='item.code'
+ :value="item.code"
+ />
+ </el-select>m
+ </div>
</div>
</div>
<div class="item-status">
@@ -214,11 +230,11 @@
<div class="item-btn">
<el-button size="large" type="success" @click="setMonitorData(item)">应用</el-button>
</div>
- <div class="item-error" v-if="[1,2].includes(item.errorType)">
- <img src="@/assets/images/warning.png" alt="" />
- <div v-if="item.errorType === 1">水温达到下限值</div>
- <div v-else-if="item.errorType === 2">水温达到上限值</div>
- </div>
+<!-- <div class="item-error" v-if="[1,2].includes(item.errorType)">-->
+<!-- <img src="@/assets/images/warning.png" alt="" />-->
+<!-- <div v-if="item.errorType === 1">水温达到下限值</div>-->
+<!-- <div v-else-if="item.errorType === 2">水温达到上限值</div>-->
+<!-- </div>-->
</div>
</div>
</div>
@@ -384,11 +400,24 @@
font-size: 22px;
.val {
- span {
+ span{
display: inline-block;
font-size: 30px;
padding: 0 30px;
}
+ .val-select{
+ padding: 0 30px;
+ :deep(.el-select__wrapper){
+ background-color: transparent;
+ box-shadow: none;
+ border-radius: 0;
+ border-bottom: 1px solid #fff;
+ font-size: 20px;
+ .el-select__caret{
+ color: #fff;
+ }
+ }
+ }
}
}
}
diff --git a/src/views/screen/temperature/statics/index.vue b/src/views/screen/temperature/statics/index.vue
index 491e1fc..d240bfe 100644
--- a/src/views/screen/temperature/statics/index.vue
+++ b/src/views/screen/temperature/statics/index.vue
@@ -6,6 +6,19 @@
import moment from "moment";
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', expandTrigger: 'hover', emitPath: false }; //级联选择器配置
+const deepCOnfig = [
+ { label: '10米', value: 10 },
+ { label: '20米', value: 20 },
+ { label: '30米', value: 30 },
+ { label: '40米', value: 40 },
+ { label: '50米', value: 50 },
+ { label: '60米', value: 60 },
+ { label: '70米', value: 70 },
+ { label: '80米', value: 80 },
+ { label: '90米', value: 90 },
+ { label: '100米', value: 100 },
+]
+
const menuList = ref([])
const pointId = ref('')
@@ -21,7 +34,7 @@
value: moment().format('YYYY-MM-DD'),
data: []
})
-
+const tempDeep = ref(50)
const wenduChartRef = ref()
const shuiweiChartRef = ref()
let wenduCharts = null;
@@ -198,7 +211,8 @@
const data = {
type: wendu.type,
dataTime: wendu.value,
- pointId: pointId.value
+ pointId: pointId.value,
+ waterLevel: tempDeep.value
}
getStatisticsData(data).then(res => {
wendu.data = res.data
@@ -240,7 +254,15 @@
<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-select v-model="tempDeep" style="width: 10rem">
+ <el-option
+ v-for="item in deepCOnfig"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-cascader 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>
@@ -339,7 +361,20 @@
color: #fff;
}
.select{
+ :deep(.el-select) {
+ width: 8rem;
+ margin-right: 2rem;
+ .el-select__wrapper{
+ background-color: transparent;
+ box-shadow: none;
+ border: 1px solid #fff;
+ }
+ .el-select__placeholder{
+ color: #fff;
+ }
+ }
:deep(.el-cascader){
+ width: 12rem;
margin-right: 2rem;
.el-input__wrapper{
background-color: transparent;
--
Gitblit v1.9.3