From 7885ad510c6246a35ba14faff7cfdbc066e269cd Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期四, 17 四月 2025 14:51:30 +0800
Subject: [PATCH] feat: 添加报表,报警,首页

---
 src/views/screen/home/index.vue |  689 +++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 501 insertions(+), 188 deletions(-)

diff --git a/src/views/screen/home/index.vue b/src/views/screen/home/index.vue
index 601b0fa..e4cd659 100644
--- a/src/views/screen/home/index.vue
+++ b/src/views/screen/home/index.vue
@@ -1,6 +1,71 @@
 <template>
     <div class="container">
+        <div class="left">
+            <div class="warn">
+                <div class="warn-t">报警次数排名</div>
+                <div class="warn-c">
+                    <div class="warnCharts" ref="warnChart"></div>
+                </div>
+            </div>
+            <div class="pumpList">
+                <div class="pumpList-t">泵站列表</div>
+                <div class="pumpList-c">
+                    <div class="list">
+                        <div class="listItem">
+                            <div class="name">西南楼新风井泵房</div>
+                            <div class="value default">正常运行</div>
+                        </div>
+                        <div class="listItem">
+                            <div class="name">西南楼新风井泵房</div>
+                            <div class="value default">正常运行</div>
+                        </div>
+                        <div class="listItem">
+                            <div class="name">西南楼新风井泵房</div>
+                            <div class="value error">异常运行</div>
+                        </div>
+                        <div class="listItem">
+                            <div class="name">西南楼新风井泵房</div>
+                            <div class="value default">正常运行</div>
+                        </div>
+                        <div class="listItem">
+                            <div class="name">西南楼新风井泵房</div>
+                            <div class="value offline">离线断开</div>
+                        </div>
+                        <div class="listItem">
+                            <div class="name">西南楼新风井泵房</div>
+                            <div class="value default">正常运行</div>
+                        </div>
+                        <div class="listItem">
+                            <div class="name">西南楼新风井泵房</div>
+                            <div class="value default">正常运行</div>
+                        </div>
+                        <div class="listItem">
+                            <div class="name">西南楼新风井泵房</div>
+                            <div class="value default">正常运行</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="center" >
+            <div class="info">
+                <div class="infoItem" :class="{active: openStatus.bengfang}" @click="setOpenStatus('bengfang')">
+                    <div class="infoItem-t">泵房数目</div>
+                    <div class="infoItem-c" v-if="openStatus.bengfang"><span>36</span>个</div>
+                </div>
+                <div class="infoItem" :class="{active: openStatus.shuibeng}" @click="setOpenStatus('shuibeng')">
+                    <div class="infoItem-t">水泵数量</div>
+                    <div class="infoItem-c" v-if="openStatus.shuibeng"><span>44</span>个</div>
+                </div>
+                <div class="infoItem" :class="{active: openStatus.liuliangji}" @click="setOpenStatus('liuliangji')">
+                    <div class="infoItem-t">流量计个数</div>
+                    <div class="infoItem-c" v-if="openStatus.liuliangji"><span>25</span>个</div>
+                </div>
+                <div class="infoItem" :class="{active: openStatus.shuijin}" @click="setOpenStatus('shuijin')">
+                    <div class="infoItem-t">水浸传感器数量</div>
+                    <div class="infoItem-c" v-if="openStatus.shuijin"><span>25</span>个</div>
+                </div>
+            </div>
             <!-- 地图窗口 -->
             <div class="map">
                 <div class="point-box" v-if="tucengVal === 0">
@@ -10,23 +75,23 @@
                         <div class="message" v-show="showMsg === index">
                             <div class="message-item">
                                 <span class="name">泵房名称:</span>
-                                <span class="val">{{item.name}}</span>
+                                <span class="val">下瓦房新风井泵房</span>
                             </div>
                             <div class="message-item">
                                 <span class="name">水浸状态:</span>
