From eb49564ab17c6695d8928d5a63a57c58b3cfd79c Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 11 十二月 2024 18:21:30 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
screen/src/views/FireFighting.vue | 591 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 366 insertions(+), 225 deletions(-)
diff --git a/screen/src/views/FireFighting.vue b/screen/src/views/FireFighting.vue
index 2a5d881..8e63144 100644
--- a/screen/src/views/FireFighting.vue
+++ b/screen/src/views/FireFighting.vue
@@ -3,7 +3,7 @@
<div class="main_app">
<img src="@/assets/images/FireFighting/bg@2x.png" class="main_bg" alt="" />
<div class="main_header">
- <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
+ <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
<div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-娑堥槻鎬佸娍鐩戞帶</div>
<div class="time_wrap">
<span class="date">{{ date }}</span>
@@ -31,17 +31,22 @@
<span class="item">鏁呴殰</span>
<span class="item">绂荤嚎</span>
</div>
- <template v-for="i in 5">
- <div class="line">
- <span class="item name">鐏伓鎶ヨ绯荤粺</span>
- <span class="item">11</span>
- <span class="item">11</span>
- <span class="item">11</span>
- <span class="item">11</span>
- <span class="item">11</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.typeName }}</span>
+ <span class="item">{{ item.totalDeviceNum || 0 }}</span>
+ <span class="item">{{ 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>
</div>
- <div class="separate"></div>
- </template>
+ </div>
+
</div>
</div>
</div>
@@ -54,12 +59,12 @@
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
</div>
<div class="police_wrap">
- <div class="item" v-for="(ind, i) in 4">
+ <div class="item" v-for="(item, i) in dataList2">
<div class="head">
- <div class="name">鐪熷疄鎶ヨ鏁�</div>
- <div class="name">{{ i }}娆�</div>
+ <div class="name">{{ item.name }}</div>
+ <div class="name">{{ item.num }}娆�</div>
</div>
- <FirePercent :color="policeColors[i]" :rate="40" />
+ <FirePercent :color="policeColors[i]" :rate="item.rate" />
</div>
</div>
@@ -84,35 +89,35 @@
<img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt="">
<div class="content">
<div class="name">鍦ㄧ嚎</div>
- <div class="num">1000</div>
+ <div class="num">{{ dataList4.onlineDeviceNum }}</div>
</div>
</div>
<div class="item">
<img src="@/assets/images/FireFighting/xiaofang_ic_baojing@2x.png" alt="">
<div class="content">
<div class="name">鎶ヨ</div>
- <div class="num num2">12</div>
+ <div class="num num2">{{ dataList4.alarmDeviceNum }}</div>
</div>
</div>
<div class="item">
<img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt="">
<div class="content">
<div class="name">鏁呴殰</div>
- <div class="num num3">12</div>
+ <div class="num num3">{{ dataList4.errDeviceNum }}</div>
</div>
</div>
<div class="item">
<img src="@/assets/images/FireFighting/xiaofang_ic_lixian@2x.png" alt="">
<div class="content">
<div class="name">绂荤嚎</div>
- <div class="num num4">12</div>
+ <div class="num num4">{{ dataList4.offlineDeviceNum }}</div>
</div>
</div>
<div class="item">
<img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt="">
<div class="content">
<div class="name">灞忚斀</div>
- <div class="num num5">12</div>
+ <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div>
</div>
</div>
</div>
@@ -206,20 +211,27 @@
</div>
<div class="content_wrap">
<div class="list">
- <template v-for="i in 3">
- <div class="item">
- <div>宸茬淮淇�</div>
- <div class="num active">500</div>
- </div>
- <div v-if="i < 3" class="separate"></div>
- </template>
-
+ <div class="item">
+ <div>宸茬淮淇�</div>
+ <div class="num active">{{ dataList5.protectNum }}</div>
+ </div>
+ <div class="separate"></div>
+ <div class="item">
+ <div>璁″垝缁翠繚</div>
+ <div class="num active">{{ dataList5.planProtectTotal }}</div>
+ </div>
+ <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>
</div>
<div class="footer">
<img src="@/assets/images/FireFighting/ic_weixiu@2x.png" class="icon" alt="">
<div class="content">
<div>鏈湀鏂板缁翠繚</div>
- <div class="num">40 <span>涓�</span></div>
+ <div class="num">{{ dataList5.monthAddNum }} <span>涓�</span></div>
</div>
</div>
</div>
@@ -241,14 +253,14 @@
<img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt="">
<div class="content">
<div class="name">鎻愭姤闅愭偅鏁�</div>
- <div class="num"><span>10</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">3</span>涓�</div>
+ <div class="num"><span class="today">{{ dataList4.dangerDealedNum }}</span>涓�</div>
</div>
</div>
</div>
@@ -256,30 +268,38 @@
<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 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="content">
+ <div class="header">
+ <div class="time">
+ <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">宸茬粡鍙戠敓{{ 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.alarmTypeName }}</span>
+ </div>
+ <div class="title">
+ <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
+ <span>{{ item.regionName }}</span>
+ </div>
+ </div>
+ </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>
- <div class="wrap">
- <div class="title">
- <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
- <span>娑堥槻璀﹀憡</span>
- </div>
- <div class="title">
- <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
- <span>address</span>
- </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>
@@ -295,8 +315,20 @@
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'
+import {
+ getFightingalarmData,
+ getFightingHandle,
+ getFightingcenterData,
+ getFightingDeAlarm,
+ getFightingDeviceY,
+ getFighalarmDataList
+} from '@/api'
+
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
const date = ref(dayjs().format('YYYY.MM.DD'))
@@ -309,169 +341,10 @@
}, 1000)
-const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
-const initEchart2 = () => {
- var myChart = echarts.init(document.querySelector('.echart2'))
- // 鐢熸垚鏁版嵁鍜屾棩鏈�
- function getLastSevenDays() {
- const days = []
- const today = new Date()
- for (let i = 10; i >= 0; i--) {
- days.push(`${i + 1}鏈坄) // 鏍煎紡鍖栨棩鏈熶负 "X鏈圶鏃�"
- }
- return days
- }
- // 绀轰緥鏁版嵁
- const data1 = [13, 14, 14, 14, 14, 12, 11, 23, 12, 1] // 鍑嗘椂
- const data2 = [1, 1, 2, 1, 1, 2, 2, 3, 2, 1, 5] // 杩熷埌
- const data3 = [1, 0, 0, 0, 0, 0, 2, 2, 3, 1, 2] // 璇峰亣
- const data4 = [8, 5, 4, 7, 4, 5, 7, 4, 2, 1, 3] // 鍔犵彮
- const option = {
- legend: {
- x: "center",
- textStyle: {
- color: "#FFFFFF", // 鍥句緥鏂囧瓧璁句负鐧借壊
- fontSize: 12
- },
- icon: 'circle',
- top: '6%',
- itemWidth: 8,
- itemHeight: 8,
- itemGap: 20,
- data: ['鍛婅鏁�', '杩涜涓�', '宸插鐞�', '璇姤鏁�'] // 鏇存柊鍥句緥鍚嶇О
- },
- grid: {
- left: '2%',
- right: '0%',
- top: '18%',
- bottom: '10%',
- containLabel: true,
- },
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow"
- },
- textStyle: {
- color: "rgba(255, 255, 255, 1)"
- },
- backgroundColor: "rgba(0,0,0,0.8)",
- borderColor: "rgba(219, 230, 255, 0.8)",
- },
- xAxis: {
- data: getLastSevenDays(), // 浣跨敤杩戜竷澶╂棩鏈�
- axisLabel: {
- color: "#FFFFFF", // X 杞存枃瀛楄涓虹櫧鑹�
- fontSize: 14,
- },
- axisLine: {
- lineStyle: {
- color: '#1E294C'
- }
- },
- axisTick: {
- show: false
- }
- },
- yAxis: {
- show: true,
- axisLabel: {
- color: "#FFFFFF", // Y 杞存枃瀛楄涓虹櫧鑹�
- fontSize: 12,
- },
- axisLine: {
- lineStyle: {
- color: '#A9AEB2'
- }
- },
- axisTick: {
- lineStyle: {
- color: '#A9AEB2'
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: ["#0f1d27"],
- width: 1
- },
- },
- },
- series: [
- {
- name: "鍛婅鏁�",
- type: "bar",
- stack: "attendance",
- data: data1,
- itemStyle: {
- color: '#FEAF01',
- },
- label: {
- show: false,
- color: "#FFFFFF",
- },
- emphasis: {
- focus: "series",
- },
- barWidth: 6,
- },
- {
- name: "杩涜涓�", // 杩熷埌鏁版嵁
- type: "bar",
- stack: "attendance",
- data: data2,
- itemStyle: {
- color: '#28F0C4', // 杩熷埌鐨勯鑹�
- },
- label: {
- show: false,
- color: "#FFFFFF",
- },
- emphasis: {
- focus: "series",
- },
- },
- {
- name: "宸插鐞�", // 璇峰亣鏁版嵁
- type: "bar",
- stack: "attendance",
- data: data3,
- itemStyle: {
- color: '#0193FE', // 璇峰亣鐨勯鑹�
- },
- label: {
- show: false,
- color: "#FFFFFF",
- },
- emphasis: {
- focus: "series",
- },
- },
- {
- name: "璇姤鏁�", // 鍗曠嫭鐨勫姞鐝煴瀛�
- type: "bar",
- data: data4,
- barWidth: 6,
- itemStyle: {
- color: '#FEED01', // 楂樹寒鐨勭传鑹�
- },
- emphasis: {
- focus: "series",
- },
- },
- ],
- }
- myChart.setOption(option)
- window.addEventListener('resize', function () {//鎵ц
- myChart.resize()
- })
-}
-
-const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const initWatergage = () => {
const myChart = echarts.init(document.getElementById('watergage'))
- var data_value = 2
+ var data_value = 1
const option = {
barMaxWidth: 3,
polar: {
@@ -834,10 +707,273 @@
})
}
+const dataList1 = ref([])
+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 = []
+ temp.push({ name: '鐪熷疄鎶ヨ鏁�', num: result.realNum, rate: (result.realNum / result.totalNum) * 100 })
+ temp.push({ name: '璇姤璀︽暟', num: result.errNum, rate: (result.errNum / result.totalNum) * 100 })
+ temp.push({ name: '宸茶В闄�', num: result.liftNum, rate: (result.liftNum / result.totalNum) * 100 })
+ temp.push({ name: '澶勭悊涓�', num: result.processingNum, rate: (result.processingNum / result.totalNum) * 100 })
+ dataList2.value = temp
+ })
+}
+
+const dataList3 = ref([])
+const getData3 = () => {
+ getFightingHandle({ type: 0 }).then(res => {
+ dataList3.value = res.data || []
+ initEchart2()
+ })
+}
+const initEchart2 = () => {
+ var myChart = echarts.init(document.querySelector('.echart2'))
+ // 鐢熸垚鏁版嵁鍜屾棩鏈�
+ // 绀轰緥鏁版嵁
+ 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",
+ textStyle: {
+ color: "#FFFFFF", // 鍥句緥鏂囧瓧璁句负鐧借壊
+ fontSize: 12
+ },
+ icon: 'circle',
+ top: '6%',
+ itemWidth: 8,
+ itemHeight: 8,
+ itemGap: 20,
+ data: ['鍛婅鏁�', '杩涜涓�', '宸插鐞�', '璇姤鏁�'] // 鏇存柊鍥句緥鍚嶇О
+ },
+ grid: {
+ left: '2%',
+ right: '0%',
+ top: '20%',
+ bottom: '10%',
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow"
+ },
+ textStyle: {
+ color: "rgba(255, 255, 255, 1)"
+ },
+ backgroundColor: "rgba(0,0,0,0.8)",
+ borderColor: "rgba(219, 230, 255, 0.8)",
+ },
+ xAxis: {
+ data: months,
+ axisLabel: {
+ color: "#FFFFFF", // X 杞存枃瀛楄涓虹櫧鑹�
+ fontSize: 13,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#1E294C'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ yAxis: {
+ show: true,
+ axisLabel: {
+ color: "#FFFFFF", // Y 杞存枃瀛楄涓虹櫧鑹�
+ fontSize: 12,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#A9AEB2'
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#A9AEB2'
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: ["#0f1d27"],
+ width: 1
+ },
+ },
+ },
+ series: [
+ {
+ name: "鍛婅鏁�",
+ type: "bar",
+ stack: "attendance",
+ data: data1,
+ itemStyle: {
+ color: '#FEAF01',
+ },
+ label: {
+ show: false,
+ color: "#FFFFFF",
+ },
+ emphasis: {
+ focus: "series",
+ },
+ barWidth: 6,
+ },
+ {
+ name: "杩涜涓�", // 杩熷埌鏁版嵁
+ type: "bar",
+ stack: "attendance",
+ data: data2,
+ itemStyle: {
+ color: '#28F0C4', // 杩熷埌鐨勯鑹�
+ },
+ label: {
+ show: false,
+ color: "#FFFFFF",
+ },
+ emphasis: {
+ focus: "series",
+ },
+ },
+ {
+ name: "宸插鐞�", // 璇峰亣鏁版嵁
+ type: "bar",
+ stack: "attendance",
+ data: data3,
+ itemStyle: {
+ color: '#0193FE', // 璇峰亣鐨勯鑹�
+ },
+ label: {
+ show: false,
+ color: "#FFFFFF",
+ },
+ emphasis: {
+ focus: "series",
+ },
+ },
+ {
+ name: "璇姤鏁�", // 鍗曠嫭鐨勫姞鐝煴瀛�
+ type: "bar",
+ data: data4,
+ barWidth: 6,
+ itemStyle: {
+ color: '#FEED01', // 楂樹寒鐨勭传鑹�
+ },
+ emphasis: {
+ focus: "series",
+ },
+ },
+ ],
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+}
+
+const dataList4 = ref({})
+const getData4 = () => {
+ getFightingcenterData().then(res => {
+ dataList4.value = res.data || {}
+ dataList1.value = res.data.deviceTypeList
+ })
+}
+const dataList5 = ref({}) // 缁翠繚
+const getData5 = () => {
+ getFightingDeviceY().then(res => {
+ dataList5.value = res.data || {}
+ })
+}
+const dataList6 = ref([])
+const getData6 = () => {
+ getFightingHandle({ type: 1 }).then(res => {
+ dataList6.value = res.data
+ })
+}
+const dataList7 = ref([])
+const getData7 = () => {
+ 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 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
+ })
+}
+
onMounted(() => {
- initEchart2()
+ // getData1()
+ getData2()
+ getData3()
+ getData4()
+ getData5()
+ // getData6()
+ getData7()
+ setInterval(() => {
+ getData2()
+ getData3()
+ getData4()
+ // getData6()
+ getData7()
+ }, 60 * 1000)
+ setInterval(() => {
+
+ getData5()
+
+ }, 60 * 60 * 1000)
+
initWatergage()
initLiquidlevel()
+
+ setTimeout(() => {
+ loopFn1()
+ loopFn2()
+ }, 12000)
+
})
@@ -858,12 +994,18 @@
.left_box_one {
width: 100%;
margin-bottom: 20px;
- border: 1px solid;
.list_wrap {
padding: 10px 0;
- height: 227px;
- overflow: auto;
+
+ .list_content {
+ height: 170px;
+ overflow: hidden;
+
+ .line_wrap {
+ height: 34px !important;
+ }
+ }
.list {
.line {
@@ -922,7 +1064,6 @@
.police_wrap {
padding: 15px 20px 0;
height: 225px;
- border: 1px solid;
.item {
margin-bottom: 5px;
@@ -941,7 +1082,6 @@
.left_box_three {
.dispose_wrap {
- border: 1px solid;
height: 210px;
width: 100%;
@@ -1121,7 +1261,7 @@
font-weight: 500;
span {
- font-style: 14px;
+ font-size: 14px;
font-weight: 400;
}
}
@@ -1345,8 +1485,8 @@
}
.list {
- height: 330px;
- overflow: auto;
+ height: 320px;
+ overflow: hidden;
margin-top: 15px;
scrollbar-width: none;
@@ -1354,6 +1494,7 @@
display: flex;
font-size: 13px;
color: #D2E0FF;
+ height: 80px !important;
.icon {
width: 40px;
@@ -1413,7 +1554,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