大屏页面

MrShi

6 小时以前 11ef63896519d0e81cd794894752b79a823ff2a6

大屏页面

 screen/src/assets/images/bg.png

 screen/src/assets/images/ic_guihao@2x.png

 screen/src/assets/images/ic_kongxian@2x.png

 screen/src/assets/images/ic_lingyong@2x.png

 screen/src/assets/images/ic_weibao@2x.png

 screen/src/assets/images/ic_zaiwei@2x.png

 screen/src/assets/images/ic_zongguige@2x.png

 screen/src/router/index.js

@@ -71,6 +71,14 @@
      },
      component: () => import('../views/TaskEfficiency.vue')
    },
    {
      path: '/KeyCabinet', // é’¥åŒ™æŸœæ•°æ®çœ‹æ¿
      name: 'KeyCabinet',
      meta: {
        title: '钥匙柜数据看板'
      },
      component: () => import('../views/KeyCabinet.vue')
    },
  ]
})


 screen/src/views/KeyCabinet.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1212 @@
<template>
    <v-scale-screen width="1920" height="960">
        <div class="main_app">
            <img src="@/assets/images/bg.png" class="main_bg" alt="" />
            <div class="main_header">
                <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
                <div class="title">钥匙柜数据看板</div>
                <div class="time_wrap">
                    <span class="date">{{ date }}</span>
                    <span class="week">{{ week }}</span>
                    <span class="time">{{ time }}</span>
                </div>
            </div>
            <div class="main_content">
                <div class="left_box">
                    <div class="left_box_one">
                        <div class="left_box_one_item">
                            <img src="../assets/images/ic_zongguige@2x.png" />
                            <div class="left_box_one_item_info">
                                <span>总柜格</span>
                                <span>24</span>
                            </div>
                        </div>
                        <div class="left_box_one_item">
                            <img src="../assets/images/ic_zaiwei@2x.png" />
                            <div class="left_box_one_item_info">
                                <span>在位</span>
                                <span>24</span>
                            </div>
                        </div>
                        <div class="left_box_one_item">
                            <img src="../assets/images/ic_lingyong@2x.png" />
                            <div class="left_box_one_item_info">
                                <span>领用</span>
                                <span>24</span>
                            </div>
                        </div>
                        <div class="left_box_one_item">
                            <img src="../assets/images/ic_kongxian@2x.png" />
                            <div class="left_box_one_item_info">
                                <span>空闲</span>
                                <span>24</span>
                            </div>
                        </div>
                        <div class="left_box_one_item">
                            <img src="../assets/images/ic_weibao@2x.png" />
                            <div class="left_box_one_item_info">
                                <span>维保</span>
                                <span>24</span>
                            </div>
                        </div>
                    </div>
                    <div class="left_box_three">
                        <div class="three_one">
                            <div class="com_header">
                                <div class="title">
                                    <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                                    <div>派车统计</div>
                                </div>
                                <div class="tabs">
                                    <div class="tab active">近7天</div>
                                    <div class="separate">&nbsp;｜&nbsp;</div>
                                    <div class="tab">近15天</div>
                                </div>
                                <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
                            </div>
                            <div class="three_one_chat"></div>
                        </div>
                        <div style="width: 20px; height: 100%"></div>
                        <div class="three_two">
                            <div class="com_header">
                                <div class="title">
                                    <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                                    <div>钥匙领取归还统计</div>
                                </div>
                                <div class="tabs">
                                    <div class="tab active">近7天</div>
                                    <div class="separate">&nbsp;｜&nbsp;</div>
                                    <div class="tab">近15天</div>
                                </div>
                                <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
                            </div>
                            <div class="three_two_chat"></div>
                        </div>

                        <div class="echart_wrap">
                            <div class="echart2" id="echart2"></div>
                        </div>
                    </div>

                    <div class="left_box_two">
                        <div class="com_header">
                            <div class="title">
                                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                                <div>钥匙取还记录</div>
                            </div>
                            <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
                        </div>
                        <div class="list_wrap">
                            <div class="header line">
                                <span class="item">合同号</span>
                                <span class="item status">订单状态</span>
                                <span class="item">目的地</span>
                                <span class="item">任务下达时间</span>
                            </div>
                            <div class="one-swiper list">
                                <div class="swiper-wrapper">
                                    <div class="line one-swiper-slide swiper-slide item" v-for="item in 8" :key="item">
                                        <span class="item">contractNumber</span>
                                        <span class="item status">statusDesc</span>
                                        <span class="item">receiveEnterprise</span>
                                        <span class="item">createDate</span>
                                    </div>
                                </div>
                            </div>
