feat:增加温度系统界面

web

2025-03-21 de1de0e73bd260cb1babe7b15c9e943a381009de

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

@@ -1,17 +1,28 @@
<script setup>
import {onMounted, ref} from "vue";
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: 'shebei', label: '报警设备', },
    { prop: 'content', label: '报警内容' },
    { prop: 'time', label: '报警时间' },
    { prop: 'sure', label: '报警确认', slot: true },
    { prop: 'facilityName', label: '报警设备', },
    { prop: 'description', label: '报警内容' },
    { prop: 'lastTimeView', label: '报警时间' },
    { prop: 'isConfirm', label: '报警确认', slot: true },
]

const initWarnChart = () => {
@@ -61,26 +72,28 @@
    }
}

const getTableData = () => {
    return new Promise(resolve => {
        let arr = {
            list: [
                { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
            ],
            total: 30,
const searchTable = () => {
    if(exportTime.value) {
        searchData.createTimeRange = exportTime.value[0] + '~' + exportTime.value[1]
        }
        resolve(arr)
    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()
@@ -105,20 +118,77 @@
        <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="getTableData" :headList="tableHead">
                    <template #sure="scope">
                        <div v-if="scope.row.sure === 1" style="color: #1ab394">已处理</div>
                        <div v-else-if="scope.row.sure === 2"  style="color: #e8ab04">未处理</div>
                        <div v-else style="color: #f30101">待确认</div>
                <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">导出</el-button>
                        <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>

@@ -146,6 +216,9 @@
                font-size: 36px;
                color: #fff;
            }
            :deep(.el-date-editor){
                flex-grow: 0;
            }
            .select{
                :deep(.el-radio){
                    color: #fff;
@@ -170,4 +243,28 @@
        }
    }
}
.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>