From fb8960f8c094f4905ee37ceb09dc6e22d276e8b6 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期三, 30 十月 2024 13:59:08 +0800
Subject: [PATCH] ll
---
screen/src/views/FireFighting.vue | 433 ++++++++++++++++++++++++++++++-----------------------
1 files changed, 244 insertions(+), 189 deletions(-)
diff --git a/screen/src/views/FireFighting.vue b/screen/src/views/FireFighting.vue
index 2a5d881..25fd46a 100644
--- a/screen/src/views/FireFighting.vue
+++ b/screen/src/views/FireFighting.vue
@@ -31,14 +31,14 @@
<span class="item">鏁呴殰</span>
<span class="item">绂荤嚎</span>
</div>
- <template v-for="i in 5">
+ <template v-for="(item, i) in dataList1" :key="i">
<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>
+ <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>
</template>
@@ -54,12 +54,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 +84,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 }}</div>
</div>
</div>
</div>
@@ -206,20 +206,26 @@
</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 +247,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.todayDangerNum }}</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.dealDangerNum }}</span>涓�</div>
</div>
</div>
</div>
@@ -277,7 +283,7 @@
</div>
<div class="title">
<img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
- <span>address</span>
+ <span>A鍘傛埧3杞﹂棿闂ㄥ彛</span>
</div>
</div>
</div>
@@ -295,8 +301,15 @@
import VScaleScreen from 'v-scale-screen'
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'
-
import * as echarts from 'echarts'
+import {
+ getFightingalarmData,
+ getFightingHandle,
+ getFightingcenterData,
+ getFightingDeAlarm,
+ getFightingDeviceY,
+} from '@/api'
+
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
const date = ref(dayjs().format('YYYY.MM.DD'))
@@ -309,166 +322,7 @@
}, 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
@@ -834,8 +688,209 @@
})
}
+const dataList1 = ref([])
+const getData1 = () => {
+ getFightingDeAlarm().then(res => {
+ dataList1.value = res.data
+ })
+}
+const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
+const dataList2 = ref([])
+const getData2 = () => {
+ 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.alarmNum)
+ 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 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: dataList3.value.map(i => i.monthStr),
+ 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 dataList4 = ref({})
+const getData4 = () => {
+ getFightingcenterData().then(res => {
+ dataList4.value = res.data || {}
+ })
+}
+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
+ })
+}
+
onMounted(() => {
- initEchart2()
+ getData1()
+ getData2()
+ getData3()
+ getData4()
+ getData5()
+ getData6()
+
initWatergage()
initLiquidlevel()
})
--
Gitblit v1.9.3