-                                <span class="val-status">{{item.shuijin}}</span>
-                            </div>
-                            <div class="message-item">
-                                <span class="name">运行时长:</span>
-                                <span class="val-status">{{}}</span>
+                                <span :class="item.shuijin === '正常' ? 'val-status' : 'err-status'">{{item.shuijin}}</span>
                             </div>
                             <div class="message-item">
                                 <span class="name">工作状态:</span>
-                                <span class="val-status">{{}}</span>
+                                <span :class="item.status === '排水' ? 'val-status' : 'err-status'">{{item.status}}</span>
                             </div>
                             <div class="message-item">
-                                <span class="name">水池水位:</span>
-                                <span class="val-status">{{item.yewei}}</span>
+                                <span class="name">供电状态:</span>
+                                <span :class="item.gongdain ? 'val-status' : 'err-status'">{{item.gongdain ? '正常' : '异常'}}</span>
+                            </div>
+                            <div class="message-item">
+                                <span class="name">总运行时长:</span>
+                                <span class="val-status">{{item.totalTime}}</span>
                             </div>
                             <div class="message-item">
                                 <span class="name">其他详细信息:</span>
@@ -36,71 +101,119 @@
                     </div>
                 </div>
             </div>
+            <div class="yunxing">
+                <div class="yunxing-t">运行情况统计</div>
+                <div class="yunxing-c">
+                    <div class="list">
+                        <div class="item">
+                            <div class="item-t">
+                                <div class="type">运行正常</div>
+                                <div class="num default">68</div>
+                            </div>
+                            <div class="item-c">
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="item-t">
+                                <div class="type">运行异常</div>
+                                <div class="num error">8</div>
+                            </div>
+                            <div class="item-c">
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="item-t">
+                                <div class="type">离线断开</div>
+                                <div class="num offline">16</div>
+                            </div>
+                            <div class="item-c">
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                                <div class="name">西风楼新风井泵房</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
         <div class="right">
-            <div class="right-box">
-                <!-- 实时监控 -->
+            <!-- 实时监控 -->
+            <div class="js-box">
                 <div class="jiankong">
                     <div class="jiankong-t">实时监控</div>
                     <div class="jiankong-c">
                         <div class="switch">
                             <div class="switch-l">泵房监控</div>
-                            <div class="switch-r">
-                                <div class="more" :class="{active: selectType==='two'}" @click="changeType('two')">多屏模式 </div>
-                                <div class="single" :class="{active: selectType==='single'}" @click="changeType('single')">单屏模式</div>
-                            </div>
                         </div>
                         <div class="video-box">
-                            <div class="two" v-if="selectType==='two'">
-                                <div class="list" v-for="(item, index) in showList" :key="index">
-                                    <div class="item" v-if="item?.deviceId">
-                                        <VideoPlayer :item="item" />
-                                    </div>
-                                    <div v-else class="item"></div>
-                                </div>
-                            </div>
-                            <div class="single" v-else>
-                                <div class="item" v-if="showList[0]?.deviceId">
-                                    <VideoPlayer :item="showList[0]" />
-                                </div>
-                                <div v-else class="item"></div>
-                            </div>
+                            <router-link to="/screen/monitor" class="item">
+                                <el-icon><VideoPlay /></el-icon>
+                            </router-link>
                         </div>
                     </div>
                 </div>