<!--                            <template>-->
<!--                                <Loading />-->
<!--                                <div class="empty">-->
<!--                                    <img src="@/assets/images/default_nodata.png" alt="">-->
<!--                                </div>-->
<!--                            </template>-->
                        </div>
                    </div>
                </div>

                <div class="right_box">
                    <div class="right_box_one">
                        <div class="com_header">
                            <div class="title">
                                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                                <div>告警记录</div>
                            </div>
                            <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
                        </div>
                        <div class="content1">
                            <div class="row">
                                <div class="row-title">
                                    <div class="row-title-left">
                                        <img src="@/assets/images/FireFighting/ic_title_green@2x.png" />
                                        <span>钥匙告警分布</span>
                                    </div>
                                    <div class="row-title-right">
                                        <span class="ac">今日</span>
                                        &nbsp;|&nbsp;
                                        <span>本月</span>
                                        &nbsp;|&nbsp;
                                        <span>本年</span>
                                    </div>
                                </div>
                                <div class="car_static">
                                    <div class="echart_wrap">
                                        <div class="pie_text">
                                            <div class="fs30"><strong>30</strong></div>
                                            <div>入库总量</div>
                                        </div>
                                        <div class="echart1" id="echart1"></div>
                                    </div>
                                    <div class="list">
                                        <div class="item1">
                                            <div class="line">
                                                <div class="icon"></div>
                                                <div class="text">酒精检测告警</div>
                                            </div>
                                            <div class="num">16次｜55.0%</div>
                                        </div>
                                        <div class="item1">
                                            <div class="line">
                                                <div class="icon"></div>
                                                <div class="text">柜门未关告警</div>
                                            </div>
                                            <div class="num">12次｜40.0%</div>
                                        </div>
                                        <div class="item1">
                                            <div class="line">
                                                <div class="icon"></div>
                                                <div class="text">超时未还告警</div>
                                            </div>
                                            <div class="num">2次｜5.0%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="row-title">
                                    <div class="row-title-left">
                                        <img src="@/assets/images/FireFighting/ic_title_green@2x.png" />
                                        <span>告警明细</span>
                                    </div>
                                </div>
                                <div class="list1 three-swiper">
                                    <div class="swiper-wrapper">
                                        <div class="item three-swiper-slide swiper-slide" v-for="(item, i) in alarm">
                                            <div class="icon">
                                                <div class="circle"></div>
                                                <div class="line"></div>
                                            </div>
                                            <div class="content">
                                                <div class="header">
                                                    <div class="time">07月07日 14:23:22</div>
                                                    <div class="time">操作人：唐嫣李</div>
                                                </div>
                                                <div class="main">
                                                    <div class="left">
                                                        <div class="title">
                                                            <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
                                                            <span>酒精检测超标</span>
                                                            <div class="data">
                                                                <img src="@/assets/images/ic_guihao@2x.png" />
                                                                <span>柜号：19</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- <div class="status">处理中</div> -->
                                                </div>
                                            </div>
                                        </div>
<!--                                        <div v-if="data7.length == 0" class="empty_wrap" style="margin-top: 50px;">-->
<!--                                            <img src="@/assets/images/default_empty.png" alt="">-->
<!--                                        </div>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </v-scale-screen>
</template>

