From 53b6400ec10c8ca61ccec91c82c358d2488eead8 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期五, 20 十二月 2024 09:50:39 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
screen/src/views/FireFighting.vue | 194 ++++++++++++++++++++++++++++++++----------------
1 files changed, 130 insertions(+), 64 deletions(-)
diff --git a/screen/src/views/FireFighting.vue b/screen/src/views/FireFighting.vue
index 2e073c7..3049f9f 100644
--- a/screen/src/views/FireFighting.vue
+++ b/screen/src/views/FireFighting.vue
@@ -35,12 +35,12 @@
<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>
+ <span class="item name">{{ item.typeName }}</span>
+ <span class="item">{{ item.totalDeviceNum || 0 }}</span>
+ <span class="item" style="color: #FEAF01;">{{ item.alarmDeviceNum || 0 }}</span>
+ <span class="item">{{ item.shieldDeviceNum || 0 }}</span>
+ <span class="item">{{ item.errDeviceNum || 0 }}</span>
+ <span class="item">{{ item.offlineDeviceNum || 0 }}</span>
</div>
<div class="separate"></div>
</div>
@@ -117,7 +117,7 @@
<img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt="">
<div class="content">
<div class="name">灞忚斀</div>
- <div class="num num5">{{ dataList4.shieldDeviceNum }}</div>
+ <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div>
</div>
</div>
</div>
@@ -130,9 +130,9 @@
<span>娓╁害/婀垮害浼犳劅鍣�</span>
</div>
<div class="right">
- <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt="">
- <div class="num">1/5</div>
- <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt="">
+ <img @click="changeData8(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt="">
+ <div class="num">{{dataIndex8 + 1}}/{{ dataList8.length }}</div>
+ <img @click="changeData8(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt="">
</div>
</div>
<div class="list_wrap">
@@ -140,19 +140,19 @@
<img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
<span>鍗歌揣鍖�1</span>
</div>
- <div class="list">
+ <div class="list" v-if="dataList8 && dataList8.length > 0">
<div class="item">
<img class="icon" src="@/assets/images/FireFighting/ic_wendu@2x.png" alt="">
<div class="content">
- <div class="num">23<span>掳C</span></div>
- <div class="la">闃堝�� 0锝�100掳C</div>
+ <div class="num">{{ dataList8[dataIndex8].temperatureData?.latestValue }}<span>掳C</span></div>
+ <div class="la">闃堝�� {{ dataList8[dataIndex8].temperatureData?.alarmLow }}锝瀧{ dataList8[dataIndex8].temperatureData?.alarmHigh }}掳C</div>
</div>
</div>
<div class="item">
<img class="icon" src="@/assets/images/FireFighting/ic_shidu@2x.png" alt="">
<div class="content">
- <div class="num">23<span>%</span></div>
- <div class="la">闃堝�� 0锝�100%</div>
+ <div class="num">{{ dataList8[dataIndex8].humidityData?.latestValue }}<span>%</span></div>
+ <div class="la">闃堝�� {{ dataList8[dataIndex8].humidityData?.alarmLow }}锝瀧{ dataList8[dataIndex8].humidityData?.alarmHigh }}</div>
</div>
</div>
</div>
@@ -191,9 +191,9 @@
<div class="liquidlevel_wrap">
<div class="liquidlevel" id="liquidlevel"></div>
<div class="unit">3.45 <span>M</span></div>
- <div class="place">闃堝�� 0锝�4.50M</div>
+ <div class="placeT">闃堝��</div>
</div>
-
+ <div class="place">闃堝�� 0锝�4.50M</div>
</div>
</div>
</div>
@@ -218,12 +218,12 @@
<div class="separate"></div>
<div class="item">
<div>璁″垝缁翠繚</div>
- <div class="num active">{{ dataList5.planProtectTotal }}</div>
+ <div class="num acc">{{ dataList5.planProtectTotal }}</div>
</div>
<div class="separate"></div>
<div class="item">
<div>缁翠繚鐜�</div>
- <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="num active">{{
+ <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{
((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
</div>
</div>
@@ -253,14 +253,14 @@
<img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt="">
<div class="content">
<div class="name">鎻愭姤闅愭偅鏁�</div>
- <div class="num"><span>{{ dataList4.todayDangerNum }}</span>涓�</div>
+ <div class="num"><span>{{ dataList4.dangerTotalNum }}</span>涓�</div>
</div>
</div>
<div class="item">
<img src="@/assets/images/FireFighting/ic_chuli@2x.png" alt="">
<div class="content">
<div class="name">澶勭悊闅愭偅鏁�</div>
- <div class="num"><span class="today">{{ dataList4.dealDangerNum }}</span>涓�</div>
+ <div class="num"><span class="today">{{ dataList4.dangerDealedNum }}</span>涓�</div>
</div>
</div>
</div>
@@ -278,22 +278,28 @@
<div class="content">
<div class="header">
<div class="time">
- <span>{{ item.time }}</span>
- <span class="status">澶勭悊涓�</span>
+ <span>{{ item.alarmTime }}</span>
+ <span class="status" v-if="item.handleStatus == 1">宸叉牳瀹�</span>
+ <span class="status" v-else-if="item.handleStatus == 2">鏈牳瀹�</span>
+ <span class="status" v-else-if="item.handleStatus == 3">鏍稿疄涓�</span>
+ <span v-else class="status">鏈牳瀹�</span>
</div>
- <div class="have_time">宸茬粡鍙戠敓<span>1</span>鍒嗛挓</div>
+ <div class="have_time">宸茬粡鍙戠敓{{ item.haveTime }}</div>
</div>
<div class="wrap">
<div class="title">
<img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
- <span>{{ item.name }}</span>
+ <span>{{ item.alarmTypeName }}</span>
</div>
<div class="title">
<img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
- <span>{{ item.addr }}</span>
+ <span>{{ item.regionName }}</span>
</div>
</div>
</div>
+ </div>
+ <div v-if="dataList7.length == 0" style="margin-top: 100px;" class="empty_wrap">
+ <img src="@/assets/images/default_empty.png" alt="">
</div>
</div>
</div>
@@ -309,6 +315,8 @@
import VScaleScreen from 'v-scale-screen'
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+dayjs.extend(duration)
import * as echarts from 'echarts'
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
@@ -318,6 +326,8 @@
getFightingcenterData,
getFightingDeAlarm,
getFightingDeviceY,
+ getFighalarmDataList,
+ getTemperatureHumidityData
} from '@/api'
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
@@ -335,7 +345,7 @@
const initWatergage = () => {
const myChart = echarts.init(document.getElementById('watergage'))
- var data_value = 2
+ var data_value = 1
const option = {
barMaxWidth: 3,
polar: {
@@ -699,22 +709,16 @@
}
const dataList1 = ref([])
-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
+ // 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 = []
@@ -737,10 +741,15 @@
var myChart = echarts.init(document.querySelector('.echart2'))
// 鐢熸垚鏁版嵁鍜屾棩鏈�
// 绀轰緥鏁版嵁
- const data1 = dataList3.value.map(i => i.alarmNum)
+ const data1 = dataList3.value.map(i => i.realNum)
const data2 = dataList3.value.map(i => i.processingNum)
const data3 = dataList3.value.map(i => i.liftNum)
const data4 = dataList3.value.map(i => i.errNum)
+ const months = dataList3.value.map(i => {
+ return i.startDate.substring(5, 7) + '鏈�'
+ })
+
+
const option = {
legend: {
x: "center",
@@ -774,10 +783,10 @@
borderColor: "rgba(219, 230, 255, 0.8)",
},
xAxis: {
- data: dataList3.value.map(i => i.monthStr),
+ data: months,
axisLabel: {
color: "#FFFFFF", // X 杞存枃瀛楄涓虹櫧鑹�
- fontSize: 14,
+ fontSize: 13,
},
axisLine: {
lineStyle: {
@@ -886,6 +895,7 @@
const getData4 = () => {
getFightingcenterData().then(res => {
dataList4.value = res.data || {}
+ dataList1.value = res.data.deviceTypeList
})
}
const dataList5 = ref({}) // 缁翠繚
@@ -902,18 +912,30 @@
}
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()
+ getFighalarmDataList().then(res => {
+ dataList7.value = res.data || []
+ dataList7.value = dataList7.value.map(item => {
+ item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.alarmTime).getTime()).format('H灏忔椂m鍒嗛挓')
+ return item
+ })
+ })
+}
+
+const dataList8 = ref([])
+const dataIndex8 = ref(0)
+const getData8 = () => {
+ getTemperatureHumidityData().then(res => {
+ dataList8.value = res.data || []
+ })
+}
+const changeData8 = (num) => {
+ if(dataIndex8.value == dataList8.value.length - 1 && num > 0){
+ dataIndex8.value = 0
+ }else if (dataIndex8.value == 0 && num < 0){
+ dataIndex8.value = dataList8.value.length - 1
+ }else{
+ dataIndex8.value = dataIndex8.value + num
+ }
}
const autoplayFlag = (list = [], leng = 4, time = 2000) => {
@@ -943,16 +965,36 @@
}
onMounted(() => {
- getData1()
+ // getData1()
getData2()
getData3()
getData4()
getData5()
- getData6()
+ // getData6()
getData7()
+ getData8()
+ setInterval(() => {
+ getData2()
+ getData3()
+ getData4()
+ // getData6()
+ getData7()
+ }, 60 * 1000)
+ setInterval(() => {
+
+ getData5()
+ getData8()
+
+ }, 60 * 60 * 1000)
initWatergage()
initLiquidlevel()
+
+ setTimeout(() => {
+ loopFn1()
+ loopFn2()
+ }, 12000)
+
})
@@ -1152,6 +1194,7 @@
.content_wrap {
flex: 1;
+ flex-shrink: 0;
margin-right: 20px;
.title_wrap {
@@ -1195,8 +1238,9 @@
}
.icon {
- width: 13px;
- height: 16px;
+ width: 30px;
+ cursor: pointer;
+ /* height: 16px; */
}
}
}
@@ -1227,7 +1271,17 @@
.item {
display: flex;
align-items: center;
-
+ position: relative;
+ .place{
+ position: absolute;
+ top: 120px;
+ right: 70px;
+ z-index: 999;
+ font-size: 13px;
+ color: #869CC9;
+ width: 120px;
+ text-align: center;
+ }
.icon {
width: 70px;
height: 70px;
@@ -1257,7 +1311,6 @@
text-align: center;
position: relative;
left: 30px;
-
.watergage {
width: 130px;
height: 112px;
@@ -1306,17 +1359,18 @@
}
}
- .place {
+ .placeT {
position: relative;
bottom: 10px;
left: 4px;
font-size: 44px;
color: #869CC9;
+ opacity: 0;
}
.liquidlevel {
- width: 320px;
- height: 420px;
+ width: 300px;
+ height: 396px;
}
}
@@ -1351,6 +1405,17 @@
margin-top: 12px;
font-weight: bold;
font-size: 32px;
+
+ }
+
+ .acc {
+ background-image: -webkit-linear-gradient(top,
+ #ffffff 0%,
+ #c8ddff 66%,
+ #95eefc 72%,
+ #95eefc 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
}
.active {
@@ -1468,6 +1533,7 @@
overflow: hidden;
margin-top: 15px;
scrollbar-width: none;
+
.item {
display: flex;
font-size: 13px;
--
Gitblit v1.9.3