-                <!-- 报警记录 -->
-                <div class="warnRecord">
-                    <div class="warnRecord-title">报警记录</div>
-                    <div class="warnRecord-info">
-                        <div class="into-t">报警信息</div>
-                        <div class="info-list">
-                            <div class="item" v-for="(item, index) in warnList" :key="index">
-                                <el-tooltip
-                                    effect="dark"
-                                    :content="item.pointName"
-                                    placement="top"
-                                >
-                                    {{item.pointName}}
-                                </el-tooltip>
-                                <el-tooltip
-                                    effect="dark"
-                                    :content="item.facilityName"
-                                    placement="top"
-                                >
-                                    {{item.facilityName}}
-                                </el-tooltip>
-                                <el-tooltip
-                                    effect="dark"
-                                    :content="item.description"
-                                    placement="top"
-                                >
-                                    {{item.description}}
-                                </el-tooltip>
-                            </div>
+            </div>
+            <!-- 报警记录 -->
+            <div class="warnRecord" v-if="warnList?.length > 0">
+                <div class="warnRecord-title">报警记录</div>
+                <div class="warnRecord-info">
+                    <div class="into-t">报警信息</div>
+                    <div class="info-list">
+                        <div class="item" v-for="(item, index) in warnList" :key="index">
+                            <el-tooltip
+                                effect="dark"
+                                :content="item.facilityName"
+                                placement="top"
+                            >
+                                {{item.facilityName}}
+                            </el-tooltip>
+                            <el-tooltip
+                                effect="dark"
+                                :content="item.description"
+                                placement="top"
+                            >
+                                {{item.description}}
+                            </el-tooltip>
                         </div>
-                    </div>
-                    <div class="warnRecord-datashow">
-                        <div ref="warningRef" class="warning" />
                     </div>
                 </div>
             </div>
@@ -109,103 +222,73 @@
 </template>
 
 <script setup lang="ts">
-import { use } from "echarts/core";
+import {onMounted, reactive, onUnmounted, ref} from "vue";
+import {getPumpData, getPumpWarning} from '@/api/screen/index.js'
+import { ElMessageBox } from 'element-plus'
 import * as echarts from 'echarts/core';
