fix:修改返回菜单按钮

web

2025-03-25 0ba6a10aed87c4f05d076ee66c3189627bb5b858

fix:修改返回菜单按钮

 src/api/facility/monitorType.js

对比新文件
@@ -0,0 +1,50 @@
import { publicRequest } from '@/utils/request'


/**
 * 获取监控点列表
 */
export const getMonitorTypeList = (data) => {
    return publicRequest({
        url: `/waterMonitoryPointType/search`,
        method: 'post',
        data
    });
}


/**
 * 创建监控点
 */

export const createMonitor = (data) => {
    return publicRequest({
        url: '/waterMonitoryPointType/create',
        method: 'post',
        data
    })
}


/**
 * 修改监控点
 */

export const updateMonitor = (data) => {
    return publicRequest({
        url: '/waterMonitoryPointType/modify',
        method: 'post',
        data
    })
}

/**
 * 查询单个监控点
 */

export const getSingleMonitor = () => {
    return publicRequest({
        url: `/waterMonitoryPointType/get/${id}`,
        method: 'get'
    })
}

 src/assets/images/exit.png

 src/assets/images/flow-bg.png

 src/assets/images/map-bg.png

Binary files differ

 src/assets/images/messageInfo-left.png

 src/assets/images/messageInfo-right.png

 src/assets/images/tempture-bg.png

 src/screen/flow.vue

@@ -2,6 +2,10 @@
    <div class="main">
        <div class="header">
            <div class="top">
                <div class="top-exit" v-if="userType === '1'" @click="() => { router.push('/screen') }">
                    <img src="@/assets/images/exit.png" alt="" />
                    <span>选择系统</span>
                </div>
                <div class="top-name">金川水电站生态流量监测系统</div>
                <div class="top-modal">
                    公告弹窗提示
@@ -27,6 +31,7 @@
import{ useRouter,useRoute } from 'vue-router'
import useUserStore from '@/store/modules/user.js'
import {onMounted, ref, watch} from "vue";
import { getUserType } from '@/utils/auth'

const userStore = useUserStore()

@@ -40,6 +45,7 @@
    {name:'报警管理',url:'/flow/warning'},
    {name:'报表管理',url:'/flow/report'},
])
const userType = ref(getUserType())

const openWarn = ref(false)
const text = ref('新扎沟口流量监测点水位到达下限值, 金川水电站生态流量监测点水位到达下限值,流量监测点水位到达下限值')
@@ -91,6 +97,17 @@
            color: #fff;
            position: relative;
            z-index: 100;
            .top-exit{
                position: absolute;
                left: 100px;
                cursor: pointer;
                font-size: 20px;
                img{
                    width: 30px;
                    vertical-align: top;
                    margin-right: 10px;
                }
            }
            .top-name{
                font-size: 48px;
            }
