src/api/screen/warning/index.js

@@ -24,4 +24,15 @@
        params,
        responseType: 'blob'
    })
}

/**
 * 报警确认
 */
export const editConfirm = (params) => {
    return publicRequest({
        url: 'alarmHistory/editConfirm',
        method: 'get',
        params
    })
}

 src/assets/images/flow-bg.png

 src/assets/images/login/login_bcg.png

 src/assets/images/login/login_bcg1.png

 src/assets/images/login/login_icon.png

 src/assets/images/messageInfo-left.png

Binary files differ

 src/assets/images/tempture-bg.png

 src/assets/images/warning.png

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

@@ -30,6 +30,9 @@
    }
}

const handleSearch = async () => {
}

</script>

<template>
@@ -69,7 +72,7 @@
                        />
                    </el-select>
                    <el-input v-model="searchVal" style="width: 20rem" placeholder="请输入监测点名称" />
                    <el-button><el-icon><Search /></el-icon>搜索</el-button>
                    <el-button @click="handleSearch"><el-icon><Search /></el-icon>搜索</el-button>
                    <el-button style="margin-left: 0" v-if="userType === '1'"><el-icon><Plus /></el-icon>新增</el-button>
                </div>
                <div class="tool-r" @click="handleFullScreen">

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

@@ -3,33 +3,35 @@
        <div class="home-bg"></div>
        <div class="home-c">
            <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">{{ 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
                                v-model="selectll"
                                class="m-2"
                                placeholder="Select"
                                size="small"
                                style="width: 240px"
                            >
                                <el-option
                                    v-for="(item, idx) in item.liuliangOptions"
                                    :key="idx"
                                    :label="item.label"
                                    :value="idx"
                                />
                            </el-select>
                            <span>{{ item.liuliangOptions[selectll].value }}</span>m/s
                <div class="point-address" @click="handleShow(index)"></div>
                <div class="point-message" v-show="item.showMsg">
                    <div class="msg-box">
                        <div class="video-box">
                            <el-icon><VideoPlay /></el-icon>
                        </div>
                        <div class="info-box">
                            <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
                                    v-model="selectll"
                                    class="m-2"
                                    placeholder="Select"
                                    size="small"
                                    style="width: 240px"
                                >
                                    <el-option
                                        v-for="(item, idx) in item.liuliangOptions"
                                        :key="idx"
                                        :label="item.label"
                                        :value="idx"
                                    />
                                </el-select>
                                <span>{{ item.liuliangOptions[selectll].value }}</span>m/s
                            </div>
                        </div>
                    </div>
                </div>
@@ -44,8 +46,8 @@

const selectll = ref(0)