<script setup>
    import { ref, onMounted, nextTick } from 'vue'
    import VScaleScreen from 'v-scale-screen'
    import Percent from '@/components/percent.vue'
    import Loading from '@/components/Loading.vue'
    import dayjs from 'dayjs'
    import ChargeRate from '@/components/ChargeRate.vue'
    import { statusMap } from '@/utils/config'
    import * as echarts from 'echarts'
    import duration from 'dayjs/plugin/duration'
    dayjs.extend(duration)
    import 'swiper/css/swiper.min.css'
    import Swiper from 'swiper'
    import {
        zxloadCurve,
        zxenergyDataList
    } from '@/api'


    const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
    const date = ref(dayjs().format('YYYY.MM.DD'))
    const week = ref(weekMap[new Date().getDay()])
    const time = ref(dayjs().format('HH:mm:ss'))
    setInterval(() => {
        date.value = dayjs().format('YYYY-MM-DD')
        week.value = weekMap[new Date().getDay()]
        time.value = dayjs().format('HH:mm:ss')

    }, 1000)

    const data4 = ref([])
    const data2 = ref([])
    const alarm = ref([{},{},{},{},{},{},{},{}])
    const claimRecord = ref([{},{},{},{},{},{},{},{}])

    const getData4 = () => {
        zxloadCurve().then(res => {
            const result = res.data || []
            data4.value = result
            if (data4.value && data4.value.length > 0) {
                initLoadReal()
            }
        })
    }

    const initLoadReal = () => {
        // åŸºäºŽå‡†å¤‡å¥½çš„dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('.three_one_chat'))
        // ç»˜åˆ¶å›¾è¡¨
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                },
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: '#D2E0FF'
                },
                data: data4.value.map(i => i.timeData)
            },
            yAxis: {
                type: 'value',
                name: '单位：辆',
                nameTextStyle: {
                    padding: [0, 0, 0, -16],    // å››ä¸ªæ•°å­—分别为上右下左与原位置距离
                    color: '#D2E0FF'
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        //这里输入线条的样式
                        color: 'rgba(255,255,255,0.14)',
                        type: 'dashed',
                    },
                    splitNumber: 4
                },
                axisLabel: {
                    color: '#D2E0FF'
                }
            },
            grid: {
                top: '18%',
                left: '4%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            },
            series: [
                {
                    data: data4.value.map(i => i.energy),
                    type: 'line',
                    areaStyle: {
                        normal: {
                            color: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: "#00F2F3" // 0% å¤„的颜色
                                }, {
                                    offset: 1,
                                    color: "rgba(0,0,0,.3)" // 100% å¤„的颜色
                                }],
                                globalCoord: false // ç¼ºçœä¸º false
                            }
                        }
                    },
                    lineStyle: { // çº¿æ¡æ ·å¼
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#00F2F3' // 0% å¤„的颜色
                            }, {
                                offset: 1, color: '#00F2F3' // 100% å¤„的颜色
                            }],
                        },
                        width: 2, // çº¿æ¡ç²—细
                    },
                    symbol: 'circle',
                    symbolSize: 0,
                    itemStyle: {
                        normal: {
                            color: '#00F2F3', //折线点的颜色
                        },
                    },
                    smooth: true
                }
            ]
        })

        window.addEventListener('resize', function () {//执行
            myChart.resize()
        })
    }

    const getData2 = () => {
        zxenergyDataList({ type: 0 }).then(res => {
            const result = res.data || []
            data2.value = result
            initEnergy()
        })
    }

    const initEnergy = () => {
        var myChart = echarts.init(document.querySelector('.three_two_chat'))

        myChart.setOption({
            grid: {
                top: '20%',
                left: '6%',
                right: '2%',
                bottom: '4%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    color: '#D2E0FF'
                },
                data: data2.value.map(i => dayjs(i.timeData).format('M'))
            },
            yAxis: {
                type: 'value',
                name: '单位：k',
                axisLabel: {
                    color: '#D2E0FF'
                },
                nameTextStyle: {
                    color: '#D2E0FF',
                    padding: [0, 0, 4, -30]    // å››ä¸ªæ•°å­—分别为上右下左与原位置距离
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        //这里输入线条的样式
                        color: 'rgba(255,255,255,0.14)',
                    }
                }
            },
            series: [
                {
                    data: data2.value.map(i => i.energy),
                    type: 'bar',
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#50afd3' },
                                    { offset: 1, color: '#1d4861' }
                                ]
                            ),
                            barBorderRadius: [3, 3, 0, 0]
                        }
                    }
                },
                {
                    data: data2.value.map(i => i.energy),
                    type: 'bar',
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: 'rgba(255, 184, 0, 1)' },
                                    { offset: 1, color: 'rgba(255, 138, 0, 0.20)' }
                                ]
                            ),
                            barBorderRadius: [3, 3, 0, 0]
                        }
                    }
                }
            ]
        })
        window.addEventListener('resize', function () {//执行
            myChart.resize()
        })
    }

    const autoplayFlag = (list = [], leng = 4, time = 2000) => {
        if (list.length > leng) {
            return { delay: time, disableOnInteraction: false }
        } else {
            return false
        }
    }

    const loopFn1 = () => {
        var newSwiper1 = new Swiper('.one-swiper', {
            initialSlide: 0,
            direction: 'vertical', //竖直方向
            slidesPerView: 4,
            autoplay: autoplayFlag(claimRecord.value, 4, 6000),
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
        })
    }

    const loopFn7 = () => {
        var newSwiper1 = new Swiper('.three-swiper', {
            initialSlide: 0,
            // loop: true, // å¾ªçŽ¯æ¨¡å¼é€‰é¡¹
            direction: 'vertical', //竖直方向
            slidesPerView: 4,
            // autoplay: { delay: 500, disableOnInteraction: false },
            autoplay: autoplayFlag(alarm.value, 4, 4000),
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
        })
    }

    onMounted(() => {
        // getData1()
        getData2()
        // getData3()
        getData4()
        // getData5()
        // getData6()
        // getData7()
        //
        // setInterval(() => {
        //     getData1()
        //     getData2()
        //     getData3()
        //     getData4()
        //     getData5()
        //     getData6()
        //     getData7()
        // }, 1000 * 60)
        //
        // setTimeout(() => {
        //     loopFn2()
        //     loopFn5()
        //     loopFn7()
        //     loopFn6()
        // }, 12000)
        setTimeout(() => {
            loopFn1()
            loopFn7()
        }, 12000)
    })


