fix:修改首页标点配置

web

2025-07-01 e76560c6f1f7150c3f61ef23c1536d08546612f4

fix:修改首页标点配置

 src/assets/images/screen/msg-box-l.png

 src/assets/images/screen/msg-box-r.png

 src/assets/images/screen/position.png

 src/assets/images/screen/warn-one.png

 src/assets/images/screen/warn-two.png

 src/views/screen/index.vue

@@ -5,6 +5,48 @@
        <!-- 顶部菜单占位符 -->
        <div class="home-t"></div>
        <div class="home-content">
            <div class="hc-position">
                <div class="point" v-for="item in pointList" :key="item.id" 
                    :style="{left: `${item.left}%`, top: `${item.top}%`, backgroundImage: `url(${warnTwo})`}"
                >
                    <div class="msg-l">
                        <div class="msg-item">
                            <span class="name">设备状态：</span>
                            <span class="val">{{ item.status }}</span>
                        </div>
                        <div class="msg-item">
                            <span class="name">甲烷浓度：</span>
                            <span class="val">{{ item.jiawan }}</span>
                        </div>
                        <div class="msg-item">
                            <span class="name">风机状态：</span>
                            <span class="val">{{ item.fengjiStatus }}</span>
                        </div>
                        <div class="msg-item">
                            <span class="name">硫化氢浓度：</span>
                            <span class="val">{{ item.liuhuaqin }}</span>
                        </div>
                    </div>
                    <div class="msg-r">
                        <div class="msg-item">
                            <span class="name">设备状态：</span>
                            <span class="val">{{ item.status }}</span>
                        </div>
                        <div class="msg-item">
                            <span class="name">甲烷浓度：</span>
                            <span class="val">{{ item.jiawan }}</span>
                        </div>
                        <div class="msg-item">
                            <span class="name">风机状态：</span>
                            <span class="val">{{ item.fengjiStatus }}</span>
                        </div>
                        <div class="msg-item">
                            <span class="name">硫化氢浓度：</span>
                            <span class="val">{{ item.liuhuaqin }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hc-info">
                <div class="shebei item">
                    <div class="item-t">辖区内设备数统计</div>
@@ -80,8 +122,14 @@


<script setup>
import { ref } from 'vue'
    import postImg from '@/assets/images/screen/position.png'
    import warnOne from '@/assets/images/screen/warn-one.png'
    import warnTwo from '@/assets/images/screen/warn-two.png'

    const pointList = ref([
        { left: 25, top: 30, status: '一级报警', jiawan: '2.4%LEL', fengjiStatus: 1, liuhuaqin: '1.9%LEL', id: 1 },
        { left: 40, top: 60, status: '一级报警', jiawan: '2.4%LEL', fengjiStatus: 1, liuhuaqin: '1.9%LEL', id: 2 },
    ])

</script>

@@ -113,15 +161,58 @@
        height: 99%;
        padding: 1rem 1.5rem 0;
        position: relative;
        .hc-info{
        display: flex;
        .hc-position{
            width: 70%;
            height: 100%;
            position: relative;
            .point{
            position: absolute;
            right: 0;
            top: 1rem;
            width: 30rem;
            height: calc(100% - 1rem);
                width: 56px;
                height: 80px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                .msg-l{
                    width: 250px;
                    height: 160px;
                    position: absolute;
                    left: -235px;
                    top: 0;
                    background-image: url('@/assets/images/screen/msg-box-l.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
                }
                .msg-r{
                    width: 250px;
                    height: 160px;
                    position: absolute;
                    left: 40px;
                    top: 0;
                    background-image: url('@/assets/images/screen/msg-box-r.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
                }
                .msg-item{
                    width: 100%;
                    color: #fff;
                    padding: 0.3rem 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
        .hc-info{
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            .item{
                width: 100%;
                height: 48%;
                height: 50%;
                background-image: url("@/assets/images/screen/ct-default.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
@@ -174,7 +265,6 @@
                }
            }
            .gongdan{
                margin-top: 1rem;
                .gongdan-head{
                    height: 2rem;
                    line-height: 2rem;