From e76560c6f1f7150c3f61ef23c1536d08546612f4 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 01 七月 2025 14:10:28 +0800
Subject: [PATCH] fix:修改首页标点配置
---
src/views/screen/index.vue | 106 +++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 98 insertions(+), 8 deletions(-)
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index 7b55682..7916c9d 100644
--- a/src/views/screen/index.vue
+++ b/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;
+ display: flex;
+ .hc-position{
+ width: 70%;
+ height: 100%;
+ position: relative;
+ .point{
+ position: absolute;
+ 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{
- position: absolute;
- right: 0;
- top: 1rem;
- width: 30rem;
- height: calc(100% - 1rem);
+ 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;
--
Gitblit v1.9.3