-import {GridComponent, TooltipComponent, LegendComponent} from "echarts/components";
-import { LineChart, PieChart } from "echarts/charts";
-import { UniversalTransition, LabelLayout } from "echarts/features";
-import { CanvasRenderer } from "echarts/renderers";
-import {onMounted, reactive, ref} from "vue";
-import {getPumpData} from '@/api/screen/index.js'
-import {getVideoList} from '@/api/screen/video.js'
-import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
+import { GridComponent, TooltipComponent } from 'echarts/components';
+import { BarChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([GridComponent, TooltipComponent, BarChart, CanvasRenderer]);
 
 
-use([
-    GridComponent,
-    LineChart,
-    CanvasRenderer,
-    UniversalTransition,
-    TooltipComponent,
-    LegendComponent,
-    PieChart,
-    CanvasRenderer,
-    LabelLayout,
-]);
-
-const warningRef = ref();
-let warningCharts = null;
-
+const warnChart = ref(null)
 const tucengVal = ref(0);
-const selectType = ref('single')
-const videoList = ref([])
-const showList = ref([])
 const warnList = ref([])
 const showMsg = ref(0)
 const pointList = ref([])
+const dislogOpen = ref(false)
+let timer = null;
+let warnCharts = null
+
+const openStatus = reactive({
+    bengfang: false,
+    shuibeng: false,
+    liuliangji: false,
+    shuijin: false
+})
+
+const warnCode = ['B001StartNumber', 'B002StartNumber', 'B003StartNumber', 'B004StartNumber']
 
 const clickMsgFun = (index: number) => {
     showMsg.value = showMsg.value === index ? null : index;
 }
 
-const setWarningCharts = (data) => {
-    if(warningRef.value) {
-        warningCharts = echarts.init(warningRef.value);
-        const option = {
-            tooltip: {
-                trigger: 'item'
-            },
-            series: [
-                {
-                    type: 'pie',
-                    radius: '50%',
-                    data: data,
-                    emphasis: {
-                        itemStyle: {
-                            shadowBlur: 10,
-                            shadowOffsetX: 0,
-                            shadowColor: 'rgba(0, 0, 0, 0.5)'
-                        }
-                    }
-                }
-            ]
-        }
-        warningCharts.setOption(option);
-    }
-}
-
-// 切换播放模式
-const changeType = (type) => {
-    selectType.value = type
-    showList.value = []
-    if(type === 'two') {
-        showList.value = videoList.value.slice(0, 2).concat(Array(2 - videoList.value.length).fill(null))
-    } else {
-        showList.value = videoList.value.slice(0, 1)
+const setOpenStatus = (type: string) => {
+    switch (type) {
+        case "bengfang":
+            openStatus.bengfang = openStatus.bengfang ? false : true;
+            break;
+        case "shuibeng":
+            openStatus.shuibeng = openStatus.shuibeng ? false : true;
+            break;
+        case "liuliangji":
+            openStatus.liuliangji = openStatus.liuliangji ? false : true;
+            break
+        case "shuijin":
+            openStatus.shuijin = openStatus.shuijin ? false : true;
+            break
+        default:
+            break;
     }
 }
 
 // 获取报警数据
 const getWarning = () => {
-    getHomeWarning().then(res => {
-        warnList.value = res.data.alarmHistoryVOList
-        let data = [
-            { value: res.data.facilityCount, name: '设备启动异常' },
-            { value: res.data.waterEnterCount, name: '进水压力异常' },
-            { value: res.data.waterOutCount, name: '出口压力异常' },
-        ]
-        setWarningCharts(data)
+    getPumpWarning({limit: 10, page:1}).then(res => {
+        warnList.value = res.data.list
+        const warnDialogList = res.data.list.filter(el => warnCode.includes(el.code))
+        if(!dislogOpen.value && warnDialogList.length > 0) {
+            dislogOpen.value=true
+            ElMessageBox.confirm(warnDialogList[0].facilityName, warnDialogList[0].description, {
+                showCancelButton: false,
+                confirmButtonText: '关闭',
+                type: 'error'
+            }).then(() => {
+                console.log('关闭')
+            })
+        }
     })
-}
-
-// 获取视频列表
-const getVideo = async (id) => {
-    if(id) {
-        getVideoList({pointId: id}).then(res => {
-            videoList.value = res.data;
-            changeType(selectType.value)
-        })
-    }
 }
 
 // 获取泵房信息
@@ -213,13 +296,18 @@
     const pump = []
     getPumpData().then(res => {
         res.data.forEach((el, index) => {
-            const yewei = el.parameterVOList.find(item => item.columnsCode === '1001')
             const shuijin = el.parameterVOList.find(item => item.columnsCode === 'SQ')
+            const status = el.parameterVOList.find(item => item.columnsCode === '1012')
+            const v1 = el.parameterVOList.find(item => item.columnsCode === '2001A')
+            const v2 = el.parameterVOList.find(item => item.columnsCode === '2001B')
+            const v3 = el.parameterVOList.find(item => item.columnsCode === '2001C')
             pump.push({
-                left: 84, top: 28,
+                left: 80, top: 20,
                 name: el.facilityName,
-                yewei: yewei.columnValue + yewei?.columnsUnits,
+                totalTime: el.totalTime,
+                gongdain: gongdainStatus(Number(v1.columnValue), Number(v2.columnValue), Number(v3.columnValue)),
                 shuijin: !Number(shuijin.columnValue) ? '正常' : '异常',
+                status: Number(status.columnValue) < 0 ? '吸水' : '排水',
             })
         })
 
@@ -227,9 +315,80 @@
     })
 }
 
+const initWarnCharts = () => {
+    if(warnChart.value) {
+        warnCharts = echarts.init(warnChart.value);
+        const option = {
+            grid: {
+                top: '10%',
+                bottom: '10%',
+                left: '12%'
+            },
+            tooltip: {
+                trigger: 'item',
+            },
+            xAxis: {
+                type: 'category',
+                data: ['西南楼', '文化中心', '天津宾馆', '体育中心'],
+                axisLabel: {
+                    color: '#fff',
+                    fontSize: '0.8rem'
+                },
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    color: '#fff',
+                    fontSize: '0.8rem'
+                },
+            },
+            series: [
+                {
+                    data: [120, 200, 150, 80],
+                    type: 'bar',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#ff0000' // 0% 处的颜色
+                            }, {
+                                offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
+                            }],
+                        }
+                    }
+                }
+            ]
+        }
+        warnCharts.setOption(option);
+    }
+}
+
+
+const gongdainStatus = (n1, n2, n3) => {
+    if ((n1 > 350 && n1 < 400) && (n2 > 350 && n2 < 400) && (n3 > 350 && n3 < 400)) {
+        return true
+    } else {
+        return false
+    }
+}
+
 onMounted(() => {
+    initWarnCharts()
     getPumpInfo()
-    // getWarning()
+    getWarning()
+    // 定时获取报警信息
+    timer = setInterval(() => {
+        getWarning()
+    }, 5000)
+})
+onUnmounted(() => {
+    if(timer){
+        clearInterval(timer)
+    }
 })
 </script>
 
