From 6139494798e7f91d7864fff4ed09ce9a08395ece Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 24 十月 2024 18:29:54 +0800
Subject: [PATCH] ll
---
screen/src/views/FireFighting.vue | 239 ++++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 161 insertions(+), 78 deletions(-)
diff --git a/screen/src/views/FireFighting.vue b/screen/src/views/FireFighting.vue
index 864f2c5..2a5d881 100644
--- a/screen/src/views/FireFighting.vue
+++ b/screen/src/views/FireFighting.vue
@@ -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="(ind, i) in 4">
+ <div class="head">
+ <div class="name">鐪熷疄鎶ヨ鏁�</div>
+ <div class="name">{{ i }}娆�</div>
+ </div>
+ <FirePercent :color="policeColors[i]" :rate="40" />
+ </div>
+
</div>
</div>
<div class="left_box_three">
@@ -286,7 +293,7 @@
<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'
@@ -303,99 +310,165 @@
}, 1000)
const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
-const initEnergy = () => {
- var myChart = echarts.init(document.querySelector('.energyRef'))
- // 缁樺埗鍥捐〃
- const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
- myChart.setOption({
+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: {
- top: '20%',
left: '2%',
- right: '2%',
- bottom: '4%',
- containLabel: true
+ right: '0%',
+ top: '18%',
+ bottom: '10%',
+ containLabel: true,
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'line'
+ type: "shadow"
},
+ textStyle: {
+ color: "rgba(255, 255, 255, 1)"
+ },
+ backgroundColor: "rgba(0,0,0,0.8)",
+ borderColor: "rgba(219, 230, 255, 0.8)",
},
xAxis: {
- type: 'category',
- data: [1, 2, 3, 4, 4, 5]
+ data: getLastSevenDays(), // 浣跨敤杩戜竷澶╂棩鏈�
+ axisLabel: {
+ color: "#FFFFFF", // X 杞存枃瀛楄涓虹櫧鑹�
+ fontSize: 14,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#1E294C'
+ }
+ },
+ axisTick: {
+ show: false
+ }
},
yAxis: {
- type: 'value',
- name: 'kw路h',
- nameTextStyle: {
- padding: [0, 0, 4, -30] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ show: true,
+ axisLabel: {
+ color: "#FFFFFF", // Y 杞存枃瀛楄涓虹櫧鑹�
+ fontSize: 12,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#A9AEB2'
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#A9AEB2'
+ }
},
splitLine: {
show: true,
lineStyle: {
- //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
- color: 'rgba(255,255,255,0.14)',
- }
- }
+ color: ["#0f1d27"],
+ width: 1
+ },
+ },
},
series: [
{
- data: [1, 2, 3, 4, 5],
- type: 'bar',
- barWidth: 10,
+ name: "鍛婅鏁�",
+ type: "bar",
+ stack: "attendance",
+ data: data1,
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]
- }
- }
- }
- ]
- })
+ 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 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 policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const initWatergage = () => {
const myChart = echarts.init(document.getElementById('watergage'))
var data_value = 2
@@ -762,8 +835,7 @@
}
onMounted(() => {
- // initEnergy()
- // initEchart1()
+ initEchart2()
initWatergage()
initLiquidlevel()
})
@@ -848,13 +920,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;
+ }
}
}
}
@@ -921,12 +1001,14 @@
#dd4c26 50%,
#e43724 100%);
}
+
.num3 {
background-image: -webkit-linear-gradient(top,
#fff 0%,
#e9bf43 50%,
#eb8131 100%);
}
+
.num4 {
background-image: -webkit-linear-gradient(top,
#fff 0%,
@@ -1056,6 +1138,7 @@
text-align: center;
position: relative;
left: 30px;
+
.watergage {
width: 130px;
height: 112px;
--
Gitblit v1.9.3