From 81ba74daf8b7e7563bfadf4712c6a90d30434370 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 18 十一月 2024 11:51:18 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
screen/src/views/FireFighting.vue | 145 +++++++++++++++++++++++++++++++++++-------------
1 files changed, 106 insertions(+), 39 deletions(-)
diff --git a/screen/src/views/FireFighting.vue b/screen/src/views/FireFighting.vue
index b9b4b1f..2e073c7 100644
--- a/screen/src/views/FireFighting.vue
+++ b/screen/src/views/FireFighting.vue
@@ -31,17 +31,22 @@
<span class="item">鏁呴殰</span>
<span class="item">绂荤嚎</span>
</div>
- <template v-for="(item, i) in dataList1" :key="i">
- <div class="line">
- <span class="item name">{{ item.deviceTypeName }}</span>
- <span class="item">{{ item.statusTotal }}</span>
- <span class="item">{{ item.alarmNum }}</span>
- <span class="item">{{ item.shieldNum }}</span>
- <span class="item">{{ item.errNum }}</span>
- <span class="item">{{ item.offlineNum }}</span>
+ <div class="one-swiper list_content">
+ <div class="swiper-wrapper">
+ <div class="line_wrap one-swiper-slide swiper-slide" v-for="(item, i) in dataList1">
+ <div class="line">
+ <span class="item name">{{ item.deviceTypeName }}</span>
+ <span class="item">{{ item.statusTotal }}</span>
+ <span class="item">{{ item.alarmNum }}</span>
+ <span class="item">{{ item.shieldNum }}</span>
+ <span class="item">{{ item.errNum }}</span>
+ <span class="item">{{ item.offlineNum }}</span>
+ </div>
+ <div class="separate"></div>
+ </div>
</div>
- <div class="separate"></div>
- </template>
+ </div>
+
</div>
</div>
</div>
@@ -218,7 +223,8 @@
<div class="separate"></div>
<div class="item">
<div>缁翠繚鐜�</div>
- <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="num active">{{ ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
+ <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="num active">{{
+ ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
</div>
</div>
<div class="footer">
@@ -262,28 +268,30 @@
<img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
<div class="name">鍛婅淇℃伅</div>
</div>
- <div class="list">
- <div class="item" v-for="i in 5">
- <div class="icon">
- <div class="circle"></div>
- <div class="line"></div>
- </div>
- <div class="content">
- <div class="header">
- <div class="time">
- <span>123</span>
- <span class="status">澶勭悊涓�</span>
- </div>
- <div class="have_time">宸茬粡鍙戠敓<span>1</span>鍒嗛挓</div>
+ <div class="list two-swiper">
+ <div class="swiper-wrapper">
+ <div class="item two-swiper-slide swiper-slide" v-for="item, i in dataList7" :key="i">
+ <div class="icon">
+ <div class="circle"></div>
+ <div class="line"></div>
</div>
- <div class="wrap">
- <div class="title">
- <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
- <span>娑堥槻璀﹀憡</span>
+ <div class="content">
+ <div class="header">
+ <div class="time">
+ <span>{{ item.time }}</span>
+ <span class="status">澶勭悊涓�</span>
+ </div>
+ <div class="have_time">宸茬粡鍙戠敓<span>1</span>鍒嗛挓</div>
</div>
- <div class="title">
- <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
- <span>A鍘傛埧3杞﹂棿闂ㄥ彛</span>
+ <div class="wrap">
+ <div class="title">
+ <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
+ <span>{{ item.name }}</span>
+ </div>
+ <div class="title">
+ <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
+ <span>{{ item.addr }}</span>
+ </div>
</div>
</div>
</div>
@@ -302,6 +310,8 @@
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
+import 'swiper/css/swiper.min.css'
+import Swiper from 'swiper'
import {
getFightingalarmData,
getFightingHandle,
@@ -692,11 +702,19 @@
const getData1 = () => {
getFightingDeAlarm().then(res => {
dataList1.value = res.data
+ loopFn1()
})
}
const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const dataList2 = ref([])
const getData2 = () => {
+ let temp = []
+ temp.push({ name: '鐪熷疄鎶ヨ鏁�', num: 10, rate: 20 })
+ temp.push({ name: '璇姤璀︽暟', num: 30, rate: 60 })
+ temp.push({ name: '宸茶В闄�', num: 20, rate: 40 })
+ temp.push({ name: '澶勭悊涓�', num: 8, rate: 16 })
+ dataList2.value = temp
+ return
getFightingalarmData().then(res => {
const result = res.data || {}
let temp = []
@@ -878,8 +896,49 @@
}
const dataList6 = ref([])
const getData6 = () => {
- getFightingHandle({type: 1}).then(res => {
+ getFightingHandle({ type: 1 }).then(res => {
dataList6.value = res.data
+ })
+}
+const dataList7 = ref([])
+const getData7 = () => {
+ dataList7.value = [
+ { name: '娑堥槻鍛婅', addr: '鍘傚尯闂ㄥ彛', time: '2022-02-02' },
+ { name: '娑堥槻鍛婅', addr: '鍘傚尯闂ㄥ彛', time: '2022-02-02' },
+ { name: '娑堥槻鍛婅', addr: '鍘傚尯闂ㄥ彛', time: '2022-02-02' },
+ { name: '娑堥槻鍛婅', addr: '鍘傚尯闂ㄥ彛', time: '2022-02-02' },
+ { name: '娑堥槻鍛婅', addr: '鍘傚尯闂ㄥ彛', time: '2022-02-02' },
+ { name: '娑堥槻鍛婅', addr: '鍘傚尯闂ㄥ彛', time: '2022-02-02' },
+ { name: '娑堥槻鍛婅', addr: '鍘傚尯闂ㄥ彛', time: '2022-02-02' },
+ { name: '娑堥槻鍛婅', addr: '鍘傚尯闂ㄥ彛', time: '2022-02-02' },
+ { name: '娑堥槻鍛婅', addr: '鍘傚尯闂ㄥ彛', time: '2022-02-02' },
+ ]
+ loopFn2()
+}
+
+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: 5,
+ autoplay: autoplayFlag(dataList1.value, 5, 4000),
+ observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+ })
+}
+const loopFn2 = () => {
+ var newSwiper1 = new Swiper('.two-swiper', {
+ initialSlide: 0,
+ direction: 'vertical', //绔栫洿鏂瑰悜
+ slidesPerView: 4,
+ autoplay: autoplayFlag(dataList7.value, 4, 4000),
+ observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
})
}
@@ -890,6 +949,7 @@
getData4()
getData5()
getData6()
+ getData7()
initWatergage()
initLiquidlevel()
@@ -916,8 +976,15 @@
.list_wrap {
padding: 10px 0;
- height: 227px;
- overflow: auto;
+
+ .list_content {
+ height: 170px;
+ overflow: hidden;
+
+ .line_wrap {
+ height: 34px !important;
+ }
+ }
.list {
.line {
@@ -1347,7 +1414,7 @@
margin-right: 7px;
}
}
-
+
.static_wrap {
display: flex;
justify-content: space-evenly;
@@ -1397,15 +1464,15 @@
}
.list {
- height: 330px;
- overflow: auto;
+ height: 320px;
+ overflow: hidden;
margin-top: 15px;
scrollbar-width: none;
-
.item {
display: flex;
font-size: 13px;
color: #D2E0FF;
+ height: 80px !important;
.icon {
width: 40px;
@@ -1465,7 +1532,7 @@
}
.wrap {
- height: 40px;
+ height: 34px;
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;
--
Gitblit v1.9.3