@@ -265,13 +424,123 @@
     justify-content: space-between;
     color: white;
     overflow: hidden;
-
-    .center {
-        width: 80%;
+    gap: 1rem;
+    .left{
+        width: 20%;
+        height: 100%;
         display: flex;
         flex-direction: column;
+        justify-content: space-between;
+        .warn{
+            height: 40%;
+            background-image: url('@/assets/images_lc/realTimeMonitoring.png');
+            backdrop-filter: blur(3px);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            &-t {
+                background-image: url('@/assets/images_lc/title_font.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                padding-left: 16%;
+                font-size: 1.2rem;
+            }
+
+            &-c {
+                height: 90%;
+                .warnCharts{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+        .pumpList{
+            height: 58%;
+            background-image: url('@/assets/images_lc/warnRecord.png');
+            backdrop-filter: blur(3px);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            &-t{
+                background-image: url('@/assets/images_lc/title_font.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                padding-left: 16%;
+                font-size: 1.3rem;
+            }
+            &-c{
+                height: 90%;
+                padding: 1rem;
+                .list{
+                    height: 100%;
+                    overflow-y: scroll;
+                    &::-webkit-scrollbar{
+                        display: none;
+                    }
+                    .listItem{
+                        width: 100%;
+                        padding: 1rem 0;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        .value{
+                            padding: 0.5rem 1rem;
+                            border-radius: 0.5rem;
+                        }
+                        .default{
+                            background-color: #1ab394;
+                        }
+                        .error{
+                            background-color: #d53333;
+                        }
+                        .offline{
+                            background-color: #aaaaaa;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .center {
+        width: 58%;
+        display: flex;
+        flex-direction: column;
+        .info{
+            height: 17%;
+            display: flex;
+            justify-content: space-between;
+            .infoItem{
+                width: 18%;
+                height: 3.5rem;
+                background: url("@/assets/images_lc/data_info_bg.png") no-repeat;
+                background-size: 100% 100%;
+                overflow: hidden;
+                position: relative;
+                cursor: pointer;
+                &-t{
+                    font-size: 1.3rem;
+                    width: 100%;
+                    height: 3rem;
+                    line-height: 3rem;
+                    text-align: center;
+                }
+                &-c{
+                    width: 100%;
+                    text-align: center;
+                    position: absolute;
+                    bottom: 20%;
+                    span{
+                        font-size:2rem;
+                    }
+                }
+                &.active{
+                    width: 18%;
+                    height: 8.6rem;
+                    background: url("@/assets/images_lc/data_info_bg_zk.png") no-repeat;
+                    background-size: 100% 100%;
+                }
+            }
+        }
         .map {
-            height: 100%;
+            height: 53%;
             .point-box{
                 width: 100%;
                 height: 100%;
@@ -284,7 +553,7 @@
                     }
                     .message{
                         width: 12rem;
-                        height: 14rem;
+                        height: 12rem;
                         background: url("@/assets/images_lc/point-message.png") no-repeat;
                         backdrop-filter: blur(3px);
                         background-size: 100% 100%;
@@ -302,6 +571,68 @@
                             .val-status{
                                 color: #22E195;
                             }
+                            .err-status{
+                                color: red;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .yunxing{
+            height: 30%;
+            background-image: url('@/assets/images_lc/yunxing-statis.png');
+            backdrop-filter: blur(3px);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            &-t{
+                background-image: url('@/assets/images_lc/title_font.png');
+                background-repeat: no-repeat;
+                background-size: 40% 100%;
+                padding-left: 6%;
+                font-size: 1.3rem;
+            }
+            &-c{
+                height: 90%;
+                .list{
+                    height: 100%;
+                    width: 100%;
+                    display: flex;
+                    padding-left: 1rem;
+                    .item{
+                        width: 33%;
+                        &-t{
+                            display: flex;
+                            align-items: center;
+                            height: 20%;
+                            .type{
+                                width: 50%;
+                            }
+                            .num{
+                                font-size: 1.3rem;
+                            }
+                            .default{
+                                color: #1ab394;
+                            }
+                            .error{
+                                color: #f61731;
+                            }
+                            .offline{
+                                color: #acacac;
+                            }
+                        }
+                        &-c{
+                            height: 70%;
+                            display: flex;
+                            flex-wrap: wrap;
+                            overflow-y: scroll;
+                            &::-webkit-scrollbar{
+                                display: none;
+                            }
+                            .name{
+                                width: 50%;
+                                padding-top: 1rem;
+                            }
                         }
                     }
                 }
@@ -311,27 +642,23 @@
 
     .right {
         width: 20%;
-        &:hover{
-            .right-box{
-                transform: translateX(0);
-            }
-        }
-        .right-box{
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            transform: translateX(100%);
-            transition: all .5s;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .js-box{
+            height: 40%;
         }
         .jiankong {
-            height: 45%;
+            height: 100%;
             background-image: url('@/assets/images_lc/realTimeMonitoring.png');
             backdrop-filter: blur(3px);
             background-repeat: no-repeat;
             background-size: 100% 100%;
             &-t {
                 background-image: url('@/assets/images_lc/title_font.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
                 padding-left: 16%;
                 font-size: 1.2rem;
             }
@@ -378,38 +705,22 @@
                     }
                 }
                 .video-box{
-                    height: 85%;
+                    height: 80%;
                     padding: 0 1rem;
-                    .two{
-                        width: 100%;
+                    .item{
                         height: 100%;
+                        background-color: #000;
                         display: flex;
-                        flex-direction: column;
                         align-items: center;
-                        .list{
-                            width: 100%;
-                            height: 48%;
-                            .item{
-                                height: 100%;
-                                background-color: #000;
-                            }
-                        }
-                    }
-                    .single{
-                        width: 100%;
-                        height: 100%;
-                        .item{
-                            height: 95%;
-                            width: 100%;
-                            background-color: #000;
-                        }
+                        justify-content: center;
+                        font-size: 3rem;
                     }
                 }
             }
         }
 
         .warnRecord {
-            height: 55%;
+            height: 58%;
             background-image: url('@/assets/images_lc/warnRecord.png');
             backdrop-filter: blur(3px);
             background-repeat: no-repeat;
@@ -418,31 +729,33 @@
             flex-direction: column;
             .warnRecord-title {
                 background-image: url('@/assets/images_lc/title_font.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
                 padding-left: 16%;
                 font-size: 1.3rem;
             }
             .warnRecord-info {
                 width: 90%;
-                height: 50%;
+                height: 90%;
                 margin: auto;
                 overflow-y: scroll;
                 &::-webkit-scrollbar{
                     display: none;
                 }
                 .into-t{
-                    height: 15%;
+                    height: 10%;
                     font-size: 1.2rem;
                     padding-top: 0.3rem;
                 }
                 .info-list{
-                    height: 85%;
+                    height: 90%;
                     .item{
                         padding: 0.5rem 0;
                         display: flex;
                         justify-content: space-between;
                         font-size: 0.8rem;
                         :deep(.el-only-child__content){
-                            width: 30%;
+                            width: 50%;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             white-space: nowrap;

--
Gitblit v1.9.3