@@ -125,11 +142,10 @@
    .content{
        width: 100%;
        height: 86%;
        position: relative;
        .warningBox{
            position: absolute;
            left: 0;
            top: 2%;
            top: 15.5%;
            z-index: 100;
            width: 100%;
            padding: 0 150px;

 src/screen/temp.vue

@@ -1,7 +1,15 @@
<template>
    <div class="main">
        <div class="header">
            <div class="top">金川水电站水温监测系统 </div>
            <div class="top">
                <div class="top-exit" @click="() => { router.push('/screen') }">
                    <img src="@/assets/images/exit.png" alt="" />
                    <span>选择系统</span>
                </div>
                <div class="top-name">
                    金川水电站水温监测系统
                </div>
            </div>
            <div class="nav">
                <div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
            </div>
@@ -50,6 +58,17 @@
            color: #fff;
            position: relative;
            z-index: 100;
            .top-exit{
                position: absolute;
                left: 100px;
                cursor: pointer;
                font-size: 20px;
                img{
                    width: 30px;
                    vertical-align: top;
                    margin-right: 10px;
                }
            }
        }
        .nav{
            display: flex;

 src/views/facility/monitorList/index.vue

@@ -8,7 +8,8 @@
-->
<script setup>
import pointApi from "@/api/facility/point";
import {ref} from "vue";
import {getMonitorTypeList} from '@/api/facility/monitorType.js'
import {ref, onMounted} from "vue";
import setPostParams from "@/utils/searchParams.js";

const route = useRoute();
@@ -42,6 +43,7 @@
let tableHeader = ref({
    pointName: '监控点名称',
    pointCode: '监控点编号',
    pointTypeName: '监控类型',
    address: '详细地址',
    createTimeView: '创建时间',
    imageUrl: '图片',
@@ -52,7 +54,7 @@
async function getList(val) {
    loading.value = true;
    let postParam = setPostParams(val)
    await pointApi().search(postParam).then((res) => {
    await pointApi().search({ ...postParam, ...searchParams.value}).then((res) => {
        tableData.value = res.data.list
        pageParam.value.total = res.data.total
        pageParam.value.limit = res.data.limit
@@ -67,6 +69,7 @@
const formLabel = ({
    pointName: '监控点名称',
    pointCode: '监控点编号',
    pointTypeId: '监控类型',
    address: '详细地址',
    imageUrl: '图片',
    remark: '备注'
@@ -74,10 +77,12 @@
const rules = ref({
    pointName: [{required: true, message: `请输入${ formLabel.pointName}`, trigger: "blur"}],
    pointCode: [{required: true, message: `请输入${ formLabel.address}`, trigger: "blur"}],
    pointTypeId: [{required: true, message: `请输入${ formLabel.pointTypeId}`, trigger: "blur"}],
});
const form = ref({
    pointName: '',
    pointCode: '',
    pointTypeId: '',
    address: '',
    imageUrl: '',
    remark: ''
@@ -85,6 +90,8 @@
const searchParams = ref({
    keywords: '',
});
// 监控点类型
const monityTypeList = ref([]);
/** 新增按钮操作 */
async function handleAdd() {
    reset();
@@ -108,7 +115,7 @@
/** 删除按钮操作 */
function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除名称为"' + row.contact + '"的数据项?').then(function () {
        return pointApi().remove(row.id);
        // return pointApi().remove(row.id);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
@@ -116,6 +123,13 @@
    });
}

// 获取监控点类型
const getMonitryType = () => {
    let postParam = { limit: 100, page: 1 }
    getMonitorTypeList(postParam).then(res => {
        monityTypeList.value = res.data.list;
    })
}

/**
 *  新增/修改弹窗Form表单相关
@@ -167,6 +181,7 @@
    form.value = {
        pointName: '',
        pointCode: '',
        pointTypeId: '',
        address: '',
        imageUrl: '',
        remark: ''
@@ -174,14 +189,17 @@
    proxy.resetForm("formRef");
}

getList();
onMounted(() => {
    getList();
    getMonitryType()
})
</script>
<template>
    <div class="app-container">
        <el-form :model="searchParams" ref="queryRef" :inline="true">
            <el-form-item label="" prop="">
                <el-input
                    v-model="searchParams.pointName"
                    v-model="searchParams.keywords"
                    placeholder="请输入搜索信息"
                    clearable
                    style="width: 200px"
@@ -244,9 +262,18 @@
                <el-form-item :label="formLabel.pointName" prop="pointName">
                    <el-input v-model="form.pointName" :placeholder="'请输入'+formLabel.pointName"/>
                </el-form-item>

                <el-form-item :label="formLabel.pointCode" prop="pointCode">
                    <el-input v-model="form.pointCode" :placeholder="'请输入'+formLabel.pointCode"/>
                </el-form-item>
                <el-form-item :label="formLabel.pointTypeId" prop="pointTypeId">
                    <el-select v-model="form.pointTypeId" :placeholder="'请输入'+formLabel.pointTypeId">
                        <el-option
                            v-for="(item,index) in monityTypeList"
                            :label="item.name"
                            :value="item.id"
                            :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="formLabel.address" prop="address">
                    <el-input v-model="form.address" :placeholder="'请输入'+formLabel.address"/>
@@ -254,6 +281,7 @@
                <el-form-item :label="formLabel.remark" prop="address">
                    <el-input v-model="form.remark" :placeholder="'请输入'+formLabel.remark"/>
                </el-form-item>
                <el-form-item></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/facility/monitorType/index.vue

对比新文件
@@ -0,0 +1,279 @@
<!--
 * @Author: hqs elkers@163.com
 * @Date: 2024-08-06 14:47:41
 * @LastEditors: hqs elkers@163.com
 * @LastEditTime: 2024-08-14 16:50:56
 * @FilePath: \water-qinghe-web\src\views\facilit\index.vue
 * @Description: 监控点
-->
<script setup>
import { getMonitorTypeList, createMonitor, updateMonitor } from "@/api/facility/monitorType.js";
import {ref} from "vue";
import setPostParams from "@/utils/searchParams.js";

const route = useRoute();
const {proxy} = getCurrentInstance();

/**
 * 搜索相关
 */
/** 搜索按钮操作 */
function handleQuery() {
    getList({keywords: searchParams.value.keywords})
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

/**
 *  Table表格权限数据列表相关
 */

const pageParam = ref({
    total: 0,
    limit: 0,
    page: 1,
})
const tableData = ref([]);

let tableHeader = ref({
    name: '监控点名称',
    type: '类型',
    address: '详细地址',
    createTimeView: '创建时间',
    imageUrl: '图片',
    remark: '备注'
})

/** 获取权限列表 */
async function getList(val) {
    loading.value = true;
    let postParam = setPostParams(val)
    await getMonitorTypeList(postParam).then((res) => {
        tableData.value = res.data.list
        pageParam.value.total = res.data.total
        pageParam.value.limit = res.data.limit
        pageParam.value.page = res.data.page
    })
    loading.value = false;
}

/**
 *  表单相关
 */
const formLabel = ({
    name: '监控点名称',
    type: '监控点编号',
    address: '详细地址',
    imageUrl: '图片',
    remark: '备注'
})
const rules = ref({
    name: [{required: true, message: `请输入${ formLabel.name}`, trigger: "blur"}],
    type: [{required: true, message: `请输入${ formLabel.type}`, trigger: "blur"}],
});
const form = ref({
    name: '',
    type: '',
    address: '',
    imageUrl: '',
    remark: ''
});
const searchParams = ref({
    keywords: '',
});
/** 新增按钮操作 */
async function handleAdd() {
    reset();
    open.value = true;
    title.value = "新增";
}

/** 修改按钮操作 */
async function handleUpdate(row) {
    reset();
    Object.keys(form.value).forEach(key => {
        if (row.hasOwnProperty(key)) {
            form.value[key] = row[key];
        }
    });
    form.value.id = row.id
    open.value = true;
    title.value = "修改";
}

/** 删除按钮操作 */
function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除名称为"' + row.contact + '"的数据项?').then(function () {
        return pointApi().remove(row.id);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {
    });
}


/**
 *  新增/修改弹窗Form表单相关
 */
const open = ref(false);
const loading = ref(false);
const title = ref("");

//上传文件，添加图片地址信息
const uploadData = (data) => {
    form.value.imageUrl = data.toString();
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (form.value.id != undefined) {
                updateMonitor(form.value).then(res => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                }).catch(() => {
                    open.value = false;
                    proxy.$modal.msgError("修改失败");
                });
            } else {
                createMonitor(form.value).then(res => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                }).catch(() => {
                    open.value = false;
                    proxy.$modal.msgError("新增失败");
                });
            }
        }
    });
}

/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
}

/** 表单重置 */
function reset() {
    form.value = {
        name: '',
        type: '',
        address: '',
        imageUrl: '',
        remark: ''
    };
    proxy.resetForm("formRef");
}

getList();
</script>
<template>
    <div class="app-container">
        <el-form :model="searchParams" ref="queryRef" :inline="true">
            <el-form-item label="" prop="">
                <el-input
                    v-model="searchParams.name"
                    placeholder="请输入搜索信息"
                    clearable
                    style="width: 200px"
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="Plus"
                    @click="handleAdd"
                >新增
                </el-button>
            </el-col>
        </el-row>
        <!--表格及分页-->
        <el-table v-loading="loading" :data="tableData">
            <el-table-column
                v-for="(item, key, index) of tableHeader"
                :prop="key.toString()"
                :label="item"
                :key="index"
                align="center"
            >
                <template #default="scope">
                    <div v-if="key === 'imageUrl'">
                        <img :src="scope.row.headImg" class="table-headImg"/>
                    </div>
                    <div v-else-if="key === 'type'">
                        {{ scope.row.type === 1 ? '水温监测点' : '生态流量监测点' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" v-has="['update',route]"
                               @click="handleUpdate(scope.row)">修改
                    </el-button>
                    <el-button link type="primary" icon="Delete" v-has="['delete',route]"
                               @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :total="pageParam.total"
            v-model:page="pageParam.page"
            v-model:limit="pageParam.limit"
            :page-sizes="[10,20,30]"
            @pagination="getList"
        />
        <!-- 添加/修改表单 -->
        <el-dialog :title="title" v-model="open" append-to-body center>
            <el-form class="form-box" ref="formRef" :model="form" :rules="rules" label-width='auto'>
                <el-form-item :label="formLabel.name" prop="name">
                    <el-input v-model="form.name" :placeholder="'请输入'+formLabel.name"/>
                </el-form-item>

                <el-form-item :label="formLabel.type" prop="type">
                    <el-input v-model="form.type" :placeholder="'请输入'+formLabel.type"/>
                </el-form-item>
                <el-form-item :label="formLabel.address" prop="address">
                    <el-input v-model="form.address" :placeholder="'请输入'+formLabel.address"/>
                </el-form-item>
                <el-form-item :label="formLabel.remark" prop="address">
                    <el-input v-model="form.remark" :placeholder="'请输入'+formLabel.remark"/>
                </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>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.form-box{
    justify-content: normal;
}
</style>

 src/views/screen/flow/home/index.vue

@@ -2,17 +2,17 @@
    <div class="home">
        <div class="home-bg"></div>
        <div class="home-c">
            <div class="point">
            <div class="point" v-for="(item, index) in pointList" :key="index" :style="{left: item.left, top: item.top}">
                <div class="point-address"></div>
                <div class="point-message">
                    <div class="video-box">
                        <el-icon><VideoPlay /></el-icon>
                    </div>
                    <div class="info-box">
                        <div class="info-t">水电站流量监测点</div>
                        <div class="info-sw">水位：<span>500</span>m</div>
                        <div class="info-ls">流速：<span>15</span>m/s</div>
                        <div class="info-ssls">瞬时流速：<span>150</span>m/s</div>
                        <div class="info-t">{{ item.name }}</div>
                        <div class="info-sw">水位：<span>{{ item.shuiwei }}</span>m</div>
                        <div class="info-ls">流速：<span>{{item.liushu}}</span>m/s</div>
                        <div class="info-ssls">瞬时流速：<span>{{ item.ssls }}</span>m/s</div>
                        <div class="info-ljll">
                            累计流量：
                            <el-select
@@ -23,13 +23,13 @@
                                style="width: 240px"
                            >
                                <el-option
                                    v-for="(item, idx) in liuliangOptions"
                                    v-for="(item, idx) in item.liuliangOptions"
                                    :key="idx"
                                    :label="item.label"
                                    :value="idx"
                                />
                            </el-select>
                            <span>{{ liuliangOptions[selectll].value }}</span>m/s
                            <span>{{ item.liuliangOptions[selectll].value }}</span>m/s
                        </div>
                    </div>
                </div>
@@ -40,17 +40,29 @@


<script setup>

import {ref} from "vue";

const selectll = ref(0)

const liuliangOptions = [
    { label: '总计流量', value: 500 },
    { label: '日累计流量', value: 1000 },
    { label: '周累计流量', value: 10000 },
    { label: '月累计流量', value: 300000 },
    { label: '年累计流量', value: 3600000 },
const pointList = [
    { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 1, left: '46%', top: '70%',
        liuliangOptions: [
            { label: '总计流量', value: 500 },
            { label: '日累计流量', value: 1000 },
            { label: '周累计流量', value: 10000 },
            { label: '月累计流量', value: 300000 },
            { label: '年累计流量', value: 3600000 },
        ]
    },
    { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 2, left: '55%', top: '10%',
        liuliangOptions: [
            { label: '总计流量', value: 500 },
            { label: '日累计流量', value: 1000 },
            { label: '周累计流量', value: 10000 },
            { label: '月累计流量', value: 300000 },
            { label: '年累计流量', value: 3600000 },
        ]
    },
]

</script>
@@ -65,7 +77,7 @@
        top: 0;
        width: 100%;
        height: 100%;
        background: url("@/assets/images/map-bg.png") no-repeat;
        background: url("@/assets/images/flow-bg.png") no-repeat;
        background-size: 100% 100%;
        z-index: 11;
    }
@@ -76,8 +88,6 @@
        z-index: 20;
        .point{
            position: absolute;
            left: 58%;
            top: 30%;
            .point-address{
                width: 35px;
                height: 40px;
@@ -87,7 +97,7 @@
            .point-message{
                width: 600px;
                height: 200px;
                background: url("@/assets/images/messageInfo-box.png") no-repeat;
                background: url("@/assets/images/messageInfo-left.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: -600px;

 src/views/screen/temperature/home/index.vue

@@ -2,23 +2,27 @@
    <div class="home">
        <div class="home-bg"></div>
        <div class="home-c">
            <div class="point">
                <div class="point-address"></div>
                <div class="point-message">
                    <div class="msg-t">电站尾水出口水温监测点</div>
                    <div class="num">
                        <div class="item">
                            <div class="item-t">水温:</div>
                            <div class="item-num"><span>10</span>°C</div>
                        </div>
                        <div class="item">
                            <div class="item-t">水位:</div>
                            <div class="item-num"><span>1000</span>m</div>
                        </div>
                    </div>
                    <div class="shebei">
                        监测设备： <span>监测设备运行正常(点击跳转)</span>
                    </div>
            <div class="point" v-for="(item, index) in pointList" :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.name }}</div>
                       <div class="num">
                           <div class="item">
                               <div class="item-t">水温:</div>
                               <div class="item-num"><span>{{item.temputer}}</span>°C</div>
                           </div>
                           <div class="item">
                               <div class="item-t">水位:</div>
                               <div class="item-num"><span>{{ item.shuiwei }}</span>m</div>
                           </div>
                       </div>
                       <div class="shebei">
                           监测设备：
                           <span v-if="item.device === 1" style="color: #1ab394">监测设备运行正常(点击跳转)</span>
                           <span v-else style="color: #ff0a0a">设备异常</span>
                       </div>
                   </div>
                </div>
            </div>
        </div>
@@ -27,6 +31,15 @@


<script setup>

const pointList = reactive([
    { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 1, left: '17%', top: '50%', showMsg: false },
    { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 2, left: '25%', top: '40%', showMsg: false },
])

const handleShow = (index) => {
    pointList[index].showMsg = !pointList[index].showMsg;
}

</script>

@@ -40,7 +53,7 @@
        top: 0;
        width: 100%;
        height: 100%;
        background: url("@/assets/images/map-bg.png") no-repeat;
        background: url("@/assets/images/tempture-bg.png") no-repeat;
        background-size: 100% 100%;
        z-index: 11;
    }
@@ -51,8 +64,6 @@
        z-index: 20;
        .point{
            position: absolute;
            left: 58%;
            bottom: 10%;
            .point-address{
                width: 35px;
                height: 40px;
@@ -61,17 +72,21 @@
            }
            .point-message{
                width: 500px;
                height: 200px;
                background: url("@/assets/images/messageInfo-box.png") no-repeat;
                height: 180px;
                background: url("@/assets/images/messageInfo-right.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: -500px;
                top: -100px;
                left: 30px;
                top: -60px;
                padding: 30px 50px;
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .msg-box{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .msg-t{
                    font-size: 26px;
                    font-weight: bold;
@@ -89,11 +104,6 @@
                            font-size: 22px;
                            font-weight: bold;
                        }
                    }
                }
                .shebei{
                    span{
                        color: #1ab394;
                    }
                }
            }