const pointList = [
    { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 1, left: '46%', top: '70%',
const pointList = reactive([
    { name: '新扎沟口流量监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 1, left: '18%', top: '67%', showMsg: false,
        liuliangOptions: [
            { label: '总计流量', value: 500 },
            { label: '日累计流量', value: 1000 },
@@ -54,7 +56,7 @@
            { label: '年累计流量', value: 3600000 },
        ]
    },
    { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 2, left: '55%', top: '10%',
    { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 2, left: '60%', top: '12.5%', showMsg: false,
        liuliangOptions: [
            { label: '总计流量', value: 500 },
            { label: '日累计流量', value: 1000 },
@@ -63,7 +65,11 @@
            { label: '年累计流量', value: 3600000 },
        ]
    },
]
])

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

</script>

@@ -97,16 +103,20 @@
            .point-message{
                width: 600px;
                height: 200px;
                background: url("@/assets/images/messageInfo-left.png") no-repeat;
                background: url("@/assets/images/messageInfo-right.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: -600px;
                top: -100px;
                padding: 30px 50px 30px 30px;
                left: 30px;
                top: -70px;
                padding: 30px 30px 30px 60px;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 20px;
                .msg-box{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    gap: 20px;
                }
                .video-box{
                    flex-shrink: 0;
                    width: 200px;

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

@@ -2,8 +2,9 @@
import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import Table from '@/components/Table/index.vue'
import { warnHistory, exportWarnHistory } from '@/api/screen/warning/index.js'
import { warnHistory, exportWarnHistory, editConfirm } from '@/api/screen/warning/index.js'
import { exportBlobFile } from '@/utils/index.js'
import { ElMessage } from 'element-plus'

const tableRef = ref(null)
const timeType = ref(0)
@@ -15,6 +16,7 @@

const openDialog = ref(false)
const dialogInfo = ref()
const warnStatus = ref(0)

let warnCharts = null;
let tableHead = [
@@ -95,7 +97,17 @@
}

// 处理报警内容
const handleComfirm = () => {}
const handleComfirm = () => {
    editConfirm({ id: dialogInfo.value.id, status: warnStatus.value }).then(res => {
        ElMessage.success('提交成功')
        tableRef.value.getData()
    }).catch(err => {
        ElMessage.warning('提交失败')
    }).then(() => {
        warnStatus.value = 0
        openDialog.value = false
    })
}

onMounted(() => {
    initWarnChart()
@@ -139,6 +151,7 @@
                <Table :getList="warnHistory" :searchData="searchData" :headList="tableHead" ref="tableRef">
                    <template #isConfirm="scope">
                        <div v-if="scope.row.isConfirm === 200" style="color: #1ab394">已处理</div>
                        <div v-else-if="scope.row.isConfirm === 30"  style="color: #1ab394">误报</div>
                        <div v-else-if="scope.row.isConfirm === 20"  style="color: #e8ab04" @click="getWarnInfi(scope.row)">未处理</div>
                        <div v-else style="color: #f30101" @click="getWarnInfi(scope.row)">待确认</div>
                    </template>
@@ -158,27 +171,35 @@
            <div class="message">
                <div class="message-item">
                    <div class="title">报警代码:</div>
                    <div class="val">{{dialogInfo.code}}</div>
                    <div class="val">{{dialogInfo?.code}}</div>
                </div>
                <div class="message-item">
                    <div class="title">报警设备:</div>
                    <div class="val">{{dialogInfo.facilityName}}</div>
                    <div class="val">{{dialogInfo?.facilityName}}</div>
                </div>
                <div class="message-item">
                    <div class="title">报警内容:</div>
                    <div class="val">{{dialogInfo.description}}</div>
                    <div class="title">报警次数:</div>
                    <div class="val">{{dialogInfo?.totalCount}}</div>
                </div>
                <div class="message-item">
                    <div class="title">开始报警时间:</div>
                    <div class="val">{{dialogInfo?.createTimeView}}</div>
                </div>
                <div class="message-item">
                    <div class="title">最后报警时间:</div>
                    <div class="val">{{dialogInfo?.lastTimeView}}</div>
                </div>
                <div class="message-line">
                    <div class="title">报警时间:</div>
                    <div class="val">{{dialogInfo.lastTime}}</div>
                    <div class="title">报警内容:</div>
                    <div class="val">{{dialogInfo?.description}}</div>
                </div>
                <div class="message-line">
                    <div class="title">报警确认:</div>
                    <div class="val">
                        <el-radio-group v-model="timeType">
                            <el-radio :value="1">已处理</el-radio>
                            <el-radio :value="2">已证实</el-radio>
                            <el-radio :value="3">误  报</el-radio>
                        <el-radio-group v-model="warnStatus">
                            <el-radio :value="200">已处理</el-radio>
                            <el-radio :value="20">已证实</el-radio>
                            <el-radio :value="30">误  报</el-radio>
                        </el-radio-group>
                    </div>
                </div>

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

@@ -33,8 +33,8 @@
<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 },
    { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 1, left: '15%', top: '53%', showMsg: false },
    { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 2, left: '12%', top: '68%', showMsg: false },
])

const handleShow = (index) => {

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

@@ -141,6 +141,9 @@
                            </div>
                        </div>
                        <div class="item-btn"><el-button size="large" type="success">批量应用</el-button></div>
                        <div class="item-error">
                            <img src="@/assets/images/warning.png" />
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-t">电站进水口水温监测点</div>
@@ -208,6 +211,9 @@
                            </div>
                        </div>
                        <div class="item-btn"><el-button size="large" type="success">批量应用</el-button></div>
                        <div class="item-error">
                            <img src="@/assets/images/warning.png" />
                        </div>
                    </div>
                </div>
            </div>
@@ -303,6 +309,18 @@
                    border: 1px solid #176CE5;
                    padding: 20px;
                    border-radius: 8px;
                    position: relative;
                    &-error{
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.3);
                        img{
                            width: 100%;
                        }
                    }
                    .item-t{
                        font-size: 36px;
                        color: #fff;