From c50686f775664c5a722f4b5ad7afde1e5214b14d Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 05 十一月 2024 19:07:21 +0800
Subject: [PATCH] 最新版本541200007
---
screen/src/views/FireFighting.vue | 452 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 301 insertions(+), 151 deletions(-)
diff --git a/screen/src/views/FireFighting.vue b/screen/src/views/FireFighting.vue
index 3f6231d..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,7 +54,14 @@
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
</div>
<div class="police_wrap">
- <div class="echart1" id="echart1"></div>
+ <div class="item" v-for="(item, i) in dataList2">
+ <div class="head">
+ <div class="name">{{ item.name }}</div>
+ <div class="name">{{ item.num }}娆�</div>
+ </div>
+ <FirePercent :color="policeColors[i]" :rate="item.rate" />
+ </div>
+
</div>
</div>
<div class="left_box_three">
@@ -77,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">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">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">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">12</div>
+ <div class="num num5">{{ dataList4.shieldDeviceNum }}</div>
</div>
</div>
</div>
@@ -199,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>
@@ -234,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>
@@ -270,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>
@@ -286,10 +299,17 @@
<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
-import Percent from '@/components/percent.vue'
+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'))
@@ -302,100 +322,7 @@
}, 1000)
-const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
-const initEnergy = () => {
- var myChart = echarts.init(document.querySelector('.energyRef'))
- // 缁樺埗鍥捐〃
- const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
- myChart.setOption({
- grid: {
- top: '20%',
- left: '2%',
- right: '2%',
- bottom: '4%',
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'line'
- },
- },
- xAxis: {
- type: 'category',
- data: [1, 2, 3, 4, 4, 5]
- },
- yAxis: {
- type: 'value',
- name: 'kw路h',
- nameTextStyle: {
- padding: [0, 0, 4, -30] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
- },
- splitLine: {
- show: true,
- lineStyle: {
- //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
- color: 'rgba(255,255,255,0.14)',
- }
- }
- },
- series: [
- {
- data: [1, 2, 3, 4, 5],
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- { offset: 0, color: arr[1] },
- { offset: 1, color: '#080807' }
- ]
- ),
- barBorderRadius: [10, 10, 0, 0]
- }
- }
- }
- ]
- })
- window.addEventListener('resize', function () {//鎵ц
- myChart.resize()
- })
-}
-const initEchart1 = () => {
- const myChart = echarts.init(document.getElementById('echart1'))
- const option = {
- series: [
- {
- type: 'pie',
- radius: ['86%', '100%'],
- label: {
- show: false,
- position: 'center'
- },
- padAngle: 5,
- itemStyle: {
- borderRadius: 10
- },
- color: colors,
- labelLine: {
- show: false
- },
- data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' }
- ]
- }
- ]
- }
- myChart.setOption(option)
- window.addEventListener('resize', function () { // 鎵ц
- myChart.resize()
- })
-}
const initWatergage = () => {
const myChart = echarts.init(document.getElementById('watergage'))
var data_value = 2
@@ -761,9 +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(() => {
- // initEnergy()
- // initEchart1()
+ getData1()
+ getData2()
+ getData3()
+ getData4()
+ getData5()
+ getData6()
+
initWatergage()
initLiquidlevel()
})
@@ -848,13 +975,21 @@
margin-bottom: 20px;
.police_wrap {
+ padding: 15px 20px 0;
height: 225px;
-
border: 1px solid;
- .echart1 {
- width: 100%;
- height: 100%;
+ .item {
+ margin-bottom: 5px;
+
+ .head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 16px;
+ color: #FFFFFF;
+ margin-bottom: 8px;
+ }
}
}
}
@@ -903,32 +1038,44 @@
font-size: 12px;
color: #D2E0FF;
- span {
- font-weight: bold;
- font-size: 30px;
- margin-right: 5px;
- font-weight: 600;
- background-image: -webkit-linear-gradient(top,
- #01D9FE 0%,
- #01D9FE 60%,
- #fff 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
+ font-weight: bold;
+ font-size: 30px;
+ margin-right: 5px;
+ font-weight: 600;
+ background-image: -webkit-linear-gradient(top,
+ #01D9FE 0%,
+ #01D9FE 60%,
+ #fff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
- .today {
- background-image: -webkit-linear-gradient(top,
- #fff 0%,
- #20FFC5 50%,
- #20FFC5 100%);
- }
+ .num2 {
+ background-image: -webkit-linear-gradient(top,
+ #fff 0%,
+ #dd4c26 50%,
+ #e43724 100%);
+ }
- .finish {
- background-image: -webkit-linear-gradient(top,
- #fff 0%,
- #FFB120 50%,
- #FFB120 100%);
- }
+ .num3 {
+ background-image: -webkit-linear-gradient(top,
+ #fff 0%,
+ #e9bf43 50%,
+ #eb8131 100%);
+ }
+
+ .num4 {
+ background-image: -webkit-linear-gradient(top,
+ #fff 0%,
+ #9e9e9e 50%,
+ #9e9e9e 100%);
+ }
+
+ .num5 {
+ background-image: -webkit-linear-gradient(top,
+ #fff 0%,
+ #3a83f5 50%,
+ #3a83f5 100%);
}
}
}
@@ -1044,6 +1191,8 @@
.watergage_wrap {
text-align: center;
+ position: relative;
+ left: 30px;
.watergage {
width: 130px;
@@ -1079,6 +1228,7 @@
position: relative;
left: 20px;
bottom: 10px;
+
.unit {
font-weight: 500;
font-size: 80px;
@@ -1096,7 +1246,7 @@
position: relative;
bottom: 10px;
left: 4px;
- font-size:44px;
+ font-size: 44px;
color: #869CC9;
}
--
Gitblit v1.9.3