From 010ce04ba6e27f2bd603cec692d2695d7a8a3c1f Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期三, 07 五月 2025 08:38:18 +0800
Subject: [PATCH] fix:修改水温深度监测
---
src/views/screen/temperature/home/index.vue | 112 +++++++++++++++-------
src/config/index.js | 16 +++
src/views/facility/monitorList/index.vue | 8 +
src/views/screen/flow/graphic/index.vue | 26 +++-
src/views/screen/temperature/report/index.vue | 94 +++++++++++++++++-
src/views/screen/temperature/statics/index.vue | 13 --
src/views/screen/temperature/graphic/index.vue | 14 --
7 files changed, 205 insertions(+), 78 deletions(-)
diff --git a/src/config/index.js b/src/config/index.js
new file mode 100644
index 0000000..c9045de
--- /dev/null
+++ b/src/config/index.js
@@ -0,0 +1,16 @@
+// 水温深度选择器配置
+export 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 },
+]
+
+// 水温报表配置
+export const deepTableConfig = [ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150 ]
\ No newline at end of file
diff --git a/src/views/facility/monitorList/index.vue b/src/views/facility/monitorList/index.vue
index 45c5957..f0b9134 100644
--- a/src/views/facility/monitorList/index.vue
+++ b/src/views/facility/monitorList/index.vue
@@ -45,6 +45,7 @@
pointCode: '监控点编号',
pointType: '监控类型',
waterWidth: '水面宽度',
+ waterDistance: '起点距',
address: '详细地址',
createTimeView: '创建时间',
imageUrl: '图片',
@@ -73,6 +74,7 @@
pointType: '监控点类型',
parentId: '父级监控点',
waterWidth: '水面宽度',
+ waterDistance: '起点距',
address: '详细地址',
imageUrl: '图片',
remark: '备注'
@@ -88,6 +90,7 @@
pointType: '',
parentId: '',
waterWidth: '',
+ waterDistance: '',
address: '',
imageUrl: '',
remark: ''
@@ -196,6 +199,7 @@
pointCode: '',
pointType: '',
waterWidth: '',
+ waterDistance: '',
address: '',
imageUrl: '',
remark: ''
@@ -304,7 +308,9 @@
<el-form-item :label="formLabel.waterWidth" prop="waterWidth">
<el-input v-model="form.waterWidth" :placeholder="'请输入'+formLabel.waterWidth"/>
</el-form-item>
- <el-form-item></el-form-item>
+ <el-form-item :label="formLabel.waterDistance" prop="waterDistance">
+ <el-input v-model="form.waterDistance" :placeholder="'请输入'+formLabel.waterDistance"/>
+ </el-form-item>
<el-form-item label="图片" prop="imageUrl" style="flex: 1">
<upload-icons @uploadData="uploadData" :imageList="form.imageUrl" :limit="1"></upload-icons>
<span style="display: block;">(请上传1张设备图片)</span>
diff --git a/src/views/screen/flow/graphic/index.vue b/src/views/screen/flow/graphic/index.vue
index e3d6668..621d13b 100644
--- a/src/views/screen/flow/graphic/index.vue
+++ b/src/views/screen/flow/graphic/index.vue
@@ -157,25 +157,33 @@
<div class="val"><span>{{ item.waterLevel }}</span>m</div>
</div>
<div class="info-item">
- <div class="name">流速:</div>
+ <div class="name">表面流速:</div>
<div class="val"><span>{{ item.flowVelocity }}</span>m/s</div>
- </div>
- <div class="info-item">
- <div class="name">瞬时流量:</div>
- <div class="val"><span>{{ item.newFlow }}</span>m³/h</div>
- </div>
- <div class="info-item">
- <div class="name">累计流量:</div>
- <div class="val"><span>{{ item.totalFlow }}</span>m³</div>
</div>
<div class="info-item">
<div class="name">水面宽度:</div>
<div class="val"><span>{{ item.waterWidth }}</span>m</div>
</div>
<div class="info-item">
+ <div class="name">平均流速:</div>
+ <div class="val"><span>{{ item.avgVelocity }}</span>m/s</div>
+ </div>
+ <div class="info-item">
<div class="name">过水面积:</div>
<div class="val"><span>{{ item.waterArea }}</span>m³</div>
</div>
+ <div class="info-item">
+ <div class="name">雷达流速:</div>
+ <div class="val"><span>{{ item.radarVelocity }}</span>m/s</div>
+ </div>
+ <div class="info-item">
+ <div class="name">实时流量:</div>
+ <div class="val"><span>{{ item.newFlow }}</span>m³/h</div>
+ </div>
+ <div class="info-item">
+ <div class="name">起点距:</div>
+ <div class="val"><span>{{ item.radarDistance }}</span>m</div>
+ </div>
</div>
<div class="info-btn">
<div class="fullScreen" v-if="item.url" @click="handleFullScreen(index)">
diff --git a/src/views/screen/temperature/graphic/index.vue b/src/views/screen/temperature/graphic/index.vue
index 4cd23a9..3056f19 100644
--- a/src/views/screen/temperature/graphic/index.vue
+++ b/src/views/screen/temperature/graphic/index.vue
@@ -6,19 +6,7 @@
import moment from "moment";
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 },
-]
+import {deepCOnfig} from '@/config/index.js'
const menuList = ref([])
const timeType = ref(1) //时间类型 1日 2周 3月 4季 5年
diff --git a/src/views/screen/temperature/home/index.vue b/src/views/screen/temperature/home/index.vue
index 9fa20bc..8bfe5d4 100644
--- a/src/views/screen/temperature/home/index.vue
+++ b/src/views/screen/temperature/home/index.vue
@@ -2,27 +2,43 @@
<div class="home">
<div class="home-bg"></div>
<div class="home-c">
- <div class="point" v-for="(item, index) in monitorList" :key="index" :style="{left: item.left, top: item.top}">
+ <div class="point" v-for="(item, index) in monitorList" :key="index"
+ :style="{left: item.left, top: item.top}">
<div class="point-address" @click="handleShow(index)"></div>
<div class="point-message" v-show="item.showMsg">
- <div class="msg-box">
- <div class="msg-t">{{ item.pointName }}</div>
- <div class="num">
- <div class="item">
- <div class="item-t">水温:</div>
- <div class="item-num"><span>{{item.waterTemperature}}</span>°C</div>
- </div>
- <div class="item">
- <div class="item-t">水位:</div>
- <div class="item-num"><span>{{ item.waterLevel }}</span>m</div>
- </div>
- </div>
- <div class="shebei">
- 监测设备：
- <span v-if="item.isOnline === 1">设备运作正常</span>
- <span v-else style="color: red">设备运作异常</span>
- </div>
- </div>
+ <div class="msg-box">
+ <div class="msg-t">{{ item.pointName }}</div>
+ <div class="num">
+ <div class="item">
+ <div class="item-t">水温:</div>
+ <div class="item-num"><span>{{ item?.dataList?.find(f => f.code === selectDeep[index]).value }}</span>°C</div>
+ </div>
+ <div class="item">
+ <div class="item-t">水位:</div>
+ <div class="item-num">
+ <el-select
+ v-model="selectDeep[index]"
+ class="val-select"
+ placeholder="Select"
+ style="width: 10rem"
+ >
+ <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="shebei">
+ 监测设备：
+ <span v-if="item.isOnline === 1">设备运作正常</span>
+ <span v-else style="color: red">设备运作异常</span>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -35,19 +51,21 @@
import {ref, onMounted} from "vue";
const monitorList = ref([])
+const selectDeep = ref([])
// 标点配置
const config = [
- { left: '15%', top: '53%', showMsg: false },
- { left: '12%', top: '68%', showMsg: false },
+ {left: '15%', top: '53%', showMsg: false},
+ {left: '12%', top: '68%', showMsg: false},
]
// 获取监控点列表
const getMonitorList = () => {
pointApi().search({type: 1, page: 1, limit: 3}).then(res => {
let data = res.data.list.filter(el => el.parentId !== 0)
- if(data.length > 2) data = data.splice(0, 1)
+ if (data.length > 2) data = data.splice(0, 1)
monitorList.value = data.map((item, index) => {
+ selectDeep.value[index] = item?.dataList[0].code
return {
...item,
...config[index]
@@ -67,9 +85,10 @@
<style scoped lang="scss">
-.home{
+.home {
height: 100%;
- .home-bg{
+
+ .home-bg {
position: absolute;
left: 0;
top: 0;
@@ -79,20 +98,24 @@
background-size: 100% 100%;
z-index: 11;
}
- .home-c{
+
+ .home-c {
width: 100%;
height: 100%;
position: relative;
z-index: 20;
- .point{
+
+ .point {
position: absolute;
- .point-address{
+
+ .point-address {
width: 35px;
height: 40px;
background: url("@/assets/images/point.png") no-repeat;
background-size: 100% 100%;
}
- .point-message{
+
+ .point-message {
width: 500px;
height: 180px;
background: url("@/assets/images/messageInfo-right.png") no-repeat;
@@ -102,30 +125,49 @@
top: -60px;
padding: 30px 50px;
color: #fff;
- .msg-box{
+
+ .msg-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
- .msg-t{
+
+ .msg-t {
font-size: 26px;
font-weight: bold;
}
- .num{
+
+ .num {
display: flex;
align-items: center;
- gap: 50px;
- .item{
+ gap: 30px;
+
+ .item {
display: flex;
align-items: center;
- span{
+
+ span {
display: inline-block;
- padding: 0 30px;
+ padding: 0 20px;
font-size: 22px;
font-weight: bold;
}
+ .val-select{
+ padding: 0 20px;
+ :deep(.el-select__wrapper){
+ background-color: transparent;
+ box-shadow: 0 0 0 1px #fff inset;
+ font-size: 20px;
+ .el-select__caret{
+ color: #fff;
+ }
+ .el-select__placeholder{
+ color: #fff;
+ }
+ }
+ }
}
}
}
diff --git a/src/views/screen/temperature/report/index.vue b/src/views/screen/temperature/report/index.vue
index b99a73d..2c09f9c 100644
--- a/src/views/screen/temperature/report/index.vue
+++ b/src/views/screen/temperature/report/index.vue
@@ -2,8 +2,8 @@
import {ref, onMounted} from "vue";
import {getTemperaturePointList} from "@/api/screen/index.js";
import {getTemptureReportList, exportTemptureReportList} from "@/api/screen/report/index.js";
-import Table from '@/components/Table/index.vue'
import { exportBlobFile } from '@/utils/index.js'
+import { deepTableConfig } from '@/config/index.js'
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置
const typeOption = ref([])
@@ -12,13 +12,16 @@
pointId: '',
createTimeRange: ''
})
-const tableRef = ref(null); //表格实例
+const state = {
+ total: 0,
+ page: 1,
+ pageSize: 10,
+}
let tableHead = [
- { prop: 'waterTemperature', label: '水温(℃)' },
- { prop: 'waterLevel', label: '水位(m)', },
{ prop: 'pointName', label: '采集点' },
{ prop: 'createTimeView', label: '采集时间' },
]
+const tableData = ref([])
// 获取监测点
const getPoint = () => {
@@ -27,11 +30,39 @@
})
}
+const getTableData = () => {
+ let data = {
+ limit: state.pageSize,
+ page: state.page,
+ ...searchData
+ }
+ getTemptureReportList(data).then(res => {
+ tableData.value = res.data.list.map(item => {
+ let obj = {}
+ item.dataList.forEach(dl => {
+ obj[dl.code] = dl.value
+ })
+ return {
+ ...item,
+ ...obj
+ }
+ })
+ console.log(tableData.value)
+ state.total = res.data.total
+ })
+}
+
+// 分页按钮
+const paginationFun = (data) => {
+ state.page = data.page
+ getTableData()
+}
+
// 导出报表
const exportData = () => {
let data = {
- limit: tableRef.value.state.limit,
- page: tableRef.value.state.page,
+ limit: state.pageSize,
+ page: state.page,
...searchData
}
if(timeVal.value && timeVal.value.length > 0) {
@@ -51,11 +82,19 @@
} else {
searchData.createTimeRange = ''
}
- tableRef.value.getData()
+ getTableData()
}
onMounted(() => {
+ const newArr = deepTableConfig.map(item => {
+ return {
+ prop: `${item}`,
+ label: `${item}m`
+ }
+ })
+ tableHead.splice(1, 0, ...newArr)
getPoint()
+ getTableData()
})
</script>
@@ -79,7 +118,34 @@
<el-button type="success" size="large" style="width: 6rem" @click="exportData">一键导出</el-button>
</div>
<div class="report-table">
- <Table ref="tableRef" :getList="getTemptureReportList" :headList="tableHead" :searchData="searchData"></Table>
+ <el-table
+ :data="tableData"
+ style="width: 100%; height: 85%"
+ >
+ <el-table-column
+ type="index"
+ label="序号"
+ align="center"
+ width="80px"
+ ></el-table-column>
+ <el-table-column
+ v-for="(item, index) in tableHead"
+ :key="index"
+ :prop="item.prop"
+ :label="item.label"
+ >
+ </el-table-column>
+ </el-table>
+ <div class="pagination" v-show="state.total > 0">
+ <div class="pagination-total">共{{state.total}}条</div>
+ <pagination
+ layout="prev, pager, next, jumper"
+ :total="state.total"
+ :page="state.page"
+ :limit="state.pageSize"
+ @pagination="paginationFun"
+ />
+ </div>
</div>
</div>
</template>
@@ -109,5 +175,17 @@
border-radius: 8px;
padding: 20px;
}
+ .pagination{
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ .pagination-total{
+ color: #fff;
+ }
+ .pagination-container{
+ background: transparent;
+ }
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/screen/temperature/statics/index.vue b/src/views/screen/temperature/statics/index.vue
index d240bfe..451fcb0 100644
--- a/src/views/screen/temperature/statics/index.vue
+++ b/src/views/screen/temperature/statics/index.vue
@@ -4,20 +4,9 @@
import {getStatisticsData, getStatisticsAlarm} from '@/api/screen/statics/index.js'
import {getTemperaturePointList} from '@/api/screen/index.js'
import moment from "moment";
+import {deepCOnfig} from '@/config/index.js'
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([])
--
Gitblit v1.9.3