feat:增加温度系统界面

web

2025-03-21 de1de0e73bd260cb1babe7b15c9e943a381009de

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

@@ -1,13 +1,270 @@
<script setup>
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 { exportBlobFile } from '@/utils/index.js'

const tableRef = ref(null)
const timeType = ref(0)
const warnChartRef = ref()
const exportTime = ref()
const searchData = reactive({
    createTimeRange: ''
})

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

let warnCharts = null;
let tableHead = [
    { prop: 'code', label: '报警代码' },
    { prop: 'facilityName', label: '报警设备', },
    { prop: 'description', label: '报警内容' },
    { prop: 'lastTimeView', label: '报警时间' },
    { prop: 'isConfirm', label: '报警确认', slot: true },
]

const initWarnChart = () => {
    if(warnChartRef.value) {
        warnCharts = echarts.init(warnChartRef.value);
        const options = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: 80,
                left: 60,
                right: 60,
                bottom: 60
            },
            xAxis: {
                type: 'category',
                data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            yAxis: {
                type: 'value',
                name: '次',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: '1.2rem'
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: '1.2rem'
                }
            },
            series: [
                {
                    data: [36, 44, 38, 24, 63],
                    type: 'bar',
                    itemStyle: {
                        color: 'rgba(187,207,255,0.6)'
                    }
                }
            ]
        }
        warnCharts.setOption(options);
    }
}

const searchTable = () => {
    if(exportTime.value) {
        searchData.createTimeRange = exportTime.value[0] + '~' + exportTime.value[1]
    }
    tableRef.value.getData()
}

// 导出报警报表
const exportWarnTabl = () => {
    exportWarnHistory({ createTimeRange: searchData.createTimeRange }).then(res => {
        exportBlobFile(res)
    })
}

// 获取报警内容
const getWarnInfi = (data) => {
    dialogInfo.value = data
    openDialog.value = true
}

// 处理报警内容
const handleComfirm = () => {}

onMounted(() => {
    initWarnChart()
})
</script>

<template>
    <div>
        预警管理
    <div class="warn">
        <div class="warn-l item">
            <div class="item-t">
                <div class="name">报警分析</div>
                <div class="select">
                    <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>
                </div>
            </div>
            <div class="charts" ref="warnChartRef"></div>
        </div>
        <div class="warn-r item">
            <div class="item-t">
                <div class="name">报警记录</div>
                <div>
                    <el-date-picker
                        v-model="exportTime"
                        type="datetimerange"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        style="width: 28rem"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                    />
                    <el-button type="primary" style="margin-left: 15px" @click="searchTable">搜索</el-button>
                </div>
            </div>
            <div class="warn-table">
                <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 === 20"  style="color: #e8ab04" @click="getWarnInfi(scope.row)">未处理</div>
                        <div v-else style="color: #f30101" @click="getWarnInfi(scope.row)">待确认</div>
                    </template>
                    <template v-slot:pagination>
                        <el-button type="success" style="width: 6rem" @click="exportWarnTabl">导出</el-button>
                    </template>
                </Table>
            </div>
        </div>
        <el-dialog
            v-model="openDialog"
            title="报警确认框"
            width="40rem"
            show-close
            class="warnDialog"
        >
            <div class="message">
                <div class="message-item">
                    <div class="title">报警代码:</div>
                    <div class="val">{{dialogInfo.code}}</div>
                </div>
                <div class="message-item">
                    <div class="title">报警设备:</div>
                    <div class="val">{{dialogInfo.facilityName}}</div>
                </div>
                <div class="message-item">
                    <div class="title">报警内容:</div>
                    <div class="val">{{dialogInfo.description}}</div>
                </div>
                <div class="message-line">
                    <div class="title">报警时间:</div>
                    <div class="val">{{dialogInfo.lastTime}}</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>
                    </div>
                </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="openDialog = false">取消</el-button>
                <el-button type="primary" @click="handleComfirm">
                  确定
                </el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">

.warn{
    height: 100%;
    background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    .item{
        width: 48%;
        height: 96%;
        background: rgba(23,108,229,0.3);
        border: 1px solid #176CE5;
        border-radius: 8px;
        .item-t{
            height: 10%;
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name{
                font-size: 36px;
                color: #fff;
            }
            :deep(.el-date-editor){
                flex-grow: 0;
            }
            .select{
                :deep(.el-radio){
                    color: #fff;
                }
                :deep(.el-radio__label){
                    font-size: 20px;
                }
                :deep(.el-radio__input.is-checked+.el-radio__label){
                    color: #00ff00;
                }
                :deep(.el-radio__input.is-checked .el-radio__inner){
                    background-color: #00ff00;
                }
            }
        }
        .charts{
            height: 90%;
        }
        .warn-table{
            padding: 0 20px;
            height: 90%;
        }
    }
}
.warnDialog{
    .message{
        display: flex;
        flex-wrap: wrap;
        .message-item{
            width: 50%;
            display: flex;
            align-items: center;
            padding: 10px 0;
            .val{
                margin-left: 10px;
            }
        }
        .message-line{
            width: 100%;
            padding: 10px 0;
            display: flex;
            align-items: center;
            .val{
                margin-left: 10px;
            }
        }
    }
}
</style>