fix:修改水温深度监测

web

2025-05-07 010ce04ba6e27f2bd603cec692d2695d7a8a3c1f

fix:修改水温深度监测

 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 ]

 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>

 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)">

 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年

 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;
                                }
                            }
                        }
                    }
                }
            }

 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>

 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([])