</script>

<style lang="scss" scoped>
    div {
        box-sizing: border-box;
    }

    .main_content {
        display: flex;
        padding: 20px 25px 0;

        .left_box {
            flex: 1;

            .left_box_one {
                width: 100%;
                margin: 30px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left_box_one_item {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img {
                        width: 70px;
                        height: 73px;
                        margin-right: 20px;
                    }
                    .left_box_one_item_info {
                        display: flex;
                        flex-direction: column;
                        span {
                            &:nth-child(1) {
                                font-weight: 600;
                                font-size: 18px;
                                color: #D2E0FF;
                            }
                            &:nth-child(2) {
                                font-weight: bold;
                                font-size: 36px;
                                color: #FFFFFF;
                                line-height: 54px;
                                text-shadow: 0px 2px 17px rgba(0,0,0,0.32);
                            }
                        }
                    }
                }
            }

            .left_box_two {
                width: 100%;
                display: flex;
                flex-direction: column;
                margin-top: 20px;

                .list_wrap {
                    position: relative;

                    .list {
                        height: 200px;
                        overflow: hidden;
                    }

                    .empty {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 200px;

                        img {
                            width: 144px;
                        }
                    }

                    .line {
                        display: flex;
                        height: 50px;
                        padding: 0 20px;
                        box-sizing: border-box;
                        align-items: center;
                        font-size: 14px;
                        color: #D2E0FF;
                        cursor: pointer;

                        &:nth-of-type(2n) {
                            background: rgba(134, 156, 201, 0.05);
                        }

                        .item {
                            flex: 4;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .status {
                            flex: 3.2;
                        }
                    }

                    .avtive {
                        background: rgba(1, 171, 254, 0.2);
                        color: #01D9FE;
                        font-weight: 600;
                    }

                    .header {
                        width: 100%;
                        height: 50px;
                        padding: 0 20px;
                        box-sizing: border-box;
                        background: rgba(134,156,201,0.1);
                        font-weight: 500;
                        color: #01D9FE;
                    }
                }
            }

            .left_box_three {
                width: 100%;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;

                .three_one {
                    flex: 0.9;

                    .three_one_chat {
                        width: 100%;
                        height: 328px;
                        background: rgba(255,255,255,0.03);
                    }
                }

                .three_two {
                    flex: 1.1;

                    .three_two_chat {
                        width: 100%;
                        height: 328px;
                        background: rgba(255,255,255,0.03);
                    }
                }
            }
        }

        .right_box {
            width: 440px;
            margin-left: 15px;
            flex-shrink: 0;

            .right_box_one {
                background: rgba(0, 86, 255, 0.05);
                backdrop-filter: blur(5px);
                background: rgba(0, 86, 255, 0.05);
                backdrop-filter: blur(5px);

                .static_wrap {
                    display: flex;
                    padding: 20px 0 15px;

                    .item {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        .name {
                            font-size: 14px;
                            color: #D2E0FF;
                        }

                        .num {
                            font-size: 22px;
                            font-weight: 500;

                        }
                    }
                }

                .content1 {
                    width: 100%;
                    height: 778px;
                    padding: 25px;
                    box-sizing: border-box;
                    background: rgba(255,255,255,0.03);

                    .row {
                        width: 100%;
                        margin-bottom: 70px;

                        &:last-child {
                            margin: 0 !important;
                        }

                        .list1 {
                            height: 344px;
                            overflow: hidden;
                            scrollbar-width: none;

                            .item {
                                display: flex;
                                font-size: 13px;
                                color: #D2E0FF;
                                height: 86px;

                                .icon {
                                    width: 40px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    padding-top: 10px;

                                    .circle {
                                        width: 7px;
                                        height: 7px;
                                        border-radius: 50%;
                                        background: #01D9FE;
                                        box-shadow: 0px 0px 1px 4px #34788f;
                                        /* opacity: 0.52; */
                                    }

                                    .line {
                                        margin-top: 3px;
                                        width: 1px;
                                        flex: 1;
                                        background-color: #153947;
                                    }
                                }

                                .content {
                                    flex: 1;
                                    .header {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;

                                        .status {
                                            width: 22px;
                                            height: 18px;
                                            line-height: 18px;
                                            text-align: center;
                                            border-radius: 2px;
                                            border: 1px solid #01D9FE;
                                            font-size: 12px;
                                            color: #01D9FE;
                                        }

                                        .time {
                                            font-size: 13px;
                                            color: #D2E0FF;
                                        }
                                    }

                                    .main {
                                        height: 40px;
                                        background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%);
                                        border-radius: 2px 0px 0px 2px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;

                                        border: 1px solid;
                                        margin-top: 8px;
                                        padding: 0 10px;
                                        border-image: linear-gradient(270deg, rgba(254, 85, 1, 0), rgba(254, 85, 1, 0.6)) 1 1;

                                        .left {

                                            .title {
                                                font-size: 13px;
                                                margin-bottom: 4px;
                                                display: flex;
                                                align-items: center;

                                                .xf {
                                                    width: 14px;
                                                    height: 14px;
                                                    margin-right: 6px;
                                                }

                                                .data {
                                                    margin-left: 63px;
                                                    display: flex;
                                                    align-items: center;
                                                    img {
                                                        width: 12px;
                                                        height: 12px;
                                                        margin-right: 5px;
                                                    }
                                                    span {
                                                        font-weight: 400;
                                                        font-size: 13px;
                                                        color: #D2E0FF;
                                                    }
                                                }
                                            }
                                        }



                                        .status {
                                            padding: 0 8px;
                                            font-size: 13px;
                                            color: #D2E0FF;
                                            height: 24px;
                                            line-height: 24px;
                                            text-align: center;
                                            background: #132c56;
                                            border-radius: 2px;
                                            border: 1px solid rgba(1, 147, 254, 0.6);
                                        }
                                    }
                                }
                            }
                        }

                        .row-title {
                            width: 100%;
                            margin-bottom: 26px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .row-title-left {
                                display: flex;
                                align-items: center;
                                img {
                                    width: 17px;
                                    height: 17px;
                                    margin-right: 7px;
                                }
                                span {
                                    font-weight: 500;
                                    font-size: 16px;
                                    color: #FFFFFF;
                                }
                            }
                            .row-title-right {
                                display: flex;
                                align-items: center;
                                .ac {
                                    color: #0094EB !important;
                                }
                                span {
                                    font-weight: 600;
                                    font-size: 14px;
                                    color: #D2E0FF;
                                    cursor: pointer;
                                }
                            }
                        }
                        .car_static {
                            width: 100%;
                            display: flex;
                            justify-content: space-evenly;
                            align-items: center;
                            height: 218px;

                            .echart_wrap {
                                position: relative;

                                .pie_text {
                                    width: 100px;
                                    height: 100px;
                                    border: 1px dashed rgba(1, 217, 254, 0.7);
                                    border-radius: 50%;
                                    position: absolute;

                                    left: 50%;
                                    top: 50%;
                                    transform: translate(-50%, -50%);
                                    z-index: 999;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;
                                    font-size: 12px;

                                    .fs30 {
                                        font-weight: bold;
                                        font-size: 18px;
                                        margin-bottom: 4px;
                                    }
                                }
                            }

                            .echart1 {
                                width: 130px;
                                height: 130px;
                            }

                            .list {
                                display: flex;
                                flex-direction: column;

                                .item1 {
                                    width: 100%;
                                    font-size: 14px;
                                    margin-bottom: 14px;

                                    .line {
                                        display: flex;
                                        align-items: center;
                                        margin-bottom: 2px;

                                        .icon {
                                            width: 12px;
                                            height: 12px;
                                            border-radius: 50%;
                                            margin-right: 10px;
                                            background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
                                        }
                                    }

                                    .num {
                                        margin-left: 20px;
                                    }
                                }
                            }
                        }
                    }
                }

                .echart_wrap {
                    width: 100%;

                    .echart3 {
                        width: 100%;
                        height: 160px;
                    }
                }

                .list {
                    margin: 0 20px 0;
                    width: 430px;
                    overflow: hidden;
                    scrollbar-width: none;

                    .line {
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        height: 33px !important;
                        color: #D2E0FF;
                        width: 100%;

                        .time_wrap {
                            display: flex;
                            align-items: center;
                            width: 52px;
                            color: #FFFFFF;

                            .time {
                                width: 40px;
                                height: 18px;
                                line-height: 18px;
                                text-align: center;
                                background: #00A68E;
                                border-radius: 2px;
                            }

                            .sp {
                                width: 10px;
                                height: 1px;
                                background: #00A68E;
                            }

                            .dian {
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                                background: #00A68E;
                            }
                        }

                        .id_card {
                            flex: 6;
                            margin-left: 12px;
                        }

                        .status {
                            flex: 5;
                        }

                        .desc {
                            flex: 9;
                        }
                    }
                }

            }

            .right_box_two {
                padding: 20px 20px 0;
                margin-top: 20px;

                .list {
                    height: 220px;
                    overflow: hidden;
                    scrollbar-width: none;
                    background: rgba(0, 86, 255, 0.05);
                    backdrop-filter: blur(5px);
                    padding-top: 15px;

                    .item {
                        display: flex;
                        font-size: 13px;
                        color: #D2E0FF;
                        height: 110px;

                        .icon {
                            width: 40px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding-top: 10px;

                            .circle {
                                width: 7px;
                                height: 7px;
                                border-radius: 50%;
                                background: #01D9FE;
                                box-shadow: 0px 0px 1px 4px #34788f;
                                /* opacity: 0.52; */
                            }

                            .line {
                                margin-top: 3px;
                                width: 1px;
                                flex: 1;
                                background-color: #153947;
                            }
                        }
                    }
                }
            }
        }

        .swiper-wrapper {
            display: block !important;
        }
    }

    .main_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90px;
        position: relative;
        padding: 0px 40px 16px;
        font-weight: 600;
        font-size: 36px;

        .title {
            background-image: -webkit-linear-gradient(top,
                    #ffffff 0%,
                    #c8ddff 70%,
                    #85b4ff 80%,
                    #74a9ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .time_wrap {
            font-size: 26px;
            font-weight: 600;
            background-image: -webkit-linear-gradient(top,
                    #ffffff 0%,
                    #c8ddff 50%,
                    #85b4ff 80%,
                    #74a9ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;

            .time {
                width: 130px;
                display: flex;
                justify-content: flex-end;
                font-size: 30px;
            }

            .week {
                margin-left: 20px;
            }
        }

        .main_header_bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }
    }

    .com_header {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px 0 13px;
        position: relative;

        .title {
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 16px;
            background-image: -webkit-linear-gradient(top,
                    #ffffff 0%,
                    #c8ddff 66%,
                    #85b4ff 72%,
                    #74a9ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            .icon {
                width: 16px;
                height: 16px;
                margin-right: 14px;
            }
        }

        .tabs {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #d2e0ff;

            .separate {
                width: 1px;
                height: 14px;
                background-color: #d2e0ff;
                margin: 0 6px;
            }

            .tab {
                cursor: pointer;
            }

            .active {
                color: #0094eb;
            }
        }
    }

    .main_app {
        width: 1920px;
        height: 960px;
        /* width: 100%;
        height: 100vh; */
        background: #04141c;
        color: #FFFFFF;
        position: relative;
        z-index: -2;
        font-size: 14px;

        .main_bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }
    }

    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }
</style>

 screen/vite.config.js

@@ -26,8 +26,8 @@
    proxy: {
      "/gateway_interface": {
        // target: "http://192.168.0.104:10010",
        target: "http://10.50.250.253:8088/gateway_interface",
        // target: "https://atwl.ahzyssl.com/zhyq_interface",
        // target: "http://10.50.250.253:8088/gateway_interface",
        target: "https://atwl.ahzyssl.com/zhyq_interface",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/gateway_interface/, ""),
      },